skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: move away from deprecated apis (#3836)

Browse Source 
Moves away from the APIs that were deprecated in Angular 4. They include:
* Switching from using `OpaqueToken` to `InjectionToken`.
* Moving from `Renderer` to `Renderer2`.
* Changing the `Injector.get(thing: any)` usages to use the new signature `Injector.get<T>(thing: T)`.
This commit is contained in:
Kristiyan Kostadinov
2017-04-28 22:58:21 +02:00
committed by mmalerba
parent 16f5c30d75
commit 29e503a0f1
42 changed files with 263 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/demo-app/style/style-demo.ts
+2 -2
View File
@@ -1,4 +1,4 @@
import {Component, Renderer} from '@angular/core';
import {Component, Renderer2} from '@angular/core';
import {FocusOriginMonitor} from '@angular/material';
@@ -9,5 +9,5 @@ import {FocusOriginMonitor} from '@angular/material';
styleUrls: ['style-demo.css'],
})
export class StyleDemo {
constructor(public renderer: Renderer, public fom: FocusOriginMonitor) {}
constructor(public renderer: Renderer2, public fom: FocusOriginMonitor) {}
}
src/lib/button-toggle/button-toggle.spec.ts
+32 -29
View File
@@ -5,7 +5,7 @@ import {
ComponentFixture,
TestBed,
} from '@angular/core/testing';
import {NgControl, FormsModule, ReactiveFormsModule, FormControl} from '@angular/forms';
import {NgModel, FormsModule, ReactiveFormsModule, FormControl} from '@angular/forms';
import {Component, DebugElement} from '@angular/core';
import {By} from '@angular/platform-browser';
import {
@@ -56,7 +56,7 @@ describe('MdButtonToggle', () => {
groupDebugElement = fixture.debugElement.query(By.directive(MdButtonToggleGroup));
groupNativeElement = groupDebugElement.nativeElement;
groupInstance = groupDebugElement.injector.get(MdButtonToggleGroup);
groupInstance = groupDebugElement.injector.get<MdButtonToggleGroup>(MdButtonToggleGroup);
buttonToggleDebugElements = fixture.debugElement.queryAll(By.directive(MdButtonToggle));
@@ -215,7 +215,7 @@ describe('MdButtonToggle', () => {
let groupInstance: MdButtonToggleGroup;
let buttonToggleInstances: MdButtonToggle[];
let testComponent: ButtonToggleGroupWithNgModel;
let groupNgControl: NgControl;
let groupNgModel: NgModel;
beforeEach(async(() => {
fixture = TestBed.createComponent(ButtonToggleGroupWithNgModel);
@@ -225,8 +225,8 @@ describe('MdButtonToggle', () => {
groupDebugElement = fixture.debugElement.query(By.directive(MdButtonToggleGroup));
groupNativeElement = groupDebugElement.nativeElement;
groupInstance = groupDebugElement.injector.get(MdButtonToggleGroup);
groupNgControl = groupDebugElement.injector.get(NgControl);
groupInstance = groupDebugElement.injector.get<MdButtonToggleGroup>(MdButtonToggleGroup);
groupNgModel = groupDebugElement.injector.get<NgModel>(NgModel);
buttonToggleDebugElements = fixture.debugElement.queryAll(By.directive(MdButtonToggle));
buttonToggleNativeElements =
@@ -259,28 +259,29 @@ describe('MdButtonToggle', () => {
expect(groupInstance.selected.value).toBe(groupInstance.value);
});
it('should have the correct ngControl state initially and after interaction', fakeAsync(() => {
expect(groupNgControl.valid).toBe(true);
expect(groupNgControl.pristine).toBe(true);
expect(groupNgControl.touched).toBe(false);
it('should have the correct FormControl state initially and after interaction',
fakeAsync(() => {
expect(groupNgModel.valid).toBe(true);
expect(groupNgModel.pristine).toBe(true);
expect(groupNgModel.touched).toBe(false);
buttonToggleInstances[1].checked = true;
fixture.detectChanges();
tick();
buttonToggleInstances[1].checked = true;
fixture.detectChanges();
tick();
expect(groupNgControl.valid).toBe(true);
expect(groupNgControl.pristine).toBe(false);
expect(groupNgControl.touched).toBe(false);
expect(groupNgModel.valid).toBe(true);
expect(groupNgModel.pristine).toBe(false);
expect(groupNgModel.touched).toBe(false);
let nativeRadioLabel = buttonToggleDebugElements[2].query(By.css('label')).nativeElement;
nativeRadioLabel.click();
fixture.detectChanges();
tick();
let nativeRadioLabel = buttonToggleDebugElements[2].query(By.css('label')).nativeElement;
nativeRadioLabel.click();
fixture.detectChanges();
tick();
expect(groupNgControl.valid).toBe(true);
expect(groupNgControl.pristine).toBe(false);
expect(groupNgControl.touched).toBe(true);
}));
expect(groupNgModel.valid).toBe(true);
expect(groupNgModel.pristine).toBe(false);
expect(groupNgModel.touched).toBe(true);
}));
it('should update the ngModel value when selecting a button toggle', fakeAsync(() => {
buttonToggleInstances[1].checked = true;
@@ -301,7 +302,7 @@ describe('MdButtonToggle', () => {
let groupInstance: MdButtonToggleGroup;
let buttonToggleInstances: MdButtonToggle[];
let testComponent: ButtonToggleGroupWithNgModel;
let groupNgControl: NgControl;
let groupNgModel: NgModel;
beforeEach(async(() => {
fixture = TestBed.createComponent(ButtonToggleGroupWithNgModel);
@@ -310,8 +311,8 @@ describe('MdButtonToggle', () => {
groupDebugElement = fixture.debugElement.query(By.directive(MdButtonToggleGroup));
groupNativeElement = groupDebugElement.nativeElement;
groupInstance = groupDebugElement.injector.get(MdButtonToggleGroup);
groupNgControl = groupDebugElement.injector.get(NgControl);
groupInstance = groupDebugElement.injector.get<MdButtonToggleGroup>(MdButtonToggleGroup);
groupNgModel = groupDebugElement.injector.get<NgModel>(NgModel);
buttonToggleDebugElements = fixture.debugElement.queryAll(By.directive(MdButtonToggle));
buttonToggleNativeElements =
@@ -341,7 +342,8 @@ describe('MdButtonToggle', () => {
let fixture = TestBed.createComponent(ButtonToggleGroupWithInitialValue);
let testComponent = fixture.debugElement.componentInstance;
let groupDebugElement = fixture.debugElement.query(By.directive(MdButtonToggleGroup));
let groupInstance: MdButtonToggleGroup = groupDebugElement.injector.get(MdButtonToggleGroup);
let groupInstance: MdButtonToggleGroup = groupDebugElement.injector
.get<MdButtonToggleGroup>(MdButtonToggleGroup);
fixture.detectChanges();
@@ -376,7 +378,8 @@ describe('MdButtonToggle', () => {
groupDebugElement = fixture.debugElement.query(By.directive(MdButtonToggleGroupMultiple));
groupNativeElement = groupDebugElement.nativeElement;
groupInstance = groupDebugElement.injector.get(MdButtonToggleGroupMultiple);
groupInstance = groupDebugElement.injector.get<MdButtonToggleGroupMultiple>(
MdButtonToggleGroupMultiple);
buttonToggleDebugElements = fixture.debugElement.queryAll(By.directive(MdButtonToggle));
buttonToggleNativeElements = buttonToggleDebugElements
@@ -479,7 +482,7 @@ describe('MdButtonToggle', () => {
testComponent = fixture.debugElement.componentInstance;
groupDebugElement = fixture.debugElement.query(By.directive(MdButtonToggleGroup));
groupInstance = groupDebugElement.injector.get(MdButtonToggleGroup);
groupInstance = groupDebugElement.injector.get<MdButtonToggleGroup>(MdButtonToggleGroup);
}));
it('should toggle the disabled state', () => {
src/lib/button-toggle/button-toggle.ts
+3 -3
View File
@@ -3,7 +3,7 @@ import {
ContentChildren,
Directive,
ElementRef,
Renderer,
Renderer2,
EventEmitter,
HostBinding,
Input,
@@ -374,7 +374,7 @@ export class MdButtonToggle implements OnInit {
constructor(@Optional() toggleGroup: MdButtonToggleGroup,
@Optional() toggleGroupMultiple: MdButtonToggleGroupMultiple,
private _buttonToggleDispatcher: UniqueSelectionDispatcher,
private _renderer: Renderer,
private _renderer: Renderer2,
private _elementRef: ElementRef,
private _focusOriginMonitor: FocusOriginMonitor) {
this.buttonToggleGroup = toggleGroup;
@@ -412,7 +412,7 @@ export class MdButtonToggle implements OnInit {
/** Focuses the button. */
focus() {
this._renderer.invokeElementMethod(this._inputElement.nativeElement, 'focus');
this._inputElement.nativeElement.focus();
}
/** Toggle the state of the current button toggle. */
src/lib/button/button.ts
+9 -5
View File
@@ -6,7 +6,7 @@ import {
HostBinding,
Input,
OnDestroy,
Renderer,
Renderer2,
ViewEncapsulation
} from '@angular/core';
import {coerceBooleanProperty, FocusOriginMonitor} from '../core';
@@ -120,7 +120,7 @@ export class MdButton extends _MdButtonMixinBase implements OnDestroy, CanDisabl
get disableRipple() { return this._disableRipple; }
set disableRipple(v) { this._disableRipple = coerceBooleanProperty(v); }
constructor(private _elementRef: ElementRef, private _renderer: Renderer,
constructor(private _elementRef: ElementRef, private _renderer: Renderer2,
private _focusOriginMonitor: FocusOriginMonitor) {
super();
this._focusOriginMonitor.monitor(this._elementRef.nativeElement, this._renderer, true);
@@ -143,13 +143,17 @@ export class MdButton extends _MdButtonMixinBase implements OnDestroy, CanDisabl
_setElementColor(color: string, isAdd: boolean) {
if (color != null && color != '') {
this._renderer.setElementClass(this._getHostElement(), `mat-${color}`, isAdd);
if (isAdd) {
this._renderer.addClass(this._getHostElement(), `mat-${color}`);
} else {
this._renderer.removeClass(this._getHostElement(), `mat-${color}`);
}
}
}
/** Focuses the button. */
focus(): void {
this._renderer.invokeElementMethod(this._getHostElement(), 'focus');
this._getHostElement().focus();
}
_getHostElement() {
@@ -191,7 +195,7 @@ export class MdButton extends _MdButtonMixinBase implements OnDestroy, CanDisabl
encapsulation: ViewEncapsulation.None
})
export class MdAnchor extends MdButton {
constructor(elementRef: ElementRef, renderer: Renderer, focusOriginMonitor: FocusOriginMonitor) {
constructor(elementRef: ElementRef, renderer: Renderer2, focusOriginMonitor: FocusOriginMonitor) {
super(elementRef, renderer, focusOriginMonitor);
}
src/lib/checkbox/checkbox.spec.ts
+5 -5
View File
@@ -6,7 +6,7 @@ import {
TestBed,
tick,
} from '@angular/core/testing';
import {NgControl, FormsModule, ReactiveFormsModule, FormControl} from '@angular/forms';
import {NgModel, FormsModule, ReactiveFormsModule, FormControl} from '@angular/forms';
import {Component, DebugElement} from '@angular/core';
import {By} from '@angular/platform-browser';
import {MdCheckbox, MdCheckboxChange, MdCheckboxModule} from './index';
@@ -692,11 +692,11 @@ describe('MdCheckbox', () => {
flushMicrotasks();
let checkboxElement = fixture.debugElement.query(By.directive(MdCheckbox));
let ngControl = <NgControl> checkboxElement.injector.get(NgControl);
let ngModel = checkboxElement.injector.get<NgModel>(NgModel);
expect(ngControl.valid).toBe(true);
expect(ngControl.pristine).toBe(true);
expect(ngControl.touched).toBe(false);
expect(ngModel.valid).toBe(true);
expect(ngModel.pristine).toBe(true);
expect(ngModel.touched).toBe(false);
// TODO(jelbourn): test that `touched` and `pristine` state are modified appropriately.
// This is currently blocked on issues with async() and fakeAsync().
src/lib/checkbox/checkbox.ts
+9 -5
View File
@@ -9,7 +9,7 @@ import {
Input,
OnDestroy,
Output,
Renderer,
Renderer2,
ViewChild,
ViewEncapsulation,
} from '@angular/core';
@@ -190,7 +190,7 @@ export class MdCheckbox extends _MdCheckboxMixinBase
/** Reference to the focused state ripple. */
private _focusRipple: RippleRef;
constructor(private _renderer: Renderer,
constructor(private _renderer: Renderer2,
private _elementRef: ElementRef,
private _changeDetectorRef: ChangeDetectorRef,
private _focusOriginMonitor: FocusOriginMonitor) {
@@ -260,7 +260,11 @@ export class MdCheckbox extends _MdCheckboxMixinBase
_setElementColor(color: string, isAdd: boolean) {
if (color != null && color != '') {
this._renderer.setElementClass(this._elementRef.nativeElement, `mat-${color}`, isAdd);
if (isAdd) {
this._renderer.addClass(this._elementRef.nativeElement, `mat-${color}`);
} else {
this._renderer.removeClass(this._elementRef.nativeElement, `mat-${color}`);
}
}
}
@@ -312,7 +316,7 @@ export class MdCheckbox extends _MdCheckboxMixinBase
return;
}
if (this._currentAnimationClass.length > 0) {
renderer.setElementClass(elementRef.nativeElement, this._currentAnimationClass, false);
renderer.removeClass(elementRef.nativeElement, this._currentAnimationClass);
}
this._currentAnimationClass = this._getAnimationClassForCheckStateTransition(
@@ -320,7 +324,7 @@ export class MdCheckbox extends _MdCheckboxMixinBase
this._currentCheckState = newState;
if (this._currentAnimationClass.length > 0) {
renderer.setElementClass(elementRef.nativeElement, this._currentAnimationClass, true);
renderer.addClass(elementRef.nativeElement, this._currentAnimationClass);
}
}
src/lib/chips/chip.ts
+10 -6
View File
@@ -6,7 +6,7 @@ import {
OnDestroy,
OnInit,
Output,
Renderer
Renderer2,
} from '@angular/core';
import {Focusable} from '../core/a11y/focus-key-manager';
@@ -58,7 +58,7 @@ export class MdChip implements Focusable, OnInit, OnDestroy {
/** Emitted when the chip is destroyed. */
@Output() destroy = new EventEmitter<MdChipEvent>();
constructor(protected _renderer: Renderer, protected _elementRef: ElementRef) { }
constructor(protected _renderer: Renderer2, protected _elementRef: ElementRef) { }
ngOnInit(): void {
this._addDefaultCSSClass();
@@ -119,7 +119,7 @@ export class MdChip implements Focusable, OnInit, OnDestroy {
/** Allows for programmatic focusing of the chip. */
focus(): void {
this._renderer.invokeElementMethod(this._elementRef.nativeElement, 'focus');
this._elementRef.nativeElement.focus();
this.onFocus.emit({chip: this});
}
@@ -139,12 +139,12 @@ export class MdChip implements Focusable, OnInit, OnDestroy {
let el: HTMLElement = this._elementRef.nativeElement;
// Always add the `mat-chip` class
el.classList.add('mat-chip');
this._renderer.addClass(el, 'mat-chip');
// If we are a basic chip, also add the `mat-basic-chip` class for :not() targeting
if (el.nodeName.toLowerCase() == 'mat-basic-chip' || el.hasAttribute('mat-basic-chip') ||
el.nodeName.toLowerCase() == 'md-basic-chip' || el.hasAttribute('md-basic-chip')) {
el.classList.add('mat-basic-chip');
this._renderer.addClass(el, 'mat-basic-chip');
}
}
@@ -158,7 +158,11 @@ export class MdChip implements Focusable, OnInit, OnDestroy {
/** Sets the mat-color on the native element. */
private _setElementColor(color: string, isAdd: boolean) {
if (color != null && color != '') {
this._renderer.setElementClass(this._elementRef.nativeElement, `mat-${color}`, isAdd);
if (isAdd) {
this._renderer.addClass(this._elementRef.nativeElement, `mat-${color}`);
} else {
this._renderer.removeClass(this._elementRef.nativeElement, `mat-${color}`);
}
}
}
}
src/lib/core/a11y/live-announcer.ts
+2 -2
View File
@@ -1,12 +1,12 @@
import {
Injectable,
OpaqueToken,
InjectionToken,
Optional,
Inject,
SkipSelf,
} from '@angular/core';
export const LIVE_ANNOUNCER_ELEMENT_TOKEN = new OpaqueToken('liveAnnouncerElement');
export const LIVE_ANNOUNCER_ELEMENT_TOKEN = new InjectionToken<HTMLElement>('liveAnnouncerElement');
/** Possible politeness levels. */
export type AriaLivePoliteness = 'off' | 'polite' | 'assertive';
src/lib/core/compatibility/compatibility.ts
+1 -2
View File
@@ -2,7 +2,6 @@ import {
NgModule,
ModuleWithProviders,
Directive,
OpaqueToken,
Inject,
Optional,
isDevMode,
@@ -12,7 +11,7 @@ import {
import {DOCUMENT} from '@angular/platform-browser';
import {MdError} from '../errors/error';
export const MATERIAL_COMPATIBILITY_MODE = new OpaqueToken('md-compatibility-mode');
export const MATERIAL_COMPATIBILITY_MODE = new InjectionToken<boolean>('md-compatibility-mode');
/** Injection token that configures whether the Material sanity checks are enabled. */
export const MATERIAL_SANITY_CHECKS = new InjectionToken<boolean>('md-sanity-checks');
src/lib/core/line/line.ts
+12 -8
View File
@@ -1,9 +1,9 @@
import {
NgModule,
Directive,
Renderer,
ElementRef,
QueryList
NgModule,
Directive,
Renderer2,
ElementRef,
QueryList,
} from '@angular/core';
import {MdCommonModule} from '../common-behaviors/common-module';
@@ -26,7 +26,7 @@ export class MdLine {}
* @docs-private
*/
export class MdLineSetter {
constructor(private _lines: QueryList<MdLine>, private _renderer: Renderer,
constructor(private _lines: QueryList<MdLine>, private _renderer: Renderer2,
private _element: ElementRef) {
this._setLineClass(this._lines.length);
@@ -50,8 +50,12 @@ export class MdLineSetter {
this._setClass('mat-multi-line', false);
}
private _setClass(className: string, bool: boolean): void {
this._renderer.setElementClass(this._element.nativeElement, className, bool);
private _setClass(className: string, isAdd: boolean): void {
if (isAdd) {
this._renderer.addClass(this._element.nativeElement, className);
} else {
this._renderer.removeClass(this._element.nativeElement, className);
}
}
}
src/lib/core/overlay/scroll/scrollable.ts
+2 -2
View File
@@ -1,4 +1,4 @@
import {Directive, ElementRef, OnInit, OnDestroy, NgZone, Renderer} from '@angular/core';
import {Directive, ElementRef, OnInit, OnDestroy, NgZone, Renderer2} from '@angular/core';
import {Observable} from 'rxjs/Observable';
import {Subject} from 'rxjs/Subject';
import {ScrollDispatcher} from './scroll-dispatcher';
@@ -20,7 +20,7 @@ export class Scrollable implements OnInit, OnDestroy {
constructor(private _elementRef: ElementRef,
private _scroll: ScrollDispatcher,
private _ngZone: NgZone,
private _renderer: Renderer) {}
private _renderer: Renderer2) {}
ngOnInit() {
this._scrollListener = this._ngZone.runOutsideAngular(() => {
src/lib/core/portal/portal.spec.ts
+1 -1
View File
@@ -382,7 +382,7 @@ class ChocolateInjector {
constructor(public parentInjector: Injector) { }
get(token: any) {
return token === Chocolate ? new Chocolate() : this.parentInjector.get(token);
return token === Chocolate ? new Chocolate() : this.parentInjector.get<any>(token);
}
}
src/lib/core/ripple/ripple.ts
+5 -4
View File
@@ -7,21 +7,22 @@ import {
OnChanges,
SimpleChanges,
OnDestroy,
OpaqueToken,
InjectionToken,
Optional,
} from '@angular/core';
import {RippleConfig, RippleRenderer} from './ripple-renderer';
import {ViewportRuler} from '../overlay/position/viewport-ruler';
import {RippleRef} from './ripple-ref';
/** OpaqueToken that can be used to specify the global ripple options. */
export const MD_RIPPLE_GLOBAL_OPTIONS = new OpaqueToken('md-ripple-global-options');
export interface RippleGlobalOptions {
disabled?: boolean;
baseSpeedFactor?: number;
}
/** Injection token that can be used to specify the global ripple options. */
export const MD_RIPPLE_GLOBAL_OPTIONS =
new InjectionToken<RippleGlobalOptions>('md-ripple-global-options');
@Directive({
selector: '[md-ripple], [mat-ripple], [mdRipple], [matRipple]',
exportAs: 'mdRipple',
src/lib/core/selection/pseudo-checkbox/pseudo-checkbox.ts
+4 -4
View File
@@ -3,7 +3,7 @@ import {
ViewEncapsulation,
Input,
ElementRef,
Renderer,
Renderer2,
} from '@angular/core';
export type MdPseudoCheckboxState = 'unchecked' | 'checked' | 'indeterminate';
@@ -46,15 +46,15 @@ export class MdPseudoCheckbox {
if (value) {
let nativeElement = this._elementRef.nativeElement;
this._renderer.setElementClass(nativeElement, `mat-${this.color}`, false);
this._renderer.setElementClass(nativeElement, `mat-${value}`, true);
this._renderer.removeClass(nativeElement, `mat-${this.color}`);
this._renderer.addClass(nativeElement, `mat-${value}`);
this._color = value;
}
}
private _color: string;
constructor(private _elementRef: ElementRef, private _renderer: Renderer) {
constructor(private _elementRef: ElementRef, private _renderer: Renderer2) {
this.color = 'accent';
}
}
src/lib/core/style/focus-origin-monitor.spec.ts
+3 -3
View File
@@ -1,5 +1,5 @@
import {async, ComponentFixture, inject, TestBed} from '@angular/core/testing';
import {Component, Renderer} from '@angular/core';
import {Component, Renderer2} from '@angular/core';
import {StyleModule} from './index';
import {By} from '@angular/platform-browser';
import {TAB} from '../keyboard/keycodes';
@@ -12,7 +12,7 @@ import {
describe('FocusOriginMonitor', () => {
let fixture: ComponentFixture<PlainButton>;
let buttonElement: HTMLElement;
let buttonRenderer: Renderer;
let buttonRenderer: Renderer2;
let focusOriginMonitor: FocusOriginMonitor;
let changeHandler: (origin: FocusOrigin) => void;
@@ -456,7 +456,7 @@ describe('cdkMonitorFocus', () => {
template: `<button>focus me!</button>`
})
class PlainButton {
constructor(public renderer: Renderer) {}
constructor(public renderer: Renderer2) {}
}
src/lib/core/style/focus-origin-monitor.ts
+22 -16
View File
@@ -7,8 +7,8 @@ import {
OnDestroy,
Optional,
Output,
Renderer,
SkipSelf
Renderer2,
SkipSelf,
} from '@angular/core';
import {Observable} from 'rxjs/Observable';
import {Subject} from 'rxjs/Subject';
@@ -25,7 +25,7 @@ export type FocusOrigin = 'touch' | 'mouse' | 'keyboard' | 'program';
type MonitoredElementInfo = {
unlisten: Function,
checkChildren: boolean,
renderer: Renderer,
renderer: Renderer2,
subject: Subject<FocusOrigin>
};
@@ -63,7 +63,9 @@ export class FocusOriginMonitor {
* @returns An observable that emits when the focus state of the element changes.
* When the element is blurred, null will be emitted.
*/
monitor(element: Element, renderer: Renderer, checkChildren: boolean): Observable<FocusOrigin> {
monitor(element: HTMLElement, renderer: Renderer2, checkChildren: boolean):
Observable<FocusOrigin> {
// Check if we're already monitoring this element.
if (this._elementInfo.has(element)) {
let info = this._elementInfo.get(element);
@@ -101,7 +103,7 @@ export class FocusOriginMonitor {
* Stops monitoring an element and removes all focus classes.
* @param element The element to stop monitoring.
*/
stopMonitoring(element: Element): void {
stopMonitoring(element: HTMLElement): void {
let elementInfo = this._elementInfo.get(element);
if (elementInfo) {
@@ -119,9 +121,9 @@ export class FocusOriginMonitor {
* @param renderer The renderer to use to invoke the focus method on the element.
* @param origin The focus origin.
*/
focusVia(element: Node, renderer: Renderer, origin: FocusOrigin): void {
focusVia(element: HTMLElement, renderer: Renderer2, origin: FocusOrigin): void {
this._setOriginForCurrentEventQueue(origin);
renderer.invokeElementMethod(element, 'focus');
element.focus();
}
/** Register necessary event listeners on the document and window. */
@@ -167,13 +169,17 @@ export class FocusOriginMonitor {
* @param element The element to update the classes on.
* @param origin The focus origin.
*/
private _setClasses(element: Element, origin: FocusOrigin): void {
private _setClasses(element: HTMLElement, origin: FocusOrigin): void {
let renderer = this._elementInfo.get(element).renderer;
renderer.setElementClass(element, 'cdk-focused', !!origin);
renderer.setElementClass(element, 'cdk-touch-focused', origin === 'touch');
renderer.setElementClass(element, 'cdk-keyboard-focused', origin === 'keyboard');
renderer.setElementClass(element, 'cdk-mouse-focused', origin === 'mouse');
renderer.setElementClass(element, 'cdk-program-focused', origin === 'program');
let toggleClass = (className: string, shouldSet: boolean) => {
shouldSet ? renderer.addClass(element, className) : renderer.removeClass(element, className);
};
toggleClass('cdk-focused', !!origin);
toggleClass('cdk-touch-focused', origin === 'touch');
toggleClass('cdk-keyboard-focused', origin === 'keyboard');
toggleClass('cdk-mouse-focused', origin === 'mouse');
toggleClass('cdk-program-focused', origin === 'program');
}
/**
@@ -218,7 +224,7 @@ export class FocusOriginMonitor {
* @param event The focus event.
* @param element The monitored element.
*/
private _onFocus(event: FocusEvent, element: Element) {
private _onFocus(event: FocusEvent, element: HTMLElement) {
// NOTE(mmalerba): We currently set the classes based on the focus origin of the most recent
// focus event affecting the monitored element. If we want to use the origin of the first event
// instead we should check for the cdk-focused class here and return if the element already has
@@ -257,7 +263,7 @@ export class FocusOriginMonitor {
* @param event The blur event.
* @param element The monitored element.
*/
private _onBlur(event: FocusEvent, element: Element) {
private _onBlur(event: FocusEvent, element: HTMLElement) {
// If we are counting child-element-focus as focused, make sure that we aren't just blurring in
// order to focus another child of the monitored element.
if (this._elementInfo.get(element).checkChildren && event.relatedTarget instanceof Node &&
@@ -287,7 +293,7 @@ export class CdkMonitorFocus implements OnDestroy {
@Output() cdkFocusChange = new EventEmitter<FocusOrigin>();
constructor(private _elementRef: ElementRef, private _focusOriginMonitor: FocusOriginMonitor,
renderer: Renderer) {
renderer: Renderer2) {
this._focusOriginMonitor.monitor(
this._elementRef.nativeElement, renderer,
this._elementRef.nativeElement.hasAttribute('cdkMonitorSubtreeFocus'))
src/lib/dialog/dialog-container.ts
+3 -2
View File
@@ -3,7 +3,8 @@ import {
ComponentRef,
ViewChild,
ViewEncapsulation,
Renderer,
NgZone,
OnDestroy,
ElementRef,
EventEmitter,
Inject,
@@ -73,7 +74,7 @@ export class MdDialogContainer extends BasePortalHost {
_onAnimationStateChange = new EventEmitter<AnimationEvent>();
constructor(
private _renderer: Renderer,
private _ngZone: NgZone,
private _elementRef: ElementRef,
private _focusTrapFactory: FocusTrapFactory,
@Optional() @Inject(DOCUMENT) _document: any) {
src/lib/dialog/dialog-injector.ts
+3 -3
View File
@@ -1,7 +1,7 @@
import {Injector, OpaqueToken} from '@angular/core';
import {Injector, InjectionToken} from '@angular/core';
import {MdDialogRef} from './dialog-ref';
export const MD_DIALOG_DATA = new OpaqueToken('MdDialogData');
export const MD_DIALOG_DATA = new InjectionToken<any>('MdDialogData');
/** Custom injector type specifically for instantiating components with a dialog. */
export class DialogInjector implements Injector {
@@ -19,6 +19,6 @@ export class DialogInjector implements Injector {
return this._data;
}
return this._parentInjector.get(token, notFoundValue);
return this._parentInjector.get<any>(token, notFoundValue);
}
}
src/lib/dialog/dialog.spec.ts
+1 -1
View File
@@ -90,7 +90,7 @@ describe('MdDialog', () => {
let dialogInjector = dialogRef.componentInstance.dialogInjector;
expect(dialogRef.componentInstance.dialogRef).toBe(dialogRef);
expect(dialogInjector.get(DirectiveWithViewContainer)).toBeTruthy(
expect(dialogInjector.get<DirectiveWithViewContainer>(DirectiveWithViewContainer)).toBeTruthy(
'Expected the dialog component to be created with the injector from the viewContainerRef.'
);
});
src/lib/grid-list/grid-list.ts
+3 -3
View File
@@ -6,7 +6,7 @@ import {
Input,
ContentChildren,
QueryList,
Renderer,
Renderer2,
ElementRef,
Optional,
} from '@angular/core';
@@ -60,7 +60,7 @@ export class MdGridList implements OnInit, AfterContentChecked {
@ContentChildren(MdGridTile) _tiles: QueryList<MdGridTile>;
constructor(
private _renderer: Renderer,
private _renderer: Renderer2,
private _element: ElementRef,
@Optional() private _dir: Dir) {}
@@ -136,7 +136,7 @@ export class MdGridList implements OnInit, AfterContentChecked {
/** Sets style on the main grid-list element, given the style name and value. */
_setListStyle(style: [string, string]): void {
if (style) {
this._renderer.setElementStyle(this._element.nativeElement, style[0], style[1]);
this._renderer.setStyle(this._element.nativeElement, style[0], style[1]);
}
}
}
src/lib/grid-list/grid-tile.ts
+4 -4
View File
@@ -1,7 +1,7 @@
import {
Component,
ViewEncapsulation,
Renderer,
Renderer2,
ElementRef,
Input,
ContentChildren,
@@ -26,7 +26,7 @@ export class MdGridTile {
_rowspan: number = 1;
_colspan: number = 1;
constructor(private _renderer: Renderer, private _element: ElementRef) {}
constructor(private _renderer: Renderer2, private _element: ElementRef) {}
/** Amount of rows that the grid tile takes up. */
@Input()
@@ -43,7 +43,7 @@ export class MdGridTile {
* "Changed after checked" errors that would occur with HostBinding.
*/
_setStyle(property: string, value: string): void {
this._renderer.setElementStyle(this._element.nativeElement, property, value);
this._renderer.setStyle(this._element.nativeElement, property, value);
}
}
@@ -60,7 +60,7 @@ export class MdGridTileText implements AfterContentInit {
_lineSetter: MdLineSetter;
@ContentChildren(MdLine) _lines: QueryList<MdLine>;
constructor(private _renderer: Renderer, private _element: ElementRef) {}
constructor(private _renderer: Renderer2, private _element: ElementRef) {}
ngAfterContentInit() {
this._lineSetter = new MdLineSetter(this._lines, this._renderer, this._element);
src/lib/icon/icon.ts
+13 -9
View File
@@ -5,7 +5,7 @@ import {
Input,
OnChanges,
OnInit,
Renderer,
Renderer2,
SimpleChange,
ViewEncapsulation,
AfterViewChecked,
@@ -98,7 +98,7 @@ export class MdIcon implements OnChanges, OnInit, AfterViewChecked {
constructor(
private _elementRef: ElementRef,
private _renderer: Renderer,
private _renderer: Renderer2,
private _mdIconRegistry: MdIconRegistry) { }
_updateColor(newColor: string) {
@@ -109,7 +109,11 @@ export class MdIcon implements OnChanges, OnInit, AfterViewChecked {
_setElementColor(color: string, isAdd: boolean) {
if (color != null && color != '') {
this._renderer.setElementClass(this._elementRef.nativeElement, `mat-${color}`, isAdd);
if (isAdd) {
this._renderer.addClass(this._elementRef.nativeElement, `mat-${color}`);
} else {
this._renderer.removeClass(this._elementRef.nativeElement, `mat-${color}`);
}
}
}
@@ -177,7 +181,7 @@ export class MdIcon implements OnChanges, OnInit, AfterViewChecked {
const ariaLabel = this._getAriaLabel();
if (ariaLabel && ariaLabel !== this._previousAriaLabel) {
this._previousAriaLabel = ariaLabel;
this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-label', ariaLabel);
this._renderer.setAttribute(this._elementRef.nativeElement, 'aria-label', ariaLabel);
}
}
@@ -214,7 +218,7 @@ export class MdIcon implements OnChanges, OnInit, AfterViewChecked {
// We would use renderer.detachView(Array.from(layoutElement.childNodes)) here,
// but it fails in IE11: https://github.com/angular/angular/issues/6327
layoutElement.innerHTML = '';
this._renderer.projectNodes(layoutElement, [svg]);
this._renderer.appendChild(layoutElement, svg);
}
private _updateFontIconClasses() {
@@ -227,20 +231,20 @@ export class MdIcon implements OnChanges, OnInit, AfterViewChecked {
this._mdIconRegistry.getDefaultFontSetClass();
if (fontSetClass != this._previousFontSetClass) {
if (this._previousFontSetClass) {
this._renderer.setElementClass(elem, this._previousFontSetClass, false);
this._renderer.removeClass(elem, this._previousFontSetClass);
}
if (fontSetClass) {
this._renderer.setElementClass(elem, fontSetClass, true);
this._renderer.addClass(elem, fontSetClass);
}
this._previousFontSetClass = fontSetClass;
}
if (this.fontIcon != this._previousFontIconClass) {
if (this._previousFontIconClass) {
this._renderer.setElementClass(elem, this._previousFontIconClass, false);
this._renderer.removeClass(elem, this._previousFontIconClass);
}
if (this.fontIcon) {
this._renderer.setElementClass(elem, this.fontIcon, true);
this._renderer.addClass(elem, this.fontIcon);
}
this._previousFontIconClass = this.fontIcon;
}
src/lib/input/autosize.spec.ts
+1 -1
View File
@@ -25,7 +25,7 @@ describe('MdTextareaAutosize', () => {
textarea = fixture.nativeElement.querySelector('textarea');
autosize = fixture.debugElement.query(
By.directive(MdTextareaAutosize)).injector.get(MdTextareaAutosize);
By.directive(MdTextareaAutosize)).injector.get<MdTextareaAutosize>(MdTextareaAutosize);
});
it('should resize the textarea based on its content', () => {
src/lib/input/input-container.spec.ts
+1 -1
View File
@@ -203,7 +203,7 @@ describe('MdInputContainer', function () {
fixture.detectChanges();
let input = fixture.debugElement.query(By.directive(MdInputDirective))
.injector.get(MdInputDirective) as MdInputDirective;
.injector.get<MdInputDirective>(MdInputDirective);
expect(input.value).toBeFalsy();
src/lib/input/input-container.ts
+4 -4
View File
@@ -12,7 +12,7 @@ import {
Optional,
Output,
QueryList,
Renderer,
Renderer2,
Self,
ViewEncapsulation
} from '@angular/core';
@@ -172,7 +172,7 @@ export class MdInputDirective {
// input element. To ensure that bindings for `type` work, we need to sync the setter
// with the native property. Textarea elements don't support the type property or attribute.
if (!this._isTextarea() && getSupportedInputTypes().has(this._type)) {
this._renderer.setElementProperty(this._elementRef.nativeElement, 'type', this._type);
this._renderer.setProperty(this._elementRef.nativeElement, 'type', this._type);
}
}
@@ -206,7 +206,7 @@ export class MdInputDirective {
].filter(t => getSupportedInputTypes().has(t));
constructor(private _elementRef: ElementRef,
private _renderer: Renderer,
private _renderer: Renderer2,
@Optional() @Self() public _ngControl: NgControl) {
// Force setter to be called in case id was not specified.
@@ -214,7 +214,7 @@ export class MdInputDirective {
}
/** Focuses the input element. */
focus() { this._renderer.invokeElementMethod(this._elementRef.nativeElement, 'focus'); }
focus() { this._elementRef.nativeElement.focus(); }
_onFocus() { this.focused = true; }
src/lib/list/list.ts
+7 -4
View File
@@ -8,7 +8,7 @@ import {
ElementRef,
Input,
Optional,
Renderer,
Renderer2,
AfterContentInit,
} from '@angular/core';
import {MdLine, MdLineSetter, coerceBooleanProperty} from '../core';
@@ -142,11 +142,14 @@ export class MdListItem implements AfterContentInit {
@ContentChild(MdListAvatarCssMatStyler)
set _hasAvatar(avatar: MdListAvatarCssMatStyler) {
this._renderer.setElementClass(
this._element.nativeElement, 'mat-list-item-avatar', avatar != null);
if (avatar != null) {
this._renderer.addClass(this._element.nativeElement, 'mat-list-item-avatar');
} else {
this._renderer.removeClass(this._element.nativeElement, 'mat-list-item-avatar');
}
}
constructor(private _renderer: Renderer,
constructor(private _renderer: Renderer2,
private _element: ElementRef,
@Optional() private _list: MdList,
@Optional() navList: MdNavListCssMatStyler) {
src/lib/menu/menu-item.ts
+3 -3
View File
@@ -1,4 +1,4 @@
import {Component, ElementRef, Input, Renderer} from '@angular/core';
import {Component, ElementRef, Input} from '@angular/core';
import {Focusable} from '../core/a11y/focus-key-manager';
import {coerceBooleanProperty} from '../core/coercion/boolean-property';
@@ -24,11 +24,11 @@ export class MdMenuItem implements Focusable {
/** Whether the menu item is disabled */
private _disabled: boolean = false;
constructor(private _renderer: Renderer, private _elementRef: ElementRef) {}
constructor(private _elementRef: ElementRef) {}
/** Focuses the menu item. */
focus(): void {
this._renderer.invokeElementMethod(this._getHostElement(), 'focus');
this._getHostElement().focus();
}
/** Whether the menu item is disabled. */
src/lib/menu/menu-trigger.ts
+2 -4
View File
@@ -7,7 +7,6 @@ import {
OnDestroy,
Optional,
Output,
Renderer,
ViewContainerRef,
} from '@angular/core';
import {MdMenuPanel} from './menu-panel';
@@ -79,8 +78,7 @@ export class MdMenuTrigger implements AfterViewInit, OnDestroy {
@Output() onMenuClose = new EventEmitter<void>();
constructor(private _overlay: Overlay, private _element: ElementRef,
private _viewContainerRef: ViewContainerRef, private _renderer: Renderer,
@Optional() private _dir: Dir) {}
private _viewContainerRef: ViewContainerRef, @Optional() private _dir: Dir) { }
ngAfterViewInit() {
this._checkMenu();
@@ -128,7 +126,7 @@ export class MdMenuTrigger implements AfterViewInit, OnDestroy {
/** Focuses the menu trigger. */
focus() {
this._renderer.invokeElementMethod(this._element.nativeElement, 'focus');
this._element.nativeElement.focus();
}
/** The text direction of the containing app. */
src/lib/radio/radio.spec.ts
+15 -15
View File
@@ -1,5 +1,5 @@
import {async, ComponentFixture, TestBed, fakeAsync, tick} from '@angular/core/testing';
import {NgControl, FormsModule, ReactiveFormsModule, FormControl} from '@angular/forms';
import {NgModel, FormsModule, ReactiveFormsModule, FormControl} from '@angular/forms';
import {Component, DebugElement} from '@angular/core';
import {By} from '@angular/platform-browser';
import {MdRadioGroup, MdRadioButton, MdRadioChange, MdRadioModule} from './index';
@@ -48,7 +48,7 @@ describe('MdRadio', () => {
groupDebugElement = fixture.debugElement.query(By.directive(MdRadioGroup));
groupNativeElement = groupDebugElement.nativeElement;
groupInstance = groupDebugElement.injector.get(MdRadioGroup);
groupInstance = groupDebugElement.injector.get<MdRadioGroup>(MdRadioGroup);
radioDebugElements = fixture.debugElement.queryAll(By.directive(MdRadioButton));
radioNativeElements = radioDebugElements.map(debugEl => debugEl.nativeElement);
@@ -344,7 +344,7 @@ describe('MdRadio', () => {
let groupInstance: MdRadioGroup;
let radioInstances: MdRadioButton[];
let testComponent: RadioGroupWithNgModel;
let groupNgControl: NgControl;
let groupNgModel: NgModel;
beforeEach(() => {
fixture = TestBed.createComponent(RadioGroupWithNgModel);
@@ -354,8 +354,8 @@ describe('MdRadio', () => {
groupDebugElement = fixture.debugElement.query(By.directive(MdRadioGroup));
groupNativeElement = groupDebugElement.nativeElement;
groupInstance = groupDebugElement.injector.get(MdRadioGroup);
groupNgControl = groupDebugElement.injector.get(NgControl);
groupInstance = groupDebugElement.injector.get<MdRadioGroup>(MdRadioGroup);
groupNgModel = groupDebugElement.injector.get<NgModel>(NgModel);
radioDebugElements = fixture.debugElement.queryAll(By.directive(MdRadioButton));
radioInstances = radioDebugElements.map(debugEl => debugEl.componentInstance);
@@ -392,27 +392,27 @@ describe('MdRadio', () => {
it('should have the correct control state initially and after interaction', () => {
// The control should start off valid, pristine, and untouched.
expect(groupNgControl.valid).toBe(true);
expect(groupNgControl.pristine).toBe(true);
expect(groupNgControl.touched).toBe(false);
expect(groupNgModel.valid).toBe(true);
expect(groupNgModel.pristine).toBe(true);
expect(groupNgModel.touched).toBe(false);
// After changing the value programmatically, the control should stay pristine
// but remain untouched.
radioInstances[1].checked = true;
fixture.detectChanges();
expect(groupNgControl.valid).toBe(true);
expect(groupNgControl.pristine).toBe(true);
expect(groupNgControl.touched).toBe(false);
expect(groupNgModel.valid).toBe(true);
expect(groupNgModel.pristine).toBe(true);
expect(groupNgModel.touched).toBe(false);
// After a user interaction occurs (such as a click), the control should become dirty and
// now also be touched.
radioLabelElements[2].click();
fixture.detectChanges();
expect(groupNgControl.valid).toBe(true);
expect(groupNgControl.pristine).toBe(false);
expect(groupNgControl.touched).toBe(true);
expect(groupNgModel.valid).toBe(true);
expect(groupNgModel.pristine).toBe(false);
expect(groupNgModel.touched).toBe(true);
});
it('should write to the radio button based on ngModel', fakeAsync(() => {
@@ -456,7 +456,7 @@ describe('MdRadio', () => {
testComponent = fixture.debugElement.componentInstance;
groupDebugElement = fixture.debugElement.query(By.directive(MdRadioGroup));
groupInstance = groupDebugElement.injector.get(MdRadioGroup);
groupInstance = groupDebugElement.injector.get<MdRadioGroup>(MdRadioGroup);
});
it('should toggle the disabled state', () => {
src/lib/radio/radio.ts
+2 -2
View File
@@ -4,7 +4,7 @@ import {
ContentChildren,
Directive,
ElementRef,
Renderer,
Renderer2,
EventEmitter,
Input,
OnInit,
@@ -407,7 +407,7 @@ export class MdRadioButton implements OnInit, AfterViewInit, OnDestroy {
constructor(@Optional() radioGroup: MdRadioGroup,
private _elementRef: ElementRef,
private _renderer: Renderer,
private _renderer: Renderer2,
private _focusOriginMonitor: FocusOriginMonitor,
private _radioDispatcher: UniqueSelectionDispatcher) {
// Assertions. Ideally these should be stripped out by the compiler.
src/lib/sidenav/sidenav.ts
+11 -11
View File
@@ -9,7 +9,7 @@ import {
QueryList,
ChangeDetectionStrategy,
EventEmitter,
Renderer,
Renderer2,
ViewEncapsulation,
NgZone,
OnDestroy,
@@ -128,11 +128,7 @@ export class MdSidenav implements AfterContentInit, OnDestroy {
* @param _elementRef The DOM element reference. Used for transition and width calculation.
* If not available we do not hook on transitions.
*/
constructor(
private _elementRef: ElementRef,
private _renderer: Renderer,
private _focusTrapFactory: FocusTrapFactory) {
constructor(private _elementRef: ElementRef, private _focusTrapFactory: FocusTrapFactory) {
this.onOpen.subscribe(() => {
this._elementFocusedBeforeSidenavWasOpened = document.activeElement as HTMLElement;
@@ -143,9 +139,9 @@ export class MdSidenav implements AfterContentInit, OnDestroy {
this.onClose.subscribe(() => {
if (this._elementFocusedBeforeSidenavWasOpened instanceof HTMLElement) {
this._renderer.invokeElementMethod(this._elementFocusedBeforeSidenavWasOpened, 'focus');
this._elementFocusedBeforeSidenavWasOpened.focus();
} else {
this._renderer.invokeElementMethod(this._elementRef.nativeElement, 'blur');
this._elementRef.nativeElement.blur();
}
this._elementFocusedBeforeSidenavWasOpened = null;
@@ -350,7 +346,7 @@ export class MdSidenavContainer implements AfterContentInit {
_enableTransitions = false;
constructor(@Optional() private _dir: Dir, private _element: ElementRef,
private _renderer: Renderer, private _ngZone: NgZone) {
private _renderer: Renderer2, private _ngZone: NgZone) {
// If a `Dir` directive exists up the tree, listen direction changes and update the left/right
// properties to point to the proper start/end.
if (_dir != null) {
@@ -407,8 +403,12 @@ export class MdSidenavContainer implements AfterContentInit {
}
/** Toggles the 'mat-sidenav-opened' class on the main 'md-sidenav-container' element. */
private _setContainerClass(sidenav: MdSidenav, bool: boolean): void {
this._renderer.setElementClass(this._element.nativeElement, 'mat-sidenav-opened', bool);
private _setContainerClass(sidenav: MdSidenav, isAdd: boolean): void {
if (isAdd) {
this._renderer.addClass(this._element.nativeElement, 'mat-sidenav-opened');
} else {
this._renderer.removeClass(this._element.nativeElement, 'mat-sidenav-opened');
}
}
/** Validate the state of the sidenav children components. */
src/lib/slide-toggle/slide-toggle.spec.ts
+19 -19
View File
@@ -1,7 +1,7 @@
import {Component} from '@angular/core';
import {By, HAMMER_GESTURE_CONFIG} from '@angular/platform-browser';
import {async, ComponentFixture, TestBed, fakeAsync, tick} from '@angular/core/testing';
import {FormsModule, NgControl, ReactiveFormsModule, FormControl} from '@angular/forms';
import {NgModel, FormsModule, ReactiveFormsModule, FormControl} from '@angular/forms';
import {MdSlideToggle, MdSlideToggleChange, MdSlideToggleModule} from './index';
import {TestGestureConfig} from '../slider/test-gesture-config';
import {dispatchFakeEvent} from '../core/testing/dispatch-events';
@@ -29,7 +29,7 @@ describe('MdSlideToggle', () => {
let testComponent: SlideToggleTestApp;
let slideToggle: MdSlideToggle;
let slideToggleElement: HTMLElement;
let slideToggleControl: NgControl;
let slideToggleModel: NgModel;
let labelElement: HTMLLabelElement;
let inputElement: HTMLInputElement;
@@ -51,7 +51,7 @@ describe('MdSlideToggle', () => {
slideToggle = slideToggleDebug.componentInstance;
slideToggleElement = slideToggleDebug.nativeElement;
slideToggleControl = slideToggleDebug.injector.get(NgControl);
slideToggleModel = slideToggleDebug.injector.get<NgModel>(NgModel);
inputElement = fixture.debugElement.query(By.css('input')).nativeElement;
labelElement = fixture.debugElement.query(By.css('label')).nativeElement;
}));
@@ -291,37 +291,37 @@ describe('MdSlideToggle', () => {
it('should have the correct control state initially and after interaction', () => {
// The control should start off valid, pristine, and untouched.
expect(slideToggleControl.valid).toBe(true);
expect(slideToggleControl.pristine).toBe(true);
expect(slideToggleControl.touched).toBe(false);
expect(slideToggleModel.valid).toBe(true);
expect(slideToggleModel.pristine).toBe(true);
expect(slideToggleModel.touched).toBe(false);
// After changing the value programmatically, the control should
// become dirty (not pristine), but remain untouched.
slideToggle.checked = true;
fixture.detectChanges();
expect(slideToggleControl.valid).toBe(true);
expect(slideToggleControl.pristine).toBe(false);
expect(slideToggleControl.touched).toBe(false);
expect(slideToggleModel.valid).toBe(true);
expect(slideToggleModel.pristine).toBe(false);
expect(slideToggleModel.touched).toBe(false);
// After a user interaction occurs (such as a click), the control should remain dirty and
// now also be touched.
labelElement.click();
fixture.detectChanges();
expect(slideToggleControl.valid).toBe(true);
expect(slideToggleControl.pristine).toBe(false);
expect(slideToggleControl.touched).toBe(true);
expect(slideToggleModel.valid).toBe(true);
expect(slideToggleModel.pristine).toBe(false);
expect(slideToggleModel.touched).toBe(true);
});
it('should not set the control to touched when changing the state programmatically', () => {
// The control should start off with being untouched.
expect(slideToggleControl.touched).toBe(false);
expect(slideToggleModel.touched).toBe(false);
testComponent.slideChecked = true;
fixture.detectChanges();
expect(slideToggleControl.touched).toBe(false);
expect(slideToggleModel.touched).toBe(false);
expect(slideToggleElement.classList).toContain('mat-checked');
// After a user interaction occurs (such as a click), the control should remain dirty and
@@ -329,20 +329,20 @@ describe('MdSlideToggle', () => {
inputElement.click();
fixture.detectChanges();
expect(slideToggleControl.touched).toBe(true);
expect(slideToggleModel.touched).toBe(true);
expect(slideToggleElement.classList).not.toContain('mat-checked');
});
// TODO(kara): update when core/testing adds fix
it('should not set the control to touched when changing the model', async(() => {
// The control should start off with being untouched.
expect(slideToggleControl.touched).toBe(false);
expect(slideToggleModel.touched).toBe(false);
testComponent.slideModel = true;
fixture.detectChanges();
fixture.whenStable().then(() => {
fixture.detectChanges();
expect(slideToggleControl.touched).toBe(false);
expect(slideToggleModel.touched).toBe(false);
expect(slideToggle.checked).toBe(true);
expect(slideToggleElement.classList).toContain('mat-checked');
});
@@ -468,7 +468,7 @@ describe('MdSlideToggle', () => {
let testComponent: SlideToggleTestApp;
let slideToggle: MdSlideToggle;
let slideToggleElement: HTMLElement;
let slideToggleControl: NgControl;
let slideToggleModel: NgModel;
let slideThumbContainer: HTMLElement;
let inputElement: HTMLInputElement;
@@ -484,7 +484,7 @@ describe('MdSlideToggle', () => {
slideToggle = slideToggleDebug.componentInstance;
slideToggleElement = slideToggleDebug.nativeElement;
slideToggleControl = slideToggleDebug.injector.get(NgControl);
slideToggleModel = slideToggleDebug.injector.get<NgModel>(NgModel);
slideThumbContainer = thumbContainerDebug.nativeElement;
inputElement = slideToggleElement.querySelector('input');
src/lib/slide-toggle/slide-toggle.ts
+7 -3
View File
@@ -8,7 +8,7 @@ import {
Input,
OnDestroy,
Output,
Renderer,
Renderer2,
ViewChild,
ViewEncapsulation
} from '@angular/core';
@@ -120,7 +120,7 @@ export class MdSlideToggle extends _MdSlideToggleMixinBase
@ViewChild(MdRipple) _ripple: MdRipple;
constructor(private _elementRef: ElementRef,
private _renderer: Renderer,
private _renderer: Renderer2,
private _focusOriginMonitor: FocusOriginMonitor) {
super();
}
@@ -243,7 +243,11 @@ export class MdSlideToggle extends _MdSlideToggleMixinBase
private _setElementColor(color: string, isAdd: boolean) {
if (color != null && color != '') {
this._renderer.setElementClass(this._elementRef.nativeElement, `mat-${color}`, isAdd);
if (isAdd) {
this._renderer.addClass(this._elementRef.nativeElement, `mat-${color}`);
} else {
this._renderer.removeClass(this._elementRef.nativeElement, `mat-${color}`);
}
}
}
src/lib/slider/slider.spec.ts
+9 -9
View File
@@ -236,7 +236,7 @@ describe('MdSlider', () => {
sliderDebugElement = fixture.debugElement.query(By.directive(MdSlider));
testComponent = fixture.debugElement.componentInstance;
sliderNativeElement = sliderDebugElement.nativeElement;
sliderInstance = sliderDebugElement.injector.get(MdSlider);
sliderInstance = sliderDebugElement.injector.get<MdSlider>(MdSlider);
sliderWrapperElement = <HTMLElement>sliderNativeElement.querySelector('.mat-slider-wrapper');
trackFillElement = <HTMLElement>sliderNativeElement.querySelector('.mat-slider-track-fill');
ticksContainerElement =
@@ -331,7 +331,7 @@ describe('MdSlider', () => {
sliderDebugElement = fixture.debugElement.query(By.directive(MdSlider));
sliderNativeElement = sliderDebugElement.nativeElement;
sliderInstance = sliderDebugElement.injector.get(MdSlider);
sliderInstance = sliderDebugElement.injector.get<MdSlider>(MdSlider);
sliderWrapperElement = <HTMLElement>sliderNativeElement.querySelector('.mat-slider-wrapper');
});
@@ -370,7 +370,7 @@ describe('MdSlider', () => {
sliderDebugElement = fixture.debugElement.query(By.directive(MdSlider));
sliderNativeElement = sliderDebugElement.nativeElement;
sliderInstance = sliderDebugElement.injector.get(MdSlider);
sliderInstance = sliderDebugElement.injector.get<MdSlider>(MdSlider);
sliderWrapperElement = <HTMLElement>sliderNativeElement.querySelector('.mat-slider-wrapper');
trackFillElement = <HTMLElement>sliderNativeElement.querySelector('.mat-slider-track-fill');
});
@@ -563,7 +563,7 @@ describe('MdSlider', () => {
sliderDebugElement = fixture.debugElement.query(By.directive(MdSlider));
sliderNativeElement = sliderDebugElement.nativeElement;
sliderInstance = sliderDebugElement.injector.get(MdSlider);
sliderInstance = sliderDebugElement.injector.get<MdSlider>(MdSlider);
sliderWrapperElement = <HTMLElement>sliderNativeElement.querySelector('.mat-slider-wrapper');
});
@@ -665,7 +665,7 @@ describe('MdSlider', () => {
sliderDebugElement = fixture.debugElement.query(By.directive(MdSlider));
sliderNativeElement = sliderDebugElement.nativeElement;
sliderInstance = sliderDebugElement.injector.get(MdSlider);
sliderInstance = sliderDebugElement.injector.get<MdSlider>(MdSlider);
sliderWrapperElement = <HTMLElement>sliderNativeElement.querySelector('.mat-slider-wrapper');
});
@@ -714,7 +714,7 @@ describe('MdSlider', () => {
sliderDebugElement = fixture.debugElement.query(By.directive(MdSlider));
sliderNativeElement = sliderDebugElement.nativeElement;
sliderInstance = sliderDebugElement.injector.get(MdSlider);
sliderInstance = sliderDebugElement.injector.get<MdSlider>(MdSlider);
sliderWrapperElement = <HTMLElement>sliderNativeElement.querySelector('.mat-slider-wrapper');
trackFillElement = <HTMLElement>sliderNativeElement.querySelector('.mat-slider-track-fill');
});
@@ -906,7 +906,7 @@ describe('MdSlider', () => {
sliderDebugElement = fixture.debugElement.query(By.directive(MdSlider));
sliderNativeElement = sliderDebugElement.nativeElement;
sliderWrapperElement = <HTMLElement>sliderNativeElement.querySelector('.mat-slider-wrapper');
sliderInstance = sliderDebugElement.injector.get(MdSlider);
sliderInstance = sliderDebugElement.injector.get<MdSlider>(MdSlider);
});
it('should increment slider by 1 on up arrow pressed', () => {
@@ -988,7 +988,7 @@ describe('MdSlider', () => {
testComponent = fixture.debugElement.componentInstance;
sliderDebugElement = fixture.debugElement.query(By.directive(MdSlider));
sliderInstance = sliderDebugElement.injector.get(MdSlider);
sliderInstance = sliderDebugElement.injector.get<MdSlider>(MdSlider);
sliderNativeElement = sliderDebugElement.nativeElement;
sliderWrapperElement = <HTMLElement>sliderNativeElement.querySelector('.mat-slider-wrapper');
});
@@ -1113,7 +1113,7 @@ describe('MdSlider', () => {
testComponent = fixture.debugElement.componentInstance;
sliderDebugElement = fixture.debugElement.query(By.directive(MdSlider));
sliderInstance = sliderDebugElement.injector.get(MdSlider);
sliderInstance = sliderDebugElement.injector.get<MdSlider>(MdSlider);
sliderNativeElement = sliderDebugElement.nativeElement;
sliderWrapperElement = <HTMLElement>sliderNativeElement.querySelector('.mat-slider-wrapper');
trackFillElement = <HTMLElement>sliderNativeElement.querySelector('.mat-slider-track-fill');
src/lib/slider/slider.ts
+2 -2
View File
@@ -7,7 +7,7 @@ import {
OnDestroy,
Optional,
Output,
Renderer,
Renderer2,
ViewEncapsulation
} from '@angular/core';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
@@ -380,7 +380,7 @@ export class MdSlider extends _MdSliderMixinBase
return (this._dir && this._dir.value == 'rtl') ? 'rtl' : 'ltr';
}
constructor(renderer: Renderer, private _elementRef: ElementRef,
constructor(renderer: Renderer2, private _elementRef: ElementRef,
private _focusOriginMonitor: FocusOriginMonitor, @Optional() private _dir: Dir) {
super();
this._focusOriginMonitor.monitor(this._elementRef.nativeElement, renderer, true)
src/lib/snack-bar/snack-bar-container.ts
+3 -3
View File
@@ -4,7 +4,7 @@ import {
ViewChild,
NgZone,
OnDestroy,
Renderer,
Renderer2,
ElementRef,
} from '@angular/core';
import {
@@ -77,7 +77,7 @@ export class MdSnackBarContainer extends BasePortalHost implements OnDestroy {
constructor(
private _ngZone: NgZone,
private _renderer: Renderer,
private _renderer: Renderer2,
private _elementRef: ElementRef) {
super();
}
@@ -92,7 +92,7 @@ export class MdSnackBarContainer extends BasePortalHost implements OnDestroy {
// Not the most efficient way of adding classes, but the renderer doesn't allow us
// to pass in an array or a space-separated list.
for (let cssClass of this.snackBarConfig.extraClasses) {
this._renderer.setElementClass(this._elementRef.nativeElement, cssClass, true);
this._renderer.addClass(this._elementRef.nativeElement, cssClass);
}
}
src/lib/tabs/ink-bar.ts
+6 -6
View File
@@ -1,4 +1,4 @@
import {Directive, Renderer, ElementRef, NgZone} from '@angular/core';
import {Directive, Renderer2, ElementRef, NgZone} from '@angular/core';
/**
@@ -13,7 +13,7 @@ import {Directive, Renderer, ElementRef, NgZone} from '@angular/core';
})
export class MdInkBar {
constructor(
private _renderer: Renderer,
private _renderer: Renderer2,
private _elementRef: ElementRef,
private _ngZone: NgZone) {}
@@ -27,9 +27,9 @@ export class MdInkBar {
this._ngZone.runOutsideAngular(() => {
requestAnimationFrame(() => {
this._renderer.setElementStyle(this._elementRef.nativeElement, 'left',
this._renderer.setStyle(this._elementRef.nativeElement, 'left',
this._getLeftPosition(element));
this._renderer.setElementStyle(this._elementRef.nativeElement, 'width',
this._renderer.setStyle(this._elementRef.nativeElement, 'width',
this._getElementWidth(element));
});
});
@@ -37,12 +37,12 @@ export class MdInkBar {
/** Shows the ink bar. */
show(): void {
this._renderer.setElementStyle(this._elementRef.nativeElement, 'visibility', 'visible');
this._renderer.setStyle(this._elementRef.nativeElement, 'visibility', 'visible');
}
/** Hides the ink bar. */
hide(): void {
this._renderer.setElementStyle(this._elementRef.nativeElement, 'visibility', 'hidden');
this._renderer.setStyle(this._elementRef.nativeElement, 'visibility', 'hidden');
}
/**
src/lib/tabs/tab-group.ts
+5 -5
View File
@@ -7,7 +7,7 @@ import {
QueryList,
ContentChildren,
ElementRef,
Renderer
Renderer2,
} from '@angular/core';
import {coerceBooleanProperty} from '../core';
import {Observable} from 'rxjs/Observable';
@@ -92,7 +92,7 @@ export class MdTabGroup {
private _groupId: number;
constructor(private _renderer: Renderer) {
constructor(private _renderer: Renderer2) {
this._groupId = nextId++;
}
@@ -167,13 +167,13 @@ export class MdTabGroup {
_setTabBodyWrapperHeight(tabHeight: number): void {
if (!this._dynamicHeight || !this._tabBodyWrapperHeight) { return; }
this._renderer.setElementStyle(this._tabBodyWrapper.nativeElement, 'height',
this._renderer.setStyle(this._tabBodyWrapper.nativeElement, 'height',
this._tabBodyWrapperHeight + 'px');
// This conditional forces the browser to paint the height so that
// the animation to the new height can have an origin.
if (this._tabBodyWrapper.nativeElement.offsetHeight) {
this._renderer.setElementStyle(this._tabBodyWrapper.nativeElement, 'height',
this._renderer.setStyle(this._tabBodyWrapper.nativeElement, 'height',
tabHeight + 'px');
}
}
@@ -181,6 +181,6 @@ export class MdTabGroup {
/** Removes the height of the tab body wrapper. */
_removeTabBodyWrapperHeight(): void {
this._tabBodyWrapperHeight = this._tabBodyWrapper.nativeElement.clientHeight;
this._renderer.setElementStyle(this._tabBodyWrapper.nativeElement, 'height', '');
this._renderer.setStyle(this._tabBodyWrapper.nativeElement, 'height', '');
}
}
src/lib/tabs/tab-label-wrapper.ts
+3 -3
View File
@@ -1,4 +1,4 @@
import {Directive, ElementRef, Renderer, Input} from '@angular/core';
import {Directive, ElementRef, Input} from '@angular/core';
import {coerceBooleanProperty} from '../core/coercion/boolean-property';
@@ -13,7 +13,7 @@ import {coerceBooleanProperty} from '../core/coercion/boolean-property';
}
})
export class MdTabLabelWrapper {
constructor(public elementRef: ElementRef, private _renderer: Renderer) {}
constructor(public elementRef: ElementRef) {}
/** Whether the tab label is disabled. */
private _disabled: boolean = false;
@@ -25,7 +25,7 @@ export class MdTabLabelWrapper {
/** Sets focus on the wrapper element */
focus(): void {
this._renderer.invokeElementMethod(this.elementRef.nativeElement, 'focus');
this.elementRef.nativeElement.focus();
}
getOffsetLeft(): number {
src/lib/toolbar/toolbar.ts
+9 -3
View File
@@ -5,7 +5,7 @@ import {
ViewEncapsulation,
Directive,
ElementRef,
Renderer
Renderer2,
} from '@angular/core';
@@ -33,7 +33,7 @@ export class MdToolbar {
private _color: string;
constructor(private elementRef: ElementRef, private renderer: Renderer) { }
constructor(private _elementRef: ElementRef, private _renderer: Renderer2) { }
/** The color of the toolbar. Can be primary, accent, or warn. */
@Input()
@@ -53,7 +53,13 @@ export class MdToolbar {
private _setElementColor(color: string, isAdd: boolean) {
if (color != null && color != '') {
this.renderer.setElementClass(this.elementRef.nativeElement, `mat-${color}`, isAdd);
let element = this._elementRef.nativeElement;
if (isAdd) {
this._renderer.addClass(element, `mat-${color}`);
} else {
this._renderer.removeClass(element, `mat-${color}`);
}
}
}
src/lib/tooltip/tooltip.spec.ts
+3 -3
View File
@@ -61,7 +61,7 @@ describe('MdTooltip', () => {
fixture.detectChanges();
buttonDebugElement = fixture.debugElement.query(By.css('button'));
buttonElement = <HTMLButtonElement> buttonDebugElement.nativeElement;
tooltipDirective = buttonDebugElement.injector.get(MdTooltip);
tooltipDirective = buttonDebugElement.injector.get<MdTooltip>(MdTooltip);
});
it('should show and hide the tooltip', fakeAsync(() => {
@@ -362,7 +362,7 @@ describe('MdTooltip', () => {
fixture.detectChanges();
buttonDebugElement = fixture.debugElement.query(By.css('button'));
buttonElement = <HTMLButtonElement> buttonDebugElement.nativeElement;
tooltipDirective = buttonDebugElement.injector.get(MdTooltip);
tooltipDirective = buttonDebugElement.injector.get<MdTooltip>(MdTooltip);
});
it('should hide tooltip if clipped after changing positions', fakeAsync(() => {
@@ -399,7 +399,7 @@ describe('MdTooltip', () => {
fixture.detectChanges();
buttonDebugElement = fixture.debugElement.query(By.css('button'));
buttonElement = <HTMLButtonElement> buttonDebugElement.nativeElement;
tooltipDirective = buttonDebugElement.injector.get(MdTooltip);
tooltipDirective = buttonDebugElement.injector.get<MdTooltip>(MdTooltip);
});
it('should show and hide the tooltip', fakeAsync(() => {
src/lib/tooltip/tooltip.ts
+2 -2
View File
@@ -7,7 +7,7 @@ import {
NgZone,
Optional,
OnDestroy,
Renderer,
Renderer2,
OnInit,
ChangeDetectorRef,
} from '@angular/core';
@@ -152,7 +152,7 @@ export class MdTooltip implements OnInit, OnDestroy {
private _scrollDispatcher: ScrollDispatcher,
private _viewContainerRef: ViewContainerRef,
private _ngZone: NgZone,
private _renderer: Renderer,
private _renderer: Renderer2,
private _platform: Platform,
@Optional() private _dir: Dir) {