@yoobic/yobi 8.6.0-5 → 8.6.0-7

package/dist/collection/components/3.organisms/device/device.js

@@ -24,6 +24,11 @@ export class YooDeviceComponent {
       this.resizeListener = debounce(this.resize, 500).bind(this);
       window.addEventListener('resize', this.resizeListener);
       this.resize();
+      const parent = findParent(this.host, this.scaledContainerSelector);
+      if (parent) {
+        this.resizeObserver = new ResizeObserver(this.resizeListener);
+        this.resizeObserver.observe(parent);
+      }
     }
     this.deviceCreated.emit(this.host);
   }
@@ -33,8 +38,10 @@ export class YooDeviceComponent {
     }
   }
   disconnectedCallback() {
+    var _a;
     window.removeEventListener('resize', this.resizeListener);
     document.body.dispatchEvent(new CustomEvent('deviceDestroyed', { detail: this.host }));
+    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
   }
   resize() {
     const parent = findParent(this.host, this.scaledContainerSelector);

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-dynamic/form-dynamic.css

@@ -1513,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 = [];
@@ -709,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');
@@ -884,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';
@@ -2044,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
@@ -2167,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 [
@@ -2805,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(() => {
@@ -3166,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' : '',
@@ -4306,7 +4307,7 @@ export class YooFormDynamicComponent {
         TagType = 'yoo-form-missing-word';
         extraAttrs = {
           ...extraAttrs,
-          sentence: field.sentence
+          sentence: sanitizeInputValue(field.sentence)
         };
         break;
       case FormFieldType.imagetagging:
@@ -5075,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-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-signature-pad-dialog/form-signature-pad-dialog.js

@@ -50,7 +50,7 @@ export class YooFormSignaturePadDialogComponent {
       data = this.isDirty ? null : this.value;
     }
     else if (this.signaturePad) {
-      data = this.signaturePad.toDataURL();
+      data = this.signaturePad.toDataURL('image/png');
     }
     closeModal(data);
   }

package/dist/collection/components/form/form-text-area/form-text-area.js

@@ -207,10 +207,14 @@ export class YooFormTextAreaComponent {
     }
   }
   onInputChanged() {
-    var _a, _b;
-    const value = this.inputEl && this.inputEl.value ? this.inputEl.value : null;
-    this.emitValueAndSetValidity(value, this, null, this.validateInput, false, ((_a = this.translationKey) === null || _a === void 0 ? void 0 : _a.length) > 0);
-    if (((_b = this.translationKey) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+    var _a, _b, _c;
+    let value = ((_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.value) || null;
+    if (this.sanitizeValue) {
+      value = this.sanitizeInputValue(value);
+      this.inputEl.value = value;
+    }
+    this.emitValueAndSetValidity(value, this, null, this.validateInput, false, ((_b = this.translationKey) === null || _b === void 0 ? void 0 : _b.length) > 0);
+    if (((_c = this.translationKey) === null || _c === void 0 ? void 0 : _c.length) > 0) {
       this.translationValueUpdated.emit({ key: this.translationKey, value });
     }
     this.updateSegmentsCountDebounce();
@@ -419,7 +423,7 @@ export class YooFormTextAreaComponent {
           }
           ev.preventDefault();
         }, contenteditable: "true", placeholder: translate(this.placeholder), readonly: this.readonly, rows: this.rows, onBlur: (ev) => onInputBlurred(ev, this, 'textarea'), onInput: () => this.onInputChanged(), onFocus: () => this.onInputFocused('textarea'), onKeyPress: (ev) => this.onKeyPress(ev), onKeyDown: (ev) => this.onKeyDown(ev), onTouchStart: (ev) => ev.stopPropagation(), tabindex: this.inputTabIndex }),
-      this.clearable && (h("div", { class: { 'icon-suffix-focus last icon-close': true }, style: { display: hasValue ? undefined : 'none' }, onClick: () => (hasValue ? this.clearInput() : null) }, h("yoo-icon", { size: this.getIconSize(), name: "cross" })))
+      this.clearable && (h("div", { class: "icon-suffix-focus last icon-close", style: { display: hasValue ? undefined : 'none' }, onClick: () => (hasValue ? this.clearInput() : null) }, h("yoo-icon", { size: this.getIconSize(), name: "cross" })))
     ];
   }
   renderEditable() {

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

@@ -310,6 +310,7 @@ svg:not(:root) {
   min-width: 25rem;
   max-width: 58.75rem;
   height: 100%;
+  max-height: calc(100% - var(--spacing-32, 2rem));
   margin: auto;
   padding: var(--spacing-16, 1rem);
   /* Track */
@@ -434,4 +435,11 @@ svg:not(:root) {
 }
 :host yoo-accordion {
   --title-icon-color: var(--stable-alt, #d0d0d0);
+}
+
+:host([show-pages-section]) .form-content-blocks-container yoo-ion-scroll {
+  max-height: calc(100% - 5.75rem);
+}
+:host([show-pages-section]) .form-content-blocks-container yoo-ion-scroll.pages-accordion-open {
+  max-height: calc(100% - 10.75rem);
 }

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

@@ -21,7 +21,6 @@ export class YooFormCreatorComponent {
     this.hasLeftMenuOptionChanged = false;
     this.fieldsWithScoring = [];
     this.selectedScoringIndex = 0;
-    this.isPagesAccordionOpen = true;
     this.hasAdditionBeenClicked = false;
     this.infiniteScrolls = [];
     // This is needed to store any new conditions that are yet to be attached to a field so that they do not dissapear on rerender
@@ -194,6 +193,7 @@ export class YooFormCreatorComponent {
     this.newCustomFormFieldSelectionMode = undefined;
     this.expandedFieldName = undefined;
     this.shouldRenderLeftSelectionContent = true;
+    this.isPagesAccordionOpen = true;
   }
   get isTranslatorForm() {
     var _a;
@@ -711,6 +711,73 @@ export class YooFormCreatorComponent {
       this.haveTranslationsUpdated = false;
     }
   }
+  async showTranslationDialog(event, selectedFieldLocation = null) {
+    var _a;
+    let refreshForms = false;
+    if (event) {
+      selectedFieldLocation = selectedFieldLocation === null ? findField(this.currentSlides, event.detail.name) : selectedFieldLocation;
+    }
+    else if (!selectedFieldLocation) {
+      selectedFieldLocation = { slideIndex: 0, itemIndex: 0 };
+    }
+    this.formCreatorTranslateDialog = document.createElement('yoo-form-creator-translate-dialog');
+    this.formCreatorTranslateDialog.baseLanguage = this.baseLanguage;
+    this.formCreatorTranslateDialog.translatedLanguages = (_a = this.missionDescription) === null || _a === void 0 ? void 0 : _a.languages;
+    this.formCreatorTranslateDialog.allLanguages = this.allLanguages;
+    if (this.translations && this.translations.length > 0) {
+      refreshForms = true;
+      this.formCreatorTranslateDialog.isTranslator = this.isTranslator;
+      this.formCreatorTranslateDialog.disableNewLanguageButton = this.isLesson && !this.plan ? 'ADDNEWLANGAUGEINCOURSE' : null;
+      this.formCreatorTranslateDialog.translations = this.translations;
+      this.formCreatorTranslateDialog.slides = formatSlides(this.currentSlides, true);
+      this.formCreatorTranslateDialog.initialSelectedFieldLocation = selectedFieldLocation;
+      this.formCreatorTranslateDialog.addEventListener('translationUpdated', (ev) => {
+        ev.stopPropagation();
+        this.translationUpdated.emit(ev.detail);
+      });
+      this.formCreatorTranslateDialog.addEventListener('languageChanged', (ev) => {
+        ev.stopPropagation();
+        this.translateDialogLanguageChanged.emit(ev.detail);
+      });
+      this.formCreatorTranslateDialog.addEventListener('translateValue', (ev) => {
+        this.translateValue.emit(ev.detail);
+      });
+    }
+    else {
+      this.formCreatorTranslateDialog.mode = 'createInitial';
+      this.formCreatorTranslateDialog.addEventListener('selectedLanguagesChanged', (ev) => {
+        this.selectedLanguagesChanged.emit(ev.detail);
+      });
+      this.formCreatorTranslateDialog.addEventListener('baseLanguageChanged', (ev) => {
+        this.baseLanguageChanged.emit(ev.detail);
+      });
+    }
+    showModal({
+      component: this.formCreatorTranslateDialog,
+      cssClass: 'visible-overflow responsive',
+      enterAnimation: 'fadeEnterAnimation',
+      leaveAnimation: 'fadeLeaveAnimation',
+      showBackdrop: true
+    }).then((ret) => {
+      var _a, _b, _c, _d;
+      this.translateDialogClosed.emit({ refreshForms });
+      if ((_a = ret === null || ret === void 0 ? void 0 : ret.data) === null || _a === void 0 ? void 0 : _a.createNewTranslations) {
+        this.translateNewLanguages([], false, selectedFieldLocation);
+      }
+      else if ((_b = ret === null || ret === void 0 ? void 0 : ret.data) === null || _b === void 0 ? void 0 : _b.addNewLanguage) {
+        this.showChangeLanguageTranslationDialog(event, selectedFieldLocation);
+      }
+      else {
+        this.reloadLivePreview.emit();
+        if (this.livePreviewElement) {
+          this.livePreviewElement.missionDescriptionTitle = translateMulti((_c = this.missionDescription) === null || _c === void 0 ? void 0 : _c.title);
+        }
+        if (this.formCreatorHeader) {
+          this.formCreatorHeader.formTitle = translateMulti((_d = this.missionDescription) === null || _d === void 0 ? void 0 : _d.title);
+        }
+      }
+    });
+  }
   async addPageCondition(condition, slideIndex) {
     if (this.currentSlides[slideIndex].condition) {
       const currentCondition = [...this.currentSlides[slideIndex].condition, condition];
@@ -886,14 +953,6 @@ export class YooFormCreatorComponent {
       this.currentSlides = setParentConditions(this.currentSlides);
       this.updateGlobalActions();
       this.hasLoaded.emit();
-      // Sometimes the container is scrolled down and because of overflow:hidden can't be scrolled back to top.
-      // Following interval watch the container scrollTop and scroll back to top if needed.
-      this.containerElWatch = setInterval(() => {
-        var _a;
-        if (((_a = this.containerEl) === null || _a === void 0 ? void 0 : _a.scrollTop) > 0) {
-          this.containerEl.scrollTop = 0;
-        }
-      }, 1000);
     }
     this.hasLoaded.emit();
   }
@@ -1041,73 +1100,6 @@ export class YooFormCreatorComponent {
       });
     }
   }
-  showTranslationDialog(event, selectedFieldLocation = null) {
-    var _a;
-    let refreshForms = false;
-    if (event) {
-      selectedFieldLocation = selectedFieldLocation === null ? findField(this.currentSlides, event.detail.name) : selectedFieldLocation;
-    }
-    else if (!selectedFieldLocation) {
-      selectedFieldLocation = { slideIndex: 0, itemIndex: 0 };
-    }
-    this.formCreatorTranslateDialog = document.createElement('yoo-form-creator-translate-dialog');
-    this.formCreatorTranslateDialog.baseLanguage = this.baseLanguage;
-    this.formCreatorTranslateDialog.translatedLanguages = (_a = this.missionDescription) === null || _a === void 0 ? void 0 : _a.languages;
-    this.formCreatorTranslateDialog.allLanguages = this.allLanguages;
-    if (this.translations && this.translations.length > 0) {
-      refreshForms = true;
-      this.formCreatorTranslateDialog.isTranslator = this.isTranslator;
-      this.formCreatorTranslateDialog.disableNewLanguageButton = this.isLesson && !this.plan ? 'ADDNEWLANGAUGEINCOURSE' : null;
-      this.formCreatorTranslateDialog.translations = this.translations;
-      this.formCreatorTranslateDialog.slides = formatSlides(this.currentSlides, true);
-      this.formCreatorTranslateDialog.initialSelectedFieldLocation = selectedFieldLocation;
-      this.formCreatorTranslateDialog.addEventListener('translationUpdated', (ev) => {
-        ev.stopPropagation();
-        this.translationUpdated.emit(ev.detail);
-      });
-      this.formCreatorTranslateDialog.addEventListener('languageChanged', (ev) => {
-        ev.stopPropagation();
-        this.translateDialogLanguageChanged.emit(ev.detail);
-      });
-      this.formCreatorTranslateDialog.addEventListener('translateValue', (ev) => {
-        this.translateValue.emit(ev.detail);
-      });
-    }
-    else {
-      this.formCreatorTranslateDialog.mode = 'createInitial';
-      this.formCreatorTranslateDialog.addEventListener('selectedLanguagesChanged', (ev) => {
-        this.selectedLanguagesChanged.emit(ev.detail);
-      });
-      this.formCreatorTranslateDialog.addEventListener('baseLanguageChanged', (ev) => {
-        this.baseLanguageChanged.emit(ev.detail);
-      });
-    }
-    showModal({
-      component: this.formCreatorTranslateDialog,
-      cssClass: 'visible-overflow responsive',
-      enterAnimation: 'fadeEnterAnimation',
-      leaveAnimation: 'fadeLeaveAnimation',
-      showBackdrop: true
-    }).then((ret) => {
-      var _a, _b, _c, _d;
-      this.translateDialogClosed.emit({ refreshForms });
-      if ((_a = ret === null || ret === void 0 ? void 0 : ret.data) === null || _a === void 0 ? void 0 : _a.createNewTranslations) {
-        this.translateNewLanguages([], false, selectedFieldLocation);
-      }
-      else if ((_b = ret === null || ret === void 0 ? void 0 : ret.data) === null || _b === void 0 ? void 0 : _b.addNewLanguage) {
-        this.showChangeLanguageTranslationDialog(event, selectedFieldLocation);
-      }
-      else {
-        this.reloadLivePreview.emit();
-        if (this.livePreviewElement) {
-          this.livePreviewElement.missionDescriptionTitle = translateMulti((_c = this.missionDescription) === null || _c === void 0 ? void 0 : _c.title);
-        }
-        if (this.formCreatorHeader) {
-          this.formCreatorHeader.formTitle = translateMulti((_d = this.missionDescription) === null || _d === void 0 ? void 0 : _d.title);
-        }
-      }
-    });
-  }
   showChangeLanguageTranslationDialog(event, selectedFieldLocation) {
     var _a;
     const formCreatorTranslateDialogLanguageSelector = document.createElement('yoo-form-creator-translate-dialog');
@@ -1613,11 +1605,10 @@ export class YooFormCreatorComponent {
     }
   }
   onMainContentScrolled(event) {
-    if (event) {
-      this.scrollContent.emit(event.detail);
-      if (this.pagesAccordion && (event.detail.scrollTop > 200 ? this.isPagesAccordionOpen : !this.isPagesAccordionOpen) && !this.isPageReordering && this.hasPageChanged === -1) {
-        this.pagesAccordion.clickAccordion(0);
-      }
+    var _a, _b;
+    const scrollableHeight = ((_a = this.mainContentScrollElement) === null || _a === void 0 ? void 0 : _a.scrollHeight) - ((_b = this.mainContentScrollElement) === null || _b === void 0 ? void 0 : _b.clientHeight);
+    if (event && this.pagesAccordion && ((event.detail.scrollTop && event.detail.scrollTop === scrollableHeight) ? this.isPagesAccordionOpen : !this.isPagesAccordionOpen) && !this.isPageReordering && this.hasPageChanged === -1) {
+      this.pagesAccordion.clickAccordion(0);
     }
   }
   onPagesAccordionSelected(event) {
@@ -2330,7 +2321,7 @@ export class YooFormCreatorComponent {
           selected: true,
           actionButtons: isScoring(this.selectedLeftMenuOption) ? [] : [...actionButtons]
         }
-      ], iconPairLeft: ARROW_PAIR, showBottomBorder: true, allowMultipleSelection: true }, this.currentSlides.map((slide, index) => (h("div", { slot: index === this.selectedPageIndex ? 'CONTENT' : 'HIDDEN-CONTENT' }, h("yoo-ion-scroll", { ref: (el) => {
+      ], iconPairLeft: ARROW_PAIR, showBottomBorder: true, allowMultipleSelection: true }, this.currentSlides.map((slide, index) => (h("div", { slot: index === this.selectedPageIndex ? 'CONTENT' : 'HIDDEN-CONTENT' }, h("yoo-ion-scroll", { class: { 'pages-accordion-open': this.isPagesAccordionOpen }, ref: (el) => {
         if (index === this.selectedPageIndex) {
           this.mainContentScrollElement = el;
         }
@@ -2408,7 +2399,7 @@ export class YooFormCreatorComponent {
     return (h("div", { class: "form-dynamic-container" }, h("yoo-header", null, h("yoo-navbar", null, h("yoo-truncate", null, translateMulti((_a = this.missionDescription) === null || _a === void 0 ? void 0 : _a.title))))));
   }
   render() {
-    return (h(Host, { class: getAppContext(this.host) }, h("div", { class: "container", ref: (el) => (this.containerEl = el) }, this.renderHeader(), this.renderContent(), this.renderOverlays())));
+    return (h(Host, { class: getAppContext(this.host) }, h("div", { class: "container" }, this.renderHeader(), this.renderContent(), this.renderOverlays())));
   }
   static get is() { return "yoo-form-creator"; }
   static get encapsulation() { return "shadow"; }
@@ -2634,7 +2625,7 @@ export class YooFormCreatorComponent {
           "text": "Desines whether to show pages section."
         },
         "attribute": "show-pages-section",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "true"
       },
       "baseLanguage": {
@@ -2878,7 +2869,8 @@ export class YooFormCreatorComponent {
       "forceFieldRerender": {},
       "newCustomFormFieldSelectionMode": {},
       "expandedFieldName": {},
-      "shouldRenderLeftSelectionContent": {}
+      "shouldRenderLeftSelectionContent": {},
+      "isPagesAccordionOpen": {}
     };
   }
   static get events() {
@@ -3497,26 +3489,6 @@ export class YooFormCreatorComponent {
           "resolved": "void",
           "references": {}
         }
-      }, {
-        "method": "scrollContent",
-        "name": "scrollContent",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emits an event when the form-creator content is triggered"
-        },
-        "complexType": {
-          "original": "IScrollDetail",
-          "resolved": "IScrollDetail",
-          "references": {
-            "IScrollDetail": {
-              "location": "import",
-              "path": "@shared/interfaces"
-            }
-          }
-        }
       }, {
         "method": "createNewRestrictionClicked",
         "name": "createNewRestrictionClicked",
@@ -3942,6 +3914,38 @@ export class YooFormCreatorComponent {
           "tags": []
         }
       },
+      "showTranslationDialog": {
+        "complexType": {
+          "signature": "(event?: CustomEvent<{ name: string; }>, selectedFieldLocation?: { slideIndex: number; itemIndex: number; }) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "CustomEvent": {
+              "location": "global"
+            },
+            "HTMLYooFormCreatorTranslateDialogElement": {
+              "location": "global"
+            },
+            "ITranslation": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
       "addPageCondition": {
         "complexType": {
           "signature": "(condition: ICondition, slideIndex: number) => Promise<void>",

package/dist/collection/components/form-creator/form-creator-live-preview/form-creator-live-preview.js

@@ -23,7 +23,8 @@ export class YooFormCreatorLivePreviewComponent {
     forceUpdate(this);
   }
   componentWillLoad() {
-    this.onDeviceClick('iphone-x', false);
+    var _a;
+    this.onDeviceClick(((_a = this.selectedDevice) === null || _a === void 0 ? void 0 : _a.device) || 'iphone-x', false);
   }
   componentDidUpdate() {
     this.deviceChanged.emit({ loaded: true });
@@ -335,14 +336,29 @@ export class YooFormCreatorLivePreviewComponent {
         },
         "attribute": "hide-heading",
         "reflect": false
+      },
+      "selectedDevice": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IDeviceEntry",
+          "resolved": "IDeviceEntry",
+          "references": {
+            "IDeviceEntry": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
       }
     };
   }
-  static get states() {
-    return {
-      "selectedDevice": {}
-    };
-  }
   static get events() {
     return [{
         "method": "shared",