From 4bcaf0cb65efbcb8f5752b566073682290b31912 Mon Sep 17 00:00:00 2001 From: Amit Moryossef Date: Mon, 20 May 2024 12:24:13 +0200 Subject: [PATCH 01/30] feat(ionic): start migrating to standalone components according to #157 --- .../speech-to-text/speech-to-text.component.spec.ts | 4 ++-- src/app/components/speech-to-text/speech-to-text.module.ts | 4 ++-- .../text-to-speech/text-to-speech.component.spec.ts | 4 ++-- src/app/components/text-to-speech/text-to-speech.module.ts | 4 ++-- .../video/video-controls/video-controls.component.spec.ts | 5 +++-- src/app/components/video/video.component.spec.ts | 5 +++-- src/app/components/video/video.module.ts | 6 ++++-- src/app/modules/settings/settings.module.ts | 4 ++-- src/app/modules/settings/settings/settings.component.html | 2 +- .../modules/settings/settings/settings.component.spec.ts | 6 ++++-- src/app/pages/main.component.spec.ts | 3 ++- src/app/pages/main.module.ts | 4 ++-- .../human-pose-viewer/human-pose-viewer.component.html | 2 +- 13 files changed, 30 insertions(+), 23 deletions(-) diff --git a/src/app/components/speech-to-text/speech-to-text.component.spec.ts b/src/app/components/speech-to-text/speech-to-text.component.spec.ts index a8777ca8..9fe931d4 100644 --- a/src/app/components/speech-to-text/speech-to-text.component.spec.ts +++ b/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(); }); diff --git a/src/app/components/speech-to-text/speech-to-text.module.ts b/src/app/components/speech-to-text/speech-to-text.module.ts index 7aa4bc0b..f3905e95 100644 --- a/src/app/components/speech-to-text/speech-to-text.module.ts +++ b/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], }) diff --git a/src/app/components/text-to-speech/text-to-speech.component.spec.ts b/src/app/components/text-to-speech/text-to-speech.component.spec.ts index 8f50a476..c0e2f8e7 100644 --- a/src/app/components/text-to-speech/text-to-speech.component.spec.ts +++ b/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(); }); diff --git a/src/app/components/text-to-speech/text-to-speech.module.ts b/src/app/components/text-to-speech/text-to-speech.module.ts index 6be02e59..9080790a 100644 --- a/src/app/components/text-to-speech/text-to-speech.module.ts +++ b/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], }) diff --git a/src/app/components/video/video-controls/video-controls.component.spec.ts b/src/app/components/video/video-controls/video-controls.component.spec.ts index b1fa123b..f9e8b795 100644 --- a/src/app/components/video/video-controls/video-controls.component.spec.ts +++ b/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(); diff --git a/src/app/components/video/video.component.spec.ts b/src/app/components/video/video.component.spec.ts index bcb37e87..3bab7ee7 100644 --- a/src/app/components/video/video.component.spec.ts +++ b/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(); diff --git a/src/app/components/video/video.module.ts b/src/app/components/video/video.module.ts index e5abd244..30db68dc 100644 --- a/src/app/components/video/video.module.ts +++ b/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], diff --git a/src/app/modules/settings/settings.module.ts b/src/app/modules/settings/settings.module.ts index b3859d85..56c54f91 100644 --- a/src/app/modules/settings/settings.module.ts +++ b/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 {} diff --git a/src/app/modules/settings/settings/settings.component.html b/src/app/modules/settings/settings/settings.component.html index 4eadac22..ad2c8531 100644 --- a/src/app/modules/settings/settings/settings.component.html +++ b/src/app/modules/settings/settings/settings.component.html @@ -1,4 +1,4 @@ - + @for (s of availableSettings; track s) { diff --git a/src/app/modules/settings/settings/settings.component.spec.ts b/src/app/modules/settings/settings/settings.component.spec.ts index 9361fafe..fec474c0 100644 --- a/src/app/modules/settings/settings/settings.component.spec.ts +++ b/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(); }); diff --git a/src/app/pages/main.component.spec.ts b/src/app/pages/main.component.spec.ts index a656f865..2789e8ea 100644 --- a/src/app/pages/main.component.spec.ts +++ b/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); diff --git a/src/app/pages/main.module.ts b/src/app/pages/main.module.ts index f103cd44..133a5423 100644 --- a/src/app/pages/main.module.ts +++ b/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 {} diff --git a/src/app/pages/translate/pose-viewers/human-pose-viewer/human-pose-viewer.component.html b/src/app/pages/translate/pose-viewers/human-pose-viewer/human-pose-viewer.component.html index 7694b3bd..427dcda1 100644 --- a/src/app/pages/translate/pose-viewers/human-pose-viewer/human-pose-viewer.component.html +++ b/src/app/pages/translate/pose-viewers/human-pose-viewer/human-pose-viewer.component.html @@ -14,7 +14,7 @@ height="256px"> @if (!modelReady) { - + } From 726cbf5f8906174bbc60f7821678967fcd9878f4 Mon Sep 17 00:00:00 2001 From: Amit Moryossef Date: Thu, 21 Nov 2024 02:11:43 +0100 Subject: [PATCH 02/30] feat(angular19): start upgrade to angular 19 --- angular.json | 83 +++---------------- functions/package.json | 6 +- package.json | 67 ++++++++------- server.ts | 73 ---------------- src/app/app-routing.module.ts | 33 -------- src/app/app.component.ts | 3 + src/app/app.config.server.ts | 9 ++ src/app/app.config.ts | 61 ++++++++++++++ src/app/app.module.ts | 41 --------- src/app/app.routes.ts | 21 +++++ src/app/app.server.module.ts | 15 ---- .../animation/animation.component.ts | 1 + .../flag-icon/flag-icon.component.ts | 1 + .../i18n-language-selector.component.ts | 1 + src/app/components/map/map.component.ts | 1 + .../speech-to-text.component.ts | 1 + src/app/components/stores/stores.component.ts | 1 + .../text-to-speech.component.ts | 1 + .../video-controls.component.ts | 1 + src/app/components/video/video.component.ts | 1 + src/app/core/modules/ngxs/ngxs.module.ts | 22 ----- .../transloco/transloco-testing.module.ts | 13 ++- .../modules/transloco/transloco.module.ts | 39 ++++----- .../transloco/transloco.server.loader.ts | 13 --- src/app/directives/dropzone.directive.ts | 1 + .../directives/keyboard-flying.directive.ts | 1 + .../settings/settings/settings.component.ts | 1 + .../benchmark-item.component.ts | 1 + .../pages/benchmark/benchmark.component.ts | 1 + .../about/about-api/about-api.component.ts | 1 + .../about-appearance.component.ts | 1 + .../about-benefits.component.ts | 1 + .../about-customers.component.ts | 1 + .../about-direction.component.ts | 1 + .../about/about-faq/about-faq.component.ts | 1 + .../about/about-hero/about-hero.component.ts | 1 + .../about-objectives.component.ts | 1 + .../about-pricing/about-pricing.component.ts | 1 + .../about/about-team/about-team.component.ts | 1 + .../pages/landing/about/about.component.ts | 1 + .../about/lazy-map/lazy-map.component.ts | 1 + .../contribute/contribute.component.ts | 1 + .../landing-footer.component.ts | 1 + src/app/pages/landing/landing.component.ts | 1 + .../landing/licenses/licenses.component.ts | 1 + .../mermaid-chart/mermaid-chart.component.ts | 1 - .../landing/privacy/privacy.component.ts | 1 + .../pages/landing/terms/terms.component.ts | 1 + src/app/pages/main.component.html | 28 +++---- src/app/pages/main.component.ts | 1 + .../not-found/not-found.component.spec.ts | 7 +- .../pages/not-found/not-found.component.ts | 5 ++ .../pages/playground/playground.component.ts | 1 + .../settings-about.component.ts | 1 + .../settings-appearance-images.component.ts | 1 + .../settings-appearance.component.ts | 1 + .../settings-feedback.component.ts | 1 + .../settings-menu/settings-menu.component.ts | 1 + .../settings-offline.component.ts | 1 + .../settings-voice-input.component.ts | 1 + .../settings-voice-output.component.ts | 1 + src/app/pages/settings/settings.component.ts | 1 + .../drop-pose-file.component.ts | 1 + .../input/button/button.component.ts | 1 + .../language-selector.component.ts | 1 + .../language-selectors.component.ts | 1 + .../avatar-pose-viewer.component.ts | 1 + .../human-pose-viewer.component.ts | 1 + .../pose-viewers/pose-viewer.component.ts | 1 + .../skeleton-pose-viewer.component.ts | 1 + .../viewer-selector.component.ts | 1 + .../send-feedback/send-feedback.component.ts | 1 + .../signed-language-input.component.ts | 1 + .../signed-to-spoken.component.ts | 1 + .../upload/upload.component.ts | 1 + .../signwriting/sign-writing.component.ts | 1 + .../signed-language-output.component.ts | 1 + .../desktop-textarea.component.ts | 1 + .../spoken-language-input.component.ts | 1 + .../spoken-to-signed.component.ts | 1 + .../translate-desktop.component.ts | 1 + .../translate-mobile.component.ts | 1 + .../pages/translate/translate.component.ts | 1 + src/environments/environment.prod.ts | 3 - src/environments/environment.ts | 3 - src/main.server.ts | 8 +- src/main.ts | 17 +--- src/server.ts | 65 +++++++++++++++ src/theme/styles.scss | 10 +-- tsconfig.app.json | 2 +- tsconfig.json | 3 +- tsconfig.server.json | 11 --- 92 files changed, 342 insertions(+), 384 deletions(-) delete mode 100644 server.ts delete mode 100644 src/app/app-routing.module.ts create mode 100644 src/app/app.config.server.ts create mode 100644 src/app/app.config.ts delete mode 100644 src/app/app.module.ts create mode 100644 src/app/app.routes.ts delete mode 100644 src/app/app.server.module.ts delete mode 100644 src/app/core/modules/ngxs/ngxs.module.ts delete mode 100644 src/app/core/modules/transloco/transloco.server.loader.ts create mode 100644 src/server.ts delete mode 100644 tsconfig.server.json diff --git a/angular.json b/angular.json index 36a179bb..f0a36514 100644 --- a/angular.json +++ b/angular.json @@ -15,11 +15,12 @@ "prefix": "app", "architect": { "build": { - "builder": "@angular-devkit/build-angular:browser", + "builder": "@angular-devkit/build-angular:application", "options": { - "outputPath": "dist/sign-translate/browser", + "outputPath": { + "base": "dist/sign-translate" + }, "index": "src/index.html", - "main": "src/main.ts", "polyfills": ["zone.js"], "tsConfig": "tsconfig.app.json", "assets": [ @@ -86,15 +87,18 @@ "includePaths": ["node_modules/"] }, "scripts": [], - "serviceWorker": true, - "ngswConfigPath": "ngsw-config.json", - "vendorChunk": true, + "serviceWorker": "ngsw-config.json", "extractLicenses": false, - "buildOptimizer": false, "sourceMap": true, "optimization": false, "namedChunks": true, - "webWorkerTsConfig": "tsconfig.worker.json" + "webWorkerTsConfig": "tsconfig.worker.json", + "browser": "src/main.ts", + "server": "src/main.server.ts", + "prerender": true, + "ssr": { + "entry": "src/server.ts" + } }, "configurations": { "production": { @@ -109,8 +113,6 @@ "sourceMap": true, "namedChunks": true, "extractLicenses": true, - "vendorChunk": false, - "buildOptimizer": true, "budgets": [ { "type": "initial", @@ -226,67 +228,6 @@ "options": { "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"] } - }, - "server": { - "builder": "@angular-devkit/build-angular:server", - "options": { - "outputPath": "dist/sign-translate/server", - "main": "server.ts", - "tsConfig": "tsconfig.server.json", - "optimization": false, - "sourceMap": true, - "stylePreprocessorOptions": { - "includePaths": ["node_modules/"] - }, - "extractLicenses": false - }, - "configurations": { - "production": { - "outputHashing": "media", - "fileReplacements": [ - { - "replace": "src/environments/environment.ts", - "with": "src/environments/environment.prod.ts" - } - ], - "optimization": true, - "sourceMap": false, - "extractLicenses": true - } - }, - "defaultConfiguration": "production" - }, - "serve-ssr": { - "builder": "@angular-devkit/build-angular:ssr-dev-server", - "configurations": { - "development": { - "browserTarget": "sign-translate:build", - "serverTarget": "sign-translate:server" - }, - "production": { - "browserTarget": "sign-translate:build:production", - "serverTarget": "sign-translate:server:production" - } - }, - "defaultConfiguration": "development" - }, - "prerender": { - "builder": "@angular-devkit/build-angular:prerender", - "options": { - "discoverRoutes": true, - "routes": ["/", "/about", "/about/contribute", "/legal/terms", "/legal/privacy", "/legal/licenses"] - }, - "configurations": { - "production": { - "browserTarget": "sign-translate:build:production", - "serverTarget": "sign-translate:server:production" - }, - "development": { - "browserTarget": "sign-translate:build", - "serverTarget": "sign-translate:server" - } - }, - "defaultConfiguration": "production" } } } diff --git a/functions/package.json b/functions/package.json index 217d60d5..0c068d73 100644 --- a/functions/package.json +++ b/functions/package.json @@ -28,12 +28,12 @@ "cors": "2.8.5", "express": "4.21.1", "express-async-errors": "3.1.1", - "firebase-admin": "13.0.0", + "firebase-admin": "13.0.1", "firebase-functions": "6.1.0", "http-errors": "2.0.0", "http-proxy-middleware": "^3.0.3", "node-fetch": "2.6.7", - "openai": "4.72.0", + "openai": "4.73.0", "request-ip": "3.3.0" }, "devDependencies": { @@ -47,7 +47,7 @@ "@typescript-eslint/parser": "8.15.0", "eslint": "8.57.0", "firebase-functions-test": "3.3.0", - "firebase-tools": "13.25.0", + "firebase-tools": "13.26.0", "jest": "29.7.0", "minimatch": "10.0.1", "mock-express-request": "0.2.2", diff --git a/package.json b/package.json index bbcced80..45e4f80b 100644 --- a/package.json +++ b/package.json @@ -19,15 +19,12 @@ "mobile:metadata": "tsx tools/mobile/metadata/metadata.ts", "prepare:husky": "node -e \"require('fs').cpSync('node_modules/@sign-mt/configuration/.husky/', '.husky/', {recursive: true})\"", "prepare": "husky install && npm run prepare:husky", - "dev:ssr": "ng run sign-translate:serve-ssr", - "serve:ssr": "node dist/sign-translate/server/main.js", - "build:ssr": "ng build && ng run sign-translate:server", - "prerender": "NODE_OPTIONS=--max_old_space_size=16384 ng run sign-translate:prerender:production", "test:workflow": "act --container-architecture linux/amd64 --artifact-server-path /tmp/artifacts -W .github/workflows/client.yml", "generate:terms": "marked -i LICENSE.md -o src/app/pages/landing/terms/terms.component.html", "generate:sitemap": "node tools/sitemap-generator.js", "generate:licenses": "npm-license-crawler --json dist/sign-translate/browser/licenses.json --onlyDirectDependencies --exclude ios --exclude android --exclude dist --exclude functions", - "build:full": "npm run generate:terms && npm run prerender && npm run generate:sitemap && npm run generate:licenses" + "build:full": "npm run generate:terms && npm run prerender && npm run generate:sitemap && npm run generate:licenses", + "serve:ssr:sign-translate": "node dist/sign-translate/server/server.mjs" }, "engines": { "node": ">=18", @@ -38,19 +35,19 @@ }, "private": true, "dependencies": { - "@angular/animations": "18.2.12", - "@angular/cdk": "18.2.13", - "@angular/common": "18.2.12", - "@angular/compiler": "18.2.12", - "@angular/core": "18.2.12", - "@angular/forms": "18.2.12", - "@angular/material": "18.2.13", - "@angular/platform-browser": "18.2.12", - "@angular/platform-browser-dynamic": "18.2.12", - "@angular/platform-server": "18.2.12", - "@angular/router": "18.2.12", - "@angular/service-worker": "18.2.12", - "@angular/ssr": "18.2.12", + "@angular/animations": "19.0.0", + "@angular/cdk": "19.0.0", + "@angular/common": "19.0.0", + "@angular/compiler": "19.0.0", + "@angular/core": "19.0.0", + "@angular/forms": "19.0.0", + "@angular/material": "19.0.0", + "@angular/platform-browser": "19.0.0", + "@angular/platform-browser-dynamic": "19.0.0", + "@angular/platform-server": "19.0.0", + "@angular/router": "19.0.0", + "@angular/service-worker": "19.0.0", + "@angular/ssr": "19.0.0", "@asymmetrik/ngx-leaflet": "18.0.1", "@capacitor-firebase/analytics": "6.2.0", "@capacitor-firebase/app": "6.2.0", @@ -58,14 +55,14 @@ "@capacitor-firebase/crashlytics": "6.2.0", "@capacitor-firebase/performance": "6.2.0", "@capacitor-firebase/storage": "6.2.0", - "@capacitor/android": "6.1.2", - "@capacitor/clipboard": "6.0.1", - "@capacitor/core": "6.1.2", - "@capacitor/filesystem": "6.0.1", - "@capacitor/ios": "6.1.2", - "@capacitor/keyboard": "6.0.2", - "@capacitor/share": "6.0.2", - "@capacitor/splash-screen": "6.0.2", + "@capacitor/android": "6.2.0", + "@capacitor/clipboard": "6.0.2", + "@capacitor/core": "6.2.0", + "@capacitor/filesystem": "6.0.2", + "@capacitor/ios": "6.2.0", + "@capacitor/keyboard": "6.0.3", + "@capacitor/share": "6.0.3", + "@capacitor/splash-screen": "6.0.3", "@ctrl/ngx-github-buttons": "9.0.0", "@google/model-viewer": "4.0.0", "@ionic/angular": "8.4.0", @@ -73,7 +70,7 @@ "@mediapipe/holistic": "0.5.1675471629", "@mediapipe/tasks-text": "0.10.18", "@ngneat/transloco": "6.0.4", - "@ngxs/store": "18.1.5", + "@ngxs/store": "18.1.6", "@sign-mt/browsermt": "0.2.3", "@sign-mt/i18n": "git://github.com/sign/i18n.git", "@sutton-signwriting/font-ttf": "1.5.2", @@ -89,6 +86,7 @@ "capacitor-blob-writer": "1.1.17", "cld3-asm": "4.0.0", "comlink": "4.4.2", + "express": "^4.21.1", "filesize": "9.0.11", "firebase": "11.0.2", "flag-icons": "7.2.3", @@ -108,17 +106,17 @@ "zone.js": "0.15.0" }, "devDependencies": { - "@angular-devkit/architect": "0.1802.12", - "@angular-devkit/build-angular": "18.2.12", + "@angular-devkit/architect": "0.1900.0", + "@angular-devkit/build-angular": "19.0.0", "@angular-eslint/builder": "18.4.1", "@angular-eslint/eslint-plugin": "18.4.1", "@angular-eslint/eslint-plugin-template": "18.4.1", "@angular-eslint/schematics": "18.4.1", "@angular-eslint/template-parser": "18.4.1", - "@angular/cli": "18.2.12", - "@angular/compiler-cli": "18.2.12", + "@angular/cli": "19.0.0", + "@angular/compiler-cli": "19.0.0", "@capacitor/assets": "3.0.5", - "@capacitor/cli": "6.1.2", + "@capacitor/cli": "6.2.0", "@ionic/angular-server": "8.4.0", "@playwright/test": "1.49.0", "@sign-mt/configuration": "git://github.com/sign/.github.git", @@ -126,6 +124,7 @@ "@types/dom-mediacapture-transform": "0.1.10", "@types/dom-speech-recognition": "0.0.4", "@types/dom-webcodecs": "0.1.13", + "@types/express": "^5.0.0", "@types/jasmine": "5.1.4", "@types/jasminewd2": "2.0.13", "@types/offscreencanvas": "2019.7.3", @@ -155,7 +154,7 @@ "karma-safari-launcher": "1.0.0", "karma-spec-reporter": "0.0.36", "lint-staged": "15.2.10", - "marked": "15.0.1", + "marked": "15.0.2", "npm-license-crawler": "0.2.1", "open": "10.1.0", "pwa-asset-generator": "6.4.0", @@ -163,7 +162,7 @@ "tiny-async-pool": "2.1.0", "ts-node": "10.9.2", "tsx": "4.19.2", - "typescript": "5.4.3", + "typescript": "5.6.3", "webpack-bundle-analyzer": "4.10.2", "zod": "3.23.8" } diff --git a/server.ts b/server.ts deleted file mode 100644 index bab9af8f..00000000 --- a/server.ts +++ /dev/null @@ -1,73 +0,0 @@ -import 'zone.js/node'; - -import {APP_BASE_HREF} from '@angular/common'; -import {Express} from 'express'; -import {existsSync} from 'node:fs'; -import {join} from 'node:path'; -import {CommonEngine} from '@angular/ssr'; -import {AppServerModule} from './src/main.server'; -const express = require('express'); - -// The Express app is exported so that it can be used by serverless Functions. -export function app(): Express { - const server = express(); - const distFolder = join(process.cwd(), 'dist/sign-translate/browser'); - const indexHtml = existsSync(join(distFolder, 'index.original.html')) - ? join(distFolder, 'index.original.html') - : join(distFolder, 'index.html'); - - const commonEngine = new CommonEngine(); - - server.set('view engine', 'html'); - server.set('views', distFolder); - - // Example Express Rest API endpoints - // server.get('/api/**', (req, res) => { }); - // Serve static files from /browser - server.get( - '*.*', - express.static(distFolder, { - maxAge: '1y', - }) - ); - - // All regular routes use the Angular engine - server.get('*', (req, res, next) => { - const {protocol, originalUrl, baseUrl, headers} = req; - - commonEngine - .render({ - bootstrap: AppServerModule, - documentFilePath: indexHtml, - url: `${protocol}://${headers.host}${originalUrl}`, - publicPath: distFolder, - providers: [{provide: APP_BASE_HREF, useValue: baseUrl}], - }) - .then(html => res.send(html)) - .catch(err => next(err)); - }); - - return server; -} - -function run(): void { - const port = process.env['PORT'] || 4000; - - // Start up the Node server - const server = app(); - server.listen(port, () => { - console.log(`Node Express server listening on http://localhost:${port}`); - }); -} - -// Webpack will replace 'require' with '__webpack_require__' -// '__non_webpack_require__' is a proxy to Node 'require' -// The below code is to ensure that the server is run only when not requiring the bundle. -declare const __non_webpack_require__: NodeRequire; -const mainModule = __non_webpack_require__.main; -const moduleFilename = (mainModule && mainModule.filename) || ''; -if (moduleFilename === __filename || moduleFilename.includes('iisnode')) { - run(); -} - -export default AppServerModule; diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts deleted file mode 100644 index 44518662..00000000 --- a/src/app/app-routing.module.ts +++ /dev/null @@ -1,33 +0,0 @@ -import {NgModule} from '@angular/core'; -import {NoPreloading, RouterModule, Routes} from '@angular/router'; -import {environment} from '../environments/environment'; - -const routes: Routes = [ - // {path: '', loadChildren: () => import('./pages/translate/translate.module').then(m => m.TranslatePageModule)}, - {path: '', loadChildren: () => import('./pages/main.module').then(m => m.MainPageModule)}, - { - path: 'playground', - loadChildren: () => import('./pages/playground/playground.module').then(m => m.PlaygroundPageModule), - }, - { - path: 'benchmark', - loadChildren: () => import('./pages/benchmark/benchmark.module').then(m => m.BenchmarkPageModule), - }, - {path: 'about', loadChildren: () => import('./pages/landing/landing.module').then(m => m.LandingModule)}, - {path: 'legal', loadChildren: () => import('./pages/landing/landing.module').then(m => m.LandingModule)}, - { - path: '**', - loadChildren: () => import('./pages/not-found/not-found.module').then(m => m.NotFoundPageModule), - }, -]; - -@NgModule({ - imports: [ - RouterModule.forRoot(routes, { - initialNavigation: environment.initialNavigation, - preloadingStrategy: NoPreloading, - }), - ], - exports: [RouterModule], -}) -export class AppRoutingModule {} diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 198b72af..21eda153 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -9,11 +9,14 @@ import {GoogleAnalyticsService} from './core/modules/google-analytics/google-ana import {Capacitor} from '@capacitor/core'; import {languageCodeNormalizer} from './core/modules/transloco/languages'; import {Meta} from '@angular/platform-browser'; +import {IonApp, IonRouterOutlet} from '@ionic/angular/standalone'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], + imports: [IonApp, IonRouterOutlet], + standalone: true, }) export class AppComponent implements AfterViewInit { urlParams = this.getUrlParams(); diff --git a/src/app/app.config.server.ts b/src/app/app.config.server.ts new file mode 100644 index 00000000..c217a736 --- /dev/null +++ b/src/app/app.config.server.ts @@ -0,0 +1,9 @@ +import {mergeApplicationConfig, ApplicationConfig} from '@angular/core'; +import {provideServerRendering} from '@angular/platform-server'; +import {appConfig} from './app.config'; + +const serverConfig: ApplicationConfig = { + providers: [provideServerRendering()], +}; + +export const config = mergeApplicationConfig(appConfig, serverConfig); diff --git a/src/app/app.config.ts b/src/app/app.config.ts new file mode 100644 index 00000000..ee405fcc --- /dev/null +++ b/src/app/app.config.ts @@ -0,0 +1,61 @@ +import {ApplicationConfig, provideZoneChangeDetection} from '@angular/core'; +import {provideRouter, RouteReuseStrategy} from '@angular/router'; + +import {routes} from './app.routes'; +import {provideClientHydration, withEventReplay} from '@angular/platform-browser'; +import {NavigatorService} from './core/services/navigator/navigator.service'; +import {IonicRouteStrategy} from '@ionic/angular'; +import {HTTP_INTERCEPTORS, provideHttpClient, withFetch} from '@angular/common/http'; +import {TokenInterceptor} from './core/services/http/token-interceptor.service'; +import {AppTranslocoProviders} from './core/modules/transloco/transloco.module'; +import {NgxsModuleOptions, provideStore} from '@ngxs/store'; +import {SettingsState} from './modules/settings/settings.state'; +import {environment} from '../environments/environment'; +import {provideServiceWorker} from '@angular/service-worker'; +import {provideIonicAngular} from '@ionic/angular/standalone'; +import {isSafari} from './core/constants'; + +export const ngxsConfig: NgxsModuleOptions = { + developmentMode: !environment.production, + selectorOptions: { + // These Selector Settings are recommended in preparation for NGXS v4 + // (See above for their effects) + suppressErrors: false, + injectContainerState: false, + }, + compatibility: { + strictContentSecurityPolicy: true, + }, +}; + +export const appConfig: ApplicationConfig = { + providers: [ + provideZoneChangeDetection({eventCoalescing: true}), + provideClientHydration(withEventReplay()), + + // Router + provideRouter(routes), + {provide: RouteReuseStrategy, useClass: IonicRouteStrategy}, + + // Ionic theme + provideIonicAngular({mode: isSafari ? 'ios' : 'md'}), + + // Service Worker + provideServiceWorker('ngsw-worker.js', { + enabled: environment.production, + // Register the ServiceWorker as soon as the app is stable + // or after 30 seconds (whichever comes first). + registrationStrategy: 'registerWhenStable:30000', + }), + + NavigatorService, + + // HTTP Requests + provideHttpClient(withFetch()), + {provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true}, + + ...AppTranslocoProviders, + + provideStore([SettingsState], ngxsConfig), + ], +}; diff --git a/src/app/app.module.ts b/src/app/app.module.ts deleted file mode 100644 index e6102efc..00000000 --- a/src/app/app.module.ts +++ /dev/null @@ -1,41 +0,0 @@ -import {BrowserModule} from '@angular/platform-browser'; -import {NgModule} from '@angular/core'; -import {AppComponent} from './app.component'; -import {NavigatorService} from './core/services/navigator/navigator.service'; -import {AppRoutingModule} from './app-routing.module'; -import {ServiceWorkerModule} from '@angular/service-worker'; -import {environment} from '../environments/environment'; -import {RouteReuseStrategy} from '@angular/router'; -import {IonicModule, IonicRouteStrategy} from '@ionic/angular'; -import {AppTranslocoModule} from './core/modules/transloco/transloco.module'; -import {AppNgxsModule} from './core/modules/ngxs/ngxs.module'; -import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; -import {isSafari} from './core/constants'; -import {HTTP_INTERCEPTORS} from '@angular/common/http'; -import {TokenInterceptor} from './core/services/http/token-interceptor.service'; - -@NgModule({ - declarations: [AppComponent], - imports: [ - BrowserModule, - BrowserAnimationsModule, - AppNgxsModule, - IonicModule.forRoot({mode: isSafari ? 'ios' : 'md'}), - AppRoutingModule, - AppTranslocoModule, - - ServiceWorkerModule.register('ngsw-worker.js', { - enabled: environment.production, - // Register the ServiceWorker as soon as the app is stable - // or after 30 seconds (whichever comes first). - registrationStrategy: 'registerWhenStable:30000', - }), - ], - providers: [ - NavigatorService, - {provide: RouteReuseStrategy, useClass: IonicRouteStrategy}, - {provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true}, - ], - bootstrap: [AppComponent], -}) -export class AppModule {} diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts new file mode 100644 index 00000000..e4c2a935 --- /dev/null +++ b/src/app/app.routes.ts @@ -0,0 +1,21 @@ +import {Routes} from '@angular/router'; +import {NotFoundComponent} from './pages/not-found/not-found.component'; + +export const routes: Routes = [ + // {path: '', loadChildren: () => import('./pages/translate/translate.module').then(m => m.TranslatePageModule)}, + // {path: '', loadChildren: () => import('./pages/main.module').then(m => m.MainPageModule)}, + // { + // path: 'playground', + // loadChildren: () => import('./pages/playground/playground.module').then(m => m.PlaygroundPageModule), + // }, + // { + // path: 'benchmark', + // loadChildren: () => import('./pages/benchmark/benchmark.module').then(m => m.BenchmarkPageModule), + // }, + // {path: 'about', loadChildren: () => import('./pages/landing/landing.module').then(m => m.LandingModule)}, + // {path: 'legal', loadChildren: () => import('./pages/landing/landing.module').then(m => m.LandingModule)}, + { + path: '**', + component: NotFoundComponent, + }, +]; diff --git a/src/app/app.server.module.ts b/src/app/app.server.module.ts deleted file mode 100644 index 2ce9697c..00000000 --- a/src/app/app.server.module.ts +++ /dev/null @@ -1,15 +0,0 @@ -import {NgModule} from '@angular/core'; -import {ServerModule} from '@angular/platform-server'; -import {IonicServerModule} from '@ionic/angular-server'; - -import {AppModule} from './app.module'; -import {AppComponent} from './app.component'; -import {TRANSLOCO_LOADER} from '@ngneat/transloco'; -import {TranslocoFileSystemLoader} from './core/modules/transloco/transloco.server.loader'; - -@NgModule({ - imports: [AppModule, ServerModule, IonicServerModule], - bootstrap: [AppComponent], - providers: [{provide: TRANSLOCO_LOADER, useClass: TranslocoFileSystemLoader}], -}) -export class AppServerModule {} diff --git a/src/app/components/animation/animation.component.ts b/src/app/components/animation/animation.component.ts index 17fa6b44..8dd34d0d 100644 --- a/src/app/components/animation/animation.component.ts +++ b/src/app/components/animation/animation.component.ts @@ -12,6 +12,7 @@ import {Observable} from 'rxjs'; selector: 'app-animation', templateUrl: './animation.component.html', styleUrls: ['./animation.component.scss'], + standalone: false, }) export class AnimationComponent extends BaseComponent implements AfterViewInit { animationState$: Observable; diff --git a/src/app/components/flag-icon/flag-icon.component.ts b/src/app/components/flag-icon/flag-icon.component.ts index 92a1773e..82f1243d 100644 --- a/src/app/components/flag-icon/flag-icon.component.ts +++ b/src/app/components/flag-icon/flag-icon.component.ts @@ -4,6 +4,7 @@ import {Component, Input} from '@angular/core'; selector: 'app-flag-icon', templateUrl: './flag-icon.component.html', styleUrls: ['./flag-icon.component.scss'], + standalone: false, }) export class FlagIconComponent { @Input() country: string; diff --git a/src/app/components/i18n-language-selector/i18n-language-selector.component.ts b/src/app/components/i18n-language-selector/i18n-language-selector.component.ts index aa4a7d59..d48468a7 100644 --- a/src/app/components/i18n-language-selector/i18n-language-selector.component.ts +++ b/src/app/components/i18n-language-selector/i18n-language-selector.component.ts @@ -7,6 +7,7 @@ import {SITE_LANGUAGES} from '../../core/modules/transloco/languages'; selector: 'app-i18n-language-selector', templateUrl: './i18n-language-selector.component.html', styleUrls: ['./i18n-language-selector.component.scss'], + standalone: false, }) export class I18NLanguageSelectorComponent { current: string; diff --git a/src/app/components/map/map.component.ts b/src/app/components/map/map.component.ts index 2e105326..2316ad7f 100644 --- a/src/app/components/map/map.component.ts +++ b/src/app/components/map/map.component.ts @@ -13,6 +13,7 @@ function logMax(arr: number[]) { selector: 'app-map', templateUrl: './map.component.html', styleUrls: ['./map.component.scss'], + standalone: false, }) export class MapComponent extends BaseComponent implements OnInit { static mapGeoJson = null; diff --git a/src/app/components/speech-to-text/speech-to-text.component.ts b/src/app/components/speech-to-text/speech-to-text.component.ts index d5c440ba..c42365ec 100644 --- a/src/app/components/speech-to-text/speech-to-text.component.ts +++ b/src/app/components/speech-to-text/speech-to-text.component.ts @@ -7,6 +7,7 @@ import {TooltipPosition} from '@angular/material/tooltip'; selector: 'app-speech-to-text', templateUrl: './speech-to-text.component.html', styleUrls: ['./speech-to-text.component.css'], + standalone: false, }) export class SpeechToTextComponent extends BaseComponent implements OnInit, OnChanges { @Input() lang = 'en'; diff --git a/src/app/components/stores/stores.component.ts b/src/app/components/stores/stores.component.ts index efac4847..076f1fe3 100644 --- a/src/app/components/stores/stores.component.ts +++ b/src/app/components/stores/stores.component.ts @@ -4,5 +4,6 @@ import {Component} from '@angular/core'; selector: 'app-stores', templateUrl: './stores.component.html', styleUrls: ['./stores.component.scss'], + standalone: false, }) export class StoresComponent {} diff --git a/src/app/components/text-to-speech/text-to-speech.component.ts b/src/app/components/text-to-speech/text-to-speech.component.ts index c002ffee..8638b0b0 100644 --- a/src/app/components/text-to-speech/text-to-speech.component.ts +++ b/src/app/components/text-to-speech/text-to-speech.component.ts @@ -4,6 +4,7 @@ import {Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges} from '@an selector: 'app-text-to-speech', templateUrl: './text-to-speech.component.html', styleUrls: ['./text-to-speech.component.scss'], + standalone: false, }) export class TextToSpeechComponent implements OnInit, OnDestroy, OnChanges { @Input() lang = 'en'; diff --git a/src/app/components/video/video-controls/video-controls.component.ts b/src/app/components/video/video-controls/video-controls.component.ts index a5c02ab7..e3ccb88a 100644 --- a/src/app/components/video/video-controls/video-controls.component.ts +++ b/src/app/components/video/video-controls/video-controls.component.ts @@ -6,6 +6,7 @@ import {BaseSettingsComponent} from '../../../modules/settings/settings.componen selector: 'app-video-controls', templateUrl: './video-controls.component.html', styleUrls: ['./video-controls.component.scss'], + standalone: false, }) export class VideoControlsComponent extends BaseSettingsComponent { constructor(store: Store) { diff --git a/src/app/components/video/video.component.ts b/src/app/components/video/video.component.ts index 86196ae4..ebbd9569 100644 --- a/src/app/components/video/video.component.ts +++ b/src/app/components/video/video.component.ts @@ -17,6 +17,7 @@ import {SignWritingService} from '../../modules/sign-writing/sign-writing.servic selector: 'app-video', templateUrl: './video.component.html', styleUrls: ['./video.component.scss'], + standalone: false, }) export class VideoComponent extends BaseComponent implements AfterViewInit { settingsState$!: Observable; diff --git a/src/app/core/modules/ngxs/ngxs.module.ts b/src/app/core/modules/ngxs/ngxs.module.ts deleted file mode 100644 index 67d231a6..00000000 --- a/src/app/core/modules/ngxs/ngxs.module.ts +++ /dev/null @@ -1,22 +0,0 @@ -import {NgModule} from '@angular/core'; -import {environment} from '../../../../environments/environment'; -import {NgxsModule, NgxsModuleOptions} from '@ngxs/store'; -import {SettingsState} from '../../../modules/settings/settings.state'; - -export const ngxsConfig: NgxsModuleOptions = { - developmentMode: !environment.production, - selectorOptions: { - // These Selector Settings are recommended in preparation for NGXS v4 - // (See above for their effects) - suppressErrors: false, - injectContainerState: false, - }, - compatibility: { - strictContentSecurityPolicy: true, - }, -}; - -@NgModule({ - imports: [NgxsModule.forRoot([SettingsState], ngxsConfig)], -}) -export class AppNgxsModule {} diff --git a/src/app/core/modules/transloco/transloco-testing.module.ts b/src/app/core/modules/transloco/transloco-testing.module.ts index c6148eac..33611651 100644 --- a/src/app/core/modules/transloco/transloco-testing.module.ts +++ b/src/app/core/modules/transloco/transloco-testing.module.ts @@ -1,4 +1,4 @@ -import {TranslocoTestingModule} from '@ngneat/transloco'; +import {provideTransloco, TranslocoTestingModule} from '@ngneat/transloco'; import {SITE_LANGUAGES} from './languages'; const availableLangs = SITE_LANGUAGES.map(l => l.key.toLocaleLowerCase()); @@ -6,12 +6,17 @@ const availableLangs = SITE_LANGUAGES.map(l => l.key.toLocaleLowerCase()); const langs = {}; availableLangs.forEach(lang => (langs[lang] = require(`../../../../assets/i18n/${lang}.json`))); -export const AppTranslocoTestingModule = TranslocoTestingModule.forRoot({ - langs, +const translocoTestingConfig = { translocoConfig: { availableLangs, defaultLang: 'en', reRenderOnLangChange: true, }, preloadLangs: true, -}); +}; + +export const AppTranslocoTestingModule = TranslocoTestingModule.forRoot({...translocoTestingConfig, langs}); + +export function provideTranslocoTesting() { + return provideTransloco(translocoTestingConfig); // TODO add transloco loader +} diff --git a/src/app/core/modules/transloco/transloco.module.ts b/src/app/core/modules/transloco/transloco.module.ts index 4c7a9485..ca5e578e 100644 --- a/src/app/core/modules/transloco/transloco.module.ts +++ b/src/app/core/modules/transloco/transloco.module.ts @@ -1,28 +1,29 @@ import {isDevMode, NgModule} from '@angular/core'; import {provideTransloco, TranslocoModule} from '@ngneat/transloco'; import {HttpLoader, translocoScopes} from './transloco.loader'; -import {provideHttpClient} from '@angular/common/http'; +import {provideHttpClient, withFetch} from '@angular/common/http'; import {SITE_LANGUAGES} from './languages'; +export const AppTranslocoProviders = [ + provideTransloco({ + config: { + availableLangs: SITE_LANGUAGES.map(l => l.key), + defaultLang: 'en', + fallbackLang: 'en', + reRenderOnLangChange: true, + prodMode: !isDevMode(), + missingHandler: { + // It will use the first language set in the `fallbackLang` property + useFallbackTranslation: true, + }, + }, + loader: HttpLoader, + }), + translocoScopes, +]; + @NgModule({ exports: [TranslocoModule], - providers: [ - provideTransloco({ - config: { - availableLangs: SITE_LANGUAGES.map(l => l.key), - defaultLang: 'en', - fallbackLang: 'en', - reRenderOnLangChange: true, - prodMode: !isDevMode(), - missingHandler: { - // It will use the first language set in the `fallbackLang` property - useFallbackTranslation: true, - }, - }, - loader: HttpLoader, - }), - translocoScopes, - provideHttpClient(), - ], + providers: AppTranslocoProviders, }) export class AppTranslocoModule {} diff --git a/src/app/core/modules/transloco/transloco.server.loader.ts b/src/app/core/modules/transloco/transloco.server.loader.ts deleted file mode 100644 index a43caf56..00000000 --- a/src/app/core/modules/transloco/transloco.server.loader.ts +++ /dev/null @@ -1,13 +0,0 @@ -import {Translation, TranslocoLoader} from '@ngneat/transloco'; -import {Injectable} from '@angular/core'; -import {Observable, of} from 'rxjs'; -import * as fs from 'fs'; - -@Injectable({providedIn: 'root'}) -export class TranslocoFileSystemLoader implements TranslocoLoader { - getTranslation(langPath: string): Observable { - const fName = langPath.toLowerCase(); - const content = String(fs.readFileSync(`${__dirname}/../browser/assets/i18n/${fName}.json`)); - return of(JSON.parse(content)); - } -} diff --git a/src/app/directives/dropzone.directive.ts b/src/app/directives/dropzone.directive.ts index 1c54ce08..06a47a3c 100644 --- a/src/app/directives/dropzone.directive.ts +++ b/src/app/directives/dropzone.directive.ts @@ -2,6 +2,7 @@ import {Directive, EventEmitter, HostListener, Output} from '@angular/core'; @Directive({ selector: '[appDropzone]', + standalone: false, }) export class DropzoneDirective { @Output() dropped = new EventEmitter(); diff --git a/src/app/directives/keyboard-flying.directive.ts b/src/app/directives/keyboard-flying.directive.ts index aeb1a52e..94688724 100644 --- a/src/app/directives/keyboard-flying.directive.ts +++ b/src/app/directives/keyboard-flying.directive.ts @@ -6,6 +6,7 @@ import {Animation, AnimationController} from '@ionic/angular'; @Directive({ selector: '[appKeyboardFlying]', + standalone: false, }) export class KeyboardFlyingDirective implements OnInit, OnDestroy { // This class intends to fix the input shows only after the keyboard is shown fully diff --git a/src/app/modules/settings/settings/settings.component.ts b/src/app/modules/settings/settings/settings.component.ts index ed44bc85..31265998 100644 --- a/src/app/modules/settings/settings/settings.component.ts +++ b/src/app/modules/settings/settings/settings.component.ts @@ -8,6 +8,7 @@ import {SettingsStateModel} from '../settings.state'; selector: 'app-settings', templateUrl: './settings.component.html', styleUrls: ['./settings.component.css'], + standalone: false, }) export class SettingsComponent extends BaseSettingsComponent implements OnInit { availableSettings: Array = [ diff --git a/src/app/pages/benchmark/benchmark-item/benchmark-item.component.ts b/src/app/pages/benchmark/benchmark-item/benchmark-item.component.ts index 3f0bb00e..e92821d8 100644 --- a/src/app/pages/benchmark/benchmark-item/benchmark-item.component.ts +++ b/src/app/pages/benchmark/benchmark-item/benchmark-item.component.ts @@ -4,6 +4,7 @@ import {Component, Input} from '@angular/core'; selector: 'app-benchmark-item', templateUrl: './benchmark-item.component.html', styleUrls: ['./benchmark-item.component.scss'], + standalone: false, }) export class BenchmarkItemComponent { @Input() title: string; diff --git a/src/app/pages/benchmark/benchmark.component.ts b/src/app/pages/benchmark/benchmark.component.ts index 1f0ef0fb..431365cd 100644 --- a/src/app/pages/benchmark/benchmark.component.ts +++ b/src/app/pages/benchmark/benchmark.component.ts @@ -9,6 +9,7 @@ import {LanguageDetectionService} from '../../modules/translate/language-detecti selector: 'app-benchmark', templateUrl: './benchmark.component.html', styleUrls: ['./benchmark.component.scss'], + standalone: false, }) export class BenchmarkComponent { benchmarks = { diff --git a/src/app/pages/landing/about/about-api/about-api.component.ts b/src/app/pages/landing/about/about-api/about-api.component.ts index 98705da9..d70d4a2c 100644 --- a/src/app/pages/landing/about/about-api/about-api.component.ts +++ b/src/app/pages/landing/about/about-api/about-api.component.ts @@ -6,6 +6,7 @@ import {Observable} from 'rxjs'; selector: 'app-about-api', templateUrl: './about-api.component.html', styleUrls: ['./about-api.component.scss'], + standalone: false, }) export class AboutApiComponent { appearance$: Observable; diff --git a/src/app/pages/landing/about/about-appearance/about-appearance.component.ts b/src/app/pages/landing/about/about-appearance/about-appearance.component.ts index 911d2599..a511a94d 100644 --- a/src/app/pages/landing/about/about-appearance/about-appearance.component.ts +++ b/src/app/pages/landing/about/about-appearance/about-appearance.component.ts @@ -4,5 +4,6 @@ import {Component} from '@angular/core'; selector: 'app-about-appearance', templateUrl: './about-appearance.component.html', styleUrls: ['./about-appearance.component.scss'], + standalone: false, }) export class AboutAppearanceComponent {} diff --git a/src/app/pages/landing/about/about-benefits/about-benefits.component.ts b/src/app/pages/landing/about/about-benefits/about-benefits.component.ts index 06333fa8..aeb993c2 100644 --- a/src/app/pages/landing/about/about-benefits/about-benefits.component.ts +++ b/src/app/pages/landing/about/about-benefits/about-benefits.component.ts @@ -9,6 +9,7 @@ import {BaseComponent} from '../../../../components/base/base.component'; selector: 'app-about-benefits', templateUrl: './about-benefits.component.html', styleUrls: ['./about-benefits.component.scss'], + standalone: false, }) export class AboutBenefitsComponent extends BaseComponent implements AfterViewInit, OnInit { @ViewChild('swiper', {static: false}) swiper: ElementRef<{swiper: Swiper}>; diff --git a/src/app/pages/landing/about/about-customers/about-customers.component.ts b/src/app/pages/landing/about/about-customers/about-customers.component.ts index e96ac096..d1cc97d4 100644 --- a/src/app/pages/landing/about/about-customers/about-customers.component.ts +++ b/src/app/pages/landing/about/about-customers/about-customers.component.ts @@ -4,6 +4,7 @@ import {Component} from '@angular/core'; selector: 'app-about-customers', templateUrl: './about-customers.component.html', styleUrls: ['./about-customers.component.scss'], + standalone: false, }) export class AboutCustomersComponent { activeCustomer = 0; diff --git a/src/app/pages/landing/about/about-direction/about-direction.component.ts b/src/app/pages/landing/about/about-direction/about-direction.component.ts index 6afbb996..c82712fe 100644 --- a/src/app/pages/landing/about/about-direction/about-direction.component.ts +++ b/src/app/pages/landing/about/about-direction/about-direction.component.ts @@ -8,6 +8,7 @@ import {DomSanitizer, SafeUrl} from '@angular/platform-browser'; selector: 'app-about-direction', templateUrl: './about-direction.component.html', styleUrls: ['./about-direction.component.scss'], + standalone: false, }) export class AboutDirectionComponent extends BaseComponent implements OnInit { iOSScreenshot: SafeUrl; diff --git a/src/app/pages/landing/about/about-faq/about-faq.component.ts b/src/app/pages/landing/about/about-faq/about-faq.component.ts index b751c6d9..9cd3b9e0 100644 --- a/src/app/pages/landing/about/about-faq/about-faq.component.ts +++ b/src/app/pages/landing/about/about-faq/about-faq.component.ts @@ -4,6 +4,7 @@ import {Component} from '@angular/core'; selector: 'app-about-faq', templateUrl: './about-faq.component.html', styleUrls: ['./about-faq.component.scss'], + standalone: false, }) export class AboutFaqComponent { questions = [ diff --git a/src/app/pages/landing/about/about-hero/about-hero.component.ts b/src/app/pages/landing/about/about-hero/about-hero.component.ts index 3b7c7d6a..c91d8ae3 100644 --- a/src/app/pages/landing/about/about-hero/about-hero.component.ts +++ b/src/app/pages/landing/about/about-hero/about-hero.component.ts @@ -4,5 +4,6 @@ import {Component} from '@angular/core'; selector: 'app-about-hero', templateUrl: './about-hero.component.html', styleUrls: ['./about-hero.component.scss'], + standalone: false, }) export class AboutHeroComponent {} diff --git a/src/app/pages/landing/about/about-objectives/about-objectives.component.ts b/src/app/pages/landing/about/about-objectives/about-objectives.component.ts index 0fdf3d70..421a7013 100644 --- a/src/app/pages/landing/about/about-objectives/about-objectives.component.ts +++ b/src/app/pages/landing/about/about-objectives/about-objectives.component.ts @@ -4,5 +4,6 @@ import {Component} from '@angular/core'; selector: 'app-about-objectives', templateUrl: './about-objectives.component.html', styleUrls: ['./about-objectives.component.scss'], + standalone: false, }) export class AboutObjectivesComponent {} diff --git a/src/app/pages/landing/about/about-pricing/about-pricing.component.ts b/src/app/pages/landing/about/about-pricing/about-pricing.component.ts index 53d08294..f8f585e1 100644 --- a/src/app/pages/landing/about/about-pricing/about-pricing.component.ts +++ b/src/app/pages/landing/about/about-pricing/about-pricing.component.ts @@ -7,6 +7,7 @@ import {takeUntilDestroyed} from '@angular/core/rxjs-interop'; selector: 'app-about-pricing', templateUrl: './about-pricing.component.html', styleUrls: ['./about-pricing.component.scss'], + standalone: false, }) export class AboutPricingComponent { form = new FormGroup({ diff --git a/src/app/pages/landing/about/about-team/about-team.component.ts b/src/app/pages/landing/about/about-team/about-team.component.ts index bbd2784f..6b168206 100644 --- a/src/app/pages/landing/about/about-team/about-team.component.ts +++ b/src/app/pages/landing/about/about-team/about-team.component.ts @@ -4,6 +4,7 @@ import {Component} from '@angular/core'; selector: 'app-about-team', templateUrl: './about-team.component.html', styleUrls: ['./about-team.component.scss'], + standalone: false, }) export class AboutTeamComponent { teamMembers = [ diff --git a/src/app/pages/landing/about/about.component.ts b/src/app/pages/landing/about/about.component.ts index 6bd51021..305f9069 100644 --- a/src/app/pages/landing/about/about.component.ts +++ b/src/app/pages/landing/about/about.component.ts @@ -4,5 +4,6 @@ import {Component} from '@angular/core'; selector: 'app-about', templateUrl: './about.component.html', styleUrls: ['./about.component.scss'], + standalone: false, }) export class AboutComponent {} diff --git a/src/app/pages/landing/about/lazy-map/lazy-map.component.ts b/src/app/pages/landing/about/lazy-map/lazy-map.component.ts index ca4ece8c..a0509b2d 100644 --- a/src/app/pages/landing/about/lazy-map/lazy-map.component.ts +++ b/src/app/pages/landing/about/lazy-map/lazy-map.component.ts @@ -5,6 +5,7 @@ import {ComponentType} from '@angular/cdk/overlay'; selector: 'app-lazy-map', templateUrl: './lazy-map.component.html', styleUrls: ['./lazy-map.component.scss'], + standalone: false, }) export class LazyMapComponent implements AfterViewInit { @ViewChild('mapHost', {read: ViewContainerRef}) mapHost: ViewContainerRef; diff --git a/src/app/pages/landing/contribute/contribute.component.ts b/src/app/pages/landing/contribute/contribute.component.ts index 5771dfb7..a4954caf 100644 --- a/src/app/pages/landing/contribute/contribute.component.ts +++ b/src/app/pages/landing/contribute/contribute.component.ts @@ -4,6 +4,7 @@ import {Component} from '@angular/core'; selector: 'app-contribute', templateUrl: './contribute.component.html', styleUrls: ['./contribute.component.scss'], + standalone: false, }) export class ContributeComponent { cards = [ diff --git a/src/app/pages/landing/landing-footer/landing-footer.component.ts b/src/app/pages/landing/landing-footer/landing-footer.component.ts index 2f412e49..1bbfbcb9 100644 --- a/src/app/pages/landing/landing-footer/landing-footer.component.ts +++ b/src/app/pages/landing/landing-footer/landing-footer.component.ts @@ -4,6 +4,7 @@ import {Component} from '@angular/core'; selector: 'app-landing-footer', templateUrl: './landing-footer.component.html', styleUrl: './landing-footer.component.scss', + standalone: false, }) export class LandingFooterComponent { legalPages: string[] = ['terms', 'privacy', 'licenses']; diff --git a/src/app/pages/landing/landing.component.ts b/src/app/pages/landing/landing.component.ts index f1d8d137..87c3e8ce 100644 --- a/src/app/pages/landing/landing.component.ts +++ b/src/app/pages/landing/landing.component.ts @@ -5,6 +5,7 @@ import {MediaMatcher} from '@angular/cdk/layout'; selector: 'app-landing', templateUrl: './landing.component.html', styleUrls: ['./landing.component.scss'], + standalone: false, }) export class LandingComponent { pages: string[] = ['about', 'contribute']; diff --git a/src/app/pages/landing/licenses/licenses.component.ts b/src/app/pages/landing/licenses/licenses.component.ts index e6dbabce..3cf14f6e 100644 --- a/src/app/pages/landing/licenses/licenses.component.ts +++ b/src/app/pages/landing/licenses/licenses.component.ts @@ -22,6 +22,7 @@ type Node = PackagesParent | PackageLicense; selector: 'app-licenses', templateUrl: './licenses.component.html', styleUrls: ['./licenses.component.scss'], + standalone: false, }) export class LicensesComponent implements OnInit { treeControl = new NestedTreeControl((node: any) => node.children); diff --git a/src/app/pages/landing/mermaid-chart/mermaid-chart.component.ts b/src/app/pages/landing/mermaid-chart/mermaid-chart.component.ts index fd44ff2b..9495fb2f 100644 --- a/src/app/pages/landing/mermaid-chart/mermaid-chart.component.ts +++ b/src/app/pages/landing/mermaid-chart/mermaid-chart.component.ts @@ -14,7 +14,6 @@ mermaid.initialize(config); @Component({ selector: 'app-mermaid-chart', - standalone: true, imports: [], templateUrl: './mermaid-chart.component.html', styleUrl: './mermaid-chart.component.scss', diff --git a/src/app/pages/landing/privacy/privacy.component.ts b/src/app/pages/landing/privacy/privacy.component.ts index 040c6881..530e520d 100644 --- a/src/app/pages/landing/privacy/privacy.component.ts +++ b/src/app/pages/landing/privacy/privacy.component.ts @@ -4,5 +4,6 @@ import {Component} from '@angular/core'; selector: 'app-privacy', templateUrl: './privacy.component.html', styleUrls: ['./privacy.component.scss'], + standalone: false, }) export class PrivacyComponent {} diff --git a/src/app/pages/landing/terms/terms.component.ts b/src/app/pages/landing/terms/terms.component.ts index fb90a8af..e2512a58 100644 --- a/src/app/pages/landing/terms/terms.component.ts +++ b/src/app/pages/landing/terms/terms.component.ts @@ -4,5 +4,6 @@ import {Component} from '@angular/core'; selector: 'app-terms', templateUrl: './terms.component.html', styleUrls: ['./terms.component.scss'], + standalone: false, }) export class TermsComponent {} diff --git a/src/app/pages/main.component.html b/src/app/pages/main.component.html index 4746e64b..1c7898fe 100644 --- a/src/app/pages/main.component.html +++ b/src/app/pages/main.component.html @@ -5,21 +5,21 @@ Home - + + + + - - - Avatar - - --> + + + + + - - - Settings - + + + + diff --git a/src/app/pages/main.component.ts b/src/app/pages/main.component.ts index 7aa3b8e7..e1967e8a 100644 --- a/src/app/pages/main.component.ts +++ b/src/app/pages/main.component.ts @@ -7,6 +7,7 @@ import {filter, map} from 'rxjs/operators'; selector: 'app-main', templateUrl: './main.component.html', styleUrls: ['./main.component.scss'], + standalone: false, }) export class MainComponent { isMainPage$: Observable; diff --git a/src/app/pages/not-found/not-found.component.spec.ts b/src/app/pages/not-found/not-found.component.spec.ts index 738e405d..1653b46b 100644 --- a/src/app/pages/not-found/not-found.component.spec.ts +++ b/src/app/pages/not-found/not-found.component.spec.ts @@ -1,7 +1,10 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {NotFoundComponent} from './not-found.component'; -import {AppTranslocoTestingModule} from '../../core/modules/transloco/transloco-testing.module'; +import { + AppTranslocoTestingModule, + provideTranslocoTesting, +} from '../../core/modules/transloco/transloco-testing.module'; import {IonicModule} from '@ionic/angular'; describe('NotFoundComponent', () => { @@ -10,8 +13,8 @@ describe('NotFoundComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [AppTranslocoTestingModule, IonicModule.forRoot()], declarations: [NotFoundComponent], + providers: [provideTranslocoTesting()], }).compileComponents(); fixture = TestBed.createComponent(NotFoundComponent); diff --git a/src/app/pages/not-found/not-found.component.ts b/src/app/pages/not-found/not-found.component.ts index d05f5b86..c508a5a8 100644 --- a/src/app/pages/not-found/not-found.component.ts +++ b/src/app/pages/not-found/not-found.component.ts @@ -1,8 +1,13 @@ import {Component} from '@angular/core'; +import {IonButton, IonContent} from '@ionic/angular/standalone'; +import {TranslocoPipe} from '@ngneat/transloco'; +import {RouterLink} from '@angular/router'; @Component({ selector: 'app-not-found', templateUrl: './not-found.component.html', styleUrls: ['./not-found.component.scss'], + standalone: true, + imports: [IonContent, IonButton, TranslocoPipe, RouterLink], }) export class NotFoundComponent {} diff --git a/src/app/pages/playground/playground.component.ts b/src/app/pages/playground/playground.component.ts index 67b3b890..dbac2c24 100644 --- a/src/app/pages/playground/playground.component.ts +++ b/src/app/pages/playground/playground.component.ts @@ -10,6 +10,7 @@ import {Observable} from 'rxjs'; selector: 'app-playground', templateUrl: './playground.component.html', styleUrls: ['./playground.component.scss'], + standalone: false, }) export class PlaygroundComponent extends BaseComponent implements OnInit { receiveVideo$: Observable; diff --git a/src/app/pages/settings/settings-about/settings-about.component.ts b/src/app/pages/settings/settings-about/settings-about.component.ts index d19e2a69..6fd4d87d 100644 --- a/src/app/pages/settings/settings-about/settings-about.component.ts +++ b/src/app/pages/settings/settings-about/settings-about.component.ts @@ -4,6 +4,7 @@ import {Component} from '@angular/core'; selector: 'app-settings-about', templateUrl: './settings-about.component.html', styleUrls: ['./settings-about.component.scss'], + standalone: false, }) export class SettingsAboutComponent { legalPages: string[] = ['terms', 'privacy', 'licenses']; diff --git a/src/app/pages/settings/settings-appearance/settings-appearance-images/settings-appearance-images.component.ts b/src/app/pages/settings/settings-appearance/settings-appearance-images/settings-appearance-images.component.ts index 9e0bccc3..75bb1661 100644 --- a/src/app/pages/settings/settings-appearance/settings-appearance-images/settings-appearance-images.component.ts +++ b/src/app/pages/settings/settings-appearance/settings-appearance-images/settings-appearance-images.component.ts @@ -6,6 +6,7 @@ import {Store} from '@ngxs/store'; selector: 'app-settings-appearance-images', templateUrl: './settings-appearance-images.component.html', styleUrls: ['./settings-appearance-images.component.scss'], + standalone: false, }) export class SettingsAppearanceImagesComponent extends BaseSettingsComponent { @Input() scale = 1; diff --git a/src/app/pages/settings/settings-appearance/settings-appearance.component.ts b/src/app/pages/settings/settings-appearance/settings-appearance.component.ts index eee5b6ee..44b2eb69 100644 --- a/src/app/pages/settings/settings-appearance/settings-appearance.component.ts +++ b/src/app/pages/settings/settings-appearance/settings-appearance.component.ts @@ -4,5 +4,6 @@ import {Component} from '@angular/core'; templateUrl: './settings-appearance.component.html', selector: 'app-settings-appearance', styleUrls: ['./settings-appearance.component.scss'], + standalone: false, }) export class SettingsAppearanceComponent {} diff --git a/src/app/pages/settings/settings-feedback/settings-feedback.component.ts b/src/app/pages/settings/settings-feedback/settings-feedback.component.ts index 3c9f37c1..59310016 100644 --- a/src/app/pages/settings/settings-feedback/settings-feedback.component.ts +++ b/src/app/pages/settings/settings-feedback/settings-feedback.component.ts @@ -4,5 +4,6 @@ import {Component} from '@angular/core'; selector: 'app-settings-feedback', templateUrl: './settings-feedback.component.html', styleUrls: ['./settings-feedback.component.scss'], + standalone: false, }) export class SettingsFeedbackComponent {} diff --git a/src/app/pages/settings/settings-menu/settings-menu.component.ts b/src/app/pages/settings/settings-menu/settings-menu.component.ts index 8b8141f8..3651cce8 100644 --- a/src/app/pages/settings/settings-menu/settings-menu.component.ts +++ b/src/app/pages/settings/settings-menu/settings-menu.component.ts @@ -21,6 +21,7 @@ interface PagesGroup { selector: 'app-settings-menu', templateUrl: './settings-menu.component.html', styleUrls: ['./settings-menu.component.scss'], + standalone: false, }) export class SettingsMenuComponent { groups: PagesGroup[] = [ diff --git a/src/app/pages/settings/settings-offline/settings-offline.component.ts b/src/app/pages/settings/settings-offline/settings-offline.component.ts index a11362cc..f96585de 100644 --- a/src/app/pages/settings/settings-offline/settings-offline.component.ts +++ b/src/app/pages/settings/settings-offline/settings-offline.component.ts @@ -28,6 +28,7 @@ if (!isIOS) { selector: 'app-settings-offline', templateUrl: './settings-offline.component.html', styleUrls: ['./settings-offline.component.scss'], + standalone: false, }) export class SettingsOfflineComponent extends BaseComponent implements OnInit { localFiles: {[key: string]: AssetState} = {}; diff --git a/src/app/pages/settings/settings-voice-input/settings-voice-input.component.ts b/src/app/pages/settings/settings-voice-input/settings-voice-input.component.ts index fa6e54c7..70faa84a 100644 --- a/src/app/pages/settings/settings-voice-input/settings-voice-input.component.ts +++ b/src/app/pages/settings/settings-voice-input/settings-voice-input.component.ts @@ -4,5 +4,6 @@ import {Component} from '@angular/core'; selector: 'app-settings-voice-input', templateUrl: './settings-voice-input.component.html', styleUrls: ['./settings-voice-input.component.scss'], + standalone: false, }) export class SettingsVoiceInputComponent {} diff --git a/src/app/pages/settings/settings-voice-output/settings-voice-output.component.ts b/src/app/pages/settings/settings-voice-output/settings-voice-output.component.ts index 44ee354f..4ff17a61 100644 --- a/src/app/pages/settings/settings-voice-output/settings-voice-output.component.ts +++ b/src/app/pages/settings/settings-voice-output/settings-voice-output.component.ts @@ -4,5 +4,6 @@ import {Component} from '@angular/core'; selector: 'app-settings-voice-output', templateUrl: './settings-voice-output.component.html', styleUrls: ['./settings-voice-output.component.scss'], + standalone: false, }) export class SettingsVoiceOutputComponent {} diff --git a/src/app/pages/settings/settings.component.ts b/src/app/pages/settings/settings.component.ts index 8a764ae7..1ebf341e 100644 --- a/src/app/pages/settings/settings.component.ts +++ b/src/app/pages/settings/settings.component.ts @@ -3,6 +3,7 @@ import {SettingsMenuComponent} from './settings-menu/settings-menu.component'; @Component({ template: '', + standalone: false, }) export class SettingsPageComponent { component = SettingsMenuComponent; diff --git a/src/app/pages/translate/drop-pose-file/drop-pose-file.component.ts b/src/app/pages/translate/drop-pose-file/drop-pose-file.component.ts index a3085b66..ea1db412 100644 --- a/src/app/pages/translate/drop-pose-file/drop-pose-file.component.ts +++ b/src/app/pages/translate/drop-pose-file/drop-pose-file.component.ts @@ -6,6 +6,7 @@ import {UploadPoseFile} from '../../../modules/translate/translate.actions'; selector: 'app-drop-pose-file', templateUrl: './drop-pose-file.component.html', styleUrls: ['./drop-pose-file.component.scss'], + standalone: false, }) export class DropPoseFileComponent { @HostBinding('class.hovering') diff --git a/src/app/pages/translate/input/button/button.component.ts b/src/app/pages/translate/input/button/button.component.ts index e6678222..e81a8067 100644 --- a/src/app/pages/translate/input/button/button.component.ts +++ b/src/app/pages/translate/input/button/button.component.ts @@ -8,6 +8,7 @@ import {Observable} from 'rxjs'; selector: 'app-translate-input-button', templateUrl: './button.component.html', styleUrls: ['./button.component.scss'], + standalone: false, }) export class TranslateInputButtonComponent { inputMode$!: Observable; diff --git a/src/app/pages/translate/language-selector/language-selector.component.ts b/src/app/pages/translate/language-selector/language-selector.component.ts index a44f6887..0d664242 100644 --- a/src/app/pages/translate/language-selector/language-selector.component.ts +++ b/src/app/pages/translate/language-selector/language-selector.component.ts @@ -12,6 +12,7 @@ const IntlTypeMap: {[key: string]: Intl.DisplayNamesType} = {languages: 'languag selector: 'app-language-selector', templateUrl: './language-selector.component.html', styleUrls: ['./language-selector.component.scss'], + standalone: false, }) export class LanguageSelectorComponent extends BaseComponent implements OnInit, OnChanges { detectedLanguage: string; diff --git a/src/app/pages/translate/language-selectors/language-selectors.component.ts b/src/app/pages/translate/language-selectors/language-selectors.component.ts index b4e2aa9d..f998ffac 100644 --- a/src/app/pages/translate/language-selectors/language-selectors.component.ts +++ b/src/app/pages/translate/language-selectors/language-selectors.component.ts @@ -14,6 +14,7 @@ import {takeUntil, tap} from 'rxjs/operators'; selector: 'app-language-selectors', templateUrl: './language-selectors.component.html', styleUrls: ['./language-selectors.component.scss'], + standalone: false, }) export class LanguageSelectorsComponent extends BaseComponent implements OnInit { spokenToSigned$: Observable; diff --git a/src/app/pages/translate/pose-viewers/avatar-pose-viewer/avatar-pose-viewer.component.ts b/src/app/pages/translate/pose-viewers/avatar-pose-viewer/avatar-pose-viewer.component.ts index 426de5b9..abec3eca 100644 --- a/src/app/pages/translate/pose-viewers/avatar-pose-viewer/avatar-pose-viewer.component.ts +++ b/src/app/pages/translate/pose-viewers/avatar-pose-viewer/avatar-pose-viewer.component.ts @@ -8,6 +8,7 @@ import {takeUntil, tap} from 'rxjs/operators'; selector: 'app-avatar-pose-viewer', templateUrl: './avatar-pose-viewer.component.html', styleUrls: ['./avatar-pose-viewer.component.scss'], + standalone: false, }) export class AvatarPoseViewerComponent extends BasePoseViewerComponent implements AfterViewInit { @Input() src: string; diff --git a/src/app/pages/translate/pose-viewers/human-pose-viewer/human-pose-viewer.component.ts b/src/app/pages/translate/pose-viewers/human-pose-viewer/human-pose-viewer.component.ts index 6abf0500..4b7bc5eb 100644 --- a/src/app/pages/translate/pose-viewers/human-pose-viewer/human-pose-viewer.component.ts +++ b/src/app/pages/translate/pose-viewers/human-pose-viewer/human-pose-viewer.component.ts @@ -10,6 +10,7 @@ import {transferableImage} from '../../../../core/helpers/image/transferable'; selector: 'app-human-pose-viewer', templateUrl: './human-pose-viewer.component.html', styleUrls: ['./human-pose-viewer.component.scss'], + standalone: false, }) export class HumanPoseViewerComponent extends BasePoseViewerComponent implements AfterViewInit, OnDestroy { appearance$ = this.store.select(state => state.settings.appearance); diff --git a/src/app/pages/translate/pose-viewers/pose-viewer.component.ts b/src/app/pages/translate/pose-viewers/pose-viewer.component.ts index 6ac35597..71020039 100644 --- a/src/app/pages/translate/pose-viewers/pose-viewer.component.ts +++ b/src/app/pages/translate/pose-viewers/pose-viewer.component.ts @@ -11,6 +11,7 @@ import {isChrome} from '../../../core/constants'; selector: 'app-pose-viewer', template: ``, styles: [], + standalone: false, }) export abstract class BasePoseViewerComponent extends BaseComponent implements OnInit, OnDestroy { @ViewChild('poseViewer') poseEl: ElementRef; diff --git a/src/app/pages/translate/pose-viewers/skeleton-pose-viewer/skeleton-pose-viewer.component.ts b/src/app/pages/translate/pose-viewers/skeleton-pose-viewer/skeleton-pose-viewer.component.ts index 4a63da60..c2564047 100644 --- a/src/app/pages/translate/pose-viewers/skeleton-pose-viewer/skeleton-pose-viewer.component.ts +++ b/src/app/pages/translate/pose-viewers/skeleton-pose-viewer/skeleton-pose-viewer.component.ts @@ -10,6 +10,7 @@ import {PlayableVideoEncoder} from '../playable-video-encoder'; selector: 'app-skeleton-pose-viewer', templateUrl: './skeleton-pose-viewer.component.html', styleUrls: ['./skeleton-pose-viewer.component.scss'], + standalone: false, }) export class SkeletonPoseViewerComponent extends BasePoseViewerComponent implements AfterViewInit { @Input() src: string; diff --git a/src/app/pages/translate/pose-viewers/viewer-selector/viewer-selector.component.ts b/src/app/pages/translate/pose-viewers/viewer-selector/viewer-selector.component.ts index 52958b03..806cb337 100644 --- a/src/app/pages/translate/pose-viewers/viewer-selector/viewer-selector.component.ts +++ b/src/app/pages/translate/pose-viewers/viewer-selector/viewer-selector.component.ts @@ -14,6 +14,7 @@ export interface MatFabMenu { selector: 'app-viewer-selector', templateUrl: './viewer-selector.component.html', styleUrls: ['./viewer-selector.component.scss'], + standalone: false, }) export class ViewerSelectorComponent extends BaseSettingsComponent implements OnInit { poseViewerSetting$ = this.store.select(state => state.settings.poseViewer); diff --git a/src/app/pages/translate/send-feedback/send-feedback.component.ts b/src/app/pages/translate/send-feedback/send-feedback.component.ts index 0c0225e0..b1576dd8 100644 --- a/src/app/pages/translate/send-feedback/send-feedback.component.ts +++ b/src/app/pages/translate/send-feedback/send-feedback.component.ts @@ -4,5 +4,6 @@ import {Component} from '@angular/core'; selector: 'app-send-feedback', templateUrl: './send-feedback.component.html', styleUrls: ['./send-feedback.component.scss'], + standalone: false, }) export class SendFeedbackComponent {} diff --git a/src/app/pages/translate/signed-to-spoken/signed-language-input/signed-language-input.component.ts b/src/app/pages/translate/signed-to-spoken/signed-language-input/signed-language-input.component.ts index fc4a85dc..315f9a48 100644 --- a/src/app/pages/translate/signed-to-spoken/signed-language-input/signed-language-input.component.ts +++ b/src/app/pages/translate/signed-to-spoken/signed-language-input/signed-language-input.component.ts @@ -4,5 +4,6 @@ import {Component} from '@angular/core'; selector: 'app-signed-language-input', templateUrl: './signed-language-input.component.html', styleUrl: './signed-language-input.component.scss', + standalone: false, }) export class SignedLanguageInputComponent {} diff --git a/src/app/pages/translate/signed-to-spoken/signed-to-spoken.component.ts b/src/app/pages/translate/signed-to-spoken/signed-to-spoken.component.ts index 83b66f58..bd92adc1 100644 --- a/src/app/pages/translate/signed-to-spoken/signed-to-spoken.component.ts +++ b/src/app/pages/translate/signed-to-spoken/signed-to-spoken.component.ts @@ -79,6 +79,7 @@ const FAKE_WORDS = [ selector: 'app-signed-to-spoken', templateUrl: './signed-to-spoken.component.html', styleUrls: ['./signed-to-spoken.component.scss'], + standalone: false, }) export class SignedToSpokenComponent implements OnInit { videoState$!: Observable; diff --git a/src/app/pages/translate/signed-to-spoken/upload/upload.component.ts b/src/app/pages/translate/signed-to-spoken/upload/upload.component.ts index 43a178b7..4fac7280 100644 --- a/src/app/pages/translate/signed-to-spoken/upload/upload.component.ts +++ b/src/app/pages/translate/signed-to-spoken/upload/upload.component.ts @@ -6,6 +6,7 @@ import {SetVideo} from '../../../../core/modules/ngxs/store/video/video.actions' selector: 'app-upload', templateUrl: './upload.component.html', styleUrls: ['./upload.component.scss'], + standalone: false, }) export class UploadComponent { @Input() isMobile = false; diff --git a/src/app/pages/translate/signwriting/sign-writing.component.ts b/src/app/pages/translate/signwriting/sign-writing.component.ts index 59cd12c4..fd61037c 100644 --- a/src/app/pages/translate/signwriting/sign-writing.component.ts +++ b/src/app/pages/translate/signwriting/sign-writing.component.ts @@ -12,6 +12,7 @@ import {DescribeSignWritingSign} from '../../../modules/translate/translate.acti selector: 'app-sign-writing', templateUrl: './sign-writing.component.html', styleUrls: ['./sign-writing.component.scss'], + standalone: false, }) export class SignWritingComponent { signs$!: Observable; diff --git a/src/app/pages/translate/spoken-to-signed/signed-language-output/signed-language-output.component.ts b/src/app/pages/translate/spoken-to-signed/signed-language-output/signed-language-output.component.ts index 66f9c286..f4e36dc9 100644 --- a/src/app/pages/translate/spoken-to-signed/signed-language-output/signed-language-output.component.ts +++ b/src/app/pages/translate/spoken-to-signed/signed-language-output/signed-language-output.component.ts @@ -17,6 +17,7 @@ import {getMediaSourceClass} from '../../pose-viewers/playable-video-encoder'; selector: 'app-signed-language-output', templateUrl: './signed-language-output.component.html', styleUrls: ['./signed-language-output.component.scss'], + standalone: false, }) export class SignedLanguageOutputComponent extends BaseComponent implements OnInit { poseViewerSetting$!: Observable; diff --git a/src/app/pages/translate/spoken-to-signed/spoken-language-input/desktop-textarea/desktop-textarea.component.ts b/src/app/pages/translate/spoken-to-signed/spoken-language-input/desktop-textarea/desktop-textarea.component.ts index 35d88051..930ab27f 100644 --- a/src/app/pages/translate/spoken-to-signed/spoken-language-input/desktop-textarea/desktop-textarea.component.ts +++ b/src/app/pages/translate/spoken-to-signed/spoken-language-input/desktop-textarea/desktop-textarea.component.ts @@ -7,6 +7,7 @@ import {Store} from '@ngxs/store'; selector: 'app-desktop-textarea', templateUrl: './desktop-textarea.component.html', styleUrl: './desktop-textarea.component.scss', + standalone: false, }) export class DesktopTextareaComponent { @Input() maxLength: number; diff --git a/src/app/pages/translate/spoken-to-signed/spoken-language-input/spoken-language-input.component.ts b/src/app/pages/translate/spoken-to-signed/spoken-language-input/spoken-language-input.component.ts index d6708bfa..a536bc24 100644 --- a/src/app/pages/translate/spoken-to-signed/spoken-language-input/spoken-language-input.component.ts +++ b/src/app/pages/translate/spoken-to-signed/spoken-language-input/spoken-language-input.component.ts @@ -15,6 +15,7 @@ import {BaseComponent} from '../../../../components/base/base.component'; selector: 'app-spoken-language-input', templateUrl: './spoken-language-input.component.html', styleUrls: ['./spoken-language-input.component.scss'], + standalone: false, }) export class SpokenLanguageInputComponent extends BaseComponent implements OnInit { translate$!: Observable; diff --git a/src/app/pages/translate/spoken-to-signed/spoken-to-signed.component.ts b/src/app/pages/translate/spoken-to-signed/spoken-to-signed.component.ts index 8a8b79d4..fa4bd90a 100644 --- a/src/app/pages/translate/spoken-to-signed/spoken-to-signed.component.ts +++ b/src/app/pages/translate/spoken-to-signed/spoken-to-signed.component.ts @@ -4,5 +4,6 @@ import {Component} from '@angular/core'; selector: 'app-spoken-to-signed', templateUrl: './spoken-to-signed.component.html', styleUrls: ['./spoken-to-signed.component.scss'], + standalone: false, }) export class SpokenToSignedComponent {} diff --git a/src/app/pages/translate/translate-desktop/translate-desktop.component.ts b/src/app/pages/translate/translate-desktop/translate-desktop.component.ts index e024dbc7..fb0c095a 100644 --- a/src/app/pages/translate/translate-desktop/translate-desktop.component.ts +++ b/src/app/pages/translate/translate-desktop/translate-desktop.component.ts @@ -8,6 +8,7 @@ import {BaseComponent} from '../../../components/base/base.component'; selector: 'app-translate-desktop', templateUrl: './translate-desktop.component.html', styleUrls: ['./translate-desktop.component.scss'], + standalone: false, }) export class TranslateDesktopComponent extends BaseComponent implements OnInit { spokenToSigned$: Observable; diff --git a/src/app/pages/translate/translate-mobile/translate-mobile.component.ts b/src/app/pages/translate/translate-mobile/translate-mobile.component.ts index 38699b82..e9efcfa9 100644 --- a/src/app/pages/translate/translate-mobile/translate-mobile.component.ts +++ b/src/app/pages/translate/translate-mobile/translate-mobile.component.ts @@ -6,6 +6,7 @@ import {TranslateDesktopComponent} from '../translate-desktop/translate-desktop. selector: 'app-translate-mobile', templateUrl: './translate-mobile.component.html', styleUrls: ['./translate-mobile.component.scss'], + standalone: false, }) export class TranslateMobileComponent extends TranslateDesktopComponent { constructor(store: Store) { diff --git a/src/app/pages/translate/translate.component.ts b/src/app/pages/translate/translate.component.ts index da4d4986..7d331c9c 100644 --- a/src/app/pages/translate/translate.component.ts +++ b/src/app/pages/translate/translate.component.ts @@ -13,6 +13,7 @@ import {MediaMatcher} from '@angular/cdk/layout'; selector: 'app-translate', templateUrl: './translate.component.html', styleUrls: ['./translate.component.scss'], + standalone: false, }) export class TranslateComponent extends BaseComponent implements OnInit { spokenToSigned$: Observable; diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts index 16e5b370..a8969018 100644 --- a/src/environments/environment.prod.ts +++ b/src/environments/environment.prod.ts @@ -1,5 +1,3 @@ -import type {InitialNavigation} from '@angular/router'; - export const environment = { production: true, firebase: { @@ -12,5 +10,4 @@ export const environment = { measurementId: 'G-1LXY5W5Z9H', }, reCAPTCHAKey: '6Ldsxb8oAAAAAGyUZbyd0QruivPSudqAWFygR-4t', - initialNavigation: 'enabledBlocking' as InitialNavigation, }; diff --git a/src/environments/environment.ts b/src/environments/environment.ts index 1186f2e5..7eb8bc2d 100644 --- a/src/environments/environment.ts +++ b/src/environments/environment.ts @@ -2,8 +2,6 @@ // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. // The list of file replacements can be found in `angular.json`. -import type {InitialNavigation} from '@angular/router'; - export const environment = { production: false, firebase: { @@ -16,7 +14,6 @@ export const environment = { measurementId: null, }, reCAPTCHAKey: '6Ldsxb8oAAAAAGyUZbyd0QruivPSudqAWFygR-4t', - initialNavigation: 'enabledBlocking' as InitialNavigation, }; /* diff --git a/src/main.server.ts b/src/main.server.ts index ac4cea71..e83e990a 100644 --- a/src/main.server.ts +++ b/src/main.server.ts @@ -1 +1,7 @@ -export {AppServerModule} from './app/app.server.module'; +import {bootstrapApplication} from '@angular/platform-browser'; +import {AppComponent} from './app/app.component'; +import {config} from './app/app.config.server'; + +const bootstrap = () => bootstrapApplication(AppComponent, config); + +export default bootstrap; diff --git a/src/main.ts b/src/main.ts index 2204764a..72515ffb 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,9 +1,10 @@ import {enableProdMode} from '@angular/core'; -import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; -import {AppModule} from './app/app.module'; import {environment} from './environments/environment'; import {Capacitor} from '@capacitor/core'; import {initializeApp} from 'firebase/app'; +import {appConfig} from './app/app.config'; +import {AppComponent} from './app/app.component'; +import {bootstrapApplication} from '@angular/platform-browser'; if (environment.production) { enableProdMode(); @@ -13,14 +14,4 @@ if (!Capacitor.isNativePlatform()) { initializeApp(environment.firebase); } -function bootstrap() { - platformBrowserDynamic() - .bootstrapModule(AppModule) - .catch(err => console.error(err)); -} - -if (document.readyState === 'complete') { - bootstrap(); -} else { - document.addEventListener('DOMContentLoaded', bootstrap); -} +bootstrapApplication(AppComponent, appConfig).catch(err => console.error(err)); diff --git a/src/server.ts b/src/server.ts new file mode 100644 index 00000000..d021852e --- /dev/null +++ b/src/server.ts @@ -0,0 +1,65 @@ +import {APP_BASE_HREF} from '@angular/common'; +import {CommonEngine, isMainModule} from '@angular/ssr/node'; +import express from 'express'; +import {dirname, join, resolve} from 'node:path'; +import {fileURLToPath} from 'node:url'; +import bootstrap from './main.server'; + +const serverDistFolder = dirname(fileURLToPath(import.meta.url)); +const browserDistFolder = resolve(serverDistFolder, '../browser'); +const indexHtml = join(serverDistFolder, 'index.server.html'); + +const app = express(); +const commonEngine = new CommonEngine(); + +/** + * Example Express Rest API endpoints can be defined here. + * Uncomment and define endpoints as necessary. + * + * Example: + * ```ts + * app.get('/api/**', (req, res) => { + * // Handle API request + * }); + * ``` + */ + +/** + * Serve static files from /browser + */ +app.get( + '**', + express.static(browserDistFolder, { + maxAge: '1y', + index: 'index.html', + }) +); + +/** + * Handle all other requests by rendering the Angular application. + */ +app.get('**', (req, res, next) => { + const {protocol, originalUrl, baseUrl, headers} = req; + + commonEngine + .render({ + bootstrap: bootstrap, + documentFilePath: indexHtml, + url: `${protocol}://${headers.host}${originalUrl}`, + publicPath: browserDistFolder, + providers: [{provide: APP_BASE_HREF, useValue: baseUrl}], + }) + .then(html => res.send(html)) + .catch(err => next(err)); +}); + +/** + * Start the server if this module is the main entry point. + * The server listens on the port defined by the `PORT` environment variable, or defaults to 4000. + */ +if (isMainModule(import.meta.url)) { + const port = process.env['PORT'] || 4000; + app.listen(port, () => { + console.log(`Node Express server listening on http://localhost:${port}`); + }); +} diff --git a/src/theme/styles.scss b/src/theme/styles.scss index 9e0735f0..e5c224f8 100644 --- a/src/theme/styles.scss +++ b/src/theme/styles.scss @@ -1,5 +1,8 @@ -@import './material.scss'; -@import 'fonts/roboto.css'; +@forward './material.scss'; +@forward 'fonts/roboto.css'; + +@forward './ionic-variables'; +@forward './ionic'; .container { width: auto; @@ -47,6 +50,3 @@ body { text-align: end; width: calc(100% - 2 * 14px); } - -@import './ionic-variables'; -@import './ionic'; diff --git a/tsconfig.app.json b/tsconfig.app.json index 971048ac..8788915a 100644 --- a/tsconfig.app.json +++ b/tsconfig.app.json @@ -12,6 +12,6 @@ "@types/long" ] }, - "files": ["src/main.ts"], + "files": ["src/main.ts", "src/main.server.ts", "src/server.ts"], "include": ["src/**/*.d.ts", "node_modules/@types/chrome/index.d.ts"] } diff --git a/tsconfig.json b/tsconfig.json index 93749fc2..7e9d55ac 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -5,14 +5,13 @@ "outDir": "./dist/out-tsc", "forceConsistentCasingInFileNames": true, "strict": false, + "esModuleInterop": true, "noImplicitOverride": true, "noPropertyAccessFromIndexSignature": false, "noImplicitReturns": true, "noFallthroughCasesInSwitch": true, - "allowSyntheticDefaultImports": true, "sourceMap": true, "declaration": false, - "downlevelIteration": true, "experimentalDecorators": true, "moduleResolution": "node", "resolveJsonModule": true, diff --git a/tsconfig.server.json b/tsconfig.server.json deleted file mode 100644 index ae5f5cf3..00000000 --- a/tsconfig.server.json +++ /dev/null @@ -1,11 +0,0 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ -{ - "extends": "./tsconfig.app.json", - "compilerOptions": { - "outDir": "./out-tsc/server" - }, - "files": ["src/main.server.ts", "server.ts"], - "angularCompilerOptions": { - "entryModule": "./src/app/app.server.module#AppServerModule" - } -} From 82e74d368e88a6db99a2dcf62027b537bef45339 Mon Sep 17 00:00:00 2001 From: Amit Moryossef Date: Thu, 21 Nov 2024 03:02:49 +0100 Subject: [PATCH 03/30] feat(angular19): convert components to standalone --- angular.json | 10 ------- src/app/app.routes.ts | 8 ++---- .../animation/animation.component.ts | 5 ++-- .../flag-icon/flag-icon.component.ts | 2 +- .../speech-to-text.component.ts | 15 ++++++++-- .../speech-to-text/speech-to-text.module.ts | 14 ---------- .../text-to-speech.component.ts | 11 +++++++- .../video-controls.component.ts | 10 ++++++- src/app/components/video/video.component.ts | 12 +++++++- src/app/directives/dropzone.directive.ts | 2 +- .../drop-pose-file.component.ts | 4 ++- .../drop-pose-file/drop-pose-file.module.ts | 10 ------- .../input/button/button.component.ts | 9 +++++- .../language-selector.component.ts | 12 +++++++- .../language-selectors.component.ts | 12 +++++++- .../avatar-pose-viewer.component.ts | 7 +++-- .../human-pose-viewer.component.ts | 9 ++++-- .../skeleton-pose-viewer.component.ts | 5 ++-- .../viewer-selector.component.ts | 17 ++++++++--- .../send-feedback/send-feedback.component.ts | 4 ++- .../signed-language-input.component.ts | 13 +++++++-- .../signed-to-spoken.component.ts | 25 ++++++++++++++++- .../upload/upload.component.scss | 1 - .../upload/upload.component.ts | 8 +++++- .../signwriting/sign-writing.component.ts | 8 ++++-- .../signed-language-output.component.ts | 26 ++++++++++++++++- .../desktop-textarea.component.ts | 6 ++-- .../spoken-language-input.component.ts | 28 +++++++++++++++++-- .../spoken-to-signed.component.ts | 6 +++- .../translate-desktop.component.ts | 28 ++++++++++++++++++- .../translate-mobile.component.ts | 19 ++++++++++++- .../pages/translate/translate.component.ts | 5 +++- src/theme/ionic.scss | 20 ++++++------- 33 files changed, 282 insertions(+), 89 deletions(-) delete mode 100644 src/app/components/speech-to-text/speech-to-text.module.ts delete mode 100644 src/app/pages/translate/drop-pose-file/drop-pose-file.module.ts diff --git a/angular.json b/angular.json index f0a36514..638939a0 100644 --- a/angular.json +++ b/angular.json @@ -65,11 +65,6 @@ "glob": "worker.js", "input": "node_modules/@sign-mt/browsermt/build/bundled/", "output": "./browsermt/" - }, - { - "glob": "**/*.svg", - "input": "node_modules/ionicons/dist/ionicons/svg", - "output": "./svg" } ], "styles": [ @@ -211,11 +206,6 @@ "glob": "worker.js", "input": "node_modules/@sign-mt/browsermt/build/bundled/", "output": "./browsermt/" - }, - { - "glob": "**/*.svg", - "input": "node_modules/ionicons/dist/ionicons/svg", - "output": "./svg" } ], "styles": ["src/theme/styles.scss"], diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index e4c2a935..e87b3916 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -1,8 +1,9 @@ import {Routes} from '@angular/router'; import {NotFoundComponent} from './pages/not-found/not-found.component'; +import {TranslateComponent} from './pages/translate/translate.component'; export const routes: Routes = [ - // {path: '', loadChildren: () => import('./pages/translate/translate.module').then(m => m.TranslatePageModule)}, + {path: '', component: TranslateComponent}, // {path: '', loadChildren: () => import('./pages/main.module').then(m => m.MainPageModule)}, // { // path: 'playground', @@ -14,8 +15,5 @@ export const routes: Routes = [ // }, // {path: 'about', loadChildren: () => import('./pages/landing/landing.module').then(m => m.LandingModule)}, // {path: 'legal', loadChildren: () => import('./pages/landing/landing.module').then(m => m.LandingModule)}, - { - path: '**', - component: NotFoundComponent, - }, + {path: '**', component: NotFoundComponent}, ]; diff --git a/src/app/components/animation/animation.component.ts b/src/app/components/animation/animation.component.ts index 8dd34d0d..d99ce270 100644 --- a/src/app/components/animation/animation.component.ts +++ b/src/app/components/animation/animation.component.ts @@ -1,4 +1,4 @@ -import {AfterViewInit, Component, ElementRef, Input, ViewChild} from '@angular/core'; +import {AfterViewInit, Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, Input, ViewChild} from '@angular/core'; import {Store} from '@ngxs/store'; import {AnimationStateModel} from '../../modules/animation/animation.state'; import {BaseComponent} from '../base/base.component'; @@ -12,7 +12,8 @@ import {Observable} from 'rxjs'; selector: 'app-animation', templateUrl: './animation.component.html', styleUrls: ['./animation.component.scss'], - standalone: false, + standalone: true, + schemas: [CUSTOM_ELEMENTS_SCHEMA], }) export class AnimationComponent extends BaseComponent implements AfterViewInit { animationState$: Observable; diff --git a/src/app/components/flag-icon/flag-icon.component.ts b/src/app/components/flag-icon/flag-icon.component.ts index 82f1243d..0a0f4d39 100644 --- a/src/app/components/flag-icon/flag-icon.component.ts +++ b/src/app/components/flag-icon/flag-icon.component.ts @@ -4,7 +4,7 @@ import {Component, Input} from '@angular/core'; selector: 'app-flag-icon', templateUrl: './flag-icon.component.html', styleUrls: ['./flag-icon.component.scss'], - standalone: false, + standalone: true, }) export class FlagIconComponent { @Input() country: string; diff --git a/src/app/components/speech-to-text/speech-to-text.component.ts b/src/app/components/speech-to-text/speech-to-text.component.ts index c42365ec..b11cf70a 100644 --- a/src/app/components/speech-to-text/speech-to-text.component.ts +++ b/src/app/components/speech-to-text/speech-to-text.component.ts @@ -1,13 +1,18 @@ import {Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges} from '@angular/core'; import {fromEvent} from 'rxjs'; import {BaseComponent} from '../base/base.component'; -import {TooltipPosition} from '@angular/material/tooltip'; +import {MatTooltip, TooltipPosition} from '@angular/material/tooltip'; +import {IonButton, IonIcon} from '@ionic/angular/standalone'; +import {TranslocoPipe} from '@ngneat/transloco'; +import {addIcons} from 'ionicons'; +import {micOutline, stopCircleOutline} from 'ionicons/icons'; @Component({ selector: 'app-speech-to-text', templateUrl: './speech-to-text.component.html', styleUrls: ['./speech-to-text.component.css'], - standalone: false, + standalone: true, + imports: [IonButton, IonIcon, TranslocoPipe, MatTooltip], }) export class SpeechToTextComponent extends BaseComponent implements OnInit, OnChanges { @Input() lang = 'en'; @@ -20,6 +25,12 @@ export class SpeechToTextComponent extends BaseComponent implements OnInit, OnCh supportError = null; isRecording = false; + constructor() { + super(); + + addIcons({stopCircleOutline, micOutline}); + } + ngOnInit(): void { if (!this.SpeechRecognition) { this.supportError = 'browser-not-supported'; diff --git a/src/app/components/speech-to-text/speech-to-text.module.ts b/src/app/components/speech-to-text/speech-to-text.module.ts deleted file mode 100644 index f3905e95..00000000 --- a/src/app/components/speech-to-text/speech-to-text.module.ts +++ /dev/null @@ -1,14 +0,0 @@ -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, IonIcon, IonButton, MatTooltipModule], - declarations: [SpeechToTextComponent], - exports: [SpeechToTextComponent], -}) -export class SpeechToTextModule {} diff --git a/src/app/components/text-to-speech/text-to-speech.component.ts b/src/app/components/text-to-speech/text-to-speech.component.ts index 8638b0b0..5864b7a8 100644 --- a/src/app/components/text-to-speech/text-to-speech.component.ts +++ b/src/app/components/text-to-speech/text-to-speech.component.ts @@ -1,10 +1,15 @@ import {Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges} from '@angular/core'; +import {MatTooltip} from '@angular/material/tooltip'; +import {IonButton, IonIcon} from '@ionic/angular/standalone'; +import {addIcons} from 'ionicons'; +import {stopCircleOutline, volumeMediumOutline, volumeMuteOutline} from 'ionicons/icons'; @Component({ selector: 'app-text-to-speech', templateUrl: './text-to-speech.component.html', styleUrls: ['./text-to-speech.component.scss'], - standalone: false, + standalone: true, + imports: [MatTooltip, IonButton, IonIcon], }) export class TextToSpeechComponent implements OnInit, OnDestroy, OnChanges { @Input() lang = 'en'; @@ -19,6 +24,10 @@ export class TextToSpeechComponent implements OnInit, OnDestroy, OnChanges { private listeners: {[key: string]: EventListener} = {}; + constructor() { + addIcons({stopCircleOutline, volumeMediumOutline, volumeMuteOutline}); + } + ngOnInit(): void { if (!this.speech) { return; diff --git a/src/app/components/video/video-controls/video-controls.component.ts b/src/app/components/video/video-controls/video-controls.component.ts index e3ccb88a..30ee8a36 100644 --- a/src/app/components/video/video-controls/video-controls.component.ts +++ b/src/app/components/video/video-controls/video-controls.component.ts @@ -1,15 +1,23 @@ import {Component} from '@angular/core'; import {Store} from '@ngxs/store'; import {BaseSettingsComponent} from '../../../modules/settings/settings.component'; +import {MatTooltip} from '@angular/material/tooltip'; +import {AsyncPipe} from '@angular/common'; +import {IonFab, IonFabButton, IonIcon} from '@ionic/angular/standalone'; +import {addIcons} from 'ionicons'; +import {videocamOffOutline, videocamOutline} from 'ionicons/icons'; @Component({ selector: 'app-video-controls', templateUrl: './video-controls.component.html', styleUrls: ['./video-controls.component.scss'], - standalone: false, + standalone: true, + imports: [MatTooltip, AsyncPipe, IonFab, IonFabButton, IonIcon], }) export class VideoControlsComponent extends BaseSettingsComponent { constructor(store: Store) { super(store); + + addIcons({videocamOutline, videocamOffOutline}); } } diff --git a/src/app/components/video/video.component.ts b/src/app/components/video/video.component.ts index ebbd9569..51b06bf6 100644 --- a/src/app/components/video/video.component.ts +++ b/src/app/components/video/video.component.ts @@ -12,12 +12,20 @@ import {PoseService} from '../../modules/pose/pose.service'; import {SignWritingStateModel} from '../../modules/sign-writing/sign-writing.state'; import {SettingsStateModel} from '../../modules/settings/settings.state'; import {SignWritingService} from '../../modules/sign-writing/sign-writing.service'; +import {IonIcon} from '@ionic/angular/standalone'; +import {VideoControlsComponent} from './video-controls/video-controls.component'; +import {AnimationComponent} from '../animation/animation.component'; +import {addIcons} from 'ionicons'; +import {playCircleOutline} from 'ionicons/icons'; +import {AsyncPipe} from '@angular/common'; +import {TranslocoPipe} from '@ngneat/transloco'; @Component({ selector: 'app-video', templateUrl: './video.component.html', styleUrls: ['./video.component.scss'], - standalone: false, + standalone: true, + imports: [AnimationComponent, VideoControlsComponent, IonIcon, AsyncPipe, TranslocoPipe], }) export class VideoComponent extends BaseComponent implements AfterViewInit { settingsState$!: Observable; @@ -59,6 +67,8 @@ export class VideoComponent extends BaseComponent implements AfterViewInit { this.poseState$ = this.store.select(state => state.pose); this.signWritingState$ = this.store.select(state => state.signWriting); this.signingProbability$ = this.store.select(state => state.detector.signingProbability); + + addIcons({playCircleOutline}); } ngAfterViewInit(): void { diff --git a/src/app/directives/dropzone.directive.ts b/src/app/directives/dropzone.directive.ts index 06a47a3c..a2dbd531 100644 --- a/src/app/directives/dropzone.directive.ts +++ b/src/app/directives/dropzone.directive.ts @@ -2,7 +2,7 @@ import {Directive, EventEmitter, HostListener, Output} from '@angular/core'; @Directive({ selector: '[appDropzone]', - standalone: false, + standalone: true, }) export class DropzoneDirective { @Output() dropped = new EventEmitter(); diff --git a/src/app/pages/translate/drop-pose-file/drop-pose-file.component.ts b/src/app/pages/translate/drop-pose-file/drop-pose-file.component.ts index ea1db412..27aa2dd3 100644 --- a/src/app/pages/translate/drop-pose-file/drop-pose-file.component.ts +++ b/src/app/pages/translate/drop-pose-file/drop-pose-file.component.ts @@ -1,12 +1,14 @@ import {Component, HostBinding} from '@angular/core'; import {Store} from '@ngxs/store'; import {UploadPoseFile} from '../../../modules/translate/translate.actions'; +import {DropzoneDirective} from '../../../directives/dropzone.directive'; @Component({ selector: 'app-drop-pose-file', templateUrl: './drop-pose-file.component.html', styleUrls: ['./drop-pose-file.component.scss'], - standalone: false, + standalone: true, + imports: [DropzoneDirective], }) export class DropPoseFileComponent { @HostBinding('class.hovering') diff --git a/src/app/pages/translate/drop-pose-file/drop-pose-file.module.ts b/src/app/pages/translate/drop-pose-file/drop-pose-file.module.ts deleted file mode 100644 index 73039954..00000000 --- a/src/app/pages/translate/drop-pose-file/drop-pose-file.module.ts +++ /dev/null @@ -1,10 +0,0 @@ -import {NgModule} from '@angular/core'; -import {DropPoseFileComponent} from './drop-pose-file.component'; -import {DropzoneDirective} from '../../../directives/dropzone.directive'; - -@NgModule({ - imports: [], - declarations: [DropPoseFileComponent, DropzoneDirective], - exports: [DropPoseFileComponent], -}) -export class DropPoseFileModule {} diff --git a/src/app/pages/translate/input/button/button.component.ts b/src/app/pages/translate/input/button/button.component.ts index e81a8067..181aea01 100644 --- a/src/app/pages/translate/input/button/button.component.ts +++ b/src/app/pages/translate/input/button/button.component.ts @@ -3,12 +3,17 @@ import {InputMode} from '../../../../modules/translate/translate.state'; import {Store} from '@ngxs/store'; import {SetInputMode} from '../../../../modules/translate/translate.actions'; import {Observable} from 'rxjs'; +import {addIcons} from 'ionicons'; +import {IonButton, IonIcon} from '@ionic/angular/standalone'; +import {TranslocoPipe} from '@ngneat/transloco'; +import {AsyncPipe} from '@angular/common'; @Component({ selector: 'app-translate-input-button', templateUrl: './button.component.html', styleUrls: ['./button.component.scss'], - standalone: false, + standalone: true, + imports: [IonButton, IonIcon, TranslocoPipe, AsyncPipe], }) export class TranslateInputButtonComponent { inputMode$!: Observable; @@ -18,6 +23,8 @@ export class TranslateInputButtonComponent { constructor(private store: Store) { this.inputMode$ = this.store.select(state => state.translate.inputMode); + + addIcons({[this.icon]: this.icon}); } setInputMode(): void { diff --git a/src/app/pages/translate/language-selector/language-selector.component.ts b/src/app/pages/translate/language-selector/language-selector.component.ts index 0d664242..35413368 100644 --- a/src/app/pages/translate/language-selector/language-selector.component.ts +++ b/src/app/pages/translate/language-selector/language-selector.component.ts @@ -5,6 +5,13 @@ import {TranslocoService} from '@ngneat/transloco'; import {filter, takeUntil, tap} from 'rxjs/operators'; import {BaseComponent} from '../../../components/base/base.component'; import {IANASignedLanguages} from '../../../core/helpers/iana/languages'; +import {MatTab, MatTabGroup} from '@angular/material/tabs'; +import {IonicModule} from '@ionic/angular'; +import {IonButton, IonIcon} from '@ionic/angular/standalone'; +import {MatMenu, MatMenuTrigger} from '@angular/material/menu'; +import {FlagIconComponent} from '../../../components/flag-icon/flag-icon.component'; +import {addIcons} from 'ionicons'; +import {chevronDown} from 'ionicons/icons'; const IntlTypeMap: {[key: string]: Intl.DisplayNamesType} = {languages: 'language', countries: 'region'}; @@ -12,7 +19,8 @@ const IntlTypeMap: {[key: string]: Intl.DisplayNamesType} = {languages: 'languag selector: 'app-language-selector', templateUrl: './language-selector.component.html', styleUrls: ['./language-selector.component.scss'], - standalone: false, + standalone: true, + imports: [MatTab, MatTabGroup, IonButton, IonIcon, MatMenuTrigger, FlagIconComponent, MatMenu], }) export class LanguageSelectorComponent extends BaseComponent implements OnInit, OnChanges { detectedLanguage: string; @@ -35,6 +43,8 @@ export class LanguageSelectorComponent extends BaseComponent implements OnInit, constructor(private store: Store, private transloco: TranslocoService) { super(); + + addIcons({chevronDown}); } ngOnInit(): void { diff --git a/src/app/pages/translate/language-selectors/language-selectors.component.ts b/src/app/pages/translate/language-selectors/language-selectors.component.ts index f998ffac..89c2fab5 100644 --- a/src/app/pages/translate/language-selectors/language-selectors.component.ts +++ b/src/app/pages/translate/language-selectors/language-selectors.component.ts @@ -9,12 +9,20 @@ import {Observable} from 'rxjs'; import {TranslationService} from '../../../modules/translate/translate.service'; import {BaseComponent} from '../../../components/base/base.component'; import {takeUntil, tap} from 'rxjs/operators'; +import {addIcons} from 'ionicons'; +import {swapHorizontal} from 'ionicons/icons'; +import {IonButton, IonIcon} from '@ionic/angular/standalone'; +import {LanguageSelectorComponent} from '../language-selector/language-selector.component'; +import {AsyncPipe} from '@angular/common'; +import {MatTooltip} from '@angular/material/tooltip'; +import {TranslocoPipe} from '@ngneat/transloco'; @Component({ selector: 'app-language-selectors', templateUrl: './language-selectors.component.html', styleUrls: ['./language-selectors.component.scss'], - standalone: false, + standalone: true, + imports: [IonButton, IonIcon, LanguageSelectorComponent, AsyncPipe, MatTooltip, TranslocoPipe], }) export class LanguageSelectorsComponent extends BaseComponent implements OnInit { spokenToSigned$: Observable; @@ -30,6 +38,8 @@ export class LanguageSelectorsComponent extends BaseComponent implements OnInit this.spokenLanguage$ = this.store.select(state => state.translate.spokenLanguage); this.signedLanguage$ = this.store.select(state => state.translate.signedLanguage); this.detectedLanguage$ = this.store.select(state => state.translate.detectedLanguage); + + addIcons({swapHorizontal}); } ngOnInit() { diff --git a/src/app/pages/translate/pose-viewers/avatar-pose-viewer/avatar-pose-viewer.component.ts b/src/app/pages/translate/pose-viewers/avatar-pose-viewer/avatar-pose-viewer.component.ts index abec3eca..280eeecd 100644 --- a/src/app/pages/translate/pose-viewers/avatar-pose-viewer/avatar-pose-viewer.component.ts +++ b/src/app/pages/translate/pose-viewers/avatar-pose-viewer/avatar-pose-viewer.component.ts @@ -1,14 +1,17 @@ -import {AfterViewInit, Component, Input} from '@angular/core'; +import {AfterViewInit, Component, CUSTOM_ELEMENTS_SCHEMA, Input} from '@angular/core'; import {BasePoseViewerComponent} from '../pose-viewer.component'; import {Store} from '@ngxs/store'; import {fromEvent} from 'rxjs'; import {takeUntil, tap} from 'rxjs/operators'; +import {AnimationComponent} from '../../../../components/animation/animation.component'; @Component({ selector: 'app-avatar-pose-viewer', templateUrl: './avatar-pose-viewer.component.html', styleUrls: ['./avatar-pose-viewer.component.scss'], - standalone: false, + standalone: true, + imports: [AnimationComponent], + schemas: [CUSTOM_ELEMENTS_SCHEMA], }) export class AvatarPoseViewerComponent extends BasePoseViewerComponent implements AfterViewInit { @Input() src: string; diff --git a/src/app/pages/translate/pose-viewers/human-pose-viewer/human-pose-viewer.component.ts b/src/app/pages/translate/pose-viewers/human-pose-viewer/human-pose-viewer.component.ts index 4b7bc5eb..02a50bce 100644 --- a/src/app/pages/translate/pose-viewers/human-pose-viewer/human-pose-viewer.component.ts +++ b/src/app/pages/translate/pose-viewers/human-pose-viewer/human-pose-viewer.component.ts @@ -1,16 +1,21 @@ -import {AfterViewInit, Component, ElementRef, Input, OnDestroy, ViewChild} from '@angular/core'; +import {AfterViewInit, Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, Input, OnDestroy, ViewChild} from '@angular/core'; import {Pix2PixService} from '../../../../modules/pix2pix/pix2pix.service'; import {fromEvent, interval} from 'rxjs'; import {takeUntil, tap} from 'rxjs/operators'; import {BasePoseViewerComponent} from '../pose-viewer.component'; import {Store} from '@ngxs/store'; import {transferableImage} from '../../../../core/helpers/image/transferable'; +import {IonProgressBar, IonSpinner} from '@ionic/angular/standalone'; +import {AsyncPipe} from '@angular/common'; +import {MatTooltip} from '@angular/material/tooltip'; @Component({ selector: 'app-human-pose-viewer', templateUrl: './human-pose-viewer.component.html', styleUrls: ['./human-pose-viewer.component.scss'], - standalone: false, + standalone: true, + imports: [IonProgressBar, IonSpinner, AsyncPipe, MatTooltip], + schemas: [CUSTOM_ELEMENTS_SCHEMA], }) export class HumanPoseViewerComponent extends BasePoseViewerComponent implements AfterViewInit, OnDestroy { appearance$ = this.store.select(state => state.settings.appearance); diff --git a/src/app/pages/translate/pose-viewers/skeleton-pose-viewer/skeleton-pose-viewer.component.ts b/src/app/pages/translate/pose-viewers/skeleton-pose-viewer/skeleton-pose-viewer.component.ts index c2564047..044f1595 100644 --- a/src/app/pages/translate/pose-viewers/skeleton-pose-viewer/skeleton-pose-viewer.component.ts +++ b/src/app/pages/translate/pose-viewers/skeleton-pose-viewer/skeleton-pose-viewer.component.ts @@ -1,4 +1,4 @@ -import {AfterViewInit, Component, Input} from '@angular/core'; +import {AfterViewInit, Component, CUSTOM_ELEMENTS_SCHEMA, Input} from '@angular/core'; import {fromEvent} from 'rxjs'; import {takeUntil, tap} from 'rxjs/operators'; import {BasePoseViewerComponent} from '../pose-viewer.component'; @@ -10,7 +10,8 @@ import {PlayableVideoEncoder} from '../playable-video-encoder'; selector: 'app-skeleton-pose-viewer', templateUrl: './skeleton-pose-viewer.component.html', styleUrls: ['./skeleton-pose-viewer.component.scss'], - standalone: false, + standalone: true, + schemas: [CUSTOM_ELEMENTS_SCHEMA], }) export class SkeletonPoseViewerComponent extends BasePoseViewerComponent implements AfterViewInit { @Input() src: string; diff --git a/src/app/pages/translate/pose-viewers/viewer-selector/viewer-selector.component.ts b/src/app/pages/translate/pose-viewers/viewer-selector/viewer-selector.component.ts index 806cb337..0c76da59 100644 --- a/src/app/pages/translate/pose-viewers/viewer-selector/viewer-selector.component.ts +++ b/src/app/pages/translate/pose-viewers/viewer-selector/viewer-selector.component.ts @@ -3,6 +3,10 @@ import {BaseSettingsComponent} from '../../../../modules/settings/settings.compo import {Store} from '@ngxs/store'; import {PoseViewerSetting} from '../../../../modules/settings/settings.state'; import {takeUntil, tap} from 'rxjs/operators'; +import {IonFab, IonFabButton, IonFabList, IonIcon} from '@ionic/angular/standalone'; +import {accessibility, gitCommit, logoApple} from 'ionicons/icons'; +import {addIcons} from 'ionicons'; +import {MatTooltip} from '@angular/material/tooltip'; export interface MatFabMenu { id: string; @@ -14,15 +18,16 @@ export interface MatFabMenu { selector: 'app-viewer-selector', templateUrl: './viewer-selector.component.html', styleUrls: ['./viewer-selector.component.scss'], - standalone: false, + standalone: true, + imports: [IonFab, IonFabList, IonFabButton, IonIcon, MatTooltip], }) export class ViewerSelectorComponent extends BaseSettingsComponent implements OnInit { poseViewerSetting$ = this.store.select(state => state.settings.poseViewer); buttons: MatFabMenu[] = [ - {id: 'pose', icon: 'git-commit', color: 'light'}, - {id: 'avatar', icon: 'logo-apple-ar', color: 'primary'}, - {id: 'person', icon: 'accessibility', color: 'success'}, + {id: 'pose', icon: gitCommit, color: 'light'}, + {id: 'avatar', icon: logoApple, color: 'primary'}, + {id: 'person', icon: accessibility, color: 'success'}, ]; fab: MatFabMenu; @@ -30,6 +35,10 @@ export class ViewerSelectorComponent extends BaseSettingsComponent implements On constructor(store: Store) { super(store); + + for (const button of this.buttons) { + addIcons({[button.icon]: button.icon}); + } } ngOnInit(): void { diff --git a/src/app/pages/translate/send-feedback/send-feedback.component.ts b/src/app/pages/translate/send-feedback/send-feedback.component.ts index b1576dd8..0c7027f8 100644 --- a/src/app/pages/translate/send-feedback/send-feedback.component.ts +++ b/src/app/pages/translate/send-feedback/send-feedback.component.ts @@ -1,9 +1,11 @@ import {Component} from '@angular/core'; +import {TranslocoPipe} from '@ngneat/transloco'; @Component({ selector: 'app-send-feedback', templateUrl: './send-feedback.component.html', styleUrls: ['./send-feedback.component.scss'], - standalone: false, + standalone: true, + imports: [TranslocoPipe], }) export class SendFeedbackComponent {} diff --git a/src/app/pages/translate/signed-to-spoken/signed-language-input/signed-language-input.component.ts b/src/app/pages/translate/signed-to-spoken/signed-language-input/signed-language-input.component.ts index 315f9a48..d3580d72 100644 --- a/src/app/pages/translate/signed-to-spoken/signed-language-input/signed-language-input.component.ts +++ b/src/app/pages/translate/signed-to-spoken/signed-language-input/signed-language-input.component.ts @@ -1,9 +1,18 @@ import {Component} from '@angular/core'; +import {IonButton, IonButtons, IonFabButton, IonIcon, IonTitle, IonToolbar} from '@ionic/angular/standalone'; +import {addIcons} from 'ionicons'; +import {cameraReverseOutline, ellipseOutline} from 'ionicons/icons'; +import {UploadComponent} from '../upload/upload.component'; @Component({ selector: 'app-signed-language-input', templateUrl: './signed-language-input.component.html', styleUrl: './signed-language-input.component.scss', - standalone: false, + standalone: true, + imports: [IonToolbar, IonButtons, IonButton, IonFabButton, IonTitle, IonIcon, UploadComponent], }) -export class SignedLanguageInputComponent {} +export class SignedLanguageInputComponent { + constructor() { + addIcons({ellipseOutline, cameraReverseOutline}); + } +} diff --git a/src/app/pages/translate/signed-to-spoken/signed-to-spoken.component.ts b/src/app/pages/translate/signed-to-spoken/signed-to-spoken.component.ts index bd92adc1..54fcebb4 100644 --- a/src/app/pages/translate/signed-to-spoken/signed-to-spoken.component.ts +++ b/src/app/pages/translate/signed-to-spoken/signed-to-spoken.component.ts @@ -8,6 +8,16 @@ import { SetSpokenLanguageText, } from '../../../modules/translate/translate.actions'; import {Observable} from 'rxjs'; +import {MatTooltip} from '@angular/material/tooltip'; +import {SignWritingComponent} from '../signwriting/sign-writing.component'; +import {IonButton, IonIcon} from '@ionic/angular/standalone'; +import {TextToSpeechComponent} from '../../../components/text-to-speech/text-to-speech.component'; +import {VideoComponent} from '../../../components/video/video.component'; +import {UploadComponent} from './upload/upload.component'; +import {addIcons} from 'ionicons'; +import {copyOutline} from 'ionicons/icons'; +import {TranslocoPipe} from '@ngneat/transloco'; +import {AsyncPipe} from '@angular/common'; const FAKE_WORDS = [ { @@ -79,7 +89,18 @@ const FAKE_WORDS = [ selector: 'app-signed-to-spoken', templateUrl: './signed-to-spoken.component.html', styleUrls: ['./signed-to-spoken.component.scss'], - standalone: false, + standalone: true, + imports: [ + MatTooltip, + SignWritingComponent, + IonButton, + TextToSpeechComponent, + VideoComponent, + UploadComponent, + IonIcon, + TranslocoPipe, + AsyncPipe, + ], }) export class SignedToSpokenComponent implements OnInit { videoState$!: Observable; @@ -94,6 +115,8 @@ export class SignedToSpokenComponent implements OnInit { this.spokenLanguageText$ = this.store.select(state => state.translate.spokenLanguageText); this.store.dispatch(new SetSpokenLanguageText('')); + + addIcons({copyOutline}); } ngOnInit(): void { diff --git a/src/app/pages/translate/signed-to-spoken/upload/upload.component.scss b/src/app/pages/translate/signed-to-spoken/upload/upload.component.scss index 012f0065..89ed22ea 100644 --- a/src/app/pages/translate/signed-to-spoken/upload/upload.component.scss +++ b/src/app/pages/translate/signed-to-spoken/upload/upload.component.scss @@ -1,5 +1,4 @@ @use '@angular/material' as mat; -@import '../../../../../theme/variables.scss'; h3 { font-family: 'Google Sans', sans-serif; diff --git a/src/app/pages/translate/signed-to-spoken/upload/upload.component.ts b/src/app/pages/translate/signed-to-spoken/upload/upload.component.ts index 4fac7280..77f606cc 100644 --- a/src/app/pages/translate/signed-to-spoken/upload/upload.component.ts +++ b/src/app/pages/translate/signed-to-spoken/upload/upload.component.ts @@ -1,12 +1,16 @@ import {Component, Input} from '@angular/core'; import {Store} from '@ngxs/store'; import {SetVideo} from '../../../../core/modules/ngxs/store/video/video.actions'; +import {IonButton, IonIcon} from '@ionic/angular/standalone'; +import {addIcons} from 'ionicons'; +import {imagesOutline} from 'ionicons/icons'; @Component({ selector: 'app-upload', templateUrl: './upload.component.html', styleUrls: ['./upload.component.scss'], - standalone: false, + standalone: true, + imports: [IonButton, IonIcon], }) export class UploadComponent { @Input() isMobile = false; @@ -17,6 +21,8 @@ export class UploadComponent { this.uploadEl.setAttribute('type', 'file'); this.uploadEl.setAttribute('accept', 'video/*'); this.uploadEl.addEventListener('change', this.onFileUpload.bind(this)); + + addIcons({imagesOutline}); } upload(): void { diff --git a/src/app/pages/translate/signwriting/sign-writing.component.ts b/src/app/pages/translate/signwriting/sign-writing.component.ts index fd61037c..cbb8ca4b 100644 --- a/src/app/pages/translate/signwriting/sign-writing.component.ts +++ b/src/app/pages/translate/signwriting/sign-writing.component.ts @@ -1,4 +1,4 @@ -import {Component} from '@angular/core'; +import {Component, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'; import {fromEvent, Observable} from 'rxjs'; import {tap} from 'rxjs/operators'; import {SignWritingService} from '../../../modules/sign-writing/sign-writing.service'; @@ -7,12 +7,16 @@ import {SignWritingObj} from '../../../modules/translate/translate.state'; import {Store} from '@ngxs/store'; import {takeUntilDestroyed} from '@angular/core/rxjs-interop'; import {DescribeSignWritingSign} from '../../../modules/translate/translate.actions'; +import {IonProgressBar} from '@ionic/angular/standalone'; +import {MatTooltip} from '@angular/material/tooltip'; @Component({ selector: 'app-sign-writing', templateUrl: './sign-writing.component.html', styleUrls: ['./sign-writing.component.scss'], - standalone: false, + standalone: true, + imports: [IonProgressBar, MatTooltip], + schemas: [CUSTOM_ELEMENTS_SCHEMA], }) export class SignWritingComponent { signs$!: Observable; diff --git a/src/app/pages/translate/spoken-to-signed/signed-language-output/signed-language-output.component.ts b/src/app/pages/translate/spoken-to-signed/signed-language-output/signed-language-output.component.ts index f4e36dc9..f5205414 100644 --- a/src/app/pages/translate/spoken-to-signed/signed-language-output/signed-language-output.component.ts +++ b/src/app/pages/translate/spoken-to-signed/signed-language-output/signed-language-output.component.ts @@ -12,12 +12,34 @@ import { import {BaseComponent} from '../../../../components/base/base.component'; import {Capacitor} from '@capacitor/core'; import {getMediaSourceClass} from '../../pose-viewers/playable-video-encoder'; +import {ViewerSelectorComponent} from '../../pose-viewers/viewer-selector/viewer-selector.component'; +import {IonButton, IonIcon, IonSpinner} from '@ionic/angular/standalone'; +import {AvatarPoseViewerComponent} from '../../pose-viewers/avatar-pose-viewer/avatar-pose-viewer.component'; +import {SkeletonPoseViewerComponent} from '../../pose-viewers/skeleton-pose-viewer/skeleton-pose-viewer.component'; +import {HumanPoseViewerComponent} from '../../pose-viewers/human-pose-viewer/human-pose-viewer.component'; +import {TranslocoPipe} from '@ngneat/transloco'; +import {AsyncPipe} from '@angular/common'; +import {MatTooltip} from '@angular/material/tooltip'; +import {addIcons} from 'ionicons'; +import {downloadOutline, shareOutline} from 'ionicons/icons'; @Component({ selector: 'app-signed-language-output', templateUrl: './signed-language-output.component.html', styleUrls: ['./signed-language-output.component.scss'], - standalone: false, + standalone: true, + imports: [ + IonSpinner, + IonButton, + ViewerSelectorComponent, + AvatarPoseViewerComponent, + SkeletonPoseViewerComponent, + HumanPoseViewerComponent, + TranslocoPipe, + AsyncPipe, + MatTooltip, + IonIcon, + ], }) export class SignedLanguageOutputComponent extends BaseComponent implements OnInit { poseViewerSetting$!: Observable; @@ -36,6 +58,8 @@ export class SignedLanguageOutputComponent extends BaseComponent implements OnIn this.video$ = this.store.select(state => state.translate.signedLanguageVideo); this.isSharingSupported = Capacitor.isNativePlatform() || ('navigator' in globalThis && 'share' in navigator); + + addIcons({downloadOutline, shareOutline}); } ngOnInit(): void { diff --git a/src/app/pages/translate/spoken-to-signed/spoken-language-input/desktop-textarea/desktop-textarea.component.ts b/src/app/pages/translate/spoken-to-signed/spoken-language-input/desktop-textarea/desktop-textarea.component.ts index 930ab27f..cd1612f3 100644 --- a/src/app/pages/translate/spoken-to-signed/spoken-language-input/desktop-textarea/desktop-textarea.component.ts +++ b/src/app/pages/translate/spoken-to-signed/spoken-language-input/desktop-textarea/desktop-textarea.component.ts @@ -1,13 +1,15 @@ import {Component, ElementRef, Input, ViewChild} from '@angular/core'; -import {FormControl} from '@angular/forms'; +import {FormControl, ReactiveFormsModule} from '@angular/forms'; import {Observable} from 'rxjs'; import {Store} from '@ngxs/store'; +import {AsyncPipe} from '@angular/common'; @Component({ selector: 'app-desktop-textarea', templateUrl: './desktop-textarea.component.html', styleUrl: './desktop-textarea.component.scss', - standalone: false, + standalone: true, + imports: [ReactiveFormsModule, AsyncPipe], }) export class DesktopTextareaComponent { @Input() maxLength: number; diff --git a/src/app/pages/translate/spoken-to-signed/spoken-language-input/spoken-language-input.component.ts b/src/app/pages/translate/spoken-to-signed/spoken-language-input/spoken-language-input.component.ts index a536bc24..8f2fa195 100644 --- a/src/app/pages/translate/spoken-to-signed/spoken-language-input/spoken-language-input.component.ts +++ b/src/app/pages/translate/spoken-to-signed/spoken-language-input/spoken-language-input.component.ts @@ -1,5 +1,5 @@ import {Component, Input, OnInit} from '@angular/core'; -import {FormControl} from '@angular/forms'; +import {FormControl, ReactiveFormsModule} from '@angular/forms'; import {debounce, distinctUntilChanged, skipWhile, takeUntil, tap} from 'rxjs/operators'; import {interval, Observable} from 'rxjs'; import { @@ -10,12 +10,34 @@ import { import {Store} from '@ngxs/store'; import {TranslateStateModel} from '../../../../modules/translate/translate.state'; import {BaseComponent} from '../../../../components/base/base.component'; +import {IonButton, IonButtons, IonIcon, IonTextarea, IonToolbar} from '@ionic/angular/standalone'; +import {SpeechToTextComponent} from '../../../../components/speech-to-text/speech-to-text.component'; +import {TranslocoPipe} from '@ngneat/transloco'; +import {addIcons} from 'ionicons'; +import {addOutline, sparkles} from 'ionicons/icons'; +import {AsyncPipe, DecimalPipe} from '@angular/common'; +import {TextToSpeechComponent} from '../../../../components/text-to-speech/text-to-speech.component'; +import {DesktopTextareaComponent} from './desktop-textarea/desktop-textarea.component'; @Component({ selector: 'app-spoken-language-input', templateUrl: './spoken-language-input.component.html', styleUrls: ['./spoken-language-input.component.scss'], - standalone: false, + standalone: true, + imports: [ + IonToolbar, + IonButtons, + IonButton, + IonIcon, + IonTextarea, + DesktopTextareaComponent, + SpeechToTextComponent, + ReactiveFormsModule, + TranslocoPipe, + DecimalPipe, + TextToSpeechComponent, + AsyncPipe, + ], }) export class SpokenLanguageInputComponent extends BaseComponent implements OnInit { translate$!: Observable; @@ -34,6 +56,8 @@ export class SpokenLanguageInputComponent extends BaseComponent implements OnIni this.translate$ = this.store.select(state => state.translate); this.text$ = this.store.select(state => state.translate.spokenLanguageText); this.normalizedText$ = this.store.select(state => state.translate.normalizedSpokenLanguageText); + + addIcons({sparkles, addOutline}); } ngOnInit() { diff --git a/src/app/pages/translate/spoken-to-signed/spoken-to-signed.component.ts b/src/app/pages/translate/spoken-to-signed/spoken-to-signed.component.ts index fa4bd90a..690923fc 100644 --- a/src/app/pages/translate/spoken-to-signed/spoken-to-signed.component.ts +++ b/src/app/pages/translate/spoken-to-signed/spoken-to-signed.component.ts @@ -1,9 +1,13 @@ import {Component} from '@angular/core'; +import {SpokenLanguageInputComponent} from './spoken-language-input/spoken-language-input.component'; +import {SignWritingComponent} from '../signwriting/sign-writing.component'; +import {SignedLanguageOutputComponent} from './signed-language-output/signed-language-output.component'; @Component({ selector: 'app-spoken-to-signed', templateUrl: './spoken-to-signed.component.html', styleUrls: ['./spoken-to-signed.component.scss'], - standalone: false, + standalone: true, + imports: [SpokenLanguageInputComponent, SignWritingComponent, SignedLanguageOutputComponent], }) export class SpokenToSignedComponent {} diff --git a/src/app/pages/translate/translate-desktop/translate-desktop.component.ts b/src/app/pages/translate/translate-desktop/translate-desktop.component.ts index fb0c095a..04515c11 100644 --- a/src/app/pages/translate/translate-desktop/translate-desktop.component.ts +++ b/src/app/pages/translate/translate-desktop/translate-desktop.component.ts @@ -3,12 +3,38 @@ import {Observable} from 'rxjs'; import {Store} from '@ngxs/store'; import {takeUntil, tap} from 'rxjs/operators'; import {BaseComponent} from '../../../components/base/base.component'; +import {IonButtons, IonContent, IonHeader, IonTitle, IonToolbar} from '@ionic/angular/standalone'; +import {SignedLanguageInputComponent} from '../signed-to-spoken/signed-language-input/signed-language-input.component'; +import {TranslateInputButtonComponent} from '../input/button/button.component'; +import {LanguageSelectorsComponent} from '../language-selectors/language-selectors.component'; +import {SendFeedbackComponent} from '../send-feedback/send-feedback.component'; +import {TranslocoPipe} from '@ngneat/transloco'; +import {NtkmeButtonModule} from '@ctrl/ngx-github-buttons'; +import {SpokenToSignedComponent} from '../spoken-to-signed/spoken-to-signed.component'; +import {SignedToSpokenComponent} from '../signed-to-spoken/signed-to-spoken.component'; +import {DropPoseFileComponent} from '../drop-pose-file/drop-pose-file.component'; @Component({ selector: 'app-translate-desktop', templateUrl: './translate-desktop.component.html', styleUrls: ['./translate-desktop.component.scss'], - standalone: false, + standalone: true, + imports: [ + IonHeader, + IonToolbar, + IonButtons, + IonContent, + IonTitle, + TranslateInputButtonComponent, + LanguageSelectorsComponent, + SendFeedbackComponent, + TranslocoPipe, + SignedLanguageInputComponent, + NtkmeButtonModule, + SpokenToSignedComponent, + SignedToSpokenComponent, + DropPoseFileComponent, + ], }) export class TranslateDesktopComponent extends BaseComponent implements OnInit { spokenToSigned$: Observable; diff --git a/src/app/pages/translate/translate-mobile/translate-mobile.component.ts b/src/app/pages/translate/translate-mobile/translate-mobile.component.ts index e9efcfa9..6b3eeaf1 100644 --- a/src/app/pages/translate/translate-mobile/translate-mobile.component.ts +++ b/src/app/pages/translate/translate-mobile/translate-mobile.component.ts @@ -1,12 +1,29 @@ import {Component} from '@angular/core'; import {Store} from '@ngxs/store'; import {TranslateDesktopComponent} from '../translate-desktop/translate-desktop.component'; +import {IonContent, IonFooter, IonHeader, IonToolbar} from '@ionic/angular/standalone'; +import {SpokenLanguageInputComponent} from '../spoken-to-signed/spoken-language-input/spoken-language-input.component'; +import {SignedLanguageOutputComponent} from '../spoken-to-signed/signed-language-output/signed-language-output.component'; +import {SignedLanguageInputComponent} from '../signed-to-spoken/signed-language-input/signed-language-input.component'; +import {VideoComponent} from '../../../components/video/video.component'; +import {LanguageSelectorsComponent} from '../language-selectors/language-selectors.component'; @Component({ selector: 'app-translate-mobile', templateUrl: './translate-mobile.component.html', styleUrls: ['./translate-mobile.component.scss'], - standalone: false, + standalone: true, + imports: [ + IonContent, + IonHeader, + IonToolbar, + IonFooter, + SignedLanguageOutputComponent, + SignedLanguageInputComponent, + SpokenLanguageInputComponent, + VideoComponent, + LanguageSelectorsComponent, + ], }) export class TranslateMobileComponent extends TranslateDesktopComponent { constructor(store: Store) { diff --git a/src/app/pages/translate/translate.component.ts b/src/app/pages/translate/translate.component.ts index 7d331c9c..94a870f3 100644 --- a/src/app/pages/translate/translate.component.ts +++ b/src/app/pages/translate/translate.component.ts @@ -8,12 +8,15 @@ import {TranslocoService} from '@ngneat/transloco'; import {TranslationService} from '../../modules/translate/translate.service'; import {Meta, Title} from '@angular/platform-browser'; import {MediaMatcher} from '@angular/cdk/layout'; +import {TranslateMobileComponent} from './translate-mobile/translate-mobile.component'; +import {TranslateDesktopComponent} from './translate-desktop/translate-desktop.component'; @Component({ selector: 'app-translate', templateUrl: './translate.component.html', styleUrls: ['./translate.component.scss'], - standalone: false, + standalone: true, + imports: [TranslateMobileComponent, TranslateDesktopComponent], }) export class TranslateComponent extends BaseComponent implements OnInit { spokenToSigned$: Observable; diff --git a/src/theme/ionic.scss b/src/theme/ionic.scss index f6e94e49..780b9eaa 100644 --- a/src/theme/ionic.scss +++ b/src/theme/ionic.scss @@ -10,20 +10,20 @@ */ /* Core CSS required for Ionic components to work properly */ -@import '@ionic/angular/css/core.css'; +@forward '@ionic/angular/css/core.css'; /* Basic CSS for apps built with Ionic */ -@import '@ionic/angular/css/normalize.css'; -@import '@ionic/angular/css/structure.css'; -@import '@ionic/angular/css/typography.css'; -@import '@ionic/angular/css/display.css'; +@forward '@ionic/angular/css/normalize.css'; +@forward '@ionic/angular/css/structure.css'; +@forward '@ionic/angular/css/typography.css'; +@forward '@ionic/angular/css/display.css'; /* Optional CSS utils that can be commented out */ -@import '@ionic/angular/css/padding.css'; -@import '@ionic/angular/css/float-elements.css'; -@import '@ionic/angular/css/text-alignment.css'; -@import '@ionic/angular/css/text-transformation.css'; -@import '@ionic/angular/css/flex-utils.css'; +@forward '@ionic/angular/css/padding.css'; +@forward '@ionic/angular/css/float-elements.css'; +@forward '@ionic/angular/css/text-alignment.css'; +@forward '@ionic/angular/css/text-transformation.css'; +@forward '@ionic/angular/css/flex-utils.css'; ion-button.circle-icon { /* To make the button circle */ From b347fd1348cecc2688334adabb4d5d158cd93e2a Mon Sep 17 00:00:00 2001 From: Amit Moryossef Date: Thu, 21 Nov 2024 03:26:11 +0100 Subject: [PATCH 04/30] feat(angular19): convert components to standalone --- src/app/app.config.ts | 2 +- src/app/app.routes.ts | 13 ++++++++++++- .../speech-to-text/speech-to-text.component.ts | 4 ++-- .../text-to-speech/text-to-speech.component.ts | 3 ++- .../video-controls/video-controls.component.ts | 3 ++- src/app/components/video/video.component.ts | 4 ++-- src/app/modules/translate/translate.module.ts | 2 +- .../language-selector.component.ts | 5 ++--- .../human-pose-viewer.component.ts | 3 ++- .../viewer-selector/viewer-selector.component.ts | 3 ++- .../signed-to-spoken/upload/upload.component.ts | 3 ++- .../spoken-language-input.component.ts | 3 ++- .../translate-desktop.component.ts | 2 ++ src/app/pages/translate/translate.component.ts | 5 ++++- 14 files changed, 38 insertions(+), 17 deletions(-) diff --git a/src/app/app.config.ts b/src/app/app.config.ts index ee405fcc..db354f30 100644 --- a/src/app/app.config.ts +++ b/src/app/app.config.ts @@ -52,7 +52,7 @@ export const appConfig: ApplicationConfig = { // HTTP Requests provideHttpClient(withFetch()), - {provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true}, + {provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true}, // TODO withInterceptors ...AppTranslocoProviders, diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index e87b3916..965bb3c3 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -1,9 +1,20 @@ import {Routes} from '@angular/router'; import {NotFoundComponent} from './pages/not-found/not-found.component'; import {TranslateComponent} from './pages/translate/translate.component'; +import {provideStates} from '@ngxs/store'; +import {TranslateState} from './modules/translate/translate.state'; +import {LanguageDetectionService} from './modules/translate/language-detection/language-detection.service'; +import {MediaPipeLanguageDetectionService} from './modules/translate/language-detection/mediapipe.service'; export const routes: Routes = [ - {path: '', component: TranslateComponent}, + { + path: '', + component: TranslateComponent, + providers: [ + provideStates([TranslateState]), + {provide: LanguageDetectionService, useClass: MediaPipeLanguageDetectionService}, + ], + }, // {path: '', loadChildren: () => import('./pages/main.module').then(m => m.MainPageModule)}, // { // path: 'playground', diff --git a/src/app/components/speech-to-text/speech-to-text.component.ts b/src/app/components/speech-to-text/speech-to-text.component.ts index b11cf70a..3a206c94 100644 --- a/src/app/components/speech-to-text/speech-to-text.component.ts +++ b/src/app/components/speech-to-text/speech-to-text.component.ts @@ -3,7 +3,7 @@ import {fromEvent} from 'rxjs'; import {BaseComponent} from '../base/base.component'; import {MatTooltip, TooltipPosition} from '@angular/material/tooltip'; import {IonButton, IonIcon} from '@ionic/angular/standalone'; -import {TranslocoPipe} from '@ngneat/transloco'; +import {TranslocoDirective, TranslocoPipe} from '@ngneat/transloco'; import {addIcons} from 'ionicons'; import {micOutline, stopCircleOutline} from 'ionicons/icons'; @@ -12,7 +12,7 @@ import {micOutline, stopCircleOutline} from 'ionicons/icons'; templateUrl: './speech-to-text.component.html', styleUrls: ['./speech-to-text.component.css'], standalone: true, - imports: [IonButton, IonIcon, TranslocoPipe, MatTooltip], + imports: [IonButton, IonIcon, TranslocoPipe, MatTooltip, TranslocoDirective], }) export class SpeechToTextComponent extends BaseComponent implements OnInit, OnChanges { @Input() lang = 'en'; diff --git a/src/app/components/text-to-speech/text-to-speech.component.ts b/src/app/components/text-to-speech/text-to-speech.component.ts index 5864b7a8..525e3029 100644 --- a/src/app/components/text-to-speech/text-to-speech.component.ts +++ b/src/app/components/text-to-speech/text-to-speech.component.ts @@ -3,13 +3,14 @@ import {MatTooltip} from '@angular/material/tooltip'; import {IonButton, IonIcon} from '@ionic/angular/standalone'; import {addIcons} from 'ionicons'; import {stopCircleOutline, volumeMediumOutline, volumeMuteOutline} from 'ionicons/icons'; +import {TranslocoDirective} from '@ngneat/transloco'; @Component({ selector: 'app-text-to-speech', templateUrl: './text-to-speech.component.html', styleUrls: ['./text-to-speech.component.scss'], standalone: true, - imports: [MatTooltip, IonButton, IonIcon], + imports: [MatTooltip, IonButton, IonIcon, TranslocoDirective], }) export class TextToSpeechComponent implements OnInit, OnDestroy, OnChanges { @Input() lang = 'en'; diff --git a/src/app/components/video/video-controls/video-controls.component.ts b/src/app/components/video/video-controls/video-controls.component.ts index 30ee8a36..0985f8e5 100644 --- a/src/app/components/video/video-controls/video-controls.component.ts +++ b/src/app/components/video/video-controls/video-controls.component.ts @@ -6,13 +6,14 @@ import {AsyncPipe} from '@angular/common'; import {IonFab, IonFabButton, IonIcon} from '@ionic/angular/standalone'; import {addIcons} from 'ionicons'; import {videocamOffOutline, videocamOutline} from 'ionicons/icons'; +import {TranslocoDirective} from '@ngneat/transloco'; @Component({ selector: 'app-video-controls', templateUrl: './video-controls.component.html', styleUrls: ['./video-controls.component.scss'], standalone: true, - imports: [MatTooltip, AsyncPipe, IonFab, IonFabButton, IonIcon], + imports: [MatTooltip, AsyncPipe, IonFab, IonFabButton, IonIcon, TranslocoDirective], }) export class VideoControlsComponent extends BaseSettingsComponent { constructor(store: Store) { diff --git a/src/app/components/video/video.component.ts b/src/app/components/video/video.component.ts index 51b06bf6..bbe058f1 100644 --- a/src/app/components/video/video.component.ts +++ b/src/app/components/video/video.component.ts @@ -18,14 +18,14 @@ import {AnimationComponent} from '../animation/animation.component'; import {addIcons} from 'ionicons'; import {playCircleOutline} from 'ionicons/icons'; import {AsyncPipe} from '@angular/common'; -import {TranslocoPipe} from '@ngneat/transloco'; +import {TranslocoDirective, TranslocoPipe} from '@ngneat/transloco'; @Component({ selector: 'app-video', templateUrl: './video.component.html', styleUrls: ['./video.component.scss'], standalone: true, - imports: [AnimationComponent, VideoControlsComponent, IonIcon, AsyncPipe, TranslocoPipe], + imports: [AnimationComponent, VideoControlsComponent, IonIcon, AsyncPipe, TranslocoPipe, TranslocoDirective], }) export class VideoComponent extends BaseComponent implements AfterViewInit { settingsState$!: Observable; diff --git a/src/app/modules/translate/translate.module.ts b/src/app/modules/translate/translate.module.ts index 2b14c9c8..25ec7702 100644 --- a/src/app/modules/translate/translate.module.ts +++ b/src/app/modules/translate/translate.module.ts @@ -12,7 +12,7 @@ import {provideHttpClient, withInterceptorsFromDi} from '@angular/common/http'; TranslationService, SignWritingTranslationService, provideHttpClient(withInterceptorsFromDi()), - {provide: LanguageDetectionService, useClass: MediaPipeLanguageDetectionService}, + provideStore([TranslateState]), ], imports: [NgxsModule.forFeature([TranslateState])], }) diff --git a/src/app/pages/translate/language-selector/language-selector.component.ts b/src/app/pages/translate/language-selector/language-selector.component.ts index 35413368..d0714a28 100644 --- a/src/app/pages/translate/language-selector/language-selector.component.ts +++ b/src/app/pages/translate/language-selector/language-selector.component.ts @@ -1,12 +1,11 @@ import {Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges} from '@angular/core'; import {Store} from '@ngxs/store'; import {switchMap} from 'rxjs'; -import {TranslocoService} from '@ngneat/transloco'; +import {TranslocoDirective, TranslocoService} from '@ngneat/transloco'; import {filter, takeUntil, tap} from 'rxjs/operators'; import {BaseComponent} from '../../../components/base/base.component'; import {IANASignedLanguages} from '../../../core/helpers/iana/languages'; import {MatTab, MatTabGroup} from '@angular/material/tabs'; -import {IonicModule} from '@ionic/angular'; import {IonButton, IonIcon} from '@ionic/angular/standalone'; import {MatMenu, MatMenuTrigger} from '@angular/material/menu'; import {FlagIconComponent} from '../../../components/flag-icon/flag-icon.component'; @@ -20,7 +19,7 @@ const IntlTypeMap: {[key: string]: Intl.DisplayNamesType} = {languages: 'languag templateUrl: './language-selector.component.html', styleUrls: ['./language-selector.component.scss'], standalone: true, - imports: [MatTab, MatTabGroup, IonButton, IonIcon, MatMenuTrigger, FlagIconComponent, MatMenu], + imports: [MatTab, MatTabGroup, IonButton, IonIcon, MatMenuTrigger, FlagIconComponent, MatMenu, TranslocoDirective], }) export class LanguageSelectorComponent extends BaseComponent implements OnInit, OnChanges { detectedLanguage: string; diff --git a/src/app/pages/translate/pose-viewers/human-pose-viewer/human-pose-viewer.component.ts b/src/app/pages/translate/pose-viewers/human-pose-viewer/human-pose-viewer.component.ts index 02a50bce..11bd25af 100644 --- a/src/app/pages/translate/pose-viewers/human-pose-viewer/human-pose-viewer.component.ts +++ b/src/app/pages/translate/pose-viewers/human-pose-viewer/human-pose-viewer.component.ts @@ -8,13 +8,14 @@ import {transferableImage} from '../../../../core/helpers/image/transferable'; import {IonProgressBar, IonSpinner} from '@ionic/angular/standalone'; import {AsyncPipe} from '@angular/common'; import {MatTooltip} from '@angular/material/tooltip'; +import {TranslocoDirective} from '@ngneat/transloco'; @Component({ selector: 'app-human-pose-viewer', templateUrl: './human-pose-viewer.component.html', styleUrls: ['./human-pose-viewer.component.scss'], standalone: true, - imports: [IonProgressBar, IonSpinner, AsyncPipe, MatTooltip], + imports: [IonProgressBar, IonSpinner, AsyncPipe, MatTooltip, TranslocoDirective], schemas: [CUSTOM_ELEMENTS_SCHEMA], }) export class HumanPoseViewerComponent extends BasePoseViewerComponent implements AfterViewInit, OnDestroy { diff --git a/src/app/pages/translate/pose-viewers/viewer-selector/viewer-selector.component.ts b/src/app/pages/translate/pose-viewers/viewer-selector/viewer-selector.component.ts index 0c76da59..0105db09 100644 --- a/src/app/pages/translate/pose-viewers/viewer-selector/viewer-selector.component.ts +++ b/src/app/pages/translate/pose-viewers/viewer-selector/viewer-selector.component.ts @@ -7,6 +7,7 @@ import {IonFab, IonFabButton, IonFabList, IonIcon} from '@ionic/angular/standalo import {accessibility, gitCommit, logoApple} from 'ionicons/icons'; import {addIcons} from 'ionicons'; import {MatTooltip} from '@angular/material/tooltip'; +import {TranslocoDirective} from '@ngneat/transloco'; export interface MatFabMenu { id: string; @@ -19,7 +20,7 @@ export interface MatFabMenu { templateUrl: './viewer-selector.component.html', styleUrls: ['./viewer-selector.component.scss'], standalone: true, - imports: [IonFab, IonFabList, IonFabButton, IonIcon, MatTooltip], + imports: [IonFab, IonFabList, IonFabButton, IonIcon, MatTooltip, TranslocoDirective], }) export class ViewerSelectorComponent extends BaseSettingsComponent implements OnInit { poseViewerSetting$ = this.store.select(state => state.settings.poseViewer); diff --git a/src/app/pages/translate/signed-to-spoken/upload/upload.component.ts b/src/app/pages/translate/signed-to-spoken/upload/upload.component.ts index 77f606cc..d003718d 100644 --- a/src/app/pages/translate/signed-to-spoken/upload/upload.component.ts +++ b/src/app/pages/translate/signed-to-spoken/upload/upload.component.ts @@ -4,13 +4,14 @@ import {SetVideo} from '../../../../core/modules/ngxs/store/video/video.actions' import {IonButton, IonIcon} from '@ionic/angular/standalone'; import {addIcons} from 'ionicons'; import {imagesOutline} from 'ionicons/icons'; +import {TranslocoDirective} from '@ngneat/transloco'; @Component({ selector: 'app-upload', templateUrl: './upload.component.html', styleUrls: ['./upload.component.scss'], standalone: true, - imports: [IonButton, IonIcon], + imports: [IonButton, IonIcon, TranslocoDirective], }) export class UploadComponent { @Input() isMobile = false; diff --git a/src/app/pages/translate/spoken-to-signed/spoken-language-input/spoken-language-input.component.ts b/src/app/pages/translate/spoken-to-signed/spoken-language-input/spoken-language-input.component.ts index 8f2fa195..b7935c81 100644 --- a/src/app/pages/translate/spoken-to-signed/spoken-language-input/spoken-language-input.component.ts +++ b/src/app/pages/translate/spoken-to-signed/spoken-language-input/spoken-language-input.component.ts @@ -12,7 +12,7 @@ import {TranslateStateModel} from '../../../../modules/translate/translate.state import {BaseComponent} from '../../../../components/base/base.component'; import {IonButton, IonButtons, IonIcon, IonTextarea, IonToolbar} from '@ionic/angular/standalone'; import {SpeechToTextComponent} from '../../../../components/speech-to-text/speech-to-text.component'; -import {TranslocoPipe} from '@ngneat/transloco'; +import {TranslocoDirective, TranslocoPipe} from '@ngneat/transloco'; import {addIcons} from 'ionicons'; import {addOutline, sparkles} from 'ionicons/icons'; import {AsyncPipe, DecimalPipe} from '@angular/common'; @@ -37,6 +37,7 @@ import {DesktopTextareaComponent} from './desktop-textarea/desktop-textarea.comp DecimalPipe, TextToSpeechComponent, AsyncPipe, + TranslocoDirective, ], }) export class SpokenLanguageInputComponent extends BaseComponent implements OnInit { diff --git a/src/app/pages/translate/translate-desktop/translate-desktop.component.ts b/src/app/pages/translate/translate-desktop/translate-desktop.component.ts index 04515c11..598eab00 100644 --- a/src/app/pages/translate/translate-desktop/translate-desktop.component.ts +++ b/src/app/pages/translate/translate-desktop/translate-desktop.component.ts @@ -13,6 +13,7 @@ import {NtkmeButtonModule} from '@ctrl/ngx-github-buttons'; import {SpokenToSignedComponent} from '../spoken-to-signed/spoken-to-signed.component'; import {SignedToSpokenComponent} from '../signed-to-spoken/signed-to-spoken.component'; import {DropPoseFileComponent} from '../drop-pose-file/drop-pose-file.component'; +import {MatTooltip} from '@angular/material/tooltip'; @Component({ selector: 'app-translate-desktop', @@ -34,6 +35,7 @@ import {DropPoseFileComponent} from '../drop-pose-file/drop-pose-file.component' SpokenToSignedComponent, SignedToSpokenComponent, DropPoseFileComponent, + MatTooltip, ], }) export class TranslateDesktopComponent extends BaseComponent implements OnInit { diff --git a/src/app/pages/translate/translate.component.ts b/src/app/pages/translate/translate.component.ts index 94a870f3..86ac8b6f 100644 --- a/src/app/pages/translate/translate.component.ts +++ b/src/app/pages/translate/translate.component.ts @@ -1,5 +1,5 @@ import {Component, OnInit} from '@angular/core'; -import {Store} from '@ngxs/store'; +import {provideStates, provideStore, Store} from '@ngxs/store'; import {SetSetting} from '../../modules/settings/settings.actions'; import {fromEvent, Observable} from 'rxjs'; import {BaseComponent} from '../../components/base/base.component'; @@ -10,6 +10,9 @@ import {Meta, Title} from '@angular/platform-browser'; import {MediaMatcher} from '@angular/cdk/layout'; import {TranslateMobileComponent} from './translate-mobile/translate-mobile.component'; import {TranslateDesktopComponent} from './translate-desktop/translate-desktop.component'; +import {TranslateState} from '../../modules/translate/translate.state'; +import {LanguageDetectionService} from '../../modules/translate/language-detection/language-detection.service'; +import {MediaPipeLanguageDetectionService} from '../../modules/translate/language-detection/mediapipe.service'; @Component({ selector: 'app-translate', From 37e04921c5bd2c3f43f3ae044d357070639805c4 Mon Sep 17 00:00:00 2001 From: Amit Moryossef Date: Sat, 23 Nov 2024 22:21:15 +0100 Subject: [PATCH 05/30] fix(angular19): app runs! --- src/app/app.config.server.ts | 4 +- src/app/app.config.ts | 7 ++- src/app/app.routes.ts | 4 +- .../flag-icon/flag-icon.component.scss | 46 +++++++++++++++++-- .../speech-to-text.component.ts | 2 +- .../modules/transloco/transloco.module.ts | 2 +- src/app/modules/translate/translate.module.ts | 6 +-- .../about/about-api/about-api.component.scss | 4 +- .../about-benefits.component.scss | 16 +++---- .../about-customers.component.scss | 6 +-- .../about-direction.component.scss | 4 +- .../about/about-faq/about-faq.component.scss | 4 +- .../about-hero/about-hero.component.scss | 10 ++-- .../about-team/about-team.component.scss | 4 +- .../pages/landing/about/about.component.scss | 4 +- .../contribute/contribute.component.scss | 2 +- .../landing-footer.component.scss | 4 +- src/app/pages/landing/landing.component.scss | 4 +- .../input/button/button.component.ts | 5 +- .../language-selector.component.scss | 4 +- .../language-selector.component.ts | 8 ++-- .../language-selectors.component.ts | 3 +- .../viewer-selector.component.ts | 12 ++--- .../send-feedback.component.scss | 4 +- .../signed-to-spoken.component.scss | 6 +-- .../upload/upload.component.scss | 5 +- .../signwriting/sign-writing.component.html | 2 +- .../signed-language-output.component.scss | 4 +- .../spoken-to-signed.component.scss | 6 +-- .../translate-desktop.component.scss | 14 +++--- .../translate-desktop.component.ts | 6 ++- .../{variables.scss => breakpoints.scss} | 0 32 files changed, 128 insertions(+), 84 deletions(-) rename src/theme/{variables.scss => breakpoints.scss} (100%) diff --git a/src/app/app.config.server.ts b/src/app/app.config.server.ts index c217a736..7263c8e7 100644 --- a/src/app/app.config.server.ts +++ b/src/app/app.config.server.ts @@ -3,7 +3,9 @@ import {provideServerRendering} from '@angular/platform-server'; import {appConfig} from './app.config'; const serverConfig: ApplicationConfig = { - providers: [provideServerRendering()], + providers: [ + // provideServerRendering() TODO! + ], }; export const config = mergeApplicationConfig(appConfig, serverConfig); diff --git a/src/app/app.config.ts b/src/app/app.config.ts index db354f30..cfcb2556 100644 --- a/src/app/app.config.ts +++ b/src/app/app.config.ts @@ -5,7 +5,7 @@ import {routes} from './app.routes'; import {provideClientHydration, withEventReplay} from '@angular/platform-browser'; import {NavigatorService} from './core/services/navigator/navigator.service'; import {IonicRouteStrategy} from '@ionic/angular'; -import {HTTP_INTERCEPTORS, provideHttpClient, withFetch} from '@angular/common/http'; +import {HTTP_INTERCEPTORS, provideHttpClient, withFetch, withInterceptorsFromDi} from '@angular/common/http'; import {TokenInterceptor} from './core/services/http/token-interceptor.service'; import {AppTranslocoProviders} from './core/modules/transloco/transloco.module'; import {NgxsModuleOptions, provideStore} from '@ngxs/store'; @@ -14,6 +14,8 @@ import {environment} from '../environments/environment'; import {provideServiceWorker} from '@angular/service-worker'; import {provideIonicAngular} from '@ionic/angular/standalone'; import {isSafari} from './core/constants'; +import {TranslateState} from './modules/translate/translate.state'; +import {provideAnimations} from '@angular/platform-browser/animations'; export const ngxsConfig: NgxsModuleOptions = { developmentMode: !environment.production, @@ -39,6 +41,7 @@ export const appConfig: ApplicationConfig = { // Ionic theme provideIonicAngular({mode: isSafari ? 'ios' : 'md'}), + provideAnimations(), // Service Worker provideServiceWorker('ngsw-worker.js', { @@ -51,7 +54,7 @@ export const appConfig: ApplicationConfig = { NavigatorService, // HTTP Requests - provideHttpClient(withFetch()), + provideHttpClient(withFetch(), withInterceptorsFromDi()), {provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true}, // TODO withInterceptors ...AppTranslocoProviders, diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index 965bb3c3..ebe2b5c9 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -1,7 +1,7 @@ import {Routes} from '@angular/router'; import {NotFoundComponent} from './pages/not-found/not-found.component'; import {TranslateComponent} from './pages/translate/translate.component'; -import {provideStates} from '@ngxs/store'; +import {provideStates, provideStore} from '@ngxs/store'; import {TranslateState} from './modules/translate/translate.state'; import {LanguageDetectionService} from './modules/translate/language-detection/language-detection.service'; import {MediaPipeLanguageDetectionService} from './modules/translate/language-detection/mediapipe.service'; @@ -11,7 +11,7 @@ export const routes: Routes = [ path: '', component: TranslateComponent, providers: [ - provideStates([TranslateState]), + provideStore([TranslateState]), {provide: LanguageDetectionService, useClass: MediaPipeLanguageDetectionService}, ], }, diff --git a/src/app/components/flag-icon/flag-icon.component.scss b/src/app/components/flag-icon/flag-icon.component.scss index c86c0931..e7a5f5dd 100644 --- a/src/app/components/flag-icon/flag-icon.component.scss +++ b/src/app/components/flag-icon/flag-icon.component.scss @@ -5,6 +5,46 @@ span { margin-inline-end: 0.5em; } +// fib and fi are copied from the flag-icons package +.fib { + background-size: contain; + background-position: 50%; + background-repeat: no-repeat; +} + +.fi { + @extend .fib; + position: relative; + display: inline-block; + width: 1.333333 * 1em; + line-height: 1em; + + &:before { + content: '\00a0'; + } + + &.fis { + width: 1em; + } +} + +$flag-icons-path: '/assets/flags'; +$flag-icons-rect-path: '/4x3'; +$flag-icons-square-path: '/1x1'; +$flag-icons-use-square: true; + +@mixin flag-icon($country) { + .fi-#{$country} { + background-image: url(#{$flag-icons-path}#{$flag-icons-rect-path}/#{$country}.svg); + + @if $flag-icons-use-square { + &.fis { + background-image: url(#{$flag-icons-path}#{$flag-icons-square-path}/#{$country}.svg); + } + } + } +} + /* TODO read from some file? supported languages */ $flag-icons-included-countries: ( 'sy', @@ -50,6 +90,6 @@ $flag-icons-included-countries: ( 'pk', 'ils' ); -$flag-icons-path: '/assets/flags'; - -@import 'flag-icons/sass/flag-icons'; +@each $country in $flag-icons-included-countries { + @include flag-icon($country); +} diff --git a/src/app/components/speech-to-text/speech-to-text.component.ts b/src/app/components/speech-to-text/speech-to-text.component.ts index 3a206c94..4ac7bd1e 100644 --- a/src/app/components/speech-to-text/speech-to-text.component.ts +++ b/src/app/components/speech-to-text/speech-to-text.component.ts @@ -12,7 +12,7 @@ import {micOutline, stopCircleOutline} from 'ionicons/icons'; templateUrl: './speech-to-text.component.html', styleUrls: ['./speech-to-text.component.css'], standalone: true, - imports: [IonButton, IonIcon, TranslocoPipe, MatTooltip, TranslocoDirective], + imports: [IonButton, IonIcon, MatTooltip, TranslocoDirective], }) export class SpeechToTextComponent extends BaseComponent implements OnInit, OnChanges { @Input() lang = 'en'; diff --git a/src/app/core/modules/transloco/transloco.module.ts b/src/app/core/modules/transloco/transloco.module.ts index ca5e578e..a5f3bb2e 100644 --- a/src/app/core/modules/transloco/transloco.module.ts +++ b/src/app/core/modules/transloco/transloco.module.ts @@ -11,7 +11,7 @@ export const AppTranslocoProviders = [ defaultLang: 'en', fallbackLang: 'en', reRenderOnLangChange: true, - prodMode: !isDevMode(), + prodMode: true, // TODO !isDevMode(), missingHandler: { // It will use the first language set in the `fallbackLang` property useFallbackTranslation: true, diff --git a/src/app/modules/translate/translate.module.ts b/src/app/modules/translate/translate.module.ts index 25ec7702..50e123a0 100644 --- a/src/app/modules/translate/translate.module.ts +++ b/src/app/modules/translate/translate.module.ts @@ -1,10 +1,8 @@ import {NgModule} from '@angular/core'; -import {NgxsModule} from '@ngxs/store'; +import {NgxsModule, provideStore} from '@ngxs/store'; import {TranslateState} from './translate.state'; import {TranslationService} from './translate.service'; import {SignWritingTranslationService} from './signwriting-translation.service'; -import {LanguageDetectionService} from './language-detection/language-detection.service'; -import {MediaPipeLanguageDetectionService} from './language-detection/mediapipe.service'; import {provideHttpClient, withInterceptorsFromDi} from '@angular/common/http'; @NgModule({ @@ -12,7 +10,7 @@ import {provideHttpClient, withInterceptorsFromDi} from '@angular/common/http'; TranslationService, SignWritingTranslationService, provideHttpClient(withInterceptorsFromDi()), - provideStore([TranslateState]), + // provideStore([TranslateState]), ], imports: [NgxsModule.forFeature([TranslateState])], }) diff --git a/src/app/pages/landing/about/about-api/about-api.component.scss b/src/app/pages/landing/about/about-api/about-api.component.scss index 03570003..5722e915 100644 --- a/src/app/pages/landing/about/about-api/about-api.component.scss +++ b/src/app/pages/landing/about/about-api/about-api.component.scss @@ -1,4 +1,4 @@ -@import '../../../../../theme/variables'; +@use '../../../../../theme/breakpoints' as breakpoints; .cards-container { border-radius: 14px; @@ -15,7 +15,7 @@ background: var(--ion-color-light); display: flex; align-items: center; - @media #{$breakpoint-lt-sm} { + @media #{breakpoints.$breakpoint-lt-sm} { max-width: 512px; } } diff --git a/src/app/pages/landing/about/about-benefits/about-benefits.component.scss b/src/app/pages/landing/about/about-benefits/about-benefits.component.scss index 4089db7b..5a51e741 100644 --- a/src/app/pages/landing/about/about-benefits/about-benefits.component.scss +++ b/src/app/pages/landing/about/about-benefits/about-benefits.component.scss @@ -1,4 +1,4 @@ -@import '../../../../../theme/variables'; +@use '../../../../../theme/breakpoints' as breakpoints; h2 { text-align: center; @@ -18,7 +18,7 @@ p.subtitle { } ion-card { - @media #{$breakpoint-gt-sm} { + @media #{breakpoints.$breakpoint-gt-sm} { display: flex; } align-items: center; @@ -74,13 +74,13 @@ ion-card-content { max-width: 100%; padding: 0; - @media #{$breakpoint-lt-md} { + @media #{breakpoints.$breakpoint-lt-md} { flex-direction: column; } .info { padding: 64px; - @media #{$breakpoint-lt-md} { + @media #{breakpoints.$breakpoint-lt-md} { padding: 32px; } } @@ -92,7 +92,7 @@ ion-card-content { flex-shrink: 0; flex-grow: 1; - @media #{$breakpoint-lt-md} { + @media #{breakpoints.$breakpoint-lt-md} { height: auto; width: 100%; } @@ -100,7 +100,7 @@ ion-card-content { .phone-screenshot { max-width: calc(100% - 64px); margin: auto; - @media #{$breakpoint-gt-sm} { + @media #{breakpoints.$breakpoint-gt-sm} { max-width: 350px; margin-top: 64px; margin-inline-end: 32px; @@ -110,7 +110,7 @@ ion-card-content { .github-screenshot { margin: 32px; max-width: calc(100% - 64px); - @media #{$breakpoint-gt-sm} { + @media #{breakpoints.$breakpoint-gt-sm} { margin: 64px; } } @@ -131,7 +131,7 @@ ion-card-content { app-lazy-map { height: 100%; display: block; - @media #{$breakpoint-gt-sm} { + @media #{breakpoints.$breakpoint-gt-sm} { aspect-ratio: 1 / 1; } } diff --git a/src/app/pages/landing/about/about-customers/about-customers.component.scss b/src/app/pages/landing/about/about-customers/about-customers.component.scss index 5cb4445f..e204c530 100644 --- a/src/app/pages/landing/about/about-customers/about-customers.component.scss +++ b/src/app/pages/landing/about/about-customers/about-customers.component.scss @@ -1,4 +1,4 @@ -@import '../../../../../theme/variables'; +@use '../../../../../theme/breakpoints' as breakpoints; .container { display: flex; @@ -7,7 +7,7 @@ flex: 1; } - @media #{$breakpoint-lt-sm} { + @media #{breakpoints.$breakpoint-lt-sm} { display: initial; text-align: center; } @@ -51,7 +51,7 @@ ion-item { backdrop-filter: blur(10.2px); border: 1px solid rgba(255, 255, 255, 0.3); - @media #{$breakpoint-lt-sm} { + @media #{breakpoints.$breakpoint-lt-sm} { max-width: none; margin-top: revert-layer; } diff --git a/src/app/pages/landing/about/about-direction/about-direction.component.scss b/src/app/pages/landing/about/about-direction/about-direction.component.scss index 086019d6..cadd1e53 100644 --- a/src/app/pages/landing/about/about-direction/about-direction.component.scss +++ b/src/app/pages/landing/about/about-direction/about-direction.component.scss @@ -1,4 +1,4 @@ -@import '../../../../../theme/variables'; +@use '../../../../../theme/breakpoints' as breakpoints; #direction-grid { display: grid; @@ -12,7 +12,7 @@ max-width: 1920px; - @media #{$breakpoint-lt-md} { + @media #{breakpoints.$breakpoint-lt-md} { grid-template-areas: 'title title' 'img1 img2'; diff --git a/src/app/pages/landing/about/about-faq/about-faq.component.scss b/src/app/pages/landing/about/about-faq/about-faq.component.scss index 2af6b022..d546f3e7 100644 --- a/src/app/pages/landing/about/about-faq/about-faq.component.scss +++ b/src/app/pages/landing/about/about-faq/about-faq.component.scss @@ -1,4 +1,4 @@ -@import '../../../../../theme/variables'; +@use '../../../../../theme/breakpoints' as breakpoints; .container { display: grid; @@ -9,7 +9,7 @@ 'header content' 'footer content'; - @media #{$breakpoint-lt-md} { + @media #{breakpoints.$breakpoint-lt-md} { display: initial; } } diff --git a/src/app/pages/landing/about/about-hero/about-hero.component.scss b/src/app/pages/landing/about/about-hero/about-hero.component.scss index 9344a41e..65af69ca 100644 --- a/src/app/pages/landing/about/about-hero/about-hero.component.scss +++ b/src/app/pages/landing/about/about-hero/about-hero.component.scss @@ -1,7 +1,7 @@ -@import '../../../../../theme/variables'; +@use '../../../../../theme/breakpoints' as breakpoints; :host { - @media #{$breakpoint-gt-sm} { + @media #{breakpoints.$breakpoint-gt-sm} { padding: 200px 50px !important; } } @@ -17,7 +17,7 @@ max-width: 1200px; - @media #{$breakpoint-lt-md} { + @media #{breakpoints.$breakpoint-lt-md} { grid-auto-flow: row; } } @@ -25,11 +25,11 @@ h1 { font-size: 3em; - @media #{$breakpoint-lt-md} { + @media #{breakpoints.$breakpoint-lt-md} { font-size: 2.5em; } - @media #{$breakpoint-lt-sm} { + @media #{breakpoints.$breakpoint-lt-sm} { font-size: 2em; } diff --git a/src/app/pages/landing/about/about-team/about-team.component.scss b/src/app/pages/landing/about/about-team/about-team.component.scss index 1e9c0ac7..17b7cc9c 100644 --- a/src/app/pages/landing/about/about-team/about-team.component.scss +++ b/src/app/pages/landing/about/about-team/about-team.component.scss @@ -1,4 +1,4 @@ -@import '../../../../../theme/variables'; +@use '../../../../../theme/breakpoints' as breakpoints; .container { text-align: center; @@ -13,7 +13,7 @@ ion-card { max-width: 280px; text-align: center; border-radius: 16px; - @media #{$breakpoint-lt-md} { + @media #{breakpoints.$breakpoint-lt-md} { margin-left: auto; margin-right: auto; } diff --git a/src/app/pages/landing/about/about.component.scss b/src/app/pages/landing/about/about.component.scss index 69bb40e6..c451a87f 100644 --- a/src/app/pages/landing/about/about.component.scss +++ b/src/app/pages/landing/about/about.component.scss @@ -1,11 +1,11 @@ -@import '../../../../theme/variables'; +@use '../../../../theme/breakpoints' as breakpoints; :host > * { display: block; padding: 50px; padding-top: 0; - @media #{$breakpoint-lt-md} { + @media #{breakpoints.$breakpoint-lt-md} { padding: 50px 25px; } } diff --git a/src/app/pages/landing/contribute/contribute.component.scss b/src/app/pages/landing/contribute/contribute.component.scss index 4759494d..f78c5b57 100644 --- a/src/app/pages/landing/contribute/contribute.component.scss +++ b/src/app/pages/landing/contribute/contribute.component.scss @@ -1,4 +1,4 @@ -@import '../../../../theme/variables'; +@use '../../../../theme/breakpoints' as breakpoints; :host { padding: 34px 0; diff --git a/src/app/pages/landing/landing-footer/landing-footer.component.scss b/src/app/pages/landing/landing-footer/landing-footer.component.scss index a9c06443..61a7f428 100644 --- a/src/app/pages/landing/landing-footer/landing-footer.component.scss +++ b/src/app/pages/landing/landing-footer/landing-footer.component.scss @@ -1,4 +1,4 @@ -@import '../../../../theme/variables'; +@use '../../../../theme/breakpoints' as breakpoints; footer { background-color: #141518; @@ -13,7 +13,7 @@ footer { gap: 32px; grid-template-areas: 'brand legal social'; - @media #{$breakpoint-lt-sm} { + @media #{breakpoints.$breakpoint-lt-sm} { grid-template-columns: 1fr auto; grid-template-rows: 1fr 1fr; grid-template-areas: diff --git a/src/app/pages/landing/landing.component.scss b/src/app/pages/landing/landing.component.scss index 3940ef4f..a6131bd5 100644 --- a/src/app/pages/landing/landing.component.scss +++ b/src/app/pages/landing/landing.component.scss @@ -1,9 +1,9 @@ -@import '../../../theme/variables'; +@use '../../../theme/breakpoints' as breakpoints; :host ::ng-deep { .cards-container { display: flex; - @media #{$breakpoint-lt-md} { + @media #{breakpoints.$breakpoint-lt-md} { flex-direction: column; } } diff --git a/src/app/pages/translate/input/button/button.component.ts b/src/app/pages/translate/input/button/button.component.ts index 181aea01..404f1804 100644 --- a/src/app/pages/translate/input/button/button.component.ts +++ b/src/app/pages/translate/input/button/button.component.ts @@ -1,9 +1,8 @@ -import {Component, Input} from '@angular/core'; +import {Component, Input, OnInit} from '@angular/core'; import {InputMode} from '../../../../modules/translate/translate.state'; import {Store} from '@ngxs/store'; import {SetInputMode} from '../../../../modules/translate/translate.actions'; import {Observable} from 'rxjs'; -import {addIcons} from 'ionicons'; import {IonButton, IonIcon} from '@ionic/angular/standalone'; import {TranslocoPipe} from '@ngneat/transloco'; import {AsyncPipe} from '@angular/common'; @@ -23,8 +22,6 @@ export class TranslateInputButtonComponent { constructor(private store: Store) { this.inputMode$ = this.store.select(state => state.translate.inputMode); - - addIcons({[this.icon]: this.icon}); } setInputMode(): void { diff --git a/src/app/pages/translate/language-selector/language-selector.component.scss b/src/app/pages/translate/language-selector/language-selector.component.scss index d13ae603..08030d0d 100644 --- a/src/app/pages/translate/language-selector/language-selector.component.scss +++ b/src/app/pages/translate/language-selector/language-selector.component.scss @@ -1,4 +1,4 @@ -@import '../../../../theme/variables'; +@use '../../../../theme/breakpoints' as breakpoints; :host { display: flex; @@ -31,7 +31,7 @@ ion-button.menu-language-button { margin: 0; } -@media #{$breakpoint-lt-md} { +@media #{breakpoints.$breakpoint-lt-md} { ion-button.menu-icon-button, mat-tab-group { display: none; diff --git a/src/app/pages/translate/language-selector/language-selector.component.ts b/src/app/pages/translate/language-selector/language-selector.component.ts index d0714a28..a1a11cd3 100644 --- a/src/app/pages/translate/language-selector/language-selector.component.ts +++ b/src/app/pages/translate/language-selector/language-selector.component.ts @@ -5,12 +5,14 @@ import {TranslocoDirective, TranslocoService} from '@ngneat/transloco'; import {filter, takeUntil, tap} from 'rxjs/operators'; import {BaseComponent} from '../../../components/base/base.component'; import {IANASignedLanguages} from '../../../core/helpers/iana/languages'; -import {MatTab, MatTabGroup} from '@angular/material/tabs'; +import {MatTab, MatTabGroup, MatTabLabel, MatTabsModule} from '@angular/material/tabs'; import {IonButton, IonIcon} from '@ionic/angular/standalone'; -import {MatMenu, MatMenuTrigger} from '@angular/material/menu'; +import {MatMenu, MatMenuModule, MatMenuTrigger} from '@angular/material/menu'; import {FlagIconComponent} from '../../../components/flag-icon/flag-icon.component'; import {addIcons} from 'ionicons'; import {chevronDown} from 'ionicons/icons'; +import {BrowserAnimationsModule, NoopAnimationsModule, provideAnimations} from '@angular/platform-browser/animations'; +import {CommonModule} from '@angular/common'; const IntlTypeMap: {[key: string]: Intl.DisplayNamesType} = {languages: 'language', countries: 'region'}; @@ -19,7 +21,7 @@ const IntlTypeMap: {[key: string]: Intl.DisplayNamesType} = {languages: 'languag templateUrl: './language-selector.component.html', styleUrls: ['./language-selector.component.scss'], standalone: true, - imports: [MatTab, MatTabGroup, IonButton, IonIcon, MatMenuTrigger, FlagIconComponent, MatMenu, TranslocoDirective], + imports: [IonButton, IonIcon, MatMenuTrigger, FlagIconComponent, MatMenuModule, TranslocoDirective, MatTabsModule], }) export class LanguageSelectorComponent extends BaseComponent implements OnInit, OnChanges { detectedLanguage: string; diff --git a/src/app/pages/translate/language-selectors/language-selectors.component.ts b/src/app/pages/translate/language-selectors/language-selectors.component.ts index 89c2fab5..9ef12832 100644 --- a/src/app/pages/translate/language-selectors/language-selectors.component.ts +++ b/src/app/pages/translate/language-selectors/language-selectors.component.ts @@ -13,9 +13,10 @@ import {addIcons} from 'ionicons'; import {swapHorizontal} from 'ionicons/icons'; import {IonButton, IonIcon} from '@ionic/angular/standalone'; import {LanguageSelectorComponent} from '../language-selector/language-selector.component'; -import {AsyncPipe} from '@angular/common'; +import {AsyncPipe, CommonModule} from '@angular/common'; import {MatTooltip} from '@angular/material/tooltip'; import {TranslocoPipe} from '@ngneat/transloco'; +import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; @Component({ selector: 'app-language-selectors', diff --git a/src/app/pages/translate/pose-viewers/viewer-selector/viewer-selector.component.ts b/src/app/pages/translate/pose-viewers/viewer-selector/viewer-selector.component.ts index 0105db09..639db56b 100644 --- a/src/app/pages/translate/pose-viewers/viewer-selector/viewer-selector.component.ts +++ b/src/app/pages/translate/pose-viewers/viewer-selector/viewer-selector.component.ts @@ -4,7 +4,7 @@ import {Store} from '@ngxs/store'; import {PoseViewerSetting} from '../../../../modules/settings/settings.state'; import {takeUntil, tap} from 'rxjs/operators'; import {IonFab, IonFabButton, IonFabList, IonIcon} from '@ionic/angular/standalone'; -import {accessibility, gitCommit, logoApple} from 'ionicons/icons'; +import {accessibility, gitCommit, logoAppleAr} from 'ionicons/icons'; import {addIcons} from 'ionicons'; import {MatTooltip} from '@angular/material/tooltip'; import {TranslocoDirective} from '@ngneat/transloco'; @@ -26,9 +26,9 @@ export class ViewerSelectorComponent extends BaseSettingsComponent implements On poseViewerSetting$ = this.store.select(state => state.settings.poseViewer); buttons: MatFabMenu[] = [ - {id: 'pose', icon: gitCommit, color: 'light'}, - {id: 'avatar', icon: logoApple, color: 'primary'}, - {id: 'person', icon: accessibility, color: 'success'}, + {id: 'pose', icon: 'git-commit', color: 'light'}, + {id: 'avatar', icon: 'logo-apple-ar', color: 'primary'}, + {id: 'person', icon: 'accessibility', color: 'success'}, ]; fab: MatFabMenu; @@ -37,9 +37,7 @@ export class ViewerSelectorComponent extends BaseSettingsComponent implements On constructor(store: Store) { super(store); - for (const button of this.buttons) { - addIcons({[button.icon]: button.icon}); - } + addIcons({gitCommit, logoAppleAr, accessibility}); } ngOnInit(): void { diff --git a/src/app/pages/translate/send-feedback/send-feedback.component.scss b/src/app/pages/translate/send-feedback/send-feedback.component.scss index c88a1224..e1af3dec 100644 --- a/src/app/pages/translate/send-feedback/send-feedback.component.scss +++ b/src/app/pages/translate/send-feedback/send-feedback.component.scss @@ -1,4 +1,4 @@ -@import '../../../../theme/variables'; +@use '../../../../theme/breakpoints' as breakpoints; a { float: right; @@ -9,7 +9,7 @@ a { margin: 8px 0; text-decoration: none; - @media #{$breakpoint-lt-lg} { + @media #{breakpoints.$breakpoint-lt-lg} { padding: 0 12px; } } diff --git a/src/app/pages/translate/signed-to-spoken/signed-to-spoken.component.scss b/src/app/pages/translate/signed-to-spoken/signed-to-spoken.component.scss index 4f1e28bf..a59f0236 100644 --- a/src/app/pages/translate/signed-to-spoken/signed-to-spoken.component.scss +++ b/src/app/pages/translate/signed-to-spoken/signed-to-spoken.component.scss @@ -1,4 +1,4 @@ -@import '../../../../theme/variables'; +@use '../../../../theme/breakpoints' as breakpoints; :host { display: flex; @@ -10,7 +10,7 @@ grid-template-areas: 'signed spoken signwriting'; grid-template-columns: 50% 100px auto; - @media #{$breakpoint-lt-sm} { + @media #{breakpoints.$breakpoint-lt-sm} { grid-template-areas: 'signed signed' 'spoken signwriting'; grid-template-columns: 100px auto; } @@ -18,7 +18,7 @@ app-sign-writing { border-inline-end: 1px solid var(--app-divider-color); - @media #{$breakpoint-lt-sm} { + @media #{breakpoints.$breakpoint-lt-sm} { height: 235px; } } diff --git a/src/app/pages/translate/signed-to-spoken/upload/upload.component.scss b/src/app/pages/translate/signed-to-spoken/upload/upload.component.scss index 89ed22ea..a31c501a 100644 --- a/src/app/pages/translate/signed-to-spoken/upload/upload.component.scss +++ b/src/app/pages/translate/signed-to-spoken/upload/upload.component.scss @@ -1,4 +1,5 @@ @use '@angular/material' as mat; +@use 'sass:map'; h3 { font-family: 'Google Sans', sans-serif; @@ -9,14 +10,14 @@ h3 { } p { - color: map-get(mat.$m2-light-theme-foreground-palette, secondary-text); + color: map.get(mat.$m2-light-theme-foreground-palette, secondary-text); font-size: 14px; font-weight: 400; margin-top: 8px; margin-bottom: 26px; @media (prefers-color-scheme: dark) { - color: map-get(mat.$m2-dark-theme-foreground-palette, secondary-text); + color: map.get(mat.$m2-dark-theme-foreground-palette, secondary-text); } } diff --git a/src/app/pages/translate/signwriting/sign-writing.component.html b/src/app/pages/translate/signwriting/sign-writing.component.html index 63f80806..f36e1e55 100644 --- a/src/app/pages/translate/signwriting/sign-writing.component.html +++ b/src/app/pages/translate/signwriting/sign-writing.component.html @@ -1,6 +1,6 @@ @if (signs) {
- @for (sign of signs; track sign) { + @for (sign of signs; track sign.fsw) { }
diff --git a/src/app/pages/translate/spoken-to-signed/signed-language-output/signed-language-output.component.scss b/src/app/pages/translate/spoken-to-signed/signed-language-output/signed-language-output.component.scss index a25a5b41..06e97863 100644 --- a/src/app/pages/translate/spoken-to-signed/signed-language-output/signed-language-output.component.scss +++ b/src/app/pages/translate/spoken-to-signed/signed-language-output/signed-language-output.component.scss @@ -1,4 +1,4 @@ -@import '../../../../../theme/variables'; +@use '../../../../../theme/breakpoints' as breakpoints; :host { background-color: white; @@ -6,7 +6,7 @@ position: relative; aspect-ratio: 1; - @media #{$breakpoint-gt-xs} { + @media #{breakpoints.$breakpoint-gt-xs} { background-color: #f5f5f5; } diff --git a/src/app/pages/translate/spoken-to-signed/spoken-to-signed.component.scss b/src/app/pages/translate/spoken-to-signed/spoken-to-signed.component.scss index 8a25961a..0f00b67f 100644 --- a/src/app/pages/translate/spoken-to-signed/spoken-to-signed.component.scss +++ b/src/app/pages/translate/spoken-to-signed/spoken-to-signed.component.scss @@ -1,4 +1,4 @@ -@import '../../../../theme/variables'; +@use '../../../../theme/breakpoints' as breakpoints; :host { display: grid; @@ -6,7 +6,7 @@ grid-template-areas: 'spoken signwriting signed'; grid-template-columns: auto 100px 50%; - @media #{$breakpoint-lt-sm} { + @media #{breakpoints.$breakpoint-lt-sm} { grid-template-areas: 'signed signed' 'spoken signwriting'; grid-template-columns: auto 100px; @@ -21,7 +21,7 @@ } app-sign-writing { - @media #{$breakpoint-lt-sm} { + @media #{breakpoints.$breakpoint-lt-sm} { border: none !important; height: 195px; } diff --git a/src/app/pages/translate/translate-desktop/translate-desktop.component.scss b/src/app/pages/translate/translate-desktop/translate-desktop.component.scss index b63fe577..83bbf2db 100644 --- a/src/app/pages/translate/translate-desktop/translate-desktop.component.scss +++ b/src/app/pages/translate/translate-desktop/translate-desktop.component.scss @@ -1,6 +1,6 @@ -@import '../../../../theme/variables'; +@use '../../../../theme/breakpoints' as breakpoints; -@media #{$breakpoint-gt-xs} { +@media #{breakpoints.$breakpoint-gt-xs} { .container::before { background-color: var(--app-tinted-background-color); border-bottom: 1px solid var(--app-divider-color); @@ -17,7 +17,7 @@ .container { transition: 0.6s all cubic-bezier(0.4, 0, 0.2, 1); - @media #{$breakpoint-gt-md} { + @media #{breakpoints.$breakpoint-gt-md} { padding: 48px; padding-top: 0; } @@ -29,11 +29,11 @@ display: flex; gap: 0.5em; - @media #{$breakpoint-lt-lg} { + @media #{breakpoints.$breakpoint-lt-lg} { padding: 0 12px; } - @media #{$breakpoint-lt-sm} { + @media #{breakpoints.$breakpoint-lt-sm} { display: none; } } @@ -49,11 +49,11 @@ background-color: #101010; } - @media #{$breakpoint-gt-xs} { + @media #{breakpoints.$breakpoint-gt-xs} { box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.37); } - @media #{$breakpoint-gt-md} { + @media #{breakpoints.$breakpoint-gt-md} { border-radius: 8px; overflow: hidden; } diff --git a/src/app/pages/translate/translate-desktop/translate-desktop.component.ts b/src/app/pages/translate/translate-desktop/translate-desktop.component.ts index 598eab00..a8347deb 100644 --- a/src/app/pages/translate/translate-desktop/translate-desktop.component.ts +++ b/src/app/pages/translate/translate-desktop/translate-desktop.component.ts @@ -4,7 +4,6 @@ import {Store} from '@ngxs/store'; import {takeUntil, tap} from 'rxjs/operators'; import {BaseComponent} from '../../../components/base/base.component'; import {IonButtons, IonContent, IonHeader, IonTitle, IonToolbar} from '@ionic/angular/standalone'; -import {SignedLanguageInputComponent} from '../signed-to-spoken/signed-language-input/signed-language-input.component'; import {TranslateInputButtonComponent} from '../input/button/button.component'; import {LanguageSelectorsComponent} from '../language-selectors/language-selectors.component'; import {SendFeedbackComponent} from '../send-feedback/send-feedback.component'; @@ -14,6 +13,8 @@ import {SpokenToSignedComponent} from '../spoken-to-signed/spoken-to-signed.comp import {SignedToSpokenComponent} from '../signed-to-spoken/signed-to-spoken.component'; import {DropPoseFileComponent} from '../drop-pose-file/drop-pose-file.component'; import {MatTooltip} from '@angular/material/tooltip'; +import {addIcons} from 'ionicons'; +import {cloudUpload, language, videocam} from 'ionicons/icons'; @Component({ selector: 'app-translate-desktop', @@ -30,7 +31,6 @@ import {MatTooltip} from '@angular/material/tooltip'; LanguageSelectorsComponent, SendFeedbackComponent, TranslocoPipe, - SignedLanguageInputComponent, NtkmeButtonModule, SpokenToSignedComponent, SignedToSpokenComponent, @@ -46,6 +46,8 @@ export class TranslateDesktopComponent extends BaseComponent implements OnInit { super(); this.spokenToSigned$ = this.store.select(state => state.translate.spokenToSigned); + + addIcons({language, videocam, cloudUpload}); } ngOnInit(): void { diff --git a/src/theme/variables.scss b/src/theme/breakpoints.scss similarity index 100% rename from src/theme/variables.scss rename to src/theme/breakpoints.scss From 2a2a7a9f0a57608fea345f40212ba042625f12d6 Mon Sep 17 00:00:00 2001 From: Amit Moryossef Date: Sun, 24 Nov 2024 09:39:36 +0100 Subject: [PATCH 06/30] before migration --- src/app/app.config.ts | 1 - src/app/app.routes.ts | 4 ++-- src/app/components/video/video.component.ts | 1 + src/app/modules/translate/translate.module.ts | 2 +- .../language-selector/language-selector.component.ts | 6 ++---- .../signed-to-spoken/signed-to-spoken.component.ts | 3 ++- src/app/pages/translate/translate.component.ts | 5 +---- 7 files changed, 9 insertions(+), 13 deletions(-) diff --git a/src/app/app.config.ts b/src/app/app.config.ts index cfcb2556..88828ced 100644 --- a/src/app/app.config.ts +++ b/src/app/app.config.ts @@ -14,7 +14,6 @@ import {environment} from '../environments/environment'; import {provideServiceWorker} from '@angular/service-worker'; import {provideIonicAngular} from '@ionic/angular/standalone'; import {isSafari} from './core/constants'; -import {TranslateState} from './modules/translate/translate.state'; import {provideAnimations} from '@angular/platform-browser/animations'; export const ngxsConfig: NgxsModuleOptions = { diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index ebe2b5c9..965bb3c3 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -1,7 +1,7 @@ import {Routes} from '@angular/router'; import {NotFoundComponent} from './pages/not-found/not-found.component'; import {TranslateComponent} from './pages/translate/translate.component'; -import {provideStates, provideStore} from '@ngxs/store'; +import {provideStates} from '@ngxs/store'; import {TranslateState} from './modules/translate/translate.state'; import {LanguageDetectionService} from './modules/translate/language-detection/language-detection.service'; import {MediaPipeLanguageDetectionService} from './modules/translate/language-detection/mediapipe.service'; @@ -11,7 +11,7 @@ export const routes: Routes = [ path: '', component: TranslateComponent, providers: [ - provideStore([TranslateState]), + provideStates([TranslateState]), {provide: LanguageDetectionService, useClass: MediaPipeLanguageDetectionService}, ], }, diff --git a/src/app/components/video/video.component.ts b/src/app/components/video/video.component.ts index bbe058f1..5643ad8c 100644 --- a/src/app/components/video/video.component.ts +++ b/src/app/components/video/video.component.ts @@ -72,6 +72,7 @@ export class VideoComponent extends BaseComponent implements AfterViewInit { } ngAfterViewInit(): void { + console.log(this.videoEl); this.setCamera(); this.setStats(); this.trackPose(); diff --git a/src/app/modules/translate/translate.module.ts b/src/app/modules/translate/translate.module.ts index 50e123a0..95a2617a 100644 --- a/src/app/modules/translate/translate.module.ts +++ b/src/app/modules/translate/translate.module.ts @@ -1,5 +1,5 @@ import {NgModule} from '@angular/core'; -import {NgxsModule, provideStore} from '@ngxs/store'; +import {NgxsModule} from '@ngxs/store'; import {TranslateState} from './translate.state'; import {TranslationService} from './translate.service'; import {SignWritingTranslationService} from './signwriting-translation.service'; diff --git a/src/app/pages/translate/language-selector/language-selector.component.ts b/src/app/pages/translate/language-selector/language-selector.component.ts index a1a11cd3..82e7cd20 100644 --- a/src/app/pages/translate/language-selector/language-selector.component.ts +++ b/src/app/pages/translate/language-selector/language-selector.component.ts @@ -5,14 +5,12 @@ import {TranslocoDirective, TranslocoService} from '@ngneat/transloco'; import {filter, takeUntil, tap} from 'rxjs/operators'; import {BaseComponent} from '../../../components/base/base.component'; import {IANASignedLanguages} from '../../../core/helpers/iana/languages'; -import {MatTab, MatTabGroup, MatTabLabel, MatTabsModule} from '@angular/material/tabs'; +import {MatTabsModule} from '@angular/material/tabs'; import {IonButton, IonIcon} from '@ionic/angular/standalone'; -import {MatMenu, MatMenuModule, MatMenuTrigger} from '@angular/material/menu'; +import {MatMenuModule, MatMenuTrigger} from '@angular/material/menu'; import {FlagIconComponent} from '../../../components/flag-icon/flag-icon.component'; import {addIcons} from 'ionicons'; import {chevronDown} from 'ionicons/icons'; -import {BrowserAnimationsModule, NoopAnimationsModule, provideAnimations} from '@angular/platform-browser/animations'; -import {CommonModule} from '@angular/common'; const IntlTypeMap: {[key: string]: Intl.DisplayNamesType} = {languages: 'language', countries: 'region'}; diff --git a/src/app/pages/translate/signed-to-spoken/signed-to-spoken.component.ts b/src/app/pages/translate/signed-to-spoken/signed-to-spoken.component.ts index 54fcebb4..8340e740 100644 --- a/src/app/pages/translate/signed-to-spoken/signed-to-spoken.component.ts +++ b/src/app/pages/translate/signed-to-spoken/signed-to-spoken.component.ts @@ -17,7 +17,7 @@ import {UploadComponent} from './upload/upload.component'; import {addIcons} from 'ionicons'; import {copyOutline} from 'ionicons/icons'; import {TranslocoPipe} from '@ngneat/transloco'; -import {AsyncPipe} from '@angular/common'; +import {AsyncPipe, NgTemplateOutlet} from '@angular/common'; const FAKE_WORDS = [ { @@ -100,6 +100,7 @@ const FAKE_WORDS = [ IonIcon, TranslocoPipe, AsyncPipe, + NgTemplateOutlet, ], }) export class SignedToSpokenComponent implements OnInit { diff --git a/src/app/pages/translate/translate.component.ts b/src/app/pages/translate/translate.component.ts index 86ac8b6f..94a870f3 100644 --- a/src/app/pages/translate/translate.component.ts +++ b/src/app/pages/translate/translate.component.ts @@ -1,5 +1,5 @@ import {Component, OnInit} from '@angular/core'; -import {provideStates, provideStore, Store} from '@ngxs/store'; +import {Store} from '@ngxs/store'; import {SetSetting} from '../../modules/settings/settings.actions'; import {fromEvent, Observable} from 'rxjs'; import {BaseComponent} from '../../components/base/base.component'; @@ -10,9 +10,6 @@ import {Meta, Title} from '@angular/platform-browser'; import {MediaMatcher} from '@angular/cdk/layout'; import {TranslateMobileComponent} from './translate-mobile/translate-mobile.component'; import {TranslateDesktopComponent} from './translate-desktop/translate-desktop.component'; -import {TranslateState} from '../../modules/translate/translate.state'; -import {LanguageDetectionService} from '../../modules/translate/language-detection/language-detection.service'; -import {MediaPipeLanguageDetectionService} from '../../modules/translate/language-detection/mediapipe.service'; @Component({ selector: 'app-translate', From 8cc7ed936ea2903a83174fc4d9b7051acc9254fa Mon Sep 17 00:00:00 2001 From: Amit Moryossef Date: Sun, 24 Nov 2024 09:44:27 +0100 Subject: [PATCH 07/30] chore(): run standalone component migration --- .../animation/animation.component.spec.ts | 3 +- .../components/animation/animation.module.ts | 3 +- .../flag-icon/flag-icon.component.spec.ts | 2 +- .../i18n-language-selector.component.spec.ts | 3 +- .../i18n-language-selector.component.ts | 1 - src/app/components/map/map.component.spec.ts | 3 +- src/app/components/map/map.component.ts | 5 ++- .../speech-to-text.component.spec.ts | 3 +- .../stores/stores.component.spec.ts | 2 +- src/app/components/stores/stores.component.ts | 1 - .../text-to-speech.component.spec.ts | 3 +- .../video-controls.component.spec.ts | 2 +- .../components/video/video.component.spec.ts | 4 ++- src/app/components/video/video.module.ts | 3 +- .../directives/keyboard-flying.directive.ts | 1 - src/app/modules/settings/settings.module.ts | 11 +++++-- .../settings/settings.component.spec.ts | 2 +- .../settings/settings/settings.component.ts | 4 ++- .../benchmark-item.component.spec.ts | 3 +- .../benchmark-item.component.ts | 1 - .../benchmark/benchmark.component.spec.ts | 3 +- .../pages/benchmark/benchmark.component.ts | 1 - .../about-api/about-api.component.spec.ts | 3 +- .../about/about-api/about-api.component.ts | 1 - .../about-appearance.component.spec.ts | 3 +- .../about-appearance.component.ts | 1 - .../about-benefits.component.spec.ts | 3 +- .../about-benefits.component.ts | 1 - .../about-customers.component.spec.ts | 3 +- .../about-customers.component.ts | 1 - .../about-direction.component.spec.ts | 3 +- .../about-direction.component.ts | 1 - .../about-faq/about-faq.component.spec.ts | 3 +- .../about/about-faq/about-faq.component.ts | 1 - .../about-hero/about-hero.component.spec.ts | 3 +- .../about/about-hero/about-hero.component.ts | 1 - .../about-objectives.component.spec.ts | 3 +- .../about-objectives.component.ts | 1 - .../about-pricing.component.spec.ts | 3 +- .../about-pricing/about-pricing.component.ts | 1 - .../about-team/about-team.component.spec.ts | 3 +- .../about/about-team/about-team.component.ts | 1 - .../landing/about/about.component.spec.ts | 22 ++++++------- .../pages/landing/about/about.component.ts | 1 - .../about/lazy-map/lazy-map.component.spec.ts | 2 +- .../about/lazy-map/lazy-map.component.ts | 1 - .../contribute/contribute.component.spec.ts | 3 +- .../contribute/contribute.component.ts | 1 - .../landing-footer.component.spec.ts | 3 +- .../landing-footer.component.ts | 1 - .../pages/landing/landing.component.spec.ts | 4 ++- src/app/pages/landing/landing.component.ts | 1 - .../licenses/licenses.component.spec.ts | 3 +- .../landing/licenses/licenses.component.ts | 1 - .../landing/privacy/privacy.component.spec.ts | 2 +- .../landing/privacy/privacy.component.ts | 1 - .../landing/terms/terms.component.spec.ts | 2 +- .../pages/landing/terms/terms.component.ts | 1 - src/app/pages/main.component.spec.ts | 3 +- src/app/pages/main.component.ts | 1 - .../not-found/not-found.component.spec.ts | 2 +- .../playground/playground.component.spec.ts | 10 ++++-- .../pages/playground/playground.component.ts | 1 - .../settings-about.component.spec.ts | 3 +- .../settings-about.component.ts | 5 ++- ...ttings-appearance-images.component.spec.ts | 2 +- .../settings-appearance-images.component.ts | 6 +++- .../settings-appearance.component.spec.ts | 3 +- .../settings-appearance.component.ts | 5 ++- .../settings-feedback.component.spec.ts | 8 +++-- .../settings-feedback.component.ts | 4 ++- .../settings-menu.component.spec.ts | 3 +- .../settings-menu/settings-menu.component.ts | 4 ++- .../settings-offline.component.spec.ts | 2 +- .../settings-offline.component.ts | 31 +++++++++++++++++-- .../settings-voice-input.component.spec.ts | 2 +- .../settings-voice-input.component.ts | 4 ++- .../settings-voice-output.component.spec.ts | 2 +- .../settings-voice-output.component.ts | 4 ++- .../pages/settings/settings.component.spec.ts | 10 ++++-- src/app/pages/settings/settings.component.ts | 1 - src/app/pages/settings/settings.module.ts | 20 ++++++------ .../drop-pose-file.component.spec.ts | 7 +++-- .../input/button/button.component.spec.ts | 2 +- .../language-selector.component.spec.ts | 2 +- .../language-selectors.component.spec.ts | 7 +++-- .../avatar-pose-viewer.component.spec.ts | 3 +- .../human-pose-viewer.component.spec.ts | 2 +- .../pose-viewers/pose-viewer.component.ts | 1 - .../skeleton-pose-viewer.component.spec.ts | 3 +- .../viewer-selector.component.spec.ts | 2 +- .../send-feedback.component.spec.ts | 3 +- .../signed-language-input.component.spec.ts | 9 ++++-- .../signed-to-spoken.component.spec.ts | 7 +++-- .../upload/upload.component.spec.ts | 3 +- .../sign-writing.component.spec.ts | 7 +++-- .../signed-language-output.component.spec.ts | 7 +++-- .../desktop-textarea.component.spec.ts | 8 +++-- .../spoken-language-input.component.spec.ts | 3 +- .../spoken-to-signed.component.spec.ts | 4 ++- .../translate-desktop.component.spec.ts | 2 +- .../translate-mobile.component.spec.ts | 2 +- .../translate/translate.component.spec.ts | 3 +- 103 files changed, 209 insertions(+), 167 deletions(-) diff --git a/src/app/components/animation/animation.component.spec.ts b/src/app/components/animation/animation.component.spec.ts index e74dec89..27516f5a 100644 --- a/src/app/components/animation/animation.component.spec.ts +++ b/src/app/components/animation/animation.component.spec.ts @@ -15,8 +15,7 @@ describe('AnimationComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [AnimationComponent], - imports: [NgxsModule.forRoot([AnimationState, SettingsState, PoseState], ngxsConfig)], + imports: [NgxsModule.forRoot([AnimationState, SettingsState, PoseState], ngxsConfig), AnimationComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], }).compileComponents(); }); diff --git a/src/app/components/animation/animation.module.ts b/src/app/components/animation/animation.module.ts index d194c528..b135fd45 100644 --- a/src/app/components/animation/animation.module.ts +++ b/src/app/components/animation/animation.module.ts @@ -4,9 +4,8 @@ import {NgxsModule} from '@ngxs/store'; import {AnimationState} from '../../modules/animation/animation.state'; @NgModule({ - declarations: [AnimationComponent], exports: [AnimationComponent], - imports: [NgxsModule.forFeature([AnimationState])], + imports: [NgxsModule.forFeature([AnimationState]), AnimationComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], }) export class AnimationModule {} diff --git a/src/app/components/flag-icon/flag-icon.component.spec.ts b/src/app/components/flag-icon/flag-icon.component.spec.ts index 370394b4..1a04df7c 100644 --- a/src/app/components/flag-icon/flag-icon.component.spec.ts +++ b/src/app/components/flag-icon/flag-icon.component.spec.ts @@ -9,7 +9,7 @@ describe('FlagIconComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [FlagIconComponent], + imports: [FlagIconComponent], }).compileComponents(); }); diff --git a/src/app/components/i18n-language-selector/i18n-language-selector.component.spec.ts b/src/app/components/i18n-language-selector/i18n-language-selector.component.spec.ts index a7742ae5..f4a6db2d 100644 --- a/src/app/components/i18n-language-selector/i18n-language-selector.component.spec.ts +++ b/src/app/components/i18n-language-selector/i18n-language-selector.component.spec.ts @@ -12,8 +12,7 @@ describe('LanguageSelectorComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [I18NLanguageSelectorComponent], - imports: [AppTranslocoTestingModule, RouterModule.forRoot([])], + imports: [AppTranslocoTestingModule, RouterModule.forRoot([]), I18NLanguageSelectorComponent], }).compileComponents(); }); diff --git a/src/app/components/i18n-language-selector/i18n-language-selector.component.ts b/src/app/components/i18n-language-selector/i18n-language-selector.component.ts index d48468a7..aa4a7d59 100644 --- a/src/app/components/i18n-language-selector/i18n-language-selector.component.ts +++ b/src/app/components/i18n-language-selector/i18n-language-selector.component.ts @@ -7,7 +7,6 @@ import {SITE_LANGUAGES} from '../../core/modules/transloco/languages'; selector: 'app-i18n-language-selector', templateUrl: './i18n-language-selector.component.html', styleUrls: ['./i18n-language-selector.component.scss'], - standalone: false, }) export class I18NLanguageSelectorComponent { current: string; diff --git a/src/app/components/map/map.component.spec.ts b/src/app/components/map/map.component.spec.ts index e2fbd120..c7f3db48 100644 --- a/src/app/components/map/map.component.spec.ts +++ b/src/app/components/map/map.component.spec.ts @@ -11,8 +11,7 @@ describe('MapComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [MapComponent], - imports: [LeafletModule], + imports: [LeafletModule, MapComponent], providers: [provideHttpClient(), provideHttpClientTesting()], }).compileComponents(); diff --git a/src/app/components/map/map.component.ts b/src/app/components/map/map.component.ts index 2316ad7f..abfd4233 100644 --- a/src/app/components/map/map.component.ts +++ b/src/app/components/map/map.component.ts @@ -13,7 +13,7 @@ function logMax(arr: number[]) { selector: 'app-map', templateUrl: './map.component.html', styleUrls: ['./map.component.scss'], - standalone: false, + imports: [LeafletModule], }) export class MapComponent extends BaseComponent implements OnInit { static mapGeoJson = null; @@ -105,8 +105,7 @@ export class MapComponent extends BaseComponent implements OnInit { } @NgModule({ - declarations: [MapComponent], - imports: [LeafletModule], + imports: [LeafletModule, MapComponent], providers: [provideHttpClient()], }) export class MapModule {} diff --git a/src/app/components/speech-to-text/speech-to-text.component.spec.ts b/src/app/components/speech-to-text/speech-to-text.component.spec.ts index 9fe931d4..d401c50e 100644 --- a/src/app/components/speech-to-text/speech-to-text.component.spec.ts +++ b/src/app/components/speech-to-text/speech-to-text.component.spec.ts @@ -12,8 +12,7 @@ describe('SpeechToTextComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [SpeechToTextComponent], - imports: [AppTranslocoTestingModule, MatTooltipModule, IonIcon, IonButton], + imports: [AppTranslocoTestingModule, MatTooltipModule, IonIcon, IonButton, SpeechToTextComponent], }).compileComponents(); }); diff --git a/src/app/components/stores/stores.component.spec.ts b/src/app/components/stores/stores.component.spec.ts index 06311c0b..986f9ef5 100644 --- a/src/app/components/stores/stores.component.spec.ts +++ b/src/app/components/stores/stores.component.spec.ts @@ -9,7 +9,7 @@ describe('StoresComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [StoresComponent], + imports: [StoresComponent], }).compileComponents(); }); diff --git a/src/app/components/stores/stores.component.ts b/src/app/components/stores/stores.component.ts index 076f1fe3..efac4847 100644 --- a/src/app/components/stores/stores.component.ts +++ b/src/app/components/stores/stores.component.ts @@ -4,6 +4,5 @@ import {Component} from '@angular/core'; selector: 'app-stores', templateUrl: './stores.component.html', styleUrls: ['./stores.component.scss'], - standalone: false, }) export class StoresComponent {} diff --git a/src/app/components/text-to-speech/text-to-speech.component.spec.ts b/src/app/components/text-to-speech/text-to-speech.component.spec.ts index c0e2f8e7..87225b00 100644 --- a/src/app/components/text-to-speech/text-to-speech.component.spec.ts +++ b/src/app/components/text-to-speech/text-to-speech.component.spec.ts @@ -25,8 +25,7 @@ describe('TextToSpeechComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [TextToSpeechComponent], - imports: [AppTranslocoTestingModule, IonIcon, IonButton], + imports: [AppTranslocoTestingModule, IonIcon, IonButton, TextToSpeechComponent], }).compileComponents(); }); diff --git a/src/app/components/video/video-controls/video-controls.component.spec.ts b/src/app/components/video/video-controls/video-controls.component.spec.ts index f9e8b795..ae041f39 100644 --- a/src/app/components/video/video-controls/video-controls.component.spec.ts +++ b/src/app/components/video/video-controls/video-controls.component.spec.ts @@ -15,13 +15,13 @@ describe('VideoControlsComponent', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - declarations: [VideoControlsComponent], imports: [ AppTranslocoTestingModule, MatTooltipModule, IonFab, IonFabButton, NgxsModule.forRoot([SettingsState], ngxsConfig), + VideoControlsComponent, ], }).compileComponents(); })); diff --git a/src/app/components/video/video.component.spec.ts b/src/app/components/video/video.component.spec.ts index 3bab7ee7..027d6141 100644 --- a/src/app/components/video/video.component.spec.ts +++ b/src/app/components/video/video.component.spec.ts @@ -21,13 +21,15 @@ describe('VideoComponent', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - declarations: [VideoComponent, VideoControlsComponent, AnimationComponent], imports: [ AppTranslocoTestingModule, MatTooltipModule, IonIcon, IonFab, NgxsModule.forRoot([SettingsState, VideoState, SignWritingState, PoseState, DetectorState], ngxsConfig), + VideoComponent, + VideoControlsComponent, + AnimationComponent, ], }).compileComponents(); })); diff --git a/src/app/components/video/video.module.ts b/src/app/components/video/video.module.ts index 30db68dc..04814a6b 100644 --- a/src/app/components/video/video.module.ts +++ b/src/app/components/video/video.module.ts @@ -23,8 +23,9 @@ import {IonFab, IonFabButton, IonIcon} from '@ionic/angular/standalone'; IonFab, IonFabButton, NgxsModule.forFeature([VideoState, SignWritingState, DetectorState]), + VideoComponent, + VideoControlsComponent, ], - declarations: [VideoComponent, VideoControlsComponent], exports: [VideoComponent], }) export class VideoModule {} diff --git a/src/app/directives/keyboard-flying.directive.ts b/src/app/directives/keyboard-flying.directive.ts index 94688724..aeb1a52e 100644 --- a/src/app/directives/keyboard-flying.directive.ts +++ b/src/app/directives/keyboard-flying.directive.ts @@ -6,7 +6,6 @@ import {Animation, AnimationController} from '@ionic/angular'; @Directive({ selector: '[appKeyboardFlying]', - standalone: false, }) export class KeyboardFlyingDirective implements OnInit, OnDestroy { // This class intends to fix the input shows only after the keyboard is shown fully diff --git a/src/app/modules/settings/settings.module.ts b/src/app/modules/settings/settings.module.ts index 56c54f91..826aa8c1 100644 --- a/src/app/modules/settings/settings.module.ts +++ b/src/app/modules/settings/settings.module.ts @@ -7,9 +7,16 @@ import {FormsModule} from '@angular/forms'; import {IonCheckbox, IonItem, IonList} from '@ionic/angular/standalone'; @NgModule({ - declarations: [SettingsComponent], providers: [], - imports: [NgxsModule.forFeature([SettingsState]), AppSharedModule, FormsModule, IonItem, IonCheckbox, IonList], + imports: [ + NgxsModule.forFeature([SettingsState]), + AppSharedModule, + FormsModule, + IonItem, + IonCheckbox, + IonList, + SettingsComponent, + ], exports: [SettingsComponent], }) export class SettingsModule {} diff --git a/src/app/modules/settings/settings/settings.component.spec.ts b/src/app/modules/settings/settings/settings.component.spec.ts index fec474c0..efe5e70e 100644 --- a/src/app/modules/settings/settings/settings.component.spec.ts +++ b/src/app/modules/settings/settings/settings.component.spec.ts @@ -16,7 +16,6 @@ describe('SettingsComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [SettingsComponent], imports: [ NgxsModule.forRoot([SettingsState], ngxsConfig), FormsModule, @@ -24,6 +23,7 @@ describe('SettingsComponent', () => { IonItem, IonCheckbox, IonList, + SettingsComponent, ], }).compileComponents(); }); diff --git a/src/app/modules/settings/settings/settings.component.ts b/src/app/modules/settings/settings/settings.component.ts index 31265998..5c8def6f 100644 --- a/src/app/modules/settings/settings/settings.component.ts +++ b/src/app/modules/settings/settings/settings.component.ts @@ -3,12 +3,14 @@ import {BaseSettingsComponent} from '../settings.component'; import {takeUntil, tap} from 'rxjs/operators'; import {Store} from '@ngxs/store'; import {SettingsStateModel} from '../settings.state'; +import {TranslocoDirective} from '@ngneat/transloco'; +import {IonList, IonItem, IonCheckbox} from '@ionic/angular/standalone'; @Component({ selector: 'app-settings', templateUrl: './settings.component.html', styleUrls: ['./settings.component.css'], - standalone: false, + imports: [TranslocoDirective, IonList, IonItem, IonCheckbox], }) export class SettingsComponent extends BaseSettingsComponent implements OnInit { availableSettings: Array = [ diff --git a/src/app/pages/benchmark/benchmark-item/benchmark-item.component.spec.ts b/src/app/pages/benchmark/benchmark-item/benchmark-item.component.spec.ts index 8de078e3..358f4ecf 100644 --- a/src/app/pages/benchmark/benchmark-item/benchmark-item.component.spec.ts +++ b/src/app/pages/benchmark/benchmark-item/benchmark-item.component.spec.ts @@ -11,8 +11,7 @@ describe('BenchmarkItemComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [BenchmarkItemComponent], - imports: [MatTooltipModule, IonicModule.forRoot()], + imports: [MatTooltipModule, IonicModule.forRoot(), BenchmarkItemComponent], }).compileComponents(); }); diff --git a/src/app/pages/benchmark/benchmark-item/benchmark-item.component.ts b/src/app/pages/benchmark/benchmark-item/benchmark-item.component.ts index e92821d8..3f0bb00e 100644 --- a/src/app/pages/benchmark/benchmark-item/benchmark-item.component.ts +++ b/src/app/pages/benchmark/benchmark-item/benchmark-item.component.ts @@ -4,7 +4,6 @@ import {Component, Input} from '@angular/core'; selector: 'app-benchmark-item', templateUrl: './benchmark-item.component.html', styleUrls: ['./benchmark-item.component.scss'], - standalone: false, }) export class BenchmarkItemComponent { @Input() title: string; diff --git a/src/app/pages/benchmark/benchmark.component.spec.ts b/src/app/pages/benchmark/benchmark.component.spec.ts index 29b5d648..d035807a 100644 --- a/src/app/pages/benchmark/benchmark.component.spec.ts +++ b/src/app/pages/benchmark/benchmark.component.spec.ts @@ -13,8 +13,7 @@ describe('BenchmarkComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [BenchmarkComponent], - imports: [AppTranslocoTestingModule, IonicModule.forRoot()], + imports: [AppTranslocoTestingModule, IonicModule.forRoot(), BenchmarkComponent], providers: [provideHttpClient(), provideHttpClientTesting()], }).compileComponents(); }); diff --git a/src/app/pages/benchmark/benchmark.component.ts b/src/app/pages/benchmark/benchmark.component.ts index 431365cd..1f0ef0fb 100644 --- a/src/app/pages/benchmark/benchmark.component.ts +++ b/src/app/pages/benchmark/benchmark.component.ts @@ -9,7 +9,6 @@ import {LanguageDetectionService} from '../../modules/translate/language-detecti selector: 'app-benchmark', templateUrl: './benchmark.component.html', styleUrls: ['./benchmark.component.scss'], - standalone: false, }) export class BenchmarkComponent { benchmarks = { diff --git a/src/app/pages/landing/about/about-api/about-api.component.spec.ts b/src/app/pages/landing/about/about-api/about-api.component.spec.ts index c729540d..e85041e5 100644 --- a/src/app/pages/landing/about/about-api/about-api.component.spec.ts +++ b/src/app/pages/landing/about/about-api/about-api.component.spec.ts @@ -11,8 +11,7 @@ describe('AboutApiComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [AboutApiComponent], - imports: [AppTranslocoTestingModule, AppNgxsModule], + imports: [AppTranslocoTestingModule, AppNgxsModule, AboutApiComponent], }).compileComponents(); fixture = TestBed.createComponent(AboutApiComponent); diff --git a/src/app/pages/landing/about/about-api/about-api.component.ts b/src/app/pages/landing/about/about-api/about-api.component.ts index d70d4a2c..98705da9 100644 --- a/src/app/pages/landing/about/about-api/about-api.component.ts +++ b/src/app/pages/landing/about/about-api/about-api.component.ts @@ -6,7 +6,6 @@ import {Observable} from 'rxjs'; selector: 'app-about-api', templateUrl: './about-api.component.html', styleUrls: ['./about-api.component.scss'], - standalone: false, }) export class AboutApiComponent { appearance$: Observable; diff --git a/src/app/pages/landing/about/about-appearance/about-appearance.component.spec.ts b/src/app/pages/landing/about/about-appearance/about-appearance.component.spec.ts index 91a9745b..e14340ac 100644 --- a/src/app/pages/landing/about/about-appearance/about-appearance.component.spec.ts +++ b/src/app/pages/landing/about/about-appearance/about-appearance.component.spec.ts @@ -12,8 +12,7 @@ describe('AboutAppearanceComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [AboutAppearanceComponent], - imports: [AppTranslocoTestingModule, SettingsPageModule, AppNgxsModule], + imports: [AppTranslocoTestingModule, SettingsPageModule, AppNgxsModule, AboutAppearanceComponent], }).compileComponents(); }); diff --git a/src/app/pages/landing/about/about-appearance/about-appearance.component.ts b/src/app/pages/landing/about/about-appearance/about-appearance.component.ts index a511a94d..911d2599 100644 --- a/src/app/pages/landing/about/about-appearance/about-appearance.component.ts +++ b/src/app/pages/landing/about/about-appearance/about-appearance.component.ts @@ -4,6 +4,5 @@ import {Component} from '@angular/core'; selector: 'app-about-appearance', templateUrl: './about-appearance.component.html', styleUrls: ['./about-appearance.component.scss'], - standalone: false, }) export class AboutAppearanceComponent {} diff --git a/src/app/pages/landing/about/about-benefits/about-benefits.component.spec.ts b/src/app/pages/landing/about/about-benefits/about-benefits.component.spec.ts index 2f3aa9fd..2ef8cffe 100644 --- a/src/app/pages/landing/about/about-benefits/about-benefits.component.spec.ts +++ b/src/app/pages/landing/about/about-benefits/about-benefits.component.spec.ts @@ -18,8 +18,7 @@ describe('AboutBenefitsComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [AboutBenefitsComponent, LazyMapComponent], - imports: [AppTranslocoTestingModule, IonicModule.forRoot()], + imports: [AppTranslocoTestingModule, IonicModule.forRoot(), AboutBenefitsComponent, LazyMapComponent], providers: [provideHttpClient(), provideHttpClientTesting()], schemas: [CUSTOM_ELEMENTS_SCHEMA], }).compileComponents(); diff --git a/src/app/pages/landing/about/about-benefits/about-benefits.component.ts b/src/app/pages/landing/about/about-benefits/about-benefits.component.ts index aeb993c2..06333fa8 100644 --- a/src/app/pages/landing/about/about-benefits/about-benefits.component.ts +++ b/src/app/pages/landing/about/about-benefits/about-benefits.component.ts @@ -9,7 +9,6 @@ import {BaseComponent} from '../../../../components/base/base.component'; selector: 'app-about-benefits', templateUrl: './about-benefits.component.html', styleUrls: ['./about-benefits.component.scss'], - standalone: false, }) export class AboutBenefitsComponent extends BaseComponent implements AfterViewInit, OnInit { @ViewChild('swiper', {static: false}) swiper: ElementRef<{swiper: Swiper}>; diff --git a/src/app/pages/landing/about/about-customers/about-customers.component.spec.ts b/src/app/pages/landing/about/about-customers/about-customers.component.spec.ts index 6605ee37..f7cdb736 100644 --- a/src/app/pages/landing/about/about-customers/about-customers.component.spec.ts +++ b/src/app/pages/landing/about/about-customers/about-customers.component.spec.ts @@ -12,8 +12,7 @@ describe('AboutCustomersComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [AboutCustomersComponent], - imports: [AppTranslocoTestingModule, IonicModule.forRoot(), NoopAnimationsModule], + imports: [AppTranslocoTestingModule, IonicModule.forRoot(), NoopAnimationsModule, AboutCustomersComponent], }).compileComponents(); fixture = TestBed.createComponent(AboutCustomersComponent); diff --git a/src/app/pages/landing/about/about-customers/about-customers.component.ts b/src/app/pages/landing/about/about-customers/about-customers.component.ts index d1cc97d4..e96ac096 100644 --- a/src/app/pages/landing/about/about-customers/about-customers.component.ts +++ b/src/app/pages/landing/about/about-customers/about-customers.component.ts @@ -4,7 +4,6 @@ import {Component} from '@angular/core'; selector: 'app-about-customers', templateUrl: './about-customers.component.html', styleUrls: ['./about-customers.component.scss'], - standalone: false, }) export class AboutCustomersComponent { activeCustomer = 0; diff --git a/src/app/pages/landing/about/about-direction/about-direction.component.spec.ts b/src/app/pages/landing/about/about-direction/about-direction.component.spec.ts index 47d3f474..875a1006 100644 --- a/src/app/pages/landing/about/about-direction/about-direction.component.spec.ts +++ b/src/app/pages/landing/about/about-direction/about-direction.component.spec.ts @@ -11,8 +11,7 @@ describe('AboutDirectionComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [AboutDirectionComponent], - imports: [AppTranslocoTestingModule, IonicModule.forRoot()], + imports: [AppTranslocoTestingModule, IonicModule.forRoot(), AboutDirectionComponent], }).compileComponents(); }); diff --git a/src/app/pages/landing/about/about-direction/about-direction.component.ts b/src/app/pages/landing/about/about-direction/about-direction.component.ts index c82712fe..6afbb996 100644 --- a/src/app/pages/landing/about/about-direction/about-direction.component.ts +++ b/src/app/pages/landing/about/about-direction/about-direction.component.ts @@ -8,7 +8,6 @@ import {DomSanitizer, SafeUrl} from '@angular/platform-browser'; selector: 'app-about-direction', templateUrl: './about-direction.component.html', styleUrls: ['./about-direction.component.scss'], - standalone: false, }) export class AboutDirectionComponent extends BaseComponent implements OnInit { iOSScreenshot: SafeUrl; diff --git a/src/app/pages/landing/about/about-faq/about-faq.component.spec.ts b/src/app/pages/landing/about/about-faq/about-faq.component.spec.ts index 9e8a745c..72568a78 100644 --- a/src/app/pages/landing/about/about-faq/about-faq.component.spec.ts +++ b/src/app/pages/landing/about/about-faq/about-faq.component.spec.ts @@ -12,8 +12,7 @@ describe('AboutFaqComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [AboutFaqComponent], - imports: [AppTranslocoTestingModule, IonicModule.forRoot(), NoopAnimationsModule], + imports: [AppTranslocoTestingModule, IonicModule.forRoot(), NoopAnimationsModule, AboutFaqComponent], }).compileComponents(); fixture = TestBed.createComponent(AboutFaqComponent); diff --git a/src/app/pages/landing/about/about-faq/about-faq.component.ts b/src/app/pages/landing/about/about-faq/about-faq.component.ts index 9cd3b9e0..b751c6d9 100644 --- a/src/app/pages/landing/about/about-faq/about-faq.component.ts +++ b/src/app/pages/landing/about/about-faq/about-faq.component.ts @@ -4,7 +4,6 @@ import {Component} from '@angular/core'; selector: 'app-about-faq', templateUrl: './about-faq.component.html', styleUrls: ['./about-faq.component.scss'], - standalone: false, }) export class AboutFaqComponent { questions = [ diff --git a/src/app/pages/landing/about/about-hero/about-hero.component.spec.ts b/src/app/pages/landing/about/about-hero/about-hero.component.spec.ts index 432fbb35..243d1cf3 100644 --- a/src/app/pages/landing/about/about-hero/about-hero.component.spec.ts +++ b/src/app/pages/landing/about/about-hero/about-hero.component.spec.ts @@ -12,8 +12,7 @@ describe('AboutHeroComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [AboutHeroComponent], - imports: [AppTranslocoTestingModule, IonicModule.forRoot(), NoopAnimationsModule], + imports: [AppTranslocoTestingModule, IonicModule.forRoot(), NoopAnimationsModule, AboutHeroComponent], }).compileComponents(); }); diff --git a/src/app/pages/landing/about/about-hero/about-hero.component.ts b/src/app/pages/landing/about/about-hero/about-hero.component.ts index c91d8ae3..3b7c7d6a 100644 --- a/src/app/pages/landing/about/about-hero/about-hero.component.ts +++ b/src/app/pages/landing/about/about-hero/about-hero.component.ts @@ -4,6 +4,5 @@ import {Component} from '@angular/core'; selector: 'app-about-hero', templateUrl: './about-hero.component.html', styleUrls: ['./about-hero.component.scss'], - standalone: false, }) export class AboutHeroComponent {} diff --git a/src/app/pages/landing/about/about-objectives/about-objectives.component.spec.ts b/src/app/pages/landing/about/about-objectives/about-objectives.component.spec.ts index 5c7da599..da2571c6 100644 --- a/src/app/pages/landing/about/about-objectives/about-objectives.component.spec.ts +++ b/src/app/pages/landing/about/about-objectives/about-objectives.component.spec.ts @@ -11,8 +11,7 @@ describe('AboutObjectivesComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [AboutObjectivesComponent], - imports: [AppTranslocoTestingModule, IonicModule.forRoot()], + imports: [AppTranslocoTestingModule, IonicModule.forRoot(), AboutObjectivesComponent], }).compileComponents(); fixture = TestBed.createComponent(AboutObjectivesComponent); diff --git a/src/app/pages/landing/about/about-objectives/about-objectives.component.ts b/src/app/pages/landing/about/about-objectives/about-objectives.component.ts index 421a7013..0fdf3d70 100644 --- a/src/app/pages/landing/about/about-objectives/about-objectives.component.ts +++ b/src/app/pages/landing/about/about-objectives/about-objectives.component.ts @@ -4,6 +4,5 @@ import {Component} from '@angular/core'; selector: 'app-about-objectives', templateUrl: './about-objectives.component.html', styleUrls: ['./about-objectives.component.scss'], - standalone: false, }) export class AboutObjectivesComponent {} diff --git a/src/app/pages/landing/about/about-pricing/about-pricing.component.spec.ts b/src/app/pages/landing/about/about-pricing/about-pricing.component.spec.ts index 16c00898..6a1c4726 100644 --- a/src/app/pages/landing/about/about-pricing/about-pricing.component.spec.ts +++ b/src/app/pages/landing/about/about-pricing/about-pricing.component.spec.ts @@ -12,8 +12,7 @@ describe('AboutPricingComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [AboutPricingComponent], - imports: [AppTranslocoTestingModule, IonicModule.forRoot(), ReactiveFormsModule], + imports: [AppTranslocoTestingModule, IonicModule.forRoot(), ReactiveFormsModule, AboutPricingComponent], }).compileComponents(); fixture = TestBed.createComponent(AboutPricingComponent); diff --git a/src/app/pages/landing/about/about-pricing/about-pricing.component.ts b/src/app/pages/landing/about/about-pricing/about-pricing.component.ts index f8f585e1..53d08294 100644 --- a/src/app/pages/landing/about/about-pricing/about-pricing.component.ts +++ b/src/app/pages/landing/about/about-pricing/about-pricing.component.ts @@ -7,7 +7,6 @@ import {takeUntilDestroyed} from '@angular/core/rxjs-interop'; selector: 'app-about-pricing', templateUrl: './about-pricing.component.html', styleUrls: ['./about-pricing.component.scss'], - standalone: false, }) export class AboutPricingComponent { form = new FormGroup({ diff --git a/src/app/pages/landing/about/about-team/about-team.component.spec.ts b/src/app/pages/landing/about/about-team/about-team.component.spec.ts index 9fb183bc..c6ac3372 100644 --- a/src/app/pages/landing/about/about-team/about-team.component.spec.ts +++ b/src/app/pages/landing/about/about-team/about-team.component.spec.ts @@ -11,8 +11,7 @@ describe('AboutTeamComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [AboutTeamComponent], - imports: [AppTranslocoTestingModule, IonicModule.forRoot()], + imports: [AppTranslocoTestingModule, IonicModule.forRoot(), AboutTeamComponent], }).compileComponents(); fixture = TestBed.createComponent(AboutTeamComponent); diff --git a/src/app/pages/landing/about/about-team/about-team.component.ts b/src/app/pages/landing/about/about-team/about-team.component.ts index 6b168206..bbd2784f 100644 --- a/src/app/pages/landing/about/about-team/about-team.component.ts +++ b/src/app/pages/landing/about/about-team/about-team.component.ts @@ -4,7 +4,6 @@ import {Component} from '@angular/core'; selector: 'app-about-team', templateUrl: './about-team.component.html', styleUrls: ['./about-team.component.scss'], - standalone: false, }) export class AboutTeamComponent { teamMembers = [ diff --git a/src/app/pages/landing/about/about.component.spec.ts b/src/app/pages/landing/about/about.component.spec.ts index fbae18e5..f7650d15 100644 --- a/src/app/pages/landing/about/about.component.spec.ts +++ b/src/app/pages/landing/about/about.component.spec.ts @@ -29,9 +29,17 @@ describe('AboutComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ - AboutComponent, + imports: [ + AppTranslocoTestingModule, + MatTooltipModule, + MatTabsModule, + IonicModule.forRoot(), + NoopAnimationsModule, + AppNgxsModule, + SettingsPageModule, + ReactiveFormsModule, AboutHeroComponent, + AboutComponent, AboutAppearanceComponent, AboutObjectivesComponent, AboutFaqComponent, @@ -44,16 +52,6 @@ describe('AboutComponent', () => { StoresComponent, LazyMapComponent, ], - imports: [ - AppTranslocoTestingModule, - MatTooltipModule, - MatTabsModule, - IonicModule.forRoot(), - NoopAnimationsModule, - AppNgxsModule, - SettingsPageModule, - ReactiveFormsModule, - ], }).compileComponents(); }); diff --git a/src/app/pages/landing/about/about.component.ts b/src/app/pages/landing/about/about.component.ts index 305f9069..6bd51021 100644 --- a/src/app/pages/landing/about/about.component.ts +++ b/src/app/pages/landing/about/about.component.ts @@ -4,6 +4,5 @@ import {Component} from '@angular/core'; selector: 'app-about', templateUrl: './about.component.html', styleUrls: ['./about.component.scss'], - standalone: false, }) export class AboutComponent {} diff --git a/src/app/pages/landing/about/lazy-map/lazy-map.component.spec.ts b/src/app/pages/landing/about/lazy-map/lazy-map.component.spec.ts index d6b0adc3..a9b5bcd8 100644 --- a/src/app/pages/landing/about/lazy-map/lazy-map.component.spec.ts +++ b/src/app/pages/landing/about/lazy-map/lazy-map.component.spec.ts @@ -8,7 +8,7 @@ describe('LazyMapComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [LazyMapComponent], + imports: [LazyMapComponent], }).compileComponents(); fixture = TestBed.createComponent(LazyMapComponent); diff --git a/src/app/pages/landing/about/lazy-map/lazy-map.component.ts b/src/app/pages/landing/about/lazy-map/lazy-map.component.ts index a0509b2d..ca4ece8c 100644 --- a/src/app/pages/landing/about/lazy-map/lazy-map.component.ts +++ b/src/app/pages/landing/about/lazy-map/lazy-map.component.ts @@ -5,7 +5,6 @@ import {ComponentType} from '@angular/cdk/overlay'; selector: 'app-lazy-map', templateUrl: './lazy-map.component.html', styleUrls: ['./lazy-map.component.scss'], - standalone: false, }) export class LazyMapComponent implements AfterViewInit { @ViewChild('mapHost', {read: ViewContainerRef}) mapHost: ViewContainerRef; diff --git a/src/app/pages/landing/contribute/contribute.component.spec.ts b/src/app/pages/landing/contribute/contribute.component.spec.ts index c13e2628..e7111dc1 100644 --- a/src/app/pages/landing/contribute/contribute.component.spec.ts +++ b/src/app/pages/landing/contribute/contribute.component.spec.ts @@ -10,8 +10,7 @@ describe('ContributeComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ContributeComponent], - imports: [IonicModule.forRoot()], + imports: [IonicModule.forRoot(), ContributeComponent], }).compileComponents(); }); diff --git a/src/app/pages/landing/contribute/contribute.component.ts b/src/app/pages/landing/contribute/contribute.component.ts index a4954caf..5771dfb7 100644 --- a/src/app/pages/landing/contribute/contribute.component.ts +++ b/src/app/pages/landing/contribute/contribute.component.ts @@ -4,7 +4,6 @@ import {Component} from '@angular/core'; selector: 'app-contribute', templateUrl: './contribute.component.html', styleUrls: ['./contribute.component.scss'], - standalone: false, }) export class ContributeComponent { cards = [ diff --git a/src/app/pages/landing/landing-footer/landing-footer.component.spec.ts b/src/app/pages/landing/landing-footer/landing-footer.component.spec.ts index a55b3ce6..dab9968b 100644 --- a/src/app/pages/landing/landing-footer/landing-footer.component.spec.ts +++ b/src/app/pages/landing/landing-footer/landing-footer.component.spec.ts @@ -14,12 +14,13 @@ describe('LandingFooterComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [LandingFooterComponent, I18NLanguageSelectorComponent], imports: [ AppTranslocoTestingModule, IonicModule.forRoot(), NoopAnimationsModule, RouterModule.forRoot([{path: '', component: LandingFooterComponent}]), + LandingFooterComponent, + I18NLanguageSelectorComponent, ], }).compileComponents(); diff --git a/src/app/pages/landing/landing-footer/landing-footer.component.ts b/src/app/pages/landing/landing-footer/landing-footer.component.ts index 1bbfbcb9..2f412e49 100644 --- a/src/app/pages/landing/landing-footer/landing-footer.component.ts +++ b/src/app/pages/landing/landing-footer/landing-footer.component.ts @@ -4,7 +4,6 @@ import {Component} from '@angular/core'; selector: 'app-landing-footer', templateUrl: './landing-footer.component.html', styleUrl: './landing-footer.component.scss', - standalone: false, }) export class LandingFooterComponent { legalPages: string[] = ['terms', 'privacy', 'licenses']; diff --git a/src/app/pages/landing/landing.component.spec.ts b/src/app/pages/landing/landing.component.spec.ts index 12aa2e44..cf438f5e 100644 --- a/src/app/pages/landing/landing.component.spec.ts +++ b/src/app/pages/landing/landing.component.spec.ts @@ -16,12 +16,14 @@ describe('LandingComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [LandingComponent, LandingFooterComponent, I18NLanguageSelectorComponent], imports: [ AppTranslocoTestingModule, IonicModule.forRoot(), NoopAnimationsModule, RouterModule.forRoot([{path: '', component: AboutComponent}]), + LandingComponent, + LandingFooterComponent, + I18NLanguageSelectorComponent, ], }).compileComponents(); }); diff --git a/src/app/pages/landing/landing.component.ts b/src/app/pages/landing/landing.component.ts index 87c3e8ce..f1d8d137 100644 --- a/src/app/pages/landing/landing.component.ts +++ b/src/app/pages/landing/landing.component.ts @@ -5,7 +5,6 @@ import {MediaMatcher} from '@angular/cdk/layout'; selector: 'app-landing', templateUrl: './landing.component.html', styleUrls: ['./landing.component.scss'], - standalone: false, }) export class LandingComponent { pages: string[] = ['about', 'contribute']; diff --git a/src/app/pages/landing/licenses/licenses.component.spec.ts b/src/app/pages/landing/licenses/licenses.component.spec.ts index 7abac7a4..5136247d 100644 --- a/src/app/pages/landing/licenses/licenses.component.spec.ts +++ b/src/app/pages/landing/licenses/licenses.component.spec.ts @@ -13,8 +13,7 @@ describe('LicensesComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [LicensesComponent], - imports: [MatTreeModule, CdkTreeModule], + imports: [MatTreeModule, CdkTreeModule, LicensesComponent], providers: [provideHttpClient(), provideHttpClientTesting()], }).compileComponents(); diff --git a/src/app/pages/landing/licenses/licenses.component.ts b/src/app/pages/landing/licenses/licenses.component.ts index 3cf14f6e..e6dbabce 100644 --- a/src/app/pages/landing/licenses/licenses.component.ts +++ b/src/app/pages/landing/licenses/licenses.component.ts @@ -22,7 +22,6 @@ type Node = PackagesParent | PackageLicense; selector: 'app-licenses', templateUrl: './licenses.component.html', styleUrls: ['./licenses.component.scss'], - standalone: false, }) export class LicensesComponent implements OnInit { treeControl = new NestedTreeControl((node: any) => node.children); diff --git a/src/app/pages/landing/privacy/privacy.component.spec.ts b/src/app/pages/landing/privacy/privacy.component.spec.ts index 6e4169d0..2210a395 100644 --- a/src/app/pages/landing/privacy/privacy.component.spec.ts +++ b/src/app/pages/landing/privacy/privacy.component.spec.ts @@ -9,7 +9,7 @@ describe('PrivacyComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [PrivacyComponent], + imports: [PrivacyComponent], }).compileComponents(); fixture = TestBed.createComponent(PrivacyComponent); diff --git a/src/app/pages/landing/privacy/privacy.component.ts b/src/app/pages/landing/privacy/privacy.component.ts index 530e520d..040c6881 100644 --- a/src/app/pages/landing/privacy/privacy.component.ts +++ b/src/app/pages/landing/privacy/privacy.component.ts @@ -4,6 +4,5 @@ import {Component} from '@angular/core'; selector: 'app-privacy', templateUrl: './privacy.component.html', styleUrls: ['./privacy.component.scss'], - standalone: false, }) export class PrivacyComponent {} diff --git a/src/app/pages/landing/terms/terms.component.spec.ts b/src/app/pages/landing/terms/terms.component.spec.ts index ea05def7..8454eeac 100644 --- a/src/app/pages/landing/terms/terms.component.spec.ts +++ b/src/app/pages/landing/terms/terms.component.spec.ts @@ -9,7 +9,7 @@ describe('TermsComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [TermsComponent], + imports: [TermsComponent], }).compileComponents(); fixture = TestBed.createComponent(TermsComponent); diff --git a/src/app/pages/landing/terms/terms.component.ts b/src/app/pages/landing/terms/terms.component.ts index e2512a58..fb90a8af 100644 --- a/src/app/pages/landing/terms/terms.component.ts +++ b/src/app/pages/landing/terms/terms.component.ts @@ -4,6 +4,5 @@ import {Component} from '@angular/core'; selector: 'app-terms', templateUrl: './terms.component.html', styleUrls: ['./terms.component.scss'], - standalone: false, }) export class TermsComponent {} diff --git a/src/app/pages/main.component.spec.ts b/src/app/pages/main.component.spec.ts index 2789e8ea..7c919993 100644 --- a/src/app/pages/main.component.spec.ts +++ b/src/app/pages/main.component.spec.ts @@ -12,8 +12,7 @@ describe('MainComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [MainComponent], - imports: [IonLabel, IonIcon, IonTabButton, IonTabBar, IonTabs, RouterTestingModule], + imports: [IonLabel, IonIcon, IonTabButton, IonTabBar, IonTabs, RouterTestingModule, MainComponent], }).compileComponents(); fixture = TestBed.createComponent(MainComponent); diff --git a/src/app/pages/main.component.ts b/src/app/pages/main.component.ts index e1967e8a..7aa3b8e7 100644 --- a/src/app/pages/main.component.ts +++ b/src/app/pages/main.component.ts @@ -7,7 +7,6 @@ import {filter, map} from 'rxjs/operators'; selector: 'app-main', templateUrl: './main.component.html', styleUrls: ['./main.component.scss'], - standalone: false, }) export class MainComponent { isMainPage$: Observable; diff --git a/src/app/pages/not-found/not-found.component.spec.ts b/src/app/pages/not-found/not-found.component.spec.ts index 1653b46b..5117e90e 100644 --- a/src/app/pages/not-found/not-found.component.spec.ts +++ b/src/app/pages/not-found/not-found.component.spec.ts @@ -13,7 +13,7 @@ describe('NotFoundComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [NotFoundComponent], + imports: [NotFoundComponent], providers: [provideTranslocoTesting()], }).compileComponents(); diff --git a/src/app/pages/playground/playground.component.spec.ts b/src/app/pages/playground/playground.component.spec.ts index bf3477af..978d126d 100644 --- a/src/app/pages/playground/playground.component.spec.ts +++ b/src/app/pages/playground/playground.component.spec.ts @@ -17,8 +17,14 @@ describe('PlaygroundComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [PlaygroundComponent], - imports: [AppTranslocoTestingModule, AppNgxsModule, IonicModule.forRoot(), SettingsModule, VideoModule], + imports: [ + AppTranslocoTestingModule, + AppNgxsModule, + IonicModule.forRoot(), + SettingsModule, + VideoModule, + PlaygroundComponent, + ], }).compileComponents(); }); diff --git a/src/app/pages/playground/playground.component.ts b/src/app/pages/playground/playground.component.ts index dbac2c24..67b3b890 100644 --- a/src/app/pages/playground/playground.component.ts +++ b/src/app/pages/playground/playground.component.ts @@ -10,7 +10,6 @@ import {Observable} from 'rxjs'; selector: 'app-playground', templateUrl: './playground.component.html', styleUrls: ['./playground.component.scss'], - standalone: false, }) export class PlaygroundComponent extends BaseComponent implements OnInit { receiveVideo$: Observable; diff --git a/src/app/pages/settings/settings-about/settings-about.component.spec.ts b/src/app/pages/settings/settings-about/settings-about.component.spec.ts index f699ab2b..d42deaa5 100644 --- a/src/app/pages/settings/settings-about/settings-about.component.spec.ts +++ b/src/app/pages/settings/settings-about/settings-about.component.spec.ts @@ -12,8 +12,7 @@ describe('SettingsAboutComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [SettingsAboutComponent], - imports: [AppTranslocoTestingModule, IonicModule.forRoot()], + imports: [AppTranslocoTestingModule, IonicModule.forRoot(), SettingsAboutComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], }).compileComponents(); diff --git a/src/app/pages/settings/settings-about/settings-about.component.ts b/src/app/pages/settings/settings-about/settings-about.component.ts index 6fd4d87d..ed983f95 100644 --- a/src/app/pages/settings/settings-about/settings-about.component.ts +++ b/src/app/pages/settings/settings-about/settings-about.component.ts @@ -1,10 +1,13 @@ import {Component} from '@angular/core'; +import {TranslocoDirective, TranslocoPipe} from '@ngneat/transloco'; +import {IonicModule} from '@ionic/angular'; +import {RouterLink} from '@angular/router'; @Component({ selector: 'app-settings-about', templateUrl: './settings-about.component.html', styleUrls: ['./settings-about.component.scss'], - standalone: false, + imports: [TranslocoDirective, IonicModule, RouterLink, TranslocoPipe], }) export class SettingsAboutComponent { legalPages: string[] = ['terms', 'privacy', 'licenses']; diff --git a/src/app/pages/settings/settings-appearance/settings-appearance-images/settings-appearance-images.component.spec.ts b/src/app/pages/settings/settings-appearance/settings-appearance-images/settings-appearance-images.component.spec.ts index 6afa8fb6..6e5b2a8c 100644 --- a/src/app/pages/settings/settings-appearance/settings-appearance-images/settings-appearance-images.component.spec.ts +++ b/src/app/pages/settings/settings-appearance/settings-appearance-images/settings-appearance-images.component.spec.ts @@ -15,12 +15,12 @@ describe('SettingsAppearanceImagesComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [SettingsAppearanceImagesComponent], imports: [ AppTranslocoTestingModule, MatTooltipModule, IonicModule.forRoot(), NgxsModule.forRoot([SettingsState], ngxsConfig), + SettingsAppearanceImagesComponent, ], }).compileComponents(); diff --git a/src/app/pages/settings/settings-appearance/settings-appearance-images/settings-appearance-images.component.ts b/src/app/pages/settings/settings-appearance/settings-appearance-images/settings-appearance-images.component.ts index 75bb1661..59ad7345 100644 --- a/src/app/pages/settings/settings-appearance/settings-appearance-images/settings-appearance-images.component.ts +++ b/src/app/pages/settings/settings-appearance/settings-appearance-images/settings-appearance-images.component.ts @@ -1,12 +1,16 @@ import {Component, Input} from '@angular/core'; import {BaseSettingsComponent} from '../../../../modules/settings/settings.component'; import {Store} from '@ngxs/store'; +import {TranslocoDirective} from '@ngneat/transloco'; +import {MatTooltip} from '@angular/material/tooltip'; +import {IonicModule} from '@ionic/angular'; +import {AsyncPipe} from '@angular/common'; @Component({ selector: 'app-settings-appearance-images', templateUrl: './settings-appearance-images.component.html', styleUrls: ['./settings-appearance-images.component.scss'], - standalone: false, + imports: [TranslocoDirective, MatTooltip, IonicModule, AsyncPipe], }) export class SettingsAppearanceImagesComponent extends BaseSettingsComponent { @Input() scale = 1; diff --git a/src/app/pages/settings/settings-appearance/settings-appearance.component.spec.ts b/src/app/pages/settings/settings-appearance/settings-appearance.component.spec.ts index 6b2544df..21133731 100644 --- a/src/app/pages/settings/settings-appearance/settings-appearance.component.spec.ts +++ b/src/app/pages/settings/settings-appearance/settings-appearance.component.spec.ts @@ -16,12 +16,13 @@ describe('SettingsAppearanceComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [SettingsAppearanceComponent, SettingsAppearanceImagesComponent], imports: [ AppTranslocoTestingModule, MatTooltipModule, IonicModule.forRoot(), NgxsModule.forRoot([SettingsState], ngxsConfig), + SettingsAppearanceComponent, + SettingsAppearanceImagesComponent, ], }).compileComponents(); diff --git a/src/app/pages/settings/settings-appearance/settings-appearance.component.ts b/src/app/pages/settings/settings-appearance/settings-appearance.component.ts index 44b2eb69..b700ac0d 100644 --- a/src/app/pages/settings/settings-appearance/settings-appearance.component.ts +++ b/src/app/pages/settings/settings-appearance/settings-appearance.component.ts @@ -1,9 +1,12 @@ import {Component} from '@angular/core'; +import {TranslocoDirective, TranslocoPipe} from '@ngneat/transloco'; +import {IonicModule} from '@ionic/angular'; +import {SettingsAppearanceImagesComponent} from './settings-appearance-images/settings-appearance-images.component'; @Component({ templateUrl: './settings-appearance.component.html', selector: 'app-settings-appearance', styleUrls: ['./settings-appearance.component.scss'], - standalone: false, + imports: [TranslocoDirective, IonicModule, SettingsAppearanceImagesComponent, TranslocoPipe], }) export class SettingsAppearanceComponent {} diff --git a/src/app/pages/settings/settings-feedback/settings-feedback.component.spec.ts b/src/app/pages/settings/settings-feedback/settings-feedback.component.spec.ts index dc990829..af640818 100644 --- a/src/app/pages/settings/settings-feedback/settings-feedback.component.spec.ts +++ b/src/app/pages/settings/settings-feedback/settings-feedback.component.spec.ts @@ -14,8 +14,12 @@ describe('SettingsFeedbackComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [SettingsFeedbackComponent], - imports: [AppTranslocoTestingModule, IonicModule.forRoot(), NgxsModule.forRoot([SettingsState], ngxsConfig)], + imports: [ + AppTranslocoTestingModule, + IonicModule.forRoot(), + NgxsModule.forRoot([SettingsState], ngxsConfig), + SettingsFeedbackComponent, + ], }).compileComponents(); fixture = TestBed.createComponent(SettingsFeedbackComponent); diff --git a/src/app/pages/settings/settings-feedback/settings-feedback.component.ts b/src/app/pages/settings/settings-feedback/settings-feedback.component.ts index 59310016..a6793e31 100644 --- a/src/app/pages/settings/settings-feedback/settings-feedback.component.ts +++ b/src/app/pages/settings/settings-feedback/settings-feedback.component.ts @@ -1,9 +1,11 @@ import {Component} from '@angular/core'; +import {TranslocoDirective, TranslocoPipe} from '@ngneat/transloco'; +import {IonicModule} from '@ionic/angular'; @Component({ selector: 'app-settings-feedback', templateUrl: './settings-feedback.component.html', styleUrls: ['./settings-feedback.component.scss'], - standalone: false, + imports: [TranslocoDirective, IonicModule, TranslocoPipe], }) export class SettingsFeedbackComponent {} diff --git a/src/app/pages/settings/settings-menu/settings-menu.component.spec.ts b/src/app/pages/settings/settings-menu/settings-menu.component.spec.ts index 278a004b..0ccaa078 100644 --- a/src/app/pages/settings/settings-menu/settings-menu.component.spec.ts +++ b/src/app/pages/settings/settings-menu/settings-menu.component.spec.ts @@ -11,8 +11,7 @@ describe('SettingsMenuComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [SettingsMenuComponent], - imports: [AppTranslocoTestingModule, IonicModule.forRoot()], + imports: [AppTranslocoTestingModule, IonicModule.forRoot(), SettingsMenuComponent], }).compileComponents(); fixture = TestBed.createComponent(SettingsMenuComponent); diff --git a/src/app/pages/settings/settings-menu/settings-menu.component.ts b/src/app/pages/settings/settings-menu/settings-menu.component.ts index 3651cce8..e1926ff9 100644 --- a/src/app/pages/settings/settings-menu/settings-menu.component.ts +++ b/src/app/pages/settings/settings-menu/settings-menu.component.ts @@ -5,6 +5,8 @@ import {SettingsVoiceInputComponent} from '../settings-voice-input/settings-voic import {SettingsVoiceOutputComponent} from '../settings-voice-output/settings-voice-output.component'; import {SettingsFeedbackComponent} from '../settings-feedback/settings-feedback.component'; import {SettingsAppearanceComponent} from '../settings-appearance/settings-appearance.component'; +import {TranslocoDirective} from '@ngneat/transloco'; +import {IonicModule} from '@ionic/angular'; interface Page { path: string; @@ -21,7 +23,7 @@ interface PagesGroup { selector: 'app-settings-menu', templateUrl: './settings-menu.component.html', styleUrls: ['./settings-menu.component.scss'], - standalone: false, + imports: [TranslocoDirective, IonicModule], }) export class SettingsMenuComponent { groups: PagesGroup[] = [ diff --git a/src/app/pages/settings/settings-offline/settings-offline.component.spec.ts b/src/app/pages/settings/settings-offline/settings-offline.component.spec.ts index 64d43e64..2179a9a1 100644 --- a/src/app/pages/settings/settings-offline/settings-offline.component.spec.ts +++ b/src/app/pages/settings/settings-offline/settings-offline.component.spec.ts @@ -15,7 +15,6 @@ describe('SettingsOfflineComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [SettingsOfflineComponent], imports: [ MatTreeModule, IonicModule.forRoot(), @@ -23,6 +22,7 @@ describe('SettingsOfflineComponent', () => { NgxFilesizeModule, AppTranslocoTestingModule, AppNgxsModule, + SettingsOfflineComponent, ], }).compileComponents(); diff --git a/src/app/pages/settings/settings-offline/settings-offline.component.ts b/src/app/pages/settings/settings-offline/settings-offline.component.ts index f96585de..851674d4 100644 --- a/src/app/pages/settings/settings-offline/settings-offline.component.ts +++ b/src/app/pages/settings/settings-offline/settings-offline.component.ts @@ -1,11 +1,23 @@ import {Component, OnInit} from '@angular/core'; import {isIOS} from '../../../core/constants'; import {AssetsService, AssetState} from '../../../core/services/assets/assets.service'; -import {MatTreeNestedDataSource} from '@angular/material/tree'; +import { + MatTreeNestedDataSource, + MatTree, + MatTreeNodeDef, + MatTreeNode, + MatNestedTreeNode, + MatTreeNodeToggle, + MatTreeNodeOutlet, +} from '@angular/material/tree'; import {NestedTreeControl} from '@angular/cdk/tree'; -import {TranslocoService} from '@ngneat/transloco'; +import {TranslocoService, TranslocoDirective, TranslocoPipe} from '@ngneat/transloco'; import {takeUntil, tap} from 'rxjs/operators'; import {BaseComponent} from '../../../components/base/base.component'; +import {IonicModule} from '@ionic/angular'; +import {MatProgressSpinner} from '@angular/material/progress-spinner'; +import {NgTemplateOutlet} from '@angular/common'; +import {NgxFilesizeModule} from 'ngx-filesize'; const OFFLINE_PATHS = { avatarGlb: '3d/character.glb', @@ -28,7 +40,20 @@ if (!isIOS) { selector: 'app-settings-offline', templateUrl: './settings-offline.component.html', styleUrls: ['./settings-offline.component.scss'], - standalone: false, + imports: [ + TranslocoDirective, + IonicModule, + MatProgressSpinner, + MatTree, + MatTreeNodeDef, + MatTreeNode, + NgTemplateOutlet, + MatNestedTreeNode, + MatTreeNodeToggle, + MatTreeNodeOutlet, + TranslocoPipe, + NgxFilesizeModule, + ], }) export class SettingsOfflineComponent extends BaseComponent implements OnInit { localFiles: {[key: string]: AssetState} = {}; diff --git a/src/app/pages/settings/settings-voice-input/settings-voice-input.component.spec.ts b/src/app/pages/settings/settings-voice-input/settings-voice-input.component.spec.ts index bbfefe7f..c73a8b51 100644 --- a/src/app/pages/settings/settings-voice-input/settings-voice-input.component.spec.ts +++ b/src/app/pages/settings/settings-voice-input/settings-voice-input.component.spec.ts @@ -15,12 +15,12 @@ describe('SettingsVoiceInputComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [SettingsVoiceInputComponent], imports: [ MatTooltipModule, AppTranslocoTestingModule, IonicModule.forRoot(), NgxsModule.forRoot([SettingsState], ngxsConfig), + SettingsVoiceInputComponent, ], }).compileComponents(); diff --git a/src/app/pages/settings/settings-voice-input/settings-voice-input.component.ts b/src/app/pages/settings/settings-voice-input/settings-voice-input.component.ts index 70faa84a..bfc6556f 100644 --- a/src/app/pages/settings/settings-voice-input/settings-voice-input.component.ts +++ b/src/app/pages/settings/settings-voice-input/settings-voice-input.component.ts @@ -1,9 +1,11 @@ import {Component} from '@angular/core'; +import {TranslocoDirective, TranslocoPipe} from '@ngneat/transloco'; +import {IonicModule} from '@ionic/angular'; @Component({ selector: 'app-settings-voice-input', templateUrl: './settings-voice-input.component.html', styleUrls: ['./settings-voice-input.component.scss'], - standalone: false, + imports: [TranslocoDirective, IonicModule, TranslocoPipe], }) export class SettingsVoiceInputComponent {} diff --git a/src/app/pages/settings/settings-voice-output/settings-voice-output.component.spec.ts b/src/app/pages/settings/settings-voice-output/settings-voice-output.component.spec.ts index dca91903..c0ba2d9b 100644 --- a/src/app/pages/settings/settings-voice-output/settings-voice-output.component.spec.ts +++ b/src/app/pages/settings/settings-voice-output/settings-voice-output.component.spec.ts @@ -15,12 +15,12 @@ describe('SettingsVoiceOutputComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [SettingsVoiceOutputComponent], imports: [ MatTooltipModule, AppTranslocoTestingModule, IonicModule.forRoot(), NgxsModule.forRoot([SettingsState], ngxsConfig), + SettingsVoiceOutputComponent, ], }).compileComponents(); diff --git a/src/app/pages/settings/settings-voice-output/settings-voice-output.component.ts b/src/app/pages/settings/settings-voice-output/settings-voice-output.component.ts index 4ff17a61..37607ab8 100644 --- a/src/app/pages/settings/settings-voice-output/settings-voice-output.component.ts +++ b/src/app/pages/settings/settings-voice-output/settings-voice-output.component.ts @@ -1,9 +1,11 @@ import {Component} from '@angular/core'; +import {TranslocoDirective, TranslocoPipe} from '@ngneat/transloco'; +import {IonicModule} from '@ionic/angular'; @Component({ selector: 'app-settings-voice-output', templateUrl: './settings-voice-output.component.html', styleUrls: ['./settings-voice-output.component.scss'], - standalone: false, + imports: [TranslocoDirective, IonicModule, TranslocoPipe], }) export class SettingsVoiceOutputComponent {} diff --git a/src/app/pages/settings/settings.component.spec.ts b/src/app/pages/settings/settings.component.spec.ts index d4425116..c473a2b9 100644 --- a/src/app/pages/settings/settings.component.spec.ts +++ b/src/app/pages/settings/settings.component.spec.ts @@ -22,8 +22,12 @@ xdescribe('SettingsPageComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ - SettingsPageComponent, + imports: [ + IonicModule.forRoot(), + RouterTestingModule, + MatTreeModule, + CdkTreeModule, + AppTranslocoTestingModule, SettingsOfflineComponent, SettingsAppearanceComponent, SettingsFeedbackComponent, @@ -32,8 +36,8 @@ xdescribe('SettingsPageComponent', () => { SettingsVoiceOutputComponent, SettingsMenuComponent, SettingsAppearanceImagesComponent, + SettingsPageComponent, ], - imports: [IonicModule.forRoot(), RouterTestingModule, MatTreeModule, CdkTreeModule, AppTranslocoTestingModule], }).compileComponents(); fixture = TestBed.createComponent(SettingsPageComponent); diff --git a/src/app/pages/settings/settings.component.ts b/src/app/pages/settings/settings.component.ts index 1ebf341e..8a764ae7 100644 --- a/src/app/pages/settings/settings.component.ts +++ b/src/app/pages/settings/settings.component.ts @@ -3,7 +3,6 @@ import {SettingsMenuComponent} from './settings-menu/settings-menu.component'; @Component({ template: '', - standalone: false, }) export class SettingsPageComponent { component = SettingsMenuComponent; diff --git a/src/app/pages/settings/settings.module.ts b/src/app/pages/settings/settings.module.ts index f5f16457..d8a52cd3 100644 --- a/src/app/pages/settings/settings.module.ts +++ b/src/app/pages/settings/settings.module.ts @@ -19,17 +19,7 @@ import {MatTooltipModule} from '@angular/material/tooltip'; import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'; @NgModule({ - declarations: [ - SettingsPageComponent, - SettingsOfflineComponent, - SettingsAppearanceComponent, - SettingsFeedbackComponent, - SettingsAboutComponent, - SettingsVoiceInputComponent, - SettingsVoiceOutputComponent, - SettingsMenuComponent, - SettingsAppearanceImagesComponent, - ], + declarations: [SettingsPageComponent], imports: [ CommonModule, AppTranslocoModule, @@ -40,6 +30,14 @@ import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'; MatTreeModule, CdkTreeModule, IonicModule, + SettingsOfflineComponent, + SettingsAppearanceComponent, + SettingsFeedbackComponent, + SettingsAboutComponent, + SettingsVoiceInputComponent, + SettingsVoiceOutputComponent, + SettingsMenuComponent, + SettingsAppearanceImagesComponent, ], bootstrap: [SettingsPageComponent], exports: [SettingsAppearanceComponent, SettingsAppearanceImagesComponent], diff --git a/src/app/pages/translate/drop-pose-file/drop-pose-file.component.spec.ts b/src/app/pages/translate/drop-pose-file/drop-pose-file.component.spec.ts index 1fdc5181..18aa3fe0 100644 --- a/src/app/pages/translate/drop-pose-file/drop-pose-file.component.spec.ts +++ b/src/app/pages/translate/drop-pose-file/drop-pose-file.component.spec.ts @@ -16,8 +16,11 @@ describe('DropPoseFileComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [DropPoseFileComponent, DropzoneDirective], - imports: [NgxsModule.forRoot([SettingsState, TranslateState], ngxsConfig)], + imports: [ + NgxsModule.forRoot([SettingsState, TranslateState], ngxsConfig), + DropPoseFileComponent, + DropzoneDirective, + ], providers: [provideHttpClient(), provideHttpClientTesting()], }).compileComponents(); diff --git a/src/app/pages/translate/input/button/button.component.spec.ts b/src/app/pages/translate/input/button/button.component.spec.ts index 2726c735..9ce9d11c 100644 --- a/src/app/pages/translate/input/button/button.component.spec.ts +++ b/src/app/pages/translate/input/button/button.component.spec.ts @@ -19,12 +19,12 @@ describe('TranslateInputButtonComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [TranslateInputButtonComponent], imports: [ IonicModule.forRoot(), AppTranslocoTestingModule, NgxsModule.forRoot([SettingsState], ngxsConfig), TranslateModule, + TranslateInputButtonComponent, ], providers: [provideHttpClient(), provideHttpClientTesting()], }).compileComponents(); diff --git a/src/app/pages/translate/language-selector/language-selector.component.spec.ts b/src/app/pages/translate/language-selector/language-selector.component.spec.ts index 2e7f9be5..6bdde4fe 100644 --- a/src/app/pages/translate/language-selector/language-selector.component.spec.ts +++ b/src/app/pages/translate/language-selector/language-selector.component.spec.ts @@ -21,7 +21,6 @@ describe('LanguageSelectorComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [LanguageSelectorComponent], imports: [ AppTranslocoTestingModule, MatTooltipModule, @@ -30,6 +29,7 @@ describe('LanguageSelectorComponent', () => { NoopAnimationsModule, IonicModule.forRoot(), NgxsModule.forRoot([SettingsState, TranslateState], ngxsConfig), + LanguageSelectorComponent, ], providers: [provideHttpClient(), provideHttpClientTesting()], }).compileComponents(); diff --git a/src/app/pages/translate/language-selectors/language-selectors.component.spec.ts b/src/app/pages/translate/language-selectors/language-selectors.component.spec.ts index 5076e170..3dc6a917 100644 --- a/src/app/pages/translate/language-selectors/language-selectors.component.spec.ts +++ b/src/app/pages/translate/language-selectors/language-selectors.component.spec.ts @@ -17,9 +17,12 @@ describe('LanguageSelectorsComponent', () => { beforeEach(() => { TestBed.configureTestingModule({ - declarations: [LanguageSelectorsComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], - imports: [NgxsModule.forRoot([SettingsState, TranslateState], ngxsConfig), AppTranslocoTestingModule], + imports: [ + NgxsModule.forRoot([SettingsState, TranslateState], ngxsConfig), + AppTranslocoTestingModule, + LanguageSelectorsComponent, + ], providers: [provideHttpClient(), provideHttpClientTesting()], }); fixture = TestBed.createComponent(LanguageSelectorsComponent); diff --git a/src/app/pages/translate/pose-viewers/avatar-pose-viewer/avatar-pose-viewer.component.spec.ts b/src/app/pages/translate/pose-viewers/avatar-pose-viewer/avatar-pose-viewer.component.spec.ts index acb99b6d..78b3afca 100644 --- a/src/app/pages/translate/pose-viewers/avatar-pose-viewer/avatar-pose-viewer.component.spec.ts +++ b/src/app/pages/translate/pose-viewers/avatar-pose-viewer/avatar-pose-viewer.component.spec.ts @@ -9,8 +9,7 @@ describe('AvatarPoseViewerComponent', () => { let fixture: ComponentFixture; beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [AvatarPoseViewerComponent], - imports: [AppNgxsModule], + imports: [AppNgxsModule, AvatarPoseViewerComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], }).compileComponents(); }); diff --git a/src/app/pages/translate/pose-viewers/human-pose-viewer/human-pose-viewer.component.spec.ts b/src/app/pages/translate/pose-viewers/human-pose-viewer/human-pose-viewer.component.spec.ts index 801423e9..806d9daa 100644 --- a/src/app/pages/translate/pose-viewers/human-pose-viewer/human-pose-viewer.component.spec.ts +++ b/src/app/pages/translate/pose-viewers/human-pose-viewer/human-pose-viewer.component.spec.ts @@ -16,12 +16,12 @@ describe('HumanPoseViewerComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [HumanPoseViewerComponent], imports: [ Pix2PixModule, IonicModule.forRoot(), NgxsModule.forRoot([SettingsState], ngxsConfig), AppTranslocoTestingModule, + HumanPoseViewerComponent, ], schemas: [CUSTOM_ELEMENTS_SCHEMA], }).compileComponents(); diff --git a/src/app/pages/translate/pose-viewers/pose-viewer.component.ts b/src/app/pages/translate/pose-viewers/pose-viewer.component.ts index 71020039..6ac35597 100644 --- a/src/app/pages/translate/pose-viewers/pose-viewer.component.ts +++ b/src/app/pages/translate/pose-viewers/pose-viewer.component.ts @@ -11,7 +11,6 @@ import {isChrome} from '../../../core/constants'; selector: 'app-pose-viewer', template: ``, styles: [], - standalone: false, }) export abstract class BasePoseViewerComponent extends BaseComponent implements OnInit, OnDestroy { @ViewChild('poseViewer') poseEl: ElementRef; diff --git a/src/app/pages/translate/pose-viewers/skeleton-pose-viewer/skeleton-pose-viewer.component.spec.ts b/src/app/pages/translate/pose-viewers/skeleton-pose-viewer/skeleton-pose-viewer.component.spec.ts index 75157fd9..cca56d3c 100644 --- a/src/app/pages/translate/pose-viewers/skeleton-pose-viewer/skeleton-pose-viewer.component.spec.ts +++ b/src/app/pages/translate/pose-viewers/skeleton-pose-viewer/skeleton-pose-viewer.component.spec.ts @@ -13,8 +13,7 @@ describe('SkeletonPoseViewerComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [SkeletonPoseViewerComponent], - imports: [NgxsModule.forRoot([SettingsState], ngxsConfig)], + imports: [NgxsModule.forRoot([SettingsState], ngxsConfig), SkeletonPoseViewerComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], }).compileComponents(); }); diff --git a/src/app/pages/translate/pose-viewers/viewer-selector/viewer-selector.component.spec.ts b/src/app/pages/translate/pose-viewers/viewer-selector/viewer-selector.component.spec.ts index 0afd0c4c..00bc7a29 100644 --- a/src/app/pages/translate/pose-viewers/viewer-selector/viewer-selector.component.spec.ts +++ b/src/app/pages/translate/pose-viewers/viewer-selector/viewer-selector.component.spec.ts @@ -16,13 +16,13 @@ describe('ViewerSelectorComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ViewerSelectorComponent], imports: [ AppTranslocoTestingModule, MatTooltipModule, IonicModule.forRoot(), NoopAnimationsModule, NgxsModule.forRoot([SettingsState], ngxsConfig), + ViewerSelectorComponent, ], }).compileComponents(); }); diff --git a/src/app/pages/translate/send-feedback/send-feedback.component.spec.ts b/src/app/pages/translate/send-feedback/send-feedback.component.spec.ts index 68818d75..aa12cf44 100644 --- a/src/app/pages/translate/send-feedback/send-feedback.component.spec.ts +++ b/src/app/pages/translate/send-feedback/send-feedback.component.spec.ts @@ -10,8 +10,7 @@ describe('SendFeedbackComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [SendFeedbackComponent], - imports: [AppTranslocoTestingModule], + imports: [AppTranslocoTestingModule, SendFeedbackComponent], }).compileComponents(); fixture = TestBed.createComponent(SendFeedbackComponent); diff --git a/src/app/pages/translate/signed-to-spoken/signed-language-input/signed-language-input.component.spec.ts b/src/app/pages/translate/signed-to-spoken/signed-language-input/signed-language-input.component.spec.ts index 7d81fa33..dcfa7254 100644 --- a/src/app/pages/translate/signed-to-spoken/signed-language-input/signed-language-input.component.spec.ts +++ b/src/app/pages/translate/signed-to-spoken/signed-language-input/signed-language-input.component.spec.ts @@ -14,8 +14,13 @@ describe('SignedLanguageInputComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [SignedLanguageInputComponent, UploadComponent], - imports: [AppTranslocoTestingModule, IonicModule.forRoot(), NgxsModule.forRoot([], ngxsConfig)], + imports: [ + AppTranslocoTestingModule, + IonicModule.forRoot(), + NgxsModule.forRoot([], ngxsConfig), + SignedLanguageInputComponent, + UploadComponent, + ], }).compileComponents(); fixture = TestBed.createComponent(SignedLanguageInputComponent); diff --git a/src/app/pages/translate/signed-to-spoken/signed-to-spoken.component.spec.ts b/src/app/pages/translate/signed-to-spoken/signed-to-spoken.component.spec.ts index 08795072..46c74191 100644 --- a/src/app/pages/translate/signed-to-spoken/signed-to-spoken.component.spec.ts +++ b/src/app/pages/translate/signed-to-spoken/signed-to-spoken.component.spec.ts @@ -18,9 +18,12 @@ describe('SignedToSpokenComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [SignedToSpokenComponent, TextToSpeechComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], - imports: [NgxsModule.forRoot([SettingsState, TranslateState, VideoState], ngxsConfig)], + imports: [ + NgxsModule.forRoot([SettingsState, TranslateState, VideoState], ngxsConfig), + SignedToSpokenComponent, + TextToSpeechComponent, + ], providers: [provideHttpClient(), provideHttpClientTesting()], }).compileComponents(); }); diff --git a/src/app/pages/translate/signed-to-spoken/upload/upload.component.spec.ts b/src/app/pages/translate/signed-to-spoken/upload/upload.component.spec.ts index 1ddfc3df..99aab022 100644 --- a/src/app/pages/translate/signed-to-spoken/upload/upload.component.spec.ts +++ b/src/app/pages/translate/signed-to-spoken/upload/upload.component.spec.ts @@ -23,8 +23,7 @@ describe('UploadComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [UploadComponent], - imports: [AppTranslocoTestingModule, IonicModule.forRoot(), NgxsModule.forRoot([], ngxsConfig)], + imports: [AppTranslocoTestingModule, IonicModule.forRoot(), NgxsModule.forRoot([], ngxsConfig), UploadComponent], }).compileComponents(); }); diff --git a/src/app/pages/translate/signwriting/sign-writing.component.spec.ts b/src/app/pages/translate/signwriting/sign-writing.component.spec.ts index 020a2ae7..906fe833 100644 --- a/src/app/pages/translate/signwriting/sign-writing.component.spec.ts +++ b/src/app/pages/translate/signwriting/sign-writing.component.spec.ts @@ -26,9 +26,12 @@ describe('SignWritingComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [SignWritingComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], - imports: [NgxsModule.forRoot([SettingsState, TranslateState], ngxsConfig), MatTooltipModule], + imports: [ + NgxsModule.forRoot([SettingsState, TranslateState], ngxsConfig), + MatTooltipModule, + SignWritingComponent, + ], providers: [provideHttpClient(), provideHttpClientTesting()], }).compileComponents(); diff --git a/src/app/pages/translate/spoken-to-signed/signed-language-output/signed-language-output.component.spec.ts b/src/app/pages/translate/spoken-to-signed/signed-language-output/signed-language-output.component.spec.ts index c298f8fb..c080bff1 100644 --- a/src/app/pages/translate/spoken-to-signed/signed-language-output/signed-language-output.component.spec.ts +++ b/src/app/pages/translate/spoken-to-signed/signed-language-output/signed-language-output.component.spec.ts @@ -17,9 +17,12 @@ describe('SignedLanguageOutputComponent', () => { beforeEach(() => { TestBed.configureTestingModule({ - declarations: [SignedLanguageOutputComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], - imports: [NgxsModule.forRoot([SettingsState, TranslateState], ngxsConfig), AppTranslocoTestingModule], + imports: [ + NgxsModule.forRoot([SettingsState, TranslateState], ngxsConfig), + AppTranslocoTestingModule, + SignedLanguageOutputComponent, + ], providers: [provideHttpClient(), provideHttpClientTesting()], }); fixture = TestBed.createComponent(SignedLanguageOutputComponent); diff --git a/src/app/pages/translate/spoken-to-signed/spoken-language-input/desktop-textarea/desktop-textarea.component.spec.ts b/src/app/pages/translate/spoken-to-signed/spoken-language-input/desktop-textarea/desktop-textarea.component.spec.ts index 68ff9f84..d2530ff8 100644 --- a/src/app/pages/translate/spoken-to-signed/spoken-language-input/desktop-textarea/desktop-textarea.component.spec.ts +++ b/src/app/pages/translate/spoken-to-signed/spoken-language-input/desktop-textarea/desktop-textarea.component.spec.ts @@ -15,8 +15,12 @@ describe('DesktopTextareaComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [DesktopTextareaComponent], - imports: [ReactiveFormsModule, NgxsModule.forRoot([SettingsState], ngxsConfig), TranslateModule], + imports: [ + ReactiveFormsModule, + NgxsModule.forRoot([SettingsState], ngxsConfig), + TranslateModule, + DesktopTextareaComponent, + ], providers: [provideHttpClient(), provideHttpClientTesting()], }).compileComponents(); diff --git a/src/app/pages/translate/spoken-to-signed/spoken-language-input/spoken-language-input.component.spec.ts b/src/app/pages/translate/spoken-to-signed/spoken-language-input/spoken-language-input.component.spec.ts index ac3e0ed3..48bc3fa5 100644 --- a/src/app/pages/translate/spoken-to-signed/spoken-language-input/spoken-language-input.component.spec.ts +++ b/src/app/pages/translate/spoken-to-signed/spoken-language-input/spoken-language-input.component.spec.ts @@ -21,7 +21,6 @@ describe('SpokenLanguageInputComponent', () => { beforeEach(() => { TestBed.configureTestingModule({ - declarations: [SpokenLanguageInputComponent, DesktopTextareaComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [ NgxsModule.forRoot([SettingsState], ngxsConfig), @@ -29,6 +28,8 @@ describe('SpokenLanguageInputComponent', () => { FormsModule, ReactiveFormsModule, AppTranslocoTestingModule, + SpokenLanguageInputComponent, + DesktopTextareaComponent, ], providers: [provideHttpClient(), provideHttpClientTesting()], }); diff --git a/src/app/pages/translate/spoken-to-signed/spoken-to-signed.component.spec.ts b/src/app/pages/translate/spoken-to-signed/spoken-to-signed.component.spec.ts index 190bc6d2..130d3aae 100644 --- a/src/app/pages/translate/spoken-to-signed/spoken-to-signed.component.spec.ts +++ b/src/app/pages/translate/spoken-to-signed/spoken-to-signed.component.spec.ts @@ -20,13 +20,15 @@ describe('SpokenToSignedComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [SpokenToSignedComponent, SignWritingComponent, TextToSpeechComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [ NgxsModule.forRoot([SettingsState, TranslateState], ngxsConfig), FormsModule, ReactiveFormsModule, AppTranslocoTestingModule, + SpokenToSignedComponent, + SignWritingComponent, + TextToSpeechComponent, ], providers: [provideHttpClient(), provideHttpClientTesting()], }).compileComponents(); diff --git a/src/app/pages/translate/translate-desktop/translate-desktop.component.spec.ts b/src/app/pages/translate/translate-desktop/translate-desktop.component.spec.ts index 3c659986..585abd8c 100644 --- a/src/app/pages/translate/translate-desktop/translate-desktop.component.spec.ts +++ b/src/app/pages/translate/translate-desktop/translate-desktop.component.spec.ts @@ -22,7 +22,6 @@ describe('TranslateDesktopComponent', () => { beforeEach(() => { TestBed.configureTestingModule({ - declarations: [TranslateDesktopComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [ AppTranslocoTestingModule, @@ -31,6 +30,7 @@ describe('TranslateDesktopComponent', () => { NoopAnimationsModule, NgxsModule.forRoot([SettingsState, TranslateState, VideoState], ngxsConfig), RouterTestingModule, + TranslateDesktopComponent, ], providers: [provideHttpClient(), provideHttpClientTesting()], }); diff --git a/src/app/pages/translate/translate-mobile/translate-mobile.component.spec.ts b/src/app/pages/translate/translate-mobile/translate-mobile.component.spec.ts index fc75c29c..6d677701 100644 --- a/src/app/pages/translate/translate-mobile/translate-mobile.component.spec.ts +++ b/src/app/pages/translate/translate-mobile/translate-mobile.component.spec.ts @@ -22,7 +22,6 @@ describe('TranslateMobileComponent', () => { beforeEach(() => { TestBed.configureTestingModule({ - declarations: [TranslateMobileComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [ AppTranslocoTestingModule, @@ -31,6 +30,7 @@ describe('TranslateMobileComponent', () => { NoopAnimationsModule, NgxsModule.forRoot([SettingsState, TranslateState, VideoState], ngxsConfig), RouterTestingModule, + TranslateMobileComponent, ], providers: [provideHttpClient(), provideHttpClientTesting()], }); diff --git a/src/app/pages/translate/translate.component.spec.ts b/src/app/pages/translate/translate.component.spec.ts index d496a8c9..48eb15e8 100644 --- a/src/app/pages/translate/translate.component.spec.ts +++ b/src/app/pages/translate/translate.component.spec.ts @@ -25,7 +25,6 @@ describe('TranslateComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [TranslateComponent, LanguageSelectorComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [ AppTranslocoTestingModule, @@ -34,6 +33,8 @@ describe('TranslateComponent', () => { NoopAnimationsModule, NgxsModule.forRoot([SettingsState, TranslateState, VideoState], ngxsConfig), RouterTestingModule, + TranslateComponent, + LanguageSelectorComponent, ], providers: [provideHttpClient(), provideHttpClientTesting()], }).compileComponents(); From 400c1f85bbd326234568e59f32aece120b94c984 Mon Sep 17 00:00:00 2001 From: Amit Moryossef Date: Sun, 24 Nov 2024 09:53:05 +0100 Subject: [PATCH 08/30] chore(): run inject migration --- src/app/app.component.ts | 16 ++++++++-------- .../animation/animation.component.ts | 8 ++++++-- .../i18n-language-selector.component.ts | 10 ++++++++-- src/app/components/map/map.component.ts | 8 +++----- .../video-controls/video-controls.component.ts | 7 +++---- src/app/components/video/video.component.ts | 14 +++++++------- .../modules/ngxs/store/video/video.state.ts | 7 +++++-- .../core/modules/transloco/transloco.loader.ts | 4 ++-- .../core/modules/transloco/transloco.module.ts | 6 ------ .../directives/keyboard-flying.directive.ts | 14 ++++++++------ src/app/modules/animation/animation.service.ts | 7 ++++--- src/app/modules/animation/animation.state.ts | 7 +++++-- src/app/modules/detector/detector.service.ts | 7 ++++--- src/app/modules/detector/detector.state.ts | 7 +++++-- src/app/modules/pix2pix/pix2pix.service.ts | 7 ++++--- .../modules/pose/pose-normalization.service.ts | 7 ++++--- src/app/modules/pose/pose.service.ts | 7 ++++--- src/app/modules/pose/pose.state.ts | 5 +++-- src/app/modules/settings/settings.component.ts | 6 ++++-- .../settings/settings/settings.component.ts | 6 +----- src/app/modules/sign-writing/body.service.ts | 5 +++-- src/app/modules/sign-writing/face.service.ts | 12 +++++------- src/app/modules/sign-writing/hands.service.ts | 12 +++++------- .../sign-writing/sign-writing.service.ts | 8 +++++--- .../modules/sign-writing/sign-writing.state.ts | 18 +++++++++--------- .../language-detection/cld3.service.ts | 8 ++++++-- .../language-detection/mediapipe.service.ts | 8 ++++++-- .../signwriting-translation.service.ts | 7 ++++--- src/app/modules/translate/translate.service.ts | 6 +++--- src/app/modules/translate/translate.state.ts | 16 ++++++++-------- src/app/pages/benchmark/benchmark.component.ts | 14 ++++++-------- .../about/about-api/about-api.component.ts | 6 ++++-- .../about-benefits.component.html | 6 +++--- .../about-benefits/about-benefits.component.ts | 9 ++++----- .../about-direction.component.ts | 9 ++++----- src/app/pages/landing/landing.component.ts | 6 ++++-- .../landing/licenses/licenses.component.ts | 6 +++--- src/app/pages/main.component.ts | 15 ++++++--------- .../pages/playground/playground.component.ts | 7 +++++-- .../settings-appearance-images.component.ts | 6 +----- .../settings-offline.component.ts | 9 ++++----- .../drop-pose-file/drop-pose-file.component.ts | 6 ++++-- .../translate/input/button/button.component.ts | 6 ++++-- .../language-selector.component.ts | 7 +++++-- .../language-selectors.component.ts | 10 ++++++---- .../avatar-pose-viewer.component.ts | 6 +----- .../human-pose-viewer.component.ts | 17 ++++++++++++----- .../pose-viewers/pose-viewer.component.ts | 9 ++++----- .../skeleton-pose-viewer.component.ts | 10 ---------- .../viewer-selector.component.ts | 7 +++---- .../signed-to-spoken.component.ts | 6 ++++-- .../upload/upload.component.ts | 6 ++++-- .../signwriting/sign-writing.component.ts | 7 +++++-- .../signed-language-output.component.ts | 7 +++++-- .../desktop-textarea.component.ts | 6 ++++-- .../spoken-language-input.component.ts | 6 ++++-- .../translate-desktop.component.ts | 10 +++++----- .../translate-mobile.component.ts | 8 ++------ src/app/pages/translate/translate.component.ts | 18 +++++++++--------- 59 files changed, 267 insertions(+), 238 deletions(-) diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 21eda153..b02158b8 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,4 +1,4 @@ -import {AfterViewInit, Component} from '@angular/core'; +import {AfterViewInit, Component, inject} from '@angular/core'; import {TranslocoService} from '@ngneat/transloco'; import {filter, tap} from 'rxjs/operators'; import {Store} from '@ngxs/store'; @@ -19,15 +19,15 @@ import {IonApp, IonRouterOutlet} from '@ionic/angular/standalone'; standalone: true, }) export class AppComponent implements AfterViewInit { + private meta = inject(Meta); + private ga = inject(GoogleAnalyticsService); + private transloco = inject(TranslocoService); + private router = inject(Router); + private store = inject(Store); + urlParams = this.getUrlParams(); - constructor( - private meta: Meta, - private ga: GoogleAnalyticsService, - private transloco: TranslocoService, - private router: Router, - private store: Store - ) { + constructor() { this.listenLanguageChange(); this.logRouterNavigation(); this.checkURLEmbedding(); diff --git a/src/app/components/animation/animation.component.ts b/src/app/components/animation/animation.component.ts index d99ce270..9921960e 100644 --- a/src/app/components/animation/animation.component.ts +++ b/src/app/components/animation/animation.component.ts @@ -1,4 +1,4 @@ -import {AfterViewInit, Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, Input, ViewChild} from '@angular/core'; +import {AfterViewInit, Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, Input, ViewChild, inject} from '@angular/core'; import {Store} from '@ngxs/store'; import {AnimationStateModel} from '../../modules/animation/animation.state'; import {BaseComponent} from '../base/base.component'; @@ -16,6 +16,10 @@ import {Observable} from 'rxjs'; schemas: [CUSTOM_ELEMENTS_SCHEMA], }) export class AnimationComponent extends BaseComponent implements AfterViewInit { + private store = inject(Store); + private three = inject(ThreeService); + private assets = inject(AssetsService); + animationState$: Observable; @ViewChild('modelViewer') modelViewerEl: ElementRef; @@ -24,7 +28,7 @@ export class AnimationComponent extends BaseComponent implements AfterViewInit { static isCustomElementDefined = false; - constructor(private store: Store, private three: ThreeService, private assets: AssetsService) { + constructor() { super(); this.animationState$ = this.store.select(state => state.animation); diff --git a/src/app/components/i18n-language-selector/i18n-language-selector.component.ts b/src/app/components/i18n-language-selector/i18n-language-selector.component.ts index aa4a7d59..62a4c695 100644 --- a/src/app/components/i18n-language-selector/i18n-language-selector.component.ts +++ b/src/app/components/i18n-language-selector/i18n-language-selector.component.ts @@ -1,4 +1,4 @@ -import {Component} from '@angular/core'; +import {Component, inject} from '@angular/core'; import {TranslocoService} from '@ngneat/transloco'; import {ActivatedRoute, Router} from '@angular/router'; import {SITE_LANGUAGES} from '../../core/modules/transloco/languages'; @@ -9,11 +9,17 @@ import {SITE_LANGUAGES} from '../../core/modules/transloco/languages'; styleUrls: ['./i18n-language-selector.component.scss'], }) export class I18NLanguageSelectorComponent { + private router = inject(Router); + private route = inject(ActivatedRoute); + private transloco = inject(TranslocoService); + current: string; languages = this.groupLanguages(); - constructor(private router: Router, private route: ActivatedRoute, private transloco: TranslocoService) { + constructor() { + const transloco = this.transloco; + this.current = transloco.getActiveLang(); } diff --git a/src/app/components/map/map.component.ts b/src/app/components/map/map.component.ts index abfd4233..09da934e 100644 --- a/src/app/components/map/map.component.ts +++ b/src/app/components/map/map.component.ts @@ -1,4 +1,4 @@ -import {Component, NgModule, OnInit} from '@angular/core'; +import {Component, NgModule, OnInit, inject} from '@angular/core'; import {geoJSON, latLng, Map, tileLayer} from 'leaflet'; import {HttpClient, provideHttpClient} from '@angular/common/http'; import {firstValueFrom} from 'rxjs'; @@ -16,6 +16,8 @@ function logMax(arr: number[]) { imports: [LeafletModule], }) export class MapComponent extends BaseComponent implements OnInit { + private http = inject(HttpClient); + static mapGeoJson = null; options = { @@ -29,10 +31,6 @@ export class MapComponent extends BaseComponent implements OnInit { zoomSnap: 0.1, }; - constructor(private http: HttpClient) { - super(); - } - ngOnInit() { if (!('document' in globalThis)) { return; diff --git a/src/app/components/video/video-controls/video-controls.component.ts b/src/app/components/video/video-controls/video-controls.component.ts index 0985f8e5..fc803bda 100644 --- a/src/app/components/video/video-controls/video-controls.component.ts +++ b/src/app/components/video/video-controls/video-controls.component.ts @@ -1,4 +1,4 @@ -import {Component} from '@angular/core'; +import {Component, inject} from '@angular/core'; import {Store} from '@ngxs/store'; import {BaseSettingsComponent} from '../../../modules/settings/settings.component'; import {MatTooltip} from '@angular/material/tooltip'; @@ -16,9 +16,8 @@ import {TranslocoDirective} from '@ngneat/transloco'; imports: [MatTooltip, AsyncPipe, IonFab, IonFabButton, IonIcon, TranslocoDirective], }) export class VideoControlsComponent extends BaseSettingsComponent { - constructor(store: Store) { - super(store); - + constructor() { + super(); addIcons({videocamOutline, videocamOffOutline}); } } diff --git a/src/app/components/video/video.component.ts b/src/app/components/video/video.component.ts index 5643ad8c..9668aef5 100644 --- a/src/app/components/video/video.component.ts +++ b/src/app/components/video/video.component.ts @@ -1,4 +1,4 @@ -import {AfterViewInit, Component, ElementRef, HostBinding, Input, ViewChild} from '@angular/core'; +import {AfterViewInit, Component, ElementRef, HostBinding, Input, ViewChild, inject} from '@angular/core'; import {Store} from '@ngxs/store'; import {combineLatest, firstValueFrom, Observable} from 'rxjs'; import {VideoSettings, VideoStateModel} from '../../core/modules/ngxs/store/video/video.state'; @@ -28,6 +28,11 @@ import {TranslocoDirective, TranslocoPipe} from '@ngneat/transloco'; imports: [AnimationComponent, VideoControlsComponent, IonIcon, AsyncPipe, TranslocoPipe, TranslocoDirective], }) export class VideoComponent extends BaseComponent implements AfterViewInit { + private store = inject(Store); + private poseService = inject(PoseService); + private signWritingService = inject(SignWritingService); + private elementRef = inject(ElementRef); + settingsState$!: Observable; animatePose$!: Observable; @@ -53,12 +58,7 @@ export class VideoComponent extends BaseComponent implements AfterViewInit { fpsStats = new Stats(); signingStats = new Stats(); - constructor( - private store: Store, - private poseService: PoseService, - private signWritingService: SignWritingService, - private elementRef: ElementRef - ) { + constructor() { super(); this.settingsState$ = this.store.select(state => state.settings); diff --git a/src/app/core/modules/ngxs/store/video/video.state.ts b/src/app/core/modules/ngxs/store/video/video.state.ts index fe36941e..3ae6f323 100644 --- a/src/app/core/modules/ngxs/store/video/video.state.ts +++ b/src/app/core/modules/ngxs/store/video/video.state.ts @@ -1,4 +1,4 @@ -import {Injectable} from '@angular/core'; +import {Injectable, inject} from '@angular/core'; import {Action, NgxsOnInit, State, StateContext, Store} from '@ngxs/store'; import {filter, tap} from 'rxjs/operators'; import {SetVideo, StartCamera, StopVideo} from './video.actions'; @@ -35,9 +35,12 @@ const initialState: VideoStateModel = { defaults: initialState, }) export class VideoState implements NgxsOnInit { + private store = inject(Store); + private navigator = inject(NavigatorService); + receiveVideo$: Observable; - constructor(private store: Store, private navigator: NavigatorService) { + constructor() { this.receiveVideo$ = this.store.select(state => state.settings.receiveVideo); } diff --git a/src/app/core/modules/transloco/transloco.loader.ts b/src/app/core/modules/transloco/transloco.loader.ts index 3b4b0bcc..5b388591 100644 --- a/src/app/core/modules/transloco/transloco.loader.ts +++ b/src/app/core/modules/transloco/transloco.loader.ts @@ -1,11 +1,11 @@ import {HttpClient} from '@angular/common/http'; import {Translation, TRANSLOCO_SCOPE, TranslocoLoader} from '@ngneat/transloco'; -import {Injectable} from '@angular/core'; +import {Injectable, inject} from '@angular/core'; import {catchError, Observable} from 'rxjs'; @Injectable({providedIn: 'root'}) export class HttpLoader implements TranslocoLoader { - constructor(private http: HttpClient) {} + private http = inject(HttpClient); getTranslation(langPath: string): Observable { return this.http.get(`assets/i18n/${langPath}.json`).pipe( diff --git a/src/app/core/modules/transloco/transloco.module.ts b/src/app/core/modules/transloco/transloco.module.ts index a5f3bb2e..f6f6a6e1 100644 --- a/src/app/core/modules/transloco/transloco.module.ts +++ b/src/app/core/modules/transloco/transloco.module.ts @@ -21,9 +21,3 @@ export const AppTranslocoProviders = [ }), translocoScopes, ]; - -@NgModule({ - exports: [TranslocoModule], - providers: AppTranslocoProviders, -}) -export class AppTranslocoModule {} diff --git a/src/app/directives/keyboard-flying.directive.ts b/src/app/directives/keyboard-flying.directive.ts index aeb1a52e..d9a4052f 100644 --- a/src/app/directives/keyboard-flying.directive.ts +++ b/src/app/directives/keyboard-flying.directive.ts @@ -1,5 +1,5 @@ import {DOCUMENT} from '@angular/common'; -import {Directive, ElementRef, Inject, OnDestroy, OnInit} from '@angular/core'; +import {Directive, ElementRef, OnDestroy, OnInit, inject} from '@angular/core'; import {Capacitor, PluginListenerHandle} from '@capacitor/core'; import {Keyboard, KeyboardResize} from '@capacitor/keyboard'; import {Animation, AnimationController} from '@ionic/angular'; @@ -8,6 +8,10 @@ import {Animation, AnimationController} from '@ionic/angular'; selector: '[appKeyboardFlying]', }) export class KeyboardFlyingDirective implements OnInit, OnDestroy { + private document = inject(DOCUMENT); + private elementReference = inject>(ElementRef); + private animationController = inject(AnimationController); + // This class intends to fix the input shows only after the keyboard is shown fully // Instead, we animate the input to fly up with the keyboard roughly // Issues: @@ -22,11 +26,9 @@ export class KeyboardFlyingDirective implements OnInit, OnDestroy { private resizeModeBackup?: KeyboardResize; - constructor( - @Inject(DOCUMENT) private document: Document, - private elementReference: ElementRef, - private animationController: AnimationController - ) { + constructor() { + const elementReference = this.elementReference; + // https://gist.github.com/jondot/1317ee27bab54c482e87 this.animation = this.animationController .create() diff --git a/src/app/modules/animation/animation.service.ts b/src/app/modules/animation/animation.service.ts index aebff07d..a4705ad8 100644 --- a/src/app/modules/animation/animation.service.ts +++ b/src/app/modules/animation/animation.service.ts @@ -1,6 +1,6 @@ import type {Tensor} from '@tensorflow/tfjs'; import type {LayersModel} from '@tensorflow/tfjs-layers'; -import {Injectable} from '@angular/core'; +import {Injectable, inject} from '@angular/core'; import {EstimatedPose} from '../pose/pose.state'; import {TensorflowService} from '../../core/services/tfjs/tfjs.service'; import {PoseService} from '../pose/pose.service'; @@ -68,9 +68,10 @@ const ANIMATION_KEYS = [ providedIn: 'root', }) export class AnimationService { - sequentialModel: LayersModel; + private tf = inject(TensorflowService); + private poseService = inject(PoseService); - constructor(private tf: TensorflowService, private poseService: PoseService) {} + sequentialModel: LayersModel; async loadModel(): Promise { await this.tf.load(); diff --git a/src/app/modules/animation/animation.state.ts b/src/app/modules/animation/animation.state.ts index 4994acf6..744b9a95 100644 --- a/src/app/modules/animation/animation.state.ts +++ b/src/app/modules/animation/animation.state.ts @@ -1,4 +1,4 @@ -import {Injectable} from '@angular/core'; +import {Injectable, inject} from '@angular/core'; import {Action, NgxsOnInit, State, StateContext, Store} from '@ngxs/store'; import {AnimationService} from './animation.service'; import {filter, first, tap} from 'rxjs/operators'; @@ -20,11 +20,14 @@ const initialState: AnimationStateModel = { defaults: initialState, }) export class AnimationState implements NgxsOnInit { + private store = inject(Store); + private animation = inject(AnimationService); + isAnimatePose = false; pose$!: Observable; animatePose$!: Observable; - constructor(private store: Store, private animation: AnimationService) { + constructor() { this.pose$ = this.store.select(state => state.pose.pose); this.animatePose$ = this.store.select(state => state.settings.animatePose); } diff --git a/src/app/modules/detector/detector.service.ts b/src/app/modules/detector/detector.service.ts index 954dc888..371cf23c 100644 --- a/src/app/modules/detector/detector.service.ts +++ b/src/app/modules/detector/detector.service.ts @@ -1,7 +1,7 @@ import type {Tensor} from '@tensorflow/tfjs'; import {EMPTY_LANDMARK, EstimatedPose, PoseLandmark} from '../pose/pose.state'; import type {LayersModel} from '@tensorflow/tfjs-layers'; -import {Injectable} from '@angular/core'; +import {Injectable, inject} from '@angular/core'; import {TensorflowService} from '../../core/services/tfjs/tfjs.service'; import {MediapipeHolisticService} from '../../core/services/holistic.service'; @@ -11,6 +11,9 @@ const WINDOW_SIZE = 20; providedIn: 'root', }) export class DetectorService { + private tf = inject(TensorflowService); + private holistic = inject(MediapipeHolisticService); + lastPose: PoseLandmark[]; lastTimestamp: number; @@ -19,8 +22,6 @@ export class DetectorService { sequentialModel: LayersModel; - constructor(private tf: TensorflowService, private holistic: MediapipeHolisticService) {} - async loadModel() { return Promise.all([ this.holistic.load(), diff --git a/src/app/modules/detector/detector.state.ts b/src/app/modules/detector/detector.state.ts index 35a867e8..3ece4d20 100644 --- a/src/app/modules/detector/detector.state.ts +++ b/src/app/modules/detector/detector.state.ts @@ -1,4 +1,4 @@ -import {Injectable} from '@angular/core'; +import {Injectable, inject} from '@angular/core'; import {Action, NgxsOnInit, State, StateContext, Store} from '@ngxs/store'; import {DetectorService} from './detector.service'; import {DetectSigning} from './detector.actions'; @@ -22,11 +22,14 @@ const initialState: DetectorStateModel = { defaults: initialState, }) export class DetectorState implements NgxsOnInit { + private store = inject(Store); + private detector = inject(DetectorService); + detectSign = false; pose$: Observable; detectSign$: Observable; - constructor(private store: Store, private detector: DetectorService) { + constructor() { this.pose$ = this.store.select(state => state.pose.pose); this.detectSign$ = this.store.select(state => state.settings.detectSign); } diff --git a/src/app/modules/pix2pix/pix2pix.service.ts b/src/app/modules/pix2pix/pix2pix.service.ts index d5a39b91..66cac621 100644 --- a/src/app/modules/pix2pix/pix2pix.service.ts +++ b/src/app/modules/pix2pix/pix2pix.service.ts @@ -1,4 +1,4 @@ -import {Injectable} from '@angular/core'; +import {Injectable, inject} from '@angular/core'; import * as comlink from 'comlink'; import {GoogleAnalyticsService} from '../../core/modules/google-analytics/google-analytics.service'; import {AssetsService} from '../../core/services/assets/assets.service'; @@ -13,14 +13,15 @@ interface Pix2PixModel { providedIn: 'root', }) export class Pix2PixService { + private ga = inject(GoogleAnalyticsService); + private assets = inject(AssetsService); + worker: comlink.Remote | Pix2PixModel; isFirstFrame = true; queueId = 0; - constructor(private ga: GoogleAnalyticsService, private assets: AssetsService) {} - async loadModel(): Promise { this.queueId++; diff --git a/src/app/modules/pose/pose-normalization.service.ts b/src/app/modules/pose/pose-normalization.service.ts index c8a01ee6..f872b8bd 100644 --- a/src/app/modules/pose/pose-normalization.service.ts +++ b/src/app/modules/pose/pose-normalization.service.ts @@ -1,4 +1,4 @@ -import {Injectable} from '@angular/core'; +import {Injectable, inject} from '@angular/core'; import type {Tensor} from '@tensorflow/tfjs-core'; import type {Vector3} from 'three'; import {TensorflowService} from '../../core/services/tfjs/tfjs.service'; @@ -13,9 +13,10 @@ export interface PlaneNormal { providedIn: 'root', }) export class PoseNormalizationService { - model?: any; + tf = inject(TensorflowService); + private three = inject(ThreeService); - constructor(public tf: TensorflowService, private three: ThreeService) {} + model?: any; normal(vectors: Vector3[], planeIdx: [number, number, number]): PlaneNormal { const triangle = planeIdx.map(i => vectors[i]); diff --git a/src/app/modules/pose/pose.service.ts b/src/app/modules/pose/pose.service.ts index b8a7ec70..3a0d8853 100644 --- a/src/app/modules/pose/pose.service.ts +++ b/src/app/modules/pose/pose.service.ts @@ -1,4 +1,4 @@ -import {Injectable} from '@angular/core'; +import {Injectable, inject} from '@angular/core'; import * as drawing from '@mediapipe/drawing_utils/drawing_utils.js'; import {EMPTY_LANDMARK, EstimatedPose, PoseLandmark} from './pose.state'; import {GoogleAnalyticsService} from '../../core/modules/google-analytics/google-analytics.service'; @@ -10,6 +10,9 @@ const IGNORED_BODY_LANDMARKS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 15, 16, 17, 18 providedIn: 'root', }) export class PoseService { + private ga = inject(GoogleAnalyticsService); + private holistic = inject(MediapipeHolisticService); + model?: any; // loadPromise must be static, in case multiple PoseService instances are created (during testing) @@ -18,8 +21,6 @@ export class PoseService { isFirstFrame = true; onResultsCallbacks = []; - constructor(private ga: GoogleAnalyticsService, private holistic: MediapipeHolisticService) {} - onResults(onResultsCallback) { this.onResultsCallbacks.push(onResultsCallback); } diff --git a/src/app/modules/pose/pose.state.ts b/src/app/modules/pose/pose.state.ts index f8b33dab..5ab208a8 100644 --- a/src/app/modules/pose/pose.state.ts +++ b/src/app/modules/pose/pose.state.ts @@ -1,4 +1,4 @@ -import {Injectable} from '@angular/core'; +import {Injectable, inject} from '@angular/core'; import {Action, NgxsOnInit, State, StateContext, Store} from '@ngxs/store'; import {PoseService} from './pose.service'; import {LoadPoseEstimationModel, PoseVideoFrame, StoreFramePose} from './pose.actions'; @@ -36,7 +36,8 @@ const initialState: PoseStateModel = { defaults: initialState, }) export class PoseState implements NgxsOnInit { - constructor(private poseService: PoseService, private store: Store) {} + private poseService = inject(PoseService); + private store = inject(Store); ngxsOnInit(): void { this.poseService.onResults(results => { diff --git a/src/app/modules/settings/settings.component.ts b/src/app/modules/settings/settings.component.ts index b45f70e6..80a910f8 100644 --- a/src/app/modules/settings/settings.component.ts +++ b/src/app/modules/settings/settings.component.ts @@ -2,14 +2,16 @@ import {SettingsStateModel} from './settings.state'; import {SetSetting} from './settings.actions'; import {Store} from '@ngxs/store'; import {BaseComponent} from '../../components/base/base.component'; -import {Directive} from '@angular/core'; +import {Directive, inject} from '@angular/core'; import {Observable} from 'rxjs'; @Directive() export abstract class BaseSettingsComponent extends BaseComponent { + protected store = inject(Store); + settingsState$: Observable; - protected constructor(protected store: Store) { + protected constructor() { super(); this.settingsState$ = this.store.select(state => state.settings); diff --git a/src/app/modules/settings/settings/settings.component.ts b/src/app/modules/settings/settings/settings.component.ts index 5c8def6f..6b5a2af6 100644 --- a/src/app/modules/settings/settings/settings.component.ts +++ b/src/app/modules/settings/settings/settings.component.ts @@ -1,4 +1,4 @@ -import {Component, OnInit} from '@angular/core'; +import {Component, OnInit, inject} from '@angular/core'; import {BaseSettingsComponent} from '../settings.component'; import {takeUntil, tap} from 'rxjs/operators'; import {Store} from '@ngxs/store'; @@ -22,10 +22,6 @@ export class SettingsComponent extends BaseSettingsComponent implements OnInit { ]; settings = {}; - constructor(store: Store) { - super(store); - } - ngOnInit(): void { this.settingsState$ .pipe( diff --git a/src/app/modules/sign-writing/body.service.ts b/src/app/modules/sign-writing/body.service.ts index 7fa56acc..76beaa72 100644 --- a/src/app/modules/sign-writing/body.service.ts +++ b/src/app/modules/sign-writing/body.service.ts @@ -1,4 +1,4 @@ -import {Injectable} from '@angular/core'; +import {Injectable, inject} from '@angular/core'; import {SignWritingService} from './sign-writing.service'; import {PoseLandmark} from '../pose/pose.state'; import {ThreeService} from '../../core/services/three.service'; @@ -20,7 +20,8 @@ export interface BodyStateModel { providedIn: 'root', }) export class BodyService { - constructor(private three: ThreeService, private holistic: MediapipeHolisticService) {} + private three = inject(ThreeService); + private holistic = inject(MediapipeHolisticService); shoulders(landmarks: PoseLandmark[]): BodyShoulders { const p1 = landmarks[this.holistic.POSE_LANDMARKS.LEFT_SHOULDER]; diff --git a/src/app/modules/sign-writing/face.service.ts b/src/app/modules/sign-writing/face.service.ts index abd38329..90168675 100644 --- a/src/app/modules/sign-writing/face.service.ts +++ b/src/app/modules/sign-writing/face.service.ts @@ -1,4 +1,4 @@ -import {Injectable} from '@angular/core'; +import {Injectable, inject} from '@angular/core'; import type {Vector2, Vector3} from 'three'; import {SignWritingStateModel} from './sign-writing.state'; import {SignWritingService} from './sign-writing.service'; @@ -36,13 +36,11 @@ const FACE_MAP = { providedIn: 'root', }) export class FaceService { - faceSequentialModel: LayersModel; + private poseNormalization = inject(PoseNormalizationService); + private tf = inject(TensorflowService); + private three = inject(ThreeService); - constructor( - private poseNormalization: PoseNormalizationService, - private tf: TensorflowService, - private three: ThreeService - ) {} + faceSequentialModel: LayersModel; async loadModel(): Promise { await Promise.all([this.tf.load(), this.three.load()]); diff --git a/src/app/modules/sign-writing/hands.service.ts b/src/app/modules/sign-writing/hands.service.ts index 72eef73b..7500b2fc 100644 --- a/src/app/modules/sign-writing/hands.service.ts +++ b/src/app/modules/sign-writing/hands.service.ts @@ -1,4 +1,4 @@ -import {Injectable} from '@angular/core'; +import {Injectable, inject} from '@angular/core'; import {SignWritingStateModel} from './sign-writing.state'; import {SignWritingService} from './sign-writing.service'; import type {LayersModel} from '@tensorflow/tfjs-layers'; @@ -25,16 +25,14 @@ export interface HandStateModel { providedIn: 'root', }) export class HandsService { + private poseNormalization = inject(PoseNormalizationService); + private tf = inject(TensorflowService); + private three = inject(ThreeService); + // Need two models because they are stateful leftHandSequentialModel: LayersModel; rightHandSequentialModel: LayersModel; - constructor( - private poseNormalization: PoseNormalizationService, - private tf: TensorflowService, - private three: ThreeService - ) {} - async loadModel(): Promise { await Promise.all([this.tf.load(), this.three.load()]); diff --git a/src/app/modules/sign-writing/sign-writing.service.ts b/src/app/modules/sign-writing/sign-writing.service.ts index d0fbe6cd..8a1409fd 100644 --- a/src/app/modules/sign-writing/sign-writing.service.ts +++ b/src/app/modules/sign-writing/sign-writing.service.ts @@ -1,4 +1,4 @@ -import {Injectable} from '@angular/core'; +import {Injectable, inject} from '@angular/core'; import {HandsService} from './hands.service'; import {SignWritingStateModel} from './sign-writing.state'; import {BodyService} from './body.service'; @@ -10,11 +10,13 @@ import type {font} from '@sutton-signwriting/font-ttf'; providedIn: 'root', }) export class SignWritingService { + private bodyService = inject(BodyService); + private faceService = inject(FaceService); + private handsService = inject(HandsService); + static font: Promise; static fontsLoaded = false; - constructor(private bodyService: BodyService, private faceService: FaceService, private handsService: HandsService) {} - static get fontsModule() { if (!SignWritingService.font) { SignWritingService.font = import( diff --git a/src/app/modules/sign-writing/sign-writing.state.ts b/src/app/modules/sign-writing/sign-writing.state.ts index 25929c67..5a2452e6 100644 --- a/src/app/modules/sign-writing/sign-writing.state.ts +++ b/src/app/modules/sign-writing/sign-writing.state.ts @@ -1,4 +1,4 @@ -import {Injectable} from '@angular/core'; +import {Injectable, inject} from '@angular/core'; import {Action, NgxsOnInit, State, StateContext, Store} from '@ngxs/store'; import {EstimatedPose} from '../pose/pose.state'; import {filter, first, tap} from 'rxjs/operators'; @@ -33,18 +33,18 @@ const initialState: SignWritingStateModel = { defaults: initialState, }) export class SignWritingState implements NgxsOnInit { + private store = inject(Store); + private bodyService = inject(BodyService); + private faceService = inject(FaceService); + private handsService = inject(HandsService); + private three = inject(ThreeService); + private holistic = inject(MediapipeHolisticService); + drawSignWriting = false; pose$: Observable; drawSignWriting$: Observable; - constructor( - private store: Store, - private bodyService: BodyService, - private faceService: FaceService, - private handsService: HandsService, - private three: ThreeService, - private holistic: MediapipeHolisticService - ) { + constructor() { this.pose$ = this.store.select(state => state.pose.pose); this.drawSignWriting$ = this.store.select(state => state.settings.drawSignWriting); } diff --git a/src/app/modules/translate/language-detection/cld3.service.ts b/src/app/modules/translate/language-detection/cld3.service.ts index 38059660..3e23e620 100644 --- a/src/app/modules/translate/language-detection/cld3.service.ts +++ b/src/app/modules/translate/language-detection/cld3.service.ts @@ -1,4 +1,4 @@ -import {Injectable} from '@angular/core'; +import {Injectable, inject} from '@angular/core'; import {LanguageIdentifier} from 'cld3-asm'; import {GoogleAnalyticsService} from '../../../core/modules/google-analytics/google-analytics.service'; import {TranslationService} from '../translate.service'; @@ -8,9 +8,13 @@ import {LanguageDetectionService} from './language-detection.service'; providedIn: 'root', }) export class CLD3LanguageDetectionService extends LanguageDetectionService { + private ga = inject(GoogleAnalyticsService); + private cld: LanguageIdentifier; - constructor(private ga: GoogleAnalyticsService, translationService: TranslationService) { + constructor() { + const translationService = inject(TranslationService); + super(translationService); } diff --git a/src/app/modules/translate/language-detection/mediapipe.service.ts b/src/app/modules/translate/language-detection/mediapipe.service.ts index ec95545d..11e0649c 100644 --- a/src/app/modules/translate/language-detection/mediapipe.service.ts +++ b/src/app/modules/translate/language-detection/mediapipe.service.ts @@ -1,4 +1,4 @@ -import {Injectable} from '@angular/core'; +import {Injectable, inject} from '@angular/core'; import {GoogleAnalyticsService} from '../../../core/modules/google-analytics/google-analytics.service'; import {TranslationService} from '../translate.service'; import {LanguageDetectionService} from './language-detection.service'; @@ -8,9 +8,13 @@ import type {LanguageDetector} from '@mediapipe/tasks-text'; providedIn: 'root', }) export class MediaPipeLanguageDetectionService extends LanguageDetectionService { + private ga = inject(GoogleAnalyticsService); + private detector: LanguageDetector; - constructor(private ga: GoogleAnalyticsService, translationService: TranslationService) { + constructor() { + const translationService = inject(TranslationService); + super(translationService); } diff --git a/src/app/modules/translate/signwriting-translation.service.ts b/src/app/modules/translate/signwriting-translation.service.ts index 5e72c7f1..d624751d 100644 --- a/src/app/modules/translate/signwriting-translation.service.ts +++ b/src/app/modules/translate/signwriting-translation.service.ts @@ -1,4 +1,4 @@ -import {Injectable} from '@angular/core'; +import {Injectable, inject} from '@angular/core'; import {catchError, from, Observable} from 'rxjs'; import {HttpClient} from '@angular/common/http'; import {AssetsService} from '../../core/services/assets/assets.service'; @@ -11,12 +11,13 @@ type TranslationDirection = 'spoken-to-signed' | 'signed-to-spoken'; providedIn: 'root', }) export class SignWritingTranslationService { + private http = inject(HttpClient); + private assets = inject(AssetsService); + worker: ComlinkWorkerInterface; loadedModel: string; - constructor(private http: HttpClient, private assets: AssetsService) {} - async initWorker() { if (this.worker) { return; diff --git a/src/app/modules/translate/translate.service.ts b/src/app/modules/translate/translate.service.ts index 976a2297..260f39a1 100644 --- a/src/app/modules/translate/translate.service.ts +++ b/src/app/modules/translate/translate.service.ts @@ -1,4 +1,4 @@ -import {Injectable} from '@angular/core'; +import {Injectable, inject} from '@angular/core'; import {Observable} from 'rxjs'; import {map} from 'rxjs/operators'; import {HttpClient} from '@angular/common/http'; @@ -7,6 +7,8 @@ import {HttpClient} from '@angular/common/http'; providedIn: 'root', }) export class TranslationService { + private http = inject(HttpClient); + signedLanguages = [ 'ase', 'gsg', @@ -164,8 +166,6 @@ export class TranslationService { 'zu', ]; - constructor(private http: HttpClient) {} - private lastSpokenLanguageSegmenter: {language: string; segmenter: Intl.Segmenter}; splitSpokenSentences(language: string, text: string): string[] { diff --git a/src/app/modules/translate/translate.state.ts b/src/app/modules/translate/translate.state.ts index 3d87333d..cc1b3f97 100644 --- a/src/app/modules/translate/translate.state.ts +++ b/src/app/modules/translate/translate.state.ts @@ -1,4 +1,4 @@ -import {Injectable} from '@angular/core'; +import {Injectable, inject} from '@angular/core'; import {Action, NgxsOnInit, State, StateContext, Store} from '@ngxs/store'; import { ChangeTranslation, @@ -81,16 +81,16 @@ const initialState: TranslateStateModel = { defaults: initialState, }) export class TranslateState implements NgxsOnInit { + private store = inject(Store); + private service = inject(TranslationService); + private swService = inject(SignWritingTranslationService); + private poseService = inject(PoseService); + private languageDetectionService = inject(LanguageDetectionService); + poseViewerSetting$!: Observable; pose$!: Observable; - constructor( - private store: Store, - private service: TranslationService, - private swService: SignWritingTranslationService, - private poseService: PoseService, - private languageDetectionService: LanguageDetectionService - ) { + constructor() { this.poseViewerSetting$ = this.store.select(state => state.settings.poseViewer); this.pose$ = this.store.select(state => state.pose.pose); } diff --git a/src/app/pages/benchmark/benchmark.component.ts b/src/app/pages/benchmark/benchmark.component.ts index 1f0ef0fb..b5a473f1 100644 --- a/src/app/pages/benchmark/benchmark.component.ts +++ b/src/app/pages/benchmark/benchmark.component.ts @@ -1,4 +1,4 @@ -import {Component} from '@angular/core'; +import {Component, inject} from '@angular/core'; import {GoogleAnalyticsService} from '../../core/modules/google-analytics/google-analytics.service'; import {Pix2PixService} from '../../modules/pix2pix/pix2pix.service'; import {PoseService} from '../../modules/pose/pose.service'; @@ -11,6 +11,11 @@ import {LanguageDetectionService} from '../../modules/translate/language-detecti styleUrls: ['./benchmark.component.scss'], }) export class BenchmarkComponent { + private ga = inject(GoogleAnalyticsService); + private pix2pix = inject(Pix2PixService); + private languageDetection = inject(LanguageDetectionService); + private pose = inject(PoseService); + benchmarks = { cld: this.cldBench.bind(this), pix2pix: this.pix2pixBench.bind(this), @@ -19,13 +24,6 @@ export class BenchmarkComponent { stats: {[key: string]: {[key: string]: number[]}} = {}; - constructor( - private ga: GoogleAnalyticsService, - private pix2pix: Pix2PixService, - private languageDetection: LanguageDetectionService, - private pose: PoseService - ) {} - async bench() { for (const bench of Object.values(this.benchmarks)) { try { diff --git a/src/app/pages/landing/about/about-api/about-api.component.ts b/src/app/pages/landing/about/about-api/about-api.component.ts index 98705da9..d2bfd6fb 100644 --- a/src/app/pages/landing/about/about-api/about-api.component.ts +++ b/src/app/pages/landing/about/about-api/about-api.component.ts @@ -1,4 +1,4 @@ -import {Component} from '@angular/core'; +import {Component, inject} from '@angular/core'; import {Store} from '@ngxs/store'; import {Observable} from 'rxjs'; @@ -8,6 +8,8 @@ import {Observable} from 'rxjs'; styleUrls: ['./about-api.component.scss'], }) export class AboutApiComponent { + private store = inject(Store); + appearance$: Observable; code = `curl -X POST \\ @@ -23,7 +25,7 @@ export class AboutApiComponent { videoUrl = ''; - constructor(private store: Store) { + constructor() { this.appearance$ = this.store.select(state => state.settings.appearance); this.appearance$.subscribe(appearance => { diff --git a/src/app/pages/landing/about/about-benefits/about-benefits.component.html b/src/app/pages/landing/about/about-benefits/about-benefits.component.html index d071638b..e15f1df2 100644 --- a/src/app/pages/landing/about/about-benefits/about-benefits.component.html +++ b/src/app/pages/landing/about/about-benefits/about-benefits.component.html @@ -7,8 +7,8 @@

Why use sign.mt?

- @for (slide of slides; track slide.id; let idx = $index) { - + @for (slide of slides; track slide.id; let idx = $index) { @for (slide of slides; track slide) { +
@@ -31,7 +31,7 @@

Why use sign.mt?

- } + } } diff --git a/src/app/pages/landing/about/about-benefits/about-benefits.component.ts b/src/app/pages/landing/about/about-benefits/about-benefits.component.ts index 06333fa8..e5a3620b 100644 --- a/src/app/pages/landing/about/about-benefits/about-benefits.component.ts +++ b/src/app/pages/landing/about/about-benefits/about-benefits.component.ts @@ -1,4 +1,4 @@ -import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core'; +import {AfterViewInit, Component, ElementRef, OnInit, ViewChild, inject} from '@angular/core'; import {Swiper} from 'swiper/types'; import {DomSanitizer, SafeUrl} from '@angular/platform-browser'; import {TranslocoService} from '@ngneat/transloco'; @@ -11,6 +11,9 @@ import {BaseComponent} from '../../../../components/base/base.component'; styleUrls: ['./about-benefits.component.scss'], }) export class AboutBenefitsComponent extends BaseComponent implements AfterViewInit, OnInit { + private transloco = inject(TranslocoService); + private domSanitizer = inject(DomSanitizer); + @ViewChild('swiper', {static: false}) swiper: ElementRef<{swiper: Swiper}>; activeSlide = 0; @@ -24,10 +27,6 @@ export class AboutBenefitsComponent extends BaseComponent implements AfterViewIn iOSScreenshot: SafeUrl; - constructor(private transloco: TranslocoService, private domSanitizer: DomSanitizer) { - super(); - } - ngOnInit() { this.transloco.langChanges$ .pipe( diff --git a/src/app/pages/landing/about/about-direction/about-direction.component.ts b/src/app/pages/landing/about/about-direction/about-direction.component.ts index 6afbb996..685a8cb6 100644 --- a/src/app/pages/landing/about/about-direction/about-direction.component.ts +++ b/src/app/pages/landing/about/about-direction/about-direction.component.ts @@ -1,4 +1,4 @@ -import {Component, OnInit} from '@angular/core'; +import {Component, OnInit, inject} from '@angular/core'; import {TranslocoService} from '@ngneat/transloco'; import {BaseComponent} from '../../../../components/base/base.component'; import {takeUntil, tap} from 'rxjs/operators'; @@ -10,13 +10,12 @@ import {DomSanitizer, SafeUrl} from '@angular/platform-browser'; styleUrls: ['./about-direction.component.scss'], }) export class AboutDirectionComponent extends BaseComponent implements OnInit { + private transloco = inject(TranslocoService); + private domSanitizer = inject(DomSanitizer); + iOSScreenshot: SafeUrl; androidScreenshot: SafeUrl; - constructor(private transloco: TranslocoService, private domSanitizer: DomSanitizer) { - super(); - } - ngOnInit() { this.transloco.langChanges$ .pipe( diff --git a/src/app/pages/landing/landing.component.ts b/src/app/pages/landing/landing.component.ts index f1d8d137..d8113d71 100644 --- a/src/app/pages/landing/landing.component.ts +++ b/src/app/pages/landing/landing.component.ts @@ -1,4 +1,4 @@ -import {Component} from '@angular/core'; +import {Component, inject} from '@angular/core'; import {MediaMatcher} from '@angular/cdk/layout'; @Component({ @@ -7,10 +7,12 @@ import {MediaMatcher} from '@angular/cdk/layout'; styleUrls: ['./landing.component.scss'], }) export class LandingComponent { + private mediaMatcher = inject(MediaMatcher); + pages: string[] = ['about', 'contribute']; isMobile!: MediaQueryList; - constructor(private mediaMatcher: MediaMatcher) { + constructor() { this.isMobile = this.mediaMatcher.matchMedia('(max-width: 768px)'); } } diff --git a/src/app/pages/landing/licenses/licenses.component.ts b/src/app/pages/landing/licenses/licenses.component.ts index e6dbabce..94f41a3f 100644 --- a/src/app/pages/landing/licenses/licenses.component.ts +++ b/src/app/pages/landing/licenses/licenses.component.ts @@ -1,4 +1,4 @@ -import {Component, OnInit} from '@angular/core'; +import {Component, OnInit, inject} from '@angular/core'; import {HttpClient} from '@angular/common/http'; import {NestedTreeControl} from '@angular/cdk/tree'; import {AssetState} from '../../../core/services/assets/assets.service'; @@ -24,11 +24,11 @@ type Node = PackagesParent | PackageLicense; styleUrls: ['./licenses.component.scss'], }) export class LicensesComponent implements OnInit { + private httpClient = inject(HttpClient); + treeControl = new NestedTreeControl((node: any) => node.children); filesTree = new MatTreeNestedDataSource(); - constructor(private httpClient: HttpClient) {} - ngOnInit(): void { this.httpClient.get('/licenses.json').subscribe((licenses: any) => { this.updateTree(licenses); diff --git a/src/app/pages/main.component.ts b/src/app/pages/main.component.ts index 7aa3b8e7..59cdcea2 100644 --- a/src/app/pages/main.component.ts +++ b/src/app/pages/main.component.ts @@ -1,4 +1,4 @@ -import {Component} from '@angular/core'; +import {Component, inject} from '@angular/core'; import {Observable} from 'rxjs'; import {NavigationEnd, Router} from '@angular/router'; import {filter, map} from 'rxjs/operators'; @@ -9,12 +9,9 @@ import {filter, map} from 'rxjs/operators'; styleUrls: ['./main.component.scss'], }) export class MainComponent { - isMainPage$: Observable; - - constructor(private router: Router) { - this.isMainPage$ = this.router.events.pipe( - filter(event => event instanceof NavigationEnd), - map((event: NavigationEnd) => event.urlAfterRedirects === '/') - ); - } + private router = inject(Router); + isMainPage$ = this.router.events.pipe( + filter(event => event instanceof NavigationEnd), + map((event: NavigationEnd) => event.urlAfterRedirects === '/') + ); } diff --git a/src/app/pages/playground/playground.component.ts b/src/app/pages/playground/playground.component.ts index 67b3b890..876f61f7 100644 --- a/src/app/pages/playground/playground.component.ts +++ b/src/app/pages/playground/playground.component.ts @@ -1,4 +1,4 @@ -import {Component, OnInit} from '@angular/core'; +import {Component, OnInit, inject} from '@angular/core'; import {Store} from '@ngxs/store'; import {BaseComponent} from '../../components/base/base.component'; import {filter, takeUntil, tap} from 'rxjs/operators'; @@ -12,9 +12,12 @@ import {Observable} from 'rxjs'; styleUrls: ['./playground.component.scss'], }) export class PlaygroundComponent extends BaseComponent implements OnInit { + private store = inject(Store); + private translocoService = inject(TranslocoService); + receiveVideo$: Observable; - constructor(private store: Store, private translocoService: TranslocoService) { + constructor() { super(); this.receiveVideo$ = this.store.select(state => state.settings.receiveVideo); diff --git a/src/app/pages/settings/settings-appearance/settings-appearance-images/settings-appearance-images.component.ts b/src/app/pages/settings/settings-appearance/settings-appearance-images/settings-appearance-images.component.ts index 59ad7345..4673bb31 100644 --- a/src/app/pages/settings/settings-appearance/settings-appearance-images/settings-appearance-images.component.ts +++ b/src/app/pages/settings/settings-appearance/settings-appearance-images/settings-appearance-images.component.ts @@ -1,4 +1,4 @@ -import {Component, Input} from '@angular/core'; +import {Component, Input, inject} from '@angular/core'; import {BaseSettingsComponent} from '../../../../modules/settings/settings.component'; import {Store} from '@ngxs/store'; import {TranslocoDirective} from '@ngneat/transloco'; @@ -24,8 +24,4 @@ export class SettingsAppearanceImagesComponent extends BaseSettingsComponent { {src: 'assets/appearance/random-6.jpg', title: 'Random', value: '', disabled: true}, {src: 'assets/appearance/random-7.jpg', title: 'Random', value: '', disabled: true}, ]; - - constructor(store: Store) { - super(store); - } } diff --git a/src/app/pages/settings/settings-offline/settings-offline.component.ts b/src/app/pages/settings/settings-offline/settings-offline.component.ts index 851674d4..11db58ff 100644 --- a/src/app/pages/settings/settings-offline/settings-offline.component.ts +++ b/src/app/pages/settings/settings-offline/settings-offline.component.ts @@ -1,4 +1,4 @@ -import {Component, OnInit} from '@angular/core'; +import {Component, OnInit, inject} from '@angular/core'; import {isIOS} from '../../../core/constants'; import {AssetsService, AssetState} from '../../../core/services/assets/assets.service'; import { @@ -56,14 +56,13 @@ if (!isIOS) { ], }) export class SettingsOfflineComponent extends BaseComponent implements OnInit { + private assets = inject(AssetsService); + private transloco = inject(TranslocoService); + localFiles: {[key: string]: AssetState} = {}; treeControl = new NestedTreeControl(node => node.children); filesTree = new MatTreeNestedDataSource(); - constructor(private assets: AssetsService, private transloco: TranslocoService) { - super(); - } - async ngOnInit() { this.localFiles = this.assetInfo('', OFFLINE_PATHS).children; this.updateTree(); diff --git a/src/app/pages/translate/drop-pose-file/drop-pose-file.component.ts b/src/app/pages/translate/drop-pose-file/drop-pose-file.component.ts index 27aa2dd3..3193ef44 100644 --- a/src/app/pages/translate/drop-pose-file/drop-pose-file.component.ts +++ b/src/app/pages/translate/drop-pose-file/drop-pose-file.component.ts @@ -1,4 +1,4 @@ -import {Component, HostBinding} from '@angular/core'; +import {Component, HostBinding, inject} from '@angular/core'; import {Store} from '@ngxs/store'; import {UploadPoseFile} from '../../../modules/translate/translate.actions'; import {DropzoneDirective} from '../../../directives/dropzone.directive'; @@ -11,10 +11,12 @@ import {DropzoneDirective} from '../../../directives/dropzone.directive'; imports: [DropzoneDirective], }) export class DropPoseFileComponent { + private store = inject(Store); + @HostBinding('class.hovering') isHovering = false; - constructor(private store: Store) { + constructor() { this.listenExternalFileOpen(); } diff --git a/src/app/pages/translate/input/button/button.component.ts b/src/app/pages/translate/input/button/button.component.ts index 404f1804..4a807a64 100644 --- a/src/app/pages/translate/input/button/button.component.ts +++ b/src/app/pages/translate/input/button/button.component.ts @@ -1,4 +1,4 @@ -import {Component, Input, OnInit} from '@angular/core'; +import {Component, Input, OnInit, inject} from '@angular/core'; import {InputMode} from '../../../../modules/translate/translate.state'; import {Store} from '@ngxs/store'; import {SetInputMode} from '../../../../modules/translate/translate.actions'; @@ -15,12 +15,14 @@ import {AsyncPipe} from '@angular/common'; imports: [IonButton, IonIcon, TranslocoPipe, AsyncPipe], }) export class TranslateInputButtonComponent { + private store = inject(Store); + inputMode$!: Observable; @Input() mode: InputMode; @Input() icon: string; - constructor(private store: Store) { + constructor() { this.inputMode$ = this.store.select(state => state.translate.inputMode); } diff --git a/src/app/pages/translate/language-selector/language-selector.component.ts b/src/app/pages/translate/language-selector/language-selector.component.ts index 82e7cd20..fd77a059 100644 --- a/src/app/pages/translate/language-selector/language-selector.component.ts +++ b/src/app/pages/translate/language-selector/language-selector.component.ts @@ -1,4 +1,4 @@ -import {Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges} from '@angular/core'; +import {Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, inject} from '@angular/core'; import {Store} from '@ngxs/store'; import {switchMap} from 'rxjs'; import {TranslocoDirective, TranslocoService} from '@ngneat/transloco'; @@ -22,6 +22,9 @@ const IntlTypeMap: {[key: string]: Intl.DisplayNamesType} = {languages: 'languag imports: [IonButton, IonIcon, MatMenuTrigger, FlagIconComponent, MatMenuModule, TranslocoDirective, MatTabsModule], }) export class LanguageSelectorComponent extends BaseComponent implements OnInit, OnChanges { + private store = inject(Store); + private transloco = inject(TranslocoService); + detectedLanguage: string; @Input() flags = false; @@ -40,7 +43,7 @@ export class LanguageSelectorComponent extends BaseComponent implements OnInit, langNames: {[lang: string]: string} = {}; langCountries: {[lang: string]: string} = {}; - constructor(private store: Store, private transloco: TranslocoService) { + constructor() { super(); addIcons({chevronDown}); diff --git a/src/app/pages/translate/language-selectors/language-selectors.component.ts b/src/app/pages/translate/language-selectors/language-selectors.component.ts index 9ef12832..75ab7ef9 100644 --- a/src/app/pages/translate/language-selectors/language-selectors.component.ts +++ b/src/app/pages/translate/language-selectors/language-selectors.component.ts @@ -1,4 +1,4 @@ -import {Component, HostBinding, OnInit} from '@angular/core'; +import {Component, HostBinding, OnInit, inject} from '@angular/core'; import { FlipTranslationDirection, SetSignedLanguage, @@ -13,10 +13,9 @@ import {addIcons} from 'ionicons'; import {swapHorizontal} from 'ionicons/icons'; import {IonButton, IonIcon} from '@ionic/angular/standalone'; import {LanguageSelectorComponent} from '../language-selector/language-selector.component'; -import {AsyncPipe, CommonModule} from '@angular/common'; +import {AsyncPipe} from '@angular/common'; import {MatTooltip} from '@angular/material/tooltip'; import {TranslocoPipe} from '@ngneat/transloco'; -import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; @Component({ selector: 'app-language-selectors', @@ -26,6 +25,9 @@ import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; imports: [IonButton, IonIcon, LanguageSelectorComponent, AsyncPipe, MatTooltip, TranslocoPipe], }) export class LanguageSelectorsComponent extends BaseComponent implements OnInit { + private store = inject(Store); + translation = inject(TranslationService); + spokenToSigned$: Observable; spokenLanguage$: Observable; signedLanguage$: Observable; @@ -33,7 +35,7 @@ export class LanguageSelectorsComponent extends BaseComponent implements OnInit @HostBinding('class.spoken-to-signed') spokenToSigned: boolean; - constructor(private store: Store, public translation: TranslationService) { + constructor() { super(); this.spokenToSigned$ = this.store.select(state => state.translate.spokenToSigned); this.spokenLanguage$ = this.store.select(state => state.translate.spokenLanguage); diff --git a/src/app/pages/translate/pose-viewers/avatar-pose-viewer/avatar-pose-viewer.component.ts b/src/app/pages/translate/pose-viewers/avatar-pose-viewer/avatar-pose-viewer.component.ts index 280eeecd..967fb6ff 100644 --- a/src/app/pages/translate/pose-viewers/avatar-pose-viewer/avatar-pose-viewer.component.ts +++ b/src/app/pages/translate/pose-viewers/avatar-pose-viewer/avatar-pose-viewer.component.ts @@ -1,4 +1,4 @@ -import {AfterViewInit, Component, CUSTOM_ELEMENTS_SCHEMA, Input} from '@angular/core'; +import {AfterViewInit, Component, CUSTOM_ELEMENTS_SCHEMA, Input, inject} from '@angular/core'; import {BasePoseViewerComponent} from '../pose-viewer.component'; import {Store} from '@ngxs/store'; import {fromEvent} from 'rxjs'; @@ -18,10 +18,6 @@ export class AvatarPoseViewerComponent extends BasePoseViewerComponent implement effectiveFps: number = 1; - constructor(store: Store) { - super(store); - } - ngAfterViewInit(): void { const poseEl = this.poseEl.nativeElement; // TODO reset animation through the store diff --git a/src/app/pages/translate/pose-viewers/human-pose-viewer/human-pose-viewer.component.ts b/src/app/pages/translate/pose-viewers/human-pose-viewer/human-pose-viewer.component.ts index 11bd25af..23a6893c 100644 --- a/src/app/pages/translate/pose-viewers/human-pose-viewer/human-pose-viewer.component.ts +++ b/src/app/pages/translate/pose-viewers/human-pose-viewer/human-pose-viewer.component.ts @@ -1,4 +1,13 @@ -import {AfterViewInit, Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, Input, OnDestroy, ViewChild} from '@angular/core'; +import { + AfterViewInit, + Component, + CUSTOM_ELEMENTS_SCHEMA, + ElementRef, + Input, + OnDestroy, + ViewChild, + inject, +} from '@angular/core'; import {Pix2PixService} from '../../../../modules/pix2pix/pix2pix.service'; import {fromEvent, interval} from 'rxjs'; import {takeUntil, tap} from 'rxjs/operators'; @@ -19,6 +28,8 @@ import {TranslocoDirective} from '@ngneat/transloco'; schemas: [CUSTOM_ELEMENTS_SCHEMA], }) export class HumanPoseViewerComponent extends BasePoseViewerComponent implements AfterViewInit, OnDestroy { + private pix2pix = inject(Pix2PixService); + appearance$ = this.store.select(state => state.settings.appearance); @ViewChild('canvas') canvasEl: ElementRef; @@ -32,10 +43,6 @@ export class HumanPoseViewerComponent extends BasePoseViewerComponent implements totalFrames = 1; - constructor(store: Store, private pix2pix: Pix2PixService) { - super(store); - } - ngAfterViewInit(): void { const pose = this.poseEl.nativeElement; diff --git a/src/app/pages/translate/pose-viewers/pose-viewer.component.ts b/src/app/pages/translate/pose-viewers/pose-viewer.component.ts index 6ac35597..b1a3f31f 100644 --- a/src/app/pages/translate/pose-viewers/pose-viewer.component.ts +++ b/src/app/pages/translate/pose-viewers/pose-viewer.component.ts @@ -1,4 +1,4 @@ -import {Component, ElementRef, OnDestroy, OnInit, ViewChild} from '@angular/core'; +import {Component, ElementRef, inject, OnDestroy, OnInit, ViewChild} from '@angular/core'; import {BaseComponent} from '../../../components/base/base.component'; import {fromEvent, Subscription} from 'rxjs'; import {takeUntil, tap} from 'rxjs/operators'; @@ -6,6 +6,7 @@ import {Store} from '@ngxs/store'; import {SetSignedLanguageVideo} from '../../../modules/translate/translate.actions'; import {PlayableVideoEncoder} from './playable-video-encoder'; import {isChrome} from '../../../core/constants'; +import {MediaMatcher} from '@angular/cdk/layout'; @Component({ selector: 'app-pose-viewer', @@ -13,6 +14,8 @@ import {isChrome} from '../../../core/constants'; styles: [], }) export abstract class BasePoseViewerComponent extends BaseComponent implements OnInit, OnDestroy { + protected store = inject(Store); + @ViewChild('poseViewer') poseEl: ElementRef; background: string = ''; @@ -32,10 +35,6 @@ export abstract class BasePoseViewerComponent extends BaseComponent implements O static isCustomElementDefined = false; - protected constructor(protected store: Store) { - super(); - } - async ngOnInit() { // Some browsers videos can't have a transparent background const isTransparencySupported = diff --git a/src/app/pages/translate/pose-viewers/skeleton-pose-viewer/skeleton-pose-viewer.component.ts b/src/app/pages/translate/pose-viewers/skeleton-pose-viewer/skeleton-pose-viewer.component.ts index 044f1595..611e1c33 100644 --- a/src/app/pages/translate/pose-viewers/skeleton-pose-viewer/skeleton-pose-viewer.component.ts +++ b/src/app/pages/translate/pose-viewers/skeleton-pose-viewer/skeleton-pose-viewer.component.ts @@ -2,8 +2,6 @@ import {AfterViewInit, Component, CUSTOM_ELEMENTS_SCHEMA, Input} from '@angular/ import {fromEvent} from 'rxjs'; import {takeUntil, tap} from 'rxjs/operators'; import {BasePoseViewerComponent} from '../pose-viewer.component'; -import {Store} from '@ngxs/store'; -import {MediaMatcher} from '@angular/cdk/layout'; import {PlayableVideoEncoder} from '../playable-video-encoder'; @Component({ @@ -16,14 +14,6 @@ import {PlayableVideoEncoder} from '../playable-video-encoder'; export class SkeletonPoseViewerComponent extends BasePoseViewerComponent implements AfterViewInit { @Input() src: string; - colorSchemeMedia!: MediaQueryList; - - constructor(store: Store, private mediaMatcher: MediaMatcher) { - super(store); - - this.colorSchemeMedia = this.mediaMatcher.matchMedia('(prefers-color-scheme: dark)'); - } - ngAfterViewInit(): void { const pose = this.poseEl.nativeElement; diff --git a/src/app/pages/translate/pose-viewers/viewer-selector/viewer-selector.component.ts b/src/app/pages/translate/pose-viewers/viewer-selector/viewer-selector.component.ts index 639db56b..3d70c788 100644 --- a/src/app/pages/translate/pose-viewers/viewer-selector/viewer-selector.component.ts +++ b/src/app/pages/translate/pose-viewers/viewer-selector/viewer-selector.component.ts @@ -1,4 +1,4 @@ -import {Component, OnInit} from '@angular/core'; +import {Component, OnInit, inject} from '@angular/core'; import {BaseSettingsComponent} from '../../../../modules/settings/settings.component'; import {Store} from '@ngxs/store'; import {PoseViewerSetting} from '../../../../modules/settings/settings.state'; @@ -34,9 +34,8 @@ export class ViewerSelectorComponent extends BaseSettingsComponent implements On fab: MatFabMenu; fabButtons: MatFabMenu[] = []; - constructor(store: Store) { - super(store); - + constructor() { + super(); addIcons({gitCommit, logoAppleAr, accessibility}); } diff --git a/src/app/pages/translate/signed-to-spoken/signed-to-spoken.component.ts b/src/app/pages/translate/signed-to-spoken/signed-to-spoken.component.ts index 8340e740..b3669fd8 100644 --- a/src/app/pages/translate/signed-to-spoken/signed-to-spoken.component.ts +++ b/src/app/pages/translate/signed-to-spoken/signed-to-spoken.component.ts @@ -1,4 +1,4 @@ -import {Component, OnInit} from '@angular/core'; +import {Component, OnInit, inject} from '@angular/core'; import {Store} from '@ngxs/store'; import {VideoStateModel} from '../../../core/modules/ngxs/store/video/video.state'; import {InputMode} from '../../../modules/translate/translate.state'; @@ -104,12 +104,14 @@ const FAKE_WORDS = [ ], }) export class SignedToSpokenComponent implements OnInit { + private store = inject(Store); + videoState$!: Observable; inputMode$!: Observable; spokenLanguage$!: Observable; spokenLanguageText$!: Observable; - constructor(private store: Store) { + constructor() { this.videoState$ = this.store.select(state => state.video); this.inputMode$ = this.store.select(state => state.translate.inputMode); this.spokenLanguage$ = this.store.select(state => state.translate.spokenLanguage); diff --git a/src/app/pages/translate/signed-to-spoken/upload/upload.component.ts b/src/app/pages/translate/signed-to-spoken/upload/upload.component.ts index d003718d..2ee80503 100644 --- a/src/app/pages/translate/signed-to-spoken/upload/upload.component.ts +++ b/src/app/pages/translate/signed-to-spoken/upload/upload.component.ts @@ -1,4 +1,4 @@ -import {Component, Input} from '@angular/core'; +import {Component, Input, inject} from '@angular/core'; import {Store} from '@ngxs/store'; import {SetVideo} from '../../../../core/modules/ngxs/store/video/video.actions'; import {IonButton, IonIcon} from '@ionic/angular/standalone'; @@ -14,11 +14,13 @@ import {TranslocoDirective} from '@ngneat/transloco'; imports: [IonButton, IonIcon, TranslocoDirective], }) export class UploadComponent { + private store = inject(Store); + @Input() isMobile = false; uploadEl: HTMLInputElement = document.createElement('input'); - constructor(private store: Store) { + constructor() { this.uploadEl.setAttribute('type', 'file'); this.uploadEl.setAttribute('accept', 'video/*'); this.uploadEl.addEventListener('change', this.onFileUpload.bind(this)); diff --git a/src/app/pages/translate/signwriting/sign-writing.component.ts b/src/app/pages/translate/signwriting/sign-writing.component.ts index cbb8ca4b..3c4e1495 100644 --- a/src/app/pages/translate/signwriting/sign-writing.component.ts +++ b/src/app/pages/translate/signwriting/sign-writing.component.ts @@ -1,4 +1,4 @@ -import {Component, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'; +import {Component, CUSTOM_ELEMENTS_SCHEMA, inject} from '@angular/core'; import {fromEvent, Observable} from 'rxjs'; import {tap} from 'rxjs/operators'; import {SignWritingService} from '../../../modules/sign-writing/sign-writing.service'; @@ -19,6 +19,9 @@ import {MatTooltip} from '@angular/material/tooltip'; schemas: [CUSTOM_ELEMENTS_SCHEMA], }) export class SignWritingComponent { + private mediaMatcher = inject(MediaMatcher); + private store = inject(Store); + signs$!: Observable; signs: SignWritingObj[] = []; @@ -26,7 +29,7 @@ export class SignWritingComponent { colorSchemeMedia!: MediaQueryList; - constructor(private mediaMatcher: MediaMatcher, private store: Store) { + constructor() { this.colorSchemeMedia = this.mediaMatcher.matchMedia('(prefers-color-scheme: dark)'); this.signs$ = this.store.select(state => state.translate.signWriting); diff --git a/src/app/pages/translate/spoken-to-signed/signed-language-output/signed-language-output.component.ts b/src/app/pages/translate/spoken-to-signed/signed-language-output/signed-language-output.component.ts index f5205414..1aeab0c6 100644 --- a/src/app/pages/translate/spoken-to-signed/signed-language-output/signed-language-output.component.ts +++ b/src/app/pages/translate/spoken-to-signed/signed-language-output/signed-language-output.component.ts @@ -1,4 +1,4 @@ -import {Component, OnInit} from '@angular/core'; +import {Component, OnInit, inject} from '@angular/core'; import {Observable} from 'rxjs'; import {PoseViewerSetting} from '../../../../modules/settings/settings.state'; import {DomSanitizer, SafeUrl} from '@angular/platform-browser'; @@ -42,6 +42,9 @@ import {downloadOutline, shareOutline} from 'ionicons/icons'; ], }) export class SignedLanguageOutputComponent extends BaseComponent implements OnInit { + private store = inject(Store); + private domSanitizer = inject(DomSanitizer); + poseViewerSetting$!: Observable; pose$!: Observable; video$!: Observable; @@ -50,7 +53,7 @@ export class SignedLanguageOutputComponent extends BaseComponent implements OnIn safeVideoUrl: SafeUrl; isSharingSupported: boolean; - constructor(private store: Store, private domSanitizer: DomSanitizer) { + constructor() { super(); this.poseViewerSetting$ = this.store.select(state => state.settings.poseViewer); diff --git a/src/app/pages/translate/spoken-to-signed/spoken-language-input/desktop-textarea/desktop-textarea.component.ts b/src/app/pages/translate/spoken-to-signed/spoken-language-input/desktop-textarea/desktop-textarea.component.ts index cd1612f3..6b465106 100644 --- a/src/app/pages/translate/spoken-to-signed/spoken-language-input/desktop-textarea/desktop-textarea.component.ts +++ b/src/app/pages/translate/spoken-to-signed/spoken-language-input/desktop-textarea/desktop-textarea.component.ts @@ -1,4 +1,4 @@ -import {Component, ElementRef, Input, ViewChild} from '@angular/core'; +import {Component, ElementRef, Input, ViewChild, inject} from '@angular/core'; import {FormControl, ReactiveFormsModule} from '@angular/forms'; import {Observable} from 'rxjs'; import {Store} from '@ngxs/store'; @@ -12,6 +12,8 @@ import {AsyncPipe} from '@angular/common'; imports: [ReactiveFormsModule, AsyncPipe], }) export class DesktopTextareaComponent { + private store = inject(Store); + @Input() maxLength: number; @Input() lang: string; @Input() textControl: FormControl; @@ -20,7 +22,7 @@ export class DesktopTextareaComponent { hoveredSentenceIndex = null; sentences$!: Observable; - constructor(private store: Store) { + constructor() { this.sentences$ = this.store.select(state => state.translate.spokenLanguageSentences); } } diff --git a/src/app/pages/translate/spoken-to-signed/spoken-language-input/spoken-language-input.component.ts b/src/app/pages/translate/spoken-to-signed/spoken-language-input/spoken-language-input.component.ts index b7935c81..ed0ece44 100644 --- a/src/app/pages/translate/spoken-to-signed/spoken-language-input/spoken-language-input.component.ts +++ b/src/app/pages/translate/spoken-to-signed/spoken-language-input/spoken-language-input.component.ts @@ -1,4 +1,4 @@ -import {Component, Input, OnInit} from '@angular/core'; +import {Component, Input, OnInit, inject} from '@angular/core'; import {FormControl, ReactiveFormsModule} from '@angular/forms'; import {debounce, distinctUntilChanged, skipWhile, takeUntil, tap} from 'rxjs/operators'; import {interval, Observable} from 'rxjs'; @@ -41,6 +41,8 @@ import {DesktopTextareaComponent} from './desktop-textarea/desktop-textarea.comp ], }) export class SpokenLanguageInputComponent extends BaseComponent implements OnInit { + private store = inject(Store); + translate$!: Observable; text$!: Observable; normalizedText$!: Observable; @@ -52,7 +54,7 @@ export class SpokenLanguageInputComponent extends BaseComponent implements OnIni @Input() isMobile = false; - constructor(private store: Store) { + constructor() { super(); this.translate$ = this.store.select(state => state.translate); this.text$ = this.store.select(state => state.translate.spokenLanguageText); diff --git a/src/app/pages/translate/translate-desktop/translate-desktop.component.ts b/src/app/pages/translate/translate-desktop/translate-desktop.component.ts index a8347deb..fc5fddb7 100644 --- a/src/app/pages/translate/translate-desktop/translate-desktop.component.ts +++ b/src/app/pages/translate/translate-desktop/translate-desktop.component.ts @@ -1,4 +1,4 @@ -import {Component, OnInit} from '@angular/core'; +import {Component, OnInit, inject} from '@angular/core'; import {Observable} from 'rxjs'; import {Store} from '@ngxs/store'; import {takeUntil, tap} from 'rxjs/operators'; @@ -39,14 +39,14 @@ import {cloudUpload, language, videocam} from 'ionicons/icons'; ], }) export class TranslateDesktopComponent extends BaseComponent implements OnInit { - spokenToSigned$: Observable; + private store = inject(Store); + spokenToSigned$ = this.store.select(state => state.translate.spokenToSigned); + spokenToSigned: boolean; - constructor(private store: Store) { + constructor() { super(); - this.spokenToSigned$ = this.store.select(state => state.translate.spokenToSigned); - addIcons({language, videocam, cloudUpload}); } diff --git a/src/app/pages/translate/translate-mobile/translate-mobile.component.ts b/src/app/pages/translate/translate-mobile/translate-mobile.component.ts index 6b3eeaf1..669c9bb3 100644 --- a/src/app/pages/translate/translate-mobile/translate-mobile.component.ts +++ b/src/app/pages/translate/translate-mobile/translate-mobile.component.ts @@ -1,4 +1,4 @@ -import {Component} from '@angular/core'; +import {Component, inject} from '@angular/core'; import {Store} from '@ngxs/store'; import {TranslateDesktopComponent} from '../translate-desktop/translate-desktop.component'; import {IonContent, IonFooter, IonHeader, IonToolbar} from '@ionic/angular/standalone'; @@ -25,8 +25,4 @@ import {LanguageSelectorsComponent} from '../language-selectors/language-selecto LanguageSelectorsComponent, ], }) -export class TranslateMobileComponent extends TranslateDesktopComponent { - constructor(store: Store) { - super(store); - } -} +export class TranslateMobileComponent extends TranslateDesktopComponent {} diff --git a/src/app/pages/translate/translate.component.ts b/src/app/pages/translate/translate.component.ts index 94a870f3..bf69291f 100644 --- a/src/app/pages/translate/translate.component.ts +++ b/src/app/pages/translate/translate.component.ts @@ -1,4 +1,4 @@ -import {Component, OnInit} from '@angular/core'; +import {Component, OnInit, inject} from '@angular/core'; import {Store} from '@ngxs/store'; import {SetSetting} from '../../modules/settings/settings.actions'; import {fromEvent, Observable} from 'rxjs'; @@ -19,19 +19,19 @@ import {TranslateDesktopComponent} from './translate-desktop/translate-desktop.c imports: [TranslateMobileComponent, TranslateDesktopComponent], }) export class TranslateComponent extends BaseComponent implements OnInit { + private store = inject(Store); + private transloco = inject(TranslocoService); + translation = inject(TranslationService); + private mediaMatcher = inject(MediaMatcher); + private meta = inject(Meta); + private title = inject(Title); + spokenToSigned$: Observable; spokenToSigned: boolean; isMobile: MediaQueryList; - constructor( - private store: Store, - private transloco: TranslocoService, - public translation: TranslationService, - private mediaMatcher: MediaMatcher, - private meta: Meta, - private title: Title - ) { + constructor() { super(); this.spokenToSigned$ = this.store.select(state => state.translate.spokenToSigned); From b576a66ad8021fae8f92e93609e07d23b792f84e Mon Sep 17 00:00:00 2001 From: Amit Moryossef Date: Sun, 24 Nov 2024 10:08:18 +0100 Subject: [PATCH 09/30] fix(routes): use main component --- src/app/app.routes.ts | 29 +++++++++++++++++++----- src/app/pages/main-routing.module.ts | 34 ---------------------------- src/app/pages/main.component.ts | 9 +++++++- src/app/pages/main.module.ts | 11 --------- 4 files changed, 31 insertions(+), 52 deletions(-) delete mode 100644 src/app/pages/main-routing.module.ts delete mode 100644 src/app/pages/main.module.ts diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index 965bb3c3..2cc8e1d5 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -1,21 +1,38 @@ import {Routes} from '@angular/router'; import {NotFoundComponent} from './pages/not-found/not-found.component'; -import {TranslateComponent} from './pages/translate/translate.component'; import {provideStates} from '@ngxs/store'; import {TranslateState} from './modules/translate/translate.state'; import {LanguageDetectionService} from './modules/translate/language-detection/language-detection.service'; import {MediaPipeLanguageDetectionService} from './modules/translate/language-detection/mediapipe.service'; +import {MainComponent} from './pages/main.component'; export const routes: Routes = [ { path: '', - component: TranslateComponent, - providers: [ - provideStates([TranslateState]), - {provide: LanguageDetectionService, useClass: MediaPipeLanguageDetectionService}, + component: MainComponent, + children: [ + { + path: '', + loadComponent: () => import('./pages/translate/translate.component').then(m => m.TranslateComponent), + providers: [ + provideStates([TranslateState]), + {provide: LanguageDetectionService, useClass: MediaPipeLanguageDetectionService}, + ], + }, + // { + // path: 'converse', + // loadChildren: () => import('./tab2/tab2.module').then(m => m.Tab2PageModule), + // }, + // { + // path: 'avatars', + // loadChildren: () => import('./tab3/tab3.module').then(m => m.Tab3PageModule), + // }, + // { + // path: 'settings', + // loadChildren: () => import('./settings/settings.module').then(m => m.SettingsPageModule), + // }, ], }, - // {path: '', loadChildren: () => import('./pages/main.module').then(m => m.MainPageModule)}, // { // path: 'playground', // loadChildren: () => import('./pages/playground/playground.module').then(m => m.PlaygroundPageModule), diff --git a/src/app/pages/main-routing.module.ts b/src/app/pages/main-routing.module.ts deleted file mode 100644 index d6644a22..00000000 --- a/src/app/pages/main-routing.module.ts +++ /dev/null @@ -1,34 +0,0 @@ -import {NgModule} from '@angular/core'; -import {RouterModule, Routes} from '@angular/router'; -import {MainComponent} from './main.component'; - -const routes: Routes = [ - { - path: '', - component: MainComponent, - children: [ - { - path: '', - loadChildren: () => import('./translate/translate.module').then(m => m.TranslatePageModule), - }, - // { - // path: 'converse', - // loadChildren: () => import('./tab2/tab2.module').then(m => m.Tab2PageModule), - // }, - // { - // path: 'avatars', - // loadChildren: () => import('./tab3/tab3.module').then(m => m.Tab3PageModule), - // }, - { - path: 'settings', - loadChildren: () => import('./settings/settings.module').then(m => m.SettingsPageModule), - }, - {path: 'translate', pathMatch: 'full', redirectTo: ''}, - ], - }, -]; - -@NgModule({ - imports: [RouterModule.forChild(routes)], -}) -export class MainRoutingModule {} diff --git a/src/app/pages/main.component.ts b/src/app/pages/main.component.ts index 59cdcea2..21fd698d 100644 --- a/src/app/pages/main.component.ts +++ b/src/app/pages/main.component.ts @@ -1,12 +1,15 @@ import {Component, inject} from '@angular/core'; -import {Observable} from 'rxjs'; import {NavigationEnd, Router} from '@angular/router'; import {filter, map} from 'rxjs/operators'; +import {IonIcon, IonLabel, IonTabBar, IonTabButton, IonTabs} from '@ionic/angular/standalone'; +import {home} from 'ionicons/icons'; +import {addIcons} from 'ionicons'; @Component({ selector: 'app-main', templateUrl: './main.component.html', styleUrls: ['./main.component.scss'], + imports: [IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel], }) export class MainComponent { private router = inject(Router); @@ -14,4 +17,8 @@ export class MainComponent { filter(event => event instanceof NavigationEnd), map((event: NavigationEnd) => event.urlAfterRedirects === '/') ); + + constructor() { + addIcons({home}); + } } diff --git a/src/app/pages/main.module.ts b/src/app/pages/main.module.ts deleted file mode 100644 index 133a5423..00000000 --- a/src/app/pages/main.module.ts +++ /dev/null @@ -1,11 +0,0 @@ -import {NgModule} from '@angular/core'; -import {CommonModule} from '@angular/common'; -import {MainComponent} from './main.component'; -import {MainRoutingModule} from './main-routing.module'; -import {IonLabel, IonIcon, IonTabButton, IonTabBar, IonTabs} from '@ionic/angular/standalone'; - -@NgModule({ - declarations: [MainComponent], - imports: [CommonModule, IonLabel, IonIcon, IonTabButton, IonTabBar, IonTabs, MainRoutingModule], -}) -export class MainPageModule {} From 674c090719420658834ab3f2f0bb9d531e6ef718 Mon Sep 17 00:00:00 2001 From: Amit Moryossef Date: Sun, 24 Nov 2024 11:09:21 +0100 Subject: [PATCH 10/30] lint(): reformat files --- src/app/app.component.ts | 1 - src/app/app.config.server.ts | 3 +- src/app/app.routes.ts | 32 +++++--- .../animation/animation.component.ts | 11 ++- .../flag-icon/flag-icon.component.ts | 1 - .../i18n-language-selector.component.ts | 11 +-- src/app/components/map/map.component.ts | 4 +- .../speech-to-text.component.ts | 3 +- .../text-to-speech.component.ts | 1 - .../text-to-speech/text-to-speech.module.ts | 13 ---- .../video-controls.component.ts | 4 +- src/app/components/video/video.component.ts | 72 ++++++++--------- src/app/components/video/video.module.ts | 31 -------- .../modules/ngxs/store/video/video.state.ts | 2 +- src/app/core/modules/shared.module.ts | 4 +- .../modules/transloco/transloco.loader.ts | 2 +- .../modules/transloco/transloco.module.ts | 4 +- src/app/directives/dropzone.directive.ts | 1 - .../directives/keyboard-flying.directive.ts | 2 +- .../modules/animation/animation.service.ts | 2 +- src/app/modules/animation/animation.state.ts | 2 +- src/app/modules/detector/detector.service.ts | 2 +- src/app/modules/detector/detector.state.ts | 2 +- src/app/modules/pix2pix/pix2pix.service.ts | 2 +- .../pose/pose-normalization.service.ts | 2 +- src/app/modules/pose/pose.service.ts | 2 +- src/app/modules/pose/pose.state.ts | 2 +- .../modules/settings/settings.component.ts | 2 +- .../settings/settings/settings.component.ts | 5 +- src/app/modules/sign-writing/body.service.ts | 2 +- src/app/modules/sign-writing/face.service.ts | 2 +- src/app/modules/sign-writing/hands.service.ts | 2 +- .../sign-writing/sign-writing.service.ts | 2 +- .../sign-writing/sign-writing.state.ts | 2 +- .../language-detection/cld3.service.ts | 2 +- .../language-detection/mediapipe.service.ts | 2 +- .../signwriting-translation.service.ts | 2 +- src/app/modules/translate/translate.module.ts | 17 ---- .../modules/translate/translate.service.ts | 2 +- src/app/modules/translate/translate.state.ts | 2 +- .../benchmark-item.component.ts | 2 + .../pages/benchmark/benchmark.component.html | 1 - .../pages/benchmark/benchmark.component.ts | 39 ++++++++++ src/app/pages/benchmark/benchmark.module.ts | 30 -------- .../about/about-api/about-api.component.ts | 12 +-- .../about-appearance.component.ts | 2 + .../about-benefits.component.spec.ts | 3 - .../about-benefits.component.ts | 28 +++++-- .../about-customers.component.ts | 12 +++ .../about-direction.component.ts | 14 +++- .../about/about-faq/about-faq.component.ts | 2 + .../about/about-hero/about-hero.component.ts | 12 ++- .../about-objectives.component.ts | 2 + .../about-pricing/about-pricing.component.ts | 9 ++- .../about/about-team/about-team.component.ts | 2 + .../pages/landing/about/about.component.ts | 6 ++ .../about/lazy-map/lazy-map.component.ts | 6 +- .../contribute/contribute.component.html | 2 +- .../contribute/contribute.component.ts | 16 ++++ .../landing-footer.component.ts | 4 + src/app/pages/landing/landing.component.html | 2 +- src/app/pages/landing/landing.component.ts | 47 ++++++++++- src/app/pages/landing/landing.module.ts | 77 ------------------- ...ng-routing.module.ts => landing.routes.ts} | 11 +-- .../landing/licenses/licenses.component.ts | 15 +++- .../mermaid-chart/mermaid-chart.component.ts | 9 ++- src/app/pages/main.component.spec.ts | 1 - .../not-found/not-found.component.spec.ts | 6 +- .../pages/not-found/not-found.component.ts | 1 - src/app/pages/not-found/not-found.module.ts | 22 ------ .../pages/playground/playground.component.ts | 23 +++++- src/app/pages/playground/playground.module.ts | 29 ------- .../settings-appearance-images.component.ts | 3 +- .../settings-offline.component.ts | 12 ++- src/app/pages/settings/settings.module.ts | 45 ----------- .../drop-pose-file.component.ts | 1 - .../input/button/button.component.ts | 3 +- .../language-selector.component.ts | 3 +- .../language-selectors.component.ts | 3 +- .../language-selectors.module.ts | 27 ------- .../avatar-pose-viewer.component.ts | 6 +- .../human-pose-viewer.component.ts | 19 +++-- .../pose-viewers/pose-viewer.component.ts | 9 +-- .../skeleton-pose-viewer.component.ts | 5 +- .../viewer-selector.component.ts | 4 +- .../send-feedback/send-feedback.component.ts | 1 - .../signed-language-input.component.ts | 1 - .../signed-to-spoken.component.ts | 3 +- .../upload/upload.component.ts | 3 +- .../signwriting/sign-writing.component.ts | 1 - .../signed-language-output.component.ts | 3 +- .../desktop-textarea.component.ts | 5 +- .../spoken-language-input.component.ts | 3 +- .../spoken-to-signed.component.ts | 1 - .../translate-desktop.component.ts | 4 +- .../translate-mobile.component.ts | 4 +- .../pages/translate/translate.component.ts | 3 +- src/app/pages/translate/translate.module.ts | 64 --------------- 98 files changed, 368 insertions(+), 577 deletions(-) delete mode 100644 src/app/components/text-to-speech/text-to-speech.module.ts delete mode 100644 src/app/components/video/video.module.ts delete mode 100644 src/app/modules/translate/translate.module.ts delete mode 100644 src/app/pages/benchmark/benchmark.module.ts delete mode 100644 src/app/pages/landing/landing.module.ts rename src/app/pages/landing/{landing-routing.module.ts => landing.routes.ts} (75%) delete mode 100644 src/app/pages/not-found/not-found.module.ts delete mode 100644 src/app/pages/playground/playground.module.ts delete mode 100644 src/app/pages/settings/settings.module.ts delete mode 100644 src/app/pages/translate/language-selectors/language-selectors.module.ts delete mode 100644 src/app/pages/translate/translate.module.ts diff --git a/src/app/app.component.ts b/src/app/app.component.ts index b02158b8..ec4d74ee 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -16,7 +16,6 @@ import {IonApp, IonRouterOutlet} from '@ionic/angular/standalone'; templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], imports: [IonApp, IonRouterOutlet], - standalone: true, }) export class AppComponent implements AfterViewInit { private meta = inject(Meta); diff --git a/src/app/app.config.server.ts b/src/app/app.config.server.ts index 7263c8e7..fc908879 100644 --- a/src/app/app.config.server.ts +++ b/src/app/app.config.server.ts @@ -1,5 +1,4 @@ -import {mergeApplicationConfig, ApplicationConfig} from '@angular/core'; -import {provideServerRendering} from '@angular/platform-server'; +import {ApplicationConfig, mergeApplicationConfig} from '@angular/core'; import {appConfig} from './app.config'; const serverConfig: ApplicationConfig = { diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index 2cc8e1d5..464e9530 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -5,8 +5,24 @@ import {TranslateState} from './modules/translate/translate.state'; import {LanguageDetectionService} from './modules/translate/language-detection/language-detection.service'; import {MediaPipeLanguageDetectionService} from './modules/translate/language-detection/mediapipe.service'; import {MainComponent} from './pages/main.component'; +import {SignWritingState} from './modules/sign-writing/sign-writing.state'; +import {PoseState} from './modules/pose/pose.state'; +import {VideoState} from './core/modules/ngxs/store/video/video.state'; +import {DetectorState} from './modules/detector/detector.state'; export const routes: Routes = [ + { + path: 'playground', + loadComponent: () => import('./pages/playground/playground.component').then(m => m.PlaygroundComponent), + providers: [provideStates([VideoState, PoseState, SignWritingState, DetectorState])], + }, + { + path: 'benchmark', + loadComponent: () => import('./pages/benchmark/benchmark.component').then(m => m.BenchmarkComponent), + providers: [{provide: LanguageDetectionService, useClass: MediaPipeLanguageDetectionService}], + }, + {path: 'about', loadChildren: () => import('./pages/landing/landing.routes').then(m => m.routes)}, + {path: 'legal', loadChildren: () => import('./pages/landing/landing.routes').then(m => m.routes)}, { path: '', component: MainComponent, @@ -15,10 +31,14 @@ export const routes: Routes = [ path: '', loadComponent: () => import('./pages/translate/translate.component').then(m => m.TranslateComponent), providers: [ - provideStates([TranslateState]), + provideStates([TranslateState, VideoState, PoseState, SignWritingState, DetectorState]), {provide: LanguageDetectionService, useClass: MediaPipeLanguageDetectionService}, ], }, + { + path: 'translate', + redirectTo: '', + }, // { // path: 'converse', // loadChildren: () => import('./tab2/tab2.module').then(m => m.Tab2PageModule), @@ -33,15 +53,5 @@ export const routes: Routes = [ // }, ], }, - // { - // path: 'playground', - // loadChildren: () => import('./pages/playground/playground.module').then(m => m.PlaygroundPageModule), - // }, - // { - // path: 'benchmark', - // loadChildren: () => import('./pages/benchmark/benchmark.module').then(m => m.BenchmarkPageModule), - // }, - // {path: 'about', loadChildren: () => import('./pages/landing/landing.module').then(m => m.LandingModule)}, - // {path: 'legal', loadChildren: () => import('./pages/landing/landing.module').then(m => m.LandingModule)}, {path: '**', component: NotFoundComponent}, ]; diff --git a/src/app/components/animation/animation.component.ts b/src/app/components/animation/animation.component.ts index 9921960e..81996877 100644 --- a/src/app/components/animation/animation.component.ts +++ b/src/app/components/animation/animation.component.ts @@ -1,4 +1,4 @@ -import {AfterViewInit, Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, Input, ViewChild, inject} from '@angular/core'; +import {AfterViewInit, Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, inject, Input, viewChild} from '@angular/core'; import {Store} from '@ngxs/store'; import {AnimationStateModel} from '../../modules/animation/animation.state'; import {BaseComponent} from '../base/base.component'; @@ -12,7 +12,6 @@ import {Observable} from 'rxjs'; selector: 'app-animation', templateUrl: './animation.component.html', styleUrls: ['./animation.component.scss'], - standalone: true, schemas: [CUSTOM_ELEMENTS_SCHEMA], }) export class AnimationComponent extends BaseComponent implements AfterViewInit { @@ -22,7 +21,7 @@ export class AnimationComponent extends BaseComponent implements AfterViewInit { animationState$: Observable; - @ViewChild('modelViewer') modelViewerEl: ElementRef; + readonly modelViewerEl = viewChild>('modelViewer'); @Input() fps = 1; @@ -54,7 +53,7 @@ export class AnimationComponent extends BaseComponent implements AfterViewInit { (ModelViewerElement as any).minimumRenderScale = 1; // TODO investigate why type is not set let i = 0; - const el = this.modelViewerEl.nativeElement; + const el = this.modelViewerEl().nativeElement; this.applyStyle(el); @@ -89,7 +88,7 @@ export class AnimationComponent extends BaseComponent implements AfterViewInit { } getScene() { - const el = this.modelViewerEl.nativeElement; + const el = this.modelViewerEl().nativeElement; const symbol = Object.getOwnPropertySymbols(el).find(symbol => String(symbol) === 'Symbol(scene)'); return el[symbol]; } @@ -117,7 +116,7 @@ export class AnimationComponent extends BaseComponent implements AfterViewInit { // Download the files serially for (const [attribute, assetName] of Object.entries(attributes)) { const uri = await this.assets.getFileUri(assetName); - this.modelViewerEl.nativeElement.setAttribute(attribute, uri); + this.modelViewerEl().nativeElement.setAttribute(attribute, uri); } } } diff --git a/src/app/components/flag-icon/flag-icon.component.ts b/src/app/components/flag-icon/flag-icon.component.ts index 0a0f4d39..92a1773e 100644 --- a/src/app/components/flag-icon/flag-icon.component.ts +++ b/src/app/components/flag-icon/flag-icon.component.ts @@ -4,7 +4,6 @@ import {Component, Input} from '@angular/core'; selector: 'app-flag-icon', templateUrl: './flag-icon.component.html', styleUrls: ['./flag-icon.component.scss'], - standalone: true, }) export class FlagIconComponent { @Input() country: string; diff --git a/src/app/components/i18n-language-selector/i18n-language-selector.component.ts b/src/app/components/i18n-language-selector/i18n-language-selector.component.ts index 62a4c695..6e5dc845 100644 --- a/src/app/components/i18n-language-selector/i18n-language-selector.component.ts +++ b/src/app/components/i18n-language-selector/i18n-language-selector.component.ts @@ -1,5 +1,5 @@ import {Component, inject} from '@angular/core'; -import {TranslocoService} from '@ngneat/transloco'; +import {TranslocoPipe, TranslocoService} from '@ngneat/transloco'; import {ActivatedRoute, Router} from '@angular/router'; import {SITE_LANGUAGES} from '../../core/modules/transloco/languages'; @@ -7,22 +7,17 @@ import {SITE_LANGUAGES} from '../../core/modules/transloco/languages'; selector: 'app-i18n-language-selector', templateUrl: './i18n-language-selector.component.html', styleUrls: ['./i18n-language-selector.component.scss'], + imports: [TranslocoPipe], }) export class I18NLanguageSelectorComponent { private router = inject(Router); private route = inject(ActivatedRoute); private transloco = inject(TranslocoService); - current: string; + current = this.transloco.getActiveLang(); languages = this.groupLanguages(); - constructor() { - const transloco = this.transloco; - - this.current = transloco.getActiveLang(); - } - private groupLanguages() { const languageGroups = []; let lastGroup = {label: 'A', languages: []}; diff --git a/src/app/components/map/map.component.ts b/src/app/components/map/map.component.ts index 09da934e..882f08f2 100644 --- a/src/app/components/map/map.component.ts +++ b/src/app/components/map/map.component.ts @@ -1,5 +1,5 @@ -import {Component, NgModule, OnInit, inject} from '@angular/core'; -import {geoJSON, latLng, Map, tileLayer} from 'leaflet'; +import {Component, inject, NgModule, OnInit} from '@angular/core'; +import {geoJSON, latLng, Map} from 'leaflet'; import {HttpClient, provideHttpClient} from '@angular/common/http'; import {firstValueFrom} from 'rxjs'; import {LeafletModule} from '@asymmetrik/ngx-leaflet'; diff --git a/src/app/components/speech-to-text/speech-to-text.component.ts b/src/app/components/speech-to-text/speech-to-text.component.ts index 4ac7bd1e..edb11cfb 100644 --- a/src/app/components/speech-to-text/speech-to-text.component.ts +++ b/src/app/components/speech-to-text/speech-to-text.component.ts @@ -3,7 +3,7 @@ import {fromEvent} from 'rxjs'; import {BaseComponent} from '../base/base.component'; import {MatTooltip, TooltipPosition} from '@angular/material/tooltip'; import {IonButton, IonIcon} from '@ionic/angular/standalone'; -import {TranslocoDirective, TranslocoPipe} from '@ngneat/transloco'; +import {TranslocoDirective} from '@ngneat/transloco'; import {addIcons} from 'ionicons'; import {micOutline, stopCircleOutline} from 'ionicons/icons'; @@ -11,7 +11,6 @@ import {micOutline, stopCircleOutline} from 'ionicons/icons'; selector: 'app-speech-to-text', templateUrl: './speech-to-text.component.html', styleUrls: ['./speech-to-text.component.css'], - standalone: true, imports: [IonButton, IonIcon, MatTooltip, TranslocoDirective], }) export class SpeechToTextComponent extends BaseComponent implements OnInit, OnChanges { diff --git a/src/app/components/text-to-speech/text-to-speech.component.ts b/src/app/components/text-to-speech/text-to-speech.component.ts index 525e3029..4fef217c 100644 --- a/src/app/components/text-to-speech/text-to-speech.component.ts +++ b/src/app/components/text-to-speech/text-to-speech.component.ts @@ -9,7 +9,6 @@ import {TranslocoDirective} from '@ngneat/transloco'; selector: 'app-text-to-speech', templateUrl: './text-to-speech.component.html', styleUrls: ['./text-to-speech.component.scss'], - standalone: true, imports: [MatTooltip, IonButton, IonIcon, TranslocoDirective], }) export class TextToSpeechComponent implements OnInit, OnDestroy, OnChanges { diff --git a/src/app/components/text-to-speech/text-to-speech.module.ts b/src/app/components/text-to-speech/text-to-speech.module.ts deleted file mode 100644 index 9080790a..00000000 --- a/src/app/components/text-to-speech/text-to-speech.module.ts +++ /dev/null @@ -1,13 +0,0 @@ -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, IonIcon, IonButton, MatTooltipModule], - declarations: [TextToSpeechComponent], - exports: [TextToSpeechComponent], -}) -export class TextToSpeechModule {} diff --git a/src/app/components/video/video-controls/video-controls.component.ts b/src/app/components/video/video-controls/video-controls.component.ts index fc803bda..f25299a1 100644 --- a/src/app/components/video/video-controls/video-controls.component.ts +++ b/src/app/components/video/video-controls/video-controls.component.ts @@ -1,5 +1,4 @@ -import {Component, inject} from '@angular/core'; -import {Store} from '@ngxs/store'; +import {Component} from '@angular/core'; import {BaseSettingsComponent} from '../../../modules/settings/settings.component'; import {MatTooltip} from '@angular/material/tooltip'; import {AsyncPipe} from '@angular/common'; @@ -12,7 +11,6 @@ import {TranslocoDirective} from '@ngneat/transloco'; selector: 'app-video-controls', templateUrl: './video-controls.component.html', styleUrls: ['./video-controls.component.scss'], - standalone: true, imports: [MatTooltip, AsyncPipe, IonFab, IonFabButton, IonIcon, TranslocoDirective], }) export class VideoControlsComponent extends BaseSettingsComponent { diff --git a/src/app/components/video/video.component.ts b/src/app/components/video/video.component.ts index 9668aef5..8179e5a3 100644 --- a/src/app/components/video/video.component.ts +++ b/src/app/components/video/video.component.ts @@ -1,6 +1,6 @@ -import {AfterViewInit, Component, ElementRef, HostBinding, Input, ViewChild, inject} from '@angular/core'; +import {AfterViewInit, Component, ElementRef, HostBinding, inject, Input, viewChild} from '@angular/core'; import {Store} from '@ngxs/store'; -import {combineLatest, firstValueFrom, Observable} from 'rxjs'; +import {combineLatest, firstValueFrom} from 'rxjs'; import {VideoSettings, VideoStateModel} from '../../core/modules/ngxs/store/video/video.state'; import Stats from 'stats.js'; import {distinctUntilChanged, filter, map, takeUntil, tap} from 'rxjs/operators'; @@ -24,26 +24,26 @@ import {TranslocoDirective, TranslocoPipe} from '@ngneat/transloco'; selector: 'app-video', templateUrl: './video.component.html', styleUrls: ['./video.component.scss'], - standalone: true, imports: [AnimationComponent, VideoControlsComponent, IonIcon, AsyncPipe, TranslocoPipe, TranslocoDirective], }) export class VideoComponent extends BaseComponent implements AfterViewInit { private store = inject(Store); + + settingsState$ = this.store.select(state => state.settings); + animatePose$ = this.store.select(state => state.settings.animatePose); + + videoState$ = this.store.select(state => state.video); + poseState$ = this.store.select(state => state.pose); + signWritingState$ = this.store.select(state => state.signWriting); + signingProbability$ = this.store.select(state => state.detector.signingProbability); + private poseService = inject(PoseService); private signWritingService = inject(SignWritingService); private elementRef = inject(ElementRef); - settingsState$!: Observable; - animatePose$!: Observable; - - videoState$!: Observable; - poseState$!: Observable; - signWritingState$!: Observable; - signingProbability$!: Observable; - - @ViewChild('video') videoEl: ElementRef; - @ViewChild('canvas') canvasEl: ElementRef; - @ViewChild('stats') statsEl: ElementRef; + readonly videoEl = viewChild>('video'); + readonly canvasEl = viewChild>('canvas'); + readonly statsEl = viewChild('stats'); appRootEl = document.querySelector('ion-app') ?? document.body; @HostBinding('class') aspectRatio = 'aspect-16-9'; @@ -61,29 +61,22 @@ export class VideoComponent extends BaseComponent implements AfterViewInit { constructor() { super(); - this.settingsState$ = this.store.select(state => state.settings); - this.animatePose$ = this.store.select(state => state.settings.animatePose); - this.videoState$ = this.store.select(state => state.video); - this.poseState$ = this.store.select(state => state.pose); - this.signWritingState$ = this.store.select(state => state.signWriting); - this.signingProbability$ = this.store.select(state => state.detector.signingProbability); - addIcons({playCircleOutline}); } ngAfterViewInit(): void { - console.log(this.videoEl); + const videoEl = this.videoEl(); this.setCamera(); this.setStats(); this.trackPose(); - this.canvasCtx = this.canvasEl.nativeElement.getContext('2d'); + this.canvasCtx = this.canvasEl().nativeElement.getContext('2d'); this.preloadSignWritingFont(); this.drawChanges(); this.preloadPoseEstimationModel(); - this.videoEl.nativeElement.addEventListener('loadeddata', this.appLoop.bind(this)); - this.videoEl.nativeElement.addEventListener('ended', () => (this.videoEnded = true)); + videoEl.nativeElement.addEventListener('loadeddata', this.appLoop.bind(this)); + videoEl.nativeElement.addEventListener('ended', () => (this.videoEnded = true)); const resizeObserver = new ResizeObserver(this.scaleCanvas.bind(this)); resizeObserver.observe(this.elementRef.nativeElement); @@ -92,8 +85,8 @@ export class VideoComponent extends BaseComponent implements AfterViewInit { async appLoop(): Promise { // const fps = this.store.snapshot().video.videoSettings.frameRate; - const video = this.videoEl.nativeElement; - const poseAction = new PoseVideoFrame(this.videoEl.nativeElement); + const video = this.videoEl().nativeElement; + const poseAction = new PoseVideoFrame(video); let lastTime = null; while (true) { @@ -117,7 +110,7 @@ export class VideoComponent extends BaseComponent implements AfterViewInit { } setCamera(): void { - const video = this.videoEl.nativeElement; + const video = this.videoEl().nativeElement; video.muted = true; video.addEventListener('loadedmetadata', () => video.play()); @@ -138,8 +131,9 @@ export class VideoComponent extends BaseComponent implements AfterViewInit { map(state => state.videoSettings), filter(Boolean), tap(({width, height}) => { - this.canvasEl.nativeElement.width = width; - this.canvasEl.nativeElement.height = height; + const canvasEl = this.canvasEl(); + canvasEl.nativeElement.width = width; + canvasEl.nativeElement.height = height; // It is required to wait for next frame, as grid element might still be resizing requestAnimationFrame(this.scaleCanvas.bind(this)); @@ -157,13 +151,14 @@ export class VideoComponent extends BaseComponent implements AfterViewInit { const documentBbox = this.appRootEl.getBoundingClientRect(); const width = Math.min(bbox.width, documentBbox.width); - const scale = width / this.canvasEl.nativeElement.width; - this.canvasEl.nativeElement.style.transform = `scale(-${scale}, ${scale}) translateX(-100%)`; + const canvasEl = this.canvasEl().nativeElement; + const scale = width / canvasEl.width; + canvasEl.style.transform = `scale(-${scale}, ${scale}) translateX(-100%)`; // Set parent element height - this.elementRef.nativeElement.style.height = this.canvasEl.nativeElement.height * scale + 'px'; + this.elementRef.nativeElement.style.height = canvasEl.height * scale + 'px'; // Set canvas parent element width - this.canvasEl.nativeElement.parentElement.style.width = width + 'px'; + canvasEl.parentElement.style.width = width + 'px'; }); } @@ -227,7 +222,7 @@ export class VideoComponent extends BaseComponent implements AfterViewInit { setStats(): void { this.fpsStats.showPanel(0); this.fpsStats.dom.style.position = 'absolute'; - this.statsEl.nativeElement.appendChild(this.fpsStats.dom); + this.statsEl().nativeElement.appendChild(this.fpsStats.dom); // TODO this on change of input property if (!this.displayFps) { @@ -241,7 +236,7 @@ export class VideoComponent extends BaseComponent implements AfterViewInit { this.signingStats.showPanel(0); this.signingStats.dom.style.position = 'absolute'; this.signingStats.dom.style.left = '80px'; - this.statsEl.nativeElement.appendChild(this.signingStats.dom); + this.statsEl().nativeElement.appendChild(this.signingStats.dom); this.setDetectorListener(signingPanel); } @@ -271,7 +266,8 @@ export class VideoComponent extends BaseComponent implements AfterViewInit { replayVideo() { this.videoEnded = false; - this.videoEl.nativeElement.currentTime = 0; - return this.videoEl.nativeElement.play(); + const videoEl = this.videoEl().nativeElement; + videoEl.currentTime = 0; + return videoEl.play(); } } diff --git a/src/app/components/video/video.module.ts b/src/app/components/video/video.module.ts deleted file mode 100644 index 04814a6b..00000000 --- a/src/app/components/video/video.module.ts +++ /dev/null @@ -1,31 +0,0 @@ -import {NgModule} from '@angular/core'; -import {VideoComponent} from './video.component'; -import {VideoControlsComponent} from './video-controls/video-controls.component'; -import {AnimationModule} from '../animation/animation.module'; -import {NgxsModule} from '@ngxs/store'; -import {VideoState} from '../../core/modules/ngxs/store/video/video.state'; -import {CommonModule} from '@angular/common'; -import {AppTranslocoModule} from '../../core/modules/transloco/transloco.module'; -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, - AnimationModule, - AppTranslocoModule, - MatTooltipModule, - PoseModule, - IonIcon, - IonFab, - IonFabButton, - NgxsModule.forFeature([VideoState, SignWritingState, DetectorState]), - VideoComponent, - VideoControlsComponent, - ], - exports: [VideoComponent], -}) -export class VideoModule {} diff --git a/src/app/core/modules/ngxs/store/video/video.state.ts b/src/app/core/modules/ngxs/store/video/video.state.ts index 3ae6f323..fd3035d1 100644 --- a/src/app/core/modules/ngxs/store/video/video.state.ts +++ b/src/app/core/modules/ngxs/store/video/video.state.ts @@ -1,4 +1,4 @@ -import {Injectable, inject} from '@angular/core'; +import {inject, Injectable} from '@angular/core'; import {Action, NgxsOnInit, State, StateContext, Store} from '@ngxs/store'; import {filter, tap} from 'rxjs/operators'; import {SetVideo, StartCamera, StopVideo} from './video.actions'; diff --git a/src/app/core/modules/shared.module.ts b/src/app/core/modules/shared.module.ts index 8cbb5bd2..5572d6a0 100644 --- a/src/app/core/modules/shared.module.ts +++ b/src/app/core/modules/shared.module.ts @@ -1,12 +1,10 @@ import {NgModule} from '@angular/core'; -import {AppTranslocoModule} from './transloco/transloco.module'; -import {CommonModule} from '@angular/common'; import {TensorflowService} from '../services/tfjs/tfjs.service'; import {ThreeService} from '../services/three.service'; const components = []; -const modules = [CommonModule, AppTranslocoModule]; +const modules = []; @NgModule({ declarations: components, diff --git a/src/app/core/modules/transloco/transloco.loader.ts b/src/app/core/modules/transloco/transloco.loader.ts index 5b388591..9490a974 100644 --- a/src/app/core/modules/transloco/transloco.loader.ts +++ b/src/app/core/modules/transloco/transloco.loader.ts @@ -1,6 +1,6 @@ import {HttpClient} from '@angular/common/http'; import {Translation, TRANSLOCO_SCOPE, TranslocoLoader} from '@ngneat/transloco'; -import {Injectable, inject} from '@angular/core'; +import {inject, Injectable} from '@angular/core'; import {catchError, Observable} from 'rxjs'; @Injectable({providedIn: 'root'}) diff --git a/src/app/core/modules/transloco/transloco.module.ts b/src/app/core/modules/transloco/transloco.module.ts index f6f6a6e1..a9a1b289 100644 --- a/src/app/core/modules/transloco/transloco.module.ts +++ b/src/app/core/modules/transloco/transloco.module.ts @@ -1,7 +1,5 @@ -import {isDevMode, NgModule} from '@angular/core'; -import {provideTransloco, TranslocoModule} from '@ngneat/transloco'; +import {provideTransloco} from '@ngneat/transloco'; import {HttpLoader, translocoScopes} from './transloco.loader'; -import {provideHttpClient, withFetch} from '@angular/common/http'; import {SITE_LANGUAGES} from './languages'; export const AppTranslocoProviders = [ diff --git a/src/app/directives/dropzone.directive.ts b/src/app/directives/dropzone.directive.ts index a2dbd531..1c54ce08 100644 --- a/src/app/directives/dropzone.directive.ts +++ b/src/app/directives/dropzone.directive.ts @@ -2,7 +2,6 @@ import {Directive, EventEmitter, HostListener, Output} from '@angular/core'; @Directive({ selector: '[appDropzone]', - standalone: true, }) export class DropzoneDirective { @Output() dropped = new EventEmitter(); diff --git a/src/app/directives/keyboard-flying.directive.ts b/src/app/directives/keyboard-flying.directive.ts index d9a4052f..d4dd94b4 100644 --- a/src/app/directives/keyboard-flying.directive.ts +++ b/src/app/directives/keyboard-flying.directive.ts @@ -1,5 +1,5 @@ import {DOCUMENT} from '@angular/common'; -import {Directive, ElementRef, OnDestroy, OnInit, inject} from '@angular/core'; +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'; diff --git a/src/app/modules/animation/animation.service.ts b/src/app/modules/animation/animation.service.ts index a4705ad8..98151c8b 100644 --- a/src/app/modules/animation/animation.service.ts +++ b/src/app/modules/animation/animation.service.ts @@ -1,6 +1,6 @@ import type {Tensor} from '@tensorflow/tfjs'; import type {LayersModel} from '@tensorflow/tfjs-layers'; -import {Injectable, inject} from '@angular/core'; +import {inject, Injectable} from '@angular/core'; import {EstimatedPose} from '../pose/pose.state'; import {TensorflowService} from '../../core/services/tfjs/tfjs.service'; import {PoseService} from '../pose/pose.service'; diff --git a/src/app/modules/animation/animation.state.ts b/src/app/modules/animation/animation.state.ts index 744b9a95..34e5400b 100644 --- a/src/app/modules/animation/animation.state.ts +++ b/src/app/modules/animation/animation.state.ts @@ -1,4 +1,4 @@ -import {Injectable, inject} from '@angular/core'; +import {inject, Injectable} from '@angular/core'; import {Action, NgxsOnInit, State, StateContext, Store} from '@ngxs/store'; import {AnimationService} from './animation.service'; import {filter, first, tap} from 'rxjs/operators'; diff --git a/src/app/modules/detector/detector.service.ts b/src/app/modules/detector/detector.service.ts index 371cf23c..88938030 100644 --- a/src/app/modules/detector/detector.service.ts +++ b/src/app/modules/detector/detector.service.ts @@ -1,7 +1,7 @@ import type {Tensor} from '@tensorflow/tfjs'; import {EMPTY_LANDMARK, EstimatedPose, PoseLandmark} from '../pose/pose.state'; import type {LayersModel} from '@tensorflow/tfjs-layers'; -import {Injectable, inject} from '@angular/core'; +import {inject, Injectable} from '@angular/core'; import {TensorflowService} from '../../core/services/tfjs/tfjs.service'; import {MediapipeHolisticService} from '../../core/services/holistic.service'; diff --git a/src/app/modules/detector/detector.state.ts b/src/app/modules/detector/detector.state.ts index 3ece4d20..ffede94f 100644 --- a/src/app/modules/detector/detector.state.ts +++ b/src/app/modules/detector/detector.state.ts @@ -1,4 +1,4 @@ -import {Injectable, inject} from '@angular/core'; +import {inject, Injectable} from '@angular/core'; import {Action, NgxsOnInit, State, StateContext, Store} from '@ngxs/store'; import {DetectorService} from './detector.service'; import {DetectSigning} from './detector.actions'; diff --git a/src/app/modules/pix2pix/pix2pix.service.ts b/src/app/modules/pix2pix/pix2pix.service.ts index 66cac621..bdc70f82 100644 --- a/src/app/modules/pix2pix/pix2pix.service.ts +++ b/src/app/modules/pix2pix/pix2pix.service.ts @@ -1,4 +1,4 @@ -import {Injectable, inject} from '@angular/core'; +import {inject, Injectable} from '@angular/core'; import * as comlink from 'comlink'; import {GoogleAnalyticsService} from '../../core/modules/google-analytics/google-analytics.service'; import {AssetsService} from '../../core/services/assets/assets.service'; diff --git a/src/app/modules/pose/pose-normalization.service.ts b/src/app/modules/pose/pose-normalization.service.ts index f872b8bd..5818c065 100644 --- a/src/app/modules/pose/pose-normalization.service.ts +++ b/src/app/modules/pose/pose-normalization.service.ts @@ -1,4 +1,4 @@ -import {Injectable, inject} from '@angular/core'; +import {inject, Injectable} from '@angular/core'; import type {Tensor} from '@tensorflow/tfjs-core'; import type {Vector3} from 'three'; import {TensorflowService} from '../../core/services/tfjs/tfjs.service'; diff --git a/src/app/modules/pose/pose.service.ts b/src/app/modules/pose/pose.service.ts index 3a0d8853..dda3a8f6 100644 --- a/src/app/modules/pose/pose.service.ts +++ b/src/app/modules/pose/pose.service.ts @@ -1,4 +1,4 @@ -import {Injectable, inject} from '@angular/core'; +import {inject, Injectable} from '@angular/core'; import * as drawing from '@mediapipe/drawing_utils/drawing_utils.js'; import {EMPTY_LANDMARK, EstimatedPose, PoseLandmark} from './pose.state'; import {GoogleAnalyticsService} from '../../core/modules/google-analytics/google-analytics.service'; diff --git a/src/app/modules/pose/pose.state.ts b/src/app/modules/pose/pose.state.ts index 5ab208a8..54ce54b1 100644 --- a/src/app/modules/pose/pose.state.ts +++ b/src/app/modules/pose/pose.state.ts @@ -1,4 +1,4 @@ -import {Injectable, inject} from '@angular/core'; +import {inject, Injectable} from '@angular/core'; import {Action, NgxsOnInit, State, StateContext, Store} from '@ngxs/store'; import {PoseService} from './pose.service'; import {LoadPoseEstimationModel, PoseVideoFrame, StoreFramePose} from './pose.actions'; diff --git a/src/app/modules/settings/settings.component.ts b/src/app/modules/settings/settings.component.ts index 80a910f8..681593bd 100644 --- a/src/app/modules/settings/settings.component.ts +++ b/src/app/modules/settings/settings.component.ts @@ -11,7 +11,7 @@ export abstract class BaseSettingsComponent extends BaseComponent { settingsState$: Observable; - protected constructor() { + constructor() { super(); this.settingsState$ = this.store.select(state => state.settings); diff --git a/src/app/modules/settings/settings/settings.component.ts b/src/app/modules/settings/settings/settings.component.ts index 6b5a2af6..824731e5 100644 --- a/src/app/modules/settings/settings/settings.component.ts +++ b/src/app/modules/settings/settings/settings.component.ts @@ -1,10 +1,9 @@ -import {Component, OnInit, inject} from '@angular/core'; +import {Component, OnInit} from '@angular/core'; import {BaseSettingsComponent} from '../settings.component'; import {takeUntil, tap} from 'rxjs/operators'; -import {Store} from '@ngxs/store'; import {SettingsStateModel} from '../settings.state'; import {TranslocoDirective} from '@ngneat/transloco'; -import {IonList, IonItem, IonCheckbox} from '@ionic/angular/standalone'; +import {IonCheckbox, IonItem, IonList} from '@ionic/angular/standalone'; @Component({ selector: 'app-settings', diff --git a/src/app/modules/sign-writing/body.service.ts b/src/app/modules/sign-writing/body.service.ts index 76beaa72..e837d5de 100644 --- a/src/app/modules/sign-writing/body.service.ts +++ b/src/app/modules/sign-writing/body.service.ts @@ -1,4 +1,4 @@ -import {Injectable, inject} from '@angular/core'; +import {inject, Injectable} from '@angular/core'; import {SignWritingService} from './sign-writing.service'; import {PoseLandmark} from '../pose/pose.state'; import {ThreeService} from '../../core/services/three.service'; diff --git a/src/app/modules/sign-writing/face.service.ts b/src/app/modules/sign-writing/face.service.ts index 90168675..ddc3ad0b 100644 --- a/src/app/modules/sign-writing/face.service.ts +++ b/src/app/modules/sign-writing/face.service.ts @@ -1,4 +1,4 @@ -import {Injectable, inject} from '@angular/core'; +import {inject, Injectable} from '@angular/core'; import type {Vector2, Vector3} from 'three'; import {SignWritingStateModel} from './sign-writing.state'; import {SignWritingService} from './sign-writing.service'; diff --git a/src/app/modules/sign-writing/hands.service.ts b/src/app/modules/sign-writing/hands.service.ts index 7500b2fc..2ab12d2a 100644 --- a/src/app/modules/sign-writing/hands.service.ts +++ b/src/app/modules/sign-writing/hands.service.ts @@ -1,4 +1,4 @@ -import {Injectable, inject} from '@angular/core'; +import {inject, Injectable} from '@angular/core'; import {SignWritingStateModel} from './sign-writing.state'; import {SignWritingService} from './sign-writing.service'; import type {LayersModel} from '@tensorflow/tfjs-layers'; diff --git a/src/app/modules/sign-writing/sign-writing.service.ts b/src/app/modules/sign-writing/sign-writing.service.ts index 8a1409fd..84c07d05 100644 --- a/src/app/modules/sign-writing/sign-writing.service.ts +++ b/src/app/modules/sign-writing/sign-writing.service.ts @@ -1,4 +1,4 @@ -import {Injectable, inject} from '@angular/core'; +import {inject, Injectable} from '@angular/core'; import {HandsService} from './hands.service'; import {SignWritingStateModel} from './sign-writing.state'; import {BodyService} from './body.service'; diff --git a/src/app/modules/sign-writing/sign-writing.state.ts b/src/app/modules/sign-writing/sign-writing.state.ts index 5a2452e6..5b3ca016 100644 --- a/src/app/modules/sign-writing/sign-writing.state.ts +++ b/src/app/modules/sign-writing/sign-writing.state.ts @@ -1,4 +1,4 @@ -import {Injectable, inject} from '@angular/core'; +import {inject, Injectable} from '@angular/core'; import {Action, NgxsOnInit, State, StateContext, Store} from '@ngxs/store'; import {EstimatedPose} from '../pose/pose.state'; import {filter, first, tap} from 'rxjs/operators'; diff --git a/src/app/modules/translate/language-detection/cld3.service.ts b/src/app/modules/translate/language-detection/cld3.service.ts index 3e23e620..f0f79272 100644 --- a/src/app/modules/translate/language-detection/cld3.service.ts +++ b/src/app/modules/translate/language-detection/cld3.service.ts @@ -1,4 +1,4 @@ -import {Injectable, inject} from '@angular/core'; +import {inject, Injectable} from '@angular/core'; import {LanguageIdentifier} from 'cld3-asm'; import {GoogleAnalyticsService} from '../../../core/modules/google-analytics/google-analytics.service'; import {TranslationService} from '../translate.service'; diff --git a/src/app/modules/translate/language-detection/mediapipe.service.ts b/src/app/modules/translate/language-detection/mediapipe.service.ts index 11e0649c..85fa6fea 100644 --- a/src/app/modules/translate/language-detection/mediapipe.service.ts +++ b/src/app/modules/translate/language-detection/mediapipe.service.ts @@ -1,4 +1,4 @@ -import {Injectable, inject} from '@angular/core'; +import {inject, Injectable} from '@angular/core'; import {GoogleAnalyticsService} from '../../../core/modules/google-analytics/google-analytics.service'; import {TranslationService} from '../translate.service'; import {LanguageDetectionService} from './language-detection.service'; diff --git a/src/app/modules/translate/signwriting-translation.service.ts b/src/app/modules/translate/signwriting-translation.service.ts index d624751d..2d042567 100644 --- a/src/app/modules/translate/signwriting-translation.service.ts +++ b/src/app/modules/translate/signwriting-translation.service.ts @@ -1,4 +1,4 @@ -import {Injectable, inject} from '@angular/core'; +import {inject, Injectable} from '@angular/core'; import {catchError, from, Observable} from 'rxjs'; import {HttpClient} from '@angular/common/http'; import {AssetsService} from '../../core/services/assets/assets.service'; diff --git a/src/app/modules/translate/translate.module.ts b/src/app/modules/translate/translate.module.ts deleted file mode 100644 index 95a2617a..00000000 --- a/src/app/modules/translate/translate.module.ts +++ /dev/null @@ -1,17 +0,0 @@ -import {NgModule} from '@angular/core'; -import {NgxsModule} from '@ngxs/store'; -import {TranslateState} from './translate.state'; -import {TranslationService} from './translate.service'; -import {SignWritingTranslationService} from './signwriting-translation.service'; -import {provideHttpClient, withInterceptorsFromDi} from '@angular/common/http'; - -@NgModule({ - providers: [ - TranslationService, - SignWritingTranslationService, - provideHttpClient(withInterceptorsFromDi()), - // provideStore([TranslateState]), - ], - imports: [NgxsModule.forFeature([TranslateState])], -}) -export class TranslateModule {} diff --git a/src/app/modules/translate/translate.service.ts b/src/app/modules/translate/translate.service.ts index 260f39a1..80d60fd9 100644 --- a/src/app/modules/translate/translate.service.ts +++ b/src/app/modules/translate/translate.service.ts @@ -1,4 +1,4 @@ -import {Injectable, inject} from '@angular/core'; +import {inject, Injectable} from '@angular/core'; import {Observable} from 'rxjs'; import {map} from 'rxjs/operators'; import {HttpClient} from '@angular/common/http'; diff --git a/src/app/modules/translate/translate.state.ts b/src/app/modules/translate/translate.state.ts index cc1b3f97..981d91a0 100644 --- a/src/app/modules/translate/translate.state.ts +++ b/src/app/modules/translate/translate.state.ts @@ -1,4 +1,4 @@ -import {Injectable, inject} from '@angular/core'; +import {inject, Injectable} from '@angular/core'; import {Action, NgxsOnInit, State, StateContext, Store} from '@ngxs/store'; import { ChangeTranslation, diff --git a/src/app/pages/benchmark/benchmark-item/benchmark-item.component.ts b/src/app/pages/benchmark/benchmark-item/benchmark-item.component.ts index 3f0bb00e..36dac4b6 100644 --- a/src/app/pages/benchmark/benchmark-item/benchmark-item.component.ts +++ b/src/app/pages/benchmark/benchmark-item/benchmark-item.component.ts @@ -1,9 +1,11 @@ import {Component, Input} from '@angular/core'; +import {IonCard, IonCardContent, IonCardHeader, IonCardTitle} from '@ionic/angular/standalone'; @Component({ selector: 'app-benchmark-item', templateUrl: './benchmark-item.component.html', styleUrls: ['./benchmark-item.component.scss'], + imports: [IonCard, IonCardHeader, IonCardTitle, IonCardContent], }) export class BenchmarkItemComponent { @Input() title: string; diff --git a/src/app/pages/benchmark/benchmark.component.html b/src/app/pages/benchmark/benchmark.component.html index d3123ec2..a006e846 100644 --- a/src/app/pages/benchmark/benchmark.component.html +++ b/src/app/pages/benchmark/benchmark.component.html @@ -11,7 +11,6 @@
Start Benchmarking! - @for (stat of stats | keyvalue; track stat.key) { diff --git a/src/app/pages/benchmark/benchmark.component.ts b/src/app/pages/benchmark/benchmark.component.ts index b5a473f1..f5dcca93 100644 --- a/src/app/pages/benchmark/benchmark.component.ts +++ b/src/app/pages/benchmark/benchmark.component.ts @@ -4,11 +4,46 @@ import {Pix2PixService} from '../../modules/pix2pix/pix2pix.service'; import {PoseService} from '../../modules/pose/pose.service'; import {transferableImage} from '../../core/helpers/image/transferable'; import {LanguageDetectionService} from '../../modules/translate/language-detection/language-detection.service'; +import { + IonButton, + IonCard, + IonCardContent, + IonCardHeader, + IonCardTitle, + IonContent, + IonHeader, + IonIcon, + IonTitle, + IonToolbar, +} from '@ionic/angular/standalone'; +import {BenchmarkItemComponent} from './benchmark-item/benchmark-item.component'; +import {MatTooltip} from '@angular/material/tooltip'; +import {TranslocoDirective, TranslocoPipe} from '@ngneat/transloco'; +import {KeyValuePipe} from '@angular/common'; +import {addIcons} from 'ionicons'; +import {analytics} from 'ionicons/icons'; @Component({ selector: 'app-benchmark', templateUrl: './benchmark.component.html', styleUrls: ['./benchmark.component.scss'], + imports: [ + IonHeader, + IonToolbar, + IonTitle, + IonContent, + IonButton, + IonCard, + IonCardHeader, + IonCardTitle, + IonCardContent, + BenchmarkItemComponent, + MatTooltip, + TranslocoPipe, + TranslocoDirective, + KeyValuePipe, + IonIcon, + ], }) export class BenchmarkComponent { private ga = inject(GoogleAnalyticsService); @@ -24,6 +59,10 @@ export class BenchmarkComponent { stats: {[key: string]: {[key: string]: number[]}} = {}; + constructor() { + addIcons({analytics}); + } + async bench() { for (const bench of Object.values(this.benchmarks)) { try { diff --git a/src/app/pages/benchmark/benchmark.module.ts b/src/app/pages/benchmark/benchmark.module.ts deleted file mode 100644 index 0c601b5d..00000000 --- a/src/app/pages/benchmark/benchmark.module.ts +++ /dev/null @@ -1,30 +0,0 @@ -import {NgModule} from '@angular/core'; - -import {RouterModule} from '@angular/router'; -import {BenchmarkComponent} from './benchmark.component'; -import {BenchmarkItemComponent} from './benchmark-item/benchmark-item.component'; -import {AppGoogleAnalyticsModule} from '../../core/modules/google-analytics/google-analytics.module'; -import {AppSharedModule} from '../../core/modules/shared.module'; -import {IonicModule} from '@ionic/angular'; -import {MatTooltipModule} from '@angular/material/tooltip'; -import {TranslateModule} from '../../modules/translate/translate.module'; - -const routes = [ - { - path: '', - component: BenchmarkComponent, - }, -]; - -@NgModule({ - imports: [ - AppSharedModule, - TranslateModule, - MatTooltipModule, - IonicModule, - RouterModule.forChild(routes), - AppGoogleAnalyticsModule, - ], - declarations: [BenchmarkComponent, BenchmarkItemComponent], -}) -export class BenchmarkPageModule {} diff --git a/src/app/pages/landing/about/about-api/about-api.component.ts b/src/app/pages/landing/about/about-api/about-api.component.ts index d2bfd6fb..cc21f72a 100644 --- a/src/app/pages/landing/about/about-api/about-api.component.ts +++ b/src/app/pages/landing/about/about-api/about-api.component.ts @@ -1,16 +1,18 @@ import {Component, inject} from '@angular/core'; import {Store} from '@ngxs/store'; -import {Observable} from 'rxjs'; +import {IonButton, IonIcon} from '@ionic/angular/standalone'; +import {arrowForward, book} from 'ionicons/icons'; +import {addIcons} from 'ionicons'; @Component({ selector: 'app-about-api', templateUrl: './about-api.component.html', styleUrls: ['./about-api.component.scss'], + imports: [IonButton, IonIcon], }) export class AboutApiComponent { private store = inject(Store); - - appearance$: Observable; + appearance$ = this.store.select(state => state.settings.appearance); code = `curl -X POST \\ https://sign.mt/api/v1/spoken-text-to-signed-pose \\ @@ -26,11 +28,11 @@ export class AboutApiComponent { videoUrl = ''; constructor() { - this.appearance$ = this.store.select(state => state.settings.appearance); - this.appearance$.subscribe(appearance => { const cleanAppearance = appearance.replace('#', ''); this.videoUrl = `assets/promotional/about/appearance/${cleanAppearance}.mp4`; }); + + addIcons({book, arrowForward}); } } diff --git a/src/app/pages/landing/about/about-appearance/about-appearance.component.ts b/src/app/pages/landing/about/about-appearance/about-appearance.component.ts index 911d2599..0ce3aa26 100644 --- a/src/app/pages/landing/about/about-appearance/about-appearance.component.ts +++ b/src/app/pages/landing/about/about-appearance/about-appearance.component.ts @@ -1,8 +1,10 @@ import {Component} from '@angular/core'; +import {SettingsAppearanceImagesComponent} from '../../../settings/settings-appearance/settings-appearance-images/settings-appearance-images.component'; @Component({ selector: 'app-about-appearance', templateUrl: './about-appearance.component.html', styleUrls: ['./about-appearance.component.scss'], + imports: [SettingsAppearanceImagesComponent], }) export class AboutAppearanceComponent {} diff --git a/src/app/pages/landing/about/about-benefits/about-benefits.component.spec.ts b/src/app/pages/landing/about/about-benefits/about-benefits.component.spec.ts index 2ef8cffe..801b8a4f 100644 --- a/src/app/pages/landing/about/about-benefits/about-benefits.component.spec.ts +++ b/src/app/pages/landing/about/about-benefits/about-benefits.component.spec.ts @@ -5,13 +5,10 @@ import {axe, toHaveNoViolations} from 'jasmine-axe'; import {AppTranslocoTestingModule} from '../../../../core/modules/transloco/transloco-testing.module'; import {IonicModule} from '@ionic/angular'; import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'; -import {register} from 'swiper/element/bundle'; import {LazyMapComponent} from '../lazy-map/lazy-map.component'; import {provideHttpClient} from '@angular/common/http'; import {provideHttpClientTesting} from '@angular/common/http/testing'; -register(); - describe('AboutBenefitsComponent', () => { let component: AboutBenefitsComponent; let fixture: ComponentFixture; diff --git a/src/app/pages/landing/about/about-benefits/about-benefits.component.ts b/src/app/pages/landing/about/about-benefits/about-benefits.component.ts index e5a3620b..2eace768 100644 --- a/src/app/pages/landing/about/about-benefits/about-benefits.component.ts +++ b/src/app/pages/landing/about/about-benefits/about-benefits.component.ts @@ -1,20 +1,30 @@ -import {AfterViewInit, Component, ElementRef, OnInit, ViewChild, inject} from '@angular/core'; +import {AfterViewInit, Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, inject, OnInit, viewChild} from '@angular/core'; import {Swiper} from 'swiper/types'; import {DomSanitizer, SafeUrl} from '@angular/platform-browser'; -import {TranslocoService} from '@ngneat/transloco'; +import {TranslocoDirective, TranslocoService} from '@ngneat/transloco'; import {takeUntil, tap} from 'rxjs/operators'; import {BaseComponent} from '../../../../components/base/base.component'; +import {IonCard, IonCardContent, IonCardTitle, IonIcon} from '@ionic/angular/standalone'; +import {LazyMapComponent} from '../lazy-map/lazy-map.component'; +import {addIcons} from 'ionicons'; +import {bookOutline, cloudOfflineOutline, languageOutline, optionsOutline, swapHorizontalOutline} from 'ionicons/icons'; +import {register as registerSwiper} from 'swiper/element/bundle'; @Component({ selector: 'app-about-benefits', templateUrl: './about-benefits.component.html', styleUrls: ['./about-benefits.component.scss'], + imports: [IonCard, IonCardContent, TranslocoDirective, IonCardTitle, LazyMapComponent, IonIcon], + schemas: [CUSTOM_ELEMENTS_SCHEMA], }) export class AboutBenefitsComponent extends BaseComponent implements AfterViewInit, OnInit { private transloco = inject(TranslocoService); private domSanitizer = inject(DomSanitizer); - @ViewChild('swiper', {static: false}) swiper: ElementRef<{swiper: Swiper}>; + readonly swiper = viewChild>('swiper'); + + iOSScreenshot: SafeUrl; + activeSlide = 0; slides = [ @@ -25,7 +35,11 @@ export class AboutBenefitsComponent extends BaseComponent implements AfterViewIn {id: 'offline', icon: 'cloud-offline-outline'}, ]; - iOSScreenshot: SafeUrl; + constructor() { + super(); + addIcons({swapHorizontalOutline, languageOutline, optionsOutline, bookOutline, cloudOfflineOutline}); + registerSwiper(); + } ngOnInit() { this.transloco.langChanges$ @@ -42,12 +56,12 @@ export class AboutBenefitsComponent extends BaseComponent implements AfterViewIn // Function to navigate to the specific slide slideTo(slideIndex: number) { - this.swiper.nativeElement.swiper.slideTo(slideIndex); + this.swiper().nativeElement.swiper.slideTo(slideIndex); } ngAfterViewInit() { - this.swiper.nativeElement.swiper.on('activeIndexChange', () => { - this.activeSlide = this.swiper.nativeElement.swiper.activeIndex; + this.swiper().nativeElement.swiper.on('activeIndexChange', () => { + this.activeSlide = this.swiper().nativeElement.swiper.activeIndex; }); } } diff --git a/src/app/pages/landing/about/about-customers/about-customers.component.ts b/src/app/pages/landing/about/about-customers/about-customers.component.ts index e96ac096..535e0512 100644 --- a/src/app/pages/landing/about/about-customers/about-customers.component.ts +++ b/src/app/pages/landing/about/about-customers/about-customers.component.ts @@ -1,9 +1,21 @@ import {Component} from '@angular/core'; +import { + IonBadge, + IonCard, + IonCardHeader, + IonCardSubtitle, + IonCardTitle, + IonIcon, + IonItem, + IonLabel, + IonList, +} from '@ionic/angular/standalone'; @Component({ selector: 'app-about-customers', templateUrl: './about-customers.component.html', styleUrls: ['./about-customers.component.scss'], + imports: [IonList, IonBadge, IonItem, IonLabel, IonCard, IonCardHeader, IonCardTitle, IonCardSubtitle, IonIcon], }) export class AboutCustomersComponent { activeCustomer = 0; diff --git a/src/app/pages/landing/about/about-direction/about-direction.component.ts b/src/app/pages/landing/about/about-direction/about-direction.component.ts index 685a8cb6..9f009c83 100644 --- a/src/app/pages/landing/about/about-direction/about-direction.component.ts +++ b/src/app/pages/landing/about/about-direction/about-direction.component.ts @@ -1,13 +1,17 @@ -import {Component, OnInit, inject} from '@angular/core'; -import {TranslocoService} from '@ngneat/transloco'; +import {Component, inject, OnInit} from '@angular/core'; +import {TranslocoDirective, TranslocoService} from '@ngneat/transloco'; import {BaseComponent} from '../../../../components/base/base.component'; import {takeUntil, tap} from 'rxjs/operators'; import {DomSanitizer, SafeUrl} from '@angular/platform-browser'; +import {IonIcon} from '@ionic/angular/standalone'; +import {addIcons} from 'ionicons'; +import {chevronBack, chevronForward} from 'ionicons/icons'; @Component({ selector: 'app-about-direction', templateUrl: './about-direction.component.html', styleUrls: ['./about-direction.component.scss'], + imports: [IonIcon, TranslocoDirective], }) export class AboutDirectionComponent extends BaseComponent implements OnInit { private transloco = inject(TranslocoService); @@ -16,6 +20,12 @@ export class AboutDirectionComponent extends BaseComponent implements OnInit { iOSScreenshot: SafeUrl; androidScreenshot: SafeUrl; + constructor() { + super(); + + addIcons({chevronBack, chevronForward}); + } + ngOnInit() { this.transloco.langChanges$ .pipe( diff --git a/src/app/pages/landing/about/about-faq/about-faq.component.ts b/src/app/pages/landing/about/about-faq/about-faq.component.ts index b751c6d9..b65f98ac 100644 --- a/src/app/pages/landing/about/about-faq/about-faq.component.ts +++ b/src/app/pages/landing/about/about-faq/about-faq.component.ts @@ -1,9 +1,11 @@ import {Component} from '@angular/core'; +import {IonAccordion, IonAccordionGroup, IonItem, IonLabel} from '@ionic/angular/standalone'; @Component({ selector: 'app-about-faq', templateUrl: './about-faq.component.html', styleUrls: ['./about-faq.component.scss'], + imports: [IonAccordionGroup, IonAccordion, IonItem, IonLabel], }) export class AboutFaqComponent { questions = [ diff --git a/src/app/pages/landing/about/about-hero/about-hero.component.ts b/src/app/pages/landing/about/about-hero/about-hero.component.ts index 3b7c7d6a..3ffc0f15 100644 --- a/src/app/pages/landing/about/about-hero/about-hero.component.ts +++ b/src/app/pages/landing/about/about-hero/about-hero.component.ts @@ -1,8 +1,18 @@ import {Component} from '@angular/core'; +import {IonBadge, IonButton, IonIcon} from '@ionic/angular/standalone'; +import {RouterLink} from '@angular/router'; +import {arrowForward} from 'ionicons/icons'; +import {addIcons} from 'ionicons'; +import {TranslocoPipe} from '@ngneat/transloco'; @Component({ selector: 'app-about-hero', templateUrl: './about-hero.component.html', styleUrls: ['./about-hero.component.scss'], + imports: [IonBadge, IonButton, RouterLink, IonIcon, TranslocoPipe], }) -export class AboutHeroComponent {} +export class AboutHeroComponent { + constructor() { + addIcons({arrowForward}); + } +} diff --git a/src/app/pages/landing/about/about-objectives/about-objectives.component.ts b/src/app/pages/landing/about/about-objectives/about-objectives.component.ts index 0fdf3d70..88dacdb2 100644 --- a/src/app/pages/landing/about/about-objectives/about-objectives.component.ts +++ b/src/app/pages/landing/about/about-objectives/about-objectives.component.ts @@ -1,8 +1,10 @@ import {Component} from '@angular/core'; +import {IonCard, IonCardContent, IonCardHeader, IonCardTitle} from '@ionic/angular/standalone'; @Component({ selector: 'app-about-objectives', templateUrl: './about-objectives.component.html', styleUrls: ['./about-objectives.component.scss'], + imports: [IonCard, IonCardHeader, IonCardTitle, IonCardContent], }) export class AboutObjectivesComponent {} diff --git a/src/app/pages/landing/about/about-pricing/about-pricing.component.ts b/src/app/pages/landing/about/about-pricing/about-pricing.component.ts index 53d08294..7d4f4d15 100644 --- a/src/app/pages/landing/about/about-pricing/about-pricing.component.ts +++ b/src/app/pages/landing/about/about-pricing/about-pricing.component.ts @@ -1,12 +1,17 @@ import {Component} from '@angular/core'; -import {FormControl, FormGroup} from '@angular/forms'; +import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms'; import {tap} from 'rxjs/operators'; import {takeUntilDestroyed} from '@angular/core/rxjs-interop'; +import {IonButton, IonCard, IonCardContent, IonCardHeader, IonCardTitle, IonIcon} from '@ionic/angular/standalone'; +import {addIcons} from 'ionicons'; +import {arrowForward} from 'ionicons/icons'; +import {DecimalPipe} from '@angular/common'; @Component({ selector: 'app-about-pricing', templateUrl: './about-pricing.component.html', styleUrls: ['./about-pricing.component.scss'], + imports: [IonCard, IonCardHeader, IonCardTitle, IonCardContent, IonButton, ReactiveFormsModule, IonIcon, DecimalPipe], }) export class AboutPricingComponent { form = new FormGroup({ @@ -58,6 +63,8 @@ export class AboutPricingComponent { takeUntilDestroyed() ) .subscribe(); + + addIcons({arrowForward}); } applyPreset(preset: any) { diff --git a/src/app/pages/landing/about/about-team/about-team.component.ts b/src/app/pages/landing/about/about-team/about-team.component.ts index bbd2784f..2f5c2d06 100644 --- a/src/app/pages/landing/about/about-team/about-team.component.ts +++ b/src/app/pages/landing/about/about-team/about-team.component.ts @@ -1,9 +1,11 @@ import {Component} from '@angular/core'; +import {IonAvatar, IonBadge, IonCard, IonCardContent, IonCardHeader, IonCardTitle} from '@ionic/angular/standalone'; @Component({ selector: 'app-about-team', templateUrl: './about-team.component.html', styleUrls: ['./about-team.component.scss'], + imports: [IonCard, IonBadge, IonCardHeader, IonAvatar, IonCardTitle, IonCardContent], }) export class AboutTeamComponent { teamMembers = [ diff --git a/src/app/pages/landing/about/about.component.ts b/src/app/pages/landing/about/about.component.ts index 6bd51021..2f489e7f 100644 --- a/src/app/pages/landing/about/about.component.ts +++ b/src/app/pages/landing/about/about.component.ts @@ -1,8 +1,14 @@ import {Component} from '@angular/core'; +import {AboutHeroComponent} from './about-hero/about-hero.component'; +import {AboutBenefitsComponent} from './about-benefits/about-benefits.component'; +import {AboutCustomersComponent} from './about-customers/about-customers.component'; +import {AboutTeamComponent} from './about-team/about-team.component'; +import {AboutFaqComponent} from './about-faq/about-faq.component'; @Component({ selector: 'app-about', templateUrl: './about.component.html', styleUrls: ['./about.component.scss'], + imports: [AboutHeroComponent, AboutBenefitsComponent, AboutCustomersComponent, AboutTeamComponent, AboutFaqComponent], }) export class AboutComponent {} diff --git a/src/app/pages/landing/about/lazy-map/lazy-map.component.ts b/src/app/pages/landing/about/lazy-map/lazy-map.component.ts index ca4ece8c..a12b1464 100644 --- a/src/app/pages/landing/about/lazy-map/lazy-map.component.ts +++ b/src/app/pages/landing/about/lazy-map/lazy-map.component.ts @@ -1,4 +1,4 @@ -import {AfterViewInit, Component, ViewChild, ViewContainerRef} from '@angular/core'; +import {AfterViewInit, Component, viewChild, ViewContainerRef} from '@angular/core'; import {ComponentType} from '@angular/cdk/overlay'; @Component({ @@ -7,7 +7,7 @@ import {ComponentType} from '@angular/cdk/overlay'; styleUrls: ['./lazy-map.component.scss'], }) export class LazyMapComponent implements AfterViewInit { - @ViewChild('mapHost', {read: ViewContainerRef}) mapHost: ViewContainerRef; + readonly mapHost = viewChild('mapHost', {read: ViewContainerRef}); constructor() {} @@ -19,6 +19,6 @@ export class LazyMapComponent implements AfterViewInit { const chunk = await import('../../../../components/map/map.component'); const component = Object.values(chunk)[0] as ComponentType; - this.mapHost.createComponent(component); + this.mapHost().createComponent(component); } } diff --git a/src/app/pages/landing/contribute/contribute.component.html b/src/app/pages/landing/contribute/contribute.component.html index 2e6ddf25..adbeb08e 100644 --- a/src/app/pages/landing/contribute/contribute.component.html +++ b/src/app/pages/landing/contribute/contribute.component.html @@ -12,7 +12,7 @@

Join Our Efforts

- + {{ card.title }} {{ card.subtitle }} diff --git a/src/app/pages/landing/contribute/contribute.component.ts b/src/app/pages/landing/contribute/contribute.component.ts index 5771dfb7..70396257 100644 --- a/src/app/pages/landing/contribute/contribute.component.ts +++ b/src/app/pages/landing/contribute/contribute.component.ts @@ -1,9 +1,21 @@ import {Component} from '@angular/core'; +import { + IonButton, + IonCard, + IonCardContent, + IonCardHeader, + IonCardSubtitle, + IonCardTitle, + IonIcon, +} from '@ionic/angular/standalone'; +import {addIcons} from 'ionicons'; +import {alertCircleOutline, code, language} from 'ionicons/icons'; @Component({ selector: 'app-contribute', templateUrl: './contribute.component.html', styleUrls: ['./contribute.component.scss'], + imports: [IonCard, IonCardHeader, IonCardTitle, IonIcon, IonCardSubtitle, IonCardContent, IonButton], }) export class ContributeComponent { cards = [ @@ -44,4 +56,8 @@ export class ContributeComponent { }, }, ]; + + constructor() { + addIcons({code, language, alertCircleOutline}); + } } diff --git a/src/app/pages/landing/landing-footer/landing-footer.component.ts b/src/app/pages/landing/landing-footer/landing-footer.component.ts index 2f412e49..ef3d4f7c 100644 --- a/src/app/pages/landing/landing-footer/landing-footer.component.ts +++ b/src/app/pages/landing/landing-footer/landing-footer.component.ts @@ -1,9 +1,13 @@ import {Component} from '@angular/core'; +import {I18NLanguageSelectorComponent} from '../../../components/i18n-language-selector/i18n-language-selector.component'; +import {RouterLink} from '@angular/router'; +import {TranslocoDirective} from '@ngneat/transloco'; @Component({ selector: 'app-landing-footer', templateUrl: './landing-footer.component.html', styleUrl: './landing-footer.component.scss', + imports: [I18NLanguageSelectorComponent, RouterLink, TranslocoDirective], }) export class LandingFooterComponent { legalPages: string[] = ['terms', 'privacy', 'licenses']; diff --git a/src/app/pages/landing/landing.component.html b/src/app/pages/landing/landing.component.html index 2c1b2c39..0e808749 100644 --- a/src/app/pages/landing/landing.component.html +++ b/src/app/pages/landing/landing.component.html @@ -54,6 +54,6 @@ - + diff --git a/src/app/pages/landing/landing.component.ts b/src/app/pages/landing/landing.component.ts index d8113d71..1df51ef7 100644 --- a/src/app/pages/landing/landing.component.ts +++ b/src/app/pages/landing/landing.component.ts @@ -1,18 +1,61 @@ import {Component, inject} from '@angular/core'; import {MediaMatcher} from '@angular/cdk/layout'; +import { + IonButton, + IonButtons, + IonContent, + IonFooter, + IonHeader, + IonIcon, + IonItem, + IonLabel, + IonList, + IonListHeader, + IonMenu, + IonMenuButton, + IonMenuToggle, + IonTitle, + IonToolbar, +} from '@ionic/angular/standalone'; +import {RouterLink, RouterOutlet} from '@angular/router'; +import {TranslocoPipe} from '@ngneat/transloco'; +import {arrowForward} from 'ionicons/icons'; +import {addIcons} from 'ionicons'; +import {LandingFooterComponent} from './landing-footer/landing-footer.component'; @Component({ selector: 'app-landing', templateUrl: './landing.component.html', styleUrls: ['./landing.component.scss'], + imports: [ + IonMenu, + IonHeader, + IonToolbar, + IonTitle, + IonContent, + IonList, + IonListHeader, + IonLabel, + IonMenuToggle, + IonItem, + RouterLink, + IonFooter, + IonButton, + TranslocoPipe, + IonButtons, + IonMenuButton, + IonIcon, + RouterOutlet, + LandingFooterComponent, + ], }) export class LandingComponent { private mediaMatcher = inject(MediaMatcher); + isMobile = this.mediaMatcher.matchMedia('(max-width: 768px)'); pages: string[] = ['about', 'contribute']; - isMobile!: MediaQueryList; constructor() { - this.isMobile = this.mediaMatcher.matchMedia('(max-width: 768px)'); + addIcons({arrowForward}); } } diff --git a/src/app/pages/landing/landing.module.ts b/src/app/pages/landing/landing.module.ts deleted file mode 100644 index e1130073..00000000 --- a/src/app/pages/landing/landing.module.ts +++ /dev/null @@ -1,77 +0,0 @@ -import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core'; -import {CommonModule} from '@angular/common'; -import {LandingComponent} from './landing.component'; -import {AboutComponent} from './about/about.component'; -import {ContributeComponent} from './contribute/contribute.component'; -import {AppTranslocoModule} from '../../core/modules/transloco/transloco.module'; -import {LandingRoutingModule} from './landing-routing.module'; -import {StoresComponent} from '../../components/stores/stores.component'; -import {AboutHeroComponent} from './about/about-hero/about-hero.component'; -import {AboutDirectionComponent} from './about/about-direction/about-direction.component'; -import {AboutAppearanceComponent} from './about/about-appearance/about-appearance.component'; -import {LazyMapComponent} from './about/lazy-map/lazy-map.component'; -import {LicensesComponent} from './licenses/licenses.component'; -import {MatTreeModule} from '@angular/material/tree'; -import {CdkTreeModule} from '@angular/cdk/tree'; -import {AboutBenefitsComponent} from './about/about-benefits/about-benefits.component'; -import {AboutTeamComponent} from './about/about-team/about-team.component'; -import {AboutPricingComponent} from './about/about-pricing/about-pricing.component'; -import {AboutCustomersComponent} from './about/about-customers/about-customers.component'; -import {AboutFaqComponent} from './about/about-faq/about-faq.component'; -import {MatExpansionModule} from '@angular/material/expansion'; -import {AboutObjectivesComponent} from './about/about-objectives/about-objectives.component'; -import {AboutApiComponent} from './about/about-api/about-api.component'; -import {SettingsPageModule} from '../settings/settings.module'; -import {IonicModule} from '@ionic/angular'; -import {I18NLanguageSelectorComponent} from '../../components/i18n-language-selector/i18n-language-selector.component'; -import {TermsComponent} from './terms/terms.component'; -import {PrivacyComponent} from './privacy/privacy.component'; -import {MermaidChartComponent} from './mermaid-chart/mermaid-chart.component'; -import {LandingFooterComponent} from './landing-footer/landing-footer.component'; -import {ReactiveFormsModule} from '@angular/forms'; -import {register} from 'swiper/element/bundle'; -import {SignedToSpokenModule} from '../translate/signed-to-spoken/signed-to-spoken.module'; - -register(); - -@NgModule({ - declarations: [ - LandingComponent, - AboutComponent, - ContributeComponent, - I18NLanguageSelectorComponent, - StoresComponent, - AboutHeroComponent, - AboutDirectionComponent, - AboutAppearanceComponent, - LazyMapComponent, - LicensesComponent, - LandingFooterComponent, - AboutBenefitsComponent, - AboutTeamComponent, - AboutPricingComponent, - AboutCustomersComponent, - AboutFaqComponent, - AboutObjectivesComponent, - AboutApiComponent, - TermsComponent, - PrivacyComponent, - ], - imports: [ - CommonModule, - AppTranslocoModule, - LandingRoutingModule, - MatTreeModule, - CdkTreeModule, - MatExpansionModule, - SettingsPageModule, - IonicModule, - MermaidChartComponent, - ReactiveFormsModule, - SignedToSpokenModule, - ], - bootstrap: [LandingComponent], - exports: [I18NLanguageSelectorComponent], - schemas: [CUSTOM_ELEMENTS_SCHEMA], -}) -export class LandingModule {} diff --git a/src/app/pages/landing/landing-routing.module.ts b/src/app/pages/landing/landing.routes.ts similarity index 75% rename from src/app/pages/landing/landing-routing.module.ts rename to src/app/pages/landing/landing.routes.ts index 711ba167..d0e8a7fd 100644 --- a/src/app/pages/landing/landing-routing.module.ts +++ b/src/app/pages/landing/landing.routes.ts @@ -1,5 +1,4 @@ -import {NgModule} from '@angular/core'; -import {RouterModule, Routes} from '@angular/router'; +import {Routes} from '@angular/router'; import {AboutComponent} from './about/about.component'; import {ContributeComponent} from './contribute/contribute.component'; import {LandingComponent} from './landing.component'; @@ -7,7 +6,7 @@ import {LicensesComponent} from './licenses/licenses.component'; import {TermsComponent} from './terms/terms.component'; import {PrivacyComponent} from './privacy/privacy.component'; -const routes: Routes = [ +export const routes: Routes = [ { path: '', component: LandingComponent, @@ -21,9 +20,3 @@ const routes: Routes = [ ], }, ]; - -@NgModule({ - imports: [RouterModule.forChild(routes)], - exports: [RouterModule], -}) -export class LandingRoutingModule {} diff --git a/src/app/pages/landing/licenses/licenses.component.ts b/src/app/pages/landing/licenses/licenses.component.ts index 94f41a3f..6d72569a 100644 --- a/src/app/pages/landing/licenses/licenses.component.ts +++ b/src/app/pages/landing/licenses/licenses.component.ts @@ -1,8 +1,14 @@ -import {Component, OnInit, inject} from '@angular/core'; +import {Component, inject, OnInit} from '@angular/core'; import {HttpClient} from '@angular/common/http'; import {NestedTreeControl} from '@angular/cdk/tree'; import {AssetState} from '../../../core/services/assets/assets.service'; -import {MatTreeNestedDataSource} from '@angular/material/tree'; +import {MatTreeModule, MatTreeNestedDataSource} from '@angular/material/tree'; +import {MatIconButton} from '@angular/material/button'; +import {IonIcon} from '@ionic/angular/standalone'; +import {addIcons} from 'ionicons'; +import {chevronDownOutline, chevronForwardOutline} from 'ionicons/icons'; +import {NgTemplateOutlet} from '@angular/common'; +import {TranslocoPipe} from '@ngneat/transloco'; interface PackagesParent { name: string; @@ -22,6 +28,7 @@ type Node = PackagesParent | PackageLicense; selector: 'app-licenses', templateUrl: './licenses.component.html', styleUrls: ['./licenses.component.scss'], + imports: [MatTreeModule, MatIconButton, IonIcon, TranslocoPipe, NgTemplateOutlet], }) export class LicensesComponent implements OnInit { private httpClient = inject(HttpClient); @@ -29,6 +36,10 @@ export class LicensesComponent implements OnInit { treeControl = new NestedTreeControl((node: any) => node.children); filesTree = new MatTreeNestedDataSource(); + constructor() { + addIcons({chevronDownOutline, chevronForwardOutline}); + } + ngOnInit(): void { this.httpClient.get('/licenses.json').subscribe((licenses: any) => { this.updateTree(licenses); diff --git a/src/app/pages/landing/mermaid-chart/mermaid-chart.component.ts b/src/app/pages/landing/mermaid-chart/mermaid-chart.component.ts index 9495fb2f..3dca3a51 100644 --- a/src/app/pages/landing/mermaid-chart/mermaid-chart.component.ts +++ b/src/app/pages/landing/mermaid-chart/mermaid-chart.component.ts @@ -1,4 +1,4 @@ -import {AfterViewInit, Component, ElementRef, ViewChild} from '@angular/core'; +import {AfterViewInit, Component, ElementRef, viewChild} from '@angular/core'; import mermaid, {MermaidConfig} from 'mermaid'; const config: MermaidConfig = { @@ -19,7 +19,7 @@ mermaid.initialize(config); styleUrl: './mermaid-chart.component.scss', }) export class MermaidChartComponent implements AfterViewInit { - @ViewChild('mermaid') mermaidEl: ElementRef; + readonly mermaidEl = viewChild('mermaid'); async ngAfterViewInit() { const graphDefinition = ` @@ -50,7 +50,8 @@ linkStyle 8,9,14,19,20 stroke:orange; `; const {svg, bindFunctions} = await mermaid.render('graphDiv', graphDefinition); - this.mermaidEl.nativeElement.innerHTML = svg; - bindFunctions(this.mermaidEl.nativeElement); + const mermaidEl = this.mermaidEl(); + mermaidEl.nativeElement.innerHTML = svg; + bindFunctions(mermaidEl.nativeElement); } } diff --git a/src/app/pages/main.component.spec.ts b/src/app/pages/main.component.spec.ts index 7c919993..24babbdf 100644 --- a/src/app/pages/main.component.spec.ts +++ b/src/app/pages/main.component.spec.ts @@ -1,7 +1,6 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; 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'; diff --git a/src/app/pages/not-found/not-found.component.spec.ts b/src/app/pages/not-found/not-found.component.spec.ts index 5117e90e..bea811f4 100644 --- a/src/app/pages/not-found/not-found.component.spec.ts +++ b/src/app/pages/not-found/not-found.component.spec.ts @@ -1,11 +1,7 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {NotFoundComponent} from './not-found.component'; -import { - AppTranslocoTestingModule, - provideTranslocoTesting, -} from '../../core/modules/transloco/transloco-testing.module'; -import {IonicModule} from '@ionic/angular'; +import {provideTranslocoTesting} from '../../core/modules/transloco/transloco-testing.module'; describe('NotFoundComponent', () => { let component: NotFoundComponent; diff --git a/src/app/pages/not-found/not-found.component.ts b/src/app/pages/not-found/not-found.component.ts index c508a5a8..a79a8acc 100644 --- a/src/app/pages/not-found/not-found.component.ts +++ b/src/app/pages/not-found/not-found.component.ts @@ -7,7 +7,6 @@ import {RouterLink} from '@angular/router'; selector: 'app-not-found', templateUrl: './not-found.component.html', styleUrls: ['./not-found.component.scss'], - standalone: true, imports: [IonContent, IonButton, TranslocoPipe, RouterLink], }) export class NotFoundComponent {} diff --git a/src/app/pages/not-found/not-found.module.ts b/src/app/pages/not-found/not-found.module.ts deleted file mode 100644 index 7f7de1eb..00000000 --- a/src/app/pages/not-found/not-found.module.ts +++ /dev/null @@ -1,22 +0,0 @@ -import {IonicModule} from '@ionic/angular'; -import {NgModule} from '@angular/core'; -import {CommonModule} from '@angular/common'; -import {NotFoundComponent} from './not-found.component'; -import {RouterModule} from '@angular/router'; -import {AppTranslocoModule} from '../../core/modules/transloco/transloco.module'; - -@NgModule({ - imports: [ - IonicModule, - CommonModule, - AppTranslocoModule, - RouterModule.forChild([ - { - path: '', - component: NotFoundComponent, - }, - ]), - ], - declarations: [NotFoundComponent], -}) -export class NotFoundPageModule {} diff --git a/src/app/pages/playground/playground.component.ts b/src/app/pages/playground/playground.component.ts index 876f61f7..440d4863 100644 --- a/src/app/pages/playground/playground.component.ts +++ b/src/app/pages/playground/playground.component.ts @@ -1,15 +1,32 @@ -import {Component, OnInit, inject} from '@angular/core'; +import {Component, inject, OnInit} from '@angular/core'; import {Store} from '@ngxs/store'; import {BaseComponent} from '../../components/base/base.component'; import {filter, takeUntil, tap} from 'rxjs/operators'; import {SetVideo, StartCamera} from '../../core/modules/ngxs/store/video/video.actions'; -import {TranslocoService} from '@ngneat/transloco'; +import {TranslocoPipe, TranslocoService} from '@ngneat/transloco'; import {Observable} from 'rxjs'; +import {IonContent, IonHeader, IonIcon, IonMenu, IonSplitPane, IonTitle, IonToolbar} from '@ionic/angular/standalone'; +import {VideoComponent} from '../../components/video/video.component'; +import {SettingsComponent} from '../../modules/settings/settings/settings.component'; +import {earOutline} from 'ionicons/icons'; +import {addIcons} from 'ionicons'; @Component({ selector: 'app-playground', templateUrl: './playground.component.html', styleUrls: ['./playground.component.scss'], + imports: [ + IonSplitPane, + IonContent, + IonMenu, + IonHeader, + IonToolbar, + IonTitle, + VideoComponent, + SettingsComponent, + IonIcon, + TranslocoPipe, + ], }) export class PlaygroundComponent extends BaseComponent implements OnInit { private store = inject(Store); @@ -21,6 +38,8 @@ export class PlaygroundComponent extends BaseComponent implements OnInit { super(); this.receiveVideo$ = this.store.select(state => state.settings.receiveVideo); + + addIcons({earOutline}); } ngOnInit(): void { diff --git a/src/app/pages/playground/playground.module.ts b/src/app/pages/playground/playground.module.ts deleted file mode 100644 index 32ec3f59..00000000 --- a/src/app/pages/playground/playground.module.ts +++ /dev/null @@ -1,29 +0,0 @@ -import {NgModule} from '@angular/core'; -import {PlaygroundComponent} from './playground.component'; -import {IonicModule} from '@ionic/angular'; -import {SettingsModule} from '../../modules/settings/settings.module'; -import {VideoModule} from '../../components/video/video.module'; -import {AppTranslocoModule} from '../../core/modules/transloco/transloco.module'; -import {RouterModule} from '@angular/router'; -import {NgxsModule} from '@ngxs/store'; -import {SettingsState} from '../../modules/settings/settings.state'; - -const routes = [ - { - path: '', - component: PlaygroundComponent, - }, -]; - -@NgModule({ - imports: [ - AppTranslocoModule, - NgxsModule.forFeature([SettingsState]), - IonicModule, - SettingsModule, - VideoModule, - RouterModule.forChild(routes), - ], - declarations: [PlaygroundComponent], -}) -export class PlaygroundPageModule {} diff --git a/src/app/pages/settings/settings-appearance/settings-appearance-images/settings-appearance-images.component.ts b/src/app/pages/settings/settings-appearance/settings-appearance-images/settings-appearance-images.component.ts index 4673bb31..fac60edb 100644 --- a/src/app/pages/settings/settings-appearance/settings-appearance-images/settings-appearance-images.component.ts +++ b/src/app/pages/settings/settings-appearance/settings-appearance-images/settings-appearance-images.component.ts @@ -1,6 +1,5 @@ -import {Component, Input, inject} from '@angular/core'; +import {Component, Input} from '@angular/core'; import {BaseSettingsComponent} from '../../../../modules/settings/settings.component'; -import {Store} from '@ngxs/store'; import {TranslocoDirective} from '@ngneat/transloco'; import {MatTooltip} from '@angular/material/tooltip'; import {IonicModule} from '@ionic/angular'; diff --git a/src/app/pages/settings/settings-offline/settings-offline.component.ts b/src/app/pages/settings/settings-offline/settings-offline.component.ts index 11db58ff..b35eb21e 100644 --- a/src/app/pages/settings/settings-offline/settings-offline.component.ts +++ b/src/app/pages/settings/settings-offline/settings-offline.component.ts @@ -1,17 +1,16 @@ -import {Component, OnInit, inject} from '@angular/core'; +import {Component, inject, OnInit} from '@angular/core'; import {isIOS} from '../../../core/constants'; import {AssetsService, AssetState} from '../../../core/services/assets/assets.service'; import { - MatTreeNestedDataSource, + MatNestedTreeNode, MatTree, - MatTreeNodeDef, + MatTreeNestedDataSource, MatTreeNode, - MatNestedTreeNode, - MatTreeNodeToggle, MatTreeNodeOutlet, + MatTreeNodeToggle, } from '@angular/material/tree'; import {NestedTreeControl} from '@angular/cdk/tree'; -import {TranslocoService, TranslocoDirective, TranslocoPipe} from '@ngneat/transloco'; +import {TranslocoDirective, TranslocoPipe, TranslocoService} from '@ngneat/transloco'; import {takeUntil, tap} from 'rxjs/operators'; import {BaseComponent} from '../../../components/base/base.component'; import {IonicModule} from '@ionic/angular'; @@ -45,7 +44,6 @@ if (!isIOS) { IonicModule, MatProgressSpinner, MatTree, - MatTreeNodeDef, MatTreeNode, NgTemplateOutlet, MatNestedTreeNode, diff --git a/src/app/pages/settings/settings.module.ts b/src/app/pages/settings/settings.module.ts deleted file mode 100644 index d8a52cd3..00000000 --- a/src/app/pages/settings/settings.module.ts +++ /dev/null @@ -1,45 +0,0 @@ -import {NgModule} from '@angular/core'; -import {CommonModule} from '@angular/common'; -import {SettingsRoutingModule} from './settings-routing.module'; -import {SettingsPageComponent} from './settings.component'; -import {AppTranslocoModule} from '../../core/modules/transloco/transloco.module'; -import {SettingsFeedbackComponent} from './settings-feedback/settings-feedback.component'; -import {SettingsAboutComponent} from './settings-about/settings-about.component'; -import {SettingsVoiceInputComponent} from './settings-voice-input/settings-voice-input.component'; -import {SettingsVoiceOutputComponent} from './settings-voice-output/settings-voice-output.component'; -import {SettingsOfflineComponent} from './settings-offline/settings-offline.component'; -import {SettingsAppearanceComponent} from './settings-appearance/settings-appearance.component'; -import {MatTreeModule} from '@angular/material/tree'; -import {CdkTreeModule} from '@angular/cdk/tree'; -import {NgxFilesizeModule} from 'ngx-filesize'; -import {IonicModule} from '@ionic/angular'; -import {SettingsMenuComponent} from './settings-menu/settings-menu.component'; -import {SettingsAppearanceImagesComponent} from './settings-appearance/settings-appearance-images/settings-appearance-images.component'; -import {MatTooltipModule} from '@angular/material/tooltip'; -import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'; - -@NgModule({ - declarations: [SettingsPageComponent], - imports: [ - CommonModule, - AppTranslocoModule, - SettingsRoutingModule, - NgxFilesizeModule, - MatTooltipModule, - MatProgressSpinnerModule, - MatTreeModule, - CdkTreeModule, - IonicModule, - SettingsOfflineComponent, - SettingsAppearanceComponent, - SettingsFeedbackComponent, - SettingsAboutComponent, - SettingsVoiceInputComponent, - SettingsVoiceOutputComponent, - SettingsMenuComponent, - SettingsAppearanceImagesComponent, - ], - bootstrap: [SettingsPageComponent], - exports: [SettingsAppearanceComponent, SettingsAppearanceImagesComponent], -}) -export class SettingsPageModule {} diff --git a/src/app/pages/translate/drop-pose-file/drop-pose-file.component.ts b/src/app/pages/translate/drop-pose-file/drop-pose-file.component.ts index 3193ef44..508b0691 100644 --- a/src/app/pages/translate/drop-pose-file/drop-pose-file.component.ts +++ b/src/app/pages/translate/drop-pose-file/drop-pose-file.component.ts @@ -7,7 +7,6 @@ import {DropzoneDirective} from '../../../directives/dropzone.directive'; selector: 'app-drop-pose-file', templateUrl: './drop-pose-file.component.html', styleUrls: ['./drop-pose-file.component.scss'], - standalone: true, imports: [DropzoneDirective], }) export class DropPoseFileComponent { diff --git a/src/app/pages/translate/input/button/button.component.ts b/src/app/pages/translate/input/button/button.component.ts index 4a807a64..1b4df58a 100644 --- a/src/app/pages/translate/input/button/button.component.ts +++ b/src/app/pages/translate/input/button/button.component.ts @@ -1,4 +1,4 @@ -import {Component, Input, OnInit, inject} from '@angular/core'; +import {Component, inject, Input} from '@angular/core'; import {InputMode} from '../../../../modules/translate/translate.state'; import {Store} from '@ngxs/store'; import {SetInputMode} from '../../../../modules/translate/translate.actions'; @@ -11,7 +11,6 @@ import {AsyncPipe} from '@angular/common'; selector: 'app-translate-input-button', templateUrl: './button.component.html', styleUrls: ['./button.component.scss'], - standalone: true, imports: [IonButton, IonIcon, TranslocoPipe, AsyncPipe], }) export class TranslateInputButtonComponent { diff --git a/src/app/pages/translate/language-selector/language-selector.component.ts b/src/app/pages/translate/language-selector/language-selector.component.ts index fd77a059..026f97b5 100644 --- a/src/app/pages/translate/language-selector/language-selector.component.ts +++ b/src/app/pages/translate/language-selector/language-selector.component.ts @@ -1,4 +1,4 @@ -import {Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, inject} from '@angular/core'; +import {Component, EventEmitter, inject, Input, OnChanges, OnInit, Output, SimpleChanges} from '@angular/core'; import {Store} from '@ngxs/store'; import {switchMap} from 'rxjs'; import {TranslocoDirective, TranslocoService} from '@ngneat/transloco'; @@ -18,7 +18,6 @@ const IntlTypeMap: {[key: string]: Intl.DisplayNamesType} = {languages: 'languag selector: 'app-language-selector', templateUrl: './language-selector.component.html', styleUrls: ['./language-selector.component.scss'], - standalone: true, imports: [IonButton, IonIcon, MatMenuTrigger, FlagIconComponent, MatMenuModule, TranslocoDirective, MatTabsModule], }) export class LanguageSelectorComponent extends BaseComponent implements OnInit, OnChanges { diff --git a/src/app/pages/translate/language-selectors/language-selectors.component.ts b/src/app/pages/translate/language-selectors/language-selectors.component.ts index 75ab7ef9..0b898fce 100644 --- a/src/app/pages/translate/language-selectors/language-selectors.component.ts +++ b/src/app/pages/translate/language-selectors/language-selectors.component.ts @@ -1,4 +1,4 @@ -import {Component, HostBinding, OnInit, inject} from '@angular/core'; +import {Component, HostBinding, inject, OnInit} from '@angular/core'; import { FlipTranslationDirection, SetSignedLanguage, @@ -21,7 +21,6 @@ import {TranslocoPipe} from '@ngneat/transloco'; selector: 'app-language-selectors', templateUrl: './language-selectors.component.html', styleUrls: ['./language-selectors.component.scss'], - standalone: true, imports: [IonButton, IonIcon, LanguageSelectorComponent, AsyncPipe, MatTooltip, TranslocoPipe], }) export class LanguageSelectorsComponent extends BaseComponent implements OnInit { diff --git a/src/app/pages/translate/language-selectors/language-selectors.module.ts b/src/app/pages/translate/language-selectors/language-selectors.module.ts deleted file mode 100644 index 435945f4..00000000 --- a/src/app/pages/translate/language-selectors/language-selectors.module.ts +++ /dev/null @@ -1,27 +0,0 @@ -import {NgModule} from '@angular/core'; -import {LanguageSelectorComponent} from '../language-selector/language-selector.component'; -import {CommonModule} from '@angular/common'; -import {IonicModule} from '@ionic/angular'; -import {MatTabsModule} from '@angular/material/tabs'; -import {MatMenuModule} from '@angular/material/menu'; -import {MatTooltipModule} from '@angular/material/tooltip'; -import {FlagIconComponent} from '../../../components/flag-icon/flag-icon.component'; -import {AppTranslocoModule} from '../../../core/modules/transloco/transloco.module'; -import {NgxsModule} from '@ngxs/store'; -import {TranslateState} from '../../../modules/translate/translate.state'; -import {LanguageSelectorsComponent} from './language-selectors.component'; - -@NgModule({ - imports: [ - CommonModule, - IonicModule, - AppTranslocoModule, - NgxsModule.forFeature([TranslateState]), - MatTabsModule, - MatMenuModule, - MatTooltipModule, - ], - declarations: [LanguageSelectorsComponent, LanguageSelectorComponent, FlagIconComponent], - exports: [LanguageSelectorsComponent], -}) -export class TranslateLanguageSelectorsModule {} diff --git a/src/app/pages/translate/pose-viewers/avatar-pose-viewer/avatar-pose-viewer.component.ts b/src/app/pages/translate/pose-viewers/avatar-pose-viewer/avatar-pose-viewer.component.ts index 967fb6ff..1179f6a1 100644 --- a/src/app/pages/translate/pose-viewers/avatar-pose-viewer/avatar-pose-viewer.component.ts +++ b/src/app/pages/translate/pose-viewers/avatar-pose-viewer/avatar-pose-viewer.component.ts @@ -1,6 +1,5 @@ -import {AfterViewInit, Component, CUSTOM_ELEMENTS_SCHEMA, Input, inject} from '@angular/core'; +import {AfterViewInit, Component, CUSTOM_ELEMENTS_SCHEMA, Input} from '@angular/core'; import {BasePoseViewerComponent} from '../pose-viewer.component'; -import {Store} from '@ngxs/store'; import {fromEvent} from 'rxjs'; import {takeUntil, tap} from 'rxjs/operators'; import {AnimationComponent} from '../../../../components/animation/animation.component'; @@ -9,7 +8,6 @@ import {AnimationComponent} from '../../../../components/animation/animation.com selector: 'app-avatar-pose-viewer', templateUrl: './avatar-pose-viewer.component.html', styleUrls: ['./avatar-pose-viewer.component.scss'], - standalone: true, imports: [AnimationComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], }) @@ -19,7 +17,7 @@ export class AvatarPoseViewerComponent extends BasePoseViewerComponent implement effectiveFps: number = 1; ngAfterViewInit(): void { - const poseEl = this.poseEl.nativeElement; + const poseEl = this.poseEl().nativeElement; // TODO reset animation through the store fromEvent(poseEl, 'firstRender$') .pipe( diff --git a/src/app/pages/translate/pose-viewers/human-pose-viewer/human-pose-viewer.component.ts b/src/app/pages/translate/pose-viewers/human-pose-viewer/human-pose-viewer.component.ts index 23a6893c..19d6052d 100644 --- a/src/app/pages/translate/pose-viewers/human-pose-viewer/human-pose-viewer.component.ts +++ b/src/app/pages/translate/pose-viewers/human-pose-viewer/human-pose-viewer.component.ts @@ -3,16 +3,15 @@ import { Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, + inject, Input, OnDestroy, - ViewChild, - inject, + viewChild, } from '@angular/core'; import {Pix2PixService} from '../../../../modules/pix2pix/pix2pix.service'; import {fromEvent, interval} from 'rxjs'; import {takeUntil, tap} from 'rxjs/operators'; import {BasePoseViewerComponent} from '../pose-viewer.component'; -import {Store} from '@ngxs/store'; import {transferableImage} from '../../../../core/helpers/image/transferable'; import {IonProgressBar, IonSpinner} from '@ionic/angular/standalone'; import {AsyncPipe} from '@angular/common'; @@ -23,7 +22,6 @@ import {TranslocoDirective} from '@ngneat/transloco'; selector: 'app-human-pose-viewer', templateUrl: './human-pose-viewer.component.html', styleUrls: ['./human-pose-viewer.component.scss'], - standalone: true, imports: [IonProgressBar, IonSpinner, AsyncPipe, MatTooltip, TranslocoDirective], schemas: [CUSTOM_ELEMENTS_SCHEMA], }) @@ -32,7 +30,7 @@ export class HumanPoseViewerComponent extends BasePoseViewerComponent implements appearance$ = this.store.select(state => state.settings.appearance); - @ViewChild('canvas') canvasEl: ElementRef; + readonly canvasEl = viewChild>('canvas'); @Input() src: string; @Input() width: string; @@ -44,9 +42,9 @@ export class HumanPoseViewerComponent extends BasePoseViewerComponent implements totalFrames = 1; ngAfterViewInit(): void { - const pose = this.poseEl.nativeElement; + const pose = this.poseEl().nativeElement; - const canvas = this.canvasEl.nativeElement; + const canvas = this.canvasEl().nativeElement; const ctx = canvas.getContext('2d'); let destroyed = false; @@ -135,7 +133,7 @@ export class HumanPoseViewerComponent extends BasePoseViewerComponent implements return; } - const canvas = this.canvasEl.nativeElement; + const canvas = this.canvasEl().nativeElement; await this.startRecording(canvas as any); const ctx = canvas.getContext('2d'); @@ -160,10 +158,11 @@ export class HumanPoseViewerComponent extends BasePoseViewerComponent implements } get progress(): number { - if (!this.poseEl) { + const poseEl = this.poseEl(); + if (!poseEl) { return 0; } - const pose = this.poseEl.nativeElement; + const pose = poseEl.nativeElement; if (!pose.duration) { return 0; } diff --git a/src/app/pages/translate/pose-viewers/pose-viewer.component.ts b/src/app/pages/translate/pose-viewers/pose-viewer.component.ts index b1a3f31f..fc02a94a 100644 --- a/src/app/pages/translate/pose-viewers/pose-viewer.component.ts +++ b/src/app/pages/translate/pose-viewers/pose-viewer.component.ts @@ -1,4 +1,4 @@ -import {Component, ElementRef, inject, OnDestroy, OnInit, ViewChild} from '@angular/core'; +import {Component, ElementRef, inject, OnDestroy, OnInit, viewChild} from '@angular/core'; import {BaseComponent} from '../../../components/base/base.component'; import {fromEvent, Subscription} from 'rxjs'; import {takeUntil, tap} from 'rxjs/operators'; @@ -6,7 +6,6 @@ import {Store} from '@ngxs/store'; import {SetSignedLanguageVideo} from '../../../modules/translate/translate.actions'; import {PlayableVideoEncoder} from './playable-video-encoder'; import {isChrome} from '../../../core/constants'; -import {MediaMatcher} from '@angular/cdk/layout'; @Component({ selector: 'app-pose-viewer', @@ -16,7 +15,7 @@ import {MediaMatcher} from '@angular/cdk/layout'; export abstract class BasePoseViewerComponent extends BaseComponent implements OnInit, OnDestroy { protected store = inject(Store); - @ViewChild('poseViewer') poseEl: ElementRef; + readonly poseEl = viewChild>('poseViewer'); background: string = ''; @@ -74,7 +73,7 @@ export abstract class BasePoseViewerComponent extends BaseComponent implements O } async fps() { - const pose = await this.poseEl.nativeElement.getPose(); + const pose = await this.poseEl().nativeElement.getPose(); return pose.body.fps; } @@ -130,7 +129,7 @@ export abstract class BasePoseViewerComponent extends BaseComponent implements O ); this.mediaSubscriptions.push(stopEvent.subscribe()); - const duration = this.poseEl.nativeElement.duration * 1000; + const duration = this.poseEl().nativeElement.duration * 1000; this.mediaRecorder.start(duration); } diff --git a/src/app/pages/translate/pose-viewers/skeleton-pose-viewer/skeleton-pose-viewer.component.ts b/src/app/pages/translate/pose-viewers/skeleton-pose-viewer/skeleton-pose-viewer.component.ts index 611e1c33..dff50883 100644 --- a/src/app/pages/translate/pose-viewers/skeleton-pose-viewer/skeleton-pose-viewer.component.ts +++ b/src/app/pages/translate/pose-viewers/skeleton-pose-viewer/skeleton-pose-viewer.component.ts @@ -8,14 +8,13 @@ import {PlayableVideoEncoder} from '../playable-video-encoder'; selector: 'app-skeleton-pose-viewer', templateUrl: './skeleton-pose-viewer.component.html', styleUrls: ['./skeleton-pose-viewer.component.scss'], - standalone: true, schemas: [CUSTOM_ELEMENTS_SCHEMA], }) export class SkeletonPoseViewerComponent extends BasePoseViewerComponent implements AfterViewInit { @Input() src: string; ngAfterViewInit(): void { - const pose = this.poseEl.nativeElement; + const pose = this.poseEl().nativeElement; fromEvent(pose, 'firstRender$') .pipe( @@ -63,7 +62,7 @@ export class SkeletonPoseViewerComponent extends BasePoseViewerComponent impleme } pauseInvisible() { - const pose = this.poseEl.nativeElement; + const pose = this.poseEl().nativeElement; // TODO: this should be on the current element, not document fromEvent(document, 'visibilitychange') diff --git a/src/app/pages/translate/pose-viewers/viewer-selector/viewer-selector.component.ts b/src/app/pages/translate/pose-viewers/viewer-selector/viewer-selector.component.ts index 3d70c788..61e78b10 100644 --- a/src/app/pages/translate/pose-viewers/viewer-selector/viewer-selector.component.ts +++ b/src/app/pages/translate/pose-viewers/viewer-selector/viewer-selector.component.ts @@ -1,6 +1,5 @@ -import {Component, OnInit, inject} from '@angular/core'; +import {Component, OnInit} from '@angular/core'; import {BaseSettingsComponent} from '../../../../modules/settings/settings.component'; -import {Store} from '@ngxs/store'; import {PoseViewerSetting} from '../../../../modules/settings/settings.state'; import {takeUntil, tap} from 'rxjs/operators'; import {IonFab, IonFabButton, IonFabList, IonIcon} from '@ionic/angular/standalone'; @@ -19,7 +18,6 @@ export interface MatFabMenu { selector: 'app-viewer-selector', templateUrl: './viewer-selector.component.html', styleUrls: ['./viewer-selector.component.scss'], - standalone: true, imports: [IonFab, IonFabList, IonFabButton, IonIcon, MatTooltip, TranslocoDirective], }) export class ViewerSelectorComponent extends BaseSettingsComponent implements OnInit { diff --git a/src/app/pages/translate/send-feedback/send-feedback.component.ts b/src/app/pages/translate/send-feedback/send-feedback.component.ts index 0c7027f8..d7ed8725 100644 --- a/src/app/pages/translate/send-feedback/send-feedback.component.ts +++ b/src/app/pages/translate/send-feedback/send-feedback.component.ts @@ -5,7 +5,6 @@ import {TranslocoPipe} from '@ngneat/transloco'; selector: 'app-send-feedback', templateUrl: './send-feedback.component.html', styleUrls: ['./send-feedback.component.scss'], - standalone: true, imports: [TranslocoPipe], }) export class SendFeedbackComponent {} diff --git a/src/app/pages/translate/signed-to-spoken/signed-language-input/signed-language-input.component.ts b/src/app/pages/translate/signed-to-spoken/signed-language-input/signed-language-input.component.ts index d3580d72..3e1fe0bc 100644 --- a/src/app/pages/translate/signed-to-spoken/signed-language-input/signed-language-input.component.ts +++ b/src/app/pages/translate/signed-to-spoken/signed-language-input/signed-language-input.component.ts @@ -8,7 +8,6 @@ import {UploadComponent} from '../upload/upload.component'; selector: 'app-signed-language-input', templateUrl: './signed-language-input.component.html', styleUrl: './signed-language-input.component.scss', - standalone: true, imports: [IonToolbar, IonButtons, IonButton, IonFabButton, IonTitle, IonIcon, UploadComponent], }) export class SignedLanguageInputComponent { diff --git a/src/app/pages/translate/signed-to-spoken/signed-to-spoken.component.ts b/src/app/pages/translate/signed-to-spoken/signed-to-spoken.component.ts index b3669fd8..ead2e562 100644 --- a/src/app/pages/translate/signed-to-spoken/signed-to-spoken.component.ts +++ b/src/app/pages/translate/signed-to-spoken/signed-to-spoken.component.ts @@ -1,4 +1,4 @@ -import {Component, OnInit, inject} from '@angular/core'; +import {Component, inject, OnInit} from '@angular/core'; import {Store} from '@ngxs/store'; import {VideoStateModel} from '../../../core/modules/ngxs/store/video/video.state'; import {InputMode} from '../../../modules/translate/translate.state'; @@ -89,7 +89,6 @@ const FAKE_WORDS = [ selector: 'app-signed-to-spoken', templateUrl: './signed-to-spoken.component.html', styleUrls: ['./signed-to-spoken.component.scss'], - standalone: true, imports: [ MatTooltip, SignWritingComponent, diff --git a/src/app/pages/translate/signed-to-spoken/upload/upload.component.ts b/src/app/pages/translate/signed-to-spoken/upload/upload.component.ts index 2ee80503..83b9ce50 100644 --- a/src/app/pages/translate/signed-to-spoken/upload/upload.component.ts +++ b/src/app/pages/translate/signed-to-spoken/upload/upload.component.ts @@ -1,4 +1,4 @@ -import {Component, Input, inject} from '@angular/core'; +import {Component, inject, Input} from '@angular/core'; import {Store} from '@ngxs/store'; import {SetVideo} from '../../../../core/modules/ngxs/store/video/video.actions'; import {IonButton, IonIcon} from '@ionic/angular/standalone'; @@ -10,7 +10,6 @@ import {TranslocoDirective} from '@ngneat/transloco'; selector: 'app-upload', templateUrl: './upload.component.html', styleUrls: ['./upload.component.scss'], - standalone: true, imports: [IonButton, IonIcon, TranslocoDirective], }) export class UploadComponent { diff --git a/src/app/pages/translate/signwriting/sign-writing.component.ts b/src/app/pages/translate/signwriting/sign-writing.component.ts index 3c4e1495..19bfcb06 100644 --- a/src/app/pages/translate/signwriting/sign-writing.component.ts +++ b/src/app/pages/translate/signwriting/sign-writing.component.ts @@ -14,7 +14,6 @@ import {MatTooltip} from '@angular/material/tooltip'; selector: 'app-sign-writing', templateUrl: './sign-writing.component.html', styleUrls: ['./sign-writing.component.scss'], - standalone: true, imports: [IonProgressBar, MatTooltip], schemas: [CUSTOM_ELEMENTS_SCHEMA], }) diff --git a/src/app/pages/translate/spoken-to-signed/signed-language-output/signed-language-output.component.ts b/src/app/pages/translate/spoken-to-signed/signed-language-output/signed-language-output.component.ts index 1aeab0c6..64156d75 100644 --- a/src/app/pages/translate/spoken-to-signed/signed-language-output/signed-language-output.component.ts +++ b/src/app/pages/translate/spoken-to-signed/signed-language-output/signed-language-output.component.ts @@ -1,4 +1,4 @@ -import {Component, OnInit, inject} from '@angular/core'; +import {Component, inject, OnInit} from '@angular/core'; import {Observable} from 'rxjs'; import {PoseViewerSetting} from '../../../../modules/settings/settings.state'; import {DomSanitizer, SafeUrl} from '@angular/platform-browser'; @@ -27,7 +27,6 @@ import {downloadOutline, shareOutline} from 'ionicons/icons'; selector: 'app-signed-language-output', templateUrl: './signed-language-output.component.html', styleUrls: ['./signed-language-output.component.scss'], - standalone: true, imports: [ IonSpinner, IonButton, diff --git a/src/app/pages/translate/spoken-to-signed/spoken-language-input/desktop-textarea/desktop-textarea.component.ts b/src/app/pages/translate/spoken-to-signed/spoken-language-input/desktop-textarea/desktop-textarea.component.ts index 6b465106..8929c219 100644 --- a/src/app/pages/translate/spoken-to-signed/spoken-language-input/desktop-textarea/desktop-textarea.component.ts +++ b/src/app/pages/translate/spoken-to-signed/spoken-language-input/desktop-textarea/desktop-textarea.component.ts @@ -1,4 +1,4 @@ -import {Component, ElementRef, Input, ViewChild, inject} from '@angular/core'; +import {Component, ElementRef, inject, Input, viewChild} from '@angular/core'; import {FormControl, ReactiveFormsModule} from '@angular/forms'; import {Observable} from 'rxjs'; import {Store} from '@ngxs/store'; @@ -8,7 +8,6 @@ import {AsyncPipe} from '@angular/common'; selector: 'app-desktop-textarea', templateUrl: './desktop-textarea.component.html', styleUrl: './desktop-textarea.component.scss', - standalone: true, imports: [ReactiveFormsModule, AsyncPipe], }) export class DesktopTextareaComponent { @@ -17,7 +16,7 @@ export class DesktopTextareaComponent { @Input() maxLength: number; @Input() lang: string; @Input() textControl: FormControl; - @ViewChild('textarea') textarea: ElementRef; + readonly textarea = viewChild>('textarea'); hoveredSentenceIndex = null; sentences$!: Observable; diff --git a/src/app/pages/translate/spoken-to-signed/spoken-language-input/spoken-language-input.component.ts b/src/app/pages/translate/spoken-to-signed/spoken-language-input/spoken-language-input.component.ts index ed0ece44..8582d5c4 100644 --- a/src/app/pages/translate/spoken-to-signed/spoken-language-input/spoken-language-input.component.ts +++ b/src/app/pages/translate/spoken-to-signed/spoken-language-input/spoken-language-input.component.ts @@ -1,4 +1,4 @@ -import {Component, Input, OnInit, inject} from '@angular/core'; +import {Component, inject, Input, OnInit} from '@angular/core'; import {FormControl, ReactiveFormsModule} from '@angular/forms'; import {debounce, distinctUntilChanged, skipWhile, takeUntil, tap} from 'rxjs/operators'; import {interval, Observable} from 'rxjs'; @@ -23,7 +23,6 @@ import {DesktopTextareaComponent} from './desktop-textarea/desktop-textarea.comp selector: 'app-spoken-language-input', templateUrl: './spoken-language-input.component.html', styleUrls: ['./spoken-language-input.component.scss'], - standalone: true, imports: [ IonToolbar, IonButtons, diff --git a/src/app/pages/translate/spoken-to-signed/spoken-to-signed.component.ts b/src/app/pages/translate/spoken-to-signed/spoken-to-signed.component.ts index 690923fc..d9f2aebc 100644 --- a/src/app/pages/translate/spoken-to-signed/spoken-to-signed.component.ts +++ b/src/app/pages/translate/spoken-to-signed/spoken-to-signed.component.ts @@ -7,7 +7,6 @@ import {SignedLanguageOutputComponent} from './signed-language-output/signed-lan selector: 'app-spoken-to-signed', templateUrl: './spoken-to-signed.component.html', styleUrls: ['./spoken-to-signed.component.scss'], - standalone: true, imports: [SpokenLanguageInputComponent, SignWritingComponent, SignedLanguageOutputComponent], }) export class SpokenToSignedComponent {} diff --git a/src/app/pages/translate/translate-desktop/translate-desktop.component.ts b/src/app/pages/translate/translate-desktop/translate-desktop.component.ts index fc5fddb7..1f489c54 100644 --- a/src/app/pages/translate/translate-desktop/translate-desktop.component.ts +++ b/src/app/pages/translate/translate-desktop/translate-desktop.component.ts @@ -1,5 +1,4 @@ -import {Component, OnInit, inject} from '@angular/core'; -import {Observable} from 'rxjs'; +import {Component, inject, OnInit} from '@angular/core'; import {Store} from '@ngxs/store'; import {takeUntil, tap} from 'rxjs/operators'; import {BaseComponent} from '../../../components/base/base.component'; @@ -20,7 +19,6 @@ import {cloudUpload, language, videocam} from 'ionicons/icons'; selector: 'app-translate-desktop', templateUrl: './translate-desktop.component.html', styleUrls: ['./translate-desktop.component.scss'], - standalone: true, imports: [ IonHeader, IonToolbar, diff --git a/src/app/pages/translate/translate-mobile/translate-mobile.component.ts b/src/app/pages/translate/translate-mobile/translate-mobile.component.ts index 669c9bb3..cadeac4d 100644 --- a/src/app/pages/translate/translate-mobile/translate-mobile.component.ts +++ b/src/app/pages/translate/translate-mobile/translate-mobile.component.ts @@ -1,5 +1,4 @@ -import {Component, inject} from '@angular/core'; -import {Store} from '@ngxs/store'; +import {Component} from '@angular/core'; import {TranslateDesktopComponent} from '../translate-desktop/translate-desktop.component'; import {IonContent, IonFooter, IonHeader, IonToolbar} from '@ionic/angular/standalone'; import {SpokenLanguageInputComponent} from '../spoken-to-signed/spoken-language-input/spoken-language-input.component'; @@ -12,7 +11,6 @@ import {LanguageSelectorsComponent} from '../language-selectors/language-selecto selector: 'app-translate-mobile', templateUrl: './translate-mobile.component.html', styleUrls: ['./translate-mobile.component.scss'], - standalone: true, imports: [ IonContent, IonHeader, diff --git a/src/app/pages/translate/translate.component.ts b/src/app/pages/translate/translate.component.ts index bf69291f..4c2dded1 100644 --- a/src/app/pages/translate/translate.component.ts +++ b/src/app/pages/translate/translate.component.ts @@ -1,4 +1,4 @@ -import {Component, OnInit, inject} from '@angular/core'; +import {Component, inject, OnInit} from '@angular/core'; import {Store} from '@ngxs/store'; import {SetSetting} from '../../modules/settings/settings.actions'; import {fromEvent, Observable} from 'rxjs'; @@ -15,7 +15,6 @@ import {TranslateDesktopComponent} from './translate-desktop/translate-desktop.c selector: 'app-translate', templateUrl: './translate.component.html', styleUrls: ['./translate.component.scss'], - standalone: true, imports: [TranslateMobileComponent, TranslateDesktopComponent], }) export class TranslateComponent extends BaseComponent implements OnInit { diff --git a/src/app/pages/translate/translate.module.ts b/src/app/pages/translate/translate.module.ts deleted file mode 100644 index 4b25434b..00000000 --- a/src/app/pages/translate/translate.module.ts +++ /dev/null @@ -1,64 +0,0 @@ -import {IonicModule} from '@ionic/angular'; -import {NgModule} from '@angular/core'; -import {CommonModule} from '@angular/common'; - -import {RouterModule} from '@angular/router'; -import {TranslateComponent} from './translate.component'; -import {AppTranslocoModule} from '../../core/modules/transloco/transloco.module'; -import {SpokenToSignedModule} from './spoken-to-signed/spoken-to-signed.module'; -import {SendFeedbackComponent} from './send-feedback/send-feedback.component'; -import {SignedToSpokenModule} from './signed-to-spoken/signed-to-spoken.module'; -import {TranslateInputButtonComponent} from './input/button/button.component'; -import {DropPoseFileModule} from './drop-pose-file/drop-pose-file.module'; -import {TranslateLanguageSelectorsModule} from './language-selectors/language-selectors.module'; -import {MatTooltipModule} from '@angular/material/tooltip'; -import {NtkmeButtonModule} from '@ctrl/ngx-github-buttons'; -import {TranslateDesktopComponent} from './translate-desktop/translate-desktop.component'; -import {TranslateMobileComponent} from './translate-mobile/translate-mobile.component'; -import {FormsModule} from '@angular/forms'; -import {SpeechToTextModule} from '../../components/speech-to-text/speech-to-text.module'; -import {TextToSpeechModule} from '../../components/text-to-speech/text-to-speech.module'; -import {VideoModule} from '../../components/video/video.module'; -import {TranslateModule} from '../../modules/translate/translate.module'; - -const routes = [ - { - path: '', - component: TranslateComponent, - }, -]; - -const componentModules = [ - SpokenToSignedModule, - SignedToSpokenModule, - DropPoseFileModule, - TranslateLanguageSelectorsModule, -]; - -const components = [ - SendFeedbackComponent, - TranslateInputButtonComponent, - TranslateComponent, - TranslateDesktopComponent, - TranslateMobileComponent, -]; - -@NgModule({ - imports: [ - CommonModule, - IonicModule, - AppTranslocoModule, - TranslateModule, - MatTooltipModule, - RouterModule.forChild(routes), - - NtkmeButtonModule, - ...componentModules, - FormsModule, - SpeechToTextModule, - TextToSpeechModule, - VideoModule, - ], - declarations: components, -}) -export class TranslatePageModule {} From effdb27ca53efd728f2a42d27d2fe7ed3b18372d Mon Sep 17 00:00:00 2001 From: Amit Moryossef Date: Sun, 24 Nov 2024 12:40:55 +0100 Subject: [PATCH 11/30] fix(): remove IonicModule completely --- src/app/app.config.server.ts | 1 + src/app/app.config.ts | 3 +- .../i18n-language-selector.component.spec.ts | 7 ++-- .../speech-to-text.component.spec.ts | 2 +- .../text-to-speech.component.spec.ts | 2 +- .../video-controls.component.spec.ts | 6 ++-- .../components/video/video.component.spec.ts | 4 +-- .../transloco/transloco-testing.module.ts | 2 +- .../settings/settings.component.spec.ts | 6 ++-- .../benchmark-item.component.spec.ts | 4 +-- .../benchmark/benchmark.component.spec.ts | 4 +-- .../about-api/about-api.component.spec.ts | 2 +- .../about-appearance.component.spec.ts | 2 +- .../about-benefits.component.spec.ts | 4 +-- .../about-benefits.component.ts | 5 +-- .../about-customers.component.spec.ts | 4 +-- .../about-direction.component.spec.ts | 4 +-- .../about-faq/about-faq.component.spec.ts | 4 +-- .../about-hero/about-hero.component.spec.ts | 4 +-- .../about-objectives.component.spec.ts | 4 +-- .../about-pricing.component.spec.ts | 4 +-- .../about-team/about-team.component.spec.ts | 4 +-- .../landing/about/about.component.spec.ts | 6 ++-- .../contribute/contribute.component.spec.ts | 4 +-- .../landing-footer.component.spec.ts | 6 ++-- .../pages/landing/landing.component.spec.ts | 6 ++-- .../not-found/not-found.component.spec.ts | 2 +- .../playground/playground.component.spec.ts | 6 ++-- .../settings-about.component.spec.ts | 4 +-- .../settings-about.component.ts | 12 +++++-- ...ttings-appearance-images.component.spec.ts | 10 +++--- .../settings-appearance-images.component.ts | 13 ++++++-- .../settings-appearance.component.spec.ts | 10 +++--- .../settings-appearance.component.ts | 4 +-- .../settings-feedback.component.spec.ts | 10 +++--- .../settings-feedback.component.ts | 17 ++++++++-- .../settings-menu.component.html | 26 +++++++-------- .../settings-menu.component.spec.ts | 4 +-- .../settings-menu/settings-menu.component.ts | 21 ++++++++++-- .../settings-offline.component.spec.ts | 6 ++-- .../settings-offline.component.ts | 29 +++++++++++++++-- .../settings-voice-input.component.spec.ts | 10 +++--- .../settings-voice-input.component.ts | 7 ++-- .../settings-voice-output.component.spec.ts | 14 +++----- .../settings-voice-output.component.ts | 7 ++-- .../pages/settings/settings.component.spec.ts | 6 ++-- .../drop-pose-file.component.spec.ts | 4 +-- .../input/button/button.component.spec.ts | 10 +++--- .../language-selector.component.spec.ts | 10 +++--- .../language-selectors.component.spec.ts | 6 ++-- .../human-pose-viewer.component.spec.ts | 10 +++--- .../pose-viewers/pose-viewers.module.ts | 25 --------------- .../skeleton-pose-viewer.component.spec.ts | 2 +- .../viewer-selector.component.spec.ts | 10 +++--- .../send-feedback.component.spec.ts | 2 +- .../signed-language-input.component.spec.ts | 14 ++++---- .../signed-to-spoken.component.spec.ts | 4 +-- .../signed-to-spoken.module.ts | 24 -------------- .../upload/upload.component.spec.ts | 6 ++-- .../sign-writing.component.spec.ts | 4 +-- .../signwriting/signwriting.module.ts | 16 ---------- .../signed-language-output.component.spec.ts | 6 ++-- .../desktop-textarea.component.spec.ts | 2 +- .../spoken-language-input.component.spec.ts | 10 +++--- .../spoken-to-signed.component.spec.ts | 10 +++--- .../spoken-to-signed.module.ts | 32 ------------------- .../translate-desktop.component.spec.ts | 10 +++--- .../translate-mobile.component.spec.ts | 6 ++-- .../translate/translate.component.spec.ts | 10 +++--- 69 files changed, 263 insertions(+), 292 deletions(-) delete mode 100644 src/app/pages/translate/pose-viewers/pose-viewers.module.ts delete mode 100644 src/app/pages/translate/signed-to-spoken/signed-to-spoken.module.ts delete mode 100644 src/app/pages/translate/signwriting/signwriting.module.ts delete mode 100644 src/app/pages/translate/spoken-to-signed/spoken-to-signed.module.ts diff --git a/src/app/app.config.server.ts b/src/app/app.config.server.ts index fc908879..a1b2378b 100644 --- a/src/app/app.config.server.ts +++ b/src/app/app.config.server.ts @@ -1,5 +1,6 @@ import {ApplicationConfig, mergeApplicationConfig} from '@angular/core'; import {appConfig} from './app.config'; +import {provideServerRendering} from '@angular/platform-server'; const serverConfig: ApplicationConfig = { providers: [ diff --git a/src/app/app.config.ts b/src/app/app.config.ts index 88828ced..130eec07 100644 --- a/src/app/app.config.ts +++ b/src/app/app.config.ts @@ -4,7 +4,7 @@ import {provideRouter, RouteReuseStrategy} from '@angular/router'; import {routes} from './app.routes'; import {provideClientHydration, withEventReplay} from '@angular/platform-browser'; import {NavigatorService} from './core/services/navigator/navigator.service'; -import {IonicRouteStrategy} from '@ionic/angular'; +import {IonicRouteStrategy, provideIonicAngular} from '@ionic/angular/standalone'; import {HTTP_INTERCEPTORS, provideHttpClient, withFetch, withInterceptorsFromDi} from '@angular/common/http'; import {TokenInterceptor} from './core/services/http/token-interceptor.service'; import {AppTranslocoProviders} from './core/modules/transloco/transloco.module'; @@ -12,7 +12,6 @@ import {NgxsModuleOptions, provideStore} from '@ngxs/store'; import {SettingsState} from './modules/settings/settings.state'; import {environment} from '../environments/environment'; import {provideServiceWorker} from '@angular/service-worker'; -import {provideIonicAngular} from '@ionic/angular/standalone'; import {isSafari} from './core/constants'; import {provideAnimations} from '@angular/platform-browser/animations'; diff --git a/src/app/components/i18n-language-selector/i18n-language-selector.component.spec.ts b/src/app/components/i18n-language-selector/i18n-language-selector.component.spec.ts index f4a6db2d..43a4c10c 100644 --- a/src/app/components/i18n-language-selector/i18n-language-selector.component.spec.ts +++ b/src/app/components/i18n-language-selector/i18n-language-selector.component.spec.ts @@ -1,7 +1,10 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {axe, toHaveNoViolations} from 'jasmine-axe'; -import {AppTranslocoTestingModule} from '../../core/modules/transloco/transloco-testing.module'; +import { + AppTranslocoTestingModule, + provideTranslocoTesting, +} from '../../core/modules/transloco/transloco-testing.module'; import {RouterModule} from '@angular/router'; import {I18NLanguageSelectorComponent} from './i18n-language-selector.component'; import {languageCodeNormalizer, SITE_LANGUAGES} from '../../core/modules/transloco/languages'; @@ -12,7 +15,7 @@ describe('LanguageSelectorComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [AppTranslocoTestingModule, RouterModule.forRoot([]), I18NLanguageSelectorComponent], + imports: [provideTranslocoTesting(), RouterModule.forRoot([]), I18NLanguageSelectorComponent], }).compileComponents(); }); diff --git a/src/app/components/speech-to-text/speech-to-text.component.spec.ts b/src/app/components/speech-to-text/speech-to-text.component.spec.ts index d401c50e..4939d8c2 100644 --- a/src/app/components/speech-to-text/speech-to-text.component.spec.ts +++ b/src/app/components/speech-to-text/speech-to-text.component.spec.ts @@ -12,7 +12,7 @@ describe('SpeechToTextComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [AppTranslocoTestingModule, MatTooltipModule, IonIcon, IonButton, SpeechToTextComponent], + imports: [provideTranslocoTesting(), MatTooltipModule, IonIcon, IonButton, SpeechToTextComponent], }).compileComponents(); }); diff --git a/src/app/components/text-to-speech/text-to-speech.component.spec.ts b/src/app/components/text-to-speech/text-to-speech.component.spec.ts index 87225b00..adb9ebaf 100644 --- a/src/app/components/text-to-speech/text-to-speech.component.spec.ts +++ b/src/app/components/text-to-speech/text-to-speech.component.spec.ts @@ -25,7 +25,7 @@ describe('TextToSpeechComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [AppTranslocoTestingModule, IonIcon, IonButton, TextToSpeechComponent], + imports: [provideTranslocoTesting(), IonIcon, IonButton, TextToSpeechComponent], }).compileComponents(); }); diff --git a/src/app/components/video/video-controls/video-controls.component.spec.ts b/src/app/components/video/video-controls/video-controls.component.spec.ts index ae041f39..5b644529 100644 --- a/src/app/components/video/video-controls/video-controls.component.spec.ts +++ b/src/app/components/video/video-controls/video-controls.component.spec.ts @@ -5,7 +5,7 @@ import {VideoControlsComponent} from './video-controls.component'; import {AppTranslocoTestingModule} from '../../../core/modules/transloco/transloco-testing.module'; import {NgxsModule} from '@ngxs/store'; import {SettingsState} from '../../../modules/settings/settings.state'; -import {ngxsConfig} from '../../../core/modules/ngxs/ngxs.module'; +import {ngxsConfig} from '../../../app.config'; import {MatTooltipModule} from '@angular/material/tooltip'; import {IonFab, IonFabButton} from '@ionic/angular/standalone'; @@ -16,11 +16,11 @@ describe('VideoControlsComponent', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - AppTranslocoTestingModule, + provideTranslocoTesting(), MatTooltipModule, IonFab, IonFabButton, - NgxsModule.forRoot([SettingsState], ngxsConfig), + provideStore([SettingsState], ngxsConfig), VideoControlsComponent, ], }).compileComponents(); diff --git a/src/app/components/video/video.component.spec.ts b/src/app/components/video/video.component.spec.ts index 027d6141..7a5fa85c 100644 --- a/src/app/components/video/video.component.spec.ts +++ b/src/app/components/video/video.component.spec.ts @@ -22,11 +22,11 @@ describe('VideoComponent', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - AppTranslocoTestingModule, + provideTranslocoTesting(), MatTooltipModule, IonIcon, IonFab, - NgxsModule.forRoot([SettingsState, VideoState, SignWritingState, PoseState, DetectorState], ngxsConfig), + provideStore([SettingsState, VideoState, SignWritingState, PoseState, DetectorState], ngxsConfig), VideoComponent, VideoControlsComponent, AnimationComponent, diff --git a/src/app/core/modules/transloco/transloco-testing.module.ts b/src/app/core/modules/transloco/transloco-testing.module.ts index 33611651..3abdc2f9 100644 --- a/src/app/core/modules/transloco/transloco-testing.module.ts +++ b/src/app/core/modules/transloco/transloco-testing.module.ts @@ -17,6 +17,6 @@ const translocoTestingConfig = { export const AppTranslocoTestingModule = TranslocoTestingModule.forRoot({...translocoTestingConfig, langs}); -export function provideTranslocoTesting() { +export function provideTranslocoTesting(), { return provideTransloco(translocoTestingConfig); // TODO add transloco loader } diff --git a/src/app/modules/settings/settings/settings.component.spec.ts b/src/app/modules/settings/settings/settings.component.spec.ts index efe5e70e..146c3358 100644 --- a/src/app/modules/settings/settings/settings.component.spec.ts +++ b/src/app/modules/settings/settings/settings.component.spec.ts @@ -5,7 +5,7 @@ import {SettingsComponent} from './settings.component'; import {NgxsModule, Store} from '@ngxs/store'; import {SettingsState} from '../settings.state'; import {FormsModule} from '@angular/forms'; -import {ngxsConfig} from '../../../core/modules/ngxs/ngxs.module'; +import {ngxsConfig} from '../../../app.config'; import {AppTranslocoTestingModule} from '../../../core/modules/transloco/transloco-testing.module'; import {IonCheckbox, IonItem, IonList} from '@ionic/angular/standalone'; @@ -17,9 +17,9 @@ describe('SettingsComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ imports: [ - NgxsModule.forRoot([SettingsState], ngxsConfig), + provideStore([SettingsState], ngxsConfig), FormsModule, - AppTranslocoTestingModule, + provideTranslocoTesting(), IonItem, IonCheckbox, IonList, diff --git a/src/app/pages/benchmark/benchmark-item/benchmark-item.component.spec.ts b/src/app/pages/benchmark/benchmark-item/benchmark-item.component.spec.ts index 358f4ecf..64154563 100644 --- a/src/app/pages/benchmark/benchmark-item/benchmark-item.component.spec.ts +++ b/src/app/pages/benchmark/benchmark-item/benchmark-item.component.spec.ts @@ -2,7 +2,7 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {axe, toHaveNoViolations} from 'jasmine-axe'; import {BenchmarkItemComponent} from './benchmark-item.component'; -import {IonicModule} from '@ionic/angular'; + import {MatTooltipModule} from '@angular/material/tooltip'; describe('BenchmarkItemComponent', () => { @@ -11,7 +11,7 @@ describe('BenchmarkItemComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [MatTooltipModule, IonicModule.forRoot(), BenchmarkItemComponent], + imports: [MatTooltipModule, provideIonicAngular(), BenchmarkItemComponent], }).compileComponents(); }); diff --git a/src/app/pages/benchmark/benchmark.component.spec.ts b/src/app/pages/benchmark/benchmark.component.spec.ts index d035807a..089fd98b 100644 --- a/src/app/pages/benchmark/benchmark.component.spec.ts +++ b/src/app/pages/benchmark/benchmark.component.spec.ts @@ -4,7 +4,7 @@ import {axe, toHaveNoViolations} from 'jasmine-axe'; import {BenchmarkComponent} from './benchmark.component'; import {provideHttpClient} from '@angular/common/http'; import {AppTranslocoTestingModule} from '../../core/modules/transloco/transloco-testing.module'; -import {IonicModule} from '@ionic/angular'; + import {provideHttpClientTesting} from '@angular/common/http/testing'; describe('BenchmarkComponent', () => { @@ -13,7 +13,7 @@ describe('BenchmarkComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [AppTranslocoTestingModule, IonicModule.forRoot(), BenchmarkComponent], + imports: [provideTranslocoTesting(), provideIonicAngular(), BenchmarkComponent], providers: [provideHttpClient(), provideHttpClientTesting()], }).compileComponents(); }); diff --git a/src/app/pages/landing/about/about-api/about-api.component.spec.ts b/src/app/pages/landing/about/about-api/about-api.component.spec.ts index e85041e5..9f96c2d2 100644 --- a/src/app/pages/landing/about/about-api/about-api.component.spec.ts +++ b/src/app/pages/landing/about/about-api/about-api.component.spec.ts @@ -11,7 +11,7 @@ describe('AboutApiComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [AppTranslocoTestingModule, AppNgxsModule, AboutApiComponent], + imports: [provideTranslocoTesting(), AppNgxsModule, AboutApiComponent], }).compileComponents(); fixture = TestBed.createComponent(AboutApiComponent); diff --git a/src/app/pages/landing/about/about-appearance/about-appearance.component.spec.ts b/src/app/pages/landing/about/about-appearance/about-appearance.component.spec.ts index e14340ac..79a45bc5 100644 --- a/src/app/pages/landing/about/about-appearance/about-appearance.component.spec.ts +++ b/src/app/pages/landing/about/about-appearance/about-appearance.component.spec.ts @@ -12,7 +12,7 @@ describe('AboutAppearanceComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [AppTranslocoTestingModule, SettingsPageModule, AppNgxsModule, AboutAppearanceComponent], + imports: [provideTranslocoTesting(), SettingsPageModule, AppNgxsModule, AboutAppearanceComponent], }).compileComponents(); }); diff --git a/src/app/pages/landing/about/about-benefits/about-benefits.component.spec.ts b/src/app/pages/landing/about/about-benefits/about-benefits.component.spec.ts index 801b8a4f..3309bd04 100644 --- a/src/app/pages/landing/about/about-benefits/about-benefits.component.spec.ts +++ b/src/app/pages/landing/about/about-benefits/about-benefits.component.spec.ts @@ -3,7 +3,7 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {AboutBenefitsComponent} from './about-benefits.component'; import {axe, toHaveNoViolations} from 'jasmine-axe'; import {AppTranslocoTestingModule} from '../../../../core/modules/transloco/transloco-testing.module'; -import {IonicModule} from '@ionic/angular'; + import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'; import {LazyMapComponent} from '../lazy-map/lazy-map.component'; import {provideHttpClient} from '@angular/common/http'; @@ -15,7 +15,7 @@ describe('AboutBenefitsComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [AppTranslocoTestingModule, IonicModule.forRoot(), AboutBenefitsComponent, LazyMapComponent], + imports: [provideTranslocoTesting(), provideIonicAngular(), AboutBenefitsComponent, LazyMapComponent], providers: [provideHttpClient(), provideHttpClientTesting()], schemas: [CUSTOM_ELEMENTS_SCHEMA], }).compileComponents(); diff --git a/src/app/pages/landing/about/about-benefits/about-benefits.component.ts b/src/app/pages/landing/about/about-benefits/about-benefits.component.ts index 2eace768..3979442b 100644 --- a/src/app/pages/landing/about/about-benefits/about-benefits.component.ts +++ b/src/app/pages/landing/about/about-benefits/about-benefits.component.ts @@ -60,8 +60,9 @@ export class AboutBenefitsComponent extends BaseComponent implements AfterViewIn } ngAfterViewInit() { - this.swiper().nativeElement.swiper.on('activeIndexChange', () => { - this.activeSlide = this.swiper().nativeElement.swiper.activeIndex; + const swiperEl = this.swiper().nativeElement; + swiperEl.swiper.on('activeIndexChange', () => { + this.activeSlide = swiperEl.swiper.activeIndex; }); } } diff --git a/src/app/pages/landing/about/about-customers/about-customers.component.spec.ts b/src/app/pages/landing/about/about-customers/about-customers.component.spec.ts index f7cdb736..60786d53 100644 --- a/src/app/pages/landing/about/about-customers/about-customers.component.spec.ts +++ b/src/app/pages/landing/about/about-customers/about-customers.component.spec.ts @@ -4,7 +4,7 @@ import {AboutCustomersComponent} from './about-customers.component'; import {axe, toHaveNoViolations} from 'jasmine-axe'; import {AppTranslocoTestingModule} from '../../../../core/modules/transloco/transloco-testing.module'; import {NoopAnimationsModule} from '@angular/platform-browser/animations'; -import {IonicModule} from '@ionic/angular'; + describe('AboutCustomersComponent', () => { let component: AboutCustomersComponent; @@ -12,7 +12,7 @@ describe('AboutCustomersComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [AppTranslocoTestingModule, IonicModule.forRoot(), NoopAnimationsModule, AboutCustomersComponent], + imports: [provideTranslocoTesting(), provideIonicAngular(), NoopAnimationsModule, AboutCustomersComponent], }).compileComponents(); fixture = TestBed.createComponent(AboutCustomersComponent); diff --git a/src/app/pages/landing/about/about-direction/about-direction.component.spec.ts b/src/app/pages/landing/about/about-direction/about-direction.component.spec.ts index 875a1006..f155eca0 100644 --- a/src/app/pages/landing/about/about-direction/about-direction.component.spec.ts +++ b/src/app/pages/landing/about/about-direction/about-direction.component.spec.ts @@ -3,7 +3,7 @@ import {axe, toHaveNoViolations} from 'jasmine-axe'; import {AboutDirectionComponent} from './about-direction.component'; import {AppTranslocoTestingModule} from '../../../../core/modules/transloco/transloco-testing.module'; -import {IonicModule} from '@ionic/angular'; + describe('AboutDirectionComponent', () => { let component: AboutDirectionComponent; @@ -11,7 +11,7 @@ describe('AboutDirectionComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [AppTranslocoTestingModule, IonicModule.forRoot(), AboutDirectionComponent], + imports: [provideTranslocoTesting(), provideIonicAngular(), AboutDirectionComponent], }).compileComponents(); }); diff --git a/src/app/pages/landing/about/about-faq/about-faq.component.spec.ts b/src/app/pages/landing/about/about-faq/about-faq.component.spec.ts index 72568a78..7d2dedd4 100644 --- a/src/app/pages/landing/about/about-faq/about-faq.component.spec.ts +++ b/src/app/pages/landing/about/about-faq/about-faq.component.spec.ts @@ -4,7 +4,7 @@ import {AboutFaqComponent} from './about-faq.component'; import {axe, toHaveNoViolations} from 'jasmine-axe'; import {AppTranslocoTestingModule} from '../../../../core/modules/transloco/transloco-testing.module'; import {NoopAnimationsModule} from '@angular/platform-browser/animations'; -import {IonicModule} from '@ionic/angular'; + describe('AboutFaqComponent', () => { let component: AboutFaqComponent; @@ -12,7 +12,7 @@ describe('AboutFaqComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [AppTranslocoTestingModule, IonicModule.forRoot(), NoopAnimationsModule, AboutFaqComponent], + imports: [provideTranslocoTesting(), provideIonicAngular(), NoopAnimationsModule, AboutFaqComponent], }).compileComponents(); fixture = TestBed.createComponent(AboutFaqComponent); diff --git a/src/app/pages/landing/about/about-hero/about-hero.component.spec.ts b/src/app/pages/landing/about/about-hero/about-hero.component.spec.ts index 243d1cf3..c728100a 100644 --- a/src/app/pages/landing/about/about-hero/about-hero.component.spec.ts +++ b/src/app/pages/landing/about/about-hero/about-hero.component.spec.ts @@ -3,7 +3,7 @@ import {axe, toHaveNoViolations} from 'jasmine-axe'; import {AboutHeroComponent} from './about-hero.component'; import {AppTranslocoTestingModule} from '../../../../core/modules/transloco/transloco-testing.module'; -import {IonicModule} from '@ionic/angular'; + import {NoopAnimationsModule} from '@angular/platform-browser/animations'; describe('AboutHeroComponent', () => { @@ -12,7 +12,7 @@ describe('AboutHeroComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [AppTranslocoTestingModule, IonicModule.forRoot(), NoopAnimationsModule, AboutHeroComponent], + imports: [provideTranslocoTesting(), provideIonicAngular(), NoopAnimationsModule, AboutHeroComponent], }).compileComponents(); }); diff --git a/src/app/pages/landing/about/about-objectives/about-objectives.component.spec.ts b/src/app/pages/landing/about/about-objectives/about-objectives.component.spec.ts index da2571c6..f81a1465 100644 --- a/src/app/pages/landing/about/about-objectives/about-objectives.component.spec.ts +++ b/src/app/pages/landing/about/about-objectives/about-objectives.component.spec.ts @@ -3,7 +3,7 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {AboutObjectivesComponent} from './about-objectives.component'; import {axe, toHaveNoViolations} from 'jasmine-axe'; import {AppTranslocoTestingModule} from '../../../../core/modules/transloco/transloco-testing.module'; -import {IonicModule} from '@ionic/angular'; + describe('AboutObjectivesComponent', () => { let component: AboutObjectivesComponent; @@ -11,7 +11,7 @@ describe('AboutObjectivesComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [AppTranslocoTestingModule, IonicModule.forRoot(), AboutObjectivesComponent], + imports: [provideTranslocoTesting(), provideIonicAngular(), AboutObjectivesComponent], }).compileComponents(); fixture = TestBed.createComponent(AboutObjectivesComponent); diff --git a/src/app/pages/landing/about/about-pricing/about-pricing.component.spec.ts b/src/app/pages/landing/about/about-pricing/about-pricing.component.spec.ts index 6a1c4726..3183f396 100644 --- a/src/app/pages/landing/about/about-pricing/about-pricing.component.spec.ts +++ b/src/app/pages/landing/about/about-pricing/about-pricing.component.spec.ts @@ -3,7 +3,7 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {AboutPricingComponent} from './about-pricing.component'; import {axe, toHaveNoViolations} from 'jasmine-axe'; import {AppTranslocoTestingModule} from '../../../../core/modules/transloco/transloco-testing.module'; -import {IonicModule} from '@ionic/angular'; + import {ReactiveFormsModule} from '@angular/forms'; describe('AboutPricingComponent', () => { @@ -12,7 +12,7 @@ describe('AboutPricingComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [AppTranslocoTestingModule, IonicModule.forRoot(), ReactiveFormsModule, AboutPricingComponent], + imports: [provideTranslocoTesting(), provideIonicAngular(), ReactiveFormsModule, AboutPricingComponent], }).compileComponents(); fixture = TestBed.createComponent(AboutPricingComponent); diff --git a/src/app/pages/landing/about/about-team/about-team.component.spec.ts b/src/app/pages/landing/about/about-team/about-team.component.spec.ts index c6ac3372..a56e54ce 100644 --- a/src/app/pages/landing/about/about-team/about-team.component.spec.ts +++ b/src/app/pages/landing/about/about-team/about-team.component.spec.ts @@ -3,7 +3,7 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {AboutTeamComponent} from './about-team.component'; import {axe, toHaveNoViolations} from 'jasmine-axe'; import {AppTranslocoTestingModule} from '../../../../core/modules/transloco/transloco-testing.module'; -import {IonicModule} from '@ionic/angular'; + describe('AboutTeamComponent', () => { let component: AboutTeamComponent; @@ -11,7 +11,7 @@ describe('AboutTeamComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [AppTranslocoTestingModule, IonicModule.forRoot(), AboutTeamComponent], + imports: [provideTranslocoTesting(), provideIonicAngular(), AboutTeamComponent], }).compileComponents(); fixture = TestBed.createComponent(AboutTeamComponent); diff --git a/src/app/pages/landing/about/about.component.spec.ts b/src/app/pages/landing/about/about.component.spec.ts index f7650d15..a79c8db9 100644 --- a/src/app/pages/landing/about/about.component.spec.ts +++ b/src/app/pages/landing/about/about.component.spec.ts @@ -11,7 +11,7 @@ import {AboutBenefitsComponent} from './about-benefits/about-benefits.component' import {AboutApiComponent} from './about-api/about-api.component'; import {AppNgxsModule} from '../../../core/modules/ngxs/ngxs.module'; import {SettingsPageModule} from '../../settings/settings.module'; -import {IonicModule} from '@ionic/angular'; + import {MatTooltipModule} from '@angular/material/tooltip'; import {MatTabsModule} from '@angular/material/tabs'; import {AboutObjectivesComponent} from './about-objectives/about-objectives.component'; @@ -30,10 +30,10 @@ describe('AboutComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ imports: [ - AppTranslocoTestingModule, + provideTranslocoTesting(), MatTooltipModule, MatTabsModule, - IonicModule.forRoot(), + provideIonicAngular(), NoopAnimationsModule, AppNgxsModule, SettingsPageModule, diff --git a/src/app/pages/landing/contribute/contribute.component.spec.ts b/src/app/pages/landing/contribute/contribute.component.spec.ts index e7111dc1..deee9c49 100644 --- a/src/app/pages/landing/contribute/contribute.component.spec.ts +++ b/src/app/pages/landing/contribute/contribute.component.spec.ts @@ -2,7 +2,7 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {axe, toHaveNoViolations} from 'jasmine-axe'; import {ContributeComponent} from './contribute.component'; -import {IonicModule} from '@ionic/angular'; + describe('ContributeComponent', () => { let component: ContributeComponent; @@ -10,7 +10,7 @@ describe('ContributeComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [IonicModule.forRoot(), ContributeComponent], + imports: [provideIonicAngular(), ContributeComponent], }).compileComponents(); }); diff --git a/src/app/pages/landing/landing-footer/landing-footer.component.spec.ts b/src/app/pages/landing/landing-footer/landing-footer.component.spec.ts index dab9968b..de827d15 100644 --- a/src/app/pages/landing/landing-footer/landing-footer.component.spec.ts +++ b/src/app/pages/landing/landing-footer/landing-footer.component.spec.ts @@ -2,7 +2,7 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {LandingFooterComponent} from './landing-footer.component'; import {AppTranslocoTestingModule} from '../../../core/modules/transloco/transloco-testing.module'; -import {IonicModule} from '@ionic/angular'; + import {NoopAnimationsModule} from '@angular/platform-browser/animations'; import {axe, toHaveNoViolations} from 'jasmine-axe'; import {I18NLanguageSelectorComponent} from '../../../components/i18n-language-selector/i18n-language-selector.component'; @@ -15,8 +15,8 @@ describe('LandingFooterComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ imports: [ - AppTranslocoTestingModule, - IonicModule.forRoot(), + provideTranslocoTesting(), + provideIonicAngular(), NoopAnimationsModule, RouterModule.forRoot([{path: '', component: LandingFooterComponent}]), LandingFooterComponent, diff --git a/src/app/pages/landing/landing.component.spec.ts b/src/app/pages/landing/landing.component.spec.ts index cf438f5e..f224cdf5 100644 --- a/src/app/pages/landing/landing.component.spec.ts +++ b/src/app/pages/landing/landing.component.spec.ts @@ -6,7 +6,7 @@ import {AppTranslocoTestingModule} from '../../core/modules/transloco/transloco- import {NoopAnimationsModule} from '@angular/platform-browser/animations'; import {RouterModule} from '@angular/router'; import {AboutComponent} from './about/about.component'; -import {IonicModule} from '@ionic/angular'; + import {I18NLanguageSelectorComponent} from '../../components/i18n-language-selector/i18n-language-selector.component'; import {LandingFooterComponent} from './landing-footer/landing-footer.component'; @@ -17,8 +17,8 @@ describe('LandingComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ imports: [ - AppTranslocoTestingModule, - IonicModule.forRoot(), + provideTranslocoTesting(), + provideIonicAngular(), NoopAnimationsModule, RouterModule.forRoot([{path: '', component: AboutComponent}]), LandingComponent, diff --git a/src/app/pages/not-found/not-found.component.spec.ts b/src/app/pages/not-found/not-found.component.spec.ts index bea811f4..adaf950e 100644 --- a/src/app/pages/not-found/not-found.component.spec.ts +++ b/src/app/pages/not-found/not-found.component.spec.ts @@ -10,7 +10,7 @@ describe('NotFoundComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ imports: [NotFoundComponent], - providers: [provideTranslocoTesting()], + providers: [provideTranslocoTesting(),], }).compileComponents(); fixture = TestBed.createComponent(NotFoundComponent); diff --git a/src/app/pages/playground/playground.component.spec.ts b/src/app/pages/playground/playground.component.spec.ts index 978d126d..5395776e 100644 --- a/src/app/pages/playground/playground.component.spec.ts +++ b/src/app/pages/playground/playground.component.spec.ts @@ -6,7 +6,7 @@ import {AppNgxsModule} from '../../core/modules/ngxs/ngxs.module'; import {StartCamera} from '../../core/modules/ngxs/store/video/video.actions'; import {AppTranslocoTestingModule} from '../../core/modules/transloco/transloco-testing.module'; import {TranslocoService} from '@ngneat/transloco'; -import {IonicModule} from '@ionic/angular'; + import {SettingsModule} from '../../modules/settings/settings.module'; import {VideoModule} from '../../components/video/video.module'; @@ -18,9 +18,9 @@ describe('PlaygroundComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ imports: [ - AppTranslocoTestingModule, + provideTranslocoTesting(), AppNgxsModule, - IonicModule.forRoot(), + provideIonicAngular(), SettingsModule, VideoModule, PlaygroundComponent, diff --git a/src/app/pages/settings/settings-about/settings-about.component.spec.ts b/src/app/pages/settings/settings-about/settings-about.component.spec.ts index d42deaa5..03466b2d 100644 --- a/src/app/pages/settings/settings-about/settings-about.component.spec.ts +++ b/src/app/pages/settings/settings-about/settings-about.component.spec.ts @@ -3,7 +3,7 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {SettingsAboutComponent} from './settings-about.component'; import {AppTranslocoTestingModule} from '../../../core/modules/transloco/transloco-testing.module'; import {axe, toHaveNoViolations} from 'jasmine-axe'; -import {IonicModule} from '@ionic/angular'; + import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'; describe('SettingsAboutComponent', () => { @@ -12,7 +12,7 @@ describe('SettingsAboutComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [AppTranslocoTestingModule, IonicModule.forRoot(), SettingsAboutComponent], + imports: [provideTranslocoTesting(), provideIonicAngular(), SettingsAboutComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], }).compileComponents(); diff --git a/src/app/pages/settings/settings-about/settings-about.component.ts b/src/app/pages/settings/settings-about/settings-about.component.ts index ed983f95..76769722 100644 --- a/src/app/pages/settings/settings-about/settings-about.component.ts +++ b/src/app/pages/settings/settings-about/settings-about.component.ts @@ -1,13 +1,21 @@ import {Component} from '@angular/core'; import {TranslocoDirective, TranslocoPipe} from '@ngneat/transloco'; -import {IonicModule} from '@ionic/angular'; import {RouterLink} from '@angular/router'; +import { + IonBackButton, + IonButtons, + IonContent, + IonHeader, IonItem, IonLabel, + IonList, + IonTitle, + IonToolbar, +} from '@ionic/angular/standalone'; @Component({ selector: 'app-settings-about', templateUrl: './settings-about.component.html', styleUrls: ['./settings-about.component.scss'], - imports: [TranslocoDirective, IonicModule, RouterLink, TranslocoPipe], + imports: [TranslocoDirective, RouterLink, TranslocoPipe, IonTitle, IonBackButton, IonToolbar, IonHeader, IonButtons, IonContent, IonList, IonItem, IonLabel], }) export class SettingsAboutComponent { legalPages: string[] = ['terms', 'privacy', 'licenses']; diff --git a/src/app/pages/settings/settings-appearance/settings-appearance-images/settings-appearance-images.component.spec.ts b/src/app/pages/settings/settings-appearance/settings-appearance-images/settings-appearance-images.component.spec.ts index 6e5b2a8c..a49e0ece 100644 --- a/src/app/pages/settings/settings-appearance/settings-appearance-images/settings-appearance-images.component.spec.ts +++ b/src/app/pages/settings/settings-appearance/settings-appearance-images/settings-appearance-images.component.spec.ts @@ -2,10 +2,10 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {SettingsAppearanceImagesComponent} from './settings-appearance-images.component'; import {AppTranslocoTestingModule} from '../../../../core/modules/transloco/transloco-testing.module'; -import {IonicModule} from '@ionic/angular'; + import {NgxsModule} from '@ngxs/store'; import {SettingsState} from '../../../../modules/settings/settings.state'; -import {ngxsConfig} from '../../../../core/modules/ngxs/ngxs.module'; +import {ngxsConfig} from '../../../../app.config'; import {axe, toHaveNoViolations} from 'jasmine-axe'; import {MatTooltipModule} from '@angular/material/tooltip'; @@ -16,10 +16,10 @@ describe('SettingsAppearanceImagesComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ imports: [ - AppTranslocoTestingModule, + provideTranslocoTesting(), MatTooltipModule, - IonicModule.forRoot(), - NgxsModule.forRoot([SettingsState], ngxsConfig), + provideIonicAngular(), + provideStore([SettingsState], ngxsConfig), SettingsAppearanceImagesComponent, ], }).compileComponents(); diff --git a/src/app/pages/settings/settings-appearance/settings-appearance-images/settings-appearance-images.component.ts b/src/app/pages/settings/settings-appearance/settings-appearance-images/settings-appearance-images.component.ts index fac60edb..8ef19ff9 100644 --- a/src/app/pages/settings/settings-appearance/settings-appearance-images/settings-appearance-images.component.ts +++ b/src/app/pages/settings/settings-appearance/settings-appearance-images/settings-appearance-images.component.ts @@ -2,14 +2,17 @@ import {Component, Input} from '@angular/core'; import {BaseSettingsComponent} from '../../../../modules/settings/settings.component'; import {TranslocoDirective} from '@ngneat/transloco'; import {MatTooltip} from '@angular/material/tooltip'; -import {IonicModule} from '@ionic/angular'; import {AsyncPipe} from '@angular/common'; +import {MatFabButton} from '@angular/material/button'; +import {IonIcon} from '@ionic/angular/standalone'; +import {addIcons} from 'ionicons'; +import {diceOutline, images} from 'ionicons/icons'; @Component({ selector: 'app-settings-appearance-images', templateUrl: './settings-appearance-images.component.html', styleUrls: ['./settings-appearance-images.component.scss'], - imports: [TranslocoDirective, MatTooltip, IonicModule, AsyncPipe], + imports: [TranslocoDirective, MatTooltip, AsyncPipe, MatFabButton, IonIcon], }) export class SettingsAppearanceImagesComponent extends BaseSettingsComponent { @Input() scale = 1; @@ -23,4 +26,10 @@ export class SettingsAppearanceImagesComponent extends BaseSettingsComponent { {src: 'assets/appearance/random-6.jpg', title: 'Random', value: '', disabled: true}, {src: 'assets/appearance/random-7.jpg', title: 'Random', value: '', disabled: true}, ]; + + constructor() { + super(); + + addIcons({diceOutline, images}) + } } diff --git a/src/app/pages/settings/settings-appearance/settings-appearance.component.spec.ts b/src/app/pages/settings/settings-appearance/settings-appearance.component.spec.ts index 21133731..d889d17f 100644 --- a/src/app/pages/settings/settings-appearance/settings-appearance.component.spec.ts +++ b/src/app/pages/settings/settings-appearance/settings-appearance.component.spec.ts @@ -4,9 +4,9 @@ import {SettingsAppearanceComponent} from './settings-appearance.component'; import {AppTranslocoTestingModule} from '../../../core/modules/transloco/transloco-testing.module'; import {NgxsModule} from '@ngxs/store'; import {SettingsState} from '../../../modules/settings/settings.state'; -import {ngxsConfig} from '../../../core/modules/ngxs/ngxs.module'; +import {ngxsConfig} from '../../../app.config'; import {axe, toHaveNoViolations} from 'jasmine-axe'; -import {IonicModule} from '@ionic/angular'; + import {SettingsAppearanceImagesComponent} from './settings-appearance-images/settings-appearance-images.component'; import {MatTooltipModule} from '@angular/material/tooltip'; @@ -17,10 +17,10 @@ describe('SettingsAppearanceComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ imports: [ - AppTranslocoTestingModule, + provideTranslocoTesting(), MatTooltipModule, - IonicModule.forRoot(), - NgxsModule.forRoot([SettingsState], ngxsConfig), + provideIonicAngular(), + provideStore([SettingsState], ngxsConfig), SettingsAppearanceComponent, SettingsAppearanceImagesComponent, ], diff --git a/src/app/pages/settings/settings-appearance/settings-appearance.component.ts b/src/app/pages/settings/settings-appearance/settings-appearance.component.ts index b700ac0d..627c957a 100644 --- a/src/app/pages/settings/settings-appearance/settings-appearance.component.ts +++ b/src/app/pages/settings/settings-appearance/settings-appearance.component.ts @@ -1,12 +1,12 @@ import {Component} from '@angular/core'; import {TranslocoDirective, TranslocoPipe} from '@ngneat/transloco'; -import {IonicModule} from '@ionic/angular'; import {SettingsAppearanceImagesComponent} from './settings-appearance-images/settings-appearance-images.component'; +import {IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar} from '@ionic/angular/standalone'; @Component({ templateUrl: './settings-appearance.component.html', selector: 'app-settings-appearance', styleUrls: ['./settings-appearance.component.scss'], - imports: [TranslocoDirective, IonicModule, SettingsAppearanceImagesComponent, TranslocoPipe], + imports: [TranslocoDirective, SettingsAppearanceImagesComponent, TranslocoPipe, IonTitle, IonToolbar, IonHeader, IonContent, IonBackButton, IonButtons], }) export class SettingsAppearanceComponent {} diff --git a/src/app/pages/settings/settings-feedback/settings-feedback.component.spec.ts b/src/app/pages/settings/settings-feedback/settings-feedback.component.spec.ts index af640818..95ca1f8d 100644 --- a/src/app/pages/settings/settings-feedback/settings-feedback.component.spec.ts +++ b/src/app/pages/settings/settings-feedback/settings-feedback.component.spec.ts @@ -4,9 +4,9 @@ import {SettingsFeedbackComponent} from './settings-feedback.component'; import {AppTranslocoTestingModule} from '../../../core/modules/transloco/transloco-testing.module'; import {NgxsModule} from '@ngxs/store'; import {SettingsState} from '../../../modules/settings/settings.state'; -import {ngxsConfig} from '../../../core/modules/ngxs/ngxs.module'; +import {ngxsConfig} from '../../../app.config'; import {axe, toHaveNoViolations} from 'jasmine-axe'; -import {IonicModule} from '@ionic/angular'; + describe('SettingsFeedbackComponent', () => { let component: SettingsFeedbackComponent; @@ -15,9 +15,9 @@ describe('SettingsFeedbackComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ imports: [ - AppTranslocoTestingModule, - IonicModule.forRoot(), - NgxsModule.forRoot([SettingsState], ngxsConfig), + provideTranslocoTesting(), + provideIonicAngular(), + provideStore([SettingsState], ngxsConfig), SettingsFeedbackComponent, ], }).compileComponents(); diff --git a/src/app/pages/settings/settings-feedback/settings-feedback.component.ts b/src/app/pages/settings/settings-feedback/settings-feedback.component.ts index a6793e31..91f41e02 100644 --- a/src/app/pages/settings/settings-feedback/settings-feedback.component.ts +++ b/src/app/pages/settings/settings-feedback/settings-feedback.component.ts @@ -1,11 +1,22 @@ import {Component} from '@angular/core'; import {TranslocoDirective, TranslocoPipe} from '@ngneat/transloco'; -import {IonicModule} from '@ionic/angular'; +import { + IonBackButton, + IonButtons, + IonContent, + IonHeader, + IonItem, + IonLabel, + IonList, + IonTitle, + IonToolbar, +} from '@ionic/angular/standalone'; @Component({ selector: 'app-settings-feedback', templateUrl: './settings-feedback.component.html', styleUrls: ['./settings-feedback.component.scss'], - imports: [TranslocoDirective, IonicModule, TranslocoPipe], + imports: [TranslocoDirective, TranslocoPipe, IonHeader, IonToolbar, IonTitle, IonList, IonItem, IonLabel, IonBackButton, IonButtons, IonContent], }) -export class SettingsFeedbackComponent {} +export class SettingsFeedbackComponent { +} diff --git a/src/app/pages/settings/settings-menu/settings-menu.component.html b/src/app/pages/settings/settings-menu/settings-menu.component.html index b6c7212c..7eaff603 100644 --- a/src/app/pages/settings/settings-menu/settings-menu.component.html +++ b/src/app/pages/settings/settings-menu/settings-menu.component.html @@ -11,19 +11,19 @@ @for (group of groups; track group) { - - - {{ t(group.name + '.title') }} - - @for (page of group.pages; track page) { - - - - {{ t(group.name + '.' + page.path + '.title') }} - - - } - + + + {{ t(group.name + '.title') }} + + @for (page of group.pages; track page) { + + + + {{ t(group.name + '.' + page.path + '.title') }} + + + } + } diff --git a/src/app/pages/settings/settings-menu/settings-menu.component.spec.ts b/src/app/pages/settings/settings-menu/settings-menu.component.spec.ts index 0ccaa078..c0951aa8 100644 --- a/src/app/pages/settings/settings-menu/settings-menu.component.spec.ts +++ b/src/app/pages/settings/settings-menu/settings-menu.component.spec.ts @@ -3,7 +3,7 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {SettingsMenuComponent} from './settings-menu.component'; import {axe, toHaveNoViolations} from 'jasmine-axe'; import {AppTranslocoTestingModule} from '../../../core/modules/transloco/transloco-testing.module'; -import {IonicModule} from '@ionic/angular'; + describe('SettingsMenuComponent', () => { let component: SettingsMenuComponent; @@ -11,7 +11,7 @@ describe('SettingsMenuComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [AppTranslocoTestingModule, IonicModule.forRoot(), SettingsMenuComponent], + imports: [provideTranslocoTesting(), provideIonicAngular(), SettingsMenuComponent], }).compileComponents(); fixture = TestBed.createComponent(SettingsMenuComponent); diff --git a/src/app/pages/settings/settings-menu/settings-menu.component.ts b/src/app/pages/settings/settings-menu/settings-menu.component.ts index e1926ff9..709760d9 100644 --- a/src/app/pages/settings/settings-menu/settings-menu.component.ts +++ b/src/app/pages/settings/settings-menu/settings-menu.component.ts @@ -6,7 +6,20 @@ import {SettingsVoiceOutputComponent} from '../settings-voice-output/settings-vo import {SettingsFeedbackComponent} from '../settings-feedback/settings-feedback.component'; import {SettingsAppearanceComponent} from '../settings-appearance/settings-appearance.component'; import {TranslocoDirective} from '@ngneat/transloco'; -import {IonicModule} from '@ionic/angular'; +import { + IonContent, + IonHeader, + IonIcon, + IonItem, + IonLabel, + IonList, + IonListHeader, + IonNavLink, + IonTitle, + IonToolbar, +} from '@ionic/angular/standalone'; +import {addIcons} from 'ionicons'; +import {airplane, chatbubbles, informationCircle, mic, personCircle, volumeMedium} from 'ionicons/icons'; interface Page { path: string; @@ -23,7 +36,7 @@ interface PagesGroup { selector: 'app-settings-menu', templateUrl: './settings-menu.component.html', styleUrls: ['./settings-menu.component.scss'], - imports: [TranslocoDirective, IonicModule], + imports: [TranslocoDirective, IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonListHeader, IonLabel, IonNavLink, IonItem, IonIcon], }) export class SettingsMenuComponent { groups: PagesGroup[] = [ @@ -49,4 +62,8 @@ export class SettingsMenuComponent { ], }, ]; + + constructor() { + addIcons({chatbubbles, informationCircle, mic, volumeMedium, airplane, personCircle}); + } } diff --git a/src/app/pages/settings/settings-offline/settings-offline.component.spec.ts b/src/app/pages/settings/settings-offline/settings-offline.component.spec.ts index 2179a9a1..11288347 100644 --- a/src/app/pages/settings/settings-offline/settings-offline.component.spec.ts +++ b/src/app/pages/settings/settings-offline/settings-offline.component.spec.ts @@ -7,7 +7,7 @@ import {axe, toHaveNoViolations} from 'jasmine-axe'; import {MatTreeModule} from '@angular/material/tree'; import {CdkTreeModule} from '@angular/cdk/tree'; import {NgxFilesizeModule} from 'ngx-filesize'; -import {IonicModule} from '@ionic/angular'; + describe('SettingsOfflineComponent', () => { let component: SettingsOfflineComponent; @@ -17,10 +17,10 @@ describe('SettingsOfflineComponent', () => { await TestBed.configureTestingModule({ imports: [ MatTreeModule, - IonicModule.forRoot(), + provideIonicAngular(), CdkTreeModule, NgxFilesizeModule, - AppTranslocoTestingModule, + provideTranslocoTesting(), AppNgxsModule, SettingsOfflineComponent, ], diff --git a/src/app/pages/settings/settings-offline/settings-offline.component.ts b/src/app/pages/settings/settings-offline/settings-offline.component.ts index b35eb21e..122de3c1 100644 --- a/src/app/pages/settings/settings-offline/settings-offline.component.ts +++ b/src/app/pages/settings/settings-offline/settings-offline.component.ts @@ -13,10 +13,20 @@ import {NestedTreeControl} from '@angular/cdk/tree'; import {TranslocoDirective, TranslocoPipe, TranslocoService} from '@ngneat/transloco'; import {takeUntil, tap} from 'rxjs/operators'; import {BaseComponent} from '../../../components/base/base.component'; -import {IonicModule} from '@ionic/angular'; import {MatProgressSpinner} from '@angular/material/progress-spinner'; import {NgTemplateOutlet} from '@angular/common'; import {NgxFilesizeModule} from 'ngx-filesize'; +import { + IonBackButton, + IonButton, + IonButtons, + IonContent, + IonHeader, + IonIcon, + IonTitle, + IonToolbar, +} from '@ionic/angular/standalone'; +import {chevronDownOutline, chevronForwardOutline, cloudDownloadOutline, refresh, trash} from 'ionicons/icons'; const OFFLINE_PATHS = { avatarGlb: '3d/character.glb', @@ -41,7 +51,6 @@ if (!isIOS) { styleUrls: ['./settings-offline.component.scss'], imports: [ TranslocoDirective, - IonicModule, MatProgressSpinner, MatTree, MatTreeNode, @@ -51,6 +60,14 @@ if (!isIOS) { MatTreeNodeOutlet, TranslocoPipe, NgxFilesizeModule, + IonContent, + IonHeader, + IonToolbar, + IonTitle, + IonBackButton, + IonButtons, + IonButton, + IonIcon, ], }) export class SettingsOfflineComponent extends BaseComponent implements OnInit { @@ -61,6 +78,12 @@ export class SettingsOfflineComponent extends BaseComponent implements OnInit { treeControl = new NestedTreeControl(node => node.children); filesTree = new MatTreeNestedDataSource(); + constructor() { + super(); + + addIcons({refresh, trash, cloudDownloadOutline, chevronDownOutline, chevronForwardOutline}); + } + async ngOnInit() { this.localFiles = this.assetInfo('', OFFLINE_PATHS).children; this.updateTree(); @@ -71,7 +94,7 @@ export class SettingsOfflineComponent extends BaseComponent implements OnInit { this.transloco.events$ .pipe( tap(() => this.updateLabels()), - takeUntil(this.ngUnsubscribe) + takeUntil(this.ngUnsubscribe), ) .subscribe(); } diff --git a/src/app/pages/settings/settings-voice-input/settings-voice-input.component.spec.ts b/src/app/pages/settings/settings-voice-input/settings-voice-input.component.spec.ts index c73a8b51..2a75b9ac 100644 --- a/src/app/pages/settings/settings-voice-input/settings-voice-input.component.spec.ts +++ b/src/app/pages/settings/settings-voice-input/settings-voice-input.component.spec.ts @@ -4,9 +4,9 @@ import {SettingsVoiceInputComponent} from './settings-voice-input.component'; import {AppTranslocoTestingModule} from '../../../core/modules/transloco/transloco-testing.module'; import {NgxsModule} from '@ngxs/store'; import {SettingsState} from '../../../modules/settings/settings.state'; -import {ngxsConfig} from '../../../core/modules/ngxs/ngxs.module'; +import {ngxsConfig} from '../../../app.config'; import {axe, toHaveNoViolations} from 'jasmine-axe'; -import {IonicModule} from '@ionic/angular'; + import {MatTooltipModule} from '@angular/material/tooltip'; describe('SettingsVoiceInputComponent', () => { @@ -17,9 +17,9 @@ describe('SettingsVoiceInputComponent', () => { await TestBed.configureTestingModule({ imports: [ MatTooltipModule, - AppTranslocoTestingModule, - IonicModule.forRoot(), - NgxsModule.forRoot([SettingsState], ngxsConfig), + provideTranslocoTesting(), + provideIonicAngular(), + provideStore([SettingsState], ngxsConfig), SettingsVoiceInputComponent, ], }).compileComponents(); diff --git a/src/app/pages/settings/settings-voice-input/settings-voice-input.component.ts b/src/app/pages/settings/settings-voice-input/settings-voice-input.component.ts index bfc6556f..e14c341c 100644 --- a/src/app/pages/settings/settings-voice-input/settings-voice-input.component.ts +++ b/src/app/pages/settings/settings-voice-input/settings-voice-input.component.ts @@ -1,11 +1,12 @@ import {Component} from '@angular/core'; import {TranslocoDirective, TranslocoPipe} from '@ngneat/transloco'; -import {IonicModule} from '@ionic/angular'; +import {IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar} from '@ionic/angular/standalone'; @Component({ selector: 'app-settings-voice-input', templateUrl: './settings-voice-input.component.html', styleUrls: ['./settings-voice-input.component.scss'], - imports: [TranslocoDirective, IonicModule, TranslocoPipe], + imports: [TranslocoDirective, TranslocoPipe, IonToolbar, IonTitle, IonHeader, IonContent, IonBackButton, IonButtons], }) -export class SettingsVoiceInputComponent {} +export class SettingsVoiceInputComponent { +} diff --git a/src/app/pages/settings/settings-voice-output/settings-voice-output.component.spec.ts b/src/app/pages/settings/settings-voice-output/settings-voice-output.component.spec.ts index c0ba2d9b..0f2d58ee 100644 --- a/src/app/pages/settings/settings-voice-output/settings-voice-output.component.spec.ts +++ b/src/app/pages/settings/settings-voice-output/settings-voice-output.component.spec.ts @@ -1,13 +1,11 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {SettingsVoiceOutputComponent} from './settings-voice-output.component'; -import {AppTranslocoTestingModule} from '../../../core/modules/transloco/transloco-testing.module'; -import {NgxsModule} from '@ngxs/store'; +import {provideStore} from '@ngxs/store'; import {SettingsState} from '../../../modules/settings/settings.state'; -import {ngxsConfig} from '../../../core/modules/ngxs/ngxs.module'; +import {ngxsConfig} from '../../../app.config'; import {axe, toHaveNoViolations} from 'jasmine-axe'; -import {IonicModule} from '@ionic/angular'; -import {MatTooltipModule} from '@angular/material/tooltip'; +import {provideTranslocoTesting} from '../../../core/modules/transloco/transloco-testing.module'; describe('SettingsVoiceOutputComponent', () => { let component: SettingsVoiceOutputComponent; @@ -16,10 +14,8 @@ describe('SettingsVoiceOutputComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ imports: [ - MatTooltipModule, - AppTranslocoTestingModule, - IonicModule.forRoot(), - NgxsModule.forRoot([SettingsState], ngxsConfig), + provideTranslocoTesting(), + provideStore([SettingsState], ngxsConfig), SettingsVoiceOutputComponent, ], }).compileComponents(); diff --git a/src/app/pages/settings/settings-voice-output/settings-voice-output.component.ts b/src/app/pages/settings/settings-voice-output/settings-voice-output.component.ts index 37607ab8..6c3313d1 100644 --- a/src/app/pages/settings/settings-voice-output/settings-voice-output.component.ts +++ b/src/app/pages/settings/settings-voice-output/settings-voice-output.component.ts @@ -1,11 +1,12 @@ import {Component} from '@angular/core'; import {TranslocoDirective, TranslocoPipe} from '@ngneat/transloco'; -import {IonicModule} from '@ionic/angular'; +import {IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar} from '@ionic/angular/standalone'; @Component({ selector: 'app-settings-voice-output', templateUrl: './settings-voice-output.component.html', styleUrls: ['./settings-voice-output.component.scss'], - imports: [TranslocoDirective, IonicModule, TranslocoPipe], + imports: [TranslocoDirective, TranslocoPipe, IonHeader, IonToolbar, IonButtons, IonBackButton, IonTitle, IonContent], }) -export class SettingsVoiceOutputComponent {} +export class SettingsVoiceOutputComponent { +} diff --git a/src/app/pages/settings/settings.component.spec.ts b/src/app/pages/settings/settings.component.spec.ts index c473a2b9..0511d585 100644 --- a/src/app/pages/settings/settings.component.spec.ts +++ b/src/app/pages/settings/settings.component.spec.ts @@ -4,7 +4,7 @@ import {SettingsPageComponent} from './settings.component'; import {axe, toHaveNoViolations} from 'jasmine-axe'; import {AppTranslocoTestingModule} from '../../core/modules/transloco/transloco-testing.module'; import {RouterTestingModule} from '@angular/router/testing'; -import {IonicModule} from '@ionic/angular'; + import {MatTreeModule} from '@angular/material/tree'; import {CdkTreeModule} from '@angular/cdk/tree'; import {SettingsMenuComponent} from './settings-menu/settings-menu.component'; @@ -23,11 +23,11 @@ xdescribe('SettingsPageComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ imports: [ - IonicModule.forRoot(), + provideIonicAngular(), RouterTestingModule, MatTreeModule, CdkTreeModule, - AppTranslocoTestingModule, + provideTranslocoTesting(), SettingsOfflineComponent, SettingsAppearanceComponent, SettingsFeedbackComponent, diff --git a/src/app/pages/translate/drop-pose-file/drop-pose-file.component.spec.ts b/src/app/pages/translate/drop-pose-file/drop-pose-file.component.spec.ts index 18aa3fe0..76fce0ad 100644 --- a/src/app/pages/translate/drop-pose-file/drop-pose-file.component.spec.ts +++ b/src/app/pages/translate/drop-pose-file/drop-pose-file.component.spec.ts @@ -5,7 +5,7 @@ import {axe, toHaveNoViolations} from 'jasmine-axe'; import {DropzoneDirective} from '../../../directives/dropzone.directive'; import {NgxsModule} from '@ngxs/store'; import {TranslateState} from '../../../modules/translate/translate.state'; -import {ngxsConfig} from '../../../core/modules/ngxs/ngxs.module'; +import {ngxsConfig} from '../../../app.config'; import {SettingsState} from '../../../modules/settings/settings.state'; import {provideHttpClientTesting} from '@angular/common/http/testing'; import {provideHttpClient} from '@angular/common/http'; @@ -17,7 +17,7 @@ describe('DropPoseFileComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ imports: [ - NgxsModule.forRoot([SettingsState, TranslateState], ngxsConfig), + provideStore([SettingsState, TranslateState], ngxsConfig), DropPoseFileComponent, DropzoneDirective, ], diff --git a/src/app/pages/translate/input/button/button.component.spec.ts b/src/app/pages/translate/input/button/button.component.spec.ts index 9ce9d11c..139b8a2f 100644 --- a/src/app/pages/translate/input/button/button.component.spec.ts +++ b/src/app/pages/translate/input/button/button.component.spec.ts @@ -3,11 +3,11 @@ import {axe, toHaveNoViolations} from 'jasmine-axe'; import {TranslateInputButtonComponent} from './button.component'; import {NgxsModule, Store} from '@ngxs/store'; -import {ngxsConfig} from '../../../../core/modules/ngxs/ngxs.module'; +import {ngxsConfig} from '../../../../app.config'; import {AppTranslocoTestingModule} from '../../../../core/modules/transloco/transloco-testing.module'; import {SettingsState} from '../../../../modules/settings/settings.state'; import {SetInputMode} from '../../../../modules/translate/translate.actions'; -import {IonicModule} from '@ionic/angular'; + import {TranslateModule} from '../../../../modules/translate/translate.module'; import {provideHttpClientTesting} from '@angular/common/http/testing'; import {provideHttpClient} from '@angular/common/http'; @@ -20,9 +20,9 @@ describe('TranslateInputButtonComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ imports: [ - IonicModule.forRoot(), - AppTranslocoTestingModule, - NgxsModule.forRoot([SettingsState], ngxsConfig), + provideIonicAngular(), + provideTranslocoTesting(), + provideStore([SettingsState], ngxsConfig), TranslateModule, TranslateInputButtonComponent, ], diff --git a/src/app/pages/translate/language-selector/language-selector.component.spec.ts b/src/app/pages/translate/language-selector/language-selector.component.spec.ts index 6bdde4fe..152c42bc 100644 --- a/src/app/pages/translate/language-selector/language-selector.component.spec.ts +++ b/src/app/pages/translate/language-selector/language-selector.component.spec.ts @@ -6,10 +6,10 @@ import {AppTranslocoTestingModule} from '../../../core/modules/transloco/translo import {NoopAnimationsModule} from '@angular/platform-browser/animations'; import {NgxsModule} from '@ngxs/store'; import {SettingsState} from '../../../modules/settings/settings.state'; -import {ngxsConfig} from '../../../core/modules/ngxs/ngxs.module'; +import {ngxsConfig} from '../../../app.config'; import {TranslateState} from '../../../modules/translate/translate.state'; import {provideHttpClientTesting} from '@angular/common/http/testing'; -import {IonicModule} from '@ionic/angular'; + import {MatTooltipModule} from '@angular/material/tooltip'; import {MatTabsModule} from '@angular/material/tabs'; import {MatMenuModule} from '@angular/material/menu'; @@ -22,13 +22,13 @@ describe('LanguageSelectorComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ imports: [ - AppTranslocoTestingModule, + provideTranslocoTesting(), MatTooltipModule, MatTabsModule, MatMenuModule, NoopAnimationsModule, - IonicModule.forRoot(), - NgxsModule.forRoot([SettingsState, TranslateState], ngxsConfig), + provideIonicAngular(), + provideStore([SettingsState, TranslateState], ngxsConfig), LanguageSelectorComponent, ], providers: [provideHttpClient(), provideHttpClientTesting()], diff --git a/src/app/pages/translate/language-selectors/language-selectors.component.spec.ts b/src/app/pages/translate/language-selectors/language-selectors.component.spec.ts index 3dc6a917..2b38ce09 100644 --- a/src/app/pages/translate/language-selectors/language-selectors.component.spec.ts +++ b/src/app/pages/translate/language-selectors/language-selectors.component.spec.ts @@ -5,7 +5,7 @@ import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'; import {NgxsModule} from '@ngxs/store'; import {SettingsState} from '../../../modules/settings/settings.state'; import {TranslateState} from '../../../modules/translate/translate.state'; -import {ngxsConfig} from '../../../core/modules/ngxs/ngxs.module'; +import {ngxsConfig} from '../../../app.config'; import {axe, toHaveNoViolations} from 'jasmine-axe'; import {provideHttpClientTesting} from '@angular/common/http/testing'; import {AppTranslocoTestingModule} from '../../../core/modules/transloco/transloco-testing.module'; @@ -19,8 +19,8 @@ describe('LanguageSelectorsComponent', () => { TestBed.configureTestingModule({ schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [ - NgxsModule.forRoot([SettingsState, TranslateState], ngxsConfig), - AppTranslocoTestingModule, + provideStore([SettingsState, TranslateState], ngxsConfig), + provideTranslocoTesting(), LanguageSelectorsComponent, ], providers: [provideHttpClient(), provideHttpClientTesting()], diff --git a/src/app/pages/translate/pose-viewers/human-pose-viewer/human-pose-viewer.component.spec.ts b/src/app/pages/translate/pose-viewers/human-pose-viewer/human-pose-viewer.component.spec.ts index 806d9daa..103d1bda 100644 --- a/src/app/pages/translate/pose-viewers/human-pose-viewer/human-pose-viewer.component.spec.ts +++ b/src/app/pages/translate/pose-viewers/human-pose-viewer/human-pose-viewer.component.spec.ts @@ -6,9 +6,9 @@ import {Pix2PixModule} from '../../../../modules/pix2pix/pix2pix.module'; import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'; import {NgxsModule} from '@ngxs/store'; import {SettingsState} from '../../../../modules/settings/settings.state'; -import {ngxsConfig} from '../../../../core/modules/ngxs/ngxs.module'; +import {ngxsConfig} from '../../../../app.config'; import {AppTranslocoTestingModule} from '../../../../core/modules/transloco/transloco-testing.module'; -import {IonicModule} from '@ionic/angular'; + describe('HumanPoseViewerComponent', () => { let component: HumanPoseViewerComponent; @@ -18,9 +18,9 @@ describe('HumanPoseViewerComponent', () => { await TestBed.configureTestingModule({ imports: [ Pix2PixModule, - IonicModule.forRoot(), - NgxsModule.forRoot([SettingsState], ngxsConfig), - AppTranslocoTestingModule, + provideIonicAngular(), + provideStore([SettingsState], ngxsConfig), + provideTranslocoTesting(), HumanPoseViewerComponent, ], schemas: [CUSTOM_ELEMENTS_SCHEMA], diff --git a/src/app/pages/translate/pose-viewers/pose-viewers.module.ts b/src/app/pages/translate/pose-viewers/pose-viewers.module.ts deleted file mode 100644 index 27c79ad7..00000000 --- a/src/app/pages/translate/pose-viewers/pose-viewers.module.ts +++ /dev/null @@ -1,25 +0,0 @@ -import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core'; - -import {IonicModule} from '@ionic/angular'; -import {ViewerSelectorComponent} from './viewer-selector/viewer-selector.component'; -import {AvatarPoseViewerComponent} from './avatar-pose-viewer/avatar-pose-viewer.component'; -import {SkeletonPoseViewerComponent} from './skeleton-pose-viewer/skeleton-pose-viewer.component'; -import {HumanPoseViewerComponent} from './human-pose-viewer/human-pose-viewer.component'; -import {AnimationModule} from '../../../components/animation/animation.module'; -import {AppSharedModule} from '../../../core/modules/shared.module'; -import {MatTooltipModule} from '@angular/material/tooltip'; - -const components = [ - ViewerSelectorComponent, - AvatarPoseViewerComponent, - SkeletonPoseViewerComponent, - HumanPoseViewerComponent, -]; - -@NgModule({ - imports: [AppSharedModule, IonicModule, AnimationModule, MatTooltipModule], - declarations: components, - exports: components, - schemas: [CUSTOM_ELEMENTS_SCHEMA], -}) -export class PoseViewersModule {} diff --git a/src/app/pages/translate/pose-viewers/skeleton-pose-viewer/skeleton-pose-viewer.component.spec.ts b/src/app/pages/translate/pose-viewers/skeleton-pose-viewer/skeleton-pose-viewer.component.spec.ts index cca56d3c..0c6c0cf8 100644 --- a/src/app/pages/translate/pose-viewers/skeleton-pose-viewer/skeleton-pose-viewer.component.spec.ts +++ b/src/app/pages/translate/pose-viewers/skeleton-pose-viewer/skeleton-pose-viewer.component.spec.ts @@ -5,7 +5,7 @@ import {SkeletonPoseViewerComponent} from './skeleton-pose-viewer.component'; import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'; import {NgxsModule} from '@ngxs/store'; import {SettingsState} from '../../../../modules/settings/settings.state'; -import {ngxsConfig} from '../../../../core/modules/ngxs/ngxs.module'; +import {ngxsConfig} from '../../../../app.config'; describe('SkeletonPoseViewerComponent', () => { let component: SkeletonPoseViewerComponent; diff --git a/src/app/pages/translate/pose-viewers/viewer-selector/viewer-selector.component.spec.ts b/src/app/pages/translate/pose-viewers/viewer-selector/viewer-selector.component.spec.ts index 00bc7a29..ec6bd253 100644 --- a/src/app/pages/translate/pose-viewers/viewer-selector/viewer-selector.component.spec.ts +++ b/src/app/pages/translate/pose-viewers/viewer-selector/viewer-selector.component.spec.ts @@ -5,9 +5,9 @@ import {ViewerSelectorComponent} from './viewer-selector.component'; import {AppTranslocoTestingModule} from '../../../../core/modules/transloco/transloco-testing.module'; import {NgxsModule} from '@ngxs/store'; import {SettingsState} from '../../../../modules/settings/settings.state'; -import {ngxsConfig} from '../../../../core/modules/ngxs/ngxs.module'; +import {ngxsConfig} from '../../../../app.config'; import {NoopAnimationsModule} from '@angular/platform-browser/animations'; -import {IonicModule} from '@ionic/angular'; + import {MatTooltipModule} from '@angular/material/tooltip'; describe('ViewerSelectorComponent', () => { @@ -17,11 +17,11 @@ describe('ViewerSelectorComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ imports: [ - AppTranslocoTestingModule, + provideTranslocoTesting(), MatTooltipModule, - IonicModule.forRoot(), + provideIonicAngular(), NoopAnimationsModule, - NgxsModule.forRoot([SettingsState], ngxsConfig), + provideStore([SettingsState], ngxsConfig), ViewerSelectorComponent, ], }).compileComponents(); diff --git a/src/app/pages/translate/send-feedback/send-feedback.component.spec.ts b/src/app/pages/translate/send-feedback/send-feedback.component.spec.ts index aa12cf44..a538354c 100644 --- a/src/app/pages/translate/send-feedback/send-feedback.component.spec.ts +++ b/src/app/pages/translate/send-feedback/send-feedback.component.spec.ts @@ -10,7 +10,7 @@ describe('SendFeedbackComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [AppTranslocoTestingModule, SendFeedbackComponent], + imports: [provideTranslocoTesting(), SendFeedbackComponent], }).compileComponents(); fixture = TestBed.createComponent(SendFeedbackComponent); diff --git a/src/app/pages/translate/signed-to-spoken/signed-language-input/signed-language-input.component.spec.ts b/src/app/pages/translate/signed-to-spoken/signed-language-input/signed-language-input.component.spec.ts index dcfa7254..2a641240 100644 --- a/src/app/pages/translate/signed-to-spoken/signed-language-input/signed-language-input.component.spec.ts +++ b/src/app/pages/translate/signed-to-spoken/signed-language-input/signed-language-input.component.spec.ts @@ -1,12 +1,10 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; - import {SignedLanguageInputComponent} from './signed-language-input.component'; -import {AppTranslocoTestingModule} from '../../../../core/modules/transloco/transloco-testing.module'; -import {IonicModule} from '@ionic/angular'; -import {NgxsModule} from '@ngxs/store'; -import {ngxsConfig} from '../../../../core/modules/ngxs/ngxs.module'; +import {provideTranslocoTesting} from '../../../../core/modules/transloco/transloco-testing.module'; import {UploadComponent} from '../upload/upload.component'; import {axe, toHaveNoViolations} from 'jasmine-axe'; +import {ngxsConfig} from '../../../../app.config'; +import {provideIonicAngular} from '@ionic/angular/standalone'; describe('SignedLanguageInputComponent', () => { let component: SignedLanguageInputComponent; @@ -15,9 +13,9 @@ describe('SignedLanguageInputComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ imports: [ - AppTranslocoTestingModule, - IonicModule.forRoot(), - NgxsModule.forRoot([], ngxsConfig), + provideTranslocoTesting(), + provideIonicAngular(), + provideStore([], ngxsConfig), SignedLanguageInputComponent, UploadComponent, ], diff --git a/src/app/pages/translate/signed-to-spoken/signed-to-spoken.component.spec.ts b/src/app/pages/translate/signed-to-spoken/signed-to-spoken.component.spec.ts index 46c74191..9f0bd24b 100644 --- a/src/app/pages/translate/signed-to-spoken/signed-to-spoken.component.spec.ts +++ b/src/app/pages/translate/signed-to-spoken/signed-to-spoken.component.spec.ts @@ -4,7 +4,7 @@ import {axe, toHaveNoViolations} from 'jasmine-axe'; import {SignedToSpokenComponent} from './signed-to-spoken.component'; import {NgxsModule} from '@ngxs/store'; import {VideoState} from '../../../core/modules/ngxs/store/video/video.state'; -import {ngxsConfig} from '../../../core/modules/ngxs/ngxs.module'; +import {ngxsConfig} from '../../../app.config'; import {SettingsState} from '../../../modules/settings/settings.state'; import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'; import {TranslateState} from '../../../modules/translate/translate.state'; @@ -20,7 +20,7 @@ describe('SignedToSpokenComponent', () => { await TestBed.configureTestingModule({ schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [ - NgxsModule.forRoot([SettingsState, TranslateState, VideoState], ngxsConfig), + provideStore([SettingsState, TranslateState, VideoState], ngxsConfig), SignedToSpokenComponent, TextToSpeechComponent, ], diff --git a/src/app/pages/translate/signed-to-spoken/signed-to-spoken.module.ts b/src/app/pages/translate/signed-to-spoken/signed-to-spoken.module.ts deleted file mode 100644 index 358041d3..00000000 --- a/src/app/pages/translate/signed-to-spoken/signed-to-spoken.module.ts +++ /dev/null @@ -1,24 +0,0 @@ -import {NgModule} from '@angular/core'; - -import {TextToSpeechModule} from '../../../components/text-to-speech/text-to-speech.module'; -import {SignWritingModule} from '../signwriting/signwriting.module'; -import {SignedToSpokenComponent} from './signed-to-spoken.component'; -import {UploadComponent} from './upload/upload.component'; -import {VideoModule} from '../../../components/video/video.module'; -import {CommonModule} from '@angular/common'; -import {IonicModule} from '@ionic/angular'; -import {AppTranslocoModule} from '../../../core/modules/transloco/transloco.module'; -import {SignedLanguageInputComponent} from './signed-language-input/signed-language-input.component'; -import {SpokenToSignedModule} from '../spoken-to-signed/spoken-to-signed.module'; -import {MatTooltipModule} from '@angular/material/tooltip'; - -const componentModules = [VideoModule, SignWritingModule, TextToSpeechModule]; - -const components = [SignedToSpokenComponent, SignedLanguageInputComponent, UploadComponent]; - -@NgModule({ - imports: [CommonModule, AppTranslocoModule, IonicModule, MatTooltipModule, ...componentModules, SpokenToSignedModule], - declarations: components, - exports: components, -}) -export class SignedToSpokenModule {} diff --git a/src/app/pages/translate/signed-to-spoken/upload/upload.component.spec.ts b/src/app/pages/translate/signed-to-spoken/upload/upload.component.spec.ts index 99aab022..b4a7866f 100644 --- a/src/app/pages/translate/signed-to-spoken/upload/upload.component.spec.ts +++ b/src/app/pages/translate/signed-to-spoken/upload/upload.component.spec.ts @@ -3,10 +3,10 @@ import {axe, toHaveNoViolations} from 'jasmine-axe'; import {UploadComponent} from './upload.component'; import {NgxsModule, Store} from '@ngxs/store'; -import {ngxsConfig} from '../../../../core/modules/ngxs/ngxs.module'; +import {ngxsConfig} from '../../../../app.config'; import {AppTranslocoTestingModule} from '../../../../core/modules/transloco/transloco-testing.module'; import {SetVideo} from '../../../../core/modules/ngxs/store/video/video.actions'; -import {IonicModule} from '@ionic/angular'; + import createSpy = jasmine.createSpy; function createFileFromMockFile(name: string, body: string, mimeType: string): File { @@ -23,7 +23,7 @@ describe('UploadComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [AppTranslocoTestingModule, IonicModule.forRoot(), NgxsModule.forRoot([], ngxsConfig), UploadComponent], + imports: [provideTranslocoTesting(), provideIonicAngular(),provideStore([], ngxsConfig), UploadComponent], }).compileComponents(); }); diff --git a/src/app/pages/translate/signwriting/sign-writing.component.spec.ts b/src/app/pages/translate/signwriting/sign-writing.component.spec.ts index 906fe833..c1977c2c 100644 --- a/src/app/pages/translate/signwriting/sign-writing.component.spec.ts +++ b/src/app/pages/translate/signwriting/sign-writing.component.spec.ts @@ -5,7 +5,7 @@ import {SignWritingComponent} from './sign-writing.component'; import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'; import {defineCustomElements as defineCustomElementsSW} from '@sutton-signwriting/sgnw-components/loader'; import {NgxsModule, Store} from '@ngxs/store'; -import {ngxsConfig} from '../../../core/modules/ngxs/ngxs.module'; +import {ngxsConfig} from '../../../app.config'; import {TranslateState, TranslateStateModel} from '../../../modules/translate/translate.state'; import {MatTooltipModule} from '@angular/material/tooltip'; import {provideHttpClientTesting} from '@angular/common/http/testing'; @@ -28,7 +28,7 @@ describe('SignWritingComponent', () => { await TestBed.configureTestingModule({ schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [ - NgxsModule.forRoot([SettingsState, TranslateState], ngxsConfig), + provideStore([SettingsState, TranslateState], ngxsConfig), MatTooltipModule, SignWritingComponent, ], diff --git a/src/app/pages/translate/signwriting/signwriting.module.ts b/src/app/pages/translate/signwriting/signwriting.module.ts deleted file mode 100644 index 2c1cd963..00000000 --- a/src/app/pages/translate/signwriting/signwriting.module.ts +++ /dev/null @@ -1,16 +0,0 @@ -import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core'; - -import {IonicModule} from '@ionic/angular'; -import {SignWritingComponent} from './sign-writing.component'; -import {CommonModule} from '@angular/common'; -import {MatTooltipModule} from '@angular/material/tooltip'; -import {NgxsModule} from '@ngxs/store'; -import {TranslateState} from '../../../modules/translate/translate.state'; - -@NgModule({ - imports: [CommonModule, IonicModule, MatTooltipModule, NgxsModule.forFeature([TranslateState])], - declarations: [SignWritingComponent], - exports: [SignWritingComponent], - schemas: [CUSTOM_ELEMENTS_SCHEMA], -}) -export class SignWritingModule {} diff --git a/src/app/pages/translate/spoken-to-signed/signed-language-output/signed-language-output.component.spec.ts b/src/app/pages/translate/spoken-to-signed/signed-language-output/signed-language-output.component.spec.ts index c080bff1..f19d04f9 100644 --- a/src/app/pages/translate/spoken-to-signed/signed-language-output/signed-language-output.component.spec.ts +++ b/src/app/pages/translate/spoken-to-signed/signed-language-output/signed-language-output.component.spec.ts @@ -5,7 +5,7 @@ import {axe, toHaveNoViolations} from 'jasmine-axe'; import {NgxsModule} from '@ngxs/store'; import {SettingsState} from '../../../../modules/settings/settings.state'; import {TranslateState} from '../../../../modules/translate/translate.state'; -import {ngxsConfig} from '../../../../core/modules/ngxs/ngxs.module'; +import {ngxsConfig} from '../../../../app.config'; import {provideHttpClientTesting} from '@angular/common/http/testing'; import {AppTranslocoTestingModule} from '../../../../core/modules/transloco/transloco-testing.module'; import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'; @@ -19,8 +19,8 @@ describe('SignedLanguageOutputComponent', () => { TestBed.configureTestingModule({ schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [ - NgxsModule.forRoot([SettingsState, TranslateState], ngxsConfig), - AppTranslocoTestingModule, + provideStore([SettingsState, TranslateState], ngxsConfig), + provideTranslocoTesting(), SignedLanguageOutputComponent, ], providers: [provideHttpClient(), provideHttpClientTesting()], diff --git a/src/app/pages/translate/spoken-to-signed/spoken-language-input/desktop-textarea/desktop-textarea.component.spec.ts b/src/app/pages/translate/spoken-to-signed/spoken-language-input/desktop-textarea/desktop-textarea.component.spec.ts index d2530ff8..79f5c2b7 100644 --- a/src/app/pages/translate/spoken-to-signed/spoken-language-input/desktop-textarea/desktop-textarea.component.spec.ts +++ b/src/app/pages/translate/spoken-to-signed/spoken-language-input/desktop-textarea/desktop-textarea.component.spec.ts @@ -17,7 +17,7 @@ describe('DesktopTextareaComponent', () => { await TestBed.configureTestingModule({ imports: [ ReactiveFormsModule, - NgxsModule.forRoot([SettingsState], ngxsConfig), + provideStore([SettingsState], ngxsConfig), TranslateModule, DesktopTextareaComponent, ], diff --git a/src/app/pages/translate/spoken-to-signed/spoken-language-input/spoken-language-input.component.spec.ts b/src/app/pages/translate/spoken-to-signed/spoken-language-input/spoken-language-input.component.spec.ts index 48bc3fa5..8f778b91 100644 --- a/src/app/pages/translate/spoken-to-signed/spoken-language-input/spoken-language-input.component.spec.ts +++ b/src/app/pages/translate/spoken-to-signed/spoken-language-input/spoken-language-input.component.spec.ts @@ -2,13 +2,13 @@ import {ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing' import {SpokenLanguageInputComponent} from './spoken-language-input.component'; import {SetSpokenLanguageText, SuggestAlternativeText} from '../../../../modules/translate/translate.actions'; -import {NgxsModule, Store} from '@ngxs/store'; +import {provideStore, Store} from '@ngxs/store'; import {axe, toHaveNoViolations} from 'jasmine-axe'; import {SettingsState} from '../../../../modules/settings/settings.state'; -import {ngxsConfig} from '../../../../core/modules/ngxs/ngxs.module'; +import {ngxsConfig} from '../../../../app.config'; import {FormsModule, ReactiveFormsModule} from '@angular/forms'; import {provideHttpClient} from '@angular/common/http'; -import {AppTranslocoTestingModule} from '../../../../core/modules/transloco/transloco-testing.module'; +import {provideTranslocoTesting} from '../../../../core/modules/transloco/transloco-testing.module'; import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'; import {DesktopTextareaComponent} from './desktop-textarea/desktop-textarea.component'; import {TranslateModule} from '../../../../modules/translate/translate.module'; @@ -23,11 +23,11 @@ describe('SpokenLanguageInputComponent', () => { TestBed.configureTestingModule({ schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [ - NgxsModule.forRoot([SettingsState], ngxsConfig), + provideStore([SettingsState], ngxsConfig), TranslateModule, FormsModule, ReactiveFormsModule, - AppTranslocoTestingModule, + provideTranslocoTesting(), SpokenLanguageInputComponent, DesktopTextareaComponent, ], diff --git a/src/app/pages/translate/spoken-to-signed/spoken-to-signed.component.spec.ts b/src/app/pages/translate/spoken-to-signed/spoken-to-signed.component.spec.ts index 130d3aae..7bffa929 100644 --- a/src/app/pages/translate/spoken-to-signed/spoken-to-signed.component.spec.ts +++ b/src/app/pages/translate/spoken-to-signed/spoken-to-signed.component.spec.ts @@ -6,12 +6,12 @@ import {SignWritingComponent} from '../signwriting/sign-writing.component'; import {TextToSpeechComponent} from '../../../components/text-to-speech/text-to-speech.component'; import {FormsModule, ReactiveFormsModule} from '@angular/forms'; import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'; -import {NgxsModule} from '@ngxs/store'; +import {provideStore} from '@ngxs/store'; import {SettingsState} from '../../../modules/settings/settings.state'; -import {ngxsConfig} from '../../../core/modules/ngxs/ngxs.module'; +import {ngxsConfig} from '../../../app.config'; import {TranslateState} from '../../../modules/translate/translate.state'; import {provideHttpClient} from '@angular/common/http'; -import {AppTranslocoTestingModule} from '../../../core/modules/transloco/transloco-testing.module'; +import {provideTranslocoTesting} from '../../../core/modules/transloco/transloco-testing.module'; import {provideHttpClientTesting} from '@angular/common/http/testing'; describe('SpokenToSignedComponent', () => { @@ -22,10 +22,10 @@ describe('SpokenToSignedComponent', () => { await TestBed.configureTestingModule({ schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [ - NgxsModule.forRoot([SettingsState, TranslateState], ngxsConfig), + provideStore([SettingsState, TranslateState], ngxsConfig), FormsModule, ReactiveFormsModule, - AppTranslocoTestingModule, + provideTranslocoTesting(), SpokenToSignedComponent, SignWritingComponent, TextToSpeechComponent, diff --git a/src/app/pages/translate/spoken-to-signed/spoken-to-signed.module.ts b/src/app/pages/translate/spoken-to-signed/spoken-to-signed.module.ts deleted file mode 100644 index c371fee3..00000000 --- a/src/app/pages/translate/spoken-to-signed/spoken-to-signed.module.ts +++ /dev/null @@ -1,32 +0,0 @@ -import {NgModule} from '@angular/core'; - -import {TextToSpeechModule} from '../../../components/text-to-speech/text-to-speech.module'; -import {SpeechToTextModule} from '../../../components/speech-to-text/speech-to-text.module'; -import {SpokenToSignedComponent} from './spoken-to-signed.component'; -import {ReactiveFormsModule} from '@angular/forms'; -import {IonicModule} from '@ionic/angular'; -import {SignWritingModule} from '../signwriting/signwriting.module'; -import {PoseViewersModule} from '../pose-viewers/pose-viewers.module'; -import {AppTranslocoModule} from '../../../core/modules/transloco/transloco.module'; -import {MatTooltipModule} from '@angular/material/tooltip'; -import {CommonModule} from '@angular/common'; -import {SpokenLanguageInputComponent} from './spoken-language-input/spoken-language-input.component'; -import {SignedLanguageOutputComponent} from './signed-language-output/signed-language-output.component'; -import {KeyboardFlyingDirective} from '../../../directives/keyboard-flying.directive'; -import {DesktopTextareaComponent} from './spoken-language-input/desktop-textarea/desktop-textarea.component'; - -const componentModules = [SpeechToTextModule, TextToSpeechModule, SignWritingModule, PoseViewersModule]; -const components = [ - SpokenToSignedComponent, - DesktopTextareaComponent, - SpokenLanguageInputComponent, - SignedLanguageOutputComponent, - KeyboardFlyingDirective, -]; - -@NgModule({ - imports: [CommonModule, ReactiveFormsModule, AppTranslocoModule, MatTooltipModule, IonicModule, ...componentModules], - declarations: components, - exports: components, -}) -export class SpokenToSignedModule {} diff --git a/src/app/pages/translate/translate-desktop/translate-desktop.component.spec.ts b/src/app/pages/translate/translate-desktop/translate-desktop.component.spec.ts index 585abd8c..bf3ad336 100644 --- a/src/app/pages/translate/translate-desktop/translate-desktop.component.spec.ts +++ b/src/app/pages/translate/translate-desktop/translate-desktop.component.spec.ts @@ -1,15 +1,15 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {TranslateDesktopComponent} from './translate-desktop.component'; -import {AppTranslocoTestingModule} from '../../../core/modules/transloco/transloco-testing.module'; +import {provideTranslocoTesting} from '../../../core/modules/transloco/transloco-testing.module'; import {MatTabsModule} from '@angular/material/tabs'; import {MatTooltipModule} from '@angular/material/tooltip'; import {NoopAnimationsModule} from '@angular/platform-browser/animations'; -import {NgxsModule} from '@ngxs/store'; +import {provideStore} from '@ngxs/store'; import {SettingsState} from '../../../modules/settings/settings.state'; import {TranslateState} from '../../../modules/translate/translate.state'; import {VideoState} from '../../../core/modules/ngxs/store/video/video.state'; -import {ngxsConfig} from '../../../core/modules/ngxs/ngxs.module'; +import {ngxsConfig} from '../../../app.config'; import {provideHttpClientTesting} from '@angular/common/http/testing'; import {RouterTestingModule} from '@angular/router/testing'; import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'; @@ -24,11 +24,11 @@ describe('TranslateDesktopComponent', () => { TestBed.configureTestingModule({ schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [ - AppTranslocoTestingModule, + provideTranslocoTesting(), MatTabsModule, MatTooltipModule, NoopAnimationsModule, - NgxsModule.forRoot([SettingsState, TranslateState, VideoState], ngxsConfig), + provideStore([SettingsState, TranslateState, VideoState], ngxsConfig), RouterTestingModule, TranslateDesktopComponent, ], diff --git a/src/app/pages/translate/translate-mobile/translate-mobile.component.spec.ts b/src/app/pages/translate/translate-mobile/translate-mobile.component.spec.ts index 6d677701..8458e96d 100644 --- a/src/app/pages/translate/translate-mobile/translate-mobile.component.spec.ts +++ b/src/app/pages/translate/translate-mobile/translate-mobile.component.spec.ts @@ -9,7 +9,7 @@ import {NgxsModule} from '@ngxs/store'; import {SettingsState} from '../../../modules/settings/settings.state'; import {TranslateState} from '../../../modules/translate/translate.state'; import {VideoState} from '../../../core/modules/ngxs/store/video/video.state'; -import {ngxsConfig} from '../../../core/modules/ngxs/ngxs.module'; +import {ngxsConfig} from '../../../app.config'; import {provideHttpClientTesting} from '@angular/common/http/testing'; import {RouterTestingModule} from '@angular/router/testing'; import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'; @@ -24,11 +24,11 @@ describe('TranslateMobileComponent', () => { TestBed.configureTestingModule({ schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [ - AppTranslocoTestingModule, + provideTranslocoTesting(), MatTabsModule, MatTooltipModule, NoopAnimationsModule, - NgxsModule.forRoot([SettingsState, TranslateState, VideoState], ngxsConfig), + provideStore([SettingsState, TranslateState, VideoState], ngxsConfig), RouterTestingModule, TranslateMobileComponent, ], diff --git a/src/app/pages/translate/translate.component.spec.ts b/src/app/pages/translate/translate.component.spec.ts index 48eb15e8..a6b7030a 100644 --- a/src/app/pages/translate/translate.component.spec.ts +++ b/src/app/pages/translate/translate.component.spec.ts @@ -2,9 +2,7 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {axe, toHaveNoViolations} from 'jasmine-axe'; import {TranslateComponent} from './translate.component'; -import {NgxsModule, Store} from '@ngxs/store'; -import {ngxsConfig} from '../../core/modules/ngxs/ngxs.module'; -import {AppTranslocoTestingModule} from '../../core/modules/transloco/transloco-testing.module'; +import {provideStore, Store} from '@ngxs/store'; import {LanguageSelectorComponent} from './language-selector/language-selector.component'; import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'; import {TranslateState} from '../../modules/translate/translate.state'; @@ -17,6 +15,8 @@ import {provideHttpClientTesting} from '@angular/common/http/testing'; import {MatTabsModule} from '@angular/material/tabs'; import {MatTooltipModule} from '@angular/material/tooltip'; import {provideHttpClient} from '@angular/common/http'; +import {provideTranslocoTesting} from '../../core/modules/transloco/transloco-testing.module'; +import {ngxsConfig} from '../../app.config'; describe('TranslateComponent', () => { let store: Store; @@ -27,11 +27,11 @@ describe('TranslateComponent', () => { await TestBed.configureTestingModule({ schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [ - AppTranslocoTestingModule, + provideTranslocoTesting(), MatTabsModule, MatTooltipModule, NoopAnimationsModule, - NgxsModule.forRoot([SettingsState, TranslateState, VideoState], ngxsConfig), + provideStore([SettingsState, TranslateState, VideoState], ngxsConfig), RouterTestingModule, TranslateComponent, LanguageSelectorComponent, From d5a0947df976d5840f367d4913f798401b36fa83 Mon Sep 17 00:00:00 2001 From: Amit Moryossef Date: Mon, 25 Nov 2024 10:35:41 +0100 Subject: [PATCH 12/30] chore(): update dependencies --- functions/package.json | 6 +++--- package.json | 20 ++++++++++---------- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/functions/package.json b/functions/package.json index 0c068d73..be9d507c 100644 --- a/functions/package.json +++ b/functions/package.json @@ -29,7 +29,7 @@ "express": "4.21.1", "express-async-errors": "3.1.1", "firebase-admin": "13.0.1", - "firebase-functions": "6.1.0", + "firebase-functions": "6.1.1", "http-errors": "2.0.0", "http-proxy-middleware": "^3.0.3", "node-fetch": "2.6.7", @@ -47,12 +47,12 @@ "@typescript-eslint/parser": "8.15.0", "eslint": "8.57.0", "firebase-functions-test": "3.3.0", - "firebase-tools": "13.26.0", + "firebase-tools": "13.27.0", "jest": "29.7.0", "minimatch": "10.0.1", "mock-express-request": "0.2.2", "mock-express-response": "0.3.0", "ts-jest": "29.2.5", - "typescript": "5.6.3" + "typescript": "5.7.2" } } diff --git a/package.json b/package.json index 45e4f80b..f2788443 100644 --- a/package.json +++ b/package.json @@ -47,7 +47,7 @@ "@angular/platform-server": "19.0.0", "@angular/router": "19.0.0", "@angular/service-worker": "19.0.0", - "@angular/ssr": "19.0.0", + "@angular/ssr": "19.0.1", "@asymmetrik/ngx-leaflet": "18.0.1", "@capacitor-firebase/analytics": "6.2.0", "@capacitor-firebase/app": "6.2.0", @@ -93,7 +93,7 @@ "ionicons": "7.4.0", "leaflet": "1.9.4", "mermaid": "10.9.1", - "mp4-muxer": "5.1.3", + "mp4-muxer": "5.1.5", "ngx-filesize": "3.0.4", "pose-viewer": "0.10.0", "rxjs": "7.8.1", @@ -106,14 +106,14 @@ "zone.js": "0.15.0" }, "devDependencies": { - "@angular-devkit/architect": "0.1900.0", - "@angular-devkit/build-angular": "19.0.0", - "@angular-eslint/builder": "18.4.1", - "@angular-eslint/eslint-plugin": "18.4.1", - "@angular-eslint/eslint-plugin-template": "18.4.1", - "@angular-eslint/schematics": "18.4.1", - "@angular-eslint/template-parser": "18.4.1", - "@angular/cli": "19.0.0", + "@angular-devkit/architect": "0.1900.1", + "@angular-devkit/build-angular": "19.0.1", + "@angular-eslint/builder": "18.4.2", + "@angular-eslint/eslint-plugin": "18.4.2", + "@angular-eslint/eslint-plugin-template": "18.4.2", + "@angular-eslint/schematics": "18.4.2", + "@angular-eslint/template-parser": "18.4.2", + "@angular/cli": "19.0.1", "@angular/compiler-cli": "19.0.0", "@capacitor/assets": "3.0.5", "@capacitor/cli": "6.2.0", From 45bc810cb9534497e745f4828f2eac133a70691b Mon Sep 17 00:00:00 2001 From: Amit Moryossef Date: Wed, 27 Nov 2024 14:55:05 +0100 Subject: [PATCH 13/30] feat(settings): add settings page --- package.json | 2 +- src/app/app.routes.ts | 5 +--- src/app/pages/main.component.html | 8 +++--- src/app/pages/main.component.ts | 4 +-- .../settings-offline.component.ts | 18 +++---------- .../pages/settings/settings-routing.module.ts | 25 ------------------- src/app/pages/settings/settings.component.ts | 2 ++ src/app/pages/settings/settings.routes.ts | 24 ++++++++++++++++++ .../translate-desktop.component.ts | 5 +++- 9 files changed, 42 insertions(+), 51 deletions(-) delete mode 100644 src/app/pages/settings/settings-routing.module.ts create mode 100644 src/app/pages/settings/settings.routes.ts diff --git a/package.json b/package.json index f5803b76..eac2c0a6 100644 --- a/package.json +++ b/package.json @@ -95,7 +95,7 @@ "mermaid": "10.9.1", "mp4-muxer": "5.1.5", "ngx-filesize": "3.0.4", - "pose-viewer": "0.10.0", + "pose-viewer": "1.0.0", "rxjs": "7.8.1", "stats.js": "0.17.0", "swiper": "11.1.15", diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index 464e9530..29e4d125 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -47,10 +47,7 @@ export const routes: Routes = [ // path: 'avatars', // loadChildren: () => import('./tab3/tab3.module').then(m => m.Tab3PageModule), // }, - // { - // path: 'settings', - // loadChildren: () => import('./settings/settings.module').then(m => m.SettingsPageModule), - // }, + {path: 'settings', loadChildren: () => import('./pages/settings/settings.routes').then(m => m.routes)}, ], }, {path: '**', component: NotFoundComponent}, diff --git a/src/app/pages/main.component.html b/src/app/pages/main.component.html index 1c7898fe..b9e748c7 100644 --- a/src/app/pages/main.component.html +++ b/src/app/pages/main.component.html @@ -17,9 +17,9 @@ - - - - + + + Settings + diff --git a/src/app/pages/main.component.ts b/src/app/pages/main.component.ts index 21fd698d..8beec01b 100644 --- a/src/app/pages/main.component.ts +++ b/src/app/pages/main.component.ts @@ -2,7 +2,7 @@ import {Component, inject} from '@angular/core'; import {NavigationEnd, Router} from '@angular/router'; import {filter, map} from 'rxjs/operators'; import {IonIcon, IonLabel, IonTabBar, IonTabButton, IonTabs} from '@ionic/angular/standalone'; -import {home} from 'ionicons/icons'; +import {home, person} from 'ionicons/icons'; import {addIcons} from 'ionicons'; @Component({ @@ -19,6 +19,6 @@ export class MainComponent { ); constructor() { - addIcons({home}); + addIcons({home, person}); } } diff --git a/src/app/pages/settings/settings-offline/settings-offline.component.ts b/src/app/pages/settings/settings-offline/settings-offline.component.ts index 122de3c1..4a4cb6df 100644 --- a/src/app/pages/settings/settings-offline/settings-offline.component.ts +++ b/src/app/pages/settings/settings-offline/settings-offline.component.ts @@ -1,14 +1,7 @@ import {Component, inject, OnInit} from '@angular/core'; import {isIOS} from '../../../core/constants'; import {AssetsService, AssetState} from '../../../core/services/assets/assets.service'; -import { - MatNestedTreeNode, - MatTree, - MatTreeNestedDataSource, - MatTreeNode, - MatTreeNodeOutlet, - MatTreeNodeToggle, -} from '@angular/material/tree'; +import {MatTreeModule, MatTreeNestedDataSource} from '@angular/material/tree'; import {NestedTreeControl} from '@angular/cdk/tree'; import {TranslocoDirective, TranslocoPipe, TranslocoService} from '@ngneat/transloco'; import {takeUntil, tap} from 'rxjs/operators'; @@ -27,6 +20,7 @@ import { IonToolbar, } from '@ionic/angular/standalone'; import {chevronDownOutline, chevronForwardOutline, cloudDownloadOutline, refresh, trash} from 'ionicons/icons'; +import {addIcons} from 'ionicons'; const OFFLINE_PATHS = { avatarGlb: '3d/character.glb', @@ -52,12 +46,8 @@ if (!isIOS) { imports: [ TranslocoDirective, MatProgressSpinner, - MatTree, - MatTreeNode, + MatTreeModule, NgTemplateOutlet, - MatNestedTreeNode, - MatTreeNodeToggle, - MatTreeNodeOutlet, TranslocoPipe, NgxFilesizeModule, IonContent, @@ -94,7 +84,7 @@ export class SettingsOfflineComponent extends BaseComponent implements OnInit { this.transloco.events$ .pipe( tap(() => this.updateLabels()), - takeUntil(this.ngUnsubscribe), + takeUntil(this.ngUnsubscribe) ) .subscribe(); } diff --git a/src/app/pages/settings/settings-routing.module.ts b/src/app/pages/settings/settings-routing.module.ts deleted file mode 100644 index 147defc2..00000000 --- a/src/app/pages/settings/settings-routing.module.ts +++ /dev/null @@ -1,25 +0,0 @@ -import {NgModule} from '@angular/core'; -import {RouterModule, Routes} from '@angular/router'; -import {SettingsPageComponent} from './settings.component'; - -const routes: Routes = [ - { - path: '', - component: SettingsPageComponent, - // children: [ - // {path: 'feedback', component: SettingsFeedbackComponent}, - // {path: 'about', component: SettingsAboutComponent}, - // {path: 'input', component: SettingsVoiceInputComponent}, - // {path: 'output', component: SettingsVoiceOutputComponent}, - // {path: 'offline', component: SettingsOfflineComponent}, - // {path: 'appearance', component: SettingsAppearanceComponent}, - // {path: '', redirectTo: 'feedback', pathMatch: 'full'} - // ], - }, -]; - -@NgModule({ - imports: [RouterModule.forChild(routes)], - exports: [RouterModule], -}) -export class SettingsRoutingModule {} diff --git a/src/app/pages/settings/settings.component.ts b/src/app/pages/settings/settings.component.ts index 8a764ae7..af795999 100644 --- a/src/app/pages/settings/settings.component.ts +++ b/src/app/pages/settings/settings.component.ts @@ -1,8 +1,10 @@ import {Component} from '@angular/core'; import {SettingsMenuComponent} from './settings-menu/settings-menu.component'; +import {IonNav} from '@ionic/angular/standalone'; @Component({ template: '', + imports: [IonNav], }) export class SettingsPageComponent { component = SettingsMenuComponent; diff --git a/src/app/pages/settings/settings.routes.ts b/src/app/pages/settings/settings.routes.ts new file mode 100644 index 00000000..a7a870ae --- /dev/null +++ b/src/app/pages/settings/settings.routes.ts @@ -0,0 +1,24 @@ +import {Routes} from '@angular/router'; +import {SettingsPageComponent} from './settings.component'; +import {SettingsAppearanceComponent} from './settings-appearance/settings-appearance.component'; +import {SettingsOfflineComponent} from './settings-offline/settings-offline.component'; +import {SettingsVoiceOutputComponent} from './settings-voice-output/settings-voice-output.component'; +import {SettingsVoiceInputComponent} from './settings-voice-input/settings-voice-input.component'; +import {SettingsAboutComponent} from './settings-about/settings-about.component'; +import {SettingsFeedbackComponent} from './settings-feedback/settings-feedback.component'; + +export const routes: Routes = [ + { + path: '', + component: SettingsPageComponent, + children: [ + {path: 'feedback', component: SettingsFeedbackComponent}, + {path: 'about', component: SettingsAboutComponent}, + {path: 'input', component: SettingsVoiceInputComponent}, + {path: 'output', component: SettingsVoiceOutputComponent}, + {path: 'offline', component: SettingsOfflineComponent}, + {path: 'appearance', component: SettingsAppearanceComponent}, + {path: '', redirectTo: 'feedback', pathMatch: 'full'}, + ], + }, +]; diff --git a/src/app/pages/translate/translate-desktop/translate-desktop.component.ts b/src/app/pages/translate/translate-desktop/translate-desktop.component.ts index 1f489c54..be8fc00f 100644 --- a/src/app/pages/translate/translate-desktop/translate-desktop.component.ts +++ b/src/app/pages/translate/translate-desktop/translate-desktop.component.ts @@ -2,7 +2,7 @@ import {Component, inject, OnInit} from '@angular/core'; import {Store} from '@ngxs/store'; import {takeUntil, tap} from 'rxjs/operators'; import {BaseComponent} from '../../../components/base/base.component'; -import {IonButtons, IonContent, IonHeader, IonTitle, IonToolbar} from '@ionic/angular/standalone'; +import {IonButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar} from '@ionic/angular/standalone'; import {TranslateInputButtonComponent} from '../input/button/button.component'; import {LanguageSelectorsComponent} from '../language-selectors/language-selectors.component'; import {SendFeedbackComponent} from '../send-feedback/send-feedback.component'; @@ -14,6 +14,7 @@ import {DropPoseFileComponent} from '../drop-pose-file/drop-pose-file.component' import {MatTooltip} from '@angular/material/tooltip'; import {addIcons} from 'ionicons'; import {cloudUpload, language, videocam} from 'ionicons/icons'; +import {RouterLink} from '@angular/router'; @Component({ selector: 'app-translate-desktop', @@ -34,6 +35,8 @@ import {cloudUpload, language, videocam} from 'ionicons/icons'; SignedToSpokenComponent, DropPoseFileComponent, MatTooltip, + IonButton, + RouterLink, ], }) export class TranslateDesktopComponent extends BaseComponent implements OnInit { From 146b51d1cb6ccd4232ac838e612727a75df95415 Mon Sep 17 00:00:00 2001 From: Amit Moryossef Date: Wed, 27 Nov 2024 17:36:41 +0100 Subject: [PATCH 14/30] test(): fix standalone component tests --- src/app/app-routing.spec.ts | 74 ++++++++++--------- src/app/app.component.spec.ts | 5 +- src/app/app.config.server.ts | 1 - .../animation/animation.component.spec.ts | 2 +- .../i18n-language-selector.component.spec.ts | 7 +- .../speech-to-text.component.spec.ts | 4 +- .../text-to-speech.component.spec.ts | 6 +- .../video-controls.component.spec.ts | 17 ++--- .../components/video/video.component.spec.ts | 20 +---- .../modules/ngxs/store/video/video.spec.ts | 8 +- .../transloco/transloco-testing.module.ts | 13 +--- .../animation/animation.service.spec.ts | 2 +- src/app/modules/settings/settings.module.ts | 22 ------ .../settings/settings.component.spec.ts | 15 +--- .../benchmark-item.component.spec.ts | 6 +- .../benchmark/benchmark.component.spec.ts | 9 +-- .../about-api/about-api.component.spec.ts | 7 +- .../about-appearance.component.spec.ts | 8 +- .../about-benefits.component.spec.ts | 11 +-- .../about-customers.component.spec.ts | 8 +- .../about-direction.component.spec.ts | 5 +- .../about-faq/about-faq.component.spec.ts | 8 +- .../about-hero/about-hero.component.spec.ts | 7 +- .../about-objectives.component.spec.ts | 5 +- .../about-pricing.component.spec.ts | 6 +- .../about-team/about-team.component.spec.ts | 5 +- .../landing/about/about.component.spec.ts | 53 ++++--------- .../contribute/contribute.component.spec.ts | 5 +- .../landing-footer.component.spec.ts | 18 ++--- .../pages/landing/landing.component.spec.ts | 20 ++--- src/app/pages/landing/landing.component.ts | 3 +- .../not-found/not-found.component.spec.ts | 14 +++- .../playground/playground.component.spec.ts | 22 +++--- .../settings-about.component.spec.ts | 11 ++- .../settings-about.component.ts | 19 ++++- ...ttings-appearance-images.component.spec.ts | 15 ++-- .../settings-appearance-images.component.ts | 2 +- .../settings-appearance.component.spec.ts | 19 ++--- .../settings-appearance.component.ts | 12 ++- .../settings-feedback.component.spec.ts | 15 ++-- .../settings-menu.component.spec.ts | 5 +- .../settings-offline.component.spec.ts | 20 ++--- .../settings-offline.component.ts | 3 +- .../settings-voice-input.component.spec.ts | 17 ++--- .../settings-voice-output.component.spec.ts | 9 +-- .../pages/settings/settings.component.spec.ts | 33 ++------- .../drop-pose-file.component.spec.ts | 15 ++-- .../input/button/button.component.spec.ts | 22 +++--- .../language-selector.component.spec.ts | 26 +++---- .../language-selector.component.ts | 4 +- .../language-selectors.component.spec.ts | 17 ++--- .../avatar-pose-viewer.component.spec.ts | 9 ++- .../human-pose-viewer.component.html | 24 +++--- .../human-pose-viewer.component.spec.ts | 16 +--- .../viewer-selector.component.spec.ts | 18 ++--- .../send-feedback.component.spec.ts | 2 +- .../signed-language-input.component.spec.ts | 13 +--- .../signed-to-spoken.component.spec.ts | 13 ++-- .../upload/upload.component.spec.ts | 16 +++- .../sign-writing.component.spec.ts | 17 ++--- .../signwriting/sign-writing.component.ts | 4 +- .../signed-language-output.component.spec.ts | 16 ++-- .../desktop-textarea.component.html | 1 - .../desktop-textarea.component.spec.ts | 21 +++--- .../desktop-textarea.component.ts | 3 +- .../spoken-language-input.component.spec.ts | 20 ++--- .../spoken-to-signed.component.spec.ts | 17 ++--- .../translate-desktop.component.spec.ts | 21 ++---- .../translate-mobile.component.spec.ts | 22 ++---- .../translate/translate.component.spec.ts | 27 +++---- 70 files changed, 395 insertions(+), 565 deletions(-) delete mode 100644 src/app/modules/settings/settings.module.ts diff --git a/src/app/app-routing.spec.ts b/src/app/app-routing.spec.ts index 148c8057..0897e594 100644 --- a/src/app/app-routing.spec.ts +++ b/src/app/app-routing.spec.ts @@ -1,36 +1,38 @@ -import {TestBed} from '@angular/core/testing'; -import {AppRoutingModule} from './app-routing.module'; -import {Router} from '@angular/router'; -import {AppNgxsModule} from './core/modules/ngxs/ngxs.module'; -import {provideHttpClient} from '@angular/common/http'; - -describe('AppRoutingModule', () => { - let router: Router; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - teardown: {destroyAfterEach: false}, - imports: [AppRoutingModule, AppNgxsModule], - providers: [provideHttpClient()], - }); - }); - - const pages = { - '/': 'translate', - '/playground': 'playground', - '/about': 'about', - '/benchmark': 'benchmark', - '/legal': 'legal', - }; - - for (const [path, page] of Object.entries(pages)) { - it(`should load ${page} page`, () => { - router = TestBed.inject(Router); - router.initialNavigation(); - - router.navigate([path]); - const route = router.getCurrentNavigation(); - expect(String(route.extractedUrl)).toEqual(path); - }); - } -}); +// import {TestBed} from '@angular/core/testing'; +// import {AppRoutingModule} from './app-routing.module'; +// import {Router} from '@angular/router'; +// import {provideStore([SettingsState], ngxsConfig)} from './core/modules/ngxs/ngxs.module'; +// import {provideHttpClient} from '@angular/common/http'; +// import {ngxsConfig} from './app.config'; +// import {SettingsState} from './modules/settings/settings.state'; +// +// describe('AppRoutingModule', () => { +// let router: Router; +// +// beforeEach(async () => { +// await TestBed.configureTestingModule({ +// teardown: {destroyAfterEach: false}, +// imports: [AppRoutingModule, provideStore([SettingsState], ngxsConfig)], +// providers: [provideHttpClient()], +// }); +// }); +// +// const pages = { +// '/': 'translate', +// '/playground': 'playground', +// '/about': 'about', +// '/benchmark': 'benchmark', +// '/legal': 'legal', +// }; +// +// for (const [path, page] of Object.entries(pages)) { +// it(`should load ${page} page`, () => { +// router = TestBed.inject(Router); +// router.initialNavigation(); +// +// router.navigate([path]); +// const route = router.getCurrentNavigation(); +// expect(String(route.extractedUrl)).toEqual(path); +// }); +// } +// }); diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts index 11f0d824..f2d5950e 100644 --- a/src/app/app.component.spec.ts +++ b/src/app/app.component.spec.ts @@ -1,11 +1,11 @@ import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing'; import {AppComponent} from './app.component'; -import {AppModule} from './app.module'; import {axe, toHaveNoViolations} from 'jasmine-axe'; import {Store} from '@ngxs/store'; import {SetSpokenLanguageText} from './modules/translate/translate.actions'; import {TranslocoService} from '@ngneat/transloco'; import {Router} from '@angular/router'; +import {appConfig} from './app.config'; describe('AppComponent', () => { let store: Store; @@ -14,7 +14,8 @@ describe('AppComponent', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - imports: [AppModule], + imports: [AppComponent], + providers: appConfig.providers, }).compileComponents(); })); diff --git a/src/app/app.config.server.ts b/src/app/app.config.server.ts index a1b2378b..fc908879 100644 --- a/src/app/app.config.server.ts +++ b/src/app/app.config.server.ts @@ -1,6 +1,5 @@ import {ApplicationConfig, mergeApplicationConfig} from '@angular/core'; import {appConfig} from './app.config'; -import {provideServerRendering} from '@angular/platform-server'; const serverConfig: ApplicationConfig = { providers: [ diff --git a/src/app/components/animation/animation.component.spec.ts b/src/app/components/animation/animation.component.spec.ts index 27516f5a..afedb9f6 100644 --- a/src/app/components/animation/animation.component.spec.ts +++ b/src/app/components/animation/animation.component.spec.ts @@ -4,10 +4,10 @@ import {axe, toHaveNoViolations} from 'jasmine-axe'; import {AnimationComponent} from './animation.component'; import {NgxsModule} from '@ngxs/store'; import {AnimationState} from '../../modules/animation/animation.state'; -import {ngxsConfig} from '../../core/modules/ngxs/ngxs.module'; import {SettingsState} from '../../modules/settings/settings.state'; import {PoseState} from '../../modules/pose/pose.state'; import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'; +import {ngxsConfig} from '../../app.config'; describe('AnimationComponent', () => { let component: AnimationComponent; diff --git a/src/app/components/i18n-language-selector/i18n-language-selector.component.spec.ts b/src/app/components/i18n-language-selector/i18n-language-selector.component.spec.ts index 43a4c10c..f4a6db2d 100644 --- a/src/app/components/i18n-language-selector/i18n-language-selector.component.spec.ts +++ b/src/app/components/i18n-language-selector/i18n-language-selector.component.spec.ts @@ -1,10 +1,7 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {axe, toHaveNoViolations} from 'jasmine-axe'; -import { - AppTranslocoTestingModule, - provideTranslocoTesting, -} from '../../core/modules/transloco/transloco-testing.module'; +import {AppTranslocoTestingModule} from '../../core/modules/transloco/transloco-testing.module'; import {RouterModule} from '@angular/router'; import {I18NLanguageSelectorComponent} from './i18n-language-selector.component'; import {languageCodeNormalizer, SITE_LANGUAGES} from '../../core/modules/transloco/languages'; @@ -15,7 +12,7 @@ describe('LanguageSelectorComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [provideTranslocoTesting(), RouterModule.forRoot([]), I18NLanguageSelectorComponent], + imports: [AppTranslocoTestingModule, RouterModule.forRoot([]), I18NLanguageSelectorComponent], }).compileComponents(); }); diff --git a/src/app/components/speech-to-text/speech-to-text.component.spec.ts b/src/app/components/speech-to-text/speech-to-text.component.spec.ts index 4939d8c2..1f5840aa 100644 --- a/src/app/components/speech-to-text/speech-to-text.component.spec.ts +++ b/src/app/components/speech-to-text/speech-to-text.component.spec.ts @@ -3,8 +3,6 @@ import {axe, toHaveNoViolations} from 'jasmine-axe'; import {SpeechToTextComponent} from './speech-to-text.component'; import {AppTranslocoTestingModule} from '../../core/modules/transloco/transloco-testing.module'; -import {MatTooltipModule} from '@angular/material/tooltip'; -import {IonButton, IonIcon} from '@ionic/angular/standalone'; describe('SpeechToTextComponent', () => { let component: SpeechToTextComponent; @@ -12,7 +10,7 @@ describe('SpeechToTextComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [provideTranslocoTesting(), MatTooltipModule, IonIcon, IonButton, SpeechToTextComponent], + imports: [AppTranslocoTestingModule, SpeechToTextComponent], }).compileComponents(); }); diff --git a/src/app/components/text-to-speech/text-to-speech.component.spec.ts b/src/app/components/text-to-speech/text-to-speech.component.spec.ts index adb9ebaf..ad109814 100644 --- a/src/app/components/text-to-speech/text-to-speech.component.spec.ts +++ b/src/app/components/text-to-speech/text-to-speech.component.spec.ts @@ -2,9 +2,9 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; 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 {IonButton, IonIcon} from '@ionic/angular/standalone'; +import {AppTranslocoTestingModule} from '../../core/modules/transloco/transloco-testing.module'; import Spy = jasmine.Spy; describe('TextToSpeechComponent', () => { @@ -25,7 +25,7 @@ describe('TextToSpeechComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [provideTranslocoTesting(), IonIcon, IonButton, TextToSpeechComponent], + imports: [AppTranslocoTestingModule, TextToSpeechComponent], }).compileComponents(); }); diff --git a/src/app/components/video/video-controls/video-controls.component.spec.ts b/src/app/components/video/video-controls/video-controls.component.spec.ts index 5b644529..9e5e7935 100644 --- a/src/app/components/video/video-controls/video-controls.component.spec.ts +++ b/src/app/components/video/video-controls/video-controls.component.spec.ts @@ -2,12 +2,11 @@ import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing'; import {axe, toHaveNoViolations} from 'jasmine-axe'; import {VideoControlsComponent} from './video-controls.component'; -import {AppTranslocoTestingModule} from '../../../core/modules/transloco/transloco-testing.module'; -import {NgxsModule} from '@ngxs/store'; + +import {provideStore} from '@ngxs/store'; import {SettingsState} from '../../../modules/settings/settings.state'; import {ngxsConfig} from '../../../app.config'; -import {MatTooltipModule} from '@angular/material/tooltip'; -import {IonFab, IonFabButton} from '@ionic/angular/standalone'; +import {AppTranslocoTestingModule} from '../../../core/modules/transloco/transloco-testing.module'; describe('VideoControlsComponent', () => { let component: VideoControlsComponent; @@ -15,14 +14,8 @@ describe('VideoControlsComponent', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - imports: [ - provideTranslocoTesting(), - MatTooltipModule, - IonFab, - IonFabButton, - provideStore([SettingsState], ngxsConfig), - VideoControlsComponent, - ], + imports: [AppTranslocoTestingModule, VideoControlsComponent], + providers: [provideStore([SettingsState], ngxsConfig)], }).compileComponents(); })); diff --git a/src/app/components/video/video.component.spec.ts b/src/app/components/video/video.component.spec.ts index 7a5fa85c..753671d4 100644 --- a/src/app/components/video/video.component.spec.ts +++ b/src/app/components/video/video.component.spec.ts @@ -2,18 +2,14 @@ import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing'; import {axe, toHaveNoViolations} from 'jasmine-axe'; import {VideoComponent} from './video.component'; -import {VideoControlsComponent} from './video-controls/video-controls.component'; -import {AnimationComponent} from '../animation/animation.component'; -import {NgxsModule} from '@ngxs/store'; import {SettingsState} from '../../modules/settings/settings.state'; -import {ngxsConfig} from '../../core/modules/ngxs/ngxs.module'; 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 {provideStore} from '@ngxs/store'; import {AppTranslocoTestingModule} from '../../core/modules/transloco/transloco-testing.module'; -import {MatTooltipModule} from '@angular/material/tooltip'; -import {IonFab, IonIcon} from '@ionic/angular/standalone'; +import {ngxsConfig} from '../../app.config'; describe('VideoComponent', () => { let component: VideoComponent; @@ -21,16 +17,8 @@ describe('VideoComponent', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - imports: [ - provideTranslocoTesting(), - MatTooltipModule, - IonIcon, - IonFab, - provideStore([SettingsState, VideoState, SignWritingState, PoseState, DetectorState], ngxsConfig), - VideoComponent, - VideoControlsComponent, - AnimationComponent, - ], + imports: [AppTranslocoTestingModule, VideoComponent], + providers: [provideStore([SettingsState, VideoState, SignWritingState, PoseState, DetectorState], ngxsConfig)], }).compileComponents(); })); diff --git a/src/app/core/modules/ngxs/store/video/video.spec.ts b/src/app/core/modules/ngxs/store/video/video.spec.ts index 09a7fe2b..6c54290b 100644 --- a/src/app/core/modules/ngxs/store/video/video.spec.ts +++ b/src/app/core/modules/ngxs/store/video/video.spec.ts @@ -1,10 +1,10 @@ import {TestBed} from '@angular/core/testing'; -import {NgxsModule, Store} from '@ngxs/store'; +import {provideStore, Store} from '@ngxs/store'; import {VideoState, VideoStateModel} from './video.state'; import {StartCamera, StopVideo} from './video.actions'; import {NavigatorService} from '../../../../services/navigator/navigator.service'; import {firstValueFrom} from 'rxjs'; -import {ngxsConfig} from '../../ngxs.module'; +import {ngxsConfig} from '../../../../../app.config'; describe('VideoState', () => { let store: Store; @@ -31,8 +31,8 @@ describe('VideoState', () => { beforeEach(() => { TestBed.configureTestingModule({ - imports: [NgxsModule.forRoot([VideoState], ngxsConfig)], - providers: [NavigatorService], + imports: [], + providers: [provideStore([VideoState], ngxsConfig), NavigatorService], }); mockCamera = new MediaStream(); diff --git a/src/app/core/modules/transloco/transloco-testing.module.ts b/src/app/core/modules/transloco/transloco-testing.module.ts index 3abdc2f9..c6148eac 100644 --- a/src/app/core/modules/transloco/transloco-testing.module.ts +++ b/src/app/core/modules/transloco/transloco-testing.module.ts @@ -1,4 +1,4 @@ -import {provideTransloco, TranslocoTestingModule} from '@ngneat/transloco'; +import {TranslocoTestingModule} from '@ngneat/transloco'; import {SITE_LANGUAGES} from './languages'; const availableLangs = SITE_LANGUAGES.map(l => l.key.toLocaleLowerCase()); @@ -6,17 +6,12 @@ const availableLangs = SITE_LANGUAGES.map(l => l.key.toLocaleLowerCase()); const langs = {}; availableLangs.forEach(lang => (langs[lang] = require(`../../../../assets/i18n/${lang}.json`))); -const translocoTestingConfig = { +export const AppTranslocoTestingModule = TranslocoTestingModule.forRoot({ + langs, translocoConfig: { availableLangs, defaultLang: 'en', reRenderOnLangChange: true, }, preloadLangs: true, -}; - -export const AppTranslocoTestingModule = TranslocoTestingModule.forRoot({...translocoTestingConfig, langs}); - -export function provideTranslocoTesting(), { - return provideTransloco(translocoTestingConfig); // TODO add transloco loader -} +}); diff --git a/src/app/modules/animation/animation.service.spec.ts b/src/app/modules/animation/animation.service.spec.ts index a44b4d96..7d805853 100644 --- a/src/app/modules/animation/animation.service.spec.ts +++ b/src/app/modules/animation/animation.service.spec.ts @@ -6,7 +6,7 @@ import {MediapipeHolisticService} from '../../core/services/holistic.service'; import {PoseModule} from '../pose/pose.module'; import {NgxsModule} from '@ngxs/store'; import {SettingsState} from '../settings/settings.state'; -import {ngxsConfig} from '../../core/modules/ngxs/ngxs.module'; +import {ngxsConfig} from '../../app.config'; describe('AnimationService', () => { let service: AnimationService; diff --git a/src/app/modules/settings/settings.module.ts b/src/app/modules/settings/settings.module.ts deleted file mode 100644 index 826aa8c1..00000000 --- a/src/app/modules/settings/settings.module.ts +++ /dev/null @@ -1,22 +0,0 @@ -import {NgModule} from '@angular/core'; -import {NgxsModule} from '@ngxs/store'; -import {SettingsState} from './settings.state'; -import {SettingsComponent} from './settings/settings.component'; -import {AppSharedModule} from '../../core/modules/shared.module'; -import {FormsModule} from '@angular/forms'; -import {IonCheckbox, IonItem, IonList} from '@ionic/angular/standalone'; - -@NgModule({ - providers: [], - imports: [ - NgxsModule.forFeature([SettingsState]), - AppSharedModule, - FormsModule, - IonItem, - IonCheckbox, - IonList, - SettingsComponent, - ], - exports: [SettingsComponent], -}) -export class SettingsModule {} diff --git a/src/app/modules/settings/settings/settings.component.spec.ts b/src/app/modules/settings/settings/settings.component.spec.ts index 146c3358..0d415a33 100644 --- a/src/app/modules/settings/settings/settings.component.spec.ts +++ b/src/app/modules/settings/settings/settings.component.spec.ts @@ -2,12 +2,10 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {axe, toHaveNoViolations} from 'jasmine-axe'; import {SettingsComponent} from './settings.component'; -import {NgxsModule, Store} from '@ngxs/store'; +import {provideStore, Store} from '@ngxs/store'; import {SettingsState} from '../settings.state'; -import {FormsModule} from '@angular/forms'; import {ngxsConfig} from '../../../app.config'; import {AppTranslocoTestingModule} from '../../../core/modules/transloco/transloco-testing.module'; -import {IonCheckbox, IonItem, IonList} from '@ionic/angular/standalone'; describe('SettingsComponent', () => { let store: Store; @@ -16,15 +14,8 @@ describe('SettingsComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [ - provideStore([SettingsState], ngxsConfig), - FormsModule, - provideTranslocoTesting(), - IonItem, - IonCheckbox, - IonList, - SettingsComponent, - ], + imports: [AppTranslocoTestingModule, SettingsComponent], + providers: [provideStore([SettingsState], ngxsConfig)], }).compileComponents(); }); diff --git a/src/app/pages/benchmark/benchmark-item/benchmark-item.component.spec.ts b/src/app/pages/benchmark/benchmark-item/benchmark-item.component.spec.ts index 64154563..2df20d17 100644 --- a/src/app/pages/benchmark/benchmark-item/benchmark-item.component.spec.ts +++ b/src/app/pages/benchmark/benchmark-item/benchmark-item.component.spec.ts @@ -2,8 +2,7 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {axe, toHaveNoViolations} from 'jasmine-axe'; import {BenchmarkItemComponent} from './benchmark-item.component'; - -import {MatTooltipModule} from '@angular/material/tooltip'; +import {provideIonicAngular} from '@ionic/angular/standalone'; describe('BenchmarkItemComponent', () => { let component: BenchmarkItemComponent; @@ -11,7 +10,8 @@ describe('BenchmarkItemComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [MatTooltipModule, provideIonicAngular(), BenchmarkItemComponent], + imports: [BenchmarkItemComponent], + providers: [provideIonicAngular()], }).compileComponents(); }); diff --git a/src/app/pages/benchmark/benchmark.component.spec.ts b/src/app/pages/benchmark/benchmark.component.spec.ts index 089fd98b..a0dee987 100644 --- a/src/app/pages/benchmark/benchmark.component.spec.ts +++ b/src/app/pages/benchmark/benchmark.component.spec.ts @@ -1,11 +1,10 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {axe, toHaveNoViolations} from 'jasmine-axe'; - import {BenchmarkComponent} from './benchmark.component'; import {provideHttpClient} from '@angular/common/http'; -import {AppTranslocoTestingModule} from '../../core/modules/transloco/transloco-testing.module'; - import {provideHttpClientTesting} from '@angular/common/http/testing'; +import {AppTranslocoTestingModule} from '../../core/modules/transloco/transloco-testing.module'; +import {provideIonicAngular} from '@ionic/angular/standalone'; describe('BenchmarkComponent', () => { let component: BenchmarkComponent; @@ -13,8 +12,8 @@ describe('BenchmarkComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [provideTranslocoTesting(), provideIonicAngular(), BenchmarkComponent], - providers: [provideHttpClient(), provideHttpClientTesting()], + imports: [AppTranslocoTestingModule, BenchmarkComponent], + providers: [provideIonicAngular(), provideHttpClient(), provideHttpClientTesting()], }).compileComponents(); }); diff --git a/src/app/pages/landing/about/about-api/about-api.component.spec.ts b/src/app/pages/landing/about/about-api/about-api.component.spec.ts index 9f96c2d2..099c1104 100644 --- a/src/app/pages/landing/about/about-api/about-api.component.spec.ts +++ b/src/app/pages/landing/about/about-api/about-api.component.spec.ts @@ -3,7 +3,9 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {AboutApiComponent} from './about-api.component'; import {axe, toHaveNoViolations} from 'jasmine-axe'; import {AppTranslocoTestingModule} from '../../../../core/modules/transloco/transloco-testing.module'; -import {AppNgxsModule} from '../../../../core/modules/ngxs/ngxs.module'; +import {provideStore} from '@ngxs/store'; +import {SettingsState} from '../../../../modules/settings/settings.state'; +import {ngxsConfig} from '../../../../app.config'; describe('AboutApiComponent', () => { let component: AboutApiComponent; @@ -11,7 +13,8 @@ describe('AboutApiComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [provideTranslocoTesting(), AppNgxsModule, AboutApiComponent], + imports: [AppTranslocoTestingModule, AboutApiComponent], + providers: [provideStore([SettingsState], ngxsConfig)], }).compileComponents(); fixture = TestBed.createComponent(AboutApiComponent); diff --git a/src/app/pages/landing/about/about-appearance/about-appearance.component.spec.ts b/src/app/pages/landing/about/about-appearance/about-appearance.component.spec.ts index 79a45bc5..cdae20bf 100644 --- a/src/app/pages/landing/about/about-appearance/about-appearance.component.spec.ts +++ b/src/app/pages/landing/about/about-appearance/about-appearance.component.spec.ts @@ -3,8 +3,9 @@ import {axe, toHaveNoViolations} from 'jasmine-axe'; import {AboutAppearanceComponent} from './about-appearance.component'; import {AppTranslocoTestingModule} from '../../../../core/modules/transloco/transloco-testing.module'; -import {SettingsPageModule} from '../../../settings/settings.module'; -import {AppNgxsModule} from '../../../../core/modules/ngxs/ngxs.module'; +import {provideStore} from '@ngxs/store'; +import {SettingsState} from '../../../../modules/settings/settings.state'; +import {ngxsConfig} from '../../../../app.config'; describe('AboutAppearanceComponent', () => { let component: AboutAppearanceComponent; @@ -12,7 +13,8 @@ describe('AboutAppearanceComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [provideTranslocoTesting(), SettingsPageModule, AppNgxsModule, AboutAppearanceComponent], + imports: [AppTranslocoTestingModule, AboutAppearanceComponent], + providers: [provideStore([SettingsState], ngxsConfig)], }).compileComponents(); }); diff --git a/src/app/pages/landing/about/about-benefits/about-benefits.component.spec.ts b/src/app/pages/landing/about/about-benefits/about-benefits.component.spec.ts index 3309bd04..d5e32299 100644 --- a/src/app/pages/landing/about/about-benefits/about-benefits.component.spec.ts +++ b/src/app/pages/landing/about/about-benefits/about-benefits.component.spec.ts @@ -2,12 +2,10 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {AboutBenefitsComponent} from './about-benefits.component'; import {axe, toHaveNoViolations} from 'jasmine-axe'; -import {AppTranslocoTestingModule} from '../../../../core/modules/transloco/transloco-testing.module'; - -import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'; -import {LazyMapComponent} from '../lazy-map/lazy-map.component'; import {provideHttpClient} from '@angular/common/http'; import {provideHttpClientTesting} from '@angular/common/http/testing'; +import {provideIonicAngular} from '@ionic/angular/standalone'; +import {AppTranslocoTestingModule} from '../../../../core/modules/transloco/transloco-testing.module'; describe('AboutBenefitsComponent', () => { let component: AboutBenefitsComponent; @@ -15,9 +13,8 @@ describe('AboutBenefitsComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [provideTranslocoTesting(), provideIonicAngular(), AboutBenefitsComponent, LazyMapComponent], - providers: [provideHttpClient(), provideHttpClientTesting()], - schemas: [CUSTOM_ELEMENTS_SCHEMA], + imports: [AppTranslocoTestingModule, AboutBenefitsComponent], + providers: [provideHttpClient(), provideHttpClientTesting(), provideIonicAngular()], }).compileComponents(); fixture = TestBed.createComponent(AboutBenefitsComponent); diff --git a/src/app/pages/landing/about/about-customers/about-customers.component.spec.ts b/src/app/pages/landing/about/about-customers/about-customers.component.spec.ts index 60786d53..b0709b52 100644 --- a/src/app/pages/landing/about/about-customers/about-customers.component.spec.ts +++ b/src/app/pages/landing/about/about-customers/about-customers.component.spec.ts @@ -2,9 +2,10 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {AboutCustomersComponent} from './about-customers.component'; import {axe, toHaveNoViolations} from 'jasmine-axe'; -import {AppTranslocoTestingModule} from '../../../../core/modules/transloco/transloco-testing.module'; -import {NoopAnimationsModule} from '@angular/platform-browser/animations'; +import {NoopAnimationsModule} from '@angular/platform-browser/animations'; +import {provideIonicAngular} from '@ionic/angular/standalone'; +import {AppTranslocoTestingModule} from '../../../../core/modules/transloco/transloco-testing.module'; describe('AboutCustomersComponent', () => { let component: AboutCustomersComponent; @@ -12,7 +13,8 @@ describe('AboutCustomersComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [provideTranslocoTesting(), provideIonicAngular(), NoopAnimationsModule, AboutCustomersComponent], + imports: [AppTranslocoTestingModule, NoopAnimationsModule, AboutCustomersComponent], + providers: [provideIonicAngular()], }).compileComponents(); fixture = TestBed.createComponent(AboutCustomersComponent); diff --git a/src/app/pages/landing/about/about-direction/about-direction.component.spec.ts b/src/app/pages/landing/about/about-direction/about-direction.component.spec.ts index f155eca0..8a1e2ac6 100644 --- a/src/app/pages/landing/about/about-direction/about-direction.component.spec.ts +++ b/src/app/pages/landing/about/about-direction/about-direction.component.spec.ts @@ -2,16 +2,17 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {axe, toHaveNoViolations} from 'jasmine-axe'; import {AboutDirectionComponent} from './about-direction.component'; +import {provideIonicAngular} from '@ionic/angular/standalone'; import {AppTranslocoTestingModule} from '../../../../core/modules/transloco/transloco-testing.module'; - describe('AboutDirectionComponent', () => { let component: AboutDirectionComponent; let fixture: ComponentFixture; beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [provideTranslocoTesting(), provideIonicAngular(), AboutDirectionComponent], + imports: [AppTranslocoTestingModule, AboutDirectionComponent], + providers: [provideIonicAngular()], }).compileComponents(); }); diff --git a/src/app/pages/landing/about/about-faq/about-faq.component.spec.ts b/src/app/pages/landing/about/about-faq/about-faq.component.spec.ts index 7d2dedd4..c7b716c0 100644 --- a/src/app/pages/landing/about/about-faq/about-faq.component.spec.ts +++ b/src/app/pages/landing/about/about-faq/about-faq.component.spec.ts @@ -2,9 +2,10 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {AboutFaqComponent} from './about-faq.component'; import {axe, toHaveNoViolations} from 'jasmine-axe'; -import {AppTranslocoTestingModule} from '../../../../core/modules/transloco/transloco-testing.module'; -import {NoopAnimationsModule} from '@angular/platform-browser/animations'; +import {NoopAnimationsModule} from '@angular/platform-browser/animations'; +import {provideIonicAngular} from '@ionic/angular/standalone'; +import {AppTranslocoTestingModule} from '../../../../core/modules/transloco/transloco-testing.module'; describe('AboutFaqComponent', () => { let component: AboutFaqComponent; @@ -12,7 +13,8 @@ describe('AboutFaqComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [provideTranslocoTesting(), provideIonicAngular(), NoopAnimationsModule, AboutFaqComponent], + imports: [AppTranslocoTestingModule, NoopAnimationsModule, AboutFaqComponent], + providers: [provideIonicAngular()], }).compileComponents(); fixture = TestBed.createComponent(AboutFaqComponent); diff --git a/src/app/pages/landing/about/about-hero/about-hero.component.spec.ts b/src/app/pages/landing/about/about-hero/about-hero.component.spec.ts index c728100a..d07e7fbe 100644 --- a/src/app/pages/landing/about/about-hero/about-hero.component.spec.ts +++ b/src/app/pages/landing/about/about-hero/about-hero.component.spec.ts @@ -2,9 +2,11 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {axe, toHaveNoViolations} from 'jasmine-axe'; import {AboutHeroComponent} from './about-hero.component'; -import {AppTranslocoTestingModule} from '../../../../core/modules/transloco/transloco-testing.module'; import {NoopAnimationsModule} from '@angular/platform-browser/animations'; +import {provideIonicAngular} from '@ionic/angular/standalone'; +import {AppTranslocoTestingModule} from '../../../../core/modules/transloco/transloco-testing.module'; +import {provideRouter} from '@angular/router'; describe('AboutHeroComponent', () => { let component: AboutHeroComponent; @@ -12,7 +14,8 @@ describe('AboutHeroComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [provideTranslocoTesting(), provideIonicAngular(), NoopAnimationsModule, AboutHeroComponent], + imports: [AppTranslocoTestingModule, NoopAnimationsModule, AboutHeroComponent], + providers: [provideRouter([]), provideIonicAngular()], }).compileComponents(); }); diff --git a/src/app/pages/landing/about/about-objectives/about-objectives.component.spec.ts b/src/app/pages/landing/about/about-objectives/about-objectives.component.spec.ts index f81a1465..e75faa55 100644 --- a/src/app/pages/landing/about/about-objectives/about-objectives.component.spec.ts +++ b/src/app/pages/landing/about/about-objectives/about-objectives.component.spec.ts @@ -2,16 +2,17 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {AboutObjectivesComponent} from './about-objectives.component'; import {axe, toHaveNoViolations} from 'jasmine-axe'; +import {provideIonicAngular} from '@ionic/angular/standalone'; import {AppTranslocoTestingModule} from '../../../../core/modules/transloco/transloco-testing.module'; - describe('AboutObjectivesComponent', () => { let component: AboutObjectivesComponent; let fixture: ComponentFixture; beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [provideTranslocoTesting(), provideIonicAngular(), AboutObjectivesComponent], + imports: [AppTranslocoTestingModule, AboutObjectivesComponent], + providers: [provideIonicAngular()], }).compileComponents(); fixture = TestBed.createComponent(AboutObjectivesComponent); diff --git a/src/app/pages/landing/about/about-pricing/about-pricing.component.spec.ts b/src/app/pages/landing/about/about-pricing/about-pricing.component.spec.ts index 3183f396..4c10a78c 100644 --- a/src/app/pages/landing/about/about-pricing/about-pricing.component.spec.ts +++ b/src/app/pages/landing/about/about-pricing/about-pricing.component.spec.ts @@ -2,17 +2,17 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {AboutPricingComponent} from './about-pricing.component'; import {axe, toHaveNoViolations} from 'jasmine-axe'; +import {provideIonicAngular} from '@ionic/angular/standalone'; import {AppTranslocoTestingModule} from '../../../../core/modules/transloco/transloco-testing.module'; -import {ReactiveFormsModule} from '@angular/forms'; - describe('AboutPricingComponent', () => { let component: AboutPricingComponent; let fixture: ComponentFixture; beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [provideTranslocoTesting(), provideIonicAngular(), ReactiveFormsModule, AboutPricingComponent], + imports: [AppTranslocoTestingModule, AboutPricingComponent], + providers: [provideIonicAngular()], }).compileComponents(); fixture = TestBed.createComponent(AboutPricingComponent); diff --git a/src/app/pages/landing/about/about-team/about-team.component.spec.ts b/src/app/pages/landing/about/about-team/about-team.component.spec.ts index a56e54ce..d40e41b7 100644 --- a/src/app/pages/landing/about/about-team/about-team.component.spec.ts +++ b/src/app/pages/landing/about/about-team/about-team.component.spec.ts @@ -2,16 +2,17 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {AboutTeamComponent} from './about-team.component'; import {axe, toHaveNoViolations} from 'jasmine-axe'; +import {provideIonicAngular} from '@ionic/angular/standalone'; import {AppTranslocoTestingModule} from '../../../../core/modules/transloco/transloco-testing.module'; - describe('AboutTeamComponent', () => { let component: AboutTeamComponent; let fixture: ComponentFixture; beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [provideTranslocoTesting(), provideIonicAngular(), AboutTeamComponent], + imports: [AppTranslocoTestingModule, AboutTeamComponent], + providers: [provideIonicAngular()], }).compileComponents(); fixture = TestBed.createComponent(AboutTeamComponent); diff --git a/src/app/pages/landing/about/about.component.spec.ts b/src/app/pages/landing/about/about.component.spec.ts index a79c8db9..7a632024 100644 --- a/src/app/pages/landing/about/about.component.spec.ts +++ b/src/app/pages/landing/about/about.component.spec.ts @@ -2,26 +2,14 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {axe, toHaveNoViolations} from 'jasmine-axe'; import {AboutComponent} from './about.component'; -import {AboutHeroComponent} from './about-hero/about-hero.component'; -import {AboutDirectionComponent} from './about-direction/about-direction.component'; -import {StoresComponent} from '../../../components/stores/stores.component'; +import {provideStore} from '@ngxs/store'; +import {SettingsState} from '../../../modules/settings/settings.state'; +import {ngxsConfig} from '../../../app.config'; import {AppTranslocoTestingModule} from '../../../core/modules/transloco/transloco-testing.module'; -import {AboutAppearanceComponent} from './about-appearance/about-appearance.component'; -import {AboutBenefitsComponent} from './about-benefits/about-benefits.component'; -import {AboutApiComponent} from './about-api/about-api.component'; -import {AppNgxsModule} from '../../../core/modules/ngxs/ngxs.module'; -import {SettingsPageModule} from '../../settings/settings.module'; - -import {MatTooltipModule} from '@angular/material/tooltip'; -import {MatTabsModule} from '@angular/material/tabs'; -import {AboutObjectivesComponent} from './about-objectives/about-objectives.component'; -import {AboutFaqComponent} from './about-faq/about-faq.component'; -import {AboutCustomersComponent} from './about-customers/about-customers.component'; -import {AboutTeamComponent} from './about-team/about-team.component'; -import {NoopAnimationsModule} from '@angular/platform-browser/animations'; -import {AboutPricingComponent} from './about-pricing/about-pricing.component'; -import {ReactiveFormsModule} from '@angular/forms'; -import {LazyMapComponent} from './lazy-map/lazy-map.component'; +import {provideIonicAngular} from '@ionic/angular/standalone'; +import {provideRouter} from '@angular/router'; +import {provideHttpClient} from '@angular/common/http'; +import {provideHttpClientTesting} from '@angular/common/http/testing'; describe('AboutComponent', () => { let component: AboutComponent; @@ -29,28 +17,13 @@ describe('AboutComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [ - provideTranslocoTesting(), - MatTooltipModule, - MatTabsModule, + imports: [AppTranslocoTestingModule, AboutComponent], + providers: [ + provideRouter([]), provideIonicAngular(), - NoopAnimationsModule, - AppNgxsModule, - SettingsPageModule, - ReactiveFormsModule, - AboutHeroComponent, - AboutComponent, - AboutAppearanceComponent, - AboutObjectivesComponent, - AboutFaqComponent, - AboutCustomersComponent, - AboutTeamComponent, - AboutBenefitsComponent, - AboutDirectionComponent, - AboutPricingComponent, - AboutApiComponent, - StoresComponent, - LazyMapComponent, + provideHttpClient(), + provideHttpClientTesting(), + provideStore([SettingsState], ngxsConfig), ], }).compileComponents(); }); diff --git a/src/app/pages/landing/contribute/contribute.component.spec.ts b/src/app/pages/landing/contribute/contribute.component.spec.ts index deee9c49..5ef95d04 100644 --- a/src/app/pages/landing/contribute/contribute.component.spec.ts +++ b/src/app/pages/landing/contribute/contribute.component.spec.ts @@ -2,7 +2,7 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {axe, toHaveNoViolations} from 'jasmine-axe'; import {ContributeComponent} from './contribute.component'; - +import {provideIonicAngular} from '@ionic/angular/standalone'; describe('ContributeComponent', () => { let component: ContributeComponent; @@ -10,7 +10,8 @@ describe('ContributeComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [provideIonicAngular(), ContributeComponent], + imports: [ContributeComponent], + providers: [provideIonicAngular()], }).compileComponents(); }); diff --git a/src/app/pages/landing/landing-footer/landing-footer.component.spec.ts b/src/app/pages/landing/landing-footer/landing-footer.component.spec.ts index de827d15..cf0a988b 100644 --- a/src/app/pages/landing/landing-footer/landing-footer.component.spec.ts +++ b/src/app/pages/landing/landing-footer/landing-footer.component.spec.ts @@ -1,12 +1,10 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {LandingFooterComponent} from './landing-footer.component'; -import {AppTranslocoTestingModule} from '../../../core/modules/transloco/transloco-testing.module'; - -import {NoopAnimationsModule} from '@angular/platform-browser/animations'; import {axe, toHaveNoViolations} from 'jasmine-axe'; -import {I18NLanguageSelectorComponent} from '../../../components/i18n-language-selector/i18n-language-selector.component'; -import {RouterModule} from '@angular/router'; +import {provideIonicAngular} from '@ionic/angular/standalone'; +import {AppTranslocoTestingModule} from '../../../core/modules/transloco/transloco-testing.module'; +import {provideRouter} from '@angular/router'; describe('LandingFooterComponent', () => { let component: LandingFooterComponent; @@ -14,14 +12,8 @@ describe('LandingFooterComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [ - provideTranslocoTesting(), - provideIonicAngular(), - NoopAnimationsModule, - RouterModule.forRoot([{path: '', component: LandingFooterComponent}]), - LandingFooterComponent, - I18NLanguageSelectorComponent, - ], + imports: [AppTranslocoTestingModule, LandingFooterComponent], + providers: [provideRouter([]), provideIonicAngular()], }).compileComponents(); fixture = TestBed.createComponent(LandingFooterComponent); diff --git a/src/app/pages/landing/landing.component.spec.ts b/src/app/pages/landing/landing.component.spec.ts index f224cdf5..a6a774c0 100644 --- a/src/app/pages/landing/landing.component.spec.ts +++ b/src/app/pages/landing/landing.component.spec.ts @@ -2,13 +2,10 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {axe, toHaveNoViolations} from 'jasmine-axe'; import {LandingComponent} from './landing.component'; -import {AppTranslocoTestingModule} from '../../core/modules/transloco/transloco-testing.module'; -import {NoopAnimationsModule} from '@angular/platform-browser/animations'; -import {RouterModule} from '@angular/router'; +import {provideRouter} from '@angular/router'; import {AboutComponent} from './about/about.component'; - -import {I18NLanguageSelectorComponent} from '../../components/i18n-language-selector/i18n-language-selector.component'; -import {LandingFooterComponent} from './landing-footer/landing-footer.component'; +import {AppTranslocoTestingModule} from '../../core/modules/transloco/transloco-testing.module'; +import {provideIonicAngular} from '@ionic/angular/standalone'; describe('LandingComponent', () => { let component: LandingComponent; @@ -16,15 +13,8 @@ describe('LandingComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [ - provideTranslocoTesting(), - provideIonicAngular(), - NoopAnimationsModule, - RouterModule.forRoot([{path: '', component: AboutComponent}]), - LandingComponent, - LandingFooterComponent, - I18NLanguageSelectorComponent, - ], + imports: [AppTranslocoTestingModule, LandingComponent], + providers: [provideRouter([{path: '', component: AboutComponent}]), provideIonicAngular()], }).compileComponents(); }); diff --git a/src/app/pages/landing/landing.component.ts b/src/app/pages/landing/landing.component.ts index 437ee629..045bf0ec 100644 --- a/src/app/pages/landing/landing.component.ts +++ b/src/app/pages/landing/landing.component.ts @@ -18,11 +18,10 @@ import { IonToolbar, } from '@ionic/angular/standalone'; import {RouterLink, RouterOutlet} from '@angular/router'; -import {TranslocoPipe} from '@ngneat/transloco'; +import {TranslocoPipe, TranslocoService} from '@ngneat/transloco'; import {arrowForward} from 'ionicons/icons'; import {addIcons} from 'ionicons'; import {LandingFooterComponent} from './landing-footer/landing-footer.component'; -import {TranslocoService} from '@ngneat/transloco'; @Component({ selector: 'app-landing', diff --git a/src/app/pages/not-found/not-found.component.spec.ts b/src/app/pages/not-found/not-found.component.spec.ts index adaf950e..2b2e909c 100644 --- a/src/app/pages/not-found/not-found.component.spec.ts +++ b/src/app/pages/not-found/not-found.component.spec.ts @@ -1,7 +1,9 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {NotFoundComponent} from './not-found.component'; -import {provideTranslocoTesting} from '../../core/modules/transloco/transloco-testing.module'; +import {AppTranslocoTestingModule} from '../../core/modules/transloco/transloco-testing.module'; +import {provideRouter} from '@angular/router'; +import {axe, toHaveNoViolations} from 'jasmine-axe'; describe('NotFoundComponent', () => { let component: NotFoundComponent; @@ -9,8 +11,8 @@ describe('NotFoundComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [NotFoundComponent], - providers: [provideTranslocoTesting(),], + imports: [AppTranslocoTestingModule, NotFoundComponent], + providers: [provideRouter([])], }).compileComponents(); fixture = TestBed.createComponent(NotFoundComponent); @@ -21,4 +23,10 @@ describe('NotFoundComponent', () => { it('should create', () => { expect(component).toBeTruthy(); }); + + it('should pass accessibility test', async () => { + jasmine.addMatchers(toHaveNoViolations); + const a11y = await axe(fixture.nativeElement); + expect(a11y).toHaveNoViolations(); + }); }); diff --git a/src/app/pages/playground/playground.component.spec.ts b/src/app/pages/playground/playground.component.spec.ts index 5395776e..474daeff 100644 --- a/src/app/pages/playground/playground.component.spec.ts +++ b/src/app/pages/playground/playground.component.spec.ts @@ -1,14 +1,17 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {axe, toHaveNoViolations} from 'jasmine-axe'; import {PlaygroundComponent} from './playground.component'; -import {Store} from '@ngxs/store'; -import {AppNgxsModule} from '../../core/modules/ngxs/ngxs.module'; +import {provideStore, Store} from '@ngxs/store'; import {StartCamera} from '../../core/modules/ngxs/store/video/video.actions'; import {AppTranslocoTestingModule} from '../../core/modules/transloco/transloco-testing.module'; import {TranslocoService} from '@ngneat/transloco'; - -import {SettingsModule} from '../../modules/settings/settings.module'; -import {VideoModule} from '../../components/video/video.module'; +import {provideIonicAngular} from '@ionic/angular/standalone'; +import {SettingsState} from '../../modules/settings/settings.state'; +import {ngxsConfig} from '../../app.config'; +import {DetectorState} from '../../modules/detector/detector.state'; +import {SignWritingState} from '../../modules/sign-writing/sign-writing.state'; +import {PoseState} from '../../modules/pose/pose.state'; +import {VideoState} from '../../core/modules/ngxs/store/video/video.state'; describe('PlaygroundComponent', () => { let component: PlaygroundComponent; @@ -17,13 +20,10 @@ describe('PlaygroundComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [ - provideTranslocoTesting(), - AppNgxsModule, + imports: [AppTranslocoTestingModule, PlaygroundComponent], + providers: [ + provideStore([SettingsState, VideoState, DetectorState, SignWritingState, PoseState], ngxsConfig), provideIonicAngular(), - SettingsModule, - VideoModule, - PlaygroundComponent, ], }).compileComponents(); }); diff --git a/src/app/pages/settings/settings-about/settings-about.component.spec.ts b/src/app/pages/settings/settings-about/settings-about.component.spec.ts index 03466b2d..70c21de8 100644 --- a/src/app/pages/settings/settings-about/settings-about.component.spec.ts +++ b/src/app/pages/settings/settings-about/settings-about.component.spec.ts @@ -1,10 +1,9 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; - import {SettingsAboutComponent} from './settings-about.component'; -import {AppTranslocoTestingModule} from '../../../core/modules/transloco/transloco-testing.module'; import {axe, toHaveNoViolations} from 'jasmine-axe'; - -import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'; +import {AppTranslocoTestingModule} from '../../../core/modules/transloco/transloco-testing.module'; +import {provideIonicAngular} from '@ionic/angular/standalone'; +import {provideRouter} from '@angular/router'; describe('SettingsAboutComponent', () => { let component: SettingsAboutComponent; @@ -12,8 +11,8 @@ describe('SettingsAboutComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [provideTranslocoTesting(), provideIonicAngular(), SettingsAboutComponent], - schemas: [CUSTOM_ELEMENTS_SCHEMA], + imports: [AppTranslocoTestingModule, SettingsAboutComponent], + providers: [provideRouter([]), provideIonicAngular()], }).compileComponents(); fixture = TestBed.createComponent(SettingsAboutComponent); diff --git a/src/app/pages/settings/settings-about/settings-about.component.ts b/src/app/pages/settings/settings-about/settings-about.component.ts index 76769722..150a97cf 100644 --- a/src/app/pages/settings/settings-about/settings-about.component.ts +++ b/src/app/pages/settings/settings-about/settings-about.component.ts @@ -5,7 +5,9 @@ import { IonBackButton, IonButtons, IonContent, - IonHeader, IonItem, IonLabel, + IonHeader, + IonItem, + IonLabel, IonList, IonTitle, IonToolbar, @@ -15,7 +17,20 @@ import { selector: 'app-settings-about', templateUrl: './settings-about.component.html', styleUrls: ['./settings-about.component.scss'], - imports: [TranslocoDirective, RouterLink, TranslocoPipe, IonTitle, IonBackButton, IonToolbar, IonHeader, IonButtons, IonContent, IonList, IonItem, IonLabel], + imports: [ + TranslocoDirective, + RouterLink, + TranslocoPipe, + IonTitle, + IonBackButton, + IonToolbar, + IonHeader, + IonButtons, + IonContent, + IonList, + IonItem, + IonLabel, + ], }) export class SettingsAboutComponent { legalPages: string[] = ['terms', 'privacy', 'licenses']; diff --git a/src/app/pages/settings/settings-appearance/settings-appearance-images/settings-appearance-images.component.spec.ts b/src/app/pages/settings/settings-appearance/settings-appearance-images/settings-appearance-images.component.spec.ts index a49e0ece..822c553e 100644 --- a/src/app/pages/settings/settings-appearance/settings-appearance-images/settings-appearance-images.component.spec.ts +++ b/src/app/pages/settings/settings-appearance/settings-appearance-images/settings-appearance-images.component.spec.ts @@ -1,13 +1,13 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {SettingsAppearanceImagesComponent} from './settings-appearance-images.component'; -import {AppTranslocoTestingModule} from '../../../../core/modules/transloco/transloco-testing.module'; -import {NgxsModule} from '@ngxs/store'; +import {provideStore} from '@ngxs/store'; import {SettingsState} from '../../../../modules/settings/settings.state'; import {ngxsConfig} from '../../../../app.config'; import {axe, toHaveNoViolations} from 'jasmine-axe'; -import {MatTooltipModule} from '@angular/material/tooltip'; +import {provideIonicAngular} from '@ionic/angular/standalone'; +import {AppTranslocoTestingModule} from '../../../../core/modules/transloco/transloco-testing.module'; describe('SettingsAppearanceImagesComponent', () => { let component: SettingsAppearanceImagesComponent; @@ -15,13 +15,8 @@ describe('SettingsAppearanceImagesComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [ - provideTranslocoTesting(), - MatTooltipModule, - provideIonicAngular(), - provideStore([SettingsState], ngxsConfig), - SettingsAppearanceImagesComponent, - ], + imports: [AppTranslocoTestingModule, SettingsAppearanceImagesComponent], + providers: [provideIonicAngular(), provideStore([SettingsState], ngxsConfig)], }).compileComponents(); fixture = TestBed.createComponent(SettingsAppearanceImagesComponent); diff --git a/src/app/pages/settings/settings-appearance/settings-appearance-images/settings-appearance-images.component.ts b/src/app/pages/settings/settings-appearance/settings-appearance-images/settings-appearance-images.component.ts index 8ef19ff9..94107a1b 100644 --- a/src/app/pages/settings/settings-appearance/settings-appearance-images/settings-appearance-images.component.ts +++ b/src/app/pages/settings/settings-appearance/settings-appearance-images/settings-appearance-images.component.ts @@ -30,6 +30,6 @@ export class SettingsAppearanceImagesComponent extends BaseSettingsComponent { constructor() { super(); - addIcons({diceOutline, images}) + addIcons({diceOutline, images}); } } diff --git a/src/app/pages/settings/settings-appearance/settings-appearance.component.spec.ts b/src/app/pages/settings/settings-appearance/settings-appearance.component.spec.ts index d889d17f..5987d375 100644 --- a/src/app/pages/settings/settings-appearance/settings-appearance.component.spec.ts +++ b/src/app/pages/settings/settings-appearance/settings-appearance.component.spec.ts @@ -1,14 +1,13 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {SettingsAppearanceComponent} from './settings-appearance.component'; -import {AppTranslocoTestingModule} from '../../../core/modules/transloco/transloco-testing.module'; -import {NgxsModule} from '@ngxs/store'; + +import {provideStore} from '@ngxs/store'; import {SettingsState} from '../../../modules/settings/settings.state'; import {ngxsConfig} from '../../../app.config'; import {axe, toHaveNoViolations} from 'jasmine-axe'; - -import {SettingsAppearanceImagesComponent} from './settings-appearance-images/settings-appearance-images.component'; -import {MatTooltipModule} from '@angular/material/tooltip'; +import {AppTranslocoTestingModule} from '../../../core/modules/transloco/transloco-testing.module'; +import {provideIonicAngular} from '@ionic/angular/standalone'; describe('SettingsAppearanceComponent', () => { let component: SettingsAppearanceComponent; @@ -16,14 +15,8 @@ describe('SettingsAppearanceComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [ - provideTranslocoTesting(), - MatTooltipModule, - provideIonicAngular(), - provideStore([SettingsState], ngxsConfig), - SettingsAppearanceComponent, - SettingsAppearanceImagesComponent, - ], + imports: [AppTranslocoTestingModule, SettingsAppearanceComponent], + providers: [provideIonicAngular(), provideStore([SettingsState], ngxsConfig)], }).compileComponents(); fixture = TestBed.createComponent(SettingsAppearanceComponent); diff --git a/src/app/pages/settings/settings-appearance/settings-appearance.component.ts b/src/app/pages/settings/settings-appearance/settings-appearance.component.ts index 627c957a..7064a769 100644 --- a/src/app/pages/settings/settings-appearance/settings-appearance.component.ts +++ b/src/app/pages/settings/settings-appearance/settings-appearance.component.ts @@ -7,6 +7,16 @@ import {IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar} templateUrl: './settings-appearance.component.html', selector: 'app-settings-appearance', styleUrls: ['./settings-appearance.component.scss'], - imports: [TranslocoDirective, SettingsAppearanceImagesComponent, TranslocoPipe, IonTitle, IonToolbar, IonHeader, IonContent, IonBackButton, IonButtons], + imports: [ + TranslocoDirective, + SettingsAppearanceImagesComponent, + TranslocoPipe, + IonTitle, + IonToolbar, + IonHeader, + IonContent, + IonBackButton, + IonButtons, + ], }) export class SettingsAppearanceComponent {} diff --git a/src/app/pages/settings/settings-feedback/settings-feedback.component.spec.ts b/src/app/pages/settings/settings-feedback/settings-feedback.component.spec.ts index 95ca1f8d..734cea9f 100644 --- a/src/app/pages/settings/settings-feedback/settings-feedback.component.spec.ts +++ b/src/app/pages/settings/settings-feedback/settings-feedback.component.spec.ts @@ -1,12 +1,13 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {SettingsFeedbackComponent} from './settings-feedback.component'; -import {AppTranslocoTestingModule} from '../../../core/modules/transloco/transloco-testing.module'; -import {NgxsModule} from '@ngxs/store'; + +import {provideStore} from '@ngxs/store'; import {SettingsState} from '../../../modules/settings/settings.state'; import {ngxsConfig} from '../../../app.config'; import {axe, toHaveNoViolations} from 'jasmine-axe'; - +import {AppTranslocoTestingModule} from '../../../core/modules/transloco/transloco-testing.module'; +import {provideIonicAngular} from '@ionic/angular/standalone'; describe('SettingsFeedbackComponent', () => { let component: SettingsFeedbackComponent; @@ -14,12 +15,8 @@ describe('SettingsFeedbackComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [ - provideTranslocoTesting(), - provideIonicAngular(), - provideStore([SettingsState], ngxsConfig), - SettingsFeedbackComponent, - ], + imports: [AppTranslocoTestingModule, SettingsFeedbackComponent], + providers: [provideIonicAngular(), provideStore([SettingsState], ngxsConfig)], }).compileComponents(); fixture = TestBed.createComponent(SettingsFeedbackComponent); diff --git a/src/app/pages/settings/settings-menu/settings-menu.component.spec.ts b/src/app/pages/settings/settings-menu/settings-menu.component.spec.ts index c0951aa8..f26d7848 100644 --- a/src/app/pages/settings/settings-menu/settings-menu.component.spec.ts +++ b/src/app/pages/settings/settings-menu/settings-menu.component.spec.ts @@ -2,16 +2,17 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {SettingsMenuComponent} from './settings-menu.component'; import {axe, toHaveNoViolations} from 'jasmine-axe'; +import {provideIonicAngular} from '@ionic/angular/standalone'; import {AppTranslocoTestingModule} from '../../../core/modules/transloco/transloco-testing.module'; - describe('SettingsMenuComponent', () => { let component: SettingsMenuComponent; let fixture: ComponentFixture; beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [provideTranslocoTesting(), provideIonicAngular(), SettingsMenuComponent], + imports: [AppTranslocoTestingModule, SettingsMenuComponent], + providers: [provideIonicAngular()], }).compileComponents(); fixture = TestBed.createComponent(SettingsMenuComponent); diff --git a/src/app/pages/settings/settings-offline/settings-offline.component.spec.ts b/src/app/pages/settings/settings-offline/settings-offline.component.spec.ts index 11288347..01b66e3e 100644 --- a/src/app/pages/settings/settings-offline/settings-offline.component.spec.ts +++ b/src/app/pages/settings/settings-offline/settings-offline.component.spec.ts @@ -2,12 +2,11 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {SettingsOfflineComponent} from './settings-offline.component'; import {AppTranslocoTestingModule} from '../../../core/modules/transloco/transloco-testing.module'; -import {AppNgxsModule} from '../../../core/modules/ngxs/ngxs.module'; import {axe, toHaveNoViolations} from 'jasmine-axe'; -import {MatTreeModule} from '@angular/material/tree'; -import {CdkTreeModule} from '@angular/cdk/tree'; -import {NgxFilesizeModule} from 'ngx-filesize'; - +import {provideIonicAngular} from '@ionic/angular/standalone'; +import {provideStore} from '@ngxs/store'; +import {SettingsState} from '../../../modules/settings/settings.state'; +import {ngxsConfig} from '../../../app.config'; describe('SettingsOfflineComponent', () => { let component: SettingsOfflineComponent; @@ -15,15 +14,8 @@ describe('SettingsOfflineComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [ - MatTreeModule, - provideIonicAngular(), - CdkTreeModule, - NgxFilesizeModule, - provideTranslocoTesting(), - AppNgxsModule, - SettingsOfflineComponent, - ], + imports: [AppTranslocoTestingModule, SettingsOfflineComponent], + providers: [provideIonicAngular(), provideStore([SettingsState], ngxsConfig)], }).compileComponents(); fixture = TestBed.createComponent(SettingsOfflineComponent); diff --git a/src/app/pages/settings/settings-offline/settings-offline.component.ts b/src/app/pages/settings/settings-offline/settings-offline.component.ts index 4a4cb6df..42f8ee40 100644 --- a/src/app/pages/settings/settings-offline/settings-offline.component.ts +++ b/src/app/pages/settings/settings-offline/settings-offline.component.ts @@ -2,7 +2,7 @@ import {Component, inject, OnInit} from '@angular/core'; import {isIOS} from '../../../core/constants'; import {AssetsService, AssetState} from '../../../core/services/assets/assets.service'; import {MatTreeModule, MatTreeNestedDataSource} from '@angular/material/tree'; -import {NestedTreeControl} from '@angular/cdk/tree'; +import {CdkTreeModule, NestedTreeControl} from '@angular/cdk/tree'; import {TranslocoDirective, TranslocoPipe, TranslocoService} from '@ngneat/transloco'; import {takeUntil, tap} from 'rxjs/operators'; import {BaseComponent} from '../../../components/base/base.component'; @@ -47,6 +47,7 @@ if (!isIOS) { TranslocoDirective, MatProgressSpinner, MatTreeModule, + CdkTreeModule, NgTemplateOutlet, TranslocoPipe, NgxFilesizeModule, diff --git a/src/app/pages/settings/settings-voice-input/settings-voice-input.component.spec.ts b/src/app/pages/settings/settings-voice-input/settings-voice-input.component.spec.ts index 2a75b9ac..aaef4c1b 100644 --- a/src/app/pages/settings/settings-voice-input/settings-voice-input.component.spec.ts +++ b/src/app/pages/settings/settings-voice-input/settings-voice-input.component.spec.ts @@ -1,13 +1,13 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {SettingsVoiceInputComponent} from './settings-voice-input.component'; -import {AppTranslocoTestingModule} from '../../../core/modules/transloco/transloco-testing.module'; -import {NgxsModule} from '@ngxs/store'; + +import {provideStore} from '@ngxs/store'; import {SettingsState} from '../../../modules/settings/settings.state'; import {ngxsConfig} from '../../../app.config'; import {axe, toHaveNoViolations} from 'jasmine-axe'; - -import {MatTooltipModule} from '@angular/material/tooltip'; +import {AppTranslocoTestingModule} from '../../../core/modules/transloco/transloco-testing.module'; +import {provideIonicAngular} from '@ionic/angular/standalone'; describe('SettingsVoiceInputComponent', () => { let component: SettingsVoiceInputComponent; @@ -15,13 +15,8 @@ describe('SettingsVoiceInputComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [ - MatTooltipModule, - provideTranslocoTesting(), - provideIonicAngular(), - provideStore([SettingsState], ngxsConfig), - SettingsVoiceInputComponent, - ], + imports: [AppTranslocoTestingModule, SettingsVoiceInputComponent], + providers: [provideIonicAngular(), provideStore([SettingsState], ngxsConfig)], }).compileComponents(); fixture = TestBed.createComponent(SettingsVoiceInputComponent); diff --git a/src/app/pages/settings/settings-voice-output/settings-voice-output.component.spec.ts b/src/app/pages/settings/settings-voice-output/settings-voice-output.component.spec.ts index 0f2d58ee..f2cefa13 100644 --- a/src/app/pages/settings/settings-voice-output/settings-voice-output.component.spec.ts +++ b/src/app/pages/settings/settings-voice-output/settings-voice-output.component.spec.ts @@ -5,7 +5,7 @@ import {provideStore} from '@ngxs/store'; import {SettingsState} from '../../../modules/settings/settings.state'; import {ngxsConfig} from '../../../app.config'; import {axe, toHaveNoViolations} from 'jasmine-axe'; -import {provideTranslocoTesting} from '../../../core/modules/transloco/transloco-testing.module'; +import {AppTranslocoTestingModule} from '../../../core/modules/transloco/transloco-testing.module'; describe('SettingsVoiceOutputComponent', () => { let component: SettingsVoiceOutputComponent; @@ -13,11 +13,8 @@ describe('SettingsVoiceOutputComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [ - provideTranslocoTesting(), - provideStore([SettingsState], ngxsConfig), - SettingsVoiceOutputComponent, - ], + imports: [AppTranslocoTestingModule, SettingsVoiceOutputComponent], + providers: [provideStore([SettingsState], ngxsConfig)], }).compileComponents(); fixture = TestBed.createComponent(SettingsVoiceOutputComponent); diff --git a/src/app/pages/settings/settings.component.spec.ts b/src/app/pages/settings/settings.component.spec.ts index 0511d585..9bedc991 100644 --- a/src/app/pages/settings/settings.component.spec.ts +++ b/src/app/pages/settings/settings.component.spec.ts @@ -2,19 +2,10 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {SettingsPageComponent} from './settings.component'; import {axe, toHaveNoViolations} from 'jasmine-axe'; -import {AppTranslocoTestingModule} from '../../core/modules/transloco/transloco-testing.module'; -import {RouterTestingModule} from '@angular/router/testing'; -import {MatTreeModule} from '@angular/material/tree'; -import {CdkTreeModule} from '@angular/cdk/tree'; -import {SettingsMenuComponent} from './settings-menu/settings-menu.component'; -import {SettingsOfflineComponent} from './settings-offline/settings-offline.component'; -import {SettingsAppearanceComponent} from './settings-appearance/settings-appearance.component'; -import {SettingsFeedbackComponent} from './settings-feedback/settings-feedback.component'; -import {SettingsAboutComponent} from './settings-about/settings-about.component'; -import {SettingsVoiceInputComponent} from './settings-voice-input/settings-voice-input.component'; -import {SettingsVoiceOutputComponent} from './settings-voice-output/settings-voice-output.component'; -import {SettingsAppearanceImagesComponent} from './settings-appearance/settings-appearance-images/settings-appearance-images.component'; +import {RouterTestingModule} from '@angular/router/testing'; +import {provideIonicAngular} from '@ionic/angular/standalone'; +import {AppTranslocoTestingModule} from '../../core/modules/transloco/transloco-testing.module'; xdescribe('SettingsPageComponent', () => { let component: SettingsPageComponent; @@ -22,22 +13,8 @@ xdescribe('SettingsPageComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [ - provideIonicAngular(), - RouterTestingModule, - MatTreeModule, - CdkTreeModule, - provideTranslocoTesting(), - SettingsOfflineComponent, - SettingsAppearanceComponent, - SettingsFeedbackComponent, - SettingsAboutComponent, - SettingsVoiceInputComponent, - SettingsVoiceOutputComponent, - SettingsMenuComponent, - SettingsAppearanceImagesComponent, - SettingsPageComponent, - ], + imports: [AppTranslocoTestingModule, RouterTestingModule, SettingsPageComponent], + providers: [provideIonicAngular()], }).compileComponents(); fixture = TestBed.createComponent(SettingsPageComponent); diff --git a/src/app/pages/translate/drop-pose-file/drop-pose-file.component.spec.ts b/src/app/pages/translate/drop-pose-file/drop-pose-file.component.spec.ts index 76fce0ad..a9c6d0ab 100644 --- a/src/app/pages/translate/drop-pose-file/drop-pose-file.component.spec.ts +++ b/src/app/pages/translate/drop-pose-file/drop-pose-file.component.spec.ts @@ -2,13 +2,12 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {DropPoseFileComponent} from './drop-pose-file.component'; import {axe, toHaveNoViolations} from 'jasmine-axe'; -import {DropzoneDirective} from '../../../directives/dropzone.directive'; -import {NgxsModule} from '@ngxs/store'; +import {provideStore} from '@ngxs/store'; import {TranslateState} from '../../../modules/translate/translate.state'; import {ngxsConfig} from '../../../app.config'; import {SettingsState} from '../../../modules/settings/settings.state'; -import {provideHttpClientTesting} from '@angular/common/http/testing'; import {provideHttpClient} from '@angular/common/http'; +import {provideHttpClientTesting} from '@angular/common/http/testing'; describe('DropPoseFileComponent', () => { let component: DropPoseFileComponent; @@ -16,12 +15,12 @@ describe('DropPoseFileComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [ - provideStore([SettingsState, TranslateState], ngxsConfig), - DropPoseFileComponent, - DropzoneDirective, + imports: [DropPoseFileComponent], + providers: [ + provideHttpClient(), + provideHttpClientTesting(), + provideStore([SettingsState, TranslateState], ngxsConfig), ], - providers: [provideHttpClient(), provideHttpClientTesting()], }).compileComponents(); fixture = TestBed.createComponent(DropPoseFileComponent); diff --git a/src/app/pages/translate/input/button/button.component.spec.ts b/src/app/pages/translate/input/button/button.component.spec.ts index 139b8a2f..ee911733 100644 --- a/src/app/pages/translate/input/button/button.component.spec.ts +++ b/src/app/pages/translate/input/button/button.component.spec.ts @@ -2,15 +2,16 @@ import {ComponentFixture, fakeAsync, TestBed} from '@angular/core/testing'; import {axe, toHaveNoViolations} from 'jasmine-axe'; import {TranslateInputButtonComponent} from './button.component'; -import {NgxsModule, Store} from '@ngxs/store'; +import {provideStore, Store} from '@ngxs/store'; import {ngxsConfig} from '../../../../app.config'; -import {AppTranslocoTestingModule} from '../../../../core/modules/transloco/transloco-testing.module'; + import {SettingsState} from '../../../../modules/settings/settings.state'; import {SetInputMode} from '../../../../modules/translate/translate.actions'; - -import {TranslateModule} from '../../../../modules/translate/translate.module'; -import {provideHttpClientTesting} from '@angular/common/http/testing'; import {provideHttpClient} from '@angular/common/http'; +import {provideHttpClientTesting} from '@angular/common/http/testing'; +import {provideIonicAngular} from '@ionic/angular/standalone'; +import {AppTranslocoTestingModule} from '../../../../core/modules/transloco/transloco-testing.module'; +import {TranslateState} from '../../../../modules/translate/translate.state'; describe('TranslateInputButtonComponent', () => { let store: Store; @@ -19,14 +20,13 @@ describe('TranslateInputButtonComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [ + imports: [AppTranslocoTestingModule, TranslateInputButtonComponent], + providers: [ + provideHttpClient(), + provideHttpClientTesting(), provideIonicAngular(), - provideTranslocoTesting(), - provideStore([SettingsState], ngxsConfig), - TranslateModule, - TranslateInputButtonComponent, + provideStore([SettingsState, TranslateState], ngxsConfig), ], - providers: [provideHttpClient(), provideHttpClientTesting()], }).compileComponents(); }); diff --git a/src/app/pages/translate/language-selector/language-selector.component.spec.ts b/src/app/pages/translate/language-selector/language-selector.component.spec.ts index 152c42bc..fa3e5dbb 100644 --- a/src/app/pages/translate/language-selector/language-selector.component.spec.ts +++ b/src/app/pages/translate/language-selector/language-selector.component.spec.ts @@ -2,18 +2,16 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {axe, toHaveNoViolations} from 'jasmine-axe'; import {LanguageSelectorComponent} from './language-selector.component'; -import {AppTranslocoTestingModule} from '../../../core/modules/transloco/transloco-testing.module'; + import {NoopAnimationsModule} from '@angular/platform-browser/animations'; -import {NgxsModule} from '@ngxs/store'; +import {provideStore} from '@ngxs/store'; import {SettingsState} from '../../../modules/settings/settings.state'; import {ngxsConfig} from '../../../app.config'; import {TranslateState} from '../../../modules/translate/translate.state'; -import {provideHttpClientTesting} from '@angular/common/http/testing'; - -import {MatTooltipModule} from '@angular/material/tooltip'; -import {MatTabsModule} from '@angular/material/tabs'; -import {MatMenuModule} from '@angular/material/menu'; import {provideHttpClient} from '@angular/common/http'; +import {provideHttpClientTesting} from '@angular/common/http/testing'; +import {provideIonicAngular} from '@ionic/angular/standalone'; +import {AppTranslocoTestingModule} from '../../../core/modules/transloco/transloco-testing.module'; describe('LanguageSelectorComponent', () => { let component: LanguageSelectorComponent; @@ -21,17 +19,13 @@ describe('LanguageSelectorComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [ - provideTranslocoTesting(), - MatTooltipModule, - MatTabsModule, - MatMenuModule, - NoopAnimationsModule, + imports: [AppTranslocoTestingModule, NoopAnimationsModule, LanguageSelectorComponent], + providers: [ + provideHttpClient(), + provideHttpClientTesting(), provideIonicAngular(), - provideStore([SettingsState, TranslateState], ngxsConfig), - LanguageSelectorComponent, + provideStore([SettingsState, TranslateState], ngxsConfig), ], - providers: [provideHttpClient(), provideHttpClientTesting()], }).compileComponents(); }); diff --git a/src/app/pages/translate/language-selector/language-selector.component.ts b/src/app/pages/translate/language-selector/language-selector.component.ts index 026f97b5..410a28ac 100644 --- a/src/app/pages/translate/language-selector/language-selector.component.ts +++ b/src/app/pages/translate/language-selector/language-selector.component.ts @@ -7,7 +7,7 @@ import {BaseComponent} from '../../../components/base/base.component'; import {IANASignedLanguages} from '../../../core/helpers/iana/languages'; import {MatTabsModule} from '@angular/material/tabs'; import {IonButton, IonIcon} from '@ionic/angular/standalone'; -import {MatMenuModule, MatMenuTrigger} from '@angular/material/menu'; +import {MatMenuModule} from '@angular/material/menu'; import {FlagIconComponent} from '../../../components/flag-icon/flag-icon.component'; import {addIcons} from 'ionicons'; import {chevronDown} from 'ionicons/icons'; @@ -18,7 +18,7 @@ const IntlTypeMap: {[key: string]: Intl.DisplayNamesType} = {languages: 'languag selector: 'app-language-selector', templateUrl: './language-selector.component.html', styleUrls: ['./language-selector.component.scss'], - imports: [IonButton, IonIcon, MatMenuTrigger, FlagIconComponent, MatMenuModule, TranslocoDirective, MatTabsModule], + imports: [IonButton, IonIcon, FlagIconComponent, MatMenuModule, TranslocoDirective, MatTabsModule], }) export class LanguageSelectorComponent extends BaseComponent implements OnInit, OnChanges { private store = inject(Store); diff --git a/src/app/pages/translate/language-selectors/language-selectors.component.spec.ts b/src/app/pages/translate/language-selectors/language-selectors.component.spec.ts index 2b38ce09..a1aeaf71 100644 --- a/src/app/pages/translate/language-selectors/language-selectors.component.spec.ts +++ b/src/app/pages/translate/language-selectors/language-selectors.component.spec.ts @@ -1,15 +1,15 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {LanguageSelectorsComponent} from './language-selectors.component'; -import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'; -import {NgxsModule} from '@ngxs/store'; +import {provideStore} from '@ngxs/store'; import {SettingsState} from '../../../modules/settings/settings.state'; import {TranslateState} from '../../../modules/translate/translate.state'; import {ngxsConfig} from '../../../app.config'; import {axe, toHaveNoViolations} from 'jasmine-axe'; +import {provideHttpClient} from '@angular/common/http'; import {provideHttpClientTesting} from '@angular/common/http/testing'; import {AppTranslocoTestingModule} from '../../../core/modules/transloco/transloco-testing.module'; -import {provideHttpClient} from '@angular/common/http'; +import {NoopAnimationsModule} from '@angular/platform-browser/animations'; describe('LanguageSelectorsComponent', () => { let component: LanguageSelectorsComponent; @@ -17,13 +17,12 @@ describe('LanguageSelectorsComponent', () => { beforeEach(() => { TestBed.configureTestingModule({ - schemas: [CUSTOM_ELEMENTS_SCHEMA], - imports: [ - provideStore([SettingsState, TranslateState], ngxsConfig), - provideTranslocoTesting(), - LanguageSelectorsComponent, + imports: [AppTranslocoTestingModule, NoopAnimationsModule, LanguageSelectorsComponent], + providers: [ + provideHttpClient(), + provideHttpClientTesting(), + provideStore([SettingsState, TranslateState], ngxsConfig), ], - providers: [provideHttpClient(), provideHttpClientTesting()], }); fixture = TestBed.createComponent(LanguageSelectorsComponent); component = fixture.componentInstance; diff --git a/src/app/pages/translate/pose-viewers/avatar-pose-viewer/avatar-pose-viewer.component.spec.ts b/src/app/pages/translate/pose-viewers/avatar-pose-viewer/avatar-pose-viewer.component.spec.ts index 78b3afca..b1cb1193 100644 --- a/src/app/pages/translate/pose-viewers/avatar-pose-viewer/avatar-pose-viewer.component.spec.ts +++ b/src/app/pages/translate/pose-viewers/avatar-pose-viewer/avatar-pose-viewer.component.spec.ts @@ -1,16 +1,17 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {axe, toHaveNoViolations} from 'jasmine-axe'; -import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'; -import {AppNgxsModule} from '../../../../core/modules/ngxs/ngxs.module'; import {AvatarPoseViewerComponent} from './avatar-pose-viewer.component'; +import {SettingsState} from '../../../../modules/settings/settings.state'; +import {ngxsConfig} from '../../../../app.config'; +import {provideStore} from '@ngxs/store'; describe('AvatarPoseViewerComponent', () => { let component: AvatarPoseViewerComponent; let fixture: ComponentFixture; beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [AppNgxsModule, AvatarPoseViewerComponent], - schemas: [CUSTOM_ELEMENTS_SCHEMA], + imports: [AvatarPoseViewerComponent], + providers: [provideStore([SettingsState], ngxsConfig)], }).compileComponents(); }); diff --git a/src/app/pages/translate/pose-viewers/human-pose-viewer/human-pose-viewer.component.html b/src/app/pages/translate/pose-viewers/human-pose-viewer/human-pose-viewer.component.html index 427dcda1..656d2c0e 100644 --- a/src/app/pages/translate/pose-viewers/human-pose-viewer/human-pose-viewer.component.html +++ b/src/app/pages/translate/pose-viewers/human-pose-viewer/human-pose-viewer.component.html @@ -1,19 +1,17 @@ + + @if (modelReady && !ready) { - } - - - - @if (!modelReady) { + } @if (!modelReady) { } diff --git a/src/app/pages/translate/pose-viewers/human-pose-viewer/human-pose-viewer.component.spec.ts b/src/app/pages/translate/pose-viewers/human-pose-viewer/human-pose-viewer.component.spec.ts index 103d1bda..83c5d94d 100644 --- a/src/app/pages/translate/pose-viewers/human-pose-viewer/human-pose-viewer.component.spec.ts +++ b/src/app/pages/translate/pose-viewers/human-pose-viewer/human-pose-viewer.component.spec.ts @@ -2,13 +2,11 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {axe, toHaveNoViolations} from 'jasmine-axe'; import {HumanPoseViewerComponent} from './human-pose-viewer.component'; -import {Pix2PixModule} from '../../../../modules/pix2pix/pix2pix.module'; -import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'; -import {NgxsModule} from '@ngxs/store'; +import {provideStore} from '@ngxs/store'; import {SettingsState} from '../../../../modules/settings/settings.state'; import {ngxsConfig} from '../../../../app.config'; import {AppTranslocoTestingModule} from '../../../../core/modules/transloco/transloco-testing.module'; - +import {provideIonicAngular} from '@ionic/angular/standalone'; describe('HumanPoseViewerComponent', () => { let component: HumanPoseViewerComponent; @@ -16,14 +14,8 @@ describe('HumanPoseViewerComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [ - Pix2PixModule, - provideIonicAngular(), - provideStore([SettingsState], ngxsConfig), - provideTranslocoTesting(), - HumanPoseViewerComponent, - ], - schemas: [CUSTOM_ELEMENTS_SCHEMA], + imports: [AppTranslocoTestingModule, HumanPoseViewerComponent], + providers: [provideIonicAngular(), provideStore([SettingsState], ngxsConfig)], }).compileComponents(); }); diff --git a/src/app/pages/translate/pose-viewers/viewer-selector/viewer-selector.component.spec.ts b/src/app/pages/translate/pose-viewers/viewer-selector/viewer-selector.component.spec.ts index ec6bd253..26969236 100644 --- a/src/app/pages/translate/pose-viewers/viewer-selector/viewer-selector.component.spec.ts +++ b/src/app/pages/translate/pose-viewers/viewer-selector/viewer-selector.component.spec.ts @@ -2,13 +2,13 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {axe, toHaveNoViolations} from 'jasmine-axe'; import {ViewerSelectorComponent} from './viewer-selector.component'; -import {AppTranslocoTestingModule} from '../../../../core/modules/transloco/transloco-testing.module'; -import {NgxsModule} from '@ngxs/store'; + +import {provideStore} from '@ngxs/store'; import {SettingsState} from '../../../../modules/settings/settings.state'; import {ngxsConfig} from '../../../../app.config'; import {NoopAnimationsModule} from '@angular/platform-browser/animations'; - -import {MatTooltipModule} from '@angular/material/tooltip'; +import {provideIonicAngular} from '@ionic/angular/standalone'; +import {AppTranslocoTestingModule} from '../../../../core/modules/transloco/transloco-testing.module'; describe('ViewerSelectorComponent', () => { let component: ViewerSelectorComponent; @@ -16,14 +16,8 @@ describe('ViewerSelectorComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [ - provideTranslocoTesting(), - MatTooltipModule, - provideIonicAngular(), - NoopAnimationsModule, - provideStore([SettingsState], ngxsConfig), - ViewerSelectorComponent, - ], + imports: [AppTranslocoTestingModule, NoopAnimationsModule, ViewerSelectorComponent], + providers: [provideIonicAngular(), provideStore([SettingsState], ngxsConfig)], }).compileComponents(); }); diff --git a/src/app/pages/translate/send-feedback/send-feedback.component.spec.ts b/src/app/pages/translate/send-feedback/send-feedback.component.spec.ts index a538354c..aa12cf44 100644 --- a/src/app/pages/translate/send-feedback/send-feedback.component.spec.ts +++ b/src/app/pages/translate/send-feedback/send-feedback.component.spec.ts @@ -10,7 +10,7 @@ describe('SendFeedbackComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [provideTranslocoTesting(), SendFeedbackComponent], + imports: [AppTranslocoTestingModule, SendFeedbackComponent], }).compileComponents(); fixture = TestBed.createComponent(SendFeedbackComponent); diff --git a/src/app/pages/translate/signed-to-spoken/signed-language-input/signed-language-input.component.spec.ts b/src/app/pages/translate/signed-to-spoken/signed-language-input/signed-language-input.component.spec.ts index 2a641240..e480cb4f 100644 --- a/src/app/pages/translate/signed-to-spoken/signed-language-input/signed-language-input.component.spec.ts +++ b/src/app/pages/translate/signed-to-spoken/signed-language-input/signed-language-input.component.spec.ts @@ -1,10 +1,10 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {SignedLanguageInputComponent} from './signed-language-input.component'; -import {provideTranslocoTesting} from '../../../../core/modules/transloco/transloco-testing.module'; -import {UploadComponent} from '../upload/upload.component'; +import {AppTranslocoTestingModule} from '../../../../core/modules/transloco/transloco-testing.module'; import {axe, toHaveNoViolations} from 'jasmine-axe'; import {ngxsConfig} from '../../../../app.config'; import {provideIonicAngular} from '@ionic/angular/standalone'; +import {provideStore} from '@ngxs/store'; describe('SignedLanguageInputComponent', () => { let component: SignedLanguageInputComponent; @@ -12,13 +12,8 @@ describe('SignedLanguageInputComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [ - provideTranslocoTesting(), - provideIonicAngular(), - provideStore([], ngxsConfig), - SignedLanguageInputComponent, - UploadComponent, - ], + imports: [AppTranslocoTestingModule, SignedLanguageInputComponent], + providers: [provideIonicAngular(), provideStore([], ngxsConfig)], }).compileComponents(); fixture = TestBed.createComponent(SignedLanguageInputComponent); diff --git a/src/app/pages/translate/signed-to-spoken/signed-to-spoken.component.spec.ts b/src/app/pages/translate/signed-to-spoken/signed-to-spoken.component.spec.ts index 9f0bd24b..157403cd 100644 --- a/src/app/pages/translate/signed-to-spoken/signed-to-spoken.component.spec.ts +++ b/src/app/pages/translate/signed-to-spoken/signed-to-spoken.component.spec.ts @@ -2,13 +2,12 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {axe, toHaveNoViolations} from 'jasmine-axe'; import {SignedToSpokenComponent} from './signed-to-spoken.component'; -import {NgxsModule} from '@ngxs/store'; +import {provideStore} from '@ngxs/store'; import {VideoState} from '../../../core/modules/ngxs/store/video/video.state'; import {ngxsConfig} from '../../../app.config'; import {SettingsState} from '../../../modules/settings/settings.state'; import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'; import {TranslateState} from '../../../modules/translate/translate.state'; -import {TextToSpeechComponent} from '../../../components/text-to-speech/text-to-speech.component'; import {provideHttpClient} from '@angular/common/http'; import {provideHttpClientTesting} from '@angular/common/http/testing'; @@ -19,12 +18,12 @@ describe('SignedToSpokenComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ schemas: [CUSTOM_ELEMENTS_SCHEMA], - imports: [ - provideStore([SettingsState, TranslateState, VideoState], ngxsConfig), - SignedToSpokenComponent, - TextToSpeechComponent, + imports: [SignedToSpokenComponent], + providers: [ + provideHttpClient(), + provideHttpClientTesting(), + provideStore([SettingsState, TranslateState, VideoState], ngxsConfig), ], - providers: [provideHttpClient(), provideHttpClientTesting()], }).compileComponents(); }); diff --git a/src/app/pages/translate/signed-to-spoken/upload/upload.component.spec.ts b/src/app/pages/translate/signed-to-spoken/upload/upload.component.spec.ts index b4a7866f..6a4405bd 100644 --- a/src/app/pages/translate/signed-to-spoken/upload/upload.component.spec.ts +++ b/src/app/pages/translate/signed-to-spoken/upload/upload.component.spec.ts @@ -2,11 +2,15 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {axe, toHaveNoViolations} from 'jasmine-axe'; import {UploadComponent} from './upload.component'; -import {NgxsModule, Store} from '@ngxs/store'; +import {provideStore, Store} from '@ngxs/store'; import {ngxsConfig} from '../../../../app.config'; import {AppTranslocoTestingModule} from '../../../../core/modules/transloco/transloco-testing.module'; import {SetVideo} from '../../../../core/modules/ngxs/store/video/video.actions'; - +import {provideIonicAngular} from '@ionic/angular/standalone'; +import {TranslateState} from '../../../../modules/translate/translate.state'; +import {provideHttpClientTesting} from '@angular/common/http/testing'; +import {provideHttpClient} from '@angular/common/http'; +import {SettingsState} from '../../../../modules/settings/settings.state'; import createSpy = jasmine.createSpy; function createFileFromMockFile(name: string, body: string, mimeType: string): File { @@ -23,7 +27,13 @@ describe('UploadComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [provideTranslocoTesting(), provideIonicAngular(),provideStore([], ngxsConfig), UploadComponent], + imports: [AppTranslocoTestingModule, UploadComponent], + providers: [ + provideHttpClient(), + provideHttpClientTesting(), + provideIonicAngular(), + provideStore([SettingsState, TranslateState], ngxsConfig), + ], }).compileComponents(); }); diff --git a/src/app/pages/translate/signwriting/sign-writing.component.spec.ts b/src/app/pages/translate/signwriting/sign-writing.component.spec.ts index c1977c2c..df21e0e9 100644 --- a/src/app/pages/translate/signwriting/sign-writing.component.spec.ts +++ b/src/app/pages/translate/signwriting/sign-writing.component.spec.ts @@ -4,13 +4,12 @@ import {axe, toHaveNoViolations} from 'jasmine-axe'; import {SignWritingComponent} from './sign-writing.component'; import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'; import {defineCustomElements as defineCustomElementsSW} from '@sutton-signwriting/sgnw-components/loader'; -import {NgxsModule, Store} from '@ngxs/store'; +import {provideStore, Store} from '@ngxs/store'; import {ngxsConfig} from '../../../app.config'; import {TranslateState, TranslateStateModel} from '../../../modules/translate/translate.state'; -import {MatTooltipModule} from '@angular/material/tooltip'; +import {provideHttpClient} from '@angular/common/http'; import {provideHttpClientTesting} from '@angular/common/http/testing'; import {SettingsState} from '../../../modules/settings/settings.state'; -import {provideHttpClient} from '@angular/common/http'; describe('SignWritingComponent', () => { let component: SignWritingComponent; @@ -26,13 +25,13 @@ describe('SignWritingComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - schemas: [CUSTOM_ELEMENTS_SCHEMA], - imports: [ - provideStore([SettingsState, TranslateState], ngxsConfig), - MatTooltipModule, - SignWritingComponent, + imports: [SignWritingComponent], + providers: [ + provideHttpClient(), + provideHttpClientTesting(), + provideStore([SettingsState, TranslateState], ngxsConfig), ], - providers: [provideHttpClient(), provideHttpClientTesting()], + schemas: [CUSTOM_ELEMENTS_SCHEMA], }).compileComponents(); store = TestBed.inject(Store); diff --git a/src/app/pages/translate/signwriting/sign-writing.component.ts b/src/app/pages/translate/signwriting/sign-writing.component.ts index 19bfcb06..839f82de 100644 --- a/src/app/pages/translate/signwriting/sign-writing.component.ts +++ b/src/app/pages/translate/signwriting/sign-writing.component.ts @@ -8,13 +8,13 @@ import {Store} from '@ngxs/store'; import {takeUntilDestroyed} from '@angular/core/rxjs-interop'; import {DescribeSignWritingSign} from '../../../modules/translate/translate.actions'; import {IonProgressBar} from '@ionic/angular/standalone'; -import {MatTooltip} from '@angular/material/tooltip'; +import {MatTooltipModule} from '@angular/material/tooltip'; @Component({ selector: 'app-sign-writing', templateUrl: './sign-writing.component.html', styleUrls: ['./sign-writing.component.scss'], - imports: [IonProgressBar, MatTooltip], + imports: [IonProgressBar, MatTooltipModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], }) export class SignWritingComponent { diff --git a/src/app/pages/translate/spoken-to-signed/signed-language-output/signed-language-output.component.spec.ts b/src/app/pages/translate/spoken-to-signed/signed-language-output/signed-language-output.component.spec.ts index f19d04f9..c9b81cf6 100644 --- a/src/app/pages/translate/spoken-to-signed/signed-language-output/signed-language-output.component.spec.ts +++ b/src/app/pages/translate/spoken-to-signed/signed-language-output/signed-language-output.component.spec.ts @@ -2,14 +2,13 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {SignedLanguageOutputComponent} from './signed-language-output.component'; import {axe, toHaveNoViolations} from 'jasmine-axe'; -import {NgxsModule} from '@ngxs/store'; +import {provideStore} from '@ngxs/store'; import {SettingsState} from '../../../../modules/settings/settings.state'; import {TranslateState} from '../../../../modules/translate/translate.state'; import {ngxsConfig} from '../../../../app.config'; +import {provideHttpClient} from '@angular/common/http'; import {provideHttpClientTesting} from '@angular/common/http/testing'; import {AppTranslocoTestingModule} from '../../../../core/modules/transloco/transloco-testing.module'; -import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'; -import {provideHttpClient} from '@angular/common/http'; describe('SignedLanguageOutputComponent', () => { let component: SignedLanguageOutputComponent; @@ -17,13 +16,12 @@ describe('SignedLanguageOutputComponent', () => { beforeEach(() => { TestBed.configureTestingModule({ - schemas: [CUSTOM_ELEMENTS_SCHEMA], - imports: [ - provideStore([SettingsState, TranslateState], ngxsConfig), - provideTranslocoTesting(), - SignedLanguageOutputComponent, + imports: [AppTranslocoTestingModule, SignedLanguageOutputComponent], + providers: [ + provideHttpClient(), + provideHttpClientTesting(), + provideStore([SettingsState, TranslateState], ngxsConfig), ], - providers: [provideHttpClient(), provideHttpClientTesting()], }); fixture = TestBed.createComponent(SignedLanguageOutputComponent); component = fixture.componentInstance; diff --git a/src/app/pages/translate/spoken-to-signed/spoken-language-input/desktop-textarea/desktop-textarea.component.html b/src/app/pages/translate/spoken-to-signed/spoken-language-input/desktop-textarea/desktop-textarea.component.html index f5cdca26..f2089176 100644 --- a/src/app/pages/translate/spoken-to-signed/spoken-language-input/desktop-textarea/desktop-textarea.component.html +++ b/src/app/pages/translate/spoken-to-signed/spoken-language-input/desktop-textarea/desktop-textarea.component.html @@ -1,5 +1,4 @@