@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.62 → 2.0.0-next.64

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

@@ -120,7 +120,7 @@
   }
 
   &.alert-alarm,
-  &.alert-isa-high {
+  &.alert-level-high {
     .alert-ring {
       background: var(--alert-alarm-color);
       border-color: var(--alert-alarm-outline-color);
@@ -128,7 +128,7 @@
     }
   }
 
-  &.alert-isa-critical {
+  &.alert-level-critical {
     .alert-ring {
       background: var(--critical-enabled-background-color);
       border-color: var(--critical-enabled-border-color);
@@ -137,7 +137,7 @@
   }
 
   &.alert-warning,
-  &.alert-isa-medium {
+  &.alert-level-medium {
     .alert-ring {
       background: var(--alert-warning-color);
       border-color: var(--alert-warning-outline-color);
@@ -146,7 +146,7 @@
   }
 
   &.alert-caution,
-  &.alert-isa-low {
+  &.alert-level-low {
     .alert-ring {
       background: var(--alert-caution-color);
       border-color: var(--alert-caution-outline-color);
@@ -154,7 +154,7 @@
     }
   }
 
-  &.alert-isa-diagnostic {
+  &.alert-level-diagnostic {
     .alert-ring {
       background: var(--notification-enabled-background-color);
       border-color: var(--notification-enabled-border-color);
@@ -265,25 +265,25 @@
 /* Overlap alert color styles */
 .wrapper.value-overlapped {
   &.alert-alarm,
-  &.alert-isa-high {
+  &.alert-level-high {
     --overlay-container-background-color: var(--alert-alarm-color, #e30019);
     --overlay-border-outline-color: var(--alert-alarm-outline-color);
   }
 
   &.alert-alarm .poi-object,
-  &.alert-isa-high .poi-object {
+  &.alert-level-high .poi-object {
     --overlay-container-background-color: var(--alert-alarm-color, #e30019);
     --overlay-border-outline-color: var(--alert-alarm-outline-color);
   }
 
-  &.alert-isa-critical {
+  &.alert-level-critical {
     --overlay-container-background-color: var(
       --critical-enabled-background-color
     );
     --overlay-border-outline-color: var(--critical-enabled-border-color);
   }
 
-  &.alert-isa-critical .poi-object {
+  &.alert-level-critical .poi-object {
     --overlay-container-background-color: var(
       --critical-enabled-background-color
     );
@@ -291,37 +291,37 @@
   }
 
   &.alert-warning,
-  &.alert-isa-medium {
+  &.alert-level-medium {
     --overlay-container-background-color: var(--alert-warning-color, #fe9413);
     --overlay-border-outline-color: var(--alert-warning-outline-color);
   }
 
   &.alert-warning .poi-object,
-  &.alert-isa-medium .poi-object {
+  &.alert-level-medium .poi-object {
     --overlay-container-background-color: var(--alert-warning-color, #fe9413);
     --overlay-border-outline-color: var(--alert-warning-outline-color);
   }
 
   &.alert-caution,
-  &.alert-isa-low {
+  &.alert-level-low {
     --overlay-container-background-color: var(--alert-caution-color, #ffdb42);
     --overlay-border-outline-color: var(--alert-caution-outline-color);
   }
 
   &.alert-caution .poi-object,
-  &.alert-isa-low .poi-object {
+  &.alert-level-low .poi-object {
     --overlay-container-background-color: var(--alert-caution-color, #ffdb42);
     --overlay-border-outline-color: var(--alert-caution-outline-color);
   }
 
-  &.alert-isa-diagnostic {
+  &.alert-level-diagnostic {
     --overlay-container-background-color: var(
       --notification-enabled-background-color
     );
     --overlay-border-outline-color: var(--notification-enabled-border-color);
   }
 
-  &.alert-isa-diagnostic .poi-object {
+  &.alert-level-diagnostic .poi-object {
     --overlay-container-background-color: var(
       --notification-enabled-background-color
     );
@@ -330,30 +330,31 @@
 }
 
 .wrapper.value-overlapped.alert-caution .poi-object::part(background-frame),
-.wrapper.value-overlapped.alert-isa-low .poi-object::part(background-frame) {
+.wrapper.value-overlapped.alert-level-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-isa-medium .poi-object::part(background-frame) {
+.wrapper.value-overlapped.alert-level-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-isa-high .poi-object::part(background-frame) {
+.wrapper.value-overlapped.alert-level-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
+.wrapper.value-overlapped.alert-level-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
+.wrapper.value-overlapped.alert-level-diagnostic
   .poi-object::part(background-frame) {
   background-color: var(--notification-enabled-background-color);
   border-color: var(--notification-enabled-border-color);
@@ -386,29 +387,29 @@
     }
 
     .alert-caution &,
-    .alert-isa-low & {
+    .alert-level-low & {
       border-color: var(--alert-caution-outline-color);
       outline-color: var(--alert-caution-color);
     }
 
     .alert-warning &,
-    .alert-isa-medium & {
+    .alert-level-medium & {
       border-color: var(--alert-warning-outline-color);
       outline-color: var(--alert-warning-color);
     }
 
     .alert-alarm &,
-    .alert-isa-high & {
+    .alert-level-high & {
       border-color: var(--alert-alarm-outline-color);
       outline-color: var(--alert-alarm-color);
     }
 
-    .alert-isa-critical & {
+    .alert-level-critical & {
       border-color: var(--critical-enabled-border-color);
       outline-color: var(--critical-enabled-background-color);
     }
 
-    .alert-isa-diagnostic & {
+    .alert-level-diagnostic & {
       border-color: var(--notification-enabled-border-color);
       outline-color: var(--notification-enabled-background-color);
     }
@@ -487,29 +488,29 @@
 }
 
 .wrapper.value-overlapped.has-data.alert-caution,
-.wrapper.value-overlapped.has-data.alert-isa-low {
+.wrapper.value-overlapped.has-data.alert-level-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-isa-medium {
+.wrapper.value-overlapped.has-data.alert-level-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-isa-high {
+.wrapper.value-overlapped.has-data.alert-level-high {
   background: var(--alert-alarm-color, #e30019);
   border-color: var(--alert-alarm-outline-color);
 }
 
-.wrapper.value-overlapped.has-data.alert-isa-critical {
+.wrapper.value-overlapped.has-data.alert-level-critical {
   background: var(--critical-enabled-background-color);
   border-color: var(--critical-enabled-border-color);
 }
 
-.wrapper.value-overlapped.has-data.alert-isa-diagnostic {
+.wrapper.value-overlapped.has-data.alert-level-diagnostic {
   background: var(--notification-enabled-background-color);
   border-color: var(--notification-enabled-border-color);
 }

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

@@ -34,11 +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',
+  LevelCritical = 'level-critical',
+  LevelHigh = 'level-high',
+  LevelMedium = 'level-medium',
+  LevelLow = 'level-low',
+  LevelDiagnostic = 'level-diagnostic',
 }
 
 export enum PoiButtonVisualState {
@@ -95,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`, `isa-critical`, `isa-high`, `isa-medium`, `isa-low`, `isa-diagnostic`.
+ * - `state` (default `enabled`): `enabled`, `caution`, `warning`, `alarm`, `level-critical`, `level-high`, `level-medium`, `level-low`, `level-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.
@@ -212,16 +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.LevelCritical:
+        return ObcPoiHeaderState.LevelCritical;
+      case ObcPoiButtonState.LevelHigh:
+        return ObcPoiHeaderState.LevelHigh;
+      case ObcPoiButtonState.LevelMedium:
+        return ObcPoiHeaderState.LevelMedium;
+      case ObcPoiButtonState.LevelLow:
+        return ObcPoiHeaderState.LevelLow;
+      case ObcPoiButtonState.LevelDiagnostic:
+        return ObcPoiHeaderState.LevelDiagnostic;
       case ObcPoiButtonState.Enabled:
       default:
         return ObcPoiHeaderState.Selected;

package/src/ar/types.ts

@@ -3,9 +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',
+  LevelCritical = 'level-critical',
+  LevelHigh = 'level-high',
+  LevelMedium = 'level-medium',
+  LevelLow = 'level-low',
+  LevelDiagnostic = 'level-diagnostic',
 }

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

@@ -32,22 +32,22 @@ export enum ObcAutomationBadgeType {
   Caution = 'caution',
   Warning = 'warning',
   Alarm = 'alarm',
-  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',
 }
 
 const ALERT_BADGE_TYPES: ObcAutomationBadgeType[] = [
   ObcAutomationBadgeType.Caution,
   ObcAutomationBadgeType.Warning,
   ObcAutomationBadgeType.Alarm,
-  ObcAutomationBadgeType.IsaCritical,
-  ObcAutomationBadgeType.IsaHigh,
-  ObcAutomationBadgeType.IsaMedium,
-  ObcAutomationBadgeType.IsaLow,
-  ObcAutomationBadgeType.IsaDiagnostic,
+  ObcAutomationBadgeType.LevelCritical,
+  ObcAutomationBadgeType.LevelHigh,
+  ObcAutomationBadgeType.LevelMedium,
+  ObcAutomationBadgeType.LevelLow,
+  ObcAutomationBadgeType.LevelDiagnostic,
 ];
 
 @customElement('obc-automation-badge')
@@ -69,7 +69,7 @@ export class ObcAutomationBadge extends LitElement {
     return !!this.type && types.includes(this.type);
   }
 
-  private renderIsaCriticalIcon(flat: boolean) {
+  private renderLevelCriticalIcon(flat: boolean) {
     if (flat) {
       return html`<svg
         width="16"
@@ -118,7 +118,7 @@ export class ObcAutomationBadge extends LitElement {
     </svg>`;
   }
 
-  private renderIsaDiagnosticIcon() {
+  private renderLevelDiagnosticIcon() {
     return html`<svg
       width="16"
       height="16"
@@ -166,16 +166,16 @@ 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(
+    } else if (this.type === ObcAutomationBadgeType.LevelCritical) {
+      return this.renderLevelCriticalIcon(
         this.effectiveMode === ObcAutomationBadgeMode.Flat
       );
-    } else if (this.type === ObcAutomationBadgeType.IsaDiagnostic) {
-      return this.renderIsaDiagnosticIcon();
+    } else if (this.type === ObcAutomationBadgeType.LevelDiagnostic) {
+      return this.renderLevelDiagnosticIcon();
     } else if (
       this.isAlertType(
         ObcAutomationBadgeType.Caution,
-        ObcAutomationBadgeType.IsaLow
+        ObcAutomationBadgeType.LevelLow
       ) &&
       this.effectiveMode === ObcAutomationBadgeMode.Flat
     ) {
@@ -227,7 +227,7 @@ export class ObcAutomationBadge extends LitElement {
     } else if (
       this.isAlertType(
         ObcAutomationBadgeType.Caution,
-        ObcAutomationBadgeType.IsaLow
+        ObcAutomationBadgeType.LevelLow
       )
     ) {
       return html`<svg
@@ -253,7 +253,7 @@ export class ObcAutomationBadge extends LitElement {
     } else if (
       this.isAlertType(
         ObcAutomationBadgeType.Warning,
-        ObcAutomationBadgeType.IsaMedium
+        ObcAutomationBadgeType.LevelMedium
       ) &&
       this.effectiveMode === ObcAutomationBadgeMode.Flat
     ) {
@@ -315,7 +315,7 @@ export class ObcAutomationBadge extends LitElement {
     } else if (
       this.isAlertType(
         ObcAutomationBadgeType.Warning,
-        ObcAutomationBadgeType.IsaMedium
+        ObcAutomationBadgeType.LevelMedium
       )
     ) {
       return html`<svg
@@ -338,7 +338,7 @@ export class ObcAutomationBadge extends LitElement {
     } else if (
       this.isAlertType(
         ObcAutomationBadgeType.Alarm,
-        ObcAutomationBadgeType.IsaHigh
+        ObcAutomationBadgeType.LevelHigh
       ) &&
       this.effectiveMode === ObcAutomationBadgeMode.Flat
     ) {
@@ -390,7 +390,7 @@ export class ObcAutomationBadge extends LitElement {
     } else if (
       this.isAlertType(
         ObcAutomationBadgeType.Alarm,
-        ObcAutomationBadgeType.IsaHigh
+        ObcAutomationBadgeType.LevelHigh
       )
     ) {
       return html`

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

@@ -28,11 +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',
+  LevelCritical = 'level-critical',
+  LevelHigh = 'level-high',
+  LevelMedium = 'level-medium',
+  LevelLow = 'level-low',
+  LevelDiagnostic = 'level-diagnostic',
 }
 
 export enum AutomationButtonBadgeInterlock {
@@ -158,16 +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;
+    } else if (this.badgeAlert === AutomationButtonBadgeAlert.LevelCritical) {
+      return ObcAutomationBadgeType.LevelCritical;
+    } else if (this.badgeAlert === AutomationButtonBadgeAlert.LevelHigh) {
+      return ObcAutomationBadgeType.LevelHigh;
+    } else if (this.badgeAlert === AutomationButtonBadgeAlert.LevelMedium) {
+      return ObcAutomationBadgeType.LevelMedium;
+    } else if (this.badgeAlert === AutomationButtonBadgeAlert.LevelLow) {
+      return ObcAutomationBadgeType.LevelLow;
+    } else if (this.badgeAlert === AutomationButtonBadgeAlert.LevelDiagnostic) {
+      return ObcAutomationBadgeType.LevelDiagnostic;
     }
     return null;
   }

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

@@ -516,25 +516,25 @@ export const WithAlertCautionCompact: Story = {
   },
 };
 
-export const WithAlertIsaCritical: Story = {
+export const WithAlertLevelCritical: Story = {
   ...WithAlertAlarm,
   args: {
     type: TankType.atmospheric,
     alert: true,
-    alertFrameStatus: ObcAlertFrameStatus.IsaCritical,
+    alertFrameStatus: ObcAlertFrameStatus.LevelCritical,
     alertFrameType: ObcAlertFrameType.SmallSideFlip,
-    badgeAlert: AutomationButtonBadgeAlert.IsaCritical,
+    badgeAlert: AutomationButtonBadgeAlert.LevelCritical,
   },
 };
 
-export const WithAlertIsaDiagnostic: Story = {
+export const WithAlertLevelDiagnostic: Story = {
   ...WithAlertAlarm,
   args: {
     type: TankType.atmospheric,
     alert: true,
-    alertFrameStatus: ObcAlertFrameStatus.IsaDiagnostic,
+    alertFrameStatus: ObcAlertFrameStatus.LevelDiagnostic,
     alertFrameType: ObcAlertFrameType.Regular,
-    badgeAlert: AutomationButtonBadgeAlert.IsaDiagnostic,
+    badgeAlert: AutomationButtonBadgeAlert.LevelDiagnostic,
   },
 };
 

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

@@ -126,10 +126,6 @@ export interface TankReadoutItem {
  * @slot alert-icon - Custom icon for the alert frame.
  * @slot alert-label - Label for the alert frame.
  * @slot alert-timer - Timer for the alert frame.
- *
- * @ignition-base-height: 173px
- * @ignition-base-width: 168px
- * @ignition-center-horizontal
  */
 @customElement('obc-automation-tank')
 export class ObcAutomationTank extends LitElement {
@@ -143,12 +139,12 @@ export class ObcAutomationTank extends LitElement {
   @property({type: Boolean, reflect: true}) compact: boolean = false;
   /**
    * Host positioning model — see `TankPositioning` for details. Defaults to
-   * `point` for backward compatibility (fixed default dimensions + P&ID
-   * top-center anchor). Set to `button` to make the host fill its parent
-   * container (100% × 100%) with no anchor offset.
+   * `button` (host fills parent container, 100% × 100%, no anchor offset).
+   * Set to `point` for the legacy P&ID canvas mode (fixed default dimensions
+   * + top-center anchor offset).
    */
   @property({type: String, reflect: true}) positioning: TankPositioning =
-    TankPositioning.point;
+    TankPositioning.button;
   /**
    * Static (display-only) variant. Always rendered at the compact size; the
    * inner chart/bar is hidden, the bordered area is filled with
@@ -315,16 +311,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;
+      case AutomationButtonBadgeAlert.LevelCritical:
+        return ObcAutomationBadgeType.LevelCritical;
+      case AutomationButtonBadgeAlert.LevelHigh:
+        return ObcAutomationBadgeType.LevelHigh;
+      case AutomationButtonBadgeAlert.LevelMedium:
+        return ObcAutomationBadgeType.LevelMedium;
+      case AutomationButtonBadgeAlert.LevelLow:
+        return ObcAutomationBadgeType.LevelLow;
+      case AutomationButtonBadgeAlert.LevelDiagnostic:
+        return ObcAutomationBadgeType.LevelDiagnostic;
       default:
         return null;
     }

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

@@ -207,7 +207,7 @@
   pointer-events: none;
 
   /* z-index follows ALERT_SEVERITY_PRIORITY: more severe statuses stack on top. */
-  &.alert-isa-critical {
+  &.alert-level-critical {
     z-index: 8;
   }
 
@@ -215,7 +215,7 @@
     z-index: 7;
   }
 
-  &.alert-isa-high {
+  &.alert-level-high {
     z-index: 6;
   }
 
@@ -223,7 +223,7 @@
     z-index: 5;
   }
 
-  &.alert-isa-medium {
+  &.alert-level-medium {
     z-index: 4;
   }
 
@@ -231,11 +231,11 @@
     z-index: 3;
   }
 
-  &.alert-isa-low {
+  &.alert-level-low {
     z-index: 2;
   }
 
-  &.alert-isa-diagnostic {
+  &.alert-level-diagnostic {
     z-index: 1;
   }
 }