@descope/web-components-ui 1.112.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();
       }
     }
@@ -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() {
@@ -19860,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) {
@@ -20703,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,
@@ -20718,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() {
@@ -21824,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 },
   _,
@@ -21840,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>
       `
           : ''
       }
@@ -21875,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');
@@ -21900,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;
@@ -21917,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 } }));
+      }
     }
   }
 
@@ -21972,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,
@@ -22029,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',
@@ -22613,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;