chore: upgrade Angular and related dependencies to version 20.x

- Updated Angular packages to version 20.2.1 in package.json.
- Updated PrimeNG to version 20.0.1 and added new PrimeUI dependencies.
- Updated TypeScript to version 5.9.2 and tslib to version 2.8.1.
- Removed outdated package-lock.json for cps-ui-kit.
- Updated cps-ui-kit package.json to version 20.0.0 and aligned peer dependencies with Angular 20.x.
- Refactored various JSON API data files to remove generic types and improve type definitions.
- Updated SCSS files to use the new `@use` syntax for importing variables.
- Made minor adjustments to component templates and styles for better compatibility with updated libraries.
- Adjusted TypeScript configuration to use bundler module resolution.

Author: TerranceKhumalo-absa

api-generator/api-generator.js

@@ -1,4 +1,4 @@
-import path = require('path');
+import * as path from 'path';
 
 describe('cps-table page', () => {
   describe('export to xlsx', () => {

cypress/e2e/cps-table.cy.ts

@@ -18,29 +18,32 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^19.1.4",
-    "@angular/common": "^19.1.4",
-    "@angular/compiler": "^19.1.4",
-    "@angular/core": "^19.2.14",
-    "@angular/forms": "^19.1.4",
-    "@angular/platform-browser": "^19.1.4",
-    "@angular/platform-browser-dynamic": "^19.1.4",
-    "@angular/platform-server": "^19.1.4",
-    "@angular/router": "^19.1.4",
+    "@angular/animations": "^20.2.1",
+    "@angular/common": "^20.2.1",
+    "@angular/compiler": "^20.2.1",
+    "@angular/core": "^20.2.1",
+    "@angular/forms": "^20.2.1",
+    "@angular/platform-browser": "^20.2.1",
+    "@angular/platform-browser-dynamic": "^20.2.1",
+    "@angular/platform-server": "^20.2.1",
+    "@angular/router": "^20.2.1",
     "@e965/xlsx": "^0.20.3",
+    "@primeuix/styled": "^0.7.2",
+    "@primeuix/utils": "^0.6.1",
     "@types/lodash-es": "^4.17.12",
     "eslint-plugin-cypress": "^3.6.0",
     "lodash-es": "^4.17.21",
-    "primeng": "^19.0.5",
+    "primeicons": "^7.0.0",
+    "primeng": "^20.0.1",
     "rxjs": "~7.8.1",
     "tslib": "^2.8.1",
     "zone.js": "^0.15.0"
   },
   "devDependencies": {
-    "@angular-builders/jest": "^19.0.0",
-    "@angular-devkit/build-angular": "^19.1.5",
-    "@angular/cli": "~19.1.9",
-    "@angular/compiler-cli": "^19.1.4",
+    "@angular-builders/jest": "^20.0.0",
+    "@angular-devkit/build-angular": "^20.2.0",
+    "@angular/cli": "~20.2.0",
+    "@angular/compiler-cli": "^20.2.1",
     "@types/express": "^4.17.21",
     "@types/jest": "^29.5.14",
     "@types/node": "^22.10.10",
@@ -57,10 +60,10 @@
     "eslint-plugin-promise": "^6.6.0",
     "eslint-plugin-standard": "^5.0.0",
     "jest": "^29.7.0",
-    "ng-packagr": "^19.1.2",
+    "ng-packagr": "^20.0.0",
     "pa11y-ci": "^4.0.0",
     "prettier": "^3.4.2",
-    "typedoc": "^0.26.11",
-    "typescript": "^5.5.4"
+    "typedoc": "^0.28.10",
+    "typescript": "~5.9.2"
   }
 }

package-lock.json

@@ -15,23 +15,23 @@
                     },
                     {
                         "name": "config",
-                        "type": "CpsDialogConfig<any>",
+                        "type": "CpsDialogConfig",
                         "description": "CpsDialogConfig object."
                     }
                 ],
-                "returnType": "CpsDialogRef<any>",
+                "returnType": "CpsDialogRef",
                 "description": "Opens a dialog with a dynamically loaded component."
             },
             {
                 "name": "openConfirmationDialog",
                 "parameters": [
                     {
                         "name": "config",
-                        "type": "CpsDialogConfig<any>",
+                        "type": "CpsDialogConfig",
                         "description": "CpsDialogConfig object."
                     }
                 ],
-                "returnType": "CpsDialogRef<any>",
+                "returnType": "CpsDialogRef",
                 "description": "Opens a confirmation dialog."
             },
             {

package.json

@@ -41,7 +41,7 @@
                         "name": "fileProcessingCallback",
                         "optional": true,
                         "readonly": false,
-                        "type": "Function",
+                        "type": "(file: File) => Observable<boolean>",
                         "default": "undefined",
                         "description": "Callback for uploaded file processing."
                     },

projects/composition/src/app/api-data/cps-dialog.json

@@ -131,7 +131,7 @@
         "values": [
             {
                 "name": "CpsMenuItem",
-                "value": "{\n    \"title\": \"string\",\n    \"action\": \"Function\",\n    \"icon\": \"string\",\n    \"desc\": \"string\",\n    \"url\": \"string\",\n    \"target\": \"string\",\n    \"disabled\": \"boolean\",\n    \"loading\": \"boolean\"\n}",
+                "value": "{\n    \"title\": \"string\",\n    \"action\": \"(event?: any) => void\",\n    \"icon\": \"string\",\n    \"desc\": \"string\",\n    \"url\": \"string\",\n    \"target\": \"string\",\n    \"disabled\": \"boolean\",\n    \"loading\": \"boolean\"\n}",
                 "description": "CpsMenuItem is used to define the items of the CpsMenuComponent."
             },
             {

projects/composition/src/app/api-data/cps-file-upload.json

@@ -9,7 +9,7 @@
                         "name": "columns",
                         "optional": false,
                         "readonly": false,
-                        "type": "Object[]",
+                        "type": "{ [key: string]: any }[]",
                         "default": "[]",
                         "description": "An array of objects to represent dynamic columns."
                     },
@@ -544,7 +544,7 @@
                         "name": "initialColumns",
                         "optional": false,
                         "readonly": false,
-                        "type": "Object[]",
+                        "type": "{ [key: string]: any }[]",
                         "default": "[]",
                         "description": "Array of initial columns to show in the table. If not provided, all columns are initially visible."
                     },
@@ -620,7 +620,7 @@
                         "parameters": [
                             {
                                 "name": "value",
-                                "type": "Object"
+                                "type": "{ row: any; index: number }"
                             }
                         ],
                         "description": "Callback to invoke when edit-row button is clicked."
@@ -690,7 +690,7 @@
                         "parameters": [
                             {
                                 "name": "value",
-                                "type": "Object[]"
+                                "type": "{ [key: string]: any }[]"
                             }
                         ],
                         "description": "Callback to invoke on columns selection."

projects/composition/src/app/api-data/cps-menu.json

@@ -9,7 +9,7 @@
                         "name": "columns",
                         "optional": false,
                         "readonly": false,
-                        "type": "Object[]",
+                        "type": "{ [key: string]: any }[]",
                         "default": "[]",
                         "description": "An array of objects to represent dynamic columns."
                     },
@@ -512,7 +512,7 @@
                         "name": "initialColumns",
                         "optional": false,
                         "readonly": false,
-                        "type": "Object[]",
+                        "type": "{ [key: string]: any }[]",
                         "default": "[]",
                         "description": "Array of initial columns to show in the treetable. If not provided, all columns are initially visible."
                     },
@@ -686,7 +686,7 @@
                         "parameters": [
                             {
                                 "name": "value",
-                                "type": "Object[]"
+                                "type": "{ [key: string]: any }[]"
                             }
                         ],
                         "description": "Callback to invoke on selected columns."

projects/composition/src/app/api-data/cps-table.json

@@ -1,7 +1,7 @@
-@import '../variables.scss';
+@use '../variables.scss' as vars;
 
 .top-toolbar {
-  height: $top-tbar-height;
+  height: vars.$top-tbar-height;
   background-color: white;
   display: flex;
   padding-left: 20px;
@@ -14,22 +14,22 @@
   span {
     margin-left: 16px;
     font-size: 18px;
-    color: $color-calm;
+    color: vars.$color-calm;
   }
 }
 .composition-container {
   display: flex;
-  height: calc(100vh - $top-tbar-height);
+  height: calc(100vh - vars.$top-tbar-height);
 
   .composition-body {
     display: flex;
     flex-direction: column;
     width: 100%;
     overflow-x: auto;
-    background-color: $composition-background;
+    background-color: vars.$composition-background;
     .composition-body-toolbar {
-      height: $inner-tbar-height;
-      background: $color-calm;
+      height: vars.$inner-tbar-height;
+      background: vars.$color-calm;
       display: flex;
       align-items: center;
       justify-content: space-between;