@oicl/openbridge-webcomponents 0.0.12 → 0.0.14

package/dist/navigation-instruments/instrument-field/instrument-field.css.js

@@ -0,0 +1,226 @@
+import { css } from "lit";
+const compentStyle = css`* {
+    box-sizing: border-box;
+}
+
+.wrapper {
+    display: flex;
+    flex-direction: column;
+    width: 98px;
+    padding-left: 8px;
+    padding-right: 8px;
+}
+
+.wrapper .setpoint {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        color: var(--instrument-enhanced-primary-color);
+        border-bottom: 1px solid var(--border-divider-color);
+        height: 32px;
+
+        font-family: Noto Sans;
+
+        font-size: 16px;
+
+        font-weight: 570;
+
+        line-height: 24px;
+
+        text-align: center;
+
+        font-variation-settings: 'wdth' 100, 'CTGR' 0;
+    }
+
+.wrapper .setpoint .setpoint-arrow {
+            margin-left: -4px;
+        }
+
+.wrapper .value {
+        display: flex;
+        flex-direction: row;
+        justify-content: end;
+        color: var(--instrument-primary-color);
+        font-family: Noto Sans;
+        font-size: 36px;
+        font-weight: 570;
+        line-height: 48px;
+        text-align: center;
+        font-variation-settings: 'wdth' 100, 'CTGR' 0;
+    }
+
+.wrapper .value .value-hint-zero {
+            color: var(--border-outline-color)
+        }
+
+.wrapper .value .value-blue {
+            color: var(--instrument-enhanced-secondary-color);
+        }
+
+.wrapper .value .degree {
+            color: var(--instrument-enhanced-secondary-color);
+            font-family: Noto Sans;
+            font-size: 16px;
+            font-weight: 570;
+            line-height: 24px;
+            text-align: center;
+            font-variation-settings: 'wdth' 100, 'CTGR' 0;
+            width: 7px;
+            margin-right: -7px;
+            margin-top: 6px;
+        }
+
+.wrapper .label {
+        display: flex;
+        flex-direction: row;
+        justify-content: end;
+        gap: 4px;
+        color: var(--instrument-regular-secondary-color);
+        padding-bottom: 4px;
+    }
+
+.wrapper .label .tag {
+            font-family: 'Noto Sans';
+            font-size: 1rem;
+            font-style: normal;
+            font-weight: 570;
+            line-height: 1.5rem;
+            /* 150% */
+        }
+
+.wrapper .label .unit {
+            /* UI/Body */
+            font-family: 'Noto Sans';
+            font-size: 16px;
+            font-style: normal;
+            font-weight: 370;
+            line-height: 24px;
+            /* 150% */
+            text-decoration: none;
+        }
+
+.wrapper .source {
+        /* UI/Body */
+        font-family: 'Noto Sans';
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 370;
+        line-height: 24px;
+        /* 150% */
+        text-decoration: none;
+        color: var(--element-neutral-color);
+        text-align: right;
+        border-top: 1px solid var(--border-divider-color);
+        padding-top: 4px;
+        padding-bottom: 4px;
+    }
+
+.wrapper.small {
+        width: 73px;
+    }
+
+.wrapper.small .value {
+            font-family: Noto Sans;
+            font-size: 16px;
+            font-weight: 570;
+            line-height: 24px;
+            text-align: center;
+            font-variation-settings: 'wdth' 100, 'CTGR' 0;
+        }
+
+.wrapper.small .value .degree {
+                margin-top: 0;
+            }
+
+.wrapper.small .label .tag {
+            font-family: 'Noto Sans';
+            font-size: 12px;
+            font-style: normal;
+            font-weight: 650;
+            line-height: 16px;
+            /* 133.333% */
+        }
+
+.wrapper.small .label .unit {
+            font-family: 'Noto Sans';
+            font-size: 12px;
+            font-style: normal;
+            font-weight: 370;
+            line-height: 16px;
+            /* 133.333% */
+        }
+
+.wrapper.small .source {
+            font-family: 'Noto Sans';
+            font-size: 12px;
+            font-style: normal;
+            font-weight: 370;
+            line-height: 16px;
+            /* 133.333% */
+        }
+
+.wrapper.enhanced .setpoint, .wrapper.large .setpoint, .wrapper.large-enhanced .setpoint {
+            height: 48px;
+            font-family: Noto Sans;
+            font-size: 36px;
+            font-weight: 570;
+            line-height: 48px;
+            text-align: center;
+            font-variation-settings: 'wdth' 100, 'CTGR' 0;
+        }
+
+.wrapper.enhanced .setpoint-arrow, .wrapper.large .setpoint-arrow, .wrapper.large-enhanced .setpoint-arrow {
+            margin-left: -6px;
+        }
+
+.wrapper.large, .wrapper.large-enhanced {
+        width: 156px;
+        padding-left: 16px;
+        padding-right: 16px;
+    }
+
+.wrapper.large .value, .wrapper.large-enhanced .value {
+            font-family: "Noto Sans";
+            font-size: 72px;
+            font-style: normal;
+            font-weight: 570;
+            line-height: 96px;
+            /* 133.333% */
+        }
+
+.wrapper.large .degree, .wrapper.large-enhanced .degree {
+            width: 14px;
+            margin-right: -14px;
+            text-align: center;
+            font-variant-numeric: lining-nums tabular-nums;
+            font-feature-settings: 'ss02' on;
+            font-family: "Noto Sans";
+            font-size: 32px;
+            font-style: normal;
+            font-weight: 620;
+            line-height: 48px; /* 150% */
+        }
+
+.wrapper.large .label, .wrapper.large-enhanced .label {
+            padding-bottom: 12px;
+        }
+
+.wrapper.large .source, .wrapper.large-enhanced .source {
+            padding-top: 12px;
+            padding-bottom: 12px;
+        }
+
+.wrapper.large-enhanced .setpoint {
+            height: 96px;
+            font-family: "Noto Sans";
+            font-size: 72px;
+            font-style: normal;
+            font-weight: 570;
+            line-height: 96px;
+            /* 133.333% */
+        }`;
+export {
+  compentStyle as default
+};
+//# sourceMappingURL=instrument-field.css.js.map

package/dist/navigation-instruments/instrument-field/instrument-field.css.js.map

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

package/dist/navigation-instruments/instrument-field/instrument-field.d.ts

@@ -0,0 +1,32 @@
+import { LitElement } from 'lit';
+export declare enum InstrumentFieldSize {
+    small = "small",
+    regular = "regular",
+    enhanced = "enhanced",
+    large = "large",
+    largeEnhanced = "large-enhanced"
+}
+export type InstrumentFieldSizeType = 'small' | 'regular' | 'enhanced' | 'large' | 'large-enhanced';
+export declare class ObcInstrumentField extends LitElement {
+    size: InstrumentFieldSizeType;
+    setpoint: number;
+    hasSetpoint: boolean;
+    value: number;
+    degree: boolean;
+    maxDigits: number;
+    tag: string;
+    unit: string;
+    source: string;
+    hasSource: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+    get setpointValueBlueNumbers(): string;
+    get valueBlueNumbers(): string;
+    get hintZeros(): string;
+    static styles: import("lit").CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'obc-instrument-field': ObcInstrumentField;
+    }
+}
+//# sourceMappingURL=instrument-field.d.ts.map

package/dist/navigation-instruments/instrument-field/instrument-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"instrument-field.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/instrument-field/instrument-field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAkB,MAAM,KAAK,CAAC;AAKhD,oBAAY,mBAAmB;IAC7B,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,QAAQ,aAAa;IACrB,KAAK,UAAU;IACf,aAAa,mBAAmB;CACjC;AACD,MAAM,MAAM,uBAAuB,GAC/B,OAAO,GACP,SAAS,GACT,UAAU,GACV,OAAO,GACP,gBAAgB,CAAC;AAErB,qBACa,kBAAmB,SAAQ,UAAU;IACtB,IAAI,EAAE,uBAAuB,CACzB;IACJ,QAAQ,SAAK;IACe,WAAW,UAAS;IAChD,KAAK,SAAK;IACT,MAAM,UAAS;IACS,SAAS,SAAK;IACvC,GAAG,SAAM;IACT,IAAI,SAAM;IACV,MAAM,SAAM;IACc,SAAS,UAAS;IAE7D,MAAM;IAmDf,IAAI,wBAAwB,IAAI,MAAM,CAErC;IAED,IAAI,gBAAgB,IAAI,MAAM,CAE7B;IAED,IAAI,SAAS,IAAI,MAAM,CAUtB;IAED,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,kBAAkB,CAAC;KAC5C;CACF"}

package/dist/navigation-instruments/instrument-field/instrument-field.js

@@ -0,0 +1,138 @@
+import { unsafeCSS, LitElement, html } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import compentStyle from "./instrument-field.css.js";
+import { classMap } from "lit/directives/class-map.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+var InstrumentFieldSize = /* @__PURE__ */ ((InstrumentFieldSize2) => {
+  InstrumentFieldSize2["small"] = "small";
+  InstrumentFieldSize2["regular"] = "regular";
+  InstrumentFieldSize2["enhanced"] = "enhanced";
+  InstrumentFieldSize2["large"] = "large";
+  InstrumentFieldSize2["largeEnhanced"] = "large-enhanced";
+  return InstrumentFieldSize2;
+})(InstrumentFieldSize || {});
+let ObcInstrumentField = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.size = "regular";
+    this.setpoint = 0;
+    this.hasSetpoint = false;
+    this.value = 0;
+    this.degree = false;
+    this.maxDigits = 3;
+    this.tag = "";
+    this.unit = "";
+    this.source = "";
+    this.hasSource = false;
+  }
+  render() {
+    return html`
+      <div class=${classMap({ wrapper: true, [this.size]: true })}>
+        ${this.hasSetpoint ? html`<div class="setpoint">
+              ${this.size === "small" || this.size === "regular" ? html`<svg
+                    class="setpoint-arrow"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M4 4C4 3.17595 4.94076 2.70557 5.6 3.2L12 8L5.6 12.8C4.94076 13.2944 4 12.824 4 12V4Z"
+                      fill="#0070D6"
+                    />
+                  </svg>` : html`<svg
+                    class="setpoint-arrow"
+                    width="24"
+                    height="24"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M6 5C6 4.17595 6.94076 3.70557 7.6 4.2L18 12L7.6 19.8C6.94076 20.2944 6 19.824 6 19V5Z"
+                      fill="var(--instrument-enhanced-primary-color)"
+                    />
+                  </svg>`}
+              <div class="setpoint-value">${this.setpointValueBlueNumbers}</div>
+            </div>` : null}
+        <div class="value">
+          <div class="value-hint-zero">${this.hintZeros}</div>
+          <div class="value-blue">${this.valueBlueNumbers}</div>
+          ${this.degree ? html`<div class="degree">°</div>` : null}
+        </div>
+        <div class="label">
+          <div class="tag">${this.tag}</div>
+          <div class="unit">${this.unit}</div>
+        </div>
+        ${this.hasSource ? html`<div class="source">${this.source}</div>` : null}
+      </div>
+    `;
+  }
+  get setpointValueBlueNumbers() {
+    return this.setpoint.toFixed(0);
+  }
+  get valueBlueNumbers() {
+    return this.value.toFixed(0);
+  }
+  get hintZeros() {
+    if (this.value < 0) {
+      return "";
+    }
+    const nBlues = this.valueBlueNumbers.length;
+    const nHints = this.maxDigits - nBlues;
+    if (nHints > 0) {
+      return "0".repeat(nHints);
+    }
+    return "";
+  }
+};
+ObcInstrumentField.styles = unsafeCSS(compentStyle);
+__decorateClass([
+  property({ type: String })
+], ObcInstrumentField.prototype, "size", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcInstrumentField.prototype, "setpoint", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "has-setpoint" })
+], ObcInstrumentField.prototype, "hasSetpoint", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcInstrumentField.prototype, "value", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcInstrumentField.prototype, "degree", 2);
+__decorateClass([
+  property({ type: Number, attribute: "max-digits" })
+], ObcInstrumentField.prototype, "maxDigits", 2);
+__decorateClass([
+  property({ type: String })
+], ObcInstrumentField.prototype, "tag", 2);
+__decorateClass([
+  property({ type: String })
+], ObcInstrumentField.prototype, "unit", 2);
+__decorateClass([
+  property({ type: String })
+], ObcInstrumentField.prototype, "source", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "has-source" })
+], ObcInstrumentField.prototype, "hasSource", 2);
+ObcInstrumentField = __decorateClass([
+  customElement("obc-instrument-field")
+], ObcInstrumentField);
+export {
+  InstrumentFieldSize,
+  ObcInstrumentField
+};
+//# sourceMappingURL=instrument-field.js.map

package/dist/navigation-instruments/instrument-field/instrument-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"instrument-field.js","sources":["../../../src/navigation-instruments/instrument-field/instrument-field.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport compentStyle from './instrument-field.css?inline';\nimport {classMap} from 'lit/directives/class-map.js';\n\nexport enum InstrumentFieldSize {\n  small = 'small',\n  regular = 'regular',\n  enhanced = 'enhanced',\n  large = 'large',\n  largeEnhanced = 'large-enhanced',\n}\nexport type InstrumentFieldSizeType =\n  | 'small'\n  | 'regular'\n  | 'enhanced'\n  | 'large'\n  | 'large-enhanced';\n\n@customElement('obc-instrument-field')\nexport class ObcInstrumentField extends LitElement {\n  @property({type: String}) size: InstrumentFieldSizeType =\n    InstrumentFieldSize.regular;\n  @property({type: Number}) setpoint = 0;\n  @property({type: Boolean, attribute: 'has-setpoint'}) hasSetpoint = false;\n  @property({type: Number}) value = 0;\n  @property({type: Boolean}) degree = false;\n  @property({type: Number, attribute: 'max-digits'}) maxDigits = 3;\n  @property({type: String}) tag = '';\n  @property({type: String}) unit = '';\n  @property({type: String}) source = '';\n  @property({type: Boolean, attribute: 'has-source'}) hasSource = false;\n\n  override render() {\n    return html`\n      <div class=${classMap({wrapper: true, [this.size]: true})}>\n        ${this.hasSetpoint\n          ? html`<div class=\"setpoint\">\n              ${this.size === 'small' || this.size === 'regular'\n                ? html`<svg\n                    class=\"setpoint-arrow\"\n                    width=\"16\"\n                    height=\"16\"\n                    viewBox=\"0 0 16 16\"\n                    fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                  >\n                    <path\n                      d=\"M4 4C4 3.17595 4.94076 2.70557 5.6 3.2L12 8L5.6 12.8C4.94076 13.2944 4 12.824 4 12V4Z\"\n                      fill=\"#0070D6\"\n                    />\n                  </svg>`\n                : html`<svg\n                    class=\"setpoint-arrow\"\n                    width=\"24\"\n                    height=\"24\"\n                    viewBox=\"0 0 24 24\"\n                    fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                  >\n                    <path\n                      d=\"M6 5C6 4.17595 6.94076 3.70557 7.6 4.2L18 12L7.6 19.8C6.94076 20.2944 6 19.824 6 19V5Z\"\n                      fill=\"var(--instrument-enhanced-primary-color)\"\n                    />\n                  </svg>`}\n              <div class=\"setpoint-value\">${this.setpointValueBlueNumbers}</div>\n            </div>`\n          : null}\n        <div class=\"value\">\n          <div class=\"value-hint-zero\">${this.hintZeros}</div>\n          <div class=\"value-blue\">${this.valueBlueNumbers}</div>\n          ${this.degree ? html`<div class=\"degree\">°</div>` : null}\n        </div>\n        <div class=\"label\">\n          <div class=\"tag\">${this.tag}</div>\n          <div class=\"unit\">${this.unit}</div>\n        </div>\n        ${this.hasSource\n          ? html`<div class=\"source\">${this.source}</div>`\n          : null}\n      </div>\n    `;\n  }\n\n  get setpointValueBlueNumbers(): string {\n    return this.setpoint.toFixed(0);\n  }\n\n  get valueBlueNumbers(): string {\n    return this.value.toFixed(0);\n  }\n\n  get hintZeros(): string {\n    if (this.value < 0) {\n      return '';\n    }\n    const nBlues = this.valueBlueNumbers.length;\n    const nHints = this.maxDigits - nBlues;\n    if (nHints > 0) {\n      return '0'.repeat(nHints);\n    }\n    return '';\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-instrument-field': ObcInstrumentField;\n  }\n}\n"],"names":["InstrumentFieldSize"],"mappings":"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"}

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

@@ -2,6 +2,7 @@ import { LitElement } from 'lit';
 export declare class ObcWatch extends LitElement {
     hideAllTickmarks: boolean;
     off: boolean;
+    padding: number;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

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

@@ -1 +1 @@
-{"version":3,"file":"watch.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/watch/watch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAuC1C,qBACa,QAAS,SAAQ,UAAU;IACsB,gBAAgB,UACpE;IACmB,GAAG,UAAS;IAE9B,MAAM;CAgEhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
+{"version":3,"file":"watch.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/watch/watch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAuC1C,qBACa,QAAS,SAAQ,UAAU;IACsB,gBAAgB,UACpE;IACmB,GAAG,UAAS;IACb,OAAO,SAAM;IAE9B,MAAM;CAmEhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

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

@@ -40,10 +40,13 @@ let ObcWatch = class extends LitElement {
     super(...arguments);
     this.hideAllTickmarks = false;
     this.off = false;
+    this.padding = 24;
   }
   render() {
+    const width = (176 + this.padding) * 2;
+    const viewBox = `-${width / 2} -${width / 2} ${width} ${width}`;
     return html`
-      <svg width="100%" height="100%" viewBox="-200 -200 400 400">
+      <svg width="100%" height="100%" viewBox=${viewBox}>
         <defs>
           <mask id="mask1" x="0" y="0" width="100%" height="100%">
             <rect x="-200" y="-200" width="400" height="400" fill="white" />
@@ -104,6 +107,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean })
 ], ObcWatch.prototype, "off", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcWatch.prototype, "padding", 2);
 ObcWatch = __decorateClass([
   customElement("obc-watch")
 ], ObcWatch);

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

@@ -1 +1 @@
-{"version":3,"file":"watch.js","sources":["../../../src/navigation-instruments/watch/watch.ts"],"sourcesContent":["import {LitElement, html, svg} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {circle} from '../../svghelpers';\n\nenum TickmarkType {\n  primary = 'primary',\n  secondary = 'secondary',\n  tertiary = 'tertiary',\n}\n\nfunction tickmarks(\n  tickmarksDeg: number,\n  tickmarkSize: TickmarkType,\n  colorName: string\n) {\n  let innerRadius = 200 - 24;\n  let outerRadius = 200;\n  if (tickmarkSize === TickmarkType.primary) {\n    throw new Error('Primary tickmarks are not supported');\n  }\n  if (tickmarkSize === TickmarkType.secondary) {\n    innerRadius = 164.5;\n    outerRadius = 172.5;\n  } else if (tickmarkSize === TickmarkType.tertiary) {\n    throw new Error('Tertiary tickmarks are not supported');\n  }\n\n  let svgPath = '';\n  for (let i = 0; i < 360; i += tickmarksDeg) {\n    const angle = (i * Math.PI) / 180;\n    const x1 = Math.cos(angle) * innerRadius;\n    const y1 = Math.sin(angle) * innerRadius;\n    const x2 = Math.cos(angle) * outerRadius;\n    const y2 = Math.sin(angle) * outerRadius;\n    svgPath += `M ${x1} ${y1} L ${x2} ${y2} `;\n  }\n  return svg`<path d=${svgPath} stroke=\"var(--${colorName}\" stroke-width=\"1\" vector-effect=\"non-scaling-stroke\"/>`;\n}\n\n@customElement('obc-watch')\nexport class ObcWatch extends LitElement {\n  @property({type: Boolean, attribute: 'hide-all-tickmarks'}) hideAllTickmarks =\n    false;\n  @property({type: Boolean}) off = false;\n\n  override render() {\n    return html`\n      <svg width=\"100%\" height=\"100%\" viewBox=\"-200 -200 400 400\">\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        ${this.off\n          ? null\n          : svg`\n        <circle\n          cx=\"0\"\n          cy=\"0\"\n          r=\"176\"\n          fill=\"var(--instrument-frame-primary-color)\"\n          mask=\"url(#mask1)\"\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        ${this.off\n          ? null\n          : circle('outerRing', {\n              radius: 352 / 2,\n              strokeWidth: 1,\n              strokeColor: 'var(--instrument-frame-tertiary-color)',\n              strokePosition: 'center',\n              fillColor: 'none',\n            })}\n        ${this.hideAllTickmarks\n          ? null\n          : tickmarks(\n              90,\n              TickmarkType.secondary,\n              'instrument-frame-tertiary-color'\n            )}\n        ${this.hideAllTickmarks\n          ? null\n          : svg`\n        <line\n          x2=\"0\"\n          x1=\"0\"\n          y2=\"-160\"\n          y1=\"-176\"\n          stroke=\"var(--instrument-frame-tertiary-color)\"\n          vector-effect=\"non-scaling-stroke\"\n        />\n        <line\n          x2=\"0\"\n          x1=\"0\"\n          y2=\"160\"\n          y1=\"176\"\n          stroke=\"var(--instrument-frame-tertiary-color)\"\n          vector-effect=\"non-scaling-stroke\"\n        />`}\n      </svg>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-watch': ObcWatch;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAUA,SAAS,UACP,cACA,cACA,WACA;AACA,MAAI,cAAc,MAAM;AACxB,MAAI,cAAc;AAClB,MAAI,iBAAiB,WAAsB;AACnC,UAAA,IAAI,MAAM,qCAAqC;AAAA,EACvD;AACA,MAAI,iBAAiB,aAAwB;AAC7B,kBAAA;AACA,kBAAA;AAAA,EAAA,WACL,iBAAiB,YAAuB;AAC3C,UAAA,IAAI,MAAM,sCAAsC;AAAA,EACxD;AAEA,MAAI,UAAU;AACd,WAAS,IAAI,GAAG,IAAI,KAAK,KAAK,cAAc;AACpC,UAAA,QAAS,IAAI,KAAK,KAAM;AAC9B,UAAM,KAAK,KAAK,IAAI,KAAK,IAAI;AAC7B,UAAM,KAAK,KAAK,IAAI,KAAK,IAAI;AAC7B,UAAM,KAAK,KAAK,IAAI,KAAK,IAAI;AAC7B,UAAM,KAAK,KAAK,IAAI,KAAK,IAAI;AAC7B,eAAW,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE;AAAA,EACxC;AACO,SAAA,cAAc,OAAO,kBAAkB,SAAS;AACzD;AAGa,IAAA,WAAN,cAAuB,WAAW;AAAA,EAAlC,cAAA;AAAA,UAAA,GAAA,SAAA;AAEH,SAAA,mBAAA;AAC+B,SAAA,MAAA;AAAA,EAAA;AAAA,EAExB,SAAS;AACT,WAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAQD,KAAK,MACH,OACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAOD;AAAA,UACD,OAAO,aAAa;AAAA,MACpB,QAAQ,MAAM;AAAA,MACd,aAAa;AAAA,MACb,aAAa;AAAA,MACb,gBAAgB;AAAA,MAChB,WAAW;AAAA,IAAA,CACZ,CAAC;AAAA,UACA,KAAK,MACH,OACA,OAAO,aAAa;AAAA,MAClB,QAAQ,MAAM;AAAA,MACd,aAAa;AAAA,MACb,aAAa;AAAA,MACb,gBAAgB;AAAA,MAChB,WAAW;AAAA,IAAA,CACZ,CAAC;AAAA,UACJ,KAAK,mBACH,OACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,IAAA,CACD;AAAA,UACH,KAAK,mBACH,OACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAgBD;AAAA;AAAA;AAAA,EAGT;AACF;AApE8D,gBAAA;AAAA,EAA3D,SAAS,EAAC,MAAM,SAAS,WAAW,sBAAqB;AAAA,GAD/C,SACiD,WAAA,oBAAA,CAAA;AAEjC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,SAAQ;AAAA,GAHd,SAGgB,WAAA,OAAA,CAAA;AAHhB,WAAN,gBAAA;AAAA,EADN,cAAc,WAAW;AAAA,GACb,QAAA;"}
+{"version":3,"file":"watch.js","sources":["../../../src/navigation-instruments/watch/watch.ts"],"sourcesContent":["import {LitElement, html, svg} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {circle} from '../../svghelpers';\n\nenum TickmarkType {\n  primary = 'primary',\n  secondary = 'secondary',\n  tertiary = 'tertiary',\n}\n\nfunction tickmarks(\n  tickmarksDeg: number,\n  tickmarkSize: TickmarkType,\n  colorName: string\n) {\n  let innerRadius = 200 - 24;\n  let outerRadius = 200;\n  if (tickmarkSize === TickmarkType.primary) {\n    throw new Error('Primary tickmarks are not supported');\n  }\n  if (tickmarkSize === TickmarkType.secondary) {\n    innerRadius = 164.5;\n    outerRadius = 172.5;\n  } else if (tickmarkSize === TickmarkType.tertiary) {\n    throw new Error('Tertiary tickmarks are not supported');\n  }\n\n  let svgPath = '';\n  for (let i = 0; i < 360; i += tickmarksDeg) {\n    const angle = (i * Math.PI) / 180;\n    const x1 = Math.cos(angle) * innerRadius;\n    const y1 = Math.sin(angle) * innerRadius;\n    const x2 = Math.cos(angle) * outerRadius;\n    const y2 = Math.sin(angle) * outerRadius;\n    svgPath += `M ${x1} ${y1} L ${x2} ${y2} `;\n  }\n  return svg`<path d=${svgPath} stroke=\"var(--${colorName}\" stroke-width=\"1\" vector-effect=\"non-scaling-stroke\"/>`;\n}\n\n@customElement('obc-watch')\nexport class ObcWatch extends LitElement {\n  @property({type: Boolean, attribute: 'hide-all-tickmarks'}) hideAllTickmarks =\n    false;\n  @property({type: Boolean}) off = false;\n  @property({type: Number}) padding = 24;\n\n  override render() {\n    const width = (176 + this.padding) * 2;\n    const viewBox = `-${width / 2} -${width / 2} ${width} ${width}`;\n\n    return html`\n      <svg width=\"100%\" height=\"100%\" viewBox=${viewBox}>\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        ${this.off\n          ? null\n          : svg`\n        <circle\n          cx=\"0\"\n          cy=\"0\"\n          r=\"176\"\n          fill=\"var(--instrument-frame-primary-color)\"\n          mask=\"url(#mask1)\"\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        ${this.off\n          ? null\n          : circle('outerRing', {\n              radius: 352 / 2,\n              strokeWidth: 1,\n              strokeColor: 'var(--instrument-frame-tertiary-color)',\n              strokePosition: 'center',\n              fillColor: 'none',\n            })}\n        ${this.hideAllTickmarks\n          ? null\n          : tickmarks(\n              90,\n              TickmarkType.secondary,\n              'instrument-frame-tertiary-color'\n            )}\n        ${this.hideAllTickmarks\n          ? null\n          : svg`\n        <line\n          x2=\"0\"\n          x1=\"0\"\n          y2=\"-160\"\n          y1=\"-176\"\n          stroke=\"var(--instrument-frame-tertiary-color)\"\n          vector-effect=\"non-scaling-stroke\"\n        />\n        <line\n          x2=\"0\"\n          x1=\"0\"\n          y2=\"160\"\n          y1=\"176\"\n          stroke=\"var(--instrument-frame-tertiary-color)\"\n          vector-effect=\"non-scaling-stroke\"\n        />`}\n      </svg>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-watch': ObcWatch;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAUA,SAAS,UACP,cACA,cACA,WACA;AACA,MAAI,cAAc,MAAM;AACxB,MAAI,cAAc;AAClB,MAAI,iBAAiB,WAAsB;AACnC,UAAA,IAAI,MAAM,qCAAqC;AAAA,EACvD;AACA,MAAI,iBAAiB,aAAwB;AAC7B,kBAAA;AACA,kBAAA;AAAA,EAAA,WACL,iBAAiB,YAAuB;AAC3C,UAAA,IAAI,MAAM,sCAAsC;AAAA,EACxD;AAEA,MAAI,UAAU;AACd,WAAS,IAAI,GAAG,IAAI,KAAK,KAAK,cAAc;AACpC,UAAA,QAAS,IAAI,KAAK,KAAM;AAC9B,UAAM,KAAK,KAAK,IAAI,KAAK,IAAI;AAC7B,UAAM,KAAK,KAAK,IAAI,KAAK,IAAI;AAC7B,UAAM,KAAK,KAAK,IAAI,KAAK,IAAI;AAC7B,UAAM,KAAK,KAAK,IAAI,KAAK,IAAI;AAC7B,eAAW,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE;AAAA,EACxC;AACO,SAAA,cAAc,OAAO,kBAAkB,SAAS;AACzD;AAGa,IAAA,WAAN,cAAuB,WAAW;AAAA,EAAlC,cAAA;AAAA,UAAA,GAAA,SAAA;AAEH,SAAA,mBAAA;AAC+B,SAAA,MAAA;AACG,SAAA,UAAA;AAAA,EAAA;AAAA,EAE3B,SAAS;AACV,UAAA,SAAS,MAAM,KAAK,WAAW;AAC/B,UAAA,UAAU,IAAI,QAAQ,CAAC,KAAK,QAAQ,CAAC,IAAI,KAAK,IAAI,KAAK;AAEtD,WAAA;AAAA,gDACqC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAO7C,KAAK,MACH,OACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAOD;AAAA,UACD,OAAO,aAAa;AAAA,MACpB,QAAQ,MAAM;AAAA,MACd,aAAa;AAAA,MACb,aAAa;AAAA,MACb,gBAAgB;AAAA,MAChB,WAAW;AAAA,IAAA,CACZ,CAAC;AAAA,UACA,KAAK,MACH,OACA,OAAO,aAAa;AAAA,MAClB,QAAQ,MAAM;AAAA,MACd,aAAa;AAAA,MACb,aAAa;AAAA,MACb,gBAAgB;AAAA,MAChB,WAAW;AAAA,IAAA,CACZ,CAAC;AAAA,UACJ,KAAK,mBACH,OACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,IAAA,CACD;AAAA,UACH,KAAK,mBACH,OACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAgBD;AAAA;AAAA;AAAA,EAGT;AACF;AAxE8D,gBAAA;AAAA,EAA3D,SAAS,EAAC,MAAM,SAAS,WAAW,sBAAqB;AAAA,GAD/C,SACiD,WAAA,oBAAA,CAAA;AAEjC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,SAAQ;AAAA,GAHd,SAGgB,WAAA,OAAA,CAAA;AACD,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAJb,SAIe,WAAA,WAAA,CAAA;AAJf,WAAN,gBAAA;AAAA,EADN,cAAc,WAAW;AAAA,GACb,QAAA;"}

package/dist/storybook-util.d.ts

@@ -5,7 +5,8 @@ import './icons/icon-04-day';
 import './icons/icon-04-brilliance-low';
 import './icons/icon-04-brilliance-high';
 import './icons/icon-06-ship';
-import { TemplateResult } from 'lit';
+import { HTMLTemplateResult, TemplateResult } from 'lit';
 export declare const iconIds: string[];
 export declare function iconIdToIconHtml(id: string, attributes?: Record<string, string>): TemplateResult;
+export declare function crossDecorator(story: () => unknown): HTMLTemplateResult;
 //# sourceMappingURL=storybook-util.d.ts.map

package/dist/storybook-util.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"storybook-util.d.ts","sourceRoot":"","sources":["../src/storybook-util.ts"],"names":[],"mappings":"AAAA,OAAO,6BAA6B,CAAC;AACrC,OAAO,wBAAwB,CAAC;AAChC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,gCAAgC,CAAC;AACxC,OAAO,iCAAiC,CAAC;AACzC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,EAAC,cAAc,EAAO,MAAM,KAAK,CAAC;AAGzC,eAAO,MAAM,OAAO,UAQZ,CAAC;AAET,wBAAgB,gBAAgB,CAC9B,EAAE,EAAE,MAAM,EACV,UAAU,GAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAM,GACtC,cAAc,CAyBhB"}
+{"version":3,"file":"storybook-util.d.ts","sourceRoot":"","sources":["../src/storybook-util.ts"],"names":[],"mappings":"AAAA,OAAO,6BAA6B,CAAC;AACrC,OAAO,wBAAwB,CAAC;AAChC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,gCAAgC,CAAC;AACxC,OAAO,iCAAiC,CAAC;AACzC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,EAAC,kBAAkB,EAAE,cAAc,EAAO,MAAM,KAAK,CAAC;AAG7D,eAAO,MAAM,OAAO,UAQZ,CAAC;AAET,wBAAgB,gBAAgB,CAC9B,EAAE,EAAE,MAAM,EACV,UAAU,GAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAM,GACtC,cAAc,CAyBhB;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,OAAO,GAAG,kBAAkB,CAsCvE"}

package/dist/storybook-util.js

@@ -42,7 +42,47 @@ function iconIdToIconHtml(id, attributes = {}) {
       throw new Error(`Unknown icon id: ${id}`);
   }
 }
+function crossDecorator(story) {
+  return html` <style>
+      .wrapper {
+        width: 100%;
+        height: 100vh;
+        position: relative;
+      }
+
+      .wrapper > * {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+      }
+
+      .wrapper::before {
+        content: '';
+        display: block;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: 1px;
+        left: calc(50% - 0.5px);
+        background-color: rgb(0, 0, 0, 0.3);
+      }
+
+      .wrapper::after {
+        content: '';
+        display: block;
+        position: absolute;
+        left: 0;
+        right: 0;
+        height: 1px;
+        top: calc(50% - 0.5px);
+        background-color: rgb(0, 0, 0, 0.3);
+        z-index: -100;
+      }
+    </style>
+    <div class="wrapper">${story()}</div>`;
+}
 export {
+  crossDecorator,
   iconIdToIconHtml,
   iconIds
 };

package/dist/storybook-util.js.map

@@ -1 +1 @@
-{"version":3,"file":"storybook-util.js","sources":["../src/storybook-util.ts"],"sourcesContent":["import './icons/icon-01-placeholder';\nimport './icons/icon-01-search';\nimport './icons/icon-06-radar';\nimport './icons/icon-04-day';\nimport './icons/icon-04-brilliance-low';\nimport './icons/icon-04-brilliance-high';\nimport './icons/icon-06-ship';\nimport {TemplateResult, html} from 'lit';\nimport {spread} from '@open-wc/lit-helpers';\n\nexport const iconIds = [\n  '01-placeholder',\n  '01-search',\n  '04-brilliance-low',\n  '04-brilliance-high',\n  '06-radar',\n  '04-day',\n  '06-ship',\n].sort();\n\nexport function iconIdToIconHtml(\n  id: string,\n  attributes: Record<string, string> = {}\n): TemplateResult {\n  switch (id) {\n    case '01-placeholder':\n      return html`<obi-01-placeholder\n        ${spread(attributes)}\n      ></obi-01-placeholder>`;\n    case '01-search':\n      return html`<obi-01-search ${spread(attributes)}></obi-01-search>`;\n    case '04-day':\n      return html`<obi-04-day ${spread(attributes)}></obi-04-day>`;\n    case '04-brilliance-low':\n      return html`<obi-04-brilliance-low\n        ${spread(attributes)}\n      ></obi-04-brilliance-low>`;\n    case '04-brilliance-high':\n      return html`<obi-04-brilliance-high\n        ${spread(attributes)}\n      ></obi-04-brilliance-high>`;\n    case '06-radar':\n      return html`<obi-06-radar ${spread(attributes)}></obi-06-radar>`;\n    case '06-ship':\n      return html`<obi-06-ship ${spread(attributes)}></obi-06-ship>`;\n    default:\n      throw new Error(`Unknown icon id: ${id}`);\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;AAUO,MAAM,UAAU;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,EAAE,KAAK;AAEA,SAAS,iBACd,IACA,aAAqC,IACrB;AAChB,UAAQ,IAAI;AAAA,IACV,KAAK;AACI,aAAA;AAAA,UACH,OAAO,UAAU,CAAC;AAAA;AAAA,IAExB,KAAK;AACI,aAAA,sBAAsB,OAAO,UAAU,CAAC;AAAA,IACjD,KAAK;AACI,aAAA,mBAAmB,OAAO,UAAU,CAAC;AAAA,IAC9C,KAAK;AACI,aAAA;AAAA,UACH,OAAO,UAAU,CAAC;AAAA;AAAA,IAExB,KAAK;AACI,aAAA;AAAA,UACH,OAAO,UAAU,CAAC;AAAA;AAAA,IAExB,KAAK;AACI,aAAA,qBAAqB,OAAO,UAAU,CAAC;AAAA,IAChD,KAAK;AACI,aAAA,oBAAoB,OAAO,UAAU,CAAC;AAAA,IAC/C;AACE,YAAM,IAAI,MAAM,oBAAoB,EAAE,EAAE;AAAA,EAC5C;AACF;"}
+{"version":3,"file":"storybook-util.js","sources":["../src/storybook-util.ts"],"sourcesContent":["import './icons/icon-01-placeholder';\nimport './icons/icon-01-search';\nimport './icons/icon-06-radar';\nimport './icons/icon-04-day';\nimport './icons/icon-04-brilliance-low';\nimport './icons/icon-04-brilliance-high';\nimport './icons/icon-06-ship';\nimport {HTMLTemplateResult, TemplateResult, html} from 'lit';\nimport {spread} from '@open-wc/lit-helpers';\n\nexport const iconIds = [\n  '01-placeholder',\n  '01-search',\n  '04-brilliance-low',\n  '04-brilliance-high',\n  '06-radar',\n  '04-day',\n  '06-ship',\n].sort();\n\nexport function iconIdToIconHtml(\n  id: string,\n  attributes: Record<string, string> = {}\n): TemplateResult {\n  switch (id) {\n    case '01-placeholder':\n      return html`<obi-01-placeholder\n        ${spread(attributes)}\n      ></obi-01-placeholder>`;\n    case '01-search':\n      return html`<obi-01-search ${spread(attributes)}></obi-01-search>`;\n    case '04-day':\n      return html`<obi-04-day ${spread(attributes)}></obi-04-day>`;\n    case '04-brilliance-low':\n      return html`<obi-04-brilliance-low\n        ${spread(attributes)}\n      ></obi-04-brilliance-low>`;\n    case '04-brilliance-high':\n      return html`<obi-04-brilliance-high\n        ${spread(attributes)}\n      ></obi-04-brilliance-high>`;\n    case '06-radar':\n      return html`<obi-06-radar ${spread(attributes)}></obi-06-radar>`;\n    case '06-ship':\n      return html`<obi-06-ship ${spread(attributes)}></obi-06-ship>`;\n    default:\n      throw new Error(`Unknown icon id: ${id}`);\n  }\n}\n\nexport function crossDecorator(story: () => unknown): HTMLTemplateResult {\n  return html` <style>\n      .wrapper {\n        width: 100%;\n        height: 100vh;\n        position: relative;\n      }\n\n      .wrapper > * {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n      }\n\n      .wrapper::before {\n        content: '';\n        display: block;\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        width: 1px;\n        left: calc(50% - 0.5px);\n        background-color: rgb(0, 0, 0, 0.3);\n      }\n\n      .wrapper::after {\n        content: '';\n        display: block;\n        position: absolute;\n        left: 0;\n        right: 0;\n        height: 1px;\n        top: calc(50% - 0.5px);\n        background-color: rgb(0, 0, 0, 0.3);\n        z-index: -100;\n      }\n    </style>\n    <div class=\"wrapper\">${story()}</div>`;\n}\n"],"names":[],"mappings":";;;;;;;;;AAUO,MAAM,UAAU;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,EAAE,KAAK;AAEA,SAAS,iBACd,IACA,aAAqC,IACrB;AAChB,UAAQ,IAAI;AAAA,IACV,KAAK;AACI,aAAA;AAAA,UACH,OAAO,UAAU,CAAC;AAAA;AAAA,IAExB,KAAK;AACI,aAAA,sBAAsB,OAAO,UAAU,CAAC;AAAA,IACjD,KAAK;AACI,aAAA,mBAAmB,OAAO,UAAU,CAAC;AAAA,IAC9C,KAAK;AACI,aAAA;AAAA,UACH,OAAO,UAAU,CAAC;AAAA;AAAA,IAExB,KAAK;AACI,aAAA;AAAA,UACH,OAAO,UAAU,CAAC;AAAA;AAAA,IAExB,KAAK;AACI,aAAA,qBAAqB,OAAO,UAAU,CAAC;AAAA,IAChD,KAAK;AACI,aAAA,oBAAoB,OAAO,UAAU,CAAC;AAAA,IAC/C;AACE,YAAM,IAAI,MAAM,oBAAoB,EAAE,EAAE;AAAA,EAC5C;AACF;AAEO,SAAS,eAAe,OAA0C;AAChE,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAoCkB,OAAO;AAClC;"}

package/new-component.ts

@@ -19,7 +19,11 @@ const name = await question(
   }
 );
 const componentType = await select('Type of component', {
-  choices: ['ui(input, label, tables)', 'instrument (compas, azimuth)'],
+  choices: [
+    'ui(input, label, tables)',
+    'instrument (compas, azimuth)',
+    'automation',
+  ],
 });
 const files = await multiselect('Create files', {
   choices: ['lit', 'css', 'storybook'],
@@ -29,9 +33,14 @@ const files = await multiselect('Create files', {
 // Convert name to kebab-case
 const componentName = name.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
 
-const parentDir = componentType.includes('ui')
-  ? 'components'
-  : 'navigation-instruments';
+let parentDir: string;
+if (componentType.includes('ui')) {
+  parentDir = 'components';
+} else if (componentType.includes('instrument')) {
+  parentDir = 'navigation-instruments';
+} else {
+  parentDir = 'automation';
+}
 const dir = path.join('src', parentDir, componentName);
 // Create directory
 fs.mkdirSync(dir);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oicl/openbridge-webcomponents",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "type": "module",
   "repository": {
     "type": "git",
@@ -35,9 +35,9 @@
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.9.0",
-    "@lit-labs/cli": "^0.6.2",
-    "@lit-labs/gen-wrapper-react": "^0.3.1",
-    "@lit-labs/gen-wrapper-vue": "^0.3.2",
+    "@lit-labs/cli": "^0.6.4",
+    "@lit-labs/gen-wrapper-react": "^0.3.2",
+    "@lit-labs/gen-wrapper-vue": "^0.3.3",
     "@open-wc/lit-helpers": "^0.7.0",
     "@storybook/addon-essentials": "^8.0.5",
     "@storybook/addon-interactions": "^8.0.5",
@@ -57,7 +57,7 @@
     "eslint-plugin-storybook": "^0.8.0",
     "figma-api": "^1.11.0",
     "jest-image-snapshot": "^6.2.0",
-    "lit-analyzer": "^2.0.2",
+    "lit-analyzer": "^2.0.3",
     "nodemon": "^3.0.2",
     "playwright": "^1.40.0",
     "postcss": "^8.4.36",