@descope/web-components-ui 1.112.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();
       }
     }
@@ -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() {
@@ -18849,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) {
@@ -23417,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,
@@ -23432,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() {
@@ -24538,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 },
   _,
@@ -24554,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>
       `
           : ''
       }
@@ -24589,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');
@@ -24614,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;
@@ -24631,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 } }));
+      }
     }
   }
 
@@ -24686,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,
@@ -24743,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',