@justeattakeaway/pie-switch 0.20.0 → 0.22.0
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 +18 -4
- package/dist/index.d.ts +3 -3
- package/dist/index.js +17 -17
- package/dist/react.d.ts +3 -3
- package/package.json +2 -2
- package/src/defs.ts +2 -2
- package/src/index.ts +5 -5
- package/src/switch.scss +2 -2
package/README.md
CHANGED
|
@@ -10,13 +10,27 @@
|
|
|
10
10
|
|
|
11
11
|
## pie-switch
|
|
12
12
|
|
|
13
|
-
`pie-switch` is a Web Component built using the Lit library.
|
|
13
|
+
`pie-switch` is a Web Component built using the Lit library. It allows users to switch between two states or options with a single action.
|
|
14
14
|
|
|
15
|
-
|
|
15
|
+
## Installation
|
|
16
16
|
|
|
17
|
-
|
|
18
|
-
>For full information on using this component, please refer to our [documentation page](https://pie.design/components/switch/code/).
|
|
17
|
+
To install `pie-switch` in your application, run the following on your command line:
|
|
19
18
|
|
|
19
|
+
```bash
|
|
20
|
+
# npm
|
|
21
|
+
$ npm i @justeattakeaway/pie-switch
|
|
22
|
+
|
|
23
|
+
# yarn
|
|
24
|
+
$ yarn add @justeattakeaway/pie-switch
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
## Documentation
|
|
28
|
+
|
|
29
|
+
Visit [Modal | PIE Design System](https://pie.design/components/modal/overview) to view more information on this component.
|
|
30
|
+
|
|
31
|
+
## Questions
|
|
32
|
+
|
|
33
|
+
Please head to [FAQs | PIE Design System](https://pie.design/support/contact-us/) to see our FAQs and get in touch.
|
|
20
34
|
|
|
21
35
|
## Contributing
|
|
22
36
|
|
package/dist/index.d.ts
CHANGED
|
@@ -37,7 +37,7 @@ export declare class PieSwitch extends PieSwitch_base implements SwitchProps {
|
|
|
37
37
|
required: boolean;
|
|
38
38
|
value: string;
|
|
39
39
|
name?: string;
|
|
40
|
-
|
|
40
|
+
disabled: boolean;
|
|
41
41
|
static styles: CSSResult;
|
|
42
42
|
/**
|
|
43
43
|
* Ensures that the form value and validation state are in sync with the component.
|
|
@@ -104,9 +104,9 @@ export declare interface SwitchProps {
|
|
|
104
104
|
*/
|
|
105
105
|
required: boolean;
|
|
106
106
|
/**
|
|
107
|
-
* Same as the HTML disabled attribute - indicates whether the switch disabled or not
|
|
107
|
+
* Same as the HTML disabled attribute - indicates whether the switch is disabled or not
|
|
108
108
|
*/
|
|
109
|
-
|
|
109
|
+
disabled?: boolean;
|
|
110
110
|
/**
|
|
111
111
|
* The label value of the component
|
|
112
112
|
*/
|
package/dist/index.js
CHANGED
|
@@ -2,10 +2,10 @@ import { LitElement as vt, html as F, nothing as x, unsafeCSS as yt } from "lit"
|
|
|
2
2
|
import { query as Et, property as k } from "lit/decorators.js";
|
|
3
3
|
import { RtlMixin as kt, validPropertyValues as Mt, defineCustomElement as xt } from "@justeattakeaway/pie-webc-core";
|
|
4
4
|
import "@justeattakeaway/pie-icons-webc/IconCheck";
|
|
5
|
-
const At = `*,*: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[
|
|
5
|
+
const At = `*,*: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[disabled]{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[checked]{background-color:var(--switch-bg-color--checked)}@media (prefers-reduced-motion: no-preference){.c-switch[checked]{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch[checked]: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[checked]:focus,.c-switch[checked]:focus-within{background-color:var(--switch-bg-color--checked)}.c-switch[checked]: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)))}[disabled] .c-switch{background-color:var(--switch-bg-color--disabled);pointer-events:none}.c-switch-input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0;left:50%;transform:translate(-50%) translateY(-50%);bottom: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}}
|
|
6
6
|
`, Ft = ["leading", "trailing"], Ct = "change";
|
|
7
7
|
(function() {
|
|
8
|
-
const h = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), s = /* @__PURE__ */ new WeakMap(), l = /* @__PURE__ */ new WeakMap(), p = /* @__PURE__ */ new WeakMap(), E = /* @__PURE__ */ new WeakMap(), b = /* @__PURE__ */ new WeakMap(), m = /* @__PURE__ */ new WeakMap(),
|
|
8
|
+
const h = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), s = /* @__PURE__ */ new WeakMap(), l = /* @__PURE__ */ new WeakMap(), p = /* @__PURE__ */ new WeakMap(), E = /* @__PURE__ */ new WeakMap(), b = /* @__PURE__ */ new WeakMap(), m = /* @__PURE__ */ new WeakMap(), H = /* @__PURE__ */ new WeakMap(), C = /* @__PURE__ */ new WeakMap(), D = /* @__PURE__ */ new WeakMap(), W = /* @__PURE__ */ new WeakMap(), z = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), I = /* @__PURE__ */ new WeakMap(), V = {
|
|
9
9
|
ariaAtomic: "aria-atomic",
|
|
10
10
|
ariaAutoComplete: "aria-autocomplete",
|
|
11
11
|
ariaBusy: "aria-busy",
|
|
@@ -80,7 +80,7 @@ const At = `*,*:before,*:after{box-sizing:border-box;cursor:inherit}.c-switch-wr
|
|
|
80
80
|
for (const t of i) {
|
|
81
81
|
const e = t.target;
|
|
82
82
|
if (t.attributeName === "disabled" && (e.constructor.formAssociated ? $(e, e.hasAttribute("disabled")) : e.localName === "fieldset" && U(e)), t.attributeName === "name" && e.constructor.formAssociated) {
|
|
83
|
-
const a = l.get(e), r =
|
|
83
|
+
const a = l.get(e), r = H.get(e);
|
|
84
84
|
a.setFormValue(r);
|
|
85
85
|
}
|
|
86
86
|
}
|
|
@@ -102,8 +102,8 @@ const At = `*,*:before,*:after{box-sizing:border-box;cursor:inherit}.c-switch-wr
|
|
|
102
102
|
}
|
|
103
103
|
if (o.localName === "form") {
|
|
104
104
|
const d = m.get(o), v = document.createTreeWalker(o, NodeFilter.SHOW_ELEMENT, {
|
|
105
|
-
acceptNode(
|
|
106
|
-
return l.has(
|
|
105
|
+
acceptNode(O) {
|
|
106
|
+
return l.has(O) && O.constructor.formAssociated && !(d && d.has(O)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
|
|
107
107
|
}
|
|
108
108
|
});
|
|
109
109
|
let w = v.nextNode();
|
|
@@ -218,7 +218,7 @@ const At = `*,*:before,*:after{box-sizing:border-box;cursor:inherit}.c-switch-wr
|
|
|
218
218
|
for (let e in i)
|
|
219
219
|
e !== "valid" && i[e] !== !1 && (t = !1);
|
|
220
220
|
return t;
|
|
221
|
-
},
|
|
221
|
+
}, _ = /* @__PURE__ */ new WeakMap();
|
|
222
222
|
function Z(i, t) {
|
|
223
223
|
i.toggleAttribute(t, !0), i.part && i.part.add(t);
|
|
224
224
|
}
|
|
@@ -229,12 +229,12 @@ const At = `*,*:before,*:after{box-sizing:border-box;cursor:inherit}.c-switch-wr
|
|
|
229
229
|
constructor(t) {
|
|
230
230
|
if (super(), !t || !t.tagName || t.tagName.indexOf("-") === -1)
|
|
231
231
|
throw new TypeError("Illegal constructor");
|
|
232
|
-
|
|
232
|
+
_.set(this, t);
|
|
233
233
|
}
|
|
234
234
|
add(t) {
|
|
235
235
|
if (!/^--/.test(t) || typeof t != "string")
|
|
236
236
|
throw new DOMException(`Failed to execute 'add' on 'CustomStateSet': The specified value ${t} must start with '--'.`);
|
|
237
|
-
const e = super.add(t), a =
|
|
237
|
+
const e = super.add(t), a = _.get(this), r = `state${t}`;
|
|
238
238
|
return a.isConnected ? Z(a, r) : setTimeout(() => {
|
|
239
239
|
Z(a, r);
|
|
240
240
|
}), e;
|
|
@@ -245,7 +245,7 @@ const At = `*,*:before,*:after{box-sizing:border-box;cursor:inherit}.c-switch-wr
|
|
|
245
245
|
super.clear();
|
|
246
246
|
}
|
|
247
247
|
delete(t) {
|
|
248
|
-
const e = super.delete(t), a =
|
|
248
|
+
const e = super.delete(t), a = _.get(this);
|
|
249
249
|
return a.isConnected ? (a.toggleAttribute(`state${t}`, !1), a.part && a.part.remove(`state${t}`)) : setTimeout(() => {
|
|
250
250
|
a.toggleAttribute(`state${t}`, !1), a.part && a.part.remove(`state${t}`);
|
|
251
251
|
}), e;
|
|
@@ -374,7 +374,7 @@ const At = `*,*:before,*:after{box-sizing:border-box;cursor:inherit}.c-switch-wr
|
|
|
374
374
|
n.name = a, n.value = r;
|
|
375
375
|
}
|
|
376
376
|
});
|
|
377
|
-
|
|
377
|
+
H.set(e, t);
|
|
378
378
|
}
|
|
379
379
|
setValidity(t, e, a) {
|
|
380
380
|
const r = h.get(this);
|
|
@@ -393,7 +393,7 @@ const At = `*,*:before,*:after{box-sizing:border-box;cursor:inherit}.c-switch-wr
|
|
|
393
393
|
p.set(this, d ? "" : e), r.isConnected ? (r.toggleAttribute("internals-invalid", !d), r.toggleAttribute("internals-valid", d), r.setAttribute("aria-invalid", `${!d}`)) : I.set(r, this);
|
|
394
394
|
}
|
|
395
395
|
get shadowRoot() {
|
|
396
|
-
const t = h.get(this), e =
|
|
396
|
+
const t = h.get(this), e = D.get(t);
|
|
397
397
|
return e || null;
|
|
398
398
|
}
|
|
399
399
|
get validationMessage() {
|
|
@@ -467,7 +467,7 @@ const At = `*,*:before,*:after{box-sizing:border-box;cursor:inherit}.c-switch-wr
|
|
|
467
467
|
}), typeof Element < "u") {
|
|
468
468
|
let i = function(...e) {
|
|
469
469
|
const a = t.apply(this, e);
|
|
470
|
-
if (
|
|
470
|
+
if (D.set(this, a), L()) {
|
|
471
471
|
const r = new MutationObserver(R);
|
|
472
472
|
window.ShadyDOM ? r.observe(this, P) : r.observe(a, P), b.set(this, r);
|
|
473
473
|
}
|
|
@@ -487,7 +487,7 @@ var It = Object.defineProperty, Vt = Object.getOwnPropertyDescriptor, y = (h, c,
|
|
|
487
487
|
const it = "pie-switch";
|
|
488
488
|
class f extends kt(vt) {
|
|
489
489
|
constructor() {
|
|
490
|
-
super(), this.labelPlacement = "leading", this.checked = !1, this.required = !1, this.value = "on", this.
|
|
490
|
+
super(), this.labelPlacement = "leading", this.checked = !1, this.required = !1, this.value = "on", this.disabled = !1, this._internals = this.attachInternals();
|
|
491
491
|
}
|
|
492
492
|
firstUpdated(c) {
|
|
493
493
|
var s;
|
|
@@ -502,7 +502,7 @@ class f extends kt(vt) {
|
|
|
502
502
|
* Ensures that the form value and validation state are in sync with the component.
|
|
503
503
|
*/
|
|
504
504
|
handleFormAssociation() {
|
|
505
|
-
!!this._internals.form && !!this.name && !!this.value && (this.
|
|
505
|
+
!!this._internals.form && !!this.name && !!this.value && (this.disabled ? (this._internals.setFormValue(null), this._internals.setValidity({})) : this.checked ? (this._internals.setFormValue(this.value), this._internals.setValidity({})) : (this._internals.setFormValue(null), this._internals.setValidity(this.validity, this.validationMessage, this.input)));
|
|
506
506
|
}
|
|
507
507
|
/**
|
|
508
508
|
* The onChange function updates the checkbox state and emits an event for consumers.
|
|
@@ -580,14 +580,14 @@ class f extends kt(vt) {
|
|
|
580
580
|
aria: s,
|
|
581
581
|
checked: l,
|
|
582
582
|
required: p,
|
|
583
|
-
|
|
583
|
+
disabled: E,
|
|
584
584
|
isRTL: b
|
|
585
585
|
} = this, m = "switch-description";
|
|
586
586
|
return F`
|
|
587
587
|
<div
|
|
588
588
|
class="c-switch-wrapper"
|
|
589
589
|
?isRTL=${b}
|
|
590
|
-
?
|
|
590
|
+
?disabled=${E}>
|
|
591
591
|
${c === "leading" ? this.renderSwitchLabel() : x}
|
|
592
592
|
<label
|
|
593
593
|
data-test-id="switch-component"
|
|
@@ -644,7 +644,7 @@ y([
|
|
|
644
644
|
], f.prototype, "name", 2);
|
|
645
645
|
y([
|
|
646
646
|
k({ type: Boolean, reflect: !0 })
|
|
647
|
-
], f.prototype, "
|
|
647
|
+
], f.prototype, "disabled", 2);
|
|
648
648
|
xt(it, f);
|
|
649
649
|
export {
|
|
650
650
|
Ct as ON_SWITCH_CHANGED_EVENT,
|
package/dist/react.d.ts
CHANGED
|
@@ -44,7 +44,7 @@ declare class PieSwitch_2 extends PieSwitch_base implements SwitchProps {
|
|
|
44
44
|
required: boolean;
|
|
45
45
|
value: string;
|
|
46
46
|
name?: string;
|
|
47
|
-
|
|
47
|
+
disabled: boolean;
|
|
48
48
|
static styles: CSSResult;
|
|
49
49
|
/**
|
|
50
50
|
* Ensures that the form value and validation state are in sync with the component.
|
|
@@ -111,9 +111,9 @@ export declare interface SwitchProps {
|
|
|
111
111
|
*/
|
|
112
112
|
required: boolean;
|
|
113
113
|
/**
|
|
114
|
-
* Same as the HTML disabled attribute - indicates whether the switch disabled or not
|
|
114
|
+
* Same as the HTML disabled attribute - indicates whether the switch is disabled or not
|
|
115
115
|
*/
|
|
116
|
-
|
|
116
|
+
disabled?: boolean;
|
|
117
117
|
/**
|
|
118
118
|
* The label value of the component
|
|
119
119
|
*/
|
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.
|
|
4
|
+
"version": "0.22.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"module": "dist/index.js",
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
"@justeattakeaway/pie-components-config": "0.7.0"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@justeattakeaway/pie-icons-webc": "0.
|
|
34
|
+
"@justeattakeaway/pie-icons-webc": "0.16.0",
|
|
35
35
|
"@justeattakeaway/pie-webc-core": "0.13.0",
|
|
36
36
|
"element-internals-polyfill": "1.3.9"
|
|
37
37
|
},
|
package/src/defs.ts
CHANGED
|
@@ -21,9 +21,9 @@ export interface SwitchProps {
|
|
|
21
21
|
*/
|
|
22
22
|
required: boolean;
|
|
23
23
|
/**
|
|
24
|
-
* Same as the HTML disabled attribute - indicates whether the switch disabled or not
|
|
24
|
+
* Same as the HTML disabled attribute - indicates whether the switch is disabled or not
|
|
25
25
|
*/
|
|
26
|
-
|
|
26
|
+
disabled?: boolean;
|
|
27
27
|
/**
|
|
28
28
|
* The label value of the component
|
|
29
29
|
*/
|
package/src/index.ts
CHANGED
|
@@ -73,7 +73,7 @@ export class PieSwitch extends RtlMixin(LitElement) implements SwitchProps {
|
|
|
73
73
|
public name?: string;
|
|
74
74
|
|
|
75
75
|
@property({ type: Boolean, reflect: true })
|
|
76
|
-
public
|
|
76
|
+
public disabled = false;
|
|
77
77
|
|
|
78
78
|
static styles = unsafeCSS(styles);
|
|
79
79
|
|
|
@@ -83,7 +83,7 @@ export class PieSwitch extends RtlMixin(LitElement) implements SwitchProps {
|
|
|
83
83
|
private handleFormAssociation () : void {
|
|
84
84
|
const isFormAssociated = !!this._internals.form && !!this.name && !!this.value;
|
|
85
85
|
if (isFormAssociated) {
|
|
86
|
-
if (this.
|
|
86
|
+
if (this.disabled) {
|
|
87
87
|
this._internals.setFormValue(null);
|
|
88
88
|
this._internals.setValidity({});
|
|
89
89
|
} else if (this.checked) {
|
|
@@ -186,7 +186,7 @@ export class PieSwitch extends RtlMixin(LitElement) implements SwitchProps {
|
|
|
186
186
|
aria,
|
|
187
187
|
checked,
|
|
188
188
|
required,
|
|
189
|
-
|
|
189
|
+
disabled,
|
|
190
190
|
isRTL,
|
|
191
191
|
} = this;
|
|
192
192
|
|
|
@@ -196,7 +196,7 @@ export class PieSwitch extends RtlMixin(LitElement) implements SwitchProps {
|
|
|
196
196
|
<div
|
|
197
197
|
class="c-switch-wrapper"
|
|
198
198
|
?isRTL=${isRTL}
|
|
199
|
-
?
|
|
199
|
+
?disabled=${disabled}>
|
|
200
200
|
${labelPlacement === 'leading' ? this.renderSwitchLabel() : nothing}
|
|
201
201
|
<label
|
|
202
202
|
data-test-id="switch-component"
|
|
@@ -210,7 +210,7 @@ export class PieSwitch extends RtlMixin(LitElement) implements SwitchProps {
|
|
|
210
210
|
class="c-switch-input"
|
|
211
211
|
.required=${required}
|
|
212
212
|
.checked="${checked}"
|
|
213
|
-
.disabled="${
|
|
213
|
+
.disabled="${disabled}"
|
|
214
214
|
@change="${this.onChange}"
|
|
215
215
|
aria-label="${aria?.label || nothing}"
|
|
216
216
|
aria-describedby="${aria?.describedBy ? switchId : nothing}">
|
package/src/switch.scss
CHANGED
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
font-family: var(--dt-font-body-l-family);
|
|
21
21
|
cursor: pointer;
|
|
22
22
|
|
|
23
|
-
&[
|
|
23
|
+
&[disabled] {
|
|
24
24
|
cursor: not-allowed;
|
|
25
25
|
}
|
|
26
26
|
}
|
|
@@ -78,7 +78,7 @@
|
|
|
78
78
|
}
|
|
79
79
|
}
|
|
80
80
|
|
|
81
|
-
[
|
|
81
|
+
[disabled] & {
|
|
82
82
|
background-color: var(--switch-bg-color--disabled);
|
|
83
83
|
pointer-events: none;
|
|
84
84
|
}
|