@unvired/turboforms-embed-sdk 2.0.60 → 2.0.62

package/dist/turboforms.html

@@ -7168,12 +7168,37 @@
     min-width: 50px !important;
 }
 
-/* 7b. Truncate long labels in DataGrid to prevent horizontal bloat */
-.tf-embed-sdk .formio-component-datagrid .col-form-label {
-    max-width: 100% !important;
-    overflow: hidden !important;
-    text-overflow: ellipsis !important;
-    white-space: nowrap !important;
+/* 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;
+    height: 0 !important;
+    min-height: 0 !important;
+    line-height: 0 !important;
+    font-size: 0 !important;
+    border: none !important;
+    visibility: hidden !important;
+}
+
+/* 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;
 }
 
 /* 8. Responsive Table Equality and Rescue */
@@ -7193,17 +7218,6 @@
 .tf-embed-sdk .table td .formio-component {
     width: 100% !important;
     max-width: 100% !important;
-}
-
-/* Ensure labels inside table cells don't break the responsive horizontal layout */
-.tf-embed-sdk .table td label:not(.custom-control-label) {
-    max-width: 100% !important;
-    word-break: break-word !important;
-    white-space: normal !important;
-    line-height: 1.1 !important;
-    font-size: 0.75rem !important;
-    margin-bottom: 2px !important;
-    display: block !important;
 }</style>
     <style>/* TABS RENDERER - UI NORMALIZATION */
 
@@ -32372,7 +32386,38 @@ class SmartSelectComponent extends SmartSelectField {
   isEntireObjectDisplay() {
     return this.component.dataSrc === 'resource' && this.valueProperty === 'data';
   }
+  findMasterdataItem(val) {
+    if (!this.component.masterdata || val == null) return null;
+    const valStr = String(val);
+    const valProp = this.component.valueProperty || this.valueProperty;
+    return this.component.masterdata.find(item => {
+      if (!item || typeof item !== 'object') return false;
+      if (valProp) {
+        let pVal = _.get(item, valProp);
+        if (pVal !== undefined && pVal !== null && String(pVal) === valStr) return true;
+        if (valProp.startsWith('data.')) {
+          pVal = _.get(item, valProp.replace(/^data\./, ''));
+          if (pVal !== undefined && pVal !== null && String(pVal) === valStr) return true;
+        }
+        if (item[valProp] !== undefined && item[valProp] !== null && String(item[valProp]) === valStr) return true;
+      }
+      const raw = item.data || item;
+      for (const k of Object.keys(raw)) {
+        if (/id$/i.test(k) || k === 'value' || k === '_id' || k === 'id') {
+          if (raw[k] !== undefined && raw[k] !== null && String(raw[k]) === valStr) {
+            return true;
+          }
+        }
+      }
+      return false;
+    });
+  }
+
   selectValueAndLabel(data) {
+    if ((typeof data === 'string' || typeof data === 'number') && this.component.dataSrc === 'masterdata' && this.component.masterdata) {
+      const matched = this.findMasterdataItem(data);
+      if (matched) data = matched;
+    }
     const value = this.getOptionValue((this.isEntireObjectDisplay() && !this.itemValue(data)) ? data : this.itemValue(data));
     return {
       value,
@@ -32385,8 +32430,13 @@ class SmartSelectComponent extends SmartSelectField {
       return '';
     }
 
+    if ((typeof data === 'string' || typeof data === 'number') && this.component.dataSrc === 'masterdata' && this.component.masterdata) {
+      const matched = this.findMasterdataItem(data);
+      if (matched) data = matched;
+    }
+
     // If they wish to show the value in read only mode, then just return the itemValue here.
-    if (this.options.readOnly && this.component.readOnlyValue) {
+    if (this.options.readOnly && this.component.readOnlyValue && !this.component.template && !this.component.labelProperty) {
       return this.itemValue(data);
     }
     // Perform a fast interpretation if we should not use the template.
@@ -32435,7 +32485,7 @@ class SmartSelectComponent extends SmartSelectField {
     }
 
     let templateData = data;
-    if (typeof data === 'object' && !data.data && this.component.template && this.component.template.indexOf('item.data.') !== -1) {
+    if (typeof data === 'object' && data !== null && !data.data) {
       templateData = Object.assign({ data: data }, data);
     }
 
@@ -33085,11 +33135,8 @@ class SmartSelectComponent extends SmartSelectField {
       case 'masterdata':
         logger.info(`[TF_SDK:181] ✅ masterdata case for '${this.key}'. masterdata length:`, this.filteredMasterdata ? this.filteredMasterdata.length : 0);
         let safeMasterData = this.filteredMasterdata || [];
-        if (safeMasterData.length > 0 && !safeMasterData[0].data) {
-          const expectsData = (this.component.template && this.component.template.includes('item.data.')) || (this.component.valueProperty && this.component.valueProperty.startsWith('data.'));
-          if (expectsData) {
-            safeMasterData = safeMasterData.map(item => Object.assign({ data: item }, item));
-          }
+        if (safeMasterData.length > 0) {
+          safeMasterData = safeMasterData.map(item => (item && typeof item === 'object' && !item.data) ? Object.assign({ data: item }, item) : item);
         }
 
         if (!this.isFromSearch && !this.isScrollLoading && !this.component.dropdownOpened) {
@@ -34546,6 +34593,21 @@ class SmartSelectComponent extends SmartSelectField {
 
     value = convertToString(value);
 
+    if (this.component.dataSrc === 'masterdata' && this.component.masterdata) {
+      const convertMasterdata = (v) => {
+        if (typeof v === 'string' || typeof v === 'number') {
+          const matched = this.findMasterdataItem(v);
+          return matched || v;
+        }
+        return v;
+      };
+      if (Array.isArray(value)) {
+        value = value.map(convertMasterdata);
+      } else if (value != null) {
+        value = convertMasterdata(value);
+      }
+    }
+
     if (['values', 'custom'].includes(this.component.dataSrc) && !this.asyncCustomValues()) {
       const {
         items,
@@ -34569,7 +34631,7 @@ class SmartSelectComponent extends SmartSelectField {
           : value;
     }
 
-    if (_.isString(value)) {
+    if (_.isString(value) && this.component.dataSrc !== 'masterdata') {
       return value;
     }
     const getTemplateValue = (v) => {
@@ -39371,15 +39433,78 @@ 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;
-  return inst.isEmpty
-    ? inst.isEmpty(val)
-    : (val === undefined || val === null || val === "" || (Array.isArray(val) && val.length === 0));
+  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);
+  }
+
+  return false;
+}
+
+/**
+ * Helper to retrieve the exact component instance associated with an error,
+ * including specific row instances inside DataGrids/EditGrids.
+ */
+function getComponentByError(form, err) {
+  if (!form || !err) return null;
+
+  // 1. Direct component instance reference on error object
+  if (err.component && err.component.element) {
+    return err.component;
+  }
+
+  // 2. Try exact path (e.g., "dataGrid[0].crewLead", "dataGrid.0.crewLead")
+  const path = err.path || err.context?.path || err.context?.hasPath;
+  if (path) {
+    let inst = typeof form.getComponent === "function" ? form.getComponent(path) : null;
+    if (inst && inst.element) return inst;
+
+    // Convert array notation dataGrid[0].crewLead -> dataGrid.0.crewLead
+    const dotPath = String(path).replace(/\[(\d+)\]/g, ".$1");
+    inst = typeof form.getComponent === "function" ? form.getComponent(dotPath) : null;
+    if (inst && inst.element) return inst;
+
+    // Convert dot notation dataGrid.0.crewLead -> dataGrid[0].crewLead
+    const bracketPath = String(path).replace(/\.(\d+)\./g, "[$1].");
+    inst = typeof form.getComponent === "function" ? form.getComponent(bracketPath) : null;
+    if (inst && inst.element) return inst;
+  }
+
+  // 3. Fallback to component key
+  const key = err.context?.component?.key || err.component?.key || (typeof err.context?.component === "string" ? err.context.component : null);
+  if (key && typeof form.getComponent === "function") {
+    const inst = form.getComponent(key);
+    if (inst && inst.element) return inst;
+  }
+
+  return null;
 }
 
 /**
@@ -39392,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);
+    }
   });
 }
 
@@ -39406,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");
@@ -39438,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) {
@@ -39597,21 +39755,31 @@ function FormOnComplete() {
       let isTrulyInvalid = false;
       let trueErrors = [];
 
-      if (formObj && formObj.errors && formObj.errors.length > 0) {
-        formObj.errors.forEach((err) => {
-          if (err.context && err.context.component) {
-            const inst = formObj.getComponent(err.context.component.key);
-            if (inst && inst.element) {
-              if (!isComponentEmpty(inst)) {
-                clearComponentErrorUI(inst);
-              } else {
-                isTrulyInvalid = true;
-                trueErrors.push(err);
-                showComponentErrorUI(inst, err);
-              }
+      // Combine errors from formObj.errors, error (promise reject), error.errors, error.details
+      let rawErrors = [];
+      if (formObj && Array.isArray(formObj.errors) && formObj.errors.length > 0) {
+        rawErrors = rawErrors.concat(formObj.errors);
+      }
+      if (Array.isArray(error)) {
+        rawErrors = rawErrors.concat(error);
+      } else if (error && Array.isArray(error.errors)) {
+        rawErrors = rawErrors.concat(error.errors);
+      } else if (error && Array.isArray(error.details)) {
+        rawErrors = rawErrors.concat(error.details);
+      } else if (error && typeof error === "object" && (error.message || error.context)) {
+        rawErrors.push(error);
+      }
+
+      if (rawErrors.length > 0) {
+        rawErrors.forEach((err) => {
+          const inst = getComponentByError(formObj, err);
+          if (inst && inst.element) {
+            if (!isComponentEmpty(inst)) {
+              clearComponentErrorUI(inst);
             } else {
               isTrulyInvalid = true;
               trueErrors.push(err);
+              showComponentErrorUI(inst, err);
             }
           } else {
             isTrulyInvalid = true;
@@ -41474,7 +41642,7 @@ initThemeHook();
     </div>
 
     <div id="sticky-footer">
-      <div class="build-version">SDK v2.0.60</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