fix(prettier): explicitly use latest version

package.json

@@ -140,7 +140,7 @@
     "eslint": "8.57.0",
     "fuzzy": "0.1.3",
     "husky": "9.1.7",
-    "inquirer": "12.2.0",
+    "inquirer": "12.3.0",
     "inquirer-autocomplete-prompt": "3.0.1",
     "jasmine-axe": "1.1.0",
     "jasmine-core": "5.5.0",
@@ -158,6 +158,7 @@
     "node-html-parser": "6.1.13",
     "npm-license-crawler": "0.2.1",
     "open": "10.1.0",
+    "prettier": "3.4.2",
     "pwa-asset-generator": "6.4.0",
     "sitemap": "8.0.0",
     "tiny-async-pool": "2.1.0",

src/app/app.config.server.ts

@@ -3,7 +3,7 @@ import {appConfig} from './app.config';
 
 const serverConfig: ApplicationConfig = {
   providers: [
-    // provideServerRendering() TODO!
+    // provideServerRendering() //TODO!
   ],
 };
 

src/app/components/i18n-language-selector/i18n-language-selector.component.html

@@ -1,11 +1,11 @@
 <select [attr.aria-label]="'language-selector.label' | transloco" (change)="change($event)">
   @for (group of languages; track group) {
-  <optgroup [label]="group.label">
-    @for (lang of group.languages; track lang.key) {
-    <option [value]="lang.key" [selected]="lang.key === current">
-      {{ lang.value }}
-    </option>
-    }
-  </optgroup>
+    <optgroup [label]="group.label">
+      @for (lang of group.languages; track lang.key) {
+        <option [value]="lang.key" [selected]="lang.key === current">
+          {{ lang.value }}
+        </option>
+      }
+    </optgroup>
   }
 </select>

src/app/components/logo/logo.component.html

@@ -3,5 +3,5 @@
   <img src="../../../assets/brand/logo.svg" alt="Logo" />
 </picture>
 @if (text) {
-{{ text }}
+  {{ text }}
 }

src/app/components/speech-to-text/speech-to-text.component.html

@@ -1,28 +1,28 @@
 <ng-container *transloco="let t; read: 'speech-to-text'">
   <!-- As a single button it is uglier code, but nice ripple animation -->
   @if (!supportError) {
-  <ion-button
-    class="circle-icon"
-    fill="clear"
-    shape="round"
-    color="dark"
-    (click)="isRecording ? stop() : start()"
-    [attr.aria-label]="t(isRecording ? 'stop' : 'start')"
-    [matTooltip]="t(isRecording ? 'stop' : 'start')"
-    [matTooltipPosition]="matTooltipPosition">
-    <ion-icon [name]="isRecording ? 'stop-circle-outline' : 'mic-outline'" slot="icon-only" color="primary" />
-  </ion-button>
+    <ion-button
+      class="circle-icon"
+      fill="clear"
+      shape="round"
+      color="dark"
+      (click)="isRecording ? stop() : start()"
+      [attr.aria-label]="t(isRecording ? 'stop' : 'start')"
+      [matTooltip]="t(isRecording ? 'stop' : 'start')"
+      [matTooltipPosition]="matTooltipPosition">
+      <ion-icon [name]="isRecording ? 'stop-circle-outline' : 'mic-outline'" slot="icon-only" color="primary" />
+    </ion-button>
   } @else {
-  <!-- If language is not supported -->
-  <ion-button
-    class="circle-icon"
-    fill="clear"
-    shape="round"
-    color="medium"
-    [attr.aria-label]="t(supportError)"
-    [matTooltip]="t(supportError)"
-    [matTooltipPosition]="matTooltipPosition">
-    <ion-icon name="mic-off-outline" slot="icon-only" />
-  </ion-button>
+    <!-- If language is not supported -->
+    <ion-button
+      class="circle-icon"
+      fill="clear"
+      shape="round"
+      color="medium"
+      [attr.aria-label]="t(supportError)"
+      [matTooltip]="t(supportError)"
+      [matTooltipPosition]="matTooltipPosition">
+      <ion-icon name="mic-off-outline" slot="icon-only" />
+    </ion-button>
   }
 </ng-container>

src/app/components/text-to-speech/text-to-speech.component.html

@@ -1,28 +1,33 @@
 <ng-container *transloco="let t; read: 'text-to-speech'">
-  @if (text.trim()) { @if (isSupported) {
-  <!-- As a single button it is uglier code, but nice ripple animation -->
-  <ion-button
-    class="circle-icon"
-    fill="clear"
-    shape="round"
-    color="dark"
-    (click)="isSpeaking ? cancel() : play()"
-    [attr.aria-label]="t(isSpeaking ? 'cancel' : 'play')"
-    [matTooltip]="t(isSpeaking ? 'cancel' : 'play')"
-    matTooltipPosition="above">
-    <ion-icon [name]="isSpeaking ? 'stop-circle-outline' : 'volume-medium-outline'" slot="icon-only" color="primary" />
-  </ion-button>
-  } @else {
-  <!-- If language is not supported -->
-  <ion-button
-    class="circle-icon"
-    fill="clear"
-    shape="round"
-    color="medium"
-    [attr.aria-label]="t('unavailable')"
-    [matTooltip]="t('unavailable')"
-    matTooltipPosition="above">
-    <ion-icon name="volume-mute-outline" slot="icon-only" />
-  </ion-button>
-  } }
+  @if (text.trim()) {
+    @if (isSupported) {
+      <!-- As a single button it is uglier code, but nice ripple animation -->
+      <ion-button
+        class="circle-icon"
+        fill="clear"
+        shape="round"
+        color="dark"
+        (click)="isSpeaking ? cancel() : play()"
+        [attr.aria-label]="t(isSpeaking ? 'cancel' : 'play')"
+        [matTooltip]="t(isSpeaking ? 'cancel' : 'play')"
+        matTooltipPosition="above">
+        <ion-icon
+          [name]="isSpeaking ? 'stop-circle-outline' : 'volume-medium-outline'"
+          slot="icon-only"
+          color="primary" />
+      </ion-button>
+    } @else {
+      <!-- If language is not supported -->
+      <ion-button
+        class="circle-icon"
+        fill="clear"
+        shape="round"
+        color="medium"
+        [attr.aria-label]="t('unavailable')"
+        [matTooltip]="t('unavailable')"
+        matTooltipPosition="above">
+        <ion-icon name="volume-mute-outline" slot="icon-only" />
+      </ion-button>
+    }
+  }
 </ng-container>

src/app/components/video/video-controls/video-controls.component.html

@@ -1,25 +1,26 @@
 <ng-container *transloco="let t; read: 'video.controls'">
   @if (settingsState$ | async; as settings) {
-  <!-- Video -->
-  @if (settings.receiveVideo) {
-  <ion-fab>
-    <ion-fab-button
-      (click)="applySetting('receiveVideo', false)"
-      [attr.aria-label]="t('receiveVideo.on')"
-      [matTooltip]="t('receiveVideo.on')"
-      class="transparent">
-      <ion-icon name="videocam-outline" />
-    </ion-fab-button>
-  </ion-fab>
-  } @else {
-  <ion-fab>
-    <ion-fab-button
-      (click)="applySetting('receiveVideo', true)"
-      [attr.aria-label]="t('receiveVideo.off')"
-      [matTooltip]="t('receiveVideo.off')"
-      color="danger">
-      <ion-icon name="videocam-off-outline" />
-    </ion-fab-button>
-  </ion-fab>
-  } }
+    <!-- Video -->
+    @if (settings.receiveVideo) {
+      <ion-fab>
+        <ion-fab-button
+          (click)="applySetting('receiveVideo', false)"
+          [attr.aria-label]="t('receiveVideo.on')"
+          [matTooltip]="t('receiveVideo.on')"
+          class="transparent">
+          <ion-icon name="videocam-outline" />
+        </ion-fab-button>
+      </ion-fab>
+    } @else {
+      <ion-fab>
+        <ion-fab-button
+          (click)="applySetting('receiveVideo', true)"
+          [attr.aria-label]="t('receiveVideo.off')"
+          [matTooltip]="t('receiveVideo.off')"
+          color="danger">
+          <ion-icon name="videocam-off-outline" />
+        </ion-fab-button>
+      </ion-fab>
+    }
+  }
 </ng-container>

src/app/components/video/video.component.html

@@ -1,24 +1,28 @@
-@if (videoState$ | async; as videoState) { @if (poseState$ | async; as poseState) {
-<ng-container *transloco="let t; read: 'video'">
-  @if (videoState.error) {
-  <p>{{ t('errors.' + videoState.error) }}</p>
-  } @else if (!poseState.isLoaded) {
-  <p>{{ 'pose.loading' | transloco }}</p>
+@if (videoState$ | async; as videoState) {
+  @if (poseState$ | async; as poseState) {
+    <ng-container *transloco="let t; read: 'video'">
+      @if (videoState.error) {
+        <p>{{ t('errors.' + videoState.error) }}</p>
+      } @else if (!poseState.isLoaded) {
+        <p>{{ 'pose.loading' | transloco }}</p>
+      }
+    </ng-container>
+    <div [hidden]="videoState.error || !poseState.isLoaded" id="video-container">
+      <video #video muted playsinline crossorigin="anonymous"></video>
+      <canvas #canvas height="100%" width="100%"></canvas>
+      <div #stats></div>
+      @if (videoEnded) {
+        <div class="video-overlay" (click)="replayVideo()">
+          <ion-icon name="play-circle-outline" />
+        </div>
+      }
+    </div>
+    <!-- [hidden]="videoState.error || !poseState.isLoaded" -->
+    @if (animatePose$ | async) {
+      <app-animation />
+    }
+    @if (displayControls) {
+      <app-video-controls />
+    }
   }
-</ng-container>
-<div [hidden]="videoState.error || !poseState.isLoaded" id="video-container">
-  <video #video muted playsinline crossorigin="anonymous"></video>
-  <canvas #canvas height="100%" width="100%"></canvas>
-  <div #stats></div>
-  @if (videoEnded) {
-  <div class="video-overlay" (click)="replayVideo()">
-    <ion-icon name="play-circle-outline" />
-  </div>
-  }
-</div>
-<!-- [hidden]="videoState.error || !poseState.isLoaded" -->
-@if (animatePose$ | async) {
-<app-animation />
-} @if (displayControls) {
-<app-video-controls />
-} } }
+}

src/app/directives/keyboard-flying.directive.ts

@@ -2,7 +2,7 @@ import {DOCUMENT} from '@angular/common';
 import {Directive, ElementRef, inject, OnDestroy, OnInit} from '@angular/core';
 import {Capacitor, PluginListenerHandle} from '@capacitor/core';
 import {Keyboard, KeyboardResize} from '@capacitor/keyboard';
-import {Animation, AnimationController} from '@ionic/angular';
+import {Animation, AnimationController} from '@ionic/angular/standalone';
 
 @Directive({
   selector: '[appKeyboardFlying]',

src/app/modules/settings/settings.actions.ts

@@ -3,5 +3,8 @@ import {SettingsStateModel} from './settings.state';
 export class SetSetting {
   static readonly type = '[Settings] Set Setting';
 
-  constructor(public setting: keyof SettingsStateModel, public value: any) {}
+  constructor(
+    public setting: keyof SettingsStateModel,
+    public value: any
+  ) {}
 }

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

@@ -1,9 +1,9 @@
 <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)">
-      {{ t(s) }}
-    </ion-checkbox>
-  </ion-item>
+    <ion-item>
+      <ion-checkbox [checked]="settings[s]" [attr.aria-label]="t(s)" (ionChange)="changeSetting(s, $event)">
+        {{ t(s) }}
+      </ion-checkbox>
+    </ion-item>
   }
 </ion-list>

src/app/modules/sign-writing/sign-writing.actions.ts

@@ -13,7 +13,10 @@ export class EstimateHandShape {
 export class EstimateFaceShape {
   static readonly type = '[SignWriting - Face] Estimate Face Shape';
 
-  constructor(public landmarks: PoseLandmark[], public poseImage: HTMLCanvasElement) {}
+  constructor(
+    public landmarks: PoseLandmark[],
+    public poseImage: HTMLCanvasElement
+  ) {}
 }
 
 export class CalculateBodyFactors {

src/app/pages/benchmark/benchmark-item/benchmark-item.component.html

@@ -4,9 +4,9 @@
   </ion-card-header>
   <ion-card-content>
     @if (timings.length === 1) {
-    <span>{{ timings[0].toFixed(1) }}ms</span>
+      <span>{{ timings[0].toFixed(1) }}ms</span>
     } @else if (timings.length > 1) {
-    <span>~{{ fps() }}fps</span>
+      <span>~{{ fps() }}fps</span>
     }
   </ion-card-content>
 </ion-card>

src/app/pages/benchmark/benchmark.component.html

@@ -12,20 +12,20 @@
     <div class="container">
       <ion-button (click)="bench()">Start Benchmarking!</ion-button>
       @for (stat of stats | keyvalue; track stat.key) {
-      <ion-card>
-        <ion-card-header>
-          <ion-card-title>{{ t('stats.' + stat.key + '.title') }}</ion-card-title>
-        </ion-card-header>
-        <ion-card-content>
-          <p>
-            @for (item of stat.value | keyvalue; track item.key) {
-            <app-benchmark-item
-              [matTooltip]="t('stats.' + stat.key + '.' + item.key)"
-              [timings]="item.value"></app-benchmark-item>
-            }
-          </p>
-        </ion-card-content>
-      </ion-card>
+        <ion-card>
+          <ion-card-header>
+            <ion-card-title>{{ t('stats.' + stat.key + '.title') }}</ion-card-title>
+          </ion-card-header>
+          <ion-card-content>
+            <p>
+              @for (item of stat.value | keyvalue; track item.key) {
+                <app-benchmark-item
+                  [matTooltip]="t('stats.' + stat.key + '.' + item.key)"
+                  [timings]="item.value"></app-benchmark-item>
+              }
+            </p>
+          </ion-card-content>
+        </ion-card>
       }
     </div>
   </ng-container>