@yoobic/yobi 8.2.0-2 → 8.2.0-22

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

@@ -1,5 +1,5 @@
 import { FormFieldType, IncentivePartType } from '@shared/interfaces';
-import { answerIsValid, cancelRequestInterval, debounce, disableKeyboardResize, enableKeyboardResize, evalInContext, findField, findParent, getConfidenceDescriptionKey, getConfidenceEmoji, getCssColor, getDistance, getFieldReplacement, getFieldValue, getSession, hasValue, isAndroid, isAnimationsDisabled, isChromeForIos, isConfidenceAssessment, isContentOnly, isFieldWithDirectValue, isFieldWithNoValue, isIonic, isIOS, isIphoneX, isKeyboardResizeModeInactive, isNativeMobile, isNullOrUndefined, isPhotoOrMultiPhotosField, isPresent, isQuiz, isSafari, isTimedQuiz, isValueATranslationKey, isVisible, isWeb, pipes, requestInterval, showContextMenu, showModal, showToast, slenderizeObject, translate, translateMulti, updateDatasetFilters } from '@shared/utils';
+import { answerIsValid, cancelRequestInterval, debounce, disableKeyboardResize, enableKeyboardResize, evalInContext, findField, findParent, getConfidenceDescriptionKey, getConfidenceEmoji, getCssColor, getDistance, getFieldReplacement, getFieldValue, getModalAnimation, getSession, hasValue, isAndroid, isAnimationsDisabled, isChromeForIos, isConfidenceAssessment, isContentOnly, isFieldWithDirectValue, isFieldWithNoValue, isIonic, isIOS, isIphoneX, isKeyboardResizeModeInactive, isNativeMobile, isNullOrUndefined, isPhotoOrMultiPhotosField, isPresent, isQuiz, isSafari, isSamsung, isTimedQuiz, isValueATranslationKey, isVisible, isWeb, pipes, requestInterval, showContextMenu, showModal, showToast, slenderizeObject, translate, translateMulti, updateDatasetFilters } from '@shared/utils';
 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';
@@ -245,7 +245,7 @@ export class YooFormDynamicComponent {
         }
         case FormFieldType.grid: {
           const grid = el;
-          grid.updateValues(field.tmpValues, field.tmpTotal, field.gridCurrentSearch);
+          grid.updateValues(field.tmpValues, field.tmpTotal, (formSearch === null || formSearch === void 0 ? void 0 : formSearch.search) || field.gridCurrentSearch);
           break;
         }
         case FormFieldType.emailreport: {
@@ -486,6 +486,10 @@ export class YooFormDynamicComponent {
       });
     }
   }
+  async getTabName() {
+    var _a, _b;
+    return translate(((_b = (_a = this.tabs) === null || _a === void 0 ? void 0 : _a[this.selectedTabIndex]) === null || _b === void 0 ? void 0 : _b.title) || 'CONTENT');
+  }
   async highlightInvalidFields() {
     const invalidFieldCodes = Object.keys(this.fieldsState).filter((code) => this.fieldsState[code].validity === false);
     this.setFormInputContainerInvalid(false, this.failedSubmission);
@@ -548,22 +552,16 @@ export class YooFormDynamicComponent {
   async getData() {
     return Promise.resolve(this.currentData);
   }
-  // @Method()
-  // async gridstackAddItem(slideIndex: number, id: string, options: IGridstackItem, field: IFormField) {
-  //   const fieldState = getFieldState(field, this.fieldsState);
-  //   this.initReadonlyAndVisible(field, fieldState);
-  //   if (fieldState.visible) {
-  //     this.initFieldValidity(field, fieldState);
-  //     this.setFieldState(field, fieldState);
-  //   }
-  //   this.gridStacks[slideIndex]?.addItem(id, options);
-  //   setTimeout(() => {
-  //     this.updateGridstackHeights();
-  //   }, 300);
-  // }
   async forceUpdate() {
     forceUpdate(this);
   }
+  async forceCheckValidityAndEmitChanges() {
+    await this.updateState();
+    this.setDirty(true);
+    if (this.failedSubmission.length > 0) {
+      await this.highlightInvalidFields();
+    }
+  }
   componentWillLoad() {
     var _a;
     if (isNullOrUndefined(this.formInputSize)) {
@@ -1926,6 +1924,9 @@ export class YooFormDynamicComponent {
   onGridstackItemEdited(ev, slideIndex) {
     this.gridstackItemEdited.emit({ node: ev.detail, slideIndex });
   }
+  onGridstackItemClicked(ev, slideIndex) {
+    this.gridstackItemClicked.emit({ node: ev.detail, slideIndex });
+  }
   onGridstackItemRemoved(ev, slideIndex) {
     this.gridstackItemRemoved.emit({ node: ev.detail, slideIndex });
   }
@@ -1950,7 +1951,8 @@ export class YooFormDynamicComponent {
     }
     this.selectedTabIndex = ev.detail.nextIndex;
     this.activeIndex = this.selectedTabIndex;
-    this.tabChanged.emit(this.selectedTabIndex);
+    const selectedSlideIndex = this.slides.findIndex((s) => { var _a; return (s.value || s.title) === ((_a = this.tabs[this.selectedTabIndex || 0]) === null || _a === void 0 ? void 0 : _a.value); }) || 0;
+    this.tabChanged.emit({ tabIndex: this.selectedTabIndex, slideIndex: selectedSlideIndex });
     if (this.showVerticalTabs) {
       // we need to reset the validity because vertical tabs form are independant from each other
       this.validity = null;
@@ -1999,7 +2001,7 @@ export class YooFormDynamicComponent {
     const currentStep = ((_a = this.slides) === null || _a === void 0 ? void 0 : _a.length) !== ((_b = this.steps) === null || _b === void 0 ? void 0 : _b.length) ? Math.floor((this.activeIndex / 2) + 1) : this.activeIndex + 1;
     if ((slides === null || slides === void 0 ? void 0 : slides.length) > 1) {
       if (this.isSimpleProgressBar()) {
-        return (h("yoo-progress-bar", { animated: this.animated, currentStep: currentStep, maxStep: this.steps.length, metric: "step" }));
+        return (h("yoo-progress-bar", { animated: this.animated, value: currentStep, maxValue: this.steps.length, metric: "step" }));
       }
       if (this.activeIndex === 0 && this.showRecap) {
         return (h("div", { class: "header-recap" },
@@ -2068,7 +2070,7 @@ export class YooFormDynamicComponent {
     return null;
   }
   renderInnerBody() {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e, _f;
     const slides = this.getVisibleSlides();
     if (!slides || slides.length === 0) {
       return (h("div", { class: "no-slide-container" },
@@ -2090,16 +2092,25 @@ export class YooFormDynamicComponent {
         this.setTabSelectedValue(this.selectedTabIndex || 0);
         return [
           h("slot", { name: "start-before-tabs" }),
-          h("yoo-tabs", { class: { 'items-flex-start': true, small: true, 'community-editor': this.host.classList.contains('community-editor') }, vertical: this.showVerticalTabs, showBadges: this.showBadgesVerticalTabs, tabOpenedIndicator: this.tabOpenedIndicator, tabs: this.tabs, autoScroll: this.autoScrollTabs, initialIndex: this.selectedTabIndex || 0, onTabSelected: (ev) => this.onTabSelected(ev) }),
+          h("yoo-tabs", { class: {
+              'items-flex-start': true,
+              small: true,
+              'big-tabs': this.host.classList.contains('big-tabs'),
+              'tabs-padding-top': this.host.classList.contains('tabs-padding-top')
+            }, vertical: this.showVerticalTabs, showBadges: this.showBadgesVerticalTabs, tabOpenedIndicator: this.tabOpenedIndicator, tabs: this.tabs, autoScroll: this.autoScrollTabs, initialIndex: this.selectedTabIndex || 0, onTabSelected: (ev) => this.onTabSelected(ev) }),
           h("div", { class: "main-container" },
+            h("slot", { name: "main-top" }),
             this.renderLeftPanelSecondary(selectedSlide),
             h("div", { class: {
                 'inputs-container-parent': true,
-                'grid-flex': !this.showWizard && ((_a = selectedSlide === null || selectedSlide === void 0 ? void 0 : selectedSlide.items) === null || _a === void 0 ? void 0 : _a.some((f) => f.type === FormFieldType.grid || f.type === FormFieldType.audience)),
+                '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
-              }, ref: (el) => (this.inputContainerParent[selectedSlideIndex] = el) }, this.selectedTabIndexState > -1 && this.renderFormContentFields(selectedSlide, selectedSlideIndex, slides.length - 1))),
+              }, ref: (el) => (this.inputContainerParent[selectedSlideIndex] = el) },
+              h("slot", { name: "before-main-container" }),
+              this.selectedTabIndexState > -1 && this.renderFormContentFields(selectedSlide, selectedSlideIndex, slides.length - 1),
+              ((_c = this.formExtraOptions) === null || _c === void 0 ? void 0 : _c.livePreview) && this.renderToolbar(selectedSlide))),
           !this.host.classList.contains('no-slide-bottom-toolbar') && this.renderToolbar(selectedSlide)
         ];
       }
@@ -2110,11 +2121,13 @@ export class YooFormDynamicComponent {
             this.renderLeftPanelSecondary(slides[0]),
             h("div", { class: {
                 'inputs-container-parent': true,
-                'grid-flex': !this.showWizard && ((_c = (_b = slides[0]) === null || _b === void 0 ? void 0 : _b.items) === null || _c === void 0 ? void 0 : _c.some((f) => f.type === FormFieldType.grid || f.type === FormFieldType.audience)),
+                '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
-              }, ref: (el) => (this.inputContainerParent[0] = el) }, this.renderFormContentFields(slides[0], 0, slides.length - 1))),
+              }, ref: (el) => (this.inputContainerParent[0] = el) },
+              h("slot", { name: "before-main-container" }),
+              this.renderFormContentFields(slides[0], 0, slides.length - 1))),
           !this.host.classList.contains('no-slide-bottom-toolbar') && this.renderToolbar(slides[0])
         ];
       }
@@ -2130,8 +2143,8 @@ export class YooFormDynamicComponent {
     const isHeaderVisible = this.isHeaderVisible(slides);
     let bannerRef;
     return [
-      totalInvalidFields > 0 && h("yoo-banner", { ref: (el) => (bannerRef = el), mode: "card", class: "warning-banner field-invalids-banner", leftIcon: "warning", leftIconColor: "light", leftIconSize: "small", heading: translate('WARNINGNOTCOMPLIANTFIELDS', { smart_count: totalInvalidFields }) },
-        h("yoo-icon", { slot: "right", name: "cross", color: "light", size: "small", onClick: () => bannerRef.close() })),
+      totalInvalidFields > 0 && h("yoo-banner", { ref: (el) => (bannerRef = el), fill: true, leftIcon: { name: 'warning' }, closable: true, onCloseClick: () => bannerRef.close() },
+        h("p", { slot: "content" }, translate('WARNINGNOTCOMPLIANTFIELDS', { smart_count: totalInvalidFields }))),
       h("yoo-ion-slides", { ref: (el) => (this.ionSlides = el), navigation: false, initialSlide: this.selectedTabIndex || 0, options: this.slidesOptions, onIonSlideTransitionEnd: (ev) => this.onIonSlideTransitionEnd(ev), onIonSlideTouchEnd: (ev) => this.onIonSlideTouchEnd(ev), class: { 'has-header': isHeaderVisible } },
         this.showRecap !== false ? h("yoo-ion-slide", { class: "recap" },
           " ",
@@ -2203,6 +2216,7 @@ export class YooFormDynamicComponent {
     }
   }
   getFieldVisibility(field) {
+    var _a;
     let isFieldVisible = false;
     const fieldState = getFieldState(field, this.fieldsState);
     const readonly = fieldState.readonly || this.forceReadonly;
@@ -2212,7 +2226,10 @@ export class YooFormDynamicComponent {
     // const required = isRequired(field, this.currentData, visible, this.suffix, this.session);
     isFieldVisible = !field.advanced && visible;
     if (field.secondary) {
-      if (withValue) {
+      // Invisible data is still rendered when they are secondar and has value,
+      // Use this forceHideSecondaryDataIfHidden to hide then in UI
+      const allowInvisibleData = !(((_a = this.formExtraOptions) === null || _a === void 0 ? void 0 : _a.forceHideSecondaryDataIfHidden) && !visible);
+      if (withValue && allowInvisibleData) {
         isFieldVisible = true;
       }
       else {
@@ -2332,7 +2349,7 @@ export class YooFormDynamicComponent {
     }
   }
   renderFormContentFields(slide, slideIndex, slideLength) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     let isPreviousFieldReadonlyAndVisible;
     this.printedSlideTitle = null;
     // speed improvement
@@ -2353,15 +2370,15 @@ export class YooFormDynamicComponent {
           'textsequence': !!slide.items.filter((field) => field.type === FormFieldType.textsequence).length,
           'swipecards': !!slide.items.filter((field) => field.type === FormFieldType.swipecards).length,
           'confidence': !!slide.items.filter((field) => field.type === FormFieldType.confidence).length,
-          'grid-flex': !this.showWizard && (slideItems === null || slideItems === void 0 ? void 0 : slideItems.some((f) => f.type === FormFieldType.grid || f.type === FormFieldType.audience)),
+          'grid-flex': !this.showWizard && ((_c = slideItems === null || slideItems === void 0 ? void 0 : slideItems.filter((f) => this.getFieldVisibility(f))) === null || _c === void 0 ? void 0 : _c.some((f) => f.type === FormFieldType.grid || f.type === FormFieldType.audience)),
           'large': this.isFormCreatorBlock() || this.host.classList.contains('translate-dialog') || this.host.classList.contains('large'),
           'gridstack': this.useGridstack && !this.gridstackItemNoScroll,
           'form-edit': this.useGridstack && !this.gridstackStatic,
           'full-overlay': this.gridstackFullOverlay,
           'gap': this.isInlineNarrow() // || fields?.some((f) => f.flex > 0)
-        }, config: ((_c = this.gridstackConfig) === null || _c === void 0 ? void 0 : _c.length) > slideIndex ? this.gridstackConfig[slideIndex] : null, static: this.gridstackStatic, resizable: this.gridstackResizable, cellHeight: this.gridstackCellHeight, autoHeight: this.useGridstack ? true : null, forceGridLines: this.gridstackForceGridLines, allowEdit: this.gridstackAllowEdit, allowDelete: this.gridstackAllowDelete, forceLoader: this.gridstackForceLoader, margin: 10, ref: (el) => {
+        }, config: ((_d = this.gridstackConfig) === null || _d === void 0 ? void 0 : _d.length) > slideIndex ? this.gridstackConfig[slideIndex] : null, static: this.gridstackStatic, resizable: this.gridstackResizable, float: this.gridstackFloat, cellHeight: this.gridstackCellHeight, autoHeight: this.useGridstack ? true : null, forceGridLines: this.gridstackForceGridLines, allowEdit: this.gridstackAllowEdit, allowDelete: this.gridstackAllowDelete, forceLoader: this.gridstackForceLoader, margin: 10, ref: (el) => {
           this.gridStacks[slideIndex] = el;
-        }, onConfigUpdated: (ev) => this.onGridstackConfigUpdated(ev, slideIndex), onItemDropped: (ev) => this.onGridstackItemDropped(ev, slideIndex), onItemEdited: (ev) => this.onGridstackItemEdited(ev, slideIndex), onItemRemoved: (ev) => this.onGridstackItemRemoved(ev, slideIndex) },
+        }, onConfigUpdated: (ev) => this.onGridstackConfigUpdated(ev, slideIndex), onItemDropped: (ev) => this.onGridstackItemDropped(ev, slideIndex), onItemEdited: (ev) => this.onGridstackItemEdited(ev, slideIndex), onItemClicked: (ev) => this.onGridstackItemClicked(ev, slideIndex), onItemRemoved: (ev) => this.onGridstackItemRemoved(ev, slideIndex) },
         slideIndex === 0 ? h("slot", null) : null,
         this.renderDetailComponent(),
         fields.map((field, inputIndex) => {
@@ -2376,8 +2393,8 @@ export class YooFormDynamicComponent {
             slideLength,
             useGridstack: this.useGridstack
           });
-        }), (_d = keys(fieldsPerSections)) === null || _d === void 0 ? void 0 :
-        _d.map((section) => {
+        }), (_e = keys(fieldsPerSections)) === null || _e === void 0 ? void 0 :
+        _e.map((section) => {
           var _a;
           let inputIndex = 0;
           const visible = fieldsPerSections[section].some((field) => this.getFieldVisibility(field));
@@ -2388,7 +2405,6 @@ export class YooFormDynamicComponent {
             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,
-                'dark': !this.isPdf,
                 '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 },
@@ -2428,8 +2444,8 @@ export class YooFormDynamicComponent {
                 }));
               })))
           ];
-        }), (_e = keys(fieldsPerGroup)) === null || _e === void 0 ? void 0 :
-        _e.map((group) => {
+        }), (_f = keys(fieldsPerGroup)) === null || _f === void 0 ? void 0 :
+        _f.map((group) => {
           let inputIndex = 0;
           return [
             h("div", { class: {
@@ -2540,7 +2556,11 @@ export class YooFormDynamicComponent {
       slideTitle: renderSlideTitle ? slideTitle : null
     };
     const inlineStyle = {
-      width: isFieldVisible && field.width > 0 ? field.width + 'px' : null
+      width: !(isFieldVisible && field.width > 0)
+        ? null
+        : field.name === 'operator' && this.forceReadonly // Decrease the size of readonly operator fields
+          ? `${field.width / 1.4}px`
+          : `${field.width}px`
     };
     const isPhotoField = (field) => [FormFieldType.multiphotos, FormFieldType.image, FormFieldType.photo, FormFieldType.carousel].includes(field === null || field === void 0 ? void 0 : field.type);
     if (((previousField === null || previousField === void 0 ? void 0 : previousField.width) > 0 || (previousField === null || previousField === void 0 ? void 0 : previousField.flex) > 0) && !field.width && !field.flex && isFieldVisible) {
@@ -2645,7 +2665,10 @@ export class YooFormDynamicComponent {
             : null)
       ];
     };
-    if (this.isPdf && renderSlideTitle) {
+    if (useGridstack) {
+      return h("div", { class: { 'no-scroll': this.useGridstack && this.gridstackItemNoScroll }, slot: field.name }, fieldContent());
+    }
+    else if (this.isPdf && renderSlideTitle) {
       const pdfClass = {
         'pdf-field-wrapper': true,
         break: isPdfMultiplePhotos || [FormFieldType.selectbuttons, FormFieldType.catalog].includes(field === null || field === void 0 ? void 0 : field.type),
@@ -2653,9 +2676,6 @@ export class YooFormDynamicComponent {
       };
       return h("div", { class: pdfClass, style: fieldStyle }, fieldContent());
     }
-    else if (useGridstack) {
-      return h("div", { class: { 'no-scroll': this.useGridstack && this.gridstackItemNoScroll }, slot: field.name }, fieldContent());
-    }
     else {
       return fieldContent();
     }
@@ -3015,7 +3035,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;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
     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);
@@ -3041,6 +3061,7 @@ export class YooFormDynamicComponent {
       disabled,
       clearable: !disabled,
       name: field.name,
+      key: field.name,
       isHistory: isHistory || this.forceHistory,
       isPdf: this.isPdf,
       isLesson: this.isLesson(),
@@ -3118,7 +3139,8 @@ export class YooFormDynamicComponent {
           min: field.min,
           max: field.max,
           maxCharacters: field.maxCharacters,
-          type: getInputType(field),
+          type: field.type === FormFieldType.number && isSamsung() ? FormFieldType.text : getInputType(field),
+          inputmode: field.type === FormFieldType.number && isSamsung() ? 'numeric' : '',
           step: field.step,
           iconPrefix: icon,
           iconSuffix: field.iconSuffix,
@@ -3247,7 +3269,8 @@ export class YooFormDynamicComponent {
           'pageSize',
           'extraClass',
           'dynamicOrdering',
-          'origin'
+          'origin',
+          'entityMapping'
         ];
         let extraClass = this.isLivePreview() ? 'live-preview-autocomplete' : null;
         if (this.isPdf) {
@@ -3259,7 +3282,11 @@ export class YooFormDynamicComponent {
           value: !isNullOrUndefined(value) ? value : field.fieldValue,
           idOnlyInitialSelection: field.tmpSelection,
           ...pick(field, fieldFields),
-          idOnly: !isNullOrUndefined(field.valuesColor) || !isNullOrUndefined(field.valuesIcon) ? true : field.idOnly,
+          idOnly: !(isNullOrUndefined(field.valuesColor) || !isNullOrUndefined(field.valuesIcon))
+            ? true
+            : !readonly
+              ? field.idOnly
+              : false,
           disabled,
           allowCreate,
           useUploader: field.useUploader,
@@ -3415,6 +3442,7 @@ export class YooFormDynamicComponent {
         extraAttrs = {
           shape: field.progressShape,
           maxValue: field.max,
+          animated: field.animated,
           value: value || field.progressValue,
           style: { '--trail-bar-color': 'var(--light)' }
         };
@@ -3495,7 +3523,7 @@ export class YooFormDynamicComponent {
         };
         break;
       case FormFieldType.textarea:
-        if (field.language === 'html' && (isWeb(this.host) || readonly)) {
+        if (field.useRichText || (field.language === 'html' && (isWeb(this.host) || readonly))) {
           TagType = 'yoo-form-text-editor';
         }
         else {
@@ -3592,45 +3620,110 @@ export class YooFormDynamicComponent {
             field && this.renderInput({ field, data, slideIndex, slideItems, inputIndex, readonly })));
         });
         break;
-      case FormFieldType.select:
       case FormFieldType.selectbuttons:
-      case FormFieldType.selectbuttonsmulti:
-      case FormFieldType.selectmulti:
-      case FormFieldType.selectimage:
-      case FormFieldType.selectchat:
-      case FormFieldType.selectcard: {
-        const multiple = field.type === FormFieldType.selectmulti || field.type === FormFieldType.selectbuttonsmulti || field.multiple;
+      case FormFieldType.selectbuttonsmulti: {
+        const multiple = field.type === FormFieldType.selectbuttonsmulti || field.multiple;
         const values = field.values || ((_h = field.opValues) === null || _h === void 0 ? void 0 : _h.find((opValue) => opValue));
-        const type = field.type === FormFieldType.selectbuttons || field.type === FormFieldType.selectbuttonsmulti
-          ? 'button'
-          : field.type === FormFieldType.selectcard
-            ? 'card'
-            : field.type === FormFieldType.selectchat
-              ? 'chat'
-              : field.type === FormFieldType.selectimage
-                ? 'image'
-                : 'radio';
-        TagType = 'yoo-form-choice';
+        TagType = 'yoo-form-choice-button';
         attrs = {
           ...attrs,
-          style: { ...(attrs.style || {}), '--button-columns': type === 'button' ? Math.min((values === null || values === void 0 ? void 0 : values.length) || 0, field.fullWidth ? 1 : field.enableThreeButtons ? 3 : 2) : undefined }
+          style: { ...(attrs.style || {}), '--button-columns': Math.min((values === null || values === void 0 ? void 0 : values.length) || 0, field.fullWidth ? 1 : field.enableThreeButtons ? 3 : 2) }
         };
         extraAttrs = {
+          multiple: multiple,
           valuesColor: field.valuesColor,
-          values: field.type === FormFieldType.selectimage
-            ? values === null || values === void 0 ? void 0 : values.map((value, index) => { var _a, _b, _c, _d, _e; return ({ image: value.image || value._downloadURL || value.file || ((_b = (_a = field.images) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b._downloadURL), text: (_e = (_d = (_c = value.text) === null || _c === void 0 ? void 0 : _c.text) !== null && _d !== void 0 ? _d : value.text) !== null && _e !== void 0 ? _e : value }); })
-            : values,
-          sentence: field.sentence,
+          values: values,
+          useTranslate: field.translate,
+          shuffled: this.formType === 'lesson',
+          class: field.extraClass,
           description: field.description,
+          livePreview: this.isLivePreview()
+        };
+        break;
+      }
+      case FormFieldType.select:
+      case FormFieldType.selectmulti: {
+        const multiple = field.type === FormFieldType.selectmulti || field.multiple;
+        const values = field.values || ((_j = field.opValues) === null || _j === void 0 ? void 0 : _j.find((opValue) => opValue));
+        TagType = 'yoo-form-choice-radio';
+        attrs = {
+          ...attrs,
+          style: { ...(attrs.style || {}) }
+        };
+        extraAttrs = {
+          valuesColor: field.valuesColor,
+          values: values,
           cardColumns: field.cardColumns,
           multiple,
           allowOther: field.allowOther,
           useTranslate: field.translate,
+          shuffled: this.formType === 'lesson',
+          answer: field.answer,
+          class: field.extraClass,
+          description: field.description,
+          livePreview: this.isLivePreview()
+        };
+        break;
+      }
+      case FormFieldType.selectchat: {
+        const multiple = field.multiple;
+        const values = field.values || ((_k = field.opValues) === null || _k === void 0 ? void 0 : _k.find((opValue) => opValue));
+        TagType = 'yoo-form-choice-chat';
+        attrs = {
+          ...attrs,
+          style: { ...(attrs.style || {}) }
+        };
+        extraAttrs = {
+          values: values,
+          sentence: field.sentence,
+          description: field.description,
+          multiple,
+          useTranslate: field.translate,
+          shuffled: this.formType === 'lesson',
+          answer: field.answer,
+          class: field.extraClass,
+          livePreview: this.isLivePreview()
+        };
+        break;
+      }
+      case FormFieldType.selectimage: {
+        const multiple = field.multiple;
+        const values = field.values || ((_l = field.opValues) === null || _l === void 0 ? void 0 : _l.find((opValue) => opValue));
+        TagType = 'yoo-form-choice-image';
+        attrs = {
+          ...attrs,
+          style: { ...(attrs.style || {}) }
+        };
+        extraAttrs = {
+          values: values === null || values === void 0 ? void 0 : values.map((value, index) => { var _a, _b, _c, _d, _e; return ({ image: value.image || value._downloadURL || value.file || ((_b = (_a = field.images) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b._downloadURL), text: (_e = (_d = (_c = value.text) === null || _c === void 0 ? void 0 : _c.text) !== null && _d !== void 0 ? _d : value.text) !== null && _e !== void 0 ? _e : value }); }),
+          multiple,
+          description: field.description,
+          useTranslate: field.translate,
+          shuffled: this.formType === 'lesson',
+          answer: field.answer,
+          class: field.extraClass,
+          livePreview: this.isLivePreview()
+        };
+        break;
+      }
+      case FormFieldType.selectcard: {
+        const multiple = field.multiple;
+        const values = field.values || ((_m = field.opValues) === null || _m === void 0 ? void 0 : _m.find((opValue) => opValue));
+        TagType = 'yoo-form-choice-card';
+        attrs = {
+          ...attrs,
+          style: { ...(attrs.style || {}) }
+        };
+        extraAttrs = {
+          valuesColor: field.valuesColor,
+          values: values,
+          description: field.description,
+          multiple,
+          useTranslate: field.translate,
           maxWidth: field.maxWidth,
           shuffled: this.formType === 'lesson',
           answer: field.answer,
           class: field.extraClass,
-          type,
           livePreview: this.isLivePreview()
         };
         break;
@@ -3693,7 +3786,7 @@ export class YooFormDynamicComponent {
           collectionName: field.collectionName,
           entityType: field.entityType,
           iconPrefix: field.iconPrefix,
-          descriptionTemplate: data.isUnitCurrency && ((_j = data.currency) === null || _j === void 0 ? void 0 : _j.symbol) ? `${data.currency.symbol} {{text}}` : null,
+          descriptionTemplate: data.isUnitCurrency && ((_o = data.currency) === null || _o === void 0 ? void 0 : _o.symbol) ? `${data.currency.symbol} {{text}}` : null,
           max: field.max,
           queryFields: field.queryFields,
           model: field.model,
@@ -3702,7 +3795,7 @@ export class YooFormDynamicComponent {
           onFetchCustomData: (ev) => this.onFetchCustomData(field, ev),
           onFetchData: (ev) => this.onFetchData(field, ev)
         };
-        if (attrs.validators && ((_k = config === null || config === void 0 ? void 0 : config.validators) === null || _k === void 0 ? void 0 : _k.length)) {
+        if (attrs.validators && ((_p = config === null || config === void 0 ? void 0 : config.validators) === null || _p === void 0 ? void 0 : _p.length)) {
           attrs.validators.push(...config.validators);
         }
         break;
@@ -3835,7 +3928,7 @@ export class YooFormDynamicComponent {
         extraAttrs = {
           logo: field.logo,
           value: value || field.value,
-          whiteLabel: (_l = getSession().tenant) === null || _l === void 0 ? void 0 : _l.waitlistWhitelabel
+          whiteLabel: (_q = getSession().tenant) === null || _q === void 0 ? void 0 : _q.waitlistWhitelabel
         };
         break;
       case FormFieldType.recurrence:
@@ -3886,7 +3979,8 @@ export class YooFormDynamicComponent {
         TagType = 'yoo-form-carousel';
         extraAttrs = {
           isVisible: this.isCurrentSlide(slideIndex),
-          mediaSrc: value,
+          mediaSrc: [].concat(value),
+          mediaType: field.mediaType,
           allowPreview: true,
           allowSwipeDownDismiss: false,
           maxHeight: field.maxHeight,
@@ -4037,6 +4131,7 @@ export class YooFormDynamicComponent {
           initialQuery: value,
           entityType: field.entityType || field.collectionName,
           isFormField: true,
+          isReadonly: readonly,
           field,
           showGlobalActions: true,
           scrollable: field.gridScrollable !== false,
@@ -4058,7 +4153,7 @@ export class YooFormDynamicComponent {
           onFetchData: (ev) => {
             ev.stopPropagation();
             field.gridCurrentSearch = ev.detail;
-            this.fieldFetchData.emit({ field, search: field.gridCurrentSearch });
+            this.fieldFetchData.emit({ field, search: ev.detail });
           },
           onTagsSelect: (ev) => {
             ev.stopPropagation();
@@ -4128,7 +4223,7 @@ export class YooFormDynamicComponent {
             h("span", { slot: "title" }, field.title),
             h("span", { innerHTML: markdown || value })));
         }
-        if (((_m = field.valuesIcon) === null || _m === void 0 ? void 0 : _m.length) > 0) {
+        if (((_r = field.valuesIcon) === null || _r === void 0 ? void 0 : _r.length) > 0) {
           return [
             markdown && h("div", { class: "info-header" }, markdown),
             field.valuesIcon.map((item) => {
@@ -4157,7 +4252,7 @@ export class YooFormDynamicComponent {
         break;
       case FormFieldType.segment:
         {
-          TagType = 'yoo-segment';
+          TagType = 'yoo-segmented-control';
           let initialIndex = 0;
           if (value) {
             initialIndex = field.values.findIndex((v) => v.id === value);
@@ -4321,7 +4416,8 @@ export class YooFormDynamicComponent {
           heading: field.heading,
           values: field.values,
           livePreview: this.isLessonPreview(),
-          isVisible: this.isCurrentSlide(slideIndex)
+          isVisible: this.isCurrentSlide(slideIndex),
+          isAnimationFinished: this.isAnimationFinished
         };
         break;
       case FormFieldType.feedpreview:
@@ -4442,26 +4538,9 @@ export class YooFormDynamicComponent {
     if (field.type === FormFieldType.recurrence) {
       const { validity } = getFieldState(field, this.fieldsState);
       const PreviewButton = ({ slot }) => (h("yoo-button", { animated: true, color: "app-color", disabled: !validity, fill: "transparent", size: "small", slot: slot, onClick: () => {
-          const animationKeyframes = [{ transform: 'translateX(0)' }, { transform: 'translateX(100%)' }];
-          const animationOptions = { duration: 300, fill: 'forwards' };
-          const modal = findParent(this.host, '.modal-wrapper') || findParent(this.host, '.modal-fullscreen');
-          const form = modal.children[0];
-          let preview = modal.querySelector('yoo-form-recurrence-preview');
-          if (preview) {
-            preview.style.display = '';
-          }
-          else {
-            preview = document.createElement('yoo-form-recurrence-preview');
-            preview.addEventListener('close', async () => {
-              await preview.animate(animationKeyframes, animationOptions).finished;
-              preview.style.display = 'none';
-              form.style.display = '';
-            });
-            modal.appendChild(preview);
-          }
-          form.style.display = 'none';
+          const preview = document.createElement('yoo-form-recurrence-preview');
           preview.value = getFieldValue(field, this.currentData, this.suffix);
-          preview.animate(animationKeyframes, { ...animationOptions, direction: 'reverse' });
+          showModal(preview, null, null, getModalAnimation('Enter', 'X', true), getModalAnimation('Leave', 'X', true), true);
         } },
         h("yoo-icon", { color: "app-color", name: "eye", size: "small", slot: "start" }),
         translate('PREVIEW')));
@@ -4533,7 +4612,7 @@ export class YooFormDynamicComponent {
     }
   }
   render() {
-    var _a;
+    var _a, _b;
     this.inputElements = [];
     return (h(Host, { class: {
         'lesson-detail': this.isLessonDetail(),
@@ -4542,12 +4621,13 @@ export class YooFormDynamicComponent {
         'mission-form': this.isMission(),
         'mission-validation': this.isMissionValidation,
         'pdf': this.isPdf,
+        'live-preview-form': (_a = this.formExtraOptions) === null || _a === void 0 ? void 0 : _a.livePreview,
         'lesson-form': this.isLesson(),
         'workflow-form': this.hasWorkflow(),
         'kanban-form': this.isKanban(),
         'waitlist-form': this.isWaitlist(),
         'wizard': this.showWizard,
-        'wizard-single': ((_a = this.getVisibleSlides()) === null || _a === void 0 ? void 0 : _a.length) <= 1,
+        'wizard-single': ((_b = this.getVisibleSlides()) === null || _b === void 0 ? void 0 : _b.length) <= 1,
         'form-creator-block': this.isFormCreatorBlock(),
         'vertical-tabs': this.showVerticalTabs,
         'no-animation': isAnimationsDisabled() || this.hasLoaded,
@@ -5829,6 +5909,23 @@ export class YooFormDynamicComponent {
       "attribute": "gridstack-resizable",
       "reflect": false
     },
+    "gridstackFloat": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "gridstack-float",
+      "reflect": false
+    },
     "gridstackCellHeight": {
       "type": "number",
       "mutable": false,
@@ -5990,8 +6087,8 @@ export class YooFormDynamicComponent {
         "text": ""
       },
       "complexType": {
-        "original": "number",
-        "resolved": "number",
+        "original": "{ tabIndex: number, slideIndex: number }",
+        "resolved": "{ tabIndex: number; slideIndex: number; }",
         "references": {}
       }
     }, {
@@ -6605,6 +6702,26 @@ export class YooFormDynamicComponent {
           }
         }
       }
+    }, {
+      "method": "gridstackItemClicked",
+      "name": "gridstackItemClicked",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "{ node: IGridstackItem, slideIndex: number }",
+        "resolved": "{ node: IGridstackItem; slideIndex: number; }",
+        "references": {
+          "IGridstackItem": {
+            "location": "import",
+            "path": "@shared/interfaces"
+          }
+        }
+      }
     }]; }
   static get methods() { return {
     "getScrollOrDivElement": {
@@ -7135,6 +7252,22 @@ export class YooFormDynamicComponent {
         "tags": []
       }
     },
+    "getTabName": {
+      "complexType": {
+        "signature": "() => Promise<string>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<string>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
     "highlightInvalidFields": {
       "complexType": {
         "signature": "() => Promise<void>",
@@ -7270,6 +7403,22 @@ export class YooFormDynamicComponent {
         "text": "",
         "tags": []
       }
+    },
+    "forceCheckValidityAndEmitChanges": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
     }
   }; }
   static get elementRef() { return "host"; }