@descope/web-components-ui 1.111.0 → 1.113.0

package/dist/index.esm.js

@@ -1385,7 +1385,7 @@ const createProxy$1 = ({
   return ProxyClass;
 };
 
-const observedAttributes$9 = ['required', 'pattern'];
+const observedAttributes$8 = ['required', 'pattern'];
 
 const errorAttributes$1 = {
   valueMissing: 'data-errormessage-value-missing',
@@ -1404,7 +1404,7 @@ const inputValidationMixin$1 = (superclass) =>
     #validationTarget = validationTargetSymbol$1;
 
     static get observedAttributes() {
-      return [...(superclass.observedAttributes || []), ...observedAttributes$9];
+      return [...(superclass.observedAttributes || []), ...observedAttributes$8];
     }
 
     static get formAssociated() {
@@ -1582,7 +1582,7 @@ const inputValidationMixin$1 = (superclass) =>
     attributeChangedCallback(attrName, oldValue, newValue) {
       super.attributeChangedCallback?.(attrName, oldValue, newValue);
 
-      if (observedAttributes$9.includes(attrName)) {
+      if (observedAttributes$8.includes(attrName)) {
         this.#setValidity();
       }
     }
@@ -3661,7 +3661,7 @@ const inputEventsDispatchingMixin = (superclass) =>
     }
   };
 
-const observedAttributes$8 = ['required', 'pattern'];
+const observedAttributes$7 = ['required', 'pattern'];
 
 const errorAttributes = {
   valueMissing: 'data-errormessage-value-missing',
@@ -3680,7 +3680,7 @@ const inputValidationMixin = (superclass) =>
     #validationTarget = validationTargetSymbol;
 
     static get observedAttributes() {
-      return [...(superclass.observedAttributes || []), ...observedAttributes$8];
+      return [...(superclass.observedAttributes || []), ...observedAttributes$7];
     }
 
     static get formAssociated() {
@@ -3883,7 +3883,7 @@ const inputValidationMixin = (superclass) =>
     attributeChangedCallback(attrName, oldValue, newValue) {
       super.attributeChangedCallback?.(attrName, oldValue, newValue);
 
-      if (observedAttributes$8.includes(attrName)) {
+      if (observedAttributes$7.includes(attrName)) {
         this.#setValidity();
       }
     }
@@ -5558,7 +5558,7 @@ const ButtonClass = compose(
         padding: 0;
 			}
 		`,
-    excludeAttrsSync: ['tabindex'],
+    excludeAttrsSync: ['tabindex', 'class'],
     componentName: componentName$19,
   })
 );
@@ -8271,7 +8271,7 @@ const toggleMaskVisibility = (input, value) => {
 
 const componentName$_ = getComponentName$1('passcode-internal');
 
-const observedAttributes$7 = ['digits', 'loading'];
+const observedAttributes$6 = ['digits', 'loading'];
 
 const forwardAttributes = [
   'disabled',
@@ -8286,7 +8286,7 @@ const BaseInputClass$a = createBaseInputClass$1({ componentName: componentName$_
 
 class PasscodeInternal extends BaseInputClass$a {
   static get observedAttributes() {
-    return observedAttributes$7.concat(BaseInputClass$a.observedAttributes || []);
+    return observedAttributes$6.concat(BaseInputClass$a.observedAttributes || []);
   }
 
   constructor() {
@@ -8480,7 +8480,7 @@ class PasscodeInternal extends BaseInputClass$a {
 
     // sync attributes to inputs
     if (oldValue !== newValue) {
-      if (observedAttributes$7.includes(attrName)) {
+      if (observedAttributes$6.includes(attrName)) {
         if (attrName === 'digits') {
           this.renderInputs();
         }
@@ -8498,12 +8498,12 @@ class PasscodeInternal extends BaseInputClass$a {
 
 const componentName$Z = getComponentName$1('passcode');
 
-const observedAttributes$6 = ['digits'];
+const observedAttributes$5 = ['digits'];
 
 const customMixin$c = (superclass) =>
   class PasscodeMixinClass extends superclass {
     static get observedAttributes() {
-      return observedAttributes$6.concat(superclass.observedAttributes || []);
+      return observedAttributes$5.concat(superclass.observedAttributes || []);
     }
 
     get digits() {
@@ -11083,7 +11083,7 @@ const matchingParenthesis = (val) => {
 
 const componentName$U = getComponentName$1('phone-field-internal-input-box');
 
-const observedAttributes$5 = [
+const observedAttributes$4 = [
   'disabled',
   'size',
   'readonly',
@@ -11101,7 +11101,7 @@ const BaseInputClass$8 = createBaseInputClass$1({ componentName: componentName$U
 
 class PhoneFieldInternal extends BaseInputClass$8 {
   static get observedAttributes() {
-    return [].concat(BaseInputClass$8.observedAttributes || [], observedAttributes$5);
+    return [].concat(BaseInputClass$8.observedAttributes || [], observedAttributes$4);
   }
 
   #ayt;
@@ -11221,7 +11221,7 @@ class PhoneFieldInternal extends BaseInputClass$8 {
   attributeChangedCallback(attrName, oldValue, newValue) {
     super.attributeChangedCallback(attrName, oldValue, newValue);
 
-    if (oldValue !== newValue && observedAttributes$5.includes(attrName)) {
+    if (oldValue !== newValue && observedAttributes$4.includes(attrName)) {
       const attr = mapAttrs[attrName] || attrName;
       this.textField.setAttribute(attr, newValue);
     }
@@ -12373,7 +12373,7 @@ customElements.define(componentName$Q, NewPasswordClass);
 
 const componentName$P = getComponentName$1('recaptcha');
 
-const observedAttributes$4 = ['enabled', 'site-key', 'action', 'enterprise'];
+const observedAttributes$3 = ['enabled', 'site-key', 'action', 'enterprise'];
 
 const BaseClass$4 = createBaseClass$1({
   componentName: componentName$P,
@@ -12381,7 +12381,7 @@ const BaseClass$4 = createBaseClass$1({
 });
 class RawRecaptcha extends BaseClass$4 {
   static get observedAttributes() {
-    return observedAttributes$4.concat(BaseClass$4.observedAttributes || []);
+    return observedAttributes$3.concat(BaseClass$4.observedAttributes || []);
   }
 
   attributeChangedCallback(attrName, oldValue, newValue) {
@@ -12617,7 +12617,7 @@ const getFilename = (fileObj) => {
 
 const componentName$O = getComponentName$1('upload-file');
 
-const observedAttributes$3 = [
+const observedAttributes$2 = [
   'title',
   'description',
   'button-label',
@@ -12634,7 +12634,7 @@ const BaseInputClass$6 = createBaseInputClass$1({ componentName: componentName$O
 
 class RawUploadFile extends BaseInputClass$6 {
   static get observedAttributes() {
-    return observedAttributes$3.concat(BaseInputClass$6.observedAttributes || []);
+    return observedAttributes$2.concat(BaseInputClass$6.observedAttributes || []);
   }
 
   constructor() {
@@ -16308,10 +16308,13 @@ class RawUserAuthMethod extends createBaseClass$1({
         </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>
@@ -16360,7 +16363,7 @@ class RawUserAuthMethod extends createBaseClass$1({
           display: inline-flex;
         }
 
-        .fulfilled-indicator {
+        .status-indicator {
           width: 1em;
           height: 1em;
           display: flex;
@@ -16375,6 +16378,8 @@ class RawUserAuthMethod extends createBaseClass$1({
         .hidden-btn {
           width: 0;
           overflow: hidden;
+          opacity: 0;
+          pointer-events: none;
         }
 
         slot[name="method-icon"]{
@@ -16385,8 +16390,9 @@ class RawUserAuthMethod extends createBaseClass$1({
       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"]');
   }
 
@@ -16395,49 +16401,91 @@ class RawUserAuthMethod extends createBaseClass$1({
     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) {
@@ -16451,7 +16499,13 @@ class RawUserAuthMethod extends createBaseClass$1({
     } 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();
     }
   }
 }
@@ -18795,12 +18849,12 @@ customElements.define(componentName$f, AlertClass);
 
 const componentName$e = getComponentName$1('hcaptcha');
 
-const observedAttributes$2 = ['enabled', 'site-key'];
+const observedAttributes$1 = ['enabled', 'site-key'];
 
 const BaseInputClass$2 = createBaseInputClass$1({ componentName: componentName$e, baseSelector: ':host > div' });
 class RawHcaptcha extends BaseInputClass$2 {
   static get observedAttributes() {
-    return observedAttributes$2.concat(BaseInputClass$2.observedAttributes || []);
+    return observedAttributes$1.concat(BaseInputClass$2.observedAttributes || []);
   }
 
   attributeChangedCallback(attrName, oldValue, newValue) {
@@ -23363,7 +23417,7 @@ const formatTime = (ms = 0) => {
 
 const componentName$5 = getComponentName('timer');
 
-const observedAttributes$1 = ['seconds', 'hide-icon', 'paused'];
+const observedAttributes = ['seconds', 'hide-icon', 'paused'];
 
 const BaseClass$2 = createBaseClass({
   componentName: componentName$5,
@@ -23378,7 +23432,7 @@ class RawTimer extends BaseClass$2 {
   #intervalId;
 
   static get observedAttributes() {
-    return observedAttributes$1.concat(BaseClass$2.observedAttributes || []);
+    return observedAttributes.concat(BaseClass$2.observedAttributes || []);
   }
 
   constructor() {
@@ -24484,8 +24538,6 @@ var recoveryCodes$1 = /*#__PURE__*/Object.freeze({
 
 const componentName = getComponentName('outbound-apps');
 
-const observedAttributes = ['connect-button-label', 'disconnect-button-label', 'data'];
-
 const itemRenderer = (
   { name, description, logo, appId, isConnected },
   _,
@@ -24500,22 +24552,21 @@ const itemRenderer = (
       size=${ref.size}
       class="app-logo"
     ></descope-avatar>
-    <div class="content">
-      <div class="app-title">
+
+      <div class="content">
         <descope-text
+          class="app-title"
           variant="subtitle1"
           mode="primary"
         >${name}</descope-text>
-      </div>
       ${
         description
           ? `
-        <div class="app-description">
           <descope-text
+            class="app-description"
             variant="body2"
             mode="primary"
           >${description}</descope-text>
-        </div>
       `
           : ''
       }
@@ -24535,15 +24586,13 @@ const BaseClass = createBaseClass({
 });
 
 class RawOutboundAppsClass extends BaseClass {
-  static get observedAttributes() {
-    return observedAttributes;
-  }
-
   constructor() {
     super();
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
-      <descope-list></descope-list>
+      <descope-list>
+        <slot name="empty-state" slot="empty-state"></slot>
+      </descope-list>
     `;
 
     this.appsList = this.shadowRoot.querySelector('descope-list');
@@ -24560,6 +24609,13 @@ class RawOutboundAppsClass extends BaseClass {
       }
       .content {
         flex-grow: 1;
+        display: flex;
+        flex-direction: column;
+      }
+      .app-title,
+      .app-description {
+        display: flex;
+        direction: inherit;
       }
       descope-list {
         display: block;
@@ -24577,11 +24633,17 @@ class RawOutboundAppsClass extends BaseClass {
     this.appsList.addEventListener('click', this.onAppsListClick.bind(this));
   }
 
+  get readonly() {
+    return this.getAttribute('readonly') === 'true';
+  }
+
   onAppsListClick(e) {
-    const id = e.srcElement.getAttribute('data-outbound-app-id');
-    const action = e.srcElement.getAttribute('data-action');
-    if (id && action) {
-      this.dispatchEvent(new CustomEvent(`${action}-clicked`, { bubbles: true, detail: { id, action } }));
+    if (!this.readonly) {
+      const id = e.srcElement.getAttribute('data-outbound-app-id');
+      const action = e.srcElement.getAttribute('data-action');
+      if (id && action) {
+        this.dispatchEvent(new CustomEvent(`${action}-clicked`, { bubbles: true, detail: { id, action } }));
+      }
     }
   }
 
@@ -24632,6 +24694,10 @@ const OutboundAppsClass = compose(
         selector: () => ' .app-logo',
         property: 'margin-inline-end'
       },
+      contentGap: {
+        selector: () => ' .content',
+        property: 'gap'
+      },
       itemsTextAlign: {
         selector: TextClass.componentName,
         property: TextClass.cssVarList.textAlign,
@@ -24689,6 +24755,7 @@ const outboundApps = {
 
   [vars$1.appLogoBackgroundColor]: 'none',
   [vars$1.appLogoGap]: globals.spacing.md,
+  [vars$1.contentGap]: globals.spacing.xs,
 
   // list-item overrides
   [vars$1.itemCursor]: 'default',