@oicl/openbridge-webcomponents 2.0.0-next.56 → 2.0.0-next.57

package/dist/navigation-instruments/roll/roll.js.map

@@ -1 +1 @@
-{"version":3,"file":"roll.js","sources":["../../../src/navigation-instruments/roll/roll.ts"],"sourcesContent":["import {LitElement, css, html, nothing, svg} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport '../watch/watch.js';\nimport {\n  OUTER_RING_RADIUS,\n  VesselImage,\n  VesselImageSize,\n  WatchCircleType,\n  innerRingRadiusFor,\n  vesselImages,\n} from '../watch/watch.js';\nimport {TickmarkType} from '../watch/tickmark.js';\nimport {AdviceState, AdviceType, AngleAdviceRaw} from '../watch/advice.js';\nimport {customElement} from '../../decorator.js';\nimport {\n  computeZoomToFitArcFrame,\n  normalizeArcAngle,\n  shiftArcFrameToOuterEdge,\n  type ZoomToFitArcFrame,\n} from '../../svghelpers/arc-frame.js';\n\nconst watchRadius = OUTER_RING_RADIUS;\n/** Half-side of the centre overlay viewBox in SVG units. */\nconst CENTRE_HALF = 200;\n\n@customElement('obc-roll')\nexport class ObcRoll extends LitElement {\n  @property({type: Number}) roll = 0;\n  @property({type: Number}) minAvgRoll = 0;\n  @property({type: Number}) maxAvgRoll = 0;\n  @property({type: String}) vesselImageFore: VesselImage = VesselImage.psvFore;\n  @property({type: Number}) scaleForeImage = 1;\n  @property({type: Number}) maxRollAdvice: number | undefined = undefined;\n  @property({type: Boolean}) triggerRollAdvice = false;\n  @property({type: Boolean}) zoomToFitArc: boolean = false;\n  /**\n   * Half-extent of the watch arc in degrees. The arc spans `180° ± arcAngle`\n   * and roll values are placed at their true position within it. Default\n   * `45` reproduces the historical 90°-wide arc.\n   *\n   * Smaller values render a narrower arc. Combined with `zoomToFitArc`, the\n   * narrower arc is enlarged (its radius grows) on its own layer, while the\n   * vessel image and the rotating indicator line stay at their natural size\n   * and position on a separate central layer. The two layers are\n   * intentionally visually disconnected.\n   */\n  @property({type: Number}) arcAngle: number = 45;\n\n  private _arcFrame: ZoomToFitArcFrame | undefined;\n\n  private get normalizedScaleForeImage(): number {\n    if (!Number.isFinite(this.scaleForeImage)) {\n      return 1;\n    }\n    return Math.max(0, Math.min(2, this.scaleForeImage));\n  }\n\n  override render() {\n    const arcAngle = normalizeArcAngle(this.arcAngle, 45);\n    // Outer thin-ring complement endpoints. The arc band is centred at\n    // watch angle 180° (bottom) and spans 180° ± arcAngle, so its edges\n    // sit at SVG coords (±R·sin(arcAngle), R·cos(arcAngle)).\n    const x = watchRadius * Math.sin((arcAngle * Math.PI) / 180);\n    const y = watchRadius * Math.cos((arcAngle * Math.PI) / 180);\n\n    const areas = [\n      {\n        startAngle: 180 - arcAngle,\n        endAngle: 180 + arcAngle,\n        roundOutsideCut: true,\n        roundInsideCut: true,\n      },\n    ];\n\n    if (this.zoomToFitArc) {\n      const ext = 48;\n      const targetSize = (176 + ext) * 2;\n      // Pure arc-only fit (compass-sector style). The viewBox is centred on\n      // the enlarged arc bbox, so the origin (centre of the instrument) is\n      // typically OUTSIDE this viewBox. The vessel and central elements\n      // therefore need their own normal-scale layer.\n      const baseFrame = computeZoomToFitArcFrame({\n        areas,\n        outerRadius: OUTER_RING_RADIUS,\n        innerRadius: innerRingRadiusFor(WatchCircleType.double),\n        extension: ext,\n        targetSize,\n      });\n      // Push the enlarged arc to the side so its outer edge aligns with the\n      // central layer's outer ring. Direction is derived from the arc bbox\n      // centre so left/right/top/bottom is handled automatically.\n      this._arcFrame = shiftArcFrameToOuterEdge(\n        baseFrame,\n        OUTER_RING_RADIUS + baseFrame.radiusOffset,\n        OUTER_RING_RADIUS,\n        CENTRE_HALF\n      );\n    } else {\n      this._arcFrame = undefined;\n    }\n\n    const needleTransform = `rotate(${this.roll} 0 0)`;\n    const centreViewBox = `-${CENTRE_HALF} -${CENTRE_HALF} ${CENTRE_HALF * 2} ${CENTRE_HALF * 2}`;\n    const vesselScale = 224 / 160;\n\n    return html`\n      <div class=\"container\">\n        <svg viewBox=\"${centreViewBox}\">\n          ${svg`\n            <line\n              x1=\"-${watchRadius}\"\n              y1=\"0\"\n              x2=\"${watchRadius}\"\n              y2=\"0\"\n              stroke=\"var(--instrument-frame-tertiary-color)\"\n            />\n            <line\n              x1=\"0\"\n              y1=\"0\"\n              y2=\"${watchRadius - 10}\"\n              x2=\"0\"\n              stroke=\"var(--instrument-enhanced-secondary-color)\"\n              transform=\"${needleTransform}\"\n            />\n            <g\n              style=\"transform: rotate(${this.roll}deg) scale(${vesselScale * this.normalizedScaleForeImage}) translate(-80px, -80px);\"\n            >\n              ${this.zoomToFitArc ? vesselImages[this.vesselImageFore] : nothing}\n            </g>\n            ${\n              this.zoomToFitArc\n                ? nothing\n                : svg`\n                    <path\n                      d=\"M ${-x} ${y} A ${watchRadius} ${watchRadius} 0 1 1 ${x} ${y}\"\n                      fill=\"none\"\n                      stroke=\"var(--instrument-frame-tertiary-color)\"\n                    />\n                  `\n            }\n          `}\n        </svg>\n        <obc-watch\n          .watchCircleType=${WatchCircleType.double}\n          .zoomToFitArc=${this.zoomToFitArc}\n          .arcFrame=${this._arcFrame}\n          tickmarksInside\n          .areas=${areas}\n          .barAreas=${[\n            {\n              startAngle: 180 + this.minAvgRoll,\n              endAngle: 180 + this.maxAvgRoll,\n              fillColor: 'var(--instrument-enhanced-tertiary-color)',\n            },\n          ]}\n          .needles=${[\n            {\n              angle: 180 + this.roll,\n              fillColor: 'var(--instrument-enhanced-secondary-color)',\n              strokeColor: 'var(--border-silhouette-color)',\n            },\n          ]}\n          .vessels=${this.zoomToFitArc\n            ? []\n            : [\n                {\n                  size: VesselImageSize.large,\n                  vesselImage: this.vesselImageFore,\n                  transform: `rotate(${this.roll}deg) scale(${this.normalizedScaleForeImage})`,\n                },\n              ]}\n          .tickmarks=${[\n            {\n              angle: 180,\n              type: TickmarkType.main,\n            },\n          ]}\n          .advices=${this.advices}\n        ></obc-watch>\n      </div>\n    `;\n  }\n\n  private get advices(): AngleAdviceRaw[] {\n    const advices = [];\n    if (this.maxRollAdvice !== undefined) {\n      const arcAngle = normalizeArcAngle(this.arcAngle, 45);\n      // Caution band fills the remainder of the arc out to a default 45°\n      // caution range (clamped to the arc edge).\n      const outer = Math.min(arcAngle, 45);\n      const inner = Math.min(this.maxRollAdvice, outer);\n      const state = this.triggerRollAdvice\n        ? AdviceState.triggered\n        : AdviceState.regular;\n      advices.push({\n        minAngle: 180 - outer,\n        maxAngle: 180 - inner,\n        type: AdviceType.caution,\n        state: state,\n        hideMinTickmark: true,\n      });\n      advices.push({\n        minAngle: 180 + inner,\n        maxAngle: 180 + outer,\n        type: AdviceType.caution,\n        state: state,\n        hideMaxTickmark: true,\n      });\n    }\n    return advices;\n  }\n\n  static override styles = css`\n    * {\n      box-sizing: border-box;\n    }\n\n    .container {\n      position: relative;\n      width: 100%;\n      height: 100%;\n    }\n\n    .container > * {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-roll': ObcRoll;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAqBA,MAAM,cAAc;AAEpB,MAAM,cAAc;AAGb,IAAM,UAAN,cAAsB,WAAW;AAAA,EAAjC,cAAA;AAAA,UAAA,GAAA,SAAA;AACqB,SAAA,OAAO;AACP,SAAA,aAAa;AACb,SAAA,aAAa;AACb,SAAA,kBAA+B,YAAY;AAC3C,SAAA,iBAAiB;AACjB,SAAA,gBAAoC;AACnC,SAAA,oBAAoB;AACpB,SAAA,eAAwB;AAYzB,SAAA,WAAmB;AAAA,EAAA;AAAA,EAI7C,IAAY,2BAAmC;AAC7C,QAAI,CAAC,OAAO,SAAS,KAAK,cAAc,GAAG;AACzC,aAAO;AAAA,IACT;AACA,WAAO,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,KAAK,cAAc,CAAC;AAAA,EACrD;AAAA,EAES,SAAS;AAChB,UAAM,WAAW,kBAAkB,KAAK,UAAU,EAAE;AAIpD,UAAM,IAAI,cAAc,KAAK,IAAK,WAAW,KAAK,KAAM,GAAG;AAC3D,UAAM,IAAI,cAAc,KAAK,IAAK,WAAW,KAAK,KAAM,GAAG;AAE3D,UAAM,QAAQ;AAAA,MACZ;AAAA,QACE,YAAY,MAAM;AAAA,QAClB,UAAU,MAAM;AAAA,QAChB,iBAAiB;AAAA,QACjB,gBAAgB;AAAA,MAAA;AAAA,IAClB;AAGF,QAAI,KAAK,cAAc;AACrB,YAAM,MAAM;AACZ,YAAM,cAAc,MAAM,OAAO;AAKjC,YAAM,YAAY,yBAAyB;AAAA,QACzC;AAAA,QACA,aAAa;AAAA,QACb,aAAa,mBAAmB,gBAAgB,MAAM;AAAA,QACtD,WAAW;AAAA,QACX;AAAA,MAAA,CACD;AAID,WAAK,YAAY;AAAA,QACf;AAAA,QACA,oBAAoB,UAAU;AAAA,QAC9B;AAAA,QACA;AAAA,MAAA;AAAA,IAEJ,OAAO;AACL,WAAK,YAAY;AAAA,IACnB;AAEA,UAAM,kBAAkB,UAAU,KAAK,IAAI;AAC3C,UAAM,gBAAgB,IAAI,WAAW,KAAK,WAAW,IAAI,cAAc,CAAC,IAAI,cAAc,CAAC;AAC3F,UAAM,cAAc,MAAM;AAE1B,WAAO;AAAA;AAAA,wBAEa,aAAa;AAAA,YACzB;AAAA;AAAA,qBAES,WAAW;AAAA;AAAA,oBAEZ,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAOX,cAAc,EAAE;AAAA;AAAA;AAAA,2BAGT,eAAe;AAAA;AAAA;AAAA,yCAGD,KAAK,IAAI,cAAc,cAAc,KAAK,wBAAwB;AAAA;AAAA,gBAE3F,KAAK,eAAe,aAAa,KAAK,eAAe,IAAI,OAAO;AAAA;AAAA,cAGlE,KAAK,eACD,UACA;AAAA;AAAA,6BAEW,CAAC,CAAC,IAAI,CAAC,MAAM,WAAW,IAAI,WAAW,UAAU,CAAC,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA,mBAKxE;AAAA,WACD;AAAA;AAAA;AAAA,6BAGkB,gBAAgB,MAAM;AAAA,0BACzB,KAAK,YAAY;AAAA,sBACrB,KAAK,SAAS;AAAA;AAAA,mBAEjB,KAAK;AAAA,sBACF;AAAA,MACV;AAAA,QACE,YAAY,MAAM,KAAK;AAAA,QACvB,UAAU,MAAM,KAAK;AAAA,QACrB,WAAW;AAAA,MAAA;AAAA,IACb,CACD;AAAA,qBACU;AAAA,MACT;AAAA,QACE,OAAO,MAAM,KAAK;AAAA,QAClB,WAAW;AAAA,QACX,aAAa;AAAA,MAAA;AAAA,IACf,CACD;AAAA,qBACU,KAAK,eACZ,KACA;AAAA,MACE;AAAA,QACE,MAAM,gBAAgB;AAAA,QACtB,aAAa,KAAK;AAAA,QAClB,WAAW,UAAU,KAAK,IAAI,cAAc,KAAK,wBAAwB;AAAA,MAAA;AAAA,IAC3E,CACD;AAAA,uBACQ;AAAA,MACX;AAAA,QACE,OAAO;AAAA,QACP,MAAM,aAAa;AAAA,MAAA;AAAA,IACrB,CACD;AAAA,qBACU,KAAK,OAAO;AAAA;AAAA;AAAA;AAAA,EAI/B;AAAA,EAEA,IAAY,UAA4B;AACtC,UAAM,UAAU,CAAA;AAChB,QAAI,KAAK,kBAAkB,QAAW;AACpC,YAAM,WAAW,kBAAkB,KAAK,UAAU,EAAE;AAGpD,YAAM,QAAQ,KAAK,IAAI,UAAU,EAAE;AACnC,YAAM,QAAQ,KAAK,IAAI,KAAK,eAAe,KAAK;AAChD,YAAM,QAAQ,KAAK,oBACf,YAAY,YACZ,YAAY;AAChB,cAAQ,KAAK;AAAA,QACX,UAAU,MAAM;AAAA,QAChB,UAAU,MAAM;AAAA,QAChB,MAAM,WAAW;AAAA,QACjB;AAAA,QACA,iBAAiB;AAAA,MAAA,CAClB;AACD,cAAQ,KAAK;AAAA,QACX,UAAU,MAAM;AAAA,QAChB,UAAU,MAAM;AAAA,QAChB,MAAM,WAAW;AAAA,QACjB;AAAA,QACA,iBAAiB;AAAA,MAAA,CAClB;AAAA,IACH;AACA,WAAO;AAAA,EACT;AAqBF;AA7Ma,QA0LK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAzLC,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GADb,QACe,WAAA,QAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAFb,QAEe,WAAA,cAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAHb,QAGe,WAAA,cAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAJb,QAIe,WAAA,mBAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GALb,QAKe,WAAA,kBAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GANb,QAMe,WAAA,iBAAA,CAAA;AACC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAPd,QAOgB,WAAA,qBAAA,CAAA;AACA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GARd,QAQgB,WAAA,gBAAA,CAAA;AAYD,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GApBb,QAoBe,WAAA,YAAA,CAAA;AApBf,UAAN,gBAAA;AAAA,EADN,cAAc,UAAU;AAAA,GACZ,OAAA;"}
+{"version":3,"file":"roll.js","sources":["../../../src/navigation-instruments/roll/roll.ts"],"sourcesContent":["import {LitElement, css, html, nothing, svg} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport '../watch/watch.js';\nimport {\n  OUTER_RING_RADIUS,\n  VesselImage,\n  VesselImageSize,\n  WatchCircleType,\n  innerRingRadiusFor,\n  vesselImages,\n  type WatchArea,\n} from '../watch/watch.js';\nimport '../readout/readout.js';\nimport {ReadoutDirection, ReadoutVariant} from '../readout/readout.js';\nimport {Priority} from '../types.js';\nimport {TickmarkType} from '../watch/tickmark.js';\nimport {AdviceState, AdviceType, AngleAdviceRaw} from '../watch/advice.js';\nimport {customElement} from '../../decorator.js';\nimport {\n  computeZoomToFitArcFrame,\n  normalizeArcAngle,\n  shiftArcFrameToOuterEdge,\n  type ZoomToFitArcFrame,\n} from '../../svghelpers/arc-frame.js';\n\nconst watchRadius = OUTER_RING_RADIUS;\n/** Half-side of the centre overlay viewBox in SVG units. */\nconst CENTRE_HALF = 200;\n\nexport enum ObcRollType {\n  /** Single arc scale at the bottom (default). */\n  singleScale = 'single-scale',\n  /** Bottom scale duplicated to the top as well. */\n  dualScale = 'dual-scale',\n}\n\n/**\n * `<obc-roll>` — Roll (heel) indicator with a bottom arc scale.\n *\n * Shows `roll` against a watch arc centred at the bottom, with an average-roll\n * band and a rotating indicator. Supports an optional top scale (`dual-scale`),\n * a centre readout (`hasReadout`), and a `regular`/`enhanced` palette. See the\n * individual properties for details.\n *\n * @element obc-roll\n */\n@customElement('obc-roll')\nexport class ObcRoll extends LitElement {\n  @property({type: Number}) roll = 0;\n  @property({type: Number}) minAvgRoll = 0;\n  @property({type: Number}) maxAvgRoll = 0;\n  @property({type: String}) vesselImageFore: VesselImage = VesselImage.psvFore;\n  @property({type: Number}) scaleForeImage = 1;\n  @property({type: Number}) maxRollAdvice: number | undefined = undefined;\n  @property({type: Boolean}) triggerRollAdvice = false;\n  @property({type: Boolean}) zoomToFitArc: boolean = false;\n  /**\n   * When `true`, the centre shows an `<obc-readout>` with the roll value\n   * (label `Roll`, unit `DEG`) instead of the horizon line, rotating indicator\n   * and vessel. Default `false`.\n   */\n  @property({type: Boolean}) hasReadout: boolean = false;\n  /**\n   * `single-scale` shows one arc at the bottom (default); `dual-scale` also\n   * shows the scale on the top arc (the indicator's opposite end).\n   */\n  @property({type: String}) type: ObcRollType = ObcRollType.singleScale;\n  /**\n   * Colour palette for the scale fill / indicator and the readout value:\n   * `regular` (default) or `enhanced`.\n   */\n  @property({type: String}) priority: Priority = Priority.regular;\n  /**\n   * Half-extent of the watch arc in degrees. The arc spans `180° ± arcAngle`\n   * and roll values are placed at their true position within it. Default\n   * `45` reproduces the historical 90°-wide arc.\n   *\n   * Smaller values render a narrower arc. Combined with `zoomToFitArc`, the\n   * narrower arc is enlarged (its radius grows) on its own layer, while the\n   * vessel image and the rotating indicator line stay at their natural size\n   * and position on a separate central layer. The two layers are\n   * intentionally visually disconnected.\n   */\n  @property({type: Number}) arcAngle: number = 45;\n\n  private _arcFrame: ZoomToFitArcFrame | undefined;\n\n  private get normalizedScaleForeImage(): number {\n    if (!Number.isFinite(this.scaleForeImage)) {\n      return 1;\n    }\n    return Math.max(0, Math.min(2, this.scaleForeImage));\n  }\n\n  private get scaleFillColor(): string {\n    return this.priority === Priority.enhanced\n      ? 'var(--instrument-enhanced-tertiary-color)'\n      : 'var(--instrument-regular-tertiary-color)';\n  }\n\n  private get indicatorColor(): string {\n    return this.priority === Priority.enhanced\n      ? 'var(--instrument-enhanced-secondary-color)'\n      : 'var(--instrument-regular-secondary-color)';\n  }\n\n  override render() {\n    const arcAngle = normalizeArcAngle(this.arcAngle, 45);\n    // Outer thin-ring complement endpoints. The arc band is centred at\n    // watch angle 180° (bottom) and spans 180° ± arcAngle, so its edges\n    // sit at SVG coords (±R·sin(arcAngle), R·cos(arcAngle)).\n    const x = watchRadius * Math.sin((arcAngle * Math.PI) / 180);\n    const y = watchRadius * Math.cos((arcAngle * Math.PI) / 180);\n\n    const areas: WatchArea[] = [\n      {\n        startAngle: 180 - arcAngle,\n        endAngle: 180 + arcAngle,\n        roundOutsideCut: true,\n        roundInsideCut: true,\n      },\n    ];\n\n    if (this.zoomToFitArc) {\n      const ext = 48;\n      const targetSize = (176 + ext) * 2;\n      // Pure arc-only fit (compass-sector style). The viewBox is centred on\n      // the enlarged arc bbox, so the origin (centre of the instrument) is\n      // typically OUTSIDE this viewBox. The vessel and central elements\n      // therefore need their own normal-scale layer.\n      const baseFrame = computeZoomToFitArcFrame({\n        areas,\n        outerRadius: OUTER_RING_RADIUS,\n        innerRadius: innerRingRadiusFor(WatchCircleType.double),\n        extension: ext,\n        targetSize,\n      });\n      // Push the enlarged arc to the side so its outer edge aligns with the\n      // central layer's outer ring. Direction is derived from the arc bbox\n      // centre so left/right/top/bottom is handled automatically.\n      this._arcFrame = shiftArcFrameToOuterEdge(\n        baseFrame,\n        OUTER_RING_RADIUS + baseFrame.radiusOffset,\n        OUTER_RING_RADIUS,\n        CENTRE_HALF\n      );\n    } else {\n      this._arcFrame = undefined;\n    }\n\n    const needleTransform = `rotate(${this.roll} 0 0)`;\n    const centreViewBox = `-${CENTRE_HALF} -${CENTRE_HALF} ${CENTRE_HALF * 2} ${CENTRE_HALF * 2}`;\n    const vesselScale = 224 / 160;\n\n    return html`\n      <div class=\"container\">\n        <svg viewBox=\"${centreViewBox}\">\n          ${this.hasReadout\n            ? nothing\n            : svg`\n                <line\n                  x1=\"-${watchRadius}\"\n                  y1=\"0\"\n                  x2=\"${watchRadius}\"\n                  y2=\"0\"\n                  stroke=\"var(--instrument-frame-tertiary-color)\"\n                />\n                <line\n                  x1=\"0\"\n                  y1=\"0\"\n                  y2=\"${watchRadius - 10}\"\n                  x2=\"0\"\n                  stroke=\"${this.indicatorColor}\"\n                  transform=\"${needleTransform}\"\n                />\n                <g\n                  style=\"transform: rotate(${this.roll}deg) scale(${vesselScale * this.normalizedScaleForeImage}) translate(-80px, -80px);\"\n                >\n                  ${this.zoomToFitArc ? vesselImages[this.vesselImageFore] : nothing}\n                </g>\n              `}\n          ${this.zoomToFitArc\n            ? nothing\n            : svg`\n                <path\n                  d=\"M ${-x} ${y} A ${watchRadius} ${watchRadius} 0 1 1 ${x} ${y}\"\n                  fill=\"none\"\n                  stroke=\"var(--instrument-frame-tertiary-color)\"\n                />\n              `}\n        </svg>\n        ${this.renderScale(areas, false)}\n        ${this.type === ObcRollType.dualScale\n          ? this.renderScale(areas, true)\n          : nothing}\n        ${this.hasReadout\n          ? html`<div class=\"readout\">\n              <obc-readout\n                .variant=${ReadoutVariant.enhanced}\n                .direction=${ReadoutDirection.vertical}\n                .hasSetpoint=${false}\n                .hasAdvice=${false}\n                .value=${this.roll}\n                .fractionDigits=${0}\n                .valuePriority=${this.priority}\n                label=\"Roll\"\n                unit=\"DEG\"\n              ></obc-readout>\n            </div>`\n          : nothing}\n      </div>\n    `;\n  }\n\n  // `top` rotates a second watch 180° onto the top arc for dual-scale — a\n  // rotation (opposite end of the indicator), not a mirror. A separate watch\n  // keeps the zoomed `arcFrame` correct.\n  private renderScale(areas: WatchArea[], top: boolean) {\n    return html`\n      <obc-watch\n        class=${top ? 'scale-top' : nothing}\n        .priority=${this.priority}\n        .watchCircleType=${WatchCircleType.double}\n        .zoomToFitArc=${this.zoomToFitArc}\n        .arcFrame=${this._arcFrame}\n        tickmarksInside\n        .areas=${areas}\n        .barAreas=${[\n          {\n            startAngle: 180 + this.minAvgRoll,\n            endAngle: 180 + this.maxAvgRoll,\n            fillColor: this.scaleFillColor,\n          },\n        ]}\n        .needles=${[\n          {\n            angle: 180 + this.roll,\n            fillColor: this.indicatorColor,\n            strokeColor: 'var(--border-silhouette-color)',\n          },\n        ]}\n        .vessels=${top || this.zoomToFitArc || this.hasReadout\n          ? []\n          : [\n              {\n                size: VesselImageSize.large,\n                vesselImage: this.vesselImageFore,\n                transform: `rotate(${this.roll}deg) scale(${this.normalizedScaleForeImage})`,\n              },\n            ]}\n        .tickmarks=${[{angle: 180, type: TickmarkType.main}]}\n        .advices=${this.advices}\n      ></obc-watch>\n    `;\n  }\n\n  private get advices(): AngleAdviceRaw[] {\n    if (this.maxRollAdvice === undefined) {\n      return [];\n    }\n    const arcAngle = normalizeArcAngle(this.arcAngle, 45);\n    // Caution band fills the remainder of the arc out to a default 45° caution\n    // range (clamped to the arc edge).\n    const outer = Math.min(arcAngle, 45);\n    const inner = Math.min(this.maxRollAdvice, outer);\n    const state = this.triggerRollAdvice\n      ? AdviceState.triggered\n      : AdviceState.regular;\n    return [\n      {\n        minAngle: 180 - outer,\n        maxAngle: 180 - inner,\n        type: AdviceType.caution,\n        state: state,\n        hideMinTickmark: true,\n      },\n      {\n        minAngle: 180 + inner,\n        maxAngle: 180 + outer,\n        type: AdviceType.caution,\n        state: state,\n        hideMaxTickmark: true,\n      },\n    ];\n  }\n\n  static override styles = css`\n    * {\n      box-sizing: border-box;\n    }\n\n    .container {\n      position: relative;\n      width: 100%;\n      height: 100%;\n    }\n\n    .container > * {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n    }\n\n    .readout {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .scale-top {\n      transform: rotate(180deg);\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-roll': ObcRoll;\n  }\n}\n"],"names":["ObcRollType"],"mappings":"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"}

package/dist/navigation-instruments/rot-sector/rot-sector.d.ts

@@ -3,6 +3,7 @@ import { AdviceType } from '../watch/advice.js';
 import { Priority } from '../types.js';
 import { TickmarkStyle } from '../watch/tickmark.js';
 import '../../building-blocks/instrument-radial/instrument-radial.js';
+import '../readout/readout.js';
 export declare enum ObcGaugeRadialType {
     filled = "filled",
     bar = "bar",
@@ -120,11 +121,25 @@ export declare class ObcRotSector extends ObcRotSector_base {
     advices: GaugeRadialAdvice[];
     zoomToFitArc: boolean;
     rotArcExtent: number;
+    /**
+     * When `true`, shows a centered `<obc-readout>` (label `ROT`, unit `DEG/min`)
+     * under the arc with the current rate-of-turn value. Default `false`.
+     */
+    hasReadout: boolean;
     getAngle: (v: number) => number;
     get _type(): ObcGaugeRadialType;
     private get _barColor();
+    /**
+     * Vertical position of the readout, in % of the host. In the zoomed view the
+     * arc's lower edge shifts with `rotArcExtent`, so the position is interpolated
+     * between the narrow- and wide-arc anchors to keep a roughly constant gap
+     * between the arc and the readout. The static (unzoomed) arc uses a fixed
+     * position.
+     */
+    private get _readoutTopPercent();
     render(): import('lit-html').TemplateResult<1>;
     private get _needleColor();
+    static styles: import('lit').CSSResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/navigation-instruments/rot-sector/rot-sector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rot-sector.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/rot-sector/rot-sector.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAO,MAAM,KAAK,CAAC;AAGrC,OAAO,EAAC,UAAU,EAAC,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EAAC,QAAQ,EAAC,MAAM,aAAa,CAAC;AAErC,OAAO,8DAA8D,CAAC;AACtE,OAAO,EAAC,aAAa,EAAC,MAAM,sBAAsB,CAAC;AAEnD,oBAAY,kBAAkB;IAC5B,MAAM,WAAW;IACjB,GAAG,QAAQ;IACX,MAAM,WAAW;CAClB;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;CACjB;;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8DG;AACH,qBACa,YAAa,SAAQ,iBAAyB;IAC/B,KAAK,SAAK;IACV,QAAQ,SAAO;IAEzC;;;;;OAKG;IACH,IACI,UAAU,CAAC,CAAC,EAAE,MAAM,EAEvB;IACD,IAAI,UAAU,IAAI,MAAM,CAEvB;IAED;;;;OAIG;IACH,IACI,aAAa,CAAC,CAAC,EAAE,MAAM,EAE1B;IACD,IAAI,aAAa,IAAI,MAAM,CAE1B;IAC0B,UAAU,EAAE,OAAO,CAAS;IACvD,mDAAmD;IACxB,eAAe,EAAE,OAAO,CAAS;IAC5D;;;OAGG;IACuB,uBAAuB,EAAE,MAAM,GAAG,SAAS,CAAM;IAC3E;;;OAGG;IACuB,yBAAyB,EAAE,MAAM,GAAG,SAAS,CAAM;IAC7E;;;OAGG;IACuB,wBAAwB,EAAE,MAAM,GAAG,SAAS,CAC1D;IACc,QAAQ,EAAE,QAAQ,CAAoB;IACrC,aAAa,EAAE,OAAO,CAAS;IAChC,aAAa,EAAE,aAAa,CAC9B;IACmB,OAAO,EAAE,iBAAiB,EAAE,CAAM;IAClD,YAAY,EAAE,OAAO,CAAS;IAC/B,YAAY,EAAE,MAAM,CAAM;IAEpD,QAAQ,GAAI,GAAG,MAAM,KAAG,MAAM,CAG5B;IAEF,IAAI,KAAK,IAAI,kBAAkB,CAE9B;IAED,OAAO,KAAK,SAAS,GAepB;IAEQ,MAAM;IAkCf,OAAO,KAAK,YAAY,GAgBvB;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}
+{"version":3,"file":"rot-sector.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/rot-sector/rot-sector.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAqB,MAAM,KAAK,CAAC;AAGnD,OAAO,EAAC,UAAU,EAAC,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EAAC,QAAQ,EAAC,MAAM,aAAa,CAAC;AAErC,OAAO,8DAA8D,CAAC;AACtE,OAAO,uBAAuB,CAAC;AAE/B,OAAO,EAAC,aAAa,EAAC,MAAM,sBAAsB,CAAC;AAEnD,oBAAY,kBAAkB;IAC5B,MAAM,WAAW;IACjB,GAAG,QAAQ;IACX,MAAM,WAAW;CAClB;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;CACjB;;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8DG;AACH,qBACa,YAAa,SAAQ,iBAAyB;IAC/B,KAAK,SAAK;IACV,QAAQ,SAAO;IAEzC;;;;;OAKG;IACH,IACI,UAAU,CAAC,CAAC,EAAE,MAAM,EAEvB;IACD,IAAI,UAAU,IAAI,MAAM,CAEvB;IAED;;;;OAIG;IACH,IACI,aAAa,CAAC,CAAC,EAAE,MAAM,EAE1B;IACD,IAAI,aAAa,IAAI,MAAM,CAE1B;IAC0B,UAAU,EAAE,OAAO,CAAS;IACvD,mDAAmD;IACxB,eAAe,EAAE,OAAO,CAAS;IAC5D;;;OAGG;IACuB,uBAAuB,EAAE,MAAM,GAAG,SAAS,CAAM;IAC3E;;;OAGG;IACuB,yBAAyB,EAAE,MAAM,GAAG,SAAS,CAAM;IAC7E;;;OAGG;IACuB,wBAAwB,EAAE,MAAM,GAAG,SAAS,CAC1D;IACc,QAAQ,EAAE,QAAQ,CAAoB;IACrC,aAAa,EAAE,OAAO,CAAS;IAChC,aAAa,EAAE,aAAa,CAC9B;IACmB,OAAO,EAAE,iBAAiB,EAAE,CAAM;IAClD,YAAY,EAAE,OAAO,CAAS;IAC/B,YAAY,EAAE,MAAM,CAAM;IACpD;;;OAGG;IACwB,UAAU,EAAE,OAAO,CAAS;IAEvD,QAAQ,GAAI,GAAG,MAAM,KAAG,MAAM,CAG5B;IAEF,IAAI,KAAK,IAAI,kBAAkB,CAE9B;IAED,OAAO,KAAK,SAAS,GAepB;IAED;;;;;;OAMG;IACH,OAAO,KAAK,kBAAkB,GAQ7B;IAEQ,MAAM;IAiDf,OAAO,KAAK,YAAY,GAgBvB;IAED,OAAgB,MAAM,0BAiBpB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}

package/dist/navigation-instruments/rot-sector/rot-sector.js

@@ -1,9 +1,10 @@
-import { LitElement, html } from "lit";
+import { LitElement, nothing, html, css } from "lit";
 import { customElement } from "../../decorator.js";
 import { property } from "lit/decorators.js";
 import { Priority } from "../types.js";
 import { SetpointMixin } from "../../svghelpers/setpoint-mixin.js";
 import "../../building-blocks/instrument-radial/instrument-radial.js";
+import { ReadoutVariant, ReadoutDirection } from "../readout/readout.js";
 import { TickmarkStyle } from "../watch/tickmark.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -37,6 +38,7 @@ let ObcRotSector = class extends SetpointMixin(LitElement) {
     this.advices = [];
     this.zoomToFitArc = false;
     this.rotArcExtent = 60;
+    this.hasReadout = false;
     this.getAngle = (v) => {
       if (!this.maxValue) return 0;
       return v / this.maxValue * this.rotArcExtent;
@@ -71,6 +73,22 @@ let ObcRotSector = class extends SetpointMixin(LitElement) {
     }
     return "var(--instrument-enhanced-tertiary-color)";
   }
+  /**
+   * Vertical position of the readout, in % of the host. In the zoomed view the
+   * arc's lower edge shifts with `rotArcExtent`, so the position is interpolated
+   * between the narrow- and wide-arc anchors to keep a roughly constant gap
+   * between the arc and the readout. The static (unzoomed) arc uses a fixed
+   * position.
+   */
+  get _readoutTopPercent() {
+    if (!this.zoomToFitArc) {
+      return 60;
+    }
+    const narrowTop = 70;
+    const wideTop = 66;
+    const extent = Math.min(60, Math.max(10, this.rotArcExtent));
+    return narrowTop + (wideTop - narrowTop) * (extent - 10) / (60 - 10);
+  }
   render() {
     const barColor = this._barColor;
     return html`
@@ -101,6 +119,19 @@ let ObcRotSector = class extends SetpointMixin(LitElement) {
         .zoomToFitArc=${this.zoomToFitArc}
       >
       </obc-instrument-radial>
+      ${this.hasReadout ? html`<div class="readout" style="top: ${this._readoutTopPercent}%">
+            <obc-readout
+              .variant=${ReadoutVariant.enhanced}
+              .direction=${ReadoutDirection.vertical}
+              .hasSetpoint=${false}
+              .hasAdvice=${false}
+              .value=${this.value}
+              .fractionDigits=${0}
+              .valuePriority=${this.priority}
+              label="ROT"
+              unit="DEG/min"
+            ></obc-readout>
+          </div>` : nothing}
     `;
   }
   get _needleColor() {
@@ -119,6 +150,24 @@ let ObcRotSector = class extends SetpointMixin(LitElement) {
     return "var(--instrument-enhanced-secondary-color)";
   }
 };
+ObcRotSector.styles = css`
+    :host {
+      position: relative;
+      display: block;
+      height: 100%;
+    }
+
+    .readout {
+      position: absolute;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    /* Center the value over the label/unit row instead of right-aligning it. */
+    obc-readout::part(value-wrapper) {
+      justify-self: center;
+    }
+  `;
 __decorateClass([
   property({ type: Number })
 ], ObcRotSector.prototype, "value", 2);
@@ -164,6 +213,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Number })
 ], ObcRotSector.prototype, "rotArcExtent", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcRotSector.prototype, "hasReadout", 2);
 ObcRotSector = __decorateClass([
   customElement("obc-rot-sector")
 ], ObcRotSector);

package/dist/navigation-instruments/rot-sector/rot-sector.js.map

@@ -1 +1 @@
-{"version":3,"file":"rot-sector.js","sources":["../../../src/navigation-instruments/rot-sector/rot-sector.ts"],"sourcesContent":["import {LitElement, html} from 'lit';\nimport {customElement} from '../../decorator.js';\nimport {property} from 'lit/decorators.js';\nimport {AdviceType} from '../watch/advice.js';\nimport {Priority} from '../types.js';\nimport {SetpointMixin} from '../../svghelpers/setpoint-mixin.js';\nimport '../../building-blocks/instrument-radial/instrument-radial.js';\nimport {TickmarkStyle} from '../watch/tickmark.js';\n\nexport enum ObcGaugeRadialType {\n  filled = 'filled',\n  bar = 'bar',\n  needle = 'needle',\n}\n\nexport interface GaugeRadialAdvice {\n  minValue: number;\n  maxValue: number;\n  type: AdviceType;\n  hinted: boolean;\n}\n\n/**\n * `<obc-rot-sector>` — Rate-of-turn sector gauge for rotational velocity.\n *\n * `ObcRotSector` is a thin wrapper around `<obc-instrument-radial>` that\n * displays a bipolar sector gauge showing rate of turn. The arc extent is\n * configurable via `rotArcExtent` (default 60°), mapping the value range\n * (−maxValue to +maxValue) to ±rotArcExtent degrees. The bottom 50% of the\n * circle is clipped, producing a compact sector arc. When `zoomToFitArc`\n * is enabled, clipping is bypassed and the arc is enlarged to fill the\n * available space. It inherits\n * a full setpoint property bundle from {@link SetpointMixin}, including\n * auto at-setpoint detection, dual-marker adjustment preview, and deadband\n * tuning.\n *\n * ## Features\n *\n * - **Bipolar sector**: Value range is symmetric around zero (−maxValue to\n *   +maxValue), mapped to a ±`rotArcExtent`° arc (default 60°).\n * - **Port/starboard coloring**: When `portStarboard` is true, positive\n *   values render in starboard (green) and negative in port (red).\n * - **Bar display**: Always renders as a `bar` type — no needle or filled\n *   variants.\n * - **Setpoint via mixin**: `setpoint`, `newSetpoint`, `touching`,\n *   `autoAtSetpointDeadband`, `setpointOverride`, and all other setpoint\n *   properties are provided by `SetpointMixin` and forwarded to the inner\n *   `<obc-instrument-radial>`.\n * - **Advice zones**: Pass an array of {@link GaugeRadialAdvice} objects to\n *   render caution/alert arcs on the gauge.\n *\n * ## Usage Guidelines\n *\n * - Set `maxValue` to define the symmetric ± range.\n * - Use `priority` to switch between regular and enhanced color palettes.\n * - Enable `portStarboard` to show directional coloring.\n * - Provide `primaryTickmarkInterval` and `secondaryTickmarkInterval` to\n *   control tickmark density.\n * - Enable `showLabels` to show numeric labels at primary tickmarks.\n *\n * ## Best Practices\n *\n * - Prefer `SetpointMixin` properties (`setpoint`, `touching`, etc.) over\n *   any legacy aliases — the mixin is the single source of truth.\n * - The sector is always bottom-clipped at 50%; do not change `clipBottom`\n *   externally.\n *\n * ## Example\n *\n * ```html\n * <obc-rot-sector\n *   value=\"15\"\n *   maxValue=\"60\"\n *   enhanced\n *   portStarboard\n *   showLabels\n *   primaryTickmarkInterval=\"20\"\n *   secondaryTickmarkInterval=\"10\"\n *   setpoint=\"30\"\n * ></obc-rot-sector>\n * ```\n *\n * @element obc-rot-sector\n * @typedef {import('./rot-sector.js').GaugeRadialAdvice} GaugeRadialAdvice\n */\n@customElement('obc-rot-sector')\nexport class ObcRotSector extends SetpointMixin(LitElement) {\n  @property({type: Number}) value = 0;\n  @property({type: Number}) maxValue = 100;\n\n  /**\n   * Measured rate of turn in degrees per minute (positive = starboard).\n   * Alias for `value` provided for cross-component consistency with\n   * `obc-compass`, `obc-compass-sector`, `obc-compass-flat`, and\n   * `obc-rate-of-turn`. Setting this updates `value`.\n   */\n  @property({type: Number})\n  set rateOfTurn(v: number) {\n    this.value = v;\n  }\n  get rateOfTurn(): number {\n    return this.value;\n  }\n\n  /**\n   * Maximum measured rate of turn in degrees per minute. Alias for\n   * `maxValue` provided for cross-component consistency. Setting this\n   * updates `maxValue`.\n   */\n  @property({type: Number})\n  set rateOfTurnMax(v: number) {\n    this.maxValue = v;\n  }\n  get rateOfTurnMax(): number {\n    return this.maxValue;\n  }\n  @property({type: Boolean}) showLabels: boolean = false;\n  /** Whether to render tickmarks inside the ring. */\n  @property({type: Boolean}) tickmarksInside: boolean = false;\n  /**\n   * Interval for primary tickmarks in value units.\n   * When undefined or <= 0, no primary tickmarks are shown.\n   */\n  @property({type: Number}) primaryTickmarkInterval: number | undefined = 50;\n  /**\n   * Interval for secondary tickmarks in value units.\n   * When undefined or <= 0, no secondary tickmarks are shown.\n   */\n  @property({type: Number}) secondaryTickmarkInterval: number | undefined = 10;\n  /**\n   * Interval for tertiary tickmarks in value units.\n   * When undefined or <= 0, no tertiary tickmarks are shown.\n   */\n  @property({type: Number}) tertiaryTickmarkInterval: number | undefined =\n    undefined;\n  @property({type: String}) priority: Priority = Priority.regular;\n  @property({type: Boolean}) portStarboard: boolean = false;\n  @property({type: String}) tickmarkStyle: TickmarkStyle =\n    TickmarkStyle.regular;\n  @property({type: Array, attribute: false}) advices: GaugeRadialAdvice[] = [];\n  @property({type: Boolean}) zoomToFitArc: boolean = false;\n  @property({type: Number}) rotArcExtent: number = 60;\n\n  getAngle = (v: number): number => {\n    if (!this.maxValue) return 0;\n    return (v / this.maxValue) * this.rotArcExtent;\n  };\n\n  get _type(): ObcGaugeRadialType {\n    return ObcGaugeRadialType.bar;\n  }\n\n  private get _barColor(): string {\n    if (this.portStarboard) {\n      if (this.value > 0) {\n        return 'var(--instrument-starboard-secondary-color)';\n      }\n      if (this.value < 0) {\n        return 'var(--instrument-port-secondary-color)';\n      }\n    }\n\n    if (this.priority !== Priority.enhanced) {\n      return 'var(--instrument-regular-tertiary-color)';\n    }\n\n    return 'var(--instrument-enhanced-tertiary-color)';\n  }\n\n  override render() {\n    const barColor = this._barColor;\n\n    return html`\n      <obc-instrument-radial\n        .value=${this.value}\n        .setpoint=${this.setpoint}\n        .newSetpoint=${this.newSetpoint}\n        .setpointAtZeroDeadband=${this.setpointAtZeroDeadband}\n        .setpointOverride=${this.setpointOverride}\n        .touching=${this.touching}\n        .autoAtSetpoint=${this.autoAtSetpoint}\n        .autoAtSetpointDeadband=${this.autoAtSetpointDeadband}\n        .maxValue=${this.maxValue}\n        .minValue=${-this.maxValue}\n        .getAngle=${this.getAngle}\n        .needleColor=${this._needleColor}\n        .barColor=${barColor}\n        .showLabels=${this.showLabels}\n        .tickmarksInside=${this.tickmarksInside}\n        .tickmarkStyle=${this.tickmarkStyle}\n        .primaryTickmarkInterval=${this.primaryTickmarkInterval}\n        .secondaryTickmarkInterval=${this.secondaryTickmarkInterval}\n        .tertiaryTickmarkInterval=${this.tertiaryTickmarkInterval}\n        .type=${this._type}\n        .needleType=${this._type}\n        .advices=${this.advices}\n        .clipBottom=${50}\n        .zoomToFitArc=${this.zoomToFitArc}\n      >\n      </obc-instrument-radial>\n    `;\n  }\n\n  private get _needleColor(): string {\n    if (this.portStarboard) {\n      if (this.value > 0) {\n        return 'var(--instrument-starboard-primary-color)';\n      }\n      if (this.value < 0) {\n        return 'var(--instrument-port-primary-color)';\n      }\n      return 'var(--instrument-regular-secondary-color)';\n    }\n\n    if (this.priority !== Priority.enhanced) {\n      return 'var(--instrument-regular-secondary-color)';\n    }\n\n    return 'var(--instrument-enhanced-secondary-color)';\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-rot-sector': ObcRotSector;\n  }\n}\n"],"names":["ObcGaugeRadialType"],"mappings":"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"}
+{"version":3,"file":"rot-sector.js","sources":["../../../src/navigation-instruments/rot-sector/rot-sector.ts"],"sourcesContent":["import {LitElement, html, css, nothing} from 'lit';\nimport {customElement} from '../../decorator.js';\nimport {property} from 'lit/decorators.js';\nimport {AdviceType} from '../watch/advice.js';\nimport {Priority} from '../types.js';\nimport {SetpointMixin} from '../../svghelpers/setpoint-mixin.js';\nimport '../../building-blocks/instrument-radial/instrument-radial.js';\nimport '../readout/readout.js';\nimport {ReadoutDirection, ReadoutVariant} from '../readout/readout.js';\nimport {TickmarkStyle} from '../watch/tickmark.js';\n\nexport enum ObcGaugeRadialType {\n  filled = 'filled',\n  bar = 'bar',\n  needle = 'needle',\n}\n\nexport interface GaugeRadialAdvice {\n  minValue: number;\n  maxValue: number;\n  type: AdviceType;\n  hinted: boolean;\n}\n\n/**\n * `<obc-rot-sector>` — Rate-of-turn sector gauge for rotational velocity.\n *\n * `ObcRotSector` is a thin wrapper around `<obc-instrument-radial>` that\n * displays a bipolar sector gauge showing rate of turn. The arc extent is\n * configurable via `rotArcExtent` (default 60°), mapping the value range\n * (−maxValue to +maxValue) to ±rotArcExtent degrees. The bottom 50% of the\n * circle is clipped, producing a compact sector arc. When `zoomToFitArc`\n * is enabled, clipping is bypassed and the arc is enlarged to fill the\n * available space. It inherits\n * a full setpoint property bundle from {@link SetpointMixin}, including\n * auto at-setpoint detection, dual-marker adjustment preview, and deadband\n * tuning.\n *\n * ## Features\n *\n * - **Bipolar sector**: Value range is symmetric around zero (−maxValue to\n *   +maxValue), mapped to a ±`rotArcExtent`° arc (default 60°).\n * - **Port/starboard coloring**: When `portStarboard` is true, positive\n *   values render in starboard (green) and negative in port (red).\n * - **Bar display**: Always renders as a `bar` type — no needle or filled\n *   variants.\n * - **Setpoint via mixin**: `setpoint`, `newSetpoint`, `touching`,\n *   `autoAtSetpointDeadband`, `setpointOverride`, and all other setpoint\n *   properties are provided by `SetpointMixin` and forwarded to the inner\n *   `<obc-instrument-radial>`.\n * - **Advice zones**: Pass an array of {@link GaugeRadialAdvice} objects to\n *   render caution/alert arcs on the gauge.\n *\n * ## Usage Guidelines\n *\n * - Set `maxValue` to define the symmetric ± range.\n * - Use `priority` to switch between regular and enhanced color palettes.\n * - Enable `portStarboard` to show directional coloring.\n * - Provide `primaryTickmarkInterval` and `secondaryTickmarkInterval` to\n *   control tickmark density.\n * - Enable `showLabels` to show numeric labels at primary tickmarks.\n *\n * ## Best Practices\n *\n * - Prefer `SetpointMixin` properties (`setpoint`, `touching`, etc.) over\n *   any legacy aliases — the mixin is the single source of truth.\n * - The sector is always bottom-clipped at 50%; do not change `clipBottom`\n *   externally.\n *\n * ## Example\n *\n * ```html\n * <obc-rot-sector\n *   value=\"15\"\n *   maxValue=\"60\"\n *   enhanced\n *   portStarboard\n *   showLabels\n *   primaryTickmarkInterval=\"20\"\n *   secondaryTickmarkInterval=\"10\"\n *   setpoint=\"30\"\n * ></obc-rot-sector>\n * ```\n *\n * @element obc-rot-sector\n * @typedef {import('./rot-sector.js').GaugeRadialAdvice} GaugeRadialAdvice\n */\n@customElement('obc-rot-sector')\nexport class ObcRotSector extends SetpointMixin(LitElement) {\n  @property({type: Number}) value = 0;\n  @property({type: Number}) maxValue = 100;\n\n  /**\n   * Measured rate of turn in degrees per minute (positive = starboard).\n   * Alias for `value` provided for cross-component consistency with\n   * `obc-compass`, `obc-compass-sector`, `obc-compass-flat`, and\n   * `obc-rate-of-turn`. Setting this updates `value`.\n   */\n  @property({type: Number})\n  set rateOfTurn(v: number) {\n    this.value = v;\n  }\n  get rateOfTurn(): number {\n    return this.value;\n  }\n\n  /**\n   * Maximum measured rate of turn in degrees per minute. Alias for\n   * `maxValue` provided for cross-component consistency. Setting this\n   * updates `maxValue`.\n   */\n  @property({type: Number})\n  set rateOfTurnMax(v: number) {\n    this.maxValue = v;\n  }\n  get rateOfTurnMax(): number {\n    return this.maxValue;\n  }\n  @property({type: Boolean}) showLabels: boolean = false;\n  /** Whether to render tickmarks inside the ring. */\n  @property({type: Boolean}) tickmarksInside: boolean = false;\n  /**\n   * Interval for primary tickmarks in value units.\n   * When undefined or <= 0, no primary tickmarks are shown.\n   */\n  @property({type: Number}) primaryTickmarkInterval: number | undefined = 50;\n  /**\n   * Interval for secondary tickmarks in value units.\n   * When undefined or <= 0, no secondary tickmarks are shown.\n   */\n  @property({type: Number}) secondaryTickmarkInterval: number | undefined = 10;\n  /**\n   * Interval for tertiary tickmarks in value units.\n   * When undefined or <= 0, no tertiary tickmarks are shown.\n   */\n  @property({type: Number}) tertiaryTickmarkInterval: number | undefined =\n    undefined;\n  @property({type: String}) priority: Priority = Priority.regular;\n  @property({type: Boolean}) portStarboard: boolean = false;\n  @property({type: String}) tickmarkStyle: TickmarkStyle =\n    TickmarkStyle.regular;\n  @property({type: Array, attribute: false}) advices: GaugeRadialAdvice[] = [];\n  @property({type: Boolean}) zoomToFitArc: boolean = false;\n  @property({type: Number}) rotArcExtent: number = 60;\n  /**\n   * When `true`, shows a centered `<obc-readout>` (label `ROT`, unit `DEG/min`)\n   * under the arc with the current rate-of-turn value. Default `false`.\n   */\n  @property({type: Boolean}) hasReadout: boolean = false;\n\n  getAngle = (v: number): number => {\n    if (!this.maxValue) return 0;\n    return (v / this.maxValue) * this.rotArcExtent;\n  };\n\n  get _type(): ObcGaugeRadialType {\n    return ObcGaugeRadialType.bar;\n  }\n\n  private get _barColor(): string {\n    if (this.portStarboard) {\n      if (this.value > 0) {\n        return 'var(--instrument-starboard-secondary-color)';\n      }\n      if (this.value < 0) {\n        return 'var(--instrument-port-secondary-color)';\n      }\n    }\n\n    if (this.priority !== Priority.enhanced) {\n      return 'var(--instrument-regular-tertiary-color)';\n    }\n\n    return 'var(--instrument-enhanced-tertiary-color)';\n  }\n\n  /**\n   * Vertical position of the readout, in % of the host. In the zoomed view the\n   * arc's lower edge shifts with `rotArcExtent`, so the position is interpolated\n   * between the narrow- and wide-arc anchors to keep a roughly constant gap\n   * between the arc and the readout. The static (unzoomed) arc uses a fixed\n   * position.\n   */\n  private get _readoutTopPercent(): number {\n    if (!this.zoomToFitArc) {\n      return 60;\n    }\n    const narrowTop = 70; // rotArcExtent ~10\n    const wideTop = 66; // rotArcExtent ~60\n    const extent = Math.min(60, Math.max(10, this.rotArcExtent));\n    return narrowTop + ((wideTop - narrowTop) * (extent - 10)) / (60 - 10);\n  }\n\n  override render() {\n    const barColor = this._barColor;\n\n    return html`\n      <obc-instrument-radial\n        .value=${this.value}\n        .setpoint=${this.setpoint}\n        .newSetpoint=${this.newSetpoint}\n        .setpointAtZeroDeadband=${this.setpointAtZeroDeadband}\n        .setpointOverride=${this.setpointOverride}\n        .touching=${this.touching}\n        .autoAtSetpoint=${this.autoAtSetpoint}\n        .autoAtSetpointDeadband=${this.autoAtSetpointDeadband}\n        .maxValue=${this.maxValue}\n        .minValue=${-this.maxValue}\n        .getAngle=${this.getAngle}\n        .needleColor=${this._needleColor}\n        .barColor=${barColor}\n        .showLabels=${this.showLabels}\n        .tickmarksInside=${this.tickmarksInside}\n        .tickmarkStyle=${this.tickmarkStyle}\n        .primaryTickmarkInterval=${this.primaryTickmarkInterval}\n        .secondaryTickmarkInterval=${this.secondaryTickmarkInterval}\n        .tertiaryTickmarkInterval=${this.tertiaryTickmarkInterval}\n        .type=${this._type}\n        .needleType=${this._type}\n        .advices=${this.advices}\n        .clipBottom=${50}\n        .zoomToFitArc=${this.zoomToFitArc}\n      >\n      </obc-instrument-radial>\n      ${this.hasReadout\n        ? html`<div class=\"readout\" style=\"top: ${this._readoutTopPercent}%\">\n            <obc-readout\n              .variant=${ReadoutVariant.enhanced}\n              .direction=${ReadoutDirection.vertical}\n              .hasSetpoint=${false}\n              .hasAdvice=${false}\n              .value=${this.value}\n              .fractionDigits=${0}\n              .valuePriority=${this.priority}\n              label=\"ROT\"\n              unit=\"DEG/min\"\n            ></obc-readout>\n          </div>`\n        : nothing}\n    `;\n  }\n\n  private get _needleColor(): string {\n    if (this.portStarboard) {\n      if (this.value > 0) {\n        return 'var(--instrument-starboard-primary-color)';\n      }\n      if (this.value < 0) {\n        return 'var(--instrument-port-primary-color)';\n      }\n      return 'var(--instrument-regular-secondary-color)';\n    }\n\n    if (this.priority !== Priority.enhanced) {\n      return 'var(--instrument-regular-secondary-color)';\n    }\n\n    return 'var(--instrument-enhanced-secondary-color)';\n  }\n\n  static override styles = css`\n    :host {\n      position: relative;\n      display: block;\n      height: 100%;\n    }\n\n    .readout {\n      position: absolute;\n      left: 50%;\n      transform: translate(-50%, -50%);\n    }\n\n    /* Center the value over the label/unit row instead of right-aligning it. */\n    obc-readout::part(value-wrapper) {\n      justify-self: center;\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-rot-sector': ObcRotSector;\n  }\n}\n"],"names":["ObcGaugeRadialType"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oicl/openbridge-webcomponents",
-  "version": "2.0.0-next.56",
+  "version": "2.0.0-next.57",
   "type": "module",
   "repository": {
     "type": "git",