@oicl/openbridge-webcomponents 0.0.14 → 0.0.15

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

@@ -1,6 +1,11 @@
 import { css, LitElement, html, svg } from "lit";
 import { property, customElement } from "lit/decorators.js";
 import { Size, InstrumentState } from "../types.js";
+import { renderAdvice } from "./advice.js";
+import { AdviceState } from "../watch/advice.js";
+import { TickmarkStyle } from "../watch/tickmark.js";
+import { singleSidedTickmark } from "./tickmark.js";
+import { PropellerType, topPropeller, bottomPropeller } from "./propeller.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -17,19 +22,35 @@ let ObcThruster = class extends LitElement {
     super(...arguments);
     this.size = Size.medium;
     this.thrust = 0;
+    this.touching = false;
     this.atSetpoint = false;
-    this.setpointAtZero = false;
+    this.disableAutoAtSetpoint = false;
+    this.autoAtSetpointDeadband = 1;
+    this.setpointAtZeroDeadband = 0.5;
     this.state = InstrumentState.inCommand;
     this.tunnel = false;
-    this.loading = false;
-    this.off = false;
+    this.singleSided = false;
+    this.singleDirection = false;
+    this.singleDirectionHalfSize = false;
+    this.advices = [];
+    this.topPropeller = PropellerType.none;
+    this.bottomPropeller = PropellerType.none;
   }
   render() {
     return html`<div class="container">
       ${thruster(this.thrust, this.setpoint, this.state, {
       atSetpoint: this.atSetpoint,
       tunnel: this.tunnel,
-      setpointAtZero: this.setpointAtZero
+      setpointAtZeroDeadband: this.setpointAtZeroDeadband,
+      autoAtSetpoint: !this.disableAutoAtSetpoint,
+      autoSetpointDeadband: this.autoAtSetpointDeadband,
+      touching: this.touching,
+      singleSided: this.singleSided,
+      advices: this.advices,
+      singleDirection: this.singleDirection,
+      singleDirectionHalfSize: this.singleDirectionHalfSize,
+      topPropeller: this.topPropeller,
+      bottomPropeller: this.bottomPropeller
     })}
     </div>`;
   }
@@ -55,11 +76,20 @@ __decorateClass([
   property({ type: Number })
 ], ObcThruster.prototype, "setpoint", 2);
 __decorateClass([
-  property({ type: Boolean, attribute: "at-setpoint" })
+  property({ type: Boolean })
+], ObcThruster.prototype, "touching", 2);
+__decorateClass([
+  property({ type: Boolean })
 ], ObcThruster.prototype, "atSetpoint", 2);
 __decorateClass([
-  property({ type: Boolean, attribute: "setpoint-at-zero" })
-], ObcThruster.prototype, "setpointAtZero", 2);
+  property({ type: Boolean })
+], ObcThruster.prototype, "disableAutoAtSetpoint", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcThruster.prototype, "autoAtSetpointDeadband", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcThruster.prototype, "setpointAtZeroDeadband", 2);
 __decorateClass([
   property({ type: String })
 ], ObcThruster.prototype, "state", 2);
@@ -68,75 +98,141 @@ __decorateClass([
 ], ObcThruster.prototype, "tunnel", 2);
 __decorateClass([
   property({ type: Boolean })
-], ObcThruster.prototype, "loading", 2);
+], ObcThruster.prototype, "singleSided", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcThruster.prototype, "singleDirection", 2);
 __decorateClass([
   property({ type: Boolean })
-], ObcThruster.prototype, "off", 2);
+], ObcThruster.prototype, "singleDirectionHalfSize", 2);
+__decorateClass([
+  property({ type: Array })
+], ObcThruster.prototype, "advices", 2);
+__decorateClass([
+  property({ type: String })
+], ObcThruster.prototype, "topPropeller", 2);
+__decorateClass([
+  property({ type: String })
+], ObcThruster.prototype, "bottomPropeller", 2);
 ObcThruster = __decorateClass([
   customElement("obc-thruster")
 ], ObcThruster);
-const containerHeight = 134;
-function thrusterTop(value, colors, hideTicks) {
+function thrusterTop(height, 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"/>
+      <path transform="translate(0 -2)" d="M -44 0  v -${height - 8}  a 8 8 0 0 1 8 -8 h 72 a 8 8 0 0 1 8 8 V 0 Z" 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 track = svg`<rect width="40" height=${height} x="-20" y=${-2 - height} 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;
+  const nTicks = 2;
+  const delta = height / 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"/>`
+        svg`<line x1="-24" x2="-44" 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"/>`
+        svg`<line  x1="24"  x2="44" 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"/>`;
+  const barHeight = height * value / 100;
+  const barY = -2 - barHeight;
+  const bar = svg`<rect width="40" height=${barHeight} x="-20" y=${barY} fill=${colors.box} stroke=${colors.box} vector-effect="non-scaling-stroke"/>`;
   return [container, track, tickmarks, bar];
 }
-function thrusterBottom(value, colors, hideTicks) {
+function thrusterTopSingleSided(height, value, colors, hideTicks, advice, flipAdicePattern = false) {
+  const container = svg`
+      <path transform="translate(0 -2)" d="M -32 0  v -${height - 8}  a 8 8 0 0 1 8 -8 h 48 a 8 8 0 0 1 8 8 V 0 Z" fill=${colors.container} stroke="var(--instrument-frame-tertiary-color)" vector-effect="non-scaling-stroke"/>
+  `;
+  const track = svg`
+      <path transform="translate(0 -2)" d="M -32 0  v -${height - 8}  a 8 8 0 0 1 8 -8 h 32 V 0 Z" fill="var(--instrument-frame-secondary-color)" stroke="var(--instrument-frame-tertiary-color)" vector-effect="non-scaling-stroke"/>
+  `;
+  const tickmarks = hideTicks ? [] : [singleSidedTickmark(height, 50, TickmarkStyle.hinted)];
+  const barHeight = height * value / 100;
+  const barY = -2 - barHeight;
+  const maskId = flipAdicePattern ? "thrusterBarMask1" : "thrusterBarMask2";
+  const bar = svg`
+  <defs>
+  <mask id=${maskId}>
+  <path transform="translate(0 -2)" d="M -32 0  v -${height - 8}  a 8 8 0 0 1 8 -8 h 48 a 8 8 0 0 1 8 8 V 0 Z" fill="white" stroke="white" vector-effect="non-scaling-stroke"/>
+  </defs>
+  <rect mask="url(#${maskId})" width="40" height=${barHeight} x="-32" y=${barY} fill=${colors.box} stroke=${colors.box} vector-effect="non-scaling-stroke"/>`;
+  const advicesSvg = advice.map(
+    (a) => renderAdvice(height, a, flipAdicePattern)
+  );
+  return [container, track, tickmarks, bar, advicesSvg];
+}
+function thrusterBottom(height, value, colors, hideTicks) {
   const container = svg`
       <g transform="rotate(180)">
-        ${thrusterTop(value, colors, hideTicks)}
+        ${thrusterTop(height, 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 thrusterBottomSingleSided(height, value, colors, hideTicks, advices) {
+  const container = svg`
+      <g transform="rotate(180) scale(-1,1)">
+        ${thrusterTopSingleSided(height, value, colors, hideTicks, advices, true)}
+      </g>
+  `;
+  return container;
 }
-function setpointSvg(value, setpointAtZero, colors) {
-  const y = -12 + -(setpointAtZero ? 0 : Math.sign(value) * (containerHeight * Math.abs(value) / 100 + 2));
+function setpointSvg(height, value, setpointAtZero, colors, options) {
+  const y = -(setpointAtZero ? 0 : Math.sign(value) * (height * Math.abs(value) / 100 + 2));
+  const extra = options.singleSided ? -12 : 0;
+  let path;
+  if (options.inCommand) {
+    path = "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";
+  } else {
+    path = "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";
+  }
   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"/>
+    <defs>
+      <g id="thrusterSetpoint">
+        <path fill-rule="evenodd" clip-rule="evenodd" transform="translate(24 -12) rotate(90)" d=${path} vector-effect="non-scaling-stroke"/>
+      </g>
+      <mask id="thrusterSetpointMask">
+        <rect x="-20" y="-20" width="50" height="50" fill="white" />
+        <use href="#thrusterSetpoint" fill="black" />
+      </mask>
+    </defs>
+  <g transform="translate(0 ${y})">
+    <use href="#thrusterSetpoint" fill=${colors.fill} stroke="none" transform="translate(${28 + extra} 0)"/>
+    <use href="#thrusterSetpoint" mask="url(#thrusterSetpointMask)" transform="translate(${28 + extra} 0)" fill="none" stroke=${colors.stroke} stroke-width="2" stroke-linejoin="round" vector-effect="non-scaling-stroke"/>
+    ${options.singleSided ? null : svg`
+    <use href="#thrusterSetpoint" transform="rotate(180) translate(28 0)" fill=${colors.fill} stroke="none"/>
+    <use href="#thrusterSetpoint" transform="rotate(180) translate(28 0)" mask="url(#thrusterSetpointMask)" fill="none" stroke=${colors.stroke} stroke-width="2" stroke-linejoin="round" vector-effect="non-scaling-stroke"/>
+      `}
   </g>
-`;
+  `;
 }
 function thruster(thrust, setpoint, state, options) {
+  if (!options.singleSided && options.advices.length > 0) {
+    throw new Error("Double sided thruster does not support advice");
+  }
+  if (options.autoAtSetpoint && setpoint !== void 0) {
+    options.atSetpoint = Math.abs(thrust - setpoint) < options.autoSetpointDeadband;
+  }
+  if (options.touching) {
+    options.atSetpoint = false;
+  }
   let boxColor = "var(--instrument-enhanced-secondary-color)";
-  let setPointColor = boxColor;
-  let arrowColor = "var(--instrument-tick-mark-primary-color)";
+  let setPointColor = "var(--instrument-enhanced-primary-color)";
+  let arrowColor = "var(--instrument-regular-secondary-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)";
+    setPointColor = boxColor;
   }
   if (state === InstrumentState.active) {
     boxColor = "var(--instrument-regular-secondary-color)";
     zeroLineColor = "var(--instrument-regular-secondary-color)";
-    setPointColor = boxColor;
+    setPointColor = "var(--instrument-regular-primary-color)";
     arrowColor = "var(--instrument-regular-secondary-color)";
     if (options.atSetpoint) {
-      setPointColor = "var(--instrument-frame-tertiary-color)";
+      setPointColor = boxColor;
     }
   } else if (state === InstrumentState.loading) {
     boxColor = "transparent";
@@ -160,28 +256,90 @@ function thruster(thrust, setpoint, state, options) {
       setpoint = 0;
     }
   }
-  const centerLine = svg`
-    <rect x="-32" y="-2" width="64" height="4" fill=${zeroLineColor} stroke=${zeroLineColor}/>
+  const centerLine = options.singleSided ? svg`<rect x="-32" y="-2" width="64" height="4" stroke-width="1" fill=${zeroLineColor} stroke=${zeroLineColor} vector-effect="non-scaling-stroke"/>` : svg`
+    <rect x="-44" y="-2" width="88" height="4" stroke-width="1" fill=${zeroLineColor} stroke=${zeroLineColor} vector-effect="non-scaling-stroke"/>
   `;
-  const thrusterSvg = [
-    thrusterTop(
-      Math.max(thrust, 0),
-      { box: boxColor, container: containerBackgroundColor },
-      hideTicks
-    ),
-    thrusterBottom(
-      Math.max(-thrust, 0),
-      { box: boxColor, container: containerBackgroundColor },
-      hideTicks
-    ),
-    centerLine
-  ];
+  const setpointAtZero = Math.abs(setpoint || 0) < options.setpointAtZeroDeadband;
+  const advices = options.advices.map((a) => {
+    const triggered = thrust >= a.min && thrust <= a.max;
+    let state2;
+    if (triggered) {
+      state2 = AdviceState.triggered;
+    } else if (a.hinted) {
+      state2 = AdviceState.hinted;
+    } else {
+      state2 = AdviceState.regular;
+    }
+    return {
+      min: a.min,
+      max: a.max,
+      type: a.type,
+      state: state2
+    };
+  });
+  const topAdvices = advices.filter((a) => a.min >= 0);
+  const bottomAdvices = advices.filter((a) => a.max <= 0).map((a) => ({ ...a, min: -a.max, max: -a.min }));
+  const thrusterSvg = [];
+  const baseheight = options.topPropeller === PropellerType.none ? 134 : 106;
+  const height = options.singleDirection ? baseheight * 2 : baseheight;
+  if (options.singleSided) {
+    thrusterSvg.push(
+      thrusterTopSingleSided(
+        height,
+        Math.max(thrust, 0),
+        { box: boxColor, container: containerBackgroundColor },
+        hideTicks,
+        topAdvices
+      )
+    );
+    if (!(options.singleDirection || options.singleDirectionHalfSize)) {
+      thrusterSvg.push(
+        thrusterBottomSingleSided(
+          height,
+          Math.max(-thrust, 0),
+          { box: boxColor, container: containerBackgroundColor },
+          hideTicks,
+          bottomAdvices
+        )
+      );
+    }
+    thrusterSvg.push(centerLine);
+  } else {
+    thrusterSvg.push(
+      thrusterTop(
+        height,
+        Math.max(thrust, 0),
+        { box: boxColor, container: containerBackgroundColor },
+        hideTicks
+      )
+    );
+    if (!options.singleDirection) {
+      thrusterSvg.push(
+        thrusterBottom(
+          height,
+          Math.max(-thrust, 0),
+          { box: boxColor, container: containerBackgroundColor },
+          hideTicks
+        )
+      );
+    }
+    thrusterSvg.push(centerLine);
+  }
   if (setpoint !== void 0) {
     thrusterSvg.push(
-      setpointSvg(setpoint, options.setpointAtZero, {
-        fill: setPointColor,
-        stroke: "var(--border-silhouette-color)"
-      })
+      setpointSvg(
+        height,
+        setpoint,
+        setpointAtZero,
+        {
+          fill: setPointColor,
+          stroke: "var(--border-silhouette-color)"
+        },
+        {
+          inCommand: state === InstrumentState.inCommand,
+          singleSided: options.singleSided
+        }
+      )
     );
   }
   if (options.tunnel) {
@@ -192,9 +350,21 @@ function thruster(thrust, setpoint, state, options) {
         </g>
       </svg>`;
   } else {
-    thrusterSvg.push(arrowTop(arrowColor));
+    let viewBox = "-80 -160 160 320";
+    let y = -160;
+    if (options.singleDirection) {
+      viewBox = "-80 -300 160 320";
+      y = -320;
+    }
+    const top = topPropeller(height, arrowColor, options.topPropeller);
+    const bottom = bottomPropeller(
+      options.singleDirectionHalfSize ? 0.5 : height,
+      options.bottomPropeller
+    );
     return svg`
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="-64 -160 128 320" x="-64" y="-160">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox=${viewBox} x="-80" y=${y} width="160" height="320">
+      ${top}
+      ${bottom}
       ${thrusterSvg}
     </svg>
   `;

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

@@ -1 +1 @@
-{"version":3,"file":"thruster.js","sources":["../../../src/navigation-instruments/thruster/thruster.ts"],"sourcesContent":["import {LitElement, svg, html, css} 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 html`<div class=\"container\">\n      ${thruster(this.thrust, this.setpoint, this.state, {\n        atSetpoint: this.atSetpoint,\n        tunnel: this.tunnel,\n        setpointAtZero: this.setpointAtZero,\n      })}\n    </div>`;\n  }\n\n  static override styles = css`\n    .container {\n      height: 100%;\n      width: 100%;\n    }\n\n    .container > svg {\n      height: 100%;\n      width: 100%;\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 = [\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  if (setpoint !== undefined) {\n    thrusterSvg.push(\n      setpointSvg(setpoint, options.setpointAtZero, {\n        fill: setPointColor,\n        stroke: 'var(--border-silhouette-color)',\n      })\n    );\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\">\n        <g transform=\"rotate(90)\">\n          ${thrusterSvg}\n        </g>\n      </svg>`;\n  } else {\n    thrusterSvg.push(arrowTop(arrowColor));\n    return svg`\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"-64 -160 128 320\" x=\"-64\" y=\"-160\">\n      ${thrusterSvg}\n    </svg>\n  `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-thruster': ObcThruster;\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"thruster.js","sources":["../../../src/navigation-instruments/thruster/thruster.ts"],"sourcesContent":["import {LitElement, svg, html, css} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {Size, InstrumentState} from '../types';\nimport {LinearAdvice, LinearAdviceRaw, renderAdvice} from './advice';\nimport {AdviceState} from '../watch/advice';\nimport {TickmarkStyle} from '../watch/tickmark';\nimport {singleSidedTickmark} from './tickmark';\nimport {PropellerType, bottomPropeller, topPropeller} from './propeller';\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 * @prop {boolean} touching - Highlight the thruster when the lever is being touched\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}) touching: boolean = false;\n  @property({type: Boolean}) atSetpoint: boolean = false;\n  @property({type: Boolean}) disableAutoAtSetpoint: boolean = false;\n  @property({type: Number}) autoAtSetpointDeadband: number = 1;\n  @property({type: Number}) setpointAtZeroDeadband: number = 0.5;\n  @property({type: String}) state: InstrumentState = InstrumentState.inCommand;\n  @property({type: Boolean}) tunnel: boolean = false;\n  @property({type: Boolean}) singleSided: boolean = false;\n  @property({type: Boolean}) singleDirection: boolean = false;\n  @property({type: Boolean}) singleDirectionHalfSize: boolean = false;\n  @property({type: Array}) advices: LinearAdvice[] = [];\n  @property({type: String}) topPropeller: PropellerType = PropellerType.none;\n  @property({type: String}) bottomPropeller: PropellerType = PropellerType.none;\n\n  override render() {\n    return html`<div class=\"container\">\n      ${thruster(this.thrust, this.setpoint, this.state, {\n        atSetpoint: this.atSetpoint,\n        tunnel: this.tunnel,\n        setpointAtZeroDeadband: this.setpointAtZeroDeadband,\n        autoAtSetpoint: !this.disableAutoAtSetpoint,\n        autoSetpointDeadband: this.autoAtSetpointDeadband,\n        touching: this.touching,\n        singleSided: this.singleSided,\n        advices: this.advices,\n        singleDirection: this.singleDirection,\n        singleDirectionHalfSize: this.singleDirectionHalfSize,\n        topPropeller: this.topPropeller,\n        bottomPropeller: this.bottomPropeller,\n      })}\n    </div>`;\n  }\n\n  static override styles = css`\n    .container {\n      height: 100%;\n      width: 100%;\n    }\n\n    .container > svg {\n      height: 100%;\n      width: 100%;\n    }\n  `;\n}\n\nfunction thrusterTop(\n  height: number,\n  value: number,\n  colors: {box: string; container: string},\n  hideTicks: boolean\n) {\n  const container = svg`\n      <path transform=\"translate(0 -2)\" d=\"M -44 0  v -${height - 8}  a 8 8 0 0 1 8 -8 h 72 a 8 8 0 0 1 8 8 V 0 Z\" fill=${colors.container} stroke=\"var(--instrument-frame-tertiary-color)\" vector-effect=\"non-scaling-stroke\"/>\n  `;\n  const track = svg`<rect width=\"40\" height=${height} x=\"-20\" y=${-2 - height} 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 = 2;\n  const delta = height / nTicks;\n  if (!hideTicks) {\n    for (let i = 1; i < nTicks; i++) {\n      tickmarks.push(\n        svg`<line x1=\"-24\" x2=\"-44\" 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=\"24\"  x2=\"44\" 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 = (height * value) / 100;\n  const barY = -2 - barHeight;\n  const bar = svg`<rect width=\"40\" height=${barHeight} x=\"-20\" y=${barY} fill=${colors.box} stroke=${colors.box} vector-effect=\"non-scaling-stroke\"/>`;\n\n  return [container, track, tickmarks, bar];\n}\n\nfunction thrusterTopSingleSided(\n  height: number,\n  value: number,\n  colors: {box: string; container: string},\n  hideTicks: boolean,\n  advice: LinearAdviceRaw[],\n  flipAdicePattern: boolean = false\n) {\n  const container = svg`\n      <path transform=\"translate(0 -2)\" d=\"M -32 0  v -${height - 8}  a 8 8 0 0 1 8 -8 h 48 a 8 8 0 0 1 8 8 V 0 Z\" fill=${colors.container} stroke=\"var(--instrument-frame-tertiary-color)\" vector-effect=\"non-scaling-stroke\"/>\n  `;\n  const track = svg`\n      <path transform=\"translate(0 -2)\" d=\"M -32 0  v -${height - 8}  a 8 8 0 0 1 8 -8 h 32 V 0 Z\" fill=\"var(--instrument-frame-secondary-color)\" stroke=\"var(--instrument-frame-tertiary-color)\" vector-effect=\"non-scaling-stroke\"/>\n  `;\n\n  const tickmarks = hideTicks\n    ? []\n    : [singleSidedTickmark(height, 50, TickmarkStyle.hinted)];\n\n  const barHeight = (height * value) / 100;\n  const barY = -2 - barHeight;\n  const maskId = flipAdicePattern ? 'thrusterBarMask1' : 'thrusterBarMask2';\n  const bar = svg`\n  <defs>\n  <mask id=${maskId}>\n  <path transform=\"translate(0 -2)\" d=\"M -32 0  v -${height - 8}  a 8 8 0 0 1 8 -8 h 48 a 8 8 0 0 1 8 8 V 0 Z\" fill=\"white\" stroke=\"white\" vector-effect=\"non-scaling-stroke\"/>\n  </defs>\n  <rect mask=\"url(#${maskId})\" width=\"40\" height=${barHeight} x=\"-32\" y=${barY} fill=${colors.box} stroke=${colors.box} vector-effect=\"non-scaling-stroke\"/>`;\n  const advicesSvg = advice.map((a) =>\n    renderAdvice(height, a, flipAdicePattern)\n  );\n\n  return [container, track, tickmarks, bar, advicesSvg];\n}\n\nfunction thrusterBottom(\n  height: number,\n  value: number,\n  colors: {box: string; container: string},\n  hideTicks: boolean\n) {\n  const container = svg`\n      <g transform=\"rotate(180)\">\n        ${thrusterTop(height, value, colors, hideTicks)}\n      </g>\n  `;\n  return container;\n}\n\nfunction thrusterBottomSingleSided(\n  height: number,\n  value: number,\n  colors: {box: string; container: string},\n  hideTicks: boolean,\n  advices: LinearAdviceRaw[]\n) {\n  const container = svg`\n      <g transform=\"rotate(180) scale(-1,1)\">\n        ${thrusterTopSingleSided(height, value, colors, hideTicks, advices, true)}\n      </g>\n  `;\n  return container;\n}\n\nfunction setpointSvg(\n  height: number,\n  value: number,\n  setpointAtZero: boolean,\n  colors: {fill: string; stroke: string},\n  options: {\n    inCommand: boolean;\n    singleSided: boolean;\n  }\n) {\n  const y = -(setpointAtZero\n    ? 0\n    : Math.sign(value) * ((height * Math.abs(value)) / 100 + 2));\n  const extra = options.singleSided ? -12 : 0;\n  let path;\n  if (options.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=\"thrusterSetpoint\">\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=\"thrusterSetpointMask\">\n        <rect x=\"-20\" y=\"-20\" width=\"50\" height=\"50\" fill=\"white\" />\n        <use href=\"#thrusterSetpoint\" fill=\"black\" />\n      </mask>\n    </defs>\n  <g transform=\"translate(0 ${y})\">\n    <use href=\"#thrusterSetpoint\" fill=${colors.fill} stroke=\"none\" transform=\"translate(${28 + extra} 0)\"/>\n    <use href=\"#thrusterSetpoint\" mask=\"url(#thrusterSetpointMask)\" transform=\"translate(${28 + extra} 0)\" fill=\"none\" stroke=${colors.stroke} stroke-width=\"2\" stroke-linejoin=\"round\" vector-effect=\"non-scaling-stroke\"/>\n    ${\n      options.singleSided\n        ? null\n        : svg`\n    <use href=\"#thrusterSetpoint\" transform=\"rotate(180) translate(28 0)\" fill=${colors.fill} stroke=\"none\"/>\n    <use href=\"#thrusterSetpoint\" transform=\"rotate(180) translate(28 0)\" mask=\"url(#thrusterSetpointMask)\" fill=\"none\" stroke=${colors.stroke} stroke-width=\"2\" stroke-linejoin=\"round\" vector-effect=\"non-scaling-stroke\"/>\n      `\n    }\n  </g>\n  `;\n}\n\nexport function thruster(\n  thrust: number,\n  setpoint: number | undefined,\n  state: InstrumentState,\n  options: {\n    atSetpoint: boolean;\n    tunnel: boolean;\n    singleSided: boolean;\n    singleDirection: boolean;\n    singleDirectionHalfSize: boolean;\n    setpointAtZeroDeadband: number;\n    autoAtSetpoint: boolean;\n    autoSetpointDeadband: number;\n    touching: boolean;\n    advices: LinearAdvice[];\n    topPropeller: PropellerType;\n    bottomPropeller: PropellerType;\n  }\n) {\n  if (!options.singleSided && options.advices.length > 0) {\n    throw new Error('Double sided thruster does not support advice');\n  }\n\n  if (options.autoAtSetpoint && setpoint !== undefined) {\n    options.atSetpoint =\n      Math.abs(thrust - setpoint) < options.autoSetpointDeadband;\n  }\n\n  if (options.touching) {\n    options.atSetpoint = false;\n  }\n\n  let boxColor = 'var(--instrument-enhanced-secondary-color)';\n  let setPointColor = 'var(--instrument-enhanced-primary-color)';\n  let arrowColor = 'var(--instrument-regular-secondary-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 = boxColor;\n  }\n  if (state === InstrumentState.active) {\n    boxColor = 'var(--instrument-regular-secondary-color)';\n    zeroLineColor = 'var(--instrument-regular-secondary-color)';\n    setPointColor = 'var(--instrument-regular-primary-color)';\n    arrowColor = 'var(--instrument-regular-secondary-color)';\n    if (options.atSetpoint) {\n      setPointColor = boxColor;\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 = options.singleSided\n    ? svg`<rect x=\"-32\" y=\"-2\" width=\"64\" height=\"4\" stroke-width=\"1\" fill=${zeroLineColor} stroke=${zeroLineColor} vector-effect=\"non-scaling-stroke\"/>`\n    : svg`\n    <rect x=\"-44\" y=\"-2\" width=\"88\" height=\"4\" stroke-width=\"1\" fill=${zeroLineColor} stroke=${zeroLineColor} vector-effect=\"non-scaling-stroke\"/>\n  `;\n\n  const setpointAtZero =\n    Math.abs(setpoint || 0) < options.setpointAtZeroDeadband;\n\n  const advices: LinearAdviceRaw[] = options.advices.map((a) => {\n    const triggered = thrust >= a.min && thrust <= a.max;\n    let state: AdviceState;\n    if (triggered) {\n      state = AdviceState.triggered;\n    } else if (a.hinted) {\n      state = AdviceState.hinted;\n    } else {\n      state = AdviceState.regular;\n    }\n    return {\n      min: a.min,\n      max: a.max,\n      type: a.type,\n      state,\n    };\n  });\n\n  const topAdvices = advices.filter((a) => a.min >= 0);\n  const bottomAdvices = advices\n    .filter((a) => a.max <= 0)\n    .map((a) => ({...a, min: -a.max, max: -a.min}));\n\n  const thrusterSvg = [];\n  const baseheight = options.topPropeller === PropellerType.none ? 134 : 106;\n  const height = options.singleDirection ? baseheight * 2 : baseheight;\n  if (options.singleSided) {\n    thrusterSvg.push(\n      thrusterTopSingleSided(\n        height,\n        Math.max(thrust, 0),\n        {box: boxColor, container: containerBackgroundColor},\n        hideTicks,\n        topAdvices\n      )\n    );\n    if (!(options.singleDirection || options.singleDirectionHalfSize)) {\n      thrusterSvg.push(\n        thrusterBottomSingleSided(\n          height,\n          Math.max(-thrust, 0),\n          {box: boxColor, container: containerBackgroundColor},\n          hideTicks,\n          bottomAdvices\n        )\n      );\n    }\n    thrusterSvg.push(centerLine);\n  } else {\n    thrusterSvg.push(\n      thrusterTop(\n        height,\n        Math.max(thrust, 0),\n        {box: boxColor, container: containerBackgroundColor},\n        hideTicks\n      )\n    );\n    if (!options.singleDirection) {\n      thrusterSvg.push(\n        thrusterBottom(\n          height,\n          Math.max(-thrust, 0),\n          {box: boxColor, container: containerBackgroundColor},\n          hideTicks\n        )\n      );\n    }\n    thrusterSvg.push(centerLine);\n  }\n  if (setpoint !== undefined) {\n    thrusterSvg.push(\n      setpointSvg(\n        height,\n        setpoint,\n        setpointAtZero,\n        {\n          fill: setPointColor,\n          stroke: 'var(--border-silhouette-color)',\n        },\n        {\n          inCommand: state === InstrumentState.inCommand,\n          singleSided: options.singleSided,\n        }\n      )\n    );\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\">\n        <g transform=\"rotate(90)\">\n          ${thrusterSvg}\n        </g>\n      </svg>`;\n  } else {\n    let viewBox = '-80 -160 160 320';\n    let y = -160;\n    if (options.singleDirection) {\n      viewBox = '-80 -300 160 320';\n      y = -320;\n    }\n    const top = topPropeller(height, arrowColor, options.topPropeller);\n    const bottom = bottomPropeller(\n      options.singleDirectionHalfSize ? 0.5 : height,\n      options.bottomPropeller\n    );\n    return svg`\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=${viewBox} x=\"-80\" y=${y} width=\"160\" height=\"320\">\n      ${top}\n      ${bottom}\n      ${thrusterSvg}\n    </svg>\n  `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-thruster': ObcThruster;\n  }\n}\n"],"names":["state"],"mappings":";;;;;;;;;;;;;;;;;;;AAiBa,IAAA,cAAN,cAA0B,WAAW;AAAA,EAArC,cAAA;AAAA,UAAA,GAAA,SAAA;AACqB,SAAA,OAAa,KAAK;AACD,SAAA,SAAA;AAEI,SAAA,WAAA;AACE,SAAA,aAAA;AACW,SAAA,wBAAA;AACD,SAAA,yBAAA;AACA,SAAA,yBAAA;AACjC,SAAA,QAAyB,gBAAgB;AACtB,SAAA,SAAA;AACK,SAAA,cAAA;AACI,SAAA,kBAAA;AACQ,SAAA,0BAAA;AACrC,SAAA,UAA0B;AACzB,SAAA,eAA8B,cAAc;AAC5C,SAAA,kBAAiC,cAAc;AAAA,EAAA;AAAA,EAEhE,SAAS;AACT,WAAA;AAAA,QACH,SAAS,KAAK,QAAQ,KAAK,UAAU,KAAK,OAAO;AAAA,MACjD,YAAY,KAAK;AAAA,MACjB,QAAQ,KAAK;AAAA,MACb,wBAAwB,KAAK;AAAA,MAC7B,gBAAgB,CAAC,KAAK;AAAA,MACtB,sBAAsB,KAAK;AAAA,MAC3B,UAAU,KAAK;AAAA,MACf,aAAa,KAAK;AAAA,MAClB,SAAS,KAAK;AAAA,MACd,iBAAiB,KAAK;AAAA,MACtB,yBAAyB,KAAK;AAAA,MAC9B,cAAc,KAAK;AAAA,MACnB,iBAAiB,KAAK;AAAA,IAAA,CACvB,CAAC;AAAA;AAAA,EAEN;AAaF;AAhDa,YAqCK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AApCC,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;AACC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,SAAQ;AAAA,GAJd,YAIgB,WAAA,YAAA,CAAA;AACA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,SAAQ;AAAA,GALd,YAKgB,WAAA,cAAA,CAAA;AACA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,SAAQ;AAAA,GANd,YAMgB,WAAA,yBAAA,CAAA;AACD,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAPb,YAOe,WAAA,0BAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GARb,YAQe,WAAA,0BAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GATb,YASe,WAAA,SAAA,CAAA;AACC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,SAAQ;AAAA,GAVd,YAUgB,WAAA,UAAA,CAAA;AACA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,SAAQ;AAAA,GAXd,YAWgB,WAAA,eAAA,CAAA;AACA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,SAAQ;AAAA,GAZd,YAYgB,WAAA,mBAAA,CAAA;AACA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,SAAQ;AAAA,GAbd,YAagB,WAAA,2BAAA,CAAA;AACF,gBAAA;AAAA,EAAxB,SAAS,EAAC,MAAM,OAAM;AAAA,GAdZ,YAcc,WAAA,WAAA,CAAA;AACC,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAfb,YAee,WAAA,gBAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAhBb,YAgBe,WAAA,mBAAA,CAAA;AAhBf,cAAN,gBAAA;AAAA,EADN,cAAc,cAAc;AAAA,GAChB,WAAA;AAkDb,SAAS,YACP,QACA,OACA,QACA,WACA;AACA,QAAM,YAAY;AAAA,yDACqC,SAAS,CAAC,uDAAuD,OAAO,SAAS;AAAA;AAExI,QAAM,QAAQ,8BAA8B,MAAM,cAAc,KAAK,MAAM;AAE3E,QAAM,YAAY,CAAA;AAElB,QAAM,SAAS;AACf,QAAM,QAAQ,SAAS;AACvB,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,SAAS,QAAS;AACrC,QAAM,OAAO,KAAK;AACZ,QAAA,MAAM,8BAA8B,SAAS,cAAc,IAAI,SAAS,OAAO,GAAG,WAAW,OAAO,GAAG;AAE7G,SAAO,CAAC,WAAW,OAAO,WAAW,GAAG;AAC1C;AAEA,SAAS,uBACP,QACA,OACA,QACA,WACA,QACA,mBAA4B,OAC5B;AACA,QAAM,YAAY;AAAA,yDACqC,SAAS,CAAC,uDAAuD,OAAO,SAAS;AAAA;AAExI,QAAM,QAAQ;AAAA,yDACyC,SAAS,CAAC;AAAA;AAG3D,QAAA,YAAY,YACd,CAAA,IACA,CAAC,oBAAoB,QAAQ,IAAI,cAAc,MAAM,CAAC;AAEpD,QAAA,YAAa,SAAS,QAAS;AACrC,QAAM,OAAO,KAAK;AACZ,QAAA,SAAS,mBAAmB,qBAAqB;AACvD,QAAM,MAAM;AAAA;AAAA,aAED,MAAM;AAAA,qDACkC,SAAS,CAAC;AAAA;AAAA,qBAE1C,MAAM,wBAAwB,SAAS,cAAc,IAAI,SAAS,OAAO,GAAG,WAAW,OAAO,GAAG;AACpH,QAAM,aAAa,OAAO;AAAA,IAAI,CAAC,MAC7B,aAAa,QAAQ,GAAG,gBAAgB;AAAA,EAAA;AAG1C,SAAO,CAAC,WAAW,OAAO,WAAW,KAAK,UAAU;AACtD;AAEA,SAAS,eACP,QACA,OACA,QACA,WACA;AACA,QAAM,YAAY;AAAA;AAAA,UAEV,YAAY,QAAQ,OAAO,QAAQ,SAAS,CAAC;AAAA;AAAA;AAG9C,SAAA;AACT;AAEA,SAAS,0BACP,QACA,OACA,QACA,WACA,SACA;AACA,QAAM,YAAY;AAAA;AAAA,UAEV,uBAAuB,QAAQ,OAAO,QAAQ,WAAW,SAAS,IAAI,CAAC;AAAA;AAAA;AAGxE,SAAA;AACT;AAEA,SAAS,YACP,QACA,OACA,gBACA,QACA,SAIA;AACA,QAAM,IAAI,EAAE,iBACR,IACA,KAAK,KAAK,KAAK,KAAM,SAAS,KAAK,IAAI,KAAK,IAAK,MAAM;AACrD,QAAA,QAAQ,QAAQ,cAAc,MAAM;AACtC,MAAA;AACJ,MAAI,QAAQ,WAAW;AAEnB,WAAA;AAAA,EAAA,OACG;AAEH,WAAA;AAAA,EACJ;AACO,SAAA;AAAA;AAAA;AAAA,mGAG0F,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAOzE,CAAC;AAAA,yCACU,OAAO,IAAI,uCAAuC,KAAK,KAAK;AAAA,2FACV,KAAK,KAAK,2BAA2B,OAAO,MAAM;AAAA,MAEvI,QAAQ,cACJ,OACA;AAAA,iFACuE,OAAO,IAAI;AAAA,iIACqC,OAAO,MAAM;AAAA,OAE1I;AAAA;AAAA;AAGJ;AAEO,SAAS,SACd,QACA,UACA,OACA,SAcA;AACA,MAAI,CAAC,QAAQ,eAAe,QAAQ,QAAQ,SAAS,GAAG;AAChD,UAAA,IAAI,MAAM,+CAA+C;AAAA,EACjE;AAEI,MAAA,QAAQ,kBAAkB,aAAa,QAAW;AACpD,YAAQ,aACN,KAAK,IAAI,SAAS,QAAQ,IAAI,QAAQ;AAAA,EAC1C;AAEA,MAAI,QAAQ,UAAU;AACpB,YAAQ,aAAa;AAAA,EACvB;AAEA,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,QAAQ,cACvB,uEAAuE,aAAa,WAAW,aAAa,0CAC5G;AAAA,uEACiE,aAAa,WAAW,aAAa;AAAA;AAG1G,QAAM,iBACJ,KAAK,IAAI,YAAY,CAAC,IAAI,QAAQ;AAEpC,QAAM,UAA6B,QAAQ,QAAQ,IAAI,CAAC,MAAM;AAC5D,UAAM,YAAY,UAAU,EAAE,OAAO,UAAU,EAAE;AAC7CA,QAAAA;AACJ,QAAI,WAAW;AACbA,eAAQ,YAAY;AAAA,IAAA,WACX,EAAE,QAAQ;AACnBA,eAAQ,YAAY;AAAA,IAAA,OACf;AACLA,eAAQ,YAAY;AAAA,IACtB;AACO,WAAA;AAAA,MACL,KAAK,EAAE;AAAA,MACP,KAAK,EAAE;AAAA,MACP,MAAM,EAAE;AAAA,MACR,OAAAA;AAAAA,IAAA;AAAA,EACF,CACD;AAED,QAAM,aAAa,QAAQ,OAAO,CAAC,MAAM,EAAE,OAAO,CAAC;AAC7C,QAAA,gBAAgB,QACnB,OAAO,CAAC,MAAM,EAAE,OAAO,CAAC,EACxB,IAAI,CAAC,OAAO,EAAC,GAAG,GAAG,KAAK,CAAC,EAAE,KAAK,KAAK,CAAC,EAAE,IAAK,EAAA;AAEhD,QAAM,cAAc,CAAA;AACpB,QAAM,aAAa,QAAQ,iBAAiB,cAAc,OAAO,MAAM;AACvE,QAAM,SAAS,QAAQ,kBAAkB,aAAa,IAAI;AAC1D,MAAI,QAAQ,aAAa;AACX,gBAAA;AAAA,MACV;AAAA,QACE;AAAA,QACA,KAAK,IAAI,QAAQ,CAAC;AAAA,QAClB,EAAC,KAAK,UAAU,WAAW,yBAAwB;AAAA,QACnD;AAAA,QACA;AAAA,MACF;AAAA,IAAA;AAEF,QAAI,EAAE,QAAQ,mBAAmB,QAAQ,0BAA0B;AACrD,kBAAA;AAAA,QACV;AAAA,UACE;AAAA,UACA,KAAK,IAAI,CAAC,QAAQ,CAAC;AAAA,UACnB,EAAC,KAAK,UAAU,WAAW,yBAAwB;AAAA,UACnD;AAAA,UACA;AAAA,QACF;AAAA,MAAA;AAAA,IAEJ;AACA,gBAAY,KAAK,UAAU;AAAA,EAAA,OACtB;AACO,gBAAA;AAAA,MACV;AAAA,QACE;AAAA,QACA,KAAK,IAAI,QAAQ,CAAC;AAAA,QAClB,EAAC,KAAK,UAAU,WAAW,yBAAwB;AAAA,QACnD;AAAA,MACF;AAAA,IAAA;AAEE,QAAA,CAAC,QAAQ,iBAAiB;AAChB,kBAAA;AAAA,QACV;AAAA,UACE;AAAA,UACA,KAAK,IAAI,CAAC,QAAQ,CAAC;AAAA,UACnB,EAAC,KAAK,UAAU,WAAW,yBAAwB;AAAA,UACnD;AAAA,QACF;AAAA,MAAA;AAAA,IAEJ;AACA,gBAAY,KAAK,UAAU;AAAA,EAC7B;AACA,MAAI,aAAa,QAAW;AACd,gBAAA;AAAA,MACV;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,UACE,MAAM;AAAA,UACN,QAAQ;AAAA,QACV;AAAA,QACA;AAAA,UACE,WAAW,UAAU,gBAAgB;AAAA,UACrC,aAAa,QAAQ;AAAA,QACvB;AAAA,MACF;AAAA,IAAA;AAAA,EAEJ;AAEA,MAAI,QAAQ,QAAQ;AACX,WAAA;AAAA;AAAA;AAAA,YAGC,WAAW;AAAA;AAAA;AAAA,EAAA,OAGd;AACL,QAAI,UAAU;AACd,QAAI,IAAI;AACR,QAAI,QAAQ,iBAAiB;AACjB,gBAAA;AACN,UAAA;AAAA,IACN;AACA,UAAM,MAAM,aAAa,QAAQ,YAAY,QAAQ,YAAY;AACjE,UAAM,SAAS;AAAA,MACb,QAAQ,0BAA0B,MAAM;AAAA,MACxC,QAAQ;AAAA,IAAA;AAEH,WAAA;AAAA,sDAC2C,OAAO,cAAc,CAAC;AAAA,QACpE,GAAG;AAAA,QACH,MAAM;AAAA,QACN,WAAW;AAAA;AAAA;AAAA,EAGjB;AACF;"}

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

@@ -0,0 +1,3 @@
+import { TickmarkStyle } from '../watch/tickmark';
+export declare function singleSidedTickmark(height: number, value: number, style: TickmarkStyle): import("lit-html").TemplateResult<2> | null;
+//# sourceMappingURL=tickmark.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tickmark.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/thruster/tickmark.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,aAAa,EAAgB,MAAM,mBAAmB,CAAC;AAE/D,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,aAAa,+CAQrB"}

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

@@ -0,0 +1,14 @@
+import { svg } from "lit";
+import { tickmarkColor } from "../watch/tickmark.js";
+function singleSidedTickmark(height, value, style) {
+  if (value >= 100) {
+    return null;
+  }
+  const color = tickmarkColor(style);
+  const y = -value * height / 100 - 2;
+  return svg`<line x1="12" x2="32" y1=${y}  y2=${y} stroke=${color} stroke-width="1" vector-effect="non-scaling-stroke"/>`;
+}
+export {
+  singleSidedTickmark
+};
+//# sourceMappingURL=tickmark.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tickmark.js","sources":["../../../src/navigation-instruments/thruster/tickmark.ts"],"sourcesContent":["import {svg} from 'lit';\nimport {TickmarkStyle, tickmarkColor} from '../watch/tickmark';\n\nexport function singleSidedTickmark(\n  height: number,\n  value: number,\n  style: TickmarkStyle\n) {\n  if (value >= 100) {\n    return null;\n  }\n  const color = tickmarkColor(style);\n  const y = (-value * height) / 100 - 2;\n  return svg`<line x1=\"12\" x2=\"32\" y1=${y}  y2=${y} stroke=${color} stroke-width=\"1\" vector-effect=\"non-scaling-stroke\"/>`;\n}\n"],"names":[],"mappings":";;AAGgB,SAAA,oBACd,QACA,OACA,OACA;AACA,MAAI,SAAS,KAAK;AACT,WAAA;AAAA,EACT;AACM,QAAA,QAAQ,cAAc,KAAK;AACjC,QAAM,IAAK,CAAC,QAAQ,SAAU,MAAM;AACpC,SAAO,+BAA+B,CAAC,QAAQ,CAAC,WAAW,KAAK;AAClE;"}

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

@@ -0,0 +1,24 @@
+import { SVGTemplateResult } from 'lit';
+export declare enum AdviceType {
+    advice = "advice",
+    caution = "caution"
+}
+export declare enum AdviceState {
+    regular = "regular",
+    hinted = "hinted",
+    triggered = "triggered"
+}
+export interface AngleAdviceRaw {
+    minAngle: number;
+    maxAngle: number;
+    type: AdviceType;
+    state: AdviceState;
+}
+export interface AngleAdvice {
+    minAngle: number;
+    maxAngle: number;
+    type: AdviceType;
+    hinted: boolean;
+}
+export declare function renderAdvice(advice: AngleAdviceRaw): SVGTemplateResult;
+//# sourceMappingURL=advice.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"advice.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/watch/advice.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,iBAAiB,EAAe,MAAM,KAAK,CAAC;AAGpD,oBAAY,UAAU;IACpB,MAAM,WAAW;IACjB,OAAO,YAAY;CACpB;AAED,oBAAY,WAAW;IACrB,OAAO,YAAY;IACnB,MAAM,WAAW;IACjB,SAAS,cAAc;CACxB;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,EAAE,WAAW,CAAC;CACpB;AAED,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;CACjB;AAmCD,wBAAgB,YAAY,CAAC,MAAM,EAAE,cAAc,GAAG,iBAAiB,CA0DtE"}

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

@@ -0,0 +1,101 @@
+import { svg, nothing } from "lit";
+import { TickmarkStyle, tickmark, TickmarkType } from "./tickmark.js";
+var AdviceType = /* @__PURE__ */ ((AdviceType2) => {
+  AdviceType2["advice"] = "advice";
+  AdviceType2["caution"] = "caution";
+  return AdviceType2;
+})(AdviceType || {});
+var AdviceState = /* @__PURE__ */ ((AdviceState2) => {
+  AdviceState2["regular"] = "regular";
+  AdviceState2["hinted"] = "hinted";
+  AdviceState2["triggered"] = "triggered";
+  return AdviceState2;
+})(AdviceState || {});
+const margin = (344 - 328) / 2 + 8;
+const deltaAngle = Math.atan2(margin, (344 + 328) / 2);
+function adviceMask(minAngle, maxAngle, fill, stroke) {
+  const radl = minAngle * Math.PI / 180 + deltaAngle;
+  const radh = maxAngle * Math.PI / 180 - deltaAngle;
+  const r1 = 328 / 2;
+  const r2 = 344 / 2;
+  const R = (r2 - r1) / 2;
+  const x1l = Math.sin(radl) * r1;
+  const y1l = -Math.cos(radl) * r1;
+  const x2l = Math.sin(radl) * r2;
+  const y2l = -Math.cos(radl) * r2;
+  const x1h = Math.sin(radh) * r1;
+  const y1h = -Math.cos(radh) * r1;
+  const x2h = Math.sin(radh) * r2;
+  const y2h = -Math.cos(radh) * r2;
+  const path = `M ${x1l} ${y1l} 
+                    A ${r1} ${r1} 0 0 1 ${x1h} ${y1h}
+                    A ${R} ${R} 0 0 0 ${x2h} ${y2h}
+                    A ${r2} ${r2} 0 0 0 ${x2l} ${y2l}
+                    A ${R} ${R} 0 0 0 ${x1l} ${y1l}
+                    Z`;
+  return svg`<path d=${path} fill=${fill} stroke=${stroke} stroke-width="1" vector-effect="non-scaling-stroke" />`;
+}
+function renderAdvice(advice) {
+  if (advice.type === "caution") {
+    let mainColor;
+    let fillColor = null;
+    if (advice.state === "hinted") {
+      mainColor = "var(--instrument-frame-tertiary-color)";
+    } else if (advice.state === "regular") {
+      mainColor = "var(--instrument-tick-mark-tertiary-color)";
+    } else {
+      mainColor = "var(--on-caution-active-color)";
+      fillColor = "var(--alert-caution-color)";
+    }
+    const radialPattern = [];
+    for (let i = 0; i < 180; i += 4) {
+      radialPattern.push(svg`<g transform="rotate(${i}) translate(-256 -256) ">
+            <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}/>
+            </g>
+            `);
+    }
+    const maskId = `adviceMask-${advice.minAngle}-${advice.maxAngle}`;
+    let tickmarkStyle = TickmarkStyle.hinted;
+    if (advice.state === "regular") {
+      tickmarkStyle = TickmarkStyle.regular;
+    } else if (advice.state === "triggered") {
+      tickmarkStyle = TickmarkStyle.enhanced;
+    }
+    return svg`
+            <mask id=${maskId}>
+                ${adviceMask(advice.minAngle, advice.maxAngle, "white", "black")}
+            </mask>
+            <g mask="url(#${maskId})">
+                ${fillColor ? svg`<rect x="-256" y="-256" width="512" height="512" fill="${fillColor}"/>` : nothing}
+                ${radialPattern}
+            </g>
+            ${adviceMask(advice.minAngle, advice.maxAngle, "none", mainColor)}
+            ${tickmark(advice.minAngle, TickmarkType.primary, tickmarkStyle, 1)}
+            ${tickmark(advice.maxAngle, TickmarkType.primary, tickmarkStyle, 1)}
+        `;
+  } else {
+    let mainColor;
+    let tickmarkStyle;
+    if (advice.state === "hinted") {
+      mainColor = "var(--instrument-frame-tertiary-color)";
+      tickmarkStyle = TickmarkStyle.hinted;
+    } else if (advice.state === "regular") {
+      mainColor = "var(--instrument-regular-secondary-color)";
+      tickmarkStyle = TickmarkStyle.regular;
+    } else {
+      mainColor = "var(--instrument-enhanced-secondary-color)";
+      tickmarkStyle = TickmarkStyle.regular;
+    }
+    return svg`
+            ${adviceMask(advice.minAngle, advice.maxAngle, mainColor, mainColor)}
+            ${tickmark(advice.minAngle, TickmarkType.primary, tickmarkStyle, 1)}
+            ${tickmark(advice.maxAngle, TickmarkType.primary, tickmarkStyle, 1)}
+        `;
+  }
+}
+export {
+  AdviceState,
+  AdviceType,
+  renderAdvice
+};
+//# sourceMappingURL=advice.js.map

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

@@ -0,0 +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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"}