@yoobic/yobi 8.4.0-2 → 8.4.0-3

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

@@ -201,62 +201,50 @@ 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 {
   --hotzones-color: unset;
-  --inner-max-width: 100%;
+  display: block;
 }
 :host yoo-banner {
   height: 0;
 }
 :host main {
-  position: relative;
-  max-width: var(--inner-max-width);
-  height: max-content;
+  width: 100%;
   margin: 0 auto;
 }
-:host main .image {
-  margin: 0 auto;
+:host main #image,
+:host main #inner-container,
+:host main #recto, :host main #verso {
+  width: 100%;
+  height: 100%;
+}
+:host main #image {
   background-color: transparent;
   perspective: 1000px;
 }
-:host main .image.flipped .inner-container {
+:host main #image.flipped #inner-container {
   transform: rotateY(180deg);
 }
-:host main .image .inner-container {
-  width: 100%;
-  height: 100%;
-  margin: 0 auto;
+:host main #image #inner-container {
   transform-style: preserve-3d;
   transition: transform 0.8s;
 }
-:host main .image .inner-container .flip-box-front,
-:host main .image .inner-container .flip-box-back {
-  width: 100%;
-  height: fit-content;
+:host main #image #inner-container #recto,
+:host main #image #inner-container #verso {
   background-color: var(--light, #ffffff);
   backface-visibility: hidden;
 }
-:host main .image .inner-container .flip-box-back {
+:host main #image #inner-container #recto {
+  position: relative;
+}
+:host main #image #inner-container #verso {
   z-index: 1;
   transform: rotateY(180deg);
 }
-:host main .image .inner-container yoo-img {
-  position: relative;
+:host main #image #inner-container yoo-img {
   border-radius: var(--border-radius-08, 0.5rem);
 }
-:host main .image .inner-container .hotzone {
+:host main #image #inner-container .hotzone {
   position: absolute;
   display: flex;
   align-items: center;
@@ -269,7 +257,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   cursor: pointer;
   transition: background-color 250ms ease-in-out;
 }
-:host main .image .inner-container .hotzone.revealed {
+:host main #image #inner-container .hotzone.revealed {
   background-color: var(--success-20, rgba(58, 167, 109, 0.2)) !important;
   border-color: var(--success, #3aa76d) !important;
 }
@@ -278,10 +266,15 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   background: transparent !important;
 }
 :host([detailed-view]) main {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  max-width: 30rem;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  width: 100%;
+  height: 100%;
+  margin: 0 auto;
+  overflow: hidden;
+}
+:host([detailed-view]) main #content {
+  max-width: 75%;
   margin: 0 auto;
   overflow: hidden auto;
 }
@@ -297,26 +290,16 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host([detailed-view]) main #content #description p {
   padding-bottom: var(--spacing-64, 4rem);
 }
-:host([detailed-view]) main #description,
-:host([detailed-view]) main yoo-img {
-  padding: 0 var(--spacing-32, 2rem);
-}
-:host([detailed-view]) main #done {
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  display: flex;
-  align-items: center;
-  width: 100%;
-  transform: translateX(-50%);
+:host([detailed-view]) main footer {
+  padding: var(--spacing-16, 1rem) 0;
 }
-:host([detailed-view]) main #done yoo-button {
-  width: 50%;
-  margin: var(--spacing-16, 1rem) auto;
+:host([detailed-view]) main footer yoo-button {
+  width: fit-content;
+  margin: 0 auto;
 }
 
 :host([type=hotzone]) {
-  --initial-target-top-pos: calc(100% + var(--spacing-16, 1rem));
+  --initial-target-top-pos: calc(100% + var(--spacing-08, 0.5rem));
   --initial-target-left-pos: calc(50% - var(--spacing-24, 1.5rem));
 }
 :host([type=hotzone]) yoo-icon[name=gps] {
@@ -326,10 +309,25 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   cursor: move;
 }
 
+:host([type=hotzone]:not([readonly])) main::after {
+  display: block;
+  height: 3rem;
+  content: "";
+}
+:host([type=hotzone]:not([readonly])) main .hotzone[hidden] {
+  display: none !important;
+}
+:host([type=hotzone]:not([readonly])) main yoo-icon {
+  transition: opacity 0.5s ease-in-out;
+}
+:host([type=hotzone]:not([readonly])) main yoo-icon[hit=false] {
+  opacity: 0.25;
+}
+
 :host([readonly]) yoo-icon[name=gps] {
   cursor: auto;
 }
-:host([readonly]) .image .inner-container div.hotzone {
+:host([readonly]) #image #inner-container div.hotzone {
   display: flex;
   cursor: auto;
 }

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);
   }
 }