@yoobic/yobi 8.5.0-4 → 8.5.0-40

package/dist/collection/components/form/form-capture/form-capture.js

@@ -2,7 +2,7 @@ import { MediaType, PictureSourceType } from '@awesome-cordova-plugins/camera';
 import { MediaCapture } from '@awesome-cordova-plugins/media-capture';
 import { StatusBar } from '@capacitor/status-bar';
 import { addFilePrefix, asyncWaterfall, audios, changeExtension, downloadFile, getAsyncExtraData, getFormCapturedFileSize, getMimeType, getSession, hasLargeFile, images, isAndroid, isAudio, isCloudinaryLink, isFile, isGif, isImage, isImageUrl, isIOS, isIphoneX, isLenovo, isNativeFilePath, isNativeMobile, isNullOrUndefined, isOffline, isPhotoEdited, isSafari, isUnsplashUrl, isVideo, isWeb, moveToImageDirectory, pipes, read, showActionSheet, showAlert, showContextMenu, showModal, showToast, translate, translateMulti, updatePathSessionId, videos } from '@shared/utils';
-import { Build, Component, Element, Event, h, Host, Method, Prop, State, Watch } from '@stencil/core';
+import { Build, h, Host } from '@stencil/core';
 import { assign, assignInWith, clone, compact, intersection, isArray, isNumber, isUndefined, keys } from 'lodash-es';
 import { getPicture, getVideo, getVideoDevices, importMultipleFromLibrary, showAudioRecorder } from '../../../utils/helpers/camera-helpers';
 import { getAppContext, querySelectorAllDeep, querySelectorDeep, showImageCropper, showPhotoEditor, showSlidesMedia } from '../../../utils/helpers/common-helpers';
@@ -37,15 +37,9 @@ export class YooFormCaptureComponent {
     this.updateExtraData(extraData);
   }
   /** If there is index, the field is a multiphoto */
-  async setFieldValue(index, data) {
-    if (index === undefined) {
-      setValueAndValidateInput(data, this);
-    }
-    else {
-      const newValue = this.value ? [...this.value] : [];
-      newValue[index] = data;
-      setValueAndValidateInput(newValue, this);
-    }
+  async setFieldValue(data) {
+    this.multiple ? this.value.push(data) : this.value = data;
+    setValueAndValidateInput(this.value, this);
   }
   async stopImageRecognitionProcess(isCancelled = false) {
     this.imageRecoCancelled = isCancelled;
@@ -237,7 +231,7 @@ export class YooFormCaptureComponent {
   }
   allowCrop(file) {
     var _a;
-    return (((_a = this.cropperOptions) === null || _a === void 0 ? void 0 : _a.cropRatio) > 0 || this.showCropper) && isImageUrl(file) && !isGif(file) && (!(typeof file === 'string' && isUnsplashUrl(file)) || isWeb(this.host));
+    return (((_a = this.cropperOptions) === null || _a === void 0 ? void 0 : _a.cropRatio) > 0 || this.showCropper) && isImage(file) && !isGif(file) && (!(typeof file === 'string' && isUnsplashUrl(file)) || isWeb(this.host));
   }
   removeAllCapture() {
     this.value = [];
@@ -296,50 +290,34 @@ export class YooFormCaptureComponent {
       }
     }
   }
-  processMediaData(mediaData, index, preventUpdateValue = false) {
-    let promise;
-    if (!mediaData) {
-      return (promise = Promise.resolve(mediaData));
-    }
-    if (mediaData && mediaData.indexOf('?') > 0) {
+  async processMediaData(mediaData, index) {
+    if (mediaData === null || mediaData === void 0 ? void 0 : mediaData.includes('?')) {
       mediaData = mediaData.substring(0, mediaData.indexOf('?'));
     }
-    if (mediaData && mediaData.startsWith && mediaData.startsWith('data:image')) {
-      promise = Promise.resolve(mediaData);
-    }
-    else {
+    else if (mediaData && !isImageUrl(mediaData)) {
       mediaData = addFilePrefix(mediaData);
-      if (isAndroid() && mediaData.indexOf('tmp') < 0 && mediaData.indexOf('cache') < 0) {
-        promise = Promise.resolve(mediaData);
-      }
-      else {
-        promise = moveToImageDirectory(mediaData, getSession().user ? getSession().user.disablePhotoOrientationAutoFix : false);
+      if (!isAndroid() && ['cache', 'tmp'].includes(mediaData)) {
+        try {
+          mediaData = await moveToImageDirectory(mediaData, getSession().user ? getSession().user.disablePhotoOrientationAutoFix : false);
+        }
+        catch (err) {
+          throw new Error(err);
+        }
       }
     }
-    return promise.then((newPath) => {
-      if (preventUpdateValue) {
-        return Promise.resolve(newPath);
-      }
+    try {
       if (this.shouldTagImage()) {
-        this.showPhotoTagDialog(newPath).then((tag) => {
-          if (!isNullOrUndefined(tag === null || tag === void 0 ? void 0 : tag.data)) {
-            this.updateTagData(tag, index);
-            this.setFieldValue(index, newPath);
-            this.clearPhotoEdit(index);
-            if (this.saveGeoloc) {
-              this.captureGeoloc(index);
-            }
-          }
-        });
-      }
-      else {
-        this.setFieldValue(index, newPath);
-        this.clearPhotoEdit(index);
-        if (this.saveGeoloc) {
-          this.captureGeoloc(index);
-        }
+        const tag = await this.showPhotoTagDialog(mediaData);
+        (tag === null || tag === void 0 ? void 0 : tag.data) && this.updateTagData(tag, index);
       }
-    });
+      await this.setFieldValue(mediaData);
+      this.clearPhotoEdit(index);
+      this.saveGeoloc && this.captureGeoloc(index);
+    }
+    catch (err) {
+      throw new Error(err);
+    }
+    return mediaData;
   }
   showPhotoTagDialog(imageSrc, value) {
     const imageTag = document.createElement('yoo-form-capture-tag-dialog');
@@ -466,75 +444,37 @@ export class YooFormCaptureComponent {
       this.showImageLoader = false;
       return;
     }
-    return promise.then((imageData) => {
-      var _a, _b;
-      const imagesData = Array.isArray(imageData) ? imageData : [imageData];
-      const hasUnsplash = imagesData.some(d => isUnsplashUrl(d));
-      if (!imageData && this.showImageLoader) {
+    try {
+      const res = await promise;
+      if (!res && this.showImageLoader) {
         this.showImageLoader = false;
       }
-      if (!hasUnsplash && (this.cropperOptions || this.showCropper)) {
-        return Promise.all(imagesData.map((data) => this.onOpenCropper(data)))
-          .then(resolvedData => {
-          resolvedData === null || resolvedData === void 0 ? void 0 : resolvedData.forEach((res, i) => {
-            var _a, _b;
-            this.setFieldValue((_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : i, res);
-            this.clearPhotoEdit(null);
-          });
-          this.showImageLoader = false;
-        }).catch(() => {
-          this.showImageLoader = false;
-        });
-      }
-      else {
-        let newIndex = index;
-        if (index < 0) {
-          newIndex = (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
-        }
-        if (isMultiMode || useMediaCapture) {
-          const promises = imageData.map((d, ind) => {
-            return this.processMediaData(d.fullPath, newIndex >= 0 ? ind + newIndex : newIndex);
-          });
-          return Promise.all(promises).then(() => { });
-        }
-        else if (isArray(imageData)) {
-          const newArr = [];
-          let promises = [];
-          const preventUpdate = imageData.length !== 1;
-          if (preventUpdate) {
-            promises = imageData.map((imageSrc, i) => {
-              return this.processMediaData(imageSrc, null, preventUpdate).then((newImageSrc) => {
-                newArr[i] = newImageSrc;
-              });
-            });
-          }
-          else {
-            promises = imageData.map((d, ind) => {
-              return this.processMediaData(d, ind + newIndex);
-            });
-          }
-          return Promise.all(promises).then(() => {
-            if (preventUpdate) {
-              this.value = [...[].concat(this.value), ...newArr];
-              setValueAndValidateInput(this.value, this);
+      const imagesData = Array.isArray(res) ? res : [res];
+      const hasUnsplash = imagesData.some(d => isUnsplashUrl(d));
+      const processImage = async (imageData, index) => {
+        var _a;
+        try {
+          let extractedData = (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;
+          if (!this.shouldTagImage()) {
+            const shouldOpenCropper = !hasUnsplash && imagesData.length === 1 && this.allowCrop(imageData);
+            const newIndex = Array.isArray(this.value) ? (_a = this.value) === null || _a === void 0 ? void 0 : _a.length : index;
+            if (shouldOpenCropper) {
+              extractedData = await this.onOpenCropper(imageData);
             }
-            this.showImageLoader = false;
-          });
+            await this.processMediaData(extractedData, newIndex);
+          }
         }
-        else {
+        catch (err) {
           this.showImageLoader = false;
-          if (imageData && imageData['data']) {
-            return this.processMediaData(imageData['data'], newIndex);
-          }
-          if (imageData && imageData['path']) {
-            return this.processMediaData(imageData['path'], newIndex);
-          }
-          return this.processMediaData(imageData, newIndex);
         }
-      }
-    }).catch(() => {
+      };
+      await Promise.all(imagesData.map((data, index) => processImage(data, index)));
       this.showImageLoader = false;
-    });
+    }
+    catch (err) {
+      this.showImageLoader = false;
+      throw new Error(err);
+    }
   }
   captureVideo(index) {
     const options = { limit: 1, duration: this.duration || 60, saveToPhotoAlbum: true };
@@ -602,7 +542,7 @@ export class YooFormCaptureComponent {
           this.showPhotoTagDialog(ret.data).then((tag) => {
             if (!isNullOrUndefined(tag === null || tag === void 0 ? void 0 : tag.data)) {
               this.updateTagData(tag, index);
-              this.setFieldValue(index, ret.data);
+              this.setFieldValue(ret.data);
               this.clearPhotoEdit(index);
               if (this.saveGeoloc) {
                 this.captureGeoloc();
@@ -611,7 +551,7 @@ export class YooFormCaptureComponent {
           });
         }
         else {
-          this.setFieldValue(index, ret.data);
+          this.setFieldValue(ret.data);
           this.clearPhotoEdit(index);
           if (this.saveGeoloc) {
             this.captureGeoloc();
@@ -711,7 +651,7 @@ export class YooFormCaptureComponent {
         }
         else {
           if (this.multiple && (newImages === null || newImages === void 0 ? void 0 : newImages.length) > 0) {
-            this.setFieldValue(captureIndex, newImages);
+            this.setFieldValue(newImages);
           }
           else if (newImages === null || newImages === void 0 ? void 0 : newImages.length) {
             this.value = newImages[0];
@@ -774,17 +714,17 @@ export class YooFormCaptureComponent {
         const tag = await this.showPhotoTagDialog(data);
         if (!isNullOrUndefined(tag === null || tag === void 0 ? void 0 : tag.data)) {
           this.updateTagData(tag, index);
-          this.setFieldValue(index, data);
+          this.setFieldValue(data);
           this.clearPhotoEdit(index);
         }
       }
       else {
-        this.setFieldValue(index, data);
+        this.setFieldValue(data);
         this.clearPhotoEdit(index);
       }
     }
     else {
-      this.setFieldValue(index, f);
+      this.setFieldValue(f);
       this.clearPhotoEdit(index);
     }
     targetElement.value = null;
@@ -1030,6 +970,7 @@ export class YooFormCaptureComponent {
   }
   async onShowActionSheet(value, index, 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) {
       this.onShowMaximumCaptureReached();
       return;
@@ -1279,17 +1220,14 @@ export class YooFormCaptureComponent {
     return extensions && extensions.length > 0 ? extensions.map((e) => '.' + e).join(',') : null;
   }
   renderEditIcon() {
-    return (h("div", { class: "edit-icon-container" },
-      h("span", { class: "edit-icon" },
-        h("yoo-tag", { color: "dark-60", icon: "brush", iconOnlyColor: "light", size: "small" }))));
+    return (h("div", { class: "edit-icon-container" }, h("span", { class: "edit-icon" }, h("yoo-tag", { color: "dark-60", icon: "brush", iconOnlyColor: "light", size: "small" }))));
   }
   renderAudio(src) {
     return h("yoo-card-file", { class: "document", file: src, type: this.type });
   }
   renderPreviewPlayIcon() {
     return (this.type === 'video' &&
-      this.readonly && (h("div", { class: "control-container" },
-      h("yoo-icon", { name: "play", color: "light", size: "small" }))));
+      this.readonly && (h("div", { class: "control-container" }, h("yoo-icon", { name: "play", color: "light", size: "small" }))));
   }
   renderPreview() {
     var _a;
@@ -1402,40 +1340,29 @@ export class YooFormCaptureComponent {
   }
   renderDistance(index) {
     return [
-      h("div", { class: "distance" },
-        h("div", { class: "inner-container", onClick: () => {
-            this.onShowDistanceDialog(index);
-          } },
-          h("yoo-icon", { name: "pin", color: "text-color", size: "small" }),
-          h("span", null, pipes.distance.transform(this.multiple ? this.extraData.distance[index] : this.extraData.distance))))
+      h("div", { class: "distance" }, h("div", { class: "inner-container", onClick: () => {
+          this.onShowDistanceDialog(index);
+        } }, h("yoo-icon", { name: "pin", color: "text-color", size: "small" }), h("span", null, pipes.distance.transform(this.multiple ? this.extraData.distance[index] : this.extraData.distance))))
     ];
   }
   renderSingle() {
     if (this.readonly) {
-      return (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 (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 (h("div", { class: "single" },
-        this.renderCameraContainer(this.value),
-        this.isImageRecognition && !this.isBackgroundProcess && this.renderButtonContainer()));
+      return (h("div", { class: "single" }, this.renderCameraContainer(this.value), this.isImageRecognition && !this.isBackgroundProcess && this.renderButtonContainer()));
     }
   }
   renderCaptureStatus() {
     const value = this.value || [];
-    return (value && (h("div", { class: { 'capture-status': true, 'image-reco': this.isImageRecognition } },
-      this.required && (h("div", { class: "status" }, value.length > this.min
-        ? translate('PHOTOTAKEN', { captured_number: `${this.min}/${this.min}` })
-        : translate('PHOTOTAKEN', { captured_number: `${value.length}/${this.min}` }))),
-      !this.hideOptional && this.max && this.max > 0 && (h("div", { class: {
-          status: true,
-          'max-reached': value.length === this.max
-        } }, translate('MAXIMUMCAPTURE', { captured_number: `${value.length}/${this.max}` }))),
-      value.length > 0 && (h("div", { class: "action", onClick: () => {
-          this.toggleSelectorMode();
-        } }, translate('SELECT2'))))));
+    return (value && (h("div", { class: { 'capture-status': true, 'image-reco': this.isImageRecognition } }, this.required && (h("div", { class: "status" }, value.length > this.min
+      ? translate('PHOTOTAKEN', { captured_number: `${this.min}/${this.min}` })
+      : translate('PHOTOTAKEN', { captured_number: `${value.length}/${this.min}` }))), !this.hideOptional && this.max && this.max > 0 && (h("div", { class: {
+        status: true,
+        'max-reached': value.length === this.max
+      } }, translate('MAXIMUMCAPTURE', { captured_number: `${value.length}/${this.max}` }))), value.length > 0 && (h("div", { class: "action", onClick: () => {
+        this.toggleSelectorMode();
+      } }, translate('SELECT2'))))));
   }
   renderMultiple() {
     var _a;
@@ -1455,12 +1382,8 @@ export class YooFormCaptureComponent {
       }
     }
     const innerRender = (innerSrc, innerIndex) => {
-      return (innerSrc && (h("div", { class: "readonly-container multiple" },
-        this.type === 'audio' ? this.renderAudio(innerSrc) :
-          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' && (h("div", { class: "overlay", onClick: (ev) => this.handleImageClick(innerIndex, ev) }, this.renderPreviewPlayIcon())))));
+      return (innerSrc && (h("div", { class: "readonly-container multiple" }, this.type === 'audio' ? this.renderAudio(innerSrc) :
+        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' && (h("div", { class: "overlay", onClick: (ev) => this.handleImageClick(innerIndex, ev) }, this.renderPreviewPlayIcon())))));
     };
     const processValue = (processVal) => {
       let src = processVal;
@@ -1474,9 +1397,7 @@ export class YooFormCaptureComponent {
       return (value.map &&
         value.map((v, index) => {
           if (Build.isServer && !Build.isTesting) {
-            return (index % 2 === 0 && (h("div", { class: "inner-ssr-container" },
-              innerRender(processValue(v), index),
-              value[index + 1] && innerRender(processValue(value[index + 1]), index + 1))));
+            return (index % 2 === 0 && (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);
@@ -1504,19 +1425,16 @@ export class YooFormCaptureComponent {
       } }, translate('DELETE')));
   }
   renderTopAction() {
-    return (h("div", { class: "top-action-container" },
-      h("div", { class: "left-action" }, this.isAllItemSelected() ? (h("div", { onClick: () => {
-          this.unselectAll();
-        } }, translate('UNSELECTALL'))) : (h("div", { onClick: () => {
-          this.selectAll();
-        } }, translate('SELECTALL')))),
-      h("div", { class: "right-action", onClick: () => {
-          this.toggleSelectorMode();
-        } }, "Cancel")));
+    return (h("div", { class: "top-action-container" }, h("div", { class: "left-action" }, this.isAllItemSelected() ? (h("div", { onClick: () => {
+        this.unselectAll();
+      } }, translate('UNSELECTALL'))) : (h("div", { onClick: () => {
+        this.selectAll();
+      } }, translate('SELECTALL')))), h("div", { class: "right-action", onClick: () => {
+        this.toggleSelectorMode();
+      } }, "Cancel")));
   }
   renderSelectorOverlay() {
-    return (h("div", { class: "media-overlay" },
-      h("yoo-icon", { name: this.type === 'video' ? 'videocamera' : 'microphone', color: "light", size: this.iconSize })));
+    return (h("div", { class: "media-overlay" }, h("yoo-icon", { name: this.type === 'video' ? 'videocamera' : 'microphone', color: "light", size: this.iconSize })));
   }
   renderCameraContainerInSelectMode(item, index) {
     return (h("div", { class: {
@@ -1524,41 +1442,26 @@ export class YooFormCaptureComponent {
         rotate: this.shouldRotateImage(item)
       }, onClick: () => {
         this.onItemSelect(index);
-      } },
-      item && this.type === 'photo' ? h("yoo-img", { type: "background", class: "preview", src: item, instant: true }) : this.renderSelectorOverlay(),
-      h("yoo-icon", { name: "circle", color: "light", size: "small", class: "circle" }),
-      item && (!this.multiple || this.type !== 'photo') && h("div", { class: "overlay" }),
-      this.isItemSelected(index) && h("yoo-icon", { name: "check", color: "app-color", class: "check", size: "small" })));
+      } }, item && this.type === 'photo' ? h("yoo-img", { type: "background", class: "preview", src: item, instant: true }) : this.renderSelectorOverlay(), h("yoo-icon", { name: "circle", color: "light", size: "small", class: "circle" }), item && (!this.multiple || this.type !== 'photo') && h("div", { class: "overlay" }), this.isItemSelected(index) && h("yoo-icon", { name: "check", color: "app-color", class: "check", size: "small" })));
   }
   renderMultipleInSelectMode() {
     const value = this.value || [];
-    return (h("div", { class: "multiple selector-mode" },
-      this.renderTopAction(),
-      isArray(value) && value.length > 0
-        ? value.map((item, index) => {
-          return this.renderCameraContainerInSelectMode(item, index);
-        })
-        : null,
-      this.renderBottomAction()));
+    return (h("div", { class: "multiple selector-mode" }, this.renderTopAction(), isArray(value) && value.length > 0
+      ? value.map((item, index) => {
+        return this.renderCameraContainerInSelectMode(item, index);
+      })
+      : null, this.renderBottomAction()));
   }
   renderMultipleInNormalMode() {
     const value = this.value || [];
-    return (h("div", { class: "multiple" },
-      this.showImageLoader ? h("yoo-loader", { class: "absolute backdrop", size: "large" }) : null,
-      this.renderCaptureStatus(),
-      h("div", { class: { 'camera-containers': true, 'no-padding': this.hideOptional } },
-        this.renderAddCameraContainer(),
-        isArray(value) &&
-          value.length > 0 &&
-          value.map((item, index) => {
-            return this.renderCameraContainer(item, index);
-          })),
-      this.isImageRecognition && !this.isBackgroundProcess ? this.renderButtonContainer() : null));
+    return (h("div", { class: "multiple" }, this.showImageLoader ? h("yoo-loader", { class: "absolute backdrop", size: "large" }) : null, this.renderCaptureStatus(), h("div", { class: { 'camera-containers': true, 'no-padding': this.hideOptional } }, this.renderAddCameraContainer(), isArray(value) &&
+      value.length > 0 &&
+      value.map((item, index) => {
+        return this.renderCameraContainer(item, index);
+      })), this.isImageRecognition && !this.isBackgroundProcess ? this.renderButtonContainer() : null));
   }
   renderAddCameraContainer(index = -1) {
-    return (h("div", { class: "camera-container", ref: (el) => (this.cameraContainerElement = el), onClick: (ev) => this.onShowActionSheet(null, index, ev) },
-      h("input", { name: "file", multiple: true, class: "add-input", type: "file", onChange: () => this.onAddFileSelect(), accept: this.getAcceptExtension() }),
-      h("yoo-icon", { size: this.iconSize, name: this.getIcon(), color: this.disabled ? 'light' : 'app-color' })));
+    return (h("div", { class: "camera-container", ref: (el) => (this.cameraContainerElement = el), onClick: (ev) => this.onShowActionSheet(null, index, ev) }, h("input", { name: "file", multiple: true, class: "add-input", type: "file", onChange: () => this.onAddFileSelect(), accept: this.getAcceptExtension() }), h("yoo-icon", { size: this.iconSize, name: this.getIcon(), color: this.disabled ? 'light' : 'app-color' })));
   }
   renderProgressBar(index, mainProgress = false) {
     if (!this.multiple) {
@@ -1579,8 +1482,7 @@ export class YooFormCaptureComponent {
     return (h("div", { class: "progressbar-wrapper" }, mainProgress
       ? [
         this.currentUploadingStatus && (isUndefined(index) || !this.multiple) && h("div", { class: "text app-color" }, this.currentUploadingStatus),
-        !this.isProcessingPhoto && (h("div", { class: "main-wrapper" },
-          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.isProcessingPhoto && (h("div", { class: "main-wrapper" }, 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) })))
       ]
       : [
         h("yoo-progress-bar", { class: "photo-progress app-color", value: 0, hideProgressValue: true, progressAnimationDuration: 0.5, ref: (el) => {
@@ -1594,24 +1496,14 @@ export class YooFormCaptureComponent {
       mediaSrc = changeExtension(value, 'jpg');
     }
     const urlContainer = () => {
-      return h("div", { class: "url-capture-container" },
-        innerContainer(),
-        h("yoo-form-input", { size: "medium", placeholder: "ORADDURL", value: isCloudinaryLink(this.value) ? '' : this.value }));
+      return h("div", { class: "url-capture-container" }, innerContainer(), h("yoo-form-input", { size: "medium", placeholder: "ORADDURL", value: isCloudinaryLink(this.value) ? '' : this.value }));
     };
     const innerContainer = () => {
       return 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, ev) },
-        h("input", { name: "file", class: "camera-input", type: "file", onChange: () => this.onFileSelect(index), accept: this.getAcceptExtension() }),
-        value && h("yoo-img", { type: "background", class: "preview", src: mediaSrc }),
-        value && (!this.multiple || this.type !== 'photo') && h("div", { class: "overlay" }),
-        !this.multiple || this.type !== 'photo' ? h("yoo-icon", { size: this.iconSize, name: this.getIcon(), color: value ? 'light' : 'app-color' }) : null,
-        this.hasExtraData(index, this.multiple) && !this.isHistory && this.renderEditIcon(),
-        this.onHasTag(index) && (h("div", { class: "tag-icon-container" },
-          h("yoo-tag", { icon: "tag", color: "dark-60", size: "small", iconOnlyColor: "light" }))),
-        this.isProcessing && this.renderProgressBar(index));
+        }, ref: (el) => (this.cameraContainerElement = el), onClick: (ev) => this.onShowActionSheet(value, index, ev) }, h("input", { name: "file", class: "camera-input", type: "file", onChange: () => this.onFileSelect(index), accept: this.getAcceptExtension() }), value && h("yoo-img", { type: "background", class: "preview", src: mediaSrc }), value && (!this.multiple || this.type !== 'photo') && h("div", { class: "overlay" }), !this.multiple || this.type !== 'photo' ? h("yoo-icon", { size: this.iconSize, name: this.getIcon(), color: value ? 'light' : 'app-color' }) : null, this.hasExtraData(index, this.multiple) && !this.isHistory && this.renderEditIcon(), this.onHasTag(index) && (h("div", { class: "tag-icon-container" }, h("yoo-tag", { icon: "tag", color: "dark-60", size: "small", iconOnlyColor: "light" }))), this.isProcessing && this.renderProgressBar(index));
     };
     return (this.allowURLInput ? urlContainer() : innerContainer());
   }
@@ -1620,11 +1512,7 @@ export class YooFormCaptureComponent {
       h("div", { class: {
           'button-containers': true,
           kpi: this.imageRecognitionResults && this.imageRecognitionResults.length > 0
-        } },
-        !this.isProcessing && (h("div", { class: "button-container" },
-          h("yoo-button", { size: "large", class: "expanded", color: "app-color", onClick: () => this.onImageRecognition(), disabled: !this.isValueValid() }, translate('STARTIMAGERECO')))),
-        !this.isProcessing && this.imageRecognitionResults && this.imageRecognitionResults.length > 0 && (h("div", { class: "button-container" },
-          h("yoo-button", { size: "large", class: "expanded", color: "dark", onClick: () => this.onShowImageRecoKpis() }, translate('SHOWIMAGERECOKPIS')))))
+        } }, !this.isProcessing && (h("div", { class: "button-container" }, h("yoo-button", { size: "large", class: "expanded", color: "app-color", onClick: () => this.onImageRecognition(), disabled: !this.isValueValid() }, translate('STARTIMAGERECO')))), !this.isProcessing && this.imageRecognitionResults && this.imageRecognitionResults.length > 0 && (h("div", { class: "button-container" }, h("yoo-button", { size: "large", class: "expanded", color: "dark", onClick: () => this.onShowImageRecoKpis() }, translate('SHOWIMAGERECOKPIS')))))
     ];
   }
   renderReadonly() {
@@ -1637,8 +1525,7 @@ export class YooFormCaptureComponent {
           readonly: true,
           truncate: overflown
         }, ref: (el) => (this.readonlyDiv = el) }, !this.multiple ? this.renderSingle() : this.renderMultiple()),
-      this.imageRecognitionResults && this.imageRecognitionResults.length > 0 ? (h("div", { class: "button-containers" },
-        h("yoo-button", { class: "expanded", size: "large", color: "dark", onClick: () => this.onShowImageRecoKpis() }, translate('SHOWIMAGERECOKPIS')))) : null,
+      this.imageRecognitionResults && this.imageRecognitionResults.length > 0 ? (h("div", { class: "button-containers" }, h("yoo-button", { class: "expanded", size: "large", color: "dark", onClick: () => this.onShowImageRecoKpis() }, translate('SHOWIMAGERECOKPIS')))) : null,
       overflown ? (h("div", { class: "more-button", ref: (el) => (this.moreButtonDiv = el), onClick: (ev) => this.onToggleMore(ev) }, translate('MORE2'))) : null
     ];
   }
@@ -1686,19 +1573,13 @@ export class YooFormCaptureComponent {
     return (h("div", { class: {
         'outer-container': true,
         uploading: this.isProcessing
-      } },
-      this.isProcessing ? h("div", { class: "upload-overlay" }) : null,
-      this.isProcessing ? this.renderProgressBar(undefined, true) : null,
-      !this.multiple ? this.renderSingle() : this.renderMultiple()));
+      } }, this.isProcessing ? 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 [
-      h("yoo-items", { class: "tags right" }, tagsName && (h("yoo-tooltip", { content: tagsName, placement: "top" },
-        h("yoo-tag", { color: "dark" },
-          h("yoo-icon", { slot: "start", name: "tag", color: "light-40", size: "small" }),
-          extraData.tags.length.toString())))),
+      h("yoo-items", { class: "tags right" }, tagsName && (h("yoo-tooltip", { content: tagsName, placement: "top" }, h("yoo-tag", { color: "dark" }, h("yoo-icon", { slot: "start", name: "tag", color: "light-40", size: "small" }), extraData.tags.length.toString())))),
       h("yoo-items", { class: "tags left" }, isPhotoEdited(extraData) && h("yoo-tag", { icon: "pen", color: "light" }))
     ];
   }
@@ -1718,11 +1599,9 @@ export class YooFormCaptureComponent {
       annotations = annotations.filter((text) => (text === null || text === void 0 ? void 0 : text.type) !== 'dot');
     }
     return [
-      h("div", { class: "image-container" },
-        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, ev) }),
-        ((_b = this.detailViewOptions) === null || _b === void 0 ? void 0 : _b.showDetailInfoAsOverlay) && this.renderDetailViewOverlay(extraData)),
+      h("div", { class: "image-container" }, 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, ev) }), ((_b = this.detailViewOptions) === null || _b === void 0 ? void 0 : _b.showDetailInfoAsOverlay) && this.renderDetailViewOverlay(extraData)),
       distance && this.renderDistance(index)
     ];
   }
@@ -1730,23 +1609,19 @@ export class YooFormCaptureComponent {
     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 [
-      h("yoo-items", { class: "description-outer-container", spacing: 8, flow: "row" },
-        src && this.renderViewImage(src, extraData, index, 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 && [
-            h("div", { class: "tags description-heading" }, `${extraData.tags.length} ${translate('YOOBICTAGS')}`),
-            h("div", { class: "tags text" }, extraData.tags.join(', '))
-          ],
-          !!annotations.length &&
-            !((_c = this.detailViewOptions) === null || _c === void 0 ? void 0 : _c.hideAnnotationDot) && [
-            h("div", { class: "description-heading" }, `${annotations.length} ${translate('ANNOTATIONS')}`),
-            h("yoo-items", { class: "annotation-container", flow: "row" }, annotations.map((item, index) => {
-              return (h("div", { class: "annotation" },
-                h("yoo-badge", { color: "app-color", text: (index + 1).toString() }),
-                (item === null || item === void 0 ? void 0 : item.text) && h("span", { innerHTML: item.text })));
-            }))
-          ]
-        ])
+      h("yoo-items", { class: "description-outer-container", spacing: 8, flow: "row" }, src && this.renderViewImage(src, extraData, index, 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 && [
+          h("div", { class: "tags description-heading" }, `${extraData.tags.length} ${translate('YOOBICTAGS')}`),
+          h("div", { class: "tags text" }, extraData.tags.join(', '))
+        ],
+        !!annotations.length &&
+          !((_c = this.detailViewOptions) === null || _c === void 0 ? void 0 : _c.hideAnnotationDot) && [
+          h("div", { class: "description-heading" }, `${annotations.length} ${translate('ANNOTATIONS')}`),
+          h("yoo-items", { class: "annotation-container", flow: "row" }, annotations.map((item, index) => {
+            return (h("div", { class: "annotation" }, h("yoo-badge", { color: "app-color", text: (index + 1).toString() }), (item === null || item === void 0 ? void 0 : item.text) && h("span", { innerHTML: item.text })));
+          }))
+        ]
+      ])
     ];
   }
   renderDetailView() {
@@ -1756,30 +1631,22 @@ export class YooFormCaptureComponent {
       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 (h("div", { class: containerClass },
-      this.multiple &&
-        !this.isPdf && [
-        this.value &&
-          [].concat(this.value).map((src, index) => {
-            var _a, _b;
-            return 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);
-          })
-      ],
-      this.multiple &&
-        this.isPdf && [
-        this.value &&
-          [].concat(this.value).map((src, index) => {
-            var _a, _b, _c, _d;
-            return (index % 2 === 0 && (h("div", { class: "pdf-photo-container" },
-              index === 0 && h("div", { class: "title-wrapper" },
-                h("slot", { name: "image-title" })),
-              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)));
+    return (h("div", { class: containerClass }, this.multiple &&
+      !this.isPdf && [
+      this.value &&
+        [].concat(this.value).map((src, index) => {
+          var _a, _b;
+          return 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);
+        })
+    ], this.multiple &&
+      this.isPdf && [
+      this.value &&
+        [].concat(this.value).map((src, index) => {
+          var _a, _b, _c, _d;
+          return (index % 2 === 0 && (h("div", { class: "pdf-photo-container" }, index === 0 && h("div", { class: "title-wrapper" }, h("slot", { name: "image-title" })), 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 && (!Build.isServer || Build.isTesting)) {
@@ -1801,1190 +1668,1199 @@ export class YooFormCaptureComponent {
         disabled: this.disabled,
         'has-distance': (_a = this.extraData) === null || _a === void 0 ? void 0 : _a.distance,
         'detail-view': this.detailView
-      } },
-      this.renderBasedOnMode(),
-      this.isProcessing && (h("yoo-button", { size: "large", class: "expanded", color: "danger", onClick: () => this.onCancelImageReco() }, translate('CANCELIMAGERECO')))));
+      } }, this.renderBasedOnMode(), this.isProcessing && (h("yoo-button", { size: "large", class: "expanded", color: "danger", onClick: () => this.onCancelImageReco() }, translate('CANCELIMAGERECO')))));
   }
   static get is() { return "yoo-form-capture"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["form-capture.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["form-capture.css"]
-  }; }
-  static get properties() { return {
-    "extraData": {
-      "type": "any",
-      "mutable": true,
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "extra-data",
-      "reflect": false,
-      "defaultValue": "{}"
-    },
-    "asyncValidators": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "AsyncValidator<string>[]",
-        "resolved": "AsyncValidator<string>[]",
-        "references": {
-          "AsyncValidator": {
-            "location": "import",
-            "path": "@shared/interfaces"
+  static get originalStyleUrls() {
+    return {
+      "$": ["form-capture.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["form-capture.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "extraData": {
+        "type": "any",
+        "mutable": true,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "extra-data",
+        "reflect": false,
+        "defaultValue": "{}"
+      },
+      "asyncValidators": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "AsyncValidator<string>[]",
+          "resolved": "AsyncValidator<string>[]",
+          "references": {
+            "AsyncValidator": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            }
           }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
         }
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
-    "showCropper": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "show-cropper",
-      "reflect": false
-    },
-    "placeholder": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "placeholder",
-      "reflect": false
-    },
-    "required": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "required",
-      "reflect": false
-    },
-    "isHistory": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "is-history",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "readonly": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "readonly",
-      "reflect": false
-    },
-    "type": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'video' | 'audio' | 'photo'",
-        "resolved": "\"audio\" | \"photo\" | \"video\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "type",
-      "reflect": false,
-      "defaultValue": "'photo'"
-    },
-    "multiple": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "multiple",
-      "reflect": false
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "disabled",
-      "reflect": false
-    },
-    "min": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "min",
-      "reflect": false,
-      "defaultValue": "1"
-    },
-    "max": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "max",
-      "reflect": false,
-      "defaultValue": "1"
-    },
-    "tags": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "string[]",
-        "resolved": "string[]",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
-    "cropperOptions": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "Partial<YooImageCropperDialogComponent>",
-        "resolved": "{ heading?: string; file?: any; cropRatio?: number; maintainQuality?: boolean; preventBlob?: boolean; upload?: boolean; loading?: boolean; componentWillLoad?: () => Promise<void>; componentDidLoad?: () => void; onClose?: () => void; onSave?: (b64Val: any) => void; renderLoader?: () => any; renderHeader?: () => any; renderContent?: () => any; render?: () => any; }",
-        "references": {
-          "Partial": {
-            "location": "global"
-          },
-          "YooImageCropperDialogComponent": {
-            "location": "import",
-            "path": "../image-cropper-dialog/image-cropper-dialog"
-          }
+      "showCropper": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-cropper",
+        "reflect": false
+      },
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "placeholder",
+        "reflect": false
+      },
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "required",
+        "reflect": false
+      },
+      "isHistory": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-history",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "readonly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "readonly",
+        "reflect": false
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'video' | 'audio' | 'photo'",
+          "resolved": "\"audio\" | \"photo\" | \"video\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "'photo'"
+      },
+      "multiple": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "multiple",
+        "reflect": false
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "reflect": false
+      },
+      "min": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "min",
+        "reflect": false,
+        "defaultValue": "1"
+      },
+      "max": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "max",
+        "reflect": false,
+        "defaultValue": "1"
+      },
+      "tags": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "string[]",
+          "resolved": "string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
         }
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
-    "maxWidth": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "max-width",
-      "reflect": false
-    },
-    "maxHeight": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "max-height",
-      "reflect": false
-    },
-    "duration": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "duration",
-      "reflect": false
-    },
-    "saveGeoloc": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "save-geoloc",
-      "reflect": false
-    },
-    "formGeoloc": {
-      "type": "any",
-      "mutable": false,
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "form-geoloc",
-      "reflect": false
-    },
-    "allowLibrary": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "allow-library",
-      "reflect": false
-    },
-    "allowGif": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "allow-gif",
-      "reflect": false
-    },
-    "allowUnsplash": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "allow-unsplash",
-      "reflect": false
-    },
-    "allowAnnotate": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "allow-annotate",
-      "reflect": false
-    },
-    "allowCamera": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "allow-camera",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "isImageRecognition": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "is-image-recognition",
-      "reflect": false
-    },
-    "algorithm": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "IAlgorithm",
-        "resolved": "IAlgorithm",
-        "references": {
-          "IAlgorithm": {
-            "location": "import",
-            "path": "@shared/interfaces"
+      "cropperOptions": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Partial<YooImageCropperDialogComponent>",
+          "resolved": "{ heading?: string; file?: any; cropRatio?: number; maintainQuality?: boolean; preventBlob?: boolean; upload?: boolean; loading?: boolean; componentWillLoad?: () => Promise<void>; componentDidLoad?: () => void; onClose?: () => void; onSave?: (b64Val: any) => void; renderLoader?: () => any; renderHeader?: () => any; renderContent?: () => any; render?: () => any; }",
+          "references": {
+            "Partial": {
+              "location": "global"
+            },
+            "YooImageCropperDialogComponent": {
+              "location": "import",
+              "path": "../image-cropper-dialog/image-cropper-dialog"
+            }
           }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
         }
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
-    "algorithmDisplay": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "IImageRecognitionDisplay[]",
-        "resolved": "IImageRecognitionDisplay[]",
-        "references": {
-          "IImageRecognitionDisplay": {
-            "location": "import",
-            "path": "@shared/interfaces"
+      "maxWidth": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "max-width",
+        "reflect": false
+      },
+      "maxHeight": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "max-height",
+        "reflect": false
+      },
+      "duration": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "duration",
+        "reflect": false
+      },
+      "saveGeoloc": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "save-geoloc",
+        "reflect": false
+      },
+      "formGeoloc": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "form-geoloc",
+        "reflect": false
+      },
+      "allowLibrary": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "allow-library",
+        "reflect": false
+      },
+      "allowGif": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "allow-gif",
+        "reflect": false
+      },
+      "allowUnsplash": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "allow-unsplash",
+        "reflect": false
+      },
+      "allowAnnotate": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "allow-annotate",
+        "reflect": false
+      },
+      "allowCamera": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "allow-camera",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "isImageRecognition": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-image-recognition",
+        "reflect": false
+      },
+      "algorithm": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IAlgorithm",
+          "resolved": "IAlgorithm",
+          "references": {
+            "IAlgorithm": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            }
           }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
         }
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
-    "isAnimationFinished": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "is-animation-finished",
-      "reflect": false
-    },
-    "isBackgroundProcess": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "is-background-process",
-      "reflect": false
-    },
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "label",
-      "reflect": false
-    },
-    "isPdf": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "is-pdf",
-      "reflect": false
-    },
-    "name": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "name",
-      "reflect": false
-    },
-    "useGallery": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "use-gallery",
-      "reflect": false
-    },
-    "imageRecognitionKpiKeys": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "{ name: string; hideMobile: boolean }[]",
-        "resolved": "{ name: string; hideMobile: boolean; }[]",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
-    "preventVideoPlay": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "prevent-video-play",
-      "reflect": false
-    },
-    "allowUserImages": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "allow-user-images",
-      "reflect": false
-    },
-    "maximumCaptureSize": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "maximum-capture-size",
-      "reflect": false
-    },
-    "size": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "TSize",
-        "resolved": "\"extra-extra-large\" | \"extra-large\" | \"extra-small\" | \"large\" | \"medium\" | \"small\"",
-        "references": {
-          "TSize": {
-            "location": "import",
-            "path": "@shared/interfaces"
+      "algorithmDisplay": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IImageRecognitionDisplay[]",
+          "resolved": "IImageRecognitionDisplay[]",
+          "references": {
+            "IImageRecognitionDisplay": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            }
           }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
         }
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "size",
-      "reflect": true
-    },
-    "preventUpload": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "prevent-upload",
-      "reflect": false
-    },
-    "hideOptional": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "hide-optional",
-      "reflect": false
-    },
-    "detailView": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Detail mode / pdf view"
-      },
-      "attribute": "detail-view",
-      "reflect": false
-    },
-    "detailViewOptions": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "IFormCaptureDetailViewOptions",
-        "resolved": "IFormCaptureDetailViewOptions",
-        "references": {
-          "IFormCaptureDetailViewOptions": {
-            "location": "import",
-            "path": "../../../interfaces"
-          }
+      "isAnimationFinished": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-animation-finished",
+        "reflect": false
+      },
+      "isBackgroundProcess": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-background-process",
+        "reflect": false
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "isPdf": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-pdf",
+        "reflect": false
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "name",
+        "reflect": false
+      },
+      "useGallery": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "use-gallery",
+        "reflect": false
+      },
+      "imageRecognitionKpiKeys": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "{ name: string; hideMobile: boolean }[]",
+          "resolved": "{ name: string; hideMobile: boolean; }[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
         }
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Show detail info of pdf as overlay instead of text"
-      }
-    },
-    "value": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string | string[]",
-        "resolved": "string | string[]",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "value",
-      "reflect": false
-    },
-    "validators": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "(Validator<string> | IValidatorEntry)[]",
-        "resolved": "(IValidatorEntry | Validator<string>)[]",
-        "references": {
-          "Validator": {
-            "location": "import",
-            "path": "@shared/interfaces"
-          },
-          "IValidatorEntry": {
-            "location": "import",
-            "path": "@shared/interfaces"
+      "preventVideoPlay": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "prevent-video-play",
+        "reflect": false
+      },
+      "allowUserImages": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "allow-user-images",
+        "reflect": false
+      },
+      "maximumCaptureSize": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "maximum-capture-size",
+        "reflect": false
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "TSize",
+          "resolved": "\"extra-extra-large\" | \"extra-large\" | \"extra-small\" | \"large\" | \"medium\" | \"small\"",
+          "references": {
+            "TSize": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            }
           }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": true
+      },
+      "preventUpload": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "prevent-upload",
+        "reflect": false
+      },
+      "hideOptional": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "hide-optional",
+        "reflect": false
+      },
+      "detailView": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Detail mode / pdf view"
+        },
+        "attribute": "detail-view",
+        "reflect": false
+      },
+      "detailViewOptions": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IFormCaptureDetailViewOptions",
+          "resolved": "IFormCaptureDetailViewOptions",
+          "references": {
+            "IFormCaptureDetailViewOptions": {
+              "location": "import",
+              "path": "../../../interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Show detail info of pdf as overlay instead of text"
         }
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "defaultValue": "[]"
-    },
-    "allowURLInput": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "allow-u-r-l-input",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "validity": {},
-    "isProcessing": {},
-    "isProcessingPhoto": {},
-    "showImageLoader": {},
-    "imageRecognitionResults": {},
-    "isSelectorMode": {},
-    "selectedIndex": {},
-    "currentUploadingStatus": {}
-  }; }
-  static get events() { return [{
-      "method": "validityChanged",
-      "name": "validityChanged",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      }
-    }, {
-      "method": "inputBlurred",
-      "name": "inputBlurred",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "inputFocused",
-      "name": "inputFocused",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "inputChanged",
-      "name": "inputChanged",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "imageRecognition",
-      "name": "imageRecognition",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "getGeoloc",
-      "name": "getGeoloc",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "getMediaurl",
-      "name": "getMediaurl",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "galleryOpened",
-      "name": "galleryOpened",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      }
-    }, {
-      "method": "actionSheetOpened",
-      "name": "actionSheetOpened",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      }
-    }, {
-      "method": "extraDataChanged",
-      "name": "extraDataChanged",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "fetchData",
-      "name": "fetchData",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "IGridSearch",
-        "resolved": "IGridSearch",
-        "references": {
-          "IGridSearch": {
-            "location": "import",
-            "path": "@shared/interfaces"
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string | string[]",
+          "resolved": "string | string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "value",
+        "reflect": false
+      },
+      "validators": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(Validator<string> | IValidatorEntry)[]",
+          "resolved": "(IValidatorEntry | Validator<string>)[]",
+          "references": {
+            "Validator": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            },
+            "IValidatorEntry": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            }
           }
-        }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "[]"
+      },
+      "allowURLInput": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "allow-u-r-l-input",
+        "reflect": false
       }
-    }]; }
-  static get methods() { return {
-    "updateAutocompleteValues": {
-      "complexType": {
-        "signature": "(tags: any) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+    };
+  }
+  static get states() {
+    return {
+      "validity": {},
+      "isProcessing": {},
+      "isProcessingPhoto": {},
+      "showImageLoader": {},
+      "imageRecognitionResults": {},
+      "isSelectorMode": {},
+      "selectedIndex": {},
+      "currentUploadingStatus": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "validityChanged",
+        "name": "validityChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
         },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "updateData": {
-      "complexType": {
-        "signature": "(value: any, extraData: any) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }, {
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }, {
+        "method": "inputBlurred",
+        "name": "inputBlurred",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "inputFocused",
+        "name": "inputFocused",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "inputChanged",
+        "name": "inputChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "imageRecognition",
+        "name": "imageRecognition",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "getGeoloc",
+        "name": "getGeoloc",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "getMediaurl",
+        "name": "getMediaurl",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "galleryOpened",
+        "name": "galleryOpened",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        }
+      }, {
+        "method": "actionSheetOpened",
+        "name": "actionSheetOpened",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        }
+      }, {
+        "method": "extraDataChanged",
+        "name": "extraDataChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "fetchData",
+        "name": "fetchData",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "IGridSearch",
+          "resolved": "IGridSearch",
+          "references": {
+            "IGridSearch": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            }
           }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "updateAutocompleteValues": {
+        "complexType": {
+          "signature": "(tags: any) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "setFieldValue": {
-      "complexType": {
-        "signature": "(index: number, data: any) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }, {
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "updateData": {
+        "complexType": {
+          "signature": "(value: any, extraData: any) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "If there is index, the field is a multiphoto",
-        "tags": []
-      }
-    },
-    "stopImageRecognitionProcess": {
-      "complexType": {
-        "signature": "(isCancelled?: boolean) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "setFieldValue": {
+        "complexType": {
+          "signature": "(data: any) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "If there is index, the field is a multiphoto",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "onPhotoUploadComplete": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "stopImageRecognitionProcess": {
+        "complexType": {
+          "signature": "(isCancelled?: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "onPhotoUploadProgressUpdate": {
-      "complexType": {
-        "signature": "(progress: number, index: number) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }, {
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
+      "onPhotoUploadComplete": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
           },
-          "HTMLYooProgressBarElement": {
-            "location": "global"
-          }
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "onImageRecognitionFailed": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "onPhotoUploadProgressUpdate": {
+        "complexType": {
+          "signature": "(progress: number, index: number) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "HTMLYooProgressBarElement": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "processImageRecognitionResults": {
-      "complexType": {
-        "signature": "(imageRecognitionResults: any, priceRecognitionResults: any) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }, {
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "onImageRecognitionFailed": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "processGeoloc": {
-      "complexType": {
-        "signature": "(geolocation: any, index: any) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }, {
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "processImageRecognitionResults": {
+        "complexType": {
+          "signature": "(imageRecognitionResults: any, priceRecognitionResults: any) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "",
-        "tags": []
+      "processGeoloc": {
+        "complexType": {
+          "signature": "(geolocation: any, index: any) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       }
-    }
-  }; }
+    };
+  }
   static get elementRef() { return "host"; }
-  static get watchers() { return [{
-      "propName": "value",
-      "methodName": "onValueChanges"
-    }, {
-      "propName": "validators",
-      "methodName": "onValidatorsChanged"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "value",
+        "methodName": "onValueChanges"
+      }, {
+        "propName": "validators",
+        "methodName": "onValidatorsChanged"
+      }];
+  }
 }