diff --git a/src/material-experimental/mdc-paginator/paginator.html b/src/material-experimental/mdc-paginator/paginator.html index 813264e16b38..ac36538c5b5c 100644 --- a/src/material-experimental/mdc-paginator/paginator.html +++ b/src/material-experimental/mdc-paginator/paginator.html @@ -14,6 +14,8 @@ [value]="pageSize" [disabled]="disabled" [aria-labelledby]="_pageSizeLabelId" + [panelClass]="selectConfig.panelClass || ''" + [disableOptionCentering]="selectConfig.disableOptionCentering" (selectionChange)="_changePageSize($event.value)"> {{pageSizeOption}} diff --git a/src/material-experimental/mdc-paginator/paginator.spec.ts b/src/material-experimental/mdc-paginator/paginator.spec.ts index 1b584000606a..af9a86dfebf3 100644 --- a/src/material-experimental/mdc-paginator/paginator.spec.ts +++ b/src/material-experimental/mdc-paginator/paginator.spec.ts @@ -5,7 +5,12 @@ import {dispatchMouseEvent} from '../../cdk/testing/private'; import {ThemePalette} from '@angular/material/core'; import {MatSelect} from '@angular/material-experimental/mdc-select'; import {By} from '@angular/platform-browser'; -import {MatPaginatorModule, MatPaginator, MatPaginatorIntl} from './index'; +import { + MatPaginatorModule, + MatPaginator, + MatPaginatorIntl, + MatPaginatorSelectConfig, +} from './index'; import {MAT_PAGINATOR_DEFAULT_OPTIONS, MatPaginatorDefaultOptions} from './paginator'; describe('MDC-based MatPaginator', () => { @@ -215,6 +220,24 @@ describe('MDC-based MatPaginator', () => { expect(formField.classList).not.toContain('mat-accent'); }); + it('should be able to pass options to the underlying mat-select', () => { + const fixture = createComponent(MatPaginatorApp); + fixture.detectChanges(); + const select: MatSelect = fixture.debugElement.query(By.directive(MatSelect)).componentInstance; + + expect(select.disableOptionCentering).toBe(false); + expect(select.panelClass).toBeFalsy(); + + fixture.componentInstance.selectConfig = { + disableOptionCentering: true, + panelClass: 'custom-class', + }; + fixture.detectChanges(); + + expect(select.disableOptionCentering).toBe(true); + expect(select.panelClass).toBe('custom-class'); + }); + describe('when showing the first and last button', () => { let fixture: ComponentFixture; let component: MatPaginatorApp; @@ -542,6 +565,7 @@ function getLastButton(fixture: ComponentFixture) { [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [hidePageSize]="hidePageSize" + [selectConfig]="selectConfig" [showFirstLastButtons]="showFirstLastButtons" [length]="length" [color]="color" @@ -560,6 +584,7 @@ class MatPaginatorApp { disabled: boolean; pageEvent = jasmine.createSpy('page event'); color: ThemePalette; + selectConfig: MatPaginatorSelectConfig = {}; @ViewChild(MatPaginator) paginator: MatPaginator; diff --git a/src/material-experimental/mdc-paginator/public-api.ts b/src/material-experimental/mdc-paginator/public-api.ts index 3cf00b2294e9..e50693b58861 100644 --- a/src/material-experimental/mdc-paginator/public-api.ts +++ b/src/material-experimental/mdc-paginator/public-api.ts @@ -13,4 +13,5 @@ export { MAT_PAGINATOR_INTL_PROVIDER_FACTORY, MAT_PAGINATOR_INTL_PROVIDER, PageEvent, + MatPaginatorSelectConfig, } from '@angular/material/paginator'; diff --git a/src/material/paginator/paginator.html b/src/material/paginator/paginator.html index cb5f42ed0275..4fb3184d6cd5 100644 --- a/src/material/paginator/paginator.html +++ b/src/material/paginator/paginator.html @@ -13,6 +13,8 @@ diff --git a/src/material/paginator/paginator.md b/src/material/paginator/paginator.md index e824c26d1679..ab40df1494e1 100644 --- a/src/material/paginator/paginator.md +++ b/src/material/paginator/paginator.md @@ -16,7 +16,11 @@ any associated data view. 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. +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`. @@ -30,5 +34,5 @@ The paginator uses `role="group"` to semantically group its child controls. You `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 +You can set the `aria-label` attributes for the button and select controls within the paginator in `MatPaginatorIntl`. diff --git a/src/material/paginator/paginator.spec.ts b/src/material/paginator/paginator.spec.ts index 540c38187cd7..eb6a0a5768bf 100644 --- a/src/material/paginator/paginator.spec.ts +++ b/src/material/paginator/paginator.spec.ts @@ -6,7 +6,11 @@ import {ThemePalette} from '@angular/material/core'; import {MatSelect} from '@angular/material/select'; import {By} from '@angular/platform-browser'; import {MatPaginator, MatPaginatorIntl, MatPaginatorModule} from './index'; -import {MAT_PAGINATOR_DEFAULT_OPTIONS, MatPaginatorDefaultOptions} from './paginator'; +import { + MAT_PAGINATOR_DEFAULT_OPTIONS, + MatPaginatorDefaultOptions, + MatPaginatorSelectConfig, +} from './paginator'; describe('MatPaginator', () => { function createComponent(type: Type, providers: Provider[] = []): ComponentFixture { @@ -210,6 +214,24 @@ describe('MatPaginator', () => { expect(formField.classList).not.toContain('mat-accent'); }); + it('should be able to pass options to the underlying mat-select', () => { + const fixture = createComponent(MatPaginatorApp); + fixture.detectChanges(); + const select: MatSelect = fixture.debugElement.query(By.directive(MatSelect)).componentInstance; + + expect(select.disableOptionCentering).toBe(false); + expect(select.panelClass).toBeFalsy(); + + fixture.componentInstance.selectConfig = { + disableOptionCentering: true, + panelClass: 'custom-class', + }; + fixture.detectChanges(); + + expect(select.disableOptionCentering).toBe(true); + expect(select.panelClass).toBe('custom-class'); + }); + describe('when showing the first and last button', () => { let fixture: ComponentFixture; let component: MatPaginatorApp; @@ -537,6 +559,7 @@ function getLastButton(fixture: ComponentFixture) { [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [hidePageSize]="hidePageSize" + [selectConfig]="selectConfig" [showFirstLastButtons]="showFirstLastButtons" [length]="length" [color]="color" @@ -555,6 +578,7 @@ class MatPaginatorApp { disabled: boolean; pageEvent = jasmine.createSpy('page event'); color: ThemePalette; + selectConfig: MatPaginatorSelectConfig = {}; @ViewChild(MatPaginator) paginator: MatPaginator; diff --git a/src/material/paginator/paginator.ts b/src/material/paginator/paginator.ts index a676f8660519..a1c606f37989 100644 --- a/src/material/paginator/paginator.ts +++ b/src/material/paginator/paginator.ts @@ -89,6 +89,15 @@ export const MAT_PAGINATOR_DEFAULT_OPTIONS = new InjectionToken | {[key: string]: any}; +} + /** * Base class with all of the `MatPaginator` functionality. * @docs-private @@ -175,6 +184,9 @@ export abstract class _MatPaginatorBase< } private _showFirstLastButtons = false; + /** Used to configure the underlying `MatSelect` inside the paginator. */ + @Input() selectConfig: MatPaginatorSelectConfig = {}; + /** Event emitted when the paginator changes the page size or page index. */ @Output() readonly page: EventEmitter = new EventEmitter(); diff --git a/tools/public_api_guard/material/paginator.md b/tools/public_api_guard/material/paginator.md index e8051239094d..070aefc07db5 100644 --- a/tools/public_api_guard/material/paginator.md +++ b/tools/public_api_guard/material/paginator.md @@ -86,10 +86,11 @@ export abstract class _MatPaginatorBase, never, never, { "color": "color"; "pageIndex": "pageIndex"; "length": "length"; "pageSize": "pageSize"; "pageSizeOptions": "pageSizeOptions"; "hidePageSize": "hidePageSize"; "showFirstLastButtons": "showFirstLastButtons"; }, { "page": "page"; }, never>; + static ɵdir: i0.ɵɵDirectiveDeclaration<_MatPaginatorBase, never, never, { "color": "color"; "pageIndex": "pageIndex"; "length": "length"; "pageSize": "pageSize"; "pageSizeOptions": "pageSizeOptions"; "hidePageSize": "hidePageSize"; "showFirstLastButtons": "showFirstLastButtons"; "selectConfig": "selectConfig"; }, { "page": "page"; }, never>; // (undocumented) static ɵfac: i0.ɵɵFactoryDeclaration<_MatPaginatorBase, never>; } @@ -128,6 +129,14 @@ export class MatPaginatorModule { static ɵmod: i0.ɵɵNgModuleDeclaration; } +// @public +export interface MatPaginatorSelectConfig { + disableOptionCentering?: boolean; + panelClass?: string | string[] | Set | { + [key: string]: any; + }; +} + // @public export class PageEvent { length: number;