@vaadin/grid 22.0.13 → 22.0.16

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.
Files changed (50) hide show
  1. package/package.json +9 -9
  2. package/src/vaadin-grid-a11y-mixin.js +5 -5
  3. package/src/vaadin-grid-active-item-mixin.d.ts +1 -1
  4. package/src/vaadin-grid-active-item-mixin.js +7 -7
  5. package/src/vaadin-grid-array-data-provider-mixin.d.ts +1 -1
  6. package/src/vaadin-grid-array-data-provider-mixin.js +4 -4
  7. package/src/vaadin-grid-column-group.js +41 -38
  8. package/src/vaadin-grid-column-reordering-mixin.d.ts +1 -1
  9. package/src/vaadin-grid-column-reordering-mixin.js +10 -10
  10. package/src/vaadin-grid-column-resizing-mixin.js +4 -4
  11. package/src/vaadin-grid-column.d.ts +2 -2
  12. package/src/vaadin-grid-column.js +19 -19
  13. package/src/vaadin-grid-data-provider-mixin.d.ts +2 -2
  14. package/src/vaadin-grid-data-provider-mixin.js +14 -14
  15. package/src/vaadin-grid-drag-and-drop-mixin.d.ts +1 -1
  16. package/src/vaadin-grid-drag-and-drop-mixin.js +9 -9
  17. package/src/vaadin-grid-dynamic-columns-mixin.js +3 -3
  18. package/src/vaadin-grid-event-context-mixin.d.ts +1 -1
  19. package/src/vaadin-grid-event-context-mixin.js +1 -1
  20. package/src/vaadin-grid-filter-column.js +1 -1
  21. package/src/vaadin-grid-filter-mixin.js +3 -3
  22. package/src/vaadin-grid-filter.d.ts +2 -2
  23. package/src/vaadin-grid-filter.js +2 -2
  24. package/src/vaadin-grid-keyboard-navigation-mixin.js +21 -16
  25. package/src/vaadin-grid-row-details-mixin.d.ts +2 -2
  26. package/src/vaadin-grid-row-details-mixin.js +4 -4
  27. package/src/vaadin-grid-scroll-mixin.js +3 -3
  28. package/src/vaadin-grid-selection-column.d.ts +2 -2
  29. package/src/vaadin-grid-selection-column.js +7 -7
  30. package/src/vaadin-grid-selection-mixin.d.ts +1 -1
  31. package/src/vaadin-grid-selection-mixin.js +21 -7
  32. package/src/vaadin-grid-sort-column.d.ts +2 -2
  33. package/src/vaadin-grid-sort-column.js +2 -2
  34. package/src/vaadin-grid-sort-mixin.js +5 -5
  35. package/src/vaadin-grid-sorter.d.ts +2 -2
  36. package/src/vaadin-grid-sorter.js +4 -4
  37. package/src/vaadin-grid-styles.js +1 -1
  38. package/src/vaadin-grid-styling-mixin.d.ts +1 -1
  39. package/src/vaadin-grid-styling-mixin.js +1 -1
  40. package/src/vaadin-grid-tree-column.js +2 -2
  41. package/src/vaadin-grid-tree-toggle.d.ts +2 -2
  42. package/src/vaadin-grid-tree-toggle.js +4 -4
  43. package/src/vaadin-grid.d.ts +5 -5
  44. package/src/vaadin-grid.js +35 -34
  45. package/theme/lumo/vaadin-grid-sorter-styles.js +1 -1
  46. package/theme/lumo/vaadin-grid-styles.js +2 -2
  47. package/theme/lumo/vaadin-grid-tree-toggle-styles.js +1 -1
  48. package/theme/material/vaadin-grid-sorter-styles.js +1 -1
  49. package/theme/material/vaadin-grid-styles.js +1 -1
  50. package/theme/material/vaadin-grid-tree-toggle-styles.js +1 -1
@@ -18,7 +18,7 @@ export const SortMixin = (superClass) =>
18
18
  */
19
19
  multiSort: {
20
20
  type: Boolean,
21
- value: false
21
+ value: false,
22
22
  },
23
23
 
24
24
  /**
@@ -29,7 +29,7 @@ export const SortMixin = (superClass) =>
29
29
  type: Array,
30
30
  value: function () {
31
31
  return [];
32
- }
32
+ },
33
33
  },
34
34
 
35
35
  /** @private */
@@ -37,8 +37,8 @@ export const SortMixin = (superClass) =>
37
37
  type: Array,
38
38
  value: function () {
39
39
  return [];
40
- }
41
- }
40
+ },
41
+ },
42
42
  };
43
43
  }
44
44
 
@@ -124,7 +124,7 @@ export const SortMixin = (superClass) =>
124
124
  return this._sorters.map((sorter) => {
125
125
  return {
126
126
  path: sorter.path,
127
- direction: sorter.direction
127
+ direction: sorter.direction,
128
128
  };
129
129
  });
130
130
  }
@@ -76,13 +76,13 @@ declare class GridSorter extends ThemableMixin(DirMixin(HTMLElement)) {
76
76
  addEventListener<K extends keyof GridSorterEventMap>(
77
77
  type: K,
78
78
  listener: (this: GridSorter, ev: GridSorterEventMap[K]) => void,
79
- options?: boolean | AddEventListenerOptions
79
+ options?: boolean | AddEventListenerOptions,
80
80
  ): void;
81
81
 
82
82
  removeEventListener<K extends keyof GridSorterEventMap>(
83
83
  type: K,
84
84
  listener: (this: GridSorter, ev: GridSorterEventMap[K]) => void,
85
- options?: boolean | EventListenerOptions
85
+ options?: boolean | EventListenerOptions,
86
86
  ): void;
87
87
  }
88
88
 
@@ -136,7 +136,7 @@ class GridSorter extends ThemableMixin(DirMixin(PolymerElement)) {
136
136
  type: String,
137
137
  reflectToAttribute: true,
138
138
  notify: true,
139
- value: null
139
+ value: null,
140
140
  },
141
141
 
142
142
  /**
@@ -145,14 +145,14 @@ class GridSorter extends ThemableMixin(DirMixin(PolymerElement)) {
145
145
  */
146
146
  _order: {
147
147
  type: Number,
148
- value: null
148
+ value: null,
149
149
  },
150
150
 
151
151
  /** @private */
152
152
  _isConnected: {
153
153
  type: Boolean,
154
- observer: '__isConnectedChanged'
155
- }
154
+ observer: '__isConnectedChanged',
155
+ },
156
156
  };
157
157
  }
158
158
 
@@ -293,5 +293,5 @@ registerStyles(
293
293
  right: auto;
294
294
  }
295
295
  `,
296
- { moduleId: 'vaadin-grid-styles' }
296
+ { moduleId: 'vaadin-grid-styles' },
297
297
  );
@@ -10,7 +10,7 @@ import { GridColumn } from './vaadin-grid-column.js';
10
10
  export type GridCellClassNameGenerator<TItem> = (column: GridColumn<TItem>, model: GridItemModel<TItem>) => string;
11
11
 
12
12
  export declare function StylingMixin<TItem, T extends Constructor<HTMLElement>>(
13
- base: T
13
+ base: T,
14
14
  ): T & Constructor<StylingMixinClass<TItem>>;
15
15
 
16
16
  export declare class StylingMixinClass<TItem> {
@@ -29,7 +29,7 @@ export const StylingMixin = (superClass) =>
29
29
  *
30
30
  * @type {GridCellClassNameGenerator | null | undefined}
31
31
  */
32
- cellClassNameGenerator: Function
32
+ cellClassNameGenerator: Function,
33
33
  };
34
34
  }
35
35
 
@@ -37,8 +37,8 @@ class GridTreeColumn extends GridColumn {
37
37
  */
38
38
  itemHasChildrenPath: {
39
39
  type: String,
40
- value: 'children'
41
- }
40
+ value: 'children',
41
+ },
42
42
  };
43
43
  }
44
44
 
@@ -85,13 +85,13 @@ declare class GridTreeToggle extends ThemableMixin(DirMixin(HTMLElement)) {
85
85
  addEventListener<K extends keyof GridTreeToggleEventMap>(
86
86
  type: K,
87
87
  listener: (this: GridTreeToggle, ev: GridTreeToggleEventMap[K]) => void,
88
- options?: boolean | AddEventListenerOptions
88
+ options?: boolean | AddEventListenerOptions,
89
89
  ): void;
90
90
 
91
91
  removeEventListener<K extends keyof GridTreeToggleEventMap>(
92
92
  type: K,
93
93
  listener: (this: GridTreeToggle, ev: GridTreeToggleEventMap[K]) => void,
94
- options?: boolean | EventListenerOptions
94
+ options?: boolean | EventListenerOptions,
95
95
  ): void;
96
96
  }
97
97
 
@@ -147,7 +147,7 @@ class GridTreeToggle extends ThemableMixin(DirMixin(PolymerElement)) {
147
147
  level: {
148
148
  type: Number,
149
149
  value: 0,
150
- observer: '_levelChanged'
150
+ observer: '_levelChanged',
151
151
  },
152
152
 
153
153
  /**
@@ -157,7 +157,7 @@ class GridTreeToggle extends ThemableMixin(DirMixin(PolymerElement)) {
157
157
  leaf: {
158
158
  type: Boolean,
159
159
  value: false,
160
- reflectToAttribute: true
160
+ reflectToAttribute: true,
161
161
  },
162
162
 
163
163
  /**
@@ -168,8 +168,8 @@ class GridTreeToggle extends ThemableMixin(DirMixin(PolymerElement)) {
168
168
  type: Boolean,
169
169
  value: false,
170
170
  reflectToAttribute: true,
171
- notify: true
172
- }
171
+ notify: true,
172
+ },
173
173
  };
174
174
  }
175
175
 
@@ -16,13 +16,13 @@ import {
16
16
  GridDataProviderParams,
17
17
  GridFilterDefinition,
18
18
  GridSorterDefinition,
19
- GridSorterDirection
19
+ GridSorterDirection,
20
20
  } from './vaadin-grid-data-provider-mixin.js';
21
21
  import {
22
22
  DragAndDropMixinClass,
23
23
  GridDragAndDropFilter,
24
24
  GridDropLocation,
25
- GridDropMode
25
+ GridDropMode,
26
26
  } from './vaadin-grid-drag-and-drop-mixin.js';
27
27
  import { EventContextMixinClass, GridEventContext } from './vaadin-grid-event-context-mixin.js';
28
28
  import { GridRowDetailsRenderer, RowDetailsMixinClass } from './vaadin-grid-row-details-mixin.js';
@@ -45,7 +45,7 @@ export {
45
45
  GridHeaderFooterRenderer,
46
46
  GridRowDetailsRenderer,
47
47
  GridSorterDefinition,
48
- GridSorterDirection
48
+ GridSorterDirection,
49
49
  };
50
50
 
51
51
  export type GridDefaultItem = any;
@@ -378,13 +378,13 @@ declare class Grid<TItem = GridDefaultItem> extends HTMLElement {
378
378
  addEventListener<K extends keyof GridEventMap<TItem>>(
379
379
  type: K,
380
380
  listener: (this: Grid<TItem>, ev: GridEventMap<TItem>[K]) => void,
381
- options?: boolean | AddEventListenerOptions
381
+ options?: boolean | AddEventListenerOptions,
382
382
  ): void;
383
383
 
384
384
  removeEventListener<K extends keyof GridEventMap<TItem>>(
385
385
  type: K,
386
386
  listener: (this: Grid<TItem>, ev: GridEventMap<TItem>[K]) => void,
387
- options?: boolean | EventListenerOptions
387
+ options?: boolean | EventListenerOptions,
388
388
  ): void;
389
389
  }
390
390
 
@@ -256,20 +256,20 @@ class Grid extends ElementMixin(
256
256
  A11yMixin(
257
257
  FilterMixin(
258
258
  ColumnReorderingMixin(
259
- ColumnResizingMixin(EventContextMixin(DragAndDropMixin(StylingMixin(PolymerElement))))
260
- )
261
- )
262
- )
263
- )
264
- )
265
- )
266
- )
267
- )
268
- )
269
- )
270
- )
271
- )
272
- )
259
+ ColumnResizingMixin(EventContextMixin(DragAndDropMixin(StylingMixin(PolymerElement)))),
260
+ ),
261
+ ),
262
+ ),
263
+ ),
264
+ ),
265
+ ),
266
+ ),
267
+ ),
268
+ ),
269
+ ),
270
+ ),
271
+ ),
272
+ ),
273
273
  ) {
274
274
  static get template() {
275
275
  return html`
@@ -301,7 +301,7 @@ class Grid extends ElementMixin(
301
301
  static get observers() {
302
302
  return [
303
303
  '_columnTreeChanged(_columnTree, _columnTree.*)',
304
- '_effectiveSizeChanged(_effectiveSize, __virtualizer, _hasData, _columnTree)'
304
+ '_effectiveSizeChanged(_effectiveSize, __virtualizer, _hasData, _columnTree)',
305
305
  ];
306
306
  }
307
307
 
@@ -310,31 +310,31 @@ class Grid extends ElementMixin(
310
310
  /** @private */
311
311
  _safari: {
312
312
  type: Boolean,
313
- value: isSafari
313
+ value: isSafari,
314
314
  },
315
315
 
316
316
  /** @private */
317
317
  _ios: {
318
318
  type: Boolean,
319
- value: isIOS
319
+ value: isIOS,
320
320
  },
321
321
 
322
322
  /** @private */
323
323
  _firefox: {
324
324
  type: Boolean,
325
- value: isFirefox
325
+ value: isFirefox,
326
326
  },
327
327
 
328
328
  /** @private */
329
329
  _android: {
330
330
  type: Boolean,
331
- value: isAndroid
331
+ value: isAndroid,
332
332
  },
333
333
 
334
334
  /** @private */
335
335
  _touchDevice: {
336
336
  type: Boolean,
337
- value: isTouch
337
+ value: isTouch,
338
338
  },
339
339
 
340
340
  /**
@@ -348,18 +348,18 @@ class Grid extends ElementMixin(
348
348
  allRowsVisible: {
349
349
  type: Boolean,
350
350
  value: false,
351
- reflectToAttribute: true
351
+ reflectToAttribute: true,
352
352
  },
353
353
 
354
354
  /** @private */
355
355
  _recalculateColumnWidthOnceLoadingFinished: {
356
356
  type: Boolean,
357
- value: true
357
+ value: true,
358
358
  },
359
359
 
360
360
  /** @private */
361
361
  isAttached: {
362
- value: false
362
+ value: false,
363
363
  },
364
364
 
365
365
  /**
@@ -370,8 +370,8 @@ class Grid extends ElementMixin(
370
370
  */
371
371
  __gridElement: {
372
372
  type: Boolean,
373
- value: true
374
- }
373
+ value: true,
374
+ },
375
375
  };
376
376
  }
377
377
 
@@ -444,7 +444,7 @@ class Grid extends ElementMixin(
444
444
  updateElement: this._updateScrollerItem.bind(this),
445
445
  scrollContainer: this.$.items,
446
446
  scrollTarget: this.$.table,
447
- reorderElements: true
447
+ reorderElements: true,
448
448
  });
449
449
 
450
450
  new ResizeObserver(() => setTimeout(() => this.__updateFooterPositioning())).observe(this.$.footer);
@@ -470,7 +470,7 @@ class Grid extends ElementMixin(
470
470
  if (this.$.items.contains(cell) && cell.localName === 'td') {
471
471
  return {
472
472
  item: cell.parentElement._item,
473
- column: cell._column
473
+ column: cell._column,
474
474
  };
475
475
  }
476
476
  }
@@ -621,7 +621,7 @@ class Grid extends ElementMixin(
621
621
 
622
622
  if (this._columnTree) {
623
623
  this._columnTree[this._columnTree.length - 1].forEach(
624
- (c) => c.isConnected && c.notifyPath && c.notifyPath('_cells.*', c._cells)
624
+ (c) => c.isConnected && c.notifyPath && c.notifyPath('_cells.*', c._cells),
625
625
  );
626
626
  }
627
627
 
@@ -845,7 +845,7 @@ class Grid extends ElementMixin(
845
845
  */
846
846
  _renderColumnTree(columnTree) {
847
847
  Array.from(this.$.items.children).forEach((row) =>
848
- this._updateRow(row, columnTree[columnTree.length - 1], null, false, true)
848
+ this._updateRow(row, columnTree[columnTree.length - 1], null, false, true),
849
849
  );
850
850
 
851
851
  while (this.$.header.children.length < columnTree.length) {
@@ -867,11 +867,11 @@ class Grid extends ElementMixin(
867
867
  }
868
868
 
869
869
  Array.from(this.$.header.children).forEach((headerRow, index) =>
870
- this._updateRow(headerRow, columnTree[index], 'header', index === columnTree.length - 1)
870
+ this._updateRow(headerRow, columnTree[index], 'header', index === columnTree.length - 1),
871
871
  );
872
872
 
873
873
  Array.from(this.$.footer.children).forEach((footerRow, index) =>
874
- this._updateRow(footerRow, columnTree[columnTree.length - 1 - index], 'footer', index === 0)
874
+ this._updateRow(footerRow, columnTree[columnTree.length - 1 - index], 'footer', index === 0),
875
875
  );
876
876
 
877
877
  // Sizer rows
@@ -888,7 +888,8 @@ class Grid extends ElementMixin(
888
888
  }
889
889
 
890
890
  __updateFooterPositioning() {
891
- if (this._firefox) {
891
+ // TODO: fixed in Firefox 99, remove when we can drop Firefox ESR 91 support
892
+ if (this._firefox && parseFloat(navigator.userAgent.match(/Firefox\/(\d{2,3}.\d)/)[1]) < 99) {
892
893
  // Sticky (or translated) footer in a flexbox host doesn't get included in
893
894
  // the scroll height calculation on FF. This is a workaround for the issue.
894
895
  this.$.items.style.paddingBottom = 0;
@@ -964,7 +965,7 @@ class Grid extends ElementMixin(
964
965
  level: this._getIndexLevel(row.index),
965
966
  expanded: this._isExpanded(row._item),
966
967
  selected: this._isSelected(row._item),
967
- detailsOpened: !!this.rowDetailsRenderer && this._isDetailsOpened(row._item)
968
+ detailsOpened: !!this.rowDetailsRenderer && this._isDetailsOpened(row._item),
968
969
  };
969
970
  }
970
971
 
@@ -1009,7 +1010,7 @@ class Grid extends ElementMixin(
1009
1010
  */
1010
1011
  notifyResize() {
1011
1012
  console.warn(
1012
- `WARNING: Since Vaadin 22, notifyResize() is deprecated. The component uses a ResizeObserver internally and doesn't need to be explicitly notified of resizes.`
1013
+ `WARNING: Since Vaadin 22, notifyResize() is deprecated. The component uses a ResizeObserver internally and doesn't need to be explicitly notified of resizes.`,
1013
1014
  );
1014
1015
  }
1015
1016
  }
@@ -49,5 +49,5 @@ registerStyles(
49
49
  margin-left: 0;
50
50
  }
51
51
  `,
52
- { moduleId: 'lumo-grid-sorter' }
52
+ { moduleId: 'lumo-grid-sorter' },
53
53
  );
@@ -372,7 +372,7 @@ registerStyles(
372
372
  border-left-color: var(--_lumo-grid-border-color);
373
373
  }
374
374
  `,
375
- { moduleId: 'lumo-grid' }
375
+ { moduleId: 'lumo-grid' },
376
376
  );
377
377
 
378
378
  registerStyles(
@@ -382,5 +382,5 @@ registerStyles(
382
382
  font-size: var(--lumo-font-size-m);
383
383
  }
384
384
  `,
385
- { moduleId: 'vaadin-grid-select-all-checkbox-lumo' }
385
+ { moduleId: 'vaadin-grid-select-all-checkbox-lumo' },
386
386
  );
@@ -108,5 +108,5 @@ registerStyles(
108
108
  content: var(--lumo-icons-angle-left);
109
109
  }
110
110
  `,
111
- { moduleId: 'lumo-grid-tree-toggle' }
111
+ { moduleId: 'lumo-grid-tree-toggle' },
112
112
  );
@@ -68,5 +68,5 @@ registerStyles(
68
68
  right: auto;
69
69
  }
70
70
  `,
71
- { moduleId: 'material-grid-sorter' }
71
+ { moduleId: 'material-grid-sorter' },
72
72
  );
@@ -254,5 +254,5 @@ registerStyles(
254
254
  right: var(--_grid-drag-start-x);
255
255
  }
256
256
  `,
257
- { moduleId: 'material-grid' }
257
+ { moduleId: 'material-grid' },
258
258
  );
@@ -38,5 +38,5 @@ registerStyles(
38
38
  transform: rotate(90deg);
39
39
  }
40
40
  `,
41
- { moduleId: 'material-grid-tree-toggle' }
41
+ { moduleId: 'material-grid-tree-toggle' },
42
42
  );