@unvired/turboforms-embed-sdk 2.0.54 → 2.0.55

package/dist/turboforms.html

@@ -41867,6 +41867,62 @@ async function loadTRform(
     document.dispatchEvent(new CustomEvent("LessRenderingComplete"));
 
     window.formObj = formObj;
+    
+    // Setup language dropdown if translations are provided
+    if (window.FORMIO_I18N && Object.keys(window.FORMIO_I18N).length > 0) {
+      const modalLangSelector = document.getElementById('modalLanguageSelector');
+      const langMainOption = document.getElementById('languageMainOption');
+      const langDivider = document.getElementById('languageDivider');
+      
+      if (modalLangSelector && langMainOption) {
+        modalLangSelector.innerHTML = '';
+        
+        let languages = Object.keys(window.FORMIO_I18N).filter(lang => 
+          typeof window.FORMIO_I18N[lang] === 'object' && window.FORMIO_I18N[lang] !== null
+        );
+        const currentLang = window.FORMIO_LANGUAGE || 'en';
+        if (!languages.includes(currentLang) && typeof window.FORMIO_I18N[currentLang] === 'object') {
+          languages.unshift(currentLang);
+        } else if (!languages.includes(currentLang) && languages.length > 0) {
+          // If the currentLang has no translations, we should maybe still show it, but let's just stick to what has translations.
+          // The user specifically only wants to see options they passed translations for.
+        }
+        
+        const displayNames = new Intl.DisplayNames(['en'], { type: 'language' });
+
+        languages.forEach(lang => {
+          const option = document.createElement('option');
+          option.value = lang;
+          
+          let displayName = lang.toUpperCase();
+          try {
+            displayName = displayNames.of(lang) || displayName;
+          } catch (e) {
+            // Fallback if the language code is invalid
+          }
+          
+          option.text = displayName;
+          if (lang === currentLang) option.selected = true;
+          modalLangSelector.appendChild(option);
+        });
+
+        if (window.Choices) {
+          // Destroy previous instance if it exists
+          if (window.languageChoicesInstance) {
+            window.languageChoicesInstance.destroy();
+          }
+          window.languageChoicesInstance = new Choices(modalLangSelector, {
+            searchEnabled: false,
+            itemSelectText: '',
+            shouldSort: false,
+            allowHTML: true
+          });
+        }
+        
+        langMainOption.style.display = langMainOption.className.includes('d-flex') ? 'flex' : 'block';
+        if (langDivider) langDivider.style.display = 'block';
+      }
+    }
     if (!formObj) {
       logger.error("[TF_SDK:299] ❌ Form not initialized.");
       return;
@@ -43110,7 +43166,7 @@ window.CommentOnBack = CommentOnBack;
 
     
     <div id="sticky-footer">
-        <div class="build-version">SDK v2.0.54</div>
+        <div class="build-version">SDK v2.0.55</div>
         <div class="relative-position">
             <button id="unvired-more-btn" class="ui button primary dataGrid-addRow" onclick="toggleTooltip()">
                 <i class="icon options"></i>
@@ -43122,7 +43178,9 @@ window.CommentOnBack = CommentOnBack;
                 <div class="divider"></div>
                 <div class="item" onclick="setTimeout(() => loadComments(), 200)">Comments</div>
                 <div class="divider"></div>
-                <div class="item" onclick="openHelpLink()">Help</div>
+                <div class="item" id="help-item" onclick="openHelpLink()">Help</div>
+                <div class="divider" id="languageDivider" style="display: none;"></div>
+                <div class="item" id="languageMainOption" style="display: none; cursor: pointer;" onclick="openLanguageModal()">Language</div>
             </div>
         </div>
 
@@ -43138,7 +43196,61 @@ window.CommentOnBack = CommentOnBack;
         </button>
     </div>
 
+    <div id="languageModalOverlay" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1040; backdrop-filter: blur(2px);" onclick="closeLanguageModal()"></div>
+    <div id="languageModal" style="display: none; position: fixed; top: 15%; left: 50%; transform: translate(-50%, 0); z-index: 1050; background: var(--tf-app-card-bg, #ffffff); color: var(--tf-app-label-color, #333); padding: 24px; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.15); width: 90%; max-width: 400px; pointer-events: auto; font-family: var(--tf-app-font-family, inherit);">
+        <style>
+            #languageModal .choices { margin-bottom: 0; }
+            #languageModal .choices__inner { 
+                display: flex; 
+                align-items: center; 
+                padding: 0 16px; 
+                min-height: 44px; 
+                border-radius: 8px; 
+                background-color: var(--tf-app-bg-color, #fff); 
+                border: 1px solid var(--tf-border-color, #ced4da);
+            }
+            #languageModal .choices__list--single { padding: 0; }
+            #languageModal .choices[data-type*=select-one]::after { margin-top: -6px; }
+        </style>
+        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
+            <h3 style="margin: 0; font-weight: 600; font-size: calc(var(--tf-app-font-size-base, 14px) + 2px);">Select Language</h3>
+            <span style="cursor:pointer; font-weight: bold; font-size: 1.2rem; color: var(--tf-app-label-color, #333);" onclick="closeLanguageModal()">X</span>
+        </div>
+        <div style="margin-bottom: 20px; margin-top: 10px;">
+            <select id="modalLanguageSelector" style="width: 100%; border: 1px solid var(--tf-border-color, #ced4da); border-radius: 8px; padding: 0.6rem 1rem; font-size: var(--tf-app-font-size-base, 14px); background-color: var(--tf-app-bg-color, #fff); color: var(--tf-app-label-color, #333); cursor: pointer; box-shadow: none;">
+            </select>
+        </div>
+        <div style="text-align: right;">
+            <button style="padding: 0.5rem 1rem; margin-right: 10px; border: 1px solid #6c757d; background: transparent; color: #6c757d; cursor: pointer; border-radius: 8px; font-size: var(--tf-app-font-size-base, 14px);" onclick="closeLanguageModal()">Cancel</button>
+            <button style="padding: 0.5rem 1rem; background-color: var(--tf-primary-color, #2185d0); color: var(--tf-secondary-color, #fff); border: 1px solid var(--tf-primary-color, #2185d0); cursor: pointer; border-radius: 8px; font-size: var(--tf-app-font-size-base, 14px);" onclick="applyLanguage()">Apply</button>
+        </div>
+    </div>
+
     <script>
+        window.openLanguageModal = function () {
+            const tooltip = document.getElementById("moreTooltip");
+            if (tooltip) tooltip.style.display = "none";
+            const overlay = document.getElementById("languageModalOverlay");
+            if (overlay) overlay.style.display = "block";
+            const modal = document.getElementById("languageModal");
+            if (modal) modal.style.display = "block";
+        };
+
+        window.closeLanguageModal = function () {
+            const overlay = document.getElementById("languageModalOverlay");
+            if (overlay) overlay.style.display = "none";
+            const modal = document.getElementById("languageModal");
+            if (modal) modal.style.display = "none";
+        };
+
+        window.applyLanguage = function () {
+            const select = document.getElementById("modalLanguageSelector");
+            if (select && window.changeFormLanguage) {
+                window.changeFormLanguage(select.value);
+            }
+            window.closeLanguageModal();
+        };
+
         function toggleTooltip() {
             try {
                 const tooltip = document.getElementById('moreTooltip');
@@ -43150,6 +43262,12 @@ window.CommentOnBack = CommentOnBack;
             }
         }
 
+        function changeFormLanguage(lang) {
+            if (window.formObj) {
+                window.formObj.language = lang;
+            }
+        }
+
         function openHelpLink() {
             try {
                 const helpUrl = 'https://docs.unvired.com/formsapp/formfill/';