@oicl/openbridge-webcomponents 2.0.0-next.111 → 2.0.0-next.113

package/bundle/openbridge-webcomponents.bundle.js

@@ -54698,6 +54698,8 @@ const WIND_SHAFT_BUCKETS = [
   100
 ];
 const WIND_ICON_SCALE = 2;
+const WIND_ICON_TIP_Y = 22.4453;
+const WIND_ICON_TIP_TO_BOX_INNER = (24 - WIND_ICON_TIP_Y) * WIND_ICON_SCALE;
 const windIconCache = /* @__PURE__ */ new Map();
 function getWindIconSvg(bucket) {
   const tagName = `obi-wind-true-${bucket}`;
@@ -55267,6 +55269,8 @@ function innerRingRadiusFor(type) {
   }
 }
 const RADIAL_SETPOINT_INWARD_ADJUST = 4;
+const CURRENT_ICON_OUTSIDE_RADIUS = OUTER_RING_RADIUS + 4;
+const WIND_ICON_OUTSIDE_RADIUS = CURRENT_ICON_OUTSIDE_RADIUS + WIND_ICON_TIP_TO_BOX_INNER;
 let ObcWatch = class extends i$4 {
   constructor() {
     super(...arguments);
@@ -55819,7 +55823,7 @@ let ObcWatch = class extends i$4 {
     );
     const advices = this.advices ? this.advices.map((a2) => renderAdvice$3(a2, rOff)) : A;
     const showNsweLabels = this.showLabels && !this._labelsHidden;
-    const showNorthArrow = this.northArrow && !this._labelsHidden;
+    const showNorthArrow = this.northArrow;
     const insideLabels = this.tickmarksInside && showNsweLabels;
     const includeNorth = !this.northArrow;
     const labelPositions = showNsweLabels ? getLabelPositions({
@@ -55845,7 +55849,7 @@ let ObcWatch = class extends i$4 {
     const wind = this.windKnots != null && this.windFromDirectionDeg != null ? w`<g transform="scale(${this.scaleWindIcon})">${renderWind({
       windKnots: this.windKnots,
       fromDirectionDeg: this.windFromDirectionDeg,
-      radius: this.windSymbolRadius ?? 192,
+      radius: this.windSymbolRadius ?? WIND_ICON_OUTSIDE_RADIUS,
       color: this.windColor
     })}</g>` : A;
     const current = this.current != null && this.currentFromDirectionDeg != null ? this.currentIconCentered ? renderCurrentCentered({
@@ -55856,7 +55860,7 @@ let ObcWatch = class extends i$4 {
     }) : renderCurrent({
       current: this.current,
       fromDirectionDeg: this.currentFromDirectionDeg,
-      radius: this.currentSymbolRadius ?? 192,
+      radius: this.currentSymbolRadius ?? CURRENT_ICON_OUTSIDE_RADIUS,
       color: this.currentColor
     }) : A;
     return b`
@@ -57244,6 +57248,55 @@ __decorateClass$v_([
 ObiNotificationAdvice = __decorateClass$v_([
   customElement("obi-notification-advice")
 ], ObiNotificationAdvice);
+var ReadoutValueType = /* @__PURE__ */ ((ReadoutValueType2) => {
+  ReadoutValueType2["number"] = "number";
+  ReadoutValueType2["text"] = "text";
+  return ReadoutValueType2;
+})(ReadoutValueType || {});
+const READOUT_VALUE_TYPES = Object.values(ReadoutValueType);
+function isReadoutValueType(value) {
+  return typeof value === "string" && READOUT_VALUE_TYPES.includes(value);
+}
+function isBlank(value) {
+  return value.trim() === "";
+}
+function assertReadoutValueType(tagName, value, valueType) {
+  const resolved = valueType ?? "number";
+  if (!isReadoutValueType(resolved)) {
+    throw new TypeError(
+      `<${tagName}>: valueType must be ${READOUT_VALUE_TYPES.map((t2) => `"${t2}"`).join(" or ")} (got ${JSON.stringify(valueType)}).`
+    );
+  }
+  if (resolved !== "number" || typeof value !== "string" || isBlank(value)) {
+    return;
+  }
+  if (Number.isFinite(Number(value))) {
+    return;
+  }
+  throw new TypeError(
+    `<${tagName}>: value must be a number when valueType is "number" (got ${JSON.stringify(value)}). Set valueType="text" to render text.`
+  );
+}
+function resolveReadoutNumericValue(value, valueType) {
+  if (valueType === "text" || value === null || value === void 0) {
+    return void 0;
+  }
+  if (typeof value === "number") {
+    return value;
+  }
+  if (isBlank(value)) {
+    return void 0;
+  }
+  const parsed = Number(value);
+  return Number.isFinite(parsed) ? parsed : void 0;
+}
+function resolveReadoutTextValue(value, valueType) {
+  if (valueType !== "text" || value === null || value === void 0) {
+    return void 0;
+  }
+  const text = typeof value === "number" ? String(value) : value;
+  return isBlank(text) ? void 0 : text;
+}
 function dashedGenerator({
   showZeroPadding,
   minValueLength,
@@ -57309,6 +57362,7 @@ let ObcReadoutBlock = class extends i$4 {
     super(...arguments);
     this.variant = "value";
     this.value = null;
+    this.valueType = ReadoutValueType.number;
     this.size = "small";
     this.enhanced = false;
     this.weight = ObcTextboxFontWeight.regular;
@@ -57415,14 +57469,23 @@ let ObcReadoutBlock = class extends i$4 {
       </span>
     `;
   }
+  willUpdate(changed) {
+    super.willUpdate(changed);
+    assertReadoutValueType("obc-readout-block", this.value, this.valueType);
+  }
   render() {
     const valueSize = this.resolvedValueSize;
     const formatOptions = this.numericFormatOptions;
-    const valueForFormat = this.value ?? void 0;
-    const text = this.off ? this.offText : formatNumericValue(valueForFormat, formatOptions);
-    const hintCount = this.off || !this.hintedZeros || valueForFormat === void 0 || valueForFormat < 0 ? 0 : Math.max(this.maxDigits - readoutFormattedInteger(text), 0);
+    const isTextMode = this.valueType === ReadoutValueType.text;
+    const valueForFormat = resolveReadoutNumericValue(
+      this.value,
+      this.valueType
+    );
+    const textValue = resolveReadoutTextValue(this.value, this.valueType);
+    const text = this.off ? this.offText : isTextMode ? textValue ?? "-" : formatNumericValue(valueForFormat, formatOptions);
+    const hintCount = this.off || isTextMode || !this.hintedZeros || valueForFormat === void 0 || valueForFormat < 0 ? 0 : Math.max(this.maxDigits - readoutFormattedInteger(text), 0);
     const hinted = hintCount > 0 ? "0".repeat(hintCount) : "";
-    const reserver = this.hintedZeros ? this.reserverText : this.widerReserver(this.spaceReserver, this.reserverText);
+    const reserver = isTextMode ? this.spaceReserver ?? "" : this.hintedZeros ? this.reserverText : this.widerReserver(this.spaceReserver, this.reserverText);
     const block = b`
       <div
         class=${e$1({
@@ -57464,8 +57527,11 @@ __decorateClass$vZ([
   n$3({ type: String })
 ], ObcReadoutBlock.prototype, "variant", 2);
 __decorateClass$vZ([
-  n$3({ type: Number })
+  n$3({ type: String })
 ], ObcReadoutBlock.prototype, "value", 2);
+__decorateClass$vZ([
+  n$3({ type: String })
+], ObcReadoutBlock.prototype, "valueType", 2);
 __decorateClass$vZ([
   n$3({ type: String })
 ], ObcReadoutBlock.prototype, "size", 2);
@@ -58999,6 +59065,7 @@ let ObcReadoutListItem = class extends i$4 {
     super(...arguments);
     this.hasValue = true;
     this.value = null;
+    this.valueType = ReadoutValueType.number;
     this.off = false;
     this.offText = "OFF";
     this.hasSetpoint = false;
@@ -59050,7 +59117,7 @@ let ObcReadoutListItem = class extends i$4 {
       return false;
     }
     return isDisplayedAtSetpoint(
-      this.value,
+      resolveReadoutNumericValue(this.value, this.valueType) ?? null,
       this.setpoint,
       this.numericFormatOptions(this.resolvedMaxDigits)
     );
@@ -59143,6 +59210,7 @@ let ObcReadoutListItem = class extends i$4 {
         exportparts="block, block-content, block-text, block-icon, degree"
         .variant=${config.variant}
         .value=${config.value ?? null}
+        .valueType=${config.valueType ?? ReadoutValueType.number}
         .size=${this.resolvedSize}
         .valueSize=${config.valueSize}
         .enhanced=${config.enhanced}
@@ -59328,6 +59396,7 @@ let ObcReadoutListItem = class extends i$4 {
         ${this.hasValue ? this.renderBlock({
       variant: ReadoutBlockVariant.value,
       value: this.value,
+      valueType: this.valueType,
       valueSize: this.valueSize,
       enhanced: this.rowEnhanced,
       weight: this.valueWeight,
@@ -59443,6 +59512,10 @@ let ObcReadoutListItem = class extends i$4 {
       </div>
     `;
   }
+  willUpdate(changed) {
+    super.willUpdate(changed);
+    assertReadoutValueType("obc-readout-list-item", this.value, this.valueType);
+  }
   updated(changed) {
     super.updated(changed);
     const firstUpdate = !this.hasCompletedFirstUpdate;
@@ -59523,8 +59596,11 @@ __decorateClass$vY([
   n$3({ type: Boolean, attribute: false })
 ], ObcReadoutListItem.prototype, "hasValue", 2);
 __decorateClass$vY([
-  n$3({ type: Number })
+  n$3({ type: String })
 ], ObcReadoutListItem.prototype, "value", 2);
+__decorateClass$vY([
+  n$3({ type: String })
+], ObcReadoutListItem.prototype, "valueType", 2);
 __decorateClass$vY([
   n$3({ type: Boolean })
 ], ObcReadoutListItem.prototype, "off", 2);
@@ -64173,6 +64249,7 @@ let ObcReadout = class extends i$4 {
     super(...arguments);
     this.hasValue = true;
     this.value = null;
+    this.valueType = ReadoutValueType.number;
     this.off = false;
     this.offText = "OFF";
     this.hasSetpoint = false;
@@ -64247,7 +64324,7 @@ let ObcReadout = class extends i$4 {
       return false;
     }
     return isDisplayedAtSetpoint(
-      this.value,
+      resolveReadoutNumericValue(this.value, this.valueType) ?? null,
       this.setpoint,
       this.numericFormatOptions(this.resolvedMaxDigits)
     );
@@ -64349,6 +64426,7 @@ let ObcReadout = class extends i$4 {
         exportparts="block, block-content, block-text, block-icon, degree"
         .variant=${config.variant}
         .value=${config.value ?? null}
+        .valueType=${config.valueType ?? ReadoutValueType.number}
         .size=${this.resolvedSize}
         .valueSize=${config.valueSize}
         .enhanced=${config.enhanced}
@@ -64489,6 +64567,7 @@ let ObcReadout = class extends i$4 {
         ${this.renderBlock({
       variant: ReadoutBlockVariant.value,
       value: this.value,
+      valueType: this.valueType,
       valueSize: this.valueSize,
       enhanced: this.rowEnhanced,
       weight: this.valueWeight,
@@ -64767,6 +64846,7 @@ let ObcReadout = class extends i$4 {
     }) : b`${this.renderBlock({
       variant: ReadoutBlockVariant.value,
       value: this.value,
+      valueType: this.valueType,
       valueSize: this.primarySize,
       enhanced: false,
       weight: this.valueWeight,
@@ -64824,6 +64904,10 @@ let ObcReadout = class extends i$4 {
       </div>
     `;
   }
+  willUpdate(changed) {
+    super.willUpdate(changed);
+    assertReadoutValueType("obc-readout", this.value, this.valueType);
+  }
   updated(changed) {
     super.updated(changed);
     if (changed.has("sourcePickerContentVisible")) {
@@ -64917,8 +65001,11 @@ __decorateClass$vH([
   n$3({ type: Boolean, attribute: false })
 ], ObcReadout.prototype, "hasValue", 2);
 __decorateClass$vH([
-  n$3({ type: Number })
+  n$3({ type: String })
 ], ObcReadout.prototype, "value", 2);
+__decorateClass$vH([
+  n$3({ type: String })
+], ObcReadout.prototype, "valueType", 2);
 __decorateClass$vH([
   n$3({ type: Boolean })
 ], ObcReadout.prototype, "off", 2);
@@ -213112,7 +213199,7 @@ let ObcCompass = class extends i$4 {
           .tickmarksInside=${this.tickmarksInside}
           .crosshairEnabled=${true}
           .crosshairCenterCutout=${this.hasCenterReadouts}
-          .northArrow=${!frame.labelsHidden}
+          .northArrow=${true}
           .angleSetpoint=${this.headingSetpoint ?? void 0}
           .newAngleSetpoint=${this.newHeadingSetpoint}
           .atAngleSetpoint=${this._headingSp.computeAtSetpoint(this.heading)}
@@ -213392,14 +213479,18 @@ function renderWindForcePattern(options) {
 function renderCurrentForcePattern(options) {
   const { fromDirectionDeg, radius, patternScale } = options;
   const color2 = options.color ?? DEFAULT_COLOR;
-  const tile = CURRENT_TILE * patternScale;
+  const lengthScale = Number.isFinite(options.waveLength) && options.waveLength > 0 ? options.waveLength : 1;
+  const intensity = Number.isFinite(options.waveHeight) ? Math.max(0, Math.min(1, options.waveHeight)) : 1;
+  const speed = Number.isFinite(options.waveSpeed) ? options.waveSpeed : 0;
+  const tile = CURRENT_TILE * patternScale * lengthScale;
   const side = DESIGN_PATTERN_SQUARE * patternScale;
-  const phase = CURRENT_TILE_PHASE_OFFSET * patternScale;
+  const phase = CURRENT_TILE_PHASE_OFFSET * patternScale * lengthScale;
+  const drift = speed !== 0 ? w`<animateTransform attributeName="transform" attributeType="XML" type="translate" from="0 0" to="0 ${tile * Math.sign(speed)}" dur="${1 / Math.abs(speed)}s" repeatCount="indefinite"/>` : A;
   return w`
     <defs>
       <linearGradient id="current-force-band-gradient" x1="24" y1="0" x2="24" y2="48" gradientUnits="userSpaceOnUse">
         <stop stop-color=${color2} stop-opacity="0"/>
-        <stop offset="1" stop-color=${color2}/>
+        <stop offset="1" stop-color=${color2} stop-opacity=${intensity}/>
       </linearGradient>
       <pattern id="current-force-pattern" patternUnits="userSpaceOnUse" x=${-side / 2 + phase} y=${-side / 2 + phase} width=${tile} height=${tile} viewBox="0 0 48 48" preserveAspectRatio="none">
         <rect width="48" height="48" fill="url(#current-force-band-gradient)"/>
@@ -213407,7 +213498,10 @@ function renderCurrentForcePattern(options) {
       <clipPath id="current-force-clip"><circle cx="0" cy="0" r=${radius}/></clipPath>
     </defs>
     <g clip-path="url(#current-force-clip)" transform="rotate(${fromDirectionDeg})">
-      <rect x=${-side / 2} y=${-side / 2} width=${side} height=${side} fill="url(#current-force-pattern)"/>
+      <g>
+        ${drift}
+        <rect x=${-side / 2} y=${-side / 2 - tile} width=${side} height=${side + 2 * tile} fill="url(#current-force-pattern)"/>
+      </g>
     </g>
   `;
 }
@@ -213423,7 +213517,9 @@ var __decorateClass$L = (decorators, target, key, kind) => {
 };
 const CURRENT_PATTERN_SCALE_VESSEL = 1.39;
 const CURRENT_PATTERN_SCALE_DIRECTION = 2;
-const CURRENT_ICON_PERIPHERY_RADIUS = 116;
+const CURRENT_ICON_PERIPHERY_RADIUS = innerRingRadiusFor(
+  WatchCircleType.double
+);
 const CURRENT_DIRECTION_ICON_SCALE = 7;
 function clampCurrentSpeed(value) {
   if (value == null || !Number.isFinite(value)) {
@@ -213438,6 +213534,10 @@ let ObcCurrent = class extends i$4 {
     this.currentSpeed = null;
     this.currentFromDirection = null;
     this.priority = Priority.regular;
+    this.hasPattern = true;
+    this.waveLength = 1;
+    this.waveHeight = 1;
+    this.waveSpeed = 0;
     this.vesselImage = VesselImage.genericTop;
     this.vesselHeadingDeg = 0;
   }
@@ -213480,7 +213580,7 @@ let ObcCurrent = class extends i$4 {
     `;
   }
   renderForcePattern(watchCircleType) {
-    if (this.currentFromDirection == null) {
+    if (!this.hasPattern || this.currentFromDirection == null) {
       return A;
     }
     return b`
@@ -213489,7 +213589,10 @@ let ObcCurrent = class extends i$4 {
       fromDirectionDeg: this.currentFromDirection,
       radius: innerRingRadiusFor(watchCircleType),
       patternScale: this.isVesselType ? CURRENT_PATTERN_SCALE_VESSEL : CURRENT_PATTERN_SCALE_DIRECTION,
-      color: this.enhanced ? "var(--instrument-enhanced-tertiary-color)" : void 0
+      color: this.enhanced ? "var(--instrument-enhanced-tertiary-color)" : void 0,
+      waveLength: this.waveLength,
+      waveHeight: this.waveHeight,
+      waveSpeed: this.waveSpeed
     })}
       </svg>
     `;
@@ -213508,6 +213611,18 @@ __decorateClass$L([
 __decorateClass$L([
   n$3({ type: String })
 ], ObcCurrent.prototype, "priority", 2);
+__decorateClass$L([
+  n$3({ type: Boolean, attribute: false })
+], ObcCurrent.prototype, "hasPattern", 2);
+__decorateClass$L([
+  n$3({ type: Number })
+], ObcCurrent.prototype, "waveLength", 2);
+__decorateClass$L([
+  n$3({ type: Number })
+], ObcCurrent.prototype, "waveHeight", 2);
+__decorateClass$L([
+  n$3({ type: Number })
+], ObcCurrent.prototype, "waveSpeed", 2);
 __decorateClass$L([
   n$3({ type: String })
 ], ObcCurrent.prototype, "vesselImage", 2);
@@ -222128,7 +222243,7 @@ let ObcHeading = class extends i$4 {
           .tickmarksInside=${this.tickmarksInside}
           .crosshairEnabled=${true}
           .crosshairCenterCutout=${this.hasCenterReadouts}
-          .northArrow=${!frame.labelsHidden}
+          .northArrow=${true}
           .angleSetpoint=${this.headingSetpoint ?? void 0}
           .newAngleSetpoint=${this.newHeadingSetpoint}
           .atAngleSetpoint=${this._headingSp.computeAtSetpoint(this.heading)}
@@ -224483,9 +224598,16 @@ let ObcPitchRollHeave = class extends i$4 {
    * `obc-watch` renders its crosshair after the bands, i.e. on top of them.
    * Drawing it here puts it under the watch layer, so the bands and the heave
    * column mask it naturally.
+   *
+   * In `single-scale` nothing frames the segment above the vessel (the other
+   * three arms end under the pitch band, roll band and heave column), so the
+   * vertical arm stops at the centre instead of continuing upward. In
+   * `dual-scale` the top roll band gives it a natural endpoint, so the full
+   * arm is kept.
    */
   renderCrosshair() {
     const r2 = OUTER_RING_RADIUS;
+    const yTop = this.isDualScale ? -r2 : 0;
     return w`
       <line
         x1=${-r2} y1="0" x2=${r2} y2="0"
@@ -224493,7 +224615,7 @@ let ObcPitchRollHeave = class extends i$4 {
         vector-effect="non-scaling-stroke"
       />
       <line
-        x1="0" y1=${-r2} x2="0" y2=${r2}
+        x1="0" y1=${yTop} x2="0" y2=${r2}
         stroke="var(--instrument-frame-tertiary-color)"
         vector-effect="non-scaling-stroke"
       />
@@ -227416,14 +227538,19 @@ const OBSERVED_ATTRIBUTES = [
   "unit",
   "src",
   "value",
+  "valuetype",
   "setpoint",
   "advice",
+  // ⚠ inert — see the note above; the real names have no hyphens.
   "max-digits",
   "fraction-digits",
   "has-degree",
   "has-setpoint",
   "has-advice"
 ];
+function isTextValueRow(item) {
+  return item.valueType === ReadoutValueType.text;
+}
 function integerDigitCount(value) {
   if (value === null || value === void 0 || Number.isNaN(value)) {
     return 0;
@@ -227474,11 +227601,22 @@ let ObcReadoutList = class extends i$4 {
     let longestSrc = "";
     let anyDegree = false;
     for (const item of items) {
-      maxFractionDigits = Math.max(maxFractionDigits, item.fractionDigits ?? 0);
+      const hasNumericBlock = !isTextValueRow(item) || item.hasSetpoint || item.hasAdvice;
+      if (hasNumericBlock) {
+        maxFractionDigits = Math.max(
+          maxFractionDigits,
+          item.fractionDigits ?? 0
+        );
+        maxIntegerDigits = Math.max(maxIntegerDigits, item.maxDigits ?? 0);
+      }
       maxIntegerDigits = Math.max(
         maxIntegerDigits,
-        item.maxDigits ?? 0,
-        integerDigitCount(item.value),
+        integerDigitCount(
+          resolveReadoutNumericValue(
+            item.value,
+            item.valueType ?? ReadoutValueType.number
+          )
+        ),
         item.hasSetpoint ? integerDigitCount(item.setpoint) : 0,
         item.hasAdvice ? integerDigitCount(item.advice) : 0
       );
@@ -227497,7 +227635,7 @@ let ObcReadoutList = class extends i$4 {
     for (const item of items) {
       item.valueOptions = {
         ...item.valueOptions,
-        spaceReserver: numericReserver
+        spaceReserver: isTextValueRow(item) ? void 0 : numericReserver
       };
       item.setpointOptions = {
         ...item.setpointOptions,
@@ -230747,6 +230885,20 @@ let ObcTopViewPropulsion = class extends i$4 {
       stroke-linecap="round"
     ></path>`;
   }
+  /**
+   * Thin outline on the track band's inner edge, always shown per the
+   * design's track face. Drawn on the overlay because the watch paints its
+   * band bars over the ring circles, which would swallow a watch-side line.
+   */
+  renderInnerRingLine() {
+    return w`<circle
+      r=${BAND_INNER_RADIUS}
+      fill="none"
+      stroke="var(--instrument-frame-tertiary-color)"
+      stroke-width="1"
+      vector-effect="non-scaling-stroke"
+    ></circle>`;
+  }
   renderPropeller() {
     return w`<g transform="scale(${PROPELLER_SCALE}) translate(-80 -80)">${propellerImages[this.propeller]}</g>`;
   }
@@ -230767,6 +230919,7 @@ let ObcTopViewPropulsion = class extends i$4 {
         <obc-watch
           .touching=${this.touching}
           .arcFrame=${frame}
+          .watchCircleType=${WatchCircleType.double}
           .tickmarks=${shownTickmarks}
           .state=${this.state}
           .priority=${this.priority}
@@ -230784,8 +230937,8 @@ let ObcTopViewPropulsion = class extends i$4 {
           .tickmarkStyle=${this.tickmarkStyle}
         ></obc-watch>
         <svg viewBox=${frame.viewBox} xmlns="http://www.w3.org/2000/svg">
-          ${this.renderLoadingArc()} ${this.renderSecondaryArc()}
-          ${this.renderPropeller()}
+          ${this.renderInnerRingLine()} ${this.renderLoadingArc()}
+          ${this.renderSecondaryArc()} ${this.renderPropeller()}
         </svg>
       </div>
     `;
@@ -232298,7 +232451,10 @@ function resolveHistogramMaxRadius(variant) {
 function resolveWindArrowPlacement(variant) {
   switch (variant) {
     case "large":
-      return { windSymbolRadius: 119, scaleWindIcon: 1 };
+      return {
+        windSymbolRadius: innerRingRadiusFor(WatchCircleType.double) + WIND_ICON_TIP_TO_BOX_INNER,
+        scaleWindIcon: 1
+      };
     case "medium":
       return { windSymbolRadius: 62, scaleWindIcon: 1.5 };
     case "small":