@dxos/lit-grid 0.8.4-main.f9ba587 → 0.8.4-main.fd6878d
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/dist/src/dx-grid-axis-resize-handle.d.ts.map +1 -1
- package/dist/src/dx-grid-axis-resize-handle.js +3 -5
- package/dist/src/dx-grid-axis-resize-handle.js.map +1 -1
- package/dist/src/dx-grid-multiselect-cell.d.ts.map +1 -1
- package/dist/src/dx-grid-multiselect-cell.js +2 -1
- package/dist/src/dx-grid-multiselect-cell.js.map +1 -1
- package/dist/src/dx-grid.d.ts +3 -3
- package/dist/src/dx-grid.d.ts.map +1 -1
- package/dist/src/dx-grid.js +72 -95
- package/dist/src/dx-grid.js.map +1 -1
- package/dist/src/dx-grid.lit-stories.js +15 -18
- package/dist/src/dx-grid.lit-stories.js.map +1 -1
- package/dist/src/playwright/dx-grid.spec.js.map +1 -1
- package/dist/src/testing/dx-grid-manager.d.ts.map +1 -1
- package/dist/src/testing/dx-grid-manager.js.map +1 -1
- package/dist/src/util.d.ts +4 -1
- package/dist/src/util.d.ts.map +1 -1
- package/dist/src/util.js +11 -11
- package/dist/src/util.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +3 -3
- package/src/dx-grid-axis-resize-handle.ts +1 -1
- package/src/dx-grid-multiselect-cell.ts +2 -1
- package/src/dx-grid.pcss +28 -24
- package/src/dx-grid.ts +34 -28
- package/src/playwright/dx-grid.spec.ts +1 -1
- package/src/testing/dx-grid-manager.ts +1 -1
- package/src/util.ts +13 -9
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dx-grid-axis-resize-handle.d.ts","sourceRoot":"","sources":["../../src/dx-grid-axis-resize-handle.ts"],"names":[],"mappings":"AAQA,OAAO,
|
|
1
|
+
{"version":3,"file":"dx-grid-axis-resize-handle.d.ts","sourceRoot":"","sources":["../../src/dx-grid-axis-resize-handle.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC,OAAO,EAAwB,KAAK,UAAU,EAAE,KAAK,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAExF,qBACa,sBAAuB,SAAQ,UAAU;IAEpD,IAAI,EAAE,UAAU,CAAS;IAGzB,KAAK,EAAE,MAAM,GAAG,iBAAiB,CAAU;IAG3C,KAAK,EAAE,MAAM,CAAQ;IAGrB,IAAI,EAAE,MAAM,CAAO;IAEnB,OAAO,CAAC,aAAa,CAAe;IAE3B,MAAM;IAWf,OAAO,CAAC,OAAO,CAA0B;IAEzC,OAAO,CAAC,cAAc;IAatB,OAAO,CAAC,KAAK;IA0BJ,oBAAoB,IAAI,IAAI;IAK5B,gBAAgB,IAAI,IAAI;CAGlC"}
|
|
@@ -10,7 +10,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
10
10
|
import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
|
|
11
11
|
import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview';
|
|
12
12
|
import { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';
|
|
13
|
-
import {
|
|
13
|
+
import { LitElement, html } from 'lit';
|
|
14
14
|
import { customElement, property } from 'lit/decorators.js';
|
|
15
15
|
import { ref } from 'lit/directives/ref.js';
|
|
16
16
|
import { DxAxisResizeInternal } from './types';
|
|
@@ -47,8 +47,7 @@ let DxGridAxisResizeHandle = class DxGridAxisResizeHandle extends LitElement {
|
|
|
47
47
|
this.dispatchEvent(event);
|
|
48
48
|
}
|
|
49
49
|
mount(element) {
|
|
50
|
-
|
|
51
|
-
(_a = this.cleanup) === null || _a === void 0 ? void 0 : _a.call(this);
|
|
50
|
+
this.cleanup?.();
|
|
52
51
|
const host = this;
|
|
53
52
|
if (element) {
|
|
54
53
|
this.cleanup = draggable({
|
|
@@ -73,9 +72,8 @@ let DxGridAxisResizeHandle = class DxGridAxisResizeHandle extends LitElement {
|
|
|
73
72
|
}
|
|
74
73
|
}
|
|
75
74
|
disconnectedCallback() {
|
|
76
|
-
var _a;
|
|
77
75
|
super.disconnectedCallback();
|
|
78
|
-
|
|
76
|
+
this.cleanup?.();
|
|
79
77
|
}
|
|
80
78
|
createRenderRoot() {
|
|
81
79
|
return this;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dx-grid-axis-resize-handle.js","sourceRoot":"","sources":["../../src/dx-grid-axis-resize-handle.ts"],"names":[],"mappings":"AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;;;;;AAEF,OAAO,EAAE,SAAS,EAAE,MAAM,mDAAmD,CAAC;AAC9E,OAAO,EAAE,wBAAwB,EAAE,MAAM,uEAAuE,CAAC;AACjH,OAAO,EAAE,gBAAgB,EAAE,MAAM,qDAAqD,CAAC;AAEvF,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"dx-grid-axis-resize-handle.js","sourceRoot":"","sources":["../../src/dx-grid-axis-resize-handle.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dx-grid-multiselect-cell.d.ts","sourceRoot":"","sources":["../../src/dx-grid-multiselect-cell.ts"],"names":[],"mappings":"AAIA,OAAO,
|
|
1
|
+
{"version":3,"file":"dx-grid-multiselect-cell.d.ts","sourceRoot":"","sources":["../../src/dx-grid-multiselect-cell.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAGvC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,qBACa,qBAAsB,SAAQ,UAAU;IAEnD,MAAM,EAAE,iBAAiB,EAAE,CAAM;IAGjC,QAAQ,EAAE,OAAO,CAAS;IAG1B,QAAQ,EAAE,MAAM,CAAM;IAGtB,WAAW,EAAE,MAAM,CAAM;IAEhB,MAAM;IAkBN,gBAAgB,IAAI,IAAI;CAGlC"}
|
|
@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
7
7
|
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
8
8
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
9
9
|
};
|
|
10
|
-
import {
|
|
10
|
+
import { LitElement, html } from 'lit';
|
|
11
11
|
import { customElement, property } from 'lit/decorators.js';
|
|
12
12
|
let DxGridMultiselectCell = class DxGridMultiselectCell extends LitElement {
|
|
13
13
|
constructor() {
|
|
@@ -25,6 +25,7 @@ let DxGridMultiselectCell = class DxGridMultiselectCell extends LitElement {
|
|
|
25
25
|
aria-haspopup="dialog"
|
|
26
26
|
class="dx-grid__cell__multiselect"
|
|
27
27
|
data-dx-grid-accessory="invoke-multiselect"
|
|
28
|
+
data-dx-grid-action="accessory"
|
|
28
29
|
>
|
|
29
30
|
${this.values.length > 0
|
|
30
31
|
? this.values.map(({ label }) => html `<span class="dx-grid__cell__multiselect__value">${label}</span>`)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dx-grid-multiselect-cell.js","sourceRoot":"","sources":["../../src/dx-grid-multiselect-cell.ts"],"names":[],"mappings":"AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;;;;;AAEF,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"dx-grid-multiselect-cell.js","sourceRoot":"","sources":["../../src/dx-grid-multiselect-cell.ts"],"names":[],"mappings":"AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;;;;;AAEF,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAOrD,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,UAAU;IAA9C;;QAEL,WAAM,GAAwB,EAAE,CAAC;QAGjC,aAAQ,GAAY,KAAK,CAAC;QAG1B,aAAQ,GAAW,EAAE,CAAC;QAGtB,gBAAW,GAAW,EAAE,CAAC;IAuB3B,CAAC;IArBU,MAAM;QACb,OAAO,IAAI,CAAA;;sBAEO,IAAI,CAAC,QAAQ;uBACZ,IAAI,CAAC,QAAQ;;;;;;QAM5B,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC;YACtB,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA,mDAAmD,KAAK,SAAS,CAAC;YACvG,CAAC,CAAC,IAAI,CAAA,yDAAyD,IAAI,CAAC,WAAW,SAAS;;;cAGlF,CAAC;IACb,CAAC;IAEQ,gBAAgB;QACvB,OAAO,IAAI,CAAC;IACd,CAAC;CACF,CAAA;AAhCC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;qDACO;AAGjC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uDACF;AAG1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDACL;AAGtB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0DACF;AAXd,qBAAqB;IADjC,aAAa,CAAC,0BAA0B,CAAC;GAC7B,qBAAqB,CAkCjC"}
|
package/dist/src/dx-grid.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { LitElement } from 'lit';
|
|
2
2
|
import './dx-grid-axis-resize-handle';
|
|
3
|
-
import { type
|
|
3
|
+
import { type DxGridAxisMeta, type DxGridAxisMetaProps, type DxGridCells, type DxGridFrozenAxes, type DxGridFrozenColsPlane, type DxGridFrozenRowsPlane, type DxGridMode, type DxGridPlane, type DxGridPlaneCells, type DxGridPlaneRange, type DxGridPlaneRecord, type DxGridPosition, type DxGridRange } from './types';
|
|
4
4
|
export declare class DxGrid extends LitElement {
|
|
5
5
|
constructor();
|
|
6
6
|
gridId: string;
|
|
@@ -162,10 +162,10 @@ export declare class DxGrid extends LitElement {
|
|
|
162
162
|
updateIfWithinBounds({ col, row }: {
|
|
163
163
|
col: number;
|
|
164
164
|
row: number;
|
|
165
|
-
}): boolean;
|
|
165
|
+
}, includeFixed?: boolean): boolean;
|
|
166
166
|
disconnectedCallback(): void;
|
|
167
167
|
createRenderRoot(): this;
|
|
168
168
|
}
|
|
169
|
-
export { rowToA1Notation, colToA1Notation, closestAction, closestCell, parseCellIndex, toPlaneCellIndex, cellQuery, } from './util';
|
|
169
|
+
export { rowToA1Notation, colToA1Notation, closestAction, closestCell, parseCellIndex, toPlaneCellIndex, cellQuery, accessoryHandlesPointerdownAttrs, } from './util';
|
|
170
170
|
export declare const commentedClassName = "dx-grid__cell--commented";
|
|
171
171
|
//# sourceMappingURL=dx-grid.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dx-grid.d.ts","sourceRoot":"","sources":["../../src/dx-grid.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"dx-grid.d.ts","sourceRoot":"","sources":["../../src/dx-grid.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAOhD,OAAO,8BAA8B,CAAC;AACtC,OAAO,EAML,KAAK,cAAc,EACnB,KAAK,mBAAmB,EAGxB,KAAK,WAAW,EAGhB,KAAK,gBAAgB,EACrB,KAAK,qBAAqB,EAE1B,KAAK,qBAAqB,EAC1B,KAAK,UAAU,EACf,KAAK,WAAW,EAEhB,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACrB,KAAK,iBAAiB,EAEtB,KAAK,cAAc,EACnB,KAAK,WAAW,EAGjB,MAAM,SAAS,CAAC;AAsBjB,qBACa,MAAO,SAAQ,UAAU;;IAmBpC,MAAM,EAAE,MAAM,CAAqB;IAGnC,UAAU,EAAE,iBAAiB,CAAC,qBAAqB,EAAE,mBAAmB,CAAC,CAEvE;IAGF,aAAa,EAAE,iBAAiB,CAAC,qBAAqB,EAAE,mBAAmB,CAAC,CAE1E;IAGF,IAAI,EAAE,cAAc,CAAgB;IAGpC,OAAO,EAAE,cAAc,CAAgB;IAGvC,YAAY,EAAE,WAAW,CAAgB;IAGzC,IAAI,EAAE,UAAU,CAAY;IAG5B,YAAY,EAAE,MAAM,CAAY;IAGhC,SAAS,EAAE,MAAM,CAAY;IAG7B,MAAM,EAAE,gBAAgB,CAAM;IAG9B,UAAU,EAAE,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAa;IAGhE,UAAU,SAAM;IAEhB;;;OAGG;IACH,QAAQ,EAAE,CAAC,CAAC,SAAS,EAAE,gBAAgB,EAAE,KAAK,EAAE,WAAW,KAAK,gBAAgB,CAAC,GAAG,IAAI,CAAQ;IAGhG,OAAO,CAAC,KAAK,CAA6B;IAO1C,OAAO,CAAC,SAAS,CAAK;IAGtB,OAAO,CAAC,QAAQ,CAAK;IAOrB,OAAO,CAAC,UAAU,CAAK;IAGvB,OAAO,CAAC,SAAS,CAAK;IAOtB,OAAO,CAAC,cAAc,CAAK;IAG3B,OAAO,CAAC,cAAc,CAAK;IAO3B,OAAO,CAAC,YAAY,CAAK;IAGzB,OAAO,CAAC,YAAY,CAAkB;IAGtC,OAAO,CAAC,WAAW,CAAK;IAGxB,OAAO,CAAC,WAAW,CAAkB;IAQrC,OAAO,CAAC,SAAS,CAAK;IAGtB,OAAO,CAAC,SAAS,CAAK;IAGtB,OAAO,CAAC,SAAS,CAAK;IAGtB,OAAO,CAAC,SAAS,CAAK;IAMtB,OAAO,CAAC,mBAAmB,CAAO;IAGlC,OAAO,CAAC,uBAAuB,CAAM;IAGrC,OAAO,CAAC,qBAAqB,CAAM;IAGnC,OAAO,CAAC,gBAAgB,CAAO;IAG/B,OAAO,CAAC,uBAAuB,CAAM;IAGrC,OAAO,CAAC,qBAAqB,CAAM;IAOnC,OAAO,CAAC,OAAO,CAAuB;IAGtC,OAAO,CAAC,QAAQ,CAAiC;IAGjD,OAAO,CAAC,QAAQ,CAAiC;IAGjD,OAAO,CAAC,WAAW,CAAkB;IAGrC,OAAO,CAAC,WAAW,CAAqD;IAGxE,OAAO,CAAC,cAAc,CAAqD;IAG3E,OAAO,CAAC,YAAY,CAAqD;IAOzE,OAAO,CAAC,mBAAmB,CAAoB;IAG/C,OAAO,CAAC,kBAAkB,CAAoB;IAG9C,OAAO,CAAC,wBAAwB,CAAoB;IAGpD,OAAO,CAAC,uBAAuB,CAAoB;IAMnD,OAAO,CAAC,mBAAmB;IAkB3B,OAAO,CAAC,uBAAuB;IAS/B,OAAO,CAAC,iBAAiB,CA+BvB;IAEF,OAAO,CAAC,eAAe,CASrB;IAEF,OAAO,CAAC,iBAAiB,CAoBvB;IAEF;;;OAGG;IACH,OAAO,CAAC,yBAAyB;IAyBjC;;OAEG;IACH,OAAO,CAAC,kCAAkC;IAe1C,OAAO,CAAC,sBAAsB;IAiB9B,OAAO,CAAC,kBAAkB;IAa1B,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,aAAa;IAsErB,OAAO,CAAC,OAAO;IAKf,OAAO,CAAC,OAAO;IAKf,OAAO,CAAC,IAAI;IAKZ,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,cAAc;IAgBtB,OAAO,CAAC,eAAe;IAavB,YAAY,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI;IAQtC,OAAO,CAAC,cAAc;IA2BtB,OAAO,CAAC,QAAQ,CAeb;IAEH,OAAO,CAAC,OAAO,CAAoC;IACnD,OAAO,CAAC,WAAW,CAAoC;IAEvD,OAAO,CAAC,oBAAoB,CAI1B;IAEF,OAAO,CAAC,mBAAmB,CAIzB;IAEF,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,eAAe;IAKvB,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,SAAS;IAKjB,OAAO,CAAC,mBAAmB,CAuBzB;IAEF,OAAO,CAAC,WAAW,CAcjB;IAEF,OAAO,CAAC,eAAe;IAiDvB,OAAO,CAAC,cAAc;IAiDtB,OAAO,CAAC,SAAS;IAKV,WAAW,CAAC,YAAY,CAAC,EAAE,OAAO,GAAG,IAAI;IAkEhD,QAAQ,CAAC,MAAM,EAAE,cAAc,EAAE,IAAI,UAAO,GAAG,IAAI;IAQnD,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,sBAAsB;IAQ9B,OAAO,CAAC,sBAAsB;IAQ9B,OAAO,CAAC,mBAAmB;IAe3B,OAAO,CAAC,QAAQ;IAMhB,OAAO,CAAC,QAAQ;IAMhB;;OAEG;IACH,OAAO,CAAC,SAAS,GAAE,KAAK,GAAG,KAAK,GAAG,SAAqB,EAAE,KAAK,GAAE,CAAC,GAAG,CAAC,CAAC,GAAG,CAAK,GAAG,IAAI;IA2BtF,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,aAAa;IAIrB;;;OAGG;IACH,OAAO,CAAC,YAAY;IAMpB;;;OAGG;IACH,OAAO,CAAC,WAAW;IAMnB;;OAEG;IACH,oBAAoB,IAAI,IAAI;IAuB5B,aAAa,CAAC,EAAE,MAAM,EAAE,EAAE;QAAE,MAAM,EAAE,cAAc,CAAA;KAAE,GAAG,IAAI;IAQ3D,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAIjC,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAI9B,cAAc,IAAI,IAAI;IAQtB,IAAa,UAAU,IAIY,MAAM,CAFxC;IAED,IAAa,UAAU,CAAC,SAAS,EAAE,MAAM,EAGxC;IAED,IAAa,SAAS,IAIY,MAAM,CAFvC;IAED,IAAa,SAAS,CAAC,SAAS,EAAE,MAAM,EAGvC;IAMD,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,wBAAwB;IA+BhC,OAAO,CAAC,uBAAuB;IA4C/B,OAAO,CAAC,WAAW;IA2BnB,OAAO,CAAC,gBAAgB;IAkCxB,OAAO,CAAC,mBAAmB;IAkC3B,OAAO,CAAC,YAAY;IAiBpB;;;OAGG;IACH,OAAO,CAAC,kBAAkB;IAgB1B,OAAO,CAAC,gCAAgC;IAsCxC,OAAO,CAAC,UAAU;IAoCT,MAAM;IAqFf,OAAO,CAAC,yBAAyB;IAkBjC,OAAO,CAAC,wBAAwB;IAkBhC,OAAO,CAAC,oBAAoB;IAK5B,OAAO,CAAC,eAAe;IAkBvB,OAAO,CAAC,eAAe;IAkBd,YAAY,IAAI,IAAI;IAUpB,UAAU,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI;IA2CrD,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI;IAcpD,oBAAoB,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,EAAE,YAAY,CAAC,EAAE,OAAO,GAAG,OAAO;IAS/F,oBAAoB,IAAI,IAAI;IAQ5B,gBAAgB,IAAI,IAAI;CAGlC;AAED,OAAO,EACL,eAAe,EACf,eAAe,EACf,aAAa,EACb,WAAW,EACX,cAAc,EACd,gBAAgB,EAChB,SAAS,EACT,gCAAgC,GACjC,MAAM,QAAQ,CAAC;AAEhB,eAAO,MAAM,kBAAkB,6BAA6B,CAAC"}
|
package/dist/src/dx-grid.js
CHANGED
|
@@ -8,18 +8,16 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
8
8
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
9
9
|
};
|
|
10
10
|
import { LitElement, html, nothing } from 'lit';
|
|
11
|
-
import { customElement,
|
|
12
|
-
import {
|
|
11
|
+
import { customElement, property, state } from 'lit/decorators.js';
|
|
12
|
+
import { createRef, ref } from 'lit/directives/ref.js';
|
|
13
13
|
import { styleMap } from 'lit/directives/style-map.js';
|
|
14
|
-
import {
|
|
14
|
+
import { html as staticHtml, unsafeStatic } from 'lit/static-html.js';
|
|
15
15
|
import { defaultColSize, defaultRowSize } from './defs';
|
|
16
|
-
// eslint-disable-next-line unused-imports/no-unused-imports
|
|
17
16
|
import './dx-grid-axis-resize-handle';
|
|
18
17
|
import { DxAxisResize, DxEditRequest, DxGridCellsSelect, separator, } from './types';
|
|
19
|
-
import {
|
|
18
|
+
import { cellSelected, closestAction, closestCell, gap, isReadonly, isSameCell, resizeTolerance, resolveColPlane, resolveFrozenPlane, resolveRowPlane, selectionProps, shouldSelect, sizeColMax, sizeColMin, sizeRowMax, sizeRowMin, targetIsPlane, toCellIndex, } from './util';
|
|
20
19
|
let DxGrid = class DxGrid extends LitElement {
|
|
21
20
|
constructor() {
|
|
22
|
-
var _a;
|
|
23
21
|
super();
|
|
24
22
|
this.gridId = 'default-grid-id';
|
|
25
23
|
this.rowDefault = {
|
|
@@ -133,8 +131,7 @@ let DxGrid = class DxGrid extends LitElement {
|
|
|
133
131
|
}
|
|
134
132
|
};
|
|
135
133
|
this.handlePointerUp = (event) => {
|
|
136
|
-
|
|
137
|
-
if (((_a = this.pointer) === null || _a === void 0 ? void 0 : _a.state) === 'selecting') {
|
|
134
|
+
if (this.pointer?.state === 'selecting') {
|
|
138
135
|
const cell = closestCell(event.target);
|
|
139
136
|
if (cell) {
|
|
140
137
|
this.setSelectionEnd(cell);
|
|
@@ -144,8 +141,7 @@ let DxGrid = class DxGrid extends LitElement {
|
|
|
144
141
|
this.pointer = null;
|
|
145
142
|
};
|
|
146
143
|
this.handlePointerMove = (event) => {
|
|
147
|
-
|
|
148
|
-
if (((_a = this.pointer) === null || _a === void 0 ? void 0 : _a.state) === 'panning') {
|
|
144
|
+
if (this.pointer?.state === 'panning') {
|
|
149
145
|
const panEvent = event;
|
|
150
146
|
panEvent.deltaX = this.pointer.pageX - event.pageX;
|
|
151
147
|
panEvent.deltaY = this.pointer.pageY - event.pageY;
|
|
@@ -156,7 +152,7 @@ let DxGrid = class DxGrid extends LitElement {
|
|
|
156
152
|
else if (shouldSelect(this.pointer, event)) {
|
|
157
153
|
this.pointer = { state: 'selecting' };
|
|
158
154
|
}
|
|
159
|
-
else if (
|
|
155
|
+
else if (this.pointer?.state === 'selecting') {
|
|
160
156
|
const cell = closestCell(event.target);
|
|
161
157
|
if (cell &&
|
|
162
158
|
cell.plane === this.selectionStart.plane &&
|
|
@@ -169,8 +165,7 @@ let DxGrid = class DxGrid extends LitElement {
|
|
|
169
165
|
// Resize & reposition handlers, observer, ref
|
|
170
166
|
//
|
|
171
167
|
this.observer = new ResizeObserver((entries) => {
|
|
172
|
-
|
|
173
|
-
const { inlineSize, blockSize } = (_c = (_b = (_a = entries === null || entries === void 0 ? void 0 : entries[0]) === null || _a === void 0 ? void 0 : _a.contentBoxSize) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : {
|
|
168
|
+
const { inlineSize, blockSize } = entries?.[0]?.contentBoxSize?.[0] ?? {
|
|
174
169
|
inlineSize: 0,
|
|
175
170
|
blockSize: 0,
|
|
176
171
|
};
|
|
@@ -196,8 +191,7 @@ let DxGrid = class DxGrid extends LitElement {
|
|
|
196
191
|
}
|
|
197
192
|
};
|
|
198
193
|
this.handleTopLevelWheel = (event) => {
|
|
199
|
-
|
|
200
|
-
if (event.gridId === ((_a = this.gridId) !== null && _a !== void 0 ? _a : 'never')) {
|
|
194
|
+
if (event.gridId === (this.gridId ?? 'never')) {
|
|
201
195
|
if (this.overscroll === 'trap' ||
|
|
202
196
|
(this.overscroll === 'inline' && event.overscrollInline === 0) ||
|
|
203
197
|
(this.overscroll === 'block' && event.overscrollBlock === 0)) {
|
|
@@ -230,7 +224,7 @@ let DxGrid = class DxGrid extends LitElement {
|
|
|
230
224
|
}
|
|
231
225
|
};
|
|
232
226
|
// Wheel, top-level and element-level
|
|
233
|
-
|
|
227
|
+
document.defaultView?.addEventListener('wheel', this.handleTopLevelWheel, { passive: false });
|
|
234
228
|
this.addEventListener('wheel', this.handleWheel);
|
|
235
229
|
// Custom event(s)
|
|
236
230
|
this.addEventListener('dx-axis-resize-internal', this.handleAxisResizeInternal);
|
|
@@ -314,18 +308,16 @@ let DxGrid = class DxGrid extends LitElement {
|
|
|
314
308
|
}
|
|
315
309
|
}
|
|
316
310
|
moveFocusBetweenPlanes(event, plane) {
|
|
317
|
-
|
|
318
|
-
const planeElement = (_a = this.gridRef.value) === null || _a === void 0 ? void 0 : _a.querySelector(`[data-dx-grid-plane="${plane}"]`);
|
|
311
|
+
const planeElement = this.gridRef.value?.querySelector(`[data-dx-grid-plane="${plane}"]`);
|
|
319
312
|
if (planeElement) {
|
|
320
313
|
const axis = event.key === 'ArrowUp' || event.key === 'ArrowDown' ? 'col' : 'row';
|
|
321
314
|
const delta = event.key === 'ArrowLeft' || event.key === 'ArrowUp' ? -1 : 1;
|
|
322
|
-
const planeAxis = planeElement
|
|
323
|
-
const adjacentPlanes = Array.from(
|
|
324
|
-
|
|
315
|
+
const planeAxis = planeElement?.getAttribute(`data-dx-grid-plane-${axis}`);
|
|
316
|
+
const adjacentPlanes = Array.from(this.gridRef.value?.querySelectorAll(`[data-dx-grid-plane-${axis}="${planeAxis}"]`) ?? [planeElement]).filter((el) => !!el);
|
|
317
|
+
adjacentPlanes[(adjacentPlanes.length + adjacentPlanes.indexOf(planeElement) + delta) % adjacentPlanes.length]?.focus({ preventScroll: true });
|
|
325
318
|
}
|
|
326
319
|
}
|
|
327
320
|
moveFocusIntoPlane(plane) {
|
|
328
|
-
var _a;
|
|
329
321
|
if (this.focusedCell.plane !== plane) {
|
|
330
322
|
const colPlane = resolveColPlane(plane);
|
|
331
323
|
const rowPlane = resolveRowPlane(plane);
|
|
@@ -335,11 +327,10 @@ let DxGrid = class DxGrid extends LitElement {
|
|
|
335
327
|
row: rowPlane === 'grid' ? this.visRowMin : 0,
|
|
336
328
|
};
|
|
337
329
|
}
|
|
338
|
-
|
|
330
|
+
this.focusedCellElement()?.focus({ preventScroll: true });
|
|
339
331
|
}
|
|
340
332
|
moveFocusToPlane() {
|
|
341
|
-
|
|
342
|
-
(_a = this.focusedPlaneElement()) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
|
|
333
|
+
this.focusedPlaneElement()?.focus({ preventScroll: true });
|
|
343
334
|
}
|
|
344
335
|
handleKeydown(event) {
|
|
345
336
|
if (this.focusActive && this.mode === 'browse') {
|
|
@@ -390,6 +381,13 @@ let DxGrid = class DxGrid extends LitElement {
|
|
|
390
381
|
event.preventDefault();
|
|
391
382
|
this.dispatchEditRequest();
|
|
392
383
|
break;
|
|
384
|
+
case 'Backspace':
|
|
385
|
+
case 'Delete':
|
|
386
|
+
if (!event.defaultPrevented) {
|
|
387
|
+
event.preventDefault();
|
|
388
|
+
this.dispatchEditRequest('');
|
|
389
|
+
}
|
|
390
|
+
break;
|
|
393
391
|
default:
|
|
394
392
|
if (event.key.length === 1 && event.key.match(/\P{Cc}/u) && !(event.metaKey || event.ctrlKey)) {
|
|
395
393
|
this.dispatchEditRequest(event.key);
|
|
@@ -403,19 +401,16 @@ let DxGrid = class DxGrid extends LitElement {
|
|
|
403
401
|
// Accessors
|
|
404
402
|
//
|
|
405
403
|
colSize(c, plane) {
|
|
406
|
-
var _a, _b, _c, _d, _e;
|
|
407
404
|
const resolvedPlane = resolveColPlane(plane);
|
|
408
|
-
return
|
|
405
|
+
return this.colSizes?.[resolvedPlane]?.[c] ?? this.columnDefault[resolvedPlane]?.size ?? defaultColSize;
|
|
409
406
|
}
|
|
410
407
|
rowSize(r, plane) {
|
|
411
|
-
var _a, _b, _c, _d, _e;
|
|
412
408
|
const resolvedPlane = resolveRowPlane(plane);
|
|
413
|
-
return
|
|
409
|
+
return this.rowSizes?.[resolvedPlane]?.[r] ?? this.rowDefault[resolvedPlane]?.size ?? defaultRowSize;
|
|
414
410
|
}
|
|
415
411
|
cell(c, r, plane) {
|
|
416
|
-
var _a, _b, _c, _d, _e;
|
|
417
412
|
const index = `${c}${separator}${r}`;
|
|
418
|
-
return
|
|
413
|
+
return this.cells?.[plane]?.[index] ?? this.initialCells?.[plane]?.[index];
|
|
419
414
|
}
|
|
420
415
|
cellActive(c, r, plane) {
|
|
421
416
|
return this.focusedCell.plane === plane && this.focusedCell.col === c && this.focusedCell.row === r;
|
|
@@ -476,11 +471,11 @@ let DxGrid = class DxGrid extends LitElement {
|
|
|
476
471
|
return this.intrinsicBlockSize - this.sizeBlock;
|
|
477
472
|
}
|
|
478
473
|
updatePosInline(inline, maxInline = this.maxPosInline()) {
|
|
479
|
-
this.posInline = Math.max(0, Math.min(maxInline, inline
|
|
474
|
+
this.posInline = Math.max(0, Math.min(maxInline, inline ?? this.posInline));
|
|
480
475
|
this.maybeUpdateVisInline();
|
|
481
476
|
}
|
|
482
477
|
updatePosBlock(block, maxBlock = this.maxPosBlock()) {
|
|
483
|
-
this.posBlock = Math.max(0, Math.min(maxBlock, block
|
|
478
|
+
this.posBlock = Math.max(0, Math.min(maxBlock, block ?? this.posBlock));
|
|
484
479
|
this.maybeUpdateVisBlock();
|
|
485
480
|
}
|
|
486
481
|
updatePos(inline, block, maxInline, maxBlock) {
|
|
@@ -488,7 +483,6 @@ let DxGrid = class DxGrid extends LitElement {
|
|
|
488
483
|
this.updatePosBlock(block, maxBlock);
|
|
489
484
|
}
|
|
490
485
|
updateVisInline() {
|
|
491
|
-
var _a, _b;
|
|
492
486
|
// todo: avoid starting from zero
|
|
493
487
|
let axisCursor = 0;
|
|
494
488
|
let pxCursor = this.colSize(axisCursor, 'grid');
|
|
@@ -518,15 +512,14 @@ let DxGrid = class DxGrid extends LitElement {
|
|
|
518
512
|
this.templateGridColumns = [...Array(this.visColMax - this.visColMin)]
|
|
519
513
|
.map((_, c0) => `${this.colSize(this.visColMin + c0, 'grid')}px`)
|
|
520
514
|
.join(' ');
|
|
521
|
-
this.templatefrozenColsStart = [...Array(
|
|
515
|
+
this.templatefrozenColsStart = [...Array(this.frozen.frozenColsStart ?? 0)]
|
|
522
516
|
.map((_, c0) => `${this.colSize(c0, 'frozenColsStart')}px`)
|
|
523
517
|
.join(' ');
|
|
524
|
-
this.templatefrozenColsEnd = [...Array(
|
|
518
|
+
this.templatefrozenColsEnd = [...Array(this.frozen.frozenColsEnd ?? 0)]
|
|
525
519
|
.map((_, c0) => `${this.colSize(c0, 'frozenColsEnd')}px`)
|
|
526
520
|
.join(' ');
|
|
527
521
|
}
|
|
528
522
|
updateVisBlock() {
|
|
529
|
-
var _a, _b;
|
|
530
523
|
// todo: avoid starting from zero
|
|
531
524
|
let axisCursor = 0;
|
|
532
525
|
let pxCursor = this.rowSize(axisCursor, 'grid');
|
|
@@ -556,10 +549,10 @@ let DxGrid = class DxGrid extends LitElement {
|
|
|
556
549
|
this.templateGridRows = [...Array(this.visRowMax - this.visRowMin)]
|
|
557
550
|
.map((_, r0) => `${this.rowSize(this.visRowMin + r0, 'grid')}px`)
|
|
558
551
|
.join(' ');
|
|
559
|
-
this.templatefrozenRowsStart = [...Array(
|
|
552
|
+
this.templatefrozenRowsStart = [...Array(this.frozen.frozenRowsStart ?? 0)]
|
|
560
553
|
.map((_, r0) => `${this.rowSize(r0, 'frozenRowsStart')}px`)
|
|
561
554
|
.join(' ');
|
|
562
|
-
this.templatefrozenRowsEnd = [...Array(
|
|
555
|
+
this.templatefrozenRowsEnd = [...Array(this.frozen.frozenRowsEnd ?? 0)]
|
|
563
556
|
.map((_, r0) => `${this.rowSize(r0, 'frozenRowsEnd')}px`)
|
|
564
557
|
.join(' ');
|
|
565
558
|
}
|
|
@@ -568,7 +561,6 @@ let DxGrid = class DxGrid extends LitElement {
|
|
|
568
561
|
this.updateVisBlock();
|
|
569
562
|
}
|
|
570
563
|
updateCells(includeFixed) {
|
|
571
|
-
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
572
564
|
this.cells.grid = this.getCells({
|
|
573
565
|
start: { col: this.visColMin, row: this.visRowMin },
|
|
574
566
|
end: { col: this.visColMax, row: this.visRowMax },
|
|
@@ -587,25 +579,25 @@ let DxGrid = class DxGrid extends LitElement {
|
|
|
587
579
|
}, plane);
|
|
588
580
|
});
|
|
589
581
|
if (includeFixed) {
|
|
590
|
-
if ((
|
|
582
|
+
if ((this.frozen.frozenColsStart ?? 0) > 0 && (this.frozen.frozenRowsStart ?? 0) > 0) {
|
|
591
583
|
this.cells.fixedStartStart = this.getCells({
|
|
592
584
|
start: { col: 0, row: 0 },
|
|
593
585
|
end: { col: this.frozen.frozenColsStart, row: this.frozen.frozenRowsStart },
|
|
594
586
|
}, 'fixedStartStart');
|
|
595
587
|
}
|
|
596
|
-
if ((
|
|
588
|
+
if ((this.frozen.frozenColsEnd ?? 0) > 0 && (this.frozen.frozenRowsStart ?? 0) > 0) {
|
|
597
589
|
this.cells.fixedStartEnd = this.getCells({
|
|
598
590
|
start: { col: 0, row: 0 },
|
|
599
591
|
end: { col: this.frozen.frozenColsEnd, row: this.frozen.frozenRowsStart },
|
|
600
592
|
}, 'fixedStartEnd');
|
|
601
593
|
}
|
|
602
|
-
if ((
|
|
594
|
+
if ((this.frozen.frozenColsStart ?? 0) > 0 && (this.frozen.frozenRowsEnd ?? 0) > 0) {
|
|
603
595
|
this.cells.fixedEndStart = this.getCells({
|
|
604
596
|
start: { col: 0, row: 0 },
|
|
605
597
|
end: { col: this.frozen.frozenColsStart, row: this.frozen.frozenRowsEnd },
|
|
606
598
|
}, 'fixedEndStart');
|
|
607
599
|
}
|
|
608
|
-
if ((
|
|
600
|
+
if ((this.frozen.frozenColsEnd ?? 0) > 0 && (this.frozen.frozenRowsEnd ?? 0) > 0) {
|
|
609
601
|
this.cells.fixedEndEnd = this.getCells({
|
|
610
602
|
start: { col: 0, row: 0 },
|
|
611
603
|
end: { col: this.frozen.frozenColsEnd, row: this.frozen.frozenRowsEnd },
|
|
@@ -643,12 +635,10 @@ let DxGrid = class DxGrid extends LitElement {
|
|
|
643
635
|
return `[data-dx-grid-plane=${this.focusedCell.plane}]`;
|
|
644
636
|
}
|
|
645
637
|
focusedCellElement() {
|
|
646
|
-
|
|
647
|
-
return (_a = this.gridRef.value) === null || _a === void 0 ? void 0 : _a.querySelector(this.focusedCellQuery());
|
|
638
|
+
return this.gridRef.value?.querySelector(this.focusedCellQuery());
|
|
648
639
|
}
|
|
649
640
|
focusedPlaneElement() {
|
|
650
|
-
|
|
651
|
-
return (_a = this.gridRef.value) === null || _a === void 0 ? void 0 : _a.querySelector(this.focusedPlaneQuery());
|
|
641
|
+
return this.gridRef.value?.querySelector(this.focusedPlaneQuery());
|
|
652
642
|
}
|
|
653
643
|
//
|
|
654
644
|
// `outOfVis` returns by how many rows/cols the focused cell is outside of the `vis` range for an axis, inset by a
|
|
@@ -807,10 +797,9 @@ let DxGrid = class DxGrid extends LitElement {
|
|
|
807
797
|
// Resize handlers
|
|
808
798
|
//
|
|
809
799
|
axisResizeable(plane, axis, index) {
|
|
810
|
-
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
811
800
|
return axis === 'col'
|
|
812
|
-
? !!(
|
|
813
|
-
: !!(
|
|
801
|
+
? !!(this.columns[plane]?.[index]?.resizeable ?? this.columnDefault[plane]?.resizeable)
|
|
802
|
+
: !!(this.rows[plane]?.[index]?.resizeable ?? this.rowDefault[plane]?.resizeable);
|
|
814
803
|
}
|
|
815
804
|
handleAxisResizeInternal(event) {
|
|
816
805
|
event.stopPropagation();
|
|
@@ -841,7 +830,6 @@ let DxGrid = class DxGrid extends LitElement {
|
|
|
841
830
|
//
|
|
842
831
|
// TODO(thure): This is for rendering presentational objects superimposed onto the canonical grid (e.g. DnD drop line for #8108).
|
|
843
832
|
renderPresentationLayer(offsetInline, offsetBlock) {
|
|
844
|
-
var _a, _b, _c, _d, _e, _f;
|
|
845
833
|
const visibleCols = this.visColMax - this.visColMin;
|
|
846
834
|
const visibleRows = this.visRowMax - this.visRowMin;
|
|
847
835
|
return html `<div
|
|
@@ -849,32 +837,29 @@ let DxGrid = class DxGrid extends LitElement {
|
|
|
849
837
|
class="dx-grid-layer--presentation"
|
|
850
838
|
style=${styleMap({
|
|
851
839
|
gridTemplateColumns: [
|
|
852
|
-
...[...Array(
|
|
840
|
+
...[...Array(this.frozen.frozenColsStart ?? 0)].map((_, c0) => `${this.colSize(c0, 'frozenColsStart')}px`),
|
|
853
841
|
...[...Array(visibleCols)].map((_, c0) => c0 === visibleCols - 1
|
|
854
842
|
? '1fr'
|
|
855
843
|
: `${this.colSize(this.visColMin + c0, 'grid') + (c0 === 0 ? offsetInline : 0)}px`),
|
|
856
|
-
...[...Array(
|
|
844
|
+
...[...Array(this.frozen.frozenColsEnd ?? 0)].map((_, c0) => `${this.colSize(c0, 'frozenColsEnd')}px`),
|
|
857
845
|
].join(' '),
|
|
858
846
|
gridTemplateRows: [
|
|
859
|
-
...[...Array(
|
|
847
|
+
...[...Array(this.frozen.frozenRowsStart ?? 0)].map((_, r0) => `${this.rowSize(r0, 'frozenRowsStart')}px`),
|
|
860
848
|
...[...Array(visibleRows)].map((_, r0) => r0 === visibleRows - 1
|
|
861
849
|
? '1fr'
|
|
862
850
|
: `${this.rowSize(this.visRowMin + r0, 'grid') + (r0 === 0 ? offsetBlock : 0)}px`),
|
|
863
|
-
...[...Array(
|
|
851
|
+
...[...Array(this.frozen.frozenRowsEnd ?? 0)].map((_, r0) => `${this.rowSize(r0, 'frozenRowsEnd')}px`),
|
|
864
852
|
].join(' '),
|
|
865
853
|
})}
|
|
866
854
|
>
|
|
867
855
|
${
|
|
868
856
|
/* TODO(thure): These are debug cells, remove when rendering actual overlay content. */ [
|
|
869
|
-
...Array((
|
|
870
|
-
].map((_, r0) =>
|
|
871
|
-
var _a, _b;
|
|
872
|
-
return [...Array(((_a = this.frozen.frozenColsStart) !== null && _a !== void 0 ? _a : 0) + visibleCols + ((_b = this.frozen.frozenColsEnd) !== null && _b !== void 0 ? _b : 0))].map((_, c0) => html `<div
|
|
857
|
+
...Array((this.frozen.frozenRowsStart ?? 0) + visibleRows + (this.frozen.frozenRowsEnd ?? 0)),
|
|
858
|
+
].map((_, r0) => [...Array((this.frozen.frozenColsStart ?? 0) + visibleCols + (this.frozen.frozenColsEnd ?? 0))].map((_, c0) => html `<div
|
|
873
859
|
role="none"
|
|
874
860
|
class="dx-grid-layer--presentation__cell"
|
|
875
861
|
style="grid-column:${c0 + 1};grid-row:${r0 + 1}"
|
|
876
|
-
></div>`)
|
|
877
|
-
})}
|
|
862
|
+
></div>`))}
|
|
878
863
|
</div>`;
|
|
879
864
|
}
|
|
880
865
|
renderFixed(plane, selection) {
|
|
@@ -882,7 +867,7 @@ let DxGrid = class DxGrid extends LitElement {
|
|
|
882
867
|
const rowPlane = resolveRowPlane(plane);
|
|
883
868
|
const cols = this.frozen[colPlane];
|
|
884
869
|
const rows = this.frozen[rowPlane];
|
|
885
|
-
return (cols
|
|
870
|
+
return (cols ?? 0) > 0 && (rows ?? 0) > 0
|
|
886
871
|
? html `<div
|
|
887
872
|
role="none"
|
|
888
873
|
tabindex="0"
|
|
@@ -906,7 +891,7 @@ let DxGrid = class DxGrid extends LitElement {
|
|
|
906
891
|
renderFrozenRows(plane, visibleCols, offsetInline, selection) {
|
|
907
892
|
const rowPlane = resolveRowPlane(plane);
|
|
908
893
|
const rows = this.frozen[rowPlane];
|
|
909
|
-
return (rows
|
|
894
|
+
return (rows ?? 0) > 0
|
|
910
895
|
? html `<div
|
|
911
896
|
role="none"
|
|
912
897
|
class="dx-grid__plane--frozen-row"
|
|
@@ -934,7 +919,7 @@ let DxGrid = class DxGrid extends LitElement {
|
|
|
934
919
|
renderFrozenColumns(plane, visibleRows, offsetBlock, selection) {
|
|
935
920
|
const colPlane = resolveColPlane(plane);
|
|
936
921
|
const cols = this.frozen[colPlane];
|
|
937
|
-
return (cols
|
|
922
|
+
return (cols ?? 0) > 0
|
|
938
923
|
? html `<div
|
|
939
924
|
role="none"
|
|
940
925
|
class="dx-grid__plane--frozen-col"
|
|
@@ -960,17 +945,16 @@ let DxGrid = class DxGrid extends LitElement {
|
|
|
960
945
|
: null;
|
|
961
946
|
}
|
|
962
947
|
cellReadonly(col, row, plane) {
|
|
963
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
964
948
|
const colPlane = resolveColPlane(plane);
|
|
965
949
|
const rowPlane = resolveRowPlane(plane);
|
|
966
950
|
// Check cell-specific setting first.
|
|
967
|
-
const cellReadonly =
|
|
951
|
+
const cellReadonly = this.cell(col, row, plane)?.readonly;
|
|
968
952
|
if (cellReadonly !== undefined) {
|
|
969
953
|
return isReadonly(cellReadonly);
|
|
970
954
|
}
|
|
971
955
|
// Check column/row defaults.
|
|
972
|
-
const colReadOnly =
|
|
973
|
-
const rowReadOnly =
|
|
956
|
+
const colReadOnly = this.columns?.[colPlane]?.[col]?.readonly ?? this.columnDefault?.[colPlane]?.readonly;
|
|
957
|
+
const rowReadOnly = this.rows?.[rowPlane]?.[row]?.readonly ?? this.rowDefault?.[rowPlane]?.readonly;
|
|
974
958
|
return isReadonly(colReadOnly) || isReadonly(rowReadOnly);
|
|
975
959
|
}
|
|
976
960
|
/**
|
|
@@ -978,28 +962,26 @@ let DxGrid = class DxGrid extends LitElement {
|
|
|
978
962
|
* @returns true if the cells text content is selectable, false otherwise.
|
|
979
963
|
*/
|
|
980
964
|
cellTextSelectable(col, row, plane) {
|
|
981
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
982
965
|
const colPlane = resolveColPlane(plane);
|
|
983
966
|
const rowPlane = resolveRowPlane(plane);
|
|
984
967
|
// Check cell-specific setting first.
|
|
985
|
-
const cellReadonly =
|
|
968
|
+
const cellReadonly = this.cell(col, row, plane)?.readonly;
|
|
986
969
|
if (cellReadonly !== undefined) {
|
|
987
970
|
return cellReadonly === 'text-select';
|
|
988
971
|
}
|
|
989
972
|
// Check column/row defaults.
|
|
990
|
-
const colReadonly =
|
|
991
|
-
const rowReadonly =
|
|
973
|
+
const colReadonly = this.columns?.[colPlane]?.[col]?.readonly ?? this.columnDefault?.[colPlane]?.readonly;
|
|
974
|
+
const rowReadonly = this.rows?.[rowPlane]?.[row]?.readonly ?? this.rowDefault?.[rowPlane]?.readonly;
|
|
992
975
|
return colReadonly === 'text-select' || rowReadonly === 'text-select';
|
|
993
976
|
}
|
|
994
977
|
getOverflowingCellModifiedDeltas(event) {
|
|
995
|
-
var _a;
|
|
996
978
|
if (!event.target) {
|
|
997
979
|
return event;
|
|
998
980
|
}
|
|
999
981
|
const element = event.target;
|
|
1000
982
|
const activeCell = element.closest('[data-dx-active]');
|
|
1001
983
|
const contentEl = element.closest('.dx-grid__cell__content');
|
|
1002
|
-
if (!activeCell || !contentEl || !
|
|
984
|
+
if (!activeCell || !contentEl || !document.activeElement?.contains(element)) {
|
|
1003
985
|
return event;
|
|
1004
986
|
}
|
|
1005
987
|
// Commented-out code will let the event delta through unmodified if the cell can scroll but is scrolled to the end
|
|
@@ -1019,21 +1001,20 @@ let DxGrid = class DxGrid extends LitElement {
|
|
|
1019
1001
|
return { deltaX, deltaY };
|
|
1020
1002
|
}
|
|
1021
1003
|
renderCell(col, row, plane, selected, visCol = col, visRow = row) {
|
|
1022
|
-
var _a, _b;
|
|
1023
1004
|
const cell = this.cell(col, row, plane);
|
|
1024
1005
|
const active = this.cellActive(col, row, plane);
|
|
1025
1006
|
const readonly = this.cellReadonly(col, row, plane);
|
|
1026
1007
|
const textSelectable = this.cellTextSelectable(col, row, plane);
|
|
1027
|
-
const resizeIndex =
|
|
1028
|
-
const resizePlane =
|
|
1029
|
-
const accessory =
|
|
1008
|
+
const resizeIndex = cell?.resizeHandle ? (cell.resizeHandle === 'col' ? col : row) : undefined;
|
|
1009
|
+
const resizePlane = cell?.resizeHandle ? resolveFrozenPlane(cell.resizeHandle, plane) : undefined;
|
|
1010
|
+
const accessory = cell?.accessoryHtml ? staticHtml `${unsafeStatic(cell.accessoryHtml)}` : null;
|
|
1030
1011
|
return html `<div
|
|
1031
1012
|
role="gridcell"
|
|
1032
1013
|
tabindex="0"
|
|
1033
1014
|
aria-selected=${selected ? 'true' : nothing}
|
|
1034
1015
|
aria-readonly=${readonly ? 'true' : nothing}
|
|
1035
|
-
class=${
|
|
1036
|
-
data-refs=${
|
|
1016
|
+
class=${cell?.className ?? nothing}
|
|
1017
|
+
data-refs=${cell?.dataRefs ?? nothing}
|
|
1037
1018
|
?data-dx-active=${active}
|
|
1038
1019
|
data-text-selectable=${textSelectable ? 'true' : 'false'}
|
|
1039
1020
|
data-dx-grid-action="cell"
|
|
@@ -1041,10 +1022,8 @@ let DxGrid = class DxGrid extends LitElement {
|
|
|
1041
1022
|
aria-rowindex=${row}
|
|
1042
1023
|
style="grid-column:${visCol + 1};grid-row:${visRow + 1}"
|
|
1043
1024
|
>
|
|
1044
|
-
<div role="none" class="dx-grid__cell__content">
|
|
1045
|
-
|
|
1046
|
-
</div>
|
|
1047
|
-
${(cell === null || cell === void 0 ? void 0 : cell.resizeHandle) &&
|
|
1025
|
+
<div role="none" class="dx-grid__cell__content">${cell?.value}${accessory}</div>
|
|
1026
|
+
${cell?.resizeHandle &&
|
|
1048
1027
|
this.mode === 'browse' &&
|
|
1049
1028
|
this.axisResizeable(resizePlane, cell.resizeHandle, resizeIndex)
|
|
1050
1029
|
? html `<dx-grid-axis-resize-handle
|
|
@@ -1150,10 +1129,9 @@ let DxGrid = class DxGrid extends LitElement {
|
|
|
1150
1129
|
this.updateIntrinsicBlockSize();
|
|
1151
1130
|
}
|
|
1152
1131
|
computeColSizes() {
|
|
1153
|
-
|
|
1154
|
-
this.colSizes = Object.entries((_a = this.columns) !== null && _a !== void 0 ? _a : {}).reduce((acc, [plane, planeColMeta]) => {
|
|
1132
|
+
this.colSizes = Object.entries(this.columns ?? {}).reduce((acc, [plane, planeColMeta]) => {
|
|
1155
1133
|
acc[plane] = Object.entries(planeColMeta).reduce((planeAcc, [col, colMeta]) => {
|
|
1156
|
-
if (colMeta
|
|
1134
|
+
if (colMeta?.size) {
|
|
1157
1135
|
planeAcc[col] = colMeta.size;
|
|
1158
1136
|
}
|
|
1159
1137
|
return planeAcc;
|
|
@@ -1162,10 +1140,9 @@ let DxGrid = class DxGrid extends LitElement {
|
|
|
1162
1140
|
}, { grid: {} });
|
|
1163
1141
|
}
|
|
1164
1142
|
computeRowSizes() {
|
|
1165
|
-
|
|
1166
|
-
this.rowSizes = Object.entries((_a = this.rows) !== null && _a !== void 0 ? _a : {}).reduce((acc, [plane, planeRowMeta]) => {
|
|
1143
|
+
this.rowSizes = Object.entries(this.rows ?? {}).reduce((acc, [plane, planeRowMeta]) => {
|
|
1167
1144
|
acc[plane] = Object.entries(planeRowMeta).reduce((planeAcc, [row, rowMeta]) => {
|
|
1168
|
-
if (rowMeta
|
|
1145
|
+
if (rowMeta?.size) {
|
|
1169
1146
|
planeAcc[row] = rowMeta.size;
|
|
1170
1147
|
}
|
|
1171
1148
|
return planeAcc;
|
|
@@ -1228,20 +1205,20 @@ let DxGrid = class DxGrid extends LitElement {
|
|
|
1228
1205
|
this.refocus();
|
|
1229
1206
|
}
|
|
1230
1207
|
}
|
|
1231
|
-
updateIfWithinBounds({ col, row }) {
|
|
1208
|
+
updateIfWithinBounds({ col, row }, includeFixed) {
|
|
1232
1209
|
if (col >= this.visColMin && col <= this.visColMax && row >= this.visRowMin && row <= this.visRowMax) {
|
|
1210
|
+
this.updateCells(includeFixed);
|
|
1233
1211
|
this.requestUpdate();
|
|
1234
1212
|
return true;
|
|
1235
1213
|
}
|
|
1236
1214
|
return false;
|
|
1237
1215
|
}
|
|
1238
1216
|
disconnectedCallback() {
|
|
1239
|
-
var _a;
|
|
1240
1217
|
super.disconnectedCallback();
|
|
1241
1218
|
if (this.viewportRef.value) {
|
|
1242
1219
|
this.observer.unobserve(this.viewportRef.value);
|
|
1243
1220
|
}
|
|
1244
|
-
|
|
1221
|
+
document.defaultView?.removeEventListener('wheel', this.handleTopLevelWheel);
|
|
1245
1222
|
}
|
|
1246
1223
|
createRenderRoot() {
|
|
1247
1224
|
return this;
|
|
@@ -1386,6 +1363,6 @@ DxGrid = __decorate([
|
|
|
1386
1363
|
customElement('dx-grid')
|
|
1387
1364
|
], DxGrid);
|
|
1388
1365
|
export { DxGrid };
|
|
1389
|
-
export { rowToA1Notation, colToA1Notation, closestAction, closestCell, parseCellIndex, toPlaneCellIndex, cellQuery, } from './util';
|
|
1366
|
+
export { rowToA1Notation, colToA1Notation, closestAction, closestCell, parseCellIndex, toPlaneCellIndex, cellQuery, accessoryHandlesPointerdownAttrs, } from './util';
|
|
1390
1367
|
export const commentedClassName = 'dx-grid__cell--commented';
|
|
1391
1368
|
//# sourceMappingURL=dx-grid.js.map
|