diff --git a/projects/ngx-datatable/src/lib/components/body/body.component.spec.ts b/projects/ngx-datatable/src/lib/components/body/body.component.spec.ts index ab9debdf7..2cca569c3 100644 --- a/projects/ngx-datatable/src/lib/components/body/body.component.spec.ts +++ b/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] }); diff --git a/projects/ngx-datatable/src/lib/components/body/body.component.ts b/projects/ngx-datatable/src/lib/components/body/body.component.ts index aa6ef90a1..1fe06bcc4 100644 --- a/projects/ngx-datatable/src/lib/components/body/body.component.ts +++ b/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'; @@ -61,194 +61,192 @@ import { ProgressBarComponent } from './progress-bar.component'; > } - - @if (rows?.length) { - - @if (summaryRow && summaryPosition === 'top') { - - - } - @for (group of rowsToRender(); track rowTrackingFn(i, group); let i = $index) { - - @if (rowDefTemplate) { - - } @else { - @if (isRow(group)) { - - - } + @if (rows?.length) { + + @if (summaryRow && summaryPosition === 'top') { + + + } + @for (group of rowsToRender(); track rowTrackingFn(i, group); let i = $index) { + + @if (rowDefTemplate) { + + } @else { + @if (isRow(group)) { + + } - - - @if (isRow(group)) { - - - } - - - @if (isGroup(group)) { - - @for (row of group.value; track rowTrackingFn(i, row); let i = $index) { - - - } + } + + + @if (isRow(group)) { + + } - - } - @if (summaryRow && summaryPosition === 'bottom') { - - - } - - } - @if (!rows?.length && !loadingIndicator && !ghostLoadingIndicator) { - - - } - + + + @if (isGroup(group)) { + + @for (row of group.value; track rowTrackingFn(i, row); let i = $index) { + + + } + } + + } + @if (summaryRow && summaryPosition === 'bottom') { + + + } + + } + @if (!rows?.length && !loadingIndicator && !ghostLoadingIndicator) { + + + } `, changeDetection: ChangeDetectionStrategy.OnPush, host: { @@ -258,8 +256,8 @@ import { ProgressBarComponent } from './progress-bar.component'; imports: [ ProgressBarComponent, DataTableGhostLoaderComponent, - DataTableSelectionComponent, - ScrollerComponent, + DataTableSelectionDirective, + ScrollerDirective, DataTableSummaryRowComponent, DataTableRowWrapperComponent, NgStyle, @@ -402,7 +400,7 @@ export class DataTableBodyComponent }>(false); @Output() treeAction: EventEmitter<{ row: TRow }> = new EventEmitter(); - @ViewChild(ScrollerComponent) scroller: ScrollerComponent; + @ViewChild(ScrollerDirective) scroller: ScrollerDirective; /** * Returns if selection is enabled. diff --git a/projects/ngx-datatable/src/lib/components/body/scroller.component.spec.ts b/projects/ngx-datatable/src/lib/components/body/scroller.component.spec.ts deleted file mode 100644 index b637ba53f..000000000 --- a/projects/ngx-datatable/src/lib/components/body/scroller.component.spec.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; -import { ScrollerComponent } from './scroller.component'; - -describe('ScrollerComponent', () => { - let fixture: ComponentFixture; - let component: ScrollerComponent; - - // provide our implementations or mocks to the dependency injector - beforeEach(() => { - TestBed.configureTestingModule({ - imports: [ScrollerComponent] - }); - }); - - beforeEach(waitForAsync(() => { - TestBed.compileComponents().then(() => { - fixture = TestBed.createComponent(ScrollerComponent); - component = fixture.componentInstance; - }); - })); - - describe('fixture', () => { - it('should have a component instance', () => { - expect(component).toBeTruthy(); - }); - }); -}); diff --git a/projects/ngx-datatable/src/lib/components/body/scroller.directive.spec.ts b/projects/ngx-datatable/src/lib/components/body/scroller.directive.spec.ts new file mode 100644 index 000000000..09a300a5a --- /dev/null +++ b/projects/ngx-datatable/src/lib/components/body/scroller.directive.spec.ts @@ -0,0 +1,38 @@ +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: ` `, + standalone: true, + imports: [ScrollerDirective] +}) +class TestFixtureComponent { + @ViewChild(ScrollerDirective, { static: true }) scroller!: ScrollerDirective; +} + +describe('ScrollerDirective', () => { + let fixture: ComponentFixture; + let component: TestFixtureComponent; + + // provide our implementations or mocks to the dependency injector + beforeEach(() => { + TestBed.configureTestingModule({ + imports: [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(); + }); + }); +}); diff --git a/projects/ngx-datatable/src/lib/components/body/scroller.component.ts b/projects/ngx-datatable/src/lib/components/body/scroller.directive.ts similarity index 86% rename from projects/ngx-datatable/src/lib/components/body/scroller.component.ts rename to projects/ngx-datatable/src/lib/components/body/scroller.directive.ts index f16353c2d..7055084b7 100644 --- a/projects/ngx-datatable/src/lib/components/body/scroller.component.ts +++ b/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: ` `, + 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); } diff --git a/projects/ngx-datatable/src/lib/components/body/selection.component.spec.ts b/projects/ngx-datatable/src/lib/components/body/selection.component.spec.ts deleted file mode 100644 index c3173d79a..000000000 --- a/projects/ngx-datatable/src/lib/components/body/selection.component.spec.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; -import { DataTableSelectionComponent } from './selection.component'; - -describe('DataTableSelectionComponent', () => { - let fixture: ComponentFixture; - let component: DataTableSelectionComponent; - - // provide our implementations or mocks to the dependency injector - beforeEach(() => { - TestBed.configureTestingModule({ - imports: [DataTableSelectionComponent] - }); - }); - - beforeEach(waitForAsync(() => { - TestBed.compileComponents().then(() => { - fixture = TestBed.createComponent(DataTableSelectionComponent); - component = fixture.componentInstance; - }); - })); - - describe('fixture', () => { - it('should have a component instance', () => { - expect(component).toBeTruthy(); - }); - }); -}); diff --git a/projects/ngx-datatable/src/lib/components/body/selection.directive.spec.ts b/projects/ngx-datatable/src/lib/components/body/selection.directive.spec.ts new file mode 100644 index 000000000..aae1e6ee5 --- /dev/null +++ b/projects/ngx-datatable/src/lib/components/body/selection.directive.spec.ts @@ -0,0 +1,38 @@ +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: `
`, + standalone: true, + imports: [DataTableSelectionDirective] +}) +class TestFixtureComponent { + @ViewChild(DataTableSelectionDirective, { static: true }) selector!: DataTableSelectionDirective; +} + +describe('DataTableSelectionDirective', () => { + let fixture: ComponentFixture; + let component: TestFixtureComponent; + + // provide our implementations or mocks to the dependency injector + beforeEach(() => { + TestBed.configureTestingModule({ + imports: [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(); + }); + }); +}); diff --git a/projects/ngx-datatable/src/lib/components/body/selection.component.ts b/projects/ngx-datatable/src/lib/components/body/selection.directive.ts similarity index 94% rename from projects/ngx-datatable/src/lib/components/body/selection.component.ts rename to projects/ngx-datatable/src/lib/components/body/selection.directive.ts index 23a6719bf..7668e0ace 100644 --- a/projects/ngx-datatable/src/lib/components/body/selection.component.ts +++ b/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: ` `, - changeDetection: ChangeDetectionStrategy.OnPush, +@Directive({ + selector: '[datatable-selection]', + exportAs: 'selector', standalone: true }) -export class DataTableSelectionComponent { +export class DataTableSelectionDirective { @Input() rows: TRow[]; @Input() selected: TRow[]; @Input() selectEnabled: boolean; diff --git a/projects/ngx-datatable/src/public-api.ts b/projects/ngx-datatable/src/public-api.ts index b96833789..fe28653cd 100644 --- a/projects/ngx-datatable/src/public-api.ts +++ b/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';