Merge branch 'master' into fix/codesnippet-console-error

Author: zvonimirfras

README.md

@@ -163,3 +163,12 @@ To keep our build dependencies local we use npm scripts to run our webpack, gulp
 
 ## Code of Conduct
 Read our code of conduct [here](./.github/CODE_OF_CONDUCT.md)
+
+## <picture><source height="20" width="20" media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-dark.svg"><source height="20" width="20" media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg"><img height="20" width="20" alt="IBM Telemetry" src="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg"></picture> IBM Telemetry
+
+This package uses IBM Telemetry to collect metrics data. By installing this
+package as a dependency you are agreeing to telemetry collection. To opt out,
+see
+[Opting out of IBM Telemetry data collection](https://github.com/ibm-telemetry/telemetry-js/tree/main#opting-out-of-ibm-telemetry-data-collection).
+For more information on the data being collected, please see the
+[IBM Telemetry documentation](https://github.com/ibm-telemetry/telemetry-js/tree/main#ibm-telemetry-collection-basics).

package-lock.json

@@ -17,7 +17,8 @@
     "commit": "git-cz -s",
     "ng": "ng",
     "ng:build": "node --max_old_space_size=4096 ./node_modules/@angular/cli/bin/ng build",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "postinstall": "ibmtelemetry --config=telemetry.yml"
   },
   "release": {
     "pkgRoot": "dist",
@@ -137,8 +138,8 @@
   "dependencies": {
     "@carbon/icon-helpers": "10.37.0",
     "@carbon/icons": "11.14.0",
-    "@carbon/telemetry": "0.1.0",
     "@carbon/utils-position": "1.1.4",
+    "@ibm/telemetry-js": "^1.2.1",
     "flatpickr": "4.6.13",
     "tslib": "2.3.0"
   }

package.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

@@ -6,6 +6,7 @@ import {
 } from "@angular/core";
 import { I18n } from "carbon-components-angular/i18n";
 import { TableItem } from "../table-item.class";
+import { TableRow } from "../table-row.class";
 import { Observable } from "rxjs";
 
 @Component({
@@ -17,6 +18,7 @@ import { Observable } from "rxjs";
 			[attr.aria-label]="getLabel() | i18nReplace:getSelectionLabelValue(row) | async"
 			[ariaLabel]="getLabel() | i18nReplace:getSelectionLabelValue(row) | async"
 			[checked]="selected"
+			[disabled]="disabled"
 			(change)="change.emit()">
 		</cds-radio>
 	`
@@ -35,6 +37,10 @@ export class TableRadio {
 		return this._label.value;
 	}
 
+	get disabled(): boolean {
+		return this.row ? !!(this.row as TableRow).disabled : false;
+	}
+	
 	/**
 	 * Used to populate the row selection checkbox label with a useful value if set.
 	 *

src/table/cell/table-radio.component.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();
+	});
 });