@unvired/turboforms-embed-sdk 2.0.59 → 2.0.61

package/dist/turboforms.html

@@ -7168,12 +7168,30 @@
     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 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 {
+    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;
+}
+
+/* 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 {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
 }
 
 /* 8. Responsive Table Equality and Rescue */
@@ -7193,17 +7211,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 +32379,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 +32423,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 +32478,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 +33128,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 +34586,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 +34624,7 @@ class SmartSelectComponent extends SmartSelectField {
           : value;
     }
 
-    if (_.isString(value)) {
+    if (_.isString(value) && this.component.dataSrc !== 'masterdata') {
       return value;
     }
     const getTemplateValue = (v) => {
@@ -39009,11 +39064,11 @@ async function loadTRform(
         if (sdkLoader) {
           logger.info("[TF_SDK:312] ✅ Loader found, hiding...");
           sdkLoader.classList.add("hidden");
-          document.querySelectorAll('.tf-form-loading').forEach(el => el.classList.remove('tf-form-loading'));
           logger.info("[TF_SDK:313] ✅ Loader hidden");
         } else {
           logger.warn("[TF_SDK:314] ✅ Loader element not found");
         }
+        document.querySelectorAll('.tf-form-loading').forEach(el => el.classList.remove('tf-form-loading'));
 
         // Dispatch custom event
         logger.info("[TF_SDK:315] ✅ Dispatching FormRenderingComplete event...");
@@ -39377,9 +39432,52 @@ function getValueFromData(data, path) {
 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));
+  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;
+}
+
+/**
+ * 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;
 }
 
 /**
@@ -39597,21 +39695,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 +41582,7 @@ initThemeHook();
     </div>
 
     <div id="sticky-footer">
-      <div class="build-version">SDK v2.0.59</div>
+      <div class="build-version">SDK v2.0.61</div>
       
       <button class="footer-btn footer-btn-secondary" id="prevBtn" style="display:none" onclick="FormOnPrevious()">
         <i class="bi bi-chevron-left"></i> Previous
@@ -41962,6 +42070,9 @@ initThemeHook();
 
             if (showLoader && sdkLoader) {
                 sdkLoader.classList.remove('hidden');
+            } else {
+                if (sdkLoader) sdkLoader.classList.add('hidden');
+                document.querySelectorAll('.tf-form-loading').forEach(el => el.classList.remove('tf-form-loading'));
             }
 
             if (language) window.FORMIO_LANGUAGE = language;