Merge pull request #3084 from eduardmarcinco/onpush/branch-2

feat: convert components to use OnPush change detection strategy

Author: zvonimirfras

src/combobox/combobox.component.ts

@@ -12,7 +12,9 @@ import {
 	AfterContentInit,
 	HostBinding,
 	TemplateRef,
-	OnDestroy
+	OnDestroy,
+	ChangeDetectionStrategy,
+	ChangeDetectorRef
 } from "@angular/core";
 import { AbstractDropdownView, DropdownService } from "carbon-components-angular/dropdown";
 import { ListItem } from "carbon-components-angular/dropdown";
@@ -138,7 +140,6 @@ import { Observable } from "rxjs";
 						[placeholder]="placeholder"/>
 					@if (invalid) {
 						<svg
-
 							cdsIcon="warning--filled"
 							size="16"
 							class="cds--list-box__invalid-icon">
@@ -222,7 +223,8 @@ import { Observable } from "rxjs";
 			useExisting: ComboBox,
 			multi: true
 		}
-	]
+	],
+	changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ComboBox implements OnChanges, AfterViewInit, AfterContentInit, OnDestroy {
 	/**
@@ -500,7 +502,8 @@ export class ComboBox implements OnChanges, AfterViewInit, AfterContentInit, OnD
 	constructor(
 		protected elementRef: ElementRef,
 		protected dropdownService: DropdownService,
-		protected i18n: I18n
+		protected i18n: I18n,
+		protected cdr: ChangeDetectorRef
 	) {}
 
 	/**
@@ -743,6 +746,8 @@ export class ComboBox implements OnChanges, AfterViewInit, AfterContentInit, OnD
 		}
 
 		document.removeEventListener("click", this.outsideClick, true);
+
+		this.cdr.markForCheck();
 	}
 
 	/**
@@ -766,6 +771,8 @@ export class ComboBox implements OnChanges, AfterViewInit, AfterContentInit, OnD
 				this._dropUp = this._shouldDropUp();
 			}
 		}, 0);
+
+		this.cdr.markForCheck();
 	}
 
 	/**

src/content-switcher/content-switcher.component.ts

@@ -7,7 +7,8 @@ import {
 	EventEmitter,
 	AfterViewInit,
 	HostListener,
-	ElementRef
+	ElementRef,
+	ChangeDetectionStrategy
 } from "@angular/core";
 import { ContentSwitcherOption } from "./content-switcher-option.directive";
 import { isFocusInLastItem, isFocusInFirstItem } from "carbon-components-angular/common";
@@ -46,7 +47,8 @@ import { isFocusInLastItem, isFocusInFirstItem } from "carbon-components-angular
 			role="tablist">
 			<ng-content />
 		</div>
-	`
+	`,
+	changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ContentSwitcher implements AfterViewInit {
 	@Input() ariaLabel = "content switcher";

src/context-menu/context-menu-divider.component.ts

@@ -1,8 +1,9 @@
-import { Component, HostBinding } from "@angular/core";
+import { ChangeDetectionStrategy, Component, HostBinding } from "@angular/core";
 
 @Component({
 	selector: "cds-context-menu-divider, ibm-context-menu-divider",
-	template: ""
+	template: "",
+	changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ContextMenuDividerComponent {
 	@HostBinding("class.cds--menu-item-divider") dividerClass = true;

src/context-menu/context-menu-group.component.ts

@@ -1,4 +1,5 @@
 import {
+	ChangeDetectionStrategy,
 	Component,
 	EventEmitter,
 	HostBinding,
@@ -17,7 +18,8 @@ import { ContextMenuSelectionService } from "./context-menu-selection.service";
 	template: `
 		<ng-content />
 	`,
-	providers: [ContextMenuSelectionService]
+	providers: [ContextMenuSelectionService],
+	changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ContextMenuGroupComponent implements OnInit, OnChanges, OnDestroy {
 	@HostBinding("attr.role") role = "group";

src/context-menu/context-menu-item.component.ts

@@ -10,7 +10,8 @@ import {
 	Optional,
 	OnInit,
 	AfterContentInit,
-	OnDestroy
+	OnDestroy,
+	ChangeDetectionStrategy
 } from "@angular/core";
 import { Subscription } from "rxjs";
 import { ContextMenuSelectionService } from "./context-menu-selection.service";
@@ -41,7 +42,8 @@ import { ContextMenuComponent } from "./context-menu.component";
 		:host {
 			grid-template-columns: 1rem 1fr max-content;
 		}
-	`]
+	`],
+	changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ContextMenuItemComponent implements OnInit, AfterContentInit, OnDestroy {
 	@HostBinding("class.cds--menu-item") optionClass = true;

src/context-menu/context-menu.component.ts

@@ -5,7 +5,8 @@ import {
 	Input,
 	SimpleChanges,
 	OnChanges,
-	HostBinding
+	HostBinding,
+	ChangeDetectionStrategy
 } from "@angular/core";
 
 /**
@@ -26,7 +27,8 @@ import {
 		:host {
 			display: block;
 		}
-	`]
+	`],
+	changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ContextMenuComponent implements OnChanges {
 	@Input() open = false;

src/datepicker-input/datepicker-input.component.ts

@@ -5,7 +5,8 @@ import {
 	EventEmitter,
 	ElementRef,
 	TemplateRef,
-	ViewChild
+	ViewChild,
+	ChangeDetectionStrategy
 } from "@angular/core";
 import { NG_VALUE_ACCESSOR } from "@angular/forms";
 
@@ -124,7 +125,8 @@ import { NG_VALUE_ACCESSOR } from "@angular/forms";
 			useExisting: DatePickerInput,
 			multi: true
 		}
-	]
+	],
+	changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class DatePickerInput {
 	private static datePickerCount = 0;

src/datepicker/datepicker.component.ts

@@ -14,7 +14,8 @@ import {
 	AfterViewInit,
 	ViewChild,
 	OnInit,
-	SimpleChange
+	SimpleChange,
+	ChangeDetectionStrategy
 } from "@angular/core";
 import rangePlugin from "flatpickr/dist/plugins/rangePlugin";
 import flatpickr from "flatpickr";
@@ -120,7 +121,8 @@ if (languages.default?.default["en"]?.weekdays) {
 			multi: true
 		}
 	],
-	encapsulation: ViewEncapsulation.None
+	encapsulation: ViewEncapsulation.None,
+	changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class DatePicker implements
 	OnInit,