@oicl/openbridge-webcomponents 0.0.4

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

@@ -0,0 +1,108 @@
+import { unsafeCSS, LitElement, svg } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import { Size, InstrumentState } from "../types.js";
+import { thruster } from "../thruster/thruster.js";
+import "../watch/watch.js";
+import componentStyle from "./azimuth-thruster.css.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 ObcAzimuthThruster = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.size = Size.medium;
+    this.angle = 0;
+    this.atAngleSetpoint = false;
+    this.thrust = 0;
+    this.atThrustSetpoint = false;
+    this.thrustSetpointAtZero = false;
+    this.state = InstrumentState.inCommand;
+    this.loading = 0;
+  }
+  render() {
+    const rotateAngle = this.angle;
+    let setPointColor = "var(--instrument-enhanced-secondary-color)";
+    if (this.atAngleSetpoint) {
+      setPointColor = "var(--instrument-frame-tertiary-color)";
+    }
+    if (this.state === InstrumentState.active) {
+      setPointColor = "var(--instrument-regular-secondary-color)";
+      if (this.atAngleSetpoint) {
+        setPointColor = "var(--instrument-frame-tertiary-color)";
+      }
+    } else if (this.state === InstrumentState.loading) {
+      setPointColor = "var(--instrument-frame-tertiary-color)";
+    } else if (this.state === InstrumentState.off) {
+      setPointColor = "var(--instrument-frame-tertiary-color)";
+    }
+    const watchfaceTicksOn = this.state === InstrumentState.active || this.state === InstrumentState.inCommand;
+    return svg`
+      <div class="container">
+      <obc-watch ?hide-all-tickmarks=${!watchfaceTicksOn} ?off=${this.state === InstrumentState.off}></obc-watch>
+      <svg viewBox="-200 -200 400 400" xmlns="http://www.w3.org/2000/svg">
+        ${this.angleSetpoint !== void 0 ? svg`
+            <g transform="rotate(${this.angleSetpoint}) translate(-12 -192) ">
+              <path d="M11.1999 28.6018C11.3887 28.8537 11.6852 29.002 12 29.002C12.3148 29.002 12.6113 28.8537 12.8001 28.6018L22.3966 15.8018C23.879 13.8246 22.4692 11.002 19.9971 11.002L4.0029 11.002C1.53076 11.002 0.121035 13.8246 1.60338 15.8018L11.1999 28.6018Z" vector-effect="non-scaling-stroke" fill=${setPointColor} stroke="#F7F7F7" stroke-width="2" stroke-linejoin="round"/>
+            </g>
+        ` : null}
+      <g transform="rotate(${rotateAngle})">
+      <svg  width="128" height="320" y ="-160" x="-64" viewBox="-64 -160 128 320">
+        ${thruster(this.thrust, this.thrustSetpoint, this.state, {
+      atSetpoint: this.atThrustSetpoint,
+      tunnel: false,
+      setpointAtZero: this.thrustSetpointAtZero
+    })}
+        </svg>
+        </g>
+        </svg>
+      </div>
+      </div>
+      `;
+  }
+};
+ObcAzimuthThruster.styles = unsafeCSS(componentStyle);
+__decorateClass([
+  property({ type: String })
+], ObcAzimuthThruster.prototype, "size", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcAzimuthThruster.prototype, "angle", 2);
+__decorateClass([
+  property({ type: Number, attribute: "angle-setpoint" })
+], ObcAzimuthThruster.prototype, "angleSetpoint", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "at-angle-setpoint" })
+], ObcAzimuthThruster.prototype, "atAngleSetpoint", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcAzimuthThruster.prototype, "thrust", 2);
+__decorateClass([
+  property({ type: Number, attribute: "thrust-setpoint" })
+], ObcAzimuthThruster.prototype, "thrustSetpoint", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "at-thrust-setpoint" })
+], ObcAzimuthThruster.prototype, "atThrustSetpoint", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "thrust-setpoint-at-zero" })
+], ObcAzimuthThruster.prototype, "thrustSetpointAtZero", 2);
+__decorateClass([
+  property({ type: String })
+], ObcAzimuthThruster.prototype, "state", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcAzimuthThruster.prototype, "loading", 2);
+ObcAzimuthThruster = __decorateClass([
+  customElement("obc-azimuth-thruster")
+], ObcAzimuthThruster);
+export {
+  ObcAzimuthThruster
+};
+//# sourceMappingURL=azimuth-thruster.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"azimuth-thruster.js","sources":["../../../src/navigation-instruments/azimuth-thruster/azimuth-thruster.ts"],"sourcesContent":["import {LitElement, svg, unsafeCSS} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {Size, InstrumentState} from '../types';\nimport {thruster} from '../thruster/thruster';\nimport '../watch/watch';\nimport componentStyle from './azimuth-thruster.css?inline';\n\n@customElement('obc-azimuth-thruster')\nexport class ObcAzimuthThruster extends LitElement {\n  @property({type: String}) size: Size = Size.medium;\n  @property({type: Number}) angle = 0;\n  @property({type: Number, attribute: 'angle-setpoint'}) angleSetpoint:\n    | number\n    | undefined;\n  @property({type: Boolean, attribute: 'at-angle-setpoint'})\n  atAngleSetpoint: boolean = false;\n\n  @property({type: Number}) thrust = 0;\n  @property({type: Number, attribute: 'thrust-setpoint'}) thrustSetpoint:\n    | number\n    | undefined;\n  @property({type: Boolean, attribute: 'at-thrust-setpoint'})\n  atThrustSetpoint: boolean = false;\n  @property({type: Boolean, attribute: 'thrust-setpoint-at-zero'})\n  thrustSetpointAtZero: boolean = false;\n  @property({type: String}) state: InstrumentState = InstrumentState.inCommand;\n  @property({type: Number}) loading: number = 0;\n\n  override render() {\n    const rotateAngle = this.angle;\n    let setPointColor = 'var(--instrument-enhanced-secondary-color)';\n    if (this.atAngleSetpoint) {\n      setPointColor = 'var(--instrument-frame-tertiary-color)';\n    }\n    if (this.state === InstrumentState.active) {\n      setPointColor = 'var(--instrument-regular-secondary-color)';\n      if (this.atAngleSetpoint) {\n        setPointColor = 'var(--instrument-frame-tertiary-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    const watchfaceTicksOn =\n      this.state === InstrumentState.active ||\n      this.state === InstrumentState.inCommand;\n\n    return svg`\n      <div class=\"container\">\n      <obc-watch ?hide-all-tickmarks=${!watchfaceTicksOn} ?off=${\n        this.state === InstrumentState.off\n      }></obc-watch>\n      <svg viewBox=\"-200 -200 400 400\" xmlns=\"http://www.w3.org/2000/svg\">\n        ${\n          this.angleSetpoint !== undefined\n            ? svg`\n            <g transform=\"rotate(${this.angleSetpoint}) translate(-12 -192) \">\n              <path d=\"M11.1999 28.6018C11.3887 28.8537 11.6852 29.002 12 29.002C12.3148 29.002 12.6113 28.8537 12.8001 28.6018L22.3966 15.8018C23.879 13.8246 22.4692 11.002 19.9971 11.002L4.0029 11.002C1.53076 11.002 0.121035 13.8246 1.60338 15.8018L11.1999 28.6018Z\" vector-effect=\"non-scaling-stroke\" fill=${setPointColor} stroke=\"#F7F7F7\" stroke-width=\"2\" stroke-linejoin=\"round\"/>\n            </g>\n        `\n            : null\n        }\n      <g transform=\"rotate(${rotateAngle})\">\n      <svg  width=\"128\" height=\"320\" y =\"-160\" x=\"-64\" viewBox=\"-64 -160 128 320\">\n        ${thruster(this.thrust, this.thrustSetpoint, this.state, {\n          atSetpoint: this.atThrustSetpoint,\n          tunnel: false,\n          setpointAtZero: this.thrustSetpointAtZero,\n        })}\n        </svg>\n        </g>\n        </svg>\n      </div>\n      </div>\n      `;\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-azimuth-thruster': ObcAzimuthThruster;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAQa,IAAA,qBAAN,cAAiC,WAAW;AAAA,EAA5C,cAAA;AAAA,UAAA,GAAA,SAAA;AACqB,SAAA,OAAa,KAAK;AACV,SAAA,QAAA;AAKP,SAAA,kBAAA;AAEQ,SAAA,SAAA;AAKP,SAAA,mBAAA;AAEI,SAAA,uBAAA;AACN,SAAA,QAAyB,gBAAgB;AACvB,SAAA,UAAA;AAAA,EAAA;AAAA,EAEnC,SAAS;AAChB,UAAM,cAAc,KAAK;AACzB,QAAI,gBAAgB;AACpB,QAAI,KAAK,iBAAiB;AACR,sBAAA;AAAA,IAClB;AACI,QAAA,KAAK,UAAU,gBAAgB,QAAQ;AACzB,sBAAA;AAChB,UAAI,KAAK,iBAAiB;AACR,wBAAA;AAAA,MAClB;AAAA,IACS,WAAA,KAAK,UAAU,gBAAgB,SAAS;AACjC,sBAAA;AAAA,IACP,WAAA,KAAK,UAAU,gBAAgB,KAAK;AAC7B,sBAAA;AAAA,IAClB;AAEA,UAAM,mBACJ,KAAK,UAAU,gBAAgB,UAC/B,KAAK,UAAU,gBAAgB;AAE1B,WAAA;AAAA;AAAA,uCAE4B,CAAC,gBAAgB,SAChD,KAAK,UAAU,gBAAgB,GACjC;AAAA;AAAA,UAGI,KAAK,kBAAkB,SACnB;AAAA,mCACqB,KAAK,aAAa;AAAA,uTACkQ,aAAa;AAAA;AAAA,YAGtT,IACN;AAAA,6BACqB,WAAW;AAAA;AAAA,UAE9B,SAAS,KAAK,QAAQ,KAAK,gBAAgB,KAAK,OAAO;AAAA,MACvD,YAAY,KAAK;AAAA,MACjB,QAAQ;AAAA,MACR,gBAAgB,KAAK;AAAA,IAAA,CACtB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOR;AAGF;AAxEa,mBAuEK,SAAS,UAAU,cAAc;AAtEvB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GADb,mBACe,WAAA,QAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAFb,mBAEe,WAAA,SAAA,CAAA;AAC6B,gBAAA;AAAA,EAAtD,SAAS,EAAC,MAAM,QAAQ,WAAW,kBAAiB;AAAA,GAH1C,mBAG4C,WAAA,iBAAA,CAAA;AAIvD,gBAAA;AAAA,EADC,SAAS,EAAC,MAAM,SAAS,WAAW,qBAAoB;AAAA,GAN9C,mBAOX,WAAA,mBAAA,CAAA;AAE0B,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GATb,mBASe,WAAA,UAAA,CAAA;AAC8B,gBAAA;AAAA,EAAvD,SAAS,EAAC,MAAM,QAAQ,WAAW,mBAAkB;AAAA,GAV3C,mBAU6C,WAAA,kBAAA,CAAA;AAIxD,gBAAA;AAAA,EADC,SAAS,EAAC,MAAM,SAAS,WAAW,sBAAqB;AAAA,GAb/C,mBAcX,WAAA,oBAAA,CAAA;AAEA,gBAAA;AAAA,EADC,SAAS,EAAC,MAAM,SAAS,WAAW,2BAA0B;AAAA,GAfpD,mBAgBX,WAAA,wBAAA,CAAA;AAC0B,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAjBb,mBAiBe,WAAA,SAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAlBb,mBAkBe,WAAA,WAAA,CAAA;AAlBf,qBAAN,gBAAA;AAAA,EADN,cAAc,sBAAsB;AAAA,GACxB,kBAAA;"}

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

@@ -0,0 +1,31 @@
+import { LitElement } from 'lit';
+import { Size, InstrumentState } from '../types';
+/**
+ * @element obc-thruster
+ *
+ * @prop {Size} size - The size of the thruster
+ * @prop {number} thrust - The thrust of the thruster in percent (-100 - +100)
+ */
+export declare class ObcThruster extends LitElement {
+    size: Size;
+    thrust: number;
+    setpoint: number | undefined;
+    atSetpoint: boolean;
+    setpointAtZero: boolean;
+    state: InstrumentState;
+    tunnel: boolean;
+    loading: boolean;
+    off: boolean;
+    render(): import("lit-html").TemplateResult<2>;
+}
+export declare function thruster(thrust: number, setpoint: number | undefined, state: InstrumentState, options: {
+    atSetpoint: boolean;
+    tunnel: boolean;
+    setpointAtZero: boolean;
+}): import("lit-html").TemplateResult<2>;
+declare global {
+    interface HTMLElementTagNameMap {
+        'obc-thruster': ObcThruster;
+    }
+}
+//# sourceMappingURL=thruster.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"thruster.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/thruster/thruster.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAM,MAAM,KAAK,CAAC;AAEpC,OAAO,EAAC,IAAI,EAAE,eAAe,EAAC,MAAM,UAAU,CAAC;AAE/C;;;;;GAKG;AACH,qBACa,WAAY,SAAQ,UAAU;IACf,IAAI,EAAE,IAAI,CAAe;IACzB,MAAM,EAAE,MAAM,CAAK;IACnB,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IACF,UAAU,EAAE,OAAO,CAChE;IAER,cAAc,EAAE,OAAO,CAAS;IACN,KAAK,EAAE,eAAe,CAA6B;IAClD,MAAM,EAAE,OAAO,CAAS;IACxB,OAAO,EAAE,OAAO,CAAS;IACzB,GAAG,EAAE,OAAO,CAAS;IAEvC,MAAM;CAOhB;AA2ED,wBAAgB,QAAQ,CACtB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,MAAM,GAAG,SAAS,EAC5B,KAAK,EAAE,eAAe,EACtB,OAAO,EAAE;IAAC,UAAU,EAAE,OAAO,CAAC;IAAC,MAAM,EAAE,OAAO,CAAC;IAAC,cAAc,EAAE,OAAO,CAAA;CAAC,wCAiFzE;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}

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

@@ -0,0 +1,187 @@
+import { LitElement, svg } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import { Size, InstrumentState } from "../types.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 ObcThruster = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.size = Size.medium;
+    this.thrust = 0;
+    this.atSetpoint = false;
+    this.setpointAtZero = false;
+    this.state = InstrumentState.inCommand;
+    this.tunnel = false;
+    this.loading = false;
+    this.off = false;
+  }
+  render() {
+    return thruster(this.thrust, this.setpoint, this.state, {
+      atSetpoint: this.atSetpoint,
+      tunnel: this.tunnel,
+      setpointAtZero: this.setpointAtZero
+    });
+  }
+};
+__decorateClass([
+  property({ type: String })
+], ObcThruster.prototype, "size", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcThruster.prototype, "thrust", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcThruster.prototype, "setpoint", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "at-setpoint" })
+], ObcThruster.prototype, "atSetpoint", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "setpoint-at-zero" })
+], ObcThruster.prototype, "setpointAtZero", 2);
+__decorateClass([
+  property({ type: String })
+], ObcThruster.prototype, "state", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcThruster.prototype, "tunnel", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcThruster.prototype, "loading", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcThruster.prototype, "off", 2);
+ObcThruster = __decorateClass([
+  customElement("obc-thruster")
+], ObcThruster);
+const containerHeight = 134;
+function thrusterTop(value, colors, hideTicks) {
+  const container = svg`
+      <path transform="translate(-33 -137)" d="M1 9C1 4.58172 4.58172 1 9 1H57C61.4183 1 65 4.58172 65 9V135H1V9Z" fill=${colors.container} stroke="var(--instrument-frame-tertiary-color)" vector-effect="non-scaling-stroke"/>
+  `;
+  const track = svg`<rect width="32" height="134" x="-16" y="-136" fill="var(--instrument-frame-secondary-color)" stroke="var(--instrument-frame-tertiary-color)" vector-effect="non-scaling-stroke"/>`;
+  const tickmarks = [];
+  const nTicks = 4;
+  const delta = containerHeight / nTicks;
+  if (!hideTicks) {
+    for (let i = 1; i < nTicks; i++) {
+      tickmarks.push(
+        svg`<line x1="-20" x2="-28" y1=${-i * delta - 2}  y2=${-i * delta - 2} stroke="var(--instrument-frame-tertiary-color)" stroke-width="1" vector-effect="non-scaling-stroke"/>`
+      );
+      tickmarks.push(
+        svg`<line  x1="20"  x2="28" y1=${-i * delta - 2}  y2=${-i * delta - 2} stroke="var(--instrument-frame-tertiary-color)" stroke-width="1" vector-effect="non-scaling-stroke"/>`
+      );
+    }
+  }
+  const barHeight = 134 * value / 100;
+  const barY = -136 + 134 - barHeight;
+  const bar = svg`<rect width="32" height=${barHeight} x="-16" y=${barY} fill=${colors.box} stroke=${colors.box} vector-effect="non-scaling-stroke"/>`;
+  return [container, track, tickmarks, bar];
+}
+function thrusterBottom(value, colors, hideTicks) {
+  const container = svg`
+      <g transform="rotate(180)">
+        ${thrusterTop(value, colors, hideTicks)}
+      </g>
+  `;
+  return container;
+}
+function arrowTop(arrowColor) {
+  return svg`
+<path transform="translate(-15 -156)" d="M0.707007 14.2929L14.9999 0L29.2928 14.2929C29.9228 14.9229 29.4766 16 28.5857 16H1.41412C0.523211 16 0.0770419 14.9229 0.707007 14.2929Z" fill=${arrowColor}/>`;
+}
+function setpointSvg(value, setpointAtZero, colors) {
+  const y = -12 + -(setpointAtZero ? 0 : Math.sign(value) * (containerHeight * Math.abs(value) / 100 + 2));
+  return svg`
+  <g transform="translate(-40 ${y})">
+    <path d="M59.4001 11.1999C59.1483 11.3887 59 11.6852 59 12C59 12.3148 59.1483 12.6113 59.4001 12.8001L72.2001 22.3966C74.1773 23.879 77 22.4692 77 19.9971L77 4.0029C77 1.53076 74.1773 0.121035 72.2001 1.60338L59.4001 11.1999Z" fill=${colors.fill} stroke=${colors.stroke} stroke-width="2" stroke-linejoin="round" vector-effect="non-scaling-stroke"/>
+    <path d="M20.5999 12.8001C20.8517 12.6113 21 12.3148 21 12C21 11.6852 20.8517 11.3887 20.5999 11.1999L7.79986 1.60338C5.82268 0.121036 3 1.53075 3 4.0029L3 19.9971C3 22.4692 5.82268 23.879 7.79986 22.3966L20.5999 12.8001Z" fill=${colors.fill} stroke=${colors.stroke} stroke-width="2" stroke-linejoin="round" vector-effect="non-scaling-stroke"/>
+  </g>
+`;
+}
+function thruster(thrust, setpoint, state, options) {
+  let boxColor = "var(--instrument-enhanced-secondary-color)";
+  let setPointColor = boxColor;
+  let arrowColor = "var(--instrument-tick-mark-primary-color)";
+  let containerBackgroundColor = "var(--instrument-frame-primary-color)";
+  let zeroLineColor = "var(--instrument-enhanced-secondary-color)";
+  let hideTicks = false;
+  if (options.atSetpoint) {
+    setPointColor = "var(--instrument-frame-tertiary-color)";
+  }
+  if (state === InstrumentState.active) {
+    boxColor = "var(--instrument-regular-secondary-color)";
+    zeroLineColor = "var(--instrument-regular-secondary-color)";
+    setPointColor = boxColor;
+    arrowColor = "var(--instrument-regular-secondary-color)";
+    if (options.atSetpoint) {
+      setPointColor = "var(--instrument-frame-tertiary-color)";
+    }
+  } else if (state === InstrumentState.loading) {
+    boxColor = "transparent";
+    setPointColor = "var(--instrument-frame-tertiary-color)";
+    zeroLineColor = "var(--instrument-frame-tertiary-color)";
+    arrowColor = "var(--instrument-regular-secondary-color)";
+    thrust = 0;
+    hideTicks = true;
+    if (setpoint !== void 0) {
+      setpoint = 0;
+    }
+  } else if (state === InstrumentState.off) {
+    boxColor = "transparent";
+    setPointColor = "var(--instrument-frame-tertiary-color)";
+    arrowColor = "var(--instrument-frame-tertiary-color)";
+    zeroLineColor = "var(--instrument-frame-tertiary-color)";
+    thrust = 0;
+    hideTicks = true;
+    containerBackgroundColor = "transparent";
+    if (setpoint !== void 0) {
+      setpoint = 0;
+    }
+  }
+  const centerLine = svg`
+    <rect x="-32" y="-2" width="64" height="4" fill=${zeroLineColor} stroke=${zeroLineColor}/>
+  `;
+  const thrusterSvg = svg`
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="-64 -160 128 320" x="-64" y="-160" width="128" height="320">
+    ${thrusterTop(
+    Math.max(thrust, 0),
+    { box: boxColor, container: containerBackgroundColor },
+    hideTicks
+  )}
+    ${thrusterBottom(
+    Math.max(-thrust, 0),
+    { box: boxColor, container: containerBackgroundColor },
+    hideTicks
+  )}
+    ${centerLine}
+    ${setpoint !== void 0 ? setpointSvg(setpoint, options.setpointAtZero, {
+    fill: setPointColor,
+    stroke: "var(--border-silhouette-color)"
+  }) : null}
+    ${options.tunnel ? null : arrowTop(arrowColor)}
+    </svg>
+  `;
+  if (options.tunnel) {
+    return svg`
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="-160 -64  320 128" x="-160" y="-64" width="320" height="128">
+        <g transform="rotate(90)">
+          ${thrusterSvg}
+        </g>
+      </svg>`;
+  }
+  return thrusterSvg;
+}
+export {
+  ObcThruster,
+  thruster
+};
+//# sourceMappingURL=thruster.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"thruster.js","sources":["../../../src/navigation-instruments/thruster/thruster.ts"],"sourcesContent":["import {LitElement, svg} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {Size, InstrumentState} from '../types';\n\n/**\n * @element obc-thruster\n *\n * @prop {Size} size - The size of the thruster\n * @prop {number} thrust - The thrust of the thruster in percent (-100 - +100)\n */\n@customElement('obc-thruster')\nexport class ObcThruster extends LitElement {\n  @property({type: String}) size: Size = Size.medium;\n  @property({type: Number}) thrust: number = 0;\n  @property({type: Number}) setpoint: number | undefined;\n  @property({type: Boolean, attribute: 'at-setpoint'}) atSetpoint: boolean =\n    false;\n  @property({type: Boolean, attribute: 'setpoint-at-zero'})\n  setpointAtZero: boolean = false;\n  @property({type: String}) state: InstrumentState = InstrumentState.inCommand;\n  @property({type: Boolean}) tunnel: boolean = false;\n  @property({type: Boolean}) loading: boolean = false;\n  @property({type: Boolean}) off: boolean = false;\n\n  override render() {\n    return thruster(this.thrust, this.setpoint, this.state, {\n      atSetpoint: this.atSetpoint,\n      tunnel: this.tunnel,\n      setpointAtZero: this.setpointAtZero,\n    });\n  }\n}\nconst containerHeight = 134;\n\nfunction thrusterTop(\n  value: number,\n  colors: {box: string; container: string},\n  hideTicks: boolean\n) {\n  const container = svg`\n      <path transform=\"translate(-33 -137)\" d=\"M1 9C1 4.58172 4.58172 1 9 1H57C61.4183 1 65 4.58172 65 9V135H1V9Z\" fill=${colors.container} stroke=\"var(--instrument-frame-tertiary-color)\" vector-effect=\"non-scaling-stroke\"/>\n  `;\n  const track = svg`<rect width=\"32\" height=\"134\" x=\"-16\" y=\"-136\" fill=\"var(--instrument-frame-secondary-color)\" stroke=\"var(--instrument-frame-tertiary-color)\" vector-effect=\"non-scaling-stroke\"/>`;\n\n  const tickmarks = [];\n\n  const nTicks = 4;\n  const delta = containerHeight / nTicks;\n  if (!hideTicks) {\n    for (let i = 1; i < nTicks; i++) {\n      tickmarks.push(\n        svg`<line x1=\"-20\" x2=\"-28\" y1=${-i * delta - 2}  y2=${\n          -i * delta - 2\n        } stroke=\"var(--instrument-frame-tertiary-color)\" stroke-width=\"1\" vector-effect=\"non-scaling-stroke\"/>`\n      );\n      tickmarks.push(\n        svg`<line  x1=\"20\"  x2=\"28\" y1=${-i * delta - 2}  y2=${\n          -i * delta - 2\n        } stroke=\"var(--instrument-frame-tertiary-color)\" stroke-width=\"1\" vector-effect=\"non-scaling-stroke\"/>`\n      );\n    }\n  }\n\n  const barHeight = (134 * value) / 100;\n  const barY = -136 + 134 - barHeight;\n  const bar = svg`<rect width=\"32\" height=${barHeight} x=\"-16\" y=${barY} fill=${colors.box} stroke=${colors.box} vector-effect=\"non-scaling-stroke\"/>`;\n\n  return [container, track, tickmarks, bar];\n}\n\nfunction thrusterBottom(\n  value: number,\n  colors: {box: string; container: string},\n  hideTicks: boolean\n) {\n  const container = svg`\n      <g transform=\"rotate(180)\">\n        ${thrusterTop(value, colors, hideTicks)}\n      </g>\n  `;\n  return container;\n}\n\nfunction arrowTop(arrowColor: string) {\n  return svg`\n<path transform=\"translate(-15 -156)\" d=\"M0.707007 14.2929L14.9999 0L29.2928 14.2929C29.9228 14.9229 29.4766 16 28.5857 16H1.41412C0.523211 16 0.0770419 14.9229 0.707007 14.2929Z\" fill=${arrowColor}/>`;\n}\n\nfunction setpointSvg(\n  value: number,\n  setpointAtZero: boolean,\n  colors: {fill: string; stroke: string}\n) {\n  const y =\n    -12 +\n    -(setpointAtZero\n      ? 0\n      : Math.sign(value) * ((containerHeight * Math.abs(value)) / 100 + 2));\n  return svg`\n  <g transform=\"translate(-40 ${y})\">\n    <path d=\"M59.4001 11.1999C59.1483 11.3887 59 11.6852 59 12C59 12.3148 59.1483 12.6113 59.4001 12.8001L72.2001 22.3966C74.1773 23.879 77 22.4692 77 19.9971L77 4.0029C77 1.53076 74.1773 0.121035 72.2001 1.60338L59.4001 11.1999Z\" fill=${colors.fill} stroke=${colors.stroke} stroke-width=\"2\" stroke-linejoin=\"round\" vector-effect=\"non-scaling-stroke\"/>\n    <path d=\"M20.5999 12.8001C20.8517 12.6113 21 12.3148 21 12C21 11.6852 20.8517 11.3887 20.5999 11.1999L7.79986 1.60338C5.82268 0.121036 3 1.53075 3 4.0029L3 19.9971C3 22.4692 5.82268 23.879 7.79986 22.3966L20.5999 12.8001Z\" fill=${colors.fill} stroke=${colors.stroke} stroke-width=\"2\" stroke-linejoin=\"round\" vector-effect=\"non-scaling-stroke\"/>\n  </g>\n`;\n}\n\nexport function thruster(\n  thrust: number,\n  setpoint: number | undefined,\n  state: InstrumentState,\n  options: {atSetpoint: boolean; tunnel: boolean; setpointAtZero: boolean}\n) {\n  let boxColor = 'var(--instrument-enhanced-secondary-color)';\n  let setPointColor = boxColor;\n  let arrowColor = 'var(--instrument-tick-mark-primary-color)';\n  let containerBackgroundColor = 'var(--instrument-frame-primary-color)';\n  let zeroLineColor = 'var(--instrument-enhanced-secondary-color)';\n  let hideTicks = false;\n  if (options.atSetpoint) {\n    setPointColor = 'var(--instrument-frame-tertiary-color)';\n  }\n  if (state === InstrumentState.active) {\n    boxColor = 'var(--instrument-regular-secondary-color)';\n    zeroLineColor = 'var(--instrument-regular-secondary-color)';\n    setPointColor = boxColor;\n    arrowColor = 'var(--instrument-regular-secondary-color)';\n    if (options.atSetpoint) {\n      setPointColor = 'var(--instrument-frame-tertiary-color)';\n    }\n  } else if (state === InstrumentState.loading) {\n    boxColor = 'transparent';\n    setPointColor = 'var(--instrument-frame-tertiary-color)';\n    zeroLineColor = 'var(--instrument-frame-tertiary-color)';\n    arrowColor = 'var(--instrument-regular-secondary-color)';\n    thrust = 0;\n    hideTicks = true;\n    if (setpoint !== undefined) {\n      setpoint = 0;\n    }\n  } else if (state === InstrumentState.off) {\n    boxColor = 'transparent';\n    setPointColor = 'var(--instrument-frame-tertiary-color)';\n    arrowColor = 'var(--instrument-frame-tertiary-color)';\n    zeroLineColor = 'var(--instrument-frame-tertiary-color)';\n    thrust = 0;\n    hideTicks = true;\n    containerBackgroundColor = 'transparent';\n    if (setpoint !== undefined) {\n      setpoint = 0;\n    }\n  }\n\n  const centerLine = svg`\n    <rect x=\"-32\" y=\"-2\" width=\"64\" height=\"4\" fill=${zeroLineColor} stroke=${zeroLineColor}/>\n  `;\n\n  const thrusterSvg = svg`\n  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"-64 -160 128 320\" x=\"-64\" y=\"-160\" width=\"128\" height=\"320\">\n    ${thrusterTop(\n      Math.max(thrust, 0),\n      {box: boxColor, container: containerBackgroundColor},\n      hideTicks\n    )}\n    ${thrusterBottom(\n      Math.max(-thrust, 0),\n      {box: boxColor, container: containerBackgroundColor},\n      hideTicks\n    )}\n    ${centerLine}\n    ${\n      setpoint !== undefined\n        ? setpointSvg(setpoint, options.setpointAtZero, {\n            fill: setPointColor,\n            stroke: 'var(--border-silhouette-color)',\n          })\n        : null\n    }\n    ${options.tunnel ? null : arrowTop(arrowColor)}\n    </svg>\n  `;\n\n  if (options.tunnel) {\n    return svg`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"-160 -64  320 128\" x=\"-160\" y=\"-64\" width=\"320\" height=\"128\">\n        <g transform=\"rotate(90)\">\n          ${thrusterSvg}\n        </g>\n      </svg>`;\n  }\n\n  return thrusterSvg;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-thruster': ObcThruster;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAWa,IAAA,cAAN,cAA0B,WAAW;AAAA,EAArC,cAAA;AAAA,UAAA,GAAA,SAAA;AACqB,SAAA,OAAa,KAAK;AACD,SAAA,SAAA;AAGzC,SAAA,aAAA;AAEwB,SAAA,iBAAA;AACA,SAAA,QAAyB,gBAAgB;AACtB,SAAA,SAAA;AACC,SAAA,UAAA;AACJ,SAAA,MAAA;AAAA,EAAA;AAAA,EAEjC,SAAS;AAChB,WAAO,SAAS,KAAK,QAAQ,KAAK,UAAU,KAAK,OAAO;AAAA,MACtD,YAAY,KAAK;AAAA,MACjB,QAAQ,KAAK;AAAA,MACb,gBAAgB,KAAK;AAAA,IAAA,CACtB;AAAA,EACH;AACF;AAnB4B,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GADb,YACe,WAAA,QAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAFb,YAEe,WAAA,UAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAHb,YAGe,WAAA,YAAA,CAAA;AAC2B,gBAAA;AAAA,EAApD,SAAS,EAAC,MAAM,SAAS,WAAW,eAAc;AAAA,GAJxC,YAI0C,WAAA,cAAA,CAAA;AAGrD,gBAAA;AAAA,EADC,SAAS,EAAC,MAAM,SAAS,WAAW,oBAAmB;AAAA,GAN7C,YAOX,WAAA,kBAAA,CAAA;AAC0B,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GARb,YAQe,WAAA,SAAA,CAAA;AACC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,SAAQ;AAAA,GATd,YASgB,WAAA,UAAA,CAAA;AACA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,SAAQ;AAAA,GAVd,YAUgB,WAAA,WAAA,CAAA;AACA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,SAAQ;AAAA,GAXd,YAWgB,WAAA,OAAA,CAAA;AAXhB,cAAN,gBAAA;AAAA,EADN,cAAc,cAAc;AAAA,GAChB,WAAA;AAqBb,MAAM,kBAAkB;AAExB,SAAS,YACP,OACA,QACA,WACA;AACA,QAAM,YAAY;AAAA,0HACsG,OAAO,SAAS;AAAA;AAExI,QAAM,QAAQ;AAEd,QAAM,YAAY,CAAA;AAElB,QAAM,SAAS;AACf,QAAM,QAAQ,kBAAkB;AAChC,MAAI,CAAC,WAAW;AACd,aAAS,IAAI,GAAG,IAAI,QAAQ,KAAK;AACrB,gBAAA;AAAA,QACR,iCAAiC,CAAC,IAAI,QAAQ,CAAC,QAC7C,CAAC,IAAI,QAAQ,CACf;AAAA,MAAA;AAEQ,gBAAA;AAAA,QACR,iCAAiC,CAAC,IAAI,QAAQ,CAAC,QAC7C,CAAC,IAAI,QAAQ,CACf;AAAA,MAAA;AAAA,IAEJ;AAAA,EACF;AAEM,QAAA,YAAa,MAAM,QAAS;AAC5B,QAAA,OAAO,OAAO,MAAM;AACpB,QAAA,MAAM,8BAA8B,SAAS,cAAc,IAAI,SAAS,OAAO,GAAG,WAAW,OAAO,GAAG;AAE7G,SAAO,CAAC,WAAW,OAAO,WAAW,GAAG;AAC1C;AAEA,SAAS,eACP,OACA,QACA,WACA;AACA,QAAM,YAAY;AAAA;AAAA,UAEV,YAAY,OAAO,QAAQ,SAAS,CAAC;AAAA;AAAA;AAGtC,SAAA;AACT;AAEA,SAAS,SAAS,YAAoB;AAC7B,SAAA;AAAA,2LACkL,UAAU;AACrM;AAEA,SAAS,YACP,OACA,gBACA,QACA;AACA,QAAM,IACJ,MACA,EAAE,iBACE,IACA,KAAK,KAAK,KAAK,KAAM,kBAAkB,KAAK,IAAI,KAAK,IAAK,MAAM;AAC/D,SAAA;AAAA,gCACuB,CAAC;AAAA,8OAC6M,OAAO,IAAI,WAAW,OAAO,MAAM;AAAA,0OACvC,OAAO,IAAI,WAAW,OAAO,MAAM;AAAA;AAAA;AAG7Q;AAEO,SAAS,SACd,QACA,UACA,OACA,SACA;AACA,MAAI,WAAW;AACf,MAAI,gBAAgB;AACpB,MAAI,aAAa;AACjB,MAAI,2BAA2B;AAC/B,MAAI,gBAAgB;AACpB,MAAI,YAAY;AAChB,MAAI,QAAQ,YAAY;AACN,oBAAA;AAAA,EAClB;AACI,MAAA,UAAU,gBAAgB,QAAQ;AACzB,eAAA;AACK,oBAAA;AACA,oBAAA;AACH,iBAAA;AACb,QAAI,QAAQ,YAAY;AACN,sBAAA;AAAA,IAClB;AAAA,EAAA,WACS,UAAU,gBAAgB,SAAS;AACjC,eAAA;AACK,oBAAA;AACA,oBAAA;AACH,iBAAA;AACJ,aAAA;AACG,gBAAA;AACZ,QAAI,aAAa,QAAW;AACf,iBAAA;AAAA,IACb;AAAA,EAAA,WACS,UAAU,gBAAgB,KAAK;AAC7B,eAAA;AACK,oBAAA;AACH,iBAAA;AACG,oBAAA;AACP,aAAA;AACG,gBAAA;AACe,+BAAA;AAC3B,QAAI,aAAa,QAAW;AACf,iBAAA;AAAA,IACb;AAAA,EACF;AAEA,QAAM,aAAa;AAAA,sDACiC,aAAa,WAAW,aAAa;AAAA;AAGzF,QAAM,cAAc;AAAA;AAAA,MAEhB;AAAA,IACA,KAAK,IAAI,QAAQ,CAAC;AAAA,IAClB,EAAC,KAAK,UAAU,WAAW,yBAAwB;AAAA,IACnD;AAAA,EAAA,CACD;AAAA,MACC;AAAA,IACA,KAAK,IAAI,CAAC,QAAQ,CAAC;AAAA,IACnB,EAAC,KAAK,UAAU,WAAW,yBAAwB;AAAA,IACnD;AAAA,EAAA,CACD;AAAA,MACC,UAAU;AAAA,MAEV,aAAa,SACT,YAAY,UAAU,QAAQ,gBAAgB;AAAA,IAC5C,MAAM;AAAA,IACN,QAAQ;AAAA,EACT,CAAA,IACD,IACN;AAAA,MACE,QAAQ,SAAS,OAAO,SAAS,UAAU,CAAC;AAAA;AAAA;AAIhD,MAAI,QAAQ,QAAQ;AACX,WAAA;AAAA;AAAA;AAAA,YAGC,WAAW;AAAA;AAAA;AAAA,EAGrB;AAEO,SAAA;AACT;"}

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

@@ -0,0 +1,12 @@
+export declare enum Size {
+    small = "s",
+    medium = "m",
+    large = "l"
+}
+export declare enum InstrumentState {
+    inCommand = "inCommand",
+    active = "active",
+    loading = "loading",
+    off = "off"
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/navigation-instruments/types.ts"],"names":[],"mappings":"AAAA,oBAAY,IAAI;IACd,KAAK,MAAM;IACX,MAAM,MAAM;IACZ,KAAK,MAAM;CACZ;AAED,oBAAY,eAAe;IACzB,SAAS,cAAc;IACvB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,GAAG,QAAQ;CACZ"}

package/dist/navigation-instruments/types.js

@@ -0,0 +1,18 @@
+var Size = /* @__PURE__ */ ((Size2) => {
+  Size2["small"] = "s";
+  Size2["medium"] = "m";
+  Size2["large"] = "l";
+  return Size2;
+})(Size || {});
+var InstrumentState = /* @__PURE__ */ ((InstrumentState2) => {
+  InstrumentState2["inCommand"] = "inCommand";
+  InstrumentState2["active"] = "active";
+  InstrumentState2["loading"] = "loading";
+  InstrumentState2["off"] = "off";
+  return InstrumentState2;
+})(InstrumentState || {});
+export {
+  InstrumentState,
+  Size
+};
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../../src/navigation-instruments/types.ts"],"sourcesContent":["export enum Size {\n  small = 's',\n  medium = 'm',\n  large = 'l',\n}\n\nexport enum InstrumentState {\n  inCommand = 'inCommand',\n  active = 'active',\n  loading = 'loading',\n  off = 'off',\n}\n"],"names":["Size","InstrumentState"],"mappings":"AAAY,IAAA,yBAAAA,UAAL;AACLA,QAAA,OAAQ,IAAA;AACRA,QAAA,QAAS,IAAA;AACTA,QAAA,OAAQ,IAAA;AAHEA,SAAAA;AAAA,GAAA,QAAA,CAAA,CAAA;AAMA,IAAA,oCAAAC,qBAAL;AACLA,mBAAA,WAAY,IAAA;AACZA,mBAAA,QAAS,IAAA;AACTA,mBAAA,SAAU,IAAA;AACVA,mBAAA,KAAM,IAAA;AAJIA,SAAAA;AAAA,GAAA,mBAAA,CAAA,CAAA;"}

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

@@ -0,0 +1,12 @@
+import { LitElement } from 'lit';
+export declare class ObcWatch extends LitElement {
+    hideAllTickmarks: boolean;
+    off: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'obc-watch': ObcWatch;
+    }
+}
+//# sourceMappingURL=watch.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"watch.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/watch/watch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAuC1C,qBACa,QAAS,SAAQ,UAAU;IACsB,gBAAgB,UACpE;IACmB,GAAG,UAAS;IAE9B,MAAM;CAgEhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

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

@@ -0,0 +1,113 @@
+import { LitElement, html, svg } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import { circle } from "../../svghelpers/circle.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;
+};
+function tickmarks(tickmarksDeg, tickmarkSize, colorName) {
+  let innerRadius = 200 - 24;
+  let outerRadius = 200;
+  if (tickmarkSize === "primary") {
+    throw new Error("Primary tickmarks are not supported");
+  }
+  if (tickmarkSize === "secondary") {
+    innerRadius = 164.5;
+    outerRadius = 172.5;
+  } else if (tickmarkSize === "tertiary") {
+    throw new Error("Tertiary tickmarks are not supported");
+  }
+  let svgPath = "";
+  for (let i = 0; i < 360; i += tickmarksDeg) {
+    const angle = i * Math.PI / 180;
+    const x1 = Math.cos(angle) * innerRadius;
+    const y1 = Math.sin(angle) * innerRadius;
+    const x2 = Math.cos(angle) * outerRadius;
+    const y2 = Math.sin(angle) * outerRadius;
+    svgPath += `M ${x1} ${y1} L ${x2} ${y2} `;
+  }
+  return svg`<path d=${svgPath} stroke="var(--${colorName}" stroke-width="1" vector-effect="non-scaling-stroke"/>`;
+}
+let ObcWatch = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.hideAllTickmarks = false;
+    this.off = false;
+  }
+  render() {
+    return html`
+      <svg width="100%" height="100%" viewBox="-200 -200 400 400">
+        <defs>
+          <mask id="mask1" x="0" y="0" width="100%" height="100%">
+            <rect x="-200" y="-200" width="400" height="400" fill="white" />
+            <circle cx="0" cy="0" r="160" fill="black" />
+          </mask>
+        </defs>
+        ${this.off ? null : svg`
+        <circle
+          cx="0"
+          cy="0"
+          r="176"
+          fill="var(--instrument-frame-primary-color)"
+          mask="url(#mask1)"
+        />`}
+        ${circle("innerRing", {
+      radius: 320 / 2,
+      strokeWidth: 1,
+      strokeColor: "var(--instrument-frame-tertiary-color)",
+      strokePosition: "center",
+      fillColor: "none"
+    })}
+        ${this.off ? null : circle("outerRing", {
+      radius: 352 / 2,
+      strokeWidth: 1,
+      strokeColor: "var(--instrument-frame-tertiary-color)",
+      strokePosition: "center",
+      fillColor: "none"
+    })}
+        ${this.hideAllTickmarks ? null : tickmarks(
+      90,
+      "secondary",
+      "instrument-frame-tertiary-color"
+    )}
+        ${this.hideAllTickmarks ? null : svg`
+        <line
+          x2="0"
+          x1="0"
+          y2="-160"
+          y1="-176"
+          stroke="var(--instrument-frame-tertiary-color)"
+          vector-effect="non-scaling-stroke"
+        />
+        <line
+          x2="0"
+          x1="0"
+          y2="160"
+          y1="176"
+          stroke="var(--instrument-frame-tertiary-color)"
+          vector-effect="non-scaling-stroke"
+        />`}
+      </svg>
+    `;
+  }
+};
+__decorateClass([
+  property({ type: Boolean, attribute: "hide-all-tickmarks" })
+], ObcWatch.prototype, "hideAllTickmarks", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcWatch.prototype, "off", 2);
+ObcWatch = __decorateClass([
+  customElement("obc-watch")
+], ObcWatch);
+export {
+  ObcWatch
+};
+//# sourceMappingURL=watch.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"watch.js","sources":["../../../src/navigation-instruments/watch/watch.ts"],"sourcesContent":["import {LitElement, html, svg} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {circle} from '../../svghelpers';\n\nenum TickmarkType {\n  primary = 'primary',\n  secondary = 'secondary',\n  tertiary = 'tertiary',\n}\n\nfunction tickmarks(\n  tickmarksDeg: number,\n  tickmarkSize: TickmarkType,\n  colorName: string\n) {\n  let innerRadius = 200 - 24;\n  let outerRadius = 200;\n  if (tickmarkSize === TickmarkType.primary) {\n    throw new Error('Primary tickmarks are not supported');\n  }\n  if (tickmarkSize === TickmarkType.secondary) {\n    innerRadius = 164.5;\n    outerRadius = 172.5;\n  } else if (tickmarkSize === TickmarkType.tertiary) {\n    throw new Error('Tertiary tickmarks are not supported');\n  }\n\n  let svgPath = '';\n  for (let i = 0; i < 360; i += tickmarksDeg) {\n    const angle = (i * Math.PI) / 180;\n    const x1 = Math.cos(angle) * innerRadius;\n    const y1 = Math.sin(angle) * innerRadius;\n    const x2 = Math.cos(angle) * outerRadius;\n    const y2 = Math.sin(angle) * outerRadius;\n    svgPath += `M ${x1} ${y1} L ${x2} ${y2} `;\n  }\n  return svg`<path d=${svgPath} stroke=\"var(--${colorName}\" stroke-width=\"1\" vector-effect=\"non-scaling-stroke\"/>`;\n}\n\n@customElement('obc-watch')\nexport class ObcWatch extends LitElement {\n  @property({type: Boolean, attribute: 'hide-all-tickmarks'}) hideAllTickmarks =\n    false;\n  @property({type: Boolean}) off = false;\n\n  override render() {\n    return html`\n      <svg width=\"100%\" height=\"100%\" viewBox=\"-200 -200 400 400\">\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        ${this.off\n          ? null\n          : svg`\n        <circle\n          cx=\"0\"\n          cy=\"0\"\n          r=\"176\"\n          fill=\"var(--instrument-frame-primary-color)\"\n          mask=\"url(#mask1)\"\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        ${this.off\n          ? null\n          : circle('outerRing', {\n              radius: 352 / 2,\n              strokeWidth: 1,\n              strokeColor: 'var(--instrument-frame-tertiary-color)',\n              strokePosition: 'center',\n              fillColor: 'none',\n            })}\n        ${this.hideAllTickmarks\n          ? null\n          : tickmarks(\n              90,\n              TickmarkType.secondary,\n              'instrument-frame-tertiary-color'\n            )}\n        ${this.hideAllTickmarks\n          ? null\n          : svg`\n        <line\n          x2=\"0\"\n          x1=\"0\"\n          y2=\"-160\"\n          y1=\"-176\"\n          stroke=\"var(--instrument-frame-tertiary-color)\"\n          vector-effect=\"non-scaling-stroke\"\n        />\n        <line\n          x2=\"0\"\n          x1=\"0\"\n          y2=\"160\"\n          y1=\"176\"\n          stroke=\"var(--instrument-frame-tertiary-color)\"\n          vector-effect=\"non-scaling-stroke\"\n        />`}\n      </svg>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-watch': ObcWatch;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAUA,SAAS,UACP,cACA,cACA,WACA;AACA,MAAI,cAAc,MAAM;AACxB,MAAI,cAAc;AAClB,MAAI,iBAAiB,WAAsB;AACnC,UAAA,IAAI,MAAM,qCAAqC;AAAA,EACvD;AACA,MAAI,iBAAiB,aAAwB;AAC7B,kBAAA;AACA,kBAAA;AAAA,EAAA,WACL,iBAAiB,YAAuB;AAC3C,UAAA,IAAI,MAAM,sCAAsC;AAAA,EACxD;AAEA,MAAI,UAAU;AACd,WAAS,IAAI,GAAG,IAAI,KAAK,KAAK,cAAc;AACpC,UAAA,QAAS,IAAI,KAAK,KAAM;AAC9B,UAAM,KAAK,KAAK,IAAI,KAAK,IAAI;AAC7B,UAAM,KAAK,KAAK,IAAI,KAAK,IAAI;AAC7B,UAAM,KAAK,KAAK,IAAI,KAAK,IAAI;AAC7B,UAAM,KAAK,KAAK,IAAI,KAAK,IAAI;AAC7B,eAAW,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE;AAAA,EACxC;AACO,SAAA,cAAc,OAAO,kBAAkB,SAAS;AACzD;AAGa,IAAA,WAAN,cAAuB,WAAW;AAAA,EAAlC,cAAA;AAAA,UAAA,GAAA,SAAA;AAEH,SAAA,mBAAA;AAC+B,SAAA,MAAA;AAAA,EAAA;AAAA,EAExB,SAAS;AACT,WAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAQD,KAAK,MACH,OACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAOD;AAAA,UACD,OAAO,aAAa;AAAA,MACpB,QAAQ,MAAM;AAAA,MACd,aAAa;AAAA,MACb,aAAa;AAAA,MACb,gBAAgB;AAAA,MAChB,WAAW;AAAA,IAAA,CACZ,CAAC;AAAA,UACA,KAAK,MACH,OACA,OAAO,aAAa;AAAA,MAClB,QAAQ,MAAM;AAAA,MACd,aAAa;AAAA,MACb,aAAa;AAAA,MACb,gBAAgB;AAAA,MAChB,WAAW;AAAA,IAAA,CACZ,CAAC;AAAA,UACJ,KAAK,mBACH,OACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,IAAA,CACD;AAAA,UACH,KAAK,mBACH,OACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAgBD;AAAA;AAAA;AAAA,EAGT;AACF;AApE8D,gBAAA;AAAA,EAA3D,SAAS,EAAC,MAAM,SAAS,WAAW,sBAAqB;AAAA,GAD/C,SACiD,WAAA,oBAAA,CAAA;AAEjC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,SAAQ;AAAA,GAHd,SAGgB,WAAA,OAAA,CAAA;AAHhB,WAAN,gBAAA;AAAA,EADN,cAAc,WAAW;AAAA,GACb,QAAA;"}

package/dist/storybook-util.d.ts

@@ -0,0 +1,11 @@
+import './icons/icon-01-placeholder';
+import './icons/icon-01-search';
+import './icons/icon-06-radar';
+import './icons/icon-04-day';
+import './icons/icon-04-brilliance-low';
+import './icons/icon-04-brilliance-high';
+import './icons/icon-06-ship';
+import { TemplateResult } from 'lit';
+export declare const iconIds: string[];
+export declare function iconIdToIconHtml(id: string, attributes?: Record<string, string>): TemplateResult;
+//# sourceMappingURL=storybook-util.d.ts.map

package/dist/storybook-util.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"storybook-util.d.ts","sourceRoot":"","sources":["../src/storybook-util.ts"],"names":[],"mappings":"AAAA,OAAO,6BAA6B,CAAC;AACrC,OAAO,wBAAwB,CAAC;AAChC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,gCAAgC,CAAC;AACxC,OAAO,iCAAiC,CAAC;AACzC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,EAAC,cAAc,EAAO,MAAM,KAAK,CAAC;AAGzC,eAAO,MAAM,OAAO,UAQZ,CAAC;AAET,wBAAgB,gBAAgB,CAC9B,EAAE,EAAE,MAAM,EACV,UAAU,GAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAM,GACtC,cAAc,CAyBhB"}

package/dist/storybook-util.js

@@ -0,0 +1,49 @@
+import "./icons/icon-01-placeholder.js";
+import "./icons/icon-01-search.js";
+import "./icons/icon-06-radar.js";
+import "./icons/icon-04-day.js";
+import "./icons/icon-04-brilliance-low.js";
+import "./icons/icon-04-brilliance-high.js";
+import "./icons/icon-06-ship.js";
+import { html } from "lit";
+import { spread } from "./node_modules/@open-wc/lit-helpers/src/spread.js";
+const iconIds = [
+  "01-placeholder",
+  "01-search",
+  "04-brilliance-low",
+  "04-brilliance-high",
+  "06-radar",
+  "04-day",
+  "06-ship"
+].sort();
+function iconIdToIconHtml(id, attributes = {}) {
+  switch (id) {
+    case "01-placeholder":
+      return html`<obi-01-placeholder
+        ${spread(attributes)}
+      ></obi-01-placeholder>`;
+    case "01-search":
+      return html`<obi-01-search ${spread(attributes)}></obi-01-search>`;
+    case "04-day":
+      return html`<obi-04-day ${spread(attributes)}></obi-04-day>`;
+    case "04-brilliance-low":
+      return html`<obi-04-brilliance-low
+        ${spread(attributes)}
+      ></obi-04-brilliance-low>`;
+    case "04-brilliance-high":
+      return html`<obi-04-brilliance-high
+        ${spread(attributes)}
+      ></obi-04-brilliance-high>`;
+    case "06-radar":
+      return html`<obi-06-radar ${spread(attributes)}></obi-06-radar>`;
+    case "06-ship":
+      return html`<obi-06-ship ${spread(attributes)}></obi-06-ship>`;
+    default:
+      throw new Error(`Unknown icon id: ${id}`);
+  }
+}
+export {
+  iconIdToIconHtml,
+  iconIds
+};
+//# sourceMappingURL=storybook-util.js.map

package/dist/storybook-util.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"storybook-util.js","sources":["../src/storybook-util.ts"],"sourcesContent":["import './icons/icon-01-placeholder';\nimport './icons/icon-01-search';\nimport './icons/icon-06-radar';\nimport './icons/icon-04-day';\nimport './icons/icon-04-brilliance-low';\nimport './icons/icon-04-brilliance-high';\nimport './icons/icon-06-ship';\nimport {TemplateResult, html} from 'lit';\nimport {spread} from '@open-wc/lit-helpers';\n\nexport const iconIds = [\n  '01-placeholder',\n  '01-search',\n  '04-brilliance-low',\n  '04-brilliance-high',\n  '06-radar',\n  '04-day',\n  '06-ship',\n].sort();\n\nexport function iconIdToIconHtml(\n  id: string,\n  attributes: Record<string, string> = {}\n): TemplateResult {\n  switch (id) {\n    case '01-placeholder':\n      return html`<obi-01-placeholder\n        ${spread(attributes)}\n      ></obi-01-placeholder>`;\n    case '01-search':\n      return html`<obi-01-search ${spread(attributes)}></obi-01-search>`;\n    case '04-day':\n      return html`<obi-04-day ${spread(attributes)}></obi-04-day>`;\n    case '04-brilliance-low':\n      return html`<obi-04-brilliance-low\n        ${spread(attributes)}\n      ></obi-04-brilliance-low>`;\n    case '04-brilliance-high':\n      return html`<obi-04-brilliance-high\n        ${spread(attributes)}\n      ></obi-04-brilliance-high>`;\n    case '06-radar':\n      return html`<obi-06-radar ${spread(attributes)}></obi-06-radar>`;\n    case '06-ship':\n      return html`<obi-06-ship ${spread(attributes)}></obi-06-ship>`;\n    default:\n      throw new Error(`Unknown icon id: ${id}`);\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;AAUO,MAAM,UAAU;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,EAAE,KAAK;AAEA,SAAS,iBACd,IACA,aAAqC,IACrB;AAChB,UAAQ,IAAI;AAAA,IACV,KAAK;AACI,aAAA;AAAA,UACH,OAAO,UAAU,CAAC;AAAA;AAAA,IAExB,KAAK;AACI,aAAA,sBAAsB,OAAO,UAAU,CAAC;AAAA,IACjD,KAAK;AACI,aAAA,mBAAmB,OAAO,UAAU,CAAC;AAAA,IAC9C,KAAK;AACI,aAAA;AAAA,UACH,OAAO,UAAU,CAAC;AAAA;AAAA,IAExB,KAAK;AACI,aAAA;AAAA,UACH,OAAO,UAAU,CAAC;AAAA;AAAA,IAExB,KAAK;AACI,aAAA,qBAAqB,OAAO,UAAU,CAAC;AAAA,IAChD,KAAK;AACI,aAAA,oBAAoB,OAAO,UAAU,CAAC;AAAA,IAC/C;AACE,YAAM,IAAI,MAAM,oBAAoB,EAAE,EAAE;AAAA,EAC5C;AACF;"}

package/dist/svghelpers/circle.d.ts

@@ -0,0 +1,13 @@
+export declare function circle(id: string, data: {
+    radius: number;
+    strokeWidth: number;
+    strokeColor: string;
+    strokePosition: 'inside' | 'outside' | 'center';
+    fillColor: string;
+}): import("lit-html").TemplateResult<2>;
+export declare function ringOutside(id: string, data: {
+    radius: number;
+    strokeWidth: number;
+    strokeColor: string;
+}): import("lit-html").TemplateResult<2>;
+//# sourceMappingURL=circle.d.ts.map

package/dist/svghelpers/circle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"circle.d.ts","sourceRoot":"","sources":["../../src/svghelpers/circle.ts"],"names":[],"mappings":"AAEA,wBAAgB,MAAM,CACpB,EAAE,EAAE,MAAM,EACV,IAAI,EAAE;IACJ,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAC;IAChD,SAAS,EAAE,MAAM,CAAC;CACnB,wCAmCF;AAED,wBAAgB,WAAW,CACzB,EAAE,EAAE,MAAM,EACV,IAAI,EAAE;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAC,wCAejE"}