Skip to content

Commit f7385ff

Browse files
andrewseguinandrewseguin
authored
feat(material/paginator): migrate MDC examples (#25497)
* feat(material/paginator): migrate MDC examples * feat(material/paginator): migrate MDC examples
1 parent 983f664 commit f7385ff

32 files changed

+475
-155
lines changed

‎.github/CODEOWNERS

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -196,7 +196,7 @@
196196
/src/dev-app/mdc-input/** @devversion @mmalerba
197197
/src/dev-app/mdc-list/** @mmalerba
198198
/src/dev-app/mdc-menu/** @crisbeto
199-
/src/dev-app/mdc-paginator/** @crisbeto
199+
/src/dev-app/legacy-paginator/** @crisbeto
200200
/src/dev-app/mdc-progress-bar/** @crisbeto
201201
/src/dev-app/mdc-progress-spinner/** @mmalerba
202202
/src/dev-app/mdc-radio/** @mmalerba

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

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite")
2+
3+
package(default_visibility = ["//visibility:public"])
4+
5+
ng_module(
6+
name = "legacy-paginator",
7+
srcs = glob(
8+
["**/*.ts"],
9+
exclude = ["**/*.spec.ts"],
10+
),
11+
assets = glob([
12+
"**/*.html",
13+
"**/*.css",
14+
]),
15+
deps = [
16+
"//src/cdk/testing",
17+
"//src/cdk/testing/testbed",
18+
"//src/components-examples/private:localize_types",
19+
"//src/material/legacy-input",
20+
"//src/material/legacy-paginator",
21+
"//src/material/legacy-paginator/testing",
22+
"@npm//@angular/forms",
23+
"@npm//@angular/platform-browser",
24+
"@npm//@angular/platform-browser-dynamic",
25+
"@npm//@types/jasmine",
26+
],
27+
)
28+
29+
filegroup(
30+
name = "source-files",
31+
srcs = glob([
32+
"**/*.html",
33+
"**/*.css",
34+
"**/*.ts",
35+
]),
36+
)
37+
38+
ng_test_library(
39+
name = "unit_tests_lib",
40+
srcs = glob(["**/*.spec.ts"]),
41+
deps = [
42+
":legacy-paginator",
43+
"//src/cdk/testing",
44+
"//src/cdk/testing/testbed",
45+
"//src/material/legacy-paginator",
46+
"//src/material/legacy-paginator/testing",
47+
"@npm//@angular/platform-browser",
48+
"@npm//@angular/platform-browser-dynamic",
49+
],
50+
)
51+
52+
ng_web_test_suite(
53+
name = "unit_tests",
54+
deps = [":unit_tests_lib"],
55+
)

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

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import {CommonModule} from '@angular/common';
2+
import {NgModule} from '@angular/core';
3+
import {FormsModule} from '@angular/forms';
4+
import {MatLegacyInputModule} from '@angular/material/legacy-input';
5+
import {MatLegacyPaginatorModule} from '@angular/material/legacy-paginator';
6+
import {PaginatorConfigurableExample} from './paginator-configurable/paginator-configurable-example';
7+
import {PaginatorOverviewExample} from './paginator-overview/paginator-overview-example';
8+
import {PaginatorHarnessExample} from './paginator-harness/paginator-harness-example';
9+
import {
10+
PaginatorIntlExample,
11+
PaginatorIntlExampleModule,
12+
} from './paginator-intl/paginator-intl-example';
13+
14+
export {
15+
PaginatorConfigurableExample,
16+
PaginatorHarnessExample,
17+
PaginatorIntlExample,
18+
PaginatorOverviewExample,
19+
};
20+
21+
const EXAMPLES = [
22+
PaginatorConfigurableExample,
23+
PaginatorHarnessExample,
24+
// PaginatorIntlExample is imported through it's own example module.
25+
PaginatorOverviewExample,
26+
];
27+
28+
@NgModule({
29+
imports: [
30+
CommonModule,
31+
MatLegacyInputModule,
32+
MatLegacyPaginatorModule,
33+
PaginatorIntlExampleModule,
34+
FormsModule,
35+
],
36+
declarations: EXAMPLES,
37+
exports: EXAMPLES,
38+
})
39+
export class PaginatorExamplesModule {}

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.mat-form-field {
2+
margin-right: 12px;
3+
}

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<mat-form-field appearance="fill">
2+
<mat-label>List length</mat-label>
3+
<input matInput [(ngModel)]="length" type="number">
4+
</mat-form-field>
5+
6+
<mat-form-field appearance="fill">
7+
<mat-label>Page size</mat-label>
8+
<input matInput [(ngModel)]="pageSize" type="number">
9+
</mat-form-field>
10+
<mat-form-field appearance="fill">
11+
<mat-label>Page size options</mat-label>
12+
<input matInput [ngModel]="pageSizeOptions" (ngModelChange)="setPageSizeOptions($event)"
13+
[ngModelOptions]="{updateOn: 'blur'}" placeholder="Ex. 10,25,50">
14+
</mat-form-field>
15+
16+
<mat-paginator [length]="length"
17+
[pageSize]="pageSize"
18+
[pageSizeOptions]="pageSizeOptions"
19+
(page)="pageEvent = $event"
20+
aria-label="Select page">
21+
</mat-paginator>
22+
23+
<div *ngIf="pageEvent">
24+
<h5>Page Change Event Properties</h5>
25+
<div>List length: {{pageEvent.length}}</div>
26+
<div>Page size: {{pageEvent.pageSize}}</div>
27+
<div>Page index: {{pageEvent.pageIndex}}</div>
28+
</div>

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import {Component} from '@angular/core';
2+
import {PageEvent} from '@angular/material/legacy-paginator';
3+
4+
/**
5+
* @title Configurable paginator
6+
*/
7+
@Component({
8+
selector: 'paginator-configurable-example',
9+
templateUrl: 'paginator-configurable-example.html',
10+
styleUrls: ['paginator-configurable-example.css'],
11+
})
12+
export class PaginatorConfigurableExample {
13+
// MatPaginator Inputs
14+
length = 100;
15+
pageSize = 10;
16+
pageSizeOptions: number[] = [5, 10, 25, 100];
17+
18+
// MatPaginator Output
19+
pageEvent: PageEvent;
20+
21+
setPageSizeOptions(setPageSizeOptionsInput: string) {
22+
if (setPageSizeOptionsInput) {
23+
this.pageSizeOptions = setPageSizeOptionsInput.split(',').map(str => +str);
24+
}
25+
}
26+
}

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<mat-paginator
2+
(page)="handlePageEvent($event)"
3+
[length]="length"
4+
[pageSize]="pageSize"
5+
[showFirstLastButtons]="showFirstLastButtons"
6+
[pageSizeOptions]="pageSizeOptions"
7+
[pageIndex]="pageIndex"
8+
aria-label="Select page">
9+
</mat-paginator>

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

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import {ComponentFixture, TestBed} from '@angular/core/testing';
2+
import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
3+
import {MatLegacyPaginatorHarness} from '@angular/material/legacy-paginator/testing';
4+
import {HarnessLoader} from '@angular/cdk/testing';
5+
import {MatLegacyPaginatorModule} from '@angular/material/legacy-paginator';
6+
import {PaginatorHarnessExample} from './paginator-harness-example';
7+
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
8+
9+
describe('PaginatorHarnessExample', () => {
10+
let fixture: ComponentFixture<PaginatorHarnessExample>;
11+
let loader: HarnessLoader;
12+
let instance: PaginatorHarnessExample;
13+
14+
beforeEach(async () => {
15+
await TestBed.configureTestingModule({
16+
imports: [MatLegacyPaginatorModule, NoopAnimationsModule],
17+
declarations: [PaginatorHarnessExample],
18+
}).compileComponents();
19+
fixture = TestBed.createComponent(PaginatorHarnessExample);
20+
fixture.detectChanges();
21+
loader = TestbedHarnessEnvironment.loader(fixture);
22+
instance = fixture.componentInstance;
23+
});
24+
25+
it('should load all paginator harnesses', async () => {
26+
const paginators = await loader.getAllHarnesses(MatLegacyPaginatorHarness);
27+
expect(paginators.length).toBe(1);
28+
});
29+
30+
it('should be able to navigate between pages', async () => {
31+
const paginator = await loader.getHarness(MatLegacyPaginatorHarness);
32+
33+
expect(instance.pageIndex).toBe(0);
34+
await paginator.goToNextPage();
35+
expect(instance.pageIndex).toBe(1);
36+
await paginator.goToPreviousPage();
37+
expect(instance.pageIndex).toBe(0);
38+
});
39+
40+
it('should be able to go to the last page', async () => {
41+
const paginator = await loader.getHarness(MatLegacyPaginatorHarness);
42+
43+
expect(instance.pageIndex).toBe(0);
44+
await paginator.goToLastPage();
45+
expect(instance.pageIndex).toBe(49);
46+
});
47+
48+
it('should be able to set the page size', async () => {
49+
const paginator = await loader.getHarness(MatLegacyPaginatorHarness);
50+
51+
expect(instance.pageSize).toBe(10);
52+
await paginator.setPageSize(25);
53+
expect(instance.pageSize).toBe(25);
54+
});
55+
});

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import {Component} from '@angular/core';
2+
import {PageEvent} from '@angular/material/legacy-paginator';
3+
4+
/**
5+
* @title Testing with MatPaginatorHarness
6+
*/
7+
@Component({
8+
selector: 'paginator-harness-example',
9+
templateUrl: 'paginator-harness-example.html',
10+
})
11+
export class PaginatorHarnessExample {
12+
length = 500;
13+
pageSize = 10;
14+
pageIndex = 0;
15+
pageSizeOptions = [5, 10, 25];
16+
showFirstLastButtons = true;
17+
18+
handlePageEvent(event: PageEvent) {
19+
this.length = event.length;
20+
this.pageSize = event.pageSize;
21+
this.pageIndex = event.pageIndex;
22+
}
23+
}

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
<mat-paginator [length]="200" [pageSizeOptions]="[10, 50, 100]" aria-label="Select page">
2+
</mat-paginator>

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

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import {Component, Injectable, NgModule} from '@angular/core';
2+
import {MatPaginatorIntl, MatLegacyPaginatorModule} from '@angular/material/legacy-paginator';
3+
import {Subject} from 'rxjs';
4+
5+
@Injectable()
6+
export class MyCustomPaginatorIntl implements MatPaginatorIntl {
7+
changes = new Subject<void>();
8+
9+
// For internationalization, the `$localize` function from
10+
// the `@angular/localize` package can be used.
11+
firstPageLabel = $localize`First page`;
12+
itemsPerPageLabel = $localize`Items per page:`;
13+
lastPageLabel = $localize`Last page`;
14+
15+
// You can set labels to an arbitrary string too, or dynamically compute
16+
// it through other third-party internationalization libraries.
17+
nextPageLabel = 'Next page';
18+
previousPageLabel = 'Previous page';
19+
20+
getRangeLabel(page: number, pageSize: number, length: number): string {
21+
if (length === 0) {
22+
return $localize`Page 1 of 1`;
23+
}
24+
const amountPages = Math.ceil(length / pageSize);
25+
return $localize`Page ${page + 1} of ${amountPages}`;
26+
}
27+
}
28+
29+
/**
30+
* @title Paginator internationalization
31+
*/
32+
@Component({
33+
selector: 'paginator-intl-example',
34+
templateUrl: 'paginator-intl-example.html',
35+
})
36+
export class PaginatorIntlExample {}
37+
38+
@NgModule({
39+
imports: [MatLegacyPaginatorModule],
40+
declarations: [PaginatorIntlExample],
41+
providers: [{provide: MatPaginatorIntl, useClass: MyCustomPaginatorIntl}],
42+
})
43+
export class PaginatorIntlExampleModule {}

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<mat-paginator [length]="100"
2+
[pageSize]="10"
3+
[pageSizeOptions]="[5, 10, 25, 100]"
4+
aria-label="Select page">
5+
</mat-paginator>

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import {Component} from '@angular/core';
2+
3+
/**
4+
* @title Paginator
5+
*/
6+
@Component({
7+
selector: 'paginator-overview-example',
8+
templateUrl: 'paginator-overview-example.html',
9+
})
10+
export class PaginatorOverviewExample {}

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

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,12 @@ ng_module(
1616
"//src/cdk/testing",
1717
"//src/cdk/testing/testbed",
1818
"//src/components-examples/private:localize_types",
19-
"//src/material/legacy-input",
20-
"//src/material/legacy-paginator",
21-
"//src/material/legacy-paginator/testing",
19+
"//src/material/card",
20+
"//src/material/form-field",
21+
"//src/material/input",
22+
"//src/material/paginator",
23+
"//src/material/paginator/testing",
24+
"//src/material/slide-toggle",
2225
"@npm//@angular/forms",
2326
"@npm//@angular/platform-browser",
2427
"@npm//@angular/platform-browser-dynamic",
@@ -42,8 +45,8 @@ ng_test_library(
4245
":paginator",
4346
"//src/cdk/testing",
4447
"//src/cdk/testing/testbed",
45-
"//src/material/legacy-paginator",
46-
"//src/material/legacy-paginator/testing",
48+
"//src/material/paginator",
49+
"//src/material/paginator/testing",
4750
"@npm//@angular/platform-browser",
4851
"@npm//@angular/platform-browser-dynamic",
4952
],

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

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,18 @@
11
import {CommonModule} from '@angular/common';
22
import {NgModule} from '@angular/core';
33
import {FormsModule} from '@angular/forms';
4-
import {MatLegacyInputModule} from '@angular/material/legacy-input';
5-
import {MatLegacyPaginatorModule} from '@angular/material/legacy-paginator';
4+
import {MatInputModule} from '@angular/material/input';
5+
import {MatPaginatorModule} from '@angular/material/paginator';
66
import {PaginatorConfigurableExample} from './paginator-configurable/paginator-configurable-example';
77
import {PaginatorOverviewExample} from './paginator-overview/paginator-overview-example';
88
import {PaginatorHarnessExample} from './paginator-harness/paginator-harness-example';
99
import {
1010
PaginatorIntlExample,
1111
PaginatorIntlExampleModule,
1212
} from './paginator-intl/paginator-intl-example';
13+
import {MatCardModule} from '@angular/material/card';
14+
import {MatFormFieldModule} from '@angular/material/form-field';
15+
import {MatSlideToggleModule} from '@angular/material/slide-toggle';
1316

1417
export {
1518
PaginatorConfigurableExample,
@@ -28,8 +31,12 @@ const EXAMPLES = [
2831
@NgModule({
2932
imports: [
3033
CommonModule,
31-
MatLegacyInputModule,
32-
MatLegacyPaginatorModule,
34+
MatInputModule,
35+
MatPaginatorModule,
36+
MatCardModule,
37+
MatFormFieldModule,
38+
MatInputModule,
39+
MatSlideToggleModule,
3340
PaginatorIntlExampleModule,
3441
FormsModule,
3542
],

0 commit comments

Comments
 (0)