feat(material/paginator): migrate MDC examples (#25497)

* feat(material/paginator): migrate MDC examples

* feat(material/paginator): migrate MDC examples

.github/CODEOWNERS

@@ -196,7 +196,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/legacy-paginator/**                       @crisbeto
 /src/dev-app/mdc-progress-bar/**                       @crisbeto
 /src/dev-app/mdc-progress-spinner/**                   @mmalerba
 /src/dev-app/mdc-radio/**                              @mmalerba

src/components-examples/material/legacy-paginator/BUILD.bazel

@@ -0,0 +1,55 @@
+load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite")
+
+package(default_visibility = ["//visibility:public"])
+
+ng_module(
+    name = "legacy-paginator",
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = ["**/*.spec.ts"],
+    ),
+    assets = glob([
+        "**/*.html",
+        "**/*.css",
+    ]),
+    deps = [
+        "//src/cdk/testing",
+        "//src/cdk/testing/testbed",
+        "//src/components-examples/private:localize_types",
+        "//src/material/legacy-input",
+        "//src/material/legacy-paginator",
+        "//src/material/legacy-paginator/testing",
+        "@npm//@angular/forms",
+        "@npm//@angular/platform-browser",
+        "@npm//@angular/platform-browser-dynamic",
+        "@npm//@types/jasmine",
+    ],
+)
+
+filegroup(
+    name = "source-files",
+    srcs = glob([
+        "**/*.html",
+        "**/*.css",
+        "**/*.ts",
+    ]),
+)
+
+ng_test_library(
+    name = "unit_tests_lib",
+    srcs = glob(["**/*.spec.ts"]),
+    deps = [
+        ":legacy-paginator",
+        "//src/cdk/testing",
+        "//src/cdk/testing/testbed",
+        "//src/material/legacy-paginator",
+        "//src/material/legacy-paginator/testing",
+        "@npm//@angular/platform-browser",
+        "@npm//@angular/platform-browser-dynamic",
+    ],
+)
+
+ng_web_test_suite(
+    name = "unit_tests",
+    deps = [":unit_tests_lib"],
+)

src/components-examples/material/legacy-paginator/index.ts

@@ -0,0 +1,39 @@
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {MatLegacyInputModule} from '@angular/material/legacy-input';
+import {MatLegacyPaginatorModule} from '@angular/material/legacy-paginator';
+import {PaginatorConfigurableExample} from './paginator-configurable/paginator-configurable-example';
+import {PaginatorOverviewExample} from './paginator-overview/paginator-overview-example';
+import {PaginatorHarnessExample} from './paginator-harness/paginator-harness-example';
+import {
+  PaginatorIntlExample,
+  PaginatorIntlExampleModule,
+} from './paginator-intl/paginator-intl-example';
+
+export {
+  PaginatorConfigurableExample,
+  PaginatorHarnessExample,
+  PaginatorIntlExample,
+  PaginatorOverviewExample,
+};
+
+const EXAMPLES = [
+  PaginatorConfigurableExample,
+  PaginatorHarnessExample,
+  // PaginatorIntlExample is imported through it's own example module.
+  PaginatorOverviewExample,
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    MatLegacyInputModule,
+    MatLegacyPaginatorModule,
+    PaginatorIntlExampleModule,
+    FormsModule,
+  ],
+  declarations: EXAMPLES,
+  exports: EXAMPLES,
+})
+export class PaginatorExamplesModule {}

src/components-examples/material/legacy-paginator/paginator-configurable/paginator-configurable-example.css

@@ -0,0 +1,3 @@
+.mat-form-field {
+  margin-right: 12px;
+}

src/components-examples/material/legacy-paginator/paginator-configurable/paginator-configurable-example.html

@@ -0,0 +1,28 @@
+<mat-form-field appearance="fill">
+  <mat-label>List length</mat-label>
+  <input matInput [(ngModel)]="length" type="number">
+</mat-form-field>
+
+<mat-form-field appearance="fill">
+  <mat-label>Page size</mat-label>
+  <input matInput [(ngModel)]="pageSize" type="number">
+</mat-form-field>
+<mat-form-field appearance="fill">
+  <mat-label>Page size options</mat-label>
+  <input matInput [ngModel]="pageSizeOptions" (ngModelChange)="setPageSizeOptions($event)"
+         [ngModelOptions]="{updateOn: 'blur'}" placeholder="Ex. 10,25,50">
+</mat-form-field>
+
+<mat-paginator [length]="length"
+               [pageSize]="pageSize"
+               [pageSizeOptions]="pageSizeOptions"
+               (page)="pageEvent = $event"
+               aria-label="Select page">
+</mat-paginator>
+
+<div *ngIf="pageEvent">
+  <h5>Page Change Event Properties</h5>
+  <div>List length: {{pageEvent.length}}</div>
+  <div>Page size: {{pageEvent.pageSize}}</div>
+  <div>Page index: {{pageEvent.pageIndex}}</div>
+</div>

src/components-examples/material/legacy-paginator/paginator-configurable/paginator-configurable-example.ts

@@ -0,0 +1,26 @@
+import {Component} from '@angular/core';
+import {PageEvent} from '@angular/material/legacy-paginator';
+
+/**
+ * @title Configurable paginator
+ */
+@Component({
+  selector: 'paginator-configurable-example',
+  templateUrl: 'paginator-configurable-example.html',
+  styleUrls: ['paginator-configurable-example.css'],
+})
+export class PaginatorConfigurableExample {
+  // MatPaginator Inputs
+  length = 100;
+  pageSize = 10;
+  pageSizeOptions: number[] = [5, 10, 25, 100];
+
+  // MatPaginator Output
+  pageEvent: PageEvent;
+
+  setPageSizeOptions(setPageSizeOptionsInput: string) {
+    if (setPageSizeOptionsInput) {
+      this.pageSizeOptions = setPageSizeOptionsInput.split(',').map(str => +str);
+    }
+  }
+}

src/components-examples/material/legacy-paginator/paginator-harness/paginator-harness-example.html

@@ -0,0 +1,9 @@
+<mat-paginator
+    (page)="handlePageEvent($event)"
+    [length]="length"
+    [pageSize]="pageSize"
+    [showFirstLastButtons]="showFirstLastButtons"
+    [pageSizeOptions]="pageSizeOptions"
+    [pageIndex]="pageIndex"
+    aria-label="Select page">
+</mat-paginator>

src/components-examples/material/legacy-paginator/paginator-harness/paginator-harness-example.spec.ts

@@ -0,0 +1,55 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
+import {MatLegacyPaginatorHarness} from '@angular/material/legacy-paginator/testing';
+import {HarnessLoader} from '@angular/cdk/testing';
+import {MatLegacyPaginatorModule} from '@angular/material/legacy-paginator';
+import {PaginatorHarnessExample} from './paginator-harness-example';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+
+describe('PaginatorHarnessExample', () => {
+  let fixture: ComponentFixture<PaginatorHarnessExample>;
+  let loader: HarnessLoader;
+  let instance: PaginatorHarnessExample;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MatLegacyPaginatorModule, NoopAnimationsModule],
+      declarations: [PaginatorHarnessExample],
+    }).compileComponents();
+    fixture = TestBed.createComponent(PaginatorHarnessExample);
+    fixture.detectChanges();
+    loader = TestbedHarnessEnvironment.loader(fixture);
+    instance = fixture.componentInstance;
+  });
+
+  it('should load all paginator harnesses', async () => {
+    const paginators = await loader.getAllHarnesses(MatLegacyPaginatorHarness);
+    expect(paginators.length).toBe(1);
+  });
+
+  it('should be able to navigate between pages', async () => {
+    const paginator = await loader.getHarness(MatLegacyPaginatorHarness);
+
+    expect(instance.pageIndex).toBe(0);
+    await paginator.goToNextPage();
+    expect(instance.pageIndex).toBe(1);
+    await paginator.goToPreviousPage();
+    expect(instance.pageIndex).toBe(0);
+  });
+
+  it('should be able to go to the last page', async () => {
+    const paginator = await loader.getHarness(MatLegacyPaginatorHarness);
+
+    expect(instance.pageIndex).toBe(0);
+    await paginator.goToLastPage();
+    expect(instance.pageIndex).toBe(49);
+  });
+
+  it('should be able to set the page size', async () => {
+    const paginator = await loader.getHarness(MatLegacyPaginatorHarness);
+
+    expect(instance.pageSize).toBe(10);
+    await paginator.setPageSize(25);
+    expect(instance.pageSize).toBe(25);
+  });
+});

src/components-examples/material/legacy-paginator/paginator-harness/paginator-harness-example.ts

@@ -0,0 +1,23 @@
+import {Component} from '@angular/core';
+import {PageEvent} from '@angular/material/legacy-paginator';
+
+/**
+ * @title Testing with MatPaginatorHarness
+ */
+@Component({
+  selector: 'paginator-harness-example',
+  templateUrl: 'paginator-harness-example.html',
+})
+export class PaginatorHarnessExample {
+  length = 500;
+  pageSize = 10;
+  pageIndex = 0;
+  pageSizeOptions = [5, 10, 25];
+  showFirstLastButtons = true;
+
+  handlePageEvent(event: PageEvent) {
+    this.length = event.length;
+    this.pageSize = event.pageSize;
+    this.pageIndex = event.pageIndex;
+  }
+}

src/components-examples/material/legacy-paginator/paginator-intl/paginator-intl-example.html

@@ -0,0 +1,2 @@
+<mat-paginator [length]="200" [pageSizeOptions]="[10, 50, 100]" aria-label="Select page">
+</mat-paginator>

src/components-examples/material/legacy-paginator/paginator-intl/paginator-intl-example.ts

@@ -0,0 +1,43 @@
+import {Component, Injectable, NgModule} from '@angular/core';
+import {MatPaginatorIntl, MatLegacyPaginatorModule} from '@angular/material/legacy-paginator';
+import {Subject} from 'rxjs';
+
+@Injectable()
+export class MyCustomPaginatorIntl implements MatPaginatorIntl {
+  changes = new Subject<void>();
+
+  // For internationalization, the `$localize` function from
+  // the `@angular/localize` package can be used.
+  firstPageLabel = $localize`First page`;
+  itemsPerPageLabel = $localize`Items per page:`;
+  lastPageLabel = $localize`Last page`;
+
+  // You can set labels to an arbitrary string too, or dynamically compute
+  // it through other third-party internationalization libraries.
+  nextPageLabel = 'Next page';
+  previousPageLabel = 'Previous page';
+
+  getRangeLabel(page: number, pageSize: number, length: number): string {
+    if (length === 0) {
+      return $localize`Page 1 of 1`;
+    }
+    const amountPages = Math.ceil(length / pageSize);
+    return $localize`Page ${page + 1} of ${amountPages}`;
+  }
+}
+
+/**
+ * @title Paginator internationalization
+ */
+@Component({
+  selector: 'paginator-intl-example',
+  templateUrl: 'paginator-intl-example.html',
+})
+export class PaginatorIntlExample {}
+
+@NgModule({
+  imports: [MatLegacyPaginatorModule],
+  declarations: [PaginatorIntlExample],
+  providers: [{provide: MatPaginatorIntl, useClass: MyCustomPaginatorIntl}],
+})
+export class PaginatorIntlExampleModule {}

src/components-examples/material/legacy-paginator/paginator-overview/paginator-overview-example.html

@@ -0,0 +1,5 @@
+<mat-paginator [length]="100"
+              [pageSize]="10"
+              [pageSizeOptions]="[5, 10, 25, 100]"
+              aria-label="Select page">
+</mat-paginator>

src/components-examples/material/legacy-paginator/paginator-overview/paginator-overview-example.ts

@@ -0,0 +1,10 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Paginator
+ */
+@Component({
+  selector: 'paginator-overview-example',
+  templateUrl: 'paginator-overview-example.html',
+})
+export class PaginatorOverviewExample {}

src/components-examples/material/paginator/BUILD.bazel

@@ -16,9 +16,12 @@ ng_module(
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
         "//src/components-examples/private:localize_types",
-        "//src/material/legacy-input",
-        "//src/material/legacy-paginator",
-        "//src/material/legacy-paginator/testing",
+        "//src/material/card",
+        "//src/material/form-field",
+        "//src/material/input",
+        "//src/material/paginator",
+        "//src/material/paginator/testing",
+        "//src/material/slide-toggle",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",
@@ -42,8 +45,8 @@ ng_test_library(
         ":paginator",
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
-        "//src/material/legacy-paginator",
-        "//src/material/legacy-paginator/testing",
+        "//src/material/paginator",
+        "//src/material/paginator/testing",
         "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",
     ],

src/components-examples/material/paginator/index.ts

@@ -1,15 +1,18 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
-import {MatLegacyInputModule} from '@angular/material/legacy-input';
-import {MatLegacyPaginatorModule} from '@angular/material/legacy-paginator';
+import {MatInputModule} from '@angular/material/input';
+import {MatPaginatorModule} from '@angular/material/paginator';
 import {PaginatorConfigurableExample} from './paginator-configurable/paginator-configurable-example';
 import {PaginatorOverviewExample} from './paginator-overview/paginator-overview-example';
 import {PaginatorHarnessExample} from './paginator-harness/paginator-harness-example';
 import {
   PaginatorIntlExample,
   PaginatorIntlExampleModule,
 } from './paginator-intl/paginator-intl-example';
+import {MatCardModule} from '@angular/material/card';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatSlideToggleModule} from '@angular/material/slide-toggle';
 
 export {
   PaginatorConfigurableExample,
@@ -28,8 +31,12 @@ const EXAMPLES = [
 @NgModule({
   imports: [
     CommonModule,
-    MatLegacyInputModule,
-    MatLegacyPaginatorModule,
+    MatInputModule,
+    MatPaginatorModule,
+    MatCardModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatSlideToggleModule,
     PaginatorIntlExampleModule,
     FormsModule,
   ],