@guiexpert/react-table 18.0.1 → 18.0.3

package/dist/index.js

@@ -0,0 +1,3149 @@
+import { jsx as oe } from "react/jsx-runtime";
+import { useRef as se, useEffect as ie } from "react";
+import re from "react-dom";
+class k {
+  // The constructor is private to prevent direct construction calls
+  // with the `new` operator
+  constructor() {
+    this.alreadySet = !1;
+  }
+  static getInstance() {
+    return k.instance || (k.instance = new k()), k.instance;
+  }
+  /**
+   * Method to set the license key for the application.
+   * A 'meta' element is created with content as 'guiexperttable=<license key>'
+   * and appended into the head section of the document
+   *
+   * @param {string} key - The license key to set for the application.
+   *
+   * @return {void} - This method does not return anything
+   */
+  setLicenseKey(e) {
+    if (e && !this.alreadySet) {
+      const t = document.createElement("meta");
+      t.content = "license=" + e, t.name = "guiexperttable", document.getElementsByTagName("head")[0].appendChild(t), this.alreadySet = !0;
+    }
+  }
+}
+function P(p) {
+  return p && p.type === "TreeRow";
+}
+function W(p) {
+  return p && p.type === "AreaModelTree";
+}
+class _ {
+  constructor(e = -1, t = -1, o = -1, s = -1, i, r, a, l = 0, n = 0, d = 0, h = "") {
+    this.rowIndex = e, this.rowTop = t, this.columnIndex = o, this.columnLeft = s, this.areaIdent = i, this.sideIdent = r, this.originalEvent = a, this.clickCount = l, this.draggingX = n, this.draggingY = d, this.action = h;
+  }
+  clone() {
+    return new _(
+      this.rowIndex,
+      this.rowTop,
+      this.columnIndex,
+      this.columnLeft,
+      this.areaIdent,
+      this.sideIdent,
+      this.originalEvent,
+      this.clickCount,
+      this.draggingX,
+      this.draggingY,
+      this.action
+    );
+  }
+}
+class D {
+  constructor(e = ">", t = "", o = []) {
+    this.content = e, this.style = t, this.classes = o;
+  }
+}
+class J {
+  constructor(e = new D(
+    ">",
+    "transform: rotate(90deg) translate(66%, -66%); transform-origin: 0 0;",
+    ["gt-table-tree-arrow-expanded"]
+  ), t = new D(
+    ">",
+    "",
+    ["ge-table-tree-arrow-collapsed"]
+  ), o = new D(
+    ">",
+    "color:transparent;",
+    ["gt-table-tree-arrow-hidden"]
+  ), s = new D(
+    "↕",
+    "",
+    ["gt-table-tree-arrow-expanded-all"]
+  )) {
+    this.arrowExpanded = e, this.arrowCollapsed = t, this.arrowPlaceholder = o, this.arrowExpandCollapseAll = s;
+  }
+}
+class Q {
+  constructor(e = new D("↑", "", ["ge-header-sorted-asc"]), t = new D("↓", "", ["ge-header-sorted-desc"]), o = new D("↑", "color:transparent;", [])) {
+    this.iconAsc = e, this.iconDesc = t, this.iconPlaceholder = o;
+  }
+}
+class le {
+  constructor(e) {
+    this.domService = e;
+  }
+  setStyle(e, t, o) {
+    return this.domService.setStyle(e, t, o), e;
+  }
+  applyStyle(e, t) {
+    for (const o in t)
+      this.domService.setStyle(e, o, t[o]);
+    return e;
+  }
+  applyDisplayNoneStyle(e) {
+    return this.domService.setStyle(e, "display", "none"), e;
+  }
+  applyDisplayBlockStyle(e) {
+    return this.domService.setStyle(e, "display", "block"), e;
+  }
+  applyStyleInPx(e, t) {
+    return Object.entries(t).forEach(([o, s]) => this.domService.setStyle(e, o, s + "px")), e;
+  }
+  applyStylePosistionRelative(e) {
+    return this.domService.setStyle(e, "position", "relative"), this.domService.setStyle(e, "overflow", "clip"), e;
+  }
+  applyStylePosistionAbsolute(e) {
+    return this.domService.setStyle(e, "position", "absolute"), e;
+  }
+  applyStyleFullSize(e) {
+    return this.domService.setStyle(e, "width", "100%"), this.domService.setStyle(e, "height", "100%"), e;
+  }
+  applyStyleOverflowAuto(e = "auto", t = "auto", o) {
+    return this.domService.setStyle(o, "overflow-x", e), this.domService.setStyle(o, "overflow-y", t), o;
+  }
+  applyStyleNoPadding(e) {
+    return this.domService.setStyle(e, "padding", "0"), this.domService.setStyle(e, "margin", "0"), this.domService.setStyle(e, "border", "0"), e;
+  }
+  appendRelativeChildDiv(e) {
+    const t = this.applyStylePosistionRelative(
+      this.applyStyleFullSize(
+        this.applyStyleNoPadding(
+          this.domService.createElement("div")
+        )
+      )
+    );
+    return this.domService.appendChild(e, t), this.applyStylePosistionAbsolute(e), { parent: e, child: t, cache: {} };
+  }
+  appendText(e, t) {
+    const o = this.domService.createText(t);
+    return this.domService.appendChild(e, o), o;
+  }
+  addClass(e, t) {
+    return e.includes(" ") ? e.split(" ").forEach((o) => this.domService.addClass(t, o)) : this.domService.addClass(t, e), t;
+  }
+  removeClass(e, t) {
+    return e.includes(" ") ? e.split(" ").forEach((o) => this.domService.removeClass(t, o)) : this.domService.removeClass(t, e), t;
+  }
+  addClasses(e, t) {
+    if (e)
+      for (const o of e)
+        this.domService.addClass(t, o);
+    return t;
+  }
+  setAttribute(e, t, o) {
+    return t && o && this.domService.setAttribute(e, t, o), e;
+  }
+  createAreaDivWithClass(e, t, o, s) {
+    const i = this.domService.createElement("div");
+    return this.addClass(e, i), this.domService.setAttribute(i, "data-area", o), this.domService.setAttribute(i, "data-side", s), this.domService.appendChild(t, i), i;
+  }
+  createDivWithClass(e, t) {
+    const o = this.domService.createElement("div");
+    return this.addClass(e, o), this.domService.appendChild(t, o), o;
+  }
+  addRowDiv(e, t, o = -1, s, i, r = "") {
+    const a = t.index ?? -1, l = this.getDivOrCreateDiv(a, e);
+    if (this.domService.addClass(l, "ge-table-row-div"), this.domService.addClass(l, `ge-table-row-div-${t.index}`), s === "body" && i === "center") {
+      const n = ((t == null ? void 0 : t.index) ?? 0) % 2 === 0 ? "even" : "odd";
+      this.domService.addClass(l, `ge-table-row-${n}`);
+    }
+    if (this.domService.setStyle(l, "display", "clip"), this.domService.setStyle(l, "position", "absolute"), this.domService.setStyle(l, "left", `${t.left}px`), this.domService.setStyle(l, "top", `${t.top}px`), this.domService.setStyle(l, "width", `${t.width}px`), this.domService.setStyle(l, "height", `${t.height}px`), this.domService.setAttribute(l, "data-row-index", `${o}`), this.domService.setAttribute(l, "data-area", `${s}`), r) {
+      const n = this.domService.createText(r);
+      this.domService.appendChild(l, n);
+    }
+    return this.domService.appendChild(e.child, l), l;
+  }
+  addColumnDiv(e) {
+    const { parent: t, geo: o, rowIndex: s = -1, columnIndex: i = -1, areaIdent: r, sideIdent: a, text: l = "", treeArrow: n, tableOptions: d, checkedType: h = void 0, sortState: c } = e, f = d == null ? void 0 : d.treeOptions, u = d == null ? void 0 : d.showCheckboxWihoutExtraColumn, S = this.domService.createElement("div");
+    this.domService.addClass(S, "ge-table-col-div"), this.domService.addClass(S, `ge-table-col-div-${o.index}`), this.domService.setAttribute(S, "data-col-index", `${o.index}`), this.domService.setAttribute(S, "data-row-index", `${s}`), this.domService.setAttribute(S, "data-area", `${r}`);
+    const b = ((o == null ? void 0 : o.index) ?? 0) % 2 === 0 ? "even" : "odd";
+    if (r === "body" && a === "center" && this.domService.addClass(S, `ge-table-column-${b}`), this.domService.setStyle(S, "display", "clip"), this.domService.setStyle(S, "position", "absolute"), this.domService.setStyle(S, "left", `${o.left}px`), this.domService.setStyle(S, "top", `${o.top}px`), this.domService.setStyle(S, "width", `${o.width}px`), this.domService.setStyle(S, "height", `${o.height}px`), n && n !== "none" && (this.domService.addClass(S, "ge-table-col-tree"), this.addArrowDiv(S, n, f, s, i, r)), u && i === 0 && h && this.addCheckboxToDiv(S, h, r, s), l) {
+      const g = n !== "none" && i === 0;
+      this.addLabelDiv(S, l, g, s, i, r);
+    }
+    return c && this.addSortedIcon(S, c, d == null ? void 0 : d.sortedOptions, i), this.domService.appendChild(t, S), S;
+  }
+  addCheckboxToDiv(e, t, o, s) {
+    const i = this.domService.createElement("div"), r = t === "full" ? "checked" : "";
+    return i.innerHTML = `
+            <input
+                type="checkbox"
+                data-area="${o}"
+                data-row-index="${s}"
+                data-input-type="checkbox"
+                ${r}
+                class="ge-table-row-checkbox"> `, this.domService.setStyle(i, "display", "inline"), this.domService.setStyle(i, "width", "inherit"), this.domService.setAttribute(i, "data-row-index", `${s}`), this.domService.appendChild(e, i), i;
+  }
+  addLabelDiv(e, t = "", o = !1, s = -1, i = -1, r = "body") {
+    const a = this.domService.createElement("div");
+    if (this.domService.addClass(a, "ge-table-label-div"), this.domService.setStyle(a, "position", "relative"), this.domService.setStyle(a, "background", "transparent"), this.domService.setStyle(a, "width", "100%"), this.domService.setStyle(a, "height", "100%"), this.domService.setAttribute(a, "data-row-index", `${s}`), this.domService.setAttribute(a, "data-col-index", `${i}`), this.domService.setAttribute(a, "data-area", `${r}`), t)
+      if (o) {
+        const l = this.domService.createText(t);
+        this.domService.appendChild(a, l);
+      } else {
+        const l = this.domService.createElement("div");
+        this.domService.appendChild(a, l);
+        const n = this.domService.createText(t);
+        this.domService.addClass(l, "ge-table-label"), this.domService.appendChild(l, n), this.domService.setAttribute(l, "data-row-index", `${s}`), this.domService.setAttribute(l, "data-col-index", `${i}`), this.domService.setAttribute(l, "data-area", `${r}`);
+      }
+    return this.domService.appendChild(e, a), a;
+  }
+  addSortedIcon(e, t = "", o = new Q(), s = -1) {
+    const i = this.domService.createElement("div");
+    this.domService.addClass(i, "ge-table-sorted-icon-div"), this.domService.setStyle(i, "position", "absolute"), this.domService.setStyle(i, "top", "0"), this.domService.setStyle(i, "right", "0"), this.domService.setStyle(i, "width", "20px"), this.domService.setStyle(i, "background", "transparent"), this.domService.setStyle(i, "cursor", "pointer"), this.domService.setAttribute(i, "data-col-index", `${s}`), this.domService.setAttribute(i, "data-area", "header");
+    let r;
+    t === "asc" ? r = o.iconAsc : t === "desc" ? r = o.iconDesc : r = o.iconPlaceholder;
+    const a = r.content, l = this.domService.createText(a);
+    this.domService.appendChild(i, l), r.style && this.applyStyleString(i, r.style);
+    for (const n of r.classes)
+      this.domService.addClass(i, n);
+    return this.domService.appendChild(e, i), i;
+  }
+  addArrowDiv(e, t = "none", o = new J(), s = -1, i = -1, r = "body") {
+    const a = this.domService.createElement("div");
+    this.domService.addClass(a, "ge-table-tree-arrow-div"), this.domService.setStyle(a, "display", "inline-block"), this.domService.setStyle(a, "position", ""), this.domService.setStyle(a, "width", "20px"), this.domService.setStyle(a, "background", "transparent"), this.domService.setStyle(a, "cursor", "pointer"), this.domService.setAttribute(a, "data-row-index", `${s}`), this.domService.setAttribute(a, "data-col-index", `${i}`), this.domService.setAttribute(a, "data-area", `${r}`);
+    let l;
+    t === "expanded" ? l = o.arrowExpanded : t === "collapsed" ? l = o.arrowCollapsed : l = o.arrowPlaceholder;
+    const n = l.content, d = this.domService.createText(n);
+    this.domService.appendChild(a, d), l.style && this.applyStyleString(a, l.style);
+    for (const h of l.classes)
+      this.domService.addClass(a, h);
+    return this.domService.appendChild(e, a), a;
+  }
+  addColumnBorderDivs(e, t, o, s, i) {
+    if (e.verticalBorderVisible) {
+      const r = `ge-table-${s}-${i}-vertical-border`;
+      this.addVerticalBorder(o, t, r);
+    }
+    if (e.horizontalBorderVisible) {
+      const r = `ge-table-${s}-${i}-horizontal-border`;
+      this.addHorizontalBorder(o, t, r);
+    }
+    return t;
+  }
+  addHorizontalBorder(e, t, o = "ge-table-body-center-horizontal-border") {
+    const s = this.domService.createElement("div");
+    return this.domService.addClass(s, o), this.domService.setStyle(s, "display", "clip"), this.domService.setStyle(s, "position", "absolute"), this.domService.setStyle(s, "left", `${e.left}px`), this.domService.setStyle(s, "top", `${e.top}px`), this.domService.setStyle(s, "width", `${e.width}px`), this.domService.setStyle(s, "height", "1px"), this.domService.appendChild(t, s), s;
+  }
+  addFocusBorderDivs(e, t, o) {
+    t = { ...t, width: t.width + 1, height: t.height + 1 };
+    let s = this.domService.createElement("div");
+    return this.domService.addClass(s, "ge-table-focus-border"), this.domService.setStyle(s, "display", "clip"), this.domService.setStyle(s, "position", "absolute"), this.domService.setStyle(s, "left", `${t.left}px`), this.domService.setStyle(s, "top", `${t.top}px`), this.domService.setStyle(s, "width", "1px"), this.domService.setStyle(s, "height", `${t.height}px`), this.domService.setStyle(s, "z-index", "9999"), this.applyStyle(s, o), this.domService.appendChild(e, s), s = this.domService.createElement("div"), this.domService.addClass(s, "ge-table-focus-border"), this.domService.setStyle(s, "display", "clip"), this.domService.setStyle(s, "position", "absolute"), this.domService.setStyle(s, "left", `${t.left + t.width - 1}px`), this.domService.setStyle(s, "top", `${t.top}px`), this.domService.setStyle(s, "width", "1px"), this.domService.setStyle(s, "height", `${t.height}px`), this.domService.setStyle(s, "z-index", "9999"), this.applyStyle(s, o), this.domService.appendChild(e, s), s = this.domService.createElement("div"), this.domService.addClass(s, "ge-table-focus-border"), this.domService.setStyle(s, "display", "clip"), this.domService.setStyle(s, "position", "absolute"), this.domService.setStyle(s, "left", `${t.left}px`), this.domService.setStyle(s, "top", `${t.top}px`), this.domService.setStyle(s, "width", `${t.width}px`), this.domService.setStyle(s, "height", "1px"), this.domService.setStyle(s, "z-index", "9999"), this.applyStyle(s, o), this.domService.appendChild(e, s), s = this.domService.createElement("div"), this.domService.addClass(s, "ge-table-focus-border"), this.domService.setStyle(s, "display", "clip"), this.domService.setStyle(s, "position", "absolute"), this.domService.setStyle(s, "left", `${t.left}px`), this.domService.setStyle(s, "top", `${t.top + t.height - 1}px`), this.domService.setStyle(s, "width", `${t.width}px`), this.domService.setStyle(s, "height", "1px"), this.domService.setStyle(s, "z-index", "9999"), this.applyStyle(s, o), this.domService.appendChild(e, s), e;
+  }
+  addVerticalBorder(e, t, o = "ge-table-body-center-vertical-border") {
+    const s = this.domService.createElement("div");
+    return this.domService.addClass(s, o), this.domService.setStyle(s, "display", "clip"), this.domService.setStyle(s, "position", "absolute"), this.domService.setStyle(s, "left", `${e.left}px`), this.domService.setStyle(s, "top", `${e.top}px`), this.domService.setStyle(s, "width", "1px"), this.domService.setStyle(s, "height", `${e.height}px`), this.domService.appendChild(t, s), s;
+  }
+  addDiv(e, t, o = "") {
+    const s = this.domService.createElement("div");
+    return o && this.domService.addClass(s, o), this.domService.setStyle(s, "display", "clip"), this.domService.setStyle(s, "position", "absolute"), this.domService.setStyle(s, "left", `${t.left}px`), this.domService.setStyle(s, "top", `${t.top}px`), this.domService.setStyle(s, "width", `${t.width}px`), this.domService.setStyle(s, "height", `${t.height}px`), this.domService.appendChild(e, s), s;
+  }
+  applyStyleString(e, t) {
+    const o = t.split(";").map((s) => s.trim()).filter((s) => s);
+    for (const s of o) {
+      const [i, r] = s.split(":");
+      this.domService.setStyle(e, i.trim(), r.trim());
+    }
+  }
+  getDivOrCreateDiv(e, t) {
+    let o = t.cache[e];
+    return o ? (o.innerText = "", o) : (o = this.domService.createElement("div"), t.cache[e] = o, o);
+  }
+}
+const V = (p) => p === "header" ? "header" : p === "footer" ? "footer" : "body";
+class ae {
+  constructor(e, t) {
+    if (this.rowIdx = -1, this.colIdx = -1, this.action = null, this.inputType = null, this.className = "", e !== null && (e instanceof HTMLDivElement || e instanceof HTMLSpanElement || e instanceof HTMLInputElement)) {
+      this.className = e.className, this.action = e.getAttribute("data-ge-action"), this.inputType = e.getAttribute("data-input-type"), this.rowIdx = Number(e.getAttribute("data-row-index")), this.colIdx = Number(e.getAttribute("data-col-index"));
+      const o = e.getAttribute("data-area");
+      if (o && (this.areaIdent = V(o), this.areaModel = t.tableModel.getAreaModel(this.areaIdent), this.row = this.areaModel.getRowByIndex(this.rowIdx)), e instanceof HTMLInputElement) {
+        const s = e;
+        this.value = s.value;
+      }
+    }
+  }
+}
+class ne {
+  constructor(e) {
+    this.tableScope = e, this.doubleClickDelay = 500, this.expandedAll = !0, this.mouseDown = !1, this.dragging = !1, this.lastClicked = 0, this.tableScope.hostElement.addEventListener("click", this.onHostElementClicked.bind(this)), this.tableScope.hostElement.addEventListener("dblclick", this.onHostElementDblClicked.bind(this)), this.tableScope.hostElement.addEventListener("mousedown", this.onMouseDown.bind(this)), this.tableScope.hostElement.addEventListener("mousemove", this.onMouseMove.bind(this)), this.tableScope.hostElement.addEventListener("mouseup", this.onMouseUp.bind(this)), this.tableScope.hostElement.addEventListener("contextmenu", this.onContextmenu.bind(this)), this.tableScope.hostElement._MouseHandler = "true", this.tableScope.scrollViewport.addEventListener("scroll", this.tableScope.adjustAfterScrolling.bind(this.tableScope)), [window, this.tableScope.hostElement].forEach(
+      (t) => t.addEventListener("resize", this.tableScope.adjustContainersAndRows.bind(this.tableScope))
+    );
+  }
+  /**
+   * Handles the "contextmenu" event.
+   *
+   * @private
+   * @param {MouseEvent} evt - The mouse event object.
+   * @return {void}
+   */
+  onContextmenu(e) {
+    this.mouseEvent = e;
+    const t = this.tableScope.createGeMouseEvent(this.mouseEvent);
+    this.tableScope.contextmenu(t);
+  }
+  /**
+   * Handles the click event on the host element.
+   *
+   * @param {MouseEvent} event - The click event.
+   *
+   * @return {void}
+   */
+  onHostElementClicked(e) {
+    const t = Date.now();
+    if (t - this.lastClicked < this.doubleClickDelay)
+      return;
+    this.lastClicked = t;
+    const o = new ae(e.target, this.tableScope);
+    if (o.action === "toggleExpandCollapseAll")
+      this.expandedAll = !this.expandedAll, this.tableScope.toggleExpandCollapseAll(this.expandedAll), e.preventDefault(), e.stopPropagation();
+    else if (o.action === "toggleHeaderGroup")
+      this.tableScope.toggleHeaderGroup(o), e.preventDefault(), e.stopPropagation();
+    else if (o.inputType === "checkbox" && o.areaIdent)
+      this.tableScope.toggleRowCheckbox(o.rowIdx, o.colIdx, o.areaIdent), e.preventDefault(), e.stopPropagation();
+    else if (P(o.row) && o.areaModel) {
+      const s = o.colIdx === this.getArrowColumnIndex() && e.altKey, i = o.className.includes("ge-table-tree-arrow-div");
+      if (s || i) {
+        e.preventDefault(), e.stopPropagation();
+        const r = o.row;
+        r.expanded = !r.expanded, "recalcVisibleTreeRows" in o.areaModel && o.areaModel.recalcVisibleTreeRows(), this.tableScope.tableModel.recalcSize(this.tableScope.hostElement.clientWidth), this.tableScope.adjustContainersAndRows(), this.updateCollapsedExpandedState(r);
+      }
+    }
+    if (o.areaIdent === "body" && this.tableScope.tableOptions.getFocusModel) {
+      const s = this.tableScope.tableOptions.getFocusModel();
+      s == null || s.clear(), s == null || s.setFocus(o.rowIdx, o.colIdx);
+    }
+    this.publishGeMouseEvent(e, 1);
+  }
+  /**
+   * Handles the double click event on the host element.
+   * This method is private.
+   *
+   * @param {MouseEvent} event - The double click event.
+   */
+  onHostElementDblClicked(e) {
+    if (this.lastClicked = Date.now(), e.target instanceof HTMLElement) {
+      const t = e.target, o = t.getAttribute("data-area"), s = V(o), i = Number(t.getAttribute("data-row-index")), r = Number(t.getAttribute("data-col-index")), a = this.tableScope.tableModel.getAreaModel(s);
+      if (o && s === "header")
+        this.tableScope.tableModel.isSortable(r) && (this.tableScope.clearSelection(), this.tableScope.onHeaderDblClicked(e, i, r));
+      else if (t.getAttribute("data-row-index")) {
+        const l = a.getRowByIndex(i);
+        if (o && s === "body" && a.isEditable(i, r) && (this.tableScope.clearSelection(), this.tableScope.initRenderEditor(i, r)), P(l) && r === this.getArrowColumnIndex()) {
+          e.preventDefault(), e.stopPropagation();
+          const n = l;
+          n.expanded = !n.expanded, "recalcVisibleTreeRows" in a && a.recalcVisibleTreeRows(), this.tableScope.tableModel.recalcSize(this.tableScope.hostElement.clientWidth), this.tableScope.adjustContainersAndRows(), this.updateCollapsedExpandedState(n);
+        }
+      }
+    }
+    this.publishGeMouseEvent(e, 2);
+  }
+  /**
+   * Publishes a GeMouseEvent.
+   *
+   * @param {MouseEvent} event - The MouseEvent to publish.
+   * @param {number} clickCount - The number of clicks for the GeMouseEvent.
+   *
+   * @return {void}
+   */
+  publishGeMouseEvent(e, t) {
+    var o;
+    this.mouseEvent = e, this.geMouseEventOld = (o = this.geMouseEvent) == null ? void 0 : o.clone(), this.geMouseEvent = this.tableScope.createGeMouseEvent(e), this.geMouseEvent && (this.geMouseEvent.clickCount = t), this.tableScope.onMouseClicked(this.geMouseEvent, this.geMouseEventOld), this.tableScope.publishGeMouseEvent(this.geMouseEvent), t === 1 && this.tableScope.debounceRepaint();
+  }
+  /**
+   * Update the collapsed/expanded state of a tree row.
+   *
+   * @param {TreeRowIf<any>} tr - The tree row object.
+   * @returns {void}
+   */
+  updateCollapsedExpandedState(e) {
+    var o, s, i, r, a;
+    const t = (s = (o = this.tableScope.tableOptions) == null ? void 0 : o.autoRestoreOptions) == null ? void 0 : s.getRowId;
+    if (t) {
+      const l = (i = this.tableScope.storeStateCollapsedExpandService) == null ? void 0 : i.collapsedExpandedStateGet().mode, n = l === "collapsed" && !e.expanded || l === "expanded" && e.expanded, d = l === "collapsed" && e.expanded || l === "expanded" && !e.expanded, h = t(e.data);
+      n ? (r = this.tableScope.storeStateCollapsedExpandService) == null || r.collapsedStateIdsPush(h) : d && ((a = this.tableScope.storeStateCollapsedExpandService) == null || a.collapsedStateIdsRemove(h));
+    }
+  }
+  getArrowColumnIndex() {
+    return this.tableScope.tableModel.isRowCheckboxVisible() ? 1 : 0;
+  }
+  onMouseDown(e) {
+    this.dragging || (this.mouseEvent = e, this.startMouseEvent = this.tableScope.createGeMouseEvent(this.mouseEvent), this.tableScope.onMouseDown(this.startMouseEvent), this.mouseDown = !0);
+  }
+  onMouseMove(e) {
+    this.mouseEvent = e, this.mouseDown ? (this.dragging || (this.dragging = !0, this.tableScope.setDragging(!0)), requestAnimationFrame(this.mouseDraggingOnFrame.bind(this))) : requestAnimationFrame(this.mouseMoveOnFrame.bind(this));
+  }
+  onMouseUp(e) {
+    this.mouseEvent = e, this.dragging && requestAnimationFrame(this.mouseDraggingEndOnFrame.bind(this)), this.mouseDown = !1, this.dragging = !1, this.tableScope.setDragging(!1);
+  }
+  mouseDraggingOnFrame() {
+    var e;
+    if (this.mouseEvent) {
+      const t = this.tableScope.createGeMouseEvent(this.mouseEvent);
+      (e = this.startMouseEvent) != null && e.originalEvent && (t.draggingX = this.mouseEvent.clientX - this.startMouseEvent.originalEvent.clientX, t.draggingY = this.mouseEvent.clientY - this.startMouseEvent.originalEvent.clientY), this.tableScope.mouseDraggingOnFrame(t, this.startMouseEvent);
+    }
+  }
+  mouseDraggingEndOnFrame() {
+    var e;
+    if (this.mouseEvent) {
+      const t = this.tableScope.createGeMouseEvent(this.mouseEvent);
+      (e = this.startMouseEvent) != null && e.originalEvent && (t.draggingX = this.mouseEvent.clientX - this.startMouseEvent.originalEvent.clientX, t.draggingY = this.mouseEvent.clientY - this.startMouseEvent.originalEvent.clientY), this.tableScope.mouseDraggingEndOnFrame(t);
+    }
+  }
+  mouseMoveOnFrame() {
+    if (this.mouseEvent) {
+      const e = this.tableScope.createGeMouseEvent(this.mouseEvent);
+      this.tableScope.mouseMove(e);
+    }
+  }
+}
+class de {
+  constructor(e) {
+    this.tableScope = e;
+  }
+  /**
+   * Updates the cells in the table based on the provided events.
+   *
+   * @param {TableCellUpdateEventIf[]} events - The array of events representing the updates to perform on the cells.
+   * @param {boolean} [repaintAll=false] - Optional parameter indicating whether to repaint all cells or not. Default value is false. If true, the full table will be rendered. If false, the table cell will be rendered immediately.
+   *
+   * @return {void} - This method doesn't return anything.
+   */
+  updateCells(e, t = !1) {
+    this.tableScope.updateCells(e, t);
+  }
+  /**
+   * Notifies that the external filter has changed.
+   *
+   * @return {void}
+   */
+  externalFilterChanged() {
+    this.tableScope.externalFilterChanged();
+  }
+  /**
+   * Scrolls the table body to the specified pixel coordinates.
+   *
+   * @param {number} px - The horizontal pixel coordinate to scroll to. Defaults to 0.
+   * @param {number} py - The vertical pixel coordinate to scroll to. Defaults to 0.
+   * @return {void}
+   */
+  scrollToPixel(e = 0, t = 0) {
+    this.tableScope.scrollToPixel(e, t);
+  }
+  /**
+   * Scrolls to the specified index in both horizontal and vertical directions.
+   *
+   * @param {number} indexX - The index of the column to scroll to in the horizontal direction. Default is 0.
+   * @param {number} indexY - The index of the row to scroll to in the vertical direction. Default is 0.
+   *
+   * @return undefined
+   */
+  scrollToIndex(e = 0, t = 0) {
+    this.tableScope.scrollToIndex(e, t);
+  }
+  /**
+   * Sets whether the header is visible or not.
+   *
+   * @param _visible - A boolean value indicating whether the header should be visible. Default value is true.
+   *
+   * @return undefined
+   */
+  setHeaderVisible(e = !0) {
+  }
+  /**
+   * Sets the visibility of a column in the table.
+   *
+   * @param {_column} - The column index or column definition to set visibility for.
+   * @param {_visible=true} - The flag to set visibility to. true for visible, false for hidden.
+   *
+   * @return {void} - There is no return value.
+   */
+  setColumnVisible(e, t = !0) {
+  }
+  /**
+   * Returns whether a column is visible or not.
+   *
+   * @param {number | ColumnDefIf} _column - The column index or the column definition.
+   * @return {boolean} - True if the column is visible, false otherwise.
+   */
+  isColumnVisible(e) {
+    return !0;
+  }
+  /**
+   * Checks if the header is visible.
+   *
+   * @return {boolean} - Returns true if the header is visible, otherwise returns false.
+   */
+  isHeaderVisible() {
+    return !0;
+  }
+  /**
+   * Sets the visibility of the footer.
+   *
+   * @param {boolean} _visible - Indicates whether the footer should be visible or not. Default value is true.
+   *
+   * @return {void} - This method does not return any value.
+   */
+  setFooterVisible(e = !0) {
+  }
+  /**
+   * Determines if the footer is visible.
+   *
+   * @returns {boolean} True if the footer is visible, false otherwise.
+   */
+  isFooterVisible() {
+    return !0;
+  }
+  /**
+   * Repaints the table.
+   *
+   * This method calls the repaint method of the tableScope object
+   * to update and redraw the table based on the latest data.
+   */
+  repaint() {
+    this.tableScope.repaint();
+  }
+  /**
+   * Repaints the table scope with hard repaint.
+   * Repaints the UI by resetting the size of the wrapper div,
+   * adjusting the containers and rows, and performing additional adjustments
+   * after scrolling.
+   *
+   * @return {void}
+   */
+  repaintHard() {
+    this.tableScope.repaintHard();
+  }
+  /**
+   * Clears the current selection of the table.
+   * The table will be rendered automatically.
+   *
+   * @returns {void}
+   */
+  clearSelection() {
+    this.tableScope.clearSelection(!0);
+  }
+  /**
+   * Sets the selection model for the table scope.
+   *
+   * @param {SelectionModel} sm - The selection model to be set.
+   * @param {boolean} [repaint=true] - Indicates whether the table should be repainted after setting the selection model. Default value is true.
+   *
+   * @return {void}
+   */
+  setSelectionModel(e, t = !0) {
+    this.tableScope.setSelectionModel(e, t);
+  }
+  /**
+   * Triggers the action with the given action ID.
+   * This function can be invoked programmatically.
+   *
+   * @param {ActionId} actionId - The ID of the action to trigger.
+   * @return {void}
+   */
+  triggerAction(e) {
+    this.tableScope.onActionTriggered(e);
+  }
+  /**
+   * Retrieves the mapping of shortcuts to corresponding action in the current table scope.
+   *
+   * @return {ShortcutActionIdMapping} The mapping of shortcuts to corresponding action.
+   */
+  getShortcutActionMapping() {
+    return this.tableScope.shortcutService.getShortcutActionMapping();
+  }
+  /**
+   * Copies the selected data from the table to the clipboard.
+   *
+   * @return {Promise<string>} - A promise that resolves with the copied data as a string.
+   */
+  copyToClipboard() {
+    return this.tableScope.copyService.copyToClipboard(
+      this.tableScope.tableModel,
+      this.tableScope.selectionModel(),
+      this.tableScope.focusModel()
+    );
+  }
+  /**
+   * Retrieves the current scope of the table.
+   *
+   * @returns {TableScope} The current scope of the table.
+   */
+  getTableScope() {
+    return this.tableScope;
+  }
+  /**
+   * Retrieves the selection model of the table.
+   *
+   * @return {SelectionModelIf | undefined} The selection model of the table,
+   * or undefined if no selection model is available.
+   */
+  getSelectionModel() {
+    return this.tableScope.selectionModel();
+  }
+}
+class z {
+  constructor(e) {
+    this.getStorageKeyFn = e;
+  }
+  autoConvertMapToObject(e) {
+    const t = {};
+    if (e instanceof Map) {
+      const o = e;
+      for (const s of [...o]) {
+        const [
+          i,
+          r
+        ] = s;
+        t[i] = r;
+      }
+    }
+    return t;
+  }
+  checkAndPersistItem(e, t) {
+    const o = this.getStorageKeyFn;
+    if (o) {
+      const s = o();
+      if (s) {
+        const i = s + e;
+        if ((t + "").includes("Map")) {
+          const r = this.autoConvertMapToObject(t);
+          this.persistItem(i, r);
+        } else
+          this.persistItem(i, t);
+      }
+    }
+  }
+  persistItem(e, t) {
+    t ? localStorage.setItem(e, JSON.stringify(t)) : localStorage.removeItem(e);
+  }
+  loadFromLocalStorage(e) {
+    const t = localStorage.getItem(e);
+    return t ? JSON.parse(t) : null;
+  }
+  // private loadItems() {
+  //   const fn = this.getStorageKeyFn;
+  //   if (fn) {
+  //     const key = fn();
+  //     if (key) {
+  //       // A main key is given by function from options
+  //       const subKey = key + this.CHECKED_STATE;
+  //       const arr = this.loadFromLocalStorage<Array<string | number>>(subKey);
+  //       if (arr) {
+  //         this.checkedStateIds.length = 0;
+  //         arr.forEach(a => this.checkedStateIds.push(a));
+  //       }
+  //
+  //       const subKey2 = key + this.COLLAPSED_EXPANDED_STATE;
+  //       const data = this.loadFromLocalStorage<CollapsedExpandedData>(subKey2);
+  //       if (data) {
+  //         this.collapsedExpandedState = data;
+  //       }
+  //
+  //       const subKey3 = key + this.SELECTED_STATE;
+  //       const arr3 = this.loadFromLocalStorage<object>(subKey3);
+  //       if (arr3) {
+  //         const map: Map<string | number, string[]> = new Map(Object.entries(arr3));
+  //         if (map) {
+  //           this.selectedStateIds.clear();
+  //           map.forEach((col, k) => this.selectedStateIds.set(k, col));
+  //         }
+  //       }
+  //
+  //       const subKey4 = key + this.SCROLL_STATE;
+  //       let scrollOffset = this.loadFromLocalStorage<[number, number]>(subKey4);
+  //       this.scrollOffset = scrollOffset ? scrollOffset : [0, 0];
+  //     }
+  //   }
+  // }
+}
+class he extends z {
+  constructor(e) {
+    super(e), this.SCROLL_STATE = "scrollState", this.scrollOffset = [0, 0], this.load();
+  }
+  getScrollOffset() {
+    return this.scrollOffset;
+  }
+  updateScrollOffset(e) {
+    this.scrollOffset = e, this.checkAndPersistItem(this.SCROLL_STATE, this.scrollOffset);
+  }
+  load() {
+    const e = this.getStorageKeyFn;
+    if (e) {
+      const t = e();
+      if (t) {
+        const o = t + this.SCROLL_STATE;
+        let s = this.loadFromLocalStorage(o);
+        this.scrollOffset = s || [0, 0];
+      }
+    }
+  }
+}
+class ce {
+  constructor(e = "collapsed", t = [], o = !1, s = !1) {
+    this.mode = e, this.rowIds = t, this.allCollapsed = o, this.allExpanded = s;
+  }
+}
+class ge extends z {
+  constructor(e) {
+    super(e), this.COLLAPSED_EXPANDED_STATE = "collapsedExpandedState", this.collapsedExpandedState = new ce(), this.load();
+  }
+  collapsedExpandedStateGet() {
+    return this.collapsedExpandedState;
+  }
+  collapsedExpandedStateIncludes(e) {
+    return this.collapsedExpandedState.rowIds.includes(e);
+  }
+  collapsedStateIdsPush(e) {
+    this.collapsedExpandedState.rowIds.includes(e) || (this.collapsedExpandedState.rowIds.push(e), this.collapsedExpandedState.allCollapsed = !1, this.collapsedExpandedState.allExpanded = !1, this.persist());
+  }
+  collapsedStateIdsRemove(e) {
+    const t = this.collapsedExpandedState.rowIds.indexOf(e);
+    t !== -1 && (this.collapsedExpandedState.rowIds.splice(t, 1), this.collapsedExpandedState.allCollapsed = !1, this.collapsedExpandedState.allExpanded = !1, this.persist());
+  }
+  collapsedStateAll(e) {
+    this.collapsedExpandedState.rowIds = [], this.collapsedExpandedState.mode = e ? "collapsed" : "expanded", this.collapsedExpandedState.allCollapsed = !e, this.collapsedExpandedState.allExpanded = e, this.persist();
+  }
+  load() {
+    const e = this.getStorageKeyFn;
+    if (e) {
+      const t = e();
+      if (t) {
+        const o = t + this.COLLAPSED_EXPANDED_STATE, s = this.loadFromLocalStorage(o);
+        s && (this.collapsedExpandedState = s);
+      }
+    }
+  }
+  persist() {
+    this.checkAndPersistItem(this.COLLAPSED_EXPANDED_STATE, this.collapsedExpandedState);
+  }
+}
+class pe extends z {
+  constructor(e) {
+    super(e), this.SORTING_STATE = "sortingState", this.sortItems = [], this.load();
+  }
+  getSortItems() {
+    return this.sortItems;
+  }
+  setSortItems(e) {
+    this.sortItems = e, this.checkAndPersistItem(this.SORTING_STATE, this.sortItems);
+  }
+  load() {
+    const e = this.getStorageKeyFn;
+    if (e) {
+      const t = e();
+      if (t) {
+        const o = t + this.SORTING_STATE, s = this.loadFromLocalStorage(o);
+        this.sortItems = s || [];
+      }
+    }
+  }
+}
+class T {
+  constructor(e = 0, t = 0, o = 0, s = 0, i) {
+    this.left = e, this.width = t, this.height = o, this.top = s, this.index = i;
+  }
+}
+class be {
+  constructor(e, t, o, s) {
+    this.hostElement = e, this.tableModel = t, this.dom = o, this.tableOptions = s, this.scrollTop = 0, this.areaBodyWestGeo = new T(), this.areaBodyCenterGeo = new T(), this.areaBodyEastGeo = new T();
+    const i = this.hostElement;
+    i.innerText = "", this.dom.setAttribute(i, "tabindex", "0"), this.dom.setStyle(
+      this.dom.addClass("ge-table", i),
+      "position",
+      "relative"
+    ), this.hoverRow = o.applyStylePosistionAbsolute(
+      o.createDivWithClass("ge-table-hover-row", i)
+    ), this.hoverColumn = o.applyStylePosistionAbsolute(
+      o.createDivWithClass("ge-table-hover-column", i)
+    ), this.draggingColumn = o.applyStylePosistionAbsolute(
+      o.createDivWithClass("ge-table-dragging-column", i)
+    ), this.areaHeaderWest = o.appendRelativeChildDiv(
+      o.applyStylePosistionAbsolute(
+        o.createAreaDivWithClass("ge-table-header ge-table-header-west", i, "header", "west")
+      )
+    ), this.areaHeaderCenter = o.appendRelativeChildDiv(
+      o.applyStylePosistionAbsolute(
+        o.createAreaDivWithClass("ge-table-header ge-table-header-center", i, "header", "center")
+      )
+    ), this.areaHeaderEast = o.appendRelativeChildDiv(
+      o.applyStylePosistionAbsolute(
+        o.createAreaDivWithClass("ge-table-header ge-table-header-east", i, "body", "east")
+      )
+    ), this.areaBodyWest = o.appendRelativeChildDiv(
+      o.applyStylePosistionAbsolute(
+        o.createAreaDivWithClass("ge-table-body ge-table-body-west", i, "body", "west")
+      )
+    ), this.areaBodyEast = o.appendRelativeChildDiv(
+      o.applyStylePosistionAbsolute(
+        o.createAreaDivWithClass("ge-table-body ge-table-body-east", i, "body", "east")
+      )
+    ), this.areaFooterWest = o.appendRelativeChildDiv(
+      o.applyStylePosistionAbsolute(
+        o.createAreaDivWithClass("ge-table-footer ge-table-footer-west", i, "footer", "west")
+      )
+    ), this.areaFooterCenter = o.appendRelativeChildDiv(
+      o.applyStylePosistionAbsolute(
+        o.createAreaDivWithClass("ge-table-footer ge-table-footer-center", i, "footer", "center")
+      )
+    ), this.areaFooterEast = o.appendRelativeChildDiv(
+      o.applyStylePosistionAbsolute(
+        o.createAreaDivWithClass("ge-table-footer ge-table-footer-east", i, "footer", "east")
+      )
+    ), this.scrollViewport = o.applyStyleOverflowAuto(
+      this.tableOptions.overflowX ?? "auto",
+      this.tableOptions.overflowY ?? "auto",
+      o.applyStyleNoPadding(
+        o.applyStylePosistionAbsolute(
+          o.createAreaDivWithClass("ge-table-scroll-viewport", i, "body", "center")
+        )
+      )
+    ), this.contentWrapperDiv = o.applyStyleNoPadding(
+      o.applyStylePosistionRelative(
+        o.createDivWithClass("ge-table-scroll-content-wrapper", this.scrollViewport)
+      )
+    ), this.contentDiv = o.applyStyleNoPadding(
+      o.applyStylePosistionRelative(
+        o.createDivWithClass("ge-table-scroll-content", this.contentWrapperDiv)
+      )
+    ), this.areaBodyCenter = o.appendRelativeChildDiv(
+      o.createDivWithClass("ge-table-body-center", this.contentDiv)
+    ), this.borderHeaderBottom = o.applyStylePosistionAbsolute(
+      o.createDivWithClass("ge-table-header-border", i)
+    ), this.borderFixedWest = o.applyStylePosistionAbsolute(
+      o.createDivWithClass("ge-table-west-fixed-column-border", i)
+    ), this.borderFixedEast = o.applyStylePosistionAbsolute(
+      o.createDivWithClass("ge-table-east-fixed-column-border", i)
+    ), this.borderFooterTop = o.applyStylePosistionAbsolute(
+      o.createDivWithClass("ge-table-footer-border", i)
+    );
+  }
+  /**
+   * Adjusts the containers and rows of the table based on the current state.
+   *
+   * @return {void}
+   */
+  adjustContainersAndRows() {
+    const e = this.tableModel.getPadding(), t = this.hostElement.clientWidth, o = this.hostElement.clientHeight;
+    this.dom.applyStyle(this.scrollViewport, {
+      width: `${t - e.left}px`,
+      height: `${o - e.top}px`,
+      top: `${e.top}px`,
+      left: `${e.left}px`
+    }), this.scrollTop = this.scrollViewport.scrollTop, this.dom.applyStyle(this.contentDiv, {
+      width: `${this.scrollViewport.clientWidth}px`,
+      height: `${this.scrollViewport.clientHeight}px`,
+      top: `${this.scrollTop}px`,
+      left: `${this.scrollViewport.scrollLeft}px`
+    }), this.areaBodyWestGeo.width = e.left, this.areaBodyWestGeo.height = o - e.top - e.bottom, this.areaBodyWestGeo.top = e.top, this.areaBodyWestGeo.left = 0, this.dom.applyStyleInPx(this.areaBodyWest.parent, this.areaBodyWestGeo), this.tableOptions.fixedWestSeparatorBorderVisible && this.tableModel.getFixedLeftColumnCount() ? this.dom.applyDisplayBlockStyle(
+      this.dom.applyStyle(this.borderFixedWest, {
+        width: "1px",
+        height: `${this.areaBodyWestGeo.height}px`,
+        top: `${this.areaBodyWestGeo.top}px`,
+        left: `${this.areaBodyWestGeo.width}px`
+      })
+    ) : this.dom.applyDisplayNoneStyle(this.borderFixedWest), this.areaBodyEastGeo.width = e.right, this.areaBodyEastGeo.height = o - e.top - e.bottom, this.areaBodyEastGeo.top = e.top, this.areaBodyEastGeo.left = t - e.right, this.dom.applyStyleInPx(this.areaBodyEast.parent, this.areaBodyEastGeo), this.tableOptions.fixedEastSeparatorBorderVisible && this.tableModel.getFixedLeftColumnCount() ? this.dom.applyDisplayBlockStyle(
+      this.dom.applyStyle(this.borderFixedEast, {
+        width: "1px",
+        height: `${this.areaBodyEastGeo.height}px`,
+        top: `${this.areaBodyEastGeo.top}px`,
+        left: `${this.areaBodyEastGeo.left}px`
+      })
+    ) : this.dom.applyDisplayNoneStyle(this.borderFixedEast), this.areaBodyCenterGeo.width = t - e.left - e.right, this.areaBodyCenterGeo.height = o - e.top - e.bottom, this.areaBodyCenterGeo.top = 0, this.areaBodyCenterGeo.left = 0, this.dom.applyStyleInPx(this.areaBodyCenter.parent, this.areaBodyCenterGeo), this.dom.applyStyle(this.areaHeaderCenter.parent, {
+      width: `${t - e.left - e.right}px`,
+      height: `${e.top}px`,
+      top: "0",
+      left: `${e.left}px`
+    }), this.dom.applyStyle(this.areaHeaderWest.parent, {
+      width: `${e.left}px`,
+      height: `${e.top}px`,
+      top: "0",
+      left: "0"
+    }), this.dom.applyStyle(this.areaHeaderEast.parent, {
+      width: `${e.right}px`,
+      height: `${e.top}px`,
+      top: "0",
+      left: `${t - e.right}px`
+    }), this.tableOptions.headerSeparatorBorderVisible && this.tableModel.isHeaderVisibe() ? this.dom.applyDisplayBlockStyle(
+      this.dom.applyStyle(this.borderHeaderBottom, {
+        width: `${t}px`,
+        height: "1px",
+        top: `${e.top}px`,
+        left: "0px"
+      })
+    ) : this.dom.applyDisplayNoneStyle(this.borderHeaderBottom), this.dom.applyStyle(this.areaFooterWest.parent, {
+      width: `${e.left}px`,
+      height: `${e.bottom}px`,
+      top: `${o - e.bottom}px`,
+      left: "0"
+    }), this.dom.applyStyle(this.areaFooterCenter.parent, {
+      width: `${t - e.left - e.right}px`,
+      height: `${e.bottom}px`,
+      top: `${o - e.bottom}px`,
+      left: `${e.left}px`
+    }), this.dom.applyStyle(this.areaFooterEast.parent, {
+      width: `${e.right}px`,
+      height: `${e.bottom}px`,
+      top: `${o - e.bottom}px`,
+      left: `${t - e.right}px`
+    }), this.tableOptions.footerSeparatorBorderVisible && this.tableModel.isFooterVisibe() ? this.dom.applyDisplayBlockStyle(
+      this.dom.applyStyle(this.borderFooterTop, {
+        width: `${t}px`,
+        height: "1px",
+        top: `${o - e.bottom}px`,
+        left: "0px"
+      })
+    ) : this.dom.applyDisplayNoneStyle(this.borderFooterTop), this.adjustAfterScrolling();
+  }
+  /**
+   * Adjusts the position or appearance of elements after scrolling.
+   * This method must be overwritten in child classes.
+   *
+   * @return {void}
+   */
+  adjustAfterScrolling() {
+  }
+  /**
+   * Resets the size of the wrapper div based on the content dimensions.
+   *
+   * @protected
+   *
+   * @returns {void} Returns nothing.
+   */
+  resetSizeOfWrapperDiv() {
+    const e = `${this.tableModel.getContentWidthInPixel()}px`, t = `${this.tableModel.getContentHeightInPixel() + 1}px`;
+    this.dom.setStyle(this.contentWrapperDiv, "width", e), this.dom.setStyle(this.contentWrapperDiv, "height", t);
+  }
+}
+class E {
+  /**
+   * Represents a constructor for a class.
+   * @constructor
+   * @param {number} r1 - The value for r1.
+   * @param {number} c1 - The value for c1.
+   * @param {number} r2 - The value for r2.
+   * @param {number} c2 - The value for c2.
+   * @param {boolean} [gammaRange=false] - The value for gammaRange. Defaults to false. gammaRange will be used for AreaModelCellGroups, but it's not implemented yet!
+   */
+  constructor(e, t, o, s, i = !1) {
+    this.r1 = e, this.c1 = t, this.r2 = o, this.c2 = s, this.gammaRange = i;
+  }
+  static create(e) {
+    return e.gammaRange === void 0 && (e.gammaRange = !1), new E(
+      e.rowIndex1,
+      e.columnIndex1,
+      e.rowIndex2,
+      e.columnIndex2,
+      e.gammaRange
+    );
+  }
+  static singleCell(e, t) {
+    return new E(e, t, e, t);
+  }
+  static singleRow(e) {
+    return new E(e, 0, e, Number.MAX_SAFE_INTEGER);
+  }
+  static singleColumn(e) {
+    return new E(0, e, Number.MAX_SAFE_INTEGER, e);
+  }
+  isInRange(e, t) {
+    return e >= this.r1 && e <= this.r2 && t >= this.c1 && t <= this.c2;
+  }
+}
+class ue {
+  constructor(e, t) {
+    this.tableModel = e, this.areaModel = t, this.colAndRowspanRanges = void 0;
+  }
+  init() {
+    if (this.areaModel.getMaxColspan() < 2 && this.areaModel.getMaxRowspan() < 2)
+      return;
+    this.colAndRowspanRanges = [];
+    const e = this.areaModel.getRowCount(), t = this.tableModel.getColumnCount();
+    for (let o = 0; o < e; o++)
+      for (let s = 0; s < t; s++) {
+        let i = this.areaModel.getColspanAt(o, s), r = this.areaModel.getRowspanAt(o, s);
+        if (i > 1 || r > 1) {
+          i === 0 && (i = 1), r === 0 && (r = 1);
+          const a = "gammaCells" in this.areaModel;
+          this.colAndRowspanRanges.push(
+            new E(o, s, o + r - 1, s + i - 1, a)
+          );
+        }
+      }
+  }
+  getRanges() {
+    return this.colAndRowspanRanges ? this.colAndRowspanRanges : [];
+  }
+  isInRange(e, t) {
+    if (this.colAndRowspanRanges) {
+      for (const o of this.colAndRowspanRanges)
+        if (o.isInRange(e, t))
+          return !0;
+    }
+    return !1;
+  }
+}
+class Se {
+  constructor(e, t, o) {
+    this.header = e, this.body = t, this.footer = o;
+  }
+}
+class fe extends be {
+  constructor(e, t, o, s) {
+    var r, a;
+    super(e, t, o, s), this.dragging = !1, this.editing = !1, this.storedColumnWidths = [], this.scrollLeft = 0, this.scrollViewportLeft = 0, this.scrollFactorY = 0, this.scrollFactorX = 0, this.cleanupFunctions = {
+      header: [],
+      body: [],
+      footer: []
+    }, this.tree = !1, this.colAndRowspanModels = new Se(), this.firstVisibleRowIndex = -1, this.draggingTargetColumnIndex = -1, this.removables = [], this.tableModel.getSelectionModel ? this.getSelectionModel = this.tableModel.getSelectionModel : (r = this.tableOptions) != null && r.getSelectionModel && (this.getSelectionModel = this.tableOptions.getSelectionModel), (a = this.tableOptions) != null && a.getFocusModel && (this.getFocusModel = this.tableOptions.getFocusModel), W(t.getAreaModel("body")) && (this.tree = !0), ["header", "body", "footer"].forEach(
+      (l) => {
+        var n;
+        this.colAndRowspanModels[l] = new ue(t, t.getAreaModel(l)), (n = this.colAndRowspanModels[l]) == null || n.init();
+      }
+    );
+  }
+  isEditing() {
+    return this.editing;
+  }
+  /**
+   * Resets the editor renderer by clearing its values and state.
+   *
+   * @function resetEditorRenderer
+   * @memberof ClassName
+   *
+   * @returns {void}
+   */
+  resetEditorRenderer() {
+    this.editorRenderer = void 0, this.editorRendererRow = -1, this.editorRendererColumn = -1, this.editing = !1;
+  }
+  /**
+   * Clears the selection in the component.
+   *
+   * @param {boolean} rerender - Indicates whether to rerender the component after clearing the selection. Default value is false.
+   *
+   * @return {void}
+   */
+  clearSelection(e = !1) {
+    if (this.getSelectionModel) {
+      const t = this.getSelectionModel();
+      t == null || t.clear(), e && this.repaint();
+    }
+  }
+  /**
+   * Initializes and renders the editor for a specified row and column index.
+   *
+   * @param {number} rowIdx - The index of the row.
+   * @param {number} colIdx - The index of the column.
+   */
+  initRenderEditor(e, t) {
+    var s;
+    let o = (s = this.tableModel.getColumnDef(t)) == null ? void 0 : s.getEditRenderer;
+    if (o || (o = this.tableOptions.getEditRenderer), o)
+      if (this.editorRenderer = o(e, t), this.editorRenderer) {
+        this.editorRendererRow = e, this.editorRendererColumn = t, this.editing = !0, this.repaint();
+        const i = document.querySelector("input.ge-table-cell-editor-input");
+        i && i.focus();
+      } else
+        this.resetEditorRenderer();
+  }
+  /**
+   * Adjusts the content after scrolling and initiates a repaint of the component.
+   *
+   * @return {void}
+   */
+  repaint() {
+    this.adjustAfterScrolling();
+  }
+  /**
+   * Repaints the UI by resetting the size of the wrapper div,
+   * adjusting the containers and rows, and performing additional adjustments
+   * after scrolling.
+   *
+   * @return {void} This method does not return any value.
+   */
+  repaintHard() {
+    this.resetSizeOfWrapperDiv(), this.adjustContainersAndRows(), this.adjustAfterScrolling();
+  }
+  /**
+   * Adjusts the table after scrolling. This method performs various adjustments
+   * to the table's appearance and behavior after a scroll event occurs.
+   */
+  adjustAfterScrolling() {
+    var e;
+    for (const t of this.removables)
+      t.remove();
+    this.hideHoverRow(), this.hideHoverColumn(), this.scrollTop = this.scrollViewport.scrollTop, this.scrollLeft = this.scrollViewport.scrollLeft, this.debounce(this.checkForScrollPosSaving.bind(this)), this.scrollFactorY = this.scrollTop / (this.scrollViewport.scrollHeight - this.scrollViewport.clientHeight), this.scrollFactorX = this.scrollLeft / (this.scrollViewport.scrollWidth - this.scrollViewport.clientWidth), isNaN(this.scrollFactorY) && (this.scrollFactorY = 0), isNaN(this.scrollFactorX) && (this.scrollFactorX = 0), this.adjustBody(), this.adjustArea("footer"), this.adjustArea("header"), this.tableOptions.tableTopBorderVisible && this.removables.push(this.dom.addHorizontalBorder(
+      new T(0, this.hostElement.clientWidth, 1, 0),
+      this.hostElement,
+      "ge-table-border"
+    )), this.tableOptions.tableBottomBorderVisible && this.removables.push(this.dom.addHorizontalBorder(
+      new T(0, this.hostElement.clientWidth, 1, this.hostElement.clientHeight - 1),
+      this.hostElement,
+      "ge-table-border"
+    )), this.tableModel.getFixedLeftColumnCount() > 0 && this.removables.push(this.dom.addVerticalBorder(
+      new T(this.areaBodyWest.child.clientWidth, 1, this.hostElement.clientHeight, 0),
+      this.hostElement,
+      "ge-table-body-west-vertical-border"
+    )), ((e = this.tableModel.getAreaModel("header")) == null ? void 0 : e.getRowCount()) > 0 && this.removables.push(this.dom.addHorizontalBorder(
+      new T(0, this.hostElement.clientWidth, 1, this.areaHeaderCenter.child.clientHeight),
+      this.hostElement,
+      "ge-table-body-west-vertical-border"
+    ));
+  }
+  /**
+   * Checks if the scroll position should be saved and saves it.
+   *
+   * @return {void}
+   */
+  checkForScrollPosSaving() {
+    var e, t;
+    this.storeScrollPosStateService && ((t = (e = this.tableOptions) == null ? void 0 : e.autoRestoreOptions) != null && t.autoRestoreScrollPosition) && this.storeScrollPosStateService.updateScrollOffset([this.scrollLeft, this.scrollTop]);
+  }
+  /**
+   * Updates the cells in the table with the provided values and optionally repaints all cells.
+   *
+   * @param {TableCellUpdateEventIf[]} events - The array of events containing information about the cells to update.
+   * @param {boolean} repaintAll - Optional. If true, repaints all cells after updating. Defaults to false.
+   *
+   * @returns {void}
+   */
+  updateCells(e, t = !1) {
+    e.forEach(
+      (o) => {
+        this.tableModel.getAreaModel(o.area).setValue(o.rowIndex, o.columnIndex, o.value), t || this.rerenderCellContent(o);
+      }
+    ), t && this.repaint();
+  }
+  /**
+   * Rerenders the content of a table cell based on the given parameters.
+   *
+   * @param {TableCellUpdateEventIf} area - The area of the table.
+   * @param {number} rowIndex - The index of the row.
+   * @param {number} columnIndex - The index of the column.
+   * @param {any} value - The new value to be displayed in the cell.
+   * @param {string[]} cssClasses - An array of CSS classes to be applied to the cell.
+   */
+  rerenderCellContent({ area: e, rowIndex: t, columnIndex: o, value: s, cssClasses: i }) {
+    const r = this.tableModel.getAreaModel(e), a = 'div[data-col-index="' + o + '"][data-row-index="' + t + '"][data-area="' + e + '"]', l = document.querySelector(a);
+    if (l) {
+      let n;
+      const h = this.editorRenderer && this.editorRendererRow === t && this.editorRendererColumn === o ? this.editorRenderer : r.getCellRenderer(t, o);
+      if (l.innerText = "", this.applyCssClasses(l, i), h)
+        n = h.render(l, t, o, e, r, s, this.dom.domService), n && this.cleanupFunctions[e].push(n);
+      else {
+        const u = `${s}`;
+        this.dom.addLabelDiv(l, u, !1, t, o, e);
+      }
+      const c = r.getCustomClassesAt(t, o);
+      c.length && this.dom.addClasses(c, l);
+      const f = r.getCustomStyleAt(t, o);
+      if (f)
+        for (const u in f)
+          this.dom.setStyle(l, u, f[u]);
+    }
+  }
+  /**
+   * Stores the widths of all columns in the table.
+   *
+   * @protected
+   * @function storeColumnWidths
+   * @returns {void}
+   */
+  storeColumnWidths() {
+    const e = this.tableModel.getColumnDefs();
+    e != null && e.length && (this.storedColumnWidths = e.map((t, o) => this.tableModel.getColumnWidth(o)));
+  }
+  getAreaAndSideIdentByAttr(e) {
+    if (e) {
+      const t = this.getStringByAttr(e, "data-area"), o = this.getStringByAttr(e, "data-side");
+      if (o && t)
+        return [t, o];
+    }
+    return [void 0, void 0];
+  }
+  /**
+   * Retrieves the specified area from the grid layout.
+   *
+   * @param {string} areaIdent - The identifier for the area ('header', 'body', or 'footer').
+   * @param {string} sideIdent - The identifier for the side of the area ('west', 'center', or 'east').
+   * @protected
+   * @returns {HTMLElement} - The requested area element.
+   * @throws {Error} - If the area identifier or side identifier is incorrect.
+   */
+  getArea(e, t) {
+    if (e === "header") {
+      if (t === "west")
+        return this.areaHeaderWest;
+      if (t === "center")
+        return this.areaHeaderCenter;
+      if (t === "east")
+        return this.areaHeaderEast;
+    } else if (e === "body") {
+      if (t === "west")
+        return this.areaBodyWest;
+      if (t === "center")
+        return this.areaBodyCenter;
+      if (t === "east")
+        return this.areaBodyEast;
+    } else if (e === "footer") {
+      if (t === "west")
+        return this.areaFooterWest;
+      if (t === "center")
+        return this.areaFooterCenter;
+      if (t === "east")
+        return this.areaFooterEast;
+    }
+    throw Error(`Wrong area identifier: row:${e}, col:${t}`);
+  }
+  /**
+   * Adjusts the body of the table.
+   *
+   * @protected
+   * @return {void}
+   */
+  adjustBody() {
+    const e = this.areaBodyCenterGeo.height - this.tableModel.getContentHeightInPixel(), t = this.scrollFactorY * e;
+    this.dom.setStyle(this.contentDiv, "top", `${this.scrollTop}px`), this.dom.setStyle(this.contentDiv, "left", `${this.scrollViewport.scrollLeft}px`), this.adjustArea("body", t);
+  }
+  /**
+   * Returns a number value extracted from the specified attribute of the source element.
+   *
+   * @param {HTMLElement} srcElement - The source element from which to extract the attribute value.
+   * @param {string} key - The attribute key to extract the value from.
+   * @returns {number} - The extracted number value, or -1 if the attribute was not found or not a valid number.
+   * @protected
+   */
+  getNumberByAttr(e, t) {
+    var o;
+    if (e) {
+      const s = (o = e.closest("[" + t + "]")) == null ? void 0 : o.getAttribute(t);
+      if (s)
+        return Number(s);
+    }
+    return -1;
+  }
+  /**
+   * Retrieves the value of the specified attribute from the nearest ancestor element that has the attribute.
+   *
+   * @param {HTMLElement} srcElement - The source element from which to start searching for the nearest ancestor element.
+   * @param {string} key - The name of the attribute to retrieve.
+   * @returns {string} The value of the specified attribute, or an empty string if the attribute is not found.
+   * @protected
+   */
+  getStringByAttr(e, t) {
+    var o;
+    if (e) {
+      const s = (o = e.closest("[" + t + "]")) == null ? void 0 : o.getAttribute(t);
+      if (s)
+        return s;
+    }
+    return "";
+  }
+  /**
+   * Adjusts the layout and positioning of the specified area in the table.
+   * This method is used internally and should not be called directly.
+   *
+   * @param {AreaIdent} areaIdent - The identifier of the area to adjust (e.g. header, body, footer).
+   * @param {number} [yStart=0] - The starting y-position for the layout adjustments.
+   * @protected
+   */
+  adjustArea(e, t = 0) {
+    var b;
+    const o = this.getArea(e, "west"), s = this.getArea(e, "center"), i = this.getArea(e, "east"), r = s.child.clientHeight;
+    o.child.innerText = "", s.child.innerText = "", i.child.innerText = "";
+    const a = 0, l = this.areaBodyCenterGeo.width, n = this.tableModel.getPadding(), d = this.tableModel.getAreaModel(e), h = d.getRowCount();
+    for (; this.cleanupFunctions[e].length; ) {
+      const g = this.cleanupFunctions[e].shift();
+      g && g();
+    }
+    let c = t;
+    const f = this.tableModel.getColumnCount(), u = this.tableModel.getFixedRightColumnCount(), S = this.tableModel.getFixedLeftColumnCount();
+    for (let g = 0; g < h; g++) {
+      const v = c, m = g === h - 1, x = this.tableModel.getRowHeight(e, g);
+      if (v + x > 0) {
+        this.firstVisibleRowIndex = g;
+        let C = { left: a, width: l, height: x, top: v, index: g }, y = this.dom.addRowDiv(s, C, g, e, "center");
+        const R = S;
+        if (this.adjustColumnsToRowParent({
+          areaIdent: e,
+          sideIdent: "center",
+          areaModel: d,
+          geo: C,
+          parent: y,
+          rowIndex: g,
+          columnIndexStart: R,
+          columnIndexEnd: f - u - 1,
+          verticalFixed: !1,
+          lastRowOfModel: m
+        }), n.left > 0 && (C = { left: a, width: this.areaBodyWestGeo.width, height: x, top: v, index: g }, y = this.dom.addRowDiv(o, C, g, e, "west"), this.adjustColumnsToRowParent({
+          areaIdent: e,
+          sideIdent: "west",
+          areaModel: d,
+          geo: C,
+          parent: y,
+          rowIndex: g,
+          columnIndexStart: 0,
+          columnIndexEnd: R - 1,
+          verticalFixed: !0,
+          lastRowOfModel: m
+        })), n.right > 0 && (C = { left: a, width: this.areaBodyEastGeo.width, height: x, top: v, index: g }, y = this.dom.addRowDiv(i, C, g, e, "east"), this.adjustColumnsToRowParent({
+          areaIdent: e,
+          sideIdent: "east",
+          areaModel: d,
+          geo: C,
+          parent: y,
+          rowIndex: g,
+          columnIndexStart: f - u,
+          columnIndexEnd: f - 1,
+          verticalFixed: !0,
+          lastRowOfModel: m
+        })), e === "header" && this.tree && g === h - 1) {
+          const A = this.dom.applyStyle(
+            this.dom.setAttribute(
+              this.dom.addDiv(y, new T(16, 20, 20, 8)),
+              "data-ge-action",
+              "toggleExpandCollapseAll"
+            ),
+            { cursor: "pointer" }
+          ), M = this.tableOptions.treeOptions.arrowExpandCollapseAll;
+          if (M) {
+            const F = this.dom.domService.createText(M.content);
+            this.dom.domService.appendChild(A, F), M.style && this.dom.applyStyleString(A, M.style);
+          }
+        }
+      }
+      if (c = c + x, c > r)
+        break;
+    }
+    if (this.colAndRowspanModels && this.colAndRowspanModels[e]) {
+      const g = ((b = this.colAndRowspanModels[e]) == null ? void 0 : b.getRanges()) ?? [];
+      if (g.length)
+        for (const v of g) {
+          let m = 0, x = s.child, C = "center";
+          if (v.c1 < S)
+            x = o.child, C = "west";
+          else if (u > 0 && v.c1 >= f - u)
+            x = i.child, C = "east";
+          else {
+            const y = this.areaBodyCenterGeo.width - this.tableModel.getContentWidthInPixel();
+            m = this.scrollFactorX * y - this.areaBodyWestGeo.width, C = "center";
+          }
+          this.drawBigCell(v, m, t, d, x, C);
+        }
+    }
+  }
+  /**
+   * Draws big cells (rowspan and or colspan) in body/center
+   * @param range CellRange
+   * @param xStart X position in pixel for top left corner
+   * @param yStart Y position in pixel for top left corner
+   * @param areaModel AreaModelIf
+   * @param parentDiv Parent div as HTMLDivElement
+   * @param sideIdent SideIdent (west,center,east)
+   * @protected
+   */
+  drawBigCell(e, t, o, s, i, r) {
+    const a = o + this.getRowHeights(0, e.r1 - 1, s).reduce((b, g) => b + g, 0), l = this.tableModel.getColumnCount(), n = this.tableModel.getFixedRightColumnCount();
+    let d = 0;
+    n > 0 && e.c1 >= l - n && (d = l - n);
+    const h = t + this.getColumnWidths(d, e.c1 - 1).reduce((b, g) => b + g, 0), c = this.getRowHeights(e.r1, e.r2, s).reduce((b, g) => b + g, 0), f = this.getColumnWidths(e.c1, e.c2).reduce((b, g) => b + g, 0);
+    let u = !1;
+    const S = this.getSelectionModel ? this.getSelectionModel() : void 0;
+    S && (u = S.getSelectionCount(e.r1, e.c1) > 0), e.gammaRange ? this.renderCell({
+      areaModel: s,
+      areaIdent: s.areaIdent,
+      sideIdent: r,
+      rowIndex: e.r1,
+      columnIndex: e.c1,
+      left: h,
+      top: a,
+      width: f,
+      height: c,
+      parent: i,
+      cellSelected: u,
+      lastRowOfModel: !0,
+      gammaRange: e.gammaRange
+    }) : this.renderCell({
+      areaModel: s,
+      areaIdent: s.areaIdent,
+      sideIdent: r,
+      rowIndex: e.r1,
+      columnIndex: e.c1,
+      left: h,
+      top: a,
+      width: f,
+      height: c,
+      parent: i,
+      cellSelected: u,
+      lastRowOfModel: !0,
+      gammaRange: e.gammaRange
+    }), s.areaIdent === "header" && this.tableOptions.columnsResizable && this.renderHeaderCellResizeHandle({
+      rowIndex: e.r1,
+      columnIndex: e.c1,
+      cellLeft: h,
+      cellTop: a,
+      cellWidth: f,
+      cellHeight: c,
+      parent: i
+    });
+  }
+  /**
+   * Finds the row index of an important rowspan cell in a given area model.
+   *
+   * @param {AreaModelIf} areaModel - The area model to search in.
+   * @param {number} rowIndex - The current row index.
+   * @param {number} colIndex - The current column index.
+   * @returns {number} - The row index of the important rowspan cell, or -1 if not found.
+   * @protected
+   */
+  findRowOfImportantRowspanCell(e, t, o) {
+    const s = e.getMaxRowspan();
+    for (let i = t - 1; i > -1; i--) {
+      const r = e.getRowspanAt(i, o);
+      if (r > 1 && i + r + 1 >= t)
+        return i;
+      if (t - i > s)
+        return -1;
+    }
+    return -1;
+  }
+  /**
+   * Adjusts the columns to fit the width of the row's parent element.
+   *
+   * @param {ArgsAdjustColumnsToRowParentParams} params - The parameters for adjusting the columns.
+   * @protected
+   * @return {void}
+   */
+  adjustColumnsToRowParent({
+    areaIdent: e,
+    sideIdent: t,
+    areaModel: o,
+    geo: s,
+    parent: i,
+    rowIndex: r,
+    columnIndexStart: a,
+    columnIndexEnd: l,
+    verticalFixed: n = !1,
+    lastRowOfModel: d = !1
+  }) {
+    var S;
+    this.scrollViewportLeft = this.scrollViewport.scrollLeft;
+    let h = 0;
+    if (!n) {
+      const b = this.areaBodyCenterGeo.width - this.tableModel.getContentWidthInPixel();
+      h = this.scrollFactorX * b;
+    }
+    const c = 0, f = !!(e === "body" && t);
+    let u = h;
+    for (let b = a; b <= l; b++) {
+      const g = u, v = this.tableModel.getColumnWidth(b);
+      if (v > 0 && g + v > 0) {
+        let m = s.height;
+        const x = o.getRowspanAt(r, b), C = o.getColspanAt(r, b);
+        x > 1 && (m = this.getRowHeights(r, r + x - 1, o).reduce((A, M) => A + M, 0));
+        let y = v;
+        C > 1 && (y = this.getColumnWidths(b, b + C - 1).reduce((A, M) => A + M, 0));
+        let R = !1;
+        if (this.colAndRowspanModels && this.colAndRowspanModels[e] && (S = this.colAndRowspanModels[e]) != null && S.isInRange(r, b) && (R = !0), this.draggingTargetColumnIndex === b && e !== "header") {
+          this.renderDragTargetDiv(i, g, c, y, m);
+          const A = { left: g, top: c, width: y, height: m };
+          this.dom.addColumnBorderDivs(this.tableOptions, i, A, e, t);
+        } else {
+          const A = this.renderSelectedBackgroundDiv(R, f, t, o, r, b, i, g, c, y, m);
+          "gammaCells" in o && o.getValueAt(r, b) && (R = !1), R || this.renderCell({
+            areaModel: o,
+            areaIdent: e,
+            sideIdent: t,
+            rowIndex: r,
+            columnIndex: b,
+            left: g,
+            top: c,
+            width: y,
+            height: m,
+            parent: i,
+            cellSelected: A,
+            lastRowOfModel: d,
+            gammaRange: !0
+          }), e === "header" && this.tableOptions.columnsResizable && this.renderHeaderCellResizeHandle({
+            rowIndex: r,
+            columnIndex: b,
+            cellLeft: g,
+            cellTop: c,
+            cellWidth: y,
+            cellHeight: m,
+            parent: i
+          });
+        }
+      }
+      if (u = u + v, u > this.areaBodyCenterGeo.width)
+        break;
+    }
+    this.tableOptions.verticalBorderVisible && this.dom.addVerticalBorder(new T(u - 1, 1, s.height, 0), i);
+  }
+  /**
+   * Retrieves the column index of the tree arrow column in the table.
+   *
+   * @protected
+   *
+   * @returns {0 | 1} The column index of the tree arrow column.
+   *                Returns 0 if the checkbox is not visible,
+   *                otherwise returns 1.
+   */
+  getTreeArrowColumnIndex() {
+    return this.tableOptions.showCheckboxWihoutExtraColumn ? 0 : this.tableModel.isRowCheckboxVisible() ? 1 : 0;
+  }
+  addAndRenderCellDiv({
+    areaModel: e,
+    areaIdent: t,
+    sideIdent: o,
+    rowIndex: s,
+    index: i,
+    left: r,
+    width: a,
+    height: l,
+    top: n,
+    parent: d,
+    lastRowOfModel: h
+  }) {
+    var X;
+    const f = this.editorRenderer && this.editorRendererRow === s && this.editorRendererColumn === i ? this.editorRenderer : e.getCellRenderer(s, i), u = { left: r, width: a, height: l, top: n, index: i }, S = e.getRowByIndex(s);
+    let b = "none";
+    if (i === this.getTreeArrowColumnIndex() && P(S)) {
+      const w = S;
+      (X = w.children) != null && X.length ? w.expanded ? b = "expanded" : b = "collapsed" : b = "hidden";
+    }
+    let v;
+    if (t === "header") {
+      const w = this.tableModel.getColumnDef(i);
+      (!(w != null && w.sortIconVisible) || w != null && w.sortIconVisible()) && (v = w == null ? void 0 : w.sortState);
+    }
+    const m = e.getValueAt(s, i), x = f ? "" : `${m}`, C = e.isRowChecked(s), y = this.dom.addColumnDiv(
+      {
+        parent: d,
+        geo: u,
+        rowIndex: s,
+        columnIndex: i,
+        areaIdent: t,
+        sideIdent: o,
+        text: x,
+        treeArrow: b,
+        tableOptions: this.tableOptions,
+        checkedType: C,
+        sortState: v
+      }
+    ), R = e.getTooltipAt(s, i);
+    R && this.dom.setAttribute(y, "title", R);
+    const A = this.tableModel.getColumnDef(i);
+    A && A.classes[t] && this.dom.addClasses(A.classes[t], y);
+    let M;
+    f && (M = f.render(y, s, i, t, e, m, this.dom.domService));
+    const F = e.getCustomClassesAt(s, i);
+    if (F.length && this.dom.addClasses(F, y), this.dom.addColumnBorderDivs(this.tableOptions, d, u, t, o), h && this.dom.addHorizontalBorder({ left: r, width: a, height: l, top: n + l }, d), this.getFocusModel && t === "body") {
+      const w = this.getFocusModel();
+      w != null && w.hasFocus(s, i) && this.dom.addFocusBorderDivs(d, u, {});
+    }
+    t === "header" && this.dom.setAttribute(y, "data-ge-action", "drag-column");
+    const H = e.getCustomStyleAt(s, i);
+    if (H)
+      for (const w in H)
+        this.dom.setStyle(y, w, H[w]);
+    return [y, M];
+  }
+  /**
+   * Applies CSS classes to an HTML element.
+   *
+   * @param {HTMLDivElement} ele - The HTML element to which CSS classes will be applied.
+   * @param {Object.<string, boolean>} cssClasses - An object containing CSS class names as keys and boolean values indicating whether to apply or remove the class.
+   * @protected
+   */
+  applyCssClasses(e, t = {}) {
+    e && Object.entries(t).forEach(([o, s]) => {
+      s ? this.dom.addClass(o, e) : this.dom.removeClass(o, e);
+    });
+  }
+  /**
+   * Retrieves the column widths of a table within a specified range.
+   *
+   * @param {number} startIndex - The index of the first column to retrieve the width of.
+   * @param {number} endIndex - The index of the last column to retrieve the width of.
+   *
+   * @return {number[]} An array containing the widths of the columns within the specified range.
+   */
+  getColumnWidths(e, t) {
+    const o = [];
+    for (let s = e; s <= t; s++)
+      o.push(this.tableModel.getColumnWidth(s));
+    return o;
+  }
+  /**
+   * Retrieves the heights of rows within a specified range.
+   *
+   * @param {number} startIndex - The index of the first row in the range.
+   * @param {number} endIndex - The index of the last row in the range.
+   * @param {AreaModelIf} areaModel - The area model.
+   * @return {number[]} - An array containing the heights of the rows within the specified range.
+   */
+  getRowHeights(e, t, o) {
+    const s = [];
+    for (let i = e; i <= t; i++)
+      s.push(o.getRowHeight(i));
+    return s;
+  }
+  /**
+   * Adjusts the position and size of the hover row based on the mouse move event.
+   *
+   * @param {GeMouseEvent} mouseMoveEvent - The mouse move event.
+   *
+   * @return {void}
+   */
+  adjustHoverRows(e) {
+    if (this.tableOptions.hoverRowVisible && e.rowIndex > -1) {
+      const t = this.hostElement.clientWidth, o = this.tableModel.getAreaModel("body").getRowHeight(e.rowIndex), s = e.rowTop + this.areaHeaderCenter.parent.clientHeight - this.scrollTop;
+      this.dom.applyStyle(this.hoverRow, {
+        left: "0",
+        top: s + "px",
+        width: t + "px",
+        height: o + "px",
+        display: "block"
+      });
+    } else
+      this.hideHoverRow();
+  }
+  /**
+   * Hides the hover row by applying 'display: none' style to it.
+   *
+   * @protected
+   * @function
+   * @name hideHoverRow
+   * @memberof ClassName
+   *
+   * @returns {void}
+   */
+  hideHoverRow() {
+    this.dom.applyStyle(this.hoverRow, {
+      display: "none"
+    });
+  }
+  /**
+   * Adjusts the position and size of the hover column based on the mouse move event.
+   *
+   * @param {GeMouseEvent} mouseMoveEvent - The mouse move event object.
+   */
+  adjustHoverColumns(e) {
+    if (this.tableOptions.hoverColumnVisible && e.rowIndex > -1) {
+      const t = this.hostElement.clientHeight, o = this.tableModel.getColumnWidth(e.columnIndex), s = this.areaBodyWestGeo.width, i = e.columnLeft + this.tableModel.getPadding().left - this.scrollLeft - s;
+      this.dom.applyStyle(this.hoverColumn, {
+        left: i + "px",
+        top: "0px",
+        width: o + "px",
+        height: t + "px",
+        display: "block"
+      });
+    } else
+      this.hideHoverColumn();
+  }
+  /**
+   * Hide hover column.
+   *
+   * This method hides the hover column by applying a style of 'display: none'
+   * to the element representing the hover column.
+   *
+   * @protected
+   * @memberof ClassName
+   */
+  hideHoverColumn() {
+    this.dom.applyStyle(this.hoverColumn, {
+      display: "none"
+    });
+  }
+  /**
+   * Executes a function after a specified delay, ensuring that the function is called only once within that delay period.
+   *
+   * @param {() => void} fn - The function to be executed.
+   * @param {number} [delay=1000] - The delay in milliseconds before executing the function.
+   *
+   * @return {undefined}
+   */
+  debounce(e, t = 1e3) {
+    this.debounceTimeout && clearTimeout(this.debounceTimeout), this.debounceTimeout = setTimeout(e.bind(this), t);
+  }
+  /**
+   * Adjusts the dragging column during a mouse move event.
+   *
+   * @param {GeMouseEvent} mouseMoveEvent - The mouse move event.
+   * @param {number} sourceColumnIndex - The index of the source column.
+   * @param {boolean} firstDraggingRendering - Indicates if it's the first rendering of the dragging column.
+   */
+  adjustDraggingColumn(e, t, o) {
+    var s, i;
+    if (this.dragging) {
+      const r = this.hostElement.clientHeight, a = this.storedColumnWidths[t];
+      if ((s = e.originalEvent) != null && s.clientX) {
+        const d = { left: ((i = e.originalEvent) == null ? void 0 : i.clientX) - a / 2, width: a, height: r, top: 0, index: t };
+        this.dom.applyStyle(this.draggingColumn, {
+          background: "rgba(128,128,128,0.2)",
+          display: "block",
+          overfllow: "clip"
+        }), this.dom.applyStyleInPx(this.draggingColumn, d), o && this.renderContentOfDraggingColumn(d);
+      }
+    } else
+      this.hideDraggingColumn();
+  }
+  /**
+   * Renders the content of a dragging column.
+   *
+   * @param {GeoData} columnGeo - The geographic data of the column.
+   *
+   * @returns {number} The y-coordinate of the rendered content.
+   */
+  renderContentOfDraggingColumn(e) {
+    const t = this.renderContentOfDraggingColumnForArea(e, "header", 0);
+    this.renderContentOfDraggingColumnForArea(e, "body", t);
+  }
+  /**
+   * Renders the content of the dragging column for a specific area.
+   *
+   * @param {GeoData} columnGeo - The geometry data of the dragging column.
+   * @param {AreaIdent} areaIdent - The identifier of the area.
+   * @param {number} [y=0] - The starting y-position.
+   * @return {number} The final y-position after rendering all the content.
+   */
+  renderContentOfDraggingColumnForArea(e, t, o = 0) {
+    const s = "center", i = this.tableModel.getAreaModel(t), r = i == null ? void 0 : i.getRowCount();
+    if (r) {
+      const a = e.index ?? 0, l = this.draggingColumn;
+      for (let n = 0; n < r; n++) {
+        const d = o, h = i.getRowHeight(n), c = { left: 0, width: e.width, height: h, top: d, index: n }, f = i.getValueAt(n, a), u = i.getCellRenderer(n, a), S = u ? "" : `${f}`, b = {
+          parent: l,
+          geo: c,
+          rowIndex: n,
+          columnIndex: a,
+          areaIdent: t,
+          sideIdent: s,
+          text: S
+        }, g = this.dom.addColumnDiv(b);
+        let v;
+        u && (v = u.render(g, n, a, t, i, f, this.dom.domService), v && this.cleanupFunctions[t].push(v));
+        const m = i.getCustomClassesAt(n, a);
+        m.length && this.dom.addClasses(m, g);
+        const x = this.tableModel.getColumnDef(a);
+        x && x.classes[t] && this.dom.addClasses(x.classes[t], g), this.dom.addColumnBorderDivs(this.tableOptions, l, c, t, s);
+        const C = i.getCustomStyleAt(n, a);
+        if (C)
+          for (const y in C)
+            this.dom.setStyle(g, y, C[y]);
+        o = o + h;
+      }
+    }
+    return o;
+  }
+  /**
+   * Hides the dragging column by applying a 'display: none' style to it.
+   * This method is protected and can only be accessed within the class.
+   *
+   * @return {void}
+   */
+  hideDraggingColumn() {
+    this.dom.applyStyle(this.draggingColumn, {
+      display: "none"
+    });
+  }
+  /**
+   * Renders a draggable target div element.
+   *
+   * @param {HTMLDivElement} parent - The parent element where the target div will be appended to.
+   * @param {number} left - The left position of the target div in pixels.
+   * @param {number} top - The top position of the target div in pixels.
+   * @param {number} width - The width of the target div in pixels.
+   * @param {number} height - The height of the target div in pixels.
+   * @return {HTMLDivElement} - The rendered draggable target div element.
+   */
+  renderDragTargetDiv(e, t, o, s, i) {
+    const r = this.dom.applyStylePosistionAbsolute(
+      this.dom.createDivWithClass("ge-table-drop-zone", e)
+    );
+    return this.dom.setStyle(r, "left", `${t}px`), this.dom.setStyle(r, "top", `${o}px`), this.dom.setStyle(r, "width", `${s}px`), this.dom.setStyle(r, "height", `${i}px`), r;
+  }
+  /**
+   * Render selected background div.
+   *
+   * @private
+   * @param {boolean} skip - Whether to skip rendering.
+   * @param {boolean} renderSelection - Whether to render the selection.
+   * @param {SideIdent} sideIdent - The side identifier.
+   * @param {AreaModelIf} areaModel - The area model.
+   * @param {number} rowIndex - The row index.
+   * @param {number} index - The index.
+   * @param {HTMLDivElement} parent - The parent div element.
+   * @param {number} left - The left position.
+   * @param {number} top - The top position.
+   * @param {number} width - The width of the div.
+   * @param {number} height - The height of the div.
+   * @returns {boolean} - Whether the cell is selected.
+   */
+  renderSelectedBackgroundDiv(e, t, o, s, i, r, a, l, n, d, h) {
+    let c = !1;
+    if (!e && t && s.isSelectable(i, r) && this.getSelectionModel) {
+      const f = this.getSelectionModel();
+      if (f) {
+        const u = f.getSelectionCount(i, r);
+        c = u > 0;
+        for (let S = 0; S < u; S++) {
+          const b = this.dom.applyStylePosistionAbsolute(
+            // ge-table-body-west-selected-range
+            this.dom.createDivWithClass(`ge-table-${s.areaIdent}-${o}-selected-range`, a)
+          );
+          this.dom.setStyle(b, "left", `${l}px`), this.dom.setStyle(b, "top", `${n}px`), this.dom.setStyle(b, "width", `${d}px`), this.dom.setStyle(b, "height", `${h}px`);
+        }
+      }
+    }
+    return c;
+  }
+  /**
+   * Renders a cell in the grid.
+   *
+   * @param {ArgsRenderCell} args - The arguments for rendering the cell.
+   * @param {AreaModel} args.areaModel - The area model of the grid.
+   * @param {string} args.areaIdent - The identifier of the area.
+   * @param {string} args.sideIdent - The identifier of the side.
+   * @param {number} args.rowIndex - The index of the row.
+   * @param {number} args.columnIndex - The index of the column.
+   * @param {number} args.left - The left position of the cell.
+   * @param {number} args.top - The top position of the cell.
+   * @param {number} args.width - The width of the cell.
+   * @param {number} args.height - The height of the cell.
+   * @param {HTMLElement} args.parent - The parent element of the cell.
+   * @param {boolean} args.cellSelected - Indicates if the cell is selected.
+   * @param {boolean} args.lastRowOfModel - Indicates if the cell is in the last row of the model.
+   *
+   * @returns {void}
+   */
+  renderCell({
+    areaModel: e,
+    areaIdent: t,
+    sideIdent: o,
+    rowIndex: s,
+    columnIndex: i,
+    left: r,
+    top: a,
+    width: l,
+    height: n,
+    parent: d,
+    cellSelected: h,
+    lastRowOfModel: c
+  }) {
+    const [f, u] = this.addAndRenderCellDiv({
+      areaModel: e,
+      areaIdent: t,
+      sideIdent: o,
+      rowIndex: s,
+      index: i,
+      left: r,
+      width: l,
+      height: n,
+      top: a,
+      parent: d,
+      lastRowOfModel: c
+    });
+    h && this.dom.addClass(`ge-table-${t}-${o}-selected-range`, f), u && this.cleanupFunctions[t].push(u);
+  }
+  /**
+   * Render the header cell resize handle.
+   *
+   * @param {ArgsRenderHeaderCellResizeHandle} args - The arguments for rendering the handle.
+   * @param {number} args.rowIndex - The index of the row.
+   * @param {number} args.columnIndex - The index of the column.
+   * @param {number} args.cellLeft - The left position of the cell.
+   * @param {number} args.cellTop - The top position of the cell.
+   * @param {number} args.cellWidth - The width of the cell.
+   * @param {number} args.cellHeight - The height of the cell.
+   * @param {HTMLElement} args.parent - The parent element to append the handle to.
+   *
+   * @return {void}
+   */
+  renderHeaderCellResizeHandle({ rowIndex: e, columnIndex: t, cellLeft: o, cellTop: s, cellWidth: i, cellHeight: r, parent: a }) {
+    const l = this.dom.domService, n = this.tableOptions.columnResizeHandleWidthInPx ?? 2, d = l.createElement("div");
+    l.setAttribute(d, "data-col-index", `${t}`), l.setAttribute(d, "data-row-index", `${e}`), l.setAttribute(d, "data-area", "header"), l.setAttribute(d, "data-ge-action", "resize-column"), l.addClass(d, "ge-table-column-resize-handle"), l.setStyle(d, "display", "clip"), l.setStyle(d, "position", "absolute"), l.setStyle(d, "cursor", "col-resize"), l.setStyle(d, "left", `${o + i - n}px`), l.setStyle(d, "top", `${s}px`), l.setStyle(d, "width", `${n}px`), l.setStyle(d, "height", `${r}px`), l.appendChild(a, d);
+  }
+}
+class me {
+  constructor(e, t) {
+    this.columnIndex = e, this.sortState = t;
+  }
+}
+class ye {
+  constructor(e) {
+    this.tableScope = e, this.tableScope.hostElement.addEventListener("change", this.onHostElementChanged.bind(this));
+  }
+  /**
+   * Handles the onHostElementChanged event.
+   * In case that the element is an input field, the tableScope.updateModelValueAfterEdit() method is triggered.
+   *
+   * @param {Event} event - The event object.
+   *
+   * @return {void}
+   */
+  onHostElementChanged(e) {
+    if (e.target instanceof HTMLInputElement || e.target instanceof HTMLSelectElement || e.target instanceof HTMLTextAreaElement) {
+      const t = e.target, o = t.getAttribute("data-area"), s = t.getAttribute("data-row-index"), i = t.getAttribute("data-col-index");
+      if (o && s && i) {
+        const r = V(o), a = Number(s), l = Number(i);
+        this.tableScope.updateModelValueAfterEdit(r, a, l, t.value);
+      }
+    }
+  }
+}
+class ve {
+  constructor(e = -1, t = -1) {
+    this.rowIndex = e, this.columnIndex = t;
+  }
+}
+class N {
+  constructor(e) {
+    this.cells = e;
+  }
+  static createSingle(e, t) {
+    return new N([new ve(e, t)]);
+  }
+}
+class Ce {
+  constructor(e) {
+    var t, o;
+    this.tableScope = e, (t = this.tableScope.tableOptions) != null && t.getSelectionModel && (this.getSelectionModel = this.tableScope.tableOptions.getSelectionModel), (o = this.tableScope.tableOptions) != null && o.getFocusModel && (this.getFocusModel = this.tableScope.tableOptions.getFocusModel);
+  }
+  onMouseClicked(e, t) {
+    var i, r, a, l, n, d, h;
+    let o = !1, s = !1;
+    if (this.getSelectionModel && this.getFocusModel) {
+      const c = this.getSelectionModel(), f = this.getFocusModel();
+      c && f && (f.hasFocus(e.rowIndex, e.columnIndex) || (f.setFocus(e.rowIndex, e.columnIndex), this.tableScope.onFocusChanged(f), o = !0), (i = e.originalEvent) != null && i.shiftKey || c.hasSelection() && (c.clear(), o = !0), (r = e.originalEvent) != null && r.shiftKey && this.previousEvt ? (c.addSelection(this.createRangeByEvents(e, this.previousEvt)), s = !0, o = !0) : (a = e.originalEvent) != null && a.altKey && ((l = e.originalEvent) != null && l.ctrlKey || (n = e.originalEvent) != null && n.metaKey) ? (c.removeSelection(E.singleCell(e.rowIndex, e.columnIndex)), s = !0, o = !0) : (d = e.originalEvent) != null && d.ctrlKey || (h = e.originalEvent) != null && h.metaKey ? (c.addSelection(E.singleCell(e.rowIndex, e.columnIndex)), s = !0, o = !0) : (c.firstClick(e.rowIndex, e.columnIndex), o = !0), this.tableScope.onSelectionChanged(c));
+    }
+    return s ? this.previousEvt = void 0 : this.previousEvt = e == null ? void 0 : e.clone(), o;
+  }
+  onActionTriggered(e) {
+    if (this.getSelectionModel && this.getFocusModel) {
+      const t = this.getSelectionModel(), o = this.getFocusModel();
+      if (t && o) {
+        if (e === "SELECT_ALL")
+          return t.selectAll(), this.tableScope.repaint(), !0;
+        if (e === "DESELECT_ALL")
+          return t.clear(), this.tableScope.repaint(), !0;
+        if (e === "TOGGLE_SELECTION") {
+          const [s, i] = o.getFocus();
+          return t.togglePoint(s, i), this.tableScope.repaint(), !0;
+        }
+      }
+    }
+    return !1;
+  }
+  createRangeByEvents(e, t) {
+    t || (t = e);
+    const o = Math.min(e.rowIndex, t == null ? void 0 : t.rowIndex), s = Math.max(e.rowIndex, t == null ? void 0 : t.rowIndex), i = Math.min(e.columnIndex, t == null ? void 0 : t.columnIndex), r = Math.max(e.columnIndex, t == null ? void 0 : t.columnIndex);
+    return E.create({
+      rowIndex1: o,
+      columnIndex1: i,
+      rowIndex2: s,
+      columnIndex2: r
+    });
+  }
+}
+class we {
+  get() {
+    return {
+      f2: "START_EDITING",
+      space: "TOGGLE_SELECTION",
+      "ctrl+num_add": "SELECT_ALL",
+      "ctrl+a": "SELECT_ALL",
+      "ctrl+shift+a": "DESELECT_ALL",
+      "ctrl+x": "DESELECT_ALL",
+      "ctrl+num_subtract": "DESELECT_ALL",
+      "meta -": "DESELECT_ALL",
+      arrowup: "NAVIGATE_UP",
+      arrowdown: "NAVIGATE_DOWN",
+      arrowleft: "NAVIGATE_LEFT",
+      arrowright: "NAVIGATE_RIGHT",
+      "meta+c": "COPY_2_CLIPBOARD",
+      "ctrl+c": "COPY_2_CLIPBOARD"
+    };
+  }
+}
+class xe {
+  get() {
+    return {
+      f2: "START_EDITING",
+      space: "TOGGLE_SELECTION",
+      "ctrl+num_add": "SELECT_ALL",
+      "meta+a": "SELECT_ALL",
+      "ctrl+a": "SELECT_ALL",
+      "meta+x": "DESELECT_ALL",
+      "meta+shift+a": "DESELECT_ALL",
+      "ctrl+shift+a": "DESELECT_ALL",
+      "ctrl+num_subtract": "DESELECT_ALL",
+      "ctrl -": "DESELECT_ALL",
+      arrowup: "NAVIGATE_UP",
+      arrowdown: "NAVIGATE_DOWN",
+      arrowleft: "NAVIGATE_LEFT",
+      arrowright: "NAVIGATE_RIGHT",
+      "meta+c": "COPY_2_CLIPBOARD",
+      "ctrl+c": "COPY_2_CLIPBOARD"
+    };
+  }
+}
+class Ee {
+  constructor(e) {
+    this.tableScope = e, this.shortcutActionIdMapping = {}, this.listener = [], this.listener.push(e), this.init();
+  }
+  /**
+   * Adds a listener to the list of listeners.
+   *
+   * @param {OnActionTriggeredIf} listener - The listener to be added.
+   * @returns {void}
+   */
+  addListener(e) {
+    this.listener.includes(e) || this.listener.push(e);
+  }
+  /**
+   * Initializes the ShortcutService by assigning shortcut action id mappings based on the current operating system.
+   * Also adds key down event listener to the table host element.
+   */
+  init() {
+    this.assignPredefinedSystemShortcutMappings(), Object.assign(this.shortcutActionIdMapping, this.tableScope.tableOptions.shortcutActionIdMapping), this.isDebug() && console.debug("ShortcutService", this.shortcutActionIdMapping), this.tableScope.hostElement.addEventListener("keydown", this.onKeyDown.bind(this));
+  }
+  assignPredefinedSystemShortcutMappings() {
+    this.isMacintosh() ? Object.assign(this.shortcutActionIdMapping, new xe().get()) : Object.assign(this.shortcutActionIdMapping, new we().get());
+  }
+  isMacintosh() {
+    return navigator.platform.indexOf("Mac") > -1;
+  }
+  isDebug() {
+    return this.isLocalhost();
+  }
+  isLocalhost() {
+    return location.hostname === "localhost" || location.hostname === "127.0.0.1";
+  }
+  onKeyDown(e) {
+    const t = this.findEntity(e);
+    t && this.emit(t) && (e.preventDefault(), e.stopPropagation());
+  }
+  emit(e) {
+    this.isDebug() && console.debug("ShortcutService emit      :", e);
+    let t = !1;
+    for (const o of this.listener)
+      o.onActionTriggered(e) && (t = !0);
+    return t;
+  }
+  findEntity(e) {
+    const t = this.getTokenByEvent(e);
+    this.isDebug() && console.debug("ShortcutService tokens    :", t);
+    for (const o in this.shortcutActionIdMapping) {
+      const s = o.replace(/opt/g, "alt").replace(/cmd/g, "meta").split(/[+ ]/g).sort();
+      if (this.areTokensEquals(t, s))
+        return this.shortcutActionIdMapping[o];
+    }
+  }
+  areTokensEquals(e, t) {
+    if (e.length !== t.length || e.length === 0)
+      return !1;
+    for (let o = 0; o < e.length; o++)
+      if (e[o] !== t[o])
+        return !1;
+    return !0;
+  }
+  getTokenByEvent(e) {
+    const t = [];
+    return e.altKey && t.push("alt"), e.shiftKey && t.push("shift"), e.ctrlKey && t.push("ctrl"), e.metaKey && t.push("meta"), e.code && t.push(e.code.toLowerCase().replace(/key/g, "")), t.sort();
+  }
+  /**
+   * Retrieves the shortcut action mapping object.
+   *
+   * @returns {ShortcutActionIdMapping} - The shortcut action mapping object.
+   */
+  getShortcutActionMapping() {
+    return this.shortcutActionIdMapping;
+  }
+}
+class K {
+  onCheckboxChanged(e) {
+  }
+  onContextmenu(e) {
+  }
+  onModelChanged(e) {
+  }
+  onMouseClicked(e) {
+  }
+  onMouseDragging(e) {
+  }
+  onMouseDraggingEnd(e) {
+  }
+  onMouseMoved(e) {
+  }
+  onSelectionChanged(e) {
+  }
+  onFocusChanged(e) {
+  }
+}
+class Z {
+  setStyle(e, t, o) {
+    return e.style[t] = o, e;
+  }
+  appendText(e, t) {
+    const o = this.createText(t);
+    return this.appendChild(e, o), o;
+  }
+  addClass(e, t) {
+    return t.includes(" ") ? t.split(" ").forEach((o) => e.classList.add(o)) : e.classList.add(t), e;
+  }
+  removeClass(e, t) {
+    return t.includes(" ") ? t.split(" ").forEach((o) => e.classList.remove(o)) : e.classList.remove(t), e;
+  }
+  appendChild(e, t) {
+    e.appendChild(t);
+  }
+  createElement(e) {
+    return document.createElement(e);
+  }
+  createText(e) {
+    return document.createTextNode(e);
+  }
+  setAttribute(e, t, o) {
+    e.setAttribute(t, o);
+  }
+}
+class Ae {
+  render(e, t, o, s, i, r, a) {
+    if (i.isEditable(t, o)) {
+      a.addClass(e, "ge-table-row-input-div");
+      const l = i.getValueAt(t, o);
+      e.innerHTML = `
+            <input
+                type="text"
+                value="${l}"
+                autofocus
+                onfocus="this.setSelectionRange(0, this.value.length)"
+                data-listen="change"
+                data-area="${s}"
+                data-row-index="${t}"
+                data-col-index="${o}"
+                data-input-type="text"
+                style="width:calc(100% - 8px);height:100%;border:0;padding:0 0 0 8px;"
+                class="ge-table-cell-editor-input">`;
+    }
+  }
+}
+class Me {
+  constructor(e = "none", t = "single") {
+    this.selectionType = e, this.selectionMode = t, this.ranges = [], this.negativeRanges = [], this.allSelected = !1, this.silent = !1, this.listenerArr = [];
+  }
+  getEventSelectionChangedListeners() {
+    return this.listenerArr;
+  }
+  addEventSelectionChangedListener(e) {
+    this.listenerArr.includes(e) || this.listenerArr.push(e);
+  }
+  removeEventSelectionChangedListener(e) {
+    const t = this.listenerArr.indexOf(e, 0);
+    t > -1 && this.listenerArr.splice(t, 1);
+  }
+  //@AvoidDoubleExecution(100)
+  fireChangeEvent() {
+    this.silent || this.listenerArr.forEach((e) => e.onSelectionChanged(this));
+  }
+  firstClick(e, t) {
+    this.selectionType === "row" ? this.addRange(E.singleRow(e)) : this.selectionType === "column" && this.addRange(E.singleColumn(t));
+  }
+  getSelectionCount(e, t) {
+    let o = 0;
+    for (const s of this.ranges)
+      s.isInRange(e, t) && o++;
+    return this.allSelected && o++, this.isInNegativeRange(e, t) && (o = 0), o;
+  }
+  isInNegativeRange(e, t) {
+    for (const o of this.negativeRanges)
+      if (o.isInRange(e, t))
+        return !0;
+    return !1;
+  }
+  getRanges() {
+    return this.ranges;
+  }
+  clear() {
+    this.ranges = [], this.negativeRanges = [], this.allSelected = !1, this.fireChangeEvent();
+  }
+  hasSelection() {
+    return this.allSelected || !!this.ranges.length;
+  }
+  hasNoSelection() {
+    return !this.hasSelection();
+  }
+  /**
+   * Retrieves the merged row indices from the given range selection.
+   *
+   * @returns {number[]} Array of merged row indices
+   */
+  getMergedRowIndices() {
+    const e = /* @__PURE__ */ new Set();
+    for (const t of this.ranges)
+      for (let o = t.r1; o <= t.r2; o++)
+        !e.has(o) && !this.isInNegativeRange(o, 0) && e.add(o);
+    return Array.from(e);
+  }
+  selectAll() {
+    this.allSelected = !0, this.fireChangeEvent();
+  }
+  isAllSelected() {
+    return this.allSelected;
+  }
+  addSelection(e) {
+    this.addRange(e), this.fireChangeEvent();
+  }
+  removeSelection(e) {
+    if (this.selectionType === "none")
+      return;
+    let t = e;
+    this.selectionType === "row" ? t = E.singleRow(e.r1) : this.selectionType === "column" && (t = E.singleColumn(e.c1)), this.negativeRanges.push(t), this.fireChangeEvent();
+  }
+  togglePoint(e, t) {
+    this.getSelectionCount(e, t) > 0 ? this.removeSelection(E.singleCell(e, t)) : this.addSelection(E.singleCell(e, t));
+  }
+  isSelected(e, t) {
+    return this.getSelectionCount(e, t) > 0;
+  }
+  addRange(e) {
+    this.selectionType !== "none" && (this.allSelected = !1, this.selectionMode === "single" && (this.ranges = []), this.selectionType === "row" ? (e.c1 = 0, e.c2 = Number.MAX_SAFE_INTEGER) : this.selectionType === "column" ? (e.r1 = 0, e.r2 = Number.MAX_SAFE_INTEGER) : this.selectionType === "cell" ? (e.r2 = e.r1, e.c2 = e.c1) : this.selectionType, this.ranges.push(e), this.fireChangeEvent());
+  }
+}
+class Re {
+  constructor(e = "none") {
+    this.selectionType = e, this.rowIndex = -1, this.columnIndex = -1, this.changed = !1, this.listenerArr = [];
+  }
+  getEventFocusChangedListeners() {
+    return this.listenerArr;
+  }
+  addEventFocusChangedListener(e) {
+    this.listenerArr.includes(e) || this.listenerArr.push(e);
+  }
+  removeEventFocusChangedListener(e) {
+    const t = this.listenerArr.indexOf(e, 0);
+    t > -1 && this.listenerArr.splice(t, 1);
+  }
+  //@AvoidDoubleExecution(100)
+  fireChangeEvent() {
+    this.listenerArr.forEach((e) => e.onFocusChanged(this));
+  }
+  clearChanged() {
+    this.changed = !1;
+  }
+  hasChanged() {
+    return this.changed;
+  }
+  clear() {
+    this.rowIndex = -1, this.columnIndex = -1, this.fireChangeEvent();
+  }
+  setFocus(e, t) {
+    (this.rowIndex !== e || this.columnIndex !== t) && (this.rowIndex = e, this.columnIndex = t, this.changed = !0, this.fireChangeEvent());
+  }
+  hasFocus(e, t) {
+    return this.rowIndex === e && this.columnIndex === t;
+  }
+  getFocus() {
+    return [this.rowIndex, this.columnIndex];
+  }
+}
+class ee {
+  constructor(e = new D(
+    "❯",
+    "",
+    ["gt-table-icon-expanded"]
+  ), t = new D(
+    "❯",
+    "transform: rotate(180deg) translate(-100%, -100%); transform-origin: 0 0;",
+    ["ge-table-icon-collapsed"]
+  )) {
+    this.iconExpanded = e, this.iconCollapsed = t;
+  }
+  // `⊖ `,  `⊕ `;
+}
+const Te = new Me(), De = new Re("cell");
+class te {
+  constructor() {
+    this.overflowX = "auto", this.overflowY = "auto", this.horizontalBorderVisible = !0, this.verticalBorderVisible = !0, this.footerSeparatorBorderVisible = !0, this.headerSeparatorBorderVisible = !0, this.fixedEastSeparatorBorderVisible = !0, this.fixedWestSeparatorBorderVisible = !0, this.tableTopBorderVisible = !0, this.tableBottomBorderVisible = !0, this.hoverRowVisible = !0, this.hoverColumnVisible = !0, this.columnsResizable = !0, this.columnsDraggable = !0, this.columnResizeHandleWidthInPx = 4, this.defaultRowHeights = {
+      header: 34,
+      body: 34,
+      footer: 34
+    }, this.footerVerticalSeparator = !1, this.headerToggleExpandCollapseIcons = !1, this.headerVerticalSeparator = !1, this.treeOptions = new J(), this.headerGroupOptions = new ee(), this.showCheckboxWihoutExtraColumn = !1, this.externalFilterFunction = void 0, this.sortedOptions = new Q(), this.sortOrder = ["asc", "desc"], this.getEditRenderer = (e, t) => new Ae(), this.getSelectionModel = () => Te, this.getFocusModel = () => De;
+  }
+}
+const I = class I {
+  /**
+   * Returns the content to be copied based on the provided table model, selection model, and focus model.
+   *
+   * @param {TableModelIf} tableModel - The table model for data retrieval.
+   * @param {SelectionModelIf} selectionModel - The selection model to determine the selected range.
+   * @param {FocusModelIf} focusModel - The focus model to determine the focused cell.
+   * @return {Promise<string>} A promise that resolves to the copied content as a string.
+   * @throws {string} Throws an error if neither selection nor focus is defined.
+   */
+  createContent(e, t, o) {
+    return new Promise((s, i) => {
+      if (t != null && t.hasSelection()) {
+        const r = this.mergeRanges(t.getRanges());
+        if (r) {
+          r.c2 = Math.min(r.c2, e.getColumnCount() - 1), r.r2 = Math.min(r.r2, e.getBodyModel().getRowCount() - 1);
+          const a = [];
+          for (let l = r.r1; l <= r.r2; l++) {
+            const n = [];
+            for (let d = r.c1; d <= r.c2; d++) {
+              const h = t.isSelected(l, d) ? e.getBodyModel().getTextValueAt(l, d) : "";
+              n.push(h);
+            }
+            a.push(n.join(I.columnSeparatorChar));
+          }
+          return s(a.join(I.rowSeparatorChar));
+        }
+      }
+      if (o) {
+        const [r, a] = o.getFocus(), l = e.getBodyModel().getTextValueAt(r, a);
+        return s(l);
+      }
+      i("Cannot copy, neither selection nor focus defined.");
+    });
+  }
+  /**
+   * Copy the provided content to the clipboard.
+   *
+   * @param {string} content - The content to be copied.
+   * @return {Promise<void>} A promise that resolves when the content has been successfully copied to the clipboard.
+   */
+  copyContent(e) {
+    return navigator.clipboard.writeText(e);
+  }
+  /**
+   * Asynchronously copies the content of a table to the clipboard.
+   *
+   * @param {TableModelIf} tableModel - The table model to copy from.
+   * @param {SelectionModelIf} selectionModel - The selection model of the table.
+   * @param {FocusModelIf} focusModel - The focus model of the table.
+   * @returns {Promise<string>} A promise that resolves with the copied text if successful, or rejects if an error occurs.
+   */
+  copyToClipboard(e, t, o) {
+    return new Promise((s, i) => {
+      this.createContent(
+        e,
+        t,
+        o
+      ).then((r) => {
+        r && this.copyContent(r).then((a) => {
+          s(r);
+        }).catch((a) => {
+          i();
+        });
+      }).catch((r) => {
+        i();
+      });
+    });
+  }
+  /**
+   * Merges an array of CellRanges into a single merged CellRange.
+   *
+   * @param {CellRange[]} ranges - The array of CellRanges to be merged.
+   * @return {CellRange | undefined} - The merged CellRange, or undefined if the ranges array is empty.
+   */
+  mergeRanges(e) {
+    let t;
+    for (const o of e)
+      t ? (t.r1 = Math.min(t.r1, o.r1), t.c1 = Math.min(t.c1, o.c1), t.r2 = Math.max(t.r2, o.r2), t.c2 = Math.max(t.c2, o.c2)) : t = new E(o.r1, o.c1, o.r2, o.c2);
+    return t;
+  }
+};
+I.columnSeparatorChar = "	", I.rowSeparatorChar = `
+`;
+let L = I;
+class j extends fe {
+  constructor(e, t, o, s, i, r = new L()) {
+    var n;
+    if (super(e, t, new le(o), s), this.eventListener = i, this.copyService = r, this.licenseManager = k.getInstance(), this.selectionService = new Ce(this), this.api = new de(this), this.mouseStartAction = "", this.mouseStartWidth = -1, this.mouseStartColumnIndex = -1, this.dragFrom = -1, this.dragTo = -1, this.lastDragFrom = -1, this.lastDragTo = -1, this.firstDraggingRendering = !0, i || (this.eventListener = new K()), (n = this.tableOptions) != null && n.autoRestoreOptions) {
+      const d = this.tableOptions.autoRestoreOptions, h = d.getStorageKeyFn;
+      h && (d.autoRestoreScrollPosition && (this.storeScrollPosStateService = new he(h)), d.autoRestoreCollapsedExpandedState && (this.storeStateCollapsedExpandService = new ge(h)), d.autoRestoreSortingState && (this.storeSortingService = new pe(h)));
+    }
+    this.mouseHandler = new ne(this), this.inputHandler = new ye(this), this.shortcutService = new Ee(this), this.shortcutService.addListener(this.selectionService);
+    const a = this.getSelectionModel ? this.getSelectionModel() : void 0;
+    a && a.addEventSelectionChangedListener(this);
+    const l = this.getFocusModel ? this.getFocusModel() : void 0;
+    l && l.addEventFocusChangedListener(this);
+  }
+  /**
+   * Creates a TableScope instance.
+   *
+   * @param {HTMLDivElement} hostElement - The HTML div element that will contain the table.
+   * @param {TableModelIf} tableModel - The table model object.
+   * @param {TableOptionsIf} [tableOptions=new TableOptions()] - The optional table options object.
+   * @param {EventListenerIf} [eventListener=new EventAdapter()] - The optional event listener object.
+   * @param {DomServiceIf} [domService=new SimpleDomService()] - The optional DOM service object.
+   * @param {CopyServiceIf} [copyService=new CopyService()] - The optional copy service object.
+   *
+   * @return {TableScope} - The newly created TableScope instance.
+   */
+  static create(e, t, o = new te(), s = new K(), i = new Z(), r = new L()) {
+    return new j(e, t, i, o, s, r);
+  }
+  /**
+   * Triggers an action based on the provided actionId.
+   *
+   * This function can be invoked manually via the table API or by keyboard shortcuts.
+   *
+   * @param {ActionId} actionId - The identifier of the action to be triggered.
+   * @return {boolean} - Returns true if the action was triggered successfully, false otherwise.
+   */
+  onActionTriggered(e) {
+    if (e === "NAVIGATE_DOWN" && this.changeFocusCell(0, 1) || e === "NAVIGATE_UP" && this.changeFocusCell(0, -1) || e === "NAVIGATE_LEFT" && this.changeFocusCell(-1, 0) || e === "NAVIGATE_RIGHT" && this.changeFocusCell(1, 0))
+      return !0;
+    if (e === "START_EDITING" && this.getFocusModel) {
+      const t = this.getFocusModel();
+      if (t) {
+        const [o, s] = t.getFocus();
+        this.tableModel.getBodyModel().isEditable(o, s) && (this.clearSelection(), this.initRenderEditor(o, s));
+      }
+      return !0;
+    }
+    if (e === "COPY_2_CLIPBOARD") {
+      const t = this.getSelectionModel ? this.getSelectionModel() : void 0, o = this.getFocusModel ? this.getFocusModel() : void 0;
+      this.copyService.createContent(this.tableModel, t, o).then((s) => this.copyService.copyContent(s));
+    }
+    return !1;
+  }
+  updateModelValueAfterEdit(e, t, o, s) {
+    e === "body" && this.tableModel.getAreaModel(e).setValue(t, o, s) && (this.resetEditorRenderer(), this.repaint(), this.eventListener.onModelChanged(N.createSingle(t, o)), this.hostElement.focus());
+  }
+  /**
+   * Retrieves the TableApi object.
+   *
+   * @return {TableApi} The TableApi object.
+   */
+  getApi() {
+    return this.api;
+  }
+  /**
+   * Initializes the table. Called by the table component.
+   *
+   * @function firstInit
+   * @memberof TableScope
+   *
+   * @returns {TableScope} This instance of the table scope.
+   */
+  firstInit() {
+    var e;
+    return this.tableModel.init(), (e = this.tableOptions) != null && e.externalFilterFunction && this.externalFilterChanged(!1), this.autoRestoreCollapsedExpandedState(), this.autoRestoreSortingState(), this.resetSizeOfWrapperDiv(), this.adjustContainersAndRows(), this.autoRestoreScrollPosition(), this;
+  }
+  /**
+   * Creates a GeMouseEvent object based on a MouseEvent.
+   *
+   * @param {MouseEvent} mouseEvent - The MouseEvent object to create the GeMouseEvent from.
+   * @return {GeMouseEvent} - The created GeMouseEvent object.
+   */
+  createGeMouseEvent(e) {
+    const t = new _();
+    if (t.originalEvent = e, e) {
+      const o = e.target;
+      if ([t.areaIdent, t.sideIdent] = this.getAreaAndSideIdentByAttr(o), t.rowIndex = this.getNumberByAttr(o, "data-row-index"), t.columnIndex = this.getNumberByAttr(o, "data-col-index"), t.action = this.getStringByAttr(o, "data-ge-action"), t.areaIdent) {
+        const s = this.tableModel.getAreaModel(t.areaIdent);
+        t.rowTop = s.getYPosByRowIndex(t.rowIndex);
+      }
+      if (t.columnLeft = this.tableModel.getXPosByColumnIndex(t.columnIndex), e.ctrlKey && e.altKey) {
+        const s = e.clientY - this.hostElement.offsetTop - this.areaHeaderCenter.parent.clientHeight, i = e.clientX - this.hostElement.offsetLeft - this.areaBodyWestGeo.width;
+        this.debugOnce(i, s);
+      }
+    }
+    return t;
+  }
+  /**
+   * Handles the mouse down event.
+   *
+   * @param {GeMouseEvent} mouseEvent - The mouse event object.
+   * @return {void}
+   */
+  onMouseDown(e) {
+    e.columnIndex > -1 && e.action && ["resize-column", "drag-column"].includes(e.action) && (this.mouseStartWidth = this.tableModel.getColumnWidth(e.columnIndex), this.mouseStartAction = e.action, this.mouseStartColumnIndex = e.columnIndex, this.mouseStartAction === "drag-column" && (this.firstDraggingRendering = !0, this.dragFrom = this.mouseStartColumnIndex));
+  }
+  /**
+   * Handles mouse dragging on the frame.
+   *
+   * @param {GeMouseEvent} mouseEvent - The mouse event object.
+   * @param startMouseEvent
+   */
+  mouseDraggingOnFrame(e, t) {
+    this.eventListener.onMouseDragging(e), this.mouseEvent = e, this.mouseStartColumnIndex > -1 && this.mouseStartAction === "resize-column" && this.tableOptions.columnsResizable ? this.resizeColumn(e) : this.mouseStartAction === "drag-column" && e.columnIndex > -1 && this.tableOptions.columnsDraggable && (this.draggingTargetColumnIndex = e.columnIndex, this.dragTo = this.draggingTargetColumnIndex, this.dragFrom > -1 && this.dragTo > -1 && this.dragFrom !== this.dragTo && (this.lastDragFrom === this.dragTo && this.lastDragTo === this.dragFrom || (this.tableModel.changeColumnOrder(this.dragFrom, this.dragTo), this.lastDragFrom = this.dragFrom, this.lastDragTo = this.dragTo, this.dragFrom = this.dragTo, this.resetSizeOfWrapperDiv(), this.adjustContainersAndRows())), t && (this.adjustDraggingColumn(e, t.columnIndex, this.firstDraggingRendering), this.firstDraggingRendering = !1), this.repaint());
+  }
+  /**
+   * Handles the end of mouse dragging event on a frame.
+   *
+   * @param {GeMouseEvent} mouseEvent - The mouse event object.
+   *
+   * @returns {void}
+   */
+  mouseDraggingEndOnFrame(e) {
+    this.eventListener.onMouseDraggingEnd(e), this.draggingTargetColumnIndex = -1, this.mouseStartAction === "resize-column" ? this.resizeColumn(e) : this.mouseStartAction === "drag-column" && (this.hideDraggingColumn(), this.repaint()), this.mouseStartWidth = -1, this.mouseStartColumnIndex = -1, this.dragFrom = -1, this.dragTo = -1, this.firstDraggingRendering = !0, this.mouseStartAction = "";
+  }
+  /**
+   * Handles the mouse move event.
+   *
+   * @param {GeMouseEvent} mouseMoveEvent - The mouse move event object.
+   * @return {void}
+   */
+  mouseMove(e) {
+    this.eventListener.onMouseMoved(e), this.adjustHoverRows(e), this.adjustHoverColumns(e);
+  }
+  /**
+   * Triggers the context menu event based on the mouse move event.
+   *
+   * @param {GeMouseEvent} mouseMoveEvent - The mouse move event object.
+   * @return {void}
+   */
+  contextmenu(e) {
+    this.eventListener.onContextmenu(e);
+  }
+  /**
+   * Toggles the expand or collapse state of all items in the body area model.
+   *
+   * @param {boolean} [expand=true] - Whether to expand or collapse all items. Default is true.
+   *
+   * @return {void}
+   */
+  toggleExpandCollapseAll(e = !0) {
+    var o;
+    const t = this.tableModel.getBodyModel();
+    W(t) && (t.toggleExpandCollapseAll(e), this.repaint(), (o = this.storeStateCollapsedExpandService) == null || o.collapsedStateAll(e));
+  }
+  /**
+   * Toggles the checkbox state of a specific row in a table.
+   *
+   * @param {number} rowIdx - The index of the row to toggle the checkbox state.
+   * @param {number} _colIdx - The index of the column. This parameter is unused.
+   * @param {AreaIdent} areaIdent - The identifier of the table area.
+   *
+   * @return {void} - This method does not return anything.
+   */
+  toggleRowCheckbox(e, t, o) {
+    var l;
+    const s = this.tableModel.getAreaModel(o), i = s.isRowChecked(e), r = i === void 0 || i === "semi" || i === "none";
+    s.setRowChecked(e, r), this.repaint();
+    const a = (l = s.rowSelectionModel) == null ? void 0 : l.getCheckedRows();
+    this.eventListener.onCheckboxChanged(a || []);
+  }
+  /**
+   * Handle mouse click events.
+   *
+   * @param {GeMouseEvent} evt - The mouse click event.
+   * @param {GeMouseEvent | undefined} previousEvt - The previous mouse click event, if any.
+   * @returns {void}
+   */
+  onMouseClicked(e, t) {
+    let o = this.selectionService.onMouseClicked(e, t);
+    if (!o && this.getFocusModel) {
+      this.resetEditorRenderer();
+      const s = this.getFocusModel();
+      s && (o = s.hasChanged(), s.clearChanged());
+    }
+    return o;
+  }
+  debounceRepaint() {
+    this.debounce(this.repaint.bind(this), 1);
+  }
+  publishGeMouseEvent(e) {
+    this.eventListener.onMouseClicked(e);
+  }
+  onFocusChanged(e) {
+    this.eventListener.onFocusChanged(e);
+  }
+  onSelectionChanged(e) {
+    this.eventListener.onSelectionChanged(e);
+  }
+  /**
+   * Updates the table (repaint) when an external filter is changed.
+   *
+   * @param {boolean} clearSelection - Indicates whether to clear the selection model or not. Default value is true.
+   * @return {void}
+   */
+  externalFilterChanged(e = !0) {
+    const t = this.tableOptions.externalFilterFunction;
+    t && (e && this.clearSelectionModel(), this.tableModel.externalFilterChanged(t), this.scrollViewport.scrollTo(0, 0), this.tableModel.recalcHeightAndPadding(), this.resetSizeOfWrapperDiv(), this.repaint());
+  }
+  /**
+   * Handle the double click event on the table header.
+   *
+   * @param {MouseEvent} event - The mouse event that triggered the double click.
+   * @param {number} _rowIdx - The row index of the header.
+   * @param {number} colIdx - The column index of the header.
+   *
+   * @return {void}
+   */
+  onHeaderDblClicked(e, t, o) {
+    var i, r;
+    const s = this.tableModel.getColumnDef(o);
+    if (s != null && s.sortable && s.sortable()) {
+      e.preventDefault(), e.stopPropagation();
+      const a = s.sortStatesOrder ? s.sortStatesOrder : this.tableOptions.sortOrder, l = s.sortState ?? "", n = a[(a.indexOf(l) + 1) % a.length], d = new me(o, n);
+      this.tableModel.doSort([d]) && ((i = this.tableModel.getColumnDefs()) == null || i.forEach((c) => c.sortState = ""), s.sortState = n), this.repaint(), (r = this.storeSortingService) == null || r.setSortItems([d]);
+    }
+  }
+  /**
+   * Scrolls the viewport to the specified pixel coordinates.
+   *
+   * @param {number} px - The horizontal pixel coordinate to scroll to.
+   * @param {number} py - The vertical pixel coordinate to scroll to.
+   *
+   * @return {void}
+   */
+  scrollToPixel(e, t) {
+    this.scrollViewport.scrollTo(e, t);
+  }
+  /**
+   * Scrolls to the specified index in the table.
+   *
+   * @param {number} _indexX - The horizontal index of the table where scrolling is needed.
+   * @param {number} indexY - The vertical index of the table where scrolling is needed.
+   * @return {void}
+   */
+  scrollToIndex(e, t) {
+    const s = this.tableModel.getAreaModel("body").getYPosByRowIndex(t);
+    this.scrollToPixel(0, s);
+  }
+  /**
+   * Sets the selection model for the table.
+   *
+   * @param {SelectionModel} sm - The selection model to be set.
+   * @param {boolean} rerender - Optional parameter indicating whether to rerender the table after setting the selection model. Default value is false.
+   *
+   * @return {void} - This method does not return any value.
+   */
+  setSelectionModel(e, t = !1) {
+    const o = () => e;
+    this.tableOptions.getSelectionModel = o, this.getSelectionModel = o, this.selectionService.getSelectionModel = o, t && this.repaint();
+  }
+  toggleHeaderGroup(e) {
+    const t = this.tableModel.getAreaModel("header");
+    "columnDefs" in this.tableModel && (this.tableModel.columnDefs = t.toggleHeaderGroup(e), console.info("####### !!!!!! *******, this.tableModel.columnDefs")), this.firstInit();
+  }
+  /**
+   * Retrieves the selection model.
+   * @returns {SelectionModelIf | undefined} The selection model if available, otherwise undefined.
+   */
+  selectionModel() {
+    if (this != null && this.getSelectionModel)
+      return this.getSelectionModel();
+  }
+  /**
+   * Retrieves the focus model.
+   *
+   * @returns {FocusModelIf | undefined} The focus model if it exists, or undefined otherwise.
+   */
+  focusModel() {
+    if (this != null && this.getFocusModel)
+      return this.getFocusModel();
+  }
+  setDragging(e) {
+    this.dragging = e, this.dragging ? (this.storeColumnWidths(), this.lastDragFrom = -1, this.lastDragTo = -1) : this.storedColumnWidths = [];
+  }
+  /**
+   * Changes the focus cell using the specified deltas.
+   *
+   * @param {number} dx - The delta for the column index.
+   * @param {number} dy - The delta for the row index.
+   * @return {boolean} - True if the focus cell was changed, false otherwise.
+   */
+  changeFocusCell(e, t) {
+    if (!this.isEditing() && this.getFocusModel) {
+      const o = this.getFocusModel();
+      if (o) {
+        const [s, i] = o.getFocus();
+        return o.setFocus(s + t, i + e), this.repaint(), !0;
+      }
+    }
+    return !1;
+  }
+  /**
+   * Resizes the column based on the mouse event.
+   *
+   * @param {GeMouseEvent} mouseEvent - The mouse event that triggered the resize.
+   */
+  resizeColumn(e) {
+    this.tableModel.setColumnWidth(this.mouseStartColumnIndex, this.mouseStartWidth + e.draggingX), this.tableModel.recalcPadding(), this.resetSizeOfWrapperDiv(), this.adjustContainersAndRows();
+  }
+  /**
+   * Clears the selection model, if available.
+   *
+   * @return {void}
+   */
+  clearSelectionModel() {
+    var e;
+    this.getSelectionModel && ((e = this.getSelectionModel()) == null || e.clear());
+  }
+  debugOnce(e, t) {
+    var o;
+    console.clear(), console.info("this.hostElement.offsetTop", this.hostElement.offsetTop), console.info("this.hostElement.scrollHeight", this.hostElement.scrollHeight), console.info("this.scrollViewportTop", this.scrollTop), console.info("this.areaHeaderCenter.parent.clientHeight", this.areaHeaderCenter.parent.clientHeight), console.info("bodyY", t), console.info("bodyX", e), console.info("rows", this.firstVisibleRowIndex), console.info(""), console.info("this.tableModel", this.tableModel), console.info(""), console.info("this.mouseMoveEvent.clientX", (o = this.mouseHandler.mouseEvent) == null ? void 0 : o.clientX), console.info("this.hostElement.offsetLeft", this.hostElement.offsetLeft), console.info("this.areaBodyWestGeo.width", this.areaBodyWestGeo.width);
+  }
+  /**
+   * Restores the scroll position of the table if auto restore options are enabled.
+   *
+   *
+   * @returns {void}
+   */
+  autoRestoreScrollPosition() {
+    var e;
+    if ((e = this.tableOptions) != null && e.autoRestoreOptions && this.storeScrollPosStateService && this.tableOptions.autoRestoreOptions.autoRestoreScrollPosition) {
+      const o = this.storeScrollPosStateService.getScrollOffset();
+      o && this.scrollViewport.scrollTo(...o);
+    }
+  }
+  /**
+   * Automatically restores the sorting state of the table.
+   *
+   * @private
+   * @function autoRestoreSortingState
+   * @memberof ClassName
+   *
+   * @description
+   * This method checks if the autoRestoreSortingState option is enabled in the tableOptions.
+   * If enabled, it uses the storeSortingService to retrieve the sort items array.
+   * If there are sort items present, it applies them to the table's body model using the doSort method.
+   *
+   * @returns {void}
+   */
+  autoRestoreSortingState() {
+    var e, t;
+    if ((t = (e = this.tableOptions) == null ? void 0 : e.autoRestoreOptions) != null && t.autoRestoreSortingState && this.storeSortingService) {
+      const o = this.storeSortingService.getSortItems();
+      o != null && o.length && this.tableModel.getBodyModel().doSort(o);
+    }
+  }
+  /**
+   * Restores the collapsed/expanded state of the rows in the table based on the autoRestoreOptions
+   * specified in the tableOptions. This method is private and should not be called directly.
+   *
+   * @private
+   */
+  autoRestoreCollapsedExpandedState() {
+    var e, t;
+    if ((t = (e = this.tableOptions) == null ? void 0 : e.autoRestoreOptions) != null && t.getRowId && this.storeStateCollapsedExpandService) {
+      const o = this.tableOptions.autoRestoreOptions, s = o.getRowId;
+      if (o.autoRestoreCollapsedExpandedState && s) {
+        const i = this.storeStateCollapsedExpandService.collapsedExpandedStateGet(), r = this.tableModel.getAreaModel("body");
+        if (W(r)) {
+          const a = r, l = r.getRowCount();
+          for (let n = 0; n < l; n++) {
+            const d = r.getRowByIndex(n);
+            if (d)
+              if (i.allExpanded)
+                d.expanded = !0;
+              else if (i.allCollapsed)
+                d.expanded = !1;
+              else {
+                const h = s(d.data);
+                i.mode === "expanded" ? d.expanded = this.storeStateCollapsedExpandService.collapsedExpandedStateIncludes(h) : i.mode === "collapsed" && (d.expanded = !this.storeStateCollapsedExpandService.collapsedExpandedStateIncludes(h));
+              }
+          }
+          a.recalcVisibleTreeRows();
+        }
+      }
+    }
+  }
+}
+const $ = class $ {
+};
+$.themes = ["light", "combat", "paper", "blackboard"], $.vars = {
+  light: `html[data-theme="light"] {
+  --ge-table-bg: rgba(255,255,255, 0.5);
+  --ge-table-header-west-bg: rgba(233, 233, 233, 0.5);
+  --ge-table-header-center-bg: rgba(233, 233, 233, 0.5);
+  --ge-table-header-east-bg: rgba(233, 233, 233, 0.5);
+  --ge-table-header-west-text: #000;
+  --ge-table-header-center-text: #000;
+  --ge-table-header-east-text: #000;
+  --ge-table-header-west-horizontal-border: #ddd;
+  --ge-table-header-west-vertical-border: #ccc;
+  --ge-table-header-center-horizontal-border: #ddd;
+  --ge-table-header-center-vertical-border: #ccc;
+  --ge-table-header-east-horizontal-border: #ddd;
+  --ge-table-header-east-vertical-border: #ccc;
+  --ge-table-body-west-bg: rgba(233, 233, 233, 0.5);
+  --ge-table-body-center-bg: rgba(255,255,255, 0.5);
+  --ge-table-body-east-bg: rgba(233, 233, 233, 0.5);
+  --ge-table-body-west-text: #000;
+  --ge-table-body-center-text: #000;
+  --ge-table-body-east-text: #000;
+  --ge-table-body-west-horizontal-border: #ddd;
+  --ge-table-body-west-vertical-border: #ccc;
+  --ge-table-body-center-horizontal-border: #bbb;
+  --ge-table-body-center-vertical-border: #ddd;
+  --ge-table-body-east-horizontal-border: #ddd;
+  --ge-table-body-east-vertical-border: #ccc;
+  --ge-table-body-west-selected-range-bg: rgba(0, 152, 219, 0.4);
+  --ge-table-body-center-selected-range-bg: rgba(0, 152, 219, 0.4);
+  --ge-table-body-east-selected-range-bg: rgba(0, 152, 219, 0.4);
+  --ge-table-body-west-selected-range-text: #000;
+  --ge-table-body-center-selected-range-text: #000;
+  --ge-table-body-east-selected-range-text: #000;
+  --ge-table-footer-west-bg: rgba(233, 233, 233, 0.5);
+  --ge-table-footer-center-bg: rgba(233, 233, 233, 0.5);
+  --ge-table-footer-east-bg: rgba(233, 233, 233, 0.5);
+  --ge-table-footer-west-text: #000;
+  --ge-table-footer-center-text: #000;
+  --ge-table-footer-east-text: #000;
+  --ge-table-footer-west-horizontal-border: #ddd;
+  --ge-table-footer-west-vertical-border: #ccc;
+  --ge-table-footer-center-horizontal-border: #ddd;
+  --ge-table-footer-center-vertical-border: #ccc;
+  --ge-table-footer-east-horizontal-border: #ddd;
+  --ge-table-footer-east-vertical-border: #ccc;
+  --ge-table-border: #ccc;
+  --ge-table-row-odd-bg: transparent;
+  --ge-table-row-even-bg: transparent;
+  --ge-table-column-odd-bg: transparent;
+  --ge-table-column-even-bg: transparent;
+  --ge-table-hover-column-bg: rgba(0, 224, 255, 0.27);
+  --ge-table-hover-row-bg: rgba(0, 224, 255, 0.27);
+  --ge-table-focus-border: rgb(0, 255, 255);
+  --ge-table-color-error-text: #e00034;
+  --ge-table-tree-arrow-collapsed-color: #e00034;
+  --ge-table-column-resize-handle-border: rgb(0, 255, 255);
+  --ge-table-dragged-col-div-bg: lightcyan;
+  --ge-table-drop-zone-bg: rgba(244, 255, 242, 0.6);
+}`,
+  combat: `html[data-theme="combat"] {
+  --ge-table-bg: #101010;
+  --ge-table-header-west-bg: #101010;
+  --ge-table-header-center-bg: #101010;
+  --ge-table-header-east-bg: #101010;
+  --ge-table-header-west-text: oklch(100% 0 0);
+  --ge-table-header-center-text: oklch(100% 0 0);
+  --ge-table-header-east-text: oklch(100% 0 0);
+  --ge-table-header-west-horizontal-border: oklch(100% 0 0 / 0%);
+  --ge-table-header-west-vertical-border: oklch(100% 0 0 / 0%);
+  --ge-table-header-center-horizontal-border: oklch(100% 0 0 / 0%);
+  --ge-table-header-center-vertical-border: oklch(100% 0 0 / 0%);
+  --ge-table-header-east-horizontal-border: oklch(100% 0 0 / 0%);
+  --ge-table-header-east-vertical-border: oklch(100% 0 0 / 0%);
+  --ge-table-body-west-bg: #101010;
+  --ge-table-body-center-bg: #101010;
+  --ge-table-body-east-bg: #101010;
+  --ge-table-body-west-text: #b6b4b4;
+  --ge-table-body-center-text: #b6b4b4;
+  --ge-table-body-east-text: #b6b4b4;
+  --ge-table-body-west-horizontal-border: oklch(100% 0 0 / 0%);
+  --ge-table-body-west-vertical-border: oklch(100% 0 0 / 0%);
+  --ge-table-body-center-horizontal-border: oklch(100% 0 0 / 0%);
+  --ge-table-body-center-vertical-border: oklch(100% 0 0 / 0%);
+  --ge-table-body-east-horizontal-border: oklch(100% 0 0 / 0%);
+  --ge-table-body-east-vertical-border: oklch(100% 0 0 / 0%);
+  --ge-table-body-west-selected-range-bg: oklch(20% 0.2 39.6 / 37%);
+  --ge-table-body-center-selected-range-bg: oklch(20% 0.2 39.6 / 37%);
+  --ge-table-body-east-selected-range-bg: oklch(20% 0.2 39.6 / 37%);
+  --ge-table-body-west-selected-range-text: #f00032;
+  --ge-table-body-center-selected-range-text: #f00032;
+  --ge-table-body-east-selected-range-text: #f00032;
+  --ge-table-footer-west-bg: #101010;
+  --ge-table-footer-center-bg: #101010;
+  --ge-table-footer-east-bg: #101010;
+  --ge-table-footer-west-text: oklch(100% 0 0);
+  --ge-table-footer-center-text: oklch(100% 0 0);
+  --ge-table-footer-east-text: oklch(100% 0 0);
+  --ge-table-footer-west-horizontal-border: oklch(100% 0 0 / 0%);
+  --ge-table-footer-west-vertical-border: oklch(100% 0 0 / 0%);
+  --ge-table-footer-center-horizontal-border: oklch(100% 0 0 / 0%);
+  --ge-table-footer-center-vertical-border: oklch(100% 0 0 / 0%);
+  --ge-table-footer-east-horizontal-border: oklch(100% 0 0 / 0%);
+  --ge-table-footer-east-vertical-border: oklch(100% 0 0 / 0%);
+  --ge-table-border: oklch(100% 0 0 / 0%);
+  --ge-table-row-odd-bg: oklch(100% 0 0 / 0%);
+  --ge-table-row-even-bg: oklch(100% 0 0 / 0%);
+  --ge-table-column-odd-bg: oklch(100% 0 0 / 0%);
+  --ge-table-column-even-bg: oklch(100% 0 0 / 0%);
+  --ge-table-hover-column-bg: oklch(34% 0.25 3.6 / 27%);
+  --ge-table-hover-row-bg: oklch(34% 0.25 3.6 / 27%);
+  --ge-table-focus-border: oklch(40% 0.25 3.6);
+  --ge-table-color-error-text: oklch(65% 0.31 43.2);
+  --ge-table-tree-arrow-collapsed-color: #e00034;
+  --ge-table-column-resize-handle-border: oklch(63% 0.31 43.2);
+  --ge-table-dragged-col-div-bg: #2c2e33;
+  --ge-table-drop-zone-bg: #101010;
+}`,
+  paper: `html[data-theme="paper"] {
+  --ge-table-bg: #e7e5df;
+  --ge-table-header-west-bg: oklch(80% 0.02 99 / 48%);
+  --ge-table-header-center-bg: oklch(80% 0.02 99 / 48%);
+  --ge-table-header-east-bg: oklch(80% 0.02 99 / 48%);
+  --ge-table-header-west-text: #111;
+  --ge-table-header-center-text: #111;
+  --ge-table-header-east-text: #111;
+  --ge-table-header-west-horizontal-border: oklch(100% 0 0 / 0%);
+  --ge-table-header-west-vertical-border: oklch(100% 0 0 / 0%);
+  --ge-table-header-center-horizontal-border: oklch(100% 0 0 / 0%);
+  --ge-table-header-center-vertical-border: oklch(100% 0 0 / 0%);
+  --ge-table-header-east-horizontal-border: oklch(100% 0 0 / 0%);
+  --ge-table-header-east-vertical-border: oklch(100% 0 0 / 0%);
+  --ge-table-body-west-bg: oklch(80% 0.02 99 / 48%);
+  --ge-table-body-center-bg: #e7e5df;
+  --ge-table-body-east-bg: oklch(80% 0.02 99 / 48%);
+  --ge-table-body-west-text: #000;
+  --ge-table-body-center-text: #000;
+  --ge-table-body-east-text: #000;
+  --ge-table-body-west-horizontal-border: oklch(100% 0 0 / 0%);
+  --ge-table-body-west-vertical-border: oklch(100% 0 0 / 0%);
+  --ge-table-body-center-horizontal-border: oklch(100% 0 0 / 0%);
+  --ge-table-body-center-vertical-border: oklch(100% 0 0 / 0%);
+  --ge-table-body-east-horizontal-border: oklch(100% 0 0 / 0%);
+  --ge-table-body-east-vertical-border: oklch(100% 0 0 / 0%);
+  --ge-table-body-west-selected-range-bg: #cfcdc2;
+  --ge-table-body-center-selected-range-bg: #cfcdc2;
+  --ge-table-body-east-selected-range-bg: #cfcdc2;
+  --ge-table-body-west-selected-range-text: #000;
+  --ge-table-body-center-selected-range-text: #000;
+  --ge-table-body-east-selected-range-text: #000;
+  --ge-table-footer-west-bg: oklch(80% 0.02 99 / 48%);
+  --ge-table-footer-center-bg: oklch(80% 0.02 99 / 48%);
+  --ge-table-footer-east-bg: oklch(80% 0.02 99 / 48%);
+  --ge-table-footer-west-text: #111;
+  --ge-table-footer-center-text: #111;
+  --ge-table-footer-east-text: #111;
+  --ge-table-footer-west-horizontal-border: oklch(100% 0 0 / 0%);
+  --ge-table-footer-west-vertical-border: oklch(100% 0 0 / 0%);
+  --ge-table-footer-center-horizontal-border: oklch(100% 0 0 / 0%);
+  --ge-table-footer-center-vertical-border: oklch(100% 0 0 / 0%);
+  --ge-table-footer-east-horizontal-border: oklch(100% 0 0 / 0%);
+  --ge-table-footer-east-vertical-border: oklch(100% 0 0 / 0%);
+  --ge-table-border: oklch(100% 0 0 / 0%);
+  --ge-table-row-odd-bg: oklch(100% 0 0 / 0%);
+  --ge-table-row-even-bg: oklch(100% 0 0 / 0%);
+  --ge-table-column-odd-bg: oklch(100% 0 0 / 0%);
+  --ge-table-column-even-bg: oklch(100% 0 0 / 0%);
+  --ge-table-hover-column-bg: oklch(5% 0.2 266.40000000000003 / 9%);
+  --ge-table-hover-row-bg: oklch(5% 0.2 266.40000000000003 / 9%);
+  --ge-table-focus-border: oklch(100% 0.19 205.20000000000002);
+  --ge-table-color-error-text: oklch(45% 0.25 43.2);
+  --ge-table-tree-arrow-collapsed-color: #e00034;
+  --ge-table-column-resize-handle-border: oklch(100% 0.19 205.20000000000002 / 71%);
+  --ge-table-dragged-col-div-bg: #2c2e33;
+  --ge-table-drop-zone-bg: #e7e5df;
+}`,
+  blackboard: `html[data-theme="dark"] {
+  --ge-table-bg: #0c1021;
+  --ge-table-header-west-bg: #0c1021;
+  --ge-table-header-center-bg: #0c1021;
+  --ge-table-header-east-bg: #0c1021;
+  --ge-table-header-west-text: #e0df85;
+  --ge-table-header-center-text: #e0df85;
+  --ge-table-header-east-text: #e0df85;
+  --ge-table-header-west-horizontal-border: transparent;
+  --ge-table-header-west-vertical-border: transparent;
+  --ge-table-header-center-horizontal-border: transparent;
+  --ge-table-header-center-vertical-border: transparent;
+  --ge-table-header-east-horizontal-border: transparent;
+  --ge-table-header-east-vertical-border: transparent;
+  --ge-table-body-west-bg: #0c1021;
+  --ge-table-body-center-bg: #0c1021;
+  --ge-table-body-east-bg: #0c1021;
+  --ge-table-body-west-text: #a7a7a7;
+  --ge-table-body-center-text: #a7a7a7;
+  --ge-table-body-east-text: #a7a7a7;
+  --ge-table-body-west-horizontal-border: transparent;
+  --ge-table-body-west-vertical-border: transparent;
+  --ge-table-body-center-horizontal-border: transparent;
+  --ge-table-body-center-vertical-border: transparent;
+  --ge-table-body-east-horizontal-border: transparent;
+  --ge-table-body-east-vertical-border: transparent;
+  --ge-table-body-west-selected-range-bg: #758129;
+  --ge-table-body-center-selected-range-bg: #758129;
+  --ge-table-body-east-selected-range-bg: #758129;
+  --ge-table-body-west-selected-range-text: oklch(100% 0 0);
+  --ge-table-body-center-selected-range-text: oklch(100% 0 0);
+  --ge-table-body-east-selected-range-text: oklch(100% 0 0);
+  --ge-table-footer-west-bg: #0c1021;
+  --ge-table-footer-center-bg: #0c1021;
+  --ge-table-footer-east-bg: #0c1021;
+  --ge-table-footer-west-text: #e0df85;
+  --ge-table-footer-center-text: #e0df85;
+  --ge-table-footer-east-text: #e0df85;
+  --ge-table-footer-west-horizontal-border: transparent;
+  --ge-table-footer-west-vertical-border: transparent;
+  --ge-table-footer-center-horizontal-border: transparent;
+  --ge-table-footer-center-vertical-border: otransparent;
+  --ge-table-footer-east-horizontal-border: transparent;
+  --ge-table-footer-east-vertical-border: transparent;
+  --ge-table-border: oklch(0% 0 0);
+  --ge-table-row-odd-bg: oklch(100% 0 0 / 0%);
+  --ge-table-row-even-bg: oklch(100% 0 0 / 0%);
+  --ge-table-column-odd-bg: oklch(100% 0 0 / 0%);
+  --ge-table-column-even-bg: oklch(100% 0 0 / 0%);
+  --ge-table-hover-column-bg: #a9a9a9;
+  --ge-table-hover-row-bg: #a9a9a9;
+  --ge-table-focus-border: #e1ff00;
+  --ge-table-color-error-text: #ff0040;
+  --ge-table-tree-arrow-collapsed-color: #e00034;
+  --ge-table-column-resize-handle-border: oklch(0% 0 0);
+  --ge-table-dragged-col-div-bg: #2c2e33;
+  --ge-table-drop-zone-bg: #758129;
+}`
+};
+let Y = $;
+const B = class B {
+  constructor(e = new ee()) {
+    this.headerGroupOptions = e;
+  }
+  render(e, t, o, s, i, r, a) {
+    const l = r != null && r.data ? r.data : "";
+    if (r) {
+      const { toggle: n, visibility: d, closed: h } = r, c = n ? B.toggleHeaderGroup : "";
+      this.addText(e, s, t, o, l, c), n && d !== "always" && this.addArrowDiv(a, e, !h, t, o, s, c);
+    } else
+      this.addText(e, s, t, o, l, "");
+  }
+  addText(e, t, o, s, i, r) {
+    e.innerHTML = `<span 
+                data-ge-action="${r}"
+                data-area="${t}"
+                data-row-index="${o}"
+                data-col-index="${s}"
+                >${i}</span>`;
+  }
+  addArrowDiv(e, t, o = !0, s = -1, i = -1, r = "header", a) {
+    const l = e.createElement("div");
+    e.addClass(l, "ge-table-toggle-icon-div"), e.setStyle(l, "display", "inline-block"), e.setStyle(l, "position", ""), e.setStyle(l, "width", "20px"), e.setStyle(l, "background", "transparent"), e.setStyle(l, "cursor", "pointer"), e.setAttribute(l, "data-row-index", `${s}`), e.setAttribute(l, "data-col-index", `${i}`), e.setAttribute(l, "data-area", `${r}`), e.setAttribute(l, "data-ge-action", `${a}`);
+    let n;
+    o ? n = this.headerGroupOptions.iconExpanded : n = this.headerGroupOptions.iconCollapsed;
+    const d = n.content, h = e.createText(d);
+    e.appendChild(l, h), n.style && this.applyStyleString(e, l, n.style);
+    for (const c of n.classes)
+      e.addClass(l, c);
+    return e.appendChild(t, l), l;
+  }
+  applyStyleString(e, t, o) {
+    const s = o.split(";").map((i) => i.trim()).filter((i) => i);
+    for (const i of s) {
+      const [r, a] = i.split(":");
+      e.setStyle(t, r.trim(), a.trim());
+    }
+  }
+};
+B.toggleHeaderGroup = "toggleHeaderGroup";
+let q = B;
+function Oe({
+  tableModel: p,
+  tableOptions: e = new te(),
+  mouseMoved: t,
+  checkboxChanged: o,
+  contextmenu: s,
+  modelChanged: i,
+  mouseClicked: r,
+  mouseDragging: a,
+  mouseDraggingEnd: l,
+  selectionChanged: n,
+  focusChanged: d,
+  tableReady: h,
+  licenseKey: c
+}) {
+  const f = se(null);
+  let u = !1;
+  ie(() => {
+    f.current && !u && (S(f.current), u = !0);
+  });
+  const S = (b) => {
+    const g = {
+      onSelectionChanged(m) {
+        n && n(m);
+      },
+      onFocusChanged(m) {
+        d && d(m);
+      },
+      onCheckboxChanged: (m) => {
+        o && o(m);
+      },
+      onContextmenu: (m) => {
+        s && s(m);
+      },
+      onModelChanged: (m) => {
+        i && i(m);
+      },
+      onMouseClicked: (m) => {
+        r && r(m);
+      },
+      onMouseDragging: (m) => {
+        a && a(m);
+      },
+      onMouseDraggingEnd: (m) => {
+        l && l(m);
+      },
+      onMouseMoved: (m) => {
+        t && t(m);
+      }
+    }, v = new j(
+      b,
+      p,
+      new Z(),
+      e,
+      g
+    );
+    v.firstInit(), h && h(v.getApi()), c && k.getInstance().setLicenseKey(c);
+  };
+  return /* @__PURE__ */ oe(
+    "div",
+    {
+      ref: f,
+      className: "container-div",
+      style: {
+        width: "100%",
+        height: "100%",
+        background: "transparent",
+        padding: "0",
+        margin: "0"
+      }
+    }
+  );
+}
+var G, O = re;
+if (process.env.NODE_ENV === "production")
+  G = O.createRoot, O.hydrateRoot;
+else {
+  var U = O.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+  G = function(p, e) {
+    U.usingClientEntryPoint = !0;
+    try {
+      return O.createRoot(p, e);
+    } finally {
+      U.usingClientEntryPoint = !1;
+    }
+  };
+}
+class Le {
+  constructor(e) {
+    this.Component = e, console.info(e);
+  }
+  render(e, t, o, s, i, r, a) {
+    const l = {
+      cellDiv: e,
+      rowIndex: t,
+      columnIndex: o,
+      areaIdent: s,
+      areaModel: i,
+      cellValue: r
+    }, n = G(e, {});
+    return n.render(this.Component(l)), () => {
+      n.unmount();
+    };
+  }
+}
+export {
+  Le as ComponentRendererWrapper,
+  Oe as GuiexpertTable
+};