CME-775 angular 20

.eslintrc.cjs

@@ -21,6 +21,7 @@ module.exports = {
     '@typescript-eslint/no-extra-semi': 'off',
     '@typescript-eslint/no-inferrable-types': 'off',
     '@typescript-eslint/no-var-requires': 'off',
+    '@typescript-eslint/no-require-imports': 'off',
     'array-bracket-spacing': 'error',
     'arrow-parens': ['error', 'always'],
     'arrow-spacing': 'error',
@@ -84,5 +85,13 @@ module.exports = {
     'semi-style': ['error', 'last'],
     'space-in-parens': ['error', 'never'],
     'switch-colon-spacing': 'error'
-  }
+  },
+  'overrides': [
+    {
+      files: ['src/assets/**/*.js'],
+      rules: {
+        '@typescript-eslint/no-unused-expressions': 'off'
+      }
+    }
+  ]
 };

.github/workflows/npmpublish.yml

@@ -21,7 +21,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
       - run: corepack enable && yarn --version
       - run: yarn install
       - run: yarn test:audit
@@ -44,7 +44,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
       - run: corepack enable && yarn --version
       - run: yarn install
       - run: yarn build
@@ -87,7 +87,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
           registry-url: https://registry.npmjs.org/
       - run: corepack enable && yarn --version
       - run: yarn install
@@ -105,7 +105,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
           registry-url: https://npm.pkg.github.com/
           scope: '@hmcts'
       - run: corepack enable && yarn --version
@@ -114,4 +114,4 @@ jobs:
       - run: npm publish dist/ccd-case-ui-toolkit/ --ignore-scripts
         env:
           NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          NPM_PUBLISH_REGISTRY: https://npm.pkg.github.com/
+          NPM_PUBLISH_REGISTRY: https://npm.pkg.github.com/

.nvmrc

@@ -1 +1 @@
-18.19.0
+20.19.0

angular.json

@@ -29,7 +29,12 @@
             ],
             "styles": [],
             "scripts": [],
-            "preserveSymlinks": true
+            "preserveSymlinks": true,
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "node_modules"
+              ]
+            }
           },
           "configurations": {
             "production": {
@@ -176,5 +181,31 @@
         }
       }
     }
+  },
+  "schematics": {
+    "@schematics/angular:component": {
+      "type": "component"
+    },
+    "@schematics/angular:directive": {
+      "type": "directive"
+    },
+    "@schematics/angular:service": {
+      "type": "service"
+    },
+    "@schematics/angular:guard": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:interceptor": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:module": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:pipe": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:resolver": {
+      "typeSeparator": "."
+    }
   }
 }

package.json

@@ -1,8 +1,8 @@
 {
   "name": "@hmcts/ccd-case-ui-toolkit",
-  "version": "7.2.51",
+  "version": "7.3.6-angular-20",
   "engines": {
-    "node": ">=18.19.0"
+    "node": ">=20.19.0"
   },
   "description": "Case UI Toolkit",
   "main": "./dist/index.umd.js",
@@ -48,24 +48,24 @@
   "dependencies": {
     "@angular-material-components/datetime-picker": "16.0.1",
     "@angular-material-components/moment-adapter": "16.0.1",
-    "@angular/animations": "~18.2.13",
+    "@angular/animations": "~20.3.2",
     "@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": "^20.3.2",
+    "@angular/compiler": "20.3.2",
+    "@angular/core": "20.3.2",
+    "@angular/forms": "20.3.2",
+    "@angular/localize": "20.3.2",
     "@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": "20.3.2",
+    "@angular/platform-browser-dynamic": "20.3.2",
+    "@angular/router": "20.3.2",
+    "@angular/upgrade": "20.3.2",
     "@edium/fsm": "^2.1.2",
-    "@hmcts/ccpay-web-component": "6.3.3",
+    "@hmcts/ccpay-web-component": "6.5.0-cme-779-prerelease",
     "@hmcts/frontend": "0.0.50-alpha",
-    "@hmcts/media-viewer": "4.1.8",
-    "@ngrx/effects": "17.2.0",
-    "@ngrx/store": "^17.2.0",
+    "@hmcts/media-viewer": "4.1.9-cme-776-angular-20",
+    "@ngrx/effects": "^20.0.1",
+    "@ngrx/store": "^20.0.1",
     "@nicky-lenaers/ngx-scroll-to": "^14.0.0",
     "braces": "^2.3.1",
     "enhanced-resolve": "3.3.0",
@@ -80,30 +80,30 @@
     "moment": "^2.30.1",
     "moment-timezone": "^0.5.31",
     "ngx-chips": "^3.0.0",
-    "ngx-markdown": "^17.2.1",
+    "ngx-markdown": "^20",
     "ngx-pagination": "6.0.3",
     "npm-registry-fetch": "^4.0.5",
     "pegjs": "^0.10.0",
     "prism": "^4.1.2",
     "prismjs": "^1.29.0",
-    "rpx-xui-translation": "1.1.2",
+    "rpx-xui-translation": "1.1.2-CME-780-9",
     "rx-polling-hmcts": "1.1.1",
     "rxjs": "^7.8.1",
     "rxjs-compat": "^6.6.7",
     "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": "^20.3.3",
+    "@angular-eslint/builder": "^20",
+    "@angular-eslint/eslint-plugin": "^20",
+    "@angular-eslint/eslint-plugin-template": "^20",
+    "@angular-eslint/schematics": "^20",
+    "@angular-eslint/template-parser": "^20",
+    "@angular/cli": "^20.3.3",
+    "@angular/compiler-cli": "^20.3.2",
     "@babel/core": "^7.23.0",
     "@compodoc/compodoc": "1.1.12",
     "@storybook/addon-actions": "^6.5.10",
@@ -117,7 +117,7 @@
     "@storybook/testing-library": "^0.2.0",
     "@types/jasmine": "~2.8.0",
     "@types/jasminewd2": "^2.0.3",
-    "@types/node": "^18.19.0",
+    "@types/node": "^20.19.0",
     "@types/pegjs": "^0.10.0",
     "@types/underscore": "^1.11.4",
     "@types/webpack": "^4.41.25",
@@ -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": "^20.3.0",
     "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.9.2",
     "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.9.2"
   },
   "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/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@hmcts/ccd-case-ui-toolkit",
-  "version": "7.2.51",
+  "version": "7.3.6-angular-20",
   "engines": {
-    "node": ">=18.19.0"
+    "node": ">=20.19.0"
   },
   "description": "Case UI Toolkit",
   "license": "MIT",

projects/ccd-case-ui-toolkit/src/karma.conf.js

@@ -51,4 +51,4 @@ module.exports = function (config) {
     singleRun: true,
     restartOnFileChange: true
   });
-};
+};

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

@@ -12,7 +12,8 @@ export enum AlertMessageType {
   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

@@ -5,7 +5,8 @@ import { NotificationBannerType } from './enums';
 @Component({
   selector: 'ccd-notification-banner',
   templateUrl: './notification-banner.component.html',
-  styleUrls: ['./notification-banner.component.scss']
+  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

@@ -16,6 +16,7 @@ import { AbstractControl, ControlValueAccessor, FormControl, NG_VALIDATORS, NG_V
       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

@@ -3,7 +3,8 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
 @Component({
   selector: 'cut-header-bar',
   templateUrl: './header-bar.html',
-  styleUrls: ['./header-bar.scss']
+  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 {