@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.148 → 2.0.0-next.150

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

@@ -54,6 +54,14 @@
 'sdb1595f5c742dfbb': `Input`,
 's37cbecaec58e2192': `Mode`,
 's065289e6cba017c6': `Transcribe`,
+'s5e8250fb85d64c23': `Close`,
+'sc16e00a7a8b2fde2': `Back`,
+'s6d8c02aee480af7a': `Menu`,
+'s6abb1cd87fe0114e': `Home`,
+'s18c92783d4042bbc': `Dimming`,
+'sa48f81f001b893d2': `User`,
+'sf7eeef8b4d6e602d': `Apps`,
+'s37a9e8aec5713460': `More`,
 's76b886a513fca0d8': `Username is required`,
 'seb1d48da15e775c9': `Password is required`,
 's5e27738a2e8eb763': `Sign in`,
@@ -61,8 +69,10 @@
 'sf6e1665c7022a1f8': `Password`,
 's981f6febad4df84a': `Recently signed in`,
 'sbce70cbdb856635e': `Recent`,
-'sa48f81f001b893d2': `User`,
 's7cfe12cd14df9950': `Sign out`,
+'s5be3c6d61cd9182f': `Notifications`,
+'s744d993d03f29851': `Screen`,
+'sa81e2cdaf6921adc': `System`,
 's3374200692e9843d': `No alerts`,
 's6686fcc6d2c8f0bd': `Note`,
 'sfbc33dd48f23752c': `Tag ID`,

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

@@ -64,6 +64,14 @@
 'sdb1595f5c742dfbb': `Input`,
 's37cbecaec58e2192': `Mode`,
 's065289e6cba017c6': `Transcribe`,
+'s5e8250fb85d64c23': `Close`,
+'sc16e00a7a8b2fde2': `Back`,
+'s6d8c02aee480af7a': `Menu`,
+'s6abb1cd87fe0114e': `Home`,
+'s18c92783d4042bbc': `Dimming`,
+'sa48f81f001b893d2': `User`,
+'sf7eeef8b4d6e602d': `Apps`,
+'s37a9e8aec5713460': `More`,
 's76b886a513fca0d8': `Username is required`,
 'seb1d48da15e775c9': `Password is required`,
 's5e27738a2e8eb763': `Sign in`,
@@ -71,8 +79,10 @@
 'sf6e1665c7022a1f8': `Password`,
 's981f6febad4df84a': `Recently signed in`,
 'sbce70cbdb856635e': `Recent`,
-'sa48f81f001b893d2': `User`,
 's7cfe12cd14df9950': `Sign out`,
+'s5be3c6d61cd9182f': `Notifications`,
+'s744d993d03f29851': `Screen`,
+'sa81e2cdaf6921adc': `System`,
 's3374200692e9843d': `No alerts`,
     };
   

package/src/integration-systems/integration-bar/integration-bar.ts

@@ -20,6 +20,7 @@ import '../../icons/icon-alerts.js';
 import '../../icons/icon-link.js';
 import {property, state} from 'lit/decorators.js';
 import {classMap} from 'lit/directives/class-map.js';
+import {msg} from '@lit/localize';
 
 /**
  * `<obc-integration-bar>` – A compact top-level integration header for vessel and system navigation controls.
@@ -50,14 +51,14 @@ import {classMap} from 'lit/directives/class-map.js';
  * @slot clock - Custom clock content, rendered when `showClock` is true
  * @slot integration-buttons - Regular vessel integration buttons
  * @slot hug-buttons - Compact vessel integration buttons; slotted integration buttons are forced to hug type
- * @fires fleet-button-click - Fired when the fleet button is clicked
- * @fires link-button-clicked - Fired when the link button is clicked
- * @fires alert-button-clicked - Fired when the alert button is clicked
- * @fires notification-button-clicked - Fired when the notification button is clicked
- * @fires screen-button-clicked - Fired when the screen button is clicked
- * @fires system-button-clicked - Fired when the system button is clicked
- * @fires dimming-button-clicked - Fired when the dimming button is clicked
- * @fires user-button-clicked - Fired when the user button is clicked
+ * @fires {CustomEvent} fleet-button-click - Fired when the fleet button is clicked
+ * @fires {CustomEvent} link-button-clicked - Fired when the link button is clicked
+ * @fires {CustomEvent} alert-button-clicked - Fired when the alert button is clicked
+ * @fires {CustomEvent} notification-button-clicked - Fired when the notification button is clicked
+ * @fires {CustomEvent} screen-button-clicked - Fired when the screen button is clicked
+ * @fires {CustomEvent} system-button-clicked - Fired when the system button is clicked
+ * @fires {CustomEvent} dimming-button-clicked - Fired when the dimming button is clicked
+ * @fires {CustomEvent} user-button-clicked - Fired when the user button is clicked
  * @experimental
  */
 @customElement('obc-integration-bar')
@@ -114,7 +115,11 @@ export class ObcIntegrationBar extends LitElement {
       <nav class="wrapper">
         <div class="content-container">
           ${!this.hideHomeButton
-            ? html`<obc-icon-button class="home-button" variant="integration">
+            ? html`<obc-icon-button
+                class="home-button"
+                variant="integration"
+                aria-label=${msg('Home')}
+              >
                 <obi-home></obi-home>
               </obc-icon-button>`
             : null}
@@ -126,6 +131,7 @@ export class ObcIntegrationBar extends LitElement {
                 })}
                 part="link-button"
                 variant="integration"
+                aria-label=${msg('Link')}
                 @click=${() =>
                   this.dispatchEvent(new CustomEvent('link-button-clicked'))}
                 ?activated=${this.linkButtonActivated}
@@ -179,6 +185,7 @@ export class ObcIntegrationBar extends LitElement {
                 })}
                 part="alert-button"
                 variant="integration"
+                aria-label=${msg('Alerts')}
                 style=${this.alertButtonActivated
                   ? 'anchor-name: --settings-menu-anchor;'
                   : ''}
@@ -197,6 +204,7 @@ export class ObcIntegrationBar extends LitElement {
                 })}
                 part="notification-button"
                 variant="integration"
+                aria-label=${msg('Notifications')}
                 style=${this.notificationButtonActivated
                   ? 'anchor-name: --settings-menu-anchor;'
                   : ''}
@@ -217,6 +225,7 @@ export class ObcIntegrationBar extends LitElement {
                 })}
                 part="screen-button"
                 variant="integration"
+                aria-label=${msg('Screen')}
                 style=${this.screenButtonActivated
                   ? 'anchor-name: --settings-menu-anchor;'
                   : ''}
@@ -235,6 +244,7 @@ export class ObcIntegrationBar extends LitElement {
                 })}
                 part="system-button"
                 variant="integration"
+                aria-label=${msg('System')}
                 style=${this.systemButtonActivated
                   ? 'anchor-name: --settings-menu-anchor;'
                   : ''}
@@ -253,6 +263,7 @@ export class ObcIntegrationBar extends LitElement {
                 })}
                 part="dimming-button"
                 variant="integration"
+                aria-label=${msg('Dimming')}
                 style=${this.dimmingButtonActivated
                   ? 'anchor-name: --settings-menu-anchor;'
                   : ''}
@@ -271,6 +282,7 @@ export class ObcIntegrationBar extends LitElement {
                 })}
                 part="user-button"
                 variant="integration"
+                aria-label=${msg('User')}
                 style=${this.userButtonActivated
                   ? 'anchor-name: --settings-menu-anchor;'
                   : ''}

package/src/integration-systems/integration-bar-dropdown/integration-bar-dropdown.stories.ts

@@ -6,6 +6,7 @@ import '../integration-dropdown-button/integration-dropdown-button.js';
 import '../../components/clock/clock.js';
 import '../../icons/icon-placeholder.js';
 import {IntegrationButtonType} from '../integration-button/integration-button.js';
+import {expect} from 'storybook/test';
 
 const meta: Meta<typeof ObcIntegrationBarDropdown> = {
   title: 'Integration Systems/Integration Bar Dropdown',
@@ -18,9 +19,24 @@ const meta: Meta<typeof ObcIntegrationBarDropdown> = {
     showDate: true,
     showTimezone: true,
     timeZoneOffsetHours: 1,
+    showHomeButton: true,
+    homeButtonActivated: false,
+    showLinkButton: false,
+    linkButtonActivated: false,
+    showAlertButton: false,
+    alertButtonActivated: false,
+    showNotificationButton: false,
+    notificationButtonActivated: false,
+    showNotificationCount: false,
+    notificationCount: 0,
+    showScreenButton: false,
+    screenButtonActivated: false,
+    showSystemButton: false,
+    systemButtonActivated: false,
     showDimmingButton: true,
+    dimmingButtonActivated: false,
     showUserButton: true,
-    showHomeButton: true,
+    userButtonActivated: false,
     nStatusFields: 3,
   },
   argTypes: {
@@ -31,11 +47,24 @@ const meta: Meta<typeof ObcIntegrationBarDropdown> = {
   render: (args) =>
     html`<obc-integration-bar-dropdown
       .showHomeButton=${args.showHomeButton}
+      .homeButtonActivated=${args.homeButtonActivated}
+      .showLinkButton=${args.showLinkButton}
+      .linkButtonActivated=${args.linkButtonActivated}
       .showClock=${args.showClock}
-      .showDimmingButton=${args.showDimmingButton}
-      .showUserButton=${args.showUserButton}
+      .showAlertButton=${args.showAlertButton}
+      .alertButtonActivated=${args.alertButtonActivated}
       .showNotificationButton=${args.showNotificationButton}
+      .notificationButtonActivated=${args.notificationButtonActivated}
+      .showNotificationCount=${args.showNotificationCount}
+      .notificationCount=${args.notificationCount}
+      .showScreenButton=${args.showScreenButton}
+      .screenButtonActivated=${args.screenButtonActivated}
       .showSystemButton=${args.showSystemButton}
+      .systemButtonActivated=${args.systemButtonActivated}
+      .showDimmingButton=${args.showDimmingButton}
+      .dimmingButtonActivated=${args.dimmingButtonActivated}
+      .showUserButton=${args.showUserButton}
+      .userButtonActivated=${args.userButtonActivated}
       .nStatusFields=${args.nStatusFields}
     >
       <obc-integration-dropdown-button
@@ -95,3 +124,41 @@ type Story = StoryObj<ObcIntegrationBarDropdown>;
 export const Primary: Story = {
   args: {},
 };
+
+export const AllButtons: Story = {
+  args: {
+    showLinkButton: true,
+    showAlertButton: true,
+    showNotificationButton: true,
+    showNotificationCount: true,
+    notificationCount: 3,
+    showScreenButton: true,
+    showSystemButton: true,
+  },
+  play: async ({canvasElement}) => {
+    const bar = canvasElement.querySelector(
+      'obc-integration-bar-dropdown'
+    ) as ObcIntegrationBarDropdown;
+    const iconButtons = bar.shadowRoot!.querySelectorAll('obc-icon-button');
+
+    expect(iconButtons.length).toBe(7);
+    for (const iconButton of iconButtons) {
+      const control = iconButton.shadowRoot!.querySelector('button')!;
+      expect(control.getAttribute('aria-label')).toBeTruthy();
+    }
+  },
+};
+
+export const AllButtonsActivated: Story = {
+  args: {
+    ...AllButtons.args,
+    homeButtonActivated: true,
+    linkButtonActivated: true,
+    alertButtonActivated: true,
+    notificationButtonActivated: true,
+    screenButtonActivated: true,
+    systemButtonActivated: true,
+    dimmingButtonActivated: true,
+    userButtonActivated: true,
+  },
+};

package/src/integration-systems/integration-bar-dropdown/integration-bar-dropdown.ts

@@ -1,4 +1,4 @@
-import {LitElement, html, nothing, unsafeCSS} from 'lit';
+import {LitElement, html, nothing, unsafeCSS, type TemplateResult} from 'lit';
 import {customElement} from '../../decorator.js';
 import compentStyle from './integration-bar-dropdown.css?inline';
 import '../integration-tabs/integration-tabs.js';
@@ -9,16 +9,46 @@ import '../../icons/icon-user.js';
 import '../../icons/icon-configure.js';
 import '../../icons/icon-notification.js';
 import '../../icons/icon-home.js';
+import '../../icons/icon-screen-desk.js';
+import '../../icons/icon-alerts.js';
+import '../../icons/icon-link.js';
 import {NotificationButtonStyle} from '../../components/notification-button/notification-button.js';
 import {property} from 'lit/decorators.js';
+import {msg} from '@lit/localize';
 
 /**
+ * `<obc-integration-bar-dropdown>` – A compact top-level integration header with a dropdown selector, status fields and system action buttons.
  *
- * @fires home-button-clicked - Fired when the home button is clicked
- * @fires dimming-button-clicked - Fired when the dimming button is clicked
- * @fires notification-button-clicked - Fired when the notification button is clicked
- * @fires user-button-clicked - Fired when the user button is clicked
- * @fires system-button-clicked - Fired when the system button is clicked
+ * @property showHomeButton - Home button at the left end of the bar.
+ * @property homeButtonActivated - Pressed styling for the home button.
+ * @availableWhen homeButtonActivated showHomeButton==true
+ * @property showLinkButton - Link button, between home and the selector.
+ * @property linkButtonActivated - Pressed styling for the link button.
+ * @availableWhen linkButtonActivated showLinkButton==true
+ * @property showClock - Renders the `clock` slot at the right end.
+ * @property showAlertButton - Alert button, first in the right-hand group.
+ * @property alertButtonActivated - Pressed styling for the alert button.
+ * @availableWhen alertButtonActivated showAlertButton==true
+ * @property showNotificationButton - Notification button, after the alert button.
+ * @property notificationButtonActivated - Pressed styling; the count badge only appears in this state.
+ * @availableWhen notificationButtonActivated showNotificationButton==true
+ * @property notificationCount - Number drawn in the count badge.
+ * @availableWhen notificationCount showNotificationButton==true && showNotificationCount==true && notificationButtonActivated==true
+ * @property showNotificationCount - Draws the count badge on the notification button.
+ * @availableWhen showNotificationCount showNotificationButton==true && notificationButtonActivated==true
+ * @property showScreenButton - Screen button, after the notification button.
+ * @property screenButtonActivated - Pressed styling for the screen button.
+ * @availableWhen screenButtonActivated showScreenButton==true
+ * @property showUserButton - User button, last before the clock.
+ * @property userButtonActivated - Pressed styling for the user button.
+ * @availableWhen userButtonActivated showUserButton==true
+ * @property showDimmingButton - Dimming button, between system and user.
+ * @property dimmingButtonActivated - Pressed styling for the dimming button.
+ * @availableWhen dimmingButtonActivated showDimmingButton==true
+ * @property showSystemButton - System button, after the screen button.
+ * @property systemButtonActivated - Pressed styling for the system button.
+ * @availableWhen systemButtonActivated showSystemButton==true
+ * @property nStatusFields - How many `status-icon-N`/`status-label-N` slot pairs are rendered.
  *
  * @slot vessel-selector - Vessel selector content
  * @slot status-label-1 - Label for the first status field
@@ -28,17 +58,32 @@ import {property} from 'lit/decorators.js';
  * @slot status-label-3 - Label for the third status field
  * @slot status-icon-3 - Icon for the third status field
  * @slot clock - Custom clock content, rendered when `showClock` is true
+ *
+ * @fires {CustomEvent} home-button-clicked - Fired when the home button is clicked
+ * @fires {CustomEvent} link-button-clicked - Fired when the link button is clicked
+ * @fires {CustomEvent} alert-button-clicked - Fired when the alert button is clicked
+ * @fires {CustomEvent} dimming-button-clicked - Fired when the dimming button is clicked
+ * @fires {CustomEvent} notification-button-clicked - Fired when the notification button is clicked
+ * @fires {CustomEvent} screen-button-clicked - Fired when the screen button is clicked
+ * @fires {CustomEvent} user-button-clicked - Fired when the user button is clicked
+ * @fires {CustomEvent} system-button-clicked - Fired when the system button is clicked
  * @experimental
  */
 @customElement('obc-integration-bar-dropdown')
 export class ObcIntegrationBarDropdown extends LitElement {
   @property({type: Boolean}) showHomeButton = false;
   @property({type: Boolean}) homeButtonActivated = false;
+  @property({type: Boolean}) showLinkButton = false;
+  @property({type: Boolean}) linkButtonActivated = false;
   @property({type: Boolean}) showClock = false;
+  @property({type: Boolean}) showAlertButton = false;
+  @property({type: Boolean}) alertButtonActivated = false;
   @property({type: Boolean}) showNotificationButton = false;
   @property({type: Boolean}) notificationButtonActivated = false;
   @property({type: Number}) notificationCount = 0;
   @property({type: Boolean}) showNotificationCount = false;
+  @property({type: Boolean}) showScreenButton = false;
+  @property({type: Boolean}) screenButtonActivated = false;
   @property({type: Boolean}) showUserButton = false;
   @property({type: Boolean}) userButtonActivated = false;
   @property({type: Boolean}) showDimmingButton = false;
@@ -66,28 +111,66 @@ export class ObcIntegrationBarDropdown extends LitElement {
     return html`<div class="status">${result}</div>`;
   }
 
+  // The event name stays a literal at each call site so `cem analyze` can read it.
+  private renderIconButton(
+    name: string,
+    activated: boolean,
+    label: string,
+    icon: TemplateResult,
+    onClick: () => void
+  ) {
+    return html`<obc-icon-button
+      class="${name}-button"
+      part="${name}-button"
+      variant="integration"
+      aria-label=${label}
+      @click=${onClick}
+      ?activated=${activated}
+    >
+      ${icon}
+    </obc-icon-button>`;
+  }
+
   override render() {
     return html`
       <div class="wrapper">
         <div class="left-side">
           ${this.showHomeButton
-            ? html`<obc-icon-button
-                class="home-button"
-                part="home-button"
-                variant="integration"
-                @click=${() =>
-                  this.dispatchEvent(new CustomEvent('home-button-clicked'))}
-                ?activated=${this.homeButtonActivated}
-              >
-                <obi-home></obi-home>
-              </obc-icon-button>`
-            : null}
+            ? this.renderIconButton(
+                'home',
+                this.homeButtonActivated,
+                msg('Home'),
+                html`<obi-home></obi-home>`,
+                () => this.dispatchEvent(new CustomEvent('home-button-clicked'))
+              )
+            : nothing}
+          ${this.showLinkButton
+            ? this.renderIconButton(
+                'link',
+                this.linkButtonActivated,
+                msg('Link'),
+                html`<obi-link></obi-link>`,
+                () => this.dispatchEvent(new CustomEvent('link-button-clicked'))
+              )
+            : nothing}
           <slot name="vessel-selector"></slot>
           ${this.renderStatusFields()}
         </div>
         <div class="right-side">
+          ${this.showAlertButton
+            ? this.renderIconButton(
+                'alert',
+                this.alertButtonActivated,
+                msg('Alerts'),
+                html`<obi-alerts></obi-alerts>`,
+                () =>
+                  this.dispatchEvent(new CustomEvent('alert-button-clicked'))
+              )
+            : nothing}
           ${this.showNotificationButton
-            ? html`<obc-notification-button
+            ? // TODO(designer): keep the Enhanced badge button here, or match the
+              // sibling bar's plain notification icon button? (#624)
+              html`<obc-notification-button
                 @click=${() =>
                   this.dispatchEvent(
                     new CustomEvent('notification-button-clicked')
@@ -98,43 +181,46 @@ export class ObcIntegrationBarDropdown extends LitElement {
                 ?isActive=${this.notificationButtonActivated}
               ></obc-notification-button>`
             : nothing}
+          ${this.showScreenButton
+            ? this.renderIconButton(
+                'screen',
+                this.screenButtonActivated,
+                msg('Screen'),
+                html`<obi-screen-desk></obi-screen-desk>`,
+                () =>
+                  this.dispatchEvent(new CustomEvent('screen-button-clicked'))
+              )
+            : nothing}
           ${this.showSystemButton
-            ? html`<obc-icon-button
-                class="system-button"
-                part="system-button"
-                variant="integration"
-                @click=${() =>
-                  this.dispatchEvent(new CustomEvent('system-button-clicked'))}
-                ?activated=${this.systemButtonActivated}
-              >
-                <obi-configure></obi-configure>
-              </obc-icon-button>`
-            : null}
+            ? this.renderIconButton(
+                'system',
+                this.systemButtonActivated,
+                msg('System'),
+                html`<obi-configure></obi-configure>`,
+                () =>
+                  this.dispatchEvent(new CustomEvent('system-button-clicked'))
+              )
+            : nothing}
           ${this.showDimmingButton
-            ? html`<obc-icon-button
-                class="dimming-button"
-                part="dimming-button"
-                variant="integration"
-                @click=${() =>
-                  this.dispatchEvent(new CustomEvent('dimming-button-clicked'))}
-                ?activated=${this.dimmingButtonActivated}
-              >
-                <obi-palette-day-night-iec></obi-palette-day-night-iec>
-              </obc-icon-button>`
-            : null}
+            ? this.renderIconButton(
+                'dimming',
+                this.dimmingButtonActivated,
+                msg('Dimming'),
+                html`<obi-palette-day-night-iec></obi-palette-day-night-iec>`,
+                () =>
+                  this.dispatchEvent(new CustomEvent('dimming-button-clicked'))
+              )
+            : nothing}
           ${this.showUserButton
-            ? html`<obc-icon-button
-                class="user-button"
-                part="user-button"
-                variant="integration"
-                @click=${() =>
-                  this.dispatchEvent(new CustomEvent('user-button-clicked'))}
-                ?activated=${this.userButtonActivated}
-              >
-                <obi-user></obi-user>
-              </obc-icon-button>`
-            : null}
-          ${this.showClock ? html`<slot name="clock"></slot>` : null}
+            ? this.renderIconButton(
+                'user',
+                this.userButtonActivated,
+                msg('User'),
+                html`<obi-user></obi-user>`,
+                () => this.dispatchEvent(new CustomEvent('user-button-clicked'))
+              )
+            : nothing}
+          ${this.showClock ? html`<slot name="clock"></slot>` : nothing}
         </div>
       </div>
     `;

package/src/types.ts

@@ -34,11 +34,11 @@ export enum AlertCategory {
 }
 
 export interface Alert {
-  id: string; // The id of the alert
-  tagId: string; // The tag ID visible to the user
+  id: string;
+  tagId: string;
   source: string;
   text: string;
-  note?: string; // The note of the alert, typically by the operator
+  note?: string;
   acknowledged:
     | false
     | {
@@ -67,8 +67,10 @@ export interface Alert {
         blockedEndTime?: Date;
         blockedBy?: string;
       };
-  noAck?: boolean; // If true, the alarm has no ack button
+  noAck?: boolean;
+  noSilence?: boolean;
   category?: AlertCategory;
+  memberOf?: string[];
 }
 
 export function isActive(alert: Alert) {