smoothly 0.1.110 → 0.1.111
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_49.cjs.entry.js → smoothly-accordion_50.cjs.entry.js} +100 -65
- package/dist/cjs/smoothly-display-demo.cjs.entry.js +1 -1
- package/dist/cjs/smoothly-notifier.cjs.entry.js +1 -1
- package/dist/cjs/smoothly-svg.cjs.entry.js +41 -0
- package/dist/cjs/smoothly.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/display-demo/index.js +3 -1
- package/dist/collection/components/notifier/style.css +1 -1
- package/dist/collection/components/svg/index.js +92 -0
- package/dist/collection/components/svg/style.css +11 -0
- package/dist/custom-elements/index.d.ts +6 -0
- package/dist/custom-elements/index.js +107 -70
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{smoothly-accordion_49.entry.js → smoothly-accordion_50.entry.js} +100 -66
- package/dist/esm/smoothly-display-demo.entry.js +1 -1
- package/dist/esm/smoothly-notifier.entry.js +1 -1
- package/dist/esm/smoothly-svg.entry.js +37 -0
- package/dist/esm/smoothly.js +1 -1
- package/dist/smoothly/{p-075d2106.entry.js → p-16bd3296.entry.js} +1 -1
- package/dist/smoothly/smoothly-display-demo.entry.js +1 -1
- package/dist/smoothly/smoothly-notifier.entry.js +1 -1
- package/dist/smoothly/smoothly-svg.entry.js +37 -0
- package/dist/smoothly/smoothly.esm.js +1 -1
- package/dist/types/components/svg/index.d.ts +10 -0
- package/dist/types/components.d.ts +19 -0
- package/package.json +1 -1
|
@@ -3,7 +3,7 @@ import { A as App, N as Notice } from './Notice-402f146e.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$G = "smoothly-accordion-item.sc-smoothly-accordion{border:1px solid rgb(var(--smoothly-dark-color));border-bottom:none}smoothly-accordion-item.sc-smoothly-accordion:first-of-type{border-top-left-radius:4px;border-top-right-radius:4px;margin-top:0.4em}smoothly-accordion-item.sc-smoothly-accordion:last-of-type{border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-bottom:1px solid rgb(var(--smoothly-dark-color));margin-bottom:0.6em}smoothly-accordion-item[open].sc-smoothly-accordion{border-color:rgb(var(--smoothly-primary-color));border-bottom:1px solid rgb(var(--smoothly-primary-color))}smoothly-accordion-item[open].sc-smoothly-accordion+smoothly-accordion-item.sc-smoothly-accordion{border-top:none}";
|
|
7
7
|
|
|
8
8
|
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$G;
|
|
53
53
|
|
|
54
|
-
const styleCss$
|
|
54
|
+
const styleCss$F = ".sc-smoothly-accordion-item-h{display:block}[hidden].sc-smoothly-accordion-item-h{display:none}details.sc-smoothly-accordion-item{padding:0}details.sc-smoothly-accordion-item>summary.sc-smoothly-accordion-item>span.sc-smoothly-accordion-item{float:right;margin:0.2em;font-size:60%}details.sc-smoothly-accordion-item>summary.sc-smoothly-accordion-item{font-size:120%;list-style-type:none;cursor:pointer;padding:0.4em;color:rgb(var(--smoothly-text-tint))}details.sc-smoothly-accordion-item>fieldset.sc-smoothly-accordion-item{border:none;margin:0;padding:0}[open].sc-smoothly-accordion-item-h>details.sc-smoothly-accordion-item>summary.sc-smoothly-accordion-item{color:rgb(var(--smoothly-primary-contrast));background:rgb(var(--smoothly-primary-color))}details.sc-smoothly-accordion-item>summary.sc-smoothly-accordion-item::-webkit-details-marker{display:none}details.sc-smoothly-accordion-item>summary.sc-smoothly-accordion-item>svg.sc-smoothly-accordion-item{width:1em;height:auto;margin-bottom:-0.2em;margin-right:0.4em}[open].sc-smoothly-accordion-item-h>details.sc-smoothly-accordion-item>summary.sc-smoothly-accordion-item>svg.sc-smoothly-accordion-item{fill:rgb(var(--smoothly-primary-contrast))}.sc-smoothly-accordion-item-h:not([open])>details.sc-smoothly-accordion-item>summary.sc-smoothly-accordion-item>svg.sc-smoothly-accordion-item{fill:rgb(var(--smoothly-text-tint))}";
|
|
55
55
|
|
|
56
56
|
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$F;
|
|
100
100
|
|
|
101
|
-
const styleCss$
|
|
101
|
+
const styleCss$E = "smoothly-app{display:block;scrollbar-width:none}smoothly-app[hidden]{display:none}smoothly-app[color=default],smoothly-app:not([color]){--smoothly-app-background:var(--smoothly-default-color);--smoothly-app-color:var(--smoothly-default-contrast);--smoothly-app-hover-background:var(--smoothly-primary-color);--smoothly-app-hover-color:var(--smoothly-primary-contrast);--smoothly-app-shadow:var(--smoothly-default-shadow)}smoothly-app[color=primary]{--smoothly-app-background:var(--smoothly-primary-shade);--smoothly-app-color:var(--smoothly-primary-contrast);--smoothly-app-hover-background:var(--smoothly-secondary-color);--smoothly-app-hover-color:var(--smoothly-secondary-contrast);--smoothly-app-shadow:var(--smoothly-primary-shadow)}smoothly-app[color=secondary]{--smoothly-app-background:var(--smoothly-secondary-shade);--smoothly-app-color:var(--smoothly-secondary-contrast);--smoothly-app-hover-background:var(--smoothly-primary-color);--smoothly-app-hover-color:var(--smoothly-primary-contrast);--smoothly-app-shadow:var(--smoothly-secondary-shadow)}smoothly-app[color=tertiary],smoothly-app[color=success],smoothly-app[color=warning],smoothly-app[color=danger]{--smoothly-app-background:var(--smoothly-color-shade);--smoothly-app-color:var(--smoothly-color-contrast);--smoothly-app-hover-background:var(--smoothly-default-shade);--smoothly-app-hover-color:var(--smoothly-default-contrast);--smoothly-app-shadow:var(--smoothly-color-shadow)}smoothly-app>smoothly-notifier>header{position:fixed;top:0;left:0;width:100%;z-index:5;height:90px;background-color:rgb(var(--smoothly-app-background));color:rgba(var(--smoothly-medium-color));fill:rgb(var(--smoothly-medium-color));stroke:rgb(var(--smoothly-medium-color));display:flex;font-size:18px;justify-content:space-between;align-items:center;box-shadow:0 2px 5px 0 rgba(var(--smoothly-app-shadow));border-bottom:1px solid rgba(var(--smoothly-dark-color))}smoothly-app>smoothly-notifier>header a{color:inherit;text-decoration:inherit}smoothly-app>smoothly-notifier>header>nav{flex-shrink:0;width:100%;flex-shrink:2}smoothly-app>smoothly-notifier>header>h1,smoothly-app>smoothly-notifier>header>nav,smoothly-app>smoothly-notifier>header>nav>ul,smoothly-app>smoothly-notifier>header>nav>ul>li,smoothly-app>smoothly-notifier>header>nav>ul>li>*:not(a){display:flex;height:100%;margin:0}smoothly-app>smoothly-notifier>header>h1{margin-left:60px}smoothly-app>smoothly-notifier>header>h1>a{overflow:hidden;user-select:none;height:200%;display:flex;align-self:center;size:100%;background-position-y:center}smoothly-app>smoothly-notifier>header>nav>ul>li a{line-height:1.6cm}smoothly-app>smoothly-notifier>header>nav>ul{width:100%}smoothly-app>smoothly-notifier>header>[slot=\"header\"]{display:flex;margin-right:34.25px;justify-content:flex-end;border:0}smoothly-app>smoothly-notifier>header>[slot=\"header\"]>a{display:flex;align-self:center;border-width:0;align-items:center;margin-right:62.25px}smoothly-app>smoothly-notifier>header>[slot=\"header\"]>a>smoothly-icon{fill:rgb(var(--smoothly-primary-shade));stroke:rgb(var(--smoothly-primary-shade));color:rgb(var(--smoothly-primary-shade))}smoothly-app>smoothly-notifier>header>nav>ul>li a{display:flex;height:36px;margin:0 0.4cm;text-decoration:none}smoothly-app>smoothly-notifier>header>nav>ul>li>a{display:flex;align-items:center;align-self:center;margin-bottom:2px}smoothly-app>smoothly-notifier>header>nav>ul>li smoothly-trigger.sc-smoothly-trigger-h{border:0}smoothly-app>smoothly-notifier>header>nav>ul>li>a>smoothly-icon>svg{fill:rgb(var(--smoothly-medium-color));stroke:rgb(var(--smoothly-medium-color));color:rgb(var(--smoothly-medium-color));align-items:center;display:flex}smoothly-app>smoothly-notifier>header>nav>ul>li>a:hover>smoothly-icon>svg,smoothly-app>smoothly-notifier>header>nav>ul>li>a.active>smoothly-icon>svg{color:rgb(var(--smoothly-app-color));stroke:rgb(var(--smoothly-app-color));fill:rgb(var(--smoothly-app-color))}smoothly-app>smoothly-notifier>header>nav>ul>li>smoothly-trigger.active a>smoothly-icon,smoothly-app>smoothly-notifier>header>nav>ul>li>smoothly-trigger:hover a>smoothly-icon,smoothly-app>smoothly-notifier>header>nav>ul>li a:hover,smoothly-app>smoothly-notifier>header>nav>ul>li a.active{border-bottom:2px solid rgb(var(--smoothly-app-color));margin-bottom:0px;border-bottom-width:2px;color:rgb(var(--smoothly-app-color));stroke:rgb(var(--smoothly-app-color));fill:rgb(var(--smoothly-app-color))}smoothly-app>smoothly-notifier>content{position:relative;top:90px}";
|
|
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$E;
|
|
112
112
|
|
|
113
113
|
let SmoothlyAppDemo = class {
|
|
114
114
|
constructor(hostRef) {
|
|
@@ -131,7 +131,7 @@ let SmoothlyAppDemo = class {
|
|
|
131
131
|
}
|
|
132
132
|
};
|
|
133
133
|
|
|
134
|
-
const styleCss$
|
|
134
|
+
const styleCss$D = ".sc-smoothly-backtotop-h{background-color:rgba(var(--smoothly-default-color), 1);opacity:var(--opacity);pointer-events:var(--pointer-events);transition:opacity 400ms;z-index:3;border-radius:50%;box-shadow:var(--smoothly-shadow);height:3rem;width:3rem;position:fixed;bottom:var(--bottom);right:var(--right);outline:none;cursor:pointer;display:flex;justify-content:center;align-items:center}";
|
|
135
135
|
|
|
136
136
|
let SmoothlyBacktotop = class {
|
|
137
137
|
constructor(hostRef) {
|
|
@@ -159,7 +159,7 @@ let SmoothlyBacktotop = class {
|
|
|
159
159
|
}) }, h("smoothly-icon", { name: "chevron-up-outline" })));
|
|
160
160
|
}
|
|
161
161
|
};
|
|
162
|
-
SmoothlyBacktotop.style = styleCss$
|
|
162
|
+
SmoothlyBacktotop.style = styleCss$D;
|
|
163
163
|
|
|
164
164
|
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
|
165
165
|
|
|
@@ -18854,7 +18854,7 @@ function years(current) {
|
|
|
18854
18854
|
return result;
|
|
18855
18855
|
}
|
|
18856
18856
|
|
|
18857
|
-
const styleCss$
|
|
18857
|
+
const styleCss$C = ".sc-smoothly-calendar-h{display:block;--other-month-opacity:0.5}.sc-smoothly-calendar-h>smoothly-input-month.sc-smoothly-calendar{width:calc(100% - 1em);padding:0.5em 0.5em 0 0.5em}th.sc-smoothly-calendar,td.sc-smoothly-calendar{text-align:center;padding:0.5em;min-width:2em;background-color:rgb(var(--smoothly-default-shade));cursor:pointer;user-select:none}td.currentMonth.sc-smoothly-calendar{color:rgb(var(--smoothly-default-contrast))}td.sc-smoothly-calendar:not(.currentMonth){color:rgba(var(--smoothly-default-contrast), var(--other-month-opacity))}td.sc-smoothly-calendar:nth-child(6):not(.currentMonth).selected,td.sc-smoothly-calendar:nth-child(6):not(.currentMonth).dateRange,td.sc-smoothly-calendar:nth-child(7):not(.currentMonth).selected,td.sc-smoothly-calendar:nth-child(7):not(.currentMonth).dateRange{color:rgba(var(--smoothly-default-contrast))}td.sc-smoothly-calendar:nth-child(6),td.sc-smoothly-calendar:nth-child(7){color:rgb(var(--smoothly-danger-tint))}td.sc-smoothly-calendar:nth-child(6):not(.currentMonth),td.sc-smoothly-calendar:nth-child(7):not(.currentMonth){color:rgba(var(--smoothly-danger-tint), var(--other-month-opacity))}td.sc-smoothly-calendar:not(.selected,.disable).sc-smoothly-calendar:hover{color:rgb(var(--smoothly-primary-contrast));background:rgb(var(--smoothly-primary-tint))}td.selected.sc-smoothly-calendar{color:rgb(var(--smoothly-primary-contrast));background:rgb(var(--smoothly-primary-color))}td.sc-smoothly-calendar:not(.selected,.dateRange).sc-smoothly-calendar:not(:hover).today{background:rgb(var(--smoothly-dark-tint));color:rgb(var(--smoothly-dark-contrast))}td.dateRange.sc-smoothly-calendar{color:rgb(var(--smoothly-primary-contrast));background:rgb(var(--smoothly-primary-tint))}td.disable.sc-smoothly-calendar{cursor:not-allowed;background-color:rgb(var(--smoothly-default-tint), 0.5);color:rgb(var(--smoothly-default-contrast), 0.5)}";
|
|
18858
18858
|
|
|
18859
18859
|
let Calendar = class {
|
|
18860
18860
|
constructor(hostRef) {
|
|
@@ -18937,7 +18937,7 @@ let Calendar = class {
|
|
|
18937
18937
|
"end": ["onEnd"]
|
|
18938
18938
|
}; }
|
|
18939
18939
|
};
|
|
18940
|
-
Calendar.style = styleCss$
|
|
18940
|
+
Calendar.style = styleCss$C;
|
|
18941
18941
|
|
|
18942
18942
|
var CallingCode_1 = createCommonjsModule(function (module, exports) {
|
|
18943
18943
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
@@ -37349,7 +37349,7 @@ function create(language) {
|
|
|
37349
37349
|
}, language);
|
|
37350
37350
|
}
|
|
37351
37351
|
|
|
37352
|
-
const styleCss$
|
|
37352
|
+
const styleCss$B = ".sc-smoothly-checkbox-h{display:block}[hidden].sc-smoothly-checkbox-h{display:none}smoothly-icon.sc-smoothly-checkbox{cursor:pointer}smoothly-icon.sc-smoothly-checkbox:nth-child(2){position:absolute;transform:scaleX(0.6)}[disabled].sc-smoothly-checkbox-h smoothly-icon.sc-smoothly-checkbox{stroke:rgba(var(--smoothly-color-contrast), 0.3)}";
|
|
37353
37353
|
|
|
37354
37354
|
let SmoothlyCheckbox = class {
|
|
37355
37355
|
constructor(hostRef) {
|
|
@@ -37376,9 +37376,9 @@ let SmoothlyCheckbox = class {
|
|
|
37376
37376
|
}
|
|
37377
37377
|
get element() { return getElement(this); }
|
|
37378
37378
|
};
|
|
37379
|
-
SmoothlyCheckbox.style = styleCss$
|
|
37379
|
+
SmoothlyCheckbox.style = styleCss$B;
|
|
37380
37380
|
|
|
37381
|
-
const styleCss$
|
|
37381
|
+
const styleCss$A = ".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}";
|
|
37382
37382
|
|
|
37383
37383
|
let SmoothlyDialog = class {
|
|
37384
37384
|
constructor(hostRef) {
|
|
@@ -37405,7 +37405,7 @@ let SmoothlyDialog = class {
|
|
|
37405
37405
|
}
|
|
37406
37406
|
render() { return h(Host, this.hostData(), this.__stencil_render()); }
|
|
37407
37407
|
};
|
|
37408
|
-
SmoothlyDialog.style = styleCss$
|
|
37408
|
+
SmoothlyDialog.style = styleCss$A;
|
|
37409
37409
|
|
|
37410
37410
|
let SmoothlyDialogDemo = class {
|
|
37411
37411
|
constructor(hostRef) {
|
|
@@ -38991,7 +38991,7 @@ Object.defineProperty(exports, "StateEditor", { enumerable: true, get: function
|
|
|
38991
38991
|
//# sourceMappingURL=index.js.map
|
|
38992
38992
|
});
|
|
38993
38993
|
|
|
38994
|
-
const styleCss$
|
|
38994
|
+
const styleCss$z = ".sc-smoothly-display-h{display:block}[hidden].sc-smoothly-display-h{display:none}";
|
|
38995
38995
|
|
|
38996
38996
|
let SmoothlyDisplay = class {
|
|
38997
38997
|
constructor(hostRef) {
|
|
@@ -39020,9 +39020,9 @@ let SmoothlyDisplay = class {
|
|
|
39020
39020
|
return result;
|
|
39021
39021
|
}
|
|
39022
39022
|
};
|
|
39023
|
-
SmoothlyDisplay.style = styleCss$
|
|
39023
|
+
SmoothlyDisplay.style = styleCss$z;
|
|
39024
39024
|
|
|
39025
|
-
const styleCss$
|
|
39025
|
+
const styleCss$y = ".sc-smoothly-display-amount-h{display:block}[hidden].sc-smoothly-display-amount-h{display:none}";
|
|
39026
39026
|
|
|
39027
39027
|
let SmoothlyDisplayAmount = class {
|
|
39028
39028
|
constructor(hostRef) {
|
|
@@ -39070,9 +39070,9 @@ let SmoothlyDisplayAmount = class {
|
|
|
39070
39070
|
];
|
|
39071
39071
|
}
|
|
39072
39072
|
};
|
|
39073
|
-
SmoothlyDisplayAmount.style = styleCss$
|
|
39073
|
+
SmoothlyDisplayAmount.style = styleCss$y;
|
|
39074
39074
|
|
|
39075
|
-
const styleCss$
|
|
39075
|
+
const styleCss$x = ".sc-smoothly-display-date-time-h{display:block}[hidden].sc-smoothly-display-date-time-h{display:none}";
|
|
39076
39076
|
|
|
39077
39077
|
let SmoothlyDisplayDateTime = class {
|
|
39078
39078
|
constructor(hostRef) {
|
|
@@ -39083,7 +39083,7 @@ let SmoothlyDisplayDateTime = class {
|
|
|
39083
39083
|
return [datetime[0], " ", datetime[1]];
|
|
39084
39084
|
}
|
|
39085
39085
|
};
|
|
39086
|
-
SmoothlyDisplayDateTime.style = styleCss$
|
|
39086
|
+
SmoothlyDisplayDateTime.style = styleCss$x;
|
|
39087
39087
|
|
|
39088
39088
|
let SmoothlyDisplayDemo = class {
|
|
39089
39089
|
constructor(hostRef) {
|
|
@@ -39096,12 +39096,12 @@ let SmoothlyDisplayDemo = class {
|
|
|
39096
39096
|
}
|
|
39097
39097
|
render() {
|
|
39098
39098
|
return [
|
|
39099
|
-
h("main", null, h("smoothly-popup", null, h("div", null, "Popup, click me"), h("div", { color: "dark", slot: "popup" }, "1 line popup")), h("smoothly-display-date-time", { datetime: "2019-08-15T08:08:17.65Z" }), h("dl", null, h("dt", null, "text"), h("dd", null, h("smoothly-display", { type: "text", value: "text" })), h("dt", null, "postal code"), h("dd", null, h("smoothly-display", { type: "postal-code", value: "752 31" })), h("dt", null, "password"), h("dd", null, h("smoothly-display", { type: "password", value: "password" })), h("dt", null, "email"), h("dd", null, h("smoothly-display", { type: "email", value: "test@example.com" })), h("dt", null, "price"), h("dd", null, h("smoothly-display", { type: "price", value: "13.37", currency: "SEK" })), h("dt", null, "percent"), h("dd", null, h("smoothly-display", { type: "percent", value: "42" })), h("dt", null, "phone"), h("dd", null, h("smoothly-display", { type: "phone", value: "0101881108" })), h("dt", null, "card number"), h("dd", null, h("smoothly-display", { type: "card-number", value: "4111111111111111" })), h("dt", null, "card expires"), h("dd", null, h("smoothly-display", { type: "card-expires", value: "7/22" })), h("dt", null, "card csc"), h("dd", null, h("smoothly-display", { type: "card-csc", value: "987" })), h("dt", null, "Quiet"), h("dd", null, h("smoothly-quiet", { color: "dark" }, "-"))), h("smoothly-skeleton", { period: 3, distance: "20rem", width: "20rem" }), h("smoothly-skeleton", { period: 3, distance: "20rem", color: "200,200,255" }), h("smoothly-skeleton", { period: 3, distance: "20rem", color: "var(--smoothly-warning-color)" }), h("smoothly-skeleton", { period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem", width: "20rem" }), h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem", width: "20rem" }), h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" }), h("smoothly-urlencoded", { data: "hej=hopp&tjena=moss" }), h("div", { style: { display: "flex", justifyContent: "space-between" } }, h("smoothly-popup", { direction: "down" }, "Click for popup", h("span", { slot: "popup", color: "dark", style: { whiteSpace: "nowrap" } }, "Some popup stuff that has a lot of text")), h("smoothly-popup", { direction: "down" }, "Click for popup", h("span", { slot: "popup", color: "dark", style: { whiteSpace: "nowrap" } }, "Some popup with a bunch of text."))), h("p", null, "Test of diffrent kinds of notifier:"), h("button", { onClick: () => this.noticeWarning(Notice.warn("This is a test warning notice.")) }, "warning"), h("button", { onClick: () => this.noticeWarning(Notice.succeded("This is a test success notice.")) }, "success"), h("button", { onClick: () => this.noticeWarning(Notice.failed("This is a test danger notice.")) }, "danger"), h("button", { onClick: () => this.noticeWarning(Notice.execute("This is a test execute notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "execute"), h("button", { onClick: () => this.noticeWarning(Notice.delay("This is a test delay notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "delay"), h("div", { style: { position: "relative", height: "10em" } }, "Large Spinner", h("smoothly-spinner", { active: true, size: "large", style: { "--background-color": "255,255,255", "--background-opacity": "0.2", "--spinner-color": "0,130,0", } })), h("div", { style: { position: "relative", height: "10em" } }, "Medium Spinner", h("smoothly-spinner", { active: true, size: "medium" })), h("div", { style: { position: "relative", height: "10em" } }, "Small Spinner", h("smoothly-spinner", { active: true, size: "small" }))),
|
|
39099
|
+
h("main", null, h("smoothly-popup", null, h("div", null, "Popup, click me"), h("div", { color: "dark", slot: "popup" }, "1 line popup")), h("smoothly-display-date-time", { datetime: "2019-08-15T08:08:17.65Z" }), h("dl", null, h("dt", null, "text"), h("dd", null, h("smoothly-display", { type: "text", value: "text" })), h("dt", null, "postal code"), h("dd", null, h("smoothly-display", { type: "postal-code", value: "752 31" })), h("dt", null, "password"), h("dd", null, h("smoothly-display", { type: "password", value: "password" })), h("dt", null, "email"), h("dd", null, h("smoothly-display", { type: "email", value: "test@example.com" })), h("dt", null, "price"), h("dd", null, h("smoothly-display", { type: "price", value: "13.37", currency: "SEK" })), h("dt", null, "percent"), h("dd", null, h("smoothly-display", { type: "percent", value: "42" })), h("dt", null, "phone"), h("dd", null, h("smoothly-display", { type: "phone", value: "0101881108" })), h("dt", null, "card number"), h("dd", null, h("smoothly-display", { type: "card-number", value: "4111111111111111" })), h("dt", null, "card expires"), h("dd", null, h("smoothly-display", { type: "card-expires", value: "7/22" })), h("dt", null, "card csc"), h("dd", null, h("smoothly-display", { type: "card-csc", value: "987" })), h("dt", null, "Quiet"), h("dd", null, h("smoothly-quiet", { color: "dark" }, "-"))), h("smoothly-skeleton", { period: 3, distance: "20rem", width: "20rem" }), h("smoothly-skeleton", { period: 3, distance: "20rem", color: "200,200,255" }), h("smoothly-skeleton", { period: 3, distance: "20rem", color: "var(--smoothly-warning-color)" }), h("smoothly-skeleton", { period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem", width: "20rem" }), h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem", width: "20rem" }), h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" }), h("smoothly-urlencoded", { data: "hej=hopp&tjena=moss" }), h("div", { style: { display: "flex", justifyContent: "space-between" } }, h("smoothly-popup", { direction: "down" }, "Click for popup", h("span", { slot: "popup", color: "dark", style: { whiteSpace: "nowrap" } }, "Some popup stuff that has a lot of text")), h("smoothly-popup", { direction: "down" }, "Click for popup", h("span", { slot: "popup", color: "dark", style: { whiteSpace: "nowrap" } }, "Some popup with a bunch of text."))), h("p", null, "Test of diffrent kinds of notifier:"), h("button", { onClick: () => this.noticeWarning(Notice.warn("This is a test warning notice.")) }, "warning"), h("button", { onClick: () => this.noticeWarning(Notice.succeded("This is a test success notice.")) }, "success"), h("button", { onClick: () => this.noticeWarning(Notice.failed("This is a test danger notice.")) }, "danger"), h("button", { onClick: () => this.noticeWarning(Notice.execute("This is a test execute notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "execute"), h("button", { onClick: () => this.noticeWarning(Notice.delay("This is a test delay notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "delay"), h("div", { style: { position: "relative", height: "10em" } }, "Large Spinner", h("smoothly-spinner", { active: true, size: "large", style: { "--background-color": "255,255,255", "--background-opacity": "0.2", "--spinner-color": "0,130,0", } })), h("div", { style: { position: "relative", height: "10em" } }, "Medium Spinner", h("smoothly-spinner", { active: true, size: "medium" })), h("div", { style: { position: "relative", height: "10em" } }, "Small Spinner", h("smoothly-spinner", { active: true, size: "small" })), h("div", { style: { position: "absolute", left: "500px", top: "150px" } }, h("smoothly-svg", { url: "https://theme.payfunc.com/intergiro/animated-logo.svg" }))),
|
|
39100
39100
|
];
|
|
39101
39101
|
}
|
|
39102
39102
|
};
|
|
39103
39103
|
|
|
39104
|
-
const styleCss$
|
|
39104
|
+
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}";
|
|
39105
39105
|
|
|
39106
39106
|
let SmoothlyFrame = class {
|
|
39107
39107
|
constructor(hostRef) {
|
|
@@ -39140,9 +39140,9 @@ let SmoothlyFrame = class {
|
|
|
39140
39140
|
}
|
|
39141
39141
|
get element() { return getElement(this); }
|
|
39142
39142
|
};
|
|
39143
|
-
SmoothlyFrame.style = styleCss$
|
|
39143
|
+
SmoothlyFrame.style = styleCss$w;
|
|
39144
39144
|
|
|
39145
|
-
const styleCss$
|
|
39145
|
+
const styleCss$v = "[size].sc-smoothly-icon-h{background:none}.sc-smoothly-icon-h{display:block}[hidden].sc-smoothly-icon-h{display:none}[size=tiny].sc-smoothly-icon-h{width:1.2em;height:1.2em}[size=small].sc-smoothly-icon-h{width:1.4em;height:1.4em}[size=medium].sc-smoothly-icon-h{width:1.8em;height:1.8em}[size=large].sc-smoothly-icon-h{width:2.8em;height:2.8em}[size=xlarge].sc-smoothly-icon-h{width:4em;height:4em}";
|
|
39146
39146
|
|
|
39147
39147
|
let SmoothlyIcon = class {
|
|
39148
39148
|
constructor(hostRef) {
|
|
@@ -39185,9 +39185,9 @@ let SmoothlyIcon = class {
|
|
|
39185
39185
|
render() { return h(Host, this.hostData(), this.__stencil_render()); }
|
|
39186
39186
|
};
|
|
39187
39187
|
SmoothlyIcon.cache = {};
|
|
39188
|
-
SmoothlyIcon.style = styleCss$
|
|
39188
|
+
SmoothlyIcon.style = styleCss$v;
|
|
39189
39189
|
|
|
39190
|
-
const styleCss$
|
|
39190
|
+
const styleCss$u = "icon-demo.sc-smoothly-icon-demo{display:block}icon-demo[hidden].sc-smoothly-icon-demo{display:none}icon-demo.sc-smoothly-icon-demo>content.sc-smoothly-icon-demo{display:flex;flex-flow:row wrap}icon-demo.sc-smoothly-icon-demo>content.sc-smoothly-icon-demo>*.sc-smoothly-icon-demo{margin:1cm}";
|
|
39191
39191
|
|
|
39192
39192
|
let SmoothlyIconDemo = class {
|
|
39193
39193
|
constructor(hostRef) {
|
|
@@ -39669,9 +39669,9 @@ let SmoothlyIconDemo = class {
|
|
|
39669
39669
|
];
|
|
39670
39670
|
}
|
|
39671
39671
|
};
|
|
39672
|
-
SmoothlyIconDemo.style = styleCss$
|
|
39672
|
+
SmoothlyIconDemo.style = styleCss$u;
|
|
39673
39673
|
|
|
39674
|
-
const styleCss$
|
|
39674
|
+
const styleCss$t = ".sc-smoothly-input-h{display:block;position:relative;font-weight:var(--smoothly-font-weight);padding:var(--padding);overflow:hidden;background-color:rgb(var(--background-color));color:rgb(var(--text-color, var(--smoothly-default-contrast)))}[hidden].sc-smoothly-input-h{display:none}.sc-smoothly-input-h>div.sc-smoothly-input{position:relative;width:100%;height:100%}label.sc-smoothly-input{position:absolute;left:0.4em;top:0.6em;color:rgb(var(--text-color, var(--smoothly-default-contrast)));opacity:0.8;user-select:none;cursor:inherit;transition:transform 0.1s;transform-origin:top left;transition-timing-function:ease}.sc-smoothly-input-h:not([show-label]) label.sc-smoothly-input{display:none}.sc-smoothly-input-h:not([show-label]) input.sc-smoothly-input{padding:0.6em 0.2em 0.6em 0.2em}input.sc-smoothly-input{padding:1em 0.2em 0.2em 0.2em;box-sizing:border-box;width:100%;height:100%;background:none;border:0;z-index:1;position:relative;font-size:1rem;font-family:var(--smoothly-font-family);background-color:rgb(var(--background-color))}smoothly-icon.sc-smoothly-input{display:none;position:absolute;right:0.2em;top:0.6em}input.sc-smoothly-input:invalid+label.sc-smoothly-input+smoothly-icon.sc-smoothly-input{display:block}.sc-smoothly-input-h>div.sc-smoothly-input>label.sc-smoothly-input{z-index:1;pointer-events:none}.has-value.sc-smoothly-input-h>div.sc-smoothly-input>label.sc-smoothly-input,.sc-smoothly-input-h:focus-within>div.sc-smoothly-input>label.sc-smoothly-input{top:0.4em;transform:scale(0.6)}input.sc-smoothly-input:focus{outline:none}input.sc-smoothly-input:-webkit-autofill,input.sc-smoothly-input:-webkit-autofill:hover,input.sc-smoothly-input:-webkit-autofill:focus,input.sc-smoothly-input:-webkit-autofill:active{box-shadow:0 0 0 40em rgb(var(--background-color)) inset;-webkit-box-shadow:0 0 0 40em rgb(var(--background-color)) inset}input.sc-smoothly-input:-webkit-autofill,input.sc-smoothly-input:-webkit-autofill+label.sc-smoothly-input{-webkit-text-fill-color:rgb(var(--text-color, var(--smoothly-default-contrast)))}";
|
|
39675
39675
|
|
|
39676
39676
|
let SmoothlyInput = class {
|
|
39677
39677
|
constructor(hostRef) {
|
|
@@ -39861,9 +39861,9 @@ function getLocale() {
|
|
|
39861
39861
|
const result = navigator.language;
|
|
39862
39862
|
return dist$3.Locale.is(result) ? result : dist$3.Language.is(result) ? dist$3.Locale.toLocale(result) : undefined;
|
|
39863
39863
|
}
|
|
39864
|
-
SmoothlyInput.style = styleCss$
|
|
39864
|
+
SmoothlyInput.style = styleCss$t;
|
|
39865
39865
|
|
|
39866
|
-
const styleCss$
|
|
39866
|
+
const styleCss$s = ".sc-smoothly-input-date-h{position:relative}nav.sc-smoothly-input-date{position:absolute;z-index:10;top:3.5em;background-color:rgb(var(--smoothly-default-shade));max-width:22em}.sc-smoothly-input-date-h>div.sc-smoothly-input-date{position:fixed;top:0px;left:0px;right:0px;bottom:0px;width:100vw;height:100vh;z-index:2}.sc-smoothly-input-date-h>nav.sc-smoothly-input-date>.arrow.sc-smoothly-input-date{position:absolute;z-index:9;transform:translate(2em, -.55em) rotate(45deg);width:1em;height:1em;background-color:rgb(var(--smoothly-default-shade))}";
|
|
39867
39867
|
|
|
39868
39868
|
let InputDate = class {
|
|
39869
39869
|
constructor(hostRef) {
|
|
@@ -39896,9 +39896,9 @@ let InputDate = class {
|
|
|
39896
39896
|
"value": ["onStart"]
|
|
39897
39897
|
}; }
|
|
39898
39898
|
};
|
|
39899
|
-
InputDate.style = styleCss$
|
|
39899
|
+
InputDate.style = styleCss$s;
|
|
39900
39900
|
|
|
39901
|
-
const styleCss$
|
|
39901
|
+
const styleCss$r = ".sc-smoothly-input-date-range-h{position:relative;display:block;width:fit-content}.sc-smoothly-input-date-range-h>nav.sc-smoothly-input-date-range{position:absolute;z-index:10;top:3.5em;background-color:rgb(var(--smoothly-default-shade));max-width:22em}.sc-smoothly-input-date-range-h>div.sc-smoothly-input-date-range{position:fixed;top:0px;left:0px;right:0px;bottom:0px;width:100vw;height:100vh;z-index:2}.sc-smoothly-input-date-range-h>nav.sc-smoothly-input-date-range>.arrow.sc-smoothly-input-date-range{position:absolute;z-index:9;transform:translate(10em, -0.55em) rotate(45deg);width:1em;height:1em;background-color:rgb(var(--smoothly-default-shade))}.sc-smoothly-input-date-range-h>section.sc-smoothly-input-date-range{display:flex;background-color:var(--background, transparent);border-radius:0.25rem;cursor:pointer}smoothly-input.sc-smoothly-input-date-range{border-radius:var(--border-radius, none);background-color:transparent;width:var(--input-width)}span.sc-smoothly-input-date-range{padding:0.5em 0.2em 0.5em 0.2em;align-self:center}";
|
|
39902
39902
|
|
|
39903
39903
|
let InputDateRange = class {
|
|
39904
39904
|
constructor(hostRef) {
|
|
@@ -39937,7 +39937,7 @@ let InputDateRange = class {
|
|
|
39937
39937
|
"value": ["onValue"]
|
|
39938
39938
|
}; }
|
|
39939
39939
|
};
|
|
39940
|
-
InputDateRange.style = styleCss$
|
|
39940
|
+
InputDateRange.style = styleCss$r;
|
|
39941
39941
|
|
|
39942
39942
|
let SmoothlyInputDemo = class {
|
|
39943
39943
|
constructor(hostRef) {
|
|
@@ -39951,7 +39951,7 @@ let SmoothlyInputDemo = class {
|
|
|
39951
39951
|
}
|
|
39952
39952
|
};
|
|
39953
39953
|
|
|
39954
|
-
const styleCss$
|
|
39954
|
+
const styleCss$q = ".sc-smoothly-input-month-h{display:flex;justify-content:space-between;font-size:large}smoothly-icon.sc-smoothly-input-month{font-size:smaller}";
|
|
39955
39955
|
|
|
39956
39956
|
let MonthSelector = class {
|
|
39957
39957
|
constructor(hostRef) {
|
|
@@ -39980,9 +39980,9 @@ let MonthSelector = class {
|
|
|
39980
39980
|
"value": ["onValueChanged"]
|
|
39981
39981
|
}; }
|
|
39982
39982
|
};
|
|
39983
|
-
MonthSelector.style = styleCss$
|
|
39983
|
+
MonthSelector.style = styleCss$q;
|
|
39984
39984
|
|
|
39985
|
-
const styleCss$
|
|
39985
|
+
const styleCss$p = "[selected].sc-smoothly-item-h{background-color:rgb(var(--smoothly-primary-shade));color:rgb(var(--smoothly-primary-contrast))}.sc-smoothly-item-h{padding:.5em;cursor:pointer;background-color:rgb(var(--smoothly-default-shade));color:rgb(var(--smoothly-default-contrast));border:rgb(var(--smoothly-default-shade) solid 1px)}.sc-smoothly-item-h:hover{background-color:rgb(var(--smoothly-primary-color));color:rgb(var(--smoothly-primary-contrast))}";
|
|
39986
39986
|
|
|
39987
39987
|
let Item = class {
|
|
39988
39988
|
constructor(hostRef) {
|
|
@@ -40016,9 +40016,9 @@ let Item = class {
|
|
|
40016
40016
|
"selected": ["onSelectedChanged"]
|
|
40017
40017
|
}; }
|
|
40018
40018
|
};
|
|
40019
|
-
Item.style = styleCss$
|
|
40019
|
+
Item.style = styleCss$p;
|
|
40020
40020
|
|
|
40021
|
-
const styleCss$
|
|
40021
|
+
const styleCss$o = ":host{max-height:300px;width:85%;max-height:var(--max-menu-height);box-sizing:border-box;background-color:rgb(var(--smoothly-default-color));border-radius:0.25em;color:rgb(var(--smoothly-primary-color));stroke:rgb(var(--smoothly-primary-color));fill:rgb(var(--smoothly-primary-color));box-shadow:0px 2px 24px rgba(64, 60, 57, 0.08), inset 0px 0px 1px rgba(64, 60, 57, 0.4);overflow-y:auto;cursor:pointer}:host:first-child{margin:10em}";
|
|
40022
40022
|
|
|
40023
40023
|
let SmoothlyMenuOptions = class {
|
|
40024
40024
|
constructor(hostRef) {
|
|
@@ -40117,9 +40117,9 @@ let SmoothlyMenuOptions = class {
|
|
|
40117
40117
|
"options": ["optionsChangeHandler"]
|
|
40118
40118
|
}; }
|
|
40119
40119
|
};
|
|
40120
|
-
SmoothlyMenuOptions.style = styleCss$
|
|
40120
|
+
SmoothlyMenuOptions.style = styleCss$o;
|
|
40121
40121
|
|
|
40122
|
-
const styleCss$
|
|
40122
|
+
const styleCss$n = ".sc-smoothly-notification-h{display:block;min-width:32.6%;min-height:3em;border-radius:5px;margin:0.5em}[hidden].sc-smoothly-notification-h{display:none}smoothly-trigger.sc-smoothly-notification{float:right;text-align:right;margin-right:0.2em}";
|
|
40123
40123
|
|
|
40124
40124
|
let Notification = class {
|
|
40125
40125
|
constructor(hostRef) {
|
|
@@ -40177,9 +40177,9 @@ let Notification = class {
|
|
|
40177
40177
|
"notice": ["onUpdatedNotice"]
|
|
40178
40178
|
}; }
|
|
40179
40179
|
};
|
|
40180
|
-
Notification.style = styleCss$
|
|
40180
|
+
Notification.style = styleCss$n;
|
|
40181
40181
|
|
|
40182
|
-
const styleCss$
|
|
40182
|
+
const styleCss$m = ".sc-smoothly-notifier-h{display:block}[hidden].sc-smoothly-notifier-h{display:none}.sc-smoothly-notifier-h>aside.sc-smoothly-notifier{display:flex;flex-wrap:wrap-reverse;align-content:stretch;justify-content:flex-start;position:fixed;bottom:3em;left:0;text-align:center;width:100%;z-index:100}";
|
|
40183
40183
|
|
|
40184
40184
|
let Notifier = class {
|
|
40185
40185
|
constructor(hostRef) {
|
|
@@ -40199,9 +40199,9 @@ let Notifier = class {
|
|
|
40199
40199
|
];
|
|
40200
40200
|
}
|
|
40201
40201
|
};
|
|
40202
|
-
Notifier.style = styleCss$
|
|
40202
|
+
Notifier.style = styleCss$m;
|
|
40203
40203
|
|
|
40204
|
-
const styleCss$
|
|
40204
|
+
const styleCss$l = ":host{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;padding:0.7em 1em;margin-left:1px;margin-right:1px;background-color:transparent;position:relative}:host([data-highlight]){background-color:rgb(var(--smoothly-default-shade))}:host>div.middle{padding-left:0.5em;flex-shrink:1;width:100%}:host([divider]){margin-bottom:0.5em}::slotted([slot=right]){font-style:italic;white-space:nowrap}:host([divider])::after{position:absolute;height:1px;width:100%;left:0;bottom:-0.25em;content:\"\";background-color:rgba(var(--smoothly-dark-color))}";
|
|
40205
40205
|
|
|
40206
40206
|
let SmoothlyOption = class {
|
|
40207
40207
|
constructor(hostRef) {
|
|
@@ -40225,9 +40225,9 @@ let SmoothlyOption = class {
|
|
|
40225
40225
|
}
|
|
40226
40226
|
get element() { return getElement(this); }
|
|
40227
40227
|
};
|
|
40228
|
-
SmoothlyOption.style = styleCss$
|
|
40228
|
+
SmoothlyOption.style = styleCss$l;
|
|
40229
40229
|
|
|
40230
|
-
const styleCss$
|
|
40230
|
+
const styleCss$k = ":host{--background-color:var(--smoothly-default-color), 1;--color:var(--smoothly-secondary-contrast);--border-color:var(--smoothly-default-shade), 1;--border-highlight-color:var(--smoothly-secondary-contrast), 1;--label-color:var(--smoothly-secondary-contrast), 0.8;--selected-item-border-radius:0.25rem;--selected-item-background-color:var(--smoothly-secondary-color), 1;--selected-item-color:255, 255, 255, 1}:host{display:block;position:relative;background-color:rgba(var(--background-color));width:100%;cursor:pointer;--intergiro-transition:border-color 200ms cubic-bezier(0.645, 0.045, 0.355, 1);transition:var(--intergiro-transition);border:1px solid rgb(var(--border-color));margin:1px;height:40px;border-radius:0.25rem}:host(:focus-within){border-color:rgb(var(--smoothly-primary-shade));border-width:2px;margin:0px}:host>div{display:flex;background-color:transparent;min-height:40px;align-items:center;align-self:center;border:none;max-height:var(--max-height)}:host>div .icons>smoothly-icon{flex-shrink:0;padding-left:0.6em;stroke:rgba(var(--color), 0.4);fill:rgba(var(--color), 0.4);width:1.5em !important;height:1.5em !important}:host>div .icons>smoothly-icon:hover{fill:rgba(var(--color), 1)}:host>div input{width:100%;background-color:transparent;outline:none;border:none;cursor:pointer;color:rgb(var(--color));padding:0 0.6em;font-family:var(--smoothly-font-family);font-size:1.05em}:host>div input::placeholder{opacity:1;text-overflow:ellipsis}:host([is-open])>div input{color:rgb(var(--smoothly-medium-color))}:host(:not(:focus-within)[multiple]) ul>li:last-child{position:absolute;pointer-events:none}:host([label=\"\"]) ul,:host:not([label]) ul,:host([label-setting=hide]) ul{padding-top:0.1em;padding-bottom:0.1em}label{padding-left:0.6em;white-space:nowrap;color:rgba(var(--label-color));transition:var(--intergiro-transition);font-family:var(--smoothly-font-family);pointer-events:none;transform-origin:left}:host([has-selection]) label{display:var(--label-display)}:host([has-selection]) label,:host(:focus-within) label{display:none}:host(:hover) smoothly-icon[data-arrow],:host(:focus-within) smoothly-icon[data-arrow]{stroke:rgba(var(--color), 1)}:host smoothly-icon[data-arrow]{pointer-events:none}:host smoothly-icon{flex-shrink:0;width:1em;height:1em}:host(:not([is-open])) smoothly-icon.up,:host([is-open]) smoothly-icon.down{display:none}smoothly-icon.search{display:flex;align-self:center;padding-left:0.8em}smoothly-icon.up,smoothly-icon.down{display:flex;align-self:center;padding-right:0.8em;stroke:rgb(var(--smoothly-primary-shade))}:host smoothly-menu-options{margin-top:0.5em;padding-top:0.5em;padding-bottom:0.5em;position:absolute;z-index:1}:host(:not([is-open]))>smoothly-menu-options{display:none}";
|
|
40231
40231
|
|
|
40232
40232
|
let SmoothlyPicker = class {
|
|
40233
40233
|
constructor(hostRef) {
|
|
@@ -40369,9 +40369,9 @@ let SmoothlyPicker = class {
|
|
|
40369
40369
|
"isOpen": ["isOpenChangeHander"]
|
|
40370
40370
|
}; }
|
|
40371
40371
|
};
|
|
40372
|
-
SmoothlyPicker.style = styleCss$
|
|
40372
|
+
SmoothlyPicker.style = styleCss$k;
|
|
40373
40373
|
|
|
40374
|
-
const styleCss$
|
|
40374
|
+
const styleCss$j = ".sc-smoothly-popup-h{display:inline-flex;position:relative}[hidden].sc-smoothly-popup-h{display:none}.sc-smoothly-popup-h:not([visible]) aside.sc-smoothly-popup{display:none}.sc-smoothly-popup-h aside.sc-smoothly-popup{display:inline;position:absolute;padding:0.3em;left:var(--left);right:var(--right);background-color:rgb(238, 238, 238);border-color:rgb(238, 238, 238);border-style:solid;border-width:0.1em;border-radius:0.6em;z-index:3}[direction=down].sc-smoothly-popup-h aside.sc-smoothly-popup{top:2.2em;box-shadow:6px 5px 9px -9px black, 5px 6px 9px -9px black}[direction=up].sc-smoothly-popup-h aside.sc-smoothly-popup{bottom:2.2em;box-shadow:-6px -5px 9px -9px black, -5px -6px 9px -9px black}.sc-smoothly-popup-h:not([visible]) .background.sc-smoothly-popup{display:none}.sc-smoothly-popup-h .background.sc-smoothly-popup{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:2}.sc-smoothly-popup-h:not([visible]) .arrow.sc-smoothly-popup{display:none}.sc-smoothly-popup-h .arrow.sc-smoothly-popup{background-color:rgb(238, 238, 238);border-color:rgb(238, 238, 238);z-index:2;content:\"\";position:absolute;width:12px;height:12px;transform:rotate(45deg);left:calc(var(--left) + 1em);right:calc(var(--right) + 1em)}[direction=down].sc-smoothly-popup-h .arrow.sc-smoothly-popup{top:2em;border-top-style:solid;border-top-width:1px;border-left-style:solid;border-left-width:1px}[direction=up].sc-smoothly-popup-h .arrow.sc-smoothly-popup{bottom:2em;border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px}.sc-smoothly-popup-h .pointer.sc-smoothly-popup{cursor:pointer}";
|
|
40375
40375
|
|
|
40376
40376
|
let SmoothlyPopup = class {
|
|
40377
40377
|
constructor(hostRef) {
|
|
@@ -40400,9 +40400,9 @@ let SmoothlyPopup = class {
|
|
|
40400
40400
|
return (h(Host, { style: Object.assign({}, this.cssVariables) }, h("content", { class: "pointer", onClick: () => this.onClick() }, h("slot", null)), h("div", { class: "background", onClick: () => this.onClick() }), h("div", { class: "arrow", onClick: () => this.onClick() }), h("aside", { ref: el => (this.aside = el) }, h("slot", { name: "popup" }))));
|
|
40401
40401
|
}
|
|
40402
40402
|
};
|
|
40403
|
-
SmoothlyPopup.style = styleCss$
|
|
40403
|
+
SmoothlyPopup.style = styleCss$j;
|
|
40404
40404
|
|
|
40405
|
-
const styleCss$
|
|
40405
|
+
const styleCss$i = ".sc-smoothly-quiet-h{opacity:0.5}";
|
|
40406
40406
|
|
|
40407
40407
|
let SmoothlyQuiet = class {
|
|
40408
40408
|
constructor(hostRef) {
|
|
@@ -40412,9 +40412,9 @@ let SmoothlyQuiet = class {
|
|
|
40412
40412
|
return (h(Host, { color: this.color }, h("slot", null)));
|
|
40413
40413
|
}
|
|
40414
40414
|
};
|
|
40415
|
-
SmoothlyQuiet.style = styleCss$
|
|
40415
|
+
SmoothlyQuiet.style = styleCss$i;
|
|
40416
40416
|
|
|
40417
|
-
const styleCss$
|
|
40417
|
+
const styleCss$h = ".sc-smoothly-radio-h{display:block;position:relative}[hidden].sc-smoothly-radio-h{display:none}label.sc-smoothly-radio{display:block;width:calc(100% - 2 * 0.4em);padding:0.2em 0.4em 0.2em 0.4em}input[type=radio].sc-smoothly-radio{position:absolute;left:0;top:0;width:calc(100%);height:100%;margin:0;appearance:none;-webkit-appearance:none}input[type=radio].sc-smoothly-radio~label.sc-smoothly-radio{border:1px solid rgb(var(--smoothly-default-color));color:rgba(var(--smoothly-default-contrast), 0.5);background:rgb(var(--smoothly-default-color))}input[type=radio].sc-smoothly-radio:checked~label.sc-smoothly-radio{background-color:rgb(var(--smoothly-default-shade));color:rgb(var(--smoothly-default-contrast))}";
|
|
40418
40418
|
|
|
40419
40419
|
let SmoothlyRadio = class {
|
|
40420
40420
|
constructor(hostRef) {
|
|
@@ -40433,7 +40433,7 @@ let SmoothlyRadio = class {
|
|
|
40433
40433
|
];
|
|
40434
40434
|
}
|
|
40435
40435
|
};
|
|
40436
|
-
SmoothlyRadio.style = styleCss$
|
|
40436
|
+
SmoothlyRadio.style = styleCss$h;
|
|
40437
40437
|
|
|
40438
40438
|
let SmoothlyRoom = class {
|
|
40439
40439
|
constructor(hostRef) {
|
|
@@ -40444,7 +40444,7 @@ let SmoothlyRoom = class {
|
|
|
40444
40444
|
}
|
|
40445
40445
|
};
|
|
40446
40446
|
|
|
40447
|
-
const styleCss$
|
|
40447
|
+
const styleCss$g = ".sc-smoothly-select-h{display:block}[hidden].sc-smoothly-select-h{display:none}select.sc-smoothly-select{min-width:1.5em;padding-top:0.5em;border:none;-webkit-appearance:none;background-color:rgb(var(--smoothly-color));padding:0.3em}select.sc-smoothly-select>option.sc-smoothly-select{background-color:inherit}select.sc-smoothly-select:focus{outline:none}";
|
|
40448
40448
|
|
|
40449
40449
|
let SmoothlySelect = class {
|
|
40450
40450
|
constructor(hostRef) {
|
|
@@ -40466,9 +40466,9 @@ let SmoothlySelect = class {
|
|
|
40466
40466
|
];
|
|
40467
40467
|
}
|
|
40468
40468
|
};
|
|
40469
|
-
SmoothlySelect.style = styleCss$
|
|
40469
|
+
SmoothlySelect.style = styleCss$g;
|
|
40470
40470
|
|
|
40471
|
-
const styleCss$
|
|
40471
|
+
const styleCss$f = ".sc-smoothly-select-demo-h{display:block}[hidden].sc-smoothly-select-demo-h{display:none}button.sc-smoothly-select-demo:focus{outline:none}smoothly-selector.sc-smoothly-select-demo{outline:none}";
|
|
40472
40472
|
|
|
40473
40473
|
let SmoothlySelectDemo = class {
|
|
40474
40474
|
constructor(hostRef) {
|
|
@@ -40545,9 +40545,9 @@ let SmoothlySelectDemo = class {
|
|
|
40545
40545
|
];
|
|
40546
40546
|
}
|
|
40547
40547
|
};
|
|
40548
|
-
SmoothlySelectDemo.style = styleCss$
|
|
40548
|
+
SmoothlySelectDemo.style = styleCss$f;
|
|
40549
40549
|
|
|
40550
|
-
const styleCss$
|
|
40550
|
+
const styleCss$e = ".sc-smoothly-selector-h{position:relative;height:100%}.sc-smoothly-selector-h>main.sc-smoothly-selector,.sc-smoothly-selector-h>main.sc-smoothly-selector>*.sc-smoothly-selector{height:100%;display:flex;align-items:center}.sc-smoothly-selector-h>div.sc-smoothly-selector>nav.sc-smoothly-selector{display:flex;flex-direction:column;position:absolute;z-index:10}.sc-smoothly-selector-h>aside.sc-smoothly-selector{position:absolute;top:0;left:5em;z-index:10;background-color:rgb(var(--smoothly-tertiary-color));color:rgb(var(--smoothly-tertiary-contrast));height:20px;border-radius:5px;padding:5px;display:flex;align-items:center}.missing.sc-smoothly-selector-h>aside.sc-smoothly-selector{background-color:rgb(var(--smoothly-warning-color));color:rgb(var(--smoothly-warning-contast))}.hidden.sc-smoothly-selector{display:none}.sc-smoothly-selector-h>section.sc-smoothly-selector{position:fixed;top:0px;left:0px;width:100vw;height:100vh;z-index:10}";
|
|
40551
40551
|
|
|
40552
40552
|
let Selector = class {
|
|
40553
40553
|
constructor(hostRef) {
|
|
@@ -40657,9 +40657,9 @@ function isItem(value) {
|
|
|
40657
40657
|
(typeof value.selected == "boolean" || value.selected == undefined) &&
|
|
40658
40658
|
typeof value.filter == "function");
|
|
40659
40659
|
}
|
|
40660
|
-
Selector.style = styleCss$
|
|
40660
|
+
Selector.style = styleCss$e;
|
|
40661
40661
|
|
|
40662
|
-
const styleCss$
|
|
40662
|
+
const styleCss$d = ".sc-smoothly-skeleton-h{display:block;height:1rem}.sc-smoothly-skeleton-h::before{content:\"\";display:block;width:var(--width);height:100%;border-radius:0.4rem;background-image:linear-gradient(90deg, rgb(var(--color, var(--smoothly-dark-color))) 0, transparent 2.5rem, rgb(var(--color, var(--smoothly-dark-color))) 5rem);background-size:calc(var(--distance) + 5rem);animation-duration:var(--period, 1.6s);animation-iteration-count:infinite;animation-timing-function:linear;animation-name:shine-lines-left}@keyframes shine-lines-left{0%{background-position:-5rem}40%,100%{background-position:var(--distance)}}[align=center].sc-smoothly-skeleton-h::before{margin:0 auto;animation-name:shine-lines-center}@keyframes shine-lines-center{0%{background-position:calc((var(--width) - var(--distance)) / 2 - 5rem)}40%,100%{background-position:calc(var(--width) + (var(--distance) - var(--width)) / 2)}}[align=right].sc-smoothly-skeleton-h::before{margin:0;margin-left:auto;animation-name:shine-lines-right}@keyframes shine-lines-right{0%{background-position:calc(var(--width) - var(--distance) - 5rem)}40%,100%{background-position:var(--width)}}";
|
|
40663
40663
|
|
|
40664
40664
|
let SmoothlySkeleton = class {
|
|
40665
40665
|
constructor(hostRef) {
|
|
@@ -40677,9 +40677,9 @@ let SmoothlySkeleton = class {
|
|
|
40677
40677
|
return h(Host, { style: cssVariables });
|
|
40678
40678
|
}
|
|
40679
40679
|
};
|
|
40680
|
-
SmoothlySkeleton.style = styleCss$
|
|
40680
|
+
SmoothlySkeleton.style = styleCss$d;
|
|
40681
40681
|
|
|
40682
|
-
const styleCss$
|
|
40682
|
+
const styleCss$c = ".sc-smoothly-spinner-h:not([active]){display:none}[hidden].sc-smoothly-spinner-h{display:none}.sc-smoothly-spinner-h{display:block;stroke:rgb(var(--spinner-color, var(--smoothly-primary-tint)));position:absolute;inset:0;width:100%;height:100%;background-color:rgba(var(--background-color, var(--smoothly-default-color)), var(--background-opacity, var(--smoothly-semitransparent, 0.8)))}.sc-smoothly-spinner-h svg.sc-smoothly-spinner{position:absolute;left:calc(50% - var(--size) / 2);top:calc(50% - var(--size) / 2);width:var(--size);animation:SPIN-SVG 1.4s linear infinite}.sc-smoothly-spinner-h svg.sc-smoothly-spinner circle.sc-smoothly-spinner{transform-origin:center;animation:SPIN-CIRCLE 1.4s ease-in-out infinite;stroke-dasharray:187;stroke-dashoffset:0}@keyframes SPIN-SVG{0%{transform:rotate(0deg)}100%{transform:rotate(270deg)}}@keyframes SPIN-CIRCLE{0%{stroke-dashoffset:187}50%{stroke-dashoffset:46.75;transform:rotate(135deg)}100%{stroke-dashoffset:187;transform:rotate(450deg)}}";
|
|
40683
40683
|
|
|
40684
40684
|
let SmoothlySpinner = class {
|
|
40685
40685
|
constructor(hostRef) {
|
|
@@ -40694,9 +40694,9 @@ let SmoothlySpinner = class {
|
|
|
40694
40694
|
} }, h("svg", { class: "spinner", viewBox: `0 0 ${60 + strokeWidth} ${60 + strokeWidth}`, xmlns: "http://www.w3.org/2000/svg" }, h("circle", { class: "path", fill: "none", "stroke-width": strokeWidth, "stroke-linecap": "round", cx: `${30 + strokeWidth / 2}`, cy: `${30 + strokeWidth / 2}`, r: "30" }))));
|
|
40695
40695
|
}
|
|
40696
40696
|
};
|
|
40697
|
-
SmoothlySpinner.style = styleCss$
|
|
40697
|
+
SmoothlySpinner.style = styleCss$c;
|
|
40698
40698
|
|
|
40699
|
-
const styleCss$
|
|
40699
|
+
const styleCss$b = ".sc-smoothly-submit-h{display:block;border-width:1px;border-style:solid;border-radius:3px}[hidden].sc-smoothly-submit-h{display:none}[disabled].sc-smoothly-submit-h{opacity:0.5}button.sc-smoothly-submit{padding:0.2em 0.3em;font-size:110%;font-weight:400}[processing].sc-smoothly-submit-h{border-color:rgb(var(--smoothly-light-color))}[processing].sc-smoothly-submit-h>button.sc-smoothly-submit{color:rgb(var(--smoothly-light-contrast));background:rgb(var(--smoothly-light-color))}.sc-smoothly-submit-h:not([processing]):not([disabled]):hover,.sc-smoothly-submit-h:not([processing]):not([disabled]):focus,.sc-smoothly-submit-h:not([processing]):not([disabled]):active{border-color:rgb(var(--smoothly-submit-border))}[expand=fill].sc-smoothly-submit-h>button.sc-smoothly-submit,[expand=block].sc-smoothly-submit-h>button.sc-smoothly-submit{width:100%}[expand=fill].sc-smoothly-submit-h{border-left:none;border-right:none}";
|
|
40700
40700
|
|
|
40701
40701
|
let SmoothlySubmit = class {
|
|
40702
40702
|
constructor(hostRef) {
|
|
@@ -40747,7 +40747,41 @@ let SmoothlySubmit = class {
|
|
|
40747
40747
|
function hasNameAndValue(element) {
|
|
40748
40748
|
return (typeof element.name == "string" && typeof element.value == "string");
|
|
40749
40749
|
}
|
|
40750
|
-
SmoothlySubmit.style = styleCss$
|
|
40750
|
+
SmoothlySubmit.style = styleCss$b;
|
|
40751
|
+
|
|
40752
|
+
const styleCss$a = ".sc-smoothly-svg-h{display:block;min-width:var(--size-width);min-height:var(--size-height);background-color:rgb(var(--color))}object.sc-smoothly-svg{min-width:var(--size-width);min-height:var(--size-height);background-color:rgb(var(--color))}";
|
|
40753
|
+
|
|
40754
|
+
let SmoothlySvg = class {
|
|
40755
|
+
constructor(hostRef) {
|
|
40756
|
+
registerInstance(this, hostRef);
|
|
40757
|
+
this.defaultSizes = {
|
|
40758
|
+
large: { height: "50rem", width: "50rem" },
|
|
40759
|
+
medium: { height: "30rem", width: "30rem" },
|
|
40760
|
+
small: { height: "10rem", width: "10rem" },
|
|
40761
|
+
tiny: { height: "5rem", width: "5rem" },
|
|
40762
|
+
};
|
|
40763
|
+
}
|
|
40764
|
+
render() {
|
|
40765
|
+
const height = this.size
|
|
40766
|
+
? typeof this.size == "object"
|
|
40767
|
+
? this.size.height
|
|
40768
|
+
: this.defaultSizes[this.size].height
|
|
40769
|
+
: "10rem";
|
|
40770
|
+
const width = this.size
|
|
40771
|
+
? typeof this.size == "object"
|
|
40772
|
+
? this.size.width
|
|
40773
|
+
: this.defaultSizes[this.size].width
|
|
40774
|
+
: "10rem";
|
|
40775
|
+
return (h(Host, { style: {
|
|
40776
|
+
"min-height": height,
|
|
40777
|
+
"min-width": width,
|
|
40778
|
+
"--size-height": height,
|
|
40779
|
+
"--size-width": width,
|
|
40780
|
+
"--color": this.color,
|
|
40781
|
+
} }, h("object", { height: height, width: width, type: "image/svg+xml", data: this.url })));
|
|
40782
|
+
}
|
|
40783
|
+
};
|
|
40784
|
+
SmoothlySvg.style = styleCss$a;
|
|
40751
40785
|
|
|
40752
40786
|
const styleCss$9 = ".sc-smoothly-tab-h:not([open])>label.sc-smoothly-tab{background-color:rgb(var(--smoothly-dark-shade))}.hide.sc-smoothly-tab{display:none}label.sc-smoothly-tab{display:block;padding:1em;background-color:rgb(var(--smoothly-default-shade));border-top-left-radius:5px;border-top-right-radius:5px;width:100px}div.sc-smoothly-tab{background-color:rgb(var(--smoothly-default-shade));padding:1em}";
|
|
40753
40787
|
|
|
@@ -41028,4 +41062,4 @@ let Urlencoded = class {
|
|
|
41028
41062
|
}
|
|
41029
41063
|
};
|
|
41030
41064
|
|
|
41031
|
-
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, SmoothlySkeleton as smoothly_skeleton, SmoothlySpinner as smoothly_spinner, SmoothlySubmit as smoothly_submit, SmoothlyTab as smoothly_tab, SmoothlyTabSwitch as smoothly_tab_switch, Table as smoothly_table, TableCell as smoothly_table_cell, TableDemo as smoothly_table_demo, TableExpandableCell as smoothly_table_expandable_cell, TableExpandableRow as smoothly_table_expandable_row, TableHeader as smoothly_table_header, TableRow as smoothly_table_row, SmoothlyTrigger as smoothly_trigger, SmoothlyTuple as smoothly_tuple, Urlencoded as smoothly_urlencoded };
|
|
41065
|
+
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, SmoothlySkeleton as smoothly_skeleton, SmoothlySpinner as smoothly_spinner, SmoothlySubmit as smoothly_submit, SmoothlySvg as smoothly_svg, 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 };
|
|
@@ -13,7 +13,7 @@ let SmoothlyDisplayDemo = class {
|
|
|
13
13
|
}
|
|
14
14
|
render() {
|
|
15
15
|
return [
|
|
16
|
-
h("main", null, h("smoothly-popup", null, h("div", null, "Popup, click me"), h("div", { color: "dark", slot: "popup" }, "1 line popup")), h("smoothly-display-date-time", { datetime: "2019-08-15T08:08:17.65Z" }), h("dl", null, h("dt", null, "text"), h("dd", null, h("smoothly-display", { type: "text", value: "text" })), h("dt", null, "postal code"), h("dd", null, h("smoothly-display", { type: "postal-code", value: "752 31" })), h("dt", null, "password"), h("dd", null, h("smoothly-display", { type: "password", value: "password" })), h("dt", null, "email"), h("dd", null, h("smoothly-display", { type: "email", value: "test@example.com" })), h("dt", null, "price"), h("dd", null, h("smoothly-display", { type: "price", value: "13.37", currency: "SEK" })), h("dt", null, "percent"), h("dd", null, h("smoothly-display", { type: "percent", value: "42" })), h("dt", null, "phone"), h("dd", null, h("smoothly-display", { type: "phone", value: "0101881108" })), h("dt", null, "card number"), h("dd", null, h("smoothly-display", { type: "card-number", value: "4111111111111111" })), h("dt", null, "card expires"), h("dd", null, h("smoothly-display", { type: "card-expires", value: "7/22" })), h("dt", null, "card csc"), h("dd", null, h("smoothly-display", { type: "card-csc", value: "987" })), h("dt", null, "Quiet"), h("dd", null, h("smoothly-quiet", { color: "dark" }, "-"))), h("smoothly-skeleton", { period: 3, distance: "20rem", width: "20rem" }), h("smoothly-skeleton", { period: 3, distance: "20rem", color: "200,200,255" }), h("smoothly-skeleton", { period: 3, distance: "20rem", color: "var(--smoothly-warning-color)" }), h("smoothly-skeleton", { period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem", width: "20rem" }), h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem", width: "20rem" }), h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" }), h("smoothly-urlencoded", { data: "hej=hopp&tjena=moss" }), h("div", { style: { display: "flex", justifyContent: "space-between" } }, h("smoothly-popup", { direction: "down" }, "Click for popup", h("span", { slot: "popup", color: "dark", style: { whiteSpace: "nowrap" } }, "Some popup stuff that has a lot of text")), h("smoothly-popup", { direction: "down" }, "Click for popup", h("span", { slot: "popup", color: "dark", style: { whiteSpace: "nowrap" } }, "Some popup with a bunch of text."))), h("p", null, "Test of diffrent kinds of notifier:"), h("button", { onClick: () => this.noticeWarning(Notice.warn("This is a test warning notice.")) }, "warning"), h("button", { onClick: () => this.noticeWarning(Notice.succeded("This is a test success notice.")) }, "success"), h("button", { onClick: () => this.noticeWarning(Notice.failed("This is a test danger notice.")) }, "danger"), h("button", { onClick: () => this.noticeWarning(Notice.execute("This is a test execute notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "execute"), h("button", { onClick: () => this.noticeWarning(Notice.delay("This is a test delay notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "delay"), h("div", { style: { position: "relative", height: "10em" } }, "Large Spinner", h("smoothly-spinner", { active: true, size: "large", style: { "--background-color": "255,255,255", "--background-opacity": "0.2", "--spinner-color": "0,130,0", } })), h("div", { style: { position: "relative", height: "10em" } }, "Medium Spinner", h("smoothly-spinner", { active: true, size: "medium" })), h("div", { style: { position: "relative", height: "10em" } }, "Small Spinner", h("smoothly-spinner", { active: true, size: "small" }))),
|
|
16
|
+
h("main", null, h("smoothly-popup", null, h("div", null, "Popup, click me"), h("div", { color: "dark", slot: "popup" }, "1 line popup")), h("smoothly-display-date-time", { datetime: "2019-08-15T08:08:17.65Z" }), h("dl", null, h("dt", null, "text"), h("dd", null, h("smoothly-display", { type: "text", value: "text" })), h("dt", null, "postal code"), h("dd", null, h("smoothly-display", { type: "postal-code", value: "752 31" })), h("dt", null, "password"), h("dd", null, h("smoothly-display", { type: "password", value: "password" })), h("dt", null, "email"), h("dd", null, h("smoothly-display", { type: "email", value: "test@example.com" })), h("dt", null, "price"), h("dd", null, h("smoothly-display", { type: "price", value: "13.37", currency: "SEK" })), h("dt", null, "percent"), h("dd", null, h("smoothly-display", { type: "percent", value: "42" })), h("dt", null, "phone"), h("dd", null, h("smoothly-display", { type: "phone", value: "0101881108" })), h("dt", null, "card number"), h("dd", null, h("smoothly-display", { type: "card-number", value: "4111111111111111" })), h("dt", null, "card expires"), h("dd", null, h("smoothly-display", { type: "card-expires", value: "7/22" })), h("dt", null, "card csc"), h("dd", null, h("smoothly-display", { type: "card-csc", value: "987" })), h("dt", null, "Quiet"), h("dd", null, h("smoothly-quiet", { color: "dark" }, "-"))), h("smoothly-skeleton", { period: 3, distance: "20rem", width: "20rem" }), h("smoothly-skeleton", { period: 3, distance: "20rem", color: "200,200,255" }), h("smoothly-skeleton", { period: 3, distance: "20rem", color: "var(--smoothly-warning-color)" }), h("smoothly-skeleton", { period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem", width: "20rem" }), h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem", width: "20rem" }), h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" }), h("smoothly-urlencoded", { data: "hej=hopp&tjena=moss" }), h("div", { style: { display: "flex", justifyContent: "space-between" } }, h("smoothly-popup", { direction: "down" }, "Click for popup", h("span", { slot: "popup", color: "dark", style: { whiteSpace: "nowrap" } }, "Some popup stuff that has a lot of text")), h("smoothly-popup", { direction: "down" }, "Click for popup", h("span", { slot: "popup", color: "dark", style: { whiteSpace: "nowrap" } }, "Some popup with a bunch of text."))), h("p", null, "Test of diffrent kinds of notifier:"), h("button", { onClick: () => this.noticeWarning(Notice.warn("This is a test warning notice.")) }, "warning"), h("button", { onClick: () => this.noticeWarning(Notice.succeded("This is a test success notice.")) }, "success"), h("button", { onClick: () => this.noticeWarning(Notice.failed("This is a test danger notice.")) }, "danger"), h("button", { onClick: () => this.noticeWarning(Notice.execute("This is a test execute notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "execute"), h("button", { onClick: () => this.noticeWarning(Notice.delay("This is a test delay notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "delay"), h("div", { style: { position: "relative", height: "10em" } }, "Large Spinner", h("smoothly-spinner", { active: true, size: "large", style: { "--background-color": "255,255,255", "--background-opacity": "0.2", "--spinner-color": "0,130,0", } })), h("div", { style: { position: "relative", height: "10em" } }, "Medium Spinner", h("smoothly-spinner", { active: true, size: "medium" })), h("div", { style: { position: "relative", height: "10em" } }, "Small Spinner", h("smoothly-spinner", { active: true, size: "small" })), h("div", { style: { position: "absolute", left: "500px", top: "150px" } }, h("smoothly-svg", { url: "https://theme.payfunc.com/intergiro/animated-logo.svg" }))),
|
|
17
17
|
];
|
|
18
18
|
}
|
|
19
19
|
};
|