@yoobic/yobi 8.3.0-8 → 8.3.1-0

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

@@ -1,7 +1,6 @@
 import { Draggable, getUUID, gsapTo, isImageUrl, translateMulti } from '@shared/utils';
 import { Component, Element, Event, h, Host, Prop, State, Watch } from '@stencil/core';
 import { difference, isEqual, shuffle } from 'lodash-es';
-import { getAppContext } from '../../../utils/helpers/common-helpers';
 import { showWarningAlert } from '../../../utils/helpers/draggable-tags-helpers';
 import { setValueAndValidateInput } from '../../../utils/helpers/form-input-helpers';
 import { CONNECT_TYPES } from './form-connect.interfaces';
@@ -25,8 +24,10 @@ export class YooFormConnectComponent {
     this.isVisible = false;
     this.colors = ['warning', 'accent', 'app-color', 'info', 'energized'];
   }
-  onValuesChanged() {
-    showWarningAlert(this.host, !this.isGameMatchable, 'NOTALLPAIREDVALUES');
+  async onValuesChanged() {
+    var _a;
+    showWarningAlert(this.host, ((_a = this.values) === null || _a === void 0 ? void 0 : _a.length) > 1 && !this.isGamePairable, 'NOTALLPAIREDVALUES');
+    await this.scrollToRevealGame();
   }
   onValidityChanged() {
     this.validityChanged.emit(this.validity);
@@ -40,19 +41,16 @@ export class YooFormConnectComponent {
   initAnswerChanged() {
     this.prepareGame();
   }
-  async onIsVisibleChanged(state) {
-    if (state) {
-      await this.scrollToRevealGame();
-      this.setScrollableHeight();
-    }
+  async onIsVisibleChanged() {
+    this.isVisible && this.scrollToRevealGame();
   }
   get hasValues() {
     var _a, _b, _c, _d;
     return !!(((_b = (_a = this.values) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.length) || ((_d = (_c = this.values) === null || _c === void 0 ? void 0 : _c[1]) === null || _d === void 0 ? void 0 : _d.length));
   }
-  get isGameMatchable() {
+  get isGamePairable() {
     var _a, _b, _c, _d, _e, _f;
-    return ((_c = (_b = (_a = this.values) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.filter(v => v)) === null || _c === void 0 ? void 0 : _c.length) === ((_f = (_e = (_d = this.values) === null || _d === void 0 ? void 0 : _d[1]) === null || _e === void 0 ? void 0 : _e.filter(v => v)) === null || _f === void 0 ? void 0 : _f.length);
+    return ((_a = this.values) === null || _a === void 0 ? void 0 : _a.length) && ((_c = (_b = this.values[0]) === null || _b === void 0 ? void 0 : _b.filter(v => v)) === null || _c === void 0 ? void 0 : _c.length) === ((_f = (_e = (_d = this.values) === null || _d === void 0 ? void 0 : _d[1]) === null || _e === void 0 ? void 0 : _e.filter(v => v)) === null || _f === void 0 ? void 0 : _f.length);
   }
   get draggableElements() {
     return Array.from(this.host.shadowRoot.querySelectorAll('.draggable') || []);
@@ -73,45 +71,50 @@ export class YooFormConnectComponent {
     this.initGame();
   }
   prepareGame() {
-    this.prepareItems();
+    this.prepareData();
     this.connectItems();
-    this.shuffleItems();
+    this.shuffleData();
   }
   async initGame() {
     await this.scrollToRevealGame();
-    this.setScrollableHeight();
     this.setDraggableObserver();
     this.initDraggables();
-    showWarningAlert(this.host, !this.isGameMatchable, 'NOTALLPAIREDVALUES');
   }
   initDraggables() {
     var _a;
     (_a = this.draggableElements) === null || _a === void 0 ? void 0 : _a.forEach(e => this.initDraggableActions(e));
   }
   async scrollToRevealGame() {
-    const scrollElement = this.host.closest('yoo-ion-scroll');
-    return scrollElement && !this.livePreview && new Promise(resolve => {
-      setTimeout(() => {
-        scrollElement.scrollTo({ top: scrollElement.scrollHeight, behavior: 'smooth' });
-        resolve();
-      }, 1000);
-    });
-  }
-  setScrollableHeight() {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a;
     const GAP_PADDING = 8;
-    const { bottom } = this.host.getBoundingClientRect();
-    const numberOfItems = ((_b = (_a = this.values) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.length) || 0;
-    const formBounding = (_c = this.host.closest('form')) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect();
-    const itemHeight = ((_e = (_d = this.innerContainerElement) === null || _d === void 0 ? void 0 : _d.querySelector('[id]')) === null || _e === void 0 ? void 0 : _e.clientHeight) + GAP_PADDING + GAP_PADDING / numberOfItems + 1;
-    if (itemHeight && formBounding && bottom > formBounding.bottom && ((_g = (_f = this.values) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.length)) {
-      const maxItems = Math.floor(formBounding.height / itemHeight);
-      const maxHeight = maxItems * itemHeight + (maxItems + 1) * GAP_PADDING;
-      this.innerContainerElement.style.maxHeight = `${Math.min(formBounding.height, maxHeight + GAP_PADDING)}px`;
+    const scrollElement = this.host.closest('yoo-ion-scroll');
+    if (scrollElement && ((_a = this.values) === null || _a === void 0 ? void 0 : _a.length) === 2) {
+      const setScrollableHeight = () => {
+        const getHeight = (el) => { var _a; return (_a = el === null || el === void 0 ? void 0 : el.getBoundingClientRect()) === null || _a === void 0 ? void 0 : _a.height; };
+        const formHeight = getHeight(this.host.closest('yoo-form-input-container'));
+        const tileHeight = getHeight(this.innerContainerElement.querySelector('[type]'));
+        if (formHeight && tileHeight && !this.readonly) {
+          const numberItems = Math.max(this.values[0].length, this.values[1].length);
+          const itemsHeight = numberItems * tileHeight + (numberItems + 1) * GAP_PADDING;
+          this.innerContainerElement.classList.toggle('overflowing', itemsHeight > formHeight);
+          this.innerContainerElement.style.height = `${Math.min(formHeight, itemsHeight)}px`;
+        }
+      };
+      await new Promise(resolve => {
+        setTimeout(() => {
+          scrollElement.scrollTo({
+            top: scrollElement.scrollHeight,
+            behavior: 'smooth'
+          });
+          resolve();
+        }, 1000);
+      });
+      setScrollableHeight();
     }
   }
   setDraggableObserver() {
-    this.draggables = this.draggables.map(d => {
+    var _a;
+    this.draggables = ((_a = this.draggables) === null || _a === void 0 ? void 0 : _a.map(d => {
       return new Proxy(d, {
         set: (draggable, key, value) => {
           draggable[key] = value;
@@ -134,16 +137,16 @@ export class YooFormConnectComponent {
           return true;
         }
       });
-    });
+    })) || [];
   }
-  shuffleItems() {
+  shuffleData() {
     this.shuffled && CONNECT_TYPES.forEach(type => this[`${type}s`] = shuffle(this[`${type}s`]));
   }
-  prepareItems() {
+  prepareData() {
     CONNECT_TYPES.forEach((type, index) => {
       var _a, _b;
       this[`${type}s`] = ((_b = (_a = this.values) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b.map((value, i) => ({
-        value,
+        value: typeof value === 'string' ? value : (value === null || value === void 0 ? void 0 : value['text']) || (value === null || value === void 0 ? void 0 : value['file']),
         id: getUUID(),
         ...(!index && {
           color: this.colors[i]
@@ -167,25 +170,25 @@ export class YooFormConnectComponent {
   }
   initDraggableActions(draggableElement) {
     var _a;
-    if (draggableElement) {
+    const currentDraggable = draggableElement && ((_a = this.draggables) === null || _a === void 0 ? void 0 : _a.find(({ id }) => id === draggableElement.id));
+    if (currentDraggable) {
       let tempConnectableElement;
-      const currentDraggable = (_a = this.draggables) === null || _a === void 0 ? void 0 : _a.find(d => (d === null || d === void 0 ? void 0 : d.id) === draggableElement.id);
       const onDragStartElement = () => {
         this.blockMoves.emit(true);
-        draggableElement.removeAttribute('data-hit');
+        draggableElement.removeAttribute('hit');
       };
       const onDragElement = () => {
         var _a, _b;
         const overlapThreshold = '65%';
         const { x, width } = draggableElement.getBoundingClientRect();
-        const connectableThreshold = this.innerContainerElement.querySelector('.connectables').getBoundingClientRect().x;
+        const connectableThreshold = this.innerContainerElement.querySelector('#connectables').getBoundingClientRect().x;
         const isInConnectableArea = x + width >= connectableThreshold;
         if (isInConnectableArea) {
           this.connectableElements.forEach(e => {
             var _a, _b;
             if (((_b = (_a = currentDraggable === null || currentDraggable === void 0 ? void 0 : currentDraggable.draggableInstance) === null || _a === void 0 ? void 0 : _a.hitTest) === null || _b === void 0 ? void 0 : _b.call(_a, e, overlapThreshold)) && e.id !== currentDraggable.connectableId) {
               tempConnectableElement = e;
-              tempConnectableElement.setAttribute('data-hit', 'true');
+              tempConnectableElement.setAttribute('hit', 'true');
             }
           });
         }
@@ -198,7 +201,7 @@ export class YooFormConnectComponent {
               color: 'var(--light)'
             });
           }
-          tempConnectableElement.removeAttribute('data-hit');
+          tempConnectableElement.removeAttribute('hit');
           tempConnectableElement = null;
         }
       };
@@ -206,13 +209,13 @@ export class YooFormConnectComponent {
         await gsapTo(draggableElement, this.animated ? 0.25 : 0, { x: 0, y: 0 });
         if (tempConnectableElement) {
           currentDraggable.connectableId = tempConnectableElement.id;
-          tempConnectableElement.removeAttribute('data-hit');
+          tempConnectableElement.removeAttribute('hit');
           this.autoCompleteLastConnection();
         }
         tempConnectableElement = null;
         this.blockMoves.emit(false);
       };
-      const onClickElement = () => {
+      const onClickElement = async () => {
         var _a;
         currentDraggable.hit = { value: !((_a = currentDraggable.hit) === null || _a === void 0 ? void 0 : _a.value) && !currentDraggable.connectableId };
         delete currentDraggable.connectableId;
@@ -220,7 +223,7 @@ export class YooFormConnectComponent {
         this.getUserAnswers();
         this.validateUserAnswers();
       };
-      if (!this.readonly && this.isGameMatchable && draggableElement) {
+      if (!this.readonly && this.isGamePairable && draggableElement) {
         currentDraggable.draggableInstance = new Draggable(draggableElement, {
           autoScroll: 1,
           bound: this.innerContainerElement,
@@ -237,7 +240,8 @@ export class YooFormConnectComponent {
   }
   validateUserAnswers(userAnswers = this.userAnswers) {
     this.validity = !(userAnswers === null || userAnswers === void 0 ? void 0 : userAnswers.reduce((acc, v) => acc + v.filter(i => !i).length, 0));
-    setValueAndValidateInput(userAnswers, this);
+    this.value = userAnswers;
+    setValueAndValidateInput(this.value, this);
   }
   autoEraseLastConnection() {
     const connectedDraggables = this.draggables.filter(d => d.connectableId);
@@ -278,29 +282,32 @@ export class YooFormConnectComponent {
   }
   renderContainer(name) {
     var _a;
-    return (h("section", { class: { [`${name}s`]: true } }, (_a = this[`${name}s`]) === null || _a === void 0 ? void 0 : _a.map((item) => {
+    return (h("section", { id: `${name}s` }, (_a = this[`${name}s`]) === null || _a === void 0 ? void 0 : _a.map((item) => {
       var _a;
       const isDraggable = name === 'draggable';
       const { id, value, connectableId, color } = item || {};
-      const isImage = !!(value && isImageUrl(value));
+      const isImage = value && isImageUrl(value);
       const connectable = this.draggables.find(d => d.connectableId === id);
       const isConnected = !!(connectableId || connectable);
       const tileColor = color || (connectable === null || connectable === void 0 ? void 0 : connectable.color);
       const connectedAttr = { style: { backgroundColor: `var(--${tileColor})`, color: 'var(--light)' }, connected: true };
-      return !!value && (h("div", { class: "tile-container" },
-        h("div", { ...(isConnected && connectedAttr), "data-hit": !!((_a = item === null || item === void 0 ? void 0 : item.hit) === null || _a === void 0 ? void 0 : _a.value) && isDraggable, id: id, key: id, class: { [name]: true, image: isImage }, onClick: () => { !isDraggable && this.onConnectableClick(item); } },
-          !isImage ? h("p", null, this.truncateValue(value)) : [h("yoo-img", { type: "background", src: value }), h("div", { class: "overlay" })],
-          this.readonly && this.renderCorrectionIcon(value))));
+      const tileAttr = { ...(isConnected && connectedAttr), hit: !!((_a = item === null || item === void 0 ? void 0 : item.hit) === null || _a === void 0 ? void 0 : _a.value) && isDraggable, type: isImage ? 'image' : 'text' };
+      return !!value && (h("div", { ...tileAttr, id: id, key: id, class: { [name]: true }, onClick: () => { !isDraggable && this.onConnectableClick(item); } },
+        !isImage ? h("p", null, this.truncateValue(value)) : [h("yoo-img", { type: "background", src: value }), h("div", { id: "overlay" })],
+        this.readonly && this.renderCorrectionIcon(value)));
     })));
   }
   renderBanner() {
     return this.livePreview && h("yoo-banner", null,
       h("p", { slot: "content" }));
   }
+  renderMain() {
+    return this.hasValues && h("main", { ref: element => (this.innerContainerElement = element) }, CONNECT_TYPES.map(type => this.renderContainer(type)));
+  }
   render() {
-    return this.hasValues && (h(Host, { class: getAppContext(this.host) },
+    return h(Host, null,
       this.renderBanner(),
-      h("div", { class: "inner-container", ref: (element) => (this.innerContainerElement = element) }, CONNECT_TYPES.map(type => this.renderContainer(type)))));
+      this.renderMain());
   }
   static get is() { return "yoo-form-connect"; }
   static get encapsulation() { return "shadow"; }
@@ -359,7 +366,7 @@ export class YooFormConnectComponent {
         "text": "true if the component is loaded within the preview mode in the course-creator"
       },
       "attribute": "live-preview",
-      "reflect": false
+      "reflect": true
     },
     "animated": {
       "type": "boolean",
@@ -376,7 +383,7 @@ export class YooFormConnectComponent {
         "text": "true if the component can have animations"
       },
       "attribute": "animated",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "true"
     },
     "shuffled": {

package/dist/collection/components/form/form-date-time/form-date-time.js

@@ -226,7 +226,7 @@ export class YooFormDateTimeComponent {
       this.dialog.style.height = 'auto';
       showModal(this.dialog, null, this.updateModalCssClass(), this.getModalAnimation('Enter'), this.getModalAnimation('Leave'), true, false, null, null, null, null, null, null, null, () => {
         if (this.dialog) {
-          const { placement } = getDialogPosition(this.outerContainer.getBoundingClientRect(), 'below', this.dialog, width);
+          const { placement } = getDialogPosition(this.outerContainer, 'below', this.dialog, width);
           const maxDialogHeight = placement === 'above' ? top : window.innerHeight - (top + height);
           this.dialog.style.transition = 'all 750ms';
           this.dialog.style.maxHeight = `${maxDialogHeight}px`;
@@ -235,7 +235,7 @@ export class YooFormDateTimeComponent {
       }).then(onClose);
     }
     else {
-      showModal(this.dialog, { half: true, coeffHalf: this.isTimeInput(this.type) ? 0.33 : 0.66 }, null, getModalAnimation('Enter', 'Y'), getModalAnimation('Leave', 'Y'), true, false).then(onClose);
+      showModal(this.dialog, { half: true, coeffHalf: this.isTimeInput(this.type) ? 0.33 : 0.66 }, null, getModalAnimation('Enter', 'Y', { host: this.host }), getModalAnimation('Leave', 'Y', { host: this.host }), true, false).then(onClose);
     }
   }
   onDateChanged(event) {

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

@@ -1,4 +1,4 @@
-import { ScreenOrientation } from '@ionic-native/screen-orientation';
+import { ScreenOrientation } from '@awesome-cordova-plugins/screen-orientation';
 import { changeExtension, closeModal, Cloudinary, dispatchCustomEvent, downloadFile, downloadFileToDevice, fileNativeCheckFile, getAsyncExtraData, getExtension, getNativeDirectory, getPermissions, getSession, getType, isAndroid, isAudio, isCloudinaryLink, isDateBefore, isDocumentDownloadSupported, isDocumentEmailSupported, isFile, isNativeMobile, isVideo, isWeb, pipes, showActionSheet, translate } from '@shared/utils';
 import { Component, Element, h, Host, Prop, State } from '@stencil/core';
 import { isString } from 'lodash-es';
@@ -54,7 +54,7 @@ export class YooFormDocumentDialogComponent {
         icon: 'email',
         iconColor: 'dark',
         cssClass: isWeb(this.host) ? 'bg-app-color-hover' : 'bg-app-color light',
-        isVisible: () => isDocumentEmailSupported(this.document) && getPermissions().canShareByEmail,
+        isVisible: () => { var _a; return isDocumentEmailSupported(this.document) && !((_a = getSession()) === null || _a === void 0 ? void 0 : _a.isExternal) && getPermissions().canShareByEmail; },
         handler: () => {
           getAsyncExtraData({
             type: 'email-dialog',

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

@@ -202,7 +202,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 /* spacing for padding, margin, etc... */
 /* shadow */
 /*!
- * froala_editor v4.0.12 (https://www.froala.com/wysiwyg-editor)
+ * froala_editor v4.0.13 (https://www.froala.com/wysiwyg-editor)
  * License https://froala.com/wysiwyg-editor/terms/
  * Copyright 2014-2022 Froala Labs
  */
@@ -1574,6 +1574,13 @@ span.fr-img-caption.fr-view {
     max-height: 25rem;
   }
 }
+:host(.mission-form:not(.readonly)) yoo-banner,
+:host(.workflow-form:not(.readonly)) yoo-banner,
+:host(.kanban-form:not(.readonly)) yoo-banner {
+  width: calc(100% - var(--spacing-32, 2rem));
+  max-width: 34rem;
+  margin: var(--spacing-16, 1rem) auto 0;
+}
 :host(.mission-form:not(.readonly)) yoo-form-progress-indicator,
 :host(.workflow-form:not(.readonly)) yoo-form-progress-indicator,
 :host(.kanban-form:not(.readonly)) yoo-form-progress-indicator {
@@ -1822,7 +1829,7 @@ span.fr-img-caption.fr-view {
   margin: 0;
 }
 
-:host(.web:not(.inline):not(.inline-row):not(.force-mobile):not(.mission-results):not(.lesson-detail.readonly)) .inputs-container-parent:not(.gridstack) {
+:host(.web:not(.inline):not(.inline-row):not(.force-mobile):not(.mission-results):not(.lesson-detail.readonly):not(.wizard-single)) .inputs-container-parent:not(.gridstack) {
   padding: 0 var(--spacing-08, 0.5rem);
 }
 
@@ -2127,7 +2134,7 @@ span.fr-img-caption.fr-view {
 :host(.inline) yoo-ion-slide .scroll-spacer {
   height: 0;
 }
-:host(.inline) yoo-ion-slide .footer-spacer {
+:host(.inline) .footer-spacer {
   display: none;
   height: 0;
   min-height: 0;
@@ -2602,4 +2609,8 @@ span.fr-img-caption.fr-view {
 :host(.live-preview-form.web:not(.inline):not(.inline-row):not(.force-mobile)) yoo-tabs {
   flex-shrink: 0;
   padding: 0;
+}
+
+:host(.form-creator-preview-lesson) {
+  margin-top: var(--safe-area-inset-top);
 }