@unvired/turboforms-embed-sdk 2.0.54 → 2.0.56

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;
@@ -41867,6 +41866,93 @@ 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 languageSubMenu = document.getElementById('languageSubMenu');
+      const langMainOption = document.getElementById('languageMainOption');
+      const langDivider = document.getElementById('languageDivider');
+      
+      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
+        );
+        const currentLang = window.FORMIO_LANGUAGE || 'en';
+        if (!languages.includes(currentLang) && typeof window.FORMIO_I18N[currentLang] === 'object') {
+          languages.unshift(currentLang);
+        }
+        
+        const displayNames = new Intl.DisplayNames(['en'], { type: 'language' });
+
+        languages.forEach(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 {
+            displayName = displayNames.of(lang) || displayName;
+          } catch (e) {
+            // Fallback if the language code is invalid
+          }
+          
+          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 (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';
+        }
+      }
+    } 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.");
       return;
@@ -43110,7 +43196,7 @@ window.CommentOnBack = CommentOnBack;
 
     
     <div id="sticky-footer">
-        <div class="build-version">SDK v2.0.54</div>
+        <div class="build-version">SDK v2.0.56</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 +43208,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 +43226,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 +43292,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/';