@yoobic/yobi 8.3.0-7 → 8.3.0

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

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

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

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

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

@@ -3,7 +3,6 @@ import { answerIsValid, cancelRequestInterval, debounce, disableKeyboardResize,
 import { Component, Element, Event, forceUpdate, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';
 import { assign, cloneDeep, compact, findLastIndex, flatten, get, groupBy, isArray, isEmpty, isEqual, isFunction, isNumber, isObject, isString, keys, orderBy, pick, range, result, uniqBy } from 'lodash-es';
 import { getMissionStatusIconName } from '../../../feature-operate/campaign/helpers/operation-helpers';
-import { TodoListMode } from '../../../interfaces/form-field/form-field.instance';
 import { getActiveElementShadow, getAppContext, hideShowTabbar, lockSwipes, querySelectorAllDeep, querySelectorDeep } from '../../../utils/helpers/common-helpers';
 import { generateLabel, getDynamicProperty, getTypeValidation, isCreationAllowed, isDisabled, isEditionAllowed, isReadonly, isRequired, setFieldData, updateFormulas } from '../../../utils/helpers/form-helpers';
 import { setValueAndResetInputValidity, setValueAndValidateInput } from '../../../utils/helpers/form-input-helpers';
@@ -542,6 +541,10 @@ export class YooFormDynamicComponent {
   async updateValidity() {
     this.initValidity();
   }
+  async findFieldElement(fieldName) {
+    const field = this.getFieldByCode(fieldName);
+    return field;
+  }
   async updateFieldValue(fieldName, value, resetValidity = false) {
     const field = this.getFieldByCode(fieldName);
     if (field) {
@@ -661,6 +664,11 @@ export class YooFormDynamicComponent {
       this.setCountDownTimer();
     }
   }
+  connectedCallback() {
+    if (this.disconnected) {
+      this.disconnected = false;
+    }
+  }
   disconnectedCallback() {
     if (isNativeMobile()) {
       if (!this.isKeyboardStateLocked && !this.isKeyboardResizeModeInactive) {
@@ -677,7 +685,7 @@ export class YooFormDynamicComponent {
       window.removeEventListener('screenSizeWillChange', this.resizeListener);
     }
     this.removeRequestInterval();
-    this.hasUnloaded = true;
+    this.disconnected = true;
   }
   removeRequestInterval() {
     var _a;
@@ -745,7 +753,7 @@ export class YooFormDynamicComponent {
       }
       if (this.innerTimer === 0) {
         this.removeRequestInterval();
-        if (!this.hasUnloaded) {
+        if (!this.disconnected) {
           this.timeFinished.emit();
         }
       }
@@ -778,24 +786,15 @@ export class YooFormDynamicComponent {
     const code = this.encodeFieldName(name);
     return querySelectorDeep(host || this.host, '[attr-name=' + code + ']');
   }
-  async scrollOnFitChanged(ev) {
-    if (ev === null || ev === void 0 ? void 0 : ev.detail) {
-      const scrollElmt = await this.getScrollOrDivElement();
-      if (scrollElmt) {
-        const scrollElmtBottom = scrollElmt.getBoundingClientRect().bottom;
-        const fieldElmtBottom = ev.detail.bottom;
-        if (fieldElmtBottom > scrollElmtBottom && scrollElmt) {
-          scrollElmt.scrollTop = scrollElmt.scrollTop + (fieldElmtBottom - scrollElmtBottom);
-        }
-      }
-    }
-  }
   isLessonDetail() {
     return this.formType === 'lesson-detail';
   }
   isLessonPreview() {
     return this.formType === 'form-creator-preview-lesson';
   }
+  isCoursePreview() {
+    return this.host.classList.contains('course-preview');
+  }
   isLessonQuestionResult() {
     return this.formType === 'lesson-question-result';
   }
@@ -854,7 +853,7 @@ export class YooFormDynamicComponent {
     }
     ev.stopPropagation();
     if ((_b = this.inputElements) === null || _b === void 0 ? void 0 : _b.length) {
-      const foundIndex = this.inputElements.findIndex((el) => (el === null || el === void 0 ? void 0 : el.name) == fieldName);
+      const foundIndex = this.inputElements.findIndex((el) => (el === null || el === void 0 ? void 0 : el.name) === fieldName);
       if (foundIndex >= 0) {
         const foundEl = (_c = this.inputElements[foundIndex]) === null || _c === void 0 ? void 0 : _c.el;
         const parentWrapper = findParent(foundEl, '.field-placeholder');
@@ -1780,7 +1779,7 @@ export class YooFormDynamicComponent {
       this.forceUpdate();
     }
     const newValidity = this.slidesState.every((state) => state.validity || state.locked);
-    if ((this.skipValidation || newValidity) && !calledInWillLoad) {
+    if ((this.skipValidation || newValidity) && !calledInWillLoad && !this.disconnected) {
       this.dataChanged.emit(this.currentData);
     }
     if (newValidity !== this.validity && (!this.autosave || newValidity || this.validity)) { // when in autosave mode, we dont emit validity event untl the first valid state
@@ -2120,7 +2119,7 @@ export class YooFormDynamicComponent {
                 'grid-flex': !this.showWizard && ((_b = (_a = selectedSlide === null || selectedSlide === void 0 ? void 0 : selectedSlide.items) === null || _a === void 0 ? void 0 : _a.filter((f) => this.getFieldVisibility(f))) === null || _b === void 0 ? void 0 : _b.some((f) => f.type === FormFieldType.grid || f.type === FormFieldType.audience)),
                 'gridstack': this.useGridstack && !this.gridstackItemNoScroll,
                 'gridstack-no-scroll': this.useGridstack && this.gridstackItemNoScroll,
-                'lesson-detail-answer': (this.formType === 'lesson' && isWeb()) && this.showAnswers && !this.lessonStarted
+                'lesson-detail-answer': (this.formType === 'lesson' && isWeb(this.host)) && this.showAnswers && !this.lessonStarted
               }, ref: (el) => (this.inputContainerParent[selectedSlideIndex] = el) },
               h("slot", { name: "before-main-container" }),
               this.selectedTabIndexState > -1 && this.renderFormContentFields(selectedSlide, selectedSlideIndex, slides.length - 1),
@@ -2138,7 +2137,7 @@ export class YooFormDynamicComponent {
                 'grid-flex': !this.showWizard && ((_f = (_e = (_d = slides[0]) === null || _d === void 0 ? void 0 : _d.items) === null || _e === void 0 ? void 0 : _e.filter((f) => this.getFieldVisibility(f))) === null || _f === void 0 ? void 0 : _f.some((f) => f.type === FormFieldType.grid || f.type === FormFieldType.audience)),
                 'gridstack': this.useGridstack && !this.gridstackItemNoScroll,
                 'gridstack-no-scroll': this.useGridstack && this.gridstackItemNoScroll,
-                'lesson-detail-answer': this.formType === 'lesson' && isWeb() && this.showAnswers && !this.lessonStarted
+                'lesson-detail-answer': this.formType === 'lesson' && isWeb(this.host) && this.showAnswers && !this.lessonStarted
               }, ref: (el) => (this.inputContainerParent[0] = el) },
               h("slot", { name: "before-main-container" }),
               this.renderFormContentFields(slides[0], 0, slides.length - 1))),
@@ -2418,10 +2417,10 @@ export class YooFormDynamicComponent {
           return [
             fieldWithSectionHeader && (h("div", { class: { 'section-header': true, readonly: this.forceReadonly }, innerHTML: translateMulti(fieldWithSectionHeader.sectionHeader) })),
             visible && (h("yoo-collapsible", { isPdf: this.isPdf, collapsed: !this.isPdf && !this.forceCollapsibleOpen && !fieldsPerSections[section].some((field) => field.sectionExpanded), class: {
-                'form': true,
+                'form': !fieldsPerSections[section].some((field) => field.sectionWithoutBackground),
                 'padding': !this.showVerticalTabs && !this.forceReadonly,
                 'no-scroll': this.useGridstack && this.gridstackItemNoScroll
-              }, icon: fieldWithSectionIcon === null || fieldWithSectionIcon === void 0 ? void 0 : fieldWithSectionIcon.sectionIcon, iconColor: "dark", iconSize: "medium", header: translate(section), style: { zIndex: fieldsPerSections[section].some((field) => field.type === FormFieldType.querybuilder) ? '1' : undefined }, slot: this.useGridstack ? section : null },
+              }, icon: fieldWithSectionIcon === null || fieldWithSectionIcon === void 0 ? void 0 : fieldWithSectionIcon.sectionIcon, iconColor: "dark", iconSize: "medium", header: translate(section), style: { zIndex: fieldsPerSections[section].some((field) => field.type === FormFieldType.querybuilder) ? '1' : undefined }, slot: this.useGridstack ? section : null, size: this.formInputSize },
               fieldsPerSections[section].map((field, i) => {
                 const previousField = this.findPreviousVisibleField(i, fieldsPerSections[section]);
                 return !field.subSection && this.renderFormContentField({
@@ -2438,7 +2437,7 @@ export class YooFormDynamicComponent {
               _a.map((subsection) => {
                 const subvisible = subfieldsPerSections[subsection].some((field) => this.getFieldVisibility(field));
                 return subvisible && h("yoo-collapsible", { isPdf: this.isPdf, collapsed: !this.isPdf && !this.forceCollapsibleOpen && !subfieldsPerSections[subsection].some((field) => field.subSectionExpanded), class: {
-                    'form': true,
+                    'form': !fieldsPerSections[section].some((field) => field.sectionWithoutBackground),
                     'subform': true,
                     'text-color': !this.isPdf,
                     'padding': !this.showVerticalTabs && !this.forceReadonly,
@@ -2636,11 +2635,11 @@ export class YooFormDynamicComponent {
             'disable-input-container': field.disableInputContainer,
             'html': field.type === FormFieldType.textarea && field.language === 'html' && isWeb(this.host),
             'no-break': !isPdfMultiplePhotos && ![FormFieldType.selectmulti, FormFieldType.selectbuttons, FormFieldType.catalog].includes(field === null || field === void 0 ? void 0 : field.type),
-            'lesson-detail-answer-field': this.formType === 'lesson' && isWeb(),
+            'lesson-detail-answer-field': this.formType === 'lesson' && isWeb(this.host),
             [fieldClass]: !!fieldClass && !renderSlideTitle,
             [field.mode]: field.mode && (field.type === FormFieldType.document || field.type === FormFieldType.image || field.type === FormFieldType.podcast),
             [field.type]: true
-          }, style: this.isInlineRow() || this.isInlineRowNarrow() ? inlineStyle : style },
+          }, key: field.name, style: this.isInlineRow() || this.isInlineRowNarrow() ? inlineStyle : style },
           !!(header === null || header === void 0 ? void 0 : header.length) && isFieldVisible && h("div", { class: { 'field-header': true }, style: field.headerStyle, innerHTML: translateMulti(header) }),
           isFieldVisible
             ? [
@@ -2653,7 +2652,7 @@ export class YooFormDynamicComponent {
                   'label-right-aligned': this.isLabelRightAligned(),
                   'label-top-aligned': this.isLabelTopAligned(),
                   'lesson-detail': this.isLessonDetail(),
-                  'lesson-live-preview': this.isLessonPreview(),
+                  'lesson-live-preview': this.isLessonPreview() || this.isCoursePreview(),
                   'preview': this.isLivePreview(),
                   'no-border': field.type === FormFieldType.information || (answer && this.forceReadonly),
                   'no-padding-top': field.hideLabel && (this.isInlineRow() || this.isInline()),
@@ -2813,7 +2812,7 @@ export class YooFormDynamicComponent {
         }
         break;
       case 'recap':
-        buttons = getRecapButton(this.validity && !this.isPreview, this.showPreview, this.isPreview, () => this.onOpenPreview(), (ev) => this.onSave(ev), () => this.continueIfEnabled(() => this.goToSlide(this.nextAvailablePage(-1), true)));
+        buttons = getRecapButton(this.host, this.validity && !this.isPreview, this.showPreview, this.isPreview, () => this.onOpenPreview(), (ev) => this.onSave(ev), () => this.continueIfEnabled(() => this.goToSlide(this.nextAvailablePage(-1), true)));
         break;
     }
     return buttons;
@@ -2825,7 +2824,7 @@ export class YooFormDynamicComponent {
   renderFormFooter(type, slideIndex, lastUnlockedSlideIndex) {
     if (this.shouldRenderFormFooter(type, slideIndex, lastUnlockedSlideIndex)) {
       const buttons = this.getFormFooterButtons(type, slideIndex, lastUnlockedSlideIndex);
-      return (h("yoo-form-footer", { ref: (el) => (this.formFooterElement = el), countDownStartValue: this.timer, countDownValue: this.innerTimer, forceMobile: this.forceMobile || this.formType === 'form-creator-preview', buttons: buttons, showCopyright: this.showCopyright, class: this.formType === 'lesson' ? isWeb() ? 'lesson-detail' : 'relative' : '' }));
+      return (h("yoo-form-footer", { ref: (el) => (this.formFooterElement = el), countDownStartValue: this.timer, countDownValue: this.innerTimer, forceMobile: this.forceMobile || this.formType === 'form-creator-preview', buttons: buttons, showCopyright: this.showCopyright, class: this.formType === 'lesson' ? isWeb(this.host) ? 'lesson-detail' : 'relative' : '' }));
     }
   }
   getNextButtons(slideIndex) {
@@ -2845,6 +2844,7 @@ export class YooFormDynamicComponent {
         }
       };
       buttons = getPreviousAndNextButtons({
+        host: this.host,
         hasPreviousButton: slideIndex !== 0 && (((slideIndex !== this.slides.length - 1 || this.isLessonPreview()) && isContentOnly(this.lessonType)) || ((_f = this.formExtraOptions) === null || _f === void 0 ? void 0 : _f.showBack)),
         lastButtonTranslationKey: isQuiz(this.lessonType) && this.showAnswers && !isTimedQuiz(this.lessonType) && (!isConfidenceAssessment(this.lessonType) || isConfidenceSlide) ? 'CHECK' : 'YOOBICNEXT',
         isDisabled: this.isLivePreview() ? false : !getLessonPageValidity(slideIndex, this.slides, this.fieldsState, this.activeIndex, this.currentData),
@@ -2860,6 +2860,7 @@ export class YooFormDynamicComponent {
     else if (this.showWizard) {
       lockSwipes(this.ionSlides, true);
       buttons = getPreviousAndNextButtons({
+        host: this.host,
         hasPreviousButton: slideIndex !== 0 && slideIndex !== this.slides.length - 1,
         lastButtonTranslationKey: 'YOOBICNEXT',
         isDisabled: !((_g = this.slidesState.filter((item) => !(item === null || item === void 0 ? void 0 : item.hidden))[slideIndex]) === null || _g === void 0 ? void 0 : _g.validity),
@@ -2875,7 +2876,7 @@ export class YooFormDynamicComponent {
       if (((_h = this.formExtraOptions) === null || _h === void 0 ? void 0 : _h.combinedForms) && this.slides[slideIndex] && ((_j = this.slides[slideIndex]) === null || _j === void 0 ? void 0 : _j.submitFn)) {
         nextFn = () => this.slides[slideIndex].submitFn(this.currentData, this.ionSlides, this);
       }
-      buttons = getNextButton(useSubmitFn ? () => this.slides[slideIndex].submitFn(this.currentData, () => nextFn) : nextFn, isWeb(this.host) && !this.isLivePreview() ? 'medium' : 'large');
+      buttons = getNextButton(this.host, useSubmitFn ? () => this.slides[slideIndex].submitFn(this.currentData, () => nextFn) : nextFn, isWeb(this.host) && !this.isLivePreview() ? 'medium' : 'large');
     }
     return buttons;
   }
@@ -2890,7 +2891,7 @@ export class YooFormDynamicComponent {
     else if (this.showWizard) {
       lockSwipes(this.ionSlides, true);
       const visibleSlides = this.getVisibleSlides();
-      buttons = getLastButtons({
+      buttons = getLastButtons(this.host, {
         text: translate(this.saveText || 'YOOBICSAVE'),
         color: isDisabled ? 'stable-light' : this.appColor,
         size: isWeb(this.host) && !this.isLivePreview() ? 'medium' : 'large',
@@ -2923,7 +2924,7 @@ export class YooFormDynamicComponent {
       else {
         submitText = 'FINISH';
       }
-      buttons = getLastButtons({
+      buttons = getLastButtons(this.host, {
         text: translate(submitText),
         color: !this.isLesson() && isDisabled ? 'stable-light' : this.appColor,
         size: isWeb(this.host) && !this.isLivePreview() ? 'medium' : 'large',
@@ -3051,7 +3052,7 @@ export class YooFormDynamicComponent {
     this.openPreview.emit('');
   }
   renderInput({ field, data, slideIndex, slideItems, inputIndex, readonly, cssClass, isHistory, previousField, slots }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
     const fieldState = getFieldState(field, this.fieldsState);
     const required = isRequired(field, this.currentData, this.currentDataFlatten, fieldState.visible, this.suffix, this.session);
     const disabled = isDisabled(field, this.currentData, this.currentDataFlatten, this.suffix, this.session);
@@ -3075,6 +3076,7 @@ export class YooFormDynamicComponent {
       readonly,
       required,
       disabled,
+      shuffled: field.shuffled,
       clearable: !disabled,
       name: field.name,
       key: field.name,
@@ -3154,6 +3156,7 @@ export class YooFormDynamicComponent {
         extraAttrs = {
           min: field.min,
           max: field.max,
+          allowDecimals: field.allowDecimals,
           maxCharacters: field.maxCharacters,
           type: field.type === FormFieldType.number && isSamsung() ? FormFieldType.text : getInputType(field),
           inputmode: field.type === FormFieldType.number && isSamsung() ? 'numeric' : '',
@@ -3309,7 +3312,7 @@ export class YooFormDynamicComponent {
           allowCreateItem: field.allowCreateItem,
           allowCreateIcon: field.allowCreateIcon,
           allowEdit,
-          iconPrefix: icon,
+          iconPrefix: field.iconPrefix || icon,
           useTranslate: field.translate,
           clearable: field.clearable,
           entityType: (field.collectionName || field.entityType),
@@ -3334,6 +3337,7 @@ export class YooFormDynamicComponent {
           inline: this.isInline(),
           tags: field.tags,
           isFilter: field.type === FormFieldType.filterautocomplete,
+          filterOperator: field.filterOperator,
           forceDisableCustomTags: field.forceDisableCustomTags,
           extraData: this.getExtraData(field, data),
           forceHideSearch: !!field.forceHideSearch,
@@ -3342,11 +3346,15 @@ export class YooFormDynamicComponent {
           onFetchCustomData: (ev) => this.onFetchCustomData(field, ev),
           onExtraDataChanged: (ev) => this.onFieldExtraDataChanged(ev, field),
           customDataLoader: field.customDataLoader,
-          showHeader: field.showAutocompleteHeader
+          showHeader: field.showAutocompleteHeader,
+          dialogWidth: field.name !== 'operator' ? '17.5rem' : 'unset'
         };
         if (((field.min && field.min > 1) || (field.max && field.max > 0)) && attrs.validators) {
           attrs.validators.push({ name: field.type, options: { ...extraAttrs } });
         }
+        if (field.validateOnLoad) {
+          extraAttrs.validateOnLoad = true;
+        }
         if (field.originalFieldType === FormFieldType.tags) {
           extraAttrs.tag = true;
         }
@@ -3544,6 +3552,7 @@ export class YooFormDynamicComponent {
         extraAttrs = {
           maxRows: field.autoInitialRows ? undefined : 5,
           allowMention: field.allowMention,
+          mentionConfigs: field.mentionConfigs,
           autoInitialRows: field.autoInitialRows,
           allowLinkPreview: field.allowMention || field.allowLinkPreview,
           onMentionsChanged: (ev) => this.onFieldExtraDataChanged(ev, field),
@@ -3670,7 +3679,7 @@ export class YooFormDynamicComponent {
           multiple,
           allowOther: field.allowOther,
           useTranslate: field.translate,
-          shuffled: this.formType === 'lesson',
+          shuffled: (_k = field.shuffled) !== null && _k !== void 0 ? _k : this.formType === 'lesson',
           answer: field.answer,
           class: field.extraClass,
           description: field.description,
@@ -3680,7 +3689,7 @@ export class YooFormDynamicComponent {
       }
       case FormFieldType.selectchat: {
         const multiple = field.multiple;
-        const values = field.values || ((_k = field.opValues) === null || _k === void 0 ? void 0 : _k.find((opValue) => opValue));
+        const values = field.values || ((_l = field.opValues) === null || _l === void 0 ? void 0 : _l.find((opValue) => opValue));
         TagType = 'yoo-form-choice-chat';
         attrs = {
           ...attrs,
@@ -3701,7 +3710,7 @@ export class YooFormDynamicComponent {
       }
       case FormFieldType.selectimage: {
         const multiple = field.multiple;
-        const values = field.values || ((_l = field.opValues) === null || _l === void 0 ? void 0 : _l.find((opValue) => opValue));
+        const values = field.values || ((_m = field.opValues) === null || _m === void 0 ? void 0 : _m.find((opValue) => opValue));
         TagType = 'yoo-form-choice-image';
         attrs = {
           ...attrs,
@@ -3721,7 +3730,7 @@ export class YooFormDynamicComponent {
       }
       case FormFieldType.selectcard: {
         const multiple = field.multiple;
-        const values = field.values || ((_m = field.opValues) === null || _m === void 0 ? void 0 : _m.find((opValue) => opValue));
+        const values = field.values || ((_o = field.opValues) === null || _o === void 0 ? void 0 : _o.find((opValue) => opValue));
         TagType = 'yoo-form-choice-card';
         attrs = {
           ...attrs,
@@ -3799,7 +3808,7 @@ export class YooFormDynamicComponent {
           collectionName: field.collectionName,
           entityType: field.entityType,
           iconPrefix: field.iconPrefix,
-          descriptionTemplate: data.isUnitCurrency && ((_o = data.currency) === null || _o === void 0 ? void 0 : _o.symbol) ? `${data.currency.symbol} {{text}}` : null,
+          descriptionTemplate: data.isUnitCurrency && ((_p = data.currency) === null || _p === void 0 ? void 0 : _p.symbol) ? `${data.currency.symbol} {{text}}` : null,
           max: field.max,
           queryFields: field.queryFields,
           model: field.model,
@@ -3808,7 +3817,7 @@ export class YooFormDynamicComponent {
           onFetchCustomData: (ev) => this.onFetchCustomData(field, ev),
           onFetchData: (ev) => this.onFetchData(field, ev)
         };
-        if (attrs.validators && ((_p = config === null || config === void 0 ? void 0 : config.validators) === null || _p === void 0 ? void 0 : _p.length)) {
+        if (attrs.validators && ((_q = config === null || config === void 0 ? void 0 : config.validators) === null || _q === void 0 ? void 0 : _q.length)) {
           attrs.validators.push(...config.validators);
         }
         break;
@@ -3941,7 +3950,11 @@ export class YooFormDynamicComponent {
         extraAttrs = {
           logo: field.logo,
           value: value || field.value,
-          whiteLabel: (_q = getSession().tenant) === null || _q === void 0 ? void 0 : _q.waitlistWhitelabel
+          description: field.description,
+          whiteLabel: (_r = getSession().tenant) === null || _r === void 0 ? void 0 : _r.waitlistWhitelabel,
+          showIllustration: field.showIllustration,
+          showShareLink: field.showShareLink,
+          showDownload: field.showDownload
         };
         break;
       case FormFieldType.recurrence:
@@ -4062,15 +4075,10 @@ export class YooFormDynamicComponent {
         };
         break;
       case FormFieldType.todolist:
-        TagType = 'yoo-form-todo-list';
+        TagType = 'yoo-form-todo-task-list';
         extraAttrs = {
-          hideHeader: field.hideLabel,
-          isCompleteLocked: field.locked,
-          value: value !== undefined ? value : { title: field.title },
-          extraData: this.currentData,
-          mode: this.isKanban() ? TodoListMode.kanban : field.mode || TodoListMode.none,
           translations: this.shouldUseTranslations() ? this.translations : null,
-          onFitChanged: (ev) => this.scrollOnFitChanged(ev) // when needed, scroll to be able to see the buttons that have just been rendered at the bottom of the component
+          onTranslationValueUpdated: (ev) => this.onTranslationValueUpdated(ev)
         };
         break;
       case FormFieldType.task:
@@ -4236,7 +4244,7 @@ export class YooFormDynamicComponent {
             h("span", { slot: "title" }, field.title),
             h("span", { innerHTML: markdown || value })));
         }
-        if (((_r = field.valuesIcon) === null || _r === void 0 ? void 0 : _r.length) > 0) {
+        if (((_s = field.valuesIcon) === null || _s === void 0 ? void 0 : _s.length) > 0) {
           return [
             markdown && h("div", { class: "info-header" }, markdown),
             field.valuesIcon.map((item) => {
@@ -4248,7 +4256,7 @@ export class YooFormDynamicComponent {
         }
         const cssClass = {
           'lesson-form': this.isLesson(),
-          'lesson-live-preview': this.isLessonPreview(),
+          'lesson-live-preview': this.isLessonPreview() || this.isCoursePreview(),
           [field.type]: true
         };
         return (markdown && h("yoo-markdown", { class: cssClass, isVisible: this.isCurrentSlide(slideIndex), style: { color: `${color}` }, linkPreviews: field.linkPreviews, content: translateMulti(pipes.https.transform(markdown)) }));
@@ -4288,7 +4296,7 @@ export class YooFormDynamicComponent {
           categories: field.categories,
           values: field.values,
           images: field.images,
-          answer: field.complexAnswer,
+          answer: field.answer || field.complexAnswer,
           isVisible: this.isCurrentSlide(slideIndex),
           numberSteps: this.steps && this.steps.length,
           mode: field.swipeMode,
@@ -4631,7 +4639,7 @@ export class YooFormDynamicComponent {
     return (h(Host, { class: {
         'lesson-detail': this.isLessonDetail(),
         'lesson-question-result': this.isLessonQuestionResult(),
-        'lesson-live-preview': this.isLessonPreview(),
+        'lesson-live-preview': this.isLessonPreview() || this.isCoursePreview(),
         'mission-form': this.isMission(),
         'mission-validation': this.isMissionValidation,
         'pdf': this.isPdf,
@@ -6146,14 +6154,10 @@ export class YooFormDynamicComponent {
         "text": ""
       },
       "complexType": {
-        "original": "{ field: IFormField; value: any; name: string; opValues: string[][]; operator?: FormFilterAutocompleteOperator }",
-        "resolved": "{ field: IFormField; value: any; name: string; opValues: string[][]; operator?: FormFilterAutocompleteOperator; }",
+        "original": "IFormFieldChanged",
+        "resolved": "IFormFieldChanged",
         "references": {
-          "IFormField": {
-            "location": "import",
-            "path": "@shared/interfaces"
-          },
-          "FormFilterAutocompleteOperator": {
+          "IFormFieldChanged": {
             "location": "import",
             "path": "@shared/interfaces"
           }
@@ -7358,6 +7362,25 @@ export class YooFormDynamicComponent {
         "tags": []
       }
     },
+    "findFieldElement": {
+      "complexType": {
+        "signature": "(fieldName: string) => Promise<any>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<any>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
     "updateFieldValue": {
       "complexType": {
         "signature": "(fieldName: string, value: any, resetValidity?: boolean) => Promise<void>",

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

@@ -1,24 +1,16 @@
 import { FormFieldType } from '@shared/interfaces';
 import { isNativeMobile, isWeb, translate } from '@shared/utils';
+import { isNumber } from 'lodash-es';
 export function getFieldState(field, fieldsState) {
-  return fieldsState[field.name] || {};
+  return fieldsState ? fieldsState[field.name] || {} : {};
 }
 export function getLessonPageValidity(index, slides, fieldsState, activeIndex, currentData) {
   let validity = true;
   const activeFieldDirty = isActiveFieldDirty(slides, activeIndex, currentData);
   (slides[index].items || []).forEach((field) => {
-    var _a;
-    if (field.type === 'videoplayer' || field.type === 'document' || field.type === 'information' || field.type === 'image' || field.type === 'podcast') {
+    if (field.type === 'videoplayer' || field.type === 'document' || field.type === 'information' || field.type === 'image' || field.type === 'podcast' || field.type === 'scorm') {
       validity = activeFieldDirty;
     }
-    else if (field.type === 'scorm') {
-      if ((field.min && field.min <= ((_a = currentData[slides[activeIndex].items[0].name]) === null || _a === void 0 ? void 0 : _a.value)) || !field.min) {
-        validity = true;
-      }
-      else if (field.min) {
-        validity = false;
-      }
-    }
     else {
       const fieldState = getFieldState(field, fieldsState);
       if (!fieldState.validity) {
@@ -30,13 +22,16 @@ export function getLessonPageValidity(index, slides, fieldsState, activeIndex, c
 }
 /** used in Boost to determine if the current question is dirty or the document has been viewed */
 export function isActiveFieldDirty(slides, activeIndex, currentData) {
-  var _a, _b;
+  var _a, _b, _c;
   if (slides && slides.length > activeIndex) {
     const activeField = (_b = (_a = slides === null || slides === void 0 ? void 0 : slides[activeIndex]) === null || _a === void 0 ? void 0 : _a.items) === null || _b === void 0 ? void 0 : _b[0];
     if (activeField) {
       if ([FormFieldType.information.toString(), FormFieldType.image.toString()].indexOf(activeField.type) >= 0) {
         return true;
       }
+      if (activeField.type === FormFieldType.scorm) {
+        return isNumber((_c = currentData === null || currentData === void 0 ? void 0 : currentData[activeField.name]) === null || _c === void 0 ? void 0 : _c.value);
+      }
       return currentData[activeField.name] && currentData[activeField.name].value;
     }
   }
@@ -53,12 +48,12 @@ export function getInputType(field) {
       return FormFieldType.text;
   }
 }
-export function getPreviousAndNextButtons({ hasPreviousButton, lastButtonTranslationKey, isDisabled, nextButtonHandler, previousButtonHandler, size }) {
+export function getPreviousAndNextButtons({ host, hasPreviousButton, lastButtonTranslationKey, isDisabled, nextButtonHandler, previousButtonHandler, size }) {
   const buttons = [];
   if (hasPreviousButton) {
     buttons.push({
       actionType: 'goback',
-      size: size || (isWeb() ? 'medium' : 'large'),
+      size: size || (isWeb(host) ? 'medium' : 'large'),
       text: translate('GOBACK'),
       cssClass: isNativeMobile() ? '' : 'swiper-no-swiping',
       handler: () => previousButtonHandler()
@@ -68,7 +63,7 @@ export function getPreviousAndNextButtons({ hasPreviousButton, lastButtonTransla
     buttons.push({
       text: translate(lastButtonTranslationKey),
       color: 'app-color',
-      size: size || (isWeb() ? 'medium' : 'large'),
+      size: size || (isWeb(host) ? 'medium' : 'large'),
       cssClass: isNativeMobile() ? '' : 'swiper-no-swiping',
       disabled: isDisabled,
       handler: () => nextButtonHandler()
@@ -76,24 +71,24 @@ export function getPreviousAndNextButtons({ hasPreviousButton, lastButtonTransla
   }
   return buttons;
 }
-export function getNextButton(nextButtonHandler, size) {
+export function getNextButton(host, nextButtonHandler, size) {
   return [
     {
       actionType: 'next',
       text: translate('YOOBICNEXT'),
-      size: size || (isWeb() ? 'medium' : 'large'),
+      size: size || (isWeb(host) ? 'medium' : 'large'),
       color: 'app-color',
       cssClass: isNativeMobile() ? '' : 'swiper-no-swiping',
       handler: () => nextButtonHandler()
     }
   ];
 }
-export function getLastButtons(submitButtonEntry, hasPreviousButton, showPreview, previousButtonHandler, previewButtonHandler, size) {
+export function getLastButtons(host, submitButtonEntry, hasPreviousButton, showPreview, previousButtonHandler, previewButtonHandler, size) {
   const buttons = [];
   if (hasPreviousButton) {
     buttons.push({
       actionType: 'goback',
-      size: size || (isWeb() ? 'medium' : 'large'),
+      size: size || (isWeb(host) ? 'medium' : 'large'),
       text: translate('GOBACK'),
       cssClass: isNativeMobile() ? '' : 'swiper-no-swiping',
       handler: () => previousButtonHandler()
@@ -102,7 +97,7 @@ export function getLastButtons(submitButtonEntry, hasPreviousButton, showPreview
   else if (showPreview) {
     buttons.push({
       actionType: 'preview',
-      size: size || (isWeb() ? 'medium' : 'large'),
+      size: size || (isWeb(host) ? 'medium' : 'large'),
       text: translate('PREVIEW'),
       color: 'light',
       cssClass: isNativeMobile() ? '' : 'swiper-no-swiping',
@@ -112,7 +107,7 @@ export function getLastButtons(submitButtonEntry, hasPreviousButton, showPreview
   buttons.push({ ...submitButtonEntry });
   return buttons;
 }
-export function getRecapButton(validity, showPreview, isPreview, previewHandler, submitHandler, startHandler) {
+export function getRecapButton(host, validity, showPreview, isPreview, previewHandler, submitHandler, startHandler) {
   const buttons = [];
   if (validity) {
     if (showPreview) {
@@ -120,25 +115,25 @@ export function getRecapButton(validity, showPreview, isPreview, previewHandler,
         actionType: 'preview',
         text: translate('PREVIEW'),
         color: 'light',
-        size: isWeb() ? 'medium' : 'large',
+        size: isWeb(host) ? 'medium' : 'large',
         cssClass: isNativeMobile() ? '' : 'swiper-no-swiping',
         handler: () => previewHandler()
       });
     }
     buttons.push({
       text: translate('SUBMIT'),
-      size: isWeb() ? 'medium' : 'large',
+      size: isWeb(host) ? 'medium' : 'large',
       color: 'app-color',
       handler: (ev) => submitHandler(ev)
     });
   }
   else {
     const startText = isPreview ? 'STARTPREVIEWING' : 'START';
-    const buttonText = isWeb() ? 'YOOBICNEXT' : startText;
+    const buttonText = isWeb(host) ? 'YOOBICNEXT' : startText;
     buttons.push({
       text: translate(buttonText),
       color: 'app-color',
-      size: isWeb() ? 'medium' : 'large',
+      size: isWeb(host) ? 'medium' : 'large',
       handler: () => startHandler()
     });
   }