@wavemaker-ai/react-codegen 1.0.0-rc.322 → 1.0.0-rc.326

package/dist/transpiler/index.mjs

@@ -39249,6 +39249,22 @@ 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");
@@ -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",
@@ -39328,6 +39506,7 @@ var htmlElements = [
 var FORMAT_CONTEXT = "{formatContext:''}";
 var FORMAT_CONTEXT_REGEX = /\{formatContext:''\}/g;
 var FRAGMENT_SCOPED_NAMES = ["appLocale", "Variables"];
+var LIST_SCOPE_VARS = /* @__PURE__ */ new Set(["currentItemWidgets"]);
 var ExpressionTransformer = class {
   constructor(ctx = "this", mode = "attr") {
     this.ctx = ctx;
@@ -39357,10 +39536,16 @@ 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)) {
+      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)) {
+      return ast.name;
+    }
     const r = this.build(ast.receiver);
     return `${r}?.${ast.name}`;
   }
@@ -40399,14 +40584,16 @@ var transformRepeatChildAttr = (element, replace2, replaceWith) => {
     if (isList) {
       return;
     }
-    let value = element.attributes[name];
-    value = removeOptionChaining(value);
+    const value = element.attributes[name];
     const regex = new RegExp(
       replace2.replace(/[.*+?^${}()|[\]\\]/g, "\\$&") + "(?![a-zA-Z_$0-9])",
       "g"
     );
-    value = value.replace(regex, replaceWith);
-    element.setAttribute(name, value);
+    const stripped = removeOptionChaining(value);
+    const replaced = stripped.replace(regex, replaceWith);
+    if (replaced !== stripped) {
+      element.setAttribute(name, replaced);
+    }
   });
   element.childNodes.forEach((c) => {
     if (isHTMLElement(c)) {
@@ -40806,6 +40993,7 @@ var PARSER_MAP = /* @__PURE__ */ new Map([
       ["flexshrink", NUMERIC_PARSER],
       ["hastwowaybinding", BOOLEAN_PARSER],
       ["headernavigation", BOOLEAN_PARSER],
+      ["hidden", BOOLEAN_PARSER],
       ["hideclose", BOOLEAN_PARSER],
       ["iconsize", STRING_PARSER],
       ["imageheight", STRING_PARSER],
@@ -40889,7 +41077,8 @@ var PARSER_MAP = /* @__PURE__ */ new Map([
       ["fastload", BOOLEAN_PARSER],
       ["enablescroll", BOOLEAN_PARSER],
       ["showactions", BOOLEAN_PARSER],
-      ["popoverarrow", BOOLEAN_PARSER]
+      ["popoverarrow", BOOLEAN_PARSER],
+      ["enablefullscreen", BOOLEAN_PARSER]
     ])
   ],
   [
@@ -40922,6 +41111,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([
@@ -41055,6 +41245,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",
@@ -41195,7 +41386,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",
@@ -41227,6 +41418,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) {
@@ -41277,7 +41471,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) {
@@ -41331,7 +41528,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;
@@ -41467,7 +41664,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;
@@ -41621,7 +41818,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) {
@@ -41924,6 +42121,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");
@@ -42017,6 +42273,18 @@ function extractVariableNamesFromElement(e) {
   });
   return Array.from(vars);
 }
+function extractActivePageDeps(source) {
+  const deps = /* @__PURE__ */ new Set();
+  const pattern = /fragment(?:\?\.|\.)App(?:\?\.|\.)activePage((?:(?:\?\.|\.)[a-zA-Z0-9_$]+)+)/g;
+  for (const m of source.matchAll(pattern)) {
+    const path = m[1].replace(/\?\./g, ".").replace(/^\./, "");
+    if (path) {
+      deps.add(path);
+    }
+  }
+  const all = Array.from(deps);
+  return all.filter((path) => !all.some((other) => other !== path && other.startsWith(`${path}.`)));
+}
 var EVENT_NAME_MAP = {
   "on-dblclick": "on-doubleClick",
   "on-mouseenter": "on-mouseEnter",
@@ -42354,7 +42622,8 @@ var _Transpiler = class _Transpiler {
   transformStyles(e, context) {
     var _a, _b;
     let rawStylesObj = {};
-    const rawStyles = e.getAttribute("styles");
+    const style_attr = e.getAttribute("style");
+    const rawStyles = e.getAttribute("styles") || style_attr;
     if (rawStyles && !rawStyles.startsWith("bind:") && !rawStyles.startsWith("{")) {
       rawStyles.split(";").forEach((rule) => {
         const colonIdx = rule.indexOf(":");
@@ -42368,6 +42637,9 @@ var _Transpiler = class _Transpiler {
         }
       });
       e.removeAttribute("styles");
+      if (style_attr) {
+        e.removeAttribute("style");
+      }
     }
     const hasConditionalStyles = e.getAttribute("conditionalstyle");
     if (hasConditionalStyles) {
@@ -42866,7 +43138,9 @@ _Transpiler.SKELETON_ATTR_RENAME = {
 _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)(?:\?\.|\.|\[|$)/;
+// Anchored to `fragment` so `fragment?.myService?.Actions?.run` (custom object that happens
+// to have an Actions property) is NOT incorrectly forced into an arrow wrapper.
+_Transpiler.INSTANCE_BOUND_CALLEE = /^fragment(?:\?\.|\.)(?:Actions|Variables)(?:\?\.|\.|\[|$)/;
 var Transpiler = _Transpiler;
 var transpiler = new Transpiler();
 var registerTransformer = transpiler.registerTransformer.bind(transpiler);
@@ -42928,6 +43202,8 @@ var transpileMarkup = (markup, isPartOfPrefab, splitCode, variables, preview, in
     }
   });
   finalResult.autolayoutCss = autolayoutCodegen.getDynamicCssRules();
+  const generatedSource = [finalResult.markup, ...Object.values(finalResult.components)].join("\n");
+  finalResult.activePageDeps = extractActivePageDeps(generatedSource);
   return finalResult;
 };
 var transformAttrs = transpiler.transformAttrs.bind(transpiler);
@@ -42974,7 +43250,7 @@ var createExpression = (element, attrName) => {
     }
     displayexpression = displayexpression.replace(
       /fragment\.([a-zA-Z_$][a-zA-Z0-9_$]*)/g,
-      "$item.$1"
+      (match, name) => FRAGMENT_SCOPED_NAMES.includes(name) ? match : `$item.${name}`
     );
     displayexpression = addOptionalChaining(displayexpression);
     const exp = (0, import_lodash5.includes)(displayexpression, "(") ? `${displayexpression}` : displayexpression;
@@ -43415,26 +43691,46 @@ 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") || "";
     let value = e.getAttribute("value") || "";
+    const type = e.getAttribute("type") || "";
     if (value.includes("currentItem")) {
       const match = value.match(/currentItem\..+/);
       if (match) {
         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);
+    }
     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(" ");
+  const typeAwareInfer = (name2, valWithQuotes) => {
+    if (typedParams.has(name2)) {
+      return valWithQuotes;
+    }
+    return inferTypeAndParseProperty(name2, valWithQuotes);
+  };
   paramStr = transformAttrs(
     parse5(`<${syntheticTag} ${paramStr}/>`).firstChild,
     context,
-    inferTypeAndParseProperty
+    typeAwareInfer
   );
+  if (rowBoundParamParts.length > 0) {
+    paramStr += ` ${rowBoundParamParts.join(" ")}`;
+  }
   paramStr += ` content={props.content}`;
   if (context.isPartOfPrefab) {
     paramStr += " prefab={fragment.prefab}";
@@ -43854,7 +44150,7 @@ var buildItemAttrsFromListTemplate = (template, context) => {
   if (autoLayoutResult && autolayout) {
     parts.push(`layoutClassName: ${autolayout.buildItemAttrsClassName(autoLayoutResult)}`);
   }
-  const skipAttrs = /* @__PURE__ */ new Set(["name", "data-widget-id", "item-id"]);
+  const skipAttrs = /* @__PURE__ */ new Set(["name", "data-widget-id", "item-id", "layout"]);
   if (autoLayoutResult) {
     for (const name of LAYOUT_ATTR_NAMES) skipAttrs.add(name);
   }
@@ -44177,13 +44473,15 @@ var getFormWidgetTemplate = (widgetType, widgetName, element, formDataVariable)
   widgetName = widgetName.replace(".", "_");
   (_b = (_a = getAttribute(element, "key")) == null ? void 0 : _a.split(".")) == null ? void 0 : _b.at(-1);
   const formfieldName = getAttribute(element, "name");
-  var labelMarkup = getAttribute(element, "displayname") ? `<wm-label 
+  const displayname = getAttribute(element, "displayname");
+  var labelMarkup = `<wm-label 
     required="bind:$formField.required"
     htmlFor="${formfieldName}_formWidget"
     caption="bind:$formField.displayname"
     class="app-label control-label formfield-label"
     conditionalclass="bind:$formField.captionCls + ' ' + $formField.invalidCls"
-    name="${widgetName}_formLabel"></wm-label>` : "";
+    name="${widgetName}_formLabel"
+    ${!displayname ? 'hidden="true"' : ""}></wm-label>`;
   const onFocus = getAttribute(element, "on-focus");
   if (onFocus) {
     element.removeAttribute("on-focus");
@@ -44312,6 +44610,7 @@ var getWidgetMarkup = (widgetType, widgetName, commonFields, element) => {
                 ></wm-search>`;
       break;
     case "chips":
+      const chipsDatasource = getDatasourceExpr(element);
       const chipsKeyAttribute = element.getAttribute("key");
       if (chipsKeyAttribute) {
         element.setAttribute("searchkey", chipsKeyAttribute);
@@ -44325,6 +44624,7 @@ var getWidgetMarkup = (widgetType, widgetName, commonFields, element) => {
                 dataset="bind:$formField.dataset || 'Option 1, Option 2, Option 3'"
                 displayfield="bind:$formField.displayfield"
                 datafield="bind:$formField.datafield"
+                ${chipsDatasource ? `datasource="${chipsDatasource}"` : ""}
                 ></wm-chips>`;
       break;
     case "checkbox":
@@ -44452,7 +44752,8 @@ var form_field_transformer_default = {
       formName = currentNode.getAttribute("dynamicForm");
       formScope = `formScope={() => fragment?.Widgets?.${formName}}`;
     } else {
-      formName = currentNode == null ? void 0 : currentNode.getAttribute("name");
+      const itemId = currentNode == null ? void 0 : currentNode.getAttribute("item-id");
+      formName = itemId || (currentNode == null ? void 0 : currentNode.getAttribute("name"));
     }
     const formdataPrefix = currentNode == null ? void 0 : currentNode.getAttribute("formdataprefix");
     if (formdataPrefix) {
@@ -44748,13 +45049,16 @@ var form_action_transformer_default = {
       formName = formName.replace("bind:", "");
       isDynamicFormName = true;
     }
-    const actionType = element.getAttribute("type");
+    const actionType = element.getAttribute("type") || "button";
+    if (!element.getAttribute("type")) {
+      element.setAttribute("type", "button");
+    }
     const name = element.getAttribute("name");
     let action = element.getAttribute("action");
-    let btnClass = "btn-default";
     const listPrefix = "list.itemWidgets[$index]";
     const fragmentPrefix = "fragment?.Widgets";
     const widgetsPrefix = "Widgets";
+    let btnClass = "btn-default";
     if (actionType === "submit") {
       btnClass = "btn-primary";
       action = listName ? getWidgetAccessor(listPrefix, formName, "?.submit();", isDynamicFormName) + (action || "") : getWidgetAccessor(widgetsPrefix, formName, "?.submit();", isDynamicFormName) + (action || "");
@@ -44795,7 +45099,9 @@ var form_action_transformer_default = {
         }
       }).join(";");
     }
-    element.setAttribute("btnClass", btnClass);
+    if (!element.hasAttribute("class")) {
+      element.setAttribute("class", btnClass);
+    }
     element.removeAttribute("formKey");
     element.removeAttribute("action");
     element.setAttribute("name", name || key || formName);
@@ -44888,7 +45194,7 @@ var dialog_actions_transformer_default = {
       applyAttr(
         element,
         new RegExp("closeDialog(\\?\\.)?\\(\\)", "g"),
-        `Widgets?.${widgetName}?.close()`
+        `Widgets?.${widgetName}?.close?.()`
       );
     }
     return `<WmDialogActions   ${transformAttrs(element, context)}>`;
@@ -45912,6 +46218,7 @@ var chips_transformer_default = {
     if (getDisplayExpression2) {
       element.removeAttribute("displayexpression");
     }
+    getDatasourceExpr(element);
     return `<WmChips listener={fragment} ${isFormField ? " {...$formField}" : ""} ${getDisplayExpression2 ? `displayexpression=${getDisplayExpression2}` : ""} ${extractDatasetInfo(element)}  ${transformAttrs(element, context)}>`;
   },
   post: (element, context) => "</WmChips>",
@@ -46133,8 +46440,7 @@ function getNearestWizardName(element) {
 }
 function prefixWizardApiReferences(root, wizardRefName) {
   const escapeRe = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-  const wizardApiNames = [
-    // primary actions
+  const wizardActionApiNames = [
     "done",
     "next",
     "previous",
@@ -46146,8 +46452,9 @@ function prefixWizardApiReferences(root, wizardRefName) {
     "disableDone",
     "hasNextStep",
     "hasPreviousStep",
-    "hasNoNextStep",
-    // configurable properties
+    "hasNoNextStep"
+  ];
+  const wizardConfigApiNames = [
     "cancelable",
     "skippable",
     "nextbtnlabel",
@@ -46156,33 +46463,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;
@@ -46496,7 +46806,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))
@@ -46591,18 +46902,20 @@ 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.includes(".dataSet")) {
+    if (datasetAttr && datasetAttr.includes(".dataSet")) {
       const match = datasetAttr.match(
-        /^bind:fragment\.Variables\.([^.]+)\.dataSet(?=[^A-Za-z0-9_]|$)/
+        /^bind:fragment\.((?:App\.activePage\.|App\.)?Variables)\.([^.]+)\.dataSet(?=[^A-Za-z0-9_]|$)/
       );
       if (match) {
-        const variableName = match[1];
+        const scopePath = match[1];
+        const variableName = match[2];
         context.set("tableDatasetVariableName", variableName);
         if (!datasourceAttr) {
-          element.setAttribute("datasource", `{fragment?.Variables?.${variableName}}`);
+          const datasourceExpr = `fragment.${scopePath}.${variableName}`.split(".").join("?.");
+          element.setAttribute("datasource", `{${datasourceExpr}}`);
         }
         if (!binddatasetAttr) {
-          element.setAttribute("binddataset", `Variables.${variableName}.dataSet`);
+          element.setAttribute("binddataset", `${scopePath}.${variableName}.dataSet`);
         }
       }
     }
@@ -46687,7 +47000,7 @@ var extractField2 = (element, context, filterElement) => {
     getAttribute(filterElement, "filterdata"),
     false
   );
-  if (widgetType === "number" && isRange) {
+  if (isRange) {
     const maxField = getFilterWidgetTemplate(
       widgetType,
       widgetName,
@@ -46725,8 +47038,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");
@@ -47922,6 +48236,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