@yoobic/yobi 8.2.0-29 → 8.2.0-31

package/dist/design-system/yoo-form-hotzones.entry.js

@@ -3,6 +3,7 @@ import { aK as gsapTo, aJ as Draggable, bb as getMedia, n as showModal, I as clo
 import { g as getFromOfflineStorage } from './localForage-ff5caa60.js';
 import { a as isElementInsideContainer, c as calcCoordPercentage } from './annotations-helpers-06bdd868.js';
 import { b as getAppContext } from './common-helpers-7760f0f6.js';
+import { s as showWarningAlert } from './draggable-tags-helpers-aa182ebb.js';
 import { a as setValueAndValidateInput } from './form-input-helpers-21c08c10.js';
 import './lodash-b0ad17f3.js';
 import './_commonjsHelpers-f4d11124.js';
@@ -26,6 +27,9 @@ const YooFormHotzonesComponent = class {
     !this.imageSrc && forceUpdate(this);
     this.init();
   }
+  onHotzonesChanged() {
+    showWarningAlert(this.host, !!this.hotzones.find(({ description, image }) => !(description || image)), 'NOEMPTYVALUES');
+  }
   onIsVisibleChanged() {
     if (this.isVisible) {
       this.flipImage = true;
@@ -91,27 +95,26 @@ const YooFormHotzonesComponent = class {
     return getMedia((await getFromOfflineStorage(this.image)), { forceCookieUrlParam: true });
   }
   async showZoneDetails(hotzone) {
+    var _a, _b, _c, _d;
     const { description, image } = hotzone || {};
     if (description || image) {
       await showModal('yoo-form-hotzones', { detailedView: true, selectedHotspot: hotzone }, 'bg-dark-40', 'scaleEnterAnimation', 'scaleLeaveAnimation', true);
       hotzone.revealed = true;
-      this.validity = this.hotzones.filter(h => h.revealed).length === this.hotzones.length;
-      !this.validity && forceUpdate(this);
     }
+    this.validity = ((_b = (_a = this.hotzones) === null || _a === void 0 ? void 0 : _a.filter(({ revealed }) => revealed)) === null || _b === void 0 ? void 0 : _b.length) === ((_d = (_c = this.hotzones) === null || _c === void 0 ? void 0 : _c.filter(({ description, image }) => description || image)) === null || _d === void 0 ? void 0 : _d.length);
+    !this.validity && forceUpdate(this);
   }
   renderZones() {
     var _a;
     return (_a = this.hotzones) === null || _a === void 0 ? void 0 : _a.map(hotzone => {
-      const { x, y } = hotzone.style || {};
-      return h("div", { class: {
-          hotzone: true,
-          revealed: hotzone.revealed,
-          hidden: !this.readonly && this.isHotZones
-        }, style: {
+      const { style, revealed, description, image } = hotzone || {};
+      const { x, y } = style || {};
+      const isValid = !!(description || image);
+      return isValid && h("div", { class: { hotzone: true, revealed, hidden: !this.readonly && this.isHotZones }, style: {
           left: x,
           top: y,
           ...hotzone.style,
-          ...(!hotzone.revealed && !this.readonly && {
+          ...(!revealed && !this.readonly && {
             backgroundColor: this.hotzonesColor + '66',
             borderColor: this.hotzonesColor
           })
@@ -153,12 +156,16 @@ const YooFormHotzonesComponent = class {
         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" })));
   }
+  renderBanner() {
+    return this.livePreview && h("yoo-banner", null, h("p", { slot: "content" }));
+  }
   render() {
-    return (h(Host, { class: { 'swiper-no-swiping': true, ...getAppContext(this.host) } }, this.detailedView ? this.renderDetailedView() : [this.renderImage(), this.renderTarget()]));
+    return (h(Host, { class: { 'swiper-no-swiping': true, ...getAppContext(this.host) } }, this.renderBanner(), this.detailedView ? this.renderDetailedView() : [this.renderImage(), this.renderTarget()]));
   }
   get host() { return getElement(this); }
   static get watchers() { return {
     "image": ["onImageChanged"],
+    "hotzones": ["onHotzonesChanged"],
     "isVisible": ["onIsVisibleChanged"],
     "validity": ["onValidityChanged"],
     "flipImage": ["onFlipImageChanged"]

package/dist/design-system/yoo-form-image-collection.entry.js

@@ -7,7 +7,7 @@ import './lodash-b0ad17f3.js';
 import './_commonjsHelpers-f4d11124.js';
 import './index-da54e081.js';
 
-const formImageCollectionCss = ":host{width:100%}:host #gallery{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));margin:0 auto;-webkit-column-gap:var(--spacing-16, 1rem);-moz-column-gap:var(--spacing-16, 1rem);column-gap:var(--spacing-16, 1rem);row-gap:var(--spacing-16, 1rem)}:host #gallery .image{position:relative;cursor:pointer}:host #gallery .image yoo-img{background-position:center;background-size:cover;border-radius:var(--border-radius-08, 0.5rem);-webkit-box-shadow:var(--shadow-01, 0 0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.1));box-shadow:var(--shadow-01, 0 0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.1))}:host #gallery .image yoo-img:before{display:block;width:0;height:0;padding-bottom:75%;content:\"\"}:host #gallery .image yoo-icon{position:absolute;top:var(--spacing-08, 0.5rem);right:var(--spacing-08, 0.5rem);z-index:3;background:var(--light, #ffffff);border-radius:50%}:host #gallery .image #overlay{position:absolute;top:0;z-index:2;width:100%;height:100%;background:var(--stable-60, rgba(173, 173, 173, 0.6));border-radius:var(--border-radius-08, 0.5rem)}:host .main-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:var(--spacing-32, 2rem) var(--spacing-16, 1rem)}:host .main-container .detail-description{padding:var(--spacing-24, 1.5rem) var(--spacing-16, 1rem);color:var(--light, #ffffff);text-align:center}:host .main-container yoo-img:before{display:block;width:0;height:0;padding-bottom:75%;content:\"\"}:host(.web) #gallery{grid-template-columns:repeat(3, minmax(0, 1fr));max-width:82rem}:host(.web) .main-container{width:40%;max-width:37.5rem;margin:var(--spacing-32, 2rem) auto}:host(.web) .main-container .detail-description{padding:var(--spacing-32, 2rem) 0}:host(.web) .main-container .button{margin:auto}:host([detailed-view]){background:transparent !important}:host(:not(.web)) .main-container{height:100%;overflow:auto}:host(:not(.web)) .button{display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end;height:100%}:host(:not(.web)) .button yoo-button{width:100%}:host([animated]) .image{--image-index:0;-webkit-transform:translateY(100vh);transform:translateY(100vh);-webkit-animation-name:slide-up;animation-name:slide-up;-webkit-animation-duration:0.75s;animation-duration:0.75s;-webkit-animation-timing-function:var(--ease-out-quad);animation-timing-function:var(--ease-out-quad);-webkit-animation-delay:calc(0.5s + var(--image-index) * 0.1s);animation-delay:calc(0.5s + var(--image-index) * 0.1s);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@-webkit-keyframes slide-up{from{-webkit-transform:translateY(100vh);transform:translateY(100vh)}to{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes slide-up{from{-webkit-transform:translateY(100vh);transform:translateY(100vh)}to{-webkit-transform:translateY(0);transform:translateY(0)}}";
+const formImageCollectionCss = ":host{display:block;width:100%}:host #gallery{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));margin:0 auto;-webkit-column-gap:var(--spacing-16, 1rem);-moz-column-gap:var(--spacing-16, 1rem);column-gap:var(--spacing-16, 1rem);row-gap:var(--spacing-16, 1rem)}:host #gallery .image{position:relative;cursor:pointer}:host #gallery .image yoo-img{background-position:center;background-size:cover;border-radius:var(--border-radius-08, 0.5rem);-webkit-box-shadow:var(--shadow-01, 0 0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.1));box-shadow:var(--shadow-01, 0 0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.1))}:host #gallery .image yoo-img:before{display:block;width:0;height:0;padding-bottom:75%;content:\"\"}:host #gallery .image yoo-icon{position:absolute;top:var(--spacing-08, 0.5rem);right:var(--spacing-08, 0.5rem);z-index:3;background:var(--light, #ffffff);border-radius:50%}:host #gallery .image #overlay{position:absolute;top:0;z-index:2;width:100%;height:100%;background:var(--stable-60, rgba(173, 173, 173, 0.6));border-radius:var(--border-radius-08, 0.5rem)}:host .main-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:var(--spacing-32, 2rem) var(--spacing-16, 1rem)}:host .main-container .detail-description{padding:var(--spacing-24, 1.5rem) var(--spacing-16, 1rem);color:var(--light, #ffffff);text-align:center}:host .main-container yoo-img:before{display:block;width:0;height:0;padding-bottom:75%;content:\"\"}:host(.web) #gallery{grid-template-columns:repeat(3, minmax(0, 1fr));max-width:82rem}:host(.web) .main-container{width:40%;max-width:37.5rem;margin:var(--spacing-32, 2rem) auto}:host(.web) .main-container .detail-description{padding:var(--spacing-32, 2rem) 0}:host(.web) .main-container .button{margin:auto;padding:var(--spacing-16, 1rem)}:host([detailed-view]){background:transparent !important}:host(:not(.web)) .main-container{height:100%;overflow:auto}:host(:not(.web)) .button{display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end;height:100%}:host(:not(.web)) .button yoo-button{width:100%}:host([animated]) .image{--image-index:0;-webkit-transform:translateY(100vh);transform:translateY(100vh);-webkit-animation-name:slide-up;animation-name:slide-up;-webkit-animation-duration:0.75s;animation-duration:0.75s;-webkit-animation-timing-function:var(--ease-out-quad);animation-timing-function:var(--ease-out-quad);-webkit-animation-delay:calc(0.5s + var(--image-index) * 0.1s);animation-delay:calc(0.5s + var(--image-index) * 0.1s);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@-webkit-keyframes slide-up{from{-webkit-transform:translateY(100vh);transform:translateY(100vh)}to{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes slide-up{from{-webkit-transform:translateY(100vh);transform:translateY(100vh)}to{-webkit-transform:translateY(0);transform:translateY(0)}}";
 
 const YooFormImageCollectionComponent = class {
   constructor(hostRef) {
@@ -39,7 +39,7 @@ const YooFormImageCollectionComponent = class {
     openImageDetailFromRTE(this.detailDescription, (_a = ev === null || ev === void 0 ? void 0 : ev.target) === null || _a === void 0 ? void 0 : _a.src);
   }
   async imageClicked(imagePair, index) {
-    await showModal('yoo-form-image-collection', { detailedView: true, selectedPair: imagePair }, 'bg-dark-40 fullscreen', 'scaleEnterAnimation', 'scaleLeaveAnimation', true);
+    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;

package/dist/design-system/yoo-form-image-tagging.entry.js

@@ -138,10 +138,10 @@ const YooFormImageTaggingComponent = class {
     return h("section", { class: "tags" }, h("div", { class: "dropzone", id: "zone-tags" }));
   }
   renderBanner() {
-    return h("yoo-banner", null, h("p", { slot: "content" }));
+    return this.livePreview && h("yoo-banner", null, h("p", { slot: "content" }));
   }
   render() {
-    return (h(Host, { class: { ...getAppContext(this.host), 'live-preview': this.livePreview } }, this.livePreview && this.renderBanner(), this.renderImageContainer(), !this.readonly && this.renderInstruction(), !this.readonly && this.renderTagsZone()));
+    return (h(Host, { class: { ...getAppContext(this.host), 'live-preview': this.livePreview } }, this.renderBanner(), this.renderImageContainer(), !this.readonly && this.renderInstruction(), !this.readonly && this.renderTagsZone()));
   }
   get host() { return getElement(this); }
   static get watchers() { return {