@descope/web-components-ui 3.21.1 → 3.22.0

package/dist/cjs/index.cjs.js

@@ -10954,7 +10954,11 @@ const resolveAuthType = (authType) => {
   return { label: authType.toUpperCase(), configured: true };
 };
 
-const itemRenderer$2 = ({ id, name, isDefault, link, authType }, _, ref) => {
+const itemRenderer$2 = (
+  { id, name, isDefault, link, authType, authOnly },
+  _,
+  ref,
+) => {
   const deleteAction =
     !isDefault && ref?.allowDelete
       ? `<span
@@ -10977,9 +10981,14 @@ const itemRenderer$2 = ({ id, name, isDefault, link, authType }, _, ref) => {
       : '';
 
   const { label: authTypeLabel, configured } = resolveAuthType(authType);
+  // Sits next to the auth type because it says what the connection is FOR, the same kind of fact.
+  const authOnlyBadge = authOnly
+    ? `<descope-badge class="auth-only-badge" size="xs"><span class="auth-only-text"></span></descope-badge>`
+    : '';
   const authTypeRow = configured
     ? `<div class="auth-type-row">
         <descope-badge class="auth-type-badge" size="xs"></descope-badge>
+        ${authOnlyBadge}
       </div>`
     : `<div class="auth-type-row">
         <descope-text
@@ -10987,6 +10996,7 @@ const itemRenderer$2 = ({ id, name, isDefault, link, authType }, _, ref) => {
           variant="body2"
           mode="secondary"
         >${ref?.notConfiguredLabel}</descope-text>
+        ${authOnlyBadge}
       </div>`;
 
   const template = document.createElement('template');
@@ -11031,6 +11041,9 @@ const itemRenderer$2 = ({ id, name, isDefault, link, authType }, _, ref) => {
 
   const authTypeBadge = template.content.querySelector('.auth-type-badge');
   if (authTypeBadge) authTypeBadge.textContent = authTypeLabel;
+
+  const authOnlyEl = template.content.querySelector('.auth-only-text');
+  if (authOnlyEl) authOnlyEl.textContent = ref?.authOnlyLabel;
   return template;
 };
 
@@ -11155,6 +11168,28 @@ class RawMultiSsoClass extends BaseClass$4 {
       .auth-type-row {
         display: flex;
         align-items: center;
+        min-width: 0;
+      }
+
+      /* The auth type is short and fixed, so it keeps its size and the consumer-supplied label is
+         the one that gives way. */
+      .auth-type-badge {
+        flex-shrink: 0;
+      }
+
+      /* The label is consumer-supplied and localized, so it can be far longer than the row. It
+         shrinks to whatever the row leaves it and ellipsises only then, rather than being held to a
+         fixed width that would truncate it while space is still going spare. */
+      .auth-only-badge {
+        min-width: 0;
+        flex-shrink: 1;
+      }
+
+      .auth-only-text {
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
       }
 
       .action {
@@ -11202,6 +11237,10 @@ class RawMultiSsoClass extends BaseClass$4 {
     return this.getAttribute('configure-tooltip-label') ?? '';
   }
 
+  get authOnlyLabel() {
+    return this.getAttribute('auth-only-label') || 'Authentication only';
+  }
+
   init() {
     super.init?.();
 
@@ -11323,6 +11362,10 @@ const MultiSsoClass = compose(
         selector: () => '.action',
         property: 'gap',
       },
+      authTypeRowGap: {
+        selector: () => '.auth-type-row',
+        property: 'gap',
+      },
       unconfiguredAuthTypeTextColor: {
         selector: () => '[not-configured]',
         property: TextClass.cssVarList.textColor,
@@ -11454,6 +11497,7 @@ const MultiSsoClass = compose(
       'not-configured-label',
       'delete-tooltip-label',
       'configure-tooltip-label',
+      'auth-only-label',
     ],
   }),
   componentNameValidationMixin$1,
@@ -11469,6 +11513,8 @@ const MultiSso = {
   [vars$P.headerListGap]: globalRefs$s.spacing.md,
   [vars$P.itemContentGap]: globalRefs$s.spacing.md,
   [vars$P.actionGap]: globalRefs$s.spacing.sm,
+  // keeps the authentication-only badge off the auth-type badge beside it
+  [vars$P.authTypeRowGap]: globalRefs$s.spacing.sm,
   [vars$P.unconfiguredAuthTypeTextColor]: globalRefs$s.colors.surface.dark,
   [vars$P.unconfiguredAuthTypeTextFontStyle]: 'italic',
   [vars$P.buttonMaxWidth]: '50%',