chore(table): update table data source in prep for rxjs6

.github/CODEOWNERS

@@ -100,6 +100,7 @@
 /src/demo-app/card/**                              @jelbourn
 /src/demo-app/checkbox/**                          @tinayuangao @devversion
 /src/demo-app/chips/**                             @tinayuangao
+/src/demo-app/connected-overlay/**                 @jelbourn @crisbeto
 /src/demo-app/dataset/**                           @andrewseguin
 /src/demo-app/datepicker/**                        @mmalerba
 /src/demo-app/demo-app/**                          @jelbourn

CHANGELOG.md

@@ -114,6 +114,21 @@
 * **tabs:** add ability to lazy load tab content ([#8921](https://github.com/angular/material2/issues/8921)) ([6feaf62](https://github.com/angular/material2/commit/6feaf62))
 
 
+<a name="5.2.4"></a>
+## [5.2.4 ash-submarine](https://github.com/angular/material2/compare/5.2.3...5.2.4) (2018-03-06)
+
+
+### Bug Fixes
+
+* **chips:** Update chips in chip list, and add margin to chip input ([#8579](https://github.com/angular/material2/issues/8579)) ([3074b45](https://github.com/angular/material2/commit/3074b45))
+* **expansion-panel:** entire body content being shown on animation start ([#10138](https://github.com/angular/material2/issues/10138)) ([35b66f9](https://github.com/angular/material2/commit/35b66f9)), closes [#10134](https://github.com/angular/material2/issues/10134)
+* **menu:** detach lazily-rendered content when the menu is closed ([#10005](https://github.com/angular/material2/issues/10005)) ([37b1a09](https://github.com/angular/material2/commit/37b1a09)), closes [#9915](https://github.com/angular/material2/issues/9915)
+* **menu:** Fix [#10005](https://github.com/angular/material2/issues/10005) lint error ([c8ca770](https://github.com/angular/material2/commit/c8ca770))
+* **overlay:** hide overlay container when there are no attached overlays ([#10139](https://github.com/angular/material2/issues/10139)) ([d0bc91d](https://github.com/angular/material2/commit/d0bc91d)), closes [#6882](https://github.com/angular/material2/issues/6882) [#10033](https://github.com/angular/material2/issues/10033)
+* **paginator:** first/last icons being thrown off on IE and Edge; simplify icon setup ([#9776](https://github.com/angular/material2/issues/9776)) ([85f9491](https://github.com/angular/material2/commit/85f9491))
+* **selection-list:** improve accessibility of selection list ([#10137](https://github.com/angular/material2/issues/10137)) ([cbe11d4](https://github.com/angular/material2/commit/cbe11d4)), closes [#9995](https://github.com/angular/material2/issues/9995)
+
+
 <a name="5.2.3"></a>
 ## [5.2.3 diamond-silhouette](https://github.com/angular/material2/compare/5.2.2...5.2.3) (2018-02-27)
 

schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html

@@ -4,7 +4,7 @@
     class="sidenav"
     fixedInViewport="true"
     [attr.role]="isHandset ? 'dialog' : 'navigation'"
-    [mode]="isHandset ? 'over' : 'side'"
+    [mode]="(isHandset | async)!.matches ? 'over' : 'side'"
     [opened]="!(isHandset | async)!.matches">
     <mat-toolbar color="primary">Menu</mat-toolbar>
     <mat-nav-list>

schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts

@@ -11,7 +11,7 @@ import { Observable } from 'rxjs/Observable';
         class="sidenav"
         fixedInViewport="true"
         [attr.role]="isHandset ? 'dialog' : 'navigation'"
-        [mode]="isHandset ? 'over' : 'side'"
+        [mode]="(isHandset | async)!.matches ? 'over' : 'side'"
         [opened]="!(isHandset | async)!.matches">
         <mat-toolbar color="primary">Menu</mat-toolbar>
         <mat-nav-list>

schematics/shell/index.ts

@@ -9,7 +9,7 @@ import {
 import {Schema} from './schema';
 import {materialVersion, cdkVersion, angularVersion} from '../utils/lib-versions';
 import {getConfig, getAppFromConfig, AppConfig, CliConfig} from '../utils/devkit-utils/config';
-import {addModuleImportToRootModule} from '../utils/ast';
+import {addModuleImportToRootModule, getStylesPath} from '../utils/ast';
 import {addHeadLink} from '../utils/html';
 import {addPackageToPackageJson} from '../utils/package';
 import {createCustomTheme} from './custom-theme';
@@ -27,7 +27,8 @@ export default function(options: Schema): Rule {
     options && options.skipPackageJson ? noop() : addMaterialToPackageJson(options),
     addThemeToAppStyles(options),
     addAnimationRootConfig(),
-    addFontsToIndex()
+    addFontsToIndex(),
+    addBodyMarginToStyles()
   ]);
 }
 
@@ -69,15 +70,15 @@ function insertCustomTheme(app: AppConfig, host: Tree) {
   const stylesPath = normalize(`/${app.root}/styles.scss`);
 
   const buffer = host.read(stylesPath);
-  if (!buffer) {
-    throw new SchematicsException(`Could not find file for path: ${stylesPath}`);
+  if (buffer) {
+    const src = buffer.toString();
+    const insertion = new InsertChange(stylesPath, 0, createCustomTheme(app));
+    const recorder = host.beginUpdate(stylesPath);
+    recorder.insertLeft(insertion.pos, insertion.toAdd);
+    host.commitUpdate(recorder);
+  } else {
+    console.warn(`Skipped custom theme; could not find file: ${stylesPath}`);
   }
-
-  const src = buffer.toString();
-  const insertion = new InsertChange(stylesPath, 0, createCustomTheme(app));
-  const recorder = host.beginUpdate(stylesPath);
-  recorder.insertLeft(insertion.pos, insertion.toAdd);
-  host.commitUpdate(recorder);
 }
 
 /**
@@ -94,9 +95,10 @@ function insertPrebuiltTheme(app: AppConfig, host: Tree, themeName: string, conf
   }
 
   if (hasOtherTheme) {
-    throw new SchematicsException(`Another theme is already defined.`);
+    console.warn(`Skipped theme insertion; another theme is already defined.`);
+  } else {
+    host.overwrite('.angular-cli.json', JSON.stringify(config, null, 2));
   }
-  host.overwrite('.angular-cli.json', JSON.stringify(config, null, 2));
 }
 
 /**
@@ -116,9 +118,31 @@ function addAnimationRootConfig() {
 function addFontsToIndex() {
   return (host: Tree) => {
     addHeadLink(host,
-      `<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">`);
+      // tslint:disable-next-line
+      `\n<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">`);
     addHeadLink(host,
-      `<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`);
+      // tslint:disable-next-line
+      `\n<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`);
     return host;
   };
 }
+
+/**
+ * Add 0 margin to body in styles.ext
+ */
+function addBodyMarginToStyles() {
+  return (host: Tree) => {
+    const stylesPath = getStylesPath(host);
+
+    const buffer = host.read(stylesPath);
+    if (buffer) {
+      const src = buffer.toString();
+      const insertion = new InsertChange(stylesPath, src.length, `\nbody { margin: 0; }\n`);
+      const recorder = host.beginUpdate(stylesPath);
+      recorder.insertLeft(insertion.pos, insertion.toAdd);
+      host.commitUpdate(recorder);
+    } else {
+      console.warn(`Skipped body reset; could not find file: ${stylesPath}`);
+    }
+  };
+}

schematics/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__-datasource.ts

@@ -61,8 +61,11 @@ export class <%= classify(name) %>DataSource extends DataSource<<%= classify(nam
       this.sort.sortChange
     ];
 
+    // Set the paginators length
+    this.paginator.length = this.data.length;
+
     return merge(...dataMutations).pipe(map(() => {
-      return this.getPagedData(this.getSortedData(this.data));
+      return this.getPagedData(this.getSortedData([...this.data]));
     }));
   }
 
@@ -91,7 +94,7 @@ export class <%= classify(name) %>DataSource extends DataSource<<%= classify(nam
     }
 
     return data.sort((a, b) => {
-      const isAsc = this.sort.direction == 'asc';
+      const isAsc = this.sort.direction === 'asc';
       switch (this.sort.active) {
         case 'name': return compare(a.name, b.name, isAsc);
         case 'id': return compare(+a.id, +b.id, isAsc);

schematics/utils/ast.ts

@@ -60,3 +60,18 @@ export function getIndexHtmlPath(host: Tree) {
   const app = getAppFromConfig(config, '0');
   return normalize(`/${app.root}/${app.index}`);
 }
+
+/**
+ * Get the root stylesheet file.
+ */
+export function getStylesPath(host: Tree) {
+  const config = getConfig(host);
+  const app = getAppFromConfig(config, '0');
+  const styles = app.styles.find(s => /styles\.(c|le|sc)ss/.test(s.toString()));
+
+  if (styles) {
+    return normalize(`/${app.root}/${styles}`);
+  } else {
+    console.warn(`Could not find global styles.ext file.`);
+  }
+}

src/cdk/overlay/_overlay.scss

@@ -52,9 +52,16 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
   // A single overlay pane.
   .cdk-overlay-pane {
     position: absolute;
+
     pointer-events: auto;
     box-sizing: border-box;
     z-index: $cdk-z-index-overlay;
+
+    // For connected-position overlays, we set `display: flex` in
+    // order to force `max-width` and `max-height` to take effect.
+    display: flex;
+    max-width: 100%;
+    max-height: 100%;
   }
 
   .cdk-overlay-backdrop {
@@ -96,6 +103,24 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
     }
   }
 
+  // Overlay parent element used with the connected position strategy. Used to constrain the
+  // overlay element's size to fit within the viewport.
+  .cdk-overlay-connected-position-bounding-box {
+    position: absolute;
+    z-index: $cdk-z-index-overlay;
+
+    // We use `display: flex` on this element exclusively for centering connected overlays.
+    // When *not* centering, a top/left/bottom/right will be set which overrides the normal
+    // flex layout.
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    // Add some dimensions so the element has an `innerText` which some people depend on in tests.
+    min-width: 1px;
+    min-height: 1px;
+  }
+
   // Used when disabling global scrolling.
   .cdk-global-scrollblock {
     position: fixed;

src/cdk/overlay/overlay-directives.spec.ts

@@ -6,11 +6,11 @@ import {dispatchKeyboardEvent} from '@angular/cdk/testing';
 import {ESCAPE} from '@angular/cdk/keycodes';
 import {CdkConnectedOverlay, OverlayModule, CdkOverlayOrigin} from './index';
 import {OverlayContainer} from './overlay-container';
-import {ConnectedPositionStrategy} from './position/connected-position-strategy';
 import {
   ConnectedOverlayPositionChange,
   ConnectionPositionPair,
 } from './position/connected-position';
+import {FlexibleConnectedPositionStrategy} from './position/flexible-connected-position-strategy';
 
 
 describe('Overlay directives', () => {
@@ -79,13 +79,11 @@ describe('Overlay directives', () => {
     let testComponent: ConnectedOverlayDirectiveTest =
         fixture.debugElement.componentInstance;
     let overlayDirective = testComponent.connectedOverlayDirective;
-
     let strategy =
-        <ConnectedPositionStrategy> overlayDirective.overlayRef.getConfig().positionStrategy;
-    expect(strategy instanceof ConnectedPositionStrategy).toBe(true);
+      overlayDirective.overlayRef.getConfig().positionStrategy as FlexibleConnectedPositionStrategy;
 
-    let positions = strategy.positions;
-    expect(positions.length).toBeGreaterThan(0);
+    expect(strategy instanceof FlexibleConnectedPositionStrategy).toBe(true);
+    expect(strategy.positions.length).toBeGreaterThan(0);
   });
 
   it('should set and update the `dir` attribute', () => {
@@ -138,7 +136,7 @@ describe('Overlay directives', () => {
       fixture.componentInstance.isOpen = true;
       fixture.detectChanges();
 
-      const pane = overlayContainerElement.children[0] as HTMLElement;
+      const pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
       expect(pane.style.width).toEqual('250px');
 
       fixture.componentInstance.isOpen = false;
@@ -156,7 +154,7 @@ describe('Overlay directives', () => {
       fixture.componentInstance.isOpen = true;
       fixture.detectChanges();
 
-      const pane = overlayContainerElement.children[0] as HTMLElement;
+      const pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
       expect(pane.style.height).toEqual('100vh');
 
       fixture.componentInstance.isOpen = false;
@@ -174,7 +172,7 @@ describe('Overlay directives', () => {
       fixture.componentInstance.isOpen = true;
       fixture.detectChanges();
 
-      const pane = overlayContainerElement.children[0] as HTMLElement;
+      const pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
       expect(pane.style.minWidth).toEqual('250px');
 
       fixture.componentInstance.isOpen = false;
@@ -192,7 +190,7 @@ describe('Overlay directives', () => {
       fixture.componentInstance.isOpen = true;
       fixture.detectChanges();
 
-      const pane = overlayContainerElement.children[0] as HTMLElement;
+      const pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
       expect(pane.style.minHeight).toEqual('500px');
 
       fixture.componentInstance.isOpen = false;
@@ -233,18 +231,13 @@ describe('Overlay directives', () => {
     });
 
     it('should set the offsetX', () => {
-      const trigger = fixture.debugElement.query(By.css('button')).nativeElement;
-      const startX = trigger.getBoundingClientRect().left;
-
       fixture.componentInstance.offsetX = 5;
       fixture.componentInstance.isOpen = true;
       fixture.detectChanges();
 
-      const pane = overlayContainerElement.children[0] as HTMLElement;
+      const pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
 
-      expect(pane.style.left)
-          .toBe(startX + 5 + 'px',
-              `Expected overlay translateX to equal the original X + the offsetX.`);
+      expect(pane.style.transform).toContain('translateX(5px)');
 
       fixture.componentInstance.isOpen = false;
       fixture.detectChanges();
@@ -253,9 +246,7 @@ describe('Overlay directives', () => {
       fixture.componentInstance.isOpen = true;
       fixture.detectChanges();
 
-      expect(pane.style.left)
-          .toBe(startX + 15 + 'px',
-              `Expected overlay directive to reflect new offsetX if it changes.`);
+      expect(pane.style.transform).toContain('translateX(15px)');
     });
 
     it('should set the offsetY', () => {
@@ -268,21 +259,17 @@ describe('Overlay directives', () => {
       fixture.componentInstance.isOpen = true;
       fixture.detectChanges();
 
-      // expected y value is the starting y + trigger height + offset y
-      // 30 + 20 + 45 = 95px
-      const pane = overlayContainerElement.children[0] as HTMLElement;
+      const pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
 
-      expect(pane.style.top)
-          .toBe('95px', `Expected overlay translateY to equal the start Y + height + offsetY.`);
+      expect(pane.style.transform).toContain('translateY(45px)');
 
       fixture.componentInstance.isOpen = false;
       fixture.detectChanges();
 
       fixture.componentInstance.offsetY = 55;
       fixture.componentInstance.isOpen = true;
       fixture.detectChanges();
-      expect(pane.style.top)
-          .toBe('105px', `Expected overlay directive to reflect new offsetY if it changes.`);
+      expect(pane.style.transform).toContain('translateY(55px)');
     });
 
     it('should be able to update the origin after init', () => {