Support Angular 20 (#2244)

* fix: allow partial overrides of CSS classes (#151)

* refactor: use interface for row properties that may be set by the datatable (#153)

* fix: allow partial overrides of messages (#152)

* refactor: only export symbols that are meant to be exported

BREAKING CHANGE: Removed several symbols from the public API that were intended to be internal.

* refactor: simplify column directive converting (#154)

* refactor: always use type event (#158)

* refactor: remove useless cleanup (#164)

This never made any sense. `cellTemplate` and `ghostLoaderTemplate` were never defined.

* fix: only run disabled check on rows

We previously ran `disableRowCheck` on groups instead of each row
if rows were grouped.
With this change, we only run the check on rows.
Besides this, the uncommon `disableRow$` subject was removed from template
contexts and replaced with a proper `disabled` field.
This simplifies the usage and prevents wrong expectations.
Although even shown in our example, calling `next` on the subject works
but the value will be overridden on the next CD cycle, so it was pointless.
Replacing the subject with a normal boolean resolves this problem.

Being able to subscribe to the subject is also not needed.
An application always knows whether a row was disabled
because they set it.

BREAKING CHANGE: The row detail context (`RowDetailContext`) no longer contains `disableRow$?: Observable<boolean>`.
Use the new `disabled: boolean` value instead.

BREAKING CHANGE: The cell context (`CellContext`) no longer contains `disableRow$?: Observable<boolean>`.
Use the new `disabled: boolean` value instead.

BREAKING CHANGE: `disableRowCheck` will only be called with actual rows.
Although documented otherwise, in the case of groups, the `disableRowCheck`
was only called for groups instead of each row inside that group.
This allows disabling single rows inside a group and not only entire groups.

To update the disabled state of a row just update the row itself instead of using the previous `disableRow$` subject.

* refactor: enable `strictFunctionTypes` (#165)

The overall goal is to enable TypeScript strict mode.
To achieve this, we need to enable each subset first.

* fix: add missing type to comparator (#167)

* refactor: add dedicated type for `SelectEvent` (#168)

* remove non-existent offsetX input

* docs: use HttpClient (#166)

Replacing direct use of XMLHttpRequest with HttpClient.
This indirectly also improves typing, as the previous
code was using implicit any.
This will help us to enable noImplicitAny in the future.

* fix import

* docs: add missing type for sorting (#172)

* docs: add missing type for server paging (#169)

Co-authored-by: Fabio Huser <fh1ch@users.noreply.github.com>

* docs: fix typing of cell class (#175)

Co-authored-by: Fabio Huser <fh1ch@users.noreply.github.com>

* refactor: simplify column in group iteration (#180)

Co-authored-by: Fabio Huser <fh1ch@users.noreply.github.com>

* refactor: add missing internal types (#178)

Co-authored-by: Fabio Huser <fh1ch@users.noreply.github.com>

* refactor: disable type check around detail height (#179)

* refactor: disable type check around detail height

---------

Co-authored-by: Fabio Huser <fh1ch@users.noreply.github.com>

* refactor: adjust the type of rowClass as it is never called with groups (#176)

This is a refactoring as we never released typing yet.

Co-authored-by: Fabio Huser <fh1ch@users.noreply.github.com>

* feat: add type for context menu event (#174)

Co-authored-by: Fabio Huser <fh1ch@users.noreply.github.com>

* refactor: simplify total width calculation (#177)

* docs: add missing type for functions (#170)

Co-authored-by: Fabio Huser <fh1ch@users.noreply.github.com>

* feat: add type for details toggle event (#173)

* docs: add missing type for updateValue functions (#171)

Co-authored-by: Fabio Huser <fh1ch@users.noreply.github.com>

* test: clean up test code (#127)

* refactor: always use the same event type for reorder columns (#186)

* refactor: remove unused code in long-press directive (#182)

* refactor: introduce new `TableColumnInternal` interface to remove internal properties from public API (#163)

* refactor: consolidate internal column creation

* refactor: introduce new `TableColumnInternal` interface to remove internal properties from public API

The datable already always "converted" (setting defaults) columns to an internal column definition.
Previously, the same interface was used for application provided columns and internal columns.

With this change, the interface is split. This brings two main benefits:
1. We can remove internal properties from the public interface (like `$$id`).
2. We can define internal properties that get defaulted as non-optional.

This change is relevant to enable strict null checks.

* update column type in math.ts to fix build

* add type cast in math.spec.ts

* refactor: move header styles to the component (#187)

* refactor: remove implicit this in the throttle decorator (#189)

* refactor: remove implicit this from tree grouping (#188)

* refactor: avoid redundant value lookup in map (#191)

* refactor: reflect in type that messages and cssClasses configs are always defined (#190)

* build: remove browserlist (#194)

This is no longer needed as we only target evergreen browsers. Angular also no longer has this file by default generated.

* refactor: move footer styles to a component level (#198)

* refactor: replace useless subject (#195)

* docs: migrate examples to standalone (#197)

Running the angular migration script on the examples

* docs: bootstrap application in a standalone way (#200)

* fix import in main.ts

* refactor: add undefined to types were needed

* refactor: remove unused vendor prefixes (#193)

* docs: lazy load examples (#201)

* refactor: remove column resize directive

BREAKING CHANGE: removed `ResizeableDirective`. This directive was intended for internal use to handle column resizing, which is now managed directly in the `DataTableHeaderCellComponent`.

* test: unit tests for header cell

* fix: apply even/odd classes correctly when rows are grouped (#111)

BREAKING CHANGE: Previously `CellContext.rowIndex` was a `string` if the row was inside a group.
Now `CellContext.rowIndex` is always a number.
Either containing the index of the row or if the row is inside a group, the index of the group.
To access the index value of a row within a group, use the new`CellContext.rowInGroupIndex`.

* refactor: deprecate `PageEvent.limit` (#196)

DEPRECATED: `PageEvent.limit` should no longer be used.
Use the `PageEvent.pageSize` instead as this will hold the same value
as `PageEvent.limit` if the table used the value of the limit input.

* refactor: move body styles to component level (#202)

* refactor: simplify tree construction (#205)

* refactor: move fixed-header styles to component level (#203)

* refactor: make column resize handling typesafe (#204)

* refactor: remove duplicate template code

* refactor: remove custom test matchers

* update lint rules

* fix: remove unwanted space below the rows (#214)

BREAKING CHANGE: The datatable body no longer has spacing below the last row.
If needed for whatever reason, this must be added manually.
Workarounds removing this extra space must be dropped.

* refactor: move horizontal scroll styles to respective components (#211)

* refactor: ensure that rows are always defined internally (#192)

BREAKING CHANGE: The datatable no longer accepts
`undefined` as a value of the `count` input.

The TypeScript type never allowed `undefined` but it previously worked anyway.
Now passing `undefined` will lead to an error.
Instead of `undefined` just pass `0` which has the same effect.

* refactor: tree level should start from 0

* refactor: remove unused styles (#217)

* refactor: move fixed-row styles to respective components (#218)

* refactor: don't render wrapper if col group columns are empty

* refactor: remove explicit standalone flags (#222)

* refactor: move display related styles to respective components (#221)

* feat: add touch support for reorderable and resizable features (#181)

* feat: port touch events to newest version

* test(draggable): use MouseEvent constructor to simulate dragging

* style(draggable): run prettier

* feat: include pager aria labels in text messages

BREAKING CHANGE: `INgxDatatableConfig.messages` now requires new keys for the pager aria labels.

* fix: introduce a default value for rows

In #192 we introduced `rows` that are always defined internally. As other setters may use `rows` before initialization (via input), a default value is required.

* refactor: remove unnecessary checks

Remove check for `this._rows` as it's always defined.

* refactor: move selection component into the body component (#213)

* perf: only calculate render offset once for all rows (#210)

* refactor: calculate actual index based on index offset (#212)

* refactor: add missing Row type for TRow (#234)

* refactor: add missing null and declaration (#237)

* refactor: merge contexts into one object to avoid type issues (#235)

* refactor: drop useless group signal (#236)

* fix: prevent errors with row-specific ghost in combination with grouping, selection and trees (#241)

This is just preventing runtime errors and not supporting the combination.
Since we use `undefined` to mark loading rows, we do not have access to group keys and alike.
So it is not possible yet to have loading rows inside a group or a tree structure.

To solve this, we need to enhance the API.

* refactor: move ghost loading out of cells (#239)

* refactor: remove unused internal event (#206)

* refactor: drop useless stable sort code (#244)

Since ES2019 Array.sort is guaranteed to be stable.

* refactor: allow undefined on internal prop (#243)

* refactor: allow undefined on internal prop

* refactor: add missing Row type

* refactor: add new internal type for sortable rows

Sortable rows require a prop attribute. This should be reflected in the type to avoid unnecessary casting.

* refactor: split activation event (#245)

* Refactor/fine tune api (#246)

* refactor: mark all inputs on the table-column directive as optional

The interface should be assignable to directive.
Every field in the interface is optional,
so it has to be in the directive as well.

* refactor: mark row param of rowHeight function as always defined

* feat: include sorts in page event (#248)

* Refactor/enable strict null checks (#247)

* refactor: improve typing related to null checks

* docs: improve typing related to null checks

* test: improve typing related to null checks

* build: enable strict null checks

* refactor: drop unused inputs of footer directive (#249)

BREAKING CHANGE: All inputs except `template` of `DatatableFooterDirective` have been dropped.

Those were unused. Remove any usages without replacement.

* refactor: remove unused ghost loading input internally (#251)

* Refactor/enable strict init checks (#250)

* refactor: improve typing related to strict property init checks

* docs: improve typing related to strict property init checks

* test: improve typing related to strict property init checks

* build: enable strict mode

* refactor: move cell styles into respective components (#254)

* refactor: move or replace `[hidden]` style to drop in from global styles (#257)

* refactor: move scroll-vertical style to the body component (#258)

* refactor: remove general `box-sizing: border-box` (#256)

BREAKING CHANGE: Previously the datatable
applied `box-sizing: border-box` to all its elements.
This is no longer the case.

Custom themes that depend on this must set this behavior manually, using:

 ```css
   *,
   *:before,
   *:after {
     box-sizing: border-box;
   }
 ```

* feat: introduce a new `providedNgxDatatableConfig` for a standalone way to configure the datatable. (#259)

This also removes the previous breaking change of requiring new messages.
Since all messages are now optional.

* refactor: all header pinned columns should be flex (#253)

We accidentally removed the flex container on column groups for pinning.
Please note that we have the same in body rows where we kept the container as flex.

* refactor: base internal row length on rowCount property (#261)

The number of potentially rendered rows should be based on the `rowCount`
property which can be supplied externally for server paging.
This is needed for ghost loading as apps may provide rows
which are shorter than the `rowCount` and thus than the rendered rows.
By filling up the internal rows with `undefined` the ghost loading
works even though the rows provided are too short.

* refactor: enable view encapsulation on root component

* fix: fix keyboard interaction for cell selection mode

* refactor: migrate to input signals

* upgrade angular cli to v20

* upgrade node and yarn

* upgraded angular packages to v20

* upgraded the rest of the angular packages and removed support for angular 17 and earlier versions

* fix linting errors

* remove all occurrences of standalone from component decorators

---------

Co-authored-by: Maxi <ralfrabbit@gmail.com>
Co-authored-by: Maximilian Koeller <maximilian.koeller@siemens.com>
Co-authored-by: Fabio Huser <fh1ch@users.noreply.github.com>
Co-authored-by: Chintan Kavathia <chintankumar.kavathia@siemens.com>
Co-authored-by: chintankavathia <chintan.kavathia@gmail.com>
Co-authored-by: Colin Frick <colin@frick.io>
Co-authored-by: Robert Worgul <robert.worgul@scitotec.de>
Co-authored-by: Linus Schlumberger <linus.schlumberger@siemens.com>
Co-authored-by: Colin Frick <colin+github@sonderformat.llc>

Author: 7 people

.browserslistrc

@@ -30,12 +30,7 @@ module.exports = {
       rules: {
         '@angular-eslint/no-attribute-decorator': 'error',
         '@angular-eslint/no-forward-ref': 'error',
-        '@angular-eslint/no-host-metadata-property': [
-          'error',
-          {
-            'allowStatic': true
-          }
-        ],
+        '@angular-eslint/no-host-metadata-property': 'off',
         'brace-style': 'off',
         'no-bitwise': 'off',
         'comma-dangle': 'off',

.eslintrc.js

@@ -12,13 +12,13 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 20.17.0
+          node-version: 22.16.0
 
       - name: Enable Corepack
         run: corepack enable
 
       - name: Install Yarn
-        run: corepack prepare yarn@4.5.1 --activate
+        run: corepack prepare yarn@4.9.2 --activate
 
       - name: Install dependencies
         run: yarn install --immutable

.github/workflows/test_and_deploy.yml

@@ -62,7 +62,23 @@ Static messages in the table you can override for localization.
   totalMessage: 'total',
 
   // Footer selected message
-  selectedMessage: 'selected'
+  selectedMessage: 'selected',
+
+  // Pager screen reader message for the first page button
+  ariaFirstPageMessage: 'go to first page',
+
+  // Pager screen reader message for the previous page button
+  ariaPreviousPageMessage: 'go to previous page',
+
+  // Pager screen reader message for the n-th page button.
+  // It will be rendered as: `{{ariaPageNMessage}} {{n}}`.
+  ariaPageNMessage: 'page',
+
+  // Pager screen reader message for the next page button
+  ariaNextPageMessage: 'go to next page',
+
+  // Pager screen reader message for the last page button
+  ariaLastPageMessage: 'go to last page'
 }
 ```
 

docs/api/table/inputs.md

@@ -18,17 +18,6 @@ A cell or row was focused via keyboard or mouse click.
 }
 ```
 
-### `detailToggle`
-
-Row detail row was toggled.
-
-```
-{
-  rows
-  currentIndex
-}
-```
-
 ### `page`
 
 The table was paged either triggered by the pager or the body scroll.

docs/api/table/outputs.md

@@ -31,31 +31,31 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^19.1.4",
-    "@angular/cdk": "^18.2.14",
-    "@angular/common": "^19.1.4",
-    "@angular/compiler": "^19.1.4",
-    "@angular/core": "^19.1.4",
-    "@angular/forms": "^19.1.4",
-    "@angular/platform-browser": "^19.1.4",
-    "@angular/platform-browser-dynamic": "^19.1.4",
-    "@angular/router": "^19.1.4",
+    "@angular/animations": "^20.0.5",
+    "@angular/cdk": "^20.0.4",
+    "@angular/common": "^20.0.5",
+    "@angular/compiler": "^20.0.5",
+    "@angular/core": "^20.0.5",
+    "@angular/forms": "^20.0.5",
+    "@angular/platform-browser": "^20.0.5",
+    "@angular/platform-browser-dynamic": "^20.0.5",
+    "@angular/router": "^20.0.5",
     "rxjs": "~7.8.1",
     "tslib": "~2.4.0",
     "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^19.1.4",
-    "@angular-devkit/core": "^19.1.4",
-    "@angular-devkit/schematics": "^19.1.4",
-    "@angular-eslint/builder": "^18.0.0",
-    "@angular-eslint/eslint-plugin": "^18.0.0",
-    "@angular-eslint/eslint-plugin-template": "^18.0.0",
-    "@angular-eslint/schematics": "^18.0.0",
-    "@angular-eslint/template-parser": "^18.0.0",
-    "@angular/cli": "^19.1.6",
-    "@angular/compiler-cli": "^19.1.4",
-    "@angular/language-service": "^19.1.4",
+    "@angular-devkit/build-angular": "^20.0.4",
+    "@angular-devkit/core": "^20.0.4",
+    "@angular-devkit/schematics": "^20.0.4",
+    "@angular-eslint/builder": "^20.1.1",
+    "@angular-eslint/eslint-plugin": "^20.1.1",
+    "@angular-eslint/eslint-plugin-template": "^20.1.1",
+    "@angular-eslint/schematics": "^20.1.1",
+    "@angular-eslint/template-parser": "^20.1.1",
+    "@angular/cli": "^20.0.4",
+    "@angular/compiler-cli": "^20.0.5",
+    "@angular/language-service": "^20.0.5",
     "@swimlane/eslint-config": "^2.0.0",
     "@swimlane/prettier-config-swimlane": "^3.0.2",
     "@types/jasmine": "4.3.0",
@@ -87,24 +87,24 @@
     "karma-coverage-istanbul-reporter": "^3.0.3",
     "karma-jasmine": "5.1.0",
     "karma-jasmine-html-reporter": "2.0.0",
-    "ng-packagr": "^19.0.0",
+    "ng-packagr": "^20.0.1",
     "npm-run-all": "^4.1.5",
     "prettier": "2.7.1",
     "pretty-quick": "3.1.3",
     "protractor": "~7.0.0",
     "sass": "^1.77.6",
     "scss-bundle": "^3.1.1",
     "ts-node": "10.9.1",
-    "typescript": "5.7.3"
+    "typescript": "5.8.3"
   },
   "husky": {
     "hooks": {
       "pre-commit": "pretty-quick --staged"
     }
   },
   "volta": {
-    "node": "20.14.0",
-    "yarn": "4.5.1"
+    "node": "22.16.0",
+    "yarn": "4.9.2"
   },
-  "packageManager": "yarn@4.5.1"
+  "packageManager": "yarn@4.9.2"
 }

package.json

@@ -3,9 +3,9 @@
   "version": "21.1.0",
   "description": "ngx-datatable is an Angular table grid component for presenting large and complex data.",
   "peerDependencies": {
-    "@angular/common": "17.x || 18.x || 19.x",
-    "@angular/core": "17.x || 18.x || 19.x",
-    "@angular/platform-browser": "17.x || 18.x || 19.x",
+    "@angular/common": "18.x || 19.x || 20.x",
+    "@angular/core": "18.x || 19.x || 20.x",
+    "@angular/platform-browser": "18.x || 19.x || 20.x",
     "rxjs": "7.x"
   },
   "dependencies": {

projects/swimlane/ngx-datatable/package.json

@@ -0,0 +1,11 @@
+@use '../shared';
+
+:host {
+  @include shared.cell-styles();
+}
+
+:host-context(ngx-datatable.fixed-row) :host {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

projects/swimlane/ngx-datatable/src/lib/components/body/body-cell.component.scss

@@ -1,43 +1,24 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { numericIndexGetter } from '../../utils/column-prop-getters';
-import { setColumnDefaults } from '../../utils/column-helper';
-import { TableColumn } from '../../types/table-column.type';
+import { toInternalColumn } from '../../utils/column-helper';
 import { DataTableBodyCellComponent } from './body-cell.component';
 
 describe('DataTableBodyCellComponent', () => {
   let fixture: ComponentFixture<DataTableBodyCellComponent>;
   let component: DataTableBodyCellComponent;
 
-  // provide our implementations or mocks to the dependency injector
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      imports: [DataTableBodyCellComponent]
-    });
-  });
-
   beforeEach(waitForAsync(() => {
-    TestBed.compileComponents().then(() => {
-      fixture = TestBed.createComponent(DataTableBodyCellComponent);
-      component = fixture.componentInstance;
-    });
+    fixture = TestBed.createComponent(DataTableBodyCellComponent);
+    component = fixture.componentInstance;
   }));
 
-  describe('fixture', () => {
-    it('should have a component instance', () => {
-      expect(component).toBeTruthy();
-    });
-  });
-
   describe('prop tests', () => {
     // verify there wasn't a mistake where the falsey 0 value
     // resulted in a code path for missing column prop
     it('should get value from zero-index prop', () => {
       component.row = ['Hello'];
-      const columns: TableColumn[] = [{ name: 'First Column', prop: 0 }];
-      // users should never set columns on DataTableBodyCellComponent directly
-      // setColumnDefaults will be run on columns before they are set on BodyCellComponent
-      setColumnDefaults(columns);
+      const columns = toInternalColumn([{ name: 'First Column', prop: 0 }]);
       expect(columns[0].$$valueGetter).toBe(numericIndexGetter);
 
       component.column = columns[0];