@descope/web-components-ui 1.120.0 → 1.122.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope/web-components-ui",
-  "version": "1.120.0",
+  "version": "1.122.0",
   "description": "",
   "main": "dist/cjs/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -77,6 +77,7 @@
     "lodash.merge": "4.6.2",
     "@descope-ui/common": "0.0.18",
     "@descope-ui/descope-button": "0.0.19",
+    "@descope-ui/descope-outbound-app-button": "0.0.1",
     "@descope-ui/descope-image": "0.0.10",
     "@descope-ui/descope-icon": "0.0.17",
     "@descope-ui/descope-text": "0.0.19",

package/src/components/descope-user-attribute/UserAttributeClass.js

@@ -19,20 +19,19 @@ class RawUserAttribute extends createBaseClass({
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
       <div class="root">
-        <div class="text-wrapper">
-          <descope-text st-text-align="auto" data-id="label-text" variant="body1" mode="secondary" class="label"></descope-text>
+        <descope-text st-text-align="auto" data-id="label-text" variant="body1" mode="secondary" class="label"></descope-text>
+        <div class="content-wrapper">
           <descope-text st-text-align="auto" data-id="value-text" variant="body1" mode="primary" class="value"></descope-text>
+          <div class="btn-wrapper">
+            <descope-badge mode="default" bordered="true" size="xs"></descope-badge>
+            <descope-button size="xs" data-id="edit-btn" square="true" variant="link" mode="primary">
+              <vaadin-icon src=${editIcon}></vaadin-icon>
+            </descope-button>
+            <descope-button size="xs" data-id="delete-btn" square="true" variant="link" mode="primary">
+              <vaadin-icon src=${deleteIcon}></vaadin-icon>
+            </descope-button>
+          </div>
         </div>
-
-        <div class="btn-wrapper">
-          <descope-badge mode="default" bordered="true" size="xs"></descope-badge>
-          <descope-button size="xs" data-id="edit-btn" square="true" variant="link" mode="primary">
-            <vaadin-icon src=${editIcon}></vaadin-icon>
-          </descope-button>
-          <descope-button size="xs" data-id="delete-btn" square="true" variant="link" mode="primary">
-            <vaadin-icon src=${deleteIcon}></vaadin-icon>
-          </descope-button>
-        </div
       </div>
 		`;
 
@@ -40,6 +39,7 @@ class RawUserAttribute extends createBaseClass({
       `
       :host {
 					display: inline-flex;
+          container-type: inline-size;
 				}
 
         vaadin-icon {
@@ -53,6 +53,12 @@ class RawUserAttribute extends createBaseClass({
           align-items: center;
         }
 
+        @container (max-width: 529px) {
+          .root {
+            flex-wrap: wrap;
+          }
+        }
+
         .btn-wrapper {
           display: flex;
           justify-content: space-between;
@@ -60,10 +66,10 @@ class RawUserAttribute extends createBaseClass({
           flex-grow: 0;
         }
 
-        .text-wrapper {
+        .content-wrapper {
           display: flex;
-          align-items: center;
           flex-grow: 1;
+          align-items: center;
         }
 
         descope-text::part(text-wrapper) {
@@ -75,10 +81,13 @@ class RawUserAttribute extends createBaseClass({
 
         descope-text {
           display: inline-flex;
+          max-width: 100%;
+          min-width: 0;
         }
 
         .label {
-          flex-grow: 0;
+          flex-grow: 1;
+          width: 100%;
         }
 
         .value {
@@ -224,14 +233,13 @@ class RawUserAttribute extends createBaseClass({
   }
 }
 
-const { host, textFields, buttons, badge, labelText, valueText, textWrapper } = {
+const { host, textFields, buttons, badge, labelText, contentWrapper } = {
   host: { selector: () => ':host' },
   textFields: { selector: 'descope-text' },
-  valueText: { selector: 'descope-text[data-id="value-text"]' },
   labelText: { selector: 'descope-text[data-id="label-text"]' },
   buttons: { selector: 'descope-button' },
   badge: { selector: 'descope-badge' },
-  textWrapper: { selector: ' .text-wrapper' },
+  contentWrapper: { selector: ' .content-wrapper' },
 };
 
 export const UserAttributeClass = compose(
@@ -239,16 +247,17 @@ export const UserAttributeClass = compose(
     mappings: {
       hostWidth: { ...host, property: 'width' },
       hostMinWidth: { ...host, property: 'min-width' },
+      hostMaxWidth: { ...host, property: 'max-width' },
       hostDirection: [
         { ...host, property: 'direction' },
         { ...textFields, property: TextClass.cssVarList.hostDirection },
         { ...buttons, property: ButtonClass.cssVarList.hostDirection },
         { ...badge, property: BadgeClass.cssVarList.hostDirection },
       ],
-      labelTextWidth: { ...labelText, property: 'width' },
-      valueTextWidth: { ...valueText, property: 'width' },
+      labelMinWidth: { ...labelText, property: 'min-width' },
+      contentMinWidth: { ...contentWrapper, property: 'min-width' },
       badgeMaxWidth: { ...badge, property: 'max-width' },
-      itemsGap: [{ property: 'gap' }, { ...textWrapper, property: 'gap' }],
+      itemsGap: [{ property: 'gap' }, { ...contentWrapper, property: 'gap' }],
     },
   }),
   draggableMixin,

package/src/components/descope-user-auth-method/UserAuthMethodClass.js

@@ -67,6 +67,7 @@ class RawUserAuthMethod extends createBaseClass({
           display: flex;
           align-items: center;
           flex-grow: 1;
+          min-width: 0;
         }
 
         descope-text::part(text-wrapper) {
@@ -78,6 +79,7 @@ class RawUserAuthMethod extends createBaseClass({
 
         descope-text {
           display: inline-flex;
+          min-width: 0;
         }
 
         .status-indicator {
@@ -241,13 +243,13 @@ export const UserAuthMethodClass = compose(
     mappings: {
       hostWidth: { ...host, property: 'width' },
       hostMinWidth: { ...host, property: 'min-width' },
+      hostMaxWidth: { ...host, property: 'max-width' },
       hostDirection: [
         { ...host, property: 'direction' },
         { ...textField, property: TextClass.cssVarList.hostDirection },
         { ...buttons, property: ButtonClass.cssVarList.hostDirection },
         { ...badge, property: BadgeClass.cssVarList.hostDirection },
       ],
-      labelTextWidth: { ...textField, property: 'width' },
       itemsGap: [{ property: 'gap' }, { ...textWrapper, property: 'gap' }],
       iconSize: [
         { ...methodIconSlot, property: 'width' },

package/src/theme/components/index.js

@@ -61,6 +61,7 @@ import * as passwordStrength from '@descope-ui/descope-password-strength/theme';
 import * as collapsibleContainer from '@descope-ui/descope-collapsible-container/theme';
 import * as recoveryCodes from '@descope-ui/descope-recovery-codes/theme';
 import * as outboundApps from '@descope-ui/descope-outbound-apps/theme';
+import * as outboundAppButton from '@descope-ui/descope-outbound-app-button/theme';
 
 const components = {
   button,
@@ -127,6 +128,7 @@ const components = {
   recoveryCodes,
   hcaptcha,
   outboundApps,
+  outboundAppButton,
 };
 
 const theme = Object.keys(components).reduce(

package/src/theme/components/userAttribute.js

@@ -1,17 +1,23 @@
 import globals from '../globals';
-import { UserAttributeClass } from '../../components/descope-user-attribute/UserAttributeClass';
-import { getThemeRefs } from '../../helpers/themeHelpers';
+import {
+  UserAttributeClass,
+  componentName,
+} from '../../components/descope-user-attribute/UserAttributeClass';
+import { createHelperVars, getThemeRefs, useVar } from '../../helpers/themeHelpers';
 
 const globalRefs = getThemeRefs(globals);
 export const vars = UserAttributeClass.cssVarList;
 
 const userAttribute = {
+  [vars.labelMinWidth]: '150px',
   [vars.hostDirection]: globalRefs.direction,
-  [vars.labelTextWidth]: '150px',
-  [vars.valueTextWidth]: '200px',
+  [vars.contentMinWidth]: `calc(100% - ${useVar(vars.labelMinWidth)})`,
   [vars.badgeMaxWidth]: '85px',
-  [vars.itemsGap]: '16px',
-  [vars.hostMinWidth]: '530px',
+  [vars.itemsGap]: '4px',
+  [vars.hostMinWidth]: '310px',
+  [vars.hostWidth]: '530px',
+  [vars.hostMaxWidth]: '100%',
+
   _fullWidth: {
     [vars.hostWidth]: '100%',
   },

package/src/theme/components/userAuthMethod.js

@@ -7,9 +7,10 @@ export const vars = UserAuthMethodClass.cssVarList;
 
 const userAuthMethod = {
   [vars.hostDirection]: globalRefs.direction,
-  [vars.labelTextWidth]: '200px',
   [vars.itemsGap]: '16px',
-  [vars.hostMinWidth]: '530px',
+  [vars.hostMinWidth]: '310px',
+  [vars.hostWidth]: '530px',
+  [vars.hostMaxWidth]: '100%',
   [vars.iconSize]: '24px',
   [vars.iconColor]: 'currentcolor',
   _fullWidth: {