OnPush change detection for simplest components (#2169)

* ⚡️ Use OnPush CD for comps with immutable inputs

* ⚡️ Add strategy to additional dumb components

* ✅  Migrate tests to use spectator

Directly setting the input on the component did not work with OnPush
change detection, so spectator is used in alert test now, while we
were at it. This way we can interact with the component via setInput().

* ✅  Remove unused provider from alert

* ⏪  Revert OnPush for tabs

State can be changed internally because 'tabBarBottomHidden' is public,
but not an input decorator - while still being used in the template.

* ✅  Clean up alert test

* ✅  Migrate toggle tests to use spectator

Directly setting the input on the component did not work with OnPush
change detection, so spectator is used in toggle test now, while we
were at it. This way we can interact with the component via setInput().

* ⏪  Revert to default change detection for card

* ⏪  Remove default strategy - it is the default

* ⏪ Remove unused import

libs/designsystem/src/lib/components/app/app.component.ts

@@ -1,13 +1,21 @@
-import { Component, ContentChild, ElementRef, AfterContentInit, ViewChild } from '@angular/core';
+import {
+  AfterContentInit,
+  ChangeDetectionStrategy,
+  Component,
+  ContentChild,
+  ElementRef,
+  ViewChild,
+} from '@angular/core';
 import { IonApp } from '@ionic/angular';
 
-import { RouterOutletComponent } from '../router-outlet/router-outlet.component';
 import { ModalController } from '../modal/services/modal.controller';
+import { RouterOutletComponent } from '../router-outlet/router-outlet.component';
 
 @Component({
   selector: 'kirby-app',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent implements AfterContentInit {
   @ViewChild(IonApp, { static: true, read: ElementRef })

libs/designsystem/src/lib/components/button/button.component.ts

@@ -1,5 +1,6 @@
 import {
   AfterContentInit,
+  ChangeDetectionStrategy,
   Component,
   ContentChild,
   ElementRef,
@@ -22,6 +23,7 @@ export enum ButtonSize {
   selector: 'button[kirby-button],Button[kirby-button]',
   templateUrl: './button.component.html',
   styleUrls: ['./button.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ButtonComponent implements AfterContentInit {
   @HostBinding('class.attention-level1')

libs/designsystem/src/lib/components/card/card-footer/card-footer.component.ts

@@ -1,9 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 
 @Component({
   selector: 'kirby-card-footer',
   templateUrl: './card-footer.component.html',
   styleUrls: ['./card-footer.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CardFooterComponent implements OnInit {
   constructor() {}

libs/designsystem/src/lib/components/card/card-header/card-header.component.ts

@@ -1,4 +1,4 @@
-import { Component, HostBinding, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
 
 import { NotificationColor } from '@kirbydesign/core';
 
@@ -8,6 +8,7 @@ export type CardFlagLevel = NotificationColor | 'info' | null;
   selector: 'kirby-card-header',
   templateUrl: './card-header.component.html',
   styleUrls: ['./card-header.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CardHeaderComponent {
   @Input() title: string;

libs/designsystem/src/lib/components/chip/chip.component.ts

@@ -1,9 +1,10 @@
-import { Component, Input, HostBinding } from '@angular/core';
+import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
 
 @Component({
   selector: 'kirby-chip',
   templateUrl: './chip.component.html',
   styleUrls: ['./chip.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ChipComponent {
   @Input() text: string;

libs/designsystem/src/lib/components/divider/divider.component.ts

@@ -1,9 +1,10 @@
-import { Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 
 @Component({
   selector: 'kirby-divider',
   templateUrl: './divider.component.html',
   styleUrls: ['./divider.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DividerComponent {
   @Input()

libs/designsystem/src/lib/components/empty-state/empty-state.component.ts

@@ -1,11 +1,19 @@
-import { AfterContentInit, Component, ContentChildren, Input, QueryList } from '@angular/core';
+import {
+  AfterContentInit,
+  ChangeDetectionStrategy,
+  Component,
+  ContentChildren,
+  Input,
+  QueryList,
+} from '@angular/core';
 
 import { ButtonComponent } from '../button/button.component';
 
 @Component({
   selector: 'kirby-empty-state',
   templateUrl: './empty-state.component.html',
   styleUrls: ['./empty-state.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class EmptyStateComponent implements AfterContentInit {
   @Input() iconName: string;

libs/designsystem/src/lib/components/fab-sheet/fab-sheet.component.ts

@@ -2,6 +2,7 @@ import { DOCUMENT } from '@angular/common';
 import {
   AfterContentInit,
   AfterViewInit,
+  ChangeDetectionStrategy,
   Component,
   ContentChild,
   ElementRef,
@@ -21,6 +22,7 @@ import { ActionSheetComponent } from '../modal/action-sheet/action-sheet.compone
   selector: 'kirby-fab-sheet',
   templateUrl: './fab-sheet.component.html',
   styleUrls: ['./fab-sheet.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabSheetComponent implements AfterContentInit, AfterViewInit {
   @Input() disabled: boolean = false;

libs/designsystem/src/lib/components/icon/icon.component.ts

@@ -1,4 +1,11 @@
-import { Component, HostBinding, Input, OnChanges, SimpleChanges } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  HostBinding,
+  Input,
+  OnChanges,
+  SimpleChanges,
+} from '@angular/core';
 
 import { IconRegistryService } from './icon-registry.service';
 import { Icon } from './icon-settings';
@@ -17,6 +24,7 @@ export enum IconSize {
   styleUrls: ['./icon.component.scss'],
   // tslint:disable-next-line: no-host-metadata-property
   host: { '[class.kirby-icon]': 'true' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class IconComponent implements OnChanges {
   defaultIcon: Icon = this.findIcon(kirbyIconSettings.icons, 'cog');

libs/designsystem/src/lib/components/item/item.component.ts

@@ -1,4 +1,4 @@
-import { Component, HostBinding, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
 
 export enum ItemSize {
   XS = 'xs',
@@ -10,6 +10,7 @@ export enum ItemSize {
   selector: 'kirby-item',
   templateUrl: './item.component.html',
   styleUrls: ['./item.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ItemComponent {
   @Input() disabled: boolean;

libs/designsystem/src/lib/components/list/list-experimental/list-experimental.component.ts

@@ -1,4 +1,4 @@
-import { Component, HostListener, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, Component, HostListener, ViewChild } from '@angular/core';
 import { IonList } from '@ionic/angular';
 
 import { elementHasAncestor } from '../../../helpers/element-has-ancestor';
@@ -7,6 +7,7 @@ import { elementHasAncestor } from '../../../helpers/element-has-ancestor';
   selector: 'kirby-list-experimental',
   templateUrl: './list-experimental.component.html',
   styleUrls: ['./list-experimental.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ListExperimentalComponent {
   @ViewChild(IonList, { static: true }) list: IonList;

libs/designsystem/src/lib/components/list/list-header/list-header.component.ts

@@ -1,9 +1,10 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
   selector: 'kirby-list-header',
   templateUrl: './list-header.component.html',
   styleUrls: ['./list-header.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ListHeaderComponent {
   constructor() {}

libs/designsystem/src/lib/components/list/list-section-header/list-section-header.component.ts

@@ -1,8 +1,9 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
 
 @Component({
   selector: 'kirby-list-section-header',
   templateUrl: './list-section-header.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ListSectionHeaderComponent implements OnInit {
   @Input() title: string;

libs/designsystem/src/lib/components/loading-overlay/loading-overlay.component.ts

@@ -1,9 +1,10 @@
-import { Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 
 @Component({
   selector: 'kirby-loading-overlay',
   templateUrl: './loading-overlay.component.html',
   styleUrls: ['./loading-overlay.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class LoadingOverlayComponent {
   @Input() public isLoading = true;