@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.49 → 2.0.0-next.50

package/src/automation/automation-tank/automation-tank.ts

@@ -94,6 +94,25 @@ export enum TankChartMode {
   graphAndBar = 'graph-and-bar',
 }
 
+/**
+ * A single detail row rendered in the tank's `readout` rich list (below the
+ * main percent / value block, separated by a divider). Each row is rendered
+ * as `<label>` on the left and `<value><degree?><percent?><unit>` on the
+ * right, all on a single line.
+ */
+export interface TankReadoutItem {
+  /** Left-aligned label text (e.g. `Temperature`). */
+  label: string;
+  /** Numeric value, formatted with the tank's `percentFractionDigits`. */
+  value: number;
+  /** Append a `°` glyph directly after the value with no gap. */
+  hasDegree?: boolean;
+  /** Append a `%` glyph directly after the value with no gap. */
+  hasPercentage?: boolean;
+  /** Unit text (e.g. `C`, `Pa`, `m/s`). Rendered after the value/glyph. */
+  unit: string;
+}
+
 /**
  *
  *
@@ -221,6 +240,21 @@ export class ObcAutomationTank extends LitElement {
    */
   @property({type: Number}) percentFractionDigits: number = 0;
 
+  /**
+   * Rich detail rows shown below the main percent/value block in the regular
+   * (non-compact, non-static) layout, separated by a divider. When empty (the
+   * default), nothing is rendered — neither the divider nor the list. In
+   * vertical orientation the chart cell shrinks to make room; in horizontal
+   * orientation the readout column already has reserved whitespace so the
+   * chart is unaffected.
+   *
+   * Values are formatted using `percentFractionDigits`. Consumers that need
+   * full control over the markup can replace the entire fallback by slotting
+   * arbitrary content into `slot="rich"` (note: this is a different name from
+   * the existing `slot="readout"` which replaces the whole readout block).
+   */
+  @property({type: Array, attribute: false}) readout: TankReadoutItem[] = [];
+
   /**
    * Enum-driven badges rendered inside the `badges` cell. Mirrors the API
    * introduced for `ObcAbstractAutomationButton` in PR #839 (#829). When set
@@ -703,6 +737,36 @@ export class ObcAutomationTank extends LitElement {
                     <slot class="unit" name="unit">m<sup>3</sup></slot>
                   </div>
                 </div>
+                <slot name="rich">
+                  ${this.readout.length > 0
+                    ? html`
+                        <div class="rich-divider"></div>
+                        <div class="rich">
+                          ${this.readout.map(
+                            (row) => html`
+                              <div class="rich-row">
+                                <span class="rich-label">${row.label}</span>
+                                <span class="rich-value"
+                                  >${row.value.toFixed(
+                                    this.percentFractionDigits
+                                  )}</span
+                                >
+                                <span class="rich-suffix"
+                                  >${row.hasDegree
+                                    ? html`<span class="rich-glyph">°</span>`
+                                    : nothing}${row.hasPercentage
+                                    ? html`<span class="rich-glyph">%</span>`
+                                    : nothing}<span class="rich-unit"
+                                    >${row.unit}</span
+                                  ></span
+                                >
+                              </div>
+                            `
+                          )}
+                        </div>
+                      `
+                    : nothing}
+                </slot>
               </slot>
             </div>
           `;

package/src/components/message-menu-item/message-menu-item.css

@@ -88,11 +88,8 @@
     gap: var(--app-components-message-menu-item-label-spacing);
 
     color: var(--element-neutral-color);
-
-    .day,
-    .time {
-      @mixin font-label;
-    }
+    white-space: nowrap;
+    text-wrap: nowrap;
   }
 
   .chevron {