chore(paginator): add paginator demo

Author: andrewseguin

.github/CODEOWNERS

@@ -119,6 +119,7 @@
 /src/demo-app/live-announcer/**                    @jelbourn
 /src/demo-app/menu/**                              @kara @crisbeto
 /src/demo-app/overlay/**                           @jelbourn @crisbeto
+/src/demo-app/paginator/**                         @andrewseguin
 /src/demo-app/platform/**                          @jelbourn @devversion
 /src/demo-app/portal/**                            @jelbourn
 /src/demo-app/progress-bar/**                      @jelbourn @crisbeto @josephperrott

src/demo-app/demo-app/demo-app.ts

@@ -71,6 +71,7 @@ export class DemoApp {
     {name: 'Live Announcer', route: '/live-announcer'},
     {name: 'Menu', route: '/menu'},
     {name: 'Overlay', route: '/overlay'},
+    {name: 'Paginator', route: '/paginator'},
     {name: 'Platform', route: '/platform'},
     {name: 'Portal', route: '/portal'},
     {name: 'Progress Bar', route: '/progress-bar'},

src/demo-app/demo-app/demo-module.ts

@@ -64,6 +64,7 @@ import {TableDemoModule} from '../table/table-demo-module';
 import {BadgeDemo} from '../badge/badge-demo';
 import {TreeDemoModule} from '../tree/tree-demo-module';
 import {ConnectedOverlayDemo, DemoOverlay} from '../connected-overlay/connected-overlay-demo';
+import {PaginatorDemo} from 'paginator/paginator-demo';
 
 @NgModule({
   imports: [
@@ -109,6 +110,7 @@ import {ConnectedOverlayDemo, DemoOverlay} from '../connected-overlay/connected-
     MatCheckboxDemoNestedChecklist,
     MenuDemo,
     OverlayDemo,
+    PaginatorDemo,
     PlatformDemo,
     PortalDemo,
     ProgressBarDemo,

src/demo-app/demo-app/routes.ts

@@ -54,6 +54,7 @@ import {TableDemoPage} from '../table/table-demo-page';
 import {TABLE_DEMO_ROUTES} from '../table/routes';
 import {BadgeDemo} from '../badge/badge-demo';
 import {ConnectedOverlayDemo} from '../connected-overlay/connected-overlay-demo';
+import {PaginatorDemo} from '../paginator/paginator-demo';
 
 export const DEMO_APP_ROUTES: Routes = [
   {path: '', component: DemoApp, children: [
@@ -80,6 +81,7 @@ export const DEMO_APP_ROUTES: Routes = [
     {path: 'live-announcer', component: LiveAnnouncerDemo},
     {path: 'menu', component: MenuDemo},
     {path: 'overlay', component: OverlayDemo},
+    {path: 'paginator', component: PaginatorDemo},
     {path: 'platform', component: PlatformDemo},
     {path: 'portal', component: PortalDemo},
     {path: 'progress-bar', component: ProgressBarDemo},

src/demo-app/paginator/paginator-demo.html

@@ -0,0 +1,35 @@
+<mat-card class="demo-section">
+  <h2>No inputs</h2>
+  <mat-paginator></mat-paginator>
+</mat-card>
+
+<mat-card class="demo-section">
+  <div class="demo-options">
+    <mat-form-field>
+      <input matInput placeholder="Length" type="number" [(ngModel)]="length">
+    </mat-form-field>
+
+    <mat-form-field>
+      <input matInput placeholder="Page Size" type="number" [(ngModel)]="pageSize">
+    </mat-form-field>
+
+    <mat-form-field>
+      <input matInput placeholder="Page Index" type="number" [(ngModel)]="pageIndex">
+    </mat-form-field>
+
+    <mat-slide-toggle [(ngModel)]="hidePageSize">Hide page size</mat-slide-toggle>
+    <mat-slide-toggle [(ngModel)]="showPageSizeOptions">Show multiple page size options</mat-slide-toggle>
+    <mat-slide-toggle [(ngModel)]="showFirstLastButtons">Show first/last buttons</mat-slide-toggle>
+  </div>
+
+  <mat-paginator (page)="handlePageEvent($event)"
+                 [length]="length"
+                 [pageSize]="pageSize"
+                 [showFirstLastButtons]="showFirstLastButtons"
+                 [pageSizeOptions]="showPageSizeOptions ? pageSizeOptions : []"
+                 [hidePageSize]="hidePageSize"
+                 [pageIndex]="pageIndex">
+  </mat-paginator>
+
+  <div> Output event: {{pageEvent | json}} </div>
+</mat-card>

src/demo-app/paginator/paginator-demo.scss

@@ -0,0 +1,15 @@
+.demo-section {
+  max-width: 500px;
+  margin-bottom: 24px;
+  background: #efefef !important;
+
+  & > * {
+    margin: 32px 0;
+  }
+}
+
+.demo-options {
+  display: flex;
+  flex-direction: column;
+  max-width: 300px;
+}

src/demo-app/paginator/paginator-demo.ts

@@ -0,0 +1,37 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Component, ViewEncapsulation} from '@angular/core';
+import {PageEvent} from '@angular/material';
+
+@Component({
+  moduleId: module.id,
+  selector: 'paginator-demo',
+  templateUrl: 'paginator-demo.html',
+  styleUrls: ['paginator-demo.css'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class PaginatorDemo {
+  length = 50;
+  pageSize = 10;
+  pageIndex = 0;
+  pageSizeOptions = [5, 10, 25];
+
+  hidePageSize = false;
+  showPageSizeOptions = true;
+  showFirstLastButtons = true;
+
+  pageEvent: PageEvent;
+
+  handlePageEvent(e: PageEvent) {
+    this.pageEvent = e;
+    this.length = e.length;
+    this.pageSize = e.pageSize;
+    this.pageIndex = e.pageIndex;
+  }
+}