refactor: datatable-selection and datatable-scroller as directive

BREAKING CHANGE: replaced `DataTableSelectionComponent` with `DataTableSelectionDirective` and `ScrollerComponent` with `ScrollerDirective`. This components were used internally and now replaced as directives.

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

@@ -3,10 +3,10 @@ import { DataTableBodyComponent } from './body.component';
 import { DataTableBodyRowComponent } from './body-row.component';
 import { DataTableRowWrapperComponent } from './body-row-wrapper.component';
 import { DataTableBodyCellComponent } from './body-cell.component';
-import { DataTableSelectionComponent } from './selection.component';
+import { DataTableSelectionDirective } from './selection.directive';
 import { DataTableSummaryRowComponent } from './summary/summary-row.component';
 import { ProgressBarComponent } from './progress-bar.component';
-import { ScrollerComponent } from './scroller.component';
+import { ScrollerDirective } from './scroller.directive';
 import { ScrollbarHelper } from '../../services/scrollbar-helper.service';
 
 describe('DataTableBodyComponent', () => {
@@ -21,10 +21,10 @@ describe('DataTableBodyComponent', () => {
         DataTableBodyRowComponent,
         DataTableRowWrapperComponent,
         DataTableBodyCellComponent,
-        DataTableSelectionComponent,
+        DataTableSelectionDirective,
         DataTableSummaryRowComponent,
         ProgressBarComponent,
-        ScrollerComponent
+        ScrollerDirective
       ],
       providers: [ScrollbarHelper]
     });

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

@@ -15,7 +15,7 @@ import {
   TrackByFunction,
   ViewChild
 } from '@angular/core';
-import { ScrollerComponent } from './scroller.component';
+import { ScrollerDirective } from './scroller.directive';
 import { columnGroupWidths, columnsByPin } from '../../utils/column';
 import { RowHeightCache } from '../../utils/row-height-cache';
 import { NgStyle } from '@angular/common';
@@ -57,24 +57,23 @@ import {
       >
       </ghost-loader>
     }
-    <datatable-selection
-      #selector
-      [selected]="selected"
-      [rows]="rows"
-      [selectCheck]="selectCheck"
-      [disableCheck]="disableRowCheck"
-      [selectEnabled]="selectEnabled"
-      [selectionType]="selectionType"
-      [rowIdentity]="rowIdentity"
-      (select)="select.emit($event)"
-      (activate)="activate.emit($event)"
-    >
       @if (rows?.length) {
         <datatable-scroller
+          #selector="selector"
+          datatable-selection
           [scrollbarV]="scrollbarV"
           [scrollbarH]="scrollbarH"
           [scrollHeight]="scrollHeight()"
           [scrollWidth]="columnGroupWidths?.total"
+          [selected]="selected"
+          [rows]="rows"
+          [selectCheck]="selectCheck"
+          [disableCheck]="disableRowCheck"
+          [selectEnabled]="selectEnabled"
+          [selectionType]="selectionType"
+          [rowIdentity]="rowIdentity"
+          (select)="select.emit($event)"
+          (activate)="activate.emit($event)"
           (scroll)="onBodyScroll($event)"
         >
           @if (summaryRow && summaryPosition === 'top') {
@@ -247,7 +246,6 @@ import {
           <div #customEmptyContent> <ng-content select="[empty-content]"></ng-content> </div
         ></datatable-scroller>
       }
-    </datatable-selection>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
@@ -389,7 +387,7 @@ export class DataTableBodyComponent<TRow extends { treeStatus?: TreeStatus } = a
   @Output() rowContextmenu = new EventEmitter<{ event: MouseEvent; row: RowOrGroup<TRow> }>(false);
   @Output() treeAction: EventEmitter<{ row: TRow }> = new EventEmitter();
 
-  @ViewChild(ScrollerComponent) scroller: ScrollerComponent;
+  @ViewChild(ScrollerDirective) scroller: ScrollerDirective;
 
   /**
    * Returns if selection is enabled.

projects/ngx-datatable/src/lib/components/body/scroller.directive.spec.ts

@@ -0,0 +1,36 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { ScrollerDirective } from './scroller.directive';
+import { Component, ViewChild } from '@angular/core';
+
+@Component({
+  selector: 'test-fixture-component',
+  template: ` <datatable-scroller #scroller="scroller" /> `
+})
+class TestFixtureComponent {
+  @ViewChild(ScrollerDirective, { static: true }) scroller!: ScrollerDirective;
+}
+
+describe('ScrollerDirective', () => {
+  let fixture: ComponentFixture<TestFixtureComponent>;
+  let component: TestFixtureComponent;
+
+  // provide our implementations or mocks to the dependency injector
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [TestFixtureComponent, ScrollerDirective]
+    });
+  });
+
+  beforeEach(waitForAsync(() => {
+    TestBed.compileComponents().then(() => {
+      fixture = TestBed.createComponent(TestFixtureComponent);
+      component = fixture.componentInstance;
+    });
+  }));
+
+  describe('fixture', () => {
+    it('should have a directive instance', () => {
+      expect(component.scroller).toBeTruthy();
+    });
+  });
+});

projects/ngx-datatable/src/lib/components/body/scroller.component.ts → projects/ngx-datatable/src/lib/components/body/scroller.directive.ts

@@ -1,6 +1,5 @@
 import {
-  ChangeDetectionStrategy,
-  Component,
+  Directive,
   ElementRef,
   EventEmitter,
   HostBinding,
@@ -12,15 +11,14 @@ import {
   Renderer2
 } from '@angular/core';
 
-@Component({
+@Directive({
   selector: 'datatable-scroller',
-  template: ` <ng-content></ng-content> `,
+  exportAs: 'scroller',
   host: {
     class: 'datatable-scroll'
-  },
-  changeDetection: ChangeDetectionStrategy.OnPush
+  }
 })
-export class ScrollerComponent implements OnInit, OnDestroy {
+export class ScrollerDirective implements OnInit, OnDestroy {
   private renderer = inject(Renderer2);
 
   @Input() scrollbarV = false;
@@ -49,7 +47,7 @@ export class ScrollerComponent implements OnInit, OnDestroy {
     // manual bind so we don't always listen
     if (this.scrollbarV || this.scrollbarH) {
       const renderer = this.renderer;
-      this.parentElement = renderer.parentNode(renderer.parentNode(this.element));
+      this.parentElement = renderer.parentNode(this.element);
       this._scrollEventListener = this.onScrolled.bind(this);
       this.parentElement.addEventListener('scroll', this._scrollEventListener);
     }

projects/ngx-datatable/src/lib/components/body/selection.directive.spec.ts

@@ -0,0 +1,36 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { DataTableSelectionDirective } from './selection.directive';
+import { Component, ViewChild } from '@angular/core';
+
+@Component({
+  selector: 'test-fixture-component',
+  template: ` <div datatable-selection></div> `
+})
+class TestFixtureComponent {
+  @ViewChild(DataTableSelectionDirective, { static: true }) selector!: DataTableSelectionDirective;
+}
+
+describe('DataTableSelectionDirective', () => {
+  let fixture: ComponentFixture<TestFixtureComponent>;
+  let component: TestFixtureComponent;
+
+  // provide our implementations or mocks to the dependency injector
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [TestFixtureComponent, DataTableSelectionDirective]
+    });
+  });
+
+  beforeEach(waitForAsync(() => {
+    TestBed.compileComponents().then(() => {
+      fixture = TestBed.createComponent(TestFixtureComponent);
+      component = fixture.componentInstance;
+    });
+  }));
+
+  describe('fixture', () => {
+    it('should have a component instance', () => {
+      expect(component.selector).toBeTruthy();
+    });
+  });
+});

projects/ngx-datatable/src/lib/components/body/selection.component.ts → projects/ngx-datatable/src/lib/components/body/selection.directive.ts

@@ -1,14 +1,13 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { Directive, EventEmitter, Input, Output } from '@angular/core';
 import { selectRows, selectRowsBetween } from '../../utils/selection';
 import { Keys } from '../../utils/keys';
 import { ActivateEvent, SelectionType } from '../../types/public.types';
 
-@Component({
-  selector: 'datatable-selection',
-  template: ` <ng-content></ng-content> `,
-  changeDetection: ChangeDetectionStrategy.OnPush
+@Directive({
+  selector: '[datatable-selection]',
+  exportAs: 'selector'
 })
-export class DataTableSelectionComponent<TRow = any> {
+export class DataTableSelectionDirective<TRow = any> {
   @Input() rows: TRow[];
   @Input() selected: TRow[];
   @Input() selectEnabled: boolean;

projects/ngx-datatable/src/lib/ngx-datatable.module.ts

@@ -9,7 +9,7 @@ import { DraggableDirective } from './directives/draggable.directive';
 import { ResizeableDirective } from './directives/resizeable.directive';
 import { OrderableDirective } from './directives/orderable.directive';
 import { LongPressDirective } from './directives/long-press.directive';
-import { ScrollerComponent } from './components/body/scroller.component';
+import { ScrollerDirective } from './components/body/scroller.directive';
 import { DatatableComponent } from './components/datatable.component';
 import { DataTableColumnDirective } from './components/columns/column.directive';
 import { DataTableHeaderComponent } from './components/header/header.component';
@@ -24,7 +24,7 @@ import { DatatableRowDetailDirective } from './components/row-detail/row-detail.
 import { DatatableGroupHeaderDirective } from './components/body/body-group-header.directive';
 import { DatatableRowDetailTemplateDirective } from './components/row-detail/row-detail-template.directive';
 import { DataTableBodyCellComponent } from './components/body/body-cell.component';
-import { DataTableSelectionComponent } from './components/body/selection.component';
+import { DataTableSelectionDirective } from './components/body/selection.directive';
 import { DataTableColumnHeaderDirective } from './components/columns/column-header.directive';
 import { DataTableColumnCellDirective } from './components/columns/column-cell.directive';
 import { DataTableColumnGhostCellDirective } from './components/columns/column-ghost-cell.directive';
@@ -50,7 +50,7 @@ import {
     ResizeableDirective,
     OrderableDirective,
     LongPressDirective,
-    ScrollerComponent,
+    ScrollerDirective,
     DatatableComponent,
     DataTableColumnDirective,
     DataTableHeaderComponent,
@@ -65,7 +65,7 @@ import {
     DatatableGroupHeaderDirective,
     DatatableRowDetailTemplateDirective,
     DataTableBodyCellComponent,
-    DataTableSelectionComponent,
+    DataTableSelectionDirective,
     DataTableColumnHeaderDirective,
     DataTableColumnCellDirective,
     DataTableColumnGhostCellDirective,

projects/ngx-datatable/src/public-api.ts

@@ -11,9 +11,9 @@ export * from './lib/components/body/body.component';
 export * from './lib/components/body/body-cell.component';
 export * from './lib/components/body/body-row.component';
 export * from './lib/components/body/progress-bar.component';
-export * from './lib/components/body/scroller.component';
+export * from './lib/components/body/scroller.directive';
 export * from './lib/components/body/body-row-wrapper.component';
-export * from './lib/components/body/selection.component';
+export * from './lib/components/body/selection.directive';
 export * from './lib/components/body/body-group-header.directive';
 export * from './lib/components/body/body-group-header-template.directive';
 export * from './lib/components/body/summary/summary-row.component';