@oicl/openbridge-webcomponents 2.0.0-next.154 → 2.0.0-next.155

package/bundle/openbridge-webcomponents.bundle.js

@@ -93589,6 +93589,39 @@ const compentStyle$K = i$7`* {
     "ss04" on;
     }
 
+.wrapper.size-large .user-label {
+      font-family: var(--global-typography-font-family);
+      font-weight: var(--global-typography-ui-body-font-weight);
+      font-size: var(--global-typography-ui-body-font-size);
+      line-height: var(--global-typography-ui-body-line-height);
+      font-feature-settings:
+    "liga" off,
+    "clig" off,
+    "ss04" on;
+    }
+
+.wrapper.size-large .user-sublabel {
+      font-family: var(--global-typography-font-family);
+      font-weight: var(--global-typography-ui-body-font-weight);
+      font-size: var(--global-typography-ui-body-font-size);
+      line-height: var(--global-typography-ui-body-line-height);
+      font-feature-settings:
+    "liga" off,
+    "clig" off,
+    "ss04" on;
+    }
+
+.wrapper.size-large.has-sublabel .user-label {
+      font-family: var(--global-typography-font-family);
+      font-weight: var(--global-typography-ui-body-active-font-weight);
+      font-size: var(--global-typography-ui-body-active-font-size);
+      line-height: var(--global-typography-ui-body-active-line-height);
+      font-feature-settings:
+    "liga" off,
+    "clig" off,
+    "ss04" on;
+    }
+
 .wrapper.size-large.style-selected .user-initials {
       font-family: var(--global-typography-font-family);
       font-weight: var(--font-weight-bold);
@@ -93601,6 +93634,17 @@ const compentStyle$K = i$7`* {
     "ss04" on;
     }
 
+.wrapper.size-large.style-selected .user-label {
+      font-family: var(--global-typography-font-family);
+      font-weight: var(--global-typography-ui-body-active-font-weight);
+      font-size: var(--global-typography-ui-body-active-font-size);
+      line-height: var(--global-typography-ui-body-active-line-height);
+      font-feature-settings:
+    "liga" off,
+    "clig" off,
+    "ss04" on;
+    }
+
 .wrapper.size-large.state-static {
       width: var(--ui-components-user-button-visual-size-enhanced);
       height: var(--ui-components-user-button-visual-size-enhanced);
@@ -93622,7 +93666,30 @@ const compentStyle$K = i$7`* {
     color: var(--element-active-color);
   }
 
-.wrapper:disabled .user-label {
+.wrapper .user-sublabel {
+    font-family: var(--global-typography-font-family);
+    font-weight: var(--global-typography-ui-label-font-weight);
+    font-size: var(--global-typography-ui-label-font-size);
+    line-height: var(--global-typography-ui-label-line-height);
+    font-feature-settings:
+    "liga" off,
+    "clig" off,
+    "ss04" on;
+    color: var(--element-active-color);
+  }
+
+.wrapper.has-sublabel .user-label {
+    font-family: var(--global-typography-font-family);
+    font-weight: var(--global-typography-ui-label-active-font-weight);
+    font-size: var(--global-typography-ui-label-active-font-size);
+    line-height: var(--global-typography-ui-label-active-line-height);
+    font-feature-settings:
+    "liga" off,
+    "clig" off,
+    "ss04" on;
+  }
+
+.wrapper:disabled .user-label,.wrapper:disabled .user-sublabel {
     color: var(--element-disabled-color);
   }
 
@@ -94030,15 +94097,21 @@ let ObcUserButton = class extends i$4 {
       "mode-icon": this.shouldShowIcon,
       "mode-initials": !this.shouldShowIcon,
       "state-static": this.static,
-      [`size-${this.size}`]: true
+      [`size-${this.size}`]: true,
+      "has-sublabel": Boolean(this.sublabel) && !this.static
     };
     const tag = this.static ? i$2`div` : i$2`button`;
+    const visibleText = [this.label, this.sublabel].filter(Boolean).join(", ");
+    const accessibleName = !this.static && visibleText || this.initials || "User button";
     const label = this.label && !this.static ? u$2`<span class="user-label" part="label">${this.label}</span>` : A;
+    const sublabel = this.sublabel && !this.static ? u$2`<span class="user-sublabel" part="sublabel">
+            ${this.sublabel}
+          </span>` : A;
     return u$2`
         <${tag}
           class=${e$1(wrapperClasses)}
           ?disabled=${this.disabled}
-          aria-label=${this.initials || "User button"}
+          aria-label=${accessibleName}
         >
         <div class="content-container" part="content-container">
           <div class="user-button-circle">
@@ -94055,7 +94128,7 @@ let ObcUserButton = class extends i$4 {
                     </span>
                   `}
           </div>
-          ${label}
+          ${label} ${sublabel}
         </div>
         </${tag}>
       `;
@@ -94083,6 +94156,9 @@ __decorateClass$uA([
 __decorateClass$uA([
   n$3({ type: String })
 ], ObcUserButton.prototype, "label", 2);
+__decorateClass$uA([
+  n$3({ type: String })
+], ObcUserButton.prototype, "sublabel", 2);
 ObcUserButton = __decorateClass$uA([
   customElement("obc-user-button")
 ], ObcUserButton);
@@ -124172,6 +124248,21 @@ const componentStyle$l = i$7`* {
       color: var(--element-neutral-color);
     }
 
+:is(.card .user-profile) obc-user-button:not(.has-role)::part(label) {
+      font-weight: var(--font-weight-regular);
+    }
+
+:is(.card .user-profile) obc-user-button::part(sublabel) {
+      font-family: var(--global-typography-font-family);
+      font-weight: var(--global-typography-ui-body-font-weight);
+      font-size: var(--global-typography-ui-body-font-size);
+      line-height: var(--global-typography-ui-body-line-height);
+      font-feature-settings:
+    "liga" off,
+    "clig" off,
+    "ss04" on;
+    }
+
 .card .user-primary {
     padding: 0;
   }
@@ -124263,6 +124354,7 @@ let ObcUserMenu = class extends i$4 {
     this.passwordError = "";
     this.recentUsers = [];
     this.signedInActions = [];
+    this.showUseAnotherAccount = true;
   }
   get showRecentUsers() {
     return this.hasRecentlySignedIn && this.recentUsers.length > 0;
@@ -124303,6 +124395,7 @@ let ObcUserMenu = class extends i$4 {
               .size=${size}
               .initials=${user.initials}
               .label=${user.label}
+              .sublabel=${isLarge ? user.role : void 0}
               @click=${() => this.handleRecentUserClick(user)}
             ></obc-user-button>
           `
@@ -124315,6 +124408,7 @@ let ObcUserMenu = class extends i$4 {
       return A;
     }
     const userButtonSize = size === "large" ? Size.large : Size.regular;
+    const role = size === "large" ? this.userRole : void 0;
     return b`
       <div
         class=${e$1({
@@ -124325,13 +124419,15 @@ let ObcUserMenu = class extends i$4 {
         <obc-user-button
           class=${e$1({
       "user-avatar": true,
-      [`size-${size}`]: true
+      [`size-${size}`]: true,
+      "has-role": Boolean(role)
     })}
           .variant=${Variant.initials}
           .styleType=${StyleType.normal}
           .size=${userButtonSize}
           .initials=${this.userInitials ?? ""}
           .label=${this.userLabel ?? ""}
+          .sublabel=${role}
         ></obc-user-button>
       </div>
     `;
@@ -124363,7 +124459,7 @@ let ObcUserMenu = class extends i$4 {
   handleRecentUserClick(user) {
     this.dispatchEvent(
       new CustomEvent("recent-user-click", {
-        detail: { initials: user.initials, label: user.label }
+        detail: { ...user }
       })
     );
   }
@@ -124411,6 +124507,9 @@ let ObcUserMenu = class extends i$4 {
   handleSignOutClick() {
     this.dispatchEvent(new CustomEvent("sign-out-click"));
   }
+  handleUseAnotherAccountClick() {
+    this.dispatchEvent(new CustomEvent("use-another-account-click"));
+  }
   renderSignIn() {
     return b`
       <div class="title-container">
@@ -124531,6 +124630,15 @@ let ObcUserMenu = class extends i$4 {
           >
             ${msg("Sign in")}
           </obc-button>
+          ${this.showUseAnotherAccount ? b`
+                <obc-button
+                  variant=${ButtonVariant.normal}
+                  fullWidth
+                  @click=${this.handleUseAnotherAccountClick}
+                >
+                  ${msg("Use another account")}
+                </obc-button>
+              ` : A}
         </div>
       </div>
       ${this.showRecentUsers ? b`
@@ -124573,6 +124681,15 @@ let ObcUserMenu = class extends i$4 {
         >
           ${msg("Sign in")}
         </obc-button>
+        ${this.showUseAnotherAccount ? b`
+              <obc-button
+                variant=${ButtonVariant.normal}
+                fullWidth
+                @click=${this.handleUseAnotherAccountClick}
+              >
+                ${msg("Use another account")}
+              </obc-button>
+            ` : A}
       </div>
       ${this.showRecentUsers ? b`
             <div class="divider" aria-hidden="true"></div>
@@ -124751,6 +124868,9 @@ __decorateClass$sQ([
 __decorateClass$sQ([
   n$3({ type: String })
 ], ObcUserMenu.prototype, "userLabel", 2);
+__decorateClass$sQ([
+  n$3({ type: String })
+], ObcUserMenu.prototype, "userRole", 2);
 __decorateClass$sQ([
   n$3({ type: Array, attribute: false })
 ], ObcUserMenu.prototype, "recentUsers", 2);
@@ -124760,6 +124880,9 @@ __decorateClass$sQ([
 __decorateClass$sQ([
   n$3({ type: String })
 ], ObcUserMenu.prototype, "primaryActionId", 2);
+__decorateClass$sQ([
+  n$3({ type: Boolean, attribute: false })
+], ObcUserMenu.prototype, "showUseAnotherAccount", 2);
 ObcUserMenu = __decorateClass$sQ([
   customElement("obc-user-menu"),
   localized()