feat(material/paginator): Switch paginator implementation to use MDC (#…

…25456)
angular · Aug 13, 2022 · 8f11370 · 8f11370
1 parent 3c60fe9
commit 8f11370
Show file tree

Hide file tree

Showing 98 changed files with 762 additions and 695 deletions.
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -18,7 +18,7 @@
 /src/material/legacy-input/**                      @mmalerba
 /src/material/legacy-list/**                       @andrewseguin @crisbeto @devversion
 /src/material/legacy-menu/**                       @crisbeto
-/src/material/paginator/**                         @andrewseguin
+/src/material/legacy-paginator/**                  @andrewseguin
 /src/material/prebuilt-themes/**                   @andrewseguin
 /src/material/legacy-prebuilt-themes/**            @andrewseguin
 /src/material/legacy-progress-bar/**                      @andrewseguin @crisbeto
@@ -121,7 +121,7 @@
 /src/material/list/**                                  @mmalerba @devversion
 /src/material/menu/**                                  @crisbeto
 /src/material/select/**                                @crisbeto
-/src/material-experimental/mdc-paginator/**            @crisbeto
+/src/material/paginator/**                             @crisbeto
 /src/material-experimental/mdc-progress-spinner/**     @andrewseguin
 /src/material/progress-bar/**         @andrewseguin
 /src/material/radio/**                                 @mmalerba
@@ -335,7 +335,7 @@
 /tools/public_api_guard/material/legacy-input**    @mmalerba
 /tools/public_api_guard/material/list**            @andrewseguin @crisbeto @devversion
 /tools/public_api_guard/material/menu**            @crisbeto
-/tools/public_api_guard/material/paginator**       @andrewseguin
+/tools/public_api_guard/material/legacy-paginator**       @andrewseguin
 /tools/public_api_guard/material/legacy-progress-bar**    @andrewseguin @crisbeto
 /tools/public_api_guard/material/progress-spinner**@andrewseguin @crisbeto
 /tools/public_api_guard/material/radio**           @andrewseguin @devversion

diff --git a/.ng-dev/commit-message.mts b/.ng-dev/commit-message.mts
@@ -47,7 +47,7 @@ export const commitMessage: CommitMessageConfig = {
     'material/dialog',
     'material/form-field',
     'material/input',
-    'material-experimental/mdc-paginator',
+    'material/paginator',
     'material/progress-bar',
     'material-experimental/mdc-progress-spinner',
     'material/slide-toggle',
@@ -87,7 +87,7 @@ export const commitMessage: CommitMessageConfig = {
     'material/legacy-list',
     'material/menu',
     'material/legacy-menu',
-    'material/paginator',
+    'material/legacy-paginator',
     'material/prebuilt-themes',
     'material/legacy-prebuilt-themes',
     'material/legacy-progress-bar',

diff --git a/integration/mdc-migration/golden/src/app/app.module.ts b/integration/mdc-migration/golden/src/app/app.module.ts
@@ -14,7 +14,7 @@ import {MatIconModule} from '@angular/material/icon';
 import {MatInputModule} from '@angular/material-experimental/mdc-input';
 import {MatListModule} from '@angular/material-experimental/mdc-list';
 import {MatMenuModule} from '@angular/material-experimental/mdc-menu';
-import {MatPaginatorModule} from '@angular/material-experimental/mdc-paginator';
+import {MatPaginatorModule} from '@angular/material/paginator';
 import {MatProgressBarModule} from '@angular/material-experimental/mdc-progress-bar';
 import {MatProgressSpinnerModule} from '@angular/material-experimental/mdc-progress-spinner';
 import {MatRadioModule} from '@angular/material-experimental/mdc-radio';

diff --git a/src/components-examples/material-experimental/mdc-table/BUILD.bazel b/src/components-examples/material-experimental/mdc-table/BUILD.bazel
@@ -24,7 +24,7 @@ ng_module(
         "//src/material/legacy-button",
         "//src/material/legacy-checkbox",
         "//src/material/legacy-input",
-        "//src/material/paginator",
+        "//src/material/legacy-paginator",
         "//src/material/progress-spinner",
         "//src/material/sort",
         "//src/material/table/testing",

diff --git a/src/components-examples/material-experimental/mdc-table/index.ts b/src/components-examples/material-experimental/mdc-table/index.ts
@@ -6,7 +6,7 @@ import {MatButtonToggleModule} from '@angular/material/button-toggle';
 import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
 import {MatIconModule} from '@angular/material/icon';
 import {MatLegacyInputModule} from '@angular/material/legacy-input';
-import {MatPaginatorModule} from '@angular/material/paginator';
+import {MatLegacyPaginatorModule} from '@angular/material/legacy-paginator';
 import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 import {MatSortModule} from '@angular/material/sort';
 import {MatTableModule} from '@angular/material-experimental/mdc-table';
@@ -123,7 +123,7 @@ const EXAMPLES = [
     MatLegacyCheckboxModule,
     MatIconModule,
     MatLegacyInputModule,
-    MatPaginatorModule,
+    MatLegacyPaginatorModule,
     MatProgressSpinnerModule,
     MatRippleModule,
     MatSortModule,

diff --git a/src/components-examples/material-experimental/mdc-table/table-http/table-http-example.ts b/src/components-examples/material-experimental/mdc-table/table-http/table-http-example.ts
@@ -1,6 +1,6 @@
 import {HttpClient} from '@angular/common/http';
 import {Component, ViewChild, AfterViewInit} from '@angular/core';
-import {MatPaginator} from '@angular/material/paginator';
+import {MatLegacyPaginator} from '@angular/material/legacy-paginator';
 import {MatSort, SortDirection} from '@angular/material/sort';
 import {merge, Observable, of as observableOf} from 'rxjs';
 import {catchError, map, startWith, switchMap} from 'rxjs/operators';
@@ -22,7 +22,7 @@ export class TableHttpExample implements AfterViewInit {
   isLoadingResults = true;
   isRateLimitReached = false;
 
-  @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChild(MatLegacyPaginator) paginator: MatLegacyPaginator;
   @ViewChild(MatSort) sort: MatSort;
 
   constructor(private _httpClient: HttpClient) {}

diff --git a/...ponents-examples/material-experimental/mdc-table/table-overview/table-overview-example.ts b/...ponents-examples/material-experimental/mdc-table/table-overview/table-overview-example.ts
@@ -1,5 +1,5 @@
 import {AfterViewInit, Component, ViewChild} from '@angular/core';
-import {MatPaginator} from '@angular/material/paginator';
+import {MatLegacyPaginator} from '@angular/material/legacy-paginator';
 import {MatSort} from '@angular/material/sort';
 import {MatTableDataSource} from '@angular/material/table';
 
@@ -55,7 +55,7 @@ export class TableOverviewExample implements AfterViewInit {
   displayedColumns: string[] = ['id', 'name', 'progress', 'fruit'];
   dataSource: MatTableDataSource<UserData>;
 
-  @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChild(MatLegacyPaginator) paginator: MatLegacyPaginator;
   @ViewChild(MatSort) sort: MatSort;
 
   constructor() {

diff --git a/...nts-examples/material-experimental/mdc-table/table-pagination/table-pagination-example.ts b/...nts-examples/material-experimental/mdc-table/table-pagination/table-pagination-example.ts
@@ -1,5 +1,5 @@
 import {AfterViewInit, Component, ViewChild} from '@angular/core';
-import {MatPaginator} from '@angular/material/paginator';
+import {MatLegacyPaginator} from '@angular/material/legacy-paginator';
 import {MatTableDataSource} from '@angular/material/table';
 
 /**
@@ -14,7 +14,7 @@ export class TablePaginationExample implements AfterViewInit {
   displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
   dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
 
-  @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChild(MatLegacyPaginator) paginator: MatLegacyPaginator;
 
   ngAfterViewInit() {
     this.dataSource.paginator = this.paginator;

diff --git a/src/components-examples/material/paginator/BUILD.bazel b/src/components-examples/material/paginator/BUILD.bazel
@@ -17,8 +17,8 @@ ng_module(
         "//src/cdk/testing/testbed",
         "//src/components-examples/private:localize_types",
         "//src/material/legacy-input",
-        "//src/material/paginator",
-        "//src/material/paginator/testing",
+        "//src/material/legacy-paginator",
+        "//src/material/legacy-paginator/testing",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",
@@ -42,8 +42,8 @@ ng_test_library(
         ":paginator",
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
-        "//src/material/paginator",
-        "//src/material/paginator/testing",
+        "//src/material/legacy-paginator",
+        "//src/material/legacy-paginator/testing",
         "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",
     ],

diff --git a/src/components-examples/material/paginator/index.ts b/src/components-examples/material/paginator/index.ts
@@ -2,7 +2,7 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatLegacyInputModule} from '@angular/material/legacy-input';
-import {MatPaginatorModule} from '@angular/material/paginator';
+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';
@@ -29,7 +29,7 @@ const EXAMPLES = [
   imports: [
     CommonModule,
     MatLegacyInputModule,
-    MatPaginatorModule,
+    MatLegacyPaginatorModule,
     PaginatorIntlExampleModule,
     FormsModule,
   ],

diff --git a/...ents-examples/material/paginator/paginator-configurable/paginator-configurable-example.ts b/...ents-examples/material/paginator/paginator-configurable/paginator-configurable-example.ts
@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {PageEvent} from '@angular/material/paginator';
+import {PageEvent} from '@angular/material/legacy-paginator';
 
 /**
  * @title Configurable paginator

diff --git a/...omponents-examples/material/paginator/paginator-harness/paginator-harness-example.spec.ts b/...omponents-examples/material/paginator/paginator-harness/paginator-harness-example.spec.ts
@@ -1,8 +1,8 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
-import {MatPaginatorHarness} from '@angular/material/paginator/testing';
+import {MatLegacyPaginatorHarness} from '@angular/material/legacy-paginator/testing';
 import {HarnessLoader} from '@angular/cdk/testing';
-import {MatPaginatorModule} from '@angular/material/paginator';
+import {MatLegacyPaginatorModule} from '@angular/material/legacy-paginator';
 import {PaginatorHarnessExample} from './paginator-harness-example';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 
@@ -13,7 +13,7 @@ describe('PaginatorHarnessExample', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [MatPaginatorModule, NoopAnimationsModule],
+      imports: [MatLegacyPaginatorModule, NoopAnimationsModule],
       declarations: [PaginatorHarnessExample],
     }).compileComponents();
     fixture = TestBed.createComponent(PaginatorHarnessExample);
@@ -23,12 +23,12 @@ describe('PaginatorHarnessExample', () => {
   });
 
   it('should load all paginator harnesses', async () => {
-    const paginators = await loader.getAllHarnesses(MatPaginatorHarness);
+    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(MatPaginatorHarness);
+    const paginator = await loader.getHarness(MatLegacyPaginatorHarness);
 
     expect(instance.pageIndex).toBe(0);
     await paginator.goToNextPage();
@@ -38,15 +38,15 @@ describe('PaginatorHarnessExample', () => {
   });
 
   it('should be able to go to the last page', async () => {
-    const paginator = await loader.getHarness(MatPaginatorHarness);
+    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(MatPaginatorHarness);
+    const paginator = await loader.getHarness(MatLegacyPaginatorHarness);
 
     expect(instance.pageSize).toBe(10);
     await paginator.setPageSize(25);

diff --git a/src/components-examples/material/paginator/paginator-harness/paginator-harness-example.ts b/src/components-examples/material/paginator/paginator-harness/paginator-harness-example.ts
@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {PageEvent} from '@angular/material/paginator';
+import {PageEvent} from '@angular/material/legacy-paginator';
 
 /**
  * @title Testing with MatPaginatorHarness

diff --git a/src/components-examples/material/paginator/paginator-intl/paginator-intl-example.ts b/src/components-examples/material/paginator/paginator-intl/paginator-intl-example.ts
@@ -1,5 +1,5 @@
 import {Component, Injectable, NgModule} from '@angular/core';
-import {MatPaginatorIntl, MatPaginatorModule} from '@angular/material/paginator';
+import {MatPaginatorIntl, MatLegacyPaginatorModule} from '@angular/material/legacy-paginator';
 import {Subject} from 'rxjs';
 
 @Injectable()
@@ -36,7 +36,7 @@ export class MyCustomPaginatorIntl implements MatPaginatorIntl {
 export class PaginatorIntlExample {}
 
 @NgModule({
-  imports: [MatPaginatorModule],
+  imports: [MatLegacyPaginatorModule],
   declarations: [PaginatorIntlExample],
   providers: [{provide: MatPaginatorIntl, useClass: MyCustomPaginatorIntl}],
 })

diff --git a/src/components-examples/material/table/BUILD.bazel b/src/components-examples/material/table/BUILD.bazel
@@ -23,7 +23,7 @@ ng_module(
         "//src/material/legacy-button",
         "//src/material/legacy-checkbox",
         "//src/material/legacy-input",
-        "//src/material/paginator",
+        "//src/material/legacy-paginator",
         "//src/material/progress-spinner",
         "//src/material/sort",
         "//src/material/table",

diff --git a/src/components-examples/material/table/index.ts b/src/components-examples/material/table/index.ts
@@ -6,7 +6,7 @@ import {MatButtonToggleModule} from '@angular/material/button-toggle';
 import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
 import {MatIconModule} from '@angular/material/icon';
 import {MatLegacyInputModule} from '@angular/material/legacy-input';
-import {MatPaginatorModule} from '@angular/material/paginator';
+import {MatLegacyPaginatorModule} from '@angular/material/legacy-paginator';
 import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 import {MatSortModule} from '@angular/material/sort';
 import {MatTableModule} from '@angular/material/table';
@@ -120,7 +120,7 @@ const EXAMPLES = [
     MatLegacyCheckboxModule,
     MatIconModule,
     MatLegacyInputModule,
-    MatPaginatorModule,
+    MatLegacyPaginatorModule,
     MatProgressSpinnerModule,
     MatRippleModule,
     MatSortModule,

diff --git a/src/components-examples/material/table/table-http/table-http-example.ts b/src/components-examples/material/table/table-http/table-http-example.ts
@@ -1,6 +1,6 @@
 import {HttpClient} from '@angular/common/http';
 import {Component, ViewChild, AfterViewInit} from '@angular/core';
-import {MatPaginator} from '@angular/material/paginator';
+import {MatLegacyPaginator} from '@angular/material/legacy-paginator';
 import {MatSort, SortDirection} from '@angular/material/sort';
 import {merge, Observable, of as observableOf} from 'rxjs';
 import {catchError, map, startWith, switchMap} from 'rxjs/operators';
@@ -22,7 +22,7 @@ export class TableHttpExample implements AfterViewInit {
   isLoadingResults = true;
   isRateLimitReached = false;
 
-  @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChild(MatLegacyPaginator) paginator: MatLegacyPaginator;
   @ViewChild(MatSort) sort: MatSort;
 
   constructor(private _httpClient: HttpClient) {}

diff --git a/src/components-examples/material/table/table-overview/table-overview-example.ts b/src/components-examples/material/table/table-overview/table-overview-example.ts
@@ -1,5 +1,5 @@
 import {AfterViewInit, Component, ViewChild} from '@angular/core';
-import {MatPaginator} from '@angular/material/paginator';
+import {MatLegacyPaginator} from '@angular/material/legacy-paginator';
 import {MatSort} from '@angular/material/sort';
 import {MatTableDataSource} from '@angular/material/table';
 
@@ -55,7 +55,7 @@ export class TableOverviewExample implements AfterViewInit {
   displayedColumns: string[] = ['id', 'name', 'progress', 'fruit'];
   dataSource: MatTableDataSource<UserData>;
 
-  @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChild(MatLegacyPaginator) paginator: MatLegacyPaginator;
   @ViewChild(MatSort) sort: MatSort;
 
   constructor() {

diff --git a/src/components-examples/material/table/table-pagination/table-pagination-example.ts b/src/components-examples/material/table/table-pagination/table-pagination-example.ts
@@ -1,5 +1,5 @@
 import {AfterViewInit, Component, ViewChild} from '@angular/core';
-import {MatPaginator} from '@angular/material/paginator';
+import {MatLegacyPaginator} from '@angular/material/legacy-paginator';
 import {MatTableDataSource} from '@angular/material/table';
 
 /**
@@ -14,7 +14,7 @@ export class TablePaginationExample implements AfterViewInit {
   displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
   dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
 
-  @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChild(MatLegacyPaginator) paginator: MatLegacyPaginator;
 
   ngAfterViewInit() {
     this.dataSource.paginator = this.paginator;

diff --git a/src/dev-app/mdc-paginator/BUILD.bazel b/src/dev-app/mdc-paginator/BUILD.bazel
@@ -10,10 +10,10 @@ ng_module(
         ":mdc_paginator_demo_scss",
     ],
     deps = [
-        "//src/material-experimental/mdc-paginator",
         "//src/material/card",
         "//src/material/form-field",
         "//src/material/input",
+        "//src/material/paginator",
         "//src/material/slide-toggle",
         "@npm//@angular/forms",
     ],

diff --git a/src/dev-app/mdc-paginator/mdc-paginator-demo.ts b/src/dev-app/mdc-paginator/mdc-paginator-demo.ts
@@ -8,7 +8,7 @@
 
 import {Component} from '@angular/core';
 import {CommonModule} from '@angular/common';
-import {MatPaginatorModule, PageEvent} from '@angular/material-experimental/mdc-paginator';
+import {MatPaginatorModule, PageEvent} from '@angular/material/paginator';
 import {FormsModule} from '@angular/forms';
 import {MatCardModule} from '@angular/material/card';
 import {MatInputModule} from '@angular/material/input';

diff --git a/src/dev-app/paginator/BUILD.bazel b/src/dev-app/paginator/BUILD.bazel
@@ -13,8 +13,8 @@ ng_module(
         "//src/material/legacy-card",
         "//src/material/legacy-form-field",
         "//src/material/legacy-input",
+        "//src/material/legacy-paginator",
         "//src/material/legacy-slide-toggle",
-        "//src/material/paginator",
         "@npm//@angular/forms",
     ],
 )

diff --git a/src/dev-app/paginator/paginator-demo.ts b/src/dev-app/paginator/paginator-demo.ts
@@ -7,7 +7,7 @@
  */
 
 import {Component} from '@angular/core';
-import {MatPaginatorModule, PageEvent} from '@angular/material/paginator';
+import {MatLegacyPaginatorModule, PageEvent} from '@angular/material/legacy-paginator';
 import {CommonModule} from '@angular/common';
 import {FormsModule} from '@angular/forms';
 import {MatLegacyCardModule} from '@angular/material/legacy-card';
@@ -26,7 +26,7 @@ import {MatLegacySlideToggleModule} from '@angular/material/legacy-slide-toggle'
     MatLegacyCardModule,
     MatLegacyFormFieldModule,
     MatLegacyInputModule,
-    MatPaginatorModule,
+    MatLegacyPaginatorModule,
     MatLegacySlideToggleModule,
   ],
 })

diff --git a/src/material-experimental/_index.scss b/src/material-experimental/_index.scss
@@ -17,8 +17,6 @@
 // MDC-related themes
 @forward './mdc-core/core-theme' as mdc-core-* show mdc-core-theme, mdc-core-color,
   mdc-core-density, mdc-core-typography;
-@forward './mdc-paginator/paginator-theme' as mdc-paginator-* show mdc-paginator-color,
-  mdc-paginator-typography, mdc-paginator-density, mdc-paginator-theme;
 @forward './mdc-progress-spinner/progress-spinner-theme' as mdc-progress-spinner-* show
   mdc-progress-spinner-color, mdc-progress-spinner-typography, mdc-progress-spinner-density,
   mdc-progress-spinner-theme;

diff --git a/src/material-experimental/config.bzl b/src/material-experimental/config.bzl
@@ -1,8 +1,6 @@
 entryPoints = [
     "column-resize",
     "mdc-core",
-    "mdc-paginator",
-    "mdc-paginator/testing",
     "mdc-progress-spinner",
     "mdc-progress-spinner/testing",
     "mdc-snack-bar",