@toolbox-web/grid-angular 0.13.0 → 0.13.1

package/fesm2022/toolbox-web-grid-angular-features-clipboard.mjs

@@ -1,5 +1,5 @@
-import { ClipboardPlugin } from '@toolbox-web/grid/plugins/clipboard';
 import { registerFeature } from '@toolbox-web/grid-angular';
+import { ClipboardPlugin } from '@toolbox-web/grid/plugins/clipboard';
 
 /**
  * Clipboard feature for @toolbox-web/grid-angular

package/fesm2022/toolbox-web-grid-angular-features-clipboard.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"toolbox-web-grid-angular-features-clipboard.mjs","sources":["../../../../libs/grid-angular/features/clipboard/src/index.ts","../../../../libs/grid-angular/features/clipboard/src/toolbox-web-grid-angular-features-clipboard.ts"],"sourcesContent":["/**\n * Clipboard feature for @toolbox-web/grid-angular\n *\n * Import this module to enable the `clipboard` input on Grid directive.\n * Requires selection feature to be enabled.\n *\n * @example\n * ```typescript\n * import '@toolbox-web/grid-angular/features/selection';\n * import '@toolbox-web/grid-angular/features/clipboard';\n *\n * <tbw-grid [selection]=\"'range'\" [clipboard]=\"true\" />\n * ```\n *\n * @packageDocumentation\n */\n\nimport { ClipboardPlugin } from '@toolbox-web/grid/plugins/clipboard';\nimport { registerFeature } from '@toolbox-web/grid-angular';\n\nregisterFeature('clipboard', (config) => {\n  if (config === true) {\n    return new ClipboardPlugin();\n  }\n  return new ClipboardPlugin(config ?? undefined);\n});\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;AAeG;AAKH,eAAe,CAAC,WAAW,EAAE,CAAC,MAAM,KAAI;AACtC,IAAA,IAAI,MAAM,KAAK,IAAI,EAAE;QACnB,OAAO,IAAI,eAAe,EAAE;IAC9B;AACA,IAAA,OAAO,IAAI,eAAe,CAAC,MAAM,IAAI,SAAS,CAAC;AACjD,CAAC,CAAC;;ACzBF;;AAEG"}
+{"version":3,"file":"toolbox-web-grid-angular-features-clipboard.mjs","sources":["../../../../libs/grid-angular/features/clipboard/src/index.ts","../../../../libs/grid-angular/features/clipboard/src/toolbox-web-grid-angular-features-clipboard.ts"],"sourcesContent":["/**\n * Clipboard feature for @toolbox-web/grid-angular\n *\n * Import this module to enable the `clipboard` input on Grid directive.\n * Requires selection feature to be enabled.\n *\n * @example\n * ```typescript\n * import '@toolbox-web/grid-angular/features/selection';\n * import '@toolbox-web/grid-angular/features/clipboard';\n *\n * <tbw-grid [selection]=\"'range'\" [clipboard]=\"true\" />\n * ```\n *\n * @packageDocumentation\n */\n\nimport { registerFeature } from '@toolbox-web/grid-angular';\nimport { ClipboardPlugin } from '@toolbox-web/grid/plugins/clipboard';\n\nregisterFeature('clipboard', (config) => {\n  if (config === true) {\n    return new ClipboardPlugin();\n  }\n  return new ClipboardPlugin(config ?? undefined);\n});\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;AAeG;AAKH,eAAe,CAAC,WAAW,EAAE,CAAC,MAAM,KAAI;AACtC,IAAA,IAAI,MAAM,KAAK,IAAI,EAAE;QACnB,OAAO,IAAI,eAAe,EAAE;IAC9B;AACA,IAAA,OAAO,IAAI,eAAe,CAAC,MAAM,IAAI,SAAS,CAAC;AACjD,CAAC,CAAC;;ACzBF;;AAEG"}

package/fesm2022/toolbox-web-grid-angular.mjs

@@ -381,9 +381,20 @@ class GridFormArray {
         // Subscribe to valueChanges to sync grid rows when FormArray content changes.
         // Use startWith to immediately sync the current value.
         // Note: We use getRawValue() to include disabled controls.
+        //
+        // In grid mode, editors bind directly to FormControls, so every keystroke
+        // fires valueChanges. We skip the sync when an editor input is focused to
+        // prevent destroying/recreating editors mid-edit (which orphans overlays
+        // like mat-autocomplete/mat-select panels and causes focus loss).
         this.valueChangesSubscription = formArray.valueChanges
             .pipe(startWith(formArray.getRawValue()), takeUntilDestroyed(this.destroyRef))
             .subscribe(() => {
+            // Skip sync while an editor is actively focused in the grid.
+            // The FormArray already has the latest values via its own controls;
+            // re-setting grid.rows would create new object references and trigger
+            // an unnecessary render cycle.
+            if (this.#isEditorFocused(grid))
+                return;
             grid.rows = formArray.getRawValue();
         });
     }, ...(ngDevMode ? [{ debugName: "syncFormArrayToGrid" }] : []));
@@ -458,6 +469,20 @@ class GridFormArray {
         const editingPlugin = grid.getPluginByName?.('editing');
         return editingPlugin?.config?.mode === 'grid';
     }
+    /**
+     * Checks if a focusable editor element inside the grid currently has focus.
+     * Used to skip valueChanges → grid.rows sync while a user is actively editing,
+     * preventing editor destruction (which orphans overlay panels like autocomplete/select).
+     */
+    #isEditorFocused(grid) {
+        if (!this.#isGridMode())
+            return false;
+        const active = document.activeElement;
+        if (!active)
+            return false;
+        // Check if the focused element is inside the grid
+        return grid.contains(active) && active.closest('.editing') != null;
+    }
     /**
      * Sets up reactive validation syncing for grid mode.
      * Subscribes to statusChanges on all FormControls to update validation state in real-time.
@@ -552,6 +577,8 @@ class GridFormArray {
      */
     #storeFormContext(grid) {
         const getRowFormGroup = (rowIndex) => this.#getRowFormGroup(rowIndex);
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        const self = this;
         const context = {
             getRow: (rowIndex) => {
                 const formArray = this.formArray();
@@ -571,7 +598,9 @@ class GridFormArray {
             getValue: () => {
                 return this.formArray().getRawValue();
             },
-            hasFormGroups: this.#isFormArrayOfFormGroups(),
+            get hasFormGroups() {
+                return self.#isFormArrayOfFormGroups();
+            },
             getControl: (rowIndex, field) => {
                 const rowFormGroup = getRowFormGroup(rowIndex);
                 if (!rowFormGroup)
@@ -1340,6 +1369,10 @@ class GridAdapter {
     viewContainerRef;
     viewRefs = [];
     componentRefs = [];
+    /** Editor-specific view refs tracked separately for per-cell cleanup via releaseCell. */
+    editorViewRefs = [];
+    /** Editor-specific component refs tracked separately for per-cell cleanup via releaseCell. */
+    editorComponentRefs = [];
     typeRegistry = null;
     constructor(injector, appRef, viewContainerRef) {
         this.injector = injector;
@@ -1498,8 +1531,24 @@ class GridAdapter {
             this.viewRefs.push(viewRef);
             // Trigger change detection
             viewRef.detectChanges();
-            // Get the first root node (the component's host element)
-            const rootNode = viewRef.rootNodes[0];
+            // Find the first Element root node. When *tbwRenderer is used on <ng-container>,
+            // rootNodes[0] is a comment node (<!--ng-container-->); the actual content is in
+            // subsequent root nodes. For single-element templates, rootNodes[0] IS the element.
+            let rootNode = viewRef.rootNodes[0];
+            const elementNodes = viewRef.rootNodes.filter((n) => n.nodeType === Node.ELEMENT_NODE);
+            if (elementNodes.length === 1) {
+                // Single element among the root nodes — use it directly
+                rootNode = elementNodes[0];
+            }
+            else if (elementNodes.length > 1) {
+                // Multiple element nodes — wrap in a span container so all are rendered
+                const wrapper = document.createElement('span');
+                wrapper.style.display = 'contents';
+                for (const node of viewRef.rootNodes) {
+                    wrapper.appendChild(node);
+                }
+                rootNode = wrapper;
+            }
             // Cache for reuse on scroll recycles
             if (cellEl) {
                 cellCache.set(cellEl, { viewRef, rootNode });
@@ -1580,7 +1629,8 @@ class GridAdapter {
             };
             // Create embedded view from template
             const viewRef = this.viewContainerRef.createEmbeddedView(template, context);
-            this.viewRefs.push(viewRef);
+            // Track in editor-specific array for per-cell cleanup via releaseCell
+            this.editorViewRefs.push(viewRef);
             // Trigger change detection
             viewRef.detectChanges();
             // Get the first root node (the component's host element)
@@ -1798,7 +1848,7 @@ class GridAdapter {
      * Shared logic between renderer and editor component creation.
      * @internal
      */
-    mountComponent(componentClass, inputs) {
+    mountComponent(componentClass, inputs, isEditor = false) {
         // Create a host element for the component
         const hostElement = document.createElement('span');
         hostElement.style.display = 'contents';
@@ -1811,7 +1861,13 @@ class GridAdapter {
         this.setComponentInputs(componentRef, inputs);
         // Attach to app for change detection
         this.appRef.attachView(componentRef.hostView);
-        this.componentRefs.push(componentRef);
+        // Track in editor-specific array for per-cell cleanup, or general array for renderers
+        if (isEditor) {
+            this.editorComponentRefs.push(componentRef);
+        }
+        else {
+            this.componentRefs.push(componentRef);
+        }
         // Trigger change detection
         componentRef.changeDetectorRef.detectChanges();
         return { hostElement, componentRef };
@@ -1878,7 +1934,7 @@ class GridAdapter {
                 value: ctx.value,
                 row: ctx.row,
                 column: ctx.column,
-            });
+            }, true);
             this.wireEditorCallbacks(hostElement, componentRef, (value) => ctx.commit(value), () => ctx.cancel());
             // Auto-update editor when value changes externally (e.g., via updateRow cascade).
             // This keeps Angular component editors in sync without manual DOM patching.
@@ -1959,6 +2015,33 @@ class GridAdapter {
             }
         }
     }
+    /**
+     * Called when a cell's content is about to be wiped (e.g., exiting edit mode,
+     * scroll-recycling a row, or rebuilding a row).
+     *
+     * Destroys any editor embedded views or component refs whose DOM is
+     * inside the given cell element. This prevents memory leaks from
+     * orphaned Angular views that would otherwise stay in the change
+     * detection tree indefinitely.
+     */
+    releaseCell(cellEl) {
+        // Release editor embedded views whose root nodes are inside this cell
+        for (let i = this.editorViewRefs.length - 1; i >= 0; i--) {
+            const ref = this.editorViewRefs[i];
+            if (ref.rootNodes.some((n) => cellEl.contains(n))) {
+                ref.destroy();
+                this.editorViewRefs.splice(i, 1);
+            }
+        }
+        // Release editor component refs whose host element is inside this cell
+        for (let i = this.editorComponentRefs.length - 1; i >= 0; i--) {
+            const ref = this.editorComponentRefs[i];
+            if (cellEl.contains(ref.location.nativeElement)) {
+                ref.destroy();
+                this.editorComponentRefs.splice(i, 1);
+            }
+        }
+    }
     /**
      * Clean up all view references and component references.
      * Call this when your app/component is destroyed.
@@ -1966,8 +2049,12 @@ class GridAdapter {
     destroy() {
         this.viewRefs.forEach((ref) => ref.destroy());
         this.viewRefs = [];
+        this.editorViewRefs.forEach((ref) => ref.destroy());
+        this.editorViewRefs = [];
         this.componentRefs.forEach((ref) => ref.destroy());
         this.componentRefs = [];
+        this.editorComponentRefs.forEach((ref) => ref.destroy());
+        this.editorComponentRefs = [];
     }
 }
 /**
@@ -2975,10 +3062,14 @@ const OVERLAY_STYLES = /* css */ `
     right: anchor(right);
     position-try-fallbacks: flip-block;
   }
-  .tbw-overlay-panel[data-pos="over-left"] {
+  .tbw-overlay-panel[data-pos="over-top-left"] {
     top: anchor(top);
     left: anchor(left);
   }
+  .tbw-overlay-panel[data-pos="over-bottom-left"] {
+    bottom: anchor(bottom);
+    left: anchor(left);
+  }
 }
 `;
 function ensureOverlayStyles() {
@@ -3334,11 +3425,16 @@ class BaseOverlayEditor extends BaseGridEditor {
                     top = cellRect.top - panelRect.height;
                 break;
             }
-            case 'over-left': {
+            case 'over-top-left': {
                 top = cellRect.top;
                 left = cellRect.left;
                 break;
             }
+            case 'over-bottom-left': {
+                top = cellRect.bottom - panelRect.height;
+                left = cellRect.left;
+                break;
+            }
             case 'below':
             default: {
                 top = cellRect.bottom;