overview-components 1.0.65 → 1.0.66

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 (34) hide show
  1. package/dist/components/components-settings/data-grid-settings.d.ts +53 -0
  2. package/dist/components/components-settings/data-grid-settings.d.ts.map +1 -0
  3. package/dist/components/components-settings/data-grid-settings.js +318 -0
  4. package/dist/components/components-settings/data-grid-settings.js.map +1 -0
  5. package/dist/components/lit-case-variables-tab.d.ts.map +1 -1
  6. package/dist/components/lit-case-variables-tab.js +12 -4
  7. package/dist/components/lit-case-variables-tab.js.map +1 -1
  8. package/dist/components/lit-data-grid-tanstack.d.ts +18 -0
  9. package/dist/components/lit-data-grid-tanstack.d.ts.map +1 -1
  10. package/dist/components/lit-data-grid-tanstack.js +198 -111
  11. package/dist/components/lit-data-grid-tanstack.js.map +1 -1
  12. package/dist/components/lit-multiselect-item.d.ts.map +1 -1
  13. package/dist/components/lit-multiselect-item.js +3 -10
  14. package/dist/components/lit-multiselect-item.js.map +1 -1
  15. package/dist/schemas/lit-data-grid-tanstack.schema.d.ts +0 -1
  16. package/dist/schemas/lit-data-grid-tanstack.schema.d.ts.map +1 -1
  17. package/dist/schemas/lit-data-grid-tanstack.schema.js +0 -1
  18. package/dist/schemas/lit-data-grid-tanstack.schema.js.map +1 -1
  19. package/dist/shared/lit-modal-body.d.ts.map +1 -1
  20. package/dist/shared/lit-modal-body.js +5 -2
  21. package/dist/shared/lit-modal-body.js.map +1 -1
  22. package/dist/shared/lit-modal.d.ts.map +1 -1
  23. package/dist/shared/lit-modal.js +4 -0
  24. package/dist/shared/lit-modal.js.map +1 -1
  25. package/dist/shared/lit-toggle.d.ts +17 -0
  26. package/dist/shared/lit-toggle.d.ts.map +1 -0
  27. package/dist/shared/lit-toggle.js +222 -0
  28. package/dist/shared/lit-toggle.js.map +1 -0
  29. package/dist/shared/simple-tooltip.js +1 -1
  30. package/dist/shared/simple-tooltip.js.map +1 -1
  31. package/dist/shared/styles/button-shared-styles.d.ts.map +1 -1
  32. package/dist/shared/styles/button-shared-styles.js +15 -1
  33. package/dist/shared/styles/button-shared-styles.js.map +1 -1
  34. package/package.json +1 -1
@@ -30,6 +30,7 @@ import '../shared/lit-data-grid-row-actions.js';
30
30
  import '../shared/simple-tooltip.js';
31
31
  import '../shared/lit-checkbox.js';
32
32
  import '../shared/lit-overflow-tooltip.js';
33
+ import './components-settings/data-grid-settings.js';
33
34
  // utils
34
35
  import { formatDate } from '../utils/date.js';
35
36
  import { formatCurrency } from '../utils/currency.js';
@@ -46,6 +47,7 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
46
47
  this.enableColumnPinning = true;
47
48
  this.enableColumnOrdering = false;
48
49
  this.enableGrouping = true;
50
+ this.enablePinning = true;
49
51
  this.exportData = true;
50
52
  this.actionButtonsInMenu = false;
51
53
  this.id = '';
@@ -69,6 +71,7 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
69
71
  this.localizeDate = true;
70
72
  this.rowsSelected = {};
71
73
  this.enableSettings = false;
74
+ this.onSettingsChanged = () => { };
72
75
  this.onCellKeyDown = (event, row) => { };
73
76
  this.onColumnResize = () => { };
74
77
  this.onColumnFiltersChanged = (table, filterModel) => { };
@@ -89,6 +92,7 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
89
92
  this.columnOrder = [];
90
93
  this.isOpen = false;
91
94
  this.filterText = '';
95
+ this.isOpenModal = false;
92
96
  this.scrollToEnd = false;
93
97
  this.tableContainerRef = createRef();
94
98
  this.scrollInterval = null;
@@ -189,6 +193,9 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
189
193
  }, 0);
190
194
  }
191
195
  }
196
+ toggleModal() {
197
+ this.isOpenModal = !this.isOpenModal;
198
+ }
192
199
  async initSortable() {
193
200
  if (!this.enableColumnOrdering)
194
201
  return;
@@ -453,21 +460,23 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
453
460
  this.rowVirtualizerController
454
461
  ?.getVirtualizer()
455
462
  .scrollToIndex(rowIndex ?? 0, { align: 'auto' });
456
- const row = this.shadowRoot?.querySelector(`[data-row-index="${rowIndex}"]`);
457
- // Find the row element in the shadow DOM
458
- if (this.enableRowVirtualization) {
459
- if (row) {
460
- setTimeout(() => {
461
- row.focus();
462
- }, 0);
463
+ setTimeout(() => {
464
+ const row = this.shadowRoot?.querySelector(`[data-row-index="${rowIndex}"]`);
465
+ // Find the row element in the shadow DOM
466
+ if (this.enableRowVirtualization) {
467
+ if (row) {
468
+ setTimeout(() => {
469
+ row.focus();
470
+ }, 0);
471
+ }
463
472
  }
464
- }
465
- else {
466
- if (row) {
467
- row.focus();
468
- row.scrollIntoView({ block: 'nearest' });
473
+ else {
474
+ if (row) {
475
+ row.focus();
476
+ row.scrollIntoView({ block: 'nearest' });
477
+ }
469
478
  }
470
- }
479
+ }, 100);
471
480
  this.onRowFocusChanged?.(this.table, rowIndex);
472
481
  this.focusedRowIndex = rowIndex;
473
482
  }
@@ -544,7 +553,7 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
544
553
  enableGrouping: column.enableGrouping ?? true,
545
554
  sortDescFirst: column.sortDescFirst || true,
546
555
  enableResizing: column.enableResizing ?? true,
547
- enablePinning: column.enablePinning ?? true,
556
+ enablePinning: this.enablePinning && (column.enablePinning ?? true),
548
557
  aggregatedCell: (props) => {
549
558
  const value = props.getValue();
550
559
  return column.aggregatedCell
@@ -764,6 +773,48 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
764
773
  };
765
774
  this.table.setColumnVisibility(this.columnVisibility);
766
775
  }
776
+ onSettingsChangedCallback(value) {
777
+ if (value?.enableSorting !== undefined) {
778
+ this.enableSorting = value.enableSorting;
779
+ }
780
+ if (value?.enableFiltering !== undefined) {
781
+ this.enableFiltering = value.enableFiltering;
782
+ }
783
+ if (value?.columnDefaultSize !== undefined) {
784
+ this.columnDefaultSize = value.columnDefaultSize;
785
+ }
786
+ if (value?.columnGroupedColor !== undefined) {
787
+ this.columnGroupedColor = value.columnGroupedColor;
788
+ }
789
+ if (value?.rowAggregationColor !== undefined) {
790
+ this.rowAggregationColor = value.rowAggregationColor;
791
+ }
792
+ if (value?.enableGrouping !== undefined) {
793
+ this.enableGrouping = value.enableGrouping;
794
+ }
795
+ if (value?.exportData !== undefined) {
796
+ this.exportData = value.exportData;
797
+ }
798
+ if (value?.actionButtonsInMenu !== undefined) {
799
+ this.actionButtonsInMenu = value.actionButtonsInMenu;
800
+ }
801
+ if (value?.hideFooter !== undefined) {
802
+ this.hideFooter = value.hideFooter;
803
+ }
804
+ if (value?.enableColumnPinning !== undefined) {
805
+ this.enableColumnPinning = value.enableColumnPinning;
806
+ }
807
+ this.initTable();
808
+ this.requestUpdate();
809
+ if (this.onSettingsChanged) {
810
+ this.dispatchEvent(new CustomEvent('onSettingsChanged', {
811
+ bubbles: true,
812
+ composed: true,
813
+ detail: value,
814
+ }));
815
+ this.onSettingsChanged?.(value);
816
+ }
817
+ }
767
818
  _onRowMouseDown(event, row) {
768
819
  this.handleMouseDown(event, row);
769
820
  // do not highlight cell text if multirow selection is enabled and shift key is pressed
@@ -998,7 +1049,7 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
998
1049
  }
999
1050
  let isMobile = window.matchMedia('(max-width: 600px)').matches;
1000
1051
  return html `
1001
- <div class="data-grid__wrapper ${this.enableSettings ? 'add-button' : ''}">
1052
+ <div class="data-grid__wrapper">
1002
1053
  ${this.isScrollable && !isMobile
1003
1054
  ? html `
1004
1055
  <lit-icon-button
@@ -1542,94 +1593,134 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
1542
1593
  >
1543
1594
  </lit-data-grid-export-popover>
1544
1595
  `
1596
+ : null}
1597
+ ${this.enableSettings
1598
+ ? html `
1599
+ <div>
1600
+ <lit-responsive-button
1601
+ variant="dashed"
1602
+ label="${msg('Přiřadit sloupec')}"
1603
+ icon="add"
1604
+ style="display: inline-block"
1605
+ @click="${this.toggleCustomPopover}"
1606
+ ></lit-responsive-button>
1607
+
1608
+ <simple-popper
1609
+ .showing=${this.isOpen}
1610
+ .placement=${'top-end'}
1611
+ .manualOpening=${true}
1612
+ .maxWidthAsTarget=${false}
1613
+ .onClose=${() => this.closePopover()}
1614
+ >
1615
+ <div
1616
+ class="popper-input"
1617
+ style="position: sticky; top: 0; z-index: 1;"
1618
+ >
1619
+ <lit-input
1620
+ .value=${this.filterText}
1621
+ .onInput=${(value) => {
1622
+ this.filterText =
1623
+ value?.toLowerCase?.() ||
1624
+ '';
1625
+ }}
1626
+ .onClear=${() => {
1627
+ this.filterText = '';
1628
+ }}
1629
+ placeholder="${msg('Zadejte název sloupce')}"
1630
+ ></lit-input>
1631
+ </div>
1632
+ <lit-menu tabindex="0">
1633
+ ${this.columns
1634
+ .filter((col) => {
1635
+ const name = col?.headerName?.toLowerCase() ||
1636
+ col?.field.toLowerCase();
1637
+ return name.includes(this.filterText);
1638
+ })
1639
+ .sort((a, b) => {
1640
+ const aUnderscore = a.field.startsWith('_');
1641
+ const bUnderscore = b.field.startsWith('_');
1642
+ if (aUnderscore && !bUnderscore)
1643
+ return 1;
1644
+ if (!aUnderscore && bUnderscore)
1645
+ return -1;
1646
+ return (a.headerName || a.field).localeCompare(b.headerName || b.field);
1647
+ })
1648
+ .map((col) => html `
1649
+ <lit-menu-item
1650
+ .onClick=${() => this.toggleColumn(col?.field)}
1651
+ .isActive=${!(this
1652
+ .columnVisibility?.[col?.field] === false)}
1653
+ >
1654
+ <span
1655
+ class="menu-item--multiple"
1656
+ >
1657
+ <lit-checkbox
1658
+ class="cursor"
1659
+ .checked=${!(this
1660
+ .columnVisibility?.[col
1661
+ ?.field] === false)}
1662
+ ></lit-checkbox>
1663
+ ${col?.headerName ||
1664
+ col?.field}
1665
+ </span>
1666
+ </lit-menu-item>
1667
+ `)}
1668
+ </lit-menu>
1669
+
1670
+ ${isEqual(filteredColumns.length, 0)
1671
+ ? html `
1672
+ <div
1673
+ style="display: flex; flex-direction: column; align-items: center; padding: 1rem;"
1674
+ >
1675
+ <div
1676
+ style="max-height: 6rem; max-width: 6rem;"
1677
+ >
1678
+ <not-found></not-found>
1679
+ </div>
1680
+ <div>
1681
+ ${msg('Nenalezeno')}
1682
+ </div>
1683
+ </div>
1684
+ `
1685
+ : null}
1686
+ </simple-popper>
1687
+
1688
+ <lit-icon-button
1689
+ icon="administration"
1690
+ @click="${this.toggleModal}"
1691
+ variant="dashed"
1692
+ style="display: inline-block"
1693
+ ></lit-icon-button>
1694
+ <data-grid-settings
1695
+ .onClose="${() => {
1696
+ this.isOpenModal = false;
1697
+ }}"
1698
+ .isOpenModal="${this.isOpenModal}"
1699
+ .enableFiltering="${this.enableFiltering}"
1700
+ .enableSorting="${this.enableSorting}"
1701
+ .columnDefaultSize="${this
1702
+ .columnDefaultSize}"
1703
+ .columnGroupedColor="${this
1704
+ .columnGroupedColor}"
1705
+ .rowAggregationColor="${this
1706
+ .rowAggregationColor}"
1707
+ .enableGrouping="${this.enableGrouping}"
1708
+ .enableColumnPinning="${this
1709
+ .enableColumnPinning}"
1710
+ .exportData="${this.exportData}"
1711
+ .actionButtonsInMenu="${this
1712
+ .actionButtonsInMenu}"
1713
+ .hideFooter="${this.hideFooter}"
1714
+ .onSettingsChangedModal="${this.onSettingsChangedCallback.bind(this)}"
1715
+ ></data-grid-settings>
1716
+ </div>
1717
+ `
1545
1718
  : null}
1546
1719
  </div>
1547
1720
  </slot>
1548
1721
  `
1549
1722
  : ''}
1550
1723
  </div>
1551
- ${this.enableSettings
1552
- ? html `
1553
- <div class="add-column-button">
1554
- <lit-button
1555
- variant="${'dashed'}"
1556
- label="${msg('Přiřadit sloupec')}"
1557
- icon="add"
1558
- style="display: inline-block"
1559
- @click="${this.toggleCustomPopover}"
1560
- ></lit-button>
1561
-
1562
- <simple-popper
1563
- .showing=${this.isOpen}
1564
- .placement=${'top-end'}
1565
- .manualOpening=${true}
1566
- .maxWidthAsTarget=${false}
1567
- .onClose=${() => this.closePopover()}
1568
- >
1569
- <div
1570
- class="popper-input"
1571
- style="position: sticky; top: 0; z-index: 1;"
1572
- >
1573
- <lit-input
1574
- .value=${this.filterText}
1575
- .onInput=${(value) => {
1576
- this.filterText = value?.toLowerCase?.() || '';
1577
- }}
1578
- .onClear=${() => {
1579
- this.filterText = '';
1580
- }}
1581
- placeholder="${msg('Zadejte název sloupce')}"
1582
- ></lit-input>
1583
- </div>
1584
- <lit-menu tabindex="0">
1585
- ${this.columns
1586
- .filter((col) => {
1587
- const name = col?.headerName?.toLowerCase() ||
1588
- col?.field.toLowerCase();
1589
- return name.includes(this.filterText);
1590
- })
1591
- .sort((a, b) => {
1592
- const aUnderscore = a.field.startsWith('_');
1593
- const bUnderscore = b.field.startsWith('_');
1594
- if (aUnderscore && !bUnderscore)
1595
- return 1;
1596
- if (!aUnderscore && bUnderscore)
1597
- return -1;
1598
- return (a.headerName || a.field).localeCompare(b.headerName || b.field);
1599
- })
1600
- .map((col) => html `
1601
- <lit-menu-item
1602
- .onClick=${() => this.toggleColumn(col?.field)}
1603
- .isActive=${!(this.columnVisibility?.[col?.field] ===
1604
- false)}
1605
- >
1606
- <span class="menu-item--multiple">
1607
- <lit-checkbox
1608
- class="cursor"
1609
- .checked=${!(this.columnVisibility?.[col?.field] === false)}
1610
- ></lit-checkbox>
1611
- ${col?.headerName || col?.field}
1612
- </span>
1613
- </lit-menu-item>
1614
- `)}
1615
- </lit-menu>
1616
-
1617
- ${isEqual(filteredColumns.length, 0)
1618
- ? html `
1619
- <div
1620
- style="display: flex; flex-direction: column; align-items: center; padding: 1rem;"
1621
- >
1622
- <div style="max-height: 6rem; max-width: 6rem;">
1623
- <not-found></not-found>
1624
- </div>
1625
- <div>${msg('Nenalezeno')}</div>
1626
- </div>
1627
- `
1628
- : null}
1629
- </simple-popper>
1630
- </div>
1631
- `
1632
- : null}
1633
1724
  ${this.table.getRowModel().rows.length < 1 && !this.isLoading
1634
1725
  ? html ` <div class="data-grid__empty">
1635
1726
  <div style="max-height: 7.125rem; max-width: 7.125rem">
@@ -1667,10 +1758,6 @@ LitDataGridTanstack.styles = [
1667
1758
  z-index: 1;
1668
1759
  }
1669
1760
 
1670
- .data-grid__wrapper.add-button {
1671
- height: calc(100% - 39px) !important;
1672
- }
1673
-
1674
1761
  .grid {
1675
1762
  overflow: auto;
1676
1763
  position: relative;
@@ -1736,7 +1823,7 @@ LitDataGridTanstack.styles = [
1736
1823
  // outline: none;
1737
1824
  // }
1738
1825
 
1739
- tr.body:hover {
1826
+ tr.body:hover:not(.selected):not(:focus) {
1740
1827
  cursor: pointer;
1741
1828
  background-color: var(--background-default, #eff3f4);
1742
1829
  }
@@ -1851,15 +1938,6 @@ LitDataGridTanstack.styles = [
1851
1938
  z-index: 10;
1852
1939
  }
1853
1940
 
1854
- .add-column-button {
1855
- position: sticky;
1856
- right: 0;
1857
- bottom: 0;
1858
- background-color: var(--background-paper, #fff);
1859
- z-index: 10;
1860
- text-align: right;
1861
- }
1862
-
1863
1941
  .right-actions {
1864
1942
  position: absolute;
1865
1943
  right: 0;
@@ -1981,6 +2059,9 @@ __decorate([
1981
2059
  __decorate([
1982
2060
  property({ type: Boolean })
1983
2061
  ], LitDataGridTanstack.prototype, "enableGrouping", void 0);
2062
+ __decorate([
2063
+ property({ type: Boolean })
2064
+ ], LitDataGridTanstack.prototype, "enablePinning", void 0);
1984
2065
  __decorate([
1985
2066
  property({ type: Boolean })
1986
2067
  ], LitDataGridTanstack.prototype, "exportData", void 0);
@@ -2059,6 +2140,9 @@ __decorate([
2059
2140
  __decorate([
2060
2141
  property({ type: Boolean })
2061
2142
  ], LitDataGridTanstack.prototype, "enableSettings", void 0);
2143
+ __decorate([
2144
+ property({ attribute: false })
2145
+ ], LitDataGridTanstack.prototype, "onSettingsChanged", void 0);
2062
2146
  __decorate([
2063
2147
  property({ type: Function })
2064
2148
  ], LitDataGridTanstack.prototype, "onRowClick", void 0);
@@ -2146,6 +2230,9 @@ __decorate([
2146
2230
  __decorate([
2147
2231
  state()
2148
2232
  ], LitDataGridTanstack.prototype, "filterText", void 0);
2233
+ __decorate([
2234
+ state()
2235
+ ], LitDataGridTanstack.prototype, "isOpenModal", void 0);
2149
2236
  __decorate([
2150
2237
  query('tbody')
2151
2238
  ], LitDataGridTanstack.prototype, "tableBody", void 0);