@yoobic/yobi 8.4.0-1 → 8.4.0-4

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

@@ -1,10 +1,9 @@
 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 { Component, Element, Event, forceUpdate, h, Host, Method, Prop, State, Watch } from '@stencil/core';
 import { isEqual } from 'lodash-es';
 import { getFromOfflineStorage } from '../../../utils/cache/localForage';
-import { calcCoordPercentage, isElementInsideContainer } from '../../../utils/helpers/annotations-helpers';
-import { getAppContext } from '../../../utils/helpers/common-helpers';
-import { showWarningBanner } from '../../../utils/helpers/draggable-tags-helpers';
+import { calcCoordPercentage } from '../../../utils/helpers/annotations-helpers';
+import { prepareAutoScroll, showWarningBanner } from '../../../utils/helpers/draggable-tags-helpers';
 import { setValueAndValidateInput } from '../../../utils/helpers/form-input-helpers';
 export class YooFormHotzonesComponent {
   constructor() {
@@ -18,15 +17,14 @@ export class YooFormHotzonesComponent {
     this.isHotZones && this.validate();
   }
   async onImageChanged() {
-    this.imageSrc = await this.getImageSrc();
-    this.flipImage = !!this.imageSrc;
+    await this.prepareImage();
     this.flipImage && this.resetTarget();
     !this.imageSrc && forceUpdate(this);
     this.init();
   }
-  onHotzonesChanged(nv, ov) {
+  onHotzonesChanged(newValues, oldValues) {
     showWarningBanner(this.host, !this.isHotZones && this.hotzones.some(({ description, image }) => !(description || image)), 'NOEMPTYVALUES');
-    !isEqual(nv, ov) && this.resetTarget();
+    !isEqual(newValues, oldValues) && this.resetTarget();
   }
   onIsVisibleChanged() {
     if (this.isVisible) {
@@ -34,6 +32,9 @@ export class YooFormHotzonesComponent {
       this.init();
     }
   }
+  async isValid() {
+    return this.validity;
+  }
   validate() {
     var _a, _b, _c, _d;
     this.validity =
@@ -48,17 +49,21 @@ export class YooFormHotzonesComponent {
     return this.type === 'hotzone';
   }
   async componentWillLoad() {
-    this.imageSrc = await this.getImageSrc();
-    this.flipImage = !!this.imageSrc;
+    await this.prepareImage();
   }
   componentDidLoad() {
     this.init();
   }
+  async prepareImage() {
+    this.imageSrc = await getMedia(await getFromOfflineStorage(this.image), { forceCookieUrlParam: true });
+    this.flipImage = !!this.imageSrc;
+  }
   init() {
     this.flipImage &&
-      setTimeout(() => {
+      setTimeout(async () => {
+        prepareAutoScroll(this.host);
         this.initDraggableTarget();
-        this.hotzones.forEach((hotzone) => (hotzone.revealed = false));
+        this.hotzones.forEach((hotzone) => hotzone.revealed = false);
         this.flipImage = false;
       }, 500);
   }
@@ -73,13 +78,19 @@ export class YooFormHotzonesComponent {
     }
   }
   initDraggableTarget() {
-    const dragEndAction = async () => {
-      const containerBound = this.imageElement.getBoundingClientRect();
-      if (!isElementInsideContainer(this.targetElement.getBoundingClientRect(), containerBound, this.targetElement.clientWidth / 2, 'center')) {
+    let draggable;
+    const imgElement = this.boundElement.querySelector('yoo-img');
+    const onDrag = () => {
+      const isHit = draggable.hitTest(imgElement, '50%');
+      this.targetElement.setAttribute('hit', isHit);
+    };
+    const onRelease = async () => {
+      if (this.targetElement.getAttribute('hit') === 'false') {
+        this.targetElement.removeAttribute('hit');
         this.resetTarget();
       }
       else {
-        const getTargetCenterPosition = (axis) => calcCoordPercentage(containerBound, this.targetElement, axis);
+        const getTargetCenterPosition = (axis) => calcCoordPercentage(imgElement.getBoundingClientRect(), this.targetElement, axis);
         this.value = {
           x: getTargetCenterPosition('x'),
           y: getTargetCenterPosition('y')
@@ -88,18 +99,17 @@ export class YooFormHotzonesComponent {
       }
     };
     if (this.targetElement && !this.readonly) {
-      return new Draggable(this.targetElement, {
+      draggable = new Draggable(this.targetElement, {
         type: 'top, left',
-        bound: this.imageElement,
+        autoScroll: 1,
+        bound: this.boundElement,
         cursor: 'grab',
         zIndexBoost: false,
-        onDragEnd: () => dragEndAction()
+        onDrag,
+        onRelease
       });
     }
   }
-  async getImageSrc() {
-    return getMedia(await getFromOfflineStorage(this.image), { forceCookieUrlParam: true });
-  }
   async showZoneDetails(hotzone) {
     const { description, image } = hotzone || {};
     if (description || image) {
@@ -116,7 +126,7 @@ export class YooFormHotzonesComponent {
       const { style, revealed, description, image } = hotzone || {};
       const { x, y } = style || {};
       const isValid = this.isHotZones || !!(description || image);
-      return (isValid && (h("div", { class: { hotzone: true, revealed, hidden: !this.readonly && this.isHotZones }, style: {
+      return (isValid && (h("div", { class: { hotzone: true, revealed }, hidden: !this.readonly && this.isHotZones, style: {
           left: x,
           top: y,
           ...hotzone.style,
@@ -133,12 +143,10 @@ export class YooFormHotzonesComponent {
     return [
       h("yoo-navbar", { class: "transparent" },
         h("yoo-icon", { slot: "start", name: "close", onClick: () => closeModal(null) })),
-      h("main", null,
-        h("section", { id: "content" },
+      [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("section", { id: "done" },
-          h("yoo-button", { onClick: () => closeModal(null), color: "app-color", size: isWeb(this.host) ? 'medium' : 'large' }, translate('YOOBICDONE'))))
+          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')))]
     ];
   }
   renderTarget() {
@@ -166,25 +174,26 @@ export class YooFormHotzonesComponent {
         }
         : !this.hotzonesColor && {
           color: 'app-color'
-        }), ref: (el) => (this.targetElement = el) })));
+        }), 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.renderZones()),
-        h("section", { class: "flip-box-back" })))));
+    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" }));
   }
   renderMain() {
-    return h("main", null, this.detailedView ? this.renderDetailedView() : [this.renderImage(), this.renderTarget()]);
+    return h("main", null, this.detailedView ? this.renderDetailedView() : [this.renderImage()]);
   }
   render() {
-    return (h(Host, { class: { 'swiper-no-swiping': true, ...getAppContext(this.host) } },
+    return (h(Host, { class: "swiper-no-swiping" },
       this.renderBanner(),
       this.renderMain()));
   }
@@ -197,7 +206,7 @@ export class YooFormHotzonesComponent {
     "$": ["form-hotzones.css"]
   }; }
   static get properties() { return {
-    "livePreview": {
+    "animated": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -211,45 +220,9 @@ export class YooFormHotzonesComponent {
         "tags": [],
         "text": ""
       },
-      "attribute": "live-preview",
-      "reflect": false
-    },
-    "selectedHotzone": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "IHotzone",
-        "resolved": "IHotzone",
-        "references": {
-          "IHotzone": {
-            "location": "import",
-            "path": "@shared/interfaces"
-          }
-        }
-      },
-      "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": "animated",
+      "reflect": true,
+      "defaultValue": "true"
     },
     "readonly": {
       "type": "boolean",
@@ -268,7 +241,7 @@ export class YooFormHotzonesComponent {
       "attribute": "readonly",
       "reflect": true
     },
-    "animated": {
+    "livePreview": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -282,9 +255,8 @@ export class YooFormHotzonesComponent {
         "tags": [],
         "text": ""
       },
-      "attribute": "animated",
-      "reflect": true,
-      "defaultValue": "true"
+      "attribute": "live-preview",
+      "reflect": true
     },
     "type": {
       "type": "string",
@@ -356,6 +328,43 @@ export class YooFormHotzonesComponent {
       "reflect": false,
       "defaultValue": "false"
     },
+    "selectedHotzone": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "IHotzone",
+        "resolved": "IHotzone",
+        "references": {
+          "IHotzone": {
+            "location": "import",
+            "path": "@shared/interfaces"
+          }
+        }
+      },
+      "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
+    },
     "value": {
       "type": "unknown",
       "mutable": true,
@@ -471,6 +480,24 @@ export class YooFormHotzonesComponent {
         }
       }
     }]; }
+  static get methods() { return {
+    "isValid": {
+      "complexType": {
+        "signature": "() => Promise<boolean>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
   static get elementRef() { return "host"; }
   static get watchers() { return [{
       "propName": "value",

package/dist/collection/components/form/form-image-collection/form-image-collection.css

@@ -216,11 +216,19 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   position: relative;
   cursor: pointer;
 }
+:host #gallery .image.revealed yoo-img {
+  opacity: 0.35;
+}
+:host #gallery .image.revealed yoo-icon {
+  transform: scale(1);
+  opacity: 1;
+}
 :host #gallery .image yoo-img {
   background-position: center;
   background-size: cover;
   border-radius: var(--border-radius-08, 0.5rem);
   box-shadow: var(--shadow-01, 0 0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.1));
+  transition: opacity 0.75s ease-in-out;
 }
 :host #gallery .image yoo-img:before {
   display: block;
@@ -236,6 +244,9 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   z-index: 3;
   background: var(--light, #ffffff);
   border-radius: 50%;
+  transform: scale(0);
+  opacity: 0;
+  transition: all 0.5s ease-in-out;
 }
 :host #gallery .image #overlay {
   position: absolute;
@@ -246,17 +257,17 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   background: var(--stable-60, rgba(173, 173, 173, 0.6));
   border-radius: var(--border-radius-08, 0.5rem);
 }
-:host .main-container {
+:host main {
   display: flex;
   flex-direction: column;
   margin: var(--spacing-32, 2rem) var(--spacing-16, 1rem);
 }
-:host .main-container .detail-description {
+:host main #description {
   padding: var(--spacing-24, 1.5rem) var(--spacing-16, 1rem);
   color: var(--light, #ffffff);
   text-align: center;
 }
-:host .main-container yoo-img:before {
+:host main yoo-img:before {
   display: block;
   width: 0;
   height: 0;
@@ -268,15 +279,15 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   grid-template-columns: repeat(3, minmax(0, 1fr));
   max-width: 82rem;
 }
-:host(.web) .main-container {
+:host(.web) main {
   width: 40%;
   max-width: 37.5rem;
   margin: var(--spacing-32, 2rem) auto;
 }
-:host(.web) .main-container .detail-description {
+:host(.web) main #description {
   padding: var(--spacing-32, 2rem) 0;
 }
-:host(.web) .main-container .button {
+:host(.web) main #done {
   margin: auto;
   padding: var(--spacing-16, 1rem);
 }
@@ -286,33 +297,33 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   background: transparent !important;
 }
 
-:host(:not(.web)) .main-container {
+:host(:not(.web)) main {
   height: 100%;
   overflow: auto;
 }
-:host(:not(.web)) .button {
+:host(:not(.web)) #done {
   display: flex;
   align-items: flex-end;
   height: 100%;
 }
-:host(:not(.web)) .button yoo-button {
+:host(:not(.web)) #done yoo-button {
   width: 100%;
 }
 
 :host([animated]) .image {
   --image-index: 0;
-  transform: translateY(100vh);
-  animation-name: slide-up;
+  transform: scale(0);
+  animation-name: scale;
   animation-duration: 0.75s;
   animation-timing-function: var(--ease-out-quad);
   animation-delay: calc(0.5s + var(--image-index) * 0.1s);
   animation-fill-mode: forwards;
 }
-@keyframes slide-up {
+@keyframes scale {
   from {
-    transform: translateY(100vh);
+    transform: scale(0);
   }
   to {
-    transform: translateY(0);
+    transform: scale(1);
   }
 }

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

@@ -1,21 +1,23 @@
 import { closeModal, getMedia, isWeb, parseMarkDown, replaceAllLinks, showModal, translate, translateMulti } from '@shared/utils';
-import { Component, Element, Event, h, Host, Prop, State, Watch } from '@stencil/core';
+import { Component, Element, Event, forceUpdate, h, Host, Method, Prop, State, Watch } from '@stencil/core';
 import { getFromOfflineStorage } from '../../../utils/cache';
 import { openImageDetailFromRTE } from '../../../utils/helpers/common-helpers';
 export class YooFormImageCollectionComponent {
   constructor() {
-    this.animated = true;
-    this.required = false;
     this.validity = false;
     this.values = [];
-    this.imagesRevealed = 0;
     this.images = [];
   }
   async onValuesChanged() {
     await this.prepareImages();
   }
+  async isValid() {
+    return this.validity;
+  }
   validate() {
-    this.validity = !this.required || this.imagesRevealed === this.values.length;
+    var _a, _b, _c, _d;
+    this.validity = !this.required ||
+      ((_b = (_a = this.images) === null || _a === void 0 ? void 0 : _a.filter(({ revealed }) => revealed)) === null || _b === void 0 ? void 0 : _b.length) === ((_d = (_c = this.images) === null || _c === void 0 ? void 0 : _c.filter(({ description, image }) => description || image)) === null || _d === void 0 ? void 0 : _d.length);
     this.validityChanged.emit(this.validity);
     return this.validity;
   }
@@ -28,32 +30,35 @@ export class YooFormImageCollectionComponent {
       this.images = await Promise.all(this.values.map(async (v) => ({ ...v, image: await getFromOfflineStorage(v.image) })));
     }
   }
-  async imageClicked(imagePair, index) {
-    await showModal('yoo-form-image-collection', { detailedView: true, selectedPair: imagePair }, 'bg-dark-40', 'scaleEnterAnimation', 'scaleLeaveAnimation', true);
-    if (!this.images[index].revealed) {
-      this.imagesRevealed += 1;
-      this.images[index].revealed = true;
-      this.validate();
-      this.inputChanged.emit();
+  async showZoneDetails(tile) {
+    const { description, image } = tile || {};
+    if (description || image) {
+      await showModal('yoo-form-image-collection', { detailedView: true, selectedTile: tile }, 'bg-dark-40', 'scaleEnterAnimation', 'scaleLeaveAnimation', true);
+      tile.revealed = true;
     }
+    this.validate();
+    this.inputChanged.emit();
+    (!this.validity || !this.required) && forceUpdate(this);
   }
   renderImages() {
     var _a;
-    return (h("section", { id: "gallery" }, (_a = this.images) === null || _a === void 0 ? void 0 : _a.map(({ revealed, image, description }, i) => {
-      return (h("section", { class: "image", ...(this.animated && { style: { '--image-index': i.toString() } }), onClick: () => this.imageClicked({ revealed, image, description }, i) },
+    return (h("section", { id: "gallery" }, (_a = this.images) === null || _a === void 0 ? void 0 : _a.map((tile, i) => {
+      const { revealed, image } = tile || {};
+      return (h("section", { class: { image: true, revealed }, ...(this.animated && { style: { '--image-index': i.toString() } }), onClick: () => this.showZoneDetails(tile) },
         h("yoo-img", { src: getMedia(image), type: "background" }),
-        revealed && [h("yoo-icon", { name: "check", color: "app-color", size: "medium" }), h("div", { id: "overlay" })]));
+        h("yoo-icon", { name: "check", color: "app-color", size: "medium" })));
     })));
   }
   renderDetailedView() {
-    var _a, _b;
+    const { description, image } = this.selectedTile || {};
     return [
       h("yoo-navbar", { class: "transparent" },
         h("yoo-icon", { slot: "start", name: "close", onClick: () => closeModal(null) })),
-      h("div", { class: "main-container" },
-        h("yoo-img", { src: (_a = this.selectedPair) === null || _a === void 0 ? void 0 : _a.image, contained: true, type: "background" }),
-        h("div", { ref: (el) => (this.detailDescription = el), onClick: (ev) => { var _a; return openImageDetailFromRTE(this.host, this.detailDescription, (_a = ev === null || ev === void 0 ? void 0 : ev.target) === null || _a === void 0 ? void 0 : _a['src']); }, class: "detail-description", innerHTML: replaceAllLinks(parseMarkDown(translateMulti((_b = this.selectedPair) === null || _b === void 0 ? void 0 : _b.description)), true) }),
-        h("div", { class: "button" },
+      h("main", null,
+        h("section", { id: "content" },
+          image && h("yoo-img", { src: image, contained: true, type: "background" }),
+          description && h("div", { id: "description", onClick: ({ target }) => openImageDetailFromRTE(this.host, target, target === null || target === void 0 ? void 0 : target['src']), innerHTML: replaceAllLinks(parseMarkDown(translateMulti(description)), true) })),
+        h("section", { id: "done" },
           h("yoo-button", { onClick: () => closeModal(null), color: "app-color", size: isWeb(this.host) ? 'medium' : 'large' }, translate('YOOBICDONE'))))
     ];
   }
@@ -84,8 +89,7 @@ export class YooFormImageCollectionComponent {
         "text": ""
       },
       "attribute": "animated",
-      "reflect": true,
-      "defaultValue": "true"
+      "reflect": true
     },
     "detailedView": {
       "type": "boolean",
@@ -119,8 +123,7 @@ export class YooFormImageCollectionComponent {
         "text": ""
       },
       "attribute": "required",
-      "reflect": true,
-      "defaultValue": "false"
+      "reflect": true
     },
     "livePreview": {
       "type": "boolean",
@@ -137,9 +140,27 @@ export class YooFormImageCollectionComponent {
         "text": ""
       },
       "attribute": "live-preview",
-      "reflect": false
+      "reflect": true
     },
-    "selectedPair": {
+    "validity": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "validity",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "selectedTile": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
@@ -159,24 +180,6 @@ export class YooFormImageCollectionComponent {
         "text": ""
       }
     },
-    "validity": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "validity",
-      "reflect": false,
-      "defaultValue": "false"
-    },
     "values": {
       "type": "unknown",
       "mutable": true,
@@ -200,7 +203,6 @@ export class YooFormImageCollectionComponent {
     }
   }; }
   static get states() { return {
-    "imagesRevealed": {},
     "images": {}
   }; }
   static get events() { return [{
@@ -234,6 +236,24 @@ export class YooFormImageCollectionComponent {
         "references": {}
       }
     }]; }
+  static get methods() { return {
+    "isValid": {
+      "complexType": {
+        "signature": "() => Promise<boolean>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
   static get elementRef() { return "host"; }
   static get watchers() { return [{
       "propName": "values",