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

package/dist/navigation-instruments/compass/arrow.d.ts

@@ -0,0 +1,7 @@
+import { SVGTemplateResult } from 'lit';
+export declare enum ArrowStyle {
+    HDG = "HDG",
+    COG = "COG"
+}
+export declare function arrow(style: ArrowStyle, angle: number): SVGTemplateResult | SVGTemplateResult[];
+//# sourceMappingURL=arrow.d.ts.map

package/dist/navigation-instruments/compass/arrow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"arrow.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/compass/arrow.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,iBAAiB,EAAM,MAAM,KAAK,CAAC;AAE3C,oBAAY,UAAU;IACpB,GAAG,QAAQ;IACX,GAAG,QAAQ;CACZ;AAED,wBAAgB,KAAK,CACnB,KAAK,EAAE,UAAU,EACjB,KAAK,EAAE,MAAM,GACZ,iBAAiB,GAAG,iBAAiB,EAAE,CAkDzC"}

package/dist/navigation-instruments/compass/arrow.js

@@ -0,0 +1,59 @@
+import { svg } from "lit";
+var ArrowStyle = /* @__PURE__ */ ((ArrowStyle2) => {
+  ArrowStyle2["HDG"] = "HDG";
+  ArrowStyle2["COG"] = "COG";
+  return ArrowStyle2;
+})(ArrowStyle || {});
+function arrow(style, angle) {
+  const colorName = "var(--instrument-enhanced-secondary-color)";
+  if (style === "HDG") {
+    return svg`
+      <g transform="translate(-32, -${256}) rotate(${angle}, 32, 256)">
+        <rect x="28" y="118" width="8" height="139" rx="4" fill="${colorName}" />
+        <rect x="30.0039" y="256" width="4" height="156" rx="2" fill="${colorName}" />
+        <circle cx="32" cy="256" r="8" fill="${colorName}" />
+        <mask
+          id="mask0_262_65165"
+          style="mask-type:luminance"
+          maskUnits="userSpaceOnUse"
+          x="8"
+          y="94"
+          width="48"
+          height="50"
+        >
+          <path
+            d="M13.2833 140.564L32 96L50.7167 140.564C51.4569 142.326 49.54 144.023 47.8805 143.075L32 136L16.1195 143.075C14.46 144.023 12.5432 142.326 13.2833 140.564Z"
+            fill="white"
+            stroke="black"
+          />
+        </mask>
+        <g mask="url(#mask0_262_65165)">
+          <path
+            d="M13.2833 140.564L32 96L50.7167 140.564C51.4569 142.326 49.54 144.023 47.8805 143.075L32 136L16.1195 143.075C14.46 144.023 12.5432 142.326 13.2833 140.564Z"
+            fill="${colorName}"
+          />
+        </g>
+      </g>
+    `;
+  } else if (style === "COG") {
+    return svg`
+      <g transform="translate(-32, -${256}) rotate(${angle}, 32, 256)">
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M13.2833 140.564C12.5431 142.326 14.46 144.023 16.1195 143.075L32 136L47.8805 143.075C49.54 144.023 51.4568 142.326 50.7167 140.564L32 96L13.2833 140.564ZM32 106.33L19.2545 136.676L32 131.393L44.7455 136.676L32 106.33ZM49.865 139.602L49.8625 139.6L49.865 139.602Z"
+          fill="${colorName}"
+        />
+        <rect x="30" y="133" width="4" height="124" rx="2" fill="${colorName}" />
+        <circle cx="32" cy="256" r="4" fill="${colorName}" />
+      </g>
+    `;
+  } else {
+    return [];
+  }
+}
+export {
+  ArrowStyle,
+  arrow
+};
+//# sourceMappingURL=arrow.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"arrow.js","sources":["../../../src/navigation-instruments/compass/arrow.ts"],"sourcesContent":["import {SVGTemplateResult, svg} from 'lit';\n\nexport enum ArrowStyle {\n  HDG = 'HDG',\n  COG = 'COG',\n}\n\nexport function arrow(\n  style: ArrowStyle,\n  angle: number\n): SVGTemplateResult | SVGTemplateResult[] {\n  const colorName = 'var(--instrument-enhanced-secondary-color)';\n\n  if (style === ArrowStyle.HDG) {\n    return svg`\n      <g transform=\"translate(-32, -${256}) rotate(${angle}, 32, 256)\">\n        <rect x=\"28\" y=\"118\" width=\"8\" height=\"139\" rx=\"4\" fill=\"${colorName}\" />\n        <rect x=\"30.0039\" y=\"256\" width=\"4\" height=\"156\" rx=\"2\" fill=\"${colorName}\" />\n        <circle cx=\"32\" cy=\"256\" r=\"8\" fill=\"${colorName}\" />\n        <mask\n          id=\"mask0_262_65165\"\n          style=\"mask-type:luminance\"\n          maskUnits=\"userSpaceOnUse\"\n          x=\"8\"\n          y=\"94\"\n          width=\"48\"\n          height=\"50\"\n        >\n          <path\n            d=\"M13.2833 140.564L32 96L50.7167 140.564C51.4569 142.326 49.54 144.023 47.8805 143.075L32 136L16.1195 143.075C14.46 144.023 12.5432 142.326 13.2833 140.564Z\"\n            fill=\"white\"\n            stroke=\"black\"\n          />\n        </mask>\n        <g mask=\"url(#mask0_262_65165)\">\n          <path\n            d=\"M13.2833 140.564L32 96L50.7167 140.564C51.4569 142.326 49.54 144.023 47.8805 143.075L32 136L16.1195 143.075C14.46 144.023 12.5432 142.326 13.2833 140.564Z\"\n            fill=\"${colorName}\"\n          />\n        </g>\n      </g>\n    `;\n  } else if (style === ArrowStyle.COG) {\n    return svg`\n      <g transform=\"translate(-32, -${256}) rotate(${angle}, 32, 256)\">\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M13.2833 140.564C12.5431 142.326 14.46 144.023 16.1195 143.075L32 136L47.8805 143.075C49.54 144.023 51.4568 142.326 50.7167 140.564L32 96L13.2833 140.564ZM32 106.33L19.2545 136.676L32 131.393L44.7455 136.676L32 106.33ZM49.865 139.602L49.8625 139.6L49.865 139.602Z\"\n          fill=\"${colorName}\"\n        />\n        <rect x=\"30\" y=\"133\" width=\"4\" height=\"124\" rx=\"2\" fill=\"${colorName}\" />\n        <circle cx=\"32\" cy=\"256\" r=\"4\" fill=\"${colorName}\" />\n      </g>\n    `;\n  } else {\n    return [];\n  }\n\n  // return [...shaft, circle, arrowTip];\n}\n"],"names":["ArrowStyle"],"mappings":";AAEY,IAAA,+BAAAA,gBAAL;AACLA,cAAA,KAAM,IAAA;AACNA,cAAA,KAAM,IAAA;AAFIA,SAAAA;AAAA,GAAA,cAAA,CAAA,CAAA;AAKI,SAAA,MACd,OACA,OACyC;AACzC,QAAM,YAAY;AAElB,MAAI,UAAU,OAAgB;AACrB,WAAA;AAAA,sCAC2B,GAAG,YAAY,KAAK;AAAA,mEACS,SAAS;AAAA,wEACJ,SAAS;AAAA,+CAClC,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAmBpC,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA,WAKhB,UAAU,OAAgB;AAC5B,WAAA;AAAA,sCAC2B,GAAG,YAAY,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKxC,SAAS;AAAA;AAAA,mEAEwC,SAAS;AAAA,+CAC7B,SAAS;AAAA;AAAA;AAAA,EAAA,OAG/C;AACL,WAAO;EACT;AAGF;"}

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

@@ -0,0 +1,23 @@
+import { LitElement } from 'lit';
+import '../watch/watch';
+import { AngleAdvice } from '../watch/advice';
+export declare class ObcCompass extends LitElement {
+    heading: number;
+    courseOverGround: number;
+    padding: number;
+    headingAdvices: AngleAdvice[];
+    containerWidth: number;
+    private resizeObserver;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private adjustPadding;
+    private get angleAdviceRaw();
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'obc-compass': ObcCompass;
+    }
+}
+//# sourceMappingURL=compass.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"compass.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/compass/compass.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAE1C,OAAO,gBAAgB,CAAC;AAGxB,OAAO,EAGL,WAAW,EAEZ,MAAM,iBAAiB,CAAC;AAGzB,qBACa,UAAW,SAAQ,UAAU;IACd,OAAO,SAAK;IACZ,gBAAgB,SAAK;IACrB,OAAO,SAAM;IACI,cAAc,EAAE,WAAW,EAAE,CAAM;IACpD,cAAc,SAAK;IAE7C,OAAO,CAAC,cAAc,CAKnB;IAEM,iBAAiB;IAKjB,oBAAoB;IAK7B,OAAO,CAAC,aAAa;IAarB,OAAO,KAAK,cAAc,GAUzB;IAEQ,MAAM;IAqCf,OAAgB,MAAM,0BAwBpB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

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

@@ -0,0 +1,139 @@
+import { css, LitElement, html } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import "../watch/watch.js";
+import { TickmarkType } from "../watch/tickmark.js";
+import { arrow, ArrowStyle } from "./arrow.js";
+import { AdviceState, AdviceType } from "../watch/advice.js";
+import { radialTickmarks } from "./radial-tickmark.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+let ObcCompass = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.heading = 0;
+    this.courseOverGround = 0;
+    this.padding = 48;
+    this.headingAdvices = [];
+    this.containerWidth = 0;
+    this.resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        this.containerWidth = entry.contentRect.width;
+        this.adjustPadding();
+      }
+    });
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.resizeObserver.observe(this);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.resizeObserver.unobserve(this);
+  }
+  adjustPadding() {
+    const deltaWidth = 512 - this.containerWidth;
+    const steps = deltaWidth / 128;
+    let deltaPadding = 0;
+    if (deltaWidth > 0) {
+      deltaPadding = steps * 48;
+    } else {
+      deltaPadding = steps * 6;
+    }
+    this.padding = 72 + deltaPadding;
+  }
+  get angleAdviceRaw() {
+    return this.headingAdvices.map(({ minAngle, maxAngle, hinted, type }) => {
+      const state = this.heading >= minAngle && this.heading <= maxAngle ? AdviceState.triggered : hinted ? AdviceState.hinted : AdviceState.regular;
+      return { minAngle, maxAngle, type, state };
+    });
+  }
+  render() {
+    const tickmarks = [
+      { angle: 0, type: TickmarkType.main },
+      { angle: 90, type: TickmarkType.main },
+      { angle: 180, type: TickmarkType.main },
+      { angle: 270, type: TickmarkType.main }
+    ];
+    const rt = this.headingAdvices.map(
+      ({ minAngle, maxAngle, type }) => radialTickmarks(
+        minAngle,
+        maxAngle,
+        type === AdviceType.caution ? TickmarkType.secondary : void 0
+      )
+    );
+    const width = (176 + this.padding) * 2;
+    const viewBox = `-${width / 2} -${width / 2} ${width} ${width}`;
+    return html`
+      <div class="container">
+        <obc-watch
+          .padding=${this.padding}
+          .advices=${this.angleAdviceRaw}
+          .tickmarks=${tickmarks}
+          .labelFrameEnabled=${true}
+          .crosshairEnabled=${true}
+        >
+        </obc-watch>
+        <svg viewBox="${viewBox}">
+          ${rt} ${arrow(ArrowStyle.HDG, this.heading)}
+          ${arrow(ArrowStyle.COG, this.courseOverGround)}
+        </svg>
+      </div>
+    `;
+  }
+};
+ObcCompass.styles = css`
+    * {
+      box-sizing: border-box;
+    }
+
+    .container {
+      position: relative;
+      width: 100%;
+      height: 100%;
+    }
+
+    .container > * {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+
+    :host {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+  `;
+__decorateClass([
+  property({ type: Number })
+], ObcCompass.prototype, "heading", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcCompass.prototype, "courseOverGround", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcCompass.prototype, "padding", 2);
+__decorateClass([
+  property({ type: Array, attribute: false })
+], ObcCompass.prototype, "headingAdvices", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcCompass.prototype, "containerWidth", 2);
+ObcCompass = __decorateClass([
+  customElement("obc-compass")
+], ObcCompass);
+export {
+  ObcCompass
+};
+//# sourceMappingURL=compass.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"compass.js","sources":["../../../src/navigation-instruments/compass/compass.ts"],"sourcesContent":["import {LitElement, css, html} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport '../watch/watch';\nimport {Tickmark, TickmarkType} from '../watch/tickmark';\nimport {arrow, ArrowStyle} from './arrow';\nimport {\n  AdviceState,\n  AdviceType,\n  AngleAdvice,\n  AngleAdviceRaw,\n} from '../watch/advice';\nimport {radialTickmarks} from './radial-tickmark';\n\n@customElement('obc-compass')\nexport class ObcCompass extends LitElement {\n  @property({type: Number}) heading = 0;\n  @property({type: Number}) courseOverGround = 0;\n  @property({type: Number}) padding = 48;\n  @property({type: Array, attribute: false}) headingAdvices: AngleAdvice[] = [];\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.adjustPadding();\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 adjustPadding() {\n    const deltaWidth = 512 - this.containerWidth;\n    const steps = deltaWidth / 128;\n    let deltaPadding = 0;\n    if (deltaWidth > 0) {\n      deltaPadding = steps * 48;\n    } else {\n      deltaPadding = steps * 6;\n    }\n\n    this.padding = 72 + deltaPadding;\n  }\n\n  private get angleAdviceRaw(): AngleAdviceRaw[] {\n    return this.headingAdvices.map(({minAngle, maxAngle, hinted, type}) => {\n      const state =\n        this.heading >= minAngle && this.heading <= maxAngle\n          ? AdviceState.triggered\n          : hinted\n            ? AdviceState.hinted\n            : AdviceState.regular;\n      return {minAngle, maxAngle, type, state};\n    });\n  }\n\n  override render() {\n    const tickmarks: Tickmark[] = [\n      {angle: 0, type: TickmarkType.main},\n      {angle: 90, type: TickmarkType.main},\n      {angle: 180, type: TickmarkType.main},\n      {angle: 270, type: TickmarkType.main},\n    ];\n\n    const rt = this.headingAdvices.map(({minAngle, maxAngle, type}) =>\n      radialTickmarks(\n        minAngle,\n        maxAngle,\n        type === AdviceType.caution ? TickmarkType.secondary : undefined\n      )\n    );\n\n    const width = (176 + this.padding) * 2;\n    const viewBox = `-${width / 2} -${width / 2} ${width} ${width}`;\n\n    return html`\n      <div class=\"container\">\n        <obc-watch\n          .padding=${this.padding}\n          .advices=${this.angleAdviceRaw}\n          .tickmarks=${tickmarks}\n          .labelFrameEnabled=${true}\n          .crosshairEnabled=${true}\n        >\n        </obc-watch>\n        <svg viewBox=\"${viewBox}\">\n          ${rt} ${arrow(ArrowStyle.HDG, this.heading)}\n          ${arrow(ArrowStyle.COG, this.courseOverGround)}\n        </svg>\n      </div>\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    :host {\n      display: block;\n      width: 100%;\n      height: 100%;\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-compass': ObcCompass;\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/navigation-instruments/compass/radial-tickmark.d.ts

@@ -0,0 +1,4 @@
+import { SVGTemplateResult } from 'lit';
+import { TickmarkType } from '../watch/tickmark';
+export declare function radialTickmarks(minAngle: number, maxAngle: number, type: TickmarkType | undefined): SVGTemplateResult[];
+//# sourceMappingURL=radial-tickmark.d.ts.map

package/dist/navigation-instruments/compass/radial-tickmark.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radial-tickmark.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/compass/radial-tickmark.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,iBAAiB,EAAM,MAAM,KAAK,CAAC;AAC3C,OAAO,EAAC,YAAY,EAA+B,MAAM,mBAAmB,CAAC;AAE7E,wBAAgB,eAAe,CAC7B,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,MAAM,EAChB,IAAI,EAAE,YAAY,GAAG,SAAS,GAC7B,iBAAiB,EAAE,CAqErB"}

package/dist/navigation-instruments/compass/radial-tickmark.js

@@ -0,0 +1,69 @@
+import { svg } from "lit";
+import { TickmarkType, tickmarkColor, TickmarkStyle } from "../watch/tickmark.js";
+function radialTickmarks(minAngle, maxAngle, type) {
+  if (type === TickmarkType.main || type === TickmarkType.tertiary) {
+    throw new Error(
+      "Only secondary tickmarks or undefined tickmarks (dots) are supported"
+    );
+  }
+  const origin = { x: 0, y: 0 };
+  const radius = 320 / 2;
+  const strokeWidth = "1.2";
+  const margin = 1.5;
+  const colorName = tickmarkColor(TickmarkStyle.hinted);
+  const tickWidth = type === TickmarkType.secondary ? 4 : 1;
+  const tickmarks = [];
+  const sinMin = Math.sin(minAngle * Math.PI / 180);
+  const cosMin = Math.cos(minAngle * Math.PI / 180);
+  const sinMax = Math.sin(maxAngle * Math.PI / 180);
+  const cosMax = Math.cos(maxAngle * Math.PI / 180);
+  const deltaIncrement = tickWidth * margin;
+  for (let deltaR = 0; deltaR <= radius; deltaR += deltaIncrement) {
+    const xMin = origin.x + sinMin * deltaR;
+    const yMin = origin.y - cosMin * deltaR;
+    const xMax = origin.x + sinMax * deltaR;
+    const yMax = origin.y - cosMax * deltaR;
+    if (type === void 0) {
+      const size = 1;
+      tickmarks.push(
+        svg`<rect 
+          x=${xMin - size / 2} 
+          y=${yMin - size / 2} 
+          width=${size} 
+          height=${size} 
+          fill=${colorName} 
+          transform="rotate(${minAngle} ${xMin} ${yMin})" 
+          vector-effect="non-scaling-stroke"/>`
+      );
+      tickmarks.push(
+        svg`<rect 
+          x=${xMax - size / 2} 
+          y=${yMax - size / 2} 
+          width=${size} 
+          height=${size} 
+          fill=${colorName} 
+          transform="rotate(${maxAngle} ${xMax} ${yMax})" 
+          vector-effect="non-scaling-stroke"/>`
+      );
+    } else {
+      const currentRadius = Math.min(deltaR + tickWidth, radius);
+      const x2Min = origin.x + sinMin * currentRadius;
+      const y2Min = origin.y - cosMin * currentRadius;
+      const x2Max = origin.x + sinMax * currentRadius;
+      const y2Max = origin.y - cosMax * currentRadius;
+      tickmarks.push(
+        svg`<line x1=${xMin} y1=${yMin} x2=${x2Min} y2=${y2Min} stroke=${colorName} stroke-width=${strokeWidth} vector-effect="non-scaling-stroke"/>`
+      );
+      tickmarks.push(
+        svg`<line x1=${xMax} y1=${yMax} x2=${x2Max} y2=${y2Max} stroke=${colorName} stroke-width=${strokeWidth} vector-effect="non-scaling-stroke"/>`
+      );
+      if (currentRadius >= radius)
+        break;
+    }
+  }
+  return tickmarks;
+}
+export {
+  radialTickmarks
+};
+//# sourceMappingURL=radial-tickmark.js.map

package/dist/navigation-instruments/compass/radial-tickmark.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radial-tickmark.js","sources":["../../../src/navigation-instruments/compass/radial-tickmark.ts"],"sourcesContent":["import {SVGTemplateResult, svg} from 'lit';\nimport {TickmarkType, TickmarkStyle, tickmarkColor} from '../watch/tickmark';\n\nexport function radialTickmarks(\n  minAngle: number,\n  maxAngle: number,\n  type: TickmarkType | undefined\n): SVGTemplateResult[] {\n  if (type === TickmarkType.main || type === TickmarkType.tertiary) {\n    throw new Error(\n      'Only secondary tickmarks or undefined tickmarks (dots) are supported'\n    );\n  }\n\n  const origin = {x: 0, y: 0};\n  const radius = 320 / 2;\n  const strokeWidth = '1.2';\n  const margin = 1.5;\n  const colorName = tickmarkColor(TickmarkStyle.hinted);\n  const tickWidth = type === TickmarkType.secondary ? 4 : 1;\n  const tickmarks: SVGTemplateResult[] = [];\n\n  const sinMin = Math.sin((minAngle * Math.PI) / 180);\n  const cosMin = Math.cos((minAngle * Math.PI) / 180);\n  const sinMax = Math.sin((maxAngle * Math.PI) / 180);\n  const cosMax = Math.cos((maxAngle * Math.PI) / 180);\n\n  const deltaIncrement = tickWidth * margin;\n\n  for (let deltaR = 0; deltaR <= radius; deltaR += deltaIncrement) {\n    const xMin = origin.x + sinMin * deltaR;\n    const yMin = origin.y - cosMin * deltaR;\n    const xMax = origin.x + sinMax * deltaR;\n    const yMax = origin.y - cosMax * deltaR;\n\n    if (type === undefined) {\n      const size = 1;\n      tickmarks.push(\n        svg`<rect \n          x=${xMin - size / 2} \n          y=${yMin - size / 2} \n          width=${size} \n          height=${size} \n          fill=${colorName} \n          transform=\"rotate(${minAngle} ${xMin} ${yMin})\" \n          vector-effect=\"non-scaling-stroke\"/>`\n      );\n      tickmarks.push(\n        svg`<rect \n          x=${xMax - size / 2} \n          y=${yMax - size / 2} \n          width=${size} \n          height=${size} \n          fill=${colorName} \n          transform=\"rotate(${maxAngle} ${xMax} ${yMax})\" \n          vector-effect=\"non-scaling-stroke\"/>`\n      );\n    } else {\n      const currentRadius = Math.min(deltaR + tickWidth, radius);\n      const x2Min = origin.x + sinMin * currentRadius;\n      const y2Min = origin.y - cosMin * currentRadius;\n      const x2Max = origin.x + sinMax * currentRadius;\n      const y2Max = origin.y - cosMax * currentRadius;\n\n      tickmarks.push(\n        svg`<line x1=${xMin} y1=${yMin} x2=${x2Min} y2=${y2Min} stroke=${colorName} stroke-width=${strokeWidth} vector-effect=\"non-scaling-stroke\"/>`\n      );\n      tickmarks.push(\n        svg`<line x1=${xMax} y1=${yMax} x2=${x2Max} y2=${y2Max} stroke=${colorName} stroke-width=${strokeWidth} vector-effect=\"non-scaling-stroke\"/>`\n      );\n\n      if (currentRadius >= radius) break;\n    }\n  }\n\n  return tickmarks;\n}\n"],"names":[],"mappings":";;AAGgB,SAAA,gBACd,UACA,UACA,MACqB;AACrB,MAAI,SAAS,aAAa,QAAQ,SAAS,aAAa,UAAU;AAChE,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAAA,EAEJ;AAEA,QAAM,SAAS,EAAC,GAAG,GAAG,GAAG,EAAC;AAC1B,QAAM,SAAS,MAAM;AACrB,QAAM,cAAc;AACpB,QAAM,SAAS;AACT,QAAA,YAAY,cAAc,cAAc,MAAM;AACpD,QAAM,YAAY,SAAS,aAAa,YAAY,IAAI;AACxD,QAAM,YAAiC,CAAA;AAEvC,QAAM,SAAS,KAAK,IAAK,WAAW,KAAK,KAAM,GAAG;AAClD,QAAM,SAAS,KAAK,IAAK,WAAW,KAAK,KAAM,GAAG;AAClD,QAAM,SAAS,KAAK,IAAK,WAAW,KAAK,KAAM,GAAG;AAClD,QAAM,SAAS,KAAK,IAAK,WAAW,KAAK,KAAM,GAAG;AAElD,QAAM,iBAAiB,YAAY;AAEnC,WAAS,SAAS,GAAG,UAAU,QAAQ,UAAU,gBAAgB;AACzD,UAAA,OAAO,OAAO,IAAI,SAAS;AAC3B,UAAA,OAAO,OAAO,IAAI,SAAS;AAC3B,UAAA,OAAO,OAAO,IAAI,SAAS;AAC3B,UAAA,OAAO,OAAO,IAAI,SAAS;AAEjC,QAAI,SAAS,QAAW;AACtB,YAAM,OAAO;AACH,gBAAA;AAAA,QACR;AAAA,cACM,OAAO,OAAO,CAAC;AAAA,cACf,OAAO,OAAO,CAAC;AAAA,kBACX,IAAI;AAAA,mBACH,IAAI;AAAA,iBACN,SAAS;AAAA,8BACI,QAAQ,IAAI,IAAI,IAAI,IAAI;AAAA;AAAA,MAAA;AAGtC,gBAAA;AAAA,QACR;AAAA,cACM,OAAO,OAAO,CAAC;AAAA,cACf,OAAO,OAAO,CAAC;AAAA,kBACX,IAAI;AAAA,mBACH,IAAI;AAAA,iBACN,SAAS;AAAA,8BACI,QAAQ,IAAI,IAAI,IAAI,IAAI;AAAA;AAAA,MAAA;AAAA,IAEhD,OACK;AACL,YAAM,gBAAgB,KAAK,IAAI,SAAS,WAAW,MAAM;AACnD,YAAA,QAAQ,OAAO,IAAI,SAAS;AAC5B,YAAA,QAAQ,OAAO,IAAI,SAAS;AAC5B,YAAA,QAAQ,OAAO,IAAI,SAAS;AAC5B,YAAA,QAAQ,OAAO,IAAI,SAAS;AAExB,gBAAA;AAAA,QACR,eAAe,IAAI,OAAO,IAAI,OAAO,KAAK,OAAO,KAAK,WAAW,SAAS,iBAAiB,WAAW;AAAA,MAAA;AAE9F,gBAAA;AAAA,QACR,eAAe,IAAI,OAAO,IAAI,OAAO,KAAK,OAAO,KAAK,WAAW,SAAS,iBAAiB,WAAW;AAAA,MAAA;AAGxG,UAAI,iBAAiB;AAAQ;AAAA,IAC/B;AAAA,EACF;AAEO,SAAA;AACT;"}

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

@@ -0,0 +1,29 @@
+import { css } from "lit";
+const componentStyle = css`* {
+  box-sizing: border-box;
+}
+
+.container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.container > * {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+:host {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+`;
+export {
+  componentStyle as default
+};
+//# sourceMappingURL=compass-flat.css.js.map

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

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

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

@@ -0,0 +1,45 @@
+import { LitElement } from 'lit';
+import '../watch-flat/watch-flat';
+export declare enum LabelPosition {
+    top = -45,
+    bottom = 50
+}
+export declare enum LabelStyle {
+    regular = "var(--instrument-tick-mark-secondary-color)"
+}
+export interface Label {
+    x: number;
+    y: LabelPosition;
+    text: string;
+}
+export declare class ObcCompassFlat extends LitElement {
+    noPadding: boolean;
+    FOVIndicator: boolean;
+    padding: number;
+    heading: number;
+    courseOverGround: number;
+    tickInterval: number;
+    FOV: number;
+    minFOV: number;
+    maxFOV: number;
+    labels: Label[];
+    containerWidth: number;
+    private resizeObserver;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private updateLabels;
+    private generateIntervalTickmarks;
+    private generateCardinalTickmarks;
+    private generateTickmarks;
+    private renderFOVIndicator;
+    private get HDGSvg();
+    private COGSvg;
+    render(): import("lit-html").TemplateResult<2>;
+    static styles: import("lit").CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'obc-compass-flat': ObcCompassFlat;
+    }
+}
+//# sourceMappingURL=compass-flat.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"compass-flat.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/compass-flat/compass-flat.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAoC,MAAM,KAAK,CAAC;AAIlE,OAAO,0BAA0B,CAAC;AAElC,oBAAY,aAAa;IACvB,GAAG,MAAM;IACT,MAAM,KAAK;CACZ;AAED,oBAAY,UAAU;IACpB,OAAO,gDAAgD;CACxD;AAED,MAAM,WAAW,KAAK;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,aAAa,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,qBACa,cAAe,SAAQ,UAAU;IACjB,SAAS,EAAE,OAAO,CAAQ;IAC1B,YAAY,EAAE,OAAO,CAAS;IAC/B,OAAO,EAAE,MAAM,CAAM;IACrB,OAAO,SAAK;IACZ,gBAAgB,SAAK;IACrB,YAAY,SAAK;IACjB,GAAG,SAAM;IACT,MAAM,SAAM;IACZ,MAAM,SAAO;IACvC,MAAM,EAAE,KAAK,EAAE,CAAM;IAEK,cAAc,SAAK;IAE7C,OAAO,CAAC,cAAc,CAKnB;IAEM,iBAAiB;IAKjB,oBAAoB;IAK7B,OAAO,CAAC,YAAY;IAsCpB,OAAO,CAAC,yBAAyB;IAwBjC,OAAO,CAAC,yBAAyB;IAUjC,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,kBAAkB;IAmC1B,OAAO,KAAK,MAAM,GAIjB;IAED,OAAO,CAAC,MAAM;IAQL,MAAM;IAgCf,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}

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

@@ -0,0 +1,223 @@
+import { unsafeCSS, LitElement, svg } from "lit";
+import componentStyle from "./compass-flat.css.js";
+import { property, customElement } from "lit/decorators.js";
+import { TickmarkType } from "../watch-flat/tickmark-flat.js";
+import "../watch-flat/watch-flat.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+var LabelPosition = /* @__PURE__ */ ((LabelPosition2) => {
+  LabelPosition2[LabelPosition2["top"] = -45] = "top";
+  LabelPosition2[LabelPosition2["bottom"] = 50] = "bottom";
+  return LabelPosition2;
+})(LabelPosition || {});
+var LabelStyle = /* @__PURE__ */ ((LabelStyle2) => {
+  LabelStyle2["regular"] = "var(--instrument-tick-mark-secondary-color)";
+  return LabelStyle2;
+})(LabelStyle || {});
+let ObcCompassFlat = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.noPadding = true;
+    this.FOVIndicator = false;
+    this.padding = 16;
+    this.heading = 0;
+    this.courseOverGround = 0;
+    this.tickInterval = 5;
+    this.FOV = 45;
+    this.minFOV = 45;
+    this.maxFOV = 180;
+    this.labels = [];
+    this.containerWidth = 0;
+    this.resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        this.containerWidth = entry.contentRect.width;
+        this.updateLabels();
+      }
+    });
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.resizeObserver.observe(this);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.resizeObserver.unobserve(this);
+  }
+  updateLabels() {
+    if (this.containerWidth < 192) {
+      this.labels = [];
+    } else if (this.containerWidth <= 300) {
+      this.labels = [
+        { x: -180, y: -45, text: "S" },
+        { x: -90, y: -45, text: "W" },
+        { x: 0, y: -45, text: "N" },
+        { x: 90, y: -45, text: "E" },
+        { x: 180, y: -45, text: "S" },
+        { x: 270, y: -45, text: "W" },
+        { x: 360, y: -45, text: "N" },
+        { x: 450, y: -45, text: "E" },
+        { x: 540, y: -45, text: "S" }
+      ];
+    } else {
+      this.labels = [
+        { x: -180, y: -45, text: "S" },
+        { x: -135, y: -45, text: "SW" },
+        { x: -90, y: -45, text: "W" },
+        { x: -45, y: -45, text: "NW" },
+        { x: 0, y: -45, text: "N" },
+        { x: 45, y: -45, text: "NE" },
+        { x: 90, y: -45, text: "E" },
+        { x: 135, y: -45, text: "SE" },
+        { x: 180, y: -45, text: "S" },
+        { x: 225, y: -45, text: "SW" },
+        { x: 270, y: -45, text: "W" },
+        { x: 315, y: -45, text: "NW" },
+        { x: 360, y: -45, text: "N" },
+        { x: 405, y: -45, text: "NE" },
+        { x: 450, y: -45, text: "E" },
+        { x: 495, y: -45, text: "SE" },
+        { x: 540, y: -45, text: "S" }
+      ];
+    }
+  }
+  generateIntervalTickmarks(scale) {
+    const tickmarks = [];
+    let cardinalInterval = 90;
+    if (this.containerWidth > 300) {
+      cardinalInterval = 45;
+    } else if (this.containerWidth < 192) {
+      cardinalInterval = 0;
+    }
+    for (let angle = -180; angle < this.maxFOV * 3; angle += this.tickInterval) {
+      if (cardinalInterval !== 0 && angle % cardinalInterval === 0) {
+        continue;
+      }
+      tickmarks.push({ angle: angle * scale, type: TickmarkType.secondary });
+    }
+    return tickmarks;
+  }
+  generateCardinalTickmarks(scale) {
+    const tickmarks = [];
+    for (const label of this.labels) {
+      tickmarks.push({ angle: label.x * scale, type: TickmarkType.main });
+    }
+    return tickmarks;
+  }
+  generateTickmarks(scale) {
+    return [
+      ...this.generateCardinalTickmarks(scale),
+      ...this.generateIntervalTickmarks(scale)
+    ];
+  }
+  renderFOVIndicator() {
+    const indicators = [];
+    const maxAdjustment = 10;
+    const minContainerWidth = 300;
+    const maxContainerWidth = 512;
+    let yAdjustment = 0;
+    if (this.containerWidth < maxContainerWidth) {
+      const widthRange = maxContainerWidth - minContainerWidth;
+      const scaleFactor = (maxContainerWidth - this.containerWidth) / widthRange;
+      yAdjustment = scaleFactor * maxAdjustment;
+    }
+    const y = 50 + yAdjustment;
+    indicators.push(svg`
+          <text x="-175" y=${y} class="label left" fill=${"var(--instrument-tick-mark-secondary-color)"}>
+            ${-this.FOV}\u00B0
+          </text>`);
+    indicators.push(svg`
+          <text x="0" y=${y} class="label" fill=${"var(--instrument-tick-mark-secondary-color)"}>
+            ${this.heading}\u00B0
+          </text>`);
+    indicators.push(svg`
+          <text x="175" y=${y} class="label right" fill=${"var(--instrument-tick-mark-secondary-color)"}>
+            ${this.FOV}\u00B0
+          </text>`);
+    return indicators;
+  }
+  get HDGSvg() {
+    return svg`<g transform="translate(-24, -74)">
+          <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)"/>
+        </g>`;
+  }
+  COGSvg(translation) {
+    return svg`
+      <g transform="translate(${-24 + translation}, -74)">
+        <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)"/>
+      </g>
+    `;
+  }
+  render() {
+    let angleDiff = this.courseOverGround - this.heading;
+    if (angleDiff > this.maxFOV) {
+      angleDiff -= 360;
+    } else if (angleDiff < -this.maxFOV) {
+      angleDiff += 360;
+    }
+    this.FOV = Math.max(this.minFOV, Math.abs(angleDiff));
+    const baseOffset = 5;
+    const translationScale = baseOffset * 35 / this.FOV;
+    const translation = angleDiff * translationScale;
+    const tickmarks = this.generateTickmarks(translationScale);
+    this.labels.map((l) => {
+      l.x = l.x * translationScale;
+    });
+    const viewBox = this.noPadding ? "-192 -128 384 128" : "-200 -144 400 144";
+    return svg`
+      <div class="container">
+        <obc-watch-flat .noPadding=${this.noPadding} .FOVIndicator=${this.FOVIndicator ? this.renderFOVIndicator() : []} .labels=${this.labels} .rotation=${this.heading} .tickmarks=${tickmarks} .tickmarkSpacing=${translationScale}></obc-watch-flat>
+        <svg viewBox=${viewBox} xmlns="http://www.w3.org/2000/svg"> 
+        ${this.HDGSvg}${this.COGSvg(translation)}
+      </div>
+    `;
+  }
+};
+ObcCompassFlat.styles = unsafeCSS(componentStyle);
+__decorateClass([
+  property({ type: Boolean })
+], ObcCompassFlat.prototype, "noPadding", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcCompassFlat.prototype, "FOVIndicator", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcCompassFlat.prototype, "padding", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcCompassFlat.prototype, "heading", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcCompassFlat.prototype, "courseOverGround", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcCompassFlat.prototype, "tickInterval", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcCompassFlat.prototype, "FOV", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcCompassFlat.prototype, "minFOV", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcCompassFlat.prototype, "maxFOV", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcCompassFlat.prototype, "containerWidth", 2);
+ObcCompassFlat = __decorateClass([
+  customElement("obc-compass-flat")
+], ObcCompassFlat);
+export {
+  LabelPosition,
+  LabelStyle,
+  ObcCompassFlat
+};
+//# sourceMappingURL=compass-flat.js.map