@oicl/openbridge-webcomponents 2.0.0-next.96 → 2.0.0-next.98

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-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 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-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 —
@@ -33182,13 +33103,11 @@ function tickmark$1(angle, {
   radiusOffset = 0,
   endLabelsMaxMin = false
 }) {
-  if (scale === Infinity || scale < 0) {
-    throw new Error("Tick scale is not valid");
-  }
+  const safeScale = Number.isFinite(scale) && scale > 0 ? scale : 1;
   const rOff = radiusOffset;
   let innerRadius;
   let outerRadius;
-  textRadius = textRadius + (3 / scale + 3) * (inside ? -1 : 1);
+  textRadius = textRadius + (3 / safeScale + 3) * (inside ? -1 : 1);
   const rad = angle * Math.PI / 180;
   if (size === "primary") {
     innerRadius = 328 / 2 + rOff;
@@ -33207,7 +33126,13 @@ function tickmark$1(angle, {
     outerRadius = 336 / 2 + rOff;
   } else {
     return [
-      textSvg(text ?? "", { angle, inside, scale, textRadius, endLabelsMaxMin })
+      textSvg(text ?? "", {
+        angle,
+        inside,
+        scale: safeScale,
+        textRadius,
+        endLabelsMaxMin
+      })
     ];
   }
   if (inside) {
@@ -33229,10 +33154,16 @@ function tickmark$1(angle, {
     if (rotation === void 0) {
       return [
         tick,
-        textSvg(text, { angle, inside, scale, textRadius, endLabelsMaxMin })
+        textSvg(text, {
+          angle,
+          inside,
+          scale: safeScale,
+          textRadius,
+          endLabelsMaxMin
+        })
       ];
     } else {
-      const newRadius = textRadius + (4 / scale + 5) * (inside ? -1 : 1) * maxDigits / 2;
+      const newRadius = textRadius + (4 / safeScale + 5) * (inside ? -1 : 1) * maxDigits / 2;
       const textX = Math.sin(rad) * newRadius;
       const textY = -Math.cos(rad) * newRadius;
       return [
@@ -37645,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;
@@ -37654,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;
@@ -37729,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();
@@ -38004,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>
           `;
@@ -38254,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);
@@ -38281,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);
@@ -54367,8 +54282,8 @@ let ObcWatch = class extends i$4 {
       }
     }
     const scale = Math.min(clientWidth / width, clientHeight / height);
-    if (scale === Infinity || scale < 0) {
-      throw new Error("Watch scale is not valid");
+    if (!Number.isFinite(scale) || scale <= 0) {
+      return 1;
     }
     return scale;
   }