@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.154 → 2.0.0-next.156

package/src/components/user-menu/user-menu.ts

@@ -39,8 +39,11 @@ export enum ObcUserMenuSize {
 export type ObcUserMenuUser = {
   initials: string;
   label: string;
+  role?: string;
 };
 
+export type ObcUserMenuRecentUserClickEvent = CustomEvent<ObcUserMenuUser>;
+
 export type ObcUserMenuSignedInAction = {
   id: string;
   label: string;
@@ -80,8 +83,13 @@ export type ObcUserMenuSignedInAction = {
  * - `passwordError` (`string`): Error message for the password field.
  * - `userInitials` (`string`): Initials for the primary user profile.
  * - `userLabel` (`string`): Label for the primary user profile.
+ * - `userRole` (`string`): Role shown under the primary user's label. Omit it
+ *   to show no role; only the regular size draws one.
  * - `recentUsers` (`ObcUserMenuUser[]`): List of recent users shown in the
- *   "Recently signed in" section. Empty renders no section.
+ *   "Recently signed in" section. Empty renders no section. Each user may
+ *   carry its own `role`.
+ * - `showUseAnotherAccount` (`boolean`): Toggles the "Use another account"
+ *   button in the `user-sign-in` layouts, both sizes. Defaults to `true`.
  * - `signedInActions` (`ObcUserMenuSignedInAction[]`): Actions shown in the
  *   signed-in navigation list. Empty renders no actions.
  * - `primaryActionId` (`string`): Id of the action promoted to a button in the
@@ -90,6 +98,9 @@ export type ObcUserMenuSignedInAction = {
  * ### Events
  * - `sign-in-click` – Fired when a sign-in button is clicked.
  * - `sign-out-click` – Fired when the sign-out button is clicked.
+ * - `use-another-account-click` – Fired when the "Use another account" button
+ *   is clicked. The menu does not change its own type; set it to `sign-in` in
+ *   the handler to show the full form.
  * - `signed-in-action-click` – Fired when a signed-in action is clicked.
  * - `recent-user-click` – Fired when a recent user button is clicked.
  *
@@ -124,6 +135,8 @@ export type ObcUserMenuSignedInAction = {
  * @availableWhen userInitials type!=signIn
  * @property userLabel - Label for the primary user profile.
  * @availableWhen userLabel type!=signIn
+ * @property userRole - Role shown under the primary user's label; omit it to show no role.
+ * @availableWhen userRole type!=signIn && size==regular
  * @property recentUsers - Recent users for the "Recently signed in" section.
  * @property signedInActions - Actions shown in the signed-in navigation list.
  * @availableWhen signedInActions type==signedIn
@@ -133,11 +146,14 @@ export type ObcUserMenuSignedInAction = {
  * @availableWhen showPassword type in [signIn, userSignIn]
  * @property primaryActionId - Id of the action promoted to a button in the small signed-in layout.
  * @availableWhen primaryActionId type==signedIn && size==small
+ * @property showUseAnotherAccount - Controls the visibility of the "Use another account" button.
+ * @availableWhen showUseAnotherAccount type==userSignIn
  * @slot signed-in-action-icon-<id> - Optional icon for a signed-in action, one per action; `<id>` is the normalized action id (shown in the `signed-in` type).
  * @fires {CustomEvent<{username?: string, password?: string}>} sign-in-click - Fired when a sign-in button is clicked.
  * @fires {CustomEvent<void>} sign-out-click - Fired when the sign-out button is clicked.
+ * @fires {CustomEvent<void>} use-another-account-click - Fired when the "Use another account" button is clicked.
  * @fires {CustomEvent<{id: string, label: string}>} signed-in-action-click - Fired when a signed-in action is clicked.
- * @fires {CustomEvent<{initials: string, label: string}>} recent-user-click - Fired when a recent user button is clicked.
+ * @fires {ObcUserMenuRecentUserClickEvent} recent-user-click - Fired when a recent user button is clicked, carrying that user's entry.
  * @stable
  */
 @customElement('obc-user-menu')
@@ -168,6 +184,8 @@ export class ObcUserMenu extends LitElement {
 
   @property({type: String}) userLabel?: string;
 
+  @property({type: String}) userRole?: string;
+
   @property({type: Array, attribute: false})
   recentUsers: ObcUserMenuUser[] = [];
 
@@ -176,6 +194,9 @@ export class ObcUserMenu extends LitElement {
 
   @property({type: String}) primaryActionId?: string;
 
+  @property({type: Boolean, attribute: false})
+  showUseAnotherAccount = true;
+
   private get showRecentUsers() {
     return this.hasRecentlySignedIn && this.recentUsers.length > 0;
   }
@@ -223,6 +244,7 @@ export class ObcUserMenu extends LitElement {
               .size=${size}
               .initials=${user.initials}
               .label=${user.label}
+              .sublabel=${isLarge ? user.role : undefined}
               @click=${() => this.handleRecentUserClick(user)}
             ></obc-user-button>
           `
@@ -239,6 +261,7 @@ export class ObcUserMenu extends LitElement {
       return nothing;
     }
     const userButtonSize = size === 'large' ? Size.large : Size.regular;
+    const role = size === 'large' ? this.userRole : undefined;
     return html`
       <div
         class=${classMap({
@@ -250,12 +273,14 @@ export class ObcUserMenu extends LitElement {
           class=${classMap({
             'user-avatar': 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>
     `;
@@ -293,8 +318,8 @@ export class ObcUserMenu extends LitElement {
 
   private handleRecentUserClick(user: ObcUserMenuUser) {
     this.dispatchEvent(
-      new CustomEvent('recent-user-click', {
-        detail: {initials: user.initials, label: user.label},
+      new CustomEvent<ObcUserMenuUser>('recent-user-click', {
+        detail: {...user},
       })
     );
   }
@@ -352,6 +377,10 @@ export class ObcUserMenu extends LitElement {
     this.dispatchEvent(new CustomEvent('sign-out-click'));
   }
 
+  private handleUseAnotherAccountClick() {
+    this.dispatchEvent(new CustomEvent('use-another-account-click'));
+  }
+
   private renderSignIn() {
     return html`
       <div class="title-container">
@@ -488,6 +517,17 @@ export class ObcUserMenu extends LitElement {
           >
             ${msg('Sign in')}
           </obc-button>
+          ${this.showUseAnotherAccount
+            ? html`
+                <obc-button
+                  variant=${ButtonVariant.normal}
+                  fullWidth
+                  @click=${this.handleUseAnotherAccountClick}
+                >
+                  ${msg('Use another account')}
+                </obc-button>
+              `
+            : nothing}
         </div>
       </div>
       ${this.showRecentUsers
@@ -535,6 +575,17 @@ export class ObcUserMenu extends LitElement {
         >
           ${msg('Sign in')}
         </obc-button>
+        ${this.showUseAnotherAccount
+          ? html`
+              <obc-button
+                variant=${ButtonVariant.normal}
+                fullWidth
+                @click=${this.handleUseAnotherAccountClick}
+              >
+                ${msg('Use another account')}
+              </obc-button>
+            `
+          : nothing}
       </div>
       ${this.showRecentUsers
         ? html`

package/src/generated/locales/es-419.ts

@@ -77,6 +77,7 @@
 'sf6e1665c7022a1f8': `Password`,
 's981f6febad4df84a': `Recently signed in`,
 'sbce70cbdb856635e': `Recent`,
+'s8506875a9d95f22c': `Use another account`,
 's7cfe12cd14df9950': `Sign out`,
 's5be3c6d61cd9182f': `Notifications`,
 's744d993d03f29851': `Screen`,

package/src/generated/locales/fi-FI.ts

@@ -87,6 +87,7 @@
 'sf6e1665c7022a1f8': `Password`,
 's981f6febad4df84a': `Recently signed in`,
 'sbce70cbdb856635e': `Recent`,
+'s8506875a9d95f22c': `Use another account`,
 's7cfe12cd14df9950': `Sign out`,
 's5be3c6d61cd9182f': `Notifications`,
 's744d993d03f29851': `Screen`,

package/src/mixins/transmitter.css

@@ -0,0 +1,90 @@
+/* obc-transmitter and obc-transmitter-stack attach to a line the same way;
+   what they share lives here. */
+
+/* Leader line and anchor transform. Apply on the element that carries the
+   `orientation-*` class and `--offset` (half the line's stroke width). */
+@define-mixin transmitter-leader {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: fit-content;
+
+  &.orientation-bottom {
+    padding-top: 8px;
+    top: calc(1px + var(--offset));
+    transform: translateX(-50%);
+  }
+
+  &.orientation-top {
+    padding-bottom: 8px;
+    transform: translate(-50%, calc(-100% - 1px - var(--offset)));
+  }
+
+  &.orientation-left {
+    padding-right: 8px;
+    transform: translate(calc(-100% - 4px - var(--offset)), -50%);
+  }
+
+  &.orientation-right {
+    padding-left: 8px;
+    transform: translateY(-50%);
+    right: calc(-4px - var(--offset));
+  }
+
+  &::before {
+    content: "";
+    display: block;
+    position: absolute;
+    border: var(--normal-enabled-border-color) solid 1px;
+  }
+
+  &.orientation-bottom::before,
+  &.orientation-top::before {
+    width: 0;
+    height: 8px;
+  }
+
+  &.orientation-bottom::before {
+    top: -1px;
+  }
+
+  &.orientation-top::before {
+    bottom: -1px;
+  }
+
+  &.orientation-left::before,
+  &.orientation-right::before {
+    height: 0;
+    width: 8px;
+  }
+
+  &.orientation-left::before {
+    right: -4px;
+  }
+
+  &.orientation-right::before {
+    left: -4px;
+  }
+
+  /* Left/right anchor on the chip row's middle (Figma 25656:45233), so the id
+     tag hangs below out of flow; its parent must be the containing block. */
+  &:is(.orientation-left, .orientation-right):not(.has-alert) .id-tag {
+    position: absolute;
+    top: calc(100% + 2px);
+    left: 50%;
+    transform: translateX(-50%);
+    white-space: nowrap;
+  }
+}
+
+@define-mixin transmitter-id-tag {
+  color: var(--element-neutral-color);
+  font-variant-numeric: lining-nums tabular-nums;
+  font-feature-settings: "ss04" on;
+  font-family: var(--global-typography-font-family);
+  font-size: var(--global-typography-instrument-label-font-size);
+  font-style: normal;
+  font-weight: 570;
+  line-height: var(--global-typography-instrument-label-line-height);
+}

package/src/mixins/visually-hidden.css

@@ -0,0 +1,10 @@
+/* Removes content from view while keeping it in the accessibility tree. */
+@define-mixin visually-hidden {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}

package/src/navigation-instruments/readout/readout.stories.ts

@@ -367,7 +367,7 @@ function argsToOptions(args: ReadoutStoryArgs): StoryOptions {
 
 const meta = {
   title: 'Instruments/Readout',
-  tags: ['autodocs', '6.0', 'beta'],
+  tags: ['autodocs', '6.0'],
   component: 'obc-readout',
   decorators: [centeredCanvasDecorator],
   render: (args) =>

package/src/navigation-instruments/readout/readout.ts

@@ -304,7 +304,7 @@ export interface ReadoutSourceOptions extends ReadoutSrcOptions {
  * @slot src-picker-content - Provides the source picker context menu content.
  * @fires {CustomEvent<{value: string, label?: string}>} source-change - Fired when a source picker option is selected.
  * @fires {CustomEvent<{src: string}>} source-flyout-click - Fired when the source row is clicked while `srcOptions.interaction == 'flyout'`.
- * @beta
+ * @stable
  */
 @customElement('obc-readout')
 export class ObcReadout extends LitElement {

package/src/navigation-instruments/readout-list-item/readout-list-item.css

@@ -130,6 +130,7 @@ obc-readout-block {
 }
 
 .value-area {
+  margin-inline-start: auto; /* right-aligns a label-less row's value, which has no label container to push it */
   display: inline-flex;
   align-items: flex-end;
   justify-content: flex-end;

package/src/navigation-instruments/readout-list-item/readout-list-item.stories.ts

@@ -346,7 +346,7 @@ function argsToOptions(args: ReadoutListItemStoryArgs): StoryOptions {
 
 const meta = {
   title: 'Instruments/Readout List Item',
-  tags: ['autodocs', '6.0', 'beta'],
+  tags: ['autodocs', '6.0'],
   component: 'obc-readout-list-item',
   decorators: [centeredCanvasDecorator],
   render: (args) =>

package/src/navigation-instruments/readout-list-item/readout-list-item.ts

@@ -364,7 +364,7 @@ export interface ReadoutSrcOptions extends ReadoutBlockState {
  * @slot setpoint-icon - Overrides the default setpoint icon.
  * @slot advice-icon - Overrides the default advice icon.
  * @fires click - Fired when the item is activated. Only fired when `clickable` is set; otherwise the item renders as a non-interactive `<div>`.
- * @beta
+ * @stable
  */
 @customElement('obc-readout-list-item')
 export class ObcReadoutListItem extends LitElement {
@@ -943,11 +943,21 @@ export class ObcReadoutListItem extends LitElement {
     `;
   }
 
-  private renderLabelContainer(): TemplateResult {
+  private renderLabelContainer(): TemplateResult | typeof nothing {
     const stacking = this.resolvedStacking;
     const showLeadingUnit =
       stacking === ReadoutListItemStacking.leadingUnit && Boolean(this.unit);
     const showLeadingSrc = this.hasLeadingSrc && Boolean(this.src);
+    // An empty container would still take the content gap, so a label-less
+    // row (the transmitter chip) could not hug its value.
+    if (
+      !this.hasLeadingIcon &&
+      !this.label &&
+      !showLeadingUnit &&
+      !showLeadingSrc
+    ) {
+      return nothing;
+    }
 
     return html`
       <div class="label-container" part="label-container">