overview-components 1.1.151 → 1.1.152

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.
@@ -1775,107 +1775,108 @@ export class LitDataGridTanstack extends LitElement {
1775
1775
  : null}
1776
1776
  </tbody>
1777
1777
  </table>
1778
- ${!this.hideFooter || this.exportData || this.enableSettings
1778
+ </div>
1779
+ ${!this.hideFooter || this.exportData || this.enableSettings
1779
1780
  ? html `
1780
- <slot
1781
- part="dataGrid-footer"
1782
- name="dataGridFooter"
1783
- class="footer-container"
1784
- >
1785
- ${!this.hideFooter
1781
+ <slot
1782
+ part="dataGrid-footer"
1783
+ name="dataGridFooter"
1784
+ class="footer-container"
1785
+ >
1786
+ ${!this.hideFooter
1786
1787
  ? html ` <div class="numberCount">
1787
- ${msg('Počet záznamů')}: ${rows.length}
1788
- <pre>/</pre>
1789
- ${this.server
1788
+ ${msg('Počet záznamů')}: ${rows.length}
1789
+ <pre>/</pre>
1790
+ ${this.server
1790
1791
  ? this.totalNumberRows
1791
1792
  ? this.totalNumberRows
1792
1793
  : '?'
1793
1794
  : rows.length}
1794
- ${this.server
1795
+ ${this.server
1795
1796
  ? html `<lit-icon-button
1796
- icon="reload"
1797
- size="mini"
1798
- variant="text"
1799
- color="secondary"
1800
- @click="${() => this.handleGetTotalNumber()}"
1801
- style="margin-left: 0.2rem; margin-top: -0.1rem"
1802
- ></lit-icon-button>`
1797
+ icon="reload"
1798
+ size="mini"
1799
+ variant="text"
1800
+ color="secondary"
1801
+ @click="${() => this.handleGetTotalNumber()}"
1802
+ style="margin-left: 0.2rem; margin-top: -0.1rem"
1803
+ ></lit-icon-button>`
1803
1804
  : ''}
1804
- </div>`
1805
+ </div>`
1805
1806
  : ''}
1806
- <div class="right-actions">
1807
- ${!this.hideFooter
1807
+ <div class="right-actions">
1808
+ ${!this.hideFooter
1808
1809
  ? html `
1809
- <lit-data-grid-density-popover
1810
- .density="${this.rowDensity}"
1811
- .setDensity="${(density) => this.handleSetDensity(density)}"
1812
- >
1813
- </lit-data-grid-density-popover>
1814
- <lit-responsive-button
1815
- size="medium"
1816
- variant="text"
1817
- color="secondary"
1818
- label=${msg('Přizpůsobit sloupce')}
1819
- icon="columns"
1820
- @click=${() => this.table.resetColumnSizing()}
1821
- ></lit-responsive-button>
1822
- `
1810
+ <lit-data-grid-density-popover
1811
+ .density="${this.rowDensity}"
1812
+ .setDensity="${(density) => this.handleSetDensity(density)}"
1813
+ >
1814
+ </lit-data-grid-density-popover>
1815
+ <lit-responsive-button
1816
+ size="medium"
1817
+ variant="text"
1818
+ color="secondary"
1819
+ label=${msg('Přizpůsobit sloupce')}
1820
+ icon="columns"
1821
+ @click=${() => this.table.resetColumnSizing()}
1822
+ ></lit-responsive-button>
1823
+ `
1823
1824
  : ''}
1824
- ${this.exportData
1825
+ ${this.exportData
1825
1826
  ? html `
1826
- <lit-data-grid-export-popover
1827
- .exportToCsv="${typeof this.exportExcelFn ===
1827
+ <lit-data-grid-export-popover
1828
+ .exportToCsv="${typeof this.exportExcelFn ===
1828
1829
  'function'
1829
1830
  ? () => this.exportCsvFn && this.exportCsvFn()
1830
1831
  : () => this.exportDataToCsv()}"
1831
- .exportToExcel="${typeof this.exportExcelFn ===
1832
+ .exportToExcel="${typeof this.exportExcelFn ===
1832
1833
  'function'
1833
1834
  ? () => this.exportExcelFn &&
1834
1835
  this.exportExcelFn()
1835
1836
  : () => this.exportDataToExcel()}"
1836
- .disabledButtons="${this.isLoading}"
1837
- >
1838
- </lit-data-grid-export-popover>
1839
- `
1837
+ .disabledButtons="${this.isLoading}"
1838
+ >
1839
+ </lit-data-grid-export-popover>
1840
+ `
1840
1841
  : null}
1841
- ${this.enableSettings
1842
+ ${this.enableSettings
1842
1843
  ? html `
1843
- <div>
1844
- <lit-responsive-button
1845
- color="secondary"
1846
- variant="dashed"
1847
- label="${msg('Přiřadit sloupec')}"
1848
- icon="add"
1849
- style="display: inline-block"
1850
- @click="${this.toggleCustomPopover}"
1851
- ></lit-responsive-button>
1844
+ <div>
1845
+ <lit-responsive-button
1846
+ color="secondary"
1847
+ variant="dashed"
1848
+ label="${msg('Přiřadit sloupec')}"
1849
+ icon="add"
1850
+ style="display: inline-block"
1851
+ @click="${this.toggleCustomPopover}"
1852
+ ></lit-responsive-button>
1852
1853
 
1853
- <simple-popper
1854
- .showing=${this.isOpen}
1855
- .placement=${'top-end'}
1856
- .manualOpening=${true}
1857
- .maxWidthAsTarget=${false}
1858
- .onClose=${() => this.closePopover()}
1854
+ <simple-popper
1855
+ .showing=${this.isOpen}
1856
+ .placement=${'top-end'}
1857
+ .manualOpening=${true}
1858
+ .maxWidthAsTarget=${false}
1859
+ .onClose=${() => this.closePopover()}
1860
+ >
1861
+ <div
1862
+ class="popper-input"
1863
+ style="position: sticky; top: 0; z-index: 1;"
1859
1864
  >
1860
- <div
1861
- class="popper-input"
1862
- style="position: sticky; top: 0; z-index: 1;"
1863
- >
1864
- <lit-input
1865
- .value=${this.filterText}
1866
- .onInput=${(value) => {
1865
+ <lit-input
1866
+ .value=${this.filterText}
1867
+ .onInput=${(value) => {
1867
1868
  this.filterText =
1868
1869
  value?.toLowerCase?.() ||
1869
1870
  '';
1870
1871
  }}
1871
- .onClear=${() => {
1872
+ .onClear=${() => {
1872
1873
  this.filterText = '';
1873
1874
  }}
1874
- placeholder="${msg('Zadejte název sloupce')}"
1875
- ></lit-input>
1876
- </div>
1877
- <lit-menu tabindex="0">
1878
- ${this.columns
1875
+ placeholder="${msg('Zadejte název sloupce')}"
1876
+ ></lit-input>
1877
+ </div>
1878
+ <lit-menu tabindex="0">
1879
+ ${this.columns
1879
1880
  .filter((col) => {
1880
1881
  const name = col?.headerName?.toLowerCase() ||
1881
1882
  col?.field.toLowerCase();
@@ -1891,93 +1892,92 @@ export class LitDataGridTanstack extends LitElement {
1891
1892
  return (a.headerName || a.field).localeCompare(b.headerName || b.field);
1892
1893
  })
1893
1894
  .map((col) => html `
1894
- <lit-menu-item
1895
- .onClick=${() => this.toggleColumn(col?.field)}
1896
- .isActive=${!(this
1895
+ <lit-menu-item
1896
+ .onClick=${() => this.toggleColumn(col?.field)}
1897
+ .isActive=${!(this
1897
1898
  .columnVisibility?.[col?.field] === false)}
1899
+ >
1900
+ <span
1901
+ class="menu-item--multiple"
1898
1902
  >
1899
- <span
1900
- class="menu-item--multiple"
1901
- >
1902
- <lit-checkbox
1903
- class="cursor"
1904
- .checked=${!(this
1903
+ <lit-checkbox
1904
+ class="cursor"
1905
+ .checked=${!(this
1905
1906
  .columnVisibility?.[col
1906
1907
  ?.field] === false)}
1907
- ></lit-checkbox>
1908
- ${col?.headerName ||
1908
+ ></lit-checkbox>
1909
+ ${col?.headerName ||
1909
1910
  col?.field}
1910
- </span>
1911
- </lit-menu-item>
1912
- `)}
1913
- </lit-menu>
1911
+ </span>
1912
+ </lit-menu-item>
1913
+ `)}
1914
+ </lit-menu>
1914
1915
 
1915
- ${isEqual(filteredColumns.length, 0)
1916
+ ${isEqual(filteredColumns.length, 0)
1916
1917
  ? html `
1918
+ <div
1919
+ style="display: flex; flex-direction: column; align-items: center; padding: 1rem;"
1920
+ >
1917
1921
  <div
1918
- style="display: flex; flex-direction: column; align-items: center; padding: 1rem;"
1922
+ style="max-height: 6rem; max-width: 6rem;"
1919
1923
  >
1920
- <div
1921
- style="max-height: 6rem; max-width: 6rem;"
1922
- >
1923
- <not-found></not-found>
1924
- </div>
1925
- <div>
1926
- ${msg('Nenalezeno')}
1927
- </div>
1924
+ <not-found></not-found>
1928
1925
  </div>
1929
- `
1926
+ <div>
1927
+ ${msg('Nenalezeno')}
1928
+ </div>
1929
+ </div>
1930
+ `
1930
1931
  : null}
1931
- </simple-popper>
1932
+ </simple-popper>
1932
1933
 
1933
- <lit-icon-button
1934
- icon="administration"
1935
- @click="${this.toggleModal}"
1936
- variant="dashed"
1937
- color="secondary"
1938
- style="display: inline-block"
1939
- ></lit-icon-button>
1940
- <data-grid-settings
1941
- .onClose="${() => {
1934
+ <lit-icon-button
1935
+ icon="administration"
1936
+ @click="${this.toggleModal}"
1937
+ variant="dashed"
1938
+ color="secondary"
1939
+ style="display: inline-block"
1940
+ ></lit-icon-button>
1941
+ <data-grid-settings
1942
+ .onClose="${() => {
1942
1943
  this.isOpenModal = false;
1943
1944
  }}"
1944
- .isOpenModal="${this.isOpenModal}"
1945
- .enableFiltering="${this.enableFiltering}"
1946
- .enableSorting="${this.enableSorting}"
1947
- .columnDefaultSize="${this
1945
+ .isOpenModal="${this.isOpenModal}"
1946
+ .enableFiltering="${this.enableFiltering}"
1947
+ .enableSorting="${this.enableSorting}"
1948
+ .columnDefaultSize="${this
1948
1949
  .columnDefaultSize}"
1949
- .columnGroupedColor="${this
1950
+ .columnGroupedColor="${this
1950
1951
  .columnGroupedColor}"
1951
- .rowAggregationColor="${this
1952
+ .rowAggregationColor="${this
1952
1953
  .rowAggregationColor}"
1953
- .enableGrouping="${this.enableGrouping}"
1954
- .enableColumnPinning="${this
1954
+ .enableGrouping="${this.enableGrouping}"
1955
+ .enableColumnPinning="${this
1955
1956
  .enableColumnPinning}"
1956
- .exportData="${this.exportData}"
1957
- .actionButtonsInMenu="${this
1957
+ .exportData="${this.exportData}"
1958
+ .actionButtonsInMenu="${this
1958
1959
  .actionButtonsInMenu}"
1959
- .hideFooter="${this.hideFooter}"
1960
- .alwaysFilter="${this.alwaysFilter}"
1961
- .alwaysFilterActive="${this
1960
+ .hideFooter="${this.hideFooter}"
1961
+ .alwaysFilter="${this.alwaysFilter}"
1962
+ .alwaysFilterActive="${this
1962
1963
  .alwaysFilterActive}"
1963
- .enableSettingsAlwaysFilter="${this
1964
+ .enableSettingsAlwaysFilter="${this
1964
1965
  .enableSettingsAlwaysFilter}"
1965
- .columns="${this.allColumns ||
1966
+ .columns="${this.allColumns ||
1966
1967
  this.columns}"
1967
- .variables="${this.variables}"
1968
- .userLang="${this.userLang}"
1969
- .allowedLang="${this.allowedLang}"
1970
- .emptyText="${this.emptyText}"
1971
- .onSettingsChangedModal="${this.onSettingsChangedCallback.bind(this)}"
1972
- ></data-grid-settings>
1973
- </div>
1974
- `
1968
+ .variables="${this.variables}"
1969
+ .userLang="${this.userLang}"
1970
+ .allowedLang="${this.allowedLang}"
1971
+ .emptyText="${this.emptyText}"
1972
+ .onSettingsChangedModal="${this.onSettingsChangedCallback.bind(this)}"
1973
+ ></data-grid-settings>
1974
+ </div>
1975
+ `
1975
1976
  : null}
1976
- </div>
1977
- </slot>
1978
- `
1977
+ </div>
1978
+ </slot>
1979
+ `
1979
1980
  : ''}
1980
- </div>
1981
1981
  ${rows.length < 1 && !this.isLoading
1982
1982
  ? html ` <div class="data-grid__empty">
1983
1983
  <slot name="empty">
@@ -2007,7 +2007,12 @@ LitDataGridTanstack.styles = [
2007
2007
  box-sizing: border-box;
2008
2008
  }
2009
2009
 
2010
- display: block;
2010
+ :host {
2011
+ display: block;
2012
+ height: 100%;
2013
+ overflow: hidden;
2014
+ }
2015
+
2011
2016
  font-family: 'Inter', sans-serif;
2012
2017
  box-sizing: border-box;
2013
2018
 
@@ -2019,12 +2024,15 @@ LitDataGridTanstack.styles = [
2019
2024
  background-color: var(--background-paper, #fff);
2020
2025
  height: 100%;
2021
2026
  z-index: 1;
2027
+ display: flex;
2028
+ flex-direction: column;
2022
2029
  }
2023
2030
 
2024
2031
  .grid {
2025
2032
  overflow: auto;
2026
2033
  position: relative;
2027
- height: 100%;
2034
+ flex: 1;
2035
+ min-height: 0;
2028
2036
  }
2029
2037
 
2030
2038
  .data-grid__empty {
@@ -2040,7 +2048,6 @@ LitDataGridTanstack.styles = [
2040
2048
  border-collapse: collapse;
2041
2049
  border-spacing: 0;
2042
2050
  width: 99% !important;
2043
- height: calc(100% - 38px);
2044
2051
  }
2045
2052
 
2046
2053
  thead {
@@ -2186,9 +2193,7 @@ LitDataGridTanstack.styles = [
2186
2193
  }
2187
2194
 
2188
2195
  .footer-container {
2189
- position: sticky;
2190
- left: 0;
2191
- bottom: 0;
2196
+ position: relative;
2192
2197
  background-color: var(--background-paper, #fff);
2193
2198
  width: auto;
2194
2199
  border-top: 1px solid var(--color-divider, #d0d3db);
@@ -2197,8 +2202,8 @@ LitDataGridTanstack.styles = [
2197
2202
  flex-direction: row;
2198
2203
  justify-content: space-between;
2199
2204
  align-items: center;
2200
- // padding: 0 16px;
2201
2205
  z-index: 10;
2206
+ flex-shrink: 0;
2202
2207
  }
2203
2208
 
2204
2209
  .right-actions {