@gridnexa/angular 0.0.1

package/dist/index.cjs

@@ -0,0 +1,711 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  GridNexaAngularComponent: () => GridNexaAngularComponent
+});
+module.exports = __toCommonJS(index_exports);
+var import_core = require("@angular/core");
+__reExport(index_exports, require("@gridnexa/core"), module.exports);
+function rawValue(row, column) {
+  return column.valueGetter ? column.valueGetter(row) : row[column.field];
+}
+function evaluateFormula(row, columns, expression) {
+  const formula = expression.trim().slice(1);
+  if (!/^[\w\s.+\-*/()%]+$/.test(formula)) return expression;
+  const resolved = columns.reduce((current, column) => {
+    const value2 = Number(rawValue(row, column));
+    return current.replace(
+      new RegExp(`\\b${column.id}\\b|\\b${String(column.field)}\\b`, "g"),
+      Number.isFinite(value2) ? String(value2) : "0"
+    );
+  }, formula);
+  try {
+    return Function(`"use strict"; return (${resolved});`)();
+  } catch {
+    return expression;
+  }
+}
+function value(row, column, columns) {
+  const current = rawValue(row, column);
+  return typeof current === "string" && current.trim().startsWith("=") ? evaluateFormula(row, columns, current) : current;
+}
+function format(row, column, columns) {
+  const current = value(row, column, columns);
+  return column.valueFormatter ? column.valueFormatter(current) : String(current ?? "");
+}
+function matches(row, column, filter, columns) {
+  const raw = value(row, column, columns);
+  const text = String(raw ?? "").toLowerCase();
+  const needle = String(filter.value ?? "").toLowerCase();
+  const numeric = Number(raw);
+  const from = Number(filter.value);
+  const to = Number(filter.valueTo);
+  if (filter.operator === "blank") return !text.trim();
+  if (filter.operator === "notBlank") return Boolean(text.trim());
+  if (filter.operator === "in") return (filter.values ?? []).map(String).includes(String(raw ?? ""));
+  if (!needle && filter.operator !== "between") return true;
+  if (filter.operator === "equals") return text === needle;
+  if (filter.operator === "startsWith") return text.startsWith(needle);
+  if (filter.operator === "endsWith") return text.endsWith(needle);
+  if (filter.operator === "gt") return numeric > from;
+  if (filter.operator === "gte") return numeric >= from;
+  if (filter.operator === "lt") return numeric < from;
+  if (filter.operator === "lte") return numeric <= from;
+  if (filter.operator === "between") return numeric >= from && numeric <= to;
+  return text.includes(needle);
+}
+function activeAdvanced(model) {
+  if (!model) return false;
+  if (model.kind === "group") return model.conditions.some(activeAdvanced);
+  if (model.operator === "blank" || model.operator === "notBlank") return true;
+  if (model.operator === "in") return Boolean(model.values?.length);
+  return model.value != null && String(model.value).trim() !== "";
+}
+function matchesAdvanced(row, columns, model) {
+  if (!model || !activeAdvanced(model)) return true;
+  if (model.kind === "group") {
+    const active = model.conditions.filter(activeAdvanced);
+    return model.joinOperator === "or" ? active.some((condition) => matchesAdvanced(row, columns, condition)) : active.every((condition) => matchesAdvanced(row, columns, condition));
+  }
+  const column = columns.find((entry) => entry.id === model.columnId);
+  return column ? matches(row, column, { operator: model.operator, value: model.value, valueTo: model.valueTo, values: model.values }, columns) : true;
+}
+function aggregate(values, aggregation) {
+  if (aggregation === "count") return values.length;
+  const numbers = values.map(Number).filter((entry) => !Number.isNaN(entry));
+  if (!numbers.length) return 0;
+  if (aggregation === "avg") return numbers.reduce((sum, entry) => sum + entry, 0) / numbers.length;
+  if (aggregation === "min") return Math.min(...numbers);
+  if (aggregation === "max") return Math.max(...numbers);
+  return numbers.reduce((sum, entry) => sum + entry, 0);
+}
+function buildPivot(rows, columns, groupBy, pivotBy, pivotValueColumns, pivotAggregation = "sum") {
+  if (!pivotBy) return { columns, rows, active: false };
+  const valueFields = pivotValueColumns?.length ? pivotValueColumns : columns.filter((column) => rows.some((row) => typeof value(row, column, columns) === "number")).map((column) => column.field);
+  const pivotLabels = Array.from(new Set(rows.map((row) => String(row[pivotBy] ?? "Blank"))));
+  const groupLabels = Array.from(new Set(rows.map((row) => String(groupBy ? row[groupBy] : "Total"))));
+  const pivotColumns = [
+    { id: "__group", field: "__group", headerName: groupBy ?? "Group", width: 180 },
+    ...pivotLabels.flatMap(
+      (label) => valueFields.map((field) => ({
+        id: `${label}_${String(field)}`,
+        field: `${label}_${String(field)}`,
+        headerName: `${label} ${String(field)}`,
+        width: 140
+      }))
+    )
+  ];
+  const pivotRows = groupLabels.map((group) => {
+    const output = { __group: group };
+    pivotLabels.forEach((pivot) => {
+      const bucket = rows.filter((row) => String(row[pivotBy] ?? "Blank") === pivot && String(groupBy ? row[groupBy] : "Total") === group);
+      valueFields.forEach((field) => {
+        output[`${pivot}_${String(field)}`] = aggregate(bucket.map((row) => row[field]), pivotAggregation);
+      });
+    });
+    return output;
+  });
+  return { columns: pivotColumns, rows: pivotRows, active: true };
+}
+function cell(text, tag = "td") {
+  const element = document.createElement(tag);
+  element.textContent = text;
+  return element;
+}
+var GridNexaAngularComponent = class {
+  columns = [];
+  rows = [];
+  mergedHeaders;
+  rowNumbers = false;
+  checkboxSelection = false;
+  enableRangeSelection = true;
+  enableFillHandle = true;
+  enableUndoRedo = true;
+  quickFilterText = "";
+  columnFilters;
+  externalFilter;
+  advancedFilter;
+  advancedFilterModel;
+  pageSize;
+  groupBy;
+  pivotBy;
+  pivotValueColumns;
+  pivotAggregation = "sum";
+  getRowId;
+  getTreeDataPath;
+  masterDetailRenderer;
+  transaction;
+  localeText;
+  rowSelectionChange = new import_core.EventEmitter();
+  cellClick = new import_core.EventEmitter();
+  cellValueChange = new import_core.EventEmitter();
+  advancedFilterModelChange = new import_core.EventEmitter();
+  pivotModelChange = new import_core.EventEmitter();
+  serverSideOperation = new import_core.EventEmitter();
+  host;
+  selected = /* @__PURE__ */ new Set();
+  pageIndex = 0;
+  sortState = null;
+  hiddenColumnIds = /* @__PURE__ */ new Set();
+  activeCell = null;
+  findText = "";
+  toolsOpen = false;
+  draggedColumnId = null;
+  undoStack = [];
+  redoStack = [];
+  ngAfterViewInit() {
+    this.render();
+  }
+  ngOnChanges() {
+    this.hiddenColumnIds = new Set(this.columns.filter((column) => column.hidden).map((column) => column.id));
+    this.applyTransaction();
+    this.render();
+  }
+  rowId(row, index) {
+    return this.getRowId?.(row, index) ?? index;
+  }
+  applyTransaction() {
+    if (!this.transaction) return;
+    const removeIds = new Set((this.transaction.remove ?? []).map((row, index) => this.rowId(row, index)));
+    const updates = new Map((this.transaction.update ?? []).map((row, index) => [this.rowId(row, index), row]));
+    this.rows = [
+      ...this.rows.filter((row, index) => !removeIds.has(this.rowId(row, index))).map((row, index) => updates.get(this.rowId(row, index)) ?? row),
+      ...this.transaction.add ?? []
+    ];
+    this.transaction = void 0;
+  }
+  visibleRows() {
+    const query = this.quickFilterText.trim().toLowerCase();
+    const rows = this.rows.filter((row) => {
+      if (this.externalFilter && !this.externalFilter(row)) return false;
+      if (this.advancedFilter && !this.advancedFilter(row)) return false;
+      if (!matchesAdvanced(row, this.columns, this.advancedFilterModel)) return false;
+      if (query && !this.columns.some((column2) => String(value(row, column2, this.columns) ?? "").toLowerCase().includes(query))) return false;
+      return Object.entries(this.columnFilters ?? {}).every(([columnId, filter]) => {
+        const column2 = this.columns.find((entry) => entry.id === columnId);
+        return column2 ? matches(row, column2, filter, this.columns) : true;
+      });
+    });
+    if (!this.sortState) return rows;
+    const column = this.columns.find((entry) => entry.id === this.sortState?.columnId);
+    if (!column) return rows;
+    return [...rows].sort((left, right) => {
+      const comparison = String(value(left, column, this.columns) ?? "").localeCompare(String(value(right, column, this.columns) ?? ""), void 0, { numeric: true });
+      return this.sortState?.direction === "asc" ? comparison : -comparison;
+    });
+  }
+  exportRows(columns, rows, excel = false) {
+    const content = excel ? `<table><tr>${columns.map((column) => `<th>${column.headerName}</th>`).join("")}</tr>${rows.map((row) => `<tr>${columns.map((column) => `<td>${format(row, column, this.columns)}</td>`).join("")}</tr>`).join("")}</table>` : [columns.map((column) => JSON.stringify(column.headerName)).join(","), ...rows.map((row) => columns.map((column) => JSON.stringify(format(row, column, this.columns))).join(","))].join("\n");
+    const blob = new Blob([content], { type: excel ? "application/vnd.ms-excel" : "text/csv;charset=utf-8" });
+    const link = document.createElement("a");
+    link.href = URL.createObjectURL(blob);
+    link.download = excel ? "gridnexa-export.xls" : "gridnexa-export.csv";
+    link.click();
+    URL.revokeObjectURL(link.href);
+  }
+  setCellValue(row, rowIndex, column, nextValue, trackHistory = true) {
+    const oldValue = rawValue(row, column);
+    const newValue = typeof oldValue === "number" ? Number(nextValue) : nextValue;
+    if (trackHistory && this.enableUndoRedo) {
+      this.undoStack.push({ row, rowIndex, column, oldValue, newValue });
+      this.redoStack = [];
+    }
+    row[column.field] = newValue;
+    this.cellValueChange.emit({ row, rowIndex, column, oldValue, newValue });
+  }
+  undo() {
+    const edit = this.undoStack.pop();
+    if (!edit) return;
+    this.setCellValue(edit.row, edit.rowIndex, edit.column, edit.oldValue, false);
+    this.redoStack.push(edit);
+    this.render();
+  }
+  redo() {
+    const edit = this.redoStack.pop();
+    if (!edit) return;
+    this.setCellValue(edit.row, edit.rowIndex, edit.column, edit.newValue, false);
+    this.undoStack.push(edit);
+    this.render();
+  }
+  fillDown() {
+    if (!this.activeCell || !this.enableFillHandle) return;
+    const sourceRow = this.rows[this.activeCell.rowIndex];
+    const targetRow = this.rows[this.activeCell.rowIndex + 1];
+    const column = this.columns.find((entry) => entry.id === this.activeCell?.columnId);
+    if (!sourceRow || !targetRow || !column || column.editable === false) return;
+    this.setCellValue(targetRow, this.activeCell.rowIndex + 1, column, rawValue(sourceRow, column));
+    this.render();
+  }
+  async copyActiveCell() {
+    if (!this.activeCell || typeof navigator === "undefined") return;
+    const row = this.rows[this.activeCell.rowIndex];
+    const column = this.columns.find((entry) => entry.id === this.activeCell?.columnId);
+    if (!row || !column) return;
+    await navigator.clipboard?.writeText(format(row, column, this.columns));
+  }
+  async pasteActiveCell() {
+    if (!this.activeCell || typeof navigator === "undefined") return;
+    const row = this.rows[this.activeCell.rowIndex];
+    const column = this.columns.find((entry) => entry.id === this.activeCell?.columnId);
+    if (!row || !column || column.editable === false) return;
+    const text = await navigator.clipboard?.readText();
+    this.setCellValue(row, this.activeCell.rowIndex, column, text);
+    this.render();
+  }
+  moveRow(rowIndex, direction) {
+    const nextIndex = rowIndex + direction;
+    if (nextIndex < 0 || nextIndex >= this.rows.length) return;
+    const rows = [...this.rows];
+    const [row] = rows.splice(rowIndex, 1);
+    rows.splice(nextIndex, 0, row);
+    this.rows = rows;
+    this.render();
+  }
+  moveColumn(sourceId, targetId) {
+    if (sourceId === targetId) return;
+    const columns = [...this.columns];
+    const sourceIndex = columns.findIndex((column2) => column2.id === sourceId);
+    const targetIndex = columns.findIndex((column2) => column2.id === targetId);
+    if (sourceIndex < 0 || targetIndex < 0) return;
+    const [column] = columns.splice(sourceIndex, 1);
+    columns.splice(targetIndex, 0, column);
+    this.columns = columns;
+    this.render();
+  }
+  updateAdvancedFilter(columnId, operator, filterValue) {
+    const model = {
+      kind: "group",
+      joinOperator: "and",
+      conditions: [{ kind: "rule", columnId, operator, value: filterValue }]
+    };
+    this.advancedFilterModel = model;
+    this.advancedFilterModelChange.emit(model);
+    this.render();
+  }
+  updatePivot(next) {
+    if ("groupBy" in next) this.groupBy = next.groupBy;
+    if ("pivotBy" in next) this.pivotBy = next.pivotBy;
+    if ("pivotValueColumns" in next) this.pivotValueColumns = next.pivotValueColumns;
+    if ("pivotAggregation" in next && next.pivotAggregation) this.pivotAggregation = next.pivotAggregation;
+    this.pivotModelChange.emit({
+      groupBy: this.groupBy,
+      pivotBy: this.pivotBy,
+      pivotValueColumns: this.pivotValueColumns ?? [],
+      pivotAggregation: this.pivotAggregation
+    });
+    this.pageIndex = 0;
+    this.render();
+  }
+  render() {
+    if (!this.host) return;
+    const sourceRows = this.visibleRows();
+    const pivot = buildPivot(sourceRows, this.columns, this.groupBy, this.pivotBy, this.pivotValueColumns, this.pivotAggregation);
+    const columns = pivot.columns.filter((column) => !this.hiddenColumnIds.has(column.id) && !column.hidden);
+    const pageRows = this.pageSize ? pivot.rows.slice(this.pageIndex * this.pageSize, this.pageIndex * this.pageSize + this.pageSize) : pivot.rows;
+    const root = document.createElement("div");
+    root.className = "gridnexa-angular-grid";
+    root.append(this.renderToolbar(columns, pivot.rows), this.renderTable(columns, pageRows));
+    if (this.toolsOpen) root.appendChild(this.renderToolsPanel());
+    root.appendChild(this.renderStatus(pivot.rows.length));
+    this.host.nativeElement.replaceChildren(root);
+    this.serverSideOperation.emit({
+      sortModel: this.sortState ? [this.sortState] : [],
+      filterModel: this.columnFilters,
+      advancedFilterModel: this.advancedFilterModel,
+      selectedRowIds: Array.from(this.selected),
+      pageIndex: this.pageIndex,
+      pageSize: this.pageSize,
+      groupBy: this.groupBy,
+      pivotBy: this.pivotBy,
+      pivotValueColumns: this.pivotValueColumns,
+      pivotAggregation: this.pivotAggregation,
+      treeData: Boolean(this.getTreeDataPath),
+      masterDetail: Boolean(this.masterDetailRenderer)
+    });
+  }
+  renderToolbar(columns, rows) {
+    const toolbar = document.createElement("div");
+    toolbar.style.cssText = "display:flex;gap:8px;justify-content:space-between;align-items:center;padding:10px;background:#f8fbff;border:1px solid #dbe3ef";
+    toolbar.append(`${rows.length} rows`);
+    const actions = document.createElement("div");
+    actions.style.cssText = "display:flex;gap:6px;flex-wrap:wrap";
+    const find = document.createElement("input");
+    find.type = "search";
+    find.placeholder = "Find cell";
+    find.value = this.findText;
+    find.style.cssText = "min-height:32px;padding:0 10px;border:1px solid #bfdbfe;border-radius:8px";
+    find.addEventListener("input", () => {
+      this.findText = find.value;
+      this.render();
+    });
+    const pageCount = this.pageSize ? Math.max(1, Math.ceil(rows.length / this.pageSize)) : 1;
+    if (this.pageSize) {
+      const prev = this.button("Prev", () => {
+        this.pageIndex = Math.max(0, this.pageIndex - 1);
+        this.render();
+      });
+      prev.disabled = this.pageIndex <= 0;
+      const next = this.button("Next", () => {
+        this.pageIndex = Math.min(pageCount - 1, this.pageIndex + 1);
+        this.render();
+      });
+      next.disabled = this.pageIndex >= pageCount - 1;
+      actions.append(prev, ` Page ${this.pageIndex + 1} `, next);
+    }
+    actions.appendChild(find);
+    if (this.enableUndoRedo) {
+      const undo = this.button("Undo", () => this.undo());
+      undo.disabled = !this.undoStack.length;
+      const redo = this.button("Redo", () => this.redo());
+      redo.disabled = !this.redoStack.length;
+      actions.append(undo, redo);
+    }
+    if (this.enableFillHandle) actions.appendChild(this.button("Fill", () => this.fillDown()));
+    actions.append(
+      this.button("Copy", () => void this.copyActiveCell()),
+      this.button("Paste", () => void this.pasteActiveCell()),
+      this.button(this.toolsOpen ? "Hide tools" : "Tools", () => {
+        this.toolsOpen = !this.toolsOpen;
+        this.render();
+      }),
+      this.button("Export CSV", () => this.exportRows(columns, rows)),
+      this.button("Export Excel", () => this.exportRows(columns, rows, true))
+    );
+    toolbar.appendChild(actions);
+    return toolbar;
+  }
+  renderTable(columns, rows) {
+    const table = document.createElement("table");
+    table.style.cssText = "width:100%;border-collapse:collapse";
+    const thead = document.createElement("thead");
+    const leading = Number(this.checkboxSelection) + Number(this.rowNumbers);
+    if (this.mergedHeaders?.length) thead.appendChild(this.renderMergedHeaders(columns, leading));
+    const header = document.createElement("tr");
+    if (this.checkboxSelection) header.appendChild(cell("", "th"));
+    if (this.rowNumbers) header.appendChild(cell("#", "th"));
+    columns.forEach((column) => {
+      const th = cell(`${column.headerName}${this.sortState?.columnId === column.id ? this.sortState.direction === "asc" ? " \u2191" : " \u2193" : ""}`, "th");
+      th.style.cssText = "padding:10px;border:1px solid #dbe3ef;background:#f8fbff;text-align:left";
+      th.draggable = true;
+      th.addEventListener("dragstart", () => {
+        this.draggedColumnId = column.id;
+      });
+      th.addEventListener("dragover", (event) => event.preventDefault());
+      th.addEventListener("drop", (event) => {
+        event.preventDefault();
+        if (this.draggedColumnId) this.moveColumn(this.draggedColumnId, column.id);
+        this.draggedColumnId = null;
+      });
+      th.addEventListener("click", () => {
+        if (column.sortable === false) return;
+        this.sortState = this.sortState?.columnId !== column.id ? { columnId: column.id, direction: "asc" } : this.sortState.direction === "asc" ? { columnId: column.id, direction: "desc" } : null;
+        this.render();
+      });
+      header.appendChild(th);
+    });
+    thead.appendChild(header);
+    table.appendChild(thead);
+    const tbody = document.createElement("tbody");
+    rows.forEach((row, rowIndex) => this.appendRow(tbody, row, rowIndex, columns, leading));
+    table.appendChild(tbody);
+    return table;
+  }
+  renderMergedHeaders(columns, leading) {
+    const row = document.createElement("tr");
+    if (leading) {
+      const spacer = cell("", "th");
+      spacer.colSpan = leading;
+      row.appendChild(spacer);
+    }
+    (this.mergedHeaders ?? []).forEach((header) => {
+      const count = header.columnIds.filter((columnId) => columns.some((column) => column.id === columnId)).length;
+      if (!count) return;
+      const th = cell(header.headerName, "th");
+      th.colSpan = count;
+      th.style.cssText = "padding:8px;border:1px solid #bfdbfe;background:#e8f1ff;text-align:center";
+      row.appendChild(th);
+    });
+    return row;
+  }
+  appendRow(tbody, row, rowIndex, columns, leading) {
+    const tr = document.createElement("tr");
+    if (this.checkboxSelection) {
+      const td = document.createElement("td");
+      const checkbox = document.createElement("input");
+      checkbox.type = "checkbox";
+      checkbox.checked = this.selected.has(this.rowId(row, rowIndex));
+      checkbox.addEventListener("change", () => {
+        checkbox.checked ? this.selected.add(this.rowId(row, rowIndex)) : this.selected.delete(this.rowId(row, rowIndex));
+        this.rowSelectionChange.emit(this.rows.filter((entry, index) => this.selected.has(this.rowId(entry, index))));
+        this.render();
+      });
+      td.appendChild(checkbox);
+      tr.appendChild(td);
+    }
+    if (this.rowNumbers) {
+      const rowNumber = cell(String(rowIndex + 1));
+      const up = this.button("\u2191", () => this.moveRow(rowIndex, -1));
+      up.disabled = rowIndex <= 0;
+      const down = this.button("\u2193", () => this.moveRow(rowIndex, 1));
+      down.disabled = rowIndex >= this.rows.length - 1;
+      rowNumber.append(" ", up, down);
+      tr.appendChild(rowNumber);
+    }
+    columns.forEach((column, columnIndex) => {
+      const td = cell(format(row, column, this.columns));
+      td.style.cssText = "padding:10px;border:1px solid #dbe3ef";
+      if (this.activeCell?.rowIndex === rowIndex && this.activeCell.columnId === column.id) {
+        td.style.outline = "2px solid #2563eb";
+        td.style.outlineOffset = "-2px";
+      }
+      if (this.findText && format(row, column, this.columns).toLowerCase().includes(this.findText.toLowerCase())) {
+        td.style.background = "rgba(37,99,235,.1)";
+      }
+      if (this.getTreeDataPath && columnIndex === 0) td.style.paddingLeft = `${12 + Math.max(0, this.getTreeDataPath(row).length - 1) * 24}px`;
+      td.addEventListener("click", () => {
+        this.activeCell = { rowIndex, columnId: column.id };
+        this.cellClick.emit({ row, rowIndex, column });
+        this.render();
+      });
+      if (column.editable) td.addEventListener("dblclick", () => this.editCell(td, row, rowIndex, column));
+      tr.appendChild(td);
+    });
+    tbody.appendChild(tr);
+    if (this.masterDetailRenderer) {
+      const detailRow = document.createElement("tr");
+      const detail = document.createElement("td");
+      detail.colSpan = columns.length + leading;
+      const content = this.masterDetailRenderer(row);
+      content instanceof Node ? detail.appendChild(content) : detail.textContent = String(content ?? "");
+      detailRow.appendChild(detail);
+      tbody.appendChild(detailRow);
+    }
+  }
+  editCell(td, row, rowIndex, column) {
+    const oldValue = rawValue(row, column);
+    const input = document.createElement("input");
+    input.value = String(oldValue ?? "");
+    td.replaceChildren(input);
+    input.focus();
+    input.addEventListener("blur", () => {
+      this.setCellValue(row, rowIndex, column, input.value);
+      this.render();
+    }, { once: true });
+  }
+  renderToolsPanel() {
+    const panel = document.createElement("div");
+    panel.style.cssText = "display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;padding:12px;border:1px solid #dbe3ef;border-top:0;background:#f8fbff";
+    const columnsSection = document.createElement("section");
+    columnsSection.appendChild(document.createElement("strong")).textContent = "Columns";
+    this.columns.forEach((column) => {
+      const label = document.createElement("label");
+      label.style.cssText = "display:flex;gap:8px;align-items:center;margin-top:6px";
+      const checkbox = document.createElement("input");
+      checkbox.type = "checkbox";
+      checkbox.checked = !this.hiddenColumnIds.has(column.id);
+      checkbox.addEventListener("change", () => {
+        checkbox.checked ? this.hiddenColumnIds.delete(column.id) : this.hiddenColumnIds.add(column.id);
+        this.render();
+      });
+      label.append(checkbox, column.headerName);
+      columnsSection.appendChild(label);
+    });
+    const pivotSection = document.createElement("section");
+    pivotSection.appendChild(document.createElement("strong")).textContent = "Pivot";
+    pivotSection.append(
+      this.select("Row group", this.groupBy, "No group", (value2) => this.updatePivot({ groupBy: value2 })),
+      this.select("Pivot by", this.pivotBy, "Pivot off", (value2) => this.updatePivot({ pivotBy: value2 })),
+      this.select("Value", this.pivotValueColumns?.[0], "No value", (value2) => this.updatePivot({ pivotValueColumns: value2 ? [value2] : [] })),
+      this.select("Aggregation", this.pivotAggregation, "", (value2) => this.updatePivot({ pivotAggregation: value2 }), ["sum", "avg", "count", "min", "max"])
+    );
+    const filterSection = document.createElement("section");
+    filterSection.appendChild(document.createElement("strong")).textContent = "Advanced filter";
+    const columnSelect = this.select("", this.columns[0]?.id, "", () => void 0, this.columns.map((column) => column.id));
+    const operatorSelect = this.select("", "contains", "", () => void 0, ["contains", "equals", "gt", "gte", "lt", "lte", "blank", "notBlank"]);
+    const valueInput = document.createElement("input");
+    valueInput.placeholder = "Value";
+    valueInput.style.cssText = "min-height:32px;padding:0 10px;border:1px solid #bfdbfe;border-radius:8px";
+    const apply = this.button("Apply", () => {
+      this.updateAdvancedFilter(
+        columnSelect.querySelector("select").value,
+        operatorSelect.querySelector("select").value,
+        valueInput.value
+      );
+    });
+    const clear = this.button("Clear", () => {
+      this.advancedFilterModel = null;
+      this.advancedFilterModelChange.emit(null);
+      this.render();
+    });
+    filterSection.append(columnSelect, operatorSelect, valueInput, apply, clear);
+    panel.append(columnsSection, pivotSection, filterSection);
+    return panel;
+  }
+  select(labelText, value2, emptyLabel, onChange, fixedOptions) {
+    const label = document.createElement("label");
+    label.style.cssText = "display:flex;gap:8px;align-items:center;margin-top:6px";
+    if (labelText) label.append(`${labelText} `);
+    const select = document.createElement("select");
+    select.style.cssText = "min-height:32px;padding:0 8px;border:1px solid #bfdbfe;border-radius:8px";
+    if (emptyLabel) {
+      const option = document.createElement("option");
+      option.value = "";
+      option.textContent = emptyLabel;
+      select.appendChild(option);
+    }
+    (fixedOptions ?? this.columns.map((column) => String(column.field))).forEach((entry) => {
+      const option = document.createElement("option");
+      option.value = entry;
+      option.textContent = this.columns.find((column) => column.id === entry || column.field === entry)?.headerName ?? entry;
+      select.appendChild(option);
+    });
+    select.value = value2 ?? "";
+    select.addEventListener("change", () => onChange(select.value || void 0));
+    label.appendChild(select);
+    return label;
+  }
+  renderStatus(totalRows) {
+    const status = document.createElement("div");
+    status.style.cssText = "display:flex;gap:16px;padding:10px;border:1px solid #dbe3ef;border-top:0;font-weight:700";
+    status.append(`${totalRows} rows`, `${this.selected.size} selected`, this.sortState ? `Sorted ${this.sortState.direction}` : "Unsorted");
+    return status;
+  }
+  button(text, onClick) {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.textContent = text;
+    button.style.cssText = "min-height:32px;padding:0 10px;border:1px solid #bfdbfe;border-radius:8px;background:#fff;color:#1d4ed8;font-weight:800";
+    button.addEventListener("click", onClick);
+    return button;
+  }
+};
+__decorateClass([
+  (0, import_core.Input)({ required: true })
+], GridNexaAngularComponent.prototype, "columns", 2);
+__decorateClass([
+  (0, import_core.Input)({ required: true })
+], GridNexaAngularComponent.prototype, "rows", 2);
+__decorateClass([
+  (0, import_core.Input)()
+], GridNexaAngularComponent.prototype, "mergedHeaders", 2);
+__decorateClass([
+  (0, import_core.Input)()
+], GridNexaAngularComponent.prototype, "rowNumbers", 2);
+__decorateClass([
+  (0, import_core.Input)()
+], GridNexaAngularComponent.prototype, "checkboxSelection", 2);
+__decorateClass([
+  (0, import_core.Input)()
+], GridNexaAngularComponent.prototype, "enableRangeSelection", 2);
+__decorateClass([
+  (0, import_core.Input)()
+], GridNexaAngularComponent.prototype, "enableFillHandle", 2);
+__decorateClass([
+  (0, import_core.Input)()
+], GridNexaAngularComponent.prototype, "enableUndoRedo", 2);
+__decorateClass([
+  (0, import_core.Input)()
+], GridNexaAngularComponent.prototype, "quickFilterText", 2);
+__decorateClass([
+  (0, import_core.Input)()
+], GridNexaAngularComponent.prototype, "columnFilters", 2);
+__decorateClass([
+  (0, import_core.Input)()
+], GridNexaAngularComponent.prototype, "externalFilter", 2);
+__decorateClass([
+  (0, import_core.Input)()
+], GridNexaAngularComponent.prototype, "advancedFilter", 2);
+__decorateClass([
+  (0, import_core.Input)()
+], GridNexaAngularComponent.prototype, "advancedFilterModel", 2);
+__decorateClass([
+  (0, import_core.Input)()
+], GridNexaAngularComponent.prototype, "pageSize", 2);
+__decorateClass([
+  (0, import_core.Input)()
+], GridNexaAngularComponent.prototype, "groupBy", 2);
+__decorateClass([
+  (0, import_core.Input)()
+], GridNexaAngularComponent.prototype, "pivotBy", 2);
+__decorateClass([
+  (0, import_core.Input)()
+], GridNexaAngularComponent.prototype, "pivotValueColumns", 2);
+__decorateClass([
+  (0, import_core.Input)()
+], GridNexaAngularComponent.prototype, "pivotAggregation", 2);
+__decorateClass([
+  (0, import_core.Input)()
+], GridNexaAngularComponent.prototype, "getRowId", 2);
+__decorateClass([
+  (0, import_core.Input)()
+], GridNexaAngularComponent.prototype, "getTreeDataPath", 2);
+__decorateClass([
+  (0, import_core.Input)()
+], GridNexaAngularComponent.prototype, "masterDetailRenderer", 2);
+__decorateClass([
+  (0, import_core.Input)()
+], GridNexaAngularComponent.prototype, "transaction", 2);
+__decorateClass([
+  (0, import_core.Input)()
+], GridNexaAngularComponent.prototype, "localeText", 2);
+__decorateClass([
+  (0, import_core.Output)()
+], GridNexaAngularComponent.prototype, "rowSelectionChange", 2);
+__decorateClass([
+  (0, import_core.Output)()
+], GridNexaAngularComponent.prototype, "cellClick", 2);
+__decorateClass([
+  (0, import_core.Output)()
+], GridNexaAngularComponent.prototype, "cellValueChange", 2);
+__decorateClass([
+  (0, import_core.Output)()
+], GridNexaAngularComponent.prototype, "advancedFilterModelChange", 2);
+__decorateClass([
+  (0, import_core.Output)()
+], GridNexaAngularComponent.prototype, "pivotModelChange", 2);
+__decorateClass([
+  (0, import_core.Output)()
+], GridNexaAngularComponent.prototype, "serverSideOperation", 2);
+__decorateClass([
+  (0, import_core.ViewChild)("host", { static: true })
+], GridNexaAngularComponent.prototype, "host", 2);
+GridNexaAngularComponent = __decorateClass([
+  (0, import_core.Component)({
+    selector: "grid-nexa",
+    standalone: true,
+    template: '<div #host class="gridnexa-angular-host"></div>'
+  })
+], GridNexaAngularComponent);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  GridNexaAngularComponent,
+  ...require("@gridnexa/core")
+});