@yoobic/yobi 8.1.0-110 → 8.1.0-113

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

@@ -1,4 +1,4 @@
-import { getImageSize, getMedia, getResizedImageSize, isWeb, resizeObserve, translate, translateMulti } from '@shared/utils';
+import { getMedia, translate, translateMulti } from '@shared/utils';
 import { Component, Element, Event, forceUpdate, h, Host, Method, Prop, State, Watch } from '@stencil/core';
 import { isEqual } from 'lodash-es';
 import { getFromOfflineStorage } from '../../../utils/cache';
@@ -16,10 +16,9 @@ export class YooFormImageTaggingComponent {
   }
   async onImageChanged(newImage, oldImage) {
     if (!isEqual(newImage, oldImage)) {
-      this.imageSize = null;
       this.imageSrc = await this.getImageSrc();
-      await this.prepareImageSize();
-      this.flipImage = !!this.image;
+      this.flipImage = !!this.imageSrc;
+      !this.imageSrc && forceUpdate(this);
     }
   }
   onRequireChanged() {
@@ -34,7 +33,11 @@ export class YooFormImageTaggingComponent {
   }
   async onIsVisibleChanged() {
     var _a;
-    this.isVisible && ((_a = this.tags) === null || _a === void 0 ? void 0 : _a.animate());
+    if (this.isVisible) {
+      this.isVisible && ((_a = this.tags) === null || _a === void 0 ? void 0 : _a.animate());
+      this.flipImage = true;
+      this.init();
+    }
   }
   get tagConfig() {
     const onReleaseTag = () => {
@@ -71,45 +74,15 @@ export class YooFormImageTaggingComponent {
       dropZoneConfig: getZoneConfig('dropZones')
     };
   }
-  get maxViewport() {
-    var _a, _b, _c;
-    return {
-      width: this.host.clientWidth ||
-        ((_a = this.host.parentElement) === null || _a === void 0 ? void 0 : _a.clientWidth) ||
-        ((_b = document.querySelector('[slot="livePreview"]')) === null || _b === void 0 ? void 0 : _b.clientWidth) ||
-        ((_c = this.host.closest('.modal-wrapper')) === null || _c === void 0 ? void 0 : _c.clientWidth),
-      height: window.innerHeight
-    };
-  }
-  get imageSizeStyle() {
-    const assignStyle = (bound) => { var _a; return `${(_a = this.imageSize) === null || _a === void 0 ? void 0 : _a[bound]}px`; };
-    return {
-      style: {
-        width: assignStyle('width') || 0,
-        height: assignStyle('height') || 0
-      }
-    };
-  }
   async isValid() {
     return this.validity;
   }
   async componentWillLoad() {
-    this.flipImage = !!this.image;
     this.imageSrc = await this.getImageSrc();
-    await this.prepareImageSize();
-  }
-  async componentWillRender() {
-    if (!this.imageSize) {
-      this.flipImage = true;
-      await this.prepareImageSize();
-      this.flipImage = false;
-    }
+    this.flipImage = !!this.imageSrc;
   }
   componentDidLoad() {
-    this.initGame();
-  }
-  componentDidUpdate() {
-    this.updateGame();
+    this.init();
   }
   validate() {
     var _a, _b;
@@ -117,39 +90,17 @@ export class YooFormImageTaggingComponent {
     this.validityChanged.emit(this.validity);
     return this.validity;
   }
-  updateGame() {
-    var _a, _b;
-    if (!((_b = (_a = this.tags) === null || _a === void 0 ? void 0 : _a.tagElements) === null || _b === void 0 ? void 0 : _b.length) && this.flipImage) {
-      setTimeout(() => this.flipImage = false, 1000);
-    }
-  }
-  initGame() {
-    this.tags = initTags(this.tagConfig, this.zonesConfig);
-    this.initResizeObserver();
+  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);
   }
   async getImageSrc() {
     var _a;
     return getMedia((await getFromOfflineStorage((_a = this.image) === null || _a === void 0 ? void 0 : _a._downloadURL)), { forceCookieUrlParam: true });
   }
-  async prepareImageSize() {
-    var _a;
-    if (!((_a = this.imageSize) === null || _a === void 0 ? void 0 : _a.width) && this.image && (this.isVisible || this.readonly)) {
-      const { width } = this.maxViewport;
-      const imgSize = await getImageSize(this.imageSrc);
-      const imgOptions = { imgSize, maxWidth: width - 16 };
-      this.imageSize = await getResizedImageSize(imgOptions);
-    }
-  }
-  initResizeObserver() {
-    isWeb(this.host) && resizeObserve(this.host, async () => {
-      var _a;
-      if (this.host.clientWidth !== ((_a = this.imageSize) === null || _a === void 0 ? void 0 : _a.width)) {
-        this.imageSize = { width: null, height: null };
-        await this.prepareImageSize();
-        forceUpdate(this);
-      }
-    });
-  }
   getColorTag(tagValue) {
     if (this.readonly && checkArray(this.value) && this.answer) {
       const indexUserValueAnswer = this.value.indexOf(tagValue);
@@ -164,13 +115,13 @@ export class YooFormImageTaggingComponent {
     }
   }
   renderImageContainer() {
-    return (h("section", { class: { 'image': true, flipped: this.animated && !!this.flipImage && !this.readonly }, ...this.imageSizeStyle },
-      h("div", { class: "inner-container", ...this.imageSizeStyle },
-        h("section", { class: "flip-box-front", ...this.imageSizeStyle },
-          !!this.image && h("yoo-img", { allowCloudinary: false, contained: true, src: this.imageSrc, ...this.imageSizeStyle }),
+    return !!this.image && 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, contained: true, src: this.imageSrc }),
           h("div", { class: "image-overlay", ref: (element) => (this.imageOverlayElement = element) }),
           this.renderDropzones()),
-        h("section", { class: "flip-box-back" }))));
+        h("section", { class: "flip-box-back" })));
   }
   renderDropzones() {
     var _a, _b;

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

@@ -181,7 +181,7 @@ export class YooFormImageTaggingCreatorComponent {
   }
   renderImageCapture() {
     var _a;
-    return h("yoo-form-capture", { type: "photo", required: true, value: ((_a = this.value) === null || _a === void 0 ? void 0 : _a.imageUrl) || '', ref: (el) => (this.captureImageElement = el), allowLibrary: true, allowUnsplash: true });
+    return h("yoo-form-capture", { type: "photo", required: true, allowLibrary: true, allowUnsplash: true, cropperOptions: { cropRatio: 1.25 }, value: ((_a = this.value) === null || _a === void 0 ? void 0 : _a.imageUrl) || '', ref: (el) => (this.captureImageElement = el) });
   }
   renderDots() {
     return this.value.annotations.map((dot) => {

package/dist/collection/components/form/form-input-container/form-input-container.css

@@ -743,10 +743,6 @@ span.fr-img-caption.fr-view {
   font-size: var(--icon-size-02, 1.5rem);
   font-variant-caps: normal;
 }
-:host .description .description.within-chat,
-:host .top-container .description.within-chat {
-  margin-bottom: 1rem;
-}
 :host .description .description.sub-description,
 :host .top-container .description.sub-description {
   color: var(--text-color, #807f83);
@@ -917,24 +913,6 @@ span.fr-img-caption.fr-view {
   margin-right: var(--spacing-16, 1rem);
 }
 
-:host(.lesson-live-preview.web) .description.fr-view,
-:host(.lesson-live-preview.web) .label {
-  padding: 0;
-}
-:host(.lesson-live-preview.web) .description.fr-view span,
-:host(.lesson-live-preview.web) .label span {
-  margin: unset;
-  font-weight: inherit;
-  font-size: inherit;
-}
-:host(.lesson-live-preview.web) .label {
-  font-weight: var(--font-weight-700, 700);
-  font-size: var(--font-size-24, 1.5rem);
-}
-:host(.lesson-live-preview.web) .instructions {
-  font-size: var(--font-size-14, 0.875rem);
-}
-
 :host(.line) {
   display: flex;
   flex-direction: column;
@@ -1016,6 +994,10 @@ span.fr-img-caption.fr-view {
   font-weight: var(--font-weight-700, 700);
 }
 
+:host(.form-readonly) {
+  padding: var(--spacing-08, 0.5rem) 0;
+}
+
 :host(.form-readonly.quickview) .description .label .right-side,
 :host(.form-readonly.quickview) .description .optional .right-side,
 :host(.form-readonly.quickview) .top-container .label .right-side,
@@ -1056,20 +1038,17 @@ span.fr-img-caption.fr-view {
 
 :host(.lesson) {
   --font-size-title-name: var(--font-size-28, 1.75rem);
-  --font-weight-title-name: 600;
+  --font-weight-title-name: var(--font-weight-700, 700);
   --text-tranform-title-name: none;
 }
 :host(.lesson) .top-container .content-container {
-  height: 100%;
-  padding-top: 0;
+  height: fit-content;
+  padding: 0;
 }
 :host(.lesson) .top-container .description {
-  padding: 0.75rem 0;
+  margin-bottom: var(--spacing-08, 0.5rem);
   font-size: var(--font-size-description);
 }
-:host(.lesson) .top-container .description.choice {
-  font-weight: var(--font-weight-700, 700);
-}
 :host(.lesson) .top-container .media-description {
   font-size: var(--font-size-16, 1rem);
 }
@@ -1081,98 +1060,24 @@ span.fr-img-caption.fr-view {
   text-transform: var(--text-tranform-title-name);
 }
 
-:host(.lesson:not(.imagecollection)) .top-container {
-  height: 100%;
-}
-
-:host(.mobile.lesson.connect) .label {
-  padding: var(--spacing-16, 1rem);
-}
-
-:host(.mobile.lesson) .top-container .label {
-  text-align: left;
-}
-:host(.mobile.lesson) .top-container .label span {
-  margin: unset;
-}
-
 :host(.web.lesson:not(.lesson-live-preview)) {
-  width: 100%;
-  height: 100%;
-}
-:host(.web.lesson:not(.lesson-live-preview)) .top-container .description {
-  text-align: center;
-}
-:host(.web.lesson:not(.lesson-live-preview)) .title.within-chat,
-:host(.web.lesson:not(.lesson-live-preview)) .field-title-name {
-  margin: 0 auto;
-}
-
-:host(.web.lesson.swipecards:not(.lesson-live-preview)) .top-container .content-container {
-  height: 100%;
-}
-
-:host(.web.lesson.categorizewords:not(.lesson-live-preview)) .top-container,
-:host(.web.lesson.connect:not(.lesson-live-preview)) .top-container {
-  height: 100%;
-}
-:host(.web.lesson.categorizewords:not(.lesson-live-preview)) .top-container .field-title-name,
-:host(.web.lesson.connect:not(.lesson-live-preview)) .top-container .field-title-name {
-  display: inline;
-}
-
-:host(.web.lesson:not(.categorizewords):not(.lesson-live-preview):not(.reveal):not(.imagecollection):not(.swipecards):not(.confidence)) .top-container div:first-child {
-  padding: var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);
-  background: var(--stable-background);
-  border-top: unset;
-}
-
-:host(.web.lesson.information:not(.lesson-live-preview)) .top-container {
-  margin-top: unset;
-}
-
-:host(.web.lesson:not(.lesson-live-preview):not(.media):not(.swipecards):not(.connect):not(.categorizewords):not(.imagecollection):not(.scratch):not(.reveal):not(.confidence)) {
-  padding: unset !important;
-  background-color: transparent;
+  display: flex;
+  padding: 0 !important;
 }
-:host(.web.lesson:not(.lesson-live-preview):not(.media):not(.swipecards):not(.connect):not(.categorizewords):not(.imagecollection):not(.scratch):not(.reveal):not(.confidence)) .top-container {
+:host(.web.lesson:not(.lesson-live-preview)) .top-container {
   display: flex;
   flex-direction: column;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  min-height: 100%;
-  margin-bottom: var(--spacing-16, 1rem);
-}
-:host(.web.lesson:not(.lesson-live-preview):not(.media):not(.swipecards):not(.connect):not(.categorizewords):not(.imagecollection):not(.scratch):not(.reveal):not(.confidence)) .top-container .description,
-:host(.web.lesson:not(.lesson-live-preview):not(.media):not(.swipecards):not(.connect):not(.categorizewords):not(.imagecollection):not(.scratch):not(.reveal):not(.confidence)) .top-container .instructions {
-  background-color: var(--stable-ultralight, #fafafa) !important;
-}
-:host(.web.lesson:not(.lesson-live-preview):not(.media):not(.swipecards):not(.connect):not(.categorizewords):not(.imagecollection):not(.scratch):not(.reveal):not(.confidence)) .top-container .content-container {
+  gap: var(--spacing-08, 0.5rem);
   box-sizing: border-box;
-  width: 100%;
-  margin-top: var(--spacing-16, 1rem);
-  padding: var(--spacing-32, 2rem) 8rem !important;
-  background-color: var(--light, #ffffff);
-  border-radius: var(--border-radius-08, 0.5rem);
-  box-shadow: var(--shadow-02, 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.1));
-}
-:host(.web.lesson:not(.lesson-live-preview):not(.media):not(.swipecards):not(.connect):not(.categorizewords):not(.imagecollection):not(.scratch):not(.reveal):not(.confidence)) .description.fr-view {
-  text-align: center;
-}
-
-:host(.web.lesson.media:not(.lesson-live-preview)) {
-  padding: unset !important;
-  background-color: transparent;
-}
-:host(.web.lesson.media:not(.lesson-live-preview)) .top-container {
-  box-sizing: border-box;
-  min-height: calc(100vh - 16rem);
-  margin: var(--spacing-08, 0.5rem) var(--spacing-32, 2rem) var(--spacing-24, 1.5rem) var(--spacing-32, 2rem);
-  padding: var(--spacing-32, 2rem) 8rem !important;
+  width: calc(100% - 2rem);
+  margin: 0 auto;
+  padding: var(--spacing-32, 2rem) !important;
+  padding-top: var(--spacing-16, 1rem) !important;
+  overflow: auto;
   background-color: var(--light, #ffffff);
   border-radius: var(--border-radius-08, 0.5rem);
   box-shadow: var(--shadow-02, 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.1));
+  transition: all 0.5s ease-in-out 0s;
 }
 
 @media print {
@@ -1286,17 +1191,6 @@ span.fr-img-caption.fr-view {
   text-transform: unset;
 }
 
-:host(.reveal:not(.web:not(.lesson-live-preview))) .top-container .content-container {
-  flex: 1;
-}
-
-:host(.reveal) .top-container .description,
-:host(.reveal) .top-container .label,
-:host(.imagecollection) .top-container .description,
-:host(.imagecollection) .top-container .label {
-  padding-left: var(--spacing-16, 1rem) !important;
-}
-
 :host([animated].number.lesson) .description,
 :host([animated].number.lesson) .label,
 :host([animated].number.lesson) .instructions,
@@ -1380,10 +1274,6 @@ span.fr-img-caption.fr-view {
   display: none;
 }
 
-:host(.textsequence) .content-container {
-  margin-top: var(--spacing-16, 1rem);
-}
-
 :host(.confidence) .top-container .content-container {
   background-color: var(--dark-60, rgba(0, 0, 0, 0.6)) !important;
   border-radius: var(--border-radius-08, 0.5rem);