smoothly 0.3.0 → 0.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{smoothly-accordion_50.cjs.entry.js → smoothly-accordion_52.cjs.entry.js} +103 -57
- package/dist/cjs/smoothly.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +2 -0
- package/dist/collection/components/display-amount/index.js +22 -1
- package/dist/collection/components/display-demo/index.js +9 -0
- package/dist/collection/components/input-demo/index.js +9 -0
- package/dist/collection/components/radio-button/Selected.js +1 -0
- package/dist/collection/components/radio-button/index.js +48 -0
- package/dist/collection/components/radio-button/item/index.js +107 -0
- package/dist/collection/components/radio-button/item/style.css +67 -0
- package/dist/collection/components/radio-button/style.css +3 -0
- package/dist/custom-elements/index.d.ts +12 -0
- package/dist/custom-elements/index.js +108 -58
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{smoothly-accordion_50.entry.js → smoothly-accordion_52.entry.js} +102 -58
- package/dist/esm/smoothly.js +1 -1
- package/dist/smoothly/{p-71443887.entry.js → p-ed84bc93.entry.js} +1 -1
- package/dist/smoothly/smoothly.esm.js +1 -1
- package/dist/types/components/display-amount/index.d.ts +1 -0
- package/dist/types/components/radio-button/Selected.d.ts +5 -0
- package/dist/types/components/radio-button/index.d.ts +7 -0
- package/dist/types/components/radio-button/item/index.d.ts +11 -0
- package/dist/types/components.d.ts +42 -0
- package/package.json +1 -1
|
@@ -7,7 +7,7 @@ const index$1 = require('./index-2a011313.js');
|
|
|
7
7
|
const Trigger = require('./Trigger-3443997e.js');
|
|
8
8
|
require('./GoogleFont-6c4f0da1.js');
|
|
9
9
|
|
|
10
|
-
const styleCss$
|
|
10
|
+
const styleCss$I = "smoothly-accordion-item.sc-smoothly-accordion{border:1px solid rgb(var(--smoothly-dark-color));border-bottom:none}smoothly-accordion-item.sc-smoothly-accordion:first-of-type{border-top-left-radius:4px;border-top-right-radius:4px;margin-top:0.4em}smoothly-accordion-item.sc-smoothly-accordion:last-of-type{border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-bottom:1px solid rgb(var(--smoothly-dark-color));margin-bottom:0.6em}smoothly-accordion-item[open].sc-smoothly-accordion{border-color:rgb(var(--smoothly-primary-color));border-bottom:1px solid rgb(var(--smoothly-primary-color))}smoothly-accordion-item[open].sc-smoothly-accordion+smoothly-accordion-item.sc-smoothly-accordion{border-top:none}";
|
|
11
11
|
|
|
12
12
|
const SmoothlyAccordion = class {
|
|
13
13
|
constructor(hostRef) {
|
|
@@ -53,9 +53,9 @@ const SmoothlyAccordion = class {
|
|
|
53
53
|
"value": ["valueChanged"]
|
|
54
54
|
}; }
|
|
55
55
|
};
|
|
56
|
-
SmoothlyAccordion.style = styleCss$
|
|
56
|
+
SmoothlyAccordion.style = styleCss$I;
|
|
57
57
|
|
|
58
|
-
const styleCss$
|
|
58
|
+
const styleCss$H = ".sc-smoothly-accordion-item-h{display:block}[hidden].sc-smoothly-accordion-item-h{display:none}details.sc-smoothly-accordion-item{padding:0}details.sc-smoothly-accordion-item>summary.sc-smoothly-accordion-item>span.sc-smoothly-accordion-item{float:right;margin:0.2em;font-size:60%}details.sc-smoothly-accordion-item>summary.sc-smoothly-accordion-item{font-size:120%;list-style-type:none;cursor:pointer;padding:0.4em;color:rgb(var(--smoothly-text-tint))}details.sc-smoothly-accordion-item>fieldset.sc-smoothly-accordion-item{border:none;margin:0;padding:0}[open].sc-smoothly-accordion-item-h>details.sc-smoothly-accordion-item>summary.sc-smoothly-accordion-item{color:rgb(var(--smoothly-primary-contrast));background:rgb(var(--smoothly-primary-color))}details.sc-smoothly-accordion-item>summary.sc-smoothly-accordion-item::-webkit-details-marker{display:none}details.sc-smoothly-accordion-item>summary.sc-smoothly-accordion-item>svg.sc-smoothly-accordion-item{width:1em;height:auto;margin-bottom:-0.2em;margin-right:0.4em}[open].sc-smoothly-accordion-item-h>details.sc-smoothly-accordion-item>summary.sc-smoothly-accordion-item>svg.sc-smoothly-accordion-item{fill:rgb(var(--smoothly-primary-contrast))}.sc-smoothly-accordion-item-h:not([open])>details.sc-smoothly-accordion-item>summary.sc-smoothly-accordion-item>svg.sc-smoothly-accordion-item{fill:rgb(var(--smoothly-text-tint))}";
|
|
59
59
|
|
|
60
60
|
const SmoothlyAccordionItem = class {
|
|
61
61
|
constructor(hostRef) {
|
|
@@ -100,9 +100,9 @@ const SmoothlyAccordionItem = class {
|
|
|
100
100
|
"open": ["openChanged"]
|
|
101
101
|
}; }
|
|
102
102
|
};
|
|
103
|
-
SmoothlyAccordionItem.style = styleCss$
|
|
103
|
+
SmoothlyAccordionItem.style = styleCss$H;
|
|
104
104
|
|
|
105
|
-
const styleCss$
|
|
105
|
+
const styleCss$G = "smoothly-app{display:block;scrollbar-width:none}smoothly-app[hidden]{display:none}smoothly-app[color=default],smoothly-app:not([color]){--smoothly-app-background:var(--smoothly-default-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:5rem;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;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{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:3.8rem}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:2.1rem;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:3.9rem}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:2.3rem;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>main{position:relative;top:5.6rem}";
|
|
106
106
|
|
|
107
107
|
const SmoothlyApp = class {
|
|
108
108
|
constructor(hostRef) {
|
|
@@ -112,7 +112,7 @@ const 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$G;
|
|
116
116
|
|
|
117
117
|
const SmoothlyAppDemo = class {
|
|
118
118
|
constructor(hostRef) {
|
|
@@ -139,7 +139,7 @@ const SmoothlyAppDemo = class {
|
|
|
139
139
|
}
|
|
140
140
|
};
|
|
141
141
|
|
|
142
|
-
const styleCss$
|
|
142
|
+
const styleCss$F = ".sc-smoothly-backtotop-h{background-color:rgba(var(--smoothly-default-color), 1);opacity:var(--opacity);pointer-events:var(--pointer-events);transition:opacity 400ms;z-index:3;border-radius:50%;box-shadow:var(--smoothly-shadow);height:3rem;width:3rem;position:fixed;bottom:var(--bottom);right:var(--right);outline:none;cursor:pointer;display:flex;justify-content:center;align-items:center}";
|
|
143
143
|
|
|
144
144
|
const SmoothlyBacktotop = class {
|
|
145
145
|
constructor(hostRef) {
|
|
@@ -167,9 +167,9 @@ const SmoothlyBacktotop = class {
|
|
|
167
167
|
}) }, index.h("smoothly-icon", { name: "chevron-up-outline" })));
|
|
168
168
|
}
|
|
169
169
|
};
|
|
170
|
-
SmoothlyBacktotop.style = styleCss$
|
|
170
|
+
SmoothlyBacktotop.style = styleCss$F;
|
|
171
171
|
|
|
172
|
-
const styleCss$
|
|
172
|
+
const styleCss$E = "[type=link].sc-smoothly-button-h{display:inline}.sc-smoothly-button-h:not([type=link]){display:block}.sc-smoothly-button-h{margin:1em;border-style:solid;border-width:1px;border-radius:3px}[hidden].sc-smoothly-button-h{display:none}[disabled].sc-smoothly-button-h{opacity:0.5}a.sc-smoothly-button,button.sc-smoothly-button{display:block;border-color:transparent;background-color:transparent;padding:0.2em 0.3em;font-size:110%;font-weight:400}.sc-smoothly-button-h:not([disabled]):hover,.sc-smoothly-button-h:not([disabled]):focus,.sc-smoothly-button-h:not([disabled]):active{border-color:var(--smoothly-button-border)}[type=button].sc-smoothly-button-h>a.sc-smoothly-button{display:block;text-align:center;text-decoration:inherit}[type=button].sc-smoothly-button-h>a.sc-smoothly-button{width:calc(100% - 0.6em)}.sc-smoothly-button-h>button.sc-smoothly-button{width:100%}[expand=fill].sc-smoothly-button-h{width:100%;border-left:none;border-right:none}";
|
|
173
173
|
|
|
174
174
|
const SmoothlyButton = class {
|
|
175
175
|
constructor(hostRef) {
|
|
@@ -190,7 +190,7 @@ const SmoothlyButton = class {
|
|
|
190
190
|
return result;
|
|
191
191
|
}
|
|
192
192
|
};
|
|
193
|
-
SmoothlyButton.style = styleCss$
|
|
193
|
+
SmoothlyButton.style = styleCss$E;
|
|
194
194
|
|
|
195
195
|
var CallingCode$1;
|
|
196
196
|
(function (CallingCode) {
|
|
@@ -6310,7 +6310,7 @@ function years(current) {
|
|
|
6310
6310
|
return result;
|
|
6311
6311
|
}
|
|
6312
6312
|
|
|
6313
|
-
const styleCss$
|
|
6313
|
+
const styleCss$D = ".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)}";
|
|
6314
6314
|
|
|
6315
6315
|
const Calendar = class {
|
|
6316
6316
|
constructor(hostRef) {
|
|
@@ -6393,7 +6393,7 @@ const Calendar = class {
|
|
|
6393
6393
|
"end": ["onEnd"]
|
|
6394
6394
|
}; }
|
|
6395
6395
|
};
|
|
6396
|
-
Calendar.style = styleCss$
|
|
6396
|
+
Calendar.style = styleCss$D;
|
|
6397
6397
|
|
|
6398
6398
|
var CallingCode;
|
|
6399
6399
|
(function (CallingCode) {
|
|
@@ -12333,7 +12333,7 @@ function create(language) {
|
|
|
12333
12333
|
}, language);
|
|
12334
12334
|
}
|
|
12335
12335
|
|
|
12336
|
-
const styleCss$
|
|
12336
|
+
const styleCss$C = ".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)}";
|
|
12337
12337
|
|
|
12338
12338
|
const SmoothlyCheckbox = class {
|
|
12339
12339
|
constructor(hostRef) {
|
|
@@ -12360,9 +12360,9 @@ const SmoothlyCheckbox = class {
|
|
|
12360
12360
|
}
|
|
12361
12361
|
get element() { return index.getElement(this); }
|
|
12362
12362
|
};
|
|
12363
|
-
SmoothlyCheckbox.style = styleCss$
|
|
12363
|
+
SmoothlyCheckbox.style = styleCss$C;
|
|
12364
12364
|
|
|
12365
|
-
const styleCss$
|
|
12365
|
+
const styleCss$B = ".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}";
|
|
12366
12366
|
|
|
12367
12367
|
const SmoothlyDialog = class {
|
|
12368
12368
|
constructor(hostRef) {
|
|
@@ -12389,7 +12389,7 @@ const SmoothlyDialog = class {
|
|
|
12389
12389
|
}
|
|
12390
12390
|
render() { return index.h(index.Host, this.hostData(), this.__stencil_render()); }
|
|
12391
12391
|
};
|
|
12392
|
-
SmoothlyDialog.style = styleCss$
|
|
12392
|
+
SmoothlyDialog.style = styleCss$B;
|
|
12393
12393
|
|
|
12394
12394
|
const SmoothlyDialogDemo = class {
|
|
12395
12395
|
constructor(hostRef) {
|
|
@@ -32610,7 +32610,7 @@ Object.defineProperty(exports, "StateEditor", { enumerable: true, get: function
|
|
|
32610
32610
|
//# sourceMappingURL=index.js.map
|
|
32611
32611
|
});
|
|
32612
32612
|
|
|
32613
|
-
const styleCss$
|
|
32613
|
+
const styleCss$A = ".sc-smoothly-display-h{display:block}[hidden].sc-smoothly-display-h{display:none}";
|
|
32614
32614
|
|
|
32615
32615
|
const SmoothlyDisplay = class {
|
|
32616
32616
|
constructor(hostRef) {
|
|
@@ -32652,13 +32652,14 @@ function getLocale$1() {
|
|
|
32652
32652
|
const result = navigator.language;
|
|
32653
32653
|
return Locale$1.is(result) ? result : Language$1.is(result) ? Locale$1.toLocale(result) : undefined;
|
|
32654
32654
|
}
|
|
32655
|
-
SmoothlyDisplay.style = styleCss$
|
|
32655
|
+
SmoothlyDisplay.style = styleCss$A;
|
|
32656
32656
|
|
|
32657
|
-
const styleCss$
|
|
32657
|
+
const styleCss$z = ".sc-smoothly-display-amount-h{display:block}[hidden].sc-smoothly-display-amount-h{display:none}";
|
|
32658
32658
|
|
|
32659
32659
|
const SmoothlyDisplayAmount = class {
|
|
32660
32660
|
constructor(hostRef) {
|
|
32661
32661
|
index.registerInstance(this, hostRef);
|
|
32662
|
+
this.toInteger = false;
|
|
32662
32663
|
}
|
|
32663
32664
|
format(amount) {
|
|
32664
32665
|
const digitsPerGroup = 3;
|
|
@@ -32679,7 +32680,7 @@ const SmoothlyDisplayAmount = class {
|
|
|
32679
32680
|
result = result.padEnd(separator + maxDecimals + 1, "0");
|
|
32680
32681
|
result = result.substring(0, separator + maxDecimals + 1);
|
|
32681
32682
|
}
|
|
32682
|
-
else {
|
|
32683
|
+
else if (!this.toInteger) {
|
|
32683
32684
|
result = result + ".";
|
|
32684
32685
|
separator = result.length - 1;
|
|
32685
32686
|
result = result.padEnd(separator + maxDecimals + 1, "0");
|
|
@@ -32702,9 +32703,9 @@ const SmoothlyDisplayAmount = class {
|
|
|
32702
32703
|
];
|
|
32703
32704
|
}
|
|
32704
32705
|
};
|
|
32705
|
-
SmoothlyDisplayAmount.style = styleCss$
|
|
32706
|
+
SmoothlyDisplayAmount.style = styleCss$z;
|
|
32706
32707
|
|
|
32707
|
-
const styleCss$
|
|
32708
|
+
const styleCss$y = ".sc-smoothly-display-date-time-h{display:block}[hidden].sc-smoothly-display-date-time-h{display:none}";
|
|
32708
32709
|
|
|
32709
32710
|
const SmoothlyDisplayDateTime = class {
|
|
32710
32711
|
constructor(hostRef) {
|
|
@@ -32718,7 +32719,7 @@ const SmoothlyDisplayDateTime = class {
|
|
|
32718
32719
|
return [datetime[0], " ", datetime[1]];
|
|
32719
32720
|
}
|
|
32720
32721
|
};
|
|
32721
|
-
SmoothlyDisplayDateTime.style = styleCss$
|
|
32722
|
+
SmoothlyDisplayDateTime.style = styleCss$y;
|
|
32722
32723
|
|
|
32723
32724
|
const SmoothlyDisplayDemo = class {
|
|
32724
32725
|
constructor(hostRef) {
|
|
@@ -32731,12 +32732,12 @@ const SmoothlyDisplayDemo = class {
|
|
|
32731
32732
|
}
|
|
32732
32733
|
render() {
|
|
32733
32734
|
return [
|
|
32734
|
-
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, "date"), index.h("dd", null, index.h("smoothly-display", { type: "date", value: "2022-07-07" })), index.h("dt", null, "date time"), index.h("dd", null, index.h("smoothly-display", { type: "date-time", format: { year: "numeric", month: "short", day: "numeric", hour: "numeric", minute: "numeric", second: "numeric" }, value: "2022-07-07T02:02:02Z" })), index.h("dd", null, index.h("smoothly-display", { type: "date-time", format: { year: "2-digit", month: "long", day: "2-digit", hour: "2-digit", minute: "2-digit", second: "2-digit" }, value: "2022-07-07T02:02:02Z" })), index.h("dd", null, index.h("smoothly-display", { type: "date-time", format: { year: "numeric", month: "2-digit", day: "2-digit", hour: "numeric", minute: "numeric", second: "numeric" }, value: "2022-07-07T12:22:24Z" })), index.h("dd", null, index.h("smoothly-display", { type: "date-time", format: { year: "numeric", month: "numeric", day: "numeric", hour: "numeric", minute: "numeric", second: "numeric" }, value: "2022-07-07T12:22:24Z" })), index.h("dd", null, index.h("smoothly-display", { type: "date-time", format: { year: "numeric", month: "short", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), index.h("dd", null, index.h("smoothly-display", { type: "date-time", format: { year: "2-digit", month: "numeric", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), index.h("dd", null, index.h("smoothly-display", { type: "date-time", format: { year: "2-digit", month: "numeric", day: "numeric", hour: "2-digit", minute: "2-digit", second: "2-digit", timeZone: "+01:00" }, value: "2022-07-07T12:15Z" })), 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")),
|
|
32735
|
+
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, "display amount without decimals"), index.h("dd", null, index.h("smoothly-display-amount", { amount: 200, currency: "SEK", toInteger: true })), index.h("dt", null, "display amount with decimals if they are set, otherwise no decimal"), index.h("dd", null, index.h("smoothly-display-amount", { amount: 200.20, currency: "SEK", toInteger: true })), index.h("dt", null, "display amount with decimals"), index.h("dd", null, index.h("smoothly-display-amount", { amount: 200.20, 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, "date"), index.h("dd", null, index.h("smoothly-display", { type: "date", value: "2022-07-07" })), index.h("dt", null, "date time"), index.h("dd", null, index.h("smoothly-display", { type: "date-time", format: { year: "numeric", month: "short", day: "numeric", hour: "numeric", minute: "numeric", second: "numeric" }, value: "2022-07-07T02:02:02Z" })), index.h("dd", null, index.h("smoothly-display", { type: "date-time", format: { year: "2-digit", month: "long", day: "2-digit", hour: "2-digit", minute: "2-digit", second: "2-digit" }, value: "2022-07-07T02:02:02Z" })), index.h("dd", null, index.h("smoothly-display", { type: "date-time", format: { year: "numeric", month: "2-digit", day: "2-digit", hour: "numeric", minute: "numeric", second: "numeric" }, value: "2022-07-07T12:22:24Z" })), index.h("dd", null, index.h("smoothly-display", { type: "date-time", format: { year: "numeric", month: "numeric", day: "numeric", hour: "numeric", minute: "numeric", second: "numeric" }, value: "2022-07-07T12:22:24Z" })), index.h("dd", null, index.h("smoothly-display", { type: "date-time", format: { year: "numeric", month: "short", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), index.h("dd", null, index.h("smoothly-display", { type: "date-time", format: { year: "2-digit", month: "numeric", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), index.h("dd", null, index.h("smoothly-display", { type: "date-time", format: { year: "2-digit", month: "numeric", day: "numeric", hour: "2-digit", minute: "2-digit", second: "2-digit", timeZone: "+01:00" }, value: "2022-07-07T12:15Z" })), 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")),
|
|
32735
32736
|
];
|
|
32736
32737
|
}
|
|
32737
32738
|
};
|
|
32738
32739
|
|
|
32739
|
-
const styleCss$
|
|
32740
|
+
const styleCss$x = ".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}";
|
|
32740
32741
|
|
|
32741
32742
|
const SmoothlyFrame = class {
|
|
32742
32743
|
constructor(hostRef) {
|
|
@@ -32775,9 +32776,9 @@ const SmoothlyFrame = class {
|
|
|
32775
32776
|
}
|
|
32776
32777
|
get element() { return index.getElement(this); }
|
|
32777
32778
|
};
|
|
32778
|
-
SmoothlyFrame.style = styleCss$
|
|
32779
|
+
SmoothlyFrame.style = styleCss$x;
|
|
32779
32780
|
|
|
32780
|
-
const styleCss$
|
|
32781
|
+
const styleCss$w = "[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}";
|
|
32781
32782
|
|
|
32782
32783
|
const SmoothlyIcon = class {
|
|
32783
32784
|
constructor(hostRef) {
|
|
@@ -32820,9 +32821,9 @@ const SmoothlyIcon = class {
|
|
|
32820
32821
|
render() { return index.h(index.Host, this.hostData(), this.__stencil_render()); }
|
|
32821
32822
|
};
|
|
32822
32823
|
SmoothlyIcon.cache = {};
|
|
32823
|
-
SmoothlyIcon.style = styleCss$
|
|
32824
|
+
SmoothlyIcon.style = styleCss$w;
|
|
32824
32825
|
|
|
32825
|
-
const styleCss$
|
|
32826
|
+
const styleCss$v = "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}";
|
|
32826
32827
|
|
|
32827
32828
|
const SmoothlyIconDemo = class {
|
|
32828
32829
|
constructor(hostRef) {
|
|
@@ -33304,9 +33305,9 @@ const SmoothlyIconDemo = class {
|
|
|
33304
33305
|
];
|
|
33305
33306
|
}
|
|
33306
33307
|
};
|
|
33307
|
-
SmoothlyIconDemo.style = styleCss$
|
|
33308
|
+
SmoothlyIconDemo.style = styleCss$v;
|
|
33308
33309
|
|
|
33309
|
-
const styleCss$
|
|
33310
|
+
const styleCss$u = ".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.7em 0.3em 0.7em 0.4em}input.sc-smoothly-input{padding:1.2em 0.3em 0.2em 0.4em;box-sizing:border-box;width:100%;height:100%;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)))}";
|
|
33310
33311
|
|
|
33311
33312
|
const SmoothlyInput = class {
|
|
33312
33313
|
constructor(hostRef) {
|
|
@@ -33510,9 +33511,9 @@ function getLocale() {
|
|
|
33510
33511
|
const result = navigator.language;
|
|
33511
33512
|
return Locale$1.is(result) ? result : Language$1.is(result) ? Locale$1.toLocale(result) : undefined;
|
|
33512
33513
|
}
|
|
33513
|
-
SmoothlyInput.style = styleCss$
|
|
33514
|
+
SmoothlyInput.style = styleCss$u;
|
|
33514
33515
|
|
|
33515
|
-
const styleCss$
|
|
33516
|
+
const styleCss$t = ".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, -0.55em) rotate(45deg);width:1em;height:1em;background-color:rgb(var(--smoothly-default-shade))}";
|
|
33516
33517
|
|
|
33517
33518
|
const InputDate = class {
|
|
33518
33519
|
constructor(hostRef) {
|
|
@@ -33545,9 +33546,9 @@ const InputDate = class {
|
|
|
33545
33546
|
"value": ["onStart"]
|
|
33546
33547
|
}; }
|
|
33547
33548
|
};
|
|
33548
|
-
InputDate.style = styleCss$
|
|
33549
|
+
InputDate.style = styleCss$t;
|
|
33549
33550
|
|
|
33550
|
-
const styleCss$
|
|
33551
|
+
const styleCss$s = ".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}";
|
|
33551
33552
|
|
|
33552
33553
|
const InputDateRange = class {
|
|
33553
33554
|
constructor(hostRef) {
|
|
@@ -33586,7 +33587,7 @@ const InputDateRange = class {
|
|
|
33586
33587
|
"value": ["onValue"]
|
|
33587
33588
|
}; }
|
|
33588
33589
|
};
|
|
33589
|
-
InputDateRange.style = styleCss$
|
|
33590
|
+
InputDateRange.style = styleCss$s;
|
|
33590
33591
|
|
|
33591
33592
|
const SmoothlyInputDemo = class {
|
|
33592
33593
|
constructor(hostRef) {
|
|
@@ -33594,13 +33595,13 @@ const SmoothlyInputDemo = class {
|
|
|
33594
33595
|
}
|
|
33595
33596
|
render() {
|
|
33596
33597
|
return [
|
|
33597
|
-
index.h("form", { action: "done", style: { position: "relative" } }, index.h("header", null, index.h("h5", null, "Address")), index.h("main", null, index.h("smoothly-input", { type: "text", name: "name", readonly: true, value: "Readonly", onSmoothlyBlur: () => console.log("smoothly blur") }, "Readonly"), index.h("smoothly-input", { type: "text", name: "name.last", onSmoothlyChange: e => console.log("smoothly change event") }, "Name"), index.h("smoothly-input", { type: "text", name: "name.first", onSmoothlyChange: e => console.log("smoothly change event") }, "Name"), index.h("smoothly-input-date", null), index.h("smoothly-input", { type: "date", name: "date" }, "Date"), index.h("smoothly-input", { type: "date-time", name: "date-time" }, "Date-Time"), index.h("smoothly-input", { type: "divisor", name: "divisor" }, "Divisor"), index.h("smoothly-input", { type: "text", name: "street", value: "street" }, "Street"), index.h("smoothly-input", { type: "card-number", name: "card" }, "Card #"), index.h("smoothly-input", { type: "card-expires", name: "card", style: { width: "calc(60% - 2px)" } }, "Expires"), index.h("smoothly-input", { type: "card-csc", name: "card", style: { width: "calc(40% - 1px)", borderLeft: "none" } }, "CVV/CVC"), index.h("smoothly-radio", { name: "option", value: "1" }, "option 1"), index.h("smoothly-radio", { name: "option", value: "2", checked: true }, "option 2"), index.h("smoothly-radio", { name: "option", value: "3" }, "option 3"), index.h("smoothly-accordion", null, index.h("smoothly-accordion-item", { name: "A", open: true }, index.h("smoothly-radio", { name: "a", value: "1" }, "a 1"), index.h("smoothly-radio", { name: "a", value: "2", checked: true }, "a 2"), index.h("smoothly-radio", { name: "a", value: "3" }, "a 3")), index.h("smoothly-accordion-item", { name: "B" }, index.h("smoothly-radio", { name: "b", value: "1" }, "b 1"), index.h("smoothly-radio", { name: "b", value: "2" }, "b 2"), index.h("smoothly-radio", { name: "b", value: "3" }, "b 3"))), index.h("smoothly-display-amount", { currency: "SEK", amount: "1289.5" }), index.h("smoothly-display-date-time", { datetime: "2019-01-31T20:01:34" }), index.h("smoothly-checkbox", { selectAll: true, intermediate: true }), index.h("smoothly-checkbox", null), index.h("smoothly-checkbox", { disabled: true }), index.h("smoothly-address-display", { value: '{ "countryCode": "SE", "street": "Korkstigen 2", "zipCode": "654 31", "city": "Fejksala" }' }), index.h("smoothly-address", { editable: false, value: '{ "countryCode": "SE", "street": "Stigv\u00E4gen 34", "zipCode": "123 45", "city": "Hobbiton" }' }), index.h("smoothly-addresses", { allowed: "billing delivery visit", editable: true, value: '{ "billing": { "countryCode": "SE", "street": "Rundslingan 3", "zipCode": "987 65", "city": "Klotby" }, "visit": { "countryCode": "SE", "street": "G\u00E5ngbanan 34", "zipCode": "543 21", "city": "Trasktr\u00E4sk" } }' }), index.h("smoothly-input", { type: "postal-code", name: "zip", style: { width: "calc(60% - 2px)" } }, "ZipCode"), index.h("smoothly-input", { type: "text", name: "testing" }, "Texttest"), index.h("smoothly-input", { type: "password", name: "password" }, "Password"), index.h("smoothly-input", { type: "email", name: "email" }, "Email"), index.h("smoothly-input", { type: "price", currency: "SEK", name: "price" }, "Price"), index.h("smoothly-input", { type: "percent", name: "percent" }, "Percent"), index.h("smoothly-input", { type: "phone", name: "phone" }, "Phone"), index.h("smoothly-input-date", null, "Date")), index.h("footer", null, index.h("smoothly-submit", { expand: "block", onSubmit: (e) => alert(e), color: "success" }, "Submit"), index.h("smoothly-trigger", { expand: "block", color: "success", onClick: (e) => console.log(e.detail) }, "Trigger"))),
|
|
33598
|
+
index.h("form", { action: "done", style: { position: "relative" } }, index.h("header", null, index.h("h5", null, "Address")), index.h("main", null, index.h("smoothly-input", { type: "text", name: "name", readonly: true, value: "Readonly", onSmoothlyBlur: () => console.log("smoothly blur") }, "Readonly"), index.h("smoothly-input", { type: "text", name: "name.last", onSmoothlyChange: e => console.log("smoothly change event") }, "Name"), index.h("smoothly-input", { type: "text", name: "name.first", onSmoothlyChange: e => console.log("smoothly change event") }, "Name"), index.h("smoothly-input-date", null), index.h("smoothly-input", { type: "date", name: "date" }, "Date"), index.h("smoothly-input", { type: "date-time", name: "date-time" }, "Date-Time"), index.h("smoothly-input", { type: "divisor", name: "divisor" }, "Divisor"), index.h("smoothly-input", { type: "text", name: "street", value: "street" }, "Street"), index.h("smoothly-input", { type: "card-number", name: "card" }, "Card #"), index.h("smoothly-input", { type: "card-expires", name: "card", style: { width: "calc(60% - 2px)" } }, "Expires"), index.h("smoothly-input", { type: "card-csc", name: "card", style: { width: "calc(40% - 1px)", borderLeft: "none" } }, "CVV/CVC"), index.h("smoothly-radio-button", null, index.h("smoothly-radio-button-item", { value: { some: "content", yes: "sir" }, expansion: true }, index.h("span", null, "Option 1"), index.h("span", { slot: "expansion" }, "Some description.")), index.h("smoothly-radio-button-item", { value: { some: "thing", yes: "miss" }, expansion: true }, index.h("span", null, "Option 2"), index.h("span", { slot: "expansion" }, "Some other description.")), index.h("smoothly-radio-button-item", { value: { some: "one", yes: "kid" } }, index.h("span", null, "Option 3"))), index.h("smoothly-radio", { name: "option", value: "1" }, "option 1"), index.h("smoothly-radio", { name: "option", value: "2", checked: true }, "option 2"), index.h("smoothly-radio", { name: "option", value: "3" }, "option 3"), index.h("smoothly-accordion", null, index.h("smoothly-accordion-item", { name: "A", open: true }, index.h("smoothly-radio", { name: "a", value: "1" }, "a 1"), index.h("smoothly-radio", { name: "a", value: "2", checked: true }, "a 2"), index.h("smoothly-radio", { name: "a", value: "3" }, "a 3")), index.h("smoothly-accordion-item", { name: "B" }, index.h("smoothly-radio", { name: "b", value: "1" }, "b 1"), index.h("smoothly-radio", { name: "b", value: "2" }, "b 2"), index.h("smoothly-radio", { name: "b", value: "3" }, "b 3"))), index.h("smoothly-display-amount", { currency: "SEK", amount: "1289.5" }), index.h("smoothly-display-date-time", { datetime: "2019-01-31T20:01:34" }), index.h("smoothly-checkbox", { selectAll: true, intermediate: true }), index.h("smoothly-checkbox", null), index.h("smoothly-checkbox", { disabled: true }), index.h("smoothly-address-display", { value: '{ "countryCode": "SE", "street": "Korkstigen 2", "zipCode": "654 31", "city": "Fejksala" }' }), index.h("smoothly-address", { editable: false, value: '{ "countryCode": "SE", "street": "Stigv\u00E4gen 34", "zipCode": "123 45", "city": "Hobbiton" }' }), index.h("smoothly-addresses", { allowed: "billing delivery visit", editable: true, value: '{ "billing": { "countryCode": "SE", "street": "Rundslingan 3", "zipCode": "987 65", "city": "Klotby" }, "visit": { "countryCode": "SE", "street": "G\u00E5ngbanan 34", "zipCode": "543 21", "city": "Trasktr\u00E4sk" } }' }), index.h("smoothly-input", { type: "postal-code", name: "zip", style: { width: "calc(60% - 2px)" } }, "ZipCode"), index.h("smoothly-input", { type: "text", name: "testing" }, "Texttest"), index.h("smoothly-input", { type: "password", name: "password" }, "Password"), index.h("smoothly-input", { type: "email", name: "email" }, "Email"), index.h("smoothly-input", { type: "price", currency: "SEK", name: "price" }, "Price"), index.h("smoothly-input", { type: "percent", name: "percent" }, "Percent"), index.h("smoothly-input", { type: "phone", name: "phone" }, "Phone"), index.h("smoothly-input-date", null, "Date")), index.h("footer", null, index.h("smoothly-submit", { expand: "block", onSubmit: (e) => alert(e), color: "success" }, "Submit"), index.h("smoothly-trigger", { expand: "block", color: "success", onClick: (e) => console.log(e.detail) }, "Trigger"))),
|
|
33598
33599
|
index.h("smoothly-backtotop", null),
|
|
33599
33600
|
];
|
|
33600
33601
|
}
|
|
33601
33602
|
};
|
|
33602
33603
|
|
|
33603
|
-
const styleCss$
|
|
33604
|
+
const styleCss$r = ".sc-smoothly-input-month-h{display:flex;justify-content:space-between;font-size:large}smoothly-icon.sc-smoothly-input-month{font-size:smaller}";
|
|
33604
33605
|
|
|
33605
33606
|
const MonthSelector = class {
|
|
33606
33607
|
constructor(hostRef) {
|
|
@@ -33629,9 +33630,9 @@ const MonthSelector = class {
|
|
|
33629
33630
|
"value": ["onValueChanged"]
|
|
33630
33631
|
}; }
|
|
33631
33632
|
};
|
|
33632
|
-
MonthSelector.style = styleCss$
|
|
33633
|
+
MonthSelector.style = styleCss$r;
|
|
33633
33634
|
|
|
33634
|
-
const styleCss$
|
|
33635
|
+
const styleCss$q = "[selected].sc-smoothly-item-h{background-color:rgb(var(--smoothly-primary-shade));color:rgb(var(--smoothly-primary-contrast))}.sc-smoothly-item-h{padding:0.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))}";
|
|
33635
33636
|
|
|
33636
33637
|
const Item = class {
|
|
33637
33638
|
constructor(hostRef) {
|
|
@@ -33665,9 +33666,9 @@ const Item = class {
|
|
|
33665
33666
|
"selected": ["onSelectedChanged"]
|
|
33666
33667
|
}; }
|
|
33667
33668
|
};
|
|
33668
|
-
Item.style = styleCss$
|
|
33669
|
+
Item.style = styleCss$q;
|
|
33669
33670
|
|
|
33670
|
-
const styleCss$
|
|
33671
|
+
const styleCss$p = ":host{max-height:18.75rem;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 1.5rem 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}";
|
|
33671
33672
|
|
|
33672
33673
|
const SmoothlyMenuOptions = class {
|
|
33673
33674
|
constructor(hostRef) {
|
|
@@ -33776,9 +33777,9 @@ const SmoothlyMenuOptions = class {
|
|
|
33776
33777
|
"options": ["optionsChangeHandler"]
|
|
33777
33778
|
}; }
|
|
33778
33779
|
};
|
|
33779
|
-
SmoothlyMenuOptions.style = styleCss$
|
|
33780
|
+
SmoothlyMenuOptions.style = styleCss$p;
|
|
33780
33781
|
|
|
33781
|
-
const styleCss$
|
|
33782
|
+
const styleCss$o = ".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}";
|
|
33782
33783
|
|
|
33783
33784
|
const Notification = class {
|
|
33784
33785
|
constructor(hostRef) {
|
|
@@ -33836,9 +33837,9 @@ const Notification = class {
|
|
|
33836
33837
|
"notice": ["onUpdatedNotice"]
|
|
33837
33838
|
}; }
|
|
33838
33839
|
};
|
|
33839
|
-
Notification.style = styleCss$
|
|
33840
|
+
Notification.style = styleCss$o;
|
|
33840
33841
|
|
|
33841
|
-
const styleCss$
|
|
33842
|
+
const styleCss$n = ".sc-smoothly-notifier-h{display:block}[hidden].sc-smoothly-notifier-h{display:none}.sc-smoothly-notifier-h>aside.sc-smoothly-notifier{display:flex;flex-wrap:wrap-reverse;align-content:stretch;justify-content:flex-start;position:fixed;bottom:3em;left:0;text-align:center;width:100%;z-index:100}";
|
|
33842
33843
|
|
|
33843
33844
|
const Notifier = class {
|
|
33844
33845
|
constructor(hostRef) {
|
|
@@ -33858,9 +33859,9 @@ const Notifier = class {
|
|
|
33858
33859
|
];
|
|
33859
33860
|
}
|
|
33860
33861
|
};
|
|
33861
|
-
Notifier.style = styleCss$
|
|
33862
|
+
Notifier.style = styleCss$n;
|
|
33862
33863
|
|
|
33863
|
-
const styleCss$
|
|
33864
|
+
const styleCss$m = ":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.name{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))}::slotted([slot=hint]){display:flex;align-items:center;gap:1ch;font-style:italic;white-space:nowrap}";
|
|
33864
33865
|
|
|
33865
33866
|
const SmoothlyOption = class {
|
|
33866
33867
|
constructor(hostRef) {
|
|
@@ -33894,9 +33895,9 @@ const SmoothlyOption = class {
|
|
|
33894
33895
|
}
|
|
33895
33896
|
get element() { return index.getElement(this); }
|
|
33896
33897
|
};
|
|
33897
|
-
SmoothlyOption.style = styleCss$
|
|
33898
|
+
SmoothlyOption.style = styleCss$m;
|
|
33898
33899
|
|
|
33899
|
-
const styleCss$
|
|
33900
|
+
const styleCss$l = ":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:2.5rem;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:2.5rem;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.6rem;font-family:var(--smoothly-font-family);font-size:1.05rem}: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.1rem;padding-bottom:0.1rem}label{padding-left:0.6rem;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:1rem;height:1rem}: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.8rem}smoothly-icon.up,smoothly-icon.down{display:flex;align-self:center;padding-right:0.8rem;stroke:rgb(var(--smoothly-primary-shade))}:host smoothly-menu-options{margin-top:0.5rem;padding-top:0.5rem;padding-bottom:0.5rem;position:absolute;z-index:1}:host(:not([is-open]))>smoothly-menu-options{display:none}";
|
|
33900
33901
|
|
|
33901
33902
|
const SmoothlyPicker = class {
|
|
33902
33903
|
constructor(hostRef) {
|
|
@@ -34074,9 +34075,9 @@ const SmoothlyPicker = class {
|
|
|
34074
34075
|
"isOpen": ["isOpenChangeHandler"]
|
|
34075
34076
|
}; }
|
|
34076
34077
|
};
|
|
34077
|
-
SmoothlyPicker.style = styleCss$
|
|
34078
|
+
SmoothlyPicker.style = styleCss$l;
|
|
34078
34079
|
|
|
34079
|
-
const styleCss$
|
|
34080
|
+
const styleCss$k = ".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}";
|
|
34080
34081
|
|
|
34081
34082
|
const SmoothlyPopup = class {
|
|
34082
34083
|
constructor(hostRef) {
|
|
@@ -34105,9 +34106,9 @@ const SmoothlyPopup = class {
|
|
|
34105
34106
|
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" }))));
|
|
34106
34107
|
}
|
|
34107
34108
|
};
|
|
34108
|
-
SmoothlyPopup.style = styleCss$
|
|
34109
|
+
SmoothlyPopup.style = styleCss$k;
|
|
34109
34110
|
|
|
34110
|
-
const styleCss$
|
|
34111
|
+
const styleCss$j = ".sc-smoothly-quiet-h{opacity:0.5}";
|
|
34111
34112
|
|
|
34112
34113
|
const SmoothlyQuiet = class {
|
|
34113
34114
|
constructor(hostRef) {
|
|
@@ -34117,9 +34118,9 @@ const SmoothlyQuiet = class {
|
|
|
34117
34118
|
return (index.h(index.Host, { color: this.color }, index.h("slot", null)));
|
|
34118
34119
|
}
|
|
34119
34120
|
};
|
|
34120
|
-
SmoothlyQuiet.style = styleCss$
|
|
34121
|
+
SmoothlyQuiet.style = styleCss$j;
|
|
34121
34122
|
|
|
34122
|
-
const styleCss$
|
|
34123
|
+
const styleCss$i = ".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))}";
|
|
34123
34124
|
|
|
34124
34125
|
const SmoothlyRadio = class {
|
|
34125
34126
|
constructor(hostRef) {
|
|
@@ -34138,7 +34139,50 @@ const SmoothlyRadio = class {
|
|
|
34138
34139
|
];
|
|
34139
34140
|
}
|
|
34140
34141
|
};
|
|
34141
|
-
SmoothlyRadio.style = styleCss$
|
|
34142
|
+
SmoothlyRadio.style = styleCss$i;
|
|
34143
|
+
|
|
34144
|
+
const styleCss$h = ".sc-smoothly-radio-button-h{display:block}";
|
|
34145
|
+
|
|
34146
|
+
const SmoothlyRadioButton = class {
|
|
34147
|
+
constructor(hostRef) {
|
|
34148
|
+
index.registerInstance(this, hostRef);
|
|
34149
|
+
}
|
|
34150
|
+
radioSelectHandler(event) {
|
|
34151
|
+
var _a;
|
|
34152
|
+
(_a = this.active) === null || _a === void 0 ? void 0 : _a.select(false);
|
|
34153
|
+
this.active = event.detail;
|
|
34154
|
+
this.value = this.active.selected ? event.detail.value : undefined;
|
|
34155
|
+
this.active.select(this.active.selected);
|
|
34156
|
+
}
|
|
34157
|
+
render() {
|
|
34158
|
+
return (index.h(index.Host, null, index.h("slot", null)));
|
|
34159
|
+
}
|
|
34160
|
+
};
|
|
34161
|
+
SmoothlyRadioButton.style = styleCss$h;
|
|
34162
|
+
|
|
34163
|
+
const styleCss$g = ".sc-smoothly-radio-button-item-h{display:block;margin-bottom:0.5rem}.sc-smoothly-radio-button-item-h:last-child{margin-bottom:0}.sc-smoothly-radio-button-item-h>header.sc-smoothly-radio-button-item{display:flex;align-items:center}.sc-smoothly-radio-button-item-h>header.sc-smoothly-radio-button-item>smoothly-icon.sc-smoothly-radio-button-item{margin-right:0.5rem;border-radius:100%;font-size:1.3rem;display:flex;background:rgb(var(--smoothly-light-color));transition:0.2s}[selected].sc-smoothly-radio-button-item-h>header.sc-smoothly-radio-button-item>smoothly-icon.sc-smoothly-radio-button-item{color:rgb(var(--smoothly-success-color));background:rgb(var(--smoothly-success-shade))}.sc-smoothly-radio-button-item-h>aside.sc-smoothly-radio-button-item{display:none;background:rgb(var(--smoothly-light-color));color:rgb(var(--smoothly-light-contrast));padding:0;border-radius:5px;margin-top:0.5rem;position:relative;transition:0.1s}.sc-smoothly-radio-button-item-h>aside.sc-smoothly-radio-button-item::before{content:\"\\25B2\";position:absolute;top:-0.8rem;left:3rem;color:rgb(var(--smoothly-light-color))}[selected].sc-smoothly-radio-button-item-h>aside.sc-smoothly-radio-button-item{display:block;padding:0.5rem}.sc-smoothly-radio-button-item-h>aside.hide.sc-smoothly-radio-button-item{display:none}@media screen and (min-width: 900px){.sc-smoothly-radio-button-item-h>header.sc-smoothly-radio-button-item:hover>smoothly-icon.sc-smoothly-radio-button-item{background:rgb(var(--smoothly-success-color));cursor:pointer}[selected].sc-smoothly-radio-button-item-h>header.sc-smoothly-radio-button-item:hover>smoothly-icon.sc-smoothly-radio-button-item{background:rgb(var(--smoothly-warning-shade));color:rgb(var(--smoothly-warning-color));cursor:pointer}}";
|
|
34164
|
+
|
|
34165
|
+
const SmoothlyRadioButtonItem = class {
|
|
34166
|
+
constructor(hostRef) {
|
|
34167
|
+
index.registerInstance(this, hostRef);
|
|
34168
|
+
this.radioSelect = index.createEvent(this, "radioSelect", 7);
|
|
34169
|
+
this.expansion = false;
|
|
34170
|
+
}
|
|
34171
|
+
componentWillLoad() {
|
|
34172
|
+
this.select(this.selected);
|
|
34173
|
+
}
|
|
34174
|
+
select(selected = false) {
|
|
34175
|
+
this.radioSelect.emit({
|
|
34176
|
+
value: this.value,
|
|
34177
|
+
selected,
|
|
34178
|
+
select: s => (this.selected = s),
|
|
34179
|
+
});
|
|
34180
|
+
}
|
|
34181
|
+
render() {
|
|
34182
|
+
return (index.h(index.Host, null, index.h("header", { onClick: () => this.select(!this.selected) }, index.h("smoothly-icon", { color: this.selected ? "success" : "medium", fill: "solid", name: this.selected ? "checkmark-circle" : "ellipse-outline", size: "tiny", toolTip: "Select" }), index.h("slot", null)), index.h("aside", { class: this.expansion ? "" : "hide" }, index.h("slot", { name: "expansion" }))));
|
|
34183
|
+
}
|
|
34184
|
+
};
|
|
34185
|
+
SmoothlyRadioButtonItem.style = styleCss$g;
|
|
34142
34186
|
|
|
34143
34187
|
const SmoothlyRoom = class {
|
|
34144
34188
|
constructor(hostRef) {
|
|
@@ -34764,6 +34808,8 @@ exports.smoothly_picker = SmoothlyPicker;
|
|
|
34764
34808
|
exports.smoothly_popup = SmoothlyPopup;
|
|
34765
34809
|
exports.smoothly_quiet = SmoothlyQuiet;
|
|
34766
34810
|
exports.smoothly_radio = SmoothlyRadio;
|
|
34811
|
+
exports.smoothly_radio_button = SmoothlyRadioButton;
|
|
34812
|
+
exports.smoothly_radio_button_item = SmoothlyRadioButtonItem;
|
|
34767
34813
|
exports.smoothly_room = SmoothlyRoom;
|
|
34768
34814
|
exports.smoothly_select = SmoothlySelect;
|
|
34769
34815
|
exports.smoothly_select_demo = SmoothlySelectDemo;
|