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
|
@@ -3,11 +3,11 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
const index = require('./index-41a36ce2.js');
|
|
6
|
-
const Notice = require('./Notice-
|
|
6
|
+
const Notice = require('./Notice-9445eca7.js');
|
|
7
7
|
const Trigger = require('./Trigger-74bd1ee8.js');
|
|
8
8
|
require('./GoogleFont-6c4f0da1.js');
|
|
9
9
|
|
|
10
|
-
const styleCss$
|
|
10
|
+
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}";
|
|
11
11
|
|
|
12
12
|
let SmoothlyAccordion = class {
|
|
13
13
|
constructor(hostRef) {
|
|
@@ -53,9 +53,9 @@ let SmoothlyAccordion = class {
|
|
|
53
53
|
"value": ["valueChanged"]
|
|
54
54
|
}; }
|
|
55
55
|
};
|
|
56
|
-
SmoothlyAccordion.style = styleCss$
|
|
56
|
+
SmoothlyAccordion.style = styleCss$F;
|
|
57
57
|
|
|
58
|
-
const styleCss$
|
|
58
|
+
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))}";
|
|
59
59
|
|
|
60
60
|
let SmoothlyAccordionItem = class {
|
|
61
61
|
constructor(hostRef) {
|
|
@@ -100,9 +100,9 @@ let SmoothlyAccordionItem = class {
|
|
|
100
100
|
"open": ["openChanged"]
|
|
101
101
|
}; }
|
|
102
102
|
};
|
|
103
|
-
SmoothlyAccordionItem.style = styleCss$
|
|
103
|
+
SmoothlyAccordionItem.style = styleCss$E;
|
|
104
104
|
|
|
105
|
-
const styleCss$
|
|
105
|
+
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}";
|
|
106
106
|
|
|
107
107
|
let SmoothlyApp = class {
|
|
108
108
|
constructor(hostRef) {
|
|
@@ -112,7 +112,7 @@ let SmoothlyApp = class {
|
|
|
112
112
|
return (index.h("smoothly-notifier", null, index.h("slot", null)));
|
|
113
113
|
}
|
|
114
114
|
};
|
|
115
|
-
SmoothlyApp.style = styleCss$
|
|
115
|
+
SmoothlyApp.style = styleCss$D;
|
|
116
116
|
|
|
117
117
|
let SmoothlyAppDemo = class {
|
|
118
118
|
constructor(hostRef) {
|
|
@@ -135,7 +135,7 @@ let SmoothlyAppDemo = class {
|
|
|
135
135
|
}
|
|
136
136
|
};
|
|
137
137
|
|
|
138
|
-
const styleCss$
|
|
138
|
+
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}";
|
|
139
139
|
|
|
140
140
|
let SmoothlyBacktotop = class {
|
|
141
141
|
constructor(hostRef) {
|
|
@@ -163,7 +163,7 @@ let SmoothlyBacktotop = class {
|
|
|
163
163
|
}) }, index.h("smoothly-icon", { name: "chevron-up-outline" })));
|
|
164
164
|
}
|
|
165
165
|
};
|
|
166
|
-
SmoothlyBacktotop.style = styleCss$
|
|
166
|
+
SmoothlyBacktotop.style = styleCss$C;
|
|
167
167
|
|
|
168
168
|
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
|
169
169
|
|
|
@@ -18858,7 +18858,7 @@ function years(current) {
|
|
|
18858
18858
|
return result;
|
|
18859
18859
|
}
|
|
18860
18860
|
|
|
18861
|
-
const styleCss$
|
|
18861
|
+
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)}";
|
|
18862
18862
|
|
|
18863
18863
|
let Calendar = class {
|
|
18864
18864
|
constructor(hostRef) {
|
|
@@ -18941,7 +18941,7 @@ let Calendar = class {
|
|
|
18941
18941
|
"end": ["onEnd"]
|
|
18942
18942
|
}; }
|
|
18943
18943
|
};
|
|
18944
|
-
Calendar.style = styleCss$
|
|
18944
|
+
Calendar.style = styleCss$B;
|
|
18945
18945
|
|
|
18946
18946
|
var CallingCode_1 = createCommonjsModule(function (module, exports) {
|
|
18947
18947
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
@@ -37353,7 +37353,7 @@ function create(language) {
|
|
|
37353
37353
|
}, language);
|
|
37354
37354
|
}
|
|
37355
37355
|
|
|
37356
|
-
const styleCss$
|
|
37356
|
+
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)}";
|
|
37357
37357
|
|
|
37358
37358
|
let SmoothlyCheckbox = class {
|
|
37359
37359
|
constructor(hostRef) {
|
|
@@ -37380,9 +37380,9 @@ let SmoothlyCheckbox = class {
|
|
|
37380
37380
|
}
|
|
37381
37381
|
get element() { return index.getElement(this); }
|
|
37382
37382
|
};
|
|
37383
|
-
SmoothlyCheckbox.style = styleCss$
|
|
37383
|
+
SmoothlyCheckbox.style = styleCss$A;
|
|
37384
37384
|
|
|
37385
|
-
const styleCss$
|
|
37385
|
+
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}";
|
|
37386
37386
|
|
|
37387
37387
|
let SmoothlyDialog = class {
|
|
37388
37388
|
constructor(hostRef) {
|
|
@@ -37409,7 +37409,7 @@ let SmoothlyDialog = class {
|
|
|
37409
37409
|
}
|
|
37410
37410
|
render() { return index.h(index.Host, this.hostData(), this.__stencil_render()); }
|
|
37411
37411
|
};
|
|
37412
|
-
SmoothlyDialog.style = styleCss$
|
|
37412
|
+
SmoothlyDialog.style = styleCss$z;
|
|
37413
37413
|
|
|
37414
37414
|
let SmoothlyDialogDemo = class {
|
|
37415
37415
|
constructor(hostRef) {
|
|
@@ -38995,7 +38995,7 @@ Object.defineProperty(exports, "StateEditor", { enumerable: true, get: function
|
|
|
38995
38995
|
//# sourceMappingURL=index.js.map
|
|
38996
38996
|
});
|
|
38997
38997
|
|
|
38998
|
-
const styleCss$
|
|
38998
|
+
const styleCss$y = ".sc-smoothly-display-h{display:block}[hidden].sc-smoothly-display-h{display:none}";
|
|
38999
38999
|
|
|
39000
39000
|
let SmoothlyDisplay = class {
|
|
39001
39001
|
constructor(hostRef) {
|
|
@@ -39024,9 +39024,9 @@ let SmoothlyDisplay = class {
|
|
|
39024
39024
|
return result;
|
|
39025
39025
|
}
|
|
39026
39026
|
};
|
|
39027
|
-
SmoothlyDisplay.style = styleCss$
|
|
39027
|
+
SmoothlyDisplay.style = styleCss$y;
|
|
39028
39028
|
|
|
39029
|
-
const styleCss$
|
|
39029
|
+
const styleCss$x = ".sc-smoothly-display-amount-h{display:block}[hidden].sc-smoothly-display-amount-h{display:none}";
|
|
39030
39030
|
|
|
39031
39031
|
let SmoothlyDisplayAmount = class {
|
|
39032
39032
|
constructor(hostRef) {
|
|
@@ -39074,9 +39074,9 @@ let SmoothlyDisplayAmount = class {
|
|
|
39074
39074
|
];
|
|
39075
39075
|
}
|
|
39076
39076
|
};
|
|
39077
|
-
SmoothlyDisplayAmount.style = styleCss$
|
|
39077
|
+
SmoothlyDisplayAmount.style = styleCss$x;
|
|
39078
39078
|
|
|
39079
|
-
const styleCss$
|
|
39079
|
+
const styleCss$w = ".sc-smoothly-display-date-time-h{display:block}[hidden].sc-smoothly-display-date-time-h{display:none}";
|
|
39080
39080
|
|
|
39081
39081
|
let SmoothlyDisplayDateTime = class {
|
|
39082
39082
|
constructor(hostRef) {
|
|
@@ -39087,7 +39087,7 @@ let SmoothlyDisplayDateTime = class {
|
|
|
39087
39087
|
return [datetime[0], " ", datetime[1]];
|
|
39088
39088
|
}
|
|
39089
39089
|
};
|
|
39090
|
-
SmoothlyDisplayDateTime.style = styleCss$
|
|
39090
|
+
SmoothlyDisplayDateTime.style = styleCss$w;
|
|
39091
39091
|
|
|
39092
39092
|
let SmoothlyDisplayDemo = class {
|
|
39093
39093
|
constructor(hostRef) {
|
|
@@ -39100,12 +39100,12 @@ let SmoothlyDisplayDemo = class {
|
|
|
39100
39100
|
}
|
|
39101
39101
|
render() {
|
|
39102
39102
|
return [
|
|
39103
|
-
index.h("main", null, index.h("smoothly-popup", null, index.h("div", null, "Popup, click me"), index.h("div", { color: "dark", slot: "popup" }, "1 line popup")), index.h("smoothly-display-date-time", { datetime: "2019-08-15T08:08:17.65Z" }), index.h("dl", null, index.h("dt", null, "text"), index.h("dd", null, index.h("smoothly-display", { type: "text", value: "text" })), index.h("dt", null, "postal code"), index.h("dd", null, index.h("smoothly-display", { type: "postal-code", value: "752 31" })), index.h("dt", null, "password"), index.h("dd", null, index.h("smoothly-display", { type: "password", value: "password" })), index.h("dt", null, "email"), index.h("dd", null, index.h("smoothly-display", { type: "email", value: "test@example.com" })), index.h("dt", null, "price"), index.h("dd", null, index.h("smoothly-display", { type: "price", value: "13.37", currency: "SEK" })), index.h("dt", null, "percent"), index.h("dd", null, index.h("smoothly-display", { type: "percent", value: "42" })), index.h("dt", null, "phone"), index.h("dd", null, index.h("smoothly-display", { type: "phone", value: "0101881108" })), index.h("dt", null, "card number"), index.h("dd", null, index.h("smoothly-display", { type: "card-number", value: "4111111111111111" })), index.h("dt", null, "card expires"), index.h("dd", null, index.h("smoothly-display", { type: "card-expires", value: "7/22" })), index.h("dt", null, "card csc"), index.h("dd", null, index.h("smoothly-display", { type: "card-csc", value: "987" })), index.h("dt", null, "Quiet"), index.h("dd", null, index.h("smoothly-quiet", { color: "dark" }, "-"))), index.h("smoothly-urlencoded", { data: "hej=hopp&tjena=moss" }), index.h("div", { style: { display: "flex", justifyContent: "space-between" } }, index.h("smoothly-popup", { direction: "down" }, "Click for popup", index.h("span", { slot: "popup", color: "dark", style: { whiteSpace: "nowrap" } }, "Some popup stuff that has a lot of text")), index.h("smoothly-popup", { direction: "down" }, "Click for popup", index.h("span", { slot: "popup", color: "dark", style: { whiteSpace: "nowrap" } }, "Some popup with a bunch of text."))), index.h("p", null, "Test of diffrent kinds of notifier:"), index.h("button", { onClick: () => this.noticeWarning(Notice.Notice.warn("This is a test warning notice.")) }, "warning"), index.h("button", { onClick: () => this.noticeWarning(Notice.Notice.succeded("This is a test success notice.")) }, "success"), index.h("button", { onClick: () => this.noticeWarning(Notice.Notice.failed("This is a test danger notice.")) }, "danger"), index.h("button", { onClick: () => this.noticeWarning(Notice.Notice.execute("This is a test execute notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "execute"), index.h("button", { onClick: () => this.noticeWarning(Notice.Notice.delay("This is a test delay notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "delay"), index.h("div", { style: { position: "relative", height: "10em" } }, "Large Spinner", index.h("smoothly-spinner", { active: true, size: "large", style: { "--background-color": "255,255,255", "--background-opacity": "0.2", "--spinner-color": "0,130,0", } })), index.h("div", { style: { position: "relative", height: "10em" } }, "Medium Spinner", index.h("smoothly-spinner", { active: true, size: "medium" })), index.h("div", { style: { position: "relative", height: "10em" } }, "Small Spinner", index.h("smoothly-spinner", { active: true, size: "small" }))),
|
|
39103
|
+
index.h("main", null, index.h("smoothly-popup", null, index.h("div", null, "Popup, click me"), index.h("div", { color: "dark", slot: "popup" }, "1 line popup")), index.h("smoothly-display-date-time", { datetime: "2019-08-15T08:08:17.65Z" }), index.h("dl", null, index.h("dt", null, "text"), index.h("dd", null, index.h("smoothly-display", { type: "text", value: "text" })), index.h("dt", null, "postal code"), index.h("dd", null, index.h("smoothly-display", { type: "postal-code", value: "752 31" })), index.h("dt", null, "password"), index.h("dd", null, index.h("smoothly-display", { type: "password", value: "password" })), index.h("dt", null, "email"), index.h("dd", null, index.h("smoothly-display", { type: "email", value: "test@example.com" })), index.h("dt", null, "price"), index.h("dd", null, index.h("smoothly-display", { type: "price", value: "13.37", currency: "SEK" })), index.h("dt", null, "percent"), index.h("dd", null, index.h("smoothly-display", { type: "percent", value: "42" })), index.h("dt", null, "phone"), index.h("dd", null, index.h("smoothly-display", { type: "phone", value: "0101881108" })), index.h("dt", null, "card number"), index.h("dd", null, index.h("smoothly-display", { type: "card-number", value: "4111111111111111" })), index.h("dt", null, "card expires"), index.h("dd", null, index.h("smoothly-display", { type: "card-expires", value: "7/22" })), index.h("dt", null, "card csc"), index.h("dd", null, index.h("smoothly-display", { type: "card-csc", value: "987" })), index.h("dt", null, "Quiet"), index.h("dd", null, index.h("smoothly-quiet", { color: "dark" }, "-"))), index.h("smoothly-skeleton", { period: 3, distance: "20rem", width: "20rem" }), index.h("smoothly-skeleton", { period: 3, distance: "20rem", color: "200,200,255" }), index.h("smoothly-skeleton", { period: 3, distance: "20rem", color: "var(--smoothly-warning-color)" }), index.h("smoothly-skeleton", { period: 3, distance: "20rem" }), index.h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem", width: "20rem" }), index.h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), index.h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), index.h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), index.h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem", width: "20rem" }), index.h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" }), index.h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" }), index.h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" }), index.h("smoothly-urlencoded", { data: "hej=hopp&tjena=moss" }), index.h("div", { style: { display: "flex", justifyContent: "space-between" } }, index.h("smoothly-popup", { direction: "down" }, "Click for popup", index.h("span", { slot: "popup", color: "dark", style: { whiteSpace: "nowrap" } }, "Some popup stuff that has a lot of text")), index.h("smoothly-popup", { direction: "down" }, "Click for popup", index.h("span", { slot: "popup", color: "dark", style: { whiteSpace: "nowrap" } }, "Some popup with a bunch of text."))), index.h("p", null, "Test of diffrent kinds of notifier:"), index.h("button", { onClick: () => this.noticeWarning(Notice.Notice.warn("This is a test warning notice.")) }, "warning"), index.h("button", { onClick: () => this.noticeWarning(Notice.Notice.succeded("This is a test success notice.")) }, "success"), index.h("button", { onClick: () => this.noticeWarning(Notice.Notice.failed("This is a test danger notice.")) }, "danger"), index.h("button", { onClick: () => this.noticeWarning(Notice.Notice.execute("This is a test execute notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "execute"), index.h("button", { onClick: () => this.noticeWarning(Notice.Notice.delay("This is a test delay notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "delay"), index.h("div", { style: { position: "relative", height: "10em" } }, "Large Spinner", index.h("smoothly-spinner", { active: true, size: "large", style: { "--background-color": "255,255,255", "--background-opacity": "0.2", "--spinner-color": "0,130,0", } })), index.h("div", { style: { position: "relative", height: "10em" } }, "Medium Spinner", index.h("smoothly-spinner", { active: true, size: "medium" })), index.h("div", { style: { position: "relative", height: "10em" } }, "Small Spinner", index.h("smoothly-spinner", { active: true, size: "small" }))),
|
|
39104
39104
|
];
|
|
39105
39105
|
}
|
|
39106
39106
|
};
|
|
39107
39107
|
|
|
39108
|
-
const styleCss$
|
|
39108
|
+
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}";
|
|
39109
39109
|
|
|
39110
39110
|
let SmoothlyFrame = class {
|
|
39111
39111
|
constructor(hostRef) {
|
|
@@ -39144,9 +39144,9 @@ let SmoothlyFrame = class {
|
|
|
39144
39144
|
}
|
|
39145
39145
|
get element() { return index.getElement(this); }
|
|
39146
39146
|
};
|
|
39147
|
-
SmoothlyFrame.style = styleCss$
|
|
39147
|
+
SmoothlyFrame.style = styleCss$v;
|
|
39148
39148
|
|
|
39149
|
-
const styleCss$
|
|
39149
|
+
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}";
|
|
39150
39150
|
|
|
39151
39151
|
let SmoothlyIcon = class {
|
|
39152
39152
|
constructor(hostRef) {
|
|
@@ -39189,9 +39189,9 @@ let SmoothlyIcon = class {
|
|
|
39189
39189
|
render() { return index.h(index.Host, this.hostData(), this.__stencil_render()); }
|
|
39190
39190
|
};
|
|
39191
39191
|
SmoothlyIcon.cache = {};
|
|
39192
|
-
SmoothlyIcon.style = styleCss$
|
|
39192
|
+
SmoothlyIcon.style = styleCss$u;
|
|
39193
39193
|
|
|
39194
|
-
const styleCss$
|
|
39194
|
+
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}";
|
|
39195
39195
|
|
|
39196
39196
|
let SmoothlyIconDemo = class {
|
|
39197
39197
|
constructor(hostRef) {
|
|
@@ -39673,9 +39673,9 @@ let SmoothlyIconDemo = class {
|
|
|
39673
39673
|
];
|
|
39674
39674
|
}
|
|
39675
39675
|
};
|
|
39676
|
-
SmoothlyIconDemo.style = styleCss$
|
|
39676
|
+
SmoothlyIconDemo.style = styleCss$t;
|
|
39677
39677
|
|
|
39678
|
-
const styleCss$
|
|
39678
|
+
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)))}";
|
|
39679
39679
|
|
|
39680
39680
|
let SmoothlyInput = class {
|
|
39681
39681
|
constructor(hostRef) {
|
|
@@ -39865,9 +39865,9 @@ function getLocale() {
|
|
|
39865
39865
|
const result = navigator.language;
|
|
39866
39866
|
return dist$3.Locale.is(result) ? result : dist$3.Language.is(result) ? dist$3.Locale.toLocale(result) : undefined;
|
|
39867
39867
|
}
|
|
39868
|
-
SmoothlyInput.style = styleCss$
|
|
39868
|
+
SmoothlyInput.style = styleCss$s;
|
|
39869
39869
|
|
|
39870
|
-
const styleCss$
|
|
39870
|
+
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))}";
|
|
39871
39871
|
|
|
39872
39872
|
let InputDate = class {
|
|
39873
39873
|
constructor(hostRef) {
|
|
@@ -39884,21 +39884,25 @@ let InputDate = class {
|
|
|
39884
39884
|
render() {
|
|
39885
39885
|
var _a;
|
|
39886
39886
|
return [
|
|
39887
|
-
index.h("smoothly-input", { onClick: () => (this.open = !this.open), type: "date", value: this.value, onSmoothlyChanged: e => (this.value = e.detail.value) }, index.h("slot", null)),
|
|
39888
|
-
this.open
|
|
39889
|
-
|
|
39890
|
-
this.
|
|
39891
|
-
|
|
39892
|
-
|
|
39887
|
+
index.h("smoothly-input", { onClick: () => (this.open = !this.open), disabled: this.disabled, type: "date", value: this.value, onSmoothlyChanged: e => (this.value = e.detail.value) }, index.h("slot", null)),
|
|
39888
|
+
this.open && !this.disabled
|
|
39889
|
+
? [
|
|
39890
|
+
index.h("div", { onClick: () => (this.open = false) }),
|
|
39891
|
+
index.h("nav", null, index.h("div", { class: "arrow" }), index.h("smoothly-calendar", { doubleInput: false, value: (_a = this.value) !== null && _a !== void 0 ? _a : dist$3.Date.now(), onValueChanged: event => {
|
|
39892
|
+
this.value = event.detail;
|
|
39893
|
+
event.stopPropagation();
|
|
39894
|
+
}, max: this.max, min: this.min })),
|
|
39895
|
+
]
|
|
39896
|
+
: [],
|
|
39893
39897
|
];
|
|
39894
39898
|
}
|
|
39895
39899
|
static get watchers() { return {
|
|
39896
39900
|
"value": ["onStart"]
|
|
39897
39901
|
}; }
|
|
39898
39902
|
};
|
|
39899
|
-
InputDate.style = styleCss$
|
|
39903
|
+
InputDate.style = styleCss$r;
|
|
39900
39904
|
|
|
39901
|
-
const styleCss$
|
|
39905
|
+
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}";
|
|
39902
39906
|
|
|
39903
39907
|
let InputDateRange = class {
|
|
39904
39908
|
constructor(hostRef) {
|
|
@@ -39937,7 +39941,7 @@ let InputDateRange = class {
|
|
|
39937
39941
|
"value": ["onValue"]
|
|
39938
39942
|
}; }
|
|
39939
39943
|
};
|
|
39940
|
-
InputDateRange.style = styleCss$
|
|
39944
|
+
InputDateRange.style = styleCss$q;
|
|
39941
39945
|
|
|
39942
39946
|
let SmoothlyInputDemo = class {
|
|
39943
39947
|
constructor(hostRef) {
|
|
@@ -39951,7 +39955,7 @@ let SmoothlyInputDemo = class {
|
|
|
39951
39955
|
}
|
|
39952
39956
|
};
|
|
39953
39957
|
|
|
39954
|
-
const styleCss$
|
|
39958
|
+
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}";
|
|
39955
39959
|
|
|
39956
39960
|
let MonthSelector = class {
|
|
39957
39961
|
constructor(hostRef) {
|
|
@@ -39980,9 +39984,9 @@ let MonthSelector = class {
|
|
|
39980
39984
|
"value": ["onValueChanged"]
|
|
39981
39985
|
}; }
|
|
39982
39986
|
};
|
|
39983
|
-
MonthSelector.style = styleCss$
|
|
39987
|
+
MonthSelector.style = styleCss$p;
|
|
39984
39988
|
|
|
39985
|
-
const styleCss$
|
|
39989
|
+
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))}";
|
|
39986
39990
|
|
|
39987
39991
|
let Item = class {
|
|
39988
39992
|
constructor(hostRef) {
|
|
@@ -40016,9 +40020,9 @@ let Item = class {
|
|
|
40016
40020
|
"selected": ["onSelectedChanged"]
|
|
40017
40021
|
}; }
|
|
40018
40022
|
};
|
|
40019
|
-
Item.style = styleCss$
|
|
40023
|
+
Item.style = styleCss$o;
|
|
40020
40024
|
|
|
40021
|
-
const styleCss$
|
|
40025
|
+
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}";
|
|
40022
40026
|
|
|
40023
40027
|
let SmoothlyMenuOptions = class {
|
|
40024
40028
|
constructor(hostRef) {
|
|
@@ -40117,9 +40121,9 @@ let SmoothlyMenuOptions = class {
|
|
|
40117
40121
|
"options": ["optionsChangeHandler"]
|
|
40118
40122
|
}; }
|
|
40119
40123
|
};
|
|
40120
|
-
SmoothlyMenuOptions.style = styleCss$
|
|
40124
|
+
SmoothlyMenuOptions.style = styleCss$n;
|
|
40121
40125
|
|
|
40122
|
-
const styleCss$
|
|
40126
|
+
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}";
|
|
40123
40127
|
|
|
40124
40128
|
let Notification = class {
|
|
40125
40129
|
constructor(hostRef) {
|
|
@@ -40177,9 +40181,9 @@ let Notification = class {
|
|
|
40177
40181
|
"notice": ["onUpdatedNotice"]
|
|
40178
40182
|
}; }
|
|
40179
40183
|
};
|
|
40180
|
-
Notification.style = styleCss$
|
|
40184
|
+
Notification.style = styleCss$m;
|
|
40181
40185
|
|
|
40182
|
-
const styleCss$
|
|
40186
|
+
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}";
|
|
40183
40187
|
|
|
40184
40188
|
let Notifier = class {
|
|
40185
40189
|
constructor(hostRef) {
|
|
@@ -40199,9 +40203,9 @@ let Notifier = class {
|
|
|
40199
40203
|
];
|
|
40200
40204
|
}
|
|
40201
40205
|
};
|
|
40202
|
-
Notifier.style = styleCss$
|
|
40206
|
+
Notifier.style = styleCss$l;
|
|
40203
40207
|
|
|
40204
|
-
const styleCss$
|
|
40208
|
+
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))}";
|
|
40205
40209
|
|
|
40206
40210
|
let SmoothlyOption = class {
|
|
40207
40211
|
constructor(hostRef) {
|
|
@@ -40225,9 +40229,9 @@ let SmoothlyOption = class {
|
|
|
40225
40229
|
}
|
|
40226
40230
|
get element() { return index.getElement(this); }
|
|
40227
40231
|
};
|
|
40228
|
-
SmoothlyOption.style = styleCss$
|
|
40232
|
+
SmoothlyOption.style = styleCss$k;
|
|
40229
40233
|
|
|
40230
|
-
const styleCss$
|
|
40234
|
+
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}";
|
|
40231
40235
|
|
|
40232
40236
|
let SmoothlyPicker = class {
|
|
40233
40237
|
constructor(hostRef) {
|
|
@@ -40369,9 +40373,9 @@ let SmoothlyPicker = class {
|
|
|
40369
40373
|
"isOpen": ["isOpenChangeHander"]
|
|
40370
40374
|
}; }
|
|
40371
40375
|
};
|
|
40372
|
-
SmoothlyPicker.style = styleCss$
|
|
40376
|
+
SmoothlyPicker.style = styleCss$j;
|
|
40373
40377
|
|
|
40374
|
-
const styleCss$
|
|
40378
|
+
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}";
|
|
40375
40379
|
|
|
40376
40380
|
let SmoothlyPopup = class {
|
|
40377
40381
|
constructor(hostRef) {
|
|
@@ -40400,9 +40404,9 @@ let SmoothlyPopup = class {
|
|
|
40400
40404
|
return (index.h(index.Host, { style: Object.assign({}, this.cssVariables) }, index.h("content", { class: "pointer", onClick: () => this.onClick() }, index.h("slot", null)), index.h("div", { class: "background", onClick: () => this.onClick() }), index.h("div", { class: "arrow", onClick: () => this.onClick() }), index.h("aside", { ref: el => (this.aside = el) }, index.h("slot", { name: "popup" }))));
|
|
40401
40405
|
}
|
|
40402
40406
|
};
|
|
40403
|
-
SmoothlyPopup.style = styleCss$
|
|
40407
|
+
SmoothlyPopup.style = styleCss$i;
|
|
40404
40408
|
|
|
40405
|
-
const styleCss$
|
|
40409
|
+
const styleCss$h = ".sc-smoothly-quiet-h{opacity:0.5}";
|
|
40406
40410
|
|
|
40407
40411
|
let SmoothlyQuiet = class {
|
|
40408
40412
|
constructor(hostRef) {
|
|
@@ -40412,9 +40416,9 @@ let SmoothlyQuiet = class {
|
|
|
40412
40416
|
return (index.h(index.Host, { color: this.color }, index.h("slot", null)));
|
|
40413
40417
|
}
|
|
40414
40418
|
};
|
|
40415
|
-
SmoothlyQuiet.style = styleCss$
|
|
40419
|
+
SmoothlyQuiet.style = styleCss$h;
|
|
40416
40420
|
|
|
40417
|
-
const styleCss$
|
|
40421
|
+
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))}";
|
|
40418
40422
|
|
|
40419
40423
|
let SmoothlyRadio = class {
|
|
40420
40424
|
constructor(hostRef) {
|
|
@@ -40433,7 +40437,7 @@ let SmoothlyRadio = class {
|
|
|
40433
40437
|
];
|
|
40434
40438
|
}
|
|
40435
40439
|
};
|
|
40436
|
-
SmoothlyRadio.style = styleCss$
|
|
40440
|
+
SmoothlyRadio.style = styleCss$g;
|
|
40437
40441
|
|
|
40438
40442
|
let SmoothlyRoom = class {
|
|
40439
40443
|
constructor(hostRef) {
|
|
@@ -40444,7 +40448,7 @@ let SmoothlyRoom = class {
|
|
|
40444
40448
|
}
|
|
40445
40449
|
};
|
|
40446
40450
|
|
|
40447
|
-
const styleCss$
|
|
40451
|
+
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}";
|
|
40448
40452
|
|
|
40449
40453
|
let SmoothlySelect = class {
|
|
40450
40454
|
constructor(hostRef) {
|
|
@@ -40466,9 +40470,9 @@ let SmoothlySelect = class {
|
|
|
40466
40470
|
];
|
|
40467
40471
|
}
|
|
40468
40472
|
};
|
|
40469
|
-
SmoothlySelect.style = styleCss$
|
|
40473
|
+
SmoothlySelect.style = styleCss$f;
|
|
40470
40474
|
|
|
40471
|
-
const styleCss$
|
|
40475
|
+
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}";
|
|
40472
40476
|
|
|
40473
40477
|
let SmoothlySelectDemo = class {
|
|
40474
40478
|
constructor(hostRef) {
|
|
@@ -40545,9 +40549,9 @@ let SmoothlySelectDemo = class {
|
|
|
40545
40549
|
];
|
|
40546
40550
|
}
|
|
40547
40551
|
};
|
|
40548
|
-
SmoothlySelectDemo.style = styleCss$
|
|
40552
|
+
SmoothlySelectDemo.style = styleCss$e;
|
|
40549
40553
|
|
|
40550
|
-
const styleCss$
|
|
40554
|
+
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}";
|
|
40551
40555
|
|
|
40552
40556
|
let Selector = class {
|
|
40553
40557
|
constructor(hostRef) {
|
|
@@ -40657,7 +40661,27 @@ function isItem(value) {
|
|
|
40657
40661
|
(typeof value.selected == "boolean" || value.selected == undefined) &&
|
|
40658
40662
|
typeof value.filter == "function");
|
|
40659
40663
|
}
|
|
40660
|
-
Selector.style = styleCss$
|
|
40664
|
+
Selector.style = styleCss$d;
|
|
40665
|
+
|
|
40666
|
+
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)}}";
|
|
40667
|
+
|
|
40668
|
+
let SmoothlySkeleton = class {
|
|
40669
|
+
constructor(hostRef) {
|
|
40670
|
+
index.registerInstance(this, hostRef);
|
|
40671
|
+
this.widths = ["8rem", "9rem", "10rem"];
|
|
40672
|
+
this.align = "left";
|
|
40673
|
+
}
|
|
40674
|
+
componentWillLoad() {
|
|
40675
|
+
var _a;
|
|
40676
|
+
this.width = (_a = this.width) !== null && _a !== void 0 ? _a : this.widths[Math.floor(Math.random() * this.widths.length)];
|
|
40677
|
+
}
|
|
40678
|
+
render() {
|
|
40679
|
+
var _a;
|
|
40680
|
+
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));
|
|
40681
|
+
return index.h(index.Host, { style: cssVariables });
|
|
40682
|
+
}
|
|
40683
|
+
};
|
|
40684
|
+
SmoothlySkeleton.style = styleCss$c;
|
|
40661
40685
|
|
|
40662
40686
|
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)}}";
|
|
40663
40687
|
|
|
@@ -41042,6 +41066,7 @@ exports.smoothly_room = SmoothlyRoom;
|
|
|
41042
41066
|
exports.smoothly_select = SmoothlySelect;
|
|
41043
41067
|
exports.smoothly_select_demo = SmoothlySelectDemo;
|
|
41044
41068
|
exports.smoothly_selector = Selector;
|
|
41069
|
+
exports.smoothly_skeleton = SmoothlySkeleton;
|
|
41045
41070
|
exports.smoothly_spinner = SmoothlySpinner;
|
|
41046
41071
|
exports.smoothly_submit = SmoothlySubmit;
|
|
41047
41072
|
exports.smoothly_tab = SmoothlyTab;
|
|
@@ -17,7 +17,7 @@ let SmoothlyDisplayDemo = class {
|
|
|
17
17
|
}
|
|
18
18
|
render() {
|
|
19
19
|
return [
|
|
20
|
-
index.h("main", null, index.h("smoothly-popup", null, index.h("div", null, "Popup, click me"), index.h("div", { color: "dark", slot: "popup" }, "1 line popup")), index.h("smoothly-display-date-time", { datetime: "2019-08-15T08:08:17.65Z" }), index.h("dl", null, index.h("dt", null, "text"), index.h("dd", null, index.h("smoothly-display", { type: "text", value: "text" })), index.h("dt", null, "postal code"), index.h("dd", null, index.h("smoothly-display", { type: "postal-code", value: "752 31" })), index.h("dt", null, "password"), index.h("dd", null, index.h("smoothly-display", { type: "password", value: "password" })), index.h("dt", null, "email"), index.h("dd", null, index.h("smoothly-display", { type: "email", value: "test@example.com" })), index.h("dt", null, "price"), index.h("dd", null, index.h("smoothly-display", { type: "price", value: "13.37", currency: "SEK" })), index.h("dt", null, "percent"), index.h("dd", null, index.h("smoothly-display", { type: "percent", value: "42" })), index.h("dt", null, "phone"), index.h("dd", null, index.h("smoothly-display", { type: "phone", value: "0101881108" })), index.h("dt", null, "card number"), index.h("dd", null, index.h("smoothly-display", { type: "card-number", value: "4111111111111111" })), index.h("dt", null, "card expires"), index.h("dd", null, index.h("smoothly-display", { type: "card-expires", value: "7/22" })), index.h("dt", null, "card csc"), index.h("dd", null, index.h("smoothly-display", { type: "card-csc", value: "987" })), index.h("dt", null, "Quiet"), index.h("dd", null, index.h("smoothly-quiet", { color: "dark" }, "-"))), index.h("smoothly-urlencoded", { data: "hej=hopp&tjena=moss" }), index.h("div", { style: { display: "flex", justifyContent: "space-between" } }, index.h("smoothly-popup", { direction: "down" }, "Click for popup", index.h("span", { slot: "popup", color: "dark", style: { whiteSpace: "nowrap" } }, "Some popup stuff that has a lot of text")), index.h("smoothly-popup", { direction: "down" }, "Click for popup", index.h("span", { slot: "popup", color: "dark", style: { whiteSpace: "nowrap" } }, "Some popup with a bunch of text."))), index.h("p", null, "Test of diffrent kinds of notifier:"), index.h("button", { onClick: () => this.noticeWarning(index$1.Notice.warn("This is a test warning notice.")) }, "warning"), index.h("button", { onClick: () => this.noticeWarning(index$1.Notice.succeded("This is a test success notice.")) }, "success"), index.h("button", { onClick: () => this.noticeWarning(index$1.Notice.failed("This is a test danger notice.")) }, "danger"), index.h("button", { onClick: () => this.noticeWarning(index$1.Notice.execute("This is a test execute notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "execute"), index.h("button", { onClick: () => this.noticeWarning(index$1.Notice.delay("This is a test delay notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "delay"), index.h("div", { style: { position: "relative", height: "10em" } }, "Large Spinner", index.h("smoothly-spinner", { active: true, size: "large", style: { "--background-color": "255,255,255", "--background-opacity": "0.2", "--spinner-color": "0,130,0", } })), index.h("div", { style: { position: "relative", height: "10em" } }, "Medium Spinner", index.h("smoothly-spinner", { active: true, size: "medium" })), index.h("div", { style: { position: "relative", height: "10em" } }, "Small Spinner", index.h("smoothly-spinner", { active: true, size: "small" }))),
|
|
20
|
+
index.h("main", null, index.h("smoothly-popup", null, index.h("div", null, "Popup, click me"), index.h("div", { color: "dark", slot: "popup" }, "1 line popup")), index.h("smoothly-display-date-time", { datetime: "2019-08-15T08:08:17.65Z" }), index.h("dl", null, index.h("dt", null, "text"), index.h("dd", null, index.h("smoothly-display", { type: "text", value: "text" })), index.h("dt", null, "postal code"), index.h("dd", null, index.h("smoothly-display", { type: "postal-code", value: "752 31" })), index.h("dt", null, "password"), index.h("dd", null, index.h("smoothly-display", { type: "password", value: "password" })), index.h("dt", null, "email"), index.h("dd", null, index.h("smoothly-display", { type: "email", value: "test@example.com" })), index.h("dt", null, "price"), index.h("dd", null, index.h("smoothly-display", { type: "price", value: "13.37", currency: "SEK" })), index.h("dt", null, "percent"), index.h("dd", null, index.h("smoothly-display", { type: "percent", value: "42" })), index.h("dt", null, "phone"), index.h("dd", null, index.h("smoothly-display", { type: "phone", value: "0101881108" })), index.h("dt", null, "card number"), index.h("dd", null, index.h("smoothly-display", { type: "card-number", value: "4111111111111111" })), index.h("dt", null, "card expires"), index.h("dd", null, index.h("smoothly-display", { type: "card-expires", value: "7/22" })), index.h("dt", null, "card csc"), index.h("dd", null, index.h("smoothly-display", { type: "card-csc", value: "987" })), index.h("dt", null, "Quiet"), index.h("dd", null, index.h("smoothly-quiet", { color: "dark" }, "-"))), index.h("smoothly-skeleton", { period: 3, distance: "20rem", width: "20rem" }), index.h("smoothly-skeleton", { period: 3, distance: "20rem", color: "200,200,255" }), index.h("smoothly-skeleton", { period: 3, distance: "20rem", color: "var(--smoothly-warning-color)" }), index.h("smoothly-skeleton", { period: 3, distance: "20rem" }), index.h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem", width: "20rem" }), index.h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), index.h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), index.h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), index.h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem", width: "20rem" }), index.h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" }), index.h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" }), index.h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" }), index.h("smoothly-urlencoded", { data: "hej=hopp&tjena=moss" }), index.h("div", { style: { display: "flex", justifyContent: "space-between" } }, index.h("smoothly-popup", { direction: "down" }, "Click for popup", index.h("span", { slot: "popup", color: "dark", style: { whiteSpace: "nowrap" } }, "Some popup stuff that has a lot of text")), index.h("smoothly-popup", { direction: "down" }, "Click for popup", index.h("span", { slot: "popup", color: "dark", style: { whiteSpace: "nowrap" } }, "Some popup with a bunch of text."))), index.h("p", null, "Test of diffrent kinds of notifier:"), index.h("button", { onClick: () => this.noticeWarning(index$1.Notice.warn("This is a test warning notice.")) }, "warning"), index.h("button", { onClick: () => this.noticeWarning(index$1.Notice.succeded("This is a test success notice.")) }, "success"), index.h("button", { onClick: () => this.noticeWarning(index$1.Notice.failed("This is a test danger notice.")) }, "danger"), index.h("button", { onClick: () => this.noticeWarning(index$1.Notice.execute("This is a test execute notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "execute"), index.h("button", { onClick: () => this.noticeWarning(index$1.Notice.delay("This is a test delay notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "delay"), index.h("div", { style: { position: "relative", height: "10em" } }, "Large Spinner", index.h("smoothly-spinner", { active: true, size: "large", style: { "--background-color": "255,255,255", "--background-opacity": "0.2", "--spinner-color": "0,130,0", } })), index.h("div", { style: { position: "relative", height: "10em" } }, "Medium Spinner", index.h("smoothly-spinner", { active: true, size: "medium" })), index.h("div", { style: { position: "relative", height: "10em" } }, "Small Spinner", index.h("smoothly-spinner", { active: true, size: "small" }))),
|
|
21
21
|
];
|
|
22
22
|
}
|
|
23
23
|
};
|
|
@@ -23,12 +23,16 @@ let InputDate = class {
|
|
|
23
23
|
render() {
|
|
24
24
|
var _a;
|
|
25
25
|
return [
|
|
26
|
-
index.h("smoothly-input", { onClick: () => (this.open = !this.open), type: "date", value: this.value, onSmoothlyChanged: e => (this.value = e.detail.value) }, index.h("slot", null)),
|
|
27
|
-
this.open
|
|
28
|
-
|
|
29
|
-
this.
|
|
30
|
-
|
|
31
|
-
|
|
26
|
+
index.h("smoothly-input", { onClick: () => (this.open = !this.open), disabled: this.disabled, type: "date", value: this.value, onSmoothlyChanged: e => (this.value = e.detail.value) }, index.h("slot", null)),
|
|
27
|
+
this.open && !this.disabled
|
|
28
|
+
? [
|
|
29
|
+
index.h("div", { onClick: () => (this.open = false) }),
|
|
30
|
+
index.h("nav", null, index.h("div", { class: "arrow" }), index.h("smoothly-calendar", { doubleInput: false, value: (_a = this.value) !== null && _a !== void 0 ? _a : index$1.dist.Date.now(), onValueChanged: event => {
|
|
31
|
+
this.value = event.detail;
|
|
32
|
+
event.stopPropagation();
|
|
33
|
+
}, max: this.max, min: this.min })),
|
|
34
|
+
]
|
|
35
|
+
: [],
|
|
32
36
|
];
|
|
33
37
|
}
|
|
34
38
|
static get watchers() { return {
|