COT-775 angular 20 with old material

angular.json

@@ -29,7 +29,12 @@
             ],
             "styles": [],
             "scripts": [],
-            "preserveSymlinks": true
+            "preserveSymlinks": true,
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "node_modules"
+              ]
+            }
           },
           "configurations": {
             "production": {

package.json

@@ -48,18 +48,18 @@
   "dependencies": {
     "@angular-material-components/datetime-picker": "16.0.1",
     "@angular-material-components/moment-adapter": "16.0.1",
-    "@angular/animations": "~18.2.13",
+    "@angular/animations": "~19.2.15",
     "@angular/cdk": "17.3.5",
-    "@angular/common": "^18.2.13",
-    "@angular/compiler": "18.2.13",
-    "@angular/core": "18.2.13",
-    "@angular/forms": "18.2.13",
-    "@angular/localize": "18.2.13",
+    "@angular/common": "^19.2.15",
+    "@angular/compiler": "19.2.15",
+    "@angular/core": "19.2.15",
+    "@angular/forms": "19.2.15",
+    "@angular/localize": "19.2.15",
     "@angular/material": "^16.2.0",
-    "@angular/platform-browser": "18.2.13",
-    "@angular/platform-browser-dynamic": "18.2.13",
-    "@angular/router": "18.2.13",
-    "@angular/upgrade": "18.2.13",
+    "@angular/platform-browser": "19.2.15",
+    "@angular/platform-browser-dynamic": "19.2.15",
+    "@angular/router": "19.2.15",
+    "@angular/upgrade": "19.2.15",
     "@edium/fsm": "^2.1.2",
     "@hmcts/ccpay-web-component": "6.3.3",
     "@hmcts/frontend": "0.0.50-alpha",
@@ -80,7 +80,7 @@
     "moment": "^2.30.1",
     "moment-timezone": "^0.5.31",
     "ngx-chips": "^3.0.0",
-    "ngx-markdown": "^17.2.1",
+    "ngx-markdown": "^19",
     "ngx-pagination": "6.0.3",
     "npm-registry-fetch": "^4.0.5",
     "pegjs": "^0.10.0",
@@ -93,17 +93,17 @@
     "underscore": "^1.9.1",
     "yargs": "17.7.2",
     "yargs-parser": "^21.1.1",
-    "zone.js": "^0.14.10"
+    "zone.js": "^0.15.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.2.15",
-    "@angular-eslint/builder": "18.4.3",
-    "@angular-eslint/eslint-plugin": "18.4.3",
-    "@angular-eslint/eslint-plugin-template": "18.4.3",
-    "@angular-eslint/schematics": "18.4.3",
-    "@angular-eslint/template-parser": "18.4.3",
-    "@angular/cli": "^18.2.17",
-    "@angular/compiler-cli": "^18.2.13",
+    "@angular-devkit/build-angular": "^19.2.17",
+    "@angular-eslint/builder": "^19",
+    "@angular-eslint/eslint-plugin": "^19",
+    "@angular-eslint/eslint-plugin-template": "^19",
+    "@angular-eslint/schematics": "^19",
+    "@angular-eslint/template-parser": "^19",
+    "@angular/cli": "^19.2.17",
+    "@angular/compiler-cli": "^19.2.15",
     "@babel/core": "^7.23.0",
     "@compodoc/compodoc": "1.1.12",
     "@storybook/addon-actions": "^6.5.10",
@@ -141,7 +141,7 @@
     "font-awesome": "^4.6.1",
     "gh-pages": "^2.0.0",
     "git-message": "^2.0.2",
-    "govuk_frontend_toolkit": "^9.0.0",
+    "govuk_frontend_toolkit": "^9.0.1",
     "gulp": "^4.0.2",
     "gulp-inline-ng2-template": "^5.0.1",
     "gulp-sass": "^5.1.0",
@@ -164,9 +164,8 @@
     "mocha": "^8.1.1",
     "multidep": "2.0.2",
     "ng-mocks": "^14.12.2",
-    "ng-packagr": "^18.0.0",
+    "ng-packagr": "^19.2.2",
     "ng2-mock-component": "^0.1.1",
-    "ngx-device-detector": "^7.0.0",
     "nyc": "^13.0.1",
     "raw-loader": "^0.5.1",
     "reflect-metadata": "^0.1.12",
@@ -185,7 +184,7 @@
     "ts-node": "^10.9.2",
     "tslib": "^2.6.1",
     "tslint": "^6.1.3",
-    "typescript": "~5.4.5",
+    "typescript": "^5.7",
     "webpack": "^5.88.2",
     "webpack-angular-externals": "^1.0.2",
     "webpack-cli": "^4.4.0",
@@ -225,7 +224,7 @@
     "hosted-git-info": "^3.0.8",
     "normalize-url": "^6.0.1",
     "trim-newlines": "^3.0.1",
-    "typescript": "~5.4.5"
+    "typescript": "~5.7.0"
   },
   "nyc": {
     "include": [

projects/ccd-case-ui-toolkit/ng-package.json

@@ -2,6 +2,9 @@
   "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
   "dest": "../../dist/ccd-case-ui-toolkit",
   "lib": {
-    "entryFile": "src/public-api.ts"
+    "entryFile": "src/public-api.ts",
+    "styleIncludePaths": [
+      "../../node_modules"
+      ]
   }
-}
+}

projects/ccd-case-ui-toolkit/src/lib/components/banners/alert/alert-icon-class.pipe.ts

@@ -2,7 +2,8 @@ import { Pipe, PipeTransform } from '@angular/core';
 import { AlertComponent } from './alert.component';
 
 @Pipe({
-  name: 'cutAlertIconClass'
+    name: 'cutAlertIconClass',
+    standalone: false
 })
 export class AlertIconClassPipe implements PipeTransform {
   private static readonly CLASS_WARNING = 'icon-alert';

projects/ccd-case-ui-toolkit/src/lib/components/banners/alert/alert.component.ts

@@ -8,11 +8,12 @@ export enum AlertMessageType {
 }
 
 @Component({
-  selector: 'cut-alert',
-  templateUrl: './alert.component.html',
-  styleUrls: [
-    './alert.component.scss'
-  ]
+    selector: 'cut-alert',
+    templateUrl: './alert.component.html',
+    styleUrls: [
+        './alert.component.scss'
+    ],
+    standalone: false
 })
 export class AlertComponent {
 

projects/ccd-case-ui-toolkit/src/lib/components/banners/notification-banner/notification-banner.component.ts

@@ -3,9 +3,10 @@ import { NotificationBannerConfig } from './domain';
 import { NotificationBannerType } from './enums';
 
 @Component({
-  selector: 'ccd-notification-banner',
-  templateUrl: './notification-banner.component.html',
-  styleUrls: ['./notification-banner.component.scss']
+    selector: 'ccd-notification-banner',
+    templateUrl: './notification-banner.component.html',
+    styleUrls: ['./notification-banner.component.scss'],
+    standalone: false
 })
 export class NotificationBannerComponent {
   @Input()

projects/ccd-case-ui-toolkit/src/lib/components/body/body.component.ts

@@ -4,7 +4,8 @@ import { Component, ViewEncapsulation } from '@angular/core';
     selector: 'cut-body',
     templateUrl: './body.html',
     styleUrls: ['./fonts.scss'],
-    encapsulation: ViewEncapsulation.None
+    encapsulation: ViewEncapsulation.None,
+    standalone: false
 })
 export class BodyComponent {
 

projects/ccd-case-ui-toolkit/src/lib/components/footer/footer.component.ts

@@ -3,7 +3,8 @@ import { Component, Input } from '@angular/core';
 @Component({
     selector: 'cut-footer-bar',
     templateUrl: './footer.html',
-    styleUrls: ['./footer.scss']
+    styleUrls: ['./footer.scss'],
+    standalone: false
 })
 export class FooterComponent {
 

projects/ccd-case-ui-toolkit/src/lib/components/form/date-input/date-input-component.spec.ts

@@ -32,14 +32,12 @@ describe('Date input component', () => {
       .configureTestingModule({
         imports: [
           ReactiveFormsModule,
-          PaletteUtilsModule
+          PaletteUtilsModule,
+          inputComponentMock
         ],
         declarations: [
           DateInputComponent,
-          MockRpxTranslatePipe,
-
-          // Mocks
-          inputComponentMock
+          MockRpxTranslatePipe
         ],
         providers: []
       })

projects/ccd-case-ui-toolkit/src/lib/components/form/date-input/date-input.component.ts

@@ -2,20 +2,21 @@ import { Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core';
 import { AbstractControl, ControlValueAccessor, FormControl, NG_VALIDATORS, NG_VALUE_ACCESSOR, ValidationErrors, Validator } from '@angular/forms';
 
 @Component({
-  selector: 'cut-date-input',
-  templateUrl: './date-input.html',
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => DateInputComponent),
-      multi: true
-    },
-    {
-      provide: NG_VALIDATORS,
-      useExisting: forwardRef(() => DateInputComponent),
-      multi: true
-    }
-  ],
+    selector: 'cut-date-input',
+    templateUrl: './date-input.html',
+    providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => DateInputComponent),
+            multi: true
+        },
+        {
+            provide: NG_VALIDATORS,
+            useExisting: forwardRef(() => DateInputComponent),
+            multi: true
+        }
+    ],
+    standalone: false
 })
 export class DateInputComponent implements ControlValueAccessor, Validator, OnInit, OnDestroy {
   @Input()

projects/ccd-case-ui-toolkit/src/lib/components/header/header-bar/header-bar.component.ts

@@ -1,9 +1,10 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 
 @Component({
-  selector: 'cut-header-bar',
-  templateUrl: './header-bar.html',
-  styleUrls: ['./header-bar.scss']
+    selector: 'cut-header-bar',
+    templateUrl: './header-bar.html',
+    styleUrls: ['./header-bar.scss'],
+    standalone: false
 })
 export class HeaderBarComponent {
 

projects/ccd-case-ui-toolkit/src/lib/components/header/navigation/navigation-item.component.ts

@@ -3,7 +3,8 @@ import { Component, Input } from '@angular/core';
 @Component({
     selector: 'cut-nav-item',
     templateUrl: './navigation-item.html',
-    styleUrls: ['./navigation-item.scss']
+    styleUrls: ['./navigation-item.scss'],
+    standalone: false
 })
 export class NavigationItemComponent {
 

projects/ccd-case-ui-toolkit/src/lib/components/header/navigation/navigation.component.ts

@@ -3,7 +3,8 @@ import { Component, Input } from '@angular/core';
 @Component({
     selector: 'cut-nav-bar',
     templateUrl: './navigation.html',
-    styleUrls: ['./navigation.scss']
+    styleUrls: ['./navigation.scss'],
+    standalone: false
 })
 export class NavigationComponent {
 

projects/ccd-case-ui-toolkit/src/lib/components/header/phase/phase.component.ts

@@ -3,7 +3,8 @@ import { Component, Input } from '@angular/core';
 @Component({
     selector: 'cut-phase-bar',
     templateUrl: './phase.html',
-    styleUrls: ['./phase.scss']
+    styleUrls: ['./phase.scss'],
+    standalone: false
 })
 export class PhaseComponent {
 

projects/ccd-case-ui-toolkit/src/lib/components/tabs/tab.component.ts

@@ -1,11 +1,12 @@
 import { Component, Input } from '@angular/core';
 
 @Component({
-  selector: 'cut-tab',
-  templateUrl: './tab.component.html',
-  styleUrls: [
-    './tabs.component.scss'
-  ],
+    selector: 'cut-tab',
+    templateUrl: './tab.component.html',
+    styleUrls: [
+        './tabs.component.scss'
+    ],
+    standalone: false
 })
 export class TabComponent {
 

projects/ccd-case-ui-toolkit/src/lib/components/tabs/tabs.component.ts

@@ -3,11 +3,12 @@ import { ActivatedRoute } from '@angular/router';
 import { TabComponent } from './tab.component';
 
 @Component({
-  selector: 'cut-tabs',
-  templateUrl: './tabs.component.html',
-  styleUrls: [
-    './tabs.component.scss'
-  ],
+    selector: 'cut-tabs',
+    templateUrl: './tabs.component.html',
+    styleUrls: [
+        './tabs.component.scss'
+    ],
+    standalone: false
 })
 export class TabsComponent implements AfterContentInit {
 

projects/ccd-case-ui-toolkit/src/lib/shared/components/activity/activity-banner/activity-banner.component.ts

@@ -1,9 +1,10 @@
 import { Component, Input, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'ccd-activity-banner',
-  templateUrl: './activity-banner.component.html',
-  styleUrls: ['./activity-banner.component.css']
+    selector: 'ccd-activity-banner',
+    templateUrl: './activity-banner.component.html',
+    styleUrls: ['./activity-banner.component.css'],
+    standalone: false
 })
 export class ActivityBannerComponent implements OnInit {
   @Input()

projects/ccd-case-ui-toolkit/src/lib/shared/components/activity/activity-icon/activity-icon.component.ts

@@ -1,9 +1,10 @@
 import { Component, Input, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'ccd-activity-icon',
-  templateUrl: './activity-icon.component.html',
-  styleUrls: ['./activity-icon.component.css']
+    selector: 'ccd-activity-icon',
+    templateUrl: './activity-icon.component.html',
+    styleUrls: ['./activity-icon.component.css'],
+    standalone: false
 })
 export class ActivityIconComponent implements OnInit {
   @Input()

projects/ccd-case-ui-toolkit/src/lib/shared/components/activity/activity.component.spec.ts

@@ -100,12 +100,11 @@ describe('CcdActivityComponent', () => {
     activityPollingService.isEnabled = true;
     TestBed
       .configureTestingModule({
-        imports: [],
+        imports: [activityIconComponentMock,
+          activityBannerComponentMock],
         declarations: [
           ActivityComponent,
           // Mocks
-          activityIconComponentMock,
-          activityBannerComponentMock,
           MockRpxTranslatePipe
         ],
         providers: [

projects/ccd-case-ui-toolkit/src/lib/shared/components/activity/activity.component.ts

@@ -4,9 +4,10 @@ import { Activity, ActivityInfo, DisplayMode } from '../../domain/activity/activ
 import { ActivityPollingService } from '../../services/activity/activity.polling.service';
 
 @Component({
-  selector: 'ccd-activity',
-  templateUrl: './activity.component.html',
-  styleUrls: ['./activity.component.css']
+    selector: 'ccd-activity',
+    templateUrl: './activity.component.html',
+    styleUrls: ['./activity.component.css'],
+    standalone: false
 })
 export class ActivityComponent implements OnInit, OnDestroy {
   public activity: Activity;