@3mo/data-grid 0.26.4 → 0.27.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/DataGrid.d.ts +0 -2
- package/dist/DataGrid.d.ts.map +1 -1
- package/dist/DataGrid.js +241 -248
- package/dist/DataGridCell.js +38 -38
- package/dist/DataGridColumn.js +29 -29
- package/dist/DataGridColumnHeader.js +226 -226
- package/dist/DataGridHeader.js +100 -100
- package/dist/custom-elements.json +2 -2
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/dist/rows/DataGridDefaultRow.js +26 -26
- package/dist/rows/DataGridRow.d.ts.map +1 -1
- package/dist/rows/DataGridRow.js +224 -222
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +59 -59
package/dist/DataGrid.d.ts
CHANGED
|
@@ -2,7 +2,6 @@ import { Component, type PropertyValues, type HTMLTemplateResult } from '@a11d/l
|
|
|
2
2
|
import { LocalStorage } from '@a11d/local-storage';
|
|
3
3
|
import { InstanceofAttributeController } from '@3mo/instanceof-attribute-controller';
|
|
4
4
|
import { SlotController } from '@3mo/slot-controller';
|
|
5
|
-
import { ThemeController } from '@3mo/theme';
|
|
6
5
|
import { MediaQueryController } from '@3mo/media-query-observer';
|
|
7
6
|
import { DataGridColumnsController } from './DataGridColumnsController.js';
|
|
8
7
|
import { DataGridSelectionBehaviorOnDataChange, DataGridSelectionController, type DataGridSelectability } from './DataGridSelectionController.js';
|
|
@@ -177,7 +176,6 @@ export declare class DataGrid<TData, TDetailsElement extends Element | undefined
|
|
|
177
176
|
protected readonly slotController: SlotController;
|
|
178
177
|
protected readonly instanceofAttributeController: InstanceofAttributeController;
|
|
179
178
|
protected readonly smallScreenObserverController: MediaQueryController;
|
|
180
|
-
protected readonly themeController: ThemeController;
|
|
181
179
|
readonly columnsController: DataGridColumnsController<TData>;
|
|
182
180
|
readonly selectionController: DataGridSelectionController<TData>;
|
|
183
181
|
readonly sortingController: DataGridSortingController<TData>;
|
package/dist/DataGrid.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataGrid.d.ts","sourceRoot":"","sources":["../DataGrid.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,SAAS,EAA+B,KAAK,cAAc,EAAqC,KAAK,kBAAkB,EAAwD,MAAM,WAAW,CAAA;AAC9N,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAA;AAClD,OAAO,EAAE,6BAA6B,EAAE,MAAM,sCAAsC,CAAA;AACpF,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAErD,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"DataGrid.d.ts","sourceRoot":"","sources":["../DataGrid.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,SAAS,EAA+B,KAAK,cAAc,EAAqC,KAAK,kBAAkB,EAAwD,MAAM,WAAW,CAAA;AAC9N,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAA;AAClD,OAAO,EAAE,6BAA6B,EAAE,MAAM,sCAAsC,CAAA;AACpF,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAErD,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAA;AAIhE,OAAO,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAA;AAC1E,OAAO,EAAE,qCAAqC,EAAE,2BAA2B,EAAE,KAAK,qBAAqB,EAAE,MAAM,kCAAkC,CAAA;AACjJ,OAAO,EAAE,yBAAyB,EAAE,KAAK,4BAA4B,EAAE,KAAK,eAAe,EAAE,MAAM,gCAAgC,CAAA;AACnI,OAAO,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAA;AAC1E,OAAO,EAAE,KAAK,cAAc,EAAE,qBAAqB,EAAE,oBAAoB,EAAE,KAAK,YAAY,EAA4C,KAAK,WAAW,EAA0B,6BAA6B,EAAE,gCAAgC,EAAE,KAAK,qBAAqB,EAAE,MAAM,YAAY,CAAA;AACjS,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAO5C,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,MAAM,CAAA;AAEhD,oBAAY,mBAAmB;IAC9B,KAAK,UAAU;IACf,IAAI,SAAS;IACb,MAAM,WAAW;CACjB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6DG;AACH,qBACa,QAAQ,CAAC,KAAK,EAAE,eAAe,SAAS,OAAO,GAAG,SAAS,GAAG,SAAS,CAAE,SAAQ,SAAS;IACtG,MAAM,CAAC,QAAQ,CAAC,SAAS,uBAAqD;IAC9E,MAAM,CAAC,QAAQ,CAAC,oBAAoB,uBAAiE;IACrG,MAAM,CAAC,QAAQ,CAAC,QAAQ,uBAAiF;IACzG,MAAM,CAAC,QAAQ,CAAC,wBAAwB,wBAA8D;IACtG,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,oBAAoB,2CAAoC;IAEzE,QAAQ,CAAC,UAAU,EAAG,eAAe,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAA;IACnD,QAAQ,CAAC,eAAe,EAAG,eAAe,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAA;IACxD,QAAQ,CAAC,UAAU,EAAG,eAAe,CAAC,MAAM,CAAC,CAAA;IAC7C,QAAQ,CAAC,gBAAgB,EAAG,eAAe,CAAC,kBAAkB,GAAG,SAAS,CAAC,CAAA;IAC3E,QAAQ,CAAC,aAAa,EAAG,eAAe,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;IACtE,QAAQ,CAAC,aAAa,EAAG,eAAe,CAAC,oBAAoB,CAAC,CAAA;IAC9D,QAAQ,CAAC,cAAc,EAAG,eAAe,CAAA;IACzC,QAAQ,CAAC,aAAa,EAAG,eAAe,CAAC,KAAK,CAAC,4BAA4B,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;IACpF,QAAQ,CAAC,OAAO,EAAG,eAAe,CAAC,KAAK,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;IACvE,QAAQ,CAAC,cAAc,EAAG,eAAe,CAAC,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAA;IAC9E,QAAQ,CAAC,eAAe,EAAG,eAAe,CAAC,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAA;IAC/E,QAAQ,CAAC,QAAQ,EAAG,eAAe,CAAC,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAA;IACxE,QAAQ,CAAC,cAAc,EAAG,eAAe,CAAC,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAA;IAC9E,QAAQ,CAAC,cAAc,EAAG,eAAe,CAAC,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAA;IAC9E,QAAQ,CAAC,QAAQ,EAAG,eAAe,CAAC,YAAY,CAAC,GAAG,EAAE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAA;IAE5D,IAAI,UAAqB;IACzB,OAAO,+BAAqC;IAE3B,YAAY,UAAQ;IACpB,4BAA4B,UAAQ;IACpD,IAAI,SAAI;IACmJ,UAAU,CAAC,EAAE,kBAAkB,CAAA;IAE1L,OAAO,CAAC,EAAE,eAAe,CAAC,KAAK,CAAC,CAAA;IAE/B,aAAa,CAAC,EAAE,qBAAqB,CAAA;IACtC,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,OAAO,CAAA;IAClB,YAAY,UAAqB;IACzD,aAAa,UAAQ;IACtC,6BAA6B,wCAA8C;IAE1D,cAAc,CAAC,EAAE,OAAO,CAAA;IAEzB,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,kBAAkB,CAAA;IAC1D,eAAe,UAAQ;IACxC,uBAAuB,CAAC,EAAE,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,CAAA;IAC3B,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,OAAO,CAAA;IACvC,cAAc,UAAQ;IAEvB,yBAAyB,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,kBAAkB,CAAA;IACrE,mCAAmC,UAAQ;IAE3C,WAAW,sBAA4B;IAExD,YAAY,EAAE,oBAAoB,GAAG,SAAS,CAAA;IAC7B,eAAe,UAAQ;IACvB,wBAAwB,UAA0C;IAElE,kBAAkB,UAAQ;IACX,SAAS,CAAC,gBAAgB,UAAQ;IAEjD,UAAU,UAAQ;IAQ5C,YAAY,SAAsC;IAQlD,SAAS,SAA2B;IAET,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAuB;IACvD,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAU;IAC1B,QAAQ,CAAC,IAAI,EAAG,KAAK,CAAC,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAA;IAC5D,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAuB;IAC3C,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAC,CAA0B;IAEvF,OAAO,CAAC,IAAI,EAAE,MAAM;IAKpB,aAAa,CAAC,UAAU,CAAC,EAAE,kBAAkB;IAK7C,OAAO,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE,iBAAiB,wCAAqC;IAMlF,IAAI,YAAY,YAEf;IAED,SAAS,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,OAAO,IAAI,CAAC,mBAAmB,CAAC,SAAS,CAAC;IAI9E,WAAW,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,OAAO,IAAI,CAAC,mBAAmB,CAAC,WAAW,CAAC;IAIlF,MAAM,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,OAAO,IAAI,CAAC,mBAAmB,CAAC,MAAM,CAAC;IAIxE,YAAY,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,OAAO,IAAI,CAAC,mBAAmB,CAAC,YAAY,CAAC;IAIpF,IAAI,UAAU,YAEb;IAED,IAAI,iBAAiB,YAEpB;IAED,cAAc,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,OAAO,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC;IAI/E,eAAe,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,OAAO,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC;IAIjF,gBAAgB,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,OAAO,IAAI,CAAC,iBAAiB,CAAC,SAAS,CAAC;IAInF,UAAU,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,OAAO,yBAAyB,CAAC,SAAS,CAAC,GAAG,CAAC;IAIpF,IAAI,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,OAAO,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC;IAIjE,MAAM,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,OAAO,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC;IAIrE,WAAW,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,OAAO,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC;IAI5E,UAAU,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,OAAO,IAAI,CAAC,iBAAiB,CAAC,UAAU,CAAC;IAI9E,cAAc,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,OAAO,IAAI,CAAC,iBAAiB,CAAC,cAAc,CAAC;IAKtF,SAAS,CAAC,kBAAkB,CAAC,CAAC,EAAE,WAAW;IAK3C,IAAI,gBAAgB,iCAEnB;IAED,uBAAuB,CAAC,gBAAgB,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;IAItE,IAAI,cAAc,iCAEjB;IAED,MAAM,CAAC,IAAI,EAAE,KAAK;IAIlB,OAAO,CAAC,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,cAAc,CAAC,KAAK,CAAC;IAKlD,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,cAAc,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,OAAO,CAAC,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,GAAG,SAAS;IAUnH,sBAAsB,CAAC,GAAG,CAAC,EAAE,oBAAoB;IAKjD,IAAI,cAAc,YAEjB;IAED,IAAI,eAAe,cAElB;IAED,IAAI,UAAU,YAEb;IAED,IAAI,cAAc,cAEjB;IAED,IAAI,UAAU,YAEb;IAED,IAAI,OAAO,YAIV;IAED,IAAI,OAAO,YAIV;IAED,IAAI,aAAa,YAEhB;IAED,IAAI,uBAAuB,YAE1B;IAED,IAAI,QAAQ,WAgBX;IAED,IAAI,SAAS,YAIZ;IAED,IAAI,UAAU,IAAI,MAAM,GAAG,SAAS,CAEnC;IAED,IAAI,OAAO,uBAEV;IAED,IAAI,WAAW,YAEd;IAED,SAAS,CAAC,QAAQ,CAAC,cAAc,iBAK/B;IAEF,SAAS,CAAC,QAAQ,CAAC,6BAA6B,gCAA0C;IAC1F,SAAS,CAAC,QAAQ,CAAC,6BAA6B,uBAAuD;IAEvG,QAAQ,CAAC,iBAAiB,mCAAsC;IAChE,QAAQ,CAAC,mBAAmB,qCAAwC;IACpE,QAAQ,CAAC,iBAAiB,mCAAsC;IAChE,QAAQ,CAAC,qBAAqB,uCAA0C;IACxE,QAAQ,CAAC,iBAAiB,mCAAsC;IAChE,QAAQ,CAAC,aAAa,+BAAyC;IAC/D,QAAQ,CAAC,wBAAwB,0CAA6C;IAE9E,QAAQ,CAAC,uBAAuB,CAAC,EAAE,oBAAoB,CAAA;cAEpC,OAAO,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;IAkB1E,OAAO,CAAC,+BAA+B;cAMpB,YAAY,CAAC,KAAK,EAAE,cAAc;IAMrD,WAAoB,MAAM,kCAsHzB;IAED,cAAuB,QAAQ,uBAM9B;IAED,OAAO,CAAC,QAAQ,CAAC,uBAAuB,CAEvC;IAED,OAAO,KAAK,oBAAoB,GAc/B;IAED,OAAO,KAAK,mBAAmB,GAO9B;IAED,OAAO,KAAK,iBAAiB,GAU5B;IAED,SAAS,KAAK,uBAAuB,uBAEpC;IAED,SAAS,KAAK,sBAAsB,uBAEnC;IAED,SAAS,KAAK,eAAe,uBAE5B;IAED,SAAS,KAAK,aAAa,6CAE1B;IAED,IAAI,qBAAqB,YAExB;IAED,SAAS,KAAK,WAAW,uBAOxB;IAED,SAAS,KAAK,eAAe,uBAE5B;IAED,SAAS,KAAK,iBAAiB,uBAM9B;IAED,SAAS,KAAK,gBAAgB,uBAiB7B;IAED,SAAS,KAAK,cAAc,uBAI3B;IAED,OAAO,KAAK,YAAY,GAMvB;IAED;;;;;OAKG;IACH,OAAO,KAAK,2BAA2B,GA8CtC;IAED,cAAc,CAAC,UAAU,EAAE,UAAU,CAAC,KAAK,CAAC,EAAE,KAAK,SAAI;IAUvD,SAAS,KAAK,cAAc,uBAa3B;IAED,IAAI,YAAY,IAAI,kBAAkB,CAIrC;IAED,SAAS,KAAK,eAAe,uBAU5B;IAED,SAAS,KAAK,sBAAsB,uBAEnC;IAED,SAAS,KAAK,4BAA4B,uBAEzC;IAED,SAAS,KAAK,kBAAkB,uBAE/B;IAED,SAAS,KAAK,sBAAsB,uBAgBnC;IAED,OAAO,CAAC,oBAAoB,CAAI;IAEhC,OAAO,CAAC,YAAY;IAkBpB,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,YAAY;IAI/C,SAAS,CAAC,gBAAgB,CAAC,MAAM,UAAY;IAM7C,IAAI,WAAW,IAAI,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAO1C;IAED,IAAI,iBAAiB,wBAUpB;IAED,SAAS,KAAK,QAAQ,WAErB;IAED,SAAS,KAAK,QAAQ,WAErB;IAEM,UAAU;CAIjB;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,cAAc,EAAE,QAAQ,CAAC,OAAO,EAAE,SAAS,CAAC,CAAA;KAC5C;CACD"}
|
package/dist/DataGrid.js
CHANGED
|
@@ -5,7 +5,6 @@ import { LocalStorage } from '@a11d/local-storage';
|
|
|
5
5
|
import { InstanceofAttributeController } from '@3mo/instanceof-attribute-controller';
|
|
6
6
|
import { SlotController } from '@3mo/slot-controller';
|
|
7
7
|
import { tooltip } from '@3mo/tooltip';
|
|
8
|
-
import { ThemeController } from '@3mo/theme';
|
|
9
8
|
import { MediaQueryController } from '@3mo/media-query-observer';
|
|
10
9
|
import { Localizer } from '@3mo/localization';
|
|
11
10
|
import { observeResize } from '@3mo/resize-observer';
|
|
@@ -117,7 +116,6 @@ let DataGrid = class DataGrid extends Component {
|
|
|
117
116
|
});
|
|
118
117
|
this.instanceofAttributeController = new InstanceofAttributeController(this);
|
|
119
118
|
this.smallScreenObserverController = new MediaQueryController(this, '(max-width: 768px)');
|
|
120
|
-
this.themeController = new ThemeController(this);
|
|
121
119
|
this.columnsController = new DataGridColumnsController(this);
|
|
122
120
|
this.selectionController = new DataGridSelectionController(this);
|
|
123
121
|
this.sortingController = new DataGridSortingController(this);
|
|
@@ -125,8 +123,8 @@ let DataGrid = class DataGrid extends Component {
|
|
|
125
123
|
this.detailsController = new DataGridDetailsController(this);
|
|
126
124
|
this.csvController = new DataGridCsvController(this);
|
|
127
125
|
this.reorderabilityController = new DataGridReorderabilityController(this);
|
|
128
|
-
this.splitterResizerTemplate = html `
|
|
129
|
-
<mo-splitter-resizer-line style='--mo-splitter-resizer-line-thickness: 1px; --mo-splitter-resizer-line-idle-background: var(--mo-color-transparent-gray-3); --mo-splitter-resizer-line-horizontal-transform: scaleX(5);'></mo-splitter-resizer-line>
|
|
126
|
+
this.splitterResizerTemplate = html `
|
|
127
|
+
<mo-splitter-resizer-line style='--mo-splitter-resizer-line-thickness: 1px; --mo-splitter-resizer-line-idle-background: var(--mo-color-transparent-gray-3); --mo-splitter-resizer-line-horizontal-transform: scaleX(5);'></mo-splitter-resizer-line>
|
|
130
128
|
`;
|
|
131
129
|
this.lastScrollElementTop = 0;
|
|
132
130
|
}
|
|
@@ -316,168 +314,163 @@ let DataGrid = class DataGrid extends Component {
|
|
|
316
314
|
this.setPage(1);
|
|
317
315
|
}
|
|
318
316
|
static get styles() {
|
|
319
|
-
return css `
|
|
320
|
-
:host {
|
|
321
|
-
--mo-data-grid-column-reorder-width: 20px;
|
|
322
|
-
--mo-data-grid-column-details-width: 20px;
|
|
323
|
-
--mo-data-grid-column-selection-width: 40px;
|
|
324
|
-
--mo-data-grid-column-actions-width: 28px;
|
|
325
|
-
--mo-data-grid-cell-padding: 0.5rem;
|
|
326
|
-
--mo-data-grid-header-height: 32px;
|
|
327
|
-
--mo-data-grid-footer-min-height: 40px;
|
|
328
|
-
--mo-data-grid-toolbar-padding: 0px 14px 14px 14px;
|
|
329
|
-
--mo-data-grid-border: 1px solid var(--mo-color-transparent-gray-3);
|
|
330
|
-
|
|
331
|
-
--mo-details-data-grid-start-margin: 26px;
|
|
332
|
-
|
|
333
|
-
--mo-data-grid-sticky-part-color: var(--mo-color-surface);
|
|
334
|
-
|
|
335
|
-
--mo-data-grid-alternating-background:
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
height:
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
}
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
}
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
position:
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
height: 100%;
|
|
436
|
-
z-index: 5;
|
|
437
|
-
background-color: var(--mo-color-surface);
|
|
438
|
-
}
|
|
439
|
-
}
|
|
317
|
+
return css `
|
|
318
|
+
:host {
|
|
319
|
+
--mo-data-grid-column-reorder-width: 20px;
|
|
320
|
+
--mo-data-grid-column-details-width: 20px;
|
|
321
|
+
--mo-data-grid-column-selection-width: 40px;
|
|
322
|
+
--mo-data-grid-column-actions-width: 28px;
|
|
323
|
+
--mo-data-grid-cell-padding: 0.5rem;
|
|
324
|
+
--mo-data-grid-header-height: 32px;
|
|
325
|
+
--mo-data-grid-footer-min-height: 40px;
|
|
326
|
+
--mo-data-grid-toolbar-padding: 0px 14px 14px 14px;
|
|
327
|
+
--mo-data-grid-border: 1px solid var(--mo-color-transparent-gray-3);
|
|
328
|
+
|
|
329
|
+
--mo-details-data-grid-start-margin: 26px;
|
|
330
|
+
|
|
331
|
+
--mo-data-grid-sticky-part-color: var(--mo-color-surface);
|
|
332
|
+
|
|
333
|
+
--mo-data-grid-alternating-background: light-dark(
|
|
334
|
+
color-mix(in srgb, black 5%, transparent),
|
|
335
|
+
color-mix(in srgb, black 20%, transparent)
|
|
336
|
+
);
|
|
337
|
+
|
|
338
|
+
--mo-data-grid-selection-background: color-mix(in srgb, var(--mo-color-accent), transparent 50%);
|
|
339
|
+
|
|
340
|
+
--_content-min-height-default: calc(var(--mo-data-grid-min-visible-rows, 2.5) * var(--mo-data-grid-row-height) + var(--mo-data-grid-header-height));
|
|
341
|
+
display: flex;
|
|
342
|
+
flex-direction: column;
|
|
343
|
+
height: 100%;
|
|
344
|
+
overflow-x: hidden;
|
|
345
|
+
}
|
|
346
|
+
|
|
347
|
+
:not(:has([mo-data-grid-row])) {
|
|
348
|
+
--_content-min-height-default: 150px;
|
|
349
|
+
}
|
|
350
|
+
|
|
351
|
+
:host([preventVerticalContentScroll]) mo-scroller {
|
|
352
|
+
overflow-y: hidden;
|
|
353
|
+
|
|
354
|
+
&::part(container) {
|
|
355
|
+
position: relative;
|
|
356
|
+
}
|
|
357
|
+
}
|
|
358
|
+
|
|
359
|
+
#content {
|
|
360
|
+
width: fit-content;
|
|
361
|
+
min-width: 100%;
|
|
362
|
+
height: min-content;
|
|
363
|
+
min-height: 100%;
|
|
364
|
+
}
|
|
365
|
+
|
|
366
|
+
#toolbar {
|
|
367
|
+
position: relative;
|
|
368
|
+
padding: var(--mo-data-grid-toolbar-padding);
|
|
369
|
+
|
|
370
|
+
#actions {
|
|
371
|
+
margin-inline-start: auto;
|
|
372
|
+
|
|
373
|
+
mo-icon-button, ::slotted(mo-icon-button[slot='toolbar-action']) {
|
|
374
|
+
color: var(--mo-color-gray);
|
|
375
|
+
&[data-selected] {
|
|
376
|
+
color: var(--mo-color-accent);
|
|
377
|
+
}
|
|
378
|
+
}
|
|
379
|
+
}
|
|
380
|
+
}
|
|
381
|
+
|
|
382
|
+
#fab {
|
|
383
|
+
position: absolute;
|
|
384
|
+
inset-inline-end: 16px;
|
|
385
|
+
transition: var(--mo-data-grid-fab-transition, 250ms);
|
|
386
|
+
z-index: 3;
|
|
387
|
+
top: -64px;
|
|
388
|
+
}
|
|
389
|
+
|
|
390
|
+
:host([hasFooter]) #fab {
|
|
391
|
+
top: -28px;
|
|
392
|
+
}
|
|
393
|
+
|
|
394
|
+
:host([fabSlotCollapsed][hasFabs]) #fab {
|
|
395
|
+
transform: scale(0);
|
|
396
|
+
opacity: 0;
|
|
397
|
+
}
|
|
398
|
+
|
|
399
|
+
mo-data-grid-footer {
|
|
400
|
+
transition: var(--mo-data-grid-fab-transition, 250ms);
|
|
401
|
+
}
|
|
402
|
+
|
|
403
|
+
:host([hasSums][hasFabs]:not([fabSlotCollapsed])) mo-data-grid-footer {
|
|
404
|
+
--mo-data-grid-footer-trailing-padding: calc(var(--mo-data-grid-fab-slot-width, 56px) + 16px);
|
|
405
|
+
}
|
|
406
|
+
|
|
407
|
+
slot[name=fab] {
|
|
408
|
+
display: block;
|
|
409
|
+
z-index: 1;
|
|
410
|
+
}
|
|
411
|
+
|
|
412
|
+
mo-empty-state, ::slotted(mo-empty-state) {
|
|
413
|
+
height: calc(100% - var(--mo-data-grid-header-height) / 2);
|
|
414
|
+
margin-block-start: calc(var(--mo-data-grid-header-height) / 2);
|
|
415
|
+
position: absolute;
|
|
416
|
+
inset: 0;
|
|
417
|
+
}
|
|
418
|
+
|
|
419
|
+
#overlayModeContainer {
|
|
420
|
+
position: relative;
|
|
421
|
+
height: 100%;
|
|
422
|
+
width: 100%;
|
|
423
|
+
|
|
424
|
+
mo-data-grid-side-panel {
|
|
425
|
+
position: absolute;
|
|
426
|
+
inset: 0;
|
|
427
|
+
width: 100%;
|
|
428
|
+
height: 100%;
|
|
429
|
+
z-index: 5;
|
|
430
|
+
background-color: var(--mo-color-surface);
|
|
431
|
+
}
|
|
432
|
+
}
|
|
440
433
|
`;
|
|
441
434
|
}
|
|
442
435
|
get template() {
|
|
443
|
-
return html `
|
|
444
|
-
<slot name='column' hidden>${this.columnsTemplate}</slot>
|
|
445
|
-
${this.toolbarTemplate}
|
|
446
|
-
${this.smallScreenObserverController.matches ? this.overlayModeTemplate : this.splitterModeTemplate}
|
|
436
|
+
return html `
|
|
437
|
+
<slot name='column' hidden>${this.columnsTemplate}</slot>
|
|
438
|
+
${this.toolbarTemplate}
|
|
439
|
+
${this.smallScreenObserverController.matches ? this.overlayModeTemplate : this.splitterModeTemplate}
|
|
447
440
|
`;
|
|
448
441
|
}
|
|
449
442
|
get splitterModeTemplate() {
|
|
450
|
-
return html `
|
|
451
|
-
<mo-splitter direction='horizontal-reversed' ${style({ height: '100%' })} .resizerTemplate=${this.splitterResizerTemplate}>
|
|
452
|
-
${cache(this.sidePanelTab === undefined ? html.nothing : html `
|
|
453
|
-
<mo-splitter-item size='min(25%, 300px)' min='max(15%, 250px)' max='clamp(100px, 50%, 750px)'>
|
|
454
|
-
${this.sidePanelTemplate}
|
|
455
|
-
</mo-splitter-item>
|
|
456
|
-
`)}
|
|
457
|
-
|
|
458
|
-
<mo-splitter-item min='0px' ${style({ position: 'relative' })}>
|
|
459
|
-
${this.dataGridTemplate}
|
|
460
|
-
</mo-splitter-item>
|
|
461
|
-
</mo-splitter>
|
|
443
|
+
return html `
|
|
444
|
+
<mo-splitter direction='horizontal-reversed' ${style({ height: '100%' })} .resizerTemplate=${this.splitterResizerTemplate}>
|
|
445
|
+
${cache(this.sidePanelTab === undefined ? html.nothing : html `
|
|
446
|
+
<mo-splitter-item size='min(25%, 300px)' min='max(15%, 250px)' max='clamp(100px, 50%, 750px)'>
|
|
447
|
+
${this.sidePanelTemplate}
|
|
448
|
+
</mo-splitter-item>
|
|
449
|
+
`)}
|
|
450
|
+
|
|
451
|
+
<mo-splitter-item min='0px' ${style({ position: 'relative' })}>
|
|
452
|
+
${this.dataGridTemplate}
|
|
453
|
+
</mo-splitter-item>
|
|
454
|
+
</mo-splitter>
|
|
462
455
|
`;
|
|
463
456
|
}
|
|
464
457
|
get overlayModeTemplate() {
|
|
465
|
-
return html `
|
|
466
|
-
<mo-flex id='overlayModeContainer'>
|
|
467
|
-
${this.dataGridTemplate}
|
|
468
|
-
${this.sidePanelTab === undefined ? html.nothing : this.sidePanelTemplate}
|
|
469
|
-
</mo-flex>
|
|
458
|
+
return html `
|
|
459
|
+
<mo-flex id='overlayModeContainer'>
|
|
460
|
+
${this.dataGridTemplate}
|
|
461
|
+
${this.sidePanelTab === undefined ? html.nothing : this.sidePanelTemplate}
|
|
462
|
+
</mo-flex>
|
|
470
463
|
`;
|
|
471
464
|
}
|
|
472
465
|
get sidePanelTemplate() {
|
|
473
|
-
return html `
|
|
474
|
-
<mo-data-grid-side-panel
|
|
475
|
-
.dataGrid=${this}
|
|
476
|
-
tab=${ifDefined(this.sidePanelTab)}
|
|
477
|
-
>
|
|
478
|
-
<slot slot='settings' name='settings'>${this.settingsDefaultTemplate}</slot>
|
|
479
|
-
<slot slot='filter' name='filter'>${this.filtersDefaultTemplate}</slot>
|
|
480
|
-
</mo-data-grid-side-panel>
|
|
466
|
+
return html `
|
|
467
|
+
<mo-data-grid-side-panel
|
|
468
|
+
.dataGrid=${this}
|
|
469
|
+
tab=${ifDefined(this.sidePanelTab)}
|
|
470
|
+
>
|
|
471
|
+
<slot slot='settings' name='settings'>${this.settingsDefaultTemplate}</slot>
|
|
472
|
+
<slot slot='filter' name='filter'>${this.filtersDefaultTemplate}</slot>
|
|
473
|
+
</mo-data-grid-side-panel>
|
|
481
474
|
`;
|
|
482
475
|
}
|
|
483
476
|
get settingsDefaultTemplate() {
|
|
@@ -499,48 +492,48 @@ let DataGrid = class DataGrid extends Component {
|
|
|
499
492
|
// These also update the respective attributes for now
|
|
500
493
|
this.hasSums;
|
|
501
494
|
this.hasFabs;
|
|
502
|
-
return html `
|
|
503
|
-
<slot name='fab' @slotchange=${() => { this.hasSums; this.hasFabs; }}></slot>
|
|
495
|
+
return html `
|
|
496
|
+
<slot name='fab' @slotchange=${() => { this.hasSums; this.hasFabs; }}></slot>
|
|
504
497
|
`;
|
|
505
498
|
}
|
|
506
499
|
get contentTemplate() {
|
|
507
500
|
return !this.data.length ? this.noContentTemplate : this.rowsTemplate;
|
|
508
501
|
}
|
|
509
502
|
get noContentTemplate() {
|
|
510
|
-
return html `
|
|
511
|
-
<slot name='error-no-content'>
|
|
512
|
-
<mo-empty-state icon='youtube_searched_for'>${t('No results')}</mo-empty-state>
|
|
513
|
-
</slot>
|
|
503
|
+
return html `
|
|
504
|
+
<slot name='error-no-content'>
|
|
505
|
+
<mo-empty-state icon='youtube_searched_for'>${t('No results')}</mo-empty-state>
|
|
506
|
+
</slot>
|
|
514
507
|
`;
|
|
515
508
|
}
|
|
516
509
|
get dataGridTemplate() {
|
|
517
510
|
this.toggleAttribute('hasDetails', this.hasDetails);
|
|
518
|
-
return html `
|
|
519
|
-
<mo-grid rows='* auto' ${style({ position: 'relative', height: '100%' })}>
|
|
520
|
-
<mo-scroller
|
|
521
|
-
${style({ minHeight: 'var(--mo-data-grid-content-min-height, var(--_content-min-height-default))' })}
|
|
522
|
-
${observeResize(([e]) => this.style.setProperty('--_content-height', `${e?.contentRect.height ?? 0}px`))}
|
|
523
|
-
@scroll=${this.handleScroll}
|
|
524
|
-
>
|
|
525
|
-
<mo-grid id='content' autoRows='min-content' columns='var(--mo-data-grid-columns)'>
|
|
526
|
-
${this.headerTemplate}
|
|
527
|
-
${this.contentTemplate}
|
|
528
|
-
</mo-grid>
|
|
529
|
-
</mo-scroller>
|
|
530
|
-
${this.footerTemplate}
|
|
531
|
-
</mo-grid>
|
|
511
|
+
return html `
|
|
512
|
+
<mo-grid rows='* auto' ${style({ position: 'relative', height: '100%' })}>
|
|
513
|
+
<mo-scroller
|
|
514
|
+
${style({ minHeight: 'var(--mo-data-grid-content-min-height, var(--_content-min-height-default))' })}
|
|
515
|
+
${observeResize(([e]) => this.style.setProperty('--_content-height', `${e?.contentRect.height ?? 0}px`))}
|
|
516
|
+
@scroll=${this.handleScroll}
|
|
517
|
+
>
|
|
518
|
+
<mo-grid id='content' autoRows='min-content' columns='var(--mo-data-grid-columns)'>
|
|
519
|
+
${this.headerTemplate}
|
|
520
|
+
${this.contentTemplate}
|
|
521
|
+
</mo-grid>
|
|
522
|
+
</mo-scroller>
|
|
523
|
+
${this.footerTemplate}
|
|
524
|
+
</mo-grid>
|
|
532
525
|
`;
|
|
533
526
|
}
|
|
534
527
|
get headerTemplate() {
|
|
535
|
-
return this.headerHidden ? html.nothing : html `
|
|
536
|
-
<mo-data-grid-header .dataGrid=${this}></mo-data-grid-header>
|
|
528
|
+
return this.headerHidden ? html.nothing : html `
|
|
529
|
+
<mo-data-grid-header .dataGrid=${this}></mo-data-grid-header>
|
|
537
530
|
`;
|
|
538
531
|
}
|
|
539
532
|
get rowsTemplate() {
|
|
540
533
|
// Do not use the data-record or data as the key as it leads to UI flickering
|
|
541
|
-
return html `
|
|
542
|
-
${this.hiddenSizeAnchorRowTemplate}
|
|
543
|
-
${repeat(this.renderDataRecords, record => record.index, (record, index) => this.getRowTemplate(record, index))}
|
|
534
|
+
return html `
|
|
535
|
+
${this.hiddenSizeAnchorRowTemplate}
|
|
536
|
+
${repeat(this.renderDataRecords, record => record.index, (record, index) => this.getRowTemplate(record, index))}
|
|
544
537
|
`;
|
|
545
538
|
}
|
|
546
539
|
/**
|
|
@@ -565,73 +558,73 @@ let DataGrid = class DataGrid extends Component {
|
|
|
565
558
|
.map(dr => column.getContentTemplate?.(KeyPath.get(dr.data, column.dataSelector), dr.data) ?? html.nothing)
|
|
566
559
|
.reduce((longest, current) => (getLength(current) > getLength(longest)) || false ? current : longest, html.nothing);
|
|
567
560
|
};
|
|
568
|
-
return html `
|
|
569
|
-
<style>
|
|
570
|
-
#size-anchor {
|
|
571
|
-
display: grid;
|
|
572
|
-
grid-template-columns: subgrid;
|
|
573
|
-
grid-column: data / end;
|
|
574
|
-
font-size: var(--mo-data-grid-cell-font-size);
|
|
575
|
-
height: 0;
|
|
576
|
-
visibility: hidden;
|
|
577
|
-
opacity: 0;
|
|
578
|
-
|
|
579
|
-
div {
|
|
580
|
-
user-select: none;
|
|
581
|
-
white-space: nowrap;
|
|
582
|
-
overflow: hidden;
|
|
583
|
-
text-overflow: ellipsis;
|
|
584
|
-
padding-inline: var(--mo-data-grid-cell-padding);
|
|
585
|
-
margin-inline-start: calc(var(--_max-level, 0) * var(--mo-data-grid-column-sub-row-indentation, 20px))
|
|
586
|
-
}
|
|
587
|
-
}
|
|
588
|
-
</style>
|
|
589
|
-
<div id='size-anchor'>
|
|
590
|
-
${this.visibleColumns.map(column => html `
|
|
591
|
-
<div style='--_max-level: ${Math.max(...this.dataRecords.map(dr => dr.level))}'>
|
|
592
|
-
${getLongestContent(column)}
|
|
593
|
-
</div>
|
|
594
|
-
`)}
|
|
595
|
-
</div>
|
|
561
|
+
return html `
|
|
562
|
+
<style>
|
|
563
|
+
#size-anchor {
|
|
564
|
+
display: grid;
|
|
565
|
+
grid-template-columns: subgrid;
|
|
566
|
+
grid-column: data / end;
|
|
567
|
+
font-size: var(--mo-data-grid-cell-font-size);
|
|
568
|
+
height: 0;
|
|
569
|
+
visibility: hidden;
|
|
570
|
+
opacity: 0;
|
|
571
|
+
|
|
572
|
+
div {
|
|
573
|
+
user-select: none;
|
|
574
|
+
white-space: nowrap;
|
|
575
|
+
overflow: hidden;
|
|
576
|
+
text-overflow: ellipsis;
|
|
577
|
+
padding-inline: var(--mo-data-grid-cell-padding);
|
|
578
|
+
margin-inline-start: calc(var(--_max-level, 0) * var(--mo-data-grid-column-sub-row-indentation, 20px))
|
|
579
|
+
}
|
|
580
|
+
}
|
|
581
|
+
</style>
|
|
582
|
+
<div id='size-anchor'>
|
|
583
|
+
${this.visibleColumns.map(column => html `
|
|
584
|
+
<div style='--_max-level: ${Math.max(...this.dataRecords.map(dr => dr.level))}'>
|
|
585
|
+
${getLongestContent(column)}
|
|
586
|
+
</div>
|
|
587
|
+
`)}
|
|
588
|
+
</div>
|
|
596
589
|
`;
|
|
597
590
|
}
|
|
598
591
|
getRowTemplate(dataRecord, index = 0) {
|
|
599
|
-
return staticHtml `
|
|
600
|
-
<${this.rowElementTag} part='row'
|
|
601
|
-
${this.reorderabilityController.item({ index: dataRecord.index, disabled: !this.reorderabilityController.enabled })}
|
|
602
|
-
.dataRecord=${dataRecord}
|
|
603
|
-
?data-has-alternating-background=${this.hasAlternatingBackground && index % 2 === 1}
|
|
604
|
-
></${this.rowElementTag}>
|
|
592
|
+
return staticHtml `
|
|
593
|
+
<${this.rowElementTag} part='row'
|
|
594
|
+
${this.reorderabilityController.item({ index: dataRecord.index, disabled: !this.reorderabilityController.enabled })}
|
|
595
|
+
.dataRecord=${dataRecord}
|
|
596
|
+
?data-has-alternating-background=${this.hasAlternatingBackground && index % 2 === 1}
|
|
597
|
+
></${this.rowElementTag}>
|
|
605
598
|
`;
|
|
606
599
|
}
|
|
607
600
|
get footerTemplate() {
|
|
608
|
-
return html `
|
|
609
|
-
<mo-flex ${style({ position: 'relative' })}>
|
|
610
|
-
<mo-flex id='fab' direction='vertical-reversed' gap='0.5rem'>
|
|
611
|
-
${this.fabTemplate}
|
|
612
|
-
</mo-flex>
|
|
613
|
-
${this.hasFooter === false ? html.nothing : html `
|
|
614
|
-
<mo-data-grid-footer .dataGrid=${this} page=${this.page}>
|
|
615
|
-
<slot name='sum' slot='sum'>${this.sumDefaultTemplate}</slot>
|
|
616
|
-
</mo-data-grid-footer>
|
|
617
|
-
`}
|
|
618
|
-
</mo-flex>
|
|
601
|
+
return html `
|
|
602
|
+
<mo-flex ${style({ position: 'relative' })}>
|
|
603
|
+
<mo-flex id='fab' direction='vertical-reversed' gap='0.5rem'>
|
|
604
|
+
${this.fabTemplate}
|
|
605
|
+
</mo-flex>
|
|
606
|
+
${this.hasFooter === false ? html.nothing : html `
|
|
607
|
+
<mo-data-grid-footer .dataGrid=${this} page=${this.page}>
|
|
608
|
+
<slot name='sum' slot='sum'>${this.sumDefaultTemplate}</slot>
|
|
609
|
+
</mo-data-grid-footer>
|
|
610
|
+
`}
|
|
611
|
+
</mo-flex>
|
|
619
612
|
`;
|
|
620
613
|
}
|
|
621
614
|
get sumsTemplate() {
|
|
622
|
-
return html `
|
|
623
|
-
${this.columns.map(c => c.sumTemplate)}
|
|
615
|
+
return html `
|
|
616
|
+
${this.columns.map(c => c.sumTemplate)}
|
|
624
617
|
`;
|
|
625
618
|
}
|
|
626
619
|
get toolbarTemplate() {
|
|
627
|
-
return this.hasToolbar === false ? html.nothing : html `
|
|
628
|
-
<mo-flex id='toolbar' direction='horizontal' gap='8px' wrap='wrap' alignItems='center'>
|
|
629
|
-
<slot name='toolbar'>${this.toolbarDefaultTemplate}</slot>
|
|
630
|
-
<mo-flex id='actions' direction='horizontal' gap='8px' alignContent='center'>
|
|
631
|
-
<slot name='toolbar-action'>${this.toolbarActionDefaultTemplate}</slot>
|
|
632
|
-
${this.toolbarActionsTemplate}
|
|
633
|
-
</mo-flex>
|
|
634
|
-
</mo-flex>
|
|
620
|
+
return this.hasToolbar === false ? html.nothing : html `
|
|
621
|
+
<mo-flex id='toolbar' direction='horizontal' gap='8px' wrap='wrap' alignItems='center'>
|
|
622
|
+
<slot name='toolbar'>${this.toolbarDefaultTemplate}</slot>
|
|
623
|
+
<mo-flex id='actions' direction='horizontal' gap='8px' alignContent='center'>
|
|
624
|
+
<slot name='toolbar-action'>${this.toolbarActionDefaultTemplate}</slot>
|
|
625
|
+
${this.toolbarActionsTemplate}
|
|
626
|
+
</mo-flex>
|
|
627
|
+
</mo-flex>
|
|
635
628
|
`;
|
|
636
629
|
}
|
|
637
630
|
get toolbarDefaultTemplate() {
|
|
@@ -644,20 +637,20 @@ let DataGrid = class DataGrid extends Component {
|
|
|
644
637
|
return html.nothing;
|
|
645
638
|
}
|
|
646
639
|
get toolbarActionsTemplate() {
|
|
647
|
-
return html `
|
|
648
|
-
${!this.hasFilters ? html.nothing : html `
|
|
649
|
-
<mo-icon-button icon='filter_list'
|
|
650
|
-
${tooltip(t('More Filters'))}
|
|
651
|
-
?data-selected=${this.sidePanelTab === DataGridSidePanelTab.Filters}
|
|
652
|
-
@click=${() => this.navigateToSidePanelTab(this.sidePanelTab === DataGridSidePanelTab.Filters ? undefined : DataGridSidePanelTab.Filters)}
|
|
653
|
-
></mo-icon-button>
|
|
654
|
-
`}
|
|
655
|
-
|
|
656
|
-
<mo-icon-button icon='settings'
|
|
657
|
-
${tooltip(t('Settings'))}
|
|
658
|
-
?data-selected=${this.sidePanelTab === DataGridSidePanelTab.Settings}
|
|
659
|
-
@click=${() => this.navigateToSidePanelTab(this.sidePanelTab === DataGridSidePanelTab.Settings ? undefined : DataGridSidePanelTab.Settings)}
|
|
660
|
-
></mo-icon-button>
|
|
640
|
+
return html `
|
|
641
|
+
${!this.hasFilters ? html.nothing : html `
|
|
642
|
+
<mo-icon-button icon='filter_list'
|
|
643
|
+
${tooltip(t('More Filters'))}
|
|
644
|
+
?data-selected=${this.sidePanelTab === DataGridSidePanelTab.Filters}
|
|
645
|
+
@click=${() => this.navigateToSidePanelTab(this.sidePanelTab === DataGridSidePanelTab.Filters ? undefined : DataGridSidePanelTab.Filters)}
|
|
646
|
+
></mo-icon-button>
|
|
647
|
+
`}
|
|
648
|
+
|
|
649
|
+
<mo-icon-button icon='settings'
|
|
650
|
+
${tooltip(t('Settings'))}
|
|
651
|
+
?data-selected=${this.sidePanelTab === DataGridSidePanelTab.Settings}
|
|
652
|
+
@click=${() => this.navigateToSidePanelTab(this.sidePanelTab === DataGridSidePanelTab.Settings ? undefined : DataGridSidePanelTab.Settings)}
|
|
653
|
+
></mo-icon-button>
|
|
661
654
|
`;
|
|
662
655
|
}
|
|
663
656
|
handleScroll(e) {
|