From 8f11370e5e886f0eb30614409d9cac29ab754a3e Mon Sep 17 00:00:00 2001 From: Andrew Seguin Date: Sat, 13 Aug 2022 17:12:48 -0600 Subject: [PATCH] feat(material/paginator): Switch paginator implementation to use MDC (#25456) --- .github/CODEOWNERS | 6 +- .ng-dev/commit-message.mts | 4 +- .../golden/src/app/app.module.ts | 2 +- .../mdc-table/BUILD.bazel | 2 +- .../material-experimental/mdc-table/index.ts | 4 +- .../table-http/table-http-example.ts | 4 +- .../table-overview/table-overview-example.ts | 4 +- .../table-pagination-example.ts | 4 +- .../material/paginator/BUILD.bazel | 8 +- .../material/paginator/index.ts | 4 +- .../paginator-configurable-example.ts | 2 +- .../paginator-harness-example.spec.ts | 14 +-- .../paginator-harness-example.ts | 2 +- .../paginator-intl/paginator-intl-example.ts | 4 +- .../material/table/BUILD.bazel | 2 +- .../material/table/index.ts | 4 +- .../table/table-http/table-http-example.ts | 4 +- .../table-overview/table-overview-example.ts | 4 +- .../table-pagination-example.ts | 4 +- src/dev-app/mdc-paginator/BUILD.bazel | 2 +- .../mdc-paginator/mdc-paginator-demo.ts | 2 +- src/dev-app/paginator/BUILD.bazel | 2 +- src/dev-app/paginator/paginator-demo.ts | 4 +- src/material-experimental/_index.scss | 2 - src/material-experimental/config.bzl | 2 - .../mdc-core/color/_all-color.import.scss | 2 - .../mdc-core/density/_all-density.import.scss | 2 - .../mdc-core/theming/BUILD.bazel | 1 - .../mdc-core/theming/_all-theme.import.scss | 3 - .../mdc-core/theming/_all-theme.scss | 3 +- .../typography/_all-typography.import.scss | 2 - .../mdc-paginator/README.md | 102 ----------------- .../_paginator-theme.import.scss | 6 - .../mdc-paginator/_paginator-theme.scss | 104 ------------------ .../_paginator-variables.import.scss | 1 - .../testing/paginator-harness.spec.ts | 7 -- .../testing/paginator-harness.ts | 43 -------- .../mdc-table/BUILD.bazel | 4 +- .../mdc-table/table.spec.ts | 2 +- src/material/_index.scss | 2 + src/material/_theming.scss | 2 +- src/material/config.bzl | 2 + .../density/private/_all-density.import.scss | 2 - .../core/density/private/_all-density.scss | 2 +- src/material/core/theming/_all-theme.scss | 2 +- .../tests/test-css-variables-theme.scss | 2 - .../core/typography/_all-typography.scss | 2 +- .../legacy-core/theming/_all-theme.scss | 2 + .../typography/_all-typography.scss | 2 + .../legacy-paginator}/BUILD.bazel | 39 ++++--- .../_paginator-legacy-index.scss | 2 + .../_paginator-theme.import.scss | 11 ++ .../legacy-paginator/_paginator-theme.scss | 84 ++++++++++++++ .../_paginator-variables.import.scss} | 1 - .../_paginator-variables.scss | 0 .../legacy-paginator}/index.ts | 0 .../paginator-module.ts | 10 +- .../legacy-paginator}/paginator.html | 34 +++--- src/material/legacy-paginator/paginator.md | 38 +++++++ .../legacy-paginator}/paginator.scss | 57 ++++------ .../legacy-paginator}/paginator.spec.ts | 81 ++++++-------- .../legacy-paginator}/paginator.ts | 26 ++--- .../legacy-paginator}/public-api.ts | 3 +- .../legacy-paginator}/testing/BUILD.bazel | 18 ++- .../legacy-paginator}/testing/index.ts | 0 .../testing/paginator-harness.spec.ts | 7 ++ .../testing/paginator-harness.ts | 41 +++++++ .../legacy-paginator}/testing/public-api.ts | 5 +- src/material/paginator/BUILD.bazel | 12 +- .../paginator/_paginator-theme.import.scss | 13 +-- src/material/paginator/_paginator-theme.scss | 88 +++++++++------ .../_paginator-variables.import.scss | 2 +- .../paginator}/module.ts | 2 +- src/material/paginator/paginator.html | 34 +++--- src/material/paginator/paginator.scss | 57 ++++++---- src/material/paginator/paginator.spec.ts | 64 ++++++----- src/material/paginator/paginator.ts | 68 ++++++------ src/material/paginator/public-api.ts | 2 +- src/material/paginator/testing/BUILD.bazel | 34 +++--- .../testing/paginator-harness.spec.ts | 4 +- .../paginator/testing/paginator-harness.ts | 33 +++--- .../rules/ts-migration/import-replacements.ts | 4 +- .../__name@dasherize__-datasource.ts.template | 2 +- ...ame@dasherize__.component.spec.ts.template | 2 +- .../__name@dasherize__.component.ts.template | 2 +- .../ng-generate/table/index.spec.ts | 2 +- .../schematics/ng-generate/table/index.ts | 7 +- src/material/table/BUILD.bazel | 4 +- src/material/table/table-data-source.ts | 14 +-- src/material/table/table.md | 2 +- src/material/table/table.spec.ts | 8 +- .../kitchen-sink-mdc/kitchen-sink-mdc.ts | 2 +- .../kitchen-sink/kitchen-sink.ts | 4 +- .../material/legacy-paginator-testing.md | 40 +++++++ .../material/legacy-paginator.md | 69 ++++++++++++ .../material/paginator-testing.md | 7 +- tools/public_api_guard/material/paginator.md | 16 +-- tools/public_api_guard/material/table.md | 4 +- 98 files changed, 762 insertions(+), 695 deletions(-) delete mode 100644 src/material-experimental/mdc-paginator/README.md delete mode 100644 src/material-experimental/mdc-paginator/_paginator-theme.import.scss delete mode 100644 src/material-experimental/mdc-paginator/_paginator-theme.scss delete mode 100644 src/material-experimental/mdc-paginator/_paginator-variables.import.scss delete mode 100644 src/material-experimental/mdc-paginator/testing/paginator-harness.spec.ts delete mode 100644 src/material-experimental/mdc-paginator/testing/paginator-harness.ts rename src/{material-experimental/mdc-paginator => material/legacy-paginator}/BUILD.bazel (63%) create mode 100644 src/material/legacy-paginator/_paginator-legacy-index.scss create mode 100644 src/material/legacy-paginator/_paginator-theme.import.scss create mode 100644 src/material/legacy-paginator/_paginator-theme.scss rename src/material/{paginator/_paginator-legacy-index.scss => legacy-paginator/_paginator-variables.import.scss} (52%) rename src/{material-experimental/mdc-paginator => material/legacy-paginator}/_paginator-variables.scss (100%) rename src/{material-experimental/mdc-paginator => material/legacy-paginator}/index.ts (100%) rename src/material/{paginator => legacy-paginator}/paginator-module.ts (76%) rename src/{material-experimental/mdc-paginator => material/legacy-paginator}/paginator.html (72%) create mode 100644 src/material/legacy-paginator/paginator.md rename src/{material-experimental/mdc-paginator => material/legacy-paginator}/paginator.scss (51%) rename src/{material-experimental/mdc-paginator => material/legacy-paginator}/paginator.spec.ts (89%) rename src/{material-experimental/mdc-paginator => material/legacy-paginator}/paginator.ts (70%) rename src/{material-experimental/mdc-paginator => material/legacy-paginator}/public-api.ts (87%) rename src/{material-experimental/mdc-paginator => material/legacy-paginator}/testing/BUILD.bazel (66%) rename src/{material-experimental/mdc-paginator => material/legacy-paginator}/testing/index.ts (100%) create mode 100644 src/material/legacy-paginator/testing/paginator-harness.spec.ts create mode 100644 src/material/legacy-paginator/testing/paginator-harness.ts rename src/{material-experimental/mdc-paginator => material/legacy-paginator}/testing/public-api.ts (68%) rename src/{material-experimental/mdc-paginator => material/paginator}/module.ts (91%) create mode 100644 tools/public_api_guard/material/legacy-paginator-testing.md create mode 100644 tools/public_api_guard/material/legacy-paginator.md diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index c0a4558771bd..14e501d58f2f 100644 --- 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 index 39505c242cd7..fecefd5fa42b 100644 --- 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 index d308aa731bbb..1c4a09ec14a3 100644 --- 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 index 0cf8faea8633..63070eeddd48 100644 --- 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 index cc640f4e4c3e..1b1285632c94 100644 --- 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 index e4ac525cb170..5046714dd029 100644 --- 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/src/components-examples/material-experimental/mdc-table/table-overview/table-overview-example.ts b/src/components-examples/material-experimental/mdc-table/table-overview/table-overview-example.ts index 7c007c66bf26..bea833f685b8 100644 --- a/src/components-examples/material-experimental/mdc-table/table-overview/table-overview-example.ts +++ b/src/components-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; - @ViewChild(MatPaginator) paginator: MatPaginator; + @ViewChild(MatLegacyPaginator) paginator: MatLegacyPaginator; @ViewChild(MatSort) sort: MatSort; constructor() { diff --git a/src/components-examples/material-experimental/mdc-table/table-pagination/table-pagination-example.ts b/src/components-examples/material-experimental/mdc-table/table-pagination/table-pagination-example.ts index 1634c917dd8b..65bfe98eccc3 100644 --- a/src/components-examples/material-experimental/mdc-table/table-pagination/table-pagination-example.ts +++ b/src/components-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(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 index ee3d284c88fc..4e1e52aa2106 100644 --- 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 index 8870d0f80005..4efbedef8d6e 100644 --- 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/src/components-examples/material/paginator/paginator-configurable/paginator-configurable-example.ts b/src/components-examples/material/paginator/paginator-configurable/paginator-configurable-example.ts index b46462fda863..6373e7a6f43f 100644 --- a/src/components-examples/material/paginator/paginator-configurable/paginator-configurable-example.ts +++ b/src/components-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/src/components-examples/material/paginator/paginator-harness/paginator-harness-example.spec.ts b/src/components-examples/material/paginator/paginator-harness/paginator-harness-example.spec.ts index cd4da36067f3..2cd85f75caca 100644 --- a/src/components-examples/material/paginator/paginator-harness/paginator-harness-example.spec.ts +++ b/src/components-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,7 +38,7 @@ 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(); @@ -46,7 +46,7 @@ describe('PaginatorHarnessExample', () => { }); 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 index f575218037db..1ce7efc4b7de 100644 --- 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 index f3eca4c287ec..a725c101d864 100644 --- 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 index a5c9906776bc..7edfe39c2f6e 100644 --- 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 index 20a42015084c..2b6c5ce34d11 100644 --- 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 index e4ac525cb170..5046714dd029 100644 --- 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 index 7c007c66bf26..bea833f685b8 100644 --- 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; - @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 index 1634c917dd8b..65bfe98eccc3 100644 --- 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(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 index c1509ffa79db..619b6cba9e97 100644 --- 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 index e1210c310936..47b4c2957f25 100644 --- 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 index 1aa35a0ed572..483d4828ec23 100644 --- 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 index 7a9e34aad68e..433080a00779 100644 --- 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 index 529c76b9ba43..a8b8d68251f0 100644 --- 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 index e50c838fc53b..a66ba6c8dee5 100644 --- 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", diff --git a/src/material-experimental/mdc-core/color/_all-color.import.scss b/src/material-experimental/mdc-core/color/_all-color.import.scss index 458bfbe6bbde..390e74b8bb1f 100644 --- a/src/material-experimental/mdc-core/color/_all-color.import.scss +++ b/src/material-experimental/mdc-core/color/_all-color.import.scss @@ -14,9 +14,7 @@ $mat-mdc-table-mdc-data-table-row-hover-fill-color, $mat-mdc-table-mdc-data-tabl $mat-mdc-table-mdc-data-table-selected-row-fill-color, $mat-mdc-table-mdc-data-table-sort-icon-active-color, $mat-mdc-table-mdc-data-table-sort-icon-color, $mat-mdc-table-mdc-data-table-stroke-color, $mat-mdc-table-mdc-data-table-table-divider-color; -@forward '../../mdc-paginator/paginator-variables' as mat-mdc-paginator-*; @forward '../core-theme.import'; -@forward '../../mdc-paginator/paginator-theme' as mat-mdc-paginator-*; @forward '../../mdc-progress-spinner/progress-spinner-theme' as mat-mdc-progress-spinner-*; @forward '../theming/all-theme'; @forward 'all-color' hide all-mdc-component-colors; diff --git a/src/material-experimental/mdc-core/density/_all-density.import.scss b/src/material-experimental/mdc-core/density/_all-density.import.scss index 73020434a2db..810336591d39 100644 --- a/src/material-experimental/mdc-core/density/_all-density.import.scss +++ b/src/material-experimental/mdc-core/density/_all-density.import.scss @@ -14,9 +14,7 @@ $mat-mdc-table-mdc-data-table-row-hover-fill-color, $mat-mdc-table-mdc-data-tabl $mat-mdc-table-mdc-data-table-selected-row-fill-color, $mat-mdc-table-mdc-data-table-sort-icon-active-color, $mat-mdc-table-mdc-data-table-sort-icon-color, $mat-mdc-table-mdc-data-table-stroke-color, $mat-mdc-table-mdc-data-table-table-divider-color; -@forward '../../mdc-paginator/paginator-variables' as mat-mdc-paginator-*; @forward '../core-theme.import'; -@forward '../../mdc-paginator/paginator-theme' as mat-mdc-paginator-*; @forward '../../mdc-progress-spinner/progress-spinner-theme' as mat-mdc-progress-spinner-*; @forward '../theming/all-theme'; @forward 'all-density' show all-mdc-component-densities; diff --git a/src/material-experimental/mdc-core/theming/BUILD.bazel b/src/material-experimental/mdc-core/theming/BUILD.bazel index 0965a17778e9..b215b6542805 100644 --- a/src/material-experimental/mdc-core/theming/BUILD.bazel +++ b/src/material-experimental/mdc-core/theming/BUILD.bazel @@ -21,7 +21,6 @@ sass_library( deps = [ "//src/material:sass_lib", "//src/material-experimental/mdc-core:mdc_core_scss_lib", - "//src/material-experimental/mdc-paginator:mdc_paginator_scss_lib", "//src/material-experimental/mdc-progress-spinner:mdc_progress_spinner_scss_lib", "//src/material-experimental/mdc-snack-bar:mdc_snack_bar_scss_lib", "//src/material-experimental/mdc-table:mdc_table_scss_lib", diff --git a/src/material-experimental/mdc-core/theming/_all-theme.import.scss b/src/material-experimental/mdc-core/theming/_all-theme.import.scss index e30a28843125..010595172f86 100644 --- a/src/material-experimental/mdc-core/theming/_all-theme.import.scss +++ b/src/material-experimental/mdc-core/theming/_all-theme.import.scss @@ -14,9 +14,7 @@ $mat-mdc-table-mdc-data-table-row-hover-fill-color, $mat-mdc-table-mdc-data-tabl $mat-mdc-table-mdc-data-table-selected-row-fill-color, $mat-mdc-table-mdc-data-table-sort-icon-active-color, $mat-mdc-table-mdc-data-table-sort-icon-color, $mat-mdc-table-mdc-data-table-stroke-color, $mat-mdc-table-mdc-data-table-table-divider-color; -@forward '../../mdc-paginator/paginator-variables' as mat-mdc-paginator-*; @forward '../core-theme.import'; -@forward '../../mdc-paginator/paginator-theme' as mat-mdc-paginator-*; @forward '../../mdc-progress-spinner/progress-spinner-theme' as mat-mdc-progress-spinner-*; @forward 'all-theme' hide all-mdc-component-themes;; @@ -24,7 +22,6 @@ $mat-mdc-table-mdc-data-table-stroke-color, $mat-mdc-table-mdc-data-table-table- @import '../../mdc-snack-bar/snack-bar-theme'; @import '../../mdc-tabs/tabs-theme'; @import '../../mdc-table/table-theme'; -@import '../../mdc-paginator/paginator-theme'; @import '../../mdc-progress-spinner/progress-spinner-theme'; @import '../../../material/core/core'; @import '../../../material/core/core-theme'; diff --git a/src/material-experimental/mdc-core/theming/_all-theme.scss b/src/material-experimental/mdc-core/theming/_all-theme.scss index 7b45ab2dc6f5..1b1171dc2d67 100644 --- a/src/material-experimental/mdc-core/theming/_all-theme.scss +++ b/src/material-experimental/mdc-core/theming/_all-theme.scss @@ -4,7 +4,6 @@ @use '../../mdc-snack-bar/snack-bar-theme'; @use '../../mdc-tabs/tabs-theme'; @use '../../mdc-table/table-theme'; -@use '../../mdc-paginator/paginator-theme'; @use '../../mdc-progress-spinner/progress-spinner-theme'; @mixin all-mdc-component-themes($theme-or-color-config) { @@ -21,7 +20,7 @@ @include mat.chips-theme($theme-or-color-config); @include mat.list-theme($theme-or-color-config); @include mat.menu-theme($theme-or-color-config); - @include paginator-theme.theme($theme-or-color-config); + @include mat.paginator-theme($theme-or-color-config); @include mat.progress-bar-theme($theme-or-color-config); @include progress-spinner-theme.theme($theme-or-color-config); @include mat.radio-theme($theme-or-color-config); diff --git a/src/material-experimental/mdc-core/typography/_all-typography.import.scss b/src/material-experimental/mdc-core/typography/_all-typography.import.scss index ca867773d0a6..4d3bde9733ce 100644 --- a/src/material-experimental/mdc-core/typography/_all-typography.import.scss +++ b/src/material-experimental/mdc-core/typography/_all-typography.import.scss @@ -14,9 +14,7 @@ $mat-mdc-table-mdc-data-table-row-hover-fill-color, $mat-mdc-table-mdc-data-tabl $mat-mdc-table-mdc-data-table-selected-row-fill-color, $mat-mdc-table-mdc-data-table-sort-icon-active-color, $mat-mdc-table-mdc-data-table-sort-icon-color, $mat-mdc-table-mdc-data-table-stroke-color, $mat-mdc-table-mdc-data-table-table-divider-color; -@forward '../../mdc-paginator/paginator-variables' as mat-mdc-paginator-*; @forward '../core-theme.import'; -@forward '../../mdc-paginator/paginator-theme' as mat-mdc-paginator-*; @forward '../../mdc-progress-spinner/progress-spinner-theme' as mat-mdc-progress-spinner-*; @forward '../theming/all-theme'; @forward 'all-typography' hide define-mdc-typography-config, all-mdc-component-typographies; diff --git a/src/material-experimental/mdc-paginator/README.md b/src/material-experimental/mdc-paginator/README.md deleted file mode 100644 index d41773f3ba42..000000000000 --- a/src/material-experimental/mdc-paginator/README.md +++ /dev/null @@ -1,102 +0,0 @@ -This is prototype of an alternate version of `` built on top of -[MDC Web](https://github.com/material-components/material-components-web). It demonstrates how -Angular Material could use MDC Web under the hood while still exposing the same API Angular users as -the existing ``. This component is experimental and should not be used in production. - -## How to use -Assuming your application is already up and running using Angular Material, you can add this -component by following these steps: - -1. Install Angular Material Experimental & MDC WEB: - - ```bash - npm i material-components-web @angular/material-experimental - ``` - -2. In your `angular.json`, make sure `node_modules/` is listed as a Sass include path. This is - needed for the Sass compiler to be able to find the MDC Web Sass files. - - ```json - ... - "styles": [ - "src/styles.scss" - ], - "stylePreprocessorOptions": { - "includePaths": [ - "node_modules/" - ] - }, - ... - ``` - -3. Import the experimental `MatPaginatorModule` and add it to the module that declares your - component: - - ```ts - import {MatPaginatorModule} from '@angular/material-experimental/mdc-paginator'; - - @NgModule({ - declarations: [MyComponent], - imports: [MatPaginatorModule], - }) - export class MyModule {} - ``` - -4. Use `` in your component's template, just like you would the normal - ``: - - ```html - - ``` - -5. Add the theme and typography mixins to your Sass. (There is currently no pre-built CSS option for - the experimental ``): - - ```scss - @use '@angular/material' as mat; - @use '@angular/material-experimental' as mat-experimental; - - $my-primary: mat.define-palette(mat.$indigo-palette); - $my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400); - $my-theme: mat.define-light-theme(( - color: ( - primary: $my-primary, - accent: $my-accent - ) - )); - - @include mat-experimental.mdc-paginator-theme($my-theme); - @include mat-experimental.mdc-paginator-typography($my-theme); - ``` - -## API differences -The experimental paginator API closely matches the -[API of the standard paginator](https://material.angular.io/components/paginator/api). -`@angular/material-experimental/mdc-paginator` exports symbols with the same name and public -interface as all of the symbols found under `@angular/material/paginator`, except for the following -differences: - -* The experimental paginator module has a `MatPaginatorDefaultOptions` interface that is identical -to the one from `@angular/material/paginator`, with the exception of the `formFieldAppearance` -property whose type is narrower. It allows only the `fill` and `outline` appearances, because these -are the appearances supported by the MDC-based `MatFormField`. - -## Replacing the standard paginator in an existing app -Because the experimental API mirrors the API for the standard paginator, it can easily be swapped in -by just changing the import paths. There is currently no schematic for this, but you can run the -following string replace across your TypeScript files: - -```bash -grep -lr --include="*.ts" --exclude-dir="node_modules" \ - --exclude="*.d.ts" "['\"]@angular/material/paginator['\"]" | xargs sed -i \ - "s/['\"]@angular\/material\/paginator['\"]/'@angular\/material-experimental\/mdc-paginator'/g" -``` - -CSS styles and tests that depend on implementation details of `mat-paginator` (such as getting -elements from the template by class name) will need to be manually updated. - -There are some small visual differences between this paginator and the standard `mat-paginator`. -This paginator depends on `MatFormField` and `MatButton` which are also based on MDC, putting them -closer to the Material Design specification while making them slightly wider. You may have to -account for the wider paginator in your app's layout. Furthermore, the form field inside the -paginator only supports the `outline` and `fill` appearances. diff --git a/src/material-experimental/mdc-paginator/_paginator-theme.import.scss b/src/material-experimental/mdc-paginator/_paginator-theme.import.scss deleted file mode 100644 index 42fd4c540e94..000000000000 --- a/src/material-experimental/mdc-paginator/_paginator-theme.import.scss +++ /dev/null @@ -1,6 +0,0 @@ -@forward 'paginator-variables' as mat-mdc-paginator-*; -@forward 'paginator-theme' as mat-mdc-paginator-*; - -@import '../../material/core/theming/theming'; -@import '../../material/core/density/private/compatibility'; -@import './paginator-variables'; diff --git a/src/material-experimental/mdc-paginator/_paginator-theme.scss b/src/material-experimental/mdc-paginator/_paginator-theme.scss deleted file mode 100644 index 7ccaf6d82e70..000000000000 --- a/src/material-experimental/mdc-paginator/_paginator-theme.scss +++ /dev/null @@ -1,104 +0,0 @@ -@use 'sass:map'; -@use 'sass:meta'; -@use '@angular/material' as mat; -@use '@material/density' as mdc-density; -@use '@material/typography' as mdc-typography; - -@use './paginator-variables'; - -@mixin color($config-or-theme) { - $config: mat.get-color-config($config-or-theme); - $background: map.get($config, background); - $foreground: map.get($config, foreground); - $icon-color: rgba(mat.get-color-from-palette($foreground, base), 0.54); - $disabled-color: rgba(mat.get-color-from-palette($foreground, base), 0.12); - - .mat-mdc-paginator { - background: mat.get-color-from-palette($background, card); - color: rgba(mat.get-color-from-palette($foreground, base), 0.87); - } - - .mat-mdc-paginator-icon { - fill: $icon-color; - } - - .mat-mdc-paginator-decrement, - .mat-mdc-paginator-increment { - border-top: 2px solid $icon-color; - border-right: 2px solid $icon-color; - } - - .mat-mdc-paginator-first, - .mat-mdc-paginator-last { - border-top: 2px solid $icon-color; - } - - .mat-mdc-icon-button[disabled] { - .mat-mdc-paginator-decrement, - .mat-mdc-paginator-increment, - .mat-mdc-paginator-first, - .mat-mdc-paginator-last { - border-color: $disabled-color; - } - - .mat-mdc-paginator-icon { - fill: $disabled-color; - } - } -} - -@mixin typography($config-or-theme) { - $config: mat.private-typography-to-2018-config( - mat.get-typography-config($config-or-theme)); - - @include mat.private-using-mdc-typography($config) { - .mat-mdc-paginator { - @include mdc-typography.typography(caption, $query: mat.$private-mdc-typography-styles-query); - } - - .mat-mdc-paginator .mat-mdc-select-value { - font-size: mat.font-size($config, caption); - } - } -} - -@mixin density($config-or-theme) { - $density-scale: mat.get-density-config($config-or-theme); - $height: mdc-density.prop-value( - paginator-variables.$density-config, $density-scale, height); - - .mat-mdc-paginator { - // We need the form field to be narrower in order to fit into the paginator, - // so we set its density to be -4 or denser. - @if ((meta.type-of($density-scale) == 'number' and $density-scale >= -4) or - $density-scale == maximum) { - @include mat.private-form-field-density(-4); - } - @else { - @include mat.private-form-field-density($density-scale); - } - } - - .mat-mdc-paginator-container { - min-height: $height; - } -} - -@mixin theme($theme-or-color-config) { - $theme: mat.private-legacy-get-theme($theme-or-color-config); - @include mat.private-check-duplicate-theme-styles($theme, 'mat-mdc-paginator') { - $color: mat.get-color-config($theme); - $density: mat.get-density-config($theme); - $typography: mat.get-typography-config($theme); - - @if $color != null { - @include color($color); - } - @if $density != null { - @include density($density); - } - @if $typography != null { - @include typography($typography); - } - } -} diff --git a/src/material-experimental/mdc-paginator/_paginator-variables.import.scss b/src/material-experimental/mdc-paginator/_paginator-variables.import.scss deleted file mode 100644 index 85314afe4808..000000000000 --- a/src/material-experimental/mdc-paginator/_paginator-variables.import.scss +++ /dev/null @@ -1 +0,0 @@ -@forward 'paginator-variables' as mat-mdc-paginator-*; diff --git a/src/material-experimental/mdc-paginator/testing/paginator-harness.spec.ts b/src/material-experimental/mdc-paginator/testing/paginator-harness.spec.ts deleted file mode 100644 index a6abda570007..000000000000 --- a/src/material-experimental/mdc-paginator/testing/paginator-harness.spec.ts +++ /dev/null @@ -1,7 +0,0 @@ -import {MatPaginatorModule} from '@angular/material-experimental/mdc-paginator'; -import {runHarnessTests} from '@angular/material/paginator/testing/shared.spec'; -import {MatPaginatorHarness} from './paginator-harness'; - -describe('MDC-based MatPaginatorHarness', () => { - runHarnessTests(MatPaginatorModule, MatPaginatorHarness as any); -}); diff --git a/src/material-experimental/mdc-paginator/testing/paginator-harness.ts b/src/material-experimental/mdc-paginator/testing/paginator-harness.ts deleted file mode 100644 index 0e47dcc76622..000000000000 --- a/src/material-experimental/mdc-paginator/testing/paginator-harness.ts +++ /dev/null @@ -1,43 +0,0 @@ -/** - * @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 {ComponentHarnessConstructor, HarnessPredicate} from '@angular/cdk/testing'; -import {MatSelectHarness} from '@angular/material/select/testing'; -import { - PaginatorHarnessFilters, - _MatPaginatorHarnessBase, -} from '@angular/material/paginator/testing'; - -/** Harness for interacting with an MDC-based mat-paginator in tests. */ -export class MatPaginatorHarness extends _MatPaginatorHarnessBase { - /** Selector used to find paginator instances. */ - static hostSelector = '.mat-mdc-paginator'; - protected _nextButton = this.locatorFor('.mat-mdc-paginator-navigation-next'); - protected _previousButton = this.locatorFor('.mat-mdc-paginator-navigation-previous'); - protected _firstPageButton = this.locatorForOptional('.mat-mdc-paginator-navigation-first'); - protected _lastPageButton = this.locatorForOptional('.mat-mdc-paginator-navigation-last'); - protected _select = this.locatorForOptional( - MatSelectHarness.with({ - ancestor: '.mat-mdc-paginator-page-size', - }), - ); - protected _pageSizeFallback = this.locatorFor('.mat-mdc-paginator-page-size-value'); - protected _rangeLabel = this.locatorFor('.mat-mdc-paginator-range-label'); - - /** - * Gets a `HarnessPredicate` that can be used to search for a paginator with specific attributes. - * @param options Options for filtering which paginator instances are considered a match. - * @return a `HarnessPredicate` configured with the given options. - */ - static with( - this: ComponentHarnessConstructor, - options: PaginatorHarnessFilters = {}, - ): HarnessPredicate { - return new HarnessPredicate(this, options); - } -} diff --git a/src/material-experimental/mdc-table/BUILD.bazel b/src/material-experimental/mdc-table/BUILD.bazel index 66ac9ee0991e..ec1cbb428e63 100644 --- a/src/material-experimental/mdc-table/BUILD.bazel +++ b/src/material-experimental/mdc-table/BUILD.bazel @@ -20,8 +20,8 @@ ng_module( assets = [":table_scss"] + glob(["**/*.html"]), deps = [ "//src/cdk/table", - "//src/material-experimental/mdc-paginator", "//src/material/core", + "//src/material/paginator", "//src/material/sort", "//src/material/table", "@npm//@angular/core", @@ -61,7 +61,7 @@ ng_test_library( deps = [ ":mdc-table", "//src/cdk/table", - "//src/material-experimental/mdc-paginator", + "//src/material/paginator", "//src/material/sort", "@npm//@angular/platform-browser", "@npm//rxjs", diff --git a/src/material-experimental/mdc-table/table.spec.ts b/src/material-experimental/mdc-table/table.spec.ts index df5c09c3b7fb..ce1615ecebda 100644 --- a/src/material-experimental/mdc-table/table.spec.ts +++ b/src/material-experimental/mdc-table/table.spec.ts @@ -11,7 +11,7 @@ import {MatTable, MatTableDataSource, MatTableModule} from './index'; import {DataSource} from '@angular/cdk/table'; import {BehaviorSubject, Observable} from 'rxjs'; import {MatSort, MatSortHeader, MatSortModule} from '@angular/material/sort'; -import {MatPaginator, MatPaginatorModule} from '@angular/material-experimental/mdc-paginator'; +import {MatPaginator, MatPaginatorModule} from '@angular/material/paginator'; import {NoopAnimationsModule} from '@angular/platform-browser/animations'; describe('MDC-based MatTable', () => { diff --git a/src/material/_index.scss b/src/material/_index.scss index 1d25345168d7..e8e709e547c2 100644 --- a/src/material/_index.scss +++ b/src/material/_index.scss @@ -133,6 +133,8 @@ legacy-menu-typography; @forward './paginator/paginator-theme' as paginator-* show paginator-theme, paginator-color, paginator-typography; +@forward './legacy-paginator/paginator-theme' as legacy-paginator-* show legacy-paginator-theme, + legacy-paginator-color, legacy-paginator-typography; @forward './legacy-progress-bar/progress-bar-theme' as legacy-progress-bar-* show legacy-progress-bar-theme, legacy-progress-bar-color, legacy-progress-bar-typography; @forward './progress-bar/progress-bar-theme' as progress-bar-* show diff --git a/src/material/_theming.scss b/src/material/_theming.scss index 32cd63bfc0e1..80bc00454d37 100644 --- a/src/material/_theming.scss +++ b/src/material/_theming.scss @@ -25,7 +25,7 @@ @forward './legacy-input/input-legacy-index'; @forward './legacy-list/list-legacy-index'; @forward './legacy-menu/menu-legacy-index'; -@forward './paginator/paginator-legacy-index'; +@forward './legacy-paginator/paginator-legacy-index'; @forward './legacy-progress-bar/progress-bar-legacy-index'; @forward './progress-spinner/progress-spinner-legacy-index'; @forward './legacy-radio/radio-legacy-index'; diff --git a/src/material/config.bzl b/src/material/config.bzl index 2c55708e7abf..a4afc5b021dc 100644 --- a/src/material/config.bzl +++ b/src/material/config.bzl @@ -62,6 +62,8 @@ entryPoints = [ "legacy-menu/testing", "paginator", "paginator/testing", + "legacy-paginator", + "legacy-paginator/testing", "legacy-progress-bar", "legacy-progress-bar/testing", "progress-bar", diff --git a/src/material/core/density/private/_all-density.import.scss b/src/material/core/density/private/_all-density.import.scss index fe9ebd5a3925..8e196bc8d6f5 100644 --- a/src/material/core/density/private/_all-density.import.scss +++ b/src/material/core/density/private/_all-density.import.scss @@ -3,7 +3,6 @@ @forward '../../../stepper/stepper-theme.import'; @forward '../../../toolbar/toolbar-theme.import'; @forward '../../../tree/tree-theme.import'; -@forward '../../../paginator/paginator-theme.import'; @forward '../../../form-field/form-field-theme.import'; @forward 'all-density' hide all-component-densities; @@ -12,6 +11,5 @@ @import '../../../stepper/stepper-theme'; @import '../../../toolbar/toolbar-theme'; @import '../../../tree/tree-theme'; -@import '../../../paginator/paginator-theme'; @import '../../../form-field/form-field-theme'; @import '../../../button-toggle/button-toggle-theme'; diff --git a/src/material/core/density/private/_all-density.scss b/src/material/core/density/private/_all-density.scss index 3867c4c8daa0..b82da56ec2ff 100644 --- a/src/material/core/density/private/_all-density.scss +++ b/src/material/core/density/private/_all-density.scss @@ -30,7 +30,6 @@ @include stepper-theme.density($config); @include toolbar-theme.density($config); @include tree-theme.density($config); - @include paginator-theme.density($config); @include button-toggle-theme.density($config); } @@ -67,6 +66,7 @@ @include slider-theme.density($config); @include menu-theme.density($config); @include list-theme.density($config); + @include paginator-theme.density($config); @include private-all-unmigrated-component-densities($config); } diff --git a/src/material/core/theming/_all-theme.scss b/src/material/core/theming/_all-theme.scss index 04ebc2d7eead..2761840e77a1 100644 --- a/src/material/core/theming/_all-theme.scss +++ b/src/material/core/theming/_all-theme.scss @@ -48,7 +48,6 @@ @include expansion-theme.theme($theme-or-color-config); @include grid-list-theme.theme($theme-or-color-config); @include icon-theme.theme($theme-or-color-config); - @include paginator-theme.theme($theme-or-color-config); @include progress-spinner-theme.theme($theme-or-color-config); @include sidenav-theme.theme($theme-or-color-config); @include stepper-theme.theme($theme-or-color-config); @@ -78,6 +77,7 @@ @include slider-theme.theme($theme-or-color-config); @include menu-theme.theme($theme-or-color-config); @include list-theme.theme($theme-or-color-config); + @include paginator-theme.theme($theme-or-color-config); @include private-all-unmigrated-component-themes($theme-or-color-config); } } diff --git a/src/material/core/theming/tests/test-css-variables-theme.scss b/src/material/core/theming/tests/test-css-variables-theme.scss index 3340d02c3be4..6cfb357260f5 100644 --- a/src/material/core/theming/tests/test-css-variables-theme.scss +++ b/src/material/core/theming/tests/test-css-variables-theme.scss @@ -13,7 +13,6 @@ @use '../../../grid-list/grid-list-theme'; @use '../../../icon/icon-theme'; @use '../../../menu/menu-theme'; -@use '../../../paginator/paginator-theme'; @use '../../../progress-spinner/progress-spinner-theme'; @use '../../../sidenav/sidenav-theme'; @use '../../../stepper/stepper-theme'; @@ -61,7 +60,6 @@ @include grid-list-theme.theme($css-var-theme); @include icon-theme.theme($css-var-theme); @include menu-theme.theme($css-var-theme); - @include paginator-theme.theme($css-var-theme); @include progress-spinner-theme.theme($css-var-theme); @include sidenav-theme.theme($css-var-theme); @include stepper-theme.theme($css-var-theme); diff --git a/src/material/core/typography/_all-typography.scss b/src/material/core/typography/_all-typography.scss index 3975346e2bd0..8eeef0ae7205 100644 --- a/src/material/core/typography/_all-typography.scss +++ b/src/material/core/typography/_all-typography.scss @@ -50,7 +50,6 @@ @include expansion-theme.typography($config); @include grid-list-theme.typography($config); @include icon-theme.typography($config); - @include paginator-theme.typography($config); @include progress-spinner-theme.typography($config); @include sidenav-theme.typography($config); @include stepper-theme.typography($config); @@ -94,6 +93,7 @@ @include slider-theme.typography($config); @include menu-theme.typography($config); @include list-theme.typography($config); + @include paginator-theme.typography($config); } // @deprecated Use `all-component-typographies`. diff --git a/src/material/legacy-core/theming/_all-theme.scss b/src/material/legacy-core/theming/_all-theme.scss index 17542aba495c..5bc86a86bf7f 100644 --- a/src/material/legacy-core/theming/_all-theme.scss +++ b/src/material/legacy-core/theming/_all-theme.scss @@ -17,6 +17,7 @@ @use '../../legacy-slider/slider-theme'; @use '../../legacy-menu/menu-theme'; @use '../../legacy-list/list-theme'; +@use '../../legacy-paginator/paginator-theme'; // Create a theme. @mixin all-legacy-component-themes($theme-or-color-config) { @@ -39,6 +40,7 @@ @include slider-theme.theme($theme-or-color-config); @include menu-theme.theme($theme-or-color-config); @include list-theme.theme($theme-or-color-config); + @include paginator-theme.theme($theme-or-color-config); @include all-theme.private-all-unmigrated-component-themes($theme-or-color-config); } } diff --git a/src/material/legacy-core/typography/_all-typography.scss b/src/material/legacy-core/typography/_all-typography.scss index d368a944914e..f7c664b01388 100644 --- a/src/material/legacy-core/typography/_all-typography.scss +++ b/src/material/legacy-core/typography/_all-typography.scss @@ -19,6 +19,7 @@ @use '../../legacy-slider/slider-theme'; @use '../../legacy-menu/menu-theme'; @use '../../legacy-list/list-theme'; +@use '../../legacy-paginator/paginator-theme'; // Includes all of the typographic styles. @mixin all-legacy-component-typographies($config-or-theme: null) { @@ -55,6 +56,7 @@ @include slider-theme.typography($config); @include menu-theme.typography($config); @include list-theme.typography($config); + @include paginator-theme.typography($config); } // @deprecated Use `all-legacy-component-typographies`. diff --git a/src/material-experimental/mdc-paginator/BUILD.bazel b/src/material/legacy-paginator/BUILD.bazel similarity index 63% rename from src/material-experimental/mdc-paginator/BUILD.bazel rename to src/material/legacy-paginator/BUILD.bazel index 0d5e9b2e4315..8f35dbe6f16b 100644 --- a/src/material-experimental/mdc-paginator/BUILD.bazel +++ b/src/material/legacy-paginator/BUILD.bazel @@ -1,5 +1,6 @@ load( "//tools:defaults.bzl", + "markdown_to_html", "ng_module", "ng_test_library", "ng_web_test_suite", @@ -10,17 +11,19 @@ load( package(default_visibility = ["//visibility:public"]) ng_module( - name = "mdc-paginator", + name = "legacy-paginator", srcs = glob( ["**/*.ts"], exclude = ["**/*.spec.ts"], ), assets = [":paginator.css"] + glob(["**/*.html"]), deps = [ - "//src/material/button", + "//src/cdk/coercion", + "//src/material/core", + "//src/material/legacy-button", + "//src/material/legacy-select", + "//src/material/legacy-tooltip", "//src/material/paginator", - "//src/material/select", - "//src/material/tooltip", "@npm//@angular/common", "@npm//@angular/core", "@npm//@angular/forms", # TODO(jelbourn): transitive dep via generated code @@ -29,18 +32,15 @@ ng_module( ) sass_library( - name = "mdc_paginator_scss_lib", + name = "legacy_paginator_scss_lib", srcs = glob(["**/_*.scss"]), deps = [ - "//:mdc_sass_lib", - "//src/material:sass_lib", "//src/material/core:core_scss_lib", - "//src/material/form-field:form_field_scss_lib", ], ) sass_binary( - name = "mdc_paginator_scss", + name = "paginator_scss", src = "paginator.scss", deps = [ "//src/cdk:sass_lib", @@ -48,23 +48,32 @@ sass_binary( ) ng_test_library( - name = "mdc_paginator_tests_lib", + name = "unit_test_sources", srcs = glob( ["**/*.spec.ts"], exclude = ["**/*.e2e.spec.ts"], ), deps = [ - ":mdc-paginator", + ":legacy-paginator", "//src/cdk/testing/private", "//src/material/core", - "//src/material/select", + "//src/material/legacy-select", + "//src/material/paginator", "@npm//@angular/platform-browser", ], ) ng_web_test_suite( name = "unit_tests", - deps = [ - ":mdc_paginator_tests_lib", - ], + deps = [":unit_test_sources"], +) + +markdown_to_html( + name = "overview", + srcs = [":paginator.md"], +) + +filegroup( + name = "source-files", + srcs = glob(["**/*.ts"]), ) diff --git a/src/material/legacy-paginator/_paginator-legacy-index.scss b/src/material/legacy-paginator/_paginator-legacy-index.scss new file mode 100644 index 000000000000..dd470f5623b9 --- /dev/null +++ b/src/material/legacy-paginator/_paginator-legacy-index.scss @@ -0,0 +1,2 @@ +@forward 'paginator-variables' as mat-legacy-paginator-*; +@forward 'paginator-theme' as mat-legacy-paginator-*; diff --git a/src/material/legacy-paginator/_paginator-theme.import.scss b/src/material/legacy-paginator/_paginator-theme.import.scss new file mode 100644 index 000000000000..cd65280b543d --- /dev/null +++ b/src/material/legacy-paginator/_paginator-theme.import.scss @@ -0,0 +1,11 @@ +@forward '../core/theming/theming.import'; +@forward '../core/density/private/compatibility.import'; +@forward 'paginator-variables' as mat-legacy-paginator-*; +@forward '../core/typography/typography-utils.import'; +@forward 'paginator-theme' as mat-legacy-paginator-*; + +@import '../core/theming/palette'; +@import '../core/theming/theming'; +@import '../core/typography/typography-utils'; +@import '../core/density/private/compatibility'; +@import './paginator-variables'; diff --git a/src/material/legacy-paginator/_paginator-theme.scss b/src/material/legacy-paginator/_paginator-theme.scss new file mode 100644 index 000000000000..e0a2e9ae2283 --- /dev/null +++ b/src/material/legacy-paginator/_paginator-theme.scss @@ -0,0 +1,84 @@ +@use 'sass:map'; +@use '../core/theming/theming'; +@use '../core/typography/typography'; +@use '../core/typography/typography-utils'; +@use '../core/density/private/compatibility'; +@use './paginator-variables'; + +@mixin color($config-or-theme) { + $config: theming.get-color-config($config-or-theme); + $foreground: map.get($config, foreground); + $background: map.get($config, background); + + .mat-paginator { + background: theming.get-color-from-palette($background, 'card'); + } + + .mat-paginator, + .mat-paginator-page-size .mat-select-trigger { + color: theming.get-color-from-palette($foreground, secondary-text); + } + + .mat-paginator-decrement, + .mat-paginator-increment { + border-top: 2px solid theming.get-color-from-palette($foreground, 'icon'); + border-right: 2px solid theming.get-color-from-palette($foreground, 'icon'); + } + + .mat-paginator-first, + .mat-paginator-last { + border-top: 2px solid theming.get-color-from-palette($foreground, 'icon'); + } + + .mat-icon-button[disabled] { + .mat-paginator-decrement, + .mat-paginator-increment, + .mat-paginator-first, + .mat-paginator-last { + border-color: theming.get-color-from-palette($foreground, 'disabled'); + } + } +} + +@mixin typography($config-or-theme) { + $config: typography.private-typography-to-2014-config( + theming.get-typography-config($config-or-theme)); + .mat-paginator, + .mat-paginator-page-size .mat-select-trigger { + font: { + family: typography-utils.font-family($config, caption); + size: typography-utils.font-size($config, caption); + } + } +} + +@mixin density($config-or-theme) { + $density-scale: theming.get-density-config($config-or-theme); + $height: compatibility.private-density-prop-value(paginator-variables.$density-config, + $density-scale, height); + + @include compatibility.private-density-legacy-compatibility() { + .mat-paginator-container { + min-height: $height; + } + } +} + +@mixin theme($theme-or-color-config) { + $theme: theming.private-legacy-get-theme($theme-or-color-config); + @include theming.private-check-duplicate-theme-styles($theme, 'mat-legacy-paginator') { + $color: theming.get-color-config($theme); + $density: theming.get-density-config($theme); + $typography: theming.get-typography-config($theme); + + @if $color != null { + @include color($color); + } + @if $density != null { + @include density($density); + } + @if $typography != null { + @include typography($typography); + } + } +} diff --git a/src/material/paginator/_paginator-legacy-index.scss b/src/material/legacy-paginator/_paginator-variables.import.scss similarity index 52% rename from src/material/paginator/_paginator-legacy-index.scss rename to src/material/legacy-paginator/_paginator-variables.import.scss index a1994c7a10f4..8db448343fec 100644 --- a/src/material/paginator/_paginator-legacy-index.scss +++ b/src/material/legacy-paginator/_paginator-variables.import.scss @@ -1,2 +1 @@ @forward 'paginator-variables' as mat-paginator-*; -@forward 'paginator-theme' as mat-paginator-*; diff --git a/src/material-experimental/mdc-paginator/_paginator-variables.scss b/src/material/legacy-paginator/_paginator-variables.scss similarity index 100% rename from src/material-experimental/mdc-paginator/_paginator-variables.scss rename to src/material/legacy-paginator/_paginator-variables.scss diff --git a/src/material-experimental/mdc-paginator/index.ts b/src/material/legacy-paginator/index.ts similarity index 100% rename from src/material-experimental/mdc-paginator/index.ts rename to src/material/legacy-paginator/index.ts diff --git a/src/material/paginator/paginator-module.ts b/src/material/legacy-paginator/paginator-module.ts similarity index 76% rename from src/material/paginator/paginator-module.ts rename to src/material/legacy-paginator/paginator-module.ts index c073e144b998..49c6e30c1b31 100644 --- a/src/material/paginator/paginator-module.ts +++ b/src/material/legacy-paginator/paginator-module.ts @@ -12,8 +12,8 @@ import {MatCommonModule} from '@angular/material/core'; import {MatLegacyButtonModule} from '@angular/material/legacy-button'; import {MatLegacySelectModule} from '@angular/material/legacy-select'; import {MatLegacyTooltipModule} from '@angular/material/legacy-tooltip'; -import {MatPaginator} from './paginator'; -import {MAT_PAGINATOR_INTL_PROVIDER} from './paginator-intl'; +import {MatLegacyPaginator} from './paginator'; +import {MAT_PAGINATOR_INTL_PROVIDER} from '@angular/material/paginator'; @NgModule({ imports: [ @@ -23,8 +23,8 @@ import {MAT_PAGINATOR_INTL_PROVIDER} from './paginator-intl'; MatLegacyTooltipModule, MatCommonModule, ], - exports: [MatPaginator], - declarations: [MatPaginator], + exports: [MatLegacyPaginator], + declarations: [MatLegacyPaginator], providers: [MAT_PAGINATOR_INTL_PROVIDER], }) -export class MatPaginatorModule {} +export class MatLegacyPaginatorModule {} diff --git a/src/material-experimental/mdc-paginator/paginator.html b/src/material/legacy-paginator/paginator.html similarity index 72% rename from src/material-experimental/mdc-paginator/paginator.html rename to src/material/legacy-paginator/paginator.html index ac36538c5b5c..4fb3184d6cd5 100644 --- a/src/material-experimental/mdc-paginator/paginator.html +++ b/src/material/legacy-paginator/paginator.html @@ -1,7 +1,7 @@ -
-
-
-
+
+
+
+
{{_intl.itemsPerPageLabel}}
@@ -9,13 +9,13 @@ *ngIf="_displayedPageSizeOptions.length > 1" [appearance]="_formFieldAppearance!" [color]="color" - class="mat-mdc-paginator-page-size-select"> + class="mat-paginator-page-size-select"> {{pageSizeOption}} @@ -24,17 +24,17 @@
{{pageSize}}
-
-
+
+
{{_intl.getRangeLabel(pageIndex, pageSize, length)}}
diff --git a/src/material/legacy-paginator/paginator.md b/src/material/legacy-paginator/paginator.md new file mode 100644 index 000000000000..ab40df1494e1 --- /dev/null +++ b/src/material/legacy-paginator/paginator.md @@ -0,0 +1,38 @@ +`` provides navigation for paged information, typically used with a table. + + + +### Basic use +Each paginator instance requires: +* The number of items per page (default set to 50) +* The total number of items being paged + +The current page index defaults to 0, but can be explicitly set via pageIndex. + +When the user interacts with the paginator, a `PageEvent` will be fired that can be used to update +any associated data view. + +### Page size options +The paginator displays a dropdown of page sizes for the user to choose from. The options for this +dropdown can be set via `pageSizeOptions` + +The current pageSize will always appear in the dropdown, even if it is not included in +pageSizeOptions. + +If you want to customize some of the optional of the `mat-select` inside the `mat-paginator`, you +can use the `selectConfig` input. + +### Internationalization +The labels for the paginator can be customized by providing your own instance of `MatPaginatorIntl`. +This will allow you to change the following: + 1. The label for the length of each page. + 2. The range text displayed to the user. + 3. The tooltip messages on the navigation buttons. + +### Accessibility +The paginator uses `role="group"` to semantically group its child controls. You must add an +`aria-label` or `aria-labelledby` attribute to `` with a label that describes +the content controlled by the pagination control. + +You can set the `aria-label` attributes for the button and select controls within the paginator in +`MatPaginatorIntl`. diff --git a/src/material-experimental/mdc-paginator/paginator.scss b/src/material/legacy-paginator/paginator.scss similarity index 51% rename from src/material-experimental/mdc-paginator/paginator.scss rename to src/material/legacy-paginator/paginator.scss index e0f72e1eef3f..79823535bb07 100644 --- a/src/material-experimental/mdc-paginator/paginator.scss +++ b/src/material/legacy-paginator/paginator.scss @@ -4,35 +4,25 @@ $padding: 0 8px; $page-size-margin-right: 8px; $items-per-page-label-margin: 0 4px; -$selector-margin: 0 4px; -$selector-trigger-width: 84px; +$selector-margin: 6px 4px 0 4px; +$selector-trigger-width: 56px; +$selector-trigger-outline-width: 64px; +$selector-trigger-fill-width: 64px; $range-label-margin: 0 32px 0 24px; $button-icon-size: 28px; -.mat-mdc-paginator { +.mat-paginator { display: block; - - // This element reserves space for hints and error messages. - // Hide it since we know that we won't need it. - .mat-mdc-form-field-subscript-wrapper { - display: none; - } - - .mat-mdc-select { - // The smaller font size inherited from the paginator throws off the centering of the select - // inside the form field. This `line-height` helps to center it relative to the other text. - line-height: 1.5; - } } // Note: this wrapper element is only used to get the flexbox vertical centering to work // with the `min-height` on IE11. It can be removed if we drop support for IE. -.mat-mdc-paginator-outer-container { +.mat-paginator-outer-container { display: flex; } -.mat-mdc-paginator-container { +.mat-paginator-container { display: flex; align-items: center; justify-content: flex-end; @@ -41,7 +31,7 @@ $button-icon-size: 28px; width: 100%; } -.mat-mdc-paginator-page-size { +.mat-paginator-page-size { display: flex; align-items: baseline; margin-right: $page-size-margin-right; @@ -52,45 +42,44 @@ $button-icon-size: 28px; } } -.mat-mdc-paginator-page-size-label { +.mat-paginator-page-size-label { margin: $items-per-page-label-margin; } -.mat-mdc-paginator-page-size-select { +.mat-paginator-page-size-select { margin: $selector-margin; width: $selector-trigger-width; + + &.mat-form-field-appearance-outline { + width: $selector-trigger-outline-width; + } + + &.mat-form-field-appearance-fill { + width: $selector-trigger-fill-width; + } } -.mat-mdc-paginator-range-label { +.mat-paginator-range-label { margin: $range-label-margin; } -.mat-mdc-paginator-range-actions { +.mat-paginator-range-actions { display: flex; align-items: center; } -.mat-mdc-paginator-icon { +.mat-paginator-icon { display: inline-block; width: $button-icon-size; + fill: currentColor; [dir='rtl'] & { transform: rotate(180deg); } -} - -@include cdk.high-contrast(active, off) { - // The disabled button icon has to be set explicitly since the selector is too specific. - .mat-mdc-icon-button[disabled] .mat-mdc-paginator-icon, - .mat-mdc-paginator-icon { - fill: currentColor; + @include cdk.high-contrast(active, off) { // On Chromium browsers the `currentColor` blends in with the // background for SVGs so we have to fall back to `CanvasText`. fill: CanvasText; } - - .mat-mdc-paginator-range-actions .mat-mdc-icon-button { - outline: solid 1px; - } } diff --git a/src/material-experimental/mdc-paginator/paginator.spec.ts b/src/material/legacy-paginator/paginator.spec.ts similarity index 89% rename from src/material-experimental/mdc-paginator/paginator.spec.ts rename to src/material/legacy-paginator/paginator.spec.ts index 889d5d8b3d00..f63b2c5ce6c7 100644 --- a/src/material-experimental/mdc-paginator/paginator.spec.ts +++ b/src/material/legacy-paginator/paginator.spec.ts @@ -1,22 +1,18 @@ -import {ComponentFixture, TestBed, tick, fakeAsync} from '@angular/core/testing'; -import {Component, ViewChild, Type, Provider} from '@angular/core'; +import {ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing'; +import {Component, Provider, Type, ViewChild} from '@angular/core'; import {NoopAnimationsModule} from '@angular/platform-browser/animations'; import {dispatchMouseEvent} from '@angular/cdk/testing/private'; import {ThemePalette} from '@angular/material/core'; -import {MatSelect} from '@angular/material/select'; +import {MatSelect} from '@angular/material/legacy-select'; import {By} from '@angular/platform-browser'; -import { - MatPaginatorModule, - MatPaginator, - MatPaginatorIntl, - MatPaginatorSelectConfig, -} from './index'; +import {MatLegacyPaginator, MatPaginatorIntl, MatLegacyPaginatorModule} from './index'; import {MAT_PAGINATOR_DEFAULT_OPTIONS, MatPaginatorDefaultOptions} from './paginator'; +import {MatPaginatorSelectConfig} from '@angular/material/paginator'; -describe('MDC-based MatPaginator', () => { +describe('MatPaginator', () => { function createComponent(type: Type, providers: Provider[] = []): ComponentFixture { TestBed.configureTestingModule({ - imports: [MatPaginatorModule, NoopAnimationsModule], + imports: [MatLegacyPaginatorModule, NoopAnimationsModule], declarations: [type], providers: [MatPaginatorIntl, ...providers], }).compileComponents(); @@ -31,7 +27,7 @@ describe('MDC-based MatPaginator', () => { it('should show second page of list of 100, each page contains 10 items', () => { const fixture = createComponent(MatPaginatorApp); const component = fixture.componentInstance; - const rangeElement = fixture.nativeElement.querySelector('.mat-mdc-paginator-range-label'); + const rangeElement = fixture.nativeElement.querySelector('.mat-paginator-range-label'); component.length = 100; component.pageSize = 10; component.pageIndex = 1; @@ -42,7 +38,7 @@ describe('MDC-based MatPaginator', () => { it('should show third page of list of 200, each page contains 20 items', () => { const fixture = createComponent(MatPaginatorApp); const component = fixture.componentInstance; - const rangeElement = fixture.nativeElement.querySelector('.mat-mdc-paginator-range-label'); + const rangeElement = fixture.nativeElement.querySelector('.mat-paginator-range-label'); component.length = 200; component.pageSize = 20; component.pageIndex = 2; @@ -53,7 +49,7 @@ describe('MDC-based MatPaginator', () => { it('should show first page of list of 0, each page contains 5 items', () => { const fixture = createComponent(MatPaginatorApp); const component = fixture.componentInstance; - const rangeElement = fixture.nativeElement.querySelector('.mat-mdc-paginator-range-label'); + const rangeElement = fixture.nativeElement.querySelector('.mat-paginator-range-label'); component.length = 0; component.pageSize = 5; component.pageIndex = 2; @@ -64,7 +60,7 @@ describe('MDC-based MatPaginator', () => { it('should show third page of list of 12, each page contains 5 items', () => { const fixture = createComponent(MatPaginatorApp); const component = fixture.componentInstance; - const rangeElement = fixture.nativeElement.querySelector('.mat-mdc-paginator-range-label'); + const rangeElement = fixture.nativeElement.querySelector('.mat-paginator-range-label'); component.length = 12; component.pageSize = 5; component.pageIndex = 2; @@ -75,7 +71,7 @@ describe('MDC-based MatPaginator', () => { it('should show third page of list of 10, each page contains 5 items', () => { const fixture = createComponent(MatPaginatorApp); const component = fixture.componentInstance; - const rangeElement = fixture.nativeElement.querySelector('.mat-mdc-paginator-range-label'); + const rangeElement = fixture.nativeElement.querySelector('.mat-paginator-range-label'); component.length = 10; component.pageSize = 5; component.pageIndex = 2; @@ -86,7 +82,7 @@ describe('MDC-based MatPaginator', () => { it('should show third page of list of -5, each page contains 5 items', () => { const fixture = createComponent(MatPaginatorApp); const component = fixture.componentInstance; - const rangeElement = fixture.nativeElement.querySelector('.mat-mdc-paginator-range-label'); + const rangeElement = fixture.nativeElement.querySelector('.mat-paginator-range-label'); component.length = -5; component.pageSize = 5; component.pageIndex = 2; @@ -97,21 +93,16 @@ describe('MDC-based MatPaginator', () => { it('should show right aria-labels for select and buttons', () => { const fixture = createComponent(MatPaginatorApp); + const select = fixture.nativeElement.querySelector('.mat-select'); + expect(select.getAttribute('aria-label')).toBe('Items per page:'); expect(getPreviousButton(fixture).getAttribute('aria-label')).toBe('Previous page'); expect(getNextButton(fixture).getAttribute('aria-label')).toBe('Next page'); - - const select = fixture.nativeElement.querySelector('.mat-mdc-select'); - const selectLabelIds = select.getAttribute('aria-labelledby')?.split(/\s/g) as string[]; - const selectLabelTexts = selectLabelIds?.map(labelId => { - return fixture.nativeElement.querySelector(`#${labelId}`)?.textContent?.trim(); - }); - expect(selectLabelTexts).toContain('Items per page:'); }); it('should re-render when the i18n labels change', () => { const fixture = createComponent(MatPaginatorApp); - const label = fixture.nativeElement.querySelector('.mat-mdc-paginator-page-size-label'); + const label = fixture.nativeElement.querySelector('.mat-paginator-page-size-label'); const intl = TestBed.inject(MatPaginatorIntl); intl.itemsPerPageLabel = '1337 items per page'; @@ -206,7 +197,7 @@ describe('MDC-based MatPaginator', () => { it('should be able to set the color of the form field', () => { const fixture = createComponent(MatPaginatorApp); const component = fixture.componentInstance; - const formField: HTMLElement = fixture.nativeElement.querySelector('.mat-mdc-form-field'); + const formField: HTMLElement = fixture.nativeElement.querySelector('.mat-form-field'); component.color = 'accent'; fixture.detectChanges(); @@ -241,7 +232,7 @@ describe('MDC-based MatPaginator', () => { describe('when showing the first and last button', () => { let fixture: ComponentFixture; let component: MatPaginatorApp; - let paginator: MatPaginator; + let paginator: MatLegacyPaginator; beforeEach(() => { fixture = createComponent(MatPaginatorApp); @@ -315,7 +306,7 @@ describe('MDC-based MatPaginator', () => { const fixture = createComponent(MatPaginatorApp); const component = fixture.componentInstance; const paginator = component.paginator; - const rangeElement = fixture.nativeElement.querySelector('.mat-mdc-paginator-range-label'); + const rangeElement = fixture.nativeElement.querySelector('.mat-paginator-range-label'); expect(rangeElement.innerText.trim()).toBe('1 – 10 of 100'); @@ -332,11 +323,11 @@ describe('MDC-based MatPaginator', () => { expect(rangeElement.innerText.trim()).toBe('7 – 12 of 99'); // Having one option and the same page size should remove the select menu - expect(fixture.nativeElement.querySelector('.mat-mdc-select')).not.toBeNull(); + expect(fixture.nativeElement.querySelector('.mat-select')).not.toBeNull(); paginator.pageSize = 10; paginator.pageSizeOptions = [10]; fixture.detectChanges(); - expect(fixture.nativeElement.querySelector('.mat-mdc-select')).toBeNull(); + expect(fixture.nativeElement.querySelector('.mat-select')).toBeNull(); }); it('should default the page size options to the page size if no options provided', () => { @@ -447,13 +438,13 @@ describe('MDC-based MatPaginator', () => { const paginator = component.paginator; expect(paginator._displayedPageSizeOptions).toEqual([5, 10, 25, 100]); - expect(fixture.nativeElement.querySelector('.mat-mdc-select')).not.toBeNull(); + expect(fixture.nativeElement.querySelector('.mat-select')).not.toBeNull(); // Remove options so that the paginator only uses the current page size (10) as an option. // Should no longer show the select component since there is only one option. component.pageSizeOptions = []; fixture.detectChanges(); - expect(fixture.nativeElement.querySelector('.mat-mdc-select')).toBeNull(); + expect(fixture.nativeElement.querySelector('.mat-select')).toBeNull(); }); it('should handle the number inputs being passed in as strings', () => { @@ -471,14 +462,14 @@ describe('MDC-based MatPaginator', () => { const fixture = createComponent(MatPaginatorApp); const element = fixture.nativeElement; - expect(element.querySelector('.mat-mdc-paginator-page-size')) + expect(element.querySelector('.mat-paginator-page-size')) .withContext('Expected select to be rendered.') .toBeTruthy(); fixture.componentInstance.hidePageSize = true; fixture.detectChanges(); - expect(element.querySelector('.mat-mdc-paginator-page-size')) + expect(element.querySelector('.mat-paginator-page-size')) .withContext('Expected select to be removed.') .toBeNull(); }); @@ -544,19 +535,19 @@ describe('MDC-based MatPaginator', () => { }); function getPreviousButton(fixture: ComponentFixture) { - return fixture.nativeElement.querySelector('.mat-mdc-paginator-navigation-previous'); + return fixture.nativeElement.querySelector('.mat-paginator-navigation-previous'); } function getNextButton(fixture: ComponentFixture) { - return fixture.nativeElement.querySelector('.mat-mdc-paginator-navigation-next'); + return fixture.nativeElement.querySelector('.mat-paginator-navigation-next'); } function getFirstButton(fixture: ComponentFixture) { - return fixture.nativeElement.querySelector('.mat-mdc-paginator-navigation-first'); + return fixture.nativeElement.querySelector('.mat-paginator-navigation-first'); } function getLastButton(fixture: ComponentFixture) { - return fixture.nativeElement.querySelector('.mat-mdc-paginator-navigation-last'); + return fixture.nativeElement.querySelector('.mat-paginator-navigation-last'); } @Component({ @@ -586,7 +577,7 @@ class MatPaginatorApp { color: ThemePalette; selectConfig: MatPaginatorSelectConfig = {}; - @ViewChild(MatPaginator) paginator: MatPaginator; + @ViewChild(MatLegacyPaginator) paginator: MatLegacyPaginator; goToLastPage() { this.pageIndex = Math.ceil(this.length / this.pageSize) - 1; @@ -599,7 +590,7 @@ class MatPaginatorApp { `, }) class MatPaginatorWithoutInputsApp { - @ViewChild(MatPaginator) paginator: MatPaginator; + @ViewChild(MatLegacyPaginator) paginator: MatLegacyPaginator; } @Component({ @@ -608,7 +599,7 @@ class MatPaginatorWithoutInputsApp { `, }) class MatPaginatorWithoutPageSizeApp { - @ViewChild(MatPaginator) paginator: MatPaginator; + @ViewChild(MatLegacyPaginator) paginator: MatLegacyPaginator; } @Component({ @@ -617,20 +608,20 @@ class MatPaginatorWithoutPageSizeApp { `, }) class MatPaginatorWithoutOptionsApp { - @ViewChild(MatPaginator) paginator: MatPaginator; + @ViewChild(MatLegacyPaginator) paginator: MatLegacyPaginator; } @Component({ template: ` `, }) class MatPaginatorWithStringValues { - @ViewChild(MatPaginator) paginator: MatPaginator; + @ViewChild(MatLegacyPaginator) paginator: MatLegacyPaginator; } @Component({ @@ -640,6 +631,6 @@ class MatPaginatorWithStringValues { `, }) class MatPaginatorWithReadonlyOptions { - @ViewChild(MatPaginator) paginator: MatPaginator; + @ViewChild(MatLegacyPaginator) paginator: MatLegacyPaginator; pageSizeOptions: readonly number[] = [5, 10, 25, 100]; } diff --git a/src/material-experimental/mdc-paginator/paginator.ts b/src/material/legacy-paginator/paginator.ts similarity index 70% rename from src/material-experimental/mdc-paginator/paginator.ts rename to src/material/legacy-paginator/paginator.ts index 7b5bf8454b8c..25251bd4efad 100644 --- a/src/material-experimental/mdc-paginator/paginator.ts +++ b/src/material/legacy-paginator/paginator.ts @@ -15,12 +15,8 @@ import { Optional, ViewEncapsulation, } from '@angular/core'; -import {MatPaginatorIntl, _MatPaginatorBase} from '@angular/material/paginator'; -import {MatFormFieldAppearance} from '@angular/material/form-field'; - -// Note that while `MatPaginatorDefaultOptions` and `MAT_PAGINATOR_DEFAULT_OPTIONS` are identical -// between the MDC and non-MDC versions, we have to duplicate them, because the type of -// `formFieldAppearance` is narrower in the MDC version. +import {MatLegacyFormFieldAppearance} from '@angular/material/legacy-form-field'; +import {_MatPaginatorBase, MatPaginatorIntl} from '@angular/material/paginator'; /** Object that can be used to configure the default options for the paginator module. */ export interface MatPaginatorDefaultOptions { @@ -37,7 +33,7 @@ export interface MatPaginatorDefaultOptions { showFirstLastButtons?: boolean; /** The default form-field appearance to apply to the page size options selector. */ - formFieldAppearance?: MatFormFieldAppearance; + formFieldAppearance?: MatLegacyFormFieldAppearance; } /** Injection token that can be used to provide the default options for the paginator module. */ @@ -45,8 +41,6 @@ export const MAT_PAGINATOR_DEFAULT_OPTIONS = new InjectionToken { +export class MatLegacyPaginator extends _MatPaginatorBase { /** If set, styles the "page size" form field with the designated style. */ - _formFieldAppearance?: MatFormFieldAppearance; - - /** ID for the DOM node containing the paginator's items per page label. */ - readonly _pageSizeLabelId = `mat-paginator-page-size-label-${nextUniqueId++}`; + _formFieldAppearance?: MatLegacyFormFieldAppearance; constructor( intl: MatPaginatorIntl, @@ -78,6 +69,9 @@ export class MatPaginator extends _MatPaginatorBase @Optional() @Inject(MAT_PAGINATOR_DEFAULT_OPTIONS) defaults?: MatPaginatorDefaultOptions, ) { super(intl, changeDetectorRef, defaults); - this._formFieldAppearance = defaults?.formFieldAppearance || 'outline'; + + if (defaults && defaults.formFieldAppearance != null) { + this._formFieldAppearance = defaults.formFieldAppearance; + } } } diff --git a/src/material-experimental/mdc-paginator/public-api.ts b/src/material/legacy-paginator/public-api.ts similarity index 87% rename from src/material-experimental/mdc-paginator/public-api.ts rename to src/material/legacy-paginator/public-api.ts index e50693b58861..f15c0cfa3fa4 100644 --- a/src/material-experimental/mdc-paginator/public-api.ts +++ b/src/material/legacy-paginator/public-api.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.io/license */ -export * from './module'; +export * from './paginator-module'; export * from './paginator'; export { MatPaginatorIntl, @@ -14,4 +14,5 @@ export { MAT_PAGINATOR_INTL_PROVIDER, PageEvent, MatPaginatorSelectConfig, + _MatPaginatorBase, } from '@angular/material/paginator'; diff --git a/src/material-experimental/mdc-paginator/testing/BUILD.bazel b/src/material/legacy-paginator/testing/BUILD.bazel similarity index 66% rename from src/material-experimental/mdc-paginator/testing/BUILD.bazel rename to src/material/legacy-paginator/testing/BUILD.bazel index bad9adc68fe9..3ca4e84f017f 100644 --- a/src/material-experimental/mdc-paginator/testing/BUILD.bazel +++ b/src/material/legacy-paginator/testing/BUILD.bazel @@ -9,25 +9,31 @@ ts_library( exclude = ["**/*.spec.ts"], ), deps = [ + "//src/cdk/coercion", "//src/cdk/testing", + "//src/material/legacy-select/testing", "//src/material/paginator/testing", - "//src/material/select/testing", ], ) +filegroup( + name = "source-files", + srcs = glob(["**/*.ts"]), +) + ng_test_library( name = "unit_tests_lib", - srcs = glob(["**/*.spec.ts"]), + srcs = glob( + ["**/*.spec.ts"], + ), deps = [ ":testing", - "//src/material-experimental/mdc-paginator", + "//src/material/legacy-paginator", "//src/material/paginator/testing:harness_tests_lib", ], ) ng_web_test_suite( name = "unit_tests", - deps = [ - ":unit_tests_lib", - ], + deps = [":unit_tests_lib"], ) diff --git a/src/material-experimental/mdc-paginator/testing/index.ts b/src/material/legacy-paginator/testing/index.ts similarity index 100% rename from src/material-experimental/mdc-paginator/testing/index.ts rename to src/material/legacy-paginator/testing/index.ts diff --git a/src/material/legacy-paginator/testing/paginator-harness.spec.ts b/src/material/legacy-paginator/testing/paginator-harness.spec.ts new file mode 100644 index 000000000000..78860ac05a60 --- /dev/null +++ b/src/material/legacy-paginator/testing/paginator-harness.spec.ts @@ -0,0 +1,7 @@ +import {MatLegacyPaginatorModule} from '@angular/material/legacy-paginator'; +import {runHarnessTests} from '@angular/material/paginator/testing/shared.spec'; +import {MatLegacyPaginatorHarness} from './paginator-harness'; + +describe('Non-MDC-based MatPaginatorHarness', () => { + runHarnessTests(MatLegacyPaginatorModule, MatLegacyPaginatorHarness as any); +}); diff --git a/src/material/legacy-paginator/testing/paginator-harness.ts b/src/material/legacy-paginator/testing/paginator-harness.ts new file mode 100644 index 000000000000..2692ea4d1628 --- /dev/null +++ b/src/material/legacy-paginator/testing/paginator-harness.ts @@ -0,0 +1,41 @@ +/** + * @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 {HarnessPredicate} from '@angular/cdk/testing'; +import {MatLegacySelectHarness} from '@angular/material/legacy-select/testing'; +import { + _MatPaginatorHarnessBase, + PaginatorHarnessFilters, +} from '@angular/material/paginator/testing'; + +/** Harness for interacting with a standard mat-paginator in tests. */ +export class MatLegacyPaginatorHarness extends _MatPaginatorHarnessBase { + /** Selector used to find paginator instances. */ + static hostSelector = '.mat-paginator'; + protected _nextButton = this.locatorFor('.mat-paginator-navigation-next'); + protected _previousButton = this.locatorFor('.mat-paginator-navigation-previous'); + protected _firstPageButton = this.locatorForOptional('.mat-paginator-navigation-first'); + protected _lastPageButton = this.locatorForOptional('.mat-paginator-navigation-last'); + protected _select = this.locatorForOptional( + MatLegacySelectHarness.with({ + ancestor: '.mat-paginator-page-size', + }), + ); + protected _pageSizeFallback = this.locatorFor('.mat-paginator-page-size-value'); + protected _rangeLabel = this.locatorFor('.mat-paginator-range-label'); + + /** + * Gets a `HarnessPredicate` that can be used to search for a `MatPaginatorHarness` that meets + * certain criteria. + * @param options Options for filtering which paginator instances are considered a match. + * @return a `HarnessPredicate` configured with the given options. + */ + static with(options: PaginatorHarnessFilters = {}): HarnessPredicate { + return new HarnessPredicate(MatLegacyPaginatorHarness, options); + } +} diff --git a/src/material-experimental/mdc-paginator/testing/public-api.ts b/src/material/legacy-paginator/testing/public-api.ts similarity index 68% rename from src/material-experimental/mdc-paginator/testing/public-api.ts rename to src/material/legacy-paginator/testing/public-api.ts index 4f0692f434bb..3ac890c48224 100644 --- a/src/material-experimental/mdc-paginator/testing/public-api.ts +++ b/src/material/legacy-paginator/testing/public-api.ts @@ -7,4 +7,7 @@ */ export * from './paginator-harness'; -export {PaginatorHarnessFilters} from '@angular/material/paginator/testing'; +export { + _MatPaginatorHarnessBase, + PaginatorHarnessFilters, +} from '@angular/material/paginator/testing'; diff --git a/src/material/paginator/BUILD.bazel b/src/material/paginator/BUILD.bazel index b572c592eb9e..4981a4b6c684 100644 --- a/src/material/paginator/BUILD.bazel +++ b/src/material/paginator/BUILD.bazel @@ -19,8 +19,8 @@ ng_module( assets = [":paginator.css"] + glob(["**/*.html"]), deps = [ "//src/cdk/coercion", + "//src/material/button", "//src/material/core", - "//src/material/legacy-button", "//src/material/legacy-select", "//src/material/legacy-tooltip", "@npm//@angular/common", @@ -34,7 +34,9 @@ sass_library( name = "paginator_scss_lib", srcs = glob(["**/_*.scss"]), deps = [ + "//:mdc_sass_lib", "//src/material/core:core_scss_lib", + "//src/material/form-field:form_field_scss_lib", ], ) @@ -47,7 +49,7 @@ sass_binary( ) ng_test_library( - name = "unit_test_sources", + name = "paginator_tests_lib", srcs = glob( ["**/*.spec.ts"], exclude = ["**/*.e2e.spec.ts"], @@ -56,14 +58,16 @@ ng_test_library( ":paginator", "//src/cdk/testing/private", "//src/material/core", - "//src/material/legacy-select", + "//src/material/select", "@npm//@angular/platform-browser", ], ) ng_web_test_suite( name = "unit_tests", - deps = [":unit_test_sources"], + deps = [ + ":paginator_tests_lib", + ], ) markdown_to_html( diff --git a/src/material/paginator/_paginator-theme.import.scss b/src/material/paginator/_paginator-theme.import.scss index 3bdfabf4fc91..42fd4c540e94 100644 --- a/src/material/paginator/_paginator-theme.import.scss +++ b/src/material/paginator/_paginator-theme.import.scss @@ -1,11 +1,6 @@ -@forward '../core/theming/theming.import'; -@forward '../core/density/private/compatibility.import'; -@forward 'paginator-variables' as mat-paginator-*; -@forward '../core/typography/typography-utils.import'; -@forward 'paginator-theme' as mat-paginator-*; +@forward 'paginator-variables' as mat-mdc-paginator-*; +@forward 'paginator-theme' as mat-mdc-paginator-*; -@import '../core/theming/palette'; -@import '../core/theming/theming'; -@import '../core/typography/typography-utils'; -@import '../core/density/private/compatibility'; +@import '../../material/core/theming/theming'; +@import '../../material/core/density/private/compatibility'; @import './paginator-variables'; diff --git a/src/material/paginator/_paginator-theme.scss b/src/material/paginator/_paginator-theme.scss index 561ebd2cfcbd..24f47d65d561 100644 --- a/src/material/paginator/_paginator-theme.scss +++ b/src/material/paginator/_paginator-theme.scss @@ -1,66 +1,90 @@ @use 'sass:map'; -@use '../core/theming/theming'; +@use 'sass:meta'; +@use '@material/density' as mdc-density; +@use '@material/typography' as mdc-typography; + @use '../core/typography/typography'; @use '../core/typography/typography-utils'; -@use '../core/density/private/compatibility'; +@use '../core/mdc-helpers/mdc-helpers'; +@use '../core/theming/theming'; +@use '../form-field/form-field-density'; @use './paginator-variables'; @mixin color($config-or-theme) { $config: theming.get-color-config($config-or-theme); - $foreground: map.get($config, foreground); $background: map.get($config, background); + $foreground: map.get($config, foreground); + $icon-color: rgba(theming.get-color-from-palette($foreground, base), 0.54); + $disabled-color: rgba(theming.get-color-from-palette($foreground, base), 0.12); - .mat-paginator { - background: theming.get-color-from-palette($background, 'card'); + .mat-mdc-paginator { + background: theming.get-color-from-palette($background, card); + color: rgba(theming.get-color-from-palette($foreground, base), 0.87); } - .mat-paginator, - .mat-paginator-page-size .mat-select-trigger { - color: theming.get-color-from-palette($foreground, secondary-text); + .mat-mdc-paginator-icon { + fill: $icon-color; } - .mat-paginator-decrement, - .mat-paginator-increment { - border-top: 2px solid theming.get-color-from-palette($foreground, 'icon'); - border-right: 2px solid theming.get-color-from-palette($foreground, 'icon'); + .mat-mdc-paginator-decrement, + .mat-mdc-paginator-increment { + border-top: 2px solid $icon-color; + border-right: 2px solid $icon-color; } - .mat-paginator-first, - .mat-paginator-last { - border-top: 2px solid theming.get-color-from-palette($foreground, 'icon'); + .mat-mdc-paginator-first, + .mat-mdc-paginator-last { + border-top: 2px solid $icon-color; } - .mat-icon-button[disabled] { - .mat-paginator-decrement, - .mat-paginator-increment, - .mat-paginator-first, - .mat-paginator-last { - border-color: theming.get-color-from-palette($foreground, 'disabled'); + .mat-mdc-icon-button[disabled] { + .mat-mdc-paginator-decrement, + .mat-mdc-paginator-increment, + .mat-mdc-paginator-first, + .mat-mdc-paginator-last { + border-color: $disabled-color; + } + + .mat-mdc-paginator-icon { + fill: $disabled-color; } } } @mixin typography($config-or-theme) { - $config: typography.private-typography-to-2014-config( + $config: typography.private-typography-to-2018-config( theming.get-typography-config($config-or-theme)); - .mat-paginator, - .mat-paginator-page-size .mat-select-trigger { - font: { - family: typography-utils.font-family($config, caption); - size: typography-utils.font-size($config, caption); + + @include mdc-helpers.using-mdc-typography($config) { + .mat-mdc-paginator { + @include mdc-typography.typography(caption, $query: mdc-helpers.$mdc-typography-styles-query); + } + + .mat-mdc-paginator .mat-mdc-select-value { + font-size: typography-utils.font-size($config, caption); } } } @mixin density($config-or-theme) { $density-scale: theming.get-density-config($config-or-theme); - $height: compatibility.private-density-prop-value(paginator-variables.$density-config, - $density-scale, height); + $height: mdc-density.prop-value( + paginator-variables.$density-config, $density-scale, height); - @include compatibility.private-density-legacy-compatibility() { - .mat-paginator-container { - min-height: $height; + .mat-mdc-paginator { + // We need the form field to be narrower in order to fit into the paginator, + // so we set its density to be -4 or denser. + @if ((meta.type-of($density-scale) == 'number' and $density-scale >= -4) or + $density-scale == maximum) { + @include form-field-density.private-form-field-density(-4); } + @else { + @include form-field-density.private-form-field-density($density-scale); + } + } + + .mat-mdc-paginator-container { + min-height: $height; } } diff --git a/src/material/paginator/_paginator-variables.import.scss b/src/material/paginator/_paginator-variables.import.scss index 8db448343fec..85314afe4808 100644 --- a/src/material/paginator/_paginator-variables.import.scss +++ b/src/material/paginator/_paginator-variables.import.scss @@ -1 +1 @@ -@forward 'paginator-variables' as mat-paginator-*; +@forward 'paginator-variables' as mat-mdc-paginator-*; diff --git a/src/material-experimental/mdc-paginator/module.ts b/src/material/paginator/module.ts similarity index 91% rename from src/material-experimental/mdc-paginator/module.ts rename to src/material/paginator/module.ts index a161cf20c760..a331f5c01ccf 100644 --- a/src/material-experimental/mdc-paginator/module.ts +++ b/src/material/paginator/module.ts @@ -8,7 +8,7 @@ import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; -import {MAT_PAGINATOR_INTL_PROVIDER} from '@angular/material/paginator'; +import {MAT_PAGINATOR_INTL_PROVIDER} from './paginator-intl'; import {MatButtonModule} from '@angular/material/button'; import {MatSelectModule} from '@angular/material/select'; import {MatTooltipModule} from '@angular/material/tooltip'; diff --git a/src/material/paginator/paginator.html b/src/material/paginator/paginator.html index 4fb3184d6cd5..ac36538c5b5c 100644 --- a/src/material/paginator/paginator.html +++ b/src/material/paginator/paginator.html @@ -1,7 +1,7 @@ -
-
-
-
+
+
+
+
{{_intl.itemsPerPageLabel}}
@@ -9,13 +9,13 @@ *ngIf="_displayedPageSizeOptions.length > 1" [appearance]="_formFieldAppearance!" [color]="color" - class="mat-paginator-page-size-select"> + class="mat-mdc-paginator-page-size-select"> {{pageSizeOption}} @@ -24,17 +24,17 @@
{{pageSize}}
-
-
+
+
{{_intl.getRangeLabel(pageIndex, pageSize, length)}}
diff --git a/src/material/paginator/paginator.scss b/src/material/paginator/paginator.scss index 79823535bb07..e0f72e1eef3f 100644 --- a/src/material/paginator/paginator.scss +++ b/src/material/paginator/paginator.scss @@ -4,25 +4,35 @@ $padding: 0 8px; $page-size-margin-right: 8px; $items-per-page-label-margin: 0 4px; -$selector-margin: 6px 4px 0 4px; -$selector-trigger-width: 56px; -$selector-trigger-outline-width: 64px; -$selector-trigger-fill-width: 64px; +$selector-margin: 0 4px; +$selector-trigger-width: 84px; $range-label-margin: 0 32px 0 24px; $button-icon-size: 28px; -.mat-paginator { +.mat-mdc-paginator { display: block; + + // This element reserves space for hints and error messages. + // Hide it since we know that we won't need it. + .mat-mdc-form-field-subscript-wrapper { + display: none; + } + + .mat-mdc-select { + // The smaller font size inherited from the paginator throws off the centering of the select + // inside the form field. This `line-height` helps to center it relative to the other text. + line-height: 1.5; + } } // Note: this wrapper element is only used to get the flexbox vertical centering to work // with the `min-height` on IE11. It can be removed if we drop support for IE. -.mat-paginator-outer-container { +.mat-mdc-paginator-outer-container { display: flex; } -.mat-paginator-container { +.mat-mdc-paginator-container { display: flex; align-items: center; justify-content: flex-end; @@ -31,7 +41,7 @@ $button-icon-size: 28px; width: 100%; } -.mat-paginator-page-size { +.mat-mdc-paginator-page-size { display: flex; align-items: baseline; margin-right: $page-size-margin-right; @@ -42,44 +52,45 @@ $button-icon-size: 28px; } } -.mat-paginator-page-size-label { +.mat-mdc-paginator-page-size-label { margin: $items-per-page-label-margin; } -.mat-paginator-page-size-select { +.mat-mdc-paginator-page-size-select { margin: $selector-margin; width: $selector-trigger-width; - - &.mat-form-field-appearance-outline { - width: $selector-trigger-outline-width; - } - - &.mat-form-field-appearance-fill { - width: $selector-trigger-fill-width; - } } -.mat-paginator-range-label { +.mat-mdc-paginator-range-label { margin: $range-label-margin; } -.mat-paginator-range-actions { +.mat-mdc-paginator-range-actions { display: flex; align-items: center; } -.mat-paginator-icon { +.mat-mdc-paginator-icon { display: inline-block; width: $button-icon-size; - fill: currentColor; [dir='rtl'] & { transform: rotate(180deg); } +} + +@include cdk.high-contrast(active, off) { + // The disabled button icon has to be set explicitly since the selector is too specific. + .mat-mdc-icon-button[disabled] .mat-mdc-paginator-icon, + .mat-mdc-paginator-icon { + fill: currentColor; - @include cdk.high-contrast(active, off) { // On Chromium browsers the `currentColor` blends in with the // background for SVGs so we have to fall back to `CanvasText`. fill: CanvasText; } + + .mat-mdc-paginator-range-actions .mat-mdc-icon-button { + outline: solid 1px; + } } diff --git a/src/material/paginator/paginator.spec.ts b/src/material/paginator/paginator.spec.ts index 4b95a0b978b4..889d5d8b3d00 100644 --- a/src/material/paginator/paginator.spec.ts +++ b/src/material/paginator/paginator.spec.ts @@ -1,18 +1,19 @@ -import {ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing'; -import {Component, Provider, Type, ViewChild} from '@angular/core'; +import {ComponentFixture, TestBed, tick, fakeAsync} from '@angular/core/testing'; +import {Component, ViewChild, Type, Provider} from '@angular/core'; import {NoopAnimationsModule} from '@angular/platform-browser/animations'; import {dispatchMouseEvent} from '@angular/cdk/testing/private'; import {ThemePalette} from '@angular/material/core'; -import {MatSelect} from '@angular/material/legacy-select'; +import {MatSelect} from '@angular/material/select'; import {By} from '@angular/platform-browser'; -import {MatPaginator, MatPaginatorIntl, MatPaginatorModule} from './index'; import { - MAT_PAGINATOR_DEFAULT_OPTIONS, - MatPaginatorDefaultOptions, + MatPaginatorModule, + MatPaginator, + MatPaginatorIntl, MatPaginatorSelectConfig, -} from './paginator'; +} from './index'; +import {MAT_PAGINATOR_DEFAULT_OPTIONS, MatPaginatorDefaultOptions} from './paginator'; -describe('MatPaginator', () => { +describe('MDC-based MatPaginator', () => { function createComponent(type: Type, providers: Provider[] = []): ComponentFixture { TestBed.configureTestingModule({ imports: [MatPaginatorModule, NoopAnimationsModule], @@ -30,7 +31,7 @@ describe('MatPaginator', () => { it('should show second page of list of 100, each page contains 10 items', () => { const fixture = createComponent(MatPaginatorApp); const component = fixture.componentInstance; - const rangeElement = fixture.nativeElement.querySelector('.mat-paginator-range-label'); + const rangeElement = fixture.nativeElement.querySelector('.mat-mdc-paginator-range-label'); component.length = 100; component.pageSize = 10; component.pageIndex = 1; @@ -41,7 +42,7 @@ describe('MatPaginator', () => { it('should show third page of list of 200, each page contains 20 items', () => { const fixture = createComponent(MatPaginatorApp); const component = fixture.componentInstance; - const rangeElement = fixture.nativeElement.querySelector('.mat-paginator-range-label'); + const rangeElement = fixture.nativeElement.querySelector('.mat-mdc-paginator-range-label'); component.length = 200; component.pageSize = 20; component.pageIndex = 2; @@ -52,7 +53,7 @@ describe('MatPaginator', () => { it('should show first page of list of 0, each page contains 5 items', () => { const fixture = createComponent(MatPaginatorApp); const component = fixture.componentInstance; - const rangeElement = fixture.nativeElement.querySelector('.mat-paginator-range-label'); + const rangeElement = fixture.nativeElement.querySelector('.mat-mdc-paginator-range-label'); component.length = 0; component.pageSize = 5; component.pageIndex = 2; @@ -63,7 +64,7 @@ describe('MatPaginator', () => { it('should show third page of list of 12, each page contains 5 items', () => { const fixture = createComponent(MatPaginatorApp); const component = fixture.componentInstance; - const rangeElement = fixture.nativeElement.querySelector('.mat-paginator-range-label'); + const rangeElement = fixture.nativeElement.querySelector('.mat-mdc-paginator-range-label'); component.length = 12; component.pageSize = 5; component.pageIndex = 2; @@ -74,7 +75,7 @@ describe('MatPaginator', () => { it('should show third page of list of 10, each page contains 5 items', () => { const fixture = createComponent(MatPaginatorApp); const component = fixture.componentInstance; - const rangeElement = fixture.nativeElement.querySelector('.mat-paginator-range-label'); + const rangeElement = fixture.nativeElement.querySelector('.mat-mdc-paginator-range-label'); component.length = 10; component.pageSize = 5; component.pageIndex = 2; @@ -85,7 +86,7 @@ describe('MatPaginator', () => { it('should show third page of list of -5, each page contains 5 items', () => { const fixture = createComponent(MatPaginatorApp); const component = fixture.componentInstance; - const rangeElement = fixture.nativeElement.querySelector('.mat-paginator-range-label'); + const rangeElement = fixture.nativeElement.querySelector('.mat-mdc-paginator-range-label'); component.length = -5; component.pageSize = 5; component.pageIndex = 2; @@ -96,16 +97,21 @@ describe('MatPaginator', () => { it('should show right aria-labels for select and buttons', () => { const fixture = createComponent(MatPaginatorApp); - const select = fixture.nativeElement.querySelector('.mat-select'); - expect(select.getAttribute('aria-label')).toBe('Items per page:'); expect(getPreviousButton(fixture).getAttribute('aria-label')).toBe('Previous page'); expect(getNextButton(fixture).getAttribute('aria-label')).toBe('Next page'); + + const select = fixture.nativeElement.querySelector('.mat-mdc-select'); + const selectLabelIds = select.getAttribute('aria-labelledby')?.split(/\s/g) as string[]; + const selectLabelTexts = selectLabelIds?.map(labelId => { + return fixture.nativeElement.querySelector(`#${labelId}`)?.textContent?.trim(); + }); + expect(selectLabelTexts).toContain('Items per page:'); }); it('should re-render when the i18n labels change', () => { const fixture = createComponent(MatPaginatorApp); - const label = fixture.nativeElement.querySelector('.mat-paginator-page-size-label'); + const label = fixture.nativeElement.querySelector('.mat-mdc-paginator-page-size-label'); const intl = TestBed.inject(MatPaginatorIntl); intl.itemsPerPageLabel = '1337 items per page'; @@ -200,7 +206,7 @@ describe('MatPaginator', () => { it('should be able to set the color of the form field', () => { const fixture = createComponent(MatPaginatorApp); const component = fixture.componentInstance; - const formField: HTMLElement = fixture.nativeElement.querySelector('.mat-form-field'); + const formField: HTMLElement = fixture.nativeElement.querySelector('.mat-mdc-form-field'); component.color = 'accent'; fixture.detectChanges(); @@ -309,7 +315,7 @@ describe('MatPaginator', () => { const fixture = createComponent(MatPaginatorApp); const component = fixture.componentInstance; const paginator = component.paginator; - const rangeElement = fixture.nativeElement.querySelector('.mat-paginator-range-label'); + const rangeElement = fixture.nativeElement.querySelector('.mat-mdc-paginator-range-label'); expect(rangeElement.innerText.trim()).toBe('1 – 10 of 100'); @@ -326,11 +332,11 @@ describe('MatPaginator', () => { expect(rangeElement.innerText.trim()).toBe('7 – 12 of 99'); // Having one option and the same page size should remove the select menu - expect(fixture.nativeElement.querySelector('.mat-select')).not.toBeNull(); + expect(fixture.nativeElement.querySelector('.mat-mdc-select')).not.toBeNull(); paginator.pageSize = 10; paginator.pageSizeOptions = [10]; fixture.detectChanges(); - expect(fixture.nativeElement.querySelector('.mat-select')).toBeNull(); + expect(fixture.nativeElement.querySelector('.mat-mdc-select')).toBeNull(); }); it('should default the page size options to the page size if no options provided', () => { @@ -441,13 +447,13 @@ describe('MatPaginator', () => { const paginator = component.paginator; expect(paginator._displayedPageSizeOptions).toEqual([5, 10, 25, 100]); - expect(fixture.nativeElement.querySelector('.mat-select')).not.toBeNull(); + expect(fixture.nativeElement.querySelector('.mat-mdc-select')).not.toBeNull(); // Remove options so that the paginator only uses the current page size (10) as an option. // Should no longer show the select component since there is only one option. component.pageSizeOptions = []; fixture.detectChanges(); - expect(fixture.nativeElement.querySelector('.mat-select')).toBeNull(); + expect(fixture.nativeElement.querySelector('.mat-mdc-select')).toBeNull(); }); it('should handle the number inputs being passed in as strings', () => { @@ -465,14 +471,14 @@ describe('MatPaginator', () => { const fixture = createComponent(MatPaginatorApp); const element = fixture.nativeElement; - expect(element.querySelector('.mat-paginator-page-size')) + expect(element.querySelector('.mat-mdc-paginator-page-size')) .withContext('Expected select to be rendered.') .toBeTruthy(); fixture.componentInstance.hidePageSize = true; fixture.detectChanges(); - expect(element.querySelector('.mat-paginator-page-size')) + expect(element.querySelector('.mat-mdc-paginator-page-size')) .withContext('Expected select to be removed.') .toBeNull(); }); @@ -538,19 +544,19 @@ describe('MatPaginator', () => { }); function getPreviousButton(fixture: ComponentFixture) { - return fixture.nativeElement.querySelector('.mat-paginator-navigation-previous'); + return fixture.nativeElement.querySelector('.mat-mdc-paginator-navigation-previous'); } function getNextButton(fixture: ComponentFixture) { - return fixture.nativeElement.querySelector('.mat-paginator-navigation-next'); + return fixture.nativeElement.querySelector('.mat-mdc-paginator-navigation-next'); } function getFirstButton(fixture: ComponentFixture) { - return fixture.nativeElement.querySelector('.mat-paginator-navigation-first'); + return fixture.nativeElement.querySelector('.mat-mdc-paginator-navigation-first'); } function getLastButton(fixture: ComponentFixture) { - return fixture.nativeElement.querySelector('.mat-paginator-navigation-last'); + return fixture.nativeElement.querySelector('.mat-mdc-paginator-navigation-last'); } @Component({ diff --git a/src/material/paginator/paginator.ts b/src/material/paginator/paginator.ts index cbe8db04d35b..fdc2dfad90bf 100644 --- a/src/material/paginator/paginator.ts +++ b/src/material/paginator/paginator.ts @@ -6,41 +6,50 @@ * found in the LICENSE file at https://angular.io/license */ -import { - coerceNumberProperty, - coerceBooleanProperty, - BooleanInput, - NumberInput, -} from '@angular/cdk/coercion'; import { ChangeDetectionStrategy, ChangeDetectorRef, Component, + Directive, EventEmitter, + Inject, + InjectionToken, Input, OnDestroy, OnInit, + Optional, Output, ViewEncapsulation, - InjectionToken, - Inject, - Optional, - Directive, } from '@angular/core'; -import {Subscription} from 'rxjs'; -import {MatPaginatorIntl} from './paginator-intl'; +import {MatFormFieldAppearance} from '@angular/material/form-field'; import { + CanDisable, HasInitialized, + mixinDisabled, mixinInitialized, ThemePalette, - mixinDisabled, - CanDisable, } from '@angular/material/core'; -import {MatLegacyFormFieldAppearance} from '@angular/material/legacy-form-field'; +import {Subscription} from 'rxjs'; +import { + BooleanInput, + coerceBooleanProperty, + coerceNumberProperty, + NumberInput, +} from '@angular/cdk/coercion'; +import {MatPaginatorIntl} from './paginator-intl'; /** The default page size if there is no page size and there are no provided page size options. */ const DEFAULT_PAGE_SIZE = 50; +/** Object that can used to configure the underlying `MatSelect` inside a `MatPaginator`. */ +export interface MatPaginatorSelectConfig { + /** Whether to center the active option over the trigger. */ + disableOptionCentering?: boolean; + + /** Classes to be passed to the select panel. */ + panelClass?: string | string[] | Set | {[key: string]: any}; +} + /** * Change event object that is emitted when the user selects a * different page size or navigates to another page. @@ -62,6 +71,10 @@ export class PageEvent { length: number; } +// Note that while `MatPaginatorDefaultOptions` and `MAT_PAGINATOR_DEFAULT_OPTIONS` are identical +// between the MDC and non-MDC versions, we have to duplicate them, because the type of +// `formFieldAppearance` is narrower in the MDC version. + /** Object that can be used to configure the default options for the paginator module. */ export interface MatPaginatorDefaultOptions { /** Number of items to display on a page. By default set to 50. */ @@ -77,7 +90,7 @@ export interface MatPaginatorDefaultOptions { showFirstLastButtons?: boolean; /** The default form-field appearance to apply to the page size options selector. */ - formFieldAppearance?: MatLegacyFormFieldAppearance; + formFieldAppearance?: MatFormFieldAppearance; } /** Injection token that can be used to provide the default options for the paginator module. */ @@ -89,15 +102,6 @@ export const MAT_PAGINATOR_DEFAULT_OPTIONS = new InjectionToken | {[key: string]: any}; -} - /** * Base class with all of the `MatPaginator` functionality. * @docs-private @@ -364,6 +368,8 @@ export abstract class _MatPaginatorBase< } } +let nextUniqueId = 0; + /** * Component to provide navigation between paged information. Displays the size of the current * page, user-selectable options to change that size, what items are being shown, and @@ -376,7 +382,7 @@ export abstract class _MatPaginatorBase< styleUrls: ['paginator.css'], inputs: ['disabled'], host: { - 'class': 'mat-paginator', + 'class': 'mat-mdc-paginator', 'role': 'group', }, changeDetection: ChangeDetectionStrategy.OnPush, @@ -384,7 +390,10 @@ export abstract class _MatPaginatorBase< }) export class MatPaginator extends _MatPaginatorBase { /** If set, styles the "page size" form field with the designated style. */ - _formFieldAppearance?: MatLegacyFormFieldAppearance; + _formFieldAppearance?: MatFormFieldAppearance; + + /** ID for the DOM node containing the paginator's items per page label. */ + readonly _pageSizeLabelId = `mat-paginator-page-size-label-${nextUniqueId++}`; constructor( intl: MatPaginatorIntl, @@ -392,9 +401,6 @@ export class MatPaginator extends _MatPaginatorBase @Optional() @Inject(MAT_PAGINATOR_DEFAULT_OPTIONS) defaults?: MatPaginatorDefaultOptions, ) { super(intl, changeDetectorRef, defaults); - - if (defaults && defaults.formFieldAppearance != null) { - this._formFieldAppearance = defaults.formFieldAppearance; - } + this._formFieldAppearance = defaults?.formFieldAppearance || 'outline'; } } diff --git a/src/material/paginator/public-api.ts b/src/material/paginator/public-api.ts index 6de0c623f876..4ffa4d054fad 100644 --- a/src/material/paginator/public-api.ts +++ b/src/material/paginator/public-api.ts @@ -6,6 +6,6 @@ * found in the LICENSE file at https://angular.io/license */ -export * from './paginator-module'; +export * from './module'; export * from './paginator'; export * from './paginator-intl'; diff --git a/src/material/paginator/testing/BUILD.bazel b/src/material/paginator/testing/BUILD.bazel index 945497e85703..fd6e06d93552 100644 --- a/src/material/paginator/testing/BUILD.bazel +++ b/src/material/paginator/testing/BUILD.bazel @@ -11,13 +11,21 @@ ts_library( deps = [ "//src/cdk/coercion", "//src/cdk/testing", - "//src/material/legacy-select/testing", + "//src/material/select/testing", ], ) -filegroup( - name = "source-files", - srcs = glob(["**/*.ts"]), +ng_test_library( + name = "unit_tests_lib", + srcs = glob( + ["**/*.spec.ts"], + exclude = ["shared.spec.ts"], + ), + deps = [ + ":harness_tests_lib", + ":testing", + "//src/material/paginator", + ], ) ng_test_library( @@ -33,20 +41,14 @@ ng_test_library( ], ) -ng_test_library( - name = "unit_tests_lib", - srcs = glob( - ["**/*.spec.ts"], - exclude = ["shared.spec.ts"], - ), +ng_web_test_suite( + name = "unit_tests", deps = [ - ":harness_tests_lib", - ":testing", - "//src/material/paginator", + ":unit_tests_lib", ], ) -ng_web_test_suite( - name = "unit_tests", - deps = [":unit_tests_lib"], +filegroup( + name = "source-files", + srcs = glob(["**/*.ts"]), ) diff --git a/src/material/paginator/testing/paginator-harness.spec.ts b/src/material/paginator/testing/paginator-harness.spec.ts index f35004bd9896..3784eb1d0a2b 100644 --- a/src/material/paginator/testing/paginator-harness.spec.ts +++ b/src/material/paginator/testing/paginator-harness.spec.ts @@ -2,6 +2,6 @@ import {MatPaginatorModule} from '@angular/material/paginator'; import {runHarnessTests} from './shared.spec'; import {MatPaginatorHarness} from './paginator-harness'; -describe('Non-MDC-based MatPaginatorHarness', () => { - runHarnessTests(MatPaginatorModule, MatPaginatorHarness); +describe('MDC-based MatPaginatorHarness', () => { + runHarnessTests(MatPaginatorModule, MatPaginatorHarness as any); }); diff --git a/src/material/paginator/testing/paginator-harness.ts b/src/material/paginator/testing/paginator-harness.ts index b231dffa337e..ef9c22dd6f49 100644 --- a/src/material/paginator/testing/paginator-harness.ts +++ b/src/material/paginator/testing/paginator-harness.ts @@ -9,10 +9,11 @@ import { AsyncFactoryFn, ComponentHarness, + ComponentHarnessConstructor, HarnessPredicate, TestElement, } from '@angular/cdk/testing'; -import {MatLegacySelectHarness} from '@angular/material/legacy-select/testing'; +import {MatSelectHarness} from '@angular/material/select/testing'; import {coerceNumberProperty} from '@angular/cdk/coercion'; import {PaginatorHarnessFilters} from './paginator-harness-filters'; @@ -115,29 +116,31 @@ export abstract class _MatPaginatorHarnessBase extends ComponentHarness { } } -/** Harness for interacting with a standard mat-paginator in tests. */ +/** Harness for interacting with an MDC-based mat-paginator in tests. */ export class MatPaginatorHarness extends _MatPaginatorHarnessBase { /** Selector used to find paginator instances. */ - static hostSelector = '.mat-paginator'; - protected _nextButton = this.locatorFor('.mat-paginator-navigation-next'); - protected _previousButton = this.locatorFor('.mat-paginator-navigation-previous'); - protected _firstPageButton = this.locatorForOptional('.mat-paginator-navigation-first'); - protected _lastPageButton = this.locatorForOptional('.mat-paginator-navigation-last'); + static hostSelector = '.mat-mdc-paginator'; + protected _nextButton = this.locatorFor('.mat-mdc-paginator-navigation-next'); + protected _previousButton = this.locatorFor('.mat-mdc-paginator-navigation-previous'); + protected _firstPageButton = this.locatorForOptional('.mat-mdc-paginator-navigation-first'); + protected _lastPageButton = this.locatorForOptional('.mat-mdc-paginator-navigation-last'); protected _select = this.locatorForOptional( - MatLegacySelectHarness.with({ - ancestor: '.mat-paginator-page-size', + MatSelectHarness.with({ + ancestor: '.mat-mdc-paginator-page-size', }), ); - protected _pageSizeFallback = this.locatorFor('.mat-paginator-page-size-value'); - protected _rangeLabel = this.locatorFor('.mat-paginator-range-label'); + protected _pageSizeFallback = this.locatorFor('.mat-mdc-paginator-page-size-value'); + protected _rangeLabel = this.locatorFor('.mat-mdc-paginator-range-label'); /** - * Gets a `HarnessPredicate` that can be used to search for a `MatPaginatorHarness` that meets - * certain criteria. + * Gets a `HarnessPredicate` that can be used to search for a paginator with specific attributes. * @param options Options for filtering which paginator instances are considered a match. * @return a `HarnessPredicate` configured with the given options. */ - static with(options: PaginatorHarnessFilters = {}): HarnessPredicate { - return new HarnessPredicate(MatPaginatorHarness, options); + static with( + this: ComponentHarnessConstructor, + options: PaginatorHarnessFilters = {}, + ): HarnessPredicate { + return new HarnessPredicate(this, options); } } diff --git a/src/material/schematics/ng-generate/mdc-migration/rules/ts-migration/import-replacements.ts b/src/material/schematics/ng-generate/mdc-migration/rules/ts-migration/import-replacements.ts index a9b1cac399db..46f355565823 100644 --- a/src/material/schematics/ng-generate/mdc-migration/rules/ts-migration/import-replacements.ts +++ b/src/material/schematics/ng-generate/mdc-migration/rules/ts-migration/import-replacements.ts @@ -92,8 +92,8 @@ export const IMPORT_REPLACEMENTS: {[component: string]: {old: string; new: strin new: '@angular/material-experimental/mdc-tabs', }, 'paginator': { - old: '@angular/material/paginator', - new: '@angular/material-experimental/mdc-paginator', + old: '@angular/material/legacy-paginator', + new: '@angular/material/paginator', }, 'tooltip': { old: '@angular/material/tooltip', diff --git a/src/material/schematics/ng-generate/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__-datasource.ts.template b/src/material/schematics/ng-generate/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__-datasource.ts.template index 58999eadfe89..fe5c032ae4f0 100644 --- a/src/material/schematics/ng-generate/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__-datasource.ts.template +++ b/src/material/schematics/ng-generate/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__-datasource.ts.template @@ -1,5 +1,5 @@ import { DataSource } from '@angular/cdk/collections'; -import { MatPaginator } from '@angular/material/paginator'; +import { MatPaginator } from '@angular/material/legacy-paginator'; import { MatSort } from '@angular/material/sort'; import { map } from 'rxjs/operators'; import { Observable, of as observableOf, merge } from 'rxjs'; diff --git a/src/material/schematics/ng-generate/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template b/src/material/schematics/ng-generate/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template index 3f02d53415fb..7df477cfd877 100644 --- a/src/material/schematics/ng-generate/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template +++ b/src/material/schematics/ng-generate/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template @@ -1,6 +1,6 @@ import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -import { MatPaginatorModule } from '@angular/material/paginator'; +import { MatPaginatorModule } from '@angular/material/legacy-paginator'; import { MatSortModule } from '@angular/material/sort'; import { MatTableModule } from '@angular/material/table'; diff --git a/src/material/schematics/ng-generate/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template b/src/material/schematics/ng-generate/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template index 2e92f747b17b..d26c772dbd75 100644 --- a/src/material/schematics/ng-generate/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template +++ b/src/material/schematics/ng-generate/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template @@ -1,5 +1,5 @@ import { AfterViewInit, Component, ViewChild<% if(!!viewEncapsulation) { %>, ViewEncapsulation<% }%><% if(changeDetection !== 'Default') { %>, ChangeDetectionStrategy<% }%> } from '@angular/core'; -import { MatPaginator } from '@angular/material/paginator'; +import { MatPaginator } from '@angular/material/legacy-paginator'; import { MatSort } from '@angular/material/sort'; import { MatTable } from '@angular/material/table'; import { <%= classify(name) %>DataSource, <%= classify(name) %>Item } from './<%= dasherize(name) %>-datasource'; diff --git a/src/material/schematics/ng-generate/table/index.spec.ts b/src/material/schematics/ng-generate/table/index.spec.ts index 40d102c009a7..0a96de2334a7 100644 --- a/src/material/schematics/ng-generate/table/index.spec.ts +++ b/src/material/schematics/ng-generate/table/index.spec.ts @@ -58,7 +58,7 @@ describe('material-table-schematic', () => { expect(moduleContent).toContain(`import { MatTableModule } from '@angular/material/table';`); expect(moduleContent).toContain(`import { MatSortModule } from '@angular/material/sort';`); expect(moduleContent).toContain( - `import { MatPaginatorModule } from '@angular/material/paginator';`, + `import { MatPaginatorModule } from '@angular/material/legacy-paginator';`, ); }); diff --git a/src/material/schematics/ng-generate/table/index.ts b/src/material/schematics/ng-generate/table/index.ts index 0f3f5851557a..a6fef947bd70 100644 --- a/src/material/schematics/ng-generate/table/index.ts +++ b/src/material/schematics/ng-generate/table/index.ts @@ -40,7 +40,12 @@ function addTableModulesToModule(options: Schema) { return async (host: Tree) => { const modulePath = (await findModuleFromOptions(host, options))!; addModuleImportToModule(host, modulePath, 'MatTableModule', '@angular/material/table'); - addModuleImportToModule(host, modulePath, 'MatPaginatorModule', '@angular/material/paginator'); + addModuleImportToModule( + host, + modulePath, + 'MatPaginatorModule', + '@angular/material/legacy-paginator', + ); addModuleImportToModule(host, modulePath, 'MatSortModule', '@angular/material/sort'); }; } diff --git a/src/material/table/BUILD.bazel b/src/material/table/BUILD.bazel index 815bb75835a2..430a9fc45a5f 100644 --- a/src/material/table/BUILD.bazel +++ b/src/material/table/BUILD.bazel @@ -23,7 +23,7 @@ ng_module( "//src/cdk/coercion", "//src/cdk/table", "//src/material/core", - "//src/material/paginator", + "//src/material/legacy-paginator", "//src/material/sort", ] + glob(["**/*.html"]), ) @@ -61,7 +61,7 @@ ng_test_library( deps = [ ":table", "//src/cdk/collections", - "//src/material/paginator", + "//src/material/legacy-paginator", "//src/material/sort", "@npm//@angular/platform-browser", "@npm//rxjs", diff --git a/src/material/table/table-data-source.ts b/src/material/table/table-data-source.ts index c784c34576aa..5995b88f963a 100644 --- a/src/material/table/table-data-source.ts +++ b/src/material/table/table-data-source.ts @@ -8,7 +8,7 @@ import {_isNumberValue} from '@angular/cdk/coercion'; import {DataSource} from '@angular/cdk/table'; -import {MatPaginator} from '@angular/material/paginator'; +import {MatLegacyPaginator} from '@angular/material/legacy-paginator'; import {MatSort, Sort} from '@angular/material/sort'; import { BehaviorSubject, @@ -124,8 +124,8 @@ export class _MatTableDataSource< private _sort: MatSort | null; /** - * Instance of the MatPaginator component used by the table to control what page of the data is - * displayed. Page changes emitted by the MatPaginator will trigger an update to the + * Instance of the paginator component used by the table to control what page of the data is + * displayed. Page changes emitted by the paginator will trigger an update to the * table's rendered data. * * Note that the data source uses the paginator's properties to calculate which page of data @@ -267,7 +267,7 @@ export class _MatTableDataSource< * the provided base data and send it to the table for rendering. */ _updateChangeSubscription() { - // Sorting and/or pagination should be watched if MatSort and/or MatPaginator are provided. + // Sorting and/or pagination should be watched if sort and/or paginator are provided. // The events should emit whenever the component emits a change or initializes, or if no // component is provided, a stream with just a null event should be provided. // The `sortChange` and `pageChange` acts as a signal to the combineLatests below so that the @@ -337,7 +337,7 @@ export class _MatTableDataSource< } /** - * Returns a paged slice of the provided data array according to the provided MatPaginator's page + * Returns a paged slice of the provided data array according to the provided paginator's page * index and length. If there is no paginator provided, returns the data array as provided. */ _pageData(data: T[]): T[] { @@ -404,7 +404,7 @@ export class _MatTableDataSource< /** * Data source that accepts a client-side data array and includes native support of filtering, - * sorting (using MatSort), and pagination (using MatPaginator). + * sorting (using MatSort), and pagination (using paginator). * * Allows for sort customization by overriding sortingDataAccessor, which defines how data * properties are accessed. Also allows for filter customization by overriding filterTermAccessor, @@ -415,4 +415,4 @@ export class _MatTableDataSource< * interactions. If your app needs to support more advanced use cases, consider implementing your * own `DataSource`. */ -export class MatTableDataSource extends _MatTableDataSource {} +export class MatTableDataSource extends _MatTableDataSource {} diff --git a/src/material/table/table.md b/src/material/table/table.md index 778e32cb806f..eb231f84f436 100644 --- a/src/material/table/table.md +++ b/src/material/table/table.md @@ -167,7 +167,7 @@ Otherwise if you are implementing the logic to paginate your data, you will want paginator's `(page)` output and pass the right slice of data to your table. For more information on using and configuring the ``, check out the -[mat-paginator docs](https://material.angular.io/components/paginator/overview). +[mat-paginator docs](https://material.angular.io/components/legacy-paginator/overview). The `MatPaginator` is one provided solution to paginating your table's data, but it is not the only option. In fact, the table can work with any custom pagination UI or strategy since the `MatTable` diff --git a/src/material/table/table.spec.ts b/src/material/table/table.spec.ts index 74c0a56a74fa..c4981892e3de 100644 --- a/src/material/table/table.spec.ts +++ b/src/material/table/table.spec.ts @@ -10,7 +10,7 @@ import { } from '@angular/core/testing'; import {NoopAnimationsModule} from '@angular/platform-browser/animations'; import {BehaviorSubject, Observable} from 'rxjs'; -import {MatPaginator, MatPaginatorModule} from '../paginator/index'; +import {MatLegacyPaginator, MatLegacyPaginatorModule} from '../legacy-paginator/index'; import {MatSort, MatSortHeader, MatSortModule} from '../sort/index'; import {MatTableModule} from './index'; import {MatTable} from './table'; @@ -19,7 +19,7 @@ import {MatTableDataSource} from './table-data-source'; describe('MatTable', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - imports: [MatTableModule, MatPaginatorModule, MatSortModule, NoopAnimationsModule], + imports: [MatTableModule, MatLegacyPaginatorModule, MatSortModule, NoopAnimationsModule], declarations: [ MatTableApp, MatTableWithWhenRowApp, @@ -863,7 +863,7 @@ class ArrayDataSourceMatTableApp implements AfterViewInit { columnsToRender = ['column_a', 'column_b', 'column_c']; @ViewChild(MatTable) table: MatTable; - @ViewChild(MatPaginator) paginator: MatPaginator; + @ViewChild(MatLegacyPaginator) paginator: MatLegacyPaginator; @ViewChild(MatSort) sort: MatSort; @ViewChild(MatSortHeader) sortHeader: MatSortHeader; @@ -966,7 +966,7 @@ class MatTableWithPaginatorApp implements OnInit { columnsToRender = ['column_a', 'column_b', 'column_c']; @ViewChild(MatTable) table: MatTable; - @ViewChild(MatPaginator) paginator: MatPaginator; + @ViewChild(MatLegacyPaginator) paginator: MatLegacyPaginator; constructor() { this.underlyingDataSource.data = []; diff --git a/src/universal-app/kitchen-sink-mdc/kitchen-sink-mdc.ts b/src/universal-app/kitchen-sink-mdc/kitchen-sink-mdc.ts index 9fa16adc01a0..f57591ee87d7 100644 --- a/src/universal-app/kitchen-sink-mdc/kitchen-sink-mdc.ts +++ b/src/universal-app/kitchen-sink-mdc/kitchen-sink-mdc.ts @@ -19,7 +19,7 @@ import {MatIconModule} from '@angular/material/icon'; import {MatSnackBarModule, MatSnackBar} from '@angular/material-experimental/mdc-snack-bar'; import {MatProgressSpinnerModule} from '@angular/material-experimental/mdc-progress-spinner'; import {MatSelectModule} from '@angular/material/select'; -import {MatPaginatorModule} from '@angular/material-experimental/mdc-paginator'; +import {MatPaginatorModule} from '@angular/material/paginator'; @Component({ template: ``, diff --git a/src/universal-app/kitchen-sink/kitchen-sink.ts b/src/universal-app/kitchen-sink/kitchen-sink.ts index 7e5a6f3ed0cd..d1f57dd2b731 100644 --- a/src/universal-app/kitchen-sink/kitchen-sink.ts +++ b/src/universal-app/kitchen-sink/kitchen-sink.ts @@ -19,7 +19,7 @@ import {MatIconModule} from '@angular/material/icon'; import {MatLegacyInputModule} from '@angular/material/legacy-input'; import {MatLegacyListModule} from '@angular/material/legacy-list'; import {MatLegacyMenuModule} from '@angular/material/legacy-menu'; -import {MatPaginatorModule} from '@angular/material/paginator'; +import {MatLegacyPaginatorModule} from '@angular/material/legacy-paginator'; import {MatLegacyProgressBarModule} from '@angular/material/legacy-progress-bar'; import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'; import {MatLegacyRadioModule} from '@angular/material/legacy-radio'; @@ -116,7 +116,7 @@ export class KitchenSink { MatLegacyListModule, MatLegacyMenuModule, MatNativeDateModule, - MatPaginatorModule, + MatLegacyPaginatorModule, MatLegacyProgressBarModule, MatProgressSpinnerModule, MatLegacyRadioModule, diff --git a/tools/public_api_guard/material/legacy-paginator-testing.md b/tools/public_api_guard/material/legacy-paginator-testing.md new file mode 100644 index 000000000000..a468aa68b828 --- /dev/null +++ b/tools/public_api_guard/material/legacy-paginator-testing.md @@ -0,0 +1,40 @@ +## API Report File for "components-srcs" + +> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). + +```ts + +import { AsyncFactoryFn } from '@angular/cdk/testing'; +import { HarnessPredicate } from '@angular/cdk/testing'; +import { MatLegacySelectHarness } from '@angular/material/legacy-select/testing'; +import { _MatPaginatorHarnessBase } from '@angular/material/paginator/testing'; +import { PaginatorHarnessFilters } from '@angular/material/paginator/testing'; +import { TestElement } from '@angular/cdk/testing'; + +// @public +export class MatLegacyPaginatorHarness extends _MatPaginatorHarnessBase { + // (undocumented) + protected _firstPageButton: AsyncFactoryFn; + static hostSelector: string; + // (undocumented) + protected _lastPageButton: AsyncFactoryFn; + // (undocumented) + protected _nextButton: AsyncFactoryFn; + // (undocumented) + protected _pageSizeFallback: AsyncFactoryFn; + // (undocumented) + protected _previousButton: AsyncFactoryFn; + // (undocumented) + protected _rangeLabel: AsyncFactoryFn; + // (undocumented) + protected _select: AsyncFactoryFn; + static with(options?: PaginatorHarnessFilters): HarnessPredicate; +} + +export { _MatPaginatorHarnessBase } + +export { PaginatorHarnessFilters } + +// (No @packageDocumentation comment for this package) + +``` diff --git a/tools/public_api_guard/material/legacy-paginator.md b/tools/public_api_guard/material/legacy-paginator.md new file mode 100644 index 000000000000..4a68d09fee82 --- /dev/null +++ b/tools/public_api_guard/material/legacy-paginator.md @@ -0,0 +1,69 @@ +## API Report File for "components-srcs" + +> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). + +```ts + +import { ChangeDetectorRef } from '@angular/core'; +import * as i0 from '@angular/core'; +import * as i2 from '@angular/common'; +import * as i3 from '@angular/material/legacy-button'; +import * as i4 from '@angular/material/legacy-select'; +import * as i5 from '@angular/material/legacy-tooltip'; +import * as i6 from '@angular/material/core'; +import { InjectionToken } from '@angular/core'; +import { MAT_PAGINATOR_INTL_PROVIDER } from '@angular/material/paginator'; +import { MAT_PAGINATOR_INTL_PROVIDER_FACTORY } from '@angular/material/paginator'; +import { MatLegacyFormFieldAppearance } from '@angular/material/legacy-form-field'; +import { _MatPaginatorBase } from '@angular/material/paginator'; +import { MatPaginatorIntl } from '@angular/material/paginator'; +import { MatPaginatorSelectConfig } from '@angular/material/paginator'; +import { PageEvent } from '@angular/material/paginator'; + +// @public +export const MAT_PAGINATOR_DEFAULT_OPTIONS: InjectionToken; + +export { MAT_PAGINATOR_INTL_PROVIDER } + +export { MAT_PAGINATOR_INTL_PROVIDER_FACTORY } + +// @public +export class MatLegacyPaginator extends _MatPaginatorBase { + constructor(intl: MatPaginatorIntl, changeDetectorRef: ChangeDetectorRef, defaults?: MatPaginatorDefaultOptions); + _formFieldAppearance?: MatLegacyFormFieldAppearance; + // (undocumented) + static ɵcmp: i0.ɵɵComponentDeclaration; + // (undocumented) + static ɵfac: i0.ɵɵFactoryDeclaration; +} + +// @public (undocumented) +export class MatLegacyPaginatorModule { + // (undocumented) + static ɵfac: i0.ɵɵFactoryDeclaration; + // (undocumented) + static ɵinj: i0.ɵɵInjectorDeclaration; + // (undocumented) + static ɵmod: i0.ɵɵNgModuleDeclaration; +} + +export { _MatPaginatorBase } + +// @public +export interface MatPaginatorDefaultOptions { + formFieldAppearance?: MatLegacyFormFieldAppearance; + hidePageSize?: boolean; + pageSize?: number; + pageSizeOptions?: number[]; + showFirstLastButtons?: boolean; +} + +export { MatPaginatorIntl } + +export { MatPaginatorSelectConfig } + +export { PageEvent } + +// (No @packageDocumentation comment for this package) + +``` diff --git a/tools/public_api_guard/material/paginator-testing.md b/tools/public_api_guard/material/paginator-testing.md index 739909e68a4d..3269ddffd70e 100644 --- a/tools/public_api_guard/material/paginator-testing.md +++ b/tools/public_api_guard/material/paginator-testing.md @@ -7,8 +7,9 @@ import { AsyncFactoryFn } from '@angular/cdk/testing'; import { BaseHarnessFilters } from '@angular/cdk/testing'; import { ComponentHarness } from '@angular/cdk/testing'; +import { ComponentHarnessConstructor } from '@angular/cdk/testing'; import { HarnessPredicate } from '@angular/cdk/testing'; -import { MatLegacySelectHarness } from '@angular/material/legacy-select/testing'; +import { MatSelectHarness } from '@angular/material/select/testing'; import { TestElement } from '@angular/cdk/testing'; // @public @@ -27,8 +28,8 @@ export class MatPaginatorHarness extends _MatPaginatorHarnessBase { // (undocumented) protected _rangeLabel: AsyncFactoryFn; // (undocumented) - protected _select: AsyncFactoryFn; - static with(options?: PaginatorHarnessFilters): HarnessPredicate; + protected _select: AsyncFactoryFn; + static with(this: ComponentHarnessConstructor, options?: PaginatorHarnessFilters): HarnessPredicate; } // @public (undocumented) diff --git a/tools/public_api_guard/material/paginator.md b/tools/public_api_guard/material/paginator.md index 35bf26908980..1b573990268b 100644 --- a/tools/public_api_guard/material/paginator.md +++ b/tools/public_api_guard/material/paginator.md @@ -13,12 +13,11 @@ import { EventEmitter } from '@angular/core'; import { HasInitialized } from '@angular/material/core'; import * as i0 from '@angular/core'; import * as i2 from '@angular/common'; -import * as i3 from '@angular/material/legacy-button'; -import * as i4 from '@angular/material/legacy-select'; -import * as i5 from '@angular/material/legacy-tooltip'; -import * as i6 from '@angular/material/core'; +import * as i3 from '@angular/material/button'; +import * as i4 from '@angular/material/select'; +import * as i5 from '@angular/material/tooltip'; import { InjectionToken } from '@angular/core'; -import { MatLegacyFormFieldAppearance } from '@angular/material/legacy-form-field'; +import { MatFormFieldAppearance } from '@angular/material/form-field'; import { NumberInput } from '@angular/cdk/coercion'; import { OnDestroy } from '@angular/core'; import { OnInit } from '@angular/core'; @@ -42,7 +41,8 @@ export function MAT_PAGINATOR_INTL_PROVIDER_FACTORY(parentIntl: MatPaginatorIntl // @public export class MatPaginator extends _MatPaginatorBase { constructor(intl: MatPaginatorIntl, changeDetectorRef: ChangeDetectorRef, defaults?: MatPaginatorDefaultOptions); - _formFieldAppearance?: MatLegacyFormFieldAppearance; + _formFieldAppearance?: MatFormFieldAppearance; + readonly _pageSizeLabelId: string; // (undocumented) static ɵcmp: i0.ɵɵComponentDeclaration; // (undocumented) @@ -97,7 +97,7 @@ export abstract class _MatPaginatorBase; // (undocumented) - static ɵmod: i0.ɵɵNgModuleDeclaration; + static ɵmod: i0.ɵɵNgModuleDeclaration; } // @public diff --git a/tools/public_api_guard/material/table.md b/tools/public_api_guard/material/table.md index d7a64d3d2412..e144a5d57932 100644 --- a/tools/public_api_guard/material/table.md +++ b/tools/public_api_guard/material/table.md @@ -25,7 +25,7 @@ import { DataSource } from '@angular/cdk/table'; import * as i0 from '@angular/core'; import * as i5 from '@angular/cdk/table'; import * as i6 from '@angular/material/core'; -import { MatPaginator } from '@angular/material/paginator'; +import { MatLegacyPaginator } from '@angular/material/legacy-paginator'; import { MatSort } from '@angular/material/sort'; import { Observable } from 'rxjs'; import { Subject } from 'rxjs'; @@ -167,7 +167,7 @@ export class MatTable extends CdkTable { } // @public -export class MatTableDataSource extends _MatTableDataSource { +export class MatTableDataSource extends _MatTableDataSource { } // @public