@ekyc_qoobiss/qbs-ect-cmp 3.6.28 → 3.6.30

package/dist/cjs/agreement-check_19.cjs.entry.js

@@ -3,7 +3,230 @@
 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');
+
+var MobileOS;
+(function (MobileOS) {
+  MobileOS["Android"] = "android";
+  MobileOS["iOS"] = "ios";
+  MobileOS["Unknown"] = "unknown";
+  MobileOS["WindowsPhone"] = "Windows Phone";
+})(MobileOS || (MobileOS = {}));
+var DesktopOS;
+(function (DesktopOS) {
+  DesktopOS["Linux"] = "linux";
+  DesktopOS["MacOS"] = "mac_os";
+  DesktopOS["Unix"] = "unix";
+  DesktopOS["Unknown"] = "unknown";
+  DesktopOS["Windows"] = "windows";
+})(DesktopOS || (DesktopOS = {}));
+var Browser;
+(function (Browser) {
+  Browser["Chrome"] = "chrome";
+  Browser["Firefox"] = "firefox";
+  Browser["Safari"] = "safari";
+  Browser["Mi"] = "mi";
+  Browser["Unknown"] = "unknown";
+})(Browser || (Browser = {}));
+
+class DeviceDetection {
+  constructor() {
+    var _a, _b, _c, _d;
+    this.supportedScreenOrientation = (_b = (_a = ((screen === null || screen === void 0 ? void 0 : screen.orientation) || {}).type) !== null && _a !== void 0 ? _a : screen.mozOrientation) !== null && _b !== void 0 ? _b : screen.msOrientation;
+    this.safariScreenOrientation = !(screen === null || screen === void 0 ? void 0 : screen.orientation) && matchMedia('(orientation: portrait)').matches ? 'portrait-primary' : 'landscape-primary';
+    this.initialScreenOrientation = (_d = (_c = this.supportedScreenOrientation) !== null && _c !== void 0 ? _c : this.safariScreenOrientation) !== null && _d !== void 0 ? _d : 'portrait-primary';
+    this.userAgent = navigator.userAgent || navigator.vendor || window.opera || undefined;
+    this.isMobile = this.isMobileDevice();
+    this.isTablet = this.isTabletDevice();
+    this.isDesktop = !this.isMobile && !this.isTablet;
+  }
+  // Device typology
+  isMobileDevice() {
+    const regexs = [/(Android)(.+)(Mobile)/i, /BlackBerry/i, /iPhone|iPod/i, /Opera Mini/i, /IEMobile/i];
+    return regexs.some(b => this.userAgent.match(b));
+  }
+  isTabletDevice() {
+    const regex = /(ipad|tablet|(android(?!.*mobile))|(windows(?!.*phone)(.*touch))|kindle|playbook|silk|(puffin(?!.*(IP|AP|WP))))/;
+    return regex.test(this.userAgent.toLowerCase());
+  }
+  // Device Operating System
+  getMobileOS() {
+    if (this.isMobileDevice()) {
+      if (/windows phone/i.test(this.userAgent))
+        return MobileOS.WindowsPhone;
+      else if (/android/i.test(this.userAgent))
+        return MobileOS.Android;
+      else if (/iPad|iPhone|iPod/.test(this.userAgent) && !window.MSStream)
+        return MobileOS.iOS;
+      return MobileOS.Unknown;
+    }
+    else
+      return undefined;
+  }
+  getDesktopOS() {
+    if (this.isDesktop) {
+      if (this.userAgent.indexOf('Win') !== -1)
+        return DesktopOS.Windows;
+      else if (this.userAgent.indexOf('Mac') !== -1)
+        return DesktopOS.MacOS;
+      else if (this.userAgent.indexOf('X11') !== -1)
+        return DesktopOS.Unix;
+      else if (this.userAgent.indexOf('Linux') !== -1)
+        return DesktopOS.Linux;
+      return DesktopOS.Unknown;
+    }
+    else
+      return undefined;
+  }
+  getDeviceOS() {
+    var _a;
+    return (_a = this.getMobileOS()) !== null && _a !== void 0 ? _a : this.getDesktopOS();
+  }
+  getBrowser() {
+    if (/XiaoMi/i.test(this.userAgent) || /MiuiBrowser/i.test(this.userAgent))
+      return Browser.Mi;
+    var isChrome = /chrome/i.test(this.userAgent);
+    if (isChrome)
+      return Browser.Chrome;
+    if (/firefox/i.test(navigator.userAgent))
+      return Browser.Firefox;
+    else if (!isChrome && /safari/i.test(navigator.userAgent))
+      return Browser.Safari;
+    else
+      return Browser.Unknown;
+  }
+  getDevice() {
+    var device = {
+      isDesktop: this.isDesktop,
+      desktopOS: this.getDesktopOS(),
+      isWindowsDesktop: this.getDeviceOS() === DesktopOS.Windows,
+      isLinuxOrUnixDesktop: this.getDeviceOS() === DesktopOS.Linux || this.getDeviceOS() === DesktopOS.Unix,
+      isMobile: this.isMobile,
+      mobileOS: this.getMobileOS(),
+      isAndroidDevice: this.getDeviceOS() === MobileOS.Android,
+      isAppleDevice: this.getDeviceOS() === MobileOS.iOS || this.getDeviceOS() === DesktopOS.MacOS,
+      isUnknownMobileDevice: this.getDeviceOS() === MobileOS.Unknown,
+      browser: this.getBrowser(),
+      isTablet: this.isTablet,
+      initialScreenOrientation: this.initialScreenOrientation,
+    };
+    return device;
+  }
+}
+
+class Events {
+  static init(element) {
+    this.callingModule = element;
+  }
+  static flowEvent(step, moment) {
+    const eventName = `ect-${step.toString()}-${moment.toString()}-event`;
+    this.callingModule.dispatchEvent(new CustomEvent(eventName, {
+      detail: {},
+      bubbles: true,
+      cancelable: true,
+      composed: true,
+    }));
+  }
+  static flowStarted() {
+    this.callingModule.dispatchEvent(new CustomEvent('ect-started', {
+      detail: {},
+      bubbles: true,
+      cancelable: true,
+      composed: true,
+    }));
+  }
+  static flowAborted() {
+    sessionStorage.clear();
+    this.callingModule.dispatchEvent(new CustomEvent('ect-aborted', {
+      detail: {},
+      bubbles: true,
+      cancelable: true,
+      composed: true,
+    }));
+  }
+  static flowCompleted() {
+    sessionStorage.clear();
+    this.callingModule.dispatchEvent(new CustomEvent('ect-completed', {
+      detail: {},
+      bubbles: true,
+      cancelable: true,
+      composed: true,
+    }));
+  }
+  static flowError(error) {
+    sessionStorage.clear();
+    this.callingModule.dispatchEvent(new CustomEvent('ect-error', {
+      detail: { error },
+      bubbles: true,
+      cancelable: true,
+      composed: true,
+    }));
+  }
+  static tokenExpired() {
+    sessionStorage.clear();
+    this.callingModule.dispatchEvent(new CustomEvent('ect-session-expired', {
+      detail: {},
+      bubbles: true,
+      cancelable: true,
+      composed: true,
+    }));
+  }
+}
+
+class BaseComponent {
+  constructor(step) {
+    this.apiErrorEvent = null;
+    this.processError = null;
+    this.apiCall = new TranslationUtils.ApiCall();
+    if (step)
+      this.flowStep = step;
+    if (!TranslationUtils.state.device) {
+      TranslationUtils.state.device = new DeviceDetection().getDevice();
+    }
+  }
+  setEventEmitter(event) {
+    this.apiErrorEvent = event;
+  }
+  setErrorCallback(callback) {
+    this.processError = callback;
+  }
+  async logStep(step, moment) {
+    Events.flowEvent(step, moment);
+    try {
+      await this.apiCall.AddStep(step, moment);
+    }
+    catch (e) {
+      if (this.apiErrorEvent)
+        this.apiErrorEvent.emit(e);
+      else
+        this.processError(e, `${step}-${moment}`);
+    }
+  }
+  async initialize() {
+    Events.flowEvent(this.flowStep, TranslationUtils.FlowMoments.Initialized);
+    try {
+      await this.apiCall.AddStep(this.flowStep, TranslationUtils.FlowMoments.Initialized);
+    }
+    catch (e) {
+      if (this.apiErrorEvent)
+        this.apiErrorEvent.emit(e);
+      else
+        this.processError(e, `${this.flowStep}-${TranslationUtils.FlowMoments.Initialized}`);
+    }
+  }
+  async finalize() {
+    Events.flowEvent(this.flowStep, TranslationUtils.FlowMoments.Finalized);
+    try {
+      await this.apiCall.AddStep(this.flowStep, TranslationUtils.FlowMoments.Finalized);
+    }
+    catch (e) {
+      if (this.apiErrorEvent)
+        this.apiErrorEvent.emit(e);
+      else
+        this.processError(e, `${this.flowStep}-${TranslationUtils.FlowMoments.Finalized}`);
+    }
+  }
+}
 
 const agreementCheckCss = "";
 
@@ -16,11 +239,14 @@ const AgreementCheck = class {
     this.htmlContent = undefined;
     this.buttonEnabled = undefined;
     this.scrollClass = 'scroll';
-    this.apiCalls = new baseComponent.ApiCall();
+    this.apiCalls = new TranslationUtils.ApiCall();
     this.buttonEnabled = true;
-    this.baseComponent = new baseComponent.BaseComponent(baseComponent.FlowSteps.CameraError);
+    this.baseComponent = new BaseComponent(TranslationUtils.FlowSteps.Agreements);
     this.baseComponent.setEventEmitter(this.apiErrorEvent);
   }
+  async componentWillLoad() {
+    this.translations = await TranslationUtils.Translations.getValues();
+  }
   async componentDidLoad() {
     try {
       this.htmlContent = await this.apiCalls.GetAgreement(this.agreementType);
@@ -34,7 +260,7 @@ const AgreementCheck = class {
     this.agreementAcceptance.emit({ agreementType: this.agreementType, result });
   }
   render() {
-    let content = (index.h("div", { class: "container" }, index.h("div", { class: "row" }, index.h("div", { class: this.scrollClass, innerHTML: this.htmlContent }), index.h("div", { class: "pos-relative show-bottom" }, index.h("div", { class: "btn-buletin" }, index.h("div", { class: "d-flex two-buttons" }, index.h("button", { class: "normal-button red-button", disabled: !this.buttonEnabled, onClick: () => this.buttonClick(false) }, this.baseComponent.translations.AgreementCheckValues.ButtonNo), index.h("button", { class: "normal-button", disabled: !this.buttonEnabled, onClick: () => this.buttonClick(true) }, this.baseComponent.translations.AgreementCheckValues.ButtonYes)), index.h("p", { class: "main-text font-size-18 text-right mb-0" }, this.baseComponent.translations.GlobalValues.FooterText))))));
+    let content = (index.h("div", { class: "container" }, index.h("div", { class: "row" }, index.h("div", { class: this.scrollClass, innerHTML: this.htmlContent }), index.h("div", { class: "pos-relative show-bottom" }, index.h("div", { class: "btn-buletin" }, index.h("div", { class: "d-flex two-buttons" }, index.h("button", { class: "normal-button red-button", disabled: !this.buttonEnabled, onClick: () => this.buttonClick(false) }, this.translations.AgreementCheckValues.ButtonNo), index.h("button", { class: "normal-button", disabled: !this.buttonEnabled, onClick: () => this.buttonClick(true) }, this.translations.AgreementCheckValues.ButtonYes)), index.h("p", { class: "main-text font-size-18 text-right mb-0" }, this.translations.GlobalValues.FooterText))))));
     return this.htmlContent ? content : index.h("div", null);
   }
 };
@@ -50,7 +276,7 @@ const AgreementInfo = class {
     this.termsChecked = undefined;
     this.openAgreements = undefined;
     this.openTerms = undefined;
-    this.baseComponent = new baseComponent.BaseComponent(baseComponent.FlowSteps.Agreements);
+    this.baseComponent = new BaseComponent(TranslationUtils.FlowSteps.Agreements);
     this.baseComponent.setEventEmitter(this.apiErrorEvent);
     this.agreementsChecked = false;
     this.termsChecked = false;
@@ -58,7 +284,8 @@ const AgreementInfo = class {
   async componentDidLoad() {
     await this.baseComponent.initialize();
   }
-  componentWillLoad() {
+  async componentWillLoad() {
+    this.translations = await TranslationUtils.Translations.getValues();
     this.openAgreements = false;
     this.openTerms = false;
   }
@@ -67,11 +294,11 @@ const AgreementInfo = class {
   }
   async buttonClick() {
     if (this.agreementsChecked && this.termsChecked) {
-      if (baseComponent.state.phoneValidation) {
-        baseComponent.state.flowStatus = baseComponent.FlowStatus.PHONE;
+      if (TranslationUtils.state.phoneValidation) {
+        TranslationUtils.state.flowStatus = TranslationUtils.FlowStatus.PHONE;
       }
       else {
-        baseComponent.state.flowStatus = baseComponent.FlowStatus.ID;
+        TranslationUtils.state.flowStatus = TranslationUtils.FlowStatus.ID;
       }
     }
   }
@@ -94,7 +321,7 @@ const AgreementInfo = class {
   render() {
     let agreementsCheck = index.h("agreement-check", { agreementType: "agreement" });
     let termsCheck = index.h("agreement-check", { agreementType: "terms" });
-    let mainComp = (index.h("div", { class: "container" }, index.h("div", { class: "row" }, index.h("div", null, index.h("h1", { class: "text-center" }, this.baseComponent.translations.AgreementInfoValues.Title), index.h("div", { class: "d-flex space-between align-center" }, index.h("h3", { class: "main-text font-size-2", onClick: () => this.agreementsClicked() }, index.h("input", { type: "checkbox", readOnly: true, checked: this.agreementsChecked }), this.baseComponent.translations.AgreementInfoValues.Agreement)), index.h("div", { class: "d-flex space-between align-center" }, index.h("h3", { class: "main-text font-size-2", onClick: () => this.termsClicked() }, index.h("input", { type: "checkbox", readOnly: true, checked: this.termsChecked }), this.baseComponent.translations.AgreementInfoValues.Terms))), index.h("div", { class: "pos-relative show-bottom" }, index.h("div", { class: "btn-buletin" }, index.h("button", { class: "main-button", onClick: () => this.buttonClick() }, this.baseComponent.translations.AgreementInfoValues.Button), index.h("p", { class: "main-text font-size-18 text-right mb-0" }, this.baseComponent.translations.GlobalValues.FooterText))))));
+    let mainComp = (index.h("div", { class: "container" }, index.h("div", { class: "row" }, index.h("div", null, index.h("h1", { class: "text-center" }, this.translations.AgreementInfoValues.Title), index.h("div", { class: "d-flex space-between align-center" }, index.h("h3", { class: "main-text font-size-2", onClick: () => this.agreementsClicked() }, index.h("input", { type: "checkbox", readOnly: true, checked: this.agreementsChecked }), this.translations.AgreementInfoValues.Agreement)), index.h("div", { class: "d-flex space-between align-center" }, index.h("h3", { class: "main-text font-size-2", onClick: () => this.termsClicked() }, index.h("input", { type: "checkbox", readOnly: true, checked: this.termsChecked }), this.translations.AgreementInfoValues.Terms))), index.h("div", { class: "pos-relative show-bottom" }, index.h("div", { class: "btn-buletin" }, index.h("button", { class: "main-button", onClick: () => this.buttonClick() }, this.translations.AgreementInfoValues.Button), index.h("p", { class: "main-text font-size-18 text-right mb-0" }, this.translations.GlobalValues.FooterText))))));
     return this.openAgreements ? agreementsCheck : this.openTerms ? termsCheck : mainComp;
   }
 };
@@ -1402,7 +1629,7 @@ class ML5 {
   }
   async init() {
     return new Promise(async (resolve) => {
-      const modelPath = baseComponent.state.hasIdBack ? 'https://ekyc.blob.core.windows.net/$web/md/model.json' : 'https://ekyc.blob.core.windows.net/$web/model.json';
+      const modelPath = TranslationUtils.state.hasIdBack ? 'https://ekyc.blob.core.windows.net/$web/md/model.json' : 'https://ekyc.blob.core.windows.net/$web/model.json';
       this.classifier = await ml5.imageClassifier(modelPath, this.loaded);
       this.faceapi = await ml5.faceApi({ withLandmarks: true, withDescriptors: false }, this.loaded);
       //warmup
@@ -1414,13 +1641,13 @@ class ML5 {
     });
   }
   loaded() {
-    if (baseComponent.state.debug)
+    if (TranslationUtils.state.debug)
       console.log('ML5 LOADED!!!');
   }
   gotResults(error, results) {
-    if (baseComponent.state.debug)
+    if (TranslationUtils.state.debug)
       console.log(error);
-    if (baseComponent.state.debug)
+    if (TranslationUtils.state.debug)
       console.log(results);
   }
 }
@@ -1439,8 +1666,8 @@ const blobToBase64 = (blob) => {
 const delay = ms => new Promise(res => setTimeout(res, ms));
 const getLogMessage = (param_req_id = '', param_redirect_id = '', param_token = '') => {
   return {
-    store_values: { request_id: baseComponent.state.requestId, redirect_id: baseComponent.state.redirectId, token: baseComponent.state.token },
-    session_values: { request_id: sessionStorage.getItem(baseComponent.SessionKeys.RequestIdKey), token: sessionStorage.getItem(baseComponent.SessionKeys.TokenKey) },
+    store_values: { request_id: TranslationUtils.state.requestId, redirect_id: TranslationUtils.state.redirectId, token: TranslationUtils.state.token },
+    session_values: { request_id: sessionStorage.getItem(TranslationUtils.SessionKeys.RequestIdKey), token: sessionStorage.getItem(TranslationUtils.SessionKeys.TokenKey) },
     parameter_values: { request_id: param_req_id, redirect_id: param_redirect_id, token: param_token },
   };
 };
@@ -1784,7 +2011,7 @@ class FaceML5Detector {
     if (this.frontFace == null) {
       this.frontFace = face;
       // await this.drawFrame('green');
-      if (baseComponent.state.debug)
+      if (TranslationUtils.state.debug)
         console.log('face ok');
     }
     else if (this.frontFace != null && this.presentedFacePose == null) {
@@ -4331,8 +4558,8 @@ class Stream {
       // if (this.faceDetection) Detector.getInstance().stopDetector();
     };
     this.initFacePose();
-    this.idML5Detector = IDML5Detector.getInstance(this, baseComponent.state.device.isMobile);
-    this.faceML5Detector = FaceML5Detector.getInstance(this, baseComponent.state.device.isMobile);
+    this.idML5Detector = IDML5Detector.getInstance(this, TranslationUtils.state.device.isMobile);
+    this.faceML5Detector = FaceML5Detector.getInstance(this, TranslationUtils.state.device.isMobile);
     this.verificationMode = mode;
   }
   static getInstance(mode) {
@@ -4403,7 +4630,7 @@ class Stream {
       return;
     var options = { mimeType: Stream.webmMimeType.mime, videoBitsPerSecond: 1500000 };
     if (!MediaRecorder.isTypeSupported(options.mimeType)) {
-      if (baseComponent.state.device.mobileOS == baseComponent.MobileOS.iOS || baseComponent.state.device.browser == baseComponent.Browser.Safari)
+      if (TranslationUtils.state.device.mobileOS == MobileOS.iOS || TranslationUtils.state.device.browser == Browser.Safari)
         options.mimeType = Stream.mp4MimeType.mime;
     }
     this.recordedChunks = [];
@@ -4454,7 +4681,7 @@ class Stream {
       const context = canvas.getContext('2d');
       context.drawImage(this.videoElement, 0, 0, canvas.width, canvas.height);
       canvas.toBlob((frame) => {
-        if (frame.type === ImageFormat.JPEG && !baseComponent.state.device.isAppleDevice) {
+        if (frame.type === ImageFormat.JPEG && !TranslationUtils.state.device.isAppleDevice) {
           try {
             addExifInImg(frame, this.stream.getTracks()[0], this.videoSize).then(updatedFrame => resolve(updatedFrame));
           }
@@ -4558,7 +4785,7 @@ const Camera = class {
   render() {
     let cameraVideoClass = 'cameraVideo';
     let cameraCanvasClass = 'cameraCanvas';
-    if (baseComponent.state.device.isDesktop) {
+    if (TranslationUtils.state.device.isDesktop) {
       cameraVideoClass = 'cameraVideoSelfieDesk';
       cameraCanvasClass = 'cameraCanvasSelfieDesk';
     }
@@ -4605,27 +4832,28 @@ const CameraError = class {
     this.description = undefined;
     this.buttonDisabled = undefined;
     this.demoVideo = undefined;
-    this.baseComponent = new baseComponent.BaseComponent(baseComponent.FlowSteps.CameraError);
+    this.baseComponent = new BaseComponent(TranslationUtils.FlowSteps.CameraError);
     this.baseComponent.setEventEmitter(this.apiErrorEvent);
   }
   async componentWillLoad() {
+    this.translations = await TranslationUtils.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 (baseComponent.state.device.mobileOS != baseComponent.MobileOS.iOS) {
-      this.demoVideo.src = this.baseComponent.translations.CameraErrorValues.HowToLink;
+    if (TranslationUtils.state.device.mobileOS != MobileOS.iOS) {
+      this.demoVideo.src = this.translations.CameraErrorValues.HowToLink;
       this.demoVideo.loop = true;
       this.demoVideo.play();
     }
     else {
-      var loaded = sessionStorage.getItem(baseComponent.SessionKeys.RefreshDoneKey);
+      var loaded = sessionStorage.getItem(TranslationUtils.SessionKeys.RefreshDoneKey);
       if (loaded === 'true') {
-        sessionStorage.setItem(baseComponent.SessionKeys.RefreshDoneKey, 'false');
-        baseComponent.state.flowStatus = baseComponent.FlowStatus.LANDING;
+        sessionStorage.setItem(TranslationUtils.SessionKeys.RefreshDoneKey, 'false');
+        TranslationUtils.state.flowStatus = TranslationUtils.FlowStatus.LANDING;
       }
     }
   }
@@ -4634,16 +4862,16 @@ const CameraError = class {
   }
   async buttonClick() {
     this.buttonDisabled = true;
-    if (baseComponent.state.device.mobileOS == baseComponent.MobileOS.iOS) {
-      sessionStorage.setItem(baseComponent.SessionKeys.RefreshDoneKey, 'true');
+    if (TranslationUtils.state.device.mobileOS == MobileOS.iOS) {
+      sessionStorage.setItem(TranslationUtils.SessionKeys.RefreshDoneKey, 'true');
       window.location.reload();
     }
     else {
-      baseComponent.state.flowStatus = baseComponent.FlowStatus.LANDING;
+      TranslationUtils.state.flowStatus = TranslationUtils.FlowStatus.LANDING;
     }
   }
   render() {
-    return (index.h("div", { class: "container" }, index.h("div", { class: "row" }, index.h("h1", { class: "color-red" }, this.title), index.h("div", null, index.h("p", { class: "color-red font-weight-bold font-size-25 mt-5" }, this.description)), index.h("div", { hidden: baseComponent.state.device.mobileOS == baseComponent.MobileOS.iOS }, index.h("video", { id: "howtoPermissions", class: "video-demo", playsinline: true, ref: el => (this.demoVideo = el) }, index.h("source", { type: "video/mp4" }))), index.h("div", { class: "pos-relative show-bottom" }, index.h("div", { class: "btn-buletin" }, index.h("button", { class: "main-button", type: "button", disabled: this.buttonDisabled, 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("h1", { class: "color-red" }, this.title), index.h("div", null, index.h("p", { class: "color-red font-weight-bold font-size-25 mt-5" }, this.description)), index.h("div", { hidden: TranslationUtils.state.device.mobileOS == MobileOS.iOS }, index.h("video", { id: "howtoPermissions", class: "video-demo", playsinline: true, ref: el => (this.demoVideo = el) }, index.h("source", { type: "video/mp4" }))), index.h("div", { class: "pos-relative show-bottom" }, index.h("div", { class: "btn-buletin" }, index.h("button", { class: "main-button", type: "button", disabled: this.buttonDisabled, onClick: () => this.buttonClick() }, this.buttonText), index.h("p", { class: "main-text font-size-18 text-right mb-0" }, this.translations.GlobalValues.FooterText))))));
   }
 };
 CameraError.style = cameraErrorCss;
@@ -4657,39 +4885,40 @@ const CaptureError = class {
     this.type = undefined;
     this.buttonEnabled = undefined;
     this.buttonText = undefined;
-    this.baseComponent = new baseComponent.BaseComponent(baseComponent.FlowSteps.CiError);
+    this.baseComponent = new BaseComponent(TranslationUtils.FlowSteps.CiError);
   }
   async componentWillLoad() {
+    this.translations = await TranslationUtils.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() {
-    await this.baseComponent.logStep(baseComponent.FlowSteps.CiError, baseComponent.FlowMoments.Initialized);
+    await this.baseComponent.logStep(TranslationUtils.FlowSteps.CiError, TranslationUtils.FlowMoments.Initialized);
     for (let i = 5; i >= 1; i--) {
       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() {
     this.buttonEnabled = false;
-    await this.baseComponent.logStep(baseComponent.FlowSteps.CiError, baseComponent.FlowMoments.Finalized);
+    await this.baseComponent.logStep(TranslationUtils.FlowSteps.CiError, TranslationUtils.FlowMoments.Finalized);
     this.eventCaptureErrorDone.emit();
   }
   render() {
-    return (index.h("div", { class: "container" }, index.h("div", { class: "row" }, index.h("h1", { class: "color-red" }, this.titleR1), index.h("h1", { class: "color-red" }, this.titleR2), index.h("div", null, index.h("p", { class: "color-red font-weight-bold font-size-25 mt-5" }, this.descriptionR1), index.h("p", { class: "color-red font-weight-bold font-size-25 mt-5" }, this.descriptionR2)), index.h("div", { class: "pos-relative show-bottom" }, index.h("div", { class: "btn-buletin" }, index.h("button", { class: "main-button", type: "button", disabled: !this.buttonEnabled, 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("h1", { class: "color-red" }, this.titleR1), index.h("h1", { class: "color-red" }, this.titleR2), index.h("div", null, index.h("p", { class: "color-red font-weight-bold font-size-25 mt-5" }, this.descriptionR1), index.h("p", { class: "color-red font-weight-bold font-size-25 mt-5" }, this.descriptionR2)), index.h("div", { class: "pos-relative show-bottom" }, index.h("div", { class: "btn-buletin" }, index.h("button", { class: "main-button", type: "button", disabled: !this.buttonEnabled, onClick: () => this.buttonClick() }, this.buttonText), index.h("p", { class: "main-text font-size-18 text-right mb-0" }, this.translations.GlobalValues.FooterText))))));
   }
 };
 CaptureError.style = captureErrorCss;
@@ -4702,13 +4931,15 @@ const EndRedirect = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.apiErrorEvent = index.createEvent(this, "apiError", 7);
-    this.baseComponent = new baseComponent.BaseComponent(baseComponent.FlowSteps.End);
+  }
+  async componentWillLoad() {
+    this.translations = await TranslationUtils.Translations.getValues();
   }
   async componentDidLoad() {
-    baseComponent.Events.flowCompleted();
+    Events.flowCompleted();
   }
   render() {
-    return (index.h("div", { class: "container" }, index.h("div", { class: "row" }, index.h("div", null, index.h("h1", { class: "text-center" }, this.baseComponent.translations.CompleteValues.Title), index.h("p", { class: "main-text font-size-18 mt-8 text-center" }, this.baseComponent.translations.CompleteValues.Description)), index.h("div", { class: "buletin-container" }, index.h("div", { class: "container-coin" }, index.h("div", { class: "coin-scale" }, index.h("div", { class: "coin-flip" }, index.h("img", { class: "w-40 coin", src: completeSvg }))))), index.h("div", { class: "text-center" }, index.h("p", { class: "font-weight-900 font-size-3 color-black-2 text-center mt-20" }, this.baseComponent.translations.CompleteValues.Message), index.h("p", null, baseComponent.state.requestId)), index.h("div", { class: "btn-buletin" }, index.h("p", { class: "main-text font-size-18 text-center mb-0" }, this.baseComponent.translations.GlobalValues.FooterText)))));
+    return (index.h("div", { class: "container" }, index.h("div", { class: "row" }, index.h("div", null, index.h("h1", { class: "text-center" }, this.translations.CompleteValues.Title), index.h("p", { class: "main-text font-size-18 mt-8 text-center" }, this.translations.CompleteValues.Description)), index.h("div", { class: "buletin-container" }, index.h("div", { class: "container-coin" }, index.h("div", { class: "coin-scale" }, index.h("div", { class: "coin-flip" }, index.h("img", { class: "w-40 coin", src: completeSvg }))))), index.h("div", { class: "text-center" }, index.h("p", { class: "font-weight-900 font-size-3 color-black-2 text-center mt-20" }, this.translations.CompleteValues.Message), index.h("p", null, TranslationUtils.state.requestId)), index.h("div", { class: "btn-buletin" }, index.h("p", { class: "main-text font-size-18 text-center mb-0" }, this.translations.GlobalValues.FooterText)))));
   }
 };
 EndRedirect.style = endRedirectCss;
@@ -4723,7 +4954,7 @@ const ErrorEnd = class {
   }
   componentDidLoad() { }
   render() {
-    return (index.h("div", { class: "container" }, index.h("div", { class: "row" }, index.h("div", { class: "text-center" }, index.h("h1", null, this.errorTitle)), index.h("div", { class: "text-center" }, index.h("p", null, baseComponent.state.requestId)), index.h("div", null, index.h("p", { class: "color-red font-weight-bold font-size-2 text-center mt-10" }, this.message)))));
+    return (index.h("div", { class: "container" }, index.h("div", { class: "row" }, index.h("div", { class: "text-center" }, index.h("h1", null, this.errorTitle)), index.h("div", { class: "text-center" }, index.h("p", null, TranslationUtils.state.requestId)), index.h("div", null, index.h("p", { class: "color-red font-weight-bold font-size-2 text-center mt-10" }, this.message)))));
   }
 };
 ErrorEnd.style = errorEndCss;
@@ -4742,34 +4973,35 @@ const HowToInfo = class {
     this.buttonEnabled = false;
     this.eventHowToInfoDone.emit();
   }
-  componentWillLoad() {
+  async componentWillLoad() {
+    this.translations = await TranslationUtils.Translations.getValues();
     this.subTitle = '';
     this.buttonEnabled = true;
-    if (baseComponent.state.flowStatus == baseComponent.FlowStatus.ID) {
-      this.topTitle = this.baseComponent.translations.HowToValues.IdTitile;
+    if (TranslationUtils.state.flowStatus == TranslationUtils.FlowStatus.ID) {
+      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.BaseComponent(baseComponent.FlowSteps.CiFrontHowTo);
-        this.subTitle = this.baseComponent.translations.HowToValues.IdSubTitileFace;
+        this.baseComponent = new BaseComponent(TranslationUtils.FlowSteps.CiFrontHowTo);
+        this.subTitle = this.translations.HowToValues.IdSubTitileFace;
       }
       if (this.idSide == 'back') {
-        this.baseComponent = new baseComponent.BaseComponent(baseComponent.FlowSteps.CiBackHowTo);
-        this.subTitle = this.baseComponent.translations.HowToValues.IdSubTitileBack;
+        this.baseComponent = new BaseComponent(TranslationUtils.FlowSteps.CiBackHowTo);
+        this.subTitle = this.translations.HowToValues.IdSubTitileBack;
       }
     }
-    if (baseComponent.state.flowStatus == baseComponent.FlowStatus.LIVENESS) {
-      this.baseComponent = new baseComponent.BaseComponent(baseComponent.FlowSteps.SelfieHowTo);
-      this.topTitle = this.baseComponent.translations.HowToValues.SelfieTitile;
-      this.subTitle = this.baseComponent.translations.HowToValues.SelfieSubTitile;
+    if (TranslationUtils.state.flowStatus == TranslationUtils.FlowStatus.LIVENESS) {
+      this.baseComponent = new BaseComponent(TranslationUtils.FlowSteps.SelfieHowTo);
+      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 != '' ? index.h("p", { class: "font-size-2" }, this.subTitle) : null;
-    return (index.h("div", { class: "container" }, index.h("div", { class: "row" }, index.h("div", { class: "div-ci align-center" }, index.h("img", { src: this.imagePath })), index.h("div", { class: "text-center" }, index.h("h1", null, this.topTitle), sub), index.h("div", { class: "pos-relative show-bottom" }, index.h("div", { class: "btn-buletin" }, index.h("button", { class: "main-button", disabled: !this.buttonEnabled, 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: "div-ci align-center" }, index.h("img", { src: this.imagePath })), index.h("div", { class: "text-center" }, index.h("h1", null, this.topTitle), sub), index.h("div", { class: "pos-relative show-bottom" }, index.h("div", { class: "btn-buletin" }, index.h("button", { class: "main-button", disabled: !this.buttonEnabled, onClick: () => this.buttonClick() }, this.buttonText), index.h("p", { class: "main-text font-size-18 text-right mb-0" }, this.translations.GlobalValues.FooterText))))));
   }
 };
 HowToInfo.style = howToInfoCss;
@@ -4784,7 +5016,7 @@ class Cameras {
       const stream = await navigator.mediaDevices.getUserMedia(updatedConstraints);
       stream.getVideoTracks().forEach(track => {
         var _a, _b;
-        if (deviceInfo.browser === baseComponent.Browser.Firefox) {
+        if (deviceInfo.browser === Browser.Firefox) {
           const settings = track.getSettings();
           let facingMode = settings.facingMode && settings.facingMode.length > 0 ? settings.facingMode[0] : '';
           facingMode = facingMode === 'e' ? 'environment' : facingMode;
@@ -4888,8 +5120,8 @@ class Cameras {
       let cam = new Cameras();
       let cameras = (await cam.GetCameras(device)).filter(c => c.facingMode == 'environment');
       var recommCamera = cam.GetRecommendedCamera(cameras);
-      baseComponent.state.cameraIds = cameras.map(camera => camera.deviceId);
-      baseComponent.state.cameraId = recommCamera === null || recommCamera === void 0 ? void 0 : recommCamera.deviceId;
+      TranslationUtils.state.cameraIds = cameras.map(camera => camera.deviceId);
+      TranslationUtils.state.cameraId = recommCamera === null || recommCamera === void 0 ? void 0 : recommCamera.deviceId;
       return true;
     }
     catch (e) {
@@ -4934,33 +5166,34 @@ const IdBackCapture = class {
     this.verified = false;
     this.cameras = new Cameras();
     this.showDemo = true;
-    this.baseComponent = new baseComponent.BaseComponent(baseComponent.FlowSteps.CiBackCapture);
+    this.baseComponent = new BaseComponent(TranslationUtils.FlowSteps.CiBackCapture);
   }
   eventVideoStarted(event) {
     this.videoStarted = true;
     this.cameraSize = event.detail;
   }
   async componentWillLoad() {
+    this.translations = await TranslationUtils.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' });
     }
   }
   async componentDidLoad() {
-    await this.baseComponent.logStep(baseComponent.FlowSteps.CiBackCapture, baseComponent.FlowMoments.Initialized);
-    this.titleMesage = this.baseComponent.translations.IdCaptureValues.TtileRotate;
-    this.demoVideo.src = baseComponent.IdCaptureValues.IDPoseDemoMapping[IDPose.Rotate];
+    await this.baseComponent.logStep(TranslationUtils.FlowSteps.CiBackCapture, TranslationUtils.FlowMoments.Initialized);
+    this.titleMesage = this.translations.IdCaptureValues.TtileRotate;
+    this.demoVideo.src = TranslationUtils.IdCaptureValues.IDPoseDemoMapping[IDPose.Rotate];
     this.demoVideo.play();
-    await delay(this.baseComponent.translations.GlobalValues.VideoLenght);
-    this.titleMesage = this.baseComponent.translations.IdCaptureValues.TitleBack;
-    this.demoVideo.src = baseComponent.IdCaptureValues.IDPoseDemoMapping[IDPose.BackStraight];
+    await delay(this.translations.GlobalValues.VideoLenght);
+    this.titleMesage = this.translations.IdCaptureValues.TitleBack;
+    this.demoVideo.src = TranslationUtils.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();
   }
   async openCamera() {
-    const constraints = this.cameras.GetConstraints(baseComponent.state.cameraId, baseComponent.state.device);
+    const constraints = this.cameras.GetConstraints(TranslationUtils.state.cameraId, TranslationUtils.state.device);
     setTimeout(() => {
       navigator.mediaDevices
         .getUserMedia(constraints)
@@ -4989,7 +5222,7 @@ const IdBackCapture = class {
     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';
@@ -5002,7 +5235,7 @@ const IdBackCapture = class {
     this.captureTaken = true;
     let res = await Stream.getInstance(VerificationMode.Full).takePhoto();
     this.photoIsReady(res);
-    await this.baseComponent.logStep(baseComponent.FlowSteps.CiBackCapture, baseComponent.FlowMoments.Finalized);
+    await this.baseComponent.logStep(TranslationUtils.FlowSteps.CiBackCapture, TranslationUtils.FlowMoments.Finalized);
   }
   render() {
     let cameraStyle;
@@ -5014,7 +5247,7 @@ const IdBackCapture = class {
     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 (index.h("div", { class: bgDemo }, index.h("div", { class: "container-video" }, index.h("div", { hidden: this.showDemo == false }, index.h("video", { id: "howtoBack", class: "video-demo", playsinline: true, ref: el => (this.demoVideo = el) }, index.h("source", { type: "video/mp4" }))), index.h("div", { hidden: this.showDemo }, index.h("div", { hidden: this.verified }, index.h("div", { class: "video-capture" }, index.h("div", { style: cameraStyle }, index.h("div", { style: cameraStyleInner }, index.h("camera-comp", { "capture-mode": "id" })))))), index.h("div", { class: "capture-title" }, index.h("h1", { class: titleClass }, this.titleMesage), index.h("p", { class: "main-text font-size-18 text-right mb-0" }, this.baseComponent.translations.GlobalValues.FooterText)))));
+    return (index.h("div", { class: bgDemo }, index.h("div", { class: "container-video" }, index.h("div", { hidden: this.showDemo == false }, index.h("video", { id: "howtoBack", class: "video-demo", playsinline: true, ref: el => (this.demoVideo = el) }, index.h("source", { type: "video/mp4" }))), index.h("div", { hidden: this.showDemo }, index.h("div", { hidden: this.verified }, index.h("div", { class: "video-capture" }, index.h("div", { style: cameraStyle }, index.h("div", { style: cameraStyleInner }, index.h("camera-comp", { "capture-mode": "id" })))))), index.h("div", { class: "capture-title" }, index.h("h1", { class: titleClass }, this.titleMesage), index.h("p", { class: "main-text font-size-18 text-right mb-0" }, this.translations.GlobalValues.FooterText)))));
   }
   get component() { return index.getElement(this); }
 };
@@ -5043,29 +5276,30 @@ const IdCapture = class {
     this.verified = false;
     this.cameras = new Cameras();
     this.showDemo = true;
-    this.baseComponent = new baseComponent.BaseComponent(baseComponent.FlowSteps.CiFrontCapture);
+    this.baseComponent = new BaseComponent(TranslationUtils.FlowSteps.CiFrontCapture);
   }
   eventVideoStarted(event) {
     this.videoStarted = true;
     this.cameraSize = event.detail;
   }
   async componentWillLoad() {
-    this.titleMesage = this.baseComponent.translations.IdCaptureValues.Title;
+    this.translations = await TranslationUtils.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' });
     }
   }
   async componentDidLoad() {
-    await this.baseComponent.logStep(baseComponent.FlowSteps.CiFrontCapture, baseComponent.FlowMoments.Initialized);
-    this.demoVideo.src = baseComponent.IdCaptureValues.IDPoseDemoMapping[IDPose.Straight];
+    await this.baseComponent.logStep(TranslationUtils.FlowSteps.CiFrontCapture, TranslationUtils.FlowMoments.Initialized);
+    this.demoVideo.src = TranslationUtils.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();
   }
   async openCamera() {
-    const constraints = this.cameras.GetConstraints(baseComponent.state.cameraId, baseComponent.state.device);
+    const constraints = this.cameras.GetConstraints(TranslationUtils.state.cameraId, TranslationUtils.state.device);
     setTimeout(() => {
       navigator.mediaDevices
         .getUserMedia(constraints)
@@ -5096,13 +5330,13 @@ const IdCapture = class {
     this.captureTaken = true;
     let res = await Stream.getInstance(VerificationMode.Full).takePhoto();
     this.photoIsReady(res);
-    await this.baseComponent.logStep(baseComponent.FlowSteps.CiFrontCapture, baseComponent.FlowMoments.Finalized);
+    await this.baseComponent.logStep(TranslationUtils.FlowSteps.CiFrontCapture, TranslationUtils.FlowMoments.Finalized);
   }
   async verificationFinished() {
     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';
@@ -5124,7 +5358,7 @@ const IdCapture = class {
     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 (index.h("div", { class: bgDemo }, index.h("div", { class: "container-video" }, index.h("div", { hidden: this.showDemo == false }, index.h("video", { id: "howtoFront", class: "video-demo", playsinline: true, ref: el => (this.demoVideo = el) }, index.h("source", { type: "video/mp4" }))), index.h("div", { hidden: this.showDemo }, index.h("div", { hidden: this.verified }, index.h("div", { class: "video-capture" }, index.h("div", { style: cameraStyle }, index.h("div", { style: cameraStyleInner }, index.h("camera-comp", { "capture-mode": "id" })))))), index.h("div", { class: "capture-title" }, index.h("h1", { class: titleClass }, this.titleMesage), index.h("p", { class: "main-text font-size-18 text-right mb-0" }, this.baseComponent.translations.GlobalValues.FooterText)))));
+    return (index.h("div", { class: bgDemo }, index.h("div", { class: "container-video" }, index.h("div", { hidden: this.showDemo == false }, index.h("video", { id: "howtoFront", class: "video-demo", playsinline: true, ref: el => (this.demoVideo = el) }, index.h("source", { type: "video/mp4" }))), index.h("div", { hidden: this.showDemo }, index.h("div", { hidden: this.verified }, index.h("div", { class: "video-capture" }, index.h("div", { style: cameraStyle }, index.h("div", { style: cameraStyleInner }, index.h("camera-comp", { "capture-mode": "id" })))))), index.h("div", { class: "capture-title" }, index.h("h1", { class: titleClass }, this.titleMesage), index.h("p", { class: "main-text font-size-18 text-right mb-0" }, this.translations.GlobalValues.FooterText)))));
   }
   get component() { return index.getElement(this); }
 };
@@ -5153,29 +5387,30 @@ const IdTilt = class {
     this.verified = false;
     this.cameras = new Cameras();
     this.showDemo = true;
-    this.baseComponent = new baseComponent.BaseComponent(baseComponent.FlowSteps.CiTilt);
+    this.baseComponent = new BaseComponent(TranslationUtils.FlowSteps.CiTilt);
   }
   eventVideoStarted(event) {
     this.videoStarted = true;
     this.cameraSize = event.detail;
   }
   async componentWillLoad() {
-    this.titleMesage = this.baseComponent.translations.IdCaptureValues.IDPoseMapping;
+    this.translations = await TranslationUtils.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' });
     }
   }
   async componentDidLoad() {
-    await this.baseComponent.logStep(baseComponent.FlowSteps.CiTilt, baseComponent.FlowMoments.Initialized);
-    this.demoVideo.src = baseComponent.IdCaptureValues.IDPoseDemoMapping[IDPose.Tilted];
+    await this.baseComponent.logStep(TranslationUtils.FlowSteps.CiTilt, TranslationUtils.FlowMoments.Initialized);
+    this.demoVideo.src = TranslationUtils.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();
   }
   async openCamera() {
-    const constraints = this.cameras.GetConstraints(baseComponent.state.cameraId, baseComponent.state.device);
+    const constraints = this.cameras.GetConstraints(TranslationUtils.state.cameraId, TranslationUtils.state.device);
     setTimeout(() => {
       navigator.mediaDevices
         .getUserMedia(constraints)
@@ -5206,13 +5441,13 @@ const IdTilt = class {
     this.captureTaken = true;
     let res = await Stream.getInstance(VerificationMode.Full).takePhoto();
     this.photoIsReady(res);
-    await this.baseComponent.logStep(baseComponent.FlowSteps.CiTilt, baseComponent.FlowMoments.Finalized);
+    await this.baseComponent.logStep(TranslationUtils.FlowSteps.CiTilt, TranslationUtils.FlowMoments.Finalized);
   }
   async verificationFinished() {
     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';
@@ -5234,7 +5469,7 @@ const IdTilt = class {
     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 (index.h("div", { class: bgDemo }, index.h("div", { class: "container-video" }, index.h("div", { hidden: this.showDemo == false }, index.h("video", { id: "howtoFront", class: "video-demo", playsinline: true, ref: el => (this.demoVideo = el) }, index.h("source", { type: "video/mp4" }))), index.h("div", { hidden: this.showDemo }, index.h("div", { hidden: this.verified }, index.h("div", { class: "video-capture" }, index.h("div", { style: cameraStyle }, index.h("div", { style: cameraStyleInner }, index.h("camera-comp", { "capture-mode": "tilt" })))))), index.h("div", { class: "capture-title" }, index.h("h1", { class: titleClass }, this.titleMesage), index.h("p", { class: "main-text font-size-18 text-right mb-0" }, this.baseComponent.translations.GlobalValues.FooterText)))));
+    return (index.h("div", { class: bgDemo }, index.h("div", { class: "container-video" }, index.h("div", { hidden: this.showDemo == false }, index.h("video", { id: "howtoFront", class: "video-demo", playsinline: true, ref: el => (this.demoVideo = el) }, index.h("source", { type: "video/mp4" }))), index.h("div", { hidden: this.showDemo }, index.h("div", { hidden: this.verified }, index.h("div", { class: "video-capture" }, index.h("div", { style: cameraStyle }, index.h("div", { style: cameraStyleInner }, index.h("camera-comp", { "capture-mode": "tilt" })))))), index.h("div", { class: "capture-title" }, index.h("h1", { class: titleClass }, this.titleMesage), index.h("p", { class: "main-text font-size-18 text-right mb-0" }, this.translations.GlobalValues.FooterText)))));
   }
   get component() { return index.getElement(this); }
 };
@@ -5306,7 +5541,7 @@ function v4(options, buf, offset) {
 }
 
 const name = "@ekyc_qoobiss/qbs-ect-cmp";
-const version$1 = "3.6.28";
+const version$1 = "3.6.30";
 const description = "Person Identification Component";
 const main = "./dist/index.cjs.js";
 const module$1 = "./dist/index.js";
@@ -5380,14 +5615,14 @@ const identificationComponentCss = "@font-face{font-family:'Inter';font-style:no
 
 const IdentificationComponent = class {
   async onTokenChange(newValue, _oldValue) {
-    if (baseComponent.state.debug)
+    if (TranslationUtils.state.debug)
       console.log('Token change called with value: ' + newValue);
     if (newValue == '') {
-      newValue = baseComponent.state.token;
+      newValue = TranslationUtils.state.token;
       return;
     }
-    if (baseComponent.state.token !== newValue) {
-      baseComponent.state.token = newValue;
+    if (TranslationUtils.state.token !== newValue) {
+      TranslationUtils.state.token = newValue;
     }
   }
   agreementAcceptanceEmitted(data) {
@@ -5419,15 +5654,15 @@ const IdentificationComponent = class {
       await this.baseComponent.apiCall.AddLog(apiLogData, getLogMessage(this.order_id, this.redirect_id, this.token));
     }
     catch (_g) { }
-    baseComponent.Events.flowError(this.errorTitle);
-    baseComponent.state.flowStatus = baseComponent.FlowStatus.ERROREND;
+    Events.flowError(this.errorTitle);
+    TranslationUtils.state.flowStatus = TranslationUtils.FlowStatus.ERROREND;
   }
   handleScroll(ev) {
   }
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.logInit = {};
-    this.flowStatusToSet = baseComponent.FlowStatus.NONE;
+    this.flowStatusToSet = TranslationUtils.FlowStatus.NONE;
     this.token = undefined;
     this.order_id = undefined;
     this.api_url = undefined;
@@ -5440,161 +5675,161 @@ const IdentificationComponent = class {
     this.errorTitle = undefined;
   }
   async componentWillLoad() {
-    baseComponent.Events.init(window);
-    baseComponent.Events.flowEvent(baseComponent.FlowSteps.ComponentLoaded, baseComponent.FlowMoments.Initialized);
-    baseComponent.state.apiBaseUrl = this.api_url;
+    Events.init(window);
+    Events.flowEvent(TranslationUtils.FlowSteps.ComponentLoaded, TranslationUtils.FlowMoments.Initialized);
+    TranslationUtils.state.apiBaseUrl = this.api_url;
     if (this.env && this.env != '') {
-      baseComponent.state.environment = this.env;
+      TranslationUtils.state.environment = this.env;
     }
-    this.baseComponent = new baseComponent.BaseComponent(baseComponent.FlowSteps.ComponentLoaded);
+    this.baseComponent = new BaseComponent(TranslationUtils.FlowSteps.ComponentLoaded);
     this.baseComponent.setErrorCallback(this.apiErrorEmitter);
-    if (baseComponent.state.debug)
+    if (TranslationUtils.state.debug)
       this.logInit = getLogMessage(this.order_id, this.redirect_id, this.token);
     if (this.token) {
-      if (baseComponent.state.debug)
+      if (TranslationUtils.state.debug)
         console.log('Store Token set with property value: ' + this.token);
-      baseComponent.state.token = this.token;
+      TranslationUtils.state.token = this.token;
     }
-    else if (baseComponent.state.token == '') {
-      baseComponent.state.token = sessionStorage.getItem(baseComponent.SessionKeys.TokenKey);
-      this.token = baseComponent.state.token;
-      if (baseComponent.state.debug)
-        console.log('Store Token set with session value: ' + baseComponent.state.token);
+    else if (TranslationUtils.state.token == '') {
+      TranslationUtils.state.token = sessionStorage.getItem(TranslationUtils.SessionKeys.TokenKey);
+      this.token = TranslationUtils.state.token;
+      if (TranslationUtils.state.debug)
+        console.log('Store Token set with session value: ' + TranslationUtils.state.token);
     }
     if (this.redirect_id) {
-      baseComponent.state.redirectId = this.redirect_id;
+      TranslationUtils.state.redirectId = this.redirect_id;
     }
     if (this.phone_number && this.phone_number != '') {
-      baseComponent.state.phoneNumber = this.phone_number;
+      TranslationUtils.state.phoneNumber = this.phone_number;
     }
     if (this.lang_iso && this.lang_iso != '') {
-      baseComponent.state.langIso = this.lang_iso;
+      TranslationUtils.state.langIso = this.lang_iso;
     }
-    var ini = sessionStorage.getItem(baseComponent.SessionKeys.InitialisedKey);
+    var ini = sessionStorage.getItem(TranslationUtils.SessionKeys.InitialisedKey);
     if (ini && ini.toLowerCase() == 'true') {
-      baseComponent.state.initialised = true;
+      TranslationUtils.state.initialised = true;
     }
-    var hasIdBk = sessionStorage.getItem(baseComponent.SessionKeys.HasIdBackKey);
+    var hasIdBk = sessionStorage.getItem(TranslationUtils.SessionKeys.HasIdBackKey);
     if (hasIdBk && hasIdBk.toLowerCase() == 'true') {
-      baseComponent.state.hasIdBack = true;
+      TranslationUtils.state.hasIdBack = true;
     }
-    var agrVal = sessionStorage.getItem(baseComponent.SessionKeys.AgreementValidationKey);
+    var agrVal = sessionStorage.getItem(TranslationUtils.SessionKeys.AgreementValidationKey);
     if (agrVal && agrVal.toLowerCase() == 'true') {
-      baseComponent.state.agreementsValidation = true;
+      TranslationUtils.state.agreementsValidation = true;
     }
-    var phoneVal = sessionStorage.getItem(baseComponent.SessionKeys.PhoneValidationKey);
+    var phoneVal = sessionStorage.getItem(TranslationUtils.SessionKeys.PhoneValidationKey);
     if (phoneVal && phoneVal.toLowerCase() == 'true') {
-      baseComponent.state.phoneValidation = true;
+      TranslationUtils.state.phoneValidation = true;
     }
-    const savedRequest = sessionStorage.getItem(baseComponent.SessionKeys.RequestIdKey);
+    const savedRequest = sessionStorage.getItem(TranslationUtils.SessionKeys.RequestIdKey);
     if (this.order_id && this.order_id != '') {
-      baseComponent.state.requestId = this.order_id;
-      if (baseComponent.state.debug)
+      TranslationUtils.state.requestId = this.order_id;
+      if (TranslationUtils.state.debug)
         console.log('Current RequestId has value: ' + this.order_id);
       if (savedRequest && savedRequest != '' && savedRequest != this.order_id) {
-        if (baseComponent.state.debug)
+        if (TranslationUtils.state.debug)
           console.log('Session RequestId: ' + savedRequest + ' has different value than property one: ' + this.order_id);
-        this.flowStatusToSet = baseComponent.FlowStatus.LANDING;
-        baseComponent.state.initialised = false;
+        this.flowStatusToSet = TranslationUtils.FlowStatus.LANDING;
+        TranslationUtils.state.initialised = false;
       }
     }
     else if (savedRequest) {
-      if (baseComponent.state.debug)
+      if (TranslationUtils.state.debug)
         console.log('Current RequestId has no value, setting with session value: ' + savedRequest);
-      baseComponent.state.requestId = savedRequest;
+      TranslationUtils.state.requestId = savedRequest;
       this.order_id = savedRequest;
     }
-    if (this.flowStatusToSet == baseComponent.FlowStatus.NONE) {
-      var flowSt = sessionStorage.getItem(baseComponent.SessionKeys.FlowStatusKey);
+    if (this.flowStatusToSet == TranslationUtils.FlowStatus.NONE) {
+      var flowSt = sessionStorage.getItem(TranslationUtils.SessionKeys.FlowStatusKey);
       if (flowSt) {
-        this.flowStatusToSet = baseComponent.FlowStatus[flowSt];
+        this.flowStatusToSet = TranslationUtils.FlowStatus[flowSt];
       }
       else {
-        this.flowStatusToSet = baseComponent.FlowStatus.LANDING;
+        this.flowStatusToSet = TranslationUtils.FlowStatus.LANDING;
       }
     }
   }
   async componentDidLoad() {
     await this.initializeRequest();
-    baseComponent.state.flowStatus = this.flowStatusToSet;
+    TranslationUtils.state.flowStatus = this.flowStatusToSet;
   }
   componentWillRender() {
     if (this.idSide == '') {
-      this.idSide = baseComponent.state.hasIdBack ? 'front' : '';
+      this.idSide = TranslationUtils.state.hasIdBack ? 'front' : '';
     }
   }
   async initializeRequest() {
-    if (baseComponent.state.initialised) {
+    if (TranslationUtils.state.initialised) {
       return;
     }
-    if (baseComponent.state.environment == 'DEMO') {
-      baseComponent.state.initialised = true;
+    if (TranslationUtils.state.environment == 'DEMO') {
+      TranslationUtils.state.initialised = true;
       return;
     }
-    if (baseComponent.state.device.browser == baseComponent.Browser.Mi) {
-      this.apiErrorEmitter('Mi Browser nu este acceptat. Va rugam utilizati Chrome.', 'Request Initialisation RequestId:' + baseComponent.state.requestId + ' RedirectId:' + baseComponent.state.redirectId);
+    if (TranslationUtils.state.device.browser == Browser.Mi) {
+      this.apiErrorEmitter('Mi Browser nu este acceptat. Va rugam utilizati Chrome.', 'Request Initialisation RequestId:' + TranslationUtils.state.requestId + ' RedirectId:' + TranslationUtils.state.redirectId);
       return;
     }
     try {
-      if (baseComponent.state.debug)
+      if (TranslationUtils.state.debug)
         this.baseComponent.apiCall.AddLog({ phase: 'debug mode' }, this.logInit);
     }
     catch (_a) { }
     try {
-      if (!baseComponent.state.device.isMobile && baseComponent.state.redirectId == '') {
-        baseComponent.state.redirectId = v4();
-        this.redirect_id = baseComponent.state.redirectId;
+      if (!TranslationUtils.state.device.isMobile && TranslationUtils.state.redirectId == '') {
+        TranslationUtils.state.redirectId = v4();
+        this.redirect_id = TranslationUtils.state.redirectId;
       }
-      if (baseComponent.state.token != '' && (baseComponent.state.requestId != '' || baseComponent.state.redirectId != '')) {
-        baseComponent.state.initialised = await this.baseComponent.apiCall.AddIdentificationRequest(baseComponent.state.device, packageJson.version);
+      if (TranslationUtils.state.token != '' && (TranslationUtils.state.requestId != '' || TranslationUtils.state.redirectId != '')) {
+        TranslationUtils.state.initialised = await this.baseComponent.apiCall.AddIdentificationRequest(TranslationUtils.state.device, packageJson.version);
         if (!this.order_id || this.order_id == '') {
-          this.order_id = baseComponent.state.requestId;
+          this.order_id = TranslationUtils.state.requestId;
         }
       }
     }
     catch (e) {
-      this.apiErrorEmitter(e, 'Request Initialisation RequestId:' + baseComponent.state.requestId + ' RedirectId:' + baseComponent.state.redirectId);
+      this.apiErrorEmitter(e, 'Request Initialisation RequestId:' + TranslationUtils.state.requestId + ' RedirectId:' + TranslationUtils.state.redirectId);
     }
     ML5.getInstance();
   }
   disconnectedCallback() {
-    baseComponent.Events.flowEvent(baseComponent.FlowSteps.ComponentLoaded, baseComponent.FlowMoments.Finalized);
+    Events.flowEvent(TranslationUtils.FlowSteps.ComponentLoaded, TranslationUtils.FlowMoments.Finalized);
   }
   render() {
     let currentBlock = (index.h("div", { class: "container" }, index.h("div", { class: "row" }, index.h("div", { class: "div-ci align-center" }, index.h("img", { src: loaderSvg })))));
-    if (baseComponent.state.device.isMobile || baseComponent.state.environment == 'DEMO') {
-      if (baseComponent.state.flowStatus == baseComponent.FlowStatus.LANDING) {
+    if (TranslationUtils.state.device.isMobile || TranslationUtils.state.environment == 'DEMO') {
+      if (TranslationUtils.state.flowStatus == TranslationUtils.FlowStatus.LANDING) {
         currentBlock = index.h("landing-validation", null);
       }
     }
-    else if (baseComponent.state.flowStatus != baseComponent.FlowStatus.NONE) {
+    else if (TranslationUtils.state.flowStatus != TranslationUtils.FlowStatus.NONE) {
       currentBlock = index.h("mobile-redirect", null);
     }
-    if (baseComponent.state.flowStatus == baseComponent.FlowStatus.AGREEMENT) {
+    if (TranslationUtils.state.flowStatus == TranslationUtils.FlowStatus.AGREEMENT) {
       currentBlock = index.h("agreement-info", null);
     }
-    if (baseComponent.state.flowStatus == baseComponent.FlowStatus.PHONE) {
+    if (TranslationUtils.state.flowStatus == TranslationUtils.FlowStatus.PHONE) {
       currentBlock = index.h("sms-code-validation", null);
     }
-    if (baseComponent.state.flowStatus == baseComponent.FlowStatus.CODE) {
+    if (TranslationUtils.state.flowStatus == TranslationUtils.FlowStatus.CODE) {
       currentBlock = index.h("sms-code-validation", null);
     }
-    if (baseComponent.state.flowStatus == baseComponent.FlowStatus.CODEERROR) {
+    if (TranslationUtils.state.flowStatus == TranslationUtils.FlowStatus.CODEERROR) {
       currentBlock = index.h("sms-code-validation", null);
     }
-    if (baseComponent.state.flowStatus == baseComponent.FlowStatus.ID) {
+    if (TranslationUtils.state.flowStatus == TranslationUtils.FlowStatus.ID) {
       currentBlock = index.h("process-id", null);
     }
-    if (baseComponent.state.flowStatus == baseComponent.FlowStatus.LIVENESS) {
+    if (TranslationUtils.state.flowStatus == TranslationUtils.FlowStatus.LIVENESS) {
       currentBlock = index.h("user-liveness", { id: "camera" });
     }
-    if (baseComponent.state.flowStatus == baseComponent.FlowStatus.COMPLETE) {
+    if (TranslationUtils.state.flowStatus == TranslationUtils.FlowStatus.COMPLETE) {
       currentBlock = index.h("end-redirect", null);
     }
-    if (baseComponent.state.flowStatus == baseComponent.FlowStatus.ERROREND) {
+    if (TranslationUtils.state.flowStatus == TranslationUtils.FlowStatus.ERROREND) {
       currentBlock = index.h("error-end", { errorTitle: this.errorTitle, message: this.errorMessage });
     }
-    if (baseComponent.state.flowStatus == baseComponent.FlowStatus.CAMERAERROR) {
+    if (TranslationUtils.state.flowStatus == TranslationUtils.FlowStatus.CAMERAERROR) {
       currentBlock = index.h("camera-error", null);
     }
     return index.h("div", null, currentBlock);
@@ -5621,48 +5856,49 @@ const LandingValidation = class {
     this.apiErrorEvent = index.createEvent(this, "apiError", 7);
     this.warningText = undefined;
     this.buttonDisabled = undefined;
-    this.baseComponent = new baseComponent.BaseComponent(baseComponent.FlowSteps.Landing);
+    this.baseComponent = new BaseComponent(TranslationUtils.FlowSteps.Landing);
     this.baseComponent.setEventEmitter(this.apiErrorEvent);
   }
   async componentWillLoad() {
-    baseComponent.Events.flowStarted();
-    this.baseComponent.apiCall = new baseComponent.ApiCall();
+    Events.flowStarted();
+    this.translations = await TranslationUtils.Translations.getValues();
+    this.baseComponent.apiCall = new TranslationUtils.ApiCall();
     this.buttonDisabled = false;
     await this.initRequest();
   }
   async componentDidLoad() {
-    if (baseComponent.state.environment !== 'DEMO') {
+    if (TranslationUtils.state.environment !== 'DEMO') {
       await this.baseComponent.initialize();
     }
   }
   async initRequest() {
-    if (baseComponent.state.hasIdBack) {
-      this.warningText = this.baseComponent.translations.LandingValues.WarningMd;
+    if (TranslationUtils.state.hasIdBack) {
+      this.warningText = this.translations.LandingValues.WarningMd;
     }
     else {
-      this.warningText = this.baseComponent.translations.LandingValues.Warning;
+      this.warningText = this.translations.LandingValues.Warning;
     }
   }
   async startFlow() {
-    if (baseComponent.state.initialised) {
+    if (TranslationUtils.state.initialised) {
       this.buttonDisabled = true;
-      if (baseComponent.state.environment === 'DEMO') {
-        baseComponent.state.flowStatus = baseComponent.FlowStatus.COMPLETE;
+      if (TranslationUtils.state.environment === 'DEMO') {
+        TranslationUtils.state.flowStatus = TranslationUtils.FlowStatus.COMPLETE;
         return;
       }
-      if (!(await Cameras.InitCameras(baseComponent.state.device))) {
-        if (baseComponent.state.device.mobileOS == baseComponent.MobileOS.iOS)
-          sessionStorage.setItem(baseComponent.SessionKeys.RefreshDoneKey, 'false');
-        baseComponent.state.flowStatus = baseComponent.FlowStatus.CAMERAERROR;
+      if (!(await Cameras.InitCameras(TranslationUtils.state.device))) {
+        if (TranslationUtils.state.device.mobileOS == MobileOS.iOS)
+          sessionStorage.setItem(TranslationUtils.SessionKeys.RefreshDoneKey, 'false');
+        TranslationUtils.state.flowStatus = TranslationUtils.FlowStatus.CAMERAERROR;
       }
-      else if (baseComponent.state.agreementsValidation) {
-        baseComponent.state.flowStatus = baseComponent.FlowStatus.AGREEMENT;
+      else if (TranslationUtils.state.agreementsValidation) {
+        TranslationUtils.state.flowStatus = TranslationUtils.FlowStatus.AGREEMENT;
       }
-      else if (baseComponent.state.phoneValidation) {
-        baseComponent.state.flowStatus = baseComponent.FlowStatus.PHONE;
+      else if (TranslationUtils.state.phoneValidation) {
+        TranslationUtils.state.flowStatus = TranslationUtils.FlowStatus.PHONE;
       }
       else {
-        baseComponent.state.flowStatus = baseComponent.FlowStatus.ID;
+        TranslationUtils.state.flowStatus = TranslationUtils.FlowStatus.ID;
       }
     }
   }
@@ -5672,18 +5908,18 @@ const LandingValidation = class {
   async leaveFlow() {
     if (this.buttonDisabled)
       return;
-    baseComponent.state.initialised = false;
+    TranslationUtils.state.initialised = false;
     try {
       await this.baseComponent.apiCall.AbortRequest();
-      baseComponent.Events.flowAborted();
+      Events.flowAborted();
     }
     catch (e) {
-      baseComponent.Events.flowAborted();
+      Events.flowAborted();
       this.apiErrorEvent.emit(e);
     }
   }
   render() {
-    return (index.h("div", { class: "container" }, index.h("div", { class: "row" }, index.h("div", null, index.h("h1", { class: "text-center" }, this.baseComponent.translations.LandingValues.Title), index.h("div", { class: "d-flex space-between align-center" }, index.h("p", { class: "main-text font-size-2" }, this.baseComponent.translations.LandingValues.Description), index.h("div", { class: "img-info" }, index.h("div", { class: "i-effect" }), index.h("img", { src: infoSvg })))), index.h("div", { class: "info-container" }, index.h("div", { class: "img-text" }, index.h("div", { class: "bg-img" }, index.h("img", { src: idSvg })), index.h("h3", null, this.baseComponent.translations.LandingValues.IdInfo)), index.h("div", { class: "img-text" }, index.h("div", { class: "bg-img" }, index.h("img", { src: deviceSvg })), index.h("h3", null, this.baseComponent.translations.LandingValues.DeviceInfo)), index.h("div", { class: "img-text" }, index.h("div", { class: "bg-img" }, index.h("img", { src: validationSvg })), index.h("h3", null, this.baseComponent.translations.LandingValues.SmsInfo))), index.h("div", { class: "terms-container" }, index.h("h3", { class: "font-size-2 mb-1 text-center" }, this.warningText)), index.h("div", { class: "pos-relative show-bottom" }, index.h("div", { class: "btn-buletin" }, index.h("button", { class: "main-button", type: "button", disabled: !baseComponent.state.initialised || this.buttonDisabled, onClick: () => this.startFlow() }, this.baseComponent.translations.LandingValues.Button), index.h("p", { class: "main-text font-size-2 link-text mb-0", onClick: () => this.leaveFlow() }, this.baseComponent.translations.LandingValues.ButtonLeave), 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", null, index.h("h1", { class: "text-center" }, this.translations.LandingValues.Title), index.h("div", { class: "d-flex space-between align-center" }, index.h("p", { class: "main-text font-size-2" }, this.translations.LandingValues.Description), index.h("div", { class: "img-info" }, index.h("div", { class: "i-effect" }), index.h("img", { src: infoSvg })))), index.h("div", { class: "info-container" }, index.h("div", { class: "img-text" }, index.h("div", { class: "bg-img" }, index.h("img", { src: idSvg })), index.h("h3", null, this.translations.LandingValues.IdInfo)), index.h("div", { class: "img-text" }, index.h("div", { class: "bg-img" }, index.h("img", { src: deviceSvg })), index.h("h3", null, this.translations.LandingValues.DeviceInfo)), index.h("div", { class: "img-text" }, index.h("div", { class: "bg-img" }, index.h("img", { src: validationSvg })), index.h("h3", null, this.translations.LandingValues.SmsInfo))), index.h("div", { class: "terms-container" }, index.h("h3", { class: "font-size-2 mb-1 text-center" }, this.warningText)), index.h("div", { class: "pos-relative show-bottom" }, index.h("div", { class: "btn-buletin" }, index.h("button", { class: "main-button", type: "button", disabled: !TranslationUtils.state.initialised || this.buttonDisabled, onClick: () => this.startFlow() }, this.translations.LandingValues.Button), index.h("p", { class: "main-text font-size-2 link-text mb-0", onClick: () => this.leaveFlow() }, this.translations.LandingValues.ButtonLeave), index.h("p", { class: "main-text font-size-18 text-right mb-0" }, this.translations.GlobalValues.FooterText))))));
   }
 };
 LandingValidation.style = landingValidationCss;
@@ -8576,20 +8812,21 @@ const MobileRedirect = class {
     this.redirectLink = undefined;
     this.qrCode = undefined;
     this.prefilledPhone = false;
-    this.baseComponent = new baseComponent.BaseComponent(baseComponent.FlowSteps.MobileRedirect);
+    this.baseComponent = new BaseComponent(TranslationUtils.FlowSteps.MobileRedirect);
     this.baseComponent.setEventEmitter(this.apiErrorEvent);
     this.invalidValue = false;
     this.waitingMobile = false;
   }
   async componentWillLoad() {
-    baseComponent.Events.flowStarted();
-    this.infoTextTop = this.baseComponent.translations.MobileRedirectValues.InfoTop;
-    this.infoTextBottom = this.baseComponent.translations.MobileRedirectValues.InfoBottom;
-    let envUri = baseComponent.state.environment == 'QA' ? 'test' : 'ect';
-    let baseUri = baseComponent.state.hasIdBack ? 'https://onmd.id-kyc.com/' : 'https://onro.id-kyc.com/';
-    this.redirectLink = baseUri + envUri + '/mobileredirect?redirectId=' + baseComponent.state.redirectId;
-    if (baseComponent.state.phoneNumber && baseComponent.state.phoneNumber != '') {
-      this.contact = baseComponent.state.phoneNumber;
+    Events.flowStarted();
+    this.translations = await TranslationUtils.Translations.getValues();
+    this.infoTextTop = this.translations.MobileRedirectValues.InfoTop;
+    this.infoTextBottom = this.translations.MobileRedirectValues.InfoBottom;
+    let envUri = TranslationUtils.state.environment == 'QA' ? 'test' : 'ect';
+    let baseUri = TranslationUtils.state.hasIdBack ? 'https://onmd.id-kyc.com/' : 'https://onro.id-kyc.com/';
+    this.redirectLink = baseUri + envUri + '/mobileredirect?redirectId=' + TranslationUtils.state.redirectId;
+    if (TranslationUtils.state.phoneNumber && TranslationUtils.state.phoneNumber != '') {
+      this.contact = TranslationUtils.state.phoneNumber;
       this.prefilledPhone = true;
     }
     var self = this;
@@ -8603,28 +8840,28 @@ const MobileRedirect = class {
     await this.baseComponent.initialize();
     await delay(5000);
     await this.checkStatus();
-    while (this.orderStatus == baseComponent.OrderStatuses.Capturing || this.orderStatus == baseComponent.OrderStatuses.Waiting) {
+    while (this.orderStatus == TranslationUtils.OrderStatuses.Capturing || this.orderStatus == TranslationUtils.OrderStatuses.Waiting) {
       await this.checkStatus();
       await delay(5000);
     }
   }
   async checkStatus() {
-    this.orderStatus = await this.baseComponent.apiCall.GetStatus(baseComponent.state.requestId);
-    if (this.orderStatus == baseComponent.OrderStatuses.FinishedCapturing) {
+    this.orderStatus = await this.baseComponent.apiCall.GetStatus(TranslationUtils.state.requestId);
+    if (this.orderStatus == TranslationUtils.OrderStatuses.FinishedCapturing) {
       this.waitingMobile = false;
-      baseComponent.state.flowStatus = baseComponent.FlowStatus.COMPLETE;
+      TranslationUtils.state.flowStatus = TranslationUtils.FlowStatus.COMPLETE;
     }
-    if (this.orderStatus == baseComponent.OrderStatuses.NotFound) {
+    if (this.orderStatus == TranslationUtils.OrderStatuses.NotFound) {
       this.apiErrorEvent.emit({ message: 'No order was started for this process.' });
     }
-    if (this.orderStatus == baseComponent.OrderStatuses.Capturing) {
-      this.infoTextTop = this.baseComponent.translations.MobileRedirectValues.InfoWaiting;
+    if (this.orderStatus == TranslationUtils.OrderStatuses.Capturing) {
+      this.infoTextTop = this.translations.MobileRedirectValues.InfoWaiting;
       this.waitingMobile = true;
     }
-    if (this.orderStatus == baseComponent.OrderStatuses.Aborted) {
+    if (this.orderStatus == TranslationUtils.OrderStatuses.Aborted) {
       this.waitingMobile = false;
-      this.infoTextTop = this.baseComponent.translations.MobileRedirectValues.InfoAborted;
-      baseComponent.Events.flowAborted();
+      this.infoTextTop = this.translations.MobileRedirectValues.InfoAborted;
+      Events.flowAborted();
     }
   }
   async disconnectedCallback() {
@@ -8635,7 +8872,7 @@ const MobileRedirect = class {
       return;
     }
     this.waitingMobile = true;
-    this.infoTextTop = this.baseComponent.translations.MobileRedirectValues.InfoWaiting;
+    this.infoTextTop = this.translations.MobileRedirectValues.InfoWaiting;
     try {
       await this.baseComponent.apiCall.SendLink(this.redirectLink, this.contact);
     }
@@ -8653,7 +8890,7 @@ const MobileRedirect = class {
     ev.target.value = this.contact;
   }
   render() {
-    return (index.h("div", { class: "container" }, index.h("div", { class: "row" }, index.h("div", { hidden: this.waitingMobile }, index.h("div", { class: "text-center" }, index.h("p", { class: "font-size-2" }, this.infoTextTop)), index.h("div", { class: "qr-canvas align-center" }, index.h("img", { src: this.qrCode })), index.h("div", { class: "text-center" }, index.h("p", { class: "font-size-2" }, this.infoTextBottom)), index.h("div", { class: "input-container mb-15" }, index.h("label", { class: "font-size-18 mb-1 color-red", hidden: this.invalidValue == false }, index.h("b", null, this.baseComponent.translations.MobileRedirectValues.Validation)), index.h("input", { type: "text", id: "codeInput", class: "main-input", disabled: this.prefilledPhone, value: this.contact, onInput: ev => this.handleChangeContact(ev) })), index.h("div", { class: "pos-relative" }, index.h("div", { class: "btn-buletin" }, index.h("button", { class: "main-button", onClick: () => this.buttonClick() }, "Trimite"), index.h("p", { class: "main-text font-size-18 text-right mb-0" }, this.baseComponent.translations.GlobalValues.FooterText)))), index.h("div", { hidden: this.waitingMobile == false }, index.h("div", { class: "text-center" }, index.h("p", { class: "font-size-2" }, this.infoTextTop))))));
+    return (index.h("div", { class: "container" }, index.h("div", { class: "row" }, index.h("div", { hidden: this.waitingMobile }, index.h("div", { class: "text-center" }, index.h("p", { class: "font-size-2" }, this.infoTextTop)), index.h("div", { class: "qr-canvas align-center" }, index.h("img", { src: this.qrCode })), index.h("div", { class: "text-center" }, index.h("p", { class: "font-size-2" }, this.infoTextBottom)), index.h("div", { class: "input-container mb-15" }, index.h("label", { class: "font-size-18 mb-1 color-red", hidden: this.invalidValue == false }, index.h("b", null, this.translations.MobileRedirectValues.Validation)), index.h("input", { type: "text", id: "codeInput", class: "main-input", disabled: this.prefilledPhone, value: this.contact, onInput: ev => this.handleChangeContact(ev) })), index.h("div", { class: "pos-relative" }, index.h("div", { class: "btn-buletin" }, index.h("button", { class: "main-button", onClick: () => this.buttonClick() }, "Trimite"), index.h("p", { class: "main-text font-size-18 text-right mb-0" }, this.translations.GlobalValues.FooterText)))), index.h("div", { hidden: this.waitingMobile == false }, index.h("div", { class: "text-center" }, index.h("p", { class: "font-size-2" }, this.infoTextTop))))));
   }
 };
 MobileRedirect.style = mobileRedirectCss;
@@ -8698,7 +8935,7 @@ const ProcessId = class {
     this.showTimeout = undefined;
     this.showInvalid = undefined;
     this.flow = undefined;
-    this.baseComponent = new baseComponent.BaseComponent(baseComponent.FlowSteps.CiBack);
+    this.baseComponent = new BaseComponent(TranslationUtils.FlowSteps.CiBack);
     this.baseComponent.setEventEmitter(this.apiErrorEvent);
   }
   componentWillLoad() {
@@ -8715,7 +8952,7 @@ const ProcessId = class {
       back: null,
       tilt: null,
     };
-    if (baseComponent.state.hasIdBack) {
+    if (TranslationUtils.state.hasIdBack) {
       this.flow.back = {
         photoDone: false,
         recordingDone: false,
@@ -8725,7 +8962,7 @@ const ProcessId = class {
         recType: CaptureUploadTypes.IdBackVideo,
       };
     }
-    if (baseComponent.state.hasIdTilt) {
+    if (TranslationUtils.state.hasIdTilt) {
       this.flow.tilt = {
         photoDone: true,
         recordingDone: false,
@@ -8825,7 +9062,7 @@ const ProcessId = class {
     if (photoFile == null || uploadType == '') {
       return false;
     }
-    var uploadResult = await this.baseComponent.apiCall.UploadFileForRequestB64(baseComponent.state.requestId, uploadType, photoFile);
+    var uploadResult = await this.baseComponent.apiCall.UploadFileForRequestB64(TranslationUtils.state.requestId, uploadType, photoFile);
     if (uploadResult) {
       return true;
     }
@@ -8839,7 +9076,7 @@ const ProcessId = class {
     if (recordingFile == null) {
       return;
     }
-    var uploadResult = await this.baseComponent.apiCall.UploadFileForRequestB64(baseComponent.state.requestId, uploadType, recordingFile);
+    var uploadResult = await this.baseComponent.apiCall.UploadFileForRequestB64(TranslationUtils.state.requestId, uploadType, recordingFile);
     if (uploadResult) {
       return true;
     }
@@ -8872,10 +9109,10 @@ const ProcessId = class {
   async endFlow() {
     if (this.captureStep == IdCaptureFlowStatus.IdFront) {
       if (this.flow.front.photoDone && this.flow.front.recordingDone) {
-        if (baseComponent.state.hasIdBack) {
+        if (TranslationUtils.state.hasIdBack) {
           this.captureStep = IdCaptureFlowStatus.IdBack;
         }
-        else if (baseComponent.state.hasIdTilt) {
+        else if (TranslationUtils.state.hasIdTilt) {
           this.captureStep = IdCaptureFlowStatus.Tilt;
         }
         else {
@@ -8886,9 +9123,9 @@ const ProcessId = class {
         return;
       }
     }
-    if (this.captureStep == IdCaptureFlowStatus.IdBack && baseComponent.state.hasIdBack) {
+    if (this.captureStep == IdCaptureFlowStatus.IdBack && TranslationUtils.state.hasIdBack) {
       if (this.flow.back.photoDone && this.flow.back.recordingDone) {
-        if (baseComponent.state.hasIdTilt) {
+        if (TranslationUtils.state.hasIdTilt) {
           this.captureStep = IdCaptureFlowStatus.Tilt;
         }
         else {
@@ -8899,7 +9136,7 @@ const ProcessId = class {
         return;
       }
     }
-    if (this.captureStep == IdCaptureFlowStatus.Tilt && baseComponent.state.hasIdTilt) {
+    if (this.captureStep == IdCaptureFlowStatus.Tilt && TranslationUtils.state.hasIdTilt) {
       if (this.flow.tilt.photoDone && this.flow.tilt.recordingDone) {
         this.captureStep = IdCaptureFlowStatus.End;
       }
@@ -8910,15 +9147,15 @@ const ProcessId = class {
     if (this.captureStep != IdCaptureFlowStatus.End) {
       return;
     }
-    baseComponent.state.flowStatus = baseComponent.FlowStatus.LIVENESS;
+    TranslationUtils.state.flowStatus = TranslationUtils.FlowStatus.LIVENESS;
   }
   async disconnectedCallback() {
     await this.baseComponent.finalize();
   }
   switchCamera() {
     if (this.captureRetryCount == 1) {
-      let camIndex = baseComponent.state.cameraIds.indexOf(baseComponent.state.cameraId);
-      baseComponent.state.cameraId = camIndex === baseComponent.state.cameraIds.length - 1 ? baseComponent.state.cameraIds[0] : baseComponent.state.cameraIds[camIndex + 1];
+      let camIndex = TranslationUtils.state.cameraIds.indexOf(TranslationUtils.state.cameraId);
+      TranslationUtils.state.cameraId = camIndex === TranslationUtils.state.cameraIds.length - 1 ? TranslationUtils.state.cameraIds[0] : TranslationUtils.state.cameraIds[camIndex + 1];
       this.captureRetryCount = 0;
     }
     else {
@@ -8980,7 +9217,7 @@ const SelfieCapture = class {
     this.cameras = new Cameras();
     this.demoEnded = false;
     this.uploadingLink = 'https://ekyc.blob.core.windows.net/$web/animations/uploading_selfie.mp4';
-    this.baseComponent = new baseComponent.BaseComponent(baseComponent.FlowSteps.SelfieCapture);
+    this.baseComponent = new BaseComponent(TranslationUtils.FlowSteps.SelfieCapture);
   }
   eventVideoStarted(event) {
     this.videoStarted = true;
@@ -8989,23 +9226,24 @@ const SelfieCapture = class {
     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 TranslationUtils.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' });
     }
   }
   async componentDidLoad() {
-    await this.baseComponent.logStep(baseComponent.FlowSteps.SelfieCapture, baseComponent.FlowMoments.Initialized);
-    this.demoVideo.src = baseComponent.SelfieCaptureValues.FacePoseDemoMapping[FacePose.Main];
+    await this.baseComponent.logStep(TranslationUtils.FlowSteps.SelfieCapture, TranslationUtils.FlowMoments.Initialized);
+    this.demoVideo.src = TranslationUtils.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();
   }
   async openCamera() {
-    const constraints = this.cameras.GetConstraints('', baseComponent.state.device, true);
+    const constraints = this.cameras.GetConstraints('', TranslationUtils.state.device, true);
     setTimeout(() => {
       navigator.mediaDevices
         .getUserMedia(constraints)
@@ -9035,13 +9273,13 @@ const SelfieCapture = class {
     this.captureTaken = true;
     let res = await Stream.getInstance(VerificationMode.Full).takePhoto();
     this.photoIsReady(res);
-    await this.baseComponent.logStep(baseComponent.FlowSteps.SelfieCapture, baseComponent.FlowMoments.Finalized);
+    await this.baseComponent.logStep(TranslationUtils.FlowSteps.SelfieCapture, TranslationUtils.FlowMoments.Finalized);
   }
   verificationFinished() {
     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;
@@ -9050,7 +9288,7 @@ const SelfieCapture = class {
   }
   render() {
     let cameraStyle;
-    if (baseComponent.state.device.isMobile && this.videoStarted) {
+    if (TranslationUtils.state.device.isMobile && this.videoStarted) {
       cameraStyle = {
         'width': this.captureWidth + 'px',
         'height': this.captureHeight + 'px',
@@ -9063,7 +9301,7 @@ const SelfieCapture = class {
     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 (index.h("div", { class: bgDemo }, index.h("div", { class: "container-video" }, index.h("div", { hidden: this.demoEnded }, index.h("video", { id: "howtoSelfie", class: "video-demo", playsinline: true, ref: el => (this.demoVideo = el) }, index.h("source", { type: "video/mp4" }))), index.h("div", { hidden: this.demoEnded == false }, index.h("div", { hidden: this.verified }, index.h("div", { class: "video-capture" }, index.h("div", { style: cameraStyle }, index.h("camera-comp", { "capture-mode": "selfie" }))))), index.h("div", { class: "capture-title" }, index.h("h1", { class: titleClass }, this.titleMesage), index.h("p", { class: "main-text font-size-18 text-right mb-0" }, this.baseComponent.translations.GlobalValues.FooterText)))));
+    return (index.h("div", { class: bgDemo }, index.h("div", { class: "container-video" }, index.h("div", { hidden: this.demoEnded }, index.h("video", { id: "howtoSelfie", class: "video-demo", playsinline: true, ref: el => (this.demoVideo = el) }, index.h("source", { type: "video/mp4" }))), index.h("div", { hidden: this.demoEnded == false }, index.h("div", { hidden: this.verified }, index.h("div", { class: "video-capture" }, index.h("div", { style: cameraStyle }, index.h("camera-comp", { "capture-mode": "selfie" }))))), index.h("div", { class: "capture-title" }, index.h("h1", { class: titleClass }, this.titleMesage), index.h("p", { class: "main-text font-size-18 text-right mb-0" }, this.translations.GlobalValues.FooterText)))));
   }
   get component() { return index.getElement(this); }
 };
@@ -9095,7 +9333,7 @@ const SelfieTilt = class {
     this.cameras = new Cameras();
     this.demoEnded = false;
     this.uploadingLink = 'https://ekyc.blob.core.windows.net/$web/animations/uploading_selfie.mp4';
-    this.baseComponent = new baseComponent.BaseComponent(baseComponent.FlowSteps.SelfieTilt);
+    this.baseComponent = new BaseComponent(TranslationUtils.FlowSteps.SelfieTilt);
   }
   eventVideoStarted(event) {
     this.videoStarted = true;
@@ -9104,8 +9342,9 @@ const SelfieTilt = class {
     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 TranslationUtils.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' });
@@ -9113,17 +9352,17 @@ const SelfieTilt = class {
   }
   async componentDidLoad() {
     this.mainStream = Stream.getInstance(VerificationMode.Tilt);
-    await this.baseComponent.logStep(baseComponent.FlowSteps.SelfieTilt, baseComponent.FlowMoments.Initialized);
-    this.titleMesage = this.baseComponent.translations.SelfieCaptureValues.FacePoseMapping[Object.values(FacePose).indexOf(this.mainStream.facePose)];
+    await this.baseComponent.logStep(TranslationUtils.FlowSteps.SelfieTilt, TranslationUtils.FlowMoments.Initialized);
+    this.titleMesage = this.translations.SelfieCaptureValues.FacePoseMapping[Object.values(FacePose).indexOf(this.mainStream.facePose)];
     this.demoEnded = false;
-    this.demoVideo.src = baseComponent.SelfieCaptureValues.FacePoseDemoMapping[this.mainStream.facePose];
+    this.demoVideo.src = TranslationUtils.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();
   }
   async openCamera() {
-    const constraints = this.cameras.GetConstraints('', baseComponent.state.device, true);
+    const constraints = this.cameras.GetConstraints('', TranslationUtils.state.device, true);
     setTimeout(() => {
       navigator.mediaDevices
         .getUserMedia(constraints)
@@ -9152,13 +9391,13 @@ const SelfieTilt = class {
     this.captureTaken = true;
     let res = this.mainStream.takePhoto();
     this.photoIsReady(res);
-    await this.baseComponent.logStep(baseComponent.FlowSteps.SelfieCapture, baseComponent.FlowMoments.Finalized);
+    await this.baseComponent.logStep(TranslationUtils.FlowSteps.SelfieCapture, TranslationUtils.FlowMoments.Finalized);
   }
   verificationFinished() {
     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;
@@ -9167,7 +9406,7 @@ const SelfieTilt = class {
   }
   render() {
     let cameraStyle;
-    if (baseComponent.state.device.isMobile && this.videoStarted) {
+    if (TranslationUtils.state.device.isMobile && this.videoStarted) {
       cameraStyle = {
         'width': this.captureWidth + 'px',
         'height': this.captureHeight + 'px',
@@ -9180,7 +9419,7 @@ const SelfieTilt = class {
     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 (index.h("div", { class: bgDemo }, index.h("div", { class: "container-video" }, index.h("div", { hidden: this.demoEnded }, index.h("video", { id: "howtoSelfie", class: "video-demo", playsinline: true, ref: el => (this.demoVideo = el) }, index.h("source", { type: "video/mp4" }))), index.h("div", { hidden: this.demoEnded == false }, index.h("div", { hidden: this.verified }, index.h("div", { class: "video-capture" }, index.h("div", { style: cameraStyle }, index.h("camera-comp", { "capture-mode": "selfie" }))))), index.h("div", { class: "capture-title" }, index.h("h1", { class: titleClass }, this.titleMesage), index.h("p", { class: "main-text font-size-18 text-right mb-0" }, this.baseComponent.translations.GlobalValues.FooterText)))));
+    return (index.h("div", { class: bgDemo }, index.h("div", { class: "container-video" }, index.h("div", { hidden: this.demoEnded }, index.h("video", { id: "howtoSelfie", class: "video-demo", playsinline: true, ref: el => (this.demoVideo = el) }, index.h("source", { type: "video/mp4" }))), index.h("div", { hidden: this.demoEnded == false }, index.h("div", { hidden: this.verified }, index.h("div", { class: "video-capture" }, index.h("div", { style: cameraStyle }, index.h("camera-comp", { "capture-mode": "selfie" }))))), index.h("div", { class: "capture-title" }, index.h("h1", { class: titleClass }, this.titleMesage), index.h("p", { class: "main-text font-size-18 text-right mb-0" }, this.translations.GlobalValues.FooterText)))));
   }
   get component() { return index.getElement(this); }
 };
@@ -9199,30 +9438,30 @@ const SmsCodeValidation = class {
     this.code = undefined;
     this.prefilledPhone = false;
     this.canSend = false;
-    if (baseComponent.state.flowStatus == baseComponent.FlowStatus.PHONE) {
-      this.baseComponent = new baseComponent.BaseComponent(baseComponent.FlowSteps.OtpSend);
+    if (TranslationUtils.state.flowStatus == TranslationUtils.FlowStatus.PHONE) {
+      this.baseComponent = new BaseComponent(TranslationUtils.FlowSteps.OtpSend);
     }
-    if (baseComponent.state.flowStatus == baseComponent.FlowStatus.CODE) {
-      this.baseComponent = new baseComponent.BaseComponent(baseComponent.FlowSteps.OtpCheck);
+    if (TranslationUtils.state.flowStatus == TranslationUtils.FlowStatus.CODE) {
+      this.baseComponent = new BaseComponent(TranslationUtils.FlowSteps.OtpCheck);
     }
     this.baseComponent.setEventEmitter(this.apiErrorEvent);
   }
   async doAction() {
     try {
       this.canSend = false;
-      if (baseComponent.state.flowStatus == baseComponent.FlowStatus.CODE || baseComponent.state.flowStatus == baseComponent.FlowStatus.CODEERROR) {
-        var codeChecked = await this.baseComponent.apiCall.CheckOTPCode(baseComponent.state.requestId, this.code);
+      if (TranslationUtils.state.flowStatus == TranslationUtils.FlowStatus.CODE || TranslationUtils.state.flowStatus == TranslationUtils.FlowStatus.CODEERROR) {
+        var codeChecked = await this.baseComponent.apiCall.CheckOTPCode(TranslationUtils.state.requestId, this.code);
         if (codeChecked === true) {
-          baseComponent.state.flowStatus = baseComponent.FlowStatus.ID;
+          TranslationUtils.state.flowStatus = TranslationUtils.FlowStatus.ID;
         }
         else {
-          baseComponent.state.flowStatus = baseComponent.FlowStatus.CODEERROR;
+          TranslationUtils.state.flowStatus = TranslationUtils.FlowStatus.CODEERROR;
         }
       }
-      if (baseComponent.state.flowStatus == baseComponent.FlowStatus.PHONE) {
-        var codeSent = await this.baseComponent.apiCall.SendOTPCode(baseComponent.state.requestId, this.phoneNumber);
+      if (TranslationUtils.state.flowStatus == TranslationUtils.FlowStatus.PHONE) {
+        var codeSent = await this.baseComponent.apiCall.SendOTPCode(TranslationUtils.state.requestId, this.phoneNumber);
         if (codeSent === true) {
-          baseComponent.state.flowStatus = baseComponent.FlowStatus.CODE;
+          TranslationUtils.state.flowStatus = TranslationUtils.FlowStatus.CODE;
         }
       }
     }
@@ -9233,21 +9472,22 @@ const SmsCodeValidation = class {
   async disconnectedCallback() {
     await this.baseComponent.finalize();
   }
-  componentWillRender() {
-    if (baseComponent.state.flowStatus == baseComponent.FlowStatus.PHONE) {
-      this.title = this.baseComponent.translations.PhoneValidationValues.Title;
-      this.details = this.baseComponent.translations.PhoneValidationValues.Description;
-      this.buttonText = this.baseComponent.translations.PhoneValidationValues.Button;
-      if (baseComponent.state.phoneNumber && baseComponent.state.phoneNumber != '') {
-        this.phoneNumber = baseComponent.state.phoneNumber;
+  async componentWillRender() {
+    this.translations = await TranslationUtils.Translations.getValues();
+    if (TranslationUtils.state.flowStatus == TranslationUtils.FlowStatus.PHONE) {
+      this.title = this.translations.PhoneValidationValues.Title;
+      this.details = this.translations.PhoneValidationValues.Description;
+      this.buttonText = this.translations.PhoneValidationValues.Button;
+      if (TranslationUtils.state.phoneNumber && TranslationUtils.state.phoneNumber != '') {
+        this.phoneNumber = TranslationUtils.state.phoneNumber;
         this.prefilledPhone = true;
         this.canSend = true;
       }
     }
-    if (baseComponent.state.flowStatus == baseComponent.FlowStatus.CODE || baseComponent.state.flowStatus == baseComponent.FlowStatus.CODEERROR) {
-      this.title = this.baseComponent.translations.CodeValidationValues.Title;
-      this.details = this.baseComponent.translations.CodeValidationValues.Description;
-      this.buttonText = this.baseComponent.translations.CodeValidationValues.Button;
+    if (TranslationUtils.state.flowStatus == TranslationUtils.FlowStatus.CODE || TranslationUtils.state.flowStatus == TranslationUtils.FlowStatus.CODEERROR) {
+      this.title = this.translations.CodeValidationValues.Title;
+      this.details = this.translations.CodeValidationValues.Description;
+      this.buttonText = this.translations.CodeValidationValues.Button;
     }
   }
   async componentDidLoad() {
@@ -9272,16 +9512,16 @@ const SmsCodeValidation = class {
   render() {
     let inputBlock;
     let errorBlock;
-    if (baseComponent.state.flowStatus == baseComponent.FlowStatus.CODEERROR) {
-      errorBlock = index.h("p", { class: "main-text font-size-18 mt-15 color-red text-center" }, this.baseComponent.translations.CodeValidationValues.Error);
+    if (TranslationUtils.state.flowStatus == TranslationUtils.FlowStatus.CODEERROR) {
+      errorBlock = index.h("p", { class: "main-text font-size-18 mt-15 color-red text-center" }, this.translations.CodeValidationValues.Error);
     }
-    if (baseComponent.state.flowStatus == baseComponent.FlowStatus.PHONE) {
-      inputBlock = (index.h("div", { class: "input-container mb-15" }, index.h("label", { class: "font-size-18 mb-1" }, index.h("b", null, this.baseComponent.translations.PhoneValidationValues.Label)), index.h("input", { type: "tel", id: "phoneInput", class: "main-input", disabled: this.prefilledPhone, onInput: ev => this.handleChangePhone(ev), value: this.phoneNumber })));
+    if (TranslationUtils.state.flowStatus == TranslationUtils.FlowStatus.PHONE) {
+      inputBlock = (index.h("div", { class: "input-container mb-15" }, index.h("label", { class: "font-size-18 mb-1" }, index.h("b", null, this.translations.PhoneValidationValues.Label)), index.h("input", { type: "tel", id: "phoneInput", class: "main-input", disabled: this.prefilledPhone, onInput: ev => this.handleChangePhone(ev), value: this.phoneNumber })));
     }
     else {
       inputBlock = (index.h("div", { class: "input-container mb-15" }, index.h("input", { type: "text", id: "codeInput", class: "main-input", onInput: ev => this.handleChangeCode(ev), value: this.code })));
     }
-    return (index.h("div", { class: "container" }, index.h("div", { class: "row row-validare" }, index.h("div", null, index.h("h1", { class: "text-center" }, this.title), errorBlock == null ? index.h("p", { class: "main-text font-size-2 mt-15 mb-20 text-center" }, this.details) : errorBlock), inputBlock, index.h("div", { class: "pos-relative show-bottom" }, index.h("div", { class: "btn-buletin" }, index.h("button", { id: "action", disabled: !this.canSend, class: "main-button", onClick: () => this.doAction() }, 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 row-validare" }, index.h("div", null, index.h("h1", { class: "text-center" }, this.title), errorBlock == null ? index.h("p", { class: "main-text font-size-2 mt-15 mb-20 text-center" }, this.details) : errorBlock), inputBlock, index.h("div", { class: "pos-relative show-bottom" }, index.h("div", { class: "btn-buletin" }, index.h("button", { id: "action", disabled: !this.canSend, class: "main-button", onClick: () => this.doAction() }, this.buttonText), index.h("p", { class: "main-text font-size-18 text-right mb-0" }, this.translations.GlobalValues.FooterText))))));
   }
 };
 SmsCodeValidation.style = smsCodeValidationCss;
@@ -9297,7 +9537,7 @@ const UserLiveness = class {
     this.showError = undefined;
     this.captureStep = undefined;
     this.flow = undefined;
-    this.baseComponent = new baseComponent.BaseComponent(baseComponent.FlowSteps.Selfie);
+    this.baseComponent = new BaseComponent(TranslationUtils.FlowSteps.Selfie);
     this.baseComponent.setEventEmitter(this.apiErrorEvent);
   }
   async componentDidLoad() {
@@ -9316,7 +9556,7 @@ const UserLiveness = class {
       back: null,
       tilt: null,
     };
-    if (baseComponent.state.hasSelfieGesture) {
+    if (TranslationUtils.state.hasSelfieGesture) {
       this.flow.tilt = {
         photoDone: true,
         recordingDone: false,
@@ -9407,7 +9647,7 @@ const UserLiveness = class {
     if (this.flow.front.photoDone) {
       return;
     }
-    this.flow.front.photoDone = await this.baseComponent.apiCall.UploadFileForRequestB64(baseComponent.state.requestId, photoType, photoFile);
+    this.flow.front.photoDone = await this.baseComponent.apiCall.UploadFileForRequestB64(TranslationUtils.state.requestId, photoType, photoFile);
     if (this.flow.front.photoDone) {
       await this.endFlow();
     }
@@ -9416,7 +9656,7 @@ const UserLiveness = class {
     }
   }
   async uploadRecording(uploadRec, recType) {
-    let uplodDone = await this.baseComponent.apiCall.UploadFileForRequestB64(baseComponent.state.requestId, recType, uploadRec);
+    let uplodDone = await this.baseComponent.apiCall.UploadFileForRequestB64(TranslationUtils.state.requestId, recType, uploadRec);
     if (uplodDone) {
       return true;
     }
@@ -9431,7 +9671,7 @@ const UserLiveness = class {
   async endFlow() {
     if (this.captureStep == SelfieFlowStatus.Selfie) {
       if (this.flow.front.photoDone && this.flow.front.recordingDone) {
-        if (baseComponent.state.hasSelfieGesture) {
+        if (TranslationUtils.state.hasSelfieGesture) {
           this.captureStep = SelfieFlowStatus.Gesture;
         }
         else {
@@ -9453,7 +9693,7 @@ const UserLiveness = class {
     if (this.captureStep != SelfieFlowStatus.End) {
       return;
     }
-    baseComponent.state.flowStatus = baseComponent.FlowStatus.COMPLETE;
+    TranslationUtils.state.flowStatus = TranslationUtils.FlowStatus.COMPLETE;
   }
   render() {
     let howTo = index.h("how-to-info", { idSide: "" });