@wavemaker-ai/react-codegen 1.0.0-rc.309 → 1.0.0-rc.314

package/dist/transpiler/index.mjs

@@ -3375,7 +3375,7 @@ var require_lodash = __commonJS({
           }).sort(compareAscending));
           return result2;
         });
-        function remove3(array, predicate) {
+        function remove(array, predicate) {
           var result2 = [];
           if (!(array && array.length)) {
             return result2;
@@ -3670,7 +3670,7 @@ var require_lodash = __commonJS({
           depth = depth === undefined2 ? 1 : toInteger(depth);
           return baseFlatten(map(collection, iteratee2), depth);
         }
-        function forEach5(collection, iteratee2) {
+        function forEach4(collection, iteratee2) {
           var func = isArray2(collection) ? arrayEach : baseEach;
           return func(collection, getIteratee(iteratee2, 3));
         }
@@ -4678,7 +4678,7 @@ var require_lodash = __commonJS({
           }
           string = toString(string);
           options = assignInWith({}, options, settings, customDefaultsAssignIn);
-          var imports111 = assignInWith({}, options.imports, settings.imports, customDefaultsAssignIn), importsKeys = keys2(imports111), importsValues = baseValues(imports111, importsKeys);
+          var imports102 = assignInWith({}, options.imports, settings.imports, customDefaultsAssignIn), importsKeys = keys2(imports102), importsValues = baseValues(imports102, importsKeys);
           var isEscaping, isEvaluating, index = 0, interpolate = options.interpolate || reNoMatch, source = "__p += '";
           var reDelimiters = RegExp2(
             (options.escape || reNoMatch).source + "|" + interpolate.source + "|" + (interpolate === reInterpolate ? reEsTemplate : reNoMatch).source + "|" + (options.evaluate || reNoMatch).source + "|$",
@@ -5119,7 +5119,7 @@ var require_lodash = __commonJS({
         lodash.rangeRight = rangeRight;
         lodash.rearg = rearg;
         lodash.reject = reject;
-        lodash.remove = remove3;
+        lodash.remove = remove;
         lodash.rest = rest;
         lodash.reverse = reverse;
         lodash.sampleSize = sampleSize;
@@ -5201,7 +5201,7 @@ var require_lodash = __commonJS({
         lodash.findLastIndex = findLastIndex;
         lodash.findLastKey = findLastKey;
         lodash.floor = floor;
-        lodash.forEach = forEach5;
+        lodash.forEach = forEach4;
         lodash.forEachRight = forEachRight;
         lodash.forIn = forIn;
         lodash.forInRight = forInRight;
@@ -5324,7 +5324,7 @@ var require_lodash = __commonJS({
         lodash.uniqueId = uniqueId;
         lodash.upperCase = upperCase;
         lodash.upperFirst = upperFirst2;
-        lodash.each = forEach5;
+        lodash.each = forEach4;
         lodash.eachRight = forEachRight;
         lodash.first = head;
         mixin(lodash, (function() {
@@ -16946,8 +16946,8 @@ var require_he = __commonJS({
       var parseError = function(message) {
         throw Error("Parse error: " + message);
       };
-      var encode3 = function(string, options) {
-        options = merge3(options, encode3.options);
+      var encode2 = function(string, options) {
+        options = merge3(options, encode2.options);
         var strict = options.strict;
         if (strict && regexInvalidRawCodePoint.test(string)) {
           parseError("forbidden code point");
@@ -16994,7 +16994,7 @@ var require_he = __commonJS({
           return escapeCodePoint(codePoint);
         }).replace(regexBmpWhitelist, escapeBmpSymbol);
       };
-      encode3.options = {
+      encode2.options = {
         "allowUnsafeSymbols": false,
         "encodeEverything": false,
         "strict": false,
@@ -17072,7 +17072,7 @@ var require_he = __commonJS({
       };
       var he = {
         "version": "1.2.0",
-        "encode": encode3,
+        "encode": encode2,
         "decode": decode,
         "escape": escape,
         "unescape": decode
@@ -18039,10 +18039,10 @@ var require_lib4 = __commonJS({
       return (!level || level <= 0 ? decode_1.decodeXML : decode_1.decodeHTMLStrict)(data);
     }
     exports$1.decodeStrict = decodeStrict;
-    function encode3(data, level) {
+    function encode2(data, level) {
       return (!level || level <= 0 ? encode_1.encodeXML : encode_1.encodeHTML)(data);
     }
-    exports$1.encode = encode3;
+    exports$1.encode = encode2;
     var encode_2 = require_encode();
     Object.defineProperty(exports$1, "encodeXML", { enumerable: true, get: function() {
       return encode_2.encodeXML;
@@ -22223,7 +22223,7 @@ var require_lib9 = __commonJS({
       level: "all",
       numeric: "decimal"
     };
-    function encode3(text, _a) {
+    function encode2(text, _a) {
       var _b = _a === void 0 ? defaultEncodeOptions : _a, _c = _b.mode, mode = _c === void 0 ? "specialChars" : _c, _d = _b.numeric, numeric = _d === void 0 ? "decimal" : _d, _e = _b.level, level = _e === void 0 ? "all" : _e;
       if (!text) {
         return "";
@@ -22258,7 +22258,7 @@ var require_lib9 = __commonJS({
       }
       return _c;
     }
-    exports$1.encode = encode3;
+    exports$1.encode = encode2;
     var defaultDecodeOptions = {
       scope: "body",
       level: "all"
@@ -27034,7 +27034,7 @@ var R3JitReflector = class {
   }
 };
 function compileNgModule(meta) {
-  const { internalType, bootstrap, declarations, imports: imports111, exports: exports$1, schemas, containsForwardDecls, id } = meta;
+  const { internalType, bootstrap, declarations, imports: imports102, exports: exports$1, schemas, containsForwardDecls, id } = meta;
   const statements = [];
   const definitionMap = new DefinitionMap();
   definitionMap.set("type", internalType);
@@ -27045,8 +27045,8 @@ function compileNgModule(meta) {
     if (declarations.length > 0) {
       definitionMap.set("declarations", refsToArray(declarations, containsForwardDecls));
     }
-    if (imports111.length > 0) {
-      definitionMap.set("imports", refsToArray(imports111, containsForwardDecls));
+    if (imports102.length > 0) {
+      definitionMap.set("imports", refsToArray(imports102, containsForwardDecls));
     }
     if (exports$1.length > 0) {
       definitionMap.set("exports", refsToArray(exports$1, containsForwardDecls));
@@ -27085,11 +27085,11 @@ function compileNgModuleDeclarationExpression(meta) {
   }
   return importExpr(Identifiers.defineNgModule).callFn([definitionMap.toLiteralMap()]);
 }
-function createNgModuleType({ type: moduleType, declarations, imports: imports111, exports: exports$1 }) {
+function createNgModuleType({ type: moduleType, declarations, imports: imports102, exports: exports$1 }) {
   return new ExpressionType(importExpr(Identifiers.NgModuleDeclaration, [
     new ExpressionType(moduleType.type),
     tupleTypeOf(declarations),
-    tupleTypeOf(imports111),
+    tupleTypeOf(imports102),
     tupleTypeOf(exports$1)
   ]));
 }
@@ -39326,6 +39326,7 @@ var htmlElements = [
 
 // src/transpile/bind.ex.transformer.ts
 var FORMAT_CONTEXT = "{formatContext:''}";
+var FORMAT_CONTEXT_REGEX = /\{formatContext:''\}/g;
 var FRAGMENT_SCOPED_NAMES = ["appLocale", "Variables"];
 var ExpressionTransformer = class {
   constructor(ctx = "this", mode = "attr") {
@@ -39443,7 +39444,8 @@ var ExpressionTransformer = class {
     const _args = [];
     const exp = this.build(ast.exp);
     for (const arg of ast.args) {
-      _args.push(this.build(arg));
+      const argExp = this.build(arg);
+      _args.push(argExp === "" ? "undefined" : argExp);
     }
     if (_args[0] && name === "custom") {
       name = `custom.${_args[0]}`.replace(/"/g, "");
@@ -39452,6 +39454,9 @@ var ExpressionTransformer = class {
     if (name === "currency") {
       name = "toCurrency";
     }
+    if (name === "toCurrency" && _args.length === 1) {
+      _args.push("undefined");
+    }
     _args.unshift(exp);
     return `${this.ctx}?.formatters?.get('${name}')?.format(${_args}, ${FORMAT_CONTEXT})`;
   }
@@ -39517,26 +39522,48 @@ var transform = (expr, scopeName = "this", mode = "attr") => {
   }
 };
 var bind_ex_transformer_default = transform;
+function resolveFormatContext(expression, context) {
+  var _a, _b;
+  if ((_a = context == null ? void 0 : context.get) == null ? void 0 : _a.call(context, "isInsideList")) {
+    return expression.replace(FORMAT_CONTEXT_REGEX, "$item");
+  }
+  if ((_b = context == null ? void 0 : context.get) == null ? void 0 : _b.call(context, "isInsideTableColumn")) {
+    return expression.replace(FORMAT_CONTEXT_REGEX, "rowData");
+  }
+  return expression.replace(/,\s*\{formatContext:''\}/g, "").replace(FORMAT_CONTEXT_REGEX, "");
+}
 
 // src/variables/variable.transformer.ts
 var import_lodash2 = __toESM(require_lodash());
+function bindingValueIsStatic(value) {
+  const v = Array.isArray(value) ? value[0] : value;
+  return !v || !(typeof v === "string" && v.startsWith("bind:"));
+}
+function filterExpressionsAreStatic(filterExpressions) {
+  if (!(filterExpressions == null ? void 0 : filterExpressions.rules)) return true;
+  const ruleIsStatic = (rule) => {
+    if (rule.rules) {
+      return rule.rules.every(ruleIsStatic);
+    }
+    return bindingValueIsStatic(rule.value);
+  };
+  return filterExpressions.rules.every(ruleIsStatic);
+}
 function isStaticParamsVariable(variable2) {
   const db = variable2.dataBinding;
-  if (!db) return true;
-  const entryIsStatic = (entry) => {
-    const v = Array.isArray(entry.value) ? entry.value[0] : entry.value;
-    return !v || !(typeof v === "string" && v.startsWith("bind:"));
-  };
-  if (Array.isArray(db)) {
-    return db.every(entryIsStatic);
-  }
-  if ((0, import_lodash2.isObject)(db) && !Array.isArray(db)) {
-    return Object.values(db).every((opBindings) => {
-      if (!Array.isArray(opBindings)) return true;
-      return opBindings.every(entryIsStatic);
-    });
+  const entryIsStatic = (entry) => bindingValueIsStatic(entry.value);
+  if (db) {
+    if (Array.isArray(db)) {
+      if (!db.every(entryIsStatic)) return false;
+    } else if ((0, import_lodash2.isObject)(db) && !Array.isArray(db)) {
+      const allOpsStatic = Object.values(db).every((opBindings) => {
+        if (!Array.isArray(opBindings)) return true;
+        return opBindings.every(entryIsStatic);
+      });
+      if (!allOpsStatic) return false;
+    }
   }
-  return true;
+  return filterExpressionsAreStatic(variable2.filterExpressions);
 }
 function parseStaticJsonValue(value) {
   const trimmedValue = value.trim();
@@ -39603,6 +39630,31 @@ function checkEmptyObject(obj) {
   });
   return isVariableEmpty;
 }
+function transformDataSetBindings(dataSet, scope) {
+  if (typeof dataSet === "string" && dataSet.startsWith("bind:")) {
+    let v = dataSet.substring(5);
+    v = (v || "").trim().replace(/;+\s*$/, "");
+    if (v === "null") {
+      return null;
+    } else {
+      const transformed = bind_ex_transformer_default(v, scope, "attr").replace(/\\n/g, "");
+      if (transformed.trim().startsWith("{")) {
+        return `${scope}.eval(() => (${transformed}))`;
+      } else {
+        return `${scope}.eval(() => ${transformed})`;
+      }
+    }
+  } else if ((0, import_lodash2.isArray)(dataSet)) {
+    return dataSet.map((item) => transformDataSetBindings(item, scope));
+  } else if ((0, import_lodash2.isObject)(dataSet) && dataSet !== null) {
+    const result = {};
+    for (const [key, value] of Object.entries(dataSet)) {
+      result[key] = transformDataSetBindings(value, scope);
+    }
+    return result;
+  }
+  return dataSet;
+}
 function transformVariable(variable2, scope) {
   var _a;
   let params = {}, filters = {};
@@ -39614,7 +39666,7 @@ function transformVariable(variable2, scope) {
           (0, import_lodash2.set)(params, name, value);
         });
       } else if (variable2.category === "wm.Variable") {
-        params = (0, import_lodash2.clone)(variable2.dataSet);
+        params = transformDataSetBindings((0, import_lodash2.clone)(variable2.dataSet), scope);
       }
     } else if ((0, import_lodash2.isBoolean)(variable2.dataSet) || (0, import_lodash2.isNumber)(variable2.dataSet)) {
       if (variable2.category === "wm.Variable") {
@@ -39626,6 +39678,9 @@ function transformVariable(variable2, scope) {
           (0, import_lodash2.set)(params, k, (0, import_lodash2.get)(variable2.dataSet, k));
         }
       });
+      if (variable2.category === "wm.Variable") {
+        params = transformDataSetBindings(params, scope);
+      }
     }
   }
   if (variable2.dataBinding) {
@@ -39959,7 +40014,7 @@ function transformTimerAction(variable2, scope) {
   }
   return tv;
 }
-function transformNotificationAction(variable2, scope, imports111) {
+function transformNotificationAction(variable2, scope, imports102) {
   const tv = transformVariable(variable2, scope);
   tv.classname = "NotificationAction";
   tv.group = "action";
@@ -39989,8 +40044,8 @@ function transformNotificationAction(variable2, scope, imports111) {
   if (partialContent) {
     const partialName = partialContent.value.charAt(0).toUpperCase() + partialContent.value.slice(1);
     const importItem = `import ${partialName} from "@/app/components/${partialContent.value}/${partialContent.value}";`;
-    if (!imports111.includes(importItem)) {
-      imports111.push(importItem);
+    if (!imports102.includes(importItem)) {
+      imports102.push(importItem);
     }
     tv.partialContent = { component: partialName };
   }
@@ -40071,7 +40126,7 @@ function transformCrudVariable(variable2, scope) {
   tv.isStaticParams = isStaticParamsVariable(variable2);
   return tv;
 }
-var variable_transformer_default = (variable2, scope, appUrl, imports111) => {
+var variable_transformer_default = (variable2, scope, appUrl, imports102) => {
   switch (variable2.category) {
     case "wm.Variable":
       return transformModelVariable(variable2, scope);
@@ -40082,7 +40137,7 @@ var variable_transformer_default = (variable2, scope, appUrl, imports111) => {
     case "wm.TimerAction":
       return transformTimerAction(variable2, scope);
     case "wm.NotificationAction":
-      return transformNotificationAction(variable2, scope, imports111);
+      return transformNotificationAction(variable2, scope, imports102);
     case "wm.DeviceVariable":
       return transformDeviceVariable(variable2, scope);
     case "wm.LoginAction":
@@ -40359,41 +40414,51 @@ var transformRepeatChildAttr = (element, replace2, replaceWith) => {
     }
   });
 };
-var getOnChangeExprforFormWidget = (element, eventName, context) => {
-  var _a, _b, _c;
-  let formWidgetDatavalue = null;
+var resolveBindExpression = (element) => {
+  var _a, _b;
   const datavalue = element.getAttribute("datavalue") || "";
-  if (datavalue.endsWith(")")) {
-    formWidgetDatavalue = ((_a = element.getAttribute("dataset")) == null ? void 0 : _a.split(":")) || [];
-  } else {
-    formWidgetDatavalue = ((_b = element.getAttribute("datavalue")) == null ? void 0 : _b.split(":")) || [];
+  const parts = datavalue.endsWith(")") ? ((_a = element.getAttribute("dataset")) == null ? void 0 : _a.split(":")) || [] : ((_b = element.getAttribute("datavalue")) == null ? void 0 : _b.split(":")) || [];
+  const bindExpr = parts.length > 1 ? parts[1] : null;
+  if (!bindExpr || bindExpr.includes("?") || bindExpr.includes("Widgets") || bindExpr.includes("$formField")) {
+    return null;
   }
-  let bindExpr = (formWidgetDatavalue == null ? void 0 : formWidgetDatavalue.length) > 1 ? formWidgetDatavalue[1] : null;
-  if (!bindExpr || (bindExpr == null ? void 0 : bindExpr.includes("?")) || (bindExpr == null ? void 0 : bindExpr.includes("Widgets")) || (bindExpr == null ? void 0 : bindExpr.includes("$formField"))) {
+  return bindExpr;
+};
+var REPEATING_COMPONENT_TAGS = ["wm-list", "wm-carousel", "wm-tabs", "wm-wizard", "wm-accordion"];
+var findRepeatingParentContext = (element) => {
+  var _a;
+  let currentNode = element.parentNode;
+  while (currentNode) {
+    const tagName = (_a = currentNode.tagName) == null ? void 0 : _a.toLowerCase();
+    if (tagName && REPEATING_COMPONENT_TAGS.includes(tagName)) {
+      return currentNode.getAttribute("dataset") || null;
+    }
+    currentNode = currentNode.parentNode;
+  }
+  return null;
+};
+var buildOnChangeHandler = (config) => {
+  const { variableName, updateExpr, value, oldValue, callbackEvent } = config;
+  return `
+      ($event, widget, ${value}, ${oldValue}) => {
+        if(fragment?.Variables?.${variableName}?.twoWayBinding) {
+          ${updateExpr}
+        }
+        ${callbackEvent ? `${callbackEvent}` : ""};
+      }
+    `;
+};
+var getOnChangeExprforFormWidget = (element, eventName, context) => {
+  const bindExpr = resolveBindExpression(element);
+  if (!bindExpr) {
     return "";
   }
   const value = eventName === "on-change" ? "newVal" : "selectedValue";
   const oldValue = eventName === "on-change" ? "oldVal" : "";
   let variableName = null;
   let updateExpr = "";
-  if (bindExpr == null ? void 0 : bindExpr.includes("$item")) {
-    const repeatingComponentTags = [
-      "wm-list",
-      "wm-carousel",
-      "wm-tabs",
-      "wm-wizard",
-      "wm-accordion"
-    ];
-    let currentNode = element.parentNode;
-    let parentDataset = null;
-    while (currentNode) {
-      const tagName = (_c = currentNode.tagName) == null ? void 0 : _c.toLowerCase();
-      if (tagName && repeatingComponentTags.includes(tagName)) {
-        parentDataset = currentNode.getAttribute("dataset");
-        break;
-      }
-      currentNode = currentNode.parentNode;
-    }
+  if (bindExpr.includes("$item")) {
+    const parentDataset = findRepeatingParentContext(element);
     if (parentDataset && parentDataset.startsWith("bind:")) {
       const parentDatasetExpr = parentDataset.substring(5);
       let variableMatch = parentDatasetExpr.match(/fragment\.Variables\.([^.]+)\.dataSet/);
@@ -40417,35 +40482,31 @@ var getOnChangeExprforFormWidget = (element, eventName, context) => {
       return "";
     }
   } else {
-    const isVariable2 = bindExpr == null ? void 0 : bindExpr.includes("Variables");
-    const variableExpr = bindExpr == null ? void 0 : bindExpr.split(".");
+    const isVariable2 = bindExpr.includes("Variables");
+    const variableExpr = bindExpr.split(".");
     variableName = isVariable2 && variableExpr ? variableExpr[2] : variableExpr ? variableExpr[1] : null;
     if (variableName) {
       const twoWayBindingVariables = context == null ? void 0 : context.get("twoWayBindingVariables");
       const hasTwoWayBinding = (twoWayBindingVariables == null ? void 0 : twoWayBindingVariables.has(variableName)) === true;
       if (hasTwoWayBinding) {
-        updateExpr = bindExpr != null ? `${bindExpr} = ${value};` : "";
+        updateExpr = `${bindExpr} = ${value};`;
       }
     }
   }
-  if (!variableName) {
-    return "";
-  }
-  if (!updateExpr) {
+  if (!variableName || !updateExpr) {
     return "";
   }
   const callbackEvent = element.getAttribute(eventName);
   if (callbackEvent) {
     element.removeAttribute(eventName);
   }
-  return `
-      ($event, widget, ${value}, ${oldValue}) => {
-        if(fragment?.Variables?.${variableName}?.twoWayBinding) {
-          ${updateExpr}
-        }
-        ${callbackEvent ? `${callbackEvent}` : ""};
-      }
-    `;
+  return buildOnChangeHandler({
+    variableName,
+    updateExpr,
+    value,
+    oldValue,
+    callbackEvent: callbackEvent || null
+  });
 };
 var inferTypeAndParseProperty = (name, valWithQuotes) => {
   let val = valWithQuotes.startsWith('"') ? valWithQuotes.substring(1) : valWithQuotes;
@@ -41221,7 +41282,43 @@ var isBind = (v) => !!(v && (v.startsWith("bind:") || v.startsWith("{")));
 var hasValidDir = (v) => v === "row" || v === "column";
 var isAuto = (v) => v === "auto";
 var normalizeGap = (v) => v != null && v !== "" && !isAuto(v) ? v : null;
-var px = (v) => v == null || v === "auto" ? void 0 : `${v}px`;
+function parseDimensionValue(value, element) {
+  if (value === "auto") return "auto";
+  if (value === "hug") return "fit-content";
+  if (value === "fill") return "100%";
+  if (/(%|vw|vh|em|rem|px|pt|pc|in|cm|mm)$/.test(value)) return value;
+  const n = Number(value);
+  if (!Number.isNaN(n)) return `${n}px`;
+  return value;
+}
+var toCssLength = (v) => v == null || v === "auto" ? void 0 : parseDimensionValue(String(v));
+var SPACING_SHORTHAND_ATTRS = /* @__PURE__ */ new Set(["padding", "margin"]);
+var SPACING_SIDE_ATTRS = /* @__PURE__ */ new Set([
+  "paddingtop",
+  "paddingright",
+  "paddingbottom",
+  "paddingleft",
+  "margintop",
+  "marginright",
+  "marginbottom",
+  "marginleft"
+]);
+function isBareNumericSpacingToken(token) {
+  const v = token.trim();
+  return v !== "" && !Number.isNaN(Number(v));
+}
+function isValidSpacingShorthand(value) {
+  const tokens = splitCssShorthandOnSpaces(value);
+  if (tokens.length === 0) return false;
+  if (tokens.length === 1) return true;
+  return tokens.every((token) => {
+    if (token.trim() === "0") return true;
+    return !isBareNumericSpacingToken(token);
+  });
+}
+function normalizeSpacingToken(token) {
+  return parseDimensionValue(token.trim());
+}
 function getBaseAlignment(key) {
   return ALIGNMENT_MATRIX[key] || { justifyContent: "flex-start", alignItems: "flex-start" };
 }
@@ -41395,7 +41492,7 @@ function computeLayoutCssProperties(props) {
           css["justify-content"] = justifyContent;
           css["align-items"] = alignItems;
         }
-        if (normGap != null) css["gap"] = px(normGap);
+        if (normGap != null) css["gap"] = toCssLength(normGap);
       }
     } else {
       const gapIsAuto = isAuto(props.gap);
@@ -41413,8 +41510,8 @@ function computeLayoutCssProperties(props) {
       } else {
         if (hasAlignment) css["align-content"] = alignItems;
       }
-      if (normGap != null) css["row-gap"] = px(normGap);
-      if (normCgap != null) css["column-gap"] = px(normCgap);
+      if (normGap != null) css["row-gap"] = toCssLength(normGap);
+      if (normCgap != null) css["column-gap"] = toCssLength(normCgap);
     }
   }
   if (props.clipcontent) {
@@ -41480,18 +41577,9 @@ function getStaticLayoutPropsFromElement(element, dynamicGroups) {
   }
   return hasAny ? props : null;
 }
-function parseDimensionValue(value, element) {
-  if (value === "auto") return "auto";
-  if (value === "hug") return "fit-content";
-  if (value === "fill") return "100%";
-  if (/(%|vw|vh|em|rem|px|pt|pc|in|cm|mm)$/.test(value)) return value;
-  const n = Number(value);
-  if (!Number.isNaN(n)) return `${n}px`;
-  return value;
-}
 function expandShorthand(value) {
   const parts = splitCssShorthandOnSpaces(value).map(
-    (v) => v !== "unset" ? parseDimensionValue(v) : "unset"
+    (v) => v !== "unset" ? normalizeSpacingToken(v) : "unset"
   );
   if (parts.length === 1) return [parts[0], parts[0], parts[0], parts[0]];
   if (parts.length === 2) return [parts[0], parts[1], parts[0], parts[1]];
@@ -41627,6 +41715,10 @@ var AutolayoutCodegen = class {
       if (!raw || isBind(raw)) continue;
       if (attrName === "width" || attrName === "height") continue;
       if (info.type === "shorthand-4" && info.shorthandSides) {
+        if (SPACING_SHORTHAND_ATTRS.has(attrName) && !isValidSpacingShorthand(raw)) {
+          element.removeAttribute(attrName);
+          continue;
+        }
         const [top, right, bottom, left] = expandShorthand(raw);
         const sides = info.shorthandSides;
         if (top !== "unset") classNames.push(this.registerClass(sides.top, top));
@@ -41641,6 +41733,8 @@ var AutolayoutCodegen = class {
         if (attrName === "fontsize" && fontUnit && !isBind(fontUnit)) {
           const n = Number(raw);
           cssValue = !Number.isNaN(n) ? `${n}${fontUnit}` : parseDimensionValue(raw);
+        } else if (SPACING_SIDE_ATTRS.has(attrName)) {
+          cssValue = normalizeSpacingToken(raw);
         } else {
           cssValue = parseDimensionValue(raw);
         }
@@ -41865,7 +41959,7 @@ var TranspilationContext2 = class {
     this.data[key] = value;
   }
 };
-var Transpiler = class {
+var _Transpiler = class _Transpiler {
   constructor() {
     this.transformers = /* @__PURE__ */ new Map();
     this.componentNamesList = [];
@@ -42217,6 +42311,97 @@ var Transpiler = class {
       className: addOptionalChaining(classes)
     };
   }
+  // Parse arguments properly, handling commas inside object literals and arrays
+  parseArguments(argString) {
+    const args = [];
+    let currentArg = "";
+    let braceCount = 0;
+    let bracketCount = 0;
+    for (let i = 0; i < argString.length; i++) {
+      const char = argString[i];
+      if (char === "{") braceCount++;
+      else if (char === "}") braceCount--;
+      else if (char === "[") bracketCount++;
+      else if (char === "]") bracketCount--;
+      if (char === "," && braceCount === 0 && bracketCount === 0) {
+        if (currentArg.trim()) {
+          args.push(currentArg.trim());
+        }
+        currentArg = "";
+        continue;
+      }
+      currentArg += char;
+    }
+    if (currentArg.trim()) {
+      args.push(currentArg.trim());
+    }
+    return args;
+  }
+  // Droping literal arguments like strings, numbers, booleans, null/undefined
+  isLiteral(s) {
+    const v = s.trim();
+    return /^(['"]).*\1$/.test(v) || /^-?\d+(?:\.\d+)?$/.test(v) || /^(true|false|null|undefined)$/i.test(v);
+  }
+  // Arithmetic/binary expressions (e.g. "0-5", "0+3") are not valid parameter names.
+  // The Angular parser converts unary negatives like -5 into binary (0-5).
+  isArithmeticExpression(s) {
+    const v = s.trim();
+    return /^\d+\s*[-+*/%]\s*\d+/.test(v);
+  }
+  // Check if argument contains a dot (property access), which makes it an expression, not a valid parameter name
+  isPropertyAccess(s) {
+    return s.trim().includes(".");
+  }
+  // Object literals should not be extracted as function parameters
+  isObjectLiteral(s) {
+    const trimmed = s.trim();
+    if (trimmed.startsWith("{") && trimmed.includes(":")) {
+      let braceCount = 0;
+      let inString = false;
+      let stringChar = "";
+      for (let i = 0; i < trimmed.length; i++) {
+        const char = trimmed[i];
+        if ((char === '"' || char === "'") && (i === 0 || trimmed[i - 1] !== "\\")) {
+          if (!inString) {
+            inString = true;
+            stringChar = char;
+          } else if (char === stringChar) {
+            inString = false;
+          }
+        } else if (!inString) {
+          if (char === "{") braceCount++;
+          else if (char === "}") braceCount--;
+        }
+      }
+      return braceCount === 0 && trimmed.endsWith("}");
+    }
+    return false;
+  }
+  // Array literals should not be extracted as function parameters
+  isArrayLiteral(s) {
+    const trimmed = s.trim();
+    if (trimmed.startsWith("[") && trimmed.endsWith("]")) {
+      let bracketCount = 0;
+      let inString = false;
+      let stringChar = "";
+      for (let i = 0; i < trimmed.length; i++) {
+        const char = trimmed[i];
+        if ((char === '"' || char === "'") && (i === 0 || trimmed[i - 1] !== "\\")) {
+          if (!inString) {
+            inString = true;
+            stringChar = char;
+          } else if (char === stringChar) {
+            inString = false;
+          }
+        } else if (!inString) {
+          if (char === "[") bracketCount++;
+          else if (char === "]") bracketCount--;
+        }
+      }
+      return bracketCount === 0;
+    }
+    return false;
+  }
   findArgs(str, context) {
     var _a;
     let argStr = "";
@@ -42232,92 +42417,8 @@ var Transpiler = class {
     if (context == null ? void 0 : context.get("isInsideList")) {
       argStr = argStr.split(",").filter((s) => !(0, import_lodash5.includes)(["$item", "currentItemWidgets"], s.trim())).join(",");
     }
-    const parseArguments = (argString) => {
-      const args2 = [];
-      let currentArg = "";
-      let braceCount = 0;
-      let bracketCount = 0;
-      for (let i = 0; i < argString.length; i++) {
-        const char = argString[i];
-        if (char === "{") braceCount++;
-        else if (char === "}") braceCount--;
-        else if (char === "[") bracketCount++;
-        else if (char === "]") bracketCount--;
-        if (char === "," && braceCount === 0 && bracketCount === 0) {
-          if (currentArg.trim()) {
-            args2.push(currentArg.trim());
-          }
-          currentArg = "";
-          continue;
-        }
-        currentArg += char;
-      }
-      if (currentArg.trim()) {
-        args2.push(currentArg.trim());
-      }
-      return args2;
-    };
-    const isLiteral = (s) => {
-      const v = s.trim();
-      return /^(['"]).*\1$/.test(v) || /^-?\d+(?:\.\d+)?$/.test(v) || /^(true|false|null|undefined)$/i.test(v);
-    };
-    const isArithmeticExpression = (s) => {
-      const v = s.trim();
-      return /^\d+\s*[-+*/%]\s*\d+/.test(v);
-    };
-    const isPropertyAccess = (s) => {
-      return s.trim().includes(".");
-    };
-    const isObjectLiteral = (s) => {
-      const trimmed = s.trim();
-      if (trimmed.startsWith("{") && trimmed.includes(":")) {
-        let braceCount = 0;
-        let inString = false;
-        let stringChar = "";
-        for (let i = 0; i < trimmed.length; i++) {
-          const char = trimmed[i];
-          if ((char === '"' || char === "'") && (i === 0 || trimmed[i - 1] !== "\\")) {
-            if (!inString) {
-              inString = true;
-              stringChar = char;
-            } else if (char === stringChar) {
-              inString = false;
-            }
-          } else if (!inString) {
-            if (char === "{") braceCount++;
-            else if (char === "}") braceCount--;
-          }
-        }
-        return braceCount === 0 && trimmed.endsWith("}");
-      }
-      return false;
-    };
-    const isArrayLiteral = (s) => {
-      const trimmed = s.trim();
-      if (trimmed.startsWith("[") && trimmed.endsWith("]")) {
-        let bracketCount = 0;
-        let inString = false;
-        let stringChar = "";
-        for (let i = 0; i < trimmed.length; i++) {
-          const char = trimmed[i];
-          if ((char === '"' || char === "'") && (i === 0 || trimmed[i - 1] !== "\\")) {
-            if (!inString) {
-              inString = true;
-              stringChar = char;
-            } else if (char === stringChar) {
-              inString = false;
-            }
-          } else if (!inString) {
-            if (char === "[") bracketCount++;
-            else if (char === "]") bracketCount--;
-          }
-        }
-        return bracketCount === 0;
-      }
-      return false;
-    };
-    const parsedArgs = parseArguments(argStr);
-    const args = parsedArgs.filter(Boolean).filter((s) => !isLiteral(s)).filter((s) => !isArithmeticExpression(s)).filter((s) => !isPropertyAccess(s)).filter((s) => !isObjectLiteral(s)).filter((s) => !isArrayLiteral(s));
+    const parsedArgs = this.parseArguments(argStr);
+    const args = parsedArgs.filter(Boolean).filter((s) => !this.isLiteral(s)).filter((s) => !this.isArithmeticExpression(s)).filter((s) => !this.isPropertyAccess(s)).filter((s) => !this.isObjectLiteral(s)).filter((s) => !this.isArrayLiteral(s));
     const usesBareEvent = /\$event\b/.test(str);
     const hasEventParam = args.some((a) => a.trim() === "$event");
     if (usesBareEvent && !hasEventParam) {
@@ -42325,6 +42426,96 @@ var Transpiler = class {
     }
     return `(${args.join(", ")})`;
   }
+  // Parse "($event, widget)" → ["$event", "widget"]; "()" → []
+  parseArrowParamNames(argsStr) {
+    const inner = argsStr.replace(/^\(|\)$/g, "").trim();
+    if (!inner) return [];
+    return inner.split(",").map((s) => s.trim()).filter(Boolean);
+  }
+  // Detect a `;` outside strings/parens/braces/brackets — signals multiple top-level statements
+  hasTopLevelSemicolon(body) {
+    let paren = 0;
+    let brace = 0;
+    let bracket = 0;
+    let inString = false;
+    let stringChar = "";
+    for (let i = 0; i < body.length; i++) {
+      const ch = body[i];
+      if ((ch === '"' || ch === "'") && (i === 0 || body[i - 1] !== "\\")) {
+        if (!inString) {
+          inString = true;
+          stringChar = ch;
+        } else if (ch === stringChar) {
+          inString = false;
+        }
+        continue;
+      }
+      if (inString) continue;
+      if (ch === "(") paren++;
+      else if (ch === ")") paren--;
+      else if (ch === "{") brace++;
+      else if (ch === "}") brace--;
+      else if (ch === "[") bracket++;
+      else if (ch === "]") bracket--;
+      else if (ch === ";" && paren === 0 && brace === 0 && bracket === 0) return true;
+    }
+    return false;
+  }
+  isInstanceBoundFragmentCallee(calleeRef) {
+    return _Transpiler.INSTANCE_BOUND_CALLEE.test(calleeRef);
+  }
+  // Match a body shaped like `fragment(...property chain...)?.(args)` — return callee ref + raw arg list
+  extractFragmentMethodCall(body) {
+    const trimmed = body.trim();
+    if (!trimmed.endsWith(")") || !trimmed.startsWith("fragment")) return null;
+    let depth = 0;
+    let openIdx = -1;
+    for (let i = trimmed.length - 1; i >= 0; i--) {
+      const ch = trimmed[i];
+      if (ch === ")") depth++;
+      else if (ch === "(") {
+        depth--;
+        if (depth === 0) {
+          openIdx = i;
+          break;
+        }
+      }
+    }
+    if (openIdx < 2) return null;
+    if (trimmed.substring(openIdx - 2, openIdx) !== "?.") return null;
+    const calleeRef = trimmed.substring(0, openIdx - 2);
+    if (!_Transpiler.FRAGMENT_CALLEE_REF.test(calleeRef)) return null;
+    const argsStr = trimmed.substring(openIdx + 1, trimmed.length - 1);
+    const callArgs = this.parseArguments(argsStr);
+    return { calleeRef, callArgs };
+  }
+  // Decide if an `on-*` handler body can be emitted as a direct function reference instead of an arrow wrapper.
+  // Eligible when body is a single `fragment?.x?.(...)` call whose args are all simple identifiers already
+  // present in the synthesized arrow parameter list — i.e. nothing references closure-only values like `$item`,
+  // `currentItemWidgetsRef.current`, literals, property-access expressions, or table column `rowData`.
+  //
+  // Additional exclusion: callee paths through `Actions` or `Variables` resolve to runtime instance
+  // methods (NavigationAction.invoke, BaseVariable.invoke, setData, navigate, …) that rely on `this`.
+  // Emitting them as detached refs strips the receiver and breaks runtime + WmAnchor's
+  // `getGoToPageNameFromClickHandler` source-string detection, so always wrap those in an arrow.
+  canUseDirectHandlerReference(body, arrowParams) {
+    const trimmed = body.replace(/;+\s*$/, "").trim();
+    if (!trimmed) return null;
+    if (this.hasTopLevelSemicolon(trimmed)) return null;
+    const parsed = this.extractFragmentMethodCall(trimmed);
+    if (!parsed) return null;
+    if (this.isInstanceBoundFragmentCallee(parsed.calleeRef)) return null;
+    const paramSet = new Set(arrowParams);
+    for (const raw of parsed.callArgs) {
+      const a = raw.trim();
+      if (!a) continue;
+      if (this.isLiteral(a) || this.isArithmeticExpression(a) || this.isObjectLiteral(a) || this.isArrayLiteral(a) || this.isPropertyAccess(a)) {
+        return null;
+      }
+      if (!paramSet.has(a)) return null;
+    }
+    return parsed.calleeRef;
+  }
   quoteAttr(v) {
     return ("" + v).replace(/&/g, "&amp;").replace(/'/g, "&apos;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
   }
@@ -42360,8 +42551,15 @@ var Transpiler = class {
       if (context == null ? void 0 : context.get("isInsideTableColumn")) {
         value = value.replace(/\brow\b/g, "rowData");
       }
-      value = `${args} => {${value}}`;
-      value = `{${value}}`;
+      const arrowParams = this.parseArrowParamNames(args);
+      const bodyForCheck = value.replace(/;+\s*$/, "").trim();
+      const directRef = this.canUseDirectHandlerReference(bodyForCheck, arrowParams);
+      if (directRef) {
+        value = `{${directRef}}`;
+      } else {
+        value = `${args} => {${value}}`;
+        value = `{${value}}`;
+      }
     } else if (name === "datasource" || name === "deletedatasource") {
       if (value.startsWith("fragment")) {
         value = `{${value}}`;
@@ -42374,6 +42572,7 @@ var Transpiler = class {
       exp = exp.replace("fragment.Page", "fragment");
       const isProgressCircleDatavalue = tagName === "wm-progress-circle" && name === "datavalue";
       exp = modifyExpression(exp);
+      exp = resolveFormatContext(exp, context);
       exp = this.convertStringBooleanTernary(exp);
       if (!exp) {
         exp = '""';
@@ -42486,6 +42685,15 @@ var Transpiler = class {
     transpiler.transformers.set(tagName, transformer);
   }
 };
+// Pure property / safe-property / keyed-read chain rooted at `fragment`.
+// Rejects callee refs that contain intermediate calls (e.g. `fragment.a?.b?.()?.c`),
+// operators, assignments, whitespace — anything that would change semantics when
+// evaluated at render time instead of click time.
+_Transpiler.FRAGMENT_CALLEE_REF = /^fragment(?:\??\.[a-zA-Z_$][\w$]*|(?:\?\.)?\[[^\]]*\])*$/;
+// Callee paths rooted at runtime instance objects (Actions, Variables) whose methods
+// (invoke, navigate, setData, …) rely on `this` and must not be emitted as detached refs.
+_Transpiler.INSTANCE_BOUND_CALLEE = /(?:\?\.|\.)(?:Actions|Variables)(?:\?\.|\.|\[|$)/;
+var Transpiler = _Transpiler;
 var transpiler = new Transpiler();
 var registerTransformer = transpiler.registerTransformer.bind(transpiler);
 var transpileMarkup = (markup, isPartOfPrefab, splitCode, variables, preview) => {
@@ -42581,15 +42789,14 @@ var createExpression = (element, attrName) => {
     displayexpression = displayexpression.replace(/\$item\[fragment.(.*?)\]/g, "$item['$1']");
     displayexpression = displayexpression.replace(/\$item\['(.*?)'\]/g, "_get($item, '$1')");
     displayexpression = displayexpression.replace(/fragment.index/g, "$index");
-    if (displayexpression.indexOf("fragment.formatters.") >= 0) {
-      displayexpression = displayexpression.replace(new RegExp(FORMAT_CONTEXT, "g"), "$item");
+    if (/formatters/.test(displayexpression)) {
+      displayexpression = displayexpression.split(FORMAT_CONTEXT).join("$item");
     }
     displayexpression = displayexpression.replace(
       /fragment\.([a-zA-Z_$][a-zA-Z0-9_$]*)/g,
       "$item.$1"
     );
-    displayexpression = displayexpression.replace(/(?<!\?)\.([a-zA-Z_$][a-zA-Z0-9_$]*)/g, "?.$1");
-    displayexpression = displayexpression.replace(/([a-zA-Z0-9_$\]])\[/g, "$1?.[");
+    displayexpression = addOptionalChaining(displayexpression);
     const exp = (0, import_lodash5.includes)(displayexpression, "(") ? `${displayexpression}` : displayexpression;
     if (displayexpression.indexOf("$index") >= 0) {
       return `{($item, $index, $length) => (${exp})}`;
@@ -42677,100 +42884,59 @@ var label_transformer_default = {
   imports: (element, context) => imports2
 };
 
-// src/transpile/components/partial/partial-content.transformer.ts
-var import_html_entities = __toESM(require_lib9());
-var imports3 = [];
-var ignoredAttributes = ["name", "show", "content", "class", "styles"];
-var partial_content_transformer_default = {
-  pre: (element, context) => {
-    let content = element.attributes["content"];
-    const name = element.attributes["name"];
-    if (content) {
-      const params = {};
-      if (!element.hasAttribute("is-table-row")) {
-        Object.keys(element.attrs).forEach((k) => {
-          if (!ignoredAttributes.includes(k)) {
-            params[k] = element.attrs[k];
-          }
-        });
-      }
-      const watch = [];
-      element.childNodes.filter((node) => isHTMLElement(node) && node.tagName === "WM-PARAM").forEach((node) => {
-        const e = node;
-        const name2 = e.getAttribute("name") || "";
-        let value = e.getAttribute("value") || "";
-        if (value.includes("currentItem")) {
-          const match = value.match(/currentItem\..+/);
-          if (match) {
-            value = `bind:${match[0]}`;
-          }
-        }
-        params[name2] = value;
-        watch.push(name2);
-      });
-      let paramStr = Object.keys(params).filter((k) => k !== "on-load").map((k) => `${k}="${(0, import_html_entities.encode)(params[k])}"`).join(" ");
-      paramStr = transformAttrs(
-        parse5(`<wm-partial-content ${paramStr}/>`).firstChild,
-        context,
-        inferTypeAndParseProperty
-      );
-      paramStr += ` content={props.content}`;
-      if (context.isPartOfPrefab) {
-        paramStr += " prefab={fragment.prefab}";
-        paramStr += "prefabName={fragment.prefabName}";
-        paramStr += "Prefab={stateProxy}";
-      }
-      return `<WmPartialContent ${watch.length > 0 ? `params={${JSON.stringify(watch)}}` : ""}  onLoad={onLoad} ${paramStr} partialName={'${name}'} listener={props.listener} />`;
-    }
-    return "";
-  },
-  post: (element, context) => "",
-  imports: (element, context) => element.hasAttribute("content") ? imports3 : []
-};
-
-// src/transpile/components/layout/header.transformer.ts
-var imports4 = [
+// src/transpile/components/layout/layout-region-factory.ts
+var partialContainerImport = [
   {
-    name: "WmHeader",
-    from: "@wavemaker-ai/react-runtime/components/layout/header"
+    name: "WmPartialContainer",
+    from: "@wavemaker-ai/react-runtime/components/page/partial-container"
   }
 ];
-var header_transformer_default = {
-  pre: (element, context) => {
-    const isPreview = context.get("preview") === true;
-    if (isPreview) {
-      let partial = partial_content_transformer_default.pre(element, context) || "";
-      if (partial) {
-        element.removeAttribute("name");
-        partial = `render={(props:Record<string, any>, onLoad:()=>void) => (${partial})}`;
+function createLayoutRegionTransformer(config) {
+  const { component, importPath, defaultContent, defaultName } = config;
+  const tag = component[0];
+  const componentImports = component.map((name, i) => ({ name, from: importPath[i] }));
+  return {
+    pre: (element, context) => {
+      const content = element.getAttribute("content") || defaultContent;
+      const name = element.getAttribute("name") || defaultName;
+      const isPreview = context.get("preview") === true;
+      if (isPreview) {
+        return `<${tag} ${transformAttrs(element, context)}>
+        <WmPartialContainer content="${content}" isLayout={true} partialName="${name}" listener={fragment} />
+        `;
       }
-      return `<WmHeader ${transformAttrs(element, context)} ${partial}>`;
-    }
-    const content = element.getAttribute("content") || "header";
-    const name = element.getAttribute("name") || "header";
-    return `<WmHeader ${transformAttrs(element, context)}>
+      return `<${tag} ${transformAttrs(element, context)}>
         <${content.charAt(0).toUpperCase() + content.slice(1)} isLayout={true} partialName="${name}" />
         `;
-  },
-  post: (element, context) => "</WmHeader>",
-  imports: (element, context) => {
-    const isPreview = context.get("preview") === true;
-    if (isPreview) {
-      return imports4;
+    },
+    post: () => `</${tag}>`,
+    imports: (element, context) => {
+      const isPreview = context.get("preview") === true;
+      if (isPreview) {
+        return [...componentImports, ...partialContainerImport];
+      }
+      const content = element.getAttribute("content") || defaultContent;
+      return [
+        ...componentImports,
+        {
+          name: content.charAt(0).toUpperCase() + content.slice(1),
+          from: `@/app/components/${content}/${content}`
+        }
+      ];
     }
-    const content = element.getAttribute("content") || "header";
-    return [
-      ...imports4,
-      {
-        name: content.charAt(0).toUpperCase() + content.slice(1),
-        from: `@/app/components/${content}/${content}`
-      }
-    ];
-  }
-};
+  };
+}
+
+// src/transpile/components/layout/header.transformer.ts
+var header_transformer_default = createLayoutRegionTransformer({
+  component: ["WmHeader"],
+  importPath: ["@wavemaker-ai/react-runtime/components/layout/header"],
+  defaultContent: "header",
+  defaultName: "header"
+});
 
 // src/transpile/components/page/page-content.transformer.ts
-var imports5 = [
+var imports3 = [
   {
     name: "WmPageContent",
     from: "@wavemaker-ai/react-runtime/components/page/page-content"
@@ -42779,7 +42945,7 @@ var imports5 = [
 var page_content_transformer_default = {
   pre: (element, context) => `<WmPageContent ${transformAttrs(element, context)} >`,
   post: (element, context) => "</WmPageContent>",
-  imports: (element, context) => imports5,
+  imports: (element, context) => imports3,
   createComponent: (element, context) => createComponent2(element, context)
 };
 
@@ -42793,7 +42959,7 @@ var PAGE_EVENT_ATTRS = [
 ];
 var PAGE_EVENT_KEYS = ["attach", "detach", "destroy", "orientationchange", "resize"];
 var THREE_ARG_EVENTS = /* @__PURE__ */ new Set(["orientationchange", "resize"]);
-var imports6 = [
+var imports4 = [
   {
     name: "WmPage",
     from: "@wavemaker-ai/react-runtime/components/page"
@@ -42824,12 +42990,12 @@ var page_transformer_default = {
     return `<WmPage ${transformAttrs(element, context)} >`;
   },
   post: (element, context) => "</WmPage>",
-  imports: (element, context) => imports6,
+  imports: (element, context) => imports4,
   createComponent: (element, context) => createComponent2(element, context)
 };
 
 // src/transpile/components/container/layout-grid/grid.transformer.ts
-var imports7 = [
+var imports5 = [
   {
     name: "WmLayoutgrid",
     from: "@wavemaker-ai/react-runtime/components/container/layout-grid"
@@ -42838,11 +43004,11 @@ var imports7 = [
 var grid_transformer_default = {
   pre: (element, context) => `<WmLayoutgrid iswidget="false" ${transformAttrs(element, context)}>`,
   post: (element, context) => "</WmLayoutgrid>",
-  imports: (element, context) => imports7
+  imports: (element, context) => imports5
 };
 
 // src/transpile/components/container/layout-grid/grid-column.transformer.ts
-var imports8 = [
+var imports6 = [
   {
     name: "WmGridcolumn",
     from: "@wavemaker-ai/react-runtime/components/container/layout-grid/grid-column"
@@ -42851,11 +43017,11 @@ var imports8 = [
 var grid_column_transformer_default = {
   pre: (element, context) => `<WmGridcolumn iswidget="false" ${transformAttrs(element, context)}>`,
   post: (element, context) => "</WmGridcolumn>",
-  imports: (element, context) => imports8
+  imports: (element, context) => imports6
 };
 
 // src/transpile/components/container/layout-grid/grid-row.transformer.ts
-var imports9 = [
+var imports7 = [
   {
     name: "WmGridrow",
     from: "@wavemaker-ai/react-runtime/components/container/layout-grid/grid-row"
@@ -42864,11 +43030,11 @@ var imports9 = [
 var grid_row_transformer_default = {
   pre: (element, context) => `<WmGridrow iswidget="false" ${transformAttrs(element, context)}>`,
   post: (element, context) => "</WmGridrow>",
-  imports: (element, context) => imports9
+  imports: (element, context) => imports7
 };
 
 // src/transpile/components/page/content.transformer.ts
-var imports10 = [
+var imports8 = [
   {
     name: "WmContent",
     from: "@wavemaker-ai/react-runtime/components/page/content"
@@ -42877,135 +43043,36 @@ var imports10 = [
 var content_transformer_default = {
   pre: (element, context) => `<WmContent data-role="page-content" role="main" ${transformAttrs(element, context)} >`,
   post: (element, context) => "</WmContent>",
-  imports: (element, context) => imports10,
+  imports: (element, context) => imports8,
   createComponent: (element, context) => createComponent2(element, context)
 };
 
 // src/transpile/components/layout/footer.transformer.ts
-var imports11 = [
-  {
-    name: "WmFooter",
-    from: "@wavemaker-ai/react-runtime/components/layout/footer"
-  }
-];
-var footer_transformer_default = {
-  pre: (element, context) => {
-    const isPreview = context.get("preview") === true;
-    if (isPreview) {
-      let partial = partial_content_transformer_default.pre(element, context) || "";
-      if (partial) {
-        element.removeAttribute("name");
-        partial = `render={(props:Record<string, any>, onLoad:()=>void) => (${partial})}`;
-      }
-      return `<WmFooter ${transformAttrs(element, context)} ${partial}>`;
-    }
-    const content = element.getAttribute("content") || "footer";
-    const name = element.getAttribute("name") || "footer";
-    return `<WmFooter ${transformAttrs(element, context)}>
-        <${content.charAt(0).toUpperCase() + content.slice(1)} isLayout={true} partialName="${name}" />
-        `;
-  },
-  post: (element, context) => "</WmFooter>",
-  imports: (element, context) => {
-    const isPreview = context.get("preview") === true;
-    if (isPreview) {
-      return imports11;
-    }
-    const content = element.getAttribute("content") || "footer";
-    return [
-      ...imports11,
-      {
-        name: content.charAt(0).toUpperCase() + content.slice(1),
-        from: `@/app/components/${content}/${content}`
-      }
-    ];
-  }
-};
+var footer_transformer_default = createLayoutRegionTransformer({
+  component: ["WmFooter"],
+  importPath: ["@wavemaker-ai/react-runtime/components/layout/footer"],
+  defaultContent: "footer",
+  defaultName: "footer"
+});
 
 // src/transpile/components/layout/topnav.transformer.ts
-var imports12 = [
-  {
-    name: "WmTopNav",
-    from: "@wavemaker-ai/react-runtime/components/layout/topnav"
-  }
-];
-var topnav_transformer_default = {
-  pre: (element, context) => {
-    const isPreview = context.get("preview") === true;
-    if (isPreview) {
-      let partial = partial_content_transformer_default.pre(element, context) || "";
-      if (partial) {
-        element.removeAttribute("name");
-        partial = `render={(props:Record<string, any>, onLoad:()=>void) => (${partial})}`;
-      }
-      return `<WmTopNav ${transformAttrs(element, context)} ${partial}>`;
-    }
-    const content = element.getAttribute("content") || "topnav";
-    const name = element.getAttribute("name") || "top_nav1";
-    return `<WmTopNav ${transformAttrs(element, context)}>
-        <${content.charAt(0).toUpperCase() + content.slice(1)} isLayout={true} partialName="${name}" />
-        `;
-  },
-  post: (element, context) => "</WmTopNav>",
-  imports: (element, context) => {
-    const isPreview = context.get("preview") === true;
-    if (isPreview) {
-      return imports12;
-    }
-    const content = element.getAttribute("content") || "topnav";
-    return [
-      ...imports12,
-      {
-        name: content.charAt(0).toUpperCase() + content.slice(1),
-        from: `@/app/components/${content}/${content}`
-      }
-    ];
-  }
-};
+var topnav_transformer_default = createLayoutRegionTransformer({
+  component: ["WmTopNav"],
+  importPath: ["@wavemaker-ai/react-runtime/components/layout/topnav"],
+  defaultContent: "topnav",
+  defaultName: "top_nav1"
+});
 
 // src/transpile/components/layout/leftnav.transformer.ts
-var imports13 = [
-  {
-    name: "WmLeftPanel",
-    from: "@wavemaker-ai/react-runtime/components/layout/leftnav"
-  }
-];
-var leftnav_transformer_default = {
-  pre: (element, context) => {
-    const isPreview = context.get("preview") === true;
-    if (isPreview) {
-      let partial = partial_content_transformer_default.pre(element, context) || "";
-      if (partial) {
-        element.removeAttribute("name");
-        partial = `render={(props:Record<string, any>, onLoad:()=>void) => (${partial})}`;
-      }
-      return `<WmLeftPanel ${transformAttrs(element, context)} ${partial}>`;
-    }
-    const content = element.getAttribute("content") || "leftnav";
-    const name = element.getAttribute("name") || "leftpanel";
-    return `<WmLeftPanel ${transformAttrs(element, context)}>
-        <${content.charAt(0).toUpperCase() + content.slice(1)} isLayout={true} partialName="${name}" />
-        `;
-  },
-  post: (element, context) => "</WmLeftPanel>",
-  imports: (element, context) => {
-    const isPreview = context.get("preview") === true;
-    if (isPreview) {
-      return imports13;
-    }
-    const content = element.getAttribute("content") || "leftnav";
-    return [
-      ...imports13,
-      {
-        name: content.charAt(0).toUpperCase() + content.slice(1),
-        from: `@/app/components/${content}/${content}`
-      }
-    ];
-  }
-};
+var leftnav_transformer_default = createLayoutRegionTransformer({
+  component: ["WmLeftPanel"],
+  importPath: ["@wavemaker-ai/react-runtime/components/layout/leftnav"],
+  defaultContent: "leftnav",
+  defaultName: "leftpanel"
+});
 
 // src/transpile/components/nav/navbar.transformer.ts
-var imports14 = [
+var imports9 = [
   {
     name: "WmNavbar",
     from: "@wavemaker-ai/react-runtime/components/navbar"
@@ -43099,11 +43166,11 @@ var navbar_transformer_default = {
       ${transformAttrs(element, context)}>`;
   },
   post: (element, context) => "</WmNavbar>",
-  imports: (element, context) => imports14
+  imports: (element, context) => imports9
 };
 
 // src/transpile/components/nav/nav-item.transformer.ts
-var imports15 = [
+var imports10 = [
   {
     name: "WmNavItem",
     from: "@wavemaker-ai/react-runtime/components/navbar/nav-item"
@@ -43120,21 +43187,21 @@ var nav_item_transformer_default = {
       ${transformAttrs(element, context)}>`;
   },
   post: (element, context) => "</WmNavItem>",
-  imports: (element, context) => imports15
+  imports: (element, context) => imports10
 };
 
 // src/transpile/components/basic/anchor.transformer.ts
-var imports16 = [
+var imports11 = [
   { name: "WmAnchor", from: "@wavemaker-ai/react-runtime/components/basic/anchor" }
 ];
 var anchor_transformer_default = {
   pre: (element, context) => `<WmAnchor listener={fragment} ${transformAttrs(element, context)} >`,
   post: (element, context) => "</WmAnchor>",
-  imports: (element, context) => imports16
+  imports: (element, context) => imports11
 };
 
 // src/transpile/components/input/text.transformer.ts
-var imports17 = [
+var imports12 = [
   {
     name: "WmText",
     from: "@wavemaker-ai/react-runtime/components/input/text"
@@ -43147,67 +43214,88 @@ var text_transformer_default = {
     return `<WmText ${isFormField ? " {...$formField}" : ""} listener={fragment} ${transformAttrs(element, context)} ${onChange ? `onChange={${onChange}}` : ""}>`;
   },
   post: (element, context) => "</WmText>",
-  imports: (element, context) => imports17
+  imports: (element, context) => imports12
 };
 
+// src/transpile/components/page/build-partial-markup.ts
+var import_html_entities = __toESM(require_lib9());
+var ignoredAttributes = ["name", "show", "content", "class", "styles"];
+function buildPartialMarkup(element, context, componentName) {
+  const content = element.attributes["content"];
+  const name = element.attributes["name"];
+  if (!content) {
+    return "";
+  }
+  const params = {};
+  if (!element.hasAttribute("is-table-row")) {
+    Object.keys(element.attrs).forEach((k) => {
+      if (!ignoredAttributes.includes(k)) {
+        params[k] = element.attrs[k];
+      }
+    });
+  }
+  const watch = [];
+  element.childNodes.filter((node) => isHTMLElement(node) && node.tagName === "WM-PARAM").forEach((node) => {
+    const e = node;
+    const name2 = e.getAttribute("name") || "";
+    let value = e.getAttribute("value") || "";
+    if (value.includes("currentItem")) {
+      const match = value.match(/currentItem\..+/);
+      if (match) {
+        value = `bind:${match[0]}`;
+      }
+    }
+    params[name2] = value;
+    watch.push(name2);
+  });
+  const syntheticTag = componentName.replace(/([A-Z])/g, "-$1").toLowerCase().replace(/^-/, "");
+  let paramStr = Object.keys(params).filter((k) => k !== "on-load").map((k) => `${k}="${(0, import_html_entities.encode)(params[k])}"`).join(" ");
+  paramStr = transformAttrs(
+    parse5(`<${syntheticTag} ${paramStr}/>`).firstChild,
+    context,
+    inferTypeAndParseProperty
+  );
+  paramStr += ` content={props.content}`;
+  if (context.isPartOfPrefab) {
+    paramStr += " prefab={fragment.prefab}";
+    paramStr += "prefabName={fragment.prefabName}";
+    paramStr += "Prefab={stateProxy}";
+  }
+  return `<${componentName} ${watch.length > 0 ? `params={${JSON.stringify(watch)}}` : ""}  onLoad={onLoad} ${paramStr} partialName={'${name}'} listener={props.listener} />`;
+}
+
 // src/transpile/components/page/partial-container.transformer.ts
-var import_html_entities2 = __toESM(require_lib9());
-var imports18 = [
+var imports13 = [
   {
     name: "WmPartialContainer",
     from: "@wavemaker-ai/react-runtime/components/page/partial-container"
   }
 ];
-var ignoredAttributes2 = ["name", "show", "content", "class", "styles"];
 var partial_container_transformer_default = {
-  pre: (element, context) => {
-    let content = element.attributes["content"];
-    const name = element.attributes["name"];
-    if (content) {
-      const params = {};
-      if (!element.hasAttribute("is-table-row")) {
-        Object.keys(element.attrs).forEach((k) => {
-          if (!ignoredAttributes2.includes(k)) {
-            params[k] = element.attrs[k];
-          }
-        });
-      }
-      const watch = [];
-      element.childNodes.filter((node) => isHTMLElement(node) && node.tagName === "WM-PARAM").forEach((node) => {
-        const e = node;
-        const name2 = e.getAttribute("name") || "";
-        let value = e.getAttribute("value") || "";
-        if (value.includes("currentItem")) {
-          const match = value.match(/currentItem\..+/);
-          if (match) {
-            value = `bind:${match[0]}`;
-          }
-        }
-        params[name2] = value;
-        watch.push(name2);
-      });
-      let paramStr = Object.keys(params).filter((k) => k !== "on-load").map((k) => `${k}="${(0, import_html_entities2.encode)(params[k])}"`).join(" ");
-      paramStr = transformAttrs(
-        parse5(`<wm-partial-container ${paramStr}/>`).firstChild,
-        context,
-        inferTypeAndParseProperty
-      );
-      paramStr += ` content={props.content}`;
-      if (context.isPartOfPrefab) {
-        paramStr += " prefab={fragment.prefab}";
-        paramStr += "prefabName={fragment.prefabName}";
-        paramStr += "Prefab={stateProxy}";
-      }
-      return `<WmPartialContainer ${watch.length > 0 ? `params={${JSON.stringify(watch)}}` : ""}  onLoad={onLoad} ${paramStr} partialName={'${name}'} listener={props.listener} />`;
-    }
-    return "";
-  },
+  pre: (element, context) => buildPartialMarkup(element, context, "WmPartialContainer"),
   post: (element, context) => "",
-  imports: (element, context) => element.hasAttribute("content") ? imports18 : []
+  imports: (element, context) => element.hasAttribute("content") ? imports13 : []
 };
 
+// src/transpile/components/page/with-partial-container.ts
+function withPartialContainer(element, context, options) {
+  let partial = partial_container_transformer_default.pre(element, context) || "";
+  const extraImports = partial_container_transformer_default.imports(element, context);
+  if (partial) {
+    if (options.removeName) {
+      element.removeAttribute("name");
+    }
+    const params = options.extraParams ? `props:Record<string, any>, onLoad:()=>void, ${options.extraParams}` : "props:Record<string, any>, onLoad:()=>void";
+    partial = `${options.prop}={(${params}) => (${partial})}`;
+  }
+  return { partialAttr: partial, extraImports };
+}
+function getPartialImports(element, context) {
+  return partial_container_transformer_default.imports(element, context);
+}
+
 // src/transpile/components/container/container.transformer.ts
-var imports19 = [
+var imports14 = [
   {
     name: "WmContainer",
     from: "@wavemaker-ai/react-runtime/components/container"
@@ -43215,30 +43303,20 @@ var imports19 = [
 ];
 var container_transformer_default = {
   pre: (element, context) => {
-    const isPreview = context.get("preview") === true;
-    if (isPreview) {
-      let partial2 = partial_content_transformer_default.pre(element, context) || "";
-      if (partial2) {
-        element.removeAttribute("name");
-        partial2 = `renderPartial={(props:Record<string, any>, onLoad:()=>void) => (${partial2})}`;
-      }
-      return `<WmContainer ${transformAttrs(element, context)} ${partial2}>`;
-    }
-    let partial = partial_container_transformer_default.pre(element, context) || "";
-    if (partial) {
-      element.removeAttribute("name");
-      partial = `renderPartial={(props:Record<string, any>, onLoad:()=>void) => (${partial})}`;
-    }
-    return `<WmContainer listener={fragment} ${transformAttrs(element, context)} ${partial}>`;
+    const { partialAttr } = withPartialContainer(element, context, {
+      prop: "renderPartial",
+      removeName: true
+    });
+    return `<WmContainer listener={fragment} ${transformAttrs(element, context)} ${partialAttr}>`;
   },
   post: (element, context) => "</WmContainer>",
   imports: (element, context) => {
-    return imports19.concat(partial_container_transformer_default.imports(element, context));
+    return imports14.concat(getPartialImports(element, context));
   }
 };
 
 // src/transpile/components/input/composite.transformer.ts
-var imports20 = [
+var imports15 = [
   {
     name: "WmComposite",
     from: "@wavemaker-ai/react-runtime/components/input/composite"
@@ -43247,11 +43325,11 @@ var imports20 = [
 var composite_transformer_default = {
   pre: (element, context) => `<WmComposite  ${transformAttrs(element, context)}>`,
   post: (element, context) => "</WmComposite>",
-  imports: (element, context) => imports20
+  imports: (element, context) => imports15
 };
 
 // src/transpile/components/input/number.transformer.ts
-var imports21 = [
+var imports16 = [
   {
     name: "WmNumber",
     from: "@wavemaker-ai/react-runtime/components/input/number"
@@ -43264,11 +43342,11 @@ var number_transformer_default = {
     return `<WmNumber ${isFormField ? " {...$formField}" : ""} listener={fragment} ${transformAttrs(element, context)} >`;
   },
   post: (element, context) => "</WmNumber>",
-  imports: (element, context) => imports21
+  imports: (element, context) => imports16
 };
 
 // src/transpile/components/input/textarea.transformer.ts
-var imports22 = [
+var imports17 = [
   {
     name: "WmTextarea",
     from: "@wavemaker-ai/react-runtime/components/input/textarea"
@@ -43280,11 +43358,11 @@ var textarea_transformer_default = {
     return `<WmTextarea ${isFormField ? " {...$formField}" : ""} type="textarea" listener={fragment} ${transformAttrs(element, context)} `;
   },
   post: (element, context) => "/>",
-  imports: (element, context) => imports22
+  imports: (element, context) => imports17
 };
 
 // src/transpile/components/container/tile.transformer.ts
-var imports23 = [
+var imports18 = [
   {
     name: "WmTile",
     from: "@wavemaker-ai/react-runtime/components/basic/tile"
@@ -43293,11 +43371,11 @@ var imports23 = [
 var tile_transformer_default = {
   pre: (element, context) => `<WmTile  ${transformAttrs(element, context)}>`,
   post: (element, context) => "</WmTile>",
-  imports: (element, context) => imports23
+  imports: (element, context) => imports18
 };
 
 // src/transpile/components/basic/picture.transformer.ts
-var imports24 = [
+var imports19 = [
   {
     name: "WmPicture",
     from: "@wavemaker-ai/react-runtime/components/basic/picture"
@@ -43312,11 +43390,11 @@ var picture_transformer_default = {
     return `<WmPicture listener={fragment} ${transformAttrs(element, context)}  ${context.isPartOfPrefab ? " prefabName={fragment.prefabName}" : ""} >`;
   },
   post: (element, context) => "</WmPicture>",
-  imports: (element, context) => imports24
+  imports: (element, context) => imports19
 };
 
 // src/transpile/components/basic/icon.transformer.ts
-var imports25 = [
+var imports20 = [
   {
     name: "WmIcon",
     from: "@wavemaker-ai/react-runtime/components/basic/icon"
@@ -43325,11 +43403,11 @@ var imports25 = [
 var icon_transformer_default = {
   pre: (element, context) => `<WmIcon ${transformAttrs(element, context)} ${context.isPartOfPrefab ? " prefabName={fragment.prefabName}" : ""} >`,
   post: (element, context) => "</WmIcon>",
-  imports: (element, context) => imports25
+  imports: (element, context) => imports20
 };
 
 // src/transpile/components/basic/video.transformer.ts
-var imports26 = [
+var imports21 = [
   {
     name: "WmVideo",
     from: "@wavemaker-ai/react-runtime/components/basic/video"
@@ -43338,11 +43416,11 @@ var imports26 = [
 var video_transformer_default = {
   pre: (element, context) => `<WmVideo ${transformAttrs(element, context)} ${context.isPartOfPrefab ? " prefabName={fragment.prefabName}" : ""}>`,
   post: (element, context) => "</WmVideo>",
-  imports: (element, context) => imports26
+  imports: (element, context) => imports21
 };
 
 // src/transpile/components/basic/audio.transformer.ts
-var imports27 = [
+var imports22 = [
   {
     name: "WmAudio",
     from: "@wavemaker-ai/react-runtime/components/basic/audio"
@@ -43351,11 +43429,11 @@ var imports27 = [
 var audio_transformer_default = {
   pre: (element, context) => `<WmAudio ${transformAttrs(element, context)} ${context.isPartOfPrefab ? " prefabName={fragment.prefabName}" : ""}>`,
   post: (element, context) => "</WmAudio>",
-  imports: (element, context) => imports27
+  imports: (element, context) => imports22
 };
 
 // src/transpile/components/form/button.transformer.ts
-var imports28 = [
+var imports23 = [
   {
     name: "WmButton",
     from: "@wavemaker-ai/react-runtime/components/form/button"
@@ -43372,11 +43450,11 @@ var button_transformer_default = {
     return `<WmButton listener={fragment} ${stopPropagation} ${transformAttrs(element, context)} ${context.isPartOfPrefab ? " prefabName={fragment.prefabName}" : ""} >`;
   },
   post: (element, context) => "</WmButton>",
-  imports: (element, context) => imports28
+  imports: (element, context) => imports23
 };
 
 // src/transpile/components/form/button-group.transformer.ts
-var imports29 = [
+var imports24 = [
   {
     name: "WmButtonGroup",
     from: "@wavemaker-ai/react-runtime/components/form/button-group"
@@ -43385,11 +43463,11 @@ var imports29 = [
 var button_group_transformer_default = {
   pre: (element, context) => `<WmButtonGroup ${transformAttrs(element, context)}>`,
   post: (element, context) => "</WmButtonGroup>",
-  imports: (element, context) => imports29
+  imports: (element, context) => imports24
 };
 
 // src/transpile/components/nav/nav.transformer.ts
-var imports30 = [
+var imports25 = [
   {
     name: "WmNav",
     from: "@wavemaker-ai/react-runtime/components/navbar/nav"
@@ -43443,52 +43521,19 @@ var nav_transformer_default = {
       ${itemlabelExpression ? `itemlabel=${itemlabelExpression}` : ""}>`;
   },
   post: (element, context) => "</WmNav>",
-  imports: (element, context) => imports30
+  imports: (element, context) => imports25
 };
 
 // src/transpile/components/layout/rightnav.transformer.ts
-var imports31 = [
-  {
-    name: "WmRightPanel",
-    from: "@wavemaker-ai/react-runtime/components/layout/rightnav"
-  }
-];
-var rightnav_transformer_default = {
-  pre: (element, context) => {
-    const isPreview = context.get("preview") === true;
-    if (isPreview) {
-      let partial = partial_content_transformer_default.pre(element, context) || "";
-      if (partial) {
-        element.removeAttribute("name");
-        partial = `render={(props:Record<string, any>, onLoad:()=>void) => (${partial})}`;
-      }
-      return `<WmRightPanel ${transformAttrs(element, context)} ${partial}>`;
-    }
-    const content = element.getAttribute("content") || "rightnav";
-    const name = element.getAttribute("name") || "rightnav";
-    return `<WmRightPanel ${transformAttrs(element, context)}>
-        <${content.charAt(0).toUpperCase() + content.slice(1)} isLayout={true} partialName="${name}" />
-        `;
-  },
-  post: (element, context) => "</WmRightPanel>",
-  imports: (element, context) => {
-    const isPreview = context.get("preview") === true;
-    if (isPreview) {
-      return imports31;
-    }
-    const content = element.getAttribute("content") || "rightnav";
-    return [
-      ...imports31,
-      {
-        name: content.charAt(0).toUpperCase() + content.slice(1),
-        from: `@/app/components/${content}/${content}`
-      }
-    ];
-  }
-};
+var rightnav_transformer_default = createLayoutRegionTransformer({
+  component: ["WmRightPanel"],
+  importPath: ["@wavemaker-ai/react-runtime/components/layout/rightnav"],
+  defaultContent: "rightnav",
+  defaultName: "rightnav"
+});
 
 // src/transpile/components/basic/iframe.transformer.ts
-var imports32 = [
+var imports26 = [
   {
     name: "WmIframe",
     from: "@wavemaker-ai/react-runtime/components/basic/iframe"
@@ -43497,37 +43542,38 @@ var imports32 = [
 var iframe_transformer_default = {
   pre: (element, context) => `<WmIframe ${transformAttrs(element, context)}>`,
   post: (element, context) => "</WmIframe>",
-  imports: (element, context) => imports32
+  imports: (element, context) => imports26
 };
 
+// src/transpile/components/dialogs/dialog-factory.ts
+function createSelfClosingDialogTransformer(config) {
+  const imports102 = [
+    {
+      name: config.component,
+      from: config.importPath
+    }
+  ];
+  return {
+    pre: (element, context) => `<${config.component} listener={fragment} ${transformAttrs(element, context)}`,
+    post: (element, context) => "/>",
+    imports: (element, context) => imports102
+  };
+}
+
 // src/transpile/components/dialogs/confirm-dialog.transformer.ts
-var imports33 = [
-  {
-    name: "WmConfirmDialog",
-    from: "@wavemaker-ai/react-runtime/components/dialogs/confirm-dialog"
-  }
-];
-var confirm_dialog_transformer_default = {
-  pre: (element, context) => `<WmConfirmDialog listener={fragment} ${transformAttrs(element, context)}`,
-  post: (element, context) => "/>",
-  imports: (element, context) => imports33
-};
+var confirm_dialog_transformer_default = createSelfClosingDialogTransformer({
+  component: "WmConfirmDialog",
+  importPath: "@wavemaker-ai/react-runtime/components/dialogs/confirm-dialog"
+});
 
 // src/transpile/components/dialogs/alert-dialog.transformer.ts
-var imports34 = [
-  {
-    name: "WmAlertDialog",
-    from: "@wavemaker-ai/react-runtime/components/dialogs/alert-dialog"
-  }
-];
-var alert_dialog_transformer_default = {
-  pre: (element, context) => `<WmAlertDialog listener={fragment} ${transformAttrs(element, context)}`,
-  post: (element, context) => "/>",
-  imports: (element, context) => imports34
-};
+var alert_dialog_transformer_default = createSelfClosingDialogTransformer({
+  component: "WmAlertDialog",
+  importPath: "@wavemaker-ai/react-runtime/components/dialogs/alert-dialog"
+});
 
 // src/transpile/components/data/list/list-transformer.ts
-var imports35 = [
+var imports27 = [
   { name: "WmList", from: "@wavemaker-ai/react-runtime/components/data/list" }
 ];
 var addTemplateClass = (element) => {
@@ -43611,6 +43657,10 @@ function serializeStyleObjectToParts(styleObj) {
 var buildItemAttrsFromListTemplate = (template, context) => {
   var _a, _b, _c;
   if (!template || ((_a = template.tagName) == null ? void 0 : _a.toLowerCase()) !== "wm-listtemplate") return "";
+  if (template.getAttribute("class")) {
+    template.setAttribute("className", template.getAttribute("class"));
+    template.removeAttribute("class");
+  }
   const autolayout = (_b = context.data) == null ? void 0 : _b.autolayoutCodegen;
   const autoLayoutResult = (_c = autolayout == null ? void 0 : autolayout.processListTemplate(template)) != null ? _c : null;
   const styleObj = style_transformer_default(template, (styleProp) => {
@@ -43758,8 +43808,10 @@ var list_transformer_default = {
       }
       const datasetAttr = element.getAttribute("dataset");
       const datasourceAttr = element.getAttribute("datasource");
-      if (datasetAttr && datasetAttr.startsWith("bind:fragment.Variables.") && datasetAttr.endsWith(".dataSet")) {
-        const match = datasetAttr.match(/^bind:fragment\.Variables\.([^.]+)\.dataSet$/);
+      if (datasetAttr && datasetAttr.startsWith("bind:fragment.Variables.") && datasetAttr.includes(".dataSet")) {
+        const match = datasetAttr.match(
+          /^bind:fragment\.Variables\.([^.]+)\.dataSet(?=[^A-Za-z0-9_]|$)/
+        );
         if (match) {
           const variableName = match[1];
           if (!datasourceAttr) {
@@ -43816,7 +43868,7 @@ var list_transformer_default = {
     context.data.listCount--;
     return "</>)}}></WmList>";
   },
-  imports: (element, context) => imports35,
+  imports: (element, context) => imports27,
   createComponent: (element, context) => {
     if (!context.data.listCount) {
       context.props = context.get("old_props") || [];
@@ -43828,7 +43880,7 @@ var list_transformer_default = {
 };
 
 // src/transpile/components/data/list/list-template-transformer.ts
-var imports36 = [];
+var imports28 = [];
 var list_template_transformer_default = {
   pre: (element, context) => {
     const name = element.getAttribute("name");
@@ -43842,16 +43894,16 @@ var list_template_transformer_default = {
     element.removeAttribute("height");
     return "</React.Fragment>";
   },
-  imports: (element, context) => imports36
+  imports: (element, context) => imports28
 };
 
 // src/transpile/components/data/list/list-content.transformer.ts
 var import_lodash6 = __toESM(require_lodash());
-var imports37 = [];
+var imports29 = [];
 var list_content_transformer_default = {
   pre: (element, context) => ``,
   post: (element, context) => "",
-  imports: (element, context) => imports37,
+  imports: (element, context) => imports29,
   createComponent: (e, context, component = "list") => {
     const result = context.result;
     const widgetName = (0, import_lodash6.capitalize)(e.attrs["name"]);
@@ -43917,17 +43969,19 @@ var DATASET_WIDGETS = [
   "rating" /* RATING */
 ];
 
+// src/transpile/components/data/form/field-widget-shared.ts
+var getAttribute = (element, attrName) => {
+  const value = element.getAttribute(attrName);
+  return value == null ? void 0 : value.replace(/"/g, "&quot;");
+};
+
 // src/transpile/components/data/form/form-field.transformer.ts
-var imports38 = [
+var imports30 = [
   {
     name: "WmFormField",
     from: "@wavemaker-ai/react-runtime/components/data/form/form-field"
   }
 ];
-var getAttribute = (element, attrName) => {
-  const value = element.getAttribute(attrName);
-  return value == null ? void 0 : value.replace(/"/g, "&quot;");
-};
 var extractField = (element, context, formElement) => {
   const widgetType = getAttribute(element, "widget") || "text";
   const widgetName = getAttribute(element, "key") || getAttribute(element, "name") || "text_formWidget";
@@ -43994,6 +44048,7 @@ var getDisplayExpression = (displayExpr) => {
   return `displayexpression="${displayExpr}"`;
 };
 var getWidgetMarkup = (widgetType, widgetName, commonFields, element) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
   let tmpl = "";
   const getDisplayExpr = element.getAttribute("displayexpression") || element.getAttribute("displaylabel");
   const displayExp = getDisplayExpr ? getDisplayExpression(getDisplayExpr) : "";
@@ -44006,16 +44061,16 @@ var getWidgetMarkup = (widgetType, widgetName, commonFields, element) => {
     currentNode = currentNode.parentNode;
   }
   const isFloatingForm = (currentNode == null ? void 0 : currentNode.getAttribute("captionposition")) === "floating";
-  const floatinglabel = formFieldTags.includes(widgetType) && isFloatingForm ? `floatinglabel='${element.getAttribute("displayname")}'` : "";
+  const floatinglabel = formFieldTags.includes(widgetType) && isFloatingForm ? `floatinglabel="${(_a = element.getAttribute("displayname")) == null ? void 0 : _a.replace(/"/g, "&quot;")}"` : "";
   const dateTimeDialogTags = ["date", "time", "datetime"];
   const isDateTimeTag = dateTimeDialogTags.includes(widgetType);
-  const dateheadertitle = isDateTimeTag && element.getAttribute("dateheadertitle") ? `dateheadertitle='${element.getAttribute("dateheadertitle")}'` : "";
-  const dateconfirmationtitle = isDateTimeTag && element.getAttribute("dateconfirmationtitle") ? `dateconfirmationtitle='${element.getAttribute("dateconfirmationtitle")}'` : "";
-  const datecanceltitle = isDateTimeTag && element.getAttribute("datecanceltitle") ? `datecanceltitle='${element.getAttribute("datecanceltitle")}'` : "";
-  const timeheadertitle = isDateTimeTag && element.getAttribute("timeheadertitle") ? `timeheadertitle='${element.getAttribute("timeheadertitle")}'` : "";
-  const timeconfirmationtitle = isDateTimeTag && element.getAttribute("timeconfirmationtitle") ? `timeconfirmationtitle='${element.getAttribute("timeconfirmationtitle")}'` : "";
-  const timecanceltitle = isDateTimeTag && element.getAttribute("timecanceltitle") ? `timecanceltitle='${element.getAttribute("timecanceltitle")}'` : "";
-  const outputformat = element.getAttribute("outputformat") ? `outputformat='${element.getAttribute("outputformat")}'` : ``;
+  const dateheadertitle = isDateTimeTag && element.getAttribute("dateheadertitle") ? `dateheadertitle="${(_b = element.getAttribute("dateheadertitle")) == null ? void 0 : _b.replace(/"/g, "&quot;")}"` : "";
+  const dateconfirmationtitle = isDateTimeTag && element.getAttribute("dateconfirmationtitle") ? `dateconfirmationtitle="${(_c = element.getAttribute("dateconfirmationtitle")) == null ? void 0 : _c.replace(/"/g, "&quot;")}"` : "";
+  const datecanceltitle = isDateTimeTag && element.getAttribute("datecanceltitle") ? `datecanceltitle="${(_d = element.getAttribute("datecanceltitle")) == null ? void 0 : _d.replace(/"/g, "&quot;")}"` : "";
+  const timeheadertitle = isDateTimeTag && element.getAttribute("timeheadertitle") ? `timeheadertitle="${(_e = element.getAttribute("timeheadertitle")) == null ? void 0 : _e.replace(/"/g, "&quot;")}"` : "";
+  const timeconfirmationtitle = isDateTimeTag && element.getAttribute("timeconfirmationtitle") ? `timeconfirmationtitle="${(_f = element.getAttribute("timeconfirmationtitle")) == null ? void 0 : _f.replace(/"/g, "&quot;")}"` : "";
+  const timecanceltitle = isDateTimeTag && element.getAttribute("timecanceltitle") ? `timecanceltitle="${(_g = element.getAttribute("timecanceltitle")) == null ? void 0 : _g.replace(/"/g, "&quot;")}"` : "";
+  const outputformat = element.getAttribute("outputformat") ? `outputformat="${(_h = element.getAttribute("outputformat")) == null ? void 0 : _h.replace(/"/g, "&quot;")}"` : ``;
   switch (widgetType) {
     case "text":
     case "password":
@@ -44304,13 +44359,13 @@ var form_field_transformer_default = {
     return `<WmFormField ${formScope || ""} field="true" ${fieldcolumn ? `fieldcol="${fieldcolumn}"` : ""}  role="form-field"  ${extractDatasetInfo(element)}  ${transformAttrs(element, context)} renderFormFields={($formField) => (<>`;
   },
   post: (element, context) => "    </>)}></WmFormField>",
-  imports: (element, context) => imports38,
+  imports: (element, context) => imports30,
   createComponent: (element, context) => createComponent2(element, context)
 };
 
 // src/transpile/components/data/form/form.transformer.ts
 var import_lodash7 = __toESM(require_lodash());
-var imports39 = [
+var imports31 = [
   { name: "WmForm", from: "@wavemaker-ai/react-runtime/components/data/form" }
 ];
 var getOnChangeExpr = (element) => {
@@ -44443,11 +44498,11 @@ var form_transformer_default = {
     >`;
   },
   post: (element, context) => `</WmForm>`,
-  imports: (element, context) => imports39
+  imports: (element, context) => imports31
 };
 
 // src/transpile/components/data/form/form-footer.transformer.ts
-var imports40 = [
+var imports32 = [
   {
     name: "WmFormFooter",
     from: "@wavemaker-ai/react-runtime/components/data/form/form-footer"
@@ -44456,11 +44511,11 @@ var imports40 = [
 var form_footer_transformer_default = {
   pre: (element, context) => `<WmFormFooter ${transformAttrs(element, context)}>`,
   post: (element, context) => "</WmFormFooter>",
-  imports: (element, context) => imports40
+  imports: (element, context) => imports32
 };
 
 // src/transpile/components/data/form/form-body.transformer.ts
-var imports41 = [
+var imports33 = [
   {
     name: "WmFormBody",
     from: "@wavemaker-ai/react-runtime/components/data/form/form-body"
@@ -44469,11 +44524,11 @@ var imports41 = [
 var form_body_transformer_default = {
   pre: (element, context) => `<WmFormBody ${transformAttrs(element, context)}>`,
   post: (element, context) => "</WmFormBody>",
-  imports: (element, context) => imports41
+  imports: (element, context) => imports33
 };
 
 // src/transpile/components/data/form/form-action.transformer.ts
-var imports42 = [
+var imports34 = [
   {
     name: "WmFormAction",
     from: "@wavemaker-ai/react-runtime/components/data/form/form-action"
@@ -44570,24 +44625,17 @@ var form_action_transformer_default = {
             ${action && actionType ? `onClick={${getFormActionExpr(action, isAsyncAction)}} widgettype="${widgetType}"` : ""} `;
   },
   post: (element, context) => "/>",
-  imports: (element, context) => imports42
+  imports: (element, context) => imports34
 };
 
 // src/transpile/components/dialogs/iframe-dialog.transformer.ts
-var imports43 = [
-  {
-    name: "WmIFrameDialog",
-    from: "@wavemaker-ai/react-runtime/components/dialogs/iframe-dialog"
-  }
-];
-var iframe_dialog_transformer_default = {
-  pre: (element, context) => `<WmIFrameDialog listener={fragment} ${transformAttrs(element, context)}`,
-  post: (element, context) => "/>",
-  imports: (element, context) => imports43
-};
+var iframe_dialog_transformer_default = createSelfClosingDialogTransformer({
+  component: "WmIFrameDialog",
+  importPath: "@wavemaker-ai/react-runtime/components/dialogs/iframe-dialog"
+});
 
 // src/transpile/components/dialogs/page-dialog.transformer.ts
-var imports44 = [
+var imports35 = [
   {
     name: "WmPageDialog",
     from: "@wavemaker-ai/react-runtime/components/dialogs/page-dialog"
@@ -44596,11 +44644,11 @@ var imports44 = [
 var page_dialog_transformer_default = {
   pre: (element, context) => `<WmPageDialog listener={fragment} ${transformAttrs(element, context)}`,
   post: (element, context) => "/>",
-  imports: (element, context) => imports44
+  imports: (element, context) => imports35
 };
 
 // src/transpile/components/dialogs/dialog.transformer.ts
-var imports45 = [
+var imports36 = [
   { name: "WmDialog", from: "@wavemaker-ai/react-runtime/components/dialogs/dialog" }
 ];
 var dialog_transformer_default = {
@@ -44626,12 +44674,12 @@ var dialog_transformer_default = {
     return `<WmDialog listener={fragment} ${transformAttrs(element, context)}>`;
   },
   post: (element, context) => "</WmDialog>",
-  imports: (element, context) => imports45
+  imports: (element, context) => imports36
 };
 
 // src/transpile/components/dialogs/dialog-actions.transformer.ts
 var import_isString = __toESM(require_isString());
-var imports46 = [
+var imports37 = [
   {
     name: "WmDialogActions",
     from: "@wavemaker-ai/react-runtime/components/dialogs/dialog-actions"
@@ -44677,22 +44725,22 @@ var dialog_actions_transformer_default = {
     if (!(parent == null ? void 0 : parent.rawTagName.includes("dialog"))) {
       return [];
     }
-    return imports46;
+    return imports37;
   }
 };
 
 // src/transpile/components/dialogs/dialog-body.transformer.ts
-var imports47 = [
+var imports38 = [
   { name: "WmDialogBody", from: "@wavemaker-ai/react-runtime/components/dialogs/dialog-body" }
 ];
 var dialog_body_transformer_default = {
   pre: (element, context) => `<WmDialogBody ${transformAttrs(element, context)}>`,
   post: (element, context) => "</WmDialogBody>",
-  imports: (element, context) => imports47
+  imports: (element, context) => imports38
 };
 
 // src/transpile/components/container/tabs.transformer.ts
-var imports48 = [
+var imports39 = [
   { name: "WmTabs", from: "@wavemaker-ai/react-runtime/components/container/tabs" }
 ];
 var transformAttr2 = (name, value) => {
@@ -44760,7 +44808,7 @@ var tabs_transformer_default = {
     }
     return "</WmTabs>";
   },
-  imports: (element, context) => imports48,
+  imports: (element, context) => imports39,
   createComponent: (element, context) => {
     if (!context.data.listCount) {
       context.props = context.get("old_props") || [];
@@ -44772,7 +44820,7 @@ var tabs_transformer_default = {
 };
 
 // src/transpile/components/container/tabpane.transformer.ts
-var imports49 = [
+var imports40 = [
   { name: "WmTabPane", from: "@wavemaker-ai/react-runtime/components/container/tabs/tab-pane" }
 ];
 function isInsideDynamicTabs(element) {
@@ -44789,39 +44837,27 @@ function isInsideDynamicTabs(element) {
 }
 var tabpane_transformer_default = {
   pre: (element, context) => {
-    const isPreview = context.get("preview") === true;
-    if (isPreview) {
-      let partial2 = partial_content_transformer_default.pre(element, context) || "";
-      if (partial2) {
-        element.removeAttribute("name");
-        partial2 = `renderPartial={(props:Record<string, any>, onLoad:()=>void) => (${partial2})}`;
-      }
-      return `<WmTabPane listener={fragment} ${transformAttrs(element, context)} ${partial2}>`;
-    }
-    let partial = partial_container_transformer_default.pre(element, context) || "";
-    if (partial) {
-      partial = `renderPartial={(props:Record<string, any>, onLoad:()=>void) => (${partial})}`;
-    }
+    const { partialAttr } = withPartialContainer(element, context, { prop: "renderPartial" });
     const isDynamicTabs = isInsideDynamicTabs(element);
     const itemProp = isDynamicTabs ? " item={$item}" : "";
-    return `<WmTabPane listener={fragment} ${transformAttrs(element, context)}${itemProp} ${partial}>`;
+    return `<WmTabPane listener={fragment} ${transformAttrs(element, context)}${itemProp} ${partialAttr}>`;
   },
   post: (element, context) => "</WmTabPane>",
-  imports: (element, context) => imports49.concat(partial_container_transformer_default.imports(element, context))
+  imports: (element, context) => imports40.concat(getPartialImports(element, context))
 };
 
 // src/transpile/components/container/tabheader.transformer.ts
-var imports50 = [
+var imports41 = [
   { name: "WmTabheader", from: "@wavemaker-ai/react-runtime/components/container/tabs/tabheader" }
 ];
 var tabheader_transformer_default = {
   pre: (element, context) => `<WmTabheader ${transformAttrs(element, context)}>`,
   post: (element, context) => "</WmTabheader>",
-  imports: (element, context) => imports50
+  imports: (element, context) => imports41
 };
 
 // src/transpile/components/prefab/prefab-container.transformer.ts
-var imports51 = [
+var imports42 = [
   {
     name: "WmPrefabContainer",
     from: "@wavemaker-ai/react-runtime/components/prefab/container"
@@ -44836,7 +44872,7 @@ var prefab_container_transformer_default = {
     return `</WmPrefabContainer >`;
   },
   imports: (element, context) => {
-    return imports51;
+    return imports42;
   },
   createComponent: (element, context) => createComponent2(element, context),
   prefabs: (element, context) => {
@@ -44919,17 +44955,17 @@ var prefab_transformer_default = {
     const prefabName = element.getAttribute("prefabname");
     const widgetname = element.getAttribute("widgetname");
     const widgetmodule = element.getAttribute("widgetmodule");
-    const imports111 = [];
+    const imports102 = [];
     if (widgetname && !isPreview) {
-      imports111.push({ name: "Wm" + capitalize3(widgetname), from: widgetmodule });
+      imports102.push({ name: "Wm" + capitalize3(widgetname), from: widgetmodule });
     } else if (!isPreview) {
-      imports111.push({
+      imports102.push({
         name: "Wm" + capitalize3(prefabName) + "Prefab",
         from: `@/app/prefabs/${prefabName}/Main/Main`,
         lazy: profile_default.lazyloadPrefabs
       });
     }
-    return imports111;
+    return imports102;
   },
   createComponent: (element, context) => createComponent2(element, context),
   prefabs: (element, context) => {
@@ -44942,7 +44978,7 @@ var prefab_transformer_default = {
 };
 
 // src/transpile/components/navigation/popover.transformer.ts
-var imports52 = [
+var imports43 = [
   {
     name: "WmPopover",
     from: "@wavemaker-ai/react-runtime/components/navigation/popover"
@@ -44950,30 +44986,18 @@ var imports52 = [
 ];
 var popover_transformer_default = {
   pre: (element, context) => {
-    const isPreview = context.get("preview") === true;
-    if (isPreview) {
-      let partial2 = partial_content_transformer_default.pre(element, context) || "";
-      if (partial2) {
-        element.removeAttribute("name");
-        partial2 = `render={(props:Record<string, any>, onLoad:()=>void) => (${partial2})}`;
-      }
-      return `<WmPopover listener={fragment} ${transformAttrs(element, context)} ${partial2}>`;
-    }
-    let partial = null;
+    let partialAttr = "";
     if (element.getAttribute("contentsource") !== "inline") {
-      partial = partial_container_transformer_default.pre(element, context) || "";
-      if (partial) {
-        partial = `render={(props:Record<string, any>, onLoad:()=>void) => (${partial})}`;
-      }
+      ({ partialAttr } = withPartialContainer(element, context, { prop: "render" }));
     }
-    return `<WmPopover listener={fragment} ${transformAttrs(element, context)}  ${partial !== null ? partial : ""}>`;
+    return `<WmPopover listener={fragment} ${transformAttrs(element, context)}  ${partialAttr}>`;
   },
   post: (element, context) => "</WmPopover>",
-  imports: (element, context) => imports52.concat(partial_container_transformer_default.imports(element, context))
+  imports: (element, context) => imports43.concat(getPartialImports(element, context))
 };
 
 // src/transpile/components/input/switch.transformer.ts
-var imports53 = [
+var imports44 = [
   { name: "WmSwitch", from: "@wavemaker-ai/react-runtime/components/input/default/switch" }
 ];
 var switch_transformer_default = {
@@ -44986,11 +45010,11 @@ var switch_transformer_default = {
     return `<WmSwitch ${isFormField ? " {...$formField}" : ""} listener={fragment} ${extractDatasetInfo(element)} ${transformAttrs(element, context)} ${getDisplayExpression2 ? `displayExpression=${getDisplayExpression2}` : ""} >`;
   },
   post: (element) => "</WmSwitch>",
-  imports: (element) => imports53
+  imports: (element) => imports44
 };
 
 // src/transpile/components/input/slider.transformer.ts
-var imports54 = [
+var imports45 = [
   { name: "WmSlider", from: "@wavemaker-ai/react-runtime/components/input/slider" }
 ];
 var slider_transformer_default = {
@@ -45011,11 +45035,11 @@ var slider_transformer_default = {
       ${getToolTipExpression ? `getToolTipExpression=${getToolTipExpression}` : ""}>`;
   },
   post: (element, context) => "</WmSlider>",
-  imports: (element, context) => imports54
+  imports: (element, context) => imports45
 };
 
 // src/transpile/components/input/select.transformer.ts
-var imports55 = [
+var imports46 = [
   { name: "WmSelect", from: "@wavemaker-ai/react-runtime/components/input/select" }
 ];
 var getOnChangeExpr2 = (element) => {
@@ -45058,11 +45082,11 @@ var select_transformer_default = {
       ${dataPath ? `dataPath="${dataPath}"` : ""}>`;
   },
   post: (element, context) => "</WmSelect>",
-  imports: (element, context) => imports55
+  imports: (element, context) => imports46
 };
 
 // src/transpile/components/input/rating.transformer.ts
-var imports56 = [
+var imports47 = [
   { name: "WmRating", from: "@wavemaker-ai/react-runtime/components/input/rating" }
 ];
 var rating_transformer_default = {
@@ -45075,11 +45099,11 @@ var rating_transformer_default = {
     return `<WmRating ${isFormField ? " {...$formField}" : ""}  listener={fragment} ${transformAttrs(element, context)}  ${getDisplayExpression2 ? `getDisplayExpression=${getDisplayExpression2}` : ""}>`;
   },
   post: (element, context) => "</WmRating>",
-  imports: (element, context) => imports56
+  imports: (element, context) => imports47
 };
 
 // src/transpile/components/input/radio-set.transformer.ts
-var imports57 = [
+var imports48 = [
   {
     name: "WmRadioset",
     from: "@wavemaker-ai/react-runtime/components/input/default/radioset"
@@ -45095,11 +45119,11 @@ var radio_set_transformer_default = {
     return `<WmRadioset ${isFormField ? " {...$formField}" : ""} listener={fragment} ${extractDatasetInfo(element)} ${transformAttrs(element, context)} ${getDisplayExpression2 ? `getDisplayExpression=${getDisplayExpression2}` : ""}  >`;
   },
   post: (element) => "</WmRadioset>",
-  imports: (element) => imports57
+  imports: (element) => imports48
 };
 
 // src/transpile/components/input/currency.transformer.ts
-var imports58 = [
+var imports49 = [
   {
     name: "WmCurrency",
     from: "@wavemaker-ai/react-runtime/components/input/currency"
@@ -45111,11 +45135,11 @@ var currency_transformer_default = {
     return `<WmCurrency ${isFormField ? " {...$formField}" : ""}  listener={fragment}  ${transformAttrs(element, context)}>`;
   },
   post: (element) => "</WmCurrency>",
-  imports: (element) => imports58
+  imports: (element) => imports49
 };
 
 // src/transpile/components/input/checkbox.transformer.ts
-var imports59 = [
+var imports50 = [
   {
     name: "WmCheckbox",
     from: "@wavemaker-ai/react-runtime/components/input/default/checkbox"
@@ -45145,11 +45169,11 @@ var checkbox_transformer_default = {
     return `<WmCheckbox ${isFormField ? " {...$formField}" : ""} listener={fragment} ${transformAttrs(element, context, transformNameInList)}>`;
   },
   post: (element, context) => "</WmCheckbox>",
-  imports: (element, context) => imports59
+  imports: (element, context) => imports50
 };
 
 // src/transpile/components/input/checkbox-set.transformer.ts
-var imports60 = [
+var imports51 = [
   {
     name: "WmCheckboxset",
     from: "@wavemaker-ai/react-runtime/components/input/default/checkboxset"
@@ -45169,11 +45193,11 @@ var checkbox_set_transformer_default = {
     return `<WmCheckboxset ${isFormField ? " {...$formField}" : ""} listener={fragment} ${extractDatasetInfo(element)} ${transformAttrs(element, context)} ${getDisplayExpression2 ? `getDisplayExpression=${getDisplayExpression2}` : ""} >`;
   },
   post: (element) => "</WmCheckboxset>",
-  imports: (element) => imports60
+  imports: (element) => imports51
 };
 
 // src/transpile/components/container/accordion.transformer.ts
-var imports61 = [
+var imports52 = [
   {
     name: "WmAccordion",
     from: "@wavemaker-ai/react-runtime/components/container/accordion"
@@ -45209,7 +45233,7 @@ var accordion_transformer_default = {
     }
     return "</WmAccordion>";
   },
-  imports: (element, context) => imports61,
+  imports: (element, context) => imports52,
   createComponent: (element, context) => {
     context.props = [];
     return createComponent2(element, context);
@@ -45217,7 +45241,7 @@ var accordion_transformer_default = {
 };
 
 // src/transpile/components/container/accordion-pane.transformer.ts
-var imports62 = [
+var imports53 = [
   {
     name: "WmAccordionPane",
     from: "@wavemaker-ai/react-runtime/components/container/accordion/accordion-pane"
@@ -45226,19 +45250,7 @@ var imports62 = [
 var accordion_pane_transformer_default = {
   pre: (element, context) => {
     transformRepeatChildAttr(element, `bind:fragment.item`, "bind:$item");
-    const isPreview = context.get("preview") === true;
-    if (isPreview) {
-      let partial2 = partial_content_transformer_default.pre(element, context) || "";
-      if (partial2) {
-        element.removeAttribute("name");
-        partial2 = `render={(props:Record<string, any>, onLoad:()=>void) => (${partial2})}`;
-      }
-      return `<WmAccordionPane ${transformAttrs(element, context)} ${partial2}>`;
-    }
-    let partial = partial_container_transformer_default.pre(element, context) || "";
-    if (partial) {
-      partial = `render={(props:Record<string, any>, onLoad:()=>void) => (${partial})}`;
-    }
+    const { partialAttr } = withPartialContainer(element, context, { prop: "render" });
     element.setAttribute(
       "key",
       element.getAttribute("title") || element.getAttribute("name") || ""
@@ -45248,14 +45260,14 @@ var accordion_pane_transformer_default = {
     if (typeofdynamic && name) {
       element.removeAttribute("name");
     }
-    return `<WmAccordionPane ${typeofdynamic && name ? `name={ "accordion_" + $index + "${name}" }` : ""}  ${transformAttrs(element, context)} ${partial}>`;
+    return `<WmAccordionPane ${typeofdynamic && name ? `name={ "accordion_" + $index + "${name}" }` : ""}  ${transformAttrs(element, context)} ${partialAttr}>`;
   },
   post: (element, context) => "</WmAccordionPane>",
-  imports: (element, context) => imports62.concat(partial_container_transformer_default.imports(element, context))
+  imports: (element, context) => imports53.concat(getPartialImports(element, context))
 };
 
 // src/transpile/components/input/file-upload.transformer.ts
-var imports63 = [
+var imports54 = [
   {
     name: "WmFileupload",
     from: "@wavemaker-ai/react-runtime/components/input/fileupload"
@@ -45283,11 +45295,11 @@ var file_upload_transformer_default = {
     return `<WmFileupload ${isFormField ? " {...$formField}" : ""} listener={fragment}  ${transformAttrs(element, context)}>`;
   },
   post: (element, context) => "</WmFileupload>",
-  imports: (element, context) => imports63
+  imports: (element, context) => imports54
 };
 
 // src/transpile/components/input/upload.transformer.ts
-var imports64 = [
+var imports55 = [
   {
     name: "WmUpload",
     from: "@wavemaker-ai/react-runtime/components/input/upload"
@@ -45299,11 +45311,11 @@ var upload_transformer_default = {
     return `<WmUpload ${isFormField ? " {...$formField}" : ""} listener={fragment}  ${transformAttrs(element, context)}>`;
   },
   post: (element, context) => "</WmUpload>",
-  imports: (element, context) => imports64
+  imports: (element, context) => imports55
 };
 
 // src/transpile/components/basic/html.transformer.ts
-var imports65 = [
+var imports56 = [
   { name: "WmHtml", from: "@wavemaker-ai/react-runtime/components/basic/html" }
 ];
 var html_transformer_default = {
@@ -45311,11 +45323,11 @@ var html_transformer_default = {
     return `<WmHtml ${transformAttrs(element, context)}>`;
   },
   post: (element, context) => "</WmHtml>",
-  imports: (element, context) => imports65
+  imports: (element, context) => imports56
 };
 
 // src/transpile/components/basic/progress-bar.transformer.ts
-var imports66 = [
+var imports57 = [
   {
     name: "WmProgressBar",
     from: "@wavemaker-ai/react-runtime/components/basic/progress-bar"
@@ -45326,11 +45338,11 @@ var progress_bar_transformer_default = {
     return `<WmProgressBar ${transformAttrs(element, context)}>`;
   },
   post: (element, context) => "</WmProgressBar>",
-  imports: (element, context) => imports66
+  imports: (element, context) => imports57
 };
 
 // src/transpile/components/container/repeat-template.transformer.ts
-var imports67 = [
+var imports58 = [
   {
     name: "WmRepeatTemplate",
     from: "@wavemaker-ai/react-runtime/components/container/repeat-template"
@@ -45339,11 +45351,11 @@ var imports67 = [
 var repeat_template_transformer_default = {
   pre: (element, context) => `<WmRepeatTemplate ${transformAttrs(element, context)}>`,
   post: (element, context) => "</WmRepeatTemplate>",
-  imports: (element, context) => imports67
+  imports: (element, context) => imports58
 };
 
 // src/transpile/components/navigation/menu.transformer.ts
-var imports68 = [
+var imports59 = [
   { name: "WmMenu", from: "@wavemaker-ai/react-runtime/components/navigation/menu" }
 ];
 var menu_transformer_default = {
@@ -45369,11 +45381,11 @@ var menu_transformer_default = {
       ${itemchildrenExpression ? `itemchildren=${itemchildrenExpression}` : ""}>`;
   },
   post: (element, context) => "</WmMenu>",
-  imports: (element, context) => imports68
+  imports: (element, context) => imports59
 };
 
 // src/transpile/components/basic/richtexteditor.transformer.ts
-var imports69 = [
+var imports60 = [
   {
     name: "WmRichtexteditor",
     from: "@wavemaker-ai/react-runtime/components/basic/richtexteditor"
@@ -45386,11 +45398,11 @@ var richtexteditor_transformer_default = {
     return `<WmRichtexteditor listener={fragment} ${isFormField ? " {...$formField}" : ""} ${transformAttrs(element, context)} ${onChange ? `onChange={${onChange}}` : ""}>`;
   },
   post: (element, context) => "</WmRichtexteditor>",
-  imports: (element, context) => imports69
+  imports: (element, context) => imports60
 };
 
 // src/transpile/components/basic/spinner.transformer.ts
-var imports70 = [
+var imports61 = [
   {
     name: "WmSpinner",
     from: "@wavemaker-ai/react-runtime/components/basic/spinner"
@@ -45399,11 +45411,11 @@ var imports70 = [
 var spinner_transformer_default = {
   pre: (element, context) => `<WmSpinner listener={fragment} ${transformAttrs(element, context)}>`,
   post: (element, context) => "</WmSpinner>",
-  imports: (element, context) => imports70
+  imports: (element, context) => imports61
 };
 
 // src/transpile/components/basic/progress-circle.transformer.ts
-var imports71 = [
+var imports62 = [
   {
     name: "WmProgressCircle",
     from: "@wavemaker-ai/react-runtime/components/basic/progress-circle"
@@ -45412,11 +45424,11 @@ var imports71 = [
 var progress_circle_transformer_default = {
   pre: (element, context) => `<WmProgressCircle listener={fragment} ${transformAttrs(element, context)}>`,
   post: (element, context) => "</WmProgressCircle>",
-  imports: (element, context) => imports71
+  imports: (element, context) => imports62
 };
 
 // src/transpile/components/basic/search.transformer.ts
-var imports72 = [
+var imports63 = [
   { name: "WmSearch", from: "@wavemaker-ai/react-runtime/components/basic/search" }
 ];
 var search_transformer_default = {
@@ -45444,11 +45456,11 @@ var search_transformer_default = {
       ${getDisplayimagesrc ? `displayimagesrc=${getDisplayimagesrc} ` : ``} ${onSelect ? `onSelect={${onSelect}}` : ""}>`;
   },
   post: (element, context) => "</WmSearch>",
-  imports: (element, context) => imports72
+  imports: (element, context) => imports63
 };
 
 // src/transpile/components/navigation/breadcrumb.transformer.ts
-var imports73 = [
+var imports64 = [
   {
     name: "WmBreadcrumb",
     from: "@wavemaker-ai/react-runtime/components/navigation/breadcrumb"
@@ -45457,11 +45469,11 @@ var imports73 = [
 var breadcrumb_transformer_default = {
   pre: (element, context) => `<WmBreadcrumb listener={fragment} ${transformAttrs(element, context)}`,
   post: (element, context) => "/>",
-  imports: (element, context) => imports73
+  imports: (element, context) => imports64
 };
 
 // src/transpile/components/input/color-picker.transformer.ts
-var imports74 = [
+var imports65 = [
   {
     name: "WmColorPicker",
     from: "@wavemaker-ai/react-runtime/components/input/color-picker"
@@ -45473,11 +45485,11 @@ var color_picker_transformer_default = {
     return `<WmColorPicker  ${isFormField ? " {...$formField}" : ""} listener={fragment}  ${transformAttrs(element, context)}>`;
   },
   post: (element) => "</WmColorPicker>",
-  imports: (element) => imports74
+  imports: (element) => imports65
 };
 
 // src/transpile/components/container/panel.transformer.ts
-var imports75 = [
+var imports66 = [
   {
     name: "WmPanel, {WmPanelFooter}",
     from: "@wavemaker-ai/react-runtime/components/container/panel"
@@ -45485,35 +45497,23 @@ var imports75 = [
 ];
 var panel_transformer_default = {
   pre: (element, context) => {
-    const isPreview = context.get("preview") === true;
-    if (isPreview) {
-      let partial2 = partial_content_transformer_default.pre(element, context) || "";
-      if (partial2) {
-        element.removeAttribute("name");
-        partial2 = `renderPartial={(props:Record<string, any>, onLoad:()=>void) => (${partial2})}`;
-      }
-      return `<WmPanel listener={fragment}  ${transformAttrs(element, context)} ${partial2}>`;
-    }
-    let partial = partial_container_transformer_default.pre(element, context) || "";
-    if (partial) {
-      partial = `renderPartial={(props:Record<string, any>, onLoad:()=>void) => (${partial})}`;
-    }
-    return `<WmPanel listener={fragment}  ${transformAttrs(element, context)} ${partial}>`;
+    const { partialAttr } = withPartialContainer(element, context, { prop: "renderPartial" });
+    return `<WmPanel listener={fragment}  ${transformAttrs(element, context)} ${partialAttr}>`;
   },
   post: (element, context) => "</WmPanel>",
-  imports: (element, context) => imports75.concat(partial_container_transformer_default.imports(element, context))
+  imports: (element, context) => imports66.concat(getPartialImports(element, context))
 };
 
 // src/transpile/components/container/panel-footer.transformer.ts
-var imports76 = [];
+var imports67 = [];
 var panel_footer_transformer_default = {
   pre: (element, context) => `<WmPanelFooter  ${transformAttrs(element, context)}>`,
   post: (element, context) => "</WmPanelFooter>",
-  imports: (element, context) => imports76
+  imports: (element, context) => imports67
 };
 
 // src/transpile/components/container/panel-content.transformer.ts
-var imports77 = [
+var imports68 = [
   {
     name: "WmPanelContent",
     from: "@wavemaker-ai/react-runtime/components/container/panel/components/panel-content"
@@ -45522,11 +45522,11 @@ var imports77 = [
 var panel_content_transformer_default = {
   pre: (element, context) => `<WmPanelContent ${transformAttrs(element, context)}>`,
   post: (element, context) => "</WmPanelContent>",
-  imports: (element, context) => imports77
+  imports: (element, context) => imports68
 };
 
 // src/transpile/components/input/epoch/date.transformer.ts
-var imports78 = [
+var imports69 = [
   { name: "WmDate", from: "@wavemaker-ai/react-runtime/components/input/epoch/date" }
 ];
 var date_transformer_default = {
@@ -45535,11 +45535,11 @@ var date_transformer_default = {
     return `<WmDate listener={fragment} ${isFormField ? " {...$formField}" : ""}  ${transformAttrs(element, context)}>`;
   },
   post: (element, context) => "</WmDate>",
-  imports: (element, context) => imports78
+  imports: (element, context) => imports69
 };
 
 // src/transpile/components/input/epoch/time.transformer.ts
-var imports79 = [
+var imports70 = [
   { name: "WmTime", from: "@wavemaker-ai/react-runtime/components/input/epoch/time" }
 ];
 var time_transformer_default = {
@@ -45548,11 +45548,11 @@ var time_transformer_default = {
     return `<WmTime listener={fragment} ${isFormField ? " {...$formField}" : ""} ${transformAttrs(element, context)}>`;
   },
   post: (element, context) => "</WmTime>",
-  imports: (element, context) => imports79
+  imports: (element, context) => imports70
 };
 
 // src/transpile/components/input/epoch/datetime.transformer.ts
-var imports80 = [
+var imports71 = [
   { name: "WmDatetime", from: "@wavemaker-ai/react-runtime/components/input/epoch/datetime" }
 ];
 var datetime_transformer_default = {
@@ -45561,11 +45561,11 @@ var datetime_transformer_default = {
     return `<WmDatetime  listener={fragment} ${isFormField ? " {...$formField}" : ""} ${transformAttrs(element, context)}>`;
   },
   post: (element, context) => "</WmDatetime>",
-  imports: (element, context) => imports80
+  imports: (element, context) => imports71
 };
 
 // src/transpile/components/dialogs/login-dialog.transformer.ts
-var imports81 = [
+var imports72 = [
   {
     name: "WmLoginDialog",
     from: "@wavemaker-ai/react-runtime/components/dialogs/login-dialog"
@@ -45596,11 +45596,11 @@ var login_dialog_transformer_default = {
     return `<WmLoginDialog eventsource={fragment?.Actions?.loginAction} listener={fragment} ${transformAttrs(element, context)} >`;
   },
   post: (element, context) => "</WmLoginDialog>",
-  imports: (element, context) => imports81
+  imports: (element, context) => imports72
 };
 
 // src/transpile/components/advanced/login.transformer.ts
-var imports82 = [
+var imports73 = [
   {
     name: "WmLogin",
     from: "@wavemaker-ai/react-runtime/components/advanced/login"
@@ -45619,21 +45619,21 @@ var login_transformer_default = {
     return `<WmLogin listener={fragment} eventSource={fragment?.Actions.loginAction} ${transformAttrs(element, context)} >`;
   },
   post: (element, context) => "</WmLogin>",
-  imports: (element, context) => imports82
+  imports: (element, context) => imports73
 };
 
 // src/transpile/components/input/calendar.transformer.ts
-var imports83 = [
+var imports74 = [
   { name: "WmCalendar", from: "@wavemaker-ai/react-runtime/components/input/calendar" }
 ];
 var calendar_transformer_default = {
   pre: (element, context) => `<WmCalendar listener={fragment} ${transformAttrs(element, context)}>`,
   post: (element, context) => "</WmCalendar>",
-  imports: (element, context) => imports83
+  imports: (element, context) => imports74
 };
 
 // src/transpile/components/advanced/marquee.transformer.ts
-var imports84 = [
+var imports75 = [
   {
     name: "WmMarquee",
     from: "@wavemaker-ai/react-runtime/components/advanced/marquee"
@@ -45642,11 +45642,11 @@ var imports84 = [
 var marquee_transformer_default = {
   pre: (element, context) => `<WmMarquee ${transformAttrs(element, context)}>`,
   post: (element, context) => "</WmMarquee>",
-  imports: (element, context) => imports84
+  imports: (element, context) => imports75
 };
 
 // src/transpile/components/advanced/carousel.transformer.ts
-var imports85 = [
+var imports76 = [
   {
     name: "WmCarousel",
     from: "@wavemaker-ai/react-runtime/components/advanced/carousel"
@@ -45686,7 +45686,7 @@ var carousel_transformer_default = {
     }
     return "</WmCarousel>";
   },
-  imports: (element, context) => imports85,
+  imports: (element, context) => imports76,
   createComponent: (element, context) => {
     if (!context.data.listCount) {
       context.props = context.get("old_props") || [];
@@ -45698,7 +45698,7 @@ var carousel_transformer_default = {
 };
 
 // src/transpile/components/advanced/carousel-template.transformer.ts
-var imports86 = [
+var imports77 = [
   {
     name: "WmCarouselTemplate",
     from: "@wavemaker-ai/react-runtime/components/advanced/carousel/template"
@@ -45707,21 +45707,21 @@ var imports86 = [
 var carousel_template_transformer_default = {
   pre: (element, context) => `<WmCarouselTemplate ${transformAttrs(element, context)}>`,
   post: (element, context) => "</WmCarouselTemplate>",
-  imports: (element, context) => imports86
+  imports: (element, context) => imports77
 };
 
 // src/transpile/components/chart/chart.transformer.ts
-var imports87 = [
+var imports78 = [
   { name: "WmChart", from: "@wavemaker-ai/react-runtime/components/chart" }
 ];
 var chart_transformer_default = {
   pre: (element, context) => `<WmChart listener={fragment} ${transformAttrs(element, context)} >`,
   post: (element, context) => "</WmChart>",
-  imports: (element, context) => imports87
+  imports: (element, context) => imports78
 };
 
 // src/transpile/components/input/chips.transformer.ts
-var imports88 = [
+var imports79 = [
   { name: "WmChips", from: "@wavemaker-ai/react-runtime/components/input/chips" }
 ];
 var chips_transformer_default = {
@@ -45735,66 +45735,54 @@ var chips_transformer_default = {
     return `<WmChips listener={fragment} ${isFormField ? " {...$formField}" : ""} ${getDisplayExpression2 ? `displayexpression=${getDisplayExpression2}` : ""} ${extractDatasetInfo(element)}  ${transformAttrs(element, context)}>`;
   },
   post: (element, context) => "</WmChips>",
-  imports: (element, context) => imports88
+  imports: (element, context) => imports79
 };
 
 // src/transpile/components/data/card/card.transformer.ts
-var imports89 = [
+var imports80 = [
   { name: "WmCard", from: "@wavemaker-ai/react-runtime/components/data/card" }
 ];
 var card_transformer_default = {
   pre: (element, context) => `<WmCard ${transformAttrs(element, context)} listener={fragment} cardItem={typeof $item !== "undefined" ? $item : {}}>`,
   post: (element, context) => "</WmCard>",
-  imports: (element, context) => imports89
+  imports: (element, context) => imports80
 };
 
 // src/transpile/components/data/card/card-content.transformer.ts
-var imports90 = [
+var imports81 = [
   { name: "WmCardContent", from: "@wavemaker-ai/react-runtime/components/data/card/card-content" }
 ];
 var card_content_transformer_default = {
   pre: (element, context) => {
-    const isPreview = context.get("preview") === true;
-    if (isPreview) {
-      let partial2 = partial_content_transformer_default.pre(element, context) || "";
-      if (partial2) {
-        element.removeAttribute("name");
-        partial2 = `renderPartial={(props:Record<string, any>, onLoad:()=>void) => (${partial2})}`;
-      }
-      return `<WmCardContent ${transformAttrs(element, context)} ${partial2}>`;
-    }
-    let partial = partial_container_transformer_default.pre(element, context) || "";
-    if (partial) {
-      partial = `renderPartial={(props:Record<string, any>, onLoad:()=>void) => (${partial})}`;
-    }
-    return `<WmCardContent ${transformAttrs(element, context)} ${partial}>`;
+    const { partialAttr } = withPartialContainer(element, context, { prop: "renderPartial" });
+    return `<WmCardContent ${transformAttrs(element, context)} ${partialAttr}>`;
   },
   post: (element, context) => "</WmCardContent>",
-  imports: (element, context) => imports90.concat(partial_container_transformer_default.imports(element, context))
+  imports: (element, context) => imports81.concat(getPartialImports(element, context))
 };
 
 // src/transpile/components/data/card/card-footer.transformer.ts
-var imports91 = [
+var imports82 = [
   { name: "WmCardFooter", from: "@wavemaker-ai/react-runtime/components/data/card/card-footer" }
 ];
 var card_footer_transformer_default = {
   pre: (element, context) => `<WmCardFooter ${transformAttrs(element, context)}>`,
   post: (element, context) => "</WmCardFooter>",
-  imports: (element, context) => imports91
+  imports: (element, context) => imports82
 };
 
 // src/transpile/components/data/card/card-actions.transformer.ts
-var imports92 = [
+var imports83 = [
   { name: "WmCardActions", from: "@wavemaker-ai/react-runtime/components/data/card/card-actions" }
 ];
 var card_actions_transformer_default = {
   pre: (element, context) => `<WmCardActions ${transformAttrs(element, context)}>`,
   post: (element, context) => "</WmCardActions>",
-  imports: (element, context) => imports92
+  imports: (element, context) => imports83
 };
 
 // src/transpile/components/basic/tree.transformer.ts
-var imports93 = [
+var imports84 = [
   {
     name: "WmTree",
     from: "@wavemaker-ai/react-runtime/components/basic/tree"
@@ -45803,11 +45791,11 @@ var imports93 = [
 var tree_transformer_default = {
   pre: (element, context) => `<WmTree  listener={fragment}  ${transformAttrs(element, context)}>`,
   post: (element, context) => "</WmTree>",
-  imports: (element, context) => imports93
+  imports: (element, context) => imports84
 };
 
 // src/transpile/components/container/wizard.transformer.ts
-var imports94 = [
+var imports85 = [
   { name: "WmWizard", from: "@wavemaker-ai/react-runtime/components/container/wizard" }
 ];
 var wizard_transformer_default = {
@@ -45874,7 +45862,7 @@ var wizard_transformer_default = {
     }
     return "</WmWizard>";
   },
-  imports: (element, context) => imports94,
+  imports: (element, context) => imports85,
   createComponent: (element, context) => {
     if (!context.data.listCount) {
       context.props = context.get("old_props") || [];
@@ -45886,7 +45874,7 @@ var wizard_transformer_default = {
 };
 
 // src/transpile/components/container/wizardstep.transformer.ts
-var imports95 = [
+var imports86 = [
   {
     name: "WmWizardstep",
     from: "@wavemaker-ai/react-runtime/components/container/wizard/wizard-step"
@@ -45921,44 +45909,20 @@ function getNearestWizardType(element) {
 }
 var wizardstep_transformer_default = {
   pre: (element, context) => {
-    const isPreview = context.get("preview") === true;
-    if (isPreview) {
-      let partial2 = partial_content_transformer_default.pre(element, context) || "";
-      if (partial2) {
-        element.removeAttribute("name");
-        partial2 = `render={(props:Record<string, any>, onLoad:()=>void) => (${partial2})}`;
-        return `<WmWizardstep ${transformAttrs(element, context)} ${partial2}>`;
-      }
-      if (element.childNodes && element.childNodes.length > 0) {
-        return `<WmWizardstep ${transformAttrs(element, context)}
-    render={(props:Record<string, any>, onLoad:()=>void) => (<>`;
-      }
-      return `<WmWizardstep ${transformAttrs(element, context)} >`;
-    }
-    let partial = partial_container_transformer_default.pre(element, context) || "";
-    if (partial) {
-      partial = `render={(props:Record<string, any>, onLoad:()=>void) => (${partial})}`;
-    }
+    const { partialAttr } = withPartialContainer(element, context, { prop: "render" });
     const onNext = getOnNext(element);
     const onPrev = getOnPrev(element);
     element.removeAttribute("on-next");
     element.removeAttribute("on-prev");
     const type = getNearestWizardType(element);
-    if ((type && type == "dynamic" || element.childNodes && element.childNodes.length > 0) && !partial) {
+    if ((type && type == "dynamic" || element.childNodes && element.childNodes.length > 0) && !partialAttr) {
       return `<WmWizardstep ${transformAttrs(element, context)}
     ${onNext ? `onNext={${onNext}}` : ""} ${onPrev ? `onPrev={${onPrev}}` : ""} render={(props:Record<string, any>, onLoad:()=>void) => (<>`;
     }
     return `<WmWizardstep ${transformAttrs(element, context)}
-    ${onNext ? `onNext={${onNext}}` : ""} ${onPrev ? `onPrev={${onPrev}}` : ""} ${partial} >`;
+    ${onNext ? `onNext={${onNext}}` : ""} ${onPrev ? `onPrev={${onPrev}}` : ""} ${partialAttr} >`;
   },
   post: (element, context) => {
-    const isPreview = context.get("preview") === true;
-    if (isPreview) {
-      const hasPartial2 = !!element.getAttribute("content");
-      if (hasPartial2) return "/>";
-      if (element.childNodes && element.childNodes.length > 0) return " </>)}/>";
-      return "</WmWizardstep>";
-    }
     const type = getNearestWizardType(element);
     const hasPartial = !!element.getAttribute("content");
     if ((type && type == "dynamic" || element.childNodes && element.childNodes.length > 0) && !hasPartial) {
@@ -45966,11 +45930,11 @@ var wizardstep_transformer_default = {
     }
     return "</WmWizardstep>";
   },
-  imports: (element, context) => imports95
+  imports: (element, context) => imports86
 };
 
 // src/transpile/components/container/wizardaction.transformer.ts
-var imports96 = [
+var imports87 = [
   {
     name: "WmWizardAction",
     from: "@wavemaker-ai/react-runtime/components/container/wizard/wizard-action"
@@ -46075,11 +46039,11 @@ renderActions={(actions: any) => (<>`;
 )}
 >
 </WmWizardAction>`,
-  imports: (element, context) => imports96
+  imports: (element, context) => imports87
 };
 
 // src/transpile/components/basic/message.transformer.ts
-var imports97 = [
+var imports88 = [
   {
     name: "WmMessage",
     from: "@wavemaker-ai/react-runtime/components/basic/message"
@@ -46088,48 +46052,14 @@ var imports97 = [
 var message_transformer_default = {
   pre: (element, context) => `<WmMessage ${transformAttrs(element, context)}>`,
   post: (element, context) => "</WmMessage>",
-  imports: (element, context) => imports97
+  imports: (element, context) => imports88
 };
 
-// src/transpile/components/data/liveform.transformer.ts
+// src/transpile/components/data/live-form-shared.ts
 var import_lodash9 = __toESM(require_lodash());
-var imports98 = [
-  { name: "WmLiveForm", from: "@wavemaker-ai/react-runtime/components/data/live-form" }
-];
 var getDataSetExpr = (element, bindExpr) => {
   return element.getAttribute("isLogin") ? "" : `${bindExpr}[widget.props.name] = newVal;`;
 };
-var getOnChangeExpr3 = (element) => {
-  var _a;
-  const formDataSet = ((_a = element.getAttribute("dataset")) == null ? void 0 : _a.split(":")) || [];
-  let bindExpr = (formDataSet == null ? void 0 : formDataSet.length) > 1 ? formDataSet[1] : null;
-  if (!bindExpr || (bindExpr == null ? void 0 : bindExpr.includes("Widgets"))) {
-    return "";
-  }
-  let currentNode = element.parentNode;
-  const variableArr = bindExpr.match(/fragment\.Variables\??\.[^.?]+/g);
-  const variableName = variableArr && variableArr.length ? variableArr[0] : null;
-  while (currentNode) {
-    if (currentNode.rawTagName === "wm-liveform") {
-      element.setAttribute("parentForm", currentNode.getAttribute("name") || "");
-      element.setAttribute("childdatasetnode", element.getAttribute("name") || "");
-      break;
-    } else if (currentNode.rawTagName === "wm-prefab" || currentNode.rawTagName === "wm-prefab-container") {
-      const prefabParentForm = currentNode.getAttribute("parentForm");
-      if (prefabParentForm) {
-        element.setAttribute("parentForm", prefabParentForm);
-      }
-    }
-    currentNode = currentNode.parentNode;
-  }
-  return `
-      ($event, widget, newVal, oldVal) => {
-        if(${variableName}?.twoWayBinding && newVal !== oldVal) {
-          ${bindExpr !== null ? getDataSetExpr(element, bindExpr) : ""}
-        }
-      }
-    `;
-};
 var getFormSubmitExpr2 = (element) => {
   const dataset = element.getAttribute("dataset");
   if (dataset) {
@@ -46169,23 +46099,54 @@ var getFormSuccessExpr = (element) => {
     }
   }
 };
-var pluckFormActionNodes2 = (element, actions = []) => {
+var getOnChangeExpr3 = (element, options) => {
+  var _a;
+  const formDataSet = ((_a = element.getAttribute("dataset")) == null ? void 0 : _a.split(":")) || [];
+  let bindExpr = (formDataSet == null ? void 0 : formDataSet.length) > 1 ? formDataSet[1] : null;
+  if (!bindExpr || (bindExpr == null ? void 0 : bindExpr.includes("Widgets"))) {
+    return "";
+  }
+  let currentNode = element.parentNode;
+  const variableArr = bindExpr.match(options.variableRegex);
+  const variableName = variableArr && variableArr.length ? variableArr[0] : null;
+  while (currentNode) {
+    if (currentNode.rawTagName === "wm-liveform") {
+      element.setAttribute("parentForm", currentNode.getAttribute("name") || "");
+      element.setAttribute("childdatasetnode", element.getAttribute("name") || "");
+      break;
+    } else if ((currentNode.rawTagName === "wm-prefab" || currentNode.rawTagName === "wm-prefab-container")) {
+      const prefabParentForm = currentNode.getAttribute("parentForm");
+      if (prefabParentForm) {
+        element.setAttribute("parentForm", prefabParentForm);
+      }
+    }
+    currentNode = currentNode.parentNode;
+  }
+  return `
+      ($event, widget, newVal, oldVal) => {
+        if(${variableName}?.twoWayBinding && newVal !== oldVal) {
+          ${bindExpr !== null ? getDataSetExpr(element, bindExpr) : ""}
+        }
+      }
+    `;
+};
+var pluckFormActionNodes2 = (element, actionTags, actions = []) => {
   if (element.childNodes.length) {
     (0, import_lodash9.forEach)(element.childNodes, (n) => {
       if (isHTMLElement(n) && n.rawTagName === "wm-form") {
         return;
-      } else if (isHTMLElement(n) && n.rawTagName === "wm-form-action") {
+      } else if (isHTMLElement(n) && actionTags.includes(n.rawTagName)) {
         actions.push(n);
         n.remove();
       } else {
-        pluckFormActionNodes2(n, actions);
+        pluckFormActionNodes2(n, actionTags, actions);
       }
     });
     return actions;
   }
 };
-var setFormActions2 = (element, context) => {
-  const formActions = pluckFormActionNodes2(element);
+var setFormActions2 = (element, context, actionTags) => {
+  const formActions = pluckFormActionNodes2(element, actionTags);
   const formFooter = parse5(`<wm-form-footer></wm-form-footer>`).firstChild;
   formActions.forEach((formAction) => {
     formAction.setAttribute("formKey", element.attrs["name"]);
@@ -46200,9 +46161,16 @@ var setFormActions2 = (element, context) => {
     formBody.childNodes.push(formFooter);
   }
 };
+
+// src/transpile/components/data/liveform.transformer.ts
+var imports89 = [
+  { name: "WmLiveForm", from: "@wavemaker-ai/react-runtime/components/data/live-form" }
+];
+var FORM_ACTION_TAGS = ["wm-form-action"];
 var liveform_transformer_default = {
   pre: (element, context) => {
-    const onChange = getOnChangeExpr3(element);
+    const onChange = getOnChangeExpr3(element, {
+      variableRegex: /fragment\.Variables\??\.[^.?]+/g});
     const formSubmit = getFormSubmitExpr2(element);
     const formSuccess = getFormSuccessExpr(element);
     const datasetAttr = element.getAttribute("dataset");
@@ -46214,7 +46182,7 @@ var liveform_transformer_default = {
         element.setAttribute("datasource", `{fragment?.Variables?.${variableName}}`);
       }
     }
-    setFormActions2(element);
+    setFormActions2(element, context, FORM_ACTION_TAGS);
     return `<WmLiveForm listener={fragment} ${transformAttrs(element, context)} 
       ${onChange ? `onChange={${onChange}}` : ""}
       ${formSuccess ? `formSuccess={${formSuccess}}` : ""}
@@ -46222,10 +46190,14 @@ var liveform_transformer_default = {
       ${datasourceAttr ? `datasource={${datasourceAttr}}` : ""}>`;
   },
   post: (element, context) => `</WmLiveForm>`,
-  imports: (element, context) => imports98
+  imports: (element, context) => imports89
 };
 
 // src/transpile/components/data/table/utils.ts
+var CUSTOM_PIPE_REGEX = /(custom(\s*:))/;
+function checkIsCustomPipeExpression(exp) {
+  return CUSTOM_PIPE_REGEX.test(exp);
+}
 function findNearestElement(element, tagName) {
   var _a, _b;
   let current = element.parentNode;
@@ -46276,9 +46248,35 @@ function transformTableColumnClassExpression(expression) {
   transformed = transformed.replace(/"([^"]*)"/g, "'$1'");
   return transformed;
 }
+function getFormatCellExpression(element, context) {
+  const binding = element.getAttribute("binding");
+  if (!binding || binding === "rowOperations") {
+    return null;
+  }
+  let formatPattern = element.getAttribute("custompipeformat") || element.getAttribute("formatpattern");
+  if (!formatPattern || formatPattern === "None") {
+    return null;
+  }
+  const columnValue = `row.getProperty('${binding}')`;
+  let pipeExpression = "";
+  if (checkIsCustomPipeExpression(formatPattern)) {
+    pipeExpression = `${columnValue} | ${formatPattern} : row`;
+  }
+  if (!pipeExpression) {
+    return null;
+  }
+  let transformed = bind_ex_transformer_default(pipeExpression, "fragment", "attr");
+  transformed = transformed.replace(/fragment\??\.row/g, "rowData");
+  transformed = transformed.replace(/\brow\./g, "rowData.");
+  transformed = transformed.replace(/\brow\b(?![a-zA-Z_$0-9])/g, "rowData");
+  transformed = resolveFormatContext(transformed, context);
+  transformed = addOptionalChaining(transformed);
+  transformed = transformed.replace(/(\w+)\?\.\s*\(/g, "$1(");
+  return transformed;
+}
 
 // src/transpile/components/data/table/table-column.transformer.ts
-var imports99 = [
+var imports90 = [
   { name: "WmTableColumn", from: "@wavemaker-ai/react-runtime/components/data/table/table-column" }
 ];
 function transformColAttr(element) {
@@ -46332,6 +46330,7 @@ var table_column_transformer_default = {
       updatedElement.setAttribute("class", combinedClass);
     }
     const template = element.childNodes.find((c) => isHTMLElement(c));
+    const formatCellExp = getFormatCellExpression(updatedElement, context);
     let customExp = null;
     const textNodes = element.childNodes.filter((c) => c.nodeType === NodeType.TEXT_NODE);
     for (const textNode of textNodes) {
@@ -46346,8 +46345,8 @@ var table_column_transformer_default = {
         break;
       }
     }
-    if (template || customExp) {
-      context.data.isInsideTableColumn = true;
+    if (template || customExp || formatCellExp) {
+      context.set("isInsideTableColumn", true);
       if (template) {
         transformRepeatChildAttr(template, "fragment.row", "rowData");
         const tableVarName = context.get("tableDatasetVariableName");
@@ -46357,9 +46356,10 @@ var table_column_transformer_default = {
         }
       }
       const hasElementChildren = element.childNodes.some((c) => isHTMLElement(c));
+      const cellContent = customExp || (formatCellExp ? `{${formatCellExp}}` : "");
       return `<WmTableColumn listener={fragment} ${!rowOperations ? `editWidgetType="${editWidgetType}"` : ""}  widgetType="${widgetType}" ${colClassAttr} ${transformAttrs(updatedElement, context)} 
       renderCellContent={(rowData:any , columnData : any) =>
-      (<> ${customExp ? `${customExp} </>)}` : ""} ${hasElementChildren ? "" : ">"}`;
+      (<> ${cellContent ? `${cellContent} </>)}` : ""} ${hasElementChildren ? "" : ">"}`;
     }
     return `<WmTableColumn listener={fragment} ${!rowOperations ? `editWidgetType="${editWidgetType}"` : ""}  widgetType="${widgetType}" ${colClassAttr} ${transformAttrs(updatedElement, context)}>`;
   },
@@ -46370,16 +46370,15 @@ var table_column_transformer_default = {
     }
     return "</WmTableColumn>";
   },
-  imports: (element, context) => imports99
+  imports: (element, context) => imports90
 };
 
 // src/transpile/components/data/table/table-row.transformer.ts
-var imports100 = [
+var imports91 = [
   { name: "WmTableRow", from: "@wavemaker-ai/react-runtime/components/data/table/table-row" }
 ];
 var table_row_transformer_default = {
   pre: (element, context) => {
-    const isPreview = context.get("preview") === true;
     const content = element.getAttribute("content");
     const widgetType = element.getAttribute("widget-type") || "button";
     const displayName = element.getAttribute("display-name");
@@ -46389,29 +46388,24 @@ var table_row_transformer_default = {
     }
     element.removeAttribute("widget-type");
     let partial = "";
-    if (isPreview && content) {
-      element.setAttribute("is-table-row", "true");
-      let partial2 = partial_content_transformer_default.pre(element, context) || "";
-      if (partial2) {
-        element.removeAttribute("name");
-        partial2 = `renderPartial={(props:Record<string, any>, onLoad:()=>void,currentItem:any) => (${partial2})}`;
-      }
-      element.removeAttribute("is-table-row");
-      return `<WmTableRow listener={fragment} widgetType="${widgetType}" ${transformAttrs(element, context)} ${partial2}`;
-    } else if (content) {
+    if (content) {
       element.setAttribute("is-table-row", "true");
-      partial = partial_container_transformer_default.pre(element, context) || "";
-      partial = `renderPartial={(props:Record<string, any>, onLoad:()=>void, currentItem:any) => (${partial})}`;
+      element.setAttribute("rowType", "expansion");
+      const { partialAttr } = withPartialContainer(element, context, {
+        prop: "renderPartial",
+        extraParams: "currentItem:any"
+      });
+      partial = partialAttr;
       element.removeAttribute("is-table-row");
     }
     return `<WmTableRow listener={fragment} widgetType="${widgetType}" ${transformAttrs(element, context)} ${partial}`;
   },
   post: (element, context) => "/>",
-  imports: (element, context) => imports100.concat(partial_container_transformer_default.imports(element, context))
+  imports: (element, context) => imports91.concat(getPartialImports(element, context))
 };
 
 // src/transpile/components/data/table/table-row-action.transformer.ts
-var imports101 = [
+var imports92 = [
   {
     name: "WmTableRowAction",
     from: "@wavemaker-ai/react-runtime/components/data/table/table-row-action"
@@ -46437,11 +46431,11 @@ var table_row_action_transformer_default = {
     return `<WmTableRowAction listener={fragment} widgettype="${widgetType}" ${onClickExpr} ${transformAttrs(element, context)}`;
   },
   post: (element, context) => "/>",
-  imports: (element, context) => imports101
+  imports: (element, context) => imports92
 };
 
 // src/transpile/components/data/table/table-action.transformer.ts
-var imports102 = [
+var imports93 = [
   { name: "WmTableAction", from: "@wavemaker-ai/react-runtime/components/data/table/table-action" }
 ];
 var table_action_transformer_default = {
@@ -46462,11 +46456,11 @@ var table_action_transformer_default = {
     return `<WmTableAction listener={fragment} ${onClickExpr} ${transformAttrs(element, context)}`;
   },
   post: (element, context) => "/>",
-  imports: (element, context) => imports102
+  imports: (element, context) => imports93
 };
 
 // src/transpile/components/data/table/table-group.transformer.ts
-var imports103 = [
+var imports94 = [
   {
     name: "WmTableGroup",
     from: "@wavemaker-ai/react-runtime/components/data/table/table-group"
@@ -46475,11 +46469,11 @@ var imports103 = [
 var table_group_transformer_default = {
   pre: (element, context) => `<WmTableGroup  ${transformAttrs(element, context)}>`,
   post: (element, context) => "</WmTableGroup>",
-  imports: (element, context) => imports103
+  imports: (element, context) => imports94
 };
 
 // src/transpile/components/data/table/live-table.transformer.ts
-var imports104 = [
+var imports95 = [
   { name: "WmLiveTable", from: "@wavemaker-ai/react-runtime/components/data/table/live-table" }
 ];
 var live_table_transformer_default = {
@@ -46487,11 +46481,11 @@ var live_table_transformer_default = {
     return `<WmLiveTable listener={fragment} ${transformAttrs(element, context)}>`;
   },
   post: (element, context) => "</WmLiveTable>",
-  imports: (element, context) => imports104
+  imports: (element, context) => imports95
 };
 
 // src/transpile/components/data/table/table.transformer.ts
-var imports105 = [
+var imports96 = [
   { name: "WmTable", from: "@wavemaker-ai/react-runtime/components/data/table" }
 ];
 var table_transformer_default = {
@@ -46499,8 +46493,10 @@ var table_transformer_default = {
     const datasetAttr = element.getAttribute("dataset");
     const datasourceAttr = element.getAttribute("datasource");
     const binddatasetAttr = element.getAttribute("binddataset");
-    if (datasetAttr && datasetAttr.startsWith("bind:fragment.Variables.") && datasetAttr.endsWith(".dataSet")) {
-      const match = datasetAttr.match(/^bind:fragment\.Variables\.([^.]+)\.dataSet$/);
+    if (datasetAttr && datasetAttr.startsWith("bind:fragment.Variables.") && datasetAttr.includes(".dataSet")) {
+      const match = datasetAttr.match(
+        /^bind:fragment\.Variables\.([^.]+)\.dataSet(?=[^A-Za-z0-9_]|$)/
+      );
       if (match) {
         const variableName = match[1];
         context.set("tableDatasetVariableName", variableName);
@@ -46538,67 +46534,32 @@ var table_transformer_default = {
     context.set("tableDatasetVariableName", void 0);
     return "</WmTable>";
   },
-  imports: (element, context) => imports105
+  imports: (element, context) => imports96
 };
 
 // src/transpile/components/data/livefilter.transformer.ts
-var import_lodash10 = __toESM(require_lodash());
-var imports106 = [
+var imports97 = [
   { name: "WmLiveFilter", from: "@wavemaker-ai/react-runtime/components/data/live-filter" }
 ];
-var pluckFormActionNodes3 = (element, actions = []) => {
-  if (element.childNodes.length) {
-    (0, import_lodash10.forEach)(element.childNodes, (n) => {
-      if (isHTMLElement(n) && n.rawTagName === "wm-form") {
-        return;
-      } else if (isHTMLElement(n) && (n.rawTagName === "wm-form-action" || n.rawTagName === "wm-filter-action")) {
-        actions.push(n);
-        n.remove();
-      } else {
-        pluckFormActionNodes3(n, actions);
-      }
-    });
-    return actions;
-  }
-};
-var setFormActions3 = (element, context) => {
-  const formActions = pluckFormActionNodes3(element);
-  const formFooter = parse5(`<wm-form-footer></wm-form-footer>`).firstChild;
-  formActions.forEach((formAction) => {
-    formAction.setAttribute("formKey", element.attrs["name"]);
-    formFooter.appendChild(formAction);
-  });
-  const container = parse5(`<wm-container class="form-elements"></wm-container>`).firstChild;
-  const formBody = parse5(`<wm-form-body></wm-form-body>`).firstChild;
-  formBody.childNodes.push(container);
-  container.childNodes = element.childNodes;
-  element.childNodes = [formBody];
-  if (formActions.length) {
-    formBody.childNodes.push(formFooter);
-  }
-};
+var FILTER_ACTION_TAGS = ["wm-form-action", "wm-filter-action"];
 var livefilter_transformer_default = {
   pre: (element, context) => {
     var _a;
-    setFormActions3(element);
+    setFormActions2(element, context, FILTER_ACTION_TAGS);
     const dataSource = (_a = element.getAttribute("dataset")) == null ? void 0 : _a.split(".")[2];
     return `<WmLiveFilter  listener={fragment}  dataSource="${dataSource}" ${transformAttrs(element, context)} >`;
   },
   post: (element, context) => `</WmLiveFilter>`,
-  imports: (element, context) => imports106
+  imports: (element, context) => imports97
 };
 
 // src/transpile/components/data/live-filter-field.transformer.ts
-var imports107 = [
+var imports98 = [
   {
     name: "WmLiveFilterField",
     from: "@wavemaker-ai/react-runtime/components/data/form/form-field"
   }
 ];
-var getAttribute2 = (element, attrName) => {
-  const value = element.getAttribute(attrName);
-  return value == null ? void 0 : value.replace(/"/g, "&quot;");
-};
 var getStyleProps = (element) => {
   const attributes = [
     "fontsize",
@@ -46610,7 +46571,7 @@ var getStyleProps = (element) => {
     "fontstyle"
   ];
   return attributes.reduce((propsString, attr) => {
-    const value = getAttribute2(element, attr);
+    const value = getAttribute(element, attr);
     if (value !== void 0) {
       propsString += `${attr}=${value} `;
     }
@@ -46618,14 +46579,14 @@ var getStyleProps = (element) => {
   }, "");
 };
 var extractField2 = (element, context, filterElement) => {
-  const widgetType = getAttribute2(element, "widget") || "text";
-  const widgetName = getAttribute2(element, "key") || getAttribute2(element, "name") || "text_filterWidget";
+  const widgetType = getAttribute(element, "widget") || "text";
+  const widgetName = getAttribute(element, "key") || getAttribute(element, "name") || "text_filterWidget";
   const isRange = element.getAttribute("is-range") === "true";
   const result = getFilterWidgetTemplate(
     widgetType,
     widgetName,
     element,
-    getAttribute2(filterElement, "filterdata"),
+    getAttribute(filterElement, "filterdata"),
     false
   );
   if (widgetType === "number" && isRange) {
@@ -46633,7 +46594,7 @@ var extractField2 = (element, context, filterElement) => {
       widgetType,
       widgetName,
       element,
-      getAttribute2(filterElement, "filterdata"),
+      getAttribute(filterElement, "filterdata"),
       true
     );
     return {
@@ -46646,31 +46607,31 @@ var extractField2 = (element, context, filterElement) => {
 var getFilterWidgetTemplate = (widgetType, widgetName, element, filterDataVariable, isMaxWidget = false) => {
   var _a, _b;
   widgetName = widgetName.replace(".", "_");
-  const inputName = (_b = (_a = getAttribute2(element, "key")) == null ? void 0 : _a.split(".")) == null ? void 0 : _b.at(-1);
-  var labelMarkup = !isMaxWidget && getAttribute2(element, "displayname") ? `<wm-label 
+  const inputName = (_b = (_a = getAttribute(element, "key")) == null ? void 0 : _a.split(".")) == null ? void 0 : _b.at(-1);
+  var labelMarkup = !isMaxWidget && getAttribute(element, "displayname") ? `<wm-label 
     required="bind:$formField.required"
     htmlFor="${inputName}"
     caption="bind:$formField.displayname"
     class="app-label control-label filterfield-label"
     conditionalclass="bind:$formField.captionCls + ' ' + $formField.invalidCls"
     name="${widgetName}_filterLabel"></wm-label>` : "";
-  const onFocus = getAttribute2(element, "on-focus");
+  const onFocus = getAttribute(element, "on-focus");
   if (onFocus) {
     element.removeAttribute("on-focus");
   }
-  const onBlur = getAttribute2(element, "on-blur");
+  const onBlur = getAttribute(element, "on-blur");
   if (onBlur) {
     element.removeAttribute("on-blur");
   }
-  const onTap = getAttribute2(element, "on-tap");
+  const onTap = getAttribute(element, "on-tap");
   if (onTap) {
     element.removeAttribute("on-tap");
   }
-  const placeholder = getAttribute2(element, "placeholder");
+  const placeholder = getAttribute(element, "placeholder");
   if (placeholder) {
     element.removeAttribute("placeholder");
   }
-  const filterfieldName = getAttribute2(element, "name");
+  const filterfieldName = getAttribute(element, "name");
   const widgetNameSuffix = isMaxWidget ? "_maxWidget" : "";
   const datavalueBinding = isMaxWidget ? "bind:$formField.maxDataValue || $formField.maxdefaultvalue" : "bind:$formField.datavalue || $formField.defaultvalue";
   const isMaxWidgetProp = isMaxWidget ? "isMaxWidget={true}" : "";
@@ -46696,6 +46657,7 @@ var getFilterWidgetTemplate = (widgetType, widgetName, element, filterDataVariab
   };
 };
 var getWidgetMarkup2 = (widgetType, widgetName, commonFields, element) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
   let tmpl = "";
   const getDisplayExpr = element.getAttribute("displayexpression") || element.getAttribute("displaylabel");
   const displayExp = getDisplayExpr ? `displayexpression='${getDisplayExpr.replace(/'/g, "&apos;")}'` : "";
@@ -46708,20 +46670,20 @@ var getWidgetMarkup2 = (widgetType, widgetName, commonFields, element) => {
     currentNode = currentNode.parentNode;
   }
   const isFloatingFilter = currentNode.getAttribute("captionposition") === "floating";
-  const floatinglabel = filterFieldTags.includes(widgetType) && isFloatingFilter ? `floatinglabel='${element.getAttribute("displayname")}'` : "";
+  const floatinglabel = filterFieldTags.includes(widgetType) && isFloatingFilter ? `floatinglabel="${(_a = element.getAttribute("displayname")) == null ? void 0 : _a.replace(/"/g, "&quot;")}"` : "";
   const dateTimeDialogTags = ["date", "time", "datetime"];
   const isDateTimeTag = dateTimeDialogTags.includes(widgetType);
-  const dateheadertitle = isDateTimeTag && element.getAttribute("dateheadertitle") ? `dateheadertitle='${element.getAttribute("dateheadertitle")}'` : "";
-  const dateconfirmationtitle = isDateTimeTag && element.getAttribute("dateconfirmationtitle") ? `dateconfirmationtitle='${element.getAttribute("dateconfirmationtitle")}'` : "";
-  const datecanceltitle = isDateTimeTag && element.getAttribute("datecanceltitle") ? `datecanceltitle='${element.getAttribute("datecanceltitle")}'` : "";
-  const timeheadertitle = isDateTimeTag && element.getAttribute("timeheadertitle") ? `timeheadertitle='${element.getAttribute("timeheadertitle")}'` : "";
-  const timeconfirmationtitle = isDateTimeTag && element.getAttribute("timeconfirmationtitle") ? `timeconfirmationtitle='${element.getAttribute("timeconfirmationtitle")}'` : "";
-  const timecanceltitle = isDateTimeTag && element.getAttribute("timecanceltitle") ? `timecanceltitle='${element.getAttribute("timecanceltitle")}'` : "";
-  const outputformat = element.getAttribute("outputformat") ? `outputformat='${element.getAttribute("outputformat")}'` : ``;
+  const dateheadertitle = isDateTimeTag && element.getAttribute("dateheadertitle") ? `dateheadertitle="${(_b = element.getAttribute("dateheadertitle")) == null ? void 0 : _b.replace(/"/g, "&quot;")}"` : "";
+  const dateconfirmationtitle = isDateTimeTag && element.getAttribute("dateconfirmationtitle") ? `dateconfirmationtitle="${(_c = element.getAttribute("dateconfirmationtitle")) == null ? void 0 : _c.replace(/"/g, "&quot;")}"` : "";
+  const datecanceltitle = isDateTimeTag && element.getAttribute("datecanceltitle") ? `datecanceltitle="${(_d = element.getAttribute("datecanceltitle")) == null ? void 0 : _d.replace(/"/g, "&quot;")}"` : "";
+  const timeheadertitle = isDateTimeTag && element.getAttribute("timeheadertitle") ? `timeheadertitle="${(_e = element.getAttribute("timeheadertitle")) == null ? void 0 : _e.replace(/"/g, "&quot;")}"` : "";
+  const timeconfirmationtitle = isDateTimeTag && element.getAttribute("timeconfirmationtitle") ? `timeconfirmationtitle="${(_f = element.getAttribute("timeconfirmationtitle")) == null ? void 0 : _f.replace(/"/g, "&quot;")}"` : "";
+  const timecanceltitle = isDateTimeTag && element.getAttribute("timecanceltitle") ? `timecanceltitle="${(_g = element.getAttribute("timecanceltitle")) == null ? void 0 : _g.replace(/"/g, "&quot;")}"` : "";
+  const outputformat = element.getAttribute("outputformat") ? `outputformat="${(_h = element.getAttribute("outputformat")) == null ? void 0 : _h.replace(/"/g, "&quot;")}"` : ``;
   switch (widgetType) {
     case "text":
     case "password":
-      let inputtype = widgetType === "password" ? "password" : getAttribute2(element, "inputtype");
+      let inputtype = widgetType === "password" ? "password" : getAttribute(element, "inputtype");
       inputtype = inputtype ? `type=${inputtype}` : "";
       tmpl = `<wm-text ${inputtype} ${commonFields} 
                 updateon="bind:$formField.updateon"
@@ -46864,10 +46826,10 @@ var getWidgetMarkup2 = (widgetType, widgetName, commonFields, element) => {
                 ></wm-slider>`;
       break;
     case "rating":
-      let showcaptions = getAttribute2(element, "showcaptions");
+      let showcaptions = getAttribute(element, "showcaptions");
       showcaptions = showcaptions ? `showcaptions="bind:$formField.showcaptions"` : "";
       tmpl += `<wm-rating ${commonFields} ${displayExp}
-                ${getAttribute2(element, "dataset") ? 'dataset="bind:$formField.dataset"' : ""}
+                ${getAttribute(element, "dataset") ? 'dataset="bind:$formField.dataset"' : ""}
                 displayfield="bind:$formField.displayfield || 'value'"
                 datafield="bind:$formField.datafield || 'key'"
                 ${showcaptions}
@@ -46876,16 +46838,16 @@ var getWidgetMarkup2 = (widgetType, widgetName, commonFields, element) => {
       break;
     case "fileupload":
     case "file":
-      const onSelect = getAttribute2(element, "on-select");
-      const onDelete = getAttribute2(element, "on-delete");
+      const onSelect = getAttribute(element, "on-select");
+      const onDelete = getAttribute(element, "on-delete");
       tmpl = `<wm-fileupload ${commonFields} 
                 ${onSelect ? 'on-select="onSelect"' : ""}
                 ${onDelete ? 'on-delete="onDelete"' : ""}
       ></wm-fileupload>`;
       break;
     case "upload":
-      const onSelectUpload = getAttribute2(element, "on-select");
-      const onDeleteUpload = getAttribute2(element, "on-delete");
+      const onSelectUpload = getAttribute(element, "on-select");
+      const onDeleteUpload = getAttribute(element, "on-delete");
       tmpl = `<wm-upload ${commonFields} 
                 ${onSelectUpload ? 'on-select="onSelect"' : ""}
                 ${onDeleteUpload ? 'on-delete="onDelete"' : ""}
@@ -46906,7 +46868,7 @@ var getWidgetMarkup2 = (widgetType, widgetName, commonFields, element) => {
 };
 var live_filter_field_transformer_default = {
   pre: (element, context) => {
-    const widgetType = getAttribute2(element, "widget") || "text" /* TEXT */;
+    const widgetType = getAttribute(element, "widget") || "text" /* TEXT */;
     let currentNode = element.parentNode;
     while (currentNode) {
       if (currentNode.rawTagName === "wm-livefilter" || currentNode.getAttribute("type") === "dynamic") {
@@ -46989,12 +46951,12 @@ var live_filter_field_transformer_default = {
     return `<WmLiveFilterField  ${filterScope || ""} field="true" ${fieldcolumn ? `fieldcol="${fieldcolumn}"` : ""}    ${transformAttrs(element, context)} renderFormFields={($formField) => (<>`;
   },
   post: (element, context) => "</>)}></WmLiveFilterField>",
-  imports: (element, context) => imports107,
+  imports: (element, context) => imports98,
   createComponent: (element, context) => createComponent2(element, context)
 };
 
 // src/transpile/components/data/form/dynamic-fields.transformer.ts
-var imports108 = [
+var imports99 = [
   {
     name: "WmDynamicFields",
     from: "@wavemaker-ai/react-runtime/components/data/form/dynamic-fields"
@@ -47011,11 +46973,11 @@ var dynamic_fields_transformer_default = {
     return `<WmDynamicFields listener={fragment} ${beforeRender ? `onBeforeRender={${beforeRender}}` : ""}  ${transformAttrs(element, context)}`;
   },
   post: (element, context) => "/>",
-  imports: (element, context) => imports108
+  imports: (element, context) => imports99
 };
 
 // src/transpile/components/container/linear-layout/linear-layout.ts
-var imports109 = [
+var imports100 = [
   {
     name: "WmLinearlayout",
     from: "@wavemaker-ai/react-runtime/components/container/linear-layout"
@@ -47024,11 +46986,11 @@ var imports109 = [
 var linear_layout_default = {
   pre: (element, context) => `<WmLinearlayout iswidget="false" ${transformAttrs(element, context)}>`,
   post: (element, context) => "</WmLinearlayout>",
-  imports: (element, context) => imports109
+  imports: (element, context) => imports100
 };
 
 // src/transpile/components/container/linear-layout/linear-layout-item.ts
-var imports110 = [
+var imports101 = [
   {
     name: "WmLinearlayoutItem",
     from: "@wavemaker-ai/react-runtime/components/container/linear-layout/linear-layout-item"
@@ -47037,7 +46999,7 @@ var imports110 = [
 var linear_layout_item_default = {
   pre: (element, context) => `<WmLinearlayoutItem iswidget="false" ${transformAttrs(element, context)}>`,
   post: (element, context) => "</WmLinearlayoutItem>",
-  imports: (element, context) => imports110
+  imports: (element, context) => imports101
 };
 
 // src/transpile/components/wmx-component/wmx-component.transformer.ts
@@ -47194,17 +47156,17 @@ function ensureRegistered() {
 }
 function transpileVariableDefinitions(variables, appUrl, scope) {
   ensureRegistered();
-  const imports111 = [];
-  const transformed = Object.values(variables != null ? variables : {}).map((v) => variable_transformer_default(v, scope, appUrl, imports111)).filter((v) => !!v);
+  const imports102 = [];
+  const transformed = Object.values(variables != null ? variables : {}).map((v) => variable_transformer_default(v, scope, appUrl, imports102)).filter((v) => !!v);
   return {
     variables: transformed.filter((v) => v.group === "variable"),
     actions: transformed.filter((v) => v.group === "action"),
-    imports: imports111
+    imports: imports102
   };
 }
 
 // src/transpile/serialize-variables.ts
-var import_lodash11 = __toESM(require_lodash());
+var import_lodash10 = __toESM(require_lodash());
 var isEvalExpression = (val) => /^[^\.]+\.eval\(/.test(val);
 var processMapMarker = (marker) => {
   const match = marker.match(/^__MAP__(.+?)__STRUCTURE__(.+?)__PARENT__(.+?)__ENDMAP__$/);
@@ -47242,7 +47204,7 @@ var processMapMarker = (marker) => {
               parts.push(`"${key}":${formatValue(overrideValue)}`);
             }
           } else {
-            if ((0, import_lodash11.isString)(overrideValue) && isEvalExpression(overrideValue)) {
+            if ((0, import_lodash10.isString)(overrideValue) && isEvalExpression(overrideValue)) {
               const unwrapMatch = overrideValue.match(/\.eval\(\(\)\s*=>\s*(.+)\)$/);
               if (unwrapMatch) {
                 parts.push(`"${key}":${unwrapMatch[1]}`);
@@ -47272,7 +47234,7 @@ var processMapMarker = (marker) => {
   return `${parentValue}.${arrayProp}.map(item=>(${mapBody}))`;
 };
 var formatValue = (val) => {
-  if ((0, import_lodash11.isString)(val)) {
+  if ((0, import_lodash10.isString)(val)) {
     if (val.startsWith("__MAP__")) {
       return processMapMarker(val);
     }
@@ -47280,7 +47242,7 @@ var formatValue = (val) => {
       return val;
     }
     return JSON.stringify(val);
-  } else if ((0, import_lodash11.isNumber)(val) || val === true || val === false || val === null) {
+  } else if ((0, import_lodash10.isNumber)(val) || val === true || val === false || val === null) {
     return String(val);
   } else if (Array.isArray(val)) {
     return JSON.stringify(val);
@@ -47330,10 +47292,10 @@ var stringifyObject = (obj) => {
         parts.push(`"${key}":${scopeVar}.eval(() => ({${body}}))`);
       } else {
         const baseFormatted = formatValue(baseVal);
-        const baseSpread = (0, import_lodash11.isString)(baseVal) && (baseVal.trim().startsWith("{") || baseVal.trim().startsWith("[")) ? `JSON.parse(${baseFormatted})` : baseFormatted;
+        const baseSpread = (0, import_lodash10.isString)(baseVal) && (baseVal.trim().startsWith("{") || baseVal.trim().startsWith("[")) ? `JSON.parse(${baseFormatted})` : baseFormatted;
         let hasMapMarker = false;
         for (const nVal of Object.values(nestedProps)) {
-          if ((0, import_lodash11.isString)(nVal) && nVal.startsWith("__MAP__")) {
+          if ((0, import_lodash10.isString)(nVal) && nVal.startsWith("__MAP__")) {
             hasMapMarker = true;
             break;
           }
@@ -47341,7 +47303,7 @@ var stringifyObject = (obj) => {
         if (hasMapMarker) {
           const processedProps = [`...${baseSpread}`];
           for (const [nKey, nVal] of Object.entries(nestedProps)) {
-            if ((0, import_lodash11.isString)(nVal) && nVal.startsWith("__MAP__")) {
+            if ((0, import_lodash10.isString)(nVal) && nVal.startsWith("__MAP__")) {
               processedProps.push(`"${nKey}":${processMapMarker(nVal)}`);
             } else {
               processedProps.push(`"${nKey}":${formatValue(nVal)}`);
@@ -47444,12 +47406,12 @@ var stringifyModelParams = (input, scope) => {
 var quoteIfString = (arg) => {
   if (arg === "") return `"${arg}"`;
   if (!isNaN(arg) || arg === "true" || arg === "false") return arg;
-  if ((0, import_lodash11.isString)(arg) && (isEvalExpression(arg) || arg.trim().startsWith("() =>"))) return arg;
-  if ((0, import_lodash11.isString)(arg) && !isEvalExpression(arg)) return JSON.stringify(arg);
+  if ((0, import_lodash10.isString)(arg) && (isEvalExpression(arg) || arg.trim().startsWith("() =>"))) return arg;
+  if ((0, import_lodash10.isString)(arg) && !isEvalExpression(arg)) return JSON.stringify(arg);
   return arg;
 };
 var quoteKeyIfHyphen = (str) => {
-  if ((0, import_lodash11.isString)(str) && str.includes("-")) return JSON.stringify(str);
+  if ((0, import_lodash10.isString)(str) && str.includes("-")) return JSON.stringify(str);
   return str;
 };
 
@@ -47576,6 +47538,9 @@ function serializeVariableEntry(v, scope, isPrefabApp, isPrefabScope, prefabName
     lines.push(`  isStaticParams: ${stringify3(v.isStaticParams)},`);
     lines.push(`  saveInPhonegap: ${v.saveInPhonegap},`);
     lines.push(`  crudOperationId: '${v.crudOperationId}',`);
+    if (v._id) {
+      lines.push(`  _id: '${v._id}',`);
+    }
     lines.push(`  transformationRequired: ${v.transformationRequired},`);
     if (isPrefabScope) {
       lines.push(`  baseUrl: ${scope}.baseUrl + '/prefabs/' + ${scope}.prefabname,`);