@rdlabo/ionic-theme-ios26 0.0.3 → 0.0.4

package/demo/src/app/index/index.routes.ts

@@ -22,4 +22,68 @@ export const routes: Routes = [
     path: 'checkbox',
     loadComponent: () => import('./pages/checkbox/checkbox.page').then((m) => m.CheckboxPage),
   },
+  {
+    path: 'range',
+    loadComponent: () => import('./pages/range/range.page').then((m) => m.RangePage),
+  },
+  {
+    path: 'toast',
+    loadComponent: () => import('./pages/toast/toast.page').then((m) => m.ToastPage),
+  },
+  {
+    path: 'toggle',
+    loadComponent: () => import('./pages/toggle/toggle.page').then((m) => m.TogglePage),
+  },
+  {
+    path: 'segment',
+    loadComponent: () => import('./pages/segment/segment.page').then((m) => m.SegmentPage),
+  },
+  {
+    path: 'modal',
+    loadComponent: () => import('./pages/modal/modal.page').then((m) => m.ModalPage),
+  },
+  {
+    path: 'card',
+    loadComponent: () => import('./pages/card/card.page').then((m) => m.CardPage),
+  },
+  {
+    path: 'chip',
+    loadComponent: () => import('./pages/chip/chip.page').then((m) => m.ChipPage),
+  },
+  {
+    path: 'breadcrumbs',
+    loadComponent: () => import('./pages/breadcrumbs/breadcrumbs.page').then((m) => m.BreadcrumbsPage),
+  },
+  {
+    path: 'searchbar',
+    loadComponent: () => import('./pages/searchbar/searchbar.page').then((m) => m.SearchbarPage),
+  },
+  {
+    path: 'menu',
+    loadComponent: () => import('./pages/menu/menu.page').then((m) => m.MenuPage),
+  },
+  {
+    path: 'popover',
+    loadComponent: () => import('./pages/popover/popover.page').then((m) => m.PopoverPage),
+  },
+  {
+    path: 'progress-indicators',
+    loadComponent: () => import('./pages/progress-indicators/progress-indicators.page').then((m) => m.ProgressIndicatorsPage),
+  },
+  {
+    path: 'floating-action-button',
+    loadComponent: () => import('./pages/floating-action-button/floating-action-button.page').then((m) => m.FloatingActionButtonPage),
+  },
+  {
+    path: 'select',
+    loadComponent: () => import('./pages/select/select.page').then((m) => m.SelectPage),
+  },
+  {
+    path: 'radio',
+    loadComponent: () => import('./pages/radio/radio.page').then((m) => m.RadioPage),
+  },
+  {
+    path: 'date-and-time-pickers',
+    loadComponent: () => import('./pages/date-and-time-pickers/date-and-time-pickers.page').then((m) => m.DateAndTimePickersPage),
+  },
 ];

package/demo/src/app/index/pages/action-sheet/action-sheet.page.spec.ts

@@ -1,11 +1,15 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ActionSheetPage } from './action-sheet.page';
+import { testConfig } from '../../../../../util/test.config';
 
 describe('ActionSheetPage', () => {
   let component: ActionSheetPage;
   let fixture: ComponentFixture<ActionSheetPage>;
 
-  beforeEach(() => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      providers: testConfig.providers,
+    }).compileComponents();
     fixture = TestBed.createComponent(ActionSheetPage);
     component = fixture.componentInstance;
     fixture.detectChanges();

package/demo/src/app/index/pages/action-sheet/action-sheet.page.ts

@@ -2,8 +2,8 @@ import { Component, inject, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import {
+  ActionSheetController,
   IonBackButton,
-  IonButtons,
   IonContent,
   IonHeader,
   IonIcon,
@@ -16,7 +16,6 @@ import {
   IonTitle,
   IonToolbar,
 } from '@ionic/angular/standalone';
-import { ActionSheetController } from '@ionic/angular';
 import { actionSheetUtil } from './action-sheet.util';
 
 @Component({
@@ -31,7 +30,6 @@ import { actionSheetUtil } from './action-sheet.util';
     IonToolbar,
     CommonModule,
     FormsModule,
-    IonButtons,
     IonBackButton,
     IonList,
     IonItem,
@@ -68,8 +66,8 @@ export class ActionSheetPage implements OnInit {
       }
       return actionSheetUtil();
     })(type);
-
     const actionSheet = await this.overlayCtrl.create(applyConfig);
-    await actionSheet.present();
+    console.log(applyConfig);
+    await actionSheet.present().then(() => console.log(type));
   }
 }

package/demo/src/app/index/pages/alert/alert.page.spec.ts

@@ -1,11 +1,15 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { AlertPage } from './alert.page';
+import { testConfig } from '../../../../../util/test.config';
 
 describe('AlertPage', () => {
   let component: AlertPage;
   let fixture: ComponentFixture<AlertPage>;
 
-  beforeEach(() => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      providers: testConfig.providers,
+    }).compileComponents();
     fixture = TestBed.createComponent(AlertPage);
     component = fixture.componentInstance;
     fixture.detectChanges();

package/demo/src/app/index/pages/alert/alert.page.ts

@@ -16,8 +16,6 @@ import {
   IonTitle,
   IonToolbar,
 } from '@ionic/angular/standalone';
-import { ActionSheetController } from '@ionic/angular';
-import { actionSheetUtil } from '../action-sheet/action-sheet.util';
 import { alertUtil } from './alert.util';
 
 @Component({

package/demo/src/app/index/pages/breadcrumbs/breadcrumbs.page.html

@@ -0,0 +1,41 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-back-button slot="start" defaultHref="/main/index"></ion-back-button>
+    <ion-title>breadcrumbs</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true" color="light">
+  <ion-list [inset]="true">
+    <ion-item-group class="header-item-group">
+      <ion-item>
+        <ion-label>
+          <ion-icon name="logo-ionic" style="background: linear-gradient(#489bfd, #2b77f4)"></ion-icon>
+          <h2>breadcrumbs</h2>
+          <ion-header collapse="condense">
+            <ion-toolbar></ion-toolbar>
+          </ion-header>
+          <ion-text><code>This page is a component demo for &#64;rdlabo/ionic-theme-ios26.</code></ion-text>
+        </ion-label>
+      </ion-item>
+    </ion-item-group>
+  </ion-list>
+
+  <section class="section-example">
+    <ion-breadcrumbs class="ios26-disabled">
+      <ion-breadcrumb href="#home">Home</ion-breadcrumb>
+      <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
+      <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
+      <ion-breadcrumb href="#film">Film</ion-breadcrumb>
+    </ion-breadcrumbs>
+  </section>
+
+  <section class="section-example">
+    <ion-breadcrumbs>
+      <ion-breadcrumb href="#home">Home</ion-breadcrumb>
+      <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
+      <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
+      <ion-breadcrumb href="#film">Film</ion-breadcrumb>
+    </ion-breadcrumbs>
+  </section>
+</ion-content>

package/demo/src/app/index/pages/breadcrumbs/breadcrumbs.page.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { BreadcrumbsPage } from './breadcrumbs.page';
+import { testConfig } from '../../../../../util/test.config';
+
+describe('BreadcrumbsPage', () => {
+  let component: BreadcrumbsPage;
+  let fixture: ComponentFixture<BreadcrumbsPage>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      providers: testConfig.providers,
+    }).compileComponents();
+    fixture = TestBed.createComponent(BreadcrumbsPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/demo/src/app/index/pages/breadcrumbs/breadcrumbs.page.ts

@@ -0,0 +1,47 @@
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import {
+  IonBackButton,
+  IonBreadcrumb,
+  IonBreadcrumbs,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonItemGroup,
+  IonLabel,
+  IonList,
+  IonText,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-breadcrumbs',
+  templateUrl: './breadcrumbs.page.html',
+  styleUrls: ['./breadcrumbs.page.scss'],
+  standalone: true,
+  imports: [
+    IonContent,
+    IonHeader,
+    IonTitle,
+    IonToolbar,
+    CommonModule,
+    FormsModule,
+    IonBackButton,
+    IonIcon,
+    IonItem,
+    IonItemGroup,
+    IonLabel,
+    IonList,
+    IonText,
+    IonBreadcrumbs,
+    IonBreadcrumb,
+  ],
+})
+export class BreadcrumbsPage implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+}

package/demo/src/app/index/pages/button/button.page.html

@@ -42,15 +42,34 @@
     <ion-list-header><ion-label>Inner ion-buttons</ion-label></ion-list-header>
     <ion-item-group>
       <ion-item>
-        <ion-label><code>buttons > button.ios26-liquid-glass</code></ion-label>
+        <ion-label><code>buttons > button</code></ion-label>
+        <ion-buttons slot="end">
+          <ion-button>Link</ion-button>
+        </ion-buttons>
+      </ion-item>
+      <ion-item>
+        <ion-label><code>buttons > button[fill=default]</code></ion-label>
+        <ion-buttons slot="end">
+          <ion-button fill="default">Link</ion-button>
+        </ion-buttons>
+      </ion-item>
+      <ion-item>
+        <ion-label><code>buttons > button[fill=default][size=default]</code></ion-label>
         <ion-buttons slot="end">
-          <ion-button class="ios26-liquid-glass">Link</ion-button>
+          <ion-button fill="default" size="default">Link</ion-button>
+        </ion-buttons>
+      </ion-item>
+      <ion-item>
+        <ion-label><code>buttons > button[fill=default][size=large]</code></ion-label>
+        <ion-buttons slot="end" class="ios26-disabled">
+          <ion-button fill="default" size="large">Buttons Shadow</ion-button>
+          <ion-button fill="default" class="ios26-disabled" size="large">Default Theme</ion-button>
         </ion-buttons>
       </ion-item>
       <ion-item>
-        <ion-label><code>buttons > button.ios26-liquid-glass[fill=outline]</code></ion-label>
+        <ion-label><code>buttons > button[fill=outline]</code></ion-label>
         <ion-buttons slot="end">
-          <ion-button class="ios26-liquid-glass" fill="outline">Link</ion-button>
+          <ion-button fill="outline">Buttons Shadow</ion-button>
         </ion-buttons>
       </ion-item>
     </ion-item-group>
@@ -60,31 +79,34 @@
     <ion-list-header><ion-label>Standalone</ion-label></ion-list-header>
     <ion-item-group>
       <ion-item>
-        <ion-label><code>button.ios26-liquid-glass[fill=default]</code></ion-label>
-        <ion-button slot="end" class="ios26-liquid-glass" fill="default">Link</ion-button>
+        <ion-label><code>button[fill=default]</code></ion-label>
+        <ion-button slot="end" fill="default">Link</ion-button>
+      </ion-item>
+      <ion-item>
+        <ion-label><code>button[fill=default][color=primary]</code></ion-label>
+        <ion-button slot="end" fill="default" color="primary">Link</ion-button>
       </ion-item>
       <ion-item>
-        <ion-label><code>button.ios26-liquid-glass[fill=solid]</code></ion-label>
-        <ion-button slot="end" class="ios26-liquid-glass" fill="solid">Link</ion-button>
+        <ion-label><code>button[fill=solid]</code></ion-label>
+        <ion-button slot="end" fill="solid">Link</ion-button>
       </ion-item>
       <ion-item>
-        <ion-label><code>button.ios26-liquid-glass[fill=outline]</code></ion-label>
-        <ion-button slot="end" class="ios26-liquid-glass" fill="outline">Link</ion-button>
+        <ion-label><code>button[fill=outline]</code></ion-label>
+        <ion-button slot="end" fill="outline">Link</ion-button>
       </ion-item>
       <ion-item>
-        <ion-label><code>button.ios26-liquid-glass[fill=clear]</code></ion-label>
-        <ion-button slot="end" class="ios26-liquid-glass" fill="clear">Link</ion-button>
+        <ion-label><code>button[fill=clear]</code></ion-label>
+        <ion-button slot="end" fill="clear">Link</ion-button>
       </ion-item>
     </ion-item-group>
   </ion-list>
 
   <section class="section-example">
-    <ion-button class="ios26-liquid-glass" size="small">small</ion-button>
-    <ion-button class="ios26-liquid-glass" size="default">default</ion-button>
-    <ion-button class="ios26-liquid-glass" size="large">large</ion-button><br />
-
-    <ion-button class="ios26-liquid-glass" size="small" fill="default">small</ion-button>
-    <ion-button class="ios26-liquid-glass" size="default" fill="default">default</ion-button>
-    <ion-button class="ios26-liquid-glass" size="large" fill="default">large</ion-button>
+    <ion-button size="small" fill="default">small</ion-button>
+    <ion-button size="default" fill="default">default</ion-button>
+    <ion-button size="large" fill="default">large</ion-button><br />
+    <ion-button size="small" fill="solid" color="primary">small</ion-button>
+    <ion-button size="default" fill="solid" color="primary">default</ion-button>
+    <ion-button size="large" fill="solid" color="primary">large</ion-button>
   </section>
 </ion-content>

package/demo/src/app/index/pages/button/button.page.scss

@@ -0,0 +1,3 @@
+ion-item *[slot='end'] {
+  margin-right: 6px;
+}

package/demo/src/app/index/pages/button/button.page.spec.ts

@@ -1,11 +1,15 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ButtonPage } from './button.page';
+import { testConfig } from '../../../../../util/test.config';
 
 describe('ButtonPage', () => {
   let component: ButtonPage;
   let fixture: ComponentFixture<ButtonPage>;
 
-  beforeEach(() => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      providers: testConfig.providers,
+    }).compileComponents();
     fixture = TestBed.createComponent(ButtonPage);
     component = fixture.componentInstance;
     fixture.detectChanges();

package/demo/src/app/index/pages/button/button.page.ts

@@ -5,7 +5,6 @@ import {
   IonBackButton,
   IonButton,
   IonButtons,
-  IonCheckbox,
   IonContent,
   IonHeader,
   IonIcon,
@@ -33,7 +32,6 @@ import {
     CommonModule,
     FormsModule,
     IonBackButton,
-    IonCheckbox,
     IonIcon,
     IonItem,
     IonItemGroup,

package/demo/src/app/index/pages/card/card.page.html

@@ -0,0 +1,171 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-back-button slot="start" defaultHref="/main/index"></ion-back-button>
+    <ion-title>card</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true" color="light">
+  <ion-list [inset]="true">
+    <ion-item-group class="header-item-group">
+      <ion-item>
+        <ion-label>
+          <ion-icon name="logo-ionic" style="background: linear-gradient(#489bfd, #2b77f4)"></ion-icon>
+          <h2>card</h2>
+          <ion-header collapse="condense">
+            <ion-toolbar></ion-toolbar>
+          </ion-header>
+          <ion-text><code>This page is a component demo for &#64;rdlabo/ionic-theme-ios26.</code></ion-text>
+        </ion-label>
+      </ion-item>
+    </ion-item-group>
+  </ion-list>
+
+  <section class="section-example">
+    <ion-card>
+      <ion-card-header>
+        <ion-card-title>Card Title</ion-card-title>
+        <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+      </ion-card-header>
+
+      <ion-card-content> Here's a small text description for the card content. Nothing more, nothing less. </ion-card-content>
+    </ion-card>
+    <ion-card>
+      <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/card-media.png" />
+      <ion-card-header>
+        <ion-card-title>Card Title</ion-card-title>
+        <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+      </ion-card-header>
+
+      <ion-card-content> Here's a small text description for the card content. Nothing more, nothing less. </ion-card-content>
+    </ion-card>
+    <ion-card>
+      <ion-card-header>
+        <ion-card-title>Card Title</ion-card-title>
+        <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+      </ion-card-header>
+
+      <ion-card-content> Here's a small text description for the card content. Nothing more, nothing less. </ion-card-content>
+
+      <ion-button fill="clear">Action 1</ion-button>
+      <ion-button fill="clear">Action 2</ion-button>
+    </ion-card>
+    <ion-card>
+      <ion-card-header>
+        <ion-card-title>Card Title</ion-card-title>
+        <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+      </ion-card-header>
+      <ion-card-content>
+        <ion-list>
+          <ion-item>
+            <ion-thumbnail slot="start">
+              <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
+            </ion-thumbnail>
+            <ion-label>Item</ion-label>
+          </ion-item>
+
+          <ion-item>
+            <ion-thumbnail slot="start">
+              <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
+            </ion-thumbnail>
+            <ion-label>Item</ion-label>
+          </ion-item>
+
+          <ion-item>
+            <ion-thumbnail slot="start">
+              <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
+            </ion-thumbnail>
+            <ion-label>Item</ion-label>
+          </ion-item>
+
+          <ion-item lines="none">
+            <ion-thumbnail slot="start">
+              <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
+            </ion-thumbnail>
+            <ion-label>Item</ion-label>
+          </ion-item>
+        </ion-list>
+      </ion-card-content>
+    </ion-card>
+    <ion-card color="primary">
+      <ion-card-header>
+        <ion-card-title>Card Title</ion-card-title>
+        <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+      </ion-card-header>
+
+      <ion-card-content> Card Content </ion-card-content>
+    </ion-card>
+
+    <ion-card color="secondary">
+      <ion-card-header>
+        <ion-card-title>Card Title</ion-card-title>
+        <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+      </ion-card-header>
+
+      <ion-card-content> Card Content </ion-card-content>
+    </ion-card>
+
+    <ion-card color="tertiary">
+      <ion-card-header>
+        <ion-card-title>Card Title</ion-card-title>
+        <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+      </ion-card-header>
+
+      <ion-card-content> Card Content </ion-card-content>
+    </ion-card>
+
+    <ion-card color="success">
+      <ion-card-header>
+        <ion-card-title>Card Title</ion-card-title>
+        <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+      </ion-card-header>
+
+      <ion-card-content> Card Content </ion-card-content>
+    </ion-card>
+
+    <ion-card color="warning">
+      <ion-card-header>
+        <ion-card-title>Card Title</ion-card-title>
+        <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+      </ion-card-header>
+
+      <ion-card-content> Card Content </ion-card-content>
+    </ion-card>
+
+    <ion-card color="danger">
+      <ion-card-header>
+        <ion-card-title>Card Title</ion-card-title>
+        <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+      </ion-card-header>
+
+      <ion-card-content> Card Content </ion-card-content>
+    </ion-card>
+
+    <ion-card color="light">
+      <ion-card-header>
+        <ion-card-title>Card Title</ion-card-title>
+        <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+      </ion-card-header>
+
+      <ion-card-content> Card Content </ion-card-content>
+    </ion-card>
+
+    <ion-card color="medium">
+      <ion-card-header>
+        <ion-card-title>Card Title</ion-card-title>
+        <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+      </ion-card-header>
+
+      <ion-card-content> Card Content </ion-card-content>
+    </ion-card>
+
+    <ion-card color="dark">
+      <ion-card-header>
+        <ion-card-title>Card Title</ion-card-title>
+        <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+      </ion-card-header>
+
+      <ion-card-content> Card Content </ion-card-content>
+    </ion-card>
+  </section>
+</ion-content>

package/demo/src/app/index/pages/card/card.page.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CardPage } from './card.page';
+import { testConfig } from '../../../../../util/test.config';
+
+describe('CardPage', () => {
+  let component: CardPage;
+  let fixture: ComponentFixture<CardPage>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      providers: testConfig.providers,
+    }).compileComponents();
+    fixture = TestBed.createComponent(CardPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/demo/src/app/index/pages/card/card.page.ts

@@ -0,0 +1,57 @@
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import {
+  IonBackButton,
+  IonButton,
+  IonCard,
+  IonCardContent,
+  IonCardHeader,
+  IonCardSubtitle,
+  IonCardTitle,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonItemGroup,
+  IonLabel,
+  IonList,
+  IonText,
+  IonThumbnail,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-card',
+  templateUrl: './card.page.html',
+  styleUrls: ['./card.page.scss'],
+  standalone: true,
+  imports: [
+    IonContent,
+    IonHeader,
+    IonTitle,
+    IonToolbar,
+    CommonModule,
+    FormsModule,
+    IonBackButton,
+    IonIcon,
+    IonItem,
+    IonItemGroup,
+    IonLabel,
+    IonList,
+    IonText,
+    IonCard,
+    IonCardHeader,
+    IonCardTitle,
+    IonCardSubtitle,
+    IonCardContent,
+    IonButton,
+    IonThumbnail,
+  ],
+})
+export class CardPage implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+}

package/demo/src/app/index/pages/checkbox/checkbox.page.spec.ts

@@ -1,11 +1,15 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { CheckboxPage } from './checkbox.page';
+import { testConfig } from '../../../../../util/test.config';
 
 describe('CheckboxPage', () => {
   let component: CheckboxPage;
   let fixture: ComponentFixture<CheckboxPage>;
 
-  beforeEach(() => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      providers: testConfig.providers,
+    }).compileComponents();
     fixture = TestBed.createComponent(CheckboxPage);
     component = fixture.componentInstance;
     fixture.detectChanges();