@wavemaker-ai/react-codegen 1.0.0-rc.330 → 1.0.0-rc.334

package/dist/transpiler/index.mjs

@@ -8133,14 +8133,14 @@ var require_lib = __commonJS({
           super.checkParams(node, false, true);
           this.scope.exit();
         }
-        forwardNoArrowParamsConversionAt(node, parse7) {
+        forwardNoArrowParamsConversionAt(node, parse8) {
           let result;
           if (this.state.noArrowParamsConversionAt.indexOf(node.start) !== -1) {
             this.state.noArrowParamsConversionAt.push(this.state.start);
-            result = parse7();
+            result = parse8();
             this.state.noArrowParamsConversionAt.pop();
           } else {
-            result = parse7();
+            result = parse8();
           }
           return result;
         }
@@ -16622,7 +16622,7 @@ var require_lib = __commonJS({
         node.specifiers.push(this.finishNode(specifier, type));
       }
       parseAssertEntries() {
-        const attrs = [];
+        const attrs2 = [];
         const attrNames = /* @__PURE__ */ new Set();
         do {
           if (this.match(types.braceR)) {
@@ -16648,9 +16648,9 @@ var require_lib = __commonJS({
           }
           node.value = this.parseLiteral(this.state.value, "StringLiteral");
           this.finishNode(node, "ImportAttribute");
-          attrs.push(node);
+          attrs2.push(node);
         } while (this.eat(types.comma));
-        return attrs;
+        return attrs2;
       }
       maybeParseModuleAttributes() {
         if (this.match(types._with) && !this.hasPrecedingLineBreak()) {
@@ -16660,7 +16660,7 @@ var require_lib = __commonJS({
           if (this.hasPlugin("moduleAttributes")) return [];
           return null;
         }
-        const attrs = [];
+        const attrs2 = [];
         const attributes = /* @__PURE__ */ new Set();
         do {
           const node = this.startNode();
@@ -16678,9 +16678,9 @@ var require_lib = __commonJS({
           }
           node.value = this.parseLiteral(this.state.value, "StringLiteral");
           this.finishNode(node, "ImportAttribute");
-          attrs.push(node);
+          attrs2.push(node);
         } while (this.eat(types.comma));
-        return attrs;
+        return attrs2;
       }
       maybeParseImportAssertions() {
         if (this.isContextual("assert") && !this.hasPrecedingLineBreak()) {
@@ -16691,9 +16691,9 @@ var require_lib = __commonJS({
           return null;
         }
         this.eat(types.braceL);
-        const attrs = this.parseAssertEntries();
+        const attrs2 = this.parseAssertEntries();
         this.eat(types.braceR);
-        return attrs;
+        return attrs2;
       }
       maybeParseDefaultImportSpecifier(node) {
         if (this.shouldParseDefaultImport(node)) {
@@ -16778,7 +16778,7 @@ var require_lib = __commonJS({
       }
       return pluginMap;
     }
-    function parse6(input, options) {
+    function parse7(input, options) {
       var _options;
       if (((_options = options) == null ? void 0 : _options.sourceType) === "unambiguous") {
         options = Object.assign({}, options);
@@ -16840,7 +16840,7 @@ var require_lib = __commonJS({
       }
       return cls;
     }
-    exports$1.parse = parse6;
+    exports$1.parse = parse7;
     exports$1.parseExpression = parseExpression2;
     exports$1.tokTypes = types;
   }
@@ -19892,7 +19892,7 @@ var require_parse = __commonJS({
     var whitespace = /* @__PURE__ */ new Set([9, 10, 12, 13, 32]);
     var ZERO = "0".charCodeAt(0);
     var NINE = "9".charCodeAt(0);
-    function parse6(formula) {
+    function parse7(formula) {
       formula = formula.trim().toLowerCase();
       if (formula === "even") {
         return [2, 0];
@@ -19944,7 +19944,7 @@ var require_parse = __commonJS({
         }
       }
     }
-    exports$1.parse = parse6;
+    exports$1.parse = parse7;
   }
 });
 
@@ -21232,11 +21232,11 @@ var require_html = __commonJS({
         return DOMTokenList2;
       })()
     );
-    var HTMLElement3 = (
+    var HTMLElement4 = (
       /** @class */
       (function(_super) {
-        __extends(HTMLElement4, _super);
-        function HTMLElement4(tagName, keyAttrs, rawAttrs, parentNode, range) {
+        __extends(HTMLElement5, _super);
+        function HTMLElement5(tagName, keyAttrs, rawAttrs, parentNode, range) {
           if (rawAttrs === void 0) {
             rawAttrs = "";
           }
@@ -21271,13 +21271,13 @@ var require_html = __commonJS({
           }
           return _this;
         }
-        HTMLElement4.prototype.quoteAttribute = function(attr) {
+        HTMLElement5.prototype.quoteAttribute = function(attr) {
           if (attr == null) {
             return "null";
           }
           return JSON.stringify(attr.replace(/"/g, """));
         };
-        HTMLElement4.prototype.remove = function() {
+        HTMLElement5.prototype.remove = function() {
           var _this = this;
           if (this.parentNode) {
             var children = this.parentNode.childNodes;
@@ -21286,12 +21286,12 @@ var require_html = __commonJS({
             });
           }
         };
-        HTMLElement4.prototype.removeChild = function(node) {
+        HTMLElement5.prototype.removeChild = function(node) {
           this.childNodes = this.childNodes.filter(function(child) {
             return child !== node;
           });
         };
-        HTMLElement4.prototype.exchangeChild = function(oldNode, newNode) {
+        HTMLElement5.prototype.exchangeChild = function(oldNode, newNode) {
           var children = this.childNodes;
           this.childNodes = children.map(function(child) {
             if (child === oldNode) {
@@ -21300,28 +21300,28 @@ var require_html = __commonJS({
             return child;
           });
         };
-        Object.defineProperty(HTMLElement4.prototype, "tagName", {
+        Object.defineProperty(HTMLElement5.prototype, "tagName", {
           get: function() {
             return this.rawTagName ? this.rawTagName.toUpperCase() : this.rawTagName;
           },
           enumerable: false,
           configurable: true
         });
-        Object.defineProperty(HTMLElement4.prototype, "localName", {
+        Object.defineProperty(HTMLElement5.prototype, "localName", {
           get: function() {
             return this.rawTagName.toLowerCase();
           },
           enumerable: false,
           configurable: true
         });
-        Object.defineProperty(HTMLElement4.prototype, "isVoidElement", {
+        Object.defineProperty(HTMLElement5.prototype, "isVoidElement", {
           get: function() {
             return voidTags.has(this.localName);
           },
           enumerable: false,
           configurable: true
         });
-        Object.defineProperty(HTMLElement4.prototype, "rawText", {
+        Object.defineProperty(HTMLElement5.prototype, "rawText", {
           /**
            * Get escpaed (as-it) text value of current node and its children.
            * @return {string} text content
@@ -21334,7 +21334,7 @@ var require_html = __commonJS({
           enumerable: false,
           configurable: true
         });
-        Object.defineProperty(HTMLElement4.prototype, "textContent", {
+        Object.defineProperty(HTMLElement5.prototype, "textContent", {
           get: function() {
             return decode(this.rawText);
           },
@@ -21345,7 +21345,7 @@ var require_html = __commonJS({
           enumerable: false,
           configurable: true
         });
-        Object.defineProperty(HTMLElement4.prototype, "text", {
+        Object.defineProperty(HTMLElement5.prototype, "text", {
           /**
            * Get unescaped text value of current node and its children.
            * @return {string} text content
@@ -21356,7 +21356,7 @@ var require_html = __commonJS({
           enumerable: false,
           configurable: true
         });
-        Object.defineProperty(HTMLElement4.prototype, "structuredText", {
+        Object.defineProperty(HTMLElement5.prototype, "structuredText", {
           /**
            * Get structured Text (with '\n' etc.)
            * @return {string} structured text
@@ -21398,40 +21398,40 @@ var require_html = __commonJS({
           enumerable: false,
           configurable: true
         });
-        HTMLElement4.prototype.toString = function() {
+        HTMLElement5.prototype.toString = function() {
           var tag = this.rawTagName;
           if (tag) {
-            var attrs = this.rawAttrs ? " " + this.rawAttrs : "";
-            return this.isVoidElement ? "<" + tag + attrs + ">" : "<" + tag + attrs + ">" + this.innerHTML + "</" + tag + ">";
+            var attrs2 = this.rawAttrs ? " " + this.rawAttrs : "";
+            return this.isVoidElement ? "<" + tag + attrs2 + ">" : "<" + tag + attrs2 + ">" + this.innerHTML + "</" + tag + ">";
           }
           return this.innerHTML;
         };
-        Object.defineProperty(HTMLElement4.prototype, "innerHTML", {
+        Object.defineProperty(HTMLElement5.prototype, "innerHTML", {
           get: function() {
             return this.childNodes.map(function(child) {
               return child.toString();
             }).join("");
           },
           set: function(content) {
-            var r = parse6(content);
+            var r = parse7(content);
             this.childNodes = r.childNodes.length ? r.childNodes : [new text_1.default(content, this)];
           },
           enumerable: false,
           configurable: true
         });
-        HTMLElement4.prototype.set_content = function(content, options) {
+        HTMLElement5.prototype.set_content = function(content, options) {
           if (options === void 0) {
             options = {};
           }
           if (content instanceof node_1.default) {
             content = [content];
           } else if (typeof content == "string") {
-            var r = parse6(content, options);
+            var r = parse7(content, options);
             content = r.childNodes.length ? r.childNodes : [new text_1.default(content, this)];
           }
           this.childNodes = content;
         };
-        HTMLElement4.prototype.replaceWith = function() {
+        HTMLElement5.prototype.replaceWith = function() {
           var _this = this;
           var nodes = [];
           for (var _i = 0; _i < arguments.length; _i++) {
@@ -21441,7 +21441,7 @@ var require_html = __commonJS({
             if (node instanceof node_1.default) {
               return [node];
             } else if (typeof node == "string") {
-              var r = parse6(node);
+              var r = parse7(node);
               return r.childNodes.length ? r.childNodes : [new text_1.default(node, _this)];
             }
             return [];
@@ -21451,14 +21451,14 @@ var require_html = __commonJS({
           });
           this.parentNode.childNodes = __spreadArray(__spreadArray(__spreadArray([], this.parentNode.childNodes.slice(0, idx), true), content, true), this.parentNode.childNodes.slice(idx + 1), true);
         };
-        Object.defineProperty(HTMLElement4.prototype, "outerHTML", {
+        Object.defineProperty(HTMLElement5.prototype, "outerHTML", {
           get: function() {
             return this.toString();
           },
           enumerable: false,
           configurable: true
         });
-        HTMLElement4.prototype.trimRight = function(pattern) {
+        HTMLElement5.prototype.trimRight = function(pattern) {
           for (var i = 0; i < this.childNodes.length; i++) {
             var childNode = this.childNodes[i];
             if (childNode.nodeType === type_1.default.ELEMENT_NODE) {
@@ -21473,7 +21473,7 @@ var require_html = __commonJS({
           }
           return this;
         };
-        Object.defineProperty(HTMLElement4.prototype, "structure", {
+        Object.defineProperty(HTMLElement5.prototype, "structure", {
           /**
            * Get DOM structure
            * @return {string} strucutre
@@ -21506,7 +21506,7 @@ var require_html = __commonJS({
           enumerable: false,
           configurable: true
         });
-        HTMLElement4.prototype.removeWhitespace = function() {
+        HTMLElement5.prototype.removeWhitespace = function() {
           var _this = this;
           var o = 0;
           this.childNodes.forEach(function(node) {
@@ -21523,19 +21523,19 @@ var require_html = __commonJS({
           this.childNodes.length = o;
           return this;
         };
-        HTMLElement4.prototype.querySelectorAll = function(selector) {
+        HTMLElement5.prototype.querySelectorAll = function(selector) {
           return (0, css_select_1.selectAll)(selector, this, {
             xmlMode: true,
             adapter: matcher_1.default
           });
         };
-        HTMLElement4.prototype.querySelector = function(selector) {
+        HTMLElement5.prototype.querySelector = function(selector) {
           return (0, css_select_1.selectOne)(selector, this, {
             xmlMode: true,
             adapter: matcher_1.default
           });
         };
-        HTMLElement4.prototype.getElementsByTagName = function(tagName) {
+        HTMLElement5.prototype.getElementsByTagName = function(tagName) {
           var upperCasedTagName = tagName.toUpperCase();
           var re = [];
           var stack = [];
@@ -21563,7 +21563,7 @@ var require_html = __commonJS({
           }
           return re;
         };
-        HTMLElement4.prototype.closest = function(selector) {
+        HTMLElement5.prototype.closest = function(selector) {
           var mapChild = /* @__PURE__ */ new Map();
           var el = this;
           var old = null;
@@ -21607,12 +21607,12 @@ var require_html = __commonJS({
           }
           return null;
         };
-        HTMLElement4.prototype.appendChild = function(node) {
+        HTMLElement5.prototype.appendChild = function(node) {
           this.childNodes.push(node);
           node.parentNode = this;
           return node;
         };
-        Object.defineProperty(HTMLElement4.prototype, "firstChild", {
+        Object.defineProperty(HTMLElement5.prototype, "firstChild", {
           /**
            * Get first child node
            * @return {Node} first child node
@@ -21623,7 +21623,7 @@ var require_html = __commonJS({
           enumerable: false,
           configurable: true
         });
-        Object.defineProperty(HTMLElement4.prototype, "lastChild", {
+        Object.defineProperty(HTMLElement5.prototype, "lastChild", {
           /**
            * Get last child node
            * @return {Node} last child node
@@ -21634,7 +21634,7 @@ var require_html = __commonJS({
           enumerable: false,
           configurable: true
         });
-        Object.defineProperty(HTMLElement4.prototype, "attrs", {
+        Object.defineProperty(HTMLElement5.prototype, "attrs", {
           /**
            * Get attributes
            * @access private
@@ -21645,9 +21645,9 @@ var require_html = __commonJS({
               return this._attrs;
             }
             this._attrs = {};
-            var attrs = this.rawAttributes;
-            for (var key in attrs) {
-              var val = attrs[key] || "";
+            var attrs2 = this.rawAttributes;
+            for (var key in attrs2) {
+              var val = attrs2[key] || "";
               this._attrs[key.toLowerCase()] = decode(val);
             }
             return this._attrs;
@@ -21655,12 +21655,12 @@ var require_html = __commonJS({
           enumerable: false,
           configurable: true
         });
-        Object.defineProperty(HTMLElement4.prototype, "attributes", {
+        Object.defineProperty(HTMLElement5.prototype, "attributes", {
           get: function() {
             var ret_attrs = {};
-            var attrs = this.rawAttributes;
-            for (var key in attrs) {
-              var val = attrs[key] || "";
+            var attrs2 = this.rawAttributes;
+            for (var key in attrs2) {
+              var val = attrs2[key] || "";
               ret_attrs[key] = decode(val);
             }
             return ret_attrs;
@@ -21668,7 +21668,7 @@ var require_html = __commonJS({
           enumerable: false,
           configurable: true
         });
-        Object.defineProperty(HTMLElement4.prototype, "rawAttributes", {
+        Object.defineProperty(HTMLElement5.prototype, "rawAttributes", {
           /**
            * Get escaped (as-is) attributes
            * @return {Object} parsed attributes
@@ -21677,7 +21677,7 @@ var require_html = __commonJS({
             if (this._rawAttrs) {
               return this._rawAttrs;
             }
-            var attrs = {};
+            var attrs2 = {};
             if (this.rawAttrs) {
               var re = /([a-zA-Z()#][a-zA-Z0-9-_:()#]*)(?:\s*=\s*((?:'[^']*')|(?:"[^"]*")|\S+))?/g;
               var match = void 0;
@@ -21686,23 +21686,23 @@ var require_html = __commonJS({
                 var val = match[2] || null;
                 if (val && (val[0] === "'" || val[0] === '"'))
                   val = val.slice(1, val.length - 1);
-                attrs[key] = val;
+                attrs2[key] = val;
               }
             }
-            this._rawAttrs = attrs;
-            return attrs;
+            this._rawAttrs = attrs2;
+            return attrs2;
           },
           enumerable: false,
           configurable: true
         });
-        HTMLElement4.prototype.removeAttribute = function(key) {
-          var attrs = this.rawAttributes;
-          delete attrs[key];
+        HTMLElement5.prototype.removeAttribute = function(key) {
+          var attrs2 = this.rawAttributes;
+          delete attrs2[key];
           if (this._attrs) {
             delete this._attrs[key];
           }
-          this.rawAttrs = Object.keys(attrs).map(function(name) {
-            var val = JSON.stringify(attrs[name]);
+          this.rawAttrs = Object.keys(attrs2).map(function(name) {
+            var val = JSON.stringify(attrs2[name]);
             if (val === void 0 || val === "null") {
               return name;
             }
@@ -21712,31 +21712,31 @@ var require_html = __commonJS({
             this.id = "";
           }
         };
-        HTMLElement4.prototype.hasAttribute = function(key) {
+        HTMLElement5.prototype.hasAttribute = function(key) {
           return key.toLowerCase() in this.attrs;
         };
-        HTMLElement4.prototype.getAttribute = function(key) {
+        HTMLElement5.prototype.getAttribute = function(key) {
           return this.attrs[key.toLowerCase()];
         };
-        HTMLElement4.prototype.setAttribute = function(key, value) {
+        HTMLElement5.prototype.setAttribute = function(key, value) {
           var _this = this;
           if (arguments.length < 2) {
             throw new Error("Failed to execute 'setAttribute' on 'Element'");
           }
           var k2 = key.toLowerCase();
-          var attrs = this.rawAttributes;
-          for (var k in attrs) {
+          var attrs2 = this.rawAttributes;
+          for (var k in attrs2) {
             if (k.toLowerCase() === k2) {
               key = k;
               break;
             }
           }
-          attrs[key] = String(value);
+          attrs2[key] = String(value);
           if (this._attrs) {
-            this._attrs[k2] = decode(attrs[key]);
+            this._attrs[k2] = decode(attrs2[key]);
           }
-          this.rawAttrs = Object.keys(attrs).map(function(name) {
-            var val = _this.quoteAttribute(attrs[name]);
+          this.rawAttrs = Object.keys(attrs2).map(function(name) {
+            var val = _this.quoteAttribute(attrs2[name]);
             if (val === "null" || val === '""')
               return name;
             return name + "=" + val;
@@ -21745,7 +21745,7 @@ var require_html = __commonJS({
             this.id = value;
           }
         };
-        HTMLElement4.prototype.setAttributes = function(attributes) {
+        HTMLElement5.prototype.setAttributes = function(attributes) {
           var _this = this;
           if (this._attrs) {
             delete this._attrs;
@@ -21760,20 +21760,20 @@ var require_html = __commonJS({
             return name + "=" + _this.quoteAttribute(String(val));
           }).join(" ");
         };
-        HTMLElement4.prototype.insertAdjacentHTML = function(where, html) {
+        HTMLElement5.prototype.insertAdjacentHTML = function(where, html) {
           var _a, _b, _c;
           var _this = this;
           if (arguments.length < 2) {
             throw new Error("2 arguments required");
           }
-          var p = parse6(html);
+          var p = parse7(html);
           if (where === "afterend") {
             var idx = this.parentNode.childNodes.findIndex(function(child) {
               return child === _this;
             });
             (_a = this.parentNode.childNodes).splice.apply(_a, __spreadArray([idx + 1, 0], p.childNodes, false));
             p.childNodes.forEach(function(n) {
-              if (n instanceof HTMLElement4) {
+              if (n instanceof HTMLElement5) {
                 n.parentNode = _this.parentNode;
               }
             });
@@ -21789,7 +21789,7 @@ var require_html = __commonJS({
             });
             (_c = this.parentNode.childNodes).splice.apply(_c, __spreadArray([idx, 0], p.childNodes, false));
             p.childNodes.forEach(function(n) {
-              if (n instanceof HTMLElement4) {
+              if (n instanceof HTMLElement5) {
                 n.parentNode = _this.parentNode;
               }
             });
@@ -21797,7 +21797,7 @@ var require_html = __commonJS({
             throw new Error("The value provided ('" + where + "') is not one of 'beforebegin', 'afterbegin', 'beforeend', or 'afterend'");
           }
         };
-        Object.defineProperty(HTMLElement4.prototype, "nextSibling", {
+        Object.defineProperty(HTMLElement5.prototype, "nextSibling", {
           get: function() {
             if (this.parentNode) {
               var children = this.parentNode.childNodes;
@@ -21813,7 +21813,7 @@ var require_html = __commonJS({
           enumerable: false,
           configurable: true
         });
-        Object.defineProperty(HTMLElement4.prototype, "nextElementSibling", {
+        Object.defineProperty(HTMLElement5.prototype, "nextElementSibling", {
           get: function() {
             if (this.parentNode) {
               var children = this.parentNode.childNodes;
@@ -21822,7 +21822,7 @@ var require_html = __commonJS({
               while (i < children.length) {
                 var child = children[i++];
                 if (find) {
-                  if (child instanceof HTMLElement4) {
+                  if (child instanceof HTMLElement5) {
                     return child || null;
                   }
                 } else if (this === child) {
@@ -21835,17 +21835,17 @@ var require_html = __commonJS({
           enumerable: false,
           configurable: true
         });
-        Object.defineProperty(HTMLElement4.prototype, "classNames", {
+        Object.defineProperty(HTMLElement5.prototype, "classNames", {
           get: function() {
             return this.classList.toString();
           },
           enumerable: false,
           configurable: true
         });
-        return HTMLElement4;
+        return HTMLElement5;
       })(node_1.default)
     );
-    exports$1.default = HTMLElement3;
+    exports$1.default = HTMLElement4;
     var kMarkupPattern = /<!--[\s\S]*?-->|<(\/?)([a-zA-Z][-.:0-9_a-zA-Z]*)((?:\s+[^>]*?(?:(?:'[^']*')|(?:"[^"]*"))?)*)\s*(\/?)>/g;
     var kAttributePattern = /(?:^|\s)(id|class)\s*=\s*((?:'[^']*')|(?:"[^"]*")|\S+)/gi;
     var kSelfClosingElements = {
@@ -21951,7 +21951,7 @@ var require_html = __commonJS({
       var createRange = function(startPos, endPos) {
         return [startPos - frameFlagOffset, endPos - frameFlagOffset];
       };
-      var root = new HTMLElement3(null, {}, "", null, [0, data.length]);
+      var root = new HTMLElement4(null, {}, "", null, [0, data.length]);
       var currentParent = root;
       var stack = [root];
       var lastTextPos = -1;
@@ -21985,11 +21985,11 @@ var require_html = __commonJS({
         if (lowerCaseTagName)
           tagName = tagName.toLowerCase();
         if (!leadingSlash) {
-          var attrs = {};
+          var attrs2 = {};
           for (var attMatch = void 0; attMatch = kAttributePattern.exec(attributes); ) {
             var key = attMatch[1], val = attMatch[2];
             var isQuoted = val[0] === "'" || val[0] === '"';
-            attrs[key.toLowerCase()] = isQuoted ? val.slice(1, val.length - 1) : val;
+            attrs2[key.toLowerCase()] = isQuoted ? val.slice(1, val.length - 1) : val;
           }
           var parentTagName = currentParent.rawTagName;
           if (!closingSlash && kElementsClosedByOpening[parentTagName]) {
@@ -22009,7 +22009,7 @@ var require_html = __commonJS({
           var tagStartPos_1 = tagEndPos_1 - matchLength;
           currentParent = currentParent.appendChild(
             // Initialize range (end position updated later for closed tags)
-            new HTMLElement3(tagName, attrs, attributes.slice(1), null, createRange(tagStartPos_1, tagEndPos_1))
+            new HTMLElement4(tagName, attrs2, attributes.slice(1), null, createRange(tagStartPos_1, tagEndPos_1))
           );
           stack.push(currentParent);
           if (is_block_text_element(tagName)) {
@@ -22056,7 +22056,7 @@ var require_html = __commonJS({
       return stack;
     }
     exports$1.base_parse = base_parse;
-    function parse6(data, options) {
+    function parse7(data, options) {
       if (options === void 0) {
         options = { lowerCaseTagName: false, comment: false };
       }
@@ -22085,7 +22085,7 @@ var require_html = __commonJS({
       }
       return root;
     }
-    exports$1.parse = parse6;
+    exports$1.parse = parse7;
   }
 });
 
@@ -22768,13 +22768,13 @@ var CssSelector = class _CssSelector {
   getMatchingElementTemplate() {
     const tagName = this.element || "div";
     const classAttr = this.classNames.length > 0 ? ` class="${this.classNames.join(" ")}"` : "";
-    let attrs = "";
+    let attrs2 = "";
     for (let i = 0; i < this.attrs.length; i += 2) {
       const attrName = this.attrs[i];
       const attrValue = this.attrs[i + 1] !== "" ? `="${this.attrs[i + 1]}"` : "";
-      attrs += ` ${attrName}${attrValue}`;
+      attrs2 += ` ${attrName}${attrValue}`;
     }
-    return getHtmlTagDefinition(tagName).isVoid ? `<${tagName}${classAttr}${attrs}/>` : `<${tagName}${classAttr}${attrs}></${tagName}>`;
+    return getHtmlTagDefinition(tagName).isVoid ? `<${tagName}${classAttr}${attrs2}/>` : `<${tagName}${classAttr}${attrs2}></${tagName}>`;
   }
   getAttrs() {
     const result = [];
@@ -22839,10 +22839,10 @@ var SelectorMatcher = class _SelectorMatcher {
     let matcher = this;
     const element = cssSelector.element;
     const classNames = cssSelector.classNames;
-    const attrs = cssSelector.attrs;
+    const attrs2 = cssSelector.attrs;
     const selectable = new SelectorContext(cssSelector, callbackCtxt, listContext);
     if (element) {
-      const isTerminal = attrs.length === 0 && classNames.length === 0;
+      const isTerminal = attrs2.length === 0 && classNames.length === 0;
       if (isTerminal) {
         this._addTerminal(matcher._elementMap, element, selectable);
       } else {
@@ -22851,7 +22851,7 @@ var SelectorMatcher = class _SelectorMatcher {
     }
     if (classNames) {
       for (let i = 0; i < classNames.length; i++) {
-        const isTerminal = attrs.length === 0 && i === classNames.length - 1;
+        const isTerminal = attrs2.length === 0 && i === classNames.length - 1;
         const className = classNames[i];
         if (isTerminal) {
           this._addTerminal(matcher._classMap, className, selectable);
@@ -22860,11 +22860,11 @@ var SelectorMatcher = class _SelectorMatcher {
         }
       }
     }
-    if (attrs) {
-      for (let i = 0; i < attrs.length; i += 2) {
-        const isTerminal = i === attrs.length - 2;
-        const name = attrs[i];
-        const value = attrs[i + 1];
+    if (attrs2) {
+      for (let i = 0; i < attrs2.length; i += 2) {
+        const isTerminal = i === attrs2.length - 2;
+        const name = attrs2[i];
+        const value = attrs2[i + 1];
         if (isTerminal) {
           const terminalMap = matcher._attrValueMap;
           let terminalValuesMap = terminalMap.get(name);
@@ -22912,7 +22912,7 @@ var SelectorMatcher = class _SelectorMatcher {
     let result = false;
     const element = cssSelector.element;
     const classNames = cssSelector.classNames;
-    const attrs = cssSelector.attrs;
+    const attrs2 = cssSelector.attrs;
     for (let i = 0; i < this._listContexts.length; i++) {
       this._listContexts[i].alreadyMatched = false;
     }
@@ -22925,10 +22925,10 @@ var SelectorMatcher = class _SelectorMatcher {
         result = this._matchPartial(this._classPartialMap, className, cssSelector, matchedCallback) || result;
       }
     }
-    if (attrs) {
-      for (let i = 0; i < attrs.length; i += 2) {
-        const name = attrs[i];
-        const value = attrs[i + 1];
+    if (attrs2) {
+      for (let i = 0; i < attrs2.length; i += 2) {
+        const name = attrs2[i];
+        const value = attrs2[i + 1];
         const terminalValuesMap = this._attrValueMap.get(name);
         if (value) {
           result = this._matchTerminal(terminalValuesMap, "", cssSelector, matchedCallback) || result;
@@ -24743,9 +24743,9 @@ var Icu$1 = class {
   }
 };
 var TagPlaceholder = class {
-  constructor(tag, attrs, startName, closeName, children, isVoid, sourceSpan, startSourceSpan, endSourceSpan) {
+  constructor(tag, attrs2, startName, closeName, children, isVoid, sourceSpan, startSourceSpan, endSourceSpan) {
     this.tag = tag;
-    this.attrs = attrs;
+    this.attrs = attrs2;
     this.startName = startName;
     this.closeName = closeName;
     this.children = children;
@@ -29185,10 +29185,10 @@ var Attribute = class extends NodeWithI18n {
   }
 };
 var Element$1 = class extends NodeWithI18n {
-  constructor(name, attrs, children, sourceSpan, startSourceSpan, endSourceSpan = null, i18n) {
+  constructor(name, attrs2, children, sourceSpan, startSourceSpan, endSourceSpan = null, i18n) {
     super(sourceSpan, i18n);
     this.name = name;
-    this.attrs = attrs;
+    this.attrs = attrs2;
     this.children = children;
     this.startSourceSpan = startSourceSpan;
     this.endSourceSpan = endSourceSpan;
@@ -32355,9 +32355,9 @@ var _TreeBuilder = class __TreeBuilder {
   }
   _consumeStartTag(startTagToken) {
     const [prefix, name] = startTagToken.parts;
-    const attrs = [];
+    const attrs2 = [];
     while (this._peek.type === TokenType.ATTR_NAME) {
-      attrs.push(this._consumeAttr(this._advance()));
+      attrs2.push(this._consumeAttr(this._advance()));
     }
     const fullName = this._getElementFullName(prefix, name, this._getParentElement());
     let selfClosing = false;
@@ -32375,7 +32375,7 @@ var _TreeBuilder = class __TreeBuilder {
     const end = this._peek.sourceSpan.fullStart;
     const span = new ParseSourceSpan(startTagToken.sourceSpan.start, end, startTagToken.sourceSpan.fullStart);
     const startSpan = new ParseSourceSpan(startTagToken.sourceSpan.start, end, startTagToken.sourceSpan.fullStart);
-    const el = new Element$1(fullName, attrs, [], span, startSpan, void 0);
+    const el = new Element$1(fullName, attrs2, [], span, startSpan, void 0);
     this._pushElement(el);
     if (selfClosing) {
       this._popElement(fullName, span);
@@ -32485,8 +32485,8 @@ var SKIP_WS_TRIM_TAGS = /* @__PURE__ */ new Set(["pre", "template", "textarea",
 var WS_CHARS = " \f\n\r	\v\u1680\u180E\u2000-\u200A\u2028\u2029\u202F\u205F\u3000\uFEFF";
 var NO_WS_REGEXP = new RegExp(`[^${WS_CHARS}]`);
 var WS_REPLACE_REGEXP = new RegExp(`[${WS_CHARS}]{2,}`, "g");
-function hasPreserveWhitespacesAttr(attrs) {
-  return attrs.some((attr) => attr.name === PRESERVE_WS_ATTR_NAME);
+function hasPreserveWhitespacesAttr(attrs2) {
+  return attrs2.some((attr) => attr.name === PRESERVE_WS_ATTR_NAME);
 }
 function replaceNgsp(value) {
   return value.replace(new RegExp(NGSP_UNICODE, "g"), " ");
@@ -33238,23 +33238,23 @@ var StylingBuilder = class {
    * @param attrs an existing array where each of the styling expressions
    * will be inserted into.
    */
-  populateInitialStylingAttrs(attrs) {
+  populateInitialStylingAttrs(attrs2) {
     if (this._initialClassValues.length) {
-      attrs.push(literal(
+      attrs2.push(literal(
         1
         /* Classes */
       ));
       for (let i = 0; i < this._initialClassValues.length; i++) {
-        attrs.push(literal(this._initialClassValues[i]));
+        attrs2.push(literal(this._initialClassValues[i]));
       }
     }
     if (this._initialStyleValues.length) {
-      attrs.push(literal(
+      attrs2.push(literal(
         2
         /* Styles */
       ));
       for (let i = 0; i < this._initialStyleValues.length; i += 2) {
-        attrs.push(literal(this._initialStyleValues[i]), literal(this._initialStyleValues[i + 1]));
+        attrs2.push(literal(this._initialStyleValues[i]), literal(this._initialStyleValues[i + 1]));
       }
     }
   }
@@ -33265,10 +33265,10 @@ var StylingBuilder = class {
    * responsible for registering initial styles (within a directive hostBindings' creation block),
    * as well as any of the provided attribute values, to the directive host element.
    */
-  assignHostAttrs(attrs, definitionMap) {
-    if (this._directiveExpr && (attrs.length || this._hasInitialValues)) {
-      this.populateInitialStylingAttrs(attrs);
-      definitionMap.set("hostAttrs", literalArr(attrs));
+  assignHostAttrs(attrs2, definitionMap) {
+    if (this._directiveExpr && (attrs2.length || this._hasInitialValues)) {
+      this.populateInitialStylingAttrs(attrs2);
+      definitionMap.set("hostAttrs", literalArr(attrs2));
     }
   }
   /**
@@ -35557,23 +35557,23 @@ var HtmlAstToIvyAst = class {
         this.reportError(`<ng-content> element cannot have content.`, element.sourceSpan);
       }
       const selector = preparsedElement.selectAttr;
-      const attrs = element.attrs.map((attr) => this.visitAttribute(attr));
-      parsedElement = new Content(selector, attrs, element.sourceSpan, element.i18n);
+      const attrs2 = element.attrs.map((attr) => this.visitAttribute(attr));
+      parsedElement = new Content(selector, attrs2, element.sourceSpan, element.i18n);
       this.ngContentSelectors.push(selector);
     } else if (isTemplateElement) {
-      const attrs = this.extractAttributes(element.name, parsedProperties, i18nAttrsMeta);
-      parsedElement = new Template(element.name, attributes, attrs.bound, boundEvents, [
+      const attrs2 = this.extractAttributes(element.name, parsedProperties, i18nAttrsMeta);
+      parsedElement = new Template(element.name, attributes, attrs2.bound, boundEvents, [
         /* no template attributes */
       ], children, references, variables, element.sourceSpan, element.startSourceSpan, element.endSourceSpan, element.i18n);
     } else {
-      const attrs = this.extractAttributes(element.name, parsedProperties, i18nAttrsMeta);
-      parsedElement = new Element(element.name, attributes, attrs.bound, boundEvents, children, references, element.sourceSpan, element.startSourceSpan, element.endSourceSpan, element.i18n);
+      const attrs2 = this.extractAttributes(element.name, parsedProperties, i18nAttrsMeta);
+      parsedElement = new Element(element.name, attributes, attrs2.bound, boundEvents, children, references, element.sourceSpan, element.startSourceSpan, element.endSourceSpan, element.i18n);
     }
     if (elementHasInlineTemplate) {
-      const attrs = this.extractAttributes("ng-template", templateParsedProperties, i18nAttrsMeta);
+      const attrs2 = this.extractAttributes("ng-template", templateParsedProperties, i18nAttrsMeta);
       const templateAttrs = [];
-      attrs.literal.forEach((attr) => templateAttrs.push(attr));
-      attrs.bound.forEach((attr) => templateAttrs.push(attr));
+      attrs2.literal.forEach((attr) => templateAttrs.push(attr));
+      attrs2.bound.forEach((attr) => templateAttrs.push(attr));
       const hoistedAttrs = parsedElement instanceof Element ? {
         attributes: parsedElement.attributes,
         inputs: parsedElement.inputs,
@@ -36034,8 +36034,8 @@ var PlaceholderRegistry = class {
     this._placeHolderNameCounts = {};
     this._signatureToName = {};
   }
-  getStartTagPlaceholderName(tag, attrs, isVoid) {
-    const signature = this._hashTag(tag, attrs, isVoid);
+  getStartTagPlaceholderName(tag, attrs2, isVoid) {
+    const signature = this._hashTag(tag, attrs2, isVoid);
     if (this._signatureToName[signature]) {
       return this._signatureToName[signature];
     }
@@ -36070,9 +36070,9 @@ var PlaceholderRegistry = class {
     return this._generateUniqueName(name.toUpperCase());
   }
   // Generate a hash for a tag - does not take attribute order into account
-  _hashTag(tag, attrs, isVoid) {
+  _hashTag(tag, attrs2, isVoid) {
     const start = `<${tag}`;
-    const strAttrs = Object.keys(attrs).sort().map((name) => ` ${name}=${attrs[name]}`).join("");
+    const strAttrs = Object.keys(attrs2).sort().map((name) => ` ${name}=${attrs2[name]}`).join("");
     const end = isVoid ? "/>" : `></${tag}>`;
     return start + strAttrs + end;
   }
@@ -36118,12 +36118,12 @@ var _I18nVisitor = class {
   visitElement(el, context) {
     var _a;
     const children = visitAll$1(this, el.children, context);
-    const attrs = {};
+    const attrs2 = {};
     el.attrs.forEach((attr) => {
-      attrs[attr.name] = attr.value;
+      attrs2[attr.name] = attr.value;
     });
     const isVoid = getHtmlTagDefinition(el.name).isVoid;
-    const startPhName = context.placeholderRegistry.getStartTagPlaceholderName(el.name, attrs, isVoid);
+    const startPhName = context.placeholderRegistry.getStartTagPlaceholderName(el.name, attrs2, isVoid);
     context.placeholderToContent[startPhName] = {
       text: el.startSourceSpan.toString(),
       sourceSpan: el.startSourceSpan
@@ -36136,7 +36136,7 @@ var _I18nVisitor = class {
         sourceSpan: (_a = el.endSourceSpan) !== null && _a !== void 0 ? _a : el.sourceSpan
       };
     }
-    const node = new TagPlaceholder(el.name, attrs, startPhName, closePhName, children, isVoid, el.sourceSpan, el.startSourceSpan, el.endSourceSpan);
+    const node = new TagPlaceholder(el.name, attrs2, startPhName, closePhName, children, isVoid, el.sourceSpan, el.startSourceSpan, el.endSourceSpan);
     return context.visitNodeFn(el, node);
   }
   visitAttribute(attribute, context) {
@@ -36298,7 +36298,7 @@ var I18nMetaVisitor = class {
   visitElement(element) {
     if (hasI18nAttrs(element)) {
       this.hasI18nMeta = true;
-      const attrs = [];
+      const attrs2 = [];
       const attrsMeta = {};
       for (const attr of element.attrs) {
         if (attr.name === I18N_ATTR) {
@@ -36315,11 +36315,11 @@ var I18nMetaVisitor = class {
             attrsMeta[name] = attr.value;
           }
         } else {
-          attrs.push(attr);
+          attrs2.push(attr);
         }
       }
       if (Object.keys(attrsMeta).length) {
-        for (const attr of attrs) {
+        for (const attr of attrs2) {
           const meta = attrsMeta[attr.name];
           if (meta !== void 0 && attr.value) {
             attr.i18n = this._generateI18nMessage([attr], attr.i18n || meta);
@@ -36327,7 +36327,7 @@ var I18nMetaVisitor = class {
         }
       }
       if (!this.keepI18nAttrs) {
-        element.attrs = attrs;
+        element.attrs = attrs2;
       }
     }
     visitAll$1(this, element.children, element.i18n);
@@ -36845,11 +36845,11 @@ var TemplateDefinitionBuilder = class _TemplateDefinitionBuilder {
     }
     this.i18n = null;
   }
-  i18nAttributesInstruction(nodeIndex, attrs, sourceSpan) {
+  i18nAttributesInstruction(nodeIndex, attrs2, sourceSpan) {
     let hasBindings = false;
     const i18nAttrArgs = [];
     const bindings = [];
-    attrs.forEach((attr) => {
+    attrs2.forEach((attr) => {
       const message = attr.i18n;
       const converted = attr.value.visit(this._valueConverter);
       this.allocateBindingSlots(converted);
@@ -37228,9 +37228,9 @@ var TemplateDefinitionBuilder = class _TemplateDefinitionBuilder {
   bindingContext() {
     return `${this._bindingContext++}`;
   }
-  templatePropertyBindings(templateIndex, attrs) {
+  templatePropertyBindings(templateIndex, attrs2) {
     const propertyBindings = [];
-    attrs.forEach((input) => {
+    attrs2.forEach((input) => {
       if (input instanceof BoundAttribute) {
         const value = input.value.visit(this._valueConverter);
         if (value !== void 0) {
@@ -37479,8 +37479,8 @@ var TemplateDefinitionBuilder = class _TemplateDefinitionBuilder {
     }
     return literal(consts.push(expression) - 1);
   }
-  addAttrsToConsts(attrs) {
-    return attrs.length > 0 ? this.addToConsts(literalArr(attrs)) : TYPED_NULL_EXPR;
+  addAttrsToConsts(attrs2) {
+    return attrs2.length > 0 ? this.addToConsts(literalArr(attrs2)) : TYPED_NULL_EXPR;
   }
   prepareRefsArray(references) {
     if (!references || references.length === 0) {
@@ -39285,6 +39285,35 @@ var transformAppLocale = (exp) => {
   const expression = exp.replace(appLocaleRegex, replacer);
   return expression;
 };
+var splitTopLevel = (expr, separator, limit = Infinity) => {
+  const parts = [];
+  let depth = 0;
+  let inString = false;
+  let stringChar = "";
+  let start = 0;
+  for (let i = 0; i < expr.length && parts.length < limit - 1; i++) {
+    const ch = expr[i];
+    if (inString) {
+      if (ch === stringChar && expr[i - 1] !== "\\") {
+        inString = false;
+      }
+      continue;
+    }
+    if (ch === '"' || ch === "'") {
+      inString = true;
+      stringChar = ch;
+    } else if (ch === "(" || ch === "[" || ch === "{") {
+      depth++;
+    } else if (ch === ")" || ch === "]" || ch === "}") {
+      depth--;
+    } else if (ch === separator && depth === 0) {
+      parts.push(expr.slice(start, i));
+      start = i + 1;
+    }
+  }
+  parts.push(expr.slice(start));
+  return parts;
+};
 var convertHyphenatedPropsToBracketNotation = (expr) => {
   if (!expr || typeof expr !== "string") return expr;
   return expr.replace(/\.([a-zA-Z_$][a-zA-Z0-9_$]*-[a-zA-Z_$][a-zA-Z0-9_$\-]*)/g, (_, propName) => {
@@ -39714,7 +39743,7 @@ var transform = (expr, scopeName = "this", mode = "attr") => {
   expr = convertHyphenatedPropsToBracketNotation(expr);
   try {
     const parser = new Parser$1(new Lexer());
-    let expressions = expr.split(";"), transformedExpressions = [];
+    let expressions = splitTopLevel(expr, ";"), transformedExpressions = [];
     const $iExp = new RegExp("\\[" + scopeName + "\\.\\$i\\]", "g");
     expressions.forEach((currentExp) => {
       const ast = parser.parseBinding(currentExp, "", 0);
@@ -40583,9 +40612,12 @@ var transformRepeatChildData = (element, dataSetEx, prefix = "repeat_item", list
     if (isList) {
       return;
     }
-    let value = element.attributes[name];
-    value = removeOptionChaining(value);
-    element.setAttribute(name, replaceAll(value, dataSetEx, "$item"));
+    const value = element.attributes[name];
+    const stripped = removeOptionChaining(value);
+    const replaced = replaceAll(stripped, dataSetEx, "$item");
+    if (replaced !== stripped) {
+      element.setAttribute(name, replaced);
+    }
     if (list) {
       let genrateRandomString2 = function() {
         return Math.random().toString(36).substring(2, 5);
@@ -40602,12 +40634,15 @@ var transformRepeatChildData = (element, dataSetEx, prefix = "repeat_item", list
     }
   });
 };
-var transformRepeatChildAttr = (element, replace2, replaceWith) => {
+var transformRepeatChildAttr = (element, replace2, replaceWith, skipAttrNames) => {
   Object.keys(element.attributes).forEach((name) => {
     const isList = isListAndField(element);
     if (isList) {
       return;
     }
+    if (skipAttrNames == null ? void 0 : skipAttrNames.includes(name)) {
+      return;
+    }
     const value = element.attributes[name];
     const regex = new RegExp(
       replace2.replace(/[.*+?^${}()|[\]\\]/g, "\\$&") + "(?![a-zA-Z_$0-9])",
@@ -40621,7 +40656,7 @@ var transformRepeatChildAttr = (element, replace2, replaceWith) => {
   });
   element.childNodes.forEach((c) => {
     if (isHTMLElement(c)) {
-      transformRepeatChildAttr(c, replace2, replaceWith);
+      transformRepeatChildAttr(c, replace2, replaceWith, skipAttrNames);
     }
   });
 };
@@ -41782,7 +41817,7 @@ function parseAttrValue(name, raw, props) {
   }
 }
 function getStaticLayoutPropsFromElement(element, dynamicGroups) {
-  const attrs = element.attributes || {};
+  const attrs2 = element.attributes || {};
   const props = {};
   let hasAny = false;
   for (const name of LAYOUT_ATTR_NAMES) {
@@ -41791,7 +41826,7 @@ function getStaticLayoutPropsFromElement(element, dynamicGroups) {
       if (dynamicGroups.overflow && OVERFLOW_ATTR_GROUP.has(name)) continue;
       if (dynamicGroups.position && POSITION_ATTR_GROUP.has(name)) continue;
     }
-    const raw = attrs[name];
+    const raw = attrs2[name];
     if (raw == null) continue;
     if (isBind(raw)) continue;
     hasAny = true;
@@ -41809,10 +41844,10 @@ function expandShorthand(value) {
   return [parts[0], parts[1], parts[2], parts[3]];
 }
 function detectDynamicGroups(element) {
-  const attrs = element.attributes || {};
+  const attrs2 = element.attributes || {};
   const flags = { flex: false, overflow: false, position: false };
   for (const name of LAYOUT_ATTR_NAMES) {
-    const raw = attrs[name];
+    const raw = attrs2[name];
     if (raw == null || !isBind(raw)) continue;
     if (FLEX_ATTR_GROUP.has(name)) flags.flex = true;
     else if (OVERFLOW_ATTR_GROUP.has(name)) flags.overflow = true;
@@ -41980,10 +42015,10 @@ var AutolayoutCodegen = class {
   }
   // Converts dynamic ternary layout attrs to conditional class expressions
   processDynamicTernaryProps(element, removeAttrs = true) {
-    const attrs = element.attributes || {};
+    const attrs2 = element.attributes || {};
     const parsed = [];
     for (const name of LAYOUT_ATTR_NAMES) {
-      const raw = attrs[name];
+      const raw = attrs2[name];
       if (raw == null || !isBind(raw)) continue;
       if (FLEX_ATTR_GROUP.has(name)) continue;
       const ternary = parseTernaryExpression(raw);
@@ -42245,6 +42280,73 @@ function getFormatCellExpression(element, context) {
   transformed = transformed.replace(/(\w+)\?\.\s*\(/g, "$1(");
   return transformed;
 }
+var VARIABLES_SCOPE_PREFIX = /^bind:fragment(?:\?\.|\.)((?:App(?:\?\.|\.)(?:activePage(?:\?\.|\.))?)?Variables)/;
+function findClosingBracket(value, start) {
+  let depth = 0;
+  let quote = null;
+  for (let i = start; i < value.length; i++) {
+    const ch = value[i];
+    if (quote) {
+      if (ch === "\\") i++;
+      else if (ch === quote) quote = null;
+      continue;
+    }
+    if (ch === "'" || ch === '"' || ch === "`") {
+      quote = ch;
+    } else if (ch === "[") {
+      depth++;
+    } else if (ch === "]") {
+      depth--;
+      if (depth === 0) return i;
+    }
+  }
+  return -1;
+}
+function parseVariableDataSetBinding(value) {
+  const prefix = VARIABLES_SCOPE_PREFIX.exec(value);
+  if (!prefix) {
+    return void 0;
+  }
+  const scopePath = prefix[1].replace(/\?\./g, ".");
+  let index = prefix[0].length;
+  let sawSeparator = false;
+  if (value.startsWith("?.", index)) {
+    index += 2;
+    sawSeparator = true;
+  } else if (value[index] === ".") {
+    index += 1;
+    sawSeparator = true;
+  }
+  let accessor;
+  let variableName;
+  if (value[index] === "[") {
+    const close = findClosingBracket(value, index);
+    if (close < 0) {
+      return void 0;
+    }
+    const key = value.slice(index + 1, close).trim();
+    accessor = `[${key}]`;
+    const quote = key[0];
+    const isQuotedLiteral = (quote === "'" || quote === '"') && key.length > 1 && key[key.length - 1] === quote;
+    variableName = isQuotedLiteral ? key.slice(1, -1) : void 0;
+    index = close + 1;
+  } else {
+    const identifier = /^[A-Za-z_$][A-Za-z0-9_$]*/.exec(value.slice(index));
+    if (!identifier || !sawSeparator) {
+      return void 0;
+    }
+    accessor = `.${identifier[0]}`;
+    variableName = identifier[0];
+    index += identifier[0].length;
+  }
+  if (!/^(?:\?\.|\.)dataSet(?![A-Za-z0-9_$])/.test(value.slice(index))) {
+    return void 0;
+  }
+  const datasourceExpr = addOptionalChainingToPropertyPath(
+    `fragment.${scopePath}${accessor}`.replace(/\?\./g, ".")
+  );
+  return { scopePath, datasourceExpr, variableName };
+}
 
 // src/transpile/class-expression.util.ts
 function transformClassWithMustacheExpressions(classes, options = {}) {
@@ -42327,7 +42429,14 @@ var EVENT_NAME_MAP = {
   "on-dragenter": "on-dragEnter",
   "on-dragleave": "on-dragLeave"
 };
-var processTextContentForJSX = (textContent) => {
+var convertMustacheTextToJsx = (textContent, isInsideTableColumn) => {
+  return textContent.replace(/\{\{([\s\S]*?)\}\}/g, (_match, rawExpr) => {
+    const expr = rawExpr.trim();
+    const transformed = isInsideTableColumn ? transformTableColumnClassExpression(expr) : modifyExpression(expr);
+    return `{${transformed}}`;
+  });
+};
+var processTextContentForJSX = (textContent, isInsideTableColumn = false) => {
   const trimmedContent = textContent.trim();
   if (!trimmedContent) {
     return "";
@@ -42335,6 +42444,9 @@ var processTextContentForJSX = (textContent) => {
   if (/^[<>&]+$/.test(trimmedContent)) {
     return trimmedContent.split("").map((char) => `{'${char}'}`).join("");
   }
+  if (trimmedContent.includes("{{") && trimmedContent.includes("}}")) {
+    return convertMustacheTextToJsx(textContent, isInsideTableColumn);
+  }
   return textContent;
 };
 var parse5 = typeof esm_default === "function" ? esm_default : esm_default.parse;
@@ -42400,8 +42512,10 @@ var _Transpiler = class _Transpiler {
     this.transformers = /* @__PURE__ */ new Map();
     this.componentNamesList = [];
     this.transpile = (e, isPartOfPrefab, splitCode = true, oldContext) => {
-      var _a;
-      const isHtmlElement = htmlElements.includes(e.tagName.toLowerCase());
+      var _a, _b, _c;
+      const tagName = e.tagName.toLowerCase();
+      const isHtmlElement = htmlElements.includes(tagName);
+      const isWebComponent = tagName.includes("-") && !tagName.startsWith("wm-");
       const ignoreElements = ["wm-filter-action", "wm-form-action"];
       const transformer = this.transformers.get(e && e.tagName.toLowerCase());
       let result = {
@@ -42411,9 +42525,13 @@ var _Transpiler = class _Transpiler {
         imports: [],
         partials: [],
         prefabs: [],
-        wmxcomponents: []
+        wmxcomponents: [],
+        webComponents: []
       };
-      if (!e.getAttribute("name") && !ignoreElements.includes(e.tagName.toLowerCase()) && !((_a = oldContext == null ? void 0 : oldContext.data) == null ? void 0 : _a.isInsideTableColumn)) {
+      if (isWebComponent) {
+        (_a = result.webComponents) == null ? void 0 : _a.push(this.getWebComponentDefinition(e));
+      }
+      if (!e.getAttribute("name") && !isWebComponent && !ignoreElements.includes(e.tagName.toLowerCase()) && !((_b = oldContext == null ? void 0 : oldContext.data) == null ? void 0 : _b.isInsideTableColumn)) {
         e.setAttribute(
           "name",
           `${e.tagName.toLowerCase().replace(/-/g, "_")}_${generateRandomString()}`
@@ -42423,37 +42541,44 @@ var _Transpiler = class _Transpiler {
         this.componentNamesList = [];
       }
       if (isHtmlElement) {
-        result.markup = preTranspileHtmlElement(e);
+        result.markup = preTranspileHtmlElement(e, !!((_c = oldContext == null ? void 0 : oldContext.data) == null ? void 0 : _c.isInsideTableColumn));
         e.childNodes.forEach((c) => {
+          var _a2, _b2;
           if (c && c.nodeType == NodeType2.ELEMENT_NODE) {
             const cResult = this.transpile(c, isPartOfPrefab, splitCode);
             (0, import_lodash5.assignIn)(result.components, cResult.components);
             result.markup += cResult.markup;
             result.imports.push(...cResult.imports);
             result.prefabs.push(...cResult.prefabs);
+            (_a2 = result.webComponents) == null ? void 0 : _a2.push(...cResult.webComponents || []);
             result.partials.push(...cResult.partials);
             result.components = { ...result.components, ...cResult.components };
             if (cResult.pageEvents) result.pageEvents = cResult.pageEvents;
           } else if (c && c.nodeType == NodeType2.TEXT_NODE) {
-            const processedContent = processTextContentForJSX(c.text);
+            const processedContent = processTextContentForJSX(
+              c.text,
+              !!((_b2 = oldContext == null ? void 0 : oldContext.data) == null ? void 0 : _b2.isInsideTableColumn)
+            );
             if (processedContent) {
               result.markup += processedContent;
             }
           }
         });
         result.markup += postTranspileHtmlElement(e);
-      } else if (transformer != null) {
+      } else if (transformer != null || isWebComponent) {
+        const resolvedTransformer = transformer != null ? transformer : this.transformers.get("__web-component__");
         const context = new TranspilationContext2({
           result,
           isPartOfPrefab,
-          transformer,
+          transformer: resolvedTransformer,
           listener: oldContext == null ? void 0 : oldContext.listener,
           props: (oldContext == null ? void 0 : oldContext.props) || [],
           data: oldContext == null ? void 0 : oldContext.data
         });
-        result.imports.push(...transformer.imports(e, context));
-        result.markup += transformer.pre(e, context).replace(new RegExp(FORMAT_CONTEXT, "g"), "") + (e.childNodes.length > 0 ? "\n" : "");
+        result.imports.push(...resolvedTransformer.imports(e, context));
+        result.markup += resolvedTransformer.pre(e, context).replace(new RegExp(FORMAT_CONTEXT, "g"), "") + (e.childNodes.length > 0 ? "\n" : "");
         e.childNodes.forEach((c) => {
+          var _a2, _b2;
           if (c && c.nodeType == NodeType2.ELEMENT_NODE) {
             const cResult = this.transpile(c, isPartOfPrefab, splitCode, context);
             (0, import_lodash5.assignIn)(result.components, cResult.components);
@@ -42461,20 +42586,24 @@ var _Transpiler = class _Transpiler {
             result.imports.push(...cResult.imports);
             result.prefabs.push(...cResult.prefabs);
             result.wmxcomponents.push(...cResult.wmxcomponents);
+            (_a2 = result.webComponents) == null ? void 0 : _a2.push(...cResult.webComponents || []);
             result.partials.push(...cResult.partials);
             result.components = { ...result.components, ...cResult.components };
             if (cResult.pageEvents) result.pageEvents = cResult.pageEvents;
           } else if (c && c.nodeType == NodeType2.TEXT_NODE) {
-            const processedContent = processTextContentForJSX(c.text);
+            const processedContent = processTextContentForJSX(
+              c.text,
+              !!((_b2 = context.data) == null ? void 0 : _b2.isInsideTableColumn)
+            );
             if (processedContent) {
               result.markup += processedContent;
             }
           }
         });
-        transformer.partials && result.partials.push(...transformer.partials(e, context));
-        transformer.prefabs && result.prefabs.push(...transformer.prefabs(e, context));
-        transformer.wmxcomponents && result.wmxcomponents.push(...transformer.wmxcomponents(e, context));
-        result.markup += transformer.post(e, context).replace(new RegExp(FORMAT_CONTEXT, "g"), "");
+        resolvedTransformer.partials && result.partials.push(...resolvedTransformer.partials(e, context));
+        resolvedTransformer.prefabs && result.prefabs.push(...resolvedTransformer.prefabs(e, context));
+        resolvedTransformer.wmxcomponents && result.wmxcomponents.push(...resolvedTransformer.wmxcomponents(e, context));
+        result.markup += resolvedTransformer.post(e, context).replace(new RegExp(FORMAT_CONTEXT, "g"), "");
         const accessRole = e.attrs["accessroles"];
         if (accessRole) {
           result.markup = `{fragment.appConfig.SecurityService.hasAccessToWidget('${accessRole}') ? (${result.markup}): null}`;
@@ -42484,6 +42613,19 @@ var _Transpiler = class _Transpiler {
       return result;
     };
   }
+  getWebComponentDefinition(element) {
+    const attributes = {};
+    Object.entries(element.attributes).forEach(([name, value]) => {
+      if (name.startsWith("on-")) {
+        attributes[`on${name.substring(3).replace(/-/g, "")}`] = "(event: CustomEvent) => void";
+      } else if (value.startsWith("bind:")) {
+        attributes[name.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase())] = "unknown";
+      } else {
+        attributes[name] = "string";
+      }
+    });
+    return { tag: element.tagName.toLowerCase(), attributes };
+  }
   /**
    * Transforms $[...] syntax to fragment.property for use with Angular parser
    * Examples:
@@ -42592,6 +42734,7 @@ var _Transpiler = class _Transpiler {
       let value = e.attributes[name];
       if (value.startsWith("bind:")) {
         value = value.substring(5).trim();
+        value = decodeHTMLEntities(value);
         value = value.replace(/;+$/, "");
         const simpleSinglePattern = /^\$\[([^\]]+)\]$/;
         const match = value.match(simpleSinglePattern);
@@ -42649,7 +42792,7 @@ var _Transpiler = class _Transpiler {
     });
   }
   transformStyles(e, context) {
-    var _a, _b;
+    var _a, _b, _c;
     let rawStylesObj = {};
     const style_attr = e.getAttribute("style");
     const rawStyles = e.getAttribute("styles") || style_attr;
@@ -42730,21 +42873,26 @@ var _Transpiler = class _Transpiler {
       }
     }
     if (conditionalClasses) {
+      const isInsideTableColumn = !!((_b = context == null ? void 0 : context.get) == null ? void 0 : _b.call(context, "isInsideTableColumn"));
       conditionalClasses = conditionalClasses.startsWith("bind:") ? `${conditionalClasses.substring(5)}` : conditionalClasses;
+      if (isInsideTableColumn) {
+        conditionalClasses = conditionalClasses.replace("fragment.Page", "fragment");
+      }
+      const transformCondition = (exp) => isInsideTableColumn ? transformTableColumnClassExpression(exp) : addOptionalChaining(exp);
       if (conditionalClasses.startsWith("{") && conditionalClasses.endsWith("}")) {
         conditionalClasses = conditionalClasses.slice(1, -1);
-        let expressions = conditionalClasses.split(",").map((expression) => {
-          const [className, condition] = expression.split(":");
-          if (!condition) {
+        let expressions = splitTopLevel(conditionalClasses, ",").map((expression) => {
+          const [className, condition] = splitTopLevel(expression, ":", 2);
+          if (condition === void 0) {
             return `'${className.trim()}'`;
           }
-          return `(${addOptionalChaining(condition.trim())} ? ${className.replace(/'$/, " '")} : '')`;
+          return `(${transformCondition(condition.trim())} ? ${className.replace(/'$/, " '")} : '')`;
         });
         conditionalClasses = expressions.join("+");
       } else if (!conditionalClasses.includes(":") && !conditionalClasses.includes("&&") && !conditionalClasses.includes("||") && !conditionalClasses.includes("$formField")) {
-        conditionalClasses = `${conditionalClasses}`;
+        conditionalClasses = isInsideTableColumn ? transformCondition(conditionalClasses) : `${conditionalClasses}`;
       } else {
-        conditionalClasses = addOptionalChaining(conditionalClasses);
+        conditionalClasses = transformCondition(conditionalClasses);
       }
       if (classes == null ? void 0 : classes.startsWith("{")) {
         classes = classes.substring(0, classes.length - 1);
@@ -42756,7 +42904,7 @@ var _Transpiler = class _Transpiler {
       }
     } else if (classes.includes("{{") && classes.includes("}}")) {
       const mustacheClass = transformClassWithMustacheExpressions(classes, {
-        isInsideTableColumn: !!((_b = context == null ? void 0 : context.get) == null ? void 0 : _b.call(context, "isInsideTableColumn"))
+        isInsideTableColumn: !!((_c = context == null ? void 0 : context.get) == null ? void 0 : _c.call(context, "isInsideTableColumn"))
       });
       classes = mustacheClass != null ? mustacheClass : `'${classes}'`;
     } else if (!!classes && !classes.startsWith("{")) {
@@ -42995,21 +43143,25 @@ var _Transpiler = class _Transpiler {
     return attrName.endsWith("url") || attrName.endsWith("src");
   }
   transformAttr(tagName, name, value, context, tx) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     if (name === "styles" || name === "style" || name === "className") ; else if (name === "groupby" && value.includes("(")) {
       value = `${this.findArgs(value, context)} => ${value}`;
       value = `{${value}}`;
     } else if (name.startsWith("on-")) {
       name = "on" + name.charAt(3).toUpperCase() + name.substr(4);
-      value = value.replace(/item,/g, "$item,");
-      value = value.replace(/item\./g, "$item.");
-      value = value.replace(/item\)/g, "$item)");
-      if ((_a = context == null ? void 0 : context.get) == null ? void 0 : _a.call(context, "isInsideList")) {
+      const standaloneDollarItem = /(?<=[(,]\s*)\$item(?=\s*[,)])/;
+      const standaloneBareItem = /(?<=[(,]\s*)item(?=\s*[,)])/;
+      if (((_a = context == null ? void 0 : context.get) == null ? void 0 : _a.call(context, "isInsideList")) && standaloneDollarItem.test(value) && standaloneBareItem.test(value)) {
+        value = value.replace(new RegExp(standaloneDollarItem, "g"), "$eventItem");
+      }
+      value = value.replace(/(?<!\$)\bitem\b(?=[,)])/g, "$item");
+      value = value.replace(/(?<!\$)\bitem\b\./g, "$item.");
+      if ((_b = context == null ? void 0 : context.get) == null ? void 0 : _b.call(context, "isInsideList")) {
         value = value.replace(/;+\s*$/, "").trim();
         value = addFragmentOptionalChaining(value, false);
       }
       const args = this.findArgs(value, context);
-      if ((_b = context == null ? void 0 : context.get) == null ? void 0 : _b.call(context, "isInsideTableColumn")) {
+      if ((_c = context == null ? void 0 : context.get) == null ? void 0 : _c.call(context, "isInsideTableColumn")) {
         value = value.replace(/\brow\b/g, "rowData");
       }
       const arrowParams = this.parseArrowParamNames(args);
@@ -43032,7 +43184,7 @@ var _Transpiler = class _Transpiler {
       let exp = `${value.substring(5)}`;
       exp = exp.replace("fragment.Page", "fragment");
       const isProgressCircleDatavalue = tagName === "wm-progress-circle" && name === "datavalue";
-      exp = ((_c = context == null ? void 0 : context.get) == null ? void 0 : _c.call(context, "isInsideTableColumn")) ? transformTableColumnClassExpression(exp) : modifyExpression(exp);
+      exp = ((_d = context == null ? void 0 : context.get) == null ? void 0 : _d.call(context, "isInsideTableColumn")) ? transformTableColumnClassExpression(exp) : modifyExpression(exp);
       exp = resolveFormatContext(exp, context);
       exp = this.convertStringBooleanTernary(exp);
       if (!exp) {
@@ -43182,6 +43334,7 @@ var transpileMarkup = (markup, isPartOfPrefab, splitCode, variables, preview, in
     components: {},
     partials: [],
     wmxcomponents: [],
+    webComponents: [],
     prefabs: [],
     imports: []
   };
@@ -43212,6 +43365,7 @@ var transpileMarkup = (markup, isPartOfPrefab, splitCode, variables, preview, in
     }
   });
   parsed.childNodes.forEach((node) => {
+    var _a;
     if (node.nodeType === NodeType2.TEXT_NODE) {
       const textContent = node.text;
       if (textContent.trim()) {
@@ -43226,6 +43380,7 @@ var transpileMarkup = (markup, isPartOfPrefab, splitCode, variables, preview, in
       finalResult.partials.push(...result.partials);
       finalResult.prefabs.push(...result.prefabs);
       finalResult.wmxcomponents.push(...result.wmxcomponents);
+      (_a = finalResult.webComponents) == null ? void 0 : _a.push(...result.webComponents || []);
       finalResult.imports.push(...result.imports);
       if (result.pageEvents) finalResult.pageEvents = result.pageEvents;
     }
@@ -43263,8 +43418,8 @@ var createExpression = (element, attrName) => {
   let displayexpression = element.attrs[attrName];
   if (displayexpression == null ? void 0 : displayexpression.startsWith("bind:")) {
     displayexpression = displayexpression.substring(5).trim();
-    displayexpression = displayexpression.replace(/;+$/, "");
     displayexpression = decodeHTMLEntities(displayexpression);
+    displayexpression = displayexpression.replace(/;+$/, "");
     displayexpression = transformDollarBracketSyntax(displayexpression);
     displayexpression = displayexpression.replace(/fragment\.\$item/g, "$item");
     displayexpression = displayexpression.replace(/fragment\.\$index/g, "$index");
@@ -43293,14 +43448,22 @@ var createExpression = (element, attrName) => {
     return `{($item) => (${transformedExp})}`;
   }
 };
-var preTranspileHtmlElement = (e) => {
+var preTranspileHtmlElement = (e, isInsideTableColumn = false) => {
   const styleObj = style_transformer_default(e, (propName) => {
     return true;
   }) || {};
-  const attrs = Object.keys(e.attributes).filter((attr) => attr !== "name").map((attr) => {
+  const attrs2 = Object.keys(e.attributes).filter((attr) => attr !== "name").map((attr) => {
     const value = e.getAttribute(attr);
     if (!value) return `${attr}=""`;
     if (attr === "class") {
+      if (value.includes("{{") && value.includes("}}")) {
+        const mustacheClassName = transformClassWithMustacheExpressions(value, {
+          isInsideTableColumn
+        });
+        if (mustacheClassName) {
+          return `className=${mustacheClassName}`;
+        }
+      }
       return `className="${value}"`;
     } else if (attr === "style") {
       const styleObject = convertStyleStringToObject(value);
@@ -43312,7 +43475,7 @@ var preTranspileHtmlElement = (e) => {
   if (styleObj && Object.keys(styleObj).length > 0) {
     styleAttr = ` style={${JSON.stringify(styleObj)}}`;
   }
-  const attrsStr = attrs ? ` ${attrs}` : "";
+  const attrsStr = attrs2 ? ` ${attrs2}` : "";
   return `<${e.tagName.toLowerCase()}${attrsStr}${styleAttr}>`;
 };
 var convertStyleStringToObject = (styleString) => {
@@ -43370,6 +43533,12 @@ var label_transformer_default = {
 };
 
 // src/transpile/components/layout/layout-region-factory.ts
+var isOnlyWmParamChildren = (element) => {
+  const elementChildren = element.childNodes.filter(
+    (node) => node.nodeType === NodeType.ELEMENT_NODE
+  );
+  return elementChildren.length > 0 && elementChildren.every((node) => node.tagName === "WM-PARAM");
+};
 var partialContainerImport = [
   {
     name: "WmPartialContainer",
@@ -43385,6 +43554,11 @@ function createLayoutRegionTransformer(config) {
       const content = element.getAttribute("content") || defaultContent;
       const name = element.getAttribute("name") || defaultName;
       const isPreview = context.get("preview") === true;
+      const hasCustomContent = element.childNodes.some((node) => node.nodeType === NodeType.ELEMENT_NODE) && !isOnlyWmParamChildren(element);
+      if (hasCustomContent) {
+        return `<${tag} ${transformAttrs(element, context)}>
+        `;
+      }
       if (isPreview) {
         return `<${tag} ${transformAttrs(element, context)}>
         <WmPartialContainer content="${content}" isLayout={true} partialName="${name}" listener={fragment} />
@@ -43396,6 +43570,10 @@ function createLayoutRegionTransformer(config) {
     },
     post: () => `</${tag}>`,
     imports: (element, context) => {
+      const hasCustomContent = element.childNodes.some((node) => node.nodeType === NodeType.ELEMENT_NODE) && !isOnlyWmParamChildren(element);
+      if (hasCustomContent) {
+        return [...componentImports];
+      }
       const isPreview = context.get("preview") === true;
       if (isPreview) {
         return [...componentImports, ...partialContainerImport];
@@ -43790,7 +43968,7 @@ function withPartialContainer(element, context, options) {
     if (options.removeName) {
       element.removeAttribute("name");
     }
-    const params = options.extraParams ? `props:Record<string, any>, onLoad:()=>void, ${options.extraParams}` : "props:Record<string, any>, onLoad:()=>void";
+    const params = options.extraParams ? `props:Record<string, any>, onLoad:(widget?: any)=>void, ${options.extraParams}` : "props:Record<string, any>, onLoad:(widget?: any)=>void";
     partial = `${options.prop}={(${params}) => (${partial})}`;
   }
   return { partialAttr: partial, extraImports };
@@ -43950,7 +44128,7 @@ var button_transformer_default = {
       const enclosingFormName = getParentNode(element, "wm-form");
       enclosingFormName && element.setAttribute("formName", enclosingFormName);
     }
-    const isInsideTableColumn = getParentNode(element, "wm-table-column");
+    const isInsideTableColumn = getParentNode(element, "wm-table-column") || (context == null ? void 0 : context.get("isInsideTableColumn"));
     const stopPropagation = (context == null ? void 0 : context.get("isInsideList")) || isInsideTableColumn ? " stopPropagation={true}" : "";
     return `<WmButton listener={fragment} ${stopPropagation} ${transformAttrs(element, context)} ${context.isPartOfPrefab ? " prefabName={fragment.prefabName}" : ""} >`;
   },
@@ -43986,10 +44164,10 @@ var createNavItemLabelExpression = (element) => {
   let expression;
   if (itemlabel.startsWith("bind:")) {
     expression = itemlabel.substring(5);
-    expression = expression.replace(/\[([^\]]+)\]/g, (match, content) => {
-      const transformedContent = content.replace(/fragment\./g, "item.");
-      return `[${transformedContent}]`;
-    });
+    expression = expression.replace(
+      /fragment\.([a-zA-Z_$][a-zA-Z0-9_$]*)/g,
+      (match, name) => FRAGMENT_SCOPED_NAMES.includes(name) ? match : `item.${name}`
+    );
   } else {
     expression = `item.${itemlabel}`;
   }
@@ -44201,7 +44379,7 @@ var buildItemAttrsFromListTemplate = (template, context) => {
 };
 var list_transformer_default = {
   pre: (element, context) => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e;
     context.set("isInsideList", true);
     const widgetName = element.attrs["name"];
     const listContent = parse5(`<wm-list-content name="${widgetName + "Item"}"></wm-list-content>`).firstChild;
@@ -44237,9 +44415,9 @@ var list_transformer_default = {
     transformRepeatChildAttr(template, "fragment.item", "$item");
     transformRepeatChildAttr(template, "fragment.index", "$index");
     transformRepeatChildAttr(template, "fragment.$index", "$index");
-    transformRepeatChildAttr(template, "itemRef.$index", "index");
-    transformRepeatChildAttr(template, "itemRef.$first", "first");
-    transformRepeatChildAttr(template, "itemRef.$last", "last");
+    transformRepeatChildAttr(template, "fragment.itemRef.$index", "$index");
+    transformRepeatChildAttr(template, "fragment.itemRef.$first", "$first");
+    transformRepeatChildAttr(template, "fragment.itemRef.$last", "$last");
     if (template && dataSet && dataSet.startsWith("bind:")) {
       transformRepeatChildData(
         template,
@@ -44290,22 +44468,18 @@ var list_transformer_default = {
         true,
         widgetName
       );
-      transformRepeatChildAttr(template, dataSet.substring(5), "$item");
-      const isLoading = (_a = dataSet.match(/(fragment)+\.Variables\.[^\.]+/g)) == null ? void 0 : _a.map((v) => v + ".isExecuting").join(" || ");
-      if (isLoading) {
-        element.setAttribute("loadingdata", `bind:${isLoading}`);
-      }
-      if ((_b = element.getAttribute("disableitem")) == null ? void 0 : _b.startsWith("bind:")) {
+      transformRepeatChildAttr(template, dataSet.substring(5), "$item", ["dataset", "datasource"]);
+      if ((_a = element.getAttribute("disableitem")) == null ? void 0 : _a.startsWith("bind:")) {
         const disabelItemExp = replaceAll(
-          ((_c = element.getAttribute("disableitem")) == null ? void 0 : _c.substring(5)) || "",
+          ((_b = element.getAttribute("disableitem")) == null ? void 0 : _b.substring(5)) || "",
           dataSet.substring(5) + "[fragment.$i]",
           "$item"
         );
         disableitem = `disableitem={($item, $index) => fragment.eval(() => ${disabelItemExp})}`;
         element.removeAttribute("disableitem");
       }
-      if ((_d = element.getAttribute("itemkey")) == null ? void 0 : _d.startsWith("bind:")) {
-        let itemKeyExp = ((_e = element.getAttribute("itemkey")) == null ? void 0 : _e.substring(5)) || "";
+      if ((_c = element.getAttribute("itemkey")) == null ? void 0 : _c.startsWith("bind:")) {
+        let itemKeyExp = ((_d = element.getAttribute("itemkey")) == null ? void 0 : _d.substring(5)) || "";
         itemKeyExp = replaceAll(itemKeyExp, dataSet.substring(5) + "[fragment.$i]", "$item");
         itemKeyExp = replaceAll(itemKeyExp, dataSet.substring(5) + "[0]", "$item");
         itemKey = `itemkey={($item, $index) => fragment.eval(() => ${itemKeyExp})}`;
@@ -44329,7 +44503,7 @@ var list_transformer_default = {
             `Variables.${variableName}.dataSet`
           ];
           dataPatterns.forEach((pattern) => {
-            transformRepeatChildAttr(template, pattern, "$item");
+            transformRepeatChildAttr(template, pattern, "$item", ["dataset", "datasource"]);
           });
         }
       }
@@ -44339,7 +44513,7 @@ var list_transformer_default = {
       }
     }
     const templateNode = element.childNodes.find((c) => c instanceof HTMLElement);
-    const itemAttrsStr = ((_f = templateNode == null ? void 0 : templateNode.tagName) == null ? void 0 : _f.toLowerCase()) === "wm-listtemplate" ? buildItemAttrsFromListTemplate(templateNode, context) : "";
+    const itemAttrsStr = ((_e = templateNode == null ? void 0 : templateNode.tagName) == null ? void 0 : _e.toLowerCase()) === "wm-listtemplate" ? buildItemAttrsFromListTemplate(templateNode, context) : "";
     addTemplateClass(element);
     listContent.childNodes = element.childNodes;
     element.childNodes = [listContent];
@@ -44350,6 +44524,7 @@ var list_transformer_default = {
      renderItem={($item:Record<string, any>, $index:number, list:Record<string, any>[] ,getCurrentItemWidgets :any) => {
      const currentItemWidgetsRef = React.useRef({})   
      const currentItemWidgets = getCurrentItemWidgets($index);
+     const item = $item;
      currentItemWidgetsRef.current = currentItemWidgets;
        const $first = $index === 0;
        const $last = list && $index === list.length - 1;
@@ -44863,8 +45038,8 @@ var form_field_transformer_default = {
       element.setAttribute("formName", formName);
     }
     (() => {
-      const attrs = ["primary-key", "is-related"];
-      attrs.forEach((attr) => {
+      const attrs2 = ["primary-key", "is-related"];
+      attrs2.forEach((attr) => {
         if (element.hasAttribute(attr)) {
           element.removeAttribute(attr);
         }
@@ -45057,7 +45232,8 @@ var getFormActionExpr = (action, isAsync = false) => {
   const asyncKeyword = isAsync ? "async " : "";
   const awaitKeyword = isAsync ? "await " : "";
   const processedAction = isAsync && action.includes("?.submit();") ? action.replace(/(\S+\?\.submit\(\);)/g, `${awaitKeyword}$1`) : action;
-  return `${asyncKeyword}($event) => {
+  const params = /\bwidget\b/.test(action) ? "($event, widget)" : "($event)";
+  return `${asyncKeyword}${params} => {
         ${processedAction}
     }`;
 };
@@ -45097,11 +45273,11 @@ var form_action_transformer_default = {
     const fragmentPrefix = "fragment?.Widgets";
     const widgetsPrefix = "Widgets";
     let btnClass = "btn-default";
-    if (actionType === "submit") {
+    if (actionType === "submit" || action === "submit()") {
       btnClass = "btn-primary";
       action = listName ? getWidgetAccessor(listPrefix, formName, "?.submit();", isDynamicFormName) + (action || "") : getWidgetAccessor(widgetsPrefix, formName, "?.submit();", isDynamicFormName) + (action || "");
     }
-    if (actionType === "reset") {
+    if (actionType === "reset" || action === "reset()") {
       action = listName ? getWidgetAccessor(listPrefix, formName, "?.formreset()", isDynamicFormName) + (action || "") : getWidgetAccessor(widgetsPrefix, formName, "?.formreset();", isDynamicFormName) + (action || "");
     }
     if (action) {
@@ -45223,10 +45399,10 @@ var applyAttr = (e, replace2, replaceWith) => {
   });
   e.childNodes.forEach((c) => isHTMLElement(c) && applyAttr(c, replace2, replaceWith));
 };
+var isInsideDialog = (element) => !!getParentNode(element, "wm-dialog");
 var dialog_actions_transformer_default = {
   pre: (element, context) => {
-    const parent = element.parentNode;
-    if (!(parent == null ? void 0 : parent.rawTagName.includes("dialog"))) {
+    if (!isInsideDialog(element)) {
       Array.from(element.childNodes).forEach((child) => {
         element.removeChild(child);
       });
@@ -45243,15 +45419,13 @@ var dialog_actions_transformer_default = {
     return `<WmDialogActions   ${transformAttrs(element, context)}>`;
   },
   post: (element, context) => {
-    const parent = element.parentNode;
-    if (!(parent == null ? void 0 : parent.rawTagName.includes("dialog"))) {
+    if (!isInsideDialog(element)) {
       return ``;
     }
     return "</WmDialogActions>";
   },
   imports: (element, context) => {
-    const parent = element.parentNode;
-    if (!(parent == null ? void 0 : parent.rawTagName.includes("dialog"))) {
+    if (!isInsideDialog(element)) {
       return [];
     }
     return imports37;
@@ -45315,12 +45489,16 @@ var tabs_transformer_default = {
         transformRepeatChildData(
           repeatTemplate,
           dataSet.substring(5) + "[0]",
-          "list_item"
+          "list_item",
+          true,
+          widgetName
         );
         transformRepeatChildData(
           repeatTemplate,
           dataSet.substring(5) + "[$i]",
-          "list_item"
+          "list_item",
+          true,
+          widgetName
         );
         repeatTemplate.childNodes = element.childNodes;
         element.childNodes = [repeatTemplate];
@@ -45734,7 +45912,7 @@ var imports52 = [
 ];
 var accordion_transformer_default = {
   pre: (element, context) => {
-    element.attrs["name"];
+    const widgetName = element.attrs["name"];
     let dataSet = element.getAttribute("dataset");
     if (dataSet && dataSet.startsWith("bind:") && element.getAttribute("type") === "dynamic") {
       dataSet = dataSet.substring(5);
@@ -45744,10 +45922,34 @@ var accordion_transformer_default = {
         accordionPane.setAttribute("active", "bind:$item.active");
         accordionPane.setAttribute("toggle", "bind:$item.toggle");
       }
-      transformRepeatChildData(template, dataSet + "[0]", "repeat_item");
-      transformRepeatChildData(template, dataSet + "[$i]", "repeat_item");
-      transformRepeatChildData(template, dataSet + "[fragment.$i]", "repeat_item");
-      transformRepeatChildData(template, dataSet + "[fragment.$i]", "repeat_item");
+      transformRepeatChildData(
+        template,
+        dataSet + "[0]",
+        "repeat_item",
+        true,
+        widgetName
+      );
+      transformRepeatChildData(
+        template,
+        dataSet + "[$i]",
+        "repeat_item",
+        true,
+        widgetName
+      );
+      transformRepeatChildData(
+        template,
+        dataSet + "[fragment.$i]",
+        "repeat_item",
+        true,
+        widgetName
+      );
+      transformRepeatChildData(
+        template,
+        dataSet + "[fragment.$i]",
+        "repeat_item",
+        true,
+        widgetName
+      );
       context.set("old_props", context.props);
       context.props = ["$item", "$index"];
       return `<WmAccordion listener={fragment} ${transformAttrs(element, context)} render={(($item:Record<string,any>,$index:number,data:Record<string,any>[])=>(`;
@@ -46946,18 +47148,16 @@ var table_transformer_default = {
     const datasourceAttr = element.getAttribute("datasource");
     const binddatasetAttr = element.getAttribute("binddataset");
     if (datasetAttr && datasetAttr.includes(".dataSet")) {
-      const match = datasetAttr.match(
-        /^bind:fragment\.((?:App\.activePage\.|App\.)?Variables)\.([^.]+)\.dataSet(?=[^A-Za-z0-9_]|$)/
-      );
-      if (match) {
-        const scopePath = match[1];
-        const variableName = match[2];
-        context.set("tableDatasetVariableName", variableName);
+      const binding = parseVariableDataSetBinding(datasetAttr);
+      if (binding) {
+        const { scopePath, datasourceExpr, variableName } = binding;
+        if (variableName) {
+          context.set("tableDatasetVariableName", variableName);
+        }
         if (!datasourceAttr) {
-          const datasourceExpr = `fragment.${scopePath}.${variableName}`.split(".").join("?.");
           element.setAttribute("datasource", `{${datasourceExpr}}`);
         }
-        if (!binddatasetAttr) {
+        if (!binddatasetAttr && variableName) {
           element.setAttribute("binddataset", `${scopePath}.${variableName}.dataSet`);
         }
       }
@@ -47486,8 +47686,37 @@ var wmx_component_transformer_default = {
   ]
 };
 
+// src/transpile/components/web-component/web-component.transformer.ts
+var toCamelCase = (name) => name.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+var attrs = (element) => Object.entries(element.attributes).map(([name, value]) => {
+  if (name.startsWith("on-")) {
+    return `on${name.substring(3).replace(/-/g, "")}={($event) => { ${value.replace(/;+$/, "")} }}`;
+  }
+  if (value.startsWith("bind:")) return `${toCamelCase(name)}={${value.substring(5)}}`;
+  return `${name}=${JSON.stringify(value)}`;
+}).join(" ");
+var web_component_transformer_default = {
+  pre: (element, context) => {
+    var _a;
+    const tagName = element.tagName.toLowerCase();
+    if ((_a = context.data) == null ? void 0 : _a.preview) {
+      return `<${tagName} ${attrs(element)}>`;
+    }
+    return `<WebComponent tagname=${JSON.stringify(tagName)} ${attrs(element)} />`;
+  },
+  post: (element, context) => {
+    var _a;
+    return ((_a = context.data) == null ? void 0 : _a.preview) ? `</${element.tagName.toLowerCase()}>` : "";
+  },
+  imports: (element, context) => {
+    var _a;
+    return ((_a = context.data) == null ? void 0 : _a.preview) ? [] : [{ name: "WebComponent", from: "@/app/helper/web-component" }];
+  }
+};
+
 // src/transpile/components/transform-register.ts
 var transform_register_default = () => {
+  registerTransformer("__web-component__", web_component_transformer_default);
   registerTransformer("wm-page", page_transformer_default);
   registerTransformer("wm-page-content", page_content_transformer_default);
   registerTransformer("wm-content", content_transformer_default);