@yoobic/yobi 8.1.0-110 → 8.1.0-113

package/dist/collection/components/form/{form-image-map/form-image-map.css → form-hotzones/form-hotzones.css}

@@ -201,48 +201,69 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
+.hidden {
+  display: none !important;
+}
+
+.flex {
+  display: flex !important;
+}
+
+.block {
+  display: block !important;
+}
+
 :host {
   display: block;
-  overflow: visible;
+  max-width: 25rem;
+  margin: 0 auto;
 }
 :host .image {
+  margin: 0 auto;
   background-color: transparent;
   perspective: 1000px;
 }
+:host .image.flipped .inner-container {
+  transform: rotateY(180deg);
+}
 :host .image .inner-container {
-  position: relative;
   width: 100%;
   height: 100%;
   margin: 0 auto;
-  overflow: hidden;
-  text-align: center;
   transform-style: preserve-3d;
   transition: transform 0.8s;
 }
+:host .image .inner-container .flip-box-front,
+:host .image .inner-container .flip-box-back {
+  width: 100%;
+  height: fit-content;
+  background-color: var(--light, #ffffff);
+  backface-visibility: hidden;
+}
+:host .image .inner-container .flip-box-back {
+  z-index: 1;
+  transform: rotateY(180deg);
+}
 :host .image .inner-container yoo-img {
+  position: relative;
   border-radius: var(--border-radius-08, 0.5rem);
 }
-:host .image .inner-container .hotspot-container {
+:host .image .inner-container .hotzone {
   position: absolute;
   display: flex;
   align-items: center;
   justify-content: center;
+  background-color: var(--app-color-20, rgba(90, 48, 244, 0.2));
+  border-color: var(--app-color, #5a30f4);
+  border-style: solid;
+  border-width: var(--border-width-02, 0.125rem);
+  border-radius: var(--border-radius-04, 0.25rem);
   cursor: pointer;
-}
-:host .image .inner-container .hotspot-container .hotspot {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  background-color: var(--success-20, rgba(58, 167, 109, 0.2));
-  border: var(--border-width-01, 0.0625rem) solid var(--success, #3aa76d);
-  border-radius: var(--border-radius-08, 0.5rem);
   transition: background-color 250ms ease-in-out;
 }
-:host .image .inner-container .hotspot-container .hotspot.selected {
-  background-color: var(--app-color-20, rgba(90, 48, 244, 0.2));
-  border-color: var(--app-color, #5a30f4);
+:host .image .inner-container .hotzone.revealed {
+  background-color: var(--success-20, rgba(58, 167, 109, 0.2));
+  border-color: var(--success, #3aa76d);
 }
 :host .detail-container {
   display: flex;
@@ -291,6 +312,29 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   width: 100%;
 }
 
+:host([type=hotzone]) yoo-icon[name=gps] {
+  margin: var(--spacing-08, 0.5rem) auto;
+  cursor: move;
+}
+
+:host(.modal-view) {
+  max-width: inherit;
+}
+
+:host([readonly]) {
+  position: relative;
+  margin: inherit;
+}
+:host([readonly]) yoo-icon[name=gps] {
+  position: absolute;
+  margin: 0;
+  cursor: auto;
+}
+:host([readonly]) .image .inner-container div.hotzone {
+  display: flex;
+  cursor: auto;
+}
+
 :host([animated]) .image-container {
   --image-index: 0;
   transform: translateY(100vh);

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

@@ -0,0 +1,423 @@
+import { closeModal, Draggable, getMedia, gsapTo, isPointInsidePlan, isWeb, parseMarkDown, replaceAllLinks, showModal, translate, translateMulti } from '@shared/utils';
+import { Component, Element, Event, forceUpdate, h, Host, Prop, State, Watch } from '@stencil/core';
+import { getFromOfflineStorage } from '../../../utils/cache/localForage';
+import { calcCoordPercentage, isElementInsideContainer } from '../../../utils/helpers/annotations-helpers';
+export class YooFormHotzonesComponent {
+  constructor() {
+    this.hotzones = [];
+    this.animated = true;
+    this.validity = false;
+    this.hotzoneRevealed = 0;
+    this.flipImage = false;
+  }
+  async onImageChanged() {
+    this.imageSrc = await this.getImageSrc();
+    this.flipImage = !!this.imageSrc;
+    !this.imageSrc && forceUpdate(this);
+    this.init();
+  }
+  onIsVisibleChanged() {
+    if (this.isVisible) {
+      this.flipImage = true;
+      this.init();
+    }
+  }
+  onValidityChanged() {
+    this.validityChanged.emit(this.validity);
+  }
+  get isHotZones() {
+    return this.type === 'hotzone';
+  }
+  async componentWillLoad() {
+    this.imageSrc = await this.getImageSrc();
+    this.flipImage = !!this.imageSrc;
+  }
+  componentDidLoad() {
+    this.init();
+  }
+  init() {
+    this.flipImage && setTimeout(() => {
+      this.initTarget();
+      this.flipImage = false;
+    }, 500);
+  }
+  initTarget() {
+    const dragEndAction = async () => {
+      const containerBound = this.imageElement.getBoundingClientRect();
+      if (!isElementInsideContainer(this.targetElement.getBoundingClientRect(), containerBound, this.targetElement.clientWidth / 2)) {
+        this.validity = false;
+        this.value = null;
+        gsapTo(this.targetElement, .25, { x: 0, y: 0 });
+      }
+      else {
+        const getTargetPosition = (axis) => calcCoordPercentage(containerBound, this.targetElement, axis);
+        this.validity = true;
+        this.value = {
+          x: getTargetPosition('x'),
+          y: getTargetPosition('y')
+        };
+        if (!this.livePreview) {
+          this.inputChanged.emit(this.value);
+        }
+      }
+    };
+    return this.targetElement && !this.readonly && new Draggable(this.targetElement, {
+      bound: this.imageElement,
+      cursor: 'grab',
+      zIndexBoost: false,
+      onDragEnd: () => dragEndAction()
+    });
+  }
+  async getImageSrc() {
+    return getMedia((await getFromOfflineStorage(this.image)), { forceCookieUrlParam: true });
+  }
+  hotzoneClicked(hotzone, index) {
+    showModal('yoo-form-hotzones', { detailedView: true, selectedHotspot: hotzone }, 'bg-dark-40', 'scaleEnterAnimation', 'scaleLeaveAnimation', true).then(() => {
+      if (!this.hotzones[index].revealed) {
+        this.hotzoneRevealed += 1;
+        this.hotzones[index].revealed = true;
+        this.validity = this.hotzoneRevealed === this.hotzones.length;
+      }
+    });
+  }
+  renderHotspots() {
+    var _a;
+    return (_a = this.hotzones) === null || _a === void 0 ? void 0 : _a.map((hotzone, i) => {
+      return h("div", { class: {
+          hotzone: true,
+          revealed: !!hotzone.revealed,
+          hidden: !this.readonly && this.isHotZones
+        }, style: {
+          ...hotzone.style,
+          ...(!hotzone.revealed && !this.readonly && {
+            backgroundColor: this.hotzonesColor + '66',
+            borderColor: this.hotzonesColor
+          })
+        }, onClick: () => !this.isHotZones && this.hotzoneClicked(hotzone, i) });
+    });
+  }
+  renderDetailedView() {
+    return [
+      h("yoo-navbar", { class: "transparent" },
+        h("yoo-icon", { slot: "start", name: "close", onClick: () => closeModal(null) })),
+      h("div", { class: "detail-container" },
+        h("yoo-img", { src: this.selectedHotspot.image, contained: true, type: "background" }),
+        h("div", { class: "detail-description", innerHTML: replaceAllLinks(parseMarkDown(translateMulti(this.selectedHotspot.description)), true) }),
+        h("div", { class: "button" },
+          h("yoo-button", { onClick: () => closeModal(null), color: "app-color", size: isWeb(this.host) ? 'medium' : 'large' }, translate('YOOBICDONE'))))
+    ];
+  }
+  renderTarget() {
+    var _a;
+    return this.isHotZones && !!this.imageSrc && h("yoo-icon", { name: "gps", size: "extra-large", style: {
+        ...(!this.readonly && { fill: this.hotzonesColor }),
+        ...(this.value && {
+          left: `${this.value.x}%`,
+          top: `${this.value.y}%`
+        })
+      }, ...(this.readonly ? {
+        color: ((_a = this.hotzones) === null || _a === void 0 ? void 0 : _a.some(({ style }) => {
+          const { left, top, width, height } = style || {};
+          return isPointInsidePlan({
+            x: parseFloat(left),
+            y: parseFloat(top),
+            width: parseFloat(width),
+            height: parseFloat(height)
+          }, this.value);
+        })) ? 'success' : 'danger'
+      } : !this.hotzonesColor && {
+        color: 'app-color'
+      }), ref: (el) => (this.targetElement = el) });
+  }
+  renderImage() {
+    return !!this.imageSrc && h("section", { class: {
+        image: true,
+        flipped: this.animated && !!this.flipImage && !this.readonly
+      } },
+      h("div", { class: "inner-container" },
+        h("section", { class: "flip-box-front" },
+          h("yoo-img", { allowCloudinary: false, ref: e => this.imageElement = e, contained: true, src: this.imageSrc }),
+          this.renderHotspots()),
+        h("section", { class: "flip-box-back" })));
+  }
+  render() {
+    return (h(Host, { class: { web: isWeb(this.host) && !this.livePreview, 'swiper-no-swiping': true } }, this.detailedView ? this.renderDetailedView() : [this.renderImage(), this.renderTarget()]));
+  }
+  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 {
+    "image": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "image",
+      "reflect": false
+    },
+    "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": "[]"
+    },
+    "hotzonesColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "hotzones-color",
+      "reflect": false
+    },
+    "isVisible": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "is-visible",
+      "reflect": false
+    },
+    "livePreview": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "live-preview",
+      "reflect": false
+    },
+    "readonly": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "readonly",
+      "reflect": true
+    },
+    "animated": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "animated",
+      "reflect": true,
+      "defaultValue": "true"
+    },
+    "value": {
+      "type": "unknown",
+      "mutable": true,
+      "complexType": {
+        "original": "IXYPoint",
+        "resolved": "IXYPoint",
+        "references": {
+          "IXYPoint": {
+            "location": "import",
+            "path": "@shared/interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    },
+    "selectedHotspot": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "IHotzone",
+        "resolved": "IHotzone",
+        "references": {
+          "IHotzone": {
+            "location": "import",
+            "path": "@shared/interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    },
+    "type": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'imagemap' | 'hotzone'",
+        "resolved": "\"hotzone\" | \"imagemap\"",
+        "references": {}
+      },
+      "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": "validity",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "hotzoneRevealed": {},
+    "flipImage": {}
+  }; }
+  static get events() { return [{
+      "method": "validityChanged",
+      "name": "validityChanged",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      }
+    }, {
+      "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 elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "image",
+      "methodName": "onImageChanged"
+    }, {
+      "propName": "isVisible",
+      "methodName": "onIsVisibleChanged"
+    }, {
+      "propName": "validity",
+      "methodName": "onValidityChanged"
+    }]; }
+}

package/dist/collection/components/form/{form-hotzone-creator/form-hotzone-creator.css → form-hotzones-creator/form-hotzones-creator.css}

@@ -218,62 +218,64 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   --color-foreground: 255, 255, 255;
 }
 
-:host .title {
+:host h2 {
   font-weight: var(--font-weight-400, 400);
   font-size: var(--font-size-12, 0.75rem);
   text-transform: uppercase;
 }
-:host .container {
+:host hr {
+  border: solid var(--border-width-01, 0.0625rem) var(--stable-light, #f1f1f1);
+}
+:host header {
   display: flex;
-  justify-content: space-between;
+  gap: var(--spacing-16, 1rem);
+  justify-content: start;
 }
-:host .container .optional {
+:host header div {
+  display: flex;
+  gap: var(--spacing-08, 0.5rem);
+  align-items: center;
+}
+:host header .optional {
   padding-left: var(--spacing-04, 0.25rem);
   color: var(--text-color, #807f83);
 }
-:host .preview-container {
+:host main {
+  margin: 0;
+}
+:host main #preview {
   position: relative;
   height: 25rem;
-  border: solid var(--border-width-01, 0.0625rem) var(--stable-alt, #d0d0d0);
 }
-:host .preview-container .PinturaRoot {
+:host main #preview .PinturaRoot {
   position: absolute;
   background-color: var(--light, #ffffff);
 }
-:host .preview-container .PinturaRoot .PinturaUtilMain {
+:host main #preview .PinturaRoot .PinturaUtilMain {
   padding: 0;
 }
-:host .preview-container .PinturaRoot .PinturaUtilFooter {
+:host main #preview .PinturaRoot .PinturaUtilFooter {
   display: none;
 }
-:host .editor-header {
+:host main #add-hotzone-header {
   display: flex;
+  align-items: center;
   justify-content: space-between;
-  margin-top: var(--spacing-16, 1rem);
-  margin-bottom: var(--spacing-16, 1rem);
-  overflow: hidden;
+  padding-top: var(--spacing-16, 1rem);
 }
-:host .editor-header yoo-button {
-  margin: auto 0;
-}
-:host .collapsible-container {
+:host main #collapsible-content {
   display: flex;
+  gap: var(--spacing-16, 1rem);
   justify-content: space-between;
   width: 100%;
 }
-:host .collapsible-container .image-container {
-  padding-right: var(--spacing-16, 1rem);
-}
-:host .collapsible-container .description-container {
+:host main #collapsible-content .description-container {
   width: 100%;
 }
-:host .collapsible-container .description-container .description-header {
+:host main #collapsible-content .description-container header {
   display: flex;
   justify-content: space-between;
 }
-:host .collapsible-container .description-container .description-header yoo-tooltip {
+:host main #collapsible-content .description-container header yoo-tooltip {
   margin: auto 0;
-}
-:host .divider {
-  border-bottom: solid var(--border-width-01, 0.0625rem) var(--stable-light, #f1f1f1);
 }