@yoobic/yobi 8.5.0-60 → 8.5.0-61

package/dist/cjs/yoo-form-capture.cjs.entry.js

@@ -2,14 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9ca0e46c.js');
-const cameraHelpers = require('./camera-helpers-331cf700.js');
-const overlays = require('./overlays-e5d2ff76.js');
-require('./index-9aadeb94.js');
+const index$1 = require('./index-9ca0e46c.js');
+const cameraHelpers = require('./camera-helpers-ef06322c.js');
+const index = require('./index-0cfb67d1.js');
+require('./index-6f92bccb.js');
 const lodash = require('./lodash-a9050d79.js');
-const commonHelpers = require('./common-helpers-9f63a319.js');
-const formHelpers = require('./form-helpers-2fcb4674.js');
-const formInputHelpers = require('./form-input-helpers-2d988e31.js');
+const commonHelpers = require('./common-helpers-44428bf7.js');
+const formHelpers = require('./form-helpers-1205df78.js');
+const formInputHelpers = require('./form-input-helpers-4ad38e19.js');
 require('./index-a1bbe627.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
@@ -20,18 +20,18 @@ function shouldUseLowPerformanceCamera(user, isNativeMobile, useLibrary) {
     (enableLowPerformanceCamera === undefined && isLowEndDevice)) && isNativeMobile && !useLibrary;
 }
 async function processMediaPath(mediaPath) {
-  if (overlays.isBase64(mediaPath)) {
+  if (index.isBase64(mediaPath)) {
     return mediaPath;
   }
   else if (mediaPath === null || mediaPath === void 0 ? void 0 : mediaPath.includes('?')) {
     return mediaPath.substring(0, mediaPath.indexOf('?'));
   }
-  else if (!overlays.isImageUrl(mediaPath)) {
-    return overlays.addFilePrefix(mediaPath);
+  else if (!index.isImageUrl(mediaPath)) {
+    return index.addFilePrefix(mediaPath);
   }
-  else if (!overlays.isAndroid() && ['cache', 'tmp'].includes(mediaPath)) {
+  else if (!index.isAndroid() && ['cache', 'tmp'].includes(mediaPath)) {
     try {
-      return await overlays.moveToImageDirectory(overlays.addFilePrefix(mediaPath));
+      return await index.moveToImageDirectory(index.addFilePrefix(mediaPath));
     }
     catch (err) {
       throw new Error(err);
@@ -43,18 +43,18 @@ const formCaptureCss = "svg:not(:root){overflow:hidden}:host{--width-readonly-pr
 
 const YooFormCaptureComponent = class {
   constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.validityChanged = index.createEvent(this, "validityChanged", 7);
-    this.inputBlurred = index.createEvent(this, "inputBlurred", 7);
-    this.inputFocused = index.createEvent(this, "inputFocused", 7);
-    this.inputChanged = index.createEvent(this, "inputChanged", 7);
-    this.imageRecognition = index.createEvent(this, "imageRecognition", 7);
-    this.getGeoloc = index.createEvent(this, "getGeoloc", 7);
-    this.getMediaurl = index.createEvent(this, "getMediaurl", 7);
-    this.galleryOpened = index.createEvent(this, "galleryOpened", 7);
-    this.actionSheetOpened = index.createEvent(this, "actionSheetOpened", 7);
-    this.extraDataChanged = index.createEvent(this, "extraDataChanged", 7);
-    this.fetchData = index.createEvent(this, "fetchData", 7);
+    index$1.registerInstance(this, hostRef);
+    this.validityChanged = index$1.createEvent(this, "validityChanged", 7);
+    this.inputBlurred = index$1.createEvent(this, "inputBlurred", 7);
+    this.inputFocused = index$1.createEvent(this, "inputFocused", 7);
+    this.inputChanged = index$1.createEvent(this, "inputChanged", 7);
+    this.imageRecognition = index$1.createEvent(this, "imageRecognition", 7);
+    this.getGeoloc = index$1.createEvent(this, "getGeoloc", 7);
+    this.getMediaurl = index$1.createEvent(this, "getMediaurl", 7);
+    this.galleryOpened = index$1.createEvent(this, "galleryOpened", 7);
+    this.actionSheetOpened = index$1.createEvent(this, "actionSheetOpened", 7);
+    this.extraDataChanged = index$1.createEvent(this, "extraDataChanged", 7);
+    this.fetchData = index$1.createEvent(this, "fetchData", 7);
     this.extraData = {};
     this.isHistory = false;
     this.type = 'photo';
@@ -97,7 +97,7 @@ const YooFormCaptureComponent = class {
     this.emitOnUpdated = false;
   }
   async onPhotoUploadComplete() {
-    this.currentUploadingStatus = overlays.translate('RECOGNIZINGIMAGES');
+    this.currentUploadingStatus = index.translate('RECOGNIZINGIMAGES');
   }
   async onPhotoUploadProgressUpdate(progress, index) {
     if (this.progressBarRef && this.progressBarRef[index]) {
@@ -108,8 +108,8 @@ const YooFormCaptureComponent = class {
     }
   }
   async onImageRecognitionFailed() {
-    overlays.showToast({
-      message: overlays.translate('IMAGERECONOTDONE'),
+    index.showToast({
+      message: index.translate('IMAGERECONOTDONE'),
       duration: 2000,
       icon: 'rejected',
       iconColor: 'light',
@@ -167,14 +167,14 @@ const YooFormCaptureComponent = class {
           let color = 'dark';
           if (algoValue === true) {
             color = 'app-color';
-            algoValue = overlays.translate('true');
+            algoValue = index.translate('true');
           }
           if (algoValue === false) {
             color = 'danger';
-            algoValue = overlays.translate('false');
+            algoValue = index.translate('false');
           }
           const hidden = (imageRecognitionResults.hiddenFields && imageRecognitionResults.hiddenFields.indexOf(key) >= 0) || (hiddenKeys && hiddenKeys.indexOf(key) >= 0);
-          this.imageRecognitionResults.push({ title: overlays.translate(key.toUpperCase()), color, value: algoValue, rawValue: imageRecognitionResults[key], hidden, key });
+          this.imageRecognitionResults.push({ title: index.translate(key.toUpperCase()), color, value: algoValue, rawValue: imageRecognitionResults[key], hidden, key });
         });
       }
       this.extraData.imageRecognitionResults = this.imageRecognitionResults;
@@ -198,17 +198,17 @@ const YooFormCaptureComponent = class {
     let fileSize = 0;
     if (this.maximumCaptureSize > 0) {
       if (this.multiple && (newVal === null || newVal === void 0 ? void 0 : newVal.length) > 0) {
-        await Promise.all(newVal.map((item) => overlays.getFormCapturedFileSize(item))).then((sizes) => {
+        await Promise.all(newVal.map((item) => index.getFormCapturedFileSize(item))).then((sizes) => {
           fileSize = sizes.reduce((prev, next) => prev + next);
         });
       }
       else {
-        fileSize = await overlays.getFormCapturedFileSize(newVal);
+        fileSize = await index.getFormCapturedFileSize(newVal);
       }
       // reset to old value if the size is too big
       if (fileSize > this.maximumCaptureSize) {
         formInputHelpers.setValueAndValidateInput(oldVal, this);
-        overlays.showAlert(overlays.translate('PERFILESIZERROR', { size: overlays.pipes.fileSize.transform(this.maximumCaptureSize) }), [overlays.translate('YOOBICOK')], null);
+        index.showAlert(index.translate('PERFILESIZERROR', { size: index.pipes.fileSize.transform(this.maximumCaptureSize) }), [index.translate('YOOBICOK')], null);
       }
     }
   }
@@ -243,7 +243,7 @@ const YooFormCaptureComponent = class {
   }
   initExtraData() {
     if (this.extraData) {
-      if (overlays.isNullOrUndefined(this.value) && this.extraData.drawings) {
+      if (index.isNullOrUndefined(this.value) && this.extraData.drawings) {
         this.value = this.extraData.drawings;
       }
       if (this.extraData.imageRecognitionResults) {
@@ -281,7 +281,7 @@ const YooFormCaptureComponent = class {
   }
   allowCrop(data) {
     var _a;
-    return overlays.isWeb(this.host) && (((_a = this.cropperOptions) === null || _a === void 0 ? void 0 : _a.cropRatio) > 0 || this.showCropper) && (overlays.isImage(data) || overlays.isBase64(data)) && !overlays.isGif(data) && (!(typeof data === 'string' && overlays.isUnsplashUrl(data)) || overlays.isWeb(this.host));
+    return index.isWeb(this.host) && (((_a = this.cropperOptions) === null || _a === void 0 ? void 0 : _a.cropRatio) > 0 || this.showCropper) && (index.isImage(data) || index.isBase64(data)) && !index.isGif(data) && (!(typeof data === 'string' && index.isUnsplashUrl(data)) || index.isWeb(this.host));
   }
   removeAllCapture() {
     this.value = [];
@@ -305,18 +305,18 @@ const YooFormCaptureComponent = class {
     return !this.multiple ? this.value : this.value[index];
   }
   isMedia(file) {
-    return overlays.isImage(file) || overlays.isVideo(file) || overlays.isAudio(file);
+    return index.isImage(file) || index.isVideo(file) || index.isAudio(file);
   }
   /** for webcam, choose which device to take photo/video */
-  capture(device, index) {
+  capture(device, index$1) {
     var _a, _b;
-    let newIndex = index;
-    if (index < 0) {
+    let newIndex = index$1;
+    if (index$1 < 0) {
       newIndex = (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
     }
-    if (overlays.isNativeMobile()) {
-      let newIndex = index;
-      if (index < 0) {
+    if (index.isNativeMobile()) {
+      let newIndex = index$1;
+      if (index$1 < 0) {
         if (this.value && this.value.length) {
           newIndex = this.value.length;
         }
@@ -325,7 +325,7 @@ const YooFormCaptureComponent = class {
         }
       }
       if (this.type === 'photo') {
-        this.capturePhoto(false, index);
+        this.capturePhoto(false, index$1);
       }
       else if (this.type === 'audio') {
         this.captureAudio(newIndex);
@@ -340,18 +340,18 @@ const YooFormCaptureComponent = class {
       }
     }
   }
-  async processMediaData(mediaData, index) {
+  async processMediaData(mediaData, index$1) {
     try {
-      !overlays.isImageUrl(mediaData) && (mediaData = await processMediaPath(mediaData));
+      !index.isImageUrl(mediaData) && (mediaData = await processMediaPath(mediaData));
       if (this.shouldTagImage()) {
         const tag = await this.showPhotoTagDialog(mediaData);
-        (tag === null || tag === void 0 ? void 0 : tag.data) && this.updateTagData(tag, index);
+        (tag === null || tag === void 0 ? void 0 : tag.data) && this.updateTagData(tag, index$1);
       }
       if (mediaData) {
-        await this.setFieldValue(index, mediaData);
+        await this.setFieldValue(index$1, mediaData);
       }
-      this.clearPhotoEdit(index);
-      this.saveGeoloc && this.captureGeoloc(index);
+      this.clearPhotoEdit(index$1);
+      this.saveGeoloc && this.captureGeoloc(index$1);
     }
     catch (err) {
       throw new Error(err);
@@ -365,7 +365,7 @@ const YooFormCaptureComponent = class {
     imageTag.addEventListener('fetchData', (ev) => {
       this.onFetchGridData(ev);
     });
-    return overlays.showModal(imageTag, null, '', 'slideYEnterAnimation', 'slideYLeaveAnimation');
+    return index.showModal(imageTag, null, '', 'slideYEnterAnimation', 'slideYLeaveAnimation');
   }
   updateTagData(tag, index) {
     this.initTags();
@@ -399,12 +399,12 @@ const YooFormCaptureComponent = class {
     cameraPreviewer.max = max;
     cameraPreviewer.regularMode = regularMode;
     cameraPreviewer.stitchDirection = stitchDirection;
-    if (overlays.isNativeMobile() && overlays.isIOS() && !overlays.isIphoneX()) {
-      overlays.StatusBar.hide();
+    if (index.isNativeMobile() && index.isIOS() && !index.isIphoneX()) {
+      index.StatusBar.hide();
     }
-    return overlays.showModal(cameraPreviewer, null, `${extraClass} transparent`, 'slideYEnterAnimation', 'slideYLeaveAnimation').then((ret) => {
-      if (overlays.isNativeMobile() && overlays.isIOS() && !overlays.isIphoneX()) {
-        overlays.StatusBar.show();
+    return index.showModal(cameraPreviewer, null, `${extraClass} transparent`, 'slideYEnterAnimation', 'slideYLeaveAnimation').then((ret) => {
+      if (index.isNativeMobile() && index.isIOS() && !index.isIphoneX()) {
+        index.StatusBar.show();
       }
       cameraPreviewer = null;
       if (stitchDirection && (ret === null || ret === void 0 ? void 0 : ret.data)) {
@@ -416,31 +416,31 @@ const YooFormCaptureComponent = class {
       return ret === null || ret === void 0 ? void 0 : ret.data;
     });
   }
-  async capturePhoto(useLibrary, index) {
+  async capturePhoto(useLibrary, index$1) {
     var _a, _b, _c, _d, _e;
     const quality = this.isImageRecognition ? 100 : 70;
     const sourceType = useLibrary ? cameraHelpers.PictureSourceType.PHOTOLIBRARY : cameraHelpers.PictureSourceType.CAMERA;
     const mediaType = this.type === 'video' ? cameraHelpers.MediaType.VIDEO : cameraHelpers.MediaType.PICTURE;
     const isMultiMode = false;
-    let captureIndex = index;
-    if (index === -1) {
+    let captureIndex = index$1;
+    if (index$1 === -1) {
       captureIndex = this.value && this.value.length - 1 > -1 ? this.value.length - 1 : -1;
     }
-    const useLowPerfCamera = shouldUseLowPerformanceCamera((_a = overlays.getSession()) === null || _a === void 0 ? void 0 : _a.user, overlays.isNativeMobile(), useLibrary);
+    const useLowPerfCamera = shouldUseLowPerformanceCamera((_a = index.getSession()) === null || _a === void 0 ? void 0 : _a.user, index.isNativeMobile(), useLibrary);
     // Lenovo bug with taking photo, use media capture plugin or low pref cam instead
-    const useMediaCapture = overlays.isLenovo() && !useLowPerfCamera && !useLibrary && mediaType === cameraHelpers.MediaType.PICTURE;
+    const useMediaCapture = index.isLenovo() && !useLowPerfCamera && !useLibrary && mediaType === cameraHelpers.MediaType.PICTURE;
     let promise;
     if (this.algorithm && this.algorithm.stitch && !useLibrary) {
       let stitchDirection = null;
       const buttons = [
-        { text: overlays.translate('TOPTOBOTTOM'), icon: 'big-arrow-down', handler: () => {
+        { text: index.translate('TOPTOBOTTOM'), icon: 'big-arrow-down', handler: () => {
             stitchDirection = 'from-top';
           }, separator: true },
-        { text: overlays.translate('LEFTTORIGHT'), icon: 'big-arrow-right', handler: () => {
+        { text: index.translate('LEFTTORIGHT'), icon: 'big-arrow-right', handler: () => {
             stitchDirection = 'from-left';
           }, separator: true }
       ];
-      await overlays.showActionSheet(buttons, null, {}, null, null);
+      await index.showActionSheet(buttons, null, {}, null, null);
       if (stitchDirection) {
         this.showImageLoader = true;
         // show a dialog with 2 options: left-to-right / bottom-to-top
@@ -472,7 +472,7 @@ const YooFormCaptureComponent = class {
         const initialFileSize = this.value.length;
         const allowedSize = this.max - initialFileSize;
         this.showImageLoader = true;
-        promise = cameraHelpers.importMultipleFromLibrary(index >= 0 ? 1 : allowedSize);
+        promise = cameraHelpers.importMultipleFromLibrary(index$1 >= 0 ? 1 : allowedSize);
       }
       else {
         promise = cameraHelpers.getPicture(quality, sourceType, mediaType, isMultiMode, this.maxWidth, this.isImageRecognition, this.max, !!((_c = this.cropperOptions) === null || _c === void 0 ? void 0 : _c.cropRatio), useMediaCapture);
@@ -487,9 +487,9 @@ const YooFormCaptureComponent = class {
       if (!res && this.showImageLoader) {
         this.showImageLoader = false;
       }
-      const newIndex = index < 0 ? ((_e = (_d = this.value) === null || _d === void 0 ? void 0 : _d.length) !== null && _e !== void 0 ? _e : 0) : index;
+      const newIndex = index$1 < 0 ? ((_e = (_d = this.value) === null || _d === void 0 ? void 0 : _d.length) !== null && _e !== void 0 ? _e : 0) : index$1;
       const imagesData = Array.isArray(res) ? res : [res];
-      const hasUnsplash = imagesData.some(d => overlays.isUnsplashUrl(d));
+      const hasUnsplash = imagesData.some(d => index.isUnsplashUrl(d));
       const processImage = async (imageData, i) => {
         try {
           let extractedData = await processMediaPath((imageData === null || imageData === void 0 ? void 0 : imageData['data']) || (imageData === null || imageData === void 0 ? void 0 : imageData['path']) || (imageData === null || imageData === void 0 ? void 0 : imageData['fullPath']) || imageData);
@@ -502,7 +502,7 @@ const YooFormCaptureComponent = class {
           this.showImageLoader = false;
         }
       };
-      await overlays.asyncWaterfall(imagesData.map((data, i) => processImage(data, i)));
+      await index.asyncWaterfall(imagesData.map((data, i) => processImage(data, i)));
       this.showImageLoader = false;
     }
     catch (err) {
@@ -514,33 +514,33 @@ const YooFormCaptureComponent = class {
     const files = await cameraHelpers.getVideo({ limit: 1, duration: this.duration || 60, saveToPhotoAlbum: true });
     await Promise.all(files === null || files === void 0 ? void 0 : files.map(file => this.processMediaData(this.fixPathAndGetValue(file), index)));
   }
-  async captureAudio(index) {
+  async captureAudio(index$1) {
     try {
-      if (overlays.isAndroid()) {
+      if (index.isAndroid()) {
         const { data } = await cameraHelpers.showAudioRecorder(this.host);
-        this.processMediaData(data, index);
+        this.processMediaData(data, index$1);
       }
       else {
         const files = await cameraHelpers.MediaCapture.captureAudio({ limit: 1, duration: this.duration || 60 });
-        await Promise.all(files === null || files === void 0 ? void 0 : files.map(file => this.processMediaData(this.fixPathAndGetValue(file), index)));
+        await Promise.all(files === null || files === void 0 ? void 0 : files.map(file => this.processMediaData(this.fixPathAndGetValue(file), index$1)));
       }
     }
     catch (err) {
       if (err.code !== 3) {
-        overlays.showAlert(overlays.translate('AUDIO'), [overlays.translate('YOOBICOK')], overlays.translate('NOAUDIO'));
+        index.showAlert(index.translate('AUDIO'), [index.translate('YOOBICOK')], index.translate('NOAUDIO'));
       }
       throw new Error(err);
     }
   }
   noAudio() {
-    overlays.showAlert(overlays.translate('AUDIO'), [overlays.translate('YOOBICOK')], overlays.translate('NOAUDIO'));
+    index.showAlert(index.translate('AUDIO'), [index.translate('YOOBICOK')], index.translate('NOAUDIO'));
   }
   fixSessionIdPath() {
-    if (overlays.isIOS() && overlays.isNativeMobile() && this.value && typeof this.value !== 'undefined') {
+    if (index.isIOS() && index.isNativeMobile() && this.value && typeof this.value !== 'undefined') {
       if (Array.isArray(this.value)) {
         const newValue = [];
         const promises = this.value.map((val, i) => {
-          return overlays.updatePathSessionId(val).then((res) => {
+          return index.updatePathSessionId(val).then((res) => {
             newValue[i] = res;
           });
         });
@@ -549,7 +549,7 @@ const YooFormCaptureComponent = class {
         });
       }
       else {
-        overlays.updatePathSessionId(this.value).then((res) => {
+        index.updatePathSessionId(this.value).then((res) => {
           if (res && this.value !== res) {
             formInputHelpers.setValueAndValidateInput(res, this);
           }
@@ -558,13 +558,13 @@ const YooFormCaptureComponent = class {
     }
   }
   fixPathAndGetValue(file) {
-    return overlays.addFilePrefix(file === null || file === void 0 ? void 0 : file.fullPath) || '';
+    return index.addFilePrefix(file === null || file === void 0 ? void 0 : file.fullPath) || '';
   }
-  async captureFromWebcam(device, index) {
+  async captureFromWebcam(device, index$1) {
     var _a;
-    const mediaData = (_a = (await overlays.showModal(Object.assign(document.createElement('yoo-form-capture-webcam-dialog'), { device }), null, !overlays.isWeb(this.host) ? '' : 'fullscreen', 'fadeEnterAnimation', 'fadeLeaveAnimation'))) === null || _a === void 0 ? void 0 : _a.data;
+    const mediaData = (_a = (await index.showModal(Object.assign(document.createElement('yoo-form-capture-webcam-dialog'), { device }), null, !index.isWeb(this.host) ? '' : 'fullscreen', 'fadeEnterAnimation', 'fadeLeaveAnimation'))) === null || _a === void 0 ? void 0 : _a.data;
     //  this.allowCrop(mediaData) && (mediaData = await this.onOpenCropper(mediaData));
-    mediaData && await this.processMediaData(mediaData, index);
+    mediaData && await this.processMediaData(mediaData, index$1);
   }
   captureFromDisk(index) {
     const targetElement = index && index < 0 ? this.getAddFileInput() : this.getTargetElement(index);
@@ -573,23 +573,23 @@ const YooFormCaptureComponent = class {
   isReplacingPhoto(index) {
     return index >= 0;
   }
-  importExternal(type, index) {
+  importExternal(type, index$1) {
     var _a, _b;
     let acceptMode;
     if (this.type === 'video' || this.type === 'audio') {
       acceptMode = [this.type];
     }
     else {
-      acceptMode = lodash.compact([this.allowGif ? 'gif' : null, this.allowUnsplash && !(((_a = this.cropperOptions) === null || _a === void 0 ? void 0 : _a.cropRatio) && overlays.isSafari()) ? 'unsplash' : null, 'image']);
+      acceptMode = lodash.compact([this.allowGif ? 'gif' : null, this.allowUnsplash && !(((_a = this.cropperOptions) === null || _a === void 0 ? void 0 : _a.cropRatio) && index.isSafari()) ? 'unsplash' : null, 'image']);
     }
     let currentMax;
     if (this.multiple && this.max >= 0) {
-      currentMax = index >= 0 ? 1 : this.max - (((_b = this.value) === null || _b === void 0 ? void 0 : _b.length) || 0);
+      currentMax = index$1 >= 0 ? 1 : this.max - (((_b = this.value) === null || _b === void 0 ? void 0 : _b.length) || 0);
     }
     else if (!this.multiple) {
       currentMax = 1;
     }
-    overlays.getAsyncExtraData({ type, params: { multiple: this.multiple && !this.isReplacingPhoto(index), acceptMode, initialMaxSelectionNumber: currentMax || undefined, preventUpload: this.preventUpload } }).then(async (ret) => {
+    index.getAsyncExtraData({ type, params: { multiple: this.multiple && !this.isReplacingPhoto(index$1), acceptMode, initialMaxSelectionNumber: currentMax || undefined, preventUpload: this.preventUpload } }).then(async (ret) => {
       if (ret === null || ret === void 0 ? void 0 : ret.data) {
         const getUrl = (type, data) => {
           let url = data === null || data === void 0 ? void 0 : data.value;
@@ -603,15 +603,15 @@ const YooFormCaptureComponent = class {
         };
         const retData = [].concat(ret.data).map((item) => getUrl(type, item));
         const newImages = [];
-        let captureIndex = index;
-        if (index === -1) {
+        let captureIndex = index$1;
+        if (index$1 === -1) {
           captureIndex = this.value && this.value.length > 0 ? this.value.length : 0;
         }
         const isImageUrl = (file) => {
-          return overlays.isImage(file) || overlays.isUnsplashUrl(file) || overlays.isGif(file);
+          return index.isImage(file) || index.isUnsplashUrl(file) || index.isGif(file);
         };
         for (const file of retData) {
-          await overlays.asyncWaterfall([
+          await index.asyncWaterfall([
             () => {
               if (this.allowCrop(file)) {
                 return this.onOpenCropper(file);
@@ -620,7 +620,7 @@ const YooFormCaptureComponent = class {
             },
             (file) => {
               if (isImageUrl(file) && file instanceof Blob) {
-                return overlays.read(file, 'blob');
+                return index.read(file, 'blob');
               }
               return file;
             },
@@ -628,7 +628,7 @@ const YooFormCaptureComponent = class {
               return new Promise((resolve) => {
                 if (this.shouldTagImage()) {
                   return this.showPhotoTagDialog(data).then((tag) => {
-                    if (!overlays.isNullOrUndefined(tag === null || tag === void 0 ? void 0 : tag.data)) {
+                    if (!index.isNullOrUndefined(tag === null || tag === void 0 ? void 0 : tag.data)) {
                       this.updateTagData(tag, captureIndex);
                       resolve(data);
                     }
@@ -644,11 +644,11 @@ const YooFormCaptureComponent = class {
               }
             }
           ]);
-          if (!this.isReplacingPhoto(index)) {
+          if (!this.isReplacingPhoto(index$1)) {
             captureIndex++;
           }
         }
-        if (this.multiple && newImages.length > 0 && !this.isReplacingPhoto(index)) {
+        if (this.multiple && newImages.length > 0 && !this.isReplacingPhoto(index$1)) {
           const allowedSize = this.max - this.value.length;
           const values = Array.from(newImages).slice(0, allowedSize);
           this.value = [...[].concat(this.value), ...values.map((item) => getUrl(type, item))];
@@ -656,7 +656,7 @@ const YooFormCaptureComponent = class {
         }
         else {
           if (this.multiple && (newImages === null || newImages === void 0 ? void 0 : newImages.length) > 0) {
-            this.setFieldValue(index, newImages);
+            this.setFieldValue(index$1, newImages);
           }
           else if (newImages === null || newImages === void 0 ? void 0 : newImages.length) {
             this.value = newImages[0];
@@ -666,10 +666,10 @@ const YooFormCaptureComponent = class {
       }
     });
   }
-  captureGeoloc(index) {
-    let newIndex = index;
+  captureGeoloc(index$1) {
+    let newIndex = index$1;
     if (this.saveGeoloc) {
-      if (overlays.isNullOrUndefined(newIndex) && this.multiple && this.value && this.value.length - 1 > -1) {
+      if (index.isNullOrUndefined(newIndex) && this.multiple && this.value && this.value.length - 1 > -1) {
         newIndex = this.value.length - 1;
       }
       this.getGeoloc.emit(newIndex);
@@ -687,12 +687,12 @@ const YooFormCaptureComponent = class {
     }
     return newClass;
   }
-  upload(index) {
-    if (overlays.isNativeMobile()) {
-      this.capturePhoto(true, index);
+  upload(index$1) {
+    if (index.isNativeMobile()) {
+      this.capturePhoto(true, index$1);
     }
     else {
-      this.captureFromDisk(index);
+      this.captureFromDisk(index$1);
     }
   }
   onFetchGridData(ev) {
@@ -702,10 +702,10 @@ const YooFormCaptureComponent = class {
   getTargetElement(index) {
     return index !== undefined ? Array.from(this.fileInputs).find((_, ind) => ind === index) : this.fileInputs;
   }
-  async onFileSelect(index) {
-    const targetElement = this.getTargetElement(index);
+  async onFileSelect(index$1) {
+    const targetElement = this.getTargetElement(index$1);
     const f = targetElement.files[0];
-    if (overlays.isImage(f)) {
+    if (index.isImage(f)) {
       let promise = Promise.resolve(f);
       if (this.allowCrop(f)) {
         promise = this.onOpenCropper(f);
@@ -714,23 +714,23 @@ const YooFormCaptureComponent = class {
       if (!file) {
         return;
       }
-      const data = typeof file === 'string' ? file : await overlays.read(file, 'blob');
+      const data = typeof file === 'string' ? file : await index.read(file, 'blob');
       if (this.shouldTagImage()) {
         const tag = await this.showPhotoTagDialog(data);
-        if (!overlays.isNullOrUndefined(tag === null || tag === void 0 ? void 0 : tag.data)) {
-          this.updateTagData(tag, index);
-          this.setFieldValue(index, data);
-          this.clearPhotoEdit(index);
+        if (!index.isNullOrUndefined(tag === null || tag === void 0 ? void 0 : tag.data)) {
+          this.updateTagData(tag, index$1);
+          this.setFieldValue(index$1, data);
+          this.clearPhotoEdit(index$1);
         }
       }
       else {
-        this.setFieldValue(index, data);
-        this.clearPhotoEdit(index);
+        this.setFieldValue(index$1, data);
+        this.clearPhotoEdit(index$1);
       }
     }
     else {
-      this.setFieldValue(index, f);
-      this.clearPhotoEdit(index);
+      this.setFieldValue(index$1, f);
+      this.clearPhotoEdit(index$1);
     }
     targetElement.value = null;
   }
@@ -777,69 +777,69 @@ const YooFormCaptureComponent = class {
       this.extraDataChanged.emit(newExtraData);
     }
   }
-  openPhotoEditorPreview(index, forceReadonly = false) {
+  openPhotoEditorPreview(index$1, forceReadonly = false) {
     var _a;
-    const imgSrc = this.getFieldValue(index);
-    const isMultipleData = isFinite(index) && this.extraData && ((lodash.isArray(this.extraData) && !!this.extraData.length) || !!Object.keys(this.extraData).length) && this.extraData[index];
+    const imgSrc = this.getFieldValue(index$1);
+    const isMultipleData = isFinite(index$1) && this.extraData && ((lodash.isArray(this.extraData) && !!this.extraData.length) || !!Object.keys(this.extraData).length) && this.extraData[index$1];
     const extraActions = [
       {
         icon: 'download',
-        isVisible: () => !overlays.isNativeFilePath(imgSrc),
+        isVisible: () => !index.isNativeFilePath(imgSrc),
         handler: () => {
-          overlays.downloadFile(isMultipleData ? this.extraData[index].stitch || imgSrc : imgSrc);
+          index.downloadFile(isMultipleData ? this.extraData[index$1].stitch || imgSrc : imgSrc);
         }
       }
     ];
     commonHelpers.showPhotoEditor(this.host, {
       isReadonly: forceReadonly || !this.allowAnnotate,
-      src: isMultipleData ? this.extraData[index].stitch || imgSrc : imgSrc,
-      annotations: isMultipleData ? this.extraData[index].annotations : (_a = this.extraData) === null || _a === void 0 ? void 0 : _a.annotations,
+      src: isMultipleData ? this.extraData[index$1].stitch || imgSrc : imgSrc,
+      annotations: isMultipleData ? this.extraData[index$1].annotations : (_a = this.extraData) === null || _a === void 0 ? void 0 : _a.annotations,
       extraActions,
       drawings: isMultipleData
         ? this.isStitch()
-          ? this.extraData[index].drawings !== this.extraData[index].stitch
-            ? this.extraData[index].drawings
+          ? this.extraData[index$1].drawings !== this.extraData[index$1].stitch
+            ? this.extraData[index$1].drawings
             : null
-          : this.extraData[index].drawings
+          : this.extraData[index$1].drawings
         : Array.isArray(this.extraData.drawings) ? this.extraData.drawings[0] : this.extraData.drawings
-    }).then((retVal) => this.onAfterAnnotate(index, retVal));
+    }).then((retVal) => this.onAfterAnnotate(index$1, retVal));
   }
   /**
    * Need to handle this differently depending on whether we have are opening the preview from the image
    * or whether we are simply viewing the photo in readonly mode
    */
-  openPreview(index, forceReadonly = false) {
+  openPreview(index$1, forceReadonly = false) {
     if (this.type === 'photo') {
       if (this.multiple && (!this.imageRecognitionResults || this.imageRecognitionResults.length === 0 || !this.isStitch())) {
-        this.renderMultiplePreview(index);
+        this.renderMultiplePreview(index$1);
       }
       else {
-        this.openPhotoEditorPreview(index, forceReadonly);
+        this.openPhotoEditorPreview(index$1, forceReadonly);
       }
     }
     else {
       // use document viewer for audio and video mode
       let file;
       let newValue = this.value;
-      if (index >= 0 && this.value && this.value[index]) {
-        newValue = this.value[index];
+      if (index$1 >= 0 && this.value && this.value[index$1]) {
+        newValue = this.value[index$1];
       }
-      if (overlays.isFile(newValue)) {
+      if (index.isFile(newValue)) {
         file = newValue;
       }
       else {
         const newPath = newValue.toString();
-        file = { _filename: newPath, _downloadURL: newPath, mimeType: overlays.getMimeType(newPath) };
+        file = { _filename: newPath, _downloadURL: newPath, mimeType: index.getMimeType(newPath) };
       }
       const documentViewer = document.createElement('yoo-form-document-dialog');
       documentViewer.document = file;
-      documentViewer.modalTitle = overlays.translate(this.type);
-      documentViewer.modalMode = overlays.isVideo(newValue);
-      documentViewer.html5Video = overlays.isAndroid();
+      documentViewer.modalTitle = index.translate(this.type);
+      documentViewer.modalMode = index.isVideo(newValue);
+      documentViewer.html5Video = index.isAndroid();
       if (this.type === 'audio') {
         documentViewer.type = this.type;
       }
-      overlays.showModal(documentViewer, null, 'fullscreen');
+      index.showModal(documentViewer, null, 'fullscreen');
     }
   }
   openGallery(index) {
@@ -906,25 +906,25 @@ const YooFormCaptureComponent = class {
   isRequired(index) {
     return index ? this.required && index < this.min : this.required;
   }
-  async addCaptureButtons(buttons, index) {
+  async addCaptureButtons(buttons, index$1) {
     var _a;
     const textPrefix = 'TAKEANEW';
-    if (overlays.isNativeMobile()) {
+    if (index.isNativeMobile()) {
       buttons.push({
         icon: `${this.getIcon()}`,
-        text: overlays.translate(textPrefix + this.type.toUpperCase()),
-        handler: () => this.capture(null, index)
+        text: index.translate(textPrefix + this.type.toUpperCase()),
+        handler: () => this.capture(null, index$1)
       });
     }
-    else if (!overlays.isNativeMobile() && this.type === 'photo' && this.allowCamera) {
+    else if (!index.isNativeMobile() && this.type === 'photo' && this.allowCamera) {
       this.devices = await cameraHelpers.getVideoDevices();
       if (((_a = this.devices) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-        const separator = overlays.isWeb(this.host) ? ': ' : ':<br/> ';
+        const separator = index.isWeb(this.host) ? ': ' : ':<br/> ';
         this.devices.forEach((device, i) => {
           buttons.push({
             icon: 'webcam',
-            text: overlays.translate(textPrefix + this.type.toUpperCase()) + separator + (device.label || 'WEBCAM ' + i),
-            handler: () => this.capture(device, index)
+            text: index.translate(textPrefix + this.type.toUpperCase()) + separator + (device.label || 'WEBCAM ' + i),
+            handler: () => this.capture(device, index$1)
           });
         });
       }
@@ -940,20 +940,20 @@ const YooFormCaptureComponent = class {
   }
   async onImageRecognition() {
     var _a;
-    if (overlays.isOffline() && !((_a = this.algorithm) === null || _a === void 0 ? void 0 : _a.offline)) {
-      overlays.showAlert('', [overlays.translate('YOOBICOK')], overlays.translate('IMAGERECOOFFLINE'));
+    if (index.isOffline() && !((_a = this.algorithm) === null || _a === void 0 ? void 0 : _a.offline)) {
+      index.showAlert('', [index.translate('YOOBICOK')], index.translate('IMAGERECOOFFLINE'));
       return;
     }
-    const fileTooLarge = await overlays.hasLargeFile(this.multiple ? this.value : [this.value]);
+    const fileTooLarge = await index.hasLargeFile(this.multiple ? this.value : [this.value]);
     if (fileTooLarge) {
-      overlays.showAlert('', [overlays.translate('YOOBICOK')], null, overlays.translate('IMAGETOOLARGE'));
+      index.showAlert('', [index.translate('YOOBICOK')], null, index.translate('IMAGETOOLARGE'));
       return;
     }
     this.imageRecoCancelled = false;
     this.isProcessingPhoto = true;
     if (this.isValueValid() && this.algorithm && !this.isProcessing) {
       // emit image recognition event
-      this.currentUploadingStatus = overlays.translate('UPLOADINGPHOTOS');
+      this.currentUploadingStatus = index.translate('UPLOADINGPHOTOS');
       this.isProcessing = true;
       this.emitOnUpdated = true;
     }
@@ -963,20 +963,20 @@ const YooFormCaptureComponent = class {
   }
   onShowImageRecoKpis() {
     const photoView = document.createElement('yoo-form-capture-view-dialog');
-    photoView.label = overlays.translateMulti('YOOBICKPIS');
+    photoView.label = index.translateMulti('YOOBICKPIS');
     photoView.imageRecognitionResults = this.imageRecognitionResults;
     photoView.imageRecognitionDisplay = this.algorithmDisplay;
     photoView.isStitch = this.isStitch();
-    overlays.showModal(photoView);
+    index.showModal(photoView);
   }
   onShowMaximumCaptureReached() {
-    const description = overlays.translate('MAXIMUMCAPTUREREACHED');
-    overlays.showAlert('', [overlays.translate('YOOBICOK')], description);
+    const description = index.translate('MAXIMUMCAPTUREREACHED');
+    index.showAlert('', [index.translate('YOOBICOK')], description);
   }
-  async onShowActionSheet(value, index, event) {
+  async onShowActionSheet(value, index$1, event) {
     var _a, _b, _c;
     event === null || event === void 0 ? void 0 : event.stopImmediatePropagation();
-    if (index && index < 0 && this.max && this.value && this.value.length === this.max) {
+    if (index$1 && index$1 < 0 && this.max && this.value && this.value.length === this.max) {
       this.onShowMaximumCaptureReached();
       return;
     }
@@ -984,24 +984,24 @@ const YooFormCaptureComponent = class {
       return;
     }
     else {
-      this.actionSheetOpened.emit(index);
+      this.actionSheetOpened.emit(index$1);
       const buttons = [];
-      const actionSheetTitle = overlays.translate('CHANGEASOURCE');
-      const importFromLib = (index) => {
-        if (overlays.isWeb(this.host)) {
-          this.importExternal('file-uploader', index);
+      const actionSheetTitle = index.translate('CHANGEASOURCE');
+      const importFromLib = (index$1) => {
+        if (index.isWeb(this.host)) {
+          this.importExternal('file-uploader', index$1);
         }
         else {
-          this.upload(index);
+          this.upload(index$1);
         }
       };
       if (!value) {
-        await this.addCaptureButtons(buttons, index);
-        if (this.allowLibrary === true || (!overlays.isNativeMobile() && (this.type === 'video' || this.type === 'audio'))) {
+        await this.addCaptureButtons(buttons, index$1);
+        if (this.allowLibrary === true || (!index.isNativeMobile() && (this.type === 'video' || this.type === 'audio'))) {
           buttons.push({
             icon: 'photo-library',
-            text: overlays.translate('IMPORTFROMLIBRARY'),
-            handler: () => importFromLib(index)
+            text: index.translate('IMPORTFROMLIBRARY'),
+            handler: () => importFromLib(index$1)
           });
         }
       }
@@ -1009,60 +1009,60 @@ const YooFormCaptureComponent = class {
         const forceReadonly = true;
         buttons.push({
           icon: 'eye',
-          text: overlays.translate(this.type === 'photo' ? 'VIEWPHOTO' : this.type === 'audio' ? 'LISTEN' : 'YOOBICVIEW'),
-          handler: () => this.openPreview(index, forceReadonly)
+          text: index.translate(this.type === 'photo' ? 'VIEWPHOTO' : this.type === 'audio' ? 'LISTEN' : 'YOOBICVIEW'),
+          handler: () => this.openPreview(index$1, forceReadonly)
         });
         if (this.allowLibrary === true) {
           buttons.push({
             icon: 'photo-library',
-            text: overlays.translate('IMPORTFROMLIBRARY'),
-            handler: () => importFromLib(index)
+            text: index.translate('IMPORTFROMLIBRARY'),
+            handler: () => importFromLib(index$1)
           });
         }
         if (this.type === 'photo' && this.allowAnnotate) {
           buttons.push({
             icon: 'pen',
-            text: overlays.translate('ANNOTATE'),
-            handler: () => this.onAnnotate(index)
+            text: index.translate('ANNOTATE'),
+            handler: () => this.onAnnotate(index$1)
           });
         }
-        await this.addCaptureButtons(buttons, index);
+        await this.addCaptureButtons(buttons, index$1);
         buttons.push({
           icon: 'delete',
-          text: overlays.translate(this.type === 'photo' ? 'DELETEPHOTO' : 'DELETE'),
-          handler: () => this.deleteCapture(index)
+          text: index.translate(this.type === 'photo' ? 'DELETEPHOTO' : 'DELETE'),
+          handler: () => this.deleteCapture(index$1)
         });
       }
-      if (this.type === 'photo' && this.allowGif && !overlays.isWeb(this.host)) {
+      if (this.type === 'photo' && this.allowGif && !index.isWeb(this.host)) {
         buttons.push({
           icon: 'gif',
-          text: overlays.translate('IMPORTGIF'),
-          handler: () => this.importExternal('gif', index)
+          text: index.translate('IMPORTGIF'),
+          handler: () => this.importExternal('gif', index$1)
         });
       }
-      if (this.type === 'photo' && this.allowUnsplash && !overlays.isWeb(this.host)) {
+      if (this.type === 'photo' && this.allowUnsplash && !index.isWeb(this.host)) {
         buttons.push({
           icon: 'image',
-          text: overlays.translate('IMPORTUNSPLASH'),
-          handler: () => this.importExternal('unsplash', index)
+          text: index.translate('IMPORTUNSPLASH'),
+          handler: () => this.importExternal('unsplash', index$1)
         });
       }
-      if (this.type === 'photo' && this.allowUserImages && !overlays.isWeb(this.host)) {
+      if (this.type === 'photo' && this.allowUserImages && !index.isWeb(this.host)) {
         buttons.push({
           icon: 'import',
-          text: overlays.translate('IMPORTUSERIMAGES'),
-          handler: () => this.importExternal('user-images', index)
+          text: index.translate('IMPORTUSERIMAGES'),
+          handler: () => this.importExternal('user-images', index$1)
         });
       }
       if (this.shouldTagImage() && value) {
         buttons.push({
           icon: 'tag',
-          text: this.onHasTag(index) ? overlays.translate('EDITTAG') : overlays.translate('ADDNEWTAG'),
+          text: this.onHasTag(index$1) ? index.translate('EDITTAG') : index.translate('ADDNEWTAG'),
           handler: () => {
             let tagsData;
             if (this.multiple) {
-              if (this.extraData && this.extraData[index] && this.extraData[index].tags) {
-                tagsData = this.extraData[index].tags;
+              if (this.extraData && this.extraData[index$1] && this.extraData[index$1].tags) {
+                tagsData = this.extraData[index$1].tags;
               }
             }
             else {
@@ -1071,28 +1071,28 @@ const YooFormCaptureComponent = class {
               }
             }
             this.showPhotoTagDialog(value, tagsData).then((tag) => {
-              if (!overlays.isNullOrUndefined(tag === null || tag === void 0 ? void 0 : tag.data)) {
-                this.updateTagData(tag, index);
+              if (!index.isNullOrUndefined(tag === null || tag === void 0 ? void 0 : tag.data)) {
+                this.updateTagData(tag, index$1);
               }
             });
           }
         });
       }
-      if (buttons.length === 1 && (this.type !== 'photo' || overlays.isNativeMobile())) {
+      if (buttons.length === 1 && (this.type !== 'photo' || index.isNativeMobile())) {
         buttons[0].handler();
       }
       else if (buttons.length > 0) {
-        if (overlays.isWeb(this.host)) {
-          overlays.showContextMenu(event, { multipleSelection: false, contentButtons: buttons, className: 'width-unset', hostElement: this.cameraContainerElement || ((_c = (_b = (_a = this.host) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector) === null || _c === void 0 ? void 0 : _c.call(_b, '.camera-container')) });
+        if (index.isWeb(this.host)) {
+          index.showContextMenu(event, { multipleSelection: false, contentButtons: buttons, className: 'width-unset', hostElement: this.cameraContainerElement || ((_c = (_b = (_a = this.host) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector) === null || _c === void 0 ? void 0 : _c.call(_b, '.camera-container')) });
         }
         else {
-          overlays.showActionSheet(buttons, null, { heading: actionSheetTitle });
+          index.showActionSheet(buttons, null, { heading: actionSheetTitle });
         }
       }
     }
   }
-  hasExtraData(index, isMultiple = false) {
-    return this.extraData && overlays.isPhotoEdited(isMultiple ? this.extraData[index] : this.extraData);
+  hasExtraData(index$1, isMultiple = false) {
+    return this.extraData && index.isPhotoEdited(isMultiple ? this.extraData[index$1] : this.extraData);
   }
   hasGeoData(index) {
     if (this.extraData) {
@@ -1118,9 +1118,9 @@ const YooFormCaptureComponent = class {
     const allowedSize = this.max - initialFileSize;
     const files = Array.from(targetElement.files).slice(0, allowedSize);
     const newImages = [];
-    let index = this.value.length;
+    let index$1 = this.value.length;
     for (const file of files) {
-      await overlays.asyncWaterfall([
+      await index.asyncWaterfall([
         () => {
           if (this.allowCrop(file)) {
             return this.onOpenCropper(file);
@@ -1128,10 +1128,10 @@ const YooFormCaptureComponent = class {
           return file;
         },
         (file) => {
-          if (overlays.isImage(file) && typeof file !== 'string') {
-            return overlays.read(file, 'blob');
+          if (index.isImage(file) && typeof file !== 'string') {
+            return index.read(file, 'blob');
           }
-          else if (overlays.isAudio(file) && !overlays.isNativeMobile()) {
+          else if (index.isAudio(file) && !index.isNativeMobile()) {
             return URL.createObjectURL(file);
           }
           return file;
@@ -1140,13 +1140,13 @@ const YooFormCaptureComponent = class {
           return new Promise((resolve) => {
             if (this.shouldTagImage()) {
               return this.showPhotoTagDialog(data).then((tag) => {
-                if (!overlays.isNullOrUndefined(tag === null || tag === void 0 ? void 0 : tag.data)) {
-                  this.updateTagData(tag, index);
+                if (!index.isNullOrUndefined(tag === null || tag === void 0 ? void 0 : tag.data)) {
+                  this.updateTagData(tag, index$1);
                   resolve(data);
                 }
               });
             }
-            this.clearPhotoEdit(index);
+            this.clearPhotoEdit(index$1);
             resolve(data);
           });
         },
@@ -1156,7 +1156,7 @@ const YooFormCaptureComponent = class {
           }
         }
       ]);
-      index++;
+      index$1++;
     }
     if (newImages === null || newImages === void 0 ? void 0 : newImages.length) {
       this.value = [...this.value, ...newImages];
@@ -1212,34 +1212,34 @@ const YooFormCaptureComponent = class {
     let extensions;
     switch (this.type) {
       case 'video':
-        extensions = overlays.videos;
+        extensions = index.videos;
         break;
       case 'audio':
-        extensions = overlays.audios;
+        extensions = index.audios;
         break;
       case 'photo':
       default:
-        extensions = overlays.images;
+        extensions = index.images;
         break;
     }
     return extensions && extensions.length > 0 ? extensions.map((e) => '.' + e).join(',') : null;
   }
   renderEditIcon() {
-    return (index.h("div", { class: "edit-icon-container" }, index.h("span", { class: "edit-icon" }, index.h("yoo-tag", { color: "dark-60", icon: "brush", iconOnlyColor: "light", size: "small" }))));
+    return (index$1.h("div", { class: "edit-icon-container" }, index$1.h("span", { class: "edit-icon" }, index$1.h("yoo-tag", { color: "dark-60", icon: "brush", iconOnlyColor: "light", size: "small" }))));
   }
   renderAudio(src) {
-    return index.h("yoo-card-file", { class: "document", file: src, type: this.type });
+    return index$1.h("yoo-card-file", { class: "document", file: src, type: this.type });
   }
   renderPreviewPlayIcon() {
     return (this.type === 'video' &&
-      this.readonly && (index.h("div", { class: "control-container" }, index.h("yoo-icon", { name: "play", color: "light", size: "small" }))));
+      this.readonly && (index$1.h("div", { class: "control-container" }, index$1.h("yoo-icon", { name: "play", color: "light", size: "small" }))));
   }
   renderPreview() {
     var _a;
     let src = this.value;
     const isVideo = this.type === 'video';
     if (isVideo) {
-      src = overlays.changeExtension(src, 'jpg');
+      src = index.changeExtension(src, 'jpg');
     }
     let cloudinaryOptions = {};
     if (this.readonly) {
@@ -1247,7 +1247,7 @@ const YooFormCaptureComponent = class {
     }
     let mediaDimension;
     const imgClass = { preview: true };
-    if (index.Build.isServer && !index.Build.isTesting) {
+    if (index$1.Build.isServer && !index$1.Build.isTesting) {
       mediaDimension = { width: 280, heigt: 360 };
       if (((_a = this.detailViewOptions) === null || _a === void 0 ? void 0 : _a.extraClass) && this.detailViewOptions.extraClass.includes('pdf') && this.detailViewOptions.extraClass.includes('appendix')) {
         mediaDimension.width = 460;
@@ -1260,8 +1260,8 @@ const YooFormCaptureComponent = class {
       }
     }
     return [
-      index.h("yoo-img", { class: imgClass, type: this.readonly ? 'default' : 'background', cloudinaryOptions: cloudinaryOptions, mediaDimension: mediaDimension, scaledUp: this.readonly, onClick: (ev) => this.handleImageClick(null, ev), src: src }),
-      isVideo && (index.h("div", { class: "overlay", onClick: (ev) => this.handleImageClick(null, ev) }, this.renderPreviewPlayIcon()))
+      index$1.h("yoo-img", { class: imgClass, type: this.readonly ? 'default' : 'background', cloudinaryOptions: cloudinaryOptions, mediaDimension: mediaDimension, scaledUp: this.readonly, onClick: (ev) => this.handleImageClick(null, ev), src: src }),
+      isVideo && (index$1.h("div", { class: "overlay", onClick: (ev) => this.handleImageClick(null, ev) }, this.renderPreviewPlayIcon()))
     ];
   }
   handleImageClick(index, ev) {
@@ -1315,15 +1315,15 @@ const YooFormCaptureComponent = class {
       return false;
     }
   }
-  onShowDistanceDialog(index) {
+  onShowDistanceDialog(index$1) {
     const dialog = document.createElement('yoo-form-capture-map-dialog');
     let markers = [];
-    if (this.multiple && index > -1) {
-      if (this.extraData && this.extraData._geoloc && this.extraData._geoloc[index] && this.extraData._geoloc[index].length === 2) {
+    if (this.multiple && index$1 > -1) {
+      if (this.extraData && this.extraData._geoloc && this.extraData._geoloc[index$1] && this.extraData._geoloc[index$1].length === 2) {
         markers = [
           {
-            latitude: this.extraData._geoloc[index][1],
-            longitude: this.extraData._geoloc[index][0],
+            latitude: this.extraData._geoloc[index$1][1],
+            longitude: this.extraData._geoloc[index$1][0],
             selected: true
           }
         ];
@@ -1341,33 +1341,33 @@ const YooFormCaptureComponent = class {
       }
     }
     dialog.markers = markers;
-    overlays.showModal(dialog, null, '', 'slideYEnterAnimation', 'slideYLeaveAnimation', overlays.isWeb(this.host));
+    index.showModal(dialog, null, '', 'slideYEnterAnimation', 'slideYLeaveAnimation', index.isWeb(this.host));
   }
-  renderDistance(index$1) {
+  renderDistance(index$2) {
     return [
-      index.h("div", { class: "distance" }, index.h("div", { class: "inner-container", onClick: () => {
-          this.onShowDistanceDialog(index$1);
-        } }, index.h("yoo-icon", { name: "pin", color: "text-color", size: "small" }), index.h("span", null, overlays.pipes.distance.transform(this.multiple ? this.extraData.distance[index$1] : this.extraData.distance))))
+      index$1.h("div", { class: "distance" }, index$1.h("div", { class: "inner-container", onClick: () => {
+          this.onShowDistanceDialog(index$2);
+        } }, index$1.h("yoo-icon", { name: "pin", color: "text-color", size: "small" }), index$1.h("span", null, index.pipes.distance.transform(this.multiple ? this.extraData.distance[index$2] : this.extraData.distance))))
     ];
   }
   renderSingle() {
     if (this.readonly) {
-      return (index.h("div", { class: "readonly-container" }, this.type === 'audio' ? this.renderAudio(this.value) : this.renderPreview(), this.extraData && this.extraData.distance && this.renderDistance(), this.hasExtraData() && !this.isHistory && this.renderEditIcon()));
+      return (index$1.h("div", { class: "readonly-container" }, this.type === 'audio' ? this.renderAudio(this.value) : this.renderPreview(), this.extraData && this.extraData.distance && this.renderDistance(), this.hasExtraData() && !this.isHistory && this.renderEditIcon()));
     }
     else {
-      return (index.h("div", { class: "single" }, this.renderCameraContainer(this.value), this.isImageRecognition && !this.isBackgroundProcess && this.renderButtonContainer()));
+      return (index$1.h("div", { class: "single" }, this.renderCameraContainer(this.value), this.isImageRecognition && !this.isBackgroundProcess && this.renderButtonContainer()));
     }
   }
   renderCaptureStatus() {
     const value = this.value || [];
-    return (value && (index.h("div", { class: { 'capture-status': true, 'image-reco': this.isImageRecognition } }, this.required && (index.h("div", { class: "status" }, value.length > this.min
-      ? overlays.translate('PHOTOTAKEN', { captured_number: `${this.min}/${this.min}` })
-      : overlays.translate('PHOTOTAKEN', { captured_number: `${value.length}/${this.min}` }))), !this.hideOptional && this.max && this.max > 0 && (index.h("div", { class: {
+    return (value && (index$1.h("div", { class: { 'capture-status': true, 'image-reco': this.isImageRecognition } }, this.required && (index$1.h("div", { class: "status" }, value.length > this.min
+      ? index.translate('PHOTOTAKEN', { captured_number: `${this.min}/${this.min}` })
+      : index.translate('PHOTOTAKEN', { captured_number: `${value.length}/${this.min}` }))), !this.hideOptional && this.max && this.max > 0 && (index$1.h("div", { class: {
         status: true,
         'max-reached': value.length === this.max
-      } }, overlays.translate('MAXIMUMCAPTURE', { captured_number: `${value.length}/${this.max}` }))), value.length > 0 && (index.h("div", { class: "action", onClick: () => {
+      } }, index.translate('MAXIMUMCAPTURE', { captured_number: `${value.length}/${this.max}` }))), value.length > 0 && (index$1.h("div", { class: "action", onClick: () => {
         this.toggleSelectorMode();
-      } }, overlays.translate('SELECT2'))))));
+      } }, index.translate('SELECT2'))))));
   }
   renderMultiple() {
     var _a;
@@ -1375,7 +1375,7 @@ const YooFormCaptureComponent = class {
     let mediaDimension;
     const imgClass = { preview: true };
     let cloudinaryOptions = {};
-    if (index.Build.isServer && !index.Build.isTesting) {
+    if (index$1.Build.isServer && !index$1.Build.isTesting) {
       mediaDimension = { width: 280, heigt: 360 };
       if (((_a = this.detailViewOptions) === null || _a === void 0 ? void 0 : _a.extraClass) && this.detailViewOptions.extraClass.includes('pdf') && this.detailViewOptions.extraClass.includes('appendix')) {
         mediaDimension.width = 460;
@@ -1387,25 +1387,25 @@ const YooFormCaptureComponent = class {
       }
     }
     const innerRender = (innerSrc, innerIndex) => {
-      return (innerSrc && (index.h("div", { class: "readonly-container multiple" }, this.type === 'audio' ? this.renderAudio(innerSrc) :
-        index.h("yoo-img", { type: this.readonly ? 'default' : 'background', scaledUp: this.readonly, cloudinaryOptions: cloudinaryOptions, mediaDimension: mediaDimension, class: imgClass, onClick: () => this.handleImageClick(innerIndex), src: innerSrc }), this.hasExtraData(innerIndex, this.multiple) && !this.isHistory ? this.renderEditIcon() : null, this.extraData && this.extraData.distance && this.extraData.distance[innerIndex] && this.renderDistance(innerIndex), this.type === 'video' && (index.h("div", { class: "overlay", onClick: (ev) => this.handleImageClick(innerIndex, ev) }, this.renderPreviewPlayIcon())))));
+      return (innerSrc && (index$1.h("div", { class: "readonly-container multiple" }, this.type === 'audio' ? this.renderAudio(innerSrc) :
+        index$1.h("yoo-img", { type: this.readonly ? 'default' : 'background', scaledUp: this.readonly, cloudinaryOptions: cloudinaryOptions, mediaDimension: mediaDimension, class: imgClass, onClick: () => this.handleImageClick(innerIndex), src: innerSrc }), this.hasExtraData(innerIndex, this.multiple) && !this.isHistory ? this.renderEditIcon() : null, this.extraData && this.extraData.distance && this.extraData.distance[innerIndex] && this.renderDistance(innerIndex), this.type === 'video' && (index$1.h("div", { class: "overlay", onClick: (ev) => this.handleImageClick(innerIndex, ev) }, this.renderPreviewPlayIcon())))));
     };
     const processValue = (processVal) => {
       let src = processVal;
       const isVideo = this.type === 'video';
       if (isVideo) {
-        src = overlays.changeExtension(src, 'jpg');
+        src = index.changeExtension(src, 'jpg');
       }
       return src;
     };
     if (this.readonly) {
       return (value.map &&
-        value.map((v, index$1) => {
-          if (index.Build.isServer && !index.Build.isTesting) {
-            return (index$1 % 2 === 0 && (index.h("div", { class: "inner-ssr-container" }, innerRender(processValue(v), index$1), value[index$1 + 1] && innerRender(processValue(value[index$1 + 1]), index$1 + 1))));
+        value.map((v, index) => {
+          if (index$1.Build.isServer && !index$1.Build.isTesting) {
+            return (index % 2 === 0 && (index$1.h("div", { class: "inner-ssr-container" }, innerRender(processValue(v), index), value[index + 1] && innerRender(processValue(value[index + 1]), index + 1))));
           }
           else {
-            return innerRender(processValue(v), index$1);
+            return innerRender(processValue(v), index);
           }
         }));
     }
@@ -1422,36 +1422,36 @@ const YooFormCaptureComponent = class {
     }
   }
   renderBottomAction() {
-    return (index.h("div", { class: {
+    return (index$1.h("div", { class: {
         'bottom-action-container': true,
         active: this.selectedIndex.length > 0
       }, onClick: () => {
         this.onDeleteSelect();
-      } }, overlays.translate('DELETE')));
+      } }, index.translate('DELETE')));
   }
   renderTopAction() {
-    return (index.h("div", { class: "top-action-container" }, index.h("div", { class: "left-action" }, this.isAllItemSelected() ? (index.h("div", { onClick: () => {
+    return (index$1.h("div", { class: "top-action-container" }, index$1.h("div", { class: "left-action" }, this.isAllItemSelected() ? (index$1.h("div", { onClick: () => {
         this.unselectAll();
-      } }, overlays.translate('UNSELECTALL'))) : (index.h("div", { onClick: () => {
+      } }, index.translate('UNSELECTALL'))) : (index$1.h("div", { onClick: () => {
         this.selectAll();
-      } }, overlays.translate('SELECTALL')))), index.h("div", { class: "right-action", onClick: () => {
+      } }, index.translate('SELECTALL')))), index$1.h("div", { class: "right-action", onClick: () => {
         this.toggleSelectorMode();
       } }, "Cancel")));
   }
   renderSelectorOverlay() {
-    return (index.h("div", { class: "media-overlay" }, index.h("yoo-icon", { name: this.type === 'video' ? 'videocamera' : 'microphone', color: "light", size: this.iconSize })));
+    return (index$1.h("div", { class: "media-overlay" }, index$1.h("yoo-icon", { name: this.type === 'video' ? 'videocamera' : 'microphone', color: "light", size: this.iconSize })));
   }
-  renderCameraContainerInSelectMode(item, index$1) {
-    return (index.h("div", { class: {
+  renderCameraContainerInSelectMode(item, index) {
+    return (index$1.h("div", { class: {
         'camera-selector-container': true,
         rotate: this.shouldRotateImage(item)
       }, onClick: () => {
-        this.onItemSelect(index$1);
-      } }, item && this.type === 'photo' ? index.h("yoo-img", { type: "background", class: "preview", src: item, instant: true }) : this.renderSelectorOverlay(), index.h("yoo-icon", { name: "circle", color: "light", size: "small", class: "circle" }), item && (!this.multiple || this.type !== 'photo') && index.h("div", { class: "overlay" }), this.isItemSelected(index$1) && index.h("yoo-icon", { name: "check", color: "app-color", class: "check", size: "small" })));
+        this.onItemSelect(index);
+      } }, item && this.type === 'photo' ? index$1.h("yoo-img", { type: "background", class: "preview", src: item, instant: true }) : this.renderSelectorOverlay(), index$1.h("yoo-icon", { name: "circle", color: "light", size: "small", class: "circle" }), item && (!this.multiple || this.type !== 'photo') && index$1.h("div", { class: "overlay" }), this.isItemSelected(index) && index$1.h("yoo-icon", { name: "check", color: "app-color", class: "check", size: "small" })));
   }
   renderMultipleInSelectMode() {
     const value = this.value || [];
-    return (index.h("div", { class: "multiple selector-mode" }, this.renderTopAction(), lodash.isArray(value) && value.length > 0
+    return (index$1.h("div", { class: "multiple selector-mode" }, this.renderTopAction(), lodash.isArray(value) && value.length > 0
       ? value.map((item, index) => {
         return this.renderCameraContainerInSelectMode(item, index);
       })
@@ -1459,18 +1459,18 @@ const YooFormCaptureComponent = class {
   }
   renderMultipleInNormalMode() {
     const value = this.value || [];
-    return (index.h("div", { class: "multiple" }, this.showImageLoader ? index.h("yoo-loader", { class: "absolute backdrop", size: "large" }) : null, this.renderCaptureStatus(), index.h("div", { class: { 'camera-containers': true, 'no-padding': this.hideOptional } }, this.renderAddCameraContainer(), lodash.isArray(value) &&
+    return (index$1.h("div", { class: "multiple" }, this.showImageLoader ? index$1.h("yoo-loader", { class: "absolute backdrop", size: "large" }) : null, this.renderCaptureStatus(), index$1.h("div", { class: { 'camera-containers': true, 'no-padding': this.hideOptional } }, this.renderAddCameraContainer(), lodash.isArray(value) &&
       value.length > 0 &&
       value.map((item, index) => {
         return this.renderCameraContainer(item, index);
       })), this.isImageRecognition && !this.isBackgroundProcess ? this.renderButtonContainer() : null));
   }
-  renderAddCameraContainer(index$1 = -1) {
-    return (index.h("div", { class: "camera-container", ref: (el) => (this.cameraContainerElement = el), onClick: (ev) => this.onShowActionSheet(null, index$1, ev) }, index.h("input", { name: "file", multiple: true, class: "add-input", type: "file", onChange: () => this.onAddFileSelect(), accept: this.getAcceptExtension() }), index.h("yoo-icon", { size: this.iconSize, name: this.getIcon(), color: this.disabled ? 'light' : 'app-color' })));
+  renderAddCameraContainer(index = -1) {
+    return (index$1.h("div", { class: "camera-container", ref: (el) => (this.cameraContainerElement = el), onClick: (ev) => this.onShowActionSheet(null, index, ev) }, index$1.h("input", { name: "file", multiple: true, class: "add-input", type: "file", onChange: () => this.onAddFileSelect(), accept: this.getAcceptExtension() }), index$1.h("yoo-icon", { size: this.iconSize, name: this.getIcon(), color: this.disabled ? 'light' : 'app-color' })));
   }
-  renderProgressBar(index$1, mainProgress = false) {
+  renderProgressBar(index, mainProgress = false) {
     if (!this.multiple) {
-      index$1 = 0;
+      index = 0;
     }
     const onProgressFinished = (ev) => {
       if (ev && ev.detail && mainProgress) {
@@ -1484,40 +1484,40 @@ const YooFormCaptureComponent = class {
         this.progressBarMainRef.progressAnimationDuration = 0.5;
       }
     };
-    return (index.h("div", { class: "progressbar-wrapper" }, mainProgress
+    return (index$1.h("div", { class: "progressbar-wrapper" }, mainProgress
       ? [
-        this.currentUploadingStatus && (lodash.isUndefined(index$1) || !this.multiple) && index.h("div", { class: "text app-color" }, this.currentUploadingStatus),
-        !this.isProcessingPhoto && (index.h("div", { class: "main-wrapper" }, index.h("yoo-progress-bar", { value: 100, hideProgressValue: true, listenToProgress: true, listenToCompleteProgress: true, disableBackProgressAnimation: true, progressAnimationDuration: this.progressTime, onValueChanged: (ev) => onProgressUpdating(ev), onProgressFinished: (ev) => onProgressFinished(ev), ref: (el) => (this.progressBarMainRef = el) })))
+        this.currentUploadingStatus && (lodash.isUndefined(index) || !this.multiple) && index$1.h("div", { class: "text app-color" }, this.currentUploadingStatus),
+        !this.isProcessingPhoto && (index$1.h("div", { class: "main-wrapper" }, index$1.h("yoo-progress-bar", { value: 100, hideProgressValue: true, listenToProgress: true, listenToCompleteProgress: true, disableBackProgressAnimation: true, progressAnimationDuration: this.progressTime, onValueChanged: (ev) => onProgressUpdating(ev), onProgressFinished: (ev) => onProgressFinished(ev), ref: (el) => (this.progressBarMainRef = el) })))
       ]
       : [
-        index.h("yoo-progress-bar", { class: "photo-progress app-color", value: 0, hideProgressValue: true, progressAnimationDuration: 0.5, ref: (el) => {
-            this.progressBarRef[index$1] = el;
+        index$1.h("yoo-progress-bar", { class: "photo-progress app-color", value: 0, hideProgressValue: true, progressAnimationDuration: 0.5, ref: (el) => {
+            this.progressBarRef[index] = el;
           } })
       ]));
   }
-  renderCameraContainer(value, index$1) {
+  renderCameraContainer(value, index$2) {
     let mediaSrc = this.type === 'photo' ? value : null;
-    if (this.type === 'video' && overlays.isCloudinaryLink(value)) {
-      mediaSrc = overlays.changeExtension(value, 'jpg');
+    if (this.type === 'video' && index.isCloudinaryLink(value)) {
+      mediaSrc = index.changeExtension(value, 'jpg');
     }
     const urlContainer = () => {
-      return index.h("div", { class: "url-capture-container" }, innerContainer(), index.h("yoo-form-input", { size: "medium", placeholder: "ORADDURL", value: overlays.isCloudinaryLink(this.value) ? '' : this.value }));
+      return index$1.h("div", { class: "url-capture-container" }, innerContainer(), index$1.h("yoo-form-input", { size: "medium", placeholder: "ORADDURL", value: index.isCloudinaryLink(this.value) ? '' : this.value }));
     };
     const innerContainer = () => {
-      return index.h("div", { class: {
+      return index$1.h("div", { class: {
           'camera-container': true,
           rotate: this.shouldRotateImage(value),
           'url-input': this.allowURLInput
-        }, ref: (el) => (this.cameraContainerElement = el), onClick: (ev) => this.onShowActionSheet(value, index$1, ev) }, index.h("input", { name: "file", class: "camera-input", type: "file", onChange: () => this.onFileSelect(index$1), accept: this.getAcceptExtension() }), value && index.h("yoo-img", { type: "background", class: "preview", src: mediaSrc }), value && (!this.multiple || this.type !== 'photo') && index.h("div", { class: "overlay" }), !this.multiple || this.type !== 'photo' ? index.h("yoo-icon", { size: this.iconSize, name: this.getIcon(), color: value ? 'light' : (this.disabled ? 'stable-alt' : 'app-color') }) : null, this.hasExtraData(index$1, this.multiple) && !this.isHistory && this.renderEditIcon(), this.onHasTag(index$1) && (index.h("div", { class: "tag-icon-container" }, index.h("yoo-tag", { icon: "tag", color: "dark-60", size: "small", iconOnlyColor: "light" }))), this.isProcessing && this.renderProgressBar(index$1));
+        }, ref: (el) => (this.cameraContainerElement = el), onClick: (ev) => this.onShowActionSheet(value, index$2, ev) }, index$1.h("input", { name: "file", class: "camera-input", type: "file", onChange: () => this.onFileSelect(index$2), accept: this.getAcceptExtension() }), value && index$1.h("yoo-img", { type: "background", class: "preview", src: mediaSrc }), value && (!this.multiple || this.type !== 'photo') && index$1.h("div", { class: "overlay" }), !this.multiple || this.type !== 'photo' ? index$1.h("yoo-icon", { size: this.iconSize, name: this.getIcon(), color: value ? 'light' : (this.disabled ? 'stable-alt' : 'app-color') }) : null, this.hasExtraData(index$2, this.multiple) && !this.isHistory && this.renderEditIcon(), this.onHasTag(index$2) && (index$1.h("div", { class: "tag-icon-container" }, index$1.h("yoo-tag", { icon: "tag", color: "dark-60", size: "small", iconOnlyColor: "light" }))), this.isProcessing && this.renderProgressBar(index$2));
     };
     return (this.allowURLInput ? urlContainer() : innerContainer());
   }
   renderButtonContainer() {
     return [
-      index.h("div", { class: {
+      index$1.h("div", { class: {
           'button-containers': true,
           kpi: this.imageRecognitionResults && this.imageRecognitionResults.length > 0
-        } }, !this.isProcessing && (index.h("div", { class: "button-container" }, index.h("yoo-button", { size: "large", class: "expanded", color: "app-color", onClick: () => this.onImageRecognition(), disabled: !this.isValueValid() }, overlays.translate('STARTIMAGERECO')))), !this.isProcessing && this.imageRecognitionResults && this.imageRecognitionResults.length > 0 && (index.h("div", { class: "button-container" }, index.h("yoo-button", { size: "large", class: "expanded", color: "dark", onClick: () => this.onShowImageRecoKpis() }, overlays.translate('SHOWIMAGERECOKPIS')))))
+        } }, !this.isProcessing && (index$1.h("div", { class: "button-container" }, index$1.h("yoo-button", { size: "large", class: "expanded", color: "app-color", onClick: () => this.onImageRecognition(), disabled: !this.isValueValid() }, index.translate('STARTIMAGERECO')))), !this.isProcessing && this.imageRecognitionResults && this.imageRecognitionResults.length > 0 && (index$1.h("div", { class: "button-container" }, index$1.h("yoo-button", { size: "large", class: "expanded", color: "dark", onClick: () => this.onShowImageRecoKpis() }, index.translate('SHOWIMAGERECOKPIS')))))
     ];
   }
   renderReadonly() {
@@ -1526,12 +1526,12 @@ const YooFormCaptureComponent = class {
     }
     const overflown = this.isHistory && this.checkImageOverflow();
     return [
-      index.h("div", { class: {
+      index$1.h("div", { class: {
           readonly: true,
           truncate: overflown
         }, ref: (el) => (this.readonlyDiv = el) }, !this.multiple ? this.renderSingle() : this.renderMultiple()),
-      this.imageRecognitionResults && this.imageRecognitionResults.length > 0 ? (index.h("div", { class: "button-containers" }, index.h("yoo-button", { class: "expanded", size: "large", color: "dark", onClick: () => this.onShowImageRecoKpis() }, overlays.translate('SHOWIMAGERECOKPIS')))) : null,
-      overflown ? (index.h("div", { class: "more-button", ref: (el) => (this.moreButtonDiv = el), onClick: (ev) => this.onToggleMore(ev) }, overlays.translate('MORE2'))) : null
+      this.imageRecognitionResults && this.imageRecognitionResults.length > 0 ? (index$1.h("div", { class: "button-containers" }, index$1.h("yoo-button", { class: "expanded", size: "large", color: "dark", onClick: () => this.onShowImageRecoKpis() }, index.translate('SHOWIMAGERECOKPIS')))) : null,
+      overflown ? (index$1.h("div", { class: "more-button", ref: (el) => (this.moreButtonDiv = el), onClick: (ev) => this.onToggleMore(ev) }, index.translate('MORE2'))) : null
     ];
   }
   onToggleMore(ev) {
@@ -1540,11 +1540,11 @@ const YooFormCaptureComponent = class {
     }
     if (this.readonlyDiv && this.readonlyDiv.classList.contains('truncate')) {
       this.readonlyDiv.classList.remove('truncate');
-      this.moreButtonDiv.innerHTML = overlays.translate('VIEWLESS');
+      this.moreButtonDiv.innerHTML = index.translate('VIEWLESS');
     }
     else {
       this.readonlyDiv.classList.add('truncate');
-      this.moreButtonDiv.innerHTML = overlays.translate('MORE2');
+      this.moreButtonDiv.innerHTML = index.translate('MORE2');
     }
   }
   onHasTag(index) {
@@ -1560,15 +1560,15 @@ const YooFormCaptureComponent = class {
     return ((_a = this.tags) === null || _a === void 0 ? void 0 : _a.length) > 0;
   }
   onCancelImageReco() {
-    overlays.showAlert('', [overlays.translate('YOOBICNO'), overlays.translate('YOOBICYES')], overlays.translate('STOPIMAGERECO')).then((res) => {
+    index.showAlert('', [index.translate('YOOBICNO'), index.translate('YOOBICYES')], index.translate('STOPIMAGERECO')).then((res) => {
       if (res) {
         this.stopImageRecognitionProcess(true);
       }
     });
   }
   onDisplayImageRecoEndToast() {
-    overlays.showToast({
-      message: overlays.translate('IMAGERECODONE'),
+    index.showToast({
+      message: index.translate('IMAGERECODONE'),
       duration: 2000,
       icon: 'check',
       cssClass: 'header app-color',
@@ -1576,26 +1576,26 @@ const YooFormCaptureComponent = class {
     });
   }
   renderEditable() {
-    return (index.h("div", { class: {
+    return (index$1.h("div", { class: {
         'outer-container': true,
         uploading: this.isProcessing
-      } }, this.isProcessing ? index.h("div", { class: "upload-overlay" }) : null, this.isProcessing ? this.renderProgressBar(undefined, true) : null, !this.multiple ? this.renderSingle() : this.renderMultiple()));
+      } }, this.isProcessing ? index$1.h("div", { class: "upload-overlay" }) : null, this.isProcessing ? this.renderProgressBar(undefined, true) : null, !this.multiple ? this.renderSingle() : this.renderMultiple()));
   }
   renderDetailViewOverlay(extraData) {
     var _a;
     const tagsName = !!((_a = extraData === null || extraData === void 0 ? void 0 : extraData.tags) === null || _a === void 0 ? void 0 : _a.length) && extraData.tags.toString().replace(',', ', ');
     return [
-      index.h("yoo-items", { class: "tags right" }, tagsName && (index.h("yoo-tooltip", { content: tagsName, placement: "top" }, index.h("yoo-tag", { color: "dark" }, index.h("yoo-icon", { slot: "start", name: "tag", color: "light-40", size: "small" }), extraData.tags.length.toString())))),
-      index.h("yoo-items", { class: "tags left" }, overlays.isPhotoEdited(extraData) && index.h("yoo-tag", { icon: "pen", color: "light" }))
+      index$1.h("yoo-items", { class: "tags right" }, tagsName && (index$1.h("yoo-tooltip", { content: tagsName, placement: "top" }, index$1.h("yoo-tag", { color: "dark" }, index$1.h("yoo-icon", { slot: "start", name: "tag", color: "light-40", size: "small" }), extraData.tags.length.toString())))),
+      index$1.h("yoo-items", { class: "tags left" }, index.isPhotoEdited(extraData) && index$1.h("yoo-tag", { icon: "pen", color: "light" }))
     ];
   }
-  renderViewImage(src, extraData, index$1, distance) {
+  renderViewImage(src, extraData, index$2, distance) {
     var _a, _b;
     const A4_WIDTH_PX = 595;
     let annotations = (extraData && (extraData.annotations || extraData['text'])) || [];
     let cloudinaryOptions = {};
-    if (this.detailView && overlays.isCloudinaryLink(src)) {
-      src = overlays.changeExtension(src, 'jpg');
+    if (this.detailView && index.isCloudinaryLink(src)) {
+      src = index.changeExtension(src, 'jpg');
       cloudinaryOptions = {
         jpg: true,
         width: A4_WIDTH_PX / 2
@@ -1605,26 +1605,26 @@ const YooFormCaptureComponent = class {
       annotations = annotations.filter((text) => (text === null || text === void 0 ? void 0 : text.type) !== 'dot');
     }
     return [
-      index.h("div", { class: "image-container" }, index.h("yoo-photo-editor", { src: src, zoomable: false, display: "preview", ...(this.isPdf && {
+      index$1.h("div", { class: "image-container" }, index$1.h("yoo-photo-editor", { src: src, zoomable: false, display: "preview", ...(this.isPdf && {
           cloudinaryOptions
-        }), animated: extraData === null || extraData === void 0 ? void 0 : extraData.animated, drawings: (extraData === null || extraData === void 0 ? void 0 : extraData.drawings) || (extraData === null || extraData === void 0 ? void 0 : extraData.edit), annotations: annotations, onImageClicked: (ev) => !this.isPdf && this.handleImageClick(index$1, ev) }), ((_b = this.detailViewOptions) === null || _b === void 0 ? void 0 : _b.showDetailInfoAsOverlay) && this.renderDetailViewOverlay(extraData)),
-      distance && this.renderDistance(index$1)
+        }), animated: extraData === null || extraData === void 0 ? void 0 : extraData.animated, drawings: (extraData === null || extraData === void 0 ? void 0 : extraData.drawings) || (extraData === null || extraData === void 0 ? void 0 : extraData.edit), annotations: annotations, onImageClicked: (ev) => !this.isPdf && this.handleImageClick(index$2, ev) }), ((_b = this.detailViewOptions) === null || _b === void 0 ? void 0 : _b.showDetailInfoAsOverlay) && this.renderDetailViewOverlay(extraData)),
+      distance && this.renderDistance(index$2)
     ];
   }
-  renderDetailDescription(src, extraData, index$1, distance) {
+  renderDetailDescription(src, extraData, index$2, distance) {
     var _a, _b, _c;
     const annotations = ((extraData === null || extraData === void 0 ? void 0 : extraData.annotations) || []).filter((annotation) => (annotation === null || annotation === void 0 ? void 0 : annotation.type) === 'dot');
     return [
-      index.h("yoo-items", { class: "description-outer-container", spacing: 8, flow: "row" }, src && this.renderViewImage(src, extraData, index$1, distance), !((_a = this.detailViewOptions) === null || _a === void 0 ? void 0 : _a.showDetailInfoAsOverlay) && [
+      index$1.h("yoo-items", { class: "description-outer-container", spacing: 8, flow: "row" }, src && this.renderViewImage(src, extraData, index$2, distance), !((_a = this.detailViewOptions) === null || _a === void 0 ? void 0 : _a.showDetailInfoAsOverlay) && [
         ((_b = extraData === null || extraData === void 0 ? void 0 : extraData.tags) === null || _b === void 0 ? void 0 : _b.length) > 0 && [
-          index.h("div", { class: "tags description-heading" }, `${extraData.tags.length} ${overlays.translate('YOOBICTAGS')}`),
-          index.h("div", { class: "tags text" }, extraData.tags.join(', '))
+          index$1.h("div", { class: "tags description-heading" }, `${extraData.tags.length} ${index.translate('YOOBICTAGS')}`),
+          index$1.h("div", { class: "tags text" }, extraData.tags.join(', '))
         ],
         !!annotations.length &&
           !((_c = this.detailViewOptions) === null || _c === void 0 ? void 0 : _c.hideAnnotationDot) && [
-          index.h("div", { class: "description-heading" }, `${annotations.length} ${overlays.translate('ANNOTATIONS')}`),
-          index.h("yoo-items", { class: "annotation-container", flow: "row" }, annotations.map((item, index$1) => {
-            return (index.h("div", { class: "annotation" }, index.h("yoo-badge", { color: "app-color", text: (index$1 + 1).toString() }), (item === null || item === void 0 ? void 0 : item.text) && index.h("span", { innerHTML: item.text })));
+          index$1.h("div", { class: "description-heading" }, `${annotations.length} ${index.translate('ANNOTATIONS')}`),
+          index$1.h("yoo-items", { class: "annotation-container", flow: "row" }, annotations.map((item, index) => {
+            return (index$1.h("div", { class: "annotation" }, index$1.h("yoo-badge", { color: "app-color", text: (index + 1).toString() }), (item === null || item === void 0 ? void 0 : item.text) && index$1.h("span", { innerHTML: item.text })));
           }))
         ]
       ])
@@ -1637,7 +1637,7 @@ const YooFormCaptureComponent = class {
       multiple: this.multiple,
       [((_a = this.detailViewOptions) === null || _a === void 0 ? void 0 : _a.extraClass) || '']: !!((_b = this.detailViewOptions) === null || _b === void 0 ? void 0 : _b.extraClass)
     };
-    return (index.h("div", { class: containerClass }, this.multiple &&
+    return (index$1.h("div", { class: containerClass }, this.multiple &&
       !this.isPdf && [
       this.value &&
         [].concat(this.value).map((src, index) => {
@@ -1647,15 +1647,15 @@ const YooFormCaptureComponent = class {
     ], this.multiple &&
       this.isPdf && [
       this.value &&
-        [].concat(this.value).map((src, index$1) => {
+        [].concat(this.value).map((src, index) => {
           var _a, _b, _c, _d;
-          return (index$1 % 2 === 0 && (index.h("div", { class: "pdf-photo-container" }, index$1 === 0 && index.h("div", { class: "title-wrapper" }, index.h("slot", { name: "image-title" })), index.h("div", { class: { wrapper: index$1 === 0 } }, this.renderDetailDescription(src, this.extraData[index$1], index$1, ((_a = this.extraData) === null || _a === void 0 ? void 0 : _a.distance) ? (_b = this.extraData) === null || _b === void 0 ? void 0 : _b.distance[index$1] : null), index$1 + 1 < this.value.length &&
-            this.renderDetailDescription(this.value[index$1 + 1], this.extraData[index$1 + 1], index$1 + 1, ((_c = this.extraData) === null || _c === void 0 ? void 0 : _c.distance) ? (_d = this.extraData) === null || _d === void 0 ? void 0 : _d.distance[index$1 + 1] : null)))));
+          return (index % 2 === 0 && (index$1.h("div", { class: "pdf-photo-container" }, index === 0 && index$1.h("div", { class: "title-wrapper" }, index$1.h("slot", { name: "image-title" })), index$1.h("div", { class: { wrapper: index === 0 } }, this.renderDetailDescription(src, this.extraData[index], index, ((_a = this.extraData) === null || _a === void 0 ? void 0 : _a.distance) ? (_b = this.extraData) === null || _b === void 0 ? void 0 : _b.distance[index] : null), index + 1 < this.value.length &&
+            this.renderDetailDescription(this.value[index + 1], this.extraData[index + 1], index + 1, ((_c = this.extraData) === null || _c === void 0 ? void 0 : _c.distance) ? (_d = this.extraData) === null || _d === void 0 ? void 0 : _d.distance[index + 1] : null)))));
         })
     ], !this.multiple && this.renderDetailDescription(this.value, this.extraData, undefined, this.extraData.distance)));
   }
   renderBasedOnMode() {
-    if (this.detailView && (!index.Build.isServer || index.Build.isTesting)) {
+    if (this.detailView && (!index$1.Build.isServer || index$1.Build.isTesting)) {
       return this.renderDetailView();
     }
     else if (this.readonly) {
@@ -1667,16 +1667,16 @@ const YooFormCaptureComponent = class {
   }
   render() {
     var _a;
-    return (index.h(index.Host, { class: {
+    return (index$1.h(index$1.Host, { class: {
         ...commonHelpers.getAppContext(this.host),
         audio: this.type && this.type === 'audio' && this.isHistory,
         video: this.type === 'video',
         disabled: this.disabled,
         'has-distance': (_a = this.extraData) === null || _a === void 0 ? void 0 : _a.distance,
         'detail-view': this.detailView
-      } }, this.renderBasedOnMode(), this.isProcessing && (index.h("yoo-button", { size: "large", class: "expanded", color: "danger", onClick: () => this.onCancelImageReco() }, overlays.translate('CANCELIMAGERECO')))));
+      } }, this.renderBasedOnMode(), this.isProcessing && (index$1.h("yoo-button", { size: "large", class: "expanded", color: "danger", onClick: () => this.onCancelImageReco() }, index.translate('CANCELIMAGERECO')))));
   }
-  get host() { return index.getElement(this); }
+  get host() { return index$1.getElement(this); }
   static get watchers() { return {
     "value": ["onValueChanges"],
     "validators": ["onValidatorsChanged"]