openvidu-testapp: update Angular Material 18

openvidu-testapp/package.json

@@ -12,12 +12,12 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^18.2.13",
-    "@angular/cdk": "^17.3.10",
+    "@angular/cdk": "^18.2.14",
     "@angular/common": "^18.2.13",
     "@angular/compiler": "^18.2.13",
     "@angular/core": "^18.2.13",
     "@angular/forms": "^18.2.13",
-    "@angular/material": "^17.3.10",
+    "@angular/material": "^18.2.14",
     "@angular/platform-browser": "^18.2.13",
     "@angular/platform-browser-dynamic": "^18.2.13",
     "@angular/router": "^18.2.13",

openvidu-testapp/src/app/components/test-scenarios/test-scenarios.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { TestScenariosComponent } from './test-scenarios.component';
 
@@ -6,7 +6,7 @@ describe('TestScenariosComponent', () => {
   let component: TestScenariosComponent;
   let fixture: ComponentFixture<TestScenariosComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ TestScenariosComponent ]
     })

openvidu-testapp/src/app/components/test-scenarios/test-scenarios.component.ts

@@ -24,7 +24,7 @@ import {
 } from 'livekit-client';
 import { LivekitParamsService } from 'src/app/services/livekit-params.service';
 import { RoomApiService } from 'src/app/services/room-api.service';
-import * as stringify from 'json-stringify-safe';
+import stringify from 'json-stringify-safe';
 import { MatDialog } from '@angular/material/dialog';
 import { OptionsDialogComponent } from '../dialogs/options-dialog/options-dialog.component';
 

openvidu-testapp/src/app/components/test-sessions/test-sessions.component.ts

@@ -2,7 +2,7 @@ import { animate, style, transition, trigger } from '@angular/animations';
 import { Component } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { TestFeedService } from 'src/app/services/test-feed.service';
-import * as stringify from 'json-stringify-safe';
+import stringify from 'json-stringify-safe';
 
 export interface RoomConf {
   subscriber: boolean;

openvidu-testapp/src/openvidu-theme.scss

@@ -1,4 +1,4 @@
-@use '@angular/material' as mat;
+@use "@angular/material" as mat;
 // Plus imports for other components in your app.
 
 // Include the common styles for Angular Material. We include this here so that you only
@@ -17,11 +17,12 @@ $mat-openvidu: (
   700: #3d3d3d,
   800: #343434,
   900: #252525,
-    A100: #83E9B1,
-    A200: #06D362,
-    A400: #04C850,
-    A700: #02B734,
-    contrast: (50 : #fff9e0,
+  A100: #83e9b1,
+  A200: #06d362,
+  A400: #04c850,
+  A700: #02b734,
+  contrast: (
+    50: #fff9e0,
     100: #fff0b3,
     200: #ffe680,
     300: #ffdb4d,
@@ -35,20 +36,27 @@ $mat-openvidu: (
     A200: #fffaf2,
     A400: #ffe8bf,
     A700: #ffdfa6,
-    )
+  ),
 );
 
 // Define the palettes for your theme using the Material Design palettes available in palette.scss
 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
 // hue.
-$openvidu-primary: mat.define-palette($mat-openvidu);
-$openvidu-accent: mat.define-palette($mat-openvidu, A200, A100, A400);
+$openvidu-primary: mat.m2-define-palette($mat-openvidu);
+$openvidu-accent: mat.m2-define-palette($mat-openvidu, A200, A100, A400);
 
 // The warn palette is optional (defaults to red).
-$openvidu-warn: mat.define-palette(mat.$red-palette);
+$openvidu-warn: mat.m2-define-palette(mat.$m2-red-palette);
 
-// Create the theme object (a Sass map containing all of the palettes).
-$openvidu-theme: mat.define-light-theme($openvidu-primary, $openvidu-accent, $openvidu-warn);
+$openvidu-theme: mat.m2-define-light-theme((
+ color: (
+   primary: $openvidu-primary,
+   accent: $openvidu-accent,
+   warn: $openvidu-warn,
+ ),
+ typography: mat.m2-define-typography-config(),
+ density: 0,
+));
 
 // Include theme styles for core and each component used in your app.
 // Alternatively, you can import and @include the theme mixins for each component
@@ -56,8 +64,10 @@ $openvidu-theme: mat.define-light-theme($openvidu-primary, $openvidu-accent, $op
 @include mat.all-component-themes($openvidu-theme);
 
 @mixin my-mat-form-field-density($density) {
-    $field-typography: mat.define-typography-config($body-1: mat.define-typography-level(13px, 24px, 400));
-    @include mat.typography-level($field-typography, 'body-1');
+  $field-typography: mat.m2-define-typography-config(
+    $body-1: mat.m2-define-typography-level(13px, 24px, 400),
+  );
+  @include mat.m2-typography-level($field-typography, "body-1");
   @include mat.form-field-density($density);
 }
 
@@ -71,8 +81,8 @@ mat-checkbox {
 
 @include mat.tooltip-density(-1);
 
-$tt-typography: mat.define-typography-config(
-  $caption: mat.define-typography-level(12px, 1.4, 400),
+$tt-typography: mat.m2-define-typography-config(
+  $caption: mat.m2-define-typography-level(12px, 1.4, 400),
 );
 
-@include mat.tooltip-typography($tt-typography)
+@include mat.tooltip-typography($tt-typography);