@descope/web-components-ui 3.16.4 → 3.17.0

package/dist/index.esm.js

@@ -16769,6 +16769,10 @@ var deleteIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTgi
 
 var editIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxNSAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNMTAuMDAwMiAwLjk5MjE0OUMxMC4wMDAyIDEuMDE2MTUgMTAuMDAwMiAxLjAxNjE1IDEwLjAwMDIgMS4wMTYxNUw4LjIyNDE5IDMuMDA4MTVIMi45OTIxOUMyLjQ2NDE5IDMuMDA4MTUgMi4wMDgxOSAzLjQ0MDE1IDIuMDA4MTkgMy45OTIxNVYxMi4wMDgyQzIuMDA4MTkgMTIuNTM2MiAyLjQ0MDE5IDEyLjk5MjIgMi45OTIxOSAxMi45OTIySDUuNTM2MTlDNS44NDgxOSAxMy4wNDAyIDYuMTYwMTkgMTMuMDQwMiA2LjQ3MjE5IDEyLjk5MjJIMTEuMDA4MkMxMS41MzYyIDEyLjk5MjIgMTEuOTkyMiAxMi41NjAyIDExLjk5MjIgMTIuMDA4MlY3Ljc4NDE2TDEzLjkzNjIgNS42MjQxNUwxNC4wMDgyIDUuNjcyMTVWMTEuOTg0MkMxNC4wMDgyIDEzLjY2NDIgMTIuNjY0MiAxNS4wMDgyIDExLjAwODIgMTUuMDA4MkgzLjAxNjE5QzEuMzM2MTkgMTUuMDA4MiAtMC4wMDc4MTI1IDEzLjY2NDIgLTAuMDA3ODEyNSAxMS45ODQyVjMuOTkyMTVDLTAuMDA3ODEyNSAyLjMzNjE1IDEuMzM2MTkgMC45OTIxNDkgMy4wMTYxOSAwLjk5MjE0OUgxMC4wMDAyWk0xMS4yNzIyIDIuNjI0MTVMMTIuNjE2MiA0LjExMjE1TDcuNzIwMTkgOS42ODAxNkM3LjUwNDE5IDkuOTIwMTYgNi44MzIxOSAxMC4yMzIyIDUuNjgwMTkgMTAuNjE2MkM1LjY1NjE5IDEwLjY0MDIgNS42MDgxOSAxMC42NDAyIDUuNTYwMTkgMTAuNjE2MkM1LjQ2NDE5IDEwLjU5MjIgNS4zOTIxOSAxMC40NzIyIDUuNDQwMTkgMTAuMzc2MkM1Ljc1MjE5IDkuMjQ4MTYgNi4wNDAxOSA4LjU1MjE2IDYuMjU2MTkgOC4zMTIxNkwxMS4yNzIyIDIuNjI0MTVaTTExLjkyMDIgMS44NTYxNUwxMy4yODgyIDAuMzIwMTQ5QzEzLjY0ODIgLTAuMDg3ODUxNiAxNC4yNzIyIC0wLjExMTg1MiAxNC42ODAyIDAuMjcyMTQ5QzE1LjA4ODIgMC42MzIxNDkgMTUuMTEyMiAxLjI4MDE1IDE0Ljc1MjIgMS42ODgxNUwxMy4yNjQyIDMuMzY4MTVMMTEuOTIwMiAxLjg1NjE1WiIgZmlsbD0iY3VycmVudGNvbG9yIi8+Cjwvc3ZnPgo=";
 
+var copyIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNMTYgMUg0Yy0xLjEgMC0yIC45LTIgMnYxNGgyVjNoMTJWMXptMyA0SDhjLTEuMSAwLTIgLjktMiAydjE0YzAgMS4xLjkgMiAyIDJoMTFjMS4xIDAgMi0uOSAyLTJWN2MwLTEuMS0uOS0yLTItMnptMCAxNkg4VjdoMTF2MTR6IiBmaWxsPSJjdXJyZW50Y29sb3IiLz4KPC9zdmc+Cg==";
+
+var checkIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNOSAxNi4xNyA0LjgzIDEybC0xLjQyIDEuNDFMOSAxOSAyMSA3bC0xLjQxLTEuNDF6IiBmaWxsPSJjdXJyZW50Y29sb3IiLz4KPC9zdmc+Cg==";
+
 const componentName$G = getComponentName('user-attribute');
 class RawUserAttribute extends createBaseClass({
   componentName: componentName$G,
@@ -16784,6 +16788,10 @@ class RawUserAttribute extends createBaseClass({
           <descope-text st-text-align="auto" data-id="value-text" variant="body1" mode="primary" class="value"></descope-text>
           <div class="btn-wrapper">
             <descope-badge mode="default" bordered="true" size="xs"></descope-badge>
+            <descope-button size="sm" data-id="copy-btn" variant="link" mode="primary">
+              <slot name="copy-icon"></slot>
+              <descope-icon class="check-icon" src="${checkIcon}" src-dark="${checkIcon}"></descope-icon>
+            </descope-button>
             <descope-button size="sm" data-id="delete-btn" variant="link" mode="primary">
               <slot name="delete-icon"></slot>
             </descope-button>
@@ -16830,12 +16838,29 @@ class RawUserAttribute extends createBaseClass({
         }
 
         slot[name="edit-icon"],
-        slot[name="delete-icon"] {
+        slot[name="delete-icon"],
+        slot[name="copy-icon"] {
           display: inline-flex;
           flex-shrink: 0;
           align-items: center;
         }
 
+        descope-button[data-id="copy-btn"].hidden {
+          display: none;
+        }
+
+        descope-button[data-id="copy-btn"] .check-icon {
+          display: none;
+        }
+
+        descope-button[data-id="copy-btn"].copied slot[name="copy-icon"] {
+          display: none;
+        }
+
+        descope-button[data-id="copy-btn"].copied .check-icon {
+          display: inline-flex;
+        }
+
         .content-wrapper {
           display: flex;
           flex-grow: 1;
@@ -16878,7 +16903,7 @@ class RawUserAttribute extends createBaseClass({
           color: var(${TextClass.cssVarList.textColor});
         }
 
-        :host([readonly="true"]) descope-button {
+        :host([readonly="true"]) descope-button:not([data-id="copy-btn"]) {
           visibility: hidden;
           width: 0;
         }
@@ -16886,6 +16911,7 @@ class RawUserAttribute extends createBaseClass({
       this
     );
 
+    this.copyButton = this.shadowRoot.querySelector('descope-button[data-id="copy-btn"]');
     this.deleteButton = this.shadowRoot.querySelector('descope-button[data-id="delete-btn"]');
     this.editButton = this.shadowRoot.querySelector('descope-button[data-id="edit-btn"]');
     this.badge = this.shadowRoot.querySelector('descope-badge');
@@ -16975,6 +17001,14 @@ class RawUserAttribute extends createBaseClass({
     return this.getAttribute('hide-delete') === 'true';
   }
 
+  get isCopyEnabled() {
+    return this.getAttribute('show-copy') === 'true';
+  }
+
+  get copyButtonLabel() {
+    return this.getAttribute('copy-button-label') || '';
+  }
+
   init() {
     this.onLabelChange();
     this.onValueOrPlaceholderChange();
@@ -16983,7 +17017,9 @@ class RawUserAttribute extends createBaseClass({
     this.onBadgeTooltipTextChange();
     this.updateButtonLabel(this.editButton, this.editButtonLabel);
     this.updateButtonLabel(this.deleteButton, this.deleteButtonLabel);
+    this.updateButtonLabel(this.copyButton, this.copyButtonLabel);
     this.handleDeleteButtonVisibility();
+    this.handleCopyButtonState();
 
     this.deleteButton.addEventListener('click', () =>
       this.dispatchEvent(new CustomEvent('delete-clicked', { bubbles: true, composed: true }))
@@ -16993,9 +17029,35 @@ class RawUserAttribute extends createBaseClass({
       this.dispatchEvent(new CustomEvent('edit-clicked', { bubbles: true, composed: true }))
     );
 
+    this.copyButton.addEventListener('click', () => this.#handleCopyClick());
+
     this.setDefaultChildren();
   }
 
+  #handleCopyClick() {
+    // isDraggable is true only inside the page editor (craftjs sets draggable="true"
+    // for drag-and-drop); there the copy action must not run.
+    if (!this.value || this.isDraggable || !navigator.clipboard) return;
+
+    navigator.clipboard
+      .writeText(this.value)
+      .then(() => {
+        this.copyButton.classList.add('copied');
+        setTimeout(() => this.copyButton.classList.remove('copied'), 2000);
+      })
+      .catch(() => {});
+  }
+
+  handleCopyButtonState() {
+    this.copyButton.classList.toggle('hidden', !this.isCopyEnabled);
+
+    if (this.value) {
+      this.copyButton.removeAttribute('disabled');
+    } else {
+      this.copyButton.setAttribute('disabled', 'true');
+    }
+  }
+
   #addIcon(src, slotName) {
     const icon = document.createElement('descope-icon');
     icon.setAttribute('src', src);
@@ -17005,9 +17067,19 @@ class RawUserAttribute extends createBaseClass({
   }
 
   setDefaultChildren() {
-    if (this.children.length) return;
-    this.#addIcon(deleteIcon, 'delete-icon');
-    this.#addIcon(editIcon, 'edit-icon');
+    if (!this.querySelector('[slot="delete-icon"]')) {
+      this.#addIcon(deleteIcon, 'delete-icon');
+    }
+    if (!this.querySelector('[slot="edit-icon"]')) {
+      this.#addIcon(editIcon, 'edit-icon');
+    }
+    this.setDefaultCopyIcon();
+  }
+
+  setDefaultCopyIcon() {
+    if (this.isCopyEnabled && !this.querySelector('[slot="copy-icon"]')) {
+      this.#addIcon(copyIcon, 'copy-icon');
+    }
   }
 
   static get observedAttributes() {
@@ -17020,7 +17092,9 @@ class RawUserAttribute extends createBaseClass({
       'badge-tooltip-text',
       'edit-button-label',
       'delete-button-label',
+      'copy-button-label',
       'hide-delete',
+      'show-copy',
     ].concat(super.observedAttributes);
   }
 
@@ -17052,11 +17126,19 @@ class RawUserAttribute extends createBaseClass({
       this.updateButtonLabel(this.editButton, this.editButtonLabel);
     } else if (name === 'delete-button-label') {
       this.updateButtonLabel(this.deleteButton, this.deleteButtonLabel);
+    } else if (name === 'copy-button-label') {
+      this.updateButtonLabel(this.copyButton, this.copyButtonLabel);
+    } else if (name === 'show-copy') {
+      this.setDefaultCopyIcon();
     }
 
     if (name === 'value' || name === 'required' || name === 'hide-delete') {
       this.handleDeleteButtonVisibility();
     }
+
+    if (name === 'value' || name === 'show-copy') {
+      this.handleCopyButtonState();
+    }
   }
 }
 
@@ -17085,7 +17167,12 @@ const UserAttributeClass = compose(
       contentMinWidth: { ...contentWrapper, property: 'min-width' },
       badgeMaxWidth: { ...badge$3, property: 'max-width' },
       itemsGap: [{ property: 'gap' }, { ...contentWrapper, property: 'gap' }],
-      iconColor: [{ selector: () => '::slotted(*)', property: IconClass.cssVarList.fill }],
+      iconColor: [
+        { selector: () => '::slotted(*)', property: IconClass.cssVarList.fill },
+        // the copied check-icon lives in the shadow DOM (not slotted), so it
+        // needs its own mapping to follow the same icon color
+        { selector: () => '.check-icon', property: IconClass.cssVarList.fill },
+      ],
     },
   }),
   draggableMixin,