@justeattakeaway/pie-chip 0.1.1 → 0.2.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/custom-elements.json +37 -0
- package/dist/index.d.ts +14 -0
- package/dist/index.js +30 -19
- package/dist/react.d.ts +19 -1
- package/dist/react.js +11 -7
- package/package.json +4 -4
- package/src/defs.ts +8 -1
- package/src/index.ts +19 -5
package/custom-elements.json
CHANGED
|
@@ -19,6 +19,15 @@
|
|
|
19
19
|
"text": "['default', 'outline', 'ghost']"
|
|
20
20
|
},
|
|
21
21
|
"default": "['default', 'outline', 'ghost']"
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
"kind": "variable",
|
|
25
|
+
"name": "ON_CHIP_CLOSE_EVENT",
|
|
26
|
+
"type": {
|
|
27
|
+
"text": "string"
|
|
28
|
+
},
|
|
29
|
+
"default": "'pie-chip-close'",
|
|
30
|
+
"description": "Event name for when the chip is closed."
|
|
22
31
|
}
|
|
23
32
|
],
|
|
24
33
|
"exports": [
|
|
@@ -29,6 +38,14 @@
|
|
|
29
38
|
"name": "variants",
|
|
30
39
|
"module": "src/defs.js"
|
|
31
40
|
}
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
"kind": "js",
|
|
44
|
+
"name": "ON_CHIP_CLOSE_EVENT",
|
|
45
|
+
"declaration": {
|
|
46
|
+
"name": "ON_CHIP_CLOSE_EVENT",
|
|
47
|
+
"module": "src/defs.js"
|
|
48
|
+
}
|
|
32
49
|
}
|
|
33
50
|
]
|
|
34
51
|
},
|
|
@@ -112,6 +129,17 @@
|
|
|
112
129
|
},
|
|
113
130
|
"description": "Template for the loading state"
|
|
114
131
|
},
|
|
132
|
+
{
|
|
133
|
+
"kind": "method",
|
|
134
|
+
"name": "_handleCloseButtonClick",
|
|
135
|
+
"privacy": "private",
|
|
136
|
+
"return": {
|
|
137
|
+
"type": {
|
|
138
|
+
"text": "void"
|
|
139
|
+
}
|
|
140
|
+
},
|
|
141
|
+
"description": "Handles click on a close button by dispatching a custom event"
|
|
142
|
+
},
|
|
115
143
|
{
|
|
116
144
|
"kind": "method",
|
|
117
145
|
"name": "renderCloseButton",
|
|
@@ -124,6 +152,15 @@
|
|
|
124
152
|
"description": "Template for the dismissible state"
|
|
125
153
|
}
|
|
126
154
|
],
|
|
155
|
+
"events": [
|
|
156
|
+
{
|
|
157
|
+
"type": {
|
|
158
|
+
"text": "CustomEvent"
|
|
159
|
+
},
|
|
160
|
+
"description": "when a user clicks close button.",
|
|
161
|
+
"name": "pie-chip-close"
|
|
162
|
+
}
|
|
163
|
+
],
|
|
127
164
|
"attributes": [
|
|
128
165
|
{
|
|
129
166
|
"name": "variant",
|
package/dist/index.d.ts
CHANGED
|
@@ -26,10 +26,18 @@ export declare interface ChipProps {
|
|
|
26
26
|
isDismissible?: boolean;
|
|
27
27
|
}
|
|
28
28
|
|
|
29
|
+
/**
|
|
30
|
+
* Event name for when the chip is closed.
|
|
31
|
+
*
|
|
32
|
+
* @constant
|
|
33
|
+
*/
|
|
34
|
+
export declare const ON_CHIP_CLOSE_EVENT = "pie-chip-close";
|
|
35
|
+
|
|
29
36
|
/**
|
|
30
37
|
* @tagname pie-chip
|
|
31
38
|
* @slot icon - The icon slot
|
|
32
39
|
* @slot - Default slot
|
|
40
|
+
* @event {CustomEvent} pie-chip-close - when a user clicks close button.
|
|
33
41
|
*/
|
|
34
42
|
export declare class PieChip extends LitElement implements ChipProps {
|
|
35
43
|
variant: ChipProps['variant'];
|
|
@@ -43,6 +51,12 @@ export declare class PieChip extends LitElement implements ChipProps {
|
|
|
43
51
|
* @private
|
|
44
52
|
*/
|
|
45
53
|
private renderSpinner;
|
|
54
|
+
/**
|
|
55
|
+
* Handles click on a close button by dispatching a custom event
|
|
56
|
+
*
|
|
57
|
+
* @private
|
|
58
|
+
*/
|
|
59
|
+
private _handleCloseButtonClick;
|
|
46
60
|
/**
|
|
47
61
|
* Template for the dismissible state
|
|
48
62
|
*
|
package/dist/index.js
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import { unsafeCSS as h, LitElement as b, html as l, nothing as p } from "lit";
|
|
2
2
|
import { property as a } from "lit/decorators.js";
|
|
3
|
-
import { validPropertyValues as g, defineCustomElement as m } from "@justeattakeaway/pie-webc-core";
|
|
3
|
+
import { validPropertyValues as g, defineCustomElement as m, dispatchCustomEvent as f } from "@justeattakeaway/pie-webc-core";
|
|
4
4
|
import "@justeattakeaway/pie-icons-webc/IconCloseCircleFilled";
|
|
5
5
|
import "@justeattakeaway/pie-spinner";
|
|
6
|
-
const
|
|
7
|
-
`,
|
|
8
|
-
var
|
|
9
|
-
for (var i =
|
|
10
|
-
(s = d[t]) && (i = (
|
|
11
|
-
return
|
|
6
|
+
const u = `.c-chip{--chip-bg-color: var(--dt-color-interactive-secondary);--chip-color: var(--dt-color-content-interactive-secondary);--chip-border-width: 1px;--chip-border-color: transparent;--chip-padding-block: calc(6px - var(--chip-border-width));--chip-padding-inline: calc(var(--dt-spacing-c) - var(--chip-border-width));--chip-padding-dismissible: calc(var(--dt-spacing-a) - var(--chip-border-width));--chip-min-width: calc(var(--dt-spacing-g) + var(--dt-spacing-b));--chip-gap: var(--dt-spacing-b);--chip-dismissible-offset: calc(var(--chip-gap) / -2);--icon-display-override: block;position:relative;display:flex;align-items:center;justify-content:center;gap:var(--chip-gap);padding-block-start:var(--chip-padding-block);padding-block-end:var(--chip-padding-block);padding-inline-start:var(--chip-padding-inline);padding-inline-end:var(--chip-padding-inline);background-color:var(--chip-bg-color);color:var(--chip-color);border-radius:var(--dt-radius-rounded-e);border:1px solid;border-color:var(--chip-border-color);cursor:pointer;min-width:var(--chip-min-width);font-size:calc(var(--dt-font-interactive-xs-size) * 1px);line-height:calc(var(--dt-font-interactive-xs-line-height) * 1px);font-weight:var(--dt-font-weight-bold)}.c-chip:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--chip-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--hover-modifier)))}.c-chip:active:not(:disabled),.c-chip[isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--chip-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--active-modifier)))}.c-chip[variant=outline]:not([disabled],[isSelected],[isLoading]){--chip-border-color: var(--dt-color-border-strong)}.c-chip[variant=outline],.c-chip[variant=ghost]{--chip-bg-color: transparent}.c-chip[variant=outline]:hover:not(:disabled),.c-chip[variant=ghost]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--chip-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.c-chip[variant=outline]:active:not(:disabled),.c-chip[variant=outline][isLoading]:not(:disabled),.c-chip[variant=ghost]:active:not(:disabled),.c-chip[variant=ghost][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--chip-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.c-chip[isSelected]{--chip-bg-color: var(--dt-color-interactive-primary);--chip-color: var(--dt-color-content-interactive-primary)}.c-chip[isSelected]:hover:not(:disabled){--hover-modifier: var(--dt-color-hover-02);--chip-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--hover-modifier)))}.c-chip[isSelected]:active:not(:disabled),.c-chip[isSelected][isLoading]:not(:disabled){--active-modifier: var(--dt-color-active-02);--chip-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--active-modifier)))}.c-chip[isDismissible][isSelected]{padding-inline-end:var(--chip-padding-dismissible);padding-block-start:var(--chip-padding-dismissible);padding-block-end:var(--chip-padding-dismissible)}.c-chip[isDismissible][isSelected] .c-chip-closeBtn{display:inline-flex;-webkit-user-select:none;user-select:none;outline:none;border:none;color:inherit;background-color:inherit;border-radius:inherit;cursor:pointer;padding:0;margin-inline-start:var(--chip-dismissible-offset)}.c-chip[isLoading]>*:not(.c-chip-spinner){visibility:hidden}.c-chip[isLoading] .c-chip-spinner{position:absolute}.c-chip[disabled]{--chip-bg-color: var(--dt-color-disabled-01);--chip-color: var(--dt-color-content-disabled);cursor:not-allowed}.c-chip:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}::slotted(svg){display:block;height:var(--icon-size-override);width:var(--icon-size-override)}
|
|
7
|
+
`, y = ["default", "outline", "ghost"], S = "pie-chip-close";
|
|
8
|
+
var k = Object.defineProperty, w = Object.getOwnPropertyDescriptor, n = (d, e, c, r) => {
|
|
9
|
+
for (var i = r > 1 ? void 0 : r ? w(e, c) : e, t = d.length - 1, s; t >= 0; t--)
|
|
10
|
+
(s = d[t]) && (i = (r ? s(e, c, i) : s(i)) || i);
|
|
11
|
+
return r && i && k(e, c, i), i;
|
|
12
12
|
};
|
|
13
13
|
const v = "pie-chip";
|
|
14
14
|
class o extends b {
|
|
@@ -21,14 +21,22 @@ class o extends b {
|
|
|
21
21
|
* @private
|
|
22
22
|
*/
|
|
23
23
|
renderSpinner() {
|
|
24
|
-
const { isSelected:
|
|
24
|
+
const { isSelected: e } = this;
|
|
25
25
|
return l`
|
|
26
26
|
<pie-spinner
|
|
27
27
|
class="c-chip-spinner"
|
|
28
28
|
size="small"
|
|
29
|
-
variant="${
|
|
29
|
+
variant="${e ? "inverse" : "secondary"}">
|
|
30
30
|
</pie-spinner>`;
|
|
31
31
|
}
|
|
32
|
+
/**
|
|
33
|
+
* Handles click on a close button by dispatching a custom event
|
|
34
|
+
*
|
|
35
|
+
* @private
|
|
36
|
+
*/
|
|
37
|
+
_handleCloseButtonClick() {
|
|
38
|
+
f(this, S);
|
|
39
|
+
}
|
|
32
40
|
/**
|
|
33
41
|
* Template for the dismissible state
|
|
34
42
|
*
|
|
@@ -36,7 +44,9 @@ class o extends b {
|
|
|
36
44
|
*/
|
|
37
45
|
renderCloseButton() {
|
|
38
46
|
return l`
|
|
39
|
-
<button
|
|
47
|
+
<button
|
|
48
|
+
@click="${this._handleCloseButtonClick}"
|
|
49
|
+
?disabled=${this.disabled}
|
|
40
50
|
class="c-chip-closeBtn"
|
|
41
51
|
data-test-id="chip-close-button">
|
|
42
52
|
<icon-close-circle-filled size="m"></icon-close-circle-filled>
|
|
@@ -44,9 +54,9 @@ class o extends b {
|
|
|
44
54
|
}
|
|
45
55
|
render() {
|
|
46
56
|
const {
|
|
47
|
-
variant:
|
|
57
|
+
variant: e,
|
|
48
58
|
disabled: c,
|
|
49
|
-
isSelected:
|
|
59
|
+
isSelected: r,
|
|
50
60
|
isLoading: i,
|
|
51
61
|
isDismissible: t
|
|
52
62
|
} = this;
|
|
@@ -56,22 +66,22 @@ class o extends b {
|
|
|
56
66
|
role="button"
|
|
57
67
|
tabindex="0"
|
|
58
68
|
data-test-id="pie-chip"
|
|
59
|
-
variant="${
|
|
69
|
+
variant="${e}"
|
|
60
70
|
?disabled="${c}"
|
|
61
|
-
?isSelected="${
|
|
71
|
+
?isSelected="${r}"
|
|
62
72
|
?isLoading="${i}"
|
|
63
73
|
?isDismissible="${t}">
|
|
64
74
|
<slot name="icon"></slot>
|
|
65
75
|
${i ? this.renderSpinner() : p}
|
|
66
|
-
<slot></slot>
|
|
67
|
-
${t &&
|
|
76
|
+
<slot></slot>
|
|
77
|
+
${t && r ? this.renderCloseButton() : p}
|
|
68
78
|
</div>`;
|
|
69
79
|
}
|
|
70
80
|
}
|
|
71
|
-
o.styles = h(
|
|
81
|
+
o.styles = h(u);
|
|
72
82
|
n([
|
|
73
83
|
a(),
|
|
74
|
-
g(v,
|
|
84
|
+
g(v, y, "primary")
|
|
75
85
|
], o.prototype, "variant", 2);
|
|
76
86
|
n([
|
|
77
87
|
a({ type: Boolean })
|
|
@@ -87,6 +97,7 @@ n([
|
|
|
87
97
|
], o.prototype, "isDismissible", 2);
|
|
88
98
|
m(v, o);
|
|
89
99
|
export {
|
|
100
|
+
S as ON_CHIP_CLOSE_EVENT,
|
|
90
101
|
o as PieChip,
|
|
91
|
-
|
|
102
|
+
y as variants
|
|
92
103
|
};
|
package/dist/react.d.ts
CHANGED
|
@@ -27,12 +27,20 @@ export declare interface ChipProps {
|
|
|
27
27
|
isDismissible?: boolean;
|
|
28
28
|
}
|
|
29
29
|
|
|
30
|
-
|
|
30
|
+
/**
|
|
31
|
+
* Event name for when the chip is closed.
|
|
32
|
+
*
|
|
33
|
+
* @constant
|
|
34
|
+
*/
|
|
35
|
+
export declare const ON_CHIP_CLOSE_EVENT = "pie-chip-close";
|
|
36
|
+
|
|
37
|
+
export declare const PieChip: React_2.ForwardRefExoticComponent<ChipProps & React_2.RefAttributes<PieChip_2> & PieChipEvents & ReactBaseType>;
|
|
31
38
|
|
|
32
39
|
/**
|
|
33
40
|
* @tagname pie-chip
|
|
34
41
|
* @slot icon - The icon slot
|
|
35
42
|
* @slot - Default slot
|
|
43
|
+
* @event {CustomEvent} pie-chip-close - when a user clicks close button.
|
|
36
44
|
*/
|
|
37
45
|
declare class PieChip_2 extends LitElement implements ChipProps {
|
|
38
46
|
variant: ChipProps['variant'];
|
|
@@ -46,6 +54,12 @@ declare class PieChip_2 extends LitElement implements ChipProps {
|
|
|
46
54
|
* @private
|
|
47
55
|
*/
|
|
48
56
|
private renderSpinner;
|
|
57
|
+
/**
|
|
58
|
+
* Handles click on a close button by dispatching a custom event
|
|
59
|
+
*
|
|
60
|
+
* @private
|
|
61
|
+
*/
|
|
62
|
+
private _handleCloseButtonClick;
|
|
49
63
|
/**
|
|
50
64
|
* Template for the dismissible state
|
|
51
65
|
*
|
|
@@ -56,6 +70,10 @@ declare class PieChip_2 extends LitElement implements ChipProps {
|
|
|
56
70
|
static styles: CSSResult;
|
|
57
71
|
}
|
|
58
72
|
|
|
73
|
+
declare type PieChipEvents = {
|
|
74
|
+
onPieChipClose?: (event: CustomEvent) => void;
|
|
75
|
+
};
|
|
76
|
+
|
|
59
77
|
declare type ReactBaseType = React_2.HTMLAttributes<HTMLElement>;
|
|
60
78
|
|
|
61
79
|
export declare const variants: readonly ["default", "outline", "ghost"];
|
package/dist/react.js
CHANGED
|
@@ -1,20 +1,24 @@
|
|
|
1
1
|
import * as i from "react";
|
|
2
2
|
import { createComponent as e } from "@lit/react";
|
|
3
|
-
import { PieChip as
|
|
4
|
-
import { variants as f } from "./index.js";
|
|
3
|
+
import { PieChip as p } from "./index.js";
|
|
4
|
+
import { ON_CHIP_CLOSE_EVENT as l, variants as f } from "./index.js";
|
|
5
5
|
import "lit";
|
|
6
6
|
import "lit/decorators.js";
|
|
7
7
|
import "@justeattakeaway/pie-webc-core";
|
|
8
8
|
import "@justeattakeaway/pie-icons-webc/IconCloseCircleFilled";
|
|
9
9
|
import "@justeattakeaway/pie-spinner";
|
|
10
|
-
const
|
|
10
|
+
const o = e({
|
|
11
11
|
displayName: "PieChip",
|
|
12
|
-
elementClass:
|
|
12
|
+
elementClass: p,
|
|
13
13
|
react: i,
|
|
14
14
|
tagName: "pie-chip",
|
|
15
|
-
events: {
|
|
16
|
-
|
|
15
|
+
events: {
|
|
16
|
+
onPieChipClose: "pie-chip-close"
|
|
17
|
+
// when a user clicks close button.
|
|
18
|
+
}
|
|
19
|
+
}), h = o;
|
|
17
20
|
export {
|
|
18
|
-
|
|
21
|
+
l as ON_CHIP_CLOSE_EVENT,
|
|
22
|
+
h as PieChip,
|
|
19
23
|
f as variants
|
|
20
24
|
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-chip",
|
|
3
3
|
"description": "PIE Design System Chip built using Web Components",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.2.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"module": "dist/index.js",
|
|
@@ -35,9 +35,9 @@
|
|
|
35
35
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@justeattakeaway/pie-icons-webc": "0.
|
|
39
|
-
"@justeattakeaway/pie-spinner": "0.5.
|
|
40
|
-
"@justeattakeaway/pie-webc-core": "0.
|
|
38
|
+
"@justeattakeaway/pie-icons-webc": "0.18.0",
|
|
39
|
+
"@justeattakeaway/pie-spinner": "0.5.4",
|
|
40
|
+
"@justeattakeaway/pie-webc-core": "0.19.0"
|
|
41
41
|
},
|
|
42
42
|
"volta": {
|
|
43
43
|
"extends": "../../../package.json"
|
package/src/defs.ts
CHANGED
|
@@ -22,5 +22,12 @@ export interface ChipProps {
|
|
|
22
22
|
* Can be only used if `isSelected` is set to true
|
|
23
23
|
*/
|
|
24
24
|
isDismissible?: boolean;
|
|
25
|
-
|
|
26
25
|
}
|
|
26
|
+
|
|
27
|
+
/**
|
|
28
|
+
* Event name for when the chip is closed.
|
|
29
|
+
*
|
|
30
|
+
* @constant
|
|
31
|
+
*/
|
|
32
|
+
|
|
33
|
+
export const ON_CHIP_CLOSE_EVENT = 'pie-chip-close';
|
package/src/index.ts
CHANGED
|
@@ -3,9 +3,11 @@ import {
|
|
|
3
3
|
} from 'lit';
|
|
4
4
|
import { property } from 'lit/decorators.js';
|
|
5
5
|
|
|
6
|
-
import {
|
|
6
|
+
import {
|
|
7
|
+
validPropertyValues, defineCustomElement, dispatchCustomEvent,
|
|
8
|
+
} from '@justeattakeaway/pie-webc-core';
|
|
7
9
|
import styles from './chip.scss?inline';
|
|
8
|
-
import { ChipProps, variants } from './defs';
|
|
10
|
+
import { ChipProps, variants, ON_CHIP_CLOSE_EVENT } from './defs';
|
|
9
11
|
import '@justeattakeaway/pie-icons-webc/IconCloseCircleFilled';
|
|
10
12
|
import '@justeattakeaway/pie-spinner';
|
|
11
13
|
|
|
@@ -18,6 +20,7 @@ const componentSelector = 'pie-chip';
|
|
|
18
20
|
* @tagname pie-chip
|
|
19
21
|
* @slot icon - The icon slot
|
|
20
22
|
* @slot - Default slot
|
|
23
|
+
* @event {CustomEvent} pie-chip-close - when a user clicks close button.
|
|
21
24
|
*/
|
|
22
25
|
export class PieChip extends LitElement implements ChipProps {
|
|
23
26
|
@property()
|
|
@@ -53,6 +56,15 @@ export class PieChip extends LitElement implements ChipProps {
|
|
|
53
56
|
</pie-spinner>`;
|
|
54
57
|
}
|
|
55
58
|
|
|
59
|
+
/**
|
|
60
|
+
* Handles click on a close button by dispatching a custom event
|
|
61
|
+
*
|
|
62
|
+
* @private
|
|
63
|
+
*/
|
|
64
|
+
private _handleCloseButtonClick () : void {
|
|
65
|
+
dispatchCustomEvent(this, ON_CHIP_CLOSE_EVENT);
|
|
66
|
+
}
|
|
67
|
+
|
|
56
68
|
/**
|
|
57
69
|
* Template for the dismissible state
|
|
58
70
|
*
|
|
@@ -60,7 +72,9 @@ export class PieChip extends LitElement implements ChipProps {
|
|
|
60
72
|
*/
|
|
61
73
|
private renderCloseButton (): TemplateResult {
|
|
62
74
|
return html`
|
|
63
|
-
<button
|
|
75
|
+
<button
|
|
76
|
+
@click="${this._handleCloseButtonClick}"
|
|
77
|
+
?disabled=${this.disabled}
|
|
64
78
|
class="c-chip-closeBtn"
|
|
65
79
|
data-test-id="chip-close-button">
|
|
66
80
|
<icon-close-circle-filled size="m"></icon-close-circle-filled>
|
|
@@ -89,8 +103,8 @@ export class PieChip extends LitElement implements ChipProps {
|
|
|
89
103
|
?isDismissible="${isDismissible}">
|
|
90
104
|
<slot name="icon"></slot>
|
|
91
105
|
${isLoading ? this.renderSpinner() : nothing}
|
|
92
|
-
<slot></slot>
|
|
93
|
-
${isDismissible && isSelected ? this.renderCloseButton() : nothing}
|
|
106
|
+
<slot></slot>
|
|
107
|
+
${isDismissible && isSelected ? this.renderCloseButton() : nothing}
|
|
94
108
|
</div>`;
|
|
95
109
|
}
|
|
96
110
|
|