Upgrade Angular to version 19 and other dependencies as well (#319)

* updated override version

* removed override core

* updated for angular 19

* updated material and other packages for angular 19 compatibility

* updated package.json in packages/components

* updated based on comment

* refactor: remove unused imports and clean up component code

---------

Co-authored-by: mohas22 <[email protected]>
Co-authored-by: Siva Rama Krishna <[email protected]>

Author: 3 people

package-lock.json

@@ -55,47 +55,47 @@
     "test-report": "playwright show-report"
   },
   "dependencies": {
-    "@angular/animations": "^18.2.12",
-    "@angular/cdk": "^18.2.13",
-    "@angular/common": "^18.2.12",
-    "@angular/compiler": "^18.2.12",
-    "@angular/core": "^18.2.12",
-    "@angular/forms": "^18.2.12",
-    "@angular/material": "^18.2.13",
-    "@angular/material-experimental": "^18.2.13",
-    "@angular/material-moment-adapter": "^18.2.13",
-    "@angular/platform-browser": "^18.2.12",
-    "@angular/platform-browser-dynamic": "^18.2.12",
-    "@angular/router": "^18.2.12",
-    "@danielmoncada/angular-datetime-picker": "^18.1.0",
-    "@pega/auth": "~0.2.28",
+    "@angular/animations": "^19.2.14",
+    "@angular/cdk": "^19.2.19",
+    "@angular/common": "^19.2.14",
+    "@angular/compiler": "^19.2.14",
+    "@angular/core": "^19.2.14",
+    "@angular/forms": "^19.2.14",
+    "@angular/material": "^19.2.19",
+    "@angular/material-experimental": "^19.2.19",
+    "@angular/material-moment-adapter": "^19.2.19",
+    "@angular/platform-browser": "^19.2.14",
+    "@angular/platform-browser-dynamic": "^19.2.14",
+    "@angular/router": "^19.2.14",
+    "@danielmoncada/angular-datetime-picker": "^19.0.0",
+    "@pega/auth": "~0.2.31",
     "@tinymce/tinymce-angular": "^8.0.1",
     "core-js": "^3.39.0",
     "dayjs": "^1.11.13",
     "downloadjs": "^1.4.7",
     "fast-deep-equal": "^3.1.3",
+    "mat-tel-input": "19.0.5-0",
     "libphonenumber-js": "^1.10.53",
     "lodash.clonedeep": "^4.5.0",
-    "ngx-currency": "^18.0.0",
-    "ngx-mat-intl-tel-input": "^5.0.0",
+    "ngx-currency": "^19.0.0",
     "rxjs": "^7.8.1",
     "tslib": "^2.8.1",
-    "zone.js": "~0.14.10"
+    "zone.js": "~0.15.1"
   },
   "devDependencies": {
-    "@angular-builders/custom-webpack": "^18.0.0",
-    "@angular-devkit/build-angular": "^18.2.12",
-    "@angular-devkit/core": "^18.2.12",
+    "@angular-builders/custom-webpack": "^19.0.1",
+    "@angular-devkit/build-angular": "^19.2.15",
+    "@angular-devkit/core": "^19.2.15",
     "@angular-eslint/eslint-plugin": "^18.4.0",
     "@angular-eslint/eslint-plugin-template": "^18.4.0",
     "@angular-eslint/template-parser": "^18.4.1",
-    "@angular/cli": "^18.2.12",
-    "@angular/compiler-cli": "^18.2.12",
-    "@angular/language-service": "^18.2.12",
-    "@pega/configs": "^0.16.2",
+    "@angular/cli": "^19.2.15",
+    "@angular/compiler-cli": "^19.2.14",
+    "@angular/language-service": "^19.2.14",
+    "@pega/configs": "^0.16.3",
     "@pega/constellationjs": "~24.2.2",
     "@pega/pcore-pconnect-typedefs": "~3.2.2",
-    "@playwright/test": "^1.40.1",
+    "@playwright/test": "^1.54.2",
     "@types/jasmine": "~5.1.4",
     "@types/jasminewd2": "~2.0.13",
     "@types/node": "^20.10.8",
@@ -104,9 +104,9 @@
     "brotli": "^1.3.3",
     "codelyzer": "^6.0.2",
     "compressing": "^1.10.1",
-    "copy-webpack-plugin": "^12.0.2",
+    "copy-webpack-plugin": "^13.0.1",
     "eslint": "^8.56.0",
-    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jest": "^28.9.0",
     "fs-extra": "^11.2.0",
     "jasmine-core": "~5.1.1",
@@ -116,18 +116,18 @@
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "^2.1.0",
     "md5-file": "^5.0.0",
-    "ng-packagr": "^18.2.1",
+    "ng-packagr": "^19.2.2",
     "npm-force-resolutions": "0.0.10",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.49",
-    "shx": "^0.3.4",
+    "shx": "^0.4.0",
     "tinymce": "^6.8.6",
     "ts-node": "~10.9.2",
-    "typescript": "^5.4.5",
-    "webpack": "^5.96.1"
+    "typescript": "^5.5.4",
+    "webpack": "^5.101.2"
   },
   "overrides": {
-    "@angular/core": "^18.2.12",
+    "@angular/core": "^19.2.14",
     "esbuild": "^0.25.0"
   }
 }

package.json

@@ -2,11 +2,11 @@
   "name": "@pega/angular-sdk-components",
   "version": "24.2.12",
   "peerDependencies": {
-    "@angular/common": "^18.2.12",
-    "@angular/core": "^18.2.12"
+    "@angular/common": "^19.0.0",
+    "@angular/core": "^19.0.0"
   },
   "dependencies": {
-    "tslib": "^2.6.2"
+    "tslib": "^2.8.1"
   },
   "sideEffects": false
 }

packages/angular-sdk-components/package.json

@@ -9,7 +9,6 @@ const componentsRequireDisplayOnlyFAProp: string[] = ['HybridViewContainer', 'Mo
   selector: 'component-mapper',
   templateUrl: './component-mapper.component.html',
   styleUrls: ['./component-mapper.component.scss'],
-  standalone: true,
   imports: [CommonModule]
 })
 export class ComponentMapperComponent implements OnInit, OnDestroy, OnChanges {

packages/angular-sdk-components/src/lib/_bridge/component-mapper/component-mapper.component.ts

@@ -6,7 +6,6 @@ import { ComponentMapperComponent } from '../../../_bridge/component-mapper/comp
   selector: 'app-alert-banner',
   templateUrl: './alert-banner.component.html',
   styleUrls: ['./alert-banner.component.scss'],
-  standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class AlertBannerComponent {

packages/angular-sdk-components/src/lib/_components/designSystemExtension/alert-banner/alert-banner.component.ts

@@ -6,7 +6,6 @@ import { MatIconModule } from '@angular/material/icon';
   selector: 'app-alert',
   templateUrl: './alert.component.html',
   styleUrls: ['./alert.component.scss'],
-  standalone: true,
   imports: [CommonModule, MatIconModule]
 })
 export class AlertComponent {

packages/angular-sdk-components/src/lib/_components/designSystemExtension/alert/alert.component.ts

@@ -7,7 +7,6 @@ import { ComponentMapperComponent } from '../../../_bridge/component-mapper/comp
   selector: 'app-banner',
   templateUrl: './banner.component.html',
   styleUrls: ['./banner.component.scss'],
-  standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class BannerComponent {

packages/angular-sdk-components/src/lib/_components/designSystemExtension/banner/banner.component.ts

@@ -8,7 +8,6 @@ import { ComponentMapperComponent } from '../../../_bridge/component-mapper/comp
   selector: 'app-case-create-stage',
   templateUrl: './case-create-stage.component.html',
   styleUrls: ['./case-create-stage.component.scss'],
-  standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class CaseCreateStageComponent implements OnInit, OnDestroy {

packages/angular-sdk-components/src/lib/_components/designSystemExtension/case-create-stage/case-create-stage.component.ts

@@ -7,7 +7,6 @@ import { MatIconModule } from '@angular/material/icon';
   selector: 'app-field-group',
   templateUrl: './field-group.component.html',
   styleUrls: ['./field-group.component.scss'],
-  standalone: true,
   imports: [CommonModule, MatGridListModule, MatIconModule]
 })
 export class FieldGroupComponent {

packages/angular-sdk-components/src/lib/_components/designSystemExtension/field-group/field-group.component.ts

@@ -7,7 +7,6 @@ import { ComponentMapperComponent } from '../../../_bridge/component-mapper/comp
   selector: 'app-material-case-summary',
   templateUrl: './material-case-summary.component.html',
   styleUrls: ['./material-case-summary.component.scss'],
-  standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class MaterialCaseSummaryComponent implements OnInit, OnChanges {