feat: add Angular v20 support and compat tests

compat/v20/angular.json

@@ -0,0 +1,41 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "compat-test": {
+      "projectType": "application",
+      "root": "",
+      "sourceRoot": ".",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular/build:application",
+          "options": {
+            "browser": "main.ts",
+            "outputPath": "dist/compat-test",
+            "index": "index.html",
+            "tsConfig": "tsconfig.json",
+            "assets": [],
+            "styles": [],
+            "scripts": []
+          },
+          "configurations": {
+            "development": {
+              "optimization": false,
+              "extractLicenses": false
+            }
+          }
+        },
+        "test": {
+          "builder": "@angular/build:unit-test",
+          "options": {
+            "buildTarget": "compat-test:build:development",
+            "runner": "vitest",
+            "tsConfig": "tsconfig.json"
+          }
+        }
+      }
+    }
+  }
+}

compat/v20/app.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { describe, expect, it, beforeEach } from 'vitest';
+import { AppComponent } from './app.component';
+import { provideZonelessChangeDetection } from '@angular/core';
+
+describe('Compatibility Test', () => {
+  let fixture: ComponentFixture<AppComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AppComponent],
+      providers: [provideZonelessChangeDetection()],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+  });
+
+  it('should set the CSS variables on documentElement', () => {
+    const primary = document.documentElement.style.getPropertyValue('--mat-sys-primary');
+    // The library uses light-dark(), we just check if it's set and has some expected content
+    expect(primary).toContain('light-dark');
+  });
+});

compat/v20/app.component.ts

@@ -0,0 +1,14 @@
+import { Component, inject } from '@angular/core';
+import { AngularMaterialRuntimeTheme } from 'lib-dist';
+
+@Component({
+  selector: 'app-root',
+  template: '<h1>Test</h1>',
+})
+export class AppComponent {
+  private theme = inject(AngularMaterialRuntimeTheme);
+
+  constructor() {
+    this.theme.setTheme({ primary: '#6750A4' });
+  }
+}

compat/v20/index.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Angular Material Runtime Theme – v20 tests</title>
+    <base href="./" />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
+</html>

compat/v20/main.ts

@@ -0,0 +1,3 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+bootstrapApplication(AppComponent).catch((err) => console.error(err));

compat/v20/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "compat-test-v20",
+  "private": true,
+  "scripts": {
+    "build": "ng build",
+    "test": "ng test"
+  },
+  "dependencies": {
+    "@angular/common": "20.3.34",
+    "@angular/compiler": "20.3.34",
+    "@angular/core": "20.3.34",
+    "@angular/platform-browser": "20.3.34",
+    "rxjs": "7.8.2",
+    "tslib": "2.8.1"
+  },
+  "devDependencies": {
+    "@angular/build": "20.3.40",
+    "@angular/cli": "20.3.40",
+    "@angular/compiler-cli": "20.3.34",
+    "typescript": "5.8.3"
+  }
+}

compat/v20/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "paths": {
+      "@angular/core": ["./node_modules/@angular/core"],
+      "lib-dist": ["../../dist/lib"]
+    }
+  },
+  "include": ["*.ts"]
+}

compat/v21/app.component.ts

@@ -3,7 +3,6 @@ import { AngularMaterialRuntimeTheme } from 'lib-dist';
 
 @Component({
   selector: 'app-root',
-  standalone: true,
   template: '<h1>Test</h1>',
 })
 export class AppComponent {

compat/v22/app.component.ts

@@ -3,7 +3,6 @@ import { AngularMaterialRuntimeTheme } from 'lib-dist';
 
 @Component({
   selector: 'app-root',
-  standalone: true,
   template: '<h1>Test</h1>',
 })
 export class AppComponent {