{{item}}
+ {{item}}
{{item}}
+ {{item}}
{{item}}
+ {{item}}
+
;
get element1(): Element { return this._element1.nativeElement; }
- @ViewChild('element2') _element2: ElementRef;
+ @ViewChild('element2') _element2: ElementRef;
get element2(): Element { return this._element2.nativeElement; }
- @ViewChild('element3') _element3: ElementRef;
+ @ViewChild('element3') _element3: ElementRef;
get element3(): Element { return this._element3.nativeElement; }
- @ViewChild('element4') _element4: ElementRef;
+ @ViewChild('element4') _element4: ElementRef;
get element4(): Element { return this._element4.nativeElement; }
diff --git a/src/cdk/a11y/aria-describer/aria-describer.ts b/src/cdk/a11y/aria-describer/aria-describer.ts
index a63e15f397a4..40664b1929db 100644
--- a/src/cdk/a11y/aria-describer/aria-describer.ts
+++ b/src/cdk/a11y/aria-describer/aria-describer.ts
@@ -225,12 +225,12 @@ export class AriaDescriber implements OnDestroy {
}
-/** @docs-private @deprecated @deletion-target 7.0.0 */
+/** @docs-private @deprecated @breaking-change 7.0.0 */
export function ARIA_DESCRIBER_PROVIDER_FACTORY(parentDispatcher: AriaDescriber, _document: any) {
return parentDispatcher || new AriaDescriber(_document);
}
-/** @docs-private @deprecated @deletion-target 7.0.0 */
+/** @docs-private @deprecated @breaking-change 7.0.0 */
export const ARIA_DESCRIBER_PROVIDER = {
// If there is already an AriaDescriber available, use that. Otherwise, provide a new one.
provide: AriaDescriber,
diff --git a/src/cdk/a11y/focus-monitor/focus-monitor.ts b/src/cdk/a11y/focus-monitor/focus-monitor.ts
index 67b59c14a52d..926999a4d1a9 100644
--- a/src/cdk/a11y/focus-monitor/focus-monitor.ts
+++ b/src/cdk/a11y/focus-monitor/focus-monitor.ts
@@ -149,13 +149,28 @@ export class FocusMonitor implements OnDestroy {
* @param origin Focus origin.
* @param options Options that can be used to configure the focus behavior.
*/
- focusVia(element: HTMLElement, origin: FocusOrigin, options?: FocusOptions): void {
+ focusVia(element: HTMLElement, origin: FocusOrigin, options?: FocusOptions): void;
+
+ /**
+ * Focuses the element via the specified focus origin.
+ * @param element Element to focus.
+ * @param origin Focus origin.
+ * @param options Options that can be used to configure the focus behavior.
+ */
+ focusVia(element: ElementRef, origin: FocusOrigin, options?: FocusOptions): void;
+
+ focusVia(element: HTMLElement | ElementRef,
+ origin: FocusOrigin,
+ options?: FocusOptions): void {
+
+ const nativeElement = this._getNativeElement(element);
+
this._setOriginForCurrentEventQueue(origin);
// `focus` isn't available on the server
- if (typeof element.focus === 'function') {
+ if (typeof nativeElement.focus === 'function') {
// Cast the element to `any`, because the TS typings don't have the `options` parameter yet.
- (element as any).focus(options);
+ (nativeElement as any).focus(options);
}
}
@@ -370,6 +385,10 @@ export class FocusMonitor implements OnDestroy {
this._unregisterGlobalListeners = () => {};
}
}
+
+ private _getNativeElement(element: HTMLElement | ElementRef): HTMLElement {
+ return element instanceof ElementRef ? element.nativeElement : element;
+ }
}
@@ -389,7 +408,7 @@ export class CdkMonitorFocus implements OnDestroy {
private _monitorSubscription: Subscription;
@Output() cdkFocusChange = new EventEmitter();
- constructor(private _elementRef: ElementRef, private _focusMonitor: FocusMonitor) {
+ constructor(private _elementRef: ElementRef, private _focusMonitor: FocusMonitor) {
this._monitorSubscription = this._focusMonitor.monitor(
this._elementRef.nativeElement,
this._elementRef.nativeElement.hasAttribute('cdkMonitorSubtreeFocus'))
@@ -402,13 +421,13 @@ export class CdkMonitorFocus implements OnDestroy {
}
}
-/** @docs-private @deprecated @deletion-target 7.0.0 */
+/** @docs-private @deprecated @breaking-change 7.0.0 */
export function FOCUS_MONITOR_PROVIDER_FACTORY(
parentDispatcher: FocusMonitor, ngZone: NgZone, platform: Platform) {
return parentDispatcher || new FocusMonitor(ngZone, platform);
}
-/** @docs-private @deprecated @deletion-target 7.0.0 */
+/** @docs-private @deprecated @breaking-change 7.0.0 */
export const FOCUS_MONITOR_PROVIDER = {
// If there is already a FocusMonitor available, use that. Otherwise, provide a new one.
provide: FocusMonitor,
diff --git a/src/cdk/a11y/focus-trap/focus-trap.ts b/src/cdk/a11y/focus-trap/focus-trap.ts
index 9e406e5fd6b3..4549dd478059 100644
--- a/src/cdk/a11y/focus-trap/focus-trap.ts
+++ b/src/cdk/a11y/focus-trap/focus-trap.ts
@@ -152,7 +152,7 @@ export class FocusTrap {
`[cdk-focus-${bound}]`) as NodeListOf;
for (let i = 0; i < markers.length; i++) {
- // @deletion-target 7.0.0
+ // @breaking-change 7.0.0
if (markers[i].hasAttribute(`cdk-focus-${bound}`)) {
console.warn(`Found use of deprecated attribute 'cdk-focus-${bound}', ` +
`use 'cdkFocusRegion${bound}' instead. The deprecated ` +
@@ -181,7 +181,7 @@ export class FocusTrap {
`[cdkFocusInitial]`) as HTMLElement;
if (redirectToElement) {
- // @deletion-target 7.0.0
+ // @breaking-change 7.0.0
if (redirectToElement.hasAttribute(`cdk-focus-initial`)) {
console.warn(`Found use of deprecated attribute 'cdk-focus-initial', ` +
`use 'cdkFocusInitial' instead. The deprecated attribute ` +
@@ -350,7 +350,7 @@ export class CdkTrapFocus implements OnDestroy, AfterContentInit, DoCheck {
private _autoCapture: boolean;
constructor(
- private _elementRef: ElementRef,
+ private _elementRef: ElementRef,
private _focusTrapFactory: FocusTrapFactory,
@Inject(DOCUMENT) _document: any) {
diff --git a/src/cdk/a11y/key-manager/list-key-manager.ts b/src/cdk/a11y/key-manager/list-key-manager.ts
index fe653843579a..c3478ad82355 100644
--- a/src/cdk/a11y/key-manager/list-key-manager.ts
+++ b/src/cdk/a11y/key-manager/list-key-manager.ts
@@ -305,7 +305,7 @@ export class ListKeyManager {
* Allows setting of the activeItemIndex without any other effects.
* @param index The new activeItemIndex.
* @deprecated Use `updateActiveItem` instead.
- * @deletion-target 7.0.0
+ * @breaking-change 7.0.0
*/
updateActiveItemIndex(index: number): void {
this.updateActiveItem(index);
diff --git a/src/cdk/a11y/live-announcer/live-announcer.spec.ts b/src/cdk/a11y/live-announcer/live-announcer.spec.ts
index 5de2ea9ae33c..7a37b21d4340 100644
--- a/src/cdk/a11y/live-announcer/live-announcer.spec.ts
+++ b/src/cdk/a11y/live-announcer/live-announcer.spec.ts
@@ -69,7 +69,7 @@ describe('LiveAnnouncer', () => {
// Call the lifecycle hook manually since Angular won't do it in tests.
announcer.ngOnDestroy();
- expect(document.body.querySelector('[aria-live]'))
+ expect(document.body.querySelector('.cdk-live-announcer-element'))
.toBeFalsy('Expected that the aria-live element was remove from the DOM.');
}));
@@ -81,6 +81,33 @@ describe('LiveAnnouncer', () => {
tick(100);
expect(spy).toHaveBeenCalled();
}));
+
+ it('should ensure that there is only one live element at a time', fakeAsync(() => {
+ announcer.ngOnDestroy();
+ fixture.destroy();
+
+ TestBed.resetTestingModule().configureTestingModule({
+ imports: [A11yModule],
+ declarations: [TestApp],
+ });
+
+ const extraElement = document.createElement('div');
+ extraElement.classList.add('cdk-live-announcer-element');
+ document.body.appendChild(extraElement);
+
+ inject([LiveAnnouncer], (la: LiveAnnouncer) => {
+ announcer = la;
+ ariaLiveElement = getLiveElement();
+ fixture = TestBed.createComponent(TestApp);
+ })();
+
+ announcer.announce('Hey Google');
+ tick(100);
+
+ expect(document.body.querySelectorAll('.cdk-live-announcer-element').length)
+ .toBe(1, 'Expected only one live announcer element in the DOM.');
+ }));
+
});
describe('with a custom element', () => {
@@ -184,7 +211,7 @@ describe('CdkAriaLive', () => {
function getLiveElement(): Element {
- return document.body.querySelector('[aria-live]')!;
+ return document.body.querySelector('.cdk-live-announcer-element')!;
}
@Component({template: ``})
diff --git a/src/cdk/a11y/live-announcer/live-announcer.ts b/src/cdk/a11y/live-announcer/live-announcer.ts
index 67748555c46d..4299273819ff 100644
--- a/src/cdk/a11y/live-announcer/live-announcer.ts
+++ b/src/cdk/a11y/live-announcer/live-announcer.ts
@@ -29,15 +29,17 @@ export type AriaLivePoliteness = 'off' | 'polite' | 'assertive';
@Injectable({providedIn: 'root'})
export class LiveAnnouncer implements OnDestroy {
- private readonly _liveElement: Element;
+ private readonly _liveElement: HTMLElement;
+ private _document: Document;
constructor(
@Optional() @Inject(LIVE_ANNOUNCER_ELEMENT_TOKEN) elementToken: any,
- @Inject(DOCUMENT) private _document: any) {
+ @Inject(DOCUMENT) _document: any) {
- // We inject the live element as `any` because the constructor signature cannot reference
- // browser globals (HTMLElement) on non-browser environments, since having a class decorator
- // causes TypeScript to preserve the constructor signature types.
+ // We inject the live element and document as `any` because the constructor signature cannot
+ // reference browser globals (HTMLElement, Document) on non-browser environments, since having
+ // a class decorator causes TypeScript to preserve the constructor signature types.
+ this._document = _document;
this._liveElement = elementToken || this._createLiveElement();
}
@@ -72,10 +74,19 @@ export class LiveAnnouncer implements OnDestroy {
}
}
- private _createLiveElement(): Element {
- let liveEl = this._document.createElement('div');
+ private _createLiveElement(): HTMLElement {
+ const elementClass = 'cdk-live-announcer-element';
+ const previousElements = this._document.getElementsByClassName(elementClass);
+ // Remove any old containers. This can happen when coming in from a server-side-rendered page.
+ for (let i = 0; i < previousElements.length; i++) {
+ previousElements[i].parentNode!.removeChild(previousElements[i]);
+ }
+
+ const liveEl = this._document.createElement('div');
+ liveEl.classList.add(elementClass);
liveEl.classList.add('cdk-visually-hidden');
+
liveEl.setAttribute('aria-atomic', 'true');
liveEl.setAttribute('aria-live', 'polite');
@@ -106,13 +117,16 @@ export class CdkAriaLive implements OnDestroy {
this._subscription.unsubscribe();
this._subscription = null;
}
- } else {
- if (!this._subscription) {
- this._subscription = this._ngZone.runOutsideAngular(
- () => this._contentObserver.observe(this._elementRef.nativeElement).subscribe(
- () => this._liveAnnouncer.announce(
- this._elementRef.nativeElement.innerText, this._politeness)));
- }
+ } else if (!this._subscription) {
+ this._subscription = this._ngZone.runOutsideAngular(() => {
+ return this._contentObserver
+ .observe(this._elementRef)
+ .subscribe(() => {
+ // Note that we use textContent here, rather than innerText, in order to avoid a reflow.
+ const element = this._elementRef.nativeElement;
+ this._liveAnnouncer.announce(element.textContent, this._politeness);
+ });
+ });
}
}
private _politeness: AriaLivePoliteness = 'off';
@@ -130,14 +144,14 @@ export class CdkAriaLive implements OnDestroy {
}
-/** @docs-private @deprecated @deletion-target 7.0.0 */
+/** @docs-private @deprecated @breaking-change 7.0.0 */
export function LIVE_ANNOUNCER_PROVIDER_FACTORY(
parentDispatcher: LiveAnnouncer, liveElement: any, _document: any) {
return parentDispatcher || new LiveAnnouncer(liveElement, _document);
}
-/** @docs-private @deprecated @deletion-target 7.0.0 */
+/** @docs-private @deprecated @breaking-change 7.0.0 */
export const LIVE_ANNOUNCER_PROVIDER: Provider = {
// If there is already a LiveAnnouncer available, use that. Otherwise, provide a new one.
provide: LiveAnnouncer,
diff --git a/src/cdk/accordion/accordion.ts b/src/cdk/accordion/accordion.ts
index cb35f01536a3..e3edebbabbda 100644
--- a/src/cdk/accordion/accordion.ts
+++ b/src/cdk/accordion/accordion.ts
@@ -6,8 +6,8 @@
* found in the LICENSE file at https://angular.io/license
*/
-import {Directive, Input} from '@angular/core';
import {coerceBooleanProperty} from '@angular/cdk/coercion';
+import {Directive, Input, OnChanges, OnDestroy, SimpleChanges} from '@angular/core';
import {Subject} from 'rxjs';
/** Used to generate unique ID for each accordion. */
@@ -20,7 +20,10 @@ let nextId = 0;
selector: 'cdk-accordion, [cdkAccordion]',
exportAs: 'cdkAccordion',
})
-export class CdkAccordion {
+export class CdkAccordion implements OnDestroy, OnChanges {
+ /** Emits when the state of the accordion changes */
+ readonly _stateChanges = new Subject();
+
/** Stream that emits true/false when openAll/closeAll is triggered. */
readonly _openCloseAllActions: Subject = new Subject();
@@ -43,6 +46,14 @@ export class CdkAccordion {
this._openCloseAll(false);
}
+ ngOnChanges(changes: SimpleChanges) {
+ this._stateChanges.next(changes);
+ }
+
+ ngOnDestroy() {
+ this._stateChanges.complete();
+ }
+
private _openCloseAll(expanded: boolean): void {
if (this.multi) {
this._openCloseAllActions.next(expanded);
diff --git a/src/cdk/bidi/dir.ts b/src/cdk/bidi/dir.ts
index f5fe1230a839..dbf246361376 100644
--- a/src/cdk/bidi/dir.ts
+++ b/src/cdk/bidi/dir.ts
@@ -41,9 +41,9 @@ export class Dir implements Directionality, AfterContentInit, OnDestroy {
/** @docs-private */
@Input()
get dir(): Direction { return this._dir; }
- set dir(v: Direction) {
+ set dir(value: Direction) {
const old = this._dir;
- this._dir = v;
+ this._dir = (value === 'ltr' || value === 'rtl') ? value : 'ltr';
if (old !== this._dir && this._isInitialized) {
this.change.emit(this._dir);
}
diff --git a/src/cdk/bidi/directionality.spec.ts b/src/cdk/bidi/directionality.spec.ts
index 7451d3247ba9..89414a81859b 100644
--- a/src/cdk/bidi/directionality.spec.ts
+++ b/src/cdk/bidi/directionality.spec.ts
@@ -1,7 +1,7 @@
import {async, fakeAsync, TestBed} from '@angular/core/testing';
-import {Component} from '@angular/core';
+import {Component, ViewChild} from '@angular/core';
import {By} from '@angular/platform-browser';
-import {BidiModule, Directionality, Direction, DIR_DOCUMENT} from './index';
+import {BidiModule, Directionality, Dir, Direction, DIR_DOCUMENT} from './index';
describe('Directionality', () => {
let fakeDocument: FakeDocument;
@@ -55,6 +55,15 @@ describe('Directionality', () => {
subscription.unsubscribe();
});
+ it('should default to ltr if an invalid direction is set on the body', () => {
+ fakeDocument.body.dir = 'not-valid';
+
+ const fixture = TestBed.createComponent(InjectsDirectionality);
+ const testComponent = fixture.debugElement.componentInstance;
+
+ expect(testComponent.dir.value).toBe('ltr');
+ });
+
});
describe('Dir directive', () => {
@@ -103,6 +112,17 @@ describe('Directionality', () => {
subscription.unsubscribe();
}));
+ it('should default to ltr if an invalid value is passed in', () => {
+ const fixture = TestBed.createComponent(ElementWithDir);
+
+ fixture.detectChanges();
+ expect(fixture.componentInstance.dir.value).toBe('rtl');
+
+ fixture.componentInstance.direction = 'not-valid';
+ fixture.detectChanges();
+ expect(fixture.componentInstance.dir.value).toBe('ltr');
+ });
+
});
});
@@ -115,6 +135,7 @@ describe('Directionality', () => {
`
})
class ElementWithDir {
+ @ViewChild(Dir) dir: Dir;
direction = 'rtl';
changeCount = 0;
}
diff --git a/src/cdk/bidi/directionality.ts b/src/cdk/bidi/directionality.ts
index 88a5c068d9eb..1c95de0109f8 100644
--- a/src/cdk/bidi/directionality.ts
+++ b/src/cdk/bidi/directionality.ts
@@ -33,7 +33,8 @@ export class Directionality implements OnDestroy {
// but getComputedStyle return either "ltr" or "rtl". avoiding getComputedStyle for now
const bodyDir = _document.body ? _document.body.dir : null;
const htmlDir = _document.documentElement ? _document.documentElement.dir : null;
- this.value = (bodyDir || htmlDir || 'ltr') as Direction;
+ const value = bodyDir || htmlDir;
+ this.value = (value === 'ltr' || value === 'rtl') ? value : 'ltr';
}
}
diff --git a/src/cdk/collections/collections.md b/src/cdk/collections/collections.md
index 1306b8f8df89..ac299cc63334 100644
--- a/src/cdk/collections/collections.md
+++ b/src/cdk/collections/collections.md
@@ -1,3 +1,34 @@
-### Collections
+The `collections` package provides a set of utilities for managing collections.
-A set of utilities for managing collections.
\ No newline at end of file
+### `SelectionModel`
+`SelectionModel` is a utility for powering selection of one or more options from a list.
+This model is used in components such as the selection list, table selections and chip lists.
+
+#### Basic Usage
+```javascript
+const model = new SelectionModel(
+ true, // multiple selection or not
+ [2,1,3] // initial selected values
+);
+
+// select a value
+model.select(4);
+console.log(model.selected.length) //-> 4
+
+// deselect a value
+model.deselect(4);
+console.log(model.selected.length) //-> 3
+
+// toggle a value
+model.toggle(4);
+console.log(model.selected.length) //-> 4
+
+// check for selection
+console.log(model.isSelected(4)) //-> true
+
+// sort the selections
+console.log(model.sort()) //-> [1,2,3,4]
+
+// listen for changes
+model.changes.subscribe(s => console.log(s));
+```
diff --git a/src/cdk/collections/selection.spec.ts b/src/cdk/collections/selection.spec.ts
index 67b4e9806e6a..3f285f4d0d2f 100644
--- a/src/cdk/collections/selection.spec.ts
+++ b/src/cdk/collections/selection.spec.ts
@@ -43,7 +43,7 @@ describe('SelectionModel', () => {
it('should be able to select multiple options', () => {
const onChangeSpy = jasmine.createSpy('onChange spy');
- model.onChange!.subscribe(onChangeSpy);
+ model.changed!.subscribe(onChangeSpy);
model.select(1);
model.select(2);
@@ -56,7 +56,7 @@ describe('SelectionModel', () => {
it('should be able to select multiple options at the same time', () => {
const onChangeSpy = jasmine.createSpy('onChange spy');
- model.onChange!.subscribe(onChangeSpy);
+ model.changed!.subscribe(onChangeSpy);
model.select(1, 2);
expect(model.selected.length).toBe(2);
@@ -112,7 +112,7 @@ describe('SelectionModel', () => {
model.select(1);
- model.onChange!.subscribe(spy);
+ model.changed!.subscribe(spy);
model.select(2);
@@ -144,7 +144,7 @@ describe('SelectionModel', () => {
model = new SelectionModel(true);
spy = jasmine.createSpy('SelectionModel change event');
- model.onChange!.subscribe(spy);
+ model.changed!.subscribe(spy);
});
it('should emit an event when a value is selected', () => {
@@ -167,7 +167,7 @@ describe('SelectionModel', () => {
it('should not emit an event when preselecting values', () => {
model = new SelectionModel(false, [1]);
spy = jasmine.createSpy('SelectionModel initial change event');
- model.onChange!.subscribe(spy);
+ model.changed!.subscribe(spy);
expect(spy).not.toHaveBeenCalled();
});
@@ -181,7 +181,7 @@ describe('SelectionModel', () => {
model = new SelectionModel(true, [1, 2, 3]);
spy = jasmine.createSpy('SelectionModel change event');
- model.onChange!.subscribe(spy);
+ model.changed!.subscribe(spy);
});
it('should emit an event when a value is deselected', () => {
@@ -218,7 +218,7 @@ describe('SelectionModel', () => {
});
it('should not have an onChange stream if change events are disabled', () => {
- expect(model.onChange).toBeFalsy();
+ expect(model.changed).toBeFalsy();
});
it('should still update the select value', () => {
diff --git a/src/cdk/collections/selection.ts b/src/cdk/collections/selection.ts
index d159b2b11b90..728cd29a1126 100644
--- a/src/cdk/collections/selection.ts
+++ b/src/cdk/collections/selection.ts
@@ -34,7 +34,14 @@ export class SelectionModel {
}
/** Event emitted when the value has changed. */
- onChange: Subject> | null = this._emitChanges ? new Subject() : null;
+ changed: Subject> | null = this._emitChanges ? new Subject() : null;
+
+ /**
+ * Event emitted when the value has changed.
+ * @deprecated Use `changed` instead.
+ * @breaking-change 8.0.0 To be changed to `changed`
+ */
+ onChange: Subject> | null = this.changed;
constructor(
private _multiple = false,
@@ -129,8 +136,8 @@ export class SelectionModel {
this._selected = null;
if (this._selectedToEmit.length || this._deselectedToEmit.length) {
- if (this.onChange) {
- this.onChange.next({
+ if (this.changed) {
+ this.changed.next({
source: this,
added: this._selectedToEmit,
removed: this._deselectedToEmit
diff --git a/src/cdk/layout/breakpoints-observer.spec.ts b/src/cdk/layout/breakpoints-observer.spec.ts
index 296d09142e00..4bb2d9ab5049 100644
--- a/src/cdk/layout/breakpoints-observer.spec.ts
+++ b/src/cdk/layout/breakpoints-observer.spec.ts
@@ -34,7 +34,7 @@ describe('BreakpointObserver', () => {
});
it('retrieves the whether a query is currently matched', () => {
- let query = 'everything starts as true in the FakeMediaMatcher';
+ const query = 'everything starts as true in the FakeMediaMatcher';
expect(breakpointManager.isMatched(query)).toBeTruthy();
});
@@ -61,15 +61,15 @@ describe('BreakpointObserver', () => {
});
it('accepts an array of queries', () => {
- let queries = ['1 query', '2 query', 'red query', 'blue query'];
+ const queries = ['1 query', '2 query', 'red query', 'blue query'];
breakpointManager.observe(queries);
expect(mediaMatcher.queryCount).toBe(queries.length);
});
it('completes all events when the breakpoint manager is destroyed', () => {
- let firstTest = jasmine.createSpy('test1');
+ const firstTest = jasmine.createSpy('test1');
breakpointManager.observe('test1').subscribe(undefined, undefined, firstTest);
- let secondTest = jasmine.createSpy('test2');
+ const secondTest = jasmine.createSpy('test2');
breakpointManager.observe('test2').subscribe(undefined, undefined, secondTest);
expect(firstTest).not.toHaveBeenCalled();
@@ -82,8 +82,8 @@ describe('BreakpointObserver', () => {
});
it('emits an event on the observable when values change', () => {
- let query = '(width: 999px)';
- let queryMatchState: boolean = false;
+ const query = '(width: 999px)';
+ let queryMatchState = false;
breakpointManager.observe(query).subscribe((state: BreakpointState) => {
queryMatchState = state.matches;
});
@@ -93,14 +93,31 @@ describe('BreakpointObserver', () => {
expect(queryMatchState).toBeFalsy();
});
+ it('emits an event on the observable with the matching state of all queries provided', () => {
+ const queryOne = '(width: 999px)';
+ const queryTwo = '(width: 700px)';
+ let state: BreakpointState = {matches: false, breakpoints: {}};
+ breakpointManager.observe([queryOne, queryTwo]).subscribe((breakpoint: BreakpointState) => {
+ state = breakpoint;
+ });
+
+ mediaMatcher.setMatchesQuery(queryOne, false);
+ mediaMatcher.setMatchesQuery(queryTwo, false);
+ expect(state.breakpoints).toEqual({[queryOne]: false, [queryTwo]: false});
+
+ mediaMatcher.setMatchesQuery(queryOne, true);
+ mediaMatcher.setMatchesQuery(queryTwo, false);
+ expect(state.breakpoints).toEqual({[queryOne]: true, [queryTwo]: false});
+ });
+
it('emits a true matches state when the query is matched', () => {
- let query = '(width: 999px)';
+ const query = '(width: 999px)';
mediaMatcher.setMatchesQuery(query, true);
expect(breakpointManager.isMatched(query)).toBeTruthy();
});
it('emits a false matches state when the query is not matched', () => {
- let query = '(width: 999px)';
+ const query = '(width: 999px)';
mediaMatcher.setMatchesQuery(query, false);
expect(breakpointManager.isMatched(query)).toBeTruthy();
});
@@ -130,7 +147,7 @@ export class FakeMediaQueryList implements MediaQueryList {
@Injectable()
export class FakeMediaMatcher {
/** A map of match media queries. */
- private queries: Map = new Map();
+ private queries = new Map();
/** The number of distinct queries created in the media matcher during a test. */
get queryCount(): number {
@@ -139,7 +156,7 @@ export class FakeMediaMatcher {
/** Fakes the match media response to be controlled in tests. */
matchMedia(query: string): FakeMediaQueryList {
- let mql = new FakeMediaQueryList(true, query);
+ const mql = new FakeMediaQueryList(true, query);
this.queries.set(query, mql);
return mql;
}
diff --git a/src/cdk/layout/breakpoints-observer.ts b/src/cdk/layout/breakpoints-observer.ts
index 31dee92a619e..1e476c0d63ff 100644
--- a/src/cdk/layout/breakpoints-observer.ts
+++ b/src/cdk/layout/breakpoints-observer.ts
@@ -16,10 +16,25 @@ import {coerceArray} from '@angular/cdk/coercion';
export interface BreakpointState {
/** Whether the breakpoint is currently matching. */
matches: boolean;
+ /**
+ * A key boolean pair for each query provided to the observe method,
+ * with its current matched state.
+ */
+ breakpoints: {
+ [key: string]: boolean;
+ };
+}
+
+/** The current state of a layout breakpoint. */
+interface InternalBreakpointState {
+ /** Whether the breakpoint is currently matching. */
+ matches: boolean;
+ /** The media query being to be matched */
+ query: string;
}
interface Query {
- observable: Observable;
+ observable: Observable;
mql: MediaQueryList;
}
@@ -27,9 +42,9 @@ interface Query {
@Injectable({providedIn: 'root'})
export class BreakpointObserver implements OnDestroy {
/** A map of all media queries currently being listened for. */
- private _queries: Map = new Map();
+ private _queries = new Map();
/** A subject for all other observables to takeUntil based on. */
- private _destroySubject: Subject<{}> = new Subject();
+ private _destroySubject = new Subject();
constructor(private mediaMatcher: MediaMatcher, private zone: NgZone) {}
@@ -59,10 +74,16 @@ export class BreakpointObserver implements OnDestroy {
const queries = splitQueries(coerceArray(value));
const observables = queries.map(query => this._registerQuery(query).observable);
- return combineLatest(observables).pipe(map((breakpointStates: BreakpointState[]) => {
- return {
- matches: breakpointStates.some(state => state && state.matches)
+ return combineLatest(observables).pipe(map((breakpointStates: InternalBreakpointState[]) => {
+ const response: BreakpointState = {
+ matches: false,
+ breakpoints: {},
};
+ breakpointStates.forEach((state: InternalBreakpointState) => {
+ response.matches = response.matches || state.matches;
+ response.breakpoints[state.query] = state.matches;
+ });
+ return response;
}));
}
@@ -90,11 +111,11 @@ export class BreakpointObserver implements OnDestroy {
.pipe(
takeUntil(this._destroySubject),
startWith(mql),
- map((nextMql: MediaQueryList) => ({matches: nextMql.matches}))
+ map((nextMql: MediaQueryList) => ({query, matches: nextMql.matches}))
);
// Add the MediaQueryList to the set of queries.
- const output = {observable: queryObservable, mql: mql};
+ const output = {observable: queryObservable, mql};
this._queries.set(query, output);
return output;
}
diff --git a/src/cdk/observers/observe-content.spec.ts b/src/cdk/observers/observe-content.spec.ts
index 8c3077645689..ba9137f1cb76 100644
--- a/src/cdk/observers/observe-content.spec.ts
+++ b/src/cdk/observers/observe-content.spec.ts
@@ -2,9 +2,6 @@ import {Component, ElementRef, ViewChild} from '@angular/core';
import {async, ComponentFixture, fakeAsync, inject, TestBed, tick} from '@angular/core/testing';
import {ContentObserver, MutationObserverFactory, ObserversModule} from './observe-content';
-// TODO(elad): `ProxyZone` doesn't seem to capture the events raised by
-// `MutationObserver` and needs to be investigated
-
describe('Observe content directive', () => {
describe('basic usage', () => {
beforeEach(async(() => {
@@ -159,7 +156,7 @@ describe('ContentObserver injectable', () => {
const fixture = TestBed.createComponent(UnobservedComponentWithTextContent);
fixture.detectChanges();
- contentObserver.observe(fixture.componentInstance.contentEl.nativeElement)
+ contentObserver.observe(fixture.componentInstance.contentEl)
.subscribe(() => spy());
expect(spy).not.toHaveBeenCalled();
@@ -177,9 +174,9 @@ describe('ContentObserver injectable', () => {
const fixture = TestBed.createComponent(UnobservedComponentWithTextContent);
fixture.detectChanges();
- const sub1 = contentObserver.observe(fixture.componentInstance.contentEl.nativeElement)
+ const sub1 = contentObserver.observe(fixture.componentInstance.contentEl)
.subscribe(() => spy());
- contentObserver.observe(fixture.componentInstance.contentEl.nativeElement)
+ contentObserver.observe(fixture.componentInstance.contentEl)
.subscribe(() => spy());
expect(mof.create).toHaveBeenCalledTimes(1);
diff --git a/src/cdk/observers/observe-content.ts b/src/cdk/observers/observe-content.ts
index bef0fa804ca5..baef9349ac45 100644
--- a/src/cdk/observers/observe-content.ts
+++ b/src/cdk/observers/observe-content.ts
@@ -54,7 +54,17 @@ export class ContentObserver implements OnDestroy {
* Observe content changes on an element.
* @param element The element to observe for content changes.
*/
- observe(element: Element): Observable {
+ observe(element: Element): Observable;
+
+ /**
+ * Observe content changes on an element.
+ * @param element The element to observe for content changes.
+ */
+ observe(element: ElementRef): Observable;
+
+ observe(elementOrRef: Element | ElementRef): Observable {
+ const element = elementOrRef instanceof ElementRef ? elementOrRef.nativeElement : elementOrRef;
+
return Observable.create(observer => {
const stream = this._observeElement(element);
const subscription = stream.subscribe(observer);
@@ -135,11 +145,7 @@ export class CdkObserveContent implements AfterContentInit, OnDestroy {
get disabled() { return this._disabled; }
set disabled(value: any) {
this._disabled = coerceBooleanProperty(value);
- if (this._disabled) {
- this._unsubscribe();
- } else {
- this._subscribe();
- }
+ this._disabled ? this._unsubscribe() : this._subscribe();
}
private _disabled = false;
@@ -154,7 +160,8 @@ export class CdkObserveContent implements AfterContentInit, OnDestroy {
private _currentSubscription: Subscription | null = null;
- constructor(private _contentObserver: ContentObserver, private _elementRef: ElementRef,
+ constructor(private _contentObserver: ContentObserver,
+ private _elementRef: ElementRef,
private _ngZone: NgZone) {}
ngAfterContentInit() {
@@ -169,7 +176,7 @@ export class CdkObserveContent implements AfterContentInit, OnDestroy {
private _subscribe() {
this._unsubscribe();
- const stream = this._contentObserver.observe(this._elementRef.nativeElement);
+ const stream = this._contentObserver.observe(this._elementRef);
// TODO(mmalerba): We shouldn't be emitting on this @Output() outside the zone.
// Consider brining it back inside the zone next time we're making breaking changes.
diff --git a/src/cdk/overlay/keyboard/overlay-keyboard-dispatcher.spec.ts b/src/cdk/overlay/keyboard/overlay-keyboard-dispatcher.spec.ts
index 3f8ddd4dca8b..2381d6b53f56 100644
--- a/src/cdk/overlay/keyboard/overlay-keyboard-dispatcher.spec.ts
+++ b/src/cdk/overlay/keyboard/overlay-keyboard-dispatcher.spec.ts
@@ -157,6 +157,27 @@ describe('OverlayKeyboardDispatcher', () => {
expect(overlayOneSpy).toHaveBeenCalled();
});
+ it('should not add the same overlay to the stack multiple times', () => {
+ const overlayOne = overlay.create();
+ const overlayTwo = overlay.create();
+ const overlayOneSpy = jasmine.createSpy('overlayOne keyboard event spy');
+ const overlayTwoSpy = jasmine.createSpy('overlayTwo keyboard event spy');
+
+ overlayOne.keydownEvents().subscribe(overlayOneSpy);
+ overlayTwo.keydownEvents().subscribe(overlayTwoSpy);
+
+ keyboardDispatcher.add(overlayOne);
+ keyboardDispatcher.add(overlayTwo);
+ keyboardDispatcher.add(overlayOne);
+
+ dispatchKeyboardEvent(document.body, 'keydown', ESCAPE);
+
+ expect(keyboardDispatcher._attachedOverlays).toEqual([overlayTwo, overlayOne]);
+
+ expect(overlayTwoSpy).not.toHaveBeenCalled();
+ expect(overlayOneSpy).toHaveBeenCalled();
+ });
+
});
diff --git a/src/cdk/overlay/keyboard/overlay-keyboard-dispatcher.ts b/src/cdk/overlay/keyboard/overlay-keyboard-dispatcher.ts
index a0886b218a88..48b5ad78440e 100644
--- a/src/cdk/overlay/keyboard/overlay-keyboard-dispatcher.ts
+++ b/src/cdk/overlay/keyboard/overlay-keyboard-dispatcher.ts
@@ -42,6 +42,9 @@ export class OverlayKeyboardDispatcher implements OnDestroy {
/** Add a new overlay to the list of attached overlay refs. */
add(overlayRef: OverlayRef): void {
+ // Ensure that we don't get the same overlay multiple times.
+ this.remove(overlayRef);
+
// Lazily start dispatcher once first overlay is added
if (!this._isAttached) {
this._document.body.addEventListener('keydown', this._keydownListener, true);
@@ -93,13 +96,13 @@ export class OverlayKeyboardDispatcher implements OnDestroy {
}
-/** @docs-private @deprecated @deletion-target 7.0.0 */
+/** @docs-private @deprecated @breaking-change 7.0.0 */
export function OVERLAY_KEYBOARD_DISPATCHER_PROVIDER_FACTORY(
dispatcher: OverlayKeyboardDispatcher, _document: any) {
return dispatcher || new OverlayKeyboardDispatcher(_document);
}
-/** @docs-private @deprecated @deletion-target 7.0.0 */
+/** @docs-private @deprecated @breaking-change 7.0.0 */
export const OVERLAY_KEYBOARD_DISPATCHER_PROVIDER = {
// If there is already an OverlayKeyboardDispatcher available, use that.
// Otherwise, provide a new one.
diff --git a/src/cdk/overlay/overlay-container.ts b/src/cdk/overlay/overlay-container.ts
index fa5a63ce4998..0b043bc80050 100644
--- a/src/cdk/overlay/overlay-container.ts
+++ b/src/cdk/overlay/overlay-container.ts
@@ -55,13 +55,13 @@ export class OverlayContainer implements OnDestroy {
}
-/** @docs-private @deprecated @deletion-target 7.0.0 */
+/** @docs-private @deprecated @breaking-change 7.0.0 */
export function OVERLAY_CONTAINER_PROVIDER_FACTORY(parentContainer: OverlayContainer,
_document: any) {
return parentContainer || new OverlayContainer(_document);
}
-/** @docs-private @deprecated @deletion-target 7.0.0 */
+/** @docs-private @deprecated @breaking-change 7.0.0 */
export const OVERLAY_CONTAINER_PROVIDER = {
// If there is already an OverlayContainer available, use that. Otherwise, provide a new one.
provide: OverlayContainer,
diff --git a/src/cdk/overlay/overlay-directives.spec.ts b/src/cdk/overlay/overlay-directives.spec.ts
index 875a0a16ecc2..685052565e40 100644
--- a/src/cdk/overlay/overlay-directives.spec.ts
+++ b/src/cdk/overlay/overlay-directives.spec.ts
@@ -51,15 +51,11 @@ describe('Overlay directives', () => {
fixture.detectChanges();
expect(overlayContainerElement.textContent).toContain('Menu content');
- expect(getPaneElement().style.pointerEvents)
- .toBe('auto', 'Expected the overlay pane to enable pointerEvents when attached.');
fixture.componentInstance.isOpen = false;
fixture.detectChanges();
expect(overlayContainerElement.textContent).toBe('');
- expect(getPaneElement().style.pointerEvents)
- .toBe('none', 'Expected the overlay pane to disable pointerEvents when detached.');
});
it('should destroy the overlay when the directive is destroyed', () => {
diff --git a/src/cdk/overlay/overlay-directives.ts b/src/cdk/overlay/overlay-directives.ts
index da50ed72485c..5df1a9267c29 100644
--- a/src/cdk/overlay/overlay-directives.ts
+++ b/src/cdk/overlay/overlay-directives.ts
@@ -73,7 +73,7 @@ const defaultPositionList: ConnectedPosition[] = [
export const CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY =
new InjectionToken<() => ScrollStrategy>('cdk-connected-overlay-scroll-strategy');
-/** @docs-private @deprecated @deletion-target 7.0.0 */
+/** @docs-private @deprecated @breaking-change 7.0.0 */
export function CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY_FACTORY(overlay: Overlay):
() => ScrollStrategy {
return (config?: RepositionScrollStrategyConfig) => overlay.scrollStrategies.reposition(config);
diff --git a/src/cdk/overlay/overlay-module.ts b/src/cdk/overlay/overlay-module.ts
index d10c320bd797..4dcfc324e5f5 100644
--- a/src/cdk/overlay/overlay-module.ts
+++ b/src/cdk/overlay/overlay-module.ts
@@ -35,7 +35,7 @@ export class OverlayModule {}
/**
* @deprecated Use `OverlayModule` instead.
- * @deletion-target 7.0.0
+ * @breaking-change 7.0.0
*/
export const OVERLAY_PROVIDERS: Provider[] = [
Overlay,
diff --git a/src/cdk/overlay/overlay-ref.ts b/src/cdk/overlay/overlay-ref.ts
index 3ff749565ed8..e0bfeceb593d 100644
--- a/src/cdk/overlay/overlay-ref.ts
+++ b/src/cdk/overlay/overlay-ref.ts
@@ -9,8 +9,8 @@
import {Direction, Directionality} from '@angular/cdk/bidi';
import {ComponentPortal, Portal, PortalOutlet, TemplatePortal} from '@angular/cdk/portal';
import {ComponentRef, EmbeddedViewRef, NgZone} from '@angular/core';
-import {Observable, Subject} from 'rxjs';
-import {take} from 'rxjs/operators';
+import {Observable, Subject, merge} from 'rxjs';
+import {take, takeUntil} from 'rxjs/operators';
import {OverlayKeyboardDispatcher} from './keyboard/overlay-keyboard-dispatcher';
import {OverlayConfig} from './overlay-config';
import {coerceCssPixelValue, coerceArray} from '@angular/cdk/coercion';
@@ -31,6 +31,12 @@ export class OverlayRef implements PortalOutlet, OverlayReference {
private _backdropClick: Subject = new Subject();
private _attachments = new Subject();
private _detachments = new Subject();
+
+ /**
+ * Reference to the parent of the `_host` at the time it was detached. Used to restore
+ * the `_host` to its original position in the DOM when it gets re-attached.
+ */
+ private _previousHostParent: HTMLElement;
private _keydownEventsObservable: Observable = Observable.create(observer => {
const subscription = this._keydownEvents.subscribe(observer);
this._keydownEventSubscriptions++;
@@ -99,6 +105,10 @@ export class OverlayRef implements PortalOutlet, OverlayReference {
}
// Update the pane element with the given configuration.
+ if (!this._host.parentElement && this._previousHostParent) {
+ this._previousHostParent.appendChild(this._host);
+ }
+
this._updateStackingOrder();
this._updateElementSize();
this._updateElementDirection();
@@ -176,6 +186,26 @@ export class OverlayRef implements PortalOutlet, OverlayReference {
// Remove this overlay from keyboard dispatcher tracking.
this._keyboardDispatcher.remove(this);
+ // Keeping the host element in DOM the can cause scroll jank, because it still gets rendered,
+ // even though it's transparent and unclickable. We can't remove the host here immediately,
+ // because the overlay pane's content might still be animating. This stream helps us avoid
+ // interrupting the animation by waiting for the pane to become empty.
+ const subscription = this._ngZone.onStable
+ .asObservable()
+ .pipe(takeUntil(merge(this._attachments, this._detachments)))
+ .subscribe(() => {
+ // Needs a couple of checks for the pane and host, because
+ // they may have been removed by the time the zone stabilizes.
+ if (!this._pane || !this._host || this._pane.children.length === 0) {
+ if (this._host && this._host.parentElement) {
+ this._previousHostParent = this._host.parentElement;
+ this._previousHostParent.removeChild(this._host);
+ }
+
+ subscription.unsubscribe();
+ }
+ });
+
return detachmentResult;
}
@@ -203,7 +233,7 @@ export class OverlayRef implements PortalOutlet, OverlayReference {
this._host = null!;
}
- this._pane = null!;
+ this._previousHostParent = this._pane = null!;
if (isAttached) {
this._detachments.next();
diff --git a/src/cdk/overlay/overlay.md b/src/cdk/overlay/overlay.md
index 58c47f1dedfe..fb46abc343f0 100644
--- a/src/cdk/overlay/overlay.md
+++ b/src/cdk/overlay/overlay.md
@@ -1,5 +1,15 @@
The `overlay` package provides a way to open floating panels on the screen.
+### Initial setup
+The CDK overlays depend on a small set of structural styles to work correctly. If you're using
+Angular Material, these styles have been included together with the theme, otherwise if you're
+using the CDK on its own, you'll have to include the styles yourself. You can do so by importing
+the prebuilt styles in your global stylesheet:
+
+```scss
+@import '~@angular/cdk/overlay-prebuilt.css';
+```
+
### Creating overlays
Calling `overlay.create()` will return an `OverlayRef` instance. This instance is a handle for
managing that specific overlay.
diff --git a/src/cdk/overlay/overlay.spec.ts b/src/cdk/overlay/overlay.spec.ts
index bde5039aaf3e..05f944422ee1 100644
--- a/src/cdk/overlay/overlay.spec.ts
+++ b/src/cdk/overlay/overlay.spec.ts
@@ -7,9 +7,10 @@ import {
ErrorHandler,
Injectable,
EventEmitter,
+ NgZone,
} from '@angular/core';
import {Direction, Directionality} from '@angular/cdk/bidi';
-import {dispatchFakeEvent} from '@angular/cdk/testing';
+import {dispatchFakeEvent, MockNgZone} from '@angular/cdk/testing';
import {
ComponentPortal,
PortalModule,
@@ -35,19 +36,26 @@ describe('Overlay', () => {
let overlayContainer: OverlayContainer;
let viewContainerFixture: ComponentFixture;
let dir: Direction;
+ let zone: MockNgZone;
beforeEach(async(() => {
dir = 'ltr';
TestBed.configureTestingModule({
imports: [OverlayModule, PortalModule, OverlayTestModule],
- providers: [{
- provide: Directionality,
- useFactory: () => {
- const fakeDirectionality = {};
- Object.defineProperty(fakeDirectionality, 'value', {get: () => dir});
- return fakeDirectionality;
- }
- }],
+ providers: [
+ {
+ provide: Directionality,
+ useFactory: () => {
+ const fakeDirectionality = {};
+ Object.defineProperty(fakeDirectionality, 'value', {get: () => dir});
+ return fakeDirectionality;
+ }
+ },
+ {
+ provide: NgZone,
+ useFactory: () => zone = new MockNgZone()
+ },
+ ],
}).compileComponents();
}));
@@ -342,6 +350,33 @@ describe('Overlay', () => {
expect(overlayRef.getDirection()).toBe('ltr');
});
+ it('should add and remove the overlay host as the ref is being attached and detached', () => {
+ const overlayRef = overlay.create();
+
+ overlayRef.attach(componentPortal);
+ viewContainerFixture.detectChanges();
+
+ expect(overlayRef.hostElement.parentElement)
+ .toBeTruthy('Expected host element to be in the DOM.');
+
+ overlayRef.detach();
+
+ expect(overlayRef.hostElement.parentElement)
+ .toBeTruthy('Expected host element not to have been removed immediately.');
+
+ viewContainerFixture.detectChanges();
+ zone.simulateZoneExit();
+
+ expect(overlayRef.hostElement.parentElement)
+ .toBeFalsy('Expected host element to have been removed once the zone stabilizes.');
+
+ overlayRef.attach(componentPortal);
+ viewContainerFixture.detectChanges();
+
+ expect(overlayRef.hostElement.parentElement)
+ .toBeTruthy('Expected host element to be back in the DOM.');
+ });
+
describe('positioning', () => {
let config: OverlayConfig;
@@ -354,6 +389,7 @@ describe('Overlay', () => {
overlay.create(config).attach(componentPortal);
viewContainerFixture.detectChanges();
+ zone.simulateZoneExit();
tick();
expect(overlayContainerElement.querySelectorAll('.fake-positioned').length).toBe(1);
diff --git a/src/cdk/overlay/position/connected-position-strategy.spec.ts b/src/cdk/overlay/position/connected-position-strategy.spec.ts
index 4a67c1ff2142..44be604f080b 100644
--- a/src/cdk/overlay/position/connected-position-strategy.spec.ts
+++ b/src/cdk/overlay/position/connected-position-strategy.spec.ts
@@ -63,7 +63,7 @@ describe('ConnectedPositionStrategy', () => {
let originElement: HTMLElement;
let positionStrategy: ConnectedPositionStrategy;
- let fakeElementRef: ElementRef;
+ let fakeElementRef: ElementRef;
let originRect: ClientRect | null;
let originCenterX: number | null;
@@ -73,7 +73,7 @@ describe('ConnectedPositionStrategy', () => {
// The origin and overlay elements need to be in the document body in order to have geometry.
originElement = createPositionedBlockElement();
document.body.appendChild(originElement);
- fakeElementRef = new ElementRef(originElement);
+ fakeElementRef = new ElementRef(originElement);
});
afterEach(() => {
@@ -583,7 +583,7 @@ describe('ConnectedPositionStrategy', () => {
let positionChangeHandler: jasmine.Spy;
let onPositionChangeSubscription: Subscription;
let positionChange: ConnectedOverlayPositionChange;
- let fakeElementRef: ElementRef;
+ let fakeElementRef: ElementRef;
let positionStrategy: ConnectedPositionStrategy;
beforeEach(() => {
@@ -597,14 +597,14 @@ describe('ConnectedPositionStrategy', () => {
scrollable.appendChild(originElement);
// Create a strategy with knowledge of the scrollable container
- fakeElementRef = new ElementRef(originElement);
+ fakeElementRef = new ElementRef(originElement);
positionStrategy = overlay.position().connectedTo(
fakeElementRef,
{originX: 'start', originY: 'bottom'},
{overlayX: 'start', overlayY: 'top'});
positionStrategy.withScrollableContainers([
- new CdkScrollable(new ElementRef(scrollable), null!, null!)]);
+ new CdkScrollable(new ElementRef(scrollable), null!, null!)]);
positionChangeHandler = jasmine.createSpy('positionChangeHandler');
onPositionChangeSubscription =
positionStrategy.onPositionChange.subscribe(positionChangeHandler);
@@ -673,13 +673,13 @@ describe('ConnectedPositionStrategy', () => {
describe('positioning properties', () => {
let originElement: HTMLElement;
let positionStrategy: ConnectedPositionStrategy;
- let fakeElementRef: ElementRef;
+ let fakeElementRef: ElementRef;
beforeEach(() => {
// The origin and overlay elements need to be in the document body in order to have geometry.
originElement = createPositionedBlockElement();
document.body.appendChild(originElement);
- fakeElementRef = new ElementRef(originElement);
+ fakeElementRef = new ElementRef(originElement);
});
afterEach(() => {
diff --git a/src/cdk/overlay/position/connected-position-strategy.ts b/src/cdk/overlay/position/connected-position-strategy.ts
index 4fa8931f6e39..8f95424c32fd 100644
--- a/src/cdk/overlay/position/connected-position-strategy.ts
+++ b/src/cdk/overlay/position/connected-position-strategy.ts
@@ -28,7 +28,7 @@ import {OverlayReference} from '../overlay-reference';
* a basic dropdown is connecting the bottom-left corner of the origin to the top-left corner
* of the overlay.
* @deprecated Use `FlexibleConnectedPositionStrategy` instead.
- * @deletion-target 7.0.0
+ * @breaking-change 7.0.0
*/
export class ConnectedPositionStrategy implements PositionStrategy {
/**
@@ -58,10 +58,10 @@ export class ConnectedPositionStrategy implements PositionStrategy {
constructor(
originPos: OriginConnectionPosition,
overlayPos: OverlayConnectionPosition,
- connectedTo: ElementRef,
+ connectedTo: ElementRef,
viewportRuler: ViewportRuler,
document: Document,
- // @deletion-target 7.0.0 `platform` parameter to be made required.
+ // @breaking-change 7.0.0 `platform` parameter to be made required.
platform?: Platform) {
// Since the `ConnectedPositionStrategy` is deprecated and we don't want to maintain
diff --git a/src/cdk/overlay/position/flexible-connected-position-strategy.spec.ts b/src/cdk/overlay/position/flexible-connected-position-strategy.spec.ts
index 8edb456a4ff8..4f30a0b485c2 100644
--- a/src/cdk/overlay/position/flexible-connected-position-strategy.spec.ts
+++ b/src/cdk/overlay/position/flexible-connected-position-strategy.spec.ts
@@ -1575,7 +1575,7 @@ describe('FlexibleConnectedPositionStrategy', () => {
}]);
strategy.withScrollableContainers([
- new CdkScrollable(new ElementRef(scrollable), null!, null!)
+ new CdkScrollable(new ElementRef(scrollable), null!, null!)
]);
positionChangeHandler = jasmine.createSpy('positionChange handler');
diff --git a/src/cdk/overlay/position/flexible-connected-position-strategy.ts b/src/cdk/overlay/position/flexible-connected-position-strategy.ts
index f033d6d784d0..75791a3c7c16 100644
--- a/src/cdk/overlay/position/flexible-connected-position-strategy.ts
+++ b/src/cdk/overlay/position/flexible-connected-position-strategy.ts
@@ -132,7 +132,7 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
connectedTo: ElementRef | HTMLElement,
private _viewportRuler: ViewportRuler,
private _document: Document,
- // @deletion-target 7.0.0 `_platform` and `_overlayContainer` parameters to be made required.
+ // @breaking-change 7.0.0 `_platform` and `_overlayContainer` parameters to be made required.
private _platform?: Platform,
private _overlayContainer?: OverlayContainer) {
this.setOrigin(connectedTo);
@@ -171,7 +171,7 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
*/
apply(): void {
// We shouldn't do anything if the strategy was disposed or we're on the server.
- // @deletion-target 7.0.0 Remove `_platform` null check once it's guaranteed to be defined.
+ // @breaking-change 7.0.0 Remove `_platform` null check once it's guaranteed to be defined.
if (this._isDisposed || (this._platform && !this._platform.isBrowser)) {
return;
}
@@ -842,7 +842,7 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
overlayPoint = this._pushOverlayOnScreen(overlayPoint, this._overlayRect);
}
- // @deletion-target 7.0.0 Currently the `_overlayContainer` is optional in order to avoid a
+ // @breaking-change 7.0.0 Currently the `_overlayContainer` is optional in order to avoid a
// breaking change. The null check here can be removed once the `_overlayContainer` becomes
// a required parameter.
let virtualKeyboardOffset = this._overlayContainer ?
diff --git a/src/cdk/overlay/position/global-position-strategy.ts b/src/cdk/overlay/position/global-position-strategy.ts
index 389c67506288..1787e5832355 100644
--- a/src/cdk/overlay/position/global-position-strategy.ts
+++ b/src/cdk/overlay/position/global-position-strategy.ts
@@ -93,7 +93,7 @@ export class GlobalPositionStrategy implements PositionStrategy {
* Sets the overlay width and clears any previously set width.
* @param value New width for the overlay
* @deprecated Pass the `width` through the `OverlayConfig`.
- * @deletion-target 7.0.0
+ * @breaking-change 7.0.0
*/
width(value: string = ''): this {
if (this._overlayRef) {
@@ -109,7 +109,7 @@ export class GlobalPositionStrategy implements PositionStrategy {
* Sets the overlay height and clears any previously set height.
* @param value New height for the overlay
* @deprecated Pass the `height` through the `OverlayConfig`.
- * @deletion-target 7.0.0
+ * @breaking-change 7.0.0
*/
height(value: string = ''): this {
if (this._overlayRef) {
diff --git a/src/cdk/overlay/position/overlay-position-builder.ts b/src/cdk/overlay/position/overlay-position-builder.ts
index ad8705f49d36..864c30a3b037 100644
--- a/src/cdk/overlay/position/overlay-position-builder.ts
+++ b/src/cdk/overlay/position/overlay-position-builder.ts
@@ -23,7 +23,7 @@ export class OverlayPositionBuilder {
constructor(
private _viewportRuler: ViewportRuler,
@Inject(DOCUMENT) private _document: any,
- // @deletion-target 7.0.0 `_platform` and `_overlayContainer` parameters to be made required.
+ // @breaking-change 7.0.0 `_platform` and `_overlayContainer` parameters to be made required.
@Optional() private _platform?: Platform,
@Optional() private _overlayContainer?: OverlayContainer) { }
@@ -40,7 +40,7 @@ export class OverlayPositionBuilder {
* @param originPos
* @param overlayPos
* @deprecated Use `flexibleConnectedTo` instead.
- * @deletion-target 7.0.0
+ * @breaking-change 7.0.0
*/
connectedTo(
elementRef: ElementRef,
diff --git a/src/cdk/platform/features.ts b/src/cdk/platform/features.ts
index 10cd148f40f6..6b31384fc376 100644
--- a/src/cdk/platform/features.ts
+++ b/src/cdk/platform/features.ts
@@ -27,6 +27,12 @@ export function supportsPassiveEventListeners(): boolean {
return supportsPassiveEvents;
}
+/** Check whether the browser supports scroll behaviors. */
+export function supportsScrollBehavior(): boolean {
+ return !!(document && document.documentElement && document.documentElement.style &&
+ 'scrollBehavior' in document.documentElement.style);
+}
+
/** Cached result Set of input types support by the current browser. */
let supportedInputTypes: Set;
diff --git a/src/cdk/platform/platform.ts b/src/cdk/platform/platform.ts
index fd14d3bdd019..a708f4de4577 100755
--- a/src/cdk/platform/platform.ts
+++ b/src/cdk/platform/platform.ts
@@ -68,7 +68,7 @@ export class Platform {
SAFARI: boolean = this.isBrowser && /safari/i.test(navigator.userAgent) && this.WEBKIT;
/**
- * @deletion-target v7.0.0 remove optional decorator
+ * @breaking-change v7.0.0 remove optional decorator
*/
constructor(@Optional() @Inject(PLATFORM_ID) private _platformId?: Object) {
}
diff --git a/src/cdk/scrolling/scroll-dispatcher.spec.ts b/src/cdk/scrolling/scroll-dispatcher.spec.ts
index 6e5624a7a190..03f4e305530d 100644
--- a/src/cdk/scrolling/scroll-dispatcher.spec.ts
+++ b/src/cdk/scrolling/scroll-dispatcher.spec.ts
@@ -117,7 +117,7 @@ describe('ScrollDispatcher', () => {
describe('Nested scrollables', () => {
let scroll: ScrollDispatcher;
let fixture: ComponentFixture;
- let element: ElementRef;
+ let element: ElementRef;
beforeEach(inject([ScrollDispatcher], (s: ScrollDispatcher) => {
scroll = s;
@@ -228,7 +228,7 @@ describe('ScrollDispatcher', () => {
})
class ScrollingComponent {
@ViewChild(CdkScrollable) scrollable: CdkScrollable;
- @ViewChild('scrollingElement') scrollingElement: ElementRef;
+ @ViewChild('scrollingElement') scrollingElement: ElementRef;
}
@@ -245,7 +245,7 @@ class ScrollingComponent {
`
})
class NestedScrollingComponent {
- @ViewChild('interestingElement') interestingElement: ElementRef;
+ @ViewChild('interestingElement') interestingElement: ElementRef;
}
const TEST_COMPONENTS = [ScrollingComponent, NestedScrollingComponent];
diff --git a/src/cdk/scrolling/scroll-dispatcher.ts b/src/cdk/scrolling/scroll-dispatcher.ts
index a17fd96c2bbc..9af317c31e06 100644
--- a/src/cdk/scrolling/scroll-dispatcher.ts
+++ b/src/cdk/scrolling/scroll-dispatcher.ts
@@ -141,14 +141,14 @@ export class ScrollDispatcher implements OnDestroy {
/** Returns true if the element is contained within the provided Scrollable. */
private _scrollableContainsElement(scrollable: CdkScrollable, elementRef: ElementRef): boolean {
- let element = elementRef.nativeElement;
+ let element: HTMLElement | null = elementRef.nativeElement;
let scrollableElement = scrollable.getElementRef().nativeElement;
// Traverse through the element parents until we reach null, checking if any of the elements
// are the scrollable's element.
do {
if (element == scrollableElement) { return true; }
- } while (element = element.parentElement);
+ } while (element = element!.parentElement);
return false;
}
@@ -170,13 +170,13 @@ export class ScrollDispatcher implements OnDestroy {
}
-/** @docs-private @deprecated @deletion-target 7.0.0 */
+/** @docs-private @deprecated @breaking-change 7.0.0 */
export function SCROLL_DISPATCHER_PROVIDER_FACTORY(
parentDispatcher: ScrollDispatcher, ngZone: NgZone, platform: Platform) {
return parentDispatcher || new ScrollDispatcher(ngZone, platform);
}
-/** @docs-private @deprecated @deletion-target 7.0.0 */
+/** @docs-private @deprecated @breaking-change 7.0.0 */
export const SCROLL_DISPATCHER_PROVIDER = {
// If there is already a ScrollDispatcher available, use that. Otherwise, provide a new one.
provide: ScrollDispatcher,
diff --git a/src/cdk/scrolling/viewport-ruler.ts b/src/cdk/scrolling/viewport-ruler.ts
index 779c9dd9f0de..f8e8c6a166d2 100644
--- a/src/cdk/scrolling/viewport-ruler.ts
+++ b/src/cdk/scrolling/viewport-ruler.ts
@@ -123,14 +123,14 @@ export class ViewportRuler implements OnDestroy {
}
-/** @docs-private @deprecated @deletion-target 7.0.0 */
+/** @docs-private @deprecated @breaking-change 7.0.0 */
export function VIEWPORT_RULER_PROVIDER_FACTORY(parentRuler: ViewportRuler,
platform: Platform,
ngZone: NgZone) {
return parentRuler || new ViewportRuler(platform, ngZone);
}
-/** @docs-private @deprecated @deletion-target 7.0.0 */
+/** @docs-private @deprecated @breaking-change 7.0.0 */
export const VIEWPORT_RULER_PROVIDER = {
// If there is already a ViewportRuler available, use that. Otherwise, provide a new one.
provide: ViewportRuler,
diff --git a/src/cdk/stepper/stepper.ts b/src/cdk/stepper/stepper.ts
index c216a9556b26..a2df89e7e0f3 100644
--- a/src/cdk/stepper/stepper.ts
+++ b/src/cdk/stepper/stepper.ts
@@ -19,6 +19,7 @@ import {
ContentChildren,
Directive,
EventEmitter,
+ ElementRef,
forwardRef,
Inject,
Input,
@@ -31,6 +32,7 @@ import {
ViewChild,
ViewEncapsulation,
} from '@angular/core';
+import {DOCUMENT} from '@angular/common';
import {AbstractControl} from '@angular/forms';
import {CdkStepLabel} from './step-label';
import {Observable, Subject, of as obaservableOf} from 'rxjs';
@@ -164,6 +166,12 @@ export class CdkStepper implements AfterViewInit, OnDestroy {
/** Used for managing keyboard focus. */
private _keyManager: FocusKeyManager;
+ /**
+ * @breaking-change 8.0.0 Remove `| undefined` once the `_document`
+ * constructor param is required.
+ */
+ private _document: Document | undefined;
+
/** The list of step components that the stepper is holding. */
@ContentChildren(CdkStep) _steps: QueryList;
@@ -200,7 +208,7 @@ export class CdkStepper implements AfterViewInit, OnDestroy {
/** The step that is selected. */
@Input()
get selected(): CdkStep {
- // @deletion-target 7.0.0 Change return type to `CdkStep | undefined`.
+ // @breaking-change 7.0.0 Change return type to `CdkStep | undefined`.
return this._steps ? this._steps.toArray()[this.selectedIndex] : undefined!;
}
set selected(step: CdkStep) {
@@ -218,8 +226,12 @@ export class CdkStepper implements AfterViewInit, OnDestroy {
constructor(
@Optional() private _dir: Directionality,
- private _changeDetectorRef: ChangeDetectorRef) {
+ private _changeDetectorRef: ChangeDetectorRef,
+ // @breaking-change 8.0.0 `_elementRef` and `_document` parameters to become required.
+ private _elementRef?: ElementRef,
+ @Inject(DOCUMENT) _document?: any) {
this._groupId = nextId++;
+ this._document = _document;
}
ngAfterViewInit() {
@@ -232,6 +244,12 @@ export class CdkStepper implements AfterViewInit, OnDestroy {
.subscribe(direction => this._keyManager.withHorizontalOrientation(direction));
this._keyManager.updateActiveItemIndex(this._selectedIndex);
+
+ this._steps.changes.pipe(takeUntil(this._destroyed)).subscribe(() => {
+ if (!this.selected) {
+ this._selectedIndex = Math.max(this._selectedIndex - 1, 0);
+ }
+ });
}
ngOnDestroy() {
@@ -305,7 +323,14 @@ export class CdkStepper implements AfterViewInit, OnDestroy {
selectedStep: stepsArray[newIndex],
previouslySelectedStep: stepsArray[this._selectedIndex],
});
- this._keyManager.updateActiveItemIndex(newIndex);
+
+ // If focus is inside the stepper, move it to the next header, otherwise it may become
+ // lost when the active step content is hidden. We can't be more granular with the check
+ // (e.g. checking whether focus is inside the active step), because we don't have a
+ // reference to the elements that are rendering out the content.
+ this._containsFocus() ? this._keyManager.setActiveItem(newIndex) :
+ this._keyManager.updateActiveItemIndex(newIndex);
+
this._selectedIndex = newIndex;
this._stateChanged();
}
@@ -348,4 +373,15 @@ export class CdkStepper implements AfterViewInit, OnDestroy {
private _layoutDirection(): Direction {
return this._dir && this._dir.value === 'rtl' ? 'rtl' : 'ltr';
}
+
+ /** Checks whether the stepper contains the focused element. */
+ private _containsFocus(): boolean {
+ if (!this._document || !this._elementRef) {
+ return false;
+ }
+
+ const stepperElement = this._elementRef.nativeElement;
+ const focusedElement = this._document.activeElement;
+ return stepperElement === focusedElement || stepperElement.contains(focusedElement);
+ }
}
diff --git a/src/cdk/table/BUILD.bazel b/src/cdk/table/BUILD.bazel
index bd6e1469962c..cc610cb81733 100644
--- a/src/cdk/table/BUILD.bazel
+++ b/src/cdk/table/BUILD.bazel
@@ -11,6 +11,7 @@ ng_module(
"//src/cdk/bidi",
"//src/cdk/collections",
"//src/cdk/coercion",
+ "//src/cdk/platform",
"@rxjs",
],
tsconfig = "//src/cdk:tsconfig-build.json",
diff --git a/src/cdk/table/row.ts b/src/cdk/table/row.ts
index 6b5363f62c92..d9cf19517f3c 100644
--- a/src/cdk/table/row.ts
+++ b/src/cdk/table/row.ts
@@ -14,6 +14,7 @@ import {
IterableDiffer,
IterableDiffers,
OnChanges,
+ OnDestroy,
SimpleChanges,
TemplateRef,
ViewContainerRef,
@@ -207,7 +208,7 @@ export interface CdkCellOutletMultiRowContext {
* @docs-private
*/
@Directive({selector: '[cdkCellOutlet]'})
-export class CdkCellOutlet {
+export class CdkCellOutlet implements OnDestroy {
/** The ordered list of cells to render within this outlet's view container */
cells: CdkCellDef[];
@@ -226,6 +227,14 @@ export class CdkCellOutlet {
constructor(public _viewContainer: ViewContainerRef) {
CdkCellOutlet.mostRecentCellOutlet = this;
}
+
+ ngOnDestroy() {
+ // If this was the last outlet being rendered in the view, remove the reference
+ // from the static property after it has been destroyed to avoid leaking memory.
+ if (CdkCellOutlet.mostRecentCellOutlet === this) {
+ CdkCellOutlet.mostRecentCellOutlet = null;
+ }
+ }
}
/** Header template container that contains the cell outlet. Adds the right class and role. */
diff --git a/src/cdk/table/sticky-styler.ts b/src/cdk/table/sticky-styler.ts
index 8525fdb3e8b9..763cb0acc0ed 100644
--- a/src/cdk/table/sticky-styler.ts
+++ b/src/cdk/table/sticky-styler.ts
@@ -32,10 +32,12 @@ export class StickyStyler {
* sticky positioning applied.
* @param direction The directionality context of the table (ltr/rtl); affects column positioning
* by reversing left/right positions.
+ * @param _isBrowser Whether the table is currently being rendered on the server or the client.
*/
constructor(private isNativeHtmlTable: boolean,
private stickCellCss: string,
- public direction: Direction) { }
+ public direction: Direction,
+ private _isBrowser = true) { }
/**
* Clears the sticky positioning styles from the row and its cells by resetting the `position`
@@ -45,7 +47,14 @@ export class StickyStyler {
*/
clearStickyPositioning(rows: HTMLElement[], stickyDirections: StickyDirection[]) {
for (const row of rows) {
+ // If the row isn't an element (e.g. if it's an `ng-container`),
+ // it won't have inline styles or `children` so we skip it.
+ if (row.nodeType !== row.ELEMENT_NODE) {
+ continue;
+ }
+
this._removeStickyStyle(row, stickyDirections);
+
for (let i = 0; i < row.children.length; i++) {
const cell = row.children[i] as HTMLElement;
this._removeStickyStyle(cell, stickyDirections);
@@ -66,7 +75,7 @@ export class StickyStyler {
rows: HTMLElement[], stickyStartStates: boolean[], stickyEndStates: boolean[]) {
const hasStickyColumns =
stickyStartStates.some(state => state) || stickyEndStates.some(state => state);
- if (!rows.length || !hasStickyColumns) {
+ if (!rows.length || !hasStickyColumns || !this._isBrowser) {
return;
}
@@ -104,6 +113,11 @@ export class StickyStyler {
*
*/
stickRows(rowsToStick: HTMLElement[], stickyStates: boolean[], position: 'top' | 'bottom') {
+ // Since we can't measure the rows on the server, we can't stick the rows properly.
+ if (!this._isBrowser) {
+ return;
+ }
+
// If positioning the rows to the bottom, reverse their order when evaluating the sticky
// position such that the last row stuck will be "bottom: 0px" and so on.
const rows = position === 'bottom' ? rowsToStick.reverse() : rowsToStick;
diff --git a/src/cdk/table/table.spec.ts b/src/cdk/table/table.spec.ts
index fecc5783f907..7bd119f6b335 100644
--- a/src/cdk/table/table.spec.ts
+++ b/src/cdk/table/table.spec.ts
@@ -14,7 +14,7 @@ import {BehaviorSubject, combineLatest, Observable, of as observableOf} from 'rx
import {map} from 'rxjs/operators';
import {CdkColumnDef} from './cell';
import {CdkTableModule} from './index';
-import {CdkHeaderRowDef, CdkRowDef} from './row';
+import {CdkHeaderRowDef, CdkRowDef, CdkCellOutlet} from './row';
import {CdkTable} from './table';
import {
getTableDuplicateColumnNameError,
@@ -137,6 +137,17 @@ describe('CdkTable', () => {
});
});
+ it('should clear the `mostRecentCellOutlet` on destroy', () => {
+ // Note: we cast the assertions here to booleans, because they may
+ // contain circular objects which will throw Jasmine into an infinite
+ // when its tries to stringify them to show a test failure.
+ expect(!!CdkCellOutlet.mostRecentCellOutlet).toBe(true);
+
+ fixture.destroy();
+
+ expect(!!CdkCellOutlet.mostRecentCellOutlet).toBe(false);
+ });
+
describe('should correctly use the differ to add/remove/move rows', () => {
function addInitialIndexAttribute() {
// Each row receives an attribute 'initialIndex' the element's original place
diff --git a/src/cdk/table/table.ts b/src/cdk/table/table.ts
index 303bfb397b47..ecbce805c268 100644
--- a/src/cdk/table/table.ts
+++ b/src/cdk/table/table.ts
@@ -31,7 +31,9 @@ import {
ViewChild,
ViewContainerRef,
ViewEncapsulation,
+ Inject,
} from '@angular/core';
+import {DOCUMENT} from '@angular/common';
import {BehaviorSubject, Observable, of as observableOf, Subject, Subscription} from 'rxjs';
import {takeUntil} from 'rxjs/operators';
import {CdkColumnDef} from './cell';
@@ -55,6 +57,7 @@ import {
import {coerceBooleanProperty} from '@angular/cdk/coercion';
import {StickyStyler} from './sticky-styler';
import {Direction, Directionality} from '@angular/cdk/bidi';
+import {Platform} from '@angular/cdk/platform';
/** Interface used to provide an outlet for rows to be inserted into. */
export interface RowOutlet {
@@ -67,7 +70,8 @@ export interface RowOutlet {
*/
@Directive({selector: '[rowOutlet]'})
export class DataRowOutlet implements RowOutlet {
- constructor(public viewContainer: ViewContainerRef, public elementRef: ElementRef) { }
+ constructor(public viewContainer: ViewContainerRef,
+ public elementRef: ElementRef) { }
}
/**
@@ -76,7 +80,8 @@ export class DataRowOutlet implements RowOutlet {
*/
@Directive({selector: '[headerRowOutlet]'})
export class HeaderRowOutlet implements RowOutlet {
- constructor(public viewContainer: ViewContainerRef, public elementRef: ElementRef) { }
+ constructor(public viewContainer: ViewContainerRef,
+ public elementRef: ElementRef) { }
}
/**
@@ -85,7 +90,8 @@ export class HeaderRowOutlet implements RowOutlet {
*/
@Directive({selector: '[footerRowOutlet]'})
export class FooterRowOutlet implements RowOutlet {
- constructor(public viewContainer: ViewContainerRef, public elementRef: ElementRef) { }
+ constructor(public viewContainer: ViewContainerRef,
+ public elementRef: ElementRef) { }
}
/**
@@ -148,6 +154,8 @@ export interface RenderRow {
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CdkTable implements AfterContentChecked, CollectionViewer, OnDestroy, OnInit {
+ private _document: Document;
+
/** Latest data provided by the data source. */
protected _data: T[];
@@ -359,11 +367,19 @@ export class CdkTable implements AfterContentChecked, CollectionViewer, OnDes
protected readonly _changeDetectorRef: ChangeDetectorRef,
protected readonly _elementRef: ElementRef,
@Attribute('role') role: string,
- @Optional() protected readonly _dir: Directionality) {
+ @Optional() protected readonly _dir: Directionality,
+ /**
+ * @deprecated
+ * @breaking-change 8.0.0 `_document` and `_platform` to
+ * be made into a required parameters.
+ */
+ @Inject(DOCUMENT) _document?: any,
+ private _platform?: Platform) {
if (!role) {
this._elementRef.nativeElement.setAttribute('role', 'grid');
}
+ this._document = _document;
this._isNativeHtmlTable = this._elementRef.nativeElement.nodeName === 'TABLE';
}
@@ -478,7 +494,7 @@ export class CdkTable implements AfterContentChecked, CollectionViewer, OnDes
* table's content is checked.
* @docs-private
* @deprecated Use `addHeaderRowDef` and `removeHeaderRowDef` instead
- * @deletion-target 8.0.0
+ * @breaking-change 8.0.0
*/
setHeaderRowDef(headerRowDef: CdkHeaderRowDef) {
this._customHeaderRowDefs = new Set([headerRowDef]);
@@ -491,7 +507,7 @@ export class CdkTable implements AfterContentChecked, CollectionViewer, OnDes
* table's content is checked.
* @docs-private
* @deprecated Use `addFooterRowDef` and `removeFooterRowDef` instead
- * @deletion-target 8.0.0
+ * @breaking-change 8.0.0
*/
setFooterRowDef(footerRowDef: CdkFooterRowDef) {
this._customFooterRowDefs = new Set([footerRowDef]);
@@ -947,7 +963,9 @@ export class CdkTable implements AfterContentChecked, CollectionViewer, OnDes
];
for (const section of sections) {
- const element = document.createElement(section.tag);
+ // @breaking-change 8.0.0 remove the `|| document` once the `_document` is a required param.
+ const documentRef = this._document || document;
+ const element = documentRef.createElement(section.tag);
element.appendChild(section.outlet.elementRef.nativeElement);
this._elementRef.nativeElement.appendChild(element);
}
@@ -999,7 +1017,9 @@ export class CdkTable implements AfterContentChecked, CollectionViewer, OnDes
*/
private _setupStickyStyler() {
const direction: Direction = this._dir ? this._dir.value : 'ltr';
- this._stickyStyler = new StickyStyler(this._isNativeHtmlTable, this.stickyCssClass, direction);
+ this._stickyStyler = new StickyStyler(this._isNativeHtmlTable,
+ // @breaking-change 8.0.0 remove the null check for `this._platform`.
+ this.stickyCssClass, direction, this._platform ? this._platform.isBrowser : true);
(this._dir ? this._dir.change : observableOf())
.pipe(takeUntil(this._onDestroy))
.subscribe(value => {
@@ -1010,6 +1030,6 @@ export class CdkTable implements AfterContentChecked, CollectionViewer, OnDes
}
/** Utility function that gets a merged list of the entries in a QueryList and values of a Set. */
-function mergeQueryListAndSet(queryList: QueryList, set: Set): T[] {
+function mergeQueryListAndSet(queryList: QueryList, set: Set): T[] {
return queryList.toArray().concat(Array.from(set));
}
diff --git a/src/cdk/testing/event-objects.ts b/src/cdk/testing/event-objects.ts
index bc2358786208..040794e20142 100644
--- a/src/cdk/testing/event-objects.ts
+++ b/src/cdk/testing/event-objects.ts
@@ -26,6 +26,10 @@ export function createMouseEvent(type: string, x = 0, y = 0) {
0, /* button */
null /* relatedTarget */);
+ // `initMouseEvent` doesn't allow us to pass the `buttons` and
+ // defaults it to 0 which looks like a fake event.
+ Object.defineProperty(event, 'buttons', {get: () => 1});
+
return event;
}
diff --git a/src/cdk/text-field/_text-field.scss b/src/cdk/text-field/_text-field.scss
index 82ecffcf4800..46a79b6d3180 100644
--- a/src/cdk/text-field/_text-field.scss
+++ b/src/cdk/text-field/_text-field.scss
@@ -1,10 +1,11 @@
// Core styles that enable monitoring autofill state of text fields.
@mixin cdk-text-field {
// Keyframes that apply no styles, but allow us to monitor when an text field becomes autofilled
- // by watching for the animation events that are fired when they start.
+ // by watching for the animation events that are fired when they start. Note: the /*!*/ comment is
+ // needed to prevent LibSass from stripping the keyframes out.
// Based on: https://medium.com/@brunn/detecting-autofilled-fields-in-javascript-aed598d25da7
- @keyframes cdk-text-field-autofill-start {}
- @keyframes cdk-text-field-autofill-end {}
+ @keyframes cdk-text-field-autofill-start {/*!*/}
+ @keyframes cdk-text-field-autofill-end {/*!*/}
.cdk-text-field-autofill-monitored:-webkit-autofill {
animation-name: cdk-text-field-autofill-start;
diff --git a/src/cdk/text-field/autofill.spec.ts b/src/cdk/text-field/autofill.spec.ts
index 97bd1bbc02de..5f686f4705f4 100644
--- a/src/cdk/text-field/autofill.spec.ts
+++ b/src/cdk/text-field/autofill.spec.ts
@@ -155,7 +155,7 @@ describe('AutofillMonitor', () => {
let animationStartCallback: Function = () => {};
inputEl.addEventListener.and.callFake((_, cb) => animationStartCallback = cb);
const autofillStream = autofillMonitor.monitor(inputEl);
- const spy = jasmine.createSpy('zone spy');
+ const spy = jasmine.createSpy('autofill spy');
autofillStream.subscribe(() => spy(NgZone.isInAngularZone()));
expect(spy).not.toHaveBeenCalled();
@@ -163,6 +163,17 @@ describe('AutofillMonitor', () => {
animationStartCallback({animationName: 'cdk-text-field-autofill-start', target: inputEl});
expect(spy).toHaveBeenCalledWith(true);
});
+
+ it('should not emit on init if input is unfilled', () => {
+ const inputEl = testComponent.input1.nativeElement;
+ let animationStartCallback: Function = () => {};
+ inputEl.addEventListener.and.callFake((_, cb) => animationStartCallback = cb);
+ const autofillStream = autofillMonitor.monitor(inputEl);
+ const spy = jasmine.createSpy('autofill spy');
+ autofillStream.subscribe(() => spy());
+ animationStartCallback({animationName: 'cdk-text-field-autofill-end', target: inputEl});
+ expect(spy).not.toHaveBeenCalled();
+ });
});
describe('cdkAutofill', () => {
@@ -187,13 +198,13 @@ describe('cdkAutofill', () => {
}));
it('should monitor host element on init', () => {
- expect(autofillMonitor.monitor).toHaveBeenCalledWith(testComponent.input.nativeElement);
+ expect(autofillMonitor.monitor).toHaveBeenCalledWith(testComponent.input);
});
it('should stop monitoring host element on destroy', () => {
expect(autofillMonitor.stopMonitoring).not.toHaveBeenCalled();
fixture.destroy();
- expect(autofillMonitor.stopMonitoring).toHaveBeenCalledWith(testComponent.input.nativeElement);
+ expect(autofillMonitor.stopMonitoring).toHaveBeenCalledWith(testComponent.input);
});
});
@@ -205,14 +216,16 @@ describe('cdkAutofill', () => {
`
})
class Inputs {
- @ViewChild('input1') input1: ElementRef;
- @ViewChild('input2') input2: ElementRef;
- @ViewChild('input3') input3: ElementRef;
+ // Cast to `any` so we can stub out some methods in the tests.
+ @ViewChild('input1') input1: ElementRef;
+ @ViewChild('input2') input2: ElementRef;
+ @ViewChild('input3') input3: ElementRef;
}
@Component({
template: ``
})
class InputWithCdkAutofilled {
- @ViewChild('input') input: ElementRef;
+ // Cast to `any` so we can stub out some methods in the tests.
+ @ViewChild('input') input: ElementRef;
}
diff --git a/src/cdk/text-field/autofill.ts b/src/cdk/text-field/autofill.ts
index a73827183eb3..ffdf7ade8464 100644
--- a/src/cdk/text-field/autofill.ts
+++ b/src/cdk/text-field/autofill.ts
@@ -56,11 +56,21 @@ export class AutofillMonitor implements OnDestroy {
* @param element The element to monitor.
* @return A stream of autofill state changes.
*/
- monitor(element: Element): Observable {
+ monitor(element: Element): Observable;
+
+ /**
+ * Monitor for changes in the autofill state of the given input element.
+ * @param element The element to monitor.
+ * @return A stream of autofill state changes.
+ */
+ monitor(element: ElementRef): Observable;
+
+ monitor(elementOrRef: Element | ElementRef): Observable {
if (!this._platform.isBrowser) {
return EMPTY;
}
+ const element = elementOrRef instanceof ElementRef ? elementOrRef.nativeElement : elementOrRef;
const info = this._monitoredElements.get(element);
if (info) {
@@ -68,12 +78,18 @@ export class AutofillMonitor implements OnDestroy {
}
const result = new Subject();
+ const cssClass = 'cdk-text-field-autofilled';
const listener = (event: AnimationEvent) => {
- if (event.animationName === 'cdk-text-field-autofill-start') {
- element.classList.add('cdk-text-field-autofilled');
+ // Animation events fire on initial element render, we check for the presence of the autofill
+ // CSS class to make sure this is a real change in state, not just the initial render before
+ // we fire off events.
+ if (event.animationName === 'cdk-text-field-autofill-start' &&
+ !element.classList.contains(cssClass)) {
+ element.classList.add(cssClass);
this._ngZone.run(() => result.next({target: event.target as Element, isAutofilled: true}));
- } else if (event.animationName === 'cdk-text-field-autofill-end') {
- element.classList.remove('cdk-text-field-autofilled');
+ } else if (event.animationName === 'cdk-text-field-autofill-end' &&
+ element.classList.contains(cssClass)) {
+ element.classList.remove(cssClass);
this._ngZone.run(() => result.next({target: event.target as Element, isAutofilled: false}));
}
};
@@ -97,7 +113,16 @@ export class AutofillMonitor implements OnDestroy {
* Stop monitoring the autofill state of the given input element.
* @param element The element to stop monitoring.
*/
- stopMonitoring(element: Element) {
+ stopMonitoring(element: Element);
+
+ /**
+ * Stop monitoring the autofill state of the given input element.
+ * @param element The element to stop monitoring.
+ */
+ stopMonitoring(element: ElementRef);
+
+ stopMonitoring(elementOrRef: Element | ElementRef) {
+ const element = elementOrRef instanceof ElementRef ? elementOrRef.nativeElement : elementOrRef;
const info = this._monitoredElements.get(element);
if (info) {
@@ -123,15 +148,16 @@ export class CdkAutofill implements OnDestroy, OnInit {
/** Emits when the autofill state of the element changes. */
@Output() cdkAutofill: EventEmitter = new EventEmitter();
- constructor(private _elementRef: ElementRef, private _autofillMonitor: AutofillMonitor) {}
+ constructor(private _elementRef: ElementRef,
+ private _autofillMonitor: AutofillMonitor) {}
ngOnInit() {
this._autofillMonitor
- .monitor(this._elementRef.nativeElement)
+ .monitor(this._elementRef)
.subscribe(event => this.cdkAutofill.emit(event));
}
ngOnDestroy() {
- this._autofillMonitor.stopMonitoring(this._elementRef.nativeElement);
+ this._autofillMonitor.stopMonitoring(this._elementRef);
}
}
diff --git a/src/cdk/text-field/autosize.ts b/src/cdk/text-field/autosize.ts
index 5b132b06c625..2df4384b9e13 100644
--- a/src/cdk/text-field/autosize.ts
+++ b/src/cdk/text-field/autosize.ts
@@ -78,7 +78,7 @@ export class CdkTextareaAutosize implements AfterViewInit, DoCheck, OnDestroy {
private _cachedLineHeight: number;
constructor(
- private _elementRef: ElementRef,
+ private _elementRef: ElementRef,
private _platform: Platform,
private _ngZone: NgZone) {
this._textareaElement = this._elementRef.nativeElement as HTMLTextAreaElement;
diff --git a/src/cdk/tree/nested-node.ts b/src/cdk/tree/nested-node.ts
index 4795d10de1ca..393f0741eb1e 100644
--- a/src/cdk/tree/nested-node.ts
+++ b/src/cdk/tree/nested-node.ts
@@ -63,7 +63,7 @@ export class CdkNestedTreeNode extends CdkTreeNode implements AfterContent
/** The children node placeholder. */
@ContentChildren(CdkTreeNodeOutlet) nodeOutlet: QueryList;
- constructor(protected _elementRef: ElementRef,
+ constructor(protected _elementRef: ElementRef,
protected _tree: CdkTree,
protected _differs: IterableDiffers) {
super(_elementRef, _tree);
diff --git a/src/cdk/tree/padding.ts b/src/cdk/tree/padding.ts
index 1cee182752f1..4d38c545c3c7 100644
--- a/src/cdk/tree/padding.ts
+++ b/src/cdk/tree/padding.ts
@@ -46,7 +46,7 @@ export class CdkTreeNodePadding implements OnDestroy {
constructor(private _treeNode: CdkTreeNode,
private _tree: CdkTree,
private _renderer: Renderer2,
- private _element: ElementRef,
+ private _element: ElementRef,
@Optional() private _dir: Directionality) {
this._setPadding();
if (this._dir) {
diff --git a/src/cdk/tree/tree.spec.ts b/src/cdk/tree/tree.spec.ts
index e7ffa605c7aa..a91038c61aa1 100644
--- a/src/cdk/tree/tree.spec.ts
+++ b/src/cdk/tree/tree.spec.ts
@@ -17,7 +17,7 @@ import {TreeControl} from './control/tree-control';
import {FlatTreeControl} from './control/flat-tree-control';
import {NestedTreeControl} from './control/nested-tree-control';
import {CdkTreeModule} from './index';
-import {CdkTree} from './tree';
+import {CdkTree, CdkTreeNode} from './tree';
import {getTreeControlFunctionsMissingError} from './tree-errors';
@@ -35,6 +35,20 @@ describe('CdkTree', () => {
}).compileComponents();
}
+ it('should clear out the `mostRecentTreeNode` on destroy', () => {
+ configureCdkTreeTestingModule([SimpleCdkTreeApp]);
+ const fixture = TestBed.createComponent(SimpleCdkTreeApp);
+ fixture.detectChanges();
+
+ // Cast the assertions to a boolean to avoid Jasmine going into an
+ // infinite loop when stringifying the object, if the test starts failing.
+ expect(!!CdkTreeNode.mostRecentTreeNode).toBe(true);
+
+ fixture.destroy();
+
+ expect(!!CdkTreeNode.mostRecentTreeNode).toBe(false);
+ });
+
describe('flat tree', () => {
describe('should initialize', () => {
let fixture: ComponentFixture;
diff --git a/src/cdk/tree/tree.ts b/src/cdk/tree/tree.ts
index 11e4052ed8ac..674937013013 100644
--- a/src/cdk/tree/tree.ts
+++ b/src/cdk/tree/tree.ts
@@ -76,7 +76,7 @@ export class CdkTree
/**
* Provides a stream containing the latest data array to render. Influenced by the tree's
* stream of view window (what dataNodes are currently on screen).
- * Data source can be an observable of data array, or a dara array to render.
+ * Data source can be an observable of data array, or a data array to render.
*/
@Input()
get dataSource(): DataSource | Observable | T[] { return this._dataSource; }
@@ -290,7 +290,7 @@ export class CdkTree
'class': 'cdk-tree-node',
},
})
-export class CdkTreeNode implements FocusableOption, OnDestroy {
+export class CdkTreeNode implements FocusableOption, OnDestroy {
/**
* The most recently created `CdkTreeNode`. We save it in static variable so we can retrieve it
* in `CdkTree` and set the data to it.
@@ -322,12 +322,18 @@ export class CdkTreeNode implements FocusableOption, OnDestroy {
*/
@Input() role: 'treeitem' | 'group' = 'treeitem';
- constructor(protected _elementRef: ElementRef,
+ constructor(protected _elementRef: ElementRef,
protected _tree: CdkTree) {
CdkTreeNode.mostRecentTreeNode = this as CdkTreeNode;
}
ngOnDestroy() {
+ // If this is the last tree node being destroyed,
+ // clear out the reference to avoid leaking memory.
+ if (CdkTreeNode.mostRecentTreeNode === this) {
+ CdkTreeNode.mostRecentTreeNode = null;
+ }
+
this._destroyed.next();
this._destroyed.complete();
}
diff --git a/src/demo-app/a11y/a11y.ts b/src/demo-app/a11y/a11y.ts
index f3e7edc9ef4f..988634dc684b 100644
--- a/src/demo-app/a11y/a11y.ts
+++ b/src/demo-app/a11y/a11y.ts
@@ -31,8 +31,8 @@ export class AccessibilityDemo implements OnDestroy {
private _routerSubscription = Subscription.EMPTY;
- @ViewChild('maincontent') mainContent: ElementRef;
- @ViewChild('header') sectionHeader: ElementRef;
+ @ViewChild('maincontent') mainContent: ElementRef;
+ @ViewChild('header') sectionHeader: ElementRef;
navItems = [
{name: 'Home', route: '.'},
diff --git a/src/demo-app/card/card-demo.html b/src/demo-app/card/card-demo.html
index bde2eee3829b..4c5c31e62053 100644
--- a/src/demo-app/card/card-demo.html
+++ b/src/demo-app/card/card-demo.html
@@ -3,20 +3,12 @@
Hello
-
-
- Card with title
- Subtitle
- ![]()
-
-
-
Subtitle
Card with title and footer
@@ -32,7 +24,7 @@
Card with title, footer, and inset-divider
@@ -75,4 +67,51 @@
+
+
+
+
+ Card
+ Small
+ ![]()
+
+
+ {{longText}}
+
+
+
+
+
+ Card
+ Medium
+ ![]()
+
+
+ {{longText}}
+
+
+
+
+
+ Card
+ Large
+ ![]()
+
+
+ {{longText}}
+
+
+
+
+
+ Card
+ Extra large
+ ![]()
+
+
+ {{longText}}
+
+
diff --git a/src/demo-app/card/card-demo.ts b/src/demo-app/card/card-demo.ts
index 7a2bcbbf1282..58a635617488 100644
--- a/src/demo-app/card/card-demo.ts
+++ b/src/demo-app/card/card-demo.ts
@@ -15,4 +15,11 @@ import {Component} from '@angular/core';
templateUrl: 'card-demo.html',
styleUrls: ['card-demo.css'],
})
-export class CardDemo {}
+export class CardDemo {
+ longText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor ' +
+ 'incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud ' +
+ 'exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor' +
+ ' in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur' +
+ ' sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id ' +
+ 'est laborum.';
+}
diff --git a/src/demo-app/demo-app/demo-app.ts b/src/demo-app/demo-app/demo-app.ts
index 72134f7e9344..2f406e41fcd2 100644
--- a/src/demo-app/demo-app/demo-app.ts
+++ b/src/demo-app/demo-app/demo-app.ts
@@ -96,11 +96,12 @@ export class DemoApp {
];
constructor(
- private _element: ElementRef,
+ private _element: ElementRef
+
+
+```
+
+### Targeting high contrast users
+The `a11y` package offers a mixin that allows you to target users that have the Windows high
+contrast mode turned on, via a media query. To target high contrast users, you can wrap your
+styles with the `cdk-high-contrast` mixin:
+
+```scss
+button {
+ @include cdk-high-contrast {
+ outline: solid 1px;
+ }
+}
+```
diff --git a/src/cdk/a11y/aria-describer/aria-describer.spec.ts b/src/cdk/a11y/aria-describer/aria-describer.spec.ts
index 2a098fedfea3..aa3b932552d0 100644
--- a/src/cdk/a11y/aria-describer/aria-describer.spec.ts
+++ b/src/cdk/a11y/aria-describer/aria-describer.spec.ts
@@ -181,16 +181,16 @@ function expectMessage(el: Element, message: string) {
`,
})
class TestApp {
- @ViewChild('element1') _element1: ElementRef;
+ @ViewChild('element1') _element1: ElementRefThis is supporting text.
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+{{longText}}
This is supporting text.
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+{{longText}}
+
Cards with media area
+ +To do
@@ -18,6 +19,7 @@
-
Done
@@ -34,6 +36,7 @@
+Horizontal list
{{item}}
@@ -43,6 +46,11 @@
Horizontal list
+
+
Free dragging
+Drag me around
+Data
{{todo.join(', ')}}
@@ -50,7 +58,14 @@ Data
{{horizontalData.join(', ')}}
-
Free dragging
-Drag me around
+
+
+ Lock position along axis
+
+ None
+ X axis
+ Y axis
+
+
diff --git a/src/demo-app/drag-drop/drag-drop-demo.scss b/src/demo-app/drag-drop/drag-drop-demo.scss
index b30f5796fb97..69e449a251a8 100644
--- a/src/demo-app/drag-drop/drag-drop-demo.scss
+++ b/src/demo-app/drag-drop/drag-drop-demo.scss
@@ -38,8 +38,8 @@
justify-content: space-between;
box-sizing: border-box;
- .cdk-drop-dragging & {
- transition: transform 500ms ease;
+ .cdk-drop-dragging &:not(.cdk-drag-placeholder) {
+ transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
.horizontal & {
@@ -65,11 +65,11 @@
}
.cdk-drag-animating {
- transition: transform 500ms ease;
+ transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
.cdk-drag-placeholder {
- opacity: 0.5;
+ opacity: 0;
}
.wrapper {
diff --git a/src/demo-app/drag-drop/drag-drop-demo.ts b/src/demo-app/drag-drop/drag-drop-demo.ts
index b72cedcf9304..0d08cf4aef82 100644
--- a/src/demo-app/drag-drop/drag-drop-demo.ts
+++ b/src/demo-app/drag-drop/drag-drop-demo.ts
@@ -19,6 +19,7 @@ import {CdkDragDrop, moveItemInArray, transferArrayItem} from '@angular/cdk-expe
encapsulation: ViewEncapsulation.None,
})
export class DragAndDropDemo {
+ axisLock: 'x' | 'y';
todo = [
'Come up with catchy start-up name',
'Add "blockchain" to name',
diff --git a/src/demo-app/expansion/expansion-demo.html b/src/demo-app/expansion/expansion-demo.html
index 29c4cecc9953..4128b240abde 100644
--- a/src/demo-app/expansion/expansion-demo.html
+++ b/src/demo-app/expansion/expansion-demo.html
@@ -55,17 +55,17 @@ Axis locking
+matAccordion
-
This is the content text that makes sense here.
This is the content text that makes sense here.
Random size
Fixed size
-+ Currently scrolled to item: {{scrolledIndex}} +
+ +
Item #{{i}} - ({{size}}px)
@@ -94,3 +121,45 @@
trackBy state name
{{state.capital}}
Use with <ol>
+
+-
+
- + {{state.name}} - {{state.capital}} + +
Use with <ul>
+
+-
+
- + {{state.name}} - {{state.capital}} + +
Use with <dl>
+
+-
+
- {{state.name}} +
- {{state.capital}} +
Use with <table>
+
+| {{state.name}} | +{{state.capital}} | +