@yoobic/yobi 8.2.2 → 8.3.0-2

package/dist/cjs/yoo-form-creator-translate-dialog.cjs.entry.js

@@ -2,11 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$3 = require('./index-fc264952.js');
-const index$1 = require('./index-f3d7c03d.js');
+const index = require('./index-e182c32d.js');
+const index$2 = require('./index-de8540eb.js');
+require('./index-1fdbd9b3.js');
 const lodash = require('./lodash-597bda6d.js');
-const index$2 = require('./index-1bc46652.js');
+const index$1 = require('./index-a69f7517.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./annotations-helpers-6cf88388.js');
 
@@ -40,7 +41,7 @@ const YooFormCreatorTranslateDialogComponent = class {
      * A state to prevent the change of selected field if the translation has been edited and it has not finished saving
      */
     this.preventFieldChange = false;
-    this.updateTranslationsDebounce = index$1.debounce((event) => {
+    this.updateTranslationsDebounce = overlays.debounce((event) => {
       var _a, _b;
       this.preventFieldChange = false;
       (_a = this.leftArrow) === null || _a === void 0 ? void 0 : _a.setAttribute('style', 'display: block;');
@@ -96,10 +97,10 @@ const YooFormCreatorTranslateDialogComponent = class {
   initTranslationForms() {
     var _a;
     this.selectedFieldLocation = this.initialSelectedFieldLocation;
-    this.currentSlides = index$1.formatSlides(this.slides);
+    this.currentSlides = overlays.formatSlides(this.slides);
     if (this.currentSlides[this.selectedFieldLocation.slideIndex].items[this.selectedFieldLocation.itemIndex]) {
       if (this.translatedLanguages) {
-        this.currentLanguageIndex = (_a = this.translatedLanguages) === null || _a === void 0 ? void 0 : _a.findIndex((lang) => lang === index$1.getCurrentLanguage());
+        this.currentLanguageIndex = (_a = this.translatedLanguages) === null || _a === void 0 ? void 0 : _a.findIndex((lang) => lang === overlays.getCurrentLanguage());
         if (this.currentLanguageIndex > -1) {
           this.selectedLanguage = this.translatedLanguages[this.currentLanguageIndex];
         }
@@ -112,7 +113,7 @@ const YooFormCreatorTranslateDialogComponent = class {
   }
   updateTranslationForms(force = false) {
     if ((!this.editableForm || force) && !this.preventFormUpdate && !this.isCreateTranslationMode()) {
-      this.currentSlides = index$1.formatSlides(this.slides);
+      this.currentSlides = overlays.formatSlides(this.slides);
       this.editableForm = this.buildDefaultLanguageForm(this.currentSlides[this.selectedFieldLocation.slideIndex].items[this.selectedFieldLocation.itemIndex], this.selectedLanguage);
     }
   }
@@ -127,8 +128,8 @@ const YooFormCreatorTranslateDialogComponent = class {
     return !isFirstItem || (isFirstItem && !isFirstSlide);
   }
   onDuplicateBaseLanguageClicked(value, locale, dataRef) {
-    const baseLanguageTranslation = index$1.getLocaleTranslation(this.updatedTranslations, this.baseLanguage, value);
-    const { translations, updatedTranslation } = index$2.updateLocaleTranslation(baseLanguageTranslation, this.updatedTranslations, locale, value);
+    const baseLanguageTranslation = overlays.getLocaleTranslation(this.updatedTranslations, this.baseLanguage, value);
+    const { translations, updatedTranslation } = index$1.updateLocaleTranslation(baseLanguageTranslation, this.updatedTranslations, locale, value);
     this.updatedTranslations = translations;
     this.translationUpdated.emit({ translations: this.updatedTranslations, updatedTranslation, languagesChanged: [this.selectedLanguage] });
     this.editableFormElement.data[dataRef] = baseLanguageTranslation;
@@ -136,7 +137,7 @@ const YooFormCreatorTranslateDialogComponent = class {
     this.editableFormElement.forceFieldUpdate(field, { value: baseLanguageTranslation });
   }
   onTranslateField(key, targetLanguage) {
-    const baseLanguageTranslation = index$1.getLocaleTranslation(this.updatedTranslations, this.baseLanguage, key);
+    const baseLanguageTranslation = overlays.getLocaleTranslation(this.updatedTranslations, this.baseLanguage, key);
     this.translateValue.emit({ value: baseLanguageTranslation, baseLanguage: this.baseLanguage, targetLanguage, key });
   }
   onEditableFormChanged(ev) {
@@ -159,26 +160,26 @@ const YooFormCreatorTranslateDialogComponent = class {
     if (field.type === 'imagetagging' && ((_b = field.annotations) === null || _b === void 0 ? void 0 : _b.length)) {
       field.values = field.values.filter((v) => !field.annotations.find((a) => (a === null || a === void 0 ? void 0 : a.text) === v));
     }
-    index$3.TRANSLATABLE_FORM_FIELD_ATTRIBUTES.forEach((translatableFormField) => {
-      const isRTE = index$1.isHTML(index$1.translateMulti((field === null || field === void 0 ? void 0 : field[translatableFormField]) || ''));
+    index$2.TRANSLATABLE_FORM_FIELD_ATTRIBUTES.forEach((translatableFormField) => {
+      const isRTE = overlays.isHTML(overlays.translateMulti((field === null || field === void 0 ? void 0 : field[translatableFormField]) || ''));
       if (field[translatableFormField] && !(hasComplexSentence && translatableFormField === 'sentence')) {
         if (translatableFormField === 'complexSentence') {
           hasComplexSentence = true;
         }
         slides[0].items.push({
-          type: index$3.FormFieldType.textarea,
+          type: index$2.FormFieldType.textarea,
           language: isRTE && 'html',
           autoInitialRows: true,
-          title: index$1.translate(translatableFormField.toUpperCase()),
+          title: overlays.translate(translatableFormField.toUpperCase()),
           name: `${translatableFormField}Base`,
           flex: 50,
           readonly: this.isTranslator
         });
         slides[0].items.push({
-          type: index$3.FormFieldType.textarea,
+          type: index$2.FormFieldType.textarea,
           language: isRTE && 'html',
           autoInitialRows: true,
-          title: index$1.translate(translatableFormField.toUpperCase()),
+          title: overlays.translate(translatableFormField.toUpperCase()),
           name: translatableFormField,
           flex: 50,
           inlineActions: [
@@ -191,26 +192,26 @@ const YooFormCreatorTranslateDialogComponent = class {
             }
           ]
         });
-        data[translatableFormField] = index$1.getLocaleTranslation(this.updatedTranslations, locale, field[translatableFormField]);
-        data[`${translatableFormField}Base`] = index$1.getLocaleTranslation(this.updatedTranslations, this.baseLanguage, field[translatableFormField]);
+        data[translatableFormField] = overlays.getLocaleTranslation(this.updatedTranslations, locale, field[translatableFormField]);
+        data[`${translatableFormField}Base`] = overlays.getLocaleTranslation(this.updatedTranslations, this.baseLanguage, field[translatableFormField]);
       }
     });
-    index$3.COMPLEX_ARRAY_TRANSLATABLE_FORM_FIELD_ATTRIBUTES.forEach((complexTranslatableAttr) => {
+    index$2.COMPLEX_ARRAY_TRANSLATABLE_FORM_FIELD_ATTRIBUTES.forEach((complexTranslatableAttr) => {
       var _a;
       const complexValues = field[complexTranslatableAttr];
       if ((complexValues === null || complexValues === void 0 ? void 0 : complexValues.length) > 0 &&
         complexTranslatableAttr !== 'complexAnswer' &&
-        !(((_a = field === null || field === void 0 ? void 0 : field.categories) === null || _a === void 0 ? void 0 : _a.length) > 0 && [index$3.FormFieldType.categorizewords, index$3.FormFieldType.swipecards].includes(field.type))) {
+        !(((_a = field === null || field === void 0 ? void 0 : field.categories) === null || _a === void 0 ? void 0 : _a.length) > 0 && [index$2.FormFieldType.categorizewords, index$2.FormFieldType.swipecards].includes(field.type))) {
         complexValues === null || complexValues === void 0 ? void 0 : complexValues.forEach((complexValue, complexValueIndex) => {
           complexValue === null || complexValue === void 0 ? void 0 : complexValue.forEach((multiInputValue, valueIndex) => {
             if (multiInputValue && (!lodash.isObject(multiInputValue) || (lodash.isObject(multiInputValue) && !lodash.isEmpty(multiInputValue)))) {
               hasComplexValues = true;
               const value = lodash.isString(multiInputValue) ? multiInputValue : multiInputValue.text;
               if (value) {
-                const isRTE = index$1.isHTML(index$1.translateMulti(value));
+                const isRTE = overlays.isHTML(overlays.translateMulti(value));
                 slides[0].items.push({
-                  type: index$3.FormFieldType.textarea,
-                  title: index$1.translate('VALUES'),
+                  type: index$2.FormFieldType.textarea,
+                  title: overlays.translate('VALUES'),
                   hideLabel: complexValueIndex !== 0 || valueIndex !== 0,
                   language: isRTE && 'html',
                   formatAmpersandSymbol: true,
@@ -220,8 +221,8 @@ const YooFormCreatorTranslateDialogComponent = class {
                   readonly: this.isTranslator
                 });
                 slides[0].items.push({
-                  type: index$3.FormFieldType.textarea,
-                  title: index$1.translate('VALUES'),
+                  type: index$2.FormFieldType.textarea,
+                  title: overlays.translate('VALUES'),
                   hideLabel: complexValueIndex !== 0 || valueIndex !== 0,
                   language: isRTE && 'html',
                   formatAmpersandSymbol: true,
@@ -238,15 +239,15 @@ const YooFormCreatorTranslateDialogComponent = class {
                     }
                   ]
                 });
-                data[`${complexTranslatableAttr}${complexValueIndex}${valueIndex}`] = index$1.getLocaleTranslation(this.updatedTranslations, locale, value);
-                data[`${complexTranslatableAttr}${complexValueIndex}${valueIndex}Base`] = index$1.getLocaleTranslation(this.updatedTranslations, this.baseLanguage, value);
+                data[`${complexTranslatableAttr}${complexValueIndex}${valueIndex}`] = overlays.getLocaleTranslation(this.updatedTranslations, locale, value);
+                data[`${complexTranslatableAttr}${complexValueIndex}${valueIndex}Base`] = overlays.getLocaleTranslation(this.updatedTranslations, this.baseLanguage, value);
               }
             }
           });
         });
       }
     });
-    index$3.SINGLE_ARRAY_TRANSLATABLE_FORM_FIELD_ATTRIBUTES.forEach((singleArrayAttr) => {
+    index$2.SINGLE_ARRAY_TRANSLATABLE_FORM_FIELD_ATTRIBUTES.forEach((singleArrayAttr) => {
       if (field[singleArrayAttr] &&
         field[singleArrayAttr].length > 0 &&
         !(singleArrayAttr === 'values' && (hasComplexValues || (field.type === 'swipecards' && field.swipeMode === 'image') || field.type === 'scratch')) &&
@@ -255,23 +256,23 @@ const YooFormCreatorTranslateDialogComponent = class {
           const value = lodash.isString(_value) ? _value : _value.text;
           if (value) {
             slides[0].items.push({
-              type: index$3.FormFieldType.textarea,
-              title: index$1.translate(singleArrayAttr.toUpperCase()),
+              type: index$2.FormFieldType.textarea,
+              title: overlays.translate(singleArrayAttr.toUpperCase()),
               hideLabel: valueIndex > 0,
               formatAmpersandSymbol: true,
               autoInitialRows: true,
-              language: index$1.isHTML(index$1.translate(value)) && 'html',
+              language: overlays.isHTML(overlays.translate(value)) && 'html',
               name: `${singleArrayAttr}${valueIndex}Base`,
               flex: 50,
               readonly: this.isTranslator
             });
             slides[0].items.push({
-              type: index$3.FormFieldType.textarea,
-              title: index$1.translate(singleArrayAttr.toUpperCase()),
+              type: index$2.FormFieldType.textarea,
+              title: overlays.translate(singleArrayAttr.toUpperCase()),
               hideLabel: valueIndex > 0,
               formatAmpersandSymbol: true,
               autoInitialRows: true,
-              language: index$1.isHTML(index$1.translate(value)) && 'html',
+              language: overlays.isHTML(overlays.translate(value)) && 'html',
               name: `${singleArrayAttr}${valueIndex}`,
               flex: 50,
               inlineActions: [
@@ -284,8 +285,8 @@ const YooFormCreatorTranslateDialogComponent = class {
                 }
               ]
             });
-            data[`${singleArrayAttr}${valueIndex}`] = index$1.getLocaleTranslation(this.updatedTranslations, locale, value);
-            data[`${singleArrayAttr}${valueIndex}Base`] = index$1.getLocaleTranslation(this.updatedTranslations, this.baseLanguage, value);
+            data[`${singleArrayAttr}${valueIndex}`] = overlays.getLocaleTranslation(this.updatedTranslations, locale, value);
+            data[`${singleArrayAttr}${valueIndex}Base`] = overlays.getLocaleTranslation(this.updatedTranslations, this.baseLanguage, value);
           }
         });
       }
@@ -293,23 +294,23 @@ const YooFormCreatorTranslateDialogComponent = class {
     (_c = field === null || field === void 0 ? void 0 : field.hotzones) === null || _c === void 0 ? void 0 : _c.forEach(({ description }, valueIndex) => {
       if (lodash.isString(description)) {
         slides[0].items.push({
-          type: index$3.FormFieldType.textarea,
-          title: index$1.translate('HOTZONESDESCRIPTION'),
+          type: index$2.FormFieldType.textarea,
+          title: overlays.translate('HOTZONESDESCRIPTION'),
           hideLabel: valueIndex > 0,
           formatAmpersandSymbol: true,
           autoInitialRows: true,
-          language: index$1.isHTML(index$1.translate(description)) && 'html',
+          language: overlays.isHTML(overlays.translate(description)) && 'html',
           name: `${'hotzoneDescription'}${valueIndex}Base`,
           flex: 50,
           readonly: this.isTranslator
         });
         slides[0].items.push({
-          type: index$3.FormFieldType.textarea,
-          title: index$1.translate('HOTZONESDESCRIPTION'),
+          type: index$2.FormFieldType.textarea,
+          title: overlays.translate('HOTZONESDESCRIPTION'),
           hideLabel: valueIndex > 0,
           formatAmpersandSymbol: true,
           autoInitialRows: true,
-          language: index$1.isHTML(index$1.translate(description)) && 'html',
+          language: overlays.isHTML(overlays.translate(description)) && 'html',
           name: `${'hotzoneDescription'}${valueIndex}`,
           flex: 50,
           inlineActions: [
@@ -322,8 +323,8 @@ const YooFormCreatorTranslateDialogComponent = class {
             }
           ]
         });
-        data[`${'hotzoneDescription'}${valueIndex}`] = index$1.getLocaleTranslation(this.updatedTranslations, locale, description);
-        data[`${'hotzoneDescription'}${valueIndex}Base`] = index$1.getLocaleTranslation(this.updatedTranslations, this.baseLanguage, description);
+        data[`${'hotzoneDescription'}${valueIndex}`] = overlays.getLocaleTranslation(this.updatedTranslations, locale, description);
+        data[`${'hotzoneDescription'}${valueIndex}Base`] = overlays.getLocaleTranslation(this.updatedTranslations, this.baseLanguage, description);
       }
     });
     return { slides, data };
@@ -371,7 +372,7 @@ const YooFormCreatorTranslateDialogComponent = class {
   }
   updateCurrentTranslations(updatedTranslations, name) {
     var _a, _b;
-    const { itemIndex, slideIndex } = index$1.findField(this.currentSlides, name);
+    const { itemIndex, slideIndex } = overlays.findField(this.currentSlides, name);
     let selectedField = (_a = this.currentSlides[slideIndex]) === null || _a === void 0 ? void 0 : _a.items[itemIndex];
     if (!selectedField) {
       selectedField = this.currentSlides[this.selectedFieldLocation.slideIndex].items[this.selectedFieldLocation.itemIndex];
@@ -380,17 +381,17 @@ const YooFormCreatorTranslateDialogComponent = class {
     let hasComplexSentence = false;
     let isBaseLanguageChange = false;
     let updatedTranslation;
-    index$3.TRANSLATABLE_FORM_FIELD_ATTRIBUTES.forEach((translatableField) => {
+    index$2.TRANSLATABLE_FORM_FIELD_ATTRIBUTES.forEach((translatableField) => {
       if (!(translatableField === 'sentence' && hasComplexSentence)) {
         if (updatedTranslations.complexSentence) {
           hasComplexSentence = true;
         }
-        const updatedLocaleTranslations = index$2.updateLocaleTranslation(updatedTranslations[translatableField], this.updatedTranslations, this.selectedLanguage, selectedField[translatableField]);
+        const updatedLocaleTranslations = index$1.updateLocaleTranslation(updatedTranslations[translatableField], this.updatedTranslations, this.selectedLanguage, selectedField[translatableField]);
         this.updatedTranslations = updatedLocaleTranslations.translations;
         if (updatedLocaleTranslations.updatedTranslation) {
           updatedTranslation = updatedLocaleTranslations.updatedTranslation;
         }
-        const updatedLocaleTranslationsBase = index$2.updateLocaleTranslation(updatedTranslations[`${translatableField}Base`], this.updatedTranslations, this.baseLanguage, selectedField[translatableField]);
+        const updatedLocaleTranslationsBase = index$1.updateLocaleTranslation(updatedTranslations[`${translatableField}Base`], this.updatedTranslations, this.baseLanguage, selectedField[translatableField]);
         this.updatedTranslations = updatedLocaleTranslationsBase.translations;
         if (updatedLocaleTranslationsBase.updatedTranslation) {
           isBaseLanguageChange = true;
@@ -398,20 +399,20 @@ const YooFormCreatorTranslateDialogComponent = class {
         }
       }
     });
-    index$3.COMPLEX_ARRAY_TRANSLATABLE_FORM_FIELD_ATTRIBUTES.forEach((complexTranslatableAttr) => {
+    index$2.COMPLEX_ARRAY_TRANSLATABLE_FORM_FIELD_ATTRIBUTES.forEach((complexTranslatableAttr) => {
       const complexValues = selectedField[complexTranslatableAttr];
       if ((complexValues === null || complexValues === void 0 ? void 0 : complexValues.length) > 0) {
         complexValues === null || complexValues === void 0 ? void 0 : complexValues.forEach((complexValue, complexValueIndex) => {
           complexValue === null || complexValue === void 0 ? void 0 : complexValue.forEach((multiInputValue, valueIndex) => {
             if (multiInputValue) {
               const value = lodash.isString(multiInputValue) ? multiInputValue : multiInputValue.text;
-              const updatedLocaleTranslations = index$2.updateLocaleTranslation(updatedTranslations[`${complexTranslatableAttr}${complexValueIndex}${valueIndex}`], this.updatedTranslations, this.selectedLanguage, value);
+              const updatedLocaleTranslations = index$1.updateLocaleTranslation(updatedTranslations[`${complexTranslatableAttr}${complexValueIndex}${valueIndex}`], this.updatedTranslations, this.selectedLanguage, value);
               this.updatedTranslations = updatedLocaleTranslations.translations;
               if (updatedLocaleTranslations.updatedTranslation) {
                 updatedTranslation = updatedLocaleTranslations.updatedTranslation;
                 hasComplexValues = true;
               }
-              const updatedLocaleTranslationsBase = index$2.updateLocaleTranslation(updatedTranslations[`${complexTranslatableAttr}${complexValueIndex}${valueIndex}Base`], this.updatedTranslations, this.baseLanguage, value);
+              const updatedLocaleTranslationsBase = index$1.updateLocaleTranslation(updatedTranslations[`${complexTranslatableAttr}${complexValueIndex}${valueIndex}Base`], this.updatedTranslations, this.baseLanguage, value);
               this.updatedTranslations = updatedLocaleTranslationsBase.translations;
               if (updatedLocaleTranslationsBase.updatedTranslation) {
                 isBaseLanguageChange = true;
@@ -423,17 +424,17 @@ const YooFormCreatorTranslateDialogComponent = class {
         });
       }
     });
-    index$3.SINGLE_ARRAY_TRANSLATABLE_FORM_FIELD_ATTRIBUTES.forEach((singleTranslatableAttr) => {
+    index$2.SINGLE_ARRAY_TRANSLATABLE_FORM_FIELD_ATTRIBUTES.forEach((singleTranslatableAttr) => {
       var _a;
       if (((_a = selectedField[singleTranslatableAttr]) === null || _a === void 0 ? void 0 : _a.length) > 0 && !(singleTranslatableAttr === 'values' && hasComplexValues)) {
         selectedField[singleTranslatableAttr].forEach((_value, valueIndex) => {
           const value = lodash.isString(_value) ? _value : _value.text;
-          const updatedLocaleTranslations = index$2.updateLocaleTranslation(updatedTranslations[`${singleTranslatableAttr}${valueIndex}`], this.updatedTranslations, this.selectedLanguage, value);
+          const updatedLocaleTranslations = index$1.updateLocaleTranslation(updatedTranslations[`${singleTranslatableAttr}${valueIndex}`], this.updatedTranslations, this.selectedLanguage, value);
           this.updatedTranslations = updatedLocaleTranslations.translations;
           if (updatedLocaleTranslations.updatedTranslation) {
             updatedTranslation = updatedLocaleTranslations.updatedTranslation;
           }
-          const updatedLocaleTranslationsBase = index$2.updateLocaleTranslation(updatedTranslations[`${singleTranslatableAttr}${valueIndex}Base`], this.updatedTranslations, this.baseLanguage, value);
+          const updatedLocaleTranslationsBase = index$1.updateLocaleTranslation(updatedTranslations[`${singleTranslatableAttr}${valueIndex}Base`], this.updatedTranslations, this.baseLanguage, value);
           this.updatedTranslations = updatedLocaleTranslationsBase.translations;
           if (updatedLocaleTranslationsBase.updatedTranslation) {
             isBaseLanguageChange = true;
@@ -444,12 +445,12 @@ const YooFormCreatorTranslateDialogComponent = class {
     });
     (_b = selectedField === null || selectedField === void 0 ? void 0 : selectedField.hotzones) === null || _b === void 0 ? void 0 : _b.forEach(({ description }, valueIndex) => {
       const value = description;
-      const updatedLocaleTranslations = index$2.updateLocaleTranslation(updatedTranslations[`${'hotzoneDescription'}${valueIndex}`], this.updatedTranslations, this.selectedLanguage, value);
+      const updatedLocaleTranslations = index$1.updateLocaleTranslation(updatedTranslations[`${'hotzoneDescription'}${valueIndex}`], this.updatedTranslations, this.selectedLanguage, value);
       this.updatedTranslations = updatedLocaleTranslations.translations;
       if (updatedLocaleTranslations.updatedTranslation) {
         updatedTranslation = updatedLocaleTranslations.updatedTranslation;
       }
-      const updatedLocaleTranslationsBase = index$2.updateLocaleTranslation(updatedTranslations[`${'hotzoneDescription'}${valueIndex}Base`], this.updatedTranslations, this.baseLanguage, value);
+      const updatedLocaleTranslationsBase = index$1.updateLocaleTranslation(updatedTranslations[`${'hotzoneDescription'}${valueIndex}Base`], this.updatedTranslations, this.baseLanguage, value);
       this.updatedTranslations = updatedLocaleTranslationsBase.translations;
       if (updatedLocaleTranslationsBase.updatedTranslation) {
         isBaseLanguageChange = true;
@@ -468,12 +469,12 @@ const YooFormCreatorTranslateDialogComponent = class {
   }
   renderHeader() {
     const title = this.isCreateTranslationMode()
-      ? index$1.translate('STARTTRANSLATE')
-      : index$1.translate('TRANSLATION') +
+      ? overlays.translate('STARTTRANSLATE')
+      : overlays.translate('TRANSLATION') +
         ' - ' +
         `${this.currentSlides[this.selectedFieldLocation.slideIndex].items[this.selectedFieldLocation.itemIndex].formCreatorIndex + 1}. ` +
-        index$1.translateMulti(this.currentSlides[this.selectedFieldLocation.slideIndex].items[this.selectedFieldLocation.itemIndex].title);
-    return (index.h("yoo-header", null, index.h("yoo-navbar", null, index.h("yoo-items", { slot: "start" }, index.h("yoo-button", { color: "text-color", fill: "transparent", shape: "circular", rippleType: "unbounded", onClick: () => index$1.closeModal(this.mode === 'create' ? { presentTranslationModal: true } : null, this.host) }, index.h("yoo-icon", { name: this.mode === 'create' ? 'left' : 'close' }))), index.h("yoo-truncate", null, title))));
+        overlays.translateMulti(this.currentSlides[this.selectedFieldLocation.slideIndex].items[this.selectedFieldLocation.itemIndex].title);
+    return (index.h("yoo-header", null, index.h("yoo-navbar", null, index.h("yoo-items", { slot: "start" }, index.h("yoo-button", { color: "text-color", fill: "transparent", shape: "circular", rippleType: "unbounded", onClick: () => overlays.closeModal(this.mode === 'create' ? { presentTranslationModal: true } : null, this.host) }, index.h("yoo-icon", { name: this.mode === 'create' ? 'left' : 'close' }))), index.h("yoo-truncate", null, title))));
   }
   renderEditTranslateContent() {
     var _a;
@@ -481,16 +482,16 @@ const YooFormCreatorTranslateDialogComponent = class {
     const TOOLBAR_HEIGHT = 56;
     const maxHeight = window.innerHeight - PADDING - TOOLBAR_HEIGHT;
     const style = { maxHeight: `${maxHeight}px` };
-    return (index.h("div", { class: "scroll-container", style: style }, index.h("div", { class: "form-container" }, index.h("div", { class: "top-form-container" }, index.h("yoo-form-input-container", { class: "base-language", field: { title: index$1.translate('DEFAULTLANGUAGE') }, hideOptional: true }, index.h("yoo-form-autocomplete", { values: index$1.getTranslateLanguageKeys([this.baseLanguage]), value: index$1.getTranslateLanguageKeys([this.baseLanguage]), useTranslate: true, idOnly: true, readonly: true, size: "medium", forceHideSearch: true, displayType: "card-list", isLocal: true })), index.h("yoo-form-input-container", { class: "translate-to", field: { title: index$1.translate('TRANSLATETO') }, hideOptional: true }, index.h("yoo-form-autocomplete", { class: "single-line", values: index$1.getTranslateLanguageKeys(this.translatedLanguages), value: this.currentLanguageIndex > -1 ? this.translatedLanguages[this.currentLanguageIndex] : this.translatedLanguages[0], multiple: false, useTranslate: true, idOnly: true, entityType: "language", displayType: "card-list", onInputChanged: (ev) => this.onSelectedLanguagesChanged(ev), forceHideSearch: true, size: "medium", isLocal: true })), index.h("yoo-tooltip", { hoverable: true, placement: "bottom", content: index$1.translate(this.disableNewLanguageButton ? this.disableNewLanguageButton : 'ADDNEWLANGUAGE'), class: "no-pointer" }, index.h("yoo-button", { disabled: ((_a = this.disableNewLanguageButton) === null || _a === void 0 ? void 0 : _a.length) > 0, size: "medium", shape: "square", onClick: () => this.onAddNewLanguageClicked() }, index.h("yoo-icon", { size: "small", name: "plus" })))), this.editableForm && (index.h("yoo-form-dynamic", { ref: (el) => (this.editableFormElement = el), class: "translate-dialog no-animation", scrollable: false, slides: this.editableForm.slides, data: this.editableForm.data, hideToolbar: true, showRecap: false, onDataChanged: (ev) => this.onEditableFormChanged(ev), onFormHasLoaded: () => this.onEditableFormLoaded() })))));
+    return (index.h("div", { class: "scroll-container", style: style }, index.h("div", { class: "form-container" }, index.h("div", { class: "top-form-container" }, index.h("yoo-form-input-container", { class: "base-language", field: { title: overlays.translate('DEFAULTLANGUAGE') }, hideOptional: true }, index.h("yoo-form-autocomplete", { values: overlays.getTranslateLanguageKeys([this.baseLanguage]), value: overlays.getTranslateLanguageKeys([this.baseLanguage]), useTranslate: true, idOnly: true, readonly: true, size: "medium", forceHideSearch: true, displayType: "card-list", isLocal: true })), index.h("yoo-form-input-container", { class: "translate-to", field: { title: overlays.translate('TRANSLATETO') }, hideOptional: true }, index.h("yoo-form-autocomplete", { class: "single-line", values: overlays.getTranslateLanguageKeys(this.translatedLanguages), value: this.currentLanguageIndex > -1 ? this.translatedLanguages[this.currentLanguageIndex] : this.translatedLanguages[0], multiple: false, useTranslate: true, idOnly: true, entityType: "language", displayType: "card-list", onInputChanged: (ev) => this.onSelectedLanguagesChanged(ev), forceHideSearch: true, size: "medium", isLocal: true })), index.h("yoo-tooltip", { hoverable: true, placement: "bottom", content: overlays.translate(this.disableNewLanguageButton ? this.disableNewLanguageButton : 'ADDNEWLANGUAGE'), class: "no-pointer" }, index.h("yoo-button", { disabled: ((_a = this.disableNewLanguageButton) === null || _a === void 0 ? void 0 : _a.length) > 0, size: "medium", shape: "square", onClick: () => this.onAddNewLanguageClicked() }, index.h("yoo-icon", { size: "small", name: "plus" })))), this.editableForm && (index.h("yoo-form-dynamic", { ref: (el) => (this.editableFormElement = el), class: "translate-dialog no-animation", scrollable: false, slides: this.editableForm.slides, data: this.editableForm.data, hideToolbar: true, showRecap: false, onDataChanged: (ev) => this.onEditableFormChanged(ev), onFormHasLoaded: () => this.onEditableFormLoaded() })))));
   }
   renderCreateTranslationContent() {
-    return (index.h("div", { class: "forms-container" }, index.h("div", { class: "form-container left" }, index.h("yoo-form-input-container", { class: "base-language", field: { title: index$1.translate('DEFAULTLANGUAGE') }, hideOptional: true }, index.h("yoo-form-autocomplete", { ref: (el) => (this.baseLanguageAuto = el), disabled: this.mode === 'create', values: index$1.getTranslateLanguageKeys(this.availableBaseLanguages), value: { _id: this.baseLanguage, title: `TRANSLATE_${this.baseLanguage}` }, idOnly: true, useTranslate: true, multiple: false, readonly: false, forceHideSearch: true, displayType: "card-list", onInputChanged: (ev) => this.onBaseLanguageChanged(ev), isLocal: true, size: "medium" }))), index.h("div", { class: "form-container right" }, index.h("yoo-form-input-container", { class: "translate-to", field: { title: index$1.translate('TRANSLATETO') }, hideOptional: true }, index.h("yoo-form-autocomplete", { ref: (el) => (this.translateToAutocomplete = el), class: "single-line", values: index$1.getTranslateLanguageKeys(this.allLanguagesAvailable), multiple: true, useTranslate: true, idOnly: true, forceHideSearch: true, entityType: "language", displayType: "card-list", onInputChanged: (ev) => this.onNewTranslateLanguageChanged(ev), isLocal: true, size: "medium" })))));
+    return (index.h("div", { class: "forms-container" }, index.h("div", { class: "form-container left" }, index.h("yoo-form-input-container", { class: "base-language", field: { title: overlays.translate('DEFAULTLANGUAGE') }, hideOptional: true }, index.h("yoo-form-autocomplete", { ref: (el) => (this.baseLanguageAuto = el), disabled: this.mode === 'create', values: overlays.getTranslateLanguageKeys(this.availableBaseLanguages), value: { _id: this.baseLanguage, title: `TRANSLATE_${this.baseLanguage}` }, idOnly: true, useTranslate: true, multiple: false, readonly: false, forceHideSearch: true, displayType: "card-list", onInputChanged: (ev) => this.onBaseLanguageChanged(ev), isLocal: true, size: "medium" }))), index.h("div", { class: "form-container right" }, index.h("yoo-form-input-container", { class: "translate-to", field: { title: overlays.translate('TRANSLATETO') }, hideOptional: true }, index.h("yoo-form-autocomplete", { ref: (el) => (this.translateToAutocomplete = el), class: "single-line", values: overlays.getTranslateLanguageKeys(this.allLanguagesAvailable), multiple: true, useTranslate: true, idOnly: true, forceHideSearch: true, entityType: "language", displayType: "card-list", onInputChanged: (ev) => this.onNewTranslateLanguageChanged(ev), isLocal: true, size: "medium" })))));
   }
   onAddNewLanguageClicked() {
-    index$1.closeModal(this.isCreateTranslationMode() ? { createNewTranslations: true, newLanguesToTranslate: this.newLanguesToTranslate } : { addNewLanguage: true }, this.host);
+    overlays.closeModal(this.isCreateTranslationMode() ? { createNewTranslations: true, newLanguesToTranslate: this.newLanguesToTranslate } : { addNewLanguage: true }, this.host);
   }
   renderFooter() {
-    return (index.h("div", { class: "button-container" }, index.h("yoo-button", { disabled: this.isCreateTranslationMode() && (!this.newLanguesToTranslate || (this.newLanguesToTranslate && this.newLanguesToTranslate.length === 0)), color: this.isCreateTranslationMode() ? 'app-color' : 'light', onClick: () => this.onAddNewLanguageClicked() }, index$1.translate('SAVEANDTRANSLATE'))));
+    return (index.h("div", { class: "button-container" }, index.h("yoo-button", { disabled: this.isCreateTranslationMode() && (!this.newLanguesToTranslate || (this.newLanguesToTranslate && this.newLanguesToTranslate.length === 0)), color: this.isCreateTranslationMode() ? 'app-color' : 'light', onClick: () => this.onAddNewLanguageClicked() }, overlays.translate('SAVEANDTRANSLATE'))));
   }
   renderArrowIcon(direction) {
     return (index.h("div", { class: { 'arrow-container': true, [direction]: true }, onClick: () => this.onArrowClick(direction) }, index.h("yoo-icon", { size: "extra-large", ref: (el) => {