@descope/web-components-ui 3.1.4 → 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==";
@@ -24167,10 +24307,14 @@ const subdivisionItem = ({ name, state_code, translations, lang }) => {
   return `<div data-id="${escapedStateCode}" data-name="${escapedSearchTerms}" data-label="${escapedLabel}">${escapedLabel}</div>`;
 };
 
-const cityItem = ({ name }) => {
+const cityItem = ({ name, translations, lang }) => {
+  const displayName = resolveTranslation({ name, translations }, lang);
+  const searchTerms = [displayName];
+  if (displayName !== name) searchTerms.push(name);
   const escapedId = escapeHtml(name);
-  const escapedName = escapeHtml(name);
-  return `<div data-id="${escapedId}" data-name="${escapedName}">${escapedName}</div>`;
+  const escapedSearchTerms = escapeHtml(searchTerms.join(' '));
+  const escapedLabel = escapeHtml(displayName);
+  return `<div data-id="${escapedId}" data-name="${escapedSearchTerms}" data-label="${escapedLabel}">${escapedLabel}</div>`;
 };
 
 const comboBoxHTML = (id) =>
@@ -24230,6 +24374,7 @@ class RawCountrySubdivisionCityFieldInternal extends BaseInputClass {
   #countriesMap = new Map();
   #cachedCountries = null;
   #cachedSubdivisions = null;
+  #cachedCities = null;
   #labels = null;
 
   // Value requested programmatically before data has loaded.
@@ -24276,8 +24421,8 @@ class RawCountrySubdivisionCityFieldInternal extends BaseInputClass {
     const lang = this.getAttribute('lang') || undefined;
     if (!lang) return undefined;
     try {
-      Intl.getCanonicalLocales(lang);
-      return lang;
+      const [canonical] = Intl.getCanonicalLocales(lang);
+      return canonical;
     } catch {
       return undefined; // invalid BCP47 tag — fall back to English
     }
@@ -24460,8 +24605,11 @@ class RawCountrySubdivisionCityFieldInternal extends BaseInputClass {
 
   #setupValueTransform() {
     // Display only the item name in the input, while data-name includes ISO codes for search
-    [this.#countryComboBox, this.#subdivisionComboBox].forEach((combo) => {
-       
+    [
+      this.#countryComboBox,
+      this.#subdivisionComboBox,
+      this.#cityComboBox,
+    ].forEach((combo) => {
       combo.customValueTransformFn = (val) => {
         const item = combo.baseElement?.items?.find(
           (i) => i['data-name'] === val,
@@ -24606,7 +24754,11 @@ class RawCountrySubdivisionCityFieldInternal extends BaseInputClass {
     if (cities) {
       this.#cityVisible = cities.length > 0;
       if (cities.length > 0) {
-        this.#cityComboBox.data = cities;
+        this.#cachedCities = cities;
+        this.#cityComboBox.data = cities.map((c) => ({
+          ...c,
+          lang: this.#lang,
+        }));
         if (pendingCity) toSelect.push([this.#cityComboBox, pendingCity]);
       }
     }
@@ -24717,7 +24869,6 @@ class RawCountrySubdivisionCityFieldInternal extends BaseInputClass {
       if (!this.#pendingValue && this.#defaultCountry)
         this.#onCountrySelected(this.#defaultCountry);
     } catch (e) {
-       
       console.error(`[${componentName$3}] Failed to load countries`, e);
     } finally {
       this.#countryComboBox.removeAttribute('loading');
@@ -24742,7 +24893,6 @@ class RawCountrySubdivisionCityFieldInternal extends BaseInputClass {
         this.#loadCities(countryIso2);
       }
     } catch (e) {
-       
       console.error(
         `[${componentName$3}] Failed to load subdivisions for ${countryIso2}`,
         e,
@@ -24764,10 +24914,13 @@ class RawCountrySubdivisionCityFieldInternal extends BaseInputClass {
       this.#cityVisible = cities.length > 0;
       this.#refreshState();
       if (cities.length > 0) {
-        this.#cityComboBox.data = cities;
+        this.#cachedCities = cities;
+        this.#cityComboBox.data = cities.map((c) => ({
+          ...c,
+          lang: this.#lang,
+        }));
       }
     } catch (e) {
-       
       console.error(
         `[${componentName$3}] Failed to load cities for ${countryIso2}${stateCode ? `/${stateCode}` : ''}`,
         e,
@@ -24792,6 +24945,14 @@ class RawCountrySubdivisionCityFieldInternal extends BaseInputClass {
       if (prevSubdivision)
         this.#selectItemById(this.#subdivisionComboBox, prevSubdivision);
     }
+    if (this.#cachedCities && this.#cityVisible) {
+      const prevCity = this.#cityComboBox.value;
+      this.#cityComboBox.data = this.#cachedCities.map((c) => ({
+        ...c,
+        lang: this.#lang,
+      }));
+      if (prevCity) this.#selectItemById(this.#cityComboBox, prevCity);
+    }
     // Re-apply translated subdivision type label for the new lang
     const currentIso2 = this.#countryComboBox.value;
     if (currentIso2) {
@@ -24905,6 +25066,7 @@ class RawCountrySubdivisionCityFieldInternal extends BaseInputClass {
   #resetCity() {
     this.#cityComboBox.value = '';
     this.#cityComboBox.data = [];
+    this.#cachedCities = null;
     this.#cityVisible = false;
     this.#refreshState();
   }
@@ -26654,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,