@yoobic/yobi 8.5.0-4 → 8.5.0-9

package/dist/collection/components/3.organisms/photo-editor/photo-editor.js

@@ -16,7 +16,7 @@
  */
 import { ScreenOrientation } from '@awesome-cordova-plugins/screen-orientation';
 import { cleanupWKWebViewFilePath, closeModal, Draggable, enableKeyboardResize, getAsyncExtraData, getContrastColor, getCssColor, getImageScaleFactor, getImageSize, getMaxViewPortImage, getMedia, getResizedImageSize, getTransformInfos, gsapSet, gsapTo, isIOS, isNativeMobile, isWeb, resizeObserve, scaleUpAnimation, setStatusBarDarkMode, showActionSheet, showAlert, showContextMenu, translate, vibrateHapticMedium } from '@shared/utils';
-import { Component, Element, Event, forceUpdate, h, Host, Method, Prop, State, Watch } from '@stencil/core';
+import { forceUpdate, h, Host } from '@stencil/core';
 import { capitalize, cloneDeep, isEqual, isFunction } from 'lodash-es';
 import { getFromOfflineStorage } from '../../../utils/cache';
 import { getElement, getPointerCoordinates, isAnnotationDeleted, isAnnotationEmpty, isAnnotationFocused, isAnnotationValid, isElementInsideContainer } from '../../../utils/helpers/annotations-helpers';
@@ -1234,9 +1234,7 @@ export class YooPhotoEditorComponent {
     return h(Dot, { annotation: dot, readonly: this.isReadonly, imageSize: (_a = this.imageSize) === null || _a === void 0 ? void 0 : _a.resized, isWeb: isWeb(this.host), disableTooltip: disableTooltip, tooltipProps: { showOnCreate: !disableTooltip && this.isDotMode }, hidden: this.isLoading, onAnnotationClick: (ev) => this.clickAnnotation(ev, dot), onDotSave: () => this.unfocusAnnotation() });
   }
   renderOverlay() {
-    return this.isCreateMode && (h("div", { id: "overlay", style: this.imageSizeStyle.resized, onClick: (ev) => this.overlayClick(ev) },
-      this.isDotCreateMode && h("div", null, translate('TAPTOINSERTCOMMENT')),
-      this.isTextCreateMode && this.renderTextEditor()));
+    return this.isCreateMode && (h("div", { id: "overlay", style: this.imageSizeStyle.resized, onClick: (ev) => this.overlayClick(ev) }, this.isDotCreateMode && h("div", null, translate('TAPTOINSERTCOMMENT')), this.isTextCreateMode && this.renderTextEditor()));
   }
   renderHeader() {
     return this.navbarVisiblity !== 'disabled' && !this.isPreview && h(Navbar, { visibility: this.navbarVisiblity, animated: this.mode !== this.lastMode, currentOptions: this.menuOptions.getOptions()[this.mode], onOptionClick: (ev, btnContent) => this.optionsClick(ev, btnContent) });
@@ -1277,12 +1275,7 @@ export class YooPhotoEditorComponent {
           this.hasZoomSetup = true;
           this.isLoading = false;
         }
-      }, ...{ mode: this.mode }, onZoom: (ev) => this.onImageZoom(ev) },
-      this.renderOverlay(),
-      this.renderDrawingsCanvas(),
-      this.isReadonly ? this.renderImage() : this.renderSrcCanvas(),
-      this.renderCursorPicker(),
-      this.renderAnnotations()));
+      }, ...{ mode: this.mode }, onZoom: (ev) => this.onImageZoom(ev) }, this.renderOverlay(), this.renderDrawingsCanvas(), this.isReadonly ? this.renderImage() : this.renderSrcCanvas(), this.renderCursorPicker(), this.renderAnnotations()));
   }
   renderLoader() {
     return this.isLoading && h("yoo-loader", { class: "absolute", size: "large" });
@@ -1293,596 +1286,602 @@ export class YooPhotoEditorComponent {
   renderFooter() {
     const selectedColor = this.isTextCreateMode ? 'light' : this.isDotCreateMode ? 'success' : this.color;
     const hasDescription = !!(this.description && this.isReadonly);
-    return (this.isImageEditable && (h("footer", { class: { 'has-description': hasDescription }, ref: (el => this.footerElement = el) },
-      hasDescription && h("div", { class: "description-container" }, this.description),
-      h("yoo-color-selector", { disablePicker: this.isTextCreateMode, selectedColor: selectedColor, ref: (el) => (this.colorSelectorElement = el), onPickerSelected: () => this.onPickColor(), onColorSelected: (event) => this.onSelectColor(event === null || event === void 0 ? void 0 : event.detail) }))));
+    return (this.isImageEditable && (h("footer", { class: { 'has-description': hasDescription }, ref: (el => this.footerElement = el) }, hasDescription && h("div", { class: "description-container" }, this.description), h("yoo-color-selector", { disablePicker: this.isTextCreateMode, selectedColor: selectedColor, ref: (el) => (this.colorSelectorElement = el), onPickerSelected: () => this.onPickColor(), onColorSelected: (event) => this.onSelectColor(event === null || event === void 0 ? void 0 : event.detail) }))));
   }
   render() {
-    return (h(Host, { class: { 'swiper-no-swiping': !this.isReadonly }, ...(this.isPreview && !this.isImageZoomable && this.imageSizeStyle), onClick: (ev) => this.outsideImageClick(ev) },
-      this.renderHeader(),
-      this.renderContent(),
-      this.renderFooter(),
-      this.renderSlider(),
-      this.renderActionButtons(),
-      this.renderLoader()));
+    return (h(Host, { class: { 'swiper-no-swiping': !this.isReadonly }, ...(this.isPreview && !this.isImageZoomable && this.imageSizeStyle), onClick: (ev) => this.outsideImageClick(ev) }, this.renderHeader(), this.renderContent(), this.renderFooter(), this.renderSlider(), this.renderActionButtons(), this.renderLoader()));
   }
   static get is() { return "yoo-photo-editor"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["photo-editor.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["photo-editor.css"]
-  }; }
-  static get properties() { return {
-    "editable": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Set to true wether the image in a readonly mode can be\nswitched to the editable mode"
-      },
-      "attribute": "editable",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "displayAnnotations": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Specify wether the annotations should be displayed or not\nSetting to false will hide the dots and the textboxes on\nthe images if there is initially in the prop `annotations`"
-      },
-      "attribute": "display-annotations",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "zoomable": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Allow the ability to zoom-in/out the image using the\npinch gesture"
-      },
-      "attribute": "zoomable",
-      "reflect": false
-    },
-    "display": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'standard' | 'preview'",
-        "resolved": "\"preview\" | \"standard\"",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["photo-editor.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["photo-editor.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "editable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Set to true wether the image in a readonly mode can be\nswitched to the editable mode"
+        },
+        "attribute": "editable",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Specify the display by knowing that :\n-> Standard : display by default\n-> Preview : readonly / no topbar / disabled tooltip"
+      "displayAnnotations": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Specify wether the annotations should be displayed or not\nSetting to false will hide the dots and the textboxes on\nthe images if there is initially in the prop `annotations`"
+        },
+        "attribute": "display-annotations",
+        "reflect": false,
+        "defaultValue": "true"
       },
-      "attribute": "display",
-      "reflect": true,
-      "defaultValue": "'standard'"
-    },
-    "animated": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "zoomable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Allow the ability to zoom-in/out the image using the\npinch gesture"
+        },
+        "attribute": "zoomable",
+        "reflect": false
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Specify whether the animations should be enabled or not"
+      "display": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'standard' | 'preview'",
+          "resolved": "\"preview\" | \"standard\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Specify the display by knowing that :\n-> Standard : display by default\n-> Preview : readonly / no topbar / disabled tooltip"
+        },
+        "attribute": "display",
+        "reflect": true,
+        "defaultValue": "'standard'"
       },
-      "attribute": "animated",
-      "reflect": true,
-      "defaultValue": "true"
-    },
-    "navbarVisiblity": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'hidden' | 'visible' | 'disabled'",
-        "resolved": "\"disabled\" | \"hidden\" | \"visible\"",
-        "references": {}
+      "animated": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Specify whether the animations should be enabled or not"
+        },
+        "attribute": "animated",
+        "reflect": true,
+        "defaultValue": "true"
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Set here the visibility of the navbar :\n'hidden' : the navbar is loaded but faded-out during the first load of the component\n'visible': the navbar is loaded and visible during the first load of the component (default)\n'disabled': the navbar is not visible and not loaded"
+      "navbarVisiblity": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'hidden' | 'visible' | 'disabled'",
+          "resolved": "\"disabled\" | \"hidden\" | \"visible\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Set here the visibility of the navbar :\n'hidden' : the navbar is loaded but faded-out during the first load of the component\n'visible': the navbar is loaded and visible during the first load of the component (default)\n'disabled': the navbar is not visible and not loaded"
+        },
+        "attribute": "navbar-visiblity",
+        "reflect": false,
+        "defaultValue": "'visible'"
       },
-      "attribute": "navbar-visiblity",
-      "reflect": false,
-      "defaultValue": "'visible'"
-    },
-    "extraActions": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "IButton[] | IEntityAction[]",
-        "resolved": "IButton[] | IEntityAction[]",
-        "references": {
-          "IButton": {
-            "location": "import",
-            "path": "@shared/interfaces"
-          },
-          "IEntityAction": {
-            "location": "import",
-            "path": "@shared/interfaces"
+      "extraActions": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IButton[] | IEntityAction[]",
+          "resolved": "IButton[] | IEntityAction[]",
+          "references": {
+            "IButton": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            },
+            "IEntityAction": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "add here any extra actions to include in the workflow like download, switchEditable etc.."
-      },
-      "defaultValue": "[]"
-    },
-    "showSaveInitial": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Show save button as save instead of tick icon and allow user to save without annotating the image first"
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "add here any extra actions to include in the workflow like download, switchEditable etc.."
+        },
+        "defaultValue": "[]"
       },
-      "attribute": "show-save-initial",
-      "reflect": false
-    },
-    "submitView": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "'tools' | 'extras'",
-        "resolved": "\"extras\" | \"tools\"",
-        "references": {}
+      "showSaveInitial": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Show save button as save instead of tick icon and allow user to save without annotating the image first"
+        },
+        "attribute": "show-save-initial",
+        "reflect": false
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Show save button as save instead of tick icon and allow user to save without annotating the image first"
+      "submitView": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "'tools' | 'extras'",
+          "resolved": "\"extras\" | \"tools\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Show save button as save instead of tick icon and allow user to save without annotating the image first"
+        },
+        "attribute": "submit-view",
+        "reflect": false
       },
-      "attribute": "submit-view",
-      "reflect": false
-    },
-    "closeHandler": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "(data?: IPhotoEditorData) => void",
-        "resolved": "(data?: IPhotoEditorData) => void",
-        "references": {
-          "IPhotoEditorData": {
-            "location": "import",
-            "path": "@shared/interfaces"
+      "closeHandler": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(data?: IPhotoEditorData) => void",
+          "resolved": "(data?: IPhotoEditorData) => void",
+          "references": {
+            "IPhotoEditorData": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            }
           }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Set a custom action to the close button"
         }
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Set a custom action to the close button"
-      }
-    },
-    "submitButton": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "IButton",
-        "resolved": "IButton",
-        "references": {
-          "IButton": {
-            "location": "import",
-            "path": "@shared/interfaces"
+      "submitButton": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IButton",
+          "resolved": "IButton",
+          "references": {
+            "IButton": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            }
           }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Customise the submit button into a button with the text\nand set a custom action"
         }
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Customise the submit button into a button with the text\nand set a custom action"
-      }
-    },
-    "description": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Description of an image which appears at the bottom of the photo-editor when previewing an image from a form-image-choice input"
-      },
-      "attribute": "description",
-      "reflect": false
-    },
-    "hasBackButton": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "description": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Description of an image which appears at the bottom of the photo-editor when previewing an image from a form-image-choice input"
+        },
+        "attribute": "description",
+        "reflect": false
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "If isModal is true, this property will render a back button if set to true and a cross if set to false, on the top-left corner of the photo-editor."
+      "hasBackButton": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If isModal is true, this property will render a back button if set to true and a cross if set to false, on the top-left corner of the photo-editor."
+        },
+        "attribute": "has-back-button",
+        "reflect": false
       },
-      "attribute": "has-back-button",
-      "reflect": false
-    },
-    "cloudinaryOptions": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "IImgCloudinaryOptions",
-        "resolved": "IImgCloudinaryOptions",
-        "references": {
-          "IImgCloudinaryOptions": {
-            "location": "import",
-            "path": "@shared/interfaces"
+      "cloudinaryOptions": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IImgCloudinaryOptions",
+          "resolved": "IImgCloudinaryOptions",
+          "references": {
+            "IImgCloudinaryOptions": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Options passed to the URL source.\n\nThis property only applies for Cloudinary URL source."
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Options passed to the URL source.\n\nThis property only applies for Cloudinary URL source."
+        },
+        "defaultValue": "{}"
       },
-      "defaultValue": "{}"
-    },
-    "annotations": {
-      "type": "unknown",
-      "mutable": true,
-      "complexType": {
-        "original": "IPhotoAnnotation[]",
-        "resolved": "IPhotoAnnotation[]",
-        "references": {
-          "IPhotoAnnotation": {
-            "location": "import",
-            "path": "@shared/interfaces"
+      "annotations": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "IPhotoAnnotation[]",
+          "resolved": "IPhotoAnnotation[]",
+          "references": {
+            "IPhotoAnnotation": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Array of text annotations to render. These can be both dot and text annotations"
-      },
-      "defaultValue": "[]"
-    },
-    "drawings": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "The source of the edited image to overlay over the original source. This can be a stitched image or a photo with drawings from v4.\nIf there is no stitching, this image is hidden for photos that have drawings added on v6."
-      },
-      "attribute": "drawings",
-      "reflect": false
-    },
-    "isReadonly": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Specifies whether the component is in readonly mode"
-      },
-      "attribute": "is-readonly",
-      "reflect": true
-    },
-    "src": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "The source of the image to display"
-      },
-      "attribute": "src",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "mode": {},
-    "isLoading": {},
-    "drawingsStackIndex": {},
-    "imageSize": {}
-  }; }
-  static get events() { return [{
-      "method": "imageClicked",
-      "name": "imageClicked",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the image is being clicked (in a readonly mode only)"
-      },
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      }
-    }, {
-      "method": "zoomClicked",
-      "name": "zoomClicked",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the yoo-zoom component inside the editor is clicked when in isReadonly mode"
-      },
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      }
-    }, {
-      "method": "imageZoomed",
-      "name": "imageZoomed",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the image is being zoomed;"
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Array of text annotations to render. These can be both dot and text annotations"
+        },
+        "defaultValue": "[]"
       },
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      }
-    }, {
-      "method": "switchFromEditable",
-      "name": "switchFromEditable",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when we are switching from the editable to the extra action menu"
+      "drawings": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The source of the edited image to overlay over the original source. This can be a stitched image or a photo with drawings from v4.\nIf there is no stitching, this image is hidden for photos that have drawings added on v6."
+        },
+        "attribute": "drawings",
+        "reflect": false
       },
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      }
-    }, {
-      "method": "blockMoves",
-      "name": "blockMoves",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted to block the swiping action of the slides when drag and dropping an annotation"
+      "isReadonly": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Specifies whether the component is in readonly mode"
+        },
+        "attribute": "is-readonly",
+        "reflect": true
       },
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "src": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The source of the image to display"
+        },
+        "attribute": "src",
+        "reflect": false
       }
-    }, {
-      "method": "saveChanges",
-      "name": "saveChanges",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the annotations changes are being saved"
-      },
-      "complexType": {
-        "original": "IPhotoEditorData",
-        "resolved": "IPhotoEditorData",
-        "references": {
-          "IPhotoEditorData": {
-            "location": "import",
-            "path": "@shared/interfaces"
-          }
+    };
+  }
+  static get states() {
+    return {
+      "mode": {},
+      "isLoading": {},
+      "drawingsStackIndex": {},
+      "imageSize": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "imageClicked",
+        "name": "imageClicked",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the image is being clicked (in a readonly mode only)"
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
         }
-      }
-    }]; }
-  static get methods() { return {
-    "overlayDismiss": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      }, {
+        "method": "zoomClicked",
+        "name": "zoomClicked",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the yoo-zoom component inside the editor is clicked when in isReadonly mode"
         },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "dismissLoader": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }, {
+        "method": "imageZoomed",
+        "name": "imageZoomed",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the image is being zoomed;"
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }, {
+        "method": "switchFromEditable",
+        "name": "switchFromEditable",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when we are switching from the editable to the extra action menu"
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }, {
+        "method": "blockMoves",
+        "name": "blockMoves",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted to block the swiping action of the slides when drag and dropping an annotation"
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }, {
+        "method": "saveChanges",
+        "name": "saveChanges",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the annotations changes are being saved"
+        },
+        "complexType": {
+          "original": "IPhotoEditorData",
+          "resolved": "IPhotoEditorData",
+          "references": {
+            "IPhotoEditorData": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            }
           }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "overlayDismiss": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "close": {
-      "complexType": {
-        "signature": "(forceCheckForChanges?: boolean) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "dismissLoader": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "closeEditableMode": {
-      "complexType": {
-        "signature": "(forceCheckForChanges?: boolean) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "close": {
+        "complexType": {
+          "signature": "(forceCheckForChanges?: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "initResizeObserver": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "closeEditableMode": {
+        "complexType": {
+          "signature": "(forceCheckForChanges?: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "prepareImageSize": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "initResizeObserver": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "hideAllTooltips": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "prepareImageSize": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "",
-        "tags": []
+      "hideAllTooltips": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       }
-    }
-  }; }
+    };
+  }
   static get elementRef() { return "host"; }
-  static get watchers() { return [{
-      "propName": "extraActions",
-      "methodName": "onExtraActionsChanged"
-    }, {
-      "propName": "drawings",
-      "methodName": "onDrawingsChanged"
-    }, {
-      "propName": "isReadonly",
-      "methodName": "onReadonlyChanged"
-    }, {
-      "propName": "src",
-      "methodName": "onSrcChanged"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "extraActions",
+        "methodName": "onExtraActionsChanged"
+      }, {
+        "propName": "drawings",
+        "methodName": "onDrawingsChanged"
+      }, {
+        "propName": "isReadonly",
+        "methodName": "onReadonlyChanged"
+      }, {
+        "propName": "src",
+        "methodName": "onSrcChanged"
+      }];
+  }
 }