@oicl/openbridge-webcomponents 2.1.0-next.6 → 2.1.0-next.7

package/dist/charthelpers/label-threshold.d.ts

@@ -1,6 +1,6 @@
 /** What a chart does when its canvas is resized. */
 export interface LabelThresholdCallbacks {
-    /** The resize crossed the threshold. */
+    /** The resize crossed the threshold, or gave the canvas its first size. */
     rebuild(): void;
     /** The resize stayed on one side of it. */
     update(): void;
@@ -11,9 +11,14 @@ export interface LabelThresholdCallbacks {
  * therefore needs a rebuild, while every other resize is an in-place
  * update. This owns the which-side state; the chart owns the decision.
  *
+ * A chart created while its canvas had no size (in a hidden container) is
+ * also rebuilt once, when the canvas first gets one: Chart.js keeps layout
+ * state from that empty first pass, and a resize leaves the plot a pixel off
+ * a chart created at its real size.
+ *
  * @param target - The chart's canvas. A detached target is ignored: it has no size and no chart to serve.
  * @param isAboveThreshold - The chart's own test, read once now and after every resize.
- * @param callbacks - `rebuild` on a crossing, `update` otherwise.
+ * @param callbacks - `rebuild` on a crossing or a first size, `update` otherwise.
  * @returns The observer, for the chart to disconnect in `disconnectedCallback`.
  */
 export declare function observeLabelThreshold(target: Element, isAboveThreshold: () => boolean, callbacks: LabelThresholdCallbacks): ResizeObserver;

package/dist/charthelpers/label-threshold.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"label-threshold.d.ts","sourceRoot":"","sources":["../../src/charthelpers/label-threshold.ts"],"names":[],"mappings":"AAAA,oDAAoD;AACpD,MAAM,WAAW,uBAAuB;IACtC,wCAAwC;IACxC,OAAO,IAAI,IAAI,CAAC;IAChB,2CAA2C;IAC3C,MAAM,IAAI,IAAI,CAAC;CAChB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,qBAAqB,CACnC,MAAM,EAAE,OAAO,EACf,gBAAgB,EAAE,MAAM,OAAO,EAC/B,SAAS,EAAE,uBAAuB,GACjC,cAAc,CAehB"}
+{"version":3,"file":"label-threshold.d.ts","sourceRoot":"","sources":["../../src/charthelpers/label-threshold.ts"],"names":[],"mappings":"AAKA,oDAAoD;AACpD,MAAM,WAAW,uBAAuB;IACtC,2EAA2E;IAC3E,OAAO,IAAI,IAAI,CAAC;IAChB,2CAA2C;IAC3C,MAAM,IAAI,IAAI,CAAC;CAChB;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,qBAAqB,CACnC,MAAM,EAAE,OAAO,EACf,gBAAgB,EAAE,MAAM,OAAO,EAC/B,SAAS,EAAE,uBAAuB,GACjC,cAAc,CAkBhB"}

package/dist/charthelpers/label-threshold.js

@@ -1,23 +1,35 @@
 //#region src/charthelpers/label-threshold.ts
+function hasSize(target) {
+	const { width, height } = target.getBoundingClientRect();
+	return width > 0 && height > 0;
+}
 /**
 * A chart installs its label plugins at creation time, from which side of
 * the label threshold the canvas is on. A resize that crosses the threshold
 * therefore needs a rebuild, while every other resize is an in-place
 * update. This owns the which-side state; the chart owns the decision.
 *
+* A chart created while its canvas had no size (in a hidden container) is
+* also rebuilt once, when the canvas first gets one: Chart.js keeps layout
+* state from that empty first pass, and a resize leaves the plot a pixel off
+* a chart created at its real size.
+*
 * @param target - The chart's canvas. A detached target is ignored: it has no size and no chart to serve.
 * @param isAboveThreshold - The chart's own test, read once now and after every resize.
-* @param callbacks - `rebuild` on a crossing, `update` otherwise.
+* @param callbacks - `rebuild` on a crossing or a first size, `update` otherwise.
 * @returns The observer, for the chart to disconnect in `disconnectedCallback`.
 */
 function observeLabelThreshold(target, isAboveThreshold, callbacks) {
 	let wasAbove = isAboveThreshold();
+	let hadSize = hasSize(target);
 	const observer = new ResizeObserver(() => {
 		if (!target.isConnected) return;
 		const isAbove = isAboveThreshold();
 		const crossed = isAbove !== wasAbove;
 		wasAbove = isAbove;
-		if (crossed) callbacks.rebuild();
+		const gotSize = !hadSize && hasSize(target);
+		hadSize = hasSize(target);
+		if (crossed || gotSize) callbacks.rebuild();
 		else callbacks.update();
 	});
 	observer.observe(target);

package/dist/charthelpers/label-threshold.js.map

@@ -1 +1 @@
-{"version":3,"file":"label-threshold.js","names":[],"sources":["../../src/charthelpers/label-threshold.ts"],"sourcesContent":["/** What a chart does when its canvas is resized. */\nexport interface LabelThresholdCallbacks {\n  /** The resize crossed the threshold. */\n  rebuild(): void;\n  /** The resize stayed on one side of it. */\n  update(): void;\n}\n\n/**\n * A chart installs its label plugins at creation time, from which side of\n * the label threshold the canvas is on. A resize that crosses the threshold\n * therefore needs a rebuild, while every other resize is an in-place\n * update. This owns the which-side state; the chart owns the decision.\n *\n * @param target - The chart's canvas. A detached target is ignored: it has no size and no chart to serve.\n * @param isAboveThreshold - The chart's own test, read once now and after every resize.\n * @param callbacks - `rebuild` on a crossing, `update` otherwise.\n * @returns The observer, for the chart to disconnect in `disconnectedCallback`.\n */\nexport function observeLabelThreshold(\n  target: Element,\n  isAboveThreshold: () => boolean,\n  callbacks: LabelThresholdCallbacks\n): ResizeObserver {\n  let wasAbove = isAboveThreshold();\n  const observer = new ResizeObserver(() => {\n    if (!target.isConnected) return;\n    const isAbove = isAboveThreshold();\n    const crossed = isAbove !== wasAbove;\n    wasAbove = isAbove;\n    if (crossed) {\n      callbacks.rebuild();\n    } else {\n      callbacks.update();\n    }\n  });\n  observer.observe(target);\n  return observer;\n}\n"],"mappings":";;;;;;;;;;;;AAmBA,SAAgB,sBACd,QACA,kBACA,WACgB;CAChB,IAAI,WAAW,iBAAiB;CAChC,MAAM,WAAW,IAAI,qBAAqB;EACxC,IAAI,CAAC,OAAO,aAAa;EACzB,MAAM,UAAU,iBAAiB;EACjC,MAAM,UAAU,YAAY;EAC5B,WAAW;EACX,IAAI,SACF,UAAU,QAAQ;OAElB,UAAU,OAAO;CAErB,CAAC;CACD,SAAS,QAAQ,MAAM;CACvB,OAAO;AACT"}
+{"version":3,"file":"label-threshold.js","names":[],"sources":["../../src/charthelpers/label-threshold.ts"],"sourcesContent":["function hasSize(target: Element): boolean {\n  const {width, height} = target.getBoundingClientRect();\n  return width > 0 && height > 0;\n}\n\n/** What a chart does when its canvas is resized. */\nexport interface LabelThresholdCallbacks {\n  /** The resize crossed the threshold, or gave the canvas its first size. */\n  rebuild(): void;\n  /** The resize stayed on one side of it. */\n  update(): void;\n}\n\n/**\n * A chart installs its label plugins at creation time, from which side of\n * the label threshold the canvas is on. A resize that crosses the threshold\n * therefore needs a rebuild, while every other resize is an in-place\n * update. This owns the which-side state; the chart owns the decision.\n *\n * A chart created while its canvas had no size (in a hidden container) is\n * also rebuilt once, when the canvas first gets one: Chart.js keeps layout\n * state from that empty first pass, and a resize leaves the plot a pixel off\n * a chart created at its real size.\n *\n * @param target - The chart's canvas. A detached target is ignored: it has no size and no chart to serve.\n * @param isAboveThreshold - The chart's own test, read once now and after every resize.\n * @param callbacks - `rebuild` on a crossing or a first size, `update` otherwise.\n * @returns The observer, for the chart to disconnect in `disconnectedCallback`.\n */\nexport function observeLabelThreshold(\n  target: Element,\n  isAboveThreshold: () => boolean,\n  callbacks: LabelThresholdCallbacks\n): ResizeObserver {\n  let wasAbove = isAboveThreshold();\n  let hadSize = hasSize(target);\n  const observer = new ResizeObserver(() => {\n    if (!target.isConnected) return;\n    const isAbove = isAboveThreshold();\n    const crossed = isAbove !== wasAbove;\n    wasAbove = isAbove;\n    const gotSize = !hadSize && hasSize(target);\n    hadSize = hasSize(target);\n    if (crossed || gotSize) {\n      callbacks.rebuild();\n    } else {\n      callbacks.update();\n    }\n  });\n  observer.observe(target);\n  return observer;\n}\n"],"mappings":";AAAA,SAAS,QAAQ,QAA0B;CACzC,MAAM,EAAC,OAAO,WAAU,OAAO,sBAAsB;CACrD,OAAO,QAAQ,KAAK,SAAS;AAC/B;;;;;;;;;;;;;;;;;AA0BA,SAAgB,sBACd,QACA,kBACA,WACgB;CAChB,IAAI,WAAW,iBAAiB;CAChC,IAAI,UAAU,QAAQ,MAAM;CAC5B,MAAM,WAAW,IAAI,qBAAqB;EACxC,IAAI,CAAC,OAAO,aAAa;EACzB,MAAM,UAAU,iBAAiB;EACjC,MAAM,UAAU,YAAY;EAC5B,WAAW;EACX,MAAM,UAAU,CAAC,WAAW,QAAQ,MAAM;EAC1C,UAAU,QAAQ,MAAM;EACxB,IAAI,WAAW,SACb,UAAU,QAAQ;OAElB,UAAU,OAAO;CAErB,CAAC;CACD,SAAS,QAAQ,MAAM;CACvB,OAAO;AACT"}

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

@@ -94,7 +94,14 @@ export declare class ObcWatchFlat extends LitElement {
     get rotationsPerMinute(): number;
     private _legacyRotationsPerMinute;
     private _rotController?;
+    private _resizeController;
     private get _effectiveRpm();
+    /**
+     * Rendered px per user-space unit; the labels divide by it to keep their
+     * on-screen size. 1:1 while the strip has no width yet (hidden, or not laid
+     * out), until the ResizeController re-renders it.
+     */
+    private scaleFor;
     private get totalHeight();
     private renderClipPath;
     private renderLabelMask;
@@ -107,6 +114,7 @@ export declare class ObcWatchFlat extends LitElement {
     private getRotTrackY;
     private getRotColors;
     private renderRot;
+    firstUpdated(changed: PropertyValues): void;
     updated(changed: PropertyValues): void;
     disconnectedCallback(): void;
     render(): import('lit-html').TemplateResult<1>;

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

@@ -1 +1 @@
-{"version":3,"file":"watch-flat.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/watch-flat/watch-flat.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,cAAc,EACd,iBAAiB,EAKlB,MAAM,KAAK,CAAC;AAGb,OAAO,EAAC,QAAQ,EAA0B,MAAM,oBAAoB,CAAC;AAErE,OAAO,EAAC,KAAK,EAAC,MAAM,iCAAiC,CAAC;AAEtD,OAAO,EAAC,QAAQ,EAAC,MAAM,aAAa,CAAC;AACrC,OAAO,EACL,OAAO,EACP,iBAAiB,EAQlB,MAAM,iCAAiC,CAAC;AAMzC,OAAO,EAAC,OAAO,EAAE,iBAAiB,EAAC,CAAC;AAEpC,yFAAyF;AACzF,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,oEAAoE;AACpE,MAAM,WAAW,eAAe;IAC9B,CAAC,EAAE,MAAM,CAAC;IACV,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBACa,YAAa,SAAQ,UAAU;IAChB,KAAK,SAAO;IACZ,MAAM,SAAM;IACZ,OAAO,SAAK;IACZ,QAAQ,SAAK;IACb,eAAe,SAAK;IACpB,aAAa,EAAE,MAAM,GAAG,SAAS,CAAC;IACjB,SAAS,EAAE,QAAQ,EAAE,CAAM;IAC3B,MAAM,EAAE,KAAK,EAAE,CAAM;IACrB,YAAY,EAAE,iBAAiB,EAAE,CACvE;IACqB,WAAW,SAAyB;IACpC,WAAW,SAAkC;IAC7C,YAAY,SAAK;IAChB,SAAS,UAAS;IACF,QAAQ,EAAE,gBAAgB,EAAE,CAAM;IAClC,OAAO,EAAE,eAAe,EAAE,CAAM;IAEjD,OAAO,EAAE,OAAO,GAAG,SAAS,CAAC;IAC7B,WAAW,EAAE,iBAAiB,CAC9B;IACA,SAAS,EAAE,MAAM,CAAK;IACtB,OAAO,EAAE,MAAM,CAAK;IACpB,aAAa,EAAE,MAAM,CAAK;IAC1B,WAAW,EAAE,QAAQ,CAAoB;IACxC,gBAAgB,EAAE,OAAO,CAAS;IACnC,iBAAiB,EAAE,MAAM,CAAwB;IAEjD,0BAA0B,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/C,qBAAqB,EAAE,MAAM,CAAM;IAE7D;;;;OAIG;IACH,IACI,kBAAkB,CAAC,KAAK,EAAE,MAAM,EAEnC;IACD,IAAI,kBAAkB,IAHQ,MAAM,CAKnC;IAED,OAAO,CAAC,yBAAyB,CAAK;IACtC,OAAO,CAAC,cAAc,CAAC,CAAuB;IAE9C,OAAO,KAAK,aAAa,GAOxB;IAED,OAAO,KAAK,WAAW,GAEtB;IAED,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,eAAe;IAqBvB,OAAO,CAAC,YAAY;IAgBpB,OAAO,CAAC,SAAS;IAyDjB,oDAAoD;IACpD,OAAO,KAAK,UAAU,GAMrB;IAED,OAAO,CAAC,cAAc;IAiBtB,OAAO,CAAC,iBAAiB;IA0BzB,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,YAAY;IAsCpB,OAAO,CAAC,SAAS;IA0DR,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAkCtC,oBAAoB,IAAI,IAAI;IAK5B,MAAM;IAgDf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}
+{"version":3,"file":"watch-flat.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/watch-flat/watch-flat.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,cAAc,EACd,iBAAiB,EAKlB,MAAM,KAAK,CAAC;AAIb,OAAO,EAAC,QAAQ,EAA0B,MAAM,oBAAoB,CAAC;AAMrE,OAAO,EAAC,KAAK,EAAC,MAAM,iCAAiC,CAAC;AAEtD,OAAO,EAAC,QAAQ,EAAC,MAAM,aAAa,CAAC;AACrC,OAAO,EACL,OAAO,EACP,iBAAiB,EAQlB,MAAM,iCAAiC,CAAC;AAMzC,OAAO,EAAC,OAAO,EAAE,iBAAiB,EAAC,CAAC;AAEpC,yFAAyF;AACzF,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,oEAAoE;AACpE,MAAM,WAAW,eAAe;IAC9B,CAAC,EAAE,MAAM,CAAC;IACV,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBACa,YAAa,SAAQ,UAAU;IAChB,KAAK,SAAO;IACZ,MAAM,SAAM;IACZ,OAAO,SAAK;IACZ,QAAQ,SAAK;IACb,eAAe,SAAK;IACpB,aAAa,EAAE,MAAM,GAAG,SAAS,CAAC;IACjB,SAAS,EAAE,QAAQ,EAAE,CAAM;IAC3B,MAAM,EAAE,KAAK,EAAE,CAAM;IACrB,YAAY,EAAE,iBAAiB,EAAE,CACvE;IACqB,WAAW,SAAyB;IACpC,WAAW,SAAkC;IAC7C,YAAY,SAAK;IAChB,SAAS,UAAS;IACF,QAAQ,EAAE,gBAAgB,EAAE,CAAM;IAClC,OAAO,EAAE,eAAe,EAAE,CAAM;IAEjD,OAAO,EAAE,OAAO,GAAG,SAAS,CAAC;IAC7B,WAAW,EAAE,iBAAiB,CAC9B;IACA,SAAS,EAAE,MAAM,CAAK;IACtB,OAAO,EAAE,MAAM,CAAK;IACpB,aAAa,EAAE,MAAM,CAAK;IAC1B,WAAW,EAAE,QAAQ,CAAoB;IACxC,gBAAgB,EAAE,OAAO,CAAS;IACnC,iBAAiB,EAAE,MAAM,CAAwB;IAEjD,0BAA0B,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/C,qBAAqB,EAAE,MAAM,CAAM;IAE7D;;;;OAIG;IACH,IACI,kBAAkB,CAAC,KAAK,EAAE,MAAM,EAEnC;IACD,IAAI,kBAAkB,IAHQ,MAAM,CAKnC;IAED,OAAO,CAAC,yBAAyB,CAAK;IACtC,OAAO,CAAC,cAAc,CAAC,CAAuB;IAC9C,OAAO,CAAC,iBAAiB,CAAkC;IAE3D,OAAO,KAAK,aAAa,GAOxB;IAED;;;;OAIG;IACH,OAAO,CAAC,QAAQ;IAKhB,OAAO,KAAK,WAAW,GAEtB;IAED,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,eAAe;IAqBvB,OAAO,CAAC,YAAY;IAgBpB,OAAO,CAAC,SAAS;IAyDjB,oDAAoD;IACpD,OAAO,KAAK,UAAU,GAMrB;IAED,OAAO,CAAC,cAAc;IAiBtB,OAAO,CAAC,iBAAiB;IA0BzB,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,YAAY;IAsCpB,OAAO,CAAC,SAAS;IA0DR,YAAY,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAK3C,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAkCtC,oBAAoB,IAAI,IAAI;IAK5B,MAAM;IAgDf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}

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

@@ -1,6 +1,7 @@
 import { customElement } from "../../decorator.js";
 import __decorate from "../../_virtual/_@oxc-project_runtime@0.150.0/helpers/esm/decorate.js";
 import { Priority } from "../types.js";
+import { measureContainerPx, observeInnerBox } from "../../svghelpers/radial-frame.js";
 import { rect } from "../../svghelpers/rectangular.js";
 import { LinearRotPosition, ROT_ZERO_DEADBAND_PX, RotType, renderLinearRotBarDots, renderLinearRotBarStatic, renderLinearRotDots, renderLinearRotZeroPill } from "../rate-of-turn/rot-renderer.js";
 import { RateOfTurnController, disposeRotController } from "../rate-of-turn/rate-of-turn.controller.js";
@@ -8,6 +9,7 @@ import { TickmarkStyle, tickmark } from "./tickmark-flat.js";
 import watch_flat_default from "./watch-flat.css.js";
 import { LitElement, html, nothing, svg, unsafeCSS } from "lit";
 import { property } from "lit/decorators.js";
+import { ResizeController } from "@lit-labs/observers/resize-controller.js";
 //#region src/navigation-instruments/watch-flat/watch-flat.ts
 var ObcWatchFlat = class ObcWatchFlat extends LitElement {
 	constructor(..._args) {
@@ -35,6 +37,7 @@ var ObcWatchFlat = class ObcWatchFlat extends LitElement {
 		this.rotAtZeroDeadband = ROT_ZERO_DEADBAND_PX;
 		this.rotDotAnimationFactor = 18;
 		this._legacyRotationsPerMinute = 0;
+		this._resizeController = new ResizeController(this, {});
 	}
 	/**
 	* @deprecated Use `rateOfTurnDegreesPerMinute` (and optionally
@@ -51,6 +54,15 @@ var ObcWatchFlat = class ObcWatchFlat extends LitElement {
 		if (this.rateOfTurnDegreesPerMinute != null) return this.rateOfTurnDegreesPerMinute / 360 * this.rotDotAnimationFactor;
 		return this._legacyRotationsPerMinute;
 	}
+	/**
+	* Rendered px per user-space unit; the labels divide by it to keep their
+	* on-screen size. 1:1 while the strip has no width yet (hidden, or not laid
+	* out), until the ResizeController re-renders it.
+	*/
+	scaleFor(viewBoxWidth) {
+		const scale = measureContainerPx(this).width / viewBoxWidth;
+		return Number.isFinite(scale) && scale > 0 ? scale : 1;
+	}
 	get totalHeight() {
 		return this.bottomBar ? this.height + this.ticksHeight : this.height;
 	}
@@ -234,6 +246,10 @@ var ObcWatchFlat = class ObcWatchFlat extends LitElement {
           </g>
         ` : nothing;
 	}
+	firstUpdated(changed) {
+		super.firstUpdated(changed);
+		observeInnerBox(this._resizeController, this.renderRoot);
+	}
 	updated(changed) {
 		super.updated(changed);
 		const el = this.rotType ? this.renderRoot.querySelector("#rot-spinner") : null;
@@ -256,7 +272,7 @@ var ObcWatchFlat = class ObcWatchFlat extends LitElement {
 		const width = (this.width / 2 + this.padding) * 2;
 		const th = this.totalHeight;
 		const viewBox = `-${width / 2} -${th / 2} ${width} ${th}`;
-		const scale = this.clientWidth / width;
+		const scale = this.scaleFor(width);
 		const contentOffsetY = this.bottomBar ? -this.ticksHeight / 2 : 0;
 		return html`
       <svg

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

@@ -1 +1 @@
-{"version":3,"file":"watch-flat.js","names":[],"sources":["../../../src/navigation-instruments/watch-flat/watch-flat.ts"],"sourcesContent":["import {\n  LitElement,\n  PropertyValues,\n  SVGTemplateResult,\n  html,\n  nothing,\n  svg,\n  unsafeCSS,\n} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport compentStyle from './watch-flat.css?inline';\nimport {Tickmark, TickmarkStyle, tickmark} from './tickmark-flat.js';\nimport {rect} from '../../svghelpers/rectangular.js';\nimport {Label} from '../compass-flat/compass-flat.js';\nimport {customElement} from '../../decorator.js';\nimport {Priority} from '../types.js';\nimport {\n  RotType,\n  LinearRotPosition,\n  renderLinearRotDots,\n  renderLinearRotBarStatic,\n  renderLinearRotBarDots,\n  LINEAR_DOT_ANGLE_SPACING,\n  renderLinearRotZeroPill,\n  BAR_HALF_THICKNESS,\n  ROT_ZERO_DEADBAND_PX,\n} from '../rate-of-turn/rot-renderer.js';\nimport {\n  RateOfTurnController,\n  disposeRotController,\n} from '../rate-of-turn/rate-of-turn.controller.js';\n\nexport {RotType, LinearRotPosition};\n\n/** Filled segment of the track band, in SVG user-space x-coordinates (center-origin). */\nexport interface WatchFlatBarArea {\n  startX: number;\n  endX: number;\n  fillColor: string;\n}\n\n/** Needle marker spanning the track band at `x` (center-origin). */\nexport interface WatchFlatNeedle {\n  x: number;\n  fillColor: string;\n  strokeColor: string;\n}\n\n/**\n * @property barAreas - Filled segments rendered inside the track band (the linear counterpart of the radial bar areas).\n * @property needles - Needle markers spanning the track band (the linear counterpart of the radial needles).\n * @availableWhen rotPosition rotType!=undefined\n * @property rotStartX - Bar start position in SVG user-space x-coordinates (center-origin). Computed by the parent instrument.\n * @availableWhen rotStartX rotType!=undefined\n * @property rotEndX - Bar end position in SVG user-space x-coordinates (center-origin). Computed by the parent instrument.\n * @availableWhen rotEndX rotType!=undefined\n * @property rotDotSpacing - Pixel spacing between adjacent dots in the linear ROT strip.\n *   Must be > 0 to enable animation; the default `0` intentionally disables\n *   the spinning dots so the parent instrument must supply a meaningful value\n *   derived from the current scale (e.g. `LINEAR_DOT_ANGLE_SPACING * translationScale`).\n * @availableWhen rotDotSpacing rotType!=undefined\n * @availableWhen rotPriority rotType!=undefined\n * @availableWhen rotPortStarboard rotType!=undefined\n * @availableWhen rotAtZeroDeadband rotType==bar\n * @availableWhen rateOfTurnDegreesPerMinute rotType!=undefined\n * @availableWhen rotDotAnimationFactor rotType!=undefined\n * @experimental\n */\n@customElement('obc-watch-flat')\nexport class ObcWatchFlat extends LitElement {\n  @property({type: Number}) width = 352;\n  @property({type: Number}) height = 72;\n  @property({type: Number}) padding = 0;\n  @property({type: Number}) rotation = 0;\n  @property({type: Number}) tickmarkSpacing = 0;\n  @property({type: Number}) angleSetpoint: number | undefined;\n  @property({type: Array, attribute: false}) tickmarks: Tickmark[] = [];\n  @property({type: Array, attribute: false}) labels: Label[] = [];\n  @property({type: Array, attribute: false}) FOVIndicator: SVGTemplateResult[] =\n    [];\n  @property({type: Number}) trackHeight = (2 / 3) * this.height;\n  @property({type: Number}) ticksHeight = this.height - this.trackHeight;\n  @property({type: Number}) borderRadius = 8;\n  @property({type: Boolean}) bottomBar = false;\n  @property({type: Array, attribute: false}) barAreas: WatchFlatBarArea[] = [];\n  @property({type: Array, attribute: false}) needles: WatchFlatNeedle[] = [];\n\n  @property({type: String}) rotType: RotType | undefined;\n  @property({type: String}) rotPosition: LinearRotPosition =\n    LinearRotPosition.track;\n  @property({type: Number}) rotStartX: number = 0;\n  @property({type: Number}) rotEndX: number = 0;\n  @property({type: Number}) rotDotSpacing: number = 0;\n  @property({type: String}) rotPriority: Priority = Priority.regular;\n  @property({type: Boolean}) rotPortStarboard: boolean = false;\n  @property({type: Number}) rotAtZeroDeadband: number = ROT_ZERO_DEADBAND_PX;\n\n  @property({type: Number}) rateOfTurnDegreesPerMinute: number | undefined;\n  @property({type: Number}) rotDotAnimationFactor: number = 18;\n\n  /**\n   * @deprecated Use `rateOfTurnDegreesPerMinute` (and optionally\n   * `rotDotAnimationFactor`) instead. Takes effect only when\n   * `rateOfTurnDegreesPerMinute` is `undefined`.\n   */\n  @property({type: Number})\n  set rotationsPerMinute(value: number) {\n    this._legacyRotationsPerMinute = value;\n  }\n  get rotationsPerMinute() {\n    return this._legacyRotationsPerMinute;\n  }\n\n  private _legacyRotationsPerMinute = 0;\n  private _rotController?: RateOfTurnController;\n\n  private get _effectiveRpm(): number {\n    if (this.rateOfTurnDegreesPerMinute != null) {\n      return (\n        (this.rateOfTurnDegreesPerMinute / 360) * this.rotDotAnimationFactor\n      );\n    }\n    return this._legacyRotationsPerMinute;\n  }\n\n  private get totalHeight(): number {\n    return this.bottomBar ? this.height + this.ticksHeight : this.height;\n  }\n\n  private renderClipPath(offsetY: number = 0): SVGTemplateResult {\n    return svg`\n      <clipPath id=\"frameClipPath${offsetY === 0 ? '' : 'Tickmarks'}\">\n        <rect x=\"${-this.width / 2}\" y=\"${-this.totalHeight / 2 + offsetY}\" \n              width=\"${this.width}\" height=\"${this.totalHeight}\" \n              rx=\"${this.borderRadius}\" />\n      </clipPath>\n    `;\n  }\n\n  private renderLabelMask(): SVGTemplateResult {\n    return svg`\n      <mask id=\"labelMask\">\n        <rect x=\"${-this.width / 2}\" y=\"${-70}\" \n              width=\"${this.width}\" height=\"${32}\"\n               />\n        <linearGradient id=\"fadeGradient\" gradientUnits=\"userSpaceOnUse\"\n                        x1=\"${-this.width / 2}\" y1=\"0\" x2=\"${this.width / 2}\" y2=\"0\">\n          <stop offset=\"0%\" style=\"stop-color:black; stop-opacity:1;\" />\n          <stop offset=\"10%\" style=\"stop-color:white; stop-opacity:1;\" />\n          <stop offset=\"50%\" style=\"stop-color:white; stop-opacity:1;\" />\n          <stop offset=\"90%\" style=\"stop-color:white; stop-opacity:1;\" />\n          <stop offset=\"100%\" style=\"stop-color:black; stop-opacity:1;\" />\n        </linearGradient>\n        <rect x=\"${-this.width / 2}\" y=\"${-70}\" \n              width=\"${this.width}\" height=\"${32}\"\n              fill=\"url(#fadeGradient)\" />\n      </mask>\n    `;\n  }\n\n  private renderLabels(scale: number): SVGTemplateResult[] {\n    const labels: SVGTemplateResult[] = [];\n\n    for (const l of this.labels) {\n      labels.push(\n        svg`<g transform=\"translate(${-this.rotation * this.tickmarkSpacing}, ${-6 / scale})\">\n          <text x=${l.x} y=${l.y} class=\"label\" fill=${'var(--instrument-tick-mark-secondary-color)'}>\n            ${l.text}\n          </text>\n          </g>`\n      );\n    }\n\n    return labels;\n  }\n\n  private watchFace(): SVGTemplateResult {\n    const strokeWidth = 1;\n    const th = this.totalHeight;\n    const topTicksY = -th / 2;\n\n    return svg`\n      ${this.renderClipPath()}\n      ${this.renderClipPath(-40)}\n      <g clip-path=\"url(#frameClipPath)\">\n        ${rect('frame-track', {\n          width: this.width,\n          height: this.trackHeight,\n          y:\n            th / 2 - this.trackHeight - (this.bottomBar ? this.ticksHeight : 0),\n          strokeWidth: strokeWidth,\n          strokeColor: 'var(--instrument-frame-secondary-color)',\n          strokePosition: 'inside',\n          fillColor: 'var(--instrument-frame-secondary-color)',\n          borderRadius: 0,\n        })}\n        ${rect('frame-ticks', {\n          width: this.width,\n          height: this.ticksHeight,\n          y: topTicksY,\n          strokeWidth: strokeWidth,\n          strokeColor: 'var(--instrument-frame-primary-color)',\n          strokePosition: 'inside',\n          fillColor: 'var(--instrument-frame-primary-color)',\n          borderRadius: 0,\n        })}\n        ${\n          this.bottomBar\n            ? rect('frame-bottom-bar', {\n                width: this.width,\n                height: this.ticksHeight,\n                y: th / 2 - this.ticksHeight,\n                strokeWidth: strokeWidth,\n                strokeColor: 'var(--instrument-frame-primary-color)',\n                strokePosition: 'inside',\n                fillColor: 'var(--instrument-frame-primary-color)',\n                borderRadius: 0,\n              })\n            : nothing\n        }\n      </g>\n      ${rect('frame-outline', {\n        width: this.width,\n        height: th,\n        strokeWidth: strokeWidth,\n        strokeColor: 'var(--instrument-frame-tertiary-color)',\n        strokePosition: 'inside',\n        fillColor: 'none',\n        borderRadius: this.borderRadius,\n      })}\n    `;\n  }\n\n  /** Top edge of the track band in SVG user space. */\n  private get trackBandY(): number {\n    return (\n      this.totalHeight / 2 -\n      this.trackHeight -\n      (this.bottomBar ? this.ticksHeight : 0)\n    );\n  }\n\n  private renderBandBars(): SVGTemplateResult[] | typeof nothing {\n    if (this.barAreas.length === 0) {\n      return nothing;\n    }\n    return this.barAreas.map(\n      (bar) => svg`\n        <rect\n          x=\"${Math.min(bar.startX, bar.endX)}\"\n          y=\"${this.trackBandY}\"\n          width=\"${Math.abs(bar.endX - bar.startX)}\"\n          height=\"${this.trackHeight}\"\n          fill=${bar.fillColor}\n        />\n      `\n    );\n  }\n\n  private renderBandNeedles(): SVGTemplateResult[] | typeof nothing {\n    if (this.needles.length === 0) {\n      return nothing;\n    }\n    return this.needles.map(\n      (needle) => svg`\n        <rect\n          x=\"${needle.x - 4}\"\n          y=\"${this.trackBandY}\"\n          width=\"8\"\n          height=\"${this.trackHeight}\"\n          rx=\"4\"\n          fill=${needle.fillColor}\n          stroke=${needle.strokeColor}\n          stroke-width=\"1\"\n          vector-effect=\"non-scaling-stroke\"\n          paint-order=\"stroke fill\"\n        />\n      `\n    );\n  }\n\n  // ---------------------------------------------------------------------------\n  // ROT (Rate of Turn) — linear\n  // ---------------------------------------------------------------------------\n\n  private getRotTrackY(): number {\n    const th = this.totalHeight;\n    if (this.rotPosition === LinearRotPosition.scale) {\n      return -th / 2 + this.ticksHeight / 2;\n    }\n    if (this.bottomBar) {\n      return th / 2 - this.ticksHeight / 2;\n    }\n    return this.height / 2 - this.trackHeight / 2;\n  }\n\n  private getRotColors(): {\n    dotColor: string;\n    barBgColor: string;\n  } {\n    const isEnhanced = this.rotPriority === Priority.enhanced;\n\n    if (this.rotPortStarboard) {\n      // For bar type, derive direction from bar positions (visual direction);\n      // for dots, use spinner RPM.\n      const direction =\n        this.rotType === RotType.bar\n          ? this.rotEndX - this.rotStartX\n          : this._effectiveRpm;\n\n      if (direction > 0) {\n        return {\n          dotColor: 'var(--instrument-starboard-secondary-color)',\n          barBgColor: 'var(--instrument-starboard-primary-color)',\n        };\n      }\n      if (direction < 0) {\n        return {\n          dotColor: 'var(--instrument-port-secondary-color)',\n          barBgColor: 'var(--instrument-port-primary-color)',\n        };\n      }\n    }\n\n    return {\n      dotColor: isEnhanced\n        ? 'var(--instrument-enhanced-tertiary-color)'\n        : 'var(--instrument-regular-tertiary-color)',\n      barBgColor: isEnhanced\n        ? 'var(--instrument-enhanced-secondary-color)'\n        : 'var(--instrument-regular-secondary-color)',\n    };\n  }\n\n  private renderRot(): SVGTemplateResult | typeof nothing {\n    if (!this.rotType) return nothing;\n\n    const trackY = this.getRotTrackY();\n    const {dotColor, barBgColor} = this.getRotColors();\n    const canAnimateDots = this.rotDotSpacing > 0;\n\n    if (this.rotType === RotType.bar) {\n      const span = Math.abs(this.rotEndX - this.rotStartX);\n      const zeroDb = Number.isFinite(this.rotAtZeroDeadband)\n        ? this.rotAtZeroDeadband\n        : ROT_ZERO_DEADBAND_PX;\n\n      if (span < Math.max(zeroDb, BAR_HALF_THICKNESS)) {\n        return renderLinearRotZeroPill(barBgColor, this.rotStartX, trackY);\n      }\n\n      return svg`\n        ${renderLinearRotBarStatic({\n          startX: this.rotStartX,\n          endX: this.rotEndX,\n          barColor: barBgColor,\n          trackY,\n          maskId: 'rot-bar-mask-linear',\n        })}\n        ${\n          canAnimateDots\n            ? svg`<g clip-path=\"url(#rot-bar-mask-linear)\">\n              <g id=\"rot-spinner\">\n                ${renderLinearRotBarDots(dotColor, trackY, this.rotDotSpacing, this.width)}\n              </g>\n            </g>`\n            : nothing\n        }\n      `;\n    }\n\n    const isEnhanced = this.rotPriority === Priority.enhanced;\n    const neutralDotsColor = isEnhanced\n      ? 'var(--instrument-enhanced-secondary-color)'\n      : 'var(--instrument-regular-secondary-color)';\n    let dotsColor = neutralDotsColor;\n    if (this.rotPortStarboard) {\n      if (this._effectiveRpm > 0) {\n        dotsColor = 'var(--instrument-starboard-secondary-color)';\n      } else if (this._effectiveRpm < 0) {\n        dotsColor = 'var(--instrument-port-secondary-color)';\n      }\n    }\n    return canAnimateDots\n      ? svg`\n          <g id=\"rot-spinner\">\n            ${renderLinearRotDots(dotsColor, trackY, this.rotDotSpacing, this.width)}\n          </g>\n        `\n      : nothing;\n  }\n\n  override updated(changed: PropertyValues): void {\n    super.updated(changed);\n    const el = this.rotType\n      ? this.renderRoot.querySelector('#rot-spinner')\n      : null;\n\n    if (!el) {\n      this._rotController = disposeRotController(this, this._rotController);\n      return;\n    }\n\n    const cyclePx = 360 * (this.rotDotSpacing / LINEAR_DOT_ANGLE_SPACING);\n\n    if (!this._rotController || this._rotController.el !== el) {\n      this._rotController = disposeRotController(this, this._rotController);\n      this._rotController = new RateOfTurnController(\n        this,\n        el,\n        this._effectiveRpm,\n        cyclePx\n      );\n    } else {\n      this._rotController.cyclePx = cyclePx;\n    }\n\n    if (\n      changed.has('rateOfTurnDegreesPerMinute') ||\n      changed.has('rotDotAnimationFactor') ||\n      changed.has('rotationsPerMinute')\n    ) {\n      this._rotController.rotationsPerMinute = this._effectiveRpm;\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._rotController = disposeRotController(this, this._rotController);\n  }\n\n  override render() {\n    const width = (this.width / 2 + this.padding) * 2;\n    const th = this.totalHeight;\n    const viewBox = `-${width / 2} -${th / 2} ${width} ${th}`;\n    const scale = this.clientWidth / width;\n\n    const contentOffsetY = this.bottomBar ? -this.ticksHeight / 2 : 0;\n\n    return html`\n      <svg\n        width=\"100%\"\n        height=\"100%\"\n        viewBox=${viewBox}\n        style=\"--scale: ${scale}\"\n      >\n        ${this.watchFace()} ${this.renderLabelMask()}\n        <g clip-path=\"url(#frameClipPath)\">\n          ${this.renderBandBars()} ${this.renderBandNeedles()}\n        </g>\n\n        <g transform=\"translate(0, ${contentOffsetY})\">\n          <g clip-path=\"url(#frameClipPath)\">\n            ${this.tickmarks.map(\n              (t) => svg`\n              <g transform=\"translate(${-this.rotation * this.tickmarkSpacing}, 0)\">\n                ${tickmark(t.angle, t.type, TickmarkStyle.regular)}\n              </g>\n            `\n            )}\n          </g>\n\n          <g mask=\"url(#labelMask)\">${this.renderLabels(scale)}</g>\n        </g>\n\n        ${this.FOVIndicator}\n\n        <g clip-path=\"url(#frameClipPath)\">${this.renderRot()}</g>\n        ${svg`<line\n          x1=\"0\" y1=\"${-this.totalHeight / 2 + this.ticksHeight}\"\n          x2=\"0\" y2=\"${this.totalHeight / 2}\"\n          stroke=\"var(--instrument-frame-tertiary-color)\"\n          stroke-width=\"1\"\n          vector-effect=\"non-scaling-stroke\"\n        />`}\n      </svg>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-watch-flat': ObcWatchFlat;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"watch-flat.js","names":[],"sources":["../../../src/navigation-instruments/watch-flat/watch-flat.ts"],"sourcesContent":["import {\n  LitElement,\n  PropertyValues,\n  SVGTemplateResult,\n  html,\n  nothing,\n  svg,\n  unsafeCSS,\n} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {ResizeController} from '@lit-labs/observers/resize-controller.js';\nimport compentStyle from './watch-flat.css?inline';\nimport {Tickmark, TickmarkStyle, tickmark} from './tickmark-flat.js';\nimport {rect} from '../../svghelpers/rectangular.js';\nimport {\n  measureContainerPx,\n  observeInnerBox,\n} from '../../svghelpers/radial-frame.js';\nimport {Label} from '../compass-flat/compass-flat.js';\nimport {customElement} from '../../decorator.js';\nimport {Priority} from '../types.js';\nimport {\n  RotType,\n  LinearRotPosition,\n  renderLinearRotDots,\n  renderLinearRotBarStatic,\n  renderLinearRotBarDots,\n  LINEAR_DOT_ANGLE_SPACING,\n  renderLinearRotZeroPill,\n  BAR_HALF_THICKNESS,\n  ROT_ZERO_DEADBAND_PX,\n} from '../rate-of-turn/rot-renderer.js';\nimport {\n  RateOfTurnController,\n  disposeRotController,\n} from '../rate-of-turn/rate-of-turn.controller.js';\n\nexport {RotType, LinearRotPosition};\n\n/** Filled segment of the track band, in SVG user-space x-coordinates (center-origin). */\nexport interface WatchFlatBarArea {\n  startX: number;\n  endX: number;\n  fillColor: string;\n}\n\n/** Needle marker spanning the track band at `x` (center-origin). */\nexport interface WatchFlatNeedle {\n  x: number;\n  fillColor: string;\n  strokeColor: string;\n}\n\n/**\n * @property barAreas - Filled segments rendered inside the track band (the linear counterpart of the radial bar areas).\n * @property needles - Needle markers spanning the track band (the linear counterpart of the radial needles).\n * @availableWhen rotPosition rotType!=undefined\n * @property rotStartX - Bar start position in SVG user-space x-coordinates (center-origin). Computed by the parent instrument.\n * @availableWhen rotStartX rotType!=undefined\n * @property rotEndX - Bar end position in SVG user-space x-coordinates (center-origin). Computed by the parent instrument.\n * @availableWhen rotEndX rotType!=undefined\n * @property rotDotSpacing - Pixel spacing between adjacent dots in the linear ROT strip.\n *   Must be > 0 to enable animation; the default `0` intentionally disables\n *   the spinning dots so the parent instrument must supply a meaningful value\n *   derived from the current scale (e.g. `LINEAR_DOT_ANGLE_SPACING * translationScale`).\n * @availableWhen rotDotSpacing rotType!=undefined\n * @availableWhen rotPriority rotType!=undefined\n * @availableWhen rotPortStarboard rotType!=undefined\n * @availableWhen rotAtZeroDeadband rotType==bar\n * @availableWhen rateOfTurnDegreesPerMinute rotType!=undefined\n * @availableWhen rotDotAnimationFactor rotType!=undefined\n * @experimental\n */\n@customElement('obc-watch-flat')\nexport class ObcWatchFlat extends LitElement {\n  @property({type: Number}) width = 352;\n  @property({type: Number}) height = 72;\n  @property({type: Number}) padding = 0;\n  @property({type: Number}) rotation = 0;\n  @property({type: Number}) tickmarkSpacing = 0;\n  @property({type: Number}) angleSetpoint: number | undefined;\n  @property({type: Array, attribute: false}) tickmarks: Tickmark[] = [];\n  @property({type: Array, attribute: false}) labels: Label[] = [];\n  @property({type: Array, attribute: false}) FOVIndicator: SVGTemplateResult[] =\n    [];\n  @property({type: Number}) trackHeight = (2 / 3) * this.height;\n  @property({type: Number}) ticksHeight = this.height - this.trackHeight;\n  @property({type: Number}) borderRadius = 8;\n  @property({type: Boolean}) bottomBar = false;\n  @property({type: Array, attribute: false}) barAreas: WatchFlatBarArea[] = [];\n  @property({type: Array, attribute: false}) needles: WatchFlatNeedle[] = [];\n\n  @property({type: String}) rotType: RotType | undefined;\n  @property({type: String}) rotPosition: LinearRotPosition =\n    LinearRotPosition.track;\n  @property({type: Number}) rotStartX: number = 0;\n  @property({type: Number}) rotEndX: number = 0;\n  @property({type: Number}) rotDotSpacing: number = 0;\n  @property({type: String}) rotPriority: Priority = Priority.regular;\n  @property({type: Boolean}) rotPortStarboard: boolean = false;\n  @property({type: Number}) rotAtZeroDeadband: number = ROT_ZERO_DEADBAND_PX;\n\n  @property({type: Number}) rateOfTurnDegreesPerMinute: number | undefined;\n  @property({type: Number}) rotDotAnimationFactor: number = 18;\n\n  /**\n   * @deprecated Use `rateOfTurnDegreesPerMinute` (and optionally\n   * `rotDotAnimationFactor`) instead. Takes effect only when\n   * `rateOfTurnDegreesPerMinute` is `undefined`.\n   */\n  @property({type: Number})\n  set rotationsPerMinute(value: number) {\n    this._legacyRotationsPerMinute = value;\n  }\n  get rotationsPerMinute() {\n    return this._legacyRotationsPerMinute;\n  }\n\n  private _legacyRotationsPerMinute = 0;\n  private _rotController?: RateOfTurnController;\n  private _resizeController = new ResizeController(this, {});\n\n  private get _effectiveRpm(): number {\n    if (this.rateOfTurnDegreesPerMinute != null) {\n      return (\n        (this.rateOfTurnDegreesPerMinute / 360) * this.rotDotAnimationFactor\n      );\n    }\n    return this._legacyRotationsPerMinute;\n  }\n\n  /**\n   * Rendered px per user-space unit; the labels divide by it to keep their\n   * on-screen size. 1:1 while the strip has no width yet (hidden, or not laid\n   * out), until the ResizeController re-renders it.\n   */\n  private scaleFor(viewBoxWidth: number): number {\n    const scale = measureContainerPx(this).width / viewBoxWidth;\n    return Number.isFinite(scale) && scale > 0 ? scale : 1;\n  }\n\n  private get totalHeight(): number {\n    return this.bottomBar ? this.height + this.ticksHeight : this.height;\n  }\n\n  private renderClipPath(offsetY: number = 0): SVGTemplateResult {\n    return svg`\n      <clipPath id=\"frameClipPath${offsetY === 0 ? '' : 'Tickmarks'}\">\n        <rect x=\"${-this.width / 2}\" y=\"${-this.totalHeight / 2 + offsetY}\" \n              width=\"${this.width}\" height=\"${this.totalHeight}\" \n              rx=\"${this.borderRadius}\" />\n      </clipPath>\n    `;\n  }\n\n  private renderLabelMask(): SVGTemplateResult {\n    return svg`\n      <mask id=\"labelMask\">\n        <rect x=\"${-this.width / 2}\" y=\"${-70}\" \n              width=\"${this.width}\" height=\"${32}\"\n               />\n        <linearGradient id=\"fadeGradient\" gradientUnits=\"userSpaceOnUse\"\n                        x1=\"${-this.width / 2}\" y1=\"0\" x2=\"${this.width / 2}\" y2=\"0\">\n          <stop offset=\"0%\" style=\"stop-color:black; stop-opacity:1;\" />\n          <stop offset=\"10%\" style=\"stop-color:white; stop-opacity:1;\" />\n          <stop offset=\"50%\" style=\"stop-color:white; stop-opacity:1;\" />\n          <stop offset=\"90%\" style=\"stop-color:white; stop-opacity:1;\" />\n          <stop offset=\"100%\" style=\"stop-color:black; stop-opacity:1;\" />\n        </linearGradient>\n        <rect x=\"${-this.width / 2}\" y=\"${-70}\" \n              width=\"${this.width}\" height=\"${32}\"\n              fill=\"url(#fadeGradient)\" />\n      </mask>\n    `;\n  }\n\n  private renderLabels(scale: number): SVGTemplateResult[] {\n    const labels: SVGTemplateResult[] = [];\n\n    for (const l of this.labels) {\n      labels.push(\n        svg`<g transform=\"translate(${-this.rotation * this.tickmarkSpacing}, ${-6 / scale})\">\n          <text x=${l.x} y=${l.y} class=\"label\" fill=${'var(--instrument-tick-mark-secondary-color)'}>\n            ${l.text}\n          </text>\n          </g>`\n      );\n    }\n\n    return labels;\n  }\n\n  private watchFace(): SVGTemplateResult {\n    const strokeWidth = 1;\n    const th = this.totalHeight;\n    const topTicksY = -th / 2;\n\n    return svg`\n      ${this.renderClipPath()}\n      ${this.renderClipPath(-40)}\n      <g clip-path=\"url(#frameClipPath)\">\n        ${rect('frame-track', {\n          width: this.width,\n          height: this.trackHeight,\n          y:\n            th / 2 - this.trackHeight - (this.bottomBar ? this.ticksHeight : 0),\n          strokeWidth: strokeWidth,\n          strokeColor: 'var(--instrument-frame-secondary-color)',\n          strokePosition: 'inside',\n          fillColor: 'var(--instrument-frame-secondary-color)',\n          borderRadius: 0,\n        })}\n        ${rect('frame-ticks', {\n          width: this.width,\n          height: this.ticksHeight,\n          y: topTicksY,\n          strokeWidth: strokeWidth,\n          strokeColor: 'var(--instrument-frame-primary-color)',\n          strokePosition: 'inside',\n          fillColor: 'var(--instrument-frame-primary-color)',\n          borderRadius: 0,\n        })}\n        ${\n          this.bottomBar\n            ? rect('frame-bottom-bar', {\n                width: this.width,\n                height: this.ticksHeight,\n                y: th / 2 - this.ticksHeight,\n                strokeWidth: strokeWidth,\n                strokeColor: 'var(--instrument-frame-primary-color)',\n                strokePosition: 'inside',\n                fillColor: 'var(--instrument-frame-primary-color)',\n                borderRadius: 0,\n              })\n            : nothing\n        }\n      </g>\n      ${rect('frame-outline', {\n        width: this.width,\n        height: th,\n        strokeWidth: strokeWidth,\n        strokeColor: 'var(--instrument-frame-tertiary-color)',\n        strokePosition: 'inside',\n        fillColor: 'none',\n        borderRadius: this.borderRadius,\n      })}\n    `;\n  }\n\n  /** Top edge of the track band in SVG user space. */\n  private get trackBandY(): number {\n    return (\n      this.totalHeight / 2 -\n      this.trackHeight -\n      (this.bottomBar ? this.ticksHeight : 0)\n    );\n  }\n\n  private renderBandBars(): SVGTemplateResult[] | typeof nothing {\n    if (this.barAreas.length === 0) {\n      return nothing;\n    }\n    return this.barAreas.map(\n      (bar) => svg`\n        <rect\n          x=\"${Math.min(bar.startX, bar.endX)}\"\n          y=\"${this.trackBandY}\"\n          width=\"${Math.abs(bar.endX - bar.startX)}\"\n          height=\"${this.trackHeight}\"\n          fill=${bar.fillColor}\n        />\n      `\n    );\n  }\n\n  private renderBandNeedles(): SVGTemplateResult[] | typeof nothing {\n    if (this.needles.length === 0) {\n      return nothing;\n    }\n    return this.needles.map(\n      (needle) => svg`\n        <rect\n          x=\"${needle.x - 4}\"\n          y=\"${this.trackBandY}\"\n          width=\"8\"\n          height=\"${this.trackHeight}\"\n          rx=\"4\"\n          fill=${needle.fillColor}\n          stroke=${needle.strokeColor}\n          stroke-width=\"1\"\n          vector-effect=\"non-scaling-stroke\"\n          paint-order=\"stroke fill\"\n        />\n      `\n    );\n  }\n\n  // ---------------------------------------------------------------------------\n  // ROT (Rate of Turn) — linear\n  // ---------------------------------------------------------------------------\n\n  private getRotTrackY(): number {\n    const th = this.totalHeight;\n    if (this.rotPosition === LinearRotPosition.scale) {\n      return -th / 2 + this.ticksHeight / 2;\n    }\n    if (this.bottomBar) {\n      return th / 2 - this.ticksHeight / 2;\n    }\n    return this.height / 2 - this.trackHeight / 2;\n  }\n\n  private getRotColors(): {\n    dotColor: string;\n    barBgColor: string;\n  } {\n    const isEnhanced = this.rotPriority === Priority.enhanced;\n\n    if (this.rotPortStarboard) {\n      // For bar type, derive direction from bar positions (visual direction);\n      // for dots, use spinner RPM.\n      const direction =\n        this.rotType === RotType.bar\n          ? this.rotEndX - this.rotStartX\n          : this._effectiveRpm;\n\n      if (direction > 0) {\n        return {\n          dotColor: 'var(--instrument-starboard-secondary-color)',\n          barBgColor: 'var(--instrument-starboard-primary-color)',\n        };\n      }\n      if (direction < 0) {\n        return {\n          dotColor: 'var(--instrument-port-secondary-color)',\n          barBgColor: 'var(--instrument-port-primary-color)',\n        };\n      }\n    }\n\n    return {\n      dotColor: isEnhanced\n        ? 'var(--instrument-enhanced-tertiary-color)'\n        : 'var(--instrument-regular-tertiary-color)',\n      barBgColor: isEnhanced\n        ? 'var(--instrument-enhanced-secondary-color)'\n        : 'var(--instrument-regular-secondary-color)',\n    };\n  }\n\n  private renderRot(): SVGTemplateResult | typeof nothing {\n    if (!this.rotType) return nothing;\n\n    const trackY = this.getRotTrackY();\n    const {dotColor, barBgColor} = this.getRotColors();\n    const canAnimateDots = this.rotDotSpacing > 0;\n\n    if (this.rotType === RotType.bar) {\n      const span = Math.abs(this.rotEndX - this.rotStartX);\n      const zeroDb = Number.isFinite(this.rotAtZeroDeadband)\n        ? this.rotAtZeroDeadband\n        : ROT_ZERO_DEADBAND_PX;\n\n      if (span < Math.max(zeroDb, BAR_HALF_THICKNESS)) {\n        return renderLinearRotZeroPill(barBgColor, this.rotStartX, trackY);\n      }\n\n      return svg`\n        ${renderLinearRotBarStatic({\n          startX: this.rotStartX,\n          endX: this.rotEndX,\n          barColor: barBgColor,\n          trackY,\n          maskId: 'rot-bar-mask-linear',\n        })}\n        ${\n          canAnimateDots\n            ? svg`<g clip-path=\"url(#rot-bar-mask-linear)\">\n              <g id=\"rot-spinner\">\n                ${renderLinearRotBarDots(dotColor, trackY, this.rotDotSpacing, this.width)}\n              </g>\n            </g>`\n            : nothing\n        }\n      `;\n    }\n\n    const isEnhanced = this.rotPriority === Priority.enhanced;\n    const neutralDotsColor = isEnhanced\n      ? 'var(--instrument-enhanced-secondary-color)'\n      : 'var(--instrument-regular-secondary-color)';\n    let dotsColor = neutralDotsColor;\n    if (this.rotPortStarboard) {\n      if (this._effectiveRpm > 0) {\n        dotsColor = 'var(--instrument-starboard-secondary-color)';\n      } else if (this._effectiveRpm < 0) {\n        dotsColor = 'var(--instrument-port-secondary-color)';\n      }\n    }\n    return canAnimateDots\n      ? svg`\n          <g id=\"rot-spinner\">\n            ${renderLinearRotDots(dotsColor, trackY, this.rotDotSpacing, this.width)}\n          </g>\n        `\n      : nothing;\n  }\n\n  override firstUpdated(changed: PropertyValues): void {\n    super.firstUpdated(changed);\n    observeInnerBox(this._resizeController, this.renderRoot);\n  }\n\n  override updated(changed: PropertyValues): void {\n    super.updated(changed);\n    const el = this.rotType\n      ? this.renderRoot.querySelector('#rot-spinner')\n      : null;\n\n    if (!el) {\n      this._rotController = disposeRotController(this, this._rotController);\n      return;\n    }\n\n    const cyclePx = 360 * (this.rotDotSpacing / LINEAR_DOT_ANGLE_SPACING);\n\n    if (!this._rotController || this._rotController.el !== el) {\n      this._rotController = disposeRotController(this, this._rotController);\n      this._rotController = new RateOfTurnController(\n        this,\n        el,\n        this._effectiveRpm,\n        cyclePx\n      );\n    } else {\n      this._rotController.cyclePx = cyclePx;\n    }\n\n    if (\n      changed.has('rateOfTurnDegreesPerMinute') ||\n      changed.has('rotDotAnimationFactor') ||\n      changed.has('rotationsPerMinute')\n    ) {\n      this._rotController.rotationsPerMinute = this._effectiveRpm;\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._rotController = disposeRotController(this, this._rotController);\n  }\n\n  override render() {\n    const width = (this.width / 2 + this.padding) * 2;\n    const th = this.totalHeight;\n    const viewBox = `-${width / 2} -${th / 2} ${width} ${th}`;\n    const scale = this.scaleFor(width);\n\n    const contentOffsetY = this.bottomBar ? -this.ticksHeight / 2 : 0;\n\n    return html`\n      <svg\n        width=\"100%\"\n        height=\"100%\"\n        viewBox=${viewBox}\n        style=\"--scale: ${scale}\"\n      >\n        ${this.watchFace()} ${this.renderLabelMask()}\n        <g clip-path=\"url(#frameClipPath)\">\n          ${this.renderBandBars()} ${this.renderBandNeedles()}\n        </g>\n\n        <g transform=\"translate(0, ${contentOffsetY})\">\n          <g clip-path=\"url(#frameClipPath)\">\n            ${this.tickmarks.map(\n              (t) => svg`\n              <g transform=\"translate(${-this.rotation * this.tickmarkSpacing}, 0)\">\n                ${tickmark(t.angle, t.type, TickmarkStyle.regular)}\n              </g>\n            `\n            )}\n          </g>\n\n          <g mask=\"url(#labelMask)\">${this.renderLabels(scale)}</g>\n        </g>\n\n        ${this.FOVIndicator}\n\n        <g clip-path=\"url(#frameClipPath)\">${this.renderRot()}</g>\n        ${svg`<line\n          x1=\"0\" y1=\"${-this.totalHeight / 2 + this.ticksHeight}\"\n          x2=\"0\" y2=\"${this.totalHeight / 2}\"\n          stroke=\"var(--instrument-frame-tertiary-color)\"\n          stroke-width=\"1\"\n          vector-effect=\"non-scaling-stroke\"\n        />`}\n      </svg>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-watch-flat': ObcWatchFlat;\n  }\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oicl/openbridge-webcomponents",
-  "version": "2.1.0-next.6",
+  "version": "2.1.0-next.7",
   "type": "module",
   "repository": {
     "type": "git",
@@ -24,6 +24,7 @@
     "test-storybook:watch": "vitest --project=storybook --watch",
     "test-a11y": "vitest run --config vitest.a11y.config.ts && tsx ./script/check-a11y-baseline.ts",
     "test-a11y:update": "vitest run --config vitest.a11y.config.ts && tsx ./script/check-a11y-baseline.ts --update",
+    "test-hidden-mount": "vitest run --config vitest.hidden-mount.config.ts",
     "test-storybook:docker": "docker run -it --user $(id -u):$(id -g) -v $(pwd):/app/packages/openbridge-webcomponents -w /app/packages/openbridge-webcomponents openbridge-webcomponents-storybook npm run test-storybook",
     "build-storybook": "storybook build",
     "storybook:server": "http-server -p 6006 storybook-static",