@justeattakeaway/pie-switch 0.17.0 → 0.17.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/README.md +16 -2
- package/dist/index.js +74 -160
- package/dist/react.js +6 -5
- package/package.json +4 -2
package/README.md
CHANGED
|
@@ -42,14 +42,28 @@ For full information on using PIE components as part of an application, check ou
|
|
|
42
42
|
|
|
43
43
|
### Importing the component
|
|
44
44
|
|
|
45
|
+
#### JavaScript
|
|
45
46
|
```js
|
|
46
|
-
//
|
|
47
|
+
// Default – for Native JS Applications, Vue, Angular, Svelte, etc.
|
|
47
48
|
import { PieSwitch } from '@justeattakeaway/pie-switch';
|
|
48
49
|
|
|
49
|
-
//
|
|
50
|
+
// If you don't need to reference the imported object, you can simply
|
|
51
|
+
// import the module which registers the component as a custom element.
|
|
52
|
+
import '@justeattakeaway/pie-switch';
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
#### React
|
|
56
|
+
```js
|
|
57
|
+
// React
|
|
58
|
+
// For React, you will need to import our React-specific component build
|
|
59
|
+
// which wraps the web component using @lit-labs/react
|
|
50
60
|
import { PieSwitch } from '@justeattakeaway/pie-switch/dist/react';
|
|
51
61
|
```
|
|
52
62
|
|
|
63
|
+
> [!NOTE]
|
|
64
|
+
> When using the React version of the component, please make sure to also
|
|
65
|
+
> include React as a [peer dependency](#peer-dependencies) in your project.
|
|
66
|
+
|
|
53
67
|
|
|
54
68
|
## Peer Dependencies
|
|
55
69
|
|
package/dist/index.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import { isServer as
|
|
2
|
-
import { property as
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
import { isServer as u, unsafeCSS as v, html as d, nothing as a, LitElement as f } from "lit";
|
|
2
|
+
import { property as l } from "lit/decorators.js";
|
|
3
|
+
import "@justeattakeaway/pie-icons-webc/IconCheck";
|
|
4
|
+
const g = (r) => {
|
|
5
|
+
class c extends r {
|
|
5
6
|
/**
|
|
6
7
|
* A getter to determine whether the text direction is right-to-left (RTL).
|
|
7
8
|
* If the `dir` property is present on the component, it will be used to determine the text direction.
|
|
@@ -12,140 +13,53 @@ const _ = (c) => {
|
|
|
12
13
|
* @returns {boolean} - Returns `true` if the text direction is RTL, otherwise `false`.
|
|
13
14
|
*/
|
|
14
15
|
get isRTL() {
|
|
15
|
-
return this.dir ? this.dir === "rtl" : !
|
|
16
|
+
return this.dir ? this.dir === "rtl" : !u && !this.dir ? document.documentElement.getAttribute("dir") === "rtl" : !1;
|
|
16
17
|
}
|
|
17
18
|
}
|
|
18
|
-
return
|
|
19
|
-
},
|
|
20
|
-
const
|
|
21
|
-
Object.defineProperty(
|
|
19
|
+
return c;
|
|
20
|
+
}, m = (r, c, e) => function(t, s) {
|
|
21
|
+
const i = `#${s}`;
|
|
22
|
+
Object.defineProperty(t, s, {
|
|
22
23
|
get() {
|
|
23
|
-
return this[
|
|
24
|
+
return this[i];
|
|
24
25
|
},
|
|
25
|
-
set(
|
|
26
|
-
const
|
|
27
|
-
|
|
28
|
-
`<${
|
|
29
|
-
`Must be one of: ${
|
|
30
|
-
`Falling back to default value: "${
|
|
31
|
-
), this[
|
|
26
|
+
set(p) {
|
|
27
|
+
const b = this[i];
|
|
28
|
+
c.includes(p) ? this[i] = p : (console.error(
|
|
29
|
+
`<${r}> Invalid value "${p}" provided for property "${s}".`,
|
|
30
|
+
`Must be one of: ${c.join(" | ")}.`,
|
|
31
|
+
`Falling back to default value: "${e}"`
|
|
32
|
+
), this[i] = e), this.requestUpdate(s, b);
|
|
32
33
|
}
|
|
33
34
|
});
|
|
34
35
|
};
|
|
35
|
-
function
|
|
36
|
-
customElements.get(
|
|
36
|
+
function k(r, c) {
|
|
37
|
+
customElements.get(r) ? console.warn(`PIE Web Component: "${r}" has already been defined. Please ensure the component is only being defined once in your application.`) : customElements.define(r, c);
|
|
37
38
|
}
|
|
38
|
-
const
|
|
39
|
-
`,
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
xs: 16,
|
|
45
|
-
s: 20,
|
|
46
|
-
m: 24,
|
|
47
|
-
l: 28,
|
|
48
|
-
xl: 32,
|
|
49
|
-
xxl: 40
|
|
50
|
-
}, m = Object.keys(b), k = "xs", y = 8, w = 32;
|
|
51
|
-
function R(c, e, t) {
|
|
52
|
-
const r = parseInt(c, 10), i = r % t === 0;
|
|
53
|
-
return r >= e && i;
|
|
54
|
-
}
|
|
55
|
-
const x = {
|
|
56
|
-
large: (c) => R(c, w, y),
|
|
57
|
-
regular: (c) => m.includes(c)
|
|
58
|
-
};
|
|
59
|
-
function A(c) {
|
|
60
|
-
const e = x.large(c);
|
|
61
|
-
return { isValid: e, size: e ? c : w };
|
|
62
|
-
}
|
|
63
|
-
function B(c) {
|
|
64
|
-
const e = x.regular(c), t = e ? b[c] : b[k];
|
|
65
|
-
return { isValid: e, size: t };
|
|
66
|
-
}
|
|
67
|
-
const g = (c, e, t, r) => {
|
|
68
|
-
const i = c.endsWith("Large") || c.endsWith("-large");
|
|
69
|
-
let s, o;
|
|
70
|
-
if (t) {
|
|
71
|
-
if ({ isValid: s, size: o } = i ? A(t) : B(t), !s) {
|
|
72
|
-
const h = i ? `Invalid prop "size" value supplied to "${r}". The prop value should be a number equal or greater than ${w} and multiple of ${y}.` : `Invalid prop "size" value supplied to "${r}". The prop value should be one of the following values: ${m.join(", ")}.`;
|
|
73
|
-
console.error(h);
|
|
74
|
-
}
|
|
75
|
-
} else
|
|
76
|
-
o = i ? w : b[k];
|
|
77
|
-
return {
|
|
78
|
-
class: [c, e].filter(Boolean).join(" "),
|
|
79
|
-
width: o,
|
|
80
|
-
height: o
|
|
81
|
-
};
|
|
82
|
-
};
|
|
83
|
-
var V = Object.defineProperty, W = Object.getOwnPropertyDescriptor, v = (c, e, t, r) => {
|
|
84
|
-
for (var i = r > 1 ? void 0 : r ? W(e, t) : e, s = c.length - 1, o; s >= 0; s--)
|
|
85
|
-
(o = c[s]) && (i = (r ? o(e, t, i) : o(i)) || i);
|
|
86
|
-
return r && i && V(e, t, i), i;
|
|
87
|
-
};
|
|
88
|
-
const q = "icon-check";
|
|
89
|
-
class p extends f {
|
|
90
|
-
constructor() {
|
|
91
|
-
super(...arguments), this.size = "xs", this.class = "c-pieIcon c-pieIcon--check";
|
|
92
|
-
}
|
|
93
|
-
connectedCallback() {
|
|
94
|
-
var e, t, r;
|
|
95
|
-
if (super.connectedCallback(), ((e = this._svg) == null ? void 0 : e.getAttribute("width")) === null) {
|
|
96
|
-
const i = g("c-pieIcon c-pieIcon--check", "", null, "IconCheck");
|
|
97
|
-
(t = this._svg) == null || t.setAttribute("width", i.width), (r = this._svg) == null || r.setAttribute("height", i.height);
|
|
98
|
-
}
|
|
99
|
-
}
|
|
100
|
-
updated(e) {
|
|
101
|
-
var t, r;
|
|
102
|
-
let i;
|
|
103
|
-
e.has("size") && (i = g("c-pieIcon c-pieIcon--check", "", this.size, "IconCheck"), (t = this._svg) == null || t.setAttribute("width", i.width), (r = this._svg) == null || r.setAttribute("height", i.height));
|
|
104
|
-
}
|
|
105
|
-
render() {
|
|
106
|
-
return d`<svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--check"><path d="M5.865 12.489a1.217 1.217 0 0 1-.875-.385L1.875 8.656l.98-.875 3.028 3.369 7.253-7.822.963.875-7.35 7.875a1.216 1.216 0 0 1-.875.385l-.009.026Z"></path></svg>`;
|
|
107
|
-
}
|
|
108
|
-
}
|
|
109
|
-
p.styles = I`
|
|
110
|
-
:host-context(pie-icon-button) svg,
|
|
111
|
-
:host-context(pie-button) svg {
|
|
112
|
-
display: block;
|
|
113
|
-
width: var(--btn-icon-size);
|
|
114
|
-
height: var(--btn-icon-size);
|
|
115
|
-
}
|
|
116
|
-
`;
|
|
117
|
-
v([
|
|
118
|
-
n({ type: String, reflect: !0 })
|
|
119
|
-
], p.prototype, "size", 2);
|
|
120
|
-
v([
|
|
121
|
-
n({ type: String, reflect: !0 })
|
|
122
|
-
], p.prototype, "class", 2);
|
|
123
|
-
v([
|
|
124
|
-
E("svg")
|
|
125
|
-
], p.prototype, "_svg", 2);
|
|
126
|
-
D(q, p);
|
|
127
|
-
var M = Object.defineProperty, N = Object.getOwnPropertyDescriptor, u = (c, e, t, r) => {
|
|
128
|
-
for (var i = r > 1 ? void 0 : r ? N(e, t) : e, s = c.length - 1, o; s >= 0; s--)
|
|
129
|
-
(o = c[s]) && (i = (r ? o(e, t, i) : o(i)) || i);
|
|
130
|
-
return r && i && M(e, t, i), i;
|
|
39
|
+
const y = `*,*:before,*:after{box-sizing:border-box;cursor:inherit}.c-switch-wrapper{display:inline-flex;align-items:center;gap:var(--dt-spacing-b);font-family:var(--dt-font-body-l-family);cursor:pointer}.c-switch-wrapper[isDisabled]{cursor:not-allowed}.c-switch{--switch-bg-color: var(--dt-color-interactive-form);--switch-bg-color--checked: var(--dt-color-interactive-brand);--switch-bg-color--disabled: var(--dt-color-disabled-01);--switch-width: 48px;--switch-height: 24px;--switch-control-size: 20px;--switch-padding: 2px;--switch-radius: var(--dt-radius-rounded-e);--switch-translation: calc(var(--switch-width) - var(--switch-control-size) - 2 * var(--switch-padding));position:relative;display:flex;width:var(--switch-width);height:var(--switch-height);flex-shrink:0;padding:var(--switch-padding);border-radius:var(--switch-radius);background-color:var(--switch-bg-color)}@media (prefers-reduced-motion: no-preference){.c-switch{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch:hover{background-color:hsl(var(--dt-color-interactive-form-h),var(--dt-color-interactive-form-s),calc(var(--dt-color-interactive-form-l) - var(--dt-color-hover-01)))}.c-switch:focus,.c-switch:focus-within{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-switch:active{background-color:hsl(var(--dt-color-interactive-form-h),var(--dt-color-interactive-form-s),calc(var(--dt-color-interactive-form-l) - var(--dt-color-active-01)))}.c-switch[isChecked]{background-color:var(--switch-bg-color--checked)}@media (prefers-reduced-motion: no-preference){.c-switch[isChecked]{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch[isChecked]:hover{background-color:hsl(var(--dt-color-interactive-brand-h),var(--dt-color-interactive-brand-s),calc(var(--dt-color-interactive-brand-l) - var(--dt-color-hover-01)))}.c-switch[isChecked]:focus,.c-switch[isChecked]:focus-within{background-color:var(--switch-bg-color--checked)}.c-switch[isChecked]:active{background-color:hsl(var(--dt-color-interactive-brand-h),var(--dt-color-interactive-brand-s),calc(var(--dt-color-interactive-brand-l) - var(--dt-color-active-01)))}[isDisabled] .c-switch{background-color:var(--switch-bg-color--disabled);pointer-events:none}.c-switch-input{appearance:none;margin:0}.c-switch-input:disabled{background-color:transparent}.c-switch-control{position:absolute;left:2px;width:var(--switch-control-size);height:var(--switch-control-size);border-radius:var(--switch-radius);background-color:var(--dt-color-interactive-light);padding:var(--switch-padding)}@media (prefers-reduced-motion: no-preference){.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-input:checked+.c-switch-control{transform:translate(var(--switch-translation))}@media (prefers-reduced-motion: no-preference){.c-switch-input:checked+.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-input:checked+.c-switch-control .c-pieIcon--check{color:var(--switch-bg-color--checked)}@media (prefers-reduced-motion: no-preference){.c-switch-input:checked+.c-switch-control .c-pieIcon--check{transition:color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-input:disabled~.c-switch-control{color:var(--switch-bg-color--disabled)}.c-switch-input:disabled~.c-switch-control .c-pieIcon--check{color:var(--switch-bg-color--disabled)}@media (prefers-reduced-motion: no-preference){.c-switch-input:disabled~.c-switch-control .c-pieIcon--check{transition:color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-description{position:absolute;display:block;height:1px;width:1px;overflow:hidden;padding:1px;white-space:nowrap}.c-switch-wrapper[isRTL] .c-switch-control{position:absolute;left:initial;right:2px}.c-switch-wrapper[isRTL] .c-switch-input:checked+.c-switch-control{transform:translate(calc(-1 * var(--switch-translation)))}@media (prefers-reduced-motion: no-preference){.c-switch-wrapper[isRTL] .c-switch-input:checked+.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}
|
|
40
|
+
`, $ = ["leading", "trailing"], x = "pie-switch-changed";
|
|
41
|
+
var C = Object.defineProperty, P = Object.getOwnPropertyDescriptor, h = (r, c, e, o) => {
|
|
42
|
+
for (var t = o > 1 ? void 0 : o ? P(c, e) : c, s = r.length - 1, i; s >= 0; s--)
|
|
43
|
+
(i = r[s]) && (t = (o ? i(c, e, t) : i(t)) || t);
|
|
44
|
+
return o && t && C(c, e, t), t;
|
|
131
45
|
};
|
|
132
|
-
const
|
|
133
|
-
class
|
|
46
|
+
const w = "pie-switch";
|
|
47
|
+
class n extends g(f) {
|
|
134
48
|
constructor() {
|
|
135
49
|
super(...arguments), this.labelPlacement = "leading", this.isChecked = !1, this.isDisabled = !1;
|
|
136
50
|
}
|
|
137
|
-
onChange(
|
|
138
|
-
const { checked:
|
|
139
|
-
this.isChecked =
|
|
140
|
-
const
|
|
141
|
-
|
|
51
|
+
onChange(c) {
|
|
52
|
+
const { checked: e } = c == null ? void 0 : c.currentTarget;
|
|
53
|
+
this.isChecked = e;
|
|
54
|
+
const o = new CustomEvent(
|
|
55
|
+
x,
|
|
142
56
|
{
|
|
143
57
|
bubbles: !0,
|
|
144
58
|
composed: !0,
|
|
145
59
|
detail: this.isChecked
|
|
146
60
|
}
|
|
147
61
|
);
|
|
148
|
-
this.dispatchEvent(
|
|
62
|
+
this.dispatchEvent(o);
|
|
149
63
|
}
|
|
150
64
|
/**
|
|
151
65
|
* Renders the label for a switch if provided.
|
|
@@ -154,73 +68,73 @@ class a extends _(f) {
|
|
|
154
68
|
* @private
|
|
155
69
|
*/
|
|
156
70
|
renderSwitchLabel() {
|
|
157
|
-
const { label:
|
|
158
|
-
return
|
|
71
|
+
const { label: c, labelPlacement: e } = this;
|
|
72
|
+
return c ? d`
|
|
159
73
|
<label
|
|
160
74
|
for="switch"
|
|
161
|
-
data-test-id="switch-label-${
|
|
162
|
-
${
|
|
75
|
+
data-test-id="switch-label-${e}">
|
|
76
|
+
${c}
|
|
163
77
|
</label>` : d``;
|
|
164
78
|
}
|
|
165
79
|
render() {
|
|
166
80
|
const {
|
|
167
|
-
labelPlacement:
|
|
168
|
-
aria:
|
|
169
|
-
isChecked:
|
|
170
|
-
isDisabled:
|
|
81
|
+
labelPlacement: c,
|
|
82
|
+
aria: e,
|
|
83
|
+
isChecked: o,
|
|
84
|
+
isDisabled: t,
|
|
171
85
|
isRTL: s
|
|
172
|
-
} = this,
|
|
86
|
+
} = this, i = "switch-description";
|
|
173
87
|
return d`
|
|
174
88
|
<div
|
|
175
89
|
class="c-switch-wrapper"
|
|
176
90
|
?isRTL=${s}
|
|
177
|
-
?isDisabled=${
|
|
178
|
-
${
|
|
91
|
+
?isDisabled=${t}>
|
|
92
|
+
${c === "leading" ? this.renderSwitchLabel() : a}
|
|
179
93
|
<label
|
|
180
94
|
data-test-id="switch-component"
|
|
181
95
|
class="c-switch"
|
|
182
|
-
?isChecked=${
|
|
96
|
+
?isChecked=${o}>
|
|
183
97
|
<input
|
|
184
98
|
id="switch"
|
|
185
99
|
data-test-id="switch-input"
|
|
186
100
|
role="switch"
|
|
187
101
|
type="checkbox"
|
|
188
102
|
class="c-switch-input"
|
|
189
|
-
.checked="${
|
|
190
|
-
.disabled="${
|
|
103
|
+
.checked="${o}"
|
|
104
|
+
.disabled="${t}"
|
|
191
105
|
@change="${this.onChange}"
|
|
192
|
-
aria-label="${(
|
|
193
|
-
aria-describedby="${
|
|
106
|
+
aria-label="${(e == null ? void 0 : e.label) || a}"
|
|
107
|
+
aria-describedby="${e != null && e.describedBy ? i : a}">
|
|
194
108
|
<div class="c-switch-control">
|
|
195
|
-
${
|
|
109
|
+
${o ? d`<icon-check></icon-check>` : a}
|
|
196
110
|
</div>
|
|
197
111
|
</label>
|
|
198
|
-
${
|
|
199
|
-
${
|
|
112
|
+
${e != null && e.describedBy ? d`<div id="${i}" data-test-id="${i}" class="c-switch-description">${e == null ? void 0 : e.describedBy}</div>` : a}
|
|
113
|
+
${c === "trailing" ? this.renderSwitchLabel() : a}
|
|
200
114
|
</div>
|
|
201
115
|
`;
|
|
202
116
|
}
|
|
203
117
|
}
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
],
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
],
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
],
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
],
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
],
|
|
221
|
-
|
|
118
|
+
n.styles = v(y);
|
|
119
|
+
h([
|
|
120
|
+
l({ type: String })
|
|
121
|
+
], n.prototype, "label", 2);
|
|
122
|
+
h([
|
|
123
|
+
l({ type: String }),
|
|
124
|
+
m(w, $, "leading")
|
|
125
|
+
], n.prototype, "labelPlacement", 2);
|
|
126
|
+
h([
|
|
127
|
+
l({ type: Object })
|
|
128
|
+
], n.prototype, "aria", 2);
|
|
129
|
+
h([
|
|
130
|
+
l({ type: Boolean, reflect: !0 })
|
|
131
|
+
], n.prototype, "isChecked", 2);
|
|
132
|
+
h([
|
|
133
|
+
l({ type: Boolean, reflect: !0 })
|
|
134
|
+
], n.prototype, "isDisabled", 2);
|
|
135
|
+
k(w, n);
|
|
222
136
|
export {
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
137
|
+
x as ON_SWITCH_CHANGED_EVENT,
|
|
138
|
+
n as PieSwitch,
|
|
139
|
+
$ as labelPlacements
|
|
226
140
|
};
|
package/dist/react.js
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import * as E from "react";
|
|
2
2
|
import { PieSwitch as g } from "./index.js";
|
|
3
|
-
import { ON_SWITCH_CHANGED_EVENT as
|
|
3
|
+
import { ON_SWITCH_CHANGED_EVENT as L, labelPlacements as O } from "./index.js";
|
|
4
4
|
import "lit";
|
|
5
5
|
import "lit/decorators.js";
|
|
6
|
+
import "@justeattakeaway/pie-icons-webc/IconCheck";
|
|
6
7
|
/**
|
|
7
8
|
* @license
|
|
8
9
|
* Copyright 2018 Google LLC
|
|
@@ -58,7 +59,7 @@ function b(t = window.React, i, h, d, m) {
|
|
|
58
59
|
const N = o.forwardRef((c, e) => r(f, { ...c, _$Gl: e }, c == null ? void 0 : c.children));
|
|
59
60
|
return N.displayName = f.displayName, N;
|
|
60
61
|
}
|
|
61
|
-
const
|
|
62
|
+
const A = b({
|
|
62
63
|
displayName: "PieSwitch",
|
|
63
64
|
elementClass: g,
|
|
64
65
|
react: E,
|
|
@@ -69,7 +70,7 @@ const x = b({
|
|
|
69
70
|
}
|
|
70
71
|
});
|
|
71
72
|
export {
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
73
|
+
L as ON_SWITCH_CHANGED_EVENT,
|
|
74
|
+
A as PieSwitch,
|
|
75
|
+
O as labelPlacements
|
|
75
76
|
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-switch",
|
|
3
3
|
"description": "PIE Design System Switch built using Web Components",
|
|
4
|
-
"version": "0.17.
|
|
4
|
+
"version": "0.17.2",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"module": "dist/index.js",
|
|
@@ -28,7 +28,9 @@
|
|
|
28
28
|
"author": "Just Eat Takeaway.com - Design System Team",
|
|
29
29
|
"license": "Apache-2.0",
|
|
30
30
|
"devDependencies": {
|
|
31
|
-
"@justeattakeaway/pie-components-config": "0.
|
|
31
|
+
"@justeattakeaway/pie-components-config": "0.6.0"
|
|
32
|
+
},
|
|
33
|
+
"dependencies": {
|
|
32
34
|
"@justeattakeaway/pie-icons-webc": "0.11.1"
|
|
33
35
|
},
|
|
34
36
|
"volta": {
|