@yoobic/yobi 8.6.0-4 → 8.6.0-6

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

@@ -100,9 +100,15 @@ export class YooFormTaskComponent {
         }
       }
     ] : null;
-    showModal(form, {
-      height: 'medium'
-    }, null, getModalAnimation('Enter', 'X', { host: this.host, reversedSlide: true }), getModalAnimation('Leave', 'X', { host: this.host, reversedSlide: true }), true).then((ret) => {
+    showModal({
+      component: form,
+      componentProps: {
+        height: 'medium'
+      },
+      enterAnimation: getModalAnimation('Enter', 'X', { host: this.host, reversedSlide: true }),
+      leaveAnimation: getModalAnimation('Leave', 'X', { host: this.host, reversedSlide: true }),
+      showBackdrop: true
+    }).then((ret) => {
       if (ret === null || ret === void 0 ? void 0 : ret.data) {
         this.value = this.value || [];
         if (index < 0) {

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/form-text-editor/form-text-editor.js

@@ -46,7 +46,7 @@ import 'froala-editor/js/languages/tr';
 import 'froala-editor/js/languages/uk';
 import 'froala-editor/js/languages/zh_cn';
 import 'froala-editor/js/languages/zh_tw';
-import { asyncWaterfall, closeModal, debounce as _debounce, getAsyncExtraData, getColorSwatches, getCurrentLanguage, getCustomApp, getSession, getUUID, getVideoPoster, images, isCloudinaryLink, isImageUrl, isVideo, isWeb, MODAL_BASE_ZINDEX, replaceAtTagToMentionTag, showContextMenu, showModal, translate, translateMulti, updateLinkPreviews, videos } from '@shared/utils';
+import { asyncWaterfall, closeModal, debounce as _debounce, getAsyncExtraData, getColorSwatches, getCurrentLanguage, getCustomApp, getSession, getUUID, getVideoPoster, images, isCloudinaryLink, isImageUrl, isVideo, isWeb, replaceAtTagToMentionTag, showContextMenu, showModal, translate, translateMulti, updateLinkPreviews, videos } from '@shared/utils';
 import { h, Host } from '@stencil/core';
 import FroalaEditor from 'froala-editor';
 import { assign, compact, isArray, isString } from 'lodash-es';
@@ -81,7 +81,6 @@ export class YooFormTextEditorComponent {
     this.resetHtml = false;
     this.isFullscreen = undefined;
     this.reloadText = false;
-    this.customZIndex = MODAL_BASE_ZINDEX;
     this.translations = undefined;
     this.readonly = undefined;
     this.value = undefined;
@@ -258,7 +257,6 @@ export class YooFormTextEditorComponent {
       fileAllowedTypes: ['*'],
       linkInsertButtons: ['linkBack'],
       pastePlain: false,
-      zIndex: this.customZIndex,
       quickInsertEnabled: isWeb(this.host),
       quickInsertButtons: compact(['yooUploadButtonQuick', 'yooDocumentImporterButtonQuick', 'yooNoTranslateButtonQuick', 'image', 'video', 'table', 'ul', 'ol', 'hr', 'emoticons', 'yooTemplateQuick']),
       quickInsertTags: ['', 'p', 'div', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'pre', 'blockquote', 'br'],
@@ -545,7 +543,12 @@ export class YooFormTextEditorComponent {
         textEditor.formatAmpersandSymbol = this.formatAmpersandSymbol;
         textEditor.allowLinkPreview = this.allowLinkPreview;
         textEditor.isFullscreen = true;
-        showModal(textEditor, null, 'fullscreen no-fade-in', isWeb(this.host) ? 'fadeEnterAnimation' : 'slideXEnterReverseAnimation', isWeb(this.host) ? 'fadeLeaveAnimation' : 'slideXLeaveReverseAnimation').then((ret) => {
+        showModal({
+          component: textEditor,
+          cssClass: 'fullscreen no-fade-in',
+          enterAnimation: isWeb(this.host) ? 'fadeEnterAnimation' : 'slideXEnterReverseAnimation',
+          leaveAnimation: isWeb(this.host) ? 'fadeLeaveAnimation' : 'slideXLeaveReverseAnimation'
+        }).then((ret) => {
           if (ret && ret.data) {
             this.value = ret.data;
             this.forceResetHTML = true;
@@ -1062,24 +1065,6 @@ export class YooFormTextEditorComponent {
         "reflect": false,
         "defaultValue": "false"
       },
-      "customZIndex": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "custom-z-index",
-        "reflect": false,
-        "defaultValue": "MODAL_BASE_ZINDEX"
-      },
       "translations": {
         "type": "unknown",
         "mutable": false,

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

@@ -84,7 +84,7 @@ export class YooFormTimeslotsComponent {
         this.calendarModalElmt.closingDays = closingDays(this.waitlistOptions.openingHours);
         this.calendarModalElmt.addEventListener('dateChanged', dateChangedListener);
         this.calendarModalElmt.addEventListener('dayClicked', dayClickedListener);
-        showModal(this.calendarModalElmt, { width: '448', height: 'small' }, 'calendar').then(() => {
+        showModal({ component: this.calendarModalElmt, componentProps: { width: '448', height: 'small' }, cssClass: 'calendar' }).then(() => {
           this.calendarModalElmt.removeEventListener('dayClicked', dateChangedListener);
           this.calendarModalElmt.removeEventListener('dayClicked', dayClickedListener);
           this.calendarModalElmt = null;

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

@@ -77,7 +77,13 @@ export class YooFormTodoComponent {
       dialog.fieldFetchDataFn = (ev) => {
         this.fieldFetchData.emit(ev);
       };
-      showModal(dialog, { height: 'medium' }, '', getModalAnimation('Enter', 'Y', { host: this.host }), getModalAnimation('Leave', 'Y', { host: this.host }), true).then((ret) => {
+      showModal({
+        component: dialog,
+        componentProps: { height: 'medium' },
+        enterAnimation: getModalAnimation('Enter', 'Y', { host: this.host }),
+        leaveAnimation: getModalAnimation('Leave', 'Y', { host: this.host }),
+        showBackdrop: true
+      }).then((ret) => {
         if (ret === null || ret === void 0 ? void 0 : ret.data) {
           setValueAndValidateInput(ret.data, this);
         }

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

@@ -86,7 +86,7 @@ export class YooFormTodoDialogComponent {
     form.data = task;
     form.suffix = '.value';
     form.title = translate('YOOBICEDIT');
-    showModal(form).then((ret) => {
+    showModal({ component: form }).then((ret) => {
       if (ret && ret.data) {
         task = ret.data;
         forceUpdate(this);

package/dist/collection/components/form/form-todo-mission/form-todo-mission.css

@@ -279,6 +279,11 @@ svg:not(:root) {
   font-weight: var(--font-weight-700, 700);
   font-size: var(--font-size-16, 1rem);
 }
+:host .outer-container .container #task-container .task header task-details .task-description {
+  margin: var(--spacing-04, 0.25rem) 0 var(--spacing-08, 0.5rem) var(--spacing-08, 0.5rem);
+  color: var(--text-color, #807f83);
+  font-size: var(--font-size-14, 0.875rem);
+}
 :host .outer-container .container #task-container .task header task-details .user {
   display: flex;
   align-items: center;
@@ -286,7 +291,7 @@ svg:not(:root) {
   padding: var(--spacing-08, 0.5rem) 0 0 var(--spacing-08, 0.5rem);
 }
 :host .outer-container .container #task-container .task header task-details .user yoo-avatar {
-  padding-right: var(--spacing-04, 0.25rem);
+  padding: 0 var(--spacing-04, 0.25rem) 0 0;
 }
 :host .outer-container .container #task-container .task header task-details .user p {
   margin: 0;
@@ -414,5 +419,11 @@ svg:not(:root) {
 }
 
 :host(.rtl) .outer-container .container #task-container .task header task-details .task-title {
-  padding: 0 var(--spacing-08, 0.5rem) 0 0;
+  padding: 0 var(--spacing-08, 0.5rem) 0 var(--spacing-16, 1rem);
+}
+:host(.rtl) .outer-container .container #task-container .task header task-details .task-description {
+  margin: var(--spacing-04, 0.25rem) var(--spacing-08, 0.5rem) var(--spacing-08, 0.5rem) 0;
+}
+:host(.rtl) .outer-container .container #task-container .task header task-details .user yoo-avatar {
+  padding: 0 0 0 var(--spacing-04, 0.25rem);
 }

package/dist/collection/components/form/form-todo-mission/form-todo-mission.js

@@ -223,10 +223,11 @@ export class YooFormTodoMissionComponent {
           this.emitUpdate({ task: updatedTask, index });
         } })));
   }
-  renderDuedateTag(date) {
-    var _a;
+  renderDuedateTag(task) {
+    var _a, _b;
     // when a parent is already displaying the due date of the Todo mission into the DOM, and that all tasks have the same due date, do not display it for each of them
-    const hideDueDate = this.completed && this.overallDuedate && ((_a = this.values) === null || _a === void 0 ? void 0 : _a.every((todo) => { var _a; return isDateSame((_a = todo.duedate) === null || _a === void 0 ? void 0 : _a.value, this.overallDuedate, 'minute'); }));
+    const date = (_a = task.duedate) === null || _a === void 0 ? void 0 : _a.value;
+    const hideDueDate = this.completed && this.overallDuedate && ((_b = this.values) === null || _b === void 0 ? void 0 : _b.every((todo) => { var _a; return isDateSame((_a = todo.duedate) === null || _a === void 0 ? void 0 : _a.value, this.overallDuedate, 'minute'); }));
     if (date && !hideDueDate) {
       let dueDateText = isToday(date) ? translate('YOOBICTODAY').toLowerCase() : fromToday(date);
       dueDateText = [translate('YOOBICYESTERDAY'), translate('YOOBICTOMORROW')].includes(dueDateText) ? dueDateText.toLowerCase() : dueDateText;
@@ -284,10 +285,10 @@ export class YooFormTodoMissionComponent {
   render() {
     var _a;
     return !!((_a = this.values) === null || _a === void 0 ? void 0 : _a.length) && (h(Host, { class: getAppContext(this.host) }, h("div", { class: "outer-container" }, h("div", { class: "title" }, h("yoo-icon", { size: "medium", name: "mission", slot: "start" }), translate('YOOBICTASKS'), " (", this.values.length, ")"), this.values.map((task, index) => {
-      var _a, _b, _c, _d, _e, _f;
-      const dueDate = (_a = task.duedate) === null || _a === void 0 ? void 0 : _a.value;
+      var _a, _b, _c, _d, _e, _f, _g;
       const status = this.updateTaskStatus(task, index);
-      return (h("main", { class: "container", ...{ status } }, h("section", { id: "task-container" }, this.renderLinkedField(task), task.field && h("p", { class: "linked-task" }, translate('YOOBICLINKEDTASK')), h("div", { class: "task" }, h("header", null, this.renderIcon(task, index), h("task-details", null, h("p", { class: "task-title" }, translateMulti((_b = task.text) === null || _b === void 0 ? void 0 : _b.value)), this.renderUser(task), this.renderDuedateTag(dueDate), status === 'unable-to-complete' && (h("yoo-tag", { color: "danger", size: "small" }, translate('YOOBICMARKEDASUNABLETOCOMPLETE')))), !this.completed && this.renderPlusButton(task, index)), this.readonly && (task.userComments || (((_c = task.hasphoto) === null || _c === void 0 ? void 0 : _c.value) && task.imageData)) && h("line", null), (((_d = task.isphotorequired) === null || _d === void 0 ? void 0 : _d.value) || ((_e = task.showPhotos) === null || _e === void 0 ? void 0 : _e.value) || ((_f = task.showComments) === null || _f === void 0 ? void 0 : _f.value)) && (h("additionnal-fields", null, this.renderCommentsField(task, index, task.userComments), this.renderPhotoField(task, index))))), status === 'unmarked' && !this.completed && this.renderAssignButton(task, index)));
+      return (h("main", { class: "container", ...{ status } }, h("section", { id: "task-container" }, this.renderLinkedField(task), task.field && h("p", { class: "linked-task" }, translate('YOOBICLINKEDTASK')), h("div", { class: "task" }, h("header", null, this.renderIcon(task, index), h("task-details", null, h("p", { class: "task-title" }, translateMulti((_a = task.text) === null || _a === void 0 ? void 0 : _a.value)), ((_b = task.comments) === null || _b === void 0 ? void 0 : _b.value) &&
+        h("p", { class: "task-description" }, (_c = task.comments) === null || _c === void 0 ? void 0 : _c.value), this.renderUser(task), this.renderDuedateTag(task), status === 'unable-to-complete' && (h("yoo-tag", { color: "danger", size: "small" }, translate('YOOBICMARKEDASUNABLETOCOMPLETE')))), !this.completed && this.renderPlusButton(task, index)), this.readonly && (task.userComments || (((_d = task.hasphoto) === null || _d === void 0 ? void 0 : _d.value) && task.imageData)) && h("line", null), (((_e = task.isphotorequired) === null || _e === void 0 ? void 0 : _e.value) || ((_f = task.showPhotos) === null || _f === void 0 ? void 0 : _f.value) || ((_g = task.showComments) === null || _g === void 0 ? void 0 : _g.value)) && (h("additionnal-fields", null, this.renderCommentsField(task, index, task.userComments), this.renderPhotoField(task, index))))), status === 'unmarked' && !this.completed && this.renderAssignButton(task, index)));
     }))));
   }
   static get is() { return "yoo-form-todo-mission"; }

package/dist/collection/components/form/form-todo-task/components/schedule.js

@@ -77,7 +77,15 @@ export const getScheduleElement = (target, dueDate, onChange) => {
   return {
     schedule,
     showSchedule: async () => {
-      const modal = await showModal(schedule, web ? {} : { half: true, coeffHalf: 0.66 }, web ? 'context-menu' : null, web ? 'fadeEnterAnimation' : 'slideYEnterAnimation', web ? 'fadeLeaveAnimation' : 'slideYLeaveAnimation', !web, web);
+      const modal = await showModal({
+        component: schedule,
+        componentProps: web ? {} : { half: true, coeffHalf: 0.66 },
+        cssClass: web ? 'context-menu' : null,
+        enterAnimation: web ? 'fadeEnterAnimation' : 'slideYEnterAnimation',
+        leaveAnimation: web ? 'fadeLeaveAnimation' : 'slideYLeaveAnimation',
+        showBackdrop: !web,
+        displayFullscreenButton: web
+      });
       onChange(activeDate);
       return modal;
     }

package/dist/collection/components/form/slides-media/slides-media.js

@@ -149,7 +149,12 @@ export class YooSlidesMediaComponent {
             annotations: this.currentItem.annotations
           }
         };
-        showModal(feedDetail, null, 'fullscreen', isWeb(this.host) ? 'fadeEnterAnimation' : 'slideXEnterReverseAnimation', isWeb(this.host) ? 'fadeLeaveAnimation' : 'slideXLeaveReverseAnimation');
+        showModal({
+          component: feedDetail,
+          cssClass: 'fullscreen',
+          enterAnimation: isWeb(this.host) ? 'fadeEnterAnimation' : 'slideXEnterReverseAnimation',
+          leaveAnimation: isWeb(this.host) ? 'fadeLeaveAnimation' : 'slideXLeaveReverseAnimation'
+        });
       }
     }
   }

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,67 +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(this.formCreatorTranslateDialog, {}, 'visible-overflow responsive', 'fadeEnterAnimation', 'fadeLeaveAnimation', 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');
@@ -1112,7 +1110,13 @@ export class YooFormCreatorComponent {
     formCreatorTranslateDialogLanguageSelector.addEventListener('selectedLanguagesChanged', (ev) => {
       this.selectedLanguagesChanged.emit([...ev.detail, ...this.selectedLanguages]);
     });
-    showModal(formCreatorTranslateDialogLanguageSelector, {}, 'visible-overflow responsive', 'fadeEnterAnimation', 'fadeLeaveAnimation', true).then((ret) => {
+    showModal({
+      component: formCreatorTranslateDialogLanguageSelector,
+      cssClass: 'visible-overflow responsive',
+      enterAnimation: 'fadeEnterAnimation',
+      leaveAnimation: 'fadeLeaveAnimation',
+      showBackdrop: true
+    }).then((ret) => {
       var _a, _b, _c;
       if ((_a = ret === null || ret === void 0 ? void 0 : ret.data) === null || _a === void 0 ? void 0 : _a.createNewTranslations) {
         this.translateNewLanguages(this.translations, true, selectedFieldLocation, (_b = ret === null || ret === void 0 ? void 0 : ret.data) === null || _b === void 0 ? void 0 : _b.newLanguesToTranslate);
@@ -1601,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) {
@@ -2095,7 +2098,13 @@ export class YooFormCreatorComponent {
         dialog.page = this.selectedPageIndex;
         dialog.addEventListener('close', () => closeModal(null, dialog));
         dialog.addEventListener('save', (event) => closeModal(event.detail, dialog));
-        const { data: result } = await showModal(dialog, { height: 'medium' }, null, 'fadeEnterAnimation', 'fadeLeaveAnimation', true);
+        const { data: result } = await showModal({
+          component: dialog,
+          componentProps: { height: 'medium' },
+          enterAnimation: 'fadeEnterAnimation',
+          leaveAnimation: 'fadeLeaveAnimation',
+          showBackdrop: true
+        });
         if (result) {
           const answer = await showAlert(translate('CONFIRM'), [translate('CANCEL'), translate('YOOBICYES')], translate('SCORINGQUICKSETUPCONFIRM'));
           if (answer) {
@@ -2312,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;
         }
@@ -2390,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"; }
@@ -2616,7 +2625,7 @@ export class YooFormCreatorComponent {
           "text": "Desines whether to show pages section."
         },
         "attribute": "show-pages-section",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "true"
       },
       "baseLanguage": {
@@ -2860,7 +2869,8 @@ export class YooFormCreatorComponent {
       "forceFieldRerender": {},
       "newCustomFormFieldSelectionMode": {},
       "expandedFieldName": {},
-      "shouldRenderLeftSelectionContent": {}
+      "shouldRenderLeftSelectionContent": {},
+      "isPagesAccordionOpen": {}
     };
   }
   static get events() {
@@ -3479,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",
@@ -3924,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",