@descope/web-components-ui 1.111.0 → 1.113.0

package/src/components/descope-user-auth-method/UserAuthMethodClass.js

@@ -25,10 +25,13 @@ class RawUserAuthMethod extends createBaseClass({
         </div>
 
         <div class="btn-wrapper">
-          <descope-button size="sm" variant="link" mode="primary">
+          <descope-button class="btn unfulfilled hidden" size="sm" variant="link" mode="primary">
             <slot name="button-icon"></slot>
           </descope-button>
-          <div class="fulfilled-indicator">
+          <descope-button class="btn fulfilled hidden" size="sm" variant="link" mode="primary">
+            <slot name="fulfilled-button-icon"></slot>
+          </descope-button>
+          <div class="status-indicator hidden">
             <vaadin-icon src=${greenVIcon}></vaadin-icon>
           </div>
           <descope-button class="hidden-btn" size="sm" variant="link" mode="primary"></descope-button>
@@ -77,7 +80,7 @@ class RawUserAuthMethod extends createBaseClass({
           display: inline-flex;
         }
 
-        .fulfilled-indicator {
+        .status-indicator {
           width: 1em;
           height: 1em;
           display: flex;
@@ -92,6 +95,8 @@ class RawUserAuthMethod extends createBaseClass({
         .hidden-btn {
           width: 0;
           overflow: hidden;
+          opacity: 0;
+          pointer-events: none;
         }
 
         slot[name="method-icon"]{
@@ -102,8 +107,9 @@ class RawUserAuthMethod extends createBaseClass({
       this
     );
 
-    this.button = this.shadowRoot.querySelector('descope-button');
-    this.fulfilledIndicator = this.shadowRoot.querySelector('.fulfilled-indicator');
+    this.unfulfilledButton = this.shadowRoot.querySelector('.btn.unfulfilled');
+    this.fulfilledButton = this.shadowRoot.querySelector('.btn.fulfilled');
+    this.statusIndicator = this.shadowRoot.querySelector('.status-indicator');
     this.labelText = this.shadowRoot.querySelector('descope-text[data-id="label-text"]');
   }
 
@@ -112,49 +118,91 @@ class RawUserAuthMethod extends createBaseClass({
     this.labelText.setAttribute('title', this.label);
   }
 
-  onButtonLabelChange() {
-    let textSpanEle = this.button.querySelector('span');
+  updateButtonLabel(btnRef, label) {
+    let textSpanEle = btnRef.querySelector('span');
 
-    if (this.buttonLabel) {
+    if (label) {
       if (!textSpanEle) {
         textSpanEle = document.createElement('span');
-        this.button.appendChild(textSpanEle);
+        btnRef.appendChild(textSpanEle);
       }
-      textSpanEle.innerText = this.buttonLabel;
+      textSpanEle.innerText = label;
     } else if (textSpanEle) {
-      this.button.removeChild(textSpanEle);
+      btnRef.removeChild(textSpanEle);
     }
   }
 
   onFulfilledChange() {
-    this.button.classList.toggle('hidden', this.isFulfilled);
-    this.fulfilledIndicator.classList.toggle('hidden', !this.isFulfilled);
+    if (this.isFulfilled) {
+      this.unfulfilledButton.classList.add('hidden');
+      this.handleFulfilled();
+    } else {
+      this.fulfilledButton.classList.add('hidden');
+      this.handleUnfulfilled();
+    }
+  }
+
+  handleFulfilled() {
+    this.fulfilledButton.classList.toggle('hidden', !this.isFulfilledEditable);
+    this.statusIndicator.classList.toggle('hidden', this.isFulfilledEditable);
+  }
+
+  handleUnfulfilled() {
+    this.unfulfilledButton.classList.toggle('hidden', !this.isUnfulfilledEditable);
+    this.statusIndicator.classList.toggle('hidden', this.isUnfulfilledEditable);
   }
 
   get label() {
     return this.getAttribute('label') || '';
   }
 
-  get buttonLabel() {
+  get unfulfilledButtonLabel() {
     return this.getAttribute('button-label') || '';
   }
 
+  get fulfilledButtonLabel() {
+    return this.getAttribute('fulfilled-button-label') || '';
+  }
+
   get isFulfilled() {
     return this.getAttribute('fulfilled') === 'true';
   }
 
+  get isFulfilledEditable() {
+    return this.getAttribute('fulfilled-editable') === 'true';
+  }
+
+  get isUnfulfilledEditable() {
+    // this is to keep backward compatibility with previous versions
+    return this.getAttribute('unfulfilled-editable') !== 'false';
+  }
+
   init() {
     this.onLabelChange();
-    this.onButtonLabelChange();
+    this.updateButtonLabel(this.fulfilledButton, this.fulfilledButtonLabel);
+    this.updateButtonLabel(this.unfulfilledButton, this.unfulfilledButtonLabel);
     this.onFulfilledChange();
 
-    this.button.addEventListener('click', () =>
+    this.unfulfilledButton.addEventListener('click', () =>
       this.dispatchEvent(new CustomEvent('button-clicked', { bubbles: true, composed: true }))
     );
+
+    this.fulfilledButton.addEventListener('click', () => {
+      this.dispatchEvent(
+        new CustomEvent('fulfilled-button-clicked', { bubbles: true, composed: true })
+      );
+    });
   }
 
   static get observedAttributes() {
-    return ['label', 'fulfilled'].concat(super.observedAttributes);
+    return [
+      'label',
+      'fulfilled',
+      'button-label',
+      'fulfilled-button-label',
+      'fulfilled-editable',
+      'unfulfilled-editable',
+    ].concat(super.observedAttributes);
   }
 
   attributeChangedCallback(name, oldValue, newValue) {
@@ -168,7 +216,13 @@ class RawUserAuthMethod extends createBaseClass({
     } else if (name === 'fulfilled') {
       this.onFulfilledChange();
     } else if (name === 'button-label') {
-      this.onButtonLabelChange();
+      this.updateButtonLabel(this.unfulfilledButton, this.unfulfilledButtonLabel);
+    } else if (name === 'fulfilled-button-label') {
+      this.updateButtonLabel(this.fulfilledButton, this.fulfilledButtonLabel);
+    } else if (name === 'fulfilled-editable' && this.isFulfilled) {
+      this.handleFulfilled();
+    } else if (name === 'unfulfilled-editable' && !this.isFulfilled) {
+      this.handleUnfulfilled();
     }
   }
 }