@wavemaker-ai/react-codegen 1.0.0-rc.324 → 1.0.0-rc.328

package/dist/transpiler/index.mjs

@@ -4567,9 +4567,9 @@ var require_lodash = __commonJS({
         }
         var camelCase = createCompounder(function(result2, word, index) {
           word = word.toLowerCase();
-          return result2 + (index ? capitalize5(word) : word);
+          return result2 + (index ? capitalize4(word) : word);
         });
-        function capitalize5(string) {
+        function capitalize4(string) {
           return upperFirst2(toString(string).toLowerCase());
         }
         function deburr(string) {
@@ -5178,7 +5178,7 @@ var require_lodash = __commonJS({
         lodash.add = add;
         lodash.attempt = attempt;
         lodash.camelCase = camelCase;
-        lodash.capitalize = capitalize5;
+        lodash.capitalize = capitalize4;
         lodash.ceil = ceil;
         lodash.clamp = clamp;
         lodash.clone = clone2;
@@ -38981,6 +38981,7 @@ var NodeType = import_dist.default.NodeType;
 var esm_default = import_dist.default;
 
 // src/utils.browser.ts
+var appLocaleRegex = /(fragment\.)?(?:App\.)?appLocale(?:\.messages)?(?:\[(['"])([^'"]+)\2\]|\.([a-zA-Z0-9_]+))/g;
 function isValid(expr) {
   try {
     (0, import_parser.parse)(expr, { sourceType: "module", plugins: ["optionalChaining"] });
@@ -39249,12 +39250,27 @@ var addOptionalChaining = (bindPath, options = {}) => {
   }
   return result;
 };
+var fixURLPath = (file_content, basePath, isAppCss) => {
+  let updatedContent = file_content.replace(
+    /url\((['"]?)resources/g,
+    `url($1${basePath || ""}/resources`
+  );
+  if (isAppCss) {
+    updatedContent = updatedContent.replace(
+      /url\((['"])(?!\/|http|data:)([^'"]+)\1\)/g,
+      (match, quote, url) => {
+        const fixedUrl = url.startsWith("/") ? url : `/${url}`;
+        return `url(${quote}${fixedUrl}${quote})`;
+      }
+    );
+  }
+  return updatedContent;
+};
 var transformAppLocale = (exp) => {
   if (exp.startsWith("fragment?.Prefab") || exp.startsWith("fragment.Prefab")) {
     exp = exp.replace("fragment?.Prefab", "fragment");
     exp = exp.replace("fragment.Prefab", "fragment");
   }
-  const appLocaleRegex = /(fragment\.)?appLocale(?:\.messages)?(?:\[(['"])([^'"]+)\2\]|\.([a-zA-Z0-9_]+))/g;
   const replacer = (fullMatch, fragmentPrefix, quoteType, keyFromBrackets, keyFromDot) => {
     const key = keyFromBrackets || keyFromDot;
     if (key) {
@@ -39287,6 +39303,168 @@ var modifyExpression = (exp) => {
     return addOptionalChaining(exp);
   }
 };
+var DISABLE_SCOPING_MARKER = "/*DISABLE_SCOPING*/";
+var buildCssScopeClass = (scopeType, name) => {
+  const lowerName = name.toLowerCase();
+  switch (scopeType) {
+    case "page":
+      return `app-page-${lowerName}`;
+    case "partial":
+      return `app-partial-${lowerName}`;
+    case "prefab":
+      return `app-prefab-${lowerName}`;
+  }
+};
+var removeLeadingCssBlockComments = (rule) => {
+  let idx = 0;
+  const len = rule.length;
+  let prefix = "";
+  while (idx < len) {
+    const wsStart = idx;
+    while (idx < len && /\s/.test(rule.charAt(idx))) {
+      idx++;
+    }
+    prefix += rule.slice(wsStart, idx);
+    if (idx > len - 2 || rule.charAt(idx) !== "/" || rule.charAt(idx + 1) !== "*") {
+      break;
+    }
+    const commentStart = idx;
+    idx += 2;
+    let closed = false;
+    while (idx < len - 1) {
+      if (rule.charAt(idx) === "*" && rule.charAt(idx + 1) === "/") {
+        idx += 2;
+        closed = true;
+        break;
+      }
+      idx++;
+    }
+    if (!closed) {
+      return { prefix: "", rest: rule };
+    }
+    prefix += rule.slice(commentStart, idx);
+  }
+  return { prefix, rest: rule.slice(idx) };
+};
+var scopeSingleSelector = (selector, scopeClass) => {
+  const sel = selector.trim();
+  if (!sel) {
+    return sel;
+  }
+  if (sel.startsWith(":")) {
+    return sel;
+  }
+  const wmAppIndex = sel.search(/\.wm-app\b/);
+  if (wmAppIndex !== -1) {
+    if (sel.includes(`.${scopeClass}`)) {
+      return sel;
+    }
+    return sel.replace(/\.wm-app\b/, `.wm-app .${scopeClass}`);
+  }
+  return `.wm-app .${scopeClass} ${sel}`;
+};
+var splitCssIntoRules = (cssContent) => {
+  const rules = [];
+  let currentRule = "";
+  let inComment = false;
+  let inString = false;
+  let stringChar = "";
+  let braceLevel = 0;
+  for (let i = 0; i < cssContent.length; i++) {
+    const char = cssContent[i];
+    const nextChar = cssContent[i + 1];
+    if (!inString && char === "/" && nextChar === "*") {
+      inComment = true;
+      currentRule += char;
+      continue;
+    }
+    if (inComment && char === "*" && nextChar === "/") {
+      inComment = false;
+      currentRule += char;
+      continue;
+    }
+    if (inComment) {
+      currentRule += char;
+      continue;
+    }
+    if (!inString && (char === '"' || char === "'")) {
+      inString = true;
+      stringChar = char;
+      currentRule += char;
+      continue;
+    }
+    if (inString && char === stringChar && cssContent[i - 1] !== "\\") {
+      inString = false;
+      stringChar = "";
+      currentRule += char;
+      continue;
+    }
+    if (inString) {
+      currentRule += char;
+      continue;
+    }
+    if (char === "{") {
+      braceLevel++;
+      currentRule += char;
+    } else if (char === "}") {
+      braceLevel--;
+      currentRule += char;
+      if (braceLevel === 0) {
+        rules.push(currentRule.trim());
+        currentRule = "";
+      }
+    } else {
+      currentRule += char;
+    }
+  }
+  if (currentRule.trim()) {
+    rules.push(currentRule.trim());
+  }
+  return rules;
+};
+var scopeCssUnderWmApp = (cssContent, scopeOptions) => {
+  if (!cssContent || cssContent.trim() === "") {
+    return cssContent;
+  }
+  if (!scopeOptions) {
+    return cssContent;
+  }
+  if (cssContent.trimStart().startsWith(DISABLE_SCOPING_MARKER)) {
+    return cssContent;
+  }
+  const scopeClass = buildCssScopeClass(scopeOptions.scopeType, scopeOptions.name);
+  const rules = splitCssIntoRules(cssContent);
+  const processedRules = rules.map((rule) => {
+    if (!rule) {
+      return rule;
+    }
+    const { prefix, rest } = removeLeadingCssBlockComments(rule);
+    const body = rest;
+    if (!body.trim()) {
+      return rule;
+    }
+    if (body.startsWith("@import") || body.startsWith("@charset")) {
+      return rule;
+    }
+    if (body.startsWith("@")) {
+      return rule;
+    }
+    const openBraceIndex = body.indexOf("{");
+    if (openBraceIndex === -1) {
+      return rule;
+    }
+    const selector = body.substring(0, openBraceIndex).trim();
+    const declarations = body.substring(openBraceIndex);
+    const selectors = selector.split(",").map((s) => s.trim());
+    const scopedSelectors = selectors.map((sel) => scopeSingleSelector(sel, scopeClass));
+    return `${prefix}${scopedSelectors.join(", ")} ${declarations}`;
+  });
+  return processedRules.join("\n");
+};
+var fixURLPathAndScope = (file_content, basePath, isAppCss, scopeOptions) => {
+  const urlFixed = fixURLPath(file_content, basePath, isAppCss);
+  return scopeCssUnderWmApp(urlFixed, scopeOptions);
+};
 var htmlElements = [
   "header",
   "footer",
@@ -39327,8 +39505,30 @@ 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 FRAGMENT_SCOPED_NAMES = ["appLocale", "Variables", "App"];
 var LIST_SCOPE_VARS = /* @__PURE__ */ new Set(["currentItemWidgets"]);
+var JS_GLOBALS = /* @__PURE__ */ new Set([
+  "Number",
+  "String",
+  "Boolean",
+  "Array",
+  "Object",
+  "Date",
+  "Math",
+  "JSON",
+  "RegExp",
+  "Promise",
+  "Symbol",
+  "BigInt",
+  "parseInt",
+  "parseFloat",
+  "isNaN",
+  "isFinite",
+  "encodeURIComponent",
+  "decodeURIComponent",
+  "encodeURI",
+  "decodeURI"
+]);
 var ExpressionTransformer = class {
   constructor(ctx = "this", mode = "attr") {
     this.ctx = ctx;
@@ -39358,14 +39558,14 @@ var ExpressionTransformer = class {
     if (this.mode === "event" && ast.receiver instanceof ImplicitReceiver && ast.name === "$event") {
       return "$event";
     }
-    if (ast.receiver instanceof ImplicitReceiver && LIST_SCOPE_VARS.has(ast.name)) {
+    if (ast.receiver instanceof ImplicitReceiver && (LIST_SCOPE_VARS.has(ast.name) || JS_GLOBALS.has(ast.name))) {
       return ast.name;
     }
     const r = this.build(ast.receiver);
     return `${r}.${ast.name}`;
   }
   processSafePropertyRead(ast) {
-    if (ast.receiver instanceof ImplicitReceiver && LIST_SCOPE_VARS.has(ast.name)) {
+    if (ast.receiver instanceof ImplicitReceiver && (LIST_SCOPE_VARS.has(ast.name) || JS_GLOBALS.has(ast.name))) {
       return ast.name;
     }
     const r = this.build(ast.receiver);
@@ -39413,16 +39613,23 @@ var ExpressionTransformer = class {
     const rhs = this.build(ast.value);
     return `${lhs} = ${rhs}`;
   }
-  processMethodCall(ast) {
+  buildCallArgs(args) {
     const _args = [];
-    for (const arg of ast.args) {
+    for (const arg of args) {
       let argExp = this.build(arg);
-      const fragmentScoped = typeof argExp === "string" && FRAGMENT_SCOPED_NAMES.some((name) => argExp.includes(name));
+      const fragmentScoped = typeof argExp === "string" && FRAGMENT_SCOPED_NAMES.some((name) => name !== this.ctx && argExp.includes(name));
       if (this.mode === "event" && !fragmentScoped && argExp.replace) {
         argExp = argExp.replace(`${this.ctx}.`, "");
       }
       _args.push(argExp);
     }
+    return _args;
+  }
+  processMethodCall(ast) {
+    const _args = this.buildCallArgs(ast.args);
+    if (ast.receiver instanceof ImplicitReceiver && JS_GLOBALS.has(ast.name)) {
+      return `${ast.name}(${_args.join(",")})`;
+    }
     const fn2 = this.build(ast.receiver);
     if (_args.includes("currentItemWidgets")) {
       _args.forEach((arg, index) => {
@@ -39434,14 +39641,9 @@ var ExpressionTransformer = class {
     return `${fn2}?.${ast.name}?.(${_args.join(",")})`;
   }
   processSafeMethodCall(ast) {
-    const _args = [];
-    for (const arg of ast.args) {
-      let argExp = this.build(arg);
-      const fragmentScoped = typeof argExp === "string" && FRAGMENT_SCOPED_NAMES.some((name) => argExp.includes(name));
-      if (this.mode === "event" && !fragmentScoped && argExp.replace) {
-        argExp = argExp.replace(`${this.ctx}.`, "");
-      }
-      _args.push(argExp);
+    const _args = this.buildCallArgs(ast.args);
+    if (ast.receiver instanceof ImplicitReceiver && JS_GLOBALS.has(ast.name)) {
+      return `${ast.name}(${_args.join(",")})`;
     }
     const fn2 = this.build(ast.receiver);
     return `${fn2}?.${ast.name}?.(${_args.join(",")})`;
@@ -40662,7 +40864,10 @@ var style_transformer_default = (element, isStyleProperty) => {
   StyleProps.forEach((parser, k) => {
     if (!!element.hasAttribute(k) && isStyleProperty && isStyleProperty(k)) {
       const value = element.getAttribute(k);
-      element.removeAttribute(k);
+      const isFillDimension = (k === "width" || k === "height") && value === "fill";
+      if (!isFillDimension) {
+        element.removeAttribute(k);
+      }
       if (value) {
         if (value.startsWith("bind:")) {
           if (k === "backgroundimage" && value.startsWith('bind:"') && value.endsWith('"')) {
@@ -40933,6 +41138,7 @@ var PARSER_MAP = /* @__PURE__ */ new Map([
   ["wm-progress-circle", /* @__PURE__ */ new Map([["datavalue", NUMERIC_PARSER]])],
   ["wm-video", /* @__PURE__ */ new Map([["controls", BOOLEAN_PARSER]])],
   ["wm-chips", /* @__PURE__ */ new Map([["searchable", BOOLEAN_PARSER]])],
+  ["wm-table-row", /* @__PURE__ */ new Map([["columnwidth", UNIT_PARSER]])],
   [
     "wm-table",
     /* @__PURE__ */ new Map([
@@ -41066,6 +41272,7 @@ var ALIGNMENT_MATRIX = {
   center: { justifyContent: "space-between", alignItems: "center" },
   end: { justifyContent: "space-between", alignItems: "flex-end" }
 };
+var AUTOLAYOUT_CLASS_PREFIX = "wm-";
 var CSS_PROP_PREFIX = {
   display: "d",
   "flex-direction": "fd",
@@ -41206,7 +41413,7 @@ var AUTOLAYOUT_WIDGET_TAGS = /* @__PURE__ */ new Set([
   "wm-page-content"
 ]);
 var STYLE_OVERLAPPING_LAYOUT_ATTRS = ["overflow", "zindex", "clipcontent"];
-var PREDEFINED_CLASS_NAMES = [
+var PREDEFINED_CLASS_SUFFIXES = [
   "d-flex",
   "fd-row",
   "fd-column",
@@ -41238,6 +41445,9 @@ var PREDEFINED_CLASS_NAMES = [
   "pos-sticky",
   "pos-fixed"
 ];
+var PREDEFINED_CLASS_NAMES = PREDEFINED_CLASS_SUFFIXES.map(
+  (cls) => `${AUTOLAYOUT_CLASS_PREFIX}${cls}`
+);
 
 // src/transpile/style/split-css-shorthand.ts
 function splitCssShorthandOnSpaces(value) {
@@ -41288,7 +41498,10 @@ function splitCssShorthandOnSpaces(value) {
 
 // src/transpile/widget-inline-style-processor.ts
 var isBind = (v) => !!(v && (v.startsWith("bind:") || v.startsWith("{")));
-var hasValidDir = (v) => v === "row" || v === "column";
+var hasValidDir = (v) => {
+  const d = v == null ? void 0 : v.trim();
+  return d === "row" || d === "column";
+};
 var isAuto = (v) => v === "auto";
 var normalizeGap = (v) => v != null && v !== "" && !isAuto(v) ? v : null;
 function parseDimensionValue(value, element) {
@@ -41342,7 +41555,7 @@ function sanitizeValue(value) {
 }
 function cssToClassName(property, value) {
   const prefix = CSS_PROP_PREFIX[property] || property.replace(/-/g, "");
-  return `${prefix}-${sanitizeValue(value)}`;
+  return `${AUTOLAYOUT_CLASS_PREFIX}${prefix}-${sanitizeValue(value)}`;
 }
 function stripBalancedOuterParens(expr) {
   let e = expr;
@@ -41478,7 +41691,7 @@ function computeLayoutCssProperties(props) {
   var _a;
   const css = {};
   if (hasValidDir(props.direction)) {
-    const direction = props.direction;
+    const direction = props.direction.trim();
     const hasAlignment = !!props.alignment;
     const alignment = props.alignment || "top-left";
     const wrap2 = direction === "column" ? false : (_a = props.wrap) != null ? _a : false;
@@ -41632,7 +41845,7 @@ var AutolayoutCodegen = class {
     if (tagName === "wm-list") return null;
     const parent = element.parentNode;
     const dir = ((_c = parent == null ? void 0 : parent.getAttribute) == null ? void 0 : _c.call(parent, "direction")) || null;
-    return dir && hasValidDir(dir) ? dir : null;
+    return dir && hasValidDir(dir) ? dir.trim() : null;
   }
   // Collect flex props for a single dimension, axis-aware to avoid cross-axis conflicts.
   collectSizeFlexProps(element, key, val, flexProps) {
@@ -41719,7 +41932,9 @@ var AutolayoutCodegen = class {
       }
       this.collectSizeFlexProps(element, dimKey, raw, flexProps);
       classNames.push(...this.registerSizeClass(element, dimKey, raw));
-      element.removeAttribute(dimKey);
+      if (raw !== "fill") {
+        element.removeAttribute(dimKey);
+      }
     }
     for (const [prop, value] of Object.entries(flexProps)) {
       classNames.push(this.registerClass(prop, value));
@@ -41935,6 +42150,65 @@ function convertActionToClickHandler(actionAttr, tableName, liveTableName) {
   ${converted.join("\n  ")}
 }}`;
 }
+function isRowBoundExpression(value) {
+  if (!value || typeof value !== "string") return false;
+  const exp = value.startsWith("bind:") ? value.substring(5).trim() : value;
+  return /fragment\??\.row/.test(exp) || /\brow\./.test(exp) || /\brow\[/.test(exp);
+}
+function transformTableRowPropExpression(expression) {
+  if (!expression) return "";
+  let transformed = expression.replace(/fragment\??\.row/g, "row");
+  transformed = transformed.replace(/\brow\./g, "row?.");
+  transformed = transformed.replace(/\brow\[/g, "row?.[");
+  transformed = addOptionalChaining(transformed);
+  transformed = transformed.replace(/row\?\?\./g, "row?.");
+  transformed = transformed.replace(/(\w+)\?\.\s*\(/g, "$1(");
+  return transformed;
+}
+function transformTableRowCurrentItemExpression(expression) {
+  if (!expression) return "";
+  const raw = expression.startsWith("bind:") ? expression.substring(5).trim() : expression;
+  let transformed = raw.replace(/fragment\??\.row/g, "currentItem");
+  transformed = transformed.replace(/\brow\./g, "currentItem?.");
+  transformed = transformed.replace(/\brow\[/g, "currentItem?.[");
+  transformed = addOptionalChaining(transformed);
+  transformed = transformed.replace(/currentItem\?\?\./g, "currentItem?.");
+  transformed = transformed.replace(/(\w+)\?\.\s*\(/g, "$1(");
+  return transformed;
+}
+var TABLE_ROW_PROPS_SKIP_ATTRS = /* @__PURE__ */ new Set([
+  "name",
+  "class",
+  "className",
+  "content",
+  "widget-type",
+  "display-name",
+  "displayName",
+  "rowType",
+  "is-table-row",
+  "data-widget-id",
+  "styles",
+  "style"
+]);
+function buildTableRowProps(element) {
+  const parts = [];
+  const toRemove = [];
+  for (const name of Object.keys(element.attributes)) {
+    if (TABLE_ROW_PROPS_SKIP_ATTRS.has(name)) continue;
+    const value = element.attributes[name];
+    if (!isRowBoundExpression(value)) continue;
+    const exp = transformTableRowPropExpression(value.substring(5).trim());
+    if (name === "show") {
+      parts.push(`show: (${exp} || false)`);
+    } else {
+      parts.push(`${name}: ${exp}`);
+    }
+    toRemove.push(name);
+  }
+  toRemove.forEach((attr) => element.removeAttribute(attr));
+  if (parts.length === 0) return "";
+  return `tableRowProps={(row: any) => ({${parts.join(", ")}})}`;
+}
 function transformTableColumnClassExpression(expression) {
   if (!expression) return "";
   let transformed = expression.replace(/fragment\??\.row/g, "rowData");
@@ -42772,7 +43046,7 @@ var _Transpiler = class _Transpiler {
       if (name === "conditionalclass") {
         return "";
       }
-    } else if (name === "width" || name === "height") {
+    } else if ((name === "width" || name === "height") && value != "fill") {
       `${value.substring(5)}`;
       value = `{${value}}`;
     } else {
@@ -43447,6 +43721,8 @@ function buildPartialMarkup(element, context, componentName) {
   }
   const watch = [];
   const typedParams = /* @__PURE__ */ new Set();
+  const rowBoundParamParts = [];
+  const isTableRow = element.hasAttribute("is-table-row");
   element.childNodes.filter((node) => isHTMLElement(node) && node.tagName === "WM-PARAM").forEach((node) => {
     const e = node;
     const name2 = e.getAttribute("name") || "";
@@ -43458,7 +43734,11 @@ function buildPartialMarkup(element, context, componentName) {
         value = `bind:${match[0]}`;
       }
     }
-    params[name2] = value;
+    if (isTableRow && isRowBoundExpression(value)) {
+      rowBoundParamParts.push(`${name2}={${transformTableRowCurrentItemExpression(value)}}`);
+    } else {
+      params[name2] = value;
+    }
     if (type && ["string", "boolean", "number"].includes(type)) {
       typedParams.add(name2);
     }
@@ -43477,6 +43757,9 @@ function buildPartialMarkup(element, context, componentName) {
     context,
     typeAwareInfer
   );
+  if (rowBoundParamParts.length > 0) {
+    paramStr += ` ${rowBoundParamParts.join(" ")}`;
+  }
   paramStr += ` content={props.content}`;
   if (context.isPartOfPrefab) {
     paramStr += " prefab={fragment.prefab}";
@@ -44295,6 +44578,7 @@ var getWidgetMarkup = (widgetType, widgetName, commonFields, element) => {
   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;")}"` : ``;
+  const hyphenatedToComponentName = (str) => str.split("-").map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1)).join("") || "";
   switch (widgetType) {
     case "text":
     case "password":
@@ -44479,6 +44763,13 @@ var getWidgetMarkup = (widgetType, widgetName, commonFields, element) => {
                 ${floatinglabel}>
               </wm-colorpicker>`;
       break;
+    default:
+      if (widgetType.toLowerCase().includes("wmx")) {
+        const fromAttr = widgetType == null ? void 0 : widgetType.split("-").at(-1);
+        const componentName = hyphenatedToComponentName((fromAttr || "customwidget").trim()) || "Customwidget";
+        tmpl = `<wmx-component componentname="${componentName}" ${commonFields} ${displayExp}></wmx-component>`;
+      }
+      break;
   }
   return tmpl;
 };
@@ -44514,7 +44805,8 @@ var form_field_transformer_default = {
         element.setAttribute("key", strippedKey);
       }
     }
-    if (DATASET_WIDGETS.includes(widgetType)) {
+    const usesDatasetBindings = DATASET_WIDGETS.includes(widgetType) || widgetType.toLowerCase().includes("wmx");
+    if (usesDatasetBindings) {
       if (element.attrs["primary-key"]) {
         element.setAttribute("primaryKey", element.attrs["primary-key"]);
       }
@@ -44886,22 +45178,27 @@ var imports36 = [
 var dialog_transformer_default = {
   pre: (element, context) => {
     element.getAttribute("name");
-    const content = new HTMLElement(
-      "wm-dialogbody",
-      {},
-      null,
-      element,
-      [0, 41]
+    const hasExplicitBody = element.childNodes.some(
+      (e) => isHTMLElement(e) && ["wm-dialogcontent", "wm-dialogbody"].includes(e.tagName.toLowerCase())
     );
-    content.nodeType = NodeType.ELEMENT_NODE;
-    const actionsIndex = element.childNodes.findIndex(
-      (e) => isHTMLElement(e) && e.tagName.toLowerCase() === "wm-dialogactions"
-    );
-    content.childNodes = element.childNodes;
-    element.childNodes = [content];
-    if (actionsIndex >= 0) {
-      const actions = content.childNodes.splice(actionsIndex, 1);
-      actions && element.childNodes.push(actions[0]);
+    if (!hasExplicitBody) {
+      const content = new HTMLElement(
+        "wm-dialogbody",
+        {},
+        null,
+        element,
+        [0, 41]
+      );
+      content.nodeType = NodeType.ELEMENT_NODE;
+      const actionsIndex = element.childNodes.findIndex(
+        (e) => isHTMLElement(e) && e.tagName.toLowerCase() === "wm-dialogactions"
+      );
+      content.childNodes = element.childNodes;
+      element.childNodes = [content];
+      if (actionsIndex >= 0) {
+        const actions = content.childNodes.splice(actionsIndex, 1);
+        actions && element.childNodes.push(actions[0]);
+      }
     }
     return `<WmDialog listener={fragment} ${transformAttrs(element, context)}>`;
   },
@@ -46131,7 +46428,7 @@ function getNearestWizardType(element) {
   while (current) {
     current = current.parentNode;
     if (!current) break;
-    if (((_a = current.tagName) == null ? void 0 : _a.toLowerCase()) === "wm-wizard") {
+    if (((_a = current == null ? void 0 : current.tagName) == null ? void 0 : _a.toLowerCase()) === "wm-wizard") {
       const type = current.getAttribute("type");
       if (type) {
         return type;
@@ -46176,7 +46473,7 @@ var imports87 = [
 function getNearestWizardName(element) {
   var _a;
   let current = element.parentNode || null;
-  if (((_a = current.tagName) == null ? void 0 : _a.toLowerCase()) === "wm-wizard") {
+  if (((_a = current == null ? void 0 : current.tagName) == null ? void 0 : _a.toLowerCase()) === "wm-wizard") {
     const n = current.getAttribute("name");
     if (n) {
       return n;
@@ -46186,8 +46483,7 @@ function getNearestWizardName(element) {
 }
 function prefixWizardApiReferences(root, wizardRefName) {
   const escapeRe = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-  const wizardApiNames = [
-    // primary actions
+  const wizardActionApiNames = [
     "done",
     "next",
     "previous",
@@ -46199,8 +46495,9 @@ function prefixWizardApiReferences(root, wizardRefName) {
     "disableDone",
     "hasNextStep",
     "hasPreviousStep",
-    "hasNoNextStep",
-    // configurable properties
+    "hasNoNextStep"
+  ];
+  const wizardConfigApiNames = [
     "cancelable",
     "skippable",
     "nextbtnlabel",
@@ -46209,33 +46506,36 @@ function prefixWizardApiReferences(root, wizardRefName) {
     "cancelbtnlabel",
     "actionsalignment"
   ];
-  const wizardApiPart = wizardApiNames.map(escapeRe).join("|");
-  const reOptional = new RegExp(`fragment\\?\\.(${wizardApiPart})\\b`, "g");
-  const rePlain = new RegExp(`fragment\\.(${wizardApiPart})\\b`, "g");
-  const reBind = new RegExp(`bind:fragment\\.(${wizardApiPart})\\b`, "g");
+  const actionApiPart = wizardActionApiNames.map(escapeRe).join("|");
+  const configApiPart = wizardConfigApiNames.map(escapeRe).join("|");
+  const reActionOptional = new RegExp(`fragment\\?\\.(${actionApiPart})\\b`, "g");
+  const reActionPlain = new RegExp(`fragment\\.(${actionApiPart})\\b`, "g");
+  const reActionBind = new RegExp(`bind:fragment\\.(${actionApiPart})\\b`, "g");
+  const reConfigOptional = new RegExp(`fragment\\?\\.(${configApiPart})\\b`, "g");
+  const reConfigPlain = new RegExp(`fragment\\.(${configApiPart})\\b`, "g");
+  const reConfigBind = new RegExp(`bind:fragment\\.(${configApiPart})\\b`, "g");
   const rewrite = (val) => {
     if (!val) return val;
     let v = val;
-    v = v.replace(reOptional, `fragment?.Widgets?.${wizardRefName}?.$1`);
-    v = v.replace(rePlain, `fragment?.Widgets?.${wizardRefName}?.$1`);
-    v = v.replace(reBind, `bind:fragment?.Widgets?.${wizardRefName}?.$1`);
-    const basePathRe = new RegExp(
+    v = v.replace(reActionBind, "bind:actions?.$1");
+    v = v.replace(reActionOptional, "actions?.$1");
+    v = v.replace(reActionPlain, "actions.$1");
+    v = v.replace(reConfigBind, `bind:fragment?.Widgets?.${wizardRefName}?.$1`);
+    v = v.replace(reConfigOptional, `fragment?.Widgets?.${wizardRefName}?.$1`);
+    v = v.replace(reConfigPlain, `fragment?.Widgets?.${wizardRefName}?.$1`);
+    const actionsPathRe = /(actions)\.([a-zA-Z_$][\w$]*)\(/g;
+    v = v.replace(actionsPathRe, (_m, base, method2) => {
+      return `${base}?.${method2}?.(`;
+    });
+    const widgetPathRe = new RegExp(
       `(fragment\\?\\.Widgets\\?\\.${escapeRe(wizardRefName)})\\.([a-zA-Z_$][\\w$]*)\\(`,
       "g"
     );
-    v = v.replace(basePathRe, (_m, base, method2) => {
+    v = v.replace(widgetPathRe, (_m, base, method2) => {
       return `${base}?.${method2}?.(`;
     });
     const method = v.split("?.");
-    if (method && method[3] && [
-      "cancelable",
-      "skippable",
-      "nextbtnlabel",
-      "previousbtnlabel",
-      "donebtnlabel",
-      "cancelbtnlabel",
-      "actionsalignment"
-    ].includes(method[3])) {
+    if (method && method[3] && wizardConfigApiNames.includes(method[3])) {
       return v.slice(0, v.lastIndexOf("?"));
     }
     return v;
@@ -46549,7 +46849,8 @@ var table_row_transformer_default = {
       partial = partialAttr;
       element.removeAttribute("is-table-row");
     }
-    return `<WmTableRow listener={fragment} widgetType="${widgetType}" ${transformAttrs(element, context)} ${partial}`;
+    const tableRowProps = buildTableRowProps(element);
+    return `<WmTableRow listener={fragment} widgetType="${widgetType}" ${transformAttrs(element, context)} ${tableRowProps} ${partial}`;
   },
   post: (element, context) => "/>",
   imports: (element, context) => imports91.concat(getPartialImports(element, context))
@@ -46742,7 +47043,7 @@ var extractField2 = (element, context, filterElement) => {
     getAttribute(filterElement, "filterdata"),
     false
   );
-  if (widgetType === "number" && isRange) {
+  if (isRange) {
     const maxField = getFilterWidgetTemplate(
       widgetType,
       widgetName,
@@ -46780,8 +47081,9 @@ var getFilterWidgetTemplate = (widgetType, widgetName, element, filterDataVariab
   if (onTap) {
     element.removeAttribute("on-tap");
   }
-  const placeholder = getAttribute(element, "placeholder");
-  if (placeholder) {
+  const placeholderAttr = isMaxWidget ? "maxplaceholder" : "placeholder";
+  const placeholder = getAttribute(element, placeholderAttr);
+  if (placeholder && !isMaxWidget) {
     element.removeAttribute("placeholder");
   }
   const filterfieldName = getAttribute(element, "name");
@@ -47016,6 +47318,14 @@ var getWidgetMarkup2 = (widgetType, widgetName, commonFields, element) => {
                 ${floatinglabel}>
               </wm-colorpicker>`;
       break;
+    default:
+      if (widgetType.toLowerCase().includes("wmx")) {
+        const fromAttr = widgetType == null ? void 0 : widgetType.split("-").at(-1);
+        const hyphenatedToComponentName = (str) => str.split("-").map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1)).join("") || "";
+        const componentName = hyphenatedToComponentName((fromAttr || "customwidget").trim()) || "Customwidget";
+        tmpl = `<wmx-component componentname="${componentName}" ${commonFields} ${displayExp}></wmx-component>`;
+      }
+      break;
   }
   return tmpl;
 };
@@ -47036,7 +47346,7 @@ var live_filter_field_transformer_default = {
     } else {
       filterName = currentNode.getAttribute("name");
     }
-    if (DATASET_WIDGETS.includes(widgetType)) {
+    if (DATASET_WIDGETS.includes(widgetType) || widgetType.toLowerCase().includes("wmx")) {
       if (element.attrs["primary-key"]) {
         element.setAttribute("primaryKey", element.attrs["primary-key"]);
       }
@@ -47156,27 +47466,21 @@ var linear_layout_item_default = {
 };
 
 // src/transpile/components/wmx-component/wmx-component.transformer.ts
-var capitalize4 = (str) => {
-  return str ? str.split("-").map((s) => s.charAt(0).toUpperCase() + s.substring(1)).join("") : str;
-};
 var wmx_component_transformer_default = {
   pre: (element, context) => {
-    const componentName = capitalize4(element.getAttribute("componentname"));
-    return `<Wmx${componentName} ${transformAttrs(element, context, inferTypeAndParseProperty)}>`;
-  },
-  post: (element, context) => {
-    const componentName = capitalize4(element.getAttribute("componentname"));
-    return `</Wmx${componentName}>`;
-  },
-  imports: (element, context) => {
-    const componentName = capitalize4(element.getAttribute("componentname"));
-    return [
-      {
-        name: `{Wmx${componentName}}`,
-        from: `@wavemaker-ai/wmx-components`
-      }
-    ];
+    const isFormField = element.getAttribute("formfield") === "true";
+    if (isFormField) {
+      element.removeAttribute("formfield");
+    }
+    return `<WmxRenderer listener={fragment} ${transformAttrs(element, context, inferTypeAndParseProperty)} ${isFormField ? " {...$formField}" : ""}/>`;
   },
+  post: () => "",
+  imports: () => [
+    {
+      name: `WmxRenderer`,
+      from: `@wavemaker-ai/react-runtime/components/wmx/WmxRenderer`
+    }
+  ],
   wmxcomponents: (element, context) => [
     element.getAttribute("componentname")
   ]
@@ -47264,6 +47568,7 @@ var transform_register_default = () => {
   registerTransformer("wm-dialog", dialog_transformer_default);
   registerTransformer("wm-dialogactions", dialog_actions_transformer_default);
   registerTransformer("wm-dialogbody", dialog_body_transformer_default);
+  registerTransformer("wm-dialogcontent", dialog_body_transformer_default);
   registerTransformer("wm-logindialog", login_dialog_transformer_default);
   registerTransformer("wm-list", list_transformer_default);
   registerTransformer("wm-listtemplate", list_template_transformer_default);
@@ -47977,6 +48282,6 @@ he/he.js:
    *)
 */
 
-export { serializeVariablesToCode, bind_ex_transformer_default as transformEx, transformMarkup, variable_transformer_default as transformVariable, transpileVariableDefinitions };
+export { buildCssScopeClass, fixURLPathAndScope, scopeCssUnderWmApp, serializeVariablesToCode, bind_ex_transformer_default as transformEx, transformMarkup, variable_transformer_default as transformVariable, transpileVariableDefinitions };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map