Merge remote-tracking branch 'upstream/master'

Author: devversion

.travis.yml

@@ -37,6 +37,7 @@ env:
     # Order: a slower build first, so that we don't occupy an idle travis worker waiting for others to complete.
     - MODE=lint
     - MODE=circular_deps
+    - MODE=extract_metadata
     - MODE=e2e
     - MODE=saucelabs_required
     - MODE=browserstack_required

scripts/ci/build-and-test.sh

@@ -11,15 +11,15 @@ source scripts/ci/sources/mode.sh
 source scripts/ci/sources/tunnel.sh
 
 start_tunnel
-npm run build
-npm run inline-resources
 
 wait_for_tunnel
 if is_lint; then
   npm run tslint  
   npm run ci:forbidden-identifiers
   npm run stylelint
 elif is_circular_deps_check; then
+  # Build first because madge needs the JavaScript output.
+  ng build
   npm run check-circular-deps
 elif is_e2e; then
   # Start up the e2e app. This will take some time.
@@ -32,12 +32,24 @@ elif is_e2e; then
   echo "Waiting for e2e app to start"
   while [ ! -f ./dist/components/button/button.js ]; do
     sleep 2
+    echo -n ".."
   done
 
+  echo "\nInlining resources"
+  npm run inline-resources
+
   # Run the e2e tests on the served e2e app.
   echo "Starting e2e tests"
   ng e2e
+elif is_extract_metadata; then
+  # Run `tsc` first so that the directory structure in dist/ matches what ngc expects.
+  ./node_modules/.bin/tsc -p ./src/demo-app/
+  ./node_modules/.bin/ngc -p ./src/demo-app/
 else
+  # Unit tests
+  npm run build
+  npm run inline-resources
+
   karma start test/karma.conf.js --single-run --no-auto-watch --reporters='dots'
 fi
 teardown_tunnel

scripts/ci/sources/mode.sh

@@ -12,3 +12,7 @@ is_lint() {
 is_circular_deps_check() {
   [[ "$MODE" = circular_deps ]]
 }
+
+is_extract_metadata() {
+  [[ "$MODE" = extract_metadata ]]
+}

src/components/button/_button-base.scss

@@ -1,6 +1,7 @@
 
 @import 'variables';
 @import 'elevation';
+@import 'button-mixins';
 
 // TODO(jelbourn): This goes away.
 @import 'default-theme';
@@ -34,12 +35,7 @@ $md-mini-fab-padding: 8px !default;
   position: relative;
 
   // Reset browser <button> styles.
-  background: transparent;
-  text-align: center;
-  cursor: pointer;
-  user-select: none;
-  outline: none;
-  border: none;
+  @include md-button-reset();
 
   // Make anchors render like buttons.
   display: inline-block;
@@ -52,6 +48,7 @@ $md-mini-fab-padding: 8px !default;
   font-family: $md-font-family;
   font-weight: 500;
   color: currentColor;
+  text-align: center;
 
   // Sizing.
   margin: $md-button-margin;

src/components/dialog/dialog-config.ts

@@ -0,0 +1,19 @@
+import {ViewContainerRef} from '@angular/core';
+
+/** Valid ARIA roles for a dialog element. */
+export type DialogRole = 'dialog' | 'alertdialog'
+
+
+
+/**
+ * Configuration for opening a modal dialog with the MdDialog service.
+ */
+export class MdDialogConfig {
+  viewContainerRef: ViewContainerRef;
+
+  /** The ARIA role of the dialog element. */
+  role: DialogRole = 'dialog';
+
+  // TODO(jelbourn): add configuration for size, clickOutsideToClose, lifecycle hooks,
+  // ARIA labelling.
+}

src/components/dialog/dialog-container.html

@@ -0,0 +1 @@
+<template portalHost></template>

src/components/dialog/dialog-container.scss

@@ -0,0 +1,8 @@
+@import 'elevation';
+
+:host {
+  // TODO(jelbourn): add real Material Design dialog styles.
+  display: block;
+  background: deeppink;
+  @include md-elevation(2);
+}

src/components/dialog/dialog-container.ts

@@ -0,0 +1,86 @@
+import {Component, ComponentRef, ViewChild, AfterViewInit} from '@angular/core';
+import {
+  BasePortalHost,
+  ComponentPortal,
+  TemplatePortal
+} from '@angular2-material/core/portal/portal';
+import {PortalHostDirective} from '@angular2-material/core/portal/portal-directives';
+import {PromiseCompleter} from '@angular2-material/core/async/promise-completer';
+import {MdDialogConfig} from './dialog-config';
+import {MdDialogContentAlreadyAttachedError} from './dialog-errors';
+
+
+/**
+ * Internal component that wraps user-provided dialog content.
+ */
+@Component({
+  moduleId: module.id,
+  selector: 'md-dialog-container',
+  templateUrl: 'dialog-container.html',
+  styleUrls: ['dialog-container.css'],
+  directives: [PortalHostDirective],
+  host: {
+    'class': 'md-dialog-container',
+    '[attr.role]': 'dialogConfig?.role'
+  }
+})
+export class MdDialogContainer extends BasePortalHost implements AfterViewInit {
+  /** The portal host inside of this container into which the dialog content will be loaded. */
+  @ViewChild(PortalHostDirective) private _portalHost: PortalHostDirective;
+
+  /**
+   * Completer used to resolve the promise for cases when a portal is attempted to be attached,
+   * but AfterViewInit has not yet occured.
+   */
+  private _deferredAttachCompleter: PromiseCompleter<ComponentRef<any>>;
+
+  /** Portal to be attached upon AfterViewInit. */
+  private _deferredAttachPortal: ComponentPortal<any>;
+
+  /** The dialog configuration. */
+  dialogConfig: MdDialogConfig;
+
+  /** TODO: internal */
+  ngAfterViewInit() {
+    // If there was an attempted call to `attachComponentPortal` before this lifecycle stage,
+    // we actually perform the attachment now that the `@ViewChild` is resolved.
+    if (this._deferredAttachCompleter) {
+      this.attachComponentPortal(this._deferredAttachPortal).then(componentRef => {
+        this._deferredAttachCompleter.resolve(componentRef);
+
+        this._deferredAttachPortal = null;
+        this._deferredAttachCompleter = null;
+      }, () => {
+        this._deferredAttachCompleter.reject();
+        this._deferredAttachCompleter = null;
+        this._deferredAttachPortal = null;
+      });
+    }
+  }
+
+  /** Attach a portal as content to this dialog container. */
+  attachComponentPortal<T>(portal: ComponentPortal<T>): Promise<ComponentRef<T>> {
+    if (this._portalHost) {
+      if (this._portalHost.hasAttached()) {
+        throw new MdDialogContentAlreadyAttachedError();
+      }
+
+      return this._portalHost.attachComponentPortal(portal);
+    } else {
+      // The @ViewChild query for the portalHost is not resolved until AfterViewInit, but this
+      // function may be called before this lifecycle event. As such, we defer the attachment of
+      // the portal until AfterViewInit.
+      if (this._deferredAttachCompleter) {
+        throw new MdDialogContentAlreadyAttachedError();
+      }
+
+      this._deferredAttachPortal = portal;
+      this._deferredAttachCompleter = new PromiseCompleter();
+      return this._deferredAttachCompleter.promise;
+    }
+  }
+
+  attachTemplatePortal(portal: TemplatePortal): Promise<Map<string, any>> {
+    throw Error('Not yet implemented');
+  }
+}

src/components/dialog/dialog-errors.ts

@@ -0,0 +1,8 @@
+import {MdError} from '@angular2-material/core/errors/error';
+
+/** Exception thrown when a ComponentPortal is attached to a DomPortalHost without an origin. */
+export class MdDialogContentAlreadyAttachedError extends MdError {
+  constructor() {
+      super('Attempting to attach dialog content after content is already attached');
+  }
+}

src/components/dialog/dialog-injector.ts

@@ -0,0 +1,16 @@
+import {Injector} from '@angular/core';
+import {MdDialogRef} from './dialog-ref';
+
+
+/** Custom injector type specifically for instantiating components with a dialog. */
+export class DialogInjector implements Injector {
+  constructor(private _dialogRef: MdDialogRef<any>, private _parentInjector: Injector) { }
+
+  get(token: any, notFoundValue?: any): any {
+    if (token === MdDialogRef) {
+      return this._dialogRef;
+    }
+
+    return this._parentInjector.get(token, notFoundValue);
+  }
+}