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,7 +5,12 @@ import {dispatchMouseEvent} from '@angular/cdk/testing';
 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 {
+  MatPaginatorModule,
+  MatPaginator,
+  MatPaginatorIntl,
+  MatPaginatorSelectConfig,
+} from './index';
 
 
 describe('MatPaginator', () => {
@@ -180,6 +185,22 @@ describe('MatPaginator', () => {
     expect(formField.classList).toContain('mat-accent');
   });
 
+  it('should be able to pass options to the underlying mat-select', () => {
+    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', () => {
 
     beforeEach(() => {
@@ -438,6 +459,7 @@ function getLastButton(fixture: ComponentFixture<any>) {
                    [pageSize]="pageSize"
                    [pageSizeOptions]="pageSizeOptions"
                    [hidePageSize]="hidePageSize"
+                   [selectConfig]="selectConfig"
                    [showFirstLastButtons]="showFirstLastButtons"
                    [length]="length"
                    [color]="color"
@@ -456,6 +478,7 @@ class MatPaginatorApp {
   disabled: boolean;
   pageEvent = jasmine.createSpy('page event');
   color: ThemePalette;
+  selectConfig: MatPaginatorSelectConfig = {};
 
   @ViewChild(MatPaginator, {static: false}) paginator: MatPaginator;
 

src/material/paginator/paginator.ts

@@ -54,6 +54,15 @@ export class PageEvent {
   length: number;
 }
 
+/** 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 {}
@@ -139,6 +148,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

@@ -16,6 +16,7 @@ export declare class MatPaginator extends _MatPaginatorBase implements OnInit, O
     pageIndex: number;
     pageSize: number;
     pageSizeOptions: number[];
+    selectConfig: MatPaginatorSelectConfig;
     showFirstLastButtons: boolean;
     constructor(_intl: MatPaginatorIntl, _changeDetectorRef: ChangeDetectorRef);
     _changePageSize(pageSize: number): void;
@@ -45,6 +46,13 @@ export declare class MatPaginatorIntl {
 export declare class MatPaginatorModule {
 }
 
+export interface MatPaginatorSelectConfig {
+    disableOptionCentering?: boolean;
+    panelClass?: string | string[] | Set<string> | {
+        [key: string]: any;
+    };
+}
+
 export declare class PageEvent {
     length: number;
     pageIndex: number;