@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.58 → 2.0.0-next.60

package/src/automation/automation-button/automation-button.css

@@ -7,6 +7,11 @@
   height: 0;
 }
 
+.button-wrapper {
+  width: fit-content;
+  height: fit-content;
+}
+
 .positioning-point {
   &.label-bottom {
     top: calc(var(--automation-components-button-touch-target-size) / -2);
@@ -230,8 +235,8 @@
 
 .alert-frame {
   position: absolute;
-  top: -1px;
-  right: -1px;
-  left: -1px;
-  bottom: -1px;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
 }

package/src/automation/automation-button/automation-button.ts

@@ -15,10 +15,12 @@ import '../../icons/icon-arrow-left-google.js';
 import '../../icons/icon-arrow-right-google.js';
 import '../../components/alert-frame/alert-frame.js';
 import {
-  ObcAlertFrameStatus,
   ObcAlertFrameThickness,
   ObcAlertFrameType,
+  ObcAlertFrameMode,
+  wrapWithAlertFrame,
 } from '../../components/alert-frame/alert-frame.js';
+import {AlertType} from '../../types.js';
 import {customElement} from '../../decorator.js';
 import {
   AutomationButtonReadoutStack,
@@ -102,8 +104,9 @@ export class ObcAutomationButton extends LitElement {
     ObcAlertFrameType.SmallSideFlip;
   @property({type: String}) alertFrameThickness: ObcAlertFrameThickness =
     ObcAlertFrameThickness.Small;
-  @property({type: String}) alertFrameStatus: ObcAlertFrameStatus =
-    ObcAlertFrameStatus.Alarm;
+  @property({type: String}) alertFrameStatus: AlertType = AlertType.Alarm;
+  @property({type: String}) alertFrameMode: ObcAlertFrameMode =
+    ObcAlertFrameMode.ackedActive;
   @property({type: Boolean, attribute: false}) showAlertCategoryIcon: boolean =
     true;
   @property({type: Boolean}) showAlertIcon: boolean = false;
@@ -165,12 +168,13 @@ export class ObcAutomationButton extends LitElement {
               ></obc-automation-button-readout-stack>
             `
           : nothing}
-        ${this.alert
+        ${this.alert && this.positioning === AutomationButtonPositioning.point
           ? html` <obc-alert-frame
               class="alert-frame"
               .type=${this.alertFrameType}
               .thickness=${this.alertFrameThickness}
               .status=${this.alertFrameStatus}
+              .mode=${this.alertFrameMode}
               .showAlertCategoryIcon=${this.showAlertCategoryIcon}
               .showIcon=${this.showAlertIcon}
             >
@@ -186,17 +190,31 @@ export class ObcAutomationButton extends LitElement {
   private wrapContent(content: HTMLTemplateResult): HTMLTemplateResult {
     if (this.positioning === AutomationButtonPositioning.point) {
       return html`<div class="point-wrapper">${content}</div>`;
-    } else if (this.positioning === AutomationButtonPositioning.symbol) {
+    }
+    const innerContent = wrapWithAlertFrame(
+      this.alert
+        ? {
+            type: this.alertFrameType,
+            thickness: this.alertFrameThickness,
+            status: this.alertFrameStatus,
+            mode: this.alertFrameMode,
+            showIcon: this.showAlertIcon,
+            showAlertCategoryIcon: this.showAlertCategoryIcon,
+          }
+        : false,
+      content
+    );
+    if (this.positioning === AutomationButtonPositioning.symbol) {
       return html`<div
         class=${classMap({
           'symbol-wrapper': true,
           ['label-' + this.readoutPosition]: true,
         })}
       >
-        ${content}
+        ${innerContent}
       </div> `;
     }
-    return content;
+    return innerContent;
   }
 
   static override styles = unsafeCSS(compentStyle);

package/src/automation/automation-tank/automation-tank.stories.ts

@@ -516,6 +516,28 @@ export const WithAlertCautionCompact: Story = {
   },
 };
 
+export const WithAlertIsaCritical: Story = {
+  ...WithAlertAlarm,
+  args: {
+    type: TankType.atmospheric,
+    alert: true,
+    alertFrameStatus: ObcAlertFrameStatus.IsaCritical,
+    alertFrameType: ObcAlertFrameType.SmallSideFlip,
+    badgeAlert: AutomationButtonBadgeAlert.IsaCritical,
+  },
+};
+
+export const WithAlertIsaDiagnostic: Story = {
+  ...WithAlertAlarm,
+  args: {
+    type: TankType.atmospheric,
+    alert: true,
+    alertFrameStatus: ObcAlertFrameStatus.IsaDiagnostic,
+    alertFrameType: ObcAlertFrameType.Regular,
+    badgeAlert: AutomationButtonBadgeAlert.IsaDiagnostic,
+  },
+};
+
 /**
  * Demonstrates `positioning="button"`: the tank host fills its parent
  * container (100% × 100%) with no P&ID anchor offset, so it behaves like a

package/src/automation/automation-tank/automation-tank.ts

@@ -30,10 +30,10 @@ import '../../building-blocks/bar-vertical/bar-vertical.js';
 import '../../components/alert-frame/alert-frame.js';
 import {Priority} from '../../navigation-instruments/types.js';
 import {
-  ObcAlertFrameStatus,
   ObcAlertFrameThickness,
   ObcAlertFrameType,
 } from '../../components/alert-frame/alert-frame.js';
+import {AlertType} from '../../types.js';
 import type {ChartLineDataItem} from '../../building-blocks/chart-line/chart-line-base.js';
 import type {LinearAdvice} from '../../building-blocks/instrument-linear/advice.js';
 import {
@@ -221,8 +221,7 @@ export class ObcAutomationTank extends LitElement {
     ObcAlertFrameType.SmallSideFlip;
   @property({type: String}) alertFrameThickness: ObcAlertFrameThickness =
     ObcAlertFrameThickness.Small;
-  @property({type: String}) alertFrameStatus: ObcAlertFrameStatus =
-    ObcAlertFrameStatus.Alarm;
+  @property({type: String}) alertFrameStatus: AlertType = AlertType.Alarm;
   @property({type: Boolean, attribute: false}) showAlertCategoryIcon: boolean =
     true;
   @property({type: Boolean}) showAlertIcon: boolean = false;
@@ -316,6 +315,16 @@ export class ObcAutomationTank extends LitElement {
         return ObcAutomationBadgeType.Warning;
       case AutomationButtonBadgeAlert.Alarm:
         return ObcAutomationBadgeType.Alarm;
+      case AutomationButtonBadgeAlert.IsaCritical:
+        return ObcAutomationBadgeType.IsaCritical;
+      case AutomationButtonBadgeAlert.IsaHigh:
+        return ObcAutomationBadgeType.IsaHigh;
+      case AutomationButtonBadgeAlert.IsaMedium:
+        return ObcAutomationBadgeType.IsaMedium;
+      case AutomationButtonBadgeAlert.IsaLow:
+        return ObcAutomationBadgeType.IsaLow;
+      case AutomationButtonBadgeAlert.IsaDiagnostic:
+        return ObcAutomationBadgeType.IsaDiagnostic;
       default:
         return null;
     }

package/src/components/accordion-card/accordion-card.css

@@ -205,4 +205,37 @@
 
 .alert {
   pointer-events: none;
+
+  /* z-index follows ALERT_SEVERITY_PRIORITY: more severe statuses stack on top. */
+  &.alert-isa-critical {
+    z-index: 8;
+  }
+
+  &.alert-alarm {
+    z-index: 7;
+  }
+
+  &.alert-isa-high {
+    z-index: 6;
+  }
+
+  &.alert-warning {
+    z-index: 5;
+  }
+
+  &.alert-isa-medium {
+    z-index: 4;
+  }
+
+  &.alert-caution {
+    z-index: 3;
+  }
+
+  &.alert-isa-low {
+    z-index: 2;
+  }
+
+  &.alert-isa-diagnostic {
+    z-index: 1;
+  }
 }

package/src/components/accordion-card/accordion-card.stories.ts

@@ -229,7 +229,7 @@ export const Multiple: Story = {
         .size="${AccordionSize.SingleLine}"
         .position="${Position.top}"
         .hasAlert=${true}
-        .alertFrameStatus="${ObcAlertFrameStatus.Warning}"
+        .alertFrameStatus="${ObcAlertFrameStatus.Alarm}"
       >
         <div slot="expanded-content">Placeholder text</div>
       </obc-accordion-card>
@@ -241,6 +241,7 @@ export const Multiple: Story = {
         .hasDescription=${true}
         .position="${Position.center}"
         .hasAlert=${true}
+        .alertFrameStatus="${ObcAlertFrameStatus.Warning}"
       >
         <div slot="expanded-content">Placeholder text</div>
       </obc-accordion-card>

package/src/components/accordion-card/accordion-card.ts

@@ -7,10 +7,10 @@ import '../../icons/icon-chevron-up-google.js';
 import '../../icons/icon-chevron-down-google.js';
 import '../alert-frame/alert-frame.js';
 import {
-  ObcAlertFrameStatus,
   ObcAlertFrameThickness,
   ObcAlertFrameType,
 } from '../alert-frame/alert-frame.js';
+import {AlertType} from '../../types.js';
 
 export enum AccordionSize {
   SingleLine = 'single-line',
@@ -188,8 +188,7 @@ export class ObcAccordionCard extends LitElement {
    * Status of the alert frame overlay (used when `hasAlert` is true).
    * See `obc-alert-frame` for available statuses.
    */
-  @property({type: String}) alertFrameStatus: ObcAlertFrameStatus =
-    ObcAlertFrameStatus.Alarm;
+  @property({type: String}) alertFrameStatus: AlertType = AlertType.Alarm;
 
   private get shouldShowDescription() {
     return (
@@ -304,7 +303,7 @@ export class ObcAccordionCard extends LitElement {
         ${this.hasAlert
           ? html`
               <obc-alert-frame
-                class="alert"
+                class="alert alert-${this.alertFrameStatus}"
                 .sharpEdgeTopLeft=${this.isShartEdgeTop()}
                 .sharpEdgeTopRight=${this.isShartEdgeTop()}
                 .sharpEdgeBottomLeft=${this.isShartEdgeBottom()}

package/src/components/alert-button/alert-button.css

@@ -89,6 +89,46 @@ button {
     }
   }
 
+  .type-enhanced.alert-type-isa-critical & {
+    @mixin style style=normal visibleWrapperClass=.blink;
+    @mixin style style=critical visibleWrapperClass=.visible-wrapper;
+    & .visible-wrapper {
+      color: var(--on-critical-active-color);
+    }
+  }
+
+  .type-enhanced.alert-type-isa-high & {
+    @mixin style style=normal visibleWrapperClass=.blink;
+    @mixin style style=alarm visibleWrapperClass=.visible-wrapper;
+    & .visible-wrapper {
+      color: var(--on-alarm-active-color);
+    }
+  }
+
+  .type-enhanced.alert-type-isa-medium & {
+    @mixin style style=normal visibleWrapperClass=.blink;
+    @mixin style style=warning visibleWrapperClass=.visible-wrapper;
+    & .visible-wrapper {
+      color: var(--on-warning-active-color);
+    }
+  }
+
+  .type-enhanced.alert-type-isa-low & {
+    @mixin style style=normal visibleWrapperClass=.blink;
+    @mixin style style=caution visibleWrapperClass=.visible-wrapper;
+    & .visible-wrapper {
+      color: var(--on-caution-active-color);
+    }
+  }
+
+  .type-enhanced.alert-type-isa-diagnostic & {
+    @mixin style style=normal visibleWrapperClass=.blink;
+    @mixin style style=notification visibleWrapperClass=.visible-wrapper;
+    & .visible-wrapper {
+      color: var(--on-notification-active-color);
+    }
+  }
+
   & .visible-wrapper,
   & .blink {
     border-radius: var(--ui-components-button-border-radius-top-left)
@@ -127,7 +167,29 @@ button {
   }
 }
 
-.blinking.alert-type-alarm .alert-button {
+.blinking.alert-type-warning .alert-button,
+.blinking.alert-type-isa-medium .alert-button {
+  .visible-wrapper {
+    opacity: var(--warning-blink-on);
+  }
+
+  .blink {
+    opacity: var(--warning-blink-off);
+  }
+}
+
+.blinking.alert-type-isa-critical .alert-button {
+  .visible-wrapper {
+    opacity: var(--critical-blink-on);
+  }
+
+  .blink {
+    opacity: var(--critical-blink-off);
+  }
+}
+
+.blinking.alert-type-alarm .alert-button,
+.blinking.alert-type-isa-high .alert-button {
   .visible-wrapper {
     opacity: var(--alarm-blink-on);
   }
@@ -137,13 +199,14 @@ button {
   }
 }
 
-.blinking.alert-type-warning .alert-button {
+.blinking.alert-type-caution .alert-button,
+.blinking.alert-type-isa-low .alert-button {
   .visible-wrapper {
-    opacity: var(--warning-blink-on);
+    opacity: var(--low-blink-on);
   }
 
   .blink {
-    opacity: var(--warning-blink-off);
+    opacity: var(--low-blink-off);
   }
 }
 
@@ -163,11 +226,32 @@ button {
   --icon-stroke: var(--warning-pressed-border-color);
 }
 
-.alert-type-caution {
+.alert-type-caution,
+.alert-type-isa-low {
   --icon-fill: var(--caution-enabled-background-color);
   --icon-stroke: var(--caution-pressed-border-color);
 }
 
+.alert-type-isa-critical {
+  --icon-fill: var(--alert-critical-color);
+  --icon-stroke: var(--alert-critical-outline-color);
+}
+
+.alert-type-isa-high {
+  --icon-fill: var(--alarm-enabled-background-color);
+  --icon-stroke: var(--alarm-pressed-border-color);
+}
+
+.alert-type-isa-medium {
+  --icon-fill: var(--warning-enabled-background-color);
+  --icon-stroke: var(--warning-pressed-border-color);
+}
+
+.alert-type-isa-diagnostic {
+  --icon-fill: var(--alert-diagnostic-color);
+  --icon-stroke: var(--alert-diagnostic-outline-color);
+}
+
 .silence-button {
   @mixin style style=normal visibleWrapperClass=.visible-wrapper;
   color: var(--on-normal-neutral-color);

package/src/components/alert-button/alert-button.stories.ts

@@ -207,3 +207,46 @@ export const EnhancedCaution: Story = {
     nAlerts: 3,
   },
 };
+
+export const EnhancedIsaCritical: Story = {
+  args: {
+    alertType: AlertType.IsaCritical,
+    type: ObcAlertButtonType.Enhanced,
+    nAlerts: 3,
+    blinking: true,
+  },
+};
+
+export const NormalIsaHigh: Story = {
+  args: {
+    alertType: AlertType.IsaHigh,
+    type: ObcAlertButtonType.Normal,
+    nAlerts: 2,
+    blinking: true,
+  },
+};
+
+export const NormalIsaMedium: Story = {
+  args: {
+    alertType: AlertType.IsaMedium,
+    type: ObcAlertButtonType.Normal,
+    nAlerts: 1,
+    blinking: true,
+  },
+};
+
+export const FlatIsaLow: Story = {
+  args: {
+    alertType: AlertType.IsaLow,
+    type: ObcAlertButtonType.Flat,
+    nAlerts: 1,
+  },
+};
+
+export const NormalIsaDiagnostic: Story = {
+  args: {
+    alertType: AlertType.IsaDiagnostic,
+    type: ObcAlertButtonType.Normal,
+    nAlerts: 1,
+  },
+};

package/src/components/alert-button/alert-button.ts

@@ -4,14 +4,20 @@ import compentStyle from './alert-button.css?inline';
 import '../../icons/icon-alerts.js';
 import '../../icons/icon-alerts-active.js';
 import '../../icons/icon-notification.js';
-import '../../icons/icon-notification-filled.js';
 import '../../icons/icon-notification-advice.js';
 import '../../icons/icon-notification-advice-active.js';
 import '../../icons/icon-silence-iec.js';
 import '../../icons/icon-alerts-alarm-twotone.js';
 import '../../icons/icon-alerts-warning-twotone.js';
 import '../../icons/icon-alerts-caution-twotone.js';
+import '../../manual-icon/icon-alerts-critical-twotone.js';
+import '../../manual-icon/icon-alerts-diagnostic-twotone.js';
 import {AlertType} from '../../types.js';
+import {
+  getAlertTwotoneComponent,
+  AlertTwotoneComponent,
+  supportsBlinking,
+} from '../../alert-severity.js';
 import {classMap} from 'lit/directives/class-map.js';
 import {customElement} from '../../decorator.js';
 
@@ -196,31 +202,48 @@ export class ObcAlertButton extends LitElement {
     super.disconnectedCallback();
   }
 
-  private alertIcon() {
-    const isIdle = this.nAlerts === 0;
-    if (isIdle) {
-      return html`<obi-alerts class="icon"></obi-alerts>`;
-    } else {
-      if (this.type === ObcAlertButtonType.Enhanced) {
-        return html`<obi-alerts-active class="icon"></obi-alerts-active>`;
-      } else if (this.alertType === AlertType.Alarm) {
-        return html`<obi-alerts-alarm-twotone
+  private renderAlertTwotoneIcon() {
+    const twotone = this.alertType
+      ? getAlertTwotoneComponent(this.alertType)
+      : AlertTwotoneComponent.Caution;
+    switch (twotone) {
+      case AlertTwotoneComponent.Critical:
+        return html`<obi-alerts-critical-twotone
           useCssColor
           class="icon"
-        ></obi-alerts-alarm-twotone>`;
-      } else if (this.alertType === AlertType.Warning) {
+        ></obi-alerts-critical-twotone>`;
+      case AlertTwotoneComponent.Diagnostic:
+        return html`<obi-alerts-diagnostic-twotone
+          useCssColor
+          class="icon"
+        ></obi-alerts-diagnostic-twotone>`;
+      case AlertTwotoneComponent.Warning:
         return html`<obi-alerts-warning-twotone
           useCssColor
           class="icon"
         ></obi-alerts-warning-twotone>`;
-      } else {
+      case AlertTwotoneComponent.Caution:
         return html`<obi-alerts-caution-twotone
           useCssColor
           class="icon"
         ></obi-alerts-caution-twotone>`;
-        //     }
-      }
+      default:
+        return html`<obi-alerts-alarm-twotone
+          useCssColor
+          class="icon"
+        ></obi-alerts-alarm-twotone>`;
+    }
+  }
+
+  private alertIcon() {
+    const isIdle = this.nAlerts === 0;
+    if (isIdle) {
+      return html`<obi-alerts class="icon"></obi-alerts>`;
+    }
+    if (this.type === ObcAlertButtonType.Enhanced) {
+      return html`<obi-alerts-active class="icon"></obi-alerts-active>`;
     }
+    return this.renderAlertTwotoneIcon();
   }
 
   private alertIconNegative() {
@@ -228,23 +251,8 @@ export class ObcAlertButton extends LitElement {
       this.nAlerts === 0 || this.type !== ObcAlertButtonType.Enhanced;
     if (useIdle) {
       return html`<obi-alerts class="icon"></obi-alerts>`;
-    } else if (this.alertType === AlertType.Alarm) {
-      return html`<obi-alerts-alarm-twotone
-        useCssColor
-        class="icon"
-      ></obi-alerts-alarm-twotone>`;
-    } else if (this.alertType === AlertType.Warning) {
-      return html`<obi-alerts-warning-twotone
-        useCssColor
-        class="icon"
-      ></obi-alerts-warning-twotone>`;
-    } else {
-      return html`<obi-alerts-caution-twotone
-        useCssColor
-        class="icon"
-      ></obi-alerts-caution-twotone>`;
-      //     }
     }
+    return this.renderAlertTwotoneIcon();
   }
 
   private get activeType(): ObcAlertButtonType {
@@ -270,7 +278,10 @@ export class ObcAlertButton extends LitElement {
     const showCounter =
       this.counter && hasAlerts && this.activeType !== ObcAlertButtonType.Flat;
     const showBlinking =
-      this.blinking && hasAlerts && this.alertType !== AlertType.Caution;
+      this.blinking &&
+      hasAlerts &&
+      this.alertType !== undefined &&
+      supportsBlinking(this.alertType);
     return html`
       <div
         class=${classMap({