@yoobic/yobi 8.3.9 → 8.4.0-2

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

@@ -1,6 +1,7 @@
 import { translateMulti } from '@shared/utils';
 import { Component, Element, Event, h, Host, Prop, State, Watch } from '@stencil/core';
 import { showSlidesMedia } from '../../../../utils/helpers/common-helpers';
+import { hasDuplicates } from '../../../../utils/helpers/draggable-tags-helpers';
 import { hasWarnings, isSelected, onItemSelect, prepareChoice, updateValue, updateValues } from '../form-choice-helpers';
 export class YooFormChoiceImageComponent {
   constructor() {
@@ -22,37 +23,37 @@ export class YooFormChoiceImageComponent {
   get hasEmptyValues() {
     return this.values.length >= 2 && !!this.values.filter(({ image, text }) => (image && !text) || (!image && text)).length;
   }
+  get hasDuplicateTexts() {
+    var _a;
+    return hasDuplicates((_a = this.values) === null || _a === void 0 ? void 0 : _a.map(v => typeof v === 'string' ? v : v === null || v === void 0 ? void 0 : v.text));
+  }
   componentWillLoad() {
+    var _a;
+    this.answer = (Array.isArray(this.answer) && ((_a = this.answer) === null || _a === void 0 ? void 0 : _a.length)) ? this.answer.map(a => (a === null || a === void 0 ? void 0 : a[this.hasDuplicateTexts ? 'image' : 'text']) || a) : this.answer;
     prepareChoice(this);
   }
   componentDidLoad() {
     hasWarnings(this.values, this, this.hasEmptyValues && ['NOEMPTYVALUES']);
   }
-  renderImage(image, text, values, index) {
+  renderImage(image, text, index) {
+    var _a;
+    const item = this.hasDuplicateTexts ? image : text;
     const readonly = this.readonly || this.isPdf;
-    const answer = [].concat(this.answer).map(a => { var _a; return (_a = a.text) !== null && _a !== void 0 ? _a : a; });
-    const noValidation = !((answer === null || answer === void 0 ? void 0 : answer.length) > 0);
-    const isCorrect = answer.includes(text);
-    const onOpenImage = (values, index) => showSlidesMedia(this.host, { items: values.map(({ image }) => ({ value: image })), currentSlideIndex: index, showBottomContainer: false });
-    return (h("div", { class: "image-container", onClick: () => this.isHistory && onOpenImage(values, index), style: this.animated ? { '--choice-index': index.toString() } : {} },
+    const noValidation = !((_a = this.answer) === null || _a === void 0 ? void 0 : _a.length);
+    const isCorrect = this.answer.includes(item);
+    const onOpenImage = () => showSlidesMedia(this.host, { items: this.values.map(({ image }) => ({ value: image })), currentSlideIndex: index, showBottomContainer: false });
+    return (h("div", { class: "image-container", onClick: () => this.isHistory && onOpenImage(), style: this.animated ? { '--choice-index': index.toString() } : {} },
       h("div", { class: { content: true, 'correct-answer': this.readonly && isCorrect && !noValidation, 'wrong-answer': this.readonly && !isCorrect && !noValidation } },
-        h("yoo-img", { cloudinaryOptions: { pad: true }, scaledUp: this.isPdf, src: image, onClick: () => !readonly && onItemSelect(text, this) }),
+        h("yoo-img", { cloudinaryOptions: { pad: true }, scaledUp: this.isPdf, src: image, onClick: () => !readonly && onItemSelect(item, this) }),
         !readonly && [
-          h("yoo-form-checkbox", { value: isSelected(text, this.selection), onClick: () => onItemSelect(text, this), animated: this.animated }),
-          h("yoo-tag", { color: "dark-60", icon: "maximize", iconOnlyColor: "light", size: "small", onClick: () => onOpenImage(values, index) })
+          h("yoo-form-checkbox", { value: isSelected(item, this.selection), onClick: () => onItemSelect(item, this), animated: this.animated }),
+          h("yoo-tag", { color: "dark-60", icon: "maximize", iconOnlyColor: "light", size: "small", onClick: () => onOpenImage() })
         ]),
       text && h("div", { class: "text truncate" }, translateMulti(text))));
   }
   renderImages() {
-    let values = this.choices || [];
-    if (this.readonly && this.value) {
-      const answers = Array.isArray(this.value) ? this.value : [this.value];
-      values = values.filter(({ text }) => answers.some((answer) => answer === text));
-    }
-    return values.map((value, index) => {
-      const { text, image } = value || {};
-      return image && this.renderImage(image, text, values, index);
-    });
+    var _a;
+    return (_a = this.values) === null || _a === void 0 ? void 0 : _a.map(({ text, image }, index) => image && this.renderImage(image, text, index));
   }
   renderBanner() {
     return this.livePreview && !this.readonly && h("yoo-banner", null,
@@ -238,7 +239,7 @@ export class YooFormChoiceImageComponent {
     },
     "answer": {
       "type": "unknown",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "(string | Pick<IFormChoiceValue, 'text' | 'image'>)[]",
         "resolved": "(string | Pick<IFormChoiceValue, \"image\" | \"text\">)[]",

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

@@ -400,18 +400,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   display: block;
   width: 100%;
   max-width: 30rem;
-  margin: 0 auto;
-}
-:host p {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  margin: 0;
-  padding: var(--spacing-16, 1rem);
-  overflow: hidden;
-  font-size: var(--font-size-14, 0.875rem);
-  text-align: center;
 }
 :host yoo-banner {
   height: 0;
@@ -487,8 +475,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host .draggable[type=image] {
   padding: 0;
 }
-:host .connectable[type=image]:not([data-hit]),
-:host .draggable[type=image]:not([data-hit]) {
+:host .connectable[type=image]:not([hit]),
+:host .draggable[type=image]:not([hit]) {
   background-color: transparent;
 }
 :host .connectable[type=image][hit] yoo-img,
@@ -496,17 +484,49 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   opacity: 0.6;
   transition: opacity 0.25s ease-in-out;
 }
+:host .connectable[type=image] > *:not(yoo-icon),
+:host .draggable[type=image] > *:not(yoo-icon) {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
 :host .connectable[type=text][hit],
 :host .draggable[type=text][hit] {
   background-color: var(--stable-light, #f1f1f1);
 }
+:host .connectable[type=text] p,
+:host .draggable[type=text] p {
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  margin: 0;
+  padding: var(--spacing-16, 1rem);
+  overflow: hidden;
+  font-size: var(--font-size-14, 0.875rem);
+  text-align: center;
+}
+@supports (display: -webkit-box) {
+  :host .connectable[type=text] p,
+:host .draggable[type=text] p {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+}
+:host .connectable[type=text] > *:not(yoo-icon),
+:host .draggable[type=text] > *:not(yoo-icon) {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  left: 0;
+  transform: translateY(-50%);
+}
 :host .connectable > *:not(yoo-icon),
 :host .draggable > *:not(yoo-icon) {
   position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
 }
 :host .draggable {
   z-index: 1;

package/dist/collection/components/form/form-connect/form-connect.js

@@ -176,6 +176,7 @@ export class YooFormConnectComponent {
       const onDragStartElement = () => {
         this.blockMoves.emit(true);
         draggableElement.removeAttribute('hit');
+        draggableElement.style.zIndex = '2';
       };
       const onDragElement = () => {
         var _a, _b;
@@ -207,6 +208,7 @@ export class YooFormConnectComponent {
       };
       const onReleaseElement = async () => {
         await gsapTo(draggableElement, this.animated ? 0.25 : 0, { x: 0, y: 0 });
+        draggableElement.style.removeProperty('z-index');
         if (tempConnectableElement) {
           currentDraggable.connectableId = tempConnectableElement.id;
           [...this.connectableElements, ...this.draggableElements].forEach(e => e.removeAttribute('hit'));
@@ -241,15 +243,6 @@ export class YooFormConnectComponent {
       lastDraggable.connectableId = lastConectableId;
     }
   }
-  truncateValue(valueToTruncate) {
-    if (valueToTruncate) {
-      const MAX_LENGTH = 50;
-      const translatedValue = translateMulti(valueToTruncate);
-      const valueLength = translatedValue.length;
-      const isTruncabled = valueLength > MAX_LENGTH;
-      return isTruncabled ? translatedValue.substr(0, MAX_LENGTH).concat('...') : translatedValue;
-    }
-  }
   renderCorrectionIcon(value) {
     const getCouple = (values) => values === null || values === void 0 ? void 0 : values.find(v => v.includes(value));
     const isCorrect = isEqual(getCouple(this.value), getCouple(this.answer));
@@ -285,7 +278,7 @@ export class YooFormConnectComponent {
         ...(isConnected && connectedAttributes), hit: !!(hit === null || hit === void 0 ? void 0 : hit.value) && isDraggable, type: isImage ? 'image' : 'text'
       };
       return !!value && h("div", { ...tileAttr, id: id, key: id, class: name, onClick: () => { isDraggable ? onDraggableClick(item) : onConnectableClick(item); } },
-        !isImage ? h("p", null, this.truncateValue(value)) : [h("yoo-img", { type: "background", src: value }), h("div", { id: "overlay" })],
+        !isImage ? h("p", null, translateMulti(value)) : [h("yoo-img", { type: "background", src: value }), h("div", { id: "overlay" })],
         this.readonly && this.renderCorrectionIcon(value));
     })));
   }

package/dist/collection/components/form/form-document/form-document.js

@@ -80,6 +80,7 @@ export class YooFormDocumentComponent {
     const getAnimation = (enterLeave) => (isWeb(this.host) ? `fade${enterLeave}Animation` : `slideY${enterLeave}Animation`);
     modal.document = Object.assign(this.document, { _downloadURL: base64 || ((_a = this.document) === null || _a === void 0 ? void 0 : _a._downloadURL) });
     modal.allowOrientation = this.allowOrientation;
+    modal.hideSecondaryActions = this.hideSecondaryActions;
     const type = getType(this.document);
     modal.modalMode = type && type === 'video';
     showModal(modal, {}, '', getAnimation('Enter'), getAnimation('Leave'), true);
@@ -244,6 +245,23 @@ export class YooFormDocumentComponent {
       "attribute": "show-action-sheet",
       "reflect": false
     },
+    "hideSecondaryActions": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "hide-secondary-actions",
+      "reflect": false
+    },
     "mode": {
       "type": "string",
       "mutable": false,

package/dist/collection/components/form/form-document-dialog/form-document-dialog.js

@@ -45,7 +45,7 @@ export class YooFormDocumentDialogComponent {
     }
   }
   onInitDocumentActions() {
-    if (this.selectionMode) {
+    if (this.selectionMode || this.hideSecondaryActions) {
       return;
     }
     this.documentSecondaryActions = [
@@ -532,6 +532,23 @@ export class YooFormDocumentDialogComponent {
       },
       "attribute": "selection-mode",
       "reflect": false
+    },
+    "hideSecondaryActions": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "hide-secondary-actions",
+      "reflect": false
     }
   }; }
   static get states() { return {

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

@@ -675,15 +675,21 @@ span.fr-img-caption.fr-view {
   --inputs-margin: 0 var(--spacing-16, 1rem);
   --video-container-height: 9.375rem;
   --footer-height: var(--spacing-56, 3.5rem);
+  --main-container-overflow-x: visible;
+  --main-container-overflow-y: auto;
+  --inputs-container-parent-overflow-x: visible;
+  --inputs-container-parent-overflow-y: auto;
   display: flex;
   flex-direction: column;
 }
 :host .main-container {
   flex: 1;
-  overflow-y: auto;
+  overflow-x: var(--main-container-overflow-x);
+  overflow-y: var(--main-container-overflow-y);
 }
 :host .main-container .inputs-container-parent {
-  overflow-y: auto;
+  overflow-x: var(--inputs-container-parent-overflow-x);
+  overflow-y: var(--inputs-container-parent-overflow-y);
 }
 :host .main-container .inputs-container-parent.gridstack {
   margin: var(--spacing-16, 1rem);
@@ -1645,9 +1651,11 @@ span.fr-img-caption.fr-view {
   background-color: transparent;
 }
 
+:host(.mission-form.pdf) {
+  --main-container-overflow-y: initial;
+}
 :host(.mission-form.pdf) .main-container {
   flex: initial;
-  overflow-y: initial;
 }
 :host(.mission-form.pdf) .inputs-container-parent {
   margin: initial;
@@ -1703,7 +1711,6 @@ span.fr-img-caption.fr-view {
 }
 :host(.lesson-form.web:not(.lesson-live-preview)) form .inputs-container yoo-form-input-container {
   width: 100%;
-  max-height: calc(100% - 2rem) !important;
 }
 :host(.lesson-form.web:not(.lesson-live-preview)) form yoo-form-choice-button,
 :host(.lesson-form.web:not(.lesson-live-preview)) form yoo-form-choice-chat,
@@ -1716,12 +1723,17 @@ span.fr-img-caption.fr-view {
 :host(.lesson-form.web:not(.lesson-live-preview)) form yoo-form-videoplayer {
   height: 33.3333333333vw;
 }
+:host(.lesson-form.web:not(.lesson-live-preview)) .footer-spacer {
+  height: 0;
+  min-height: 0;
+}
 
 :host(.lesson-form) .progress-container {
   z-index: 2;
   box-sizing: border-box;
   width: 100%;
   padding: var(--spacing-16, 1rem);
+  padding-bottom: 0;
 }
 :host(.lesson-form) .swiper-container {
   height: calc(100% - 3rem);
@@ -1749,6 +1761,12 @@ span.fr-img-caption.fr-view {
   padding: 0 0 var(--spacing-16, 1rem);
 }
 
+:host(.web:not(.inline):not(.inline-row):not(.force-mobile)) {
+  --main-container-overflow-x: hidden;
+  --main-container-overflow-y: hidden;
+  --inputs-container-parent-overflow-x: hidden;
+  --inputs-container-parent-overflow-y: auto;
+}
 :host(.web:not(.inline):not(.inline-row):not(.force-mobile)) yoo-tabs {
   min-height: 3rem;
 }
@@ -1756,7 +1774,6 @@ span.fr-img-caption.fr-view {
   display: flex;
   flex: 1;
   flex-direction: row;
-  overflow: hidden;
 }
 :host(.web:not(.inline):not(.inline-row):not(.force-mobile)) .left-panel-secondary {
   width: 12.5rem;
@@ -1795,8 +1812,6 @@ span.fr-img-caption.fr-view {
 }
 :host(.web:not(.inline):not(.inline-row):not(.force-mobile)) .inputs-container-parent {
   flex: 1;
-  overflow-x: hidden;
-  overflow-y: auto;
   /* Track */
   /* Handle */
 }
@@ -1850,18 +1865,20 @@ span.fr-img-caption.fr-view {
 :host(.web.lesson-form:not(.lesson-live-preview)) .progress-container yoo-progress-bar.top-content {
   width: 25rem;
 }
-:host(.web.lesson-form:not(.lesson-live-preview)) yoo-form-input-container.imagetagging {
-  max-width: 50rem;
-  margin: 0 auto;
+:host(.web.lesson-form:not(.lesson-live-preview)) yoo-form-input-container {
+  padding: var(--spacing-16, 1rem);
+  background-color: var(--stable-ultralight, #fafafa);
 }
 
 :host(.lesson-form) yoo-ion-scroll,
 :host(.lesson-live-preview) yoo-ion-scroll {
-  height: 100%;
+  height: 100;
+  min-height: 100%;
 }
 :host(.lesson-form) yoo-ion-scroll .inputs-container,
 :host(.lesson-live-preview) yoo-ion-scroll .inputs-container {
   height: 100%;
+  min-height: 100%;
 }
 :host(.lesson-form) yoo-ion-scroll .inputs-container .field-placeholder,
 :host(.lesson-live-preview) yoo-ion-scroll .inputs-container .field-placeholder {
@@ -1874,17 +1891,12 @@ span.fr-img-caption.fr-view {
   box-sizing: border-box;
   width: 100%;
   height: 100%;
-  padding: var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);
   --font-size-description: inherit;
 }
 :host(.lesson-form) .scroll-spacer,
 :host(.lesson-live-preview) .scroll-spacer {
   height: 0;
 }
-:host(.lesson-form) .footer-spacer,
-:host(.lesson-live-preview) .footer-spacer {
-  min-height: 0;
-}
 :host(.lesson-form) yoo-form-footer,
 :host(.lesson-live-preview) yoo-form-footer {
   position: relative;
@@ -2090,6 +2102,8 @@ span.fr-img-caption.fr-view {
 }
 
 :host(.inline) {
+  --main-container-overflow-x: hidden;
+  --main-container-overflow-y: hidden;
   position: initial;
   top: initial;
   right: initial;
@@ -2099,8 +2113,6 @@ span.fr-img-caption.fr-view {
 }
 :host(.inline) .main-container {
   flex: 1;
-  overflow-x: hidden;
-  overflow-y: hidden;
 }
 :host(.inline) .main-container .inputs-container-parent {
   margin: 0;
@@ -2293,11 +2305,10 @@ span.fr-img-caption.fr-view {
 }
 
 :host(.toolbar-form) {
+  --inputs-container-parent-overflow-x: hidden;
+  --inputs-container-parent-overflow-y: hidden;
   max-height: 4.125rem;
 }
-:host(.toolbar-form) .main-container .inputs-container-parent {
-  overflow: hidden;
-}
 
 :host(.quickview.web.readonly) .main-container {
   background: var(--stable-ultralight, #fafafa);
@@ -2535,13 +2546,15 @@ span.fr-img-caption.fr-view {
   color: inherit;
 }
 
+:host(.live-preview-form.mobile:not(.inline):not(.inline-row)) {
+  --inputs-container-parent-overflow-y: scroll;
+}
 :host(.live-preview-form.mobile:not(.inline):not(.inline-row)) .inputs-container-parent {
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
   height: 100%;
   padding-bottom: var(--spacing-64, 4rem);
-  overflow-y: scroll;
 }
 :host(.live-preview-form.mobile:not(.inline):not(.inline-row)) .inputs-container {
   box-sizing: border-box;
@@ -2615,6 +2628,9 @@ span.fr-img-caption.fr-view {
   padding: 0;
 }
 
-:host(.form-creator-preview-lesson) {
-  margin-top: var(--safe-area-inset-top);
+:host(.overflow-visible) {
+  --main-container-overflow-x: visible;
+  --main-container-overflow-y: visible;
+  --inputs-container-parent-overflow-x: visible;
+  --inputs-container-parent-overflow-y: visible;
 }