@qoretechnologies/reqore 0.18.5 → 0.19.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/.gitpod.yml +17 -0
- package/__tests__/table.test.tsx +177 -111
- package/dist/components/Breadcrumbs/index.d.ts.map +1 -1
- package/dist/components/Breadcrumbs/index.js +4 -4
- package/dist/components/Breadcrumbs/index.js.map +1 -1
- package/dist/components/Breadcrumbs/item.d.ts.map +1 -1
- package/dist/components/Breadcrumbs/item.js +2 -2
- package/dist/components/Breadcrumbs/item.js.map +1 -1
- package/dist/components/Button/index.d.ts +3 -1
- package/dist/components/Button/index.d.ts.map +1 -1
- package/dist/components/Button/index.js +38 -40
- package/dist/components/Button/index.js.map +1 -1
- package/dist/components/Dropdown/index.d.ts +6 -1
- package/dist/components/Dropdown/index.d.ts.map +1 -1
- package/dist/components/Dropdown/index.js +2 -2
- package/dist/components/Dropdown/index.js.map +1 -1
- package/dist/components/Header/index.d.ts +6 -6
- package/dist/components/Header/index.d.ts.map +1 -1
- package/dist/components/Header/index.js.map +1 -1
- package/dist/components/Modal/index.d.ts +2 -1
- package/dist/components/Modal/index.d.ts.map +1 -1
- package/dist/components/Modal/index.js +9 -6
- package/dist/components/Modal/index.js.map +1 -1
- package/dist/components/Panel/panel.screenshot.d.ts.map +1 -1
- package/dist/components/Panel/panel.screenshot.js +3 -3
- package/dist/components/Panel/panel.screenshot.js.map +1 -1
- package/dist/components/Paragraph/index.d.ts +1 -1
- package/dist/components/Paragraph/index.d.ts.map +1 -1
- package/dist/components/Paragraph/index.js +26 -1
- package/dist/components/Paragraph/index.js.map +1 -1
- package/dist/components/Table/body.d.ts +4 -9
- package/dist/components/Table/body.d.ts.map +1 -1
- package/dist/components/Table/body.js +3 -2
- package/dist/components/Table/body.js.map +1 -1
- package/dist/components/Table/header.d.ts +1 -0
- package/dist/components/Table/header.d.ts.map +1 -1
- package/dist/components/Table/header.js +12 -14
- package/dist/components/Table/header.js.map +1 -1
- package/dist/components/Table/headerCell.d.ts.map +1 -1
- package/dist/components/Table/headerCell.js +7 -10
- package/dist/components/Table/headerCell.js.map +1 -1
- package/dist/components/Table/index.d.ts +20 -9
- package/dist/components/Table/index.d.ts.map +1 -1
- package/dist/components/Table/index.js +17 -13
- package/dist/components/Table/index.js.map +1 -1
- package/dist/components/Table/row.d.ts +34 -10
- package/dist/components/Table/row.d.ts.map +1 -1
- package/dist/components/Table/row.js +123 -19
- package/dist/components/Table/row.js.map +1 -1
- package/dist/components/Tabs/index.d.ts +3 -1
- package/dist/components/Tabs/index.d.ts.map +1 -1
- package/dist/components/Tabs/index.js +4 -4
- package/dist/components/Tabs/index.js.map +1 -1
- package/dist/components/Tabs/item.d.ts.map +1 -1
- package/dist/components/Tabs/item.js +11 -8
- package/dist/components/Tabs/item.js.map +1 -1
- package/dist/components/Tabs/list.d.ts +2 -0
- package/dist/components/Tabs/list.d.ts.map +1 -1
- package/dist/components/Tabs/list.js +4 -3
- package/dist/components/Tabs/list.js.map +1 -1
- package/dist/components/Tag/index.d.ts +4 -2
- package/dist/components/Tag/index.d.ts.map +1 -1
- package/dist/components/Tag/index.js +10 -6
- package/dist/components/Tag/index.js.map +1 -1
- package/dist/components/TimeAgo/index.d.ts +4 -0
- package/dist/components/TimeAgo/index.d.ts.map +1 -0
- package/dist/components/TimeAgo/index.js +20 -0
- package/dist/components/TimeAgo/index.js.map +1 -0
- package/dist/constants/sizes.d.ts +15 -0
- package/dist/constants/sizes.d.ts.map +1 -1
- package/dist/constants/sizes.js +15 -1
- package/dist/constants/sizes.js.map +1 -1
- package/dist/constants/theme.d.ts +2 -1
- package/dist/constants/theme.d.ts.map +1 -1
- package/dist/constants/theme.js +2 -1
- package/dist/constants/theme.js.map +1 -1
- package/dist/containers/ReqoreProvider.d.ts +3 -1
- package/dist/containers/ReqoreProvider.d.ts.map +1 -1
- package/dist/containers/ReqoreProvider.js +14 -12
- package/dist/containers/ReqoreProvider.js.map +1 -1
- package/dist/helpers/colors.d.ts +1 -1
- package/dist/helpers/colors.d.ts.map +1 -1
- package/dist/helpers/time.d.ts +2 -0
- package/dist/helpers/time.d.ts.map +1 -0
- package/dist/helpers/time.js +19 -0
- package/dist/helpers/time.js.map +1 -0
- package/package.json +4 -3
package/.gitpod.yml
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
vscode:
|
|
2
|
+
extensions:
|
|
3
|
+
- oderwat.indent-rainbow
|
|
4
|
+
- tombonnike.vscode-status-bar-format-toggle
|
|
5
|
+
- usernamehw.errorlens
|
|
6
|
+
- emmanuelbeziat.vscode-great-icons
|
|
7
|
+
- esbenp.prettier-vscode
|
|
8
|
+
- jpoissonnier.vscode-styled-components
|
|
9
|
+
- streetsidesoftware.code-spell-checker
|
|
10
|
+
- foxhoundn.synthax
|
|
11
|
+
- alefragnani.bookmarks
|
|
12
|
+
- tabnine.tabnine-vscode
|
|
13
|
+
- akosyakov.gitpod-monitor
|
|
14
|
+
- eamodio.gitlens
|
|
15
|
+
tasks:
|
|
16
|
+
- init: "yarn install"
|
|
17
|
+
- command: "yarn storybook"
|
package/__tests__/table.test.tsx
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { fireEvent, render } from
|
|
2
|
-
import React from
|
|
3
|
-
import { ReqoreLayoutContent, ReqoreTable, ReqoreUIProvider } from
|
|
4
|
-
import { IReqoreTableColumn, IReqoreTableSort } from
|
|
5
|
-
import tableData from
|
|
1
|
+
import { fireEvent, render } from '@testing-library/react';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { ReqoreLayoutContent, ReqoreTable, ReqoreUIProvider } from '../src';
|
|
4
|
+
import { IReqoreTableColumn, IReqoreTableSort } from '../src/components/Table';
|
|
5
|
+
import tableData from '../src/mock/tableData';
|
|
6
6
|
|
|
7
|
-
test(
|
|
7
|
+
test('Renders basic <Table /> properly', () => {
|
|
8
8
|
render(
|
|
9
9
|
<ReqoreUIProvider>
|
|
10
10
|
<ReqoreLayoutContent>
|
|
@@ -13,38 +13,38 @@ test("Renders basic <Table /> properly", () => {
|
|
|
13
13
|
</ReqoreUIProvider>
|
|
14
14
|
);
|
|
15
15
|
|
|
16
|
-
expect(document.querySelectorAll(
|
|
17
|
-
expect(document.querySelectorAll(
|
|
16
|
+
expect(document.querySelectorAll('.reqore-table-header-cell').length).toBe(8);
|
|
17
|
+
expect(document.querySelectorAll('.reqore-table-row').length).toBe(10);
|
|
18
18
|
});
|
|
19
19
|
|
|
20
|
-
test(
|
|
20
|
+
test('Renders <Table /> with grouped columns properly', () => {
|
|
21
21
|
const data = {
|
|
22
22
|
...tableData,
|
|
23
23
|
columns: [
|
|
24
24
|
{
|
|
25
|
-
dataId:
|
|
26
|
-
header:
|
|
25
|
+
dataId: 'id',
|
|
26
|
+
header: 'ID',
|
|
27
27
|
width: 50,
|
|
28
|
-
align:
|
|
28
|
+
align: 'center',
|
|
29
29
|
},
|
|
30
30
|
{
|
|
31
|
-
header:
|
|
32
|
-
dataId:
|
|
31
|
+
header: 'Name',
|
|
32
|
+
dataId: 'name',
|
|
33
33
|
grow: 3,
|
|
34
34
|
columns: [
|
|
35
|
-
{ dataId:
|
|
36
|
-
{ dataId:
|
|
35
|
+
{ dataId: 'firstName', header: 'First Name', width: 150, grow: 2 },
|
|
36
|
+
{ dataId: 'lastName', header: 'Last Name', width: 150, grow: 1 },
|
|
37
37
|
],
|
|
38
38
|
},
|
|
39
|
-
{ dataId:
|
|
39
|
+
{ dataId: 'address', header: 'Address', width: 300, grow: 2 },
|
|
40
40
|
{
|
|
41
|
-
dataId:
|
|
42
|
-
header:
|
|
41
|
+
dataId: 'age',
|
|
42
|
+
header: 'Really long age header',
|
|
43
43
|
width: 50,
|
|
44
|
-
align:
|
|
44
|
+
align: 'center',
|
|
45
45
|
},
|
|
46
|
-
{ dataId:
|
|
47
|
-
{ dataId:
|
|
46
|
+
{ dataId: 'occupation', header: 'Ocuppation', width: 200 },
|
|
47
|
+
{ dataId: 'group', header: 'Group', width: 150 },
|
|
48
48
|
] as IReqoreTableColumn[],
|
|
49
49
|
};
|
|
50
50
|
|
|
@@ -56,41 +56,98 @@ test("Renders <Table /> with grouped columns properly", () => {
|
|
|
56
56
|
</ReqoreUIProvider>
|
|
57
57
|
);
|
|
58
58
|
|
|
59
|
-
expect(document.querySelectorAll(
|
|
60
|
-
|
|
61
|
-
);
|
|
62
|
-
expect(document.querySelectorAll(".reqore-table-header-cell").length).toBe(7);
|
|
59
|
+
expect(document.querySelectorAll('.reqore-table-column-group').length).toBe(1);
|
|
60
|
+
expect(document.querySelectorAll('.reqore-table-header-cell').length).toBe(7);
|
|
63
61
|
});
|
|
64
62
|
|
|
65
|
-
test(
|
|
63
|
+
test('Renders <Table /> with custom content', () => {
|
|
66
64
|
const data = {
|
|
67
65
|
...tableData,
|
|
68
66
|
columns: [
|
|
69
67
|
{
|
|
70
|
-
dataId:
|
|
71
|
-
header:
|
|
68
|
+
dataId: 'id',
|
|
69
|
+
header: 'ID',
|
|
72
70
|
width: 50,
|
|
73
|
-
align:
|
|
71
|
+
align: 'center',
|
|
74
72
|
content: ({ id }) => <span>ID {id}</span>,
|
|
75
73
|
},
|
|
76
74
|
{
|
|
77
|
-
header:
|
|
78
|
-
dataId:
|
|
75
|
+
header: 'Name',
|
|
76
|
+
dataId: 'name',
|
|
77
|
+
grow: 3,
|
|
78
|
+
columns: [
|
|
79
|
+
{ dataId: 'firstName', header: 'First Name', width: 150, grow: 2 },
|
|
80
|
+
{ dataId: 'lastName', header: 'Last Name', width: 150, grow: 1 },
|
|
81
|
+
],
|
|
82
|
+
},
|
|
83
|
+
{ dataId: 'address', header: 'Address', width: 300, grow: 2 },
|
|
84
|
+
{
|
|
85
|
+
dataId: 'age',
|
|
86
|
+
header: 'Really long age header',
|
|
87
|
+
width: 50,
|
|
88
|
+
align: 'center',
|
|
89
|
+
},
|
|
90
|
+
{ dataId: 'occupation', header: 'Ocuppation', width: 200 },
|
|
91
|
+
{ dataId: 'group', header: 'Group', width: 150 },
|
|
92
|
+
] as IReqoreTableColumn[],
|
|
93
|
+
};
|
|
94
|
+
|
|
95
|
+
render(
|
|
96
|
+
<ReqoreUIProvider>
|
|
97
|
+
<ReqoreLayoutContent>
|
|
98
|
+
<ReqoreTable {...data} />
|
|
99
|
+
</ReqoreLayoutContent>
|
|
100
|
+
</ReqoreUIProvider>
|
|
101
|
+
);
|
|
102
|
+
|
|
103
|
+
const firstRow = document.querySelector('.reqore-table-row');
|
|
104
|
+
const idCell = firstRow.querySelector('.reqore-table-cell');
|
|
105
|
+
|
|
106
|
+
expect(idCell.textContent).toBe('ID 0');
|
|
107
|
+
});
|
|
108
|
+
|
|
109
|
+
test('Renders <Table /> with predefined content', () => {
|
|
110
|
+
const data = {
|
|
111
|
+
...tableData,
|
|
112
|
+
columns: [
|
|
113
|
+
{
|
|
114
|
+
dataId: 'id',
|
|
115
|
+
header: 'ID',
|
|
116
|
+
width: 50,
|
|
117
|
+
align: 'center',
|
|
118
|
+
content: 'tag:info',
|
|
119
|
+
},
|
|
120
|
+
{
|
|
121
|
+
header: 'Name',
|
|
122
|
+
dataId: 'name',
|
|
79
123
|
grow: 3,
|
|
80
124
|
columns: [
|
|
81
|
-
{
|
|
82
|
-
|
|
125
|
+
{
|
|
126
|
+
dataId: 'firstName',
|
|
127
|
+
header: 'First Name',
|
|
128
|
+
width: 150,
|
|
129
|
+
grow: 2,
|
|
130
|
+
content: 'tag:#000000',
|
|
131
|
+
},
|
|
132
|
+
{
|
|
133
|
+
dataId: 'lastName',
|
|
134
|
+
header: 'Last Name',
|
|
135
|
+
width: 150,
|
|
136
|
+
grow: 1,
|
|
137
|
+
content: 'title:success',
|
|
138
|
+
},
|
|
83
139
|
],
|
|
84
140
|
},
|
|
85
|
-
{ dataId:
|
|
141
|
+
{ dataId: 'address', header: 'Address', width: 300, grow: 2, content: 'text:warning' },
|
|
86
142
|
{
|
|
87
|
-
dataId:
|
|
88
|
-
header:
|
|
143
|
+
dataId: 'age',
|
|
144
|
+
header: 'Really long age header',
|
|
89
145
|
width: 50,
|
|
90
|
-
align:
|
|
146
|
+
align: 'center',
|
|
91
147
|
},
|
|
92
|
-
{ dataId:
|
|
93
|
-
{ dataId:
|
|
148
|
+
{ dataId: 'occupation', header: 'Ocuppation', width: 200 },
|
|
149
|
+
{ dataId: 'group', header: 'Group', width: 150 },
|
|
150
|
+
{ dataId: 'date', header: 'Date', content: 'time-ago' },
|
|
94
151
|
] as IReqoreTableColumn[],
|
|
95
152
|
};
|
|
96
153
|
|
|
@@ -102,39 +159,48 @@ test("Renders <Table /> with custom content", () => {
|
|
|
102
159
|
</ReqoreUIProvider>
|
|
103
160
|
);
|
|
104
161
|
|
|
105
|
-
const firstRow = document.querySelector(
|
|
106
|
-
|
|
162
|
+
const firstRow = document.querySelector('.reqore-table-row');
|
|
163
|
+
|
|
164
|
+
const idCell = firstRow.querySelectorAll('.reqore-table-cell')[0];
|
|
165
|
+
const firstNameCell = firstRow.querySelectorAll('.reqore-table-cell')[1];
|
|
166
|
+
const lastNameCell = firstRow.querySelectorAll('.reqore-table-cell')[2];
|
|
167
|
+
const addressCell = firstRow.querySelectorAll('.reqore-table-cell')[3];
|
|
168
|
+
const dateCell = firstRow.querySelectorAll('.reqore-table-cell')[7];
|
|
107
169
|
|
|
108
|
-
expect(idCell.
|
|
170
|
+
expect(idCell.querySelector('.reqore-tag')).toBeTruthy();
|
|
171
|
+
expect(firstNameCell.querySelector('.reqore-tag')).toBeTruthy();
|
|
172
|
+
expect(lastNameCell.querySelector('h3')).toBeTruthy();
|
|
173
|
+
expect(addressCell.querySelector('p.reqore-paragraph-warning')).toBeTruthy();
|
|
174
|
+
expect(dateCell.textContent).toBe('just now');
|
|
109
175
|
});
|
|
110
176
|
|
|
111
|
-
test(
|
|
177
|
+
test('Sorting on <Table /> works properly', () => {
|
|
112
178
|
const data = {
|
|
113
179
|
...tableData,
|
|
114
180
|
columns: [
|
|
115
181
|
{
|
|
116
|
-
dataId:
|
|
117
|
-
header:
|
|
182
|
+
dataId: 'id',
|
|
183
|
+
header: 'ID',
|
|
118
184
|
width: 50,
|
|
119
|
-
align:
|
|
185
|
+
align: 'center',
|
|
120
186
|
sortable: true,
|
|
121
187
|
},
|
|
122
|
-
{ dataId:
|
|
123
|
-
{ dataId:
|
|
124
|
-
{ dataId:
|
|
188
|
+
{ dataId: 'firstName', header: 'First Name', width: 150 },
|
|
189
|
+
{ dataId: 'lastName', header: 'Last Name', width: 150 },
|
|
190
|
+
{ dataId: 'address', header: 'Address', width: 300, grow: 2 },
|
|
125
191
|
{
|
|
126
|
-
dataId:
|
|
127
|
-
header:
|
|
192
|
+
dataId: 'age',
|
|
193
|
+
header: 'Really long age header',
|
|
128
194
|
width: 50,
|
|
129
|
-
align:
|
|
195
|
+
align: 'center',
|
|
130
196
|
sortable: true,
|
|
131
197
|
},
|
|
132
|
-
{ dataId:
|
|
133
|
-
{ dataId:
|
|
198
|
+
{ dataId: 'occupation', header: 'Ocuppation', width: 200 },
|
|
199
|
+
{ dataId: 'group', header: 'Group', width: 150 },
|
|
134
200
|
] as IReqoreTableColumn[],
|
|
135
201
|
sort: {
|
|
136
|
-
by:
|
|
137
|
-
direction:
|
|
202
|
+
by: 'id',
|
|
203
|
+
direction: 'desc',
|
|
138
204
|
} as IReqoreTableSort,
|
|
139
205
|
};
|
|
140
206
|
|
|
@@ -148,26 +214,26 @@ test("Sorting on <Table /> works properly", () => {
|
|
|
148
214
|
</ReqoreUIProvider>
|
|
149
215
|
);
|
|
150
216
|
|
|
151
|
-
const firstRow = document.querySelector(
|
|
152
|
-
const idCell = firstRow.querySelector(
|
|
217
|
+
const firstRow = document.querySelector('.reqore-table-row');
|
|
218
|
+
const idCell = firstRow.querySelector('.reqore-table-cell');
|
|
153
219
|
|
|
154
|
-
expect(idCell.textContent).toBe(
|
|
220
|
+
expect(idCell.textContent).toBe('99');
|
|
155
221
|
|
|
156
|
-
fireEvent.click(document.querySelectorAll(
|
|
222
|
+
fireEvent.click(document.querySelectorAll('.reqore-table-header-cell')[4]);
|
|
157
223
|
|
|
158
|
-
const ageCell = firstRow.querySelectorAll(
|
|
224
|
+
const ageCell = firstRow.querySelectorAll('.reqore-table-cell')[4];
|
|
159
225
|
|
|
160
|
-
expect(fn).toHaveBeenCalledWith({ by:
|
|
161
|
-
expect(ageCell.textContent).toBe(
|
|
226
|
+
expect(fn).toHaveBeenCalledWith({ by: 'age', direction: 'desc' });
|
|
227
|
+
expect(ageCell.textContent).toBe('99');
|
|
162
228
|
|
|
163
|
-
fireEvent.click(document.querySelectorAll(
|
|
229
|
+
fireEvent.click(document.querySelectorAll('.reqore-table-header-cell')[4]);
|
|
164
230
|
|
|
165
|
-
expect(fn).toHaveBeenLastCalledWith({ by:
|
|
166
|
-
expect(ageCell.textContent).toBe(
|
|
167
|
-
expect(idCell.textContent).toBe(
|
|
231
|
+
expect(fn).toHaveBeenLastCalledWith({ by: 'age', direction: 'asc' });
|
|
232
|
+
expect(ageCell.textContent).toBe('0');
|
|
233
|
+
expect(idCell.textContent).toBe('99');
|
|
168
234
|
});
|
|
169
235
|
|
|
170
|
-
test(
|
|
236
|
+
test('Rows on <Table /> can be selected', () => {
|
|
171
237
|
const data = {
|
|
172
238
|
...tableData,
|
|
173
239
|
selectable: true,
|
|
@@ -183,22 +249,22 @@ test("Rows on <Table /> can be selected", () => {
|
|
|
183
249
|
</ReqoreUIProvider>
|
|
184
250
|
);
|
|
185
251
|
|
|
186
|
-
const firstRow = document.querySelector(
|
|
187
|
-
const firstCheckCell = firstRow.querySelector(
|
|
252
|
+
const firstRow = document.querySelector('.reqore-table-row');
|
|
253
|
+
const firstCheckCell = firstRow.querySelector('.reqore-table-cell');
|
|
188
254
|
|
|
189
255
|
fireEvent.click(firstCheckCell);
|
|
190
256
|
|
|
191
|
-
expect(fn).toHaveBeenCalledWith([
|
|
257
|
+
expect(fn).toHaveBeenCalledWith(['Row-0']);
|
|
192
258
|
|
|
193
|
-
const secondRow = document.querySelectorAll(
|
|
194
|
-
const secondCheckCell = secondRow.querySelector(
|
|
259
|
+
const secondRow = document.querySelectorAll('.reqore-table-row')[1];
|
|
260
|
+
const secondCheckCell = secondRow.querySelector('.reqore-table-cell');
|
|
195
261
|
|
|
196
262
|
fireEvent.click(secondCheckCell);
|
|
197
263
|
|
|
198
|
-
expect(fn).toHaveBeenLastCalledWith([
|
|
264
|
+
expect(fn).toHaveBeenLastCalledWith(['Row-0', 'Row-1']);
|
|
199
265
|
});
|
|
200
266
|
|
|
201
|
-
test(
|
|
267
|
+
test('Rows on <Table /> cannot be selected if _selectId is missing', () => {
|
|
202
268
|
const data = {
|
|
203
269
|
...tableData,
|
|
204
270
|
selectable: true,
|
|
@@ -214,20 +280,20 @@ test("Rows on <Table /> cannot be selected if _selectId is missing", () => {
|
|
|
214
280
|
</ReqoreUIProvider>
|
|
215
281
|
);
|
|
216
282
|
|
|
217
|
-
const firstRow = document.querySelector(
|
|
218
|
-
const firstCheckCell = firstRow.querySelector(
|
|
283
|
+
const firstRow = document.querySelector('.reqore-table-row');
|
|
284
|
+
const firstCheckCell = firstRow.querySelector('.reqore-table-cell');
|
|
219
285
|
|
|
220
286
|
fireEvent.click(firstCheckCell);
|
|
221
287
|
|
|
222
|
-
const fourthRow = document.querySelectorAll(
|
|
223
|
-
const fourthCheckCell = fourthRow.querySelector(
|
|
288
|
+
const fourthRow = document.querySelectorAll('.reqore-table-row')[3];
|
|
289
|
+
const fourthCheckCell = fourthRow.querySelector('.reqore-table-cell');
|
|
224
290
|
|
|
225
291
|
fireEvent.click(fourthCheckCell);
|
|
226
292
|
|
|
227
293
|
expect(fn).toHaveBeenCalledTimes(1);
|
|
228
294
|
});
|
|
229
295
|
|
|
230
|
-
test(
|
|
296
|
+
test('Rows on <Table /> are all selected/deselected when clicking on header', () => {
|
|
231
297
|
const data = {
|
|
232
298
|
...tableData,
|
|
233
299
|
selectable: true,
|
|
@@ -243,8 +309,8 @@ test("Rows on <Table /> are all selected/deselected when clicking on header", ()
|
|
|
243
309
|
</ReqoreUIProvider>
|
|
244
310
|
);
|
|
245
311
|
|
|
246
|
-
const header = document.querySelector(
|
|
247
|
-
const firstHeaderCell = header.querySelector(
|
|
312
|
+
const header = document.querySelector('.reqore-table-header-wrapper');
|
|
313
|
+
const firstHeaderCell = header.querySelector('.reqore-table-header-cell');
|
|
248
314
|
|
|
249
315
|
fireEvent.click(firstHeaderCell);
|
|
250
316
|
|
|
@@ -258,8 +324,8 @@ test("Rows on <Table /> are all selected/deselected when clicking on header", ()
|
|
|
258
324
|
|
|
259
325
|
expect(fn).toHaveBeenLastCalledWith([]);
|
|
260
326
|
|
|
261
|
-
const firstRow = document.querySelector(
|
|
262
|
-
const firstCheckCell = firstRow.querySelector(
|
|
327
|
+
const firstRow = document.querySelector('.reqore-table-row');
|
|
328
|
+
const firstCheckCell = firstRow.querySelector('.reqore-table-cell');
|
|
263
329
|
|
|
264
330
|
fireEvent.click(firstCheckCell);
|
|
265
331
|
fireEvent.click(firstHeaderCell);
|
|
@@ -267,38 +333,38 @@ test("Rows on <Table /> are all selected/deselected when clicking on header", ()
|
|
|
267
333
|
expect(fn).toHaveBeenLastCalledWith(selectableData);
|
|
268
334
|
});
|
|
269
335
|
|
|
270
|
-
test(
|
|
336
|
+
test('Cells on <Table /> are interactive', () => {
|
|
271
337
|
const fn = jest.fn();
|
|
272
338
|
const data = {
|
|
273
339
|
...tableData,
|
|
274
340
|
columns: [
|
|
275
341
|
{
|
|
276
|
-
dataId:
|
|
277
|
-
header:
|
|
342
|
+
dataId: 'id',
|
|
343
|
+
header: 'ID',
|
|
278
344
|
width: 50,
|
|
279
|
-
align:
|
|
345
|
+
align: 'center',
|
|
280
346
|
sortable: true,
|
|
281
|
-
tooltip:
|
|
347
|
+
tooltip: 'Custom ID tooltip nice',
|
|
282
348
|
onCellClick: ({ id }) => {
|
|
283
349
|
fn(id);
|
|
284
350
|
},
|
|
285
351
|
},
|
|
286
352
|
{
|
|
287
|
-
header:
|
|
288
|
-
dataId:
|
|
353
|
+
header: 'Name',
|
|
354
|
+
dataId: 'name',
|
|
289
355
|
grow: 3,
|
|
290
356
|
columns: [
|
|
291
357
|
{
|
|
292
|
-
icon:
|
|
293
|
-
dataId:
|
|
294
|
-
header:
|
|
358
|
+
icon: 'SlideshowLine',
|
|
359
|
+
dataId: 'firstName',
|
|
360
|
+
header: 'First Name',
|
|
295
361
|
width: 150,
|
|
296
362
|
grow: 2,
|
|
297
363
|
},
|
|
298
364
|
{
|
|
299
|
-
icon:
|
|
300
|
-
dataId:
|
|
301
|
-
header:
|
|
365
|
+
icon: 'SlideshowLine',
|
|
366
|
+
dataId: 'lastName',
|
|
367
|
+
header: 'Last Name',
|
|
302
368
|
width: 150,
|
|
303
369
|
grow: 1,
|
|
304
370
|
sortable: true,
|
|
@@ -306,26 +372,26 @@ test("Cells on <Table /> are interactive", () => {
|
|
|
306
372
|
],
|
|
307
373
|
},
|
|
308
374
|
{
|
|
309
|
-
dataId:
|
|
310
|
-
header:
|
|
375
|
+
dataId: 'address',
|
|
376
|
+
header: 'Address',
|
|
311
377
|
width: 300,
|
|
312
378
|
grow: 2,
|
|
313
|
-
onClick: () => alert(
|
|
379
|
+
onClick: () => alert('clicked address'),
|
|
314
380
|
},
|
|
315
381
|
{
|
|
316
|
-
icon:
|
|
317
|
-
dataId:
|
|
318
|
-
header:
|
|
382
|
+
icon: 'User4Line',
|
|
383
|
+
dataId: 'age',
|
|
384
|
+
header: 'Really long age header',
|
|
319
385
|
width: 50,
|
|
320
|
-
align:
|
|
386
|
+
align: 'center',
|
|
321
387
|
sortable: true,
|
|
322
388
|
},
|
|
323
389
|
{
|
|
324
|
-
header:
|
|
325
|
-
dataId:
|
|
390
|
+
header: 'Data',
|
|
391
|
+
dataId: 'data',
|
|
326
392
|
columns: [
|
|
327
|
-
{ dataId:
|
|
328
|
-
{ dataId:
|
|
393
|
+
{ dataId: 'occupation', header: 'Ocuppation', width: 200 },
|
|
394
|
+
{ dataId: 'group', header: 'Group', width: 150 },
|
|
329
395
|
],
|
|
330
396
|
},
|
|
331
397
|
] as IReqoreTableColumn[],
|
|
@@ -339,8 +405,8 @@ test("Cells on <Table /> are interactive", () => {
|
|
|
339
405
|
</ReqoreUIProvider>
|
|
340
406
|
);
|
|
341
407
|
|
|
342
|
-
const firstRow = document.querySelector(
|
|
343
|
-
const firstCheckCell = firstRow.querySelector(
|
|
408
|
+
const firstRow = document.querySelector('.reqore-table-row');
|
|
409
|
+
const firstCheckCell = firstRow.querySelector('.reqore-table-cell');
|
|
344
410
|
|
|
345
411
|
fireEvent.click(firstCheckCell);
|
|
346
412
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumbs/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAIvC,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumbs/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAIvC,OAAO,EAKL,MAAM,EACP,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,uBAAuB,EAAE,aAAa,EAAgB,MAAM,uBAAuB,CAAC;AAG7F,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAIpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAI9C,MAAM,WAAW,qBAAqB;IACpC,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,KAAK,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;IAClC,QAAQ,CAAC,EAAE;QACT,IAAI,EAAE,mBAAmB,EAAE,CAAC;QAC5B,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,GAAG,CAAC;QACpC,SAAS,EAAE,MAAM,CAAC;QAClB,eAAe,CAAC,EAAE,aAAa,CAAC;KACjC,CAAC;IACF,WAAW,CAAC,EAAE,uBAAuB,CAAC;CACvC;AAED,MAAM,WAAW,uBAAwB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACnF,KAAK,EAAE,qBAAqB,EAAE,CAAC;IAC/B,YAAY,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAE3B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,uBAAuB,CAAC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAsFD,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAoHxD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
|
|
@@ -75,7 +75,7 @@ var item_2 = __importDefault(require("./item"));
|
|
|
75
75
|
var StyledReqoreBreadcrumbs = styled_components_1["default"].div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
76
76
|
var _b, _c, _d;
|
|
77
77
|
var theme = _a.theme, flat = _a.flat, size = _a.size;
|
|
78
|
-
return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n height: ", "px;\n margin: ", "px 0;\n display: flex;\n padding: 0
|
|
78
|
+
return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n height: ", "px;\n margin: ", "px 0;\n display: flex;\n padding: 0 ", "px;\n justify-content: space-between;\n border-bottom: ", ";\n background-color: ", ";\n\n > div {\n height: 100%;\n display: flex;\n align-items: center;\n\n > * {\n color: ", ";\n }\n\n ", " {\n flex: 1;\n border-bottom: 0;\n }\n\n &:first-child {\n overflow: hidden;\n flex: 1;\n }\n }\n "], ["\n width: 100%;\n height: ", "px;\n margin: ", "px 0;\n display: flex;\n padding: 0 ", "px;\n justify-content: space-between;\n border-bottom: ", ";\n background-color: ", ";\n\n > div {\n height: 100%;\n display: flex;\n align-items: center;\n\n > * {\n color: ", ";\n }\n\n ", " {\n flex: 1;\n border-bottom: 0;\n }\n\n &:first-child {\n overflow: hidden;\n flex: 1;\n }\n }\n "])), sizes_1.TABS_SIZE_TO_PX[size], sizes_1.MARGIN_FROM_SIZE[size], sizes_1.PADDING_FROM_SIZE[size], flat ? 0 : "1px solid " + (0, colors_1.changeLightness)(theme.main, 0.05), function (_a) {
|
|
79
79
|
var _b;
|
|
80
80
|
var theme = _a.theme;
|
|
81
81
|
return ((_b = theme.breadcrumbs) === null || _b === void 0 ? void 0 : _b.main) || 'transparent';
|
|
@@ -125,7 +125,7 @@ var ReqoreBreadcrumbs = function (_a) {
|
|
|
125
125
|
var renderItem = function (item, index) {
|
|
126
126
|
var _a;
|
|
127
127
|
if ((0, lodash_1.isArray)(item)) {
|
|
128
|
-
return ((0, jsx_runtime_1.jsxs)(react_2["default"].Fragment, { children: [(0, jsx_runtime_1.jsx)(Icon_1["default"], { icon: 'ArrowRightSLine', size:
|
|
128
|
+
return ((0, jsx_runtime_1.jsxs)(react_2["default"].Fragment, { children: [(0, jsx_runtime_1.jsx)(Icon_1["default"], { icon: 'ArrowRightSLine', size: sizes_1.TEXT_FROM_SIZE[size] + "px" }, 'icon' + index), (0, jsx_runtime_1.jsx)(__1.ReqorePopover, { component: item_2["default"], componentProps: {
|
|
129
129
|
icon: 'MoreFill',
|
|
130
130
|
tooltip: 'Show more...',
|
|
131
131
|
interactive: true
|
|
@@ -135,9 +135,9 @@ var ReqoreBreadcrumbs = function (_a) {
|
|
|
135
135
|
}) }, void 0) }, index)] }, index));
|
|
136
136
|
}
|
|
137
137
|
if (item.withTabs) {
|
|
138
|
-
return ((0, jsx_runtime_1.jsxs)(react_2["default"].Fragment, { children: [(0, jsx_runtime_1.jsx)(Icon_1["default"], { icon: 'ArrowRightSLine', size:
|
|
138
|
+
return ((0, jsx_runtime_1.jsxs)(react_2["default"].Fragment, { children: [(0, jsx_runtime_1.jsx)(Icon_1["default"], { icon: 'ArrowRightSLine', size: sizes_1.TEXT_FROM_SIZE[size] + "px", margin: 'both' }, 'icon' + index), (0, jsx_runtime_1.jsx)(list_1["default"], { tabs: item.withTabs.tabs, onTabChange: item.withTabs.onTabChange, activeTab: item.withTabs.activeTab, activeTabIntent: item.withTabs.activeTabIntent, parentBackground: (_a = theme.breadcrumbs) === null || _a === void 0 ? void 0 : _a.main, flat: flat, size: size }, void 0)] }, index));
|
|
139
139
|
}
|
|
140
|
-
return ((0, jsx_runtime_1.jsxs)(react_2["default"].Fragment, { children: [index !== 0 && ((0, jsx_runtime_1.jsx)(Icon_1["default"], { icon: 'ArrowRightSLine', size:
|
|
140
|
+
return ((0, jsx_runtime_1.jsxs)(react_2["default"].Fragment, { children: [index !== 0 && ((0, jsx_runtime_1.jsx)(Icon_1["default"], { icon: 'ArrowRightSLine', size: sizes_1.TEXT_FROM_SIZE[size] + "px", margin: 'both' }, 'icon' + index)), (0, react_1.createElement)(item_2["default"], __assign({}, item, { key: index, customTheme: customTheme, size: size }))] }, index));
|
|
141
141
|
};
|
|
142
142
|
return ((0, jsx_runtime_1.jsxs)(StyledReqoreBreadcrumbs, __assign({}, rest, { className: (rest.className || '') + " reqore-breadcrumbs-wrapper", ref: ref, flat: flat, theme: theme, size: size }, { children: [(0, jsx_runtime_1.jsx)("div", { children: transformedItems.map(function (item, index) {
|
|
143
143
|
return renderItem(item, index);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Breadcrumbs/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,iCAAiC;AACjC,6CAAuC;AACvC,uCAAuC;AACvC,qEAAgD;AAChD,2BAAsC;AACtC,+
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Breadcrumbs/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"item.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumbs/item.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,qBAAqB,EAAE,MAAM,GAAG,CAAC;AAC1C,OAAO,
|
|
1
|
+
{"version":3,"file":"item.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumbs/item.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,qBAAqB,EAAE,MAAM,GAAG,CAAC;AAC1C,OAAO,EAAqC,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAClF,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAMrD,MAAM,WAAW,0BAA2B,SAAQ,qBAAqB;IACvE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,0BAA2B,SAAQ,0BAA0B;IAC5E,KAAK,EAAE,YAAY,CAAC;CACrB;AAkED,QAAA,MAAM,qBAAqB,iFAUxB,0BAA0B,gBA0B5B,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
|
|
@@ -52,7 +52,7 @@ var StyledBreadcrumbItem = styled_components_1["default"].div(templateObject_4 |
|
|
|
52
52
|
(((_d = theme.breadcrumbs) === null || _d === void 0 ? void 0 : _d.main)
|
|
53
53
|
? (0, colors_1.getReadableColorFrom)(theme.breadcrumbs.main, true)
|
|
54
54
|
: (0, colors_1.getReadableColor)(theme, undefined, undefined, true));
|
|
55
|
-
return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n height: 100%;\n justify-content: space-evenly;\n align-items: center;\n padding: 0
|
|
55
|
+
return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n height: 100%;\n justify-content: space-evenly;\n align-items: center;\n padding: 0 ", "px;\n transition: background-color 0.15s ease-out;\n font-size: ", "px;\n font-weight: 450;\n border-bottom: 2px solid transparent;\n\n * {\n color: ", ";\n }\n\n ", "\n\n ", "\n\n a:hover {\n color: ", ";\n }\n "], ["\n display: flex;\n height: 100%;\n justify-content: space-evenly;\n align-items: center;\n padding: 0 ", "px;\n transition: background-color 0.15s ease-out;\n font-size: ", "px;\n font-weight: 450;\n border-bottom: 2px solid transparent;\n\n * {\n color: ", ";\n }\n\n ", "\n\n ", "\n\n a:hover {\n color: ", ";\n }\n "])), sizes_1.PADDING_FROM_SIZE[size], sizes_1.TEXT_FROM_SIZE[size], textColor, active && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n * {\n font-weight: 600;\n color: ", ";\n }\n "], ["\n * {\n font-weight: 600;\n color: ", ";\n }\n "])), ((_f = (_e = theme.breadcrumbs) === null || _e === void 0 ? void 0 : _e.item) === null || _f === void 0 ? void 0 : _f.activeColor) ||
|
|
56
56
|
(((_g = theme.breadcrumbs) === null || _g === void 0 ? void 0 : _g.main)
|
|
57
57
|
? (0, colors_1.getReadableColorFrom)(theme.breadcrumbs.main, true)
|
|
58
58
|
: (0, colors_1.getReadableColor)(theme, undefined, undefined))), interactive && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n cursor: pointer;\n &:hover {\n color: ", ";\n background-color: ", ";\n }\n "], ["\n cursor: pointer;\n &:hover {\n color: ", ";\n background-color: ", ";\n }\n "])), ((_j = (_h = theme.breadcrumbs) === null || _h === void 0 ? void 0 : _h.item) === null || _j === void 0 ? void 0 : _j.hoverColor) ||
|
|
@@ -69,7 +69,7 @@ var ReqoreBreadcrumbsItem = function (_a) {
|
|
|
69
69
|
var Element = as || 'span';
|
|
70
70
|
var theme = (0, useTheme_1.useReqoreTheme)('breadcrumbs', customTheme);
|
|
71
71
|
(0, usePopover_1["default"])({ targetElement: ref, content: tooltip, show: !!tooltip });
|
|
72
|
-
return ((0, jsx_runtime_1.jsxs)(StyledBreadcrumbItem, __assign({ ref: setRef, active: active, interactive: interactive || !!(props === null || props === void 0 ? void 0 : props.onClick), className: 'reqore-breadcrumbs-item', theme: theme, size: size }, { children: [icon && (0, jsx_runtime_1.jsx)(Icon_1["default"], { icon: icon, size:
|
|
72
|
+
return ((0, jsx_runtime_1.jsxs)(StyledBreadcrumbItem, __assign({ ref: setRef, active: active, interactive: interactive || !!(props === null || props === void 0 ? void 0 : props.onClick), className: 'reqore-breadcrumbs-item', theme: theme, size: size }, { children: [icon && ((0, jsx_runtime_1.jsx)(Icon_1["default"], { icon: icon, size: sizes_1.TEXT_FROM_SIZE[size] + "px", margin: label ? 'right' : undefined }, void 0)), label && (0, jsx_runtime_1.jsx)(Element, __assign({}, props, { children: label }), void 0)] }), void 0));
|
|
73
73
|
};
|
|
74
74
|
exports["default"] = ReqoreBreadcrumbsItem;
|
|
75
75
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"item.js","sourceRoot":"","sources":["../../../src/components/Breadcrumbs/item.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+BAAiC;AACjC,qEAAgD;AAEhD,+
|
|
1
|
+
{"version":3,"file":"item.js","sourceRoot":"","sources":["../../../src/components/Breadcrumbs/item.tsx"],"names":[],"mappings":"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"}
|
|
@@ -15,8 +15,10 @@ export interface IReqoreButtonProps extends React.HTMLAttributes<HTMLButtonEleme
|
|
|
15
15
|
intent?: IReqoreIntent;
|
|
16
16
|
active?: boolean;
|
|
17
17
|
flat?: boolean;
|
|
18
|
+
rightIcon?: IReqoreIconName;
|
|
19
|
+
color?: string;
|
|
18
20
|
}
|
|
19
|
-
export interface IReqoreButtonStyle extends IReqoreButtonProps {
|
|
21
|
+
export interface IReqoreButtonStyle extends Omit<IReqoreButtonProps, 'intent'> {
|
|
20
22
|
theme: IReqoreTheme;
|
|
21
23
|
}
|
|
22
24
|
export declare const StyledActiveContent: any;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,OAAO,KAAyC,MAAM,OAAO,CAAC;AAE9D,OAAO,EAKL,MAAM,EACP,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAKpE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGpD,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC;IACjF,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,kBAAkB,EAAE,QAAQ,CAAC;IAC5E,KAAK,EAAE,YAAY,CAAC;CACrB;AAUD,eAAO,MAAM,mBAAmB,KAM/B,CAAC;AAEF,eAAO,MAAM,qBAAqB,KAIjC,CAAC;AAEF,eAAO,MAAM,sBAAsB,KAGlC,CAAC;AAEF,eAAO,MAAM,YAAY,KAuHxB,CAAC;AAEF,QAAA,MAAM,YAAY,oFAyEjB,CAAC;AAEF,eAAe,YAAY,CAAC"}
|