@yoobic/yobi 8.5.0-3 → 8.5.0-31

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

@@ -1,5 +1,5 @@
 import { closeModal, Draggable, getMedia, gsapTo, isPointInsidePlan, isWeb, parseMarkDown, replaceAllLinks, showModal, translate, translateMulti } 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 { isEqual } from 'lodash-es';
 import { getFromOfflineStorage } from '../../../utils/cache/localForage';
 import { calcCoordPercentage } from '../../../utils/helpers/annotations-helpers';
@@ -82,8 +82,9 @@ export class YooFormHotzonesComponent {
     }
   }
   initDraggableTarget() {
+    var _a;
     let draggable;
-    const imgElement = this.boundElement.querySelector('yoo-img');
+    const imgElement = (_a = this.boundElement) === null || _a === void 0 ? void 0 : _a.querySelector('yoo-img');
     const onDrag = () => {
       const isHit = draggable.hitTest(imgElement, '50%');
       this.targetElement.setAttribute('hit', isHit);
@@ -145,14 +146,10 @@ export class YooFormHotzonesComponent {
   renderDetailedView() {
     const { description, image } = this.selectedHotzone || {};
     return [
-      h("yoo-navbar", { class: "transparent" },
-        h("yoo-icon", { slot: "start", name: "close", onClick: () => closeModal(null) })),
+      h("yoo-navbar", { class: "transparent" }, h("yoo-icon", { slot: "start", name: "close", onClick: () => closeModal(null) })),
       [
-        h("section", { id: "content" },
-          image && h("yoo-img", { src: image, contained: true, instant: true, ignoreHeight: true }),
-          description && (h("div", { id: "description", innerHTML: replaceAllLinks(parseMarkDown(translateMulti(description)), true) }))),
-        h("footer", null,
-          h("yoo-button", { onClick: () => closeModal(null), color: "app-color", size: isWeb(this.host) ? 'medium' : 'large' }, translate('YOOBICDONE')))
+        h("section", { id: "content" }, image && h("yoo-img", { src: image, contained: true, instant: true, ignoreHeight: true }), description && (h("div", { id: "description", innerHTML: replaceAllLinks(parseMarkDown(translateMulti(description)), true) }))),
+        h("footer", null, h("yoo-button", { onClick: () => closeModal(null), color: "app-color", size: isWeb(this.host) ? 'medium' : 'large' }, translate('YOOBICDONE')))
       ]
     ];
   }
@@ -184,345 +181,350 @@ export class YooFormHotzonesComponent {
         }), ref: (el) => (this.targetElement = el) })));
   }
   renderImage() {
-    return (!!this.imageSrc && (h("section", { id: "image", class: { flipped: this.animated && !!this.flipImage && !this.readonly } },
-      h("div", { id: "inner-container" },
-        h("div", { id: "recto", ref: (e) => (this.boundElement = e) },
-          h("yoo-img", { instant: true, src: this.imageSrc, ignoreHeight: true, ignoreWidth: true, disableAspectRatioCalc: true, allowCloudinary: false }),
-          this.renderZones(),
-          this.renderTarget()),
-        h("div", { id: "verso" })))));
+    return (!!this.imageSrc && (h("section", { id: "image", class: { flipped: this.animated && !!this.flipImage && !this.readonly } }, h("div", { id: "inner-container" }, h("div", { id: "recto", ref: (e) => (this.boundElement = e) }, h("yoo-img", { instant: true, src: this.imageSrc, ignoreHeight: true, ignoreWidth: true, disableAspectRatioCalc: true, allowCloudinary: false }), this.renderZones(), this.renderTarget()), h("div", { id: "verso" })))));
   }
   renderBanner() {
     return (this.livePreview &&
-      !this.readonly && (h("yoo-banner", null,
-      h("p", { slot: "content" }))));
+      !this.readonly && (h("yoo-banner", null, h("p", { slot: "content" }))));
   }
   renderMain() {
     return h("main", null, this.detailedView ? this.renderDetailedView() : [this.renderImage()]);
   }
   render() {
-    return (h(Host, { class: { 'swiper-no-swiping': true, ...getAppContext(this.host) } },
-      this.renderBanner(),
-      this.renderMain()));
+    return (h(Host, { class: { 'swiper-no-swiping': true, ...getAppContext(this.host) } }, this.renderBanner(), this.renderMain()));
   }
   static get is() { return "yoo-form-hotzones"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["form-hotzones.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["form-hotzones.css"]
-  }; }
-  static get properties() { return {
-    "animated": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "animated",
-      "reflect": true,
-      "defaultValue": "true"
-    },
-    "readonly": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+  static get originalStyleUrls() {
+    return {
+      "$": ["form-hotzones.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["form-hotzones.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "animated": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "animated",
+        "reflect": true,
+        "defaultValue": "true"
       },
-      "attribute": "readonly",
-      "reflect": true
-    },
-    "livePreview": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "readonly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "readonly",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "livePreview": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "live-preview",
+        "reflect": true
       },
-      "attribute": "live-preview",
-      "reflect": true
-    },
-    "type": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "FormFieldType.hotzone | FormFieldType.imagemap",
-        "resolved": "FormFieldType.hotzone | FormFieldType.imagemap",
-        "references": {
-          "FormFieldType": {
-            "location": "import",
-            "path": "@shared/interfaces"
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "FormFieldType.hotzone | FormFieldType.imagemap",
+          "resolved": "FormFieldType.hotzone | FormFieldType.imagemap",
+          "references": {
+            "FormFieldType": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "type",
-      "reflect": true
-    },
-    "detailedView": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "detailed-view",
-      "reflect": true
-    },
-    "validity": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "type",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "detailedView": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "detailed-view",
+        "reflect": true
       },
-      "attribute": "validity",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "required": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "validity": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "validity",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "required": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "required",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "attribute": "required",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "selectedHotzone": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "IHotzone",
-        "resolved": "IHotzone",
-        "references": {
-          "IHotzone": {
-            "location": "import",
-            "path": "@shared/interfaces"
+      "selectedHotzone": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IHotzone",
+          "resolved": "IHotzone",
+          "references": {
+            "IHotzone": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            }
           }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
         }
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
-    "hotzonesColor": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "hotzonesColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "hotzones-color",
+        "reflect": false
       },
-      "attribute": "hotzones-color",
-      "reflect": false
-    },
-    "value": {
-      "type": "unknown",
-      "mutable": true,
-      "complexType": {
-        "original": "IXYPoint",
-        "resolved": "IXYPoint",
-        "references": {
-          "IXYPoint": {
-            "location": "import",
-            "path": "@shared/interfaces"
+      "value": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "IXYPoint",
+          "resolved": "IXYPoint",
+          "references": {
+            "IXYPoint": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            }
           }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
         }
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
-    "image": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "image": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "image",
+        "reflect": false
       },
-      "attribute": "image",
-      "reflect": false
-    },
-    "hotzones": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "IHotzone[]",
-        "resolved": "IHotzone[]",
-        "references": {
-          "IHotzone": {
-            "location": "import",
-            "path": "@shared/interfaces"
+      "hotzones": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IHotzone[]",
+          "resolved": "IHotzone[]",
+          "references": {
+            "IHotzone": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "defaultValue": "[]"
-    },
-    "isVisible": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "is-visible",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "flipImage": {}
-  }; }
-  static get events() { return [{
-      "method": "validityChanged",
-      "name": "validityChanged",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "[]"
       },
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "isVisible": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-visible",
+        "reflect": false
       }
-    }, {
-      "method": "inputChanged",
-      "name": "inputChanged",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "IXYPoint",
-        "resolved": "IXYPoint",
-        "references": {
-          "IXYPoint": {
-            "location": "import",
-            "path": "@shared/interfaces"
-          }
+    };
+  }
+  static get states() {
+    return {
+      "flipImage": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "validityChanged",
+        "name": "validityChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
         }
-      }
-    }]; }
-  static get methods() { return {
-    "isValid": {
-      "complexType": {
-        "signature": "() => Promise<boolean>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
+      }, {
+        "method": "inputChanged",
+        "name": "inputChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "IXYPoint",
+          "resolved": "IXYPoint",
+          "references": {
+            "IXYPoint": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            }
           }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "isValid": {
+        "complexType": {
+          "signature": "() => Promise<boolean>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<boolean>"
         },
-        "return": "Promise<boolean>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       }
-    }
-  }; }
+    };
+  }
   static get elementRef() { return "host"; }
-  static get watchers() { return [{
-      "propName": "value",
-      "methodName": "onValueChanged"
-    }, {
-      "propName": "image",
-      "methodName": "onImageChanged"
-    }, {
-      "propName": "hotzones",
-      "methodName": "onHotzonesChanged"
-    }, {
-      "propName": "isVisible",
-      "methodName": "onIsVisibleChanged"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "value",
+        "methodName": "onValueChanged"
+      }, {
+        "propName": "image",
+        "methodName": "onImageChanged"
+      }, {
+        "propName": "hotzones",
+        "methodName": "onHotzonesChanged"
+      }, {
+        "propName": "isVisible",
+        "methodName": "onIsVisibleChanged"
+      }];
+  }
 }