@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,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,3 @@
1
+ import { Pointer } from './poi-target';
2
+ export declare function pointerArrow(pointerType: Pointer, value: string): import("lit-html").TemplateResult<1>;
3
+ //# sourceMappingURL=arrow.d.ts.map
@@ -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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oicl/openbridge-webcomponents",
3
- "version": "0.0.15-dev-20241104120701",
3
+ "version": "0.0.15-dev-20241106185316",
4
4
  "type": "module",
5
5
  "repository": {
6
6
  "type": "git",
@@ -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
- <h3>Brilliance</h3>
58
- <obc-slider
59
- value=${this.brightness}
60
- @value=${this.onBrightnessChanged}
61
- min="0"
62
- max="100"
63
- hugcontainer
64
- haslefticon
65
- hasrighticon
66
- >
67
- <obi-04-brilliance-low slot="icon-left"></obi-04-brilliance-low>
68
- <obi-04-brilliance-high slot="icon-right"></obi-04-brilliance-high>
69
- </obc-slider>
70
- ${this.showAutoBrightness
71
- ? html`<obc-toggle-switch
72
- label="Auto brilliance"
73
- ></obc-toggle-switch>`
74
- : ''}
75
- <div class="divider"></div>
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
+ };
@@ -0,0 +1,3 @@
1
+ .wrapper {
2
+ width: 4px;
3
+ }