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

package/custom-elements.json

@@ -15289,6 +15289,15 @@
               "description": "Number of fraction digits used to format the percent readout in the\nnon-compact (regular) layout. Defaults to `0` (integer percent). The\ncompact layout always renders integer percent to keep its fixed-width\nfootprint stable. The static layout renders capacity (`max` + `unit`)\nrather than percent, so this property has no effect there — pass a\npre-formatted value through the `max-value` slot if fractional\nprecision is needed (see the `WithFractionDigits` story).",
               "attribute": "percentFractionDigits"
             },
+            {
+              "kind": "field",
+              "name": "readout",
+              "type": {
+                "text": "TankReadoutItem[]"
+              },
+              "default": "[]",
+              "description": "Rich detail rows shown below the main percent/value block in the regular\n(non-compact, non-static) layout, separated by a divider. When empty (the\ndefault), nothing is rendered — neither the divider nor the list. In\nvertical orientation the chart cell shrinks to make room; in horizontal\norientation the readout column already has reserved whitespace so the\nchart is unaffected.\n\nValues are formatted using `percentFractionDigits`. Consumers that need\nfull control over the markup can replace the entire fallback by slotting\narbitrary content into `slot=\"rich\"` (note: this is a different name from\nthe existing `slot=\"readout\"` which replaces the whole readout block)."
+            },
             {
               "kind": "field",
               "name": "badgeControl",
@@ -47352,7 +47361,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`<obc-icon-button>` – An icon-only or icon-with-label button for quick actions.\n\nProvides a compact, visually prominent button that displays an icon (and optionally a label) for triggering actions. Commonly used for toolbars, navigation, or contextual actions where space is limited and a recognizable icon can represent the function.\n\nAppears as a circular or rounded button with configurable visual styles, supporting progress indication and various layout adaptations.\n\n## Features\n- **Variants:**\n  - `normal` (default): Standard appearance for most use cases.\n  - `raised`: Adds elevation/shadow for prominence.\n  - `flat`: Minimal, backgroundless style for subtle actions.\n- **Progress Indicator:**\n  - Shows a circular progress spinner overlay when the `progress` property is set (0–100). Useful for indicating loading or ongoing actions.\n- **Label Support:**\n  - Optionally displays a text label below the icon when `hasLabel` is true and content is provided in the `label` slot.\n- **Corner Alignment:**\n  - `cornerLeft` and `cornerRight` adjust the button's border radius and alignment for seamless placement at the start or end of a container.\n- **Active State:**\n  - `activated` visually highlights the button as selected or toggled.\n  - `activeColor` applies an accent color for emphasis.\n- **Wide Mode:**\n  - `wide` increases the button's width for easier touch targets or visual balance.\n- **Disabled State:**\n  - `disabled` prevents interaction and visually dims the button.\n\n## Usage Guidelines\n- Use `obc-icon-button` for actions represented by icons, such as toolbars, navigation, or quick-access commands.\n- Add a label (with `hasLabel` and the `label` slot) when clarity is needed or when icons alone may not be universally understood.\n- Use the progress indicator for actions that take time, such as uploads or background processes.\n- Prefer the `normal` variant for most cases; use `raised` to draw attention, and `flat` for less prominent or inline actions.\n- For grouped or edge-aligned layouts, use `cornerLeft` or `cornerRight` to visually merge with container edges.\n- Avoid using icon buttons for destructive or critical actions unless paired with clear feedback.\n- **TODO(designer):** Clarify recommended icon sizes and when to use label vs. icon-only.\n\n## Slots\n| Slot Name | Renders When...      | Purpose                                      |\n|-----------|---------------------|----------------------------------------------|\n| (default) | Always              | The icon to display (e.g., `<obi-search>`)   |\n| label     | If `hasLabel` is set | Optional label text below the icon           |\n\n## Best Practices\n- Ensure icons are clear and universally recognizable.\n- For accessibility, provide an `aria-label` or descriptive label for the button's action.\n- When using the progress indicator, avoid showing it for very short actions to prevent visual flicker.\n\n## Example:\n```\n<obc-icon-button variant=\"normal\">\n  <obi-search></obi-search>\n</obc-icon-button>\n\n<obc-icon-button variant=\"normal\" hasLabel>\n  <obi-arrow></obi-arrow>\n  <span slot=\"label\">Next</span>\n</obc-icon-button>\n```",
+          "description": "`<obc-icon-button>` – An icon-only or icon-with-label button for quick actions.\n\nProvides a compact, visually prominent button that displays an icon (and optionally a label) for triggering actions. Commonly used for toolbars, navigation, or contextual actions where space is limited and a recognizable icon can represent the function.\n\nAppears as a circular or rounded button with configurable visual styles, supporting progress indication and various layout adaptations.\n\n## Features\n- **Variants:**\n  - `normal` (default): Standard appearance for most use cases.\n  - `raised`: Adds elevation/shadow for prominence.\n  - `flat`: Minimal, backgroundless style for subtle actions.\n- **Progress Indicator:**\n  - Shows a circular progress spinner overlay when the `progress` property is set (0–100). Useful for indicating loading or ongoing actions.\n- **Label Support:**\n  - Optionally displays a text label below the icon when `hasLabel` is true and content is provided in the `label` slot.\n- **Corner Alignment:**\n  - `cornerLeft` and `cornerRight` adjust the button's border radius and alignment for seamless placement at the start or end of a container.\n- **Active State:**\n  - `activated` visually highlights the button as selected or toggled.\n  - `activeColor` applies an accent color for emphasis.\n- **Wide Mode:**\n  - `wide` increases the button's width for easier touch targets or visual balance.\n- **Disabled State:**\n  - `disabled` prevents interaction and visually dims the button.\n\n## Usage Guidelines\n- Use `obc-icon-button` for actions represented by icons, such as toolbars, navigation, or quick-access commands.\n- Add a label (with `hasLabel` and the `label` slot) when clarity is needed or when icons alone may not be universally understood.\n- Use the progress indicator for actions that take time, such as uploads or background processes.\n- Prefer the `normal` variant for most cases; use `raised` to draw attention, and `flat` for less prominent or inline actions.\n- For grouped or edge-aligned layouts, use `cornerLeft` or `cornerRight` to visually merge with container edges.\n- Avoid using icon buttons for destructive or critical actions unless paired with clear feedback.\n- **TODO(designer):** Clarify recommended icon sizes and when to use label vs. icon-only.\n\n## Slots\n| Slot Name | Renders When...      | Purpose                                      |\n|-----------|---------------------|----------------------------------------------|\n| (default) | Always              | The icon to display (e.g., `<obi-search>`)   |\n| label     | If `hasLabel` is set | Optional label text below the icon           |\n\n## Events\n- Emits a standard `click` event (`onClick` handler in framework wrappers) when activated.\n\n## Best Practices\n- Ensure icons are clear and universally recognizable.\n- For accessibility, provide an `aria-label` or descriptive label for the button's action.\n- When using the progress indicator, avoid showing it for very short actions to prevent visual flicker.\n\n## Example:\n```\n<obc-icon-button variant=\"normal\">\n  <obi-search></obi-search>\n</obc-icon-button>\n\n<obc-icon-button variant=\"normal\" hasLabel>\n  <obi-arrow></obi-arrow>\n  <span slot=\"label\">Next</span>\n</obc-icon-button>\n```",
           "name": "ObcIconButton",
           "slots": [
             {
@@ -47469,6 +47478,12 @@
               "readonly": true
             }
           ],
+          "events": [
+            {
+              "description": "Fired when the button is clicked (if not disabled).",
+              "name": "click"
+            }
+          ],
           "attributes": [
             {
               "name": "variant",

package/dist/automation/automation-tank/automation-tank.css.js

@@ -307,16 +307,6 @@ const compentStyle = css`
   flex: 0 0 auto;
 }
 
-/* Override the global \`min-height: 24px\` on \`.badges\` so empty badge rows
- * don't reserve space in compact/static — the spec says "if there are no
- * badges it would grow upward". The slot-driven \`?hidden\` attribute on
- * empty cells makes them \`display: none\` (see below). */
-
-:host([compact]) .halo > .badges,
-:host([static]) .halo > .badges {
-  min-height: 0;
-}
-
 /* \`hidden\` attribute support: needed because the cells set an explicit
  * display value (\`flex\` / \`block\`), which would otherwise override
  * \`hidden\`'s default \`display: none\`. Removing the cell from the flex
@@ -440,7 +430,7 @@ const compentStyle = css`
   grid-row: 1;
   grid-column: 2;
   justify-self: end;
-  align-self: center;
+  align-self: start;
 }
 
 .tank-frame:not(.orientation-horizontal) .grid > .readout {
@@ -470,7 +460,7 @@ const compentStyle = css`
   grid-row: 1;
   grid-column: 2;
   justify-self: end;
-  align-self: center;
+  align-self: start;
 }
 
 .tank-frame.orientation-horizontal .grid > .bar-container {
@@ -482,7 +472,6 @@ const compentStyle = css`
   grid-row: 2;
   grid-column: 2;
   align-self: stretch;
-  padding-left: 8px;
   min-width: 96px;
 }
 
@@ -491,7 +480,7 @@ const compentStyle = css`
 .badges {
   display: flex;
   justify-content: end;
-  min-height: 24px;
+  gap: 4px;
   pointer-events: auto;
 }
 
@@ -505,7 +494,7 @@ const compentStyle = css`
     "liga" off,
     "clig" off,
     "ss04" on;
-  color: var(--instrument-regular-secondary-color);
+  color: var(--element-neutral-color);
   /* Tag text must never break across lines — it is a fixed identifier
    * (e.g. \`FUEL\`, \`#0000\`) that loses meaning if hyphenated or wrapped. */
   white-space: nowrap;
@@ -526,28 +515,63 @@ const compentStyle = css`
   /* Keep \`90%\` together — the parent flex prevents flex-item wrapping but
    * not text wrapping inside \`.percent\` (number + \`<span>%</span>\`). */
   white-space: nowrap;
-  font-family: var(--global-typography-font-family);
-  font-size: var(--global-typography-instrument-label-font-size);
-  line-height: var(--global-typography-instrument-label-line-height);
-  font-feature-settings:
+  color: var(--element-neutral-color);
+}
+
+.readout-compact .percent {
+    font-family: var(--global-typography-font-family);
+    font-size: var(--global-typography-instrument-value-regular-font-size);
+    line-height: var(--global-typography-instrument-value-regular-line-height);
+    font-feature-settings:
     "liga" off,
     "clig" off,
     "ss04" on;
-  color: var(--instrument-regular-secondary-color);
-}
+  }
 
 .readout-compact .percent-symbol {
-  margin-left: 1px;
+    font-family: var(--global-typography-font-family);
+    font-size: var(--global-typography-instrument-unit-font-size);
+    line-height: var(--global-typography-instrument-unit-line-height);
+    font-feature-settings:
+    "liga" off,
+    "clig" off,
+    "ss04" on;
+    margin-left: 1px;
+  }
+
+/* Static readout: max-value + unit (no percent, no trend icon). Tighter
+ * 2px gap and small-neutral value sizing per design spec. Color is
+ * inherited from \`.readout-compact\`. */
+
+.readout-static {
+  gap: 2px;
 }
 
+.readout-static slot[name="max-value"] {
+    font-family: var(--global-typography-font-family);
+    font-size: var(--global-typography-instrument-value-small-font-size);
+    line-height: var(--global-typography-instrument-value-small-line-height);
+    font-feature-settings:
+    "liga" off,
+    "clig" off,
+    "ss04" on;
+  }
+
+.readout-static slot[name="unit"] {
+    font-family: var(--global-typography-font-family);
+    font-size: var(--global-typography-instrument-unit-font-size);
+    line-height: var(--global-typography-instrument-unit-line-height);
+    font-feature-settings:
+    "liga" off,
+    "clig" off,
+    "ss04" on;
+  }
+
 .header {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 4px;
-  /* TODO: we will need such divider in the future for the 'rich' option */
-  /* border-bottom: 1px solid var(--border-outline-color); */
-  padding-bottom: 2px;
 }
 
 .header .percent {
@@ -561,18 +585,26 @@ const compentStyle = css`
     "liga" off,
     "clig" off,
     "ss04" on;
+    color: var(--element-neutral-color);
+    padding-bottom: var(
+      --global-typography-instrument-value-large-padding-bottom
+    );
     /* Keep the number and the trailing \`%\` symbol on one line. */
     white-space: nowrap;
   }
 
 .header .percent-symbol {
-    font-family: var(--font-family-main);
-    font-size: var(--global-typography-ui-body-font-size);
-    line-height: var(--global-typography-ui-body-line-height);
+    font-family: var(--global-typography-font-family);
+    font-size: var(--global-typography-instrument-unit-font-size);
+    line-height: var(--global-typography-instrument-unit-line-height);
     font-feature-settings:
     "liga" off,
     "clig" off,
     "ss04" on;
+    /* \`inline-block\` so \`padding-bottom\` actually applies (ignored on
+     * plain inline text). */
+    display: inline-block;
+    padding-bottom: var(--global-typography-instrument-unit-padding-bottom);
   }
 
 .value {
@@ -605,11 +637,15 @@ const compentStyle = css`
     "liga" off,
     "clig" off,
     "ss04" on;
+    padding-bottom: var(
+      --global-typography-instrument-value-regular-padding-bottom
+    );
   }
 
 .value .divider {
     padding-left: 4px;
     padding-right: 4px;
+    padding-bottom: var(--global-typography-instrument-unit-padding-bottom);
   }
 
 .value .max-value {
@@ -620,8 +656,110 @@ const compentStyle = css`
     "liga" off,
     "clig" off,
     "ss04" on;
+    padding-bottom: var(
+      --global-typography-instrument-value-regular-padding-bottom
+    );
+  }
+
+.value .unit {
+    padding-bottom: var(--global-typography-instrument-unit-padding-bottom);
   }
 
+.rich-divider {
+  border-top: 1px solid var(--border-divider-color);
+  margin-top: 8px;
+}
+
+.rich {
+  display: grid;
+  /* label takes remaining space; value (right-aligned) and suffix
+   * (left-aligned) form fixed content columns so digit right edges and
+   * suffix left edges align vertically across all rows. */
+  grid-template-columns: 1fr auto auto;
+  align-items: baseline;
+  row-gap: 4px;
+  padding-top: 8px;
+  white-space: nowrap;
+  font-family: var(--global-typography-font-family);
+  font-size: var(--global-typography-instrument-unit-font-size);
+  line-height: var(--global-typography-instrument-unit-line-height);
+  font-feature-settings:
+    "liga" off,
+    "clig" off,
+    "ss04" on;
+}
+
+.rich-row {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 1 / -1;
+  align-items: baseline;
+  padding-left: var(
+    --instrument-components-readout-new-list-item-regular-container-padding-horizontal
+  );
+  padding-right: var(
+    --instrument-components-readout-new-list-item-regular-container-padding-horizontal
+  );
+}
+
+.rich-label {
+  font-family: var(--global-typography-font-family);
+  font-size: var(--global-typography-instrument-label-font-size);
+  line-height: var(--global-typography-instrument-label-line-height);
+  font-feature-settings:
+    "liga" off,
+    "clig" off,
+    "ss04" on;
+  color: var(--element-inactive-color);
+  padding-right: 8px;
+  text-align: left;
+}
+
+.rich-value {
+  font-family: var(--global-typography-font-family);
+  font-size: var(--global-typography-instrument-value-regular-font-size);
+  line-height: var(--global-typography-instrument-value-regular-line-height);
+  font-feature-settings:
+    "liga" off,
+    "clig" off,
+    "ss04" on;
+  color: var(--element-neutral-color);
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+
+.rich-suffix {
+  display: inline-flex;
+  align-items: baseline;
+  /* Default 2px gap between value and unit when there is no degree/percent
+   * glyph. When a glyph is present it sits flush against the value and the
+   * unit follows flush after the glyph (see \`.rich-glyph + .rich-unit\`). */
+  padding-left: 2px;
+}
+
+.rich-suffix:has(.rich-glyph) {
+  padding-left: 0;
+}
+
+.rich-glyph {
+  font-family: var(--global-typography-font-family);
+  font-size: var(--global-typography-instrument-value-regular-font-size);
+  line-height: var(--global-typography-instrument-value-regular-line-height);
+  font-feature-settings:
+    "liga" off,
+    "clig" off,
+    "ss04" on;
+  color: var(--element-neutral-color);
+}
+
+.rich-unit {
+  color: var(--element-inactive-color);
+}
+
+.rich-glyph + .rich-unit {
+  padding-left: 0;
+}
+
 /* The chart cell is a plain sizing/clipping box. Both child renderers —
  * \`obc-gauge-trend\` (graph / graph-and-bar modes) and \`obc-bar-vertical\`
  * (bar mode) — paint their own background, border and border-radius. */

package/dist/automation/automation-tank/automation-tank.css.js.map

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

package/dist/automation/automation-tank/automation-tank.d.ts

@@ -61,6 +61,24 @@ export declare enum TankChartMode {
     /** Embedded `obc-gauge-trend` line/area chart with a side bar. */
     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;
+}
 /**
  *
  *
@@ -168,6 +186,20 @@ export declare class ObcAutomationTank extends LitElement {
      * precision is needed (see the `WithFractionDigits` story).
      */
     percentFractionDigits: number;
+    /**
+     * 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).
+     */
+    readout: TankReadoutItem[];
     /**
      * Enum-driven badges rendered inside the `badges` cell. Mirrors the API
      * introduced for `ObcAbstractAutomationButton` in PR #839 (#829). When set

package/dist/automation/automation-tank/automation-tank.d.ts.map

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

package/dist/automation/automation-tank/automation-tank.js

@@ -87,6 +87,7 @@ let ObcAutomationTank = class extends LitElement {
     this.showAlertIcon = false;
     this.showTrendSymbol = true;
     this.percentFractionDigits = 0;
+    this.readout = [];
     this.badgeControl = AutomationButtonBadgeControl.None;
     this.badgeAlert = AutomationButtonBadgeAlert.None;
     this.badgeInterlock = AutomationButtonBadgeInterlock.None;
@@ -435,6 +436,30 @@ let ObcAutomationTank = class 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>
           `;
@@ -657,6 +682,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Number })
 ], ObcAutomationTank.prototype, "percentFractionDigits", 2);
+__decorateClass([
+  property({ type: Array, attribute: false })
+], ObcAutomationTank.prototype, "readout", 2);
 __decorateClass([
   property({ type: String })
 ], ObcAutomationTank.prototype, "badgeControl", 2);