@descope/web-components-ui 3.1.5 → 3.1.6

package/dist/index.esm.js

@@ -14305,6 +14305,10 @@ const componentName$J = getComponentName('grid-item-details-column');
 
 customElements.define(componentName$J, GridItemDetailsColumnClass);
 
+customElements.define(componentName$1e, ImageClass);
+
+customElements.define(componentName$1d, IconClass);
+
 const decode = (input) => {
   const txt = document.createElement('textarea');
   txt.innerHTML = input;
@@ -14313,18 +14317,24 @@ const decode = (input) => {
 
 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$I = getComponentName('code-snippet');
 
-let CodeSnippet$1 = class CodeSnippet extends createBaseClass({ componentName: componentName$I, baseSelector: ':host > code' }) {
+let CodeSnippet$1 = class CodeSnippet extends createBaseClass({ componentName: componentName$I, 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(
@@ -14333,6 +14343,10 @@ let CodeSnippet$1 = class CodeSnippet extends createBaseClass({ componentName: c
         display: inline-block;
         width: 100%;
       }
+      .wrapper {
+        position: relative;
+        width: 100%;
+      }
       code {
         display: block;
         width: 100%;
@@ -14343,6 +14357,38 @@ let CodeSnippet$1 = class CodeSnippet extends createBaseClass({ componentName: c
       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
     );
@@ -14354,11 +14400,15 @@ let CodeSnippet$1 = class CodeSnippet extends createBaseClass({ componentName: c
     this.lang = this.getAttribute('lang');
     this.isInline = this.getAttribute('inline') === 'true';
 
+    if (this.getAttribute('copy-button') === 'true') {
+      this.#initCopyButton();
+    }
+
     observeChildren(this, this.#renderSnippet.bind(this));
   }
 
   get contentNode() {
-    return this.shadowRoot.querySelector(this.baseSelector);
+    return this.shadowRoot.querySelector('code');
   }
 
   attributeChangedCallback(attrName, oldValue, newValue) {
@@ -14373,10 +14423,58 @@ let CodeSnippet$1 = class CodeSnippet extends createBaseClass({ componentName: c
         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;
@@ -14392,6 +14490,8 @@ let CodeSnippet$1 = class CodeSnippet extends createBaseClass({ componentName: c
   }
 };
 
+const copyBtn = { selector: () => '.copy-btn' };
+
 const {
   root,
   docTag,
@@ -14543,6 +14643,16 @@ const CodeSnippetClass = compose(
       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,
@@ -14580,7 +14690,7 @@ const getValueType = (value) => {
 };
 
 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>`;
@@ -14608,16 +14718,31 @@ const defaultRowDetailsValueRenderer = (value) => {
   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>
   `;
@@ -14645,6 +14770,18 @@ const GridMixin = (superclass) =>
       };
 
       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
@@ -14955,6 +15092,14 @@ const GridClass = compose(
         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;
@@ -14962,8 +15107,7 @@ const GridClass = compose(
       }
       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 {
@@ -16956,10 +17100,6 @@ const UserAttributeClass = compose(
 
 customElements.define(componentName$z, BadgeClass);
 
-customElements.define(componentName$1e, ImageClass);
-
-customElements.define(componentName$1d, IconClass);
-
 customElements.define(componentName$y, UserAttributeClass);
 
 var greenVIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTggMEMzLjYgMCAwIDMuNiAwIDhDMCAxMi40IDMuNiAxNiA4IDE2QzEyLjQgMTYgMTYgMTIuNCAxNiA4QzE2IDMuNiAxMi40IDAgOCAwWk03LjEgMTEuN0wyLjkgNy42TDQuMyA2LjJMNyA4LjlMMTIgNEwxMy40IDUuNEw3LjEgMTEuN1oiIGZpbGw9IiM0Q0FGNTAiLz4KPC9zdmc+Cg==";
@@ -26676,6 +26816,13 @@ const dark = {
 };
 
 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,