@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.142 → 2.0.0-next.144

package/src/navigation-instruments/readout-list-item/readout-list-item.ts

@@ -71,12 +71,15 @@ export type ReadoutListItemSize = ReadoutBlockSize;
  * Placement of the unit/source relative to the label and value.
  * - `trailing-unit`: unit after the value, source after a trailing divider.
  * - `leading-unit`: unit beside/under the label.
- * - `leading-src`: source beside/under the label (no trailing source).
+ * - `leading-src`: source under the label (no trailing source).
+ * - `leading-src-inline`: source on the label's line, after it (no trailing
+ *   source); keeps the row one line high.
  */
 export enum ReadoutListItemStacking {
   trailingUnit = 'trailing-unit',
   leadingUnit = 'leading-unit',
   leadingSrc = 'leading-src',
+  leadingSrcInline = 'leading-src-inline',
 }
 
 /**
@@ -208,7 +211,12 @@ export interface ReadoutAdviceOptions extends ReadoutBlockState {
 }
 
 export interface ReadoutReserverOptions {
-  /** Longest expected string to reserve width for (aligns multiple rows), e.g. `"miles"`. */
+  /**
+   * Longest expected string to reserve width for (aligns multiple rows), e.g.
+   * `"miles"`. A row without a unit still renders the reserved (blank)
+   * trailing column, so its value and degree stay on the grid of the rows
+   * that have one. `leading-unit` stacking has no trailing column to reserve.
+   */
   spaceReserver?: string;
 }
 
@@ -273,7 +281,8 @@ export interface ReadoutSrcOptions extends ReadoutBlockState {
  * - **Building blocks:** value, optional setpoint, and optional advice segments,
  *   each cap-height-aligned and able to reserve a stable width.
  * - **Sizes:** `small`, `medium`, `large` density scales.
- * - **Stacking:** `trailing-unit`, `leading-unit`, `leading-src` placement.
+ * - **Stacking:** `trailing-unit`, `leading-unit`, `leading-src`,
+ *   `leading-src-inline` placement.
  * - **Priority:** `regular`/`enhanced` colour emphasis; per-value `weight`
  *   (`regular`/`semibold`/`bold`) is independent of colour.
  * - **Setpoint flip-flop:** swaps emphasis between value and setpoint as the
@@ -406,10 +415,30 @@ export class ObcReadoutListItem extends LitElement {
     return this.stacking ?? ReadoutListItemStacking.trailingUnit;
   }
 
+  /** Both leading-src stackings move the source into the label stack. */
+  private get hasLeadingSrc(): boolean {
+    const stacking = this.resolvedStacking;
+    return (
+      stacking === ReadoutListItemStacking.leadingSrc ||
+      stacking === ReadoutListItemStacking.leadingSrcInline
+    );
+  }
+
   private get resolvedPriority(): ReadoutListItemPriority {
     return this.priority ?? ReadoutListItemPriority.regular;
   }
 
+  /**
+   * Whether a unit box follows the value: a unit, or a reserver alone — the
+   * blank reserved column keeps a unit-less row aligned with its neighbours.
+   */
+  private get hasTrailingUnitBox(): boolean {
+    return (
+      this.resolvedStacking !== ReadoutListItemStacking.leadingUnit &&
+      (Boolean(this.unit) || Boolean(this.unitOptions?.spaceReserver))
+    );
+  }
+
   private get resolvedFractionDigits(): number {
     return this.fractionDigits ?? 0;
   }
@@ -713,16 +742,12 @@ export class ObcReadoutListItem extends LitElement {
     if (!this.hasValue) {
       return nothing;
     }
-    const hasTrailingUnit =
-      Boolean(this.unit) &&
-      this.resolvedStacking !== ReadoutListItemStacking.leadingUnit;
-
     if ((this.hasDegree ?? false) && !this.off) {
       return this.renderDegreeGlyph(this.valueSize, {
         enhanced: this.rowEnhanced,
       });
     }
-    if (hasTrailingUnit) {
+    if (this.hasTrailingUnitBox) {
       return html`<span class="value-unit-gap" aria-hidden="true"></span>`;
     }
     return nothing;
@@ -914,8 +939,7 @@ export class ObcReadoutListItem extends LitElement {
     const stacking = this.resolvedStacking;
     const showLeadingUnit =
       stacking === ReadoutListItemStacking.leadingUnit && Boolean(this.unit);
-    const showLeadingSrc =
-      stacking === ReadoutListItemStacking.leadingSrc && Boolean(this.src);
+    const showLeadingSrc = this.hasLeadingSrc && Boolean(this.src);
 
     return html`
       <div class="label-container" part="label-container">
@@ -946,15 +970,12 @@ export class ObcReadoutListItem extends LitElement {
   }
 
   private renderTrailingUnit(): TemplateResult | typeof nothing {
-    if (
-      this.resolvedStacking === ReadoutListItemStacking.leadingUnit ||
-      !this.unit
-    ) {
+    if (!this.hasTrailingUnitBox) {
       return nothing;
     }
     return this.renderTextbox(
       'unit',
-      this.unit,
+      this.unit ?? '',
       this.unitOptions?.spaceReserver
     );
   }
@@ -1004,10 +1025,7 @@ export class ObcReadoutListItem extends LitElement {
   }
 
   private renderTrailingSource(): TemplateResult | typeof nothing {
-    if (
-      this.resolvedStacking === ReadoutListItemStacking.leadingSrc ||
-      !this.src
-    ) {
+    if (this.hasLeadingSrc || !this.src) {
       return nothing;
     }
     return html`