@oicl/openbridge-webcomponents 2.0.0-next.97 → 2.0.0-next.99

package/bundle/openbridge-webcomponents.bundle.js

@@ -19609,94 +19609,15 @@ const compentStyle$18 = i$7`* {
   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 detail rows are consumer-slotted into \`slot="rich"\` — canonical usage is
+ * an \`<obc-readout-list>\` of \`<obc-readout-list-item>\` rows, which owns its own
+ * cap-height (textbox) typography and cross-row column alignment. The tank only
+ * spaces the slotted content below the divider; the divider itself is shown only
+ * when the slot is filled (\`?hidden\` bound to \`_hasRichSlot\`). */
 
-.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;
+::slotted(obc-readout-list) {
+  display: block;
+  margin-top: 8px;
 }
 
 /* The chart cell is a plain sizing/clipping box. Both child renderers —
@@ -37655,7 +37576,6 @@ let ObcAutomationTank = class extends i$4 {
     this.showAlertIcon = false;
     this.showTrendSymbol = true;
     this.percentFractionDigits = 0;
-    this.readout = [];
     this.badgeControl = AutomationButtonBadgeControl.None;
     this.badgeAlert = AutomationButtonBadgeAlert.None;
     this.badgeInterlock = AutomationButtonBadgeInterlock.None;
@@ -37664,6 +37584,7 @@ let ObcAutomationTank = class extends i$4 {
     this._cellHeight = 0;
     this._hasBadges = false;
     this._hasTagSlot = false;
+    this._hasRichSlot = false;
   }
   get isCompact() {
     return this.compact || this.static;
@@ -37739,6 +37660,12 @@ let ObcAutomationTank = class extends i$4 {
       (n3) => n3.nodeType === Node.ELEMENT_NODE || n3.nodeType === Node.TEXT_NODE && !!n3.textContent?.trim()
     );
   }
+  _onRichSlotChange(e2) {
+    const slot = e2.target;
+    this._hasRichSlot = slot.assignedNodes({ flatten: true }).some(
+      (n3) => n3.nodeType === Node.ELEMENT_NODE || n3.nodeType === Node.TEXT_NODE && !!n3.textContent?.trim()
+    );
+  }
   disconnectedCallback() {
     super.disconnectedCallback();
     this._chartResizeObserver?.disconnect();
@@ -38014,30 +37941,8 @@ let ObcAutomationTank = class extends i$4 {
                     <slot class="unit" name="unit">m<sup>3</sup></slot>
                   </div>
                 </div>
-                <slot name="rich">
-                  ${this.readout.length > 0 ? b`
-                        <div class="rich-divider"></div>
-                        <div class="rich">
-                          ${this.readout.map(
-      (row) => b`
-                              <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 ? b`<span class="rich-glyph">°</span>` : A}${row.hasPercentage ? b`<span class="rich-glyph">%</span>` : A}<span class="rich-unit"
-                                    >${row.unit}</span
-                                  ></span
-                                >
-                              </div>
-                            `
-    )}
-                        </div>
-                      ` : A}
-                </slot>
+                <div class="rich-divider" ?hidden=${!this._hasRichSlot}></div>
+                <slot name="rich" @slotchange=${this._onRichSlotChange}></slot>
               </slot>
             </div>
           `;
@@ -38264,9 +38169,6 @@ __decorateClass$z6([
 __decorateClass$z6([
   n$3({ type: Number })
 ], ObcAutomationTank.prototype, "percentFractionDigits", 2);
-__decorateClass$z6([
-  n$3({ type: Array, attribute: false })
-], ObcAutomationTank.prototype, "readout", 2);
 __decorateClass$z6([
   n$3({ type: String })
 ], ObcAutomationTank.prototype, "badgeControl", 2);
@@ -38291,6 +38193,9 @@ __decorateClass$z6([
 __decorateClass$z6([
   r$3()
 ], ObcAutomationTank.prototype, "_hasTagSlot", 2);
+__decorateClass$z6([
+  r$3()
+], ObcAutomationTank.prototype, "_hasRichSlot", 2);
 ObcAutomationTank = __decorateClass$z6([
   customElement("obc-automation-tank")
 ], ObcAutomationTank);
@@ -56399,6 +56304,14 @@ obc-readout-block {
   align-self: center;
 }
 
+.label-only:is(.readout.direction-horizontal .meta.meta-stacked) {
+    align-self: flex-start;
+  }
+
+.unit-only:is(.readout.direction-horizontal .meta.meta-stacked) {
+    align-self: flex-end;
+  }
+
 .label {
   color: var(--obc-readout-label-color, var(--element-neutral-color));
 }
@@ -56751,9 +56664,7 @@ obc-readout-block {
   --_readout-trim: var(
     --instrument-components-readout-new-group-horizontal-regular-horizontal-trim-padding
   );
-  --_readout-value-gap: var(
-    --instrument-components-readout-new-group-horizontal-regular-horizontal-value-container-gap
-  );
+  --_readout-value-gap: 0;
   --_readout-value-pad-v: var(
     --instrument-components-readout-new-group-horizontal-regular-value-container-padding-vertical
   );
@@ -56775,9 +56686,7 @@ obc-readout-block {
   --_readout-trim: var(
     --instrument-components-readout-new-group-horizontal-medium-horizontal-trim-padding
   );
-  --_readout-value-gap: var(
-    --instrument-components-readout-new-group-horizontal-medium-horizontal-value-container-gap
-  );
+  --_readout-value-gap: 0;
   --_readout-value-pad-v: var(
     --instrument-components-readout-new-group-horizontal-medium-value-container-padding-vertical
   );
@@ -56796,9 +56705,7 @@ obc-readout-block {
   --_readout-trim: var(
     --instrument-components-readout-new-group-horizontal-enhanced-horizontal-trim-padding
   );
-  --_readout-value-gap: var(
-    --instrument-components-readout-new-group-horizontal-enhanced-value-container-gap
-  );
+  --_readout-value-gap: 4px;
   --_readout-value-pad-v: var(
     --instrument-components-readout-new-group-horizontal-enhanced-value-container-padding
   );
@@ -63118,7 +63025,9 @@ let ObcReadout = class extends i$4 {
         class=${e$1({
       meta: true,
       "meta-inline": !stacked,
-      "meta-stacked": stacked
+      "meta-stacked": stacked,
+      "label-only": !!this.label && !this.unit,
+      "unit-only": !!this.unit && !this.label
     })}
         part="meta-wrapper"
       >