@descope/web-components-ui 1.0.362 → 1.0.364

package/dist/index.esm.js

@@ -3071,18 +3071,9 @@ class PasscodeInternal extends BaseInputClass$7 {
   }
 
   initInputs() {
-    let currentInput;
-
     this.inputs.forEach((input) => {
       input.shadowRoot.appendChild(createInputMaskStyle());
 
-      input.addEventListener('change', (e) => {
-        if (currentInput !== e.target) {
-          this.parseInputValue(input, input.value);
-          this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
-        }
-      });
-
       const handleParseInput = (val) => {
         this.parseInputValue(input, val);
         toggleMaskVisibility(input);
@@ -3098,16 +3089,7 @@ class PasscodeInternal extends BaseInputClass$7 {
           toggleMaskVisibility(input, input.value[0]);
         }
 
-        // when using iPhone's code autofill we get only `change` events.
-        // In other scenarios we get `input` AND `change` events.
-        // In order to be parse the digits properly in iPhone, we need to listen to `change` event
-        // and validate it was not preceeded by an `input` event.
-        // To do so, we're keeping a reference to the input element in `input` events,
-        // and only if there the reference is null, then we're assuming no `input` event was preceeding,
-        // and we're parsing the digits.
-        currentInput = e.target;
         setTimeout(() => {
-          currentInput = null;
           if (e?.inputType === 'deleteContentBackward') {
             focusElement(this.getPrevInput(input));
           }
@@ -8783,33 +8765,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'));
   }
@@ -9166,7 +9159,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;
       }
@@ -9175,7 +9168,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;