@yoobic/yobi 8.3.1-8 → 8.3.2

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

@@ -43,7 +43,7 @@ export class YooFormChoiceButtonComponent {
     return (!((_b = (_a = this.valuesColor) === null || _a === void 0 ? void 0 : _a.find((e) => e.key === value)) === null || _b === void 0 ? void 0 : _b.value) && 'app-color');
   }
   renderBanner() {
-    return this.livePreview && h("yoo-banner", null,
+    return this.livePreview && !this.readonly && h("yoo-banner", null,
       h("p", { slot: "content" }));
   }
   render() {

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

@@ -70,7 +70,7 @@ export class YooFormChoiceCardComponent {
     return (h("section", { class: { 'card-grid': true, selected: this.selected } }, this.choices && this.choices.map((item, index) => this.renderSelect(item, index))));
   }
   renderBanner() {
-    return this.livePreview && h("yoo-banner", null,
+    return this.livePreview && !this.readonly && h("yoo-banner", null,
       h("p", { slot: "content" }));
   }
   render() {

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

@@ -38,7 +38,7 @@ export class YooFormChoiceChatComponent {
           h("yoo-chat-message", { class: { choice: true, radius: true, selected: isSelected(value, this.selection) }, style: this.animated ? { '--choice-index': index.toString() } : {}, message: getMessage({ content: value, isFirst: !index, isLast: index === s.length - 1, isAlternate: true }), onClick: () => onItemSelect(value, this) }))));
   }
   renderBanner() {
-    return this.livePreview && h("yoo-banner", null,
+    return this.livePreview && !this.readonly && h("yoo-banner", null,
       h("p", { slot: "content" }));
   }
   render() {

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

@@ -1,6 +1,6 @@
 import { isNullOrUndefined } from '@shared/utils';
 import { compact, findIndex, isEqual, shuffle } from 'lodash-es';
-import { hasDuplicates, showWarningAlert } from '../../../utils/helpers/draggable-tags-helpers';
+import { hasDuplicates, showWarningBanner } from '../../../utils/helpers/draggable-tags-helpers';
 import { setValidator, setValueAndValidateInput } from '../../../utils/helpers/form-input-helpers';
 import { YooFormChoiceCardComponent } from './card/form-choice-card';
 export function isSelected(item, selection) {
@@ -56,7 +56,7 @@ export function prepareChoice(choiceElement) {
 export function hasWarnings(values, choiceElement, warningMsgs) {
   const duplicateMessage = 'NODUPLICATEVALUES';
   const hasDuplicatedValues = hasDuplicates(values === null || values === void 0 ? void 0 : values.map(v => (v === null || v === void 0 ? void 0 : v.text) || v));
-  showWarningAlert(choiceElement.host, hasDuplicatedValues || !!(warningMsgs === null || warningMsgs === void 0 ? void 0 : warningMsgs.length), hasDuplicatedValues ? duplicateMessage : warningMsgs === null || warningMsgs === void 0 ? void 0 : warningMsgs[0]);
+  showWarningBanner(choiceElement.host, hasDuplicatedValues || !!(warningMsgs === null || warningMsgs === void 0 ? void 0 : warningMsgs.length), hasDuplicatedValues ? duplicateMessage : warningMsgs === null || warningMsgs === void 0 ? void 0 : warningMsgs[0]);
   return hasDuplicatedValues && (warningMsgs === null || warningMsgs === void 0 ? void 0 : warningMsgs.length) > 0;
 }
 function updateChoices(values, shuffled) {

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

@@ -20,8 +20,7 @@ export class YooFormChoiceImageComponent {
     updateValue(newValue, oldValue, this);
   }
   get hasEmptyValues() {
-    var _a;
-    return this.values.length >= 2 && !!((_a = this.values) === null || _a === void 0 ? void 0 : _a.filter(v => (v.image && !v.text) || (!v.image && v.text)).length);
+    return this.values.length >= 2 && !!this.values.filter(({ image, text }) => (image && !text) || (!image && text)).length;
   }
   componentWillLoad() {
     prepareChoice(this);
@@ -36,7 +35,7 @@ export class YooFormChoiceImageComponent {
     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() } : {} },
-      h("div", { class: { 'content': true, 'correct-answer': this.readonly && isCorrect && !noValidation, 'wrong-answer': this.readonly && !isCorrect && !noValidation } },
+      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) }),
         !readonly && [
           h("yoo-form-checkbox", { value: isSelected(text, this.selection), onClick: () => onItemSelect(text, this), animated: this.animated }),
@@ -56,12 +55,12 @@ export class YooFormChoiceImageComponent {
     });
   }
   renderBanner() {
-    return this.livePreview && h("yoo-banner", null,
+    return this.livePreview && !this.readonly && h("yoo-banner", null,
       h("p", { slot: "content" }));
   }
   render() {
     return (h(Host, null,
-      !this.readonly && this.renderBanner(),
+      this.renderBanner(),
       (this.readonly || this.choices) && this.renderImages()));
   }
   static get is() { return "yoo-form-choice-image"; }

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

@@ -1,4 +1,4 @@
-import { isNullOrUndefined, translate, translateMulti } from '@shared/utils';
+import { debounce, isNullOrUndefined, translate, translateMulti } from '@shared/utils';
 import { Component, Element, Event, h, Host, Prop, State, Watch } from '@stencil/core';
 import { compact, isString } from 'lodash-es';
 import { setValueAndValidateInput } from '../../../../utils/helpers/form-input-helpers';
@@ -32,12 +32,23 @@ export class YooFormChoiceRadioComponent {
     prepareChoice(this);
     this.textareaValue = !((_a = this.choices) === null || _a === void 0 ? void 0 : _a.includes(this.value)) && (this.value || '');
   }
+  componentWillRender() {
+    const finalDebounceTime = this.showOther ? this.debounce : 0;
+    if (this.finalDebounceTime !== finalDebounceTime) {
+      this.finalDebounceTime = finalDebounceTime;
+      this.setValueAndValidateInputDebounce = debounce((value, inputElement) => {
+        setValueAndValidateInput(value, inputElement);
+      }, this.finalDebounceTime);
+    }
+  }
   componentDidLoad() {
     hasWarnings(this.values, this);
-    this.focusTextArea();
   }
   componentDidUpdate() {
-    this.focusTextArea();
+    if (this.focusTextarea) {
+      this.focusTextArea();
+      this.focusTextarea = false;
+    }
   }
   convertToEntities(values) {
     return values.map((value) => ({ _id: value, title: translateMulti(value) }));
@@ -55,21 +66,22 @@ export class YooFormChoiceRadioComponent {
     ev.stopPropagation();
     this.textareaValue = ev.target.value;
     this.selection = [this.textareaValue];
-    setValueAndValidateInput(this.multiple ? this.selection : (_a = this.selection) === null || _a === void 0 ? void 0 : _a[0], this);
+    this.setValueAndValidateInputDebounce(this.multiple ? this.selection : (_a = this.selection) === null || _a === void 0 ? void 0 : _a[0], this);
   }
   onItemSelectRadio(item, preventSetValue = false) {
     var _a;
     if (this.multiple && !preventSetValue) {
       this.selection = this.convertToChoiceFormat(item);
-      setValueAndValidateInput(this.selection, this);
+      this.setValueAndValidateInputDebounce(this.selection, this);
     }
     else {
       const itemVal = isString(item) || isNullOrUndefined(item) ? item : item._id;
       if (itemVal === translate('OTHER')) {
         this.showOther = true;
+        this.focusTextarea = true;
         if (this.textareaValue !== this.value) {
           this.selection = [this.textareaValue];
-          setValueAndValidateInput(this.multiple ? this.selection : (_a = this.selection) === null || _a === void 0 ? void 0 : _a[0], this);
+          this.setValueAndValidateInputDebounce(this.multiple ? this.selection : (_a = this.selection) === null || _a === void 0 ? void 0 : _a[0], this);
         }
       }
       else if (!preventSetValue && !this.isTextareaFocused) {
@@ -102,7 +114,7 @@ export class YooFormChoiceRadioComponent {
     ];
   }
   renderBanner() {
-    return this.livePreview && h("yoo-banner", null,
+    return this.livePreview && !this.readonly && h("yoo-banner", null,
       h("p", { slot: "content" }));
   }
   render() {
@@ -332,6 +344,23 @@ export class YooFormChoiceRadioComponent {
       "attribute": "description",
       "reflect": false
     },
+    "debounce": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "debounce",
+      "reflect": false
+    },
     "values": {
       "type": "unknown",
       "mutable": false,

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

@@ -508,6 +508,9 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   width: 100%;
   height: 100%;
 }
+:host .draggable {
+  z-index: 1;
+}
 :host #overlay {
   background-color: inherit;
   border-radius: inherit;

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

@@ -1,7 +1,7 @@
 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 { showWarningAlert } from '../../../utils/helpers/draggable-tags-helpers';
+import { showWarningBanner } from '../../../utils/helpers/draggable-tags-helpers';
 import { setValueAndValidateInput } from '../../../utils/helpers/form-input-helpers';
 import { CONNECT_TYPES } from './form-connect.interfaces';
 export class YooFormConnectComponent {
@@ -22,20 +22,16 @@ export class YooFormConnectComponent {
      * true if component's parent slide is visible within a `yoo-form-dynamic`
      */
     this.isVisible = false;
-    this.colors = ['warning', 'accent', 'app-color', 'info', 'energized'];
   }
   async onValuesChanged() {
     var _a;
-    showWarningAlert(this.host, ((_a = this.values) === null || _a === void 0 ? void 0 : _a.length) > 1 && !this.isGamePairable, 'NOTALLPAIREDVALUES');
+    showWarningBanner(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);
-  }
   onValueChanged() {
     if (!isEqual(this.value, this.userAnswers)) {
       this.connectItems();
-      this.validateUserAnswers(this.value);
+      this.validate();
     }
   }
   initAnswerChanged() {
@@ -58,14 +54,17 @@ export class YooFormConnectComponent {
   get connectableElements() {
     return Array.from(this.host.shadowRoot.querySelectorAll('.connectable') || []);
   }
+  validate() {
+    var _a;
+    this.validity = !this.required || (!((_a = this.value) === null || _a === void 0 ? void 0 : _a.reduce((acc, v) => acc + v.filter(i => !i).length, 0)));
+    this.validityChanged.emit(this.validity);
+    return this.validity;
+  }
   componentWillLoad() {
     this.prepareGame();
   }
   componentWillUpdate() {
-    var _a;
-    if (!((_a = this.draggables) === null || _a === void 0 ? void 0 : _a.find(d => d === null || d === void 0 ? void 0 : d.draggableInstance))) {
-      this.initGame();
-    }
+    this.initGame();
   }
   componentDidLoad() {
     this.initGame();
@@ -76,19 +75,19 @@ export class YooFormConnectComponent {
     this.shuffleData();
   }
   async initGame() {
-    await this.scrollToRevealGame();
-    this.setDraggableObserver();
-    this.initDraggables();
-  }
-  initDraggables() {
-    var _a;
-    (_a = this.draggableElements) === null || _a === void 0 ? void 0 : _a.forEach(e => this.initDraggableActions(e));
+    var _a, _b;
+    if (!((_a = this.draggables) === null || _a === void 0 ? void 0 : _a.find(({ draggableInstance }) => draggableInstance))) {
+      await this.scrollToRevealGame();
+      this.setDraggableObserver();
+      (_b = this.draggableElements) === null || _b === void 0 ? void 0 : _b.forEach(e => this.initDraggableActions(e));
+      this.autoCompleteLastConnection();
+    }
   }
   async scrollToRevealGame() {
     var _a;
     const GAP_PADDING = 8;
     const scrollElement = this.host.closest('yoo-ion-scroll');
-    if (scrollElement && ((_a = this.values) === null || _a === void 0 ? void 0 : _a.length) === 2) {
+    if (scrollElement && ((_a = this.values) === null || _a === void 0 ? void 0 : _a.length) === 2 && scrollElement.scrollHeight > scrollElement.clientHeight) {
       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'));
@@ -97,7 +96,7 @@ export class YooFormConnectComponent {
           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`;
+          this.innerContainerElement.style.height = `${Math.min(formHeight, itemsHeight) - GAP_PADDING * 10}px`;
         }
       };
       await new Promise(resolve => {
@@ -125,7 +124,7 @@ export class YooFormConnectComponent {
               }
             });
             this.getUserAnswers();
-            this.validateUserAnswers();
+            this.validate();
           }
           if (key === 'hit') {
             this.draggables.map(dr => {
@@ -143,13 +142,14 @@ export class YooFormConnectComponent {
     this.shuffled && CONNECT_TYPES.forEach(type => this[`${type}s`] = shuffle(this[`${type}s`]));
   }
   prepareData() {
+    const colors = ['warning', 'accent', 'app-color', 'info', 'energized'];
     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: 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]
+          color: colors[i]
         })
       }))) || [];
     });
@@ -194,7 +194,7 @@ export class YooFormConnectComponent {
         }
         if (tempConnectableElement && !currentDraggable.draggableInstance.hitTest(tempConnectableElement, overlapThreshold)) {
           ['color', 'background-color'].forEach(prop => tempConnectableElement.style.removeProperty(prop));
-          const connectableColor = (_b = (_a = this.draggables) === null || _a === void 0 ? void 0 : _a.find(d => (d === null || d === void 0 ? void 0 : d.connectableId) === tempConnectableElement.id)) === null || _b === void 0 ? void 0 : _b.color;
+          const connectableColor = (_b = (_a = this.draggables) === null || _a === void 0 ? void 0 : _a.find(({ connectableId }) => connectableId === tempConnectableElement.id)) === null || _b === void 0 ? void 0 : _b.color;
           if (connectableColor) {
             Object.assign(tempConnectableElement.style, {
               backgroundColor: `var(--${connectableColor}`,
@@ -209,27 +209,19 @@ export class YooFormConnectComponent {
         await gsapTo(draggableElement, this.animated ? 0.25 : 0, { x: 0, y: 0 });
         if (tempConnectableElement) {
           currentDraggable.connectableId = tempConnectableElement.id;
-          tempConnectableElement.removeAttribute('hit');
+          [...this.connectableElements, ...this.draggableElements].forEach(e => e.removeAttribute('hit'));
           this.autoCompleteLastConnection();
         }
         tempConnectableElement = null;
         this.blockMoves.emit(false);
       };
-      const onClickElement = async () => {
-        var _a;
-        currentDraggable.hit = { value: !((_a = currentDraggable.hit) === null || _a === void 0 ? void 0 : _a.value) && !currentDraggable.connectableId };
-        delete currentDraggable.connectableId;
-        !currentDraggable.hit.value && this.autoEraseLastConnection();
-        this.getUserAnswers();
-        this.validateUserAnswers();
-      };
       if (!this.readonly && this.isGamePairable && draggableElement) {
         currentDraggable.draggableInstance = new Draggable(draggableElement, {
+          zIndexBoost: false,
           autoScroll: 1,
           bound: this.innerContainerElement,
           onDragStart: onDragStartElement,
           onDrag: onDragElement,
-          onClick: onClickElement,
           onRelease: onReleaseElement
         });
       }
@@ -237,25 +229,15 @@ export class YooFormConnectComponent {
   }
   getUserAnswers() {
     this.userAnswers = this.draggables.map(d => [d.value, d.connectableId ? this.connectables.find(c => c.id === d.connectableId).value : '']);
-  }
-  validateUserAnswers(userAnswers = this.userAnswers) {
-    this.validity = !(userAnswers === null || userAnswers === void 0 ? void 0 : userAnswers.reduce((acc, v) => acc + v.filter(i => !i).length, 0));
-    this.value = userAnswers;
+    this.value = this.userAnswers;
     setValueAndValidateInput(this.value, this);
   }
-  autoEraseLastConnection() {
-    const connectedDraggables = this.draggables.filter(d => d.connectableId);
-    if ((connectedDraggables === null || connectedDraggables === void 0 ? void 0 : connectedDraggables.length) === 1) {
-      const lastDraggable = connectedDraggables[0];
-      delete lastDraggable.connectableId;
-    }
-  }
   autoCompleteLastConnection() {
     var _a;
     const freeDraggables = this.draggables.filter(d => !d.connectableId);
     if ((freeDraggables === null || freeDraggables === void 0 ? void 0 : freeDraggables.length) === 1) {
       const lastDraggable = freeDraggables[0];
-      const lastConectableId = (_a = difference(this.connectables.map(c => c.id), this.draggables.map(d => d.connectableId))) === null || _a === void 0 ? void 0 : _a[0];
+      const lastConectableId = (_a = difference(this.connectables.map(({ id }) => id), this.draggables.map(({ connectableId }) => connectableId))) === null || _a === void 0 ? void 0 : _a[0];
       lastDraggable.connectableId = lastConectableId;
     }
   }
@@ -268,13 +250,6 @@ export class YooFormConnectComponent {
       return isTruncabled ? translatedValue.substr(0, MAX_LENGTH).concat('...') : translatedValue;
     }
   }
-  onConnectableClick(connectable) {
-    const hitDraggable = this.draggables.find(d => { var _a; return (_a = d.hit) === null || _a === void 0 ? void 0 : _a.value; });
-    if (hitDraggable && connectable) {
-      hitDraggable.connectableId = connectable.id;
-      this.autoCompleteLastConnection();
-    }
-  }
   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));
@@ -282,27 +257,44 @@ export class YooFormConnectComponent {
   }
   renderContainer(name) {
     var _a;
-    return (h("section", { id: `${name}s` }, (_a = this[`${name}s`]) === null || _a === void 0 ? void 0 : _a.map((item) => {
-      var _a;
+    const tileType = `${name}s`;
+    const onConnectableClick = (connectable) => {
+      const hitDraggable = this.draggables.find(d => { var _a; return (_a = d.hit) === null || _a === void 0 ? void 0 : _a.value; });
+      if (hitDraggable && connectable) {
+        hitDraggable.connectableId = connectable.id;
+        this.autoCompleteLastConnection();
+      }
+    };
+    const onDraggableClick = (draggable) => {
+      var _a, _b;
+      const currentDraggable = (_a = this.draggables) === null || _a === void 0 ? void 0 : _a.find(({ id }) => id === draggable.id);
+      currentDraggable.hit = { value: !((_b = currentDraggable.hit) === null || _b === void 0 ? void 0 : _b.value) && !currentDraggable.connectableId };
+      delete currentDraggable.connectableId;
+      this.getUserAnswers();
+      this.validate();
+    };
+    return (h("section", { id: tileType }, (_a = this[tileType]) === null || _a === void 0 ? void 0 : _a.map((item) => {
       const isDraggable = name === 'draggable';
-      const { id, value, connectableId, color } = item || {};
+      const { id, value, connectableId, color, hit } = item || {};
       const isImage = value && isImageUrl(value);
-      const connectable = this.draggables.find(d => d.connectableId === id);
+      const connectable = this.draggables.find(({ connectableId }) => 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 };
-      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); } },
+      const connectedAttributes = { style: { backgroundColor: `var(--${tileColor})`, color: 'var(--light)' }, connected: true };
+      const tileAttr = {
+        ...(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" })],
-        this.readonly && this.renderCorrectionIcon(value)));
+        this.readonly && this.renderCorrectionIcon(value));
     })));
   }
   renderBanner() {
-    return this.livePreview && h("yoo-banner", null,
+    return this.livePreview && !this.readonly && 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)));
+    return this.hasValues && h("main", { ref: (el) => this.innerContainerElement = el }, CONNECT_TYPES.map(type => this.renderContainer(type)));
   }
   render() {
     return h(Host, null,
@@ -318,21 +310,6 @@ export class YooFormConnectComponent {
     "$": ["form-connect.css"]
   }; }
   static get properties() { return {
-    "values": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "string[][]",
-        "resolved": "string[][]",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Poll of words to connect, dispatched in 2 arrays (Left and Right respectively)"
-      }
-    },
     "readonly": {
       "type": "boolean",
       "mutable": false,
@@ -438,6 +415,21 @@ export class YooFormConnectComponent {
       "attribute": "validity",
       "reflect": false
     },
+    "values": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "string[][]",
+        "resolved": "string[][]",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Poll of words to connect, dispatched in 2 arrays (Left and Right respectively)"
+      }
+    },
     "value": {
       "type": "unknown",
       "mutable": true,
@@ -540,9 +532,6 @@ export class YooFormConnectComponent {
   static get watchers() { return [{
       "propName": "values",
       "methodName": "onValuesChanged"
-    }, {
-      "propName": "validity",
-      "methodName": "onValidityChanged"
     }, {
       "propName": "value",
       "methodName": "onValueChanged"

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

@@ -58,7 +58,7 @@ export class YooFormDocumentDialogComponent {
         handler: () => {
           getAsyncExtraData({
             type: 'email-dialog',
-            params: { item: this.document }
+            params: { item: this.document, forceMobile: !isWeb(this.host) }
           });
         }
       },

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

@@ -2554,6 +2554,10 @@ span.fr-img-caption.fr-view {
   padding-right: var(--spacing-16, 1rem);
   padding-left: 0;
 }
+:host(.live-preview-form.mobile:not(.inline):not(.inline-row)) .toolbar.with-padding {
+  margin-bottom: 0;
+  padding-bottom: var(--safe-area-inset-bottom);
+}
 
 :host(.web.community-editor) yoo-form-input-container.segment,
 :host(.web.community-editor) yoo-form-input-container.autocomplete {

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

@@ -42,6 +42,7 @@ export class YooFormDynamicComponent {
     this.containsRenderComponent = false;
     this.hasTimerStarted = false;
     this.dirtyFields = [];
+    this.goToSlideOnUpdate = -1;
     this.onKeyboardWillShow = (event) => {
       var _a;
       (_a = this.formFooterElement) === null || _a === void 0 ? void 0 : _a.classList.add('hide');
@@ -111,7 +112,11 @@ export class YooFormDynamicComponent {
     }
   }
   updateSlides(newSlides, oldSlides) {
+    var _a, _b;
     if (this.hasLoaded && !isEqual(newSlides, oldSlides)) { // this.isLivePreview() &&
+      if (this.isLivePreview() && (newSlides === null || newSlides === void 0 ? void 0 : newSlides.length) > (oldSlides === null || oldSlides === void 0 ? void 0 : oldSlides.length) && ((_a = newSlides[(newSlides === null || newSlides === void 0 ? void 0 : newSlides.length) - 1]) === null || _a === void 0 ? void 0 : _a._id) !== ((_b = oldSlides[(oldSlides === null || oldSlides === void 0 ? void 0 : oldSlides.length) - 1]) === null || _b === void 0 ? void 0 : _b._id)) {
+        this.goToSlideOnUpdate = (newSlides === null || newSlides === void 0 ? void 0 : newSlides.length) - 1;
+      }
       this.slidesState = undefined;
       this.updateState();
     }
@@ -551,9 +556,6 @@ export class YooFormDynamicComponent {
       if (field.updateValidation) {
         field.updateValidation(value);
       }
-      else if (field.forceUpdateValue) {
-        field.forceUpdateValue(value);
-      }
       else if (resetValidity) {
         setValueAndResetInputValidity(value, field);
       }
@@ -663,6 +665,10 @@ export class YooFormDynamicComponent {
     if (this.timer && this.timerStart && !this.hasTimerStarted) {
       this.setCountDownTimer();
     }
+    if (this.goToSlideOnUpdate > -1) {
+      this.goToSlide(this.goToSlideOnUpdate, true);
+      this.goToSlideOnUpdate = -1;
+    }
   }
   connectedCallback() {
     if (this.disconnected) {
@@ -747,7 +753,9 @@ export class YooFormDynamicComponent {
       if (this.innerTimer > 0) {
         this.innerTimer--;
       }
-      const footer = this.getElementFromCurrentSlide('yoo-form-footer');
+      const footer = this.host.classList.contains('course-preview')
+        ? this.formFooterElement
+        : this.getElementFromCurrentSlide('yoo-form-footer');
       if (footer) {
         footer.countDownValue = this.innerTimer;
       }
@@ -2374,6 +2382,7 @@ export class YooFormDynamicComponent {
     const fieldsPerGroup = this.getFieldsPerArea(fields, 'group');
     fields = fields.filter((f) => !f.section && !f.group);
     const TagType = this.useGridstack ? 'yoo-gridstack' : 'div';
+    const hasMarkAsInvalidFields = this.hasMarkAsInvalidFields();
     return [
       slideIndex === 0 && h("slot", { name: "start" }),
       h(TagType, { key: 'slide-' + slideIndex, class: {
@@ -2404,7 +2413,8 @@ export class YooFormDynamicComponent {
             isPreviousFieldReadonlyAndVisible,
             previousField,
             slideLength,
-            useGridstack: this.useGridstack
+            useGridstack: this.useGridstack,
+            hasMarkAsInvalidFields
           });
         }), (_e = keys(fieldsPerSections)) === null || _e === void 0 ? void 0 :
         _e.map((section) => {
@@ -2431,7 +2441,8 @@ export class YooFormDynamicComponent {
                   isPreviousFieldReadonlyAndVisible,
                   previousField,
                   slideLength,
-                  collapsible: true
+                  collapsible: true,
+                  hasMarkAsInvalidFields
                 });
               }), (_a = keys(subfieldsPerSections)) === null || _a === void 0 ? void 0 :
               _a.map((subsection) => {
@@ -2452,7 +2463,8 @@ export class YooFormDynamicComponent {
                     isPreviousFieldReadonlyAndVisible,
                     previousField,
                     slideLength,
-                    collapsible: true
+                    collapsible: true,
+                    hasMarkAsInvalidFields
                   });
                 }));
               })))
@@ -2473,7 +2485,8 @@ export class YooFormDynamicComponent {
                 slideIndex,
                 slideItems,
                 slideLength,
-                isPreviousFieldReadonlyAndVisible
+                isPreviousFieldReadonlyAndVisible,
+                hasMarkAsInvalidFields
               });
             }))
           ];
@@ -2487,9 +2500,8 @@ export class YooFormDynamicComponent {
         this.isInline() && !this.isInlineNarrow() && !this.isInlineRowNarrow() && range(4).map(() => h("div", { class: "field-placeholder field-placeholder-empty" })))
     ];
   }
-  renderFormContentField({ field, inputIndex, slideIndex, slideItems, isPreviousFieldReadonlyAndVisible, previousField, slideLength, collapsible, useGridstack }) {
+  renderFormContentField({ field, inputIndex, slideIndex, slideItems, isPreviousFieldReadonlyAndVisible, previousField, slideLength, collapsible, useGridstack, hasMarkAsInvalidFields }) {
     var _a, _b, _c;
-    const hasMarkAsInvalidFields = this.hasMarkAsInvalidFields();
     const markAsInvalid = this.isMarkedAsInvalid(field);
     const markAsModified = this.isMarkedAsModified(field);
     const originalMarkAsInvalid = this.isOriginalMarkedAsInvalid(field);
@@ -2892,6 +2904,7 @@ export class YooFormDynamicComponent {
       lockSwipes(this.ionSlides, true);
       const visibleSlides = this.getVisibleSlides();
       buttons = getLastButtons(this.host, {
+        disabled: isDisabled,
         text: translate(this.saveText || 'YOOBICSAVE'),
         color: isDisabled ? 'stable-light' : this.appColor,
         size: isWeb(this.host) && !this.isLivePreview() ? 'medium' : 'large',
@@ -3684,6 +3697,7 @@ export class YooFormDynamicComponent {
           answer: field.answer,
           class: field.extraClass,
           description: field.description,
+          debounce: 500,
           livePreview: this.isLivePreview()
         };
         break;
@@ -4011,7 +4025,7 @@ export class YooFormDynamicComponent {
           allowPreview: true,
           allowSwipeDownDismiss: false,
           maxHeight: field.maxHeight,
-          currentSlideIndex: field.slideIndex,
+          currentSlideIndex: field.initialIndex,
           contained: field.contained
         };
         break;