@descope/web-components-ui 1.111.0 → 1.113.0

package/dist/cjs/index.cjs.js

@@ -1848,7 +1848,7 @@ const inputEventsDispatchingMixin$1 = (superclass) =>
     }
   };
 
-const observedAttributes$7 = ['required', 'pattern'];
+const observedAttributes$6 = ['required', 'pattern'];
 
 const errorAttributes$1 = {
   valueMissing: 'data-errormessage-value-missing',
@@ -1867,7 +1867,7 @@ const inputValidationMixin$1 = (superclass) =>
     #validationTarget = validationTargetSymbol$1;
 
     static get observedAttributes() {
-      return [...(superclass.observedAttributes || []), ...observedAttributes$7];
+      return [...(superclass.observedAttributes || []), ...observedAttributes$6];
     }
 
     static get formAssociated() {
@@ -2070,7 +2070,7 @@ const inputValidationMixin$1 = (superclass) =>
     attributeChangedCallback(attrName, oldValue, newValue) {
       super.attributeChangedCallback?.(attrName, oldValue, newValue);
 
-      if (observedAttributes$7.includes(attrName)) {
+      if (observedAttributes$6.includes(attrName)) {
         this.#setValidity();
       }
     }
@@ -3089,7 +3089,7 @@ const ButtonClass = compose(
         padding: 0;
 			}
 		`,
-    excludeAttrsSync: ['tabindex'],
+    excludeAttrsSync: ['tabindex', 'class'],
     componentName: componentName$1b,
   })
 );
@@ -3790,7 +3790,7 @@ const createProxy = ({
   return ProxyClass;
 };
 
-const observedAttributes$6 = ['required', 'pattern'];
+const observedAttributes$5 = ['required', 'pattern'];
 
 const errorAttributes = {
   valueMissing: 'data-errormessage-value-missing',
@@ -3809,7 +3809,7 @@ const inputValidationMixin = (superclass) =>
     #validationTarget = validationTargetSymbol;
 
     static get observedAttributes() {
-      return [...(superclass.observedAttributes || []), ...observedAttributes$6];
+      return [...(superclass.observedAttributes || []), ...observedAttributes$5];
     }
 
     static get formAssociated() {
@@ -3987,7 +3987,7 @@ const inputValidationMixin = (superclass) =>
     attributeChangedCallback(attrName, oldValue, newValue) {
       super.attributeChangedCallback?.(attrName, oldValue, newValue);
 
-      if (observedAttributes$6.includes(attrName)) {
+      if (observedAttributes$5.includes(attrName)) {
         this.#setValidity();
       }
     }
@@ -7596,12 +7596,12 @@ const LoaderRadialClass = compose$1(
 
 const componentName$T = getComponentName$1('passcode');
 
-const observedAttributes$5 = ['digits'];
+const observedAttributes$4 = ['digits'];
 
 const customMixin$b = (superclass) =>
   class PasscodeMixinClass extends superclass {
     static get observedAttributes() {
-      return observedAttributes$5.concat(superclass.observedAttributes || []);
+      return observedAttributes$4.concat(superclass.observedAttributes || []);
     }
 
     get digits() {
@@ -11321,7 +11321,7 @@ const getFilename = (fileObj) => {
 
 const componentName$I = getComponentName$1('upload-file');
 
-const observedAttributes$4 = [
+const observedAttributes$3 = [
   'title',
   'description',
   'button-label',
@@ -11338,7 +11338,7 @@ const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$I,
 
 class RawUploadFile extends BaseInputClass$4 {
   static get observedAttributes() {
-    return observedAttributes$4.concat(BaseInputClass$4.observedAttributes || []);
+    return observedAttributes$3.concat(BaseInputClass$4.observedAttributes || []);
   }
 
   constructor() {
@@ -14679,10 +14679,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>
@@ -14731,7 +14734,7 @@ class RawUserAuthMethod extends createBaseClass({
           display: inline-flex;
         }
 
-        .fulfilled-indicator {
+        .status-indicator {
           width: 1em;
           height: 1em;
           display: flex;
@@ -14746,6 +14749,8 @@ class RawUserAuthMethod extends createBaseClass({
         .hidden-btn {
           width: 0;
           overflow: hidden;
+          opacity: 0;
+          pointer-events: none;
         }
 
         slot[name="method-icon"]{
@@ -14756,8 +14761,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"]');
   }
 
@@ -14766,49 +14772,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) {
@@ -14822,7 +14870,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();
     }
   }
 }
@@ -19806,12 +19860,12 @@ var alert$1 = /*#__PURE__*/Object.freeze({
 
 const componentName$c = getComponentName$1('hcaptcha');
 
-const observedAttributes$3 = ['enabled', 'site-key'];
+const observedAttributes$2 = ['enabled', 'site-key'];
 
 const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$c, baseSelector: ':host > div' });
 class RawHcaptcha extends BaseInputClass$1 {
   static get observedAttributes() {
-    return observedAttributes$3.concat(BaseInputClass$1.observedAttributes || []);
+    return observedAttributes$2.concat(BaseInputClass$1.observedAttributes || []);
   }
 
   attributeChangedCallback(attrName, oldValue, newValue) {
@@ -20649,7 +20703,7 @@ const formatTime = (ms = 0) => {
 
 const componentName$7 = getComponentName('timer');
 
-const observedAttributes$2 = ['seconds', 'hide-icon', 'paused'];
+const observedAttributes$1 = ['seconds', 'hide-icon', 'paused'];
 
 const BaseClass$3 = createBaseClass$1({
   componentName: componentName$7,
@@ -20664,7 +20718,7 @@ class RawTimer extends BaseClass$3 {
   #intervalId;
 
   static get observedAttributes() {
-    return observedAttributes$2.concat(BaseClass$3.observedAttributes || []);
+    return observedAttributes$1.concat(BaseClass$3.observedAttributes || []);
   }
 
   constructor() {
@@ -21770,8 +21824,6 @@ var recoveryCodes$1 = /*#__PURE__*/Object.freeze({
 
 const componentName$2 = getComponentName('outbound-apps');
 
-const observedAttributes$1 = ['connect-button-label', 'disconnect-button-label', 'data'];
-
 const itemRenderer = (
   { name, description, logo, appId, isConnected },
   _,
@@ -21786,22 +21838,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>
       `
           : ''
       }
@@ -21821,15 +21872,13 @@ const BaseClass$1 = createBaseClass$1({
 });
 
 class RawOutboundAppsClass extends BaseClass$1 {
-  static get observedAttributes() {
-    return observedAttributes$1;
-  }
-
   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');
@@ -21846,6 +21895,13 @@ class RawOutboundAppsClass extends BaseClass$1 {
       }
       .content {
         flex-grow: 1;
+        display: flex;
+        flex-direction: column;
+      }
+      .app-title,
+      .app-description {
+        display: flex;
+        direction: inherit;
       }
       descope-list {
         display: block;
@@ -21863,11 +21919,17 @@ class RawOutboundAppsClass extends BaseClass$1 {
     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 } }));
+      }
     }
   }
 
@@ -21918,6 +21980,10 @@ const OutboundAppsClass = compose(
         selector: () => ' .app-logo',
         property: 'margin-inline-end'
       },
+      contentGap: {
+        selector: () => ' .content',
+        property: 'gap'
+      },
       itemsTextAlign: {
         selector: TextClass.componentName,
         property: TextClass.cssVarList.textAlign,
@@ -21975,6 +22041,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',
@@ -22559,7 +22626,6 @@ exports.genColors = genColors;
 exports.getThemeRefs = getThemeRefs;
 exports.getThemeVars = getThemeVars;
 exports.globalsThemeToStyle = globalsThemeToStyle;
-exports.observedAttributes = observedAttributes$1;
 exports.themeToCSSVarsObj = themeToCSSVarsObj;
 exports.themeToStyle = themeToStyle;
 exports.themeVars = themeVars;