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

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

@@ -1,14 +1,18 @@
 :host {
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0;
+}
+
+:host([wrapcontent]) {
+  position: unset;
+  width: fit-content;
+  height: fit-content;
 }
 
 .wrapper {
   --bg-color: var(--alert-alarm-color);
   --thickness: var(--global-size-spacing-border-weight-alertframe);
+  --blink-on: var(--alarm-blink-on);
   color: var(--on-alarm-active-color);
   position: relative;
   width: 100%;
@@ -17,21 +21,62 @@
     var(--ui-components-button-border-radius) + var(--thickness) / 2
   );
   outline: var(--thickness) solid var(--bg-color);
-  outline-offset: calc(-1 * var(--thickness));
+  outline-offset: 0;
+  --blink-width: 2px;
   &.thickness-small {
     --thickness: 2px;
+    --blink-width: 1px;
+  }
+
+  &.wrap-content {
+    width: fit-content;
+    height: fit-content;
+  }
+
+  --blink-width-dynamic: calc(var(--blink-width) * var(--blink-on));
+
+  &.unacked-active {
+    outline-width: calc(var(--thickness) + var(--blink-width-dynamic));
+  }
+
+  &.unacked-rectified {
+    outline-style: dashed;
+  }
+
+  &.alarm,
+  &.isa-high {
+    --bg-color: var(--alert-alarm-color);
+    color: var(--on-alarm-active-color);
   }
 
-  &.warning {
+  &.warning,
+  &.isa-medium {
     --bg-color: var(--alert-warning-color);
+    --blink-on: var(--warning-blink-on);
     color: var(--on-warning-active-color);
   }
 
-  &.caution {
+  &.caution,
+  &.isa-low {
     --bg-color: var(--alert-caution-color);
+    --blink-on: 1;
     color: var(--on-caution-active-color);
   }
 
+  &.isa-low {
+    --blink-on: var(--low-blink-on);
+  }
+
+  &.isa-critical {
+    --bg-color: var(--critical-enabled-background-color);
+    color: var(--on-critical-active-color);
+  }
+
+  &.isa-diagnostic {
+    --bg-color: var(--notification-enabled-background-color);
+    color: var(--on-notification-active-color);
+  }
+
   &.sharp-edge-top-left {
     border-top-left-radius: 0;
   }
@@ -60,9 +105,9 @@
   gap: 2px;
 
   &.small {
-    top: 0;
+    top: calc(-1 * var(--thickness));
     right: calc(
-      -1 * var(--app-components-alert-frame-icon-size) + var(--thickness) / 2 -
+      -1 * var(--app-components-alert-frame-icon-size) - var(--thickness) / 2 -
         var(--ui-components-badge-padding) * 2
     );
   }
@@ -74,9 +119,13 @@
     background-color: var(--bg-color);
 
     &.up {
-      width: calc(var(--ui-components-button-border-radius) + 1px);
+      width: calc(
+        var(--ui-components-button-border-radius) + var(--thickness) + 0.5px
+      );
       top: 0;
-      left: calc(-1 * var(--ui-components-button-border-radius));
+      left: calc(
+        -1 * var(--ui-components-button-border-radius) - var(--thickness)
+      );
       clip-path: polygon(
         0 0,
         100% 0,
@@ -84,12 +133,20 @@
         calc(100% - var(--thickness)) 50%,
         50% var(--thickness)
       );
+
+      .unacked-active & {
+        top: calc(-1 * var(--blink-width-dynamic));
+      }
     }
 
     &.down {
-      width: calc(var(--ui-components-button-border-radius) + 1px);
+      width: calc(
+        var(--ui-components-button-border-radius) + var(--thickness) + 0.5px
+      );
       bottom: 0;
-      left: calc(-1 * var(--ui-components-button-border-radius));
+      left: calc(
+        -1 * var(--ui-components-button-border-radius) - var(--thickness)
+      );
       clip-path: polygon(
         0 100%,
         100% 100%,
@@ -97,11 +154,19 @@
         50% calc(100% - var(--thickness)),
         calc(100% - var(--thickness)) 50%
       );
+
+      .unacked-active & {
+        bottom: calc(-1 * var(--blink-width-dynamic));
+      }
     }
 
     &.left {
-      height: calc(var(--ui-components-button-border-radius) + 1px);
-      top: calc(-1 * var(--ui-components-button-border-radius));
+      height: calc(
+        var(--ui-components-button-border-radius) + var(--thickness) + 0.5px
+      );
+      top: calc(
+        -1 * var(--ui-components-button-border-radius) - var(--thickness)
+      );
       left: 0;
       clip-path: polygon(
         0 0,
@@ -111,22 +176,32 @@
         var(--thickness) 50%
       );
 
+      .unacked-active & {
+        left: calc(-1 * var(--blink-width-dynamic));
+      }
+
       .top & {
         top: unset;
-        bottom: calc(-1 * var(--ui-components-button-border-radius));
+        bottom: calc(
+          -1 * var(--ui-components-button-border-radius) - var(--thickness)
+        );
         clip-path: polygon(
+          0 100%,
           0 0,
           100% 0,
-          var(--thickness) 50%,
           50% var(--thickness),
-          0 100%
+          var(--thickness) 50%
         );
       }
     }
 
     &.right {
-      height: calc(var(--ui-components-button-border-radius) + 1px);
-      top: calc(-1 * var(--ui-components-button-border-radius));
+      height: calc(
+        var(--ui-components-button-border-radius) + var(--thickness) + 0.5px
+      );
+      top: calc(
+        -1 * var(--ui-components-button-border-radius) - var(--thickness)
+      );
       right: 0;
       clip-path: polygon(
         100% 0,
@@ -138,22 +213,28 @@
 
       .top & {
         top: unset;
-        bottom: calc(-1 * var(--ui-components-button-border-radius));
+        bottom: calc(
+          -1 * var(--ui-components-button-border-radius) - var(--thickness)
+        );
         clip-path: polygon(
-          0 0,
-          100% 0,
           100% 100%,
+          100% 0,
+          0 0,
           50% var(--thickness),
           calc(100% - var(--thickness)) 50%
         );
       }
+
+      .unacked-active & {
+        right: calc(-1 * var(--blink-width-dynamic));
+      }
     }
   }
 
   &.large {
     flex-direction: column;
-    top: 0;
-    bottom: 0;
+    top: calc(-1 * var(--thickness));
+    bottom: calc(-1 * var(--thickness));
     right: calc(
       -1 * var(--app-components-alert-frame-icon-size) + var(--thickness) / 2 -
         var(--ui-components-badge-padding) * 2
@@ -165,12 +246,13 @@
 
   &.bottom,
   &.top {
-    left: 0;
-    right: 0;
+    left: calc(-1 * var(--thickness));
+    right: calc(-1 * var(--thickness));
     padding: var(--app-components-alert-frame-large-flip-padding-vertical)
       var(--app-components-alert-frame-large-flip-4px-padding-horizontal);
     bottom: calc(
-      var(--thickness) / 2 - var(--global-typography-ui-label-line-height) -
+      -1 * var(--thickness) / 2 -
+        var(--global-typography-ui-label-line-height) -
         var(--app-components-alert-frame-large-flip-padding-vertical) * 2
     );
     border-radius: 0px 0px var(--button-border-radius-bottom-right)
@@ -200,7 +282,8 @@
   &.top {
     bottom: unset !important;
     top: calc(
-      var(--thickness) / 2 - var(--global-typography-ui-label-line-height) -
+      -1 * var(--thickness) / 2 -
+        var(--global-typography-ui-label-line-height) -
         var(--app-components-alert-frame-large-flip-padding-vertical) * 2
     );
     border-radius: var(--button-border-radius-bottom-right)
@@ -222,6 +305,10 @@
   }
 }
 
+.unacked-active .flap {
+  outline: var(--bg-color) solid var(--blink-width-dynamic);
+}
+
 ::slotted([slot="label"]) {
   text-overflow: ellipsis;
   white-space: nowrap;

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

@@ -5,6 +5,7 @@ import {
   ObcAlertFrameType,
   ObcAlertFrameStatus,
   AlertFrameTextSize,
+  ObcAlertFrameMode,
 } from './alert-frame.js';
 import './alert-frame.js';
 import '../../icons/icon-placeholder.js';
@@ -18,6 +19,7 @@ const meta: Meta<typeof ObcAlertFrame> = {
     type: ObcAlertFrameType.SmallSideFlip,
     thickness: ObcAlertFrameThickness.Small,
     status: ObcAlertFrameStatus.Alarm,
+    mode: ObcAlertFrameMode.ackedActive,
     demoWidth: 200,
     showIcon: true,
     showAlertCategoryIcon: true,
@@ -29,6 +31,12 @@ const meta: Meta<typeof ObcAlertFrame> = {
         type: 'select',
       },
     },
+    mode: {
+      options: Object.values(ObcAlertFrameMode),
+      control: {
+        type: 'select',
+      },
+    },
     thickness: {
       options: Object.values(ObcAlertFrameThickness),
       control: {
@@ -52,17 +60,19 @@ const meta: Meta<typeof ObcAlertFrame> = {
   },
   render(args) {
     return html` <div style="width: fit-content; position: relative;">
-      <div
-        style="width: ${args.demoWidth}px; height: 150px; background-color: #999"
-      ></div>
       <obc-alert-frame
         .type=${args.type}
         .thickness=${args.thickness}
+        .mode=${args.mode}
         .status=${args.status}
         .textSize=${args.textSize}
         .showIcon=${args.showIcon}
         .showAlertCategoryIcon=${args.showAlertCategoryIcon}
+        .wrapContent=${true}
       >
+        <div
+          style="width: ${args.demoWidth}px; height: 150px; background-color: #999"
+        ></div>
         <obi-placeholder slot="icon"></obi-placeholder>
         <div slot="label">Label</div>
         <div slot="timer">00:00</div>
@@ -88,6 +98,14 @@ export const AlarmThinn: Story = {
   },
 };
 
+export const UnackedActiveThick: Story = {
+  args: {
+    mode: ObcAlertFrameMode.unackedActive,
+    thickness: ObcAlertFrameThickness.Large,
+    type: ObcAlertFrameType.Regular,
+  },
+};
+
 export const AlarmThickSmallSideFlip: Story = {
   args: {
     thickness: ObcAlertFrameThickness.Large,
@@ -201,3 +219,45 @@ export const AlarmThickTopFlipNoIcons: Story = {
   },
   render: AlarmThickTopFlip.render,
 };
+
+export const IsaCritical: Story = {
+  args: {
+    status: ObcAlertFrameStatus.IsaCritical,
+  },
+};
+
+export const IsaHigh: Story = {
+  args: {
+    status: ObcAlertFrameStatus.IsaHigh,
+  },
+};
+
+export const IsaMedium: Story = {
+  args: {
+    status: ObcAlertFrameStatus.IsaMedium,
+  },
+};
+
+export const IsaLow: Story = {
+  args: {
+    status: ObcAlertFrameStatus.IsaLow,
+  },
+};
+
+export const IsaDiagnostic: Story = {
+  args: {
+    status: ObcAlertFrameStatus.IsaDiagnostic,
+  },
+};
+
+export const RectifiedUnactive: Story = {
+  args: {
+    type: ObcAlertFrameType.Regular,
+    thickness: ObcAlertFrameThickness.Large,
+    status: ObcAlertFrameStatus.Alarm,
+    demoWidth: 200,
+    showIcon: true,
+    showAlertCategoryIcon: true,
+    mode: ObcAlertFrameMode.unackedRectified,
+  },
+};

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

@@ -1,11 +1,27 @@
-import {LitElement, html, unsafeCSS, nothing, TemplateResult} from 'lit';
+import {
+  LitElement,
+  html,
+  unsafeCSS,
+  nothing,
+  TemplateResult,
+  HTMLTemplateResult,
+} from 'lit';
 import {property} from 'lit/decorators.js';
 import compentStyle from './alert-frame.css?inline';
 import {classMap} from 'lit/directives/class-map.js';
 import '../../icons/icon-alarm-badge.js';
 import '../../icons/icon-warning-badge.js';
 import '../../icons/icon-caution-badge.js';
+import './critical-badge.js';
+import './diagnostic-badge.js';
 import {customElement} from '../../decorator.js';
+import {AlertType} from '../../types.js';
+import {
+  getAlertBadgeComponent,
+  AlertBadgeComponent,
+} from '../../alert-severity.js';
+
+export {AlertType as ObcAlertFrameStatus} from '../../types.js';
 
 /**
  * Enum representing the available frame styles for an alert component.
@@ -33,16 +49,10 @@ export enum ObcAlertFrameThickness {
   Large = 'large',
 }
 
-/**
- * Status options for the alert frame, controlling color and icon.
- * - `alarm`: Highest severity (default).
- * - `warning`: Medium severity.
- * - `caution`: Lower severity.
- */
-export enum ObcAlertFrameStatus {
-  Alarm = 'alarm',
-  Warning = 'warning',
-  Caution = 'caution',
+export enum ObcAlertFrameMode {
+  ackedActive = 'acked-active',
+  unackedActive = 'unacked-active',
+  unackedRectified = 'unacked-rectified',
 }
 
 /**
@@ -55,6 +65,16 @@ export enum AlertFrameTextSize {
   Large = 'large',
 }
 
+export interface AlertFrameConfig {
+  type?: ObcAlertFrameType;
+  thickness?: ObcAlertFrameThickness;
+  status?: AlertType;
+  mode?: ObcAlertFrameMode;
+  textSize?: AlertFrameTextSize;
+  showIcon?: boolean;
+  showAlertCategoryIcon?: boolean;
+}
+
 /**
  * `<obc-alert-frame>` – A bordered frame component for visually emphasizing alert or status messages.
  *
@@ -67,7 +87,9 @@ export enum AlertFrameTextSize {
  *   - `large-side-flip`: Adds a larger, vertical side flap with a status icon and optional custom icon.
  *   - `bottom-flip`: Adds a bottom flap with a status icon, label, and timer slots.
  * - **Thickness options:** Choose between `small` (thin border) and `large` (thick border) for visual emphasis.
- * - **Status indication:** Displays different color schemes and icons for `alarm`, `warning`, or `caution` states.
+ * - **Status indication:** Displays different color schemes and icons for the legacy statuses (`alarm`, `warning`, `caution`) and the ISA statuses (`isa-critical`, `isa-high`, `isa-medium`, `isa-low`, `isa-diagnostic`).
+ * - **Acknowledgement mode:** The `mode` property reflects the alert lifecycle state — `acked-active` (default), `unacked-active`, and `unacked-rectified` — driving the blinking/animation treatment of the frame.
+ * - **Content wrapping:** When `wrapContent` is true, the frame wraps and sizes itself to its slotted content rather than overlaying a fixed region.
  * - **Customizable corners:** Each corner can be set to a sharp (non-rounded) edge for integration with other UI elements.
  * - **Slot-based content:** Supports custom icons, labels, and timers in flap variants via named slots.
  *
@@ -83,7 +105,8 @@ export enum AlertFrameTextSize {
  *   - `large-side-flip`: Large vertical right-side flap with status icon and optional custom icon.
  *   - `bottom-flip`: Bottom flap with status icon, label, and timer.
  * - **Thickness:** `small` (default) or `large` for border width.
- * - **Status:** `alarm`, `warning`, or `caution`—affects color and icon.
+ * - **Status:** `alarm`, `warning`, `caution`, or the ISA severities (`isa-critical`, `isa-high`, `isa-medium`, `isa-low`, `isa-diagnostic`)—affects color and icon.
+ * - **Mode:** `acked-active` (default), `unacked-active`, or `unacked-rectified`—affects blinking/animation.
  * - **Corner Customization:** Each corner can be made sharp (not rounded) via boolean properties.
  *
  * ### Slots and Content Structure
@@ -98,7 +121,9 @@ export enum AlertFrameTextSize {
  * ### Properties and Attributes
  * - `type`: Selects the visual variant/flap style. Default is `small-side-flip`.
  * - `thickness`: Controls border thickness (`small` or `large`). Default is `small`.
- * - `status`: Sets the alert status and color/icon (`alarm`, `warning`, `caution`). Default is `alarm`.
+ * - `status`: Sets the alert status and color/icon (`alarm`, `warning`, `caution`, or the `isa-*` severities). Default is `alarm`.
+ * - `mode`: Acknowledgement lifecycle state (`acked-active`, `unacked-active`, `unacked-rectified`) controlling blinking/animation. Default is `acked-active`.
+ * - `wrapContent`: When true, the frame wraps and sizes to its slotted content instead of overlaying a fixed region. Default is `false`.
  * - `sharpEdgeTopLeft`, `sharpEdgeTopRight`, `sharpEdgeBottomLeft`, `sharpEdgeBottomRight`: Boolean flags to make each corner sharp instead of rounded.
  *
  * ### Best Practices and Constraints
@@ -154,9 +179,24 @@ export class ObcAlertFrame extends LitElement {
    * - `alarm`: Highest severity (default).
    * - `warning`: Medium severity.
    * - `caution`: Lower severity.
+   * - `isa-critical`, `isa-high`, `isa-medium`, `isa-low`, `isa-diagnostic`: ISA severity levels, styled to match their legacy equivalents.
+   */
+  @property({type: String}) status: AlertType = AlertType.Alarm;
+
+  /**
+   * Acknowledgement lifecycle state, controlling the frame's blinking/animation.
+   * - `acked-active`: Active and acknowledged (default); no blinking.
+   * - `unacked-active`: Active and not yet acknowledged; blinks.
+   * - `unacked-rectified`: Condition cleared but not yet acknowledged.
+   */
+  @property({type: String}) mode: ObcAlertFrameMode =
+    ObcAlertFrameMode.ackedActive;
+
+  /**
+   * When true, the frame wraps and sizes itself to its slotted content instead
+   * of overlaying a fixed region. Reflected to an attribute for CSS styling.
    */
-  @property({type: String}) status: ObcAlertFrameStatus =
-    ObcAlertFrameStatus.Alarm;
+  @property({type: Boolean, reflect: true}) wrapContent: boolean = false;
 
   /**
    * If true, the top-left corner will be sharp (not rounded).
@@ -190,6 +230,7 @@ export class ObcAlertFrame extends LitElement {
       <div
         class=${classMap({
           wrapper: true,
+          'wrap-content': this.wrapContent,
           ['thickness-' + this.thickness]: true,
           [this.type]: true,
           [this.status]: true,
@@ -198,6 +239,7 @@ export class ObcAlertFrame extends LitElement {
           'sharp-edge-top-right': this.sharpEdgeTopRight,
           'sharp-edge-bottom-left': this.sharpEdgeBottomLeft,
           'sharp-edge-bottom-right': this.sharpEdgeBottomRight,
+          [this.mode]: true,
         })}
       >
         <slot></slot>
@@ -211,15 +253,26 @@ export class ObcAlertFrame extends LitElement {
       return nothing;
     }
 
-    let icon: TemplateResult | typeof nothing = html`<obi-alarm-badge
-      class="icon badge"
-    ></obi-alarm-badge>`;
+    if (
+      this.type === ObcAlertFrameType.SmallSideFlip &&
+      !this.showAlertCategoryIcon
+    ) {
+      return nothing;
+    }
+
+    if (
+      this.type === ObcAlertFrameType.LargeSideFlip &&
+      !this.showIcon &&
+      !this.showAlertCategoryIcon
+    ) {
+      return nothing;
+    }
+
+    let icon: TemplateResult | typeof nothing;
     if (!this.showAlertCategoryIcon) {
       icon = nothing;
-    } else if (this.status === ObcAlertFrameStatus.Warning) {
-      icon = html`<obi-warning-badge class="icon badge"></obi-warning-badge>`;
-    } else if (this.status === ObcAlertFrameStatus.Caution) {
-      icon = html`<obi-caution-badge class="icon badge"></obi-caution-badge>`;
+    } else {
+      icon = this.renderBadgeIcon();
     }
 
     if (this.type === ObcAlertFrameType.SmallSideFlip) {
@@ -262,9 +315,47 @@ export class ObcAlertFrame extends LitElement {
     return nothing;
   }
 
+  private renderBadgeIcon(): TemplateResult {
+    switch (getAlertBadgeComponent(this.status)) {
+      case AlertBadgeComponent.Critical:
+        return html`<obi-critical-badge
+          class="icon badge"
+        ></obi-critical-badge>`;
+      case AlertBadgeComponent.Warning:
+        return html`<obi-warning-badge class="icon badge"></obi-warning-badge>`;
+      case AlertBadgeComponent.Caution:
+        return html`<obi-caution-badge class="icon badge"></obi-caution-badge>`;
+      case AlertBadgeComponent.Diagnostic:
+        return html`<obi-diagnostic-badge
+          class="icon badge"
+        ></obi-diagnostic-badge>`;
+      default:
+        return html`<obi-alarm-badge class="icon badge"></obi-alarm-badge>`;
+    }
+  }
+
   static override styles = unsafeCSS(compentStyle);
 }
 
+export function wrapWithAlertFrame(
+  options: AlertFrameConfig | boolean | undefined,
+  content: HTMLTemplateResult
+): HTMLTemplateResult {
+  if (typeof options !== 'object' || options === null) {
+    return content;
+  }
+  return html`<obc-alert-frame
+    .type=${options.type ?? ObcAlertFrameType.SmallSideFlip}
+    .thickness=${options.thickness ?? ObcAlertFrameThickness.Small}
+    .status=${options.status ?? AlertType.Alarm}
+    .mode=${options.mode ?? ObcAlertFrameMode.ackedActive}
+    .showIcon=${options.showIcon ?? false}
+    .showAlertCategoryIcon=${options.showAlertCategoryIcon ?? true}
+    .wrapContent=${true}
+    >${content}</obc-alert-frame
+  >`;
+}
+
 declare global {
   interface HTMLElementTagNameMap {
     'obc-alert-frame': ObcAlertFrame;

package/src/components/alert-frame/critical-badge.ts

@@ -0,0 +1,39 @@
+import {LitElement, html, css, svg} from 'lit';
+import {customElement} from '../../decorator.js';
+
+@customElement('obi-critical-badge')
+export class ObiCriticalBadge extends LitElement {
+  private icon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M 22,12 
+           L 17,20.66 
+           L 7,20.66 
+           L 2,12 
+           L 7,3.34 
+           L 17,3.34 
+           Z" 
+        fill="currentColor"/>
+</svg>
+`;
+
+  override render() {
+    return html` <div class="wrapper">${this.icon}</div> `;
+  }
+
+  static override styles = css`
+    .wrapper {
+      height: 100%;
+      width: 100%;
+      line-height: 0;
+    }
+    .wrapper > * {
+      height: 100%;
+      width: 100%;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obi-critical-badge': ObiCriticalBadge;
+  }
+}

package/src/components/alert-frame/diagnostic-badge.ts

@@ -0,0 +1,52 @@
+import {LitElement, html, css, svg} from 'lit';
+import {customElement} from '../../decorator.js';
+
+@customElement('obi-diagnostic-badge')
+export class ObiDiagnosticBadge extends LitElement {
+  private icon = svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="100" height="100">
+  <path d="M 10.5,2 
+           L 13.5,2 
+           L 13.5,9.4 
+           L 19.91,5.7 
+           L 21.41,8.3 
+           L 15,12 
+           L 21.41,15.7 
+           L 19.91,18.3 
+           L 13.5,14.6 
+           L 13.5,22 
+           L 10.5,22 
+           L 10.5,14.6 
+           L 4.09,18.3 
+           L 2.59,15.7 
+           L 9,12 
+           L 2.59,8.3 
+           L 4.09,5.7 
+           L 10.5,9.4 
+           Z" 
+        fill="currentColor" />
+</svg>
+
+`;
+
+  override render() {
+    return html` <div class="wrapper">${this.icon}</div> `;
+  }
+
+  static override styles = css`
+    .wrapper {
+      height: 100%;
+      width: 100%;
+      line-height: 0;
+    }
+    .wrapper > * {
+      height: 100%;
+      width: 100%;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obi-diagnostic-badge': ObiDiagnosticBadge;
+  }
+}