@angular/cdk 8.0.0-rc.2 → 8.1.0

package/esm2015/layout.js

@@ -7,8 +7,8 @@
  */
 import { NgModule, Injectable, NgZone, ɵɵdefineInjectable, ɵɵinject } from '@angular/core';
 import { Platform } from '@angular/cdk/platform';
-import { asapScheduler, combineLatest, Observable, Subject } from 'rxjs';
-import { debounceTime, map, startWith, takeUntil } from 'rxjs/operators';
+import { combineLatest, concat, Observable, Subject } from 'rxjs';
+import { debounceTime, map, skip, startWith, take, takeUntil } from 'rxjs/operators';
 import { coerceArray } from '@angular/cdk/coercion';
 
 /**
@@ -182,7 +182,11 @@ class BreakpointObserver {
          * @return {?}
          */
         query => this._registerQuery(query).observable));
-        return combineLatest(observables).pipe(debounceTime(0, asapScheduler), map((/**
+        /** @type {?} */
+        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((/**
          * @param {?} breakpointStates
          * @return {?}
          */

package/esm2015/layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"layout.js","sources":["../../../src/cdk/layout/breakpoints.ts","../../../src/cdk/layout/breakpoints-observer.ts","../../../src/cdk/layout/media-matcher.ts","../../../src/cdk/layout/layout-module.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 */\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\nimport {Injectable, NgZone, OnDestroy} from '@angular/core';\nimport {MediaMatcher} from './media-matcher';\nimport {asapScheduler, combineLatest, Observable, Subject, Observer} from 'rxjs';\nimport {debounceTime, map, startWith, 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    return combineLatest(observables).pipe(\n      debounceTime(0, asapScheduler),\n      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 */\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 */\nimport {NgModule} from '@angular/core';\n\n\n@NgModule({})\nexport class LayoutModule {}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"layout.js","sources":["../../../src/cdk/layout/breakpoints.ts","../../../src/cdk/layout/breakpoints-observer.ts","../../../src/cdk/layout/media-matcher.ts","../../../src/cdk/layout/layout-module.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 */\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\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 */\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 */\nimport {NgModule} from '@angular/core';\n\n\n@NgModule({})\nexport class LayoutModule {}\n"],"names":[],"mappings":"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"}

package/esm2015/overlay.js

@@ -15,7 +15,7 @@ import { take, takeUntil } from 'rxjs/operators';
 import { Platform } from '@angular/cdk/platform';
 import { Directionality, BidiModule } from '@angular/cdk/bidi';
 import { DomPortalOutlet, TemplatePortal, PortalModule } from '@angular/cdk/portal';
-import { ESCAPE } from '@angular/cdk/keycodes';
+import { ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';
 
 /**
  * @fileoverview added by tsickle
@@ -494,17 +494,19 @@ class OverlayConfig {
          */
         this.disposeOnNavigation = false;
         if (config) {
-            Object.keys(config).forEach((/**
-             * @param {?} k
-             * @return {?}
-             */
-            k => {
-                /** @type {?} */
-                const key = (/** @type {?} */ (k));
-                if (typeof config[key] !== 'undefined') {
-                    this[key] = config[key];
+            /** @type {?} */
+            const configKeys = (/** @type {?} */ (Object.keys(config)));
+            for (const key of configKeys) {
+                if (config[key] !== undefined) {
+                    // TypeScript, as of version 3.5, sees the left-hand-side of this expression
+                    // as "I don't know *which* key this is, so the only valid value is the intersection
+                    // of all the posible values." In this case, that happens to be `undefined`. TypeScript
+                    // is not smart enough to see that the right-hand-side is actually an access of the same
+                    // exact type with the same exact key, meaning that the value type must be identical.
+                    // So we use `any` to work around this.
+                    this[key] = (/** @type {?} */ (config[key]));
                 }
-            }));
+            }
         }
     }
 }
@@ -665,7 +667,7 @@ class OverlayKeyboardDispatcher {
         this.remove(overlayRef);
         // Lazily start dispatcher once first overlay is added
         if (!this._isAttached) {
-            this._document.body.addEventListener('keydown', this._keydownListener, true);
+            this._document.body.addEventListener('keydown', this._keydownListener);
             this._isAttached = true;
         }
         this._attachedOverlays.push(overlayRef);
@@ -693,7 +695,7 @@ class OverlayKeyboardDispatcher {
      */
     _detach() {
         if (this._isAttached) {
-            this._document.body.removeEventListener('keydown', this._keydownListener, true);
+            this._document.body.removeEventListener('keydown', this._keydownListener);
             this._isAttached = false;
         }
     }
@@ -845,6 +847,11 @@ class OverlayRef {
         this._attachments = new Subject();
         this._detachments = new Subject();
         this._locationChanges = Subscription.EMPTY;
+        this._backdropClickHandler = (/**
+         * @param {?} event
+         * @return {?}
+         */
+        (event) => this._backdropClick.next(event));
         this._keydownEventsObservable = new Observable((/**
          * @param {?} observer
          * @return {?}
@@ -1203,11 +1210,7 @@ class OverlayRef {
         (/** @type {?} */ (this._host.parentElement)).insertBefore(this._backdropElement, this._host);
         // Forward backdrop clicks such that the consumer of the overlay can perform whatever
         // action desired when such a click occurs (usually closing the overlay).
-        this._backdropElement.addEventListener('click', (/**
-         * @param {?} event
-         * @return {?}
-         */
-        (event) => this._backdropClick.next(event)));
+        this._backdropElement.addEventListener('click', this._backdropClickHandler);
         // Add class to fade-in the backdrop after one frame.
         if (typeof requestAnimationFrame !== 'undefined') {
             this._ngZone.runOutsideAngular((/**
@@ -1260,8 +1263,12 @@ class OverlayRef {
          */
         () => {
             // It may not be attached to anything in certain cases (e.g. unit tests).
-            if (backdropToDetach && backdropToDetach.parentNode) {
-                backdropToDetach.parentNode.removeChild(backdropToDetach);
+            if (backdropToDetach) {
+                backdropToDetach.removeEventListener('click', this._backdropClickHandler);
+                backdropToDetach.removeEventListener('transitionend', finishDetach);
+                if (backdropToDetach.parentNode) {
+                    backdropToDetach.parentNode.removeChild(backdropToDetach);
+                }
             }
             // It is possible that a new portal has been attached to this overlay since we started
             // removing the backdrop. If that is the case, only clear the backdrop reference if it
@@ -2135,8 +2142,8 @@ class FlexibleConnectedPositionStrategy {
         /** @type {?} */
         let right;
         if (isBoundedByLeftViewportEdge) {
-            right = viewport.right - origin.x + this._viewportMargin;
-            width = origin.x - viewport.left;
+            right = viewport.width - origin.x + this._viewportMargin;
+            width = origin.x - this._viewportMargin;
         }
         else if (isBoundedByRightViewportEdge) {
             left = origin.x;
@@ -3466,7 +3473,8 @@ class CdkConnectedOverlay {
          */
         (event) => {
             this.overlayKeydown.next(event);
-            if (event.keyCode === ESCAPE) {
+            if (event.keyCode === ESCAPE && !hasModifierKey(event)) {
+                event.preventDefault();
                 this._detachOverlay();
             }
         }));