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
@@ -7,48 +7,56 @@
 @include mat.core();
 
 $mat-openvidu: (
-    50: #eaeaea,
+  50: #eaeaea,
-    100: #cacaca,
+  100: #cacaca,
-    200: #a6a6a6,
+  200: #a6a6a6,
-    300: #828282,
+  300: #828282,
-    400: #686868,
+  400: #686868,
-    500: #4d4d4d,
+  500: #4d4d4d,
-    600: #464646,
+  600: #464646,
-    700: #3d3d3d,
+  700: #3d3d3d,
-    800: #343434,
+  800: #343434,
-    900: #252525,
+  900: #252525,
-    A100: #83E9B1,
+  A100: #83e9b1,
-    A200: #06D362,
+  A200: #06d362,
-    A400: #04C850,
+  A400: #04c850,
-    A700: #02B734,
+  A700: #02b734,
-    contrast: (50 : #fff9e0,
+  contrast: (
-        100 : #fff0b3,
+    50: #fff9e0,
-        200 : #ffe680,
+    100: #fff0b3,
-        300 : #ffdb4d,
+    200: #ffe680,
-        400 : #ffd426,
+    300: #ffdb4d,
-        500 : #ffcc00,
+    400: #ffd426,
-        600 : #ffc700,
+    500: #ffcc00,
-        700 : #ffc000,
+    600: #ffc700,
-        800 : #ffb900,
+    700: #ffc000,
-        900 : #ffad00,
+    800: #ffb900,
-        A100 : #ffffff,
+    900: #ffad00,
-        A200 : #fffaf2,
+    A100: #ffffff,
-        A400 : #ffe8bf,
+    A200: #fffaf2,
-        A700 : #ffdfa6,
+    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-primary: mat.m2-define-palette($mat-openvidu);
-$openvidu-accent: mat.define-palette($mat-openvidu, A200, A100, A400);
+$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.m2-define-light-theme((
-$openvidu-theme: mat.define-light-theme($openvidu-primary, $openvidu-accent, $openvidu-warn);
+ 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,23 +64,25 @@ $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));
+  $field-typography: mat.m2-define-typography-config(
-    @include mat.typography-level($field-typography, 'body-1');
+    $body-1: mat.m2-define-typography-level(13px, 24px, 400),
-    @include mat.form-field-density($density);
+  );
+  @include mat.m2-typography-level($field-typography, "body-1");
+  @include mat.form-field-density($density);
 }
 
 mat-form-field {
-    @include my-mat-form-field-density(-5);
+  @include my-mat-form-field-density(-5);
 }
 
 mat-checkbox {
-    @include mat.checkbox-density(-2);
+  @include mat.checkbox-density(-2);
 }
 
 @include mat.tooltip-density(-1);
 
-$tt-typography: mat.define-typography-config(
+$tt-typography: mat.m2-define-typography-config(
-  $caption: mat.define-typography-level(12px, 1.4, 400),
+  $caption: mat.m2-define-typography-level(12px, 1.4, 400),
 );
 
-@include mat.tooltip-typography($tt-typography)
+@include mat.tooltip-typography($tt-typography);