@oicl/openbridge-webcomponents 0.0.15-dev-20241106154355 → 0.0.15-dev-20241112185305

package/dist/navigation-instruments/poi-line/pointerDot.js

@@ -0,0 +1,105 @@
+import { html } from "lit";
+import { POIStyle } from "../poi-graphic-line/poi-config.js";
+function renderPointerDot({ lineStyle }) {
+  if (lineStyle === POIStyle.Enhanced)
+    return html`<svg
+      width="8"
+      height="8"
+      viewBox="0 0 8 8"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g filter="url(#filter0_d_1761_3883)">
+        <rect x="2" y="1" width="4" height="4" rx="2" fill="#2E5389" />
+        <rect x="1.5" y="0.5" width="5" height="5" rx="2.5" stroke="white" />
+      </g>
+      <defs>
+        <filter
+          id="filter0_d_1761_3883"
+          x="0"
+          y="0"
+          width="8"
+          height="8"
+          filterUnits="userSpaceOnUse"
+          color-interpolation-filters="sRGB"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dy="1" />
+          <feGaussianBlur stdDeviation="0.5" />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"
+          />
+          <feBlend
+            mode="normal"
+            in2="BackgroundImageFix"
+            result="effect1_dropShadow_1761_3883"
+          />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="effect1_dropShadow_1761_3883"
+            result="shape"
+          />
+        </filter>
+      </defs>
+    </svg>`;
+  else
+    return html`<svg
+      width="4"
+      height="4"
+      viewBox="0 0 4 4"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g filter="url(#filter0_d_1761_4250)">
+        <rect x="1" width="2" height="2" rx="1" fill="white" />
+      </g>
+      <defs>
+        <filter
+          id="filter0_d_1761_4250"
+          x="0"
+          y="0"
+          width="4"
+          height="4"
+          filterUnits="userSpaceOnUse"
+          color-interpolation-filters="sRGB"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dy="1" />
+          <feGaussianBlur stdDeviation="0.5" />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"
+          />
+          <feBlend
+            mode="normal"
+            in2="BackgroundImageFix"
+            result="effect1_dropShadow_1761_4250"
+          />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="effect1_dropShadow_1761_4250"
+            result="shape"
+          />
+        </filter>
+      </defs>
+    </svg> `;
+}
+export {
+  renderPointerDot
+};
+//# sourceMappingURL=pointerDot.js.map

package/dist/navigation-instruments/poi-line/pointerDot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pointerDot.js","sources":["../../../src/navigation-instruments/poi-line/pointerDot.ts"],"sourcesContent":["import {html} from 'lit';\nimport {POIStyle} from '../poi-graphic-line/poi-config';\n\nexport function renderPointerDot({lineStyle}: {lineStyle: POIStyle}) {\n  if (lineStyle === POIStyle.Enhanced)\n    return html`<svg\n      width=\"8\"\n      height=\"8\"\n      viewBox=\"0 0 8 8\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <g filter=\"url(#filter0_d_1761_3883)\">\n        <rect x=\"2\" y=\"1\" width=\"4\" height=\"4\" rx=\"2\" fill=\"#2E5389\" />\n        <rect x=\"1.5\" y=\"0.5\" width=\"5\" height=\"5\" rx=\"2.5\" stroke=\"white\" />\n      </g>\n      <defs>\n        <filter\n          id=\"filter0_d_1761_3883\"\n          x=\"0\"\n          y=\"0\"\n          width=\"8\"\n          height=\"8\"\n          filterUnits=\"userSpaceOnUse\"\n          color-interpolation-filters=\"sRGB\"\n        >\n          <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n          <feColorMatrix\n            in=\"SourceAlpha\"\n            type=\"matrix\"\n            values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n            result=\"hardAlpha\"\n          />\n          <feOffset dy=\"1\" />\n          <feGaussianBlur stdDeviation=\"0.5\" />\n          <feColorMatrix\n            type=\"matrix\"\n            values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0\"\n          />\n          <feBlend\n            mode=\"normal\"\n            in2=\"BackgroundImageFix\"\n            result=\"effect1_dropShadow_1761_3883\"\n          />\n          <feBlend\n            mode=\"normal\"\n            in=\"SourceGraphic\"\n            in2=\"effect1_dropShadow_1761_3883\"\n            result=\"shape\"\n          />\n        </filter>\n      </defs>\n    </svg>`;\n  else\n    return html`<svg\n      width=\"4\"\n      height=\"4\"\n      viewBox=\"0 0 4 4\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <g filter=\"url(#filter0_d_1761_4250)\">\n        <rect x=\"1\" width=\"2\" height=\"2\" rx=\"1\" fill=\"white\" />\n      </g>\n      <defs>\n        <filter\n          id=\"filter0_d_1761_4250\"\n          x=\"0\"\n          y=\"0\"\n          width=\"4\"\n          height=\"4\"\n          filterUnits=\"userSpaceOnUse\"\n          color-interpolation-filters=\"sRGB\"\n        >\n          <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n          <feColorMatrix\n            in=\"SourceAlpha\"\n            type=\"matrix\"\n            values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n            result=\"hardAlpha\"\n          />\n          <feOffset dy=\"1\" />\n          <feGaussianBlur stdDeviation=\"0.5\" />\n          <feColorMatrix\n            type=\"matrix\"\n            values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0\"\n          />\n          <feBlend\n            mode=\"normal\"\n            in2=\"BackgroundImageFix\"\n            result=\"effect1_dropShadow_1761_4250\"\n          />\n          <feBlend\n            mode=\"normal\"\n            in=\"SourceGraphic\"\n            in2=\"effect1_dropShadow_1761_4250\"\n            result=\"shape\"\n          />\n        </filter>\n      </defs>\n    </svg> `;\n}\n"],"names":[],"mappings":";;AAGgB,SAAA,iBAAiB,EAAC,aAAmC;AACnE,MAAI,cAAc,SAAS;AAClB,WAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiDA,WAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+CX;"}

package/dist/navigation-instruments/poi-target/arrow.d.ts

@@ -0,0 +1,3 @@
+import { Pointer } from './poi-target';
+export declare function pointerArrow(pointerType: Pointer, value: string): import("lit-html").TemplateResult<1>;
+//# sourceMappingURL=arrow.d.ts.map

package/dist/navigation-instruments/poi-target/arrow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"arrow.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/poi-target/arrow.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAAC,MAAM,cAAc,CAAC;AAGrC,wBAAgB,YAAY,CAAC,WAAW,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,wCA0D/D"}

package/dist/navigation-instruments/poi-target/arrow.js

@@ -0,0 +1,60 @@
+import { Pointer } from "./poi-target.js";
+import { html } from "lit";
+function pointerArrow(pointerType, value) {
+  const path = pointerType === Pointer.ArrowLeft ? "M10.627 4.58645L10.9802 4.93961L10.6274 5.29317L7.92644 8L10.6274 10.7068L10.9802 11.0604L10.627 11.4136L9.68699 12.3536L9.33344 12.7071L8.97988 12.3536L4.97988 8.35355L4.62633 8L4.97988 7.64645L8.97988 3.64645L9.33344 3.29289L9.68699 3.64645L10.627 4.58645Z" : "M5.37301 4.58645L5.01984 4.93961L5.37262 5.29317L8.07356 8L5.37262 10.7068L5.01984 11.0604L5.37301 11.4136L6.31301 12.3536L6.66656 12.7071L7.02012 12.3536L11.0201 8.35355L11.3737 8L11.0201 7.64645L7.02012 3.64645L6.66656 3.29289L6.31301 3.64645L5.37301 4.58645Z";
+  let fill = "var(--instrument-regular-secondary-color)";
+  if (value === "checked")
+    fill = "var(--instrument-enhanced-secondary-color)";
+  const pointer = html`<svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g filter="url(#filter0_d_903_44142)">
+      <path d=${path} fill="${fill}" stroke="var(--border-silhouette-color)" />
+    </g>
+    <defs>
+      <filter
+        id="filter0_d_903_44142"
+        x="-1"
+        y="0"
+        width="18"
+        height="18"
+        filterUnits="userSpaceOnUse"
+        color-interpolation-filters="sRGB"
+      >
+        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset dy="1" />
+        <feGaussianBlur stdDeviation="0.5" />
+        <feColorMatrix
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"
+        />
+        <feBlend
+          mode="normal"
+          in2="BackgroundImageFix"
+          result="effect1_dropShadow_903_44142"
+        />
+        <feBlend
+          mode="normal"
+          in="SourceGraphic"
+          in2="effect1_dropShadow_903_44142"
+          result="shape"
+        />
+      </filter>
+    </defs>
+  </svg> `;
+  return pointer;
+}
+export {
+  pointerArrow
+};
+//# sourceMappingURL=arrow.js.map

package/dist/navigation-instruments/poi-target/arrow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"arrow.js","sources":["../../../src/navigation-instruments/poi-target/arrow.ts"],"sourcesContent":["import {Pointer} from './poi-target';\nimport {html} from 'lit';\n\nexport function pointerArrow(pointerType: Pointer, value: string) {\n  const path =\n    pointerType === Pointer.ArrowLeft\n      ? 'M10.627 4.58645L10.9802 4.93961L10.6274 5.29317L7.92644 8L10.6274 10.7068L10.9802 11.0604L10.627 11.4136L9.68699 12.3536L9.33344 12.7071L8.97988 12.3536L4.97988 8.35355L4.62633 8L4.97988 7.64645L8.97988 3.64645L9.33344 3.29289L9.68699 3.64645L10.627 4.58645Z'\n      : 'M5.37301 4.58645L5.01984 4.93961L5.37262 5.29317L8.07356 8L5.37262 10.7068L5.01984 11.0604L5.37301 11.4136L6.31301 12.3536L6.66656 12.7071L7.02012 12.3536L11.0201 8.35355L11.3737 8L11.0201 7.64645L7.02012 3.64645L6.66656 3.29289L6.31301 3.64645L5.37301 4.58645Z';\n\n  let fill = 'var(--instrument-regular-secondary-color)';\n  if (value === 'checked') fill = 'var(--instrument-enhanced-secondary-color)';\n\n  const pointer = html`<svg\n    width=\"16\"\n    height=\"16\"\n    viewBox=\"0 0 16 16\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <g filter=\"url(#filter0_d_903_44142)\">\n      <path d=${path} fill=\"${fill}\" stroke=\"var(--border-silhouette-color)\" />\n    </g>\n    <defs>\n      <filter\n        id=\"filter0_d_903_44142\"\n        x=\"-1\"\n        y=\"0\"\n        width=\"18\"\n        height=\"18\"\n        filterUnits=\"userSpaceOnUse\"\n        color-interpolation-filters=\"sRGB\"\n      >\n        <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n        <feColorMatrix\n          in=\"SourceAlpha\"\n          type=\"matrix\"\n          values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n          result=\"hardAlpha\"\n        />\n        <feOffset dy=\"1\" />\n        <feGaussianBlur stdDeviation=\"0.5\" />\n        <feColorMatrix\n          type=\"matrix\"\n          values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0\"\n        />\n        <feBlend\n          mode=\"normal\"\n          in2=\"BackgroundImageFix\"\n          result=\"effect1_dropShadow_903_44142\"\n        />\n        <feBlend\n          mode=\"normal\"\n          in=\"SourceGraphic\"\n          in2=\"effect1_dropShadow_903_44142\"\n          result=\"shape\"\n        />\n      </filter>\n    </defs>\n  </svg> `;\n\n  return pointer;\n}\n"],"names":[],"mappings":";;AAGgB,SAAA,aAAa,aAAsB,OAAe;AAChE,QAAM,OACJ,gBAAgB,QAAQ,YACpB,uQACA;AAEN,MAAI,OAAO;AACX,MAAI,UAAU;AAAkB,WAAA;AAEhC,QAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAQF,IAAI,UAAU,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwCzB,SAAA;AACT;"}

package/dist/navigation-instruments/poi-target/poi-target.css.js

@@ -0,0 +1,26 @@
+import { css } from "lit";
+const compentStyle = css`.wrapper {
+  padding: 0;
+  background: transparent;
+  appearance: none;
+  width: 48px;
+  height: auto;
+  border: none;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.wrapper.type-arrow-left {
+    width: 56px;
+    flex-direction: row-reverse;
+  }
+.wrapper.type-arrow-right {
+    width: 56px;
+    flex-direction: row;
+  }
+`;
+export {
+  compentStyle as default
+};
+//# sourceMappingURL=poi-target.css.js.map

package/dist/navigation-instruments/poi-target/poi-target.css.js.map

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

package/dist/navigation-instruments/poi-target/poi-target.d.ts

@@ -0,0 +1,27 @@
+import { LitElement } from 'lit';
+import '../poi-line/poi-line';
+import '../../components/poi-target-button/poi-target-button';
+export declare enum TargetValue {
+    enabled = "enabled",
+    checked = "checked"
+}
+export declare enum Pointer {
+    Line = "line",
+    ArrowLeft = "arrow-left",
+    ArrowRight = "arrow-right",
+    None = "null"
+}
+export declare class ObcPoiTarget extends LitElement {
+    height: number;
+    value: TargetValue;
+    pointerType: Pointer;
+    relativeDirection: number;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'obc-poi-target': ObcPoiTarget;
+    }
+}
+//# sourceMappingURL=poi-target.d.ts.map

package/dist/navigation-instruments/poi-target/poi-target.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"poi-target.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/poi-target/poi-target.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAkB,MAAM,KAAK,CAAC;AAIhD,OAAO,sBAAsB,CAAC;AAC9B,OAAO,sDAAsD,CAAC;AAK9D,oBAAY,WAAW;IACrB,OAAO,YAAY;IACnB,OAAO,YAAY;CACpB;AA4BD,oBAAY,OAAO;IACjB,IAAI,SAAS;IACb,SAAS,eAAe;IACxB,UAAU,gBAAgB;IAC1B,IAAI,SAAS;CACd;AAED,qBACa,YAAa,SAAQ,UAAU;IAChB,MAAM,EAAE,MAAM,CAAO;IACrB,KAAK,EAAE,WAAW,CAAuB;IACzC,WAAW,EAAE,OAAO,CAAgB;IACpC,iBAAiB,SAAK;IAEvC,MAAM;IA0Cf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}

package/dist/navigation-instruments/poi-target/poi-target.js

@@ -0,0 +1,126 @@
+import { unsafeCSS, LitElement, html } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import compentStyle from "./poi-target.css.js";
+import { classMap } from "lit/directives/class-map.js";
+import "../poi-line/poi-line.js";
+import { PoiTargetButtonValue } from "../../components/poi-target-button/poi-target-button.js";
+import { POIStyle } from "../poi-graphic-line/poi-config.js";
+import { pointerArrow } from "./arrow.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+var TargetValue = /* @__PURE__ */ ((TargetValue2) => {
+  TargetValue2["enabled"] = "enabled";
+  TargetValue2["checked"] = "checked";
+  return TargetValue2;
+})(TargetValue || {});
+function valueToPointerStyle(value) {
+  let style = null;
+  switch (value) {
+    case "enabled":
+      style = POIStyle.Normal;
+      break;
+    case "checked":
+      style = POIStyle.Enhanced;
+      break;
+    default:
+      throw new Error(`Value has no style: ${style}`);
+  }
+  return style;
+}
+function valueToButtonStyle(value) {
+  switch (value) {
+    case "enabled":
+      return PoiTargetButtonValue.unchecked;
+    case "checked":
+      return PoiTargetButtonValue.checked;
+    default:
+      throw new Error(`Value has no style: ${value}`);
+  }
+}
+var Pointer = /* @__PURE__ */ ((Pointer2) => {
+  Pointer2["Line"] = "line";
+  Pointer2["ArrowLeft"] = "arrow-left";
+  Pointer2["ArrowRight"] = "arrow-right";
+  Pointer2["None"] = "null";
+  return Pointer2;
+})(Pointer || {});
+let ObcPoiTarget = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.height = 188;
+    this.value = "enabled";
+    this.pointerType = "line";
+    this.relativeDirection = 0;
+  }
+  render() {
+    let pointer = null;
+    let hasArrowPointer = false;
+    switch (this.pointerType) {
+      case "line":
+        pointer = html`<obc-poi-line
+          height=${this.height}
+          lineStyle=${valueToPointerStyle(this.value)}
+        ></obc-poi-line>`;
+        break;
+      case "arrow-left":
+        pointer = pointerArrow(this.pointerType, this.value);
+        hasArrowPointer = true;
+        break;
+      case "arrow-right":
+        pointer = pointerArrow(this.pointerType, this.value);
+        hasArrowPointer = true;
+        break;
+      case "null":
+        pointer = null;
+        break;
+      default:
+        throw new Error(`Pointer type ${this.pointerType} not supported`);
+    }
+    return html`
+      <div
+        class=${classMap({
+      wrapper: true,
+      ["type-" + this.pointerType]: true
+    })}
+      >
+        <obc-poi-target-button
+          .value=${valueToButtonStyle(this.value)}
+          .hasPointer=${hasArrowPointer}
+          .relativeDirection=${this.relativeDirection}
+        ></obc-poi-target-button>
+        ${pointer}
+      </div>
+    `;
+  }
+};
+ObcPoiTarget.styles = unsafeCSS(compentStyle);
+__decorateClass([
+  property({ type: Number })
+], ObcPoiTarget.prototype, "height", 2);
+__decorateClass([
+  property({ type: String })
+], ObcPoiTarget.prototype, "value", 2);
+__decorateClass([
+  property({ type: String })
+], ObcPoiTarget.prototype, "pointerType", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcPoiTarget.prototype, "relativeDirection", 2);
+ObcPoiTarget = __decorateClass([
+  customElement("obc-poi-target")
+], ObcPoiTarget);
+export {
+  ObcPoiTarget,
+  Pointer,
+  TargetValue
+};
+//# sourceMappingURL=poi-target.js.map

package/dist/navigation-instruments/poi-target/poi-target.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"poi-target.js","sources":["../../../src/navigation-instruments/poi-target/poi-target.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport compentStyle from './poi-target.css?inline';\nimport {classMap} from 'lit/directives/class-map.js';\nimport '../poi-line/poi-line';\nimport '../../components/poi-target-button/poi-target-button';\nimport {POIStyle} from '../poi-graphic-line/poi-config';\nimport {pointerArrow} from './arrow';\nimport {PoiTargetButtonValue} from '../../components/poi-target-button/poi-target-button';\n\nexport enum TargetValue {\n  enabled = 'enabled',\n  checked = 'checked',\n}\n\nfunction valueToPointerStyle(value: TargetValue): POIStyle {\n  let style = null;\n  switch (value) {\n    case TargetValue.enabled:\n      style = POIStyle.Normal;\n      break;\n    case TargetValue.checked:\n      style = POIStyle.Enhanced;\n      break;\n    default:\n      throw new Error(`Value has no style: ${style}`);\n  }\n  return style;\n}\n\nfunction valueToButtonStyle(value: TargetValue): PoiTargetButtonValue {\n  switch (value) {\n    case TargetValue.enabled:\n      return PoiTargetButtonValue.unchecked;\n    case 'checked':\n      return PoiTargetButtonValue.checked;\n    default:\n      throw new Error(`Value has no style: ${value}`);\n  }\n}\n\nexport enum Pointer {\n  Line = 'line',\n  ArrowLeft = 'arrow-left',\n  ArrowRight = 'arrow-right',\n  None = 'null',\n}\n\n@customElement('obc-poi-target')\nexport class ObcPoiTarget extends LitElement {\n  @property({type: Number}) height: number = 188;\n  @property({type: String}) value: TargetValue = TargetValue.enabled;\n  @property({type: String}) pointerType: Pointer = Pointer.Line;\n  @property({type: Number}) relativeDirection = 0;\n\n  override render() {\n    let pointer = null;\n    let hasArrowPointer = false;\n    switch (this.pointerType) {\n      case Pointer.Line:\n        pointer = html`<obc-poi-line\n          height=${this.height}\n          lineStyle=${valueToPointerStyle(this.value)}\n        ></obc-poi-line>`;\n        break;\n      case Pointer.ArrowLeft:\n        pointer = pointerArrow(this.pointerType, this.value);\n        hasArrowPointer = true;\n        break;\n      case Pointer.ArrowRight:\n        pointer = pointerArrow(this.pointerType, this.value);\n        hasArrowPointer = true;\n        break;\n      case Pointer.None:\n        pointer = null;\n        break;\n      default:\n        throw new Error(`Pointer type ${this.pointerType} not supported`);\n    }\n\n    return html`\n      <div\n        class=${classMap({\n          wrapper: true,\n          ['type-' + this.pointerType]: true,\n        })}\n      >\n        <obc-poi-target-button\n          .value=${valueToButtonStyle(this.value)}\n          .hasPointer=${hasArrowPointer}\n          .relativeDirection=${this.relativeDirection}\n        ></obc-poi-target-button>\n        ${pointer}\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-poi-target': ObcPoiTarget;\n  }\n}\n"],"names":["TargetValue","Pointer"],"mappings":";;;;;;;;;;;;;;;;;;;AAUY,IAAA,gCAAAA,iBAAL;AACLA,eAAA,SAAU,IAAA;AACVA,eAAA,SAAU,IAAA;AAFAA,SAAAA;AAAA,GAAA,eAAA,CAAA,CAAA;AAKZ,SAAS,oBAAoB,OAA8B;AACzD,MAAI,QAAQ;AACZ,UAAQ,OAAO;AAAA,IACb,KAAK;AACH,cAAQ,SAAS;AACjB;AAAA,IACF,KAAK;AACH,cAAQ,SAAS;AACjB;AAAA,IACF;AACE,YAAM,IAAI,MAAM,uBAAuB,KAAK,EAAE;AAAA,EAClD;AACO,SAAA;AACT;AAEA,SAAS,mBAAmB,OAA0C;AACpE,UAAQ,OAAO;AAAA,IACb,KAAK;AACH,aAAO,qBAAqB;AAAA,IAC9B,KAAK;AACH,aAAO,qBAAqB;AAAA,IAC9B;AACE,YAAM,IAAI,MAAM,uBAAuB,KAAK,EAAE;AAAA,EAClD;AACF;AAEY,IAAA,4BAAAC,aAAL;AACLA,WAAA,MAAO,IAAA;AACPA,WAAA,WAAY,IAAA;AACZA,WAAA,YAAa,IAAA;AACbA,WAAA,MAAO,IAAA;AAJGA,SAAAA;AAAA,GAAA,WAAA,CAAA,CAAA;AAQC,IAAA,eAAN,cAA2B,WAAW;AAAA,EAAtC,cAAA;AAAA,UAAA,GAAA,SAAA;AACsC,SAAA,SAAA;AACI,SAAA,QAAA;AACE,SAAA,cAAA;AACH,SAAA,oBAAA;AAAA,EAAA;AAAA,EAErC,SAAS;AAChB,QAAI,UAAU;AACd,QAAI,kBAAkB;AACtB,YAAQ,KAAK,aAAa;AAAA,MACxB,KAAK;AACO,kBAAA;AAAA,mBACC,KAAK,MAAM;AAAA,sBACR,oBAAoB,KAAK,KAAK,CAAC;AAAA;AAE7C;AAAA,MACF,KAAK;AACH,kBAAU,aAAa,KAAK,aAAa,KAAK,KAAK;AACjC,0BAAA;AAClB;AAAA,MACF,KAAK;AACH,kBAAU,aAAa,KAAK,aAAa,KAAK,KAAK;AACjC,0BAAA;AAClB;AAAA,MACF,KAAK;AACO,kBAAA;AACV;AAAA,MACF;AACE,cAAM,IAAI,MAAM,gBAAgB,KAAK,WAAW,gBAAgB;AAAA,IACpE;AAEO,WAAA;AAAA;AAAA,gBAEK,SAAS;AAAA,MACf,SAAS;AAAA,MACT,CAAC,UAAU,KAAK,WAAW,GAAG;AAAA,IAAA,CAC/B,CAAC;AAAA;AAAA;AAAA,mBAGS,mBAAmB,KAAK,KAAK,CAAC;AAAA,wBACzB,eAAe;AAAA,+BACR,KAAK,iBAAiB;AAAA;AAAA,UAE3C,OAAO;AAAA;AAAA;AAAA,EAGf;AAGF;AAjDa,aAgDK,SAAS,UAAU,YAAY;AA/CrB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GADb,aACe,WAAA,UAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAFb,aAEe,WAAA,SAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAHb,aAGe,WAAA,eAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAJb,aAIe,WAAA,qBAAA,CAAA;AAJf,eAAN,gBAAA;AAAA,EADN,cAAc,gBAAgB;AAAA,GAClB,YAAA;"}

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

@@ -111,7 +111,7 @@ let ObcWatch = class extends LitElement {
     const width = (176 + this.padding) * 2;
     const viewBox = `-${width / 2} -${width / 2} ${width} ${width}`;
     const angleSetpoint = this.renderSetpoint();
-    const scale = this.clientWidth / width;
+    const scale = Math.min(this.clientWidth, this.clientHeight) / width;
     const tickmarks = this.tickmarks.map(
       (t) => tickmark(t.angle, t.type, TickmarkStyle.hinted, scale, t.text)
     );

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oicl/openbridge-webcomponents",
-  "version": "0.0.15-dev-20241106154355",
+  "version": "0.0.15-dev-20241112185305",
   "type": "module",
   "repository": {
     "type": "git",

package/src/components/poi-target-button/poi-target-button.css

@@ -0,0 +1,57 @@
+.wrapper {
+  padding: 0;
+  background: transparent;
+  height: 48px;
+  width: 48px;
+  appearance: none;
+  border: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  & .visible-wrapper {
+    height: 32px;
+    width: 32px;
+    border-radius: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  & .icon {
+    height: 24px;
+    width: 24px;
+  }
+
+  &.pointer {
+    width: 36px;
+  }
+
+  &.value-unchecked {
+    @mixin style style=normal visibleWrapperClass=.visible-wrapper;
+
+    .visible-wrapper {
+      color: var(--normal-enabled-background-color);
+      border-color: var(--normal-enabled-border-color);
+      box-shadow: var(--shadow-flat);
+    }
+
+    .icon {
+      color: var(--instrument-regular-secondary-color);
+    }
+  }
+
+  &.value-checked {
+    @mixin style style=selected visibleWrapperClass=.visible-wrapper;
+
+    .visible-wrapper {
+      background-color: var(--selected-enabled-background-color);
+      border-color: var(--selected-enabled-border-color);
+      box-shadow: var(--shadow-raised);
+    }
+
+    .icon {
+      color: var(--on-selected-active-color);
+    }
+  }
+}

package/src/components/poi-target-button/poi-target-button.stories.ts

@@ -0,0 +1,30 @@
+import type {Meta, StoryObj} from '@storybook/web-components';
+
+import {ObcPoiTargetButton} from './poi-target-button';
+import './poi-target-button';
+
+const meta: Meta<typeof ObcPoiTargetButton> = {
+  title: 'Button/POI Target Button',
+  tags: ['autodocs'],
+  component: 'obc-poi-target-button',
+  args: {
+    value: 'checked',
+    relativeDirection: 0,
+  },
+  argTypes: {
+    value: {
+      options: ['unchecked', 'checked'],
+      control: {type: 'select'},
+    },
+    relativeDirection: {
+      control: {type: 'range', min: 0, max: 360},
+    },
+  },
+} satisfies Meta<ObcPoiTargetButton>;
+
+export default meta;
+type Story = StoryObj<ObcPoiTargetButton>;
+
+export const Primary: Story = {
+  args: {},
+};

package/src/components/poi-target-button/poi-target-button.ts

@@ -0,0 +1,47 @@
+import {LitElement, html, unsafeCSS} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import compentStyle from './poi-target-button.css?inline';
+import {classMap} from 'lit/directives/class-map.js';
+import '../../icons/icon-iec-02-ais-target-activated';
+
+export enum PoiTargetButtonValue {
+  checked = 'checked',
+  unchecked = 'unchecked',
+}
+
+@customElement('obc-poi-target-button')
+export class ObcPoiTargetButton extends LitElement {
+  @property({type: String}) value: PoiTargetButtonValue =
+    PoiTargetButtonValue.checked;
+  @property({type: Boolean}) hasPointer = false;
+  @property({type: Number}) relativeDirection = 0;
+
+  override render() {
+    return html`
+      <button
+        class=${classMap({
+          wrapper: true,
+          ['value-' + this.value]: true,
+          pointer: this.hasPointer,
+        })}
+      >
+        <div class="visible-wrapper">
+          <div
+            class="icon"
+            style="transform: rotate(${this.relativeDirection}deg);"
+          >
+            <obi-iec-02-ais-target-activated></obi-iec-02-ais-target-activated>
+          </div>
+        </div>
+      </button>
+    `;
+  }
+
+  static override styles = unsafeCSS(compentStyle);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obc-poi-target-button': ObcPoiTargetButton;
+  }
+}

package/src/navigation-instruments/poi-graphic-line/poi-config.ts

@@ -0,0 +1,45 @@
+export enum POIStyle {
+  Normal = 'normal',
+  Raised = 'raised',
+  Enhanced = 'enhanced',
+  Input = 'input',
+  Light = 'light',
+  Track = 'track',
+}
+
+export enum POIState {
+  solid = 'solid',
+  dashed = 'dashed',
+}
+
+export interface POIStyleConfig {
+  lineColor: string;
+  outlineColor: string;
+}
+
+export const POI_STYLES: Record<POIStyle, POIStyleConfig> = {
+  [POIStyle.Normal]: {
+    lineColor: 'var(--element-active-inverted-color)',
+    outlineColor: 'var(--element-disabled-color)',
+  },
+  [POIStyle.Raised]: {
+    lineColor: 'var(--element-active-inverted-color)',
+    outlineColor: 'var(--border-outline-color)',
+  },
+  [POIStyle.Enhanced]: {
+    lineColor: 'var(--instrument-enhanced-secondary-color)',
+    outlineColor: 'var(--element-active-inverted-color)',
+  },
+  [POIStyle.Input]: {
+    lineColor: 'var(--instrument-enhanced-primary-color)',
+    outlineColor: 'var(--element-active-inverted-color)',
+  },
+  [POIStyle.Light]: {
+    lineColor: 'var(--instrument-port-color)',
+    outlineColor: 'var(--element-active-color)',
+  },
+  [POIStyle.Track]: {
+    lineColor: 'var(--instrument-enhanced-primary-color)',
+    outlineColor: 'var(--element-active-inverted-color)',
+  },
+};