@descope/flow-components 2.0.601 → 2.0.602

package/dist/index.cjs.js

@@ -79243,7 +79243,7 @@ function requireIndex_cjs () {
 	    }
 	  };
 
-	const observedAttributes$7 = ['required', 'pattern'];
+	const observedAttributes$6 = ['required', 'pattern'];
 
 	const errorAttributes$1 = {
 	  valueMissing: 'data-errormessage-value-missing',
@@ -79262,7 +79262,7 @@ function requireIndex_cjs () {
 	    #validationTarget = validationTargetSymbol$1;
 
 	    static get observedAttributes() {
-	      return [...(superclass.observedAttributes || []), ...observedAttributes$7];
+	      return [...(superclass.observedAttributes || []), ...observedAttributes$6];
 	    }
 
 	    static get formAssociated() {
@@ -79465,7 +79465,7 @@ function requireIndex_cjs () {
 	    attributeChangedCallback(attrName, oldValue, newValue) {
 	      super.attributeChangedCallback?.(attrName, oldValue, newValue);
 
-	      if (observedAttributes$7.includes(attrName)) {
+	      if (observedAttributes$6.includes(attrName)) {
 	        this.#setValidity();
 	      }
 	    }
@@ -81185,7 +81185,7 @@ function requireIndex_cjs () {
 	  return ProxyClass;
 	};
 
-	const observedAttributes$6 = ['required', 'pattern'];
+	const observedAttributes$5 = ['required', 'pattern'];
 
 	const errorAttributes = {
 	  valueMissing: 'data-errormessage-value-missing',
@@ -81204,7 +81204,7 @@ function requireIndex_cjs () {
 	    #validationTarget = validationTargetSymbol;
 
 	    static get observedAttributes() {
-	      return [...(superclass.observedAttributes || []), ...observedAttributes$6];
+	      return [...(superclass.observedAttributes || []), ...observedAttributes$5];
 	    }
 
 	    static get formAssociated() {
@@ -81382,7 +81382,7 @@ function requireIndex_cjs () {
 	    attributeChangedCallback(attrName, oldValue, newValue) {
 	      super.attributeChangedCallback?.(attrName, oldValue, newValue);
 
-	      if (observedAttributes$6.includes(attrName)) {
+	      if (observedAttributes$5.includes(attrName)) {
 	        this.#setValidity();
 	      }
 	    }
@@ -84991,12 +84991,12 @@ descope-boolean-field-internal {
 
 	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() {
@@ -88716,7 +88716,7 @@ descope-boolean-field-internal {
 
 	const componentName$I = getComponentName$1('upload-file');
 
-	const observedAttributes$4 = [
+	const observedAttributes$3 = [
 	  'title',
 	  'description',
 	  'button-label',
@@ -88733,7 +88733,7 @@ descope-boolean-field-internal {
 
 	class RawUploadFile extends BaseInputClass$4 {
 	  static get observedAttributes() {
-	    return observedAttributes$4.concat(BaseInputClass$4.observedAttributes || []);
+	    return observedAttributes$3.concat(BaseInputClass$4.observedAttributes || []);
 	  }
 
 	  constructor() {
@@ -97255,12 +97255,12 @@ descope-boolean-field-internal {
 
 	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) {
@@ -98098,7 +98098,7 @@ descope-boolean-field-internal {
 
 	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,
@@ -98113,7 +98113,7 @@ descope-boolean-field-internal {
 	  #intervalId;
 
 	  static get observedAttributes() {
-	    return observedAttributes$2.concat(BaseClass$3.observedAttributes || []);
+	    return observedAttributes$1.concat(BaseClass$3.observedAttributes || []);
 	  }
 
 	  constructor() {
@@ -99219,8 +99219,6 @@ descope-boolean-field-internal {
 
 	const componentName$2 = getComponentName('outbound-apps');
 
-	const observedAttributes$1 = ['connect-button-label', 'disconnect-button-label', 'data'];
-
 	const itemRenderer = (
 	  { name, description, logo, appId, isConnected },
 	  _,
@@ -99235,22 +99233,21 @@ descope-boolean-field-internal {
       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>
       `
 	          : ''
 	      }
@@ -99270,15 +99267,13 @@ descope-boolean-field-internal {
 	});
 
 	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');
@@ -99295,6 +99290,13 @@ descope-boolean-field-internal {
       }
       .content {
         flex-grow: 1;
+        display: flex;
+        flex-direction: column;
+      }
+      .app-title,
+      .app-description {
+        display: flex;
+        direction: inherit;
       }
       descope-list {
         display: block;
@@ -99312,11 +99314,17 @@ descope-boolean-field-internal {
 	    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 } }));
+	      }
 	    }
 	  }
 
@@ -99367,6 +99375,10 @@ descope-boolean-field-internal {
 	        selector: () => ' .app-logo',
 	        property: 'margin-inline-end'
 	      },
+	      contentGap: {
+	        selector: () => ' .content',
+	        property: 'gap'
+	      },
 	      itemsTextAlign: {
 	        selector: TextClass.componentName,
 	        property: TextClass.cssVarList.textAlign,
@@ -99424,6 +99436,7 @@ descope-boolean-field-internal {
 
 	  [vars$1.appLogoBackgroundColor]: 'none',
 	  [vars$1.appLogoGap]: globals.spacing.md,
+	  [vars$1.contentGap]: globals.spacing.xs,
 
 	  // list-item overrides
 	  [vars$1.itemCursor]: 'default',
@@ -100008,7 +100021,6 @@ descope-boolean-field-internal {
 	index_cjs$4.getThemeRefs = getThemeRefs;
 	index_cjs$4.getThemeVars = getThemeVars;
 	index_cjs$4.globalsThemeToStyle = globalsThemeToStyle;
-	index_cjs$4.observedAttributes = observedAttributes$1;
 	index_cjs$4.themeToCSSVarsObj = themeToCSSVarsObj;
 	index_cjs$4.themeToStyle = themeToStyle;
 	index_cjs$4.themeVars = themeVars;
@@ -100077,6 +100089,7 @@ const TimerButtonClass = index_cjsExports.TimerButtonClass;
 const CollapsibleContainerClass = index_cjsExports.CollapsibleContainerClass;
 const RecoveryCodesListClass = index_cjsExports.RecoveryCodesList;
 const HcaptchaClass = index_cjsExports.HcaptchaClass;
+const OutboundAppsClass = index_cjsExports.OutboundAppsClass;
 
 const Checkbox = React__default.default.forwardRef((props, ref) => React__default.default.createElement("descope-checkbox", { ...props, ref: ref }));
 
@@ -100562,6 +100575,9 @@ const RecoveryCodesList = React__default.default.forwardRef(({ data, ...props },
 
 const Hcaptcha = React__default.default.forwardRef(({ enabled, ...props }, ref) => (React__default.default.createElement("descope-hcaptcha", { ref: ref, enabled: enabled, ...props })));
 
+const OutboundApps = React__default.default.forwardRef(({ emptyState, data, ...props }, ref) => (React__default.default.createElement("descope-outbound-apps", { data: data ? JSON.stringify(data) : undefined, ...props, ref: ref },
+    React__default.default.createElement("div", { slot: "empty-state" }, emptyState))));
+
 const globalsThemeToStyle = index_cjsExports.globalsThemeToStyle;
 const createComponentsTheme = index_cjsExports.createComponentsTheme;
 const themeToStyle = index_cjsExports.themeToStyle;
@@ -100642,6 +100658,8 @@ exports.NotificationClass = NotificationClass;
 exports.NotpImageClass = NotpImageClass;
 exports.NumberField = NumberField;
 exports.NumberFieldClass = NumberFieldClass;
+exports.OutboundApps = OutboundApps;
+exports.OutboundAppsClass = OutboundAppsClass;
 exports.PasscodeClass = PasscodeClass;
 exports.Password = Password;
 exports.PasswordClass = PasswordClass;