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

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

@@ -0,0 +1,116 @@
+import {LitElement, html, unsafeCSS} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import {POIStyle, POIState, POIStyleConfig, POI_STYLES} from './poi-config';
+import componentStyle from './poi-graphic-line.css?inline';
+
+function getLineColors(style: POIStyle): POIStyleConfig {
+  const colors = POI_STYLES[style];
+  if (!colors) {
+    throw new Error(`Style: ${style} not supported`);
+  }
+  return colors;
+}
+
+@customElement('obc-poi-graphic-line')
+export class ObcPoiGraphicLine extends LitElement {
+  @property({type: Number}) height: number = 100;
+  @property({type: String}) lineStyle: POIStyle = POIStyle.Enhanced;
+  @property({type: String}) lineState: POIState = POIState.solid;
+
+  override render() {
+    const colors = getLineColors(this.lineStyle);
+    const path = `M2 1L2 ${this.height}`;
+
+    return html`<div class="wrapper">
+      <svg width="4" height="${this.height}" viewBox="0 0 4 ${this.height}">
+        <mask
+          id="mask0_903_40238"
+          style="mask-type:alpha"
+          maskUnits="userSpaceOnUse"
+          x="0"
+          y="0"
+          width="4"
+          height="${this.height}"
+        >
+          <path
+            d="${path}"
+            stroke="url(#paint0_linear_903_40238)"
+            stroke-width="4"
+            stroke-linecap="round"
+          />
+        </mask>
+        <g mask="url(#mask0_903_40238)">
+          <g filter="url(#filter0_d_903_40238)">
+            <path
+              d=${path}
+              stroke="${colors.outlineColor}"
+              stroke-width="2"
+              stroke-linecap="round"
+            />
+          </g>
+          <path
+            d=${path}
+            stroke="${colors.lineColor}"
+            stroke-width="1"
+            stroke-linecap="round"
+          />
+        </g>
+        <defs>
+          <filter
+            id="filter0_d_903_40238"
+            x="0"
+            y="0"
+            width="4"
+            height="${this.height}"
+            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_40238"
+            />
+            <feBlend
+              mode="normal"
+              in="SourceGraphic"
+              in2="effect1_dropShadow_903_40238"
+              result="shape"
+            />
+          </filter>
+          <linearGradient
+            id="paint0_linear_903_40238"
+            x1="2.5"
+            y1="1"
+            x2="2.5"
+            y2="${this.height}"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stop-color="#C2C2C2" />
+            <stop offset="0.989583" stop-color="#C2C2C2" stop-opacity="0" />
+          </linearGradient>
+        </defs>
+      </svg>
+    </div> `;
+  }
+
+  static override styles = unsafeCSS(componentStyle);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obc-poi-graphic-line': ObcPoiGraphicLine;
+  }
+}

package/src/navigation-instruments/poi-line/poi-line.css

@@ -0,0 +1,8 @@
+.wrapper {
+  padding: 0;
+  width: 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}

package/src/navigation-instruments/poi-line/poi-line.stories.ts

@@ -0,0 +1,31 @@
+import type {Meta, StoryObj} from '@storybook/web-components';
+import {ObcPoiLine} from './poi-line';
+import './poi-line';
+import {POIStyle} from '../poi-graphic-line/poi-config';
+import {beta6Decorator} from '../../storybook-util';
+
+const meta: Meta<typeof ObcPoiLine> = {
+  title: 'Building blocks/POI Line',
+  tags: ['autodocs'],
+  component: 'obc-poi-line',
+  argTypes: {
+    lineStyle: {
+      options: [POIStyle.Normal, POIStyle.Enhanced],
+      control: {type: 'select'},
+    },
+    height: {control: {type: 'range', min: 32, max: 196, step: 1}},
+  },
+  args: {
+    lineStyle: POIStyle.Enhanced,
+    height: 100,
+  },
+
+  decorators: [beta6Decorator],
+} satisfies Meta<ObcPoiLine>;
+
+export default meta;
+type Story = StoryObj<ObcPoiLine>;
+
+export const Primary: Story = {
+  args: {},
+};

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

@@ -0,0 +1,32 @@
+import {LitElement, html, unsafeCSS} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import compentStyle from './poi-line.css?inline';
+import '../poi-graphic-line/poi-graphic-line';
+import {renderPointerDot} from './pointerDot';
+import {POIStyle} from '../poi-graphic-line/poi-config';
+
+@customElement('obc-poi-line')
+export class ObcPoiLine extends LitElement {
+  @property({type: Number}) height: number = 96;
+  @property({type: String}) lineStyle: POIStyle = POIStyle.Normal;
+
+  override render() {
+    return html`
+      <div class="wrapper">
+        <obc-poi-graphic-line
+          height=${this.height}
+          lineStyle=${this.lineStyle}
+        ></obc-poi-graphic-line>
+        ${renderPointerDot({lineStyle: this.lineStyle})}
+      </div>
+    `;
+  }
+
+  static override styles = unsafeCSS(compentStyle);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obc-poi-line': ObcPoiLine;
+  }
+}

package/src/navigation-instruments/poi-line/pointerDot.ts

@@ -0,0 +1,102 @@
+import {html} from 'lit';
+import {POIStyle} from '../poi-graphic-line/poi-config';
+
+export function renderPointerDot({lineStyle}: {lineStyle: POIStyle}) {
+  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> `;
+}

package/src/navigation-instruments/poi-target/arrow.ts

@@ -0,0 +1,62 @@
+import {Pointer} from './poi-target';
+import {html} from 'lit';
+
+export function pointerArrow(pointerType: Pointer, value: string) {
+  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;
+}

package/src/navigation-instruments/poi-target/poi-target.css

@@ -0,0 +1,22 @@
+.wrapper {
+  padding: 0;
+  background: transparent;
+  appearance: none;
+  width: 48px;
+  height: auto;
+  border: none;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  &.type-arrow-left {
+    width: 56px;
+    flex-direction: row-reverse;
+  }
+
+  &.type-arrow-right {
+    width: 56px;
+    flex-direction: row;
+  }
+}

package/src/navigation-instruments/poi-target/poi-target.stories.ts

@@ -0,0 +1,43 @@
+import type {Meta, StoryObj} from '@storybook/web-components';
+import {ObcPoiTarget, Pointer} from './poi-target';
+import './poi-target';
+import {beta6Decorator} from '../../storybook-util';
+
+const meta: Meta<typeof ObcPoiTarget> = {
+  title: 'Navigation Instruments/POI Target',
+  tags: ['autodocs'],
+  component: 'obc-poi-target',
+  args: {
+    height: 188,
+    value: 'checked',
+    pointerType: Pointer.Line,
+    relativeDirection: 0,
+  },
+  argTypes: {
+    height: {control: {type: 'range', min: 32, max: 243, step: 1}},
+    value: {
+      options: ['enabled', 'checked'],
+      control: {type: 'select'},
+    },
+    pointerType: {
+      options: [
+        Pointer.Line,
+        Pointer.ArrowLeft,
+        Pointer.ArrowRight,
+        Pointer.None,
+      ],
+      control: {type: 'select'},
+    },
+    relativeDirection: {
+      control: {type: 'range', min: 0, max: 360},
+    },
+  },
+  decorators: [beta6Decorator],
+} satisfies Meta<ObcPoiTarget>;
+
+export default meta;
+type Story = StoryObj<ObcPoiTarget>;
+
+export const Primary: Story = {
+  args: {},
+};

package/src/navigation-instruments/poi-target/poi-target.ts

@@ -0,0 +1,105 @@
+import {LitElement, html, unsafeCSS} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import compentStyle from './poi-target.css?inline';
+import {classMap} from 'lit/directives/class-map.js';
+import '../poi-line/poi-line';
+import '../../components/poi-target-button/poi-target-button';
+import {POIStyle} from '../poi-graphic-line/poi-config';
+import {pointerArrow} from './arrow';
+import {PoiTargetButtonValue} from '../../components/poi-target-button/poi-target-button';
+
+export enum TargetValue {
+  enabled = 'enabled',
+  checked = 'checked',
+}
+
+function valueToPointerStyle(value: TargetValue): POIStyle {
+  let style = null;
+  switch (value) {
+    case TargetValue.enabled:
+      style = POIStyle.Normal;
+      break;
+    case TargetValue.checked:
+      style = POIStyle.Enhanced;
+      break;
+    default:
+      throw new Error(`Value has no style: ${style}`);
+  }
+  return style;
+}
+
+function valueToButtonStyle(value: TargetValue): PoiTargetButtonValue {
+  switch (value) {
+    case TargetValue.enabled:
+      return PoiTargetButtonValue.unchecked;
+    case 'checked':
+      return PoiTargetButtonValue.checked;
+    default:
+      throw new Error(`Value has no style: ${value}`);
+  }
+}
+
+export enum Pointer {
+  Line = 'line',
+  ArrowLeft = 'arrow-left',
+  ArrowRight = 'arrow-right',
+  None = 'null',
+}
+
+@customElement('obc-poi-target')
+export class ObcPoiTarget extends LitElement {
+  @property({type: Number}) height: number = 188;
+  @property({type: String}) value: TargetValue = TargetValue.enabled;
+  @property({type: String}) pointerType: Pointer = Pointer.Line;
+  @property({type: Number}) relativeDirection = 0;
+
+  override render() {
+    let pointer = null;
+    let hasArrowPointer = false;
+    switch (this.pointerType) {
+      case Pointer.Line:
+        pointer = html`<obc-poi-line
+          height=${this.height}
+          lineStyle=${valueToPointerStyle(this.value)}
+        ></obc-poi-line>`;
+        break;
+      case Pointer.ArrowLeft:
+        pointer = pointerArrow(this.pointerType, this.value);
+        hasArrowPointer = true;
+        break;
+      case Pointer.ArrowRight:
+        pointer = pointerArrow(this.pointerType, this.value);
+        hasArrowPointer = true;
+        break;
+      case Pointer.None:
+        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>
+    `;
+  }
+
+  static override styles = unsafeCSS(compentStyle);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obc-poi-target': ObcPoiTarget;
+  }
+}