@descope/web-components-ui 1.0.362 → 1.0.363

package/dist/cjs/index.cjs.js

@@ -9883,33 +9883,44 @@ const isValidDataType = (data) => {
 
 const isPlainObject = (value) => value?.constructor === Object;
 
+const isXml = (str) => /^\s*<[\s\S]*>/.test(str);
+
+const escapeXML = (s) => {
+  const dom = document.createElement('div');
+  dom.textContent = s;
+  return dom.innerHTML;
+};
+
 const getValueType = (value) => {
   if (isPlainObject(value)) return 'object';
   if (Array.isArray(value)) return 'array';
+  if (isXml(value)) return 'xml';
 
   return 'text';
 };
 
-const renderCodeSnippet = (value) =>
-  `<descope-code-snippet lang="json" class="row-details__value json">${JSON.stringify(
-    value,
-    null,
-    2
-  )}</descope-code-snippet>`;
+const renderCodeSnippet = (value, lang) =>
+  `<descope-code-snippet lang="${lang}" class="row-details__value code">${value}</descope-code-snippet>`;
 
 const renderText = (text) =>
   `<div class="row-details__value text" title="${text}">${text}</div>`;
+const renderJson = (value) => renderCodeSnippet(JSON.stringify(value, null, 2), 'json');
+const renderXml = (value) => renderCodeSnippet(escapeXML(value), 'xml');
 
 const defaultRowDetailsValueRenderer = (value) => {
   const valueType = getValueType(value);
 
   if (valueType === 'object') {
-    return renderCodeSnippet(value);
+    return renderJson(value);
+  }
+
+  if (valueType === 'xml') {
+    return renderXml(value);
   }
 
   if (valueType === 'array') {
     if (value.some((v) => getValueType(v) === 'object')) {
-      return renderCodeSnippet(value);
+      return renderJson(value);
     }
     return renderText(value.join(',\n'));
   }
@@ -10266,7 +10277,7 @@ const GridClass = compose(
         grid-template-columns: repeat(auto-fit, minmax(max(200px, calc(100%/4 - var(${GridClass.cssVarList.detailsPanelItemsGap}))), 1fr));
         width: 100%;
       }
-      vaadin-grid .row-details__item:has(.row-details__value.json) {
+      vaadin-grid .row-details__item:has(.row-details__value.code) {
         grid-column: 1 / -1;
         order: 2;
       }
@@ -10275,7 +10286,7 @@ const GridClass = compose(
         text-overflow: ellipsis;
         white-space: pre;
       }
-      vaadin-grid .row-details__value.json {
+      vaadin-grid .row-details__value.code {
         margin-top: 5px;
         max-height: 120px;
         overflow: scroll;