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

package/dist/components/alert-frame/alert-frame.js

@@ -5,7 +5,11 @@ 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";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -29,12 +33,12 @@ var ObcAlertFrameThickness = /* @__PURE__ */ ((ObcAlertFrameThickness2) => {
   ObcAlertFrameThickness2["Large"] = "large";
   return ObcAlertFrameThickness2;
 })(ObcAlertFrameThickness || {});
-var ObcAlertFrameStatus = /* @__PURE__ */ ((ObcAlertFrameStatus2) => {
-  ObcAlertFrameStatus2["Alarm"] = "alarm";
-  ObcAlertFrameStatus2["Warning"] = "warning";
-  ObcAlertFrameStatus2["Caution"] = "caution";
-  return ObcAlertFrameStatus2;
-})(ObcAlertFrameStatus || {});
+var ObcAlertFrameMode = /* @__PURE__ */ ((ObcAlertFrameMode2) => {
+  ObcAlertFrameMode2["ackedActive"] = "acked-active";
+  ObcAlertFrameMode2["unackedActive"] = "unacked-active";
+  ObcAlertFrameMode2["unackedRectified"] = "unacked-rectified";
+  return ObcAlertFrameMode2;
+})(ObcAlertFrameMode || {});
 var AlertFrameTextSize = /* @__PURE__ */ ((AlertFrameTextSize2) => {
   AlertFrameTextSize2["Regular"] = "regular";
   AlertFrameTextSize2["Large"] = "large";
@@ -45,7 +49,9 @@ let ObcAlertFrame = class extends LitElement {
     super(...arguments);
     this.type = "small-side-flip";
     this.thickness = "small";
-    this.status = "alarm";
+    this.status = AlertType.Alarm;
+    this.mode = "acked-active";
+    this.wrapContent = false;
     this.sharpEdgeTopLeft = false;
     this.sharpEdgeTopRight = false;
     this.sharpEdgeBottomLeft = false;
@@ -59,6 +65,7 @@ let ObcAlertFrame = class extends LitElement {
       <div
         class=${classMap({
       wrapper: true,
+      "wrap-content": this.wrapContent,
       ["thickness-" + this.thickness]: true,
       [this.type]: true,
       [this.status]: true,
@@ -66,7 +73,8 @@ let ObcAlertFrame = class extends LitElement {
       "sharp-edge-top-left": this.sharpEdgeTopLeft,
       "sharp-edge-top-right": this.sharpEdgeTopRight,
       "sharp-edge-bottom-left": this.sharpEdgeBottomLeft,
-      "sharp-edge-bottom-right": this.sharpEdgeBottomRight
+      "sharp-edge-bottom-right": this.sharpEdgeBottomRight,
+      [this.mode]: true
     })}
       >
         <slot></slot>
@@ -78,15 +86,17 @@ let ObcAlertFrame = class extends LitElement {
     if (this.type === "regular") {
       return nothing;
     }
-    let icon = html`<obi-alarm-badge
-      class="icon badge"
-    ></obi-alarm-badge>`;
+    if (this.type === "small-side-flip" && !this.showAlertCategoryIcon) {
+      return nothing;
+    }
+    if (this.type === "large-side-flip" && !this.showIcon && !this.showAlertCategoryIcon) {
+      return nothing;
+    }
+    let icon;
     if (!this.showAlertCategoryIcon) {
       icon = nothing;
-    } else if (this.status === "warning") {
-      icon = html`<obi-warning-badge class="icon badge"></obi-warning-badge>`;
-    } else if (this.status === "caution") {
-      icon = html`<obi-caution-badge class="icon badge"></obi-caution-badge>`;
+    } else {
+      icon = this.renderBadgeIcon();
     }
     if (this.type === "small-side-flip") {
       return html`<div class="flap small">
@@ -118,6 +128,24 @@ let ObcAlertFrame = class extends LitElement {
     console.error("Unknown type of alert frame:", this.type);
     return nothing;
   }
+  renderBadgeIcon() {
+    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>`;
+    }
+  }
 };
 ObcAlertFrame.styles = unsafeCSS(compentStyle);
 __decorateClass([
@@ -129,6 +157,12 @@ __decorateClass([
 __decorateClass([
   property({ type: String })
 ], ObcAlertFrame.prototype, "status", 2);
+__decorateClass([
+  property({ type: String })
+], ObcAlertFrame.prototype, "mode", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], ObcAlertFrame.prototype, "wrapContent", 2);
 __decorateClass([
   property({ type: Boolean })
 ], ObcAlertFrame.prototype, "sharpEdgeTopLeft", 2);
@@ -153,11 +187,28 @@ __decorateClass([
 ObcAlertFrame = __decorateClass([
   customElement("obc-alert-frame")
 ], ObcAlertFrame);
+function wrapWithAlertFrame(options, content) {
+  if (typeof options !== "object" || options === null) {
+    return content;
+  }
+  return html`<obc-alert-frame
+    .type=${options.type ?? "small-side-flip"}
+    .thickness=${options.thickness ?? "small"}
+    .status=${options.status ?? AlertType.Alarm}
+    .mode=${options.mode ?? "acked-active"}
+    .showIcon=${options.showIcon ?? false}
+    .showAlertCategoryIcon=${options.showAlertCategoryIcon ?? true}
+    .wrapContent=${true}
+    >${content}</obc-alert-frame
+  >`;
+}
 export {
   AlertFrameTextSize,
   ObcAlertFrame,
-  ObcAlertFrameStatus,
+  ObcAlertFrameMode,
+  AlertType as ObcAlertFrameStatus,
   ObcAlertFrameThickness,
-  ObcAlertFrameType
+  ObcAlertFrameType,
+  wrapWithAlertFrame
 };
 //# sourceMappingURL=alert-frame.js.map

package/dist/components/alert-frame/alert-frame.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert-frame.js","sources":["../../../src/components/alert-frame/alert-frame.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS, nothing, TemplateResult} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport compentStyle from './alert-frame.css?inline';\nimport {classMap} from 'lit/directives/class-map.js';\nimport '../../icons/icon-alarm-badge.js';\nimport '../../icons/icon-warning-badge.js';\nimport '../../icons/icon-caution-badge.js';\nimport {customElement} from '../../decorator.js';\n\n/**\n * Enum representing the available frame styles for an alert component.\n *\n * - Regular (\"regular\"): Standard alert frame layout.\n * - SmallSideFlip (\"small-side-flip\"): Flipped frame with a small side edge.\n * - LargeSideFlip (\"large-side-flip\"): Flipped frame with a large side edge.\n * - BottomFlip (\"bottom-flip\"): Frame flipped to the bottom position.\n */\nexport enum ObcAlertFrameType {\n  Regular = 'regular',\n  SmallSideFlip = 'small-side-flip',\n  LargeSideFlip = 'large-side-flip',\n  BottomFlip = 'bottom-flip',\n  TopFlip = 'top-flip',\n}\n\n/**\n * Thickness options for the alert frame border.\n * - `small`: Thin border (default).\n * - `large`: Thick border for higher emphasis.\n */\nexport enum ObcAlertFrameThickness {\n  Small = 'small',\n  Large = 'large',\n}\n\n/**\n * Status options for the alert frame, controlling color and icon.\n * - `alarm`: Highest severity (default).\n * - `warning`: Medium severity.\n * - `caution`: Lower severity.\n */\nexport enum ObcAlertFrameStatus {\n  Alarm = 'alarm',\n  Warning = 'warning',\n  Caution = 'caution',\n}\n\n/**\n * Text size options for flip-flap typography.\n * - `regular`: Standard text size (default).\n * - `large`: Larger text for increased visibility.\n */\nexport enum AlertFrameTextSize {\n  Regular = 'regular',\n  Large = 'large',\n}\n\n/**\n * `<obc-alert-frame>` – A bordered frame component for visually emphasizing alert or status messages.\n *\n * The alert frame provides a prominent outline and optional \"flap\" with status icon to draw attention to critical information or UI regions. It supports multiple visual variants and thicknesses, and can be configured to indicate different alert statuses (alarm, warning, caution). The component is designed to wrap content and visually distinguish it from the surrounding UI.\n *\n * ### Features\n * - **Variants (type):**\n *   - `regular`: Standard outlined frame with no flap or icon.\n *   - `small-side-flip`: Adds a small side flap with a status icon at the top right.\n *   - `large-side-flip`: Adds a larger, vertical side flap with a status icon and optional custom icon.\n *   - `bottom-flip`: Adds a bottom flap with a status icon, label, and timer slots.\n * - **Thickness options:** Choose between `small` (thin border) and `large` (thick border) for visual emphasis.\n * - **Status indication:** Displays different color schemes and icons for `alarm`, `warning`, or `caution` states.\n * - **Customizable corners:** Each corner can be set to a sharp (non-rounded) edge for integration with other UI elements.\n * - **Slot-based content:** Supports custom icons, labels, and timers in flap variants via named slots.\n *\n * ### Usage Guidelines\n * Use `obc-alert-frame` to highlight important content, such as alerts, warnings, or status panels. The flap variants are ideal for drawing extra attention to urgent or time-sensitive information, while the regular type provides a subtle but clear border. Choose the status to match the severity of the message (alarm, warning, caution). Adjust thickness for visual hierarchy—use large for high-priority alerts and small for less critical notices.\n *\n * **TODO(designer):** Provide guidance on when to use each flap type (small-side-flip, large-side-flip, bottom-flip) and recommended scenarios for sharp edge usage.\n *\n * ### Features/Variants\n * - **Type (Visual Variant):**\n *   - `regular`: Simple outlined frame, no flap or icon.\n *   - `small-side-flip`: Small right-side flap with status icon.\n *   - `large-side-flip`: Large vertical right-side flap with status icon and optional custom icon.\n *   - `bottom-flip`: Bottom flap with status icon, label, and timer.\n * - **Thickness:** `small` (default) or `large` for border width.\n * - **Status:** `alarm`, `warning`, or `caution`—affects color and icon.\n * - **Corner Customization:** Each corner can be made sharp (not rounded) via boolean properties.\n *\n * ### Slots and Content Structure\n *\n * | Slot Name | Renders When... | Purpose |\n * |-----------|-----------------|---------|\n * | (default) | Always | Main content inside the alert frame. |\n * | icon | `large-side-flip` or `bottom-flip` | Custom icon displayed in the flap (in addition to status icon). |\n * | label | `bottom-flip` only | Label text shown in the bottom flap. |\n * | timer | `bottom-flip` only | Timer or time label in the bottom flap. |\n *\n * ### Properties and Attributes\n * - `type`: Selects the visual variant/flap style. Default is `small-side-flip`.\n * - `thickness`: Controls border thickness (`small` or `large`). Default is `small`.\n * - `status`: Sets the alert status and color/icon (`alarm`, `warning`, `caution`). Default is `alarm`.\n * - `sharpEdgeTopLeft`, `sharpEdgeTopRight`, `sharpEdgeBottomLeft`, `sharpEdgeBottomRight`: Boolean flags to make each corner sharp instead of rounded.\n *\n * ### Best Practices and Constraints\n * - Use the status property to match the severity of the alert.\n * - Only use the bottom-flip variant when both label and timer are relevant.\n * - For visual consistency, align sharp edge settings with adjacent UI elements.\n * - The default slot is for the main content; use named slots for icons, labels, and timers as needed.\n *\n * ### Example:\n * ```\n * <obc-alert-frame\n *   type=\"bottom-flip\"\n *   thickness=\"large\"\n *   status=\"warning\"\n *   sharpEdgeTopLeft\n * >\n *   <obi-placeholder slot=\"icon\"></obi-placeholder>\n *   <div slot=\"label\">Low Battery</div>\n *   <div slot=\"timer\">00:15</div>\n *   <div>Critical system message goes here.</div>\n * </obc-alert-frame>\n * ```\n *\n * @slot - Default slot for main alert content.\n * @slot icon - Custom icon for the flap (large-side-flip, bottom-flip).\n * @slot label - Label text for the bottom flap (bottom-flip only).\n * @slot timer - Timer or time label for the bottom flap (bottom-flip only).\n */\n@customElement('obc-alert-frame')\nexport class ObcAlertFrame extends LitElement {\n  /**\n   * Visual variant of the alert frame.\n   * - `regular`: Outlined frame only.\n   * - `small-side-flip`: Small right-side flap with status icon.\n   * - `large-side-flip`: Large vertical right-side flap with status icon and optional custom icon.\n   * - `bottom-flip`: Bottom flap with status icon, label, and timer.\n   *\n   * Default: `small-side-flip`\n   */\n  @property({type: String}) type: ObcAlertFrameType =\n    ObcAlertFrameType.SmallSideFlip;\n\n  /**\n   * Border thickness of the alert frame.\n   * - `small`: Thin border (default).\n   * - `large`: Thick border for higher emphasis.\n   */\n  @property({type: String}) thickness: ObcAlertFrameThickness =\n    ObcAlertFrameThickness.Small;\n\n  /**\n   * Status of the alert, controlling color scheme and icon.\n   * - `alarm`: Highest severity (default).\n   * - `warning`: Medium severity.\n   * - `caution`: Lower severity.\n   */\n  @property({type: String}) status: ObcAlertFrameStatus =\n    ObcAlertFrameStatus.Alarm;\n\n  /**\n   * If true, the top-left corner will be sharp (not rounded).\n   */\n  @property({type: Boolean}) sharpEdgeTopLeft: boolean = false;\n\n  /**\n   * If true, the top-right corner will be sharp (not rounded).\n   */\n  @property({type: Boolean}) sharpEdgeTopRight: boolean = false;\n\n  /**\n   * If true, the bottom-left corner will be sharp (not rounded).\n   */\n  @property({type: Boolean}) sharpEdgeBottomLeft: boolean = false;\n\n  /**\n   * If true, the bottom-right corner will be sharp (not rounded).\n   */\n  @property({type: Boolean}) sharpEdgeBottomRight: boolean = false;\n\n  @property({type: String}) textSize: AlertFrameTextSize =\n    AlertFrameTextSize.Regular;\n\n  @property({type: Boolean}) showIcon: boolean = false;\n  @property({type: Boolean, attribute: false}) showAlertCategoryIcon: boolean =\n    true;\n\n  override render() {\n    return html`\n      <div\n        class=${classMap({\n          wrapper: true,\n          ['thickness-' + this.thickness]: true,\n          [this.type]: true,\n          [this.status]: true,\n          ['text-size-' + this.textSize]: true,\n          'sharp-edge-top-left': this.sharpEdgeTopLeft,\n          'sharp-edge-top-right': this.sharpEdgeTopRight,\n          'sharp-edge-bottom-left': this.sharpEdgeBottomLeft,\n          'sharp-edge-bottom-right': this.sharpEdgeBottomRight,\n        })}\n      >\n        <slot></slot>\n        ${this.flap()}\n      </div>\n    `;\n  }\n\n  private flap() {\n    if (this.type === ObcAlertFrameType.Regular) {\n      return nothing;\n    }\n\n    let icon: TemplateResult | typeof nothing = html`<obi-alarm-badge\n      class=\"icon badge\"\n    ></obi-alarm-badge>`;\n    if (!this.showAlertCategoryIcon) {\n      icon = nothing;\n    } else if (this.status === ObcAlertFrameStatus.Warning) {\n      icon = html`<obi-warning-badge class=\"icon badge\"></obi-warning-badge>`;\n    } else if (this.status === ObcAlertFrameStatus.Caution) {\n      icon = html`<obi-caution-badge class=\"icon badge\"></obi-caution-badge>`;\n    }\n\n    if (this.type === ObcAlertFrameType.SmallSideFlip) {\n      return html`<div class=\"flap small\">\n        ${icon}\n        <div class=\"mask up\"></div>\n      </div>`;\n    }\n    if (this.type === ObcAlertFrameType.LargeSideFlip) {\n      return html`<div class=\"flap large\">\n        ${icon}\n        ${this.showIcon\n          ? html`<div class=\"icon\"><slot name=\"icon\"></slot></div>`\n          : nothing}\n        <div class=\"mask up\"></div>\n        <div class=\"mask down\"></div>\n      </div>`;\n    }\n    if (\n      this.type === ObcAlertFrameType.BottomFlip ||\n      this.type === ObcAlertFrameType.TopFlip\n    ) {\n      return html`<div\n        class=\"flap ${this.type === ObcAlertFrameType.BottomFlip\n          ? 'bottom'\n          : 'top'}\"\n      >\n        ${icon}\n        ${this.showIcon\n          ? html`<div class=\"icon\"><slot name=\"icon\"></slot></div>`\n          : nothing}\n        <div class=\"label\"><slot name=\"label\"></slot></div>\n        <div class=\"spacer\"></div>\n        <div class=\"timer\"><slot name=\"timer\"></slot></div>\n        <div class=\"mask right\"></div>\n        <div class=\"mask left\"></div>\n      </div>`;\n    }\n    console.error('Unknown type of alert frame:', this.type);\n    return nothing;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-alert-frame': ObcAlertFrame;\n  }\n}\n"],"names":["ObcAlertFrameType","ObcAlertFrameThickness","ObcAlertFrameStatus","AlertFrameTextSize"],"mappings":";;;;;;;;;;;;;;;;;;AAiBO,IAAK,sCAAAA,uBAAL;AACLA,qBAAA,SAAA,IAAU;AACVA,qBAAA,eAAA,IAAgB;AAChBA,qBAAA,eAAA,IAAgB;AAChBA,qBAAA,YAAA,IAAa;AACbA,qBAAA,SAAA,IAAU;AALA,SAAAA;AAAA,GAAA,qBAAA,CAAA,CAAA;AAaL,IAAK,2CAAAC,4BAAL;AACLA,0BAAA,OAAA,IAAQ;AACRA,0BAAA,OAAA,IAAQ;AAFE,SAAAA;AAAA,GAAA,0BAAA,CAAA,CAAA;AAWL,IAAK,wCAAAC,yBAAL;AACLA,uBAAA,OAAA,IAAQ;AACRA,uBAAA,SAAA,IAAU;AACVA,uBAAA,SAAA,IAAU;AAHA,SAAAA;AAAA,GAAA,uBAAA,CAAA,CAAA;AAWL,IAAK,uCAAAC,wBAAL;AACLA,sBAAA,SAAA,IAAU;AACVA,sBAAA,OAAA,IAAQ;AAFE,SAAAA;AAAA,GAAA,sBAAA,CAAA,CAAA;AA8EL,IAAM,gBAAN,cAA4B,WAAW;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA;AAUqB,SAAA,OACxB;AAOwB,SAAA,YACxB;AAQwB,SAAA,SACxB;AAKyB,SAAA,mBAA4B;AAK5B,SAAA,oBAA6B;AAK7B,SAAA,sBAA+B;AAK/B,SAAA,uBAAgC;AAEjC,SAAA,WACxB;AAEyB,SAAA,WAAoB;AACF,SAAA,wBAC3C;AAAA,EAAA;AAAA,EAEO,SAAS;AAChB,WAAO;AAAA;AAAA,gBAEK,SAAS;AAAA,MACf,SAAS;AAAA,MACT,CAAC,eAAe,KAAK,SAAS,GAAG;AAAA,MACjC,CAAC,KAAK,IAAI,GAAG;AAAA,MACb,CAAC,KAAK,MAAM,GAAG;AAAA,MACf,CAAC,eAAe,KAAK,QAAQ,GAAG;AAAA,MAChC,uBAAuB,KAAK;AAAA,MAC5B,wBAAwB,KAAK;AAAA,MAC7B,0BAA0B,KAAK;AAAA,MAC/B,2BAA2B,KAAK;AAAA,IAAA,CACjC,CAAC;AAAA;AAAA;AAAA,UAGA,KAAK,MAAM;AAAA;AAAA;AAAA,EAGnB;AAAA,EAEQ,OAAO;AACb,QAAI,KAAK,SAAS,WAA2B;AAC3C,aAAO;AAAA,IACT;AAEA,QAAI,OAAwC;AAAA;AAAA;AAG5C,QAAI,CAAC,KAAK,uBAAuB;AAC/B,aAAO;AAAA,IACT,WAAW,KAAK,WAAW,WAA6B;AACtD,aAAO;AAAA,IACT,WAAW,KAAK,WAAW,WAA6B;AACtD,aAAO;AAAA,IACT;AAEA,QAAI,KAAK,SAAS,mBAAiC;AACjD,aAAO;AAAA,UACH,IAAI;AAAA;AAAA;AAAA,IAGV;AACA,QAAI,KAAK,SAAS,mBAAiC;AACjD,aAAO;AAAA,UACH,IAAI;AAAA,UACJ,KAAK,WACH,0DACA,OAAO;AAAA;AAAA;AAAA;AAAA,IAIf;AACA,QACE,KAAK,SAAS,iBACd,KAAK,SAAS,YACd;AACA,aAAO;AAAA,sBACS,KAAK,SAAS,gBACxB,WACA,KAAK;AAAA;AAAA,UAEP,IAAI;AAAA,UACJ,KAAK,WACH,0DACA,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOf;AACA,YAAQ,MAAM,gCAAgC,KAAK,IAAI;AACvD,WAAO;AAAA,EACT;AAGF;AAvIa,cAsIK,SAAS,UAAU,YAAY;AA5HrB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAVb,cAUe,WAAA,QAAA,CAAA;AAQA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAlBb,cAkBe,WAAA,aAAA,CAAA;AASA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GA3Bb,cA2Be,WAAA,UAAA,CAAA;AAMC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAjCd,cAiCgB,WAAA,oBAAA,CAAA;AAKA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAtCd,cAsCgB,WAAA,qBAAA,CAAA;AAKA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GA3Cd,cA2CgB,WAAA,uBAAA,CAAA;AAKA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAhDd,cAgDgB,WAAA,wBAAA,CAAA;AAED,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAlDb,cAkDe,WAAA,YAAA,CAAA;AAGC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GArDd,cAqDgB,WAAA,YAAA,CAAA;AACkB,gBAAA;AAAA,EAA5C,SAAS,EAAC,MAAM,SAAS,WAAW,OAAM;AAAA,GAtDhC,cAsDkC,WAAA,yBAAA,CAAA;AAtDlC,gBAAN,gBAAA;AAAA,EADN,cAAc,iBAAiB;AAAA,GACnB,aAAA;"}
+{"version":3,"file":"alert-frame.js","sources":["../../../src/components/alert-frame/alert-frame.ts"],"sourcesContent":["import {\n  LitElement,\n  html,\n  unsafeCSS,\n  nothing,\n  TemplateResult,\n  HTMLTemplateResult,\n} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport compentStyle from './alert-frame.css?inline';\nimport {classMap} from 'lit/directives/class-map.js';\nimport '../../icons/icon-alarm-badge.js';\nimport '../../icons/icon-warning-badge.js';\nimport '../../icons/icon-caution-badge.js';\nimport './critical-badge.js';\nimport './diagnostic-badge.js';\nimport {customElement} from '../../decorator.js';\nimport {AlertType} from '../../types.js';\nimport {\n  getAlertBadgeComponent,\n  AlertBadgeComponent,\n} from '../../alert-severity.js';\n\nexport {AlertType as ObcAlertFrameStatus} from '../../types.js';\n\n/**\n * Enum representing the available frame styles for an alert component.\n *\n * - Regular (\"regular\"): Standard alert frame layout.\n * - SmallSideFlip (\"small-side-flip\"): Flipped frame with a small side edge.\n * - LargeSideFlip (\"large-side-flip\"): Flipped frame with a large side edge.\n * - BottomFlip (\"bottom-flip\"): Frame flipped to the bottom position.\n */\nexport enum ObcAlertFrameType {\n  Regular = 'regular',\n  SmallSideFlip = 'small-side-flip',\n  LargeSideFlip = 'large-side-flip',\n  BottomFlip = 'bottom-flip',\n  TopFlip = 'top-flip',\n}\n\n/**\n * Thickness options for the alert frame border.\n * - `small`: Thin border (default).\n * - `large`: Thick border for higher emphasis.\n */\nexport enum ObcAlertFrameThickness {\n  Small = 'small',\n  Large = 'large',\n}\n\nexport enum ObcAlertFrameMode {\n  ackedActive = 'acked-active',\n  unackedActive = 'unacked-active',\n  unackedRectified = 'unacked-rectified',\n}\n\n/**\n * Text size options for flip-flap typography.\n * - `regular`: Standard text size (default).\n * - `large`: Larger text for increased visibility.\n */\nexport enum AlertFrameTextSize {\n  Regular = 'regular',\n  Large = 'large',\n}\n\nexport interface AlertFrameConfig {\n  type?: ObcAlertFrameType;\n  thickness?: ObcAlertFrameThickness;\n  status?: AlertType;\n  mode?: ObcAlertFrameMode;\n  textSize?: AlertFrameTextSize;\n  showIcon?: boolean;\n  showAlertCategoryIcon?: boolean;\n}\n\n/**\n * `<obc-alert-frame>` – A bordered frame component for visually emphasizing alert or status messages.\n *\n * The alert frame provides a prominent outline and optional \"flap\" with status icon to draw attention to critical information or UI regions. It supports multiple visual variants and thicknesses, and can be configured to indicate different alert statuses (alarm, warning, caution). The component is designed to wrap content and visually distinguish it from the surrounding UI.\n *\n * ### Features\n * - **Variants (type):**\n *   - `regular`: Standard outlined frame with no flap or icon.\n *   - `small-side-flip`: Adds a small side flap with a status icon at the top right.\n *   - `large-side-flip`: Adds a larger, vertical side flap with a status icon and optional custom icon.\n *   - `bottom-flip`: Adds a bottom flap with a status icon, label, and timer slots.\n * - **Thickness options:** Choose between `small` (thin border) and `large` (thick border) for visual emphasis.\n * - **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`).\n * - **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.\n * - **Content wrapping:** When `wrapContent` is true, the frame wraps and sizes itself to its slotted content rather than overlaying a fixed region.\n * - **Customizable corners:** Each corner can be set to a sharp (non-rounded) edge for integration with other UI elements.\n * - **Slot-based content:** Supports custom icons, labels, and timers in flap variants via named slots.\n *\n * ### Usage Guidelines\n * Use `obc-alert-frame` to highlight important content, such as alerts, warnings, or status panels. The flap variants are ideal for drawing extra attention to urgent or time-sensitive information, while the regular type provides a subtle but clear border. Choose the status to match the severity of the message (alarm, warning, caution). Adjust thickness for visual hierarchy—use large for high-priority alerts and small for less critical notices.\n *\n * **TODO(designer):** Provide guidance on when to use each flap type (small-side-flip, large-side-flip, bottom-flip) and recommended scenarios for sharp edge usage.\n *\n * ### Features/Variants\n * - **Type (Visual Variant):**\n *   - `regular`: Simple outlined frame, no flap or icon.\n *   - `small-side-flip`: Small right-side flap with status icon.\n *   - `large-side-flip`: Large vertical right-side flap with status icon and optional custom icon.\n *   - `bottom-flip`: Bottom flap with status icon, label, and timer.\n * - **Thickness:** `small` (default) or `large` for border width.\n * - **Status:** `alarm`, `warning`, `caution`, or the ISA severities (`isa-critical`, `isa-high`, `isa-medium`, `isa-low`, `isa-diagnostic`)—affects color and icon.\n * - **Mode:** `acked-active` (default), `unacked-active`, or `unacked-rectified`—affects blinking/animation.\n * - **Corner Customization:** Each corner can be made sharp (not rounded) via boolean properties.\n *\n * ### Slots and Content Structure\n *\n * | Slot Name | Renders When... | Purpose |\n * |-----------|-----------------|---------|\n * | (default) | Always | Main content inside the alert frame. |\n * | icon | `large-side-flip` or `bottom-flip` | Custom icon displayed in the flap (in addition to status icon). |\n * | label | `bottom-flip` only | Label text shown in the bottom flap. |\n * | timer | `bottom-flip` only | Timer or time label in the bottom flap. |\n *\n * ### Properties and Attributes\n * - `type`: Selects the visual variant/flap style. Default is `small-side-flip`.\n * - `thickness`: Controls border thickness (`small` or `large`). Default is `small`.\n * - `status`: Sets the alert status and color/icon (`alarm`, `warning`, `caution`, or the `isa-*` severities). Default is `alarm`.\n * - `mode`: Acknowledgement lifecycle state (`acked-active`, `unacked-active`, `unacked-rectified`) controlling blinking/animation. Default is `acked-active`.\n * - `wrapContent`: When true, the frame wraps and sizes to its slotted content instead of overlaying a fixed region. Default is `false`.\n * - `sharpEdgeTopLeft`, `sharpEdgeTopRight`, `sharpEdgeBottomLeft`, `sharpEdgeBottomRight`: Boolean flags to make each corner sharp instead of rounded.\n *\n * ### Best Practices and Constraints\n * - Use the status property to match the severity of the alert.\n * - Only use the bottom-flip variant when both label and timer are relevant.\n * - For visual consistency, align sharp edge settings with adjacent UI elements.\n * - The default slot is for the main content; use named slots for icons, labels, and timers as needed.\n *\n * ### Example:\n * ```\n * <obc-alert-frame\n *   type=\"bottom-flip\"\n *   thickness=\"large\"\n *   status=\"warning\"\n *   sharpEdgeTopLeft\n * >\n *   <obi-placeholder slot=\"icon\"></obi-placeholder>\n *   <div slot=\"label\">Low Battery</div>\n *   <div slot=\"timer\">00:15</div>\n *   <div>Critical system message goes here.</div>\n * </obc-alert-frame>\n * ```\n *\n * @slot - Default slot for main alert content.\n * @slot icon - Custom icon for the flap (large-side-flip, bottom-flip).\n * @slot label - Label text for the bottom flap (bottom-flip only).\n * @slot timer - Timer or time label for the bottom flap (bottom-flip only).\n */\n@customElement('obc-alert-frame')\nexport class ObcAlertFrame extends LitElement {\n  /**\n   * Visual variant of the alert frame.\n   * - `regular`: Outlined frame only.\n   * - `small-side-flip`: Small right-side flap with status icon.\n   * - `large-side-flip`: Large vertical right-side flap with status icon and optional custom icon.\n   * - `bottom-flip`: Bottom flap with status icon, label, and timer.\n   *\n   * Default: `small-side-flip`\n   */\n  @property({type: String}) type: ObcAlertFrameType =\n    ObcAlertFrameType.SmallSideFlip;\n\n  /**\n   * Border thickness of the alert frame.\n   * - `small`: Thin border (default).\n   * - `large`: Thick border for higher emphasis.\n   */\n  @property({type: String}) thickness: ObcAlertFrameThickness =\n    ObcAlertFrameThickness.Small;\n\n  /**\n   * Status of the alert, controlling color scheme and icon.\n   * - `alarm`: Highest severity (default).\n   * - `warning`: Medium severity.\n   * - `caution`: Lower severity.\n   * - `isa-critical`, `isa-high`, `isa-medium`, `isa-low`, `isa-diagnostic`: ISA severity levels, styled to match their legacy equivalents.\n   */\n  @property({type: String}) status: AlertType = AlertType.Alarm;\n\n  /**\n   * Acknowledgement lifecycle state, controlling the frame's blinking/animation.\n   * - `acked-active`: Active and acknowledged (default); no blinking.\n   * - `unacked-active`: Active and not yet acknowledged; blinks.\n   * - `unacked-rectified`: Condition cleared but not yet acknowledged.\n   */\n  @property({type: String}) mode: ObcAlertFrameMode =\n    ObcAlertFrameMode.ackedActive;\n\n  /**\n   * When true, the frame wraps and sizes itself to its slotted content instead\n   * of overlaying a fixed region. Reflected to an attribute for CSS styling.\n   */\n  @property({type: Boolean, reflect: true}) wrapContent: boolean = false;\n\n  /**\n   * If true, the top-left corner will be sharp (not rounded).\n   */\n  @property({type: Boolean}) sharpEdgeTopLeft: boolean = false;\n\n  /**\n   * If true, the top-right corner will be sharp (not rounded).\n   */\n  @property({type: Boolean}) sharpEdgeTopRight: boolean = false;\n\n  /**\n   * If true, the bottom-left corner will be sharp (not rounded).\n   */\n  @property({type: Boolean}) sharpEdgeBottomLeft: boolean = false;\n\n  /**\n   * If true, the bottom-right corner will be sharp (not rounded).\n   */\n  @property({type: Boolean}) sharpEdgeBottomRight: boolean = false;\n\n  @property({type: String}) textSize: AlertFrameTextSize =\n    AlertFrameTextSize.Regular;\n\n  @property({type: Boolean}) showIcon: boolean = false;\n  @property({type: Boolean, attribute: false}) showAlertCategoryIcon: boolean =\n    true;\n\n  override render() {\n    return html`\n      <div\n        class=${classMap({\n          wrapper: true,\n          'wrap-content': this.wrapContent,\n          ['thickness-' + this.thickness]: true,\n          [this.type]: true,\n          [this.status]: true,\n          ['text-size-' + this.textSize]: true,\n          'sharp-edge-top-left': this.sharpEdgeTopLeft,\n          'sharp-edge-top-right': this.sharpEdgeTopRight,\n          'sharp-edge-bottom-left': this.sharpEdgeBottomLeft,\n          'sharp-edge-bottom-right': this.sharpEdgeBottomRight,\n          [this.mode]: true,\n        })}\n      >\n        <slot></slot>\n        ${this.flap()}\n      </div>\n    `;\n  }\n\n  private flap() {\n    if (this.type === ObcAlertFrameType.Regular) {\n      return nothing;\n    }\n\n    if (\n      this.type === ObcAlertFrameType.SmallSideFlip &&\n      !this.showAlertCategoryIcon\n    ) {\n      return nothing;\n    }\n\n    if (\n      this.type === ObcAlertFrameType.LargeSideFlip &&\n      !this.showIcon &&\n      !this.showAlertCategoryIcon\n    ) {\n      return nothing;\n    }\n\n    let icon: TemplateResult | typeof nothing;\n    if (!this.showAlertCategoryIcon) {\n      icon = nothing;\n    } else {\n      icon = this.renderBadgeIcon();\n    }\n\n    if (this.type === ObcAlertFrameType.SmallSideFlip) {\n      return html`<div class=\"flap small\">\n        ${icon}\n        <div class=\"mask up\"></div>\n      </div>`;\n    }\n    if (this.type === ObcAlertFrameType.LargeSideFlip) {\n      return html`<div class=\"flap large\">\n        ${icon}\n        ${this.showIcon\n          ? html`<div class=\"icon\"><slot name=\"icon\"></slot></div>`\n          : nothing}\n        <div class=\"mask up\"></div>\n        <div class=\"mask down\"></div>\n      </div>`;\n    }\n    if (\n      this.type === ObcAlertFrameType.BottomFlip ||\n      this.type === ObcAlertFrameType.TopFlip\n    ) {\n      return html`<div\n        class=\"flap ${this.type === ObcAlertFrameType.BottomFlip\n          ? 'bottom'\n          : 'top'}\"\n      >\n        ${icon}\n        ${this.showIcon\n          ? html`<div class=\"icon\"><slot name=\"icon\"></slot></div>`\n          : nothing}\n        <div class=\"label\"><slot name=\"label\"></slot></div>\n        <div class=\"spacer\"></div>\n        <div class=\"timer\"><slot name=\"timer\"></slot></div>\n        <div class=\"mask right\"></div>\n        <div class=\"mask left\"></div>\n      </div>`;\n    }\n    console.error('Unknown type of alert frame:', this.type);\n    return nothing;\n  }\n\n  private renderBadgeIcon(): TemplateResult {\n    switch (getAlertBadgeComponent(this.status)) {\n      case AlertBadgeComponent.Critical:\n        return html`<obi-critical-badge\n          class=\"icon badge\"\n        ></obi-critical-badge>`;\n      case AlertBadgeComponent.Warning:\n        return html`<obi-warning-badge class=\"icon badge\"></obi-warning-badge>`;\n      case AlertBadgeComponent.Caution:\n        return html`<obi-caution-badge class=\"icon badge\"></obi-caution-badge>`;\n      case AlertBadgeComponent.Diagnostic:\n        return html`<obi-diagnostic-badge\n          class=\"icon badge\"\n        ></obi-diagnostic-badge>`;\n      default:\n        return html`<obi-alarm-badge class=\"icon badge\"></obi-alarm-badge>`;\n    }\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\nexport function wrapWithAlertFrame(\n  options: AlertFrameConfig | boolean | undefined,\n  content: HTMLTemplateResult\n): HTMLTemplateResult {\n  if (typeof options !== 'object' || options === null) {\n    return content;\n  }\n  return html`<obc-alert-frame\n    .type=${options.type ?? ObcAlertFrameType.SmallSideFlip}\n    .thickness=${options.thickness ?? ObcAlertFrameThickness.Small}\n    .status=${options.status ?? AlertType.Alarm}\n    .mode=${options.mode ?? ObcAlertFrameMode.ackedActive}\n    .showIcon=${options.showIcon ?? false}\n    .showAlertCategoryIcon=${options.showAlertCategoryIcon ?? true}\n    .wrapContent=${true}\n    >${content}</obc-alert-frame\n  >`;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-alert-frame': ObcAlertFrame;\n  }\n}\n"],"names":["ObcAlertFrameType","ObcAlertFrameThickness","ObcAlertFrameMode","AlertFrameTextSize"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAiCO,IAAK,sCAAAA,uBAAL;AACLA,qBAAA,SAAA,IAAU;AACVA,qBAAA,eAAA,IAAgB;AAChBA,qBAAA,eAAA,IAAgB;AAChBA,qBAAA,YAAA,IAAa;AACbA,qBAAA,SAAA,IAAU;AALA,SAAAA;AAAA,GAAA,qBAAA,CAAA,CAAA;AAaL,IAAK,2CAAAC,4BAAL;AACLA,0BAAA,OAAA,IAAQ;AACRA,0BAAA,OAAA,IAAQ;AAFE,SAAAA;AAAA,GAAA,0BAAA,CAAA,CAAA;AAKL,IAAK,sCAAAC,uBAAL;AACLA,qBAAA,aAAA,IAAc;AACdA,qBAAA,eAAA,IAAgB;AAChBA,qBAAA,kBAAA,IAAmB;AAHT,SAAAA;AAAA,GAAA,qBAAA,CAAA,CAAA;AAWL,IAAK,uCAAAC,wBAAL;AACLA,sBAAA,SAAA,IAAU;AACVA,sBAAA,OAAA,IAAQ;AAFE,SAAAA;AAAA,GAAA,sBAAA,CAAA,CAAA;AA6FL,IAAM,gBAAN,cAA4B,WAAW;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA;AAUqB,SAAA,OACxB;AAOwB,SAAA,YACxB;AASwB,SAAA,SAAoB,UAAU;AAQ9B,SAAA,OACxB;AAMwC,SAAA,cAAuB;AAKtC,SAAA,mBAA4B;AAK5B,SAAA,oBAA6B;AAK7B,SAAA,sBAA+B;AAK/B,SAAA,uBAAgC;AAEjC,SAAA,WACxB;AAEyB,SAAA,WAAoB;AACF,SAAA,wBAC3C;AAAA,EAAA;AAAA,EAEO,SAAS;AAChB,WAAO;AAAA;AAAA,gBAEK,SAAS;AAAA,MACf,SAAS;AAAA,MACT,gBAAgB,KAAK;AAAA,MACrB,CAAC,eAAe,KAAK,SAAS,GAAG;AAAA,MACjC,CAAC,KAAK,IAAI,GAAG;AAAA,MACb,CAAC,KAAK,MAAM,GAAG;AAAA,MACf,CAAC,eAAe,KAAK,QAAQ,GAAG;AAAA,MAChC,uBAAuB,KAAK;AAAA,MAC5B,wBAAwB,KAAK;AAAA,MAC7B,0BAA0B,KAAK;AAAA,MAC/B,2BAA2B,KAAK;AAAA,MAChC,CAAC,KAAK,IAAI,GAAG;AAAA,IAAA,CACd,CAAC;AAAA;AAAA;AAAA,UAGA,KAAK,MAAM;AAAA;AAAA;AAAA,EAGnB;AAAA,EAEQ,OAAO;AACb,QAAI,KAAK,SAAS,WAA2B;AAC3C,aAAO;AAAA,IACT;AAEA,QACE,KAAK,SAAS,qBACd,CAAC,KAAK,uBACN;AACA,aAAO;AAAA,IACT;AAEA,QACE,KAAK,SAAS,qBACd,CAAC,KAAK,YACN,CAAC,KAAK,uBACN;AACA,aAAO;AAAA,IACT;AAEA,QAAI;AACJ,QAAI,CAAC,KAAK,uBAAuB;AAC/B,aAAO;AAAA,IACT,OAAO;AACL,aAAO,KAAK,gBAAA;AAAA,IACd;AAEA,QAAI,KAAK,SAAS,mBAAiC;AACjD,aAAO;AAAA,UACH,IAAI;AAAA;AAAA;AAAA,IAGV;AACA,QAAI,KAAK,SAAS,mBAAiC;AACjD,aAAO;AAAA,UACH,IAAI;AAAA,UACJ,KAAK,WACH,0DACA,OAAO;AAAA;AAAA;AAAA;AAAA,IAIf;AACA,QACE,KAAK,SAAS,iBACd,KAAK,SAAS,YACd;AACA,aAAO;AAAA,sBACS,KAAK,SAAS,gBACxB,WACA,KAAK;AAAA;AAAA,UAEP,IAAI;AAAA,UACJ,KAAK,WACH,0DACA,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOf;AACA,YAAQ,MAAM,gCAAgC,KAAK,IAAI;AACvD,WAAO;AAAA,EACT;AAAA,EAEQ,kBAAkC;AACxC,YAAQ,uBAAuB,KAAK,MAAM,GAAA;AAAA,MACxC,KAAK,oBAAoB;AACvB,eAAO;AAAA;AAAA;AAAA,MAGT,KAAK,oBAAoB;AACvB,eAAO;AAAA,MACT,KAAK,oBAAoB;AACvB,eAAO;AAAA,MACT,KAAK,oBAAoB;AACvB,eAAO;AAAA;AAAA;AAAA,MAGT;AACE,eAAO;AAAA,IAAA;AAAA,EAEb;AAGF;AAtLa,cAqLK,SAAS,UAAU,YAAY;AA3KrB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAVb,cAUe,WAAA,QAAA,CAAA;AAQA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAlBb,cAkBe,WAAA,aAAA,CAAA;AAUA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GA5Bb,cA4Be,WAAA,UAAA,CAAA;AAQA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GApCb,cAoCe,WAAA,QAAA,CAAA;AAOgB,gBAAA;AAAA,EAAzC,SAAS,EAAC,MAAM,SAAS,SAAS,MAAK;AAAA,GA3C7B,cA2C+B,WAAA,eAAA,CAAA;AAKf,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAhDd,cAgDgB,WAAA,oBAAA,CAAA;AAKA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GArDd,cAqDgB,WAAA,qBAAA,CAAA;AAKA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GA1Dd,cA0DgB,WAAA,uBAAA,CAAA;AAKA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GA/Dd,cA+DgB,WAAA,wBAAA,CAAA;AAED,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAjEb,cAiEe,WAAA,YAAA,CAAA;AAGC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GApEd,cAoEgB,WAAA,YAAA,CAAA;AACkB,gBAAA;AAAA,EAA5C,SAAS,EAAC,MAAM,SAAS,WAAW,OAAM;AAAA,GArEhC,cAqEkC,WAAA,yBAAA,CAAA;AArElC,gBAAN,gBAAA;AAAA,EADN,cAAc,iBAAiB;AAAA,GACnB,aAAA;AAwLN,SAAS,mBACd,SACA,SACoB;AACpB,MAAI,OAAO,YAAY,YAAY,YAAY,MAAM;AACnD,WAAO;AAAA,EACT;AACA,SAAO;AAAA,YACG,QAAQ,QAAQ,iBAAA;AAAA,iBACX,QAAQ,aAAa,OAAA;AAAA,cACxB,QAAQ,UAAU,UAAU,KAAK;AAAA,YACnC,QAAQ,QAAQ,cAAA;AAAA,gBACZ,QAAQ,YAAY,KAAK;AAAA,6BACZ,QAAQ,yBAAyB,IAAI;AAAA,mBAC/C,IAAI;AAAA,OAChB,OAAO;AAAA;AAEd;"}

package/dist/components/alert-frame/critical-badge.d.ts

@@ -0,0 +1,12 @@
+import { LitElement } from 'lit';
+export declare class ObiCriticalBadge extends LitElement {
+    private icon;
+    render(): import('lit-html').TemplateResult<1>;
+    static styles: import('lit').CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'obi-critical-badge': ObiCriticalBadge;
+    }
+}
+//# sourceMappingURL=critical-badge.d.ts.map

package/dist/components/alert-frame/critical-badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"critical-badge.d.ts","sourceRoot":"","sources":["../../../src/components/alert-frame/critical-badge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAiB,MAAM,KAAK,CAAC;AAG/C,qBACa,gBAAiB,SAAQ,UAAU;IAC9C,OAAO,CAAC,IAAI,CAUZ;IAES,MAAM;IAIf,OAAgB,MAAM,0BAUpB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAC;KACxC;CACF"}

package/dist/components/alert-frame/critical-badge.js

@@ -0,0 +1,47 @@
+import { css, LitElement, svg, html } from "lit";
+import { customElement } from "../../decorator.js";
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(result) || result;
+  return result;
+};
+let ObiCriticalBadge = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.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>
+`;
+  }
+  render() {
+    return html` <div class="wrapper">${this.icon}</div> `;
+  }
+};
+ObiCriticalBadge.styles = css`
+    .wrapper {
+      height: 100%;
+      width: 100%;
+      line-height: 0;
+    }
+    .wrapper > * {
+      height: 100%;
+      width: 100%;
+    }
+  `;
+ObiCriticalBadge = __decorateClass([
+  customElement("obi-critical-badge")
+], ObiCriticalBadge);
+export {
+  ObiCriticalBadge
+};
+//# sourceMappingURL=critical-badge.js.map

package/dist/components/alert-frame/critical-badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"critical-badge.js","sources":["../../../src/components/alert-frame/critical-badge.ts"],"sourcesContent":["import {LitElement, html, css, svg} from 'lit';\nimport {customElement} from '../../decorator.js';\n\n@customElement('obi-critical-badge')\nexport class ObiCriticalBadge extends LitElement {\n  private icon = svg`<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M 22,12 \n           L 17,20.66 \n           L 7,20.66 \n           L 2,12 \n           L 7,3.34 \n           L 17,3.34 \n           Z\" \n        fill=\"currentColor\"/>\n</svg>\n`;\n\n  override render() {\n    return html` <div class=\"wrapper\">${this.icon}</div> `;\n  }\n\n  static override styles = css`\n    .wrapper {\n      height: 100%;\n      width: 100%;\n      line-height: 0;\n    }\n    .wrapper > * {\n      height: 100%;\n      width: 100%;\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obi-critical-badge': ObiCriticalBadge;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;AAIO,IAAM,mBAAN,cAA+B,WAAW;AAAA,EAA1C,cAAA;AAAA,UAAA,GAAA,SAAA;AACL,SAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAAA,EAYN,SAAS;AAChB,WAAO,6BAA6B,KAAK,IAAI;AAAA,EAC/C;AAaF;AA5Ba,iBAiBK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAjBd,mBAAN,gBAAA;AAAA,EADN,cAAc,oBAAoB;AAAA,GACtB,gBAAA;"}

package/dist/components/alert-frame/diagnostic-badge.d.ts

@@ -0,0 +1,12 @@
+import { LitElement } from 'lit';
+export declare class ObiDiagnosticBadge extends LitElement {
+    private icon;
+    render(): import('lit-html').TemplateResult<1>;
+    static styles: import('lit').CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'obi-diagnostic-badge': ObiDiagnosticBadge;
+    }
+}
+//# sourceMappingURL=diagnostic-badge.d.ts.map

package/dist/components/alert-frame/diagnostic-badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"diagnostic-badge.d.ts","sourceRoot":"","sources":["../../../src/components/alert-frame/diagnostic-badge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAiB,MAAM,KAAK,CAAC;AAG/C,qBACa,kBAAmB,SAAQ,UAAU;IAChD,OAAO,CAAC,IAAI,CAuBZ;IAES,MAAM;IAIf,OAAgB,MAAM,0BAUpB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,kBAAkB,CAAC;KAC5C;CACF"}

package/dist/components/alert-frame/diagnostic-badge.js

@@ -0,0 +1,60 @@
+import { css, LitElement, svg, html } from "lit";
+import { customElement } from "../../decorator.js";
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(result) || result;
+  return result;
+};
+let ObiDiagnosticBadge = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.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>
+
+`;
+  }
+  render() {
+    return html` <div class="wrapper">${this.icon}</div> `;
+  }
+};
+ObiDiagnosticBadge.styles = css`
+    .wrapper {
+      height: 100%;
+      width: 100%;
+      line-height: 0;
+    }
+    .wrapper > * {
+      height: 100%;
+      width: 100%;
+    }
+  `;
+ObiDiagnosticBadge = __decorateClass([
+  customElement("obi-diagnostic-badge")
+], ObiDiagnosticBadge);
+export {
+  ObiDiagnosticBadge
+};
+//# sourceMappingURL=diagnostic-badge.js.map

package/dist/components/alert-frame/diagnostic-badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"diagnostic-badge.js","sources":["../../../src/components/alert-frame/diagnostic-badge.ts"],"sourcesContent":["import {LitElement, html, css, svg} from 'lit';\nimport {customElement} from '../../decorator.js';\n\n@customElement('obi-diagnostic-badge')\nexport class ObiDiagnosticBadge extends LitElement {\n  private icon = svg`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"100\" height=\"100\">\n  <path d=\"M 10.5,2 \n           L 13.5,2 \n           L 13.5,9.4 \n           L 19.91,5.7 \n           L 21.41,8.3 \n           L 15,12 \n           L 21.41,15.7 \n           L 19.91,18.3 \n           L 13.5,14.6 \n           L 13.5,22 \n           L 10.5,22 \n           L 10.5,14.6 \n           L 4.09,18.3 \n           L 2.59,15.7 \n           L 9,12 \n           L 2.59,8.3 \n           L 4.09,5.7 \n           L 10.5,9.4 \n           Z\" \n        fill=\"currentColor\" />\n</svg>\n\n`;\n\n  override render() {\n    return html` <div class=\"wrapper\">${this.icon}</div> `;\n  }\n\n  static override styles = css`\n    .wrapper {\n      height: 100%;\n      width: 100%;\n      line-height: 0;\n    }\n    .wrapper > * {\n      height: 100%;\n      width: 100%;\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obi-diagnostic-badge': ObiDiagnosticBadge;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;AAIO,IAAM,qBAAN,cAAiC,WAAW;AAAA,EAA5C,cAAA;AAAA,UAAA,GAAA,SAAA;AACL,SAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAAA,EAyBN,SAAS;AAChB,WAAO,6BAA6B,KAAK,IAAI;AAAA,EAC/C;AAaF;AAzCa,mBA8BK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA9Bd,qBAAN,gBAAA;AAAA,EADN,cAAc,sBAAsB;AAAA,GACxB,kBAAA;"}

package/dist/components/alert-icon/alert-icon.d.ts

@@ -4,6 +4,8 @@ import '../../icons/icon-caution-color-iec.js';
 import '../../icons/icon-alarm-badge-outline.js';
 import '../../icons/icon-warning-badge-outline.js';
 import '../../icons/icon-caution-badge-outline.js';
+import '../alert-frame/critical-badge.js';
+import '../alert-frame/diagnostic-badge.js';
 /**
  * `obc-alert-icon` – Animated alert icon for signaling alarm and warning states.
  *
@@ -42,10 +44,13 @@ export declare class ObcAlertIcon extends LitElement {
     acknowledged: boolean;
     active: boolean;
     outline: boolean;
+    private get bamType();
     get icon(): {
         a: TemplateResult<2>;
         b: TemplateResult<2>;
-    };
+    } | null;
+    private renderOutlineIcon;
+    private renderStaticIcon;
     render(): TemplateResult<1>;
     static styles: import('lit').CSSResult;
 }

package/dist/components/alert-icon/alert-icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"alert-icon.d.ts","sourceRoot":"","sources":["../../../src/components/alert-icon/alert-icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAa,cAAc,EAAC,MAAM,KAAK,CAAC;AAY1D,OAAO,uCAAuC,CAAC;AAE/C,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AACzC,OAAO,yCAAyC,CAAC;AACjD,OAAO,2CAA2C,CAAC;AACnD,OAAO,2CAA2C,CAAC;AAqCnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,qBACa,YAAa,SAAQ,UAAU;IAChB,IAAI,EAAG,SAAS,CAAC;IAChB,YAAY,EAAG,OAAO,CAAC;IACvB,MAAM,EAAG,OAAO,CAAC;IACjB,OAAO,EAAG,OAAO,CAAC;IAE7C,IAAI,IAAI;;;MAkBP;IAEQ,MAAM;IAuCf,OAAgB,MAAM,0BAiCpB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}
+{"version":3,"file":"alert-icon.d.ts","sourceRoot":"","sources":["../../../src/components/alert-icon/alert-icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAa,cAAc,EAAU,MAAM,KAAK,CAAC;AAYnE,OAAO,uCAAuC,CAAC;AAE/C,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAQzC,OAAO,yCAAyC,CAAC;AACjD,OAAO,2CAA2C,CAAC;AACnD,OAAO,2CAA2C,CAAC;AACnD,OAAO,kCAAkC,CAAC;AAC1C,OAAO,oCAAoC,CAAC;AA2C5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,qBACa,YAAa,SAAQ,UAAU;IAChB,IAAI,EAAG,SAAS,CAAC;IAChB,YAAY,EAAG,OAAO,CAAC;IACvB,MAAM,EAAG,OAAO,CAAC;IACjB,OAAO,EAAG,OAAO,CAAC;IAE7C,OAAO,KAAK,OAAO,GAElB;IAED,IAAI,IAAI;;;aAsBP;IAED,OAAO,CAAC,iBAAiB;IAiBzB,OAAO,CAAC,gBAAgB;IAYf,MAAM;IA4Bf,OAAgB,MAAM,0BAuDpB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}

package/dist/components/alert-icon/alert-icon.js

@@ -1,4 +1,4 @@
-import { css, LitElement, html } from "lit";
+import { css, LitElement, html, nothing } from "lit";
 import { property } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { alarmRectifiedA } from "./icons/icon-alarm-rectified.js";
@@ -10,9 +10,13 @@ import { warningUnackB, warningUnackA } from "./icons/icon-warning-unack.js";
 import "../../icons/icon-caution-color-iec.js";
 import { customElement } from "../../decorator.js";
 import { AlertType } from "../../types.js";
+import { getBamAlertTypeForBlinking, getAlertBadgeComponent, AlertBadgeComponent, supportsBlinking, getAlertBlinkMode } from "../../alert-severity.js";
 import "../../icons/icon-alarm-badge-outline.js";
 import "../../icons/icon-warning-badge-outline.js";
 import "../../icons/icon-caution-badge-outline.js";
+import "../alert-frame/critical-badge.js";
+import "../alert-frame/diagnostic-badge.js";
+import { criticalB, criticalA } from "./icons/icon-critical.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -65,11 +69,26 @@ const mapping = {
   ]: {
     a: warningSilencedA,
     b: warningSilencedB
+  },
+  [
+    "critical"
+    /* Critical */
+  ]: {
+    a: criticalA,
+    b: criticalB
   }
 };
 let ObcAlertIcon = class extends LitElement {
+  get bamType() {
+    return getBamAlertTypeForBlinking(this.type);
+  }
   get icon() {
-    if (this.type === AlertType.Alarm) {
+    if (this.type === AlertType.IsaCritical) {
+      return mapping[
+        "critical"
+        /* Critical */
+      ];
+    } else if (this.bamType === AlertType.Alarm) {
       if (this.active === false) {
         return mapping[
           "alarm-rectified"
@@ -86,7 +105,7 @@ let ObcAlertIcon = class extends LitElement {
           /* AlarmUnack */
         ];
       }
-    } else {
+    } else if (this.bamType === AlertType.Warning) {
       if (this.active === false) {
         return mapping[
           "warning-rectified"
@@ -104,44 +123,61 @@ let ObcAlertIcon = class extends LitElement {
         ];
       }
     }
+    return null;
+  }
+  renderOutlineIcon() {
+    switch (getAlertBadgeComponent(this.type)) {
+      case AlertBadgeComponent.Critical:
+        return html`<obi-critical-badge></obi-critical-badge>`;
+      case AlertBadgeComponent.Warning:
+        return html`<obi-warning-badge-outline></obi-warning-badge-outline>`;
+      case AlertBadgeComponent.Caution:
+        return html`<obi-caution-badge-outline></obi-caution-badge-outline>`;
+      case AlertBadgeComponent.Diagnostic:
+        return html`<obi-diagnostic-badge
+          style="color: var(--alert-diagnostic-color);"
+        ></obi-diagnostic-badge>`;
+      default:
+        return html`<obi-alarm-badge-outline></obi-alarm-badge-outline>`;
+    }
+  }
+  renderStaticIcon() {
+    if (this.type === AlertType.Caution || this.type === AlertType.IsaLow) {
+      return html`<obi-caution-color-iec usecsscolor></obi-caution-color-iec>`;
+    }
+    if (this.type === AlertType.IsaDiagnostic) {
+      return html`<obi-diagnostic-badge
+        style="color: var(--alert-diagnostic-color);"
+      ></obi-diagnostic-badge>`;
+    }
+    return nothing;
   }
   render() {
     if (!this.type) {
       return html`<div>No alarm</div>`;
     }
-    let icon;
     if (this.outline) {
-      switch (this.type) {
-        case AlertType.Alarm:
-          icon = html`<obi-alarm-badge-outline></obi-alarm-badge-outline>`;
-          break;
-        case AlertType.Warning:
-          icon = html`<obi-warning-badge-outline></obi-warning-badge-outline>`;
-          break;
-        case AlertType.Caution:
-          icon = html`<obi-caution-badge-outline></obi-caution-badge-outline>`;
-          break;
-      }
-    } else if (this.type === AlertType.Caution) {
-      icon = html`<obi-caution-color-iec usecsscolor></obi-caution-color-iec>`;
-    } else if ([AlertType.Alarm, AlertType.Warning].includes(this.type)) {
+      return html`<div class="wrapper">${this.renderOutlineIcon()}</div>`;
+    }
+    if (supportsBlinking(this.type) && !(this.type === AlertType.IsaLow)) {
       const icons = this.icon;
-      const isWarning = this.type === AlertType.Warning;
+      if (!icons) {
+        throw new Error("No icon found");
+      }
+      const blinkMode = getAlertBlinkMode(this.type);
       return html`
         <div
           class=${classMap({
         wrapper: true,
-        warning: isWarning
+        [`blink-${blinkMode}`]: true
       })}
         >
           <span class="a">${icons.a}</span>
           <span class="b">${icons.b}</span>
         </div>
       `;
-    } else {
-      return html`<div>No alarm</div>`;
     }
-    return html`<div class="wrapper">${icon}</div>`;
+    return html`<div class="wrapper">${this.renderStaticIcon()}</div>`;
   }
 };
 ObcAlertIcon.styles = css`
@@ -149,33 +185,55 @@ ObcAlertIcon.styles = css`
       height: 100%;
       width: 100%;
       position: relative;
-    }
-    .wrapper svg {
-      height: 100%;
-      width: 100%;
-      position: absolute;
-      top: 0;
-      left: 0;
-    }
 
-    :not(.warning) {
-      .a {
+      obi-diagnostic-badge,
+      obi-critical-badge {
+        display: block;
+        height: 100%;
+        width: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
+
+      svg {
+        height: 100%;
+        width: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
+      &.blink-alarm .a {
         opacity: var(--alarm-blink-on);
       }
 
-      .b {
+      &.blink-alarm .b {
         opacity: var(--alarm-blink-off);
       }
-    }
 
-    .warning {
-      .a {
+      &.blink-critical .a {
+        opacity: var(--critical-blink-on);
+      }
+
+      &.blink-critical .b {
+        opacity: var(--critical-blink-off);
+      }
+
+      &.blink-warning .a {
         opacity: var(--warning-blink-on);
       }
 
-      .b {
+      &.blink-warning .b {
         opacity: var(--warning-blink-off);
       }
+
+      &.blink-low .a {
+        opacity: var(--low-blink-on);
+      }
+
+      &.blink-low .b {
+        opacity: var(--low-blink-off);
+      }
     }
   `;
 __decorateClass([