@toolbox-web/grid-angular 0.9.1 → 0.10.0

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

@@ -1,6 +1,8 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, contentChild, TemplateRef, effect, Directive, input, InjectionToken, Injectable, makeEnvironmentProviders, EventEmitter, createComponent, signal, afterNextRender, computed, output, EnvironmentInjector, ApplicationRef, ViewContainerRef } from '@angular/core';
+import { inject, ElementRef, contentChild, TemplateRef, effect, Directive, input, DestroyRef, InjectionToken, Injectable, makeEnvironmentProviders, EventEmitter, createComponent, signal, afterNextRender, computed, output, EnvironmentInjector, ApplicationRef, ViewContainerRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormGroup } from '@angular/forms';
+import { startWith } from 'rxjs/operators';
 import { DataGridElement } from '@toolbox-web/grid';
 
 /**
@@ -339,10 +341,12 @@ function getFormArrayContext(gridElement) {
  * - Automatically syncs FormArray changes to the grid
  */
 class GridFormArray {
+    destroyRef = inject(DestroyRef);
     elementRef = inject((ElementRef));
     cellCommitListener = null;
     rowCommitListener = null;
     touchListener = null;
+    valueChangesSubscription = null;
     /**
      * The FormArray to bind to the grid.
      */
@@ -359,15 +363,24 @@ class GridFormArray {
      */
     syncValidation = input(true, ...(ngDevMode ? [{ debugName: "syncValidation" }] : []));
     /**
-     * Effect that syncs the FormArray value to the grid rows.
+     * Effect that sets up valueChanges subscription when FormArray changes.
+     * This handles both initial binding and when the FormArray reference changes.
      */
     syncFormArrayToGrid = effect(() => {
         const formArray = this.formArray();
         const grid = this.elementRef.nativeElement;
-        if (grid && formArray) {
-            // Get the raw value (including disabled controls)
+        if (!grid || !formArray)
+            return;
+        // Unsubscribe from previous FormArray if any
+        this.valueChangesSubscription?.unsubscribe();
+        // 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.
+        this.valueChangesSubscription = formArray.valueChanges
+            .pipe(startWith(formArray.getRawValue()), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
             grid.rows = formArray.getRawValue();
-        }
+        });
     }, ...(ngDevMode ? [{ debugName: "syncFormArrayToGrid" }] : []));
     ngOnInit() {
         const grid = this.elementRef.nativeElement;
@@ -413,6 +426,9 @@ class GridFormArray {
         if (this.touchListener) {
             grid.removeEventListener('click', this.touchListener);
         }
+        if (this.valueChangesSubscription) {
+            this.valueChangesSubscription.unsubscribe();
+        }
         this.#clearFormContext(grid);
     }
     /**
@@ -1268,14 +1284,39 @@ class AngularGridAdapter {
      * @returns Processed GridConfig with actual renderer/editor functions
      */
     processGridConfig(config) {
-        if (!config.columns) {
-            return config;
+        const result = { ...config };
+        // Process columns
+        if (config.columns) {
+            result.columns = config.columns.map((col) => this.processColumn(col));
         }
-        const processedColumns = config.columns.map((col) => this.processColumn(col));
-        return {
-            ...config,
-            columns: processedColumns,
-        };
+        // Process typeDefaults - convert Angular component classes to renderer/editor functions
+        if (config.typeDefaults) {
+            result.typeDefaults = this.processTypeDefaults(config.typeDefaults);
+        }
+        return result;
+    }
+    /**
+     * Processes typeDefaults configuration, converting component class references
+     * to actual renderer/editor functions.
+     *
+     * @param typeDefaults - Angular type defaults with possible component class references
+     * @returns Processed TypeDefault record
+     */
+    processTypeDefaults(typeDefaults) {
+        const processed = {};
+        for (const [type, config] of Object.entries(typeDefaults)) {
+            const processedConfig = { ...config };
+            // Convert renderer component class to function
+            if (config.renderer && isComponentClass(config.renderer)) {
+                processedConfig.renderer = this.createComponentRenderer(config.renderer);
+            }
+            // Convert editor component class to function
+            if (config.editor && isComponentClass(config.editor)) {
+                processedConfig.editor = this.createComponentEditor(config.editor);
+            }
+            processed[type] = processedConfig;
+        }
+        return processed;
     }
     /**
      * Processes a single column configuration, converting component class references
@@ -1318,6 +1359,11 @@ class AngularGridAdapter {
             return undefined;
         }
         return (ctx) => {
+            // Skip rendering if the cell is in editing mode
+            // This prevents the renderer from overwriting the editor when the grid re-renders
+            if (ctx.cellEl?.classList.contains('editing')) {
+                return null;
+            }
             // Create the context for the template
             const context = {
                 $implicit: ctx.value,
@@ -1358,10 +1404,10 @@ class AngularGridAdapter {
         // Find the parent grid element for FormArray context access
         const gridElement = element.closest('tbw-grid');
         if (!template) {
-            // No warning - this can happen during early initialization before Angular
-            // registers structural directive templates. The grid will re-parse columns
-            // after templates are registered.
-            return () => document.createElement('div');
+            // No template registered - return undefined to let the grid use its default editor.
+            // This allows columns with only *tbwRenderer (no *tbwEditor) to still be editable
+            // using the built-in text/number/boolean editors.
+            return undefined;
         }
         return (ctx) => {
             // Create simple callback functions (preferred)
@@ -1591,31 +1637,58 @@ class AngularGridAdapter {
         }
         return typeDefault;
     }
+    /**
+     * Creates and mounts an Angular component dynamically.
+     * Shared logic between renderer and editor component creation.
+     * @internal
+     */
+    mountComponent(componentClass, inputs) {
+        // Create a host element for the component
+        const hostElement = document.createElement('span');
+        hostElement.style.display = 'contents';
+        // Create the component dynamically
+        const componentRef = createComponent(componentClass, {
+            environmentInjector: this.injector,
+            hostElement,
+        });
+        // Set inputs - components should have value, row, column inputs
+        this.setComponentInputs(componentRef, inputs);
+        // Attach to app for change detection
+        this.appRef.attachView(componentRef.hostView);
+        this.componentRefs.push(componentRef);
+        // Trigger change detection
+        componentRef.changeDetectorRef.detectChanges();
+        return { hostElement, componentRef };
+    }
+    /**
+     * Wires up commit/cancel handlers for an editor component.
+     * Supports both Angular outputs and DOM CustomEvents.
+     * @internal
+     */
+    wireEditorCallbacks(hostElement, componentRef, commit, cancel) {
+        // Subscribe to Angular outputs (commit/cancel) on the component instance.
+        // This works with Angular's output() signal API.
+        const instance = componentRef.instance;
+        this.subscribeToOutput(instance, 'commit', commit);
+        this.subscribeToOutput(instance, 'cancel', cancel);
+        // Also listen for DOM events as fallback (for components that dispatch CustomEvents)
+        hostElement.addEventListener('commit', (e) => {
+            const customEvent = e;
+            commit(customEvent.detail);
+        });
+        hostElement.addEventListener('cancel', () => cancel());
+    }
     /**
      * Creates a renderer function from an Angular component class.
      * @internal
      */
     createComponentRenderer(componentClass) {
         return (ctx) => {
-            // Create a host element for the component
-            const hostElement = document.createElement('span');
-            hostElement.style.display = 'contents';
-            // Create the component dynamically
-            const componentRef = createComponent(componentClass, {
-                environmentInjector: this.injector,
-                hostElement,
-            });
-            // Set inputs - components should have value, row, column inputs
-            this.setComponentInputs(componentRef, {
+            const { hostElement } = this.mountComponent(componentClass, {
                 value: ctx.value,
                 row: ctx.row,
                 column: ctx.column,
             });
-            // Attach to app for change detection
-            this.appRef.attachView(componentRef.hostView);
-            this.componentRefs.push(componentRef);
-            // Trigger change detection
-            componentRef.changeDetectorRef.detectChanges();
             return hostElement;
         };
     }
@@ -1625,38 +1698,12 @@ class AngularGridAdapter {
      */
     createComponentEditor(componentClass) {
         return (ctx) => {
-            // Create a host element for the component
-            const hostElement = document.createElement('span');
-            hostElement.style.display = 'contents';
-            // Create the component dynamically
-            const componentRef = createComponent(componentClass, {
-                environmentInjector: this.injector,
-                hostElement,
-            });
-            // Set inputs - components should have value, row, column inputs
-            this.setComponentInputs(componentRef, {
+            const { hostElement, componentRef } = this.mountComponent(componentClass, {
                 value: ctx.value,
                 row: ctx.row,
                 column: ctx.column,
             });
-            // Attach to app for change detection
-            this.appRef.attachView(componentRef.hostView);
-            this.componentRefs.push(componentRef);
-            // Trigger change detection
-            componentRef.changeDetectorRef.detectChanges();
-            // Subscribe to Angular outputs (commit/cancel) on the component instance.
-            // This works with Angular's output() signal API.
-            const instance = componentRef.instance;
-            this.subscribeToOutput(instance, 'commit', (value) => ctx.commit(value));
-            this.subscribeToOutput(instance, 'cancel', () => ctx.cancel());
-            // Also listen for DOM events as fallback (for components that dispatch CustomEvents)
-            hostElement.addEventListener('commit', (e) => {
-                const customEvent = e;
-                ctx.commit(customEvent.detail);
-            });
-            hostElement.addEventListener('cancel', () => {
-                ctx.cancel();
-            });
+            this.wireEditorCallbacks(hostElement, componentRef, (value) => ctx.commit(value), () => ctx.cancel());
             return hostElement;
         };
     }
@@ -2697,6 +2744,9 @@ class Grid {
      * <tbw-grid [editing]="'click'" />
      * <tbw-grid [editing]="'dblclick'" />
      * <tbw-grid [editing]="'manual'" />
+     *
+     * <!-- Full config with callbacks -->
+     * <tbw-grid [editing]="{ editOn: 'dblclick', onBeforeEditClose: myCallback }" />
      * ```
      */
     editing = input(...(ngDevMode ? [undefined, { debugName: "editing" }] : []));