s/side/position

Author: mmalerba

src/demo-app/sidenav/sidenav-demo.html

@@ -15,7 +15,7 @@ <h2>Basic Use Case</h2>
     <input #myinput>
   </md-sidenav>
 
-  <md-sidenav #end side="end">
+  <md-sidenav #end position="end">
     End Side Drawer
     <br>
     <button md-button (click)="end.close()">Close</button>

src/lib/sidenav/drawer.spec.ts

@@ -373,8 +373,8 @@ class DrawerContainerNoDrawerTestApp { }
 @Component({
   template: `
     <md-drawer-container>
-      <md-drawer side="start"> </md-drawer>
-      <md-drawer side="end"> </md-drawer>
+      <md-drawer [position]="start"></md-drawer>
+      <md-drawer [position]="end"></md-drawer>
     </md-drawer-container>`,
 })
 class DrawerContainerTwoDrawerTestApp {
@@ -385,9 +385,9 @@ class DrawerContainerTwoDrawerTestApp {
 @Component({
   template: `
     <md-drawer-container (backdropClick)="backdropClicked()">
-      <md-drawer #drawer side="start"
-                  (open)="open()"
-                  (close)="close()">
+      <md-drawer #drawer [position]="start"
+                 (open)="open()"
+                 (close)="close()">
         <button #drawerButton>Content.</button>
       </md-drawer>
       <button (click)="drawer.open()" class="open" #openButton></button>
@@ -439,8 +439,8 @@ class DrawerSetToOpenedTrue { }
 @Component({
   template: `
     <md-drawer-container>
-      <md-drawer #drawer1 [side]="drawer1Side"></md-drawer>
-      <md-drawer #drawer2 [side]="drawer2Side"></md-drawer>
+      <md-drawer #drawer1 [position]="drawer1Side"></md-drawer>
+      <md-drawer #drawer2 [position]="drawer2Side"></md-drawer>
     </md-drawer-container>`,
 })
 class DrawerDynamicSide {
@@ -451,7 +451,7 @@ class DrawerDynamicSide {
 @Component({
   template: `
     <md-drawer-container>
-      <md-drawer side="start" [mode]="mode">
+      <md-drawer [position]="start" [mode]="mode">
         <a class="link1" href="#">link1</a>
       </md-drawer>
       <a class="link2" href="#">link2</a>

src/lib/sidenav/drawer.ts

@@ -79,7 +79,7 @@ export class MdDrawerToggleResult {
     '(keydown)': 'handleKeydown($event)',
     // must prevent the browser from aligning text based on value
     '[attr.align]': 'null',
-    '[class.mat-drawer-end]': 'side === "end"',
+    '[class.mat-drawer-end]': 'position === "end"',
     '[class.mat-drawer-over]': 'mode === "over"',
     '[class.mat-drawer-push]': 'mode === "push"',
     '[class.mat-drawer-side]': 'mode === "side"',
@@ -97,22 +97,22 @@ export class MdDrawer implements AfterContentInit, OnDestroy {
 
   /** The side that the drawer is attached to. */
   @Input()
-  get side() { return this._side; }
-  set side(value) {
+  get position() { return this._position; }
+  set position(value) {
     // Make sure we have a valid value.
     value = value === 'end' ? 'end' : 'start';
-    if (value != this._side) {
-      this._side = value;
+    if (value != this._position) {
+      this._position = value;
       this.onAlignChanged.emit();
-      this.onSideChanged.emit();
+      this.onPositionChanged.emit();
     }
   }
-  private _side: 'start' | 'end' = 'start';
+  private _position: 'start' | 'end' = 'start';
 
   /** @deprecated */
   @Input()
-  get align() { return this.side; }
-  set align(value) { this.side = value; }
+  get align() { return this.position; }
+  set align(value) { this.position = value; }
 
   /** Mode of the drawer; one of 'over', 'push' or 'side'. */
   @Input() mode: 'over' | 'push' | 'side' = 'over';
@@ -146,7 +146,7 @@ export class MdDrawer implements AfterContentInit, OnDestroy {
   @Output('close') onClose = new EventEmitter<MdDrawerToggleResult | void>();
 
   /** Event emitted when the drawer's side changes. */
-  @Output('side-changed') onSideChanged = new EventEmitter<void>();
+  @Output('side-changed') onPositionChanged = new EventEmitter<void>();
 
   /** @deprecated */
   @Output('align-changed') onAlignChanged = new EventEmitter<void>();
@@ -395,7 +395,7 @@ export class MdDrawerContainer implements AfterContentInit {
     }
     // NOTE: We need to wait for the microtask queue to be empty before validating,
     // since both drawers may be swapping sides at the same time.
-    takeUntil.call(drawer.onSideChanged, this._drawers.changes).subscribe(() =>
+    takeUntil.call(drawer.onPositionChanged, this._drawers.changes).subscribe(() =>
         first.call(this._ngZone.onMicrotaskEmpty).subscribe(() => this._validateDrawers()));
   }
 
@@ -414,7 +414,7 @@ export class MdDrawerContainer implements AfterContentInit {
 
     // Ensure that we have at most one start and one end drawer.
     this._drawers.forEach(drawer => {
-      if (drawer.side == 'end') {
+      if (drawer.position == 'end') {
         if (this._end != null) {
           throwMdDuplicatedDrawerError('end');
         }

src/lib/sidenav/sidenav.ts

@@ -41,7 +41,7 @@ import {animate, state, style, transition, trigger} from '@angular/animations';
     '(keydown)': 'handleKeydown($event)',
     // must prevent the browser from aligning text based on value
     '[attr.align]': 'null',
-    '[class.mat-drawer-end]': 'side === "end"',
+    '[class.mat-drawer-end]': 'position === "end"',
     '[class.mat-drawer-over]': 'mode === "over"',
     '[class.mat-drawer-push]': 'mode === "push"',
     '[class.mat-drawer-side]': 'mode === "side"',