@unvired/turboforms-embed-sdk 1.0.22 → 1.0.23

package/README.md

@@ -251,7 +251,9 @@ document.addEventListener('deviceready', function() {
 | `GET_ATTACHMENT` | Attachment request |
 | `ERROR` | Error occurred |
 
-## ✅ Button Visibility & Enablement
+## ✅ Button Visibility & Enablement (Normal Forms)
+
+The following rules apply to standard (non-wizard) forms:
 
 | privateExternal    | Permission      | Main Toolbar Button        | More Options (Dropdown)         | Enable / Disable Rule                              |
 | ------------------ | --------------- | -------------------------- | ------------------------------- | -------------------------------------------------- |
@@ -261,6 +263,18 @@ document.addEventListener('deviceready', function() {
 | **true (Private)** | `writesingle`   | **Complete** (`submitBtn`) | **Save** (`saveOption`)         | Complete enabled **ONLY when form is 100% filled** |
 | **Any**            | `read`          | None                       | None                            | N/A (Read-only mode)                               |
 
+## 🧙 Wizard Form Navigation & Visibility
+
+For Wizard forms, the standard action buttons are managed per-page to prioritize navigation:
+
+| Page Status | Action Buttons (Save/Complete) | Navigation Buttons | Action Menu (More Options) |
+| :--- | :--- | :--- | :--- |
+| **Intermediate Steps** | **Hidden** | **Previous**, **Next** | **Help** / **Comments** (if enabled) |
+| **Final Step** | **Visible** (Follows standard rules above) | **Previous** | **All Actions** (Follows standard rules above) |
+
+* **Intermediate Steps**: To ensure a clean experience, the SDK automatically hides all final submission actions (buttons, icons, and "More" dropdown items) until the user reaches the end of the wizard.
+* **Final Step**: Once the user reaches the last page, the standard logic defined in the table above is applied. The **Next** button is replaced by the appropriate **Save** or **Complete** action based on permissions and form state.
+
 ## 🧭 “More Options” Dropdown Logic
 
 ### ▶ **Complete appears in More Options**

package/dist/unvired-form-sdk.html

@@ -56365,6 +56365,11 @@ class SignatureComponent extends InputComponentForSignature {
         }
         if (this.refs.clicktoSign) {
           this.refs.clicktoSign.disabled = true;
+          this.refs.clicktoSign.style.pointerEvents = 'none';
+          this.refs.clicktoSign.style.display = 'none';
+          
+          const clickBox = this.refs.clicktoSign.closest('.click-to-sign-box');
+          if(clickBox) clickBox.style.display = 'none';
         }
         if (this.refs.signatureImage && this.dataValue) {
           this.refs.signatureImage.setAttribute('src', this.dataValue);
@@ -56376,6 +56381,12 @@ class SignatureComponent extends InputComponentForSignature {
         }
         if (this.refs.clicktoSign) {
           this.refs.clicktoSign.disabled = false;
+          this.refs.clicktoSign.style.pointerEvents = 'auto';
+          if (this.component.isEnableClicktoSign) {
+             this.refs.clicktoSign.style.display = 'inline-flex';
+             const clickBox = this.refs.clicktoSign.closest('.click-to-sign-box');
+             if(clickBox) clickBox.style.display = '';
+          }
         }
       }
     }
@@ -56447,6 +56458,11 @@ class SignatureComponent extends InputComponentForSignature {
       this.refs.refresh.classList.add('disabled');
       if (this.refs.clicktoSign) {
         this.refs.clicktoSign.disabled = true;
+        this.refs.clicktoSign.style.pointerEvents = 'none';
+        this.refs.clicktoSign.style.display = 'none';
+        
+        const clickBox = this.refs.clicktoSign.closest('.click-to-sign-box');
+        if(clickBox) clickBox.style.display = 'none';
       }
     }
 
@@ -59996,7 +60012,7 @@ async function renderRNform(
             }
 
             // Hide FormIO submit button component and wizard buttons in readOnly mode
-            if (mode == "readOnly") {
+            if (mode == "readOnly" || permission == "read") {
                 const submitComponents = document.querySelectorAll(
                     ".formio-component-submit"
                 );
@@ -60004,6 +60020,18 @@ async function renderRNform(
                     component.style.display = "none";
                 });
 
+                // Disable signature pads robustly via CSS
+                if (!document.getElementById("readonly-signature-style")) {
+                    const style = document.createElement("style");
+                    style.id = "readonly-signature-style";
+                    style.innerHTML = `
+                      .formio-component-signature { pointer-events: none !important; }
+                      .formio-component-signature [ref="clicktoSign"],
+                      .formio-component-signature .click-to-sign-box { display: none !important; }
+                    `;
+                    document.head.appendChild(style);
+                }
+
                 // Hide wizard navigation buttons
                 const wizardNextBtns = document.querySelectorAll(
                     ".btn-wizard-nav-next"
@@ -60687,7 +60715,7 @@ window.CommentOnBack = CommentOnBack;
 
     
     <div id="sticky-footer">
-        <div class="build-version">SDK v1.0.22</div>
+        <div class="build-version">SDK v1.0.23</div>
         <div class="relative-position">
             <button id="unvired-more-btn" class="ui button primary dataGrid-addRow" onclick="toggleTooltip()">
                 <i class="icon options"></i>

package/dist/unvired-forms-sdk.js

@@ -27922,14 +27922,20 @@ select.ui.dropdown {
       <div id="formio-cmt" style="margin-bottom: 20px;"></div>
     </div>
     <div id="sticky-footer">
-      <div class="build-version">SDK v1.0.22</div>
+      <div class="build-version">SDK v1.0.23</div>
       <button class="ui button primary dataGrid-addRow" id="saveBtn" disabled="true" onclick="FormOnSave()">
         <i class="icon save large"></i>Save
       </button>
+      <button class="ui button secondary dataGrid-addRow" id="prevBtn" style="display:none" onclick="FormOnPrevious()">
+        <i class="icon arrow left"></i>Previous
+      </button>
+      <button class="ui button primary dataGrid-addRow" id="nextBtn" style="display:none" onclick="FormOnNext()">
+        Next<i class="icon arrow right"></i>
+      </button>
       <button class="ui button primary dataGrid-addRow" id="submitBtn" style="display:none" onclick="FormOnSubmit()">
         <i class="icon save large"></i>Submit
       </button>
-      
+
       <!-- Quick Action Buttons -->
       <div id="quick-actions" style="display: flex; align-items: center;">
          <i id="quickCompleteBtn" class="icon clipboard check large" style="display:none; cursor: pointer; margin: 0 10px;" onclick="FormOnSubmit()" title="Complete"></i>
@@ -28078,6 +28084,16 @@ select.ui.dropdown {
       window.formOnSubmitFunction();
     }
   };
+  window.FormOnNext = window.FormOnNext || function() {
+    if (typeof window.formOnNextFunction === "function") {
+      window.formOnNextFunction();
+    }
+  };
+  window.FormOnPrevious = window.FormOnPrevious || function() {
+    if (typeof window.formOnPreviousFunction === "function") {
+      window.formOnPreviousFunction();
+    }
+  };
   const scriptContents = `
     // Global variable initialization
     window.form = window.form || {};
@@ -63598,6 +63614,11 @@ class SignatureComponent extends InputComponentForSignature {
         }
         if (this.refs.clicktoSign) {
           this.refs.clicktoSign.disabled = true;
+          this.refs.clicktoSign.style.pointerEvents = 'none';
+          this.refs.clicktoSign.style.display = 'none';
+          
+          const clickBox = this.refs.clicktoSign.closest('.click-to-sign-box');
+          if(clickBox) clickBox.style.display = 'none';
         }
         if (this.refs.signatureImage && this.dataValue) {
           this.refs.signatureImage.setAttribute('src', this.dataValue);
@@ -63609,6 +63630,12 @@ class SignatureComponent extends InputComponentForSignature {
         }
         if (this.refs.clicktoSign) {
           this.refs.clicktoSign.disabled = false;
+          this.refs.clicktoSign.style.pointerEvents = 'auto';
+          if (this.component.isEnableClicktoSign) {
+             this.refs.clicktoSign.style.display = 'inline-flex';
+             const clickBox = this.refs.clicktoSign.closest('.click-to-sign-box');
+             if(clickBox) clickBox.style.display = '';
+          }
         }
       }
     }
@@ -63680,6 +63707,11 @@ class SignatureComponent extends InputComponentForSignature {
       this.refs.refresh.classList.add('disabled');
       if (this.refs.clicktoSign) {
         this.refs.clicktoSign.disabled = true;
+        this.refs.clicktoSign.style.pointerEvents = 'none';
+        this.refs.clicktoSign.style.display = 'none';
+        
+        const clickBox = this.refs.clicktoSign.closest('.click-to-sign-box');
+        if(clickBox) clickBox.style.display = 'none';
       }
     }
 
@@ -66567,6 +66599,8 @@ function FormOnBackNavigation() {
 function initialButtonSetup(privateExternal, permission) {
   const saveBtn = document.getElementById("saveBtn");
   const submitBtn = document.getElementById("submitBtn");
+  const prevBtn = document.getElementById("prevBtn");
+  const nextBtn = document.getElementById("nextBtn");
   const completeOption = document.getElementById("completeOption");
   const saveOption = document.getElementById("saveOption");
   const completeDivider = document.getElementById("completeDivider");
@@ -66672,6 +66706,7 @@ function initialButtonSetup(privateExternal, permission) {
   }
 }
 
+
 function onChangeButtonSetup(
   completionPercentage,
   formData,
@@ -66680,6 +66715,8 @@ function onChangeButtonSetup(
 ) {
   const saveBtn = document.getElementById("saveBtn");
   const submitBtn = document.getElementById("submitBtn");
+  const prevBtn = document.getElementById("prevBtn");
+  const nextBtn = document.getElementById("nextBtn");
   if (!saveBtn || !submitBtn) return;
 
   const isPrivate = privateExternal === true || privateExternal === "true";
@@ -67042,6 +67079,11 @@ async function loadRNform(
       .then(() => {
         console.log("[FormIO] \u{1F680} formReady.then() triggered");
 
+        // Handle Navigation and Button Hiding (Wizard-specific logic separated)
+        if (typeof window.initializeWizardLogic === "function") {
+          window.initializeWizardLogic(formObj, privateExternal, permission);
+        }
+
         if (formPreviousData) {
           console.log("[FormIO] \u{1F4E6} Previous form data found:", formPreviousData);
 
@@ -67063,7 +67105,7 @@ async function loadRNform(
         console.log("[FormIO] \u2705 Progress calculation completed");
 
         // Hide FormIO submit button component and wizard buttons in readOnly mode
-        if (mode == "readOnly") {
+        if (mode == "readOnly" || permission == "read") {
           console.log("[FormIO] \u{1F512} ReadOnly mode detected");
 
           const submitComponents = document.querySelectorAll(
@@ -67078,41 +67120,17 @@ async function loadRNform(
             console.log(\`[FormIO] Hidden submit component \${index + 1}\`);
           });
 
-          const wizardNextBtns = document.querySelectorAll(
-            ".btn-wizard-nav-next"
-          );
-          console.log(
-            \`[FormIO] Found \${wizardNextBtns.length} wizard next buttons\`
-          );
-
-          wizardNextBtns.forEach((btn, index) => {
-            btn.style.display = "none";
-            console.log(\`[FormIO] Hidden wizard next button \${index + 1}\`);
-          });
-
-          const wizardSubmitBtns = document.querySelectorAll(
-            ".btn-wizard-nav-submit"
-          );
-          console.log(
-            \`[FormIO] Found \${wizardSubmitBtns.length} wizard submit buttons\`
-          );
-
-          wizardSubmitBtns.forEach((btn, index) => {
-            btn.style.display = "none";
-            console.log(\`[FormIO] Hidden wizard submit button \${index + 1}\`);
-          });
-
-          const wizardPrevBtns = document.querySelectorAll(
-            ".btn-wizard-nav-previous"
-          );
-          console.log(
-            \`[FormIO] Found \${wizardPrevBtns.length} wizard previous buttons\`
-          );
-
-          wizardPrevBtns.forEach((btn, index) => {
-            btn.style.display = "none";
-            console.log(\`[FormIO] Hidden wizard previous button \${index + 1}\`);
-          });
+          // Disable signature components robustly via CSS
+          if (!document.getElementById("readonly-signature-style")) {
+            const style = document.createElement("style");
+            style.id = "readonly-signature-style";
+            style.innerHTML = \`
+              .formio-component-signature { pointer-events: none !important; }
+              .formio-component-signature [ref="clicktoSign"],
+              .formio-component-signature .click-to-sign-box { display: none !important; }
+            \`;
+            document.head.appendChild(style);
+          }
         } else {
           console.log("[FormIO] \u{1F513} Editable mode detected");
         }
@@ -67290,13 +67308,16 @@ function buildMandatoryFieldsCache() {
   return cache;
 }
 
-function executeProgressCalculation(privateExternal, permission) {
+window.executeProgressCalculation = function(privateExternal, permission) {
   if (!formObj) return;
 
   const data = formObj.data || {};
   const dataHash = JSON.stringify(data);
+  const isWizard = formObj && !!formObj.wizard;
 
-  if (dataHash === lastDataHash) return;
+  // For wizards, we must always proceed even if data is same, 
+  // because button visibility depends on the current page.
+  if (!isWizard && dataHash === lastDataHash) return;
   lastDataHash = dataHash;
 
   const mandatoryFields = buildMandatoryFieldsCache();
@@ -67398,6 +67419,11 @@ function executeProgressCalculation(privateExternal, permission) {
     permission
   );
 
+  // After setting up standard button visibility, override with wizard rules if applicable
+  if (typeof window.updateWizardNav === "function") {
+    window.updateWizardNav(formObj);
+  }
+
   // Update progress bar
   const progressBar = document.getElementById("progress-bar");
   if (progressBar) {
@@ -67740,18 +67766,19 @@ window.checkMoreButtonVisibility = function () {
   //    For documentsOption, its display is managed by logic.
   //    For comments/help, they are often just static items toggled.
 
-  const isVisible = (el) => el && el.style.display !== "none";
-
-  // Assuming options.showComments/Help also imply the item SHOULD be visible if logic permits
-  // But logic might hide them. The 'isVisible' check handles dynamic logic.
-  // But for comments/help, they might be hidden initially.
+  const isVisible = (el, optionKey) => {
+    if (!el) return false;
+    // If it's a static item like Help or Comments, check the options as well
+    if (optionKey && options[optionKey] === true) return true;
+    return el.style.display !== "none";
+  };
 
   const hasVisibleItems =
     isVisible(completeOption) ||
     isVisible(saveOption) ||
     isVisible(documentsOption) ||
-    isVisible(commentsItem) ||
-    isVisible(helpItem); // Simplified: check actual DOM state
+    isVisible(commentsItem, "showComments") ||
+    isVisible(helpItem, "showHelp"); // Simplified: check actual DOM state + options
 
   // If ANY item is visible, show the button. Otherwise hide.
   if (hasVisibleItems) {
@@ -67769,6 +67796,28 @@ window.FormOnSave = FormOnSave;
 window.FormOnBack = FormOnBack;
 window.setImageData = setImageData;
 window.FormOnSubmit = FormOnSubmit;
+window.FormOnNext = function () {
+  if (formObj && typeof formObj.nextPage === "function") {
+    formObj.nextPage().then(() => {
+      if (typeof window.updateWizardNav === "function") {
+        window.updateWizardNav(formObj);
+      }
+    });
+  }
+};
+
+window.FormOnPrevious = function () {
+  if (formObj && typeof formObj.prevPage === "function") {
+    formObj.prevPage().then(() => {
+      if (typeof window.updateWizardNav === "function") {
+        window.updateWizardNav(formObj);
+      }
+    });
+  }
+};
+
+window.formOnSubmitFunction = FormOnSubmit;
+
 window.resetFormCache = resetFormCache;
 
 // Notify that loadRNform is ready (for event-based coordination)
@@ -67778,6 +67827,174 @@ document.dispatchEvent(new CustomEvent('LoadRNformReady'));
 
 // === SCRIPT_SEPARATOR ===
 
+(function(){
+/**
+ * Wizard Navigation Logic for Unvired Forms
+ * This file handles all logic specific to Form.io wizard forms,
+ * including navigation button visibility and event handling.
+ */
+
+/**
+ * Updates the visibility of navigation buttons (Next, Previous, Submit)
+ * based on the current wizard page and form type.
+ * 
+ * @param {Object} formObj - The Form.io form instance
+ */
+function updateWizardNav(formObj) {
+  if (!formObj) return;
+
+  // 1. Hide default navigation and buttons (Next, Previous, Cancel, Submit)
+  // This ensures that we only use our own footer buttons
+  const selectorsToHide = [
+    '.formio-component-wizard_nav',
+    '.btn-wizard-nav-next',
+    '.btn-wizard-nav-previous',
+    '.btn-wizard-nav-cancel',
+    '.btn-wizard-nav-submit'
+  ];
+
+  selectorsToHide.forEach(selector => {
+    const elements = formObj.element.querySelectorAll(selector);
+    elements.forEach(el => {
+      el.style.display = "none";
+    });
+  });
+
+  // 2. Hide components from JSON that match navigation actions
+  if (typeof formObj.eachComponent === 'function') {
+    formObj.eachComponent((component) => {
+      if (component.type === 'button') {
+        const action = (component.component.action || '').toLowerCase();
+        const label = (component.component.label || '').toLowerCase();
+
+        if (action === 'next' || action === 'previous' || action === 'cancel' ||
+          label === 'next' || label === 'previous' || label === 'cancel') {
+          // Hide both the component instance and its DOM element
+          component.visible = false;
+          if (component.element) {
+            component.element.style.display = 'none';
+          }
+        }
+      }
+    });
+  }
+
+  // 3. Handle Footer Navigation Toggling (Only for Wizards)
+  if (!formObj.wizard) return;
+
+  const prevBtn = document.getElementById("prevBtn");
+  const nextBtn = document.getElementById("nextBtn");
+  const submitBtn = document.getElementById("submitBtn");
+  const saveBtn = document.getElementById("saveBtn");
+
+  const currentPage = formObj.page || 0;
+  const numPages = (formObj.pages && formObj.pages.length) || 0;
+  const isLastPage = (currentPage >= numPages - 1);
+
+  console.log(\`[WizardLogic] \u{1F9ED} Page: \${currentPage + 1}/\${numPages}, isLastPage: \${isLastPage}\`);
+
+  if (prevBtn) {
+    prevBtn.style.display = currentPage > 0 ? "inline-block" : "none";
+  }
+
+  if (nextBtn) {
+    nextBtn.style.display = currentPage < numPages - 1 ? "inline-block" : "none";
+  }
+
+  // If it's a wizard, we only want the save and submit buttons on the last page.
+  // If it's NOT the last page, we force hide them.
+  // If it IS the last page, we let the normal logic (onChangeButtonSetup) decide.
+  if (!isLastPage) {
+    console.log("[WizardLogic] \u{1F512} Intermediate page: Hiding save/complete actions");
+    if (submitBtn) submitBtn.style.display = "none";
+    if (saveBtn) saveBtn.style.display = "none";
+
+    // Hide dropdown options as well
+    const completeOption = document.getElementById("completeOption");
+    const saveOption = document.getElementById("saveOption");
+    const completeDivider = document.getElementById("completeDivider");
+    const saveDivider = document.getElementById("saveDivider");
+
+    if (completeOption) completeOption.style.display = "none";
+    if (saveOption) saveOption.style.display = "none";
+    if (completeDivider) completeDivider.style.display = "none";
+    if (saveDivider) saveDivider.style.display = "none";
+
+    // Also hide quick action buttons if they exist
+    const quickCompleteBtn = document.getElementById("quickCompleteBtn");
+    const quickSaveBtn = document.getElementById("quickSaveBtn");
+    if (quickCompleteBtn) quickCompleteBtn.style.display = "none";
+    if (quickSaveBtn) quickSaveBtn.style.display = "none";
+
+    // Re-check More button visibility after hiding items
+    if (typeof window.checkMoreButtonVisibility === "function") {
+      window.checkMoreButtonVisibility();
+    }
+  } else {
+    console.log("[WizardLogic] \u{1F513} Last page: Allowing normal button logic to take over");
+    // On the last page, we MUST ensure the More button visibility is re-evaluated
+    // because it might have been hidden on the previous page.
+    if (typeof window.checkMoreButtonVisibility === "function") {
+      window.checkMoreButtonVisibility();
+    }
+  }
+}
+
+/**
+ * Sets up event listeners for wizard-specific events like page changes.
+ * 
+ * @param {Object} formObj - The Form.io form instance
+ * @param {Boolean} privateExternal - Private/External flag
+ * @param {String} permission - User permission level
+ */
+function setupWizardEvents(formObj, privateExternal, permission) {
+  if (!formObj) return;
+
+  if (formObj.wizard) {
+    formObj.on('nextPage', () => {
+      updateWizardNav(formObj);
+      // Trigger progress calculation on page change
+      if (typeof window.executeProgressCalculation === 'function') {
+        window.executeProgressCalculation(privateExternal, permission);
+      }
+    });
+    formObj.on('prevPage', () => {
+      updateWizardNav(formObj);
+      // Trigger progress calculation on page change
+      if (typeof window.executeProgressCalculation === 'function') {
+        window.executeProgressCalculation(privateExternal, permission);
+      }
+    });
+  }
+
+  // Always handle render event to ensure buttons stay hidden
+  formObj.on('render', () => {
+    updateWizardNav(formObj);
+  });
+}
+
+window.updateWizardNav = updateWizardNav;
+
+/**
+ * Main initialization function for wizard logic.
+ * Should be called after the Form.io form is created.
+ */
+window.initializeWizardLogic = function(formObj, privateExternal, permission) {
+  console.log("[WizardLogic] \u{1F9D9} Initializing wizard-specific logic...");
+  setupWizardEvents(formObj, privateExternal, permission);
+
+  // Also listen for change events to update nav (e.g. if pages are conditionally hidden)
+  formObj.on('change', () => {
+    updateWizardNav(formObj);
+  });
+
+  updateWizardNav(formObj);
+};
+
+})();
+
+// === SCRIPT_SEPARATOR ===
+
 (function(){
 async function loadCommentsform(
   template,
@@ -68300,7 +68517,7 @@ window.deleteAppDocument = async function(id) {
 window.getAllDocuments = getAllDocuments;
 window.hasDocuments = hasDocuments;
 function getBuildVersion() {
-  return "1.0.22";
+  return "1.0.23";
 }
 export {
   getBuildVersion,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unvired/turboforms-embed-sdk",
-  "version": "1.0.22",
+  "version": "1.0.23",
   "description": "Reusable vanilla JS form library that works with React, Angular, Ionic, etc.",
   "main": "dist/unvired-forms-sdk.js",
   "types": "dist/index.d.ts",