overview-components 1.0.92 → 1.0.95

package/dist/components/lit-data-grid-tanstack.js

@@ -0,0 +1,1733 @@
+import "../node_modules/@lit/reactive-element/reactive-element.js";
+import { html as u } from "../node_modules/lit-html/lit-html.js";
+import { LitElement as tt } from "../node_modules/lit-element/lit-element.js";
+import et, { l as it } from "../node_modules/lodash/lodash.js";
+import { msg as R } from "../node_modules/@lit/localize/init/install.js";
+import "../node_modules/@lit/localize/init/runtime.js";
+import { customElement as ot } from "../node_modules/@lit/reactive-element/decorators/custom-element.js";
+import { property as a } from "../node_modules/@lit/reactive-element/decorators/property.js";
+import { state as z } from "../node_modules/@lit/reactive-element/decorators/state.js";
+import { query as Q } from "../node_modules/@lit/reactive-element/decorators/query.js";
+import { unsafeHTML as j } from "../node_modules/lit-html/directives/unsafe-html.js";
+import { TableController as nt, flexRender as L } from "../node_modules/@tanstack/lit-table/build/lib/index.js";
+import { repeat as T } from "../node_modules/lit-html/directives/repeat.js";
+import { VirtualizerController as K } from "../node_modules/@tanstack/lit-virtual/dist/esm/index.js";
+import { createRef as lt, ref as X } from "../node_modules/lit-html/directives/ref.js";
+import { styleMap as E } from "../node_modules/lit-html/directives/style-map.js";
+import st from "../node_modules/sortablejs/modular/sortable.esm.js";
+import { formatDate as W } from "../utils/date.js";
+import { formatCurrency as rt } from "../utils/currency.js";
+import { dateFilterFn as Z, dateRangeFilterFn as Y, multiselectFilterFn as J } from "../utils/custom-filters.js";
+import { getLocale as at, setLocale as dt } from "../utils/localization.js";
+import { getOperatorsByColumnType as ct } from "../utils/getOperatorByType.js";
+import { filterFns as V, getFacetedUniqueValues as ht, getExpandedRowModel as pt, getGroupedRowModel as ut, getFacetedRowModel as gt, getFilteredRowModel as mt, getSortedRowModel as ft, getCoreRowModel as bt } from "../node_modules/@tanstack/table-core/build/lib/index.js";
+import { css as yt } from "../node_modules/@lit/reactive-element/css-tag.js";
+var wt = Object.defineProperty, xt = Object.getOwnPropertyDescriptor, l = (t, e, o, d) => {
+  for (var s = d > 1 ? void 0 : d ? xt(e, o) : e, p = t.length - 1, g; p >= 0; p--)
+    (g = t[p]) && (s = (d ? g(e, o, s) : g(s)) || s);
+  return d && s && wt(e, o, s), s;
+};
+let n = class extends tt {
+  constructor() {
+    super(...arguments), this.row = [], this.columns = [], this.enableRowVirtualization = !0, this.enableColumnVirtualization = !1, this.enableColumnPinning = !0, this.enableColumnOrdering = !1, this.enableGrouping = !0, this.enablePinning = !0, this.exportData = !0, this.actionButtonsInMenu = !1, this.id = "", this.initialSorting = [], this.initialRowExpanded = {}, this.columnSizing = {}, this.leftPinnedColumns = [], this.rightPinnedColumns = [], this.enableFiltering = !0, this.enableSorting = !0, this.userLang = "cs", this.dateFormat = null, this.isLoading = !1, this.enableRowSelection = !1, this.initialFiltering = [], this.server = !1, this.scrollEndThreshold = 100, this.rowDensity = "standard", this.enableMultiRowSelection = !1, this.minFilterCharacters = 3, this.localizeDate = !0, this.rowsSelected = {}, this.enableSettings = !1, this.onSettingsChanged = () => {
+    }, this.onCellKeyDown = (t, e) => {
+    }, this.onColumnResize = () => {
+    }, this.onColumnFiltersChanged = (t, e) => {
+    }, this.onColumnSortChanged = (t, e) => {
+    }, this.onRowSelectionChanged = (t, e) => {
+    }, this.onColumnOrderChanged = (t, e) => {
+    }, this.hideFooter = !1, this.columnVisibility = {}, this.onColumnVisibilityChanged = (t, e) => {
+    }, this.onMouseDown = (t, e) => {
+    }, this.onRowFocusChanged = (t, e) => {
+    }, this.focusedRowIndex = null, this.autoFocus = !1, this.rowsCount = 0, this.isScrollable = !1, this.disableScrollLeft = !0, this.disableScrollRight = !1, this.columnOrder = [], this.isOpen = !1, this.filterText = "", this.isOpenModal = !1, this.scrollToEnd = !1, this.tableContainerRef = lt(), this.scrollInterval = null, this.currentScrollTop = 0, this.lastSelectedIndex = null, this.getCellBackgroundColor = (t) => t.getIsGrouped() ? this.columnGroupedColor ?? "var(--color-primary-light, #f0fadf)" : t.getIsAggregated() ? this.rowAggregationColor ?? "var(--color-warning-light, #ffe1a8)" : t.getIsPlaceholder() ? "var(--background-default, #eff3f4)" : t.column.getIsPinned() ? "var(--background-paper, #fff)" : "transparent", this.updateScrollState = () => {
+      const t = this.tableContainerRef.value;
+      if (t) {
+        const e = t.scrollWidth > t.clientWidth;
+        this.isScrollable = e, this.disableScrollLeft = t.scrollLeft === 0, this.disableScrollRight = t.scrollLeft + t.clientWidth >= t.scrollWidth, this.currentScrollTop = t.scrollTop;
+      }
+    };
+  }
+  get rows() {
+    return [...this.row || []];
+  }
+  get getColumns() {
+    return [...this.columns || []];
+  }
+  // lifecycle
+  connectedCallback() {
+    this.initRowVirtualizer(), this.initColumnVirtualizer(), this.initTable(), window.addEventListener("resize", this.updateScrollState), super.connectedCallback();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), window.removeEventListener("resize", this.updateScrollState);
+  }
+  updated(t) {
+    var e, o, d, s, p;
+    if (t.has("rowsCount") && this.enableRowVirtualization) {
+      this.scrollToEnd = !1;
+      const g = (e = this.rowVirtualizerController) == null ? void 0 : e.getVirtualizer();
+      g && g.setOptions({
+        ...g.options,
+        count: (d = (o = this.table) == null ? void 0 : o.getRowModel()) == null ? void 0 : d.rows.length
+      }), this.requestUpdate();
+    }
+    if ((t.has("columns") || t.has("columnVisibility")) && this.enableColumnVirtualization) {
+      const g = (s = this.columnVirtualizerController) == null ? void 0 : s.getVirtualizer();
+      g && g.setOptions({
+        ...g.options,
+        count: (p = this.table) == null ? void 0 : p.getVisibleLeafColumns().length
+      });
+    }
+    (t.has("row") || t.has("columns")) && (this.initTable(), this.requestUpdate());
+  }
+  firstUpdated() {
+    const t = this.tableContainerRef.value;
+    t && t.addEventListener("scroll", this.updateScrollState), this.updateScrollState(), this.initSortable(), this._container.addEventListener("scroll", this.handleScroll.bind(this)), this.autoFocus && setTimeout(() => {
+      var e, o;
+      if (this.focusedRowIndex !== null && this.focusedRowIndex !== void 0)
+        (e = this.focusRow) == null || e.call(this, this.focusedRowIndex);
+      else {
+        const d = this.table.getSelectedRowModel().rows;
+        d.length > 0 && ((o = this.focusRow) == null || o.call(this, d[0].index));
+      }
+    }, 0);
+  }
+  toggleModal() {
+    this.isOpenModal = !this.isOpenModal;
+  }
+  async initSortable() {
+    var e;
+    if (!this.enableColumnOrdering) return;
+    const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector("thead tr.head");
+    t && st.create(t, {
+      animation: 150,
+      direction: "horizontal",
+      handle: ".drag-handle",
+      filter: 'th[data-index="checkbox"], th[data-index="actions"]',
+      preventOnFilter: !1,
+      onMove: (o) => {
+        var v, I, i, r, b, c, D, y;
+        const d = o.dragged.getAttribute("data-index"), s = o.related.getAttribute("data-index"), p = ["checkbox", "actions"];
+        if (p.includes(d) || p.includes(s))
+          return !1;
+        const g = this.table.getHeaderGroups()[0].headers, h = g.find((F) => F.id === d), m = g.find((F) => F.id === s);
+        if (!h || !m) return !1;
+        const x = (I = (v = h.column).getIsPinned) == null ? void 0 : I.call(v), C = (r = (i = m.column).getIsPinned) == null ? void 0 : r.call(i), w = (c = (b = h.column).getIsGrouped) == null ? void 0 : c.call(b), S = (y = (D = m.column).getIsGrouped) == null ? void 0 : y.call(D);
+        return !(x || C || w || S);
+      },
+      onEnd: () => {
+        const o = Array.from(t.querySelectorAll("th")).map((d) => d.getAttribute("data-index")).filter((d) => {
+          var p, g, h, m;
+          if (!d || d === "checkbox" || d === "actions") return !1;
+          const s = this.table.getHeaderGroups()[0].headers.find((x) => x.id === d);
+          return s ? !((g = (p = s.column).getIsPinned) != null && g.call(p)) && !((m = (h = s.column).getIsGrouped) != null && m.call(h)) : !1;
+        });
+        this.table.setColumnOrder(o);
+      }
+    });
+  }
+  async loadXLSX() {
+    !window.XLSX && !this.server && await new Promise((t) => {
+      const e = document.createElement("script");
+      e.src = "../../public/libs/xlsx.mini.min.js", e.onload = t, document.head.appendChild(e);
+    });
+  }
+  // row density
+  getRowHeight() {
+    switch (this.rowDensity) {
+      case "compact":
+        return 31;
+      case "standard":
+        return 38;
+      case "comfort":
+        return 50;
+      default:
+        return 38;
+    }
+  }
+  getButtonSize() {
+    switch (this.rowDensity) {
+      case "compact":
+        return "small";
+      case "standard":
+        return "medium";
+      case "comfort":
+        return "large";
+      default:
+        return "medium";
+    }
+  }
+  handleSetDensity(t) {
+    this.rowDensity = t, this.rowDensityChange && this.rowDensityChange(this.table, t);
+  }
+  handleMouseDown(t, e) {
+    this.onMouseDown && this.onMouseDown(t, e);
+  }
+  handleFilterTabNavigation(t) {
+    var g, h, m;
+    const { direction: e, currentFilter: o } = t.detail, d = Array.from(((g = this.shadowRoot) == null ? void 0 : g.querySelectorAll("filter-inputs")) || []);
+    if (d.length === 0) return;
+    const s = d.indexOf(o);
+    let p;
+    if (e === "forward")
+      if (s === d.length - 1) {
+        const x = (h = this.shadowRoot) == null ? void 0 : h.querySelector(".grid");
+        x && (x.scrollLeft = 0), setTimeout(() => {
+          var w;
+          const C = (w = this.shadowRoot) == null ? void 0 : w.querySelector("filter-inputs");
+          C && C.focus();
+        }, 0);
+        return;
+      } else
+        p = s + 1;
+    else if (s === 0) {
+      const x = (m = this.shadowRoot) == null ? void 0 : m.querySelector(".grid");
+      x && (x.scrollLeft = x.scrollWidth), setTimeout(() => {
+        var w;
+        const C = Array.from(
+          ((w = this.shadowRoot) == null ? void 0 : w.querySelectorAll("filter-inputs")) || []
+        );
+        C.length > 0 && C[C.length - 1].focus();
+      }, 0);
+      return;
+    } else
+      p = s - 1;
+    d[p].focus();
+  }
+  // virtualization
+  initRowVirtualizer() {
+    var t, e, o;
+    this.rowVirtualizerController = new K(this, {
+      count: ((e = (t = this.table) == null ? void 0 : t.getRowModel()) == null ? void 0 : e.rows.length) || ((o = this.row) == null ? void 0 : o.length) || 1,
+      getScrollElement: () => this.tableContainerRef.value,
+      estimateSize: () => this.getRowHeight(),
+      overscan: 5,
+      initialOffset: this.currentScrollTop,
+      enabled: this.enableRowVirtualization
+    });
+  }
+  initTable() {
+    this.tableController = new nt(this);
+  }
+  initColumnVirtualizer() {
+    var t;
+    this.columnVirtualizerController = new K(this, {
+      horizontal: !0,
+      count: ((t = this.table) == null ? void 0 : t.getVisibleLeafColumns().length) || this.columns.length || 1,
+      getScrollElement: () => this.tableContainerRef.value,
+      estimateSize: (e) => {
+        var o;
+        return ((o = this.table.getVisibleLeafColumns()[e]) == null ? void 0 : o.getSize()) || 200;
+      },
+      overscan: 5,
+      enabled: this.enableColumnVirtualization
+    });
+  }
+  handleRowClick(t, e) {
+    var s, p;
+    (s = this.onRowClick) == null || s.call(this, t, this.table, e), (p = this.onRowFocusChanged) == null || p.call(this, this.table, e.index);
+    const o = t.shiftKey, d = t.ctrlKey || t.metaKey;
+    if (this.enableRowSelection && e.getCanSelect() && (d || o)) {
+      const { rows: g } = this.table.getRowModel();
+      if (this.enableMultiRowSelection && o && this.focusedRowIndex !== null && this.focusedRowIndex !== void 0) {
+        const [h, m] = [
+          Math.min(this.focusedRowIndex, e.index),
+          Math.max(this.focusedRowIndex, e.index)
+        ], x = g.slice(h, m + 1).map((w) => w.id), C = { ...this.rowsSelected };
+        x.forEach((w) => C[w] = !0), this.table.setRowSelection(C);
+      } else if (d && this.enableMultiRowSelection) {
+        const h = { ...this.rowsSelected };
+        h[e.id] ? delete h[e.id] : h[e.id] = !0, this.table.setRowSelection(h);
+      } else {
+        const h = { [e.id]: !0 };
+        this.table.setRowSelection(h);
+      }
+    }
+    this.focusedRowIndex = e.index;
+  }
+  handleRowDoubleClick(t) {
+    this.onRowDoubleClick && this.onRowDoubleClick(this.table, t);
+  }
+  handleKeyDown(t) {
+    var d;
+    const e = this.table.getRowModel().rows;
+    if (!e.length) return;
+    let o = this.focusedRowIndex ?? e.findIndex((s) => this.rowsSelected[s.id]);
+    if (this.enableRowSelection) {
+      if (o === -1 && (o = 0), t.key === "ArrowDown" && t.shiftKey && this.enableMultiRowSelection) {
+        t.preventDefault();
+        const s = o + 1;
+        if (s < e.length) {
+          const p = e[s].id;
+          this.table.setRowSelection((g) => ({
+            ...g,
+            [p]: !g[p]
+          })), this.focusRow(s);
+        }
+      } else if (t.key === "ArrowUp" && t.shiftKey && this.enableMultiRowSelection) {
+        t.preventDefault();
+        const s = o - 1;
+        if (s >= 0) {
+          const p = e[s].id;
+          this.table.setRowSelection((g) => ({
+            ...g,
+            [p]: !g[p]
+          })), this.focusRow(s);
+        }
+      } else if (t.key === "ArrowDown" && o < e.length - 1) {
+        t.preventDefault();
+        const s = o + 1;
+        this.focusRow(s);
+      } else if (t.key === "ArrowUp" && o > 0) {
+        t.preventDefault();
+        const s = o - 1;
+        this.focusRow(s);
+      }
+    }
+    (d = this.onCellKeyDown) == null || d.call(this, t, e[o]);
+  }
+  focusRow(t) {
+    var o, d;
+    const e = t ?? this.focusedRowIndex;
+    (o = this.rowVirtualizerController) == null || o.getVirtualizer().scrollToIndex(e ?? 0, { align: "auto" }), setTimeout(() => {
+      var p;
+      const s = (p = this.shadowRoot) == null ? void 0 : p.querySelector(
+        `[data-row-index="${e}"]`
+      );
+      this.enableRowVirtualization ? s && setTimeout(() => {
+        s.focus();
+      }, 0) : s && (s.focus(), s.scrollIntoView({ block: "nearest" }));
+    }, 100), (d = this.onRowFocusChanged) == null || d.call(this, this.table, e), this.focusedRowIndex = e;
+  }
+  getTanstackColumns(t) {
+    return t.map((e) => ({
+      id: e.field,
+      accessorKey: e.field,
+      accessorFn: (o) => (e.type === "date" || e.type === "dateTime" || e.type === "dateTimeRange" || e.type === "dateRange") && !this.server && this.localizeDate ? e.accessorFn ? W(
+        e.accessorFn(o),
+        this.userLang || "cs",
+        e.type === "date" || e.type === "dateRange" ? void 0 : !0,
+        this.dateFormat
+      ) : W(
+        o[e.field],
+        this.userLang || "cs",
+        e.type === "date" || e.type === "dateRange" ? void 0 : !0,
+        this.dateFormat
+      ) : e.accessorFn ? e.accessorFn(o) : o[e.field],
+      type: e.type,
+      header: e.headerName,
+      cell: (o) => {
+        var s;
+        const d = o.getValue();
+        return e.type === "actions" ? u`
+                            <lit-data-grid-row-actions
+                                .buttons=${((s = e.getActions) == null ? void 0 : s.call(e, o)) || []}
+                            ></lit-data-grid-row-actions>
+                        ` : e.type === "currency" ? rt(d, this.userLang || "cs") : e.cell ? e.cell(o, u, j) : d;
+      },
+      filterFn: (() => {
+        switch (e.type) {
+          case "numberRange":
+            return V.inNumberRange;
+          case "select":
+            return V.weakEquals;
+          case "multiselect":
+            return J;
+          case "number":
+          case "currency":
+            return V.weakEquals;
+          case "dateRange":
+          case "dateTimeRange":
+            return Y;
+          case "date":
+          case "dateTime":
+            return Z;
+          case "string":
+          default:
+            return V.includesString;
+        }
+      })(),
+      enableSorting: e.enableSorting ?? !0,
+      enableColumnFilter: this.enableFiltering && (e.enableFilter ?? !0),
+      size: e.size || this.columnDefaultSize || void 0,
+      maxSize: e.maxSize || this.columnDefaultMaxSize || 500,
+      minSize: e.minSize || this.columnDefaultMinSize || 100,
+      meta: {
+        filterVariant: e.type ?? "string",
+        valueOptions: e.valueOptions,
+        filterOperators: e.filterOperators
+      },
+      aggregationFn: e.columnAggregation ?? void 0,
+      enableGrouping: e.enableGrouping ?? !0,
+      sortDescFirst: e.sortDescFirst || !0,
+      enableResizing: e.enableResizing ?? !0,
+      enablePinning: this.enablePinning && (e.enablePinning ?? !0),
+      aggregatedCell: (o) => {
+        const d = o.getValue();
+        return e.aggregatedCell ? e.aggregatedCell(o, u, j) : d;
+      }
+    }));
+  }
+  getCommonPinningStyles(t) {
+    const e = t.getIsPinned();
+    if (!e)
+      return {};
+    const o = e === "left" && t.getIsLastColumn("left");
+    return {
+      position: e ? "sticky" : "relative",
+      left: e === "left" ? `${t.getStart("left")}px` : void 0,
+      right: e === "right" ? "0px" : void 0,
+      boxShadow: o && t.columnDef.type !== "checkbox" ? "-4px 0 4px -4px gray inset" : void 0,
+      zIndex: `${e ? 1 : "auto"}`,
+      background: e ? "var(--background-paper, #fff)" : void 0
+    };
+  }
+  togglePin(t) {
+    t.column.getIsPinned() ? t.column.pin(!1) : t.column.pin("left");
+  }
+  // export to excel and csv
+  exportDataToCsv() {
+    const t = this.getAllRowsIncludingGrouped(this.table.getRowModel().rows);
+    if (!t || t.length === 0) {
+      console.warn("No data to export");
+      return;
+    }
+    const e = this.columns.map((m) => m.headerName || "").join(","), o = t.map((m) => this.columns.map((x) => {
+      var S, v;
+      const C = x.field;
+      if ((S = m.getIsGrouped) != null && S.call(m))
+        return x.field === m.groupingColumnId ? `"${m.getValue(x.field)} (${m.subRows.length})"` : "";
+      const w = ((v = m.getValue) == null ? void 0 : v.call(m, C)) || "";
+      return typeof w == "string" ? `"${w.replace(/"/g, '""')}"` : w;
+    }).join(","));
+    o.unshift(e);
+    const d = o.join(`
+`), s = new Blob([d], { type: "text/csv;charset=utf-8;" }), p = prompt(R("Zadejte název souboru:"), "data");
+    if (!p)
+      return;
+    const g = URL.createObjectURL(s), h = document.createElement("a");
+    h.href = g, h.download = `${p}.csv`, h.click(), URL.revokeObjectURL(g);
+  }
+  async exportDataToExcel() {
+    await this.loadXLSX();
+    const t = window.XLSX, e = this.getAllRowsIncludingGrouped(this.table.getRowModel().rows);
+    if (!e || e.length === 0) {
+      console.warn("No data to export");
+      return;
+    }
+    const o = e.map((h) => {
+      const m = {};
+      return this.columns.forEach((x) => {
+        var S, v;
+        const C = x.headerName || "", w = x.field;
+        (S = h.getIsGrouped) != null && S.call(h) ? x.field === h.groupingColumnId ? m[C] = `${h.getValue(w)} (${h.subRows.length})` : m[C] = "" : w && (m[C] = ((v = h.getValue) == null ? void 0 : v.call(h, w)) || "");
+      }), m;
+    }), d = t.utils.json_to_sheet(o), s = this.columns.map((h, m) => {
+      var C;
+      return { wch: Math.max(
+        ((C = h.headerName) == null ? void 0 : C.length) || 10,
+        ...o.map((w) => {
+          var S;
+          return ((S = w[h.headerName || ""]) == null ? void 0 : S.toString().length) || 0;
+        })
+        // Najdlhší obsah v stĺpci
+      ) + 2 };
+    });
+    d["!cols"] = s;
+    const p = t.utils.book_new();
+    t.utils.book_append_sheet(p, d, "Data");
+    const g = prompt(R("Zadejte název souboru:"), "data");
+    g && t.writeFile(p, `${g}.xlsx`);
+  }
+  getAllRowsIncludingGrouped(t) {
+    const e = [];
+    return t.forEach((o) => {
+      var d;
+      (d = o.getIsGrouped) != null && d.call(o) ? (e.push(o), o.subRows && o.subRows.length > 0 && e.push(...this.getAllRowsIncludingGrouped(o.subRows))) : e.push(o);
+    }), e.filter(
+      (o, d, s) => d === s.findIndex((p) => p.id === o.id)
+    );
+  }
+  startScroll(t) {
+    const e = this.tableContainerRef.value;
+    if (!e) return;
+    const o = t === "left" ? -15 : 15, d = () => {
+      e.scrollLeft += o, this.updateScrollState(), this.scrollInterval = requestAnimationFrame(d);
+    };
+    this.scrollInterval = requestAnimationFrame(d);
+  }
+  stopScroll() {
+    this.scrollInterval && (cancelAnimationFrame(this.scrollInterval), this.scrollInterval = null);
+  }
+  // centralize your “at end” logic
+  _atScrollEnd(t) {
+    const e = this.scrollEndThreshold ?? 100;
+    return t.scrollHeight <= t.clientHeight || t.scrollTop + t.clientHeight >= t.scrollHeight - e;
+  }
+  _maybeTriggerScrollEnd() {
+    this._atScrollEnd(this._container) && this.onRowsScrollEnd && !this.isLoading && !this.scrollToEnd && (this.scrollToEnd = !0, this.onRowsScrollEnd());
+  }
+  handleScroll(t) {
+    this._maybeTriggerScrollEnd();
+  }
+  // handleScroll(event: Event) {
+  //     const container = event.target as HTMLElement;
+  //     if (
+  //         container.scrollTop + container.clientHeight >=
+  //             container.scrollHeight - (this.scrollEndThreshold || 100) &&
+  //         this.onRowsScrollEnd &&
+  //         !this.isLoading &&
+  //         !this.scrollToEnd
+  //     ) {
+  //         this.scrollToEnd = true;
+  //         this.onRowsScrollEnd();
+  //     }
+  // }
+  handleGetTotalNumber() {
+    this.getTotalNumberFn && this.getTotalNumberFn();
+  }
+  toggleCustomPopover() {
+    this.isOpen = !this.isOpen;
+  }
+  closePopover() {
+    this.isOpen = !1;
+  }
+  toggleColumn(t) {
+    var e;
+    this.columnVisibility = {
+      ...this.columnVisibility,
+      [t]: !(((e = this.columnVisibility) == null ? void 0 : e[t]) ?? !0)
+    }, this.table.setColumnVisibility(this.columnVisibility);
+  }
+  onSettingsChangedCallback(t) {
+    var e;
+    (t == null ? void 0 : t.enableSorting) !== void 0 && (this.enableSorting = t.enableSorting), (t == null ? void 0 : t.enableFiltering) !== void 0 && (this.enableFiltering = t.enableFiltering), (t == null ? void 0 : t.columnDefaultSize) !== void 0 && (this.columnDefaultSize = t.columnDefaultSize), (t == null ? void 0 : t.columnGroupedColor) !== void 0 && (this.columnGroupedColor = t.columnGroupedColor), (t == null ? void 0 : t.rowAggregationColor) !== void 0 && (this.rowAggregationColor = t.rowAggregationColor), (t == null ? void 0 : t.enableGrouping) !== void 0 && (this.enableGrouping = t.enableGrouping), (t == null ? void 0 : t.exportData) !== void 0 && (this.exportData = t.exportData), (t == null ? void 0 : t.actionButtonsInMenu) !== void 0 && (this.actionButtonsInMenu = t.actionButtonsInMenu), (t == null ? void 0 : t.hideFooter) !== void 0 && (this.hideFooter = t.hideFooter), (t == null ? void 0 : t.enableColumnPinning) !== void 0 && (this.enableColumnPinning = t.enableColumnPinning), this.initTable(), this.requestUpdate(), this.onSettingsChanged && (this.dispatchEvent(
+      new CustomEvent("onSettingsChanged", {
+        bubbles: !0,
+        composed: !0,
+        detail: t
+      })
+    ), (e = this.onSettingsChanged) == null || e.call(this, t));
+  }
+  _onRowMouseDown(t, e) {
+    if (this.handleMouseDown(t, e), t.shiftKey) {
+      t.currentTarget && t.currentTarget.classList.add("no-select");
+      const o = window.getSelection();
+      o && o.removeAllRanges();
+    }
+  }
+  _onRowMouseUp(t) {
+    t.currentTarget.classList.remove("no-select");
+  }
+  _rowUnselectAll(t) {
+    t.resetRowSelection(), this.focusedRowIndex = 0;
+  }
+  render() {
+    var C, w, S, v, I;
+    const t = ((C = this.columns) == null ? void 0 : C.filter((i) => {
+      var b;
+      return (((b = i.headerName) == null ? void 0 : b.toLowerCase()) || i.field.toLowerCase()).includes(this.filterText);
+    })) || [], e = this.enableMultiRowSelection ? [
+      {
+        id: "checkboxForMultiselect",
+        type: "checkbox",
+        minSize: 30,
+        size: 30,
+        enablePinning: !1,
+        enableResizing: !1,
+        header: ({ table: i }) => u`
+                          <div style="position: absolute; left: 0; bottom: 0; margin: 0.65rem 0;">
+                              <lit-checkbox
+                                  type="checkbox"
+                                  .onChange="${() => i.getIsSomeRowsSelected() ? this._rowUnselectAll(i) : i.toggleAllRowsSelected()}"
+                                  .checked="${i.getIsAllRowsSelected()}"
+                                  .indeterminate="${i.getIsSomeRowsSelected()}"
+                              ></lit-checkbox>
+                          </div>
+                      `,
+        cell: ({ table: i, row: r }) => u`
+                          <div
+                              style="padding: 0.1875rem 0px 0px 0px"
+                              @click=${(b) => b.stopPropagation()}
+                          >
+                              <lit-checkbox
+                                  type="checkbox"
+                                  .onChange="${(b) => {
+          b.stopPropagation(), r.toggleSelected(b.target.checked);
+        }}"
+                                  .checked="${r.getIsSelected()}"
+                                  ?disabled="${!r.getCanSelect()}"
+                                  .indeterminate="${r.getIsSomeSelected()}"
+                              ></lit-checkbox>
+                          </div>
+                      `
+      }
+    ] : [];
+    at() !== this.userLang && dt(this.userLang || "cs"), this.table = this.tableController.table({
+      data: this.rows || [],
+      columns: [...e, ...this.getTanstackColumns(this.getColumns)],
+      columnResizeMode: "onChange",
+      columnResizeDirection: "ltr",
+      defaultColumn: {
+        size: this.columnDefaultSize || void 0,
+        //starting column size
+        minSize: this.columnDefaultMinSize || 100,
+        //enforced during column resizing
+        maxSize: this.columnDefaultMaxSize || 500
+        //enforced during column resizing
+      },
+      initialState: {
+        // columnFilters: [...(this.initialFiltering || [])],
+        // sorting: [...(this.initialSorting || [])],
+        // expanded: { ...this.initialRowExpanded },
+        grouping: [...this.initialGroups || []],
+        columnVisibility: { ...this.initialColumnVisibility },
+        columnPinning: {
+          left: [...this.leftPinnedColumns || [], "checkboxForMultiselect"],
+          right: ["actions"]
+        }
+      },
+      state: {
+        columnVisibility: this.columnVisibility,
+        // columnFilters: this.server ? this.filtersServer : this.filters,
+        columnFilters: this.initialFiltering,
+        sorting: this.initialSorting,
+        rowSelection: this.rowsSelected,
+        columnSizing: this.columnSizing,
+        expanded: this.initialRowExpanded,
+        columnOrder: this.columnOrder
+      },
+      filterFns: {
+        dateRangeFilterFn: Y,
+        dateFilterFn: Z,
+        multiselectFilterFn: J
+      },
+      // debugTable: true,
+      enableRowSelection: this.enableRowSelection,
+      enableMultiRowSelection: this.enableMultiRowSelection,
+      enableColumnPinning: this.enableColumnPinning,
+      enableGrouping: this.enableGrouping,
+      manualFiltering: this.server,
+      manualSorting: this.server,
+      enableSorting: this.enableSorting,
+      getRowId: (i, r) => this.getRowId ? this.getRowId(i, r) : r.toString(),
+      // groupedColumnMode: 'reorder',
+      getCoreRowModel: bt(),
+      getSortedRowModel: ft(),
+      getFilteredRowModel: mt(),
+      getFacetedRowModel: gt(),
+      getGroupedRowModel: ut(),
+      getExpandedRowModel: pt(),
+      getFacetedUniqueValues: ht(),
+      onColumnFiltersChange: (i) => {
+        this.currentScrollTop = 0;
+        const r = this.tableContainerRef.value;
+        r && (r.scrollTop = 0);
+        const b = typeof i == "function" ? i(this.table.getState().columnFilters) : i;
+        this.initialFiltering = b, this.onColumnFiltersChanged && this.onColumnFiltersChanged(this.table, b);
+      },
+      onSortingChange: (i) => {
+        this.currentScrollTop = 0;
+        const r = this.tableContainerRef.value;
+        r && (r.scrollTop = 0);
+        const b = typeof i == "function" ? i(this.table.getState().sorting) : i;
+        this.initialSorting = b, this.onColumnSortChanged && this.onColumnSortChanged(this.table, b);
+      },
+      onRowSelectionChange: (i) => {
+        const r = typeof i == "function" ? i(this.rowsSelected) : i;
+        this.rowsSelected = r, this.onRowSelectionChanged && this.onRowSelectionChanged(this.table, r);
+      },
+      onColumnSizingChange: (i) => {
+        const r = typeof i == "function" ? i(this.table.getState().columnSizing) : i;
+        this.columnSizing = r, this.onColumnResize && this.onColumnResize(this.table, r);
+      },
+      onExpandedChange: (i) => {
+        const r = typeof i == "function" ? i(this.initialRowExpanded) : i;
+        this.initialRowExpanded = et.isEmpty(r) ? this.initialRowExpanded : r, this.requestUpdate();
+      },
+      onColumnOrderChange: (i) => {
+        const r = typeof i == "function" ? i(this.columnOrder) : i;
+        this.columnOrder = r, this.render(), this.onColumnOrderChanged && this.onColumnOrderChanged(this.table, r);
+      },
+      onColumnVisibilityChange: (i) => {
+        const r = typeof i == "function" ? i(this.table.getState().columnVisibility) : i;
+        this.columnVisibility = r, this.onColumnVisibilityChanged && this.onColumnVisibilityChanged(this.table, r);
+      }
+    }), this.rowsCount = this.table.getRowModel().rows.length;
+    const o = this.enableRowVirtualization ? (w = this.rowVirtualizerController) == null ? void 0 : w.getVirtualizer() : null, d = this.enableColumnVirtualization ? (S = this.columnVirtualizerController) == null ? void 0 : S.getVirtualizer() : null, s = (d == null ? void 0 : d.getVirtualItems()) ?? [], { rows: p } = this.table.getRowModel(), g = o ? o.getVirtualItems() : p.map((i, r) => ({
+      key: r,
+      index: r,
+      start: r * this.getRowHeight(),
+      end: (r + 1) * this.getRowHeight(),
+      size: this.getRowHeight(),
+      lane: 0
+    }));
+    let h, m;
+    d && (s != null && s.length) && this.enableColumnVirtualization && (h = ((v = s[0]) == null ? void 0 : v.start) ?? 0, m = d.getTotalSize() - (((I = s[s.length - 1]) == null ? void 0 : I.end) ?? 0));
+    let x = window.matchMedia("(max-width: 600px)").matches;
+    return u`
+            <div class="data-grid__wrapper">
+                ${this.isScrollable && !x ? u`
+                          <lit-icon-button
+                              class="scroll-button left"
+                              .disabled="${this.disableScrollLeft}"
+                              @pointerdown="${() => this.startScroll("left")}"
+                              @pointerup="${this.stopScroll}"
+                              @pointerleave="${this.stopScroll}"
+                              size="small"
+                              variant="contained"
+                              icon="arrowLeft"
+                          >
+                          </lit-icon-button>
+                          <lit-icon-button
+                              class="scroll-button right"
+                              .disabled="${this.disableScrollRight}"
+                              @pointerdown="${() => this.startScroll("right")}"
+                              @pointerup="${this.stopScroll}"
+                              @pointerleave="${this.stopScroll}"
+                              size="small"
+                              variant="contained"
+                              icon="arrowRight"
+                          >
+                          </lit-icon-button>
+                      ` : null}
+
+                <div class="grid" ${X(this.tableContainerRef)}>
+                    <table
+                        part="dataGrid-table"
+                        style="width: ${this.table.getCenterTotalSize()}px"
+                    >
+                        <thead
+                            part="dataGrid-header"
+                            style="height: ${this.enableFiltering ? "4rem" : "1.625rem"};"
+                        >
+                            ${T(
+      this.table.getHeaderGroups(),
+      (i) => i.id,
+      (i) => {
+        const r = this.enableColumnVirtualization ? s.map((c) => i.headers[c.index]) : i.headers, b = this.enableColumnVirtualization ? [
+          ...i.headers.filter(
+            (c) => c.column.getIsPinned()
+          ),
+          ...r.filter(
+            (c) => !c.column.getIsPinned()
+          )
+        ] : r;
+        return u`
+                                        <tr class="head" data-index="${i.id}">
+                                            ${h ? u`
+                                                      <th
+                                                          style=" display: flex; width: ${h}px;"
+                                                      ></th>
+                                                  ` : ""}
+                                            ${T(
+          b,
+          (c) => c.id,
+          (c, D) => {
+            var G, A, O, _, B, N, H, U;
+            const y = c.column, F = {
+              visibility: y.columnDef.type === "actions" ? "hidden" : "visible",
+              ...this.getCommonPinningStyles(
+                c.column
+              ),
+              width: `${y == null ? void 0 : y.getSize()}px`,
+              flexGrow: `${y.columnDef.size === void 0 ? 1 : "unset"}`
+            }, f = (G = y.columnDef.meta) == null ? void 0 : G.filterVariant, k = ((O = (A = y == null ? void 0 : y.columnDef) == null ? void 0 : A.meta) == null ? void 0 : O.filterOperators) || ct(f), P = ((_ = y == null ? void 0 : y.getFilterValue()) == null ? void 0 : _.value) || (y == null ? void 0 : y.getFilterValue()) || "", M = ((B = y == null ? void 0 : y.getFilterValue()) == null ? void 0 : B.operator) || ((N = k[0]) == null ? void 0 : N.value);
+            return (f === "select" || f === "multiselect") && ((H = y == null ? void 0 : y.columnDef) != null && H.meta.valueOptions || this.server ? (U = y == null ? void 0 : y.columnDef) != null && U.meta.valueOptions : Array.from(
+              y == null ? void 0 : y.getFacetedUniqueValues().keys()
+            ).sort().slice(0, 5e3).map(
+              (q) => ({
+                value: q,
+                label: q
+              })
+            )), u`
+                                                        <th
+                                                            class="head"
+                                                            style="${E(F)}"
+                                                            colspan="${c.colSpan}"
+                                                            data-index="${c.id}"
+                                                        >
+                                                            ${c.isPlaceholder ? "" : u`
+                                                                      <div
+                                                                          class="resizer ${this.table.options.columnResizeDirection} ${c.column.getIsResizing() ? "is-resizing" : ""}"
+                                                                          style="transform:  ${this.table.options.columnResizeMode === "onEnd" && c.column.getIsResizing() ? `translateX(${(this.table.options.columnResizeDirection === "rtl" ? -1 : 1) * (this.table.getState().columnSizingInfo.deltaOffset ?? 0)}px)` : ""}"
+                                                                      >
+                                                                          <div class="header">
+                                                                              ${c.column.getIsFiltered() ? u`
+                                                                                        <div
+                                                                                            class="filterCirclePoint"
+                                                                                        ></div>
+                                                                                    ` : ""}
+                                                                              <div
+                                                                                  class="column-header"
+                                                                                  @click=${c.column.getToggleSortingHandler()}
+                                                                              >
+                                                                                  <lit-overflow-tooltip
+                                                                                      label="${c.column.columnDef.header}"
+                                                                                  >
+                                                                                      ${L(
+              c.column.columnDef.header,
+              c.getContext()
+            )}
+                                                                                  </lit-overflow-tooltip>
+                                                                              </div>
+
+                                                                              <div
+                                                                                  class="icons-group-pin"
+                                                                              >
+                                                                                  ${c.column.getCanSort() ? c.column.getIsSorted() ? c.column.getIsSorted() === "asc" ? u`<slot
+                                                                                                    name="iconSortUp"
+                                                                                                    ><lit-icon
+                                                                                                        class="cursor"
+                                                                                                        @click=${c.column.getToggleSortingHandler()}
+                                                                                                        size="0.75rem"
+                                                                                                        icon="chevronUpFilled"
+                                                                                                    ></lit-icon
+                                                                                                ></slot>` : u`<slot
+                                                                                                    name="iconSortDown"
+                                                                                                >
+                                                                                                    <lit-icon
+                                                                                                        class="cursor"
+                                                                                                        @click=${c.column.getToggleSortingHandler()}
+                                                                                                        size="0.75rem"
+                                                                                                        icon="chevronDownFilled"
+                                                                                                    ></lit-icon>
+                                                                                                </slot>` : u`<div
+                                                                                                class="sortFilled"
+                                                                                            >
+                                                                                                <lit-icon
+                                                                                                    class="cursor"
+                                                                                                    @click=${c.column.getToggleSortingHandler()}
+                                                                                                    size="0.75rem"
+                                                                                                    icon="sortFilled"
+                                                                                                ></lit-icon>
+                                                                                            </div>` : u`<div></div>`}
+                                                                                  <div class="flex">
+                                                                                      ${this.actionButtonsInMenu ? u`
+                                                                                                <lit-data-grid-action-buttons-popover
+                                                                                                    .group="${c.column.getToggleGroupingHandler()}"
+                                                                                                    .pin="${() => this.togglePin(
+              c
+            )}"
+                                                                                                    .header="${c}"
+                                                                                                    .table="${this.table}"
+                                                                                                ></lit-data-grid-action-buttons-popover>
+                                                                                            ` : u`
+                                                                                                ${c.column.getCanPin() ? u`
+                                                                                                          <lit-icon-button
+                                                                                                              @click="${() => this.togglePin(
+              c
+            )}"
+                                                                                                              size="small"
+                                                                                                              variant="text"
+                                                                                                              icon="pin"
+                                                                                                              .active="${c.column.getIsPinned()}"
+                                                                                                          >
+                                                                                                          </lit-icon-button>
+                                                                                                          <simple-tooltip
+                                                                                                              placement="bottom"
+                                                                                                              >${c.column.getIsPinned() ? R(
+              "Zrušit připnutí sloupce"
+            ) : R(
+              "Připnout sloupec vlevo"
+            )}
+                                                                                                          </simple-tooltip>
+                                                                                                      ` : ""}
+                                                                                                ${c.column.getCanGroup() ? u`
+                                                                                                          <lit-icon-button
+                                                                                                              @click="${c.column.getToggleGroupingHandler()}"
+                                                                                                              size="small"
+                                                                                                              variant="text"
+                                                                                                              .active="${c.column.getIsGrouped()}"
+                                                                                                              icon="agregation"
+                                                                                                          >
+                                                                                                          </lit-icon-button>
+                                                                                                          <simple-tooltip
+                                                                                                              placement="bottom"
+                                                                                                          >
+                                                                                                              ${c.column.getIsGrouped() ? R(
+              "Zrušit seskupení"
+            ) : R(
+              "Seskupit sloupec"
+            )}</simple-tooltip
+                                                                                                          >
+                                                                                                      ` : ""}
+                                                                                            `}
+                                                                                      ${this.enableColumnOrdering && !c.column.getIsPinned() && !c.column.getIsGrouped() && ![
+              "checkbox",
+              "actions"
+            ].includes(
+              c.column.id
+            ) ? u`<div
+                                                                                                    class="drag-handle"
+                                                                                                >
+                                                                                                    <lit-icon
+                                                                                                        icon="hamburger"
+                                                                                                        size="1rem"
+                                                                                                    ></lit-icon>
+                                                                                                </div>
+                                                                                                <simple-tooltip
+                                                                                                    placement="bottom"
+                                                                                                    >${R(
+              "Přesunout sloupec"
+            )}</simple-tooltip
+                                                                                                > ` : null}
+                                                                                  </div>
+                                                                              </div>
+                                                                          </div>
+                                                                      </div>
+                                                                      ${c.column.getCanFilter() ? u`
+                                                                                <div>
+                                                                                    <filter-inputs
+                                                                                        .minFilterCharacters=${this.minFilterCharacters}
+                                                                                        .column=${c.column}
+                                                                                        .dateFormat=${this.dateFormat}
+                                                                                        .userLang=${this.userLang}
+                                                                                        @filter-tab=${this.handleFilterTabNavigation}
+                                                                                        .server=${this.server}
+                                                                                        .value="${P}"
+                                                                                        .operator="${M}"
+                                                                                        .filterVariant="${f}"
+                                                                                        .filterOperators="${k}"
+                                                                                    ></filter-inputs>
+                                                                                </div>
+                                                                            ` : null}
+                                                                  `}
+                                                            <div
+                                                                class="resize-handle"
+                                                                @dblclick="${($) => {
+              $.target.classList.contains(
+                "resize-handle"
+              ) && c.column.resetSize();
+            }}"
+                                                                @mousedown="${($) => {
+              $.preventDefault(), $.stopPropagation(), $.target.classList.contains(
+                "resize-handle"
+              ) && c.getResizeHandler()(
+                $
+              );
+            }}"
+                                                                @touchstart="${($) => {
+              $.preventDefault(), $.stopPropagation(), $.target.classList.contains(
+                "resize-handle"
+              ) && c.getResizeHandler()(
+                $
+              );
+            }}"
+                                                            ></div>
+                                                        </th>
+                                                    `;
+          }
+        )}
+                                            ${m ? u`
+                                                      <th
+                                                          style=" display: flex; width: ${m}px;"
+                                                      ></th>
+                                                  ` : ""}
+                                        </tr>
+                                    `;
+      }
+    )}
+                            ${this.isLoading ? u`
+                                      <div style="position: absolute; bottom: 0px; width: 100%;">
+                                          <lit-loading-bar></lit-loading-bar>
+                                      </div>
+                                  ` : ""}
+                        </thead>
+
+                        <tbody
+                            @keydown=${this.handleKeyDown}
+                            tabindex="0"
+                            part="dataGrid-body"
+                            style="height: ${o && this.table.getRowModel().rows.length > 0 ? o.getTotalSize() + "px" : "auto"};"
+                        >
+                            ${p.length > 0 ? T(
+      g,
+      (i) => i.key,
+      (i) => {
+        const r = p[i.index], b = r == null ? void 0 : r.getVisibleCells(), c = this.enableColumnVirtualization ? s == null ? void 0 : s.map(
+          (f) => b && b[f.index]
+        ) : b, D = (b == null ? void 0 : b.filter(
+          (f) => f.column.getIsPinned()
+        )) || [], y = this.enableColumnVirtualization ? [.../* @__PURE__ */ new Set([...D, ...c])] : c, F = {
+          transform: o ? `translateY(${i.start}px)` : "none",
+          height: `${this.getRowHeight()}px`,
+          lineHeight: `${this.getRowHeight()}px`,
+          position: o ? "absolute" : "relative"
+        };
+        return r ? u`
+                                                    <tr
+                                                        tabindex=${this.enableRowSelection ? "0" : void 0}
+                                                        data-row-index="${r.index}"
+                                                        class="${this.rowsSelected[r.id] ? "selected body" : "body"}"
+                                                        data-index="${i.index}"
+                                                        @click="${r.getIsGrouped() ? r.getToggleExpandedHandler() : (f) => this.handleRowClick(f, r)}"
+                                                        @mousedown=${(f) => this._onRowMouseDown(f, r)}
+                                                        @mouseup=${this._onRowMouseUp}
+                                                        @mouseleave=${this._onRowMouseUp}
+                                                        @contextmenu=${(f) => f.preventDefault()}
+                                                        @dblclick="${() => this.handleRowDoubleClick(r)}"
+                                                        style="${E(F)}"
+                                                        ${X((f) => {
+          f && this.enableRowVirtualization && o && o.measureElement(f);
+        })}
+                                                    >
+                                                        ${h ? u`
+                                                                  <th
+                                                                      style=" display: flex; width: ${h}px;"
+                                                                  ></th>
+                                                              ` : ""}
+                                                        <!-- Cells for each row -->
+                                                        ${T(
+          y,
+          (f) => f.key,
+          (f) => {
+            var M;
+            this.getButtonSize();
+            const { column: k } = f, P = {
+              ...this.getCommonPinningStyles(
+                f.column
+              ),
+              width: `${(M = f.column) == null ? void 0 : M.getSize()}px`,
+              flexGrow: `${k.columnDef.size === void 0 ? 1 : "unset"}`,
+              background: this.getCellBackgroundColor(
+                f
+              ),
+              lineHeight: `${this.getRowHeight()}px`,
+              padding: k.columnDef.type === "actions" || k.columnDef.type === "checkbox" ? "0" : "0px 14px"
+            };
+            return u`
+                                                                    <td style="${E(P)}">
+                                                                        ${f.getIsGrouped() ? u`<div
+                                                                                  class="grouped-column"
+                                                                              >
+                                                                                  <lit-icon
+                                                                                      class="grouped-column--icon-button"
+                                                                                      size="1.25rem"
+                                                                                      icon="${r.getIsExpanded() ? "chevronDownFilled" : "chevron"}"
+                                                                                  ></lit-icon>
+                                                                                  <div
+                                                                                      class="grouped-column--label"
+                                                                                  >
+                                                                                      <lit-overflow-tooltip
+                                                                                          label=${f.getValue()}
+                                                                                      >
+                                                                                          ${f.getValue()}
+                                                                                      </lit-overflow-tooltip>
+                                                                                  </div>
+                                                                                  <lit-pill
+                                                                                      class="grouped-column--pill"
+                                                                                      style="margin-left: 0.5rem"
+                                                                                      count="${r.subRows.length}"
+                                                                                  ></lit-pill>
+                                                                              </div> ` : f.getIsAggregated() ? u`
+                                                                                    <div
+                                                                                        style="flex-grow:1"
+                                                                                    >
+                                                                                        ${L(
+              f.column.columnDef.aggregatedCell ?? f.column.columnDef.cell,
+              f.getContext()
+            )}
+                                                                                    </div>
+                                                                                ` : f.getIsPlaceholder() ? null : u`<lit-overflow-tooltip
+                                                                                      placement="right"
+                                                                                      label=${f.getValue()}
+                                                                                      >${L(
+              f.column.columnDef.cell,
+              f.getContext()
+            )}</lit-overflow-tooltip
+                                                                                  >`}
+                                                                    </td>
+                                                                `;
+          }
+        )}
+                                                        ${m ? u`
+                                                                  <th
+                                                                      style=" display: flex; width: ${m}px;"
+                                                                  ></th>
+                                                              ` : ""}
+                                                    </tr>
+                                                ` : null;
+      }
+    ) : null}
+                        </tbody>
+                    </table>
+                    ${this.hideFooter ? "" : u`
+                              <slot
+                                  part="dataGrid-footer"
+                                  name="dataGridFooter"
+                                  class="footer-container"
+                              >
+                                  <div class="numberCount">
+                                      ${R("Počet záznamů")}:
+                                      ${this.table.getRowModel().rows.length}
+                                      <pre>/</pre>
+                                      ${this.server ? this.totalNumberRows ? this.totalNumberRows : "?" : this.table.getRowModel().rows.length}
+                                      ${this.server ? u`<lit-icon-button
+                                                icon="reload"
+                                                size="mini"
+                                                variant="text"
+                                                @click="${() => this.handleGetTotalNumber()}"
+                                                style="margin-left: 0.2rem; margin-top: -0.1rem"
+                                            ></lit-icon-button>` : ""}
+                                  </div>
+                                  <div class="right-actions">
+                                      <lit-data-grid-density-popover
+                                          .density="${this.rowDensity}"
+                                          .setDensity="${(i) => this.handleSetDensity(i)}"
+                                      >
+                                      </lit-data-grid-density-popover>
+                                      <lit-responsive-button
+                                          size="medium"
+                                          variant="text"
+                                          label=${R("Přizpůsobit sloupce")}
+                                          icon="columns"
+                                          @click=${() => this.table.resetColumnSizing()}
+                                      ></lit-responsive-button>
+                                      ${this.exportData ? u`
+                                                <lit-data-grid-export-popover
+                                                    .exportToCsv="${typeof this.exportExcelFn == "function" ? () => this.exportCsvFn && this.exportCsvFn() : () => this.exportDataToCsv()}"
+                                                    .exportToExcel="${typeof this.exportExcelFn == "function" ? () => this.exportExcelFn && this.exportExcelFn() : () => this.exportDataToExcel()}"
+                                                    .disabledButtons="${this.isLoading}"
+                                                >
+                                                </lit-data-grid-export-popover>
+                                            ` : null}
+                                      ${this.enableSettings ? u`
+                                                <div>
+                                                    <lit-responsive-button
+                                                        variant="dashed"
+                                                        label="${R("Přiřadit sloupec")}"
+                                                        icon="add"
+                                                        style="display: inline-block"
+                                                        @click="${this.toggleCustomPopover}"
+                                                    ></lit-responsive-button>
+
+                                                    <simple-popper
+                                                        .showing=${this.isOpen}
+                                                        .placement=${"top-end"}
+                                                        .manualOpening=${!0}
+                                                        .maxWidthAsTarget=${!1}
+                                                        .onClose=${() => this.closePopover()}
+                                                    >
+                                                        <div
+                                                            class="popper-input"
+                                                            style="position: sticky; top: 0; z-index: 1;"
+                                                        >
+                                                            <lit-input
+                                                                .value=${this.filterText}
+                                                                .onInput=${(i) => {
+      var r;
+      this.filterText = ((r = i == null ? void 0 : i.toLowerCase) == null ? void 0 : r.call(i)) || "";
+    }}
+                                                                .onClear=${() => {
+      this.filterText = "";
+    }}
+                                                                placeholder="${R(
+      "Zadejte název sloupce"
+    )}"
+                                                            ></lit-input>
+                                                        </div>
+                                                        <lit-menu tabindex="0">
+                                                            ${this.columns.filter((i) => {
+      var b;
+      return (((b = i == null ? void 0 : i.headerName) == null ? void 0 : b.toLowerCase()) || (i == null ? void 0 : i.field.toLowerCase())).includes(
+        this.filterText
+      );
+    }).sort((i, r) => {
+      const b = i.field.startsWith("_"), c = r.field.startsWith("_");
+      return b && !c ? 1 : !b && c ? -1 : (i.headerName || i.field).localeCompare(
+        r.headerName || r.field
+      );
+    }).map(
+      (i) => {
+        var r, b;
+        return u`
+                                                                        <lit-menu-item
+                                                                            .onClick=${() => this.toggleColumn(
+          i == null ? void 0 : i.field
+        )}
+                                                                            .isActive=${((r = this.columnVisibility) == null ? void 0 : r[i == null ? void 0 : i.field]) !== !1}
+                                                                        >
+                                                                            <span
+                                                                                class="menu-item--multiple"
+                                                                            >
+                                                                                <lit-checkbox
+                                                                                    class="cursor"
+                                                                                    .checked=${((b = this.columnVisibility) == null ? void 0 : b[i == null ? void 0 : i.field]) !== !1}
+                                                                                ></lit-checkbox>
+                                                                                ${(i == null ? void 0 : i.headerName) || (i == null ? void 0 : i.field)}
+                                                                            </span>
+                                                                        </lit-menu-item>
+                                                                    `;
+      }
+    )}
+                                                        </lit-menu>
+
+                                                        ${it.isEqual(t.length, 0) ? u`
+                                                                  <div
+                                                                      style="display: flex; flex-direction: column; align-items: center; padding: 1rem;"
+                                                                  >
+                                                                      <div
+                                                                          style="max-height: 6rem; max-width: 6rem;"
+                                                                      >
+                                                                          <not-found></not-found>
+                                                                      </div>
+                                                                      <div>
+                                                                          ${R("Nenalezeno")}
+                                                                      </div>
+                                                                  </div>
+                                                              ` : null}
+                                                    </simple-popper>
+
+                                                    <lit-icon-button
+                                                        icon="administration"
+                                                        @click="${this.toggleModal}"
+                                                        variant="dashed"
+                                                        style="display: inline-block"
+                                                    ></lit-icon-button>
+                                                    <data-grid-settings
+                                                        .onClose="${() => {
+      this.isOpenModal = !1;
+    }}"
+                                                        .isOpenModal="${this.isOpenModal}"
+                                                        .enableFiltering="${this.enableFiltering}"
+                                                        .enableSorting="${this.enableSorting}"
+                                                        .columnDefaultSize="${this.columnDefaultSize}"
+                                                        .columnGroupedColor="${this.columnGroupedColor}"
+                                                        .rowAggregationColor="${this.rowAggregationColor}"
+                                                        .enableGrouping="${this.enableGrouping}"
+                                                        .enableColumnPinning="${this.enableColumnPinning}"
+                                                        .exportData="${this.exportData}"
+                                                        .actionButtonsInMenu="${this.actionButtonsInMenu}"
+                                                        .hideFooter="${this.hideFooter}"
+                                                        .onSettingsChangedModal="${this.onSettingsChangedCallback.bind(
+      this
+    )}"
+                                                    ></data-grid-settings>
+                                                </div>
+                                            ` : null}
+                                  </div>
+                              </slot>
+                          `}
+                </div>
+                ${this.table.getRowModel().rows.length < 1 && !this.isLoading ? u` <div class="data-grid__empty">
+                          <div style="max-height: 7.125rem; max-width: 7.125rem">
+                              <not-found></not-found>
+                          </div>
+                          <div class="data-grid__empty-text">${R("Nic dalšího tu není")}</div>
+                      </div>` : null}
+            </div>
+        `;
+  }
+};
+n.styles = [
+  // styles,
+  yt`
+            *,
+            *::before,
+            *::after {
+                margin: 0;
+                padding: 0;
+                box-sizing: border-box;
+            }
+
+            display: block;
+            font-family: 'Inter', sans-serif;
+            box-sizing: border-box;
+
+            td {
+                padding: 0px;
+            }
+            .data-grid__wrapper {
+                position: relative;
+                background-color: var(--background-paper, #fff);
+                height: 100%;
+                z-index: 1;
+            }
+
+            .grid {
+                overflow: auto;
+                position: relative;
+                height: 100%;
+            }
+
+            .data-grid__empty {
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                font-size: 0.875rem;
+                text-align: center;
+            }
+
+            table {
+                border-collapse: collapse;
+                border-spacing: 0;
+                width: 99% !important;
+                height: calc(100% - 38px);
+            }
+
+            thead {
+                display: flex;
+                position: sticky;
+                top: 0;
+                z-index: 10;
+                background-color: var(--background-paper, #fff);
+                border-bottom: 1px solid var(--color-divider, #d0d3db);
+            }
+
+            tr.head {
+                display: flex;
+                width: 100%;
+            }
+
+            th.head {
+                display: block;
+                position: relative;
+                padding: 0 6px;
+                gap: 0.25rem;
+                //z-index: auto !important;
+            }
+
+            tbody {
+                display: grid;
+                position: relative;
+                outline: none;
+            }
+
+            tr.body {
+                width: 100%;
+                border-bottom: 1px solid var(--color-divider, #d0d3db);
+                display: flex;
+                overflow: visible;
+            }
+            tr:focus {
+                background-color: var(--color-primary-light, #f0fadf);
+                outline: none;
+            }
+            // tr.selected:focus {
+            //     background-color: var(--color-primary-main, #f0fadf);
+            //     outline: none;
+            // }
+
+            tr.body:hover:not(.selected):not(:focus) {
+                cursor: pointer;
+                background-color: var(--background-default, #eff3f4);
+            }
+
+            td {
+                display: table-cell;
+                white-space: nowrap;
+                overflow: hidden;
+                padding: 0px 14px;
+                font-weight: 500;
+                font-size: 12px;
+                color: var(--text-primary, #111827);
+                display: flex;
+                align-items: center;
+            }
+
+            .column-header {
+                font-size: 11px;
+                font-weight: 600;
+                color: var(--text-secondary, #5d6371);
+                cursor: pointer;
+                gap: 0.25rem;
+                justify-content: center;
+                align-items: center;
+                margin: 0 0.25rem;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                height: inherit;
+                display: flex;
+            }
+            .no-select,
+            .no-select * {
+                user-select: none !important;
+            }
+            .ellipsis {
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+            }
+
+            .icons-group-pin {
+                display: flex;
+                height: 100%;
+                justify-content: space-between;
+                flex-grow: 1;
+            }
+
+            .flex {
+                display: flex;
+            }
+
+            .drag-handle {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                padding: 1px 6px;
+                cursor: grab;
+            }
+
+            .resizer {
+                height: 23px;
+                padding: 0 0 0 6px;
+                text-align: start;
+                //cursor: col-resize;
+                user-select: none;
+                touch-action: none;
+            }
+
+            .resize-handle {
+                position: absolute;
+                top: 0;
+                right: 0px;
+                width: 6px;
+                height: 100%;
+                background: transparent;
+                cursor: col-resize;
+                transition: background-color 0.2s ease-in-out;
+                // border-radius: 5px;
+                // padding-bottom: 5px;
+            }
+
+            .resize-handle:hover {
+                border-right: 2px solid var(--color-primary-main, #75b603);
+            }
+
+            .resizer.ltr {
+                right: 0;
+            }
+
+            .resizer.rtl {
+                left: 0;
+            }
+
+            .resizer.is-resizing {
+                opacity: 1;
+            }
+
+            .footer-container {
+                position: sticky;
+                left: 0;
+                bottom: 0;
+                background-color: var(--background-paper, #fff);
+                width: auto;
+                border-top: 1px solid var(--color-divider, #d0d3db);
+                height: 2.375rem;
+                display: flex;
+                flex-direction: row;
+                justify-content: space-between;
+                align-items: center;
+                // padding: 0 16px;
+                z-index: 10;
+            }
+
+            .right-actions {
+                position: absolute;
+                right: 0;
+                display: flex;
+            }
+
+            .numberCount {
+                margin: 0.375rem 0;
+                font-size: 12px;
+                font-weight: 400;
+                color: var(--text-primary, #111827);
+                display: flex;
+                align-items: center;
+            }
+
+            .scroll-button {
+                position: absolute;
+                top: 50%;
+                transform: translateY(-50%);
+                z-index: 1000;
+                cursor: pointer;
+            }
+
+            .scroll-button.left {
+                left: 3rem;
+            }
+
+            .scroll-button.right {
+                right: 3rem;
+            }
+
+            .selected {
+                background-color: var(--color-primary-light, #f0fadf);
+            }
+
+            .sortFilled {
+                visibility: hidden;
+            }
+            .header {
+                display: flex;
+                align-items: center;
+                height: 100%;
+            }
+            .header:hover .sortFilled {
+                visibility: visible;
+            }
+            .grouped-column {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                width: 100%;
+                gap: 0.25rem;
+            }
+            .grouped-column--icon-button {
+                display: flex;
+                align-items: center;
+                position: relative;
+                top: -1.5px;
+            }
+            .grouped-column--label {
+                display: flex;
+                align-items: center;
+                overflow: hidden;
+                flex-grow: 1;
+            }
+            .grouped-column--pill {
+                margin-left: 0.5rem;
+            }
+            .filterCirclePoint {
+                width: 8px;
+                height: 8px;
+                border-radius: 50%;
+                background-color: var(--color-primary-main, #75b603);
+                display: inline-block;
+                vertical-align: middle;
+            }
+            .cursor {
+                cursor: pointer;
+                color: var(--text-secondary, #5d6371);
+            }
+            .data-grid__empty-text {
+                color: var(--text-primary, #5d6371);
+            }
+        `
+];
+l([
+  a({ type: Array, reflect: !0 })
+], n.prototype, "row", 2);
+l([
+  a({ type: Array })
+], n.prototype, "columns", 2);
+l([
+  a({ type: Number })
+], n.prototype, "columnDefaultSize", 2);
+l([
+  a({ type: Number })
+], n.prototype, "columnDefaultMinSize", 2);
+l([
+  a({ type: Number })
+], n.prototype, "columnDefaultMaxSize", 2);
+l([
+  a({ type: String })
+], n.prototype, "columnGroupedColor", 2);
+l([
+  a({ type: String })
+], n.prototype, "rowAggregationColor", 2);
+l([
+  a({ type: Boolean })
+], n.prototype, "enableRowVirtualization", 2);
+l([
+  a({ type: Boolean })
+], n.prototype, "enableColumnVirtualization", 2);
+l([
+  a({ type: Boolean })
+], n.prototype, "enableColumnPinning", 2);
+l([
+  a({ type: Boolean })
+], n.prototype, "enableColumnOrdering", 2);
+l([
+  a({ type: Boolean })
+], n.prototype, "enableGrouping", 2);
+l([
+  a({ type: Boolean })
+], n.prototype, "enablePinning", 2);
+l([
+  a({ type: Boolean })
+], n.prototype, "exportData", 2);
+l([
+  a({ type: Boolean })
+], n.prototype, "actionButtonsInMenu", 2);
+l([
+  a({ type: String })
+], n.prototype, "id", 2);
+l([
+  a({ type: Array })
+], n.prototype, "initialGroups", 2);
+l([
+  a({ type: Array })
+], n.prototype, "initialSorting", 2);
+l([
+  a({ type: Object })
+], n.prototype, "initialColumnVisibility", 2);
+l([
+  a({ type: Object })
+], n.prototype, "initialRowExpanded", 2);
+l([
+  a({ type: Object })
+], n.prototype, "columnSizing", 2);
+l([
+  a({ type: Array })
+], n.prototype, "leftPinnedColumns", 2);
+l([
+  a({ type: Array })
+], n.prototype, "rightPinnedColumns", 2);
+l([
+  a({ type: Boolean })
+], n.prototype, "enableFiltering", 2);
+l([
+  a({ type: Boolean })
+], n.prototype, "enableSorting", 2);
+l([
+  a({ type: String })
+], n.prototype, "userLang", 2);
+l([
+  a({ type: String })
+], n.prototype, "dateFormat", 2);
+l([
+  a({ type: Boolean })
+], n.prototype, "isLoading", 2);
+l([
+  a({ type: Boolean })
+], n.prototype, "enableRowSelection", 2);
+l([
+  a({ type: Array })
+], n.prototype, "initialFiltering", 2);
+l([
+  a({ type: Boolean })
+], n.prototype, "server", 2);
+l([
+  a({ type: Number })
+], n.prototype, "scrollEndThreshold", 2);
+l([
+  a({ type: String })
+], n.prototype, "rowDensity", 2);
+l([
+  a({ type: Boolean })
+], n.prototype, "enableMultiRowSelection", 2);
+l([
+  a({ type: Number })
+], n.prototype, "totalNumberRows", 2);
+l([
+  a({ type: Number })
+], n.prototype, "minFilterCharacters", 2);
+l([
+  a({ type: Boolean })
+], n.prototype, "localizeDate", 2);
+l([
+  a({ type: Boolean })
+], n.prototype, "rowsSelected", 2);
+l([
+  a({ type: Boolean })
+], n.prototype, "enableSettings", 2);
+l([
+  a({ attribute: !1 })
+], n.prototype, "onSettingsChanged", 2);
+l([
+  a({ type: Function })
+], n.prototype, "onRowClick", 2);
+l([
+  a({ type: Function })
+], n.prototype, "onRowsScrollEnd", 2);
+l([
+  a({ type: Function })
+], n.prototype, "onRowDoubleClick", 2);
+l([
+  a({ type: Function })
+], n.prototype, "rowDensityChange", 2);
+l([
+  a({ type: Function })
+], n.prototype, "exportExcelFn", 2);
+l([
+  a({ type: Function })
+], n.prototype, "exportCsvFn", 2);
+l([
+  a({ type: Function })
+], n.prototype, "getTotalNumberFn", 2);
+l([
+  a({ type: Function })
+], n.prototype, "onCellKeyDown", 2);
+l([
+  a({ type: Function })
+], n.prototype, "getRowId", 2);
+l([
+  a({ type: Function })
+], n.prototype, "onColumnResize", 2);
+l([
+  a({ type: Boolean })
+], n.prototype, "onColumnFiltersChanged", 2);
+l([
+  a({ type: Boolean })
+], n.prototype, "onColumnSortChanged", 2);
+l([
+  a({ type: Function })
+], n.prototype, "onRowSelectionChanged", 2);
+l([
+  a({ type: Function })
+], n.prototype, "onColumnOrderChanged", 2);
+l([
+  a({ type: Boolean })
+], n.prototype, "hideFooter", 2);
+l([
+  a({ type: Object })
+], n.prototype, "columnVisibility", 2);
+l([
+  a({ type: Function })
+], n.prototype, "onColumnVisibilityChanged", 2);
+l([
+  a({ type: Function })
+], n.prototype, "onMouseDown", 2);
+l([
+  a({ type: Function })
+], n.prototype, "onRowFocusChanged", 2);
+l([
+  a({ type: Number })
+], n.prototype, "focusedRowIndex", 2);
+l([
+  a({ type: Boolean })
+], n.prototype, "autoFocus", 2);
+l([
+  z()
+], n.prototype, "rowsCount", 2);
+l([
+  z()
+], n.prototype, "isScrollable", 2);
+l([
+  z()
+], n.prototype, "disableScrollLeft", 2);
+l([
+  z()
+], n.prototype, "disableScrollRight", 2);
+l([
+  z()
+], n.prototype, "columnOrder", 2);
+l([
+  z()
+], n.prototype, "table", 2);
+l([
+  z()
+], n.prototype, "isOpen", 2);
+l([
+  z()
+], n.prototype, "filterText", 2);
+l([
+  z()
+], n.prototype, "isOpenModal", 2);
+l([
+  Q("tbody")
+], n.prototype, "tableBody", 2);
+l([
+  Q(".grid")
+], n.prototype, "_container", 2);
+n = l([
+  ot("lit-data-grid-tanstack")
+], n);
+export {
+  n as LitDataGridTanstack
+};