@oicl/openbridge-webcomponents 2.0.0-next.148 → 2.0.0-next.149

package/bundle/openbridge-webcomponents.bundle.js

@@ -7755,6 +7755,7 @@ let ObcIconButton = class extends i$4 {
     this.progress = void 0;
     this.hasLabel = false;
     this.showDivider = true;
+    this.ariaLabel = null;
   }
   get progressSpinner() {
     if (this.progress === void 0) {
@@ -7825,6 +7826,7 @@ let ObcIconButton = class extends i$4 {
       "hide-divider": !this.showDivider
     })}
         ?disabled=${this.disabled}
+        aria-label=${o$4(this.ariaLabel ?? void 0)}
         part="wrapper"
       >
         ${this.progress !== void 0 ? this.progressSpinner : A}
@@ -7871,6 +7873,9 @@ __decorateClass$B3([
 __decorateClass$B3([
   n$3({ type: Boolean, attribute: false })
 ], ObcIconButton.prototype, "showDivider", 2);
+__decorateClass$B3([
+  n$3({ type: String, attribute: "aria-label" })
+], ObcIconButton.prototype, "ariaLabel", 2);
 ObcIconButton = __decorateClass$B3([
   customElement("obc-icon-button")
 ], ObcIconButton);
@@ -121932,6 +121937,7 @@ let ObcTopBar = class extends i$4 {
         b`<div class="menu-button">
           <obc-icon-button
             variant="flat"
+            aria-label=${msg("Close")}
             @pointerdown=${() => this.leftButtonDown(new CustomEvent("close"))}
             @pointerup=${() => this.leftButtonUp()}
             @pointerleave=${() => this.leftButtonLeave()}
@@ -121943,6 +121949,7 @@ let ObcTopBar = class extends i$4 {
       leftGroup.push(
         b`<obc-icon-button
           variant="flat"
+          aria-label=${msg("Back")}
           @click=${() => this.dispatchEvent(new CustomEvent("back"))}
         >
           <obi-arrow-left-google></obi-arrow-left-google>
@@ -121965,6 +121972,7 @@ let ObcTopBar = class extends i$4 {
           b`<div class="menu-button ${this.wideMenuButton ? "wide" : null}">
             <obc-icon-button
               variant="flat"
+              aria-label=${this.menuButtonIcon === "menu" ? msg("Menu") : msg("Home")}
               @pointerdown=${() => this.leftButtonDown(new CustomEvent("menu-button-clicked"))}
               @pointerup=${() => this.leftButtonUp()}
               @pointerleave=${() => this.leftButtonLeave()}
@@ -122049,6 +122057,7 @@ let ObcTopBar = class extends i$4 {
                 class="dimming-button"
                 part="dimming-button"
                 variant="flat"
+                aria-label=${msg("Dimming")}
                 @click=${this.dimmingButtonClicked}
                 ?activated=${this.dimmingButtonActivated}
               >
@@ -122058,6 +122067,7 @@ let ObcTopBar = class extends i$4 {
                 class="user-button"
                 variant="flat"
                 part="user-button"
+                aria-label=${msg("User")}
                 @click=${this.userButtonClicked}
                 ?activated=${this.userButtonActivated}
                 ?disabled=${this.userButtonDisabled}
@@ -122068,6 +122078,7 @@ let ObcTopBar = class extends i$4 {
                 class="apps-button"
                 variant="flat"
                 part="apps-button"
+                aria-label=${msg("Apps")}
                 @click=${this.appsButtonClicked}
                 ?activated=${this.appsButtonActivated}
               >
@@ -122078,6 +122089,7 @@ let ObcTopBar = class extends i$4 {
                 class="left-more-button"
                 part="left-more-button"
                 variant="flat"
+                aria-label=${msg("More")}
                 @click=${this.leftMoreButtonClicked}
                 ?activated=${this.leftMoreButtonActivated}
               >
@@ -217529,11 +217541,17 @@ let ObcIntegrationBarDropdown = class extends i$4 {
     super(...arguments);
     this.showHomeButton = false;
     this.homeButtonActivated = false;
+    this.showLinkButton = false;
+    this.linkButtonActivated = false;
     this.showClock = false;
+    this.showAlertButton = false;
+    this.alertButtonActivated = false;
     this.showNotificationButton = false;
     this.notificationButtonActivated = false;
     this.notificationCount = 0;
     this.showNotificationCount = false;
+    this.showScreenButton = false;
+    this.screenButtonActivated = false;
     this.showUserButton = false;
     this.userButtonActivated = false;
     this.showDimmingButton = false;
@@ -217560,60 +217578,90 @@ let ObcIntegrationBarDropdown = class extends i$4 {
     }
     return b`<div class="status">${result}</div>`;
   }
+  // The event name stays a literal at each call site so `cem analyze` can read it.
+  renderIconButton(name, activated, label, icon, onClick) {
+    return b`<obc-icon-button
+      class="${name}-button"
+      part="${name}-button"
+      variant="integration"
+      aria-label=${label}
+      @click=${onClick}
+      ?activated=${activated}
+    >
+      ${icon}
+    </obc-icon-button>`;
+  }
   render() {
     return b`
       <div class="wrapper">
         <div class="left-side">
-          ${this.showHomeButton ? b`<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.showHomeButton ? this.renderIconButton(
+      "home",
+      this.homeButtonActivated,
+      msg("Home"),
+      b`<obi-home></obi-home>`,
+      () => this.dispatchEvent(new CustomEvent("home-button-clicked"))
+    ) : A}
+          ${this.showLinkButton ? this.renderIconButton(
+      "link",
+      this.linkButtonActivated,
+      msg("Link"),
+      b`<obi-link></obi-link>`,
+      () => this.dispatchEvent(new CustomEvent("link-button-clicked"))
+    ) : A}
           <slot name="vessel-selector"></slot>
           ${this.renderStatusFields()}
         </div>
         <div class="right-side">
-          ${this.showNotificationButton ? b`<obc-notification-button
+          ${this.showAlertButton ? this.renderIconButton(
+      "alert",
+      this.alertButtonActivated,
+      msg("Alerts"),
+      b`<obi-alerts></obi-alerts>`,
+      () => this.dispatchEvent(new CustomEvent("alert-button-clicked"))
+    ) : A}
+          ${this.showNotificationButton ? (
+      // TODO(designer): keep the Enhanced badge button here, or match the
+      // sibling bar's plain notification icon button? (#624)
+      b`<obc-notification-button
                 @click=${() => this.dispatchEvent(
-      new CustomEvent("notification-button-clicked")
-    )}
+        new CustomEvent("notification-button-clicked")
+      )}
                 .buttonStyle=${NotificationButtonStyle.Enhanced}
                 .showCount=${this.showNotificationCount}
                 .count=${this.notificationCount}
                 ?isActive=${this.notificationButtonActivated}
-              ></obc-notification-button>` : A}
-          ${this.showSystemButton ? b`<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.showDimmingButton ? b`<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.showUserButton ? b`<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 ? b`<slot name="clock"></slot>` : null}
+              ></obc-notification-button>`
+    ) : A}
+          ${this.showScreenButton ? this.renderIconButton(
+      "screen",
+      this.screenButtonActivated,
+      msg("Screen"),
+      b`<obi-screen-desk></obi-screen-desk>`,
+      () => this.dispatchEvent(new CustomEvent("screen-button-clicked"))
+    ) : A}
+          ${this.showSystemButton ? this.renderIconButton(
+      "system",
+      this.systemButtonActivated,
+      msg("System"),
+      b`<obi-configure></obi-configure>`,
+      () => this.dispatchEvent(new CustomEvent("system-button-clicked"))
+    ) : A}
+          ${this.showDimmingButton ? this.renderIconButton(
+      "dimming",
+      this.dimmingButtonActivated,
+      msg("Dimming"),
+      b`<obi-palette-day-night-iec></obi-palette-day-night-iec>`,
+      () => this.dispatchEvent(new CustomEvent("dimming-button-clicked"))
+    ) : A}
+          ${this.showUserButton ? this.renderIconButton(
+      "user",
+      this.userButtonActivated,
+      msg("User"),
+      b`<obi-user></obi-user>`,
+      () => this.dispatchEvent(new CustomEvent("user-button-clicked"))
+    ) : A}
+          ${this.showClock ? b`<slot name="clock"></slot>` : A}
         </div>
       </div>
     `;
@@ -217626,9 +217674,21 @@ __decorateClass$$([
 __decorateClass$$([
   n$3({ type: Boolean })
 ], ObcIntegrationBarDropdown.prototype, "homeButtonActivated", 2);
+__decorateClass$$([
+  n$3({ type: Boolean })
+], ObcIntegrationBarDropdown.prototype, "showLinkButton", 2);
+__decorateClass$$([
+  n$3({ type: Boolean })
+], ObcIntegrationBarDropdown.prototype, "linkButtonActivated", 2);
 __decorateClass$$([
   n$3({ type: Boolean })
 ], ObcIntegrationBarDropdown.prototype, "showClock", 2);
+__decorateClass$$([
+  n$3({ type: Boolean })
+], ObcIntegrationBarDropdown.prototype, "showAlertButton", 2);
+__decorateClass$$([
+  n$3({ type: Boolean })
+], ObcIntegrationBarDropdown.prototype, "alertButtonActivated", 2);
 __decorateClass$$([
   n$3({ type: Boolean })
 ], ObcIntegrationBarDropdown.prototype, "showNotificationButton", 2);
@@ -217641,6 +217701,12 @@ __decorateClass$$([
 __decorateClass$$([
   n$3({ type: Boolean })
 ], ObcIntegrationBarDropdown.prototype, "showNotificationCount", 2);
+__decorateClass$$([
+  n$3({ type: Boolean })
+], ObcIntegrationBarDropdown.prototype, "showScreenButton", 2);
+__decorateClass$$([
+  n$3({ type: Boolean })
+], ObcIntegrationBarDropdown.prototype, "screenButtonActivated", 2);
 __decorateClass$$([
   n$3({ type: Boolean })
 ], ObcIntegrationBarDropdown.prototype, "showUserButton", 2);
@@ -218767,7 +218833,11 @@ let ObcIntegrationBar = class extends i$4 {
     return b`
       <nav class="wrapper">
         <div class="content-container">
-          ${!this.hideHomeButton ? b`<obc-icon-button class="home-button" variant="integration">
+          ${!this.hideHomeButton ? b`<obc-icon-button
+                class="home-button"
+                variant="integration"
+                aria-label=${msg("Home")}
+              >
                 <obi-home></obi-home>
               </obc-icon-button>` : null}
           ${this.showLinkButton ? b`<obc-icon-button
@@ -218777,6 +218847,7 @@ let ObcIntegrationBar = class extends i$4 {
     })}
                 part="link-button"
                 variant="integration"
+                aria-label=${msg("Link")}
                 @click=${() => this.dispatchEvent(new CustomEvent("link-button-clicked"))}
                 ?activated=${this.linkButtonActivated}
               >
@@ -218821,6 +218892,7 @@ let ObcIntegrationBar = class extends i$4 {
     })}
                 part="alert-button"
                 variant="integration"
+                aria-label=${msg("Alerts")}
                 style=${this.alertButtonActivated ? "anchor-name: --settings-menu-anchor;" : ""}
                 @click=${() => this.dispatchEvent(new CustomEvent("alert-button-clicked"))}
                 ?activated=${this.alertButtonActivated}
@@ -218834,6 +218906,7 @@ let ObcIntegrationBar = class extends i$4 {
     })}
                 part="notification-button"
                 variant="integration"
+                aria-label=${msg("Notifications")}
                 style=${this.notificationButtonActivated ? "anchor-name: --settings-menu-anchor;" : ""}
                 @click=${() => this.dispatchEvent(
       new CustomEvent("notification-button-clicked")
@@ -218849,6 +218922,7 @@ let ObcIntegrationBar = class extends i$4 {
     })}
                 part="screen-button"
                 variant="integration"
+                aria-label=${msg("Screen")}
                 style=${this.screenButtonActivated ? "anchor-name: --settings-menu-anchor;" : ""}
                 @click=${() => this.dispatchEvent(new CustomEvent("screen-button-clicked"))}
                 ?activated=${this.screenButtonActivated}
@@ -218862,6 +218936,7 @@ let ObcIntegrationBar = class extends i$4 {
     })}
                 part="system-button"
                 variant="integration"
+                aria-label=${msg("System")}
                 style=${this.systemButtonActivated ? "anchor-name: --settings-menu-anchor;" : ""}
                 @click=${() => this.dispatchEvent(new CustomEvent("system-button-clicked"))}
                 ?activated=${this.systemButtonActivated}
@@ -218875,6 +218950,7 @@ let ObcIntegrationBar = class extends i$4 {
     })}
                 part="dimming-button"
                 variant="integration"
+                aria-label=${msg("Dimming")}
                 style=${this.dimmingButtonActivated ? "anchor-name: --settings-menu-anchor;" : ""}
                 @click=${() => this.dispatchEvent(new CustomEvent("dimming-button-clicked"))}
                 ?activated=${this.dimmingButtonActivated}
@@ -218888,6 +218964,7 @@ let ObcIntegrationBar = class extends i$4 {
     })}
                 part="user-button"
                 variant="integration"
+                aria-label=${msg("User")}
                 style=${this.userButtonActivated ? "anchor-name: --settings-menu-anchor;" : ""}
                 @click=${() => this.dispatchEvent(new CustomEvent("user-button-clicked"))}
                 ?activated=${this.userButtonActivated}