shorten inputs, fix scss, other comments

Author: andrewseguin

package-lock.json

@@ -48,9 +48,9 @@
   </cdk-table>
 
   <md-paginator #paginator
-                [listLength]="_peopleDatabase.data.length"
-                [currentPageIndex]="0"
-                [pageLength]="10"
-                [pageLengthOptions]="[5, 10, 25, 100]">
+                [length]="_peopleDatabase.data.length"
+                [pageIndex]="0"
+                [pageSize]="10"
+                [pageSizeOptions]="[5, 10, 25, 100]">
   </md-paginator>
 </div>

src/demo-app/data-table/data-table-demo.html

@@ -1,4 +1,4 @@
-import {CollectionViewer, DataSource, MdPaginator, PageChangeEvent} from '@angular/material';
+import {CollectionViewer, DataSource, MdPaginator, PageEvent} from '@angular/material';
 import {Observable} from 'rxjs/Observable';
 import {PeopleDatabase, UserData} from './people-database';
 import {BehaviorSubject} from 'rxjs/BehaviorSubject';
@@ -16,7 +16,7 @@ export class PersonDataSource extends DataSource<any> {
 
     // Subscribe to page changes by clearing the cached data and
     // determining the updated display data.
-    this._paginator.pageChange.subscribe(() => {
+    this._paginator.page.subscribe(() => {
       this._renderedData = [];
       this.updateDisplayData();
     });
@@ -50,8 +50,8 @@ export class PersonDataSource extends DataSource<any> {
     const data = this._peopleDatabase.data.slice();
 
     // Grab the page's slice of data.
-    const startIndex = this._paginator.currentPageIndex * this._paginator.pageLength;
-    const paginatedData = data.splice(startIndex, this._paginator.pageLength);
+    const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
+    const paginatedData = data.splice(startIndex, this._paginator.pageSize);
 
     this._displayData.next(paginatedData);
   }

src/demo-app/data-table/person-data-source.ts

@@ -17,9 +17,11 @@
     border-right: 2px solid mat-color($foreground, 'icon');
   }
 
-  .mat-icon-button[disabled] .mat-paginator-increment,
-  .mat-icon-button[disabled] .mat-paginator-decrement {
-    border-color: mat-color($foreground, 'disabled');
+  .mat-icon-button[disabled] {
+    .mat-paginator-increment,
+    .mat-paginator-decrement {
+      border-color: mat-color($foreground, 'disabled');
+    }
   }
 }
 

src/lib/paginator/_paginator-theme.scss

@@ -24,18 +24,18 @@ export class MdPaginatorIntl {
   previousPageLabel = 'Previous page';
 
   /** A label for the range of items within the current page and the length of the whole list. */
-  getRangeLabel(currentPage: number, pageSize: number, listLength: number) {
-    if (listLength == 0 || pageSize == 0) { return `0 of ${listLength}`; }
+  getRangeLabel(pageIndex: number, pageSize: number, length: number) {
+    if (length == 0 || pageSize == 0) { return `0 of ${length}`; }
 
-    listLength = Math.max(listLength, 0);
+    length = Math.max(length, 0);
 
-    const startIndex = currentPage * pageSize;
+    const startIndex = pageIndex * pageSize;
 
     // If the start index exceeds the list length, do not try and fix the end index to the end.
-    const endIndex = startIndex < listLength ?
-        Math.min(startIndex + pageSize, listLength) :
+    const endIndex = startIndex < length ?
+        Math.min(startIndex + pageSize, length) :
         startIndex + pageSize;
 
-    return `${startIndex + 1} - ${endIndex} of ${listLength}`;
+    return `${startIndex + 1} - ${endIndex} of ${length}`;
   }
 }

src/lib/paginator/paginator-intl.ts

@@ -3,37 +3,37 @@
     {{_intl.itemsPerPageLabel}}
   </div>
 
-  <md-select *ngIf="_displayedPageLengthOptions.length > 1"
-             [ngModel]="pageLength"
+  <md-select *ngIf="_displayedPageSizeOptions.length > 1"
+             [ngModel]="pageSize"
              [aria-label]="_intl.itemsPerPageLabel"
-             (change)="_changePageLength($event.value)">
-    <md-option *ngFor="let pageLengthOption of _displayedPageLengthOptions" [value]="pageLengthOption">
-      {{pageLengthOption}}
+             (change)="_changePageSize($event.value)">
+    <md-option *ngFor="let pageSizeOption of _displayedPageSizeOptions" [value]="pageSizeOption">
+      {{pageSizeOption}}
     </md-option>
   </md-select>
 
-  <div *ngIf="_displayedPageLengthOptions.length <= 1">{{pageLength}}</div>
+  <div *ngIf="_displayedPageSizeOptions.length <= 1">{{pageSize}}</div>
 </div>
 
 <div class="mat-paginator-range-label">
-  {{_intl.getRangeLabel(currentPageIndex, pageLength, listLength)}}
+  {{_intl.getRangeLabel(pageIndex, pageSize, length)}}
 </div>
 
 <button md-icon-button
-        class="mat-paginator-navigation-button mat-paginator-navigation-previous"
-        (click)="navigateToPreviousPage()"
+        class="mat-paginator-navigation-previous"
+        (click)="previousPage()"
         [attr.aria-label]="_intl.previousPageLabel"
         [mdTooltip]="_intl.previousPageLabel"
         [mdTooltipPosition]="'above'"
-        [disabled]="!canNavigateToPreviousPage(-1)">
+        [disabled]="!hasPreviousPage()">
   <div class="mat-paginator-increment"></div>
 </button>
 <button md-icon-button
-        class="mat-paginator-navigation-button mat-paginator-navigation-next"
-        (click)="navigateToNextPage()"
+        class="mat-paginator-navigation-next"
+        (click)="nextPage()"
         [attr.aria-label]="_intl.nextPageLabel"
         [mdTooltip]="_intl.nextPageLabel"
         [mdTooltipPosition]="'above'"
-        [disabled]="!canNavigateToNextPage(1)">
+        [disabled]="!hasNextPage()">
   <div class="mat-paginator-decrement"></div>
 </button>

src/lib/paginator/paginator.html

@@ -1,24 +1,23 @@
-`<md-paginator>` is a component that provides navigation between paged information. It supports
- the changing of page length as well as giving the user buttons to navigate to the previous or next
- page.
+`<md-paginator>` is a navigation for pages information, typically used with a data-table.
 
 <!-- example(pagination-overview) -->
 
-To use the paginator, you must provide the total length of the pagination information list and
-the length of each page. To allow the end-user to change the page length list, you may optionally
-input an array of numbers that the user may select from.
+### Basic use
+Each paginator instance requires:
+* The current page index
+* The number of items per page
+* The total number of items being paged
 
-Additionally you may provide an input of what the current page index should be. Note that
-a non-zero index will be interpretted to display the first page, whereas if the page index is beyond
-the max number of pages, then this will be reflected to the user (e.g. `140 - 149 of 100 items`).
+When the user interacts with the paginator, a `PageEvent` will be fired that can be used to update
+any associated data view.
 
-When the user changes the page length, or navigates between pages, the paginator will output a
-`PageChangeEvent` that contains the paginator's context, including the list length,
+### Page size options
+The paginator displays a dropdown of page sizes for the user to choose from. The options for this
+dropdown can be set via `pageSizeOptions`
 
 ### Internationalization
-In order to support internationalization or customization of the displayed text, the paginator
-supports an injection of a custom class that extends `MdPaginatorIntl`. This will allow you to
-change the following:
+The labels for the paginator can be customized by providing your own instance of `MdPaginatorIntl`.
+This will allow you to change the following:
  1. The label for the length of each page.
  2. The range text displayed to the user.
  3. The tooltip messages on the navigation buttons.

src/lib/paginator/paginator.md

@@ -1,44 +1,60 @@
+$mat-paginator-height: 56px;
+$mat-paginator-padding: 0 8px;
+
+$mat-paginator-items-per-page-label-margin: 0 4px;
+$mat-paginator-selector-margin: 0 4px;
+$mat-paginator-selector-trigger-min-width: 56px;
+
+$mat-paginator-range-label-margin: 0 32px;
+
+$mat-paginator-button-margin: 8px;
+$mat-paginator-button-icon-height: 8px;
+$mat-paginator-button-icon-width: 8px;
+
+$mat-paginator-button-decrement-icon-margin: 12px;
+$mat-paginator-button-increment-icon-margin: 16px;
+
 .mat-paginator {
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  min-height: 56px;
-  padding: 0 8px;
+  min-height: $mat-paginator-height;
+  padding: $mat-paginator-padding;
 }
 
 .mat-paginator-items-per-page-label {
-  margin: 0 4px;
+  margin: $mat-paginator-items-per-page-label-margin;
 }
 
 .mat-paginator-page-length-select {
   display: flex;
   align-items: center;
 
   .mat-select {
-    margin: 0 4px;
+    margin: $mat-paginator-selector-margin;
   }
 
   .mat-select-trigger {
-    min-width: 56px;
+    min-width: $mat-paginator-selector-trigger-min-width;
   }
 }
 
 .mat-paginator-range-label {
-  margin: 0 32px;
+  margin: $mat-paginator-range-label-margin;
 }
 
 .mat-paginator-increment-button + .mat-paginator-increment-button {
-  margin: 0 0 0 8px;
+  margin: 0 0 0 $mat-paginator-button-margin;
 
   [dir='rtl'] & {
-    margin: 0 8px 0 0;
+    margin: 0 $mat-paginator-button-margin 0 0;
   }
 }
 
 .mat-paginator-increment,
 .mat-paginator-decrement {
-  width: 8px;
-  height: 8px;
+  width: $mat-paginator-button-icon-width;
+  height: $mat-paginator-button-icon-height;
 }
 
 .mat-paginator-decrement,
@@ -51,15 +67,15 @@
 }
 
 .mat-paginator-decrement {
-  margin-left: 12px;
+  margin-left: $mat-paginator-button-decrement-icon-margin;
   [dir='rtl'] & {
-    margin-right: 12px;
+    margin-right: $mat-paginator-button-decrement-icon-margin;
   }
 }
 
 .mat-paginator-increment {
-  margin-left: 16px;
+  margin-left: $mat-paginator-button-increment-icon-margin;
   [dir='rtl'] & {
-    margin-right: 16px;
+    margin-right: $mat-paginator-button-increment-icon-margin;
   }
 }