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

package/.storybook/main.ts

@@ -10,7 +10,8 @@ const config: StorybookConfig = {
     getAbsolutePath('@storybook/addon-themes'),
     getAbsolutePath('@storybook/addon-interactions'),
     getAbsolutePath('@storybook/addon-storysource'),
-    '@chromatic-com/storybook',
+    getAbsolutePath('storybook-addon-tag-badges'),
+    getAbsolutePath('@chromatic-com/storybook'),
   ],
 
   framework: {

package/.storybook/manager.ts

@@ -3,4 +3,20 @@ import obTheme from './openbridgeTheme';
 
 addons.setConfig({
   theme: obTheme,
+  tagBadges: [
+    // Add an entry that matches 'frog' and displays a cool badge in the sidebar only
+    {
+      tags: '6.0',
+      badge: {
+        text: '6.0 Beta',
+        bgColor: '#0070d6',
+        fgColor: '#fff',
+        tooltip: 'OpenBridge 6.0 Beta',
+      },
+      display: {
+        sidebar: ['component'],
+        toolbar: true,
+      },
+    },
+  ],
 });

package/.storybook/preview.ts

@@ -1,5 +1,4 @@
 import type {Preview} from '@storybook/web-components';
-import {BadgesConfig} from '@geometricpanda/storybook-addon-badges';
 
 import '../src/palettes/variables.css';
 import {setCustomElementsManifest} from '@storybook/web-components';

package/custom-elements.json

@@ -84,24 +84,7 @@
             {
               "name": "context",
               "type": {
-                "text": "{args: {width: number}}"
-              }
-            }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "beta6Decorator",
-          "return": {
-            "type": {
-              "text": "HTMLTemplateResult"
-            }
-          },
-          "parameters": [
-            {
-              "name": "story",
-              "type": {
-                "text": "() => unknown"
+                "text": "{args: {width: number; height?: number}}"
               }
             }
           ]
@@ -139,14 +122,6 @@
             "name": "widthDecorator",
             "module": "src/storybook-util.ts"
           }
-        },
-        {
-          "kind": "js",
-          "name": "beta6Decorator",
-          "declaration": {
-            "name": "beta6Decorator",
-            "module": "src/storybook-util.ts"
-          }
         }
       ]
     },
@@ -242,6 +217,12 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/navigation-instruments/types.ts",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "src/icons/icon-01-add.ts",
@@ -38216,12 +38197,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/navigation-instruments/types.ts",
-      "declarations": [],
-      "exports": []
-    },
     {
       "kind": "javascript-module",
       "path": "src/svghelpers/circle.ts",
@@ -44526,15 +44501,6 @@
               "default": "0",
               "attribute": "courseOverGround"
             },
-            {
-              "kind": "field",
-              "name": "padding",
-              "type": {
-                "text": "number"
-              },
-              "default": "48",
-              "attribute": "padding"
-            },
             {
               "kind": "field",
               "name": "headingAdvices",
@@ -44545,24 +44511,13 @@
             },
             {
               "kind": "field",
-              "name": "containerWidth",
-              "type": {
-                "text": "number"
-              },
-              "default": "0"
-            },
-            {
-              "kind": "field",
-              "name": "resizeObserver",
-              "type": {
-                "text": "ResizeObserver"
-              },
+              "name": "_resizeController",
               "privacy": "private",
-              "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  })"
+              "default": "new ResizeController(this, {})"
             },
             {
               "kind": "method",
-              "name": "adjustPadding",
+              "name": "getPadding",
               "privacy": "private"
             },
             {
@@ -44591,14 +44546,6 @@
               },
               "default": "0",
               "fieldName": "courseOverGround"
-            },
-            {
-              "name": "padding",
-              "type": {
-                "text": "number"
-              },
-              "default": "48",
-              "fieldName": "padding"
             }
           ],
           "superclass": {
@@ -44771,6 +44718,14 @@
               },
               "default": "0"
             },
+            {
+              "kind": "field",
+              "name": "maxContainerWidth",
+              "type": {
+                "text": "number"
+              },
+              "default": "0"
+            },
             {
               "kind": "field",
               "name": "resizeObserver",
@@ -44778,7 +44733,7 @@
                 "text": "ResizeObserver"
               },
               "privacy": "private",
-              "default": "new ResizeObserver((entries) => {\n    for (const entry of entries) {\n      this.containerWidth = entry.contentRect.width;\n    }\n  })"
+              "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  })"
             },
             {
               "kind": "method",

package/dist/automation/automation-tank/automation-tank.d.ts

@@ -16,6 +16,13 @@ export declare enum TankVariant {
     vertical = "vertical",
     compact = "compact"
 }
+/**
+ *
+ *
+ * @ignition-base-height: 173px
+ * @ignition-base-width: 168px
+ * @ignition-center
+ */
 export declare class ObcAutomationTank extends LitElement {
     medium: LineMedium;
     value: number;

package/dist/automation/automation-tank/automation-tank.d.ts.map

@@ -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"}
+{"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"}

package/dist/automation/automation-tank/automation-tank.js.map

@@ -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;"}
+{"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;"}

package/dist/navigation-instruments/compass/compass.d.ts

@@ -1,16 +1,17 @@
 import { LitElement } from 'lit';
 import '../watch/watch';
 import { AngleAdvice } from '../watch/advice';
+/**
+ *
+ * @ignition-base-height: 512px
+ * @ignition-base-width: 512px
+ */
 export declare class ObcCompass extends LitElement {
     heading: number;
     courseOverGround: number;
-    padding: number;
     headingAdvices: AngleAdvice[];
-    containerWidth: number;
-    private resizeObserver;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    private adjustPadding;
+    private _resizeController;
+    private getPadding;
     private get angleAdviceRaw();
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult;

package/dist/navigation-instruments/compass/compass.d.ts.map

@@ -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"}
+{"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"}

package/dist/navigation-instruments/compass/compass.js

@@ -1,10 +1,11 @@
 import { css, LitElement, html } from "lit";
-import { property, state, customElement } from "lit/decorators.js";
+import { property, customElement } from "lit/decorators.js";
 import "../watch/watch.js";
 import { TickmarkType } from "../watch/tickmark.js";
 import { arrow, ArrowStyle } from "./arrow.js";
 import { AdviceState, AdviceType } from "../watch/advice.js";
 import { radialTickmarks } from "./radial-tickmark.js";
+import { ResizeController } from "@lit-labs/observers/resize-controller.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -21,29 +22,12 @@ let ObcCompass = class extends LitElement {
     super(...arguments);
     this.heading = 0;
     this.courseOverGround = 0;
-    this.padding = 48;
     this.headingAdvices = [];
-    this.containerWidth = 0;
-    this.resizeObserver = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        this.containerWidth = Math.min(
-          entry.contentRect.width,
-          entry.contentRect.height
-        );
-        this.adjustPadding();
-      }
-    });
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.resizeObserver.observe(this);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.resizeObserver.unobserve(this);
+    this._resizeController = new ResizeController(this, {});
   }
-  adjustPadding() {
-    const deltaWidth = 512 - this.containerWidth;
+  getPadding() {
+    const size = Math.min(this.clientHeight, this.clientWidth);
+    const deltaWidth = 512 - size;
     const steps = deltaWidth / 128;
     let deltaPadding = 0;
     if (deltaWidth > 0) {
@@ -51,12 +35,12 @@ let ObcCompass = class extends LitElement {
     } else {
       deltaPadding = steps * 6;
     }
-    this.padding = 72 + deltaPadding;
+    return 72 + deltaPadding;
   }
   get angleAdviceRaw() {
     return this.headingAdvices.map(({ minAngle, maxAngle, hinted, type }) => {
-      const state2 = this.heading >= minAngle && this.heading <= maxAngle ? AdviceState.triggered : hinted ? AdviceState.hinted : AdviceState.regular;
-      return { minAngle, maxAngle, type, state: state2 };
+      const state = this.heading >= minAngle && this.heading <= maxAngle ? AdviceState.triggered : hinted ? AdviceState.hinted : AdviceState.regular;
+      return { minAngle, maxAngle, type, state };
     });
   }
   render() {
@@ -73,12 +57,13 @@ let ObcCompass = class extends LitElement {
         type === AdviceType.caution ? TickmarkType.secondary : void 0
       )
     );
-    const width = (176 + this.padding) * 2;
+    const padding = this.getPadding();
+    const width = (176 + padding) * 2;
     const viewBox = `-${width / 2} -${width / 2} ${width} ${width}`;
     return html`
       <div class="container">
         <obc-watch
-          .padding=${this.padding}
+          .padding=${padding}
           .advices=${this.angleAdviceRaw}
           .tickmarks=${tickmarks}
           .labelFrameEnabled=${true}
@@ -124,15 +109,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Number })
 ], ObcCompass.prototype, "courseOverGround", 2);
-__decorateClass([
-  property({ type: Number })
-], ObcCompass.prototype, "padding", 2);
 __decorateClass([
   property({ type: Array, attribute: false })
 ], ObcCompass.prototype, "headingAdvices", 2);
-__decorateClass([
-  state()
-], ObcCompass.prototype, "containerWidth", 2);
 ObcCompass = __decorateClass([
   customElement("obc-compass")
 ], ObcCompass);

package/dist/navigation-instruments/compass/compass.js.map

@@ -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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"}
+{"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;"}

package/dist/navigation-instruments/compass-flat/compass-flat.css.js

@@ -18,7 +18,8 @@ const componentStyle = css`* {
 }
 
 :host {
-  display: block;
+  display: grid;
+  place-items: center;
   width: 100%;
   height: 100%;
 }

package/dist/navigation-instruments/compass-flat/compass-flat.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"compass-flat.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"compass-flat.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/navigation-instruments/compass-flat/compass-flat.d.ts

@@ -12,6 +12,11 @@ export interface Label {
     y: LabelPosition;
     text: string;
 }
+/**
+ *
+ * @ignition-base-height: 170px
+ * @ignition-base-width: 512px
+ */
 export declare class ObcCompassFlat extends LitElement {
     noPadding: boolean;
     FOVIndicator: boolean;
@@ -23,6 +28,7 @@ export declare class ObcCompassFlat extends LitElement {
     minFOV: number;
     maxFOV: number;
     containerWidth: number;
+    maxContainerWidth: number;
     private resizeObserver;
     connectedCallback(): void;
     disconnectedCallback(): void;

package/dist/navigation-instruments/compass-flat/compass-flat.d.ts.map

@@ -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"}
+{"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"}

package/dist/navigation-instruments/compass-flat/compass-flat.js

@@ -36,9 +36,14 @@ let ObcCompassFlat = class extends LitElement {
     this.minFOV = 45;
     this.maxFOV = 180;
     this.containerWidth = 0;
+    this.maxContainerWidth = 0;
     this.resizeObserver = new ResizeObserver((entries) => {
       for (const entry of entries) {
-        this.containerWidth = entry.contentRect.width;
+        this.maxContainerWidth = -125.36 + 3.79 * entry.contentRect.height;
+        this.containerWidth = Math.min(
+          entry.contentRect.width,
+          this.maxContainerWidth
+        );
       }
     });
   }
@@ -173,7 +178,7 @@ let ObcCompassFlat = class extends LitElement {
     }));
     const viewBox = this.noPadding ? "-192 -128 384 128" : "-200 -144 400 144";
     return svg`
-      <div class="container">
+      <div class="container" style="max-width:${this.maxContainerWidth}px">
         <obc-watch-flat .noPadding=${this.noPadding} .FOVIndicator=${this.FOVIndicator ? this.renderFOVIndicator() : []} .labels=${scaledLabels} .rotation=${this.heading} .tickmarks=${tickmarks} .tickmarkSpacing=${translationScale}></obc-watch-flat>
         <svg viewBox=${viewBox} xmlns="http://www.w3.org/2000/svg"> 
         ${this.HDGSvg}${this.COGSvg(translation)}
@@ -212,6 +217,9 @@ __decorateClass([
 __decorateClass([
   state()
 ], ObcCompassFlat.prototype, "containerWidth", 2);
+__decorateClass([
+  state()
+], ObcCompassFlat.prototype, "maxContainerWidth", 2);
 ObcCompassFlat = __decorateClass([
   customElement("obc-compass-flat")
 ], ObcCompassFlat);