Merge pull request #6 from silicia-apps/draft/kind-danny

Draft/kind danny

.devcontainer/devcontainer.json

@@ -0,0 +1,22 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the
+// README at: https://github.com/devcontainers/templates/tree/main/src/javascript-node
+{
+	"name": "Node.js",
+	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
+	"image": "mcr.microsoft.com/devcontainers/javascript-node:1-20-bullseye"
+
+	// Features to add to the dev container. More info: https://containers.dev/features.
+	// "features": {},
+
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	// "forwardPorts": [],
+
+	// Use 'postCreateCommand' to run commands after the container is created.
+	// "postCreateCommand": "yarn install",
+
+	// Configure tool-specific properties.
+	// "customizations": {},
+
+	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
+	// "remoteUser": "root"
+}

README.md

@@ -4,7 +4,7 @@
 Silicia Ionic Framework (SIO) is a library for developing open-source hybrid applications released under the MIT license. This library was created with the aim of eliminating all the redundant code necessary for development in ionic or angular and with the purpose of inserting the most used libraries. Here are the features of the library:
 
 * state integration with ngxs and angular-ru/ngxs libraries
-* multilingual support integration via transloco library
+* multilingual support integration via translate library
 * plugin support for various types of backends (currently appwrite)
 * wrapping core Ionic components into new components with state and other functionality (such as dynamic forms and menus)
 

apps/demo/src/app/app.component.html

@@ -1,2 +1,3 @@
 <sio-app sidemenu="overlay" menu="main">
+
 </sio-app>

apps/demo/src/app/app.config.ts

@@ -1,14 +1,14 @@
 import { ApplicationConfig } from '@angular/core';
 import { importProvidersFrom } from '@angular/core';
-import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
+import { IonicRouteStrategy } from '@ionic/angular';
 import { SioCoreModule } from '@sio/core';
 import { RouteReuseStrategy, provideRouter } from '@angular/router';
 import { routes } from './app.routes';
 import { environment } from '../environments/environment';
 export const appConfig: ApplicationConfig = {
   providers: [
     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
-    importProvidersFrom(IonicModule.forRoot({}), SioCoreModule.forRoot(environment)),
+    importProvidersFrom(SioCoreModule.forRoot(environment)),
     provideRouter(routes),
   ],
 };

apps/demo/src/app/home/home.page.html

@@ -1,2 +1,3 @@
 <sio-page title="test" color="primary">
-</sio-page>
+    {{ 'M_HOME' | translate }}
+</sio-page>   

libs/auth/src/lib/components/badge/badge.component.html

@@ -21,7 +21,7 @@
     <ion-item button (click)="(this.urlLoginPage)">
       <sio-icon [name]="this.icon" [slot]="this.position"></sio-icon>
       <ion-label>
-        {{ this.text | transloco }}
+        {{ this.text | translate }}
       </ion-label>
     </ion-item>
   </div>

libs/auth/src/lib/components/login/login.component.html

@@ -7,12 +7,12 @@
     </sio-form>
     {{ this.color }}
     <p>&nbsp;</p>
-    <p *ngIf="this.mode === 'signin'" [innerHTML]="'auth.LOGIN_COMPONENT_DO_NOT_HAVE_ACCOUNT' | transloco"></p>
+    <p *ngIf="this.mode === 'signin'" [innerHTML]="'auth.LOGIN_COMPONENT_DO_NOT_HAVE_ACCOUNT' | translate"></p>
 </sio-card>
 <sio-card color="light" *ngIf="this.social">
   <ion-card-header>
     <ion-card-subtitle>{{
-      'auth.TITLE_SOCIAL_LOGIN' | transloco
+      'auth.TITLE_SOCIAL_LOGIN' | translate
     }}</ion-card-subtitle>
   </ion-card-header>
   <ion-card-content>
@@ -21,14 +21,14 @@
       color="primary"
       (click)="this.oAuth2Login('facebook')"
       ><sio-icon name="logo-facebook" slot="start"></sio-icon
-      >{{ 'auth.BUTTON_FACEBOOK_LOGIN' | transloco }}</ion-button
+      >{{ 'auth.BUTTON_FACEBOOK_LOGIN' | translate }}</ion-button
     >
     <ion-button
       expand="block"
       color="danger"
       (click)="this.oAuth2Login('google')"
       ><sio-icon name="logo-google" slot="start"></sio-icon
-      >{{ 'auth.BUTTON_GOOGLE_LOGIN' | transloco }}</ion-button
+      >{{ 'auth.BUTTON_GOOGLE_LOGIN' | translate }}</ion-button
     >
   </ion-card-content>
 </sio-card>

libs/auth/src/lib/services/plugins/plugin.service.ts

@@ -7,7 +7,7 @@ import {
 import { Loggable, SioCoreAppComponentState } from '@sio/core';
 import { SioAuthPluginServiceInterface } from './interfaces';
 import { SioAuthPluginServiceToken } from './tokens';
-import { TranslocoService } from '@ngneat/transloco';
+import { TranslateService } from '@ngx-translate/core';
 
 @Loggable()
 @Injectable({ providedIn: 'root' })
@@ -19,7 +19,7 @@ export class SioAuthPluginService implements SioAuthPluginServiceInterface {
     @Inject(SioAuthPluginServiceToken)
     plugins: SioAuthPluginServiceInterface[],
     private sioCoreAppComponentState: SioCoreAppComponentState,
-    private translocoService: TranslocoService
+    private translateService: TranslateService
   ) {
     plugins = plugins || [];
     this.plugins = Array.isArray(plugins) ? plugins : [plugins];
@@ -32,8 +32,8 @@ export class SioAuthPluginService implements SioAuthPluginServiceInterface {
       const error = e as Error;
       if (error.name === 'sio-error')
         this.sioCoreAppComponentState.throwError(
-          this.translocoService.translate(error.message),
-          this.translocoService.translate('AUTH_ERROR')
+          this.translateService.getTranslation(error.message),
+          this.translateService.getTranslation('AUTH_ERROR')
         );
     }
     return null;
@@ -46,8 +46,8 @@ export class SioAuthPluginService implements SioAuthPluginServiceInterface {
       const error = e as Error;
       if (error.name === 'sio-error')
         this.sioCoreAppComponentState.throwError(
-          this.translocoService.translate(error.message),
-          this.translocoService.translate('AUTH_ERROR')
+          this.translateService.getTranslation(error.message),
+          this.translateService.getTranslation('AUTH_ERROR')
         );
     }
     return null;
@@ -63,8 +63,8 @@ export class SioAuthPluginService implements SioAuthPluginServiceInterface {
       const error = e as Error;
       if (error.name === 'sio-error')
         this.sioCoreAppComponentState.throwError(
-          this.translocoService.translate('auth.'+error.message),
-          this.translocoService.translate('auth.AUTH_ERROR')
+          this.translateService.getTranslation('auth.'+error.message),
+          this.translateService.getTranslation('auth.AUTH_ERROR')
         );
       return null;
     }
@@ -77,8 +77,8 @@ export class SioAuthPluginService implements SioAuthPluginServiceInterface {
       const error = e as Error;
       if (error.name === 'sio-error')
         this.sioCoreAppComponentState.throwError(
-          this.translocoService.translate('auth.'+error.message),
-          this.translocoService.translate('AUTH_ERROR')
+          this.translateService.getTranslation('auth.'+error.message),
+          this.translateService.getTranslation('AUTH_ERROR')
         );
       return null;
     }

libs/auth/src/lib/sio-auth.module.ts

@@ -14,9 +14,6 @@ import { sioAuthRoutes } from './lib.routes';
 
 import { SioAuthState } from './store';
 
-import { InlineLoaderFactory } from '@sio/core';
-import { TRANSLOCO_SCOPE } from '@ngneat/transloco';
-
 @NgModule({
   declarations: [...SioAuthComponents],
   imports: [
@@ -29,17 +26,6 @@ import { TRANSLOCO_SCOPE } from '@ngneat/transloco';
     NgxsFormPluginModule,
   ],
   exports: [...SioAuthComponents],
-  providers: [
-    {
-      provide: TRANSLOCO_SCOPE,
-      useValue: {
-        scope: 'auth',
-       //loader: InlineLoaderFactory(
-       //   (lang: string) => import(`./i18n/${lang}.json`).then((a) => { console.log('logged'); return a}).catch((e) => { console.error(`./i18n/${lang}.json not found`);return {}})
-       // )
-      },
-      multi: true,
-    },
-  ]
+  providers: []
 })
 export class SioAuthModule {}

libs/core/src/lib/components/app/app.component.ts

@@ -4,6 +4,7 @@ import { SioCoreAppComponentState } from './store/app.state';
 //import { E_SIDEMENU } from '../menu/menu.enum';
 import { Select } from '@ngxs/store';
 import { Observable, Subject } from 'rxjs';
+import { TranslateService } from '@ngx-translate/core';
 
 import { Platform, IonRouterOutlet } from '@ionic/angular';
 import { App } from '@capacitor/app';
@@ -62,7 +63,8 @@ export class SioCoreAppComponent implements OnInit, OnDestroy {
     private sioCoreLoadingService: SioCoreLoadingService,
     private sioCoreAlertService: SioCoreAlertService,
     private sioCoreEnvironmentService: SioCoreEnvironmentService,
-    private sioCoreLoggerService: SioCoreLoggerService
+    private sioCoreLoggerService: SioCoreLoggerService,
+    private translateService: TranslateService,
   ) {
     if(this.sioCoreEnvironmentService.config) {
     this.sioCoreAppComponentState.LoadConfig(
@@ -75,6 +77,8 @@ export class SioCoreAppComponent implements OnInit, OnDestroy {
 
   ngOnInit(): void {
     (async () => {
+      this.translateService.addLangs(['en','it']);
+      this.translateService.use('en');
       this.sioCoreLoggerService.info('check platform...');
       let platform = await this.platform.ready();
       switch (platform) {

libs/core/src/lib/components/card/card.component.html

@@ -6,8 +6,8 @@
         <ion-card-header [color]="this.color">
           <div #header><ng-content select="[slot='header']"></ng-content></div>
           <ng-container *ngIf="!header.hasChildNodes()">
-            <ion-card-title>{{ this.title | transloco }}</ion-card-title>
-            <ion-card-subtitle>{{ this.subtitle | transloco }}</ion-card-subtitle>
+            <ion-card-title>{{ this.title | translate }}</ion-card-title>
+            <ion-card-subtitle>{{ this.subtitle | translate }}</ion-card-subtitle>
           </ng-container>
         </ion-card-header>
       </ion-item>

libs/core/src/lib/components/dark-mode-toogle/dark-mode-toggle.component.html

@@ -2,6 +2,6 @@
   <ion-item lines="none" button>
     <sio-icon [name]="this.icon" slot="start"></sio-icon>
     <ion-toggle #darkmode_toggle (ionChange)="this.onChange($event)" slot="end"></ion-toggle>
-    <label>{{ this.label | transloco }}</label>
+    <label>{{ this.label | translate }}</label>
   </ion-item>
 </ion-list>

libs/core/src/lib/components/form/form.component.html

@@ -1,4 +1,4 @@
-<ng-container *transloco="let t">
+
   <form
     *ngIf="(this.state.state$ | async)?.layout"
     ngxsForm="{{ this.state.name }}.data"
@@ -21,15 +21,15 @@
       type="submit"
       [disabled]="!this.state.valid"
     >
-      {{ t('auth.SUBMIT') }}
+      {{ 'auth.SUBMIT' | translate }}
     </ion-button>
     <ion-button
       *ngIf="this.cancel"
       expand="block"
       color="danger"
       (click)="this.state.resetForm()"
     >
-      {{ t('auth.RESET') }}
+      {{ 'auth.RESET' | translate }}
     </ion-button>
   </form>
-</ng-container>
+

libs/core/src/lib/components/header/header.component.html

@@ -6,7 +6,7 @@
         <ion-back-button *ngIf="this.back"></ion-back-button>
       </ng-container>
     </ion-buttons>
-    <ion-title>{{ this.title| transloco }}</ion-title>
+    <ion-title>{{ this.title| translate }}</ion-title>
     <ion-buttons slot="end">
       <ng-content select="[slot='end']"> </ng-content>
     </ion-buttons>

libs/core/src/lib/components/input/input.component.html

@@ -1,10 +1,9 @@
-<ng-container *transloco="let t">
   <ion-item
     [class.invalid]="this.invalid"
     [color]="this.color"
   >
     <ion-input
-      [label] = "t(this.label)"
+      label = "{{ this.label | translate }}"
       [labelPlacement] = "this.position"
       fill="outline"
       [(ngModel)]="this.valueInput"
@@ -22,4 +21,3 @@
       [helperText]="this.label"
     ></ion-input>
   </ion-item>
-</ng-container>

libs/core/src/lib/components/item/item.component.html

@@ -11,7 +11,7 @@
     <ion-thumbnail *ngIf="this.image && !this.avatar" slot="start">
       <ion-img [alt]="this.alt" [src]="this.image" />
     </ion-thumbnail>
-    <ion-label><h2>Heading</h2><p>{{ this.label | transloco }}</p></ion-label>
+    <ion-label><h2>Heading</h2><p>{{ this.label | translate }}</p></ion-label>
     <ion-label slot="end">€ 5,00</ion-label>
     <ion-button slot="end"><sio-icon name="add"></sio-icon></ion-button>
   </ion-item>

libs/core/src/lib/components/menu-item/menu-item.component.html

@@ -13,7 +13,7 @@
     <ng-container *ngIf="!start.hasChildNodes()">
       <sio-icon [name]="this.icon" slot="start"></sio-icon>
     </ng-container>
-    <ion-label>{{ this.caption! | transloco }}</ion-label>
+    <ion-label>{{ this.caption! | translate }}</ion-label>
     <div #end>
       <ng-content slot="end" select="[slot='end']"></ng-content>
     </div>

libs/core/src/lib/components/menu/menu.component.html

@@ -4,7 +4,7 @@
     <ion-accordion [value]="this.sioCoreMenuState.caption" [toggleIconSlot]="this.toggleIconSlot"
       [toggleIcon]="this.toggleIcon">
       <ion-item slot="header" [color]="this.color">
-        <ion-label>{{ this.sioCoreMenuState.caption | transloco }}</ion-label>
+        <ion-label>{{ this.sioCoreMenuState.caption | translate }}</ion-label>
       </ion-item>
       <ion-list slot="content" inset="true">
         <sio-menu-item *ngFor="

libs/core/src/lib/components/page/page.component.html

@@ -6,7 +6,7 @@
         <ion-back-button *ngIf="this.back"></ion-back-button>
       </ng-container>
     </ion-buttons>
-    <ion-title>{{ this.title| transloco }}</ion-title>
+    <ion-title>{{ this.title| translate }}</ion-title>
     <ion-buttons slot="end">
       <ng-content select="[slot='end']"> </ng-content>
     </ion-buttons>
@@ -19,16 +19,16 @@
 <ion-content [fullscreen]="true" class="ion-padding">
   <ion-header *ngIf="this.toolbar && !this.fullmode" collapse="condense">
     <ion-toolbar>
-      <ion-title size="large">{{ this.title | transloco }}</ion-title>
+      <ion-title size="large">{{ this.title | translate }}</ion-title>
     </ion-toolbar>
   </ion-header>
   <div #content>
     <ng-content></ng-content>
   </div>
   <ng-container *ngIf="!content.hasChildNodes()">
     <div id="container">
-      <h1>{{ 'PAGE_COMPONENT_DEFAULT_1' | transloco }}</h1>
-      <strong>{{ 'PAGE_COMPONENT_DEFAULT_2' | transloco }}</strong>
+      <h1>{{ 'PAGE_COMPONENT_DEFAULT_1' | translate }}</h1>
+      <strong>{{ 'PAGE_COMPONENT_DEFAULT_2' | translate }}</strong>
       <p>
         {{ 'PAGE_COMPONENT_LINK'}} <a target="_blank" rel="noopener noreferrer"
           href="https://github.com/silicia-apps/sio/wiki">SIO Framework</a>

libs/core/src/lib/components/tabs/tabs.component.html

@@ -8,7 +8,7 @@
       <ion-label *ngIf="item.value.caption !== '--' && item.value.id < 6">{{ (item.value.caption ? item.value.caption :
         'M_'+item.value.url!.replace('/',
         '_').toUpperCase()) |
-        transloco }}</ion-label>
+        translate }}</ion-label>
       <ion-badge *ngIf="item.value.caption !== '--' && item.value.id < 6 && item.value.badge! > 0">{{ item.value.badge
         }}</ion-badge>
     </ion-tab-button>
@@ -22,7 +22,7 @@
       <ion-label *ngIf="item.value.caption !== '--' && item.value.id < 6">{{ (item.value.caption ? item.value.caption :
         'M_'+item.value.url!.replace('/',
         '_').toUpperCase()) |
-        transloco }}</ion-label>
+        translate }}</ion-label>
       <ion-badge *ngIf="item.value.caption !== '--' && item.value.id < 6 && item.value.badge! > 0">{{ item.value.badge
         }}</ion-badge>
     </ion-tab-button>

libs/core/src/lib/components/title/title.component.html

@@ -1,5 +1,5 @@
 <ion-header collapse="condense">
   <ion-toolbar>
-    <ion-title size="large">{{ this.title | transloco }}</ion-title>
+    <ion-title size="large">{{ this.title | translate }}</ion-title>
   </ion-toolbar>
 </ion-header>