import { U as UICompBuilder, ed as language, ee as createRoot, av as trans, ah as Section, dr as columnPropertyView, aj as withExposingConfigs, au as NameConfig, ao as CompDepsConfig, c_ as dropdownControl, ef as DataOptions, ds as withIsLoadingMethod, dt as JSONObjectArrayControl, a6 as StringControl, w as withDefault, eg as DatagridColItemListComp, eh as SummaryListComp, ei as ButtonActionListComp, a4 as BoolControl, ej as EditModeOptions, ek as SortingModeOptions, cv as NumberControl, el as PagerModeOptions, em as SelectModeOptions, en as SelectAllModeOption, eo as ShowCheckBoxesModeOptions, ep as ExportOptions, ar as eventHandlerControl, eq as DatagridEventOptions, dQ as BoolCodeControl, er as SelectionControl, es as PaginationControl, et as CellControl, eu as ColumnControl, ev as CurrentRowControl, ew as LastChangeControl, ex as DataManualExControl, ey as i18nObjs } from "./index-6d97e67f.js";
import { C as CustomStore, a as ColumnChooser, b as ColumnFixing, H as HeaderFilter, F as FilterRow, c as FilterPanel, S as Scrolling, d as Search, P as Paging, e as Pager, G as Grouping, f as GroupPanel, g as SearchPanel, E as Export, h as Selection, i as Sorting, j as Editing, k as Column, B as Button, R as RequiredRule, l as PatternRule, m as RangeRule, n as EmailRule, L as Lookup, o as Summary, p as GroupItem, T as TotalItem, q as exportDataGrid, D as DataGrid } from "./devextreme-be18bda8.js";
import { e as exceljs_minExports } from "./exceljs-1678d36b.js";
import { s as saveAs } from "./file-saver-es-c18fae8f.js";
import { f as lodashExports, _ } from "./lodash-226cb5b1.js";
import { useRef, useEffect, useMemo, useCallback, useLayoutEffect } from "react";
import { d as dt } from "./styled-components-b776227d.js";
import { getCellRenderer } from "./cellRenderUtils-46a94b16.js";
import { SavedRowsDataControl } from "./savedRowsDataControl-5c8932a1.js";
import { lR as jsxs, lA as jsx, lS as Fragment } from "./ant-design-icons-a81e6d18.js";
import { r as App } from "./antd-eb0b81b8.js";
import "./axios-0ffd51b8.js";
import "./redux-devtools-36ca30b8.js";
import "./alasql-f59e855e.js";
import "./react-router-38313ddc.js";
import "./fontawesome-7bcd29b1.js";
import "react-dom";
import "./dnd-kit-e0a0bf75.js";
import "./moment-d731d247.js";
import "./crypto-js-8020edb5.js";
import "./dayjs-63343308.js";
import "./numbro-48e81844.js";
import "./papaparse-088c0adc.js";
import "./uuid-82f303b2.js";
import "./supabase-6aa220db.js";
import "./websockets-80729b50.js";
import "./fetch-03ca8116.js";
import "./react-draggable-1ced44e5.js";
import "./clsx-b06d39d3.js";
import "./remark-gfm-72b87c7d.js";
import "./buffer-f89d742d.js";
import "./rehype-raw-49057806.js";
import "./parse5-31d0cb5d.js";
import "./rehype-sanitize-38a120e4.js";
import "./simplebar-react-a37a9b2a.js";
import "./react-best-gradient-color-picker-2e7ff36d.js";
import "./ua-parser-js-1d18a3f8.js";
import "./loglevel-5e7e37fc.js";
import "./codemirror-8fe65581.js";
import "./really-relaxed-json-e5391d6a.js";
import "./immer-c0428a8d.js";
import "./redux-saga-3b3a9c7b.js";
import "./hotkeys-js-216206c9.js";
import "./cnchar-8c3eaa86.js";
import "./react-documents-a03b99c9.js";
import "./sql-formatter-69e8df59.js";
import "./rc-trigger-7d152aa4.js";
import "./react-json-view-364658b4.js";
import "./qrcode-react-417e3716.js";
import "./katex-05fb1c31.js";
import "./ecogis-maps-10e82de5.js";
const DEBOUNCE_TIME = 100, replaceFilterTextsInDOM = () => {
  if ("vi" === language) {
    const e = { Contains: trans("datagrid.filterOperations.contains"), "Does not contain": trans("datagrid.filterOperations.notContains"), "Starts with": trans("datagrid.filterOperations.startsWith"), "Ends with": trans("datagrid.filterOperations.endsWith"), Equals: trans("datagrid.filterOperations.equals"), "Does not equal": trans("datagrid.filterOperations.notEquals"), "Less than": trans("datagrid.filterOperations.lessThan"), "Less than or equal to": trans("datagrid.filterOperations.lessThanOrEqual"), "Greater than": trans("datagrid.filterOperations.greaterThan"), "Greater than or equal to": trans("datagrid.filterOperations.greaterThanOrEqual"), Between: trans("datagrid.filterOperations.between"), "Is blank": trans("datagrid.filterOperations.isBlank"), "Is not blank": trans("datagrid.filterOperations.isNotBlank"), Reset: trans("datagrid.filterOperations.reset"), "Select All": trans("datagrid.headerFilter.selectAll"), Cancel: trans("datagrid.headerFilter.cancel"), "Create Filter": trans("datagrid.headerFilter.createFilter") };
    [".dx-menu-item-text", ".dx-list-item-content", ".dx-list-select-all-label", ".dx-button-text", ".dx-datagrid-filter-panel-text"].forEach((t) => {
      document.querySelectorAll(t).forEach((t2) => {
        var _a;
        const a = (_a = t2.textContent) == null ? void 0 : _a.trim();
        a && e[a] && (t2.textContent = e[a]);
      });
    });
  }
}, DatagridStyled = dt(DataGrid)`
  .dx-datagrid-rowsview .dx-row-focused.dx-data-row .dx-command-edit .dx-link,
  .dx-datagrid-rowsview
    .dx-row-focused.dx-data-row
    > td:not(.dx-focused):not(.dx-cell-modified):not(.dx-datagrid-invalid) {
    background-color: #d0e5fb;
    color: #242424 !important;
  }

  .dx-command-edit .dx-link,
  .dx-command-delete .dx-link {
    transition: all 0.2s ease-in-out;
    border-radius: 4px;
    padding: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .dx-command-edit .dx-link:hover {
    background-color: #e6f3ff !important;
    color: #1890ff !important;
    transform: scale(1.1);
  }

  .dx-command-delete .dx-link:hover {
    background-color: #ffebee !important;
    color: #f5222d !important;
    transform: scale(1.1);
  }

  .dx-command-edit .dx-link:hover .dx-icon,
  .dx-command-delete .dx-link:hover .dx-icon {
    opacity: 1;
    filter: brightness(1.2);
  }

  .dx-toolbar-after,
  .dx-command-edit-with-icons {
    svg.svg-inline--fa {
      width: 18px !important;
      height: 18px !important;
    }
  }

  .dx-command-edit .dx-icon-edit:hover,
  .dx-command-delete .dx-icon-trash:hover {
    transition: transform 0.2s ease-in-out;
    transform: scale(1.2);
  }

  .dx-command-edit .dx-link:active,
  .dx-command-delete .dx-link:active {
    transform: scale(0.95);
  }

  .dx-scrollable-native.dx-scrollable-both,
  .dx-scrollable-native.dx-scrollable-both
    > .dx-scrollable-wrapper
    > .dx-scrollable-container {
    overflow-x: hidden;
    overflow-y: hidden;
  }
  .dx-editor-cell.dx-datagrid-first-header.dx-datagrid-sticky-column-left.dx-datagrid-sticky-column-border-right.dx-datagrid-readonly.dx-cell-focus-disabled {
    padding: 15px 16px 14px !important;
  }
  .dx-editor-cell.dx-datagrid-first-header.dx-datagrid-sticky-column-left.dx-datagrid-sticky-column-border-right.dx-datagrid-readonly.dx-focused {
    padding: 15px 16px 14px !important;
  }
  .dx-row.dx-freespace-row.dx-column-lines {
    display: none;
  }
    .dx-widget.dx-checkbox.dx-select-checkbox.dx-datagrid-checkbox-size {
    display:inline-block;
    }
`;
function useDeepStable(e) {
  const t = useRef(e);
  return _.isEqual(t.current, e) || (t.current = e), t.current;
}
const childrenMap = { dataOptions: dropdownControl(DataOptions, "manual"), dataManual: withIsLoadingMethod(JSONObjectArrayControl), dataApi: StringControl, dataKeyExpr: withDefault(StringControl, "ID"), columns: DatagridColItemListComp, summary: SummaryListComp, customButtonsHead: ButtonActionListComp, customButtonRow: ButtonActionListComp, showColumnChooser: withDefault(BoolControl, true), showColumnFixing: withDefault(BoolControl, true), editable: withDefault(BoolControl, true), editMode: dropdownControl(EditModeOptions, "form"), editShowIcon: withDefault(BoolControl, true), confirmDelete: withDefault(BoolControl, true), sortingMode: dropdownControl(SortingModeOptions, "multiple"), showFilterPanel: withDefault(BoolControl, true), showFilterRow: BoolControl, showSearch: withDefault(BoolControl, true), searchVisibleColumnsOnly: BoolControl, showPaging: withDefault(BoolControl, true), pageSize: withDefault(NumberControl, 5), pageIndex: withDefault(NumberControl, 0), pagerMode: dropdownControl(PagerModeOptions, "full"), pagerShowPageSizeSelector: withDefault(BoolControl, true), pagerShowInfo: withDefault(BoolControl, true), pagerShowNavigationButtons: withDefault(BoolControl, true), code: StringControl, showScrolling: withDefault(BoolControl, true), showGroupPanel: withDefault(BoolControl, true), showGroupContextMenu: withDefault(BoolControl, true), groupAutoExpand: BoolControl, selectMode: dropdownControl(SelectModeOptions, "multiple"), selectAllMode: dropdownControl(SelectAllModeOption, "page"), showCheckBoxesMode: dropdownControl(ShowCheckBoxesModeOptions, "onClick"), showExport: BoolControl, exportMode: dropdownControl(ExportOptions, "pdf"), showBorders: withDefault(BoolControl, true), showColumnLines: withDefault(BoolControl, true), showRowLines: BoolControl, alternatingRow: BoolControl, columnAutoWidth: withDefault(BoolControl, false), columnHidingEnabled: BoolControl, focusedRowEnabled: withDefault(BoolControl, true), wordWrapEnabled: withDefault(BoolControl, true), onEvent: eventHandlerControl(DatagridEventOptions), loading: BoolCodeControl, showLoading: BoolControl, selectionControl: SelectionControl, paginationControl: PaginationControl, cellControl: CellControl, columnControl: ColumnControl, currentRow: CurrentRowControl, savedRowsDataControl: SavedRowsDataControl, lastChange: LastChangeControl, dataManualEx: DataManualExControl }, CusButton = dt.span`
  margin: 0 4px;
  vertical-align: middle;
  color: ${(e) => e.$textColor || "#666666"};
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  &:hover {
    color: ${(e) => e.$hoverColor || "#1890ff"};
    background-color: ${(e) => `${e.$hoverColor || "#1890ff"}15`};
    transform: scale(1.1);
  }
`;
function isNotEmpty(e) {
  return null != e && "" !== e;
}
const DatagridBasicComp = new UICompBuilder(childrenMap, (props) => {
  const dataGridRef = useRef(null), { message } = App.useApp(), exportingTimeoutRef = useRef(null), savedTimeoutRef = useRef(null), columnFilterValueChangeTimeoutRef = useRef(null), toolbarPreparingTimeoutRef = useRef(null);
  useEffect(() => {
    let e = null;
    const t = () => {
      e && clearTimeout(e), e = setTimeout(() => {
        replaceFilterTextsInDOM();
      }, 100);
    };
    t();
    const a = new MutationObserver((e2) => {
      let a2 = false;
      e2.forEach((e3) => {
        "childList" === e3.type && e3.addedNodes.forEach((e4) => {
          var _a, _b, _c;
          if (e4.nodeType === Node.ELEMENT_NODE) {
            const t2 = e4;
            (((_a = t2.classList) == null ? void 0 : _a.contains("dx-popup")) || ((_b = t2.classList) == null ? void 0 : _b.contains("dx-header-filter-menu")) || ((_c = t2.querySelector) == null ? void 0 : _c.call(t2, ".dx-menu-item-text, .dx-list-item-content, .dx-list-select-all-label, .dx-button-text, .dx-datagrid-filter-panel-text"))) && (a2 = true);
          }
        });
      }), a2 && t();
    });
    return a.observe(document.body, { childList: true, subtree: true }), () => {
      a.disconnect(), e && clearTimeout(e), null !== exportingTimeoutRef.current && (clearTimeout(exportingTimeoutRef.current), exportingTimeoutRef.current = null), null !== savedTimeoutRef.current && (clearTimeout(savedTimeoutRef.current), savedTimeoutRef.current = null), null !== columnFilterValueChangeTimeoutRef.current && (clearTimeout(columnFilterValueChangeTimeoutRef.current), columnFilterValueChangeTimeoutRef.current = null), null !== toolbarPreparingTimeoutRef.current && (clearTimeout(toolbarPreparingTimeoutRef.current), toolbarPreparingTimeoutRef.current = null);
    };
  }, [language]);
  const store = useMemo(() => new CustomStore({ key: props.dataKeyExpr, async load(e) {
    const t = ["skip", "take", "requireTotalCount", "requireGroupCount", "sort", "filter", "totalSummary", "group", "groupSummary"].filter((t2) => isNotEmpty(e[t2])).map((t2) => `${t2}=${JSON.stringify(e[t2])}`).join("&");
    try {
      const e2 = await fetch(`${props.dataApi}?${t}`), a = await e2.json();
      return { data: a.data, totalCount: a.totalCount, summary: a.summary, groupCount: a.groupCount };
    } catch (e2) {
      throw new Error("Data Loading Error");
    }
  }, async insert(e) {
    try {
      if (!(await fetch(props.dataApi, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(e) })).ok)
        throw new Error("Data Insertion Error");
    } catch (e2) {
      throw new Error("Data Insertion Error");
    }
  }, async update(e, t) {
    try {
      if (!(await fetch(`${props.dataApi}/${e}`, { method: "PUT", headers: { "Content-Type": "application/json" }, body: JSON.stringify(t) })).ok)
        throw new Error("Data Update Error");
    } catch (e2) {
      throw new Error("Data Update Error");
    }
  }, async remove(e) {
    try {
      if (!(await fetch(`${props.dataApi}/${e}`, { method: "DELETE" })).ok)
        throw new Error("Data Deletion Error");
    } catch (e2) {
      throw new Error("Data Deletion Error");
    }
  } }), [props.dataApi, props.dataKeyExpr]), createCellRenderer = useCallback((e) => e.customRender ? (t) => {
    let a = 0, o = 0;
    if (dataGridRef.current) {
      const e2 = dataGridRef.current.instance();
      a = e2.pageSize(), o = e2.pageIndex();
    }
    const r = { value: t.value, data: t.data, rowIndex: t.rowIndex, columnIndex: t.columnIndex, column: { customRender: e.customRender, onClick: e.onClick, trueText: e.trueText, falseText: e.falseText }, text: t.text, row: t.data, index: a * o + t.rowIndex + 1 }, n = getCellRenderer(r.column);
    return n ? n(r) : t.value;
  } : void 0, []), createCellValueCalculator = useCallback((e) => e.calculateCellValue ? (t) => {
    try {
      if ("string" == typeof e.calculateCellValue)
        return new Function("data", `return ${e.calculateCellValue}`)(t);
      if ("function" == typeof e.calculateCellValue)
        return e.calculateCellValue(t);
    } catch (e2) {
      console.error("Error in calculateCellValue:", e2, t);
    }
    return t[e.dataField];
  } : void 0, []), onExporting = (e) => {
    null !== exportingTimeoutRef.current && (clearTimeout(exportingTimeoutRef.current), exportingTimeoutRef.current = null), exportingTimeoutRef.current = setTimeout(() => {
      props.onEvent("exporting");
    });
    const t = new exceljs_minExports.Workbook(), a = t.addWorksheet(trans("datagrid.mainSheet"));
    exportDataGrid({ component: e.component, worksheet: a, autoFilterEnabled: true }).then(() => {
      t.xlsx.writeBuffer().then((e2) => {
        saveAs(new Blob([e2], { type: "application/octet-stream" }), "download.xlsx");
      });
    });
  }, handleColumnSortOrderChange = (e) => {
    var _a, _b, _c;
    const t = (_a = dataGridRef.current) == null ? void 0 : _a.instance().state().columns;
    if (!t || !Array.isArray(t))
      return;
    const a = Number(((_c = (_b = e.fullName) == null ? void 0 : _b.match(/\[(\d+)\]/)) == null ? void 0 : _c[1]) || -1);
    if (-1 === a)
      return;
    const o = t[a];
    if (o) {
      const t2 = o.dataField;
      props.columnControl.updateSort(a, t2, e.value);
    }
  };
  function findDifferences(e, t) {
    const a = (e2) => e2 ? Array.isArray(e2) ? e2 : "object" == typeof e2 && 0 === Object.keys(e2).length ? [] : [e2] : [], o = a(e), r = a(t), n = /* @__PURE__ */ new Map();
    o.forEach((e2) => n.set(e2.key, e2));
    for (const e2 of r) {
      const t2 = n.get(e2.key), a2 = e2.data;
      if (t2) {
        const o2 = t2.data;
        for (const t3 in a2)
          if (o2[t3] !== a2[t3])
            return { columnName: t3, index: dataGridRef.current ? dataGridRef.current.instance().getRowIndexByKey(e2.key) : e2.key, value: a2[t3] };
      } else
        for (const t3 in a2)
          return { columnName: t3, index: dataGridRef.current ? dataGridRef.current.instance().getRowIndexByKey(e2.key) : e2.key, value: a2[t3] };
    }
    return null;
  }
  const onOptionChanged = (e) => {
    var _a, _b, _c, _d;
    switch (e.name) {
      case "columns":
        ((_a = e.fullName) == null ? void 0 : _a.endsWith("sortOrder")) && handleColumnSortOrderChange(e);
        break;
      case "filterValue":
        if ("filterValue" === e.fullName) {
          const t = (_b = dataGridRef.current) == null ? void 0 : _b.instance().option("searchPanel.text");
          let a;
          if ("" !== t) {
            const o = columnItem.flatMap((e2, a2) => {
              const o2 = [e2.dataField, "contains", t];
              return a2 < columnItem.length - 1 ? [o2, "or"] : [o2];
            });
            a = [e.value, "and", ...o];
          } else
            a = e.value;
          onColumnFilterValueChange(a);
        }
        break;
      case "searchPanel":
        if ("searchPanel.text" === e.fullName) {
          const t = columnItem.flatMap((t2, a2) => {
            const o2 = [t2.dataField, "contains", e.value];
            return a2 < columnItem.length - 1 ? [o2, "or"] : [o2];
          }), a = (_c = dataGridRef.current) == null ? void 0 : _c.instance().option("filterValue"), o = a ? [a, "and", ...t] : t;
          onColumnFilterValueChange(o);
        }
        break;
      case "paging":
        switch (e.fullName) {
          case "paging.pageIndex":
            onPageIndexChange(e.value);
            break;
          case "paging.pageSize":
            onPageSizeChange(e.value);
        }
        break;
      case "editing":
        if ("editing.changes" === e.fullName) {
          if (0 !== e.value.length) {
            const t = localStorage.getItem("lastChange");
            let a = {};
            if (t)
              try {
                a = JSON.parse(t);
              } catch {
                a = {};
              }
            (_d = dataGridRef.current) == null ? void 0 : _d.instance().updateDimensions(), localStorage.setItem("lastChange", JSON.stringify(e.value));
            const o = findDifferences(a, e.value);
            props.lastChange.updateLastChange(o), o && dataGridRef.current && props.onEvent("rowUpdated");
          }
        }
    }
  }, onPageIndexChange = useCallback(lodashExports.debounce((e) => {
    props.paginationControl.updatePageIndex(e), props.onEvent("pageIndexChange");
  }, DEBOUNCE_TIME), [props.onEvent, message]), onPageSizeChange = useCallback(lodashExports.debounce((e) => {
    props.paginationControl.updatePageSize(e), props.onEvent("pageSizeChange");
  }, DEBOUNCE_TIME), [props.onEvent, message]), onCellClick = useCallback(lodashExports.debounce((e) => {
    props.onEvent("cellClick");
  }, 50), [props.onEvent, message]), applyChangesToData = (e, t, a) => {
    let o = [...e];
    return t.forEach((e2, t2) => {
      const { data: r, key: n, type: l } = e2;
      if ("update" === l) {
        const e3 = o.findIndex((e4) => e4.ID === n || e4.id === n || e4.key === n);
        if (-1 !== e3) {
          o[e3] = { ...o[e3], ...r };
          const t3 = recalculateItemCellValues(o[e3], a);
          o[e3] = t3;
        } else
          console.warn(`  Không tìm thấy item với key: ${n}`);
      } else if ("insert" === l) {
        const e3 = recalculateItemCellValues(r, a);
        o.push(e3);
      } else if ("remove" === l) {
        const e3 = o.findIndex((e4) => e4.ID === n || e4.id === n || e4.key === n);
        -1 !== e3 && o.splice(e3, 1);
      }
    }), o;
  }, recalculateItemCellValues = (e, t) => {
    const a = { ...e };
    return t.filter((e2) => !!e2.calculateCellValue && ("string" == typeof e2.calculateCellValue ? "" !== e2.calculateCellValue.trim() : "function" == typeof e2.calculateCellValue)).forEach((e2) => {
      const t2 = createCellValueCalculator(e2);
      if (t2) {
        const o = a[e2.dataField], r = t2(a);
        a[e2.dataField] = r, console.log(`    Tính lại ${e2.dataField}: ${o} -> ${r}`);
      }
    }), a;
  }, onSaved = (e) => {
    null !== savedTimeoutRef.current && (clearTimeout(savedTimeoutRef.current), savedTimeoutRef.current = null), savedTimeoutRef.current = setTimeout(() => {
      props.onEvent("saved");
    });
    const t = localStorage.getItem("dataManualEx") || "[]", a = applyChangesToData(JSON.parse(t), e.changes, columnItem);
    localStorage.setItem("dataManualEx", JSON.stringify(a)), props.dataManualEx.updateDataManualEx(a), props.savedRowsDataControl.updateChanges(e.changes);
  }, onSaving = (e) => {
    props.onEvent("saving");
  }, onSelectionChanged = (e) => {
    props.selectionControl.updateSelection(e), props.onEvent("selectionChanged");
  }, onColumnFilterValueChange = useCallback(lodashExports.debounce((e) => {
    props.columnControl.updateFilter(e ?? []), null !== columnFilterValueChangeTimeoutRef.current && (clearTimeout(columnFilterValueChangeTimeoutRef.current), columnFilterValueChangeTimeoutRef.current = null), columnFilterValueChangeTimeoutRef.current = setTimeout(() => {
      props.onEvent("columnFilterValueChange");
    });
  }, DEBOUNCE_TIME), [props.onEvent, message]), customButtonRaw = useMemo(() => props.customButtonRow.map((e) => ({ text: e.children.label.getView(), icon: e.children.icon.getView(), tooltip: e.children.tooltip.getView(), textColor: e.children.textColor.getView(), hoverColor: e.children.hoverColor.getView(), onEvent: e.children.onEvent.getView() })), [props.customButtonRow]), customButton = useDeepStable(customButtonRaw), customButtonHeadRaw = useMemo(() => props.customButtonsHead.map((e) => ({ text: e.children.label.getView(), icon: e.children.icon.getView(), tooltip: e.children.tooltip.getView(), textColor: e.children.textColor.getView(), hoverColor: e.children.hoverColor.getView(), onEvent: e.children.onEvent.getView() })), [props.customButtonsHead]), customButtonHead = useDeepStable(customButtonHeadRaw), toolbarPreparedRef = useRef(false), toolbarItemsRef = useRef([]), buttonCountRef = useRef(0), initialRenderRef = useRef(true), handleToolbarPreparing = useCallback((e) => {
    if (toolbarPreparedRef.current) {
      if (toolbarItemsRef.current.length > 0) {
        const t = e.toolbarOptions.items;
        t.some((e2) => "dxButton" === e2.widget && customButtonHead.some((t2) => {
          var _a;
          return t2.text === ((_a = e2.options) == null ? void 0 : _a.name);
        })) || t.unshift(...toolbarItemsRef.current);
      }
    } else if (customButtonHead.length > 0) {
      initialRenderRef.current && (initialRenderRef.current = false), toolbarPreparedRef.current = true, buttonCountRef.current = customButtonHead.length;
      const t = e.toolbarOptions.items, a = customButtonHead.map((e2) => ({ widget: "dxButton", options: { name: e2.text, onClick: e2.onEvent, template: (t2, a2) => {
        const o = document.createElement("div");
        o.style.display = "flex", o.style.alignItems = "center", o.style.justifyContent = "center", o.style.color = e2.textColor || "#616161", o.style.padding = "6px 12px", o.style.borderRadius = "4px", o.style.transition = "all 0.2s ease-in-out", o.style.cursor = "pointer", e2.tooltip && (o.title = e2.tooltip), o.addEventListener("mouseenter", () => {
          o.style.color = e2.hoverColor || "#1890ff", o.style.backgroundColor = `${e2.hoverColor || "#1890ff"}15`, o.style.transform = "scale(1.05)";
        }), o.addEventListener("mouseleave", () => {
          o.style.color = e2.textColor || "#616161", o.style.backgroundColor = "transparent", o.style.transform = "scale(1)";
        });
        const r = document.createElement("span");
        o.appendChild(r);
        createRoot(r).render(e2.icon), a2.appendChild(o);
      } }, location: "after" }));
      toolbarItemsRef.current = a, t.unshift(...a), buttonCountRef.current === customButtonHead.length && (null !== toolbarPreparingTimeoutRef.current && (clearTimeout(toolbarPreparingTimeoutRef.current), toolbarPreparingTimeoutRef.current = null), toolbarPreparingTimeoutRef.current = setTimeout(() => {
        props.onEvent("toolbarPreparing");
      }));
    }
  }, []), onToolbarPreparing = useRef(handleToolbarPreparing).current, getColumItemValue = useCallback((e) => e.map((e2) => {
    const t = e2.children.items.getView();
    return { caption: e2.children.label.getView(), dataField: e2.children.dataField.getView(), dataType: e2.children.dataType.getView(), formatType: e2.children.formatType.getView(), autoWidth: e2.children.autoWidth.getView(), width: e2.children.width.getView(), editable: e2.children.editable.getView(), exportable: e2.children.exportable.getView(), filterable: e2.children.filterable.getView(), fixedPosition: e2.children.fixedPosition.getView(), headFilterable: e2.children.headFilterable.getView(), hidden: e2.children.hidden.getView(), searchable: e2.children.searchable.getView(), sortable: e2.children.sortable.getView(), isGroup: e2.children.isGroup.getView(), groupIndex: e2.children.groupIndex.getView(), autoExpandGroup: e2.children.autoExpandGroup.getView(), lookup: e2.children.lookup.getView(), lookupData: e2.children.lookupData.getView(), lookupDataFilter: e2.children.lookupDataFilter.getView(), valueExpr: e2.children.valueExpr.getView(), displayExpr: e2.children.displayExpr.getView(), align: e2.children.align.getView(), itemKey: e2.children.itemKey.getView(), ...t.length > 0 && { children: getColumItemValue(t) }, required: e2.children.required.getView(), msgRequired: e2.children.msgRequired.getView(), pattern: e2.children.pattern.getView(), msgPattern: e2.children.msgPattern.getView(), rangeValidation: e2.children.rangeValidation.getView(), msgRange: e2.children.msgRange.getView(), rangeValidationMin: e2.children.rangeValidationMin.getView(), rangeValidationMax: e2.children.rangeValidationMax.getView(), emailValidation: e2.children.emailValidation.getView(), msgEmail: e2.children.msgEmail.getView(), customRender: e2.children.customRender.getView(), calculateCellValue: e2.children.calculateCellValue.getView() };
  }), []), columnItemRaw = useMemo(() => getColumItemValue(props.columns), [props.columns, getColumItemValue]), columnItem = useDeepStable(columnItemRaw), stableManualData = useDeepStable(props.dataManual), dataSourceProps = useMemo(() => ({ dataSource: "manual" === props.dataOptions ? stableManualData : store, keyExpr: props.dataKeyExpr, remoteOperations: "api" === props.dataOptions }), [props.dataOptions, stableManualData, store, props.dataKeyExpr]), eventHandlers = useRef({ onOptionChanged, onExporting, onToolbarPreparing, onCellClick, onSaved, onSelectionChanged, onSaving }).current, configProps = useRef({ allowColumnReordering: true, columnAutoWidth: false, width: "100%", repaintChangesOnly: true, focusedRowEnabled: false, noDataText: trans("datagrid.noDataText"), cacheEnabled: true, twoWayBindingEnabled: false, renderAsync: false, columnResizingMode: "widget", hoverStateEnabled: false, autoExpandAll: false, wordWrapEnabled: false, showBorders: true }).current, dataGridProps = useMemo(() => ({ ...dataSourceProps, ...configProps, ...eventHandlers }), [dataSourceProps, configProps]), updateCalculatedCellValues = (e, t) => {
    const a = t.filter((e2) => !!e2.calculateCellValue && ("string" == typeof e2.calculateCellValue ? "" !== e2.calculateCellValue.trim() : "function" == typeof e2.calculateCellValue));
    if (0 === a.length)
      return e;
    const o = a.map((e2) => ({ col: e2, calculator: createCellValueCalculator(e2) }));
    return e.map((e2) => {
      const t2 = { ...e2 };
      return o.forEach(({ col: a2, calculator: o2 }) => {
        if (o2) {
          const r = o2(e2);
          t2[a2.dataField] = r;
        }
      }), t2;
    });
  };
  useLayoutEffect(() => {
    localStorage.setItem("lastChange", JSON.stringify([])), localStorage.setItem("dataManualEx", JSON.stringify([]));
  }, []), useEffect(() => {
    const e = updateCalculatedCellValues(props.dataManual, columnItem);
    props.dataManualEx.updateDataManualEx(e), localStorage.setItem("dataManualEx", JSON.stringify(e));
  }, []), useEffect(() => (toolbarPreparedRef.current = false, toolbarItemsRef.current = [], buttonCountRef.current = 0, initialRenderRef.current = true, () => {
    toolbarPreparedRef.current = false, toolbarItemsRef.current = [], buttonCountRef.current = 0, initialRenderRef.current = true;
  }), [customButtonHead]);
  const getSummaryItemValue = useCallback((e) => e.map((e2) => ({ key: e2.children.itemKey.getView(), summary: e2.children.summary.getView(), alignByColumn: e2.children.alignByColumn.getView(), alignment: e2.children.alignment.getView(), cssClass: e2.children.cssClass.getView(), column: e2.children.label.getView(), customizeText: e2.children.customizeText.getView(), displayFormat: e2.children.displayFormat.getView(), name: e2.children.name.getView(), showInColumn: e2.children.showInColumn.getView(), showInGroupFooter: e2.children.showInGroupFooter.getView(), skipEmptyValues: e2.children.skipEmptyValues.getView(), summaryType: e2.children.summaryType.getView(), valueFormat: e2.children.valueFormat.getView() })), []), summaryItem = useMemo(() => getSummaryItemValue(props.summary), [props.summary, getSummaryItemValue]), exposedMethods = useMemo(() => ({ datagridTest: () => "abcd", dataManual: () => dataGridRef.current ? dataGridRef.current.instance().getDataSource() : null, getCellValue: (e, t) => dataGridRef.current ? dataGridRef.current.instance().cellValue(e, t) : null, setCellValue: (e, t, a) => {
    dataGridRef.current && dataGridRef.current.instance().cellValue(e, t, a);
  } }), []), getFiltered = (e, t, a) => ({ store: t, filter: e.data ? [a, "=", e.data[a]] : null });
  useEffect(() => {
    window.datagridMethods = exposedMethods;
  }, [exposedMethods]);
  const MemoizedDataGrid = useMemo(() => jsxs(DatagridStyled, { ref: dataGridRef, ...dataGridProps, columnAutoWidth: false, showBorders: props.showBorders, showColumnLines: props.showColumnLines, showRowLines: props.showRowLines, rowAlternationEnabled: props.alternatingRow, wordWrapEnabled: props.wordWrapEnabled, loadPanel: { enabled: true, showIndicator: false, showPane: false }, columnResizingMode: "widget", hoverStateEnabled: false, children: [jsx(ColumnChooser, { enabled: props.showColumnChooser, mode: "select" }), jsx(ColumnFixing, { enabled: props.showColumnFixing }), jsx(HeaderFilter, { visible: props.showFilterPanel }), jsx(FilterRow, { visible: props.showFilterRow }), jsx(FilterPanel, { visible: props.showFilterPanel }), jsx(Scrolling, { mode: "standard", showScrollbar: "always", useNative: true }), jsx(Search, { enabled: props.showSearch }), jsx(Paging, { enabled: props.showPaging, defaultPageSize: props.showPaging ? props.pageSize : void 0, defaultPageIndex: props.pageIndex }), jsx(Pager, { visible: props.showPaging, allowedPageSizes: props.showPaging ? [5, 10, 20, 50, 100, "all"] : void 0, showPageSizeSelector: props.pagerShowPageSizeSelector, showNavigationButtons: props.pagerShowNavigationButtons }), jsx(Grouping, { contextMenuEnabled: props.showGroupContextMenu, expandMode: "buttonClick", autoExpandAll: false }), jsx(GroupPanel, { visible: props.showGroupPanel, emptyPanelText: "" }), jsx(SearchPanel, { visible: props.showSearch, placeholder: trans("datagrid.searchPlaceholder"), highlightCaseSensitive: true, highlightSearchText: true, searchVisibleColumnsOnly: props.searchVisibleColumnsOnly }), jsx(Export, { enabled: props.showExport, formats: [props.exportMode] }), jsx(Selection, { mode: props.selectMode, selectAllMode: props.selectAllMode, showCheckBoxesMode: props.showCheckBoxesMode }), jsx(Sorting, { mode: props.sortingMode }), jsx(Editing, { mode: props.editMode, allowAdding: props.editable, allowUpdating: props.editable, allowDeleting: props.editable, useIcons: props.editShowIcon, confirmDelete: props.confirmDelete }), (props.editable || customButton.length > 0) && jsxs(Column, { type: "buttons", children: [["cell", "row", "form", "popup"].includes(props.editMode) && jsx(Button, { icon: "edit", name: "edit", text: trans("datagrid.edit") }), jsx(Button, { name: "delete", text: trans("datagrid.delete") }), customButton.map((e, t) => jsx(Button, { render: () => jsx(CusButton, { $textColor: e.textColor, $hoverColor: e.hoverColor, title: e.tooltip || e.text, children: e.icon }), text: e.text, onClick: (t2) => {
    props.currentRow.updateCurrentRow(t2.row.data), e.onEvent("onClick");
  } }, t))] }), columnItem.map((e, t) => jsxs(Column, { name: e.dataField, caption: e.caption, dataField: e.dataField, dataType: !e.children && e.dataType, format: !e.children && e.formatType, visible: !e.hidden, allowEditing: e.editable, allowExporting: e.exportable, allowFiltering: e.filterable, fixed: !!["left", "right", "sticky"].includes(e.fixedPosition) || void 0, fixedPosition: ["left", "right", "sticky"].includes(e.fixedPosition) ? e.fixedPosition : void 0, allowGrouping: !e.children, groupIndex: !e.children && e.isGroup ? e.groupIndex : void 0, autoExpandGroup: !e.children && e.isGroup ? e.autoExpandGroup : void 0, cellRender: createCellRenderer(e), calculateCellValue: createCellValueCalculator(e), alignment: e.align, width: "fixed" == e.autoWidth ? e.width : void 0, children: [e.required && jsx(RequiredRule, { message: e.msgRequired }), e.pattern && jsx(PatternRule, { pattern: e.pattern, message: e.msgPattern }), e.rangeValidation && jsx(RangeRule, { min: Number(e.rangeValidationMin), max: Number(e.rangeValidationMax), message: e.msgRange }), e.emailValidation && jsx(EmailRule, { message: e.msgEmail }), e.lookup && jsx(Lookup, { allowClearing: true, dataSource: "" !== e.lookupDataFilter ? (t2) => getFiltered(t2, e.lookupData, e.lookupDataFilter) : e.lookupData, displayExpr: e.displayExpr, valueExpr: e.valueExpr }), e.children && e.children.map((a, o) => jsxs(Column, { name: a.dataField, caption: a.caption, dataField: a.dataField, dataType: !a.children && a.dataType, format: !a.children && a.formatType, visible: !a.hidden, allowEditing: a.editable, allowExporting: a.exportable, allowFiltering: a.filterable, fixed: !!["left", "right", "sticky"].includes(a.fixedPosition) || void 0, fixedPosition: ["left", "right", "sticky"].includes(a.fixedPosition) ? a.fixedPosition : void 0, allowGrouping: !a.children, groupIndex: !a.children && a.isGroup ? a.groupIndex : void 0, autoExpandGroup: !a.children && a.isGroup ? a.autoExpandGroup : void 0, alignment: a.align, width: "fixed" == a.autoWidth ? a.width : void 0, cellRender: createCellRenderer(a), calculateCellValue: createCellValueCalculator(a), children: [a.required && jsx(RequiredRule, { message: e.msgRequired }), a.pattern && jsx(PatternRule, { pattern: a.pattern, message: e.msgPattern }), a.rangeValidation && jsx(RangeRule, { min: a.rangeValidationMin, max: a.rangeValidationMax, message: e.msgRange }), a.emailValidation && jsx(EmailRule, { message: e.msgEmail }), a.lookup && jsx(Lookup, { allowClearing: true, dataSource: a.lookupData, displayExpr: a.displayExpr, valueExpr: a.valueExpr })] }, a.caption || `${t}-${o}`))] }, e.caption || t)), summaryItem && jsx(Summary, { recalculateWhileEditing: true, calculateCustomSummary: (options) => {
    if (props.code)
      try {
        eval(props.code);
      } catch (e) {
        console.error("Error in custom summary code:", e);
      }
  }, children: summaryItem.map((e) => "group" === e.summary ? jsx(GroupItem, { alignByColumn: e.alignByColumn, column: e.column, displayFormat: e.displayFormat ?? void 0, name: e.name ?? void 0, showInColumn: e.showInColumn ?? void 0, showInGroupFooter: e.showInGroupFooter ?? void 0, skipEmptyValues: e.skipEmptyValues ?? void 0, summaryType: e.summaryType, valueFormat: e.valueFormat }, e.key) : jsx(TotalItem, { alignment: e.alignment ?? void 0, column: e.column, cssClass: e.cssClass ?? void 0, displayFormat: e.displayFormat ?? void 0, name: e.name ?? void 0, showInColumn: e.showInColumn ?? void 0, skipEmptyValues: e.skipEmptyValues ?? void 0, summaryType: e.summaryType, valueFormat: e.valueFormat }, e.key)) })] }), [dataGridProps, props.showBorders, props.showColumnLines, props.showRowLines, props.alternatingRow, props.wordWrapEnabled, columnItem, customButton]);
  return jsx(Fragment, { children: MemoizedDataGrid });
}).setPropertyViewFn((e) => jsxs(Fragment, { children: [jsxs(Section, { name: trans("datagrid.dataConfigs"), children: [e.dataOptions.propertyView({ label: trans("datagrid.mode"), radioButton: true }), "manual" === e.dataOptions.getView() ? e.dataManual.propertyView({ label: trans("datagrid.data") }) : e.dataApi.propertyView({ label: trans("datagrid.api") }), e.dataKeyExpr.propertyView({ label: trans("datagrid.keyExpr") })] }), jsxs(Section, { name: trans("datagrid.columns"), children: [columnPropertyView(e.columns), e.showColumnChooser.propertyView({ label: trans("datagrid.showChooser") }), e.showColumnFixing.propertyView({ label: trans("datagrid.fixingColumns") })] }), jsx(Section, { name: trans("datagrid.customButtonsHead"), children: columnPropertyView(e.customButtonsHead) }), jsx(Section, { name: trans("datagrid.customButtonsRow"), children: columnPropertyView(e.customButtonRow) }), jsxs(Section, { name: trans("datagrid.summary"), children: [columnPropertyView(e.summary), e.code.propertyView({ label: trans("datagrid.customCode") })] }), jsxs(Section, { name: trans("datagrid.editing"), children: [e.editable.propertyView({ label: trans("datagrid.editable") }), e.editable.getView() && e.editMode.propertyView({ label: trans("datagrid.mode") }), e.editable.getView() && e.editShowIcon.propertyView({ label: trans("datagrid.useIcons") }), e.editable.getView() && e.confirmDelete.propertyView({ label: trans("datagrid.confirmDelete") })] }), jsx(Section, { name: trans("datagrid.sorting"), children: e.sortingMode.propertyView({ label: trans("datagrid.mode") }) }), jsxs(Section, { name: trans("datagrid.filteringSearching"), children: [e.showFilterPanel.propertyView({ label: trans("datagrid.showFilterPanel") }), e.showFilterRow.propertyView({ label: trans("datagrid.showFilterRow") }), e.showSearch.propertyView({ label: trans("datagrid.showSearch") }), e.showSearch.getView() && e.searchVisibleColumnsOnly.propertyView({ label: trans("datagrid.visibleColumnsOnly") })] }), jsxs(Section, { name: trans("datagrid.paging"), children: [e.showPaging.propertyView({ label: trans("datagrid.showPagination") }), e.showPaging.getView() && e.pagerMode.propertyView({ label: trans("datagrid.mode") }), e.showPaging.getView() && e.pageSize.propertyView({ label: trans("datagrid.pageSize") }), e.showPaging.getView() && e.pageIndex.propertyView({ label: trans("datagrid.pageIndex") }), e.showPaging.getView() && e.pagerShowPageSizeSelector.propertyView({ label: trans("datagrid.showSizeSelector") }), e.showPaging.getView() && e.pagerShowInfo.propertyView({ label: trans("datagrid.showInfo") }), e.showPaging.getView() && "compact" !== e.pagerMode.getView() && e.pagerShowNavigationButtons.propertyView({ label: trans("datagrid.showNavigation") })] }), jsx(Section, { name: trans("datagrid.scrolling"), children: e.showScrolling.propertyView({ label: trans("datagrid.showScrollbar") }) }), jsxs(Section, { name: trans("datagrid.grouping"), children: [e.showGroupPanel.propertyView({ label: trans("datagrid.showPanel") }), e.showGroupContextMenu.propertyView({ label: trans("datagrid.showContextMenu") }), e.groupAutoExpand.propertyView({ label: trans("datagrid.autoExpand") })] }), jsxs(Section, { name: trans("datagrid.selection"), children: [e.selectMode.propertyView({ label: trans("datagrid.mode") }), e.selectAllMode.propertyView({ label: trans("datagrid.selectAll"), radioButton: true }), e.showCheckBoxesMode.propertyView({ label: trans("datagrid.showCheckBoxes") })] }), jsxs(Section, { name: trans("datagrid.interaction"), children: [e.onEvent.getPropertyView(), e.loading.propertyView({ label: trans("datagrid.loading") })] }), jsxs(Section, { name: trans("datagrid.export"), children: [e.showExport.propertyView({ label: trans("datagrid.showExport") }), e.showExport.getView() && e.exportMode.propertyView({ label: trans("datagrid.fileType"), radioButton: true })] }), jsx(Section, { name: trans("datagrid.gridStyles"), children: e.showBorders.propertyView({ label: trans("datagrid.showBorder") }) }), jsxs(Section, { name: trans("datagrid.columnStyle"), children: [e.columnAutoWidth.propertyView({ label: trans("datagrid.autoWidth") }), e.columnHidingEnabled.propertyView({ label: trans("datagrid.hidingEnabled") }), e.showColumnLines.propertyView({ label: trans("datagrid.showColumnLines") })] }), jsxs(Section, { name: trans("datagrid.rowStyle"), children: [e.alternatingRow.propertyView({ label: trans("datagrid.alternatingRow") }), e.focusedRowEnabled.propertyView({ label: trans("datagrid.focusRow") }), e.showRowLines.propertyView({ label: trans("datagrid.showRowLines") })] }), jsx(Section, { name: trans("datagrid.cellStyle"), children: e.wordWrapEnabled.propertyView({ label: trans("datagrid.wordWrap") }) })] })).setExposeMethodConfigs([{ method: { name: "cellValue", params: [{ name: "rowIndex", type: "number", description: "The index of the row" }, { name: "dataField", type: "string", description: "The data field name of the column" }, { name: "value", type: "string", description: "The new value to set (optional)" }] }, execute(e, t) {
  try {
    const e2 = window.datagridMethods;
    return e2 ? 3 === t.length ? (e2.setCellValue(t[0], t[1], t[2]), true) : e2.getCellValue(t[0], t[1]) : null;
  } catch (e2) {
    return console.error("Error in cellValue:", e2), null;
  }
} }]).build(), DatagridComp = withExposingConfigs(DatagridBasicComp, [new NameConfig("dataManual", "dataManualDesc"), new CompDepsConfig("selectedRows", (e) => ({ selectedRowKeys: e.children.selectionControl.children.selectedRowKeys.node(), selectedRowsData: e.children.selectionControl.children.selectedRowsData.node() }), (e) => ({ selectedRowsData: e.selectedRowsData || [], selectedRowKeys: e.selectedRowKeys || [] }), "Get selected rows data"), new CompDepsConfig("pagination", (e) => ({ pageIndex: e.children.paginationControl.children.pageIndex.node(), pageSize: e.children.paginationControl.children.pageSize.node() }), (e) => ({ pageIndex: e.pageIndex ? e.pageIndex + 1 : 1, pageSize: e.pageSize || 5 }), "Get pagination data"), new CompDepsConfig("selectedCell", (e) => ({ cellValue: e.children.cellControl.children.cellValue.node(), rowIndex: e.children.cellControl.children.rowIndex.node(), columnIndex: e.children.cellControl.children.columnIndex.node(), isRowExpanded: e.children.cellControl.children.isRowExpanded.node() }), (e) => ({ cellValue: e.cellValue || null, rowIndex: e.rowIndex || -1, columnIndex: e.columnIndex || -1, isRowExpanded: e.isRowExpanded || false }), "Get focused cell information including value, position and row expanded state"), new CompDepsConfig("columnOptions", (e) => ({ filters: e.children.columnControl.children.filters.node(), sorts: e.children.columnControl.children.sorts.node(), combinedFilter: e.children.columnControl.children.combinedFilter.node() }), (e) => ({ filters: e.filters || [], sorts: e.sorts || [], combinedFilter: e.combinedFilter || "" }), "Get column filter and sort information"), new CompDepsConfig("currentRow", (e) => ({ data: e.children.currentRow.children.rowData.node() }), (e) => e.data || {}, "Get column filter and sort information"), new CompDepsConfig("lastChange", (e) => ({ changes: e.children.lastChange.children.lastChange.node() }), (e) => e.changes || [], "lastChange"), new CompDepsConfig("dataManualEx", (e) => ({ changes: e.children.dataManualEx.children.dataManualEx.node() }), (e) => e.changes || [], "dataManualEx"), new CompDepsConfig("lastChange", (e) => ({ changes: e.children.lastChange.children.lastChange.node() }), (e) => e.changes || [], "lastChange"), new CompDepsConfig("dataManualEx", (e) => ({ changes: e.children.dataManualEx.children.dataManualEx.node() }), (e) => e.changes || [], "dataManualEx"), new CompDepsConfig("savedChangesData", (e) => ({ changes: e.children.savedRowsDataControl.children.savedChanges.node() }), (e) => e.changes || [], "savedChangdData"), new CompDepsConfig("editedChangesData", (e) => ({ changes: e.children.savedRowsDataControl.children.editedChanges.node() }), (e) => e.changes || [], "editedChangesData")]);
function defaultDatagridData() {
  const e = i18nObjs.datagrid.defaultData, t = e.length > 0 ? Object.keys(e[0]) : void 0, a = t ? t.map((e2) => ({ dataField: e2, label: e2, dataType: "string" })) : void 0;
  return { dataManual: JSON.stringify(e, null, " "), dataApi: "", columns: a, editable: true, exportMode: "xlsx", pageSize: 5, showSummary: true, showBorders: true };
}
export {
  DEBOUNCE_TIME,
  DatagridComp,
  defaultDatagridData
};
