@yoobic/yobi 8.5.0-4 → 8.5.0-9

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';
@@ -1279,17 +1279,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 +1399,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 +1441,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 +1456,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 +1484,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 +1501,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 +1541,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 +1555,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 +1571,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 +1584,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 +1632,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 +1658,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 +1668,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 +1690,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 +1727,1202 @@ 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": "(index: number, data: any) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }, {
+              "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"
+      }];
+  }
 }