feat(paginator): allow form field color to be customized (#12834)

Adds a `color` input on the paginator that allows for the color to be set on the underlying components that are hidden away from the consumer.

Author: crisbeto

src/lib/paginator/paginator.html

@@ -6,6 +6,7 @@
 
     <mat-form-field
       *ngIf="_displayedPageSizeOptions.length > 1"
+      [color]="color"
       class="mat-paginator-page-size-select">
       <mat-select
         [value]="pageSize"

src/lib/paginator/paginator.spec.ts

@@ -5,6 +5,7 @@ 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';
 
 
 describe('MatPaginator', () => {
@@ -167,6 +168,18 @@ describe('MatPaginator', () => {
     expect(paginator.pageIndex).toBeGreaterThanOrEqual(0);
   });
 
+  it('should be able to set the color of the form field', () => {
+    const formField: HTMLElement = fixture.nativeElement.querySelector('.mat-form-field');
+
+    expect(formField.classList).toContain('mat-primary');
+
+    component.color = 'accent';
+    fixture.detectChanges();
+
+    expect(formField.classList).not.toContain('mat-primary');
+    expect(formField.classList).toContain('mat-accent');
+  });
+
   describe('when showing the first and last button', () => {
 
     beforeEach(() => {
@@ -387,6 +400,7 @@ function getLastButton(fixture: ComponentFixture<any>) {
                    [hidePageSize]="hidePageSize"
                    [showFirstLastButtons]="showFirstLastButtons"
                    [length]="length"
+                   [color]="color"
                    (page)="pageEvent($event)">
     </mat-paginator>
   `,
@@ -399,6 +413,7 @@ class MatPaginatorApp {
   showFirstLastButtons = false;
   length = 100;
   pageEvent = jasmine.createSpy('page event');
+  color: ThemePalette;
 
   @ViewChild(MatPaginator) paginator: MatPaginator;
 

src/lib/paginator/paginator.ts

@@ -20,7 +20,7 @@ import {
 } from '@angular/core';
 import {Subscription} from 'rxjs';
 import {MatPaginatorIntl} from './paginator-intl';
-import {HasInitialized, mixinInitialized} from '@angular/material/core';
+import {HasInitialized, mixinInitialized, ThemePalette} from '@angular/material/core';
 
 /** The default page size if there is no page size and there are no provided page size options. */
 const DEFAULT_PAGE_SIZE = 50;
@@ -72,6 +72,9 @@ export class MatPaginator extends _MatPaginatorBase implements OnInit, OnDestroy
   private _initialized: boolean;
   private _intlChanges: Subscription;
 
+  /** Theme color to be used for the underlying form controls. */
+  @Input() color: ThemePalette;
+
   /** The zero-based page index of the displayed list of items. Defaulted to 0. */
   @Input()
   get pageIndex(): number { return this._pageIndex; }