smoothly 0.1.107 → 0.1.110
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/{App-08e717a8.js → App-07654e98.js} +1 -1
- package/dist/cjs/{Notice-2496bc28.js → Notice-9445eca7.js} +1 -1
- package/dist/cjs/index.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{smoothly-accordion_48.cjs.entry.js → smoothly-accordion_49.cjs.entry.js} +91 -66
- package/dist/cjs/smoothly-app-demo.cjs.entry.js +1 -1
- package/dist/cjs/smoothly-display-demo.cjs.entry.js +1 -1
- package/dist/cjs/smoothly-input-date.cjs.entry.js +10 -6
- package/dist/cjs/smoothly-skeleton.cjs.entry.js +27 -0
- package/dist/cjs/smoothly.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/App.js +1 -1
- package/dist/collection/components/display-demo/index.js +12 -0
- package/dist/collection/components/input-date/index.js +29 -8
- package/dist/collection/components/skeleton/index.js +128 -0
- package/dist/collection/components/skeleton/style.css +53 -0
- package/dist/custom-elements/index.d.ts +6 -0
- package/dist/custom-elements/index.js +100 -73
- package/dist/{smoothly/App-33847333.js → esm/App-b37cce14.js} +1 -1
- package/dist/esm/{Notice-819c6f49.js → Notice-402f146e.js} +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{smoothly-accordion_48.entry.js → smoothly-accordion_49.entry.js} +91 -67
- package/dist/esm/smoothly-app-demo.entry.js +1 -1
- package/dist/esm/smoothly-display-demo.entry.js +1 -1
- package/dist/esm/smoothly-input-date.entry.js +10 -6
- package/dist/esm/smoothly-skeleton.entry.js +23 -0
- package/dist/esm/smoothly.js +1 -1
- package/dist/{esm/App-33847333.js → smoothly/App-b37cce14.js} +1 -1
- package/dist/smoothly/index.esm.js +1 -1
- package/dist/smoothly/{p-d14fb035.entry.js → p-075d2106.entry.js} +1 -1
- package/dist/smoothly/{p-14c6de14.js → p-bf3e451c.js} +1 -1
- package/dist/smoothly/smoothly-app-demo.entry.js +1 -1
- package/dist/smoothly/smoothly-display-demo.entry.js +1 -1
- package/dist/smoothly/smoothly-input-date.entry.js +10 -6
- package/dist/smoothly/smoothly-skeleton.entry.js +23 -0
- package/dist/smoothly/smoothly.esm.js +1 -1
- package/dist/types/components/input-date/index.d.ts +1 -0
- package/dist/types/components/skeleton/index.d.ts +10 -0
- package/dist/types/components.d.ts +27 -0
- package/package.json +1 -1
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { r as registerInstance, h, a as getElement, c as createEvent, H as Host } from './index-dcb2b612.js';
|
|
2
|
-
import { A as App, N as Notice } from './Notice-
|
|
2
|
+
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$F = "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$F;
|
|
53
53
|
|
|
54
|
-
const styleCss$
|
|
54
|
+
const styleCss$E = ".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$E;
|
|
100
100
|
|
|
101
|
-
const styleCss$
|
|
101
|
+
const styleCss$D = "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$D;
|
|
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$C = ".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$C;
|
|
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$B = ".sc-smoothly-calendar-h{display:block;--other-month-opacity:0.5}.sc-smoothly-calendar-h>smoothly-input-month.sc-smoothly-calendar{width:calc(100% - 1em);padding:0.5em 0.5em 0 0.5em}th.sc-smoothly-calendar,td.sc-smoothly-calendar{text-align:center;padding:0.5em;min-width:2em;background-color:rgb(var(--smoothly-default-shade));cursor:pointer;user-select:none}td.currentMonth.sc-smoothly-calendar{color:rgb(var(--smoothly-default-contrast))}td.sc-smoothly-calendar:not(.currentMonth){color:rgba(var(--smoothly-default-contrast), var(--other-month-opacity))}td.sc-smoothly-calendar:nth-child(6):not(.currentMonth).selected,td.sc-smoothly-calendar:nth-child(6):not(.currentMonth).dateRange,td.sc-smoothly-calendar:nth-child(7):not(.currentMonth).selected,td.sc-smoothly-calendar:nth-child(7):not(.currentMonth).dateRange{color:rgba(var(--smoothly-default-contrast))}td.sc-smoothly-calendar:nth-child(6),td.sc-smoothly-calendar:nth-child(7){color:rgb(var(--smoothly-danger-tint))}td.sc-smoothly-calendar:nth-child(6):not(.currentMonth),td.sc-smoothly-calendar:nth-child(7):not(.currentMonth){color:rgba(var(--smoothly-danger-tint), var(--other-month-opacity))}td.sc-smoothly-calendar:not(.selected,.disable).sc-smoothly-calendar:hover{color:rgb(var(--smoothly-primary-contrast));background:rgb(var(--smoothly-primary-tint))}td.selected.sc-smoothly-calendar{color:rgb(var(--smoothly-primary-contrast));background:rgb(var(--smoothly-primary-color))}td.sc-smoothly-calendar:not(.selected,.dateRange).sc-smoothly-calendar:not(:hover).today{background:rgb(var(--smoothly-dark-tint));color:rgb(var(--smoothly-dark-contrast))}td.dateRange.sc-smoothly-calendar{color:rgb(var(--smoothly-primary-contrast));background:rgb(var(--smoothly-primary-tint))}td.disable.sc-smoothly-calendar{cursor:not-allowed;background-color:rgb(var(--smoothly-default-tint), 0.5);color:rgb(var(--smoothly-default-contrast), 0.5)}";
|
|
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$B;
|
|
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$A = ".sc-smoothly-checkbox-h{display:block}[hidden].sc-smoothly-checkbox-h{display:none}smoothly-icon.sc-smoothly-checkbox{cursor:pointer}smoothly-icon.sc-smoothly-checkbox:nth-child(2){position:absolute;transform:scaleX(0.6)}[disabled].sc-smoothly-checkbox-h smoothly-icon.sc-smoothly-checkbox{stroke:rgba(var(--smoothly-color-contrast), 0.3)}";
|
|
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$A;
|
|
37380
37380
|
|
|
37381
|
-
const styleCss$
|
|
37381
|
+
const styleCss$z = ".sc-smoothly-dialog-h{display:block;position:fixed;left:0;top:0;width:100%;height:100%;z-index:1;background:rgba(var(--smoothly-default-color), var(--smoothly-semitransparent)) !important}[hidden].sc-smoothly-dialog-h{display:none}.sc-smoothly-dialog-h>header.sc-smoothly-dialog{border-top-left-radius:8px;border-top-right-radius:8px;margin-top:2em;color:rgb(var(--smoothly-primary-contrast));background:rgb(var(--smoothly-primary-color));border-color:rgb(var(--smoothly-primary-color))}.sc-smoothly-dialog-h:not([header]) header.sc-smoothly-dialog{border:none}.sc-smoothly-dialog-h>*.sc-smoothly-dialog{position:relative;color:rgb(var(--smoothly-default-contrast));background-color:rgb(var(--smoothly-default-color));border-color:rgb(var(--smoothly-color));border-width:1px;border-style:solid;max-width:40em;width:calc(100vw - 4em - 2px);max-height:calc(100vh - 6em - 2px);height:auto;margin-left:auto;margin-right:auto;border-collapse:collapse}.sc-smoothly-dialog-h>main.sc-smoothly-dialog{border-bottom-left-radius:8px;border-bottom-right-radius:8px;margin-bottom:2em;border:1px solid rgb(var(--smoothly-default-contrast));box-sizing:border-box;overflow:hidden}.sc-smoothly-dialog-h:not([header]) main.sc-smoothly-dialog{border-radius:8px}.sc-smoothly-dialog-h>*.sc-smoothly-dialog>smoothly-trigger.sc-smoothly-dialog{position:absolute;right:-2em;top:-2em;z-index:1;border-color:transparent}.sc-smoothly-dialog-h>*.sc-smoothly-dialog>smoothly-trigger.sc-smoothly-dialog:hover{border-color:transparent}.sc-smoothly-dialog-h smoothly-icon.sc-smoothly-dialog{background-color:rgb(var(--smoothly-color));border-radius:50%}.sc-smoothly-dialog-h>*.sc-smoothly-dialog>*.sc-smoothly-dialog{margin:10px}";
|
|
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$z;
|
|
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$y = ".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$y;
|
|
39024
39024
|
|
|
39025
|
-
const styleCss$
|
|
39025
|
+
const styleCss$x = ".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$x;
|
|
39074
39074
|
|
|
39075
|
-
const styleCss$
|
|
39075
|
+
const styleCss$w = ".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$w;
|
|
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-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" }))),
|
|
39100
39100
|
];
|
|
39101
39101
|
}
|
|
39102
39102
|
};
|
|
39103
39103
|
|
|
39104
|
-
const styleCss$
|
|
39104
|
+
const styleCss$v = ".sc-smoothly-frame-h{display:block;width:100%;height:100%}[hidden].sc-smoothly-frame-h{display:none}.sc-smoothly-frame-h>iframe.sc-smoothly-frame{border:none;padding:none;margin:none}";
|
|
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$v;
|
|
39144
39144
|
|
|
39145
|
-
const styleCss$
|
|
39145
|
+
const styleCss$u = "[size].sc-smoothly-icon-h{background:none}.sc-smoothly-icon-h{display:block}[hidden].sc-smoothly-icon-h{display:none}[size=tiny].sc-smoothly-icon-h{width:1.2em;height:1.2em}[size=small].sc-smoothly-icon-h{width:1.4em;height:1.4em}[size=medium].sc-smoothly-icon-h{width:1.8em;height:1.8em}[size=large].sc-smoothly-icon-h{width:2.8em;height:2.8em}[size=xlarge].sc-smoothly-icon-h{width:4em;height:4em}";
|
|
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$u;
|
|
39189
39189
|
|
|
39190
|
-
const styleCss$
|
|
39190
|
+
const styleCss$t = "icon-demo.sc-smoothly-icon-demo{display:block}icon-demo[hidden].sc-smoothly-icon-demo{display:none}icon-demo.sc-smoothly-icon-demo>content.sc-smoothly-icon-demo{display:flex;flex-flow:row wrap}icon-demo.sc-smoothly-icon-demo>content.sc-smoothly-icon-demo>*.sc-smoothly-icon-demo{margin:1cm}";
|
|
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$t;
|
|
39673
39673
|
|
|
39674
|
-
const styleCss$
|
|
39674
|
+
const styleCss$s = ".sc-smoothly-input-h{display:block;position:relative;font-weight:var(--smoothly-font-weight);padding:var(--padding);overflow:hidden;background-color:rgb(var(--background-color));color:rgb(var(--text-color, var(--smoothly-default-contrast)))}[hidden].sc-smoothly-input-h{display:none}.sc-smoothly-input-h>div.sc-smoothly-input{position:relative;width:100%;height:100%}label.sc-smoothly-input{position:absolute;left:0.4em;top:0.6em;color:rgb(var(--text-color, var(--smoothly-default-contrast)));opacity:0.8;user-select:none;cursor:inherit;transition:transform 0.1s;transform-origin:top left;transition-timing-function:ease}.sc-smoothly-input-h:not([show-label]) label.sc-smoothly-input{display:none}.sc-smoothly-input-h:not([show-label]) input.sc-smoothly-input{padding:0.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$s;
|
|
39865
39865
|
|
|
39866
|
-
const styleCss$
|
|
39866
|
+
const styleCss$r = ".sc-smoothly-input-date-h{position:relative}nav.sc-smoothly-input-date{position:absolute;z-index:10;top:3.5em;background-color:rgb(var(--smoothly-default-shade));max-width:22em}.sc-smoothly-input-date-h>div.sc-smoothly-input-date{position:fixed;top:0px;left:0px;right:0px;bottom:0px;width:100vw;height:100vh;z-index:2}.sc-smoothly-input-date-h>nav.sc-smoothly-input-date>.arrow.sc-smoothly-input-date{position:absolute;z-index:9;transform:translate(2em, -.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) {
|
|
@@ -39880,21 +39880,25 @@ let InputDate = class {
|
|
|
39880
39880
|
render() {
|
|
39881
39881
|
var _a;
|
|
39882
39882
|
return [
|
|
39883
|
-
h("smoothly-input", { onClick: () => (this.open = !this.open), type: "date", value: this.value, onSmoothlyChanged: e => (this.value = e.detail.value) }, h("slot", null)),
|
|
39884
|
-
this.open
|
|
39885
|
-
|
|
39886
|
-
this.
|
|
39887
|
-
|
|
39888
|
-
|
|
39883
|
+
h("smoothly-input", { onClick: () => (this.open = !this.open), disabled: this.disabled, type: "date", value: this.value, onSmoothlyChanged: e => (this.value = e.detail.value) }, h("slot", null)),
|
|
39884
|
+
this.open && !this.disabled
|
|
39885
|
+
? [
|
|
39886
|
+
h("div", { onClick: () => (this.open = false) }),
|
|
39887
|
+
h("nav", null, h("div", { class: "arrow" }), h("smoothly-calendar", { doubleInput: false, value: (_a = this.value) !== null && _a !== void 0 ? _a : dist$3.Date.now(), onValueChanged: event => {
|
|
39888
|
+
this.value = event.detail;
|
|
39889
|
+
event.stopPropagation();
|
|
39890
|
+
}, max: this.max, min: this.min })),
|
|
39891
|
+
]
|
|
39892
|
+
: [],
|
|
39889
39893
|
];
|
|
39890
39894
|
}
|
|
39891
39895
|
static get watchers() { return {
|
|
39892
39896
|
"value": ["onStart"]
|
|
39893
39897
|
}; }
|
|
39894
39898
|
};
|
|
39895
|
-
InputDate.style = styleCss$
|
|
39899
|
+
InputDate.style = styleCss$r;
|
|
39896
39900
|
|
|
39897
|
-
const styleCss$
|
|
39901
|
+
const styleCss$q = ".sc-smoothly-input-date-range-h{position:relative;display:block;width:fit-content}.sc-smoothly-input-date-range-h>nav.sc-smoothly-input-date-range{position:absolute;z-index:10;top:3.5em;background-color:rgb(var(--smoothly-default-shade));max-width:22em}.sc-smoothly-input-date-range-h>div.sc-smoothly-input-date-range{position:fixed;top:0px;left:0px;right:0px;bottom:0px;width:100vw;height:100vh;z-index:2}.sc-smoothly-input-date-range-h>nav.sc-smoothly-input-date-range>.arrow.sc-smoothly-input-date-range{position:absolute;z-index:9;transform:translate(10em, -0.55em) rotate(45deg);width:1em;height:1em;background-color:rgb(var(--smoothly-default-shade))}.sc-smoothly-input-date-range-h>section.sc-smoothly-input-date-range{display:flex;background-color:var(--background, transparent);border-radius:0.25rem;cursor:pointer}smoothly-input.sc-smoothly-input-date-range{border-radius:var(--border-radius, none);background-color:transparent;width:var(--input-width)}span.sc-smoothly-input-date-range{padding:0.5em 0.2em 0.5em 0.2em;align-self:center}";
|
|
39898
39902
|
|
|
39899
39903
|
let InputDateRange = class {
|
|
39900
39904
|
constructor(hostRef) {
|
|
@@ -39933,7 +39937,7 @@ let InputDateRange = class {
|
|
|
39933
39937
|
"value": ["onValue"]
|
|
39934
39938
|
}; }
|
|
39935
39939
|
};
|
|
39936
|
-
InputDateRange.style = styleCss$
|
|
39940
|
+
InputDateRange.style = styleCss$q;
|
|
39937
39941
|
|
|
39938
39942
|
let SmoothlyInputDemo = class {
|
|
39939
39943
|
constructor(hostRef) {
|
|
@@ -39947,7 +39951,7 @@ let SmoothlyInputDemo = class {
|
|
|
39947
39951
|
}
|
|
39948
39952
|
};
|
|
39949
39953
|
|
|
39950
|
-
const styleCss$
|
|
39954
|
+
const styleCss$p = ".sc-smoothly-input-month-h{display:flex;justify-content:space-between;font-size:large}smoothly-icon.sc-smoothly-input-month{font-size:smaller}";
|
|
39951
39955
|
|
|
39952
39956
|
let MonthSelector = class {
|
|
39953
39957
|
constructor(hostRef) {
|
|
@@ -39976,9 +39980,9 @@ let MonthSelector = class {
|
|
|
39976
39980
|
"value": ["onValueChanged"]
|
|
39977
39981
|
}; }
|
|
39978
39982
|
};
|
|
39979
|
-
MonthSelector.style = styleCss$
|
|
39983
|
+
MonthSelector.style = styleCss$p;
|
|
39980
39984
|
|
|
39981
|
-
const styleCss$
|
|
39985
|
+
const styleCss$o = "[selected].sc-smoothly-item-h{background-color:rgb(var(--smoothly-primary-shade));color:rgb(var(--smoothly-primary-contrast))}.sc-smoothly-item-h{padding:.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))}";
|
|
39982
39986
|
|
|
39983
39987
|
let Item = class {
|
|
39984
39988
|
constructor(hostRef) {
|
|
@@ -40012,9 +40016,9 @@ let Item = class {
|
|
|
40012
40016
|
"selected": ["onSelectedChanged"]
|
|
40013
40017
|
}; }
|
|
40014
40018
|
};
|
|
40015
|
-
Item.style = styleCss$
|
|
40019
|
+
Item.style = styleCss$o;
|
|
40016
40020
|
|
|
40017
|
-
const styleCss$
|
|
40021
|
+
const styleCss$n = ":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}";
|
|
40018
40022
|
|
|
40019
40023
|
let SmoothlyMenuOptions = class {
|
|
40020
40024
|
constructor(hostRef) {
|
|
@@ -40113,9 +40117,9 @@ let SmoothlyMenuOptions = class {
|
|
|
40113
40117
|
"options": ["optionsChangeHandler"]
|
|
40114
40118
|
}; }
|
|
40115
40119
|
};
|
|
40116
|
-
SmoothlyMenuOptions.style = styleCss$
|
|
40120
|
+
SmoothlyMenuOptions.style = styleCss$n;
|
|
40117
40121
|
|
|
40118
|
-
const styleCss$
|
|
40122
|
+
const styleCss$m = ".sc-smoothly-notification-h{display:block;min-width:32.6%;min-height:3em;border-radius:5px;margin:0.5em}[hidden].sc-smoothly-notification-h{display:none}smoothly-trigger.sc-smoothly-notification{float:right;text-align:right;margin-right:0.2em}";
|
|
40119
40123
|
|
|
40120
40124
|
let Notification = class {
|
|
40121
40125
|
constructor(hostRef) {
|
|
@@ -40173,9 +40177,9 @@ let Notification = class {
|
|
|
40173
40177
|
"notice": ["onUpdatedNotice"]
|
|
40174
40178
|
}; }
|
|
40175
40179
|
};
|
|
40176
|
-
Notification.style = styleCss$
|
|
40180
|
+
Notification.style = styleCss$m;
|
|
40177
40181
|
|
|
40178
|
-
const styleCss$
|
|
40182
|
+
const styleCss$l = ".sc-smoothly-notifier-h{display:block}[hidden].sc-smoothly-notifier-h{display:none}.sc-smoothly-notifier-h>aside.sc-smoothly-notifier{display:flex;flex-wrap:wrap-reverse;align-content:stretch;justify-content:flex-start;position:fixed;bottom:3em;left:0;text-align:center;width:100%;z-index:3}";
|
|
40179
40183
|
|
|
40180
40184
|
let Notifier = class {
|
|
40181
40185
|
constructor(hostRef) {
|
|
@@ -40195,9 +40199,9 @@ let Notifier = class {
|
|
|
40195
40199
|
];
|
|
40196
40200
|
}
|
|
40197
40201
|
};
|
|
40198
|
-
Notifier.style = styleCss$
|
|
40202
|
+
Notifier.style = styleCss$l;
|
|
40199
40203
|
|
|
40200
|
-
const styleCss$
|
|
40204
|
+
const styleCss$k = ":host{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;padding:0.7em 1em;margin-left:1px;margin-right:1px;background-color:transparent;position:relative}:host([data-highlight]){background-color:rgb(var(--smoothly-default-shade))}:host>div.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))}";
|
|
40201
40205
|
|
|
40202
40206
|
let SmoothlyOption = class {
|
|
40203
40207
|
constructor(hostRef) {
|
|
@@ -40221,9 +40225,9 @@ let SmoothlyOption = class {
|
|
|
40221
40225
|
}
|
|
40222
40226
|
get element() { return getElement(this); }
|
|
40223
40227
|
};
|
|
40224
|
-
SmoothlyOption.style = styleCss$
|
|
40228
|
+
SmoothlyOption.style = styleCss$k;
|
|
40225
40229
|
|
|
40226
|
-
const styleCss$
|
|
40230
|
+
const styleCss$j = ":host{--background-color:var(--smoothly-default-color), 1;--color:var(--smoothly-secondary-contrast);--border-color:var(--smoothly-default-shade), 1;--border-highlight-color:var(--smoothly-secondary-contrast), 1;--label-color:var(--smoothly-secondary-contrast), 0.8;--selected-item-border-radius:0.25rem;--selected-item-background-color:var(--smoothly-secondary-color), 1;--selected-item-color:255, 255, 255, 1}:host{display:block;position:relative;background-color:rgba(var(--background-color));width:100%;cursor:pointer;--intergiro-transition:border-color 200ms cubic-bezier(0.645, 0.045, 0.355, 1);transition:var(--intergiro-transition);border:1px solid rgb(var(--border-color));margin:1px;height: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}";
|
|
40227
40231
|
|
|
40228
40232
|
let SmoothlyPicker = class {
|
|
40229
40233
|
constructor(hostRef) {
|
|
@@ -40365,9 +40369,9 @@ let SmoothlyPicker = class {
|
|
|
40365
40369
|
"isOpen": ["isOpenChangeHander"]
|
|
40366
40370
|
}; }
|
|
40367
40371
|
};
|
|
40368
|
-
SmoothlyPicker.style = styleCss$
|
|
40372
|
+
SmoothlyPicker.style = styleCss$j;
|
|
40369
40373
|
|
|
40370
|
-
const styleCss$
|
|
40374
|
+
const styleCss$i = ".sc-smoothly-popup-h{display:inline-flex;position:relative}[hidden].sc-smoothly-popup-h{display:none}.sc-smoothly-popup-h:not([visible]) aside.sc-smoothly-popup{display:none}.sc-smoothly-popup-h aside.sc-smoothly-popup{display:inline;position:absolute;padding:0.3em;left:var(--left);right:var(--right);background-color:rgb(238, 238, 238);border-color:rgb(238, 238, 238);border-style:solid;border-width:0.1em;border-radius:0.6em;z-index:3}[direction=down].sc-smoothly-popup-h aside.sc-smoothly-popup{top:2.2em;box-shadow:6px 5px 9px -9px black, 5px 6px 9px -9px black}[direction=up].sc-smoothly-popup-h aside.sc-smoothly-popup{bottom:2.2em;box-shadow:-6px -5px 9px -9px black, -5px -6px 9px -9px black}.sc-smoothly-popup-h:not([visible]) .background.sc-smoothly-popup{display:none}.sc-smoothly-popup-h .background.sc-smoothly-popup{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:2}.sc-smoothly-popup-h:not([visible]) .arrow.sc-smoothly-popup{display:none}.sc-smoothly-popup-h .arrow.sc-smoothly-popup{background-color:rgb(238, 238, 238);border-color:rgb(238, 238, 238);z-index:2;content:\"\";position:absolute;width:12px;height:12px;transform:rotate(45deg);left:calc(var(--left) + 1em);right:calc(var(--right) + 1em)}[direction=down].sc-smoothly-popup-h .arrow.sc-smoothly-popup{top:2em;border-top-style:solid;border-top-width:1px;border-left-style:solid;border-left-width:1px}[direction=up].sc-smoothly-popup-h .arrow.sc-smoothly-popup{bottom:2em;border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px}.sc-smoothly-popup-h .pointer.sc-smoothly-popup{cursor:pointer}";
|
|
40371
40375
|
|
|
40372
40376
|
let SmoothlyPopup = class {
|
|
40373
40377
|
constructor(hostRef) {
|
|
@@ -40396,9 +40400,9 @@ let SmoothlyPopup = class {
|
|
|
40396
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" }))));
|
|
40397
40401
|
}
|
|
40398
40402
|
};
|
|
40399
|
-
SmoothlyPopup.style = styleCss$
|
|
40403
|
+
SmoothlyPopup.style = styleCss$i;
|
|
40400
40404
|
|
|
40401
|
-
const styleCss$
|
|
40405
|
+
const styleCss$h = ".sc-smoothly-quiet-h{opacity:0.5}";
|
|
40402
40406
|
|
|
40403
40407
|
let SmoothlyQuiet = class {
|
|
40404
40408
|
constructor(hostRef) {
|
|
@@ -40408,9 +40412,9 @@ let SmoothlyQuiet = class {
|
|
|
40408
40412
|
return (h(Host, { color: this.color }, h("slot", null)));
|
|
40409
40413
|
}
|
|
40410
40414
|
};
|
|
40411
|
-
SmoothlyQuiet.style = styleCss$
|
|
40415
|
+
SmoothlyQuiet.style = styleCss$h;
|
|
40412
40416
|
|
|
40413
|
-
const styleCss$
|
|
40417
|
+
const styleCss$g = ".sc-smoothly-radio-h{display:block;position:relative}[hidden].sc-smoothly-radio-h{display:none}label.sc-smoothly-radio{display:block;width:calc(100% - 2 * 0.4em);padding:0.2em 0.4em 0.2em 0.4em}input[type=radio].sc-smoothly-radio{position:absolute;left:0;top:0;width:calc(100%);height:100%;margin:0;appearance:none;-webkit-appearance:none}input[type=radio].sc-smoothly-radio~label.sc-smoothly-radio{border:1px solid rgb(var(--smoothly-default-color));color:rgba(var(--smoothly-default-contrast), 0.5);background:rgb(var(--smoothly-default-color))}input[type=radio].sc-smoothly-radio:checked~label.sc-smoothly-radio{background-color:rgb(var(--smoothly-default-shade));color:rgb(var(--smoothly-default-contrast))}";
|
|
40414
40418
|
|
|
40415
40419
|
let SmoothlyRadio = class {
|
|
40416
40420
|
constructor(hostRef) {
|
|
@@ -40429,7 +40433,7 @@ let SmoothlyRadio = class {
|
|
|
40429
40433
|
];
|
|
40430
40434
|
}
|
|
40431
40435
|
};
|
|
40432
|
-
SmoothlyRadio.style = styleCss$
|
|
40436
|
+
SmoothlyRadio.style = styleCss$g;
|
|
40433
40437
|
|
|
40434
40438
|
let SmoothlyRoom = class {
|
|
40435
40439
|
constructor(hostRef) {
|
|
@@ -40440,7 +40444,7 @@ let SmoothlyRoom = class {
|
|
|
40440
40444
|
}
|
|
40441
40445
|
};
|
|
40442
40446
|
|
|
40443
|
-
const styleCss$
|
|
40447
|
+
const styleCss$f = ".sc-smoothly-select-h{display:block}[hidden].sc-smoothly-select-h{display:none}select.sc-smoothly-select{min-width:1.5em;padding-top:0.5em;border:none;-webkit-appearance:none;background-color:rgb(var(--smoothly-color));padding:0.3em}select.sc-smoothly-select>option.sc-smoothly-select{background-color:inherit}select.sc-smoothly-select:focus{outline:none}";
|
|
40444
40448
|
|
|
40445
40449
|
let SmoothlySelect = class {
|
|
40446
40450
|
constructor(hostRef) {
|
|
@@ -40462,9 +40466,9 @@ let SmoothlySelect = class {
|
|
|
40462
40466
|
];
|
|
40463
40467
|
}
|
|
40464
40468
|
};
|
|
40465
|
-
SmoothlySelect.style = styleCss$
|
|
40469
|
+
SmoothlySelect.style = styleCss$f;
|
|
40466
40470
|
|
|
40467
|
-
const styleCss$
|
|
40471
|
+
const styleCss$e = ".sc-smoothly-select-demo-h{display:block}[hidden].sc-smoothly-select-demo-h{display:none}button.sc-smoothly-select-demo:focus{outline:none}smoothly-selector.sc-smoothly-select-demo{outline:none}";
|
|
40468
40472
|
|
|
40469
40473
|
let SmoothlySelectDemo = class {
|
|
40470
40474
|
constructor(hostRef) {
|
|
@@ -40541,9 +40545,9 @@ let SmoothlySelectDemo = class {
|
|
|
40541
40545
|
];
|
|
40542
40546
|
}
|
|
40543
40547
|
};
|
|
40544
|
-
SmoothlySelectDemo.style = styleCss$
|
|
40548
|
+
SmoothlySelectDemo.style = styleCss$e;
|
|
40545
40549
|
|
|
40546
|
-
const styleCss$
|
|
40550
|
+
const styleCss$d = ".sc-smoothly-selector-h{position:relative;height:100%}.sc-smoothly-selector-h>main.sc-smoothly-selector,.sc-smoothly-selector-h>main.sc-smoothly-selector>*.sc-smoothly-selector{height:100%;display:flex;align-items:center}.sc-smoothly-selector-h>div.sc-smoothly-selector>nav.sc-smoothly-selector{display:flex;flex-direction:column;position:absolute;z-index:10}.sc-smoothly-selector-h>aside.sc-smoothly-selector{position:absolute;top:0;left:5em;z-index:10;background-color:rgb(var(--smoothly-tertiary-color));color:rgb(var(--smoothly-tertiary-contrast));height: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}";
|
|
40547
40551
|
|
|
40548
40552
|
let Selector = class {
|
|
40549
40553
|
constructor(hostRef) {
|
|
@@ -40653,7 +40657,27 @@ function isItem(value) {
|
|
|
40653
40657
|
(typeof value.selected == "boolean" || value.selected == undefined) &&
|
|
40654
40658
|
typeof value.filter == "function");
|
|
40655
40659
|
}
|
|
40656
|
-
Selector.style = styleCss$
|
|
40660
|
+
Selector.style = styleCss$d;
|
|
40661
|
+
|
|
40662
|
+
const styleCss$c = ".sc-smoothly-skeleton-h{display:block;height:1rem}.sc-smoothly-skeleton-h::before{content:\"\";display:block;width:var(--width);height:100%;border-radius:0.4rem;background-image:linear-gradient(90deg, rgb(var(--color, var(--smoothly-dark-color))) 0, transparent 2.5rem, rgb(var(--color, var(--smoothly-dark-color))) 5rem);background-size:calc(var(--distance) + 5rem);animation-duration:var(--period, 1.6s);animation-iteration-count:infinite;animation-timing-function:linear;animation-name:shine-lines-left}@keyframes shine-lines-left{0%{background-position:-5rem}40%,100%{background-position:var(--distance)}}[align=center].sc-smoothly-skeleton-h::before{margin:0 auto;animation-name:shine-lines-center}@keyframes shine-lines-center{0%{background-position:calc((var(--width) - var(--distance)) / 2 - 5rem)}40%,100%{background-position:calc(var(--width) + (var(--distance) - var(--width)) / 2)}}[align=right].sc-smoothly-skeleton-h::before{margin:0;margin-left:auto;animation-name:shine-lines-right}@keyframes shine-lines-right{0%{background-position:calc(var(--width) - var(--distance) - 5rem)}40%,100%{background-position:var(--width)}}";
|
|
40663
|
+
|
|
40664
|
+
let SmoothlySkeleton = class {
|
|
40665
|
+
constructor(hostRef) {
|
|
40666
|
+
registerInstance(this, hostRef);
|
|
40667
|
+
this.widths = ["8rem", "9rem", "10rem"];
|
|
40668
|
+
this.align = "left";
|
|
40669
|
+
}
|
|
40670
|
+
componentWillLoad() {
|
|
40671
|
+
var _a;
|
|
40672
|
+
this.width = (_a = this.width) !== null && _a !== void 0 ? _a : this.widths[Math.floor(Math.random() * this.widths.length)];
|
|
40673
|
+
}
|
|
40674
|
+
render() {
|
|
40675
|
+
var _a;
|
|
40676
|
+
const cssVariables = Object.assign(Object.assign({ "--width": this.width, "--distance": (_a = this.distance) !== null && _a !== void 0 ? _a : "10rem" }, (this.color ? { "--color": this.color } : undefined)), (this.period ? { "--period": this.period + "s" } : undefined));
|
|
40677
|
+
return h(Host, { style: cssVariables });
|
|
40678
|
+
}
|
|
40679
|
+
};
|
|
40680
|
+
SmoothlySkeleton.style = styleCss$c;
|
|
40657
40681
|
|
|
40658
40682
|
const styleCss$b = ".sc-smoothly-spinner-h:not([active]){display:none}[hidden].sc-smoothly-spinner-h{display:none}.sc-smoothly-spinner-h{display:block;stroke:rgb(var(--spinner-color, var(--smoothly-primary-tint)));position:absolute;inset:0;width:100%;height:100%;background-color:rgba(var(--background-color, var(--smoothly-default-color)), var(--background-opacity, var(--smoothly-semitransparent, 0.8)))}.sc-smoothly-spinner-h svg.sc-smoothly-spinner{position:absolute;left:calc(50% - var(--size) / 2);top:calc(50% - var(--size) / 2);width:var(--size);animation:SPIN-SVG 1.4s linear infinite}.sc-smoothly-spinner-h svg.sc-smoothly-spinner circle.sc-smoothly-spinner{transform-origin:center;animation:SPIN-CIRCLE 1.4s ease-in-out infinite;stroke-dasharray:187;stroke-dashoffset:0}@keyframes SPIN-SVG{0%{transform:rotate(0deg)}100%{transform:rotate(270deg)}}@keyframes SPIN-CIRCLE{0%{stroke-dashoffset:187}50%{stroke-dashoffset:46.75;transform:rotate(135deg)}100%{stroke-dashoffset:187;transform:rotate(450deg)}}";
|
|
40659
40683
|
|
|
@@ -41004,4 +41028,4 @@ let Urlencoded = class {
|
|
|
41004
41028
|
}
|
|
41005
41029
|
};
|
|
41006
41030
|
|
|
41007
|
-
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 };
|
|
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 };
|
|
@@ -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-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" }))),
|
|
17
17
|
];
|
|
18
18
|
}
|
|
19
19
|
};
|
|
@@ -19,12 +19,16 @@ let InputDate = class {
|
|
|
19
19
|
render() {
|
|
20
20
|
var _a;
|
|
21
21
|
return [
|
|
22
|
-
h("smoothly-input", { onClick: () => (this.open = !this.open), type: "date", value: this.value, onSmoothlyChanged: e => (this.value = e.detail.value) }, h("slot", null)),
|
|
23
|
-
this.open
|
|
24
|
-
|
|
25
|
-
this.
|
|
26
|
-
|
|
27
|
-
|
|
22
|
+
h("smoothly-input", { onClick: () => (this.open = !this.open), disabled: this.disabled, type: "date", value: this.value, onSmoothlyChanged: e => (this.value = e.detail.value) }, h("slot", null)),
|
|
23
|
+
this.open && !this.disabled
|
|
24
|
+
? [
|
|
25
|
+
h("div", { onClick: () => (this.open = false) }),
|
|
26
|
+
h("nav", null, h("div", { class: "arrow" }), h("smoothly-calendar", { doubleInput: false, value: (_a = this.value) !== null && _a !== void 0 ? _a : dist.Date.now(), onValueChanged: event => {
|
|
27
|
+
this.value = event.detail;
|
|
28
|
+
event.stopPropagation();
|
|
29
|
+
}, max: this.max, min: this.min })),
|
|
30
|
+
]
|
|
31
|
+
: [],
|
|
28
32
|
];
|
|
29
33
|
}
|
|
30
34
|
static get watchers() { return {
|