@oicl/openbridge-webcomponents 0.0.13 → 0.0.15

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

@@ -0,0 +1,20 @@
+import { SVGTemplateResult } from 'lit';
+export interface Tickmark {
+    angle: number;
+    type: TickmarkType;
+    text?: string;
+}
+export declare enum TickmarkType {
+    main = "main",
+    primary = "primary",
+    secondary = "secondary",
+    tertiary = "tertiary"
+}
+export declare enum TickmarkStyle {
+    hinted = "hinted",
+    regular = "regular",
+    enhanced = "enhanced"
+}
+export declare function tickmarkColor(style: TickmarkStyle): string;
+export declare function tickmark(angle: number, tickmarkSize: TickmarkType, style: TickmarkStyle, scale: number, text?: string): SVGTemplateResult | SVGTemplateResult[];
+//# sourceMappingURL=tickmark.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tickmark.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/watch/tickmark.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,iBAAiB,EAAM,MAAM,KAAK,CAAC;AAE3C,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,YAAY,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,oBAAY,YAAY;IACtB,IAAI,SAAS;IACb,OAAO,YAAY;IACnB,SAAS,cAAc;IACvB,QAAQ,aAAa;CACtB;AAED,oBAAY,aAAa;IACvB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,QAAQ,aAAa;CACtB;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,aAAa,GAAG,MAAM,CAQ1D;AAED,wBAAgB,QAAQ,CACtB,KAAK,EAAE,MAAM,EACb,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,aAAa,EACpB,KAAK,EAAE,MAAM,EACb,IAAI,CAAC,EAAE,MAAM,GACZ,iBAAiB,GAAG,iBAAiB,EAAE,CA8BzC"}

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

@@ -0,0 +1,60 @@
+import { svg } from "lit";
+var TickmarkType = /* @__PURE__ */ ((TickmarkType2) => {
+  TickmarkType2["main"] = "main";
+  TickmarkType2["primary"] = "primary";
+  TickmarkType2["secondary"] = "secondary";
+  TickmarkType2["tertiary"] = "tertiary";
+  return TickmarkType2;
+})(TickmarkType || {});
+var TickmarkStyle = /* @__PURE__ */ ((TickmarkStyle2) => {
+  TickmarkStyle2["hinted"] = "hinted";
+  TickmarkStyle2["regular"] = "regular";
+  TickmarkStyle2["enhanced"] = "enhanced";
+  return TickmarkStyle2;
+})(TickmarkStyle || {});
+function tickmarkColor(style) {
+  if (style === "hinted") {
+    return "var(--instrument-frame-tertiary-color)";
+  } else if (style === "regular") {
+    return "var(--instrument-tick-mark-tertiary-color)";
+  } else {
+    return "var(--instrument-tick-mark-primary-color)";
+  }
+}
+function tickmark(angle, tickmarkSize, style, scale, text) {
+  let innerRadius = 328 / 2;
+  let outerRadius = 368 / 2;
+  const textRadius = outerRadius + 18 / scale;
+  if (tickmarkSize === "secondary") {
+    innerRadius = 164.5;
+    outerRadius = 172.5;
+  } else if (tickmarkSize === "main") {
+    innerRadius = 320 / 2;
+    outerRadius = 368 / 2;
+  } else if (tickmarkSize === "tertiary") {
+    throw new Error("Tertiary tickmarks are not supported");
+  }
+  const colorName = tickmarkColor(style);
+  const rad = angle * Math.PI / 180;
+  const x1 = Math.sin(rad) * innerRadius;
+  const y1 = -Math.cos(rad) * innerRadius;
+  const x2 = Math.sin(rad) * outerRadius;
+  const y2 = -Math.cos(rad) * outerRadius;
+  const tick = svg`<line x1=${x1} y1=${y1} x2=${x2} y2=${y2} stroke=${colorName} stroke-width="1" vector-effect="non-scaling-stroke"/>`;
+  if (text) {
+    const textX = Math.sin(rad) * textRadius;
+    const textY = -Math.cos(rad) * textRadius;
+    return [
+      tick,
+      svg`<text x=${textX} y=${textY} class="label">${text}</text>`
+    ];
+  }
+  return tick;
+}
+export {
+  TickmarkStyle,
+  TickmarkType,
+  tickmark,
+  tickmarkColor
+};
+//# sourceMappingURL=tickmark.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tickmark.js","sources":["../../../src/navigation-instruments/watch/tickmark.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-tertiary-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  scale: number,\n  text?: string\n): SVGTemplateResult | SVGTemplateResult[] {\n  let innerRadius: number = 328 / 2;\n  let outerRadius: number = 368 / 2;\n  const textRadius = outerRadius + 18 / scale;\n  if (tickmarkSize === TickmarkType.secondary) {\n    innerRadius = 164.5;\n    outerRadius = 172.5;\n  } else if (tickmarkSize === TickmarkType.main) {\n    innerRadius = 320 / 2;\n    outerRadius = 368 / 2;\n  } else if (tickmarkSize === TickmarkType.tertiary) {\n    throw new Error('Tertiary tickmarks are not supported');\n  }\n  const colorName = tickmarkColor(style);\n\n  const rad = (angle * Math.PI) / 180;\n  const x1 = Math.sin(rad) * innerRadius;\n  const y1 = -Math.cos(rad) * innerRadius;\n  const x2 = Math.sin(rad) * outerRadius;\n  const y2 = -Math.cos(rad) * outerRadius;\n  const tick = svg`<line x1=${x1} y1=${y1} x2=${x2} y2=${y2} stroke=${colorName} stroke-width=\"1\" vector-effect=\"non-scaling-stroke\"/>`;\n  if (text) {\n    const textX = Math.sin(rad) * textRadius;\n    const textY = -Math.cos(rad) * textRadius;\n    return [\n      tick,\n      svg`<text x=${textX} y=${textY} class=\"label\">${text}</text>`,\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,OACA,MACyC;AACzC,MAAI,cAAsB,MAAM;AAChC,MAAI,cAAsB,MAAM;AAC1B,QAAA,aAAa,cAAc,KAAK;AACtC,MAAI,iBAAiB,aAAwB;AAC7B,kBAAA;AACA,kBAAA;AAAA,EAAA,WACL,iBAAiB,QAAmB;AAC7C,kBAAc,MAAM;AACpB,kBAAc,MAAM;AAAA,EAAA,WACX,iBAAiB,YAAuB;AAC3C,UAAA,IAAI,MAAM,sCAAsC;AAAA,EACxD;AACM,QAAA,YAAY,cAAc,KAAK;AAE/B,QAAA,MAAO,QAAQ,KAAK,KAAM;AAChC,QAAM,KAAK,KAAK,IAAI,GAAG,IAAI;AAC3B,QAAM,KAAK,CAAC,KAAK,IAAI,GAAG,IAAI;AAC5B,QAAM,KAAK,KAAK,IAAI,GAAG,IAAI;AAC3B,QAAM,KAAK,CAAC,KAAK,IAAI,GAAG,IAAI;AACtB,QAAA,OAAO,eAAe,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,SAAS;AAC7E,MAAI,MAAM;AACR,UAAM,QAAQ,KAAK,IAAI,GAAG,IAAI;AAC9B,UAAM,QAAQ,CAAC,KAAK,IAAI,GAAG,IAAI;AACxB,WAAA;AAAA,MACL;AAAA,MACA,cAAc,KAAK,MAAM,KAAK,kBAAkB,IAAI;AAAA,IAAA;AAAA,EAExD;AACO,SAAA;AACT;"}

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

@@ -0,0 +1,23 @@
+import { css } from "lit";
+const compentStyle = css`* {
+    box-sizing: border-box;
+}
+
+.label {
+    /* UI/Body */
+    font-family: 'Noto Sans';
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 370;
+    line-height: 24px;
+    /* 150% */
+    text-decoration: none;
+    font-size: calc(16px / var(--scale));
+    fill: var(--element-neutral-color);
+    alignment-baseline: middle;
+    text-anchor: middle;
+}`;
+export {
+  compentStyle as default
+};
+//# sourceMappingURL=watch.css.js.map

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

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

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

@@ -1,9 +1,23 @@
 import { LitElement } from 'lit';
+import { InstrumentState } from '../types';
+import { AngleAdviceRaw } from './advice';
+import { Tickmark } from './tickmark';
 export declare class ObcWatch extends LitElement {
-    hideAllTickmarks: boolean;
-    off: boolean;
+    state: InstrumentState;
+    angleSetpoint: number | undefined;
+    atAngleSetpoint: boolean;
     padding: number;
+    cutAngleStart: number | null;
+    cutAngleEnd: number | null;
+    roundOutsideCut: boolean;
+    roundInsideCut: boolean;
+    tickmarks: Tickmark[];
+    advices: AngleAdviceRaw[];
+    private _resizeController;
+    private watchCircle;
     render(): import("lit-html").TemplateResult<1>;
+    private renderSetpoint;
+    static styles: import("lit").CSSResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

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;IACb,OAAO,SAAM;IAE9B,MAAM;CAmEhB;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,EACL,UAAU,EAMX,MAAM,KAAK,CAAC;AAIb,OAAO,EAAC,eAAe,EAAC,MAAM,UAAU,CAAC;AAGzC,OAAO,EAAC,cAAc,EAAe,MAAM,UAAU,CAAC;AACtD,OAAO,EAAC,QAAQ,EAA0B,MAAM,YAAY,CAAC;AAE7D,qBACa,QAAS,SAAQ,UAAU;IACZ,KAAK,EAAE,eAAe,CAA6B;IACnD,aAAa,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,eAAe,EAAE,OAAO,CAAS;IAClC,OAAO,SAAM;IACb,aAAa,EAAE,MAAM,GAAG,IAAI,CAAQ;IACpC,WAAW,EAAE,MAAM,GAAG,IAAI,CAAQ;IACjC,eAAe,UAAS;IACxB,cAAc,UAAS;IACP,SAAS,EAAE,QAAQ,EAAE,CAAM;IAC3B,OAAO,EAAE,cAAc,EAAE,CAAM;IAI1E,OAAO,CAAC,iBAAiB,CAAkC;IAE3D,OAAO,CAAC,WAAW;IA2DV,MAAM;IAuBf,OAAO,CAAC,cAAc;IA8CtB,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

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

@@ -1,6 +1,12 @@
-import { LitElement, html, svg } from "lit";
+import { unsafeCSS, LitElement, svg, nothing, html } from "lit";
 import { property, customElement } from "lit/decorators.js";
 import { circle } from "../../svghelpers/circle.js";
+import { roundedArch } from "../../svghelpers/roundedArch.js";
+import { InstrumentState } from "../types.js";
+import compentStyle from "./watch.css.js";
+import { ResizeController } from "@lit-labs/observers/resize-controller.js";
+import { renderAdvice } from "./advice.js";
+import { tickmark, TickmarkStyle } from "./tickmark.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -12,104 +18,164 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
-function tickmarks(tickmarksDeg, tickmarkSize, colorName) {
-  let innerRadius = 200 - 24;
-  let outerRadius = 200;
-  if (tickmarkSize === "primary") {
-    throw new Error("Primary tickmarks are not supported");
-  }
-  if (tickmarkSize === "secondary") {
-    innerRadius = 164.5;
-    outerRadius = 172.5;
-  } else if (tickmarkSize === "tertiary") {
-    throw new Error("Tertiary tickmarks are not supported");
-  }
-  let svgPath = "";
-  for (let i = 0; i < 360; i += tickmarksDeg) {
-    const angle = i * Math.PI / 180;
-    const x1 = Math.cos(angle) * innerRadius;
-    const y1 = Math.sin(angle) * innerRadius;
-    const x2 = Math.cos(angle) * outerRadius;
-    const y2 = Math.sin(angle) * outerRadius;
-    svgPath += `M ${x1} ${y1} L ${x2} ${y2} `;
-  }
-  return svg`<path d=${svgPath} stroke="var(--${colorName}" stroke-width="1" vector-effect="non-scaling-stroke"/>`;
-}
 let ObcWatch = class extends LitElement {
   constructor() {
     super(...arguments);
-    this.hideAllTickmarks = false;
-    this.off = false;
+    this.state = InstrumentState.inCommand;
+    this.atAngleSetpoint = false;
     this.padding = 24;
+    this.cutAngleStart = null;
+    this.cutAngleEnd = null;
+    this.roundOutsideCut = false;
+    this.roundInsideCut = false;
+    this.tickmarks = [];
+    this.advices = [];
+    this._resizeController = new ResizeController(this, {});
   }
-  render() {
-    const width = (176 + this.padding) * 2;
-    const viewBox = `-${width / 2} -${width / 2} ${width} ${width}`;
-    return html`
-      <svg width="100%" height="100%" viewBox=${viewBox}>
+  watchCircle() {
+    if (this.cutAngleStart === null || this.cutAngleEnd === null) {
+      return svg`
         <defs>
           <mask id="mask1" x="0" y="0" width="100%" height="100%">
             <rect x="-200" y="-200" width="400" height="400" fill="white" />
             <circle cx="0" cy="0" r="160" fill="black" />
           </mask>
         </defs>
-        ${this.off ? null : svg`
+        ${this.state === InstrumentState.off ? null : svg`
         <circle
           cx="0"
           cy="0"
-          r="176"
+          r="184"
           fill="var(--instrument-frame-primary-color)"
           mask="url(#mask1)"
         />`}
         ${circle("innerRing", {
-      radius: 320 / 2,
-      strokeWidth: 1,
-      strokeColor: "var(--instrument-frame-tertiary-color)",
-      strokePosition: "center",
-      fillColor: "none"
-    })}
-        ${this.off ? null : circle("outerRing", {
-      radius: 352 / 2,
-      strokeWidth: 1,
-      strokeColor: "var(--instrument-frame-tertiary-color)",
-      strokePosition: "center",
-      fillColor: "none"
-    })}
-        ${this.hideAllTickmarks ? null : tickmarks(
-      90,
-      "secondary",
-      "instrument-frame-tertiary-color"
-    )}
-        ${this.hideAllTickmarks ? null : svg`
-        <line
-          x2="0"
-          x1="0"
-          y2="-160"
-          y1="-176"
-          stroke="var(--instrument-frame-tertiary-color)"
-          vector-effect="non-scaling-stroke"
-        />
-        <line
-          x2="0"
-          x1="0"
-          y2="160"
-          y1="176"
-          stroke="var(--instrument-frame-tertiary-color)"
-          vector-effect="non-scaling-stroke"
-        />`}
+        radius: 320 / 2,
+        strokeWidth: 1,
+        strokeColor: "var(--instrument-frame-tertiary-color)",
+        strokePosition: "center",
+        fillColor: "none"
+      })}
+        ${this.state === InstrumentState.off ? null : circle("outerRing", {
+        radius: 368 / 2,
+        strokeWidth: 1,
+        strokeColor: "var(--instrument-frame-tertiary-color)",
+        strokePosition: "center",
+        fillColor: "none"
+      })}
+    `;
+    } else {
+      const R = 184;
+      const r = 160;
+      const svgPath = roundedArch({
+        startAngle: this.cutAngleStart,
+        endAngle: this.cutAngleEnd,
+        R,
+        r,
+        roundOutsideCut: this.roundOutsideCut,
+        roundInsideCut: this.roundInsideCut
+      });
+      return svg`
+        <path d=${svgPath} fill="var(--instrument-frame-primary-color)" 
+        stroke="var(--instrument-frame-tertiary-color)"
+          vector-effect="non-scaling-stroke"/>
+      `;
+    }
+  }
+  render() {
+    const width = (176 + this.padding) * 2;
+    const viewBox = `-${width / 2} -${width / 2} ${width} ${width}`;
+    const angleSetpoint = this.renderSetpoint();
+    const scale = this.clientWidth / width;
+    const tickmarks = this.tickmarks.map(
+      (t) => tickmark(t.angle, t.type, TickmarkStyle.hinted, scale, t.text)
+    );
+    const advices = this.advices ? this.advices.map((a) => renderAdvice(a)) : nothing;
+    return html`
+      <svg
+        width="100%"
+        height="100%"
+        viewBox=${viewBox}
+        style="--scale: ${scale}"
+      >
+        ${this.watchCircle()} ${tickmarks} ${advices} ${angleSetpoint}
       </svg>
     `;
   }
+  renderSetpoint() {
+    let setPointColor = "var(--instrument-enhanced-primary-color)";
+    if (this.atAngleSetpoint) {
+      setPointColor = "var(--instrument-enhanced-secondary-color)";
+    }
+    if (this.state === InstrumentState.active) {
+      setPointColor = "var(--instrument-regular-primary-color)";
+      if (this.atAngleSetpoint) {
+        setPointColor = "var(--instrument-regular-secondary-color)";
+      }
+    } else if (this.state === InstrumentState.loading) {
+      setPointColor = "var(--instrument-frame-tertiary-color)";
+    } else if (this.state === InstrumentState.off) {
+      setPointColor = "var(--instrument-frame-tertiary-color)";
+    }
+    if (this.angleSetpoint === void 0) {
+      return nothing;
+    } else {
+      let path;
+      if (this.state === InstrumentState.inCommand) {
+        path = "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";
+      } else {
+        path = "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";
+      }
+      return svg`
+        <defs>
+          <g id="setpoint">
+            <path fill-rule="evenodd" clip-rule="evenodd" transform="translate(-24 12) rotate(-90)" d=${path} vector-effect="non-scaling-stroke"/>
+          </g>
+          <mask id="setpointMask">
+            <rect x="-20" y="-20" width="50" height="50" fill="white" />
+            <use href="#setpoint" fill="black" />
+          </mask>
+        </defs>
+        <g transform="rotate(${this.angleSetpoint + 90}) translate(-168 0) ">
+          <use href="#setpoint" fill=${setPointColor} stroke-width="0" />
+          
+          <use href="#setpoint" vector-effect="non-scaling-stroke" fill="none" stroke="var(--border-silhouette-color)" stroke-width="2" stroke-linejoin="round" mask="url(#setpointMask)" />
+        </g>
+      `;
+    }
+  }
 };
+ObcWatch.styles = unsafeCSS(compentStyle);
+__decorateClass([
+  property({ type: String })
+], ObcWatch.prototype, "state", 2);
 __decorateClass([
-  property({ type: Boolean, attribute: "hide-all-tickmarks" })
-], ObcWatch.prototype, "hideAllTickmarks", 2);
+  property({ type: Number })
+], ObcWatch.prototype, "angleSetpoint", 2);
 __decorateClass([
   property({ type: Boolean })
-], ObcWatch.prototype, "off", 2);
+], ObcWatch.prototype, "atAngleSetpoint", 2);
 __decorateClass([
   property({ type: Number })
 ], ObcWatch.prototype, "padding", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcWatch.prototype, "cutAngleStart", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcWatch.prototype, "cutAngleEnd", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcWatch.prototype, "roundOutsideCut", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcWatch.prototype, "roundInsideCut", 2);
+__decorateClass([
+  property({ type: Array, attribute: false })
+], ObcWatch.prototype, "tickmarks", 2);
+__decorateClass([
+  property({ type: Array, attribute: false })
+], ObcWatch.prototype, "advices", 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  @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;"}
+{"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';\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\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  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    return html`\n      <svg\n        width=\"100%\"\n        height=\"100%\"\n        viewBox=${viewBox}\n        style=\"--scale: ${scale}\"\n      >\n        ${this.watchCircle()} ${tickmarks} ${advices} ${angleSetpoint}\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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"}

package/dist/storybook-util.d.ts

@@ -5,7 +5,14 @@ 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;
+export declare function widthDecorator(story: () => unknown, context: {
+    args: {
+        width: number;
+    };
+}): HTMLTemplateResult;
+export declare function beta6Decorator(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;AAED,wBAAgB,cAAc,CAC5B,KAAK,EAAE,MAAM,OAAO,EACpB,OAAO,EAAE;IAAC,IAAI,EAAE;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,CAAA;CAAC,GAC/B,kBAAkB,CAOpB;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,OAAO,GAAG,kBAAkB,CAyBvE"}

package/dist/storybook-util.js

@@ -42,8 +42,84 @@ 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>`;
+}
+function widthDecorator(story, context) {
+  return html` <div
+    class="wrapper"
+    style="width: ${context.args.width}px; height: ${context.args.width}px"
+  >
+    ${story()}
+  </div>`;
+}
+function beta6Decorator(story) {
+  return html`
+    <div
+      style="
+  border-radius: 100px; 
+  background-color: var(--instrument-enhanced-primary-color); 
+  color: var(--instrument-frame-primary-color); 
+  height: 32px; 
+  padding: 0 24px; 
+  box-sizing: border-box; 
+  width: fit-content; 
+  display: grid; 
+  place-content: center;
+  font-family: 'Noto Sans';
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 570;
+  line-height: 24px; /* 150% */
+  margin-bottom: 64px;
+"
+    >
+      Beta 6.0
+    </div>
+    ${story()}
+  `;
+}
 export {
+  beta6Decorator,
+  crossDecorator,
   iconIdToIconHtml,
-  iconIds
+  iconIds,
+  widthDecorator
 };
 //# sourceMappingURL=storybook-util.js.map

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\nexport function widthDecorator(\n  story: () => unknown,\n  context: {args: {width: number}}\n): HTMLTemplateResult {\n  return html` <div\n    class=\"wrapper\"\n    style=\"width: ${context.args.width}px; height: ${context.args.width}px\"\n  >\n    ${story()}\n  </div>`;\n}\n\nexport function beta6Decorator(story: () => unknown): HTMLTemplateResult {\n  return html`\n    <div\n      style=\"\n  border-radius: 100px; \n  background-color: var(--instrument-enhanced-primary-color); \n  color: var(--instrument-frame-primary-color); \n  height: 32px; \n  padding: 0 24px; \n  box-sizing: border-box; \n  width: fit-content; \n  display: grid; \n  place-content: center;\n  font-family: 'Noto Sans';\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 570;\n  line-height: 24px; /* 150% */\n  margin-bottom: 64px;\n\"\n    >\n      Beta 6.0\n    </div>\n    ${story()}\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;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;AAEgB,SAAA,eACd,OACA,SACoB;AACb,SAAA;AAAA;AAAA,oBAEW,QAAQ,KAAK,KAAK,eAAe,QAAQ,KAAK,KAAK;AAAA;AAAA,MAEjE,OAAO;AAAA;AAEb;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,MAsBH,OAAO;AAAA;AAEb;"}

package/dist/svghelpers/roundedArch.d.ts

@@ -0,0 +1,9 @@
+export declare function roundedArch({ startAngle, endAngle, r, R, roundOutsideCut, roundInsideCut, }: {
+    startAngle: number;
+    R: number;
+    r: number;
+    endAngle: number;
+    roundOutsideCut: boolean;
+    roundInsideCut: boolean;
+}): string;
+//# sourceMappingURL=roundedArch.d.ts.map

package/dist/svghelpers/roundedArch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"roundedArch.d.ts","sourceRoot":"","sources":["../../src/svghelpers/roundedArch.ts"],"names":[],"mappings":"AAAA,wBAAgB,WAAW,CAAC,EAC1B,UAAU,EACV,QAAQ,EACR,CAAC,EACD,CAAC,EACD,eAAe,EACf,cAAc,GACf,EAAE;IACD,UAAU,EAAE,MAAM,CAAC;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,QAAQ,EAAE,MAAM,CAAC;IACjB,eAAe,EAAE,OAAO,CAAC;IACzB,cAAc,EAAE,OAAO,CAAC;CACzB,UA8DA"}