@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.57 → 2.0.0-next.59

package/src/alert-severity.ts

@@ -0,0 +1,225 @@
+/**
+ * `alert-severity` – Pure helper module mapping alert severities to their
+ * visual, behavioral, and acknowledgement semantics.
+ *
+ * Centralizes the per-`AlertType` decisions shared across alert-rendering
+ * components (badges, twotone icons, frames, lists) so that severity behavior
+ * stays consistent everywhere. Supports both the legacy severities
+ * (`alarm`, `warning`, `caution`) and the ISA severities
+ * (`isa-critical`, `isa-high`, `isa-medium`, `isa-low`, `isa-diagnostic`),
+ * collapsing the ISA set onto the legacy visual/blink treatments where they
+ * share styling.
+ *
+ * Features:
+ * - Color tokens: `getAlertColorTokens` returns background/border/on-active
+ *   CSS custom properties per severity.
+ * - Component selectors: `getAlertBadgeComponent` and
+ *   `getAlertTwotoneComponent` resolve the badge/icon element tag for a
+ *   severity.
+ * - Blinking: `supportsBlinking` reports whether a severity blinks,
+ *   `getAlertBlinkMode` resolves its blink mode, and
+ *   `getBamAlertTypeForBlinking` maps ISA severities onto the legacy type used
+ *   by the bridge alert management (BAM) blink machinery.
+ * - Acknowledgement & filtering: `requiresAcknowledgement` reports whether a
+ *   severity needs an ACK action, `excludedFromUnackedFilter` reports whether
+ *   it is hidden from the "unacked" view, and `usesAlarmNoAckIcon` selects the
+ *   alarm-style no-ack icon.
+ * - Priority: re-exports `ALERT_SEVERITY_PRIORITY`, the ordered severity list
+ *   (most → least severe) used to sort alerts.
+ *
+ * Usage:
+ * ```ts
+ * import {
+ *   getAlertColorTokens,
+ *   requiresAcknowledgement,
+ *   ALERT_SEVERITY_PRIORITY,
+ * } from './alert-severity.js';
+ * import {AlertType} from './types.js';
+ *
+ * const tokens = getAlertColorTokens(AlertType.IsaHigh);
+ * const needsAck = requiresAcknowledgement(AlertType.IsaLow); // true
+ * alerts.sort(
+ *   (a, b) =>
+ *     ALERT_SEVERITY_PRIORITY.indexOf(a.type) -
+ *     ALERT_SEVERITY_PRIORITY.indexOf(b.type)
+ * );
+ * ```
+ */
+import {AlertType, ALERT_SEVERITY_PRIORITY} from './types.js';
+
+export {ALERT_SEVERITY_PRIORITY};
+
+export enum AlertBadgeComponent {
+  Alarm = 'obi-alarm-badge',
+  Warning = 'obi-warning-badge',
+  Caution = 'obi-caution-badge',
+  Critical = 'obi-critical-badge',
+  Diagnostic = 'obi-diagnostic-badge',
+}
+
+export type AlertColorTokens = {
+  bg: string;
+  border: string;
+  onActive: string;
+};
+
+export function requiresAcknowledgement(type: AlertType): boolean {
+  return [
+    AlertType.Alarm,
+    AlertType.Warning,
+    AlertType.IsaCritical,
+    AlertType.IsaHigh,
+    AlertType.IsaMedium,
+    AlertType.IsaLow,
+  ].includes(type);
+}
+
+export function supportsBlinking(type: AlertType): boolean {
+  return [
+    AlertType.Alarm,
+    AlertType.Warning,
+    AlertType.IsaCritical,
+    AlertType.IsaHigh,
+    AlertType.IsaMedium,
+    AlertType.IsaLow,
+  ].includes(type);
+}
+
+export function getAlertSeverityCssClass(type: AlertType): string {
+  return type;
+}
+
+export function getAlertColorTokens(type: AlertType): AlertColorTokens {
+  switch (type) {
+    case AlertType.IsaCritical:
+      return {
+        bg: 'var(--critical-enabled-background-color)',
+        border: 'var(--critical-enabled-border-color)',
+        onActive: 'var(--on-critical-active-color)',
+      };
+    case AlertType.Warning:
+    case AlertType.IsaMedium:
+      return {
+        bg: 'var(--alert-warning-color)',
+        border: 'var(--alert-warning-outline-color)',
+        onActive: 'var(--on-warning-active-color)',
+      };
+    case AlertType.Caution:
+    case AlertType.IsaLow:
+      return {
+        bg: 'var(--alert-caution-color)',
+        border: 'var(--alert-caution-outline-color)',
+        onActive: 'var(--on-caution-active-color)',
+      };
+    case AlertType.IsaDiagnostic:
+      return {
+        bg: 'var(--notification-enabled-background-color)',
+        border: 'var(--notification-enabled-border-color)',
+        onActive: 'var(--on-notification-active-color)',
+      };
+    case AlertType.Alarm:
+    case AlertType.IsaHigh:
+    default:
+      return {
+        bg: 'var(--alert-alarm-color)',
+        border: 'var(--alert-alarm-outline-color)',
+        onActive: 'var(--on-alarm-active-color)',
+      };
+  }
+}
+
+export function getAlertBadgeComponent(type: AlertType): AlertBadgeComponent {
+  switch (type) {
+    case AlertType.IsaCritical:
+      return AlertBadgeComponent.Critical;
+    case AlertType.Warning:
+    case AlertType.IsaMedium:
+      return AlertBadgeComponent.Warning;
+    case AlertType.Caution:
+    case AlertType.IsaLow:
+      return AlertBadgeComponent.Caution;
+    case AlertType.IsaDiagnostic:
+      return AlertBadgeComponent.Diagnostic;
+    case AlertType.Alarm:
+    case AlertType.IsaHigh:
+    default:
+      return AlertBadgeComponent.Alarm;
+  }
+}
+
+export enum AlertTwotoneComponent {
+  Alarm = 'obi-alerts-alarm-twotone',
+  Warning = 'obi-alerts-warning-twotone',
+  Caution = 'obi-alerts-caution-twotone',
+  Critical = 'obi-alerts-critical-twotone',
+  Diagnostic = 'obi-alerts-diagnostic-twotone',
+}
+
+export function getAlertTwotoneComponent(
+  type: AlertType
+): AlertTwotoneComponent {
+  switch (type) {
+    case AlertType.IsaCritical:
+      return AlertTwotoneComponent.Critical;
+    case AlertType.IsaDiagnostic:
+      return AlertTwotoneComponent.Diagnostic;
+    case AlertType.Warning:
+    case AlertType.IsaMedium:
+      return AlertTwotoneComponent.Warning;
+    case AlertType.Caution:
+    case AlertType.IsaLow:
+      return AlertTwotoneComponent.Caution;
+    case AlertType.Alarm:
+    case AlertType.IsaHigh:
+    default:
+      return AlertTwotoneComponent.Alarm;
+  }
+}
+
+export enum AlertBlinkMode {
+  Critical = 'critical',
+  Alarm = 'alarm',
+  Warning = 'warning',
+  Low = 'low',
+}
+
+export function getAlertBlinkMode(type: AlertType): AlertBlinkMode {
+  switch (type) {
+    case AlertType.IsaCritical:
+      return AlertBlinkMode.Critical;
+    case AlertType.Warning:
+    case AlertType.IsaMedium:
+      return AlertBlinkMode.Warning;
+    case AlertType.Caution:
+    case AlertType.IsaLow:
+      return AlertBlinkMode.Low;
+    case AlertType.Alarm:
+    case AlertType.IsaHigh:
+    default:
+      return AlertBlinkMode.Alarm;
+  }
+}
+
+export function getBamAlertTypeForBlinking(type: AlertType): AlertType {
+  switch (type) {
+    case AlertType.IsaCritical:
+    case AlertType.IsaHigh:
+      return AlertType.Alarm;
+    case AlertType.IsaMedium:
+      return AlertType.Warning;
+    case AlertType.IsaLow:
+      return AlertType.Caution;
+    default:
+      return type;
+  }
+}
+
+export function excludedFromUnackedFilter(type: AlertType): boolean {
+  return [AlertType.Caution, AlertType.IsaDiagnostic].includes(type);
+}
+
+export function usesAlarmNoAckIcon(type: AlertType): boolean {
+  return [AlertType.Alarm, AlertType.IsaCritical, AlertType.IsaHigh].includes(
+    type
+  );
+}

package/src/ar/building-blocks/poi-header/poi-header.css

@@ -31,26 +31,44 @@
   border: 1px solid var(--overlay-border-outline-color);
 }
 
-.wrapper.type-id.state-caution {
+.wrapper.type-id.state-caution,
+.wrapper.type-id.state-isa-low {
   background: var(--alert-caution-color);
   border: 1px solid var(--alert-caution-outline-color);
 }
 
-.wrapper.type-id.state-warning {
+.wrapper.type-id.state-warning,
+.wrapper.type-id.state-isa-medium {
   background: var(--alert-warning-color);
   border: 1px solid var(--alert-warning-outline-color);
 }
 
-.wrapper.type-id.state-alarm {
+.wrapper.type-id.state-alarm,
+.wrapper.type-id.state-isa-high {
   background: var(--alert-alarm-color);
   border: 1px solid var(--alert-alarm-outline-color);
 }
 
+.wrapper.type-id.state-isa-critical {
+  background: var(--critical-enabled-background-color);
+  border: 1px solid var(--critical-enabled-border-color);
+}
+
+.wrapper.type-id.state-isa-diagnostic {
+  background: var(--notification-enabled-background-color);
+  border: 1px solid var(--notification-enabled-border-color);
+}
+
 .wrapper.type-data:is(
     .state-selected,
     .state-caution,
     .state-warning,
-    .state-alarm
+    .state-alarm,
+    .state-isa-critical,
+    .state-isa-high,
+    .state-isa-medium,
+    .state-isa-low,
+    .state-isa-diagnostic
   ) {
   background: var(--overlay-container-background-color);
   border: 1px solid var(--overlay-border-outline-color);
@@ -104,21 +122,34 @@
   border: 1px solid var(--overlay-border-outline-color);
 }
 
-.wrapper.type-data.state-caution .id-pill {
+.wrapper.type-data.state-caution .id-pill,
+.wrapper.type-data.state-isa-low .id-pill {
   background: var(--alert-caution-color);
   border: 1px solid var(--alert-caution-outline-color);
 }
 
-.wrapper.type-data.state-warning .id-pill {
+.wrapper.type-data.state-warning .id-pill,
+.wrapper.type-data.state-isa-medium .id-pill {
   background: var(--alert-warning-color);
   border: 1px solid var(--alert-warning-outline-color);
 }
 
-.wrapper.type-data.state-alarm .id-pill {
+.wrapper.type-data.state-alarm .id-pill,
+.wrapper.type-data.state-isa-high .id-pill {
   background: var(--alert-alarm-color);
   border: 1px solid var(--alert-alarm-outline-color);
 }
 
+.wrapper.type-data.state-isa-critical .id-pill {
+  background: var(--critical-enabled-background-color);
+  border: 1px solid var(--critical-enabled-border-color);
+}
+
+.wrapper.type-data.state-isa-diagnostic .id-pill {
+  background: var(--notification-enabled-background-color);
+  border: 1px solid var(--notification-enabled-border-color);
+}
+
 .id-text {
   @mixin font-label-active;
   text-align: center;

package/src/ar/building-blocks/poi-header/poi-header.ts

@@ -14,6 +14,11 @@ export enum ObcPoiHeaderState {
   Caution = 'caution',
   Warning = 'warning',
   Alarm = 'alarm',
+  IsaCritical = 'isa-critical',
+  IsaHigh = 'isa-high',
+  IsaMedium = 'isa-medium',
+  IsaLow = 'isa-low',
+  IsaDiagnostic = 'isa-diagnostic',
 }
 
 export enum ObcPoiHeaderType {
@@ -32,7 +37,7 @@ export enum ObcPoiHeaderType {
  * - `type` (default `id`):
  *   - `id`: shows identifier content only.
  *   - `data`: shows identifier plus secondary label.
- * - `state` (default `enabled`): `enabled`, `selected`, `caution`, `warning`, `alarm`.
+ * - `state` (default `enabled`): `enabled`, `selected`, `caution`, `warning`, `alarm`, `isa-critical`, `isa-high`, `isa-medium`, `isa-low`, `isa-diagnostic`.
  * - `content` (default `"1"`): primary identifier text.
  * - `label` (default `"Data"`): secondary text used by `type="data"`.
  * - `hasIndicator` (default `false`): appends indicator area.

package/src/ar/poi-button/poi-button.css

@@ -119,15 +119,25 @@
     }
   }
 
-  &.alert-caution {
+  &.alert-alarm,
+  &.alert-isa-high {
     .alert-ring {
-      background: var(--alert-caution-color);
-      border-color: var(--alert-caution-outline-color);
-      outline-color: var(--alert-caution-outline-color);
+      background: var(--alert-alarm-color);
+      border-color: var(--alert-alarm-outline-color);
+      outline-color: var(--alert-alarm-outline-color);
+    }
+  }
+
+  &.alert-isa-critical {
+    .alert-ring {
+      background: var(--critical-enabled-background-color);
+      border-color: var(--critical-enabled-border-color);
+      outline-color: var(--critical-enabled-border-color);
     }
   }
 
-  &.alert-warning {
+  &.alert-warning,
+  &.alert-isa-medium {
     .alert-ring {
       background: var(--alert-warning-color);
       border-color: var(--alert-warning-outline-color);
@@ -135,11 +145,20 @@
     }
   }
 
-  &.alert-alarm {
+  &.alert-caution,
+  &.alert-isa-low {
     .alert-ring {
-      background: var(--alert-alarm-color);
-      border-color: var(--alert-alarm-outline-color);
-      outline-color: var(--alert-alarm-outline-color);
+      background: var(--alert-caution-color);
+      border-color: var(--alert-caution-outline-color);
+      outline-color: var(--alert-caution-outline-color);
+    }
+  }
+
+  &.alert-isa-diagnostic {
+    .alert-ring {
+      background: var(--notification-enabled-background-color);
+      border-color: var(--notification-enabled-border-color);
+      outline-color: var(--notification-enabled-border-color);
     }
   }
 
@@ -245,52 +264,101 @@
 
 /* Overlap alert color styles */
 .wrapper.value-overlapped {
-  &.alert-caution {
-    --overlay-container-background-color: var(--alert-caution-color, #ffdb42);
-    --overlay-border-outline-color: var(--alert-caution-outline-color);
+  &.alert-alarm,
+  &.alert-isa-high {
+    --overlay-container-background-color: var(--alert-alarm-color, #e30019);
+    --overlay-border-outline-color: var(--alert-alarm-outline-color);
   }
 
-  &.alert-caution .poi-object {
-    --overlay-container-background-color: var(--alert-caution-color, #ffdb42);
-    --overlay-border-outline-color: var(--alert-caution-outline-color);
+  &.alert-alarm .poi-object,
+  &.alert-isa-high .poi-object {
+    --overlay-container-background-color: var(--alert-alarm-color, #e30019);
+    --overlay-border-outline-color: var(--alert-alarm-outline-color);
+  }
+
+  &.alert-isa-critical {
+    --overlay-container-background-color: var(
+      --critical-enabled-background-color
+    );
+    --overlay-border-outline-color: var(--critical-enabled-border-color);
   }
 
-  &.alert-warning {
+  &.alert-isa-critical .poi-object {
+    --overlay-container-background-color: var(
+      --critical-enabled-background-color
+    );
+    --overlay-border-outline-color: var(--critical-enabled-border-color);
+  }
+
+  &.alert-warning,
+  &.alert-isa-medium {
     --overlay-container-background-color: var(--alert-warning-color, #fe9413);
     --overlay-border-outline-color: var(--alert-warning-outline-color);
   }
 
-  &.alert-warning .poi-object {
+  &.alert-warning .poi-object,
+  &.alert-isa-medium .poi-object {
     --overlay-container-background-color: var(--alert-warning-color, #fe9413);
     --overlay-border-outline-color: var(--alert-warning-outline-color);
   }
 
-  &.alert-alarm {
-    --overlay-container-background-color: var(--alert-alarm-color, #e30019);
-    --overlay-border-outline-color: var(--alert-alarm-outline-color);
+  &.alert-caution,
+  &.alert-isa-low {
+    --overlay-container-background-color: var(--alert-caution-color, #ffdb42);
+    --overlay-border-outline-color: var(--alert-caution-outline-color);
   }
 
-  &.alert-alarm .poi-object {
-    --overlay-container-background-color: var(--alert-alarm-color, #e30019);
-    --overlay-border-outline-color: var(--alert-alarm-outline-color);
+  &.alert-caution .poi-object,
+  &.alert-isa-low .poi-object {
+    --overlay-container-background-color: var(--alert-caution-color, #ffdb42);
+    --overlay-border-outline-color: var(--alert-caution-outline-color);
+  }
+
+  &.alert-isa-diagnostic {
+    --overlay-container-background-color: var(
+      --notification-enabled-background-color
+    );
+    --overlay-border-outline-color: var(--notification-enabled-border-color);
+  }
+
+  &.alert-isa-diagnostic .poi-object {
+    --overlay-container-background-color: var(
+      --notification-enabled-background-color
+    );
+    --overlay-border-outline-color: var(--notification-enabled-border-color);
   }
 }
 
-.wrapper.value-overlapped.alert-caution .poi-object::part(background-frame) {
+.wrapper.value-overlapped.alert-caution .poi-object::part(background-frame),
+.wrapper.value-overlapped.alert-isa-low .poi-object::part(background-frame) {
   background-color: var(--alert-caution-color, #ffdb42);
   border-color: var(--alert-caution-outline-color);
 }
 
-.wrapper.value-overlapped.alert-warning .poi-object::part(background-frame) {
+.wrapper.value-overlapped.alert-warning .poi-object::part(background-frame),
+.wrapper.value-overlapped.alert-isa-medium .poi-object::part(background-frame) {
   background-color: var(--alert-warning-color, #fe9413);
   border-color: var(--alert-warning-outline-color);
 }
 
-.wrapper.value-overlapped.alert-alarm .poi-object::part(background-frame) {
+.wrapper.value-overlapped.alert-alarm .poi-object::part(background-frame),
+.wrapper.value-overlapped.alert-isa-high .poi-object::part(background-frame) {
   background-color: var(--alert-alarm-color, #e30019);
   border-color: var(--alert-alarm-outline-color);
 }
 
+.wrapper.value-overlapped.alert-isa-critical
+  .poi-object::part(background-frame) {
+  background-color: var(--critical-enabled-background-color);
+  border-color: var(--critical-enabled-border-color);
+}
+
+.wrapper.value-overlapped.alert-isa-diagnostic
+  .poi-object::part(background-frame) {
+  background-color: var(--notification-enabled-background-color);
+  border-color: var(--notification-enabled-border-color);
+}
+
 ::slotted(:not([slot])) {
   width: 100%;
   height: 100%;
@@ -317,20 +385,33 @@
       display: none;
     }
 
-    .alert-caution & {
+    .alert-caution &,
+    .alert-isa-low & {
       border-color: var(--alert-caution-outline-color);
       outline-color: var(--alert-caution-color);
     }
 
-    .alert-warning & {
+    .alert-warning &,
+    .alert-isa-medium & {
       border-color: var(--alert-warning-outline-color);
       outline-color: var(--alert-warning-color);
     }
 
-    .alert-alarm & {
+    .alert-alarm &,
+    .alert-isa-high & {
       border-color: var(--alert-alarm-outline-color);
       outline-color: var(--alert-alarm-color);
     }
+
+    .alert-isa-critical & {
+      border-color: var(--critical-enabled-border-color);
+      outline-color: var(--critical-enabled-background-color);
+    }
+
+    .alert-isa-diagnostic & {
+      border-color: var(--notification-enabled-border-color);
+      outline-color: var(--notification-enabled-background-color);
+    }
   }
 
   .id-label {
@@ -405,21 +486,34 @@
   opacity: var(--obc-poi-overlap-wrapper-opacity, 0.6);
 }
 
-.wrapper.value-overlapped.has-data.alert-caution {
+.wrapper.value-overlapped.has-data.alert-caution,
+.wrapper.value-overlapped.has-data.alert-isa-low {
   background: var(--alert-caution-color, #ffdb42);
   border-color: var(--alert-caution-outline-color);
 }
 
-.wrapper.value-overlapped.has-data.alert-warning {
+.wrapper.value-overlapped.has-data.alert-warning,
+.wrapper.value-overlapped.has-data.alert-isa-medium {
   background: var(--alert-warning-color, #fe9413);
   border-color: var(--alert-warning-outline-color);
 }
 
-.wrapper.value-overlapped.has-data.alert-alarm {
+.wrapper.value-overlapped.has-data.alert-alarm,
+.wrapper.value-overlapped.has-data.alert-isa-high {
   background: var(--alert-alarm-color, #e30019);
   border-color: var(--alert-alarm-outline-color);
 }
 
+.wrapper.value-overlapped.has-data.alert-isa-critical {
+  background: var(--critical-enabled-background-color);
+  border-color: var(--critical-enabled-border-color);
+}
+
+.wrapper.value-overlapped.has-data.alert-isa-diagnostic {
+  background: var(--notification-enabled-background-color);
+  border-color: var(--notification-enabled-border-color);
+}
+
 .wrapper.value-overlapped:not(.layout-inline).has-data {
   width: var(--maneuvering-components-poi-button-touch-target, 48px);
   min-width: var(--maneuvering-components-poi-button-touch-target, 48px);

package/src/ar/poi-button/poi-button.ts

@@ -34,6 +34,11 @@ export enum ObcPoiButtonState {
   Caution = 'caution',
   Warning = 'warning',
   Alarm = 'alarm',
+  IsaCritical = 'isa-critical',
+  IsaHigh = 'isa-high',
+  IsaMedium = 'isa-medium',
+  IsaLow = 'isa-low',
+  IsaDiagnostic = 'isa-diagnostic',
 }
 
 export enum PoiButtonVisualState {
@@ -90,7 +95,7 @@ export interface ObcPoiButtonDataItem {
  * - `layout` (default `anchored`): `anchored` or `inline`.
  * - `value` (default `unchecked`): `unchecked`, `checked`, `activated`, `overlapped`.
  * - `overlapOpaque` (default `false`): controls overlapped opacity mode (`false` = translucent, `true` = opaque).
- * - `state` (default `enabled`): `enabled`, `caution`, `warning`, `alarm`.
+ * - `state` (default `enabled`): `enabled`, `caution`, `warning`, `alarm`, `isa-critical`, `isa-high`, `isa-medium`, `isa-low`, `isa-diagnostic`.
  * - `selected` (default `false`): shows selection frame in anchored layout.
  * - `relativeDirection` (default `0`): rotates default-slot icon content in degrees.
  * - `data` (default `[]`): when non-empty, renders value/label/unit rows.
@@ -207,6 +212,16 @@ export class ObcPoiButton extends LitElement {
         return ObcPoiHeaderState.Warning;
       case ObcPoiButtonState.Alarm:
         return ObcPoiHeaderState.Alarm;
+      case ObcPoiButtonState.IsaCritical:
+        return ObcPoiHeaderState.IsaCritical;
+      case ObcPoiButtonState.IsaHigh:
+        return ObcPoiHeaderState.IsaHigh;
+      case ObcPoiButtonState.IsaMedium:
+        return ObcPoiHeaderState.IsaMedium;
+      case ObcPoiButtonState.IsaLow:
+        return ObcPoiHeaderState.IsaLow;
+      case ObcPoiButtonState.IsaDiagnostic:
+        return ObcPoiHeaderState.IsaDiagnostic;
       case ObcPoiButtonState.Enabled:
       default:
         return ObcPoiHeaderState.Selected;

package/src/ar/types.ts

@@ -3,4 +3,9 @@ export enum ObcArAlertType {
   Caution = 'caution',
   Warning = 'warning',
   Alarm = 'alarm',
+  IsaCritical = 'isa-critical',
+  IsaHigh = 'isa-high',
+  IsaMedium = 'isa-medium',
+  IsaLow = 'isa-low',
+  IsaDiagnostic = 'isa-diagnostic',
 }