feat(demo): Convert all components, directives and pipes to standalone

* feat: update Angular v17

* fix(geo): do not upgrade flexsearch since it seem not compatible with TS
nextapps-de/flexsearch#342

* feat(demo): Convert all components, directives and pipes to standalone

* feat(demo): Remove unnecessary NgModule classes

* fix(core/language): TranslateModule call forRoot only once with provideRootTranslation

- IgoLanguageModule only export the TranslateModule

BREAKING CHANGE: IgoLanguageModule don't import TranslateModule.forRoot
defaultLanguageLoader is not exported anymore
- provideDefaultLanguageLoader and provideLanguageLoader are replaced by DEFAULT_LANGUAGE_LOADER and set directly inside the TranslationConfig

* feat: remove extra module and rework navigation

* fix(demo): main clean up

* fix(test)

* fix(workspace): code deleted by error

Author: alecarn

package-lock.json

@@ -19,6 +19,7 @@
     "build": "ng build auth --configuration production",
     "format": "prettier --write ./src/**/*.{ts,js,html,scss,css,json}",
     "test": "ng test auth --watch=false",
+    "test.watch": "ng test auth",
     "watch": "ng build auth --watch"
   },
   "exports": {

packages/auth/package.json

@@ -6,7 +6,7 @@ import {
   ConfigService,
   MONITORING_OPTIONS,
   MessageService,
-  provideMockTranslation
+  provideMockRootTranslation
 } from '@igo2/core';
 
 import { ToastrModule, ToastrService } from 'ngx-toastr';
@@ -22,8 +22,8 @@ const initialize = (
   TestBed.configureTestingModule({
     imports: [
       HttpClientModule,
+      provideMockRootTranslation(),
       IgoAuthModule,
-      provideMockTranslation(),
       ToastrModule
     ],
     providers: [

packages/auth/src/lib/auth-monitoring/auth-monitoring.service.spec.ts

@@ -4,23 +4,21 @@ import { TestBed, inject } from '@angular/core/testing';
 import {
   IgoLanguageModule,
   IgoMessageModule,
-  provideMockTranslation
+  provideMockRootTranslation
 } from '@igo2/core';
 
-import { TranslateService } from '@ngx-translate/core';
-
 import { AuthService } from './auth.service';
 
 describe('AuthService', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [
         HttpClientModule,
-        provideMockTranslation(),
+        provideMockRootTranslation(),
         IgoLanguageModule,
         IgoMessageModule
       ],
-      providers: [AuthService, TranslateService]
+      providers: [AuthService]
     });
   });
 

packages/auth/src/lib/shared/auth.service.spec.ts

@@ -6,7 +6,8 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 
-import { TranslateModule } from '@ngx-translate/core';
+import { IgoLanguageModule } from '@igo2/core';
+
 import { ColorChromeModule } from 'ngx-color/chrome';
 
 import { ColorPickerFormFieldComponent } from './color-picker-form-field.component';
@@ -21,7 +22,7 @@ import { ColorPickerFormFieldComponent } from './color-picker-form-field.compone
     CommonModule,
     OverlayModule,
     ColorChromeModule,
-    TranslateModule
+    IgoLanguageModule
   ],
   declarations: [ColorPickerFormFieldComponent],
   exports: [ColorPickerFormFieldComponent]

packages/common/src/lib/color-picker-form-field/color-picker-form-field.module.ts

@@ -695,8 +695,8 @@ export class EntityTableComponent implements OnInit, OnChanges, OnDestroy {
     return selectionCount === 0
       ? states.None
       : selectionCount === this.store.stateView.count
-      ? states.All
-      : states.Some;
+        ? states.All
+        : states.Some;
   }
 
   /**

packages/common/src/lib/entity/entity-table/entity-table.component.ts

@@ -4,6 +4,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatNativeDateModule } from '@angular/material/core';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
@@ -45,7 +46,8 @@ import { EntityTableComponent } from './entity-table.component';
     ReactiveFormsModule,
     MatInputModule,
     MatDatepickerModule,
-    MatTooltipModule
+    MatTooltipModule,
+    MatNativeDateModule
   ],
   exports: [EntityTableComponent],
   declarations: [EntityTableComponent, EntityTableRowDirective]

packages/common/src/lib/entity/entity-table/entity-table.module.ts

@@ -313,10 +313,10 @@ export class InteractiveTourService {
           i === 0
             ? 'first'
             : i + 1 === tourConfig.steps.length
-            ? 'last'
-            : tourConfig.steps[i].noBackButton
-            ? 'noBackButton'
-            : undefined
+              ? 'last'
+              : tourConfig.steps[i].noBackButton
+                ? 'noBackButton'
+                : undefined
         ),
         classes: step.class,
         highlightClass: step.highlightClass,

packages/common/src/lib/interactive-tour/interactive-tour.service.ts

@@ -50,7 +50,7 @@ const dbConfig: DBConfig = {
     IgoConfigModule.forRoot(),
     IgoErrorModule.forRoot(),
     provideRootTranslation(),
-    IgoMessageModule.forRoot(),
+    IgoMessageModule,
     NgxIndexedDBModule.forRoot(dbConfig)
   ],
   declarations: [],

packages/core/src/lib/core.module.ts

@@ -1,5 +1,6 @@
 export * from './language.interface';
 export * from './language.loader';
 export * from './language.provider';
+export * from './language-mock.provider';
 export * from './language.service';
 export * from './missing-translation.guard';

packages/core/src/lib/language/shared/index.ts

@@ -0,0 +1,9 @@
+import { ImportProvidersSource, Provider } from '@angular/core';
+
+import { TranslateModule } from '@ngx-translate/core';
+
+export function provideMockRootTranslation(
+  loader?: Provider
+): ImportProvidersSource {
+  return TranslateModule.forRoot();
+}

packages/core/src/lib/language/shared/language-mock.provider.ts

@@ -21,12 +21,6 @@ export function provideRootTranslation(
   return TranslateModule.forRoot(setTranslationConfig(loader));
 }
 
-export function provideMockTranslation(
-  loader?: Provider
-): ImportProvidersSource {
-  return TranslateModule.forRoot();
-}
-
 export const setTranslationConfig = (
   loader?: Provider
 ): TranslateModuleConfig => ({

packages/core/src/lib/language/shared/language.provider.ts

@@ -0,0 +1 @@
+export * from './monitoring-mock';

packages/core/src/lib/monitoring/__mocks__/index.ts

@@ -7,7 +7,6 @@ import { ObjectUtils } from '@igo2/utils';
 import { BehaviorSubject, Observable, forkJoin, of } from 'rxjs';
 import { catchError, map } from 'rxjs/operators';
 
-import { ProjectionService } from '../../map/shared/projection.service';
 import { CapabilitiesService } from './capabilities.service';
 import {
   AnyDataSourceOptions,
@@ -55,7 +54,6 @@ export class DataSourceService {
     private wfsDataSourceService: WFSService,
     private languageService: LanguageService,
     private messageService: MessageService,
-    private projectionService: ProjectionService,
     private authInterceptor?: AuthInterceptor
   ) {}
 

packages/geo/src/lib/datasource/shared/datasource.service.ts

@@ -16,6 +16,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 
 import { IgoLanguageModule } from '@igo2/core';
 
+import { IgoSearchModule } from '../search/search.module';
 import { DirectionsButtonsComponent } from './directions-buttons/directions-buttons.component';
 import { DirectionsInputsComponent } from './directions-inputs/directions-inputs.component';
 import { DirectionsResultsComponent } from './directions-results/directions-results.component';
@@ -39,7 +40,8 @@ import { provideDirectionsSourceService } from './shared/directions-source.servi
     MatSlideToggleModule,
     MatTooltipModule,
     MatAutocompleteModule,
-    IgoLanguageModule
+    IgoLanguageModule,
+    IgoSearchModule.forRoot()
   ],
   exports: [
     DirectionsComponent,

packages/geo/src/lib/directions/directions.module.ts

@@ -15,8 +15,6 @@ import { MatRadioModule } from '@angular/material/radio';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { BrowserModule } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { IgoEntityTableModule } from '@igo2/common';
 import { IgoLanguageModule } from '@igo2/core';
@@ -49,8 +47,6 @@ import { DrawComponent } from './draw.component';
     MatDialogModule,
     IgoLanguageModule,
     IgoEntityTableModule,
-    BrowserModule,
-    BrowserAnimationsModule,
     MatRadioModule,
     MatCheckboxModule
   ],

packages/geo/src/lib/draw/draw/draw.module.ts

@@ -18,62 +18,38 @@ <h5 class="mat-subtitle-1 m-b-0">{{ version.lib }}</h5>
       [fixedInViewport]="mobileQuery.matches"
       fixedTopGap="48"
     >
-      <mat-nav-list>
-        <a mat-list-item routerLink=".">Home</a>
-
-        <hr />
-
-        <a mat-list-item routerLink="activity">Activity</a>
-        <a mat-list-item routerLink="config">Config</a>
-        <a mat-list-item routerLink="language">Language</a>
-        <a mat-list-item routerLink="media">Media</a>
-        <a mat-list-item routerLink="message">Message</a>
-        <a mat-list-item routerLink="monitoring">Monitoring</a>
-        <a mat-list-item routerLink="request">Request</a>
-        <a mat-list-item routerLink="theme">Themes</a>
-
-        <hr />
-
-        <a mat-list-item routerLink="auth-form">Authentification</a>
-
-        <hr />
-
-        <a mat-list-item routerLink="action">Action</a>
-        <a mat-list-item routerLink="dialog">Dialogs</a>
-        <a mat-list-item routerLink="dynamic-component">Dynamic Component</a>
-        <a mat-list-item routerLink="entity-table">Entity Table</a>
-        <a mat-list-item routerLink="entity-selector">Entity Selector</a>
-        <a mat-list-item routerLink="form">Form</a>
-        <a mat-list-item routerLink="table">Table</a>
-        <a mat-list-item routerLink="tool">Tool</a>
-        <a mat-list-item routerLink="widget">Widget</a>
-
-        <hr />
-
-        <a mat-list-item routerLink="simple-map">Simple map</a>
-        <a mat-list-item routerLink="layer">Layer</a>
-        <a mat-list-item routerLink="legend">Legend</a>
-        <a mat-list-item routerLink="overlay">Overlay</a>
-        <a mat-list-item routerLink="geometry">Geometry</a>
-        <a mat-list-item routerLink="feature">Feature</a>
-        <a mat-list-item routerLink="hover">Hover</a>
-        <a mat-list-item routerLink="measure">Measure</a>
-        <a mat-list-item routerLink="draw">Draw</a>
-        <a mat-list-item routerLink="query">Query</a>
-        <a mat-list-item routerLink="catalog">Catalog</a>
-        <a mat-list-item routerLink="search">Search</a>
-        <a mat-list-item routerLink="print">Print</a>
-        <a mat-list-item routerLink="import-export">Import/Export</a>
-        <a mat-list-item routerLink="directions">Directions</a>
-        <a mat-list-item routerLink="time-filter">Time filter</a>
-        <a mat-list-item routerLink="ogc-filter">OGC filter</a>
-        <a mat-list-item routerLink="spatial-filter">Spatial filter</a>
-        <a mat-list-item routerLink="workspace">Workspace</a>
-
-        <hr />
-
-        <a mat-list-item routerLink="context">Context</a>
-      </mat-nav-list>
+      <mat-accordion displayMode="flat" multi>
+        <ng-container *ngFor="let routeConfig of routesConfig">
+          <ng-container *ngIf="!routeConfig.children; else routeWithChildren">
+            <mat-nav-list>
+              <a
+                mat-list-item
+                [routerLink]="routeConfig.path"
+                class="p-h-24 m-t-8"
+                >{{ routeConfig.title }}</a
+              >
+            </mat-nav-list>
+            <mat-divider></mat-divider>
+          </ng-container>
+          <ng-template #routeWithChildren>
+            <mat-expansion-panel expanded>
+              <mat-expansion-panel-header>
+                <mat-panel-title> {{ routeConfig.title }} </mat-panel-title>
+              </mat-expansion-panel-header>
+              <mat-nav-list>
+                <a
+                  *ngFor="let route of routeConfig.children"
+                  mat-list-item
+                  [routerLink]="routeConfig.path + '/' + route.path"
+                  >{{ route.title }}</a
+                >
+              </mat-nav-list>
+            </mat-expansion-panel>
+
+            <mat-divider></mat-divider>
+          </ng-template>
+        </ng-container>
+      </mat-accordion>
     </mat-sidenav>
 
     <mat-sidenav-content>

projects/demo/src/app/app-routing.module.ts

@@ -17,6 +17,23 @@
     margin: 0;
   }
 }
+mat-panel-title {
+  font-size: 14px;
+}
+
+mat-nav-list {
+  padding: 0;
+}
+
+mat-expansion-panel {
+  box-shadow: unset !important;
+
+  ::ng-deep {
+    .mat-expansion-panel-body {
+      padding: 0 8px 16px;
+    }
+  }
+}
 
 .example-is-mobile .example-toolbar {
   position: fixed;

projects/demo/src/app/app.component.html

@@ -16,7 +16,7 @@ import { AppComponent } from './app.component';
 describe('AppComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [
+    imports: [
         RouterTestingModule,
         NoopAnimationsModule,
         MatCardModule,
@@ -26,10 +26,10 @@ describe('AppComponent', () => {
         MatSidenavModule,
         MatListModule,
         MatIconTestingModule,
-        IgoAuthModule
-      ],
-      declarations: [AppComponent]
-    }).compileComponents();
+        IgoAuthModule,
+        AppComponent
+    ]
+}).compileComponents();
   }));
   it('should create the app', waitForAsync(() => {
     const fixture = TestBed.createComponent(AppComponent);