refactor (MatCalendarHeader): move MatCalendarHeader component back to calendar.ts (to avoid circular deps)

Author: Tobias Schweizer

src/lib/datepicker/calendar-header.ts

@@ -12,6 +12,7 @@ import {
   ChangeDetectorRef,
   Component,
   EventEmitter,
+  Host,
   Inject,
   Input,
   OnChanges,
@@ -30,7 +31,78 @@ import {MatMonthView} from './month-view';
 import {MatMultiYearView, yearsPerPage} from './multi-year-view';
 import {MatYearView} from './year-view';
 import {ComponentPortal, ComponentType, Portal} from '@angular/cdk/portal';
-import {MatCalendarHeader} from './calendar-header';
+import {Subject} from 'rxjs/Subject';
+import {takeUntil} from 'rxjs/operators/takeUntil';
+
+/** Default header for MatCalendar */
+@Component({
+  moduleId: module.id,
+  selector: 'mat-calendar-header',
+  templateUrl: 'calendar-header.html',
+  encapsulation: ViewEncapsulation.None,
+  preserveWhitespaces: false,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MatCalendarHeader implements OnDestroy {
+  /** Subject that emits when the component has been destroyed. */
+  private _destroyed = new Subject<void>();
+
+  constructor(private _intl: MatDatepickerIntl,
+              @Host() public calendar: MatCalendar<any>,
+              @Optional() private _dateAdapter: DateAdapter<any>,
+              @Optional() @Inject(MAT_DATE_FORMATS) private _dateFormats: MatDateFormats,
+              changeDetectorRef: ChangeDetectorRef) {
+    _intl.changes.pipe(takeUntil(this._destroyed)).subscribe(
+            () => changeDetectorRef.markForCheck()
+    );
+  }
+
+  /** The label for the current calendar view. */
+  get periodButtonText(): string {
+    if (this.calendar.currentView == 'month') {
+      return this._dateAdapter
+              .format(this.calendar.activeDate, this._dateFormats.display.monthYearLabel)
+              .toLocaleUpperCase();
+    }
+    if (this.calendar.currentView == 'year') {
+      return this._dateAdapter.getYearName(this.calendar.activeDate);
+    }
+    const activeYear = this._dateAdapter.getYear(this.calendar.activeDate);
+    const firstYearInView = this._dateAdapter.getYearName(
+            this._dateAdapter.createDate(activeYear - activeYear % 24, 0, 1));
+    const lastYearInView = this._dateAdapter.getYearName(
+            this._dateAdapter.createDate(activeYear + yearsPerPage - 1 - activeYear % 24, 0, 1));
+    return `${firstYearInView} \u2013 ${lastYearInView}`;
+  }
+
+  get periodButtonLabel(): string {
+    return this.calendar.currentView == 'month' ?
+            this._intl.switchToMultiYearViewLabel : this._intl.switchToMonthViewLabel;
+  }
+
+  /** The label for the the previous button. */
+  get prevButtonLabel(): string {
+    return {
+      'month': this._intl.prevMonthLabel,
+      'year': this._intl.prevYearLabel,
+      'multi-year': this._intl.prevMultiYearLabel
+    }[this.calendar.currentView];
+  }
+
+  /** The label for the the next button. */
+  get nextButtonLabel(): string {
+    return {
+      'month': this._intl.nextMonthLabel,
+      'year': this._intl.nextYearLabel,
+      'multi-year': this._intl.nextMultiYearLabel
+    }[this.calendar.currentView];
+  }
+
+  ngOnDestroy() {
+    this._destroyed.next();
+    this._destroyed.complete();
+  }
+}
 
 /**
  * A calendar that is used as part of the datepicker.

src/lib/datepicker/calendar.ts

@@ -13,7 +13,7 @@ import {NgModule} from '@angular/core';
 import {MatButtonModule} from '@angular/material/button';
 import {MatDialogModule} from '@angular/material/dialog';
 import {MatCalendar} from './calendar';
-import {MatCalendarHeader} from './calendar-header';
+import {MatCalendarHeader} from './calendar';
 import {MatCalendarBody} from './calendar-body';
 import {
   MAT_DATEPICKER_SCROLL_STRATEGY_PROVIDER,

src/lib/datepicker/datepicker-module.ts

@@ -8,7 +8,6 @@
 
 export * from './datepicker-module';
 export * from './calendar';
-export * from './calendar-header';
 export * from './calendar-body';
 export * from './datepicker';
 export * from './datepicker-animations';