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

package/src/automation/automation-badge/automation-badge.ts

@@ -32,8 +32,24 @@ export enum ObcAutomationBadgeType {
   Caution = 'caution',
   Warning = 'warning',
   Alarm = 'alarm',
+  IsaCritical = 'isa-critical',
+  IsaHigh = 'isa-high',
+  IsaMedium = 'isa-medium',
+  IsaLow = 'isa-low',
+  IsaDiagnostic = 'isa-diagnostic',
 }
 
+const ALERT_BADGE_TYPES: ObcAutomationBadgeType[] = [
+  ObcAutomationBadgeType.Caution,
+  ObcAutomationBadgeType.Warning,
+  ObcAutomationBadgeType.Alarm,
+  ObcAutomationBadgeType.IsaCritical,
+  ObcAutomationBadgeType.IsaHigh,
+  ObcAutomationBadgeType.IsaMedium,
+  ObcAutomationBadgeType.IsaLow,
+  ObcAutomationBadgeType.IsaDiagnostic,
+];
+
 @customElement('obc-automation-badge')
 export class ObcAutomationBadge extends LitElement {
   @property({type: String}) mode: ObcAutomationBadgeMode =
@@ -42,20 +58,81 @@ export class ObcAutomationBadge extends LitElement {
   @property({type: String}) type?: ObcAutomationBadgeType = undefined;
 
   private get effectiveMode() {
-    if (
-      this.type &&
-      [
-        ObcAutomationBadgeType.Caution,
-        ObcAutomationBadgeType.Warning,
-        ObcAutomationBadgeType.Alarm,
-      ].includes(this.type)
-    ) {
+    if (this.type && ALERT_BADGE_TYPES.includes(this.type)) {
       return ObcAutomationBadgeMode.Flat;
     } else {
       return this.mode;
     }
   }
 
+  private isAlertType(...types: ObcAutomationBadgeType[]): boolean {
+    return !!this.type && types.includes(this.type);
+  }
+
+  private renderIsaCriticalIcon(flat: boolean) {
+    if (flat) {
+      return html`<svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M14.667 8L11.3337 13.77H4.66634L1.33301 8L4.66634 2.23H11.3337L14.667 8Z"
+          fill="var(--critical-enabled-background-color)"
+        />
+        <path
+          d="M11.1543 2.72998H4.8457L2.51237 7.99998L4.8457 13.27H11.1543L13.4876 7.99998L11.1543 2.72998Z"
+          stroke="var(--critical-enabled-border-color)"
+        />
+        <path
+          d="M7.66754 10.3343V5.00098H9.00087V10.3343H7.66754Z"
+          fill="var(--on-critical-active-color)"
+        />
+        <path
+          d="M9.00087 11.6676H7.66754V13.001H9.00087V11.6676Z"
+          fill="var(--on-critical-active-color)"
+        />
+      </svg>`;
+    }
+    return html`<svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M2 0.5H14C14.8284 0.5 15.5 1.17157 15.5 2V14C15.5 14.8284 14.8284 15.5 14 15.5H2C1.17157 15.5 0.5 14.8284 0.5 14V2C0.5 1.17157 1.17157 0.5 2 0.5Z"
+        fill="var(--critical-enabled-background-color)"
+      />
+      <path
+        d="M2 0.5H14C14.8284 0.5 15.5 1.17157 15.5 2V14C15.5 14.8284 14.8284 15.5 14 15.5H2C1.17157 15.5 0.5 14.8284 0.5 14V2C0.5 1.17157 1.17157 0.5 2 0.5Z"
+        stroke="var(--critical-enabled-border-color)"
+      />
+      <path
+        d="M14 8L10.9282 13.33H5.0718L2 8L5.0718 2.67H10.9282L14 8Z"
+        fill="var(--on-critical-active-color)"
+      />
+    </svg>`;
+  }
+
+  private renderIsaDiagnosticIcon() {
+    return html`<svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M7 1.33301H9V7.53301L13.2147 5.13301L14.2147 6.86634L10 9.33301L14.2147 11.7997L13.2147 13.533L9 11.133V15.667H7V11.133L2.78534 13.533L1.78534 11.7997L6 9.33301L1.78534 6.86634L2.78534 5.13301L7 7.53301V1.33301Z"
+        fill="var(--notification-enabled-background-color)"
+      />
+    </svg>`;
+  }
+
   // TODO: replace the typo 'siluette' with 'silhouette', probably in Figma as well
   private getIcon() {
     if (this.type === ObcAutomationBadgeType.Auto) {
@@ -89,9 +166,18 @@ export class ObcAutomationBadge extends LitElement {
           class="icon siluette"
         ></obi-alert-off-filled
         ><obi-alert-off-filled class="icon"></obi-alert-off-filled>`;
+    } else if (this.type === ObcAutomationBadgeType.IsaCritical) {
+      return this.renderIsaCriticalIcon(
+        this.effectiveMode === ObcAutomationBadgeMode.Flat
+      );
+    } else if (this.type === ObcAutomationBadgeType.IsaDiagnostic) {
+      return this.renderIsaDiagnosticIcon();
     } else if (
-      this.type === ObcAutomationBadgeType.Caution &&
-      this.mode === ObcAutomationBadgeMode.Flat
+      this.isAlertType(
+        ObcAutomationBadgeType.Caution,
+        ObcAutomationBadgeType.IsaLow
+      ) &&
+      this.effectiveMode === ObcAutomationBadgeMode.Flat
     ) {
       return html`<svg
         width="16"
@@ -138,7 +224,12 @@ export class ObcAutomationBadge extends LitElement {
           fill="var(--on-caution-active-color)"
         />
       </svg>`;
-    } else if (this.type === ObcAutomationBadgeType.Caution) {
+    } else if (
+      this.isAlertType(
+        ObcAutomationBadgeType.Caution,
+        ObcAutomationBadgeType.IsaLow
+      )
+    ) {
       return html`<svg
         width="16"
         height="16"
@@ -160,8 +251,11 @@ export class ObcAutomationBadge extends LitElement {
         />
       </svg> `;
     } else if (
-      this.type === ObcAutomationBadgeType.Warning &&
-      this.mode === ObcAutomationBadgeMode.Flat
+      this.isAlertType(
+        ObcAutomationBadgeType.Warning,
+        ObcAutomationBadgeType.IsaMedium
+      ) &&
+      this.effectiveMode === ObcAutomationBadgeMode.Flat
     ) {
       return html`
         <svg
@@ -218,7 +312,12 @@ export class ObcAutomationBadge extends LitElement {
           />
         </svg>
       `;
-    } else if (this.type === ObcAutomationBadgeType.Warning) {
+    } else if (
+      this.isAlertType(
+        ObcAutomationBadgeType.Warning,
+        ObcAutomationBadgeType.IsaMedium
+      )
+    ) {
       return html`<svg
         width="16"
         height="16"
@@ -237,8 +336,11 @@ export class ObcAutomationBadge extends LitElement {
         <circle cx="8" cy="8" r="5" fill="var(--on-warning-active-color)" />
       </svg> `;
     } else if (
-      this.type === ObcAutomationBadgeType.Alarm &&
-      this.mode === ObcAutomationBadgeMode.Flat
+      this.isAlertType(
+        ObcAutomationBadgeType.Alarm,
+        ObcAutomationBadgeType.IsaHigh
+      ) &&
+      this.effectiveMode === ObcAutomationBadgeMode.Flat
     ) {
       return html`<svg
         width="16"
@@ -285,7 +387,12 @@ export class ObcAutomationBadge extends LitElement {
           fill="var(--on-alarm-active-color)"
         />
       </svg> `;
-    } else if (this.type === ObcAutomationBadgeType.Alarm) {
+    } else if (
+      this.isAlertType(
+        ObcAutomationBadgeType.Alarm,
+        ObcAutomationBadgeType.IsaHigh
+      )
+    ) {
       return html`
         <svg
           width="16"

package/src/automation/automation-button/abstract-automation-button-storybook-helpers.ts

@@ -2,6 +2,7 @@ import {
   ObcAlertFrameStatus,
   ObcAlertFrameThickness,
   ObcAlertFrameType,
+  ObcAlertFrameMode,
 } from '../../components/alert-frame/alert-frame.js';
 import {MotorizedVariant} from './abstract-automation-button-motorized.js';
 import {
@@ -33,6 +34,10 @@ export const argTypesAbstractAutomationButton = {
     options: Object.values(ObcAlertFrameType),
     control: {type: 'radio'},
   },
+  alertFrameMode: {
+    options: Object.values(ObcAlertFrameMode),
+    control: {type: 'radio'},
+  },
   alertFrameThickness: {
     options: Object.values(ObcAlertFrameThickness),
     control: {type: 'radio'},

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

@@ -13,10 +13,11 @@ import {
   AutomationButtonReadoutStackSize,
 } from '../../components/automation-button-readout-stack/automation-button-readout-stack.js';
 import {
-  ObcAlertFrameStatus,
   ObcAlertFrameThickness,
   ObcAlertFrameType,
+  ObcAlertFrameMode,
 } from '../../components/alert-frame/alert-frame.js';
+import {AlertType} from '../../types.js';
 import '../automation-badge/automation-badge.js';
 import {ObcAutomationBadgeType} from '../automation-badge/automation-badge.js';
 import {CircularProgressMode} from '../../building-blocks/circular-progress/circular-progress.js';
@@ -27,6 +28,11 @@ export enum AutomationButtonBadgeAlert {
   Caution = 'caution',
   Warning = 'warning',
   Alarm = 'alarm',
+  IsaCritical = 'isa-critical',
+  IsaHigh = 'isa-high',
+  IsaMedium = 'isa-medium',
+  IsaLow = 'isa-low',
+  IsaDiagnostic = 'isa-diagnostic',
 }
 
 export enum AutomationButtonBadgeInterlock {
@@ -62,8 +68,9 @@ export class ObcAbstractAutomationButton 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;
@@ -151,6 +158,16 @@ export class ObcAbstractAutomationButton extends LitElement {
       return ObcAutomationBadgeType.Warning;
     } else if (this.badgeAlert === AutomationButtonBadgeAlert.Alarm) {
       return ObcAutomationBadgeType.Alarm;
+    } else if (this.badgeAlert === AutomationButtonBadgeAlert.IsaCritical) {
+      return ObcAutomationBadgeType.IsaCritical;
+    } else if (this.badgeAlert === AutomationButtonBadgeAlert.IsaHigh) {
+      return ObcAutomationBadgeType.IsaHigh;
+    } else if (this.badgeAlert === AutomationButtonBadgeAlert.IsaMedium) {
+      return ObcAutomationBadgeType.IsaMedium;
+    } else if (this.badgeAlert === AutomationButtonBadgeAlert.IsaLow) {
+      return ObcAutomationBadgeType.IsaLow;
+    } else if (this.badgeAlert === AutomationButtonBadgeAlert.IsaDiagnostic) {
+      return ObcAutomationBadgeType.IsaDiagnostic;
     }
     return null;
   }
@@ -211,6 +228,7 @@ export class ObcAbstractAutomationButton extends LitElement {
       .alertFrameType=${this.alertFrameType}
       .alertFrameThickness=${this.alertFrameThickness}
       .alertFrameStatus=${this.alertFrameStatus}
+      .alertFrameMode=${this.alertFrameMode}
       .showAlertCategoryIcon=${this.showAlertCategoryIcon}
       .showAlertIcon=${this.showAlertIcon}
       ?progress=${this.progress}

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/building-blocks/instrument-radial/instrument-radial.stories.ts

@@ -21,6 +21,9 @@ const meta: Meta<typeof ObcInstrumentRadial> = {
     showLabels: {control: 'boolean'},
     minAngle: {control: false, table: {disable: true}},
     maxAngle: {control: false, table: {disable: true}},
+    // Only acts on labels at the horizontal ends (±90°), i.e. a 180° sweep.
+    // Hidden by default; the MaxMinEndLabels story re-enables it.
+    endLabelsMaxMin: {table: {disable: true}},
   },
 } satisfies Meta<ObcInstrumentRadial>;
 
@@ -92,6 +95,24 @@ export const WithLabels: Story = {
   },
 };
 
+// `endLabelsMaxMin` only repositions labels at the horizontal ends (±90°). This
+// 180° sweep puts the min/max labels there, so toggling `endLabelsMaxMin` (and
+// `tickmarksInside`) visibly moves them below/centered.
+export const MaxMinEndLabels: Story = {
+  args: {
+    value: 50,
+    maxValue: 100,
+    minValue: 0,
+    type: ObcGaugeRadialType.filled,
+    showLabels: true,
+    getAngle: (v: number) => (v / 100) * 180 - 90, // top 180° arc: 0 left, 100 right
+    endLabelsMaxMin: true,
+  },
+  argTypes: {
+    endLabelsMaxMin: {control: 'boolean', table: {disable: false}},
+  },
+};
+
 export const WithAdvices: Story = {
   args: {
     value: 50,