npm - @oicl/openbridge-webcomponents - Versions diffs - 0.0.20260407101310 → 0.0.20260408055359 - Mend

@oicl/openbridge-webcomponents 0.0.20260407101310 → 0.0.20260408055359

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 (73) hide show

package/dist/building-blocks/instrument-radial/instrument-radial.d.ts CHANGED Viewed

@@ -46,6 +46,9 @@ export declare class ObcInstrumentRadial extends ObcInstrumentRadial_base {
     advices: GaugeRadialAdvice[];
     clipTop: number;
     clipBottom: number;
+    zoomToFitArc: boolean;
+    private _radiusOffset;
+    private _arcFrame;
     get minAngle(): number;
     get maxAngle(): number;
     private get _derivedNeedleColor();

package/dist/building-blocks/instrument-radial/instrument-radial.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"instrument-radial.d.ts","sourceRoot":"","sources":["../../../src/building-blocks/instrument-radial/instrument-radial.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,UAAU,EAAqB,MAAM,KAAK,CAAC;AAGxD,OAAO,EAEL,UAAU,EAEX,MAAM,8CAA8C,CAAC;AAEtD,OAAO,EAAC,QAAQ,EAAC,MAAM,gDAAgD,CAAC;AAExE,OAAO,EAAC,aAAa,EAAC,MAAM,gDAAgD,CAAC;AAC7E,OAAO,EAAC,eAAe,EAAE,QAAQ,EAAC,MAAM,uCAAuC,CAAC;~~AAGhF~~,oBAAY,kBAAkB;IAC5B,MAAM,WAAW;IACjB,GAAG,QAAQ;IACX,MAAM,WAAW;CAClB;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;CACjB;;AACD,qBACa,mBAAoB,SAAQ,wBAAyB;IAKtC,KAAK,EAAE,eAAe,CAA0B;IAChD,QAAQ,EAAE,QAAQ,CAAoB;IAEtC,KAAK,SAAK;IACV,QAAQ,SAAO;IACf,QAAQ,SAAK;IACT,QAAQ,EAAG,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IACrC,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,UAAU,EAAE,OAAO,CAAS;IACvD;;;OAGG;IACuB,uBAAuB,EAAE,MAAM,GAAG,SAAS,CAAM;IAC3E;;;OAGG;IACuB,yBAAyB,EAAE,MAAM,GAAG,SAAS,CAAM;IAC7E;;;OAGG;IACuB,wBAAwB,EAAE,MAAM,GAAG,SAAS,CAC1D;IACc,IAAI,EAAE,kBAAkB,CACtB;IACF,UAAU,EAAE,kBAAkB,CAC5B;IACD,eAAe,EAAE,OAAO,CAAS;IAClC,aAAa,EAAE,aAAa,CAC9B;IACmB,OAAO,EAAE,iBAAiB,EAAE,CAAM;IACnD,OAAO,EAAE,MAAM,CAAK;IACpB,UAAU,EAAE,MAAM,CAAK;IAEjD,IAAI,QAAQ,IAAI,MAAM,CAErB;IAED,IAAI,QAAQ,IAAI,MAAM,CAErB;IAED,OAAO,KAAK,mBAAmB,GAU9B;IAED,OAAO,KAAK,gBAAgB,GAe3B;IAEQ,MAAM;~~IA6Df~~,OAAO,KAAK,OAAO,~~GAkBlB~~;IAED,IAAI,SAAS,IAAI,QAAQ,EAAE,CAkI1B;IAED,OAAO,KAAK,QAAQ,GAkBnB;IAED,OAAgB,MAAM,0BAmCpB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,uBAAuB,EAAE,mBAAmB,CAAC;KAC9C;CACF"}
1	+ {"version":3,"file":"instrument-radial.d.ts","sourceRoot":"","sources":["../../../src/building-blocks/instrument-radial/instrument-radial.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,UAAU,EAAqB,MAAM,KAAK,CAAC;AAGxD,OAAO,EAEL,UAAU,EAEX,MAAM,8CAA8C,CAAC;AAEtD,OAAO,EAAC,QAAQ,EAAC,MAAM,gDAAgD,CAAC;AAExE,OAAO,EAAC,aAAa,EAAC,MAAM,gDAAgD,CAAC;AAC7E,OAAO,EAAC,eAAe,EAAE,QAAQ,EAAC,MAAM,uCAAuC,CAAC;AAWhF,oBAAY,kBAAkB;IAC5B,MAAM,WAAW;IACjB,GAAG,QAAQ;IACX,MAAM,WAAW;CAClB;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;CACjB;;AACD,qBACa,mBAAoB,SAAQ,wBAAyB;IAKtC,KAAK,EAAE,eAAe,CAA0B;IAChD,QAAQ,EAAE,QAAQ,CAAoB;IAEtC,KAAK,SAAK;IACV,QAAQ,SAAO;IACf,QAAQ,SAAK;IACT,QAAQ,EAAG,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IACrC,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,UAAU,EAAE,OAAO,CAAS;IACvD;;;OAGG;IACuB,uBAAuB,EAAE,MAAM,GAAG,SAAS,CAAM;IAC3E;;;OAGG;IACuB,yBAAyB,EAAE,MAAM,GAAG,SAAS,CAAM;IAC7E;;;OAGG;IACuB,wBAAwB,EAAE,MAAM,GAAG,SAAS,CAC1D;IACc,IAAI,EAAE,kBAAkB,CACtB;IACF,UAAU,EAAE,kBAAkB,CAC5B;IACD,eAAe,EAAE,OAAO,CAAS;IAClC,aAAa,EAAE,aAAa,CAC9B;IACmB,OAAO,EAAE,iBAAiB,EAAE,CAAM;IACnD,OAAO,EAAE,MAAM,CAAK;IACpB,UAAU,EAAE,MAAM,CAAK;IACtB,YAAY,EAAE,OAAO,CAAS;IAEzD,OAAO,CAAC,aAAa,CAAK;IAC1B,OAAO,CAAC,SAAS,CAAgC;IAEjD,IAAI,QAAQ,IAAI,MAAM,CAErB;IAED,IAAI,QAAQ,IAAI,MAAM,CAErB;IAED,OAAO,KAAK,mBAAmB,GAU9B;IAED,OAAO,KAAK,gBAAgB,GAe3B;IAEQ,MAAM;IAsFf,OAAO,KAAK,OAAO,GAmBlB;IAED,IAAI,SAAS,IAAI,QAAQ,EAAE,CAkI1B;IAED,OAAO,KAAK,QAAQ,GAkBnB;IAED,OAAgB,MAAM,0BAmCpB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,uBAAuB,EAAE,mBAAmB,CAAC;KAC9C;CACF"}

package/dist/building-blocks/instrument-radial/instrument-radial.js CHANGED Viewed

@@ -2,10 +2,11 @@ import { LitElement, html, nothing, svg, css } from "lit";
 import { property } from "lit/decorators.js";
 import { customElement } from "../../decorator.js";
 import { AdviceState } from "../../navigation-instruments/watch/advice.js";
-import { WatchCircleType } from "../../navigation-instruments/watch/watch.js";
+import { WatchCircleType, innerRingRadiusFor, OUTER_RING_RADIUS } from "../../navigation-instruments/watch/watch.js";
 import { TickmarkStyle, TickmarkType } from "../../navigation-instruments/watch/tickmark.js";
 import { InstrumentState, Priority } from "../../navigation-instruments/types.js";
 import { SetpointMixin } from "../../svghelpers/setpoint-mixin.js";
+import { computeZoomToFitArcFrame } from "../../svghelpers/arc-frame.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -41,8 +42,9 @@ let ObcInstrumentRadial = class extends SetpointMixin(LitElement) {
     this.advices = [];
     this.clipTop = 0;
     this.clipBottom = 0;
+    this.zoomToFitArc = false;
+    this._radiusOffset = 0;
   }
-  // in percent of height
   get minAngle() {
     return this.getAngle(this.minValue);
   }
@@ -75,10 +77,37 @@ let ObcInstrumentRadial = class extends SetpointMixin(LitElement) {
         fillColor: barColor
       }
     ];
-    const width = 448;
-    const height = width * (1 - this.clipTop / 100 - this.clipBottom / 100);
-    const top = -width / 2 + width * this.clipTop / 100;
-    const viewBox = `-${width / 2} ${top} ${width} ${height}`;
+    const areas = [
+      {
+        startAngle: this.minAngle,
+        endAngle: this.maxAngle,
+        roundInsideCut: true,
+        roundOutsideCut: true
+      }
+    ];
+    const watchCircleType = this.type === "needle" ? WatchCircleType.single : WatchCircleType.double;
+    let viewBox;
+    if (this.zoomToFitArc) {
+      const ext = 48;
+      const targetSize = (176 + ext) * 2;
+      const frame = computeZoomToFitArcFrame({
+        areas,
+        outerRadius: OUTER_RING_RADIUS,
+        innerRadius: innerRingRadiusFor(watchCircleType),
+        extension: ext,
+        targetSize
+      });
+      viewBox = frame.viewBox;
+      this._radiusOffset = frame.radiusOffset;
+      this._arcFrame = frame;
+    } else {
+      this._radiusOffset = 0;
+      this._arcFrame = void 0;
+      const width = 448;
+      const height = width * (1 - this.clipTop / 100 - this.clipBottom / 100);
+      const top = -width / 2 + width * this.clipTop / 100;
+      viewBox = `${-width / 2} ${top} ${width} ${height}`;
+    }
     return html`
       <div class="container">
         <obc-watch
@@ -95,18 +124,13 @@ let ObcInstrumentRadial = class extends SetpointMixin(LitElement) {
           .tickmarksInside=${this.tickmarksInside}
           .tickmarkStyle=${this.tickmarkStyle}
           .advices=${this._advices}
-          .areas=${[
-      {
-        startAngle: this.minAngle,
-        endAngle: this.maxAngle,
-        roundInsideCut: true,
-        roundOutsideCut: true
-      }
-    ]}
-          .watchCircleType=${this.type === "needle" ? WatchCircleType.single : WatchCircleType.double}
+          .areas=${areas}
+          .watchCircleType=${watchCircleType}
           .barAreas=${barAreas}
-          .clipTop=${this.clipTop}
-          .clipBottom=${this.clipBottom}
+          .clipTop=${this.zoomToFitArc ? 0 : this.clipTop}
+          .clipBottom=${this.zoomToFitArc ? 0 : this.clipBottom}
+          .zoomToFitArc=${this.zoomToFitArc}
+          .arcFrame=${this._arcFrame}
         ></obc-watch>
         <svg class="gauge-radial" viewBox=${viewBox}>${this._needle}</svg>
       </div>
@@ -117,17 +141,18 @@ let ObcInstrumentRadial = class extends SetpointMixin(LitElement) {
       return nothing;
     }
     const needleColor = this.needleColor ?? this._derivedNeedleColor;
+    const rOff = this._radiusOffset;
     if (this.type === "needle") {
       return svg`<g transform="rotate(${this.getAngle(this.value)}) translate(-256, -256)">
       <circle cx="256" cy="256" r="14" fill=${needleColor}/>
-      <rect x="250" y="96" width="12" height="192" rx="6" fill=${needleColor}/>
-      <rect x="252" y="98" width="8" height="188" rx="4" stroke=${needleColor} fill=${needleColor} stroke-width="4"/>
-      </svg>
+      <rect x="250" y="${96 - rOff}" width="12" height="${192 + rOff}" rx="6" fill=${needleColor}/>
+      <rect x="252" y="${98 - rOff}" width="8" height="${188 + rOff}" rx="4" stroke=${needleColor} fill=${needleColor} stroke-width="4"/>
+      </g>
 `;
     } else {
       return svg`<g transform="rotate(${this.getAngle(this.value)}) translate(-256, -256)">
-<rect x="252" y="96" width="8" height="48" rx="4" fill=${needleColor} stroke="var(--border-silhouette-color)"/>
-</svg>
+<rect x="252" y="${96 - rOff}" width="8" height="48" rx="4" fill=${needleColor} stroke="var(--border-silhouette-color)"/>
+</g>
       `;
     }
   }
@@ -332,6 +357,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Number })
 ], ObcInstrumentRadial.prototype, "clipBottom", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcInstrumentRadial.prototype, "zoomToFitArc", 2);
 ObcInstrumentRadial = __decorateClass([
   customElement("obc-instrument-radial")
 ], ObcInstrumentRadial);

package/dist/building-blocks/instrument-radial/instrument-radial.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"instrument-radial.js","sources":["../../../src/building-blocks/instrument-radial/instrument-radial.ts"],"sourcesContent":["import {css, LitElement, html, svg, nothing} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {customElement} from '../../decorator.js';\nimport {\n AdviceState,\n AdviceType,\n AngleAdviceRaw,\n} from '../../navigation-instruments/watch/advice.js';\nimport {WatchCircleType} from '../../navigation-instruments/watch/watch.js';\nimport {Tickmark} from '../../navigation-instruments/watch/tickmark.js';\nimport {TickmarkType} from '../../navigation-instruments/watch/tickmark.js';\nimport {TickmarkStyle} from '../../navigation-instruments/watch/tickmark.js';\nimport {InstrumentState, Priority} from '../../navigation-instruments/types.js';\nimport {SetpointMixin} from '../../svghelpers/setpoint-mixin.js';\n\nexport enum ObcGaugeRadialType {\n filled = 'filled',\n bar = 'bar',\n needle = 'needle',\n}\n\nexport interface GaugeRadialAdvice {\n minValue: number;\n maxValue: number;\n type: AdviceType;\n hinted: boolean;\n}\n@customElement('obc-instrument-radial')\nexport class ObcInstrumentRadial extends SetpointMixin(LitElement) {\n // setpoint, newSetpoint, atSetpoint, touching, autoAtSetpoint,\n // autoAtSetpointDeadband, setpointAtZeroDeadband, setpointOverride\n // — all inherited from SetpointMixin\n\n @property({type: String}) state: InstrumentState = InstrumentState.active;\n @property({type: String}) priority: Priority = Priority.regular;\n\n @property({type: Number}) value = 0;\n @property({type: Number}) maxValue = 100;\n @property({type: Number}) minValue = 0;\n @property({attribute: false}) getAngle!: (v: number) => number;\n @property({type: String}) needleColor: string \| undefined;\n @property({type: String}) barColor: string \| undefined;\n @property({type: Boolean}) showLabels: boolean = false;\n /*\n Interval for primary tickmarks in value units.\n * When undefined or <= 0, no primary tickmarks are shown.\n /\n @property({type: Number}) primaryTickmarkInterval: number \| undefined = 50;\n /\n Interval for secondary tickmarks in value units.\n * When undefined or <= 0, no secondary tickmarks are shown.\n /\n @property({type: Number}) secondaryTickmarkInterval: number \| undefined = 10;\n /\n Interval for tertiary tickmarks in value units.\n * When undefined or <= 0, no tertiary tickmarks are shown.\n /\n @property({type: Number}) tertiaryTickmarkInterval: number \| undefined =\n undefined;\n @property({type: String}) type: ObcGaugeRadialType =\n ObcGaugeRadialType.filled;\n @property({type: String}) needleType: ObcGaugeRadialType =\n ObcGaugeRadialType.filled;\n @property({type: Boolean}) tickmarksInside: boolean = false;\n @property({type: String}) tickmarkStyle: TickmarkStyle =\n TickmarkStyle.regular;\n @property({type: Array, attribute: false}) advices: GaugeRadialAdvice[] = [];\n @property({type: Number}) clipTop: number = 0; // in percent of height\n @property({type: Number}) clipBottom: number = 0; // in percent of height\n\n get minAngle(): number {\n return this.getAngle(this.minValue);\n }\n\n get maxAngle(): number {\n return this.getAngle(this.maxValue);\n }\n\n private get _derivedNeedleColor(): string {\n if (\n this.state === InstrumentState.loading \|\|\n this.state === InstrumentState.off\n ) {\n return 'transparent';\n }\n return this.priority === Priority.enhanced\n ? 'var(--instrument-enhanced-secondary-color)'\n : 'var(--instrument-regular-secondary-color)';\n }\n\n private get _derivedBarColor(): string {\n if (\n this.state === InstrumentState.loading \|\|\n this.state === InstrumentState.off\n ) {\n return 'transparent';\n }\n if (this.type === ObcGaugeRadialType.filled) {\n return this.priority === Priority.enhanced\n ? 'var(--instrument-enhanced-secondary-color)'\n : 'var(--instrument-regular-secondary-color)';\n }\n return this.priority === Priority.enhanced\n ? 'var(--instrument-enhanced-tertiary-color)'\n : 'var(--instrument-regular-tertiary-color)';\n }\n\n override render() {\n const barColor = this.barColor ?? this._derivedBarColor;\n const setpointAngle =\n this.setpoint !== undefined ? this.getAngle(this.setpoint) : undefined;\n const newSetpointAngle =\n this.newSetpoint !== undefined\n ? this.getAngle(this.newSetpoint)\n : undefined;\n\n const barAreas =\n this.type === ObcGaugeRadialType.needle\n ? []\n : [\n {\n startAngle: this.getAngle(0),\n endAngle: this.getAngle(this.value),\n fillColor: barColor,\n },\n ];\n\n const width = 448;\n const height = width (1 - this.clipTop / 100 - this.clipBottom / 100);\n const top = -width / 2 + (width * this.clipTop) / 100;\n const viewBox = `-${width / 2} ${top} ${width} ${height}`;\n\n return html`\n <div class=\"container\">\n <obc-watch\n .state=${this.state}\n .priority=${this.priority}\n .angleSetpoint=${setpointAngle}\n .newAngleSetpoint=${newSetpointAngle}\n .atAngleSetpoint=${this.computeAtSetpoint(this.value)}\n .angleSetpointAtZeroDeadband=${this.setpointAtZeroDeadband}\n .setpointOverride=${this.setpointOverride}\n .animateSetpoint=${this.animateSetpoint}\n .padding=${48}\n .tickmarks=${this.tickmarks}\n .tickmarksInside=${this.tickmarksInside}\n .tickmarkStyle=${this.tickmarkStyle}\n .advices=${this._advices}\n .areas=${[\n {\n startAngle: this.minAngle,\n endAngle: this.maxAngle,\n roundInsideCut: true,\n roundOutsideCut: true,\n },\n ]}\n .watchCircleType=${this.type === ObcGaugeRadialType.needle\n ? WatchCircleType.single\n : WatchCircleType.double}\n .barAreas=${barAreas}\n .clipTop=${this.clipTop}\n .clipBottom=${this.clipBottom}\n ></obc-watch>\n <svg class=\"gauge-radial\" viewBox=${viewBox}>${this._needle}</svg>\n </div>\n `;\n }\n\n private get _needle() {\n if (this.type === ObcGaugeRadialType.filled) {\n return nothing;\n }\n const needleColor = this.needleColor ?? this._derivedNeedleColor;\n if (this.type === ObcGaugeRadialType.needle) {\n return svg`<g transform=\"rotate(${this.getAngle(this.value)}) translate(-256, -256)\">\n <circle cx=\"256\" cy=\"256\" r=\"14\" fill=${needleColor}/>\n <rect x=\"250\" y=\"96\" width=\"12\" height=\"192\" rx=\"6\" fill=${needleColor}/>\n <rect x=\"252\" y=\"98\" width=\"8\" height=\"188\" rx=\"4\" stroke=${needleColor} fill=${needleColor} stroke-width=\"4\"/>\n </svg> \n`;\n } else {\n return svg`<g transform=\"rotate(${this.getAngle(this.value)}) translate(-256, -256)\">\n<rect x=\"252\" y=\"96\" width=\"8\" height=\"48\" rx=\"4\" fill=${needleColor} stroke=\"var(--border-silhouette-color)\"/>\n</svg>\n `;\n }\n }\n\n get tickmarks(): Tickmark[] {\n const tickmarks: Tickmark[] = [];\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 < this.maxValue; i += primaryInterval) {\n tickmarks.push({\n angle: this.getAngle(i),\n type: TickmarkType.primary,\n text: this.showLabels ? i.toString() : undefined,\n });\n }\n\n if (this.showLabels && this.maxValue % primaryInterval === 0) {\n tickmarks.push({\n angle: this.getAngle(this.maxValue),\n type: TickmarkType.textOnly,\n text: this.showLabels ? this.maxValue.toString() : undefined,\n });\n }\n\n for (let i = -primaryInterval; i > this.minValue; i -= primaryInterval) {\n tickmarks.push({\n angle: this.getAngle(i),\n type: TickmarkType.primary,\n text: this.showLabels ? i.toString() : undefined,\n });\n }\n\n if (this.showLabels && this.minValue % primaryInterval === 0) {\n tickmarks.push({\n angle: this.getAngle(this.minValue),\n type: TickmarkType.textOnly,\n text: this.showLabels ? this.minValue.toString() : undefined,\n });\n }\n }\n\n // Secondary tickmarks — skip when undefined or <= 0 to prevent infinite loops\n const secondaryInterval = this.secondaryTickmarkInterval;\n if (\n secondaryInterval !== undefined &&\n secondaryInterval > 0 &&\n Number.isFinite(secondaryInterval)\n ) {\n const existingTickmarks = tickmarks.map((t) => t.angle);\n\n for (\n let i = secondaryInterval;\n i < this.maxValue;\n i += secondaryInterval\n ) {\n if (existingTickmarks.includes(this.getAngle(i))) {\n continue;\n }\n tickmarks.push({\n angle: this.getAngle(i),\n type: TickmarkType.secondary,\n });\n }\n\n for (\n let i = -secondaryInterval;\n i > this.minValue;\n i -= secondaryInterval\n ) {\n if (existingTickmarks.includes(this.getAngle(i))) {\n continue;\n }\n tickmarks.push({\n angle: this.getAngle(i),\n type: TickmarkType.secondary,\n });\n }\n }\n\n // Tertiary tickmarks — skip when undefined or <= 0 to prevent infinite loops\n const tertiaryInterval = this.tertiaryTickmarkInterval;\n if (\n tertiaryInterval !== undefined &&\n tertiaryInterval > 0 &&\n Number.isFinite(tertiaryInterval)\n ) {\n const existingTickmarks = tickmarks.map((t) => t.angle);\n\n for (let i = tertiaryInterval; i < this.maxValue; i += tertiaryInterval) {\n if (existingTickmarks.includes(this.getAngle(i))) {\n continue;\n }\n tickmarks.push({\n angle: this.getAngle(i),\n type: TickmarkType.tertiary,\n });\n }\n\n for (\n let i = -tertiaryInterval;\n i > this.minValue;\n i -= tertiaryInterval\n ) {\n if (existingTickmarks.includes(this.getAngle(i))) {\n continue;\n }\n tickmarks.push({\n angle: this.getAngle(i),\n type: TickmarkType.tertiary,\n });\n }\n }\n\n // Add the zero tickmark\n\n const zeroTickmark = tickmarks.find((t) => t.angle === this.getAngle(0));\n if (zeroTickmark) {\n zeroTickmark.type =\n this.minValue < 0 ? TickmarkType.main : TickmarkType.textOnly;\n } else {\n tickmarks.push({\n angle: this.getAngle(0),\n type: this.minValue < 0 ? TickmarkType.main : TickmarkType.textOnly,\n text: this.showLabels ? '0' : undefined,\n });\n }\n\n return tickmarks;\n }\n\n private get _advices(): AngleAdviceRaw[] {\n return this.advices.map((advice) => {\n const minAngle = this.getAngle(advice.minValue);\n const maxAngle = this.getAngle(advice.maxValue);\n let state = advice.hinted ? AdviceState.hinted : AdviceState.regular;\n if (this.value >= advice.minValue && this.value <= advice.maxValue) {\n state = AdviceState.triggered;\n }\n\n return {\n minAngle,\n maxAngle,\n type: advice.type,\n state,\n hideMinTickmark: advice.minValue === this.minValue,\n hideMaxTickmark: advice.maxValue === this.maxValue,\n };\n });\n }\n\n static override styles = css`\n * {\n box-sizing: border-box;\n }\n\n .container {\n position: relative;\n width: 100%;\n height: 100%;\n }\n\n .container > * {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n }\n\n obc-watch {\n anchor-name: --watch;\n }\n\n .speed-gauge-value {\n position: absolute;\n top: clamp(\n 70%,\n calc(80% - (anchor-size(--watch height) - 200px) * 0.2),\n 80%\n );\n left: 50%;\n transform: translateX(-50%);\n width: fit-content;\n height: fit-content;\n }\n `;\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-instrument-radial': ObcInstrumentRadial;\n }\n}\n"],"names":["ObcGaugeRadialType"],"mappings":"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"}
1	+ {"version":3,"file":"instrument-radial.js","sources":["../../../src/building-blocks/instrument-radial/instrument-radial.ts"],"sourcesContent":["import {css, LitElement, html, svg, nothing} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {customElement} from '../../decorator.js';\nimport {\n AdviceState,\n AdviceType,\n AngleAdviceRaw,\n} from '../../navigation-instruments/watch/advice.js';\nimport {WatchCircleType} from '../../navigation-instruments/watch/watch.js';\nimport {Tickmark} from '../../navigation-instruments/watch/tickmark.js';\nimport {TickmarkType} from '../../navigation-instruments/watch/tickmark.js';\nimport {TickmarkStyle} from '../../navigation-instruments/watch/tickmark.js';\nimport {InstrumentState, Priority} from '../../navigation-instruments/types.js';\nimport {SetpointMixin} from '../../svghelpers/setpoint-mixin.js';\nimport {\n OUTER_RING_RADIUS,\n innerRingRadiusFor,\n} from '../../navigation-instruments/watch/watch.js';\nimport {\n computeZoomToFitArcFrame,\n type ZoomToFitArcFrame,\n} from '../../svghelpers/arc-frame.js';\n\nexport enum ObcGaugeRadialType {\n filled = 'filled',\n bar = 'bar',\n needle = 'needle',\n}\n\nexport interface GaugeRadialAdvice {\n minValue: number;\n maxValue: number;\n type: AdviceType;\n hinted: boolean;\n}\n@customElement('obc-instrument-radial')\nexport class ObcInstrumentRadial extends SetpointMixin(LitElement) {\n // setpoint, newSetpoint, atSetpoint, touching, autoAtSetpoint,\n // autoAtSetpointDeadband, setpointAtZeroDeadband, setpointOverride\n // — all inherited from SetpointMixin\n\n @property({type: String}) state: InstrumentState = InstrumentState.active;\n @property({type: String}) priority: Priority = Priority.regular;\n\n @property({type: Number}) value = 0;\n @property({type: Number}) maxValue = 100;\n @property({type: Number}) minValue = 0;\n @property({attribute: false}) getAngle!: (v: number) => number;\n @property({type: String}) needleColor: string \| undefined;\n @property({type: String}) barColor: string \| undefined;\n @property({type: Boolean}) showLabels: boolean = false;\n /*\n Interval for primary tickmarks in value units.\n * When undefined or <= 0, no primary tickmarks are shown.\n /\n @property({type: Number}) primaryTickmarkInterval: number \| undefined = 50;\n /\n Interval for secondary tickmarks in value units.\n * When undefined or <= 0, no secondary tickmarks are shown.\n /\n @property({type: Number}) secondaryTickmarkInterval: number \| undefined = 10;\n /\n Interval for tertiary tickmarks in value units.\n * When undefined or <= 0, no tertiary tickmarks are shown.\n /\n @property({type: Number}) tertiaryTickmarkInterval: number \| undefined =\n undefined;\n @property({type: String}) type: ObcGaugeRadialType =\n ObcGaugeRadialType.filled;\n @property({type: String}) needleType: ObcGaugeRadialType =\n ObcGaugeRadialType.filled;\n @property({type: Boolean}) tickmarksInside: boolean = false;\n @property({type: String}) tickmarkStyle: TickmarkStyle =\n TickmarkStyle.regular;\n @property({type: Array, attribute: false}) advices: GaugeRadialAdvice[] = [];\n @property({type: Number}) clipTop: number = 0; // in percent of height\n @property({type: Number}) clipBottom: number = 0; // in percent of height\n @property({type: Boolean}) zoomToFitArc: boolean = false;\n\n private _radiusOffset = 0;\n private _arcFrame: ZoomToFitArcFrame \| undefined;\n\n get minAngle(): number {\n return this.getAngle(this.minValue);\n }\n\n get maxAngle(): number {\n return this.getAngle(this.maxValue);\n }\n\n private get _derivedNeedleColor(): string {\n if (\n this.state === InstrumentState.loading \|\|\n this.state === InstrumentState.off\n ) {\n return 'transparent';\n }\n return this.priority === Priority.enhanced\n ? 'var(--instrument-enhanced-secondary-color)'\n : 'var(--instrument-regular-secondary-color)';\n }\n\n private get _derivedBarColor(): string {\n if (\n this.state === InstrumentState.loading \|\|\n this.state === InstrumentState.off\n ) {\n return 'transparent';\n }\n if (this.type === ObcGaugeRadialType.filled) {\n return this.priority === Priority.enhanced\n ? 'var(--instrument-enhanced-secondary-color)'\n : 'var(--instrument-regular-secondary-color)';\n }\n return this.priority === Priority.enhanced\n ? 'var(--instrument-enhanced-tertiary-color)'\n : 'var(--instrument-regular-tertiary-color)';\n }\n\n override render() {\n const barColor = this.barColor ?? this._derivedBarColor;\n const setpointAngle =\n this.setpoint !== undefined ? this.getAngle(this.setpoint) : undefined;\n const newSetpointAngle =\n this.newSetpoint !== undefined\n ? this.getAngle(this.newSetpoint)\n : undefined;\n\n const barAreas =\n this.type === ObcGaugeRadialType.needle\n ? []\n : [\n {\n startAngle: this.getAngle(0),\n endAngle: this.getAngle(this.value),\n fillColor: barColor,\n },\n ];\n\n const areas = [\n {\n startAngle: this.minAngle,\n endAngle: this.maxAngle,\n roundInsideCut: true,\n roundOutsideCut: true,\n },\n ];\n\n const watchCircleType =\n this.type === ObcGaugeRadialType.needle\n ? WatchCircleType.single\n : WatchCircleType.double;\n\n let viewBox: string;\n if (this.zoomToFitArc) {\n const ext = 48;\n const targetSize = (176 + ext) 2;\n const frame = computeZoomToFitArcFrame({\n areas,\n outerRadius: OUTER_RING_RADIUS,\n innerRadius: innerRingRadiusFor(watchCircleType),\n extension: ext,\n targetSize,\n });\n viewBox = frame.viewBox;\n this._radiusOffset = frame.radiusOffset;\n this._arcFrame = frame;\n } else {\n this._radiusOffset = 0;\n this._arcFrame = undefined;\n const width = 448;\n const height = width * (1 - this.clipTop / 100 - this.clipBottom / 100);\n const top = -width / 2 + (width * this.clipTop) / 100;\n viewBox = `${-width / 2} ${top} ${width} ${height}`;\n }\n\n return html`\n <div class=\"container\">\n <obc-watch\n .state=${this.state}\n .priority=${this.priority}\n .angleSetpoint=${setpointAngle}\n .newAngleSetpoint=${newSetpointAngle}\n .atAngleSetpoint=${this.computeAtSetpoint(this.value)}\n .angleSetpointAtZeroDeadband=${this.setpointAtZeroDeadband}\n .setpointOverride=${this.setpointOverride}\n .animateSetpoint=${this.animateSetpoint}\n .padding=${48}\n .tickmarks=${this.tickmarks}\n .tickmarksInside=${this.tickmarksInside}\n .tickmarkStyle=${this.tickmarkStyle}\n .advices=${this._advices}\n .areas=${areas}\n .watchCircleType=${watchCircleType}\n .barAreas=${barAreas}\n .clipTop=${this.zoomToFitArc ? 0 : this.clipTop}\n .clipBottom=${this.zoomToFitArc ? 0 : this.clipBottom}\n .zoomToFitArc=${this.zoomToFitArc}\n .arcFrame=${this._arcFrame}\n ></obc-watch>\n <svg class=\"gauge-radial\" viewBox=${viewBox}>${this._needle}</svg>\n </div>\n `;\n }\n\n private get _needle() {\n if (this.type === ObcGaugeRadialType.filled) {\n return nothing;\n }\n const needleColor = this.needleColor ?? this._derivedNeedleColor;\n const rOff = this._radiusOffset;\n if (this.type === ObcGaugeRadialType.needle) {\n return svg`<g transform=\"rotate(${this.getAngle(this.value)}) translate(-256, -256)\">\n <circle cx=\"256\" cy=\"256\" r=\"14\" fill=${needleColor}/>\n <rect x=\"250\" y=\"${96 - rOff}\" width=\"12\" height=\"${192 + rOff}\" rx=\"6\" fill=${needleColor}/>\n <rect x=\"252\" y=\"${98 - rOff}\" width=\"8\" height=\"${188 + rOff}\" rx=\"4\" stroke=${needleColor} fill=${needleColor} stroke-width=\"4\"/>\n </g>\n`;\n } else {\n return svg`<g transform=\"rotate(${this.getAngle(this.value)}) translate(-256, -256)\">\n<rect x=\"252\" y=\"${96 - rOff}\" width=\"8\" height=\"48\" rx=\"4\" fill=${needleColor} stroke=\"var(--border-silhouette-color)\"/>\n</g>\n `;\n }\n }\n\n get tickmarks(): Tickmark[] {\n const tickmarks: Tickmark[] = [];\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 < this.maxValue; i += primaryInterval) {\n tickmarks.push({\n angle: this.getAngle(i),\n type: TickmarkType.primary,\n text: this.showLabels ? i.toString() : undefined,\n });\n }\n\n if (this.showLabels && this.maxValue % primaryInterval === 0) {\n tickmarks.push({\n angle: this.getAngle(this.maxValue),\n type: TickmarkType.textOnly,\n text: this.showLabels ? this.maxValue.toString() : undefined,\n });\n }\n\n for (let i = -primaryInterval; i > this.minValue; i -= primaryInterval) {\n tickmarks.push({\n angle: this.getAngle(i),\n type: TickmarkType.primary,\n text: this.showLabels ? i.toString() : undefined,\n });\n }\n\n if (this.showLabels && this.minValue % primaryInterval === 0) {\n tickmarks.push({\n angle: this.getAngle(this.minValue),\n type: TickmarkType.textOnly,\n text: this.showLabels ? this.minValue.toString() : undefined,\n });\n }\n }\n\n // Secondary tickmarks — skip when undefined or <= 0 to prevent infinite loops\n const secondaryInterval = this.secondaryTickmarkInterval;\n if (\n secondaryInterval !== undefined &&\n secondaryInterval > 0 &&\n Number.isFinite(secondaryInterval)\n ) {\n const existingTickmarks = tickmarks.map((t) => t.angle);\n\n for (\n let i = secondaryInterval;\n i < this.maxValue;\n i += secondaryInterval\n ) {\n if (existingTickmarks.includes(this.getAngle(i))) {\n continue;\n }\n tickmarks.push({\n angle: this.getAngle(i),\n type: TickmarkType.secondary,\n });\n }\n\n for (\n let i = -secondaryInterval;\n i > this.minValue;\n i -= secondaryInterval\n ) {\n if (existingTickmarks.includes(this.getAngle(i))) {\n continue;\n }\n tickmarks.push({\n angle: this.getAngle(i),\n type: TickmarkType.secondary,\n });\n }\n }\n\n // Tertiary tickmarks — skip when undefined or <= 0 to prevent infinite loops\n const tertiaryInterval = this.tertiaryTickmarkInterval;\n if (\n tertiaryInterval !== undefined &&\n tertiaryInterval > 0 &&\n Number.isFinite(tertiaryInterval)\n ) {\n const existingTickmarks = tickmarks.map((t) => t.angle);\n\n for (let i = tertiaryInterval; i < this.maxValue; i += tertiaryInterval) {\n if (existingTickmarks.includes(this.getAngle(i))) {\n continue;\n }\n tickmarks.push({\n angle: this.getAngle(i),\n type: TickmarkType.tertiary,\n });\n }\n\n for (\n let i = -tertiaryInterval;\n i > this.minValue;\n i -= tertiaryInterval\n ) {\n if (existingTickmarks.includes(this.getAngle(i))) {\n continue;\n }\n tickmarks.push({\n angle: this.getAngle(i),\n type: TickmarkType.tertiary,\n });\n }\n }\n\n // Add the zero tickmark\n\n const zeroTickmark = tickmarks.find((t) => t.angle === this.getAngle(0));\n if (zeroTickmark) {\n zeroTickmark.type =\n this.minValue < 0 ? TickmarkType.main : TickmarkType.textOnly;\n } else {\n tickmarks.push({\n angle: this.getAngle(0),\n type: this.minValue < 0 ? TickmarkType.main : TickmarkType.textOnly,\n text: this.showLabels ? '0' : undefined,\n });\n }\n\n return tickmarks;\n }\n\n private get _advices(): AngleAdviceRaw[] {\n return this.advices.map((advice) => {\n const minAngle = this.getAngle(advice.minValue);\n const maxAngle = this.getAngle(advice.maxValue);\n let state = advice.hinted ? AdviceState.hinted : AdviceState.regular;\n if (this.value >= advice.minValue && this.value <= advice.maxValue) {\n state = AdviceState.triggered;\n }\n\n return {\n minAngle,\n maxAngle,\n type: advice.type,\n state,\n hideMinTickmark: advice.minValue === this.minValue,\n hideMaxTickmark: advice.maxValue === this.maxValue,\n };\n });\n }\n\n static override styles = css`\n * {\n box-sizing: border-box;\n }\n\n .container {\n position: relative;\n width: 100%;\n height: 100%;\n }\n\n .container > * {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n }\n\n obc-watch {\n anchor-name: --watch;\n }\n\n .speed-gauge-value {\n position: absolute;\n top: clamp(\n 70%,\n calc(80% - (anchor-size(--watch height) - 200px) * 0.2),\n 80%\n );\n left: 50%;\n transform: translateX(-50%);\n width: fit-content;\n height: fit-content;\n }\n `;\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-instrument-radial': ObcInstrumentRadial;\n }\n}\n"],"names":["ObcGaugeRadialType"],"mappings":"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"}

package/dist/components/sequence-loading-spinner/sequence-loading-spinner.css.js CHANGED Viewed

@@ -58,25 +58,12 @@ const componentStyle = css`
     height: 100%;
     border-radius: 50%;
     overflow: hidden;
-    animation: loading-spin var(--spinner-rotation-duration, 1000ms) linear
-      infinite;
     --spinner-radius: calc(
       (var(--spinner-size) - var(--spinner-stroke-width)) / 2
     );
     --spinner-cap-size: var(--spinner-stroke-width);
   }
-:is(.sequence-loading-spinner .spinner) .cap {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      width: var(--spinner-cap-size);
-      height: var(--spinner-cap-size);
-      border-radius: 50%;
-      pointer-events: none;
-      z-index: 2;
-    }
 :is(.sequence-loading-spinner .spinner)::before,:is(.sequence-loading-spinner .spinner)::after {
       content: "";
       position: absolute;
@@ -97,76 +84,99 @@ const componentStyle = css`
         transparent calc(100% - var(--spinner-stroke-width)),
         black calc(100% - var(--spinner-stroke-width))
       );
+      mask: radial-gradient(
+        farthest-side,
+        transparent calc(100% - var(--spinner-stroke-width)),
+        black calc(100% - var(--spinner-stroke-width))
+      );
     }
-:is(.progression-determinate :is(.sequence-loading-spinner .spinner))::after {
-        background: conic-gradient(
-          from -90deg,
-          var(--element-neutral-enhanced-color) 0deg,
-          var(--element-neutral-enhanced-color)
-            var(--spinner-progress-deg, 225deg),
-          transparent var(--spinner-progress-deg, 225deg),
-          transparent 360deg
-        );
-      }
-:is(.progression-determinate :is(.sequence-loading-spinner .spinner)) .cap-start,:is(.progression-determinate :is(.sequence-loading-spinner .spinner)) .cap-end {
-        background: var(--element-neutral-enhanced-color);
-      }
-:is(.progression-determinate :is(.sequence-loading-spinner .spinner)) .cap-start {
-        transform: translate(-50%, -50%) rotate(-90deg)
-          translateY(calc(-1 * var(--spinner-radius)));
-      }
-:is(.progression-determinate :is(.sequence-loading-spinner .spinner)) .cap-end {
-        transform: translate(-50%, -50%)
-          rotate(calc(-90deg + var(--spinner-progress-deg, 225deg)))
-          translateY(calc(-1 * var(--spinner-radius)));
-      }
-:is(.progression-scanning :is(.sequence-loading-spinner .spinner))::after {
-        background: conic-gradient(
-          from 90deg,
-          var(--element-disabled-color) 0deg,
-          var(--element-disabled-color) 135deg,
-          var(--base-blue-500) 136deg,
-          color-mix(
-              in srgb,
-              var(--base-blue-500) 96%,
-              var(--element-disabled-color)
-            )
-            165deg,
-          color-mix(
-              in srgb,
-              var(--base-blue-500) 45%,
-              var(--element-disabled-color)
-            )
-            220deg,
-          color-mix(
-              in srgb,
-              var(--base-blue-500) 20%,
-              var(--element-disabled-color)
-            )
-            289deg,
-          var(--element-disabled-color) 360deg
-        );
-      }
-.progression-scanning :is(.sequence-loading-spinner .spinner) {
-      --spinner-scanning-start-deg: 226deg;
+:is(.sequence-loading-spinner .spinner) .cap {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: var(--spinner-cap-size);
+      height: var(--spinner-cap-size);
+      border-radius: 50%;
+      pointer-events: none;
+      z-index: 2;
+    }
+:is(.sequence-loading-spinner.progression-determinate .spinner)::after {
+      background: conic-gradient(
+        from 0deg,
+        var(--element-neutral-enhanced-color) 0deg,
+        var(--element-neutral-enhanced-color) var(--spinner-progress-deg),
+        transparent var(--spinner-progress-deg),
+        transparent 360deg
+      );
+    }
+:is(.sequence-loading-spinner.progression-determinate .spinner) .cap-start,:is(.sequence-loading-spinner.progression-determinate .spinner) .cap-end {
+      background: var(--element-neutral-enhanced-color);
+    }
+:is(.sequence-loading-spinner.progression-determinate .spinner) .cap-start {
+      transform: translate(-50%, -50%) rotate(0deg)
+        translateY(calc(-1 * var(--spinner-radius)));
+    }
+:is(.sequence-loading-spinner.progression-determinate .spinner) .cap-end {
+      transform: translate(-50%, -50%) rotate(var(--spinner-progress-deg))
+        translateY(calc(-1 * var(--spinner-radius)));
+    }
+:is(.sequence-loading-spinner.progression-determinate:is(.progress-empty,.progress-full) .spinner) .cap-start,:is(.sequence-loading-spinner.progression-determinate:is(.progress-empty,.progress-full) .spinner) .cap-end {
+      opacity: 0;
     }
-:is(.progression-scanning :is(.sequence-loading-spinner .spinner)) .cap-start {
-        background: var(--base-blue-500);
-        transform: translate(-50%, -50%)
-          rotate(var(--spinner-scanning-start-deg))
-          translateY(calc(-1 * var(--spinner-radius)));
-      }
+.sequence-loading-spinner.progression-scanning .spinner {
+    animation: loading-spin var(--spinner-rotation-duration, 1000ms) linear
+      infinite;
+  }
+:is(.sequence-loading-spinner.progression-scanning .spinner)::after {
+      background: conic-gradient(
+        from 90deg,
+        var(--element-disabled-color) 0deg,
+        var(--element-disabled-color) 135deg,
+        var(--element-disabled-color) 136deg,
+        color-mix(
+            in srgb,
+            var(--base-blue-500) 20%,
+            var(--element-disabled-color)
+          )
+          207deg,
+        color-mix(
+            in srgb,
+            var(--base-blue-500) 45%,
+            var(--element-disabled-color)
+          )
+          276deg,
+        color-mix(
+            in srgb,
+            var(--base-blue-500) 96%,
+            var(--element-disabled-color)
+          )
+          331deg,
+        var(--base-blue-500) 360deg
+      );
+    }
-:is(.progression-scanning :is(.sequence-loading-spinner .spinner)) .cap-end {
-        opacity: 0;
-      }
+.sequence-loading-spinner.progression-scanning .spinner {
+    --spinner-scanning-head-deg: 90deg;
+  }
+:is(.sequence-loading-spinner.progression-scanning .spinner) .cap-start {
+      background: var(--base-blue-500);
+      transform: translate(-50%, -50%) rotate(var(--spinner-scanning-head-deg))
+        translateY(calc(-1 * var(--spinner-radius)));
+    }
+:is(.sequence-loading-spinner.progression-scanning .spinner) .cap-end {
+      opacity: 0;
+    }
 @keyframes loading-spin {
   to {

package/dist/components/sequence-loading-spinner/sequence-loading-spinner.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sequence-loading-spinner.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"sequence-loading-spinner.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/sequence-loading-spinner/sequence-loading-spinner.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { LitElement, PropertyValues } from 'lit';
 export declare enum SequenceLoadingSpinnerType {
     indicator = "indicator",
     indicatorPoint = "indicator-point",
@@ -21,11 +21,14 @@ export declare enum SequenceLoadingSpinnerProgressionType {
  * - `type`: `indicator | indicator-point | tag | tag-point | button | button-point`.
  * - `progression`: `determinate | scanning`.
  * - `progress-percent`: number `0–100` (used when `progression="determinate"`).
+ * - Determinate progression uses a built-in fill animation from the current arc toward full completion.
  * - `rotation-duration-ms`: number in ms (controls spin speed).
  *
  * Usage Guidelines:
  * - Use `type` to match the surrounding element size.
- * - Use `progression="determinate"` when you have progress data.
+ * - With `progression="determinate"`, the arc starts at 12 o'clock on the ring and grows clockwise.
+ * - `progress-percent` is used as the starting offset for the determinate fill. After a short delay, the arc animates smoothly from that start value toward full completion.
+ * - Changing `progress-percent` during determinate progression restarts the fill from the new start value.
  *
  * Slots / Content:
  * - None.
@@ -42,22 +45,30 @@ export declare enum SequenceLoadingSpinnerProgressionType {
  * <obc-sequence-loading-spinner
  *   type="button"
  *   progression="determinate"
- *   progress-percent="62.5"
- *   rotation-duration-ms="1200"
+ *   progress-percent="25"
  * ></obc-sequence-loading-spinner>
  * ```
- *
- * Keywords: sequence, loading, spinner, progress, determinate, scanning.
  */
 export declare class ObcSequenceLoadingSpinner extends LitElement {
     type: SequenceLoadingSpinnerType;
     progression: SequenceLoadingSpinnerProgressionType;
     rotationDurationMs: number;
     progressPercent: number;
-    private get wrapperClasses();
+    private determinateDisplayPercent;
+    private fillAnimGeneration;
+    private determinateFillFrame?;
+    private determinateStartDelayTimeout?;
     private get isButtonType();
     private get clampedRotationDurationMs();
     private get clampedProgressPercent();
+    private get determinateRenderPercent();
+    private get rootClasses();
+    private get spinnerStyle();
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+    updated(changed: PropertyValues): void;
+    private clearFillAnimation;
+    private startDeterminateFillAnimation;
     render(): import('lit-html').TemplateResult<1>;
     static styles: import('lit').CSSResult;
 }

package/dist/components/sequence-loading-spinner/sequence-loading-spinner.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sequence-loading-spinner.d.ts","sourceRoot":"","sources":["../../../src/components/sequence-loading-spinner/sequence-loading-spinner.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAkB,MAAM,KAAK,CAAC;~~AAOhD~~,oBAAY,0BAA0B;IACpC,SAAS,cAAc;IACvB,cAAc,oBAAoB;IAClC,GAAG,QAAQ;IACX,QAAQ,cAAc;IACtB,MAAM,WAAW;IACjB,WAAW,iBAAiB;CAC7B;AAED,oBAAY,qCAAqC;IAC/C,WAAW,gBAAgB;IAC3B,QAAQ,aAAa;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,qBACa,yBAA0B,SAAQ,UAAU;IAC7B,IAAI,EAAE,0BAA0B,CACnB;IACb,WAAW,EAAE,qCAAqC,CACxB;IAEpD,kBAAkB,SAAQ;IAE1B,eAAe,~~SAAQ~~;~~IAEvB~~,OAAO,~~KAAK~~,~~cAAc~~,~~GAOzB~~;~~IAED~~,OAAO,KAAK,YAAY,GAKvB;IAED,OAAO,KAAK,yBAAyB,GAKpC;IAED,OAAO,KAAK,sBAAsB,GAKjC;IAEQ,MAAM;~~IAiCf~~,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,8BAA8B,EAAE,yBAAyB,CAAC;KAC3D;CACF"}
1	+ {"version":3,"file":"sequence-loading-spinner.d.ts","sourceRoot":"","sources":["../../../src/components/sequence-loading-spinner/sequence-loading-spinner.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAkB,MAAM,KAAK,CAAC;AAEhD,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,KAAK,CAAC;AAWxC,oBAAY,0BAA0B;IACpC,SAAS,cAAc;IACvB,cAAc,oBAAoB;IAClC,GAAG,QAAQ;IACX,QAAQ,cAAc;IACtB,MAAM,WAAW;IACjB,WAAW,iBAAiB;CAC7B;AAED,oBAAY,qCAAqC;IAC/C,WAAW,gBAAgB;IAC3B,QAAQ,aAAa;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,qBACa,yBAA0B,SAAQ,UAAU;IAC7B,IAAI,EAAE,0BAA0B,CACnB;IACb,WAAW,EAAE,qCAAqC,CACxB;IAEpD,kBAAkB,SAAQ;IAE1B,eAAe,SAAK;IAEX,OAAO,CAAC,yBAAyB,CAAK;IAE/C,OAAO,CAAC,kBAAkB,CAAK;IAC/B,OAAO,CAAC,oBAAoB,CAAC,CAAS;IACtC,OAAO,CAAC,4BAA4B,CAAC,CAAS;IAE9C,OAAO,KAAK,YAAY,GAKvB;IAED,OAAO,KAAK,yBAAyB,GAKpC;IAED,OAAO,KAAK,sBAAsB,GAKjC;IAED,OAAO,KAAK,wBAAwB,GAInC;IAED,OAAO,KAAK,WAAW,GAWtB;IAED,OAAO,KAAK,YAAY,GAUvB;IAEQ,oBAAoB,IAAI,IAAI;IAK5B,iBAAiB,IAAI,IAAI;IAczB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAoB/C,OAAO,CAAC,kBAAkB;IAU1B,OAAO,CAAC,6BAA6B;IA2C5B,MAAM;IA4Bf,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,8BAA8B,EAAE,yBAAyB,CAAC;KAC3D;CACF"}