diff --git a/projects/ngx-datatable/src/lib/components/datatable.component.html b/projects/ngx-datatable/src/lib/components/datatable.component.html index 59dc33003..a36534cdf 100644 --- a/projects/ngx-datatable/src/lib/components/datatable.component.html +++ b/projects/ngx-datatable/src/lib/components/datatable.component.html @@ -1,6 +1,6 @@
- @if (headerHeight) { + @if (headerHeight()) {
- @if (footerHeight) { + @if (footerHeight()) { } diff --git a/projects/ngx-datatable/src/lib/components/datatable.component.ts b/projects/ngx-datatable/src/lib/components/datatable.component.ts index 394fe3d7a..a80ca003b 100644 --- a/projects/ngx-datatable/src/lib/components/datatable.component.ts +++ b/projects/ngx-datatable/src/lib/components/datatable.component.ts @@ -219,7 +219,9 @@ export class DatatableComponent * The row height; which is necessary * to calculate the height for the lazy rendering. */ - @Input() rowHeight: number | 'auto' | ((row: TRow) => number) = 30; + readonly rowHeight = input number)>( + this.configuration?.rowHeight ?? 30 + ); /** * Type of column width distribution formula. @@ -231,13 +233,15 @@ export class DatatableComponent * The minimum header height in pixels. * Pass a falsey for no header */ - @Input() headerHeight: number | 'auto' = 30; + readonly headerHeight = input(this.configuration?.headerHeight ?? 30); /** * The minimum footer height in pixels. * Pass falsey for no footer */ - @Input({ transform: numberAttribute }) footerHeight = 0; + readonly footerHeight = input(this.configuration?.footerHeight ?? 0, { + transform: numberAttribute + }); /** * If the table should use external paging @@ -359,7 +363,9 @@ export class DatatableComponent /** * Css class overrides */ - @Input() cssClasses: Partial['cssClasses']> = {}; + readonly cssClasses = input['cssClasses']>>( + this.configuration?.cssClasses ?? {} + ); /** * Message overrides for localization @@ -381,7 +387,9 @@ export class DatatableComponent * } * ``` */ - @Input() messages: Partial['messages']> = {}; + readonly messages = input['messages']>>( + this.configuration?.messages ?? {} + ); /** * A function which is called with the row and should return either: @@ -541,7 +549,7 @@ export class DatatableComponent */ @HostBinding('class.fixed-header') get isFixedHeader(): boolean { - const headerHeight: number | string = this.headerHeight; + const headerHeight: number | string = this.headerHeight(); return typeof headerHeight === 'string' ? (headerHeight as string) !== 'auto' : true; } @@ -551,7 +559,7 @@ export class DatatableComponent */ @HostBinding('class.fixed-row') get isFixedRow(): boolean { - return this.rowHeight !== 'auto'; + return this.rowHeight() !== 'auto'; } /** @@ -712,7 +720,7 @@ export class DatatableComponent _columns!: TableColumn[]; _subscriptions: Subscription[] = []; _ghostLoadingIndicator = false; - _defaultColumnWidth?: number; + _defaultColumnWidth = this.configuration?.defaultColumnWidth ?? 150; /** * To have this available for all components. * The Footer itself is not available in the injection context in templates, @@ -726,22 +734,6 @@ export class DatatableComponent // this will be set to true once rows are available and rendered on UI private readonly _rowInitDone = signal(false); - constructor() { - // apply global settings from Module.forRoot - if (this.configuration) { - if (this.configuration.messages) { - this.messages = { ...this.configuration.messages }; - } - if (this.configuration.cssClasses) { - this.cssClasses = { ...this.configuration.cssClasses }; - } - this.headerHeight = this.configuration.headerHeight ?? this.headerHeight; - this.footerHeight = this.configuration.footerHeight ?? this.footerHeight; - this.rowHeight = this.configuration.rowHeight ?? this.rowHeight; - this._defaultColumnWidth = this.configuration.defaultColumnWidth ?? 150; - } - } - /** * Lifecycle hook that is called after data-bound * properties of a directive are initialized. @@ -984,8 +976,8 @@ export class DatatableComponent if (this.headerElement) { height = height - this.headerElement.nativeElement.getBoundingClientRect().height; } - if (this.footerHeight) { - height = height - this.footerHeight; + if (this.footerHeight()) { + height = height - this.footerHeight(); } this.bodyHeight = height; } @@ -1064,7 +1056,7 @@ export class DatatableComponent // This is because an expanded row is still considered to be a child of // the original row. Hence calculation would use rowHeight only. if (this.scrollbarV() && this.virtualization()) { - const size = Math.ceil(this.bodyHeight / (this.rowHeight as number)); + const size = Math.ceil(this.bodyHeight / (this.rowHeight() as number)); return Math.max(size, 0); } diff --git a/projects/ngx-datatable/src/lib/components/footer/footer.component.spec.ts b/projects/ngx-datatable/src/lib/components/footer/footer.component.spec.ts index 1903f31a6..2b9b21089 100644 --- a/projects/ngx-datatable/src/lib/components/footer/footer.component.spec.ts +++ b/projects/ngx-datatable/src/lib/components/footer/footer.component.spec.ts @@ -1,4 +1,4 @@ -import { Component, DebugElement, TemplateRef, viewChild, ViewChild } from '@angular/core'; +import { Component, DebugElement, signal, TemplateRef, viewChild, ViewChild } from '@angular/core'; import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; @@ -183,6 +183,7 @@ class TestFixtureComponent { footerTemplate?: { template: TemplateRef }; selectedCount = 0; selectedMessage?: string; + readonly messages = signal({}); /** * establishes a reference to a test template that can diff --git a/projects/ngx-datatable/src/lib/components/footer/pager.component.spec.ts b/projects/ngx-datatable/src/lib/components/footer/pager.component.spec.ts index 1e948cec0..1565af4e7 100644 --- a/projects/ngx-datatable/src/lib/components/footer/pager.component.spec.ts +++ b/projects/ngx-datatable/src/lib/components/footer/pager.component.spec.ts @@ -8,9 +8,9 @@ import { } from '@angular/core'; import { ComponentFixture, TestBed } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; +import { DatatableComponent } from '@siemens/ngx-datatable'; import { DATATABLE_COMPONENT_TOKEN } from '../../utils/table-token'; -import type { DatatableComponent } from '../datatable.component'; import { DatatablePagerComponent } from './pager.component'; import { PagerHarness } from './testing/pager.harness'; @@ -28,9 +28,9 @@ interface MockFooter { describe('DataTablePagerComponent', () => { let fixture: ComponentFixture; - let pager: DatatablePagerComponent; let harness: PagerHarness; let footer: MockFooter; + let messages: WritableSignal>; beforeEach(async () => { footer = { @@ -44,19 +44,19 @@ describe('DataTablePagerComponent', () => { pagerPreviousIcon: signal(''), page: { emit: ({ page }: { page: number }) => footer.curPage.set(page) } }; + messages = signal({}); TestBed.overrideComponent(DatatablePagerComponent, { set: { changeDetection: ChangeDetectionStrategy.Default, providers: [ { provide: DATATABLE_COMPONENT_TOKEN, - useValue: { _footerComponent: signal(footer) } + useValue: { _footerComponent: signal(footer), messages } } ] } }); fixture = TestBed.createComponent(DatatablePagerComponent); - pager = fixture.componentInstance; harness = await TestbedHarnessEnvironment.harnessForFixture(fixture, PagerHarness); }); @@ -273,8 +273,8 @@ describe('DataTablePagerComponent', () => { }; describe('takes messages-overrides from table', () => { - const setMessages = (messages: DatatableComponent['messages']) => { - (pager as any).datatable = { messages }; + const setMessages = (overrides: ReturnType) => { + messages.set(overrides); // do a change detection on the real changeDetectionRef fixture.componentRef.injector.get(ChangeDetectorRef).detectChanges(); }; diff --git a/projects/ngx-datatable/src/lib/components/footer/pager.component.ts b/projects/ngx-datatable/src/lib/components/footer/pager.component.ts index 086da831c..4260eeac4 100644 --- a/projects/ngx-datatable/src/lib/components/footer/pager.component.ts +++ b/projects/ngx-datatable/src/lib/components/footer/pager.component.ts @@ -106,8 +106,8 @@ export class DatatablePagerComponent { // Ideally we can one day fetch those attributes from a global state, but for now this is fine. private datatable = inject(DATATABLE_COMPONENT_TOKEN); - protected get messages(): DatatableComponent['messages'] { - return this.datatable?.messages ?? {}; + protected get messages(): ReturnType { + return this.datatable?.messages() ?? {}; } protected readonly page = computed(() => this.datatable._footerComponent()!.curPage());