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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (62) hide show
  1. package/__snapshots__/building-blocks-poi-graphic-line--primary.png +0 -0
  2. package/__snapshots__/building-blocks-poi-line--primary.png +0 -0
  3. package/__snapshots__/button-poi-target-button--primary.png +0 -0
  4. package/__snapshots__/navigation-instruments-poi-target--primary.png +0 -0
  5. package/custom-elements.json +459 -6
  6. package/dist/components/brilliance-menu/brilliance-menu.d.ts +2 -0
  7. package/dist/components/brilliance-menu/brilliance-menu.d.ts.map +1 -1
  8. package/dist/components/brilliance-menu/brilliance-menu.js +25 -17
  9. package/dist/components/brilliance-menu/brilliance-menu.js.map +1 -1
  10. package/dist/components/poi-target-button/poi-target-button.css.js +119 -0
  11. package/dist/components/poi-target-button/poi-target-button.css.js.map +1 -0
  12. package/dist/components/poi-target-button/poi-target-button.d.ts +19 -0
  13. package/dist/components/poi-target-button/poi-target-button.d.ts.map +1 -0
  14. package/dist/components/poi-target-button/poi-target-button.js +67 -0
  15. package/dist/components/poi-target-button/poi-target-button.js.map +1 -0
  16. package/dist/navigation-instruments/poi-graphic-line/poi-config.d.ts +18 -0
  17. package/dist/navigation-instruments/poi-graphic-line/poi-config.d.ts.map +1 -0
  18. package/dist/navigation-instruments/poi-graphic-line/poi-config.js +64 -0
  19. package/dist/navigation-instruments/poi-graphic-line/poi-config.js.map +1 -0
  20. package/dist/navigation-instruments/poi-graphic-line/poi-graphic-line.css.js +8 -0
  21. package/dist/navigation-instruments/poi-graphic-line/poi-graphic-line.css.js.map +1 -0
  22. package/dist/navigation-instruments/poi-graphic-line/poi-graphic-line.d.ts +15 -0
  23. package/dist/navigation-instruments/poi-graphic-line/poi-graphic-line.d.ts.map +1 -0
  24. package/dist/navigation-instruments/poi-graphic-line/poi-graphic-line.js +134 -0
  25. package/dist/navigation-instruments/poi-graphic-line/poi-graphic-line.js.map +1 -0
  26. package/dist/navigation-instruments/poi-line/poi-line.css.js +14 -0
  27. package/dist/navigation-instruments/poi-line/poi-line.css.js.map +1 -0
  28. package/dist/navigation-instruments/poi-line/poi-line.d.ts +15 -0
  29. package/dist/navigation-instruments/poi-line/poi-line.d.ts.map +1 -0
  30. package/dist/navigation-instruments/poi-line/poi-line.js +49 -0
  31. package/dist/navigation-instruments/poi-line/poi-line.js.map +1 -0
  32. package/dist/navigation-instruments/poi-line/pointerDot.d.ts +5 -0
  33. package/dist/navigation-instruments/poi-line/pointerDot.d.ts.map +1 -0
  34. package/dist/navigation-instruments/poi-line/pointerDot.js +105 -0
  35. package/dist/navigation-instruments/poi-line/pointerDot.js.map +1 -0
  36. package/dist/navigation-instruments/poi-target/arrow.d.ts +3 -0
  37. package/dist/navigation-instruments/poi-target/arrow.d.ts.map +1 -0
  38. package/dist/navigation-instruments/poi-target/arrow.js +60 -0
  39. package/dist/navigation-instruments/poi-target/arrow.js.map +1 -0
  40. package/dist/navigation-instruments/poi-target/poi-target.css.js +26 -0
  41. package/dist/navigation-instruments/poi-target/poi-target.css.js.map +1 -0
  42. package/dist/navigation-instruments/poi-target/poi-target.d.ts +27 -0
  43. package/dist/navigation-instruments/poi-target/poi-target.d.ts.map +1 -0
  44. package/dist/navigation-instruments/poi-target/poi-target.js +126 -0
  45. package/dist/navigation-instruments/poi-target/poi-target.js.map +1 -0
  46. package/package.json +1 -1
  47. package/src/components/brilliance-menu/brilliance-menu.ts +27 -19
  48. package/src/components/poi-target-button/poi-target-button.css +57 -0
  49. package/src/components/poi-target-button/poi-target-button.stories.ts +30 -0
  50. package/src/components/poi-target-button/poi-target-button.ts +47 -0
  51. package/src/navigation-instruments/poi-graphic-line/poi-config.ts +45 -0
  52. package/src/navigation-instruments/poi-graphic-line/poi-graphic-line.css +3 -0
  53. package/src/navigation-instruments/poi-graphic-line/poi-graphic-line.stories.ts +33 -0
  54. package/src/navigation-instruments/poi-graphic-line/poi-graphic-line.ts +116 -0
  55. package/src/navigation-instruments/poi-line/poi-line.css +8 -0
  56. package/src/navigation-instruments/poi-line/poi-line.stories.ts +31 -0
  57. package/src/navigation-instruments/poi-line/poi-line.ts +32 -0
  58. package/src/navigation-instruments/poi-line/pointerDot.ts +102 -0
  59. package/src/navigation-instruments/poi-target/arrow.ts +62 -0
  60. package/src/navigation-instruments/poi-target/poi-target.css +22 -0
  61. package/src/navigation-instruments/poi-target/poi-target.stories.ts +43 -0
  62. package/src/navigation-instruments/poi-target/poi-target.ts +105 -0
@@ -0,0 +1,33 @@
1
+ import type {Meta, StoryObj} from '@storybook/web-components';
2
+ import {ObcPoiGraphicLine} from './poi-graphic-line';
3
+ import './poi-graphic-line';
4
+ import {POIStyle} from './poi-config';
5
+ import {beta6Decorator} from '../../storybook-util';
6
+
7
+ const meta: Meta<typeof ObcPoiGraphicLine> = {
8
+ title: 'Building blocks/POI Graphic Line',
9
+ tags: ['autodocs'],
10
+ component: 'obc-poi-graphic-line',
11
+ argTypes: {
12
+ lineStyle: {
13
+ options: Object.values(POIStyle),
14
+ control: {
15
+ type: 'radio',
16
+ },
17
+ },
18
+
19
+ height: {control: {type: 'range', min: 32, max: 192, step: 2}},
20
+ },
21
+ args: {
22
+ height: 100,
23
+ lineStyle: POIStyle.Enhanced,
24
+ },
25
+ decorators: [beta6Decorator],
26
+ } satisfies Meta<ObcPoiGraphicLine>;
27
+
28
+ export default meta;
29
+ type Story = StoryObj<ObcPoiGraphicLine>;
30
+
31
+ export const Primary: Story = {
32
+ args: {},
33
+ };
@@ -0,0 +1,116 @@
1
+ import {LitElement, html, unsafeCSS} from 'lit';
2
+ import {customElement, property} from 'lit/decorators.js';
3
+ import {POIStyle, POIState, POIStyleConfig, POI_STYLES} from './poi-config';
4
+ import componentStyle from './poi-graphic-line.css?inline';
5
+
6
+ function getLineColors(style: POIStyle): POIStyleConfig {
7
+ const colors = POI_STYLES[style];
8
+ if (!colors) {
9
+ throw new Error(`Style: ${style} not supported`);
10
+ }
11
+ return colors;
12
+ }
13
+
14
+ @customElement('obc-poi-graphic-line')
15
+ export class ObcPoiGraphicLine extends LitElement {
16
+ @property({type: Number}) height: number = 100;
17
+ @property({type: String}) lineStyle: POIStyle = POIStyle.Enhanced;
18
+ @property({type: String}) lineState: POIState = POIState.solid;
19
+
20
+ override render() {
21
+ const colors = getLineColors(this.lineStyle);
22
+ const path = `M2 1L2 ${this.height}`;
23
+
24
+ return html`<div class="wrapper">
25
+ <svg width="4" height="${this.height}" viewBox="0 0 4 ${this.height}">
26
+ <mask
27
+ id="mask0_903_40238"
28
+ style="mask-type:alpha"
29
+ maskUnits="userSpaceOnUse"
30
+ x="0"
31
+ y="0"
32
+ width="4"
33
+ height="${this.height}"
34
+ >
35
+ <path
36
+ d="${path}"
37
+ stroke="url(#paint0_linear_903_40238)"
38
+ stroke-width="4"
39
+ stroke-linecap="round"
40
+ />
41
+ </mask>
42
+ <g mask="url(#mask0_903_40238)">
43
+ <g filter="url(#filter0_d_903_40238)">
44
+ <path
45
+ d=${path}
46
+ stroke="${colors.outlineColor}"
47
+ stroke-width="2"
48
+ stroke-linecap="round"
49
+ />
50
+ </g>
51
+ <path
52
+ d=${path}
53
+ stroke="${colors.lineColor}"
54
+ stroke-width="1"
55
+ stroke-linecap="round"
56
+ />
57
+ </g>
58
+ <defs>
59
+ <filter
60
+ id="filter0_d_903_40238"
61
+ x="0"
62
+ y="0"
63
+ width="4"
64
+ height="${this.height}"
65
+ filterUnits="userSpaceOnUse"
66
+ color-interpolation-filters="sRGB"
67
+ >
68
+ <feFlood flood-opacity="0" result="BackgroundImageFix" />
69
+ <feColorMatrix
70
+ in="SourceAlpha"
71
+ type="matrix"
72
+ values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
73
+ result="hardAlpha"
74
+ />
75
+ <feOffset dy="1" />
76
+ <feGaussianBlur stdDeviation="0.5" />
77
+ <feColorMatrix
78
+ type="matrix"
79
+ values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"
80
+ />
81
+ <feBlend
82
+ mode="normal"
83
+ in2="BackgroundImageFix"
84
+ result="effect1_dropShadow_903_40238"
85
+ />
86
+ <feBlend
87
+ mode="normal"
88
+ in="SourceGraphic"
89
+ in2="effect1_dropShadow_903_40238"
90
+ result="shape"
91
+ />
92
+ </filter>
93
+ <linearGradient
94
+ id="paint0_linear_903_40238"
95
+ x1="2.5"
96
+ y1="1"
97
+ x2="2.5"
98
+ y2="${this.height}"
99
+ gradientUnits="userSpaceOnUse"
100
+ >
101
+ <stop stop-color="#C2C2C2" />
102
+ <stop offset="0.989583" stop-color="#C2C2C2" stop-opacity="0" />
103
+ </linearGradient>
104
+ </defs>
105
+ </svg>
106
+ </div> `;
107
+ }
108
+
109
+ static override styles = unsafeCSS(componentStyle);
110
+ }
111
+
112
+ declare global {
113
+ interface HTMLElementTagNameMap {
114
+ 'obc-poi-graphic-line': ObcPoiGraphicLine;
115
+ }
116
+ }
@@ -0,0 +1,8 @@
1
+ .wrapper {
2
+ padding: 0;
3
+ width: 8px;
4
+ display: flex;
5
+ flex-direction: column;
6
+ align-items: center;
7
+ justify-content: center;
8
+ }
@@ -0,0 +1,31 @@
1
+ import type {Meta, StoryObj} from '@storybook/web-components';
2
+ import {ObcPoiLine} from './poi-line';
3
+ import './poi-line';
4
+ import {POIStyle} from '../poi-graphic-line/poi-config';
5
+ import {beta6Decorator} from '../../storybook-util';
6
+
7
+ const meta: Meta<typeof ObcPoiLine> = {
8
+ title: 'Building blocks/POI Line',
9
+ tags: ['autodocs'],
10
+ component: 'obc-poi-line',
11
+ argTypes: {
12
+ lineStyle: {
13
+ options: [POIStyle.Normal, POIStyle.Enhanced],
14
+ control: {type: 'select'},
15
+ },
16
+ height: {control: {type: 'range', min: 32, max: 196, step: 1}},
17
+ },
18
+ args: {
19
+ lineStyle: POIStyle.Enhanced,
20
+ height: 100,
21
+ },
22
+
23
+ decorators: [beta6Decorator],
24
+ } satisfies Meta<ObcPoiLine>;
25
+
26
+ export default meta;
27
+ type Story = StoryObj<ObcPoiLine>;
28
+
29
+ export const Primary: Story = {
30
+ args: {},
31
+ };
@@ -0,0 +1,32 @@
1
+ import {LitElement, html, unsafeCSS} from 'lit';
2
+ import {customElement, property} from 'lit/decorators.js';
3
+ import compentStyle from './poi-line.css?inline';
4
+ import '../poi-graphic-line/poi-graphic-line';
5
+ import {renderPointerDot} from './pointerDot';
6
+ import {POIStyle} from '../poi-graphic-line/poi-config';
7
+
8
+ @customElement('obc-poi-line')
9
+ export class ObcPoiLine extends LitElement {
10
+ @property({type: Number}) height: number = 96;
11
+ @property({type: String}) lineStyle: POIStyle = POIStyle.Normal;
12
+
13
+ override render() {
14
+ return html`
15
+ <div class="wrapper">
16
+ <obc-poi-graphic-line
17
+ height=${this.height}
18
+ lineStyle=${this.lineStyle}
19
+ ></obc-poi-graphic-line>
20
+ ${renderPointerDot({lineStyle: this.lineStyle})}
21
+ </div>
22
+ `;
23
+ }
24
+
25
+ static override styles = unsafeCSS(compentStyle);
26
+ }
27
+
28
+ declare global {
29
+ interface HTMLElementTagNameMap {
30
+ 'obc-poi-line': ObcPoiLine;
31
+ }
32
+ }
@@ -0,0 +1,102 @@
1
+ import {html} from 'lit';
2
+ import {POIStyle} from '../poi-graphic-line/poi-config';
3
+
4
+ export function renderPointerDot({lineStyle}: {lineStyle: POIStyle}) {
5
+ if (lineStyle === POIStyle.Enhanced)
6
+ return html`<svg
7
+ width="8"
8
+ height="8"
9
+ viewBox="0 0 8 8"
10
+ fill="none"
11
+ xmlns="http://www.w3.org/2000/svg"
12
+ >
13
+ <g filter="url(#filter0_d_1761_3883)">
14
+ <rect x="2" y="1" width="4" height="4" rx="2" fill="#2E5389" />
15
+ <rect x="1.5" y="0.5" width="5" height="5" rx="2.5" stroke="white" />
16
+ </g>
17
+ <defs>
18
+ <filter
19
+ id="filter0_d_1761_3883"
20
+ x="0"
21
+ y="0"
22
+ width="8"
23
+ height="8"
24
+ filterUnits="userSpaceOnUse"
25
+ color-interpolation-filters="sRGB"
26
+ >
27
+ <feFlood flood-opacity="0" result="BackgroundImageFix" />
28
+ <feColorMatrix
29
+ in="SourceAlpha"
30
+ type="matrix"
31
+ values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
32
+ result="hardAlpha"
33
+ />
34
+ <feOffset dy="1" />
35
+ <feGaussianBlur stdDeviation="0.5" />
36
+ <feColorMatrix
37
+ type="matrix"
38
+ values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"
39
+ />
40
+ <feBlend
41
+ mode="normal"
42
+ in2="BackgroundImageFix"
43
+ result="effect1_dropShadow_1761_3883"
44
+ />
45
+ <feBlend
46
+ mode="normal"
47
+ in="SourceGraphic"
48
+ in2="effect1_dropShadow_1761_3883"
49
+ result="shape"
50
+ />
51
+ </filter>
52
+ </defs>
53
+ </svg>`;
54
+ else
55
+ return html`<svg
56
+ width="4"
57
+ height="4"
58
+ viewBox="0 0 4 4"
59
+ fill="none"
60
+ xmlns="http://www.w3.org/2000/svg"
61
+ >
62
+ <g filter="url(#filter0_d_1761_4250)">
63
+ <rect x="1" width="2" height="2" rx="1" fill="white" />
64
+ </g>
65
+ <defs>
66
+ <filter
67
+ id="filter0_d_1761_4250"
68
+ x="0"
69
+ y="0"
70
+ width="4"
71
+ height="4"
72
+ filterUnits="userSpaceOnUse"
73
+ color-interpolation-filters="sRGB"
74
+ >
75
+ <feFlood flood-opacity="0" result="BackgroundImageFix" />
76
+ <feColorMatrix
77
+ in="SourceAlpha"
78
+ type="matrix"
79
+ values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
80
+ result="hardAlpha"
81
+ />
82
+ <feOffset dy="1" />
83
+ <feGaussianBlur stdDeviation="0.5" />
84
+ <feColorMatrix
85
+ type="matrix"
86
+ values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"
87
+ />
88
+ <feBlend
89
+ mode="normal"
90
+ in2="BackgroundImageFix"
91
+ result="effect1_dropShadow_1761_4250"
92
+ />
93
+ <feBlend
94
+ mode="normal"
95
+ in="SourceGraphic"
96
+ in2="effect1_dropShadow_1761_4250"
97
+ result="shape"
98
+ />
99
+ </filter>
100
+ </defs>
101
+ </svg> `;
102
+ }
@@ -0,0 +1,62 @@
1
+ import {Pointer} from './poi-target';
2
+ import {html} from 'lit';
3
+
4
+ export function pointerArrow(pointerType: Pointer, value: string) {
5
+ const path =
6
+ pointerType === Pointer.ArrowLeft
7
+ ? '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'
8
+ : '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';
9
+
10
+ let fill = 'var(--instrument-regular-secondary-color)';
11
+ if (value === 'checked') fill = 'var(--instrument-enhanced-secondary-color)';
12
+
13
+ const pointer = html`<svg
14
+ width="16"
15
+ height="16"
16
+ viewBox="0 0 16 16"
17
+ fill="none"
18
+ xmlns="http://www.w3.org/2000/svg"
19
+ >
20
+ <g filter="url(#filter0_d_903_44142)">
21
+ <path d=${path} fill="${fill}" stroke="var(--border-silhouette-color)" />
22
+ </g>
23
+ <defs>
24
+ <filter
25
+ id="filter0_d_903_44142"
26
+ x="-1"
27
+ y="0"
28
+ width="18"
29
+ height="18"
30
+ filterUnits="userSpaceOnUse"
31
+ color-interpolation-filters="sRGB"
32
+ >
33
+ <feFlood flood-opacity="0" result="BackgroundImageFix" />
34
+ <feColorMatrix
35
+ in="SourceAlpha"
36
+ type="matrix"
37
+ values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
38
+ result="hardAlpha"
39
+ />
40
+ <feOffset dy="1" />
41
+ <feGaussianBlur stdDeviation="0.5" />
42
+ <feColorMatrix
43
+ type="matrix"
44
+ values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"
45
+ />
46
+ <feBlend
47
+ mode="normal"
48
+ in2="BackgroundImageFix"
49
+ result="effect1_dropShadow_903_44142"
50
+ />
51
+ <feBlend
52
+ mode="normal"
53
+ in="SourceGraphic"
54
+ in2="effect1_dropShadow_903_44142"
55
+ result="shape"
56
+ />
57
+ </filter>
58
+ </defs>
59
+ </svg> `;
60
+
61
+ return pointer;
62
+ }
@@ -0,0 +1,22 @@
1
+ .wrapper {
2
+ padding: 0;
3
+ background: transparent;
4
+ appearance: none;
5
+ width: 48px;
6
+ height: auto;
7
+ border: none;
8
+ display: flex;
9
+ flex-direction: column;
10
+ align-items: center;
11
+ justify-content: center;
12
+
13
+ &.type-arrow-left {
14
+ width: 56px;
15
+ flex-direction: row-reverse;
16
+ }
17
+
18
+ &.type-arrow-right {
19
+ width: 56px;
20
+ flex-direction: row;
21
+ }
22
+ }
@@ -0,0 +1,43 @@
1
+ import type {Meta, StoryObj} from '@storybook/web-components';
2
+ import {ObcPoiTarget, Pointer} from './poi-target';
3
+ import './poi-target';
4
+ import {beta6Decorator} from '../../storybook-util';
5
+
6
+ const meta: Meta<typeof ObcPoiTarget> = {
7
+ title: 'Navigation Instruments/POI Target',
8
+ tags: ['autodocs'],
9
+ component: 'obc-poi-target',
10
+ args: {
11
+ height: 188,
12
+ value: 'checked',
13
+ pointerType: Pointer.Line,
14
+ relativeDirection: 0,
15
+ },
16
+ argTypes: {
17
+ height: {control: {type: 'range', min: 32, max: 243, step: 1}},
18
+ value: {
19
+ options: ['enabled', 'checked'],
20
+ control: {type: 'select'},
21
+ },
22
+ pointerType: {
23
+ options: [
24
+ Pointer.Line,
25
+ Pointer.ArrowLeft,
26
+ Pointer.ArrowRight,
27
+ Pointer.None,
28
+ ],
29
+ control: {type: 'select'},
30
+ },
31
+ relativeDirection: {
32
+ control: {type: 'range', min: 0, max: 360},
33
+ },
34
+ },
35
+ decorators: [beta6Decorator],
36
+ } satisfies Meta<ObcPoiTarget>;
37
+
38
+ export default meta;
39
+ type Story = StoryObj<ObcPoiTarget>;
40
+
41
+ export const Primary: Story = {
42
+ args: {},
43
+ };
@@ -0,0 +1,105 @@
1
+ import {LitElement, html, unsafeCSS} from 'lit';
2
+ import {customElement, property} from 'lit/decorators.js';
3
+ import compentStyle from './poi-target.css?inline';
4
+ import {classMap} from 'lit/directives/class-map.js';
5
+ import '../poi-line/poi-line';
6
+ import '../../components/poi-target-button/poi-target-button';
7
+ import {POIStyle} from '../poi-graphic-line/poi-config';
8
+ import {pointerArrow} from './arrow';
9
+ import {PoiTargetButtonValue} from '../../components/poi-target-button/poi-target-button';
10
+
11
+ export enum TargetValue {
12
+ enabled = 'enabled',
13
+ checked = 'checked',
14
+ }
15
+
16
+ function valueToPointerStyle(value: TargetValue): POIStyle {
17
+ let style = null;
18
+ switch (value) {
19
+ case TargetValue.enabled:
20
+ style = POIStyle.Normal;
21
+ break;
22
+ case TargetValue.checked:
23
+ style = POIStyle.Enhanced;
24
+ break;
25
+ default:
26
+ throw new Error(`Value has no style: ${style}`);
27
+ }
28
+ return style;
29
+ }
30
+
31
+ function valueToButtonStyle(value: TargetValue): PoiTargetButtonValue {
32
+ switch (value) {
33
+ case TargetValue.enabled:
34
+ return PoiTargetButtonValue.unchecked;
35
+ case 'checked':
36
+ return PoiTargetButtonValue.checked;
37
+ default:
38
+ throw new Error(`Value has no style: ${value}`);
39
+ }
40
+ }
41
+
42
+ export enum Pointer {
43
+ Line = 'line',
44
+ ArrowLeft = 'arrow-left',
45
+ ArrowRight = 'arrow-right',
46
+ None = 'null',
47
+ }
48
+
49
+ @customElement('obc-poi-target')
50
+ export class ObcPoiTarget extends LitElement {
51
+ @property({type: Number}) height: number = 188;
52
+ @property({type: String}) value: TargetValue = TargetValue.enabled;
53
+ @property({type: String}) pointerType: Pointer = Pointer.Line;
54
+ @property({type: Number}) relativeDirection = 0;
55
+
56
+ override render() {
57
+ let pointer = null;
58
+ let hasArrowPointer = false;
59
+ switch (this.pointerType) {
60
+ case Pointer.Line:
61
+ pointer = html`<obc-poi-line
62
+ height=${this.height}
63
+ lineStyle=${valueToPointerStyle(this.value)}
64
+ ></obc-poi-line>`;
65
+ break;
66
+ case Pointer.ArrowLeft:
67
+ pointer = pointerArrow(this.pointerType, this.value);
68
+ hasArrowPointer = true;
69
+ break;
70
+ case Pointer.ArrowRight:
71
+ pointer = pointerArrow(this.pointerType, this.value);
72
+ hasArrowPointer = true;
73
+ break;
74
+ case Pointer.None:
75
+ pointer = null;
76
+ break;
77
+ default:
78
+ throw new Error(`Pointer type ${this.pointerType} not supported`);
79
+ }
80
+
81
+ return html`
82
+ <div
83
+ class=${classMap({
84
+ wrapper: true,
85
+ ['type-' + this.pointerType]: true,
86
+ })}
87
+ >
88
+ <obc-poi-target-button
89
+ .value=${valueToButtonStyle(this.value)}
90
+ .hasPointer=${hasArrowPointer}
91
+ .relativeDirection=${this.relativeDirection}
92
+ ></obc-poi-target-button>
93
+ ${pointer}
94
+ </div>
95
+ `;
96
+ }
97
+
98
+ static override styles = unsafeCSS(compentStyle);
99
+ }
100
+
101
+ declare global {
102
+ interface HTMLElementTagNameMap {
103
+ 'obc-poi-target': ObcPoiTarget;
104
+ }
105
+ }