@descope/web-components-ui 3.5.1 → 3.7.0

package/dist/index.esm.js

@@ -17094,12 +17094,12 @@ 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="xs" data-id="edit-btn" square="true" variant="link" mode="primary">
-              <slot name="edit-icon"></slot>
-            </descope-button>
-            <descope-button size="xs" data-id="delete-btn" square="true" variant="link" mode="primary">
+            <descope-button size="sm" data-id="delete-btn" variant="link" mode="primary">
               <slot name="delete-icon"></slot>
             </descope-button>
+            <descope-button size="sm" data-id="edit-btn" variant="link" mode="primary">
+              <slot name="edit-icon"></slot>
+            </descope-button>
           </div>
         </div>
       </div>
@@ -17118,7 +17118,7 @@ class RawUserAttribute extends createBaseClass({
           height: 100%;
           align-items: center;
         }
-        
+
         ::slotted(*) {
           display: flex;
           align-items: center;
@@ -17136,6 +17136,14 @@ class RawUserAttribute extends createBaseClass({
           justify-content: space-between;
           align-items: center;
           flex-grow: 0;
+          flex-shrink: 0;
+        }
+
+        slot[name="edit-icon"],
+        slot[name="delete-icon"] {
+          display: inline-flex;
+          flex-shrink: 0;
+          align-items: center;
         }
 
         .content-wrapper {
@@ -17172,6 +17180,7 @@ class RawUserAttribute extends createBaseClass({
 
         .hidden {
           visibility: hidden;
+          width: 0;
         }
 
         descope-text[data-id="label-text"].required:after {
@@ -17181,6 +17190,7 @@ class RawUserAttribute extends createBaseClass({
 
         :host([readonly="true"]) descope-button {
           visibility: hidden;
+          width: 0;
         }
           `,
       this
@@ -17220,6 +17230,21 @@ class RawUserAttribute extends createBaseClass({
     this.badge.setAttribute('title', this.badgeTooltipText || this.badgeLabel);
   }
 
+  updateButtonLabel(btnRef, label) {
+    let textSpanEle = btnRef.querySelector('span.btn-label');
+
+    if (label) {
+      if (!textSpanEle) {
+        textSpanEle = document.createElement('span');
+        textSpanEle.classList.add('btn-label');
+        btnRef.appendChild(textSpanEle);
+      }
+      textSpanEle.innerText = label;
+    } else {
+      textSpanEle?.remove();
+    }
+  }
+
   onIsRequiredChange() {
     this.labelText.classList.toggle('required', this.isRequired);
   }
@@ -17248,12 +17273,26 @@ class RawUserAttribute extends createBaseClass({
     return this.getAttribute('badge-tooltip-text') || '';
   }
 
+  get editButtonLabel() {
+    return this.getAttribute('edit-button-label') || '';
+  }
+
+  get deleteButtonLabel() {
+    return this.getAttribute('delete-button-label') || '';
+  }
+
+  get isDeleteHidden() {
+    return this.getAttribute('hide-delete') === 'true';
+  }
+
   init() {
     this.onLabelChange();
     this.onValueOrPlaceholderChange();
     this.onIsRequiredChange();
     this.onBadgeLabelChange();
     this.onBadgeTooltipTextChange();
+    this.updateButtonLabel(this.editButton, this.editButtonLabel);
+    this.updateButtonLabel(this.deleteButton, this.deleteButtonLabel);
     this.handleDeleteButtonVisibility();
 
     this.deleteButton.addEventListener('click', () =>
@@ -17289,11 +17328,17 @@ class RawUserAttribute extends createBaseClass({
       'required',
       'badge-label',
       'badge-tooltip-text',
+      'edit-button-label',
+      'delete-button-label',
+      'hide-delete',
     ].concat(super.observedAttributes);
   }
 
   handleDeleteButtonVisibility() {
-    this.deleteButton.classList.toggle('hidden', this.isRequired || !this.value);
+    this.deleteButton.classList.toggle(
+      'hidden',
+      this.isRequired || !this.value || this.isDeleteHidden
+    );
   }
 
   attributeChangedCallback(name, oldValue, newValue) {
@@ -17313,9 +17358,13 @@ class RawUserAttribute extends createBaseClass({
       this.onBadgeLabelChange();
     } else if (name === 'badge-tooltip-text') {
       this.onBadgeTooltipTextChange();
+    } else if (name === 'edit-button-label') {
+      this.updateButtonLabel(this.editButton, this.editButtonLabel);
+    } else if (name === 'delete-button-label') {
+      this.updateButtonLabel(this.deleteButton, this.deleteButtonLabel);
     }
 
-    if (name === 'value' || name === 'required') {
+    if (name === 'value' || name === 'required' || name === 'hide-delete') {
       this.handleDeleteButtonVisibility();
     }
   }
@@ -17346,6 +17395,7 @@ 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 }],
     },
   }),
   draggableMixin,
@@ -27459,6 +27509,7 @@ const userAttribute = {
   [vars$g.hostMinWidth]: '310px',
   [vars$g.hostWidth]: '530px',
   [vars$g.hostMaxWidth]: '100%',
+  [vars$g.iconColor]: 'currentcolor',
 
   _fullWidth: {
     [vars$g.hostWidth]: '100%',