Merge branch 'master' into support-disable-table-radio

Author: zvonimirfras

package-lock.json

@@ -1,4 +1,5 @@
 import {
+	ChangeDetectorRef,
 	Directive,
 	EventEmitter,
 	HostBinding,
@@ -95,6 +96,8 @@ export class PopoverContainer {
 		"left" | "left-bottom" | "left-top" |
 		"right" | "right-bottom" | "right-top" = "bottom";
 
+	constructor(private changeDetectorRef: ChangeDetectorRef) {}
+
 	handleChange(open: boolean, event: Event) {
 		if (this.isOpen !== open) {
 			this.isOpenChange.emit(open);
@@ -106,5 +109,6 @@ export class PopoverContainer {
 			this.onClose.emit(event);
 		}
 		this.isOpen = open;
+		this.changeDetectorRef.markForCheck();
 	}
 }

src/popover/popover.directive.ts

@@ -102,4 +102,11 @@ describe("Toggletip", () => {
 		fixture.detectChanges();
 		expect(toggletipEl.componentInstance.isOpen).toBeFalsy();
 	}));
+
+	it("should markForCheck given the changeDetectorRef is set", () => {
+		const spy = spyOn(toggletipEl.componentInstance.ref, "markForCheck");
+		buttonEl.nativeElement.click();
+		fixture.detectChanges();
+		expect(spy).toHaveBeenCalled();
+	});
 });

src/toggletip/toggletip.component.spec.ts

@@ -1,5 +1,7 @@
 import {
 	AfterViewInit,
+	ChangeDetectionStrategy,
+	ChangeDetectorRef,
 	Component,
 	ContentChild,
 	ElementRef,
@@ -23,6 +25,7 @@ import { ToggletipButton } from "./toggletip-button.directive";
  */
 @Component({
 	selector: "cds-toggletip, ibm-toggletip",
+	changeDetection: ChangeDetectionStrategy.OnPush,
 	template: `
 		<ng-content select="[cdsToggletipButton]"></ng-content>
 		<cds-popover-content>
@@ -42,8 +45,8 @@ export class Toggletip extends PopoverContainer implements AfterViewInit {
 
 	documentClick = this.handleFocusOut.bind(this);
 
-	constructor(private hostElement: ElementRef, private renderer: Renderer2) {
-		super();
+	constructor(private hostElement: ElementRef, private renderer: Renderer2, private ref: ChangeDetectorRef) {
+		super(ref);
 		this.highContrast = true;
 		this.dropShadow = false;
 	}

src/toggletip/toggletip.component.ts

@@ -51,4 +51,11 @@ describe("Definition tooltip", () => {
 		fixture.detectChanges();
 		expect(tooltipEl.componentInstance.isOpenChange.emit).toHaveBeenCalled();
 	});
+
+	it("should markForCheck given the changeDetectorRef is set", () => {
+		const spy = spyOn(tooltipEl.componentInstance.ref, "markForCheck");
+		buttonEl.triggerEventHandler("click", null);
+		fixture.detectChanges();
+		expect(spy).toHaveBeenCalled();
+	});
 });

src/tooltip/definition-tooltip.component.spec.ts

@@ -1,4 +1,6 @@
 import {
+	ChangeDetectionStrategy,
+	ChangeDetectorRef,
 	Component,
 	HostListener,
 	Input,
@@ -17,6 +19,7 @@ import { PopoverContainer } from "carbon-components-angular/popover";
  */
 @Component({
 	selector: "cds-tooltip-definition, ibm-tooltip-definition",
+	changeDetection: ChangeDetectionStrategy.OnPush,
 	template: `
 		<button
 			class="cds--definition-term"
@@ -57,8 +60,8 @@ export class TooltipDefinition extends PopoverContainer {
 	 */
 	@Input() description: string | TemplateRef<any>;
 
-	constructor() {
-		super();
+	constructor(private ref: ChangeDetectorRef) {
+		super(ref);
 		this.highContrast = true;
 		this.dropShadow = false;
 	}

src/tooltip/definition-tooptip.component.ts

@@ -68,4 +68,11 @@ describe("Tooltip", () => {
 		expect(tooltipEl.componentInstance.isOpenChange.emit).toHaveBeenCalled();
 		expect(tooltipEl.componentInstance.isOpen).toBeFalsy();
 	});
+
+	it("should markForCheck given the changeDetectorRef is set", () => {
+		const spy = spyOn(tooltipEl.componentInstance.ref, "markForCheck");
+		tooltipEl.nativeElement.dispatchEvent(new Event("focusin"));
+		fixture.detectChanges();
+		expect(spy).toHaveBeenCalled();
+	});
 });

src/tooltip/tooltip.component.spec.ts

@@ -1,5 +1,7 @@
 import {
 	AfterContentChecked,
+	ChangeDetectionStrategy,
+	ChangeDetectorRef,
 	Component,
 	ElementRef,
 	HostBinding,
@@ -21,6 +23,7 @@ import { PopoverContainer } from "carbon-components-angular/popover";
  */
 @Component({
 	selector: "cds-tooltip, ibm-tooltip",
+	changeDetection: ChangeDetectionStrategy.OnPush,
 	template: `
 		<span #contentWrapper>
 			<ng-content></ng-content>
@@ -66,8 +69,8 @@ export class Tooltip extends PopoverContainer implements AfterContentChecked {
 
 	@ViewChild("contentWrapper") wrapper: ElementRef<HTMLSpanElement>;
 
-	constructor() {
-		super();
+	constructor(private ref: ChangeDetectorRef) {
+		super(ref);
 		this.highContrast = true;
 		this.dropShadow = false;
 	}