@unvired/turboforms-embed-sdk 2.0.61 → 2.0.62

package/dist/turboforms.html

@@ -7168,14 +7168,15 @@
     min-width: 50px !important;
 }
 
-/* 7b. Hide inner component labels and control-label--hidden inside DataGrid table body cells */
-.tf-embed-sdk .formio-component-datagrid table tbody td label:not(.form-check-label):not(.custom-control-label),
-.tf-embed-sdk .formio-component-datagrid table tbody td .col-form-label,
-.tf-embed-sdk .formio-component-datagrid table tbody td .control-label--hidden,
-.tf-embed-sdk .formio-component-datagrid table tbody td [ref="label"],
-.tf-embed-sdk .formio-component-datagrid .formio-component-label-hidden label:not(.form-check-label):not(.custom-control-label),
-.tf-embed-sdk .formio-component-datagrid .formio-component-label-hidden .col-form-label,
-.tf-embed-sdk .formio-component-datagrid .formio-component-label-hidden .control-label--hidden {
+/* 7b. Hide component labels ONLY for direct children of DataGrid table body cells (where thead header displays the column title) */
+.tf-embed-sdk .formio-component-datagrid table.datagrid-table > tbody > tr > td > .formio-component > label:not(.form-check-label):not(.custom-control-label),
+.tf-embed-sdk .formio-component-datagrid table.datagrid-table > tbody > tr > td > .formio-component > .col-form-label,
+.tf-embed-sdk .formio-component-datagrid table.datagrid-table > tbody > tr > td > .formio-component > [ref="label"],
+.tf-embed-sdk .formio-component-datagrid table.datagrid-table > tbody > tr > td > .formio-component > .control-label--hidden,
+.tf-embed-sdk .formio-component-datagrid table.datagrid-table > tbody > tr > td > .formio-form-group > label:not(.form-check-label):not(.custom-control-label),
+.tf-embed-sdk .formio-component-datagrid table.datagrid-table > tbody > tr > td > .formio-form-group > .col-form-label,
+.tf-embed-sdk .formio-component-datagrid table.datagrid-table > tbody > tr > td > .formio-form-group > [ref="label"],
+.tf-embed-sdk .formio-component-datagrid table.datagrid-table > tbody > tr > td > .formio-form-group > .control-label--hidden {
     display: none !important;
     margin: 0 !important;
     padding: 0 !important;
@@ -7187,9 +7188,15 @@
     visibility: hidden !important;
 }
 
-/* Remove component vertical margins inside DataGrid cells for tight layout */
-.tf-embed-sdk .formio-component-datagrid table tbody td .formio-form-group,
-.tf-embed-sdk .formio-component-datagrid table tbody td .formio-component {
+/* For explicitly hidden labels (hideLabel: true), hide the label element */
+.tf-embed-sdk .formio-component-label-hidden > label.control-label--hidden,
+.tf-embed-sdk .formio-component-label-hidden > .control-label--hidden {
+    display: none !important;
+}
+
+/* Reset direct component vertical margins inside DataGrid cells for tight layout */
+.tf-embed-sdk .formio-component-datagrid table.datagrid-table > tbody > tr > td > .formio-form-group,
+.tf-embed-sdk .formio-component-datagrid table.datagrid-table > tbody > tr > td > .formio-component {
     margin-top: 0 !important;
     margin-bottom: 0 !important;
 }
@@ -39426,18 +39433,38 @@ function getValueFromData(data, path) {
   return current;
 }
 
+/**
+ * Helper to check if a component instance has an empty value.
+ */
 /**
  * Helper to check if a component instance has an empty value.
  */
 function isComponentEmpty(inst) {
   if (!inst) return true;
-  const val = inst.getValue ? inst.getValue() : inst.dataValue;
+  let val = inst.getValue ? inst.getValue() : inst.dataValue;
+
+  if (val === undefined || val === null || val === "") return true;
+
+  if (Array.isArray(val)) {
+    if (val.length === 0) return true;
+    const hasValidItem = val.some(item => {
+      if (item === undefined || item === null || item === "") return false;
+      if (typeof item === "object" && Object.keys(item).length === 0) return false;
+      return true;
+    });
+    if (!hasValidItem) return true;
+  }
+
+  if (typeof val === "object" && !Array.isArray(val)) {
+    if (Object.keys(val).length === 0) return true;
+    const hasValidVal = Object.values(val).some(v => v !== undefined && v !== null && v !== "" && v !== false);
+    if (!hasValidVal) return true;
+  }
+
   if (inst.isEmpty) {
     return inst.isEmpty(val);
   }
-  if (val === undefined || val === null || val === "") return true;
-  if (Array.isArray(val) && val.length === 0) return true;
-  if (typeof val === "object" && !Array.isArray(val) && Object.keys(val).length === 0) return true;
+
   return false;
 }
 
@@ -39490,10 +39517,44 @@ function clearComponentErrorUI(inst) {
     inst.setCustomValidity("");
   }
   inst.element.classList.remove("has-error", "formio-error-wrapper", "is-invalid");
-  inst.element.querySelectorAll(".is-invalid").forEach((el) => el.classList.remove("is-invalid"));
-  inst.element.querySelectorAll(".formio-errors, .invalid-feedback").forEach((el) => {
-    el.innerHTML = "";
-    el.style.display = "none";
+
+  // Only remove .is-invalid from direct choice or input elements belonging to this component
+  const choices = inst.element.querySelectorAll(".choices__inner, .ui.selection.dropdown, .is-invalid");
+  choices.forEach((el) => {
+    if (el.closest(".formio-component") === inst.element) {
+      el.classList.remove("is-invalid");
+    }
+  });
+
+  // Clear error message container ONLY if it belongs directly to inst.element (not a child component)
+  const errorLabels = inst.element.querySelectorAll(".formio-errors, .invalid-feedback, [ref='messageContainer']");
+  errorLabels.forEach((errorLabel) => {
+    if (errorLabel.closest(".formio-component") === inst.element) {
+      errorLabel.innerHTML = "";
+      errorLabel.style.display = "none";
+    }
+  });
+}
+
+/**
+ * Scans all component instances in the form and clears error UI for any component that has been filled.
+ */
+function clearResolvedErrors(form) {
+  if (!form || typeof form.everyComponent !== "function") return;
+  form.everyComponent((inst) => {
+    if (!inst || !inst.element) return;
+    const compType = inst.component?.type || inst.type;
+    const isContainerType = ["datagrid", "editgrid", "container", "panel", "columns", "fieldset", "well", "tabs", "form"].includes(compType);
+    if (isContainerType) return;
+
+    // Check if this component currently displays error styling
+    const hasErrorClass = inst.element.classList.contains("has-error") || inst.element.classList.contains("formio-error-wrapper");
+    const hasVisibleError = Array.from(inst.element.querySelectorAll(".formio-errors, .invalid-feedback"))
+      .some(el => el.style.display !== "none" && el.innerHTML.trim() !== "" && el.closest(".formio-component") === inst.element);
+
+    if ((hasErrorClass || hasVisibleError) && !isComponentEmpty(inst)) {
+      clearComponentErrorUI(inst);
+    }
   });
 }
 
@@ -39504,13 +39565,17 @@ function showComponentErrorUI(inst, err) {
   if (!inst || !inst.element) return;
   inst.element.classList.add("has-error", "formio-error-wrapper");
   const choices = inst.element.querySelector(".choices__inner, .ui.selection.dropdown");
-  if (choices) choices.classList.add("is-invalid");
+  if (choices && choices.closest(".formio-component") === inst.element) {
+    choices.classList.add("is-invalid");
+  }
 
   const msg = err.message || (err.context?.component?.label ? `${err.context.component.label} is required` : `${inst.component?.label || inst.key} is required`);
   const compId = inst.id || inst.component?.id || inst.key;
   const innerErrorId = `e-${compId}-${inst.key}`;
 
-  let errorLabel = inst.element.querySelector(".formio-errors, [ref='messageContainer']");
+  let errorLabel = Array.from(inst.element.querySelectorAll(".formio-errors, [ref='messageContainer']"))
+    .find(el => el.closest(".formio-component") === inst.element);
+
   if (!errorLabel) {
     errorLabel = document.createElement("div");
     errorLabel.setAttribute("ref", "messageContainer");
@@ -39536,13 +39601,8 @@ function setupOnChange(privateExternal, permission) {
       document.activeElement.blur();
     }
 
-    // Immediately clear error UI for any component that has been filled
-    if (event?.changed?.instance) {
-      const inst = event.changed.instance;
-      if (!isComponentEmpty(inst)) {
-        clearComponentErrorUI(inst);
-      }
-    }
+    // Immediately clear error UI for any filled component across the form (including DataGrid rows)
+    clearResolvedErrors(formObj);
 
     // Clear existing timeout
     if (changeTimeout) {
@@ -41582,7 +41642,7 @@ initThemeHook();
     </div>
 
     <div id="sticky-footer">
-      <div class="build-version">SDK v2.0.61</div>
+      <div class="build-version">SDK v2.0.62</div>
       
       <button class="footer-btn footer-btn-secondary" id="prevBtn" style="display:none" onclick="FormOnPrevious()">
         <i class="bi bi-chevron-left"></i> Previous