feat!: update to Angular 20

BREAKING CHANGE: Remove Angular less than v20 from peer dependencies

Author: json-derulo

.browserslistrc

@@ -207,6 +207,7 @@ In case you are still using the legacy components, you can use the package [angu
 
 | Angular | angular-material-css-vars |
 | ------- | ------------------------- |
+| 20      | 9.x                       |
 | 19      | 8.x                       |
 | 18      | 7.x                       |
 | 17      | 6.x                       |

README.md

@@ -15,7 +15,7 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:application",
+          "builder": "@angular/build:application",
           "options": {
             "outputPath": "dist/angular-material-css-vars",
             "index": "src/index.html",
@@ -56,7 +56,7 @@
           }
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular/build:dev-server",
           "options": {
             "buildTarget": "angular-material-css-vars:build"
           },
@@ -71,23 +71,11 @@
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "builder": "@angular/build:extract-i18n",
           "options": {
             "buildTarget": "angular-material-css-vars:build"
           }
         },
-        "e2e": {
-          "builder": "@angular-devkit/build-angular:protractor",
-          "options": {
-            "protractorConfig": "e2e/protractor.conf.js",
-            "devServerTarget": "angular-material-css-vars:serve"
-          },
-          "configurations": {
-            "production": {
-              "devServerTarget": "angular-material-css-vars:serve:production"
-            }
-          }
-        },
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {
@@ -103,14 +91,14 @@
       "prefix": "lib",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "builder": "@angular/build:ng-packagr",
           "options": {
             "tsConfig": "projects/material-css-vars/tsconfig.lib.json",
             "project": "projects/material-css-vars/ng-package.json"
           }
         },
         "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+          "builder": "@angular/build:karma",
           "options": {
             "codeCoverage": true,
             "main": "projects/material-css-vars/src/test.ts",
@@ -137,5 +125,31 @@
       "enabled": true
     },
     "schematicCollections": ["@angular-eslint/schematics"]
+  },
+  "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": "."
+    }
   }
 }

angular.json

@@ -32,51 +32,55 @@
     "prettier-fix": "prettier . --write"
   },
   "dependencies": {
-    "@angular/animations": "^19.2.3",
-    "@angular/cdk": "^19.2.6",
-    "@angular/common": "^19.2.3",
-    "@angular/compiler": "^19.2.3",
-    "@angular/core": "^19.2.3",
-    "@angular/forms": "^19.2.3",
-    "@angular/material": "^19.2.6",
-    "@angular/platform-browser": "^19.2.3",
-    "@angular/platform-browser-dynamic": "^19.2.3",
-    "@angular/router": "^19.2.3",
-    "@ctrl/tinycolor": "^4.0.0",
-    "@types/node": "^22.13.14",
+    "@angular/cdk": "^20.0.0",
+    "@angular/common": "^20.0.0",
+    "@angular/compiler": "^20.0.0",
+    "@angular/core": "^20.0.0",
+    "@angular/forms": "^20.0.0",
+    "@angular/material": "^20.0.0",
+    "@angular/platform-browser": "^20.0.0",
+    "@angular/platform-browser-dynamic": "^20.0.0",
+    "@angular/router": "^20.0.0",
+    "@ctrl/tinycolor": "^4.1.0",
+    "@types/node": "^22.15.23",
     "ngx-color-picker": "^19.0.0",
-    "rxjs": "~7.8.0",
-    "tslib": "^2.5.0",
-    "zone.js": "~0.15.0"
+    "rxjs": "~7.8.2",
+    "tslib": "^2.8.1",
+    "zone.js": "~0.15.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^19.2.4",
-    "@angular/cli": "^19.2.4",
-    "@angular/compiler-cli": "^19.2.3",
-    "@angular/language-service": "^19.2.3",
-    "@types/jasmine": "^5.1.1",
-    "angular-eslint": "^19.0.0",
-    "copyfiles": "^2.1.1",
-    "eslint": "^9.0.0",
-    "gh-pages": "^6.0.0",
-    "jasmine-core": "^5.0.1",
-    "karma": "^6.4.1",
+    "@angular/build": "^20.0.0",
+    "@angular/cli": "^20.0.0",
+    "@angular/compiler-cli": "^20.0.0",
+    "@angular/language-service": "^20.0.0",
+    "@types/jasmine": "^5.1.8",
+    "angular-eslint": "^19.6.0",
+    "copyfiles": "^2.4.1",
+    "eslint": "^9.27.0",
+    "gh-pages": "^6.3.0",
+    "jasmine-core": "^5.7.1",
+    "karma": "^6.4.4",
     "karma-chrome-launcher": "~3.2.0",
-    "karma-coverage": "^2.2.0",
-    "karma-firefox-launcher": "^2.1.2",
+    "karma-coverage": "^2.2.1",
+    "karma-firefox-launcher": "^2.1.3",
     "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "^2.0.0",
+    "karma-jasmine-html-reporter": "^2.1.0",
     "karma-safarinative-launcher": "^1.1.0",
-    "ng-packagr": "^19.0.0",
+    "ng-packagr": "^20.0.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.0.0",
-    "typescript": "~5.8.2",
-    "typescript-eslint": "^8.0.0"
+    "prettier": "^3.5.3",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "^8.33.0"
   },
   "engines": {
     "npm": "Please use pnpm instead of npm to install dependencies",
     "yarn": "Please use pnpm instead of yarn to install dependencies",
     "pnpm": "^10.7.0"
   },
+  "pnpm": {
+    "overrides": {
+      "jasmine-core": "$jasmine-core"
+    }
+  },
   "packageManager": "[email protected]"
 }