refactor(header): use signals for inputs and outputs

Author: chintankavathia

projects/ngx-datatable/src/lib/components/datatable.component.ts

@@ -963,7 +963,7 @@ export class DatatableComponent<TRow extends Row = any>
 
     // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
     if (this.headerComponent && this.headerComponent._columnGroupWidths.total !== width) {
-      this.headerComponent.columns = [...this._internalColumns];
+      this._internalColumns = [...this._internalColumns];
     }
 
     return columns;

projects/ngx-datatable/src/lib/components/header/header-cell.component.ts

@@ -10,7 +10,6 @@ import {
   TemplateRef,
   input,
   output,
-  numberAttribute,
   computed,
   booleanAttribute
 } from '@angular/core';
@@ -87,7 +86,7 @@ import { nextSortDir } from '../../utils/sort';
     '[attr.title]': 'name()',
     '[attr.tabindex]': 'column().sortable ? 0 : -1',
     '[class]': 'columnCssClasses()',
-    '[style.height.px]': 'headerHeight()',
+    '[style.height]': 'headerHeight() === "auto" ? "auto" : headerHeight() + "px"',
     '[style.minWidth.px]': 'column().minWidth',
     '[style.maxWidth.px]': 'column().maxWidth',
     '[style.width.px]': 'column().width'
@@ -108,9 +107,7 @@ export class DataTableHeaderCellComponent implements OnInit, OnDestroy {
   readonly allRowsSelected = input(false, { transform: booleanAttribute });
   readonly selectionType = input<SelectionType>();
   readonly column = input.required<TableColumnInternal>();
-  readonly headerHeight = input.required<number, number>({
-    transform: numberAttribute
-  });
+  readonly headerHeight = input.required<'auto' | number>();
   readonly sorts = input<SortPropDir[]>([]);
 
   readonly sort = output<InnerSortEvent>();

projects/ngx-datatable/src/lib/components/header/header.component.spec.ts

@@ -14,6 +14,13 @@ describe('DataTableHeaderComponent', () => {
 
   beforeEach(async () => {
     fixture = TestBed.createComponent(DataTableHeaderComponent);
+    fixture.componentRef.setInput('columns', []);
+    fixture.componentRef.setInput('innerWidth', 200);
+    fixture.componentRef.setInput('sorts', []);
+    fixture.componentRef.setInput('sortType', 'single');
+    fixture.componentRef.setInput('headerHeight', 50);
+    fixture.componentRef.setInput('ariaHeaderCheckboxMessage', 'Select all rows');
+
     harness = await TestbedHarnessEnvironment.harnessForFixture(fixture, HeaderHarness);
     componentRef = fixture.componentRef;
   });
@@ -76,7 +83,7 @@ describe('DataTableHeaderComponent', () => {
     componentRef.instance.resizing.subscribe(event => {
       const { column, newValue } = event;
       column.width = newValue;
-      componentRef.setInput('columns', [...componentRef.instance.columns]);
+      componentRef.setInput('columns', [...componentRef.instance.columns()]);
     });
 
     const initialWidth = await harness.getColumnWidth(0);
@@ -175,51 +182,64 @@ describe('DataTableHeaderComponent', () => {
 
     componentRef.instance.reorder.subscribe(event => {
       const { newValue, prevValue } = event;
-      const columns = componentRef.instance.columns;
+
+      // Get fresh reference to columns
+      const currentColumns = [...componentRef.instance.columns()];
       const columnIndex = prevValue;
-      const movedColumn = columns.splice(columnIndex, 1)[0];
-      columns.splice(newValue, 0, movedColumn);
-      componentRef.setInput('columns', columns);
-      // TODO remove this once we migrate to signal inputs
-      componentRef.instance.columns = columns;
+      const movedColumn = currentColumns.splice(columnIndex, 1)[0];
+      currentColumns.splice(newValue, 0, movedColumn);
+
+      // Update columns
+      componentRef.setInput('columns', currentColumns);
+      tick();
     });
 
+    fixture.detectChanges();
     tick();
-    const headerCells = fixture.debugElement.queryAll(By.css('.draggable'));
+    const headerCells = fixture.debugElement.queryAll(By.css('datatable-header-cell.draggable'));
 
+    // Get the first cell (Column 1) that we want to drag
     const firstCell = headerCells[0].nativeElement;
-    const clientRect = (firstCell as HTMLElement).getBoundingClientRect();
+    const secondCell = headerCells[1].nativeElement;
+
+    // Get positions
+    const firstRect = firstCell.getBoundingClientRect();
+    const secondRect = secondCell.getBoundingClientRect();
 
+    // Start drag on first cell
     const mouseDownEvent = new MouseEvent('mousedown', {
-      clientX: clientRect.x,
-      screenX: clientRect.x,
-      clientY: clientRect.y,
-      screenY: clientRect.y,
+      clientX: firstRect.left + firstRect.width / 2,
+      clientY: firstRect.top + firstRect.height / 2,
       bubbles: true
     });
     firstCell.dispatchEvent(mouseDownEvent);
+    fixture.detectChanges();
 
-    // Wait 500ms after mousedown to consider it as long press
-    await new Promise(resolve => setTimeout(resolve, 500));
-
+    // Wait for drag start delay
+    tick(500);
     fixture.detectChanges();
 
+    // Move to the second cell position
     const mouseMoveEvent = new MouseEvent('mousemove', {
-      clientX: clientRect.x + 200,
-      screenX: clientRect.x + 200,
-      clientY: clientRect.y,
-      screenY: clientRect.y
+      clientX: secondRect.left + secondRect.width / 2,
+      clientY: secondRect.top + secondRect.height / 2,
+      bubbles: true
     });
     document.dispatchEvent(mouseMoveEvent);
+    fixture.detectChanges();
+    tick();
 
+    // End drag
     const mouseUpEvent = new MouseEvent('mouseup', {
-      clientX: clientRect.x + 200,
-      screenX: clientRect.x + 200,
-      clientY: clientRect.y,
-      screenY: clientRect.y
+      clientX: secondRect.left + secondRect.width / 2,
+      clientY: secondRect.top + secondRect.height / 2,
+      bubbles: true
     });
     document.dispatchEvent(mouseUpEvent);
 
+    // Allow time for any async operations
+    tick(200);
+
     expect(await harness.getColumnName(0)).toBe('Column 2');
     expect(await harness.getColumnName(1)).toBe('Column 1');
     expect(await harness.getColumnName(2)).toBe('Column 3');
@@ -236,14 +256,14 @@ describe('DataTableHeaderComponent', () => {
       ])
     );
     const leftGroupStyle = await harness.getTransformStyle('left');
-    expect(leftGroupStyle).toBe('');
+    expect(leftGroupStyle).toBe('width: 100px;');
     componentRef.setInput('offsetX', 100);
 
     expect(await harness.getTransformStyle('left')).toBe(leftGroupStyle);
 
     const centerGroupStyle = await harness.getTransformStyle('center');
     expect(centerGroupStyle).toContain('translateX(-100px)');
 
-    expect(await harness.getTransformStyle('right')).toBe('');
+    expect(await harness.getTransformStyle('right')).toBe('width: 200px;');
   });
 });