@descope/flow-components 3.1.4 → 3.1.6

package/dist/fm/mf-manifest.json

@@ -5,7 +5,7 @@
     "name": "flowComponents",
     "type": "app",
     "buildInfo": {
-      "buildVersion": "3.1.4",
+      "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.4",
+      "buildVersion": "3.1.6",
       "buildName": "@descope/flow-components"
     },
     "remoteEntry": {

package/dist/index.cjs.js

@@ -88530,10 +88530,14 @@ function requireIndex_cjs () {
 	  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) =>
@@ -88593,6 +88597,7 @@ function requireIndex_cjs () {
 	  #countriesMap = new Map();
 	  #cachedCountries = null;
 	  #cachedSubdivisions = null;
+	  #cachedCities = null;
 	  #labels = null;
 
 	  // Value requested programmatically before data has loaded.
@@ -88639,8 +88644,8 @@ function requireIndex_cjs () {
 	    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
 	    }
@@ -88823,8 +88828,11 @@ function requireIndex_cjs () {
 
 	  #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,
@@ -88969,7 +88977,11 @@ function requireIndex_cjs () {
 	    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]);
 	      }
 	    }
@@ -89080,7 +89092,6 @@ function requireIndex_cjs () {
 	      if (!this.#pendingValue && this.#defaultCountry)
 	        this.#onCountrySelected(this.#defaultCountry);
 	    } catch (e) {
-	       
 	      console.error(`[${componentName$V}] Failed to load countries`, e);
 	    } finally {
 	      this.#countryComboBox.removeAttribute('loading');
@@ -89105,7 +89116,6 @@ function requireIndex_cjs () {
 	        this.#loadCities(countryIso2);
 	      }
 	    } catch (e) {
-	       
 	      console.error(
 	        `[${componentName$V}] Failed to load subdivisions for ${countryIso2}`,
 	        e,
@@ -89127,10 +89137,13 @@ function requireIndex_cjs () {
 	      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$V}] Failed to load cities for ${countryIso2}${stateCode ? `/${stateCode}` : ''}`,
 	        e,
@@ -89155,6 +89168,14 @@ function requireIndex_cjs () {
 	      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) {
@@ -89268,6 +89289,7 @@ function requireIndex_cjs () {
 	  #resetCity() {
 	    this.#cityComboBox.value = '';
 	    this.#cityComboBox.data = [];
+	    this.#cachedCities = null;
 	    this.#cityVisible = false;
 	    this.#refreshState();
 	  }
@@ -97260,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>`;
@@ -97288,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>
   `;
@@ -97325,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
@@ -97635,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;
@@ -97642,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 {
@@ -99574,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(
@@ -99594,6 +99656,10 @@ descope-enriched-text {
         display: inline-block;
         width: 100%;
       }
+      .wrapper {
+        position: relative;
+        width: 100%;
+      }
       code {
         display: block;
         width: 100%;
@@ -99604,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
 	    );
@@ -99615,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) {
@@ -99634,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;
@@ -99653,6 +99803,8 @@ descope-enriched-text {
 	  }
 	};
 
+	const copyBtn = { selector: () => '.copy-btn' };
+
 	const {
 	  root,
 	  docTag,
@@ -99804,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,
@@ -99841,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.4",
+  "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.4"
+    "@descope/web-components-ui": "3.1.6"
   },
   "peerDependencies": {
     "react": ">= 18"