@wavemaker-ai/react-codegen 1.0.0-rc.647655 → 1.0.0-rc.647684

package/dist/transpiler/index.mjs

@@ -4567,9 +4567,9 @@ var require_lodash = __commonJS({
         }
         var camelCase = createCompounder(function(result2, word, index) {
           word = word.toLowerCase();
-          return result2 + (index ? capitalize5(word) : word);
+          return result2 + (index ? capitalize4(word) : word);
         });
-        function capitalize5(string) {
+        function capitalize4(string) {
           return upperFirst2(toString(string).toLowerCase());
         }
         function deburr(string) {
@@ -5178,7 +5178,7 @@ var require_lodash = __commonJS({
         lodash.add = add;
         lodash.attempt = attempt;
         lodash.camelCase = camelCase;
-        lodash.capitalize = capitalize5;
+        lodash.capitalize = capitalize4;
         lodash.ceil = ceil;
         lodash.clamp = clamp;
         lodash.clone = clone2;
@@ -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)) {
@@ -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,15 +21398,15 @@ 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();
@@ -21419,7 +21419,7 @@ var require_html = __commonJS({
           enumerable: false,
           configurable: true
         });
-        HTMLElement4.prototype.set_content = function(content, options) {
+        HTMLElement5.prototype.set_content = function(content, options) {
           if (options === void 0) {
             options = {};
           }
@@ -21431,7 +21431,7 @@ var require_html = __commonJS({
           }
           this.childNodes = content;
         };
-        HTMLElement4.prototype.replaceWith = function() {
+        HTMLElement5.prototype.replaceWith = function() {
           var _this = this;
           var nodes = [];
           for (var _i = 0; _i < arguments.length; _i++) {
@@ -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,7 +21760,7 @@ 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) {
@@ -21773,7 +21773,7 @@ var require_html = __commonJS({
             });
             (_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)) {
@@ -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) {
@@ -38981,6 +38981,7 @@ var NodeType = import_dist.default.NodeType;
 var esm_default = import_dist.default;
 
 // src/utils.browser.ts
+var appLocaleRegex = /(fragment\.)?(?:App\.)?appLocale(?:\.messages)?(?:\[(['"])([^'"]+)\2\]|\.([a-zA-Z0-9_]+))/g;
 function isValid(expr) {
   try {
     (0, import_parser.parse)(expr, { sourceType: "module", plugins: ["optionalChaining"] });
@@ -39270,7 +39271,6 @@ var transformAppLocale = (exp) => {
     exp = exp.replace("fragment?.Prefab", "fragment");
     exp = exp.replace("fragment.Prefab", "fragment");
   }
-  const appLocaleRegex = /(fragment\.)?appLocale(?:\.messages)?(?:\[(['"])([^'"]+)\2\]|\.([a-zA-Z0-9_]+))/g;
   const replacer = (fullMatch, fragmentPrefix, quoteType, keyFromBrackets, keyFromDot) => {
     const key = keyFromBrackets || keyFromDot;
     if (key) {
@@ -39505,8 +39505,30 @@ var htmlElements = [
 // src/transpile/bind.ex.transformer.ts
 var FORMAT_CONTEXT = "{formatContext:''}";
 var FORMAT_CONTEXT_REGEX = /\{formatContext:''\}/g;
-var FRAGMENT_SCOPED_NAMES = ["appLocale", "Variables"];
+var FRAGMENT_SCOPED_NAMES = ["appLocale", "Variables", "App"];
 var LIST_SCOPE_VARS = /* @__PURE__ */ new Set(["currentItemWidgets"]);
+var JS_GLOBALS = /* @__PURE__ */ new Set([
+  "Number",
+  "String",
+  "Boolean",
+  "Array",
+  "Object",
+  "Date",
+  "Math",
+  "JSON",
+  "RegExp",
+  "Promise",
+  "Symbol",
+  "BigInt",
+  "parseInt",
+  "parseFloat",
+  "isNaN",
+  "isFinite",
+  "encodeURIComponent",
+  "decodeURIComponent",
+  "encodeURI",
+  "decodeURI"
+]);
 var ExpressionTransformer = class {
   constructor(ctx = "this", mode = "attr") {
     this.ctx = ctx;
@@ -39536,14 +39558,14 @@ var ExpressionTransformer = class {
     if (this.mode === "event" && ast.receiver instanceof ImplicitReceiver && ast.name === "$event") {
       return "$event";
     }
-    if (ast.receiver instanceof ImplicitReceiver && LIST_SCOPE_VARS.has(ast.name)) {
+    if (ast.receiver instanceof ImplicitReceiver && (LIST_SCOPE_VARS.has(ast.name) || JS_GLOBALS.has(ast.name))) {
       return ast.name;
     }
     const r = this.build(ast.receiver);
     return `${r}.${ast.name}`;
   }
   processSafePropertyRead(ast) {
-    if (ast.receiver instanceof ImplicitReceiver && LIST_SCOPE_VARS.has(ast.name)) {
+    if (ast.receiver instanceof ImplicitReceiver && (LIST_SCOPE_VARS.has(ast.name) || JS_GLOBALS.has(ast.name))) {
       return ast.name;
     }
     const r = this.build(ast.receiver);
@@ -39591,16 +39613,23 @@ var ExpressionTransformer = class {
     const rhs = this.build(ast.value);
     return `${lhs} = ${rhs}`;
   }
-  processMethodCall(ast) {
+  buildCallArgs(args) {
     const _args = [];
-    for (const arg of ast.args) {
+    for (const arg of args) {
       let argExp = this.build(arg);
-      const fragmentScoped = typeof argExp === "string" && FRAGMENT_SCOPED_NAMES.some((name) => argExp.includes(name));
+      const fragmentScoped = typeof argExp === "string" && FRAGMENT_SCOPED_NAMES.some((name) => name !== this.ctx && argExp.includes(name));
       if (this.mode === "event" && !fragmentScoped && argExp.replace) {
         argExp = argExp.replace(`${this.ctx}.`, "");
       }
       _args.push(argExp);
     }
+    return _args;
+  }
+  processMethodCall(ast) {
+    const _args = this.buildCallArgs(ast.args);
+    if (ast.receiver instanceof ImplicitReceiver && JS_GLOBALS.has(ast.name)) {
+      return `${ast.name}(${_args.join(",")})`;
+    }
     const fn2 = this.build(ast.receiver);
     if (_args.includes("currentItemWidgets")) {
       _args.forEach((arg, index) => {
@@ -39612,14 +39641,9 @@ var ExpressionTransformer = class {
     return `${fn2}?.${ast.name}?.(${_args.join(",")})`;
   }
   processSafeMethodCall(ast) {
-    const _args = [];
-    for (const arg of ast.args) {
-      let argExp = this.build(arg);
-      const fragmentScoped = typeof argExp === "string" && FRAGMENT_SCOPED_NAMES.some((name) => argExp.includes(name));
-      if (this.mode === "event" && !fragmentScoped && argExp.replace) {
-        argExp = argExp.replace(`${this.ctx}.`, "");
-      }
-      _args.push(argExp);
+    const _args = this.buildCallArgs(ast.args);
+    if (ast.receiver instanceof ImplicitReceiver && JS_GLOBALS.has(ast.name)) {
+      return `${ast.name}(${_args.join(",")})`;
     }
     const fn2 = this.build(ast.receiver);
     return `${fn2}?.${ast.name}?.(${_args.join(",")})`;
@@ -40840,7 +40864,10 @@ var style_transformer_default = (element, isStyleProperty) => {
   StyleProps.forEach((parser, k) => {
     if (!!element.hasAttribute(k) && isStyleProperty && isStyleProperty(k)) {
       const value = element.getAttribute(k);
-      element.removeAttribute(k);
+      const isFillDimension = (k === "width" || k === "height") && value === "fill";
+      if (!isFillDimension) {
+        element.removeAttribute(k);
+      }
       if (value) {
         if (value.startsWith("bind:")) {
           if (k === "backgroundimage" && value.startsWith('bind:"') && value.endsWith('"')) {
@@ -41755,7 +41782,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) {
@@ -41764,7 +41791,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;
@@ -41782,10 +41809,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;
@@ -41905,7 +41932,9 @@ var AutolayoutCodegen = class {
       }
       this.collectSizeFlexProps(element, dimKey, raw, flexProps);
       classNames.push(...this.registerSizeClass(element, dimKey, raw));
-      element.removeAttribute(dimKey);
+      if (raw !== "fill") {
+        element.removeAttribute(dimKey);
+      }
     }
     for (const [prop, value] of Object.entries(flexProps)) {
       classNames.push(this.registerClass(prop, value));
@@ -41951,10 +41980,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);
@@ -42371,8 +42400,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;
+      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 = {
@@ -42382,9 +42413,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()}`
@@ -42396,12 +42431,14 @@ var _Transpiler = class _Transpiler {
       if (isHtmlElement) {
         result.markup = preTranspileHtmlElement(e);
         e.childNodes.forEach((c) => {
+          var _a2;
           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;
@@ -42413,18 +42450,20 @@ var _Transpiler = class _Transpiler {
           }
         });
         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;
           if (c && c.nodeType == NodeType2.ELEMENT_NODE) {
             const cResult = this.transpile(c, isPartOfPrefab, splitCode, context);
             (0, import_lodash5.assignIn)(result.components, cResult.components);
@@ -42432,6 +42471,7 @@ 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;
@@ -42442,10 +42482,10 @@ var _Transpiler = class _Transpiler {
             }
           }
         });
-        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}`;
@@ -42455,6 +42495,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:
@@ -42620,7 +42673,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;
@@ -42701,7 +42754,12 @@ 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) => {
@@ -42709,13 +42767,13 @@ var _Transpiler = class _Transpiler {
           if (!condition) {
             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);
@@ -42727,7 +42785,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("{")) {
@@ -43017,7 +43075,7 @@ var _Transpiler = class _Transpiler {
       if (name === "conditionalclass") {
         return "";
       }
-    } else if (name === "width" || name === "height") {
+    } else if ((name === "width" || name === "height") && value != "fill") {
       `${value.substring(5)}`;
       value = `{${value}}`;
     } else {
@@ -43153,6 +43211,7 @@ var transpileMarkup = (markup, isPartOfPrefab, splitCode, variables, preview, in
     components: {},
     partials: [],
     wmxcomponents: [],
+    webComponents: [],
     prefabs: [],
     imports: []
   };
@@ -43183,6 +43242,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()) {
@@ -43197,6 +43257,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;
     }
@@ -43268,7 +43329,7 @@ var preTranspileHtmlElement = (e) => {
   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") {
@@ -43283,7 +43344,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) => {
@@ -43356,6 +43417,13 @@ 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
+      );
+      if (hasCustomContent) {
+        return `<${tag} ${transformAttrs(element, context)}>
+        `;
+      }
       if (isPreview) {
         return `<${tag} ${transformAttrs(element, context)}>
         <WmPartialContainer content="${content}" isLayout={true} partialName="${name}" listener={fragment} />
@@ -43367,6 +43435,12 @@ function createLayoutRegionTransformer(config) {
     },
     post: () => `</${tag}>`,
     imports: (element, context) => {
+      const hasCustomContent = element.childNodes.some(
+        (node) => node.nodeType === NodeType.ELEMENT_NODE
+      );
+      if (hasCustomContent) {
+        return [...componentImports];
+      }
       const isPreview = context.get("preview") === true;
       if (isPreview) {
         return [...componentImports, ...partialContainerImport];
@@ -43761,7 +43835,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 };
@@ -43921,7 +43995,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}" : ""} >`;
   },
@@ -44172,7 +44246,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;
@@ -44208,9 +44282,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,
@@ -44262,21 +44336,17 @@ var list_transformer_default = {
         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:")) {
+      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})}`;
@@ -44310,7 +44380,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];
@@ -44549,6 +44619,7 @@ var getWidgetMarkup = (widgetType, widgetName, commonFields, element) => {
   const timeconfirmationtitle = isDateTimeTag && element.getAttribute("timeconfirmationtitle") ? `timeconfirmationtitle="${(_f = element.getAttribute("timeconfirmationtitle")) == null ? void 0 : _f.replace(/"/g, "&quot;")}"` : "";
   const timecanceltitle = isDateTimeTag && element.getAttribute("timecanceltitle") ? `timecanceltitle="${(_g = element.getAttribute("timecanceltitle")) == null ? void 0 : _g.replace(/"/g, "&quot;")}"` : "";
   const outputformat = element.getAttribute("outputformat") ? `outputformat="${(_h = element.getAttribute("outputformat")) == null ? void 0 : _h.replace(/"/g, "&quot;")}"` : ``;
+  const hyphenatedToComponentName = (str) => str.split("-").map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1)).join("") || "";
   switch (widgetType) {
     case "text":
     case "password":
@@ -44733,6 +44804,13 @@ var getWidgetMarkup = (widgetType, widgetName, commonFields, element) => {
                 ${floatinglabel}>
               </wm-colorpicker>`;
       break;
+    default:
+      if (widgetType.toLowerCase().includes("wmx")) {
+        const fromAttr = widgetType == null ? void 0 : widgetType.split("-").at(-1);
+        const componentName = hyphenatedToComponentName((fromAttr || "customwidget").trim()) || "Customwidget";
+        tmpl = `<wmx-component componentname="${componentName}" ${commonFields} ${displayExp}></wmx-component>`;
+      }
+      break;
   }
   return tmpl;
 };
@@ -44768,7 +44846,8 @@ var form_field_transformer_default = {
         element.setAttribute("key", strippedKey);
       }
     }
-    if (DATASET_WIDGETS.includes(widgetType)) {
+    const usesDatasetBindings = DATASET_WIDGETS.includes(widgetType) || widgetType.toLowerCase().includes("wmx");
+    if (usesDatasetBindings) {
       if (element.attrs["primary-key"]) {
         element.setAttribute("primaryKey", element.attrs["primary-key"]);
       }
@@ -44825,8 +44904,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);
         }
@@ -45019,7 +45098,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}
     }`;
 };
@@ -45059,11 +45139,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) {
@@ -45140,22 +45220,27 @@ var imports36 = [
 var dialog_transformer_default = {
   pre: (element, context) => {
     element.getAttribute("name");
-    const content = new HTMLElement(
-      "wm-dialogbody",
-      {},
-      null,
-      element,
-      [0, 41]
+    const hasExplicitBody = element.childNodes.some(
+      (e) => isHTMLElement(e) && ["wm-dialogcontent", "wm-dialogbody"].includes(e.tagName.toLowerCase())
     );
-    content.nodeType = NodeType.ELEMENT_NODE;
-    const actionsIndex = element.childNodes.findIndex(
-      (e) => isHTMLElement(e) && e.tagName.toLowerCase() === "wm-dialogactions"
-    );
-    content.childNodes = element.childNodes;
-    element.childNodes = [content];
-    if (actionsIndex >= 0) {
-      const actions = content.childNodes.splice(actionsIndex, 1);
-      actions && element.childNodes.push(actions[0]);
+    if (!hasExplicitBody) {
+      const content = new HTMLElement(
+        "wm-dialogbody",
+        {},
+        null,
+        element,
+        [0, 41]
+      );
+      content.nodeType = NodeType.ELEMENT_NODE;
+      const actionsIndex = element.childNodes.findIndex(
+        (e) => isHTMLElement(e) && e.tagName.toLowerCase() === "wm-dialogactions"
+      );
+      content.childNodes = element.childNodes;
+      element.childNodes = [content];
+      if (actionsIndex >= 0) {
+        const actions = content.childNodes.splice(actionsIndex, 1);
+        actions && element.childNodes.push(actions[0]);
+      }
     }
     return `<WmDialog listener={fragment} ${transformAttrs(element, context)}>`;
   },
@@ -46385,7 +46470,7 @@ function getNearestWizardType(element) {
   while (current) {
     current = current.parentNode;
     if (!current) break;
-    if (((_a = current.tagName) == null ? void 0 : _a.toLowerCase()) === "wm-wizard") {
+    if (((_a = current == null ? void 0 : current.tagName) == null ? void 0 : _a.toLowerCase()) === "wm-wizard") {
       const type = current.getAttribute("type");
       if (type) {
         return type;
@@ -46430,7 +46515,7 @@ var imports87 = [
 function getNearestWizardName(element) {
   var _a;
   let current = element.parentNode || null;
-  if (((_a = current.tagName) == null ? void 0 : _a.toLowerCase()) === "wm-wizard") {
+  if (((_a = current == null ? void 0 : current.tagName) == null ? void 0 : _a.toLowerCase()) === "wm-wizard") {
     const n = current.getAttribute("name");
     if (n) {
       return n;
@@ -47275,6 +47360,14 @@ var getWidgetMarkup2 = (widgetType, widgetName, commonFields, element) => {
                 ${floatinglabel}>
               </wm-colorpicker>`;
       break;
+    default:
+      if (widgetType.toLowerCase().includes("wmx")) {
+        const fromAttr = widgetType == null ? void 0 : widgetType.split("-").at(-1);
+        const hyphenatedToComponentName = (str) => str.split("-").map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1)).join("") || "";
+        const componentName = hyphenatedToComponentName((fromAttr || "customwidget").trim()) || "Customwidget";
+        tmpl = `<wmx-component componentname="${componentName}" ${commonFields} ${displayExp}></wmx-component>`;
+      }
+      break;
   }
   return tmpl;
 };
@@ -47295,7 +47388,7 @@ var live_filter_field_transformer_default = {
     } else {
       filterName = currentNode.getAttribute("name");
     }
-    if (DATASET_WIDGETS.includes(widgetType)) {
+    if (DATASET_WIDGETS.includes(widgetType) || widgetType.toLowerCase().includes("wmx")) {
       if (element.attrs["primary-key"]) {
         element.setAttribute("primaryKey", element.attrs["primary-key"]);
       }
@@ -47415,34 +47508,57 @@ var linear_layout_item_default = {
 };
 
 // src/transpile/components/wmx-component/wmx-component.transformer.ts
-var capitalize4 = (str) => {
-  return str ? str.split("-").map((s) => s.charAt(0).toUpperCase() + s.substring(1)).join("") : str;
-};
 var wmx_component_transformer_default = {
   pre: (element, context) => {
-    const componentName = capitalize4(element.getAttribute("componentname"));
-    return `<Wmx${componentName} ${transformAttrs(element, context, inferTypeAndParseProperty)}>`;
-  },
-  post: (element, context) => {
-    const componentName = capitalize4(element.getAttribute("componentname"));
-    return `</Wmx${componentName}>`;
-  },
-  imports: (element, context) => {
-    const componentName = capitalize4(element.getAttribute("componentname"));
-    return [
-      {
-        name: `{Wmx${componentName}}`,
-        from: `@wavemaker-ai/wmx-components`
-      }
-    ];
+    const isFormField = element.getAttribute("formfield") === "true";
+    if (isFormField) {
+      element.removeAttribute("formfield");
+    }
+    return `<WmxRenderer listener={fragment} ${transformAttrs(element, context, inferTypeAndParseProperty)} ${isFormField ? " {...$formField}" : ""}/>`;
   },
+  post: () => "",
+  imports: () => [
+    {
+      name: `WmxRenderer`,
+      from: `@wavemaker-ai/react-runtime/components/wmx/WmxRenderer`
+    }
+  ],
   wmxcomponents: (element, context) => [
     element.getAttribute("componentname")
   ]
 };
 
+// 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);
@@ -47523,6 +47639,7 @@ var transform_register_default = () => {
   registerTransformer("wm-dialog", dialog_transformer_default);
   registerTransformer("wm-dialogactions", dialog_actions_transformer_default);
   registerTransformer("wm-dialogbody", dialog_body_transformer_default);
+  registerTransformer("wm-dialogcontent", dialog_body_transformer_default);
   registerTransformer("wm-logindialog", login_dialog_transformer_default);
   registerTransformer("wm-list", list_transformer_default);
   registerTransformer("wm-listtemplate", list_template_transformer_default);