feat(ionic): start migrating to standalone components according to #157

src/app/components/speech-to-text/speech-to-text.component.spec.ts

@@ -3,8 +3,8 @@ import {axe, toHaveNoViolations} from 'jasmine-axe';
 
 import {SpeechToTextComponent} from './speech-to-text.component';
 import {AppTranslocoTestingModule} from '../../core/modules/transloco/transloco-testing.module';
-import {IonicModule} from '@ionic/angular';
 import {MatTooltipModule} from '@angular/material/tooltip';
+import {IonButton, IonIcon} from '@ionic/angular/standalone';
 
 describe('SpeechToTextComponent', () => {
   let component: SpeechToTextComponent;
@@ -13,7 +13,7 @@ describe('SpeechToTextComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [SpeechToTextComponent],
-      imports: [AppTranslocoTestingModule, MatTooltipModule, IonicModule.forRoot()],
+      imports: [AppTranslocoTestingModule, MatTooltipModule, IonIcon, IonButton],
     }).compileComponents();
   });
 

src/app/components/speech-to-text/speech-to-text.module.ts

@@ -1,13 +1,13 @@
-import {IonicModule} from '@ionic/angular';
 import {NgModule} from '@angular/core';
 
 import {SpeechToTextComponent} from './speech-to-text.component';
 import {AppTranslocoModule} from '../../core/modules/transloco/transloco.module';
 import {MatTooltipModule} from '@angular/material/tooltip';
 import {CommonModule} from '@angular/common';
+import {IonButton, IonIcon} from '@ionic/angular/standalone';
 
 @NgModule({
-  imports: [CommonModule, AppTranslocoModule, IonicModule, MatTooltipModule],
+  imports: [CommonModule, AppTranslocoModule, IonIcon, IonButton, MatTooltipModule],
   declarations: [SpeechToTextComponent],
   exports: [SpeechToTextComponent],
 })

src/app/components/text-to-speech/text-to-speech.component.spec.ts

@@ -4,7 +4,7 @@ import {axe, toHaveNoViolations} from 'jasmine-axe';
 import {TextToSpeechComponent} from './text-to-speech.component';
 import {AppTranslocoTestingModule} from '../../core/modules/transloco/transloco-testing.module';
 import {SimpleChange} from '@angular/core';
-import {IonicModule} from '@ionic/angular';
+import {IonButton, IonIcon} from '@ionic/angular/standalone';
 import Spy = jasmine.Spy;
 
 describe('TextToSpeechComponent', () => {
@@ -26,7 +26,7 @@ describe('TextToSpeechComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [TextToSpeechComponent],
-      imports: [AppTranslocoTestingModule, IonicModule.forRoot()],
+      imports: [AppTranslocoTestingModule, IonIcon, IonButton],
     }).compileComponents();
   });
 

src/app/components/text-to-speech/text-to-speech.module.ts

@@ -1,12 +1,12 @@
-import {IonicModule} from '@ionic/angular';
 import {NgModule} from '@angular/core';
 import {AppTranslocoModule} from '../../core/modules/transloco/transloco.module';
 import {MatTooltipModule} from '@angular/material/tooltip';
 import {TextToSpeechComponent} from './text-to-speech.component';
 import {CommonModule} from '@angular/common';
+import {IonButton, IonIcon} from '@ionic/angular/standalone';
 
 @NgModule({
-  imports: [CommonModule, AppTranslocoModule, IonicModule, MatTooltipModule],
+  imports: [CommonModule, AppTranslocoModule, IonIcon, IonButton, MatTooltipModule],
   declarations: [TextToSpeechComponent],
   exports: [TextToSpeechComponent],
 })

src/app/components/video/video-controls/video-controls.component.spec.ts

@@ -6,8 +6,8 @@ import {AppTranslocoTestingModule} from '../../../core/modules/transloco/translo
 import {NgxsModule} from '@ngxs/store';
 import {SettingsState} from '../../../modules/settings/settings.state';
 import {ngxsConfig} from '../../../core/modules/ngxs/ngxs.module';
-import {IonicModule} from '@ionic/angular';
 import {MatTooltipModule} from '@angular/material/tooltip';
+import {IonFab, IonFabButton} from '@ionic/angular/standalone';
 
 describe('VideoControlsComponent', () => {
   let component: VideoControlsComponent;
@@ -19,7 +19,8 @@ describe('VideoControlsComponent', () => {
       imports: [
         AppTranslocoTestingModule,
         MatTooltipModule,
-        IonicModule.forRoot(),
+        IonFab,
+        IonFabButton,
         NgxsModule.forRoot([SettingsState], ngxsConfig),
       ],
     }).compileComponents();

src/app/components/video/video.component.spec.ts

@@ -11,9 +11,9 @@ import {VideoState} from '../../core/modules/ngxs/store/video/video.state';
 import {SignWritingState} from '../../modules/sign-writing/sign-writing.state';
 import {PoseState} from '../../modules/pose/pose.state';
 import {DetectorState} from '../../modules/detector/detector.state';
-import {IonicModule} from '@ionic/angular';
 import {AppTranslocoTestingModule} from '../../core/modules/transloco/transloco-testing.module';
 import {MatTooltipModule} from '@angular/material/tooltip';
+import {IonFab, IonIcon} from '@ionic/angular/standalone';
 
 describe('VideoComponent', () => {
   let component: VideoComponent;
@@ -25,7 +25,8 @@ describe('VideoComponent', () => {
       imports: [
         AppTranslocoTestingModule,
         MatTooltipModule,
-        IonicModule.forRoot(),
+        IonIcon,
+        IonFab,
         NgxsModule.forRoot([SettingsState, VideoState, SignWritingState, PoseState, DetectorState], ngxsConfig),
       ],
     }).compileComponents();

src/app/components/video/video.module.ts

@@ -1,5 +1,4 @@
 import {NgModule} from '@angular/core';
-import {IonicModule} from '@ionic/angular';
 import {VideoComponent} from './video.component';
 import {VideoControlsComponent} from './video-controls/video-controls.component';
 import {AnimationModule} from '../animation/animation.module';
@@ -11,15 +10,18 @@ import {MatTooltipModule} from '@angular/material/tooltip';
 import {DetectorState} from '../../modules/detector/detector.state';
 import {SignWritingState} from '../../modules/sign-writing/sign-writing.state';
 import {PoseModule} from '../../modules/pose/pose.module';
+import {IonFab, IonFabButton, IonIcon} from '@ionic/angular/standalone';
 
 @NgModule({
   imports: [
     CommonModule,
-    IonicModule,
     AnimationModule,
     AppTranslocoModule,
     MatTooltipModule,
     PoseModule,
+    IonIcon,
+    IonFab,
+    IonFabButton,
     NgxsModule.forFeature([VideoState, SignWritingState, DetectorState]),
   ],
   declarations: [VideoComponent, VideoControlsComponent],

src/app/modules/settings/settings.module.ts

@@ -4,12 +4,12 @@ import {SettingsState} from './settings.state';
 import {SettingsComponent} from './settings/settings.component';
 import {AppSharedModule} from '../../core/modules/shared.module';
 import {FormsModule} from '@angular/forms';
-import {IonicModule} from '@ionic/angular';
+import {IonCheckbox, IonItem, IonList} from '@ionic/angular/standalone';
 
 @NgModule({
   declarations: [SettingsComponent],
   providers: [],
-  imports: [NgxsModule.forFeature([SettingsState]), AppSharedModule, FormsModule, IonicModule],
+  imports: [NgxsModule.forFeature([SettingsState]), AppSharedModule, FormsModule, IonItem, IonCheckbox, IonList],
   exports: [SettingsComponent],
 })
 export class SettingsModule {}

src/app/modules/settings/settings/settings.component.html

@@ -1,4 +1,4 @@
-<ion-list *transloco="let t; read: 'settings'" [attr.aria-label]="t('title')">
+<ion-list *transloco="let t; read: 'settings'">
   @for (s of availableSettings; track s) {
   <ion-item>
     <ion-checkbox [checked]="settings[s]" [attr.aria-label]="t(s)" (ionChange)="changeSetting(s, $event)">

src/app/modules/settings/settings/settings.component.spec.ts

@@ -7,7 +7,7 @@ import {SettingsState} from '../settings.state';
 import {FormsModule} from '@angular/forms';
 import {ngxsConfig} from '../../../core/modules/ngxs/ngxs.module';
 import {AppTranslocoTestingModule} from '../../../core/modules/transloco/transloco-testing.module';
-import {IonicModule} from '@ionic/angular';
+import {IonCheckbox, IonItem, IonList} from '@ionic/angular/standalone';
 
 describe('SettingsComponent', () => {
   let store: Store;
@@ -21,7 +21,9 @@ describe('SettingsComponent', () => {
         NgxsModule.forRoot([SettingsState], ngxsConfig),
         FormsModule,
         AppTranslocoTestingModule,
-        IonicModule.forRoot(),
+        IonItem,
+        IonCheckbox,
+        IonList,
       ],
     }).compileComponents();
   });

src/app/pages/main.component.spec.ts

@@ -4,6 +4,7 @@ import {MainComponent} from './main.component';
 import {IonicModule} from '@ionic/angular';
 import {axe, toHaveNoViolations} from 'jasmine-axe';
 import {RouterTestingModule} from '@angular/router/testing';
+import {IonIcon, IonLabel, IonTabBar, IonTabButton, IonTabs} from '@ionic/angular/standalone';
 
 describe('MainComponent', () => {
   let component: MainComponent;
@@ -12,7 +13,7 @@ describe('MainComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [MainComponent],
-      imports: [IonicModule.forRoot(), RouterTestingModule],
+      imports: [IonLabel, IonIcon, IonTabButton, IonTabBar, IonTabs, RouterTestingModule],
     }).compileComponents();
 
     fixture = TestBed.createComponent(MainComponent);

src/app/pages/main.module.ts

@@ -1,11 +1,11 @@
 import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {MainComponent} from './main.component';
-import {IonicModule} from '@ionic/angular';
 import {MainRoutingModule} from './main-routing.module';
+import {IonLabel, IonIcon, IonTabButton, IonTabBar, IonTabs} from '@ionic/angular/standalone';
 
 @NgModule({
   declarations: [MainComponent],
-  imports: [CommonModule, IonicModule, MainRoutingModule],
+  imports: [CommonModule, IonLabel, IonIcon, IonTabButton, IonTabBar, IonTabs, MainRoutingModule],
 })
 export class MainPageModule {}

src/app/pages/translate/pose-viewers/human-pose-viewer/human-pose-viewer.component.html

@@ -14,7 +14,7 @@
     height="256px"></pose-viewer>
 
   @if (!modelReady) {
-  <ion-spinner [attr.aria-label]="t('loading')" color="primary"></ion-spinner>
+  <ion-spinner [matTooltip]="t('loading')" color="primary"></ion-spinner>
   }
 
   <canvas #canvas width="768" height="768"></canvas>