@yoobic/yobi 8.3.0-17 → 8.3.0-18

package/dist/collection/components/form/form-swipe-cards/form-swipe-cards.js

@@ -1,5 +1,5 @@
 import { Draggable, findParent, getMedia, getUUID, gsapTimeline, gsapTo, isCloudinaryLink, isWeb, Power1, translate, translateMulti } from '@shared/utils';
-import { Component, Element, Event, h, Host, Prop, Watch } from '@stencil/core';
+import { Component, Element, Event, forceUpdate, h, Host, Prop, Watch } from '@stencil/core';
 import { clamp, inRange, isEqual, shuffle } from 'lodash-es';
 import { getAppContext } from '../../../utils/helpers/common-helpers';
 import { hasDuplicates, showWarningAlert } from '../../../utils/helpers/draggable-tags-helpers';
@@ -14,25 +14,23 @@ export class YooFormSwipeCardsComponent {
     this.shuffled = true;
     this.values = [];
     this.swipeCards = [];
-    this.animationDelay = this.animated ? .25 : 0;
     this.cardsElements = [];
     this.swipeButtons = [];
   }
   onCategoriesChanged(nv, ov) {
-    if (!isEqual(nv, ov)) {
-      const showAlert = this.livePreview && !this.hasTwoCategories;
-      showWarningAlert(this.host, showAlert, 'NOTFULFILLEDCATEGORIES');
-      if (showAlert) {
-        this.showInstructionView = true;
-      }
+    this.hasDataChanged = !isEqual(nv, ov);
+    if (this.hasDataChanged) {
+      this.spyOnValuesChanged();
     }
   }
-  onValuesChanged() {
+  onValuesChanged(nv, ov) {
+    this.hasDataChanged = !isEqual(nv, ov);
     if (!this.isMode.image) {
       this.spyOnValuesChanged();
     }
   }
-  onImagesChanged() {
+  onImagesChanged(nv, ov) {
+    this.hasDataChanged = !isEqual(nv, ov);
     if (!this.isMode.text) {
       this.spyOnValuesChanged();
     }
@@ -47,10 +45,11 @@ export class YooFormSwipeCardsComponent {
     setTimeout(() => this.displayFooterElement(!this.showInstructionView), 150);
   }
   get isMode() {
+    const { image, text, textimage } = SwipeCardsMode;
     return {
-      image: this.mode === SwipeCardsMode.image,
-      textimage: this.mode === SwipeCardsMode.textimage,
-      text: this.mode === SwipeCardsMode.text
+      image: this.mode === image,
+      textimage: this.mode === textimage,
+      text: this.mode === text
     };
   }
   get numberEmptyItems() {
@@ -73,14 +72,15 @@ export class YooFormSwipeCardsComponent {
   }
   get hasAllCardBeenSwiped() {
     var _a;
-    return !((_a = this.swipeCards) === null || _a === void 0 ? void 0 : _a.filter(card => !card.swipedDirection).length);
+    return !((_a = this.swipeCards) === null || _a === void 0 ? void 0 : _a.filter(({ swipedDirection }) => !swipedDirection).length);
   }
   get buttons() {
-    const getButton = (direction) => { var _a, _b; return (_b = (_a = this.swipeButtons) === null || _a === void 0 ? void 0 : _a.filter(swipeButton => (swipeButton === null || swipeButton === void 0 ? void 0 : swipeButton.id) === `swipe-${direction}`)) === null || _b === void 0 ? void 0 : _b[0]; };
+    const { left, right, undo } = SwipeCardsDirection;
+    const getButton = (direction) => { var _a, _b; return (_b = (_a = this.swipeButtons) === null || _a === void 0 ? void 0 : _a.filter(({ id }) => id === `swipe-${direction}`)) === null || _b === void 0 ? void 0 : _b[0]; };
     return {
-      left: getButton(SwipeCardsDirection.left),
-      undo: getButton(SwipeCardsDirection.undo),
-      right: getButton(SwipeCardsDirection.right)
+      left: getButton(left),
+      undo: getButton(undo),
+      right: getButton(right)
     };
   }
   get currentCard() {
@@ -90,12 +90,8 @@ export class YooFormSwipeCardsComponent {
     var _a;
     return this.getCardElement((_a = this.currentCard) === null || _a === void 0 ? void 0 : _a.id);
   }
-  get formHeight() {
-    var _a;
-    return ((_a = findParent(this.host, 'form')) === null || _a === void 0 ? void 0 : _a.clientHeight) - 1.5 * 16;
-  }
   componentWillLoad() {
-    this.prepareInitGame();
+    this.prepareGame();
   }
   componentDidLoad() {
     this.initGame();
@@ -113,17 +109,15 @@ export class YooFormSwipeCardsComponent {
     this.validityChanged.emit(this.validity);
     return this.validity;
   }
-  prepareInitGame() {
+  prepareGame() {
     this.shuffleCardValues();
+    this.animationDelay = this.animated ? .25 : 0;
     this.revealCards = !this.showInstructionView;
     this.swipeCards = this.initCards();
   }
   initGame() {
     this.displayFooterElement(false);
-    if (!this.showInstructionView) {
-      this.initDraggable();
-    }
-    this.showWarnings();
+    !this.showInstructionView && this.initDraggable();
   }
   updateCardsData() {
     if (this.hasDataChanged) {
@@ -150,7 +144,7 @@ export class YooFormSwipeCardsComponent {
     return (_a = this.cardsElements) === null || _a === void 0 ? void 0 : _a.find((cardElement) => (cardElement === null || cardElement === void 0 ? void 0 : cardElement.id) === id);
   }
   spyOnValuesChanged() {
-    this.showWarnings();
+    this.hasDataChanged && this.showWarnings();
   }
   showWarnings() {
     var _a;
@@ -183,7 +177,7 @@ export class YooFormSwipeCardsComponent {
       return value;
     };
     const getValuesFromDirection = (direction) => this.swipeCards.filter(c => c.swipedDirection === direction).map(c => formatCardValue(c.value));
-    setValueAndValidateInput([
+    this.livePreview ? forceUpdate(this) : setValueAndValidateInput([
       getValuesFromDirection(SwipeCardsDirection.left),
       getValuesFromDirection(SwipeCardsDirection.right)
     ], this);
@@ -236,9 +230,11 @@ export class YooFormSwipeCardsComponent {
   }
   setSwipingColor(swipingDirection) {
     if (this.currentCardElement) {
+      const { left, right } = SwipeCardsDirection;
+      const [categoryLeft, categoryRight] = this.categories;
       const categoryContainer = this.currentCardElement.querySelector('.content-category');
-      const isThrowable = [SwipeCardsDirection.left, SwipeCardsDirection.right].includes(swipingDirection);
-      categoryContainer.textContent = this.getSwipedCategoryValue(swipingDirection);
+      const isThrowable = [left, right].includes(swipingDirection);
+      categoryContainer.textContent = translateMulti(swipingDirection === left ? categoryLeft : swipingDirection === right ? categoryRight : '');
       [this.gameContainerElement, this.currentCardElement].forEach(e => {
         isThrowable ? e.setAttribute('direction', swipingDirection) : e.removeAttribute('direction');
       });
@@ -254,13 +250,13 @@ export class YooFormSwipeCardsComponent {
     const returnedAnimation = timeline();
     // building swiping animation
     const swipeAnimation = timeline({ paused: true });
-    const isSwipeable = (el) => el.classList.contains('current');
+    const isSwipeable = el => el.classList.contains('current');
     swipeAnimation
       .fromTo(this.buttons.left, 1, { scale: 1.5 }, { scale: 1 }, 0)
       .fromTo(this.buttons.right, 1, { scale: 1 }, { scale: 1.5 }, 1)
       .progress(.5);
-    const onStartSwiping = ({ target }) => {
-      if (isSwipeable(target)) {
+    const onStartSwiping = () => {
+      if (isSwipeable(cardElement)) {
         this.blockMoves.emit(true);
         returnedAnimation === null || returnedAnimation === void 0 ? void 0 : returnedAnimation.kill();
       }
@@ -272,33 +268,35 @@ export class YooFormSwipeCardsComponent {
         this.setSwipingColor(this.getSwipedState(swipeProgress).swipedDirection);
       }
     };
-    const onThrowing = ({ target }) => {
-      if (isSwipeable(target)) {
-        const swipedState = this.getSwipedState(swipeAnimation.progress());
-        !swipedState.isCardThrowable ?
+    const onThrowing = () => {
+      const baseProps = { left: 0, top: 0 };
+      if (isSwipeable(cardElement)) {
+        const { isCardThrowable, swipedDirection } = this.getSwipedState(swipeAnimation.progress());
+        !isCardThrowable ?
           returnedAnimation
-            .to(cardElement, this.animationDelay, { left: 0, top: 0 })
+            .to(cardElement, this.animationDelay, baseProps)
             .to([this.buttons.left, this.buttons.right], { scale: 1, ease: Power1.easeInOut }, 0) :
-          this.swipeCard(swipedState.swipedDirection);
+          this.swipeCard(swipedDirection);
       }
       else {
-        gsapTo(cardElement, this.animationDelay, { left: 0, top: 0 });
+        gsapTo(cardElement, this.animationDelay, baseProps);
       }
+      this.blockMoves.emit(false);
     };
     return (new Draggable(cardElement, {
       bound: this.host,
       type: 'left, top',
       cursor: 'grab',
       zIndexBoost: false,
-      onDragStart() { onStartSwiping(this); },
+      onDragStart: () => onStartSwiping(),
       onDrag() { onSwiping(this); },
-      onDragEnd() { onThrowing(this); }
+      onDragEnd: () => onThrowing()
     }));
   }
   clickToSwipe(clickedDirection) {
     if (!this.buttons[clickedDirection].disabled) {
       this.setSwipingColor(clickedDirection);
-      setTimeout(() => this.swipeCard(clickedDirection), 400);
+      this.swipeCard(clickedDirection);
     }
   }
   async undoSwipe() {
@@ -317,25 +315,23 @@ export class YooFormSwipeCardsComponent {
       }
     }
   }
-  getSwipedCategoryValue(direction) {
-    var _a;
-    return ((_a = this.categories) === null || _a === void 0 ? void 0 : _a.length) && translateMulti(direction === SwipeCardsDirection.left ? this.categories[0] : direction === SwipeCardsDirection.right ? this.categories[1] : '');
-  }
-  renderStack() {
-    return h("section", { id: "stack" }, this.swipeCards.map((card, i, s) => {
-      var _a;
-      const currentCardIndex = s.indexOf(this.currentCard) || 0;
+  renderCards() {
+    return h("section", { id: "cards" }, this.swipeCards.map(({ swipedDirection, value, id }, i, s) => {
+      const currentCardIndex = s.indexOf(this.currentCard);
       const hasCurrentCard = currentCardIndex !== -1;
-      return h("section", { class: {
+      return h("div", { id: id, class: {
           card: true,
           current: i === currentCardIndex,
           second: hasCurrentCard && i === currentCardIndex + 1,
           third: hasCurrentCard && i === currentCardIndex + 2,
           revealing: this.revealCards
-        }, id: card.id, ref: el => this.cardsElements[i] = el, ...{ type: this.mode, ...(card.swipedDirection && { direction: card.swipedDirection }) } },
+        }, ref: el => this.cardsElements[i] = el, ...{
+          type: this.mode,
+          ...(swipedDirection && { direction: swipedDirection })
+        } },
         this.hasImage && (h("div", { class: "content-image" },
-          h("yoo-img", { instant: true, src: getMedia(card.value['_downloadURL']) }))),
-        this.hasText && (h("div", { class: "content-text" }, translateMulti(((_a = card.value) === null || _a === void 0 ? void 0 : _a['_filename']) || card.value))),
+          h("yoo-img", { instant: true, src: getMedia(value['_downloadURL']) }))),
+        this.hasText && (h("div", { class: "content-text" }, translateMulti((value === null || value === void 0 ? void 0 : value['_filename']) || value))),
         h("div", { class: "content-category" }));
     }));
   }
@@ -345,14 +341,14 @@ export class YooFormSwipeCardsComponent {
     const iconColor = isWeb(this.host) ? categoryColor : 'light';
     const iconSize = isWeb(this.host) ? 'large' : 'medium';
     const category = this.categories && translateMulti(isLeftCategory ? this.categories[0] : this.categories[1]);
-    return h("div", { class: `category ${side}` },
+    return h("div", { class: { category: true, [side]: true } },
       h("yoo-tag", { noBackground: isWeb(this.host), color: categoryColor, size: "large", icon: `big-arrow-${side}`, iconOnlyColor: iconColor, iconOnlySize: iconSize }),
       h("p", { class: `${categoryColor}` }, category),
       h("span", { class: "stable" }, translate(`SWIPE${side.toUpperCase()}`)));
   }
   renderTopDescription() {
     return h("div", { id: "header" },
-      h("h1", { innerHTML: translateMulti(this.label) }),
+      h("span", { id: "title", innerHTML: translateMulti(this.label) }),
       h("span", { class: "stable" }, translate(this.description || 'CARDSWIPEDEFAULTINSTRUCTIONS')));
   }
   renderInstructions() {
@@ -372,7 +368,8 @@ export class YooFormSwipeCardsComponent {
         } }, translate('START'))));
   }
   renderSwipeButtons() {
-    return h("section", { id: "actions" }, [SwipeCardsDirection.left, SwipeCardsDirection.undo, SwipeCardsDirection.right].map((d, i) => this.renderSwipeAction(d, i)));
+    const { left, undo, right } = SwipeCardsDirection;
+    return h("section", { id: "actions" }, [left, undo, right].map((d, i) => this.renderSwipeAction(d, i)));
   }
   renderSwipeAction(direction, index) {
     var _a;
@@ -382,23 +379,23 @@ export class YooFormSwipeCardsComponent {
     const actionColor = isUndo ? isWeb(this.host) ? 'light' : 'stable-alt' : isLeft ? 'app-color' : 'warning';
     const swipeIcon = isUndo ? 'undo' : `big-arrow-${direction}`;
     const categoryIndex = isLeft ? 0 : 1;
-    return (h("div", { class: { 'action': true, 'hide': this.hasAllCardBeenSwiped && !isUndo } },
+    return (h("div", { class: { action: true, hide: this.hasAllCardBeenSwiped && !isUndo } },
       h("yoo-button", { shape: "circular", rippleType: "unbounded", id: `swipe-${direction}`, size: (isUndo && !isMobile) ? 'medium' : 'large', fill: (isMobile || isUndo) ? 'solid' : 'transparent', color: isUndo ? isMobile ? 'stable-light' : 'text-color' : actionColor.concat('-20'), ref: (element) => (this.swipeButtons[index] = element), onClick: () => isUndo ? this.undoSwipe() : this.clickToSwipe(direction) },
         h("yoo-icon", { name: swipeIcon, color: actionColor, size: isMobile ? 'medium' : isUndo ? 'small' : 'large' })),
       !isUndo && ((_a = this.categories) === null || _a === void 0 ? void 0 : _a.length) && h("span", { class: actionColor }, translateMulti(this.categories[categoryIndex]))));
   }
   renderEndGameMessage() {
-    return h("section", { id: "end-message", class: { 'active': this.hasAllCardBeenSwiped } },
+    return h("section", { id: "end-message", class: { active: this.hasAllCardBeenSwiped } },
       h("yoo-lottie", { autoplay: this.hasAllCardBeenSwiped, type: "check" }),
       h("div", { innerHTML: translate('ENDSWIPINGCARDSMESSAGE') }),
       h("span", null, translate('CLICKTOCONTINUE', { buttonName: this.nextButtonText })));
   }
-  renderCards() {
+  renderGame() {
     return [
       isWeb(this.host) && !this.livePreview && this.renderTopDescription(),
       h("section", { id: "game", ref: (element) => (this.gameContainerElement = element) },
         this.renderEndGameMessage(),
-        this.renderStack()),
+        this.renderCards()),
       this.renderSwipeButtons()
     ];
   }
@@ -426,9 +423,9 @@ export class YooFormSwipeCardsComponent {
       h("p", { slot: "content" }));
   }
   render() {
-    return (h(Host, { ...(this.formHeight && { style: { height: `${this.formHeight}px` } }), class: { ...getAppContext(this.host), 'swiper-no-swiping': !this.readonly } },
+    return (h(Host, { class: { ...getAppContext(this.host), 'swiper-no-swiping': !this.readonly, instructions: this.showInstructionView } },
       this.renderBanner(),
-      !this.readonly && (this.showInstructionView ? this.renderInstructions() : this.renderCards()),
+      !this.readonly && (this.showInstructionView ? this.renderInstructions() : this.renderGame()),
       this.readonly && this.renderSummary()));
   }
   static get is() { return "yoo-form-swipe-cards"; }

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

@@ -242,7 +242,9 @@ export class YooFormCreatorComponent {
     return ((_a = this.missionDescription) === null || _a === void 0 ? void 0 : _a.type) === 'lesson';
   }
   onMissionDescriptionUpdated() {
-    this.translatePage.missionDescription = this.missionDescription;
+    if (this.translatePage) {
+      this.translatePage.missionDescription = this.missionDescription;
+    }
   }
   onCustomFormFieldsUpdated() {
     if (this.fieldSelectorElement) {
@@ -288,8 +290,8 @@ export class YooFormCreatorComponent {
     if (this.hasAdditionBeenClicked && ((_a = this.newFieldCondition) === null || _a === void 0 ? void 0 : _a.condition)) {
       this.newFieldCondition = null;
       this.overlayElement.initialNewFieldCondition = this.newFieldCondition;
-      this.hasAdditionBeenClicked = false;
     }
+    this.hasAdditionBeenClicked = false;
   }
   onTranslationsChanged() {
     var _a, _b;
@@ -863,7 +865,7 @@ export class YooFormCreatorComponent {
           this.expandableBlocks[itemIndex].formField.required =
             originalItemIndex === itemIndex && attributesToForceUpdate ? attributesToForceUpdate.required : this.currentSlides[slideIndex].items[itemIndex].required;
           this.expandableBlocks[itemIndex].formField.title;
-          const key = title.replace(/%/g, '');
+          const key = title === null || title === void 0 ? void 0 : title.replace(/%/g, '');
           const translationIndex = this.translations.findIndex((tran) => tran.key === key);
           if (translationIndex > -1) {
             title = this.translations[translationIndex][getCurrentLanguage()];
@@ -1498,6 +1500,9 @@ export class YooFormCreatorComponent {
       const fieldsToMove = [];
       const selectedFieldNames = [];
       selectedFields.forEach((selectedField) => {
+        if (slideIndex !== selectedField.slideIndex) {
+          this.currentSlides[selectedField.slideIndex].items[selectedField.itemIndex].isExpanded = false;
+        }
         fieldsToMove.push(this.currentSlides[selectedField.slideIndex].items[selectedField.itemIndex]);
         selectedFieldNames.push(this.currentSlides[selectedField.slideIndex].items[selectedField.itemIndex].name);
       });

package/dist/collection/components/form-creator/form-creator-block-expandable/form-creator-block-expandable.js

@@ -315,9 +315,6 @@ export class YooFormCreatorBlockExpandableComponent {
             if (this.contentBottomElement) {
               this.contentBottomElement.style.display = 'flex';
             }
-            if (this.arrowElement) {
-              this.arrowElement.name = this.isExpanded ? 'arrow-up' : 'arrow-down';
-            }
             gsapSet(slotContent, { overflow: 'unset' });
           },
           ease: Power3.easeIn
@@ -325,6 +322,9 @@ export class YooFormCreatorBlockExpandableComponent {
         const animationDelay = 0.5;
         this.isExpanded = shouldExpand;
         this.blockExpanded.emit({ expanded: shouldExpand, name: this.formField.name });
+        if (this.arrowElement) {
+          this.arrowElement.name = this.isExpanded ? 'arrow-up' : 'arrow-down';
+        }
         gsapFromTo(contentBlock, animationDelay, from, to);
       }
     }

package/dist/collection/feature-learn/learning/lesson-question-result/lesson-question-result.js

@@ -219,7 +219,7 @@ export class YooLessonQuestionResultComponent {
     }
     else if (!isContentOnly(this.lessonType)) {
       items = (_b = this.fields) === null || _b === void 0 ? void 0 : _b.map((field, i) => {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g;
         return ({
           name: `${translate('QUESTION')} ${i + 1}`,
           description: translateMulti(field.sentence || field.description || field.title),
@@ -231,11 +231,12 @@ export class YooLessonQuestionResultComponent {
               ? ((_d = this.lessonData[field.name]) === null || _d === void 0 ? void 0 : _d.earnedConfidencePoints) + ((_e = this.lessonData[field.name]) === null || _e === void 0 ? void 0 : _e.earnedQuestionPoints)
               : ((_f = this.lessonData[field.name]) === null || _f === void 0 ? void 0 : _f.fieldValidity)
                 ? Math.round(this.points)
-                : 0
+                : 0,
+          isCorrect: (_g = this.lessonData[field.name]) === null || _g === void 0 ? void 0 : _g.fieldValidity
         });
       });
     }
-    return h("yoo-points-recap", { heading: translate('TOTALPOINTSEARNED'), totalPoints: Math.round(this.earnedPoints), items: items, showItemIcon: showItemIcon });
+    return h("yoo-points-recap", { heading: translate('TOTALPOINTSEARNED'), totalPoints: Math.round(this.earnedPoints), items: items, showItemIcon: showItemIcon, forceTotalPoints: true });
   }
   renderProgressBarLessonRecap() {
     var _a;