@oicl/openbridge-webcomponents 0.0.15-dev-20240916185711 → 0.0.15-dev-20240923190011

package/dist/navigation-instruments/compass-flat/compass-flat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"compass-flat.js","sources":["../../../src/navigation-instruments/compass-flat/compass-flat.ts"],"sourcesContent":["import {LitElement, svg, SVGTemplateResult, unsafeCSS} from 'lit';\nimport componentStyle from './compass-flat.css?inline';\nimport {customElement, property} from 'lit/decorators.js';\nimport {Tickmark, TickmarkType} from '../watch-flat/tickmark-flat';\nimport '../watch-flat/watch-flat';\n\nexport enum LabelPosition {\n  top = -45,\n  bottom = 50,\n}\n\nexport enum LabelStyle {\n  regular = 'var(--instrument-tick-mark-secondary-color)',\n}\n\nexport interface Label {\n  x: number;\n  y: LabelPosition;\n  text: string;\n}\n\n@customElement('obc-compass-flat')\nexport class ObcCompassFlat extends LitElement {\n  @property({type: Boolean}) noPadding: boolean = true;\n  @property({type: Boolean}) FOVIndicator: boolean = false;\n  @property({type: Number}) padding: number = 16;\n  @property({type: Number}) heading = 0;\n  @property({type: Number}) courseOverGround = 0;\n  @property({type: Number}) tickInterval = 5;\n  @property({type: Number}) FOV = 45;\n  @property({type: Number}) minFOV = 45;\n  @property({type: Number}) maxFOV = 180;\n  labels: Label[] = [];\n\n  @property({type: Number}) containerWidth = 0;\n\n  private resizeObserver: ResizeObserver = new ResizeObserver((entries) => {\n    for (const entry of entries) {\n      this.containerWidth = entry.contentRect.width;\n      this.updateLabels();\n    }\n  });\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.resizeObserver.observe(this);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.resizeObserver.unobserve(this);\n  }\n\n  private updateLabels() {\n    if (this.containerWidth < 192) {\n      this.labels = [];\n    } else if (this.containerWidth <= 300) {\n      this.labels = [\n        {x: -180, y: LabelPosition.top, text: 'S'},\n        {x: -90, y: LabelPosition.top, text: 'W'},\n        {x: 0, y: LabelPosition.top, text: 'N'},\n        {x: 90, y: LabelPosition.top, text: 'E'},\n        {x: 180, y: LabelPosition.top, text: 'S'},\n        {x: 270, y: LabelPosition.top, text: 'W'},\n        {x: 360, y: LabelPosition.top, text: 'N'},\n        {x: 450, y: LabelPosition.top, text: 'E'},\n        {x: 540, y: LabelPosition.top, text: 'S'},\n      ];\n    } else {\n      this.labels = [\n        {x: -180, y: LabelPosition.top, text: 'S'},\n        {x: -135, y: LabelPosition.top, text: 'SW'},\n        {x: -90, y: LabelPosition.top, text: 'W'},\n        {x: -45, y: LabelPosition.top, text: 'NW'},\n        {x: 0, y: LabelPosition.top, text: 'N'},\n        {x: 45, y: LabelPosition.top, text: 'NE'},\n        {x: 90, y: LabelPosition.top, text: 'E'},\n        {x: 135, y: LabelPosition.top, text: 'SE'},\n        {x: 180, y: LabelPosition.top, text: 'S'},\n        {x: 225, y: LabelPosition.top, text: 'SW'},\n        {x: 270, y: LabelPosition.top, text: 'W'},\n        {x: 315, y: LabelPosition.top, text: 'NW'},\n        {x: 360, y: LabelPosition.top, text: 'N'},\n        {x: 405, y: LabelPosition.top, text: 'NE'},\n        {x: 450, y: LabelPosition.top, text: 'E'},\n        {x: 495, y: LabelPosition.top, text: 'SE'},\n        {x: 540, y: LabelPosition.top, text: 'S'},\n      ];\n    }\n  }\n\n  private generateIntervalTickmarks(scale: number): Tickmark[] {\n    const tickmarks: Tickmark[] = [];\n    let cardinalInterval = 90;\n\n    if (this.containerWidth > 300) {\n      cardinalInterval = 45;\n    } else if (this.containerWidth < 192) {\n      cardinalInterval = 0;\n    }\n\n    for (\n      let angle = -180;\n      angle < this.maxFOV * 3;\n      angle += this.tickInterval\n    ) {\n      if (cardinalInterval !== 0 && angle % cardinalInterval === 0) {\n        continue;\n      }\n      tickmarks.push({angle: angle * scale, type: TickmarkType.secondary});\n    }\n\n    return tickmarks;\n  }\n\n  private generateCardinalTickmarks(scale: number): Tickmark[] {\n    const tickmarks: Tickmark[] = [];\n\n    for (const label of this.labels) {\n      tickmarks.push({angle: label.x * scale, type: TickmarkType.main});\n    }\n\n    return tickmarks;\n  }\n\n  private generateTickmarks(scale: number): Tickmark[] {\n    return [\n      ...this.generateCardinalTickmarks(scale),\n      ...this.generateIntervalTickmarks(scale),\n    ];\n  }\n\n  private renderFOVIndicator(): SVGTemplateResult[] {\n    const indicators: SVGTemplateResult[] = [];\n\n    const maxAdjustment = 10;\n    const minContainerWidth = 300;\n    const maxContainerWidth = 512;\n\n    let yAdjustment = 0;\n    if (this.containerWidth < maxContainerWidth) {\n      const widthRange = maxContainerWidth - minContainerWidth;\n      const scaleFactor =\n        (maxContainerWidth - this.containerWidth) / widthRange;\n      yAdjustment = scaleFactor * maxAdjustment;\n    }\n\n    const y = LabelPosition.bottom + yAdjustment;\n\n    indicators.push(svg`\n          <text x=\"-175\" y=${y} class=\"label left\" fill=${LabelStyle.regular}>\n            ${-this.FOV}\\u00B0\n          </text>`);\n\n    indicators.push(svg`\n          <text x=\"0\" y=${y} class=\"label\" fill=${LabelStyle.regular}>\n            ${this.heading}\\u00B0\n          </text>`);\n\n    indicators.push(svg`\n          <text x=\"175\" y=${y} class=\"label right\" fill=${LabelStyle.regular}>\n            ${this.FOV}\\u00B0\n          </text>`);\n\n    return indicators;\n  }\n\n  private get HDGSvg(): SVGTemplateResult {\n    return svg`<g transform=\"translate(-24, -74)\">\n          <path d=\"M36.7011 44.1445L36.6898 44.1379L36.6781 44.1318L24.2301 37.6823L24.0001 37.5631L23.7701 37.6823L11.3221 44.1318L11.3104 44.1379L11.2991 44.1445C9.25497 45.3438 6.78661 43.308 7.68828 41.0919L22.6036 4.43285C23.1096 3.18905 24.8906 3.18905 25.3967 4.43284L40.3119 41.0919C41.2136 43.308 38.7452 45.3438 36.7011 44.1445Z\" fill=\"var(--instrument-enhanced-secondary-color)\" stroke=\"var(--border-silhouette-color)\"/>\n        </g>`;\n  }\n\n  private COGSvg(translation: number): SVGTemplateResult {\n    return svg`\n      <g transform=\"translate(${-24 + translation}, -74)\">\n        <path d=\"M31.9025 36.0262L33.1068 36.6502L32.5956 35.3938L24.4632 15.406L24.0001 14.2677L23.537 15.406L15.4046 35.3938L14.8935 36.6502L16.0978 36.0262L24.0001 31.9319L31.9025 36.0262ZM36.7011 44.1445L36.6898 44.1379L36.6781 44.1318L24.2301 37.6823L24.0001 37.5631L23.7701 37.6823L11.3221 44.1318L11.3104 44.1379L11.2991 44.1445C9.25497 45.3438 6.78661 43.308 7.68828 41.0919L22.6036 4.43285C23.1096 3.18905 24.8906 3.18905 25.3967 4.43284L40.3119 41.0919C41.2136 43.308 38.7452 45.3438 36.7011 44.1445Z\" fill=\"var(--instrument-enhanced-secondary-color)\" stroke=\"var(--border-silhouette-color)\"/>\n      </g>\n    `;\n  }\n\n  override render() {\n    let angleDiff = this.courseOverGround - this.heading;\n\n    if (angleDiff > this.maxFOV) {\n      angleDiff -= 360;\n    } else if (angleDiff < -this.maxFOV) {\n      angleDiff += 360;\n    }\n\n    this.FOV = Math.max(this.minFOV, Math.abs(angleDiff));\n\n    const baseOffset = 5;\n    const translationScale = (baseOffset * 35) / this.FOV;\n\n    const translation = angleDiff * translationScale;\n\n    const tickmarks = this.generateTickmarks(translationScale);\n    this.labels.map((l) => {\n      l.x = l.x * translationScale;\n    });\n\n    const viewBox = this.noPadding ? '-192 -128 384 128' : '-200 -144 400 144';\n\n    return svg`\n      <div class=\"container\">\n        <obc-watch-flat .noPadding=${this.noPadding} .FOVIndicator=${this.FOVIndicator ? this.renderFOVIndicator() : []} .labels=${this.labels} .rotation=${this.heading} .tickmarks=${tickmarks} .tickmarkSpacing=${translationScale}></obc-watch-flat>\n        <svg viewBox=${viewBox} xmlns=\"http://www.w3.org/2000/svg\"> \n        ${this.HDGSvg}${this.COGSvg(translation)}\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-compass-flat': ObcCompassFlat;\n  }\n}\n"],"names":["LabelPosition","LabelStyle"],"mappings":"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"}

package/dist/navigation-instruments/thruster/advice.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"advice.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/thruster/advice.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,iBAAiB,EAAe,MAAM,KAAK,CAAC;AACpD,OAAO,EAAC,WAAW,EAAE,UAAU,EAAC,MAAM,iBAAiB,CAAC;AAIxD,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,EAAE,WAAW,CAAC;CACpB;AAED,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;CACjB;AAwBD,wBAAgB,YAAY,CAC1B,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,eAAe,EACvB,aAAa,EAAE,OAAO,GACrB,iBAAiB,CA2DnB"}
+{"version":3,"file":"advice.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/thruster/advice.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,iBAAiB,EAAe,MAAM,KAAK,CAAC;AACpD,OAAO,EAAC,WAAW,EAAE,UAAU,EAAC,MAAM,iBAAiB,CAAC;AAIxD,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,EAAE,WAAW,CAAC;CACpB;AAED,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;CACjB;AAwBD,wBAAgB,YAAY,CAC1B,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,eAAe,EACvB,aAAa,EAAE,OAAO,GACrB,iBAAiB,CA+DnB"}

package/dist/navigation-instruments/thruster/advice.js

@@ -56,20 +56,24 @@ function renderAdvice(height, advice, flipDirection) {
             ${singleSidedTickmark(height, advice.max, tickmarkStyle)}
         `;
   } else {
-    let mainColor;
+    let strokeColor;
     let tickmarkStyle;
+    let fillColor;
     if (advice.state === AdviceState.hinted) {
-      mainColor = "var(--instrument-frame-tertiary-color)";
+      strokeColor = "var(--instrument-frame-tertiary-color)";
+      fillColor = "none";
       tickmarkStyle = TickmarkStyle.hinted;
     } else if (advice.state === AdviceState.regular) {
-      mainColor = "var(--instrument-regular-secondary-color)";
+      strokeColor = "var(--instrument-regular-secondary-color)";
+      fillColor = "none";
       tickmarkStyle = TickmarkStyle.regular;
     } else {
-      mainColor = "var(--instrument-enhanced-secondary-color)";
+      strokeColor = "var(--instrument-enhanced-secondary-color)";
+      fillColor = strokeColor;
       tickmarkStyle = TickmarkStyle.regular;
     }
     return svg`
-            ${adviceMask(height, advice.min, advice.max, mainColor, mainColor)}
+            ${adviceMask(height, advice.min, advice.max, fillColor, strokeColor)}
             ${singleSidedTickmark(height, advice.min, tickmarkStyle)}
             ${singleSidedTickmark(height, advice.max, tickmarkStyle)}
         `;

package/dist/navigation-instruments/thruster/advice.js.map

@@ -1 +1 @@
-{"version":3,"file":"advice.js","sources":["../../../src/navigation-instruments/thruster/advice.ts"],"sourcesContent":["import {SVGTemplateResult, nothing, svg} from 'lit';\nimport {AdviceState, AdviceType} from '../watch/advice';\nimport {TickmarkStyle} from '../watch/tickmark';\nimport {singleSidedTickmark} from './tickmark';\n\nexport interface LinearAdviceRaw {\n  min: number;\n  max: number;\n  type: AdviceType;\n  state: AdviceState;\n}\n\nexport interface LinearAdvice {\n  min: number;\n  max: number;\n  type: AdviceType;\n  hinted: boolean;\n}\n\nfunction adviceMask(\n  height: number,\n  min: number,\n  max: number,\n  fill: string,\n  stroke: string\n): SVGTemplateResult {\n  const width = 8;\n  const x1 = 12;\n  const x2 = x1 + width;\n  const r = width / 2;\n  const yL = (-min * height) / 100 - 2 * r - 2;\n  const yH = (-max * height) / 100 + 2 * r - 2;\n\n  const path = `M ${x1} ${yL} \n                    A ${r} ${r} 0 0 0 ${x2} ${yL}\n                    V ${yH}\n                    A ${r} ${r} 0 0 0 ${x1} ${yH}\n                    Z`;\n  return svg`<path d=${path} fill=${fill} stroke=${stroke} stroke-width=\"1\" vector-effect=\"non-scaling-stroke\" />`;\n}\n\nexport function renderAdvice(\n  height: number,\n  advice: LinearAdviceRaw,\n  flipDirection: boolean\n): SVGTemplateResult {\n  if (advice.type === AdviceType.caution) {\n    let mainColor;\n    let fillColor: string | null = null;\n    if (advice.state === AdviceState.hinted) {\n      mainColor = 'var(--instrument-frame-tertiary-color)';\n    } else if (advice.state === AdviceState.regular) {\n      mainColor = 'var(--instrument-tick-mark-tertiary-color)';\n    } else {\n      mainColor = 'var(--on-caution-active-color)';\n      fillColor = 'var(--alert-caution-color)';\n    }\n    const pattern = [];\n    const ypattern = flipDirection ? 50 : -50;\n    for (let i = -100; i < 300; i += 16) {\n      pattern.push(svg`<g transform=\"translate(0 ${-i}) \">\n            <path d=\"M 50 0 L 0 ${ypattern}\" stroke=${mainColor} stroke-width=\"6\"/>\n            </g>\n            `);\n    }\n    const maskId = `adviceMask-${advice.min}-${advice.max}`;\n    let tickmarkStyle = TickmarkStyle.hinted;\n    if (advice.state === AdviceState.regular) {\n      tickmarkStyle = TickmarkStyle.regular;\n    } else if (advice.state === AdviceState.triggered) {\n      tickmarkStyle = TickmarkStyle.enhanced;\n    }\n\n    return svg`\n            <mask id=${maskId}>\n                ${adviceMask(height, advice.min, advice.max, 'white', 'black')}\n            </mask>\n            <g mask=\"url(#${maskId})\">\n                ${fillColor ? svg`<rect x=\"-256\" y=\"-512\" width=\"512\" height=\"1024\" fill=\"${fillColor}\"/>` : nothing}\n                ${pattern}\n            </g>\n            ${adviceMask(height, advice.min, advice.max, 'none', mainColor)}\n            ${singleSidedTickmark(height, advice.min, tickmarkStyle)}\n            ${singleSidedTickmark(height, advice.max, tickmarkStyle)}\n        `;\n  } else {\n    let mainColor;\n    let tickmarkStyle;\n    if (advice.state === AdviceState.hinted) {\n      mainColor = 'var(--instrument-frame-tertiary-color)';\n      tickmarkStyle = TickmarkStyle.hinted;\n    } else if (advice.state === AdviceState.regular) {\n      mainColor = 'var(--instrument-regular-secondary-color)';\n      tickmarkStyle = TickmarkStyle.regular;\n    } else {\n      mainColor = 'var(--instrument-enhanced-secondary-color)';\n      tickmarkStyle = TickmarkStyle.regular;\n    }\n    return svg`\n            ${adviceMask(height, advice.min, advice.max, mainColor, mainColor)}\n            ${singleSidedTickmark(height, advice.min, tickmarkStyle)}\n            ${singleSidedTickmark(height, advice.max, tickmarkStyle)}\n        `;\n  }\n}\n"],"names":[],"mappings":";;;;AAmBA,SAAS,WACP,QACA,KACA,KACA,MACA,QACmB;AACnB,QAAM,QAAQ;AACd,QAAM,KAAK;AACX,QAAM,KAAK,KAAK;AAChB,QAAM,IAAI,QAAQ;AAClB,QAAM,KAAM,CAAC,MAAM,SAAU,MAAM,IAAI,IAAI;AAC3C,QAAM,KAAM,CAAC,MAAM,SAAU,MAAM,IAAI,IAAI;AAE3C,QAAM,OAAO,KAAK,EAAE,IAAI,EAAE;AAAA,wBACJ,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE;AAAA,wBACxB,EAAE;AAAA,wBACF,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE;AAAA;AAE9C,SAAO,cAAc,IAAI,SAAS,IAAI,WAAW,MAAM;AACzD;AAEgB,SAAA,aACd,QACA,QACA,eACmB;AACf,MAAA,OAAO,SAAS,WAAW,SAAS;AAClC,QAAA;AACJ,QAAI,YAA2B;AAC3B,QAAA,OAAO,UAAU,YAAY,QAAQ;AAC3B,kBAAA;AAAA,IACH,WAAA,OAAO,UAAU,YAAY,SAAS;AACnC,kBAAA;AAAA,IAAA,OACP;AACO,kBAAA;AACA,kBAAA;AAAA,IACd;AACA,UAAM,UAAU,CAAA;AACV,UAAA,WAAW,gBAAgB,KAAK;AACtC,aAAS,IAAI,MAAM,IAAI,KAAK,KAAK,IAAI;AAC3B,cAAA,KAAK,gCAAgC,CAAC,CAAC;AAAA,kCACnB,QAAQ,YAAY,SAAS;AAAA;AAAA,aAElD;AAAA,IACT;AACA,UAAM,SAAS,cAAc,OAAO,GAAG,IAAI,OAAO,GAAG;AACrD,QAAI,gBAAgB,cAAc;AAC9B,QAAA,OAAO,UAAU,YAAY,SAAS;AACxC,sBAAgB,cAAc;AAAA,IACrB,WAAA,OAAO,UAAU,YAAY,WAAW;AACjD,sBAAgB,cAAc;AAAA,IAChC;AAEO,WAAA;AAAA,uBACY,MAAM;AAAA,kBACX,WAAW,QAAQ,OAAO,KAAK,OAAO,KAAK,SAAS,OAAO,CAAC;AAAA;AAAA,4BAElD,MAAM;AAAA,kBAChB,YAAY,8DAA8D,SAAS,QAAQ,OAAO;AAAA,kBAClG,OAAO;AAAA;AAAA,cAEX,WAAW,QAAQ,OAAO,KAAK,OAAO,KAAK,QAAQ,SAAS,CAAC;AAAA,cAC7D,oBAAoB,QAAQ,OAAO,KAAK,aAAa,CAAC;AAAA,cACtD,oBAAoB,QAAQ,OAAO,KAAK,aAAa,CAAC;AAAA;AAAA,EAAA,OAE3D;AACD,QAAA;AACA,QAAA;AACA,QAAA,OAAO,UAAU,YAAY,QAAQ;AAC3B,kBAAA;AACZ,sBAAgB,cAAc;AAAA,IACrB,WAAA,OAAO,UAAU,YAAY,SAAS;AACnC,kBAAA;AACZ,sBAAgB,cAAc;AAAA,IAAA,OACzB;AACO,kBAAA;AACZ,sBAAgB,cAAc;AAAA,IAChC;AACO,WAAA;AAAA,cACG,WAAW,QAAQ,OAAO,KAAK,OAAO,KAAK,WAAW,SAAS,CAAC;AAAA,cAChE,oBAAoB,QAAQ,OAAO,KAAK,aAAa,CAAC;AAAA,cACtD,oBAAoB,QAAQ,OAAO,KAAK,aAAa,CAAC;AAAA;AAAA,EAElE;AACF;"}
+{"version":3,"file":"advice.js","sources":["../../../src/navigation-instruments/thruster/advice.ts"],"sourcesContent":["import {SVGTemplateResult, nothing, svg} from 'lit';\nimport {AdviceState, AdviceType} from '../watch/advice';\nimport {TickmarkStyle} from '../watch/tickmark';\nimport {singleSidedTickmark} from './tickmark';\n\nexport interface LinearAdviceRaw {\n  min: number;\n  max: number;\n  type: AdviceType;\n  state: AdviceState;\n}\n\nexport interface LinearAdvice {\n  min: number;\n  max: number;\n  type: AdviceType;\n  hinted: boolean;\n}\n\nfunction adviceMask(\n  height: number,\n  min: number,\n  max: number,\n  fill: string,\n  stroke: string\n): SVGTemplateResult {\n  const width = 8;\n  const x1 = 12;\n  const x2 = x1 + width;\n  const r = width / 2;\n  const yL = (-min * height) / 100 - 2 * r - 2;\n  const yH = (-max * height) / 100 + 2 * r - 2;\n\n  const path = `M ${x1} ${yL} \n                    A ${r} ${r} 0 0 0 ${x2} ${yL}\n                    V ${yH}\n                    A ${r} ${r} 0 0 0 ${x1} ${yH}\n                    Z`;\n  return svg`<path d=${path} fill=${fill} stroke=${stroke} stroke-width=\"1\" vector-effect=\"non-scaling-stroke\" />`;\n}\n\nexport function renderAdvice(\n  height: number,\n  advice: LinearAdviceRaw,\n  flipDirection: boolean\n): SVGTemplateResult {\n  if (advice.type === AdviceType.caution) {\n    let mainColor;\n    let fillColor: string | null = null;\n    if (advice.state === AdviceState.hinted) {\n      mainColor = 'var(--instrument-frame-tertiary-color)';\n    } else if (advice.state === AdviceState.regular) {\n      mainColor = 'var(--instrument-tick-mark-tertiary-color)';\n    } else {\n      mainColor = 'var(--on-caution-active-color)';\n      fillColor = 'var(--alert-caution-color)';\n    }\n    const pattern = [];\n    const ypattern = flipDirection ? 50 : -50;\n    for (let i = -100; i < 300; i += 16) {\n      pattern.push(svg`<g transform=\"translate(0 ${-i}) \">\n            <path d=\"M 50 0 L 0 ${ypattern}\" stroke=${mainColor} stroke-width=\"6\"/>\n            </g>\n            `);\n    }\n    const maskId = `adviceMask-${advice.min}-${advice.max}`;\n    let tickmarkStyle = TickmarkStyle.hinted;\n    if (advice.state === AdviceState.regular) {\n      tickmarkStyle = TickmarkStyle.regular;\n    } else if (advice.state === AdviceState.triggered) {\n      tickmarkStyle = TickmarkStyle.enhanced;\n    }\n\n    return svg`\n            <mask id=${maskId}>\n                ${adviceMask(height, advice.min, advice.max, 'white', 'black')}\n            </mask>\n            <g mask=\"url(#${maskId})\">\n                ${fillColor ? svg`<rect x=\"-256\" y=\"-512\" width=\"512\" height=\"1024\" fill=\"${fillColor}\"/>` : nothing}\n                ${pattern}\n            </g>\n            ${adviceMask(height, advice.min, advice.max, 'none', mainColor)}\n            ${singleSidedTickmark(height, advice.min, tickmarkStyle)}\n            ${singleSidedTickmark(height, advice.max, tickmarkStyle)}\n        `;\n  } else {\n    let strokeColor;\n    let tickmarkStyle;\n    let fillColor: string;\n    if (advice.state === AdviceState.hinted) {\n      strokeColor = 'var(--instrument-frame-tertiary-color)';\n      fillColor = 'none';\n      tickmarkStyle = TickmarkStyle.hinted;\n    } else if (advice.state === AdviceState.regular) {\n      strokeColor = 'var(--instrument-regular-secondary-color)';\n      fillColor = 'none';\n      tickmarkStyle = TickmarkStyle.regular;\n    } else {\n      strokeColor = 'var(--instrument-enhanced-secondary-color)';\n      fillColor = strokeColor;\n      tickmarkStyle = TickmarkStyle.regular;\n    }\n    return svg`\n            ${adviceMask(height, advice.min, advice.max, fillColor, strokeColor)}\n            ${singleSidedTickmark(height, advice.min, tickmarkStyle)}\n            ${singleSidedTickmark(height, advice.max, tickmarkStyle)}\n        `;\n  }\n}\n"],"names":[],"mappings":";;;;AAmBA,SAAS,WACP,QACA,KACA,KACA,MACA,QACmB;AACnB,QAAM,QAAQ;AACd,QAAM,KAAK;AACX,QAAM,KAAK,KAAK;AAChB,QAAM,IAAI,QAAQ;AAClB,QAAM,KAAM,CAAC,MAAM,SAAU,MAAM,IAAI,IAAI;AAC3C,QAAM,KAAM,CAAC,MAAM,SAAU,MAAM,IAAI,IAAI;AAE3C,QAAM,OAAO,KAAK,EAAE,IAAI,EAAE;AAAA,wBACJ,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE;AAAA,wBACxB,EAAE;AAAA,wBACF,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE;AAAA;AAE9C,SAAO,cAAc,IAAI,SAAS,IAAI,WAAW,MAAM;AACzD;AAEgB,SAAA,aACd,QACA,QACA,eACmB;AACf,MAAA,OAAO,SAAS,WAAW,SAAS;AAClC,QAAA;AACJ,QAAI,YAA2B;AAC3B,QAAA,OAAO,UAAU,YAAY,QAAQ;AAC3B,kBAAA;AAAA,IACH,WAAA,OAAO,UAAU,YAAY,SAAS;AACnC,kBAAA;AAAA,IAAA,OACP;AACO,kBAAA;AACA,kBAAA;AAAA,IACd;AACA,UAAM,UAAU,CAAA;AACV,UAAA,WAAW,gBAAgB,KAAK;AACtC,aAAS,IAAI,MAAM,IAAI,KAAK,KAAK,IAAI;AAC3B,cAAA,KAAK,gCAAgC,CAAC,CAAC;AAAA,kCACnB,QAAQ,YAAY,SAAS;AAAA;AAAA,aAElD;AAAA,IACT;AACA,UAAM,SAAS,cAAc,OAAO,GAAG,IAAI,OAAO,GAAG;AACrD,QAAI,gBAAgB,cAAc;AAC9B,QAAA,OAAO,UAAU,YAAY,SAAS;AACxC,sBAAgB,cAAc;AAAA,IACrB,WAAA,OAAO,UAAU,YAAY,WAAW;AACjD,sBAAgB,cAAc;AAAA,IAChC;AAEO,WAAA;AAAA,uBACY,MAAM;AAAA,kBACX,WAAW,QAAQ,OAAO,KAAK,OAAO,KAAK,SAAS,OAAO,CAAC;AAAA;AAAA,4BAElD,MAAM;AAAA,kBAChB,YAAY,8DAA8D,SAAS,QAAQ,OAAO;AAAA,kBAClG,OAAO;AAAA;AAAA,cAEX,WAAW,QAAQ,OAAO,KAAK,OAAO,KAAK,QAAQ,SAAS,CAAC;AAAA,cAC7D,oBAAoB,QAAQ,OAAO,KAAK,aAAa,CAAC;AAAA,cACtD,oBAAoB,QAAQ,OAAO,KAAK,aAAa,CAAC;AAAA;AAAA,EAAA,OAE3D;AACD,QAAA;AACA,QAAA;AACA,QAAA;AACA,QAAA,OAAO,UAAU,YAAY,QAAQ;AACzB,oBAAA;AACF,kBAAA;AACZ,sBAAgB,cAAc;AAAA,IACrB,WAAA,OAAO,UAAU,YAAY,SAAS;AACjC,oBAAA;AACF,kBAAA;AACZ,sBAAgB,cAAc;AAAA,IAAA,OACzB;AACS,oBAAA;AACF,kBAAA;AACZ,sBAAgB,cAAc;AAAA,IAChC;AACO,WAAA;AAAA,cACG,WAAW,QAAQ,OAAO,KAAK,OAAO,KAAK,WAAW,WAAW,CAAC;AAAA,cAClE,oBAAoB,QAAQ,OAAO,KAAK,aAAa,CAAC;AAAA,cACtD,oBAAoB,QAAQ,OAAO,KAAK,aAAa,CAAC;AAAA;AAAA,EAElE;AACF;"}

package/dist/navigation-instruments/watch/advice.js

@@ -87,7 +87,7 @@ function renderAdvice(advice) {
       tickmarkStyle = TickmarkStyle.regular;
     }
     return svg`
-            ${adviceMask(advice.minAngle, advice.maxAngle, mainColor, mainColor)}
+            ${adviceMask(advice.minAngle, advice.maxAngle, advice.state === "triggered" ? mainColor : "none", mainColor)}
             ${tickmark(advice.minAngle, TickmarkType.primary, tickmarkStyle, 1)}
             ${tickmark(advice.maxAngle, TickmarkType.primary, tickmarkStyle, 1)}
         `;

package/dist/navigation-instruments/watch/advice.js.map

@@ -1 +1 @@
-{"version":3,"file":"advice.js","sources":["../../../src/navigation-instruments/watch/advice.ts"],"sourcesContent":["import {SVGTemplateResult, nothing, svg} from 'lit';\nimport {TickmarkStyle, TickmarkType, tickmark} from './tickmark';\n\nexport enum AdviceType {\n  advice = 'advice',\n  caution = 'caution',\n}\n\nexport enum AdviceState {\n  regular = 'regular',\n  hinted = 'hinted',\n  triggered = 'triggered',\n}\n\nexport interface AngleAdviceRaw {\n  minAngle: number;\n  maxAngle: number;\n  type: AdviceType;\n  state: AdviceState;\n}\n\nexport interface AngleAdvice {\n  minAngle: number;\n  maxAngle: number;\n  type: AdviceType;\n  hinted: boolean;\n}\n\nconst margin = (344 - 328) / 2 + 8;\nconst deltaAngle = Math.atan2(margin, (344 + 328) / 2);\n\nfunction adviceMask(\n  minAngle: number,\n  maxAngle: number,\n  fill: string,\n  stroke: string\n): SVGTemplateResult {\n  const radl = (minAngle * Math.PI) / 180 + deltaAngle;\n  const radh = (maxAngle * Math.PI) / 180 - deltaAngle;\n  const r1 = 328 / 2;\n  const r2 = 344 / 2;\n  const R = (r2 - r1) / 2;\n  const x1l = Math.sin(radl) * r1;\n  const y1l = -Math.cos(radl) * r1;\n  const x2l = Math.sin(radl) * r2;\n  const y2l = -Math.cos(radl) * r2;\n\n  const x1h = Math.sin(radh) * r1;\n  const y1h = -Math.cos(radh) * r1;\n  const x2h = Math.sin(radh) * r2;\n  const y2h = -Math.cos(radh) * r2;\n\n  const path = `M ${x1l} ${y1l} \n                    A ${r1} ${r1} 0 0 1 ${x1h} ${y1h}\n                    A ${R} ${R} 0 0 0 ${x2h} ${y2h}\n                    A ${r2} ${r2} 0 0 0 ${x2l} ${y2l}\n                    A ${R} ${R} 0 0 0 ${x1l} ${y1l}\n                    Z`;\n  return svg`<path d=${path} fill=${fill} stroke=${stroke} stroke-width=\"1\" vector-effect=\"non-scaling-stroke\" />`;\n}\n\nexport function renderAdvice(advice: AngleAdviceRaw): SVGTemplateResult {\n  if (advice.type === AdviceType.caution) {\n    let mainColor;\n    let fillColor: string | null = null;\n    if (advice.state === AdviceState.hinted) {\n      mainColor = 'var(--instrument-frame-tertiary-color)';\n    } else if (advice.state === AdviceState.regular) {\n      mainColor = 'var(--instrument-tick-mark-tertiary-color)';\n    } else {\n      mainColor = 'var(--on-caution-active-color)';\n      fillColor = 'var(--alert-caution-color)';\n    }\n    const radialPattern = [];\n    for (let i = 0; i < 180; i += 4) {\n      radialPattern.push(svg`<g transform=\"rotate(${i}) translate(-256 -256) \">\n            <path d=\"M369.167 64.7317L144 194.732L142 191.268L367.167 61.2676L369.167 64.7317ZM369.167 320.732L144 450.732L142 447.267L367.167 317.267L369.167 320.732Z\" fill=${mainColor}/>\n            </g>\n            `);\n    }\n    const maskId = `adviceMask-${advice.minAngle}-${advice.maxAngle}`;\n    let tickmarkStyle = TickmarkStyle.hinted;\n    if (advice.state === AdviceState.regular) {\n      tickmarkStyle = TickmarkStyle.regular;\n    } else if (advice.state === AdviceState.triggered) {\n      tickmarkStyle = TickmarkStyle.enhanced;\n    }\n\n    return svg`\n            <mask id=${maskId}>\n                ${adviceMask(advice.minAngle, advice.maxAngle, 'white', 'black')}\n            </mask>\n            <g mask=\"url(#${maskId})\">\n                ${fillColor ? svg`<rect x=\"-256\" y=\"-256\" width=\"512\" height=\"512\" fill=\"${fillColor}\"/>` : nothing}\n                ${radialPattern}\n            </g>\n            ${adviceMask(advice.minAngle, advice.maxAngle, 'none', mainColor)}\n            ${tickmark(advice.minAngle, TickmarkType.primary, tickmarkStyle, 1)}\n            ${tickmark(advice.maxAngle, TickmarkType.primary, tickmarkStyle, 1)}\n        `;\n  } else {\n    let mainColor;\n    let tickmarkStyle;\n    if (advice.state === AdviceState.hinted) {\n      mainColor = 'var(--instrument-frame-tertiary-color)';\n      tickmarkStyle = TickmarkStyle.hinted;\n    } else if (advice.state === AdviceState.regular) {\n      mainColor = 'var(--instrument-regular-secondary-color)';\n      tickmarkStyle = TickmarkStyle.regular;\n    } else {\n      mainColor = 'var(--instrument-enhanced-secondary-color)';\n      tickmarkStyle = TickmarkStyle.regular;\n    }\n    return svg`\n            ${adviceMask(advice.minAngle, advice.maxAngle, mainColor, mainColor)}\n            ${tickmark(advice.minAngle, TickmarkType.primary, tickmarkStyle, 1)}\n            ${tickmark(advice.maxAngle, TickmarkType.primary, tickmarkStyle, 1)}\n        `;\n  }\n}\n"],"names":["AdviceType","AdviceState"],"mappings":"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"}
+{"version":3,"file":"advice.js","sources":["../../../src/navigation-instruments/watch/advice.ts"],"sourcesContent":["import {SVGTemplateResult, nothing, svg} from 'lit';\nimport {TickmarkStyle, TickmarkType, tickmark} from './tickmark';\n\nexport enum AdviceType {\n  advice = 'advice',\n  caution = 'caution',\n}\n\nexport enum AdviceState {\n  regular = 'regular',\n  hinted = 'hinted',\n  triggered = 'triggered',\n}\n\nexport interface AngleAdviceRaw {\n  minAngle: number;\n  maxAngle: number;\n  type: AdviceType;\n  state: AdviceState;\n}\n\nexport interface AngleAdvice {\n  minAngle: number;\n  maxAngle: number;\n  type: AdviceType;\n  hinted: boolean;\n}\n\nconst margin = (344 - 328) / 2 + 8;\nconst deltaAngle = Math.atan2(margin, (344 + 328) / 2);\n\nfunction adviceMask(\n  minAngle: number,\n  maxAngle: number,\n  fill: string,\n  stroke: string\n): SVGTemplateResult {\n  const radl = (minAngle * Math.PI) / 180 + deltaAngle;\n  const radh = (maxAngle * Math.PI) / 180 - deltaAngle;\n  const r1 = 328 / 2;\n  const r2 = 344 / 2;\n  const R = (r2 - r1) / 2;\n  const x1l = Math.sin(radl) * r1;\n  const y1l = -Math.cos(radl) * r1;\n  const x2l = Math.sin(radl) * r2;\n  const y2l = -Math.cos(radl) * r2;\n\n  const x1h = Math.sin(radh) * r1;\n  const y1h = -Math.cos(radh) * r1;\n  const x2h = Math.sin(radh) * r2;\n  const y2h = -Math.cos(radh) * r2;\n\n  const path = `M ${x1l} ${y1l} \n                    A ${r1} ${r1} 0 0 1 ${x1h} ${y1h}\n                    A ${R} ${R} 0 0 0 ${x2h} ${y2h}\n                    A ${r2} ${r2} 0 0 0 ${x2l} ${y2l}\n                    A ${R} ${R} 0 0 0 ${x1l} ${y1l}\n                    Z`;\n  return svg`<path d=${path} fill=${fill} stroke=${stroke} stroke-width=\"1\" vector-effect=\"non-scaling-stroke\" />`;\n}\n\nexport function renderAdvice(advice: AngleAdviceRaw): SVGTemplateResult {\n  if (advice.type === AdviceType.caution) {\n    let mainColor;\n    let fillColor: string | null = null;\n    if (advice.state === AdviceState.hinted) {\n      mainColor = 'var(--instrument-frame-tertiary-color)';\n    } else if (advice.state === AdviceState.regular) {\n      mainColor = 'var(--instrument-tick-mark-tertiary-color)';\n    } else {\n      mainColor = 'var(--on-caution-active-color)';\n      fillColor = 'var(--alert-caution-color)';\n    }\n    const radialPattern = [];\n    for (let i = 0; i < 180; i += 4) {\n      radialPattern.push(svg`<g transform=\"rotate(${i}) translate(-256 -256) \">\n            <path d=\"M369.167 64.7317L144 194.732L142 191.268L367.167 61.2676L369.167 64.7317ZM369.167 320.732L144 450.732L142 447.267L367.167 317.267L369.167 320.732Z\" fill=${mainColor}/>\n            </g>\n            `);\n    }\n    const maskId = `adviceMask-${advice.minAngle}-${advice.maxAngle}`;\n    let tickmarkStyle = TickmarkStyle.hinted;\n    if (advice.state === AdviceState.regular) {\n      tickmarkStyle = TickmarkStyle.regular;\n    } else if (advice.state === AdviceState.triggered) {\n      tickmarkStyle = TickmarkStyle.enhanced;\n    }\n\n    return svg`\n            <mask id=${maskId}>\n                ${adviceMask(advice.minAngle, advice.maxAngle, 'white', 'black')}\n            </mask>\n            <g mask=\"url(#${maskId})\">\n                ${fillColor ? svg`<rect x=\"-256\" y=\"-256\" width=\"512\" height=\"512\" fill=\"${fillColor}\"/>` : nothing}\n                ${radialPattern}\n            </g>\n            ${adviceMask(advice.minAngle, advice.maxAngle, 'none', mainColor)}\n            ${tickmark(advice.minAngle, TickmarkType.primary, tickmarkStyle, 1)}\n            ${tickmark(advice.maxAngle, TickmarkType.primary, tickmarkStyle, 1)}\n        `;\n  } else {\n    let mainColor;\n    let tickmarkStyle;\n    if (advice.state === AdviceState.hinted) {\n      mainColor = 'var(--instrument-frame-tertiary-color)';\n      tickmarkStyle = TickmarkStyle.hinted;\n    } else if (advice.state === AdviceState.regular) {\n      mainColor = 'var(--instrument-regular-secondary-color)';\n      tickmarkStyle = TickmarkStyle.regular;\n    } else {\n      mainColor = 'var(--instrument-enhanced-secondary-color)';\n      tickmarkStyle = TickmarkStyle.regular;\n    }\n    return svg`\n            ${adviceMask(advice.minAngle, advice.maxAngle, advice.state === AdviceState.triggered ? mainColor : 'none', mainColor)}\n            ${tickmark(advice.minAngle, TickmarkType.primary, tickmarkStyle, 1)}\n            ${tickmark(advice.maxAngle, TickmarkType.primary, tickmarkStyle, 1)}\n        `;\n  }\n}\n"],"names":["AdviceType","AdviceState"],"mappings":"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"}

package/dist/navigation-instruments/watch/label.d.ts

@@ -0,0 +1,3 @@
+import { SVGTemplateResult } from 'lit-html';
+export declare function renderLabels(scale: number): SVGTemplateResult;
+//# sourceMappingURL=label.d.ts.map

package/dist/navigation-instruments/watch/label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"label.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/watch/label.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,iBAAiB,EAAC,MAAM,UAAU,CAAC;AAEhD,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,iBAAiB,CAkE7D"}

package/dist/navigation-instruments/watch/label.js

@@ -0,0 +1,68 @@
+import { svg } from "lit-html";
+function renderLabels(scale) {
+  const labelWidth = 32;
+  const gap = 8;
+  const radius = 368 / 2;
+  const labels = [
+    {
+      label: "E",
+      x: radius + gap / scale + labelWidth / 2,
+      y: 0,
+      class: "label"
+    },
+    {
+      label: "S",
+      x: 0,
+      y: radius + gap / scale + labelWidth / 2,
+      class: "label"
+    },
+    {
+      label: "W",
+      x: -(radius + gap / scale + labelWidth / 2),
+      y: 0,
+      class: "label"
+    }
+  ];
+  let arrow = svg`<defs>
+        <mask id="circleMask">
+            <rect x="-${radius}" y="-${radius}" width="${radius * 2}" height="${radius * 2}" fill="black"/>
+            <circle cx="0" cy="0" r="${radius}" fill="white"/>
+        </mask>
+    </defs>
+    <g mask="url(#circleMask)" transform="translate(0, ${-(radius + 45 / scale)}) scale(${1 / scale}, ${1 / scale})">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M-32.04 42.7192 0 0 32.039 42.7192C21.627 40.9314 10.922 40 0 40-10.922 40-21.627 40.9314-32.04 42.7192Z" 
+      fill="var(--instrument-tick-mark-secondary-color)"/>
+        <path d="M5.003 29H2.091L-3.013 20.264H-3.077C-3.066 20.52-3.056 20.7813-3.045 21.048-3.034 21.3147-3.024 21.5867-3.013 21.864-2.992 22.1307-2.976 22.4027-2.965 22.68-2.954 22.9573-2.944 23.2347-2.933 23.512V29H-4.997V17.576H-2.101L2.987 26.232H3.035C3.024 25.9867 3.014 25.736 3.003 25.48 2.992 25.2133 2.982 24.952 2.971 24.696 2.971 24.4293 2.966 24.1627 2.955 23.896 2.944 23.6293 2.934 23.3627 2.923 23.096V17.576H5.003V29Z" fill="var(--element-active-inverted-color)"/>
+      </g>`;
+  if (scale < 0.58) {
+    arrow = svg`
+      <g mask="url(#circleMask)" transform="translate(0, ${-radius})">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M-17.8457 24.984 0 0 17.8458 24.984C11.9868 24.3338 6.0324 24 0 24-6.0323 24-11.9867 24.3338-17.8457 24.984Z" fill="var(--instrument-frame-tertiary-color)"/>
+        </g>`;
+    labels.push({
+      label: "N",
+      x: 0,
+      y: -(radius + gap / scale + labelWidth / 2),
+      class: "label"
+    });
+  }
+  return svg`
+    ${arrow}
+
+    ${labels.map(
+    (l) => svg`
+        <text
+          x="${l.x}"
+          y="${l.y}"
+          class="${l.class}"
+        >
+          ${l.label}
+        </text>
+      `
+  )}
+  `;
+}
+export {
+  renderLabels
+};
+//# sourceMappingURL=label.js.map

package/dist/navigation-instruments/watch/label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"label.js","sources":["../../../src/navigation-instruments/watch/label.ts"],"sourcesContent":["import {svg, SVGTemplateResult} from 'lit-html';\n\nexport function renderLabels(scale: number): SVGTemplateResult {\n  const labelWidth = 32;\n  const gap = 8;\n  const radius: number = 368 / 2;\n  const labels = [\n    {\n      label: 'E',\n      x: radius + gap / scale + labelWidth / 2,\n      y: 0,\n      class: 'label',\n    },\n    {\n      label: 'S',\n      x: 0,\n      y: radius + gap / scale + labelWidth / 2,\n      class: 'label',\n    },\n    {\n      label: 'W',\n      x: -(radius + gap / scale + labelWidth / 2),\n      y: 0,\n      class: 'label',\n    },\n  ];\n\n  let arrow = svg`<defs>\n        <mask id=\"circleMask\">\n            <rect x=\"-${radius}\" y=\"-${radius}\" width=\"${radius * 2}\" height=\"${radius * 2}\" fill=\"black\"/>\n            <circle cx=\"0\" cy=\"0\" r=\"${radius}\" fill=\"white\"/>\n        </mask>\n    </defs>\n    <g mask=\"url(#circleMask)\" transform=\"translate(0, ${-(radius + 45 / scale)}) scale(${1 / scale}, ${1 / scale})\">\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M-32.04 42.7192 0 0 32.039 42.7192C21.627 40.9314 10.922 40 0 40-10.922 40-21.627 40.9314-32.04 42.7192Z\" \n      fill=\"var(--instrument-tick-mark-secondary-color)\"/>\n        <path d=\"M5.003 29H2.091L-3.013 20.264H-3.077C-3.066 20.52-3.056 20.7813-3.045 21.048-3.034 21.3147-3.024 21.5867-3.013 21.864-2.992 22.1307-2.976 22.4027-2.965 22.68-2.954 22.9573-2.944 23.2347-2.933 23.512V29H-4.997V17.576H-2.101L2.987 26.232H3.035C3.024 25.9867 3.014 25.736 3.003 25.48 2.992 25.2133 2.982 24.952 2.971 24.696 2.971 24.4293 2.966 24.1627 2.955 23.896 2.944 23.6293 2.934 23.3627 2.923 23.096V17.576H5.003V29Z\" fill=\"var(--element-active-inverted-color)\"/>\n      </g>`;\n\n  if (scale < 0.58) {\n    arrow = svg`\n      <g mask=\"url(#circleMask)\" transform=\"translate(0, ${-radius})\">\n        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M-17.8457 24.984 0 0 17.8458 24.984C11.9868 24.3338 6.0324 24 0 24-6.0323 24-11.9867 24.3338-17.8457 24.984Z\" fill=\"var(--instrument-frame-tertiary-color)\"/>\n        </g>`;\n\n    labels.push({\n      label: 'N',\n      x: 0,\n      y: -(radius + gap / scale + labelWidth / 2),\n      class: 'label',\n    });\n  }\n\n  return svg`\n    ${arrow}\n\n    ${labels.map(\n      (l) => svg`\n        <text\n          x=\"${l.x}\"\n          y=\"${l.y}\"\n          class=\"${l.class}\"\n        >\n          ${l.label}\n        </text>\n      `\n    )}\n  `;\n}\n"],"names":[],"mappings":";AAEO,SAAS,aAAa,OAAkC;AAC7D,QAAM,aAAa;AACnB,QAAM,MAAM;AACZ,QAAM,SAAiB,MAAM;AAC7B,QAAM,SAAS;AAAA,IACb;AAAA,MACE,OAAO;AAAA,MACP,GAAG,SAAS,MAAM,QAAQ,aAAa;AAAA,MACvC,GAAG;AAAA,MACH,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,GAAG;AAAA,MACH,GAAG,SAAS,MAAM,QAAQ,aAAa;AAAA,MACvC,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,GAAG,EAAE,SAAS,MAAM,QAAQ,aAAa;AAAA,MACzC,GAAG;AAAA,MACH,OAAO;AAAA,IACT;AAAA,EAAA;AAGF,MAAI,QAAQ;AAAA;AAAA,wBAEU,MAAM,SAAS,MAAM,YAAY,SAAS,CAAC,aAAa,SAAS,CAAC;AAAA,uCACnD,MAAM;AAAA;AAAA;AAAA,yDAGY,EAAE,SAAS,KAAK,MAAM,WAAW,IAAI,KAAK,KAAK,IAAI,KAAK;AAAA;AAAA;AAAA;AAAA;AAM/G,MAAI,QAAQ,MAAM;AACR,YAAA;AAAA,2DAC+C,CAAC,MAAM;AAAA;AAAA;AAI9D,WAAO,KAAK;AAAA,MACV,OAAO;AAAA,MACP,GAAG;AAAA,MACH,GAAG,EAAE,SAAS,MAAM,QAAQ,aAAa;AAAA,MACzC,OAAO;AAAA,IAAA,CACR;AAAA,EACH;AAEO,SAAA;AAAA,MACH,KAAK;AAAA;AAAA,MAEL,OAAO;AAAA,IACP,CAAC,MAAM;AAAA;AAAA,eAEE,EAAE,CAAC;AAAA,eACH,EAAE,CAAC;AAAA,mBACC,EAAE,KAAK;AAAA;AAAA,YAEd,EAAE,KAAK;AAAA;AAAA;AAAA,EAAA,CAGd;AAAA;AAEL;"}

package/dist/navigation-instruments/watch/watch.css.js

@@ -1,22 +1,23 @@
 import { css } from "lit";
 const compentStyle = css`* {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 .label {
-    /* UI/Body */
-    font-family: 'Noto Sans';
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 370;
-    line-height: 24px;
-    /* 150% */
-    text-decoration: none;
-    font-size: calc(16px / var(--scale));
-    fill: var(--element-neutral-color);
-    alignment-baseline: middle;
-    text-anchor: middle;
-}`;
+  /* UI/Body */
+  font-family: 'Noto Sans';
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 370;
+  line-height: 24px;
+  /* 150% */
+  text-decoration: none;
+  font-size: calc(16px / var(--scale));
+  fill: var(--element-neutral-color);
+  alignment-baseline: middle;
+  text-anchor: middle;
+}
+`;
 export {
   compentStyle as default
 };

package/dist/navigation-instruments/watch/watch.css.js.map

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

package/dist/navigation-instruments/watch/watch.d.ts

@@ -13,8 +13,11 @@ export declare class ObcWatch extends LitElement {
     roundInsideCut: boolean;
     tickmarks: Tickmark[];
     advices: AngleAdviceRaw[];
+    crosshairEnabled: boolean;
+    labelFrameEnabled: boolean;
     private _resizeController;
     private watchCircle;
+    private renderCrosshair;
     render(): import("lit-html").TemplateResult<1>;
     private renderSetpoint;
     static styles: import("lit").CSSResult;

package/dist/navigation-instruments/watch/watch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"watch.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/watch/watch.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EAMX,MAAM,KAAK,CAAC;AAIb,OAAO,EAAC,eAAe,EAAC,MAAM,UAAU,CAAC;AAGzC,OAAO,EAAC,cAAc,EAAe,MAAM,UAAU,CAAC;AACtD,OAAO,EAAC,QAAQ,EAA0B,MAAM,YAAY,CAAC;AAE7D,qBACa,QAAS,SAAQ,UAAU;IACZ,KAAK,EAAE,eAAe,CAA6B;IACnD,aAAa,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,eAAe,EAAE,OAAO,CAAS;IAClC,OAAO,SAAM;IACb,aAAa,EAAE,MAAM,GAAG,IAAI,CAAQ;IACpC,WAAW,EAAE,MAAM,GAAG,IAAI,CAAQ;IACjC,eAAe,UAAS;IACxB,cAAc,UAAS;IACP,SAAS,EAAE,QAAQ,EAAE,CAAM;IAC3B,OAAO,EAAE,cAAc,EAAE,CAAM;IAI1E,OAAO,CAAC,iBAAiB,CAAkC;IAE3D,OAAO,CAAC,WAAW;IA2DV,MAAM;IAuBf,OAAO,CAAC,cAAc;IA8CtB,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
+{"version":3,"file":"watch.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/watch/watch.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EAMX,MAAM,KAAK,CAAC;AAIb,OAAO,EAAC,eAAe,EAAC,MAAM,UAAU,CAAC;AAGzC,OAAO,EAAC,cAAc,EAAe,MAAM,UAAU,CAAC;AACtD,OAAO,EAAC,QAAQ,EAA0B,MAAM,YAAY,CAAC;AAG7D,qBACa,QAAS,SAAQ,UAAU;IACZ,KAAK,EAAE,eAAe,CAA6B;IACnD,aAAa,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,eAAe,EAAE,OAAO,CAAS;IAClC,OAAO,SAAM;IACb,aAAa,EAAE,MAAM,GAAG,IAAI,CAAQ;IACpC,WAAW,EAAE,MAAM,GAAG,IAAI,CAAQ;IACjC,eAAe,UAAS;IACxB,cAAc,UAAS;IACP,SAAS,EAAE,QAAQ,EAAE,CAAM;IAC3B,OAAO,EAAE,cAAc,EAAE,CAAM;IAC/C,gBAAgB,EAAE,OAAO,CAAS;IAClC,iBAAiB,EAAE,OAAO,CAAS;IAI9D,OAAO,CAAC,iBAAiB,CAAkC;IAE3D,OAAO,CAAC,WAAW;IA2DnB,OAAO,CAAC,eAAe;IAuBd,MAAM;IA0Bf,OAAO,CAAC,cAAc;IA8CtB,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/navigation-instruments/watch/watch.js

@@ -7,6 +7,7 @@ import compentStyle from "./watch.css.js";
 import { ResizeController } from "@lit-labs/observers/resize-controller.js";
 import { renderAdvice } from "./advice.js";
 import { tickmark, TickmarkStyle } from "./tickmark.js";
+import { renderLabels } from "./label.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -30,6 +31,8 @@ let ObcWatch = class extends LitElement {
     this.roundInsideCut = false;
     this.tickmarks = [];
     this.advices = [];
+    this.crosshairEnabled = false;
+    this.labelFrameEnabled = false;
     this._resizeController = new ResizeController(this, {});
   }
   watchCircle() {
@@ -82,6 +85,28 @@ let ObcWatch = class extends LitElement {
       `;
     }
   }
+  renderCrosshair(radius) {
+    return svg`
+      <line
+        x1="-${radius}"
+        y1="0"
+        x2="${radius}"
+        y2="0"
+        stroke="var(--instrument-frame-tertiary-color)"
+        stroke-width="1"
+        vector-effect="non-scaling-stroke"
+      />
+      <line
+        x1="0"
+        y1="-${radius}"
+        x2="0"
+        y2="${radius}"
+        stroke="var(--instrument-frame-tertiary-color)"
+        stroke-width="1"
+        vector-effect="non-scaling-stroke"
+      />
+    `;
+  }
   render() {
     const width = (176 + this.padding) * 2;
     const viewBox = `-${width / 2} -${width / 2} ${width} ${width}`;
@@ -91,6 +116,7 @@ let ObcWatch = class extends LitElement {
       (t) => tickmark(t.angle, t.type, TickmarkStyle.hinted, scale, t.text)
     );
     const advices = this.advices ? this.advices.map((a) => renderAdvice(a)) : nothing;
+    const labels = this.labelFrameEnabled ? renderLabels(scale) : nothing;
     return html`
       <svg
         width="100%"
@@ -98,7 +124,8 @@ let ObcWatch = class extends LitElement {
         viewBox=${viewBox}
         style="--scale: ${scale}"
       >
-        ${this.watchCircle()} ${tickmarks} ${advices} ${angleSetpoint}
+        ${this.watchCircle()} ${tickmarks} ${advices} ${angleSetpoint} ${labels}
+        ${this.crosshairEnabled ? this.renderCrosshair(320 / 2) : nothing}
       </svg>
     `;
   }
@@ -176,6 +203,12 @@ __decorateClass([
 __decorateClass([
   property({ type: Array, attribute: false })
 ], ObcWatch.prototype, "advices", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcWatch.prototype, "crosshairEnabled", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcWatch.prototype, "labelFrameEnabled", 2);
 ObcWatch = __decorateClass([
   customElement("obc-watch")
 ], ObcWatch);

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

@@ -1 +1 @@
-{"version":3,"file":"watch.js","sources":["../../../src/navigation-instruments/watch/watch.ts"],"sourcesContent":["import {\n  LitElement,\n  SVGTemplateResult,\n  html,\n  nothing,\n  svg,\n  unsafeCSS,\n} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {circle} from '../../svghelpers';\nimport {roundedArch} from '../../svghelpers/roundedArch';\nimport {InstrumentState} from '../types';\nimport compentStyle from './watch.css?inline';\nimport {ResizeController} from '@lit-labs/observers/resize-controller.js';\nimport {AngleAdviceRaw, renderAdvice} from './advice';\nimport {Tickmark, TickmarkStyle, tickmark} from './tickmark';\n\n@customElement('obc-watch')\nexport class ObcWatch extends LitElement {\n  @property({type: String}) state: InstrumentState = InstrumentState.inCommand;\n  @property({type: Number}) angleSetpoint: number | undefined;\n  @property({type: Boolean}) atAngleSetpoint: boolean = false;\n  @property({type: Number}) padding = 24;\n  @property({type: Number}) cutAngleStart: number | null = null;\n  @property({type: Number}) cutAngleEnd: number | null = null;\n  @property({type: Boolean}) roundOutsideCut = false;\n  @property({type: Boolean}) roundInsideCut = false;\n  @property({type: Array, attribute: false}) tickmarks: Tickmark[] = [];\n  @property({type: Array, attribute: false}) advices: AngleAdviceRaw[] = [];\n\n  // @ts-expect-error TS6133: The controller unsures that the render\n  // function is called on resize of the element\n  private _resizeController = new ResizeController(this, {});\n\n  private watchCircle(): SVGTemplateResult {\n    if (this.cutAngleStart === null || this.cutAngleEnd === null) {\n      return svg`\n        <defs>\n          <mask id=\"mask1\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\">\n            <rect x=\"-200\" y=\"-200\" width=\"400\" height=\"400\" fill=\"white\" />\n            <circle cx=\"0\" cy=\"0\" r=\"160\" fill=\"black\" />\n          </mask>\n        </defs>\n        ${\n          this.state === InstrumentState.off\n            ? null\n            : svg`\n        <circle\n          cx=\"0\"\n          cy=\"0\"\n          r=\"184\"\n          fill=\"var(--instrument-frame-primary-color)\"\n          mask=\"url(#mask1)\"\n        />`\n        }\n        ${circle('innerRing', {\n          radius: 320 / 2,\n          strokeWidth: 1,\n          strokeColor: 'var(--instrument-frame-tertiary-color)',\n          strokePosition: 'center',\n          fillColor: 'none',\n        })}\n        ${\n          this.state === InstrumentState.off\n            ? null\n            : circle('outerRing', {\n                radius: 368 / 2,\n                strokeWidth: 1,\n                strokeColor: 'var(--instrument-frame-tertiary-color)',\n                strokePosition: 'center',\n                fillColor: 'none',\n              })\n        }\n    `;\n    } else {\n      const R = 184;\n      const r = 160;\n      const svgPath = roundedArch({\n        startAngle: this.cutAngleStart,\n        endAngle: this.cutAngleEnd,\n        R,\n        r,\n        roundOutsideCut: this.roundOutsideCut,\n        roundInsideCut: this.roundInsideCut,\n      });\n      return svg`\n        <path d=${svgPath} fill=\"var(--instrument-frame-primary-color)\" \n        stroke=\"var(--instrument-frame-tertiary-color)\"\n          vector-effect=\"non-scaling-stroke\"/>\n      `;\n    }\n  }\n\n  override render() {\n    const width = (176 + this.padding) * 2;\n    const viewBox = `-${width / 2} -${width / 2} ${width} ${width}`;\n    const angleSetpoint = this.renderSetpoint();\n    const scale = this.clientWidth / width;\n    const tickmarks = this.tickmarks.map((t) =>\n      tickmark(t.angle, t.type, TickmarkStyle.hinted, scale, t.text)\n    );\n    const advices = this.advices\n      ? this.advices.map((a) => renderAdvice(a))\n      : nothing;\n    return html`\n      <svg\n        width=\"100%\"\n        height=\"100%\"\n        viewBox=${viewBox}\n        style=\"--scale: ${scale}\"\n      >\n        ${this.watchCircle()} ${tickmarks} ${advices} ${angleSetpoint}\n      </svg>\n    `;\n  }\n\n  private renderSetpoint(): SVGTemplateResult | typeof nothing {\n    let setPointColor = 'var(--instrument-enhanced-primary-color)';\n    if (this.atAngleSetpoint) {\n      setPointColor = 'var(--instrument-enhanced-secondary-color)';\n    }\n    if (this.state === InstrumentState.active) {\n      setPointColor = 'var(--instrument-regular-primary-color)';\n      if (this.atAngleSetpoint) {\n        setPointColor = 'var(--instrument-regular-secondary-color)';\n      }\n    } else if (this.state === InstrumentState.loading) {\n      setPointColor = 'var(--instrument-frame-tertiary-color)';\n    } else if (this.state === InstrumentState.off) {\n      setPointColor = 'var(--instrument-frame-tertiary-color)';\n    }\n\n    if (this.angleSetpoint === undefined) {\n      return nothing;\n    } else {\n      let path;\n      if (this.state === InstrumentState.inCommand) {\n        path =\n          'M23.5119 8C24.6981 6.35191 23.5696 4 21.5926 4L2.39959 4C0.422598 4 -0.705911 6.35191 0.480283 8L11.9961 24L23.5119 8Z';\n      } else {\n        path =\n          'M18.5836 8L5.4086 8L11.9961 17.1526L18.5836 8ZM23.5119 8C24.6981 6.35191 23.5696 4 21.5926 4L2.39959 4C0.422598 4 -0.705911 6.35191 0.480283 8L11.9961 24L23.5119 8Z';\n      }\n      return svg`\n        <defs>\n          <g id=\"setpoint\">\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" transform=\"translate(-24 12) rotate(-90)\" d=${path} vector-effect=\"non-scaling-stroke\"/>\n          </g>\n          <mask id=\"setpointMask\">\n            <rect x=\"-20\" y=\"-20\" width=\"50\" height=\"50\" fill=\"white\" />\n            <use href=\"#setpoint\" fill=\"black\" />\n          </mask>\n        </defs>\n        <g transform=\"rotate(${this.angleSetpoint + 90}) translate(-168 0) \">\n          <use href=\"#setpoint\" fill=${setPointColor} stroke-width=\"0\" />\n          \n          <use href=\"#setpoint\" vector-effect=\"non-scaling-stroke\" fill=\"none\" stroke=\"var(--border-silhouette-color)\" stroke-width=\"2\" stroke-linejoin=\"round\" mask=\"url(#setpointMask)\" />\n        </g>\n      `;\n    }\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-watch': ObcWatch;\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"watch.js","sources":["../../../src/navigation-instruments/watch/watch.ts"],"sourcesContent":["import {\n  LitElement,\n  SVGTemplateResult,\n  html,\n  nothing,\n  svg,\n  unsafeCSS,\n} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {circle} from '../../svghelpers';\nimport {roundedArch} from '../../svghelpers/roundedArch';\nimport {InstrumentState} from '../types';\nimport compentStyle from './watch.css?inline';\nimport {ResizeController} from '@lit-labs/observers/resize-controller.js';\nimport {AngleAdviceRaw, renderAdvice} from './advice';\nimport {Tickmark, TickmarkStyle, tickmark} from './tickmark';\nimport {renderLabels} from './label';\n\n@customElement('obc-watch')\nexport class ObcWatch extends LitElement {\n  @property({type: String}) state: InstrumentState = InstrumentState.inCommand;\n  @property({type: Number}) angleSetpoint: number | undefined;\n  @property({type: Boolean}) atAngleSetpoint: boolean = false;\n  @property({type: Number}) padding = 24;\n  @property({type: Number}) cutAngleStart: number | null = null;\n  @property({type: Number}) cutAngleEnd: number | null = null;\n  @property({type: Boolean}) roundOutsideCut = false;\n  @property({type: Boolean}) roundInsideCut = false;\n  @property({type: Array, attribute: false}) tickmarks: Tickmark[] = [];\n  @property({type: Array, attribute: false}) advices: AngleAdviceRaw[] = [];\n  @property({type: Boolean}) crosshairEnabled: boolean = false;\n  @property({type: Boolean}) labelFrameEnabled: boolean = false;\n\n  // @ts-expect-error TS6133: The controller unsures that the render\n  // function is called on resize of the element\n  private _resizeController = new ResizeController(this, {});\n\n  private watchCircle(): SVGTemplateResult {\n    if (this.cutAngleStart === null || this.cutAngleEnd === null) {\n      return svg`\n        <defs>\n          <mask id=\"mask1\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\">\n            <rect x=\"-200\" y=\"-200\" width=\"400\" height=\"400\" fill=\"white\" />\n            <circle cx=\"0\" cy=\"0\" r=\"160\" fill=\"black\" />\n          </mask>\n        </defs>\n        ${\n          this.state === InstrumentState.off\n            ? null\n            : svg`\n        <circle\n          cx=\"0\"\n          cy=\"0\"\n          r=\"184\"\n          fill=\"var(--instrument-frame-primary-color)\"\n          mask=\"url(#mask1)\"\n        />`\n        }\n        ${circle('innerRing', {\n          radius: 320 / 2,\n          strokeWidth: 1,\n          strokeColor: 'var(--instrument-frame-tertiary-color)',\n          strokePosition: 'center',\n          fillColor: 'none',\n        })}\n        ${\n          this.state === InstrumentState.off\n            ? null\n            : circle('outerRing', {\n                radius: 368 / 2,\n                strokeWidth: 1,\n                strokeColor: 'var(--instrument-frame-tertiary-color)',\n                strokePosition: 'center',\n                fillColor: 'none',\n              })\n        }\n    `;\n    } else {\n      const R = 184;\n      const r = 160;\n      const svgPath = roundedArch({\n        startAngle: this.cutAngleStart,\n        endAngle: this.cutAngleEnd,\n        R,\n        r,\n        roundOutsideCut: this.roundOutsideCut,\n        roundInsideCut: this.roundInsideCut,\n      });\n      return svg`\n        <path d=${svgPath} fill=\"var(--instrument-frame-primary-color)\" \n        stroke=\"var(--instrument-frame-tertiary-color)\"\n          vector-effect=\"non-scaling-stroke\"/>\n      `;\n    }\n  }\n\n  private renderCrosshair(radius: number): SVGTemplateResult {\n    return svg`\n      <line\n        x1=\"-${radius}\"\n        y1=\"0\"\n        x2=\"${radius}\"\n        y2=\"0\"\n        stroke=\"var(--instrument-frame-tertiary-color)\"\n        stroke-width=\"1\"\n        vector-effect=\"non-scaling-stroke\"\n      />\n      <line\n        x1=\"0\"\n        y1=\"-${radius}\"\n        x2=\"0\"\n        y2=\"${radius}\"\n        stroke=\"var(--instrument-frame-tertiary-color)\"\n        stroke-width=\"1\"\n        vector-effect=\"non-scaling-stroke\"\n      />\n    `;\n  }\n\n  override render() {\n    const width = (176 + this.padding) * 2;\n    const viewBox = `-${width / 2} -${width / 2} ${width} ${width}`;\n    const angleSetpoint = this.renderSetpoint();\n    const scale = this.clientWidth / width;\n    const tickmarks = this.tickmarks.map((t) =>\n      tickmark(t.angle, t.type, TickmarkStyle.hinted, scale, t.text)\n    );\n    const advices = this.advices\n      ? this.advices.map((a) => renderAdvice(a))\n      : nothing;\n    const labels = this.labelFrameEnabled ? renderLabels(scale) : nothing;\n\n    return html`\n      <svg\n        width=\"100%\"\n        height=\"100%\"\n        viewBox=${viewBox}\n        style=\"--scale: ${scale}\"\n      >\n        ${this.watchCircle()} ${tickmarks} ${advices} ${angleSetpoint} ${labels}\n        ${this.crosshairEnabled ? this.renderCrosshair(320 / 2) : nothing}\n      </svg>\n    `;\n  }\n\n  private renderSetpoint(): SVGTemplateResult | typeof nothing {\n    let setPointColor = 'var(--instrument-enhanced-primary-color)';\n    if (this.atAngleSetpoint) {\n      setPointColor = 'var(--instrument-enhanced-secondary-color)';\n    }\n    if (this.state === InstrumentState.active) {\n      setPointColor = 'var(--instrument-regular-primary-color)';\n      if (this.atAngleSetpoint) {\n        setPointColor = 'var(--instrument-regular-secondary-color)';\n      }\n    } else if (this.state === InstrumentState.loading) {\n      setPointColor = 'var(--instrument-frame-tertiary-color)';\n    } else if (this.state === InstrumentState.off) {\n      setPointColor = 'var(--instrument-frame-tertiary-color)';\n    }\n\n    if (this.angleSetpoint === undefined) {\n      return nothing;\n    } else {\n      let path;\n      if (this.state === InstrumentState.inCommand) {\n        path =\n          'M23.5119 8C24.6981 6.35191 23.5696 4 21.5926 4L2.39959 4C0.422598 4 -0.705911 6.35191 0.480283 8L11.9961 24L23.5119 8Z';\n      } else {\n        path =\n          'M18.5836 8L5.4086 8L11.9961 17.1526L18.5836 8ZM23.5119 8C24.6981 6.35191 23.5696 4 21.5926 4L2.39959 4C0.422598 4 -0.705911 6.35191 0.480283 8L11.9961 24L23.5119 8Z';\n      }\n      return svg`\n        <defs>\n          <g id=\"setpoint\">\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" transform=\"translate(-24 12) rotate(-90)\" d=${path} vector-effect=\"non-scaling-stroke\"/>\n          </g>\n          <mask id=\"setpointMask\">\n            <rect x=\"-20\" y=\"-20\" width=\"50\" height=\"50\" fill=\"white\" />\n            <use href=\"#setpoint\" fill=\"black\" />\n          </mask>\n        </defs>\n        <g transform=\"rotate(${this.angleSetpoint + 90}) translate(-168 0) \">\n          <use href=\"#setpoint\" fill=${setPointColor} stroke-width=\"0\" />\n          \n          <use href=\"#setpoint\" vector-effect=\"non-scaling-stroke\" fill=\"none\" stroke=\"var(--border-silhouette-color)\" stroke-width=\"2\" stroke-linejoin=\"round\" mask=\"url(#setpointMask)\" />\n        </g>\n      `;\n    }\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-watch': ObcWatch;\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/navigation-instruments/watch-flat/tickmark-flat.d.ts

@@ -0,0 +1,20 @@
+import { SVGTemplateResult } from 'lit';
+export interface Tickmark {
+    angle: number;
+    type: TickmarkType;
+    text?: string;
+}
+export declare enum TickmarkType {
+    main = "main",
+    primary = "primary",
+    secondary = "secondary",
+    tertiary = "tertiary"
+}
+export declare enum TickmarkStyle {
+    hinted = "hinted",
+    regular = "regular",
+    enhanced = "enhanced"
+}
+export declare function tickmarkColor(style: TickmarkStyle): string;
+export declare function tickmark(angle: number, tickmarkSize: TickmarkType, style: TickmarkStyle, text?: string): SVGTemplateResult | SVGTemplateResult[];
+//# sourceMappingURL=tickmark-flat.d.ts.map

package/dist/navigation-instruments/watch-flat/tickmark-flat.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tickmark-flat.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/watch-flat/tickmark-flat.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,iBAAiB,EAAM,MAAM,KAAK,CAAC;AAE3C,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,YAAY,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,oBAAY,YAAY;IACtB,IAAI,SAAS;IACb,OAAO,YAAY;IACnB,SAAS,cAAc;IACvB,QAAQ,aAAa;CACtB;AAED,oBAAY,aAAa;IACvB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,QAAQ,aAAa;CACtB;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,aAAa,GAAG,MAAM,CAQ1D;AAED,wBAAgB,QAAQ,CACtB,KAAK,EAAE,MAAM,EACb,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,aAAa,EACpB,IAAI,CAAC,EAAE,MAAM,GACZ,iBAAiB,GAAG,iBAAiB,EAAE,CAyBzC"}

package/dist/navigation-instruments/watch-flat/tickmark-flat.js

@@ -0,0 +1,53 @@
+import { svg } from "lit";
+var TickmarkType = /* @__PURE__ */ ((TickmarkType2) => {
+  TickmarkType2["main"] = "main";
+  TickmarkType2["primary"] = "primary";
+  TickmarkType2["secondary"] = "secondary";
+  TickmarkType2["tertiary"] = "tertiary";
+  return TickmarkType2;
+})(TickmarkType || {});
+var TickmarkStyle = /* @__PURE__ */ ((TickmarkStyle2) => {
+  TickmarkStyle2["hinted"] = "hinted";
+  TickmarkStyle2["regular"] = "regular";
+  TickmarkStyle2["enhanced"] = "enhanced";
+  return TickmarkStyle2;
+})(TickmarkStyle || {});
+function tickmarkColor(style) {
+  if (style === "hinted") {
+    return "var(--instrument-frame-tertiary-color)";
+  } else if (style === "regular") {
+    return "var(--instrument-tick-mark-secondary-color)";
+  } else {
+    return "var(--instrument-tick-mark-primary-color)";
+  }
+}
+function tickmark(angle, tickmarkSize, style, text) {
+  const textHeight = -32;
+  let lineStartY = -35;
+  let lineEndY = -34;
+  if (tickmarkSize === "secondary") {
+    lineStartY = -24;
+    lineEndY = lineStartY + 8;
+  } else if (tickmarkSize === "main") {
+    lineEndY = lineStartY + 20;
+  } else if (tickmarkSize === "tertiary") {
+    throw new Error("Tertiary tickmarks are not supported");
+  }
+  const colorName = tickmarkColor(style);
+  const tick = svg`<line x1=${angle} y1=${lineStartY} x2=${angle} y2=${lineEndY} stroke=${colorName} stroke-width="1" vector-effect="non-scaling-stroke"/>`;
+  if (text) {
+    const textY = lineEndY + textHeight;
+    return [
+      tick,
+      svg`<text x=${angle} y=${textY} class="label" text-anchor="middle">${text}</text>`
+    ];
+  }
+  return tick;
+}
+export {
+  TickmarkStyle,
+  TickmarkType,
+  tickmark,
+  tickmarkColor
+};
+//# sourceMappingURL=tickmark-flat.js.map

package/dist/navigation-instruments/watch-flat/tickmark-flat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tickmark-flat.js","sources":["../../../src/navigation-instruments/watch-flat/tickmark-flat.ts"],"sourcesContent":["import {SVGTemplateResult, svg} from 'lit';\n\nexport interface Tickmark {\n  angle: number;\n  type: TickmarkType;\n  text?: string;\n}\n\nexport enum TickmarkType {\n  main = 'main',\n  primary = 'primary',\n  secondary = 'secondary',\n  tertiary = 'tertiary',\n}\n\nexport enum TickmarkStyle {\n  hinted = 'hinted',\n  regular = 'regular',\n  enhanced = 'enhanced',\n}\n\nexport function tickmarkColor(style: TickmarkStyle): string {\n  if (style === TickmarkStyle.hinted) {\n    return 'var(--instrument-frame-tertiary-color)';\n  } else if (style === TickmarkStyle.regular) {\n    return 'var(--instrument-tick-mark-secondary-color)';\n  } else {\n    return 'var(--instrument-tick-mark-primary-color)';\n  }\n}\n\nexport function tickmark(\n  angle: number,\n  tickmarkSize: TickmarkType,\n  style: TickmarkStyle,\n  text?: string\n): SVGTemplateResult | SVGTemplateResult[] {\n  const textHeight = -32;\n  let lineStartY: number = -35;\n  let lineEndY: number = -34;\n\n  if (tickmarkSize === TickmarkType.secondary) {\n    lineStartY = -24;\n    lineEndY = lineStartY + 8;\n  } else if (tickmarkSize === TickmarkType.main) {\n    lineEndY = lineStartY + 20;\n  } else if (tickmarkSize === TickmarkType.tertiary) {\n    throw new Error('Tertiary tickmarks are not supported');\n  }\n\n  const colorName = tickmarkColor(style);\n  const tick = svg`<line x1=${angle} y1=${lineStartY} x2=${angle} y2=${lineEndY} stroke=${colorName} stroke-width=\"1\" vector-effect=\"non-scaling-stroke\"/>`;\n  if (text) {\n    const textY = lineEndY + textHeight;\n    return [\n      tick,\n      svg`<text x=${angle} y=${textY} class=\"label\" text-anchor=\"middle\">${text}</text>`,\n    ];\n  }\n\n  return tick;\n}\n"],"names":["TickmarkType","TickmarkStyle"],"mappings":";AAQY,IAAA,iCAAAA,kBAAL;AACLA,gBAAA,MAAO,IAAA;AACPA,gBAAA,SAAU,IAAA;AACVA,gBAAA,WAAY,IAAA;AACZA,gBAAA,UAAW,IAAA;AAJDA,SAAAA;AAAA,GAAA,gBAAA,CAAA,CAAA;AAOA,IAAA,kCAAAC,mBAAL;AACLA,iBAAA,QAAS,IAAA;AACTA,iBAAA,SAAU,IAAA;AACVA,iBAAA,UAAW,IAAA;AAHDA,SAAAA;AAAA,GAAA,iBAAA,CAAA,CAAA;AAML,SAAS,cAAc,OAA8B;AAC1D,MAAI,UAAU,UAAsB;AAC3B,WAAA;AAAA,EAAA,WACE,UAAU,WAAuB;AACnC,WAAA;AAAA,EAAA,OACF;AACE,WAAA;AAAA,EACT;AACF;AAEO,SAAS,SACd,OACA,cACA,OACA,MACyC;AACzC,QAAM,aAAa;AACnB,MAAI,aAAqB;AACzB,MAAI,WAAmB;AAEvB,MAAI,iBAAiB,aAAwB;AAC9B,iBAAA;AACb,eAAW,aAAa;AAAA,EAAA,WACf,iBAAiB,QAAmB;AAC7C,eAAW,aAAa;AAAA,EAAA,WACf,iBAAiB,YAAuB;AAC3C,UAAA,IAAI,MAAM,sCAAsC;AAAA,EACxD;AAEM,QAAA,YAAY,cAAc,KAAK;AAC/B,QAAA,OAAO,eAAe,KAAK,OAAO,UAAU,OAAO,KAAK,OAAO,QAAQ,WAAW,SAAS;AACjG,MAAI,MAAM;AACR,UAAM,QAAQ,WAAW;AAClB,WAAA;AAAA,MACL;AAAA,MACA,cAAc,KAAK,MAAM,KAAK,uCAAuC,IAAI;AAAA,IAAA;AAAA,EAE7E;AAEO,SAAA;AACT;"}

package/dist/navigation-instruments/watch-flat/watch-flat.css.js

@@ -0,0 +1,32 @@
+import { css } from "lit";
+const compentStyle = css`* {
+  box-sizing: border-box;
+}
+
+.label {
+  /* UI/Body */
+  font-family: 'Noto Sans';
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 370;
+  line-height: 24px;
+  /* 150% */
+  text-decoration: none;
+  font-size: calc(16px / var(--scale));
+  fill: var(--element-neutral-color);
+  alignment-baseline: middle;
+  text-anchor: middle;
+}
+
+.label.left {
+  text-anchor: start;
+}
+
+.label.right {
+  text-anchor: end;
+}
+`;
+export {
+  compentStyle as default
+};
+//# sourceMappingURL=watch-flat.css.js.map

package/dist/navigation-instruments/watch-flat/watch-flat.css.js.map

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

package/dist/navigation-instruments/watch-flat/watch-flat.d.ts

@@ -0,0 +1,29 @@
+import { LitElement, SVGTemplateResult } from 'lit';
+import { Tickmark } from './tickmark-flat';
+import { Label } from '../compass-flat/compass-flat';
+export declare class ObcWatchFlat extends LitElement {
+    width: number;
+    height: number;
+    padding: number;
+    rotation: number;
+    tickmarkSpacing: number;
+    angleSetpoint: number | undefined;
+    tickmarks: Tickmark[];
+    labels: Label[];
+    FOVIndicator: SVGTemplateResult[];
+    trackHeight: number;
+    ticksHeight: number;
+    borderRadius: number;
+    private renderClipPath;
+    private renderLabelMask;
+    private renderLabels;
+    private watchFace;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'obc-watch-flat': ObcWatchFlat;
+    }
+}
+//# sourceMappingURL=watch-flat.d.ts.map

package/dist/navigation-instruments/watch-flat/watch-flat.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"watch-flat.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/watch-flat/watch-flat.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,iBAAiB,EAAuB,MAAM,KAAK,CAAC;AAGxE,OAAO,EAAC,QAAQ,EAA0B,MAAM,iBAAiB,CAAC;AAElE,OAAO,EAAC,KAAK,EAAC,MAAM,8BAA8B,CAAC;AAEnD,qBACa,YAAa,SAAQ,UAAU;IAChB,KAAK,SAAO;IACZ,MAAM,SAAM;IACZ,OAAO,SAAK;IACZ,QAAQ,SAAK;IACb,eAAe,SAAK;IACpB,aAAa,EAAE,MAAM,GAAG,SAAS,CAAC;IACjB,SAAS,EAAE,QAAQ,EAAE,CAAM;IAC3B,MAAM,EAAE,KAAK,EAAE,CAAM;IACrB,YAAY,EAAE,iBAAiB,EAAE,CACvE;IACqB,WAAW,SAAyB;IACpC,WAAW,SAAkC;IAC7C,YAAY,SAAK;IAE3C,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,eAAe;IAqBvB,OAAO,CAAC,YAAY;IAgBpB,OAAO,CAAC,SAAS;IAwCR,MAAM;IA8Bf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}