@oicl/openbridge-webcomponents 0.0.15-dev-20241112205851 → 0.0.15-dev-20241119201940

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 (80) hide show
  1. package/.storybook/main.ts +2 -1
  2. package/.storybook/manager.ts +16 -0
  3. package/.storybook/preview.ts +0 -1
  4. package/__snapshots__/building-blocks-poi-graphic-line--primary.png +0 -0
  5. package/__snapshots__/building-blocks-poi-line--primary.png +0 -0
  6. package/__snapshots__/navigation-instruments-azimuth-thruster--active-at-setpoint.png +0 -0
  7. package/__snapshots__/navigation-instruments-azimuth-thruster--active-no-setpoint.png +0 -0
  8. package/__snapshots__/navigation-instruments-azimuth-thruster--active.png +0 -0
  9. package/__snapshots__/navigation-instruments-azimuth-thruster--in-command-at-setpoint-disable-auto-setpoint.png +0 -0
  10. package/__snapshots__/navigation-instruments-azimuth-thruster--in-command-at-setpoint.png +0 -0
  11. package/__snapshots__/navigation-instruments-azimuth-thruster--in-command.png +0 -0
  12. package/__snapshots__/navigation-instruments-azimuth-thruster--loading.png +0 -0
  13. package/__snapshots__/navigation-instruments-azimuth-thruster--off.png +0 -0
  14. package/__snapshots__/navigation-instruments-azimuth-thruster--pod.png +0 -0
  15. package/__snapshots__/navigation-instruments-azimuth-thruster--single-direction-with-propeller.png +0 -0
  16. package/__snapshots__/navigation-instruments-azimuth-thruster--single-direction.png +0 -0
  17. package/__snapshots__/navigation-instruments-azimuth-thruster-labeled--large.png +0 -0
  18. package/__snapshots__/navigation-instruments-azimuth-thruster-labeled--medium.png +0 -0
  19. package/__snapshots__/navigation-instruments-azimuth-thruster-labeled--no-command.png +0 -0
  20. package/__snapshots__/navigation-instruments-compass--primary.png +0 -0
  21. package/__snapshots__/navigation-instruments-compass-flat--primary.png +0 -0
  22. package/__snapshots__/navigation-instruments-compass-flat--with-fov-indicator.png +0 -0
  23. package/__snapshots__/navigation-instruments-main-engine--active.png +0 -0
  24. package/__snapshots__/navigation-instruments-main-engine--in-command.png +0 -0
  25. package/__snapshots__/navigation-instruments-main-engine--off.png +0 -0
  26. package/__snapshots__/navigation-instruments-poi-target--primary.png +0 -0
  27. package/__snapshots__/navigation-instruments-rudder--primary.png +0 -0
  28. package/__snapshots__/navigation-instruments-thruster--active-at-setpoint.png +0 -0
  29. package/__snapshots__/navigation-instruments-thruster--active.png +0 -0
  30. package/__snapshots__/navigation-instruments-thruster--in-command-at-setpoint-manual.png +0 -0
  31. package/__snapshots__/navigation-instruments-thruster--in-command-at-setpoint.png +0 -0
  32. package/__snapshots__/navigation-instruments-thruster--in-command-touching.png +0 -0
  33. package/__snapshots__/navigation-instruments-thruster--in-command.png +0 -0
  34. package/__snapshots__/navigation-instruments-thruster--loading.png +0 -0
  35. package/__snapshots__/navigation-instruments-thruster--no-setpoint.png +0 -0
  36. package/__snapshots__/navigation-instruments-thruster--off.png +0 -0
  37. package/__snapshots__/navigation-instruments-thruster--pulling-pod.png +0 -0
  38. package/__snapshots__/navigation-instruments-thruster--pushing-pod.png +0 -0
  39. package/__snapshots__/navigation-instruments-thruster--single-direction-single-sided-with-advice.png +0 -0
  40. package/__snapshots__/navigation-instruments-thruster--single-direction.png +0 -0
  41. package/__snapshots__/navigation-instruments-thruster--single-sided-with-advice.png +0 -0
  42. package/__snapshots__/navigation-instruments-thruster--single-sided.png +0 -0
  43. package/__snapshots__/navigation-instruments-thruster--tunnel.png +0 -0
  44. package/custom-elements.json +19 -64
  45. package/dist/automation/automation-tank/automation-tank.d.ts +7 -0
  46. package/dist/automation/automation-tank/automation-tank.d.ts.map +1 -1
  47. package/dist/automation/automation-tank/automation-tank.js.map +1 -1
  48. package/dist/navigation-instruments/compass/compass.d.ts +7 -6
  49. package/dist/navigation-instruments/compass/compass.d.ts.map +1 -1
  50. package/dist/navigation-instruments/compass/compass.js +12 -33
  51. package/dist/navigation-instruments/compass/compass.js.map +1 -1
  52. package/dist/navigation-instruments/compass-flat/compass-flat.css.js +2 -1
  53. package/dist/navigation-instruments/compass-flat/compass-flat.css.js.map +1 -1
  54. package/dist/navigation-instruments/compass-flat/compass-flat.d.ts +6 -0
  55. package/dist/navigation-instruments/compass-flat/compass-flat.d.ts.map +1 -1
  56. package/dist/navigation-instruments/compass-flat/compass-flat.js +10 -2
  57. package/dist/navigation-instruments/compass-flat/compass-flat.js.map +1 -1
  58. package/dist/storybook-util.d.ts +1 -1
  59. package/dist/storybook-util.d.ts.map +1 -1
  60. package/dist/storybook-util.js +3 -28
  61. package/dist/storybook-util.js.map +1 -1
  62. package/package.json +14 -13
  63. package/src/automation/automation-button/automation-button.stories.ts +4 -0
  64. package/src/automation/automation-tank/automation-tank.ts +7 -0
  65. package/src/components/top-bar/top-bar.stories.ts +1 -0
  66. package/src/icons.stories.ts +3 -0
  67. package/src/navigation-instruments/azimuth-thruster/azimuth-thruster.stories.ts +3 -3
  68. package/src/navigation-instruments/azimuth-thruster-labeled/azimuth-thruster-labeled.stories.ts +3 -3
  69. package/src/navigation-instruments/compass/compass.stories.ts +3 -3
  70. package/src/navigation-instruments/compass/compass.ts +17 -27
  71. package/src/navigation-instruments/compass-flat/compass-flat.css +2 -1
  72. package/src/navigation-instruments/compass-flat/compass-flat.stories.ts +5 -4
  73. package/src/navigation-instruments/compass-flat/compass-flat.ts +13 -2
  74. package/src/navigation-instruments/main-engine/main-engine.stories.ts +3 -3
  75. package/src/navigation-instruments/poi-graphic-line/poi-graphic-line.stories.ts +2 -3
  76. package/src/navigation-instruments/poi-line/poi-line.stories.ts +1 -4
  77. package/src/navigation-instruments/poi-target/poi-target.stories.ts +1 -3
  78. package/src/navigation-instruments/rudder/rudder.stories.ts +3 -3
  79. package/src/navigation-instruments/thruster/thruster.stories.ts +3 -3
  80. package/src/storybook-util.ts +4 -29
@@ -10,7 +10,8 @@ const config: StorybookConfig = {
10
10
  getAbsolutePath('@storybook/addon-themes'),
11
11
  getAbsolutePath('@storybook/addon-interactions'),
12
12
  getAbsolutePath('@storybook/addon-storysource'),
13
- '@chromatic-com/storybook',
13
+ getAbsolutePath('storybook-addon-tag-badges'),
14
+ getAbsolutePath('@chromatic-com/storybook'),
14
15
  ],
15
16
 
16
17
  framework: {
@@ -3,4 +3,20 @@ import obTheme from './openbridgeTheme';
3
3
 
4
4
  addons.setConfig({
5
5
  theme: obTheme,
6
+ tagBadges: [
7
+ // Add an entry that matches 'frog' and displays a cool badge in the sidebar only
8
+ {
9
+ tags: '6.0',
10
+ badge: {
11
+ text: '6.0 Beta',
12
+ bgColor: '#0070d6',
13
+ fgColor: '#fff',
14
+ tooltip: 'OpenBridge 6.0 Beta',
15
+ },
16
+ display: {
17
+ sidebar: ['component'],
18
+ toolbar: true,
19
+ },
20
+ },
21
+ ],
6
22
  });
@@ -1,5 +1,4 @@
1
1
  import type {Preview} from '@storybook/web-components';
2
- import {BadgesConfig} from '@geometricpanda/storybook-addon-badges';
3
2
 
4
3
  import '../src/palettes/variables.css';
5
4
  import {setCustomElementsManifest} from '@storybook/web-components';
@@ -84,24 +84,7 @@
84
84
  {
85
85
  "name": "context",
86
86
  "type": {
87
- "text": "{args: {width: number}}"
88
- }
89
- }
90
- ]
91
- },
92
- {
93
- "kind": "function",
94
- "name": "beta6Decorator",
95
- "return": {
96
- "type": {
97
- "text": "HTMLTemplateResult"
98
- }
99
- },
100
- "parameters": [
101
- {
102
- "name": "story",
103
- "type": {
104
- "text": "() => unknown"
87
+ "text": "{args: {width: number; height?: number}}"
105
88
  }
106
89
  }
107
90
  ]
@@ -139,14 +122,6 @@
139
122
  "name": "widthDecorator",
140
123
  "module": "src/storybook-util.ts"
141
124
  }
142
- },
143
- {
144
- "kind": "js",
145
- "name": "beta6Decorator",
146
- "declaration": {
147
- "name": "beta6Decorator",
148
- "module": "src/storybook-util.ts"
149
- }
150
125
  }
151
126
  ]
152
127
  },
@@ -242,6 +217,12 @@
242
217
  }
243
218
  ]
244
219
  },
220
+ {
221
+ "kind": "javascript-module",
222
+ "path": "src/navigation-instruments/types.ts",
223
+ "declarations": [],
224
+ "exports": []
225
+ },
245
226
  {
246
227
  "kind": "javascript-module",
247
228
  "path": "src/icons/icon-01-add.ts",
@@ -38216,12 +38197,6 @@
38216
38197
  }
38217
38198
  ]
38218
38199
  },
38219
- {
38220
- "kind": "javascript-module",
38221
- "path": "src/navigation-instruments/types.ts",
38222
- "declarations": [],
38223
- "exports": []
38224
- },
38225
38200
  {
38226
38201
  "kind": "javascript-module",
38227
38202
  "path": "src/svghelpers/circle.ts",
@@ -44526,15 +44501,6 @@
44526
44501
  "default": "0",
44527
44502
  "attribute": "courseOverGround"
44528
44503
  },
44529
- {
44530
- "kind": "field",
44531
- "name": "padding",
44532
- "type": {
44533
- "text": "number"
44534
- },
44535
- "default": "48",
44536
- "attribute": "padding"
44537
- },
44538
44504
  {
44539
44505
  "kind": "field",
44540
44506
  "name": "headingAdvices",
@@ -44545,24 +44511,13 @@
44545
44511
  },
44546
44512
  {
44547
44513
  "kind": "field",
44548
- "name": "containerWidth",
44549
- "type": {
44550
- "text": "number"
44551
- },
44552
- "default": "0"
44553
- },
44554
- {
44555
- "kind": "field",
44556
- "name": "resizeObserver",
44557
- "type": {
44558
- "text": "ResizeObserver"
44559
- },
44514
+ "name": "_resizeController",
44560
44515
  "privacy": "private",
44561
- "default": "new ResizeObserver((entries) => {\n for (const entry of entries) {\n this.containerWidth = Math.min(\n entry.contentRect.width,\n entry.contentRect.height\n );\n this.adjustPadding();\n }\n })"
44516
+ "default": "new ResizeController(this, {})"
44562
44517
  },
44563
44518
  {
44564
44519
  "kind": "method",
44565
- "name": "adjustPadding",
44520
+ "name": "getPadding",
44566
44521
  "privacy": "private"
44567
44522
  },
44568
44523
  {
@@ -44591,14 +44546,6 @@
44591
44546
  },
44592
44547
  "default": "0",
44593
44548
  "fieldName": "courseOverGround"
44594
- },
44595
- {
44596
- "name": "padding",
44597
- "type": {
44598
- "text": "number"
44599
- },
44600
- "default": "48",
44601
- "fieldName": "padding"
44602
44549
  }
44603
44550
  ],
44604
44551
  "superclass": {
@@ -44771,6 +44718,14 @@
44771
44718
  },
44772
44719
  "default": "0"
44773
44720
  },
44721
+ {
44722
+ "kind": "field",
44723
+ "name": "maxContainerWidth",
44724
+ "type": {
44725
+ "text": "number"
44726
+ },
44727
+ "default": "0"
44728
+ },
44774
44729
  {
44775
44730
  "kind": "field",
44776
44731
  "name": "resizeObserver",
@@ -44778,7 +44733,7 @@
44778
44733
  "text": "ResizeObserver"
44779
44734
  },
44780
44735
  "privacy": "private",
44781
- "default": "new ResizeObserver((entries) => {\n for (const entry of entries) {\n this.containerWidth = entry.contentRect.width;\n }\n })"
44736
+ "default": "new ResizeObserver((entries) => {\n for (const entry of entries) {\n // Made by chatGPT so that the text is inside the wrapper\n this.maxContainerWidth = -125.36 + 3.79 * entry.contentRect.height;\n this.containerWidth = Math.min(\n entry.contentRect.width,\n this.maxContainerWidth\n );\n }\n })"
44782
44737
  },
44783
44738
  {
44784
44739
  "kind": "method",
@@ -16,6 +16,13 @@ export declare enum TankVariant {
16
16
  vertical = "vertical",
17
17
  compact = "compact"
18
18
  }
19
+ /**
20
+ *
21
+ *
22
+ * @ignition-base-height: 173px
23
+ * @ignition-base-width: 168px
24
+ * @ignition-center
25
+ */
19
26
  export declare class ObcAutomationTank extends LitElement {
20
27
  medium: LineMedium;
21
28
  value: number;
@@ -1 +1 @@
1
- {"version":3,"file":"automation-tank.d.ts","sourceRoot":"","sources":["../../../src/automation/automation-tank/automation-tank.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,kBAAkB,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AAGpE,OAAO,EAAC,UAAU,EAAC,MAAM,IAAI,CAAC;AAE9B,OAAO,uCAAuC,CAAC;AAC/C,OAAO,gCAAgC,CAAC;AACxC,OAAO,yCAAyC,CAAC;AACjD,OAAO,kCAAkC,CAAC;AAC1C,OAAO,yBAAyB,CAAC;AAGjC,oBAAY,SAAS;IACnB,UAAU,gBAAgB;IAC1B,MAAM,WAAW;IACjB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,WAAW,iBAAiB;CAC7B;AAED,oBAAY,WAAW;IACrB,QAAQ,aAAa;IACrB,OAAO,YAAY;CACpB;AAED,qBACa,iBAAkB,SAAQ,UAAU;IACrB,MAAM,EAAE,UAAU,CAAoB;IACtC,KAAK,EAAE,MAAM,CAAK;IAClB,GAAG,EAAE,MAAM,CAAO;IAClB,KAAK,EAAE,SAAS,CAAoB;IACpC,OAAO,EAAE,WAAW,CAAwB;IAC5C,GAAG,EAAE,MAAM,CAAM;IAE3C,SAAS,IAAI,kBAAkB;IAoBtB,MAAM;IA8Cf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF"}
1
+ {"version":3,"file":"automation-tank.d.ts","sourceRoot":"","sources":["../../../src/automation/automation-tank/automation-tank.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,kBAAkB,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AAGpE,OAAO,EAAC,UAAU,EAAC,MAAM,IAAI,CAAC;AAE9B,OAAO,uCAAuC,CAAC;AAC/C,OAAO,gCAAgC,CAAC;AACxC,OAAO,yCAAyC,CAAC;AACjD,OAAO,kCAAkC,CAAC;AAC1C,OAAO,yBAAyB,CAAC;AAGjC,oBAAY,SAAS;IACnB,UAAU,gBAAgB;IAC1B,MAAM,WAAW;IACjB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,WAAW,iBAAiB;CAC7B;AAED,oBAAY,WAAW;IACrB,QAAQ,aAAa;IACrB,OAAO,YAAY;CACpB;AAED;;;;;;GAMG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IACrB,MAAM,EAAE,UAAU,CAAoB;IACtC,KAAK,EAAE,MAAM,CAAK;IAClB,GAAG,EAAE,MAAM,CAAO;IAClB,KAAK,EAAE,SAAS,CAAoB;IACpC,OAAO,EAAE,WAAW,CAAwB;IAC5C,GAAG,EAAE,MAAM,CAAM;IAE3C,SAAS,IAAI,kBAAkB;IAoBtB,MAAM;IA8Cf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF"}
@@ -1 +1 @@
1
- {"version":3,"file":"automation-tank.js","sources":["../../../src/automation/automation-tank/automation-tank.ts"],"sourcesContent":["import {HTMLTemplateResult, LitElement, html, unsafeCSS} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport compentStyle from './automation-tank.css?inline';\nimport {LineMedium} from '..';\n\nimport '../../icons/icon-02-chevron-double-up';\nimport '../../icons/icon-02-chevron-up';\nimport '../../icons/icon-02-chevron-double-down';\nimport '../../icons/icon-02-chevron-down';\nimport '../../icons/icon-01-off';\nimport {classMap} from 'lit/directives/class-map.js';\n\nexport enum TankTrend {\n fastRising = 'fast-rising',\n rising = 'rising',\n stable = 'stable',\n falling = 'falling',\n fastFalling = 'fast-falling',\n}\n\nexport enum TankVariant {\n vertical = 'vertical',\n compact = 'compact',\n}\n\n@customElement('obc-automation-tank')\nexport class ObcAutomationTank extends LitElement {\n @property({type: String}) medium: LineMedium = LineMedium.water;\n @property({type: Number}) value: number = 0;\n @property({type: Number}) max: number = 100;\n @property({type: String}) trend: TankTrend = TankTrend.stable;\n @property({type: String}) variant: TankVariant = TankVariant.vertical;\n @property({type: String}) tag: string = '';\n\n trendIcon(): HTMLTemplateResult {\n if (this.trend === TankTrend.fastRising) {\n return html`<obi-02-chevron-double-up\n class=\"trend-icon\"\n ></obi-02-chevron-double-up>`;\n } else if (this.trend === TankTrend.rising) {\n return html`<obi-02-chevron-up class=\"trend-icon\"></obi-02-chevron-up>`;\n } else if (this.trend === TankTrend.fastFalling) {\n return html`<obi-02-chevron-double-down\n class=\"trend-icon\"\n ></obi-02-chevron-double-down>`;\n } else if (this.trend === TankTrend.falling) {\n return html`<obi-02-chevron-down\n class=\"trend-icon\"\n ></obi-02-chevron-down>`;\n } else {\n return html`<obi-01-off class=\"trend-icon\"></obi-01-off>`;\n }\n }\n\n override render() {\n const percent = (this.value / this.max) * 100;\n\n return html`\n <div class=\"outer\">\n <div class=\"badges\">\n <slot name=\"badges\"></slot>\n </div>\n <button\n class=${classMap({\n wrapper: true,\n [this.variant]: true,\n [this.medium]: true,\n })}\n style=\"--percent: ${percent / 100}\"\n >\n <div class=\"bar-container\">\n <div class=\"bar\"></div>\n </div>\n <div class=\"content\">\n <div class=\"header\">\n ${this.trendIcon()}\n <div class=\"percent\">\n ${percent.toFixed(0)}<span class=\"percent-symbol\">%</span>\n </div>\n </div>\n <div class=\"value\">\n <div class=\"current\">\n <slot name=\"current-value\" class=\"current-value\"\n >${this.value.toFixed(0)}</slot\n ><span class=\"divider\">/</span>\n </div>\n <div class=\"max\">\n <slot class=\"max-value\" name=\"max-value\"\n >${this.max.toFixed(0)}</slot\n >\n <slot class=\"unit\" name=\"unit\">m<sup>3</sup></slot>\n </div>\n </div>\n </div>\n </button>\n <div class=\"tag\"><slot name=\"tag\">${this.tag}</slot></div>\n </div>\n `;\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-automation-tank': ObcAutomationTank;\n }\n}\n"],"names":["TankTrend","TankVariant"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAYY,IAAA,8BAAAA,eAAL;AACLA,aAAA,YAAa,IAAA;AACbA,aAAA,QAAS,IAAA;AACTA,aAAA,QAAS,IAAA;AACTA,aAAA,SAAU,IAAA;AACVA,aAAA,aAAc,IAAA;AALJA,SAAAA;AAAA,GAAA,aAAA,CAAA,CAAA;AAQA,IAAA,gCAAAC,iBAAL;AACLA,eAAA,UAAW,IAAA;AACXA,eAAA,SAAU,IAAA;AAFAA,SAAAA;AAAA,GAAA,eAAA,CAAA,CAAA;AAMC,IAAA,oBAAN,cAAgC,WAAW;AAAA,EAA3C,cAAA;AAAA,UAAA,GAAA,SAAA;AACqB,SAAA,SAAqB,WAAW;AAChB,SAAA,QAAA;AACF,SAAA,MAAA;AACK,SAAA,QAAA;AACI,SAAA,UAAA;AACT,SAAA,MAAA;AAAA,EAAA;AAAA,EAExC,YAAgC;AAC1B,QAAA,KAAK,UAAU,eAAsB;AAChC,aAAA;AAAA;AAAA;AAAA,IAAA,WAGE,KAAK,UAAU,UAAkB;AACnC,aAAA;AAAA,IAAA,WACE,KAAK,UAAU,gBAAuB;AACxC,aAAA;AAAA;AAAA;AAAA,IAAA,WAGE,KAAK,UAAU,WAAmB;AACpC,aAAA;AAAA;AAAA;AAAA,IAAA,OAGF;AACE,aAAA;AAAA,IACT;AAAA,EACF;AAAA,EAES,SAAS;AAChB,UAAM,UAAW,KAAK,QAAQ,KAAK,MAAO;AAEnC,WAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAMO,SAAS;AAAA,MACf,SAAS;AAAA,MACT,CAAC,KAAK,OAAO,GAAG;AAAA,MAChB,CAAC,KAAK,MAAM,GAAG;AAAA,IAAA,CAChB,CAAC;AAAA,8BACkB,UAAU,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAO3B,KAAK,WAAW;AAAA;AAAA,kBAEd,QAAQ,QAAQ,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAMf,KAAK,MAAM,QAAQ,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKrB,KAAK,IAAI,QAAQ,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4CAOI,KAAK,GAAG;AAAA;AAAA;AAAA,EAGlD;AAGF;AA3Ea,kBA0EK,SAAS,UAAU,YAAY;AAzErB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GADb,kBACe,WAAA,UAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAFb,kBAEe,WAAA,SAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAHb,kBAGe,WAAA,OAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAJb,kBAIe,WAAA,SAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GALb,kBAKe,WAAA,WAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GANb,kBAMe,WAAA,OAAA,CAAA;AANf,oBAAN,gBAAA;AAAA,EADN,cAAc,qBAAqB;AAAA,GACvB,iBAAA;"}
1
+ {"version":3,"file":"automation-tank.js","sources":["../../../src/automation/automation-tank/automation-tank.ts"],"sourcesContent":["import {HTMLTemplateResult, LitElement, html, unsafeCSS} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport compentStyle from './automation-tank.css?inline';\nimport {LineMedium} from '..';\n\nimport '../../icons/icon-02-chevron-double-up';\nimport '../../icons/icon-02-chevron-up';\nimport '../../icons/icon-02-chevron-double-down';\nimport '../../icons/icon-02-chevron-down';\nimport '../../icons/icon-01-off';\nimport {classMap} from 'lit/directives/class-map.js';\n\nexport enum TankTrend {\n fastRising = 'fast-rising',\n rising = 'rising',\n stable = 'stable',\n falling = 'falling',\n fastFalling = 'fast-falling',\n}\n\nexport enum TankVariant {\n vertical = 'vertical',\n compact = 'compact',\n}\n\n/**\n *\n *\n * @ignition-base-height: 173px\n * @ignition-base-width: 168px\n * @ignition-center\n */\n@customElement('obc-automation-tank')\nexport class ObcAutomationTank extends LitElement {\n @property({type: String}) medium: LineMedium = LineMedium.water;\n @property({type: Number}) value: number = 0;\n @property({type: Number}) max: number = 100;\n @property({type: String}) trend: TankTrend = TankTrend.stable;\n @property({type: String}) variant: TankVariant = TankVariant.vertical;\n @property({type: String}) tag: string = '';\n\n trendIcon(): HTMLTemplateResult {\n if (this.trend === TankTrend.fastRising) {\n return html`<obi-02-chevron-double-up\n class=\"trend-icon\"\n ></obi-02-chevron-double-up>`;\n } else if (this.trend === TankTrend.rising) {\n return html`<obi-02-chevron-up class=\"trend-icon\"></obi-02-chevron-up>`;\n } else if (this.trend === TankTrend.fastFalling) {\n return html`<obi-02-chevron-double-down\n class=\"trend-icon\"\n ></obi-02-chevron-double-down>`;\n } else if (this.trend === TankTrend.falling) {\n return html`<obi-02-chevron-down\n class=\"trend-icon\"\n ></obi-02-chevron-down>`;\n } else {\n return html`<obi-01-off class=\"trend-icon\"></obi-01-off>`;\n }\n }\n\n override render() {\n const percent = (this.value / this.max) * 100;\n\n return html`\n <div class=\"outer\">\n <div class=\"badges\">\n <slot name=\"badges\"></slot>\n </div>\n <button\n class=${classMap({\n wrapper: true,\n [this.variant]: true,\n [this.medium]: true,\n })}\n style=\"--percent: ${percent / 100}\"\n >\n <div class=\"bar-container\">\n <div class=\"bar\"></div>\n </div>\n <div class=\"content\">\n <div class=\"header\">\n ${this.trendIcon()}\n <div class=\"percent\">\n ${percent.toFixed(0)}<span class=\"percent-symbol\">%</span>\n </div>\n </div>\n <div class=\"value\">\n <div class=\"current\">\n <slot name=\"current-value\" class=\"current-value\"\n >${this.value.toFixed(0)}</slot\n ><span class=\"divider\">/</span>\n </div>\n <div class=\"max\">\n <slot class=\"max-value\" name=\"max-value\"\n >${this.max.toFixed(0)}</slot\n >\n <slot class=\"unit\" name=\"unit\">m<sup>3</sup></slot>\n </div>\n </div>\n </div>\n </button>\n <div class=\"tag\"><slot name=\"tag\">${this.tag}</slot></div>\n </div>\n `;\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-automation-tank': ObcAutomationTank;\n }\n}\n"],"names":["TankTrend","TankVariant"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAYY,IAAA,8BAAAA,eAAL;AACLA,aAAA,YAAa,IAAA;AACbA,aAAA,QAAS,IAAA;AACTA,aAAA,QAAS,IAAA;AACTA,aAAA,SAAU,IAAA;AACVA,aAAA,aAAc,IAAA;AALJA,SAAAA;AAAA,GAAA,aAAA,CAAA,CAAA;AAQA,IAAA,gCAAAC,iBAAL;AACLA,eAAA,UAAW,IAAA;AACXA,eAAA,SAAU,IAAA;AAFAA,SAAAA;AAAA,GAAA,eAAA,CAAA,CAAA;AAaC,IAAA,oBAAN,cAAgC,WAAW;AAAA,EAA3C,cAAA;AAAA,UAAA,GAAA,SAAA;AACqB,SAAA,SAAqB,WAAW;AAChB,SAAA,QAAA;AACF,SAAA,MAAA;AACK,SAAA,QAAA;AACI,SAAA,UAAA;AACT,SAAA,MAAA;AAAA,EAAA;AAAA,EAExC,YAAgC;AAC1B,QAAA,KAAK,UAAU,eAAsB;AAChC,aAAA;AAAA;AAAA;AAAA,IAAA,WAGE,KAAK,UAAU,UAAkB;AACnC,aAAA;AAAA,IAAA,WACE,KAAK,UAAU,gBAAuB;AACxC,aAAA;AAAA;AAAA;AAAA,IAAA,WAGE,KAAK,UAAU,WAAmB;AACpC,aAAA;AAAA;AAAA;AAAA,IAAA,OAGF;AACE,aAAA;AAAA,IACT;AAAA,EACF;AAAA,EAES,SAAS;AAChB,UAAM,UAAW,KAAK,QAAQ,KAAK,MAAO;AAEnC,WAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAMO,SAAS;AAAA,MACf,SAAS;AAAA,MACT,CAAC,KAAK,OAAO,GAAG;AAAA,MAChB,CAAC,KAAK,MAAM,GAAG;AAAA,IAAA,CAChB,CAAC;AAAA,8BACkB,UAAU,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAO3B,KAAK,WAAW;AAAA;AAAA,kBAEd,QAAQ,QAAQ,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAMf,KAAK,MAAM,QAAQ,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKrB,KAAK,IAAI,QAAQ,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4CAOI,KAAK,GAAG;AAAA;AAAA;AAAA,EAGlD;AAGF;AA3Ea,kBA0EK,SAAS,UAAU,YAAY;AAzErB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GADb,kBACe,WAAA,UAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAFb,kBAEe,WAAA,SAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAHb,kBAGe,WAAA,OAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAJb,kBAIe,WAAA,SAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GALb,kBAKe,WAAA,WAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GANb,kBAMe,WAAA,OAAA,CAAA;AANf,oBAAN,gBAAA;AAAA,EADN,cAAc,qBAAqB;AAAA,GACvB,iBAAA;"}
@@ -1,16 +1,17 @@
1
1
  import { LitElement } from 'lit';
2
2
  import '../watch/watch';
3
3
  import { AngleAdvice } from '../watch/advice';
4
+ /**
5
+ *
6
+ * @ignition-base-height: 512px
7
+ * @ignition-base-width: 512px
8
+ */
4
9
  export declare class ObcCompass extends LitElement {
5
10
  heading: number;
6
11
  courseOverGround: number;
7
- padding: number;
8
12
  headingAdvices: AngleAdvice[];
9
- containerWidth: number;
10
- private resizeObserver;
11
- connectedCallback(): void;
12
- disconnectedCallback(): void;
13
- private adjustPadding;
13
+ private _resizeController;
14
+ private getPadding;
14
15
  private get angleAdviceRaw();
15
16
  render(): import("lit-html").TemplateResult<1>;
16
17
  static styles: import("lit").CSSResult;
@@ -1 +1 @@
1
- {"version":3,"file":"compass.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/compass/compass.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAE1C,OAAO,gBAAgB,CAAC;AAGxB,OAAO,EAGL,WAAW,EAEZ,MAAM,iBAAiB,CAAC;AAGzB,qBACa,UAAW,SAAQ,UAAU;IACd,OAAO,SAAK;IACZ,gBAAgB,SAAK;IACrB,OAAO,SAAM;IACI,cAAc,EAAE,WAAW,EAAE,CAAM;IACrE,cAAc,SAAK;IAE5B,OAAO,CAAC,cAAc,CAQnB;IAEM,iBAAiB;IAKjB,oBAAoB;IAK7B,OAAO,CAAC,aAAa;IAarB,OAAO,KAAK,cAAc,GAUzB;IAEQ,MAAM;IAqCf,OAAgB,MAAM,0BAwBpB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
1
+ {"version":3,"file":"compass.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/compass/compass.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAE1C,OAAO,gBAAgB,CAAC;AAGxB,OAAO,EAGL,WAAW,EAEZ,MAAM,iBAAiB,CAAC;AAIzB;;;;GAIG;AACH,qBACa,UAAW,SAAQ,UAAU;IACd,OAAO,SAAK;IACZ,gBAAgB,SAAK;IACJ,cAAc,EAAE,WAAW,EAAE,CAAM;IAI9E,OAAO,CAAC,iBAAiB,CAAkC;IAE3D,OAAO,CAAC,UAAU;IAclB,OAAO,KAAK,cAAc,GAUzB;IAEQ,MAAM;IAsCf,OAAgB,MAAM,0BAwBpB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
@@ -1,10 +1,11 @@
1
1
  import { css, LitElement, html } from "lit";
2
- import { property, state, customElement } from "lit/decorators.js";
2
+ import { property, customElement } from "lit/decorators.js";
3
3
  import "../watch/watch.js";
4
4
  import { TickmarkType } from "../watch/tickmark.js";
5
5
  import { arrow, ArrowStyle } from "./arrow.js";
6
6
  import { AdviceState, AdviceType } from "../watch/advice.js";
7
7
  import { radialTickmarks } from "./radial-tickmark.js";
8
+ import { ResizeController } from "@lit-labs/observers/resize-controller.js";
8
9
  var __defProp = Object.defineProperty;
9
10
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
10
11
  var __decorateClass = (decorators, target, key, kind) => {
@@ -21,29 +22,12 @@ let ObcCompass = class extends LitElement {
21
22
  super(...arguments);
22
23
  this.heading = 0;
23
24
  this.courseOverGround = 0;
24
- this.padding = 48;
25
25
  this.headingAdvices = [];
26
- this.containerWidth = 0;
27
- this.resizeObserver = new ResizeObserver((entries) => {
28
- for (const entry of entries) {
29
- this.containerWidth = Math.min(
30
- entry.contentRect.width,
31
- entry.contentRect.height
32
- );
33
- this.adjustPadding();
34
- }
35
- });
36
- }
37
- connectedCallback() {
38
- super.connectedCallback();
39
- this.resizeObserver.observe(this);
40
- }
41
- disconnectedCallback() {
42
- super.disconnectedCallback();
43
- this.resizeObserver.unobserve(this);
26
+ this._resizeController = new ResizeController(this, {});
44
27
  }
45
- adjustPadding() {
46
- const deltaWidth = 512 - this.containerWidth;
28
+ getPadding() {
29
+ const size = Math.min(this.clientHeight, this.clientWidth);
30
+ const deltaWidth = 512 - size;
47
31
  const steps = deltaWidth / 128;
48
32
  let deltaPadding = 0;
49
33
  if (deltaWidth > 0) {
@@ -51,12 +35,12 @@ let ObcCompass = class extends LitElement {
51
35
  } else {
52
36
  deltaPadding = steps * 6;
53
37
  }
54
- this.padding = 72 + deltaPadding;
38
+ return 72 + deltaPadding;
55
39
  }
56
40
  get angleAdviceRaw() {
57
41
  return this.headingAdvices.map(({ minAngle, maxAngle, hinted, type }) => {
58
- const state2 = this.heading >= minAngle && this.heading <= maxAngle ? AdviceState.triggered : hinted ? AdviceState.hinted : AdviceState.regular;
59
- return { minAngle, maxAngle, type, state: state2 };
42
+ const state = this.heading >= minAngle && this.heading <= maxAngle ? AdviceState.triggered : hinted ? AdviceState.hinted : AdviceState.regular;
43
+ return { minAngle, maxAngle, type, state };
60
44
  });
61
45
  }
62
46
  render() {
@@ -73,12 +57,13 @@ let ObcCompass = class extends LitElement {
73
57
  type === AdviceType.caution ? TickmarkType.secondary : void 0
74
58
  )
75
59
  );
76
- const width = (176 + this.padding) * 2;
60
+ const padding = this.getPadding();
61
+ const width = (176 + padding) * 2;
77
62
  const viewBox = `-${width / 2} -${width / 2} ${width} ${width}`;
78
63
  return html`
79
64
  <div class="container">
80
65
  <obc-watch
81
- .padding=${this.padding}
66
+ .padding=${padding}
82
67
  .advices=${this.angleAdviceRaw}
83
68
  .tickmarks=${tickmarks}
84
69
  .labelFrameEnabled=${true}
@@ -124,15 +109,9 @@ __decorateClass([
124
109
  __decorateClass([
125
110
  property({ type: Number })
126
111
  ], ObcCompass.prototype, "courseOverGround", 2);
127
- __decorateClass([
128
- property({ type: Number })
129
- ], ObcCompass.prototype, "padding", 2);
130
112
  __decorateClass([
131
113
  property({ type: Array, attribute: false })
132
114
  ], ObcCompass.prototype, "headingAdvices", 2);
133
- __decorateClass([
134
- state()
135
- ], ObcCompass.prototype, "containerWidth", 2);
136
115
  ObcCompass = __decorateClass([
137
116
  customElement("obc-compass")
138
117
  ], ObcCompass);
@@ -1 +1 @@
1
- {"version":3,"file":"compass.js","sources":["../../../src/navigation-instruments/compass/compass.ts"],"sourcesContent":["import {LitElement, css, html} from 'lit';\nimport {customElement, property, state} from 'lit/decorators.js';\nimport '../watch/watch';\nimport {Tickmark, TickmarkType} from '../watch/tickmark';\nimport {arrow, ArrowStyle} from './arrow';\nimport {\n AdviceState,\n AdviceType,\n AngleAdvice,\n AngleAdviceRaw,\n} from '../watch/advice';\nimport {radialTickmarks} from './radial-tickmark';\n\n@customElement('obc-compass')\nexport class ObcCompass extends LitElement {\n @property({type: Number}) heading = 0;\n @property({type: Number}) courseOverGround = 0;\n @property({type: Number}) padding = 48;\n @property({type: Array, attribute: false}) headingAdvices: AngleAdvice[] = [];\n @state() containerWidth = 0;\n\n private resizeObserver: ResizeObserver = new ResizeObserver((entries) => {\n for (const entry of entries) {\n this.containerWidth = Math.min(\n entry.contentRect.width,\n entry.contentRect.height\n );\n this.adjustPadding();\n }\n });\n\n override connectedCallback() {\n super.connectedCallback();\n this.resizeObserver.observe(this);\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this.resizeObserver.unobserve(this);\n }\n\n private adjustPadding() {\n const deltaWidth = 512 - this.containerWidth;\n const steps = deltaWidth / 128;\n let deltaPadding = 0;\n if (deltaWidth > 0) {\n deltaPadding = steps * 48;\n } else {\n deltaPadding = steps * 6;\n }\n\n this.padding = 72 + deltaPadding;\n }\n\n private get angleAdviceRaw(): AngleAdviceRaw[] {\n return this.headingAdvices.map(({minAngle, maxAngle, hinted, type}) => {\n const state =\n this.heading >= minAngle && this.heading <= maxAngle\n ? AdviceState.triggered\n : hinted\n ? AdviceState.hinted\n : AdviceState.regular;\n return {minAngle, maxAngle, type, state};\n });\n }\n\n override render() {\n const tickmarks: Tickmark[] = [\n {angle: 0, type: TickmarkType.main},\n {angle: 90, type: TickmarkType.main},\n {angle: 180, type: TickmarkType.main},\n {angle: 270, type: TickmarkType.main},\n ];\n\n const rt = this.headingAdvices.map(({minAngle, maxAngle, type}) =>\n radialTickmarks(\n minAngle,\n maxAngle,\n type === AdviceType.caution ? TickmarkType.secondary : undefined\n )\n );\n\n const width = (176 + this.padding) * 2;\n const viewBox = `-${width / 2} -${width / 2} ${width} ${width}`;\n\n return html`\n <div class=\"container\">\n <obc-watch\n .padding=${this.padding}\n .advices=${this.angleAdviceRaw}\n .tickmarks=${tickmarks}\n .labelFrameEnabled=${true}\n .crosshairEnabled=${true}\n >\n </obc-watch>\n <svg viewBox=\"${viewBox}\">\n ${rt} ${arrow(ArrowStyle.HDG, this.heading)}\n ${arrow(ArrowStyle.COG, this.courseOverGround)}\n </svg>\n </div>\n `;\n }\n\n static override styles = css`\n * {\n box-sizing: border-box;\n }\n\n .container {\n position: relative;\n width: 100%;\n height: 100%;\n }\n\n .container > * {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n }\n\n :host {\n display: block;\n width: 100%;\n height: 100%;\n }\n `;\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-compass': ObcCompass;\n }\n}\n"],"names":["state"],"mappings":"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"}
1
+ {"version":3,"file":"compass.js","sources":["../../../src/navigation-instruments/compass/compass.ts"],"sourcesContent":["import {LitElement, css, html} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport '../watch/watch';\nimport {Tickmark, TickmarkType} from '../watch/tickmark';\nimport {arrow, ArrowStyle} from './arrow';\nimport {\n AdviceState,\n AdviceType,\n AngleAdvice,\n AngleAdviceRaw,\n} from '../watch/advice';\nimport {radialTickmarks} from './radial-tickmark';\nimport {ResizeController} from '@lit-labs/observers/resize-controller.js';\n\n/**\n *\n * @ignition-base-height: 512px\n * @ignition-base-width: 512px\n */\n@customElement('obc-compass')\nexport class ObcCompass extends LitElement {\n @property({type: Number}) heading = 0;\n @property({type: Number}) courseOverGround = 0;\n @property({type: Array, attribute: false}) headingAdvices: AngleAdvice[] = [];\n\n // @ts-expect-error TS6133: The controller ensures that the render\n // function is called on resize of the element\n private _resizeController = new ResizeController(this, {});\n\n private getPadding() {\n const size = Math.min(this.clientHeight, this.clientWidth);\n const deltaWidth = 512 - size;\n const steps = deltaWidth / 128;\n let deltaPadding = 0;\n if (deltaWidth > 0) {\n deltaPadding = steps * 48;\n } else {\n deltaPadding = steps * 6;\n }\n\n return 72 + deltaPadding;\n }\n\n private get angleAdviceRaw(): AngleAdviceRaw[] {\n return this.headingAdvices.map(({minAngle, maxAngle, hinted, type}) => {\n const state =\n this.heading >= minAngle && this.heading <= maxAngle\n ? AdviceState.triggered\n : hinted\n ? AdviceState.hinted\n : AdviceState.regular;\n return {minAngle, maxAngle, type, state};\n });\n }\n\n override render() {\n const tickmarks: Tickmark[] = [\n {angle: 0, type: TickmarkType.main},\n {angle: 90, type: TickmarkType.main},\n {angle: 180, type: TickmarkType.main},\n {angle: 270, type: TickmarkType.main},\n ];\n\n const rt = this.headingAdvices.map(({minAngle, maxAngle, type}) =>\n radialTickmarks(\n minAngle,\n maxAngle,\n type === AdviceType.caution ? TickmarkType.secondary : undefined\n )\n );\n\n const padding = this.getPadding();\n const width = (176 + padding) * 2;\n const viewBox = `-${width / 2} -${width / 2} ${width} ${width}`;\n\n return html`\n <div class=\"container\">\n <obc-watch\n .padding=${padding}\n .advices=${this.angleAdviceRaw}\n .tickmarks=${tickmarks}\n .labelFrameEnabled=${true}\n .crosshairEnabled=${true}\n >\n </obc-watch>\n <svg viewBox=\"${viewBox}\">\n ${rt} ${arrow(ArrowStyle.HDG, this.heading)}\n ${arrow(ArrowStyle.COG, this.courseOverGround)}\n </svg>\n </div>\n `;\n }\n\n static override styles = css`\n * {\n box-sizing: border-box;\n }\n\n .container {\n position: relative;\n width: 100%;\n height: 100%;\n }\n\n .container > * {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n }\n\n :host {\n display: block;\n width: 100%;\n height: 100%;\n }\n `;\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-compass': ObcCompass;\n }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAoBa,IAAA,aAAN,cAAyB,WAAW;AAAA,EAApC,cAAA;AAAA,UAAA,GAAA,SAAA;AAC+B,SAAA,UAAA;AACS,SAAA,mBAAA;AACF,SAAA,iBAAgC;AAI3E,SAAQ,oBAAoB,IAAI,iBAAiB,MAAM,CAAE,CAAA;AAAA,EAAA;AAAA,EAEjD,aAAa;AACnB,UAAM,OAAO,KAAK,IAAI,KAAK,cAAc,KAAK,WAAW;AACzD,UAAM,aAAa,MAAM;AACzB,UAAM,QAAQ,aAAa;AAC3B,QAAI,eAAe;AACnB,QAAI,aAAa,GAAG;AAClB,qBAAe,QAAQ;AAAA,IAAA,OAClB;AACL,qBAAe,QAAQ;AAAA,IACzB;AAEA,WAAO,KAAK;AAAA,EACd;AAAA,EAEA,IAAY,iBAAmC;AACtC,WAAA,KAAK,eAAe,IAAI,CAAC,EAAC,UAAU,UAAU,QAAQ,WAAU;AACrE,YAAM,QACJ,KAAK,WAAW,YAAY,KAAK,WAAW,WACxC,YAAY,YACZ,SACE,YAAY,SACZ,YAAY;AACpB,aAAO,EAAC,UAAU,UAAU,MAAM,MAAK;AAAA,IAAA,CACxC;AAAA,EACH;AAAA,EAES,SAAS;AAChB,UAAM,YAAwB;AAAA,MAC5B,EAAC,OAAO,GAAG,MAAM,aAAa,KAAI;AAAA,MAClC,EAAC,OAAO,IAAI,MAAM,aAAa,KAAI;AAAA,MACnC,EAAC,OAAO,KAAK,MAAM,aAAa,KAAI;AAAA,MACpC,EAAC,OAAO,KAAK,MAAM,aAAa,KAAI;AAAA,IAAA;AAGhC,UAAA,KAAK,KAAK,eAAe;AAAA,MAAI,CAAC,EAAC,UAAU,UAAU,KACvD,MAAA;AAAA,QACE;AAAA,QACA;AAAA,QACA,SAAS,WAAW,UAAU,aAAa,YAAY;AAAA,MACzD;AAAA,IAAA;AAGI,UAAA,UAAU,KAAK;AACf,UAAA,SAAS,MAAM,WAAW;AAC1B,UAAA,UAAU,IAAI,QAAQ,CAAC,KAAK,QAAQ,CAAC,IAAI,KAAK,IAAI,KAAK;AAEtD,WAAA;AAAA;AAAA;AAAA,qBAGU,OAAO;AAAA,qBACP,KAAK,cAAc;AAAA,uBACjB,SAAS;AAAA,+BACD,IAAI;AAAA,8BACL,IAAI;AAAA;AAAA;AAAA,wBAGV,OAAO;AAAA,YACnB,EAAE,IAAI,MAAM,WAAW,KAAK,KAAK,OAAO,CAAC;AAAA,YACzC,MAAM,WAAW,KAAK,KAAK,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA,EAItD;AA2BF;AAlGa,WAyEK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAxEC,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GADb,WACe,WAAA,WAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAFb,WAEe,WAAA,oBAAA,CAAA;AACiB,gBAAA;AAAA,EAA1C,SAAS,EAAC,MAAM,OAAO,WAAW,OAAM;AAAA,GAH9B,WAGgC,WAAA,kBAAA,CAAA;AAHhC,aAAN,gBAAA;AAAA,EADN,cAAc,aAAa;AAAA,GACf,UAAA;"}
@@ -18,7 +18,8 @@ const componentStyle = css`* {
18
18
  }
19
19
 
20
20
  :host {
21
- display: block;
21
+ display: grid;
22
+ place-items: center;
22
23
  width: 100%;
23
24
  height: 100%;
24
25
  }
@@ -1 +1 @@
1
- {"version":3,"file":"compass-flat.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"compass-flat.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -12,6 +12,11 @@ export interface Label {
12
12
  y: LabelPosition;
13
13
  text: string;
14
14
  }
15
+ /**
16
+ *
17
+ * @ignition-base-height: 170px
18
+ * @ignition-base-width: 512px
19
+ */
15
20
  export declare class ObcCompassFlat extends LitElement {
16
21
  noPadding: boolean;
17
22
  FOVIndicator: boolean;
@@ -23,6 +28,7 @@ export declare class ObcCompassFlat extends LitElement {
23
28
  minFOV: number;
24
29
  maxFOV: number;
25
30
  containerWidth: number;
31
+ maxContainerWidth: number;
26
32
  private resizeObserver;
27
33
  connectedCallback(): void;
28
34
  disconnectedCallback(): void;
@@ -1 +1 @@
1
- {"version":3,"file":"compass-flat.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/compass-flat/compass-flat.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAoC,MAAM,KAAK,CAAC;AAIlE,OAAO,0BAA0B,CAAC;AAElC,oBAAY,aAAa;IACvB,GAAG,MAAM;IACT,MAAM,KAAK;CACZ;AAED,oBAAY,UAAU;IACpB,OAAO,gDAAgD;CACxD;AAED,MAAM,WAAW,KAAK;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,aAAa,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,qBACa,cAAe,SAAQ,UAAU;IACjB,SAAS,EAAE,OAAO,CAAQ;IAC1B,YAAY,EAAE,OAAO,CAAS;IAC/B,OAAO,EAAE,MAAM,CAAM;IACrB,OAAO,SAAK;IACZ,gBAAgB,SAAK;IACrB,YAAY,SAAK;IACjB,GAAG,SAAM;IACT,MAAM,SAAM;IACZ,MAAM,SAAO;IAE9B,cAAc,SAAK;IAE5B,OAAO,CAAC,cAAc,CAInB;IAEM,iBAAiB;IAKjB,oBAAoB;IAK7B,cAAc;;;;;IAsCd,OAAO,CAAC,yBAAyB;IAwBjC,OAAO,CAAC,yBAAyB;IAajC,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,kBAAkB;IAmC1B,OAAO,KAAK,MAAM,GAIjB;IAED,OAAO,CAAC,MAAM;IAQL,MAAM;IAiCf,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}
1
+ {"version":3,"file":"compass-flat.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/compass-flat/compass-flat.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAoC,MAAM,KAAK,CAAC;AAIlE,OAAO,0BAA0B,CAAC;AAElC,oBAAY,aAAa;IACvB,GAAG,MAAM;IACT,MAAM,KAAK;CACZ;AAED,oBAAY,UAAU;IACpB,OAAO,gDAAgD;CACxD;AAED,MAAM,WAAW,KAAK;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,aAAa,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;;GAIG;AACH,qBACa,cAAe,SAAQ,UAAU;IACjB,SAAS,EAAE,OAAO,CAAQ;IAC1B,YAAY,EAAE,OAAO,CAAS;IAC/B,OAAO,EAAE,MAAM,CAAM;IACrB,OAAO,SAAK;IACZ,gBAAgB,SAAK;IACrB,YAAY,SAAK;IACjB,GAAG,SAAM;IACT,MAAM,SAAM;IACZ,MAAM,SAAO;IAE9B,cAAc,SAAK;IACnB,iBAAiB,SAAK;IAE/B,OAAO,CAAC,cAAc,CASnB;IAEM,iBAAiB;IAKjB,oBAAoB;IAK7B,cAAc;;;;;IAsCd,OAAO,CAAC,yBAAyB;IAwBjC,OAAO,CAAC,yBAAyB;IAajC,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,kBAAkB;IAmC1B,OAAO,KAAK,MAAM,GAIjB;IAED,OAAO,CAAC,MAAM;IAQL,MAAM;IAiCf,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}
@@ -36,9 +36,14 @@ let ObcCompassFlat = class extends LitElement {
36
36
  this.minFOV = 45;
37
37
  this.maxFOV = 180;
38
38
  this.containerWidth = 0;
39
+ this.maxContainerWidth = 0;
39
40
  this.resizeObserver = new ResizeObserver((entries) => {
40
41
  for (const entry of entries) {
41
- this.containerWidth = entry.contentRect.width;
42
+ this.maxContainerWidth = -125.36 + 3.79 * entry.contentRect.height;
43
+ this.containerWidth = Math.min(
44
+ entry.contentRect.width,
45
+ this.maxContainerWidth
46
+ );
42
47
  }
43
48
  });
44
49
  }
@@ -173,7 +178,7 @@ let ObcCompassFlat = class extends LitElement {
173
178
  }));
174
179
  const viewBox = this.noPadding ? "-192 -128 384 128" : "-200 -144 400 144";
175
180
  return svg`
176
- <div class="container">
181
+ <div class="container" style="max-width:${this.maxContainerWidth}px">
177
182
  <obc-watch-flat .noPadding=${this.noPadding} .FOVIndicator=${this.FOVIndicator ? this.renderFOVIndicator() : []} .labels=${scaledLabels} .rotation=${this.heading} .tickmarks=${tickmarks} .tickmarkSpacing=${translationScale}></obc-watch-flat>
178
183
  <svg viewBox=${viewBox} xmlns="http://www.w3.org/2000/svg">
179
184
  ${this.HDGSvg}${this.COGSvg(translation)}
@@ -212,6 +217,9 @@ __decorateClass([
212
217
  __decorateClass([
213
218
  state()
214
219
  ], ObcCompassFlat.prototype, "containerWidth", 2);
220
+ __decorateClass([
221
+ state()
222
+ ], ObcCompassFlat.prototype, "maxContainerWidth", 2);
215
223
  ObcCompassFlat = __decorateClass([
216
224
  customElement("obc-compass-flat")
217
225
  ], ObcCompassFlat);