980 upgrade from angular 18 to angular 19 #993

jferrer1W · 2025-06-03T08:37:52Z

PR Details

Update from angular 18 to 19
Update eslint from 18 to 19
Update PrimeNG from 16 to 17
Update primeicons from 6 to 7
Update ag-grid-angular from 28 to 33
Update ag-grid-comunity from 28 to 33
Update systelab-preferences from 18 to 19 (Angular 19)
Update systelab-translate from 18 to 19 (Angular)

Description

This PR has several changes regarded with the next upgrades:

Upgrade from angular 18 to 19
- The components are standalone by default , needs to specify standalone: false in the @component decorator.
- The @import in scss is deprecated and needs to be replaces by @use and @forward.
Upgrade ag-grid from 28 to 33
- The gridOptions.api is deprecated now the gridApi is into GridReadyEvent that comes from onGridReady event.
- The ColumnAPi is deprecated , his methods are into gridApi
- The ag-theme-fresh is deprecated (the new used them is ag-theme-alpine).
- Now the ag-grid modules must to be used with ModuleRegistry method in order to load only the neccessary modules.
- The RangeSelectionCell has been disabled because belongs to ag-grid-enterprise library and wasn't use.
- The multiple and single selection are changes now needs to be use multiRow and singleRow.
- Several attributes now are functions like as node.selected that now is node.isSelected().
- Needs to init the infiniteInitialRowCount with 1 instead of 0.
- setDataSource is deprecated now needs to be use the setGridOptions and updateGridOptions.
- cellEditorFramework is deprecated with cellEditor
- suppressRowClickSelection is deprecated now needs to be used enableClickSelection.
- node.selectThisNode is deprecated now needs to be use node.setSelected.
- Needs to be scope the theme variables to be used in specific theme.
Fixes and improves
- Save the order of items in grid column (The column items order is not kept #992)
- Fix some issues in multipleSelection combobox (The combobox with multiple selection does not retain the selected items #991).
- Allow tooltip in tree combobox component (Comboboxes tooltip #989)

Related Issue

Motivation and Context

How Has This Been Tested

Types of changes

Docs change / refactoring / dependency upgrade
Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to change)

Checklist

codecov · 2025-06-03T08:38:17Z

Codecov Report

Attention: Patch coverage is 55.72917% with 85 lines in your changes missing coverage. Please review.

Project coverage is 57.54%. Comparing base (c3a989f) to head (c99aab6).

Files with missing lines	Patch %	Lines
...ents/src/lib/listbox/abstract-listbox.component.ts	33.33%	25 Missing and 1 partial ⚠️
...ts/src/lib/combobox/abstract-combobox.component.ts	65.11%	12 Missing and 3 partials ⚠️
...components/src/lib/grid/abstract-grid.component.ts	70.45%	10 Missing and 3 partials ⚠️
...-components/src/lib/helper/autosize-grid-helper.ts	61.90%	7 Missing and 1 partial ⚠️
...nents/src/lib/searcher/searcher.table.component.ts	22.22%	5 Missing and 2 partials ⚠️
...utocomplete/autocomplete-api-combobox.component.ts	45.45%	5 Missing and 1 partial ⚠️
.../src/lib/listbox/abstract-api-listbox.component.ts	0.00%	6 Missing ⚠️
.../renderer/combobox-favourite-renderer.component.ts	0.00%	2 Missing ⚠️
...onents/src/lib/grid/abstract-api-grid.component.ts	71.42%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master     #993      +/-   ##
==========================================
- Coverage   58.38%   57.54%   -0.85%     
==========================================
  Files         136      136              
  Lines        3809     3811       +2     
  Branches      677      674       -3     
==========================================
- Hits         2224     2193      -31     
- Misses       1471     1513      +42     
+ Partials      114      105       -9

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

vvinuelas · 2025-06-04T06:54:25Z

projects/systelab-components/sass/modern/components/_agGrid.scss

@@ -80,6 +82,9 @@ $context-menu-width: 39px;
      .ag-header-cell-resize {
        cursor: ew-resize;
        border-right: 5px solid var(--slab_table_border_color);
+        &::after {
+          display: none;
+        }


The ag-theme-fresh theme is deprecated, and the new ag-theme-alpine has a little line, an icon on the header cell borders indicating that you can drag to resize the column. To leave the theme like we had it before, I simply hide it.

vvinuelas · 2025-06-04T06:54:47Z

projects/systelab-components/sass/modern/components/_agGrid.scss

@@ -140,6 +145,10 @@ $context-menu-width: 39px;
        border: 1px dashed var(--primary_light) !important;
      }

+      &.ag-cell-wrapper .ag-drag-handle.ag-row-drag {
+        display: none;
+      }


The ag-theme-fresh theme is deprecated, and the new ag-theme-alpine has a little line, an icon on the header cell borders indicating that you can drag to resize the column. To leave the theme like we had it before, I simply hide it.

Maybe we can study the option to adopt this UX improvement instead to hide it? @carlosra85

yes, for me its ok

vvinuelas

This is a really great work!

into 980-upgrade-from-angular-18-to-angular-19

OscarDeDios · 2025-06-11T09:30:13Z

projects/systelab-components/src/lib/grid/abstract-api-grid.component.spec.ts

@@ -164,6 +166,7 @@ const clickMenuHeaderOnRow = (fixture: ComponentFixture<GridTestComponent>) => {
 };

 const clickOption = (fixture: ComponentFixture<GridTestComponent>, option: number) => {
+	console.log(fixture.debugElement.nativeElement.querySelectorAll('li'));


console.log forgotten

OscarDeDios · 2025-06-11T09:30:42Z

projects/systelab-components/src/lib/grid/abstract-api-grid.component.spec.ts

@@ -190,7 +193,7 @@ const clickCloseButton = (fixture: ComponentFixture<GridTestComponent>, buttonId

 describe('Systelab Grid', () => {
 	let fixture: ComponentFixture<GridTestComponent>;
-
+	ModuleRegistry.registerModules([AllCommunityModule]);


OscarDeDios · 2025-06-11T09:40:12Z

projects/systelab-components/src/lib/combobox/abstract-api-combobox.component.ts

@@ -41,8 +41,8 @@ export abstract class AbstractApiComboBox<T> extends AbstractComboBox<T> impleme
 	public abstract getTotalItems(): number;

 	public override refresh(params: any): boolean {
-		if (this.gridOptions && this.gridOptions.api) {
-			this.gridOptions.api.setDatasource(this);
+		if (this.gridOptions && this.gridApi) {


not needed to check gridOptions because now we do not acces to gridOptions.api

You can remove the full if and use this.gridApi?.setGridOption the method only will be executed if this.gridApi is defined.
Same to all the other ifs like this.

vinyulis

Can you update README.md?

vinyulis · 2025-06-11T13:44:50Z

projects/systelab-components/src/lib/grid/abstract-api-grid.component.ts

@@ -32,7 +33,6 @@ export abstract class AbstractApiGrid<T> extends AbstractGrid<T> implements IDat
 	protected abstract getData(page: number, itemsPerPage: number): Observable<Array<T>>;

 	public getRows(params: IGetRowsParams): void {
-		this.gridOptions.api.showLoadingOverlay();


How is showing "Loading" now?

vinyulis · 2025-06-11T13:53:29Z

projects/systelab-components/src/lib/grid/abstract-api-grid.component.ts

+
+	public override doGridReady(event: any) {
+		super.doGridReady(event);
+		this.refresh();


Review if this.refresh() is needed

carlosra85 · 2025-06-11T14:29:24Z

projects/systelab-components/src/lib/grid/abstract-grid.component.ts

+	protected getRowSelectionType(): RowSelectionOptions {
+		return {
+			mode: this.multipleSelection ? 'multiRow' : 'singleRow',
+			checkboxes: false,


in some modes we use checkboxes, is still working with this flag?

vinyulis · 2025-06-19T09:49:43Z

Check again methods showLoadingOverlay (deprecated) and showNoRowsOverlay (not deprecated) vs hideOverlay (not deprecated) to know if hideOverlay hides overlay for Loading or only No Rows overlay

vinyulis · 2025-06-19T09:53:52Z

projects/systelab-components/src/lib/searcher/abstract-searcher.component.spec.ts

+
+	@HostListener('focus', ['$event'])
+	onFocus(event: FocusEvent) {
+		console.log(event);


console.log

jferrer1W added 26 commits April 25, 2025 16:05

Update from PrimeNG from 16 to 17

39ba2f5

Update from Angular 18 to 19

13415d4

Update from Angular Eslint

2da7e25

Update ag-grid from 28 to 31

f33ca9d

Fix package.json and ag-grid setDatasoruce

97bf0c9

swap cellEditorFramework with cellEditor

f36fa9f

resolve gridApi undefineds

31af7d2

use gridApi instead of columnApi will be deprecated

48c85e2

fix tests

3be9368

update packages json

35a75dc

update angular cdk

89b4129

Update ag-grid from 31 to 32

67762da

Save the order of items in the column

137fec8

Update ag-grid from 32 to 33

72684b7

remove deprecated supress row click selection and row selection modes

fb9c801

use setGridOption and updateGridOptions according with ag-grid 33

6cd1241

fix comboboxes and listboxes

ebd621c

fix grid styles regarding the new default theme

257f625

fix dark and light theme

8b58204

use @forward ans @use instead of @import in scss

b52380d

avoid close combo when autocomplete

70d9591

fix theme vars in order to allow to change theme without errors

5f8aca4

fix tests

27f03c3

fix context menu grid dots without elements

6f6bd61

fix showcase package json

04523e8

fix all scss and use @forward and @use instead of @import

416eaba

jferrer1W linked an issue Jun 3, 2025 that may be closed by this pull request

Upgrade from Angular 18 to Angular 19 #980

Closed

jferrer1W requested review from fjaguado and carlosra85 June 3, 2025 08:42

jferrer1W requested review from OscarDeDios, vinyulis, vvinuelas, RaulMGT and rserra91 June 3, 2025 08:42

jferrer1W added 2 commits June 3, 2025 12:47

Use only necesary ag grid modules

0cb2da1

add tooltip to tree comboboxes

ec7b705

vvinuelas reviewed Jun 4, 2025

View reviewed changes

vvinuelas previously approved these changes Jun 4, 2025

View reviewed changes

jferrer1W added 2 commits June 10, 2025 16:38

Merge branch 'master' of https://github.com/systelab/systelab-components

960a891

into 980-upgrade-from-angular-18-to-angular-19

fix merge issues

04d15eb

jferrer1W dismissed vvinuelas’s stale review via 04d15eb June 10, 2025 14:47

OscarDeDios reviewed Jun 11, 2025

View reviewed changes

vinyulis reviewed Jun 11, 2025

View reviewed changes

carlosra85 reviewed Jun 11, 2025

View reviewed changes

jferrer1W added 5 commits June 12, 2025 17:29

fix checks according with ag-grid33 indications

05e886b

fix pr comments #1#

a563695

fix tests

e5f6c58

add new resize icon in order to improve the ux/ui

ce6be0b

fix pr comments #2#

c99aab6

vinyulis requested changes Jun 19, 2025

View reviewed changes

980 upgrade from angular 18 to angular 19 #993

Are you sure you want to change the base?

980 upgrade from angular 18 to angular 19 #993

Uh oh!

Conversation

jferrer1W commented Jun 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Details

Description

Related Issue

Motivation and Context

How Has This Been Tested

Types of changes

Checklist

Uh oh!

codecov bot commented Jun 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

vvinuelas left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

vinyulis left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

vinyulis commented Jun 19, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

jferrer1W commented Jun 3, 2025 •

edited

Loading

codecov bot commented Jun 3, 2025 •

edited

Loading