build: update typings to support Node v18 (#1424)

Author: CaerusKaru

projects/apps/demo-app/src/styles.scss

@@ -1,5 +1,5 @@
 /* You can add global styles to this file, and also import other style files */
-@import '~@angular/material/prebuilt-themes/indigo-pink.css';
+@import '@angular/material/prebuilt-themes/indigo-pink.css';
 
 body {
   margin: 50px;

projects/libs/flex-layout/core/match-media/match-media.ts

@@ -187,23 +187,21 @@ function buildQueryCss(mediaQueries: string[], _document: Document) {
   }
 }
 
+function buildMockMql(query: string) {
+  const et: any = new EventTarget();
+  et.matches = query === 'all' || query === '';
+  et.media = query;
+  et.addListener = () => {};
+  et.removeListener = () => {};
+  et.addEventListener = () => {};
+  et.dispatchEvent = () => false;
+  et.onchange = null;
+
+  return et as MediaQueryList;
+}
+
 function constructMql(query: string, isBrowser: boolean): MediaQueryList {
   const canListen = isBrowser && !!(<Window>window).matchMedia('all').addListener;
 
-  return canListen ? (<Window>window).matchMedia(query) : {
-    matches: query === 'all' || query === '',
-    media: query,
-    addListener: () => {
-    },
-    removeListener: () => {
-    },
-    onchange: null,
-    addEventListener() {
-    },
-    removeEventListener() {
-    },
-    dispatchEvent() {
-      return false;
-    }
-  } as MediaQueryList;
+  return canListen ? (<Window>window).matchMedia(query) : buildMockMql(query);
 }

projects/libs/flex-layout/core/match-media/mock/mock-match-media.ts

@@ -165,7 +165,7 @@ export class MockMatchMedia extends MatchMedia {
  * - supports manual activation to simulate mediaQuery matching
  * - manages listeners
  */
-export class MockMediaQueryList implements MediaQueryList {
+export class MockMediaQueryList extends EventTarget implements MediaQueryList {
   private _isActive = false;
   private _listeners: MediaQueryListListener[] = [];
 
@@ -178,6 +178,7 @@ export class MockMediaQueryList implements MediaQueryList {
   }
 
   constructor(private _mediaQuery: string) {
+    super();
   }
 
   /**
@@ -228,31 +229,7 @@ export class MockMediaQueryList implements MediaQueryList {
   removeListener(_: MediaQueryListListener | null) {
   }
 
-  addEventListener<K extends keyof MediaQueryListEventMap>(
-      _: K,
-      __: (this: MediaQueryList,
-      ev: MediaQueryListEventMap[K]) => any,
-      ___?: boolean | AddEventListenerOptions): void;
-
-  addEventListener(
-      _: string,
-      __: EventListenerOrEventListenerObject,
-      ___?: boolean | AddEventListenerOptions) {
-  }
-
-  removeEventListener<K extends keyof MediaQueryListEventMap>(
-      _: K,
-      __: (this: MediaQueryList,
-      ev: MediaQueryListEventMap[K]) => any,
-      ___?: boolean | EventListenerOptions): void;
-
-  removeEventListener(
-      _: string,
-      __: EventListenerOrEventListenerObject,
-      ___?: boolean | EventListenerOptions) {
-  }
-
-  dispatchEvent(_: Event): boolean {
+  override dispatchEvent(_: Event): boolean {
     return false;
   }
 

projects/libs/flex-layout/server/server-match-media.ts

@@ -20,7 +20,7 @@ import {
  * - supports manual activation to simulate mediaQuery matching
  * - manages listeners
  */
-export class ServerMediaQueryList implements MediaQueryList {
+export class ServerMediaQueryList extends EventTarget implements MediaQueryList {
   private _listeners: MediaQueryListListener[] = [];
 
   get matches(): boolean {
@@ -31,7 +31,9 @@ export class ServerMediaQueryList implements MediaQueryList {
     return this._mediaQuery;
   }
 
-  constructor(private _mediaQuery: string, private _isActive = false) {}
+  constructor(private _mediaQuery: string, private _isActive = false) {
+    super();
+  }
 
   /**
    * Destroy the current list by deactivating the
@@ -81,13 +83,13 @@ export class ServerMediaQueryList implements MediaQueryList {
   removeListener() {
   }
 
-  addEventListener() {
+  override addEventListener() {
   }
 
-  removeEventListener() {
+  override removeEventListener() {
   }
 
-  dispatchEvent(_: Event): boolean {
+  override dispatchEvent(_: Event): boolean {
     return false;
   }