@design.estate/dees-catalog 3.64.0 → 3.65.0

package/dist_watch/bundle.js

@@ -168464,36 +168464,66 @@ var demoFunc29 = /* @__PURE__ */ __name(() => b2`
     <div class="demo-container">
       <div class="demo-section">
         <h2 class="demo-title">Basic Table with Actions</h2>
-        <p class="demo-description">A standard table with row actions, editable fields, and context menu support. Double-click on descriptions to edit. Grid lines are enabled by default.</p>
+        <p class="demo-description">A standard table with row actions, editable cells, and context menu support. Double-click any cell to edit. Tab moves to the next editable cell, Enter to the row below, Esc cancels.</p>
         <dees-table
           heading1="Current Account Statement"
           heading2="Bunq - Payment Account 2 - April 2021"
-          .editableFields="${["description"]}"
+          .columns=${[
+  { key: "date", header: "Date", sortable: true, editable: true, editor: "date" },
+  { key: "amount", header: "Amount", editable: true, editor: "text" },
+  {
+    key: "category",
+    header: "Category",
+    editable: true,
+    editor: "dropdown",
+    editorOptions: {
+      options: [
+        { option: "Office Supplies", key: "office" },
+        { option: "Hardware", key: "hardware" },
+        { option: "Software", key: "software" },
+        { option: "Travel", key: "travel" }
+      ]
+    }
+  },
+  { key: "description", header: "Description", editable: true },
+  { key: "reconciled", header: "OK", editable: true, editor: "checkbox" }
+]}
+          @cellEdit=${(e11) => console.log("cellEdit", e11.detail)}
           .data=${[
   {
     date: "2021-04-01",
     amount: "2464.65 \u20AC",
-    description: "Printing Paper (Office Supplies) - STAPLES BREMEN"
+    category: "office",
+    description: "Printing Paper - STAPLES BREMEN",
+    reconciled: true
   },
   {
     date: "2021-04-02",
     amount: "165.65 \u20AC",
-    description: "Logitech Mouse (Hardware) - logi.com OnlineShop"
+    category: "hardware",
+    description: "Logitech Mouse - logi.com OnlineShop",
+    reconciled: false
   },
   {
     date: "2021-04-03",
     amount: "2999,00 \u20AC",
-    description: "Macbook Pro 16inch (Hardware) - Apple.de OnlineShop"
+    category: "hardware",
+    description: "Macbook Pro 16inch - Apple.de OnlineShop",
+    reconciled: false
   },
   {
     date: "2021-04-01",
     amount: "2464.65 \u20AC",
-    description: "Office-Supplies - STAPLES BREMEN"
+    category: "office",
+    description: "Office-Supplies - STAPLES BREMEN",
+    reconciled: true
   },
   {
     date: "2021-04-01",
     amount: "2464.65 \u20AC",
-    description: "Office-Supplies - STAPLES BREMEN"
+    category: "office",
+    description: "Office-Supplies - STAPLES BREMEN",
+    reconciled: true
   }
 ]}
           dataName="transactions"
@@ -168924,13 +168954,13 @@ var demoFunc29 = /* @__PURE__ */ __name(() => b2`
         <h2 class="demo-title">Column Filters + Sticky Header (New)</h2>
         <p class="demo-description">Per-column quick filters and sticky header with internal scroll. Try filtering the Name column. Uses --table-max-height var.</p>
         <style>
-          dees-table[sticky-header] { --table-max-height: 220px; }
+          dees-table[fixed-height] { --table-max-height: 220px; }
         </style>
         <dees-table
           heading1="Employees"
           heading2="Quick filter per column + sticky header"
           .showColumnFilters=${true}
-          .stickyHeader=${true}
+          .fixedHeight=${true}
           .columns=${[
   { key: "name", header: "Name", sortable: true },
   { key: "email", header: "Email", sortable: true },
@@ -169096,7 +169126,7 @@ var demoFunc29 = /* @__PURE__ */ __name(() => b2`
         </style>
         <dees-table
           id="scrollSmallHeight"
-          .stickyHeader=${true}
+          .fixedHeight=${true}
           heading1="People Directory (Scrollable)"
           heading2="Forced scrolling with many items"
           .columns=${[
@@ -169518,32 +169548,32 @@ var tableStyles = [
         min-height: 24px;
         line-height: 24px;
       }
-      td input {
-        position: absolute;
-        top: 4px;
-        bottom: 4px;
-        left: 20px;
-        right: 20px;
-        width: calc(100% - 40px);
-        height: calc(100% - 8px);
-        padding: 0 12px;
-        outline: none;
-        border: 1px solid var(--dees-color-border-default);
-        border-radius: 6px;
-        background: ${cssManager.bdTheme("hsl(0 0% 100%)", "hsl(0 0% 9%)")};
-        color: var(--dees-color-text-primary);
-        font-family: inherit;
-        font-size: inherit;
-        font-weight: inherit;
-        transition: all 0.15s ease;
-        box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+
+      /* Editable cell affordances */
+      td.editable {
+        cursor: text;
       }
-      
-      td input:focus {
-        border-color: ${cssManager.bdTheme("hsl(222.2 47.4% 51.2%)", "hsl(217.2 91.2% 59.8%)")};
-        outline: 2px solid transparent;
-        outline-offset: 2px;
-        box-shadow: 0 0 0 2px ${cssManager.bdTheme("hsl(222.2 47.4% 51.2% / 0.2)", "hsl(217.2 91.2% 59.8% / 0.2)")};
+      td.focused {
+        outline: 2px solid ${cssManager.bdTheme(
+    "hsl(222.2 47.4% 51.2% / 0.6)",
+    "hsl(217.2 91.2% 59.8% / 0.6)"
+  )};
+        outline-offset: -2px;
+      }
+      td.editingCell {
+        padding: 0;
+      }
+      td.editingCell .innerCellContainer {
+        padding: 0;
+        line-height: normal;
+      }
+      td.editingCell dees-input-text,
+      td.editingCell dees-input-checkbox,
+      td.editingCell dees-input-dropdown,
+      td.editingCell dees-input-datepicker,
+      td.editingCell dees-input-tags {
+        display: block;
+        width: 100%;
       }
 
       /* filter row */
@@ -169896,7 +169926,7 @@ __name(compileLucenePredicate, "compileLucenePredicate");
 init_dist_ts30();
 init_dist_ts29();
 init_theme();
-var _selectedIds_dec, _selectionMode_dec, _searchMode_dec, _fixedHeight_dec, _showSelectionCheckbox_dec, _showColumnFilters_dec, _columnFilters_dec, _filterText_dec, _sortBy_dec, _showGrid_dec, _showHorizontalLines_dec, _showVerticalLines_dec, _editableFields_dec, _selectedDataRow_dec, _reverseDisplayFunction_dec, _displayFunction_dec, _augmentFromDisplayFunction_dec, _rowKey_dec, _columns_dec, _dataActions_dec, _searchable_dec, _dataName_dec, _required_dec3, _disabled_dec3, _label_dec3, _key_dec2, _data_dec, _heading2_dec, _heading1_dec, _a42, _DeesTable_decorators, _init39, _heading1, _heading22, _data, _key2, _label3, _disabled3, _required3, _dataName, _searchable, _dataActions, _columns, _rowKey, _augmentFromDisplayFunction, _displayFunction, _reverseDisplayFunction, _selectedDataRow, _editableFields, _showVerticalLines, _showHorizontalLines, _showGrid, _sortBy, _filterText, _columnFilters, _showColumnFilters, _showSelectionCheckbox, _fixedHeight, _searchMode, _selectionMode, _selectedIds;
+var ___editingCell_dec, ___focusedCell_dec, _selectedIds_dec, _selectionMode_dec, _searchMode_dec, _fixedHeight_dec, _showSelectionCheckbox_dec, _showColumnFilters_dec, _columnFilters_dec, _filterText_dec, _sortBy_dec, _showGrid_dec, _showHorizontalLines_dec, _showVerticalLines_dec, _selectedDataRow_dec, _reverseDisplayFunction_dec, _displayFunction_dec, _augmentFromDisplayFunction_dec, _rowKey_dec, _columns_dec, _dataActions_dec, _searchable_dec, _dataName_dec, _required_dec3, _disabled_dec3, _label_dec3, _key_dec2, _data_dec, _heading2_dec, _heading1_dec, _a42, _DeesTable_decorators, _init39, _heading1, _heading22, _data, _key2, _label3, _disabled3, _required3, _dataName, _searchable, _dataActions, _columns, _rowKey, _augmentFromDisplayFunction, _displayFunction, _reverseDisplayFunction, _selectedDataRow, _showVerticalLines, _showHorizontalLines, _showGrid, _sortBy, _filterText, _columnFilters, _showColumnFilters, _showSelectionCheckbox, _fixedHeight, _searchMode, _selectionMode, _selectedIds, ___focusedCell, ___editingCell;
 function ordinalLabel(n12) {
   const s10 = ["th", "st", "nd", "rd"];
   const v5 = n12 % 100;
@@ -169931,8 +169961,6 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
   attribute: false
 })], _selectedDataRow_dec = [n5({
   type: Object
-})], _editableFields_dec = [n5({
-  type: Array
 })], _showVerticalLines_dec = [n5({
   type: Boolean,
   reflect: true,
@@ -169945,7 +169973,7 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
   type: Boolean,
   reflect: true,
   attribute: "show-grid"
-})], _sortBy_dec = [n5({ attribute: false })], _filterText_dec = [n5({ type: String })], _columnFilters_dec = [n5({ attribute: false })], _showColumnFilters_dec = [n5({ type: Boolean, attribute: "show-column-filters" })], _showSelectionCheckbox_dec = [n5({ type: Boolean, reflect: true, attribute: "show-selection-checkbox" })], _fixedHeight_dec = [n5({ type: Boolean, reflect: true, attribute: "fixed-height" })], _searchMode_dec = [n5({ type: String })], _selectionMode_dec = [n5({ type: String })], _selectedIds_dec = [n5({ attribute: false })], _a42) {
+})], _sortBy_dec = [n5({ attribute: false })], _filterText_dec = [n5({ type: String })], _columnFilters_dec = [n5({ attribute: false })], _showColumnFilters_dec = [n5({ type: Boolean, attribute: "show-column-filters" })], _showSelectionCheckbox_dec = [n5({ type: Boolean, reflect: true, attribute: "show-selection-checkbox" })], _fixedHeight_dec = [n5({ type: Boolean, reflect: true, attribute: "fixed-height" })], _searchMode_dec = [n5({ type: String })], _selectionMode_dec = [n5({ type: String })], _selectedIds_dec = [n5({ attribute: false })], ___focusedCell_dec = [r5()], ___editingCell_dec = [r5()], _a42) {
   constructor() {
     super();
     __privateAdd(this, _heading1, __runInitializers(_init39, 8, this, "heading 1")), __runInitializers(_init39, 11, this);
@@ -169965,24 +169993,23 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
     __privateAdd(this, _displayFunction, __runInitializers(_init39, 60, this, /* @__PURE__ */ __name((itemArg) => itemArg, "displayFunction"))), __runInitializers(_init39, 63, this);
     __privateAdd(this, _reverseDisplayFunction, __runInitializers(_init39, 64, this, /* @__PURE__ */ __name((itemArg) => itemArg, "reverseDisplayFunction"))), __runInitializers(_init39, 67, this);
     __privateAdd(this, _selectedDataRow, __runInitializers(_init39, 68, this)), __runInitializers(_init39, 71, this);
-    __privateAdd(this, _editableFields, __runInitializers(_init39, 72, this, [])), __runInitializers(_init39, 75, this);
-    __privateAdd(this, _showVerticalLines, __runInitializers(_init39, 76, this, false)), __runInitializers(_init39, 79, this);
-    __privateAdd(this, _showHorizontalLines, __runInitializers(_init39, 80, this, false)), __runInitializers(_init39, 83, this);
-    __privateAdd(this, _showGrid, __runInitializers(_init39, 84, this, true)), __runInitializers(_init39, 87, this);
+    __privateAdd(this, _showVerticalLines, __runInitializers(_init39, 72, this, false)), __runInitializers(_init39, 75, this);
+    __privateAdd(this, _showHorizontalLines, __runInitializers(_init39, 76, this, false)), __runInitializers(_init39, 79, this);
+    __privateAdd(this, _showGrid, __runInitializers(_init39, 80, this, true)), __runInitializers(_init39, 83, this);
     __publicField(this, "files", []);
     __publicField(this, "fileWeakMap", /* @__PURE__ */ new WeakMap());
     __publicField(this, "dataChangeSubject", new domtools_pluginexports_exports.smartrx.rxjs.Subject());
-    __privateAdd(this, _sortBy, __runInitializers(_init39, 88, this, [])), __runInitializers(_init39, 91, this);
-    __privateAdd(this, _filterText, __runInitializers(_init39, 92, this, "")), __runInitializers(_init39, 95, this);
-    __privateAdd(this, _columnFilters, __runInitializers(_init39, 96, this, {})), __runInitializers(_init39, 99, this);
-    __privateAdd(this, _showColumnFilters, __runInitializers(_init39, 100, this, false)), __runInitializers(_init39, 103, this);
-    __privateAdd(this, _showSelectionCheckbox, __runInitializers(_init39, 104, this, false)), __runInitializers(_init39, 107, this);
-    __privateAdd(this, _fixedHeight, __runInitializers(_init39, 108, this, false)), __runInitializers(_init39, 111, this);
-    __privateAdd(this, _searchMode, __runInitializers(_init39, 112, this, "table")), __runInitializers(_init39, 115, this);
+    __privateAdd(this, _sortBy, __runInitializers(_init39, 84, this, [])), __runInitializers(_init39, 87, this);
+    __privateAdd(this, _filterText, __runInitializers(_init39, 88, this, "")), __runInitializers(_init39, 91, this);
+    __privateAdd(this, _columnFilters, __runInitializers(_init39, 92, this, {})), __runInitializers(_init39, 95, this);
+    __privateAdd(this, _showColumnFilters, __runInitializers(_init39, 96, this, false)), __runInitializers(_init39, 99, this);
+    __privateAdd(this, _showSelectionCheckbox, __runInitializers(_init39, 100, this, false)), __runInitializers(_init39, 103, this);
+    __privateAdd(this, _fixedHeight, __runInitializers(_init39, 104, this, false)), __runInitializers(_init39, 107, this);
+    __privateAdd(this, _searchMode, __runInitializers(_init39, 108, this, "table")), __runInitializers(_init39, 111, this);
     __publicField(this, "__searchTextSub");
     __publicField(this, "__searchModeSub");
-    __privateAdd(this, _selectionMode, __runInitializers(_init39, 116, this, "none")), __runInitializers(_init39, 119, this);
-    __privateAdd(this, _selectedIds, __runInitializers(_init39, 120, this, /* @__PURE__ */ new Set())), __runInitializers(_init39, 123, this);
+    __privateAdd(this, _selectionMode, __runInitializers(_init39, 112, this, "none")), __runInitializers(_init39, 115, this);
+    __privateAdd(this, _selectedIds, __runInitializers(_init39, 116, this, /* @__PURE__ */ new Set())), __runInitializers(_init39, 119, this);
     __publicField(this, "_rowIdMap", /* @__PURE__ */ new WeakMap());
     __publicField(this, "_rowIdCounter", 0);
     /**
@@ -169991,6 +170018,8 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
      * can compute a contiguous range from this anchor.
      */
     __publicField(this, "__selectionAnchorId");
+    __privateAdd(this, ___focusedCell, __runInitializers(_init39, 120, this)), __runInitializers(_init39, 123, this);
+    __privateAdd(this, ___editingCell, __runInitializers(_init39, 124, this)), __runInitializers(_init39, 127, this);
     /**
      * Ctrl/Cmd+C copies the currently selected rows as a JSON array. Falls
      * back to copying the focused-row (`selectedDataRow`) if no multi
@@ -169998,23 +170027,74 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
      * receive the copy.
      */
     __publicField(this, "__handleHostKeydown", /* @__PURE__ */ __name((eventArg) => {
-      const isCopy = (eventArg.metaKey || eventArg.ctrlKey) && (eventArg.key === "c" || eventArg.key === "C");
-      if (!isCopy) return;
       const path2 = eventArg.composedPath?.() || [];
+      let inEditor = false;
       for (const t9 of path2) {
         const tag = t9?.tagName;
-        if (tag === "INPUT" || tag === "TEXTAREA") return;
-        if (t9?.isContentEditable) return;
+        if (tag === "INPUT" || tag === "TEXTAREA" || t9?.isContentEditable) {
+          inEditor = true;
+          break;
+        }
       }
-      const rows = [];
-      if (this.selectedIds.size > 0) {
-        for (const r11 of this.data) if (this.selectedIds.has(this.getRowId(r11))) rows.push(r11);
-      } else if (this.selectedDataRow) {
-        rows.push(this.selectedDataRow);
+      const isCopy = (eventArg.metaKey || eventArg.ctrlKey) && (eventArg.key === "c" || eventArg.key === "C");
+      if (isCopy) {
+        if (inEditor) return;
+        const rows = [];
+        if (this.selectedIds.size > 0) {
+          for (const r11 of this.data) if (this.selectedIds.has(this.getRowId(r11))) rows.push(r11);
+        } else if (this.selectedDataRow) {
+          rows.push(this.selectedDataRow);
+        }
+        if (rows.length === 0) return;
+        eventArg.preventDefault();
+        this.__writeRowsAsJson(rows);
+        return;
+      }
+      if (inEditor || this.__editingCell) return;
+      switch (eventArg.key) {
+        case "ArrowLeft":
+          eventArg.preventDefault();
+          this.moveFocusedCell(-1, 0, false);
+          return;
+        case "ArrowRight":
+          eventArg.preventDefault();
+          this.moveFocusedCell(1, 0, false);
+          return;
+        case "ArrowUp":
+          eventArg.preventDefault();
+          this.moveFocusedCell(0, -1, false);
+          return;
+        case "ArrowDown":
+          eventArg.preventDefault();
+          this.moveFocusedCell(0, 1, false);
+          return;
+        case "Enter":
+        case "F2": {
+          if (!this.__focusedCell) return;
+          const view = this._lastViewData ?? [];
+          const item = view.find((r11) => this.getRowId(r11) === this.__focusedCell.rowId);
+          if (!item) return;
+          const allCols = Array.isArray(this.columns) && this.columns.length > 0 ? computeEffectiveColumns(
+            this.columns,
+            this.augmentFromDisplayFunction,
+            this.displayFunction,
+            this.data
+          ) : computeColumnsFromDisplayFunction(this.displayFunction, this.data);
+          const col = allCols.find((c11) => String(c11.key) === this.__focusedCell.colKey);
+          if (!col || !this.__isColumnEditable(col)) return;
+          eventArg.preventDefault();
+          this.startEditing(item, col);
+          return;
+        }
+        case "Escape":
+          if (this.__focusedCell) {
+            this.__focusedCell = void 0;
+            this.requestUpdate();
+          }
+          return;
+        default:
+          return;
       }
-      if (rows.length === 0) return;
-      eventArg.preventDefault();
-      this.__writeRowsAsJson(rows);
     }, "__handleHostKeydown"));
     // ─── Floating header (page-sticky) lifecycle ─────────────────────────
     __publicField(this, "__floatingResizeObserver");
@@ -170236,20 +170316,42 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
         const value2 = getCellValue(itemArg, col, this.displayFunction);
         const content3 = col.renderer ? col.renderer(value2, itemArg, { rowIndex, colIndex, column: col }) : value2;
         const editKey = String(col.key);
+        const isEditable = !!(col.editable || col.editor);
+        const rowId = this.getRowId(itemArg);
+        const isFocused = this.__focusedCell?.rowId === rowId && this.__focusedCell?.colKey === editKey;
+        const isEditing = this.__editingCell?.rowId === rowId && this.__editingCell?.colKey === editKey;
+        const cellClasses = [
+          isEditable ? "editable" : "",
+          isFocused && !isEditing ? "focused" : "",
+          isEditing ? "editingCell" : ""
+        ].filter(Boolean).join(" ");
         return b2`
                               <td
+                                class=${cellClasses}
+                                @click=${(e11) => {
+          if (isEditing) {
+            e11.stopPropagation();
+            return;
+          }
+          if (isEditable) {
+            this.__focusedCell = { rowId, colKey: editKey };
+          }
+        }}
                                 @dblclick=${(e11) => {
           const dblAction = this.dataActions.find(
             (actionArg) => actionArg.type?.includes("doubleClick")
           );
-          if (this.editableFields.includes(editKey)) {
-            this.handleCellEditing(e11, itemArg, editKey);
+          if (isEditable) {
+            e11.stopPropagation();
+            this.startEditing(itemArg, col);
           } else if (dblAction) {
             dblAction.actionFunc({ item: itemArg, table: this });
           }
         }}
                               >
-                                <div class="innerCellContainer">${content3}</div>
+                                <div class="innerCellContainer">
+                                  ${isEditing ? this.renderCellEditor(itemArg, col) : content3}
+                                </div>
                               </td>
                             `;
       })}
@@ -171101,38 +171203,193 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
     }
     return actions;
   }
-  async handleCellEditing(event, itemArg, key2) {
-    await this.domtoolsPromise;
-    const target = event.target;
-    const originalColor = target.style.color;
-    target.style.color = "transparent";
-    const transformedItem = this.displayFunction(itemArg);
-    const initialValue = transformedItem[key2] ?? itemArg[key2] ?? "";
-    const input = document.createElement("input");
-    input.type = "text";
-    input.value = initialValue;
-    const blurInput = /* @__PURE__ */ __name(async (blurArg = true, saveArg = false) => {
-      if (blurArg) {
-        input.blur();
-      }
-      if (saveArg) {
-        itemArg[key2] = input.value;
-        this.changeSubject.next(this);
-      }
-      input.remove();
-      target.style.color = originalColor;
-      this.requestUpdate();
-    }, "blurInput");
-    input.addEventListener("blur", () => {
-      blurInput(false, false);
+  // ─── Cell editing ─────────────────────────────────────────────────────
+  /** True if the column has any in-cell editor configured. */
+  __isColumnEditable(col) {
+    return !!(col.editable || col.editor);
+  }
+  /** Effective columns filtered to those that can be edited (visible only). */
+  __editableColumns(effectiveColumns) {
+    return effectiveColumns.filter((c11) => !c11.hidden && this.__isColumnEditable(c11));
+  }
+  /**
+   * Opens the editor on the given cell. Sets focus + editing state and
+   * focuses the freshly rendered editor on the next frame.
+   */
+  startEditing(item, col) {
+    if (!this.__isColumnEditable(col)) return;
+    const rowId = this.getRowId(item);
+    const colKey = String(col.key);
+    this.__focusedCell = { rowId, colKey };
+    this.__editingCell = { rowId, colKey };
+    this.requestUpdate();
+    this.updateComplete.then(() => {
+      const el = this.shadowRoot?.querySelector(
+        ".editingCell dees-input-text, .editingCell dees-input-checkbox, .editingCell dees-input-dropdown, .editingCell dees-input-datepicker, .editingCell dees-input-tags"
+      );
+      el?.focus?.();
     });
-    input.addEventListener("keydown", (e11) => {
-      if (e11.key === "Enter") {
-        blurInput(true, true);
+  }
+  /** Closes the editor without committing. */
+  cancelCellEdit() {
+    this.__editingCell = void 0;
+    this.requestUpdate();
+  }
+  /**
+   * Commits an editor value to the row. Runs `parse` then `validate`. On
+   * validation failure, fires `cellEditError` and leaves the editor open.
+   * On success, mutates `data` in place, fires `cellEdit`, and closes the
+   * editor.
+   */
+  commitCellEdit(item, col, editorValue) {
+    const key2 = String(col.key);
+    const oldValue = item[col.key];
+    const parsed = col.parse ? col.parse(editorValue, item) : editorValue;
+    if (col.validate) {
+      const result = col.validate(parsed, item);
+      if (typeof result === "string") {
+        this.dispatchEvent(
+          new CustomEvent("cellEditError", {
+            detail: { row: item, key: key2, value: parsed, message: result },
+            bubbles: true,
+            composed: true
+          })
+        );
+        return;
       }
-    });
-    target.appendChild(input);
-    input.focus();
+    }
+    if (parsed !== oldValue) {
+      item[col.key] = parsed;
+      this.dispatchEvent(
+        new CustomEvent("cellEdit", {
+          detail: { row: item, key: key2, oldValue, newValue: parsed },
+          bubbles: true,
+          composed: true
+        })
+      );
+      this.changeSubject.next(this);
+    }
+    this.__editingCell = void 0;
+    this.requestUpdate();
+  }
+  /** Renders the appropriate dees-input-* component for this column. */
+  renderCellEditor(item, col) {
+    const raw2 = item[col.key];
+    const value2 = col.format ? col.format(raw2, item) : raw2;
+    const editorType = col.editor ?? "text";
+    const onTextCommit = /* @__PURE__ */ __name((target) => this.commitCellEdit(item, col, target.value), "onTextCommit");
+    switch (editorType) {
+      case "checkbox":
+        return b2`<dees-input-checkbox
+          .value=${!!value2}
+          @newValue=${(e11) => {
+          e11.stopPropagation();
+          this.commitCellEdit(item, col, e11.detail);
+        }}
+        ></dees-input-checkbox>`;
+      case "dropdown": {
+        const options2 = col.editorOptions?.options ?? [];
+        const selected = options2.find((o13) => (o13?.option ?? o13?.key ?? o13) === value2) ?? null;
+        return b2`<dees-input-dropdown
+          .options=${options2}
+          .selectedOption=${selected}
+          @selectedOption=${(e11) => {
+          e11.stopPropagation();
+          const detail = e11.detail;
+          const newRaw = detail?.option ?? detail?.key ?? detail;
+          this.commitCellEdit(item, col, newRaw);
+        }}
+        ></dees-input-dropdown>`;
+      }
+      case "date":
+        return b2`<dees-input-datepicker
+          .value=${value2}
+          @focusout=${(e11) => onTextCommit(e11.target)}
+          @keydown=${(e11) => this.__handleEditorKey(e11, item, col)}
+        ></dees-input-datepicker>`;
+      case "tags":
+        return b2`<dees-input-tags
+          .value=${value2 ?? []}
+          @focusout=${(e11) => onTextCommit(e11.target)}
+          @keydown=${(e11) => this.__handleEditorKey(e11, item, col)}
+        ></dees-input-tags>`;
+      case "number":
+      case "text":
+      default:
+        return b2`<dees-input-text
+          .value=${value2 == null ? "" : String(value2)}
+          @focusout=${(e11) => onTextCommit(e11.target)}
+          @keydown=${(e11) => this.__handleEditorKey(e11, item, col)}
+        ></dees-input-text>`;
+    }
+  }
+  /**
+   * Centralized keydown handler for text-style editors. Handles Esc (cancel),
+   * Enter (commit + move down) and Tab/Shift+Tab (commit + move horizontally).
+   */
+  __handleEditorKey(eventArg, item, col) {
+    if (eventArg.key === "Escape") {
+      eventArg.preventDefault();
+      eventArg.stopPropagation();
+      this.cancelCellEdit();
+      this.focus();
+    } else if (eventArg.key === "Enter") {
+      eventArg.preventDefault();
+      eventArg.stopPropagation();
+      const target = eventArg.target;
+      this.commitCellEdit(item, col, target.value);
+      this.moveFocusedCell(0, 1, true);
+    } else if (eventArg.key === "Tab") {
+      eventArg.preventDefault();
+      eventArg.stopPropagation();
+      const target = eventArg.target;
+      this.commitCellEdit(item, col, target.value);
+      this.moveFocusedCell(eventArg.shiftKey ? -1 : 1, 0, true);
+    }
+  }
+  /**
+   * Moves the focused cell by `dx` columns and `dy` rows along the editable
+   * grid. Wraps row-end → next row when moving horizontally. If
+   * `andStartEditing` is true, opens the editor on the new cell.
+   */
+  moveFocusedCell(dx, dy, andStartEditing) {
+    const view = this._lastViewData ?? [];
+    if (view.length === 0) return;
+    const allCols = Array.isArray(this.columns) && this.columns.length > 0 ? computeEffectiveColumns(this.columns, this.augmentFromDisplayFunction, this.displayFunction, this.data) : computeColumnsFromDisplayFunction(this.displayFunction, this.data);
+    const editableCols = this.__editableColumns(allCols);
+    if (editableCols.length === 0) return;
+    let rowIdx = 0;
+    let colIdx = 0;
+    if (this.__focusedCell) {
+      rowIdx = view.findIndex((r11) => this.getRowId(r11) === this.__focusedCell.rowId);
+      colIdx = editableCols.findIndex((c11) => String(c11.key) === this.__focusedCell.colKey);
+      if (rowIdx < 0) rowIdx = 0;
+      if (colIdx < 0) colIdx = 0;
+    }
+    if (dx !== 0) {
+      colIdx += dx;
+      while (colIdx >= editableCols.length) {
+        colIdx -= editableCols.length;
+        rowIdx += 1;
+      }
+      while (colIdx < 0) {
+        colIdx += editableCols.length;
+        rowIdx -= 1;
+      }
+    }
+    if (dy !== 0) rowIdx += dy;
+    if (rowIdx < 0 || rowIdx >= view.length) {
+      this.cancelCellEdit();
+      return;
+    }
+    const item = view[rowIdx];
+    const col = editableCols[colIdx];
+    this.__focusedCell = { rowId: this.getRowId(item), colKey: String(col.key) };
+    if (andStartEditing) {
+      this.startEditing(item, col);
+    } else {
+      this.requestUpdate();
+    }
   }
 };
 _init39 = __decoratorStart(_a42);
@@ -171152,7 +171409,6 @@ _augmentFromDisplayFunction = new WeakMap();
 _displayFunction = new WeakMap();
 _reverseDisplayFunction = new WeakMap();
 _selectedDataRow = new WeakMap();
-_editableFields = new WeakMap();
 _showVerticalLines = new WeakMap();
 _showHorizontalLines = new WeakMap();
 _showGrid = new WeakMap();
@@ -171165,6 +171421,8 @@ _fixedHeight = new WeakMap();
 _searchMode = new WeakMap();
 _selectionMode = new WeakMap();
 _selectedIds = new WeakMap();
+___focusedCell = new WeakMap();
+___editingCell = new WeakMap();
 __decorateElement(_init39, 4, "heading1", _heading1_dec, _DeesTable, _heading1);
 __decorateElement(_init39, 4, "heading2", _heading2_dec, _DeesTable, _heading22);
 __decorateElement(_init39, 4, "data", _data_dec, _DeesTable, _data);
@@ -171181,7 +171439,6 @@ __decorateElement(_init39, 4, "augmentFromDisplayFunction", _augmentFromDisplayF
 __decorateElement(_init39, 4, "displayFunction", _displayFunction_dec, _DeesTable, _displayFunction);
 __decorateElement(_init39, 4, "reverseDisplayFunction", _reverseDisplayFunction_dec, _DeesTable, _reverseDisplayFunction);
 __decorateElement(_init39, 4, "selectedDataRow", _selectedDataRow_dec, _DeesTable, _selectedDataRow);
-__decorateElement(_init39, 4, "editableFields", _editableFields_dec, _DeesTable, _editableFields);
 __decorateElement(_init39, 4, "showVerticalLines", _showVerticalLines_dec, _DeesTable, _showVerticalLines);
 __decorateElement(_init39, 4, "showHorizontalLines", _showHorizontalLines_dec, _DeesTable, _showHorizontalLines);
 __decorateElement(_init39, 4, "showGrid", _showGrid_dec, _DeesTable, _showGrid);
@@ -171194,6 +171451,8 @@ __decorateElement(_init39, 4, "fixedHeight", _fixedHeight_dec, _DeesTable, _fixe
 __decorateElement(_init39, 4, "searchMode", _searchMode_dec, _DeesTable, _searchMode);
 __decorateElement(_init39, 4, "selectionMode", _selectionMode_dec, _DeesTable, _selectionMode);
 __decorateElement(_init39, 4, "selectedIds", _selectedIds_dec, _DeesTable, _selectedIds);
+__decorateElement(_init39, 4, "__focusedCell", ___focusedCell_dec, _DeesTable, ___focusedCell);
+__decorateElement(_init39, 4, "__editingCell", ___editingCell_dec, _DeesTable, ___editingCell);
 _DeesTable = __decorateElement(_init39, 0, "DeesTable", _DeesTable_decorators, _DeesTable);
 __name(_DeesTable, "DeesTable");
 __publicField(_DeesTable, "demo", demoFunc29);