@yoobic/yobi 8.3.0-16 → 8.3.0-19

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

@@ -300,7 +300,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   position: relative;
   display: block;
   height: 100%;
-  overflow: hidden;
 }
 :host yoo-banner {
   height: 0;
@@ -310,13 +309,11 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   transition: opacity 1s ease-in-out;
 }
 :host #instructions #header {
-  padding: var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);
-  background: var(--dark, #000000);
-  border-radius: var(--border-radius-04, 0.25rem);
+  display: flex;
+  flex-direction: column;
 }
-:host #instructions #header h1 {
-  margin: 0;
-  color: var(--light, #ffffff);
+:host #instructions #header #title {
+  font-weight: bold;
 }
 :host #instructions #categories {
   display: inline-grid;
@@ -325,9 +322,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   margin: var(--spacing-24, 1.5rem) 0;
   text-align: center;
 }
-:host #instructions #categories yoo-icon {
-  margin: 0 auto;
-}
 :host #instructions #categories .category {
   display: flex;
   flex-direction: column;
@@ -339,12 +333,17 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   max-width: 75%;
   margin: auto;
   padding: var(--spacing-16, 1rem) 0;
+  font-weight: bold;
 }
 :host #instructions #categories .category yoo-tag {
   margin: 0 auto;
 }
 :host #instructions yoo-button {
-  padding: var(--spacing-16, 1rem);
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  box-sizing: border-box;
 }
 :host #instructions #document {
   background-color: var(--light, #ffffff);
@@ -382,7 +381,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host [direction].card.current.card + .card + .card + .card {
   transform: translate(0%, -2%) scale(0.9);
-  opacity: 0.7;
+  opacity: 1;
 }
 :host [direction=left]#game, :host [direction=left].current > .content-category {
   background-color: var(--app-color, #5a30f4) !important;
@@ -440,23 +439,23 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   padding-top: 85%;
   content: "";
 }
-:host #stack {
+:host #cards {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 100%;
   width: 65%;
-  max-width: 25rem;
+  max-width: 16rem;
   height: 100%;
   margin-top: var(--spacing-16, 1rem);
 }
-:host #stack.rtl {
+:host #cards.rtl {
   top: 50%;
   right: 50%;
   transform: translate(50%, -50%);
 }
-:host #stack .card {
+:host #cards .card {
   position: absolute;
   top: 0;
   right: 0;
@@ -475,20 +474,21 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   border-radius: var(--border-radius-08, 0.5rem);
   box-shadow: var(--shadow-05, -0.375rem -0.375rem 0.5rem 0 rgba(0, 0, 0, 0.1));
   transition: transform 0.25s, opacity 0.25s, background-color 0.25s;
+  will-change: transform, opacity;
 }
-:host #stack .card:not([direction]) {
+:host #cards .card:not([direction]) {
   transform: translate(0, -5%) scale(0.85);
   opacity: 0;
 }
-:host #stack .card.current {
+:host #cards .card.current {
   z-index: 3;
 }
-:host #stack .card.current:not(.revealing) {
+:host #cards .card.current:not(.revealing) {
   transform: translate(0%, 9%) scale(1);
   opacity: 1;
   transition-delay: 200ms;
 }
-:host #stack .card.current.revealing {
+:host #cards .card.current.revealing {
   animation: "current" 0.25s ease-in-out;
   animation-delay: 150ms;
   animation-fill-mode: forwards;
@@ -499,15 +499,15 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
     opacity: 1;
   }
 }
-:host #stack .card.second {
+:host #cards .card.second {
   z-index: 2;
 }
-:host #stack .card.second:not(.revealing) {
+:host #cards .card.second:not(.revealing) {
   transform: translate(0%, 3.5%) scale(0.95);
   opacity: 1;
   transition-delay: 400ms;
 }
-:host #stack .card.second.revealing {
+:host #cards .card.second.revealing {
   animation: "second" 0.25s ease-in-out;
   animation-delay: 300ms;
   animation-fill-mode: forwards;
@@ -518,15 +518,15 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
     opacity: 1;
   }
 }
-:host #stack .card.third {
+:host #cards .card.third {
   z-index: 1;
 }
-:host #stack .card.third:not(.revealing) {
+:host #cards .card.third:not(.revealing) {
   transform: translate(0%, -2%) scale(0.9);
-  opacity: 0.7;
+  opacity: 1;
   transition-delay: 600ms;
 }
-:host #stack .card.third.revealing {
+:host #cards .card.third.revealing {
   animation: "third" 0.25s ease-in-out;
   animation-delay: 450ms;
   animation-fill-mode: forwards;
@@ -534,60 +534,54 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 @keyframes third {
   to {
     transform: translate(0%, -2%) scale(0.9);
-    opacity: 0.7;
+    opacity: 1;
   }
 }
-:host #stack .card:after {
-  display: block;
-  height: 0;
-  padding-top: 133%;
-  content: "";
-}
-:host #stack .card.current .content-image,
-:host #stack .card.current .content-text, :host #stack .card[direction] .content-image,
-:host #stack .card[direction] .content-text {
+:host #cards .card.current .content-image,
+:host #cards .card.current .content-text, :host #cards .card[direction] .content-image,
+:host #cards .card[direction] .content-text {
   opacity: 1 !important;
 }
-:host #stack .card[swiped] {
+:host #cards .card[swiped] {
   animation: fade-out 1s ease-out;
   animation-fill-mode: forwards;
 }
-:host #stack .card[swiped=left] {
+:host #cards .card[swiped=left] {
   transform: translate(-100%, 15%) rotate(-15deg);
 }
-:host #stack .card[swiped=right] {
+:host #cards .card[swiped=right] {
   transform: translate(100%, 15%) rotate(15deg);
 }
-:host #stack .card .content-category,
-:host #stack .card .content-image,
-:host #stack .card .content-text {
+:host #cards .card [class^=content] {
   position: absolute;
   width: 100%;
   height: 100%;
   word-break: break-word;
   opacity: 0;
 }
-:host #stack .card .content-category,
-:host #stack .card .content-text {
+:host #cards .card .content-category,
+:host #cards .card .content-text {
   display: flex;
   align-items: center;
   justify-content: center;
+  box-sizing: border-box;
+  padding: var(--spacing-16, 1rem);
 }
-:host #stack .card .content-image {
+:host #cards .card .content-image {
   transition: opacity 0.25s linear;
 }
-:host #stack .card[type=image] yoo-img {
+:host #cards .card[type=image] yoo-img {
   height: 100%;
 }
-:host #stack .card[type=textimage] .content-image {
+:host #cards .card[type=textimage] .content-image {
   top: 0;
   bottom: 3.5rem;
 }
-:host #stack .card[type=textimage] .content-image yoo-img {
+:host #cards .card[type=textimage] .content-image yoo-img {
   height: calc(100% - 3.5rem);
 }
-:host #stack .card[type=textimage] .content-text,
-:host #stack .card[type=textimage] .content-category {
+:host #cards .card[type=textimage] .content-text,
+:host #cards .card[type=textimage] .content-category {
   bottom: 0;
   height: 3.5rem;
 }
@@ -726,6 +720,22 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   transition: transform 0.8s linear;
 }
 
+:host([live-preview]),
+:host(.mobile) {
+  min-height: 70vh;
+}
+:host([live-preview]) #instructions #header,
+:host(.mobile) #instructions #header {
+  padding: var(--spacing-16, 1rem);
+  background: var(--dark, #000000);
+  border-radius: var(--border-radius-04, 0.25rem);
+}
+:host([live-preview]) #instructions #header #title,
+:host(.mobile) #instructions #header #title {
+  color: var(--light, #ffffff);
+  font-weight: bold;
+  font-size: var(--font-size-28, 1.75rem);
+}
 :host([live-preview]) #instructions yoo-button,
 :host(.mobile) #instructions yoo-button {
   position: absolute;
@@ -733,20 +743,28 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   width: stretch;
 }
 
-:host(.web:not([live-preview])) #instructions #header {
-  background: unset;
+:host(.web:not([live-preview])) #instructions {
+  position: relative;
+}
+:host(.web:not([live-preview])) #instructions yoo-icon[name=swipe-explanation] {
+  width: 5rem;
+  height: 5rem;
+  margin: auto;
+  --inner-width: 5rem;
+  --inner-height: 5rem;
 }
 :host(.web:not([live-preview])) #instructions yoo-button {
   position: fixed;
-  right: var(--spacing-16, 1rem);
+  right: var(--spacing-32, 2rem);
   bottom: var(--spacing-16, 1rem);
   z-index: 1;
   transform: translateY(-50%);
 }
 :host(.web:not([live-preview])) #game {
+  height: 60%;
   max-height: 21rem;
 }
-:host(.web:not([live-preview])) #game #stack {
+:host(.web:not([live-preview])) #game #cards {
   top: 5%;
   margin-top: unset;
   transform: translate(-50%, 0);
@@ -761,11 +779,15 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   align-self: end;
 }
 :host(.web:not([live-preview])) #header {
-  margin-bottom: var(--spacing-24, 1.5rem);
+  display: flex;
+  flex-direction: column;
+  padding: var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);
   line-height: 1.75;
   text-align: center;
+  background-color: var(--stable-ultralight, #fafafa);
 }
-:host(.web:not([live-preview])) #header h1 {
-  margin: var(--spacing-08, 0.5rem) 0 !important;
+:host(.web:not([live-preview])) #header #title {
   color: var(--dark, #000000) !important;
+  font-weight: bold;
+  font-size: var(--font-size-28, 1.75rem);
 }

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);
       }
     }