cot-775_version19_with_angular_material

.nvmrc

@@ -1 +1 @@
-18.19.0
+22.0.0

angular.json

@@ -22,7 +22,7 @@
             "polyfills": [
               "zone.js"
             ],
-            "tsConfig": "src/tsconfig.app.json",
+            "tsConfig": "tsconfig.json",
             "assets": [
               "src/favicon.ico",
               "src/assets"

demo/src/app/app.config.ts

@@ -4,7 +4,6 @@ import { AbstractAppConfig, CaseEditorConfig } from '@hmcts/ccd-case-ui-toolkit'
 
 @Injectable()
 export class AppConfig extends AbstractAppConfig {
-
   protected config: CaseEditorConfig = {
     'api_url': '/aggregated',
     'case_data_url': '/data',
@@ -98,7 +97,7 @@ export class AppConfig extends AbstractAppConfig {
 
   public getCaseHistoryUrl(caseId: string, eventId: string) {
     return this.getCaseDataUrl()
-      + `/internal`
+      + '/internal'
       + `/cases/${caseId}`
       + `/events/${eventId}`;
   }
@@ -148,7 +147,7 @@ export class AppConfig extends AbstractAppConfig {
   }
 
   public getBannersUrl() {
-    return this.getCaseDataUrl() + `/internal/banners/`;
+    return this.getCaseDataUrl() + '/internal/banners/';
   }
 
   public getPrdUrl(): string {

documentation.json

@@ -48578,13 +48578,13 @@
             "outputs": [],
             "providers": [
                 {
-                    "name": "{ provide: NGX_MAT_DATE_FORMATS, useValue: CUSTOM_MOMENT_FORMATS }"
+                    "name": "{ provide: MAT_DATE_FORMATS, useValue: CUSTOM_MOMENT_FORMATS }"
                 },
                 {
-                    "name": "{ provide: NgxMatDateAdapter, useClass: NgxMatMomentAdapter }"
+                    "name": "{ provide: DateAdapter, useClass: MomentDateAdapter }"
                 },
                 {
-                    "name": "{ provide: NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } }"
+                    "name": "{ provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } }"
                 }
             ],
             "selector": "ccd-datetime-picker",

package.json

@@ -1,8 +1,8 @@
 {
   "name": "@hmcts/ccd-case-ui-toolkit",
-  "version": "7.2.46",
+  "version": "7.2.41-cme-775-v19",
   "engines": {
-    "node": ">=18.19.0"
+    "node": ">=22.0.0"
   },
   "description": "Case UI Toolkit",
   "main": "./dist/index.umd.js",
@@ -46,26 +46,27 @@
     "build:storybook": "yarn docs:json && build-storybook"
   },
   "dependencies": {
-    "@angular-material-components/datetime-picker": "16.0.1",
-    "@angular-material-components/moment-adapter": "16.0.1",
-    "@angular/animations": "~18.2.13",
-    "@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/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/animations": "~19.2.15",
+    "@angular/cdk": "19.2.19",
+    "@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": "^19.2.19",
+    "@angular/material-moment-adapter": "19.2.19",
+    "@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",
-    "@hmcts/media-viewer": "4.1.7",
-    "@ngrx/effects": "17.2.0",
-    "@ngrx/store": "^17.2.0",
+    "@hmcts/media-viewer": "4.1.6-angular-20",
+    "@ngrx/effects": "^20",
+    "@ngrx/store": "^20",
+    "@ngxmc/datetime-picker": "^19",
+    "@ngxmc/moment-adapter": "^19",
     "@nicky-lenaers/ngx-scroll-to": "^14.0.0",
     "braces": "^2.3.1",
     "enhanced-resolve": "3.3.0",
@@ -80,7 +81,7 @@
     "moment": "^2.30.1",
     "moment-timezone": "^0.5.31",
     "ngx-chips": "^3.0.0",
-    "ngx-markdown": "^17.2.1",
+    "ngx-markdown": "^20.1.0",
     "ngx-pagination": "6.0.3",
     "npm-registry-fetch": "^4.0.5",
     "pegjs": "^0.10.0",
@@ -93,17 +94,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",
+    "@angular-eslint/builder": "20.3.0",
+    "@angular-eslint/eslint-plugin": "20.3.0",
+    "@angular-eslint/eslint-plugin-template": "20.3.0",
+    "@angular-eslint/schematics": "20.3.0",
+    "@angular-eslint/template-parser": "20.3.0",
+    "@angular/cli": "^19.2.17",
+    "@angular/compiler-cli": "^19",
     "@babel/core": "^7.23.0",
     "@compodoc/compodoc": "1.1.12",
     "@storybook/addon-actions": "^6.5.10",
@@ -117,7 +118,7 @@
     "@storybook/testing-library": "^0.2.0",
     "@types/jasmine": "~2.8.0",
     "@types/jasminewd2": "^2.0.3",
-    "@types/node": "^18.19.0",
+    "@types/node": "^22.0.0",
     "@types/pegjs": "^0.10.0",
     "@types/underscore": "^1.11.4",
     "@types/webpack": "^4.41.25",
@@ -164,9 +165,8 @@
     "mocha": "^8.1.1",
     "multidep": "2.0.2",
     "ng-mocks": "^14.12.2",
-    "ng-packagr": "^18.0.0",
+    "ng-packagr": "^19",
     "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 +185,7 @@
     "ts-node": "^10.9.2",
     "tslib": "^2.6.1",
     "tslint": "^6.1.3",
-    "typescript": "~5.4.5",
+    "typescript": "^5.8.2",
     "webpack": "^5.88.2",
     "webpack-angular-externals": "^1.0.2",
     "webpack-cli": "^4.4.0",
@@ -202,7 +202,6 @@
     "handlebars": "^4.7.7",
     "https-proxy-agent": "^2.2.3",
     "lodash": "^4.17.21",
-    "marked": "^0.7.0",
     "minimatch": "^8.0.4",
     "minimist": "^1.2.3",
     "node-fetch": "^2.6.7",
@@ -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.8.2"
   },
   "nyc": {
     "include": [

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

@@ -1,8 +1,8 @@
 {
   "name": "@hmcts/ccd-case-ui-toolkit",
-  "version": "7.2.46",
+  "version": "7.2.41-cme-775-v19",
   "engines": {
-    "node": ">=18.19.0"
+    "node": ">=22.0.0"
   },
   "description": "Case UI Toolkit",
   "license": "MIT",

projects/ccd-case-ui-toolkit/src/lib/app-config.mock.ts

@@ -1,4 +1,5 @@
 /* istanbul ignore file */
+/* eslint-disable @typescript-eslint/no-unused-vars */
 
 import {
   AbstractAppConfig,
@@ -56,14 +57,15 @@ export class AppMockConfig implements AbstractAppConfig {
   }
 
   public getEnvironment() {
-    if (this.getActivityUrl()?.includes('.aat.'))
+    if (this.getActivityUrl()?.includes('.aat.')) {
       return 'aat';
-    else if (this.getActivityUrl()?.includes('.preview.'))
+    } else if (this.getActivityUrl()?.includes('.preview.')) {
       return 'preview';
-    else if (this.getActivityUrl()?.includes('.demo.'))
+    } else if (this.getActivityUrl()?.includes('.demo.')) {
       return 'demo';
-    else if (this.getActivityUrl()?.includes('.ithc.'))
+    } else if (this.getActivityUrl()?.includes('.ithc.')) {
       return 'ithc';
+    }
     return 'prod';
   }
 

projects/ccd-case-ui-toolkit/src/lib/app.config.ts

@@ -92,18 +92,18 @@ export abstract class AbstractAppConfig {
   }
 
   public getEnvironment() {
-    if (this.getActivityUrl()?.includes('.aat.'))
+    if (this.getActivityUrl()?.includes('.aat.')) {
       return 'aat';
-    else if (this.getActivityUrl()?.includes('.preview.'))
+    } else if (this.getActivityUrl()?.includes('.preview.')) {
       return 'preview';
-    else if (this.getActivityUrl()?.includes('.demo.'))
+    } else if (this.getActivityUrl()?.includes('.demo.')) {
       return 'demo';
-    else if (this.getActivityUrl()?.includes('.ithc.'))
+    } else if (this.getActivityUrl()?.includes('.ithc.')) {
       return 'ithc';
+    }
     return 'prod';
   }
 
-
   public abstract getRefundsUrl(): string;
   public abstract getNotificationUrl(): string;
   public abstract getPaymentReturnUrl(): string;

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 {