@toolbox-web/grid-angular 0.17.0 → 0.18.0

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

@@ -1575,6 +1575,10 @@ class GridAdapter {
         if (config.typeDefaults) {
             result.typeDefaults = this.processTypeDefaults(config.typeDefaults);
         }
+        // Process loadingRenderer - convert Angular component class to function
+        if (config.loadingRenderer && isComponentClass(config.loadingRenderer)) {
+            result.loadingRenderer = this.createComponentLoadingRenderer(config.loadingRenderer);
+        }
         return result;
     }
     /**
@@ -1621,6 +1625,14 @@ class GridAdapter {
         if (column.editor && isComponentClass(column.editor)) {
             processed.editor = this.createComponentEditor(column.editor);
         }
+        // Convert headerRenderer component class to function
+        if (column.headerRenderer && isComponentClass(column.headerRenderer)) {
+            processed.headerRenderer = this.createComponentHeaderRenderer(column.headerRenderer);
+        }
+        // Convert headerLabelRenderer component class to function
+        if (column.headerLabelRenderer && isComponentClass(column.headerLabelRenderer)) {
+            processed.headerLabelRenderer = this.createComponentHeaderLabelRenderer(column.headerLabelRenderer);
+        }
         return processed;
     }
     /**
@@ -2094,6 +2106,222 @@ class GridAdapter {
             return hostElement;
         };
     }
+    /**
+     * Creates a header renderer function from an Angular component class.
+     * Mounts the component with full header context (column, value, sortState, etc.).
+     * @internal
+     */
+    createComponentHeaderRenderer(componentClass) {
+        return (ctx) => {
+            const hostElement = document.createElement('span');
+            hostElement.style.display = 'contents';
+            const componentRef = createComponent(componentClass, {
+                environmentInjector: this.injector,
+                hostElement,
+            });
+            this.setComponentInputs(componentRef, {
+                column: ctx.column,
+                value: ctx.value,
+                sortState: ctx.sortState,
+                filterActive: ctx.filterActive,
+                renderSortIcon: ctx.renderSortIcon,
+                renderFilterButton: ctx.renderFilterButton,
+            });
+            this.appRef.attachView(componentRef.hostView);
+            this.componentRefs.push(componentRef);
+            componentRef.changeDetectorRef.detectChanges();
+            return hostElement;
+        };
+    }
+    /**
+     * Creates a header label renderer function from an Angular component class.
+     * Mounts the component with label context (column, value).
+     * @internal
+     */
+    createComponentHeaderLabelRenderer(componentClass) {
+        return (ctx) => {
+            const hostElement = document.createElement('span');
+            hostElement.style.display = 'contents';
+            const componentRef = createComponent(componentClass, {
+                environmentInjector: this.injector,
+                hostElement,
+            });
+            this.setComponentInputs(componentRef, {
+                column: ctx.column,
+                value: ctx.value,
+            });
+            this.appRef.attachView(componentRef.hostView);
+            this.componentRefs.push(componentRef);
+            componentRef.changeDetectorRef.detectChanges();
+            return hostElement;
+        };
+    }
+    /**
+     * Creates a group header renderer function from an Angular component class.
+     *
+     * The component should accept group header inputs (id, label, columns, firstIndex, isImplicit).
+     * Returns the host element directly (groupHeaderRenderer returns an element, not void).
+     * @internal
+     */
+    createComponentGroupHeaderRenderer(componentClass) {
+        return (params) => {
+            const hostElement = document.createElement('span');
+            hostElement.style.display = 'contents';
+            const componentRef = createComponent(componentClass, {
+                environmentInjector: this.injector,
+                hostElement,
+            });
+            this.setComponentInputs(componentRef, {
+                id: params.id,
+                label: params.label,
+                columns: params.columns,
+                firstIndex: params.firstIndex,
+                isImplicit: params.isImplicit,
+            });
+            this.appRef.attachView(componentRef.hostView);
+            this.componentRefs.push(componentRef);
+            componentRef.changeDetectorRef.detectChanges();
+            return hostElement;
+        };
+    }
+    /**
+     * Processes a GroupingColumnsConfig, converting component class references
+     * to actual renderer functions.
+     *
+     * @param config - Angular grouping columns configuration with possible component class references
+     * @returns Processed GroupingColumnsConfig with actual renderer functions
+     */
+    processGroupingColumnsConfig(config) {
+        if (config.groupHeaderRenderer && isComponentClass(config.groupHeaderRenderer)) {
+            return {
+                ...config,
+                groupHeaderRenderer: this.createComponentGroupHeaderRenderer(config.groupHeaderRenderer),
+            };
+        }
+        return config;
+    }
+    /**
+     * Processes a GroupingRowsConfig, converting component class references
+     * to actual renderer functions.
+     *
+     * @param config - Angular grouping rows configuration with possible component class references
+     * @returns Processed GroupingRowsConfig with actual renderer functions
+     */
+    processGroupingRowsConfig(config) {
+        if (config.groupRowRenderer && isComponentClass(config.groupRowRenderer)) {
+            return {
+                ...config,
+                groupRowRenderer: this.createComponentGroupRowRenderer(config.groupRowRenderer),
+            };
+        }
+        return config;
+    }
+    /**
+     * Processes a PinnedRowsConfig, converting component class references
+     * in `customPanels[].render` to actual renderer functions.
+     *
+     * @param config - Angular pinned rows configuration with possible component class references
+     * @returns Processed PinnedRowsConfig with actual renderer functions
+     */
+    processPinnedRowsConfig(config) {
+        if (!Array.isArray(config.customPanels))
+            return config;
+        const hasComponentRender = config.customPanels.some((panel) => isComponentClass(panel.render));
+        if (!hasComponentRender)
+            return config;
+        return {
+            ...config,
+            customPanels: config.customPanels.map((panel) => {
+                if (!isComponentClass(panel.render))
+                    return panel;
+                return {
+                    ...panel,
+                    render: this.createComponentPinnedRowsPanelRenderer(panel.render),
+                };
+            }),
+        };
+    }
+    /**
+     * Creates a pinned rows panel renderer function from an Angular component class.
+     *
+     * The component should accept inputs from PinnedRowsContext (totalRows, filteredRows,
+     * selectedRows, columns, rows, grid).
+     * @internal
+     */
+    createComponentPinnedRowsPanelRenderer(componentClass) {
+        return (ctx) => {
+            const hostElement = document.createElement('span');
+            hostElement.style.display = 'contents';
+            const componentRef = createComponent(componentClass, {
+                environmentInjector: this.injector,
+                hostElement,
+            });
+            this.setComponentInputs(componentRef, {
+                totalRows: ctx.totalRows,
+                filteredRows: ctx.filteredRows,
+                selectedRows: ctx.selectedRows,
+                columns: ctx.columns,
+                rows: ctx.rows,
+                grid: ctx.grid,
+            });
+            this.appRef.attachView(componentRef.hostView);
+            this.componentRefs.push(componentRef);
+            componentRef.changeDetectorRef.detectChanges();
+            return hostElement;
+        };
+    }
+    /**
+     * Creates a loading renderer function from an Angular component class.
+     *
+     * The component should accept a `size` input ('large' | 'small').
+     * @internal
+     */
+    createComponentLoadingRenderer(componentClass) {
+        return (ctx) => {
+            const hostElement = document.createElement('span');
+            hostElement.style.display = 'contents';
+            const componentRef = createComponent(componentClass, {
+                environmentInjector: this.injector,
+                hostElement,
+            });
+            this.setComponentInputs(componentRef, {
+                size: ctx.size,
+            });
+            this.appRef.attachView(componentRef.hostView);
+            this.componentRefs.push(componentRef);
+            componentRef.changeDetectorRef.detectChanges();
+            return hostElement;
+        };
+    }
+    /**
+     * Creates a group row renderer function from an Angular component class.
+     *
+     * The component should accept group row inputs (key, value, depth, rows, expanded, toggleExpand).
+     * Returns the host element directly (groupRowRenderer returns an element, not void).
+     * @internal
+     */
+    createComponentGroupRowRenderer(componentClass) {
+        return (params) => {
+            const hostElement = document.createElement('span');
+            hostElement.style.display = 'contents';
+            const componentRef = createComponent(componentClass, {
+                environmentInjector: this.injector,
+                hostElement,
+            });
+            this.setComponentInputs(componentRef, {
+                key: params.key,
+                value: params.value,
+                depth: params.depth,
+                rows: params.rows,
+                expanded: params.expanded,
+                toggleExpand: params.toggleExpand,
+            });
+            this.appRef.attachView(componentRef.hostView);
+            this.componentRefs.push(componentRef);
+            componentRef.changeDetectorRef.detectChanges();
+            return hostElement;
+        };
+    }
     /**
      * Creates a filter panel renderer function from an Angular component class.
      *
@@ -2580,7 +2808,7 @@ function injectGrid() {
  * ## Usage
  *
  * ```typescript
- * import { Component } from '@angular/core';
+ * import { Component, viewChild, ElementRef } from '@angular/core';
  * import { BaseFilterPanel } from '@toolbox-web/grid-angular';
  *
  * @Component({
@@ -2592,10 +2820,10 @@ function injectGrid() {
  *   `
  * })
  * export class TextFilterComponent extends BaseFilterPanel {
- *   @ViewChild('input') input!: ElementRef<HTMLInputElement>;
+ *   input = viewChild.required<ElementRef<HTMLInputElement>>('input');
  *
  *   applyFilter(): void {
- *     this.params().applyTextFilter('contains', this.input.nativeElement.value);
+ *     this.params().applyTextFilter('contains', this.input().nativeElement.value);
  *   }
  * }
  * ```
@@ -3188,7 +3416,7 @@ let anchorCounter = 0;
  * ## Usage
  *
  * ```typescript
- * import { Component, ViewChild, ElementRef } from '@angular/core';
+ * import { Component, viewChild, ElementRef, effect } from '@angular/core';
  * import { BaseOverlayEditor } from '@toolbox-web/grid-angular';
  *
  * @Component({
@@ -3211,18 +3439,22 @@ let anchorCounter = 0;
  *   `
  * })
  * export class DateEditorComponent extends BaseOverlayEditor<MyRow, string> {
- *   @ViewChild('panel') panelRef!: ElementRef<HTMLElement>;
- *   @ViewChild('inlineInput') inputRef!: ElementRef<HTMLInputElement>;
+ *   panelRef = viewChild.required<ElementRef<HTMLElement>>('panel');
+ *   inputRef = viewChild.required<ElementRef<HTMLInputElement>>('inlineInput');
  *
  *   protected override overlayPosition = 'below' as const;
  *
- *   ngAfterViewInit(): void {
- *     this.initOverlay(this.panelRef.nativeElement);
- *     if (this.isCellFocused()) this.showOverlay();
+ *   constructor() {
+ *     super();
+ *     effect(() => {
+ *       const panel = this.panelRef().nativeElement;
+ *       this.initOverlay(panel);
+ *       if (this.isCellFocused()) this.showOverlay();
+ *     });
  *   }
  *
  *   protected getInlineInput(): HTMLInputElement | null {
- *     return this.inputRef?.nativeElement ?? null;
+ *     return this.inputRef()?.nativeElement ?? null;
  *   }
  *
  *   protected onOverlayOutsideClick(): void {
@@ -3283,7 +3515,7 @@ class BaseOverlayEditor extends BaseGridEditor {
     /**
      * Initialise the overlay with the panel element.
      *
-     * Call this in `ngAfterViewInit` with your `@ViewChild` panel reference.
+     * Call this in an `effect()` or `afterNextRender()` with your `viewChild` panel reference.
      * The panel is moved to `<body>` and hidden until {@link showOverlay} is called.
      *
      * @param panel - The overlay panel DOM element
@@ -4765,7 +4997,7 @@ class Grid {
      *
      * @example
      * ```html
-     * <tbw-grid [groupingColumns]="{ columnGroups: [...] }" />
+     * <tbw-grid [groupingColumns]="true" />
      * ```
      */
     groupingColumns = input(...(ngDevMode ? [undefined, { debugName: "groupingColumns" }] : []));
@@ -5311,11 +5543,32 @@ class Grid {
         addPlugin('reorderColumns', this.reorderColumns() ?? this.reorder());
         addPlugin('visibility', this.visibility());
         addPlugin('pinnedColumns', this.pinnedColumns());
-        addPlugin('groupingColumns', this.groupingColumns());
+        // Pre-process groupingColumns config to bridge Angular component classes
+        const gcConfig = this.groupingColumns();
+        if (gcConfig && typeof gcConfig === 'object' && this.adapter) {
+            addPlugin('groupingColumns', this.adapter.processGroupingColumnsConfig(gcConfig));
+        }
+        else {
+            addPlugin('groupingColumns', gcConfig);
+        }
         addPlugin('columnVirtualization', this.columnVirtualization());
         addPlugin('reorderRows', this.reorderRows() ?? this.rowReorder());
-        addPlugin('groupingRows', this.groupingRows());
-        addPlugin('pinnedRows', this.pinnedRows());
+        // Pre-process groupingRows config to bridge Angular component classes
+        const grConfig = this.groupingRows();
+        if (grConfig && typeof grConfig === 'object' && this.adapter) {
+            addPlugin('groupingRows', this.adapter.processGroupingRowsConfig(grConfig));
+        }
+        else {
+            addPlugin('groupingRows', grConfig);
+        }
+        // Pre-process pinnedRows config to bridge Angular component classes in customPanels
+        const prConfig = this.pinnedRows();
+        if (prConfig && typeof prConfig === 'object' && this.adapter) {
+            addPlugin('pinnedRows', this.adapter.processPinnedRowsConfig(prConfig));
+        }
+        else {
+            addPlugin('pinnedRows', prConfig);
+        }
         addPlugin('tree', this.tree());
         addPlugin('masterDetail', this.masterDetail());
         addPlugin('responsive', this.responsive());