@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.63 → 2.0.0-next.65

package/src/components/tree-navigation-group/tree-navigation-group.ts

@@ -7,8 +7,8 @@ import {
   TreeBranchType,
   TreeTerminalType,
 } from '../tree-navigation-item/tree-navigation-item.js';
+import type {TreeNavigationItemAlerts} from '../tree-navigation-item/tree-navigation-item.js';
 import '../tree-navigation-item/tree-navigation-item.js';
-import {BadgeType} from '../badge/badge.js';
 
 /**
  * `<obc-tree-navigation-group>` – An expandable parent row in a tree-navigation
@@ -16,7 +16,7 @@ import {BadgeType} from '../badge/badge.js';
  * child rows it discloses.
  *
  * A group renders an `<obc-tree-navigation-item>` header (carrying its own label,
- * icon, terminal type, and alert badge) followed by its slotted children. When
+ * icon, terminal type, and alert badges) followed by its slotted children. When
  * placed inside `<obc-tree-navigation>`, the container computes and assigns the
  * `branches` guide lines for every row automatically from each row's position —
  * a group does not need its depth configured by hand.
@@ -29,8 +29,7 @@ import {BadgeType} from '../badge/badge.js';
  * - **Disclosure:** A chevron in the header toggles the slotted children. The open
  *   state is held in `expanded` and reflected so the container and CSS can react.
  * - **Header presentation:** `label`, the `icon` slot, `terminalType`, and the
- *   alert badge (`hasAlertBadge`, `alertCount`, `alertType`) are forwarded to the
- *   header row.
+ *   `alerts` count map are forwarded to the header row.
  * - **Selection:** `checked` marks the group's header as the current item.
  * - **Automatic guides:** Inside `<obc-tree-navigation>`, the header's `branches`
  *   are assigned by the container; nested groups continue the guide columns down.
@@ -83,14 +82,13 @@ export class ObcTreeNavigationGroup extends LitElement {
    */
   @property({type: String}) terminalType: string = TreeTerminalType.regular;
 
-  /** Whether a trailing alert counter badge is shown on the header row. */
-  @property({type: Boolean}) hasAlertBadge = false;
-
-  /** The number shown in the header's alert badge when `hasAlertBadge` is true. */
-  @property({type: Number}) alertCount = 0;
-
-  /** The severity/type of the header's alert badge. One of the `obc-badge` types (default `alarm`). */
-  @property({type: String}) alertType: string = BadgeType.alarm;
+  /**
+   * Per-severity alert counts shown as trailing badge(s) on the header row.
+   * Forwarded verbatim to the header `<obc-tree-navigation-item>` — typically a
+   * group sets `{aggregate: true, ...}` so its header shows one badge totalling
+   * the alerts of the rows beneath it. See {@link TreeNavigationItemAlerts}.
+   */
+  @property({type: Object}) alerts?: TreeNavigationItemAlerts;
 
   /**
    * The URL to navigate to when the header is activated. If set, the header row
@@ -131,9 +129,7 @@ export class ObcTreeNavigationGroup extends LitElement {
         ?disabled=${this.disabled}
         .hasLeadingIcon=${this.hasIcon}
         .terminalType=${this.terminalType}
-        ?hasAlertBadge=${this.hasAlertBadge}
-        .alertCount=${this.alertCount}
-        .alertType=${this.alertType}
+        .alerts=${this.expanded ? undefined : this.alerts}
         .href=${this.href}
         @expand-toggle=${this.onHeaderToggle}
       >

package/src/components/tree-navigation-item/tree-navigation-item.css

@@ -253,6 +253,18 @@
   min-width: 0;
 }
 
+/*
+ * Trailing badge area. A row can carry more than one alert badge (e.g. a
+ * critical count beside a warning count); they sit in a flex row spaced by the
+ * shared alert-counter spacing token.
+ */
+.alert-badges {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--app-components-alert-counter-item-badge-spacing);
+}
+
 .alert-badge {
   flex-shrink: 0;
 }

package/src/components/tree-navigation-item/tree-navigation-item.stories.ts

@@ -7,7 +7,6 @@ import {
 import './tree-navigation-item.js';
 import {iconIds, iconIdToIconHtml} from '../../storybook-util.js';
 import {html} from 'lit';
-import {BadgeType} from '../badge/badge.js';
 
 const meta: Meta<typeof ObcTreeNavigationItem> = {
   title: 'UI Components/Menus and Navigation/Tree Navigation Item',
@@ -23,9 +22,7 @@ const meta: Meta<typeof ObcTreeNavigationItem> = {
     disabled: false,
     hasLeadingIcon: true,
     terminalType: TreeTerminalType.regular,
-    hasAlertBadge: false,
-    alertCount: 9,
-    alertType: BadgeType.alarm,
+    alerts: undefined,
   },
   argTypes: {
     icon: {
@@ -43,13 +40,7 @@ const meta: Meta<typeof ObcTreeNavigationItem> = {
       control: {type: 'select'},
       options: Object.values(TreeTerminalType),
     },
-    hasAlertBadge: {control: {type: 'boolean'}},
-    alertCount: {control: {type: 'number'}},
-    alertType: {
-      control: {type: 'select'},
-      options: Object.values(BadgeType),
-      if: {arg: 'hasAlertBadge'},
-    },
+    alerts: {control: {type: 'object'}},
   },
   render: (args) => {
     return html`<obc-tree-navigation-item
@@ -61,9 +52,7 @@ const meta: Meta<typeof ObcTreeNavigationItem> = {
       ?disabled=${args.disabled}
       .hasLeadingIcon=${args.hasLeadingIcon}
       .terminalType=${args.terminalType}
-      .hasAlertBadge=${args.hasAlertBadge}
-      .alertCount=${args.alertCount}
-      .alertType=${args.alertType}
+      .alerts=${args.alerts}
       @expand-toggle=${(e: CustomEvent<boolean>) => {
         (e.currentTarget as ObcTreeNavigationItem).expanded = e.detail;
       }}
@@ -106,8 +95,42 @@ export const IndentedNoConnectors: Story = {
   args: {branches: [TreeBranchType.blank, TreeBranchType.blank]},
 };
 
+/** A single alert badge from one non-zero count in the `alerts` map. */
 export const WithAlertBadge: Story = {
-  args: {hasAlertBadge: true, alertCount: 9},
+  args: {alerts: {countLevelHigh: 9}},
+};
+
+/**
+ * Several severities at once. With `aggregate` unset, each non-zero count
+ * renders its own badge, ordered most to least severe and spaced by
+ * `var(--app-components-alert-counter-item-badge-spacing)`.
+ */
+export const MultipleAlertBadges: Story = {
+  args: {
+    alerts: {
+      countLevelCritical: 1,
+      countLevelHigh: 3,
+      countLevelMedium: 12,
+      countLevelLow: 2,
+    },
+  },
+};
+
+/**
+ * The same counts as `MultipleAlertBadges`, but `aggregate: true` collapses them
+ * into one badge: the number is the combined total (18) and the style is the
+ * highest category present (level-critical).
+ */
+export const AggregatedAlertBadge: Story = {
+  args: {
+    alerts: {
+      aggregate: true,
+      countLevelCritical: 1,
+      countLevelHigh: 3,
+      countLevelMedium: 12,
+      countLevelLow: 2,
+    },
+  },
 };
 
 export const AggregatedHeader: Story = {

package/src/components/tree-navigation-item/tree-navigation-item.ts

@@ -8,7 +8,7 @@ import '../../icons/icon-chevron-right-google.js';
 import '../../icons/icon-alert-header-aggregated-iec.js';
 import '../../icons/icon-alert-header-group-iec.js';
 import '../badge/badge.js';
-import {BadgeType} from '../badge/badge.js';
+import {AlertType, ALERT_SEVERITY_PRIORITY} from '../../types.js';
 
 /**
  * Guide line drawn for one indentation column. Normally computed by
@@ -42,6 +42,39 @@ export enum TreeTerminalType {
   groupHeader = 'group-header',
 }
 
+/**
+ * Per-severity alert counts for a tree row's trailing badge(s). Each `count*`
+ * is the number of active alerts of that severity at or beneath the row — the
+ * level severities `level-critical`, `level-high`, `level-medium`, `level-low`,
+ * and `level-diagnostic`, plus the IEC severities `alarm`, `warning`, and
+ * `caution`. Badges are ordered and aggregated by the shared
+ * `ALERT_SEVERITY_PRIORITY` ranking, most to least severe.
+ *
+ * Set `aggregate` to collapse the counts into a single badge showing the total,
+ * styled as the highest category present; otherwise one badge is rendered per
+ * non-zero count.
+ */
+export interface TreeNavigationItemAlerts {
+  /** Collapse all counts into one badge: total count, highest-severity style. */
+  aggregate?: boolean;
+  /** Number of level-critical alerts. */
+  countLevelCritical?: number;
+  /** Number of alarm alerts. */
+  countAlarm?: number;
+  /** Number of level-high alerts. */
+  countLevelHigh?: number;
+  /** Number of warning alerts. */
+  countWarning?: number;
+  /** Number of level-medium alerts. */
+  countLevelMedium?: number;
+  /** Number of caution alerts. */
+  countCaution?: number;
+  /** Number of level-low alerts. */
+  countLevelLow?: number;
+  /** Number of level-diagnostic alerts. */
+  countLevelDiagnostic?: number;
+}
+
 /**
  * `<obc-tree-navigation-item>` – A single row in a tree- or file-explorer-style
  * navigation list, with indentation guide lines, an optional expand/collapse
@@ -66,8 +99,12 @@ export enum TreeTerminalType {
  *   aggregated or grouped alerts.
  * - **Leading icon:** Provide an icon via the `icon` slot (shown when
  *   `hasLeadingIcon`).
- * - **Alert badge:** A trailing counter badge (e.g. an alarm count), toggled with
- *   `hasAlertBadge` and configured via `alertCount` and `alertType`.
+ * - **Alert badges:** Trailing counter badges driven by the `alerts` object — a
+ *   per-severity count map with one field per level severity (critical, high,
+ *   medium, low, diagnostic). By default each non-zero count renders its own
+ *   badge, ordered most to least severe by `ALERT_SEVERITY_PRIORITY`; set
+ *   `alerts.aggregate` to instead show a single badge with the combined total,
+ *   styled as the highest category present.
  * - **Checked state:** `checked` highlights the current selection using the
  *   amplified elevation style. A checked row is the current item and is not
  *   re-selectable — it shows no hover/pressed feedback and fires no `click` or
@@ -142,14 +179,17 @@ export class ObcTreeNavigationItem extends LitElement {
    */
   @property({type: String}) terminalType: string = TreeTerminalType.regular;
 
-  /** Whether a trailing alert counter badge is shown. */
-  @property({type: Boolean}) hasAlertBadge = false;
-
-  /** The number shown in the alert badge when `hasAlertBadge` is true. */
-  @property({type: Number}) alertCount = 0;
-
-  /** The severity/type of the alert badge. One of the `obc-badge` types (default `alarm`). */
-  @property({type: String}) alertType: string = BadgeType.alarm;
+  /**
+   * Per-severity alert counts for the row's trailing badge(s). Omit (or leave
+   * every count at 0) for a row with no alerts. See {@link TreeNavigationItemAlerts}.
+   *
+   * - When `aggregate` is true, a single badge is shown: its number is the sum
+   *   of all counts and its severity is the highest category present
+   *   (critical → alarm → warning → caution).
+   * - Otherwise one badge is shown per count greater than 0, ordered most to
+   *   least severe and spaced by the alert-counter spacing token.
+   */
+  @property({type: Object}) alerts?: TreeNavigationItemAlerts;
 
   /**
    * The URL to navigate to when the row is activated. If set, the row renders as
@@ -164,6 +204,42 @@ export class ObcTreeNavigationItem extends LitElement {
     this.wrapperElement?.focus(options);
   }
 
+  /**
+   * The badge(s) to render from `alerts`, as `{type, count}` pairs already in
+   * severity order, ranked by `ALERT_SEVERITY_PRIORITY`.
+   *
+   * - No `alerts`, or every count 0 → no badges.
+   * - `aggregate` → a single pair: the summed count typed as the highest
+   *   category that has any alerts.
+   * - Otherwise → one pair per count greater than 0.
+   */
+  private get alertBadges(): {type: AlertType; count: number}[] {
+    const alerts = this.alerts;
+    if (!alerts) return [];
+    const countByType: Partial<Record<AlertType, number>> = {
+      [AlertType.LevelCritical]: alerts.countLevelCritical ?? 0,
+      [AlertType.Alarm]: alerts.countAlarm ?? 0,
+      [AlertType.LevelHigh]: alerts.countLevelHigh ?? 0,
+      [AlertType.Warning]: alerts.countWarning ?? 0,
+      [AlertType.LevelMedium]: alerts.countLevelMedium ?? 0,
+      [AlertType.Caution]: alerts.countCaution ?? 0,
+      [AlertType.LevelLow]: alerts.countLevelLow ?? 0,
+      [AlertType.LevelDiagnostic]: alerts.countLevelDiagnostic ?? 0,
+    };
+    // Order (and, when aggregating, rank) by the shared severity priority,
+    // keeping only the severities this component exposes.
+    const ranked = ALERT_SEVERITY_PRIORITY.filter(
+      (type) => type in countByType
+    ).map((type) => ({type, count: countByType[type] ?? 0}));
+    if (alerts.aggregate) {
+      const total = ranked.reduce((sum, b) => sum + b.count, 0);
+      const highest = ranked.find((b) => b.count > 0);
+      if (!highest) return [];
+      return [{type: highest.type, count: total}];
+    }
+    return ranked.filter((b) => b.count > 0);
+  }
+
   /** A root-level row has no ancestor columns, so it draws no connector lines. */
   private get isRoot(): boolean {
     return this.branches.length === 0;
@@ -283,12 +359,17 @@ export class ObcTreeNavigationItem extends LitElement {
               : nothing}
             <span part="label" class="label">${this.label}</span>
           </div>
-          ${this.hasAlertBadge
-            ? html`<obc-badge
-                class="alert-badge"
-                .type=${this.alertType}
-                .number=${this.alertCount}
-              ></obc-badge>`
+          ${this.alertBadges.length > 0
+            ? html`<div class="alert-badges">
+                ${this.alertBadges.map(
+                  (badge) =>
+                    html`<obc-badge
+                      class="alert-badge"
+                      .type=${badge.type}
+                      .number=${badge.count}
+                    ></obc-badge>`
+                )}
+              </div>`
             : nothing}
         </div>
       </div>

package/src/manual-icon/icon-alerts-critical-twotone.ts

@@ -3,7 +3,7 @@ import {property} from 'lit/decorators.js';
 import {customElement} from '../decorator.js';
 
 /**
- * `<obi-alerts-critical-twotone>` – Two-tone bell icon for the ISA "critical" alert severity.
+ * `<obi-alerts-critical-twotone>` – Two-tone bell icon for the level "critical" alert severity.
  *
  * Renders the alert (bell) glyph as a layered two-tone shape so the silhouette and
  * fill can be tinted independently. Used wherever a critical-severity alert needs an

package/src/manual-icon/icon-alerts-diagnostic-twotone.ts

@@ -3,7 +3,7 @@ import {property} from 'lit/decorators.js';
 import {customElement} from '../decorator.js';
 
 /**
- * `<obi-alerts-diagnostic-twotone>` – Two-tone bell icon for the ISA "diagnostic" alert severity.
+ * `<obi-alerts-diagnostic-twotone>` – Two-tone bell icon for the level "diagnostic" alert severity.
  *
  * Renders the alert (bell) glyph as a layered two-tone shape so the silhouette and
  * fill can be tinted independently. Used wherever a diagnostic-severity alert needs an

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

@@ -293,13 +293,13 @@ export const Alarm: Story = {
   render: (args) => renderComponent(args as ObcReadout),
 };
 
-export const IsaCritical: Story = {
+export const LevelCritical: Story = {
   args: {
     value: 42,
     label: 'RPM',
     unit: 'rpm',
     alert: {
-      status: 'isa-critical',
+      status: 'level-critical',
       mode: 'unacked-active',
     },
   },

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

@@ -468,22 +468,22 @@ export const Alarm: Story = {
   },
 };
 
-export const IsaCritical: Story = {
+export const LevelCritical: Story = {
   args: {
     value: 123,
     alert: {
-      status: AlertType.IsaCritical,
+      status: AlertType.LevelCritical,
       mode: ObcAlertFrameMode.unackedActive,
       type: ObcAlertFrameType.Regular,
     },
   },
 };
 
-export const IsaLowUnackedRectified: Story = {
+export const LevelLowUnackedRectified: Story = {
   args: {
     value: 123,
     alert: {
-      status: AlertType.IsaLow,
+      status: AlertType.LevelLow,
       mode: ObcAlertFrameMode.unackedRectified,
       type: ObcAlertFrameType.Regular,
     },

package/src/types.ts

@@ -9,22 +9,22 @@ export enum AlertType {
   Alarm = 'alarm',
   Warning = 'warning',
   Caution = 'caution',
-  IsaCritical = 'isa-critical',
-  IsaHigh = 'isa-high',
-  IsaMedium = 'isa-medium',
-  IsaLow = 'isa-low',
-  IsaDiagnostic = 'isa-diagnostic',
+  LevelCritical = 'level-critical',
+  LevelHigh = 'level-high',
+  LevelMedium = 'level-medium',
+  LevelLow = 'level-low',
+  LevelDiagnostic = 'level-diagnostic',
 }
 
 export const ALERT_SEVERITY_PRIORITY = [
-  AlertType.IsaCritical,
+  AlertType.LevelCritical,
   AlertType.Alarm,
-  AlertType.IsaHigh,
+  AlertType.LevelHigh,
   AlertType.Warning,
-  AlertType.IsaMedium,
+  AlertType.LevelMedium,
   AlertType.Caution,
-  AlertType.IsaLow,
-  AlertType.IsaDiagnostic,
+  AlertType.LevelLow,
+  AlertType.LevelDiagnostic,
 ];
 
 export enum AlertCategory {