bpm-core 0.0.128 → 0.0.130

package/cli/generate/new/angular-template/karma.conf.js

@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, './coverage/contractor-service'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

package/cli/generate/new/angular-template/package.json.ejs

@@ -0,0 +1,67 @@
+{
+  "name": "<%=serviceCode%>",
+  "version": "1.0.0",
+  "license": "MIT",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build --configuration production",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular-builders/custom-webpack": "^19.0.0",
+    "@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/localize": "^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",
+    "@ncstate/sat-popover": "^13.1.0",
+    "basic-ui-components": "^0.0.6992",
+    "bootstrap": "^5.3.3",
+    "bpm-core": "^0.0.124",
+    "date-fns": "^4.1.0",
+    "express": "^4.18.2",
+    "file-saver": "^2.0.5",
+    "google-libphonenumber": "^3.2.42",
+    "handlebars": "^4.7.7",
+    "handlebars-loader": "^1.7.2",
+    "intl-tel-input": "^24.5.0",
+    "moment": "^2.29.4",
+    "moment-hijri": "^2.30.0",
+    "ng-dynamic-component": "^10.7.0",
+    "ngx-bootstrap": "^19.0.2",
+    "ngx-intl-tel-input-gg": "^1.0.12",
+    "ngx-mask": "^18.0.0",
+    "ngx-scrollbar": "^15.1.3",
+    "ngx-toastr": "^19.0.0",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.14.10"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^19.0.0",
+    "@angular/cli": "^19.0.0",
+    "@angular/compiler-cli": "^19.0.0",
+    "@types/express": "^4.17.17",
+    "@types/jasmine": "~5.1.0",
+    "@types/node": "^18.18.0",
+    "jasmine-core": "~5.2.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "ng-packagr": "^18.2.1",
+    "typescript": "~5.5.2"
+  }
+}

package/cli/generate/new/angular-template/protractor.conf.js

@@ -0,0 +1,28 @@
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+const { SpecReporter } = require('jasmine-spec-reporter');
+
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    './e2e/**/*.e2e-spec.ts'
+  ],
+  capabilities: {
+    'browserName': 'chrome'
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:4200/',
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function() {}
+  },
+  onPrepare() {
+    require('ts-node').register({
+      project: 'e2e/tsconfig.e2e.json'
+    });
+    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+  }
+};

package/cli/generate/new/angular-template/src/app/app.component.html

@@ -0,0 +1,35 @@
+<core-layout>
+  @if (!loading['form']) {
+    @if (noError) {
+      <core-service-header
+        [isLoading]="false"
+        [formTitle]="'formTitle' | translate"
+        [form]="form">
+        <app-print-section [form]="form">
+        </app-print-section>
+      </core-service-header>
+      <app-workflow-section
+        workflow
+        [segmentDynamicLoaderService]="segmentDynamicLoader"
+        [form]="form" [sections]="form?.['sections']">
+        <app-request-details-section
+          [section]="form.sections[0]" [form]="form" [lov]="form?.lovs" className="form-section"
+          [isReadOnly]="form.sections[0].header.readOnly"></app-request-details-section>
+      </app-workflow-section>
+    } @else {
+      @if (errorMessage?.length) {
+        <ds-message></ds-message>
+        @for (item of errorMessage; track $index) {
+          <div class="d-flex justify-content-center">
+            <span class="fc-coral fs-18"  [innerHTML]="item?.['message']"></span>
+          </div>
+        }
+      } @else {
+        <ds-message label="{{'errorOccurred' | translate}}"></ds-message>
+      }
+    }
+  } @else {
+    <core-service-header header [formTitle]="'formTitle' | translate" [isLoading]="true">
+    </core-service-header>
+  }
+</core-layout>

package/cli/generate/new/angular-template/src/app/app.component.ts

@@ -0,0 +1,81 @@
+import {AfterViewInit, Component, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA} from '@angular/core';
+import {
+  CoreService,
+  Form,
+  LayoutComponent,
+  ServiceHeaderComponent,
+  SidenavService,
+  WorkflowSectionComponent,
+  CoreI18nService
+} from 'bpm-core';
+import {DynamicComponentInjectorToken} from 'ng-dynamic-component';
+import {RequestDetailsSectionComponent} from "./page-components/request-details-section/request-details-section.component";
+import {SegmentDynamicLoaderService} from './shared/services/segment-dynamic-loader.service';
+import {DOCUMENT, isPlatformBrowser} from "@angular/common";
+import { Inject,  PLATFORM_ID} from '@angular/core';
+import {Router} from "@angular/router";
+import {PrintSectionComponent} from "./templates/print-section/print-section.component";
+import {I18nService} from "./shared/services/i18n.service";
+import { TranslatePipe } from './shared/pipes/translate.pipe';
+
+@Component({
+  selector: 'app-wm-root',
+  standalone: true,
+  templateUrl: './app.component.html',
+  styleUrl: './app.component.scss',
+  imports: [
+    LayoutComponent,
+    ServiceHeaderComponent,
+    WorkflowSectionComponent,
+    RequestDetailsSectionComponent,
+    PrintSectionComponent,
+    TranslatePipe
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],
+  providers: [
+    {provide: DynamicComponentInjectorToken, useValue: { /* your value here */}}
+  ]
+
+})
+export class AppComponent implements AfterViewInit {
+  loading = {
+    form: false
+  }
+  form: Form
+  noError = true;
+  errorMessage: [];
+  constructor(
+    public segmentDynamicLoader: SegmentDynamicLoaderService,
+    @Inject(DOCUMENT) private readonly document: Document,
+    private readonly router: Router,
+    private readonly sidenavService: SidenavService,
+    public i18n: I18nService,
+    private readonly coreService: CoreService,
+    @Inject(PLATFORM_ID) private readonly platformId: any
+  ) {
+    this.loading['form'] = true
+     this.coreService.loadForm().subscribe({
+      next: (form: any) => {
+        if (form instanceof Form) {
+          this.form = form;
+        } else {
+          this.noError = false;
+        }
+        this.loading['form'] = false;
+      },
+      error: (err) => {
+        this.noError = false;
+        this.loading['form'] = false;
+        this.errorMessage = err?.error?.meta?.messages;
+      }
+    });
+  }
+
+  ngAfterViewInit() {
+    if (isPlatformBrowser(this.platformId)) {
+      const direction = this.i18n.getLanguage() == 'en' ? 'ltr' : 'rtl';
+      document.documentElement.setAttribute('dir', direction);
+    }
+  }
+
+}

package/cli/generate/new/angular-template/src/app/config/segment-dynamic-loader.config.ts.ejs

@@ -0,0 +1,8 @@
+<% const config = getSegmentDynamicLoaderConfig() -%>
+<%- config.imports %>
+
+export default {
+  roleToApprovalSectionMapping: {
+    <%- config.roleToCompClass -%>
+  }
+}

package/cli/generate/new/angular-template/src/app/i18n/ar.ts.ejs

@@ -0,0 +1,18 @@
+export default {
+  "fileName": "اسم الملف",
+  "fileDescription": "وصف الملف",
+  "comment": "ملاحظات",
+  "reset": "إعادة تهيئة",
+  "businessPhone": "هاتف العمل",
+  "nationality": "الجنسية",
+  "generalDepartmentName": "الإدارة العامة",
+  "departmentName": "القسم",
+  "humanResourcesLocation": "شئون الموظفين",
+  "employeeEmail": "البريد الإلكتروني",
+  "generalDepartmentCode": "رمز الإدارة العامة",
+  "jobPosition": "الوظيفة",
+  "fullName": "الإسم",
+  "requestDetailsTitle": "تفاصيل الطلب",
+  <% const arStr = JSON.stringify(ar); -%>
+  <%- arStr.substring(1, arStr.length - 1)  %>
+}

package/cli/generate/new/angular-template/src/app/i18n/en.ts.ejs

@@ -0,0 +1,18 @@
+export default {
+  "fileName": "File Name",
+  "fileDescription": "File Description",
+  "comment":"Comments",
+  "reset": "Reset",
+  "departmentName": "Department",
+  "generalDepartmentName": "General Dep.Name",
+  "nationality": "Nationality",
+  "businessPhone": "Business Phone",
+  "fullName":"Full Name",
+  "jobPosition": "Job Position",
+  "generalDepartmentCode": "General Dep. Code",
+  "employeeEmail": "Email",
+  "humanResourcesLocation": "HR location",
+  "requestDetailsTitle":"Request Details",
+  <% const enStr = JSON.stringify(en); -%>
+  <%- enStr.substring(1, enStr.length - 1)  %>
+  }

package/cli/generate/new/angular-template/src/app/page-components/@@comp-template@@/@@.component.html.ejs

@@ -0,0 +1,33 @@
+<div>
+  <form
+    [ngClass]="{
+      'form-section-divide form-section': !section?.header?.readOnly,
+      'info-section': section?.header?.readOnly
+    }"
+    [formGroup]="formGroup"
+  >
+    <% fields.forEach((field) => { -%>
+      <% if(field.componentName === 'table'){ %>
+        <%- include('_html-table', {field: field}) %>
+      <% } else { %>
+        <%- include('_html-field', {item: field}) %>
+      <% } %>
+    <% }); -%>
+  </form>
+</div>
+
+@if (!section?.header?.readOnly) {
+  <div class="mt-4">
+    <lib-action-buttons
+      [lovOptions]="lov?.['decision']?.options"
+      [lovType]="lov?.['decision']?.type"
+      [section]="section"
+      [form]="form"
+      [sections]="form.sections"
+      [showApprovalCycle]="true"
+      [customCall]="false"
+      [fieldsForm]="formGroup"
+      (resetFormEmit)="resetForm()"
+    />
+  </div>
+}

package/cli/generate/new/angular-template/src/app/page-components/@@comp-template@@/@@.component.ts.ejs

@@ -0,0 +1,128 @@
+
+<% importsManager.addImport(['Component', 'inject', 'Input', 'OnInit', 'CUSTOM_ELEMENTS_SCHEMA'], '@angular/core') -%>
+<% importsManager.addImport(['FormControl', 'FormBuilder', 'Validators'], '@angular/forms') -%>
+<% importsManager.addImport('ReactiveFormsModule', '@angular/forms', true) -%>
+<% importsManager.addImport(['Section', 'Form', 'ActionStateService'], 'bpm-core') -%>
+<% importsManager.addImport('ActionButtonsComponent', 'bpm-core', true) -%>
+<% importsManager.addImport('TranslatePipe', 'src/app/shared/pipes/translate.pipe', true) -%>
+<% importsManager.addImport('NgClass', '@angular/common', true) -%>
+
+<% for(const field of fields){ -%>
+  <% if(field.componentName === 'table'){ -%>
+    interface <%= changeCase.pascalCase(field.arrayName + 'Item') %> {
+      <% for(const col of field.tableColumns){ -%>
+        <%= col.fieldName %>: <%= getFieldType(col) %>;
+      <% } -%>
+    }
+  <% } -%>
+<% } -%>
+
+@Component({
+  selector: 'app-<%= componentNameKebab %>',
+  templateUrl: './<%= componentNameKebab %>.component.html',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  imports: []
+})
+export class <%= componentNamePascal %>Component implements OnInit {
+  @Input() isReadOnly: boolean;
+  @Input() section: Section;
+  @Input() form: Form;
+  @Input() lov: any;
+  formGroup: ReturnType<typeof this.createForm>;
+  private fb = inject(FormBuilder);
+  private actionStateService = inject(ActionStateService);
+
+  ngOnInit(){
+    this.formGroup = this.createForm();
+    this.setFormValuesUsingSectionDetails();
+    if(!this.isReadOnly){
+      this.subscribeFormChanges();
+      this.formGroup.updateValueAndValidity();
+    }
+  }
+
+  createForm() {
+    return this.fb.group({
+      <% for(const field of fields){ -%>
+        <% if(field.componentName === 'table'){ -%>
+          <%=field.arrayName%>: this.fb.array<ReturnType<typeof this.<%= changeCase.camelCase(`new ${field.arrayName} Item`) %>>>([]),
+        <% } else { -%>
+          <%- include('_ts-field', {field: field, defaultValue: undefined}) -%>
+        <% } -%>
+      <% } -%>
+    });
+  }
+
+  resetForm() {
+    this.actionStateService.resetAction$.next();
+  }
+
+  <% for(const field of fields){ -%>
+    <% if(field.visibilityCheckCode){ -%>
+      get <%= changeCase.camelCase(`is ${field.fieldName || field.headerName} visible`) %>(): boolean {
+        return <%-field.visibilityCheckCode%>;
+      }
+    <% } -%>
+  <% } -%>
+
+  private subscribeFormChanges() {
+    this.formGroup.valueChanges.subscribe((value) => {
+      this.section.body.details = {
+        ...this.section.body.details,
+        ...this.formGroup.value,
+      };
+      <% if(fields.some(item => item.visibilityCheckCode)){ importsManager.addImport('updateValueAndValidity', 'bpm-core')-%>
+        updateValueAndValidity(this.formGroup);
+      <% } -%>
+      this.lov?.["decision"]?.options?.forEach((option) => {
+        let isActionValid = this.checkValidity(option.value);
+        this.actionStateService.setActionValid(option.value, isActionValid);
+      });
+    });
+  }
+
+  private checkValidity(action: string): boolean {
+    <% if(fields.some(item => item.fieldName === 'comment')){ -%>
+    switch (action) {
+      case "SENDBACK":
+      case "REJECT":
+        return !!this.formGroup.value?.comment;
+      default:
+        return this.formGroup.valid;
+    }
+    <% } else { -%>
+    return this.formGroup.valid;
+    <% } -%>
+  }
+
+  private setFormValuesUsingSectionDetails(){
+    this.formGroup.patchValue(this.section.body.details);
+    <% for(const field of fields){ -%>
+      <% if(field.componentName === 'table'){ -%>
+        <% const tableArrConstName = changeCase.camelCase(field.arrayName); -%>
+        <% const typeName = changeCase.pascalCase(field.arrayName + 'Item'); -%>
+        <% const addNewItemMethodName = changeCase.camelCase(`new ${field.arrayName} Item`); -%>
+        const <%= tableArrConstName %>: <%=typeName%>[] = this.section.body.details?.<%= field.arrayName %>;
+        if(<%= tableArrConstName %>?.length){
+          <%= tableArrConstName %>.forEach(item => {
+            this.formGroup.controls.<%= field.arrayName %>.push(this.<%=addNewItemMethodName%>(item))
+          })
+        }
+      <% } -%>
+    <% } -%>
+  }
+
+  <% for(const field of fields){ -%>
+    <% if(field.componentName === 'table'){ -%>
+      private <%= changeCase.camelCase(`new ${field.arrayName} Item`) %>(item?: <%= changeCase.pascalCase(field.arrayName + 'Item') %>) {
+        return this.fb.group({
+          <% for(const col of field.tableColumns){ -%>
+            <%- include('_ts-field', {field: col, defaultValue: `item?.${col.fieldName}`}) -%>
+          <% } -%>
+        });
+      }
+    <% } -%>
+  <% } -%>
+
+}

package/cli/generate/new/angular-template/src/app/page-components/@@comp-template@@/_html-field.ejs

@@ -0,0 +1,97 @@
+      <% if (item.visibilityCheckCode) { -%>
+        <% importsManager.addImport(getEnumName(item), '../../shared/types/lov.enum') -%>
+        @if(<%= changeCase.camelCase(`is ${item.fieldName || item.headerName} visible`) %>){
+      <% } -%>
+      <% switch(item.componentName){ 
+        case 'input': -%>
+          <app-input
+            <%- getCommonAttributes(item) -%>
+            <% if(item.maxLength){ -%> 
+              maxLength="<%=item.maxLength%>" 
+            <% } -%>
+          >
+          </app-input>
+        <% break; case 'textarea': -%>
+          <app-textarea
+            <%- getCommonAttributes(item) -%>
+            <% if(item.maxLength){ -%> 
+              maxLength="<%=item.maxLength%>" 
+            <% } -%>
+          >
+          </app-textarea>
+        <% break; case 'input-number': -%>
+          <app-input-number
+            <%- getCommonAttributes(item) -%>
+          >
+          </app-input-number>
+        <% break; case 'input-currency': -%>
+          <app-input-currency
+            <%- getCommonAttributes(item) -%>
+          >
+          </app-input-currency>
+        <% break; case 'select': -%>
+          <app-custom-searchable
+            <%- getCommonAttributes(item) -%>
+            [options]="lov?.<%=item.lovName%>?.options"
+            [key]="'value'"
+            [displayedLabel]="'description'"
+          >
+          </app-custom-searchable>
+        <% break; case 'attachment-section': -%>
+          <app-attachment-section
+            class="section-item full"
+            formControlName="<%=item.fieldName%>"
+            <% if(item.label){ %>
+            [label]="'<%=changeCase.camelCase(item.label)%>' | translate"
+            <% } %>
+            [mandatory]="<%=item.required%>"
+            [isReadOnly]="<%=item.readOnly ? 'true' : 'section?.header?.readOnly'%>"
+          >
+          </app-attachment-section>
+        <% break; case 'file-uploader': -%>
+          <app-file-uploader
+            <%- getCommonAttributes(item) -%>
+            <% if(item.maxLength){ -%> 
+              [maxLength]="<%=item.maxLength%>" 
+            <% } -%>
+            <% if(item.multiple){ -%> 
+              [multiple]="true"
+              [displayedFiles]="formGroup.value?.<%=item.fieldName%>"
+            <% } -%>
+          >
+          </app-file-uploader>
+        <% break; case 'datepicker': -%>
+          <app-datepicker
+            <%- getCommonAttributes(item) -%>
+            <% if(item.minDate){ -%> 
+              minDate="<%=item.minDate%>" 
+            <% } -%>
+            <% if(item.maxDate){ -%> 
+              maxDate="<%=item.maxDate%>" 
+            <% } -%>
+            <% if(item.customMinDate){ -%> 
+              customMinDate="<%=item.customMinDate%>" 
+            <% } -%>
+            <% if(item.customMaxDate){ -%> 
+              customMaxDate="<%=item.customMaxDate%>" 
+            <% } -%>
+          >
+          </app-datepicker>
+        <% break; case 'panel-start': -%>
+          <div class="header-line full fs-12 fw-medium mb-2">
+            {{ "<%=changeCase.camelCase(item.headerName)%>" | translate }}
+          </div>
+        <% break; case 'hint': -%>
+          <ds-alert class="mb-3 full" type="<%=item.type%>" icon="<%=item.type === 'danger' ? 'close-circle' : 'info'%>">
+            {{'<%=changeCase.camelCase(item.headerName)%>' | translate}}
+          </ds-alert>
+        <% break; case 'search-employee': -%>
+          <app-search-employee
+            <%- getCommonAttributes(item) -%>
+          >
+          </app-search-employee>
+        <% break; -%>
+      <% } -%>
+      <% if (item.visibilityCheckCode) { -%>
+        }
+      <% } %>

package/cli/generate/new/angular-template/src/app/page-components/@@comp-template@@/_html-table.ejs

@@ -0,0 +1,27 @@
+<div class="section-item full mt-2">
+    <% if(field.label){ -%>
+    <div class="header-line full fs-12 fw-medium mb-1">{{ "<%=changeCase.camelCase(field.label)%>" | translate }}</div>
+    <% } -%>
+    <div class="gray-table-wrapper">
+        <table>
+            <thead>
+            <tr>
+                <% field.tableColumns.forEach((column) => { -%>
+                <th>{{'<%=changeCase.camelCase(column.label)%>' | translate}}</th>
+                <% }); -%>
+            </tr>
+            </thead>
+            <tbody formArrayName="<%=field.arrayName%>">
+            @for (item of section.body.details.<%=field.arrayName%>; track $index) {
+                <tr [formGroupName]="$index">
+                <% field.tableColumns.forEach((column) => { -%>
+                    <td>
+                    <%- include('_html-field', {item: column}) %>
+                    </td>
+                <% }); -%>
+                </tr>
+            }
+            </tbody>
+        </table>
+    </div>
+</div>

package/cli/generate/new/angular-template/src/app/page-components/@@comp-template@@/_ts-field.ejs

@@ -0,0 +1,3 @@
+<% if(field.fieldName){ -%>
+    <%= field.fieldName %>: new FormControl<<%- getFieldType(field) %>>(<%- defaultValue || 'null' %><% if(field.required){ -%>, <%- getValidators(field) %><% } %>),
+<% } -%>

package/cli/generate/new/angular-template/src/app/shared/pipes/translate.pipe.ts

@@ -0,0 +1,32 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import * as en from '../../../app/i18n/en';
+import * as ar from '../../../app/i18n/ar';
+
+@Pipe({
+  name: 'translate',
+  standalone:true
+})
+export class TranslatePipe implements PipeTransform {
+  private coreLocales: { [key: string]: { [key: string]: string } };
+  public language: string;
+
+  constructor() {
+    // this.language = "en";
+    this.language = (window as any).wmConfig.language;
+    this.coreLocales = { en: en.default, ar: ar.default };
+  }
+
+  transform(key) {
+    let result = null;
+    try {
+      result = this.coreLocales[this.language][key];
+    } catch (e) {
+      result = null;
+    }
+    return result || key;
+  }
+
+  getLanguage() {
+    return this.language;
+  }
+}

package/cli/generate/new/angular-template/src/app/shared/services/i18n.service.ts

@@ -0,0 +1,32 @@
+import { Injectable } from '@angular/core';
+import * as en from '../../../app/i18n/en';
+import * as ar from '../../../app/i18n/ar';
+
+@Injectable({
+    providedIn: 'any',
+})
+export class I18nService {
+  private readonly locales: {[key: string]: {[key: string]: string}};
+  private readonly language : string;
+
+  constructor() {
+    this.language = (window as any).wmConfig.language;
+    // this.language = "en";
+    this.locales = {en: en.default, ar: ar.default};
+  }
+
+  translate(key) {
+    let result = null;
+    try {
+        result = this.locales[this.language][key];
+    }
+    catch(e) {
+      result = null;
+    }
+    return result || key;
+  }
+
+  getLanguage() {
+    return this.language;
+  }
+}