@sumaris-net/ngx-components 18.12.13 → 18.14.0

package/src/app/app.component.ts

@@ -0,0 +1,257 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, OnInit } from '@angular/core';
+import { ConfigService } from './core/services/config.service';
+import { DOCUMENT } from '@angular/common';
+import { Configuration } from './core/services/model/config.model';
+import { PlatformService } from './core/services/platform.service';
+import { throttleTime } from 'rxjs/operators';
+import { FormFieldDefinition } from './shared/form/field.model';
+import { getColorContrast, getColorShade, getColorTint, hexToRgbArray, mixHex } from './shared/graph/colors.utils';
+import { AccountService } from './core/services/account.service';
+import { LocalSettingsService } from './core/services/local-settings.service';
+import { MatIconRegistry } from '@angular/material/icon';
+import { DomSanitizer } from '@angular/platform-browser';
+import { isNotNil, isNotNilOrBlank, joinPropertiesPath } from './shared/functions';
+import { Department } from './core/services/model/department.model';
+
+import { CORE_CONFIG_OPTIONS } from './core/services/config/core.config';
+import { PersonService } from './admin/services/person.service';
+import { LoadResult } from './shared/services/entity-service.class';
+import { Person } from './core/services/model/person.model';
+import { TEST_LOCAL_SETTINGS_OPTIONS } from './core/services/testing/local-settings.config';
+import { PersonFilter } from './admin/services/filter/person.filter';
+import { SortDirection } from '@angular/material/sort';
+import { Environment, ENVIRONMENT } from '../environments/environment.class';
+import { NavController } from '@ionic/angular';
+import { SOCIAL_CONFIG_OPTIONS } from './social/config/social.config';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AppComponent implements OnInit {
+  protected logo: string;
+  protected appName: string;
+  protected enableNotificationIcons = false;
+
+  constructor(
+    @Inject(DOCUMENT) private _document: Document,
+    protected platform: PlatformService,
+    private accountService: AccountService,
+    private configService: ConfigService,
+    private personService: PersonService,
+    private settings: LocalSettingsService,
+    private matIconRegistry: MatIconRegistry,
+    private domSanitizer: DomSanitizer,
+    protected navController: NavController,
+    @Inject(ENVIRONMENT) protected environment: Environment,
+    private cd: ChangeDetectorRef
+  ) {}
+
+  async ngOnInit() {
+    console.info('[app] Starting...');
+    await this.platform.start();
+
+    // Listen for config changed
+    this.configService.config.subscribe((config) => this.onConfigChanged(config));
+
+    // Add local settings options
+    this.addLocalSettingsOptions();
+
+    // Add additional account fields
+    this.addAccountFields();
+
+    // Add custom icons
+    this.addCustomSVGIcons();
+
+    console.info('[app] Starting [OK]');
+
+    // Redirect to default route
+    if (this.environment.defaultRoute) {
+      console.info(`[app] Redirecting to default route: ${this.environment.defaultRoute}`);
+      await this.navController.navigateRoot(this.environment.defaultRoute);
+    }
+  }
+
+  onActivate(event) {
+    // Make sure to scroll on top before changing state
+    // See https://stackoverflow.com/questions/48048299/angular-5-scroll-to-top-on-every-route-click
+    const scrollToTop = window.setInterval(() => {
+      const pos = window.scrollY;
+      if (pos > 0) {
+        window.scrollTo(0, pos - 20); // how far to scroll on each step
+      } else {
+        window.clearInterval(scrollToTop);
+      }
+    }, 16);
+  }
+
+  protected onConfigChanged(config: Configuration) {
+    this.logo = config.smallLogo || config.largeLogo;
+    this.appName = config.label;
+
+    // Set document title
+    const title = isNotNil(config.name) ? `${config.label} - ${config.name}` : config.label;
+    this._document.getElementById('appTitle').textContent = title;
+
+    if (config.properties) {
+      // Set document favicon
+      const favicon = config.getProperty(CORE_CONFIG_OPTIONS.FAVICON);
+      if (isNotNil(favicon)) {
+        this._document.getElementById('appFavicon').setAttribute('href', favicon);
+      }
+
+      // Enable user event and notification icons
+      this.enableNotificationIcons = config.getPropertyAsBoolean(SOCIAL_CONFIG_OPTIONS.ENABLE_NOTIFICATION_ICONS);
+
+      this.updateTheme({
+        colors: {
+          primary: config.properties['sumaris.color.primary'],
+          secondary: config.properties['sumaris.color.secondary'],
+          tertiary: config.properties['sumaris.color.tertiary'],
+          success: config.properties['sumaris.color.success'],
+          warning: config.properties['sumaris.color.warning'],
+          accent: config.properties['sumaris.color.accent'],
+          danger: config.properties['sumaris.color.danger'],
+        },
+        vars: {
+          '--app-form-field-background-color': config.getProperty(CORE_CONFIG_OPTIONS.FORM_FIELD_BACKGROUND_COLOR),
+          '--app-form-field-focus-background-color': config.getProperty(CORE_CONFIG_OPTIONS.FORM_FIELD_FOCUS_BACKGROUND_COLOR),
+          '--app-form-field-disabled-background-color': config.getProperty(CORE_CONFIG_OPTIONS.FORM_FIELD_DISABLED_BACKGROUND_COLOR),
+        },
+      });
+
+      this.cd.markForCheck();
+    }
+  }
+
+  protected updateTheme(options: { darkMode?: boolean; colors?: { [color: string]: string }; vars?: { [color: string]: string } }) {
+    if (!options) return;
+
+    console.info('[app] Changing theme...', options);
+
+    // Set colors
+    const style = document.documentElement.style;
+    if (options.colors) {
+      // Add 100 & 900 color for primary and secondary color
+      ['primary', 'secondary'].forEach((colorName) => {
+        const color = options.colors[colorName];
+        options.colors[colorName + '100'] = (color && mixHex('#ffffff', color, 10)) || undefined;
+        options.colors[colorName + '900'] = (color && mixHex('#000000', color, 12)) || undefined;
+      });
+
+      Object.getOwnPropertyNames(options.colors).forEach((colorName) => {
+        // Remove existing value
+        style.removeProperty(`--ion-color-${colorName}`);
+        style.removeProperty(`--ion-color-${colorName}-rgb`);
+        style.removeProperty(`--ion-color-${colorName}-contrast`);
+        style.removeProperty(`--ion-color-${colorName}-contrast-rgb`);
+        style.removeProperty(`--ion-color-${colorName}-shade`);
+        style.removeProperty(`--ion-color-${colorName}-tint`);
+
+        // Set new value, if any
+        const color = options.colors[colorName];
+        if (isNotNil(color)) {
+          // Base color
+          style.setProperty(`--ion-color-${colorName}`, color);
+          style.setProperty(`--ion-color-${colorName}-rgb`, hexToRgbArray(color).join(', '));
+
+          // Contrast color
+          const contrastColor = getColorContrast(color, true);
+          style.setProperty(`--ion-color-${colorName}-contrast`, contrastColor);
+          style.setProperty(`--ion-color-${colorName}-contrast-rgb`, hexToRgbArray(contrastColor).join(', '));
+
+          // Shade color
+          style.setProperty(`--ion-color-${colorName}-shade`, getColorShade(color));
+
+          // Tint color
+          style.setProperty(`--ion-color-${colorName}-tint`, getColorTint(color));
+        }
+      });
+    }
+
+    // Set CSS vars
+    if (options.vars) {
+      Object.getOwnPropertyNames(options.vars).forEach((varName) => {
+        // Set new value, if any
+        const value = options.vars[varName];
+        if (isNotNilOrBlank(value)) {
+          // Base color
+          style.setProperty(varName, value);
+        }
+      });
+    }
+  }
+
+  protected addLocalSettingsOptions() {
+    console.debug('[app] [test] Add local settings options...');
+
+    const suggestPersonFn = async (value: any, filter: Partial<PersonFilter>, sortBy: keyof Person, sortDirection: SortDirection) => {
+      await this.personService.ready();
+      if (!this.accountService.isLogin()) return <LoadResult<Person>>{ data: [] };
+      return this.personService.suggest(value, filter, sortBy, sortDirection);
+    };
+
+    // Add option with type 'entity'
+    {
+      const optionDef = <FormFieldDefinition>{ ...TEST_LOCAL_SETTINGS_OPTIONS.DUMMY_OPTION_ENTITY };
+      optionDef.autocomplete.suggestFn = suggestPersonFn;
+      this.settings.registerOption(optionDef);
+    }
+
+    // Add option with type 'entities'
+    {
+      const optionDef = <FormFieldDefinition>{ ...TEST_LOCAL_SETTINGS_OPTIONS.DUMMY_OPTION_ENTITIES };
+      optionDef.autocomplete.suggestFn = suggestPersonFn;
+      this.settings.registerOption(optionDef);
+    }
+  }
+
+  protected addAccountFields() {
+    console.debug('[app] Add additional account fields...');
+
+    const attributes = this.settings.getFieldDisplayAttributes('department');
+    const departmentDefinition = <FormFieldDefinition>{
+      key: 'department',
+      label: 'USER.DEPARTMENT',
+      type: 'entity',
+      autocomplete: {
+        items: [
+          Department.fromObject({ id: 1, label: 'E-IS', name: 'Environmental Information Systems' }),
+          Department.fromObject({ id: 2, label: 'UNK', name: 'Other' }),
+        ],
+        filter: { entityName: 'Department' },
+        displayWith: (value) => value && joinPropertiesPath(value, attributes),
+        attributes,
+      },
+      extra: {
+        registration: {
+          required: true,
+        },
+        account: {
+          required: true,
+          disabled: true,
+        },
+      },
+    };
+
+    // Add account field: department
+    this.accountService.registerAdditionalField(departmentDefinition);
+
+    // When settings changed
+    this.settings.onChange.pipe(throttleTime(400)).subscribe(() => {
+      // Update the display fn
+      const attributes = this.settings.getFieldDisplayAttributes('department');
+      departmentDefinition.autocomplete.attributes = attributes;
+      departmentDefinition.autocomplete.displayWith = (value) => (value && joinPropertiesPath(value, attributes)) || undefined;
+    });
+  }
+
+  protected addCustomSVGIcons() {
+    ['fish'] // Example
+      .forEach((filename) =>
+        this.matIconRegistry.addSvgIcon(filename, this.domSanitizer.bypassSecurityTrustResourceUrl(`../assets/icons/${filename}.svg`))
+      );
+  }
+}

package/src/app/app.module.ts

@@ -0,0 +1,366 @@
+import { APP_BASE_HREF } from '@angular/common';
+import { BrowserModule, HAMMER_GESTURE_CONFIG, HammerModule } from '@angular/platform-browser';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule, provideExperimentalZonelessChangeDetection } from '@angular/core';
+import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
+import { HTTP_INTERCEPTORS, HttpClient, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { MAT_MOMENT_DATE_ADAPTER_OPTIONS, MomentDateAdapter } from '@angular/material-moment-adapter';
+import { APP_LOCAL_SETTINGS, APP_LOCAL_SETTINGS_OPTIONS, LocalSettingsOptions } from './core/services/local-settings.service';
+import { APP_LOCALES, LocalSettings } from './core/services/model/settings.model';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { APP_CONFIG_OPTIONS } from './core/services/config.service';
+import { APP_HOME_BUTTONS, APP_HOME_CONFIG, IHomePageConfig } from './core/home/home';
+import { CORE_CONFIG_OPTIONS } from './core/services/config/core.config';
+import { IonicModule } from '@ionic/angular';
+import { CacheModule } from 'ionic-cache';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { SharedModule } from './shared/shared.module';
+import { APP_LOCAL_STORAGE_TYPE_POLICIES } from './core/services/storage/entities-storage.service';
+import { AppGestureConfig } from './shared/gesture/gesture-config';
+import { APP_GRAPHQL_TYPE_POLICIES } from './core/graphql/graphql.service';
+import { DATE_ISO_PATTERN } from './shared/constants';
+import { JDENTICON_CONFIG } from 'ngx-jdenticon';
+import { APP_ABOUT_DEVELOPERS, APP_ABOUT_PARTNERS } from './core/about/about.modal';
+import { Department } from './core/services/model/department.model';
+import { CORE_TESTING_PAGES } from './core/core.testing.module';
+import { AppComponent } from './app.component';
+import { AppRoutingModule } from './app-routing.module';
+import { CoreModule } from './core/core.module';
+import { environment } from '../environments/environment';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { SHARED_TESTING_PAGES } from './shared/shared.testing.module';
+import { APP_TESTING_PAGES } from './shared/testing/tests.page';
+import { SOCIAL_TESTING_PAGES } from './social/social.testing.module';
+import { APP_MENU_OPTIONS } from './core/menu/menu.service';
+import { IMenuItem, MenuOptions } from './core/menu/menu.model';
+import { APP_USER_EVENT_SERVICE } from './social/user-event/user-event.service';
+import { UserEventTestService } from './social/user-event/testing/user-event.testing.service';
+import { UserEventModule } from './social/user-event/user-event.module';
+import { JobModule } from './social/job/job.module';
+import { APP_JOB_PROGRESSION_SERVICE } from './social/job/progression/job-progression.service';
+import { JobProgressionTestService } from './social/job/testing/job-progression.testing.service';
+import { IonicStorageModule } from '@ionic/storage-angular';
+import { ApolloModule } from 'apollo-angular';
+import { AudioManagement } from '@awesome-cordova-plugins/audio-management/ngx';
+import { StorageService } from './shared/storage/storage.service';
+import { APP_STORAGE } from './shared/storage/storage.utils';
+import { Downloader } from '@awesome-cordova-plugins/downloader/ngx';
+import { APP_PROGRESS_BAR_SERVICE, ProgressBarService } from './shared/services/progress-bar.service';
+import { ProgressInterceptor } from './shared/interceptors/progess.interceptor';
+import { APP_USER_SETTINGS_OPTIONS, APP_USER_TOKEN_SCOPES, UserSettingsOptions } from './core/services/account.service';
+import { TokenScope } from './core/services/model/token.model';
+import { APP_SETTINGS_MENU_ITEMS } from './core/settings/settings.page';
+import { APP_LOGGING_SERVICE, LoggingService } from './shared/logging/logging-service.class';
+import { isAndroid, isCapacitor, isIOS, isMobile } from './shared/platforms';
+import { MAT_FORM_FIELD_DEFAULT_OPTIONS, MatFormFieldDefaultOptions } from '@angular/material/form-field';
+import { MAT_TABS_CONFIG, MatTabsConfig } from '@angular/material/tabs';
+import { EnvironmentHttpLoader, EnvironmentLoader } from '../environments/environment.loader';
+import { APP_NAMED_FILTER_SERVICE } from './shared/named-filter/named-filter.service';
+import { DummyNamedFilterService } from './shared/named-filter/testing/named-filter.testing.service';
+import { APP_HOTKEYS_CONFIG, HotKeysConfig } from './shared/hotkeys/hotkeys.service';
+import { TEST_USER_SETTINGS_OPTIONS } from './core/services/testing/user-settings.config';
+import { SharedMarkdownModule } from './shared/markdown/markdown.module';
+import { APP_FEED_SERVICE } from './social/feed/feed.service';
+import { DiscourseFeedService } from './social/feed/discourse/discourse-feed.service';
+
+@NgModule({
+  declarations: [AppComponent],
+  bootstrap: [AppComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  imports: [
+    BrowserModule,
+    BrowserAnimationsModule,
+    ApolloModule,
+    IonicModule.forRoot({
+      innerHTMLTemplatesEnabled: true,
+      platform: {
+        mobile: isMobile,
+        capacitor: isCapacitor,
+        android: isAndroid,
+        ios: isIOS,
+      },
+    }),
+    CacheModule.forRoot({
+      keyPrefix: '', // For compatibility
+      ...environment.cache,
+    }),
+    IonicStorageModule.forRoot({
+      name: 'ngx-sumaris-components', // default
+      ...environment.storage,
+    }),
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (httpClient: HttpClient) => new TranslateHttpLoader(httpClient, './assets/i18n/', `.json`),
+        deps: [HttpClient],
+      },
+    }),
+    SharedMarkdownModule.forRoot(),
+    // Need for tap event, in app-toolbar
+    HammerModule,
+    // functional modules
+    SharedModule.forRoot({
+      loader: {
+        provide: EnvironmentLoader,
+        useFactory: (httpClient: HttpClient) => new EnvironmentHttpLoader(httpClient, environment),
+        deps: [HttpClient],
+      },
+    }),
+    CoreModule.forRoot(),
+    AppRoutingModule,
+    UserEventModule,
+    JobModule,
+  ],
+  providers: [
+    // Cordova plugins
+    AudioManagement,
+    Downloader,
+
+    // Angular material config
+    {
+      provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
+      useValue: <MatFormFieldDefaultOptions>{
+        appearance: 'fill',
+        // TODO : Test if it suitable
+        // appearance: 'outline',
+        //subscriptSizing: 'dynamic',
+      },
+    },
+    {
+      provide: MAT_TABS_CONFIG,
+      useValue: <MatTabsConfig>{
+        stretchTabs: false,
+      },
+    },
+    // FIXME - Workaround find at : https://github.com/angular/components/issues/26000#issuecomment-1563107933
+    // {
+    //   provide: MAT_SELECT_CONFIG,
+    //   useValue: <MatSelectConfig>{
+    //     overlayPanelClass: 'mat-select-panel-fit-content',
+    //   },
+    // },
+    //{provide: APP_BASE_HREF, useValue: (environment.baseUrl || '/')},
+    {
+      provide: APP_BASE_HREF,
+      useFactory: () => {
+        try {
+          return document.getElementsByTagName('base')[0].href;
+        } catch (err) {
+          console.error(err);
+          return environment.baseUrl || '/';
+        }
+      },
+    },
+    { provide: APP_STORAGE, useExisting: StorageService },
+    //{ provide: ErrorHandler, useClass: IonicErrorHandler },
+    { provide: APP_PROGRESS_BAR_SERVICE, useClass: ProgressBarService },
+    { provide: HTTP_INTERCEPTORS, useClass: ProgressInterceptor, multi: true, deps: [APP_PROGRESS_BAR_SERVICE] },
+    {
+      provide: APP_LOCALES,
+      useValue: [
+        {
+          key: 'fr',
+          value: 'Français',
+          country: 'fr',
+        },
+        {
+          key: 'en',
+          value: 'English (UK)',
+          country: 'gb',
+        },
+        {
+          key: 'en-US',
+          value: 'English (US)',
+          country: 'us',
+        },
+      ],
+    },
+    { provide: MAT_DATE_LOCALE, useValue: environment.defaultLocale || 'en' },
+    {
+      provide: MAT_DATE_FORMATS,
+      useValue: {
+        parse: {
+          dateInput: DATE_ISO_PATTERN,
+        },
+        display: {
+          dateInput: 'L',
+          monthYearLabel: 'MMM YYYY',
+          dateA11yLabel: 'LL',
+          monthYearA11yLabel: 'MMMM YYYY',
+        },
+      },
+    },
+    {
+      provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS,
+      useValue: { strict: false },
+    },
+    { provide: MomentDateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS] },
+    { provide: DateAdapter, useExisting: MomentDateAdapter },
+    // Configure hammer gesture
+    { provide: HAMMER_GESTURE_CONFIG, useClass: AppGestureConfig },
+    // Settings default values
+    {
+      provide: APP_LOCAL_SETTINGS,
+      useValue: <Partial<LocalSettings>>{
+        pageHistoryMaxSize: 3,
+      },
+    },
+    // Local setting options
+    {
+      provide: APP_LOCAL_SETTINGS_OPTIONS,
+      useValue: <Partial<LocalSettingsOptions>>{
+        serializeAsString: true,
+        options: {
+          // Dynamic options are now inserted by app.component
+          //...TEST_LOCAL_SETTINGS_OPTIONS,
+        }, // options definition
+      },
+    },
+    // User options (comment out to enable user properties in AccountPage)
+    {
+      provide: APP_USER_SETTINGS_OPTIONS,
+      useValue: <UserSettingsOptions>{
+        options: {
+          ...TEST_USER_SETTINGS_OPTIONS,
+        },
+        remoteLocalSettingsKeys: <(keyof LocalSettings)[]>[
+          // Properties used by SUMARiS
+          'locale',
+          'latLongFormat',
+          // Properties used by Quadrige
+          'pages',
+          'pageHistory',
+          'properties',
+        ],
+      },
+    },
+    // Token Scopes
+    {
+      provide: APP_USER_TOKEN_SCOPES,
+      useValue: <TokenScope[]>[
+        {
+          id: 'read_api',
+          flag: 1 << 0,
+          name: 'ACCOUNT.TOKENS.SCOPES.READ',
+        },
+        {
+          id: 'write_api',
+          flag: 1 << 1,
+          name: 'ACCOUNT.TOKENS.SCOPES.WRITE',
+        },
+        {
+          id: 'admin_api',
+          flag: 1 << 2,
+          name: 'ACCOUNT.TOKENS.SCOPES.ADMIN',
+        },
+      ],
+    },
+    // Config options definition (Core + trip)
+    { provide: APP_CONFIG_OPTIONS, useValue: CORE_CONFIG_OPTIONS },
+    // Menu options
+    {
+      provide: APP_MENU_OPTIONS,
+      useValue: <MenuOptions>{
+        enableSubMenus: true,
+        enableSubMenuIcon: true,
+      },
+    },
+    // Home page options
+    { provide: APP_HOME_BUTTONS, useValue: [] },
+    {
+      provide: APP_HOME_CONFIG,
+      useValue: <IHomePageConfig>{
+        showNotificationIcon: 'mobile',
+        autoHideNotificationIcon: 'mobile',
+      },
+    },
+    { provide: APP_FEED_SERVICE, useClass: DiscourseFeedService },
+
+    // Settings menu options
+    {
+      provide: APP_SETTINGS_MENU_ITEMS,
+      useValue: <IMenuItem[]>[
+        { title: 'MENU.TESTING', path: '/testing', icon: 'code', color: 'danger', ifProperty: 'sumaris.testing.enable', profile: 'SUPERVISOR' },
+      ],
+    },
+    // Entities Apollo cache options
+    { provide: APP_GRAPHQL_TYPE_POLICIES, useValue: {} },
+    // Entities storage options
+    { provide: APP_LOCAL_STORAGE_TYPE_POLICIES, useValue: {} },
+    // Logging service
+    { provide: APP_LOGGING_SERVICE, useClass: LoggingService },
+    // User event service (for test only - app defined their own service)
+    { provide: APP_USER_EVENT_SERVICE, useClass: UserEventTestService },
+    // Job progression service (test)
+    { provide: APP_JOB_PROGRESSION_SERVICE, useClass: JobProgressionTestService },
+    // About developers
+    {
+      provide: APP_ABOUT_DEVELOPERS,
+      useValue: <Partial<Department>[]>[
+        { siteUrl: 'https://www.e-is.pro', logo: 'assets/img/logo/logo-eis_50px.png', label: 'Environmental Information Systems' },
+      ],
+    },
+    // About partners
+    {
+      provide: APP_ABOUT_PARTNERS,
+      useValue: <Partial<Department>[]>[
+        { siteUrl: 'https://www.e-is.pro', logo: 'assets/img/logo/logo-eis_50px.png' },
+        { siteUrl: 'https://www.e-is.pro', logo: 'assets/img/logo/logo-eis_50px.png' },
+        { siteUrl: 'https://www.e-is.pro', logo: 'assets/img/logo/logo-eis_50px.png' },
+        { siteUrl: 'https://www.e-is.pro', logo: 'assets/img/logo/logo-eis_50px.png' },
+        { siteUrl: 'https://www.e-is.pro', logo: 'assets/img/logo/logo-eis_50px.png' },
+        { siteUrl: 'https://www.sumaris.net', logo: 'assets/img/logo/logo-sumaris.png' },
+        { siteUrl: 'https://www.sumaris.net', logo: 'assets/img/logo/logo-sumaris.png' },
+        { siteUrl: 'https://www.sumaris.net', logo: 'assets/img/logo/logo-sumaris.png' },
+        { siteUrl: 'https://www.sumaris.net', logo: 'assets/img/logo/logo-sumaris.png' },
+        { siteUrl: 'https://www.sumaris.net', logo: 'assets/img/logo/logo-sumaris.png' },
+      ],
+    },
+    // Testing pages
+    {
+      provide: APP_TESTING_PAGES,
+      useValue: [...SHARED_TESTING_PAGES, ...CORE_TESTING_PAGES, ...SOCIAL_TESTING_PAGES],
+    },
+    // Custom identicon style
+    // https://jdenticon.com/icon-designer.html?config=4451860010ff320028501e5a
+    {
+      provide: JDENTICON_CONFIG,
+      useValue: {
+        lightness: {
+          color: [0.26, 0.8],
+          grayscale: [0.3, 0.9],
+        },
+        saturation: {
+          color: 0.5,
+          grayscale: 0.46,
+        },
+        backColor: '#0000',
+      },
+    },
+    {
+      provide: APP_NAMED_FILTER_SERVICE,
+      useClass: DummyNamedFilterService,
+    },
+    {
+      provide: APP_HOTKEYS_CONFIG,
+      useValue: <HotKeysConfig>{
+        openHelpModalShortcut: 'F1',
+        enableHelpModal: true,
+      },
+    },
+
+    // Http client
+    provideHttpClient(withInterceptorsFromDi()),
+
+    // Zone less (experimental)
+    provideExperimentalZonelessChangeDetection(),
+
+    // Event replay
+    // TODO enable when testing the SSR - Server Side Rendering)
+    //provideClientHydration(withEventReplay()),
+  ],
+})
+export class AppModule {
+  constructor() {
+    console.debug('[app] Creating module');
+  }
+}