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';
@@ -37,7 +37,7 @@ import { DraggableDirective } from '../../directives/draggable.directive';
 import { DatatableRowDefInternalDirective } from './body-row-def.component';
 import { DataTableRowWrapperComponent } from './body-row-wrapper.component';
 import { DataTableSummaryRowComponent } from './summary/summary-row.component';
-import { DataTableSelectionComponent } from './selection.component';
+import { DataTableSelectionDirective } from './selection.directive';
 import { DataTableGhostLoaderComponent } from './ghost-loader/ghost-loader.component';
 import { ProgressBarComponent } from './progress-bar.component';
 
@@ -256,8 +256,8 @@ import { ProgressBarComponent } from './progress-bar.component';
   imports: [
     ProgressBarComponent,
     DataTableGhostLoaderComponent,
-    DataTableSelectionComponent,
-    ScrollerComponent,
+    DataTableSelectionDirective,
+    ScrollerDirective,
     DataTableSummaryRowComponent,
     DataTableRowWrapperComponent,
     NgStyle,
@@ -400,7 +400,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,16 +11,15 @@ import {
   Renderer2
 } from '@angular/core';
 
-@Component({
+@Directive({
   selector: 'datatable-scroller',
-  template: ` <ng-content></ng-content> `,
+  exportAs: 'scroller',
+  standalone: true,
   host: {
     class: 'datatable-scroll'
-  },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true
+  }
 })
-export class ScrollerComponent implements OnInit, OnDestroy {
+export class ScrollerDirective implements OnInit, OnDestroy {
   private renderer = inject(Renderer2);
 
   @Input() scrollbarV = false;
@@ -50,7 +48,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,15 +1,14 @@
-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',
   standalone: true
 })
-export class DataTableSelectionComponent<TRow = any> {
+export class DataTableSelectionDirective<TRow = any> {
   @Input() rows: TRow[];
   @Input() selected: TRow[];
   @Input() selectEnabled: boolean;

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';