npm - @oicl/openbridge-webcomponents - Versions diffs - 2.0.0-next.101 → 2.0.0-next.103 - Mend

@oicl/openbridge-webcomponents 2.0.0-next.101 → 2.0.0-next.103

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (77) hide show

package/dist/integration-systems/integration-button/integration-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"integration-button.js","sources":["../../../src/integration-systems/integration-button/integration-button.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {customElement} from '../../decorator.js';\nimport compentStyle from './integration-button.css?inline';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nexport interface IntegrationButtonReadout {\n label: string;\n value: string;\n unit: string;\n}\n\nexport enum IntegrationButtonVariant {\n normal = 'normal',\n flat = 'flat',\n}\n\nexport enum IntegrationButtonType {\n hug = 'hug',\n regular = 'regular',\n rich = 'rich',\n}\n\n/*\n `<obc-integration-button>` – A button component for integration systems.\n \n @slot leading-icon - Icon before label (shown when `hasLeadingIcon` is true)\n * @slot trailing-icon - Icon after label (shown when `hasTrailingIcon` is true)\n * @slot trailing-icon2 - Icon after label (shown when `hasTrailingIcon2` is true)\n * @slot label - Label text\n * @slot status - Status/description text (shown when `hasStatus` is true)\n * @slot info-label - Info label text\n * @slot info-status - Info status text\n * @slot integration-vessel-menu - Integration vessel menu to be shown when button is in activated state\n \n @fires click - Fired when the internal button is activated.\n \n @property {boolean} hasTrailingIcon - Shows the `trailing-icon` slot.\n * @property {boolean} hasTrailingIcon2 - Shows the `trailing-icon2` slot.\n * @property {boolean} hasLeadingIcon - Shows the `leading-icon` slot.\n * @property {boolean} hasstatus - Shows the `status` slot.\n * @property {IntegrationButtonReadout[]} readouts - List of readout items shown in the rich type.\n * @property {boolean} disabled - Disables the internal button.\n * @property {boolean} activated - Applies active state styling while a selection is pending.\n * @property {boolean} selected - Applies selected state styling.\n * @property {boolean} dividerBottom - Shows a bottom divider under the button.\n * @property {boolean} dividerRight - Shows a right divider to separate from adjacent buttons.\n * @property {IntegrationButtonVariant} variant - Visual variant (`normal` or `flat`).\n * @property {IntegrationButtonType} type - Layout type (`hug`, `regular`, or `rich`).\n * @experimental\n /\n@customElement('obc-integration-button')\nexport class ObcIntegrationButton extends LitElement {\n @property({type: Boolean}) hasTrailingIcon = false;\n /* @availableWhen hasTrailingIcon==true */\n @property({type: Boolean}) hasTrailingIcon2 = false;\n @property({type: Boolean}) hasLeadingIcon = false;\n @property({type: Boolean}) hasStatus = false;\n @property({type: Array, attribute: false})\n readouts: IntegrationButtonReadout[] = [];\n @property({type: Boolean}) disabled = false;\n @property({type: Boolean}) activated = false;\n @property({type: Boolean}) selected = false;\n @property({type: Boolean}) dividerBottom = false;\n @property({type: Boolean}) dividerRight = false;\n @property({type: String}) variant: IntegrationButtonVariant =\n IntegrationButtonVariant.normal;\n @property({type: String}) type: IntegrationButtonType =\n IntegrationButtonType.regular;\n\n private getButtonClasses() {\n return {\n 'touch-target': true,\n selected: this.selected,\n activated: this.activated,\n disabled: this.disabled,\n 'has-description': this.hasStatus,\n ['variant-' + this.variant]: true,\n ['type-' + this.type]: true,\n };\n }\n\n private onIntegrationVesselMenuClick(event: Event) {\n event.stopPropagation();\n }\n\n renderRich() {\n return html`\n <div class=\"button-horizontal-divider-container\">\n <div class=\"button-vertical-divider-container\">\n <button\n class=${classMap(this.getButtonClasses())}\n ?disabled=${this.disabled}\n >\n <div class=\"content-container\">\n <div class=\"main-container\">\n ${this.hasLeadingIcon\n ? html`<div class=\"icon leading\">\n <slot name=\"leading-icon\"></slot>\n </div>`\n : nothing}\n <div class=\"text-container\">\n <div class=\"label\"><slot name=\"label\"></slot></div>\n ${this.hasStatus\n ? html`<div class=\"status\">\n <slot name=\"status\"></slot>\n </div>`\n : nothing}\n </div>\n ${this.hasTrailingIcon\n ? html`<div class=\"icon-container\">\n ${this.hasTrailingIcon2\n ? html`<slot\n name=\"trailing-icon2\"\n class=\"icon trailing\"\n ></slot>`\n : nothing}\n <slot name=\"trailing-icon\" class=\"icon trailing\"></slot>\n </div>`\n : nothing}\n </div>\n <div class=\"info-container\">\n <div class=\"info-item\">\n <slot class=\"info-label\" name=\"info-label\"></slot>\n <slot class=\"info-status\" name=\"info-status\"></slot>\n </div>\n ${this.readouts.map(\n (readout) => html`\n <div class=\"info-readout-item\">\n <div class=\"info-item-label\">${readout.label}</div>\n <div class=\"info-item-value\">${readout.value}</div>\n <div class=\"info-item-unit\">${readout.unit}</div>\n </div>\n `\n )}\n </div>\n </div>\n </button>\n ${this.dividerRight\n ? html`<div class=\"divider-right\"></div>`\n : html`<div\n class=\"divider-right\"\n style=\"visibility: hidden;\"\n ></div>`}\n </div>\n ${this.dividerBottom\n ? html`<div class=\"divider-bottom\"></div>`\n : nothing}\n </div>\n <div\n class=${classMap({\n 'integration-vessel-menu-container': true,\n show: this.activated,\n })}\n @click=${this.onIntegrationVesselMenuClick}\n >\n <slot name=\"integration-vessel-menu\"></slot>\n </div>\n `;\n }\n\n renderRegular() {\n return html`\n <div class=\"button-vertical-divider-container\">\n <button\n class=${classMap(this.getButtonClasses())}\n ?disabled=${this.disabled}\n >\n <div class=\"content-container\">\n ${this.hasLeadingIcon\n ? html`<div class=\"icon leading\">\n <slot name=\"leading-icon\"></slot>\n </div>`\n : nothing}\n <div class=\"text-container\">\n <div class=\"label\"><slot name=\"label\"></slot></div>\n ${this.hasStatus\n ? html`<div class=\"status\"><slot name=\"status\"></slot></div>`\n : nothing}\n </div>\n ${this.hasTrailingIcon\n ? html`<div class=\"icon-container\">\n ${this.hasTrailingIcon2\n ? html`<slot\n name=\"trailing-icon2\"\n class=\"icon trailing\"\n ></slot>`\n : nothing}\n <slot name=\"trailing-icon\" class=\"icon trailing\"></slot>\n </div>`\n : nothing}\n </div>\n </button>\n ${this.dividerRight\n ? html`<div class=\"divider-right\"></div>`\n : html`<div class=\"divider-right\" style=\"visibility: hidden;\"></div>`}\n </div>\n <div\n class=${classMap({\n 'integration-vessel-menu-container': true,\n show: this.activated,\n })}\n @click=${this.onIntegrationVesselMenuClick}\n >\n <slot name=\"integration-vessel-menu\"></slot>\n </div>\n `;\n }\n\n renderHug() {\n return html`\n <div class=\"button-vertical-divider-container\">\n <button\n class=${classMap(this.getButtonClasses())}\n ?disabled=${this.disabled}\n >\n <div class=\"content-container\">\n ${this.hasLeadingIcon\n ? html`<div class=\"icon leading\">\n <slot name=\"leading-icon\"></slot>\n </div>`\n : nothing}\n <div class=\"text-container\">\n <div class=\"label\"><slot name=\"label\"></slot></div>\n ${this.hasStatus\n ? html`<div class=\"status\"><slot name=\"status\"></slot></div>`\n : nothing}\n </div>\n ${this.hasTrailingIcon\n ? html`<div class=\"icon-container\">\n ${this.hasTrailingIcon2\n ? html`<slot\n name=\"trailing-icon2\"\n class=\"icon trailing\"\n ></slot>`\n : nothing}\n <slot name=\"trailing-icon\" class=\"icon trailing\"></slot>\n </div>`\n : nothing}\n </div>\n </button>\n ${this.dividerRight\n ? html`<div class=\"divider-right\"></div>`\n : html`<div class=\"divider-right\" style=\"visibility: hidden;\"></div>`}\n </div>\n <div\n class=${classMap({\n 'integration-vessel-menu-container': true,\n show: this.activated,\n })}\n @click=${this.onIntegrationVesselMenuClick}\n >\n <slot name=\"integration-vessel-menu\"></slot>\n </div>\n `;\n }\n\n override render() {\n switch (this.type) {\n case IntegrationButtonType.hug: {\n return this.renderHug();\n }\n case IntegrationButtonType.rich: {\n return this.renderRich();\n }\n case IntegrationButtonType.regular:\n default: {\n return this.renderRegular();\n }\n }\n }\n\n static override styles = unsafeCSS(compentStyle);\n\n override updated() {\n let dividerHeight = 40;\n if (this.type === IntegrationButtonType.hug) {\n dividerHeight = 32;\n }\n if (this.type === IntegrationButtonType.rich) {\n dividerHeight = 64;\n }\n this.style.setProperty(\n '--integration-button-divider-height',\n `${dividerHeight}px`\n );\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-integration-button': ObcIntegrationButton;\n }\n}\n"],"names":["IntegrationButtonVariant","IntegrationButtonType"],"mappings":"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"}
1	+ {"version":3,"file":"integration-button.js","sources":["../../../src/integration-systems/integration-button/integration-button.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {customElement} from '../../decorator.js';\nimport compentStyle from './integration-button.css?inline';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nexport interface IntegrationButtonReadout {\n label: string;\n value: string;\n unit: string;\n}\n\nexport enum IntegrationButtonVariant {\n normal = 'normal',\n flat = 'flat',\n}\n\nexport enum IntegrationButtonType {\n hug = 'hug',\n regular = 'regular',\n rich = 'rich',\n}\n\n/*\n `<obc-integration-button>` – A button component for integration systems.\n \n @slot leading-icon - Icon before label (shown when `hasLeadingIcon` is true)\n * @slot trailing-icon - Icon after label (shown when `hasTrailingIcon` is true)\n * @slot trailing-icon2 - Icon after label (shown when `hasTrailingIcon2` is true)\n * @slot label - Label text\n * @slot status - Status/description text (shown when `hasStatus` is true)\n * @slot info-label - Info label text\n * @slot info-status - Info status text\n * @slot integration-vessel-menu - Integration vessel menu to be shown when button is in activated state\n \n @fires click - Fired when the internal button is activated.\n \n @experimental\n /\n@customElement('obc-integration-button')\nexport class ObcIntegrationButton extends LitElement {\n /* Shows the `trailing-icon` slot. /\n @property({type: Boolean}) hasTrailingIcon = false;\n /\n Shows the `trailing-icon2` slot.\n * @availableWhen hasTrailingIcon==true\n /\n @property({type: Boolean}) hasTrailingIcon2 = false;\n /* Shows the `leading-icon` slot. /\n @property({type: Boolean}) hasLeadingIcon = false;\n /* Shows the `status` slot. /\n @property({type: Boolean}) hasStatus = false;\n /* List of readout items shown in the rich type. /\n @property({type: Array, attribute: false})\n readouts: IntegrationButtonReadout[] = [];\n /* Disables the internal button. /\n @property({type: Boolean}) disabled = false;\n /* Applies active state styling while a selection is pending. /\n @property({type: Boolean}) activated = false;\n /* Applies selected state styling. /\n @property({type: Boolean}) selected = false;\n /* Shows a bottom divider under the button. /\n @property({type: Boolean}) dividerBottom = false;\n /* Shows a right divider to separate from adjacent buttons. /\n @property({type: Boolean}) dividerRight = false;\n /* Visual variant (`normal` or `flat`). /\n @property({type: String}) variant: IntegrationButtonVariant =\n IntegrationButtonVariant.normal;\n /* Layout type (`hug`, `regular`, or `rich`). */\n @property({type: String}) type: IntegrationButtonType =\n IntegrationButtonType.regular;\n\n private getButtonClasses() {\n return {\n 'touch-target': true,\n selected: this.selected,\n activated: this.activated,\n disabled: this.disabled,\n 'has-description': this.hasStatus,\n ['variant-' + this.variant]: true,\n ['type-' + this.type]: true,\n };\n }\n\n private onIntegrationVesselMenuClick(event: Event) {\n event.stopPropagation();\n }\n\n renderRich() {\n return html`\n <div class=\"button-horizontal-divider-container\">\n <div class=\"button-vertical-divider-container\">\n <button\n class=${classMap(this.getButtonClasses())}\n ?disabled=${this.disabled}\n >\n <div class=\"content-container\">\n <div class=\"main-container\">\n ${this.hasLeadingIcon\n ? html`<div class=\"icon leading\">\n <slot name=\"leading-icon\"></slot>\n </div>`\n : nothing}\n <div class=\"text-container\">\n <div class=\"label\"><slot name=\"label\"></slot></div>\n ${this.hasStatus\n ? html`<div class=\"status\">\n <slot name=\"status\"></slot>\n </div>`\n : nothing}\n </div>\n ${this.hasTrailingIcon\n ? html`<div class=\"icon-container\">\n ${this.hasTrailingIcon2\n ? html`<slot\n name=\"trailing-icon2\"\n class=\"icon trailing\"\n ></slot>`\n : nothing}\n <slot name=\"trailing-icon\" class=\"icon trailing\"></slot>\n </div>`\n : nothing}\n </div>\n <div class=\"info-container\">\n <div class=\"info-item\">\n <slot class=\"info-label\" name=\"info-label\"></slot>\n <slot class=\"info-status\" name=\"info-status\"></slot>\n </div>\n ${this.readouts.map(\n (readout) => html`\n <div class=\"info-readout-item\">\n <div class=\"info-item-label\">${readout.label}</div>\n <div class=\"info-item-value\">${readout.value}</div>\n <div class=\"info-item-unit\">${readout.unit}</div>\n </div>\n `\n )}\n </div>\n </div>\n </button>\n ${this.dividerRight\n ? html`<div class=\"divider-right\"></div>`\n : html`<div\n class=\"divider-right\"\n style=\"visibility: hidden;\"\n ></div>`}\n </div>\n ${this.dividerBottom\n ? html`<div class=\"divider-bottom\"></div>`\n : nothing}\n </div>\n <div\n class=${classMap({\n 'integration-vessel-menu-container': true,\n show: this.activated,\n })}\n @click=${this.onIntegrationVesselMenuClick}\n >\n <slot name=\"integration-vessel-menu\"></slot>\n </div>\n `;\n }\n\n renderRegular() {\n return html`\n <div class=\"button-vertical-divider-container\">\n <button\n class=${classMap(this.getButtonClasses())}\n ?disabled=${this.disabled}\n >\n <div class=\"content-container\">\n ${this.hasLeadingIcon\n ? html`<div class=\"icon leading\">\n <slot name=\"leading-icon\"></slot>\n </div>`\n : nothing}\n <div class=\"text-container\">\n <div class=\"label\"><slot name=\"label\"></slot></div>\n ${this.hasStatus\n ? html`<div class=\"status\"><slot name=\"status\"></slot></div>`\n : nothing}\n </div>\n ${this.hasTrailingIcon\n ? html`<div class=\"icon-container\">\n ${this.hasTrailingIcon2\n ? html`<slot\n name=\"trailing-icon2\"\n class=\"icon trailing\"\n ></slot>`\n : nothing}\n <slot name=\"trailing-icon\" class=\"icon trailing\"></slot>\n </div>`\n : nothing}\n </div>\n </button>\n ${this.dividerRight\n ? html`<div class=\"divider-right\"></div>`\n : html`<div class=\"divider-right\" style=\"visibility: hidden;\"></div>`}\n </div>\n <div\n class=${classMap({\n 'integration-vessel-menu-container': true,\n show: this.activated,\n })}\n @click=${this.onIntegrationVesselMenuClick}\n >\n <slot name=\"integration-vessel-menu\"></slot>\n </div>\n `;\n }\n\n renderHug() {\n return html`\n <div class=\"button-vertical-divider-container\">\n <button\n class=${classMap(this.getButtonClasses())}\n ?disabled=${this.disabled}\n >\n <div class=\"content-container\">\n ${this.hasLeadingIcon\n ? html`<div class=\"icon leading\">\n <slot name=\"leading-icon\"></slot>\n </div>`\n : nothing}\n <div class=\"text-container\">\n <div class=\"label\"><slot name=\"label\"></slot></div>\n ${this.hasStatus\n ? html`<div class=\"status\"><slot name=\"status\"></slot></div>`\n : nothing}\n </div>\n ${this.hasTrailingIcon\n ? html`<div class=\"icon-container\">\n ${this.hasTrailingIcon2\n ? html`<slot\n name=\"trailing-icon2\"\n class=\"icon trailing\"\n ></slot>`\n : nothing}\n <slot name=\"trailing-icon\" class=\"icon trailing\"></slot>\n </div>`\n : nothing}\n </div>\n </button>\n ${this.dividerRight\n ? html`<div class=\"divider-right\"></div>`\n : html`<div class=\"divider-right\" style=\"visibility: hidden;\"></div>`}\n </div>\n <div\n class=${classMap({\n 'integration-vessel-menu-container': true,\n show: this.activated,\n })}\n @click=${this.onIntegrationVesselMenuClick}\n >\n <slot name=\"integration-vessel-menu\"></slot>\n </div>\n `;\n }\n\n override render() {\n switch (this.type) {\n case IntegrationButtonType.hug: {\n return this.renderHug();\n }\n case IntegrationButtonType.rich: {\n return this.renderRich();\n }\n case IntegrationButtonType.regular:\n default: {\n return this.renderRegular();\n }\n }\n }\n\n static override styles = unsafeCSS(compentStyle);\n\n override updated() {\n let dividerHeight = 40;\n if (this.type === IntegrationButtonType.hug) {\n dividerHeight = 32;\n }\n if (this.type === IntegrationButtonType.rich) {\n dividerHeight = 64;\n }\n this.style.setProperty(\n '--integration-button-divider-height',\n `${dividerHeight}px`\n );\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-integration-button': ObcIntegrationButton;\n }\n}\n"],"names":["IntegrationButtonVariant","IntegrationButtonType"],"mappings":"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"}

package/dist/navigation-instruments/azimuth-thruster/azimuth-thruster.d.ts CHANGED Viewed

@@ -74,6 +74,20 @@ export declare class ObcAzimuthThruster extends LitElement {
     bottomPropeller: PropellerType;
     tickmarkStyle: TickmarkStyle;
     starboardPortIndicator: boolean;
+    /**
+     * Outer-ring diameter in CSS pixels. When set, the instrument renders at a
+     * fixed intrinsic size derived from the ring, arc shape and label reserve —
+     * so instruments sharing the same value have identical ring circumference
+     * regardless of label width or arc extent (like obc-donut-chart's
+     * fixedHeight). When unset (default), the instrument fills its container.
+     */
+    faceDiameter: number | undefined;
+    private _frame;
+    /** Whether the host size styles were set by applyPinnedHostSize. */
+    private _hostSizePinned;
+    private _resizeController;
+    firstUpdated(changed: PropertyValues): void;
+    updated(changed: PropertyValues): void;
     private get angleAdviceRaw();
     private getTickmarks;
     render(): import('lit-html').TemplateResult<1>;

package/dist/navigation-instruments/azimuth-thruster/azimuth-thruster.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"azimuth-thruster.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/azimuth-thruster/azimuth-thruster.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,UAAU,EAAY,MAAM,KAAK,CAAC;AAEhD,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,KAAK,CAAC;~~AACxC~~,OAAO,EAAC,eAAe,EAAE,QAAQ,EAAC,MAAM,aAAa,CAAC;AAGtD,OAAO,mBAAmB,CAAC;~~AAG3B~~,OAAO,EAAc,WAAW,EAAiB,MAAM,oBAAoB,CAAC;AAC5E,OAAO,EAAW,aAAa,EAAe,MAAM,sBAAsB,CAAC;AAC3E,OAAO,EAAC,YAAY,EAAC,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAC,aAAa,EAAC,MAAM,0BAA0B,CAAC;AAYvD;;GAEG;AACH,qBACa,kBAAmB,SAAQ,UAAU;IAChD,OAAO,CAAC,iBAAiB,CAAiE;IAEhE,KAAK,SAAK;IACV,aAAa,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5D,8CAA8C;IACpB,gBAAgB,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/D,4EAA4E;IAE5E,eAAe,EAAE,OAAO,CAAS;IACjC,8CAA8C;IACpB,2BAA2B,EAAE,MAAM,CAAO;IACpE,8CAA8C;IACnB,qBAAqB,EAAE,OAAO,CAAS;IAClE,2EAA2E;IAChD,QAAQ,EAAE,OAAO,CAAS;IACrD,8CAA8C;IACD,mBAAmB,EAAE,OAAO,CAClE;IACP,2EAA2E;IACjD,2BAA2B,EAAE,MAAM,CAAK;IAClE,2EAA2E;IAChD,eAAe,EAAE,OAAO,CAAS;IAC5D;;;;OAIG;IACuB,uBAAuB,EAAE,MAAM,GAAG,SAAS,CAAM;IAC3E;;;OAGG;IACuB,yBAAyB,EAAE,MAAM,GAAG,SAAS,CAC3D;IACZ;;;OAGG;IACuB,wBAAwB,EAAE,MAAM,GAAG,SAAS,CAC1D;IACe,UAAU,EAAE,OAAO,CAAS;IAC5B,eAAe,EAAE,OAAO,CAAS;IAClC,MAAM,SAAK;IACX,cAAc,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7D,+CAA+C;IACrB,iBAAiB,EAAE,MAAM,GAAG,SAAS,CAAC;IAChE,8EAA8E;IAE9E,gBAAgB,EAAE,OAAO,CAAS;IAClC,+CAA+C;IACrB,4BAA4B,EAAE,MAAM,CAAO;IACrE,+CAA+C;IACpB,sBAAsB,EAAE,OAAO,CAAS;IACnE,+CAA+C;IACF,oBAAoB,EAAE,OAAO,CACnE;IACP,6EAA6E;IACnD,4BAA4B,EAAE,MAAM,CAAK;IACzC,KAAK,EAAE,eAAe,CAA0B;IAChD,QAAQ,EAAE,QAAQ,CAAoB;IAEhE,OAAO,CAAC,QAAQ,CAGb;IACH,OAAO,CAAC,SAAS,CAId;IAEM,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IA0BxB,OAAO,EAAE,MAAM,CAAK;IACD,cAAc,EAAE,OAAO,CAAQ;IACjC,YAAY,EAAE,WAAW,EAAE,CAAM;IACjC,aAAa,EAAE,YAAY,EAAE,CAAM;IACnD,eAAe,EAAE,OAAO,CAAS;IAClC,YAAY,EAAE,aAAa,CAAsB;IACjD,eAAe,EAAE,aAAa,CAAsB;IACpD,aAAa,EAAE,aAAa,CAC9B;IACG,sBAAsB,EAAE,OAAO,CAAS;~~IAEnE~~,OAAO,KAAK,cAAc,GAqBzB;IAED,OAAO,CAAC,YAAY;IAyEX,MAAM;~~IAmEf~~,OAAgB,MAAM,0BAA6B;IAE1C,oBAAoB,IAAI,IAAI;CAKtC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,kBAAkB,CAAC;KAC5C;CACF"}
1	+ {"version":3,"file":"azimuth-thruster.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/azimuth-thruster/azimuth-thruster.ts"],"names":[],"mappings":"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"}

package/dist/navigation-instruments/azimuth-thruster/azimuth-thruster.js CHANGED Viewed

@@ -1,11 +1,12 @@
 import { unsafeCSS, LitElement, html } from "lit";
 import { property } from "lit/decorators.js";
+import { ResizeController } from "@lit-labs/observers/resize-controller.js";
+import { observeInnerBox, applyPinnedHostSize, computeRadialFrame, measureContainerPx, estimateLabelWidthPx } from "../../svghelpers/radial-frame.js";
 import { InstrumentState, Priority } from "../types.js";
 import { SetpointBundle } from "../../svghelpers/setpoint-bundle.js";
 import { thruster } from "../thruster/thruster.js";
 import "../watch/watch.js";
 import componentStyle from "./azimuth-thruster.css.js";
-import { ifDefined } from "lit/directives/if-defined.js";
 import { AdviceState } from "../watch/advice.js";
 import { TickmarkStyle, TickmarkType } from "../watch/tickmark.js";
 import { PropellerType } from "../thruster/propeller.js";
@@ -71,6 +72,8 @@ let ObcAzimuthThruster = class extends LitElement {
     this.bottomPropeller = PropellerType.none;
     this.tickmarkStyle = TickmarkStyle.regular;
     this.starboardPortIndicator = false;
+    this._hostSizePinned = false;
+    this._resizeController = new ResizeController(this, {});
   }
   willUpdate(changed) {
     super.willUpdate(changed);
@@ -97,6 +100,18 @@ let ObcAzimuthThruster = class extends LitElement {
       animateSetpoint: this.animateSetpoint
     });
   }
+  firstUpdated(changed) {
+    super.firstUpdated(changed);
+    observeInnerBox(this._resizeController, this.renderRoot);
+  }
+  updated(changed) {
+    super.updated(changed);
+    this._hostSizePinned = applyPinnedHostSize(
+      this,
+      this._frame,
+      this._hostSizePinned
+    );
+  }
   get angleAdviceRaw() {
     return this.angleAdvices.map((advice) => {
       const triggered = this.angleSetpoint !== void 0 && mapAngle0to360(this.angleSetpoint - advice.minAngle) < 180 && mapAngle0to360(this.angleSetpoint - advice.maxAngle) > 180;
@@ -168,19 +183,21 @@ let ObcAzimuthThruster = class extends LitElement {
   render() {
     const rotateAngle = this.angle;
     const tickmarks = this.getTickmarks();
-    let viewBox;
-    if (!this.hasLabelSpacer) {
-      viewBox = "-192 -192 384 384";
-    } else if (this.showLabels && !this.tickmarksInside) {
-      viewBox = "-236 -236 472 472";
-    } else {
-      viewBox = "-200 -200 400 400";
-    }
+    const frame = computeRadialFrame({
+      basePadding: this.hasLabelSpacer ? 24 : 16,
+      labelWidthPx: this.hasLabelSpacer && !this.tickmarksInside ? estimateLabelWidthPx(tickmarks.map((t) => t.text)) : 0,
+      containerPx: measureContainerPx(this),
+      faceDiameter: this.faceDiameter
+    });
+    this._frame = frame;
+    const shownTickmarks = frame.labelsHidden ? tickmarks.map((t) => ({ ...t, text: void 0 })) : tickmarks;
+    const viewBox = frame.viewBox;
     return html`
       <div class="container">
         <obc-watch
           .touching=${this.touching}
-          .tickmarks=${tickmarks}
+          .arcFrame=${frame}
+          .tickmarks=${shownTickmarks}
           .state=${this.state}
           .priority=${this.priority}
           .angleSetpoint=${this.angleSetpoint}
@@ -191,7 +208,6 @@ let ObcAzimuthThruster = class extends LitElement {
           .animateSetpoint=${this.animateSetpoint}
           .tickmarksInside=${this.tickmarksInside}
           .tickmarkStyle=${this.tickmarkStyle}
-          padding=${ifDefined(!this.hasLabelSpacer ? 16 : void 0)}
           .advices=${this.angleAdviceRaw}
           .starboardPortIndicator=${this.starboardPortIndicator}
         ></obc-watch>
@@ -337,6 +353,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean })
 ], ObcAzimuthThruster.prototype, "starboardPortIndicator", 2);
+__decorateClass([
+  property({ type: Number, attribute: "face-diameter" })
+], ObcAzimuthThruster.prototype, "faceDiameter", 2);
 ObcAzimuthThruster = __decorateClass([
   customElement("obc-azimuth-thruster")
 ], ObcAzimuthThruster);

package/dist/navigation-instruments/azimuth-thruster/azimuth-thruster.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"azimuth-thruster.js","sources":["../../../src/navigation-instruments/azimuth-thruster/azimuth-thruster.ts"],"sourcesContent":["import {html, LitElement, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport type {PropertyValues} from 'lit';\nimport {InstrumentState, Priority} from '../types.js';\nimport {SetpointBundle} from '../../svghelpers/setpoint-bundle.js';\nimport {thruster} from '../thruster/thruster.js';\nimport '../watch/watch.js';\nimport componentStyle from './azimuth-thruster.css?inline';\nimport {ifDefined} from 'lit/directives/if-defined.js';\nimport {AdviceState, AngleAdvice, AngleAdviceRaw} from '../watch/advice.js';\nimport {Tickmark, TickmarkStyle, TickmarkType} from '../watch/tickmark.js';\nimport {LinearAdvice} from '../thruster/advice.js';\nimport {PropellerType} from '../thruster/propeller.js';\nimport {customElement} from '../../decorator.js';\n\nfunction mapAngle0to360(angle: number): number {\n const a = angle % 360;\n if (a >= 0) {\n return a;\n } else {\n return a + 360;\n }\n}\n\n/*\n @stable\n /\n@customElement('obc-azimuth-thruster')\nexport class ObcAzimuthThruster extends LitElement {\n private _thrustSetpointId = `azimuth-thrust-sp-${Math.random().toString(36).slice(2, 9)}`;\n\n @property({type: Number}) angle = 0;\n @property({type: Number}) angleSetpoint: number \| undefined;\n /* @availableWhen angleSetpoint!=undefined /\n @property({type: Number}) newAngleSetpoint: number \| undefined;\n /* @availableWhen angleSetpoint!=undefined && autoAtAngleSetpoint==false /\n @property({type: Boolean})\n atAngleSetpoint: boolean = false;\n /* @availableWhen angleSetpoint!=undefined /\n @property({type: Number}) angleSetpointAtZeroDeadband: number = 0.5;\n /* @availableWhen angleSetpoint!=undefined /\n @property({type: Boolean}) angleSetpointOverride: boolean = false;\n /* @availableWhen angleSetpoint!=undefined \|\| thrustSetpoint!=undefined /\n @property({type: Boolean}) touching: boolean = false;\n /* @availableWhen angleSetpoint!=undefined /\n @property({type: Boolean, attribute: false}) autoAtAngleSetpoint: boolean =\n true;\n /* @availableWhen angleSetpoint!=undefined && autoAtAngleSetpoint==true /\n @property({type: Number}) autoAtAngleSetpointDeadband: number = 2;\n /* @availableWhen angleSetpoint!=undefined \|\| thrustSetpoint!=undefined /\n @property({type: Boolean}) animateSetpoint: boolean = false;\n /\n Interval (in degrees) for primary tickmarks.\n * When undefined or <= 0, no primary tickmarks are shown (only the zero line).\n * Default 90 gives ticks at 0°, 90°, 180°, 270°.\n /\n @property({type: Number}) primaryTickmarkInterval: number \| undefined = 90;\n /\n Interval (in degrees) for secondary tickmarks.\n * When undefined or <= 0, no secondary tickmarks are shown.\n /\n @property({type: Number}) secondaryTickmarkInterval: number \| undefined =\n undefined;\n /\n Interval (in degrees) for tertiary tickmarks.\n * When undefined or <= 0, no tertiary tickmarks are shown.\n /\n @property({type: Number}) tertiaryTickmarkInterval: number \| undefined =\n undefined;\n @property({type: Boolean}) showLabels: boolean = false;\n @property({type: Boolean}) tickmarksInside: boolean = false;\n @property({type: Number}) thrust = 0;\n @property({type: Number}) thrustSetpoint: number \| undefined;\n /* @availableWhen thrustSetpoint!=undefined /\n @property({type: Number}) newThrustSetpoint: number \| undefined;\n /* @availableWhen thrustSetpoint!=undefined && autoAtThrustSetpoint==false /\n @property({type: Boolean})\n atThrustSetpoint: boolean = false;\n /* @availableWhen thrustSetpoint!=undefined /\n @property({type: Number}) thrustSetpointAtZeroDeadband: number = 0.1;\n /* @availableWhen thrustSetpoint!=undefined /\n @property({type: Boolean}) thrustSetpointOverride: boolean = false;\n /* @availableWhen thrustSetpoint!=undefined /\n @property({type: Boolean, attribute: false}) autoAtThrustSetpoint: boolean =\n true;\n /* @availableWhen thrustSetpoint!=undefined && autoAtThrustSetpoint==true */\n @property({type: Number}) autoAtThrustSetpointDeadband: number = 1;\n @property({type: String}) state: InstrumentState = InstrumentState.active;\n @property({type: String}) priority: Priority = Priority.regular;\n\n private _angleSp = new SetpointBundle({\n angularWraparound: true,\n onAnimationEnd: () => this.requestUpdate(),\n });\n private _thrustSp = new SetpointBundle({\n defaultDeadband: 1,\n defaultZeroDeadband: 0.1,\n onAnimationEnd: () => this.requestUpdate(),\n });\n\n override willUpdate(changed: PropertyValues): void {\n super.willUpdate(changed);\n // Sync public prefixed props → bundles\n this._angleSp.sync({\n setpoint: this.angleSetpoint,\n newSetpoint: this.newAngleSetpoint,\n atSetpoint: this.atAngleSetpoint,\n touching: this.touching,\n autoAtSetpoint: this.autoAtAngleSetpoint,\n autoAtSetpointDeadband: this.autoAtAngleSetpointDeadband,\n setpointAtZeroDeadband: this.angleSetpointAtZeroDeadband,\n setpointOverride: this.angleSetpointOverride,\n animateSetpoint: this.animateSetpoint,\n });\n this._thrustSp.sync({\n setpoint: this.thrustSetpoint,\n newSetpoint: this.newThrustSetpoint,\n touching: this.touching,\n atSetpoint: this.atThrustSetpoint,\n autoAtSetpoint: this.autoAtThrustSetpoint,\n autoAtSetpointDeadband: this.autoAtThrustSetpointDeadband,\n setpointAtZeroDeadband: this.thrustSetpointAtZeroDeadband,\n setpointOverride: this.thrustSetpointOverride,\n animateSetpoint: this.animateSetpoint,\n });\n }\n @property({type: Number}) loading: number = 0;\n @property({type: Boolean, attribute: false}) hasLabelSpacer: boolean = true;\n @property({type: Array, attribute: false}) angleAdvices: AngleAdvice[] = [];\n @property({type: Array, attribute: false}) thrustAdvices: LinearAdvice[] = [];\n @property({type: Boolean}) singleDirection: boolean = false;\n @property({type: String}) topPropeller: PropellerType = PropellerType.none;\n @property({type: String}) bottomPropeller: PropellerType = PropellerType.none;\n @property({type: String}) tickmarkStyle: TickmarkStyle =\n TickmarkStyle.regular;\n @property({type: Boolean}) starboardPortIndicator: boolean = false;\n\n private get angleAdviceRaw(): AngleAdviceRaw[] {\n return this.angleAdvices.map((advice) => {\n const triggered =\n this.angleSetpoint !== undefined &&\n mapAngle0to360(this.angleSetpoint - advice.minAngle) < 180 &&\n mapAngle0to360(this.angleSetpoint - advice.maxAngle) > 180;\n let state: AdviceState;\n if (triggered) {\n state = AdviceState.triggered;\n } else if (advice.hinted) {\n state = AdviceState.hinted;\n } else {\n state = AdviceState.regular;\n }\n return {\n minAngle: advice.minAngle,\n maxAngle: advice.maxAngle,\n type: advice.type,\n state,\n };\n });\n }\n\n private getTickmarks(): Tickmark[] {\n const tickmarks: Tickmark[] = [];\n const skipAngles: number[] = [];\n\n // Helper for signed label text (0-180 positive, 181-359 negative)\n const labelText = (angle: number): string \| undefined => {\n if (!this.showLabels) return undefined;\n return angle <= 180 ? `${angle}` : `${angle - 360}`;\n };\n\n // Always add the zero line\n tickmarks.push({\n angle: 0,\n type: TickmarkType.zeroLine,\n text: this.showLabels ? '0' : undefined,\n });\n skipAngles.push(0);\n\n // Primary tickmarks — skip when undefined or <= 0 to prevent infinite loops\n const primaryInterval = this.primaryTickmarkInterval;\n if (\n primaryInterval !== undefined &&\n primaryInterval > 0 &&\n Number.isFinite(primaryInterval)\n ) {\n for (let i = primaryInterval; i < 360; i += primaryInterval) {\n if (skipAngles.includes(i)) continue;\n tickmarks.push({\n angle: i,\n type: TickmarkType.primary,\n text: labelText(i),\n });\n skipAngles.push(i);\n }\n }\n\n // Secondary tickmarks — skip when undefined or <= 0\n const secondaryInterval = this.secondaryTickmarkInterval;\n if (\n secondaryInterval !== undefined &&\n secondaryInterval > 0 &&\n Number.isFinite(secondaryInterval)\n ) {\n for (let i = 0; i < 360; i += secondaryInterval) {\n if (skipAngles.includes(i)) continue;\n tickmarks.push({\n angle: i,\n type: TickmarkType.secondary,\n });\n skipAngles.push(i);\n }\n }\n\n // Tertiary tickmarks — skip when undefined or <= 0\n const tertiaryInterval = this.tertiaryTickmarkInterval;\n if (\n tertiaryInterval !== undefined &&\n tertiaryInterval > 0 &&\n Number.isFinite(tertiaryInterval)\n ) {\n for (let i = 0; i < 360; i += tertiaryInterval) {\n if (skipAngles.includes(i)) continue;\n tickmarks.push({\n angle: i,\n type: TickmarkType.tertiary,\n });\n skipAngles.push(i);\n }\n }\n\n return tickmarks;\n }\n\n override render() {\n const rotateAngle = this.angle;\n\n const tickmarks = this.getTickmarks();\n\n let viewBox: string;\n if (!this.hasLabelSpacer) {\n viewBox = '-192 -192 384 384';\n } else if (this.showLabels && !this.tickmarksInside) {\n viewBox = '-236 -236 472 472';\n } else {\n viewBox = '-200 -200 400 400';\n }\n\n return html`\n <div class=\"container\">\n <obc-watch\n .touching=${this.touching}\n .tickmarks=${tickmarks}\n .state=${this.state}\n .priority=${this.priority}\n .angleSetpoint=${this.angleSetpoint}\n .newAngleSetpoint=${this.newAngleSetpoint}\n .atAngleSetpoint=${this._angleSp.computeAtSetpoint(this.angle)}\n .angleSetpointAtZeroDeadband=${this.angleSetpointAtZeroDeadband}\n .setpointOverride=${this.angleSetpointOverride}\n .animateSetpoint=${this.animateSetpoint}\n .tickmarksInside=${this.tickmarksInside}\n .tickmarkStyle=${this.tickmarkStyle}\n padding=${ifDefined(!this.hasLabelSpacer ? 16 : undefined)}\n .advices=${this.angleAdviceRaw}\n .starboardPortIndicator=${this.starboardPortIndicator}\n ></obc-watch>\n <svg viewBox=${viewBox} xmlns=\"http://www.w3.org/2000/svg\">\n <g transform=\"rotate(${rotateAngle})\">\n ${thruster(\n this.thrust,\n this.thrustSetpoint,\n this.state,\n this.priority,\n {\n atSetpoint: this.atThrustSetpoint,\n singleSided: true,\n singleDirection: false,\n singleDirectionHalfSize: this.singleDirection,\n tunnel: false,\n autoAtSetpoint: this.autoAtThrustSetpoint,\n autoAtSetpointDeadband: this.autoAtThrustSetpointDeadband,\n setpointAtZeroDeadband: this.thrustSetpointAtZeroDeadband,\n touching: this.touching,\n advices: this.thrustAdvices,\n topPropeller: this.topPropeller,\n bottomPropeller: this.bottomPropeller,\n narrow: true,\n newSetpoint: this.newThrustSetpoint,\n setpointId: this._thrustSetpointId,\n animateSetpoint: this.animateSetpoint,\n departingNewSetpoint: this._thrustSp.departingNewSetpoint,\n setpointOverride: this.thrustSetpointOverride,\n }\n )}\n </g>\n </svg>\n </div>\n `;\n }\n\n static override styles = unsafeCSS(componentStyle);\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this._angleSp.dispose();\n this._thrustSp.dispose();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-azimuth-thruster': ObcAzimuthThruster;\n }\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"azimuth-thruster.js","sources":["../../../src/navigation-instruments/azimuth-thruster/azimuth-thruster.ts"],"sourcesContent":["import {html, LitElement, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport type {PropertyValues} from 'lit';\nimport {ResizeController} from '@lit-labs/observers/resize-controller.js';\nimport {\n applyPinnedHostSize,\n computeRadialFrame,\n estimateLabelWidthPx,\n measureContainerPx,\n observeInnerBox,\n type RadialFrame,\n} from '../../svghelpers/radial-frame.js';\nimport {InstrumentState, Priority} from '../types.js';\nimport {SetpointBundle} from '../../svghelpers/setpoint-bundle.js';\nimport {thruster} from '../thruster/thruster.js';\nimport '../watch/watch.js';\nimport componentStyle from './azimuth-thruster.css?inline';\nimport {AdviceState, AngleAdvice, AngleAdviceRaw} from '../watch/advice.js';\nimport {Tickmark, TickmarkStyle, TickmarkType} from '../watch/tickmark.js';\nimport {LinearAdvice} from '../thruster/advice.js';\nimport {PropellerType} from '../thruster/propeller.js';\nimport {customElement} from '../../decorator.js';\n\nfunction mapAngle0to360(angle: number): number {\n const a = angle % 360;\n if (a >= 0) {\n return a;\n } else {\n return a + 360;\n }\n}\n\n/*\n @stable\n /\n@customElement('obc-azimuth-thruster')\nexport class ObcAzimuthThruster extends LitElement {\n private _thrustSetpointId = `azimuth-thrust-sp-${Math.random().toString(36).slice(2, 9)}`;\n\n @property({type: Number}) angle = 0;\n @property({type: Number}) angleSetpoint: number \| undefined;\n /* @availableWhen angleSetpoint!=undefined /\n @property({type: Number}) newAngleSetpoint: number \| undefined;\n /* @availableWhen angleSetpoint!=undefined && autoAtAngleSetpoint==false /\n @property({type: Boolean})\n atAngleSetpoint: boolean = false;\n /* @availableWhen angleSetpoint!=undefined /\n @property({type: Number}) angleSetpointAtZeroDeadband: number = 0.5;\n /* @availableWhen angleSetpoint!=undefined /\n @property({type: Boolean}) angleSetpointOverride: boolean = false;\n /* @availableWhen angleSetpoint!=undefined \|\| thrustSetpoint!=undefined /\n @property({type: Boolean}) touching: boolean = false;\n /* @availableWhen angleSetpoint!=undefined /\n @property({type: Boolean, attribute: false}) autoAtAngleSetpoint: boolean =\n true;\n /* @availableWhen angleSetpoint!=undefined && autoAtAngleSetpoint==true /\n @property({type: Number}) autoAtAngleSetpointDeadband: number = 2;\n /* @availableWhen angleSetpoint!=undefined \|\| thrustSetpoint!=undefined /\n @property({type: Boolean}) animateSetpoint: boolean = false;\n /\n Interval (in degrees) for primary tickmarks.\n * When undefined or <= 0, no primary tickmarks are shown (only the zero line).\n * Default 90 gives ticks at 0°, 90°, 180°, 270°.\n /\n @property({type: Number}) primaryTickmarkInterval: number \| undefined = 90;\n /\n Interval (in degrees) for secondary tickmarks.\n * When undefined or <= 0, no secondary tickmarks are shown.\n /\n @property({type: Number}) secondaryTickmarkInterval: number \| undefined =\n undefined;\n /\n Interval (in degrees) for tertiary tickmarks.\n * When undefined or <= 0, no tertiary tickmarks are shown.\n /\n @property({type: Number}) tertiaryTickmarkInterval: number \| undefined =\n undefined;\n @property({type: Boolean}) showLabels: boolean = false;\n @property({type: Boolean}) tickmarksInside: boolean = false;\n @property({type: Number}) thrust = 0;\n @property({type: Number}) thrustSetpoint: number \| undefined;\n /* @availableWhen thrustSetpoint!=undefined /\n @property({type: Number}) newThrustSetpoint: number \| undefined;\n /* @availableWhen thrustSetpoint!=undefined && autoAtThrustSetpoint==false /\n @property({type: Boolean})\n atThrustSetpoint: boolean = false;\n /* @availableWhen thrustSetpoint!=undefined /\n @property({type: Number}) thrustSetpointAtZeroDeadband: number = 0.1;\n /* @availableWhen thrustSetpoint!=undefined /\n @property({type: Boolean}) thrustSetpointOverride: boolean = false;\n /* @availableWhen thrustSetpoint!=undefined /\n @property({type: Boolean, attribute: false}) autoAtThrustSetpoint: boolean =\n true;\n /* @availableWhen thrustSetpoint!=undefined && autoAtThrustSetpoint==true /\n @property({type: Number}) autoAtThrustSetpointDeadband: number = 1;\n @property({type: String}) state: InstrumentState = InstrumentState.active;\n @property({type: String}) priority: Priority = Priority.regular;\n\n private _angleSp = new SetpointBundle({\n angularWraparound: true,\n onAnimationEnd: () => this.requestUpdate(),\n });\n private _thrustSp = new SetpointBundle({\n defaultDeadband: 1,\n defaultZeroDeadband: 0.1,\n onAnimationEnd: () => this.requestUpdate(),\n });\n\n override willUpdate(changed: PropertyValues): void {\n super.willUpdate(changed);\n // Sync public prefixed props → bundles\n this._angleSp.sync({\n setpoint: this.angleSetpoint,\n newSetpoint: this.newAngleSetpoint,\n atSetpoint: this.atAngleSetpoint,\n touching: this.touching,\n autoAtSetpoint: this.autoAtAngleSetpoint,\n autoAtSetpointDeadband: this.autoAtAngleSetpointDeadband,\n setpointAtZeroDeadband: this.angleSetpointAtZeroDeadband,\n setpointOverride: this.angleSetpointOverride,\n animateSetpoint: this.animateSetpoint,\n });\n this._thrustSp.sync({\n setpoint: this.thrustSetpoint,\n newSetpoint: this.newThrustSetpoint,\n touching: this.touching,\n atSetpoint: this.atThrustSetpoint,\n autoAtSetpoint: this.autoAtThrustSetpoint,\n autoAtSetpointDeadband: this.autoAtThrustSetpointDeadband,\n setpointAtZeroDeadband: this.thrustSetpointAtZeroDeadband,\n setpointOverride: this.thrustSetpointOverride,\n animateSetpoint: this.animateSetpoint,\n });\n }\n @property({type: Number}) loading: number = 0;\n @property({type: Boolean, attribute: false}) hasLabelSpacer: boolean = true;\n @property({type: Array, attribute: false}) angleAdvices: AngleAdvice[] = [];\n @property({type: Array, attribute: false}) thrustAdvices: LinearAdvice[] = [];\n @property({type: Boolean}) singleDirection: boolean = false;\n @property({type: String}) topPropeller: PropellerType = PropellerType.none;\n @property({type: String}) bottomPropeller: PropellerType = PropellerType.none;\n @property({type: String}) tickmarkStyle: TickmarkStyle =\n TickmarkStyle.regular;\n @property({type: Boolean}) starboardPortIndicator: boolean = false;\n /\n Outer-ring diameter in CSS pixels. When set, the instrument renders at a\n * fixed intrinsic size derived from the ring, arc shape and label reserve —\n * so instruments sharing the same value have identical ring circumference\n * regardless of label width or arc extent (like obc-donut-chart's\n * fixedHeight). When unset (default), the instrument fills its container.\n /\n @property({type: Number, attribute: 'face-diameter'})\n faceDiameter: number \| undefined;\n\n private _frame: RadialFrame \| undefined;\n\n /* Whether the host size styles were set by applyPinnedHostSize. */\n private _hostSizePinned = false;\n\n private _resizeController = new ResizeController(this, {});\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 this._hostSizePinned = applyPinnedHostSize(\n this,\n this._frame,\n this._hostSizePinned\n );\n }\n\n private get angleAdviceRaw(): AngleAdviceRaw[] {\n return this.angleAdvices.map((advice) => {\n const triggered =\n this.angleSetpoint !== undefined &&\n mapAngle0to360(this.angleSetpoint - advice.minAngle) < 180 &&\n mapAngle0to360(this.angleSetpoint - advice.maxAngle) > 180;\n let state: AdviceState;\n if (triggered) {\n state = AdviceState.triggered;\n } else if (advice.hinted) {\n state = AdviceState.hinted;\n } else {\n state = AdviceState.regular;\n }\n return {\n minAngle: advice.minAngle,\n maxAngle: advice.maxAngle,\n type: advice.type,\n state,\n };\n });\n }\n\n private getTickmarks(): Tickmark[] {\n const tickmarks: Tickmark[] = [];\n const skipAngles: number[] = [];\n\n // Helper for signed label text (0-180 positive, 181-359 negative)\n const labelText = (angle: number): string \| undefined => {\n if (!this.showLabels) return undefined;\n return angle <= 180 ? `${angle}` : `${angle - 360}`;\n };\n\n // Always add the zero line\n tickmarks.push({\n angle: 0,\n type: TickmarkType.zeroLine,\n text: this.showLabels ? '0' : undefined,\n });\n skipAngles.push(0);\n\n // Primary tickmarks — skip when undefined or <= 0 to prevent infinite loops\n const primaryInterval = this.primaryTickmarkInterval;\n if (\n primaryInterval !== undefined &&\n primaryInterval > 0 &&\n Number.isFinite(primaryInterval)\n ) {\n for (let i = primaryInterval; i < 360; i += primaryInterval) {\n if (skipAngles.includes(i)) continue;\n tickmarks.push({\n angle: i,\n type: TickmarkType.primary,\n text: labelText(i),\n });\n skipAngles.push(i);\n }\n }\n\n // Secondary tickmarks — skip when undefined or <= 0\n const secondaryInterval = this.secondaryTickmarkInterval;\n if (\n secondaryInterval !== undefined &&\n secondaryInterval > 0 &&\n Number.isFinite(secondaryInterval)\n ) {\n for (let i = 0; i < 360; i += secondaryInterval) {\n if (skipAngles.includes(i)) continue;\n tickmarks.push({\n angle: i,\n type: TickmarkType.secondary,\n });\n skipAngles.push(i);\n }\n }\n\n // Tertiary tickmarks — skip when undefined or <= 0\n const tertiaryInterval = this.tertiaryTickmarkInterval;\n if (\n tertiaryInterval !== undefined &&\n tertiaryInterval > 0 &&\n Number.isFinite(tertiaryInterval)\n ) {\n for (let i = 0; i < 360; i += tertiaryInterval) {\n if (skipAngles.includes(i)) continue;\n tickmarks.push({\n angle: i,\n type: TickmarkType.tertiary,\n });\n skipAngles.push(i);\n }\n }\n\n return tickmarks;\n }\n\n override render() {\n const rotateAngle = this.angle;\n\n const tickmarks = this.getTickmarks();\n\n const frame = computeRadialFrame({\n basePadding: this.hasLabelSpacer ? 24 : 16,\n labelWidthPx:\n this.hasLabelSpacer && !this.tickmarksInside\n ? estimateLabelWidthPx(tickmarks.map((t) => t.text))\n : 0,\n containerPx: measureContainerPx(this),\n faceDiameter: this.faceDiameter,\n });\n this._frame = frame;\n const shownTickmarks = frame.labelsHidden\n ? tickmarks.map((t) => ({...t, text: undefined}))\n : tickmarks;\n const viewBox = frame.viewBox;\n\n return html`\n <div class=\"container\">\n <obc-watch\n .touching=${this.touching}\n .arcFrame=${frame}\n .tickmarks=${shownTickmarks}\n .state=${this.state}\n .priority=${this.priority}\n .angleSetpoint=${this.angleSetpoint}\n .newAngleSetpoint=${this.newAngleSetpoint}\n .atAngleSetpoint=${this._angleSp.computeAtSetpoint(this.angle)}\n .angleSetpointAtZeroDeadband=${this.angleSetpointAtZeroDeadband}\n .setpointOverride=${this.angleSetpointOverride}\n .animateSetpoint=${this.animateSetpoint}\n .tickmarksInside=${this.tickmarksInside}\n .tickmarkStyle=${this.tickmarkStyle}\n .advices=${this.angleAdviceRaw}\n .starboardPortIndicator=${this.starboardPortIndicator}\n ></obc-watch>\n <svg viewBox=${viewBox} xmlns=\"http://www.w3.org/2000/svg\">\n <g transform=\"rotate(${rotateAngle})\">\n ${thruster(\n this.thrust,\n this.thrustSetpoint,\n this.state,\n this.priority,\n {\n atSetpoint: this.atThrustSetpoint,\n singleSided: true,\n singleDirection: false,\n singleDirectionHalfSize: this.singleDirection,\n tunnel: false,\n autoAtSetpoint: this.autoAtThrustSetpoint,\n autoAtSetpointDeadband: this.autoAtThrustSetpointDeadband,\n setpointAtZeroDeadband: this.thrustSetpointAtZeroDeadband,\n touching: this.touching,\n advices: this.thrustAdvices,\n topPropeller: this.topPropeller,\n bottomPropeller: this.bottomPropeller,\n narrow: true,\n newSetpoint: this.newThrustSetpoint,\n setpointId: this._thrustSetpointId,\n animateSetpoint: this.animateSetpoint,\n departingNewSetpoint: this._thrustSp.departingNewSetpoint,\n setpointOverride: this.thrustSetpointOverride,\n }\n )}\n </g>\n </svg>\n </div>\n `;\n }\n\n static override styles = unsafeCSS(componentStyle);\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this._angleSp.dispose();\n this._thrustSp.dispose();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-azimuth-thruster': ObcAzimuthThruster;\n }\n}\n"],"names":[],"mappings":"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"}

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

@@ -43,9 +43,9 @@ export declare enum CompassPriorityElement {
  *   Supports spinning dots (`rotType="dots"`) — the dot animation is
  *   amplified by `rotDotAnimationFactor` so small physical values still
  *   read at a glance — and a banana-shaped arc bar (`rotType="bar"`)
- *   showing the HDG→COG span. Bar extent is driven by the physical value
- *   only (gain is not applied). Position on the outer scale ring or inner
- *   circle via `rotPosition`.
+ *   showing the rate of turn as an arc anchored at the current heading.
+ *   Bar extent is driven by the physical value only (gain is not applied).
+ *   Position on the outer scale ring or inner circle via `rotPosition`.
  * - **Environmental overlays**: Wind speed/direction and current
  *   speed/direction indicators on the watch face.
  * - **Vessel image**: Configurable vessel silhouette centered on the
@@ -78,59 +78,69 @@ export declare enum CompassPriorityElement {
  * ></obc-compass>
  * ```
  *
- * @property {number} heading - The current heading of the vessel in degrees.
- * @property {number} courseOverGround - The current course over ground in degrees.
- * @property {number | null} headingSetpoint - The set point for the heading in degrees.
- * @property {boolean} atHeadingSetpoint - Indicates if the vessel is at the heading set point.
- * @property {boolean} autoAtHeadingSetpoint - Enables automatic at heading set point calculation.
- * @property {number} autoAtHeadingSetpointDeadband - The deadband for the heading set point in degrees.
- * @property {boolean} touching - Indicates if the compass is being touched.
- * @property {Array<AngleAdvice>} headingAdvices - An array of angle advices for the compass.
- * @property {number | null} currentWindSpeedKnots - The wind speed in knots.
- * @property {number | null} windFromDirection - The direction the wind is coming from in degrees.
- * @property {number | null} currentSpeed - The current speed, number of arrows.
- * @property {number | null} currentFromDirection - The direction the current is coming from in degrees.
- * @property {VesselImage} vesselImage - The image of the vessel.
- * @property {number|undefined} rateOfTurnDegreesPerMinute - Measured rate of turn in degrees per minute (the AIS / ITU-R M.1371 convention). Sign controls direction (positive = starboard / clockwise). Drives both the bar extent and the dot animation.
- * @property {number} rotDotAnimationFactor - Visual amplification for the dot animation only. Default `18` (≈1 rpm at 20°/min).
- * @property {number} rotationsPerMinute - **Deprecated.** Use `rateOfTurnDegreesPerMinute` instead. Kept as a backward-compatible fallback when `rateOfTurnDegreesPerMinute` is `undefined`.
- * @property {RotType} rotType - ROT display mode: `'dots'` (spinning dots, default) or `'bar'` (arc bar from HDG to COG).
- * @property {RotPosition} rotPosition - ROT track position: `'innerCircle'` (default) or `'scale'` (on the outer ring).
- * @property {Priority} priority - Color priority: `Priority.enhanced` uses the blue/enhanced color palette, `Priority.regular` (default) uses the standard palette.
  *
  * @ignition-base-height: 512px
  * @ignition-base-width: 512px
  * @stable
  */
 export declare class ObcCompass extends LitElement {
+    /** The current heading of the vessel in degrees. */
     heading: number;
+    /** The current course over ground in degrees. */
     courseOverGround: number;
+    /** The set point for the heading in degrees. */
     headingSetpoint: number | null;
     /** @availableWhen headingSetpoint!=null */
     newHeadingSetpoint: number | undefined;
-    /** @availableWhen headingSetpoint!=null && autoAtHeadingSetpoint==false */
+    /**
+     * Indicates if the vessel is at the heading set point.
+     * @availableWhen headingSetpoint!=null && autoAtHeadingSetpoint==false
+     */
     atHeadingSetpoint: boolean;
     /** @availableWhen headingSetpoint!=null */
     headingSetpointAtZeroDeadband: number;
     /** @availableWhen headingSetpoint!=null */
     headingSetpointOverride: boolean;
-    /** @availableWhen headingSetpoint!=null */
+    /**
+     * Enables automatic at heading set point calculation.
+     * @availableWhen headingSetpoint!=null
+     */
     autoAtHeadingSetpoint: boolean;
-    /** @availableWhen headingSetpoint!=null && autoAtHeadingSetpoint==true */
+    /**
+     * The deadband for the heading set point in degrees.
+     * @availableWhen headingSetpoint!=null && autoAtHeadingSetpoint==true
+     */
     autoAtHeadingSetpointDeadband: number;
     /** @availableWhen headingSetpoint!=null */
     animateSetpoint: boolean;
-    /** @availableWhen headingSetpoint!=null */
+    /**
+     * Indicates if the compass is being touched.
+     * @availableWhen headingSetpoint!=null
+     */
     touching: boolean;
+    /** An array of angle advices for the compass. */
     headingAdvices: AngleAdvice[];
-    /** @availableWhen windFromDirection!=null */
+    /**
+     * The wind speed in knots.
+     * @availableWhen windFromDirection!=null
+     */
     currentWindSpeedKnots: number | null;
-    /** @availableWhen currentWindSpeedKnots!=null */
+    /**
+     * The direction the wind is coming from in degrees.
+     * @availableWhen currentWindSpeedKnots!=null
+     */
     windFromDirection: number | null;
-    /** @availableWhen currentFromDirection!=null */
+    /**
+     * The current speed, number of arrows.
+     * @availableWhen currentFromDirection!=null
+     */
     currentSpeed: number | null;
-    /** @availableWhen currentSpeed!=null */
+    /**
+     * The direction the current is coming from in degrees.
+     * @availableWhen currentSpeed!=null
+     */
     currentFromDirection: number | null;
+    /** The image of the vessel. */
     vesselImage: VesselImage;
     /**
      * Measured rate of turn in degrees per minute (positive = starboard).
@@ -147,12 +157,18 @@ export declare class ObcCompass extends LitElement {
      */
     rotDotAnimationFactor: number;
     /**
+     * Legacy rate-of-turn input, in rotations per minute. When
+     * `rateOfTurnDegreesPerMinute` is `undefined`, this value is used
+     * (unconverted) as the fallback ROT, driving both the spinning dot ring
+     * and the bar extent.
      * @deprecated Use `rateOfTurnDegreesPerMinute` (and optionally
      * `rotDotAnimationFactor`) instead. Takes effect only when
      * `rateOfTurnDegreesPerMinute` is `undefined`.
      */
     rotationsPerMinute: number;
+    /** ROT display mode: `'dots'` (spinning dots, default) or `'bar'` (a rate-of-turn arc anchored at the current heading, its length proportional to the rate of turn). */
     rotType: RotType;
+    /** ROT track position: `'innerCircle'` (default) or `'scale'` (on the outer ring). */
     rotPosition: RotPosition;
     /**
      * Bar-extent reference value in **degrees per minute**. The bar fills the
@@ -172,6 +188,7 @@ export declare class ObcCompass extends LitElement {
     rotAtZeroDeadband: number;
     direction: CompassDirection;
     state: InstrumentState;
+    /** Color priority: `Priority.enhanced` uses the blue/enhanced color palette, `Priority.regular` (default) uses the standard palette. */
     priority: Priority;
     /** @availableWhen priority==enhanced */
     priorityElements: CompassPriorityElement[];
@@ -179,6 +196,14 @@ export declare class ObcCompass extends LitElement {
     showLabels: boolean;
     /** When true, labels and north arrow are placed inside the outer ring. */
     tickmarksInside: boolean;
+    /**
+     * Outer-ring diameter in CSS pixels. When set, the instrument renders at a
+     * fixed intrinsic size derived from the ring, arc shape and label reserve —
+     * so instruments sharing the same value have identical ring circumference
+     * regardless of label width or arc extent (like obc-donut-chart's
+     * fixedHeight). When unset (default), the instrument fills its container.
+     */
+    faceDiameter: number | undefined;
     private _headingSp;
     willUpdate(changed: PropertyValues): void;
     disconnectedCallback(): void;
@@ -190,7 +215,19 @@ export declare class ObcCompass extends LitElement {
      * the deprecation window.
      */
     private get _effectiveRotDegPerMin();
-    private getPadding;
+    /**
+     * Pixel cost of the outside decor: the always-rendered north-arrow glyph
+     * plus, only while shown, the NSWE labels (both keep a constant on-screen
+     * size via `1/scale` terms). Feeds the frame's width-aware reserve,
+     * replacing the former empirical `72 + delta(clientSize)` padding.
+     * Wind/current symbols at their default radius are covered by the base
+     * padding of 72.
+     */
+    private getOutsideDecorPx;
+    /** Whether the host size styles were set by applyPinnedHostSize. */
+    private _hostSizePinned;
+    private _frame;
+    updated(changed: PropertyValues): void;
     private get angleAdviceRaw();
     private priorityFor;
     private colorFor;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"compass.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/compass/compass.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,cAAc,EAAY,MAAM,KAAK,CAAC;AAE1D,OAAO,mBAAmB,CAAC;AAG3B,OAAO,EAAc,WAAW,EAAiB,MAAM,oBAAoB,CAAC;~~AAE5E~~,OAAO,EACL,WAAW,EAGX,OAAO,EACP,WAAW,EACZ,MAAM,mBAAmB,CAAC;AAI3B,OAAO,EAAC,eAAe,EAAE,QAAQ,EAAC,MAAM,aAAa,CAAC;AACtD,OAAO,EAAC,OAAO,EAAC,CAAC;AAEjB,oBAAY,gBAAgB;IAC1B,OAAO,YAAY;IACnB,SAAS,cAAc;IACvB,QAAQ,aAAa;CACtB;AAED,oBAAY,sBAAsB;IAChC,GAAG,QAAQ;IACX,GAAG,QAAQ;IACX,GAAG,QAAQ;IACX,IAAI,SAAS;IACb,OAAO,YAAY;CACpB;AAED~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqFG~~;AACH,qBACa,UAAW,SAAQ,UAAU;~~IACd~~,OAAO,SAAK;~~IACZ~~,gBAAgB,SAAK;~~IAErB~~,eAAe,EAAE,MAAM,GAAG,IAAI,CAAQ;IAChE,2CAA2C;IACjB,kBAAkB,EAAE,MAAM,GAAG,SAAS,CAAC;IACjE~~,2EAA2E~~;~~IAChD~~,iBAAiB,EAAE,OAAO,CAAS;IAC9D,2CAA2C;IACjB,6BAA6B,EAAE,MAAM,CAAO;IACtE,2CAA2C;IAChB,uBAAuB,EAAE,OAAO,CAAS;IACpE~~,2CAA2C~~;~~IACE~~,qBAAqB,EAAE,OAAO,CACpE;IACP~~,0EAA0E~~;~~IAChD~~,6BAA6B,EAAE,MAAM,CAAK;IACpE,2CAA2C;IAChB,eAAe,EAAE,OAAO,CAAS;IAC5D~~,2CAA2C~~;~~IAChB~~,QAAQ,EAAE,OAAO,CAAS;~~IACV~~,cAAc,EAAE,WAAW,EAAE,CAAM;IAC9E~~,6CAA6C~~;~~IACnB~~,qBAAqB,EAAE,MAAM,GAAG,IAAI,CAAQ;IACtE~~,iDAAiD~~;~~IACvB~~,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAQ;IAClE~~,gDAAgD~~;~~IACtB~~,YAAY,EAAE,MAAM,GAAG,IAAI,CAAQ;IAC7D~~,wCAAwC~~;~~IACd~~,oBAAoB,EAAE,MAAM,GAAG,IAAI,CAAQ;~~IAC3C~~,WAAW,EAAE,WAAW,CAA0B;IAC5E;;;;;OAKG;IACuB,0BAA0B,EAAE,MAAM,GAAG,SAAS,CAAC;IACzE;;;;;OAKG;IACuB,qBAAqB,EAAE,MAAM,CAAM;IAC7D~~;;;;OAIG~~;IACuB,kBAAkB,EAAE,MAAM,CAAK;~~IAC/B~~,OAAO,EAAE,OAAO,CAAgB;~~IAChC~~,WAAW,EAAE,WAAW,CAA2B;IAC7E;;;;;;;;;OASG;IACuB,WAAW,EAAE,MAAM,CAAM;IACnD,kCAAkC;IACR,YAAY,EAAE,MAAM,CAAM;IACzB,gBAAgB,EAAE,OAAO,CAAS;IAC7D,kCAAkC;IACR,iBAAiB,EAAE,MAAM,CAAyB;IAClD,SAAS,EAAE,gBAAgB,CAC1B;IACD,KAAK,EAAE,eAAe,CAA0B;~~IAChD~~,QAAQ,EAAE,QAAQ,CAAoB;IAChE,wCAAwC;IAExC,gBAAgB,EAAE,sBAAsB,EAAE,CAAgC;IAC1E,gDAAgD;IACrB,UAAU,EAAE,OAAO,CAAS;IACvD,0EAA0E;IAC/C,eAAe,EAAE,OAAO,CAAS;~~IAE5D~~,OAAO,CAAC,UAAU,CAGf;IAEM,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAezC,oBAAoB,IAAI,IAAI;IAOrC,OAAO,CAAC,iBAAiB,CAAkC;IAE3D;;;;;OAKG;IACH,OAAO,KAAK,sBAAsB,GAEjC;IAED,OAAO,CAAC,~~UAAU~~;~~IAclB~~,OAAO,KAAK,cAAc,GAUzB;IAED,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,QAAQ;IAMhB,OAAO,CAAC,WAAW;IAWV,MAAM;~~IA6Ef~~,OAAgB,MAAM,0BAwBpB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
1	+ {"version":3,"file":"compass.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/compass/compass.ts"],"names":[],"mappings":"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"}

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

@@ -5,6 +5,7 @@ import { TickmarkType } from "../watch/tickmark.js";
 import { arrow, ArrowStyle } from "./arrow.js";
 import { AdviceState } from "../watch/advice.js";
 import { ResizeController } from "@lit-labs/observers/resize-controller.js";
+import { NORTH_ARROW_WIDTH_PX, NSWE_LABEL_WIDTH_PX, applyPinnedHostSize, computeRadialFrame, measureContainerPx } from "../../svghelpers/radial-frame.js";
 import { SetpointBundle } from "../../svghelpers/setpoint-bundle.js";
 import { RotType, RotPosition, ROT_ZERO_DEADBAND_DEG } from "../rate-of-turn/rot-renderer.js";
 import { customElement } from "../../decorator.js";
@@ -75,6 +76,7 @@ let ObcCompass = class extends LitElement {
       onAnimationEnd: () => this.requestUpdate()
     });
     this._resizeController = new ResizeController(this, {});
+    this._hostSizePinned = false;
   }
   willUpdate(changed) {
     super.willUpdate(changed);
@@ -103,17 +105,27 @@ let ObcCompass = class extends LitElement {
   get _effectiveRotDegPerMin() {
     return this.rateOfTurnDegreesPerMinute ?? this.rotationsPerMinute;
   }
-  getPadding() {
-    const size = Math.min(this.clientHeight, this.clientWidth);
-    const deltaWidth = 512 - size;
-    const steps = deltaWidth / 128;
-    let deltaPadding;
-    if (deltaWidth > 0) {
-      deltaPadding = steps * 48;
-    } else {
-      deltaPadding = steps * 6;
+  /**
+   * Pixel cost of the outside decor: the always-rendered north-arrow glyph
+   * plus, only while shown, the NSWE labels (both keep a constant on-screen
+   * size via `1/scale` terms). Feeds the frame's width-aware reserve,
+   * replacing the former empirical `72 + delta(clientSize)` padding.
+   * Wind/current symbols at their default radius are covered by the base
+   * padding of 72.
+   */
+  getOutsideDecorPx() {
+    if (this.tickmarksInside) {
+      return 0;
     }
-    return 72 + deltaPadding;
+    return NORTH_ARROW_WIDTH_PX + (this.showLabels ? NSWE_LABEL_WIDTH_PX : 0);
+  }
+  updated(changed) {
+    super.updated(changed);
+    this._hostSizePinned = applyPinnedHostSize(
+      this,
+      this._frame,
+      this._hostSizePinned
+    );
   }
   get angleAdviceRaw() {
     return this.headingAdvices.map(({ minAngle, maxAngle, hinted, type }) => {
@@ -145,22 +157,27 @@ let ObcCompass = class extends LitElement {
       { angle: 180, type: TickmarkType.main },
       { angle: 270, type: TickmarkType.main }
     ];
-    const padding = this.getPadding();
-    const width = (176 + padding) * 2;
-    const viewBox = `-${width / 2} -${width / 2} ${width} ${width}`;
+    const frame = computeRadialFrame({
+      basePadding: 72,
+      labelWidthPx: this.getOutsideDecorPx(),
+      containerPx: measureContainerPx(this),
+      faceDiameter: this.faceDiameter
+    });
+    this._frame = frame;
+    const viewBox = frame.viewBox;
     return html`
       <div class="container">
         <obc-watch
           .touching=${this.touching}
-          .padding=${padding}
+          .arcFrame=${frame}
           .advices=${this.angleAdviceRaw}
           .tickmarks=${tickmarks}
           .state=${this.state}
           .watchCircleType=${WatchCircleType.triple}
-          .showLabels=${this.showLabels}
+          .showLabels=${this.showLabels && !frame.labelsHidden}
           .tickmarksInside=${this.tickmarksInside}
           .crosshairEnabled=${true}
-          .northArrow=${true}
+          .northArrow=${!frame.labelsHidden}
           .angleSetpoint=${this.headingSetpoint ?? void 0}
           .newAngleSetpoint=${this.newHeadingSetpoint}
           .atAngleSetpoint=${this._headingSp.computeAtSetpoint(this.heading)}
@@ -346,6 +363,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean })
 ], ObcCompass.prototype, "tickmarksInside", 2);
+__decorateClass([
+  property({ type: Number, attribute: "face-diameter" })
+], ObcCompass.prototype, "faceDiameter", 2);
 ObcCompass = __decorateClass([
   customElement("obc-compass")
 ], ObcCompass);