feat: Add Paging component

feat: add style for MdPaging
docs: Add documentation about MdPaging

examples/all.ts

@@ -11,6 +11,8 @@ import DataTableSelectableUsage from './components/data_table/selectable_usage';
 import DialogBasicUsage from "./components/dialog/basic_usage";
 import ToolbarBasicUsage from "./components/toolbar/basic_usage";
 import ToolbarScrollShrink from "./components/toolbar/scroll_shrink";
+import PaginationBasicUsage from "./components/pagination/basic_usage";
+import PaginationSplitUsage from "./components/pagination/split_usage";
 import ProgressLinearBasicUsage from "./components/progress_linear/basic_usage";
 import ProgressCircularBasicUsage from "./components/progress_circular/basic_usage";
 import RadioBasicUsage from "./components/radio/basic_usage";
@@ -37,6 +39,7 @@ export const DEMO_DIRECTIVES: Type[] = CONST_EXPR([
   InputBasicUsage,
   InputFormBuilder,
   ListBasicUsage,
+  PaginationBasicUsage, PaginationSplitUsage,
   RadioBasicUsage,
   SwitchBasicUsage,
   TabsDynamicHeight,

examples/components/pagination/basic_usage.html

@@ -0,0 +1,18 @@
+<md-pagination [model]="pagination" (on-pagination-change)="detectChange($event)" [items-per-page-options]="availableLength"></md-pagination>
+
+<md-data-table layout-fill>
+  <thead>
+  <tr>
+    <th class="md-text-cell">Material</th>
+    <th>Quantity</th>
+  </tr>
+  </thead>
+  <tbody>
+  <tr *ngFor="#material of pagedMaterials">
+    <td class="md-text-cell">{{ material.name }}</td>
+    <td>{{ material.quantity }}</td>
+  </tr>
+  </tbody>
+</md-data-table>
+
+<md-pagination [model]="pagination" (on-pagination-change)="detectChange($event)" [items-per-page-options]="availableLength"></md-pagination>

examples/components/pagination/basic_usage.ts

@@ -0,0 +1,41 @@
+import {Component} from "angular2/core";
+import {MATERIAL_DIRECTIVES} from "ng2-material/all";
+
+import {tableDatas} from './pagination_datas';
+import {IPaginationModel} from '../../../ng2-material/components/pagination/pagination';
+
+@Component({
+  selector: 'pagination-basic-usage',
+  templateUrl: 'examples/components/pagination/basic_usage.html',
+  directives: [MATERIAL_DIRECTIVES]
+})
+export default class PaginationBasicUsage {
+  materials: Array<any> = tableDatas;
+
+  pagination: IPaginationModel = {
+    currentPage: 1,
+    itemsPerPage: 5,
+    totalItems: 24
+  };
+
+  availableLength: Array<number> = [5, 10, 20];
+
+  pagedMaterials: Array<any> = [];
+
+  constructor() {
+    this.refreshMaterials();
+  }
+
+  refreshMaterials() {
+    let start = (this.pagination.currentPage - 1) * this.pagination.itemsPerPage,
+      end = start + this.pagination.itemsPerPage;
+    this.pagedMaterials = this.materials.slice(start, end);
+  }
+
+  detectChange(event) {
+    if (event !== undefined && event.name === 'pagination_changed' && event.pagination !== undefined) {
+      this.pagination = event.pagination;
+      this.refreshMaterials();
+    }
+  }
+}

examples/components/pagination/pagination_datas.ts

@@ -0,0 +1,35 @@
+export let tableDatas = [
+  {'name': 'Hydrogen', 'quantity': '25', 'price': '$2.90'},
+  {'name': 'Helium', 'quantity': '50', 'price': '$3.10'},
+  {'name': 'Lithium', 'quantity': '10', 'price': '$1.99'},
+  {'name': 'Beryllium', 'quantity': '42', 'price': '$2.60'},
+  {'name': 'Boron', 'quantity': '11', 'price': '$2.00'},
+  {'name': 'Carbon', 'quantity': '5', 'price': '$3.65'},
+  {'name': 'Nitrogen', 'quantity': '3', 'price': '$2.20'},
+  {'name': 'Oxygen', 'quantity': '0', 'price': '$2.25'},
+  {'name': 'Fluorine', 'quantity': '12', 'price': '$2.90'},
+  {'name': 'Neon', 'quantity': '22', 'price': '$2.80'},
+  {'name': 'Sodium', 'quantity': '15', 'price': '$2.85'},
+  {'name': 'Magnesium', 'quantity': '41', 'price': '$2.05'},
+  {'name': 'Aluminum', 'quantity': '33', 'price': '$1.75'},
+  {'name': 'Silicon', 'quantity': '8', 'price': '$2.12'},
+  {'name': 'Phosphorus', 'quantity': '2', 'price': '$2.15'},
+  {'name': 'Sulfur', 'quantity': '9', 'price': '$2.00'},
+  {'name': 'Chlorine', 'quantity': '3', 'price': '$2.60'},
+  {'name': 'Argon', 'quantity': '13', 'price': '$2.49'},
+  {'name': 'Potassium', 'quantity': '11', 'price': '$1.99'},
+  {'name': 'Calcium', 'quantity': '1', 'price': '$2.08'},
+  {'name': 'Scandium', 'quantity': '4', 'price': '$2.80'},
+  {'name': 'Titanium', 'quantity': '6', 'price': '$2.40'},
+  {'name': 'Vanadium', 'quantity': '5', 'price': '$2.50'},
+  {'name': 'Chromium', 'quantity': '12', 'price': '$2.00'}
+];
+
+export let bookDatas = [
+  `Vivamus laoreet tincidunt sapien, ut efficitur magna rutrum eget. Aliquam lacinia iaculis ligula, vel volutpat tellus malesuada a. Mauris consequat, orci ut laoreet aliquam, sapien ex lacinia nisi, congue euismod massa erat nec orci. Nulla scelerisque lobortis orci, eu egestas libero scelerisque sed. Cras eleifend urna in felis vulputate vestibulum. Integer pellentesque, quam quis lacinia ultrices, odio massa pharetra quam, eget vehicula turpis odio eget magna. Sed viverra venenatis risus. Maecenas iaculis ultricies nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque iaculis malesuada arcu ut vestibulum. Mauris iaculis nisl id odio vehicula, ac venenatis arcu elementum. Donec faucibus pretium est et dictum. Mauris sed erat vitae lectus facilisis molestie a laoreet risus. Nam pulvinar commodo facilisis. Aenean laoreet nec arcu sed ultricies. Etiam ut ultrices urna, sed convallis est. In sem quam, rutrum molestie risus non, fermentum feugiat velit. Morbi ut tincidunt felis. Vivamus aliquam nec enim eget consectetur. Suspendisse odio neque, vulputate quis viverra eu, sagittis a tellus. Donec pulvinar eleifend pulvinar. Donec in felis commodo, vehicula est sed, viverra velit. Nullam aliquam urna sed massa convallis maximus. Quisque pharetra ipsum nec congue sollicitudin. Quisque posuere nec massa in iaculis. Etiam rhoncus accumsan nulla vitae fermentum. Pellentesque faucibus, purus iaculis fermentum placerat, quam massa eleifend felis, ut lobortis eros orci at nulla. Nam consequat metus nec orci lobortis, sit amet lacinia lectus euismod. Integer vel condimentum eros.`,
+  `Mauris gravida commodo ex nec sagittis. Proin feugiat dui odio, et efficitur lacus pharetra a. In non ligula sed turpis malesuada placerat et et massa. Curabitur sit amet sagittis ipsum, vitae aliquet magna. Praesent venenatis lorem vel diam finibus, vel sollicitudin eros interdum. In lacinia nunc nulla, et congue turpis convallis et. Nam vestibulum magna id ante consectetur aliquet. Donec bibendum, neque nec lobortis gravida, sem odio viverra urna, vel vestibulum dolor nisi a elit. Proin arcu justo, pharetra in pharetra vitae, semper vitae dui. Pellentesque rutrum nec odio at luctus. Proin eleifend posuere elit id condimentum. Etiam eleifend augue ultrices enim ornare, et pretium quam sollicitudin. Morbi ante nunc, malesuada nec risus non, sagittis iaculis velit. Donec eget dui non dolor accumsan porttitor. Aliquam vel eleifend dui. Vestibulum dignissim consectetur neque, vel ornare nulla eleifend ac. Morbi a fermentum justo. Vivamus vitae quam molestie, hendrerit purus non, luctus nisi. Morbi posuere, justo non sodales semper, mauris orci bibendum magna, quis suscipit magna velit id dolor. Quisque consequat eros eu malesuada iaculis. Donec vel vehicula felis, sit amet viverra quam. Proin posuere quam vel laoreet dictum. Nulla fringilla orci quis turpis laoreet, in rhoncus lectus malesuada. Sed nec fermentum turpis. Donec in purus at dolor gravida gravida sit amet vitae lacus. Phasellus aliquam libero nisi, eu consequat nulla molestie nec. Ut sodales nisl eget odio finibus dictum. Mauris nec convallis massa. Nulla venenatis nunc non massa fermentum interdum.`,
+  `Etiam ut ultrices urna, sed convallis est. In sem quam, rutrum molestie risus non, fermentum feugiat velit. Morbi ut tincidunt felis. Vivamus aliquam nec enim eget consectetur. Suspendisse odio neque, vulputate quis viverra eu, sagittis a tellus. Donec pulvinar eleifend pulvinar. Donec in felis commodo, vehicula est sed, viverra velit. Nullam aliquam urna sed massa convallis maximus. Quisque pharetra ipsum nec congue sollicitudin. Quisque posuere nec massa in iaculis. Etiam rhoncus accumsan nulla vitae fermentum. Pellentesque faucibus, purus iaculis fermentum placerat, quam massa eleifend felis, ut lobortis eros orci at nulla. Nam consequat metus nec orci lobortis, sit amet lacinia lectus euismod. Integer vel condimentum eros. Nunc sed feugiat libero. Ut ultricies erat in metus hendrerit viverra. Maecenas tincidunt a justo in pharetra. Phasellus rutrum turpis ac odio convallis posuere eget sed sapien. Nulla placerat laoreet risus, non iaculis nibh viverra sed. Pellentesque hendrerit eros at turpis posuere consequat. Proin pellentesque tincidunt magna a eleifend. Aliquam eleifend at tortor sit amet hendrerit. Vivamus egestas, turpis id dignissim interdum, est odio mattis odio, eu volutpat libero mi vel elit. Ut condimentum aliquam magna eget maximus. Nullam eleifend risus non posuere dapibus. Pellentesque rhoncus orci eu cursus auctor. In dui tortor, dignissim porta pulvinar ut, posuere id odio. Aliquam facilisis nisi a elit interdum iaculis. Fusce et nibh posuere, blandit turpis a, accumsan tortor.`,
+  `Nunc sed feugiat libero. Ut ultricies erat in metus hendrerit viverra. Maecenas tincidunt a justo in pharetra. Phasellus rutrum turpis ac odio convallis posuere eget sed sapien. Nulla placerat laoreet risus, non iaculis nibh viverra sed. Pellentesque hendrerit eros at turpis posuere consequat. Proin pellentesque tincidunt magna a eleifend. Aliquam eleifend at tortor sit amet hendrerit. Vivamus egestas, turpis id dignissim interdum, est odio mattis odio, eu volutpat libero mi vel elit. Ut condimentum aliquam magna eget maximus. Nullam eleifend risus non posuere dapibus. Pellentesque rhoncus orci eu cursus auctor. In dui tortor, dignissim porta pulvinar ut, posuere id odio. Aliquam facilisis nisi a elit interdum iaculis. Fusce et nibh posuere, blandit turpis a, accumsan tortor. Proin posuere quam vel laoreet dictum. Nulla fringilla orci quis turpis laoreet, in rhoncus lectus malesuada. Sed nec fermentum turpis. Donec in purus at dolor gravida gravida sit amet vitae lacus. Phasellus aliquam libero nisi, eu consequat nulla molestie nec. `,
+  `Aliquam erat volutpat. Nam volutpat fermentum porttitor. Nulla facilisi. Nullam feugiat enim in urna aliquam porttitor. Maecenas non lectus elit. Duis vitae dolor in nisi egestas posuere. Cras placerat laoreet dolor, nec dapibus ex pulvinar in. Nam volutpat dignissim maximus. Etiam sit amet lacus quis lectus hendrerit placerat. Quisque scelerisque vitae risus vitae pretium. Vivamus malesuada dui ac interdum luctus. Duis vitae justo tincidunt, aliquet tortor a, rutrum libero. Suspendisse ultrices condimentum tempor. In sit amet convallis odio. Curabitur lectus nisi, porttitor a auctor eu, maximus sed ligula. Maecenas aliquam eros ut nibh aliquam, eget porttitor odio gravida. Proin posuere quam vel laoreet dictum. Nulla fringilla orci quis turpis laoreet, in rhoncus lectus malesuada. Sed nec fermentum turpis. Donec in purus at dolor gravida gravida sit amet vitae lacus. Phasellus aliquam libero nisi, eu consequat nulla molestie nec. `,
+  `Aliquam vel eleifend dui. Vestibulum dignissim consectetur neque, vel ornare nulla eleifend ac. Morbi a fermentum justo. Vivamus vitae quam molestie, hendrerit purus non, luctus nisi. Morbi posuere, justo non sodales semper, mauris orci bibendum magna, quis suscipit magna velit id dolor. Quisque consequat eros eu malesuada iaculis. Donec vel vehicula felis, sit amet viverra quam. Proin posuere quam vel laoreet dictum. Nulla fringilla orci quis turpis laoreet, in rhoncus lectus malesuada. Sed nec fermentum turpis. Donec in purus at dolor gravida gravida sit amet vitae lacus. Phasellus aliquam libero nisi, eu consequat nulla molestie nec. Ut sodales nisl eget odio finibus dictum. Mauris nec convallis massa. Nulla venenatis nunc non massa fermentum interdum.`
+];

examples/components/pagination/split_usage.html

@@ -0,0 +1,26 @@
+<md-content class="page-container md-padding" layout="row" layout-wrap layout-align="center start">
+  <md-card flex="50" layout="column" *ngFor="#page of displayedPages">
+    <md-card-content>{{ page }}</md-card-content>
+  </md-card>
+
+  <md-pagination
+    class="controls"
+    name="bookPagination"
+    [length-selector]="false"
+    [range]="false"
+    [model]="pagination"
+    (on-pagination-change)="detectChange($event)"></md-pagination>
+  <md-pagination
+    class="range"
+    name="bookPagination"
+    layout="row"
+    (on-pagination-change)="detectChange($event)">
+    <md-pagination-range
+      [model]="pagination"
+      [name]="bookPagination"
+      [range-format]="rangeFormat"
+      layout="row"
+      layout-wrap layout-align="center start"></md-pagination-range>
+  </md-pagination>
+
+</md-content>

examples/components/pagination/split_usage.scss

@@ -0,0 +1,63 @@
+@import "../../../ng2-material/core/style/variables";
+@import "../../../ng2-material/core/style/default-theme";
+@import "../../../ng2-material/components/whiteframe/whiteframe";
+
+pagination-split-usage {
+  .page-container {
+    position: relative;
+    align-items: stretch;
+  }
+
+  md-card {
+    margin: 0;
+
+    md-card-content {
+      padding: 30px 30px 40px;
+    }
+  }
+
+  .controls {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    .md-pagination-control {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      margin: auto;
+      width: 35px;
+      height: 35px;
+      vertical-align: middle;
+    }
+
+    .md-pagination-control-previous {
+      left: 5px;
+    }
+
+    .md-pagination-control-next {
+      right: 5px;
+    }
+
+    .material-icons {
+      @extend .md-whiteframe-1dp;
+      width: 35px;
+      height: 35px;
+      background: #FFF;
+    }
+  }
+
+  .md-pagination-range {
+    position: absolute;
+    right: 0;
+    bottom: 20px;
+    left: 0;
+  }
+
+  .page-number {
+    padding: 0 10px;
+    font-weight: bold;
+  }
+}

examples/components/pagination/split_usage.ts

@@ -0,0 +1,45 @@
+import {Component, ViewEncapsulation} from "angular2/core";
+import {MATERIAL_DIRECTIVES} from "ng2-material/all";
+
+import {bookDatas} from './pagination_datas';
+
+@Component({
+  selector: 'pagination-split-usage',
+  templateUrl: 'examples/components/pagination/split_usage.html',
+  styleUrls: ['examples/components/pagination/split_usage.css'],
+  directives: [MATERIAL_DIRECTIVES],
+  encapsulation: ViewEncapsulation.None
+})
+export default class PaginationSplitUsage {
+  pages: Array<string> = bookDatas;
+
+  pagination: any = {
+    currentPage: 1,
+    itemsPerPage: 2,
+    totalItems: 6
+  };
+
+  rangeFormat: string = ` 
+    <span flex="50" layout="column" class="page-number">{start}</span>
+    <span flex="50" layout="column" class="page-number">{end}</span>
+  `;
+
+  displayedPages: Array<string> = [];
+
+  constructor() {
+    this.refreshPages();
+  }
+
+  refreshPages() {
+    let start = (this.pagination.currentPage - 1) * this.pagination.itemsPerPage,
+      end = start + this.pagination.itemsPerPage;
+    this.displayedPages = this.pages.slice(start, end);
+  }
+
+  detectChange(event) {
+    if (event !== undefined && event.name === 'pagination_changed' && event.pagination !== undefined) {
+      this.pagination = event.pagination;
+      this.refreshPages();
+    }
+  }
+}

ng2-material/all.ts

@@ -18,6 +18,8 @@ import {
 import {MdMessage, MdMessages} from "./components/form/messages";
 import {MdInput, MdInputContainer} from "./components/input/input";
 import {MdList, MdListItem} from "./components/list/list";
+import {MdPagination, MdPaginationRange, MdPaginationControls, MdPaginationItemsPerPageOptions} from "./components/pagination/pagination";
+import {PaginationService} from "./components/pagination/pagination_service";
 import {MdProgressLinear} from "./components/progress_linear/progress_linear";
 import {MdProgressCircular} from "./components/progress_circular/progress_circular";
 import {MdPeekaboo} from "./components/peekaboo/peekaboo";
@@ -52,6 +54,9 @@ export * from './components/input/input';
 
 export * from './components/list/list';
 
+export * from './components/pagination/pagination';
+export * from './components/pagination/pagination_service';
+
 export * from './components/progress_linear/progress_linear';
 
 export * from './components/progress_circular/progress_circular';
@@ -96,6 +101,7 @@ export const MATERIAL_DIRECTIVES: Type[] = CONST_EXPR([
   MdNumberRequiredValidator,
   MdMessage, MdMessages,
   MdList, MdListItem,
+  MdPagination, MdPaginationRange, MdPaginationControls, MdPaginationItemsPerPageOptions,
   MdPeekaboo,
   MdProgressLinear,
   MdProgressCircular,
@@ -114,6 +120,7 @@ export const MATERIAL_NODE_PROVIDERS: any[] = CONST_EXPR([
   provide(ViewportHelper, {useClass: NodeViewportHelper}),
   MdDialog,
   Media,
+  PaginationService,
   SidenavService,
   MdRadioDispatcher,
   INPUT_VALIDATORS

ng2-material/components.scss

@@ -11,6 +11,7 @@
 @import "components/list/list";
 @import "components/form/messages";
 @import "components/peekaboo/peekaboo";
+@import "components/pagination/pagination";
 @import "components/progress_circular/progress_circular";
 @import "components/progress_linear/progress_linear";
 @import "components/radio/radio_button";

ng2-material/components/pagination/README.md

@@ -0,0 +1,67 @@
+# MdPagination
+MdPagination allow you to use pagination related to your datas. There's any real recommandations about pagination 
+but this component follow [this example](http://www.google.com/design/spec/components/data-tables.html#data-tables-interaction)
+
+## MdPagination
+
+Main component of the pagination
+
+### Properties
+| Name | Type | Description |
+| --- | --- | --- |
+| name | string | Group pagination by name to enable multiple instance of MdPagination on the same page |
+| model | IPaginationModel | Model that include pagination informations: *currentPage*, *itemsPerPage*, *totalItems* |
+| controls | boolean | Toggle the display of controls |
+| range | boolean | Toggle the display of range |
+| rangeFormat | string | Override the default format of the range by using `{start}`, `{end}`, `{total}` keys |
+| lengthSelector | boolean | Toggle the display of length selector |
+| itemsPerPageBefore | string | Prepend length selector with a string |
+| itemsPerPageAfter | string | Append length selector with a string |
+| itemsPerPageOptions | Array<number> | available lengths to display in the combobox. If you don't provide choices, the selector won't be displayed |
+           
+### Events
+| Name | Type | Description |
+| --- | --- | --- |
+| onPaginationChange | EventEmitter<IPaginationChange> | Emitted when something change on the model: *currentPage*, *itemsPerPage*, *totalItems* |
+
+
+## MdPaginationItemsPerPageOptions
+
+Length selector component
+
+### Properties
+| Name | Type | Description |
+| --- | --- | --- |
+| name | string | Group pagination by name to enable multiple instance of MdPagination on the same page |
+| model | IPaginationModel | Model that include pagination informations: *currentPage*, *itemsPerPage*, *totalItems* |
+| itemsPerPageBefore | string | Prepend length selector with a string |
+| itemsPerPageAfter | string | Append length selector with a string |
+| itemsPerPageOptions | Array<number> | available lengths to display in the combobox. If you don't provide choices, the selector won't be displayed |
+
+
+## MdPaginationControls
+
+Pagination controls component
+
+### Properties
+| Name | Type | Description |
+| --- | --- | --- |
+| name | string | Group pagination by name to enable multiple instance of MdPagination on the same page |
+| model | IPaginationModel | Model that include pagination informations: *currentPage*, *itemsPerPage*, *totalItems* |
+
+
+## MdPaginationRange
+
+Range display component
+
+### Properties
+| Name | Type | Description |
+| --- | --- | --- |
+| name | string | Group pagination by name to enable multiple instance of MdPagination on the same page |
+| model | IPaginationModel | Model that include pagination informations: *currentPage*, *itemsPerPage*, *totalItems* |
+| rangeFormat | string | Override the default format of the range by using `{start}`, `{end}`, `{total}` keys |
+
+## PaginationService
+
+It's the service that help pagination components to communicate between them. You can subscribe to the `onChange` property or push changes via `change` function of this service 
+but you should avoid this and prefer subscribing to `onPaginationChange` output of `MdPagination`.