feat(material-experimental/mdc-paginator): implement MDC-based paginator

.github/CODEOWNERS

@@ -109,6 +109,7 @@
 /src/material-experimental/mdc-list/**             @mmalerba @devversion
 /src/material-experimental/mdc-menu/**             @crisbeto
 /src/material-experimental/mdc-select/**           @crisbeto
+/src/material-experimental/mdc-paginator/**        @crisbeto
 /src/material-experimental/mdc-progress-spinner/** @andrewseguin
 /src/material-experimental/mdc-progress-bar/**     @andrewseguin
 /src/material-experimental/mdc-radio/**            @mmalerba
@@ -183,6 +184,7 @@
 /src/dev-app/mdc-input/**                          @devversion @mmalerba
 /src/dev-app/mdc-list/**                           @mmalerba
 /src/dev-app/mdc-menu/**                           @crisbeto
+/src/dev-app/mdc-paginator/**                      @crisbeto
 /src/dev-app/mdc-progress-bar/**                   @crisbeto
 /src/dev-app/mdc-progress-spinner/**               @annieyw @mmalerba
 /src/dev-app/mdc-radio/**                          @mmalerba

.ng-dev/commit-message.ts

@@ -52,6 +52,7 @@ export const commitMessage: CommitMessageConfig = {
     'material-experimental/mdc-input',
     'material-experimental/mdc-list',
     'material-experimental/mdc-menu',
+    'material-experimental/mdc-paginator',
     'material-experimental/mdc-progress-bar',
     'material-experimental/mdc-progress-spinner',
     'material-experimental/mdc-radio',

src/dev-app/BUILD.bazel

@@ -56,6 +56,7 @@ ng_module(
         "//src/dev-app/mdc-input",
         "//src/dev-app/mdc-list",
         "//src/dev-app/mdc-menu",
+        "//src/dev-app/mdc-paginator",
         "//src/dev-app/mdc-progress-bar",
         "//src/dev-app/mdc-progress-spinner",
         "//src/dev-app/mdc-radio",

src/dev-app/dev-app/dev-app-layout.ts

@@ -91,6 +91,7 @@ export class DevAppLayout {
     {name: 'MDC List', route: '/mdc-list'},
     {name: 'MDC Menu', route: '/mdc-menu'},
     {name: 'MDC Radio', route: '/mdc-radio'},
+    {name: 'MDC Paginator', route: '/mdc-paginator'},
     {name: 'MDC Progress Bar', route: '/mdc-progress-bar'},
     {name: 'MDC Progress Spinner', route: '/mdc-progress-spinner'},
     {name: 'MDC Tabs', route: '/mdc-tabs'},

src/dev-app/dev-app/routes.ts

@@ -89,6 +89,10 @@ export const DEV_APP_ROUTES: Routes = [
   {path: 'mdc-input', loadChildren: 'mdc-input/mdc-input-demo-module#MdcInputDemoModule'},
   {path: 'mdc-list', loadChildren: 'mdc-list/mdc-list-demo-module#MdcListDemoModule'},
   {path: 'mdc-menu', loadChildren: 'mdc-menu/mdc-menu-demo-module#MdcMenuDemoModule'},
+  {
+    path: 'mdc-paginator',
+    loadChildren: 'mdc-paginator/mdc-paginator-demo-module#MdcPaginatorDemoModule'
+  },
   {
     path: 'mdc-progress-spinner',
     loadChildren:

src/dev-app/mdc-paginator/BUILD.bazel

@@ -0,0 +1,26 @@
+load("//tools:defaults.bzl", "ng_module", "sass_binary")
+
+package(default_visibility = ["//visibility:public"])
+
+ng_module(
+    name = "mdc-paginator",
+    srcs = glob(["**/*.ts"]),
+    assets = [
+        "mdc-paginator-demo.html",
+        ":mdc_paginator_demo_scss",
+    ],
+    deps = [
+        "//src/material-experimental/mdc-card",
+        "//src/material-experimental/mdc-form-field",
+        "//src/material-experimental/mdc-input",
+        "//src/material-experimental/mdc-paginator",
+        "//src/material-experimental/mdc-slide-toggle",
+        "@npm//@angular/forms",
+        "@npm//@angular/router",
+    ],
+)
+
+sass_binary(
+    name = "mdc_paginator_demo_scss",
+    src = "mdc-paginator-demo.scss",
+)

src/dev-app/mdc-paginator/mdc-paginator-demo-module.ts

@@ -0,0 +1,34 @@
+/**
+ * @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 {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {MatCardModule} from '@angular/material-experimental/mdc-card';
+import {MatFormFieldModule} from '@angular/material-experimental/mdc-form-field';
+import {MatInputModule} from '@angular/material-experimental/mdc-input';
+import {MatPaginatorModule} from '@angular/material-experimental/mdc-paginator';
+import {MatSlideToggleModule} from '@angular/material-experimental/mdc-slide-toggle';
+import {RouterModule} from '@angular/router';
+import {MdcPaginatorDemo} from './mdc-paginator-demo';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatCardModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatPaginatorModule,
+    MatSlideToggleModule,
+    RouterModule.forChild([{path: '', component: MdcPaginatorDemo}]),
+  ],
+  declarations: [MdcPaginatorDemo],
+})
+export class MdcPaginatorDemoModule {
+}

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

@@ -0,0 +1,42 @@
+<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>
+      <mat-label>Length</mat-label>
+      <input matInput type="number" [(ngModel)]="length">
+    </mat-form-field>
+
+    <mat-form-field>
+      <mat-label>Page Size</mat-label>
+      <input matInput type="number" [(ngModel)]="pageSize">
+    </mat-form-field>
+
+    <mat-form-field>
+      <mat-label>Page Index</mat-label>
+      <input matInput 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>
+    <mat-slide-toggle [(ngModel)]="disabled">Disabled</mat-slide-toggle>
+  </div>
+
+  <mat-paginator #paginator
+                 (page)="handlePageEvent($event)"
+                 [length]="length"
+                 [pageSize]="pageSize"
+                 [disabled]="disabled"
+                 [showFirstLastButtons]="showFirstLastButtons"
+                 [pageSizeOptions]="showPageSizeOptions ? pageSizeOptions : []"
+                 [hidePageSize]="hidePageSize"
+                 [pageIndex]="pageIndex">
+  </mat-paginator>
+
+  <div> Output event: {{pageEvent | json}} </div>
+  <div> getNumberOfPages: {{paginator.getNumberOfPages()}} </div>
+</mat-card>

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

@@ -0,0 +1,20 @@
+.demo-section {
+  max-width: 600px;
+  margin-bottom: 24px;
+  padding: 16px;
+  background: #efefef !important;
+
+  & > * {
+    margin: 0 0 32px;
+  }
+}
+
+.demo-options {
+  display: flex;
+  flex-direction: column;
+  max-width: 300px;
+
+  .mat-mdc-slide-toggle {
+    margin-bottom: 8px;
+  }
+}

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

@@ -0,0 +1,36 @@
+/**
+ * @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} from '@angular/core';
+import {PageEvent} from '@angular/material-experimental/mdc-paginator';
+
+@Component({
+  selector: 'mdc-paginator-demo',
+  templateUrl: 'mdc-paginator-demo.html',
+  styleUrls: ['mdc-paginator-demo.css'],
+})
+export class MdcPaginatorDemo {
+  length = 50;
+  pageSize = 10;
+  pageIndex = 0;
+  pageSizeOptions = [5, 10, 25];
+
+  hidePageSize = false;
+  showPageSizeOptions = true;
+  showFirstLastButtons = true;
+  disabled = false;
+
+  pageEvent: PageEvent;
+
+  handlePageEvent(e: PageEvent) {
+    this.pageEvent = e;
+    this.length = e.length;
+    this.pageSize = e.pageSize;
+    this.pageIndex = e.pageIndex;
+  }
+}

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

@@ -4,7 +4,7 @@
   background: #efefef !important;
 
   & > * {
-    margin: 32px 0;
+    margin: 0 0 32px;
   }
 }
 

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

@@ -6,14 +6,13 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, ViewEncapsulation} from '@angular/core';
+import {Component} from '@angular/core';
 import {PageEvent} from '@angular/material/paginator';
 
 @Component({
   selector: 'paginator-demo',
   templateUrl: 'paginator-demo.html',
   styleUrls: ['paginator-demo.css'],
-  encapsulation: ViewEncapsulation.None,
 })
 export class PaginatorDemo {
   length = 50;

src/material-experimental/config.bzl

@@ -21,6 +21,7 @@ entryPoints = [
     "mdc-list",
     "mdc-menu",
     "mdc-menu/testing",
+    "mdc-paginator",
     "mdc-progress-bar",
     "mdc-progress-bar/testing",
     "mdc-progress-spinner",

src/material-experimental/mdc-paginator/BUILD.bazel

@@ -0,0 +1,79 @@
+load(
+    "//tools:defaults.bzl",
+    "ng_module",
+    "ng_test_library",
+    "ng_web_test_suite",
+    "sass_binary",
+    "sass_library",
+)
+
+package(default_visibility = ["//visibility:public"])
+
+ng_module(
+    name = "mdc-paginator",
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = ["**/*.spec.ts"],
+    ),
+    assets = [":paginator.css"] + glob(["**/*.html"]),
+    module_name = "@angular/material-experimental/mdc-paginator",
+    deps = [
+        "//src/material-experimental/mdc-button",
+        "//src/material-experimental/mdc-select",
+        "//src/material/paginator",
+        "//src/material/tooltip",
+        "@npm//@angular/common",
+        "@npm//@angular/core",
+        "@npm//@angular/forms",  # TODO(jelbourn): transitive dep via generated code
+        "@npm//rxjs",
+    ],
+)
+
+sass_library(
+    name = "mdc_paginator_scss_lib",
+    srcs = glob(["**/_*.scss"]),
+    deps = [
+        "//src/material/core:core_scss_lib",
+    ],
+)
+
+sass_binary(
+    name = "mdc_paginator_scss",
+    src = "paginator.scss",
+    include_paths = [
+        "external/npm/node_modules",
+    ],
+    deps = [
+        "//src/material-experimental/mdc-form-field:mdc_form_field_scss_lib",
+    ],
+)
+
+ng_test_library(
+    name = "mdc_paginator_tests_lib",
+    srcs = glob(
+        ["**/*.spec.ts"],
+        exclude = ["**/*.e2e.spec.ts"],
+    ),
+    deps = [
+        ":mdc-paginator",
+        "//src/cdk/testing/private",
+        "//src/material-experimental/mdc-select",
+        "//src/material/core",
+        "@npm//@angular/platform-browser",
+    ],
+)
+
+ng_web_test_suite(
+    name = "unit_tests",
+    static_files = [
+        "@npm//:node_modules/@material/textfield/dist/mdc.textfield.js",
+        "@npm//:node_modules/@material/line-ripple/dist/mdc.lineRipple.js",
+        "@npm//:node_modules/@material/notched-outline/dist/mdc.notchedOutline.js",
+        "@npm//:node_modules/@material/ripple/dist/mdc.ripple.js",
+        "@npm//:node_modules/@material/dom/dist/mdc.dom.js",
+    ],
+    deps = [
+        ":mdc_paginator_tests_lib",
+        "//src/material-experimental:mdc_require_config.js",
+    ],
+)