@unvired/turboforms-embed-sdk 2.0.55 → 2.0.57

package/dist/turboforms.html

@@ -2444,7 +2444,6 @@
   width: 200px;
   z-index: 1050;
   padding: 8px 0;
-  overflow: hidden;
   animation: sdkFadeInUp 0.2s ease-out;
   display: none;
   flex-direction: column;
@@ -41870,12 +41869,12 @@ async function loadTRform(
     
     // Setup language dropdown if translations are provided
     if (window.FORMIO_I18N && Object.keys(window.FORMIO_I18N).length > 0) {
-      const modalLangSelector = document.getElementById('modalLanguageSelector');
+      const languageSubMenu = document.getElementById('languageSubMenu');
       const langMainOption = document.getElementById('languageMainOption');
       const langDivider = document.getElementById('languageDivider');
       
-      if (modalLangSelector && langMainOption) {
-        modalLangSelector.innerHTML = '';
+      if (languageSubMenu && langMainOption) {
+        languageSubMenu.innerHTML = '';
         
         let languages = Object.keys(window.FORMIO_I18N).filter(lang => 
           typeof window.FORMIO_I18N[lang] === 'object' && window.FORMIO_I18N[lang] !== null
@@ -41883,16 +41882,16 @@ async function loadTRform(
         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;
+          const optionDiv = document.createElement('div');
+          optionDiv.className = langMainOption.className;
+          optionDiv.style.cursor = 'pointer';
+          optionDiv.style.padding = '0.5rem 1rem';
+          optionDiv.style.borderTop = 'none';
           
           let displayName = lang.toUpperCase();
           try {
@@ -41901,27 +41900,58 @@ async function loadTRform(
             // Fallback if the language code is invalid
           }
           
-          option.text = displayName;
-          if (lang === currentLang) option.selected = true;
-          modalLangSelector.appendChild(option);
+          let iconHTML = lang === currentLang ? '<i class="bi bi-check2 text-primary" style="margin-right: 8px;"></i>' : '<i class="bi bi-check2" style="margin-right: 8px; visibility: hidden;"></i>';
+          if (langMainOption.innerHTML.includes('icon chevron')) {
+             iconHTML = lang === currentLang ? '<i class="icon check" style="margin-right: 8px;"></i>' : '<i class="icon check" style="margin-right: 8px; visibility: hidden;"></i>';
+          }
+          
+          optionDiv.innerHTML = `${iconHTML}${displayName}`;
+          
+          optionDiv.onclick = function(e) {
+            e.stopPropagation();
+            if (window.changeFormLanguage) {
+              window.changeFormLanguage(lang);
+              window.FORMIO_LANGUAGE = lang;
+            }
+            
+            const children = languageSubMenu.children;
+            for (let i = 0; i < children.length; i++) {
+              const child = children[i];
+              const icon = child.querySelector('i');
+              if (icon) {
+                if (languages[i] === lang) {
+                  icon.style.visibility = 'visible';
+                  if (icon.className.includes('bi')) icon.classList.add('text-primary');
+                } else {
+                  icon.style.visibility = 'hidden';
+                  if (icon.className.includes('bi')) icon.classList.remove('text-primary');
+                }
+              }
+            }
+            
+            if (window.toggleLanguageSubMenu) window.toggleLanguageSubMenu();
+            
+            if (window.showToast) {
+              window.showToast(`Language set to ${displayName}`, 'success');
+            }
+          };
+          
+          languageSubMenu.appendChild(optionDiv);
         });
 
-        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
-          });
+        if (languages.length > 1) {
+          langMainOption.style.display = langMainOption.className.includes('d-flex') ? 'flex' : 'block';
+          if (langDivider) langDivider.style.display = 'block';
+        } else {
+          langMainOption.style.display = 'none';
+          if (langDivider) langDivider.style.display = 'none';
         }
-        
-        langMainOption.style.display = langMainOption.className.includes('d-flex') ? 'flex' : 'block';
-        if (langDivider) langDivider.style.display = 'block';
       }
+    } else {
+      const langMainOption = document.getElementById('languageMainOption');
+      const langDivider = document.getElementById('languageDivider');
+      if (langMainOption) langMainOption.style.display = 'none';
+      if (langDivider) langDivider.style.display = 'none';
     }
     if (!formObj) {
       logger.error("[TF_SDK:299] ❌ Form not initialized.");
@@ -43166,7 +43196,7 @@ window.CommentOnBack = CommentOnBack;
 
     
     <div id="sticky-footer">
-        <div class="build-version">SDK v2.0.55</div>
+        <div class="build-version">SDK v2.0.57</div>
         <div class="relative-position">
             <button id="unvired-more-btn" class="ui button primary dataGrid-addRow" onclick="toggleTooltip()">
                 <i class="icon options"></i>