@kirbydesign/designsystem 0.0.0

package/src/lib/testing/element-css-custom-matchers.ts

@@ -0,0 +1,139 @@
+import CustomMatcherFactories = jasmine.CustomMatcherFactories;
+import CustomEqualityTester = jasmine.CustomEqualityTester;
+import CustomMatcherResult = jasmine.CustomMatcherResult;
+import MatchersUtil = jasmine.MatchersUtil;
+
+import { ColorHelper, ThemeColorDefinition } from '@kirbydesign/core';
+
+import { TestHelper } from './test-helper';
+
+export const ElementCssCustomMatchers: CustomMatcherFactories = {
+  toHaveComputedStyle: (util: MatchersUtil, customEqualityTesters: CustomEqualityTester[]) =>
+    cssPropertyMatcher(util, customEqualityTesters),
+};
+
+function cssPropertyMatcher(util: MatchersUtil, customEqualityTesters: CustomEqualityTester[]) {
+  return {
+    compare: (
+      element: Element,
+      expectedStyles: { [cssProperty: string]: string | ThemeColorDefinition }
+    ) => {
+      let allPassed = Object.keys(expectedStyles).length !== 0;
+      let messages = [];
+      Object.keys(expectedStyles).forEach((cssProperty) => {
+        const expectedValue = expectedStyles[cssProperty];
+        const { expectedStringValue, expectedValueAlias } = getExpectedStringValueAndAlias(
+          cssProperty,
+          expectedValue
+        );
+        const { pass, message } = compareCssProperty(
+          util,
+          customEqualityTesters,
+          element,
+          cssProperty,
+          expectedStringValue,
+          expectedValueAlias
+        );
+        allPassed = allPassed && pass;
+        if (message) {
+          messages.push(message);
+        }
+      });
+      const result = {
+        pass: allPassed,
+        message: messages.join('\n'),
+      };
+      return result;
+    },
+  };
+}
+
+function getExpectedStringValueAndAlias(
+  cssProperty: string,
+  expectedValue: string | ThemeColorDefinition
+) {
+  let expectedStringValue: string;
+  let expectedValueAlias: string;
+
+  if (typeof expectedValue === 'string') {
+    expectedStringValue = expectedValue;
+    // Check of css property is a color:
+    if (
+      cssProperty.indexOf('color') > -1 ||
+      expectedValue.startsWith('rgb') ||
+      expectedValue.startsWith('#')
+    ) {
+      // Check if css property is a css variable:
+      // Css variable values are hex when getting computed style, all other property values are rgb:
+      if (!cssProperty.startsWith('--')) {
+        // Not a css variable, convert color to rgb:
+        expectedStringValue = ColorHelper.colorStringToRgbString(expectedValue);
+      }
+    }
+  } else {
+    // Check if css property is a css variable:
+    // Css variable values are hex when getting computed style, all other property values are rgb:
+    expectedStringValue = cssProperty.startsWith('--') ? expectedValue.hex : expectedValue.value;
+    expectedValueAlias = expectedValue.fullname;
+  }
+
+  return {
+    expectedStringValue,
+    expectedValueAlias,
+  };
+}
+
+function compareCssProperty(
+  util: MatchersUtil,
+  customEqualityTesters: CustomEqualityTester[],
+  element: Element,
+  cssProperty: string,
+  expectedValue: string,
+  expectedValueAlias?: string
+): CustomMatcherResult {
+  const actualValue = TestHelper.getCssProperty(element, cssProperty);
+  if (expectedValue.startsWith('<') || expectedValue.startsWith('>')) {
+    customEqualityTesters.push(compareSize);
+  }
+  const pass = util.equals(actualValue, expectedValue, customEqualityTesters);
+  const message = pass
+    ? null
+    : getErrorMessage(element, cssProperty, actualValue, expectedValue, expectedValueAlias);
+  const result = {
+    pass: pass,
+    message: message,
+  };
+  return result;
+}
+
+function compareSize(first: string, second: string): boolean | void {
+  const matches = second.match(/(?<operator>\<\=|\<|\>\=|\>)(?<value>\d*)px/);
+  if (matches && matches.groups) {
+    const actualValueNumber = parseInt(first);
+    const operator = matches.groups['operator'];
+    const expectedValueNumber = parseInt(matches.groups['value']);
+    switch (operator) {
+      case '<':
+        return actualValueNumber < expectedValueNumber;
+      case '<=':
+        return actualValueNumber <= expectedValueNumber;
+      case '>':
+        return actualValueNumber > expectedValueNumber;
+      case '>=':
+        return actualValueNumber >= expectedValueNumber;
+      default:
+        break;
+    }
+  }
+}
+
+function getErrorMessage(
+  element: Element,
+  cssProperty: string,
+  actualValue: string,
+  expectedValue: string,
+  expectedValueAlias?: string
+) {
+  const expectedColorNameSuffix = expectedValueAlias ? ` (${expectedValueAlias})` : '';
+  return `Expected [${cssProperty}] of ${element.tagName} '${actualValue}' to be '${expectedValue}'${expectedColorNameSuffix}`;
+}

package/src/lib/testing/styles.scss

@@ -0,0 +1,13 @@
+@use '~@kirbydesign/core/src/scss/global-styles';
+
+// Ensure height of test window for modal viewport resize observer to work:
+body,
+html {
+  height: 100vh;
+}
+
+// Hide svg's from Karma that has to be included as 'dom' filetype
+// See: https://github.com/karma-runner/karma/issues/3271#issuecomment-465622874
+body > svg {
+  display: none;
+}

package/src/lib/testing/test-helper.ts

@@ -0,0 +1,158 @@
+import { IonicModule } from '@ionic/angular';
+import { IonicConfig } from '@ionic/core';
+
+export class TestHelper {
+  public static readonly _init = TestHelper.muteIonicReInitializeWarning();
+
+  public static muteIonicReInitializeWarning() {
+    const originalWarn = console.warn;
+    const patchedWarn = (warning: any, ...optionalParams: any[]) => {
+      const suppress = `Ionic Angular was already initialized. Make sure IonicModule.forRoot() is just called once.`;
+      if (warning !== suppress) originalWarn(warning, ...optionalParams);
+    };
+    console.warn = patchedWarn;
+  }
+
+  public static ionicModuleForTest = IonicModule.forRoot({
+    mode: 'ios',
+    _testing: true,
+    get: () => {}, // Prevents Ionic "config.get is not a function" errors
+  } as IonicConfig);
+
+  /*
+   * Checks for the Web Component(s) being ready,
+   * ie. the component is hydrated, styles have been applied
+   * and the Shadow DOM is ready for query
+   */
+  public static async whenReady(
+    elementOrNodeList: Element | NodeListOf<Element> | Element[]
+  ): Promise<void> {
+    if (elementOrNodeList === undefined || elementOrNodeList === null)
+      return Promise.reject('TestHelper.whenReady: Element is null or undefined');
+    if (elementOrNodeList instanceof Element) {
+      await TestHelper.whenDefined(elementOrNodeList);
+      await TestHelper.ionComponentOnReady(elementOrNodeList);
+    } else {
+      await Promise.all(
+        Array.from(elementOrNodeList).map(async (element) => await TestHelper.whenReady(element))
+      );
+    }
+  }
+
+  /* Checks for the Web Component being defined, ie. the public methods are available */
+  public static async whenDefined(element: Element): Promise<void> {
+    await customElements.whenDefined(element.localName);
+  }
+
+  /* Checks for the Ionic Web Component being ready, ie. the component is hydrated and styles applied */
+  public static async ionComponentOnReady(element: Element): Promise<void> {
+    const componentOnReady = (element as any).componentOnReady as () => Promise<void>;
+    if (typeof componentOnReady === 'function') {
+      await componentOnReady.bind(element)();
+    }
+  }
+
+  public static async whenTrue(
+    pollFunc: () => boolean,
+    timeoutInMs: number = 2000,
+    pollIntervalInMs: number = 5
+  ): Promise<void> {
+    if (pollFunc() === true) return Promise.resolve();
+    return new Promise<void>((resolve, reject) => {
+      let timeoutId, intervalId;
+      const pollState = () => {
+        const result = pollFunc();
+        if (result === true) {
+          clearTimeout(timeoutId);
+          clearInterval(intervalId);
+          resolve();
+        }
+      };
+      timeoutId = setTimeout(() => {
+        clearInterval(intervalId);
+        reject(
+          `Error: Timeout - TestHelper.whenTrue function did not complete within ${timeoutInMs}ms`
+        );
+      }, timeoutInMs);
+      intervalId = setInterval(pollState, pollIntervalInMs);
+    });
+  }
+
+  public static getCssProperty(element: Element, propertyName: string) {
+    return window.getComputedStyle(element).getPropertyValue(propertyName).trim();
+  }
+
+  public static screensize = {
+    phonesmall: { width: '320px', height: '568px' },
+    phone: { width: '375px', height: '667px' },
+    phablet: { width: '575px', height: '767px' },
+    'phablet-landscape': { width: '767px', height: '575px' },
+    tablet: { width: '768px', height: '1024px' },
+    desktop: { width: '1200px', height: '900px' },
+  };
+
+  public static resizeTestWindow(size: { width?: string; height?: string }): Promise<void> {
+    return new Promise<void>((resolve, reject) => {
+      if (!window.frameElement) {
+        console.warn('window.frameElement is undefined. Cannot resize test window.');
+        reject();
+      } else {
+        const query = [];
+        if (size.width) {
+          query.push(`(max-width: ${size.width})`);
+        }
+        if (size.height) {
+          query.push(`(max-height: ${size.height})`);
+        }
+        console.log(`Set test window size to: ${JSON.stringify(size)}`);
+        (window.frameElement as HTMLIFrameElement).style.width = size.width;
+        (window.frameElement as HTMLIFrameElement).style.height = size.height;
+        const mediaQuery = window.matchMedia(query.join(' and '));
+        if (mediaQuery.matches) {
+          resolve();
+        } else {
+          // Ensure window has resized before executing:
+          mediaQuery.onchange = (ev) => {
+            if (ev.matches) {
+              // Stop listening for changes:
+              mediaQuery.onchange = null;
+              resolve();
+            }
+          };
+          console.log(`Awaiting media query to match: ${mediaQuery.media}`);
+        }
+      }
+    });
+  }
+
+  public static resetTestWindow(): void {
+    if (!window.frameElement) {
+      console.warn('window.frameElement is undefined. Cannot resize test window.');
+      return;
+    }
+    console.log('Resetting test window width');
+    (window.frameElement as HTMLIFrameElement).style.width = null;
+    (window.frameElement as HTMLIFrameElement).style.height = null;
+  }
+
+  public static scrollMainWindowToTop() {
+    if (
+      window.parent &&
+      window.parent.document &&
+      window.parent.document.documentElement &&
+      window.parent.document.documentElement.scrollTop > 0
+    ) {
+      window.parent.document.documentElement.scrollTop = 0;
+    }
+  }
+
+  public static waitForResizeObserver(): Promise<void> {
+    return TestHelper.waitForTimeout();
+  }
+
+  public static waitForTimeout(timeoutInMs?: number): Promise<void> {
+    return new Promise<void>((resolve) => setTimeout(resolve, timeoutInMs));
+  }
+}
+
+export type ScreenSize = keyof typeof TestHelper.screensize;

package/src/lib/types/index.ts

@@ -0,0 +1 @@
+export * from './window-ref';

package/src/lib/types/window-ref.ts

@@ -0,0 +1,10 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class WindowRef {
+  get nativeWindow(): any {
+    return window;
+  }
+}

package/src/test.ts

@@ -0,0 +1,34 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone';
+import 'zone.js/dist/zone-testing';
+// tslint:disable-next-line: ordered-imports
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting,
+} from '@angular/platform-browser-dynamic/testing';
+
+import { ElementCssCustomMatchers } from './lib/testing/element-css-custom-matchers';
+
+declare const require: {
+  context(
+    path: string,
+    deep?: boolean,
+    filter?: RegExp
+  ): {
+    keys(): string[];
+    <T>(id: string): T;
+  };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
+
+beforeAll(() => {
+  jasmine.addMatchers(ElementCssCustomMatchers);
+});

package/src/typings.test.d.ts

@@ -0,0 +1 @@
+/// <reference path="lib/testing/element-css-custom-matchers.d.ts"/>

package/testing-base/ng-package.json

@@ -0,0 +1,3 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json"
+}

package/testing-base/src/lib/components/index.ts

@@ -0,0 +1,66 @@
+export { MockAccordionItemComponent } from './mock.accordion-item.component';
+export { MockActionSheetComponent } from './mock.action-sheet.component';
+export { MockAppComponent } from './mock.app.component';
+export { MockAvatarComponent } from './mock.avatar.component';
+export { MockButtonComponent } from './mock.button.component';
+export { MockCalendarComponent } from './mock.calendar.component';
+export { MockCardFooterComponent } from './mock.card-footer.component';
+export { MockCardHeaderComponent } from './mock.card-header.component';
+export { MockCardComponent } from './mock.card.component';
+export { MockChartDeprecatedComponent } from './mock.chart-deprecated.component';
+export { MockChartComponent } from './mock.chart.component';
+export { MockCheckboxComponent } from './mock.checkbox.component';
+export { MockChipComponent } from './mock.chip.component';
+export { MockDividerComponent } from './mock.divider.component';
+export { MockDropdownComponent } from './mock.dropdown.component';
+export { MockEmptyStateComponent } from './mock.empty-state.component';
+export { MockFabSheetComponent } from './mock.fab-sheet.component';
+export { MockFlagComponent } from './mock.flag.component';
+export { MockFormFieldMessageComponent } from './mock.form-field-message.component';
+export { MockFormFieldComponent } from './mock.form-field.component';
+export { MockGridComponent } from './mock.grid.component';
+export { MockIconComponent } from './mock.icon.component';
+export { MockInputCounterComponent } from './mock.input-counter.component';
+export { MockInputComponent } from './mock.input.component';
+export { MockItemGroupComponent } from './mock.item-group.component';
+export { MockItemSlidingComponent } from './mock.item-sliding.component';
+export { MockItemComponent } from './mock.item.component';
+export { MockLabelComponent } from './mock.label.component';
+export { MockListExperimentalComponent } from './mock.list-experimental.component';
+export { MockListHeaderComponent } from './mock.list-header.component';
+export { MockListItemComponent } from './mock.list-item.component';
+export { MockListSectionHeaderComponent } from './mock.list-section-header.component';
+export { MockListComponent } from './mock.list.component';
+export { MockLoadingOverlayComponent } from './mock.loading-overlay.component';
+export { MockModalFooterComponent } from './mock.modal-footer.component';
+export { MockPageFooterComponent } from './mock.page-footer.component';
+export {
+  MockPageTitleDirective,
+  MockPageToolbarTitleDirective,
+  MockPageActionsDirective,
+  MockPageContentDirective,
+  MockPageProgressComponent,
+  MockPageSubtitleDirective,
+  MockPageActionsComponent,
+  MockPageComponent,
+  MockPageContentComponent,
+  MockPageTitleComponent,
+} from './mock.page.component';
+export { MockPopoverComponent } from './mock.popover.component';
+export { MockProgressCircleComponent } from './mock.progress-circle.component';
+export { MockRadioGroupComponent } from './mock.radio-group.component';
+export { MockRadioComponent } from './mock.radio.component';
+export { MockRangeComponent } from './mock.range.component';
+export { MockReorderListComponent } from './mock.reorder-list.component';
+export { MockRouterOutletComponent } from './mock.router-outlet.component';
+export { MockSectionHeaderComponent } from './mock.section-header.component';
+export { MockSegmentedControlComponent } from './mock.segmented-control.component';
+export { MockSlideButtonComponent } from './mock.slide-button.component';
+export { MockSlideDirective, MockSlidesComponent } from './mock.slides.component';
+export { MockSpinnerComponent } from './mock.spinner.component';
+export { MockTabButtonComponent } from './mock.tab-button.component';
+export { MockTabsComponent } from './mock.tabs.component';
+export { MockTextareaComponent } from './mock.textarea.component';
+export { MockToggleButtonComponent } from './mock.toggle-button.component';
+export { MockToggleComponent } from './mock.toggle.component';
+export { MockBadgeComponent } from './mock.web-component-proxies.component';

package/testing-base/src/lib/components/mock.accordion-item.component.ts

@@ -0,0 +1,21 @@
+import { Component, forwardRef, Input } from '@angular/core';
+
+import { AccordionItemComponent } from '@kirbydesign/designsystem';
+
+// #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
+@Component({
+  selector: 'kirby-accordion-item',
+  template: '<ng-content></ng-content>',
+  providers: [
+    {
+      provide: AccordionItemComponent,
+      useExisting: forwardRef(() => MockAccordionItemComponent),
+    },
+  ],
+})
+export class MockAccordionItemComponent {
+  @Input() title: string;
+  @Input() isExpanded: boolean;
+}
+
+// #endregion

package/testing-base/src/lib/components/mock.action-sheet.component.ts

@@ -0,0 +1,27 @@
+import { Component, EventEmitter, forwardRef, Input, Output } from '@angular/core';
+
+import { ActionSheetComponent, ActionSheetItem } from '@kirbydesign/designsystem';
+
+// #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
+@Component({
+  selector: 'kirby-action-sheet',
+  template: '<ng-content></ng-content>',
+  providers: [
+    {
+      provide: ActionSheetComponent,
+      useExisting: forwardRef(() => MockActionSheetComponent),
+    },
+  ],
+})
+export class MockActionSheetComponent {
+  @Input() cancelButtonText: string;
+  @Input() hideCancel: boolean;
+  @Input() disabled: boolean;
+  @Input() header: string;
+  @Input() subheader: string;
+  @Input() items: Array<ActionSheetItem>;
+  @Output() cancel = new EventEmitter();
+  @Output() itemSelect = new EventEmitter<ActionSheetItem>();
+}
+
+// #endregion

package/testing-base/src/lib/components/mock.app.component.ts

@@ -0,0 +1,18 @@
+import { Component, forwardRef } from '@angular/core';
+
+import { AppComponent } from '@kirbydesign/designsystem';
+
+// #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
+@Component({
+  selector: 'kirby-app',
+  template: '<ng-content></ng-content>',
+  providers: [
+    {
+      provide: AppComponent,
+      useExisting: forwardRef(() => MockAppComponent),
+    },
+  ],
+})
+export class MockAppComponent {}
+
+// #endregion

package/testing-base/src/lib/components/mock.avatar.component.ts

@@ -0,0 +1,38 @@
+import { Component, forwardRef, Input } from '@angular/core';
+
+import {
+  AvatarComponent,
+  AvatarSize,
+  BrandColor,
+  NotificationColor,
+} from '@kirbydesign/designsystem';
+
+// #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
+@Component({
+  selector: 'kirby-avatar',
+  template: '<ng-content></ng-content>',
+  providers: [
+    {
+      provide: AvatarComponent,
+      useExisting: forwardRef(() => MockAvatarComponent),
+    },
+  ],
+})
+export class MockAvatarComponent {
+  @Input() imageSrc: string;
+  @Input() altText: string;
+  @Input() shadow: boolean;
+  @Input() text: string;
+  @Input() overlay: boolean;
+  @Input() size: AvatarSize | `${AvatarSize}`;
+  @Input() themeColor:
+    | NotificationColor
+    | BrandColor
+    | 'medium'
+    | 'white'
+    | 'dark'
+    | 'light'
+    | 'semi-light';
+}
+
+// #endregion

package/testing-base/src/lib/components/mock.badge.component.ts

@@ -0,0 +1,20 @@
+import { Component, forwardRef, Input } from '@angular/core';
+
+import { BadgeComponent } from '@kirbydesign/designsystem';
+
+// #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
+@Component({
+  selector: 'kirby-badge',
+  template: '<ng-content></ng-content>',
+  providers: [
+    {
+      provide: BadgeComponent,
+      useExisting: forwardRef(() => MockBadgeComponent),
+    },
+  ],
+})
+export class MockBadgeComponent {
+  @Input() text: string;
+}
+
+// #endregion

package/testing-base/src/lib/components/mock.button.component.ts

@@ -0,0 +1,26 @@
+import { Component, forwardRef, Input } from '@angular/core';
+
+import { ButtonComponent, ButtonSize, NotificationColor } from '@kirbydesign/designsystem';
+
+// #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
+@Component({
+  // tslint:disable-next-line: component-selector
+  selector: 'button[kirby-button],Button[kirby-button]',
+  template: '<ng-content></ng-content>',
+  providers: [
+    {
+      provide: ButtonComponent,
+      useExisting: forwardRef(() => MockButtonComponent),
+    },
+  ],
+})
+export class MockButtonComponent {
+  @Input() attentionLevel: '1' | '2' | '3' | '4';
+  @Input() isDestructive: boolean;
+  @Input() themeColor: NotificationColor;
+  @Input() expand: 'full' | 'block';
+  @Input() isFloating: boolean;
+  @Input() size: ButtonSize | `${ButtonSize}`;
+}
+
+// #endregion

package/testing-base/src/lib/components/mock.calendar.component.ts

@@ -0,0 +1,36 @@
+import { Component, EventEmitter, forwardRef, Input, Output } from '@angular/core';
+import { Locale } from 'date-fns';
+
+import { CalendarComponent, CalendarYearNavigatorConfig } from '@kirbydesign/designsystem';
+
+// #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
+@Component({
+  selector: 'kirby-calendar',
+  template: '<ng-content></ng-content>',
+  providers: [
+    {
+      provide: CalendarComponent,
+      useExisting: forwardRef(() => MockCalendarComponent),
+    },
+  ],
+})
+export class MockCalendarComponent {
+  @Output() dateChange = new EventEmitter<Date>();
+  @Output() dateSelect = new EventEmitter<Date>();
+  @Output() yearSelect = new EventEmitter<number>();
+  @Input() timezone: 'local' | 'UTC';
+  @Input() disableWeekends: boolean;
+  @Input() disablePastDates: boolean;
+  @Input() disableFutureDates: boolean;
+  @Input() alwaysEnableToday: boolean;
+  @Input() customLocales: { [key: string]: Locale };
+  @Input() usePopover: boolean;
+  @Input() yearNavigatorOptions: CalendarYearNavigatorConfig;
+  @Input() selectedDate: Date;
+  @Input() disabledDates: Date[];
+  @Input() todayDate: Date;
+  @Input() minDate: Date;
+  @Input() maxDate: Date;
+}
+
+// #endregion

package/testing-base/src/lib/components/mock.card-footer.component.ts

@@ -0,0 +1,18 @@
+import { Component, forwardRef } from '@angular/core';
+
+import { CardFooterComponent } from '@kirbydesign/designsystem';
+
+// #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
+@Component({
+  selector: 'kirby-card-footer',
+  template: '<ng-content></ng-content>',
+  providers: [
+    {
+      provide: CardFooterComponent,
+      useExisting: forwardRef(() => MockCardFooterComponent),
+    },
+  ],
+})
+export class MockCardFooterComponent {}
+
+// #endregion

package/testing-base/src/lib/components/mock.card-header.component.ts

@@ -0,0 +1,23 @@
+import { Component, forwardRef, Input } from '@angular/core';
+
+import { CardFlagLevel, CardHeaderComponent } from '@kirbydesign/designsystem';
+
+// #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
+@Component({
+  selector: 'kirby-card-header',
+  template: '<ng-content></ng-content>',
+  providers: [
+    {
+      provide: CardHeaderComponent,
+      useExisting: forwardRef(() => MockCardHeaderComponent),
+    },
+  ],
+})
+export class MockCardHeaderComponent {
+  @Input() title: string;
+  @Input() subtitle: string;
+  @Input() isTitleBold: boolean;
+  @Input() flagged: CardFlagLevel;
+}
+
+// #endregion