@descope/flow-components 3.6.0 → 3.7.0

package/dist/fm/mf-manifest.json

@@ -5,7 +5,7 @@
     "name": "flowComponents",
     "type": "app",
     "buildInfo": {
-      "buildVersion": "3.6.0",
+      "buildVersion": "3.7.0",
       "buildName": "@descope/flow-components"
     },
     "remoteEntry": {

package/dist/fm/mf-stats.json

@@ -5,7 +5,7 @@
     "name": "flowComponents",
     "type": "app",
     "buildInfo": {
-      "buildVersion": "3.6.0",
+      "buildVersion": "3.7.0",
       "buildName": "@descope/flow-components"
     },
     "remoteEntry": {

package/dist/index.cjs.js

@@ -99478,12 +99478,12 @@ descope-enriched-text {
           <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>
@@ -99502,7 +99502,7 @@ descope-enriched-text {
           height: 100%;
           align-items: center;
         }
-        
+
         ::slotted(*) {
           display: flex;
           align-items: center;
@@ -99520,6 +99520,14 @@ descope-enriched-text {
           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 {
@@ -99556,6 +99564,7 @@ descope-enriched-text {
 
         .hidden {
           visibility: hidden;
+          width: 0;
         }
 
         descope-text[data-id="label-text"].required:after {
@@ -99565,6 +99574,7 @@ descope-enriched-text {
 
         :host([readonly="true"]) descope-button {
           visibility: hidden;
+          width: 0;
         }
           `,
 	      this
@@ -99604,6 +99614,21 @@ descope-enriched-text {
 	    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);
 	  }
@@ -99632,12 +99657,26 @@ descope-enriched-text {
 	    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', () =>
@@ -99673,11 +99712,17 @@ descope-enriched-text {
 	      '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) {
@@ -99697,9 +99742,13 @@ descope-enriched-text {
 	      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();
 	    }
 	  }
@@ -99730,6 +99779,7 @@ descope-enriched-text {
 	      contentMinWidth: { ...contentWrapper, property: 'min-width' },
 	      badgeMaxWidth: { ...badge$1, property: 'max-width' },
 	      itemsGap: [{ property: 'gap' }, { ...contentWrapper, property: 'gap' }],
+	      iconColor: [{ selector: () => '::slotted(*)', property: IconClass.cssVarList.fill }],
 	    },
 	  }),
 	  draggableMixin,
@@ -99748,6 +99798,7 @@ descope-enriched-text {
 	  [vars$g.hostMinWidth]: '310px',
 	  [vars$g.hostWidth]: '530px',
 	  [vars$g.hostMaxWidth]: '100%',
+	  [vars$g.iconColor]: 'currentcolor',
 
 	  _fullWidth: {
 	    [vars$g.hostWidth]: '100%',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope/flow-components",
-  "version": "3.6.0",
+  "version": "3.7.0",
   "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.6.0"
+    "@descope/web-components-ui": "3.7.0"
   },
   "peerDependencies": {
     "react": ">= 18"