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>
@@ -48,14 +48,14 @@ <h2>Sidenav Already Opened</h2>
   </div>
 </md-sidenav-container>
 
-<h2>Dynamic Side Sidenav</h2>
+<h2>Dynamic Position Sidenav</h2>
 
 <md-sidenav-container class="demo-sidenav-container">
-  <md-sidenav #dynamicSideSidenav1 mode="side" [side]="invert ? 'end' : 'start'">Start</md-sidenav>
-  <md-sidenav #dynamicSideSidenav2 mode="side" [side]="invert ? 'start' : 'end'">End</md-sidenav>
+  <md-sidenav #dynamicPosSidenav1 mode="side" [position]="invert ? 'end' : 'start'">Start</md-sidenav>
+  <md-sidenav #dynamicPosSidenav2 mode="side" [position]="invert ? 'start' : 'end'">End</md-sidenav>
 
   <div class="demo-sidenav-content">
-    <button (click)="dynamicSideSidenav1.toggle(); dynamicSideSidenav2.toggle()">
+    <button (click)="dynamicPosSidenav1.toggle(); dynamicPosSidenav2.toggle()">
       Toggle sidenavs
     </button>
     <button (click)="invert = !invert">Change sides</button>

src/lib/sidenav/README.md

@@ -23,7 +23,7 @@ The sidenav panel.
 
 | Name | Type | Description |
 | --- | --- | --- |
-| `side` | `"start"\|"end"` | The side of this sidenav. In LTR direction, `"start"` will be shown on the left, `"end"` on the right. In RTL, it is reversed. `"start"` is used by default. If there is more than 1 sidenav on either side the container will be considered invalid and none of the sidenavs will be visible or toggleable until the container is valid again. |
+| `position` | `"start"\|"end"` | The position of this sidenav. In LTR direction, `"start"` will be shown on the left, `"end"` on the right. In RTL, it is reversed. `"start"` is used by default. If there is more than 1 sidenav on either side the container will be considered invalid and none of the sidenavs will be visible or toggleable until the container is valid again. |
 | `mode` | `"over"\|"push"\|"side"` | The mode or styling of the sidenav, default being `"over"`. With `"over"` the sidenav will appear above the content, and a backdrop will be shown. With `"push"` the sidenav will push the content of the `<md-sidenav-container>` to the side, and show a backdrop over it. `"side"` will resize the content and keep the sidenav opened. Clicking the backdrop will close sidenavs that do not have `mode="side"`. |
 | `opened` | `boolean` | Whether or not the sidenav is opened. Use this binding to open/close the sidenav. |
 
@@ -68,7 +68,7 @@ Here's a simple example of using the sidenav:
       <br>
       <button md-button #closeStartButton (click)="start.close()">Close</button>
     </md-sidenav>
-    <md-sidenav #end side="end">
+    <md-sidenav #end position="end">
       End Sidenav.
       <button md-button (click)="end.close()">Close</button>
     </md-sidenav>

src/lib/sidenav/drawer-container.html

@@ -6,4 +6,3 @@
 <div class="mat-drawer-content" [ngStyle]="_styles" cdk-scrollable>
   <ng-content></ng-content>
 </div>
-F

src/lib/sidenav/drawer.spec.ts

@@ -372,8 +372,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 {
@@ -384,9 +384,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>
@@ -438,8 +438,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 {
@@ -450,7 +450,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

@@ -80,7 +80,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"',
@@ -98,22 +98,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';
@@ -150,7 +150,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>();
@@ -400,7 +400,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()));
   }
 
@@ -419,7 +419,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.md

@@ -31,7 +31,7 @@ Using the `side` mode on mobile devices can affect the performance and is also n
 [Material Design specification](https://material.io/guidelines/patterns/navigation-drawer.html#navigation-drawer-behavior).
 
 ### Positioning the sidenav
-The `side` property determines whether the sidenav appears at the `"start"` or `"end"` of the
+The `position` property determines whether the sidenav appears at the `"start"` or `"end"` of the
 container. This is affected by the current text direction ("ltr" or "rtl"). By default, the sidenav
 appears at the start of the container.
 

src/lib/sidenav/sidenav.ts

@@ -42,7 +42,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"',