@descope/web-components-ui 3.16.3 → 3.17.0

package/src/components/descope-user-attribute/UserAttributeClass.js

@@ -9,6 +9,8 @@ import { compose } from '../../helpers';
 import { getComponentName } from '../../helpers/componentHelpers';
 import deleteIcon from './delete.svg';
 import editIcon from './edit.svg';
+import copyIcon from './copy.svg';
+import checkIcon from './check.svg';
 
 export const componentName = getComponentName('user-attribute');
 class RawUserAttribute extends createBaseClass({
@@ -25,6 +27,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>
@@ -71,12 +77,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;
@@ -119,7 +142,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;
         }
@@ -127,6 +150,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');
@@ -216,6 +240,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();
@@ -224,7 +256,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 }))
@@ -234,9 +268,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);
@@ -246,9 +306,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() {
@@ -261,7 +331,9 @@ class RawUserAttribute extends createBaseClass({
       'badge-tooltip-text',
       'edit-button-label',
       'delete-button-label',
+      'copy-button-label',
       'hide-delete',
+      'show-copy',
     ].concat(super.observedAttributes);
   }
 
@@ -293,11 +365,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();
+    }
   }
 }
 
@@ -326,7 +406,12 @@ export const UserAttributeClass = compose(
       contentMinWidth: { ...contentWrapper, property: 'min-width' },
       badgeMaxWidth: { ...badge, 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,

package/src/components/descope-user-attribute/check.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" fill="currentcolor"/>
+</svg>

package/src/components/descope-user-attribute/copy.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" fill="currentcolor"/>
+</svg>

package/stories/descope-user-attribute.stories.js

@@ -29,6 +29,8 @@ const Template = ({
   'edit-button-label': editButtonLabel,
   'delete-button-label': deleteButtonLabel,
   'hide-delete': hideDelete,
+  showCopy,
+  copyButtonLabel,
   customIcons,
 }) => `
   <descope-user-attribute
@@ -42,6 +44,8 @@ const Template = ({
     edit-button-label="${editButtonLabel || ''}"
     delete-button-label="${deleteButtonLabel || ''}"
     hide-delete="${hideDelete || 'false'}"
+    show-copy="${showCopy || 'false'}"
+    copy-button-label="${copyButtonLabel || ''}"
     st-host-direction="${direction ?? ''}"
     readonly="${readonly || false}"
   >
@@ -83,6 +87,14 @@ export default {
       name: 'Hide Delete',
       control: { type: 'boolean' },
     },
+    showCopy: {
+      name: 'Show Copy',
+      control: { type: 'boolean' },
+    },
+    copyButtonLabel: {
+      name: 'Copy Button Label',
+      control: { type: 'text' },
+    },
     customIcons: {
       name: 'Custom Icons',
       control: { type: 'boolean' },