@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.
- package/__snapshots__/building-blocks-poi-graphic-line--primary.png +0 -0
- package/__snapshots__/building-blocks-poi-line--primary.png +0 -0
- package/__snapshots__/button-poi-target-button--primary.png +0 -0
- package/__snapshots__/navigation-instruments-poi-target--primary.png +0 -0
- package/custom-elements.json +459 -6
- package/dist/components/brilliance-menu/brilliance-menu.d.ts +2 -0
- package/dist/components/brilliance-menu/brilliance-menu.d.ts.map +1 -1
- package/dist/components/brilliance-menu/brilliance-menu.js +25 -17
- package/dist/components/brilliance-menu/brilliance-menu.js.map +1 -1
- package/dist/components/poi-target-button/poi-target-button.css.js +119 -0
- package/dist/components/poi-target-button/poi-target-button.css.js.map +1 -0
- package/dist/components/poi-target-button/poi-target-button.d.ts +19 -0
- package/dist/components/poi-target-button/poi-target-button.d.ts.map +1 -0
- package/dist/components/poi-target-button/poi-target-button.js +67 -0
- package/dist/components/poi-target-button/poi-target-button.js.map +1 -0
- package/dist/navigation-instruments/poi-graphic-line/poi-config.d.ts +18 -0
- package/dist/navigation-instruments/poi-graphic-line/poi-config.d.ts.map +1 -0
- package/dist/navigation-instruments/poi-graphic-line/poi-config.js +64 -0
- package/dist/navigation-instruments/poi-graphic-line/poi-config.js.map +1 -0
- package/dist/navigation-instruments/poi-graphic-line/poi-graphic-line.css.js +8 -0
- package/dist/navigation-instruments/poi-graphic-line/poi-graphic-line.css.js.map +1 -0
- package/dist/navigation-instruments/poi-graphic-line/poi-graphic-line.d.ts +15 -0
- package/dist/navigation-instruments/poi-graphic-line/poi-graphic-line.d.ts.map +1 -0
- package/dist/navigation-instruments/poi-graphic-line/poi-graphic-line.js +134 -0
- package/dist/navigation-instruments/poi-graphic-line/poi-graphic-line.js.map +1 -0
- package/dist/navigation-instruments/poi-line/poi-line.css.js +14 -0
- package/dist/navigation-instruments/poi-line/poi-line.css.js.map +1 -0
- package/dist/navigation-instruments/poi-line/poi-line.d.ts +15 -0
- package/dist/navigation-instruments/poi-line/poi-line.d.ts.map +1 -0
- package/dist/navigation-instruments/poi-line/poi-line.js +49 -0
- package/dist/navigation-instruments/poi-line/poi-line.js.map +1 -0
- package/dist/navigation-instruments/poi-line/pointerDot.d.ts +5 -0
- package/dist/navigation-instruments/poi-line/pointerDot.d.ts.map +1 -0
- package/dist/navigation-instruments/poi-line/pointerDot.js +105 -0
- package/dist/navigation-instruments/poi-line/pointerDot.js.map +1 -0
- package/dist/navigation-instruments/poi-target/arrow.d.ts +3 -0
- package/dist/navigation-instruments/poi-target/arrow.d.ts.map +1 -0
- package/dist/navigation-instruments/poi-target/arrow.js +60 -0
- package/dist/navigation-instruments/poi-target/arrow.js.map +1 -0
- package/dist/navigation-instruments/poi-target/poi-target.css.js +26 -0
- package/dist/navigation-instruments/poi-target/poi-target.css.js.map +1 -0
- package/dist/navigation-instruments/poi-target/poi-target.d.ts +27 -0
- package/dist/navigation-instruments/poi-target/poi-target.d.ts.map +1 -0
- package/dist/navigation-instruments/poi-target/poi-target.js +126 -0
- package/dist/navigation-instruments/poi-target/poi-target.js.map +1 -0
- package/package.json +1 -1
- package/src/components/brilliance-menu/brilliance-menu.ts +27 -19
- package/src/components/poi-target-button/poi-target-button.css +57 -0
- package/src/components/poi-target-button/poi-target-button.stories.ts +30 -0
- package/src/components/poi-target-button/poi-target-button.ts +47 -0
- package/src/navigation-instruments/poi-graphic-line/poi-config.ts +45 -0
- package/src/navigation-instruments/poi-graphic-line/poi-graphic-line.css +3 -0
- package/src/navigation-instruments/poi-graphic-line/poi-graphic-line.stories.ts +33 -0
- package/src/navigation-instruments/poi-graphic-line/poi-graphic-line.ts +116 -0
- package/src/navigation-instruments/poi-line/poi-line.css +8 -0
- package/src/navigation-instruments/poi-line/poi-line.stories.ts +31 -0
- package/src/navigation-instruments/poi-line/poi-line.ts +32 -0
- package/src/navigation-instruments/poi-line/pointerDot.ts +102 -0
- package/src/navigation-instruments/poi-target/arrow.ts +62 -0
- package/src/navigation-instruments/poi-target/poi-target.css +22 -0
- package/src/navigation-instruments/poi-target/poi-target.stories.ts +43 -0
- package/src/navigation-instruments/poi-target/poi-target.ts +105 -0
@@ -0,0 +1,105 @@
|
|
1
|
+
import { html } from "lit";
|
2
|
+
import { POIStyle } from "../poi-graphic-line/poi-config.js";
|
3
|
+
function renderPointerDot({ lineStyle }) {
|
4
|
+
if (lineStyle === POIStyle.Enhanced)
|
5
|
+
return html`<svg
|
6
|
+
width="8"
|
7
|
+
height="8"
|
8
|
+
viewBox="0 0 8 8"
|
9
|
+
fill="none"
|
10
|
+
xmlns="http://www.w3.org/2000/svg"
|
11
|
+
>
|
12
|
+
<g filter="url(#filter0_d_1761_3883)">
|
13
|
+
<rect x="2" y="1" width="4" height="4" rx="2" fill="#2E5389" />
|
14
|
+
<rect x="1.5" y="0.5" width="5" height="5" rx="2.5" stroke="white" />
|
15
|
+
</g>
|
16
|
+
<defs>
|
17
|
+
<filter
|
18
|
+
id="filter0_d_1761_3883"
|
19
|
+
x="0"
|
20
|
+
y="0"
|
21
|
+
width="8"
|
22
|
+
height="8"
|
23
|
+
filterUnits="userSpaceOnUse"
|
24
|
+
color-interpolation-filters="sRGB"
|
25
|
+
>
|
26
|
+
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
27
|
+
<feColorMatrix
|
28
|
+
in="SourceAlpha"
|
29
|
+
type="matrix"
|
30
|
+
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
|
31
|
+
result="hardAlpha"
|
32
|
+
/>
|
33
|
+
<feOffset dy="1" />
|
34
|
+
<feGaussianBlur stdDeviation="0.5" />
|
35
|
+
<feColorMatrix
|
36
|
+
type="matrix"
|
37
|
+
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"
|
38
|
+
/>
|
39
|
+
<feBlend
|
40
|
+
mode="normal"
|
41
|
+
in2="BackgroundImageFix"
|
42
|
+
result="effect1_dropShadow_1761_3883"
|
43
|
+
/>
|
44
|
+
<feBlend
|
45
|
+
mode="normal"
|
46
|
+
in="SourceGraphic"
|
47
|
+
in2="effect1_dropShadow_1761_3883"
|
48
|
+
result="shape"
|
49
|
+
/>
|
50
|
+
</filter>
|
51
|
+
</defs>
|
52
|
+
</svg>`;
|
53
|
+
else
|
54
|
+
return html`<svg
|
55
|
+
width="4"
|
56
|
+
height="4"
|
57
|
+
viewBox="0 0 4 4"
|
58
|
+
fill="none"
|
59
|
+
xmlns="http://www.w3.org/2000/svg"
|
60
|
+
>
|
61
|
+
<g filter="url(#filter0_d_1761_4250)">
|
62
|
+
<rect x="1" width="2" height="2" rx="1" fill="white" />
|
63
|
+
</g>
|
64
|
+
<defs>
|
65
|
+
<filter
|
66
|
+
id="filter0_d_1761_4250"
|
67
|
+
x="0"
|
68
|
+
y="0"
|
69
|
+
width="4"
|
70
|
+
height="4"
|
71
|
+
filterUnits="userSpaceOnUse"
|
72
|
+
color-interpolation-filters="sRGB"
|
73
|
+
>
|
74
|
+
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
75
|
+
<feColorMatrix
|
76
|
+
in="SourceAlpha"
|
77
|
+
type="matrix"
|
78
|
+
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
|
79
|
+
result="hardAlpha"
|
80
|
+
/>
|
81
|
+
<feOffset dy="1" />
|
82
|
+
<feGaussianBlur stdDeviation="0.5" />
|
83
|
+
<feColorMatrix
|
84
|
+
type="matrix"
|
85
|
+
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"
|
86
|
+
/>
|
87
|
+
<feBlend
|
88
|
+
mode="normal"
|
89
|
+
in2="BackgroundImageFix"
|
90
|
+
result="effect1_dropShadow_1761_4250"
|
91
|
+
/>
|
92
|
+
<feBlend
|
93
|
+
mode="normal"
|
94
|
+
in="SourceGraphic"
|
95
|
+
in2="effect1_dropShadow_1761_4250"
|
96
|
+
result="shape"
|
97
|
+
/>
|
98
|
+
</filter>
|
99
|
+
</defs>
|
100
|
+
</svg> `;
|
101
|
+
}
|
102
|
+
export {
|
103
|
+
renderPointerDot
|
104
|
+
};
|
105
|
+
//# sourceMappingURL=pointerDot.js.map
|
@@ -0,0 +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;"}
|
@@ -0,0 +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"}
|
@@ -0,0 +1,60 @@
|
|
1
|
+
import { Pointer } from "./poi-target.js";
|
2
|
+
import { html } from "lit";
|
3
|
+
function pointerArrow(pointerType, value) {
|
4
|
+
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";
|
5
|
+
let fill = "var(--instrument-regular-secondary-color)";
|
6
|
+
if (value === "checked")
|
7
|
+
fill = "var(--instrument-enhanced-secondary-color)";
|
8
|
+
const pointer = html`<svg
|
9
|
+
width="16"
|
10
|
+
height="16"
|
11
|
+
viewBox="0 0 16 16"
|
12
|
+
fill="none"
|
13
|
+
xmlns="http://www.w3.org/2000/svg"
|
14
|
+
>
|
15
|
+
<g filter="url(#filter0_d_903_44142)">
|
16
|
+
<path d=${path} fill="${fill}" stroke="var(--border-silhouette-color)" />
|
17
|
+
</g>
|
18
|
+
<defs>
|
19
|
+
<filter
|
20
|
+
id="filter0_d_903_44142"
|
21
|
+
x="-1"
|
22
|
+
y="0"
|
23
|
+
width="18"
|
24
|
+
height="18"
|
25
|
+
filterUnits="userSpaceOnUse"
|
26
|
+
color-interpolation-filters="sRGB"
|
27
|
+
>
|
28
|
+
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
29
|
+
<feColorMatrix
|
30
|
+
in="SourceAlpha"
|
31
|
+
type="matrix"
|
32
|
+
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
|
33
|
+
result="hardAlpha"
|
34
|
+
/>
|
35
|
+
<feOffset dy="1" />
|
36
|
+
<feGaussianBlur stdDeviation="0.5" />
|
37
|
+
<feColorMatrix
|
38
|
+
type="matrix"
|
39
|
+
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"
|
40
|
+
/>
|
41
|
+
<feBlend
|
42
|
+
mode="normal"
|
43
|
+
in2="BackgroundImageFix"
|
44
|
+
result="effect1_dropShadow_903_44142"
|
45
|
+
/>
|
46
|
+
<feBlend
|
47
|
+
mode="normal"
|
48
|
+
in="SourceGraphic"
|
49
|
+
in2="effect1_dropShadow_903_44142"
|
50
|
+
result="shape"
|
51
|
+
/>
|
52
|
+
</filter>
|
53
|
+
</defs>
|
54
|
+
</svg> `;
|
55
|
+
return pointer;
|
56
|
+
}
|
57
|
+
export {
|
58
|
+
pointerArrow
|
59
|
+
};
|
60
|
+
//# sourceMappingURL=arrow.js.map
|
@@ -0,0 +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;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;"}
|
@@ -0,0 +1,26 @@
|
|
1
|
+
import { css } from "lit";
|
2
|
+
const compentStyle = css`.wrapper {
|
3
|
+
padding: 0;
|
4
|
+
background: transparent;
|
5
|
+
appearance: none;
|
6
|
+
width: 48px;
|
7
|
+
height: auto;
|
8
|
+
border: none;
|
9
|
+
display: flex;
|
10
|
+
flex-direction: column;
|
11
|
+
align-items: center;
|
12
|
+
justify-content: center;
|
13
|
+
}
|
14
|
+
.wrapper.type-arrow-left {
|
15
|
+
width: 56px;
|
16
|
+
flex-direction: row-reverse;
|
17
|
+
}
|
18
|
+
.wrapper.type-arrow-right {
|
19
|
+
width: 56px;
|
20
|
+
flex-direction: row;
|
21
|
+
}
|
22
|
+
`;
|
23
|
+
export {
|
24
|
+
compentStyle as default
|
25
|
+
};
|
26
|
+
//# sourceMappingURL=poi-target.css.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"poi-target.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}
|
@@ -0,0 +1,27 @@
|
|
1
|
+
import { LitElement } from 'lit';
|
2
|
+
import '../poi-line/poi-line';
|
3
|
+
import '../../components/poi-target-button/poi-target-button';
|
4
|
+
export declare enum TargetValue {
|
5
|
+
enabled = "enabled",
|
6
|
+
checked = "checked"
|
7
|
+
}
|
8
|
+
export declare enum Pointer {
|
9
|
+
Line = "line",
|
10
|
+
ArrowLeft = "arrow-left",
|
11
|
+
ArrowRight = "arrow-right",
|
12
|
+
None = "null"
|
13
|
+
}
|
14
|
+
export declare class ObcPoiTarget extends LitElement {
|
15
|
+
height: number;
|
16
|
+
value: TargetValue;
|
17
|
+
pointerType: Pointer;
|
18
|
+
relativeDirection: number;
|
19
|
+
render(): import("lit-html").TemplateResult<1>;
|
20
|
+
static styles: import("lit").CSSResult;
|
21
|
+
}
|
22
|
+
declare global {
|
23
|
+
interface HTMLElementTagNameMap {
|
24
|
+
'obc-poi-target': ObcPoiTarget;
|
25
|
+
}
|
26
|
+
}
|
27
|
+
//# sourceMappingURL=poi-target.d.ts.map
|
@@ -0,0 +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"}
|
@@ -0,0 +1,126 @@
|
|
1
|
+
import { unsafeCSS, LitElement, html } from "lit";
|
2
|
+
import { property, customElement } from "lit/decorators.js";
|
3
|
+
import compentStyle from "./poi-target.css.js";
|
4
|
+
import { classMap } from "lit/directives/class-map.js";
|
5
|
+
import "../poi-line/poi-line.js";
|
6
|
+
import { PoiTargetButtonValue } from "../../components/poi-target-button/poi-target-button.js";
|
7
|
+
import { POIStyle } from "../poi-graphic-line/poi-config.js";
|
8
|
+
import { pointerArrow } from "./arrow.js";
|
9
|
+
var __defProp = Object.defineProperty;
|
10
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
11
|
+
var __decorateClass = (decorators, target, key, kind) => {
|
12
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
|
13
|
+
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
14
|
+
if (decorator = decorators[i])
|
15
|
+
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
16
|
+
if (kind && result)
|
17
|
+
__defProp(target, key, result);
|
18
|
+
return result;
|
19
|
+
};
|
20
|
+
var TargetValue = /* @__PURE__ */ ((TargetValue2) => {
|
21
|
+
TargetValue2["enabled"] = "enabled";
|
22
|
+
TargetValue2["checked"] = "checked";
|
23
|
+
return TargetValue2;
|
24
|
+
})(TargetValue || {});
|
25
|
+
function valueToPointerStyle(value) {
|
26
|
+
let style = null;
|
27
|
+
switch (value) {
|
28
|
+
case "enabled":
|
29
|
+
style = POIStyle.Normal;
|
30
|
+
break;
|
31
|
+
case "checked":
|
32
|
+
style = POIStyle.Enhanced;
|
33
|
+
break;
|
34
|
+
default:
|
35
|
+
throw new Error(`Value has no style: ${style}`);
|
36
|
+
}
|
37
|
+
return style;
|
38
|
+
}
|
39
|
+
function valueToButtonStyle(value) {
|
40
|
+
switch (value) {
|
41
|
+
case "enabled":
|
42
|
+
return PoiTargetButtonValue.unchecked;
|
43
|
+
case "checked":
|
44
|
+
return PoiTargetButtonValue.checked;
|
45
|
+
default:
|
46
|
+
throw new Error(`Value has no style: ${value}`);
|
47
|
+
}
|
48
|
+
}
|
49
|
+
var Pointer = /* @__PURE__ */ ((Pointer2) => {
|
50
|
+
Pointer2["Line"] = "line";
|
51
|
+
Pointer2["ArrowLeft"] = "arrow-left";
|
52
|
+
Pointer2["ArrowRight"] = "arrow-right";
|
53
|
+
Pointer2["None"] = "null";
|
54
|
+
return Pointer2;
|
55
|
+
})(Pointer || {});
|
56
|
+
let ObcPoiTarget = class extends LitElement {
|
57
|
+
constructor() {
|
58
|
+
super(...arguments);
|
59
|
+
this.height = 188;
|
60
|
+
this.value = "enabled";
|
61
|
+
this.pointerType = "line";
|
62
|
+
this.relativeDirection = 0;
|
63
|
+
}
|
64
|
+
render() {
|
65
|
+
let pointer = null;
|
66
|
+
let hasArrowPointer = false;
|
67
|
+
switch (this.pointerType) {
|
68
|
+
case "line":
|
69
|
+
pointer = html`<obc-poi-line
|
70
|
+
height=${this.height}
|
71
|
+
lineStyle=${valueToPointerStyle(this.value)}
|
72
|
+
></obc-poi-line>`;
|
73
|
+
break;
|
74
|
+
case "arrow-left":
|
75
|
+
pointer = pointerArrow(this.pointerType, this.value);
|
76
|
+
hasArrowPointer = true;
|
77
|
+
break;
|
78
|
+
case "arrow-right":
|
79
|
+
pointer = pointerArrow(this.pointerType, this.value);
|
80
|
+
hasArrowPointer = true;
|
81
|
+
break;
|
82
|
+
case "null":
|
83
|
+
pointer = null;
|
84
|
+
break;
|
85
|
+
default:
|
86
|
+
throw new Error(`Pointer type ${this.pointerType} not supported`);
|
87
|
+
}
|
88
|
+
return html`
|
89
|
+
<div
|
90
|
+
class=${classMap({
|
91
|
+
wrapper: true,
|
92
|
+
["type-" + this.pointerType]: true
|
93
|
+
})}
|
94
|
+
>
|
95
|
+
<obc-poi-target-button
|
96
|
+
.value=${valueToButtonStyle(this.value)}
|
97
|
+
.hasPointer=${hasArrowPointer}
|
98
|
+
.relativeDirection=${this.relativeDirection}
|
99
|
+
></obc-poi-target-button>
|
100
|
+
${pointer}
|
101
|
+
</div>
|
102
|
+
`;
|
103
|
+
}
|
104
|
+
};
|
105
|
+
ObcPoiTarget.styles = unsafeCSS(compentStyle);
|
106
|
+
__decorateClass([
|
107
|
+
property({ type: Number })
|
108
|
+
], ObcPoiTarget.prototype, "height", 2);
|
109
|
+
__decorateClass([
|
110
|
+
property({ type: String })
|
111
|
+
], ObcPoiTarget.prototype, "value", 2);
|
112
|
+
__decorateClass([
|
113
|
+
property({ type: String })
|
114
|
+
], ObcPoiTarget.prototype, "pointerType", 2);
|
115
|
+
__decorateClass([
|
116
|
+
property({ type: Number })
|
117
|
+
], ObcPoiTarget.prototype, "relativeDirection", 2);
|
118
|
+
ObcPoiTarget = __decorateClass([
|
119
|
+
customElement("obc-poi-target")
|
120
|
+
], ObcPoiTarget);
|
121
|
+
export {
|
122
|
+
ObcPoiTarget,
|
123
|
+
Pointer,
|
124
|
+
TargetValue
|
125
|
+
};
|
126
|
+
//# sourceMappingURL=poi-target.js.map
|
@@ -0,0 +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,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/package.json
CHANGED
@@ -20,6 +20,7 @@ import '../../icons/icon-04-day-bright';
|
|
20
20
|
* @prop {Number} brightness - The brightness value
|
21
21
|
* @prop {Boolean} showAutoBrightness - Show the auto brightness toggle
|
22
22
|
* @prop {Boolean} showAutoPalette - Show the auto palette toggle
|
23
|
+
* @prop {Boolean} hideBrightness - Show the auto brightness toggle
|
23
24
|
*
|
24
25
|
* @fires palette-changed - Fires when the palette is changed
|
25
26
|
* @fires brightness-changed - Fires when the brightness is changed
|
@@ -32,6 +33,7 @@ export class ObcBrillianceMenu extends LitElement {
|
|
32
33
|
@property({type: Boolean})
|
33
34
|
showAutoBrightness = false;
|
34
35
|
@property({type: Boolean}) showAutoPalette = false;
|
36
|
+
@property({type: Boolean}) hideBrightness = false;
|
35
37
|
|
36
38
|
onPaletteChanged(event: CustomEvent) {
|
37
39
|
this.palette = event.detail.value;
|
@@ -54,25 +56,31 @@ export class ObcBrillianceMenu extends LitElement {
|
|
54
56
|
override render() {
|
55
57
|
return html`
|
56
58
|
<div class="card">
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
59
|
+
${this.hideBrightness
|
60
|
+
? ''
|
61
|
+
: html`
|
62
|
+
<h3>Brilliance</h3>
|
63
|
+
<obc-slider
|
64
|
+
value=${this.brightness}
|
65
|
+
@value=${this.onBrightnessChanged}
|
66
|
+
min="0"
|
67
|
+
max="100"
|
68
|
+
hugcontainer
|
69
|
+
haslefticon
|
70
|
+
hasrighticon
|
71
|
+
>
|
72
|
+
<obi-04-brilliance-low slot="icon-left"></obi-04-brilliance-low>
|
73
|
+
<obi-04-brilliance-high
|
74
|
+
slot="icon-right"
|
75
|
+
></obi-04-brilliance-high>
|
76
|
+
</obc-slider>
|
77
|
+
${this.showAutoBrightness
|
78
|
+
? html`<obc-toggle-switch
|
79
|
+
label="Auto brilliance"
|
80
|
+
></obc-toggle-switch>`
|
81
|
+
: ''}
|
82
|
+
<div class="divider"></div>
|
83
|
+
`}
|
76
84
|
<h3>Day - Night</h3>
|
77
85
|
<obc-toggle-button-group
|
78
86
|
value=${this.palette}
|
@@ -0,0 +1,57 @@
|
|
1
|
+
.wrapper {
|
2
|
+
padding: 0;
|
3
|
+
background: transparent;
|
4
|
+
height: 48px;
|
5
|
+
width: 48px;
|
6
|
+
appearance: none;
|
7
|
+
border: none;
|
8
|
+
display: flex;
|
9
|
+
align-items: center;
|
10
|
+
justify-content: center;
|
11
|
+
|
12
|
+
& .visible-wrapper {
|
13
|
+
height: 32px;
|
14
|
+
width: 32px;
|
15
|
+
border-radius: 6px;
|
16
|
+
display: flex;
|
17
|
+
align-items: center;
|
18
|
+
justify-content: center;
|
19
|
+
}
|
20
|
+
|
21
|
+
& .icon {
|
22
|
+
height: 24px;
|
23
|
+
width: 24px;
|
24
|
+
}
|
25
|
+
|
26
|
+
&.pointer {
|
27
|
+
width: 36px;
|
28
|
+
}
|
29
|
+
|
30
|
+
&.value-unchecked {
|
31
|
+
@mixin style style=normal visibleWrapperClass=.visible-wrapper;
|
32
|
+
|
33
|
+
.visible-wrapper {
|
34
|
+
color: var(--normal-enabled-background-color);
|
35
|
+
border-color: var(--normal-enabled-border-color);
|
36
|
+
box-shadow: var(--shadow-flat);
|
37
|
+
}
|
38
|
+
|
39
|
+
.icon {
|
40
|
+
color: var(--instrument-regular-secondary-color);
|
41
|
+
}
|
42
|
+
}
|
43
|
+
|
44
|
+
&.value-checked {
|
45
|
+
@mixin style style=selected visibleWrapperClass=.visible-wrapper;
|
46
|
+
|
47
|
+
.visible-wrapper {
|
48
|
+
background-color: var(--selected-enabled-background-color);
|
49
|
+
border-color: var(--selected-enabled-border-color);
|
50
|
+
box-shadow: var(--shadow-raised);
|
51
|
+
}
|
52
|
+
|
53
|
+
.icon {
|
54
|
+
color: var(--on-selected-active-color);
|
55
|
+
}
|
56
|
+
}
|
57
|
+
}
|
@@ -0,0 +1,30 @@
|
|
1
|
+
import type {Meta, StoryObj} from '@storybook/web-components';
|
2
|
+
|
3
|
+
import {ObcPoiTargetButton} from './poi-target-button';
|
4
|
+
import './poi-target-button';
|
5
|
+
|
6
|
+
const meta: Meta<typeof ObcPoiTargetButton> = {
|
7
|
+
title: 'Button/POI Target Button',
|
8
|
+
tags: ['autodocs'],
|
9
|
+
component: 'obc-poi-target-button',
|
10
|
+
args: {
|
11
|
+
value: 'checked',
|
12
|
+
relativeDirection: 0,
|
13
|
+
},
|
14
|
+
argTypes: {
|
15
|
+
value: {
|
16
|
+
options: ['unchecked', 'checked'],
|
17
|
+
control: {type: 'select'},
|
18
|
+
},
|
19
|
+
relativeDirection: {
|
20
|
+
control: {type: 'range', min: 0, max: 360},
|
21
|
+
},
|
22
|
+
},
|
23
|
+
} satisfies Meta<ObcPoiTargetButton>;
|
24
|
+
|
25
|
+
export default meta;
|
26
|
+
type Story = StoryObj<ObcPoiTargetButton>;
|
27
|
+
|
28
|
+
export const Primary: Story = {
|
29
|
+
args: {},
|
30
|
+
};
|
@@ -0,0 +1,47 @@
|
|
1
|
+
import {LitElement, html, unsafeCSS} from 'lit';
|
2
|
+
import {customElement, property} from 'lit/decorators.js';
|
3
|
+
import compentStyle from './poi-target-button.css?inline';
|
4
|
+
import {classMap} from 'lit/directives/class-map.js';
|
5
|
+
import '../../icons/icon-iec-02-ais-target-activated';
|
6
|
+
|
7
|
+
export enum PoiTargetButtonValue {
|
8
|
+
checked = 'checked',
|
9
|
+
unchecked = 'unchecked',
|
10
|
+
}
|
11
|
+
|
12
|
+
@customElement('obc-poi-target-button')
|
13
|
+
export class ObcPoiTargetButton extends LitElement {
|
14
|
+
@property({type: String}) value: PoiTargetButtonValue =
|
15
|
+
PoiTargetButtonValue.checked;
|
16
|
+
@property({type: Boolean}) hasPointer = false;
|
17
|
+
@property({type: Number}) relativeDirection = 0;
|
18
|
+
|
19
|
+
override render() {
|
20
|
+
return html`
|
21
|
+
<button
|
22
|
+
class=${classMap({
|
23
|
+
wrapper: true,
|
24
|
+
['value-' + this.value]: true,
|
25
|
+
pointer: this.hasPointer,
|
26
|
+
})}
|
27
|
+
>
|
28
|
+
<div class="visible-wrapper">
|
29
|
+
<div
|
30
|
+
class="icon"
|
31
|
+
style="transform: rotate(${this.relativeDirection}deg);"
|
32
|
+
>
|
33
|
+
<obi-iec-02-ais-target-activated></obi-iec-02-ais-target-activated>
|
34
|
+
</div>
|
35
|
+
</div>
|
36
|
+
</button>
|
37
|
+
`;
|
38
|
+
}
|
39
|
+
|
40
|
+
static override styles = unsafeCSS(compentStyle);
|
41
|
+
}
|
42
|
+
|
43
|
+
declare global {
|
44
|
+
interface HTMLElementTagNameMap {
|
45
|
+
'obc-poi-target-button': ObcPoiTargetButton;
|
46
|
+
}
|
47
|
+
}
|
@@ -0,0 +1,45 @@
|
|
1
|
+
export enum POIStyle {
|
2
|
+
Normal = 'normal',
|
3
|
+
Raised = 'raised',
|
4
|
+
Enhanced = 'enhanced',
|
5
|
+
Input = 'input',
|
6
|
+
Light = 'light',
|
7
|
+
Track = 'track',
|
8
|
+
}
|
9
|
+
|
10
|
+
export enum POIState {
|
11
|
+
solid = 'solid',
|
12
|
+
dashed = 'dashed',
|
13
|
+
}
|
14
|
+
|
15
|
+
export interface POIStyleConfig {
|
16
|
+
lineColor: string;
|
17
|
+
outlineColor: string;
|
18
|
+
}
|
19
|
+
|
20
|
+
export const POI_STYLES: Record<POIStyle, POIStyleConfig> = {
|
21
|
+
[POIStyle.Normal]: {
|
22
|
+
lineColor: 'var(--element-active-inverted-color)',
|
23
|
+
outlineColor: 'var(--element-disabled-color)',
|
24
|
+
},
|
25
|
+
[POIStyle.Raised]: {
|
26
|
+
lineColor: 'var(--element-active-inverted-color)',
|
27
|
+
outlineColor: 'var(--border-outline-color)',
|
28
|
+
},
|
29
|
+
[POIStyle.Enhanced]: {
|
30
|
+
lineColor: 'var(--instrument-enhanced-secondary-color)',
|
31
|
+
outlineColor: 'var(--element-active-inverted-color)',
|
32
|
+
},
|
33
|
+
[POIStyle.Input]: {
|
34
|
+
lineColor: 'var(--instrument-enhanced-primary-color)',
|
35
|
+
outlineColor: 'var(--element-active-inverted-color)',
|
36
|
+
},
|
37
|
+
[POIStyle.Light]: {
|
38
|
+
lineColor: 'var(--instrument-port-color)',
|
39
|
+
outlineColor: 'var(--element-active-color)',
|
40
|
+
},
|
41
|
+
[POIStyle.Track]: {
|
42
|
+
lineColor: 'var(--instrument-enhanced-primary-color)',
|
43
|
+
outlineColor: 'var(--element-active-inverted-color)',
|
44
|
+
},
|
45
|
+
};
|