feat: move FocusMonitor into cdk (#6921)

Moves the `FocusOriginMonitor` into `@angular/cdk/a11y`, renames it to `FocusMonitor`, deprecates the `StyleModule` and updates all the references.

BREAKING CHANGE: `FocusOriginMonitor` has been renamed to `FocusMonitor`.

Author: crisbeto

src/lib/core/style/focus-origin-monitor.spec.ts renamed to src/cdk/a11y/focus-monitor.spec.ts

@@ -1,38 +1,38 @@
 import {ComponentFixture, inject, TestBed, fakeAsync, tick} from '@angular/core/testing';
 import {Component, Renderer2} from '@angular/core';
-import {StyleModule} from './index';
+import {A11yModule} from './index';
 import {By} from '@angular/platform-browser';
-import {TAB} from '../keyboard/keycodes';
-import {FocusOrigin, FocusOriginMonitor, TOUCH_BUFFER_MS} from './focus-origin-monitor';
+import {TAB} from '@angular/cdk/keycodes';
+import {FocusOrigin, FocusMonitor, TOUCH_BUFFER_MS} from './focus-monitor';
 import {dispatchFakeEvent, dispatchKeyboardEvent, dispatchMouseEvent} from '@angular/cdk/testing';
 
 
-describe('FocusOriginMonitor', () => {
+describe('FocusMonitor', () => {
   let fixture: ComponentFixture<PlainButton>;
   let buttonElement: HTMLElement;
   let buttonRenderer: Renderer2;
-  let focusOriginMonitor: FocusOriginMonitor;
+  let focusMonitor: FocusMonitor;
   let changeHandler: (origin: FocusOrigin) => void;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [StyleModule],
+      imports: [A11yModule],
       declarations: [
         PlainButton,
       ],
     }).compileComponents();
   });
 
-  beforeEach(inject([FocusOriginMonitor], (fom: FocusOriginMonitor) => {
+  beforeEach(inject([FocusMonitor], (fm: FocusMonitor) => {
     fixture = TestBed.createComponent(PlainButton);
     fixture.detectChanges();
 
     buttonElement = fixture.debugElement.query(By.css('button')).nativeElement;
     buttonRenderer = fixture.componentInstance.renderer;
-    focusOriginMonitor = fom;
+    focusMonitor = fm;
 
     changeHandler = jasmine.createSpy('focus origin change handler');
-    focusOriginMonitor.monitor(buttonElement, buttonRenderer, false).subscribe(changeHandler);
+    focusMonitor.monitor(buttonElement, buttonRenderer, false).subscribe(changeHandler);
     patchElementFocus(buttonElement);
   }));
 
@@ -110,7 +110,7 @@ describe('FocusOriginMonitor', () => {
   }));
 
   it('focusVia keyboard should simulate keyboard focus', fakeAsync(() => {
-    focusOriginMonitor.focusVia(buttonElement, 'keyboard');
+    focusMonitor.focusVia(buttonElement, 'keyboard');
     tick();
 
     expect(buttonElement.classList.length)
@@ -123,7 +123,7 @@ describe('FocusOriginMonitor', () => {
   }));
 
   it('focusVia mouse should simulate mouse focus', fakeAsync(() => {
-    focusOriginMonitor.focusVia(buttonElement, 'mouse');
+    focusMonitor.focusVia(buttonElement, 'mouse');
     fixture.detectChanges();
     tick();
 
@@ -137,7 +137,7 @@ describe('FocusOriginMonitor', () => {
   }));
 
   it('focusVia mouse should simulate mouse focus', fakeAsync(() => {
-    focusOriginMonitor.focusVia(buttonElement, 'touch');
+    focusMonitor.focusVia(buttonElement, 'touch');
     fixture.detectChanges();
     tick();
 
@@ -151,7 +151,7 @@ describe('FocusOriginMonitor', () => {
   }));
 
   it('focusVia program should simulate programmatic focus', fakeAsync(() => {
-    focusOriginMonitor.focusVia(buttonElement, 'program');
+    focusMonitor.focusVia(buttonElement, 'program');
     fixture.detectChanges();
     tick();
 
@@ -175,7 +175,7 @@ describe('FocusOriginMonitor', () => {
 
     // Call `blur` directly because invoking `buttonElement.blur()` does not always trigger the
     // handler on IE11 on SauceLabs.
-    focusOriginMonitor._onBlur({} as any, buttonElement);
+    focusMonitor._onBlur({} as any, buttonElement);
     fixture.detectChanges();
 
     expect(buttonElement.classList.length)
@@ -191,7 +191,7 @@ describe('FocusOriginMonitor', () => {
     expect(buttonElement.classList.length)
         .toBe(2, 'button should have exactly 2 focus classes');
 
-    focusOriginMonitor.stopMonitoring(buttonElement);
+    focusMonitor.stopMonitoring(buttonElement);
     fixture.detectChanges();
 
     expect(buttonElement.classList.length).toBe(0, 'button should not have any focus classes');
@@ -202,7 +202,7 @@ describe('FocusOriginMonitor', () => {
 describe('cdkMonitorFocus', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [StyleModule],
+      imports: [A11yModule],
       declarations: [
         ButtonWithFocusClasses,
         ComplexComponentWithMonitorElementFocus,

src/lib/core/style/focus-origin-monitor.ts renamed to src/cdk/a11y/focus-monitor.ts

@@ -18,10 +18,10 @@ import {
   Renderer2,
   SkipSelf,
 } from '@angular/core';
+import {Platform} from '@angular/cdk/platform';
 import {Observable} from 'rxjs/Observable';
 import {Subject} from 'rxjs/Subject';
 import {Subscription} from 'rxjs/Subscription';
-import {Platform} from '../platform/platform';
 import {of as observableOf} from 'rxjs/observable/of';
 
 
@@ -43,11 +43,11 @@ type MonitoredElementInfo = {
 
 /** Monitors mouse and keyboard events to determine the cause of focus events. */
 @Injectable()
-export class FocusOriginMonitor {
+export class FocusMonitor {
   /** The focus origin that the next focus event is a result of. */
   private _origin: FocusOrigin = null;
 
-  /** The FocusOrigin of the last focus event tracked by the FocusOriginMonitor. */
+  /** The FocusOrigin of the last focus event tracked by the FocusMonitor. */
   private _lastFocusOrigin: FocusOrigin;
 
   /** Whether the window has just been focused. */
@@ -320,30 +320,30 @@ export class CdkMonitorFocus implements OnDestroy {
   private _monitorSubscription: Subscription;
   @Output() cdkFocusChange = new EventEmitter<FocusOrigin>();
 
-  constructor(private _elementRef: ElementRef, private _focusOriginMonitor: FocusOriginMonitor,
+  constructor(private _elementRef: ElementRef, private _focusMonitor: FocusMonitor,
               renderer: Renderer2) {
-    this._monitorSubscription = this._focusOriginMonitor.monitor(
+    this._monitorSubscription = this._focusMonitor.monitor(
         this._elementRef.nativeElement, renderer,
         this._elementRef.nativeElement.hasAttribute('cdkMonitorSubtreeFocus'))
         .subscribe(origin => this.cdkFocusChange.emit(origin));
   }
 
   ngOnDestroy() {
-    this._focusOriginMonitor.stopMonitoring(this._elementRef.nativeElement);
+    this._focusMonitor.stopMonitoring(this._elementRef.nativeElement);
     this._monitorSubscription.unsubscribe();
   }
 }
 
 /** @docs-private */
-export function FOCUS_ORIGIN_MONITOR_PROVIDER_FACTORY(
-    parentDispatcher: FocusOriginMonitor, ngZone: NgZone, platform: Platform) {
-  return parentDispatcher || new FocusOriginMonitor(ngZone, platform);
+export function FOCUS_MONITOR_PROVIDER_FACTORY(
+    parentDispatcher: FocusMonitor, ngZone: NgZone, platform: Platform) {
+  return parentDispatcher || new FocusMonitor(ngZone, platform);
 }
 
 /** @docs-private */
-export const FOCUS_ORIGIN_MONITOR_PROVIDER = {
-  // If there is already a FocusOriginMonitor available, use that. Otherwise, provide a new one.
-  provide: FocusOriginMonitor,
-  deps: [[new Optional(), new SkipSelf(), FocusOriginMonitor], NgZone, Platform],
-  useFactory: FOCUS_ORIGIN_MONITOR_PROVIDER_FACTORY
+export const FOCUS_MONITOR_PROVIDER = {
+  // If there is already a FocusMonitor available, use that. Otherwise, provide a new one.
+  provide: FocusMonitor,
+  deps: [[new Optional(), new SkipSelf(), FocusMonitor], NgZone, Platform],
+  useFactory: FOCUS_MONITOR_PROVIDER_FACTORY
 };

src/cdk/a11y/public_api.ts

@@ -13,17 +13,19 @@ import {InteractivityChecker} from './interactivity-checker';
 import {CommonModule} from '@angular/common';
 import {PlatformModule} from '@angular/cdk/platform';
 import {AriaDescriber, ARIA_DESCRIBER_PROVIDER} from './aria-describer';
+import {CdkMonitorFocus, FOCUS_MONITOR_PROVIDER} from './focus-monitor';
 
 @NgModule({
   imports: [CommonModule, PlatformModule],
-  declarations: [FocusTrapDirective, FocusTrapDeprecatedDirective],
-  exports: [FocusTrapDirective, FocusTrapDeprecatedDirective],
+  declarations: [FocusTrapDirective, FocusTrapDeprecatedDirective, CdkMonitorFocus],
+  exports: [FocusTrapDirective, FocusTrapDeprecatedDirective, CdkMonitorFocus],
   providers: [
     InteractivityChecker,
     FocusTrapFactory,
     AriaDescriber,
     LIVE_ANNOUNCER_PROVIDER,
-    ARIA_DESCRIBER_PROVIDER
+    ARIA_DESCRIBER_PROVIDER,
+    FOCUS_MONITOR_PROVIDER,
   ]
 })
 export class A11yModule {}
@@ -36,3 +38,4 @@ export * from './focus-trap';
 export * from './interactivity-checker';
 export * from './list-key-manager';
 export * from './live-announcer';
+export * from './focus-monitor';

src/demo-app/demo-app/demo-app.ts

@@ -78,7 +78,7 @@ export class DemoApp {
     {name: 'Toolbar', route: '/toolbar'},
     {name: 'Tooltip', route: '/tooltip'},
     {name: 'Platform', route: '/platform'},
-    {name: 'Style', route: '/style'},
+    {name: 'Focus Origin', route: '/focus-origin'},
     {name: 'Typography', route: '/typography'}
   ];
 

src/demo-app/demo-app/demo-module.ts

@@ -34,7 +34,7 @@ import {FoggyTabContent, RainyTabContent, SunnyTabContent, TabsDemo} from '../ta
 import {PlatformDemo} from '../platform/platform-demo';
 import {AutocompleteDemo} from '../autocomplete/autocomplete-demo';
 import {InputDemo} from '../input/input-demo';
-import {StyleDemo} from '../style/style-demo';
+import {FocusOriginDemo} from '../focus-origin/focus-origin-demo';
 import {TableDemo} from '../table/table-demo';
 import {PeopleDatabase} from '../table/people-database';
 import {DatepickerDemo} from '../datepicker/datepicker-demo';
@@ -94,7 +94,7 @@ import {TableHeaderDemo} from '../table/table-header-demo';
     SlideToggleDemo,
     SpagettiPanel,
     StepperDemo,
-    StyleDemo,
+    FocusOriginDemo,
     TableHeaderDemo,
     ToolbarDemo,
     TooltipDemo,

src/demo-app/demo-app/routes.ts

@@ -31,7 +31,7 @@ import {TABS_DEMO_ROUTES} from '../tabs/routes';
 import {PlatformDemo} from '../platform/platform-demo';
 import {AutocompleteDemo} from '../autocomplete/autocomplete-demo';
 import {InputDemo} from '../input/input-demo';
-import {StyleDemo} from '../style/style-demo';
+import {FocusOriginDemo} from '../focus-origin/focus-origin-demo';
 import {DatepickerDemo} from '../datepicker/datepicker-demo';
 import {TableDemo} from '../table/table-demo';
 import {TypographyDemo} from '../typography/typography-demo';
@@ -76,7 +76,7 @@ export const DEMO_APP_ROUTES: Routes = [
     {path: 'tooltip', component: TooltipDemo},
     {path: 'snack-bar', component: SnackBarDemo},
     {path: 'platform', component: PlatformDemo},
-    {path: 'style', component: StyleDemo},
+    {path: 'focus-origin', component: FocusOriginDemo},
     {path: 'typography', component: TypographyDemo},
     {path: 'expansion', component: ExpansionDemo},
     {path: 'stepper', component: StepperDemo}

src/demo-app/demo-material-module.ts

@@ -31,7 +31,7 @@ import {
   MdTooltipModule,
   MdStepperModule,
 } from '@angular/material';
-import {StyleModule, MdNativeDateModule, MdRippleModule} from '@angular/material';
+import {MdNativeDateModule, MdRippleModule} from '@angular/material';
 import {CdkTableModule} from '@angular/cdk/table';
 import {A11yModule} from '@angular/cdk/a11y';
 import {BidiModule} from '@angular/cdk/bidi';
@@ -78,7 +78,6 @@ import {PortalModule} from '@angular/cdk/portal';
     MdTooltipModule,
     MdNativeDateModule,
     CdkTableModule,
-    StyleModule,
     A11yModule,
     BidiModule,
     ObserversModule,

src/demo-app/style/style-demo.html renamed to src/demo-app/focus-origin/focus-origin-demo.html

@@ -0,0 +1,13 @@
+import {Component} from '@angular/core';
+import {FocusMonitor} from '@angular/cdk/a11y';
+
+
+@Component({
+  moduleId: module.id,
+  selector: 'focus-origin-demo',
+  templateUrl: 'focus-origin-demo.html',
+  styleUrls: ['focus-origin-demo.css'],
+})
+export class FocusOriginDemo {
+  constructor(public fom: FocusMonitor) {}
+}

src/demo-app/style/style-demo.scss renamed to src/demo-app/focus-origin/focus-origin-demo.scss

@@ -27,8 +27,9 @@ import {
 } from '@angular/core';
 import {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/forms';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
-import {UniqueSelectionDispatcher, FocusOriginMonitor} from '@angular/material/core';
+import {UniqueSelectionDispatcher} from '@angular/material/core';
 import {CanDisable, mixinDisabled} from '@angular/material/core';
+import {FocusMonitor} from '@angular/cdk/a11y';
 
 /** Acceptable types for a button toggle. */
 export type ToggleType = 'checkbox' | 'radio';
@@ -371,7 +372,7 @@ export class MdButtonToggle implements OnInit, OnDestroy {
               private _buttonToggleDispatcher: UniqueSelectionDispatcher,
               private _renderer: Renderer2,
               private _elementRef: ElementRef,
-              private _focusOriginMonitor: FocusOriginMonitor) {
+              private _focusMonitor: FocusMonitor) {
 
     this.buttonToggleGroup = toggleGroup;
     this.buttonToggleGroupMultiple = toggleGroupMultiple;
@@ -404,7 +405,7 @@ export class MdButtonToggle implements OnInit, OnDestroy {
     if (this.buttonToggleGroup && this._value == this.buttonToggleGroup.value) {
       this._checked = true;
     }
-    this._focusOriginMonitor.monitor(this._elementRef.nativeElement, this._renderer, true);
+    this._focusMonitor.monitor(this._elementRef.nativeElement, this._renderer, true);
   }
 
   /** Focuses the button. */

src/demo-app/focus-origin/focus-origin-demo.ts

@@ -8,15 +8,12 @@
 
 import {NgModule} from '@angular/core';
 import {MdButtonToggleGroup, MdButtonToggleGroupMultiple, MdButtonToggle} from './button-toggle';
-import {
-  UNIQUE_SELECTION_DISPATCHER_PROVIDER,
-  MdCommonModule,
-  StyleModule,
-} from '@angular/material/core';
+import {UNIQUE_SELECTION_DISPATCHER_PROVIDER, MdCommonModule} from '@angular/material/core';
+import {A11yModule} from '@angular/cdk/a11y';
 
 
 @NgModule({
-  imports: [MdCommonModule, StyleModule],
+  imports: [MdCommonModule, A11yModule],
   exports: [
     MdButtonToggleGroup,
     MdButtonToggleGroupMultiple,

src/demo-app/style/style-demo.ts

@@ -24,11 +24,11 @@ import {
   CanColor,
   CanDisable,
   CanDisableRipple,
-  FocusOriginMonitor,
   mixinColor,
   mixinDisabled,
   mixinDisableRipple
 } from '@angular/material/core';
+import {FocusMonitor} from '@angular/cdk/a11y';
 
 
 // TODO(kara): Convert attribute selectors to classes when attr maps become available
@@ -142,13 +142,13 @@ export class MdButton extends _MdButtonMixinBase
   constructor(renderer: Renderer2,
               elementRef: ElementRef,
               private _platform: Platform,
-              private _focusOriginMonitor: FocusOriginMonitor) {
+              private _focusMonitor: FocusMonitor) {
     super(renderer, elementRef);
-    this._focusOriginMonitor.monitor(this._elementRef.nativeElement, this._renderer, true);
+    this._focusMonitor.monitor(this._elementRef.nativeElement, this._renderer, true);
   }
 
   ngOnDestroy() {
-    this._focusOriginMonitor.stopMonitoring(this._elementRef.nativeElement);
+    this._focusMonitor.stopMonitoring(this._elementRef.nativeElement);
   }
 
   /** Focuses the button. */
@@ -206,10 +206,10 @@ export class MdButton extends _MdButtonMixinBase
 export class MdAnchor extends MdButton {
   constructor(
       platform: Platform,
-      focusOriginMonitor: FocusOriginMonitor,
+      focusMonitor: FocusMonitor,
       elementRef: ElementRef,
       renderer: Renderer2) {
-    super(renderer, elementRef, platform, focusOriginMonitor);
+    super(renderer, elementRef, platform, focusMonitor);
   }
 
   _haltDisabledEvents(event: Event) {