@ekyc_qoobiss/qbs-ect-cmp 3.6.28 → 3.6.30

package/dist/cjs/random-actions.cjs.entry.js

@@ -3,19 +3,18 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-41696e0e.js');
-const baseComponent = require('./base-component-aa9e52bf.js');
+const TranslationUtils = require('./TranslationUtils-e23d3c71.js');
 
 const randomActionsCss = "";
 
 const RandomActions = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.baseComponent = new baseComponent.BaseComponent(baseComponent.FlowSteps.SelfieTilt);
+  constructor(hostRef) { index.registerInstance(this, hostRef); }
+  async componentWillLoad() {
+    this.translations = await TranslationUtils.Translations.getValues();
   }
-  componentWillLoad() { }
   buttonClick() { }
   render() {
-    return (index.h("div", { class: "container" }, index.h("div", { class: "row" }, index.h("div", { class: "text-center" }, index.h("h1", null, this.topTitle)), index.h("div", { class: "pos-relative show-bottom" }, index.h("div", { class: "btn-buletin" }, index.h("button", { class: "main-button", onClick: () => this.buttonClick() }, this.buttonText), index.h("p", { class: "main-text font-size-18 text-right mb-0" }, this.baseComponent.translations.GlobalValues.FooterText))))));
+    return (index.h("div", { class: "container" }, index.h("div", { class: "row" }, index.h("div", { class: "text-center" }, index.h("h1", null, this.topTitle)), index.h("div", { class: "pos-relative show-bottom" }, index.h("div", { class: "btn-buletin" }, index.h("button", { class: "main-button", onClick: () => this.buttonClick() }, this.buttonText), index.h("p", { class: "main-text font-size-18 text-right mb-0" }, this.translations.GlobalValues.FooterText))))));
   }
 };
 RandomActions.style = randomActionsCss;

package/dist/collection/components/base-component.js

@@ -3,7 +3,6 @@ import { DeviceDetection } from '../helpers/DeviceDetection';
 import Events from '../helpers/Events';
 import store from '../helpers/store';
 import { FlowMoments } from '../models/FlowSteps';
-import { Translations } from '../helpers/TranslationUtils';
 export class BaseComponent {
   constructor(step) {
     this.apiErrorEvent = null;
@@ -14,9 +13,6 @@ export class BaseComponent {
     if (!store.device) {
       store.device = new DeviceDetection().getDevice();
     }
-    Translations.getValues().then(data => {
-      this.translations = data;
-    });
   }
   setEventEmitter(event) {
     this.apiErrorEvent = event;

package/dist/collection/components/common/agreement-check/agreement-check.js

@@ -2,6 +2,7 @@ import { h } from '@stencil/core';
 import { ApiCall } from '../../../helpers/ApiCall';
 import { FlowSteps } from '../../../models/FlowSteps';
 import { BaseComponent } from '../../base-component';
+import { Translations } from '../../../helpers/TranslationUtils';
 export class AgreementCheck {
   constructor() {
     this.agreementType = undefined;
@@ -10,9 +11,12 @@ export class AgreementCheck {
     this.scrollClass = 'scroll';
     this.apiCalls = new ApiCall();
     this.buttonEnabled = true;
-    this.baseComponent = new BaseComponent(FlowSteps.CameraError);
+    this.baseComponent = new BaseComponent(FlowSteps.Agreements);
     this.baseComponent.setEventEmitter(this.apiErrorEvent);
   }
+  async componentWillLoad() {
+    this.translations = await Translations.getValues();
+  }
   async componentDidLoad() {
     try {
       this.htmlContent = await this.apiCalls.GetAgreement(this.agreementType);
@@ -26,7 +30,7 @@ export class AgreementCheck {
     this.agreementAcceptance.emit({ agreementType: this.agreementType, result });
   }
   render() {
-    let content = (h("div", { class: "container" }, h("div", { class: "row" }, h("div", { class: this.scrollClass, innerHTML: this.htmlContent }), h("div", { class: "pos-relative show-bottom" }, h("div", { class: "btn-buletin" }, h("div", { class: "d-flex two-buttons" }, h("button", { class: "normal-button red-button", disabled: !this.buttonEnabled, onClick: () => this.buttonClick(false) }, this.baseComponent.translations.AgreementCheckValues.ButtonNo), h("button", { class: "normal-button", disabled: !this.buttonEnabled, onClick: () => this.buttonClick(true) }, this.baseComponent.translations.AgreementCheckValues.ButtonYes)), h("p", { class: "main-text font-size-18 text-right mb-0" }, this.baseComponent.translations.GlobalValues.FooterText))))));
+    let content = (h("div", { class: "container" }, h("div", { class: "row" }, h("div", { class: this.scrollClass, innerHTML: this.htmlContent }), h("div", { class: "pos-relative show-bottom" }, h("div", { class: "btn-buletin" }, h("div", { class: "d-flex two-buttons" }, h("button", { class: "normal-button red-button", disabled: !this.buttonEnabled, onClick: () => this.buttonClick(false) }, this.translations.AgreementCheckValues.ButtonNo), h("button", { class: "normal-button", disabled: !this.buttonEnabled, onClick: () => this.buttonClick(true) }, this.translations.AgreementCheckValues.ButtonYes)), h("p", { class: "main-text font-size-18 text-right mb-0" }, this.translations.GlobalValues.FooterText))))));
     return this.htmlContent ? content : h("div", null);
   }
   static get is() { return "agreement-check"; }

package/dist/collection/components/common/camera-error/camera-error.js

@@ -5,6 +5,7 @@ import { FlowStatus } from '../../../models/FlowStatus';
 import { FlowSteps } from '../../../models/FlowSteps';
 import { MobileOS } from '../../../models/IDevice';
 import { BaseComponent } from '../../base-component';
+import { Translations } from '../../../helpers/TranslationUtils';
 export class CameraError {
   constructor() {
     this.title = undefined;
@@ -15,15 +16,16 @@ export class CameraError {
     this.baseComponent.setEventEmitter(this.apiErrorEvent);
   }
   async componentWillLoad() {
+    this.translations = await Translations.getValues();
     this.buttonDisabled = false;
-    this.title = this.baseComponent.translations.CameraErrorValues.Title;
-    this.description = this.baseComponent.translations.CameraErrorValues.Description;
-    this.buttonText = this.baseComponent.translations.CameraErrorValues.Button;
+    this.title = this.translations.CameraErrorValues.Title;
+    this.description = this.translations.CameraErrorValues.Description;
+    this.buttonText = this.translations.CameraErrorValues.Button;
   }
   async componentDidLoad() {
     await this.baseComponent.initialize();
     if (store.device.mobileOS != MobileOS.iOS) {
-      this.demoVideo.src = this.baseComponent.translations.CameraErrorValues.HowToLink;
+      this.demoVideo.src = this.translations.CameraErrorValues.HowToLink;
       this.demoVideo.loop = true;
       this.demoVideo.play();
     }
@@ -49,7 +51,7 @@ export class CameraError {
     }
   }
   render() {
-    return (h("div", { class: "container" }, h("div", { class: "row" }, h("h1", { class: "color-red" }, this.title), h("div", null, h("p", { class: "color-red font-weight-bold font-size-25 mt-5" }, this.description)), h("div", { hidden: store.device.mobileOS == MobileOS.iOS }, h("video", { id: "howtoPermissions", class: "video-demo", playsinline: true, ref: el => (this.demoVideo = el) }, h("source", { type: "video/mp4" }))), h("div", { class: "pos-relative show-bottom" }, h("div", { class: "btn-buletin" }, h("button", { class: "main-button", type: "button", disabled: this.buttonDisabled, onClick: () => this.buttonClick() }, this.buttonText), h("p", { class: "main-text font-size-18 text-right mb-0" }, this.baseComponent.translations.GlobalValues.FooterText))))));
+    return (h("div", { class: "container" }, h("div", { class: "row" }, h("h1", { class: "color-red" }, this.title), h("div", null, h("p", { class: "color-red font-weight-bold font-size-25 mt-5" }, this.description)), h("div", { hidden: store.device.mobileOS == MobileOS.iOS }, h("video", { id: "howtoPermissions", class: "video-demo", playsinline: true, ref: el => (this.demoVideo = el) }, h("source", { type: "video/mp4" }))), h("div", { class: "pos-relative show-bottom" }, h("div", { class: "btn-buletin" }, h("button", { class: "main-button", type: "button", disabled: this.buttonDisabled, onClick: () => this.buttonClick() }, this.buttonText), h("p", { class: "main-text font-size-18 text-right mb-0" }, this.translations.GlobalValues.FooterText))))));
   }
   static get is() { return "camera-error"; }
   static get originalStyleUrls() {

package/dist/collection/components/common/capture-error/capture-error.js

@@ -2,6 +2,7 @@ import { h } from '@stencil/core';
 import { delay } from '../../../utils/utils';
 import { BaseComponent } from '../../base-component';
 import { FlowMoments, FlowSteps } from '../../../models/FlowSteps';
+import { Translations } from '../../../helpers/TranslationUtils';
 export class CaptureError {
   constructor() {
     this.type = undefined;
@@ -10,18 +11,19 @@ export class CaptureError {
     this.baseComponent = new BaseComponent(FlowSteps.CiError);
   }
   async componentWillLoad() {
+    this.translations = await Translations.getValues();
     this.buttonEnabled = false;
     if (this.type == 'ID') {
-      this.titleR1 = this.baseComponent.translations.IdCaptureValues.ErrorTitleR1;
-      this.titleR2 = this.baseComponent.translations.IdCaptureValues.ErrorTitleR2;
-      this.descriptionR1 = this.baseComponent.translations.IdCaptureValues.ErrorR1;
-      this.descriptionR2 = this.baseComponent.translations.IdCaptureValues.ErrorR2;
+      this.titleR1 = this.translations.IdCaptureValues.ErrorTitleR1;
+      this.titleR2 = this.translations.IdCaptureValues.ErrorTitleR2;
+      this.descriptionR1 = this.translations.IdCaptureValues.ErrorR1;
+      this.descriptionR2 = this.translations.IdCaptureValues.ErrorR2;
     }
     if (this.type == 'LIVENESS') {
-      this.titleR1 = this.baseComponent.translations.SelfieCaptureValues.ErrorTitleR1;
-      this.titleR2 = this.baseComponent.translations.SelfieCaptureValues.ErrorTitleR2;
-      this.descriptionR1 = this.baseComponent.translations.SelfieCaptureValues.ErrorR1;
-      this.descriptionR2 = this.baseComponent.translations.SelfieCaptureValues.ErrorR2;
+      this.titleR1 = this.translations.SelfieCaptureValues.ErrorTitleR1;
+      this.titleR2 = this.translations.SelfieCaptureValues.ErrorTitleR2;
+      this.descriptionR1 = this.translations.SelfieCaptureValues.ErrorR1;
+      this.descriptionR2 = this.translations.SelfieCaptureValues.ErrorR2;
     }
   }
   async componentDidLoad() {
@@ -30,7 +32,7 @@ export class CaptureError {
       this.buttonText = i.toString();
       await delay(1000);
     }
-    this.buttonText = this.baseComponent.translations.IdCaptureValues.Button;
+    this.buttonText = this.translations.IdCaptureValues.Button;
     this.buttonEnabled = true;
   }
   async buttonClick() {
@@ -39,7 +41,7 @@ export class CaptureError {
     this.eventCaptureErrorDone.emit();
   }
   render() {
-    return (h("div", { class: "container" }, h("div", { class: "row" }, h("h1", { class: "color-red" }, this.titleR1), h("h1", { class: "color-red" }, this.titleR2), h("div", null, h("p", { class: "color-red font-weight-bold font-size-25 mt-5" }, this.descriptionR1), h("p", { class: "color-red font-weight-bold font-size-25 mt-5" }, this.descriptionR2)), h("div", { class: "pos-relative show-bottom" }, h("div", { class: "btn-buletin" }, h("button", { class: "main-button", type: "button", disabled: !this.buttonEnabled, onClick: () => this.buttonClick() }, this.buttonText), h("p", { class: "main-text font-size-18 text-right mb-0" }, this.baseComponent.translations.GlobalValues.FooterText))))));
+    return (h("div", { class: "container" }, h("div", { class: "row" }, h("h1", { class: "color-red" }, this.titleR1), h("h1", { class: "color-red" }, this.titleR2), h("div", null, h("p", { class: "color-red font-weight-bold font-size-25 mt-5" }, this.descriptionR1), h("p", { class: "color-red font-weight-bold font-size-25 mt-5" }, this.descriptionR2)), h("div", { class: "pos-relative show-bottom" }, h("div", { class: "btn-buletin" }, h("button", { class: "main-button", type: "button", disabled: !this.buttonEnabled, onClick: () => this.buttonClick() }, this.buttonText), h("p", { class: "main-text font-size-18 text-right mb-0" }, this.translations.GlobalValues.FooterText))))));
   }
   static get is() { return "capture-error"; }
   static get originalStyleUrls() {

package/dist/collection/components/common/how-to-info/how-to-info.js

@@ -3,6 +3,7 @@ import store from '../../../helpers/store';
 import { FlowStatus } from '../../../models/FlowStatus';
 import { BaseComponent } from '../../base-component';
 import { FlowSteps } from '../../../models/FlowSteps';
+import { Translations } from '../../../helpers/TranslationUtils';
 export class HowToInfo {
   constructor() { this.idSide = undefined; this.topTitle = undefined; this.subTitle = undefined; this.imagePath = undefined; this.buttonText = undefined; this.buttonEnabled = undefined; }
   async componentDidLoad() {
@@ -15,34 +16,35 @@ export class HowToInfo {
     this.buttonEnabled = false;
     this.eventHowToInfoDone.emit();
   }
-  componentWillLoad() {
+  async componentWillLoad() {
+    this.translations = await Translations.getValues();
     this.subTitle = '';
     this.buttonEnabled = true;
     if (store.flowStatus == FlowStatus.ID) {
-      this.topTitle = this.baseComponent.translations.HowToValues.IdTitile;
+      this.topTitle = this.translations.HowToValues.IdTitile;
       this.imagePath = 'https://ekyc.blob.core.windows.net/$web/howto_id.png';
-      this.buttonText = this.baseComponent.translations.HowToValues.IdButton;
+      this.buttonText = this.translations.HowToValues.IdButton;
       if (this.idSide == 'front') {
         this.baseComponent = new BaseComponent(FlowSteps.CiFrontHowTo);
-        this.subTitle = this.baseComponent.translations.HowToValues.IdSubTitileFace;
+        this.subTitle = this.translations.HowToValues.IdSubTitileFace;
       }
       if (this.idSide == 'back') {
         this.baseComponent = new BaseComponent(FlowSteps.CiBackHowTo);
-        this.subTitle = this.baseComponent.translations.HowToValues.IdSubTitileBack;
+        this.subTitle = this.translations.HowToValues.IdSubTitileBack;
       }
     }
     if (store.flowStatus == FlowStatus.LIVENESS) {
       this.baseComponent = new BaseComponent(FlowSteps.SelfieHowTo);
-      this.topTitle = this.baseComponent.translations.HowToValues.SelfieTitile;
-      this.subTitle = this.baseComponent.translations.HowToValues.SelfieSubTitile;
+      this.topTitle = this.translations.HowToValues.SelfieTitile;
+      this.subTitle = this.translations.HowToValues.SelfieSubTitile;
       this.imagePath = 'https://ekyc.blob.core.windows.net/$web/howto_selfie.png';
-      this.buttonText = this.baseComponent.translations.HowToValues.SelfieButton;
+      this.buttonText = this.translations.HowToValues.SelfieButton;
     }
     this.baseComponent.setEventEmitter(this.apiErrorEvent);
   }
   render() {
     let sub = this.subTitle != '' ? h("p", { class: "font-size-2" }, this.subTitle) : null;
-    return (h("div", { class: "container" }, h("div", { class: "row" }, h("div", { class: "div-ci align-center" }, h("img", { src: this.imagePath })), h("div", { class: "text-center" }, h("h1", null, this.topTitle), sub), h("div", { class: "pos-relative show-bottom" }, h("div", { class: "btn-buletin" }, h("button", { class: "main-button", disabled: !this.buttonEnabled, onClick: () => this.buttonClick() }, this.buttonText), h("p", { class: "main-text font-size-18 text-right mb-0" }, this.baseComponent.translations.GlobalValues.FooterText))))));
+    return (h("div", { class: "container" }, h("div", { class: "row" }, h("div", { class: "div-ci align-center" }, h("img", { src: this.imagePath })), h("div", { class: "text-center" }, h("h1", null, this.topTitle), sub), h("div", { class: "pos-relative show-bottom" }, h("div", { class: "btn-buletin" }, h("button", { class: "main-button", disabled: !this.buttonEnabled, onClick: () => this.buttonClick() }, this.buttonText), h("p", { class: "main-text font-size-18 text-right mb-0" }, this.translations.GlobalValues.FooterText))))));
   }
   static get is() { return "how-to-info"; }
   static get originalStyleUrls() {

package/dist/collection/components/common/id-back-capture/id-back-capture.js

@@ -10,6 +10,7 @@ import { BaseComponent } from '../../base-component';
 import { FlowMoments, FlowSteps } from '../../../models/FlowSteps';
 import { VerificationMode } from '../../../models/IVerificationMode';
 import { IdCaptureValues } from '../../../helpers/textValues';
+import { Translations } from '../../../helpers/TranslationUtils';
 // import { IDPose } from '../../libs/IDML5Detector/IDPose';
 export class IdBackCapture {
   // @State() private animationPath: string;
@@ -36,6 +37,7 @@ export class IdBackCapture {
     this.cameraSize = event.detail;
   }
   async componentWillLoad() {
+    this.translations = await Translations.getValues();
     //this.videoDemoStyle = this.device.isMobile ? { width: window.screen.width + 'px', height: window.screen.height + 'px', 'object-fit': 'fill' } : {};
     if (!navigator.mediaDevices) {
       this.apiErrorEvent.emit({ message: 'This browser does not support webRTC' });
@@ -43,14 +45,14 @@ export class IdBackCapture {
   }
   async componentDidLoad() {
     await this.baseComponent.logStep(FlowSteps.CiBackCapture, FlowMoments.Initialized);
-    this.titleMesage = this.baseComponent.translations.IdCaptureValues.TtileRotate;
+    this.titleMesage = this.translations.IdCaptureValues.TtileRotate;
     this.demoVideo.src = IdCaptureValues.IDPoseDemoMapping[IDPose.Rotate];
     this.demoVideo.play();
-    await delay(this.baseComponent.translations.GlobalValues.VideoLenght);
-    this.titleMesage = this.baseComponent.translations.IdCaptureValues.TitleBack;
+    await delay(this.translations.GlobalValues.VideoLenght);
+    this.titleMesage = this.translations.IdCaptureValues.TitleBack;
     this.demoVideo.src = IdCaptureValues.IDPoseDemoMapping[IDPose.BackStraight];
     this.demoVideo.play();
-    await delay(this.baseComponent.translations.GlobalValues.VideoLenght);
+    await delay(this.translations.GlobalValues.VideoLenght);
     this.showDemo = false;
     this.openCamera();
   }
@@ -84,7 +86,7 @@ export class IdBackCapture {
     if (this.verified)
       return;
     this.verified = true;
-    this.titleMesage = this.baseComponent.translations.IdCaptureValues.Loading;
+    this.titleMesage = this.translations.IdCaptureValues.Loading;
     this.closeCamera();
     this.showDemo = true;
     this.demoVideo.src = 'https://ekyc.blob.core.windows.net/$web/animations/uploading_id.mp4';
@@ -109,7 +111,7 @@ export class IdBackCapture {
     let titleClass = this.verified ? 'color-black-2 text-center' : 'color-white text-center';
     //let videoClass = this.device.isMobile ? '' : 'video-demo';
     let bgDemo = this.verified ? 'container' : 'container bg-black';
-    return (h("div", { class: bgDemo }, h("div", { class: "container-video" }, h("div", { hidden: this.showDemo == false }, h("video", { id: "howtoBack", class: "video-demo", playsinline: true, ref: el => (this.demoVideo = el) }, h("source", { type: "video/mp4" }))), h("div", { hidden: this.showDemo }, h("div", { hidden: this.verified }, h("div", { class: "video-capture" }, h("div", { style: cameraStyle }, h("div", { style: cameraStyleInner }, h("camera-comp", { "capture-mode": "id" })))))), h("div", { class: "capture-title" }, h("h1", { class: titleClass }, this.titleMesage), h("p", { class: "main-text font-size-18 text-right mb-0" }, this.baseComponent.translations.GlobalValues.FooterText)))));
+    return (h("div", { class: bgDemo }, h("div", { class: "container-video" }, h("div", { hidden: this.showDemo == false }, h("video", { id: "howtoBack", class: "video-demo", playsinline: true, ref: el => (this.demoVideo = el) }, h("source", { type: "video/mp4" }))), h("div", { hidden: this.showDemo }, h("div", { hidden: this.verified }, h("div", { class: "video-capture" }, h("div", { style: cameraStyle }, h("div", { style: cameraStyleInner }, h("camera-comp", { "capture-mode": "id" })))))), h("div", { class: "capture-title" }, h("h1", { class: titleClass }, this.titleMesage), h("p", { class: "main-text font-size-18 text-right mb-0" }, this.translations.GlobalValues.FooterText)))));
   }
   static get is() { return "id-back-capture"; }
   static get originalStyleUrls() {

package/dist/collection/components/common/id-capture/id-capture.js

@@ -10,6 +10,7 @@ import store from '../../../helpers/store';
 import { BaseComponent } from '../../base-component';
 import { FlowMoments, FlowSteps } from '../../../models/FlowSteps';
 import { VerificationMode } from '../../../models/IVerificationMode';
+import { Translations } from '../../../helpers/TranslationUtils';
 // import { IDPose } from '../../libs/IDML5Detector/IDPose';
 export class IdCapture {
   // @State() private animationPath: string;
@@ -36,7 +37,8 @@ export class IdCapture {
     this.cameraSize = event.detail;
   }
   async componentWillLoad() {
-    this.titleMesage = this.baseComponent.translations.IdCaptureValues.Title;
+    this.translations = await Translations.getValues();
+    this.titleMesage = this.translations.IdCaptureValues.Title;
     //this.videoDemoStyle = this.device.isMobile ? { 'width': window.screen.width + 'px', 'height': window.screen.height + 'px', 'object-fit': 'fill' } : {};
     if (!navigator.mediaDevices) {
       this.apiErrorEvent.emit({ message: 'This browser does not support webRTC' });
@@ -46,7 +48,7 @@ export class IdCapture {
     await this.baseComponent.logStep(FlowSteps.CiFrontCapture, FlowMoments.Initialized);
     this.demoVideo.src = IdCaptureValues.IDPoseDemoMapping[IDPose.Straight];
     this.demoVideo.play();
-    await delay(this.baseComponent.translations.GlobalValues.VideoLenght);
+    await delay(this.translations.GlobalValues.VideoLenght);
     this.showDemo = false;
     this.openCamera();
   }
@@ -88,7 +90,7 @@ export class IdCapture {
     if (this.verified)
       return;
     this.verified = true;
-    this.titleMesage = this.baseComponent.translations.IdCaptureValues.Loading;
+    this.titleMesage = this.translations.IdCaptureValues.Loading;
     this.closeCamera();
     this.showDemo = true;
     this.demoVideo.src = 'https://ekyc.blob.core.windows.net/$web/animations/uploading_id.mp4';
@@ -110,7 +112,7 @@ export class IdCapture {
     let titleClass = this.verified ? 'color-black-2 text-center' : 'color-white text-center';
     //let videoClass = this.device.isMobile ? '' : 'video-demo';
     let bgDemo = this.verified ? 'container' : 'container bg-black';
-    return (h("div", { class: bgDemo }, h("div", { class: "container-video" }, h("div", { hidden: this.showDemo == false }, h("video", { id: "howtoFront", class: "video-demo", playsinline: true, ref: el => (this.demoVideo = el) }, h("source", { type: "video/mp4" }))), h("div", { hidden: this.showDemo }, h("div", { hidden: this.verified }, h("div", { class: "video-capture" }, h("div", { style: cameraStyle }, h("div", { style: cameraStyleInner }, h("camera-comp", { "capture-mode": "id" })))))), h("div", { class: "capture-title" }, h("h1", { class: titleClass }, this.titleMesage), h("p", { class: "main-text font-size-18 text-right mb-0" }, this.baseComponent.translations.GlobalValues.FooterText)))));
+    return (h("div", { class: bgDemo }, h("div", { class: "container-video" }, h("div", { hidden: this.showDemo == false }, h("video", { id: "howtoFront", class: "video-demo", playsinline: true, ref: el => (this.demoVideo = el) }, h("source", { type: "video/mp4" }))), h("div", { hidden: this.showDemo }, h("div", { hidden: this.verified }, h("div", { class: "video-capture" }, h("div", { style: cameraStyle }, h("div", { style: cameraStyleInner }, h("camera-comp", { "capture-mode": "id" })))))), h("div", { class: "capture-title" }, h("h1", { class: titleClass }, this.titleMesage), h("p", { class: "main-text font-size-18 text-right mb-0" }, this.translations.GlobalValues.FooterText)))));
   }
   static get is() { return "id-capture"; }
   static get originalStyleUrls() {

package/dist/collection/components/common/id-tilt/id-tilt.js

@@ -10,6 +10,7 @@ import store from '../../../helpers/store';
 import { BaseComponent } from '../../base-component';
 import { FlowMoments, FlowSteps } from '../../../models/FlowSteps';
 import { VerificationMode } from '../../../models/IVerificationMode';
+import { Translations } from '../../../helpers/TranslationUtils';
 // import { IDPose } from '../../libs/IDML5Detector/IDPose';
 export class IdTilt {
   // @State() private animationPath: string;
@@ -36,7 +37,8 @@ export class IdTilt {
     this.cameraSize = event.detail;
   }
   async componentWillLoad() {
-    this.titleMesage = this.baseComponent.translations.IdCaptureValues.IDPoseMapping;
+    this.translations = await Translations.getValues();
+    this.titleMesage = this.translations.IdCaptureValues.IDPoseMapping;
     //this.videoDemoStyle = this.device.isMobile ? { 'width': window.screen.width + 'px', 'height': window.screen.height + 'px', 'object-fit': 'fill' } : {};
     if (!navigator.mediaDevices) {
       this.apiErrorEvent.emit({ message: 'This browser does not support webRTC' });
@@ -46,7 +48,7 @@ export class IdTilt {
     await this.baseComponent.logStep(FlowSteps.CiTilt, FlowMoments.Initialized);
     this.demoVideo.src = IdCaptureValues.IDPoseDemoMapping[IDPose.Tilted];
     this.demoVideo.play();
-    await delay(this.baseComponent.translations.GlobalValues.VideoLenght);
+    await delay(this.translations.GlobalValues.VideoLenght);
     this.showDemo = false;
     this.openCamera();
   }
@@ -88,7 +90,7 @@ export class IdTilt {
     if (this.verified)
       return;
     this.verified = true;
-    this.titleMesage = this.baseComponent.translations.IdCaptureValues.Loading;
+    this.titleMesage = this.translations.IdCaptureValues.Loading;
     this.closeCamera();
     this.showDemo = true;
     this.demoVideo.src = 'https://ekyc.blob.core.windows.net/$web/animations/uploading_id.mp4';
@@ -110,7 +112,7 @@ export class IdTilt {
     let titleClass = this.verified ? 'color-black-2 text-center' : 'color-white text-center';
     //let videoClass = this.device.isMobile ? '' : 'video-demo';
     let bgDemo = this.verified ? 'container' : 'container bg-black';
-    return (h("div", { class: bgDemo }, h("div", { class: "container-video" }, h("div", { hidden: this.showDemo == false }, h("video", { id: "howtoFront", class: "video-demo", playsinline: true, ref: el => (this.demoVideo = el) }, h("source", { type: "video/mp4" }))), h("div", { hidden: this.showDemo }, h("div", { hidden: this.verified }, h("div", { class: "video-capture" }, h("div", { style: cameraStyle }, h("div", { style: cameraStyleInner }, h("camera-comp", { "capture-mode": "tilt" })))))), h("div", { class: "capture-title" }, h("h1", { class: titleClass }, this.titleMesage), h("p", { class: "main-text font-size-18 text-right mb-0" }, this.baseComponent.translations.GlobalValues.FooterText)))));
+    return (h("div", { class: bgDemo }, h("div", { class: "container-video" }, h("div", { hidden: this.showDemo == false }, h("video", { id: "howtoFront", class: "video-demo", playsinline: true, ref: el => (this.demoVideo = el) }, h("source", { type: "video/mp4" }))), h("div", { hidden: this.showDemo }, h("div", { hidden: this.verified }, h("div", { class: "video-capture" }, h("div", { style: cameraStyle }, h("div", { style: cameraStyleInner }, h("camera-comp", { "capture-mode": "tilt" })))))), h("div", { class: "capture-title" }, h("h1", { class: titleClass }, this.titleMesage), h("p", { class: "main-text font-size-18 text-right mb-0" }, this.translations.GlobalValues.FooterText)))));
   }
   static get is() { return "id-tilt"; }
   static get originalStyleUrls() {

package/dist/collection/components/common/random-actions/random-actions.js

@@ -1,14 +1,13 @@
 import { h } from '@stencil/core';
-import { BaseComponent } from '../../base-component';
-import { FlowSteps } from '../../../models/FlowSteps';
+import { Translations } from '../../../helpers/TranslationUtils';
 export class RandomActions {
-  constructor() {
-    this.baseComponent = new BaseComponent(FlowSteps.SelfieTilt);
+  constructor() { }
+  async componentWillLoad() {
+    this.translations = await Translations.getValues();
   }
-  componentWillLoad() { }
   buttonClick() { }
   render() {
-    return (h("div", { class: "container" }, h("div", { class: "row" }, h("div", { class: "text-center" }, h("h1", null, this.topTitle)), h("div", { class: "pos-relative show-bottom" }, h("div", { class: "btn-buletin" }, h("button", { class: "main-button", onClick: () => this.buttonClick() }, this.buttonText), h("p", { class: "main-text font-size-18 text-right mb-0" }, this.baseComponent.translations.GlobalValues.FooterText))))));
+    return (h("div", { class: "container" }, h("div", { class: "row" }, h("div", { class: "text-center" }, h("h1", null, this.topTitle)), h("div", { class: "pos-relative show-bottom" }, h("div", { class: "btn-buletin" }, h("button", { class: "main-button", onClick: () => this.buttonClick() }, this.buttonText), h("p", { class: "main-text font-size-18 text-right mb-0" }, this.translations.GlobalValues.FooterText))))));
   }
   static get is() { return "random-actions"; }
   static get originalStyleUrls() {

package/dist/collection/components/common/selfie-capture/selfie-capture.js

@@ -9,6 +9,7 @@ import store from '../../../helpers/store';
 import { BaseComponent } from '../../base-component';
 import { FlowMoments, FlowSteps } from '../../../models/FlowSteps';
 import { VerificationMode } from '../../../models/IVerificationMode';
+import { Translations } from '../../../helpers/TranslationUtils';
 export class SelfieCapture {
   // @State() private animationPath: string;
   constructor() {
@@ -39,8 +40,9 @@ export class SelfieCapture {
     this.captureHeight = height - Math.round((window.screen.height - height) / 2);
     this.captureWidth = Math.round((this.captureHeight * 9) / 16);
   }
-  componentWillLoad() {
-    this.titleMesage = this.baseComponent.translations.SelfieCaptureValues.Title;
+  async componentWillLoad() {
+    this.translations = await Translations.getValues();
+    this.titleMesage = this.translations.SelfieCaptureValues.Title;
     //this.videoDemoStyle = this.device.isMobile ? { 'width': window.screen.width + 'px', 'height': window.screen.height + 'px', 'object-fit': 'fill' } : {};
     if (!navigator.mediaDevices) {
       this.apiErrorEvent.emit({ message: 'This browser does not support webRTC' });
@@ -50,7 +52,7 @@ export class SelfieCapture {
     await this.baseComponent.logStep(FlowSteps.SelfieCapture, FlowMoments.Initialized);
     this.demoVideo.src = SelfieCaptureValues.FacePoseDemoMapping[FacePose.Main];
     this.demoVideo.play();
-    await delay(this.baseComponent.translations.GlobalValues.VideoLenght);
+    await delay(this.translations.GlobalValues.VideoLenght);
     this.demoEnded = true;
     this.openCamera();
   }
@@ -91,7 +93,7 @@ export class SelfieCapture {
     if (this.verified)
       return;
     this.verified = true;
-    this.titleMesage = this.baseComponent.translations.SelfieCaptureValues.Loading;
+    this.titleMesage = this.translations.SelfieCaptureValues.Loading;
     this.closeCamera();
     this.demoEnded = false;
     this.demoVideo.src = this.uploadingLink;
@@ -113,7 +115,7 @@ export class SelfieCapture {
     let titleClass = this.verified ? 'color-black-2 text-center' : 'color-white text-center';
     //let videoClass = this.device.isMobile ? '' : 'video-demo';
     let bgDemo = this.verified ? 'container' : 'container bg-black';
-    return (h("div", { class: bgDemo }, h("div", { class: "container-video" }, h("div", { hidden: this.demoEnded }, h("video", { id: "howtoSelfie", class: "video-demo", playsinline: true, ref: el => (this.demoVideo = el) }, h("source", { type: "video/mp4" }))), h("div", { hidden: this.demoEnded == false }, h("div", { hidden: this.verified }, h("div", { class: "video-capture" }, h("div", { style: cameraStyle }, h("camera-comp", { "capture-mode": "selfie" }))))), h("div", { class: "capture-title" }, h("h1", { class: titleClass }, this.titleMesage), h("p", { class: "main-text font-size-18 text-right mb-0" }, this.baseComponent.translations.GlobalValues.FooterText)))));
+    return (h("div", { class: bgDemo }, h("div", { class: "container-video" }, h("div", { hidden: this.demoEnded }, h("video", { id: "howtoSelfie", class: "video-demo", playsinline: true, ref: el => (this.demoVideo = el) }, h("source", { type: "video/mp4" }))), h("div", { hidden: this.demoEnded == false }, h("div", { hidden: this.verified }, h("div", { class: "video-capture" }, h("div", { style: cameraStyle }, h("camera-comp", { "capture-mode": "selfie" }))))), h("div", { class: "capture-title" }, h("h1", { class: titleClass }, this.titleMesage), h("p", { class: "main-text font-size-18 text-right mb-0" }, this.translations.GlobalValues.FooterText)))));
   }
   static get is() { return "selfie-capture"; }
   static get originalStyleUrls() {

package/dist/collection/components/common/selfie-tilt/selfie-tilt.js

@@ -9,6 +9,7 @@ import { BaseComponent } from '../../base-component';
 import { FlowMoments, FlowSteps } from '../../../models/FlowSteps';
 import { VerificationMode } from '../../../models/IVerificationMode';
 import { FacePose } from '../../../libs/FaceML5Detector/FacePose';
+import { Translations } from '../../../helpers/TranslationUtils';
 export class SelfieTilt {
   // @State() private animationPath: string;
   constructor() {
@@ -39,8 +40,9 @@ export class SelfieTilt {
     this.captureHeight = height - Math.round((window.screen.height - height) / 2);
     this.captureWidth = Math.round((this.captureHeight * 9) / 16);
   }
-  componentWillLoad() {
-    this.titleMesage = this.baseComponent.translations.SelfieCaptureValues.Title;
+  async componentWillLoad() {
+    this.translations = await Translations.getValues();
+    this.titleMesage = this.translations.SelfieCaptureValues.Title;
     //this.videoDemoStyle = this.device.isMobile ? { 'width': window.screen.width + 'px', 'height': window.screen.height + 'px', 'object-fit': 'fill' } : {};
     if (!navigator.mediaDevices) {
       this.apiErrorEvent.emit({ message: 'This browser does not support webRTC' });
@@ -49,11 +51,11 @@ export class SelfieTilt {
   async componentDidLoad() {
     this.mainStream = Stream.getInstance(VerificationMode.Tilt);
     await this.baseComponent.logStep(FlowSteps.SelfieTilt, FlowMoments.Initialized);
-    this.titleMesage = this.baseComponent.translations.SelfieCaptureValues.FacePoseMapping[Object.values(FacePose).indexOf(this.mainStream.facePose)];
+    this.titleMesage = this.translations.SelfieCaptureValues.FacePoseMapping[Object.values(FacePose).indexOf(this.mainStream.facePose)];
     this.demoEnded = false;
     this.demoVideo.src = SelfieCaptureValues.FacePoseDemoMapping[this.mainStream.facePose];
     this.demoVideo.play();
-    await delay(this.baseComponent.translations.GlobalValues.VideoLenght);
+    await delay(this.translations.GlobalValues.VideoLenght);
     this.demoEnded = true;
     this.openCamera();
   }
@@ -93,7 +95,7 @@ export class SelfieTilt {
     if (this.verified)
       return;
     this.verified = true;
-    this.titleMesage = this.baseComponent.translations.SelfieCaptureValues.Loading;
+    this.titleMesage = this.translations.SelfieCaptureValues.Loading;
     this.closeCamera();
     this.demoEnded = false;
     this.demoVideo.src = this.uploadingLink;
@@ -115,7 +117,7 @@ export class SelfieTilt {
     let titleClass = this.verified ? 'color-black-2 text-center' : 'color-white text-center';
     //let videoClass = this.device.isMobile ? '' : 'video-demo';
     let bgDemo = this.verified ? 'container' : 'container bg-black';
-    return (h("div", { class: bgDemo }, h("div", { class: "container-video" }, h("div", { hidden: this.demoEnded }, h("video", { id: "howtoSelfie", class: "video-demo", playsinline: true, ref: el => (this.demoVideo = el) }, h("source", { type: "video/mp4" }))), h("div", { hidden: this.demoEnded == false }, h("div", { hidden: this.verified }, h("div", { class: "video-capture" }, h("div", { style: cameraStyle }, h("camera-comp", { "capture-mode": "selfie" }))))), h("div", { class: "capture-title" }, h("h1", { class: titleClass }, this.titleMesage), h("p", { class: "main-text font-size-18 text-right mb-0" }, this.baseComponent.translations.GlobalValues.FooterText)))));
+    return (h("div", { class: bgDemo }, h("div", { class: "container-video" }, h("div", { hidden: this.demoEnded }, h("video", { id: "howtoSelfie", class: "video-demo", playsinline: true, ref: el => (this.demoVideo = el) }, h("source", { type: "video/mp4" }))), h("div", { hidden: this.demoEnded == false }, h("div", { hidden: this.verified }, h("div", { class: "video-capture" }, h("div", { style: cameraStyle }, h("camera-comp", { "capture-mode": "selfie" }))))), h("div", { class: "capture-title" }, h("h1", { class: titleClass }, this.titleMesage), h("p", { class: "main-text font-size-18 text-right mb-0" }, this.translations.GlobalValues.FooterText)))));
   }
   static get is() { return "selfie-tilt"; }
   static get originalStyleUrls() {

package/dist/collection/components/flow/agreement-info/agreement-info.js

@@ -3,6 +3,7 @@ import store from '../../../helpers/store';
 import { FlowStatus } from '../../../models/FlowStatus';
 import { FlowSteps } from '../../../models/FlowSteps';
 import { BaseComponent } from '../../base-component';
+import { Translations } from '../../../helpers/TranslationUtils';
 export class AgreementInfo {
   constructor() {
     this.agreementsChecked = undefined;
@@ -17,7 +18,8 @@ export class AgreementInfo {
   async componentDidLoad() {
     await this.baseComponent.initialize();
   }
-  componentWillLoad() {
+  async componentWillLoad() {
+    this.translations = await Translations.getValues();
     this.openAgreements = false;
     this.openTerms = false;
   }
@@ -53,7 +55,7 @@ export class AgreementInfo {
   render() {
     let agreementsCheck = h("agreement-check", { agreementType: "agreement" });
     let termsCheck = h("agreement-check", { agreementType: "terms" });
-    let mainComp = (h("div", { class: "container" }, h("div", { class: "row" }, h("div", null, h("h1", { class: "text-center" }, this.baseComponent.translations.AgreementInfoValues.Title), h("div", { class: "d-flex space-between align-center" }, h("h3", { class: "main-text font-size-2", onClick: () => this.agreementsClicked() }, h("input", { type: "checkbox", readOnly: true, checked: this.agreementsChecked }), this.baseComponent.translations.AgreementInfoValues.Agreement)), h("div", { class: "d-flex space-between align-center" }, h("h3", { class: "main-text font-size-2", onClick: () => this.termsClicked() }, h("input", { type: "checkbox", readOnly: true, checked: this.termsChecked }), this.baseComponent.translations.AgreementInfoValues.Terms))), h("div", { class: "pos-relative show-bottom" }, h("div", { class: "btn-buletin" }, h("button", { class: "main-button", onClick: () => this.buttonClick() }, this.baseComponent.translations.AgreementInfoValues.Button), h("p", { class: "main-text font-size-18 text-right mb-0" }, this.baseComponent.translations.GlobalValues.FooterText))))));
+    let mainComp = (h("div", { class: "container" }, h("div", { class: "row" }, h("div", null, h("h1", { class: "text-center" }, this.translations.AgreementInfoValues.Title), h("div", { class: "d-flex space-between align-center" }, h("h3", { class: "main-text font-size-2", onClick: () => this.agreementsClicked() }, h("input", { type: "checkbox", readOnly: true, checked: this.agreementsChecked }), this.translations.AgreementInfoValues.Agreement)), h("div", { class: "d-flex space-between align-center" }, h("h3", { class: "main-text font-size-2", onClick: () => this.termsClicked() }, h("input", { type: "checkbox", readOnly: true, checked: this.termsChecked }), this.translations.AgreementInfoValues.Terms))), h("div", { class: "pos-relative show-bottom" }, h("div", { class: "btn-buletin" }, h("button", { class: "main-button", onClick: () => this.buttonClick() }, this.translations.AgreementInfoValues.Button), h("p", { class: "main-text font-size-18 text-right mb-0" }, this.translations.GlobalValues.FooterText))))));
     return this.openAgreements ? agreementsCheck : this.openTerms ? termsCheck : mainComp;
   }
   static get is() { return "agreement-info"; }

package/dist/collection/components/flow/end-redirect/end-redirect.js

@@ -3,17 +3,18 @@ import { h } from '@stencil/core';
 import completeImg from '../../../assets/complete.svg';
 import store from '../../../helpers/store';
 import Events from '../../../helpers/Events';
-import { BaseComponent } from '../../base-component';
-import { FlowSteps } from '../../../models/FlowSteps';
+import { Translations } from '../../../helpers/TranslationUtils';
 export class EndRedirect {
   constructor() {
-    this.baseComponent = new BaseComponent(FlowSteps.End);
+  }
+  async componentWillLoad() {
+    this.translations = await Translations.getValues();
   }
   async componentDidLoad() {
     Events.flowCompleted();
   }
   render() {
-    return (h("div", { class: "container" }, h("div", { class: "row" }, h("div", null, h("h1", { class: "text-center" }, this.baseComponent.translations.CompleteValues.Title), h("p", { class: "main-text font-size-18 mt-8 text-center" }, this.baseComponent.translations.CompleteValues.Description)), h("div", { class: "buletin-container" }, h("div", { class: "container-coin" }, h("div", { class: "coin-scale" }, h("div", { class: "coin-flip" }, h("img", { class: "w-40 coin", src: completeImg }))))), h("div", { class: "text-center" }, h("p", { class: "font-weight-900 font-size-3 color-black-2 text-center mt-20" }, this.baseComponent.translations.CompleteValues.Message), h("p", null, store.requestId)), h("div", { class: "btn-buletin" }, h("p", { class: "main-text font-size-18 text-center mb-0" }, this.baseComponent.translations.GlobalValues.FooterText)))));
+    return (h("div", { class: "container" }, h("div", { class: "row" }, h("div", null, h("h1", { class: "text-center" }, this.translations.CompleteValues.Title), h("p", { class: "main-text font-size-18 mt-8 text-center" }, this.translations.CompleteValues.Description)), h("div", { class: "buletin-container" }, h("div", { class: "container-coin" }, h("div", { class: "coin-scale" }, h("div", { class: "coin-flip" }, h("img", { class: "w-40 coin", src: completeImg }))))), h("div", { class: "text-center" }, h("p", { class: "font-weight-900 font-size-3 color-black-2 text-center mt-20" }, this.translations.CompleteValues.Message), h("p", null, store.requestId)), h("div", { class: "btn-buletin" }, h("p", { class: "main-text font-size-18 text-center mb-0" }, this.translations.GlobalValues.FooterText)))));
   }
   static get is() { return "end-redirect"; }
   static get originalStyleUrls() {

package/dist/collection/components/flow/landing-validation/landing-validation.js

@@ -16,6 +16,7 @@ import idSvg from '../../../assets/landing/id.svg';
 import idValidation from '../../../assets/landing/validation.svg';
 // @ts-ignore
 import idDevice from '../../../assets/landing/device.svg';
+import { Translations } from '../../../helpers/TranslationUtils';
 export class LandingValidation {
   constructor() {
     this.warningText = undefined;
@@ -25,6 +26,7 @@ export class LandingValidation {
   }
   async componentWillLoad() {
     Events.flowStarted();
+    this.translations = await Translations.getValues();
     this.baseComponent.apiCall = new ApiCall();
     this.buttonDisabled = false;
     await this.initRequest();
@@ -36,10 +38,10 @@ export class LandingValidation {
   }
   async initRequest() {
     if (store.hasIdBack) {
-      this.warningText = this.baseComponent.translations.LandingValues.WarningMd;
+      this.warningText = this.translations.LandingValues.WarningMd;
     }
     else {
-      this.warningText = this.baseComponent.translations.LandingValues.Warning;
+      this.warningText = this.translations.LandingValues.Warning;
     }
   }
   async startFlow() {
@@ -82,7 +84,7 @@ export class LandingValidation {
     }
   }
   render() {
-    return (h("div", { class: "container" }, h("div", { class: "row" }, h("div", null, h("h1", { class: "text-center" }, this.baseComponent.translations.LandingValues.Title), h("div", { class: "d-flex space-between align-center" }, h("p", { class: "main-text font-size-2" }, this.baseComponent.translations.LandingValues.Description), h("div", { class: "img-info" }, h("div", { class: "i-effect" }), h("img", { src: info })))), h("div", { class: "info-container" }, h("div", { class: "img-text" }, h("div", { class: "bg-img" }, h("img", { src: idSvg })), h("h3", null, this.baseComponent.translations.LandingValues.IdInfo)), h("div", { class: "img-text" }, h("div", { class: "bg-img" }, h("img", { src: idDevice })), h("h3", null, this.baseComponent.translations.LandingValues.DeviceInfo)), h("div", { class: "img-text" }, h("div", { class: "bg-img" }, h("img", { src: idValidation })), h("h3", null, this.baseComponent.translations.LandingValues.SmsInfo))), h("div", { class: "terms-container" }, h("h3", { class: "font-size-2 mb-1 text-center" }, this.warningText)), h("div", { class: "pos-relative show-bottom" }, h("div", { class: "btn-buletin" }, h("button", { class: "main-button", type: "button", disabled: !store.initialised || this.buttonDisabled, onClick: () => this.startFlow() }, this.baseComponent.translations.LandingValues.Button), h("p", { class: "main-text font-size-2 link-text mb-0", onClick: () => this.leaveFlow() }, this.baseComponent.translations.LandingValues.ButtonLeave), h("p", { class: "main-text font-size-18 text-right mb-0" }, this.baseComponent.translations.GlobalValues.FooterText))))));
+    return (h("div", { class: "container" }, h("div", { class: "row" }, h("div", null, h("h1", { class: "text-center" }, this.translations.LandingValues.Title), h("div", { class: "d-flex space-between align-center" }, h("p", { class: "main-text font-size-2" }, this.translations.LandingValues.Description), h("div", { class: "img-info" }, h("div", { class: "i-effect" }), h("img", { src: info })))), h("div", { class: "info-container" }, h("div", { class: "img-text" }, h("div", { class: "bg-img" }, h("img", { src: idSvg })), h("h3", null, this.translations.LandingValues.IdInfo)), h("div", { class: "img-text" }, h("div", { class: "bg-img" }, h("img", { src: idDevice })), h("h3", null, this.translations.LandingValues.DeviceInfo)), h("div", { class: "img-text" }, h("div", { class: "bg-img" }, h("img", { src: idValidation })), h("h3", null, this.translations.LandingValues.SmsInfo))), h("div", { class: "terms-container" }, h("h3", { class: "font-size-2 mb-1 text-center" }, this.warningText)), h("div", { class: "pos-relative show-bottom" }, h("div", { class: "btn-buletin" }, h("button", { class: "main-button", type: "button", disabled: !store.initialised || this.buttonDisabled, onClick: () => this.startFlow() }, this.translations.LandingValues.Button), h("p", { class: "main-text font-size-2 link-text mb-0", onClick: () => this.leaveFlow() }, this.translations.LandingValues.ButtonLeave), h("p", { class: "main-text font-size-18 text-right mb-0" }, this.translations.GlobalValues.FooterText))))));
   }
   static get is() { return "landing-validation"; }
   static get originalStyleUrls() {