chore(material): clean up old workarounds with new features.

Author: jelbourn

gulpfile.js

@@ -1169,7 +1169,7 @@ gulp.task('benchpress.bundle', ['build/clean.benchpress.bundle', 'build.js.cjs']
  BENCHPRESS_BUNDLE_CONFIG.dest,
  cb
  );
-})
+});
 
 
 // register cleanup listener for ctrl+c/kill used to quit any persistent task (autotest or serve tasks)

modules/angular2_material/src/components/checkbox/checkbox.ts

@@ -1,18 +1,18 @@
 import {Component, View, Attribute, ViewEncapsulation} from 'angular2/angular2';
 import {isPresent} from 'angular2/src/facade/lang';
-import {KEY_SPACE} from 'angular2_material/src/core/constants';
+import {KeyCodes} from 'angular2_material/src/core/key_codes';
 import {KeyboardEvent} from 'angular2/src/facade/browser';
 import {NumberWrapper} from 'angular2/src/facade/lang';
 
 @Component({
  selector: 'md-checkbox',
  properties: ['checked', 'disabled'],
  host: {
- '(keydown)': 'onKeydown($event)',
- '[tabindex]': 'tabindex',
- '[attr.role]': '"checkbox"',
+ 'role': 'checkbox',
  '[attr.aria-checked]': 'checked',
- '[attr.aria-disabled]': 'disabled'
+ '[attr.aria-disabled]': 'disabled',
+ '[tabindex]': 'tabindex',
+ '(keydown)': 'onKeydown($event)',
  }
 })
 @View({
@@ -25,27 +25,27 @@ export class MdCheckbox {
  checked: boolean;
 
  /** Whether this checkbox is disabled. */
- _disabled: boolean;
+ disabled_: boolean;
 
  /** Setter for tabindex */
  tabindex: number;
 
  constructor(@Attribute('tabindex') tabindex: string) {
  this.checked = false;
  this.tabindex = isPresent(tabindex) ? NumberWrapper.parseInt(tabindex, 10) : 0;
- this._disabled = false;
+ this.disabled_ = false;
  }
 
  get disabled() {
- return this._disabled;
+ return this.disabled_;
  }
 
  set disabled(value) {
- this._disabled = isPresent(value) && value !== false;
+ this.disabled_ = isPresent(value) && value !== false;
  }
 
  onKeydown(event: KeyboardEvent) {
- if (event.keyCode == KEY_SPACE) {
+ if (event.keyCode == KeyCodes.SPACE) {
  event.preventDefault();
  this.toggle(event);
  }

modules/angular2_material/src/components/dialog/dialog.ts

@@ -16,7 +16,7 @@ import {ObservableWrapper, Promise, PromiseWrapper} from 'angular2/src/facade/as
 import {isPresent, Type} from 'angular2/src/facade/lang';
 import {DOM} from 'angular2/src/dom/dom_adapter';
 import {MouseEvent, KeyboardEvent} from 'angular2/src/facade/browser';
-import {KEY_ESC} from 'angular2_material/src/core/constants';
+import {KeyCodes} from 'angular2_material/src/core/key_codes';
 
 // TODO(jelbourn): Opener of dialog can control where it is rendered.
 // TODO(jelbourn): body scrolling is disabled while dialog is open.
@@ -44,7 +44,6 @@ export class MdDialog {
  * Opens a modal dialog.
  * @param type The component to open.
  * @param elementRef The logical location into which the component will be opened.
- * @param parentInjector
  * @param options
  * @returns Promise for a reference to the dialog.
  */
@@ -69,11 +68,6 @@ export class MdDialog {
  var dialogElement = containerRef.location.nativeElement;
  DOM.appendChild(DOM.query('body'), dialogElement);
 
- // TODO(jelbourn): Use hostProperties binding to set these once #1539 is fixed.
- // Configure properties on the host element.
- DOM.addClass(dialogElement, 'md-dialog');
- DOM.setAttribute(dialogElement, 'tabindex', '0');
-
  // TODO(jelbourn): Do this with hostProperties (or another rendering abstraction) once
  // ready.
  if (isPresent(config.width)) {
@@ -119,11 +113,11 @@ export class MdDialog {
  }
 
  alert(message: string, okMessage: string): Promise<any> {
- throw "Not implemented";
+ throw 'Not implemented';
  }
 
  confirm(message: string, okMessage: string, cancelMessage: string): Promise<any> {
- throw "Not implemented";
+ throw 'Not implemented';
  }
 }
 
@@ -209,9 +203,14 @@ export class MdDialogConfig {
  */
 @Component({
  selector: 'md-dialog-container',
- host: {'(body:^keydown)': 'documentKeypress($event)'},
+ host: {
+ 'class': 'md-dialog',
+ 'tabindex': '0',
+ '(body:^keydown)': 'documentKeypress($event)',
+ },
 })
 @View({
+ encapsulation: ViewEncapsulation.NONE,
  templateUrl: 'package:angular2_material/src/components/dialog/dialog.html',
  directives: [forwardRef(() => MdDialogContent)]
 })
@@ -232,7 +231,7 @@ class MdDialogContainer {
  }
 
  documentKeypress(event: KeyboardEvent) {
- if (event.keyCode == KEY_ESC) {
+ if (event.keyCode == KeyCodes.ESCAPE) {
  this.dialogRef.close();
  }
  }
@@ -243,7 +242,9 @@ class MdDialogContainer {
  * location
  * for where the dialog content will be loaded.
  */
-@Directive({selector: 'md-dialog-content'})
+@Directive({
+ selector: 'md-dialog-content',
+})
 class MdDialogContent {
  constructor(@Host() @SkipSelf() dialogContainer: MdDialogContainer, elementRef: ElementRef) {
  dialogContainer.contentRef = elementRef;
@@ -253,9 +254,11 @@ class MdDialogContent {
 /** Component for the dialog "backdrop", a transparent overlay over the rest of the page. */
 @Component({
  selector: 'md-backdrop',
- host: {'(click)': 'onClick()'},
+ host: {
+ '(click)': 'onClick()',
+ },
 })
-@View({template: ''})
+@View({template: '', encapsulation: ViewEncapsulation.NONE})
 class MdBackdrop {
  dialogRef: MdDialogRef;
 

modules/angular2_material/src/components/grid_list/grid_list.ts

@@ -16,7 +16,14 @@ import {Math} from 'angular2/src/facade/math';
 // TODO(jelbourn): Conditional (responsive) column count / row size.
 // TODO(jelbourn): Re-layout on window resize / media change (debounced).
 // TODO(jelbourn): gridTileHeader and gridTileFooter.
-// TODO(jelbourn): rowHeightMode enum (after TS conversion).
+
+/** Row hieght mode options. Use a static class b/c TypeScript enums are strictly number-based. */
+class RowHeightMode {
+ static FIT = 'fit';
+ static FIXED = 'fixed';
+ static RATIO = 'ratio';
+}
+
 
 @Component({
  selector: 'md-grid-list',
@@ -64,19 +71,19 @@ export class MdGridList {
 
  /** Set internal representation of row height from the user-provided value. */
  set rowHeight(value) {
- if (value === 'fit') {
- this.rowHeightMode = 'fit';
+ if (value === RowHeightMode.FIT) {
+ this.rowHeightMode = RowHeightMode.FIT;
  } else if (StringWrapper.contains(value, ':')) {
- var ratioParts = value.split(':');
+ let ratioParts = value.split(':');
  if (ratioParts.length !== 2) {
  throw `md-grid-list: invalid ratio given for row-height: "${value}"`;
  }
 
- this.rowHeightMode = 'ratio';
+ this.rowHeightMode = RowHeightMode.RATIO;
  this.rowHeightRatio =
  NumberWrapper.parseFloat(ratioParts[0]) / NumberWrapper.parseFloat(ratioParts[1]);
  } else {
- this.rowHeightMode = 'fixed';
+ this.rowHeightMode = RowHeightMode.FIXED;
  this.fixedRowHeight = value;
  }
  }
@@ -87,20 +94,13 @@ export class MdGridList {
 
  /** Computes and applies the size and position for all children grid tiles. */
  layoutTiles() {
- var tracker = new TileCoordinator(this.cols, this.tiles);
+ let tracker = new TileCoordinator(this.cols, this.tiles);
  this.rows = tracker.rowCount;
 
- for (var i = 0; i < this.tiles.length; i++) {
- var pos = tracker.positions[i];
- var tile = this.tiles[i];
- var style = this.getTileStyle(tile, pos.row, pos.col);
-
- tile.styleWidth = style.width;
- tile.styleHeight = style.height;
- tile.styleTop = style.top;
- tile.styleLeft = style.left;
- tile.styleMarginTop = style.marginTop;
- tile.stylePaddingTop = style.paddingTop;
+ for (let i = 0; i < this.tiles.length; i++) {
+ let pos = tracker.positions[i];
+ let tile = this.tiles[i];
+ tile.style = this.getTileStyle(tile, pos.row, pos.col);
  }
  }
 
@@ -164,55 +164,50 @@ export class MdGridList {
  /** Gets the style properties to be applied to a tile for the given row and column index. */
  getTileStyle(tile: MdGridTile, rowIndex: number, colIndex: number): TileStyle {
  // Percent of the available horizontal space that one column takes up.
- var percentWidthPerTile = 100 / this.cols;
+ let percentWidthPerTile = 100 / this.cols;
 
  // Fraction of the vertical gutter size that each column takes up.
  // For example, if there are 5 columns, each column uses 4/5 = 0.8 times the gutter width.
- var gutterWidthFractionPerTile = (this.cols - 1) / this.cols;
+ let gutterWidthFractionPerTile = (this.cols - 1) / this.cols;
 
  // Base horizontal size of a column.
- var baseTileWidth = this.getBaseTileSize(percentWidthPerTile, gutterWidthFractionPerTile);
+ let baseTileWidth = this.getBaseTileSize(percentWidthPerTile, gutterWidthFractionPerTile);
 
  // The width and horizontal position of each tile is always calculated the same way, but the
  // height and vertical position depends on the rowMode.
- var tileStyle = new TileStyle();
+ let tileStyle = new TileStyle();
  tileStyle.left = this.getTilePosition(baseTileWidth, colIndex);
  tileStyle.width = this.getTileSize(baseTileWidth, tile.colspan);
 
- // TODO: make cases enums when we support enums
- switch (this.rowHeightMode) {
- case 'fixed':
- // In fixed mode, simply use the given row height.
- tileStyle.top = this.getTilePosition(this.fixedRowHeight, rowIndex);
- tileStyle.height = this.getTileSize(this.fixedRowHeight, tile.rowspan);
- break;
-
- case 'ratio':
- var percentHeightPerTile = percentWidthPerTile / this.rowHeightRatio;
- var baseTileHeight = this.getBaseTileSize(percentHeightPerTile, gutterWidthFractionPerTile);
+ if (this.rowHeightMode == RowHeightMode.FIXED) {
+ // In fixed mode, simply use the given row height.
+ tileStyle.top = this.getTilePosition(this.fixedRowHeight, rowIndex);
+ tileStyle.height = this.getTileSize(this.fixedRowHeight, tile.rowspan);
+ }
 
- // Use paddingTop and marginTop to maintain the given aspect ratio, as
- // a percentage-based value for these properties is applied versus the *width* of the
- // containing block. See http://www.w3.org/TR/CSS2/box.html#margin-properties
- tileStyle.marginTop = this.getTilePosition(baseTileHeight, rowIndex);
- tileStyle.paddingTop = this.getTileSize(baseTileHeight, tile.rowspan);
- break;
+ if (this.rowHeightMode == RowHeightMode.RATIO) {
+ let percentHeightPerTile = percentWidthPerTile / this.rowHeightRatio;
+ let baseTileHeight = this.getBaseTileSize(percentHeightPerTile, gutterWidthFractionPerTile);
 
- case 'fit':
- // Percent of the available vertical space that one row takes up.
- var percentHeightPerTile = 100 / this.cols;
+ // Use paddingTop and marginTop to maintain the given aspect ratio, as
+ // a percentage-based value for these properties is applied versus the *width* of the
+ // containing block. See http://www.w3.org/TR/CSS2/box.html#margin-properties
+ tileStyle.marginTop = this.getTilePosition(baseTileHeight, rowIndex);
+ tileStyle.paddingTop = this.getTileSize(baseTileHeight, tile.rowspan);
+ }
 
- // Fraction of the horizontal gutter size that each column takes up.
- var gutterHeightFractionPerTile = (this.rows - 1) / this.rows;
+ if (this.rowHeightMode == RowHeightMode.FIT) {
+ // Percent of the available vertical space that one row takes up.
+ let percentHeightPerTile = 100 / this.cols;
 
- // Base vertical size of a column.
- var baseTileHeight =
- this.getBaseTileSize(percentHeightPerTile, gutterHeightFractionPerTile);
+ // Fraction of the horizontal gutter size that each column takes up.
+ let gutterHeightFractionPerTile = (this.rows - 1) / this.rows;
 
-  tileStyle.top = this.getTilePosition(baseTileHeight, rowIndex);
-  tileStyle.height = this.getTileSize(baseTileHeight, tile.rowspan);
+ // Base vertical size of a column.
+ let baseTileHeight = this.getBaseTileSize(percentHeightPerTile, gutterHeightFractionPerTile);
 
- break;
+ tileStyle.top = this.getTilePosition(baseTileHeight, rowIndex);
+ tileStyle.height = this.getTileSize(baseTileHeight, tile.rowspan);
  }
 
  return tileStyle;
@@ -223,13 +218,13 @@ export class MdGridList {
  selector: 'md-grid-tile',
  properties: ['rowspan', 'colspan'],
  host: {
- '[style.height]': 'styleHeight',
- '[style.width]': 'styleWidth',
- '[style.top]': 'styleTop',
- '[style.left]': 'styleLeft',
- '[style.marginTop]': 'styleMarginTop',
- '[style.paddingTop]': 'stylePaddingTop',
- '[attr.role]': '"listitem"'
+ 'role': 'listitem',
+ '[style.height]': 'style.height',
+ '[style.width]': 'style.width',
+ '[style.top]': 'style.top',
+ '[style.left]': 'style.left',
+ '[style.marginTop]': 'style.marginTop',
+ '[style.paddingTop]': 'style.paddingTop',
  },
  lifecycle: [LifecycleEvent.onDestroy, LifecycleEvent.onChange]
 })
@@ -242,13 +237,7 @@ export class MdGridTile {
  _rowspan: number;
  _colspan: number;
 
- styleHeight: string;
- styleWidth: string;
- styleTop: string;
- styleLeft: string;
- styleMarginTop: string;
- stylePaddingTop: string;
-
+ style: TileStyle;
  isRegisteredWithGridList: boolean;
 
  constructor(@SkipSelf() @Host() gridList: MdGridList) {
@@ -257,6 +246,7 @@ export class MdGridTile {
  // Tiles default to 1x1, but rowspan and colspan can be changed via binding.
  this.rowspan = 1;
  this.colspan = 1;
+ this.style = new TileStyle();
  }
 
  set rowspan(value) {
@@ -330,7 +320,7 @@ class TileCoordinator {
  this.tracker = ListWrapper.createFixedSize(numColumns);
  ListWrapper.fill(this.tracker, 0);
 
- this.positions = ListWrapper.map(tiles, tile => this._trackTile(tile));
+ this.positions = tiles.map(tile => this._trackTile(tile));
  }
 
  /** Gets the number of rows occupied by tiles. */
@@ -345,8 +335,8 @@ class TileCoordinator {
  }
 
  // Start index is inclusive, end index is exclusive.
- var gapStartIndex = -1;
- var gapEndIndex = -1;
+ let gapStartIndex = -1;
+ let gapEndIndex = -1;
 
  // Look for a gap large enough to fit the given tile. Empty spaces are marked with a zero.
  do {
@@ -389,7 +379,7 @@ class TileCoordinator {
  this.rowIndex++;
 
  // Decrement all spaces by one to reflect moving down one row.
- for (var i = 0; i < this.tracker.length; i++) {
+ for (let i = 0; i < this.tracker.length; i++) {
  this.tracker[i] = Math.max(0, this.tracker[i] - 1);
  }
  }
@@ -399,7 +389,7 @@ class TileCoordinator {
  * The gap ends when a non-zero value is found.
  */
  _findGapEndIndex(gapStartIndex: number): number {
- for (var i = gapStartIndex + 1; i < this.tracker.length; i++) {
+ for (let i = gapStartIndex + 1; i < this.tracker.length; i++) {
  if (this.tracker[i] != 0) {
  return i;
  }
@@ -411,7 +401,7 @@ class TileCoordinator {
 
  /** Update the tile tracker to account for the given tile in the given space. */
  _markTilePosition(start, tile) {
- for (var i = 0; i < tile.colspan; i++) {
+ for (let i = 0; i < tile.colspan; i++) {
  this.tracker[start + i] = tile.rowspan;
  }
  }