@yoobic/yobi 8.6.0-4 → 8.6.0-6

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

@@ -364,7 +364,7 @@ export class YooFormCaptureComponent {
     imageTag.addEventListener('fetchData', (ev) => {
       this.onFetchGridData(ev);
     });
-    return showModal(imageTag, null, '', 'slideYEnterAnimation', 'slideYLeaveAnimation');
+    return showModal({ component: imageTag, enterAnimation: 'slideYEnterAnimation', leaveAnimation: 'slideYLeaveAnimation' });
   }
   updateTagData(tag, index) {
     this.initTags();
@@ -401,7 +401,7 @@ export class YooFormCaptureComponent {
     if (isNativeMobile() && isIOS() && !isIphoneX()) {
       StatusBar.hide();
     }
-    return showModal(cameraPreviewer, null, `${extraClass} transparent`, 'slideYEnterAnimation', 'slideYLeaveAnimation').then((ret) => {
+    return showModal({ component: cameraPreviewer, cssClass: `${extraClass} transparent`, enterAnimation: 'slideYEnterAnimation', leaveAnimation: 'slideYLeaveAnimation' }).then((ret) => {
       if (isNativeMobile() && isIOS() && !isIphoneX()) {
         StatusBar.show();
       }
@@ -432,12 +432,16 @@ export class YooFormCaptureComponent {
     if (this.algorithm && this.algorithm.stitch && !useLibrary) {
       let stitchDirection = null;
       const buttons = [
-        { text: translate('TOPTOBOTTOM'), icon: 'big-arrow-down', handler: () => {
+        {
+          text: translate('TOPTOBOTTOM'), icon: 'big-arrow-down', handler: () => {
             stitchDirection = 'from-top';
-          }, separator: true },
-        { text: translate('LEFTTORIGHT'), icon: 'big-arrow-right', handler: () => {
+          }, separator: true
+        },
+        {
+          text: translate('LEFTTORIGHT'), icon: 'big-arrow-right', handler: () => {
             stitchDirection = 'from-left';
-          }, separator: true }
+          }, separator: true
+        }
       ];
       await showActionSheet(buttons, null, {}, null, null);
       if (stitchDirection) {
@@ -561,8 +565,13 @@ export class YooFormCaptureComponent {
   }
   async captureFromWebcam(device, index) {
     var _a;
-    const mediaData = (_a = (await showModal(Object.assign(document.createElement('yoo-form-capture-webcam-dialog'), { device }), null, !isWeb(this.host) ? '' : 'fullscreen', 'fadeEnterAnimation', 'fadeLeaveAnimation'))) === null || _a === void 0 ? void 0 : _a.data;
-    //  this.allowCrop(mediaData) && (mediaData = await this.onOpenCropper(mediaData));
+    let mediaData = (_a = (await showModal({
+      component: Object.assign(document.createElement('yoo-form-capture-webcam-dialog'), { device }),
+      cssClass: !isWeb(this.host) ? '' : 'fullscreen',
+      enterAnimation: 'fadeEnterAnimation',
+      leaveAnimation: 'fadeLeaveAnimation'
+    }))) === null || _a === void 0 ? void 0 : _a.data;
+    this.allowCrop(mediaData) && (mediaData = await this.onOpenCropper(mediaData));
     mediaData && await this.processMediaData(mediaData, index);
   }
   captureFromDisk(index) {
@@ -838,7 +847,7 @@ export class YooFormCaptureComponent {
       if (this.type === 'audio') {
         documentViewer.type = this.type;
       }
-      showModal(documentViewer, null, 'fullscreen');
+      showModal({ component: documentViewer, cssClass: 'fullscreen' });
     }
   }
   openGallery(index) {
@@ -966,7 +975,7 @@ export class YooFormCaptureComponent {
     photoView.imageRecognitionResults = this.imageRecognitionResults;
     photoView.imageRecognitionDisplay = this.algorithmDisplay;
     photoView.isStitch = this.isStitch();
-    showModal(photoView);
+    showModal({ component: photoView });
   }
   onShowMaximumCaptureReached() {
     const description = translate('MAXIMUMCAPTUREREACHED');
@@ -1340,7 +1349,7 @@ export class YooFormCaptureComponent {
       }
     }
     dialog.markers = markers;
-    showModal(dialog, null, '', 'slideYEnterAnimation', 'slideYLeaveAnimation', isWeb(this.host));
+    showModal({ component: dialog, enterAnimation: 'slideYEnterAnimation', leaveAnimation: 'slideYLeaveAnimation', showBackdrop: isWeb(this.host) });
   }
   renderDistance(index) {
     return [
@@ -1359,12 +1368,7 @@ export class YooFormCaptureComponent {
   }
   renderCaptureStatus() {
     const value = this.value || [];
-    return (value && (h("div", { class: { 'capture-status': true, 'image-reco': this.isImageRecognition } }, this.required && (h("div", { class: "status" }, value.length > this.min
-      ? translate('PHOTOTAKEN', { captured_number: `${this.min}/${this.min}` })
-      : translate('PHOTOTAKEN', { captured_number: `${value.length}/${this.min}` }))), !this.hideOptional && this.max && this.max > 0 && (h("div", { class: {
-        status: true,
-        'max-reached': value.length === this.max
-      } }, translate('MAXIMUMCAPTURE', { captured_number: `${value.length}/${this.max}` }))), value.length > 0 && (h("div", { class: "action", onClick: () => {
+    return (value && (h("div", { class: { 'capture-status': true, 'image-reco': this.isImageRecognition } }, h("div", { class: "status-counters" }, this.required && (h("div", { class: "status" }, translate('PHOTOTAKEN', { captured_number: `${value.length > this.min ? this.min : value.length}/${this.min}` }))), !this.hideOptional && this.max > 0 && (h("div", { class: { status: true, 'max-reached': value.length === this.max } }, translate('MAXIMUMCAPTURE', { captured_number: `${value.length}/${this.max}` })))), value.length > 0 && (h("div", { class: "action", onClick: () => {
         this.toggleSelectorMode();
       } }, translate('SELECT2'))))));
   }

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

@@ -440,6 +440,10 @@ svg:not(:root) {
   background-color: var(--light, #ffffff);
 }
 
+:host(.rtl) .slide-nav yoo-tag.left, :host(.rtl) .slide-nav yoo-tag.right {
+  transform: scaleX(-1);
+}
+
 @media print {
   :host .media-container,
 :host .media-container .pdf-container {

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

@@ -35,7 +35,6 @@ export class YooFormCarouselComponent {
     this.hideSecondaryActions = undefined;
     this.navbarVisiblity = 'visible';
     this.currentActiveIndex = 0;
-    this.showPhotoCounts = this.displayPhotoCounter;
     this.visibility = false;
   }
   handlePinchZoom(event) {
@@ -94,17 +93,11 @@ export class YooFormCarouselComponent {
   onIonSlideTransitionEnd(ev) {
     ev.stopPropagation();
     if (this.ionSlides) {
-      this.showPhotoCounts = this.displayPhotoCounter;
       const newIndex = ev === null || ev === void 0 ? void 0 : ev.detail;
       if (!isNullOrUndefined(newIndex)) {
         this.currentActiveIndex = newIndex;
         this.slideChanges.emit(this.currentActiveIndex);
       }
-      this.paginationTimeout = setTimeout(() => {
-        if (this.showPhotoCounts) {
-          this.showPhotoCounts = false;
-        }
-      }, 1000);
     }
   }
   onSwipeDown() {
@@ -341,14 +334,14 @@ export class YooFormCarouselComponent {
     if (this.isPdf) {
       return this.renderPdfImage();
     }
-    return (h(SlideWrapper, { ...attrs }, h("yoo-ion-slides", { ref: (el) => (this.ionSlides = el), onIonSlideTransitionEnd: (ev) => this.onIonSlideTransitionEnd(ev), onIonSlideTouchStart: !this.previewMode ? () => clearTimeout(this.paginationTimeout) : null, options: {
+    return (h(SlideWrapper, { ...attrs }, h("yoo-ion-slides", { ref: (el) => (this.ionSlides = el), onIonSlideTransitionEnd: (ev) => this.onIonSlideTransitionEnd(ev), options: {
         autoplay: false,
         spaceBetween: 15,
         ...(isDocument ? { slidesPerView: 1.2 } : {}),
         ...(this.paginationType ? { pagination: { type: this.paginationType } } : {})
       }, navigation: false }, this.mediaSrc.map((src, index) => this.renderSlide(src, index))), !this.previewMode && this.mediaType !== 'audio' && !isDocument && (h("yoo-tag", { class: {
         'media-counts-container': true,
-        active: this.showPhotoCounts
+        active: this.displayPhotoCounter
       }, color: "dark-40", size: tagSize }, h("yoo-icon", { name: "multiple-photos", color: "light", size: tagSize, slot: "start" }), h("div", { class: "text" }, `${this.currentActiveIndex + 1}/${this.mediaSrc.length}`))), isWeb(this.host) && this.isMultiMedia(this.mediaSrc) && this.paginationType !== 'progressbar' && (h("div", { class: "slide-nav" }, this.currentActiveIndex > 0 && h("yoo-tag", { onClick: (ev) => this.onSlidePrev(ev), class: prevBtnLocation, icon: prevBtnLocation, color: "light", size: "medium" }), this.currentActiveIndex < this.mediaSrc.length - 1 && (h("yoo-tag", { onClick: (ev) => this.onSlideNext(ev), class: nextBtnLocation, icon: nextBtnLocation, color: "light", size: "medium" }))))));
   }
   renderIconsContainer() {
@@ -889,7 +882,6 @@ export class YooFormCarouselComponent {
   static get states() {
     return {
       "currentActiveIndex": {},
-      "showPhotoCounts": {},
       "visibility": {}
     };
   }

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

@@ -258,7 +258,13 @@ export class YooFormCatalogComponent {
   onOpenCatalogDialog(product) {
     this.dialog = document.createElement('yoo-form-catalog-dialog');
     this.dialog.product = product;
-    showModal(this.dialog, { half: false }, null, getModalAnimation('Enter', 'X', { host: this.host }), getModalAnimation('Leave', 'X', { host: this.host }), true).then(() => {
+    showModal({
+      component: this.dialog,
+      componentProps: { half: false },
+      enterAnimation: getModalAnimation('Enter', 'X', { host: this.host }),
+      leaveAnimation: getModalAnimation('Leave', 'X', { host: this.host }),
+      showBackdrop: true
+    }).then(() => {
       this.dialog = null;
     });
   }

package/dist/collection/components/form/form-date-time/form-date-time.js

@@ -244,7 +244,15 @@ export class YooFormDateTimeComponent {
       this.dialog.style.boxShadow = 'var(--shadow-03)';
       this.dialog.style.backgroundColor = 'var(--light)';
     }
-    await showModal(this.dialog, web ? null : { half: true, coeffHalf: hasCalendar ? 0.66 : 0.33 }, web ? this.updateModalCssClass() : null, web ? this.getModalAnimation('Enter') : getModalAnimation('Enter', 'Y', { host: this.host }), web ? this.getModalAnimation('Leave') : getModalAnimation('Leave', 'Y', { host: this.host }), true, false);
+    await showModal({
+      component: this.dialog,
+      componentProps: web ? null : { half: true, coeffHalf: hasCalendar ? 0.66 : 0.33 },
+      cssClass: web ? this.updateModalCssClass() : null,
+      enterAnimation: web ? this.getModalAnimation('Enter') : getModalAnimation('Enter', 'Y', { host: this.host }),
+      leaveAnimation: web ? this.getModalAnimation('Leave') : getModalAnimation('Leave', 'Y', { host: this.host }),
+      showBackdrop: true,
+      displayFullscreenButton: false
+    });
     this.dialog = null;
     this.timePicker = null;
     this.currentTime = null;
@@ -336,7 +344,7 @@ export class YooFormDateTimeComponent {
         closeModal(null, dialog);
       };
       dialog.addEventListener('scannedSuccess', scannedSuccessListener);
-      await showModal(dialog);
+      await showModal({ component: dialog });
       dialog.removeEventListener('scannedSuccess', scannedSuccessListener);
       dialog = null;
     }

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

@@ -91,7 +91,7 @@ export class YooFormDocumentComponent {
     modal.hideSecondaryActions = this.hideSecondaryActions;
     const type = getType(this.document);
     modal.modalMode = type && type === 'video';
-    showModal(modal, {}, '', getAnimation('Enter'), getAnimation('Leave'), true);
+    showModal({ component: modal, enterAnimation: getAnimation('Enter'), leaveAnimation: getAnimation('Leave'), showBackdrop: true });
     this.inputChanged.emit(true);
     this.validityChanged.emit(true);
   }

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

@@ -1270,9 +1270,6 @@ svg:not(:root) {
   background: var(--stable-ultralight, #fafafa);
   border-radius: var(--border-radius-08, 0.5rem);
 }
-:host .field-placeholder:not(.readonly):not(.invisible).textarea.html {
-  z-index: 1;
-}
 :host .field-placeholder:not(.readonly):not(.invisible) yoo-collapsible {
   padding: var(--spacing-16, 1rem) 0 0;
 }
@@ -1516,6 +1513,9 @@ svg:not(:root) {
 :host(.mobile) {
   --footer-height: 5.75rem;
 }
+:host(.mobile) .inputs-container-parent.grid-flex {
+  height: 100%;
+}
 
 :host(.wizard) {
   display: block;

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

@@ -1,12 +1,12 @@
 import { FormFieldType, IncentivePartType, QUIZZ_COMPONENTS_FORM_FIELDS } from '@shared/interfaces';
-import { answerIsValid, cancelRequestInterval, closeModal, debounce, disableKeyboardResize, dispatchCustomEvent, 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 { answerIsValid, cancelRequestInterval, closeModal, debounce, disableKeyboardResize, dispatchCustomEvent, 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, sanitizeInputValue, showContextMenu, showModal, showToast, slenderizeObject, translate, translateMulti, updateDatasetFilters } from '@shared/utils';
 import { forceUpdate, h, Host } 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 { 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';
-import { getFieldState, getInputType, getLastButtons, getLessonPageValidity, getNextButton, getPreviousAndNextButtons, getRecapButton, hasKeyboardInput } from './helpers';
+import { getFieldState, getInputType, getLastButtons, getLessonPageValidity, getNextButton, getPreviousAndNextButtons, getRecapButton, getSlideIndexFromTabs, hasKeyboardInput } from './helpers';
 export class YooFormDynamicComponent {
   constructor() {
     this.inputElements = [];
@@ -136,6 +136,19 @@ export class YooFormDynamicComponent {
     this.showHistoryModal = false;
     this.selectedTabIndexState = 0;
     this.workflowButtonTextChanged = undefined;
+    this.slidesOptions = {
+      autoplay: false,
+      pagination: {
+        el: '.swiper-pagination',
+        type: 'progressbar'
+      }
+    };
+    if (isAndroid() && isNativeMobile()) {
+      this.slidesOptions = {
+        ...this.slidesOptions,
+        width: window.innerWidth
+      };
+    }
   }
   async onLockSwipesChanged() {
     lockSwipes(this.ionSlides, this.lockSwipes);
@@ -696,7 +709,7 @@ export class YooFormDynamicComponent {
       lockSwipes(this.ionSlides, true);
     }
     // Disabled this because of the warnings from stencil , not sure we still need it
-    if ((this.showTabs || this.showVerticalTabs) && !this.isLivePreview() && !['form-creator-announcement', 'form-creator-block'].includes(this.formType) && !(this.isMission() && !isWeb(this.host))) {
+    if ((this.showTabs || this.showVerticalTabs) && !this.isLivePreview() && !this.shouldUseTranslations() && !(this.isMission() && !isWeb(this.host))) {
       this.updateState(true);
     }
     this.host.classList.remove('no-initial-height');
@@ -871,7 +884,7 @@ export class YooFormDynamicComponent {
     return this.formType === 'workflow' || this.formType === 'form-creator-preview-workflow';
   }
   isFormCreatorBlock() {
-    return this.formType === 'form-creator-block';
+    return this.formType === 'form-creator-block' || this.formType === 'lesson-creator-block';
   }
   shouldUseTranslations() {
     return this.isFormCreatorBlock() || this.formType === 'form-creator-announcement';
@@ -1064,7 +1077,7 @@ export class YooFormDynamicComponent {
       autoCompleteDialog.valuesColor = valuesColor;
       autoCompleteDialog.value = value;
       this.workflowButtonTextChanged = false;
-      showModal(autoCompleteDialog, { half: true }, null, getModalAnimation('Enter'), getModalAnimation('Leave'), true, false, null).then((ret) => {
+      showModal({ component: autoCompleteDialog, componentProps: { half: true }, enterAnimation: getModalAnimation('Enter'), leaveAnimation: getModalAnimation('Leave'), showBackdrop: true, displayFullscreenButton: false }).then((ret) => {
         var _a;
         if (ret.data && ((_a = ret === null || ret === void 0 ? void 0 : ret.data[0]) === null || _a === void 0 ? void 0 : _a.length)) {
           this.selectedButtonText = [].concat(ret.data);
@@ -1672,7 +1685,7 @@ export class YooFormDynamicComponent {
       form.fieldFetchDataFn = (ev) => {
         this.fieldFetchData.emit(ev);
       };
-      showModal(form).then((ret) => {
+      showModal({ component: form }).then((ret) => {
         if (ret && ret.data) {
           this.currentData = ret.data;
           this.checkValidityAndEmitChanges();
@@ -2031,15 +2044,15 @@ export class YooFormDynamicComponent {
     }
   }
   onTabSelected(ev) {
-    if (!this.isLivePreview() && this.formType !== 'form-creator-block') {
+    if (!this.isLivePreview() && !this.isFormCreatorBlock()) {
       this.selectedTabIndexState = -1;
     }
     else {
       this.selectedTabIndexState = ev.detail.nextIndex;
     }
     this.selectedTabIndex = ev.detail.nextIndex;
-    this.activeIndex = 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;
+    const selectedSlideIndex = getSlideIndexFromTabs(this.slides, this.tabs, this.selectedTabIndex);
+    this.activeIndex = selectedSlideIndex;
     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
@@ -2154,19 +2167,20 @@ export class YooFormDynamicComponent {
       if (slides.length > 1) {
         this.slidesState = this.slidesState || [];
         this.tabs = this.slides.map((s, i) => {
-          var _a, _b, _c, _d;
+          var _a, _b, _c, _d, _e;
           return ({
             tabConfig: {
-              title: (_a = this.slides[i]) === null || _a === void 0 ? void 0 : _a.title,
-              value: ((_b = this.slides[i]) === null || _b === void 0 ? void 0 : _b.value) || this.slides[i].title,
-              icon: (_c = this.slides[i]) === null || _c === void 0 ? void 0 : _c.icon,
+              id: (_a = this.slides[i]) === null || _a === void 0 ? void 0 : _a._id,
+              title: (_b = this.slides[i]) === null || _b === void 0 ? void 0 : _b.title,
+              value: ((_c = this.slides[i]) === null || _c === void 0 ? void 0 : _c.value) || this.slides[i].title,
+              icon: (_d = this.slides[i]) === null || _d === void 0 ? void 0 : _d.icon,
               iconColor: this.showBadgesVerticalTabs ? this.slidesState[i].validity ? 'success' : 'danger' : null,
-              description: (_d = this.slides[i]) === null || _d === void 0 ? void 0 : _d.description
+              description: (_e = this.slides[i]) === null || _e === void 0 ? void 0 : _e.description
             },
             slide: s
           });
         }).filter((item, index) => { var _a; return this.isSlideVisible(item.slide) && !((_a = this.slidesState[index]) === null || _a === void 0 ? void 0 : _a.locked); }).map(item => ({ ...item.tabConfig }));
-        const selectedSlideIndex = 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;
+        const selectedSlideIndex = getSlideIndexFromTabs(slides, this.tabs, this.selectedTabIndex);
         const selectedSlide = slides[selectedSlideIndex];
         this.setTabSelectedValue(this.selectedTabIndex || 0);
         return [
@@ -2792,7 +2806,7 @@ export class YooFormDynamicComponent {
     return (h("yoo-button", { fill: "transparent", shape: "circular", rippleType: "unbounded", onClick: () => this.onToggleSecondaryField(field, slide, true) }, h("yoo-icon", { size: "medium", name: icon, color: isActive ? 'app-color' : 'stable' })));
   }
   renderToolbarButton(field) {
-    return (h("yoo-button", { size: isWeb(this.host) && !this.isLivePreview() ? 'medium' : 'large', color: field.color, onClick: () => this.onFieldButtonClick(field), disabled: field.disabledHandler ? field.disabledHandler(this.currentData) : false }, translate(field.title || field.name)));
+    return (h("yoo-button", { size: isWeb(this.host) && !this.isLivePreview() ? 'medium' : 'large', color: field.color, onClick: () => this.onFieldButtonClick(field), disabled: field.disabledHandler ? field.disabledHandler(this.currentData) : false }, field.icon && h("yoo-icon", { slot: "start", size: "small", color: field.iconPrefixColor || 'stable', name: field.icon }), translate(field.title || field.name)));
   }
   onFieldButtonClick(field) {
     Promise.resolve(field.handler(this.currentData, field, this.injector, this)).then(() => {
@@ -3153,7 +3167,7 @@ export class YooFormDynamicComponent {
         extraAttrs = {
           min: field.min,
           max: field.max,
-          allowDecimals: field.allowDecimals,
+          allowDecimals: isFunction(field.allowDecimals) ? field.allowDecimals(this.host) : field.allowDecimals,
           maxCharacters: field.maxCharacters,
           type: field.type === FormFieldType.number && isSamsung() ? FormFieldType.text : getInputType(field),
           inputmode: field.type === FormFieldType.number && isSamsung() ? 'numeric' : '',
@@ -3426,15 +3440,6 @@ export class YooFormDynamicComponent {
           onFetchFieldFilterData: (ev) => this.onFetchFieldFilterData(ev)
         };
         break;
-      case FormFieldType.shopping:
-        TagType = 'yoo-form-shopping';
-        extraAttrs = {
-          products: field.products,
-          inlineActions: field.inlineActions,
-          shoppingView: field.shoppingView,
-          currencySymbol: field.currencySymbol
-        };
-        break;
       case FormFieldType.pricecheck:
         TagType = 'yoo-form-pricecheck';
         extraAttrs = {
@@ -3871,7 +3876,7 @@ export class YooFormDynamicComponent {
           label: generateLabel(field),
           multiple: field.type === FormFieldType.multiphotos,
           min: field.minPhotos || 1,
-          max: readonly ? null : (field.maxPhotos || 1),
+          max: readonly ? null : (field.maxPhotos || 5),
           hideOptional: field.hideOptional,
           tags: field.values,
           duration: field.duration,
@@ -4302,7 +4307,7 @@ export class YooFormDynamicComponent {
         TagType = 'yoo-form-missing-word';
         extraAttrs = {
           ...extraAttrs,
-          sentence: field.sentence
+          sentence: sanitizeInputValue(field.sentence)
         };
         break;
       case FormFieldType.imagetagging:
@@ -4534,7 +4539,7 @@ export class YooFormDynamicComponent {
           const preview = document.createElement('yoo-form-recurrence-preview');
           preview.value = getFieldValue(field, this.currentData, this.suffix);
           preview.addEventListener('close', () => closeModal(null, preview));
-          showModal(preview, null, null, getModalAnimation('Enter', 'X', { host: this.host, reversedSlide: true }), getModalAnimation('Leave', 'X', { host: this.host, reversedSlide: true }), true);
+          showModal({ component: preview, enterAnimation: getModalAnimation('Enter', 'X', { host: this.host, reversedSlide: true }), leaveAnimation: getModalAnimation('Leave', 'X', { host: this.host, reversedSlide: true }), showBackdrop: true });
         } }, h("yoo-icon", { color: "app-color", name: "eye", size: "small", slot: "start" }), translate('PREVIEW')));
       return validity ? (h("yoo-tooltip", { content: translate('PREVIEWSCHEDULEDPUBLICATION'), placement: "top", slot: slot }, h(PreviewButton, null))) : (h(PreviewButton, { slot: slot }));
     }
@@ -5071,7 +5076,7 @@ export class YooFormDynamicComponent {
         "mutable": false,
         "complexType": {
           "original": "FormDynamicType",
-          "resolved": "\"feed\" | \"form-creator-announcement\" | \"form-creator-block\" | \"form-creator-preview\" | \"form-creator-preview-kanban\" | \"form-creator-preview-lesson\" | \"form-creator-preview-workflow\" | \"kanban\" | \"lesson\" | \"lesson-detail\" | \"lesson-question-result\" | \"mission\" | \"mission-validation\" | \"poll\" | \"service\" | \"todo\" | \"visit\" | \"waitlist\" | \"workflow\"",
+          "resolved": "\"feed\" | \"form-creator-announcement\" | \"form-creator-block\" | \"form-creator-preview\" | \"form-creator-preview-kanban\" | \"form-creator-preview-lesson\" | \"form-creator-preview-workflow\" | \"kanban\" | \"lesson\" | \"lesson-creator-block\" | \"lesson-detail\" | \"lesson-question-result\" | \"mission\" | \"mission-validation\" | \"poll\" | \"service\" | \"todo\" | \"visit\" | \"waitlist\" | \"workflow\"",
           "references": {
             "FormDynamicType": {
               "location": "import",

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

@@ -152,3 +152,12 @@ export function hasKeyboardInput(fieldType) {
       return false;
   }
 }
+export function getSlideIndexFromTabs(slides, tabs, tabIndex) {
+  const tab = tabs === null || tabs === void 0 ? void 0 : tabs[tabIndex || 0];
+  return Math.max((slides === null || slides === void 0 ? void 0 : slides.findIndex((s) => {
+    if (s._id) {
+      return s._id === (tab === null || tab === void 0 ? void 0 : tab.id);
+    }
+    return (s.value || s.title) === (tab === null || tab === void 0 ? void 0 : tab.value);
+  })) || 0, 0);
+}

package/dist/collection/components/form/form-entity-value-pairs/form-entity-value-pairs.js

@@ -196,7 +196,7 @@ export class YooFormEntityValuePairsComponent {
         "mutable": false,
         "complexType": {
           "original": "EntityType",
-          "resolved": "\"aisles\" | \"community\" | \"courses\" | \"dashboards\" | \"language\" | \"operations\" | \"pages\" | \"questions\" | \"scoring\" | \"tableau\" | \"tag\" | \"user\" | \"weekdays\" | \"aclPermission\" | \"aclPermissionList\" | \"aclRole\" | \"aislelist\" | \"algorithm\" | \"apps\" | \"arexperience\" | \"armodel\" | \"audiences\" | \"badges\" | \"blog\" | \"broadcasts\" | \"calendarEvents\" | \"campaignfilters\" | \"creationtypes\" | \"catalogs\" | \"certificates\" | \"channel\" | \"channels\" | \"charttype\" | \"communities\" | \"contacts\" | \"coursecategories\" | \"courses-small\" | \"courseselection\" | \"currencies\" | \"customapps\" | \"customforms\" | \"custommodels\" | \"days\" | \"emails\" | \"entitycomments\" | \"environnement\" | \"feeds\" | \"feedsComments\" | \"files\" | \"filesFolders\" | \"filesPdf\" | \"folders\" | \"formfield\" | \"geofilters\" | \"giphy\" | \"googlemaps\" | \"groups\" | \"hashtags\" | \"hierarchy\" | \"htmltemplates\" | \"icons\" | \"incentives\" | \"journeys\" | \"lessondescriptions\" | \"lessons\" | \"liveshoppings\" | \"locations\" | \"locationsaudience\" | \"locationspublic\" | \"locationtypes\" | \"markas\" | \"mediacapturedevices\" | \"memolist\" | \"memos\" | \"missiondatas\" | \"missiondescriptions\" | \"missiondescriptioncategories\" | \"missiondescriptionreviewhistories\" | \"missiondescriptiontemplates\" | \"missionfield\" | \"missions\" | \"notes\" | \"notifications\" | \"photos\" | \"plans\" | \"productbatch\" | \"productbatchlist\" | \"products\" | \"productweightpair\" | \"publicAPITokens\" | \"questionsAnswers\" | \"regex\" | \"reporttemplates\" | \"reviewapps\" | \"salesdata\" | \"scorms\" | \"scormcloud\" | \"shifts\" | \"slots\" | \"tableauShared\" | \"tagGroups\" | \"tenants\" | \"topusers\" | \"translations\" | \"type\" | \"unsplash\" | \"useraudience\" | \"userranks\" | \"userhighscores\" | \"userlearningmanager\" | \"usercourseinfo\" | \"users\" | \"violetproducts\" | \"violetproductofferskus\" | \"violetbasketitems\" | \"violetshippingmethods\" | \"version\" | \"videocallusers\" | \"visits\" | \"waitlistvisit\" | \"waitlistcustomer\" | \"waitliststats\" | \"plansorlessons\" | \"widgets\"",
+          "resolved": "\"aisles\" | \"community\" | \"courses\" | \"dashboards\" | \"language\" | \"operations\" | \"pages\" | \"questions\" | \"scoring\" | \"tableau\" | \"tag\" | \"user\" | \"weekdays\" | \"aclPermission\" | \"aclPermissionList\" | \"aclRole\" | \"aislelist\" | \"algorithm\" | \"apps\" | \"arexperience\" | \"armodel\" | \"audiences\" | \"badges\" | \"blog\" | \"broadcasts\" | \"calendarEvents\" | \"campaignfilters\" | \"creationtypes\" | \"catalogs\" | \"certificates\" | \"channel\" | \"channels\" | \"charttype\" | \"communities\" | \"contacts\" | \"coursecategories\" | \"courses-small\" | \"courseselection\" | \"currencies\" | \"customapps\" | \"customforms\" | \"custommodels\" | \"days\" | \"emails\" | \"entitycomments\" | \"environnement\" | \"feeds\" | \"feedsComments\" | \"files\" | \"filesFolders\" | \"filesPdf\" | \"folders\" | \"formfield\" | \"geofilters\" | \"giphy\" | \"googlemaps\" | \"groups\" | \"hashtags\" | \"hierarchy\" | \"htmltemplates\" | \"icons\" | \"incentives\" | \"journeys\" | \"lessondescriptions\" | \"lessons\" | \"locations\" | \"locationsaudience\" | \"locationspublic\" | \"locationtypes\" | \"markas\" | \"mediacapturedevices\" | \"memolist\" | \"memos\" | \"missiondatas\" | \"missiondescriptions\" | \"missiondescriptioncategories\" | \"missiondescriptionreviewhistories\" | \"missiondescriptiontemplates\" | \"missionfield\" | \"missions\" | \"notes\" | \"notifications\" | \"photos\" | \"plans\" | \"productbatch\" | \"productbatchlist\" | \"products\" | \"productweightpair\" | \"publicAPITokens\" | \"questionsAnswers\" | \"regex\" | \"reporttemplates\" | \"reviewapps\" | \"salesdata\" | \"scorms\" | \"scormcloud\" | \"shifts\" | \"slots\" | \"tableauShared\" | \"tagGroups\" | \"tenants\" | \"topusers\" | \"translations\" | \"type\" | \"unsplash\" | \"useraudience\" | \"userranks\" | \"userhighscores\" | \"userlearningmanager\" | \"usercourseinfo\" | \"users\" | \"version\" | \"videocallusers\" | \"visits\" | \"waitlistvisit\" | \"waitlistcustomer\" | \"waitliststats\" | \"plansorlessons\" | \"widgets\"",
           "references": {
             "EntityType": {
               "location": "import",

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

@@ -127,7 +127,14 @@ export class YooFormHotzonesComponent {
   async showZoneDetails(hotzone) {
     const { description, image } = hotzone || {};
     if (description || image) {
-      await showModal('yoo-form-hotzones', { detailedView: true, selectedHotzone: hotzone }, 'bg-dark-40', 'scaleEnterAnimation', 'scaleLeaveAnimation', true);
+      await showModal({
+        component: 'yoo-form-hotzones',
+        componentProps: { detailedView: true, selectedHotzone: hotzone },
+        cssClass: 'bg-dark-40',
+        enterAnimation: 'scaleEnterAnimation',
+        leaveAnimation: 'scaleLeaveAnimation',
+        showBackdrop: true
+      });
       hotzone.revealed = true;
     }
     this.validate();

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

@@ -40,7 +40,14 @@ export class YooFormImageCollectionComponent {
   async showZoneDetails(tile) {
     const { description, image } = tile || {};
     if (description || image) {
-      await showModal('yoo-form-image-collection', { detailedView: true, selectedTile: tile }, 'bg-dark-40', 'scaleEnterAnimation', 'scaleLeaveAnimation', true);
+      await showModal({
+        component: 'yoo-form-image-collection',
+        componentProps: { detailedView: true, selectedTile: tile },
+        cssClass: 'bg-dark-40',
+        enterAnimation: 'scaleEnterAnimation',
+        leaveAnimation: 'scaleLeaveAnimation',
+        showBackdrop: true
+      });
       tile.revealed = true;
     }
     this.validate();

package/dist/collection/components/form/form-input-container/form-input-container.js

@@ -397,7 +397,7 @@ export class YooFormInputContainerComponent {
         "mutable": false,
         "complexType": {
           "original": "FormDynamicType",
-          "resolved": "\"feed\" | \"form-creator-announcement\" | \"form-creator-block\" | \"form-creator-preview\" | \"form-creator-preview-kanban\" | \"form-creator-preview-lesson\" | \"form-creator-preview-workflow\" | \"kanban\" | \"lesson\" | \"lesson-detail\" | \"lesson-question-result\" | \"mission\" | \"mission-validation\" | \"poll\" | \"service\" | \"todo\" | \"visit\" | \"waitlist\" | \"workflow\"",
+          "resolved": "\"feed\" | \"form-creator-announcement\" | \"form-creator-block\" | \"form-creator-preview\" | \"form-creator-preview-kanban\" | \"form-creator-preview-lesson\" | \"form-creator-preview-workflow\" | \"kanban\" | \"lesson\" | \"lesson-creator-block\" | \"lesson-detail\" | \"lesson-question-result\" | \"mission\" | \"mission-validation\" | \"poll\" | \"service\" | \"todo\" | \"visit\" | \"waitlist\" | \"workflow\"",
           "references": {
             "FormDynamicType": {
               "location": "import",

package/dist/collection/components/form/form-multi-input/form-multi-input.css

@@ -261,11 +261,6 @@ svg:not(:root) {
 :host .row .column .cell yoo-form-input-container {
   flex: 1;
   min-width: 6rem;
-  overflow: hidden;
-  white-space: nowrap;
-}
-:host .row .column .cell yoo-form-input-container yoo-form-text-editor {
-  white-space: initial;
 }
 :host .row .column .cell .field-translation {
   overflow: hidden;

package/dist/collection/components/form/form-multi-input/form-multi-input.js

@@ -11,7 +11,7 @@
  * https://zpl.io/29KpyAW
  */
 import { FormFieldType } from '@shared/interfaces';
-import { getUUID, isValueATranslationKey, isWeb, MODAL_BASE_ZINDEX, translate } from '@shared/utils';
+import { getUUID, isValueATranslationKey, isWeb, translate } from '@shared/utils';
 import { forceUpdate, h, Host } from '@stencil/core';
 import { isEqual, isString } from 'lodash-es';
 import Sortable from 'sortablejs';
@@ -524,7 +524,6 @@ export class YooFormMultiInputComponent {
         debounce: TagType === 'yoo-form-input' && 500,
         maxHeight: this.host.classList.contains('image-collection') ? 60 : undefined,
         minHeight: this.host.classList.contains('image-collection') ? 60 : undefined,
-        customZIndex: TagType === 'yoo-form-text-editor' && (MODAL_BASE_ZINDEX - cell.rowIndex),
         reloadText: TagType === 'yoo-form-text-editor' && this.deletedRowIndex !== null && cell.rowIndex >= this.deletedRowIndex
       };
       textInput = (h(TagType, { ...props }, (_u = cell.column.inputComponentSlots) === null || _u === void 0 ? void 0 : _u.map(({ tag, props = {}, text }) => {

package/dist/collection/components/form/form-number-picker/form-number-picker.js

@@ -125,7 +125,14 @@ export class YooFormNumberPickerComponent {
           height: 'medium'
         });
       }
-      showModal(this.dialog, modalOptions, null, this.getModalAnimation('Enter'), this.getModalAnimation('Leave'), true, false).then((ret) => {
+      showModal({
+        component: this.dialog,
+        componentProps: modalOptions,
+        enterAnimation: this.getModalAnimation('Enter'),
+        leaveAnimation: this.getModalAnimation('Leave'),
+        showBackdrop: true,
+        displayFullscreenButton: false
+      }).then((ret) => {
         if (ret && !ret.overlayDismiss) {
           this.setValue(ret.data);
         }

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

@@ -240,7 +240,7 @@ export class YooFormPricecheckComponent {
               }
             }
           ];
-          showModal(form).then((ret) => {
+          showModal({ component: form }).then((ret) => {
             if (!ret.data && !retry) {
               setTimeout(() => closeModal(true), 300);
             }
@@ -250,7 +250,7 @@ export class YooFormPricecheckComponent {
       }
     };
     dialog.addEventListener('scannedSuccess', scannedSuccessListener);
-    showModal(dialog).then(() => {
+    showModal({ component: dialog }).then(() => {
       dialog === null || dialog === void 0 ? void 0 : dialog.removeEventListener('scannedSuccess', scannedSuccessListener);
       dialog = null;
     });

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

@@ -110,7 +110,13 @@ export class YooFormScormComponent {
           const dialog = document.createElement('yoo-form-iframe-dialog');
           dialog.source = ret.launchLink;
           dialog.heading = translateMulti((_a = this.baseScorm) === null || _a === void 0 ? void 0 : _a.title);
-          const promise = showModal(dialog, null, 'fullscreen', isWeb(this.host) ? 'fadeEnterAnimation' : 'slideXEnterReverseAnimation', isWeb(this.host) ? 'fadeLeaveAnimation' : 'slideXLeaveReverseAnimation', true);
+          const promise = showModal({
+            component: dialog,
+            cssClass: 'fullscreen',
+            enterAnimation: isWeb(this.host) ? 'fadeEnterAnimation' : 'slideXEnterReverseAnimation',
+            leaveAnimation: isWeb(this.host) ? 'fadeLeaveAnimation' : 'slideXLeaveReverseAnimation',
+            showBackdrop: true
+          });
           promise.then(() => {
             if (!this.isPreview) {
               this.onCloseScormPlayer();

package/dist/collection/components/form/form-signature-pad/form-signature-pad.js

@@ -21,9 +21,13 @@ export class YooFormSignaturePadComponent {
       let dialog = document.createElement('yoo-form-signature-pad-dialog');
       dialog.value = this.value;
       dialog.readonly = this.readonly;
-      showModal(dialog, {
-        height: 'medium'
-      }, null, isWeb(this.host) ? 'fadeEnterAnimation' : 'slideXEnterReverseAnimation', isWeb(this.host) ? 'fadeLeaveAnimation' : 'slideXLeaveReverseAnimation', true).then((ret) => {
+      showModal({
+        component: dialog,
+        componentProps: { height: 'medium' },
+        enterAnimation: isWeb(this.host) ? 'fadeEnterAnimation' : 'slideXEnterReverseAnimation',
+        leaveAnimation: isWeb(this.host) ? 'fadeLeaveAnimation' : 'slideXLeaveReverseAnimation',
+        showBackdrop: true
+      }).then((ret) => {
         if (ret && !this.readonly) {
           // this.value = ret.data;
           setValueAndValidateInput(ret.data, this);

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

@@ -400,7 +400,7 @@ export class YooFormTableComponent {
         "mutable": false,
         "complexType": {
           "original": "EntityType",
-          "resolved": "\"aisles\" | \"community\" | \"courses\" | \"dashboards\" | \"language\" | \"operations\" | \"pages\" | \"questions\" | \"scoring\" | \"tableau\" | \"tag\" | \"user\" | \"weekdays\" | \"aclPermission\" | \"aclPermissionList\" | \"aclRole\" | \"aislelist\" | \"algorithm\" | \"apps\" | \"arexperience\" | \"armodel\" | \"audiences\" | \"badges\" | \"blog\" | \"broadcasts\" | \"calendarEvents\" | \"campaignfilters\" | \"creationtypes\" | \"catalogs\" | \"certificates\" | \"channel\" | \"channels\" | \"charttype\" | \"communities\" | \"contacts\" | \"coursecategories\" | \"courses-small\" | \"courseselection\" | \"currencies\" | \"customapps\" | \"customforms\" | \"custommodels\" | \"days\" | \"emails\" | \"entitycomments\" | \"environnement\" | \"feeds\" | \"feedsComments\" | \"files\" | \"filesFolders\" | \"filesPdf\" | \"folders\" | \"formfield\" | \"geofilters\" | \"giphy\" | \"googlemaps\" | \"groups\" | \"hashtags\" | \"hierarchy\" | \"htmltemplates\" | \"icons\" | \"incentives\" | \"journeys\" | \"lessondescriptions\" | \"lessons\" | \"liveshoppings\" | \"locations\" | \"locationsaudience\" | \"locationspublic\" | \"locationtypes\" | \"markas\" | \"mediacapturedevices\" | \"memolist\" | \"memos\" | \"missiondatas\" | \"missiondescriptions\" | \"missiondescriptioncategories\" | \"missiondescriptionreviewhistories\" | \"missiondescriptiontemplates\" | \"missionfield\" | \"missions\" | \"notes\" | \"notifications\" | \"photos\" | \"plans\" | \"productbatch\" | \"productbatchlist\" | \"products\" | \"productweightpair\" | \"publicAPITokens\" | \"questionsAnswers\" | \"regex\" | \"reporttemplates\" | \"reviewapps\" | \"salesdata\" | \"scorms\" | \"scormcloud\" | \"shifts\" | \"slots\" | \"tableauShared\" | \"tagGroups\" | \"tenants\" | \"topusers\" | \"translations\" | \"type\" | \"unsplash\" | \"useraudience\" | \"userranks\" | \"userhighscores\" | \"userlearningmanager\" | \"usercourseinfo\" | \"users\" | \"violetproducts\" | \"violetproductofferskus\" | \"violetbasketitems\" | \"violetshippingmethods\" | \"version\" | \"videocallusers\" | \"visits\" | \"waitlistvisit\" | \"waitlistcustomer\" | \"waitliststats\" | \"plansorlessons\" | \"widgets\"",
+          "resolved": "\"aisles\" | \"community\" | \"courses\" | \"dashboards\" | \"language\" | \"operations\" | \"pages\" | \"questions\" | \"scoring\" | \"tableau\" | \"tag\" | \"user\" | \"weekdays\" | \"aclPermission\" | \"aclPermissionList\" | \"aclRole\" | \"aislelist\" | \"algorithm\" | \"apps\" | \"arexperience\" | \"armodel\" | \"audiences\" | \"badges\" | \"blog\" | \"broadcasts\" | \"calendarEvents\" | \"campaignfilters\" | \"creationtypes\" | \"catalogs\" | \"certificates\" | \"channel\" | \"channels\" | \"charttype\" | \"communities\" | \"contacts\" | \"coursecategories\" | \"courses-small\" | \"courseselection\" | \"currencies\" | \"customapps\" | \"customforms\" | \"custommodels\" | \"days\" | \"emails\" | \"entitycomments\" | \"environnement\" | \"feeds\" | \"feedsComments\" | \"files\" | \"filesFolders\" | \"filesPdf\" | \"folders\" | \"formfield\" | \"geofilters\" | \"giphy\" | \"googlemaps\" | \"groups\" | \"hashtags\" | \"hierarchy\" | \"htmltemplates\" | \"icons\" | \"incentives\" | \"journeys\" | \"lessondescriptions\" | \"lessons\" | \"locations\" | \"locationsaudience\" | \"locationspublic\" | \"locationtypes\" | \"markas\" | \"mediacapturedevices\" | \"memolist\" | \"memos\" | \"missiondatas\" | \"missiondescriptions\" | \"missiondescriptioncategories\" | \"missiondescriptionreviewhistories\" | \"missiondescriptiontemplates\" | \"missionfield\" | \"missions\" | \"notes\" | \"notifications\" | \"photos\" | \"plans\" | \"productbatch\" | \"productbatchlist\" | \"products\" | \"productweightpair\" | \"publicAPITokens\" | \"questionsAnswers\" | \"regex\" | \"reporttemplates\" | \"reviewapps\" | \"salesdata\" | \"scorms\" | \"scormcloud\" | \"shifts\" | \"slots\" | \"tableauShared\" | \"tagGroups\" | \"tenants\" | \"topusers\" | \"translations\" | \"type\" | \"unsplash\" | \"useraudience\" | \"userranks\" | \"userhighscores\" | \"userlearningmanager\" | \"usercourseinfo\" | \"users\" | \"version\" | \"videocallusers\" | \"visits\" | \"waitlistvisit\" | \"waitlistcustomer\" | \"waitliststats\" | \"plansorlessons\" | \"widgets\"",
           "references": {
             "EntityType": {
               "location": "import",