@yoobic/yobi 8.5.0-76 → 8.5.0-77

package/dist/cjs/{swiper-9f95d970.js → swiper-14a9aa6e.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const yooIonSlides_entry = require('./yoo-ion-slides-91aed68c.js');
+const yooIonSlides_entry = require('./yoo-ion-slides-ac7389aa.js');
 require('./index-9ca0e46c.js');
 require('./index-77996ed3.js');
 require('./index-98395d31.js');

package/dist/cjs/yoo-form-capture.cjs.entry.js

@@ -281,7 +281,7 @@ const YooFormCaptureComponent = class {
   }
   allowCrop(data) {
     var _a;
-    return index.isWeb(this.host) && (((_a = this.cropperOptions) === null || _a === void 0 ? void 0 : _a.cropRatio) > 0 || this.showCropper) && (index.isImage(data) || index.isBase64(data)) && !index.isGif(data) && (!(typeof data === 'string' && index.isUnsplashUrl(data)) || index.isWeb(this.host));
+    return index.isWeb(this.host) && !index.isGif(data) && (((_a = this.cropperOptions) === null || _a === void 0 ? void 0 : _a.cropRatio) > 0 || this.showCropper) && (index.isImage(data) || index.isBase64(data) || index.isUnsplashUrl(data));
   }
   removeAllCapture() {
     this.value = [];

package/dist/cjs/yoo-form-image-tagging.cjs.entry.js

@@ -16,7 +16,7 @@ require('./index-cb8276bc.js');
 require('./common-helpers-7988a004.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
-const formImageTaggingCss = "svg:not(:root){overflow:hidden}:host{display:block}:host yoo-banner{height:0}:host yoo-tag{position:relative;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}:host #image{background-color:transparent;-webkit-perspective:1000px;perspective:1000px}:host #image.flipped #inner-container{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}:host #image #inner-container{position:relative;width:100%;height:100%;margin:0 auto;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition:-webkit-transform 0.75s;transition:-webkit-transform 0.75s;transition:transform 0.75s;transition:transform 0.75s, -webkit-transform 0.75s}:host #image #inner-container #recto,:host #image #inner-container #verso{width:100%;height:100%;background-color:var(--light, #ffffff);-webkit-backface-visibility:hidden;backface-visibility:hidden}:host #image #inner-container #verso{z-index:1;-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}:host #image #inner-container #overlay,:host #image #inner-container yoo-img{border-radius:var(--border-radius-08, 0.5rem)}:host #image #inner-container .dropzone{position:absolute;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:var(--spacing-32, 2rem);height:var(--spacing-32, 2rem);background-color:var(--light, #ffffff);border-radius:50%;-webkit-box-shadow:var(--shadow-02, 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.1));box-shadow:var(--shadow-02, 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.1))}:host(:not([readonly])) main::-webkit-scrollbar{display:none}:host(:not([readonly])) #image #inner-container #overlay{position:absolute;top:0;width:100%;height:100%;background-color:var(--dark-10, rgba(0, 0, 0, 0.1));opacity:0;-webkit-transition:opacity 350ms ease-in-out;transition:opacity 350ms ease-in-out}:host(:not([readonly])) #image #inner-container .dropzone[hit]{background-color:var(--app-color, #5a30f4)}:host(:not([readonly])) #instructions{margin:var(--spacing-16, 1rem) 0 0;padding:var(--spacing-08, 0.5rem);color:var(--stable, #adadad)}:host(:not([readonly])) #zone-tags{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-line-pack:baseline;align-content:baseline;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;min-height:5rem;padding:var(--spacing-08, 0.5rem);white-space:nowrap;border:var(--border-width-01, 0.0625rem) solid transparent;border-radius:var(--border-radius-08, 0.5rem)}:host(:not([readonly])) #zone-tags[hit]{background-color:var(--stable-ultralight, #fafafa);border:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1)}:host(:not([readonly])) #zone-tags yoo-tag{margin-right:var(--spacing-08, 0.5rem);margin-bottom:var(--spacing-08, 0.5rem)}:host([animated]) .dropzone{-webkit-transition:all 250ms linear;transition:all 250ms linear}:host([animated]) .dropzone[hidden]{-webkit-transform:scale(0);transform:scale(0)}";
+const formImageTaggingCss = "svg:not(:root){overflow:hidden}:host{display:block}:host yoo-banner{height:0}:host yoo-tag{position:relative;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}:host #image{position:relative}:host #image #overlay,:host #image yoo-img{border-radius:var(--border-radius-08, 0.5rem)}:host #image .dropzone{position:absolute;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:var(--spacing-32, 2rem);height:var(--spacing-32, 2rem);background-color:var(--light, #ffffff);border-radius:50%;-webkit-box-shadow:var(--shadow-02, 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.1));box-shadow:var(--shadow-02, 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.1))}:host(:not([readonly])) main::-webkit-scrollbar{display:none}:host(:not([readonly])) #image #overlay{position:absolute;top:0;width:100%;height:100%;background-color:var(--dark-10, rgba(0, 0, 0, 0.1));opacity:0;-webkit-transition:opacity 350ms ease-in-out;transition:opacity 350ms ease-in-out}:host(:not([readonly])) #image .dropzone[hit]{background-color:var(--app-color, #5a30f4)}:host(:not([readonly])) #instructions{margin:var(--spacing-16, 1rem) 0 0;padding:var(--spacing-08, 0.5rem);color:var(--stable, #adadad)}:host(:not([readonly])) #zone-tags{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-line-pack:baseline;align-content:baseline;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;min-height:5rem;padding:var(--spacing-08, 0.5rem);white-space:nowrap;border:var(--border-width-01, 0.0625rem) solid transparent;border-radius:var(--border-radius-08, 0.5rem)}:host(:not([readonly])) #zone-tags[hit]{background-color:var(--stable-ultralight, #fafafa);border:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1)}:host(:not([readonly])) #zone-tags yoo-tag{margin-right:var(--spacing-08, 0.5rem);margin-bottom:var(--spacing-08, 0.5rem)}:host([animated]) yoo-img{-webkit-animation:scale-up 0.35s ease-in-out 0.35s;animation:scale-up 0.35s ease-in-out 0.35s}@-webkit-keyframes scale-up{from{-webkit-transform:scale(0.85);transform:scale(0.85)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes scale-up{from{-webkit-transform:scale(0.85);transform:scale(0.85)}to{-webkit-transform:scale(1);transform:scale(1)}}:host([animated]) .dropzone{-webkit-transition:all 250ms linear;transition:all 250ms linear}:host([animated]) .dropzone[hidden]{-webkit-transform:scale(0);transform:scale(0)}";
 
 const YooFormImageTaggingComponent = class {
   constructor(hostRef) {
@@ -26,13 +26,14 @@ const YooFormImageTaggingComponent = class {
     this.animated = true;
     this.value = [];
     this.placeholder = 'DRAGDROPTAGS';
-    this.flipImage = false;
+    this.revealDropzones = false;
   }
   async onImageChanged(newImage, oldImage) {
     if (!lodash.isEqual(newImage, oldImage)) {
       await this.prepareImage();
-      !this.imageSrc && index.forceUpdate(this);
+      this.revealDropzones = false;
       this.init();
+      index.forceUpdate(this);
     }
   }
   onRequireChanged() {
@@ -50,8 +51,9 @@ const YooFormImageTaggingComponent = class {
     var _a;
     if (this.isVisible) {
       (_a = this.tags) === null || _a === void 0 ? void 0 : _a.animate();
-      this.flipImage = true;
+      this.revealDropzones = false;
       this.init();
+      index.forceUpdate(this);
     }
   }
   async isValid() {
@@ -91,7 +93,6 @@ const YooFormImageTaggingComponent = class {
       clickToDrop: true,
       dragAndScroll: true,
       getColorTag,
-      onFirstTagAnimationFinished: () => this.flipImage = false,
       pressTagExtraAction: () => showImageOverlay(),
       releaseTagExtraAction: onReleaseTag,
       resetTagExtraAction: onReleaseTag
@@ -107,6 +108,7 @@ const YooFormImageTaggingComponent = class {
   }
   async componentWillLoad() {
     await this.prepareImage();
+    this.revealDropzones = !this.animated;
   }
   componentDidLoad() {
     this.init();
@@ -114,33 +116,28 @@ const YooFormImageTaggingComponent = class {
   async prepareImage() {
     var _a;
     this.imageSrc = await index$1.getMedia((await localForage.getFromOfflineStorage((_a = this.image) === null || _a === void 0 ? void 0 : _a._downloadURL)), { forceCookieUrlParam: true });
-    this.flipImage = !!this.imageSrc;
   }
   init() {
-    this.flipImage &&
-      setTimeout(() => {
-        var _a, _b;
-        !((_b = (_a = this.tags) === null || _a === void 0 ? void 0 : _a.tags) === null || _b === void 0 ? void 0 : _b.length) && (this.tags = index$2.initTags(this.tagConfig, this.zonesConfig));
-        this.flipImage = false;
-      }, 500);
+    var _a, _b;
+    !((_b = (_a = this.tags) === null || _a === void 0 ? void 0 : _a.tags) === null || _b === void 0 ? void 0 : _b.length) && (this.tags = index$2.initTags(this.tagConfig, this.zonesConfig));
   }
   renderImageOverlay() {
     return !this.readonly && index.h("div", { id: "overlay", ref: (element) => (this.imageOverlayElement = element) });
   }
   renderImage() {
-    return (!!this.imageSrc && (index.h("section", { id: "image", class: { flipped: this.animated && !!this.flipImage && !this.readonly } }, index.h("div", { id: "inner-container" }, index.h("div", { id: "recto" }, index.h("yoo-img", { instant: true, src: this.imageSrc, ignoreHeight: true, ignoreWidth: true, disableAspectRatioCalc: true, allowCloudinary: false }), this.renderImageOverlay(), this.renderDropzones()), index.h("div", { id: "verso" })))));
+    return !!this.imageSrc && index.h("section", { id: "image" }, index.h("yoo-img", { instant: true, src: this.imageSrc, ignoreHeight: true, ignoreWidth: true, disableAspectRatioCalc: true, allowCloudinary: false, onAnimationEnd: () => this.revealDropzones = true }), this.renderImageOverlay(), this.renderDropzones());
   }
   renderDropzones() {
     var _a, _b;
     return (_b = (_a = draggableTagsHelpers.filterDuplicateEntries(this.annotations, 'text')) === null || _a === void 0 ? void 0 : _a.map(a => ({ ...a, type: 'dot' }))) === null || _b === void 0 ? void 0 : _b.map((a, i) => {
-      return !!a && index.h("div", { class: "dropzone", id: `zone-${i}`, style: annotationsHelpers.getPercentPositionStyle(a), hidden: this.animated && !this.readonly && this.flipImage });
+      return !!a && index.h("div", { class: "dropzone", id: `zone-${i}`, style: annotationsHelpers.getPercentPositionStyle(a), hidden: this.animated && !this.readonly && !this.revealDropzones });
     });
   }
   renderInstruction() {
     return index.h("section", { id: "instructions" }, index$1.translate(this.placeholder));
   }
   renderTagsZone() {
-    return index.h("section", { class: "dropzone", id: "zone-tags" });
+    return index.h("section", { class: "dropzone", id: "zone-tags", key: "zone-tags" });
   }
   renderBanner() {
     return this.livePreview && !this.readonly && index.h("yoo-banner", null, index.h("p", { slot: "content" }));