@oicl/openbridge-webcomponents 2.0.0-next.127 → 2.0.0-next.129

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

@@ -4,17 +4,18 @@ import { classMap } from "lit/directives/class-map.js";
 import componentStyle from "./readout.css.js";
 import { customElement } from "../../decorator.js";
 import { ObcTextboxFontWeight, ObcTextboxSize } from "../../components/textbox/textbox.js";
-import { ReadoutBlockHidePhase, ReadoutBlockSize, ReadoutBlockVariant, ReadoutBlockDataQuality } from "../../building-blocks/readout-block/readout-block.js";
-import { ReadoutListItemSetpointInteraction } from "../readout-list-item/readout-list-item.js";
+import { ReadoutBlockHidePhase, ReadoutBlockSize, ReadoutBlockVariant, ReadoutAdviceCategory, ReadoutBlockDataQuality } from "../../building-blocks/readout-block/readout-block.js";
+import { ReadoutListItemSetpointInteraction, ReadoutSourceState } from "../readout-list-item/readout-list-item.js";
 import { Priority } from "../types.js";
 import { ReadoutValueType, resolveReadoutDigitCount, isReadoutDigitCountMissing, resolveReadoutNumericValue, assertReadoutValueType, assertReadoutFractionDigits } from "./readout-formatters.js";
-import { isDisplayedAtSetpoint, readoutPrimarySize, readoutSecondarySize, readoutSetpointWeight, readoutNumericFormatOptions, readoutDataQualityClasses, resolveSetpointHidePhase } from "./readout-shared.js";
+import { isDisplayedAtSetpoint, readoutPrimarySize, readoutSecondarySize, readoutValueSize, readoutSetpointSize, readoutSetpointWeight, readoutNumericFormatOptions, readoutDataQualityClasses, resolveSetpointHidePhase } from "./readout-shared.js";
 import { wrapWithAlertFrame, ObcAlertFrameThickness, ObcAlertFrameType, ObcAlertFrameMode } from "../../components/alert-frame/alert-frame.js";
 import { AlertType } from "../../types.js";
 import "../../components/button/button.js";
 import { ContextMenuType } from "../../components/context-menu-input/context-menu-input.js";
 import "../../icons/icon-chevron-right-google.js";
 import "../../icons/icon-drop-down-google.js";
+import "../../icons/icon-delta.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -63,6 +64,7 @@ let ObcReadout = class extends LitElement {
     this.hasAdvice = false;
     this.hasDegree = false;
     this.hasDegreeSpacer = false;
+    this.hasLeadingIcon = false;
     this.fractionDigits = 0;
     this.maxDigits = 0;
     this.alert = false;
@@ -97,6 +99,9 @@ let ObcReadout = class extends LitElement {
     };
   }
   get resolvedSize() {
+    if (this.isHorizontal) {
+      return ReadoutSize.large;
+    }
     return this.size ?? ReadoutSize.small;
   }
   get resolvedPriority() {
@@ -155,6 +160,9 @@ let ObcReadout = class extends LitElement {
   get isFlipFlop() {
     return this.resolvedSetpointInteraction === ReadoutSetpointInteraction.flipFlop;
   }
+  get isEqualSize() {
+    return this.resolvedSetpointInteraction === ReadoutSetpointInteraction.equalSize;
+  }
   get isPopUp() {
     return this.resolvedSetpointInteraction === ReadoutSetpointInteraction.popUp;
   }
@@ -203,18 +211,45 @@ let ObcReadout = class extends LitElement {
     return readoutSecondarySize(this.resolvedSize);
   }
   get valueSize() {
-    if (this.isSetpointEmphasized) {
-      return this.secondarySize;
-    }
-    return this.primarySize;
+    return readoutValueSize({
+      primary: this.primarySize,
+      secondary: this.secondarySize,
+      setpointEmphasized: this.isSetpointEmphasized,
+      equalSize: this.isEqualSize
+    });
   }
   get setpointSize() {
-    return this.isSetpointEmphasized ? this.primarySize : this.secondarySize;
+    return readoutSetpointSize({
+      primary: this.primarySize,
+      secondary: this.secondarySize,
+      emphasized: this.isSetpointEmphasized,
+      equalSize: this.isEqualSize
+    });
   }
   /** Value font weight passes straight to obc-textbox; regular when unset. Colour is separate. */
   get valueWeight() {
     return this.valueOptions?.weight ?? ObcTextboxFontWeight.regular;
   }
+  /**
+   * Label size. The Figma 6.1 title block defaults large readouts to `s` — a
+   * scannable label should not sit at the smallest permitted size — while
+   * small/medium tiers stay `xs`; `labelOptions.size` overrides either way
+   * (per the design team, for context / density / secondary instruments).
+   * The `s` default was confirmed by the design team (2026-08-17).
+   * TODO(designer): the medium-tier default is unverified in the new sheets
+   * (only XS and S exist on the title's size axis).
+   */
+  get labelSize() {
+    return this.labelOptions?.size ?? (this.resolvedSize === ReadoutSize.large ? ObcTextboxSize.s : ObcTextboxSize.xs);
+  }
+  /**
+   * Label weight: SemiBold only for enhanced (in-command) readouts, regular
+   * otherwise — the designer reduced the amount of semibold in the interface
+   * (Figma 6.1 review).
+   */
+  get labelWeight() {
+    return this.rowEnhanced ? ObcTextboxFontWeight.semibold : ObcTextboxFontWeight.regular;
+  }
   /** Setpoint is SemiBold only while emphasised, otherwise regular weight. */
   get setpointWeight() {
     return readoutSetpointWeight(this.isSetpointEmphasized);
@@ -263,6 +298,8 @@ let ObcReadout = class extends LitElement {
         .hidePhase=${config.hidePhase ?? ReadoutBlockHidePhase.none}
         .dataQuality=${config.dataQuality}
         .alert=${config.alert ?? false}
+        .category=${config.category ?? ReadoutAdviceCategory.regular}
+        .active=${config.active ?? false}
       >
         ${config.ghost ? nothing : this.renderForwardedIcon(config.variant)}
       </obc-readout-block>
@@ -311,7 +348,8 @@ let ObcReadout = class extends LitElement {
     return nothing;
   }
   renderTextbox(role, text, reserver, blockState) {
-    const weight = role === "label" ? ObcTextboxFontWeight.semibold : ObcTextboxFontWeight.regular;
+    const weight = role === "label" ? this.labelWeight : ObcTextboxFontWeight.regular;
+    const size = role === "label" ? this.labelSize : ObcTextboxSize.xs;
     const box = html`
       <obc-textbox
         class=${classMap({
@@ -319,7 +357,7 @@ let ObcReadout = class extends LitElement {
       ...this.dataQualityClasses(blockState?.dataQuality)
     })}
         part=${role}
-        .size=${ObcTextboxSize.xs}
+        .size=${size}
         .fontWeight=${weight}
         alignment="left"
       >
@@ -336,6 +374,11 @@ let ObcReadout = class extends LitElement {
       this.deferredSetpointHidePhase
     );
   }
+  // `hasDegree` is deliberately NOT forwarded to the advice / setpoint blocks:
+  // the degree glyph renders on the actual value only (Figma 6.1 review,
+  // 2026-08-18) — the unit is written once for the whole readout, and the
+  // degree follows the same rule; the setpoint / advice implicitly share it.
+  // `obc-readout-list-item` keeps its own per-row convention.
   renderAdviceBlock() {
     return this.renderBlock({
       variant: ReadoutBlockVariant.advice,
@@ -345,9 +388,10 @@ let ObcReadout = class extends LitElement {
       weight: ObcTextboxFontWeight.regular,
       hintedZeros: this.adviceOptions?.hintedZeros ?? false,
       spaceReserver: this.adviceOptions?.spaceReserver,
-      hasDegree: this.hasDegree ?? false,
       dataQuality: this.adviceOptions?.dataQuality,
-      alert: this.adviceOptions?.alert
+      alert: this.adviceOptions?.alert,
+      category: this.adviceOptions?.category,
+      active: this.adviceOptions?.active
     });
   }
   renderSetpointBlock() {
@@ -361,7 +405,6 @@ let ObcReadout = class extends LitElement {
       weight: this.setpointWeight,
       hintedZeros: this.setpointOptions?.hintedZeros ?? false,
       spaceReserver: this.setpointOptions?.spaceReserver,
-      hasDegree: this.hasDegree ?? false,
       touching: this.setpointTouching,
       hidePhase: this.setpointHidePhase,
       dataQuality: this.setpointOptions?.dataQuality,
@@ -455,12 +498,21 @@ let ObcReadout = class extends LitElement {
     })}
         part="meta-wrapper"
       >
-        ${this.label ? this.renderTextbox("label", this.label) : nothing}
-        ${this.unit ? this.renderTextbox(
+        ${this.hasLeadingIcon ? html`<span class="leading-icon" aria-hidden="true"
+              ><slot name="leading-icon"></slot
+            ></span>` : nothing}
+        <div class="meta-labels" part="meta-labels">
+          ${this.label ? this.renderTextbox(
+      "label",
+      this.label,
+      this.labelOptions?.spaceReserver
+    ) : nothing}
+          ${this.unit ? this.renderTextbox(
       "unit",
       this.unit,
       this.unitOptions?.spaceReserver
     ) : nothing}
+        </div>
       </div>
     `;
   }
@@ -513,28 +565,67 @@ let ObcReadout = class extends LitElement {
       `;
       return wrapWithAlertFrame(this.srcOptions?.alert ?? false, button);
     }
-    return this.renderTextbox(
+    return this.renderSourceBlock(src);
+  }
+  /**
+   * The plain (non-interactive) source: the textbox plus its optional state
+   * chip and deviation line. The regular no-deviation case renders the bare
+   * textbox — the pre-6.1 output; a state or deviation wraps it in the
+   * `.source-block` stack. The picker / flyout button variants do not carry
+   * state / deviation yet — TODO(designer): undefined in the 6.1 sheets.
+   */
+  renderSourceBlock(src) {
+    const state2 = this.srcOptions?.state ?? ReadoutSourceState.regular;
+    const deviation = this.srcOptions?.deviation;
+    const hasDeviation = deviation !== void 0 && Number.isFinite(deviation);
+    const box = this.renderTextbox(
       "source",
       src,
       this.srcOptions?.spaceReserver,
       this.srcOptions
     );
+    if (state2 === ReadoutSourceState.regular && !hasDeviation) {
+      return box;
+    }
+    return html`
+      <div
+        class=${classMap({
+      "source-block": true,
+      [`source-state-${state2}`]: state2 !== ReadoutSourceState.regular
+    })}
+        part="source-block"
+      >
+        ${box}
+        ${hasDeviation ? html`<span class="source-deviation">
+              <obi-delta aria-hidden="true"></obi-delta>
+              <obc-textbox
+                class="source-deviation-value"
+                .size=${ObcTextboxSize.xs}
+                .tabularNums=${true}
+                alignment="left"
+                >${deviation}</obc-textbox
+              >
+            </span>` : nothing}
+      </div>
+    `;
   }
-  /** The source row (vertical) / segment (horizontal), with its auto divider. */
+  /**
+   * The source row (vertical) / segment (horizontal). Only the horizontal
+   * direction draws an auto divider before the source — the Figma 6.1 review
+   * (node 95:24490 "remove dividers", 95:26891 "Source-divider are there")
+   * keeps the vertical source row divider-free while the horizontal flow
+   * separates the source with a vertical rule.
+   */
   renderSource() {
     if (!this.hasSrc) {
       return nothing;
     }
     return html`
-      <div
-        class=${classMap({
-      divider: true,
-      "divider-horizontal": !this.isHorizontal,
-      "divider-vertical": this.isHorizontal
-    })}
-        part="divider"
-        aria-hidden="true"
-      ></div>
+      ${this.isHorizontal ? html`<div
+            class="divider divider-vertical"
+            part="divider"
+            aria-hidden="true"
+          ></div>` : nothing}
       <div class="source-row" part="source-wrapper">
         ${this.renderSourceContent()}
       </div>
@@ -657,10 +748,11 @@ let ObcReadout = class extends LitElement {
       valueSize: this.primarySize,
       enhanced: false,
       // The emphasised setpoint is SemiBold — reserve its widest form.
+      // No degree: the visible setpoint block carries none (the degree
+      // renders on the actual value only), so the ghost mirrors it.
       weight: ObcTextboxFontWeight.semibold,
       hintedZeros: this.setpointOptions?.hintedZeros ?? false,
       spaceReserver: this.setpointOptions?.spaceReserver,
-      hasDegree: this.hasDegree ?? false,
       alert: this.setpointOptions?.alert,
       ghost: true
     }) : html`${this.renderBlock({
@@ -866,6 +958,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean })
 ], ObcReadout.prototype, "hasDegreeSpacer", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcReadout.prototype, "hasLeadingIcon", 2);
 __decorateClass([
   property({ type: Number })
 ], ObcReadout.prototype, "fractionDigits", 2);
@@ -887,6 +982,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Object })
 ], ObcReadout.prototype, "adviceOptions", 2);
+__decorateClass([
+  property({ type: Object })
+], ObcReadout.prototype, "labelOptions", 2);
 __decorateClass([
   property({ type: Object })
 ], ObcReadout.prototype, "unitOptions", 2);
@@ -914,6 +1012,7 @@ ObcReadout = __decorateClass([
 export {
   ObcReadout,
   ObcTextboxFontWeight,
+  ReadoutAdviceCategory,
   ReadoutAlignment,
   ReadoutDataQuality,
   ReadoutDirection,
@@ -921,6 +1020,7 @@ export {
   ReadoutSetpointInteraction,
   ReadoutSize,
   ReadoutSourceInteraction,
+  ReadoutSourceState,
   ReadoutStacking,
   ReadoutValueType
 };