chore(deps)!: update to angular v21

Author: json-derulo

README.md

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

package.json

@@ -32,55 +32,50 @@
     "prettier-fix": "prettier . --write"
   },
   "dependencies": {
-    "@angular/cdk": "^20.1.0",
-    "@angular/common": "^20.1.0",
-    "@angular/compiler": "^20.1.0",
-    "@angular/core": "^20.1.0",
-    "@angular/forms": "^20.1.0",
-    "@angular/material": "^20.1.0",
-    "@angular/platform-browser": "^20.1.0",
-    "@angular/platform-browser-dynamic": "^20.1.0",
-    "@angular/router": "^20.1.0",
-    "@ctrl/tinycolor": "^4.1.0",
-    "@types/node": "^22.16.4",
-    "ngx-color-picker": "^20.0.0",
+    "@angular/cdk": "^21.0.0",
+    "@angular/common": "^21.0.0",
+    "@angular/compiler": "^21.0.0",
+    "@angular/core": "^21.0.0",
+    "@angular/forms": "^21.0.0",
+    "@angular/material": "^21.0.0",
+    "@angular/platform-browser": "^21.0.0",
+    "@angular/platform-browser-dynamic": "^21.0.0",
+    "@angular/router": "^21.0.0",
+    "@ctrl/tinycolor": "^4.2.0",
+    "@types/node": "^24.10.1",
+    "ngx-color-picker": "^20.1.1",
     "rxjs": "~7.8.2",
     "tslib": "^2.8.1",
     "zone.js": "~0.15.1"
   },
   "devDependencies": {
-    "@angular/build": "^20.1.0",
-    "@angular/cli": "^20.1.0",
-    "@angular/compiler-cli": "^20.1.0",
-    "@angular/language-service": "^20.1.0",
-    "@types/jasmine": "^5.1.8",
-    "angular-eslint": "^20.1.1",
+    "@angular/build": "^21.0.0",
+    "@angular/cli": "^21.0.0",
+    "@angular/compiler-cli": "^21.0.0",
+    "@angular/language-service": "^21.0.0",
+    "@types/jasmine": "^5.1.13",
+    "angular-eslint": "^20.6.0",
     "copyfiles": "^2.4.1",
-    "eslint": "^9.31.0",
+    "eslint": "^9.39.1",
     "gh-pages": "^6.3.0",
-    "jasmine-core": "^5.8.0",
+    "jasmine-core": "^5.12.1",
     "karma": "^6.4.4",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "^2.2.1",
     "karma-firefox-launcher": "^2.1.3",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "^2.1.0",
     "karma-safarinative-launcher": "^1.1.0",
-    "ng-packagr": "^20.1.0",
+    "ng-packagr": "^21.0.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.6.2",
-    "typescript": "~5.8.3",
-    "typescript-eslint": "^8.37.0"
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.47.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]"
+  "packageManager": "[email protected]"
 }

pnpm-lock.yaml

@@ -0,0 +1,9 @@
+minimumReleaseAge: 4320
+minimumReleaseAgeExclude:
+  - "@angular/*"
+  - "@angular-devkit/*"
+  - "@schematics/angular"
+  - ng-packagr
+
+ignoredBuiltDependencies:
+  - esbuild

pnpm-workspace.yaml

@@ -25,9 +25,9 @@
     "angular-material"
   ],
   "peerDependencies": {
-    "@angular/common": ">=20",
-    "@angular/core": ">=20",
-    "@angular/material": ">=20"
+    "@angular/common": ">=21",
+    "@angular/core": ">=21",
+    "@angular/material": ">=21"
   },
   "dependencies": {
     "@ctrl/tinycolor": "^4.0.0",

projects/material-css-vars/package.json

@@ -4,8 +4,7 @@
     "outDir": "../../out-tsc/lib",
     "declaration": true,
     "inlineSources": true,
-    "types": [],
-    "lib": ["dom", "es2018"]
+    "types": []
   },
   "angularCompilerOptions": {
     "annotateForClosureCompiler": false,

projects/material-css-vars/tsconfig.lib.json

@@ -1,14 +1,14 @@
-import { ApplicationConfig } from "@angular/core";
+import { ApplicationConfig, provideZoneChangeDetection } from "@angular/core";
 import { provideMaterialCssVars } from "../../projects/material-css-vars/src/lib/material-css-vars.module";
 import { APP_BASE_HREF } from "@angular/common";
 
 export const appConfig: ApplicationConfig = {
   providers: [
+    provideZoneChangeDetection(),
     provideMaterialCssVars({
       primary: "#3f51b5",
       accent: "#e91e63",
       warn: "#f44336",
-      rootSelector: "app-root",
     }),
     { provide: APP_BASE_HREF, useValue: window._app_base ?? "/" },
   ],

src/app/app.config.ts

@@ -16,7 +16,6 @@
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
     "typeRoots": ["node_modules/@types"],
-    "lib": ["es2018", "dom"],
     "paths": {
       "angular-material-css-variables": ["dist/angular-material-css-variables"],
       "angular-material-css-variables/*": [