@ornery/ui-grid-react 0.1.8 → 0.1.10
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/demo/main.tsx +4 -2
- package/dist/UiGrid.d.ts.map +1 -1
- package/dist/index.js +149 -27
- package/dist/index.mjs +150 -27
- package/dist/ui-grid.css +168 -40
- package/dist/useGridState.d.ts +5 -0
- package/dist/useGridState.d.ts.map +1 -1
- package/package.json +2 -2
- package/src/UiGrid.tsx +22 -6
- package/src/ui-grid.css +168 -40
- package/src/useGridState.ts +168 -20
package/dist/useGridState.d.ts
CHANGED
|
@@ -30,6 +30,7 @@ export interface UseGridStateResult {
|
|
|
30
30
|
paginationSelectedPageSize: number;
|
|
31
31
|
rowSize: number;
|
|
32
32
|
viewportHeightPx: string;
|
|
33
|
+
autoViewportHeight: number | null;
|
|
33
34
|
headerLabel: (column: GridColumnDef) => string;
|
|
34
35
|
isGroupItem: (item: DisplayItem) => item is GroupItem;
|
|
35
36
|
isExpandableItem: (item: DisplayItem) => item is ExpandableItem;
|
|
@@ -45,6 +46,7 @@ export interface UseGridStateResult {
|
|
|
45
46
|
groupDisclosureLabel: (item: GroupItem) => string;
|
|
46
47
|
displayValue: (row: GridRow, column: GridColumnDef) => string;
|
|
47
48
|
isFocusedCell: (row: GridRow, column: GridColumnDef) => boolean;
|
|
49
|
+
isFocusedRow: (row: GridRow) => boolean;
|
|
48
50
|
isEditingCell: (row: GridRow, column: GridColumnDef) => boolean;
|
|
49
51
|
editorInputType: (column: GridColumnDef) => string;
|
|
50
52
|
cellContext: (row: GridRow, column: GridColumnDef) => GridCellTemplateContext;
|
|
@@ -100,6 +102,9 @@ export interface UseGridStateResult {
|
|
|
100
102
|
toggleTreeRow: (row: GridRow, event?: React.MouseEvent) => void;
|
|
101
103
|
moveColumn: (fromIndex: number, toIndex: number) => void;
|
|
102
104
|
moveVisibleColumn: (columnName: string, targetColumnName: string) => void;
|
|
105
|
+
canResizeColumns: () => boolean;
|
|
106
|
+
handleHeaderResizeMouseDown: (column: GridColumnDef, event: React.MouseEvent) => void;
|
|
107
|
+
autoSizeColumn: (column: GridColumnDef, event: React.MouseEvent) => void;
|
|
103
108
|
nextPage: () => void;
|
|
104
109
|
previousPage: () => void;
|
|
105
110
|
onPageSizeChange: (value: string) => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useGridState.d.ts","sourceRoot":"","sources":["../src/useGridState.ts"],"names":[],"mappings":"AASA,OAAO,EAEL,SAAS,EAET,WAAW,EACX,aAAa,EACb,OAAO,EAEP,mBAAmB,EACnB,gBAAgB,EAChB,UAAU,EACV,SAAS,
|
|
1
|
+
{"version":3,"file":"useGridState.d.ts","sourceRoot":"","sources":["../src/useGridState.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ornery/ui-grid-react",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.10",
|
|
4
4
|
"description": "React wrapper for @ornery/ui-grid-core",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.mjs",
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
"./styles": "./dist/ui-grid.css"
|
|
15
15
|
},
|
|
16
16
|
"peerDependencies": {
|
|
17
|
-
"@ornery/ui-grid-core": "
|
|
17
|
+
"@ornery/ui-grid-core": "0.1.10",
|
|
18
18
|
"react": "^18.0.0 || ^19.0.0",
|
|
19
19
|
"react-dom": "^18.0.0 || ^19.0.0"
|
|
20
20
|
},
|
package/src/UiGrid.tsx
CHANGED
|
@@ -41,6 +41,7 @@ export function UiGrid({
|
|
|
41
41
|
virtualizationEnabled,
|
|
42
42
|
rowSize,
|
|
43
43
|
editingValue,
|
|
44
|
+
autoViewportHeight,
|
|
44
45
|
sortingFeature,
|
|
45
46
|
filteringFeature,
|
|
46
47
|
groupingFeature,
|
|
@@ -59,10 +60,12 @@ export function UiGrid({
|
|
|
59
60
|
const [headerStickyHeight, setHeaderStickyHeight] = React.useState(0);
|
|
60
61
|
const [filterStickyHeight, setFilterStickyHeight] = React.useState(0);
|
|
61
62
|
const stickyChromeHeight = headerStickyHeight + filterStickyHeight;
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
63
|
+
// Prefer the explicit viewportHeight, otherwise fall back to the container
|
|
64
|
+
// height measured by the autoresize observer so the grid fills its parent
|
|
65
|
+
// by default. The 560 fallback only applies before the first measurement.
|
|
66
|
+
const resolvedViewportHeight =
|
|
67
|
+
options.viewportHeight ?? (autoViewportHeight && autoViewportHeight > 0 ? autoViewportHeight : 560);
|
|
68
|
+
const bodyViewportHeight = Math.max(rowSize, resolvedViewportHeight - stickyChromeHeight);
|
|
66
69
|
|
|
67
70
|
const virtualScroll = useVirtualScroll({
|
|
68
71
|
itemCount: displayItems.length,
|
|
@@ -74,7 +77,7 @@ export function UiGrid({
|
|
|
74
77
|
const [openPinMenuColumn, setOpenPinMenuColumn] = React.useState<string | null>(null);
|
|
75
78
|
const [draggedColumnName, setDraggedColumnName] = React.useState<string | null>(null);
|
|
76
79
|
const [dropTargetColumnName, setDropTargetColumnName] = React.useState<string | null>(null);
|
|
77
|
-
const scrollContainerHeight = `${
|
|
80
|
+
const scrollContainerHeight = `${resolvedViewportHeight}px`;
|
|
78
81
|
|
|
79
82
|
function renderHeaderContent(column: GridColumnDef): React.ReactNode {
|
|
80
83
|
const value = state.headerLabel(column);
|
|
@@ -414,6 +417,7 @@ export function UiGrid({
|
|
|
414
417
|
if (column.align === 'center') classes.push('align-center');
|
|
415
418
|
if (column.align === 'end') classes.push('align-end');
|
|
416
419
|
if (state.isFocusedCell(item.row, column)) classes.push('cell-focused');
|
|
420
|
+
if (state.isFocusedRow(item.row)) classes.push('row-focused');
|
|
417
421
|
if (cellEditFeature && state.isEditingCell(item.row, column)) classes.push('cell-editing');
|
|
418
422
|
return classes.join(' ');
|
|
419
423
|
}
|
|
@@ -474,7 +478,7 @@ export function UiGrid({
|
|
|
474
478
|
key={column.name}
|
|
475
479
|
className={`header-cell ui-grid-header-cell${sortingFeature && state.sortDirection(column) !== 'none' ? ' is-active' : ''}${pinned ? ' is-pinned' : ''}${pinMenuOpen ? ' is-pin-menu-open' : ''}${draggedColumnName === column.name ? ' is-dragging' : ''}${dropTargetColumnName === column.name ? ' is-drag-target' : ''}`}
|
|
476
480
|
data-part="header-cell"
|
|
477
|
-
|
|
481
|
+
data-col-name={column.name}
|
|
478
482
|
aria-sort={sortingFeature ? (state.sortAriaSort(column) as any) : undefined}
|
|
479
483
|
draggable={columnMovingFeature}
|
|
480
484
|
onDragStart={(event) => handleHeaderDragStart(column, event)}
|
|
@@ -596,6 +600,18 @@ export function UiGrid({
|
|
|
596
600
|
</div>
|
|
597
601
|
)}
|
|
598
602
|
</div>
|
|
603
|
+
|
|
604
|
+
{state.canResizeColumns() && (
|
|
605
|
+
<button
|
|
606
|
+
type="button"
|
|
607
|
+
className="column-resizer"
|
|
608
|
+
data-col-name={column.name}
|
|
609
|
+
aria-label={`Resize ${state.headerLabel(column)} column`}
|
|
610
|
+
title="Drag to resize, double-click to auto fit"
|
|
611
|
+
onMouseDown={(event) => state.handleHeaderResizeMouseDown(column, event)}
|
|
612
|
+
onDoubleClick={(event) => state.autoSizeColumn(column, event)}
|
|
613
|
+
/>
|
|
614
|
+
)}
|
|
599
615
|
</div>
|
|
600
616
|
);
|
|
601
617
|
})}
|
package/src/ui-grid.css
CHANGED
|
@@ -1,53 +1,142 @@
|
|
|
1
1
|
.ui-grid-host {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
--
|
|
10
|
-
--
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
--
|
|
15
|
-
--
|
|
16
|
-
--
|
|
17
|
-
--
|
|
18
|
-
--
|
|
19
|
-
--
|
|
20
|
-
--
|
|
21
|
-
--
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
--
|
|
26
|
-
--
|
|
27
|
-
--
|
|
28
|
-
|
|
29
|
-
--app-ui-grid-
|
|
30
|
-
|
|
2
|
+
/* Stretch to fill the parent so the autoresize observer can measure a
|
|
3
|
+
deterministic height. Consumers can override these properties to opt
|
|
4
|
+
back into intrinsic sizing. */
|
|
5
|
+
display: flex;
|
|
6
|
+
flex-direction: column;
|
|
7
|
+
min-height: 0;
|
|
8
|
+
height: 100%;
|
|
9
|
+
--_ui-grid-border-color: var(--ui-grid-border-color, var(--app-ui-grid-border-color, #d4d4d8));
|
|
10
|
+
--_ui-grid-header-background: var(
|
|
11
|
+
--ui-grid-header-background,
|
|
12
|
+
var(--app-ui-grid-header-background, #f3f4f6)
|
|
13
|
+
);
|
|
14
|
+
--_ui-grid-row-odd: var(--ui-grid-row-odd, var(--app-ui-grid-row-odd, #fcfcfd));
|
|
15
|
+
--_ui-grid-row-even: var(--ui-grid-row-even, var(--app-ui-grid-row-even, #f7f7f8));
|
|
16
|
+
--_ui-grid-row-hover: var(--ui-grid-row-hover, var(--app-ui-grid-row-hover, #eef4ff));
|
|
17
|
+
--_ui-grid-cell-color: var(--ui-grid-cell-color, var(--app-ui-grid-cell-color, #111827));
|
|
18
|
+
--_ui-grid-muted-color: var(--ui-grid-muted-color, var(--app-ui-grid-muted-color, #6b7280));
|
|
19
|
+
--_ui-grid-surface: var(--ui-grid-surface, var(--app-ui-grid-surface, #ffffff));
|
|
20
|
+
--_ui-grid-radius: var(--ui-grid-radius, var(--app-ui-grid-radius, 4px));
|
|
21
|
+
--_ui-grid-shadow: var(
|
|
22
|
+
--ui-grid-shadow,
|
|
23
|
+
var(--app-ui-grid-shadow, 0 10px 24px rgba(15, 23, 42, 0.08))
|
|
24
|
+
);
|
|
25
|
+
--_ui-grid-header-weight: var(--ui-grid-header-weight, var(--app-ui-grid-header-weight, 700));
|
|
26
|
+
--_ui-grid-accent: var(--ui-grid-accent, var(--app-ui-grid-accent, #2563eb));
|
|
27
|
+
--_ui-grid-group-background: var(
|
|
28
|
+
--ui-grid-group-background,
|
|
29
|
+
var(--app-ui-grid-group-background, #eceff3)
|
|
30
|
+
);
|
|
31
|
+
--_ui-grid-status-active-bg: var(
|
|
32
|
+
--ui-grid-status-active-bg,
|
|
33
|
+
var(--app-ui-grid-status-active-bg, rgba(22, 163, 74, 0.14))
|
|
34
|
+
);
|
|
35
|
+
--_ui-grid-status-active-color: var(
|
|
36
|
+
--ui-grid-status-active-color,
|
|
37
|
+
var(--app-ui-grid-status-active-color, #166534)
|
|
38
|
+
);
|
|
39
|
+
--_ui-grid-status-expansion-bg: var(
|
|
40
|
+
--ui-grid-status-expansion-bg,
|
|
41
|
+
var(--app-ui-grid-status-expansion-bg, rgba(37, 99, 235, 0.14))
|
|
42
|
+
);
|
|
43
|
+
--_ui-grid-status-expansion-color: var(
|
|
44
|
+
--ui-grid-status-expansion-color,
|
|
45
|
+
var(--app-ui-grid-status-expansion-color, #1d4ed8)
|
|
46
|
+
);
|
|
47
|
+
--_ui-grid-status-enterprise-bg: var(
|
|
48
|
+
--ui-grid-status-enterprise-bg,
|
|
49
|
+
var(--app-ui-grid-status-enterprise-bg, rgba(15, 118, 110, 0.14))
|
|
50
|
+
);
|
|
51
|
+
--_ui-grid-status-enterprise-color: var(
|
|
52
|
+
--ui-grid-status-enterprise-color,
|
|
53
|
+
var(--app-ui-grid-status-enterprise-color, #115e59)
|
|
31
54
|
);
|
|
32
|
-
--
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
--app-ui-grid-pin-control-transition-duration,
|
|
36
|
-
160ms
|
|
55
|
+
--_ui-grid-status-pilot-bg: var(
|
|
56
|
+
--ui-grid-status-pilot-bg,
|
|
57
|
+
var(--app-ui-grid-status-pilot-bg, rgba(234, 88, 12, 0.14))
|
|
37
58
|
);
|
|
38
|
-
--
|
|
39
|
-
--
|
|
40
|
-
|
|
59
|
+
--_ui-grid-status-pilot-color: var(
|
|
60
|
+
--ui-grid-status-pilot-color,
|
|
61
|
+
var(--app-ui-grid-status-pilot-color, #c2410c)
|
|
62
|
+
);
|
|
63
|
+
--_ui-grid-pin-menu-open-z-index: var(
|
|
64
|
+
--ui-grid-pin-menu-open-z-index,
|
|
65
|
+
var(--app-ui-grid-pin-menu-open-z-index, 8)
|
|
66
|
+
);
|
|
67
|
+
--_ui-grid-pin-menu-z-index: var(--ui-grid-pin-menu-z-index, var(--app-ui-grid-pin-menu-z-index, 20));
|
|
68
|
+
--_ui-grid-pin-menu-gap: var(--ui-grid-pin-menu-gap, var(--app-ui-grid-pin-menu-gap, 0.25rem));
|
|
69
|
+
--_ui-grid-pin-menu-padding: var(
|
|
70
|
+
--ui-grid-pin-menu-padding,
|
|
71
|
+
var(--app-ui-grid-pin-menu-padding, 0.25rem)
|
|
72
|
+
);
|
|
73
|
+
--_ui-grid-pin-menu-radius: var(--ui-grid-pin-menu-radius, var(--app-ui-grid-pin-menu-radius, 999px));
|
|
74
|
+
--_ui-grid-pin-menu-shadow: var(
|
|
75
|
+
--ui-grid-pin-menu-shadow,
|
|
76
|
+
var(
|
|
77
|
+
--app-ui-grid-pin-menu-shadow,
|
|
78
|
+
0 10px 24px color-mix(in srgb, var(--_ui-grid-cell-color) 10%, transparent)
|
|
79
|
+
)
|
|
80
|
+
);
|
|
81
|
+
--_ui-grid-pin-menu-action-size: var(
|
|
82
|
+
--ui-grid-pin-menu-action-size,
|
|
83
|
+
var(--app-ui-grid-pin-menu-action-size, 1.75rem)
|
|
84
|
+
);
|
|
85
|
+
--_ui-grid-pin-control-collapsed-size: var(
|
|
86
|
+
--ui-grid-pin-control-collapsed-size,
|
|
87
|
+
var(--app-ui-grid-pin-control-collapsed-size, 1px)
|
|
88
|
+
);
|
|
89
|
+
--_ui-grid-pin-control-transition-duration: var(
|
|
90
|
+
--ui-grid-pin-control-transition-duration,
|
|
91
|
+
var(--app-ui-grid-pin-control-transition-duration, 160ms)
|
|
92
|
+
);
|
|
93
|
+
--_ui-grid-pin-control-transition-easing: var(
|
|
94
|
+
--ui-grid-pin-control-transition-easing,
|
|
95
|
+
var(--app-ui-grid-pin-control-transition-easing, cubic-bezier(0.22, 1, 0.36, 1))
|
|
96
|
+
);
|
|
97
|
+
--_ui-grid-pin-menu-scale-closed: var(
|
|
98
|
+
--ui-grid-pin-menu-scale-closed,
|
|
99
|
+
var(--app-ui-grid-pin-menu-scale-closed, 0.72)
|
|
41
100
|
);
|
|
42
|
-
--ui-grid-pin-menu-scale-closed: var(--app-ui-grid-pin-menu-scale-closed, 0.72);
|
|
43
101
|
display: block;
|
|
44
|
-
color: var(--
|
|
102
|
+
color: var(--_ui-grid-cell-color);
|
|
45
103
|
}
|
|
46
104
|
|
|
47
|
-
.ui-grid-host,
|
|
48
105
|
.ui-grid-host *,
|
|
49
106
|
.ui-grid-host *::before,
|
|
50
107
|
.ui-grid-host *::after {
|
|
108
|
+
--ui-grid-border-color: var(--_ui-grid-border-color);
|
|
109
|
+
--ui-grid-header-background: var(--_ui-grid-header-background);
|
|
110
|
+
--ui-grid-row-odd: var(--_ui-grid-row-odd);
|
|
111
|
+
--ui-grid-row-even: var(--_ui-grid-row-even);
|
|
112
|
+
--ui-grid-row-hover: var(--_ui-grid-row-hover);
|
|
113
|
+
--ui-grid-cell-color: var(--_ui-grid-cell-color);
|
|
114
|
+
--ui-grid-muted-color: var(--_ui-grid-muted-color);
|
|
115
|
+
--ui-grid-surface: var(--_ui-grid-surface);
|
|
116
|
+
--ui-grid-radius: var(--_ui-grid-radius);
|
|
117
|
+
--ui-grid-shadow: var(--_ui-grid-shadow);
|
|
118
|
+
--ui-grid-header-weight: var(--_ui-grid-header-weight);
|
|
119
|
+
--ui-grid-accent: var(--_ui-grid-accent);
|
|
120
|
+
--ui-grid-group-background: var(--_ui-grid-group-background);
|
|
121
|
+
--ui-grid-status-active-bg: var(--_ui-grid-status-active-bg);
|
|
122
|
+
--ui-grid-status-active-color: var(--_ui-grid-status-active-color);
|
|
123
|
+
--ui-grid-status-expansion-bg: var(--_ui-grid-status-expansion-bg);
|
|
124
|
+
--ui-grid-status-expansion-color: var(--_ui-grid-status-expansion-color);
|
|
125
|
+
--ui-grid-status-enterprise-bg: var(--_ui-grid-status-enterprise-bg);
|
|
126
|
+
--ui-grid-status-enterprise-color: var(--_ui-grid-status-enterprise-color);
|
|
127
|
+
--ui-grid-status-pilot-bg: var(--_ui-grid-status-pilot-bg);
|
|
128
|
+
--ui-grid-status-pilot-color: var(--_ui-grid-status-pilot-color);
|
|
129
|
+
--ui-grid-pin-menu-open-z-index: var(--_ui-grid-pin-menu-open-z-index);
|
|
130
|
+
--ui-grid-pin-menu-z-index: var(--_ui-grid-pin-menu-z-index);
|
|
131
|
+
--ui-grid-pin-menu-gap: var(--_ui-grid-pin-menu-gap);
|
|
132
|
+
--ui-grid-pin-menu-padding: var(--_ui-grid-pin-menu-padding);
|
|
133
|
+
--ui-grid-pin-menu-radius: var(--_ui-grid-pin-menu-radius);
|
|
134
|
+
--ui-grid-pin-menu-shadow: var(--_ui-grid-pin-menu-shadow);
|
|
135
|
+
--ui-grid-pin-menu-action-size: var(--_ui-grid-pin-menu-action-size);
|
|
136
|
+
--ui-grid-pin-control-collapsed-size: var(--_ui-grid-pin-control-collapsed-size);
|
|
137
|
+
--ui-grid-pin-control-transition-duration: var(--_ui-grid-pin-control-transition-duration);
|
|
138
|
+
--ui-grid-pin-control-transition-easing: var(--_ui-grid-pin-control-transition-easing);
|
|
139
|
+
--ui-grid-pin-menu-scale-closed: var(--_ui-grid-pin-menu-scale-closed);
|
|
51
140
|
box-sizing: border-box;
|
|
52
141
|
}
|
|
53
142
|
|
|
@@ -139,6 +228,12 @@
|
|
|
139
228
|
border: 1px solid var(--ui-grid-border-color);
|
|
140
229
|
box-shadow: var(--ui-grid-shadow);
|
|
141
230
|
overflow: hidden;
|
|
231
|
+
/* Allow the frame to grow inside the flexed host so the body grid can fill
|
|
232
|
+
the available height when no explicit viewportHeight is set. */
|
|
233
|
+
display: flex;
|
|
234
|
+
flex-direction: column;
|
|
235
|
+
flex: 1 1 auto;
|
|
236
|
+
min-height: 0;
|
|
142
237
|
}
|
|
143
238
|
|
|
144
239
|
.metrics-strip {
|
|
@@ -231,6 +326,7 @@
|
|
|
231
326
|
background: var(--ui-grid-header-background);
|
|
232
327
|
font-weight: var(--ui-grid-header-weight);
|
|
233
328
|
align-items: center;
|
|
329
|
+
position: relative;
|
|
234
330
|
}
|
|
235
331
|
|
|
236
332
|
.header-cell[draggable='true'] {
|
|
@@ -255,6 +351,38 @@
|
|
|
255
351
|
z-index: var(--ui-grid-pin-menu-open-z-index);
|
|
256
352
|
}
|
|
257
353
|
|
|
354
|
+
.column-resizer {
|
|
355
|
+
position: absolute;
|
|
356
|
+
top: 0;
|
|
357
|
+
right: -4px;
|
|
358
|
+
width: 8px;
|
|
359
|
+
height: 100%;
|
|
360
|
+
padding: 0;
|
|
361
|
+
border: 0;
|
|
362
|
+
background: transparent;
|
|
363
|
+
cursor: col-resize;
|
|
364
|
+
z-index: 5;
|
|
365
|
+
}
|
|
366
|
+
|
|
367
|
+
.column-resizer::after {
|
|
368
|
+
content: '';
|
|
369
|
+
position: absolute;
|
|
370
|
+
top: 20%;
|
|
371
|
+
bottom: 20%;
|
|
372
|
+
left: 50%;
|
|
373
|
+
width: 2px;
|
|
374
|
+
transform: translateX(-50%);
|
|
375
|
+
border-radius: 999px;
|
|
376
|
+
background: color-mix(in srgb, var(--ui-grid-border-color, #888) 80%, transparent);
|
|
377
|
+
opacity: 0;
|
|
378
|
+
transition: opacity 120ms ease;
|
|
379
|
+
}
|
|
380
|
+
|
|
381
|
+
.header-cell:hover .column-resizer::after,
|
|
382
|
+
.column-resizer:focus-visible::after {
|
|
383
|
+
opacity: 1;
|
|
384
|
+
}
|
|
385
|
+
|
|
258
386
|
.header-label {
|
|
259
387
|
min-width: 0;
|
|
260
388
|
display: block;
|