@angular/cdk 10.1.1 → 10.2.0

package/fesm2015/layout.js

@@ -1,8 +1,8 @@
 import { NgModule, ɵɵdefineInjectable, ɵɵinject, Injectable, NgZone } from '@angular/core';
-import { Platform } from '@angular/cdk/platform';
+import { coerceArray } from '@angular/cdk/coercion';
 import { Subject, combineLatest, concat, Observable } from 'rxjs';
 import { take, skip, debounceTime, map, startWith, takeUntil } from 'rxjs/operators';
-import { coerceArray } from '@angular/cdk/coercion';
+import { Platform } from '@angular/cdk/platform';
 
 /**
  * @license
@@ -137,14 +137,14 @@ class BreakpointObserver {
         let stateObservable = combineLatest(observables);
         // Emit the first state immediately, and then debounce the subsequent emissions.
         stateObservable = concat(stateObservable.pipe(take(1)), stateObservable.pipe(skip(1), debounceTime(0)));
-        return stateObservable.pipe(map((breakpointStates) => {
+        return stateObservable.pipe(map(breakpointStates => {
             const response = {
                 matches: false,
                 breakpoints: {},
             };
-            breakpointStates.forEach((state) => {
-                response.matches = response.matches || state.matches;
-                response.breakpoints[state.query] = state.matches;
+            breakpointStates.forEach(({ matches, query }) => {
+                response.matches = response.matches || matches;
+                response.breakpoints[query] = matches;
             });
             return response;
         }));
@@ -168,7 +168,7 @@ class BreakpointObserver {
             return () => {
                 mql.removeListener(handler);
             };
-        }).pipe(startWith(mql), map((nextMql) => ({ query, matches: nextMql.matches })), takeUntil(this._destroySubject));
+        }).pipe(startWith(mql), map(({ matches }) => ({ query, matches })), takeUntil(this._destroySubject));
         // Add the MediaQueryList to the set of queries.
         const output = { observable: queryObservable, mql };
         this._queries.set(query, output);
@@ -188,7 +188,7 @@ BreakpointObserver.ctorParameters = () => [
  * separated.
  */
 function splitQueries(queries) {
-    return queries.map((query) => query.split(','))
+    return queries.map(query => query.split(','))
         .reduce((a1, a2) => a1.concat(a2))
         .map(query => query.trim());
 }

package/fesm2015/layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"layout.js","sources":["../../../../../../src/cdk/layout/layout-module.ts","../../../../../../src/cdk/layout/media-matcher.ts","../../../../../../src/cdk/layout/breakpoints-observer.ts","../../../../../../src/cdk/layout/breakpoints.ts","../../../../../../src/cdk/layout/public-api.ts","../../../../../../src/cdk/layout/index.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nimport {NgModule} from '@angular/core';\n\n\n@NgModule({})\nexport class LayoutModule {}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nimport {Injectable} from '@angular/core';\nimport {Platform} from '@angular/cdk/platform';\n\n/** Global registry for all dynamically-created, injected media queries. */\nconst mediaQueriesForWebkitCompatibility: Set<string> = new Set<string>();\n\n/** Style tag that holds all of the dynamically-created media queries. */\nlet mediaQueryStyleNode: HTMLStyleElement | undefined;\n\n/** A utility for calling matchMedia queries. */\n@Injectable({providedIn: 'root'})\nexport class MediaMatcher {\n  /** The internal matchMedia method to return back a MediaQueryList like object. */\n  private _matchMedia: (query: string) => MediaQueryList;\n\n  constructor(private _platform: Platform) {\n    this._matchMedia = this._platform.isBrowser && window.matchMedia ?\n      // matchMedia is bound to the window scope intentionally as it is an illegal invocation to\n      // call it from a different scope.\n      window.matchMedia.bind(window) :\n      noopMatchMedia;\n  }\n\n  /**\n   * Evaluates the given media query and returns the native MediaQueryList from which results\n   * can be retrieved.\n   * Confirms the layout engine will trigger for the selector query provided and returns the\n   * MediaQueryList for the query provided.\n   */\n  matchMedia(query: string): MediaQueryList {\n    if (this._platform.WEBKIT) {\n      createEmptyStyleRule(query);\n    }\n    return this._matchMedia(query);\n  }\n}\n\n/**\n * For Webkit engines that only trigger the MediaQueryListListener when\n * there is at least one CSS selector for the respective media query.\n */\nfunction createEmptyStyleRule(query: string) {\n  if (mediaQueriesForWebkitCompatibility.has(query)) {\n    return;\n  }\n\n  try {\n    if (!mediaQueryStyleNode) {\n      mediaQueryStyleNode = document.createElement('style');\n      mediaQueryStyleNode.setAttribute('type', 'text/css');\n      document.head!.appendChild(mediaQueryStyleNode);\n    }\n\n    if (mediaQueryStyleNode.sheet) {\n      (mediaQueryStyleNode.sheet as CSSStyleSheet)\n          .insertRule(`@media ${query} {.fx-query-test{ }}`, 0);\n      mediaQueriesForWebkitCompatibility.add(query);\n    }\n  } catch (e) {\n    console.error(e);\n  }\n}\n\n/** No-op matchMedia replacement for non-browser platforms. */\nfunction noopMatchMedia(query: string): MediaQueryList {\n  // Use `as any` here to avoid adding additional necessary properties for\n  // the noop matcher.\n  return {\n    matches: query === 'all' || query === '',\n    media: query,\n    addListener: () => {},\n    removeListener: () => {}\n  } as any;\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {Injectable, NgZone, OnDestroy} from '@angular/core';\nimport {MediaMatcher} from './media-matcher';\nimport {combineLatest, concat, Observable, Subject, Observer} from 'rxjs';\nimport {debounceTime, map, skip, startWith, take, takeUntil} from 'rxjs/operators';\nimport {coerceArray} from '@angular/cdk/coercion';\n\n\n/** The current state of a layout breakpoint. */\nexport interface BreakpointState {\n  /** Whether the breakpoint is currently matching. */\n  matches: boolean;\n  /**\n   * A key boolean pair for each query provided to the observe method,\n   * with its current matched state.\n   */\n  breakpoints: {\n    [key: string]: boolean;\n  };\n}\n\n/** The current state of a layout breakpoint. */\ninterface InternalBreakpointState {\n  /** Whether the breakpoint is currently matching. */\n  matches: boolean;\n  /** The media query being to be matched */\n  query: string;\n}\n\ninterface Query {\n  observable: Observable<InternalBreakpointState>;\n  mql: MediaQueryList;\n}\n\n/** Utility for checking the matching state of @media queries. */\n@Injectable({providedIn: 'root'})\nexport class BreakpointObserver implements OnDestroy {\n  /**  A map of all media queries currently being listened for. */\n  private _queries = new Map<string, Query>();\n  /** A subject for all other observables to takeUntil based on. */\n  private _destroySubject = new Subject<void>();\n\n  constructor(private _mediaMatcher: MediaMatcher, private _zone: NgZone) {}\n\n  /** Completes the active subject, signalling to all other observables to complete. */\n  ngOnDestroy() {\n    this._destroySubject.next();\n    this._destroySubject.complete();\n  }\n\n  /**\n   * Whether one or more media queries match the current viewport size.\n   * @param value One or more media queries to check.\n   * @returns Whether any of the media queries match.\n   */\n  isMatched(value: string | string[]): boolean {\n    const queries = splitQueries(coerceArray(value));\n    return queries.some(mediaQuery => this._registerQuery(mediaQuery).mql.matches);\n  }\n\n  /**\n   * Gets an observable of results for the given queries that will emit new results for any changes\n   * in matching of the given queries.\n   * @param value One or more media queries to check.\n   * @returns A stream of matches for the given queries.\n   */\n  observe(value: string | string[]): Observable<BreakpointState> {\n    const queries = splitQueries(coerceArray(value));\n    const observables = queries.map(query => this._registerQuery(query).observable);\n\n    let stateObservable = combineLatest(observables);\n    // Emit the first state immediately, and then debounce the subsequent emissions.\n    stateObservable = concat(\n      stateObservable.pipe(take(1)),\n      stateObservable.pipe(skip(1), debounceTime(0)));\n    return stateObservable.pipe(map((breakpointStates: InternalBreakpointState[]) => {\n      const response: BreakpointState = {\n        matches: false,\n        breakpoints: {},\n      };\n      breakpointStates.forEach((state: InternalBreakpointState) => {\n        response.matches = response.matches || state.matches;\n        response.breakpoints[state.query] = state.matches;\n      });\n      return response;\n    }));\n  }\n\n  /** Registers a specific query to be listened for. */\n  private _registerQuery(query: string): Query {\n    // Only set up a new MediaQueryList if it is not already being listened for.\n    if (this._queries.has(query)) {\n      return this._queries.get(query)!;\n    }\n\n    const mql: MediaQueryList = this._mediaMatcher.matchMedia(query);\n\n    // Create callback for match changes and add it is as a listener.\n    const queryObservable = new Observable<MediaQueryList>((observer: Observer<MediaQueryList>) => {\n      // Listener callback methods are wrapped to be placed back in ngZone. Callbacks must be placed\n      // back into the zone because matchMedia is only included in Zone.js by loading the\n      // webapis-media-query.js file alongside the zone.js file.  Additionally, some browsers do not\n      // have MediaQueryList inherit from EventTarget, which causes inconsistencies in how Zone.js\n      // patches it.\n      const handler = (e: any) => this._zone.run(() => observer.next(e));\n      mql.addListener(handler);\n\n      return () => {\n        mql.removeListener(handler);\n      };\n    }).pipe(\n      startWith(mql),\n      map((nextMql: MediaQueryList) => ({query, matches: nextMql.matches})),\n      takeUntil(this._destroySubject)\n    );\n\n    // Add the MediaQueryList to the set of queries.\n    const output = {observable: queryObservable, mql};\n    this._queries.set(query, output);\n    return output;\n  }\n}\n\n/**\n * Split each query string into separate query strings if two queries are provided as comma\n * separated.\n */\nfunction splitQueries(queries: string[]): string[] {\n  return queries.map((query: string) => query.split(','))\n                .reduce((a1: string[], a2: string[]) => a1.concat(a2))\n                .map(query => query.trim());\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n// PascalCase is being used as Breakpoints is used like an enum.\n// tslint:disable-next-line:variable-name\nexport const Breakpoints = {\n  XSmall: '(max-width: 599.99px)',\n  Small: '(min-width: 600px) and (max-width: 959.99px)',\n  Medium: '(min-width: 960px) and (max-width: 1279.99px)',\n  Large: '(min-width: 1280px) and (max-width: 1919.99px)',\n  XLarge: '(min-width: 1920px)',\n\n  Handset: '(max-width: 599.99px) and (orientation: portrait), ' +\n           '(max-width: 959.99px) and (orientation: landscape)',\n  Tablet: '(min-width: 600px) and (max-width: 839.99px) and (orientation: portrait), ' +\n          '(min-width: 960px) and (max-width: 1279.99px) and (orientation: landscape)',\n  Web: '(min-width: 840px) and (orientation: portrait), ' +\n       '(min-width: 1280px) and (orientation: landscape)',\n\n  HandsetPortrait: '(max-width: 599.99px) and (orientation: portrait)',\n  TabletPortrait: '(min-width: 600px) and (max-width: 839.99px) and (orientation: portrait)',\n  WebPortrait: '(min-width: 840px) and (orientation: portrait)',\n\n  HandsetLandscape: '(max-width: 959.99px) and (orientation: landscape)',\n  TabletLandscape: '(min-width: 960px) and (max-width: 1279.99px) and (orientation: landscape)',\n  WebLandscape: '(min-width: 1280px) and (orientation: landscape)',\n};\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nexport {LayoutModule} from './layout-module';\nexport {BreakpointObserver, BreakpointState} from './breakpoints-observer';\nexport {Breakpoints} from './breakpoints';\nexport {MediaMatcher} from './media-matcher';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"layout.js","sources":["../../../../../../src/cdk/layout/layout-module.ts","../../../../../../src/cdk/layout/media-matcher.ts","../../../../../../src/cdk/layout/breakpoints-observer.ts","../../../../../../src/cdk/layout/breakpoints.ts","../../../../../../src/cdk/layout/public-api.ts","../../../../../../src/cdk/layout/index.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nimport {NgModule} from '@angular/core';\n\n\n@NgModule({})\nexport class LayoutModule {}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nimport {Injectable} from '@angular/core';\nimport {Platform} from '@angular/cdk/platform';\n\n/** Global registry for all dynamically-created, injected media queries. */\nconst mediaQueriesForWebkitCompatibility: Set<string> = new Set<string>();\n\n/** Style tag that holds all of the dynamically-created media queries. */\nlet mediaQueryStyleNode: HTMLStyleElement | undefined;\n\n/** A utility for calling matchMedia queries. */\n@Injectable({providedIn: 'root'})\nexport class MediaMatcher {\n  /** The internal matchMedia method to return back a MediaQueryList like object. */\n  private _matchMedia: (query: string) => MediaQueryList;\n\n  constructor(private _platform: Platform) {\n    this._matchMedia = this._platform.isBrowser && window.matchMedia ?\n      // matchMedia is bound to the window scope intentionally as it is an illegal invocation to\n      // call it from a different scope.\n      window.matchMedia.bind(window) :\n      noopMatchMedia;\n  }\n\n  /**\n   * Evaluates the given media query and returns the native MediaQueryList from which results\n   * can be retrieved.\n   * Confirms the layout engine will trigger for the selector query provided and returns the\n   * MediaQueryList for the query provided.\n   */\n  matchMedia(query: string): MediaQueryList {\n    if (this._platform.WEBKIT) {\n      createEmptyStyleRule(query);\n    }\n    return this._matchMedia(query);\n  }\n}\n\n/**\n * For Webkit engines that only trigger the MediaQueryListListener when\n * there is at least one CSS selector for the respective media query.\n */\nfunction createEmptyStyleRule(query: string) {\n  if (mediaQueriesForWebkitCompatibility.has(query)) {\n    return;\n  }\n\n  try {\n    if (!mediaQueryStyleNode) {\n      mediaQueryStyleNode = document.createElement('style');\n      mediaQueryStyleNode.setAttribute('type', 'text/css');\n      document.head!.appendChild(mediaQueryStyleNode);\n    }\n\n    if (mediaQueryStyleNode.sheet) {\n      (mediaQueryStyleNode.sheet as CSSStyleSheet)\n          .insertRule(`@media ${query} {.fx-query-test{ }}`, 0);\n      mediaQueriesForWebkitCompatibility.add(query);\n    }\n  } catch (e) {\n    console.error(e);\n  }\n}\n\n/** No-op matchMedia replacement for non-browser platforms. */\nfunction noopMatchMedia(query: string): MediaQueryList {\n  // Use `as any` here to avoid adding additional necessary properties for\n  // the noop matcher.\n  return {\n    matches: query === 'all' || query === '',\n    media: query,\n    addListener: () => {},\n    removeListener: () => {}\n  } as any;\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {coerceArray} from '@angular/cdk/coercion';\nimport {Injectable, NgZone, OnDestroy} from '@angular/core';\nimport {combineLatest, concat, Observable, Observer, Subject} from 'rxjs';\nimport {debounceTime, map, skip, startWith, take, takeUntil} from 'rxjs/operators';\nimport {MediaMatcher} from './media-matcher';\n\n\n/** The current state of a layout breakpoint. */\nexport interface BreakpointState {\n  /** Whether the breakpoint is currently matching. */\n  matches: boolean;\n  /**\n   * A key boolean pair for each query provided to the observe method,\n   * with its current matched state.\n   */\n  breakpoints: {\n    [key: string]: boolean;\n  };\n}\n\n/** The current state of a layout breakpoint. */\ninterface InternalBreakpointState {\n  /** Whether the breakpoint is currently matching. */\n  matches: boolean;\n  /** The media query being to be matched */\n  query: string;\n}\n\ninterface Query {\n  observable: Observable<InternalBreakpointState>;\n  mql: MediaQueryList;\n}\n\n/** Utility for checking the matching state of @media queries. */\n@Injectable({providedIn: 'root'})\nexport class BreakpointObserver implements OnDestroy {\n  /**  A map of all media queries currently being listened for. */\n  private _queries = new Map<string, Query>();\n  /** A subject for all other observables to takeUntil based on. */\n  private _destroySubject = new Subject<void>();\n\n  constructor(private _mediaMatcher: MediaMatcher, private _zone: NgZone) {}\n\n  /** Completes the active subject, signalling to all other observables to complete. */\n  ngOnDestroy() {\n    this._destroySubject.next();\n    this._destroySubject.complete();\n  }\n\n  /**\n   * Whether one or more media queries match the current viewport size.\n   * @param value One or more media queries to check.\n   * @returns Whether any of the media queries match.\n   */\n  isMatched(value: string | readonly string[]): boolean {\n    const queries = splitQueries(coerceArray(value));\n    return queries.some(mediaQuery => this._registerQuery(mediaQuery).mql.matches);\n  }\n\n  /**\n   * Gets an observable of results for the given queries that will emit new results for any changes\n   * in matching of the given queries.\n   * @param value One or more media queries to check.\n   * @returns A stream of matches for the given queries.\n   */\n  observe(value: string | readonly string[]): Observable<BreakpointState> {\n    const queries = splitQueries(coerceArray(value));\n    const observables = queries.map(query => this._registerQuery(query).observable);\n\n    let stateObservable = combineLatest(observables);\n    // Emit the first state immediately, and then debounce the subsequent emissions.\n    stateObservable = concat(\n      stateObservable.pipe(take(1)),\n      stateObservable.pipe(skip(1), debounceTime(0)));\n    return stateObservable.pipe(map(breakpointStates => {\n      const response: BreakpointState = {\n        matches: false,\n        breakpoints: {},\n      };\n      breakpointStates.forEach(({matches, query}) => {\n        response.matches = response.matches || matches;\n        response.breakpoints[query] = matches;\n      });\n      return response;\n    }));\n  }\n\n  /** Registers a specific query to be listened for. */\n  private _registerQuery(query: string): Query {\n    // Only set up a new MediaQueryList if it is not already being listened for.\n    if (this._queries.has(query)) {\n      return this._queries.get(query)!;\n    }\n\n    const mql = this._mediaMatcher.matchMedia(query);\n\n    // Create callback for match changes and add it is as a listener.\n    const queryObservable = new Observable((observer: Observer<MediaQueryList>) => {\n      // Listener callback methods are wrapped to be placed back in ngZone. Callbacks must be placed\n      // back into the zone because matchMedia is only included in Zone.js by loading the\n      // webapis-media-query.js file alongside the zone.js file.  Additionally, some browsers do not\n      // have MediaQueryList inherit from EventTarget, which causes inconsistencies in how Zone.js\n      // patches it.\n      const handler = (e: any) => this._zone.run(() => observer.next(e));\n      mql.addListener(handler);\n\n      return () => {\n        mql.removeListener(handler);\n      };\n    }).pipe(\n      startWith(mql),\n      map(({matches}) => ({query, matches})),\n      takeUntil(this._destroySubject)\n    );\n\n    // Add the MediaQueryList to the set of queries.\n    const output = {observable: queryObservable, mql};\n    this._queries.set(query, output);\n    return output;\n  }\n}\n\n/**\n * Split each query string into separate query strings if two queries are provided as comma\n * separated.\n */\nfunction splitQueries(queries: readonly string[]): readonly string[] {\n  return queries.map(query => query.split(','))\n                .reduce((a1, a2) => a1.concat(a2))\n                .map(query => query.trim());\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n// PascalCase is being used as Breakpoints is used like an enum.\n// tslint:disable-next-line:variable-name\nexport const Breakpoints = {\n  XSmall: '(max-width: 599.99px)',\n  Small: '(min-width: 600px) and (max-width: 959.99px)',\n  Medium: '(min-width: 960px) and (max-width: 1279.99px)',\n  Large: '(min-width: 1280px) and (max-width: 1919.99px)',\n  XLarge: '(min-width: 1920px)',\n\n  Handset: '(max-width: 599.99px) and (orientation: portrait), ' +\n           '(max-width: 959.99px) and (orientation: landscape)',\n  Tablet: '(min-width: 600px) and (max-width: 839.99px) and (orientation: portrait), ' +\n          '(min-width: 960px) and (max-width: 1279.99px) and (orientation: landscape)',\n  Web: '(min-width: 840px) and (orientation: portrait), ' +\n       '(min-width: 1280px) and (orientation: landscape)',\n\n  HandsetPortrait: '(max-width: 599.99px) and (orientation: portrait)',\n  TabletPortrait: '(min-width: 600px) and (max-width: 839.99px) and (orientation: portrait)',\n  WebPortrait: '(min-width: 840px) and (orientation: portrait)',\n\n  HandsetLandscape: '(max-width: 959.99px) and (orientation: landscape)',\n  TabletLandscape: '(min-width: 960px) and (max-width: 1279.99px) and (orientation: landscape)',\n  WebLandscape: '(min-width: 1280px) and (orientation: landscape)',\n};\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nexport {LayoutModule} from './layout-module';\nexport {BreakpointObserver, BreakpointState} from './breakpoints-observer';\nexport {Breakpoints} from './breakpoints';\nexport {MediaMatcher} from './media-matcher';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2015/overlay.js

@@ -7,7 +7,7 @@ import { Directionality, BidiModule } from '@angular/cdk/bidi';
 import { DomPortalOutlet, TemplatePortal, PortalModule } from '@angular/cdk/portal';
 import { Platform } from '@angular/cdk/platform';
 import { Subject, Subscription, merge } from 'rxjs';
-import { take, takeUntil } from 'rxjs/operators';
+import { take, takeUntil, takeWhile } from 'rxjs/operators';
 import { ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';
 
 /**
@@ -114,7 +114,7 @@ class CloseScrollStrategy {
     }
     /** Attaches this scroll strategy to an overlay. */
     attach(overlayRef) {
-        if (this._overlayRef) {
+        if (this._overlayRef && (typeof ngDevMode === 'undefined' || ngDevMode)) {
             throw getMatScrollStrategyAlreadyAttachedError();
         }
         this._overlayRef = overlayRef;
@@ -233,7 +233,7 @@ class RepositionScrollStrategy {
     }
     /** Attaches this scroll strategy to an overlay. */
     attach(overlayRef) {
-        if (this._overlayRef) {
+        if (this._overlayRef && (typeof ngDevMode === 'undefined' || ngDevMode)) {
             throw getMatScrollStrategyAlreadyAttachedError();
         }
         this._overlayRef = overlayRef;
@@ -351,10 +351,6 @@ class OverlayConfig {
          * the `HashLocationStrategy`).
          */
         this.disposeOnNavigation = false;
-        /**
-         * Array of HTML elements clicking on which should not be considered as outside click
-         */
-        this.excludeFromOutsideClick = [];
         if (config) {
             // Use `Iterable` instead of `Array` because TypeScript, as of 3.6.3,
             // loses the array generic type in the `for of`. But we *also* have to use `Array` because
@@ -609,22 +605,22 @@ class OverlayOutsideClickDispatcher extends BaseOverlayDispatcher {
         this._clickListener = (event) => {
             // Get the target through the `composedPath` if possible to account for shadow DOM.
             const target = event.composedPath ? event.composedPath()[0] : event.target;
-            const overlays = this._attachedOverlays;
+            // We copy the array because the original may be modified asynchronously if the
+            // outsidePointerEvents listener decides to detach overlays resulting in index errors inside
+            // the for loop.
+            const overlays = this._attachedOverlays.slice();
             // Dispatch the mouse event to the top overlay which has subscribers to its mouse events.
             // We want to target all overlays for which the click could be considered as outside click.
             // As soon as we reach an overlay for which the click is not outside click we break off
             // the loop.
             for (let i = overlays.length - 1; i > -1; i--) {
                 const overlayRef = overlays[i];
-                if (overlayRef._outsidePointerEvents.observers.length < 1) {
+                if (overlayRef._outsidePointerEvents.observers.length < 1 || !overlayRef.hasAttached()) {
                     continue;
                 }
-                const config = overlayRef.getConfig();
-                const excludeElements = [...config.excludeFromOutsideClick, overlayRef.overlayElement];
-                const isInsideClick = excludeElements.some(e => e.contains(target));
-                // If it is inside click just break - we should do nothing
-                // If it is outside click dispatch the mouse event, and proceed with the next overlay
-                if (isInsideClick) {
+                // If it's a click inside the overlay, just break - we should do nothing
+                // If it's an outside click dispatch the mouse event, and proceed with the next overlay
+                if (overlayRef.overlayElement.contains(target)) {
                     break;
                 }
                 overlayRef._outsidePointerEvents.next(event);
@@ -644,6 +640,7 @@ class OverlayOutsideClickDispatcher extends BaseOverlayDispatcher {
         // tslint:enable: max-line-length
         if (!this._isAttached) {
             this._document.body.addEventListener('click', this._clickListener, true);
+            this._document.body.addEventListener('contextmenu', this._clickListener, true);
             // click event is not fired on iOS. To make element "clickable" we are
             // setting the cursor to pointer
             if (this._platform.IOS && !this._cursorStyleIsSet) {
@@ -658,6 +655,7 @@ class OverlayOutsideClickDispatcher extends BaseOverlayDispatcher {
     detach() {
         if (this._isAttached) {
             this._document.body.removeEventListener('click', this._clickListener, true);
+            this._document.body.removeEventListener('contextmenu', this._clickListener, true);
             if (this._platform.IOS && this._cursorStyleIsSet) {
                 this._document.body.style.cursor = this._cursorOriginalValue;
                 this._cursorStyleIsSet = false;
@@ -862,7 +860,6 @@ class OverlayRef {
         // before attempting to position it, as the position may depend on the size of the rendered
         // content.
         this._ngZone.onStable
-            .asObservable()
             .pipe(take(1))
             .subscribe(() => {
             // The overlay could've been detached before the zone has stabilized.
@@ -963,23 +960,23 @@ class OverlayRef {
     }
     /** Gets an observable that emits when the backdrop has been clicked. */
     backdropClick() {
-        return this._backdropClick.asObservable();
+        return this._backdropClick;
     }
     /** Gets an observable that emits when the overlay has been attached. */
     attachments() {
-        return this._attachments.asObservable();
+        return this._attachments;
     }
     /** Gets an observable that emits when the overlay has been detached. */
     detachments() {
-        return this._detachments.asObservable();
+        return this._detachments;
     }
     /** Gets an observable of keydown events targeted to this overlay. */
     keydownEvents() {
-        return this._keydownEvents.asObservable();
+        return this._keydownEvents;
     }
     /** Gets an observable of pointer events targeted outside this overlay. */
     outsidePointerEvents() {
-        return this._outsidePointerEvents.asObservable();
+        return this._outsidePointerEvents;
     }
     /** Gets the current overlay configuration, which is immutable. */
     getConfig() {
@@ -1170,7 +1167,6 @@ class OverlayRef {
             // might still be animating. This stream helps us avoid interrupting the animation
             // by waiting for the pane to become empty.
             const subscription = this._ngZone.onStable
-                .asObservable()
                 .pipe(takeUntil(merge(this._attachments, this._detachments)))
                 .subscribe(() => {
                 // Needs a couple of checks for the pane and host, because
@@ -1255,7 +1251,7 @@ class FlexibleConnectedPositionStrategy {
         /** Keeps track of the CSS classes that the position strategy has applied on the overlay panel. */
         this._appliedPanelClasses = [];
         /** Observable sequence of position changes. */
-        this.positionChanges = this._positionChanges.asObservable();
+        this.positionChanges = this._positionChanges;
         this.setOrigin(connectedTo);
     }
     /** Ordered list of preferred positions, from most to least desirable. */
@@ -1264,7 +1260,8 @@ class FlexibleConnectedPositionStrategy {
     }
     /** Attaches this position strategy to an overlay. */
     attach(overlayRef) {
-        if (this._overlayRef && overlayRef !== this._overlayRef) {
+        if (this._overlayRef && overlayRef !== this._overlayRef &&
+            (typeof ngDevMode === 'undefined' || ngDevMode)) {
             throw Error('This position strategy is already attached to an overlay');
         }
         this._validatePositions();
@@ -1663,8 +1660,8 @@ class FlexibleConnectedPositionStrategy {
         const viewport = this._viewportRect;
         // Determine how much the overlay goes outside the viewport on each
         // side, which we'll use to decide which direction to push it.
-        const overflowRight = Math.max(start.x + overlay.width - viewport.right, 0);
-        const overflowBottom = Math.max(start.y + overlay.height - viewport.bottom, 0);
+        const overflowRight = Math.max(start.x + overlay.width - viewport.width, 0);
+        const overflowBottom = Math.max(start.y + overlay.height - viewport.height, 0);
         const overflowTop = Math.max(viewport.top - scrollPosition.top - start.y, 0);
         const overflowLeft = Math.max(viewport.left - scrollPosition.left - start.x, 0);
         // Amount by which to push the overlay in each axis such that it remains on-screen.
@@ -2054,17 +2051,19 @@ class FlexibleConnectedPositionStrategy {
     }
     /** Validates that the current position match the expected values. */
     _validatePositions() {
-        if (!this._preferredPositions.length) {
-            throw Error('FlexibleConnectedPositionStrategy: At least one position is required.');
-        }
-        // TODO(crisbeto): remove these once Angular's template type
-        // checking is advanced enough to catch these cases.
-        this._preferredPositions.forEach(pair => {
-            validateHorizontalPosition('originX', pair.originX);
-            validateVerticalPosition('originY', pair.originY);
-            validateHorizontalPosition('overlayX', pair.overlayX);
-            validateVerticalPosition('overlayY', pair.overlayY);
-        });
+        if (typeof ngDevMode === 'undefined' || ngDevMode) {
+            if (!this._preferredPositions.length) {
+                throw Error('FlexibleConnectedPositionStrategy: At least one position is required.');
+            }
+            // TODO(crisbeto): remove these once Angular's template type
+            // checking is advanced enough to catch these cases.
+            this._preferredPositions.forEach(pair => {
+                validateHorizontalPosition('originX', pair.originX);
+                validateVerticalPosition('originY', pair.originY);
+                validateHorizontalPosition('overlayX', pair.overlayX);
+                validateVerticalPosition('overlayY', pair.overlayY);
+            });
+        }
     }
     /** Adds a single CSS class or an array of classes on the overlay panel. */
     _addPanelClasses(cssClasses) {
@@ -2159,14 +2158,7 @@ class ConnectedPositionStrategy {
             .withPush(false)
             .withViewportMargin(0);
         this.withFallbackPosition(originPos, overlayPos);
-    }
-    /** Whether the we're dealing with an RTL context */
-    get _isRtl() {
-        return this._overlayRef.getDirection() === 'rtl';
-    }
-    /** Emits an event when the connection point changes. */
-    get onPositionChange() {
-        return this._positionStrategy.positionChanges;
+        this.onPositionChange = this._positionStrategy.positionChanges;
     }
     /** Ordered list of preferred positions, from most to least desirable. */
     get positions() {
@@ -2641,8 +2633,8 @@ Overlay.ctorParameters = () => [
     { type: NgZone },
     { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] },
     { type: Directionality },
-    { type: Location, decorators: [{ type: Optional }] },
-    { type: OverlayOutsideClickDispatcher, decorators: [{ type: Optional }] }
+    { type: Location },
+    { type: OverlayOutsideClickDispatcher }
 ];
 
 /**
@@ -2722,6 +2714,7 @@ class CdkConnectedOverlay {
         this._backdropSubscription = Subscription.EMPTY;
         this._attachSubscription = Subscription.EMPTY;
         this._detachSubscription = Subscription.EMPTY;
+        this._positionSubscription = Subscription.EMPTY;
         /** Margin between the overlay and the viewport edges. */
         this.viewportMargin = 0;
         /** Whether the overlay is open. */
@@ -2787,6 +2780,7 @@ class CdkConnectedOverlay {
         this._attachSubscription.unsubscribe();
         this._detachSubscription.unsubscribe();
         this._backdropSubscription.unsubscribe();
+        this._positionSubscription.unsubscribe();
         if (this._overlayRef) {
             this._overlayRef.dispose();
         }
@@ -2882,7 +2876,6 @@ class CdkConnectedOverlay {
     _createPositionStrategy() {
         const strategy = this._overlay.position().flexibleConnectedTo(this.origin.elementRef);
         this._updatePositionStrategy(strategy);
-        strategy.positionChanges.subscribe(p => this.positionChange.emit(p));
         return strategy;
     }
     /** Attaches the overlay and subscribes to backdrop clicks if backdrop exists */
@@ -2905,6 +2898,19 @@ class CdkConnectedOverlay {
         else {
             this._backdropSubscription.unsubscribe();
         }
+        this._positionSubscription.unsubscribe();
+        // Only subscribe to `positionChanges` if requested, because putting
+        // together all the information for it can be expensive.
+        if (this.positionChange.observers.length > 0) {
+            this._positionSubscription = this._position.positionChanges
+                .pipe(takeWhile(() => this.positionChange.observers.length > 0))
+                .subscribe(position => {
+                this.positionChange.emit(position);
+                if (this.positionChange.observers.length === 0) {
+                    this._positionSubscription.unsubscribe();
+                }
+            });
+        }
     }
     /** Detaches the overlay and unsubscribes to backdrop clicks if backdrop exists */
     _detachOverlay() {
@@ -2912,6 +2918,7 @@ class CdkConnectedOverlay {
             this._overlayRef.detach();
         }
         this._backdropSubscription.unsubscribe();
+        this._positionSubscription.unsubscribe();
     }
 }
 CdkConnectedOverlay.decorators = [