ov-components: Updated testapp to Angular 20

openvidu-components-angular/angular.json

@@ -153,5 +153,31 @@
 	},
 	"cli": {
 		"analytics": false
+  },
+  "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": "."
+    }
   }
 }

openvidu-components-angular/package.json

@@ -1,14 +1,14 @@
 {
   "dependencies": {
-    "@angular/animations": "19.2.15",
+    "@angular/animations": "20.3.4",
-    "@angular/cdk": "19.2.19",
+    "@angular/cdk": "20.2.8",
-    "@angular/common": "19.2.15",
+    "@angular/common": "20.3.4",
-    "@angular/core": "19.2.15",
+    "@angular/core": "20.3.4",
-    "@angular/forms": "19.2.15",
+    "@angular/forms": "20.3.4",
-    "@angular/material": "19.2.19",
+    "@angular/material": "20.2.8",
-    "@angular/platform-browser": "19.2.15",
+    "@angular/platform-browser": "20.3.4",
-    "@angular/platform-browser-dynamic": "19.2.15",
+    "@angular/platform-browser-dynamic": "20.3.4",
-    "@angular/router": "19.2.15",
+    "@angular/router": "20.3.4",
     "@livekit/track-processors": "^0.5.6",
     "@types/dom-mediacapture-transform": "^0.1.11",
     "autolinker": "4.0.0",
@@ -18,10 +18,10 @@
     "zone.js": "^0.15.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "19.2.17",
+    "@angular-devkit/build-angular": "20.3.5",
-    "@angular/cli": "19.2.17",
+    "@angular/cli": "20.3.5",
-    "@angular/compiler": "19.2.15",
+    "@angular/compiler": "20.3.4",
-    "@angular/compiler-cli": "19.2.15",
+    "@angular/compiler-cli": "20.3.4",
     "@compodoc/compodoc": "^1.1.25",
     "@types/jasmine": "^5.1.4",
     "@types/node": "20.12.14",
@@ -48,7 +48,7 @@
     "karma-mocha-reporter": "2.2.5",
     "karma-notify-reporter": "1.3.0",
     "lint-staged": "^15.2.10",
-    "ng-packagr": "19.2.2",
+    "ng-packagr": "20.3.0",
     "npm-watch": "^0.13.0",
     "pixelmatch": "^7.1.0",
     "pngjs": "^7.0.0",

openvidu-components-angular/projects/openvidu-components-angular/src/lib/admin/admin-login/admin-login.component.scss

@@ -32,5 +32,5 @@
 }
 
 ::ng-deep .mat-mdc-progress-spinner {
-	--mdc-circular-progress-active-indicator-color: var(--ov-accent-action-color);
+	--mat-progress-spinner-active-indicator-color: var(--ov-accent-action-color);
 }

openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/captions/captions.component.scss

@@ -43,7 +43,7 @@ mat-spinner {
 }
 
 ::ng-deep .mat-mdc-progress-spinner {
-	--mdc-circular-progress-active-indicator-color: var(--ov-accent-action-color);
+	--mat-progress-spinner-active-indicator-color: var(--ov-accent-action-color);
 }
 
 /*

openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.scss

@@ -306,8 +306,8 @@
 	}
 
 	::ng-deep .mat-mdc-list-base {
-		--mdc-list-list-item-hover-label-text-color: unset;
+		--mat-list-list-item-hover-label-text-color: unset;
-		--mdc-list-list-item-hover-leading-icon-color: unset;
+		--mat-list-list-item-hover-leading-icon-color: unset;
 		padding: 0;
 	}
 

openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/settings-panel/settings-panel.component.scss

@@ -208,7 +208,7 @@
 
 	// Remove focus state layer
 	.mat-mdc-list-base {
-		--mdc-list-list-item-focus-state-layer-color: transparent !important;
+		--mat-list-list-item-focus-state-layer-color: transparent !important;
 	}
 
 	// Language selector styling

openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.scss

@@ -75,7 +75,7 @@
 				}
 
 				.mat-mdc-progress-spinner {
-					--mdc-circular-progress-active-indicator-color: var(--ov-secondary-action-color, #4285f4);
+					--mat-progress-spinner-active-indicator-color: var(--ov-secondary-action-color, #4285f4);
 				}
 			}
 		}

openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/videoconference/videoconference.component.scss

@@ -26,7 +26,7 @@
 }
 
 ::ng-deep .mat-mdc-progress-spinner {
-	--mdc-circular-progress-active-indicator-color: var(--ov-accent-action-color);
+	--mat-progress-spinner-active-indicator-color: var(--ov-accent-action-color);
 }
 
 /* Private css variables */

openvidu-components-angular/projects/openvidu-components-angular/src/lib/services/config/global-config.service.ts

@@ -1,5 +1,5 @@
-import { DOCUMENT } from '@angular/common';
+
-import { Inject, Injectable } from '@angular/core';
+import { Inject, Injectable, DOCUMENT } from '@angular/core';
 import { ParticipantFactoryFunction, OpenViduComponentsConfig } from '../../config/openvidu-components-angular.config';
 
 /**

openvidu-components-angular/projects/openvidu-components-angular/tsconfig.lib.json

@@ -5,8 +5,11 @@
     "outDir": "../../dist/openvidu-components-angular",
     "module": "esnext",
     "target": "ES2021",
-		"moduleResolution": "node",
+    "moduleResolution": "bundler",
-		"lib": ["ES2021", "DOM"],
+    "lib": [
+      "ES2021",
+      "DOM"
+    ],
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "declaration": true,
@@ -14,7 +17,10 @@
     "declarationMap": true,
     "inlineSources": true,
     "resolveJsonModule": true,
-		"types": ["node", "dom-mediacapture-transform"],
+    "types": [
+      "node",
+      "dom-mediacapture-transform"
+    ],
     "allowSyntheticDefaultImports": true
   },
 	"exclude": ["node_modules", "src/test.ts", "**/*.spec.ts", "**/*.mock.ts"]

openvidu-components-angular/projects/openvidu-components-angular/tsconfig.spec.json

@@ -3,13 +3,19 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "outDir": "../../out-tsc/spec",
-    "lib": ["ES2021", "DOM"],
+    "lib": [
-    "types": ["jasmine", "node", "dom-mediacapture-transform"],
+      "ES2021",
-    "moduleResolution": "node",
+      "DOM"
+    ],
+    "types": [
+      "jasmine",
+      "node",
+      "dom-mediacapture-transform"
+    ],
+    "moduleResolution": "bundler",
     "experimentalDecorators": true,
     "resolveJsonModule": true,
-    "skipDefaultLibCheck": true // Livekit track processors fails with typescript types checking
+    "skipDefaultLibCheck": true
-    //"skipLibCheck": true // Livekit track processors fails with typescript types checking
   },
   "files": [
     "src/test.ts"