diff --git a/src/lib/core/style/focus-origin-monitor.spec.ts b/src/cdk/a11y/focus-monitor.spec.ts similarity index 94% rename from src/lib/core/style/focus-origin-monitor.spec.ts rename to src/cdk/a11y/focus-monitor.spec.ts index 672d8dedc16f..a2b8fbfbb5a8 100644 --- a/src/lib/core/style/focus-origin-monitor.spec.ts +++ b/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; 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, diff --git a/src/lib/core/style/focus-origin-monitor.ts b/src/cdk/a11y/focus-monitor.ts similarity index 93% rename from src/lib/core/style/focus-origin-monitor.ts rename to src/cdk/a11y/focus-monitor.ts index 418777bec907..6ed78b200df3 100644 --- a/src/lib/core/style/focus-origin-monitor.ts +++ b/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(); - 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 }; diff --git a/src/cdk/a11y/public_api.ts b/src/cdk/a11y/public_api.ts index 588e73a804c4..ddd32c71097d 100644 --- a/src/cdk/a11y/public_api.ts +++ b/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'; diff --git a/src/demo-app/demo-app/demo-app.ts b/src/demo-app/demo-app/demo-app.ts index 6f8341a5d88e..4d43f5711873 100644 --- a/src/demo-app/demo-app/demo-app.ts +++ b/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'} ]; diff --git a/src/demo-app/demo-app/demo-module.ts b/src/demo-app/demo-app/demo-module.ts index 3d98a8f0efc8..59a632277ee1 100644 --- a/src/demo-app/demo-app/demo-module.ts +++ b/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, diff --git a/src/demo-app/demo-app/routes.ts b/src/demo-app/demo-app/routes.ts index 1a0b5eb5a389..7ee134565fdb 100644 --- a/src/demo-app/demo-app/routes.ts +++ b/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} diff --git a/src/demo-app/demo-material-module.ts b/src/demo-app/demo-material-module.ts index 58617586afec..1cf016b7a2dc 100644 --- a/src/demo-app/demo-material-module.ts +++ b/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, diff --git a/src/demo-app/style/style-demo.html b/src/demo-app/focus-origin/focus-origin-demo.html similarity index 100% rename from src/demo-app/style/style-demo.html rename to src/demo-app/focus-origin/focus-origin-demo.html diff --git a/src/demo-app/style/style-demo.scss b/src/demo-app/focus-origin/focus-origin-demo.scss similarity index 100% rename from src/demo-app/style/style-demo.scss rename to src/demo-app/focus-origin/focus-origin-demo.scss diff --git a/src/demo-app/focus-origin/focus-origin-demo.ts b/src/demo-app/focus-origin/focus-origin-demo.ts new file mode 100644 index 000000000000..3af33dbbce2b --- /dev/null +++ b/src/demo-app/focus-origin/focus-origin-demo.ts @@ -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) {} +} diff --git a/src/demo-app/style/style-demo.ts b/src/demo-app/style/style-demo.ts deleted file mode 100644 index f66c1bded235..000000000000 --- a/src/demo-app/style/style-demo.ts +++ /dev/null @@ -1,13 +0,0 @@ -import {Component} from '@angular/core'; -import {FocusOriginMonitor} from '@angular/material'; - - -@Component({ - moduleId: module.id, - selector: 'style-demo', - templateUrl: 'style-demo.html', - styleUrls: ['style-demo.css'], -}) -export class StyleDemo { - constructor(public fom: FocusOriginMonitor) {} -} diff --git a/src/lib/button-toggle/button-toggle.ts b/src/lib/button-toggle/button-toggle.ts index 740867820918..a38023fedfa5 100644 --- a/src/lib/button-toggle/button-toggle.ts +++ b/src/lib/button-toggle/button-toggle.ts @@ -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. */ diff --git a/src/lib/button-toggle/public_api.ts b/src/lib/button-toggle/public_api.ts index 3b4ad6857692..f9660192a224 100644 --- a/src/lib/button-toggle/public_api.ts +++ b/src/lib/button-toggle/public_api.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, diff --git a/src/lib/button/button.ts b/src/lib/button/button.ts index 1b69aa9f99f2..208a16f04d89 100644 --- a/src/lib/button/button.ts +++ b/src/lib/button/button.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) { diff --git a/src/lib/button/public_api.ts b/src/lib/button/public_api.ts index 3cec824cd095..defe5b13cab2 100644 --- a/src/lib/button/public_api.ts +++ b/src/lib/button/public_api.ts @@ -8,7 +8,8 @@ import {NgModule} from '@angular/core'; import {CommonModule} from '@angular/common'; -import {MdCommonModule, MdRippleModule, StyleModule} from '@angular/material/core'; +import {MdCommonModule, MdRippleModule} from '@angular/material/core'; +import {A11yModule} from '@angular/cdk/a11y'; import { MdAnchor, MdButton, @@ -28,7 +29,7 @@ export * from './button'; CommonModule, MdRippleModule, MdCommonModule, - StyleModule, + A11yModule, ], exports: [ MdButton, diff --git a/src/lib/checkbox/checkbox.ts b/src/lib/checkbox/checkbox.ts index 3ad31b7abdae..c94975d72c76 100644 --- a/src/lib/checkbox/checkbox.ts +++ b/src/lib/checkbox/checkbox.ts @@ -27,14 +27,13 @@ import { CanColor, CanDisable, CanDisableRipple, - FocusOrigin, - FocusOriginMonitor, MdRipple, mixinColor, mixinDisabled, mixinDisableRipple, RippleRef, } from '@angular/material/core'; +import {FocusMonitor, FocusOrigin} from '@angular/cdk/a11y'; // Increasing integer for generating unique ids for checkbox components. @@ -199,18 +198,18 @@ export class MdCheckbox extends _MdCheckboxMixinBase implements ControlValueAcce constructor(renderer: Renderer2, elementRef: ElementRef, private _changeDetectorRef: ChangeDetectorRef, - private _focusOriginMonitor: FocusOriginMonitor) { + private _focusMonitor: FocusMonitor) { super(renderer, elementRef); } ngAfterViewInit() { - this._focusOriginMonitor + this._focusMonitor .monitor(this._inputElement.nativeElement, this._renderer, false) .subscribe(focusOrigin => this._onInputFocusChange(focusOrigin)); } ngOnDestroy() { - this._focusOriginMonitor.stopMonitoring(this._inputElement.nativeElement); + this._focusMonitor.stopMonitoring(this._inputElement.nativeElement); } /** @@ -385,7 +384,7 @@ export class MdCheckbox extends _MdCheckboxMixinBase implements ControlValueAcce /** Focuses the checkbox. */ focus(): void { - this._focusOriginMonitor.focusVia(this._inputElement.nativeElement, 'keyboard'); + this._focusMonitor.focusVia(this._inputElement.nativeElement, 'keyboard'); } _onInteractionEvent(event: Event) { diff --git a/src/lib/checkbox/public_api.ts b/src/lib/checkbox/public_api.ts index 0b7668432b5c..b6b37dc67318 100644 --- a/src/lib/checkbox/public_api.ts +++ b/src/lib/checkbox/public_api.ts @@ -9,15 +9,15 @@ import {NgModule} from '@angular/core'; import {CommonModule} from '@angular/common'; import {ObserversModule} from '@angular/cdk/observers'; -import {MdRippleModule, MdCommonModule, FocusOriginMonitor} from '@angular/material/core'; +import {MdRippleModule, MdCommonModule} from '@angular/material/core'; import {MdCheckbox} from './checkbox'; import {MdCheckboxRequiredValidator} from './checkbox-required-validator'; +import {A11yModule} from '@angular/cdk/a11y'; @NgModule({ - imports: [CommonModule, MdRippleModule, MdCommonModule, ObserversModule], + imports: [CommonModule, MdRippleModule, MdCommonModule, ObserversModule, A11yModule], exports: [MdCheckbox, MdCheckboxRequiredValidator, MdCommonModule], declarations: [MdCheckbox, MdCheckboxRequiredValidator], - providers: [FocusOriginMonitor] }) export class MdCheckboxModule {} diff --git a/src/lib/core/style/index.ts b/src/lib/core/style/index.ts index ef0610762e15..54ed99b4b68a 100644 --- a/src/lib/core/style/index.ts +++ b/src/lib/core/style/index.ts @@ -7,18 +7,19 @@ */ import {NgModule} from '@angular/core'; -import {CdkMonitorFocus, FOCUS_ORIGIN_MONITOR_PROVIDER} from './focus-origin-monitor'; -import {PlatformModule} from '../platform/index'; - +import {A11yModule} from '@angular/cdk/a11y'; +/** @deprecated */ @NgModule({ - imports: [PlatformModule], - declarations: [CdkMonitorFocus], - exports: [CdkMonitorFocus], - providers: [FOCUS_ORIGIN_MONITOR_PROVIDER], + imports: [A11yModule], + exports: [A11yModule], }) export class StyleModule {} - -export * from './focus-origin-monitor'; +export { + CdkMonitorFocus, + FocusMonitor, + FOCUS_MONITOR_PROVIDER, + FocusOrigin, +} from '@angular/cdk/a11y'; export * from './apply-transform'; diff --git a/src/lib/datepicker/public_api.ts b/src/lib/datepicker/public_api.ts index 825e9a14e1cd..176f930bba88 100644 --- a/src/lib/datepicker/public_api.ts +++ b/src/lib/datepicker/public_api.ts @@ -11,7 +11,6 @@ import {OverlayModule} from '@angular/cdk/overlay'; import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; import {MdButtonModule} from '@angular/material/button'; -import {StyleModule} from '@angular/material/core'; import {MdDialogModule} from '@angular/material/dialog'; import {MdIconModule} from '@angular/material/icon'; import {MdCalendar} from './calendar'; @@ -45,7 +44,6 @@ export * from './year-view'; MdDialogModule, MdIconModule, OverlayModule, - StyleModule, A11yModule, ], exports: [ diff --git a/src/lib/expansion/expansion-panel-header.ts b/src/lib/expansion/expansion-panel-header.ts index d6657d751331..afdfad08d6af 100644 --- a/src/lib/expansion/expansion-panel-header.ts +++ b/src/lib/expansion/expansion-panel-header.ts @@ -28,7 +28,7 @@ import { import {SPACE, ENTER} from '@angular/material/core'; import {MdExpansionPanel, EXPANSION_PANEL_ANIMATION_TIMING} from './expansion-panel'; import {filter} from '@angular/material/core'; -import {FocusOriginMonitor} from '@angular/material/core'; +import {FocusMonitor} from '@angular/cdk/a11y'; import {merge} from 'rxjs/observable/merge'; import {Subscription} from 'rxjs/Subscription'; @@ -93,7 +93,7 @@ export class MdExpansionPanelHeader implements OnDestroy { renderer: Renderer2, @Host() public panel: MdExpansionPanel, private _element: ElementRef, - private _focusOriginMonitor: FocusOriginMonitor, + private _focusMonitor: FocusMonitor, private _changeDetectorRef: ChangeDetectorRef) { // Since the toggle state depends on an @Input on the panel, we @@ -105,7 +105,7 @@ export class MdExpansionPanelHeader implements OnDestroy { ) .subscribe(() => this._changeDetectorRef.markForCheck()); - _focusOriginMonitor.monitor(_element.nativeElement, renderer, false); + _focusMonitor.monitor(_element.nativeElement, renderer, false); } /** Height of the header while the panel is expanded. */ @@ -157,7 +157,7 @@ export class MdExpansionPanelHeader implements OnDestroy { ngOnDestroy() { this._parentChangeSubscription.unsubscribe(); - this._focusOriginMonitor.stopMonitoring(this._element.nativeElement); + this._focusMonitor.stopMonitoring(this._element.nativeElement); } } diff --git a/src/lib/expansion/public_api.ts b/src/lib/expansion/public_api.ts index aea8a512c2f0..6b8aace89ac7 100644 --- a/src/lib/expansion/public_api.ts +++ b/src/lib/expansion/public_api.ts @@ -8,11 +8,8 @@ import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; -import { - CompatibilityModule, - StyleModule, - UNIQUE_SELECTION_DISPATCHER_PROVIDER, -} from '@angular/material/core'; +import {CompatibilityModule, UNIQUE_SELECTION_DISPATCHER_PROVIDER} from '@angular/material/core'; +import {A11yModule} from '@angular/cdk/a11y'; import {CdkAccordion, MdAccordion} from './accordion'; import {MdExpansionPanel, MdExpansionPanelActionRow} from './expansion-panel'; import { @@ -23,7 +20,7 @@ import { @NgModule({ - imports: [CompatibilityModule, CommonModule, StyleModule], + imports: [CompatibilityModule, CommonModule, A11yModule], exports: [ CdkAccordion, MdAccordion, diff --git a/src/lib/radio/public_api.ts b/src/lib/radio/public_api.ts index 2e9590b72913..d434c542fcb2 100644 --- a/src/lib/radio/public_api.ts +++ b/src/lib/radio/public_api.ts @@ -13,15 +13,14 @@ import { MdRippleModule, MdCommonModule, UNIQUE_SELECTION_DISPATCHER_PROVIDER, - FocusOriginMonitor, } from '@angular/material/core'; import {MdRadioGroup, MdRadioButton} from './radio'; - +import {A11yModule} from '@angular/cdk/a11y'; @NgModule({ - imports: [CommonModule, MdRippleModule, MdCommonModule], + imports: [CommonModule, MdRippleModule, MdCommonModule, A11yModule], exports: [MdRadioGroup, MdRadioButton, MdCommonModule], - providers: [UNIQUE_SELECTION_DISPATCHER_PROVIDER, VIEWPORT_RULER_PROVIDER, FocusOriginMonitor], + providers: [UNIQUE_SELECTION_DISPATCHER_PROVIDER, VIEWPORT_RULER_PROVIDER], declarations: [MdRadioGroup, MdRadioButton], }) export class MdRadioModule {} diff --git a/src/lib/radio/radio.ts b/src/lib/radio/radio.ts index 229d800272e4..c30a1ddd848e 100644 --- a/src/lib/radio/radio.ts +++ b/src/lib/radio/radio.ts @@ -32,13 +32,12 @@ import { RippleRef, UniqueSelectionDispatcher, MdRipple, - FocusOriginMonitor, - FocusOrigin, } from '@angular/material/core'; import {coerceBooleanProperty} from '@angular/cdk/coercion'; import {mixinDisabled, CanDisable} from '@angular/material/core'; import {CanColor, mixinColor} from '@angular/material/core'; import {CanDisableRipple, mixinDisableRipple} from '@angular/material/core'; +import {FocusMonitor, FocusOrigin} from '@angular/cdk/a11y'; // Increasing integer for generating unique ids for radio components. let nextUniqueId = 0; @@ -489,7 +488,7 @@ export class MdRadioButton extends _MdRadioButtonMixinBase elementRef: ElementRef, renderer: Renderer2, private _changeDetector: ChangeDetectorRef, - private _focusOriginMonitor: FocusOriginMonitor, + private _focusMonitor: FocusMonitor, private _radioDispatcher: UniqueSelectionDispatcher) { super(renderer, elementRef); @@ -507,7 +506,7 @@ export class MdRadioButton extends _MdRadioButtonMixinBase /** Focuses the radio button. */ focus(): void { - this._focusOriginMonitor.focusVia(this._inputElement.nativeElement, 'keyboard'); + this._focusMonitor.focusVia(this._inputElement.nativeElement, 'keyboard'); } /** @@ -531,13 +530,13 @@ export class MdRadioButton extends _MdRadioButtonMixinBase } ngAfterViewInit() { - this._focusOriginMonitor + this._focusMonitor .monitor(this._inputElement.nativeElement, this._renderer, false) .subscribe(focusOrigin => this._onInputFocusChange(focusOrigin)); } ngOnDestroy() { - this._focusOriginMonitor.stopMonitoring(this._inputElement.nativeElement); + this._focusMonitor.stopMonitoring(this._inputElement.nativeElement); this._removeUniqueSelectionListener(); } diff --git a/src/lib/slide-toggle/public_api.ts b/src/lib/slide-toggle/public_api.ts index af02957e433a..9ad294e0f0d0 100644 --- a/src/lib/slide-toggle/public_api.ts +++ b/src/lib/slide-toggle/public_api.ts @@ -10,21 +10,20 @@ import {ObserversModule} from '@angular/cdk/observers'; import {PlatformModule} from '@angular/cdk/platform'; import {NgModule} from '@angular/core'; import { - FOCUS_ORIGIN_MONITOR_PROVIDER, GestureConfig, MdCommonModule, MdRippleModule, } from '@angular/material/core'; import {HAMMER_GESTURE_CONFIG} from '@angular/platform-browser'; +import {A11yModule} from '@angular/cdk/a11y'; import {MdSlideToggle} from './slide-toggle'; @NgModule({ - imports: [MdRippleModule, MdCommonModule, PlatformModule, ObserversModule], + imports: [MdRippleModule, MdCommonModule, PlatformModule, ObserversModule, A11yModule], exports: [MdSlideToggle, MdCommonModule], declarations: [MdSlideToggle], providers: [ - FOCUS_ORIGIN_MONITOR_PROVIDER, {provide: HAMMER_GESTURE_CONFIG, useClass: GestureConfig} ], }) diff --git a/src/lib/slide-toggle/slide-toggle.ts b/src/lib/slide-toggle/slide-toggle.ts index cfdc881a01d5..d7b6b2b895c6 100644 --- a/src/lib/slide-toggle/slide-toggle.ts +++ b/src/lib/slide-toggle/slide-toggle.ts @@ -26,8 +26,6 @@ import {Platform} from '@angular/cdk/platform'; import {coerceBooleanProperty} from '@angular/cdk/coercion'; import { applyCssTransform, - FocusOrigin, - FocusOriginMonitor, HammerInput, MdRipple, RippleRef, @@ -37,6 +35,7 @@ import {mixinDisabled, CanDisable} from '@angular/material/core'; import {CanColor, mixinColor} from '@angular/material/core'; import {CanDisableRipple, mixinDisableRipple} from '@angular/material/core'; import {HasTabIndex, mixinTabIndex} from '@angular/material/core'; +import {FocusMonitor, FocusOrigin} from '@angular/cdk/a11y'; // Increasing integer for generating unique ids for slide-toggle components. let nextUniqueId = 0; @@ -137,7 +136,7 @@ export class MdSlideToggle extends _MdSlideToggleMixinBase implements OnDestroy, constructor(elementRef: ElementRef, renderer: Renderer2, private _platform: Platform, - private _focusOriginMonitor: FocusOriginMonitor, + private _focusMonitor: FocusMonitor, private _changeDetectorRef: ChangeDetectorRef, @Attribute('tabindex') tabIndex: string) { super(renderer, elementRef); @@ -148,13 +147,13 @@ export class MdSlideToggle extends _MdSlideToggleMixinBase implements OnDestroy, ngAfterContentInit() { this._slideRenderer = new SlideToggleRenderer(this._elementRef, this._platform); - this._focusOriginMonitor + this._focusMonitor .monitor(this._inputElement.nativeElement, this._renderer, false) .subscribe(focusOrigin => this._onInputFocusChange(focusOrigin)); } ngOnDestroy() { - this._focusOriginMonitor.stopMonitoring(this._inputElement.nativeElement); + this._focusMonitor.stopMonitoring(this._inputElement.nativeElement); } /** @@ -216,7 +215,7 @@ export class MdSlideToggle extends _MdSlideToggleMixinBase implements OnDestroy, /** Focuses the slide-toggle. */ focus() { - this._focusOriginMonitor.focusVia(this._inputElement.nativeElement, 'keyboard'); + this._focusMonitor.focusVia(this._inputElement.nativeElement, 'keyboard'); } /** Toggles the checked state of the slide-toggle. */ diff --git a/src/lib/slider/public_api.ts b/src/lib/slider/public_api.ts index f7cc6fb8acd1..4af4cafbdd60 100644 --- a/src/lib/slider/public_api.ts +++ b/src/lib/slider/public_api.ts @@ -9,13 +9,14 @@ import {NgModule} from '@angular/core'; import {HAMMER_GESTURE_CONFIG} from '@angular/platform-browser'; import {CommonModule} from '@angular/common'; -import {MdCommonModule, GestureConfig, StyleModule} from '@angular/material/core'; +import {MdCommonModule, GestureConfig} from '@angular/material/core'; import {MdSlider} from './slider'; import {BidiModule} from '@angular/material/core'; +import {A11yModule} from '@angular/cdk/a11y'; @NgModule({ - imports: [CommonModule, MdCommonModule, StyleModule, BidiModule], + imports: [CommonModule, MdCommonModule, BidiModule, A11yModule], exports: [MdSlider, MdCommonModule], declarations: [MdSlider], providers: [{provide: HAMMER_GESTURE_CONFIG, useClass: GestureConfig}] diff --git a/src/lib/slider/slider.ts b/src/lib/slider/slider.ts index a564ce51d447..0f78a906429d 100644 --- a/src/lib/slider/slider.ts +++ b/src/lib/slider/slider.ts @@ -38,12 +38,11 @@ import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms'; import { CanColor, CanDisable, - FocusOrigin, - FocusOriginMonitor, HammerInput, mixinColor, mixinDisabled, } from '@angular/material/core'; +import {FocusOrigin, FocusMonitor} from '@angular/cdk/a11y'; import {Subscription} from 'rxjs/Subscription'; /** @@ -415,14 +414,14 @@ export class MdSlider extends _MdSliderMixinBase constructor(renderer: Renderer2, elementRef: ElementRef, - private _focusOriginMonitor: FocusOriginMonitor, + private _focusMonitor: FocusMonitor, private _changeDetectorRef: ChangeDetectorRef, @Optional() private _dir: Directionality) { super(renderer, elementRef); } ngOnInit() { - this._focusOriginMonitor + this._focusMonitor .monitor(this._elementRef.nativeElement, this._renderer, true) .subscribe((origin: FocusOrigin) => { this._isActive = !!origin && origin !== 'keyboard'; @@ -436,7 +435,7 @@ export class MdSlider extends _MdSliderMixinBase } ngOnDestroy() { - this._focusOriginMonitor.stopMonitoring(this._elementRef.nativeElement); + this._focusMonitor.stopMonitoring(this._elementRef.nativeElement); this._dirChangeSubscription.unsubscribe(); }