@oicl/openbridge-webcomponents 0.0.15-dev-20241203183951 → 0.0.15-dev-20241203184948

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

@@ -1,103 +1,100 @@
-import { html } from "lit";
+import { svg, 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> `;
+function createCircle({
+  x,
+  y,
+  width,
+  height,
+  rx,
+  stroke
+}) {
+  return svg`<rect x="${x}" y="${y}" width="${width}" height="${height}" rx="${rx}" stroke="${stroke}">`;
+}
+function renderPointerDot({
+  lineStyle,
+  centerX,
+  centerY,
+  width,
+  vbHeight,
+  lineColor,
+  outlineColor
+}) {
+  let innerCircle = svg`<rect
+        x="${centerX}"
+        y="${centerY}"
+        width="4"
+        height="4"
+        rx="2"
+        fill="${lineColor}"
+      />`;
+  let outerCircle = null;
+  let filterY = centerY;
+  if (lineStyle !== POIStyle.Normal) {
+    outerCircle = createCircle({
+      x: centerX - 0.5,
+      y: centerY - 0.5,
+      width: 5,
+      height: 5,
+      rx: 2.5,
+      stroke: outlineColor
+    });
+    filterY = centerY - 1;
+  } else {
+    innerCircle = svg`<rect
+        x="${centerX}"
+        y="${centerY}"
+        width="2"
+        height="2"
+        rx="1"
+        fill="${lineColor}"
+      />`;
+  }
+  return html`<svg
+    width=${width}
+    height="${vbHeight}"
+    viewBox="0 0 ${width} ${vbHeight}"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    vector-effect="non-scaling-stroke"
+  >
+    <g filter="url(#pointerDotFilter)">${innerCircle} ${outerCircle}</g>
+    <defs>
+      <filter
+        id="pointerDotFilter"
+        x="${0}"
+        y="${filterY}"
+        width="${width}"
+        height="${width}"
+        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="pointerDotDropShadow"
+        />
+        <feBlend
+          mode="normal"
+          in="SourceGraphic"
+          in2="pointerDotDropShadow"
+          result="shape"
+        />
+      </filter>
+    </defs>
+  </svg>`;
 }
 export {
   renderPointerDot

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

@@ -1 +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;"}
+{"version":3,"file":"pointerDot.js","sources":["../../../src/navigation-instruments/poi-line/pointerDot.ts"],"sourcesContent":["import {html, svg} from 'lit';\nimport {POIStyle} from '../poi-graphic-line/poi-config';\n\nfunction createCircle({\n  x,\n  y,\n  width,\n  height,\n  rx,\n  stroke,\n}: {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n  rx: number;\n  stroke: string;\n}) {\n  return svg`<rect x=\"${x}\" y=\"${y}\" width=\"${width}\" height=\"${height}\" rx=\"${rx}\" stroke=\"${stroke}\">`;\n}\n\nexport function renderPointerDot({\n  lineStyle,\n  centerX,\n  centerY,\n  width,\n  vbHeight,\n  lineColor,\n  outlineColor,\n}: {\n  lineStyle: POIStyle;\n  centerX: number;\n  centerY: number;\n  width: number;\n  vbHeight: number;\n  lineColor: string;\n  outlineColor: string;\n}) {\n  let innerCircle = svg`<rect\n        x=\"${centerX}\"\n        y=\"${centerY}\"\n        width=\"4\"\n        height=\"4\"\n        rx=\"2\"\n        fill=\"${lineColor}\"\n      />`;\n\n  let outerCircle = null;\n  let filterY = centerY;\n\n  if (lineStyle !== POIStyle.Normal) {\n    outerCircle = createCircle({\n      x: centerX - 0.5,\n      y: centerY - 0.5,\n      width: 5,\n      height: 5,\n      rx: 2.5,\n      stroke: outlineColor,\n    });\n    filterY = centerY - 1;\n  } else {\n    innerCircle = svg`<rect\n        x=\"${centerX}\"\n        y=\"${centerY}\"\n        width=\"2\"\n        height=\"2\"\n        rx=\"1\"\n        fill=\"${lineColor}\"\n      />`;\n  }\n\n  return html`<svg\n    width=${width}\n    height=\"${vbHeight}\"\n    viewBox=\"0 0 ${width} ${vbHeight}\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    vector-effect=\"non-scaling-stroke\"\n  >\n    <g filter=\"url(#pointerDotFilter)\">${innerCircle} ${outerCircle}</g>\n    <defs>\n      <filter\n        id=\"pointerDotFilter\"\n        x=\"${0}\"\n        y=\"${filterY}\"\n        width=\"${width}\"\n        height=\"${width}\"\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=\"pointerDotDropShadow\"\n        />\n        <feBlend\n          mode=\"normal\"\n          in=\"SourceGraphic\"\n          in2=\"pointerDotDropShadow\"\n          result=\"shape\"\n        />\n      </filter>\n    </defs>\n  </svg>`;\n}\n"],"names":[],"mappings":";;AAGA,SAAS,aAAa;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAOG;AACM,SAAA,eAAe,CAAC,QAAQ,CAAC,YAAY,KAAK,aAAa,MAAM,SAAS,EAAE,aAAa,MAAM;AACpG;AAEO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAQG;AACD,MAAI,cAAc;AAAA,aACP,OAAO;AAAA,aACP,OAAO;AAAA;AAAA;AAAA;AAAA,gBAIJ,SAAS;AAAA;AAGvB,MAAI,cAAc;AAClB,MAAI,UAAU;AAEV,MAAA,cAAc,SAAS,QAAQ;AACjC,kBAAc,aAAa;AAAA,MACzB,GAAG,UAAU;AAAA,MACb,GAAG,UAAU;AAAA,MACb,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,IAAI;AAAA,MACJ,QAAQ;AAAA,IAAA,CACT;AACD,cAAU,UAAU;AAAA,EAAA,OACf;AACS,kBAAA;AAAA,aACL,OAAO;AAAA,aACP,OAAO;AAAA;AAAA;AAAA;AAAA,gBAIJ,SAAS;AAAA;AAAA,EAAA;AAIhB,SAAA;AAAA,YACG,KAAK;AAAA,cACH,QAAQ;AAAA,mBACH,KAAK,IAAI,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,yCAKK,WAAW,IAAI,WAAW;AAAA;AAAA;AAAA;AAAA,aAItD,CAAC;AAAA,aACD,OAAO;AAAA,iBACH,KAAK;AAAA,kBACJ,KAAK;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+BvB;"}

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

@@ -1 +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"}
+{"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,wCA2D/D"}

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

@@ -10,6 +10,7 @@ function pointerArrow(pointerType, value) {
     viewBox="0 0 16 16"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
+    vector-effect="non-scaling-stroke"
   >
     <g filter="url(#filter0_d_903_44142)">
       <path d=${path} fill="${fill}" stroke="var(--border-silhouette-color)" />

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

@@ -1 +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;AACP,MAAA,UAAU,UAAkB,QAAA;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;"}
+{"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    vector-effect=\"non-scaling-stroke\"\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;AACP,MAAA,UAAU,UAAkB,QAAA;AAEhC,QAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBASF,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

@@ -1,24 +1,22 @@
 import { css } from "lit";
-const compentStyle = css`.wrapper {
+const compentStyle = css`.container {
   padding: 0;
   background: transparent;
   appearance: none;
-  width: 48px;
+  width: 200px;
   height: auto;
   border: none;
   display: flex;
+  flex-direction: row;
+}
+
+.wrapper {
+  position: relative;
+  display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
+  width: 48px;
 }
-.wrapper.type-arrow-left {
-    width: 56px;
-    flex-direction: row-reverse;
-  }
-.wrapper.type-arrow-right {
-    width: 56px;
-    flex-direction: row;
-  }
 `;
 export {
   compentStyle as default

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

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

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

@@ -11,6 +11,10 @@ export declare enum Pointer {
     ArrowRight = "arrow-right",
     None = "null"
 }
+/**
+ *
+ * @prop {number} height - y-coordinate of pointer (centre) if pointerType 'line' is selected.
+ */
 export declare class ObcPoiTarget extends LitElement {
     height: number;
     value: TargetValue;

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

@@ -1 +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"}
+{"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;;;GAGG;AAEH,qBACa,YAAa,SAAQ,UAAU;IAChB,MAAM,EAAE,MAAM,CAAO;IACrB,KAAK,EAAE,WAAW,CAAuB;IACzC,WAAW,EAAE,OAAO,CAAgB;IACpC,iBAAiB,SAAK;IAEvC,MAAM;IA6Cf,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

@@ -5,7 +5,6 @@ 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) => {
@@ -55,28 +54,27 @@ var Pointer = /* @__PURE__ */ ((Pointer2) => {
 let ObcPoiTarget = class extends LitElement {
   constructor() {
     super(...arguments);
-    this.height = 188;
+    this.height = 192;
     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>`;
+        pointer = html`
+          <obc-poi-line
+            height=${this.height}
+            poiStyle=${valueToPointerStyle(this.value)}
+          ></obc-poi-line>
+        `;
         break;
       case "arrow-left":
-        pointer = pointerArrow(this.pointerType, this.value);
-        hasArrowPointer = true;
+        pointer = "arrow-left";
         break;
       case "arrow-right":
-        pointer = pointerArrow(this.pointerType, this.value);
-        hasArrowPointer = true;
+        pointer = "arrow-right";
         break;
       case "null":
         pointer = null;
@@ -85,18 +83,21 @@ let ObcPoiTarget = class extends LitElement {
         throw new Error(`Pointer type ${this.pointerType} not supported`);
     }
     return html`
-      <div
-        class=${classMap({
+      <div class="wrapper">
+        <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}
+        >
+          <obc-poi-target-button
+            .value=${valueToButtonStyle(this.value)}
+            .pointer=${this.pointerType}
+            .relativeDirection=${this.relativeDirection}
+          ></obc-poi-target-button>
+
+          ${this.pointerType === "line" ? pointer : null}
+        </div>
       </div>
     `;
   }

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

@@ -1 +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,EAAA;AAE3C,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,EAAA;AAEpD;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,IAAA;AAG7D,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,EAAA;AAMjB;AAjDa,aAgDK,SAAS,UAAU,YAAY;AA/CrB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAO,CAAA;AAAA,GADb,aACe,WAAA,UAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAO,CAAA;AAAA,GAFb,aAEe,WAAA,SAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAO,CAAA;AAAA,GAHb,aAGe,WAAA,eAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAO,CAAA;AAAA,GAJb,aAIe,WAAA,qBAAA,CAAA;AAJf,eAAN,gBAAA;AAAA,EADN,cAAc,gBAAgB;AAAA,GAClB,YAAA;"}
+{"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';\n\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/**\n *\n * @prop {number} height - y-coordinate of pointer (centre) if pointerType 'line' is selected.\n */\n\n@customElement('obc-poi-target')\nexport class ObcPoiTarget extends LitElement {\n  @property({type: Number}) height: number = 192;\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\n    switch (this.pointerType) {\n      case Pointer.Line:\n        pointer = html`\n          <obc-poi-line\n            height=${this.height}\n            poiStyle=${valueToPointerStyle(this.value)}\n          ></obc-poi-line>\n        `;\n        break;\n      case Pointer.ArrowLeft:\n        pointer = Pointer.ArrowLeft;\n        break;\n      case Pointer.ArrowRight:\n        pointer = Pointer.ArrowRight;\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 class=\"wrapper\">\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            .pointer=${this.pointerType}\n            .relativeDirection=${this.relativeDirection}\n          ></obc-poi-target-button>\n\n          ${this.pointerType === Pointer.Line ? pointer : null}\n        </div>\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,EAAA;AAE3C,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,EAAA;AAEpD;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;AAaC,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;AAEd,YAAQ,KAAK,aAAa;AAAA,MACxB,KAAK;AACO,kBAAA;AAAA;AAAA,qBAEG,KAAK,MAAM;AAAA,uBACT,oBAAoB,KAAK,KAAK,CAAC;AAAA;AAAA;AAG9C;AAAA,MACF,KAAK;AACO,kBAAA;AACV;AAAA,MACF,KAAK;AACO,kBAAA;AACV;AAAA,MACF,KAAK;AACO,kBAAA;AACV;AAAA,MACF;AACE,cAAM,IAAI,MAAM,gBAAgB,KAAK,WAAW,gBAAgB;AAAA,IAAA;AAG7D,WAAA;AAAA;AAAA;AAAA,kBAGO,SAAS;AAAA,MACf,SAAS;AAAA,MACT,CAAC,UAAU,KAAK,WAAW,GAAG;AAAA,IAAA,CAC/B,CAAC;AAAA;AAAA;AAAA,qBAGS,mBAAmB,KAAK,KAAK,CAAC;AAAA,uBAC5B,KAAK,WAAW;AAAA,iCACN,KAAK,iBAAiB;AAAA;AAAA;AAAA,YAG3C,KAAK,gBAAgB,SAAe,UAAU,IAAI;AAAA;AAAA;AAAA;AAAA,EAAA;AAO9D;AApDa,aAmDK,SAAS,UAAU,YAAY;AAlDrB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAO,CAAA;AAAA,GADb,aACe,WAAA,UAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAO,CAAA;AAAA,GAFb,aAEe,WAAA,SAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAO,CAAA;AAAA,GAHb,aAGe,WAAA,eAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAO,CAAA;AAAA,GAJb,aAIe,WAAA,qBAAA,CAAA;AAJf,eAAN,gBAAA;AAAA,EADN,cAAc,gBAAgB;AAAA,GAClB,YAAA;"}

package/package.json

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

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

@@ -1,3 +1,7 @@
+* {
+  box-sizing: border-box;
+}
+
 .wrapper {
   padding: 0;
   background: transparent;
@@ -5,10 +9,22 @@
   width: 48px;
   appearance: none;
   border: none;
+  border-radius: 14px;
   display: flex;
   align-items: center;
   justify-content: center;
 
+  @mixin style style=flat;
+
+  &.pointer-arrow-left {
+    width: 56px;
+    flex-direction: row-reverse;
+  }
+
+  &.pointer-arrow-right {
+    width: 56px;
+  }
+
   & .visible-wrapper {
     height: 32px;
     width: 32px;
@@ -23,17 +39,13 @@
     width: 24px;
   }
 
-  &.pointer {
-    width: 36px;
-  }
-
   &.value-unchecked {
-    @mixin style style=normal visibleWrapperClass=.visible-wrapper;
-
     .visible-wrapper {
-      color: var(--normal-enabled-background-color);
+      background-color: var(--normal-enabled-background-color);
       border-color: var(--normal-enabled-border-color);
       box-shadow: var(--shadow-flat);
+      border-width: 1px;
+      border-style: solid;
     }
 
     .icon {
@@ -42,8 +54,6 @@
   }
 
   &.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);
@@ -54,4 +64,4 @@
       color: var(--on-selected-active-color);
     }
   }
-}
+}

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

@@ -2,6 +2,7 @@ import type {Meta, StoryObj} from '@storybook/web-components';
 
 import {ObcPoiTargetButton} from './poi-target-button';
 import './poi-target-button';
+import {Pointer} from '../../navigation-instruments/poi-target/poi-target';
 
 const meta: Meta<typeof ObcPoiTargetButton> = {
   title: 'Button/POI Target Button',
@@ -10,12 +11,17 @@ const meta: Meta<typeof ObcPoiTargetButton> = {
   args: {
     value: 'checked',
     relativeDirection: 0,
+    pointer: Pointer.None,
   },
   argTypes: {
     value: {
       options: ['unchecked', 'checked'],
       control: {type: 'select'},
     },
+    pointer: {
+      options: [Pointer.None, Pointer.ArrowLeft, Pointer.ArrowRight],
+      control: {type: 'select'},
+    },
     relativeDirection: {
       control: {type: 'range', min: 0, max: 360},
     },

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

@@ -3,6 +3,8 @@ 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';
+import {pointerArrow} from '../../navigation-instruments/poi-target/arrow';
+import {Pointer} from '../../navigation-instruments/poi-target/poi-target';
 
 export enum PoiTargetButtonValue {
   checked = 'checked',
@@ -13,7 +15,7 @@ export enum PoiTargetButtonValue {
 export class ObcPoiTargetButton extends LitElement {
   @property({type: String}) value: PoiTargetButtonValue =
     PoiTargetButtonValue.checked;
-  @property({type: Boolean}) hasPointer = false;
+  @property({type: String}) pointer = Pointer.None;
   @property({type: Number}) relativeDirection = 0;
 
   override render() {
@@ -22,7 +24,7 @@ export class ObcPoiTargetButton extends LitElement {
         class=${classMap({
           wrapper: true,
           ['value-' + this.value]: true,
-          pointer: this.hasPointer,
+          ['pointer-' + this.pointer]: true,
         })}
       >
         <div class="visible-wrapper">
@@ -33,6 +35,9 @@ export class ObcPoiTargetButton extends LitElement {
             <obi-iec-02-ais-target-activated></obi-iec-02-ais-target-activated>
           </div>
         </div>
+        ${this.pointer === Pointer.None || this.pointer === Pointer.Line
+          ? ''
+          : pointerArrow(this.pointer, this.value)}
       </button>
     `;
   }

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

@@ -1,45 +1,42 @@
 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 {
+export interface POILineParams {
   lineColor: string;
   outlineColor: string;
+  width: number;
+  lineWidth: number;
+  outlineWidth: number;
+  shadowAlpha: number;
+  dotStart: number;
+  lineEnd: number;
+  filterDimensions: {x: number; y: number; width: number};
 }
 
-export const POI_STYLES: Record<POIStyle, POIStyleConfig> = {
+export const POI_LINE_CONFIG: Record<POIStyle, POILineParams> = {
   [POIStyle.Normal]: {
     lineColor: 'var(--element-active-inverted-color)',
     outlineColor: 'var(--element-disabled-color)',
+    width: 4,
+    lineWidth: 1,
+    outlineWidth: 1,
+    shadowAlpha: 0.8,
+    dotStart: 2,
+    lineEnd: 3,
+    filterDimensions: {x: 0.5, y: 0.5, width: 3},
   },
-  [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)',
+    width: 8,
+    lineWidth: 1,
+    outlineWidth: 2,
+    shadowAlpha: 0.2,
+    dotStart: 0,
+    lineEnd: 3,
+    filterDimensions: {x: 0, y: 0, width: 4},
   },
 };