@descope/flow-components 3.1.5 → 3.1.6

package/dist/fm/mf-manifest.json

@@ -5,7 +5,7 @@
     "name": "flowComponents",
     "type": "app",
     "buildInfo": {
-      "buildVersion": "3.1.5",
+      "buildVersion": "3.1.6",
       "buildName": "@descope/flow-components"
     },
     "remoteEntry": {

package/dist/fm/mf-stats.json

@@ -5,7 +5,7 @@
     "name": "flowComponents",
     "type": "app",
     "buildInfo": {
-      "buildVersion": "3.1.5",
+      "buildVersion": "3.1.6",
       "buildName": "@descope/flow-components"
     },
     "remoteEntry": {

package/dist/index.cjs.js

@@ -97282,7 +97282,7 @@ descope-enriched-text {
 	};
 
 	const renderCodeSnippet = (value, lang) =>
-	  `<descope-code-snippet lang="${lang}" class="row-details__value code">${escapeXML(value)}</descope-code-snippet>`;
+	  `<descope-code-snippet copy-button="true" lang="${lang}" class="row-details__value code">${escapeXML(value)}</descope-code-snippet>`;
 
 	const renderText = (text) =>
 	  `<div class="row-details__value text" title="${text}">${escapeXML(text)}</div>`;
@@ -97310,16 +97310,31 @@ descope-enriched-text {
 	  return renderText(value);
 	};
 
+	const isCodeSnippetValue = (value) => {
+	  const type = getValueType(value);
+	  return (
+	    type === 'object' ||
+	    type === 'xml' ||
+	    (type === 'array' && value.some((v) => getValueType(v) === 'object'))
+	  );
+	};
+
 	const defaultRowDetailsRenderer = (item, itemLabelsMapping) => `
   <div class="row-details">
   ${Object.entries(item)
-	    .map(
-	      ([key, value]) =>
-	        `<div class="row-details__item" >
-          <div class="row-details__label">${itemLabelsMapping[key] || toTitle(key)}</div>
+	    .map(([key, value]) => {
+	      const label = itemLabelsMapping[key] || toTitle(key);
+	      if (isCodeSnippetValue(value)) {
+	        return `<details class="row-details__item">
+          <summary class="row-details__label">${label}</summary>
           ${defaultRowDetailsValueRenderer(value)}
-        </div>`
-	    )
+        </details>`;
+	      }
+	      return `<div class="row-details__item">
+          <div class="row-details__label">${label}</div>
+          ${defaultRowDetailsValueRenderer(value)}
+        </div>`;
+	    })
 	    .join('\n')}
 </div>
   `;
@@ -97347,6 +97362,18 @@ descope-enriched-text {
 	      };
 
 	      this.baseElement.rowDetailsRenderer = this.#rowDetailsRenderer.bind(this);
+
+	      // Stop wheel events from propagating to vaadin-grid when scrolling
+	      // inside code snippets, so touchpad horizontal scroll works
+	      this.baseElement.addEventListener(
+	        'wheel',
+	        (e) => {
+	          if (e.target.closest('descope-code-snippet')) {
+	            e.stopPropagation();
+	          }
+	        },
+	        true
+	      );
 	    }
 
 	    // this renders the details panel content
@@ -97657,6 +97684,14 @@ descope-enriched-text {
         grid-column: 1 / -1;
         order: 2;
       }
+      vaadin-grid details.row-details__item {
+        padding: 0;
+      }
+      vaadin-grid details.row-details__item > summary.row-details__label {
+        cursor: pointer;
+        list-style: revert;
+        display: revert;
+      }
       vaadin-grid .row-details__value.text {
         overflow: hidden;
         text-overflow: ellipsis;
@@ -97664,8 +97699,7 @@ descope-enriched-text {
       }
       vaadin-grid .row-details__value.code {
         margin-top: 5px;
-        max-height: 120px;
-        overflow: scroll;
+        overflow-x: auto;
         font-size: 0.85em;
       }
       vaadin-grid vaadin-icon.toggle-details-button {
@@ -99596,18 +99630,24 @@ descope-enriched-text {
 
 	const tpl = (input, inline) => (inline ? input : `<pre>${input}</pre>`);
 
+	var copyIconSrc = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPgogIDxyZWN0IHg9IjkiIHk9IjkiIHdpZHRoPSIxMyIgaGVpZ2h0PSIxMyIgcng9IjIiIHJ5PSIyIj48L3JlY3Q+CiAgPHBhdGggZD0iTTUgMTVINGEyIDIgMCAwIDEtMi0yVjRhMiAyIDAgMCAxIDItMmg5YTIgMiAwIDAgMSAyIDJ2MSI+PC9wYXRoPgo8L3N2Zz4K";
+
+	var checkIconSrc = "data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iY2hlY2staWNvbiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8cG9seWxpbmUgcG9pbnRzPSIyMCA2IDkgMTcgNCAxMiI+PC9wb2x5bGluZT4KPC9zdmc+Cg==";
+
 	const componentName$e = getComponentName$1('code-snippet');
 
-	let CodeSnippet$1 = class CodeSnippet extends createBaseClass({ componentName: componentName$e, baseSelector: ':host > code' }) {
+	let CodeSnippet$1 = class CodeSnippet extends createBaseClass({ componentName: componentName$e, baseSelector: ':host > .wrapper' }) {
 	  static get observedAttributes() {
-	    return ['lang', 'inline'];
+	    return ['lang', 'inline', 'copy-button'];
 	  }
 
 	  constructor() {
 	    super();
 
 	    this.attachShadow({ mode: 'open' }).innerHTML = `
-    <code class="hljs"></code>
+      <div class="wrapper">
+        <code class="hljs"></code>
+      </div>
     `;
 
 	    injectStyle(
@@ -99616,6 +99656,10 @@ descope-enriched-text {
         display: inline-block;
         width: 100%;
       }
+      .wrapper {
+        position: relative;
+        width: 100%;
+      }
       code {
         display: block;
         width: 100%;
@@ -99626,6 +99670,38 @@ descope-enriched-text {
       pre {
         margin: 0;
       }
+      .copy-btn {
+        position: absolute;
+        top: 8px;
+        right: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0;
+        border-style: solid;
+        cursor: pointer;
+        opacity: 0;
+        transition: opacity 150ms ease, background 150ms ease;
+      }
+      .wrapper:hover .copy-btn,
+      .copy-btn:focus-visible {
+        opacity: 1;
+      }
+      .copy-btn descope-icon {
+        width: 16px;
+        height: 16px;
+        pointer-events: none;
+        flex-shrink: 0;
+      }
+      .copy-btn .check-icon {
+        display: none;
+      }
+      .copy-btn.copied .check-icon {
+        display: block;
+      }
+      .copy-btn.copied descope-icon:not(.check-icon) {
+        display: none;
+      }
       `,
 	      this
 	    );
@@ -99637,11 +99713,15 @@ descope-enriched-text {
 	    this.lang = this.getAttribute('lang');
 	    this.isInline = this.getAttribute('inline') === 'true';
 
+	    if (this.getAttribute('copy-button') === 'true') {
+	      this.#initCopyButton();
+	    }
+
 	    observeChildren$1(this, this.#renderSnippet.bind(this));
 	  }
 
 	  get contentNode() {
-	    return this.shadowRoot.querySelector(this.baseSelector);
+	    return this.shadowRoot.querySelector('code');
 	  }
 
 	  attributeChangedCallback(attrName, oldValue, newValue) {
@@ -99656,10 +99736,58 @@ descope-enriched-text {
 	        this.lang = newValue;
 	      }
 
+	      if (attrName === 'copy-button') {
+	        if (newValue === 'true') {
+	          this.#initCopyButton();
+	        } else {
+	          this.#destroyCopyButton();
+	        }
+	      }
+
 	      this.#renderSnippet();
 	    }
 	  }
 
+	  // ── Copy button ────────────────────────────────────────────────────────────
+
+	  #initCopyButton() {
+	    if (this.shadowRoot.querySelector('.copy-btn')) return;
+
+	    const btn = document.createElement('button');
+	    btn.className = 'copy-btn';
+	    btn.type = 'button';
+	    btn.setAttribute('aria-label', 'Copy code');
+	    const copyIcon = document.createElement('descope-icon');
+	    copyIcon.setAttribute('src', copyIconSrc);
+
+	    const checkIcon = document.createElement('descope-icon');
+	    checkIcon.setAttribute('src', checkIconSrc);
+	    checkIcon.classList.add('check-icon');
+
+	    btn.appendChild(copyIcon);
+	    btn.appendChild(checkIcon);
+	    btn.addEventListener('click', () => this.#handleCopyClick());
+
+	    this.shadowRoot.querySelector('.wrapper').appendChild(btn);
+	  }
+
+	  #destroyCopyButton() {
+	    this.shadowRoot.querySelector('.copy-btn')?.remove();
+	  }
+
+	  #handleCopyClick() {
+	    const btn = this.shadowRoot.querySelector('.copy-btn');
+	    navigator.clipboard
+	      .writeText(decode(this.textContent))
+	      .then(() => {
+	        btn.classList.add('copied');
+	        setTimeout(() => btn.classList.remove('copied'), 2000);
+	      })
+	      .catch(() => {});
+	  }
+
+	  // ── Snippet rendering ──────────────────────────────────────────────────────
+
 	  #renderSnippet() {
 	    const sanitized = decode(this.textContent);
 	    const language = this.lang;
@@ -99675,6 +99803,8 @@ descope-enriched-text {
 	  }
 	};
 
+	const copyBtn = { selector: () => '.copy-btn' };
+
 	const {
 	  root,
 	  docTag,
@@ -99826,6 +99956,16 @@ descope-enriched-text {
 	      propertyTextColor: { ...property, property: 'color' },
 	      punctuationTextColor: { ...punctuation, property: 'color' },
 	      tagTextColor: { ...tag, property: 'color' },
+	      copyButtonSize: [
+	        { ...copyBtn, property: 'width' },
+	        { ...copyBtn, property: 'height' },
+	      ],
+	      copyButtonBorderRadius: { ...copyBtn, property: 'border-radius' },
+	      copyButtonBorderWidth: { ...copyBtn, property: 'border-width' },
+	      copyButtonBorderColor: { ...copyBtn, property: 'border-color' },
+	      copyButtonBgColor: { ...copyBtn, property: 'background-color' },
+	      copyButtonHoverBgColor: { selector: () => '.copy-btn:hover', property: 'background-color' },
+	      copyButtonColor: { ...copyBtn, property: 'color' },
 	    },
 	  }),
 	  draggableMixin,
@@ -99863,6 +100003,13 @@ descope-enriched-text {
 	};
 
 	const CodeSnippet = {
+	  [vars$c.copyButtonSize]: '32px',
+	  [vars$c.copyButtonBorderRadius]: globalRefs$6.radius.xs,
+	  [vars$c.copyButtonBorderWidth]: globalRefs$6.border.xs,
+	  [vars$c.copyButtonBorderColor]: globalRefs$6.colors.surface.light,
+	  [vars$c.copyButtonBgColor]: globalRefs$6.colors.surface.highlight,
+	  [vars$c.copyButtonHoverBgColor]: globalRefs$6.colors.surface.light,
+	  [vars$c.copyButtonColor]: globalRefs$6.colors.surface.contrast,
 	  [vars$c.rootBgColor]: globalRefs$6.colors.surface.main,
 	  [vars$c.rootTextColor]: globalRefs$6.colors.surface.contrast,
 	  [vars$c.docTagTextColor]: light.color2,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope/flow-components",
-  "version": "3.1.5",
+  "version": "3.1.6",
   "description": "",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -97,7 +97,7 @@
     "webpack-subresource-integrity": "5.2.0-rc.1"
   },
   "dependencies": {
-    "@descope/web-components-ui": "3.1.5"
+    "@descope/web-components-ui": "3.1.6"
   },
   "peerDependencies": {
     "react": ">= 18"