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

package/dist/navigation-instruments/gauge-radial/gauge-radial.js.map

@@ -1 +1 @@
-{"version":3,"file":"gauge-radial.js","sources":["../../../src/navigation-instruments/gauge-radial/gauge-radial.ts"],"sourcesContent":["import {LitElement, html} from 'lit';\nimport {customElement} from '../../decorator.js';\nimport {property} from 'lit/decorators.js';\nimport {AdviceType} from '../watch/advice.js';\nimport {InstrumentState, Priority} from '../types.js';\nimport {SetpointMixin} from '../../svghelpers/setpoint-mixin.js';\nimport '../../building-blocks/instrument-radial/instrument-radial.js';\nimport {TickmarkStyle} from '../watch/tickmark.js';\n\nexport enum ObcGaugeRadialType {\n  filled = 'filled',\n  bar = 'bar',\n  needle = 'needle',\n}\n\nexport interface GaugeRadialAdvice {\n  minValue: number;\n  maxValue: number;\n  type: AdviceType;\n  hinted: boolean;\n}\n\n/**\n * `<obc-gauge-radial>` — Configurable radial gauge for generic numeric values.\n *\n * `ObcGaugeRadial` is a thin wrapper around `<obc-instrument-radial>` that adds\n * domain-independent value-to-angle mapping with automatic range handling for\n * both positive-only and bipolar (negative-to-positive) scales. It inherits a\n * full setpoint property bundle from {@link SetpointMixin}, including\n * auto at-setpoint detection, dual-marker adjustment preview, and deadband\n * tuning — no manual wiring required.\n *\n * ## Features\n *\n * - **Three display types**: `filled` (solid arc), `bar` (thinner arc), and\n *   `needle` (pointer indicator) via the `type` property.\n * - **Full-range mapping**: The configured `minValue..maxValue` always spans\n *   the full 270° sweep. Symmetric ranges still place `0` at 12 o'clock.\n * - **Setpoint via mixin**: `setpoint`, `newSetpoint`, `touching`,\n *   `autoAtSetpointDeadband`, `setpointOverride`, and all other setpoint\n *   properties are provided by `SetpointMixin` and forwarded to the inner\n *   `<obc-instrument-radial>`.\n * - **Advice zones**: Pass an array of {@link GaugeRadialAdvice} objects to\n *   render caution/alert arcs on the gauge.\n *\n * ## Usage Guidelines\n *\n * - Set `minValue` / `maxValue` to define the scale range.\n * - Use `priority` to switch between regular and enhanced color palettes.\n * - Provide `primaryTickmarkInterval` and `secondaryTickmarkInterval` to\n *   control tickmark density.\n * - Enable `showLabels` to show numeric labels at primary tickmarks.\n *\n * ## Best Practices\n *\n * - Prefer `SetpointMixin` properties (`setpoint`, `touching`, etc.) over\n *   any legacy aliases — the mixin is the single source of truth.\n * - Keep domain-specific logic (units, formatting) in the parent view; this\n *   component is intentionally unit-agnostic.\n *\n * ## Example\n *\n * ```html\n * <obc-gauge-radial\n *   value=\"42\"\n *   minValue=\"0\"\n *   maxValue=\"100\"\n *   type=\"filled\"\n *   enhanced\n *   showLabels\n *   primaryTickmarkInterval=\"25\"\n *   secondaryTickmarkInterval=\"5\"\n *   setpoint=\"60\"\n * ></obc-gauge-radial>\n * ```\n *\n * @element obc-gauge-radial\n * @typedef {import('./gauge-radial.js').GaugeRadialAdvice} GaugeRadialAdvice\n */\n@customElement('obc-gauge-radial')\nexport class ObcGaugeRadial extends SetpointMixin(LitElement) {\n  @property({type: Number}) value = 0;\n  @property({type: Number}) maxValue = 100;\n  @property({type: Number}) minValue = 0;\n  @property({type: Boolean}) showLabels: boolean = false;\n  @property({type: Number}) primaryTickmarkInterval = 50;\n  @property({type: Number}) secondaryTickmarkInterval = 10;\n  /**\n   * Interval for tertiary tickmarks in value units.\n   * When undefined or <= 0, no tertiary tickmarks are shown.\n   */\n  @property({type: Number}) tertiaryTickmarkInterval: number | undefined =\n    undefined;\n  @property({type: String}) state: InstrumentState = InstrumentState.active;\n  @property({type: String}) priority: Priority = Priority.regular;\n  @property({type: String}) type: ObcGaugeRadialType =\n    ObcGaugeRadialType.filled;\n  @property({type: Boolean}) tickmarksInside: boolean = false;\n  @property({type: String}) tickmarkStyle: TickmarkStyle =\n    TickmarkStyle.regular;\n  @property({type: Array, attribute: false}) advices: GaugeRadialAdvice[] = [];\n\n  getAngle(v: number): number {\n    const span = this.maxValue - this.minValue;\n    if (!Number.isFinite(span) || span <= 0) {\n      return -135;\n    }\n\n    return ((v - this.minValue) / span) * 270 - 135;\n  }\n\n  override render() {\n    return html`\n      <obc-instrument-radial\n        .value=${this.value}\n        .state=${this.state}\n        .priority=${this.priority}\n        .setpoint=${this.setpoint}\n        .newSetpoint=${this.newSetpoint}\n        .setpointAtZeroDeadband=${this.setpointAtZeroDeadband}\n        .setpointOverride=${this.setpointOverride}\n        .touching=${this.touching}\n        .autoAtSetpoint=${this.autoAtSetpoint}\n        .autoAtSetpointDeadband=${this.autoAtSetpointDeadband}\n        .animateSetpoint=${this.animateSetpoint}\n        .maxValue=${this.maxValue}\n        .minValue=${this.minValue}\n        .getAngle=${this.getAngle}\n        .showLabels=${this.showLabels}\n        .primaryTickmarkInterval=${this.primaryTickmarkInterval}\n        .secondaryTickmarkInterval=${this.secondaryTickmarkInterval}\n        .tertiaryTickmarkInterval=${this.tertiaryTickmarkInterval}\n        .type=${this.type}\n        .needleType=${this.type}\n        .tickmarksInside=${this.tickmarksInside}\n        .tickmarkStyle=${this.tickmarkStyle}\n        .advices=${this.advices}\n      >\n      </obc-instrument-radial>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-gauge-radial': ObcGaugeRadial;\n  }\n}\n"],"names":["ObcGaugeRadialType"],"mappings":"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"}
+{"version":3,"file":"gauge-radial.js","sources":["../../../src/navigation-instruments/gauge-radial/gauge-radial.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS, type TemplateResult} from 'lit';\nimport {classMap} from 'lit/directives/class-map.js';\nimport componentStyle from './gauge-radial.css?inline';\nimport {customElement} from '../../decorator.js';\nimport {property} from 'lit/decorators.js';\nimport {AdviceType} from '../watch/advice.js';\nimport {InstrumentState, Priority} from '../types.js';\nimport {SetpointMixin} from '../../svghelpers/setpoint-mixin.js';\nimport '../../building-blocks/instrument-radial/instrument-radial.js';\nimport {TickmarkStyle} from '../watch/tickmark.js';\nimport '../readout/readout.js';\nimport {\n  ReadoutStackVerticalAlignment,\n  ReadoutVariant,\n} from '../readout/readout.js';\n\nexport enum ObcGaugeRadialType {\n  filled = 'filled',\n  bar = 'bar',\n  needle = 'needle',\n}\n\nexport enum GaugeRadialSector {\n  deg270 = '270',\n  deg180 = '180',\n  deg90Left = '90-left',\n  deg90Right = '90-right',\n}\n\nexport interface GaugeRadialAdvice {\n  minValue: number;\n  maxValue: number;\n  type: AdviceType;\n  hinted: boolean;\n}\n\n/**\n * `<obc-gauge-radial>` — Configurable radial gauge for generic numeric values.\n *\n * `ObcGaugeRadial` is a thin wrapper around `<obc-instrument-radial>` that adds\n * domain-independent value-to-angle mapping with automatic range handling for\n * both positive-only and bipolar (negative-to-positive) scales. It inherits a\n * full setpoint property bundle from {@link SetpointMixin}, including\n * auto at-setpoint detection, dual-marker adjustment preview, and deadband\n * tuning — no manual wiring required.\n *\n * ## Features\n *\n * - **Three display types**: `filled` (solid arc), `bar` (thinner arc), and\n *   `needle` (pointer indicator) via the `type` property.\n * - **Sector sweep**: `sector` selects the arc span (`270`, `180`, `90-left`, or `90-right`).\n *   The configured `minValue..maxValue` always spans the full sector. For the\n *   centered sectors (`270`, `180`) a symmetric range places `0` at 12 o'clock;\n *   for `90-left`/`90-right` the range midpoint sits at the middle of the quadrant.\n * - **Setpoint via mixin**: `setpoint`, `newSetpoint`, `touching`,\n *   `autoAtSetpointDeadband`, `setpointOverride`, and all other setpoint\n *   properties are provided by `SetpointMixin` and forwarded to the inner\n *   `<obc-instrument-radial>`.\n * - **Advice zones**: Pass an array of {@link GaugeRadialAdvice} objects to\n *   render caution/alert arcs on the gauge. Not shown on the `90-left` /\n *   `90-right` sectors.\n *\n * ## Usage Guidelines\n *\n * - Set `minValue` / `maxValue` to define the scale range.\n * - Use `priority` to switch between regular and enhanced color palettes.\n * - Provide `primaryTickmarkInterval` and `secondaryTickmarkInterval` to\n *   control tickmark density.\n * - Enable `showLabels` to show numeric labels at primary tickmarks.\n * - Enable `showReadout` with optional `label` and `unit`. Layout depends on `sector`\n *   and `type`: **270** filled/bar — value at center + a label-only `meta` row in\n *   the bottom gap (two separate readouts); **180** filled/bar — a single centered\n *   stack (value + label/unit) at the bottom; **270** needle — bottom stack;\n *   **180** needle — no readout; **90-left** / **90-right** filled/bar — corner\n *   readout in a square host; **90** needle — no readout.\n *\n * ## Best Practices\n *\n * - Prefer `SetpointMixin` properties (`setpoint`, `touching`, etc.) over\n *   any legacy aliases — the mixin is the single source of truth.\n * - Keep domain-specific logic (units, formatting) in the parent view; this\n *   component is intentionally unit-agnostic.\n *\n * ## Example\n *\n * ```html\n * <obc-gauge-radial\n *   value=\"42\"\n *   minValue=\"0\"\n *   maxValue=\"100\"\n *   type=\"filled\"\n *   priority=\"enhanced\"\n *   showLabels\n *   primaryTickmarkInterval=\"25\"\n *   secondaryTickmarkInterval=\"5\"\n *   setpoint=\"60\"\n * ></obc-gauge-radial>\n * ```\n *\n * @element obc-gauge-radial\n * @typedef {import('./gauge-radial.js').GaugeRadialAdvice} GaugeRadialAdvice\n */\n@customElement('obc-gauge-radial')\nexport class ObcGaugeRadial extends SetpointMixin(LitElement) {\n  @property({type: Number}) value = 0;\n  @property({type: Number}) maxValue = 100;\n  @property({type: Number}) minValue = 0;\n  @property({type: Boolean}) showLabels: boolean = false;\n  @property({type: Number}) primaryTickmarkInterval = 50;\n  @property({type: Number}) secondaryTickmarkInterval = 10;\n  /**\n   * Interval for tertiary tickmarks in value units.\n   * When undefined or <= 0, no tertiary tickmarks are shown.\n   */\n  @property({type: Number}) tertiaryTickmarkInterval: number | undefined =\n    undefined;\n  @property({type: String}) state: InstrumentState = InstrumentState.active;\n  @property({type: String}) priority: Priority = Priority.regular;\n  @property({type: String}) type: ObcGaugeRadialType =\n    ObcGaugeRadialType.filled;\n  @property({type: Boolean}) tickmarksInside: boolean = false;\n  @property({type: String}) tickmarkStyle: TickmarkStyle =\n    TickmarkStyle.regular;\n  /** Caution/alert arcs. Ignored on `sector: 90-left` / `90-right`. */\n  @property({type: Array, attribute: false}) advices: GaugeRadialAdvice[] = [];\n  @property({type: String, reflect: true}) sector: GaugeRadialSector =\n    GaugeRadialSector.deg270;\n  @property({type: Boolean}) showReadout = false;\n  @property({type: String}) label = '';\n  @property({type: String}) unit = '';\n  @property({type: Number}) fractionDigits = 0;\n\n  private get sectorAngles(): {sweep: number; start: number} {\n    switch (this.sector) {\n      case GaugeRadialSector.deg180:\n        return {sweep: 180, start: -90};\n      case GaugeRadialSector.deg90Left:\n        return {sweep: 90, start: -90};\n      case GaugeRadialSector.deg90Right:\n        return {sweep: 90, start: 0};\n      case GaugeRadialSector.deg270:\n      default:\n        return {sweep: 270, start: -135};\n    }\n  }\n\n  /**\n   * Per-edge crop (%) of the shared, origin-centered 448 SVG box each sector\n   * shows. All sectors render at the same natural scale, so the dial stays the\n   * same size; the sector only windows a different part (270 whole, 180 wide,\n   * 90 a quadrant).\n   */\n  private get sectorClips(): {\n    top: number;\n    bottom: number;\n    left: number;\n    right: number;\n  } {\n    switch (this.sector) {\n      case GaugeRadialSector.deg180:\n        return {top: 0, bottom: 44, left: 0, right: 0};\n      case GaugeRadialSector.deg90Left:\n        return {top: 0, bottom: 45, left: 0, right: 45};\n      case GaugeRadialSector.deg90Right:\n        return {top: 0, bottom: 45, left: 45, right: 0};\n      case GaugeRadialSector.deg270:\n      default:\n        return {top: 0, bottom: 0, left: 0, right: 0};\n    }\n  }\n\n  private get isSector90(): boolean {\n    return (\n      this.sector === GaugeRadialSector.deg90Left ||\n      this.sector === GaugeRadialSector.deg90Right\n    );\n  }\n\n  // Arrow form so `this` binds when passed as `.getAngle=${this.getAngle}`\n  // to <obc-instrument-radial>. Do not convert to a method.\n  getAngle = (v: number): number => {\n    const {sweep, start} = this.sectorAngles;\n    const span = this.maxValue - this.minValue;\n    if (!Number.isFinite(span) || span <= 0) {\n      return start;\n    }\n\n    return ((v - this.minValue) / span) * sweep + start;\n  };\n\n  /** Renders one gauge readout; `withMeta`/`labelOnly` pick parts. */\n  private renderReadout({\n    className,\n    variant,\n    alignment = ReadoutStackVerticalAlignment.vertical,\n    withMeta = true,\n    labelOnly = false,\n  }: {\n    className: string;\n    variant: ReadoutVariant;\n    alignment?: ReadoutStackVerticalAlignment;\n    withMeta?: boolean;\n    labelOnly?: boolean;\n  }): TemplateResult {\n    // `labelOnly` already means \"no value\", so derive it instead of passing both.\n    const withValue = !labelOnly;\n    return html`\n      <obc-readout\n        class=${className}\n        direction=\"vertical\"\n        ?labelOnly=${labelOnly}\n        .variant=${variant}\n        .alignment=${alignment}\n        .valuePriority=${withValue ? this.priority : undefined}\n        .value=${withValue ? this.value : undefined}\n        .fractionDigits=${this.fractionDigits}\n        .label=${withMeta ? this.label : ''}\n        .unit=${withMeta ? this.unit : ''}\n      ></obc-readout>\n    `;\n  }\n\n  private renderReadouts() {\n    if (!this.showReadout) {\n      return nothing;\n    }\n\n    const isNeedle = this.type === ObcGaugeRadialType.needle;\n    const is90 = this.isSector90;\n    const is180 = this.sector === GaugeRadialSector.deg180;\n\n    if (isNeedle && (is180 || is90)) {\n      return nothing;\n    }\n\n    // 90 filled/bar: enhanced corner readout (bold value + label/unit).\n    if (is90) {\n      return this.renderReadout({\n        className: 'gauge-readout-meta',\n        variant: ReadoutVariant.enhanced,\n      });\n    }\n\n    // 270 needle and 180 filled/bar: centered stack (value weight follows `priority`).\n    if (isNeedle || is180) {\n      return this.renderReadout({\n        className: 'gauge-readout-meta',\n        variant: ReadoutVariant.stack,\n        alignment: ReadoutStackVerticalAlignment.center,\n      });\n    }\n\n    // 270 filled/bar: the value sits at the circle center and the label/unit row\n    // lower in the bottom gap, so they are two separately-positioned readouts.\n    return html`\n      ${this.renderReadout({\n        className: 'gauge-readout-value',\n        variant: ReadoutVariant.enhanced,\n        withMeta: false,\n      })}\n      ${this.label || this.unit\n        ? this.renderReadout({\n            className: 'gauge-readout-meta',\n            variant: ReadoutVariant.stack,\n            alignment: ReadoutStackVerticalAlignment.center,\n            labelOnly: true,\n          })\n        : nothing}\n    `;\n  }\n\n  override render() {\n    const clips = this.sectorClips;\n    return html`\n      <div\n        class=${classMap({\n          'gauge-radial-root': true,\n          'type-needle': this.type === ObcGaugeRadialType.needle,\n          'sector-180': this.sector === GaugeRadialSector.deg180,\n          'sector-90-left': this.sector === GaugeRadialSector.deg90Left,\n          'sector-90-right': this.sector === GaugeRadialSector.deg90Right,\n        })}\n      >\n        <obc-instrument-radial\n          .value=${this.value}\n          .state=${this.state}\n          .priority=${this.priority}\n          .setpoint=${this.setpoint}\n          .newSetpoint=${this.newSetpoint}\n          .setpointAtZeroDeadband=${this.setpointAtZeroDeadband}\n          .setpointOverride=${this.setpointOverride}\n          .touching=${this.touching}\n          .autoAtSetpoint=${this.autoAtSetpoint}\n          .autoAtSetpointDeadband=${this.autoAtSetpointDeadband}\n          .animateSetpoint=${this.animateSetpoint}\n          .maxValue=${this.maxValue}\n          .minValue=${this.minValue}\n          .getAngle=${this.getAngle}\n          .showLabels=${this.showLabels}\n          .primaryTickmarkInterval=${this.primaryTickmarkInterval}\n          .secondaryTickmarkInterval=${this.secondaryTickmarkInterval}\n          .tertiaryTickmarkInterval=${this.tertiaryTickmarkInterval}\n          .type=${this.type}\n          .needleType=${this.type}\n          .tickmarksInside=${this.tickmarksInside}\n          .tickmarkStyle=${this.tickmarkStyle}\n          .advices=${this.isSector90 ? [] : this.advices}\n          .clipTop=${clips.top}\n          .clipBottom=${clips.bottom}\n          .clipLeft=${clips.left}\n          .clipRight=${clips.right}\n          .endLabelsMaxMin=${this.sector === GaugeRadialSector.deg180}\n        >\n        </obc-instrument-radial>\n        ${this.renderReadouts()}\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-gauge-radial': ObcGaugeRadial;\n  }\n}\n"],"names":["ObcGaugeRadialType","GaugeRadialSector"],"mappings":"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"}

package/dist/navigation-instruments/readout/readout.css.js

@@ -41,37 +41,22 @@ const componentStyle = css`
     grid-template-areas: "meta";
   }
 
-.readout:is(.alert-low-integrity,.alert-invalid,.alert-caution,.alert-warning,.alert-alarm) {
+.readout:is(.data-low-integrity,.data-invalid) {
     border-width: 1px;
     border-style: solid;
     border-radius: var(--global-border-radius-border-radius-base);
   }
 
-.readout.alert-low-integrity {
+.readout.data-low-integrity {
     background: var(--alert-low-integrity-background-color);
     border-color: var(--alert-low-integrity-border-color);
   }
 
-.readout.alert-invalid {
+.readout.data-invalid {
     background: var(--alert-invalid-background-color);
     border-color: var(--alert-invalid-border-color);
   }
 
-.readout.alert-caution {
-    background: var(--alert-caution-container-background-color);
-    border-color: var(--alert-caution-container-border-color);
-  }
-
-.readout.alert-warning {
-    background: var(--alert-warning-container-background-color);
-    border-color: var(--alert-warning-container-border-color);
-  }
-
-.readout.alert-alarm {
-    background: var(--alert-alarm-container-background-color);
-    border-color: var(--alert-alarm-container-border-color);
-  }
-
 .readout.stack {
     padding-bottom: calc(
       var(--obc-readout-padding-horizontal-safe) +
@@ -393,6 +378,10 @@ const componentStyle = css`
   text-align: center;
 }
 
+.readout.stack.vertical.alignment-center .instrument-label-unit-container {
+  align-items: center;
+}
+
 .readout.stack.vertical.alignment-vertical {
   justify-items: end;
 }

package/dist/navigation-instruments/readout/readout.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"readout.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"readout.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/navigation-instruments/readout/readout.d.ts

@@ -3,6 +3,7 @@ import { Priority } from '../types.js';
 import { ReadoutAdviceState, ReadoutAdviceFormat } from '../readout-advice/readout-advice.js';
 import { ReadoutSourceType } from './readout-source.js';
 import { ReadoutSetpointFormat, ReadoutSetpointSize } from '../readout-setpoint/readout-setpoint.js';
+import { AlertFrameConfig } from '../../components/alert-frame/alert-frame.js';
 import '../../components/context-menu-input/context-menu-input.js';
 import '../../icons/icon-input-right.js';
 import '../../icons/icon-placeholder.js';
@@ -13,13 +14,10 @@ export declare enum ReadoutVariant {
     enhanced = "enhanced",
     stack = "stack"
 }
-export declare enum ReadoutAlertState {
+export declare enum ReadoutDataState {
     none = "none",
     lowIntegrity = "low-integrity",
-    invalid = "invalid",
-    caution = "caution",
-    warning = "warning",
-    alarm = "alarm"
+    invalid = "invalid"
 }
 export declare enum ReadoutSetpointInteraction {
     alwaysVisible = "always-visible",
@@ -89,7 +87,7 @@ export declare class ObcReadout extends LitElement {
     src?: string;
     off: boolean;
     valuePriority?: Priority;
-    alertState: ReadoutAlertState;
+    dataState: ReadoutDataState;
     setpointInteraction: ReadoutSetpointInteraction;
     direction: ReadoutDirection;
     /**
@@ -119,6 +117,7 @@ export declare class ObcReadout extends LitElement {
     sourceDeltaValue: number;
     sourceType?: ReadoutSourceType;
     hasLeadingIcon: boolean;
+    alert: AlertFrameConfig | boolean;
     sourceHug: boolean;
     hasSourceLeadingIcon: boolean;
     hasSourceTrailingIcon: boolean;
@@ -220,7 +219,7 @@ export declare class ObcReadout extends LitElement {
     private renderValueInput;
     private renderHorizontalValueUnitZone;
     private renderHorizontalLayout;
-    render(): import('lit-html').TemplateResult<1>;
+    render(): import('lit-html').HTMLTemplateResult;
     static styles: import('lit').CSSResult;
     disconnectedCallback(): void;
 }

package/dist/navigation-instruments/readout/readout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"readout.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/readout/readout.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"readout.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/readout/readout.ts"],"names":[],"mappings":"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"}

package/dist/navigation-instruments/readout/readout.js

@@ -11,6 +11,7 @@ import { ReadoutAdviceFormat, ReadoutAdviceState } from "../readout-advice/reado
 import { renderReadoutUnitZone, renderReadoutLabelZone, renderReadoutMetaZone } from "./readout-meta.js";
 import { ReadoutSourceType, renderReadoutSource, supportsReadoutSourcePicker } from "./readout-source.js";
 import { ReadoutSetpointSize, ReadoutSetpointFormat, ReadoutSetpointMode, ReadoutSetpointVariant } from "../readout-setpoint/readout-setpoint.js";
+import { wrapWithAlertFrame } from "../../components/alert-frame/alert-frame.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -27,15 +28,12 @@ var ReadoutVariant = /* @__PURE__ */ ((ReadoutVariant2) => {
   ReadoutVariant2["stack"] = "stack";
   return ReadoutVariant2;
 })(ReadoutVariant || {});
-var ReadoutAlertState = /* @__PURE__ */ ((ReadoutAlertState2) => {
-  ReadoutAlertState2["none"] = "none";
-  ReadoutAlertState2["lowIntegrity"] = "low-integrity";
-  ReadoutAlertState2["invalid"] = "invalid";
-  ReadoutAlertState2["caution"] = "caution";
-  ReadoutAlertState2["warning"] = "warning";
-  ReadoutAlertState2["alarm"] = "alarm";
-  return ReadoutAlertState2;
-})(ReadoutAlertState || {});
+var ReadoutDataState = /* @__PURE__ */ ((ReadoutDataState2) => {
+  ReadoutDataState2["none"] = "none";
+  ReadoutDataState2["lowIntegrity"] = "low-integrity";
+  ReadoutDataState2["invalid"] = "invalid";
+  return ReadoutDataState2;
+})(ReadoutDataState || {});
 var ReadoutSetpointInteraction = /* @__PURE__ */ ((ReadoutSetpointInteraction2) => {
   ReadoutSetpointInteraction2["alwaysVisible"] = "always-visible";
   ReadoutSetpointInteraction2["flipFlop"] = "flip-flop";
@@ -61,7 +59,7 @@ let ObcReadout = class extends LitElement {
     this.hasDegree = false;
     this.label = "";
     this.off = false;
-    this.alertState = "none";
+    this.dataState = "none";
     this.setpointInteraction = "always-visible";
     this.direction = "vertical";
     this.alignment = "vertical";
@@ -76,6 +74,7 @@ let ObcReadout = class extends LitElement {
     this.hasSrcPicker = false;
     this.sourceDeltaValue = 0;
     this.hasLeadingIcon = false;
+    this.alert = false;
     this.sourceHug = true;
     this.hasSourceLeadingIcon = false;
     this.hasSourceTrailingIcon = true;
@@ -685,46 +684,46 @@ let ObcReadout = class extends LitElement {
     `;
   }
   render() {
-    return html`
-      <div
-        class=${classMap({
-      readout: true,
-      [this.variant]: true,
-      [this.direction]: true,
-      "alignment-left": this.alignment === "left",
-      "alignment-center": this.alignment === "center",
-      "alignment-vertical": this.alignment === "vertical",
-      "interaction-always-visible": this.interactionMode === "always-visible",
-      "interaction-flip-flop": this.setpointInteractionEnabled && this.interactionMode === "flip-flop",
-      "interaction-pop-up": this.setpointInteractionEnabled && this.interactionMode === "pop-up",
-      "focus-setpoint": this.setpointInteractionEnabled && this.flipFlopSetpointFocused,
-      "focus-value": this.setpointInteractionEnabled && this.flipFlopValueFocused,
-      "alert-none": this.alertState === "none",
-      "alert-low-integrity": this.alertState === "low-integrity",
-      "alert-invalid": this.alertState === "invalid",
-      "alert-caution": this.alertState === "caution",
-      "alert-warning": this.alertState === "warning",
-      "alert-alarm": this.alertState === "alarm",
-      "has-source": this.hasSrc,
-      "has-setpoint": this.hasSetpoint,
-      "has-setpoint-button": this.isHorizontal && this.setpointFormat === ReadoutSetpointFormat.button,
-      "no-hug": !this.hug,
-      "label-only": this.labelOnly
-    })}
-      >
-        ${!this.labelOnly && this.isVertical ? this.renderAdvice() : nothing}
-        ${!this.labelOnly && this.isVertical ? this.renderSetpoint() : nothing}
-        ${!this.labelOnly && this.isVertical ? this.renderValueZone() : nothing}
-        ${(this.labelOnly || this.isVertical) && this.shouldRenderReadoutMetaZone ? renderReadoutMetaZone({
-      labelValue: this.label,
-      unitValue: this.unit
-    }) : nothing}
-        ${!this.labelOnly && this.hasSrc && this.isVertical ? this.renderSource() : nothing}
-        ${!this.labelOnly && this.isHorizontal ? this.renderHorizontalLayout() : nothing}
-        ${this.renderSourcePickerSlot()}
-      </div>
-      ${this.renderSourcePickerContent()}
-    `;
+    return wrapWithAlertFrame(
+      this.alert,
+      html`
+        <div
+          class=${classMap({
+        readout: true,
+        [this.variant]: true,
+        [this.direction]: true,
+        "alignment-left": this.alignment === "left",
+        "alignment-center": this.alignment === "center",
+        "alignment-vertical": this.alignment === "vertical",
+        "interaction-always-visible": this.interactionMode === "always-visible",
+        "interaction-flip-flop": this.setpointInteractionEnabled && this.interactionMode === "flip-flop",
+        "interaction-pop-up": this.setpointInteractionEnabled && this.interactionMode === "pop-up",
+        "focus-setpoint": this.setpointInteractionEnabled && this.flipFlopSetpointFocused,
+        "focus-value": this.setpointInteractionEnabled && this.flipFlopValueFocused,
+        "data-none": this.dataState === "none",
+        "data-low-integrity": this.dataState === "low-integrity",
+        "data-invalid": this.dataState === "invalid",
+        "has-source": this.hasSrc,
+        "has-setpoint": this.hasSetpoint,
+        "has-setpoint-button": this.isHorizontal && this.setpointFormat === ReadoutSetpointFormat.button,
+        "no-hug": !this.hug,
+        "label-only": this.labelOnly
+      })}
+        >
+          ${!this.labelOnly && this.isVertical ? this.renderAdvice() : nothing}
+          ${!this.labelOnly && this.isVertical ? this.renderSetpoint() : nothing}
+          ${!this.labelOnly && this.isVertical ? this.renderValueZone() : nothing}
+          ${(this.labelOnly || this.isVertical) && this.shouldRenderReadoutMetaZone ? renderReadoutMetaZone({
+        labelValue: this.label,
+        unitValue: this.unit
+      }) : nothing}
+          ${!this.labelOnly && this.hasSrc && this.isVertical ? this.renderSource() : nothing}
+          ${!this.labelOnly && this.isHorizontal ? this.renderHorizontalLayout() : nothing}
+          ${this.renderSourcePickerSlot()}
+        </div>
+        ${this.renderSourcePickerContent()}
+      `
+    );
   }
   disconnectedCallback() {
     window.removeEventListener("pointerdown", this.onWindowPointerDown, true);
@@ -771,7 +770,7 @@ __decorateClass([
 ], ObcReadout.prototype, "valuePriority", 2);
 __decorateClass([
   property({ type: String })
-], ObcReadout.prototype, "alertState", 2);
+], ObcReadout.prototype, "dataState", 2);
 __decorateClass([
   property({ type: String })
 ], ObcReadout.prototype, "setpointInteraction", 2);
@@ -820,6 +819,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean })
 ], ObcReadout.prototype, "hasLeadingIcon", 2);
+__decorateClass([
+  property({ type: Object })
+], ObcReadout.prototype, "alert", 2);
 __decorateClass([
   property({ type: Boolean, attribute: false })
 ], ObcReadout.prototype, "sourceHug", 2);
@@ -879,7 +881,7 @@ ObcReadout = __decorateClass([
 ], ObcReadout);
 export {
   ObcReadout,
-  ReadoutAlertState,
+  ReadoutDataState,
   ReadoutDirection,
   ReadoutSetpointInteraction,
   ReadoutSourceType,