feat: Add Paging component

modules/site/src/app/examples/pagination/pagination-basic-usage.component.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="let 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>

modules/site/src/app/examples/pagination/pagination-basic-usage.component.spec.ts

@@ -0,0 +1,46 @@
+import {
+  beforeEach,
+  beforeEachProviders,
+  describe,
+  expect,
+  it,
+  inject,
+} from '@angular/core/testing';
+import { ComponentFixture, TestComponentBuilder } from '@angular/compiler/testing';
+import { Component } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { PaginationBasicUsageComponent } from './pagination-basic-usage.component';
+
+describe('Component: PaginationBasicUsage', () => {
+  let builder: TestComponentBuilder;
+
+  beforeEachProviders(() => [PaginationBasicUsageComponent]);
+  beforeEach(inject([TestComponentBuilder], function (tcb: TestComponentBuilder) {
+    builder = tcb;
+  }));
+
+  it('should inject the component', inject([PaginationBasicUsageComponent],
+      (component: PaginationBasicUsageComponent) => {
+    expect(component).toBeTruthy();
+  }));
+
+  it('should create the component', inject([], () => {
+    return builder.createAsync(PaginationBasicUsageComponentTestController)
+      .then((fixture: ComponentFixture<any>) => {
+        let query = fixture.debugElement.query(By.directive(PaginationBasicUsageComponent));
+        expect(query).toBeTruthy();
+        expect(query.componentInstance).toBeTruthy();
+      });
+  }));
+});
+
+@Component({
+  selector: 'test',
+  template: `
+    <pagination-basic-usage></pagination-basic-usage>
+  `,
+  directives: [PaginationBasicUsageComponent]
+})
+class PaginationBasicUsageComponentTestController {
+}
+

modules/site/src/app/examples/pagination/pagination-basic-usage.component.ts

@@ -0,0 +1,41 @@
+import { Component } from '@angular/core';
+import {MATERIAL_DIRECTIVES} from "ng2-material";
+
+import {tableDatas} from './pagination-datas';
+
+@Component({
+  moduleId: module.id,
+  selector: 'pagination-basic-usage',
+  templateUrl: 'pagination-basic-usage.component.html',
+  directives: [MATERIAL_DIRECTIVES]
+})
+export class PaginationBasicUsageComponent {
+  materials: Array<any> = tableDatas;
+
+  pagination = {
+    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();
+    }
+  }
+}

modules/site/src/app/examples/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.`,
+  `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.`,
+  `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.`,
+  `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.`
+];

modules/site/src/app/examples/pagination/pagination-split-usage.component.html

@@ -0,0 +1,27 @@
+<md-content class="page-container md-padding" layout="row" layout-wrap layout-align="center start">
+  <md-card [attr.flex]="getFlexSize()" layout="column" *ngFor="let page of displayedPages">
+    <md-card-content>{{ page }}</md-card-content>
+  </md-card>
+
+  <md-pagination
+    class="controls"
+    name="bookPagination"
+    [items-per-page]="false"
+    [range]="false"
+    [model]="pagination"
+    (on-pagination-change)="detectChange($event)"></md-pagination>
+  <md-pagination
+    class="range"
+    name="bookPagination"
+    [model]="pagination"
+    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>

modules/site/src/app/examples/pagination/pagination-split-usage.component.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: 0;
+    }
+
+    .md-pagination-control-next {
+      right: 0;
+    }
+
+    .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;
+  }
+}

modules/site/src/app/examples/pagination/pagination-split-usage.component.spec.ts

@@ -0,0 +1,46 @@
+import {
+  beforeEach,
+  beforeEachProviders,
+  describe,
+  expect,
+  it,
+  inject,
+} from '@angular/core/testing';
+import { ComponentFixture, TestComponentBuilder } from '@angular/compiler/testing';
+import { Component } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { PaginationSplitUsageComponent } from './pagination-split-usage.component';
+
+describe('Component: PaginationSplitUsage', () => {
+  let builder: TestComponentBuilder;
+
+  beforeEachProviders(() => [PaginationSplitUsageComponent]);
+  beforeEach(inject([TestComponentBuilder], function (tcb: TestComponentBuilder) {
+    builder = tcb;
+  }));
+
+  it('should inject the component', inject([PaginationSplitUsageComponent],
+      (component: PaginationSplitUsageComponent) => {
+    expect(component).toBeTruthy();
+  }));
+
+  it('should create the component', inject([], () => {
+    return builder.createAsync(PaginationSplitUsageComponentTestController)
+      .then((fixture: ComponentFixture<any>) => {
+        let query = fixture.debugElement.query(By.directive(PaginationSplitUsageComponent));
+        expect(query).toBeTruthy();
+        expect(query.componentInstance).toBeTruthy();
+      });
+  }));
+});
+
+@Component({
+  selector: 'test',
+  template: `
+    <pagination-split-usage></pagination-split-usage>
+  `,
+  directives: [PaginationSplitUsageComponent]
+})
+class PaginationSplitUsageComponentTestController {
+}
+

modules/site/src/app/examples/pagination/pagination-split-usage.component.ts

@@ -0,0 +1,73 @@
+import {Component, ViewEncapsulation, OnInit, OnDestroy} from '@angular/core';
+import {MATERIAL_DIRECTIVES, Media, MediaListener} from "ng2-material";
+
+import {bookDatas} from './pagination-datas';
+
+@Component({
+  moduleId: module.id,
+  selector: 'pagination-split-usage',
+  templateUrl: 'pagination-split-usage.component.html',
+  styleUrls: ['pagination-split-usage.component.css'],
+  directives: [MATERIAL_DIRECTIVES],
+  encapsulation: ViewEncapsulation.None
+})
+export class PaginationSplitUsageComponent implements OnInit, OnDestroy {
+  pages: Array<string> = bookDatas;
+
+  pagination: any = {
+    currentPage: 1,
+    itemsPerPage: 2,
+    totalItems: 6
+  };
+
+  rangeFormat: string;
+
+  displayedPages: Array<string> = [];
+
+  mediaListener: MediaListener;
+
+  constructor(private media: Media) {}
+
+  refreshPageBySize() {
+    if (this.media.hasMedia('xs')) {
+      this.pagination.itemsPerPage = 1;
+      this.rangeFormat = `<span flex="${this.getFlexSize()}" layout="column" class="page-number">{start}</span>`;
+    } else {
+      this.pagination.itemsPerPage = 2;
+      this.rangeFormat = ` 
+          <span flex="${this.getFlexSize()}" layout="column" class="page-number">{start}</span>
+          <span flex="${this.getFlexSize()}" layout="column" class="page-number">{end}</span>
+        `;
+    }
+
+    this.pagination.currentPage = 1;
+
+    this.refreshPages();
+  }
+
+  getFlexSize() {
+    return Math.round(100 / this.pagination.itemsPerPage);
+  }
+
+  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();
+    }
+  }
+
+  ngOnInit() {
+    this.mediaListener = this.media.listen(Media.getQuery('xs'));
+    this.mediaListener.onMatched.subscribe(this.refreshPageBySize.bind(this));
+  }
+
+  ngOnDestroy() {
+    this.mediaListener.destroy();
+  }
+}

modules/site/src/app/index.ts

@@ -9,6 +9,8 @@ import {DialogBasicUsageComponent} from './examples/dialog/dialog-basic-usage.co
 import {ElevationBasicUsageComponent} from './examples/elevation/elevation-basic-usage.component';
 import {InputBasicUsageComponent} from './examples/input/input-basic-usage.component';
 import {ListBasicUsageComponent} from './examples/list/list-basic-usage.component';
+import {PaginationBasicUsageComponent} from './examples/pagination/pagination-basic-usage.component';
+import {PaginationSplitUsageComponent} from './examples/pagination/pagination-split-usage.component';
 import {ProgressBarBasicUsageComponent} from './examples/progress-bar/progress-bar-basic-usage.component';
 import {ProgressCircleBasicUsageComponent} from './examples/progress-circle/progress-circle-basic-usage.component';
 import {RadioBasicUsageComponent} from './examples/radio/radio-basic-usage.component';
@@ -30,8 +32,8 @@ export const DEMO_DIRECTIVES: any[] = [
   ElevationBasicUsageComponent, ButtonBasicUsageComponent, CardActionButtonsComponent,
   CardBasicUsageComponent, CardInlineActionsComponent, CheckboxBasicUsageComponent,
   DataTableBasicUsageComponent, DataTableSelectableRowsComponent, DialogBasicUsageComponent,
-  InputBasicUsageComponent, ListBasicUsageComponent, ProgressBarBasicUsageComponent,
-  ProgressCircleBasicUsageComponent, RadioBasicUsageComponent, SidenavBasicUsageComponent,
+  InputBasicUsageComponent, ListBasicUsageComponent, PaginationBasicUsageComponent, PaginationSplitUsageComponent,
+  ProgressBarBasicUsageComponent, ProgressCircleBasicUsageComponent, RadioBasicUsageComponent, SidenavBasicUsageComponent,
   SwitchBasicUsageComponent, TabsDynamicHeightComponent, TabsDynamicTabsComponent,
   ToolbarBasicUsageComponent
 ];

src/components.scss

@@ -8,6 +8,7 @@
 @import "components/icon/icon";
 @import "components/list/list";
 @import "components/form/messages";
+@import "components/pagination/pagination";
 @import "components/peekaboo/peekaboo";
 @import "components/subheader/subheader";
 @import "components/switch/switch";