@oicl/openbridge-webcomponents 0.0.15-dev-20240923184809 → 0.0.15-dev-20240923191659

package/.storybook/main.ts

@@ -1,58 +1,58 @@
-import {dirname, join} from 'path';
-import type {StorybookConfig} from '@storybook/web-components-vite';
-
-const config: StorybookConfig = {
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-
-  addons: [
-    getAbsolutePath('@storybook/addon-links'),
-    getAbsolutePath('@storybook/addon-essentials'),
-    getAbsolutePath('@storybook/addon-themes'),
-    getAbsolutePath('@storybook/addon-interactions'),
-    getAbsolutePath('@storybook/addon-storysource'),
-    '@chromatic-com/storybook',
-  ],
-
-  framework: {
-    name: getAbsolutePath('@storybook/web-components-vite'),
-    options: {},
-  },
-
-  staticDirs: [{from: '../public', to: '/assets'}],
-
-  previewHead: (head, options) => `
-    <dialog> ${options.configType}</dialog>
-    ${head}
-    <style>
-    @font-face {
-    font-family: Noto Sans;
-    src: url(/assets/NotoSans.ttf);
-    }
-</style>
-  `,
-
-  managerHead: (head, options) => `
-  ${head}
-  ${
-    options.configType !== 'DEVELOPMENT'
-      ? `
-  <!-- Google tag (gtag.js) -->
-  <script async src="https://www.googletagmanager.com/gtag/js?id=G-BBSXX2P5P8"></script>
-  <script>
-    window.dataLayer = window.dataLayer || [];
-    function gtag(){dataLayer.push(arguments);}
-    gtag('js', new Date());
-  
-    gtag('config', 'G-BBSXX2P5P8');
-  </script>`
-      : ''
-  }
-  `,
-
-  docs: {},
-};
-export default config;
-
-function getAbsolutePath(value: string): any {
-  return dirname(require.resolve(join(value, 'package.json')));
-}
+import {dirname, join} from 'path';
+import type {StorybookConfig} from '@storybook/web-components-vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+
+  addons: [
+    getAbsolutePath('@storybook/addon-links'),
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@storybook/addon-themes'),
+    getAbsolutePath('@storybook/addon-interactions'),
+    getAbsolutePath('@storybook/addon-storysource'),
+    '@chromatic-com/storybook',
+  ],
+
+  framework: {
+    name: getAbsolutePath('@storybook/web-components-vite'),
+    options: {},
+  },
+
+  staticDirs: [{from: '../public', to: '/assets'}],
+
+  previewHead: (head, options) => `
+    <dialog> ${options.configType}</dialog>
+    ${head}
+    <style>
+    @font-face {
+    font-family: Noto Sans;
+    src: url(/assets/NotoSans.ttf);
+    }
+</style>
+  `,
+
+  managerHead: (head, options) => `
+  ${head}
+  ${
+    options.configType !== 'DEVELOPMENT'
+      ? `
+  <!-- Google tag (gtag.js) -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=G-BBSXX2P5P8"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+  
+    gtag('config', 'G-BBSXX2P5P8');
+  </script>`
+      : ''
+  }
+  `,
+
+  docs: {},
+};
+export default config;
+
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, 'package.json')));
+}

package/.storybook/preview.ts

@@ -1,55 +1,55 @@
-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';
-
-import customElements from '../custom-elements.json';
-
-setCustomElementsManifest(customElements);
-
-import {withThemeByDataAttribute} from '@storybook/addon-themes';
-
-export const decorators = [
-  withThemeByDataAttribute({
-    themes: {
-      night: 'night',
-      dusk: 'dusk',
-      day: 'day',
-      bright: 'bright',
-    },
-    defaultTheme: 'day',
-    attributeName: 'data-obc-theme',
-  }),
-];
-
-const preview: Preview = {
-  parameters: {
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-    backgrounds: {
-      grid: {
-        cellSize: 8,
-      },
-      default: 'container-background-color',
-      values: [
-        {
-          name: 'container-section-color',
-          value: 'var(--container-section-color)',
-        },
-        {
-          name: 'container-background-color',
-          value: 'var(--container-background-color)',
-        },
-      ],
-    },
-  },
-
-  tags: ['autodocs'],
-};
-
-export default preview;
+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';
+
+import customElements from '../custom-elements.json';
+
+setCustomElementsManifest(customElements);
+
+import {withThemeByDataAttribute} from '@storybook/addon-themes';
+
+export const decorators = [
+  withThemeByDataAttribute({
+    themes: {
+      night: 'night',
+      dusk: 'dusk',
+      day: 'day',
+      bright: 'bright',
+    },
+    defaultTheme: 'day',
+    attributeName: 'data-obc-theme',
+  }),
+];
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    backgrounds: {
+      grid: {
+        cellSize: 8,
+      },
+      default: 'container-background-color',
+      values: [
+        {
+          name: 'container-section-color',
+          value: 'var(--container-section-color)',
+        },
+        {
+          name: 'container-background-color',
+          value: 'var(--container-background-color)',
+        },
+      ],
+    },
+  },
+
+  tags: ['autodocs'],
+};
+
+export default preview;

package/custom-elements.json

@@ -38322,7 +38322,7 @@
             {
               "name": "data",
               "type": {
-                "text": "{\n    width: number;\n    height: number;\n    strokeWidth: number;\n    strokeColor: string;\n    fillColor: string;\n    borderRadius: number;\n    strokePosition: 'inside' | 'outside';\n    y?: number;\n  }"
+                "text": "{\r\n    width: number;\r\n    height: number;\r\n    strokeWidth: number;\r\n    strokeColor: string;\r\n    fillColor: string;\r\n    borderRadius: number;\r\n    strokePosition: 'inside' | 'outside';\r\n    y?: number;\r\n  }"
               }
             }
           ]
@@ -44452,7 +44452,7 @@
                 "text": "ResizeObserver"
               },
               "privacy": "private",
-              "default": "new ResizeObserver((entries) => {\n    for (const entry of entries) {\n      this.containerWidth = entry.contentRect.width;\n      this.adjustPadding();\n    }\n  })"
+              "default": "new ResizeObserver((entries) => {\r\n    for (const entry of entries) {\r\n      this.containerWidth = entry.contentRect.width;\r\n      this.adjustPadding();\r\n    }\r\n  })"
             },
             {
               "kind": "method",
@@ -44689,7 +44689,7 @@
                 "text": "ResizeObserver"
               },
               "privacy": "private",
-              "default": "new ResizeObserver((entries) => {\n    for (const entry of entries) {\n      this.containerWidth = entry.contentRect.width;\n      this.updateLabels();\n    }\n  })"
+              "default": "new ResizeObserver((entries) => {\r\n    for (const entry of entries) {\r\n      this.containerWidth = entry.contentRect.width;\r\n      this.updateLabels();\r\n    }\r\n  })"
             },
             {
               "kind": "method",

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

@@ -1 +1 @@
-{"version":3,"file":"arrow.js","sources":["../../../src/navigation-instruments/compass/arrow.ts"],"sourcesContent":["import {SVGTemplateResult, svg} from 'lit';\n\nexport enum ArrowStyle {\n  HDG = 'HDG',\n  COG = 'COG',\n}\n\nexport function arrow(\n  style: ArrowStyle,\n  angle: number\n): SVGTemplateResult | SVGTemplateResult[] {\n  const colorName = 'var(--instrument-enhanced-secondary-color)';\n\n  if (style === ArrowStyle.HDG) {\n    return svg`\n      <g transform=\"translate(-32, -${256}) rotate(${angle}, 32, 256)\">\n        <rect x=\"28\" y=\"118\" width=\"8\" height=\"139\" rx=\"4\" fill=\"${colorName}\" />\n        <rect x=\"30.0039\" y=\"256\" width=\"4\" height=\"156\" rx=\"2\" fill=\"${colorName}\" />\n        <circle cx=\"32\" cy=\"256\" r=\"8\" fill=\"${colorName}\" />\n        <mask\n          id=\"mask0_262_65165\"\n          style=\"mask-type:luminance\"\n          maskUnits=\"userSpaceOnUse\"\n          x=\"8\"\n          y=\"94\"\n          width=\"48\"\n          height=\"50\"\n        >\n          <path\n            d=\"M13.2833 140.564L32 96L50.7167 140.564C51.4569 142.326 49.54 144.023 47.8805 143.075L32 136L16.1195 143.075C14.46 144.023 12.5432 142.326 13.2833 140.564Z\"\n            fill=\"white\"\n            stroke=\"black\"\n          />\n        </mask>\n        <g mask=\"url(#mask0_262_65165)\">\n          <path\n            d=\"M13.2833 140.564L32 96L50.7167 140.564C51.4569 142.326 49.54 144.023 47.8805 143.075L32 136L16.1195 143.075C14.46 144.023 12.5432 142.326 13.2833 140.564Z\"\n            fill=\"${colorName}\"\n          />\n        </g>\n      </g>\n    `;\n  } else if (style === ArrowStyle.COG) {\n    return svg`\n      <g transform=\"translate(-32, -${256}) rotate(${angle}, 32, 256)\">\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M13.2833 140.564C12.5431 142.326 14.46 144.023 16.1195 143.075L32 136L47.8805 143.075C49.54 144.023 51.4568 142.326 50.7167 140.564L32 96L13.2833 140.564ZM32 106.33L19.2545 136.676L32 131.393L44.7455 136.676L32 106.33ZM49.865 139.602L49.8625 139.6L49.865 139.602Z\"\n          fill=\"${colorName}\"\n        />\n        <rect x=\"30\" y=\"133\" width=\"4\" height=\"124\" rx=\"2\" fill=\"${colorName}\" />\n        <circle cx=\"32\" cy=\"256\" r=\"4\" fill=\"${colorName}\" />\n      </g>\n    `;\n  } else {\n    return [];\n  }\n\n  // return [...shaft, circle, arrowTip];\n}\n"],"names":["ArrowStyle"],"mappings":";AAEY,IAAA,+BAAAA,gBAAL;AACLA,cAAA,KAAM,IAAA;AACNA,cAAA,KAAM,IAAA;AAFIA,SAAAA;AAAA,GAAA,cAAA,CAAA,CAAA;AAKI,SAAA,MACd,OACA,OACyC;AACzC,QAAM,YAAY;AAElB,MAAI,UAAU,OAAgB;AACrB,WAAA;AAAA,sCAC2B,GAAG,YAAY,KAAK;AAAA,mEACS,SAAS;AAAA,wEACJ,SAAS;AAAA,+CAClC,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAmBpC,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA,WAKhB,UAAU,OAAgB;AAC5B,WAAA;AAAA,sCAC2B,GAAG,YAAY,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKxC,SAAS;AAAA;AAAA,mEAEwC,SAAS;AAAA,+CAC7B,SAAS;AAAA;AAAA;AAAA,EAAA,OAG/C;AACL,WAAO;EACT;AAGF;"}
+{"version":3,"file":"arrow.js","sources":["../../../src/navigation-instruments/compass/arrow.ts"],"sourcesContent":["import {SVGTemplateResult, svg} from 'lit';\r\n\r\nexport enum ArrowStyle {\r\n  HDG = 'HDG',\r\n  COG = 'COG',\r\n}\r\n\r\nexport function arrow(\r\n  style: ArrowStyle,\r\n  angle: number\r\n): SVGTemplateResult | SVGTemplateResult[] {\r\n  const colorName = 'var(--instrument-enhanced-secondary-color)';\r\n\r\n  if (style === ArrowStyle.HDG) {\r\n    return svg`\r\n      <g transform=\"translate(-32, -${256}) rotate(${angle}, 32, 256)\">\r\n        <rect x=\"28\" y=\"118\" width=\"8\" height=\"139\" rx=\"4\" fill=\"${colorName}\" />\r\n        <rect x=\"30.0039\" y=\"256\" width=\"4\" height=\"156\" rx=\"2\" fill=\"${colorName}\" />\r\n        <circle cx=\"32\" cy=\"256\" r=\"8\" fill=\"${colorName}\" />\r\n        <mask\r\n          id=\"mask0_262_65165\"\r\n          style=\"mask-type:luminance\"\r\n          maskUnits=\"userSpaceOnUse\"\r\n          x=\"8\"\r\n          y=\"94\"\r\n          width=\"48\"\r\n          height=\"50\"\r\n        >\r\n          <path\r\n            d=\"M13.2833 140.564L32 96L50.7167 140.564C51.4569 142.326 49.54 144.023 47.8805 143.075L32 136L16.1195 143.075C14.46 144.023 12.5432 142.326 13.2833 140.564Z\"\r\n            fill=\"white\"\r\n            stroke=\"black\"\r\n          />\r\n        </mask>\r\n        <g mask=\"url(#mask0_262_65165)\">\r\n          <path\r\n            d=\"M13.2833 140.564L32 96L50.7167 140.564C51.4569 142.326 49.54 144.023 47.8805 143.075L32 136L16.1195 143.075C14.46 144.023 12.5432 142.326 13.2833 140.564Z\"\r\n            fill=\"${colorName}\"\r\n          />\r\n        </g>\r\n      </g>\r\n    `;\r\n  } else if (style === ArrowStyle.COG) {\r\n    return svg`\r\n      <g transform=\"translate(-32, -${256}) rotate(${angle}, 32, 256)\">\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          d=\"M13.2833 140.564C12.5431 142.326 14.46 144.023 16.1195 143.075L32 136L47.8805 143.075C49.54 144.023 51.4568 142.326 50.7167 140.564L32 96L13.2833 140.564ZM32 106.33L19.2545 136.676L32 131.393L44.7455 136.676L32 106.33ZM49.865 139.602L49.8625 139.6L49.865 139.602Z\"\r\n          fill=\"${colorName}\"\r\n        />\r\n        <rect x=\"30\" y=\"133\" width=\"4\" height=\"124\" rx=\"2\" fill=\"${colorName}\" />\r\n        <circle cx=\"32\" cy=\"256\" r=\"4\" fill=\"${colorName}\" />\r\n      </g>\r\n    `;\r\n  } else {\r\n    return [];\r\n  }\r\n\r\n  // return [...shaft, circle, arrowTip];\r\n}\r\n"],"names":["ArrowStyle"],"mappings":";AAEY,IAAA,+BAAAA,gBAAL;AACLA,cAAA,KAAM,IAAA;AACNA,cAAA,KAAM,IAAA;AAFIA,SAAAA;AAAA,GAAA,cAAA,CAAA,CAAA;AAKI,SAAA,MACd,OACA,OACyC;AACzC,QAAM,YAAY;AAElB,MAAI,UAAU,OAAgB;AACrB,WAAA;AAAA,sCAC2B,GAAG,YAAY,KAAK;AAAA,mEACS,SAAS;AAAA,wEACJ,SAAS;AAAA,+CAClC,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAmBpC,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA,WAKhB,UAAU,OAAgB;AAC5B,WAAA;AAAA,sCAC2B,GAAG,YAAY,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKxC,SAAS;AAAA;AAAA,mEAEwC,SAAS;AAAA,+CAC7B,SAAS;AAAA;AAAA;AAAA,EAAA,OAG/C;AACL,WAAO;EACT;AAGF;"}

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} 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  @property({type: Number}) containerWidth = 0;\n\n  private resizeObserver: ResizeObserver = new ResizeObserver((entries) => {\n    for (const entry of entries) {\n      this.containerWidth = entry.contentRect.width;\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":[],"mappings":"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"}
+{"version":3,"file":"compass.js","sources":["../../../src/navigation-instruments/compass/compass.ts"],"sourcesContent":["import {LitElement, css, html} from 'lit';\r\nimport {customElement, property} from 'lit/decorators.js';\r\nimport '../watch/watch';\r\nimport {Tickmark, TickmarkType} from '../watch/tickmark';\r\nimport {arrow, ArrowStyle} from './arrow';\r\nimport {\r\n  AdviceState,\r\n  AdviceType,\r\n  AngleAdvice,\r\n  AngleAdviceRaw,\r\n} from '../watch/advice';\r\nimport {radialTickmarks} from './radial-tickmark';\r\n\r\n@customElement('obc-compass')\r\nexport class ObcCompass extends LitElement {\r\n  @property({type: Number}) heading = 0;\r\n  @property({type: Number}) courseOverGround = 0;\r\n  @property({type: Number}) padding = 48;\r\n  @property({type: Array, attribute: false}) headingAdvices: AngleAdvice[] = [];\r\n  @property({type: Number}) containerWidth = 0;\r\n\r\n  private resizeObserver: ResizeObserver = new ResizeObserver((entries) => {\r\n    for (const entry of entries) {\r\n      this.containerWidth = entry.contentRect.width;\r\n      this.adjustPadding();\r\n    }\r\n  });\r\n\r\n  override connectedCallback() {\r\n    super.connectedCallback();\r\n    this.resizeObserver.observe(this);\r\n  }\r\n\r\n  override disconnectedCallback() {\r\n    super.disconnectedCallback();\r\n    this.resizeObserver.unobserve(this);\r\n  }\r\n\r\n  private adjustPadding() {\r\n    const deltaWidth = 512 - this.containerWidth;\r\n    const steps = deltaWidth / 128;\r\n    let deltaPadding = 0;\r\n    if (deltaWidth > 0) {\r\n      deltaPadding = steps * 48;\r\n    } else {\r\n      deltaPadding = steps * 6;\r\n    }\r\n\r\n    this.padding = 72 + deltaPadding;\r\n  }\r\n\r\n  private get angleAdviceRaw(): AngleAdviceRaw[] {\r\n    return this.headingAdvices.map(({minAngle, maxAngle, hinted, type}) => {\r\n      const state =\r\n        this.heading >= minAngle && this.heading <= maxAngle\r\n          ? AdviceState.triggered\r\n          : hinted\r\n            ? AdviceState.hinted\r\n            : AdviceState.regular;\r\n      return {minAngle, maxAngle, type, state};\r\n    });\r\n  }\r\n\r\n  override render() {\r\n    const tickmarks: Tickmark[] = [\r\n      {angle: 0, type: TickmarkType.main},\r\n      {angle: 90, type: TickmarkType.main},\r\n      {angle: 180, type: TickmarkType.main},\r\n      {angle: 270, type: TickmarkType.main},\r\n    ];\r\n\r\n    const rt = this.headingAdvices.map(({minAngle, maxAngle, type}) =>\r\n      radialTickmarks(\r\n        minAngle,\r\n        maxAngle,\r\n        type === AdviceType.caution ? TickmarkType.secondary : undefined\r\n      )\r\n    );\r\n\r\n    const width = (176 + this.padding) * 2;\r\n    const viewBox = `-${width / 2} -${width / 2} ${width} ${width}`;\r\n\r\n    return html`\r\n      <div class=\"container\">\r\n        <obc-watch\r\n          .padding=${this.padding}\r\n          .advices=${this.angleAdviceRaw}\r\n          .tickmarks=${tickmarks}\r\n          .labelFrameEnabled=${true}\r\n          .crosshairEnabled=${true}\r\n        >\r\n        </obc-watch>\r\n        <svg viewBox=\"${viewBox}\">\r\n          ${rt} ${arrow(ArrowStyle.HDG, this.heading)}\r\n          ${arrow(ArrowStyle.COG, this.courseOverGround)}\r\n        </svg>\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  static override styles = css`\r\n    * {\r\n      box-sizing: border-box;\r\n    }\r\n\r\n    .container {\r\n      position: relative;\r\n      width: 100%;\r\n      height: 100%;\r\n    }\r\n\r\n    .container > * {\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n      width: 100%;\r\n      height: 100%;\r\n    }\r\n\r\n    :host {\r\n      display: block;\r\n      width: 100%;\r\n      height: 100%;\r\n    }\r\n  `;\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    'obc-compass': ObcCompass;\r\n  }\r\n}\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAca,IAAA,aAAN,cAAyB,WAAW;AAAA,EAApC,cAAA;AAAA,UAAA,GAAA,SAAA;AAC+B,SAAA,UAAA;AACS,SAAA,mBAAA;AACT,SAAA,UAAA;AACO,SAAA,iBAAgC;AAChC,SAAA,iBAAA;AAE3C,SAAQ,iBAAiC,IAAI,eAAe,CAAC,YAAY;AACvE,iBAAW,SAAS,SAAS;AACtB,aAAA,iBAAiB,MAAM,YAAY;AACxC,aAAK,cAAc;AAAA,MACrB;AAAA,IAAA,CACD;AAAA,EAAA;AAAA,EAEQ,oBAAoB;AAC3B,UAAM,kBAAkB;AACnB,SAAA,eAAe,QAAQ,IAAI;AAAA,EAClC;AAAA,EAES,uBAAuB;AAC9B,UAAM,qBAAqB;AACtB,SAAA,eAAe,UAAU,IAAI;AAAA,EACpC;AAAA,EAEQ,gBAAgB;AAChB,UAAA,aAAa,MAAM,KAAK;AAC9B,UAAM,QAAQ,aAAa;AAC3B,QAAI,eAAe;AACnB,QAAI,aAAa,GAAG;AAClB,qBAAe,QAAQ;AAAA,IAAA,OAClB;AACL,qBAAe,QAAQ;AAAA,IACzB;AAEA,SAAK,UAAU,KAAK;AAAA,EACtB;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,SAAS,MAAM,KAAK,WAAW;AAC/B,UAAA,UAAU,IAAI,QAAQ,CAAC,KAAK,QAAQ,CAAC,IAAI,KAAK,IAAI,KAAK;AAEtD,WAAA;AAAA;AAAA;AAAA,qBAGU,KAAK,OAAO;AAAA,qBACZ,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;AA/Ga,WAsFK,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;AArFC,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;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAHb,WAGe,WAAA,WAAA,CAAA;AACiB,gBAAA;AAAA,EAA1C,SAAS,EAAC,MAAM,OAAO,WAAW,OAAM;AAAA,GAJ9B,WAIgC,WAAA,kBAAA,CAAA;AACjB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GALb,WAKe,WAAA,kBAAA,CAAA;AALf,aAAN,gBAAA;AAAA,EADN,cAAc,aAAa;AAAA,GACf,UAAA;"}

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

@@ -1 +1 @@
-{"version":3,"file":"radial-tickmark.js","sources":["../../../src/navigation-instruments/compass/radial-tickmark.ts"],"sourcesContent":["import {SVGTemplateResult, svg} from 'lit';\nimport {TickmarkType, TickmarkStyle, tickmarkColor} from '../watch/tickmark';\n\nexport function radialTickmarks(\n  minAngle: number,\n  maxAngle: number,\n  type: TickmarkType | undefined\n): SVGTemplateResult[] {\n  if (type === TickmarkType.main || type === TickmarkType.tertiary) {\n    throw new Error(\n      'Only secondary tickmarks or undefined tickmarks (dots) are supported'\n    );\n  }\n\n  const origin = {x: 0, y: 0};\n  const radius = 320 / 2;\n  const strokeWidth = '1.2';\n  const margin = 1.5;\n  const colorName = tickmarkColor(TickmarkStyle.hinted);\n  const tickWidth = type === TickmarkType.secondary ? 4 : 1;\n  const tickmarks: SVGTemplateResult[] = [];\n\n  const sinMin = Math.sin((minAngle * Math.PI) / 180);\n  const cosMin = Math.cos((minAngle * Math.PI) / 180);\n  const sinMax = Math.sin((maxAngle * Math.PI) / 180);\n  const cosMax = Math.cos((maxAngle * Math.PI) / 180);\n\n  const deltaIncrement = tickWidth * margin;\n\n  for (let deltaR = 0; deltaR <= radius; deltaR += deltaIncrement) {\n    const xMin = origin.x + sinMin * deltaR;\n    const yMin = origin.y - cosMin * deltaR;\n    const xMax = origin.x + sinMax * deltaR;\n    const yMax = origin.y - cosMax * deltaR;\n\n    if (type === undefined) {\n      const size = 1;\n      tickmarks.push(\n        svg`<rect \n          x=${xMin - size / 2} \n          y=${yMin - size / 2} \n          width=${size} \n          height=${size} \n          fill=${colorName} \n          transform=\"rotate(${minAngle} ${xMin} ${yMin})\" \n          vector-effect=\"non-scaling-stroke\"/>`\n      );\n      tickmarks.push(\n        svg`<rect \n          x=${xMax - size / 2} \n          y=${yMax - size / 2} \n          width=${size} \n          height=${size} \n          fill=${colorName} \n          transform=\"rotate(${maxAngle} ${xMax} ${yMax})\" \n          vector-effect=\"non-scaling-stroke\"/>`\n      );\n    } else {\n      const currentRadius = Math.min(deltaR + tickWidth, radius);\n      const x2Min = origin.x + sinMin * currentRadius;\n      const y2Min = origin.y - cosMin * currentRadius;\n      const x2Max = origin.x + sinMax * currentRadius;\n      const y2Max = origin.y - cosMax * currentRadius;\n\n      tickmarks.push(\n        svg`<line x1=${xMin} y1=${yMin} x2=${x2Min} y2=${y2Min} stroke=${colorName} stroke-width=${strokeWidth} vector-effect=\"non-scaling-stroke\"/>`\n      );\n      tickmarks.push(\n        svg`<line x1=${xMax} y1=${yMax} x2=${x2Max} y2=${y2Max} stroke=${colorName} stroke-width=${strokeWidth} vector-effect=\"non-scaling-stroke\"/>`\n      );\n\n      if (currentRadius >= radius) break;\n    }\n  }\n\n  return tickmarks;\n}\n"],"names":[],"mappings":";;AAGgB,SAAA,gBACd,UACA,UACA,MACqB;AACrB,MAAI,SAAS,aAAa,QAAQ,SAAS,aAAa,UAAU;AAChE,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAAA,EAEJ;AAEA,QAAM,SAAS,EAAC,GAAG,GAAG,GAAG,EAAC;AAC1B,QAAM,SAAS,MAAM;AACrB,QAAM,cAAc;AACpB,QAAM,SAAS;AACT,QAAA,YAAY,cAAc,cAAc,MAAM;AACpD,QAAM,YAAY,SAAS,aAAa,YAAY,IAAI;AACxD,QAAM,YAAiC,CAAA;AAEvC,QAAM,SAAS,KAAK,IAAK,WAAW,KAAK,KAAM,GAAG;AAClD,QAAM,SAAS,KAAK,IAAK,WAAW,KAAK,KAAM,GAAG;AAClD,QAAM,SAAS,KAAK,IAAK,WAAW,KAAK,KAAM,GAAG;AAClD,QAAM,SAAS,KAAK,IAAK,WAAW,KAAK,KAAM,GAAG;AAElD,QAAM,iBAAiB,YAAY;AAEnC,WAAS,SAAS,GAAG,UAAU,QAAQ,UAAU,gBAAgB;AACzD,UAAA,OAAO,OAAO,IAAI,SAAS;AAC3B,UAAA,OAAO,OAAO,IAAI,SAAS;AAC3B,UAAA,OAAO,OAAO,IAAI,SAAS;AAC3B,UAAA,OAAO,OAAO,IAAI,SAAS;AAEjC,QAAI,SAAS,QAAW;AACtB,YAAM,OAAO;AACH,gBAAA;AAAA,QACR;AAAA,cACM,OAAO,OAAO,CAAC;AAAA,cACf,OAAO,OAAO,CAAC;AAAA,kBACX,IAAI;AAAA,mBACH,IAAI;AAAA,iBACN,SAAS;AAAA,8BACI,QAAQ,IAAI,IAAI,IAAI,IAAI;AAAA;AAAA,MAAA;AAGtC,gBAAA;AAAA,QACR;AAAA,cACM,OAAO,OAAO,CAAC;AAAA,cACf,OAAO,OAAO,CAAC;AAAA,kBACX,IAAI;AAAA,mBACH,IAAI;AAAA,iBACN,SAAS;AAAA,8BACI,QAAQ,IAAI,IAAI,IAAI,IAAI;AAAA;AAAA,MAAA;AAAA,IAEhD,OACK;AACL,YAAM,gBAAgB,KAAK,IAAI,SAAS,WAAW,MAAM;AACnD,YAAA,QAAQ,OAAO,IAAI,SAAS;AAC5B,YAAA,QAAQ,OAAO,IAAI,SAAS;AAC5B,YAAA,QAAQ,OAAO,IAAI,SAAS;AAC5B,YAAA,QAAQ,OAAO,IAAI,SAAS;AAExB,gBAAA;AAAA,QACR,eAAe,IAAI,OAAO,IAAI,OAAO,KAAK,OAAO,KAAK,WAAW,SAAS,iBAAiB,WAAW;AAAA,MAAA;AAE9F,gBAAA;AAAA,QACR,eAAe,IAAI,OAAO,IAAI,OAAO,KAAK,OAAO,KAAK,WAAW,SAAS,iBAAiB,WAAW;AAAA,MAAA;AAGxG,UAAI,iBAAiB;AAAQ;AAAA,IAC/B;AAAA,EACF;AAEO,SAAA;AACT;"}
+{"version":3,"file":"radial-tickmark.js","sources":["../../../src/navigation-instruments/compass/radial-tickmark.ts"],"sourcesContent":["import {SVGTemplateResult, svg} from 'lit';\r\nimport {TickmarkType, TickmarkStyle, tickmarkColor} from '../watch/tickmark';\r\n\r\nexport function radialTickmarks(\r\n  minAngle: number,\r\n  maxAngle: number,\r\n  type: TickmarkType | undefined\r\n): SVGTemplateResult[] {\r\n  if (type === TickmarkType.main || type === TickmarkType.tertiary) {\r\n    throw new Error(\r\n      'Only secondary tickmarks or undefined tickmarks (dots) are supported'\r\n    );\r\n  }\r\n\r\n  const origin = {x: 0, y: 0};\r\n  const radius = 320 / 2;\r\n  const strokeWidth = '1.2';\r\n  const margin = 1.5;\r\n  const colorName = tickmarkColor(TickmarkStyle.hinted);\r\n  const tickWidth = type === TickmarkType.secondary ? 4 : 1;\r\n  const tickmarks: SVGTemplateResult[] = [];\r\n\r\n  const sinMin = Math.sin((minAngle * Math.PI) / 180);\r\n  const cosMin = Math.cos((minAngle * Math.PI) / 180);\r\n  const sinMax = Math.sin((maxAngle * Math.PI) / 180);\r\n  const cosMax = Math.cos((maxAngle * Math.PI) / 180);\r\n\r\n  const deltaIncrement = tickWidth * margin;\r\n\r\n  for (let deltaR = 0; deltaR <= radius; deltaR += deltaIncrement) {\r\n    const xMin = origin.x + sinMin * deltaR;\r\n    const yMin = origin.y - cosMin * deltaR;\r\n    const xMax = origin.x + sinMax * deltaR;\r\n    const yMax = origin.y - cosMax * deltaR;\r\n\r\n    if (type === undefined) {\r\n      const size = 1;\r\n      tickmarks.push(\r\n        svg`<rect \r\n          x=${xMin - size / 2} \r\n          y=${yMin - size / 2} \r\n          width=${size} \r\n          height=${size} \r\n          fill=${colorName} \r\n          transform=\"rotate(${minAngle} ${xMin} ${yMin})\" \r\n          vector-effect=\"non-scaling-stroke\"/>`\r\n      );\r\n      tickmarks.push(\r\n        svg`<rect \r\n          x=${xMax - size / 2} \r\n          y=${yMax - size / 2} \r\n          width=${size} \r\n          height=${size} \r\n          fill=${colorName} \r\n          transform=\"rotate(${maxAngle} ${xMax} ${yMax})\" \r\n          vector-effect=\"non-scaling-stroke\"/>`\r\n      );\r\n    } else {\r\n      const currentRadius = Math.min(deltaR + tickWidth, radius);\r\n      const x2Min = origin.x + sinMin * currentRadius;\r\n      const y2Min = origin.y - cosMin * currentRadius;\r\n      const x2Max = origin.x + sinMax * currentRadius;\r\n      const y2Max = origin.y - cosMax * currentRadius;\r\n\r\n      tickmarks.push(\r\n        svg`<line x1=${xMin} y1=${yMin} x2=${x2Min} y2=${y2Min} stroke=${colorName} stroke-width=${strokeWidth} vector-effect=\"non-scaling-stroke\"/>`\r\n      );\r\n      tickmarks.push(\r\n        svg`<line x1=${xMax} y1=${yMax} x2=${x2Max} y2=${y2Max} stroke=${colorName} stroke-width=${strokeWidth} vector-effect=\"non-scaling-stroke\"/>`\r\n      );\r\n\r\n      if (currentRadius >= radius) break;\r\n    }\r\n  }\r\n\r\n  return tickmarks;\r\n}\r\n"],"names":[],"mappings":";;AAGgB,SAAA,gBACd,UACA,UACA,MACqB;AACrB,MAAI,SAAS,aAAa,QAAQ,SAAS,aAAa,UAAU;AAChE,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAAA,EAEJ;AAEA,QAAM,SAAS,EAAC,GAAG,GAAG,GAAG,EAAC;AAC1B,QAAM,SAAS,MAAM;AACrB,QAAM,cAAc;AACpB,QAAM,SAAS;AACT,QAAA,YAAY,cAAc,cAAc,MAAM;AACpD,QAAM,YAAY,SAAS,aAAa,YAAY,IAAI;AACxD,QAAM,YAAiC,CAAA;AAEvC,QAAM,SAAS,KAAK,IAAK,WAAW,KAAK,KAAM,GAAG;AAClD,QAAM,SAAS,KAAK,IAAK,WAAW,KAAK,KAAM,GAAG;AAClD,QAAM,SAAS,KAAK,IAAK,WAAW,KAAK,KAAM,GAAG;AAClD,QAAM,SAAS,KAAK,IAAK,WAAW,KAAK,KAAM,GAAG;AAElD,QAAM,iBAAiB,YAAY;AAEnC,WAAS,SAAS,GAAG,UAAU,QAAQ,UAAU,gBAAgB;AACzD,UAAA,OAAO,OAAO,IAAI,SAAS;AAC3B,UAAA,OAAO,OAAO,IAAI,SAAS;AAC3B,UAAA,OAAO,OAAO,IAAI,SAAS;AAC3B,UAAA,OAAO,OAAO,IAAI,SAAS;AAEjC,QAAI,SAAS,QAAW;AACtB,YAAM,OAAO;AACH,gBAAA;AAAA,QACR;AAAA,cACM,OAAO,OAAO,CAAC;AAAA,cACf,OAAO,OAAO,CAAC;AAAA,kBACX,IAAI;AAAA,mBACH,IAAI;AAAA,iBACN,SAAS;AAAA,8BACI,QAAQ,IAAI,IAAI,IAAI,IAAI;AAAA;AAAA,MAAA;AAGtC,gBAAA;AAAA,QACR;AAAA,cACM,OAAO,OAAO,CAAC;AAAA,cACf,OAAO,OAAO,CAAC;AAAA,kBACX,IAAI;AAAA,mBACH,IAAI;AAAA,iBACN,SAAS;AAAA,8BACI,QAAQ,IAAI,IAAI,IAAI,IAAI;AAAA;AAAA,MAAA;AAAA,IAEhD,OACK;AACL,YAAM,gBAAgB,KAAK,IAAI,SAAS,WAAW,MAAM;AACnD,YAAA,QAAQ,OAAO,IAAI,SAAS;AAC5B,YAAA,QAAQ,OAAO,IAAI,SAAS;AAC5B,YAAA,QAAQ,OAAO,IAAI,SAAS;AAC5B,YAAA,QAAQ,OAAO,IAAI,SAAS;AAExB,gBAAA;AAAA,QACR,eAAe,IAAI,OAAO,IAAI,OAAO,KAAK,OAAO,KAAK,WAAW,SAAS,iBAAiB,WAAW;AAAA,MAAA;AAE9F,gBAAA;AAAA,QACR,eAAe,IAAI,OAAO,IAAI,OAAO,KAAK,OAAO,KAAK,WAAW,SAAS,iBAAiB,WAAW;AAAA,MAAA;AAGxG,UAAI,iBAAiB;AAAQ;AAAA,IAC/B;AAAA,EACF;AAEO,SAAA;AACT;"}

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

@@ -1 +1 @@
-{"version":3,"file":"compass-flat.js","sources":["../../../src/navigation-instruments/compass-flat/compass-flat.ts"],"sourcesContent":["import {LitElement, svg, SVGTemplateResult, unsafeCSS} from 'lit';\nimport componentStyle from './compass-flat.css?inline';\nimport {customElement, property} from 'lit/decorators.js';\nimport {Tickmark, TickmarkType} from '../watch-flat/tickmark-flat';\nimport '../watch-flat/watch-flat';\n\nexport enum LabelPosition {\n  top = -45,\n  bottom = 50,\n}\n\nexport enum LabelStyle {\n  regular = 'var(--instrument-tick-mark-secondary-color)',\n}\n\nexport interface Label {\n  x: number;\n  y: LabelPosition;\n  text: string;\n}\n\n@customElement('obc-compass-flat')\nexport class ObcCompassFlat extends LitElement {\n  @property({type: Boolean}) noPadding: boolean = true;\n  @property({type: Boolean}) FOVIndicator: boolean = false;\n  @property({type: Number}) padding: number = 16;\n  @property({type: Number}) heading = 0;\n  @property({type: Number}) courseOverGround = 0;\n  @property({type: Number}) tickInterval = 5;\n  @property({type: Number}) FOV = 45;\n  @property({type: Number}) minFOV = 45;\n  @property({type: Number}) maxFOV = 180;\n  labels: Label[] = [];\n\n  @property({type: Number}) containerWidth = 0;\n\n  private resizeObserver: ResizeObserver = new ResizeObserver((entries) => {\n    for (const entry of entries) {\n      this.containerWidth = entry.contentRect.width;\n      this.updateLabels();\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 updateLabels() {\n    if (this.containerWidth < 192) {\n      this.labels = [];\n    } else if (this.containerWidth <= 300) {\n      this.labels = [\n        {x: -180, y: LabelPosition.top, text: 'S'},\n        {x: -90, y: LabelPosition.top, text: 'W'},\n        {x: 0, y: LabelPosition.top, text: 'N'},\n        {x: 90, y: LabelPosition.top, text: 'E'},\n        {x: 180, y: LabelPosition.top, text: 'S'},\n        {x: 270, y: LabelPosition.top, text: 'W'},\n        {x: 360, y: LabelPosition.top, text: 'N'},\n        {x: 450, y: LabelPosition.top, text: 'E'},\n        {x: 540, y: LabelPosition.top, text: 'S'},\n      ];\n    } else {\n      this.labels = [\n        {x: -180, y: LabelPosition.top, text: 'S'},\n        {x: -135, y: LabelPosition.top, text: 'SW'},\n        {x: -90, y: LabelPosition.top, text: 'W'},\n        {x: -45, y: LabelPosition.top, text: 'NW'},\n        {x: 0, y: LabelPosition.top, text: 'N'},\n        {x: 45, y: LabelPosition.top, text: 'NE'},\n        {x: 90, y: LabelPosition.top, text: 'E'},\n        {x: 135, y: LabelPosition.top, text: 'SE'},\n        {x: 180, y: LabelPosition.top, text: 'S'},\n        {x: 225, y: LabelPosition.top, text: 'SW'},\n        {x: 270, y: LabelPosition.top, text: 'W'},\n        {x: 315, y: LabelPosition.top, text: 'NW'},\n        {x: 360, y: LabelPosition.top, text: 'N'},\n        {x: 405, y: LabelPosition.top, text: 'NE'},\n        {x: 450, y: LabelPosition.top, text: 'E'},\n        {x: 495, y: LabelPosition.top, text: 'SE'},\n        {x: 540, y: LabelPosition.top, text: 'S'},\n      ];\n    }\n  }\n\n  private generateIntervalTickmarks(scale: number): Tickmark[] {\n    const tickmarks: Tickmark[] = [];\n    let cardinalInterval = 90;\n\n    if (this.containerWidth > 300) {\n      cardinalInterval = 45;\n    } else if (this.containerWidth < 192) {\n      cardinalInterval = 0;\n    }\n\n    for (\n      let angle = -180;\n      angle < this.maxFOV * 3;\n      angle += this.tickInterval\n    ) {\n      if (cardinalInterval !== 0 && angle % cardinalInterval === 0) {\n        continue;\n      }\n      tickmarks.push({angle: angle * scale, type: TickmarkType.secondary});\n    }\n\n    return tickmarks;\n  }\n\n  private generateCardinalTickmarks(scale: number): Tickmark[] {\n    const tickmarks: Tickmark[] = [];\n\n    for (const label of this.labels) {\n      tickmarks.push({angle: label.x * scale, type: TickmarkType.main});\n    }\n\n    return tickmarks;\n  }\n\n  private generateTickmarks(scale: number): Tickmark[] {\n    return [\n      ...this.generateCardinalTickmarks(scale),\n      ...this.generateIntervalTickmarks(scale),\n    ];\n  }\n\n  private renderFOVIndicator(): SVGTemplateResult[] {\n    const indicators: SVGTemplateResult[] = [];\n\n    const maxAdjustment = 10;\n    const minContainerWidth = 300;\n    const maxContainerWidth = 512;\n\n    let yAdjustment = 0;\n    if (this.containerWidth < maxContainerWidth) {\n      const widthRange = maxContainerWidth - minContainerWidth;\n      const scaleFactor =\n        (maxContainerWidth - this.containerWidth) / widthRange;\n      yAdjustment = scaleFactor * maxAdjustment;\n    }\n\n    const y = LabelPosition.bottom + yAdjustment;\n\n    indicators.push(svg`\n          <text x=\"-175\" y=${y} class=\"label left\" fill=${LabelStyle.regular}>\n            ${-this.FOV}\\u00B0\n          </text>`);\n\n    indicators.push(svg`\n          <text x=\"0\" y=${y} class=\"label\" fill=${LabelStyle.regular}>\n            ${this.heading}\\u00B0\n          </text>`);\n\n    indicators.push(svg`\n          <text x=\"175\" y=${y} class=\"label right\" fill=${LabelStyle.regular}>\n            ${this.FOV}\\u00B0\n          </text>`);\n\n    return indicators;\n  }\n\n  private get HDGSvg(): SVGTemplateResult {\n    return svg`<g transform=\"translate(-24, -74)\">\n          <path d=\"M36.7011 44.1445L36.6898 44.1379L36.6781 44.1318L24.2301 37.6823L24.0001 37.5631L23.7701 37.6823L11.3221 44.1318L11.3104 44.1379L11.2991 44.1445C9.25497 45.3438 6.78661 43.308 7.68828 41.0919L22.6036 4.43285C23.1096 3.18905 24.8906 3.18905 25.3967 4.43284L40.3119 41.0919C41.2136 43.308 38.7452 45.3438 36.7011 44.1445Z\" fill=\"var(--instrument-enhanced-secondary-color)\" stroke=\"var(--border-silhouette-color)\"/>\n        </g>`;\n  }\n\n  private COGSvg(translation: number): SVGTemplateResult {\n    return svg`\n      <g transform=\"translate(${-24 + translation}, -74)\">\n        <path d=\"M31.9025 36.0262L33.1068 36.6502L32.5956 35.3938L24.4632 15.406L24.0001 14.2677L23.537 15.406L15.4046 35.3938L14.8935 36.6502L16.0978 36.0262L24.0001 31.9319L31.9025 36.0262ZM36.7011 44.1445L36.6898 44.1379L36.6781 44.1318L24.2301 37.6823L24.0001 37.5631L23.7701 37.6823L11.3221 44.1318L11.3104 44.1379L11.2991 44.1445C9.25497 45.3438 6.78661 43.308 7.68828 41.0919L22.6036 4.43285C23.1096 3.18905 24.8906 3.18905 25.3967 4.43284L40.3119 41.0919C41.2136 43.308 38.7452 45.3438 36.7011 44.1445Z\" fill=\"var(--instrument-enhanced-secondary-color)\" stroke=\"var(--border-silhouette-color)\"/>\n      </g>\n    `;\n  }\n\n  override render() {\n    let angleDiff = this.courseOverGround - this.heading;\n\n    if (angleDiff > this.maxFOV) {\n      angleDiff -= 360;\n    } else if (angleDiff < -this.maxFOV) {\n      angleDiff += 360;\n    }\n\n    this.FOV = Math.max(this.minFOV, Math.abs(angleDiff));\n\n    const baseOffset = 5;\n    const translationScale = (baseOffset * 35) / this.FOV;\n\n    const translation = angleDiff * translationScale;\n\n    const tickmarks = this.generateTickmarks(translationScale);\n    this.labels.map((l) => {\n      l.x = l.x * translationScale;\n    });\n\n    const viewBox = this.noPadding ? '-192 -128 384 128' : '-200 -144 400 144';\n\n    return svg`\n      <div class=\"container\">\n        <obc-watch-flat .noPadding=${this.noPadding} .FOVIndicator=${this.FOVIndicator ? this.renderFOVIndicator() : []} .labels=${this.labels} .rotation=${this.heading} .tickmarks=${tickmarks} .tickmarkSpacing=${translationScale}></obc-watch-flat>\n        <svg viewBox=${viewBox} xmlns=\"http://www.w3.org/2000/svg\"> \n        ${this.HDGSvg}${this.COGSvg(translation)}\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-compass-flat': ObcCompassFlat;\n  }\n}\n"],"names":["LabelPosition","LabelStyle"],"mappings":"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"}
+{"version":3,"file":"compass-flat.js","sources":["../../../src/navigation-instruments/compass-flat/compass-flat.ts"],"sourcesContent":["import {LitElement, svg, SVGTemplateResult, unsafeCSS} from 'lit';\r\nimport componentStyle from './compass-flat.css?inline';\r\nimport {customElement, property} from 'lit/decorators.js';\r\nimport {Tickmark, TickmarkType} from '../watch-flat/tickmark-flat';\r\nimport '../watch-flat/watch-flat';\r\n\r\nexport enum LabelPosition {\r\n  top = -45,\r\n  bottom = 50,\r\n}\r\n\r\nexport enum LabelStyle {\r\n  regular = 'var(--instrument-tick-mark-secondary-color)',\r\n}\r\n\r\nexport interface Label {\r\n  x: number;\r\n  y: LabelPosition;\r\n  text: string;\r\n}\r\n\r\n@customElement('obc-compass-flat')\r\nexport class ObcCompassFlat extends LitElement {\r\n  @property({type: Boolean}) noPadding: boolean = true;\r\n  @property({type: Boolean}) FOVIndicator: boolean = false;\r\n  @property({type: Number}) padding: number = 16;\r\n  @property({type: Number}) heading = 0;\r\n  @property({type: Number}) courseOverGround = 0;\r\n  @property({type: Number}) tickInterval = 5;\r\n  @property({type: Number}) FOV = 45;\r\n  @property({type: Number}) minFOV = 45;\r\n  @property({type: Number}) maxFOV = 180;\r\n  labels: Label[] = [];\r\n\r\n  @property({type: Number}) containerWidth = 0;\r\n\r\n  private resizeObserver: ResizeObserver = new ResizeObserver((entries) => {\r\n    for (const entry of entries) {\r\n      this.containerWidth = entry.contentRect.width;\r\n      this.updateLabels();\r\n    }\r\n  });\r\n\r\n  override connectedCallback() {\r\n    super.connectedCallback();\r\n    this.resizeObserver.observe(this);\r\n  }\r\n\r\n  override disconnectedCallback() {\r\n    super.disconnectedCallback();\r\n    this.resizeObserver.unobserve(this);\r\n  }\r\n\r\n  private updateLabels() {\r\n    if (this.containerWidth < 192) {\r\n      this.labels = [];\r\n    } else if (this.containerWidth <= 300) {\r\n      this.labels = [\r\n        {x: -180, y: LabelPosition.top, text: 'S'},\r\n        {x: -90, y: LabelPosition.top, text: 'W'},\r\n        {x: 0, y: LabelPosition.top, text: 'N'},\r\n        {x: 90, y: LabelPosition.top, text: 'E'},\r\n        {x: 180, y: LabelPosition.top, text: 'S'},\r\n        {x: 270, y: LabelPosition.top, text: 'W'},\r\n        {x: 360, y: LabelPosition.top, text: 'N'},\r\n        {x: 450, y: LabelPosition.top, text: 'E'},\r\n        {x: 540, y: LabelPosition.top, text: 'S'},\r\n      ];\r\n    } else {\r\n      this.labels = [\r\n        {x: -180, y: LabelPosition.top, text: 'S'},\r\n        {x: -135, y: LabelPosition.top, text: 'SW'},\r\n        {x: -90, y: LabelPosition.top, text: 'W'},\r\n        {x: -45, y: LabelPosition.top, text: 'NW'},\r\n        {x: 0, y: LabelPosition.top, text: 'N'},\r\n        {x: 45, y: LabelPosition.top, text: 'NE'},\r\n        {x: 90, y: LabelPosition.top, text: 'E'},\r\n        {x: 135, y: LabelPosition.top, text: 'SE'},\r\n        {x: 180, y: LabelPosition.top, text: 'S'},\r\n        {x: 225, y: LabelPosition.top, text: 'SW'},\r\n        {x: 270, y: LabelPosition.top, text: 'W'},\r\n        {x: 315, y: LabelPosition.top, text: 'NW'},\r\n        {x: 360, y: LabelPosition.top, text: 'N'},\r\n        {x: 405, y: LabelPosition.top, text: 'NE'},\r\n        {x: 450, y: LabelPosition.top, text: 'E'},\r\n        {x: 495, y: LabelPosition.top, text: 'SE'},\r\n        {x: 540, y: LabelPosition.top, text: 'S'},\r\n      ];\r\n    }\r\n  }\r\n\r\n  private generateIntervalTickmarks(scale: number): Tickmark[] {\r\n    const tickmarks: Tickmark[] = [];\r\n    let cardinalInterval = 90;\r\n\r\n    if (this.containerWidth > 300) {\r\n      cardinalInterval = 45;\r\n    } else if (this.containerWidth < 192) {\r\n      cardinalInterval = 0;\r\n    }\r\n\r\n    for (\r\n      let angle = -180;\r\n      angle < this.maxFOV * 3;\r\n      angle += this.tickInterval\r\n    ) {\r\n      if (cardinalInterval !== 0 && angle % cardinalInterval === 0) {\r\n        continue;\r\n      }\r\n      tickmarks.push({angle: angle * scale, type: TickmarkType.secondary});\r\n    }\r\n\r\n    return tickmarks;\r\n  }\r\n\r\n  private generateCardinalTickmarks(scale: number): Tickmark[] {\r\n    const tickmarks: Tickmark[] = [];\r\n\r\n    for (const label of this.labels) {\r\n      tickmarks.push({angle: label.x * scale, type: TickmarkType.main});\r\n    }\r\n\r\n    return tickmarks;\r\n  }\r\n\r\n  private generateTickmarks(scale: number): Tickmark[] {\r\n    return [\r\n      ...this.generateCardinalTickmarks(scale),\r\n      ...this.generateIntervalTickmarks(scale),\r\n    ];\r\n  }\r\n\r\n  private renderFOVIndicator(): SVGTemplateResult[] {\r\n    const indicators: SVGTemplateResult[] = [];\r\n\r\n    const maxAdjustment = 10;\r\n    const minContainerWidth = 300;\r\n    const maxContainerWidth = 512;\r\n\r\n    let yAdjustment = 0;\r\n    if (this.containerWidth < maxContainerWidth) {\r\n      const widthRange = maxContainerWidth - minContainerWidth;\r\n      const scaleFactor =\r\n        (maxContainerWidth - this.containerWidth) / widthRange;\r\n      yAdjustment = scaleFactor * maxAdjustment;\r\n    }\r\n\r\n    const y = LabelPosition.bottom + yAdjustment;\r\n\r\n    indicators.push(svg`\r\n          <text x=\"-175\" y=${y} class=\"label left\" fill=${LabelStyle.regular}>\r\n            ${-this.FOV}\\u00B0\r\n          </text>`);\r\n\r\n    indicators.push(svg`\r\n          <text x=\"0\" y=${y} class=\"label\" fill=${LabelStyle.regular}>\r\n            ${this.heading}\\u00B0\r\n          </text>`);\r\n\r\n    indicators.push(svg`\r\n          <text x=\"175\" y=${y} class=\"label right\" fill=${LabelStyle.regular}>\r\n            ${this.FOV}\\u00B0\r\n          </text>`);\r\n\r\n    return indicators;\r\n  }\r\n\r\n  private get HDGSvg(): SVGTemplateResult {\r\n    return svg`<g transform=\"translate(-24, -74)\">\r\n          <path d=\"M36.7011 44.1445L36.6898 44.1379L36.6781 44.1318L24.2301 37.6823L24.0001 37.5631L23.7701 37.6823L11.3221 44.1318L11.3104 44.1379L11.2991 44.1445C9.25497 45.3438 6.78661 43.308 7.68828 41.0919L22.6036 4.43285C23.1096 3.18905 24.8906 3.18905 25.3967 4.43284L40.3119 41.0919C41.2136 43.308 38.7452 45.3438 36.7011 44.1445Z\" fill=\"var(--instrument-enhanced-secondary-color)\" stroke=\"var(--border-silhouette-color)\"/>\r\n        </g>`;\r\n  }\r\n\r\n  private COGSvg(translation: number): SVGTemplateResult {\r\n    return svg`\r\n      <g transform=\"translate(${-24 + translation}, -74)\">\r\n        <path d=\"M31.9025 36.0262L33.1068 36.6502L32.5956 35.3938L24.4632 15.406L24.0001 14.2677L23.537 15.406L15.4046 35.3938L14.8935 36.6502L16.0978 36.0262L24.0001 31.9319L31.9025 36.0262ZM36.7011 44.1445L36.6898 44.1379L36.6781 44.1318L24.2301 37.6823L24.0001 37.5631L23.7701 37.6823L11.3221 44.1318L11.3104 44.1379L11.2991 44.1445C9.25497 45.3438 6.78661 43.308 7.68828 41.0919L22.6036 4.43285C23.1096 3.18905 24.8906 3.18905 25.3967 4.43284L40.3119 41.0919C41.2136 43.308 38.7452 45.3438 36.7011 44.1445Z\" fill=\"var(--instrument-enhanced-secondary-color)\" stroke=\"var(--border-silhouette-color)\"/>\r\n      </g>\r\n    `;\r\n  }\r\n\r\n  override render() {\r\n    let angleDiff = this.courseOverGround - this.heading;\r\n\r\n    if (angleDiff > this.maxFOV) {\r\n      angleDiff -= 360;\r\n    } else if (angleDiff < -this.maxFOV) {\r\n      angleDiff += 360;\r\n    }\r\n\r\n    this.FOV = Math.max(this.minFOV, Math.abs(angleDiff));\r\n\r\n    const baseOffset = 5;\r\n    const translationScale = (baseOffset * 35) / this.FOV;\r\n\r\n    const translation = angleDiff * translationScale;\r\n\r\n    const tickmarks = this.generateTickmarks(translationScale);\r\n    this.labels.map((l) => {\r\n      l.x = l.x * translationScale;\r\n    });\r\n\r\n    const viewBox = this.noPadding ? '-192 -128 384 128' : '-200 -144 400 144';\r\n\r\n    return svg`\r\n      <div class=\"container\">\r\n        <obc-watch-flat .noPadding=${this.noPadding} .FOVIndicator=${this.FOVIndicator ? this.renderFOVIndicator() : []} .labels=${this.labels} .rotation=${this.heading} .tickmarks=${tickmarks} .tickmarkSpacing=${translationScale}></obc-watch-flat>\r\n        <svg viewBox=${viewBox} xmlns=\"http://www.w3.org/2000/svg\"> \r\n        ${this.HDGSvg}${this.COGSvg(translation)}\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  static override styles = unsafeCSS(componentStyle);\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    'obc-compass-flat': ObcCompassFlat;\r\n  }\r\n}\r\n"],"names":["LabelPosition","LabelStyle"],"mappings":"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"}

package/dist/navigation-instruments/thruster/advice.js.map

@@ -1 +1 @@
-{"version":3,"file":"advice.js","sources":["../../../src/navigation-instruments/thruster/advice.ts"],"sourcesContent":["import {SVGTemplateResult, nothing, svg} from 'lit';\nimport {AdviceState, AdviceType} from '../watch/advice';\nimport {TickmarkStyle} from '../watch/tickmark';\nimport {singleSidedTickmark} from './tickmark';\n\nexport interface LinearAdviceRaw {\n  min: number;\n  max: number;\n  type: AdviceType;\n  state: AdviceState;\n}\n\nexport interface LinearAdvice {\n  min: number;\n  max: number;\n  type: AdviceType;\n  hinted: boolean;\n}\n\nfunction adviceMask(\n  height: number,\n  min: number,\n  max: number,\n  fill: string,\n  stroke: string\n): SVGTemplateResult {\n  const width = 8;\n  const x1 = 12;\n  const x2 = x1 + width;\n  const r = width / 2;\n  const yL = (-min * height) / 100 - 2 * r - 2;\n  const yH = (-max * height) / 100 + 2 * r - 2;\n\n  const path = `M ${x1} ${yL} \n                    A ${r} ${r} 0 0 0 ${x2} ${yL}\n                    V ${yH}\n                    A ${r} ${r} 0 0 0 ${x1} ${yH}\n                    Z`;\n  return svg`<path d=${path} fill=${fill} stroke=${stroke} stroke-width=\"1\" vector-effect=\"non-scaling-stroke\" />`;\n}\n\nexport function renderAdvice(\n  height: number,\n  advice: LinearAdviceRaw,\n  flipDirection: boolean\n): SVGTemplateResult {\n  if (advice.type === AdviceType.caution) {\n    let mainColor;\n    let fillColor: string | null = null;\n    if (advice.state === AdviceState.hinted) {\n      mainColor = 'var(--instrument-frame-tertiary-color)';\n    } else if (advice.state === AdviceState.regular) {\n      mainColor = 'var(--instrument-tick-mark-tertiary-color)';\n    } else {\n      mainColor = 'var(--on-caution-active-color)';\n      fillColor = 'var(--alert-caution-color)';\n    }\n    const pattern = [];\n    const ypattern = flipDirection ? 50 : -50;\n    for (let i = -100; i < 300; i += 16) {\n      pattern.push(svg`<g transform=\"translate(0 ${-i}) \">\n            <path d=\"M 50 0 L 0 ${ypattern}\" stroke=${mainColor} stroke-width=\"6\"/>\n            </g>\n            `);\n    }\n    const maskId = `adviceMask-${advice.min}-${advice.max}`;\n    let tickmarkStyle = TickmarkStyle.hinted;\n    if (advice.state === AdviceState.regular) {\n      tickmarkStyle = TickmarkStyle.regular;\n    } else if (advice.state === AdviceState.triggered) {\n      tickmarkStyle = TickmarkStyle.enhanced;\n    }\n\n    return svg`\n            <mask id=${maskId}>\n                ${adviceMask(height, advice.min, advice.max, 'white', 'black')}\n            </mask>\n            <g mask=\"url(#${maskId})\">\n                ${fillColor ? svg`<rect x=\"-256\" y=\"-512\" width=\"512\" height=\"1024\" fill=\"${fillColor}\"/>` : nothing}\n                ${pattern}\n            </g>\n            ${adviceMask(height, advice.min, advice.max, 'none', mainColor)}\n            ${singleSidedTickmark(height, advice.min, tickmarkStyle)}\n            ${singleSidedTickmark(height, advice.max, tickmarkStyle)}\n        `;\n  } else {\n    let strokeColor;\n    let tickmarkStyle;\n    let fillColor: string;\n    if (advice.state === AdviceState.hinted) {\n      strokeColor = 'var(--instrument-frame-tertiary-color)';\n      fillColor = 'none';\n      tickmarkStyle = TickmarkStyle.hinted;\n    } else if (advice.state === AdviceState.regular) {\n      strokeColor = 'var(--instrument-regular-secondary-color)';\n      fillColor = 'none';\n      tickmarkStyle = TickmarkStyle.regular;\n    } else {\n      strokeColor = 'var(--instrument-enhanced-secondary-color)';\n      fillColor = strokeColor;\n      tickmarkStyle = TickmarkStyle.regular;\n    }\n    return svg`\n            ${adviceMask(height, advice.min, advice.max, fillColor, strokeColor)}\n            ${singleSidedTickmark(height, advice.min, tickmarkStyle)}\n            ${singleSidedTickmark(height, advice.max, tickmarkStyle)}\n        `;\n  }\n}\n"],"names":[],"mappings":";;;;AAmBA,SAAS,WACP,QACA,KACA,KACA,MACA,QACmB;AACnB,QAAM,QAAQ;AACd,QAAM,KAAK;AACX,QAAM,KAAK,KAAK;AAChB,QAAM,IAAI,QAAQ;AAClB,QAAM,KAAM,CAAC,MAAM,SAAU,MAAM,IAAI,IAAI;AAC3C,QAAM,KAAM,CAAC,MAAM,SAAU,MAAM,IAAI,IAAI;AAE3C,QAAM,OAAO,KAAK,EAAE,IAAI,EAAE;AAAA,wBACJ,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE;AAAA,wBACxB,EAAE;AAAA,wBACF,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE;AAAA;AAE9C,SAAO,cAAc,IAAI,SAAS,IAAI,WAAW,MAAM;AACzD;AAEgB,SAAA,aACd,QACA,QACA,eACmB;AACf,MAAA,OAAO,SAAS,WAAW,SAAS;AAClC,QAAA;AACJ,QAAI,YAA2B;AAC3B,QAAA,OAAO,UAAU,YAAY,QAAQ;AAC3B,kBAAA;AAAA,IACH,WAAA,OAAO,UAAU,YAAY,SAAS;AACnC,kBAAA;AAAA,IAAA,OACP;AACO,kBAAA;AACA,kBAAA;AAAA,IACd;AACA,UAAM,UAAU,CAAA;AACV,UAAA,WAAW,gBAAgB,KAAK;AACtC,aAAS,IAAI,MAAM,IAAI,KAAK,KAAK,IAAI;AAC3B,cAAA,KAAK,gCAAgC,CAAC,CAAC;AAAA,kCACnB,QAAQ,YAAY,SAAS;AAAA;AAAA,aAElD;AAAA,IACT;AACA,UAAM,SAAS,cAAc,OAAO,GAAG,IAAI,OAAO,GAAG;AACrD,QAAI,gBAAgB,cAAc;AAC9B,QAAA,OAAO,UAAU,YAAY,SAAS;AACxC,sBAAgB,cAAc;AAAA,IACrB,WAAA,OAAO,UAAU,YAAY,WAAW;AACjD,sBAAgB,cAAc;AAAA,IAChC;AAEO,WAAA;AAAA,uBACY,MAAM;AAAA,kBACX,WAAW,QAAQ,OAAO,KAAK,OAAO,KAAK,SAAS,OAAO,CAAC;AAAA;AAAA,4BAElD,MAAM;AAAA,kBAChB,YAAY,8DAA8D,SAAS,QAAQ,OAAO;AAAA,kBAClG,OAAO;AAAA;AAAA,cAEX,WAAW,QAAQ,OAAO,KAAK,OAAO,KAAK,QAAQ,SAAS,CAAC;AAAA,cAC7D,oBAAoB,QAAQ,OAAO,KAAK,aAAa,CAAC;AAAA,cACtD,oBAAoB,QAAQ,OAAO,KAAK,aAAa,CAAC;AAAA;AAAA,EAAA,OAE3D;AACD,QAAA;AACA,QAAA;AACA,QAAA;AACA,QAAA,OAAO,UAAU,YAAY,QAAQ;AACzB,oBAAA;AACF,kBAAA;AACZ,sBAAgB,cAAc;AAAA,IACrB,WAAA,OAAO,UAAU,YAAY,SAAS;AACjC,oBAAA;AACF,kBAAA;AACZ,sBAAgB,cAAc;AAAA,IAAA,OACzB;AACS,oBAAA;AACF,kBAAA;AACZ,sBAAgB,cAAc;AAAA,IAChC;AACO,WAAA;AAAA,cACG,WAAW,QAAQ,OAAO,KAAK,OAAO,KAAK,WAAW,WAAW,CAAC;AAAA,cAClE,oBAAoB,QAAQ,OAAO,KAAK,aAAa,CAAC;AAAA,cACtD,oBAAoB,QAAQ,OAAO,KAAK,aAAa,CAAC;AAAA;AAAA,EAElE;AACF;"}
+{"version":3,"file":"advice.js","sources":["../../../src/navigation-instruments/thruster/advice.ts"],"sourcesContent":["import {SVGTemplateResult, nothing, svg} from 'lit';\r\nimport {AdviceState, AdviceType} from '../watch/advice';\r\nimport {TickmarkStyle} from '../watch/tickmark';\r\nimport {singleSidedTickmark} from './tickmark';\r\n\r\nexport interface LinearAdviceRaw {\r\n  min: number;\r\n  max: number;\r\n  type: AdviceType;\r\n  state: AdviceState;\r\n}\r\n\r\nexport interface LinearAdvice {\r\n  min: number;\r\n  max: number;\r\n  type: AdviceType;\r\n  hinted: boolean;\r\n}\r\n\r\nfunction adviceMask(\r\n  height: number,\r\n  min: number,\r\n  max: number,\r\n  fill: string,\r\n  stroke: string\r\n): SVGTemplateResult {\r\n  const width = 8;\r\n  const x1 = 12;\r\n  const x2 = x1 + width;\r\n  const r = width / 2;\r\n  const yL = (-min * height) / 100 - 2 * r - 2;\r\n  const yH = (-max * height) / 100 + 2 * r - 2;\r\n\r\n  const path = `M ${x1} ${yL} \r\n                    A ${r} ${r} 0 0 0 ${x2} ${yL}\r\n                    V ${yH}\r\n                    A ${r} ${r} 0 0 0 ${x1} ${yH}\r\n                    Z`;\r\n  return svg`<path d=${path} fill=${fill} stroke=${stroke} stroke-width=\"1\" vector-effect=\"non-scaling-stroke\" />`;\r\n}\r\n\r\nexport function renderAdvice(\r\n  height: number,\r\n  advice: LinearAdviceRaw,\r\n  flipDirection: boolean\r\n): SVGTemplateResult {\r\n  if (advice.type === AdviceType.caution) {\r\n    let mainColor;\r\n    let fillColor: string | null = null;\r\n    if (advice.state === AdviceState.hinted) {\r\n      mainColor = 'var(--instrument-frame-tertiary-color)';\r\n    } else if (advice.state === AdviceState.regular) {\r\n      mainColor = 'var(--instrument-tick-mark-tertiary-color)';\r\n    } else {\r\n      mainColor = 'var(--on-caution-active-color)';\r\n      fillColor = 'var(--alert-caution-color)';\r\n    }\r\n    const pattern = [];\r\n    const ypattern = flipDirection ? 50 : -50;\r\n    for (let i = -100; i < 300; i += 16) {\r\n      pattern.push(svg`<g transform=\"translate(0 ${-i}) \">\r\n            <path d=\"M 50 0 L 0 ${ypattern}\" stroke=${mainColor} stroke-width=\"6\"/>\r\n            </g>\r\n            `);\r\n    }\r\n    const maskId = `adviceMask-${advice.min}-${advice.max}`;\r\n    let tickmarkStyle = TickmarkStyle.hinted;\r\n    if (advice.state === AdviceState.regular) {\r\n      tickmarkStyle = TickmarkStyle.regular;\r\n    } else if (advice.state === AdviceState.triggered) {\r\n      tickmarkStyle = TickmarkStyle.enhanced;\r\n    }\r\n\r\n    return svg`\r\n            <mask id=${maskId}>\r\n                ${adviceMask(height, advice.min, advice.max, 'white', 'black')}\r\n            </mask>\r\n            <g mask=\"url(#${maskId})\">\r\n                ${fillColor ? svg`<rect x=\"-256\" y=\"-512\" width=\"512\" height=\"1024\" fill=\"${fillColor}\"/>` : nothing}\r\n                ${pattern}\r\n            </g>\r\n            ${adviceMask(height, advice.min, advice.max, 'none', mainColor)}\r\n            ${singleSidedTickmark(height, advice.min, tickmarkStyle)}\r\n            ${singleSidedTickmark(height, advice.max, tickmarkStyle)}\r\n        `;\r\n  } else {\r\n    let strokeColor;\r\n    let tickmarkStyle;\r\n    let fillColor: string;\r\n    if (advice.state === AdviceState.hinted) {\r\n      strokeColor = 'var(--instrument-frame-tertiary-color)';\r\n      fillColor = 'none';\r\n      tickmarkStyle = TickmarkStyle.hinted;\r\n    } else if (advice.state === AdviceState.regular) {\r\n      strokeColor = 'var(--instrument-regular-secondary-color)';\r\n      fillColor = 'none';\r\n      tickmarkStyle = TickmarkStyle.regular;\r\n    } else {\r\n      strokeColor = 'var(--instrument-enhanced-secondary-color)';\r\n      fillColor = strokeColor;\r\n      tickmarkStyle = TickmarkStyle.regular;\r\n    }\r\n    return svg`\r\n            ${adviceMask(height, advice.min, advice.max, fillColor, strokeColor)}\r\n            ${singleSidedTickmark(height, advice.min, tickmarkStyle)}\r\n            ${singleSidedTickmark(height, advice.max, tickmarkStyle)}\r\n        `;\r\n  }\r\n}\r\n"],"names":[],"mappings":";;;;AAmBA,SAAS,WACP,QACA,KACA,KACA,MACA,QACmB;AACnB,QAAM,QAAQ;AACd,QAAM,KAAK;AACX,QAAM,KAAK,KAAK;AAChB,QAAM,IAAI,QAAQ;AAClB,QAAM,KAAM,CAAC,MAAM,SAAU,MAAM,IAAI,IAAI;AAC3C,QAAM,KAAM,CAAC,MAAM,SAAU,MAAM,IAAI,IAAI;AAE3C,QAAM,OAAO,KAAK,EAAE,IAAI,EAAE;AAAA,wBACJ,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE;AAAA,wBACxB,EAAE;AAAA,wBACF,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE;AAAA;AAE9C,SAAO,cAAc,IAAI,SAAS,IAAI,WAAW,MAAM;AACzD;AAEgB,SAAA,aACd,QACA,QACA,eACmB;AACf,MAAA,OAAO,SAAS,WAAW,SAAS;AAClC,QAAA;AACJ,QAAI,YAA2B;AAC3B,QAAA,OAAO,UAAU,YAAY,QAAQ;AAC3B,kBAAA;AAAA,IACH,WAAA,OAAO,UAAU,YAAY,SAAS;AACnC,kBAAA;AAAA,IAAA,OACP;AACO,kBAAA;AACA,kBAAA;AAAA,IACd;AACA,UAAM,UAAU,CAAA;AACV,UAAA,WAAW,gBAAgB,KAAK;AACtC,aAAS,IAAI,MAAM,IAAI,KAAK,KAAK,IAAI;AAC3B,cAAA,KAAK,gCAAgC,CAAC,CAAC;AAAA,kCACnB,QAAQ,YAAY,SAAS;AAAA;AAAA,aAElD;AAAA,IACT;AACA,UAAM,SAAS,cAAc,OAAO,GAAG,IAAI,OAAO,GAAG;AACrD,QAAI,gBAAgB,cAAc;AAC9B,QAAA,OAAO,UAAU,YAAY,SAAS;AACxC,sBAAgB,cAAc;AAAA,IACrB,WAAA,OAAO,UAAU,YAAY,WAAW;AACjD,sBAAgB,cAAc;AAAA,IAChC;AAEO,WAAA;AAAA,uBACY,MAAM;AAAA,kBACX,WAAW,QAAQ,OAAO,KAAK,OAAO,KAAK,SAAS,OAAO,CAAC;AAAA;AAAA,4BAElD,MAAM;AAAA,kBAChB,YAAY,8DAA8D,SAAS,QAAQ,OAAO;AAAA,kBAClG,OAAO;AAAA;AAAA,cAEX,WAAW,QAAQ,OAAO,KAAK,OAAO,KAAK,QAAQ,SAAS,CAAC;AAAA,cAC7D,oBAAoB,QAAQ,OAAO,KAAK,aAAa,CAAC;AAAA,cACtD,oBAAoB,QAAQ,OAAO,KAAK,aAAa,CAAC;AAAA;AAAA,EAAA,OAE3D;AACD,QAAA;AACA,QAAA;AACA,QAAA;AACA,QAAA,OAAO,UAAU,YAAY,QAAQ;AACzB,oBAAA;AACF,kBAAA;AACZ,sBAAgB,cAAc;AAAA,IACrB,WAAA,OAAO,UAAU,YAAY,SAAS;AACjC,oBAAA;AACF,kBAAA;AACZ,sBAAgB,cAAc;AAAA,IAAA,OACzB;AACS,oBAAA;AACF,kBAAA;AACZ,sBAAgB,cAAc;AAAA,IAChC;AACO,WAAA;AAAA,cACG,WAAW,QAAQ,OAAO,KAAK,OAAO,KAAK,WAAW,WAAW,CAAC;AAAA,cAClE,oBAAoB,QAAQ,OAAO,KAAK,aAAa,CAAC;AAAA,cACtD,oBAAoB,QAAQ,OAAO,KAAK,aAAa,CAAC;AAAA;AAAA,EAElE;AACF;"}

package/dist/navigation-instruments/watch/advice.js.map

@@ -1 +1 @@
-{"version":3,"file":"advice.js","sources":["../../../src/navigation-instruments/watch/advice.ts"],"sourcesContent":["import {SVGTemplateResult, nothing, svg} from 'lit';\nimport {TickmarkStyle, TickmarkType, tickmark} from './tickmark';\n\nexport enum AdviceType {\n  advice = 'advice',\n  caution = 'caution',\n}\n\nexport enum AdviceState {\n  regular = 'regular',\n  hinted = 'hinted',\n  triggered = 'triggered',\n}\n\nexport interface AngleAdviceRaw {\n  minAngle: number;\n  maxAngle: number;\n  type: AdviceType;\n  state: AdviceState;\n}\n\nexport interface AngleAdvice {\n  minAngle: number;\n  maxAngle: number;\n  type: AdviceType;\n  hinted: boolean;\n}\n\nconst margin = (344 - 328) / 2 + 8;\nconst deltaAngle = Math.atan2(margin, (344 + 328) / 2);\n\nfunction adviceMask(\n  minAngle: number,\n  maxAngle: number,\n  fill: string,\n  stroke: string\n): SVGTemplateResult {\n  const radl = (minAngle * Math.PI) / 180 + deltaAngle;\n  const radh = (maxAngle * Math.PI) / 180 - deltaAngle;\n  const r1 = 328 / 2;\n  const r2 = 344 / 2;\n  const R = (r2 - r1) / 2;\n  const x1l = Math.sin(radl) * r1;\n  const y1l = -Math.cos(radl) * r1;\n  const x2l = Math.sin(radl) * r2;\n  const y2l = -Math.cos(radl) * r2;\n\n  const x1h = Math.sin(radh) * r1;\n  const y1h = -Math.cos(radh) * r1;\n  const x2h = Math.sin(radh) * r2;\n  const y2h = -Math.cos(radh) * r2;\n\n  const path = `M ${x1l} ${y1l} \n                    A ${r1} ${r1} 0 0 1 ${x1h} ${y1h}\n                    A ${R} ${R} 0 0 0 ${x2h} ${y2h}\n                    A ${r2} ${r2} 0 0 0 ${x2l} ${y2l}\n                    A ${R} ${R} 0 0 0 ${x1l} ${y1l}\n                    Z`;\n  return svg`<path d=${path} fill=${fill} stroke=${stroke} stroke-width=\"1\" vector-effect=\"non-scaling-stroke\" />`;\n}\n\nexport function renderAdvice(advice: AngleAdviceRaw): SVGTemplateResult {\n  if (advice.type === AdviceType.caution) {\n    let mainColor;\n    let fillColor: string | null = null;\n    if (advice.state === AdviceState.hinted) {\n      mainColor = 'var(--instrument-frame-tertiary-color)';\n    } else if (advice.state === AdviceState.regular) {\n      mainColor = 'var(--instrument-tick-mark-tertiary-color)';\n    } else {\n      mainColor = 'var(--on-caution-active-color)';\n      fillColor = 'var(--alert-caution-color)';\n    }\n    const radialPattern = [];\n    for (let i = 0; i < 180; i += 4) {\n      radialPattern.push(svg`<g transform=\"rotate(${i}) translate(-256 -256) \">\n            <path d=\"M369.167 64.7317L144 194.732L142 191.268L367.167 61.2676L369.167 64.7317ZM369.167 320.732L144 450.732L142 447.267L367.167 317.267L369.167 320.732Z\" fill=${mainColor}/>\n            </g>\n            `);\n    }\n    const maskId = `adviceMask-${advice.minAngle}-${advice.maxAngle}`;\n    let tickmarkStyle = TickmarkStyle.hinted;\n    if (advice.state === AdviceState.regular) {\n      tickmarkStyle = TickmarkStyle.regular;\n    } else if (advice.state === AdviceState.triggered) {\n      tickmarkStyle = TickmarkStyle.enhanced;\n    }\n\n    return svg`\n            <mask id=${maskId}>\n                ${adviceMask(advice.minAngle, advice.maxAngle, 'white', 'black')}\n            </mask>\n            <g mask=\"url(#${maskId})\">\n                ${fillColor ? svg`<rect x=\"-256\" y=\"-256\" width=\"512\" height=\"512\" fill=\"${fillColor}\"/>` : nothing}\n                ${radialPattern}\n            </g>\n            ${adviceMask(advice.minAngle, advice.maxAngle, 'none', mainColor)}\n            ${tickmark(advice.minAngle, TickmarkType.primary, tickmarkStyle, 1)}\n            ${tickmark(advice.maxAngle, TickmarkType.primary, tickmarkStyle, 1)}\n        `;\n  } else {\n    let mainColor;\n    let tickmarkStyle;\n    if (advice.state === AdviceState.hinted) {\n      mainColor = 'var(--instrument-frame-tertiary-color)';\n      tickmarkStyle = TickmarkStyle.hinted;\n    } else if (advice.state === AdviceState.regular) {\n      mainColor = 'var(--instrument-regular-secondary-color)';\n      tickmarkStyle = TickmarkStyle.regular;\n    } else {\n      mainColor = 'var(--instrument-enhanced-secondary-color)';\n      tickmarkStyle = TickmarkStyle.regular;\n    }\n    return svg`\n            ${adviceMask(advice.minAngle, advice.maxAngle, advice.state === AdviceState.triggered ? mainColor : 'none', mainColor)}\n            ${tickmark(advice.minAngle, TickmarkType.primary, tickmarkStyle, 1)}\n            ${tickmark(advice.maxAngle, TickmarkType.primary, tickmarkStyle, 1)}\n        `;\n  }\n}\n"],"names":["AdviceType","AdviceState"],"mappings":"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"}
+{"version":3,"file":"advice.js","sources":["../../../src/navigation-instruments/watch/advice.ts"],"sourcesContent":["import {SVGTemplateResult, nothing, svg} from 'lit';\r\nimport {TickmarkStyle, TickmarkType, tickmark} from './tickmark';\r\n\r\nexport enum AdviceType {\r\n  advice = 'advice',\r\n  caution = 'caution',\r\n}\r\n\r\nexport enum AdviceState {\r\n  regular = 'regular',\r\n  hinted = 'hinted',\r\n  triggered = 'triggered',\r\n}\r\n\r\nexport interface AngleAdviceRaw {\r\n  minAngle: number;\r\n  maxAngle: number;\r\n  type: AdviceType;\r\n  state: AdviceState;\r\n}\r\n\r\nexport interface AngleAdvice {\r\n  minAngle: number;\r\n  maxAngle: number;\r\n  type: AdviceType;\r\n  hinted: boolean;\r\n}\r\n\r\nconst margin = (344 - 328) / 2 + 8;\r\nconst deltaAngle = Math.atan2(margin, (344 + 328) / 2);\r\n\r\nfunction adviceMask(\r\n  minAngle: number,\r\n  maxAngle: number,\r\n  fill: string,\r\n  stroke: string\r\n): SVGTemplateResult {\r\n  const radl = (minAngle * Math.PI) / 180 + deltaAngle;\r\n  const radh = (maxAngle * Math.PI) / 180 - deltaAngle;\r\n  const r1 = 328 / 2;\r\n  const r2 = 344 / 2;\r\n  const R = (r2 - r1) / 2;\r\n  const x1l = Math.sin(radl) * r1;\r\n  const y1l = -Math.cos(radl) * r1;\r\n  const x2l = Math.sin(radl) * r2;\r\n  const y2l = -Math.cos(radl) * r2;\r\n\r\n  const x1h = Math.sin(radh) * r1;\r\n  const y1h = -Math.cos(radh) * r1;\r\n  const x2h = Math.sin(radh) * r2;\r\n  const y2h = -Math.cos(radh) * r2;\r\n\r\n  const path = `M ${x1l} ${y1l} \r\n                    A ${r1} ${r1} 0 0 1 ${x1h} ${y1h}\r\n                    A ${R} ${R} 0 0 0 ${x2h} ${y2h}\r\n                    A ${r2} ${r2} 0 0 0 ${x2l} ${y2l}\r\n                    A ${R} ${R} 0 0 0 ${x1l} ${y1l}\r\n                    Z`;\r\n  return svg`<path d=${path} fill=${fill} stroke=${stroke} stroke-width=\"1\" vector-effect=\"non-scaling-stroke\" />`;\r\n}\r\n\r\nexport function renderAdvice(advice: AngleAdviceRaw): SVGTemplateResult {\r\n  if (advice.type === AdviceType.caution) {\r\n    let mainColor;\r\n    let fillColor: string | null = null;\r\n    if (advice.state === AdviceState.hinted) {\r\n      mainColor = 'var(--instrument-frame-tertiary-color)';\r\n    } else if (advice.state === AdviceState.regular) {\r\n      mainColor = 'var(--instrument-tick-mark-tertiary-color)';\r\n    } else {\r\n      mainColor = 'var(--on-caution-active-color)';\r\n      fillColor = 'var(--alert-caution-color)';\r\n    }\r\n    const radialPattern = [];\r\n    for (let i = 0; i < 180; i += 4) {\r\n      radialPattern.push(svg`<g transform=\"rotate(${i}) translate(-256 -256) \">\r\n            <path d=\"M369.167 64.7317L144 194.732L142 191.268L367.167 61.2676L369.167 64.7317ZM369.167 320.732L144 450.732L142 447.267L367.167 317.267L369.167 320.732Z\" fill=${mainColor}/>\r\n            </g>\r\n            `);\r\n    }\r\n    const maskId = `adviceMask-${advice.minAngle}-${advice.maxAngle}`;\r\n    let tickmarkStyle = TickmarkStyle.hinted;\r\n    if (advice.state === AdviceState.regular) {\r\n      tickmarkStyle = TickmarkStyle.regular;\r\n    } else if (advice.state === AdviceState.triggered) {\r\n      tickmarkStyle = TickmarkStyle.enhanced;\r\n    }\r\n\r\n    return svg`\r\n            <mask id=${maskId}>\r\n                ${adviceMask(advice.minAngle, advice.maxAngle, 'white', 'black')}\r\n            </mask>\r\n            <g mask=\"url(#${maskId})\">\r\n                ${fillColor ? svg`<rect x=\"-256\" y=\"-256\" width=\"512\" height=\"512\" fill=\"${fillColor}\"/>` : nothing}\r\n                ${radialPattern}\r\n            </g>\r\n            ${adviceMask(advice.minAngle, advice.maxAngle, 'none', mainColor)}\r\n            ${tickmark(advice.minAngle, TickmarkType.primary, tickmarkStyle, 1)}\r\n            ${tickmark(advice.maxAngle, TickmarkType.primary, tickmarkStyle, 1)}\r\n        `;\r\n  } else {\r\n    let mainColor;\r\n    let tickmarkStyle;\r\n    if (advice.state === AdviceState.hinted) {\r\n      mainColor = 'var(--instrument-frame-tertiary-color)';\r\n      tickmarkStyle = TickmarkStyle.hinted;\r\n    } else if (advice.state === AdviceState.regular) {\r\n      mainColor = 'var(--instrument-regular-secondary-color)';\r\n      tickmarkStyle = TickmarkStyle.regular;\r\n    } else {\r\n      mainColor = 'var(--instrument-enhanced-secondary-color)';\r\n      tickmarkStyle = TickmarkStyle.regular;\r\n    }\r\n    return svg`\r\n            ${adviceMask(advice.minAngle, advice.maxAngle, advice.state === AdviceState.triggered ? mainColor : 'none', mainColor)}\r\n            ${tickmark(advice.minAngle, TickmarkType.primary, tickmarkStyle, 1)}\r\n            ${tickmark(advice.maxAngle, TickmarkType.primary, tickmarkStyle, 1)}\r\n        `;\r\n  }\r\n}\r\n"],"names":["AdviceType","AdviceState"],"mappings":"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"}

package/dist/navigation-instruments/watch/label.js.map

@@ -1 +1 @@
-{"version":3,"file":"label.js","sources":["../../../src/navigation-instruments/watch/label.ts"],"sourcesContent":["import {svg, SVGTemplateResult} from 'lit-html';\n\nexport function renderLabels(scale: number): SVGTemplateResult {\n  const labelWidth = 32;\n  const gap = 8;\n  const radius: number = 368 / 2;\n  const labels = [\n    {\n      label: 'E',\n      x: radius + gap / scale + labelWidth / 2,\n      y: 0,\n      class: 'label',\n    },\n    {\n      label: 'S',\n      x: 0,\n      y: radius + gap / scale + labelWidth / 2,\n      class: 'label',\n    },\n    {\n      label: 'W',\n      x: -(radius + gap / scale + labelWidth / 2),\n      y: 0,\n      class: 'label',\n    },\n  ];\n\n  let arrow = svg`<defs>\n        <mask id=\"circleMask\">\n            <rect x=\"-${radius}\" y=\"-${radius}\" width=\"${radius * 2}\" height=\"${radius * 2}\" fill=\"black\"/>\n            <circle cx=\"0\" cy=\"0\" r=\"${radius}\" fill=\"white\"/>\n        </mask>\n    </defs>\n    <g mask=\"url(#circleMask)\" transform=\"translate(0, ${-(radius + 45 / scale)}) scale(${1 / scale}, ${1 / scale})\">\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M-32.04 42.7192 0 0 32.039 42.7192C21.627 40.9314 10.922 40 0 40-10.922 40-21.627 40.9314-32.04 42.7192Z\" \n      fill=\"var(--instrument-tick-mark-secondary-color)\"/>\n        <path d=\"M5.003 29H2.091L-3.013 20.264H-3.077C-3.066 20.52-3.056 20.7813-3.045 21.048-3.034 21.3147-3.024 21.5867-3.013 21.864-2.992 22.1307-2.976 22.4027-2.965 22.68-2.954 22.9573-2.944 23.2347-2.933 23.512V29H-4.997V17.576H-2.101L2.987 26.232H3.035C3.024 25.9867 3.014 25.736 3.003 25.48 2.992 25.2133 2.982 24.952 2.971 24.696 2.971 24.4293 2.966 24.1627 2.955 23.896 2.944 23.6293 2.934 23.3627 2.923 23.096V17.576H5.003V29Z\" fill=\"var(--element-active-inverted-color)\"/>\n      </g>`;\n\n  if (scale < 0.58) {\n    arrow = svg`\n      <g mask=\"url(#circleMask)\" transform=\"translate(0, ${-radius})\">\n        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M-17.8457 24.984 0 0 17.8458 24.984C11.9868 24.3338 6.0324 24 0 24-6.0323 24-11.9867 24.3338-17.8457 24.984Z\" fill=\"var(--instrument-frame-tertiary-color)\"/>\n        </g>`;\n\n    labels.push({\n      label: 'N',\n      x: 0,\n      y: -(radius + gap / scale + labelWidth / 2),\n      class: 'label',\n    });\n  }\n\n  return svg`\n    ${arrow}\n\n    ${labels.map(\n      (l) => svg`\n        <text\n          x=\"${l.x}\"\n          y=\"${l.y}\"\n          class=\"${l.class}\"\n        >\n          ${l.label}\n        </text>\n      `\n    )}\n  `;\n}\n"],"names":[],"mappings":";AAEO,SAAS,aAAa,OAAkC;AAC7D,QAAM,aAAa;AACnB,QAAM,MAAM;AACZ,QAAM,SAAiB,MAAM;AAC7B,QAAM,SAAS;AAAA,IACb;AAAA,MACE,OAAO;AAAA,MACP,GAAG,SAAS,MAAM,QAAQ,aAAa;AAAA,MACvC,GAAG;AAAA,MACH,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,GAAG;AAAA,MACH,GAAG,SAAS,MAAM,QAAQ,aAAa;AAAA,MACvC,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,GAAG,EAAE,SAAS,MAAM,QAAQ,aAAa;AAAA,MACzC,GAAG;AAAA,MACH,OAAO;AAAA,IACT;AAAA,EAAA;AAGF,MAAI,QAAQ;AAAA;AAAA,wBAEU,MAAM,SAAS,MAAM,YAAY,SAAS,CAAC,aAAa,SAAS,CAAC;AAAA,uCACnD,MAAM;AAAA;AAAA;AAAA,yDAGY,EAAE,SAAS,KAAK,MAAM,WAAW,IAAI,KAAK,KAAK,IAAI,KAAK;AAAA;AAAA;AAAA;AAAA;AAM/G,MAAI,QAAQ,MAAM;AACR,YAAA;AAAA,2DAC+C,CAAC,MAAM;AAAA;AAAA;AAI9D,WAAO,KAAK;AAAA,MACV,OAAO;AAAA,MACP,GAAG;AAAA,MACH,GAAG,EAAE,SAAS,MAAM,QAAQ,aAAa;AAAA,MACzC,OAAO;AAAA,IAAA,CACR;AAAA,EACH;AAEO,SAAA;AAAA,MACH,KAAK;AAAA;AAAA,MAEL,OAAO;AAAA,IACP,CAAC,MAAM;AAAA;AAAA,eAEE,EAAE,CAAC;AAAA,eACH,EAAE,CAAC;AAAA,mBACC,EAAE,KAAK;AAAA;AAAA,YAEd,EAAE,KAAK;AAAA;AAAA;AAAA,EAAA,CAGd;AAAA;AAEL;"}
+{"version":3,"file":"label.js","sources":["../../../src/navigation-instruments/watch/label.ts"],"sourcesContent":["import {svg, SVGTemplateResult} from 'lit-html';\r\n\r\nexport function renderLabels(scale: number): SVGTemplateResult {\r\n  const labelWidth = 32;\r\n  const gap = 8;\r\n  const radius: number = 368 / 2;\r\n  const labels = [\r\n    {\r\n      label: 'E',\r\n      x: radius + gap / scale + labelWidth / 2,\r\n      y: 0,\r\n      class: 'label',\r\n    },\r\n    {\r\n      label: 'S',\r\n      x: 0,\r\n      y: radius + gap / scale + labelWidth / 2,\r\n      class: 'label',\r\n    },\r\n    {\r\n      label: 'W',\r\n      x: -(radius + gap / scale + labelWidth / 2),\r\n      y: 0,\r\n      class: 'label',\r\n    },\r\n  ];\r\n\r\n  let arrow = svg`<defs>\r\n        <mask id=\"circleMask\">\r\n            <rect x=\"-${radius}\" y=\"-${radius}\" width=\"${radius * 2}\" height=\"${radius * 2}\" fill=\"black\"/>\r\n            <circle cx=\"0\" cy=\"0\" r=\"${radius}\" fill=\"white\"/>\r\n        </mask>\r\n    </defs>\r\n    <g mask=\"url(#circleMask)\" transform=\"translate(0, ${-(radius + 45 / scale)}) scale(${1 / scale}, ${1 / scale})\">\r\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M-32.04 42.7192 0 0 32.039 42.7192C21.627 40.9314 10.922 40 0 40-10.922 40-21.627 40.9314-32.04 42.7192Z\" \r\n      fill=\"var(--instrument-tick-mark-secondary-color)\"/>\r\n        <path d=\"M5.003 29H2.091L-3.013 20.264H-3.077C-3.066 20.52-3.056 20.7813-3.045 21.048-3.034 21.3147-3.024 21.5867-3.013 21.864-2.992 22.1307-2.976 22.4027-2.965 22.68-2.954 22.9573-2.944 23.2347-2.933 23.512V29H-4.997V17.576H-2.101L2.987 26.232H3.035C3.024 25.9867 3.014 25.736 3.003 25.48 2.992 25.2133 2.982 24.952 2.971 24.696 2.971 24.4293 2.966 24.1627 2.955 23.896 2.944 23.6293 2.934 23.3627 2.923 23.096V17.576H5.003V29Z\" fill=\"var(--element-active-inverted-color)\"/>\r\n      </g>`;\r\n\r\n  if (scale < 0.58) {\r\n    arrow = svg`\r\n      <g mask=\"url(#circleMask)\" transform=\"translate(0, ${-radius})\">\r\n        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M-17.8457 24.984 0 0 17.8458 24.984C11.9868 24.3338 6.0324 24 0 24-6.0323 24-11.9867 24.3338-17.8457 24.984Z\" fill=\"var(--instrument-frame-tertiary-color)\"/>\r\n        </g>`;\r\n\r\n    labels.push({\r\n      label: 'N',\r\n      x: 0,\r\n      y: -(radius + gap / scale + labelWidth / 2),\r\n      class: 'label',\r\n    });\r\n  }\r\n\r\n  return svg`\r\n    ${arrow}\r\n\r\n    ${labels.map(\r\n      (l) => svg`\r\n        <text\r\n          x=\"${l.x}\"\r\n          y=\"${l.y}\"\r\n          class=\"${l.class}\"\r\n        >\r\n          ${l.label}\r\n        </text>\r\n      `\r\n    )}\r\n  `;\r\n}\r\n"],"names":[],"mappings":";AAEO,SAAS,aAAa,OAAkC;AAC7D,QAAM,aAAa;AACnB,QAAM,MAAM;AACZ,QAAM,SAAiB,MAAM;AAC7B,QAAM,SAAS;AAAA,IACb;AAAA,MACE,OAAO;AAAA,MACP,GAAG,SAAS,MAAM,QAAQ,aAAa;AAAA,MACvC,GAAG;AAAA,MACH,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,GAAG;AAAA,MACH,GAAG,SAAS,MAAM,QAAQ,aAAa;AAAA,MACvC,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,GAAG,EAAE,SAAS,MAAM,QAAQ,aAAa;AAAA,MACzC,GAAG;AAAA,MACH,OAAO;AAAA,IACT;AAAA,EAAA;AAGF,MAAI,QAAQ;AAAA;AAAA,wBAEU,MAAM,SAAS,MAAM,YAAY,SAAS,CAAC,aAAa,SAAS,CAAC;AAAA,uCACnD,MAAM;AAAA;AAAA;AAAA,yDAGY,EAAE,SAAS,KAAK,MAAM,WAAW,IAAI,KAAK,KAAK,IAAI,KAAK;AAAA;AAAA;AAAA;AAAA;AAM/G,MAAI,QAAQ,MAAM;AACR,YAAA;AAAA,2DAC+C,CAAC,MAAM;AAAA;AAAA;AAI9D,WAAO,KAAK;AAAA,MACV,OAAO;AAAA,MACP,GAAG;AAAA,MACH,GAAG,EAAE,SAAS,MAAM,QAAQ,aAAa;AAAA,MACzC,OAAO;AAAA,IAAA,CACR;AAAA,EACH;AAEO,SAAA;AAAA,MACH,KAAK;AAAA;AAAA,MAEL,OAAO;AAAA,IACP,CAAC,MAAM;AAAA;AAAA,eAEE,EAAE,CAAC;AAAA,eACH,EAAE,CAAC;AAAA,mBACC,EAAE,KAAK;AAAA;AAAA,YAEd,EAAE,KAAK;AAAA;AAAA;AAAA,EAAA,CAGd;AAAA;AAEL;"}

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

@@ -1 +1 @@
-{"version":3,"file":"watch.js","sources":["../../../src/navigation-instruments/watch/watch.ts"],"sourcesContent":["import {\n  LitElement,\n  SVGTemplateResult,\n  html,\n  nothing,\n  svg,\n  unsafeCSS,\n} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {circle} from '../../svghelpers';\nimport {roundedArch} from '../../svghelpers/roundedArch';\nimport {InstrumentState} from '../types';\nimport compentStyle from './watch.css?inline';\nimport {ResizeController} from '@lit-labs/observers/resize-controller.js';\nimport {AngleAdviceRaw, renderAdvice} from './advice';\nimport {Tickmark, TickmarkStyle, tickmark} from './tickmark';\nimport {renderLabels} from './label';\n\n@customElement('obc-watch')\nexport class ObcWatch extends LitElement {\n  @property({type: String}) state: InstrumentState = InstrumentState.inCommand;\n  @property({type: Number}) angleSetpoint: number | undefined;\n  @property({type: Boolean}) atAngleSetpoint: boolean = false;\n  @property({type: Number}) padding = 24;\n  @property({type: Number}) cutAngleStart: number | null = null;\n  @property({type: Number}) cutAngleEnd: number | null = null;\n  @property({type: Boolean}) roundOutsideCut = false;\n  @property({type: Boolean}) roundInsideCut = false;\n  @property({type: Array, attribute: false}) tickmarks: Tickmark[] = [];\n  @property({type: Array, attribute: false}) advices: AngleAdviceRaw[] = [];\n  @property({type: Boolean}) crosshairEnabled: boolean = false;\n  @property({type: Boolean}) labelFrameEnabled: boolean = false;\n\n  // @ts-expect-error TS6133: The controller unsures that the render\n  // function is called on resize of the element\n  private _resizeController = new ResizeController(this, {});\n\n  private watchCircle(): SVGTemplateResult {\n    if (this.cutAngleStart === null || this.cutAngleEnd === null) {\n      return svg`\n        <defs>\n          <mask id=\"mask1\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\">\n            <rect x=\"-200\" y=\"-200\" width=\"400\" height=\"400\" fill=\"white\" />\n            <circle cx=\"0\" cy=\"0\" r=\"160\" fill=\"black\" />\n          </mask>\n        </defs>\n        ${\n          this.state === InstrumentState.off\n            ? null\n            : svg`\n        <circle\n          cx=\"0\"\n          cy=\"0\"\n          r=\"184\"\n          fill=\"var(--instrument-frame-primary-color)\"\n          mask=\"url(#mask1)\"\n        />`\n        }\n        ${circle('innerRing', {\n          radius: 320 / 2,\n          strokeWidth: 1,\n          strokeColor: 'var(--instrument-frame-tertiary-color)',\n          strokePosition: 'center',\n          fillColor: 'none',\n        })}\n        ${\n          this.state === InstrumentState.off\n            ? null\n            : circle('outerRing', {\n                radius: 368 / 2,\n                strokeWidth: 1,\n                strokeColor: 'var(--instrument-frame-tertiary-color)',\n                strokePosition: 'center',\n                fillColor: 'none',\n              })\n        }\n    `;\n    } else {\n      const R = 184;\n      const r = 160;\n      const svgPath = roundedArch({\n        startAngle: this.cutAngleStart,\n        endAngle: this.cutAngleEnd,\n        R,\n        r,\n        roundOutsideCut: this.roundOutsideCut,\n        roundInsideCut: this.roundInsideCut,\n      });\n      return svg`\n        <path d=${svgPath} fill=\"var(--instrument-frame-primary-color)\" \n        stroke=\"var(--instrument-frame-tertiary-color)\"\n          vector-effect=\"non-scaling-stroke\"/>\n      `;\n    }\n  }\n\n  private renderCrosshair(radius: number): SVGTemplateResult {\n    return svg`\n      <line\n        x1=\"-${radius}\"\n        y1=\"0\"\n        x2=\"${radius}\"\n        y2=\"0\"\n        stroke=\"var(--instrument-frame-tertiary-color)\"\n        stroke-width=\"1\"\n        vector-effect=\"non-scaling-stroke\"\n      />\n      <line\n        x1=\"0\"\n        y1=\"-${radius}\"\n        x2=\"0\"\n        y2=\"${radius}\"\n        stroke=\"var(--instrument-frame-tertiary-color)\"\n        stroke-width=\"1\"\n        vector-effect=\"non-scaling-stroke\"\n      />\n    `;\n  }\n\n  override render() {\n    const width = (176 + this.padding) * 2;\n    const viewBox = `-${width / 2} -${width / 2} ${width} ${width}`;\n    const angleSetpoint = this.renderSetpoint();\n    const scale = this.clientWidth / width;\n    const tickmarks = this.tickmarks.map((t) =>\n      tickmark(t.angle, t.type, TickmarkStyle.hinted, scale, t.text)\n    );\n    const advices = this.advices\n      ? this.advices.map((a) => renderAdvice(a))\n      : nothing;\n    const labels = this.labelFrameEnabled ? renderLabels(scale) : nothing;\n\n    return html`\n      <svg\n        width=\"100%\"\n        height=\"100%\"\n        viewBox=${viewBox}\n        style=\"--scale: ${scale}\"\n      >\n        ${this.watchCircle()} ${tickmarks} ${advices} ${angleSetpoint} ${labels}\n        ${this.crosshairEnabled ? this.renderCrosshair(320 / 2) : nothing}\n      </svg>\n    `;\n  }\n\n  private renderSetpoint(): SVGTemplateResult | typeof nothing {\n    let setPointColor = 'var(--instrument-enhanced-primary-color)';\n    if (this.atAngleSetpoint) {\n      setPointColor = 'var(--instrument-enhanced-secondary-color)';\n    }\n    if (this.state === InstrumentState.active) {\n      setPointColor = 'var(--instrument-regular-primary-color)';\n      if (this.atAngleSetpoint) {\n        setPointColor = 'var(--instrument-regular-secondary-color)';\n      }\n    } else if (this.state === InstrumentState.loading) {\n      setPointColor = 'var(--instrument-frame-tertiary-color)';\n    } else if (this.state === InstrumentState.off) {\n      setPointColor = 'var(--instrument-frame-tertiary-color)';\n    }\n\n    if (this.angleSetpoint === undefined) {\n      return nothing;\n    } else {\n      let path;\n      if (this.state === InstrumentState.inCommand) {\n        path =\n          'M23.5119 8C24.6981 6.35191 23.5696 4 21.5926 4L2.39959 4C0.422598 4 -0.705911 6.35191 0.480283 8L11.9961 24L23.5119 8Z';\n      } else {\n        path =\n          'M18.5836 8L5.4086 8L11.9961 17.1526L18.5836 8ZM23.5119 8C24.6981 6.35191 23.5696 4 21.5926 4L2.39959 4C0.422598 4 -0.705911 6.35191 0.480283 8L11.9961 24L23.5119 8Z';\n      }\n      return svg`\n        <defs>\n          <g id=\"setpoint\">\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" transform=\"translate(-24 12) rotate(-90)\" d=${path} vector-effect=\"non-scaling-stroke\"/>\n          </g>\n          <mask id=\"setpointMask\">\n            <rect x=\"-20\" y=\"-20\" width=\"50\" height=\"50\" fill=\"white\" />\n            <use href=\"#setpoint\" fill=\"black\" />\n          </mask>\n        </defs>\n        <g transform=\"rotate(${this.angleSetpoint + 90}) translate(-168 0) \">\n          <use href=\"#setpoint\" fill=${setPointColor} stroke-width=\"0\" />\n          \n          <use href=\"#setpoint\" vector-effect=\"non-scaling-stroke\" fill=\"none\" stroke=\"var(--border-silhouette-color)\" stroke-width=\"2\" stroke-linejoin=\"round\" mask=\"url(#setpointMask)\" />\n        </g>\n      `;\n    }\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-watch': ObcWatch;\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"watch.js","sources":["../../../src/navigation-instruments/watch/watch.ts"],"sourcesContent":["import {\r\n  LitElement,\r\n  SVGTemplateResult,\r\n  html,\r\n  nothing,\r\n  svg,\r\n  unsafeCSS,\r\n} from 'lit';\r\nimport {customElement, property} from 'lit/decorators.js';\r\nimport {circle} from '../../svghelpers';\r\nimport {roundedArch} from '../../svghelpers/roundedArch';\r\nimport {InstrumentState} from '../types';\r\nimport compentStyle from './watch.css?inline';\r\nimport {ResizeController} from '@lit-labs/observers/resize-controller.js';\r\nimport {AngleAdviceRaw, renderAdvice} from './advice';\r\nimport {Tickmark, TickmarkStyle, tickmark} from './tickmark';\r\nimport {renderLabels} from './label';\r\n\r\n@customElement('obc-watch')\r\nexport class ObcWatch extends LitElement {\r\n  @property({type: String}) state: InstrumentState = InstrumentState.inCommand;\r\n  @property({type: Number}) angleSetpoint: number | undefined;\r\n  @property({type: Boolean}) atAngleSetpoint: boolean = false;\r\n  @property({type: Number}) padding = 24;\r\n  @property({type: Number}) cutAngleStart: number | null = null;\r\n  @property({type: Number}) cutAngleEnd: number | null = null;\r\n  @property({type: Boolean}) roundOutsideCut = false;\r\n  @property({type: Boolean}) roundInsideCut = false;\r\n  @property({type: Array, attribute: false}) tickmarks: Tickmark[] = [];\r\n  @property({type: Array, attribute: false}) advices: AngleAdviceRaw[] = [];\r\n  @property({type: Boolean}) crosshairEnabled: boolean = false;\r\n  @property({type: Boolean}) labelFrameEnabled: boolean = false;\r\n\r\n  // @ts-expect-error TS6133: The controller unsures that the render\r\n  // function is called on resize of the element\r\n  private _resizeController = new ResizeController(this, {});\r\n\r\n  private watchCircle(): SVGTemplateResult {\r\n    if (this.cutAngleStart === null || this.cutAngleEnd === null) {\r\n      return svg`\r\n        <defs>\r\n          <mask id=\"mask1\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\">\r\n            <rect x=\"-200\" y=\"-200\" width=\"400\" height=\"400\" fill=\"white\" />\r\n            <circle cx=\"0\" cy=\"0\" r=\"160\" fill=\"black\" />\r\n          </mask>\r\n        </defs>\r\n        ${\r\n          this.state === InstrumentState.off\r\n            ? null\r\n            : svg`\r\n        <circle\r\n          cx=\"0\"\r\n          cy=\"0\"\r\n          r=\"184\"\r\n          fill=\"var(--instrument-frame-primary-color)\"\r\n          mask=\"url(#mask1)\"\r\n        />`\r\n        }\r\n        ${circle('innerRing', {\r\n          radius: 320 / 2,\r\n          strokeWidth: 1,\r\n          strokeColor: 'var(--instrument-frame-tertiary-color)',\r\n          strokePosition: 'center',\r\n          fillColor: 'none',\r\n        })}\r\n        ${\r\n          this.state === InstrumentState.off\r\n            ? null\r\n            : circle('outerRing', {\r\n                radius: 368 / 2,\r\n                strokeWidth: 1,\r\n                strokeColor: 'var(--instrument-frame-tertiary-color)',\r\n                strokePosition: 'center',\r\n                fillColor: 'none',\r\n              })\r\n        }\r\n    `;\r\n    } else {\r\n      const R = 184;\r\n      const r = 160;\r\n      const svgPath = roundedArch({\r\n        startAngle: this.cutAngleStart,\r\n        endAngle: this.cutAngleEnd,\r\n        R,\r\n        r,\r\n        roundOutsideCut: this.roundOutsideCut,\r\n        roundInsideCut: this.roundInsideCut,\r\n      });\r\n      return svg`\r\n        <path d=${svgPath} fill=\"var(--instrument-frame-primary-color)\" \r\n        stroke=\"var(--instrument-frame-tertiary-color)\"\r\n          vector-effect=\"non-scaling-stroke\"/>\r\n      `;\r\n    }\r\n  }\r\n\r\n  private renderCrosshair(radius: number): SVGTemplateResult {\r\n    return svg`\r\n      <line\r\n        x1=\"-${radius}\"\r\n        y1=\"0\"\r\n        x2=\"${radius}\"\r\n        y2=\"0\"\r\n        stroke=\"var(--instrument-frame-tertiary-color)\"\r\n        stroke-width=\"1\"\r\n        vector-effect=\"non-scaling-stroke\"\r\n      />\r\n      <line\r\n        x1=\"0\"\r\n        y1=\"-${radius}\"\r\n        x2=\"0\"\r\n        y2=\"${radius}\"\r\n        stroke=\"var(--instrument-frame-tertiary-color)\"\r\n        stroke-width=\"1\"\r\n        vector-effect=\"non-scaling-stroke\"\r\n      />\r\n    `;\r\n  }\r\n\r\n  override render() {\r\n    const width = (176 + this.padding) * 2;\r\n    const viewBox = `-${width / 2} -${width / 2} ${width} ${width}`;\r\n    const angleSetpoint = this.renderSetpoint();\r\n    const scale = this.clientWidth / width;\r\n    const tickmarks = this.tickmarks.map((t) =>\r\n      tickmark(t.angle, t.type, TickmarkStyle.hinted, scale, t.text)\r\n    );\r\n    const advices = this.advices\r\n      ? this.advices.map((a) => renderAdvice(a))\r\n      : nothing;\r\n    const labels = this.labelFrameEnabled ? renderLabels(scale) : nothing;\r\n\r\n    return html`\r\n      <svg\r\n        width=\"100%\"\r\n        height=\"100%\"\r\n        viewBox=${viewBox}\r\n        style=\"--scale: ${scale}\"\r\n      >\r\n        ${this.watchCircle()} ${tickmarks} ${advices} ${angleSetpoint} ${labels}\r\n        ${this.crosshairEnabled ? this.renderCrosshair(320 / 2) : nothing}\r\n      </svg>\r\n    `;\r\n  }\r\n\r\n  private renderSetpoint(): SVGTemplateResult | typeof nothing {\r\n    let setPointColor = 'var(--instrument-enhanced-primary-color)';\r\n    if (this.atAngleSetpoint) {\r\n      setPointColor = 'var(--instrument-enhanced-secondary-color)';\r\n    }\r\n    if (this.state === InstrumentState.active) {\r\n      setPointColor = 'var(--instrument-regular-primary-color)';\r\n      if (this.atAngleSetpoint) {\r\n        setPointColor = 'var(--instrument-regular-secondary-color)';\r\n      }\r\n    } else if (this.state === InstrumentState.loading) {\r\n      setPointColor = 'var(--instrument-frame-tertiary-color)';\r\n    } else if (this.state === InstrumentState.off) {\r\n      setPointColor = 'var(--instrument-frame-tertiary-color)';\r\n    }\r\n\r\n    if (this.angleSetpoint === undefined) {\r\n      return nothing;\r\n    } else {\r\n      let path;\r\n      if (this.state === InstrumentState.inCommand) {\r\n        path =\r\n          'M23.5119 8C24.6981 6.35191 23.5696 4 21.5926 4L2.39959 4C0.422598 4 -0.705911 6.35191 0.480283 8L11.9961 24L23.5119 8Z';\r\n      } else {\r\n        path =\r\n          'M18.5836 8L5.4086 8L11.9961 17.1526L18.5836 8ZM23.5119 8C24.6981 6.35191 23.5696 4 21.5926 4L2.39959 4C0.422598 4 -0.705911 6.35191 0.480283 8L11.9961 24L23.5119 8Z';\r\n      }\r\n      return svg`\r\n        <defs>\r\n          <g id=\"setpoint\">\r\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" transform=\"translate(-24 12) rotate(-90)\" d=${path} vector-effect=\"non-scaling-stroke\"/>\r\n          </g>\r\n          <mask id=\"setpointMask\">\r\n            <rect x=\"-20\" y=\"-20\" width=\"50\" height=\"50\" fill=\"white\" />\r\n            <use href=\"#setpoint\" fill=\"black\" />\r\n          </mask>\r\n        </defs>\r\n        <g transform=\"rotate(${this.angleSetpoint + 90}) translate(-168 0) \">\r\n          <use href=\"#setpoint\" fill=${setPointColor} stroke-width=\"0\" />\r\n          \r\n          <use href=\"#setpoint\" vector-effect=\"non-scaling-stroke\" fill=\"none\" stroke=\"var(--border-silhouette-color)\" stroke-width=\"2\" stroke-linejoin=\"round\" mask=\"url(#setpointMask)\" />\r\n        </g>\r\n      `;\r\n    }\r\n  }\r\n\r\n  static override styles = unsafeCSS(compentStyle);\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    'obc-watch': ObcWatch;\r\n  }\r\n}\r\n"],"names":[],"mappings":"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"}

package/dist/navigation-instruments/watch-flat/tickmark-flat.js.map

@@ -1 +1 @@
-{"version":3,"file":"tickmark-flat.js","sources":["../../../src/navigation-instruments/watch-flat/tickmark-flat.ts"],"sourcesContent":["import {SVGTemplateResult, svg} from 'lit';\n\nexport interface Tickmark {\n  angle: number;\n  type: TickmarkType;\n  text?: string;\n}\n\nexport enum TickmarkType {\n  main = 'main',\n  primary = 'primary',\n  secondary = 'secondary',\n  tertiary = 'tertiary',\n}\n\nexport enum TickmarkStyle {\n  hinted = 'hinted',\n  regular = 'regular',\n  enhanced = 'enhanced',\n}\n\nexport function tickmarkColor(style: TickmarkStyle): string {\n  if (style === TickmarkStyle.hinted) {\n    return 'var(--instrument-frame-tertiary-color)';\n  } else if (style === TickmarkStyle.regular) {\n    return 'var(--instrument-tick-mark-secondary-color)';\n  } else {\n    return 'var(--instrument-tick-mark-primary-color)';\n  }\n}\n\nexport function tickmark(\n  angle: number,\n  tickmarkSize: TickmarkType,\n  style: TickmarkStyle,\n  text?: string\n): SVGTemplateResult | SVGTemplateResult[] {\n  const textHeight = -32;\n  let lineStartY: number = -35;\n  let lineEndY: number = -34;\n\n  if (tickmarkSize === TickmarkType.secondary) {\n    lineStartY = -24;\n    lineEndY = lineStartY + 8;\n  } else if (tickmarkSize === TickmarkType.main) {\n    lineEndY = lineStartY + 20;\n  } else if (tickmarkSize === TickmarkType.tertiary) {\n    throw new Error('Tertiary tickmarks are not supported');\n  }\n\n  const colorName = tickmarkColor(style);\n  const tick = svg`<line x1=${angle} y1=${lineStartY} x2=${angle} y2=${lineEndY} stroke=${colorName} stroke-width=\"1\" vector-effect=\"non-scaling-stroke\"/>`;\n  if (text) {\n    const textY = lineEndY + textHeight;\n    return [\n      tick,\n      svg`<text x=${angle} y=${textY} class=\"label\" text-anchor=\"middle\">${text}</text>`,\n    ];\n  }\n\n  return tick;\n}\n"],"names":["TickmarkType","TickmarkStyle"],"mappings":";AAQY,IAAA,iCAAAA,kBAAL;AACLA,gBAAA,MAAO,IAAA;AACPA,gBAAA,SAAU,IAAA;AACVA,gBAAA,WAAY,IAAA;AACZA,gBAAA,UAAW,IAAA;AAJDA,SAAAA;AAAA,GAAA,gBAAA,CAAA,CAAA;AAOA,IAAA,kCAAAC,mBAAL;AACLA,iBAAA,QAAS,IAAA;AACTA,iBAAA,SAAU,IAAA;AACVA,iBAAA,UAAW,IAAA;AAHDA,SAAAA;AAAA,GAAA,iBAAA,CAAA,CAAA;AAML,SAAS,cAAc,OAA8B;AAC1D,MAAI,UAAU,UAAsB;AAC3B,WAAA;AAAA,EAAA,WACE,UAAU,WAAuB;AACnC,WAAA;AAAA,EAAA,OACF;AACE,WAAA;AAAA,EACT;AACF;AAEO,SAAS,SACd,OACA,cACA,OACA,MACyC;AACzC,QAAM,aAAa;AACnB,MAAI,aAAqB;AACzB,MAAI,WAAmB;AAEvB,MAAI,iBAAiB,aAAwB;AAC9B,iBAAA;AACb,eAAW,aAAa;AAAA,EAAA,WACf,iBAAiB,QAAmB;AAC7C,eAAW,aAAa;AAAA,EAAA,WACf,iBAAiB,YAAuB;AAC3C,UAAA,IAAI,MAAM,sCAAsC;AAAA,EACxD;AAEM,QAAA,YAAY,cAAc,KAAK;AAC/B,QAAA,OAAO,eAAe,KAAK,OAAO,UAAU,OAAO,KAAK,OAAO,QAAQ,WAAW,SAAS;AACjG,MAAI,MAAM;AACR,UAAM,QAAQ,WAAW;AAClB,WAAA;AAAA,MACL;AAAA,MACA,cAAc,KAAK,MAAM,KAAK,uCAAuC,IAAI;AAAA,IAAA;AAAA,EAE7E;AAEO,SAAA;AACT;"}
+{"version":3,"file":"tickmark-flat.js","sources":["../../../src/navigation-instruments/watch-flat/tickmark-flat.ts"],"sourcesContent":["import {SVGTemplateResult, svg} from 'lit';\r\n\r\nexport interface Tickmark {\r\n  angle: number;\r\n  type: TickmarkType;\r\n  text?: string;\r\n}\r\n\r\nexport enum TickmarkType {\r\n  main = 'main',\r\n  primary = 'primary',\r\n  secondary = 'secondary',\r\n  tertiary = 'tertiary',\r\n}\r\n\r\nexport enum TickmarkStyle {\r\n  hinted = 'hinted',\r\n  regular = 'regular',\r\n  enhanced = 'enhanced',\r\n}\r\n\r\nexport function tickmarkColor(style: TickmarkStyle): string {\r\n  if (style === TickmarkStyle.hinted) {\r\n    return 'var(--instrument-frame-tertiary-color)';\r\n  } else if (style === TickmarkStyle.regular) {\r\n    return 'var(--instrument-tick-mark-secondary-color)';\r\n  } else {\r\n    return 'var(--instrument-tick-mark-primary-color)';\r\n  }\r\n}\r\n\r\nexport function tickmark(\r\n  angle: number,\r\n  tickmarkSize: TickmarkType,\r\n  style: TickmarkStyle,\r\n  text?: string\r\n): SVGTemplateResult | SVGTemplateResult[] {\r\n  const textHeight = -32;\r\n  let lineStartY: number = -35;\r\n  let lineEndY: number = -34;\r\n\r\n  if (tickmarkSize === TickmarkType.secondary) {\r\n    lineStartY = -24;\r\n    lineEndY = lineStartY + 8;\r\n  } else if (tickmarkSize === TickmarkType.main) {\r\n    lineEndY = lineStartY + 20;\r\n  } else if (tickmarkSize === TickmarkType.tertiary) {\r\n    throw new Error('Tertiary tickmarks are not supported');\r\n  }\r\n\r\n  const colorName = tickmarkColor(style);\r\n  const tick = svg`<line x1=${angle} y1=${lineStartY} x2=${angle} y2=${lineEndY} stroke=${colorName} stroke-width=\"1\" vector-effect=\"non-scaling-stroke\"/>`;\r\n  if (text) {\r\n    const textY = lineEndY + textHeight;\r\n    return [\r\n      tick,\r\n      svg`<text x=${angle} y=${textY} class=\"label\" text-anchor=\"middle\">${text}</text>`,\r\n    ];\r\n  }\r\n\r\n  return tick;\r\n}\r\n"],"names":["TickmarkType","TickmarkStyle"],"mappings":";AAQY,IAAA,iCAAAA,kBAAL;AACLA,gBAAA,MAAO,IAAA;AACPA,gBAAA,SAAU,IAAA;AACVA,gBAAA,WAAY,IAAA;AACZA,gBAAA,UAAW,IAAA;AAJDA,SAAAA;AAAA,GAAA,gBAAA,CAAA,CAAA;AAOA,IAAA,kCAAAC,mBAAL;AACLA,iBAAA,QAAS,IAAA;AACTA,iBAAA,SAAU,IAAA;AACVA,iBAAA,UAAW,IAAA;AAHDA,SAAAA;AAAA,GAAA,iBAAA,CAAA,CAAA;AAML,SAAS,cAAc,OAA8B;AAC1D,MAAI,UAAU,UAAsB;AAC3B,WAAA;AAAA,EAAA,WACE,UAAU,WAAuB;AACnC,WAAA;AAAA,EAAA,OACF;AACE,WAAA;AAAA,EACT;AACF;AAEO,SAAS,SACd,OACA,cACA,OACA,MACyC;AACzC,QAAM,aAAa;AACnB,MAAI,aAAqB;AACzB,MAAI,WAAmB;AAEvB,MAAI,iBAAiB,aAAwB;AAC9B,iBAAA;AACb,eAAW,aAAa;AAAA,EAAA,WACf,iBAAiB,QAAmB;AAC7C,eAAW,aAAa;AAAA,EAAA,WACf,iBAAiB,YAAuB;AAC3C,UAAA,IAAI,MAAM,sCAAsC;AAAA,EACxD;AAEM,QAAA,YAAY,cAAc,KAAK;AAC/B,QAAA,OAAO,eAAe,KAAK,OAAO,UAAU,OAAO,KAAK,OAAO,QAAQ,WAAW,SAAS;AACjG,MAAI,MAAM;AACR,UAAM,QAAQ,WAAW;AAClB,WAAA;AAAA,MACL;AAAA,MACA,cAAc,KAAK,MAAM,KAAK,uCAAuC,IAAI;AAAA,IAAA;AAAA,EAE7E;AAEO,SAAA;AACT;"}