From 17519241603b357e41749a1847bf356d8baee2a7 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Tue, 16 Jan 2018 23:03:12 +0100
Subject: [PATCH] fix(datepicker): highlight datepicker toggle when calendar is
 open

Highlights the `mat-datepicker-toggle` while the associated calendar is open, in order to provide some extra visual feedback.
---
 src/lib/datepicker/_datepicker-theme.scss |  4 ++++
 src/lib/datepicker/datepicker-toggle.ts   | 12 ++++++++++--
 src/lib/datepicker/datepicker.spec.ts     | 19 +++++++++++++++++++
 3 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/src/lib/datepicker/_datepicker-theme.scss b/src/lib/datepicker/_datepicker-theme.scss
index f1a48d7bf71f..c448e4b83fab 100644
--- a/src/lib/datepicker/_datepicker-theme.scss
+++ b/src/lib/datepicker/_datepicker-theme.scss
@@ -84,6 +84,10 @@ $mat-calendar-weekday-table-font-size: 11px !default;
   .mat-calendar-body-disabled > .mat-calendar-body-today:not(.mat-calendar-body-selected) {
     border-color: fade-out(mat-color($foreground, hint-text), $mat-datepicker-today-fade-amount);
   }
+
+  .mat-datepicker-toggle-active {
+    color: mat-color($primary);
+  }
 }
 
 @mixin mat-datepicker-typography($config) {
diff --git a/src/lib/datepicker/datepicker-toggle.ts b/src/lib/datepicker/datepicker-toggle.ts
index 147a680a3081..b462aeb13335 100644
--- a/src/lib/datepicker/datepicker-toggle.ts
+++ b/src/lib/datepicker/datepicker-toggle.ts
@@ -31,6 +31,7 @@ import {MatDatepickerIntl} from './datepicker-intl';
   templateUrl: 'datepicker-toggle.html',
   host: {
     'class': 'mat-datepicker-toggle',
+    '[class.mat-datepicker-toggle-active]': 'datepicker && datepicker.opened',
   },
   exportAs: 'matDatepickerToggle',
   encapsulation: ViewEncapsulation.None,
@@ -80,9 +81,16 @@ export class MatDatepickerToggle<D> implements AfterContentInit, OnChanges, OnDe
     const datepickerDisabled = this.datepicker ? this.datepicker._disabledChange : observableOf();
     const inputDisabled = this.datepicker && this.datepicker._datepickerInput ?
         this.datepicker._datepickerInput._disabledChange : observableOf();
+    const datepickerToggled = this.datepicker ?
+        merge(this.datepicker.openedStream, this.datepicker.closedStream) :
+        observableOf();
 
     this._stateChanges.unsubscribe();
-    this._stateChanges = merge(this._intl.changes, datepickerDisabled, inputDisabled)
-        .subscribe(() => this._changeDetectorRef.markForCheck());
+    this._stateChanges = merge(
+      this._intl.changes,
+      datepickerDisabled,
+      inputDisabled,
+      datepickerToggled
+    ).subscribe(() => this._changeDetectorRef.markForCheck());
   }
 }
diff --git a/src/lib/datepicker/datepicker.spec.ts b/src/lib/datepicker/datepicker.spec.ts
index 5a9e3398cdad..b881f1f64a67 100644
--- a/src/lib/datepicker/datepicker.spec.ts
+++ b/src/lib/datepicker/datepicker.spec.ts
@@ -740,6 +740,25 @@ describe('MatDatepicker', () => {
 
           expect(toggle.getAttribute('aria-label')).toBe('Open the calendar, perhaps?');
         }));
+
+      it('should toggle the active state of the datepicker toggle', fakeAsync(() => {
+        const toggle = fixture.debugElement.query(By.css('mat-datepicker-toggle')).nativeElement;
+
+        expect(toggle.classList).not.toContain('mat-datepicker-toggle-active');
+
+        fixture.componentInstance.datepicker.open();
+        fixture.detectChanges();
+        flush();
+
+        expect(toggle.classList).toContain('mat-datepicker-toggle-active');
+
+        fixture.componentInstance.datepicker.close();
+        fixture.detectChanges();
+        flush();
+        fixture.detectChanges();
+
+        expect(toggle.classList).not.toContain('mat-datepicker-toggle-active');
+      }));
     });
 
     describe('datepicker inside mat-form-field', () => {