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/lib/paginator/paginator.html

@@ -11,9 +11,12 @@
         class="mat-paginator-page-size-select">
         <mat-select
           [value]="pageSize"
+          [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/lib/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/lib/paginator/paginator.spec.ts

@@ -1,11 +1,13 @@
 import {async, ComponentFixture, TestBed, inject, tick, fakeAsync} from '@angular/core/testing';
 import {MatPaginatorModule} from './index';
-import {MatPaginator} from './paginator';
+import {MatPaginator, MatPaginatorSelectConfig} from './paginator';
 import {Component, ViewChild} from '@angular/core';
 import {MatPaginatorIntl} from './paginator-intl';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {dispatchMouseEvent} from '@angular/cdk/testing';
 import {ThemePalette} from '@angular/material/core';
+import {By} from '@angular/platform-browser';
+import {MatSelect} from '@angular/material/select';
 
 
 describe('MatPaginator', () => {
@@ -180,6 +182,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(() => {
@@ -415,6 +433,7 @@ function getLastButton(fixture: ComponentFixture<any>) {
                    [pageSize]="pageSize"
                    [pageSizeOptions]="pageSizeOptions"
                    [hidePageSize]="hidePageSize"
+                   [selectConfig]="selectConfig"
                    [showFirstLastButtons]="showFirstLastButtons"
                    [length]="length"
                    [color]="color"
@@ -431,6 +450,7 @@ class MatPaginatorApp {
   length = 100;
   pageEvent = jasmine.createSpy('page event');
   color: ThemePalette;
+  selectConfig: MatPaginatorSelectConfig = {};
 
   @ViewChild(MatPaginator) paginator: MatPaginator;
 

src/lib/paginator/paginator.ts

@@ -51,6 +51,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 */
 export class MatPaginatorBase {}
@@ -134,6 +143,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>();