igniteui-grid-lite 0.0.1
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/LICENSE +9 -0
- package/README.md +17 -0
- package/components/cell.d.ts +35 -0
- package/components/cell.js +47 -0
- package/components/cell.js.map +1 -0
- package/components/filter-row.d.ts +47 -0
- package/components/filter-row.js +313 -0
- package/components/filter-row.js.map +1 -0
- package/components/grid.d.ts +226 -0
- package/components/grid.js +227 -0
- package/components/grid.js.map +1 -0
- package/components/header-row.d.ts +23 -0
- package/components/header-row.js +72 -0
- package/components/header-row.js.map +1 -0
- package/components/header.d.ts +23 -0
- package/components/header.js +137 -0
- package/components/header.js.map +1 -0
- package/components/row.d.ts +24 -0
- package/components/row.js +64 -0
- package/components/row.js.map +1 -0
- package/components/virtualizer.d.ts +12 -0
- package/components/virtualizer.js +21 -0
- package/components/virtualizer.js.map +1 -0
- package/controllers/data-operation.d.ts +17 -0
- package/controllers/data-operation.js +36 -0
- package/controllers/data-operation.js.map +1 -0
- package/controllers/dom.d.ts +19 -0
- package/controllers/dom.js +54 -0
- package/controllers/dom.js.map +1 -0
- package/controllers/filter.d.ts +21 -0
- package/controllers/filter.js +105 -0
- package/controllers/filter.js.map +1 -0
- package/controllers/navigation.d.ts +27 -0
- package/controllers/navigation.js +98 -0
- package/controllers/navigation.js.map +1 -0
- package/controllers/resize.d.ts +27 -0
- package/controllers/resize.js +52 -0
- package/controllers/resize.js.map +1 -0
- package/controllers/sort.d.ts +15 -0
- package/controllers/sort.js +94 -0
- package/controllers/sort.js.map +1 -0
- package/controllers/state.d.ts +24 -0
- package/controllers/state.js +37 -0
- package/controllers/state.js.map +1 -0
- package/custom-elements.json +4166 -0
- package/define.d.ts +2 -0
- package/define.js +4 -0
- package/define.js.map +1 -0
- package/docs/.nojekyll +1 -0
- package/docs/assets/hierarchy.js +1 -0
- package/docs/assets/highlight.css +71 -0
- package/docs/assets/icons.js +18 -0
- package/docs/assets/icons.svg +1 -0
- package/docs/assets/main.js +60 -0
- package/docs/assets/navigation.js +1 -0
- package/docs/assets/search.js +1 -0
- package/docs/assets/style.css +1633 -0
- package/docs/classes/IgcGridLite.html +74 -0
- package/docs/hierarchy.html +1 -0
- package/docs/index.html +11 -0
- package/docs/interfaces/BaseColumnConfiguration.html +28 -0
- package/docs/interfaces/BaseColumnSortConfiguration.html +6 -0
- package/docs/interfaces/BaseFilterExpression.html +15 -0
- package/docs/interfaces/BaseIgcCellContext.html +10 -0
- package/docs/interfaces/BaseSortExpression.html +12 -0
- package/docs/interfaces/ColumnFilterConfiguration.html +4 -0
- package/docs/interfaces/DataPipelineConfiguration.html +6 -0
- package/docs/interfaces/GridSortConfiguration.html +6 -0
- package/docs/interfaces/IgcFilteredEvent.html +6 -0
- package/docs/interfaces/IgcFilteringEvent.html +12 -0
- package/docs/interfaces/IgcGridLiteEventMap.html +17 -0
- package/docs/interfaces/IgcHeaderContext.html +6 -0
- package/docs/modules.html +1 -0
- package/docs/types/BasePropertyType.html +2 -0
- package/docs/types/BaseSortComparer.html +2 -0
- package/docs/types/ColumnConfiguration.html +2 -0
- package/docs/types/ColumnSortConfiguration.html +2 -0
- package/docs/types/DataPipelineHook.html +2 -0
- package/docs/types/DataPipelineParams.html +8 -0
- package/docs/types/DataType.html +2 -0
- package/docs/types/FilterCriteria.html +6 -0
- package/docs/types/FilterExpression.html +2 -0
- package/docs/types/IgcCellContext.html +2 -0
- package/docs/types/Keys.html +2 -0
- package/docs/types/PropertyType.html +2 -0
- package/docs/types/SortComparer.html +2 -0
- package/docs/types/SortExpression.html +2 -0
- package/docs/types/SortState.html +2 -0
- package/docs/types/SortingDirection.html +3 -0
- package/index.d.ts +8 -0
- package/index.js +5 -0
- package/index.js.map +1 -0
- package/internal/constants.d.ts +8 -0
- package/internal/constants.js +19 -0
- package/internal/constants.js.map +1 -0
- package/internal/icon-registry.d.ts +1 -0
- package/internal/icon-registry.js +29 -0
- package/internal/icon-registry.js.map +1 -0
- package/internal/is-defined.d.ts +1 -0
- package/internal/is-defined.js +4 -0
- package/internal/is-defined.js.map +1 -0
- package/internal/mixins/event-emitter.d.ts +7 -0
- package/internal/mixins/event-emitter.js +18 -0
- package/internal/mixins/event-emitter.js.map +1 -0
- package/internal/normalize-case.d.ts +1 -0
- package/internal/normalize-case.js +4 -0
- package/internal/normalize-case.js.map +1 -0
- package/internal/part-map.d.ts +4 -0
- package/internal/part-map.js +6 -0
- package/internal/part-map.js.map +1 -0
- package/internal/register.d.ts +6 -0
- package/internal/register.js +9 -0
- package/internal/register.js.map +1 -0
- package/internal/tags.d.ts +7 -0
- package/internal/tags.js +8 -0
- package/internal/tags.js.map +1 -0
- package/internal/theming.d.ts +34 -0
- package/internal/theming.js +123 -0
- package/internal/theming.js.map +1 -0
- package/internal/types.d.ts +198 -0
- package/internal/types.js +2 -0
- package/internal/types.js.map +1 -0
- package/internal/utils.d.ts +6 -0
- package/internal/utils.js +34 -0
- package/internal/utils.js.map +1 -0
- package/internal/watch.d.ts +5 -0
- package/internal/watch.js +19 -0
- package/internal/watch.js.map +1 -0
- package/operations/base.d.ts +6 -0
- package/operations/base.js +9 -0
- package/operations/base.js.map +1 -0
- package/operations/filter/operands/boolean.d.ts +3 -0
- package/operations/filter/operands/boolean.js +34 -0
- package/operations/filter/operands/boolean.js.map +1 -0
- package/operations/filter/operands/number.d.ts +3 -0
- package/operations/filter/operands/number.js +52 -0
- package/operations/filter/operands/number.js.map +1 -0
- package/operations/filter/operands/string.d.ts +3 -0
- package/operations/filter/operands/string.js +53 -0
- package/operations/filter/operands/string.js.map +1 -0
- package/operations/filter/state.d.ts +16 -0
- package/operations/filter/state.js +41 -0
- package/operations/filter/state.js.map +1 -0
- package/operations/filter/tree.d.ts +17 -0
- package/operations/filter/tree.js +46 -0
- package/operations/filter/tree.js.map +1 -0
- package/operations/filter/types.d.ts +57 -0
- package/operations/filter/types.js +2 -0
- package/operations/filter/types.js.map +1 -0
- package/operations/filter.d.ts +8 -0
- package/operations/filter.js +22 -0
- package/operations/filter.js.map +1 -0
- package/operations/sort/types.d.ts +49 -0
- package/operations/sort/types.js +2 -0
- package/operations/sort/types.js.map +1 -0
- package/operations/sort.d.ts +8 -0
- package/operations/sort.js +37 -0
- package/operations/sort.js.map +1 -0
- package/package.json +41 -0
- package/styles/_common.css.d.ts +1 -0
- package/styles/_common.css.js +3 -0
- package/styles/_common.css.js.map +1 -0
- package/styles/body-cell/body-cell.css.d.ts +1 -0
- package/styles/body-cell/body-cell.css.js +3 -0
- package/styles/body-cell/body-cell.css.js.map +1 -0
- package/styles/body-row/body-row.css.d.ts +1 -0
- package/styles/body-row/body-row.css.js +3 -0
- package/styles/body-row/body-row.css.js.map +1 -0
- package/styles/filter-row/filter-row.css.d.ts +1 -0
- package/styles/filter-row/filter-row.css.js +3 -0
- package/styles/filter-row/filter-row.css.js.map +1 -0
- package/styles/grid/themes/dark/grid.bootstrap.css.d.ts +1 -0
- package/styles/grid/themes/dark/grid.bootstrap.css.js +3 -0
- package/styles/grid/themes/dark/grid.bootstrap.css.js.map +1 -0
- package/styles/grid/themes/dark/grid.fluent.css.d.ts +1 -0
- package/styles/grid/themes/dark/grid.fluent.css.js +3 -0
- package/styles/grid/themes/dark/grid.fluent.css.js.map +1 -0
- package/styles/grid/themes/dark/grid.indigo.css.d.ts +1 -0
- package/styles/grid/themes/dark/grid.indigo.css.js +3 -0
- package/styles/grid/themes/dark/grid.indigo.css.js.map +1 -0
- package/styles/grid/themes/dark/grid.material.css.d.ts +1 -0
- package/styles/grid/themes/dark/grid.material.css.js +3 -0
- package/styles/grid/themes/dark/grid.material.css.js.map +1 -0
- package/styles/grid/themes/grid.base.css.d.ts +1 -0
- package/styles/grid/themes/grid.base.css.js +3 -0
- package/styles/grid/themes/grid.base.css.js.map +1 -0
- package/styles/grid/themes/light/grid.bootstrap.css.d.ts +1 -0
- package/styles/grid/themes/light/grid.bootstrap.css.js +3 -0
- package/styles/grid/themes/light/grid.bootstrap.css.js.map +1 -0
- package/styles/grid/themes/light/grid.fluent.css.d.ts +1 -0
- package/styles/grid/themes/light/grid.fluent.css.js +3 -0
- package/styles/grid/themes/light/grid.fluent.css.js.map +1 -0
- package/styles/grid/themes/light/grid.indigo.css.d.ts +1 -0
- package/styles/grid/themes/light/grid.indigo.css.js +3 -0
- package/styles/grid/themes/light/grid.indigo.css.js.map +1 -0
- package/styles/grid/themes/light/grid.material.css.d.ts +1 -0
- package/styles/grid/themes/light/grid.material.css.js +3 -0
- package/styles/grid/themes/light/grid.material.css.js.map +1 -0
- package/styles/grid/themes/themes.d.ts +2 -0
- package/styles/grid/themes/themes.js +39 -0
- package/styles/grid/themes/themes.js.map +1 -0
- package/styles/header-cell/header-cell.css.d.ts +1 -0
- package/styles/header-cell/header-cell.css.js +3 -0
- package/styles/header-cell/header-cell.css.js.map +1 -0
- package/styles/header-row/header-row.base.css.d.ts +1 -0
- package/styles/header-row/header-row.base.css.js +3 -0
- package/styles/header-row/header-row.base.css.js.map +1 -0
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
import IgcGridLiteRow from '../components/row.js';
|
|
2
|
+
import { NAVIGATION_STATE, SENTINEL_NODE } from '../internal/constants.js';
|
|
3
|
+
export class NavigationController {
|
|
4
|
+
get virtualizer() {
|
|
5
|
+
return this.host.scrollContainer;
|
|
6
|
+
}
|
|
7
|
+
get nextNode() {
|
|
8
|
+
const node = this.state.get('current');
|
|
9
|
+
return node === SENTINEL_NODE
|
|
10
|
+
? { column: this.firstColumn, row: 0 }
|
|
11
|
+
: { ...node };
|
|
12
|
+
}
|
|
13
|
+
get columns() {
|
|
14
|
+
return this.host.columns;
|
|
15
|
+
}
|
|
16
|
+
get firstColumn() {
|
|
17
|
+
return this.host.getColumn(0).key ?? '';
|
|
18
|
+
}
|
|
19
|
+
getPreviousColumn(key) {
|
|
20
|
+
return this.columns[Math.max(this.columns.indexOf(this.host.getColumn(key)) - 1, 0)].key;
|
|
21
|
+
}
|
|
22
|
+
getNextColumn(key) {
|
|
23
|
+
return this.columns[Math.min(this.columns.indexOf(this.host.getColumn(key)) + 1, this.columns.length - 1)].key;
|
|
24
|
+
}
|
|
25
|
+
scrollToCell(node) {
|
|
26
|
+
const row = Array.from(this.virtualizer.querySelectorAll(IgcGridLiteRow.tagName)).find((row) => row.index === node.row);
|
|
27
|
+
if (row) {
|
|
28
|
+
row.cells
|
|
29
|
+
.find((cell) => cell.column.key === node.column)
|
|
30
|
+
?.scrollIntoView({ block: 'nearest' });
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
get active() {
|
|
34
|
+
return this._active;
|
|
35
|
+
}
|
|
36
|
+
set active(node) {
|
|
37
|
+
this._active = node;
|
|
38
|
+
this.state.set('previous', this._active);
|
|
39
|
+
this.state.set('current', node);
|
|
40
|
+
this.host.requestUpdate();
|
|
41
|
+
}
|
|
42
|
+
constructor(host) {
|
|
43
|
+
this.host = host;
|
|
44
|
+
this.handlers = new Map(Object.entries({
|
|
45
|
+
ArrowDown: this.arrowDown,
|
|
46
|
+
ArrowUp: this.arrowUp,
|
|
47
|
+
ArrowLeft: this.arrowLeft,
|
|
48
|
+
ArrowRight: this.arrowRight,
|
|
49
|
+
Home: this.home,
|
|
50
|
+
End: this.end,
|
|
51
|
+
}));
|
|
52
|
+
this.state = NAVIGATION_STATE;
|
|
53
|
+
this._active = SENTINEL_NODE;
|
|
54
|
+
this.host.addController(this);
|
|
55
|
+
}
|
|
56
|
+
home() {
|
|
57
|
+
this.active = Object.assign(this.nextNode, { row: 0 });
|
|
58
|
+
this.virtualizer.element(this.active.row)?.scrollIntoView({ block: 'nearest' });
|
|
59
|
+
}
|
|
60
|
+
end() {
|
|
61
|
+
this.active = Object.assign(this.nextNode, { row: this.host.totalItems - 1 });
|
|
62
|
+
this.virtualizer.element(this.active.row)?.scrollIntoView({ block: 'nearest' });
|
|
63
|
+
}
|
|
64
|
+
arrowDown() {
|
|
65
|
+
const next = this.nextNode;
|
|
66
|
+
this.active = Object.assign(next, {
|
|
67
|
+
row: Math.min(next.row + 1, this.host.totalItems - 1),
|
|
68
|
+
});
|
|
69
|
+
this.virtualizer.element(next.row)?.scrollIntoView({ block: 'nearest' });
|
|
70
|
+
}
|
|
71
|
+
arrowUp() {
|
|
72
|
+
const next = this.nextNode;
|
|
73
|
+
this.active = Object.assign(next, { row: Math.max(0, next.row - 1) });
|
|
74
|
+
this.virtualizer.element(next.row)?.scrollIntoView({ block: 'nearest' });
|
|
75
|
+
}
|
|
76
|
+
arrowLeft() {
|
|
77
|
+
const next = this.nextNode;
|
|
78
|
+
this.active = Object.assign(next, { column: this.getPreviousColumn(next.column) });
|
|
79
|
+
this.scrollToCell(this.active);
|
|
80
|
+
}
|
|
81
|
+
arrowRight() {
|
|
82
|
+
const next = this.nextNode;
|
|
83
|
+
this.active = Object.assign(next, { column: this.getNextColumn(next.column) });
|
|
84
|
+
this.scrollToCell(this.active);
|
|
85
|
+
}
|
|
86
|
+
hostConnected() { }
|
|
87
|
+
hostDisconnected() {
|
|
88
|
+
this.active = SENTINEL_NODE;
|
|
89
|
+
this.state = NAVIGATION_STATE;
|
|
90
|
+
}
|
|
91
|
+
navigate(event) {
|
|
92
|
+
if (this.handlers.has(event.key)) {
|
|
93
|
+
event.preventDefault();
|
|
94
|
+
this.handlers.get(event.key).call(this);
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
//# sourceMappingURL=navigation.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"navigation.js","sourceRoot":"","sources":["../../src/controllers/navigation.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ReactiveController } from 'lit';\nimport IgcGridLiteRow from '../components/row.js';\nimport { NAVIGATION_STATE, SENTINEL_NODE } from '../internal/constants.js';\nimport type { ActiveNode, GridHost, Keys } from '../internal/types.js';\n\nexport class NavigationController<T extends object> implements ReactiveController {\n protected handlers = new Map(\n Object.entries({\n ArrowDown: this.arrowDown,\n ArrowUp: this.arrowUp,\n ArrowLeft: this.arrowLeft,\n ArrowRight: this.arrowRight,\n Home: this.home,\n End: this.end,\n })\n );\n\n protected get virtualizer() {\n // @ts-expect-error - Protected member access\n return this.host.scrollContainer;\n }\n\n protected state = NAVIGATION_STATE;\n protected _active = SENTINEL_NODE;\n\n protected get nextNode() {\n const node = this.state.get('current')!;\n return node === SENTINEL_NODE\n ? { column: this.firstColumn, row: 0 }\n : ({ ...node } as ActiveNode<T>);\n }\n\n protected get columns() {\n return this.host.columns;\n }\n\n protected get firstColumn() {\n return this.host.getColumn(0)!.key ?? '';\n }\n\n protected getPreviousColumn(key: Keys<T>) {\n return this.columns[Math.max(this.columns.indexOf(this.host.getColumn(key)!) - 1, 0)].key;\n }\n\n protected getNextColumn(key: Keys<T>) {\n return this.columns[\n Math.min(this.columns.indexOf(this.host.getColumn(key)!) + 1, this.columns.length - 1)\n ].key;\n }\n\n protected scrollToCell(node: ActiveNode<T>) {\n const row = Array.from(this.virtualizer.querySelectorAll(IgcGridLiteRow.tagName)).find(\n (row) => row.index === node.row\n ) as unknown as IgcGridLiteRow<T>;\n\n if (row) {\n row.cells\n .find((cell) => cell.column.key === node.column)\n ?.scrollIntoView({ block: 'nearest' });\n }\n }\n\n public get active() {\n return this._active as ActiveNode<T>;\n }\n\n public set active(node: ActiveNode<T>) {\n this._active = node;\n this.state.set('previous', this._active);\n this.state.set('current', node);\n this.host.requestUpdate();\n }\n\n constructor(protected host: GridHost<T>) {\n this.host.addController(this);\n }\n\n protected home() {\n this.active = Object.assign(this.nextNode, { row: 0 });\n this.virtualizer.element(this.active.row)?.scrollIntoView({ block: 'nearest' });\n }\n\n protected end() {\n this.active = Object.assign(this.nextNode, { row: this.host.totalItems - 1 });\n this.virtualizer.element(this.active.row)?.scrollIntoView({ block: 'nearest' });\n }\n\n protected arrowDown() {\n const next = this.nextNode;\n\n this.active = Object.assign(next, {\n row: Math.min(next.row + 1, this.host.totalItems - 1),\n });\n this.virtualizer.element(next.row)?.scrollIntoView({ block: 'nearest' });\n }\n\n protected arrowUp() {\n const next = this.nextNode;\n this.active = Object.assign(next, { row: Math.max(0, next.row - 1) });\n this.virtualizer.element(next.row)?.scrollIntoView({ block: 'nearest' });\n }\n\n protected arrowLeft() {\n const next = this.nextNode;\n this.active = Object.assign(next, { column: this.getPreviousColumn(next.column) });\n this.scrollToCell(this.active);\n }\n\n protected arrowRight() {\n const next = this.nextNode;\n this.active = Object.assign(next, { column: this.getNextColumn(next.column) });\n this.scrollToCell(this.active);\n }\n\n public hostConnected() {}\n\n public hostDisconnected() {\n this.active = SENTINEL_NODE as ActiveNode<T>;\n this.state = NAVIGATION_STATE;\n }\n\n public navigate(event: KeyboardEvent) {\n if (this.handlers.has(event.key)) {\n event.preventDefault();\n this.handlers.get(event.key)!.call(this);\n }\n }\n}\n"]}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { nothing, type ReactiveController } from 'lit';
|
|
2
|
+
import type IgcGridLiteHeader from '../components/header.js';
|
|
3
|
+
import type { ColumnConfiguration, GridHost } from '../internal/types.js';
|
|
4
|
+
export declare class ResizeController<T extends object> implements ReactiveController {
|
|
5
|
+
#private;
|
|
6
|
+
protected host: GridHost<T>;
|
|
7
|
+
constructor(host: GridHost<T>);
|
|
8
|
+
indicatorActive: boolean;
|
|
9
|
+
indicatorOffset: number;
|
|
10
|
+
/**
|
|
11
|
+
* Begins resizing a column by showing and positioning the resize indicator in relation to the column.
|
|
12
|
+
*
|
|
13
|
+
* @param header the
|
|
14
|
+
*/
|
|
15
|
+
start(header: IgcGridLiteHeader<T>): void;
|
|
16
|
+
/**
|
|
17
|
+
* Stops and resets the resizing state.
|
|
18
|
+
*/
|
|
19
|
+
stop(): void;
|
|
20
|
+
resize(column: ColumnConfiguration<T>, width: number, sizerOffset?: number): void;
|
|
21
|
+
autosize(column: ColumnConfiguration<T>, header: IgcGridLiteHeader<T>): Promise<void>;
|
|
22
|
+
hostConnected(): void;
|
|
23
|
+
/**
|
|
24
|
+
* Renders the resize indicator in the grid.
|
|
25
|
+
*/
|
|
26
|
+
renderIndicator(): typeof nothing | import("lit-html").TemplateResult<1>;
|
|
27
|
+
}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import { html, nothing } from 'lit';
|
|
2
|
+
import { styleMap } from 'lit/directives/style-map.js';
|
|
3
|
+
import { MIN_COL_RESIZE_WIDTH } from '../internal/constants.js';
|
|
4
|
+
export class ResizeController {
|
|
5
|
+
constructor(host) {
|
|
6
|
+
this.host = host;
|
|
7
|
+
this.indicatorActive = false;
|
|
8
|
+
this.indicatorOffset = 0;
|
|
9
|
+
this.host.addController(this);
|
|
10
|
+
}
|
|
11
|
+
#maxSize(key, headerWidth) {
|
|
12
|
+
const max = this.host.rows
|
|
13
|
+
.map((row) => row.cells.find((cell) => cell.column.key === key))
|
|
14
|
+
.reduce((prev, current) => (current.offsetWidth > prev ? current.offsetWidth : prev), 0);
|
|
15
|
+
return Math.max(...[MIN_COL_RESIZE_WIDTH, max, headerWidth]);
|
|
16
|
+
}
|
|
17
|
+
start(header) {
|
|
18
|
+
this.indicatorActive = true;
|
|
19
|
+
this.indicatorOffset = header.offsetLeft + header.offsetWidth;
|
|
20
|
+
this.host.requestUpdate();
|
|
21
|
+
}
|
|
22
|
+
stop() {
|
|
23
|
+
this.indicatorActive = false;
|
|
24
|
+
this.host.requestUpdate();
|
|
25
|
+
}
|
|
26
|
+
resize(column, width, sizerOffset) {
|
|
27
|
+
if (sizerOffset) {
|
|
28
|
+
this.indicatorOffset = sizerOffset;
|
|
29
|
+
}
|
|
30
|
+
column.width = `${width}px`;
|
|
31
|
+
this.host.requestUpdate();
|
|
32
|
+
}
|
|
33
|
+
async autosize(column, header) {
|
|
34
|
+
column.width = 'max-content';
|
|
35
|
+
this.host.requestUpdate();
|
|
36
|
+
await this.host.updateComplete;
|
|
37
|
+
column.width = `${this.#maxSize(column.key, header.offsetWidth)}px`;
|
|
38
|
+
this.host.requestUpdate();
|
|
39
|
+
}
|
|
40
|
+
hostConnected() { }
|
|
41
|
+
renderIndicator() {
|
|
42
|
+
return this.indicatorActive
|
|
43
|
+
? html `<div
|
|
44
|
+
part="resize-indicator"
|
|
45
|
+
style=${styleMap({
|
|
46
|
+
transform: `translateX(${this.indicatorOffset}px)`,
|
|
47
|
+
})}
|
|
48
|
+
></div>`
|
|
49
|
+
: nothing;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
//# sourceMappingURL=resize.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"resize.js","sourceRoot":"","sources":["../../src/controllers/resize.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAA2B,MAAM,KAAK,CAAC;AAC7D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAGhE,MAAM,OAAO,gBAAgB;IAC3B,YAAsB,IAAiB;QAAjB,SAAI,GAAJ,IAAI,CAAa;QAIhC,oBAAe,GAAG,KAAK,CAAC;QACxB,oBAAe,GAAG,CAAC,CAAC;QAJzB,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IAChC,CAAC;IAKD,QAAQ,CAAC,GAAY,EAAE,WAAmB;QACxC,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI;aACvB,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,KAAK,GAAG,CAAE,CAAC;aAChE,MAAM,CAAC,CAAC,IAAI,EAAE,OAAO,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;QAE3F,OAAO,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,oBAAoB,EAAE,GAAG,EAAE,WAAW,CAAC,CAAC,CAAC;IAC/D,CAAC;IAOM,KAAK,CAAC,MAA4B;QACvC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;QAC5B,IAAI,CAAC,eAAe,GAAG,MAAM,CAAC,UAAU,GAAG,MAAM,CAAC,WAAW,CAAC;QAC9D,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;IAC5B,CAAC;IAKM,IAAI;QACT,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;QAC7B,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;IAC5B,CAAC;IAEM,MAAM,CAAC,MAA8B,EAAE,KAAa,EAAE,WAAoB;QAC/E,IAAI,WAAW,EAAE,CAAC;YAChB,IAAI,CAAC,eAAe,GAAG,WAAW,CAAC;QACrC,CAAC;QAED,MAAM,CAAC,KAAK,GAAG,GAAG,KAAK,IAAI,CAAC;QAC5B,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;IAC5B,CAAC;IAEM,KAAK,CAAC,QAAQ,CAAC,MAA8B,EAAE,MAA4B;QAChF,MAAM,CAAC,KAAK,GAAG,aAAa,CAAC;QAE7B,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;QAC1B,MAAM,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC;QAE/B,MAAM,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC;QACpE,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;IAC5B,CAAC;IAEM,aAAa,KAAI,CAAC;IAKlB,eAAe;QACpB,OAAO,IAAI,CAAC,eAAe;YACzB,CAAC,CAAC,IAAI,CAAA;;kBAEM,QAAQ,CAAC;gBACf,SAAS,EAAE,cAAc,IAAI,CAAC,eAAe,KAAK;aACnD,CAAC;gBACI;YACV,CAAC,CAAC,OAAO,CAAC;IACd,CAAC;CACF","sourcesContent":["import { html, nothing, type ReactiveController } from 'lit';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport type IgcGridLiteHeader from '../components/header.js';\nimport { MIN_COL_RESIZE_WIDTH } from '../internal/constants.js';\nimport type { ColumnConfiguration, GridHost, Keys } from '../internal/types.js';\n\nexport class ResizeController<T extends object> implements ReactiveController {\n constructor(protected host: GridHost<T>) {\n this.host.addController(this);\n }\n\n public indicatorActive = false;\n public indicatorOffset = 0;\n\n #maxSize(key: Keys<T>, headerWidth: number) {\n const max = this.host.rows\n .map((row) => row.cells.find((cell) => cell.column.key === key)!)\n .reduce((prev, current) => (current.offsetWidth > prev ? current.offsetWidth : prev), 0);\n\n return Math.max(...[MIN_COL_RESIZE_WIDTH, max, headerWidth]);\n }\n\n /**\n * Begins resizing a column by showing and positioning the resize indicator in relation to the column.\n *\n * @param header the\n */\n public start(header: IgcGridLiteHeader<T>) {\n this.indicatorActive = true;\n this.indicatorOffset = header.offsetLeft + header.offsetWidth;\n this.host.requestUpdate();\n }\n\n /**\n * Stops and resets the resizing state.\n */\n public stop() {\n this.indicatorActive = false;\n this.host.requestUpdate();\n }\n\n public resize(column: ColumnConfiguration<T>, width: number, sizerOffset?: number) {\n if (sizerOffset) {\n this.indicatorOffset = sizerOffset;\n }\n\n column.width = `${width}px`;\n this.host.requestUpdate();\n }\n\n public async autosize(column: ColumnConfiguration<T>, header: IgcGridLiteHeader<T>) {\n column.width = 'max-content';\n\n this.host.requestUpdate();\n await this.host.updateComplete;\n\n column.width = `${this.#maxSize(column.key, header.offsetWidth)}px`;\n this.host.requestUpdate();\n }\n\n public hostConnected() {}\n\n /**\n * Renders the resize indicator in the grid.\n */\n public renderIndicator() {\n return this.indicatorActive\n ? html`<div\n part=\"resize-indicator\"\n style=${styleMap({\n transform: `translateX(${this.indicatorOffset}px)`,\n })}\n ></div>`\n : nothing;\n }\n}\n"]}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import type { ReactiveController } from 'lit';
|
|
2
|
+
import type { ColumnConfiguration, GridHost, Keys } from '../internal/types.js';
|
|
3
|
+
import type { SortExpression, SortState } from '../operations/sort/types.js';
|
|
4
|
+
export declare class SortController<T extends object> implements ReactiveController {
|
|
5
|
+
#private;
|
|
6
|
+
protected host: GridHost<T>;
|
|
7
|
+
constructor(host: GridHost<T>);
|
|
8
|
+
state: SortState<T>;
|
|
9
|
+
sortFromHeaderClick(column: ColumnConfiguration<T>): Promise<void>;
|
|
10
|
+
prepareExpression({ key, sort: options }: ColumnConfiguration<T>): SortExpression<T>;
|
|
11
|
+
reset(key?: Keys<T>): void;
|
|
12
|
+
protected _sort(expressions: SortExpression<T> | SortExpression<T>[]): void;
|
|
13
|
+
sort(expressions: SortExpression<T> | SortExpression<T>[]): void;
|
|
14
|
+
hostConnected(): void;
|
|
15
|
+
}
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
import { PIPELINE } from '../internal/constants.js';
|
|
2
|
+
import { asArray } from '../internal/utils.js';
|
|
3
|
+
export class SortController {
|
|
4
|
+
constructor(host) {
|
|
5
|
+
this.host = host;
|
|
6
|
+
this.state = new Map();
|
|
7
|
+
this.host.addController(this);
|
|
8
|
+
}
|
|
9
|
+
get #isMultipleSort() {
|
|
10
|
+
return this.host.sortConfiguration.multiple;
|
|
11
|
+
}
|
|
12
|
+
get #isTriStateSort() {
|
|
13
|
+
return this.host.sortConfiguration.triState;
|
|
14
|
+
}
|
|
15
|
+
#resolveSortOptions(options) {
|
|
16
|
+
const expr = {
|
|
17
|
+
caseSensitive: false,
|
|
18
|
+
comparer: undefined,
|
|
19
|
+
};
|
|
20
|
+
if (!options || typeof options === 'boolean') {
|
|
21
|
+
return expr;
|
|
22
|
+
}
|
|
23
|
+
return Object.assign(expr, {
|
|
24
|
+
caseSensitive: options.caseSensitive,
|
|
25
|
+
comparer: options.comparer,
|
|
26
|
+
});
|
|
27
|
+
}
|
|
28
|
+
#createDefaultExpression(key) {
|
|
29
|
+
const options = this.host.getColumn(key)?.sort;
|
|
30
|
+
return {
|
|
31
|
+
key,
|
|
32
|
+
direction: 'ascending',
|
|
33
|
+
...this.#resolveSortOptions(options),
|
|
34
|
+
};
|
|
35
|
+
}
|
|
36
|
+
#orderBy(dir) {
|
|
37
|
+
return this.#isTriStateSort
|
|
38
|
+
? dir === 'ascending'
|
|
39
|
+
? 'descending'
|
|
40
|
+
: dir === 'descending'
|
|
41
|
+
? 'none'
|
|
42
|
+
: 'ascending'
|
|
43
|
+
: dir === 'ascending'
|
|
44
|
+
? 'descending'
|
|
45
|
+
: 'ascending';
|
|
46
|
+
}
|
|
47
|
+
#emitSortingEvent(detail) {
|
|
48
|
+
return this.host.emitEvent('sorting', { detail, cancelable: true });
|
|
49
|
+
}
|
|
50
|
+
#emitSortedEvent(detail) {
|
|
51
|
+
return this.host.emitEvent('sorted', { detail });
|
|
52
|
+
}
|
|
53
|
+
#setExpression(expression) {
|
|
54
|
+
expression.direction === 'none'
|
|
55
|
+
? this.reset(expression.key)
|
|
56
|
+
: this.state.set(expression.key, { ...expression });
|
|
57
|
+
}
|
|
58
|
+
async sortFromHeaderClick(column) {
|
|
59
|
+
const expression = this.prepareExpression(column);
|
|
60
|
+
if (!this.#emitSortingEvent(expression)) {
|
|
61
|
+
return;
|
|
62
|
+
}
|
|
63
|
+
if (!this.#isMultipleSort) {
|
|
64
|
+
this.reset();
|
|
65
|
+
}
|
|
66
|
+
this._sort(expression);
|
|
67
|
+
await this.host.updateComplete;
|
|
68
|
+
this.#emitSortedEvent(expression);
|
|
69
|
+
}
|
|
70
|
+
prepareExpression({ key, sort: options }) {
|
|
71
|
+
if (this.state.has(key)) {
|
|
72
|
+
const expr = this.state.get(key);
|
|
73
|
+
return Object.assign(expr, {
|
|
74
|
+
direction: this.#orderBy(expr.direction),
|
|
75
|
+
...this.#resolveSortOptions(options),
|
|
76
|
+
});
|
|
77
|
+
}
|
|
78
|
+
return this.#createDefaultExpression(key);
|
|
79
|
+
}
|
|
80
|
+
reset(key) {
|
|
81
|
+
key ? this.state.delete(key) : this.state.clear();
|
|
82
|
+
}
|
|
83
|
+
_sort(expressions) {
|
|
84
|
+
for (const expr of asArray(expressions)) {
|
|
85
|
+
this.#setExpression(expr);
|
|
86
|
+
}
|
|
87
|
+
this.host.requestUpdate(PIPELINE);
|
|
88
|
+
}
|
|
89
|
+
sort(expressions) {
|
|
90
|
+
this._sort(asArray(expressions).map((expr) => Object.assign(this.state.get(expr.key) ?? this.#createDefaultExpression(expr.key), expr)));
|
|
91
|
+
}
|
|
92
|
+
hostConnected() { }
|
|
93
|
+
}
|
|
94
|
+
//# sourceMappingURL=sort.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sort.js","sourceRoot":"","sources":["../../src/controllers/sort.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ReactiveController } from 'lit';\nimport { PIPELINE } from '../internal/constants.js';\nimport type {\n ColumnConfiguration,\n ColumnSortConfiguration,\n GridHost,\n Keys,\n} from '../internal/types.js';\nimport { asArray } from '../internal/utils.js';\nimport type { SortExpression, SortingDirection, SortState } from '../operations/sort/types.js';\n\nexport class SortController<T extends object> implements ReactiveController {\n constructor(protected host: GridHost<T>) {\n this.host.addController(this);\n }\n\n public state: SortState<T> = new Map();\n\n get #isMultipleSort() {\n return this.host.sortConfiguration.multiple;\n }\n\n get #isTriStateSort() {\n return this.host.sortConfiguration.triState;\n }\n\n #resolveSortOptions(options?: boolean | ColumnSortConfiguration<T>) {\n const expr: Pick<SortExpression<T>, 'caseSensitive' | 'comparer'> = {\n caseSensitive: false,\n comparer: undefined,\n };\n\n if (!options || typeof options === 'boolean') {\n return expr as Partial<SortExpression<T>>;\n }\n\n return Object.assign(expr, {\n caseSensitive: options.caseSensitive,\n comparer: options.comparer,\n }) as Partial<SortExpression<T>>;\n }\n\n #createDefaultExpression(key: Keys<T>) {\n const options = this.host.getColumn(key)?.sort;\n\n return {\n key,\n direction: 'ascending',\n ...this.#resolveSortOptions(options),\n } as SortExpression<T>;\n }\n\n #orderBy(dir?: SortingDirection): SortingDirection {\n return this.#isTriStateSort\n ? dir === 'ascending'\n ? 'descending'\n : dir === 'descending'\n ? 'none'\n : 'ascending'\n : dir === 'ascending'\n ? 'descending'\n : 'ascending';\n }\n\n #emitSortingEvent(detail: SortExpression<T>) {\n return this.host.emitEvent('sorting', { detail, cancelable: true });\n }\n\n #emitSortedEvent(detail: SortExpression<T>) {\n return this.host.emitEvent('sorted', { detail });\n }\n\n #setExpression(expression: SortExpression<T>) {\n expression.direction === 'none'\n ? this.reset(expression.key)\n : this.state.set(expression.key, { ...expression });\n }\n\n public async sortFromHeaderClick(column: ColumnConfiguration<T>) {\n const expression = this.prepareExpression(column);\n\n if (!this.#emitSortingEvent(expression)) {\n return;\n }\n\n if (!this.#isMultipleSort) {\n this.reset();\n }\n\n this._sort(expression);\n\n await this.host.updateComplete;\n this.#emitSortedEvent(expression);\n }\n\n public prepareExpression({ key, sort: options }: ColumnConfiguration<T>): SortExpression<T> {\n if (this.state.has(key)) {\n const expr = this.state.get(key)!;\n\n return Object.assign(expr, {\n direction: this.#orderBy(expr.direction),\n ...this.#resolveSortOptions(options),\n });\n }\n\n // Initial state\n return this.#createDefaultExpression(key);\n }\n\n public reset(key?: Keys<T>) {\n key ? this.state.delete(key) : this.state.clear();\n }\n\n protected _sort(expressions: SortExpression<T> | SortExpression<T>[]) {\n for (const expr of asArray(expressions)) {\n this.#setExpression(expr);\n }\n\n this.host.requestUpdate(PIPELINE);\n }\n\n public sort(expressions: SortExpression<T> | SortExpression<T>[]) {\n this._sort(\n asArray(expressions).map((expr) =>\n Object.assign(this.state.get(expr.key) ?? this.#createDefaultExpression(expr.key), expr)\n )\n );\n }\n\n public hostConnected() {}\n}\n"]}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import type { ReactiveController } from 'lit';
|
|
2
|
+
import type { ActiveNode, GridHost } from '../internal/types.js';
|
|
3
|
+
import { FilterController } from './filter.js';
|
|
4
|
+
import { NavigationController } from './navigation.js';
|
|
5
|
+
import { ResizeController } from './resize.js';
|
|
6
|
+
import { SortController } from './sort.js';
|
|
7
|
+
export declare class StateController<T extends object> implements ReactiveController {
|
|
8
|
+
host: GridHost<T>;
|
|
9
|
+
sorting: SortController<T>;
|
|
10
|
+
filtering: FilterController<T>;
|
|
11
|
+
navigation: NavigationController<T>;
|
|
12
|
+
resizing: ResizeController<T>;
|
|
13
|
+
get active(): ActiveNode<T>;
|
|
14
|
+
set active(node: ActiveNode<T>);
|
|
15
|
+
get headerRow(): import("../components/header-row.js").default<T>;
|
|
16
|
+
get scrollContainer(): import("../components/virtualizer.js").default;
|
|
17
|
+
constructor(host: GridHost<T>);
|
|
18
|
+
protected init(): void;
|
|
19
|
+
hostConnected(): void;
|
|
20
|
+
hostUpdate(): void;
|
|
21
|
+
}
|
|
22
|
+
export declare const gridStateContext: {
|
|
23
|
+
__context__: StateController<any>;
|
|
24
|
+
};
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { createContext } from '@lit/context';
|
|
2
|
+
import { FilterController } from './filter.js';
|
|
3
|
+
import { NavigationController } from './navigation.js';
|
|
4
|
+
import { ResizeController } from './resize.js';
|
|
5
|
+
import { SortController } from './sort.js';
|
|
6
|
+
export class StateController {
|
|
7
|
+
get active() {
|
|
8
|
+
return this.navigation.active;
|
|
9
|
+
}
|
|
10
|
+
set active(node) {
|
|
11
|
+
this.navigation.active = node;
|
|
12
|
+
}
|
|
13
|
+
get headerRow() {
|
|
14
|
+
return this.host.headerRow;
|
|
15
|
+
}
|
|
16
|
+
get scrollContainer() {
|
|
17
|
+
return this.host.scrollContainer;
|
|
18
|
+
}
|
|
19
|
+
constructor(host) {
|
|
20
|
+
this.host = host;
|
|
21
|
+
this.host.addController(this);
|
|
22
|
+
this.init();
|
|
23
|
+
}
|
|
24
|
+
init() {
|
|
25
|
+
this.sorting = new SortController(this.host);
|
|
26
|
+
this.filtering = new FilterController(this.host);
|
|
27
|
+
this.navigation = new NavigationController(this.host);
|
|
28
|
+
this.resizing = new ResizeController(this.host);
|
|
29
|
+
}
|
|
30
|
+
hostConnected() { }
|
|
31
|
+
hostUpdate() {
|
|
32
|
+
this.headerRow?.requestUpdate();
|
|
33
|
+
this.scrollContainer?.requestUpdate();
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
export const gridStateContext = createContext('gridStateController');
|
|
37
|
+
//# sourceMappingURL=state.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"state.js","sourceRoot":"","sources":["../../src/controllers/state.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAG7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAE3C,MAAM,OAAO,eAAe;IAM1B,IAAW,MAAM;QACf,OAAO,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC;IAChC,CAAC;IAED,IAAW,MAAM,CAAC,IAAmB;QACnC,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,IAAI,CAAC;IAChC,CAAC;IAED,IAAW,SAAS;QAElB,OAAO,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;IAC7B,CAAC;IAED,IAAW,eAAe;QAExB,OAAO,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC;IACnC,CAAC;IAED,YAAmB,IAAiB;QAAjB,SAAI,GAAJ,IAAI,CAAa;QAClC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QAC9B,IAAI,CAAC,IAAI,EAAE,CAAC;IACd,CAAC;IAES,IAAI;QACZ,IAAI,CAAC,OAAO,GAAG,IAAI,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC7C,IAAI,CAAC,SAAS,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACjD,IAAI,CAAC,UAAU,GAAG,IAAI,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACtD,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAClD,CAAC;IAEM,aAAa,KAAI,CAAC;IAElB,UAAU;QACf,IAAI,CAAC,SAAS,EAAE,aAAa,EAAE,CAAC;QAChC,IAAI,CAAC,eAAe,EAAE,aAAa,EAAE,CAAC;IACxC,CAAC;CACF;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG,aAAa,CAAuB,qBAAqB,CAAC,CAAC","sourcesContent":["import { createContext } from '@lit/context';\nimport type { ReactiveController } from 'lit';\nimport type { ActiveNode, GridHost } from '../internal/types.js';\nimport { FilterController } from './filter.js';\nimport { NavigationController } from './navigation.js';\nimport { ResizeController } from './resize.js';\nimport { SortController } from './sort.js';\n\nexport class StateController<T extends object> implements ReactiveController {\n public sorting!: SortController<T>;\n public filtering!: FilterController<T>;\n public navigation!: NavigationController<T>;\n public resizing!: ResizeController<T>;\n\n public get active() {\n return this.navigation.active;\n }\n\n public set active(node: ActiveNode<T>) {\n this.navigation.active = node;\n }\n\n public get headerRow() {\n // @ts-expect-error - Protected member access\n return this.host.headerRow;\n }\n\n public get scrollContainer() {\n // @ts-expect-error - Protected member access\n return this.host.scrollContainer;\n }\n\n constructor(public host: GridHost<T>) {\n this.host.addController(this);\n this.init();\n }\n\n protected init() {\n this.sorting = new SortController(this.host);\n this.filtering = new FilterController(this.host);\n this.navigation = new NavigationController(this.host);\n this.resizing = new ResizeController(this.host);\n }\n\n public hostConnected() {}\n\n public hostUpdate(): void {\n this.headerRow?.requestUpdate();\n this.scrollContainer?.requestUpdate();\n }\n}\n\nexport const gridStateContext = createContext<StateController<any>>('gridStateController');\n"]}
|