@yoobic/yobi 8.5.0-76 → 8.5.0-77

package/dist/{design-system/swiper-c4c9ef69.js → esm/swiper-98ab4ffc.js}

@@ -1,5 +1,5 @@
-import { S as Swiper, P as Pagination, A as Autoplay, a as Scrollbar } from './yoo-ion-slides-1c623349.js';
-export { S as Swiper } from './yoo-ion-slides-1c623349.js';
+import { S as Swiper, P as Pagination, A as Autoplay, a as Scrollbar } from './yoo-ion-slides-fb2b42e7.js';
+export { S as Swiper } from './yoo-ion-slides-fb2b42e7.js';
 import './index-a6a92b3d.js';
 import './index-ff24e2c4.js';
 import './index-3d905ebb.js';

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, i as createEvent, h, j as Build, e as Host, g as getElement } from './index-a6a92b3d.js';
 import { P as PictureSourceType, M as MediaType, i as importMultipleFromLibrary, g as getPicture, b as getVideo, s as showAudioRecorder, c as MediaCapture, a as getVideoDevices } from './camera-helpers-2edcf459.js';
-import { cn as isBase64, aZ as isImageUrl, cs as addFilePrefix, p as isAndroid, cv as moveToImageDirectory, t as translate, b9 as showToast, dR as getFormCapturedFileSize, aj as showAlert, av as pipes, k as isNullOrUndefined, H as isWeb, am as isImage, al as isGif, dM as isUnsplashUrl, ak as isVideo, dL as isAudio, o as isNativeMobile, G as showModal, N as isIOS, M as isIphoneX, c4 as StatusBar, a8 as getSession, dS as isLenovo, cp as showActionSheet, dD as asyncWaterfall, dT as updatePathSessionId, bX as isSafari, W as getAsyncExtraData, ct as read, Z as isNativeFilePath, an as downloadFile, ar as isFile, dU as getMimeType, br as isOffline, dV as hasLargeFile, a3 as translateMulti, aH as showContextMenu, aC as isPhotoEdited, dA as images, dW as audios, dB as videos, aD as changeExtension, az as isCloudinaryLink } from './index-3d905ebb.js';
+import { cn as isBase64, aZ as isImageUrl, cs as addFilePrefix, p as isAndroid, cv as moveToImageDirectory, t as translate, b9 as showToast, dR as getFormCapturedFileSize, aj as showAlert, av as pipes, k as isNullOrUndefined, H as isWeb, al as isGif, am as isImage, dM as isUnsplashUrl, ak as isVideo, dL as isAudio, o as isNativeMobile, G as showModal, N as isIOS, M as isIphoneX, c4 as StatusBar, a8 as getSession, dS as isLenovo, cp as showActionSheet, dD as asyncWaterfall, dT as updatePathSessionId, bX as isSafari, W as getAsyncExtraData, ct as read, Z as isNativeFilePath, an as downloadFile, ar as isFile, dU as getMimeType, br as isOffline, dV as hasLargeFile, a3 as translateMulti, aH as showContextMenu, aC as isPhotoEdited, dA as images, dW as audios, dB as videos, aD as changeExtension, az as isCloudinaryLink } from './index-3d905ebb.js';
 import './index-ff24e2c4.js';
 import { k as keys, z as intersection, a as isNumber, i as isArray, a5 as assignInWith, s as assign, n as compact, t as clone, E as isUndefined } from './lodash-777f91de.js';
 import { c as querySelectorAllDeep, q as querySelectorDeep, i as showImageCropper, e as showPhotoEditor, a as showSlidesMedia, g as getAppContext } from './common-helpers-89dbb59a.js';
@@ -277,7 +277,7 @@ const YooFormCaptureComponent = class {
   }
   allowCrop(data) {
     var _a;
-    return isWeb(this.host) && (((_a = this.cropperOptions) === null || _a === void 0 ? void 0 : _a.cropRatio) > 0 || this.showCropper) && (isImage(data) || isBase64(data)) && !isGif(data) && (!(typeof data === 'string' && isUnsplashUrl(data)) || isWeb(this.host));
+    return isWeb(this.host) && !isGif(data) && (((_a = this.cropperOptions) === null || _a === void 0 ? void 0 : _a.cropRatio) > 0 || this.showCropper) && (isImage(data) || isBase64(data) || isUnsplashUrl(data));
   }
   removeAllCapture() {
     this.value = [];

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

@@ -12,7 +12,7 @@ import './index-604330b3.js';
 import './common-helpers-89dbb59a.js';
 import './_commonjsHelpers-f4d11124.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) {
@@ -22,13 +22,14 @@ const YooFormImageTaggingComponent = class {
     this.animated = true;
     this.value = [];
     this.placeholder = 'DRAGDROPTAGS';
-    this.flipImage = false;
+    this.revealDropzones = false;
   }
   async onImageChanged(newImage, oldImage) {
     if (!isEqual(newImage, oldImage)) {
       await this.prepareImage();
-      !this.imageSrc && forceUpdate(this);
+      this.revealDropzones = false;
       this.init();
+      forceUpdate(this);
     }
   }
   onRequireChanged() {
@@ -46,8 +47,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();
+      forceUpdate(this);
     }
   }
   async isValid() {
@@ -87,7 +89,6 @@ const YooFormImageTaggingComponent = class {
       clickToDrop: true,
       dragAndScroll: true,
       getColorTag,
-      onFirstTagAnimationFinished: () => this.flipImage = false,
       pressTagExtraAction: () => showImageOverlay(),
       releaseTagExtraAction: onReleaseTag,
       resetTagExtraAction: onReleaseTag
@@ -103,6 +104,7 @@ const YooFormImageTaggingComponent = class {
   }
   async componentWillLoad() {
     await this.prepareImage();
+    this.revealDropzones = !this.animated;
   }
   componentDidLoad() {
     this.init();
@@ -110,33 +112,28 @@ const YooFormImageTaggingComponent = class {
   async prepareImage() {
     var _a;
     this.imageSrc = await getMedia((await 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 = 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 = initTags(this.tagConfig, this.zonesConfig));
   }
   renderImageOverlay() {
     return !this.readonly && h("div", { id: "overlay", ref: (element) => (this.imageOverlayElement = element) });
   }
   renderImage() {
-    return (!!this.imageSrc && (h("section", { id: "image", class: { flipped: this.animated && !!this.flipImage && !this.readonly } }, h("div", { id: "inner-container" }, h("div", { id: "recto" }, h("yoo-img", { instant: true, src: this.imageSrc, ignoreHeight: true, ignoreWidth: true, disableAspectRatioCalc: true, allowCloudinary: false }), this.renderImageOverlay(), this.renderDropzones()), h("div", { id: "verso" })))));
+    return !!this.imageSrc && h("section", { id: "image" }, 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 = 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 && h("div", { class: "dropzone", id: `zone-${i}`, style: getPercentPositionStyle(a), hidden: this.animated && !this.readonly && this.flipImage });
+      return !!a && h("div", { class: "dropzone", id: `zone-${i}`, style: getPercentPositionStyle(a), hidden: this.animated && !this.readonly && !this.revealDropzones });
     });
   }
   renderInstruction() {
     return h("section", { id: "instructions" }, translate(this.placeholder));
   }
   renderTagsZone() {
-    return h("section", { class: "dropzone", id: "zone-tags" });
+    return h("section", { class: "dropzone", id: "zone-tags", key: "zone-tags" });
   }
   renderBanner() {
     return this.livePreview && !this.readonly && h("yoo-banner", null, h("p", { slot: "content" }));