@yoobic/yobi 8.3.1-2 → 8.3.1-20

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);
@@ -2665,7 +2677,7 @@ export class YooFormDynamicComponent {
                   'pdf': this.isPdf,
                   [field.type]: true,
                   [(field === null || field === void 0 ? void 0 : field.extraClass) || '']: true
-                }, style: field.containerStyle, slotInputConfig: isPdfMultiplePhotos ? slotInputConfig : null, field: field, required: required, readonly: readonly, allowFieldValidation: this.allowFieldValidation, commentsUser: this.commentsUser, validationCommentsUser: this.validationCommentsUser, hideComplianceTags: this.hideComplianceTags, forceReadonly: this.forceReadonly, forceDescription: this.forceDescription, comments: comments, validationComments: validationComments, markAsInvalid: markAsInvalid, markAsModified: markAsModified, originalMarkAsInvalid: originalMarkAsInvalid, time: time, size: this.formInputSize, showDefaultInstructions: this.isLesson(), onCommented: (ev) => this.onFieldCommented(ev, field), onValidationCommented: (ev) => this.onFieldValidationCommented(ev, field), onValidationMarkAsInvalid: (ev) => this.onFieldValidationMarkAsInvalid(ev, field), hideOptional: this.hideOptional || field.hideOptional || isFieldWithNoValue(field), onCommentFocused: (ev) => this.onFieldFocused(null, ev.detail), onHeaderClicked: (ev) => {
+                }, style: field.containerStyle, slotInputConfig: isPdfMultiplePhotos ? slotInputConfig : null, field: field, required: required, readonly: readonly, allowFieldValidation: this.allowFieldValidation, commentsUser: this.commentsUser, validationCommentsUser: this.validationCommentsUser, hideComplianceTags: this.hideComplianceTags, forceReadonly: this.forceReadonly, forceDescription: this.forceDescription, comments: comments, validationComments: validationComments, markAsInvalid: markAsInvalid, markAsModified: markAsModified, originalMarkAsInvalid: originalMarkAsInvalid, time: time, useUppercaseLabel: this.host.classList.contains('login-sso'), size: this.formInputSize, showDefaultInstructions: this.isLesson(), onCommented: (ev) => this.onFieldCommented(ev, field), onValidationCommented: (ev) => this.onFieldValidationCommented(ev, field), onValidationMarkAsInvalid: (ev) => this.onFieldValidationMarkAsInvalid(ev, field), hideOptional: this.hideOptional || field.hideOptional || isFieldWithNoValue(field), onCommentFocused: (ev) => this.onFieldFocused(null, ev.detail), onHeaderClicked: (ev) => {
                   ev.stopPropagation();
                   this.onFormContainerClicked(slideIndex, inputIndex);
                 }, onRemoved: (ev) => this.onFieldRemoved(ev), isLesson: this.isLesson(), isPreview: this.isLessonPreview(), animated: isAnimationsDisabled() ? false : this.animated, fullscreen: this.isFullscreenFieldType(field.type) }, !isPdfMultiplePhotos && inputFn())),
@@ -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',
@@ -3162,6 +3175,7 @@ export class YooFormDynamicComponent {
           inputmode: field.type === FormFieldType.number && isSamsung() ? 'numeric' : '',
           step: field.step,
           iconPrefix: icon,
+          iconPrefixColor: field.iconPrefixColor,
           iconSuffix: field.iconSuffix,
           textSuffix: field.textSuffix,
           regex: field.regex,
@@ -3683,6 +3697,7 @@ export class YooFormDynamicComponent {
           answer: field.answer,
           class: field.extraClass,
           description: field.description,
+          debounce: 500,
           livePreview: this.isLivePreview()
         };
         break;
@@ -4010,7 +4025,7 @@ export class YooFormDynamicComponent {
           allowPreview: true,
           allowSwipeDownDismiss: false,
           maxHeight: field.maxHeight,
-          currentSlideIndex: field.slideIndex,
+          currentSlideIndex: field.initialIndex,
           contained: field.contained
         };
         break;

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

@@ -229,7 +229,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   flex-direction: column;
   justify-content: center;
   max-width: 25rem;
-  height: 100%;
+  margin: var(--spacing-16, 1rem) auto;
 }
 :host([type=confidence]) .container .heading {
   margin: 0 var(--spacing-16, 1rem);
@@ -276,4 +276,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 
 :host(.web) .container {
   margin: 0 auto;
+}
+
+:host([isLesson]) .container {
+  height: 100%;
 }

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

@@ -240,22 +240,19 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   padding-right: var(--spacing-16, 1rem);
 }
 :host .outer-container .mission-footer .timer-container {
-  display: flex;
+  display: grid;
+  grid-template-columns: 20% auto;
+  gap: var(--spacing-16, 1rem);
   align-items: center;
-  justify-content: start;
   width: 100%;
   max-width: 14rem;
   margin-left: var(--spacing-16, 1rem);
+  text-align: left;
 }
 :host .outer-container .mission-footer .timer-container yoo-progress-bar {
-  width: 20%;
-  margin: 0;
   --progress-bar-color: var(--app-color, #5a30f4);
   --stroke-width-circle: 6;
 }
-:host .outer-container .mission-footer .timer-container yoo-progress-bar + div {
-  margin-left: var(--spacing-16, 1rem);
-}
 
 :host(:not(.relative)) {
   position: absolute;
@@ -293,7 +290,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host(.web) .mission-footer {
   justify-content: flex-end !important;
   height: var(--spacing-56, 3.5rem);
-  --footer-height: cssvar(spacing-56);
 }
 :host(.web) .mission-footer .button-container {
   padding-top: var(--spacing-08, 0.5rem);
@@ -303,6 +299,11 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   min-width: 6rem;
 }
 
+:host(.web.with-copyright) {
+  --footer-height: 5.75rem;
+  height: var(--footer-height);
+}
+
 :host(.no-border) .mission-footer {
   border-top: 0;
 }

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

@@ -45,7 +45,10 @@ export class YooFormFooterComponent {
       hostClasses.slot = true;
     }
     return (h(Host, { class: hostClasses },
-      h("div", { class: "outer-container", ref: (el) => (this.outerContainer = el) },
+      h("div", { ref: (el) => (this.outerContainer = el), class: {
+          'outer-container': true,
+          'with-copyright': this.showCopyright
+        } },
         this.showCopyright && h("yoo-copyright", null),
         hasControls && (h("div", { class: "mission-footer" },
           isNumber(this.countDownValue) && this.renderTimer(),

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

@@ -3,7 +3,7 @@ import { Component, Element, Event, forceUpdate, h, Host, Prop, State, Watch } f
 import { getFromOfflineStorage } from '../../../utils/cache/localForage';
 import { calcCoordPercentage, isElementInsideContainer } from '../../../utils/helpers/annotations-helpers';
 import { getAppContext } from '../../../utils/helpers/common-helpers';
-import { showWarningAlert } from '../../../utils/helpers/draggable-tags-helpers';
+import { showWarningBanner } from '../../../utils/helpers/draggable-tags-helpers';
 import { setValueAndValidateInput } from '../../../utils/helpers/form-input-helpers';
 export class YooFormHotzonesComponent {
   constructor() {
@@ -19,7 +19,7 @@ export class YooFormHotzonesComponent {
     this.init();
   }
   onHotzonesChanged() {
-    showWarningAlert(this.host, !this.isHotZones && this.hotzones.some(({ description, image }) => !(description || image)), 'NOEMPTYVALUES');
+    showWarningBanner(this.host, !this.isHotZones && this.hotzones.some(({ description, image }) => !(description || image)), 'NOEMPTYVALUES');
   }
   onIsVisibleChanged() {
     if (this.isVisible) {