feat(paginator): add input for configuring the underlying select

Since we hide the underlying `MatSelect` inside the `MatPaginator`, the user doesn't have the ability to configure some of the inputs. These changes introduce an input that proxy some of the supported properties to the select.

Fixes #13646.

Author: crisbeto

src/material/paginator/paginator.html

@@ -12,9 +12,12 @@
         <mat-select
           [value]="pageSize"
           [disabled]="disabled"
+          [panelClass]="selectConfig.panelClass"
+          [disableOptionCentering]="selectConfig.disableOptionCentering"
           [aria-label]="_intl.itemsPerPageLabel"
           (selectionChange)="_changePageSize($event.value)">
-          <mat-option *ngFor="let pageSizeOption of _displayedPageSizeOptions" [value]="pageSizeOption">
+          <mat-option *ngFor="let pageSizeOption of _displayedPageSizeOptions"
+            [value]="pageSizeOption">
             {{pageSizeOption}}
           </mat-option>
         </mat-select>

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`.
@@ -26,4 +30,5 @@ This will allow you to change the following:
  3. The tooltip messages on the navigation buttons.
 
 ### Accessibility
-The `aria-label`s for next page, previous page, first page and last page buttons can be set in `MatPaginatorIntl`.
+The `aria-label`s for next page, previous page, first page and last page buttons can be set in
+`MatPaginatorIntl`.

src/material/paginator/paginator.spec.ts

@@ -5,8 +5,14 @@ import {dispatchMouseEvent} from '@angular/cdk/testing/private';
 import {ThemePalette} from '@angular/material/core';
 import {MatSelect} from '@angular/material/select';
 import {By} from '@angular/platform-browser';
-import {MatPaginatorModule, MatPaginator, MatPaginatorIntl} from './index';
-import {MAT_PAGINATOR_DEFAULT_OPTIONS, MatPaginatorDefaultOptions} from './paginator';
+import {
+  MatPaginatorModule,
+  MatPaginator,
+  MatPaginatorIntl,
+  MatPaginatorSelectConfig,
+  MAT_PAGINATOR_DEFAULT_OPTIONS,
+  MatPaginatorDefaultOptions,
+} from './index';
 
 
 describe('MatPaginator', () => {
@@ -186,6 +192,24 @@ describe('MatPaginator', () => {
     expect(formField.classList).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<MatPaginatorApp>;
     let component: MatPaginatorApp;
@@ -488,6 +512,7 @@ function getLastButton(fixture: ComponentFixture<any>) {
                    [pageSize]="pageSize"
                    [pageSizeOptions]="pageSizeOptions"
                    [hidePageSize]="hidePageSize"
+                   [selectConfig]="selectConfig"
                    [showFirstLastButtons]="showFirstLastButtons"
                    [length]="length"
                    [color]="color"
@@ -506,6 +531,7 @@ class MatPaginatorApp {
   disabled: boolean;
   pageEvent = jasmine.createSpy('page event');
   color: ThemePalette;
+  selectConfig: MatPaginatorSelectConfig = {};
 
   @ViewChild(MatPaginator) paginator: MatPaginator;
 

src/material/paginator/paginator.ts

@@ -82,6 +82,16 @@ export interface MatPaginatorDefaultOptions {
 export const MAT_PAGINATOR_DEFAULT_OPTIONS =
     new InjectionToken<MatPaginatorDefaultOptions>('MAT_PAGINATOR_DEFAULT_OPTIONS');
 
+
+/** 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<string>|{[key: string]: any};
+}
+
 // Boilerplate for applying mixins to MatPaginator.
 /** @docs-private */
 class MatPaginatorBase {}
@@ -166,6 +176,9 @@ export class MatPaginator extends _MatPaginatorBase implements OnInit, OnDestroy
   }
   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<PageEvent> = new EventEmitter<PageEvent>();
 

tools/public_api_guard/material/paginator.d.ts

@@ -23,6 +23,7 @@ export declare class MatPaginator extends _MatPaginatorBase implements OnInit, O
     set pageSize(value: number);
     get pageSizeOptions(): number[];
     set pageSizeOptions(value: number[]);
+    selectConfig: MatPaginatorSelectConfig;
     get showFirstLastButtons(): boolean;
     set showFirstLastButtons(value: boolean);
     constructor(_intl: MatPaginatorIntl, _changeDetectorRef: ChangeDetectorRef, defaults?: MatPaginatorDefaultOptions);
@@ -44,7 +45,7 @@ export declare class MatPaginator extends _MatPaginatorBase implements OnInit, O
     static ngAcceptInputType_pageIndex: NumberInput;
     static ngAcceptInputType_pageSize: NumberInput;
     static ngAcceptInputType_showFirstLastButtons: BooleanInput;
-    static ɵcmp: i0.ɵɵComponentDefWithMeta<MatPaginator, "mat-paginator", ["matPaginator"], { "disabled": "disabled"; "color": "color"; "pageIndex": "pageIndex"; "length": "length"; "pageSize": "pageSize"; "pageSizeOptions": "pageSizeOptions"; "hidePageSize": "hidePageSize"; "showFirstLastButtons": "showFirstLastButtons"; }, { "page": "page"; }, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<MatPaginator, "mat-paginator", ["matPaginator"], { "disabled": "disabled"; "color": "color"; "pageIndex": "pageIndex"; "length": "length"; "pageSize": "pageSize"; "pageSizeOptions": "pageSizeOptions"; "hidePageSize": "hidePageSize"; "showFirstLastButtons": "showFirstLastButtons"; "selectConfig": "selectConfig"; }, { "page": "page"; }, never>;
     static ɵfac: i0.ɵɵFactoryDef<MatPaginator>;
 }
 
@@ -72,6 +73,13 @@ export declare class MatPaginatorModule {
     static ɵmod: i0.ɵɵNgModuleDefWithMeta<MatPaginatorModule, [typeof i1.MatPaginator], [typeof i2.CommonModule, typeof i3.MatButtonModule, typeof i4.MatSelectModule, typeof i5.MatTooltipModule], [typeof i1.MatPaginator]>;
 }
 
+export interface MatPaginatorSelectConfig {
+    disableOptionCentering?: boolean;
+    panelClass?: string | string[] | Set<string> | {
+        [key: string]: any;
+    };
+}
+
 export declare class PageEvent {
     length: number;
     pageIndex: number;