@oicl/openbridge-webcomponents 0.0.20260407112816 → 0.0.20260408061309

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 (17) hide show
  1. package/dist/components/sequence-loading-spinner/sequence-loading-spinner.css.js +88 -78
  2. package/dist/components/sequence-loading-spinner/sequence-loading-spinner.css.js.map +1 -1
  3. package/dist/components/sequence-loading-spinner/sequence-loading-spinner.d.ts +18 -7
  4. package/dist/components/sequence-loading-spinner/sequence-loading-spinner.d.ts.map +1 -1
  5. package/dist/components/sequence-loading-spinner/sequence-loading-spinner.js +122 -21
  6. package/dist/components/sequence-loading-spinner/sequence-loading-spinner.js.map +1 -1
  7. package/dist/navigation-instruments/instrument-field/instrument-field.d.ts +0 -7
  8. package/dist/navigation-instruments/instrument-field/instrument-field.d.ts.map +1 -1
  9. package/dist/navigation-instruments/instrument-field/instrument-field.js +6 -34
  10. package/dist/navigation-instruments/instrument-field/instrument-field.js.map +1 -1
  11. package/package.json +1 -1
  12. package/dist/components/context-menu/context-menu.css.js +0 -21
  13. package/dist/components/context-menu/context-menu.css.js.map +0 -1
  14. package/dist/components/context-menu/context-menu.d.ts +0 -54
  15. package/dist/components/context-menu/context-menu.d.ts.map +0 -1
  16. package/dist/components/context-menu/context-menu.js +0 -26
  17. package/dist/components/context-menu/context-menu.js.map +0 -1
package/dist/components/sequence-loading-spinner/sequence-loading-spinner.css.js CHANGED
@@ -58,25 +58,12 @@ const componentStyle = css`
58
58
  height: 100%;
59
59
  border-radius: 50%;
60
60
  overflow: hidden;
61
- animation: loading-spin var(--spinner-rotation-duration, 1000ms) linear
62
- infinite;
63
61
  --spinner-radius: calc(
64
62
  (var(--spinner-size) - var(--spinner-stroke-width)) / 2
65
63
  );
66
64
  --spinner-cap-size: var(--spinner-stroke-width);
67
65
  }
68
66
 
69
- :is(.sequence-loading-spinner .spinner) .cap {
70
- position: absolute;
71
- top: 50%;
72
- left: 50%;
73
- width: var(--spinner-cap-size);
74
- height: var(--spinner-cap-size);
75
- border-radius: 50%;
76
- pointer-events: none;
77
- z-index: 2;
78
- }
79
-
80
67
  :is(.sequence-loading-spinner .spinner)::before,:is(.sequence-loading-spinner .spinner)::after {
81
68
  content: "";
82
69
  position: absolute;
@@ -97,76 +84,99 @@ const componentStyle = css`
97
84
  transparent calc(100% - var(--spinner-stroke-width)),
98
85
  black calc(100% - var(--spinner-stroke-width))
99
86
  );
87
+ mask: radial-gradient(
88
+ farthest-side,
89
+ transparent calc(100% - var(--spinner-stroke-width)),
90
+ black calc(100% - var(--spinner-stroke-width))
91
+ );
100
92
  }
101
93
 
102
- :is(.progression-determinate :is(.sequence-loading-spinner .spinner))::after {
103
- background: conic-gradient(
104
- from -90deg,
105
- var(--element-neutral-enhanced-color) 0deg,
106
- var(--element-neutral-enhanced-color)
107
- var(--spinner-progress-deg, 225deg),
108
- transparent var(--spinner-progress-deg, 225deg),
109
- transparent 360deg
110
- );
111
- }
112
-
113
- :is(.progression-determinate :is(.sequence-loading-spinner .spinner)) .cap-start,:is(.progression-determinate :is(.sequence-loading-spinner .spinner)) .cap-end {
114
- background: var(--element-neutral-enhanced-color);
115
- }
116
-
117
- :is(.progression-determinate :is(.sequence-loading-spinner .spinner)) .cap-start {
118
- transform: translate(-50%, -50%) rotate(-90deg)
119
- translateY(calc(-1 * var(--spinner-radius)));
120
- }
121
-
122
- :is(.progression-determinate :is(.sequence-loading-spinner .spinner)) .cap-end {
123
- transform: translate(-50%, -50%)
124
- rotate(calc(-90deg + var(--spinner-progress-deg, 225deg)))
125
- translateY(calc(-1 * var(--spinner-radius)));
126
- }
127
-
128
- :is(.progression-scanning :is(.sequence-loading-spinner .spinner))::after {
129
- background: conic-gradient(
130
- from 90deg,
131
- var(--element-disabled-color) 0deg,
132
- var(--element-disabled-color) 135deg,
133
- var(--base-blue-500) 136deg,
134
- color-mix(
135
- in srgb,
136
- var(--base-blue-500) 96%,
137
- var(--element-disabled-color)
138
- )
139
- 165deg,
140
- color-mix(
141
- in srgb,
142
- var(--base-blue-500) 45%,
143
- var(--element-disabled-color)
144
- )
145
- 220deg,
146
- color-mix(
147
- in srgb,
148
- var(--base-blue-500) 20%,
149
- var(--element-disabled-color)
150
- )
151
- 289deg,
152
- var(--element-disabled-color) 360deg
153
- );
154
- }
155
-
156
- .progression-scanning :is(.sequence-loading-spinner .spinner) {
157
- --spinner-scanning-start-deg: 226deg;
94
+ :is(.sequence-loading-spinner .spinner) .cap {
95
+ position: absolute;
96
+ top: 50%;
97
+ left: 50%;
98
+ width: var(--spinner-cap-size);
99
+ height: var(--spinner-cap-size);
100
+ border-radius: 50%;
101
+ pointer-events: none;
102
+ z-index: 2;
103
+ }
104
+
105
+ :is(.sequence-loading-spinner.progression-determinate .spinner)::after {
106
+ background: conic-gradient(
107
+ from 0deg,
108
+ var(--element-neutral-enhanced-color) 0deg,
109
+ var(--element-neutral-enhanced-color) var(--spinner-progress-deg),
110
+ transparent var(--spinner-progress-deg),
111
+ transparent 360deg
112
+ );
113
+ }
114
+
115
+ :is(.sequence-loading-spinner.progression-determinate .spinner) .cap-start,:is(.sequence-loading-spinner.progression-determinate .spinner) .cap-end {
116
+ background: var(--element-neutral-enhanced-color);
117
+ }
118
+
119
+ :is(.sequence-loading-spinner.progression-determinate .spinner) .cap-start {
120
+ transform: translate(-50%, -50%) rotate(0deg)
121
+ translateY(calc(-1 * var(--spinner-radius)));
122
+ }
123
+
124
+ :is(.sequence-loading-spinner.progression-determinate .spinner) .cap-end {
125
+ transform: translate(-50%, -50%) rotate(var(--spinner-progress-deg))
126
+ translateY(calc(-1 * var(--spinner-radius)));
127
+ }
128
+
129
+ :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 {
130
+ opacity: 0;
158
131
  }
159
132
 
160
- :is(.progression-scanning :is(.sequence-loading-spinner .spinner)) .cap-start {
161
- background: var(--base-blue-500);
162
- transform: translate(-50%, -50%)
163
- rotate(var(--spinner-scanning-start-deg))
164
- translateY(calc(-1 * var(--spinner-radius)));
165
- }
133
+ .sequence-loading-spinner.progression-scanning .spinner {
134
+ animation: loading-spin var(--spinner-rotation-duration, 1000ms) linear
135
+ infinite;
136
+ }
137
+
138
+ :is(.sequence-loading-spinner.progression-scanning .spinner)::after {
139
+ background: conic-gradient(
140
+ from 90deg,
141
+ var(--element-disabled-color) 0deg,
142
+ var(--element-disabled-color) 135deg,
143
+ var(--element-disabled-color) 136deg,
144
+ color-mix(
145
+ in srgb,
146
+ var(--base-blue-500) 20%,
147
+ var(--element-disabled-color)
148
+ )
149
+ 207deg,
150
+ color-mix(
151
+ in srgb,
152
+ var(--base-blue-500) 45%,
153
+ var(--element-disabled-color)
154
+ )
155
+ 276deg,
156
+ color-mix(
157
+ in srgb,
158
+ var(--base-blue-500) 96%,
159
+ var(--element-disabled-color)
160
+ )
161
+ 331deg,
162
+ var(--base-blue-500) 360deg
163
+ );
164
+ }
166
165
 
167
- :is(.progression-scanning :is(.sequence-loading-spinner .spinner)) .cap-end {
168
- opacity: 0;
169
- }
166
+ .sequence-loading-spinner.progression-scanning .spinner {
167
+
168
+ --spinner-scanning-head-deg: 90deg;
169
+ }
170
+
171
+ :is(.sequence-loading-spinner.progression-scanning .spinner) .cap-start {
172
+ background: var(--base-blue-500);
173
+ transform: translate(-50%, -50%) rotate(var(--spinner-scanning-head-deg))
174
+ translateY(calc(-1 * var(--spinner-radius)));
175
+ }
176
+
177
+ :is(.sequence-loading-spinner.progression-scanning .spinner) .cap-end {
178
+ opacity: 0;
179
+ }
170
180
 
171
181
  @keyframes loading-spin {
172
182
  to {
package/dist/components/sequence-loading-spinner/sequence-loading-spinner.css.js.map CHANGED
@@ -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
@@ -1,4 +1,4 @@
1
- import { LitElement } from 'lit';
1
+ import { LitElement, PropertyValues } from 'lit';
2
2
  export declare enum SequenceLoadingSpinnerType {
3
3
  indicator = "indicator",
4
4
  indicatorPoint = "indicator-point",
@@ -21,11 +21,14 @@ export declare enum SequenceLoadingSpinnerProgressionType {
21
21
  * - `type`: `indicator | indicator-point | tag | tag-point | button | button-point`.
22
22
  * - `progression`: `determinate | scanning`.
23
23
  * - `progress-percent`: number `0–100` (used when `progression="determinate"`).
24
+ * - Determinate progression uses a built-in fill animation from the current arc toward full completion.
24
25
  * - `rotation-duration-ms`: number in ms (controls spin speed).
25
26
  *
26
27
  * Usage Guidelines:
27
28
  * - Use `type` to match the surrounding element size.
28
- * - Use `progression="determinate"` when you have progress data.
29
+ * - With `progression="determinate"`, the arc starts at 12 o'clock on the ring and grows clockwise.
30
+ * - `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.
31
+ * - Changing `progress-percent` during determinate progression restarts the fill from the new start value.
29
32
  *
30
33
  * Slots / Content:
31
34
  * - None.
@@ -42,22 +45,30 @@ export declare enum SequenceLoadingSpinnerProgressionType {
42
45
  * <obc-sequence-loading-spinner
43
46
  * type="button"
44
47
  * progression="determinate"
45
- * progress-percent="62.5"
46
- * rotation-duration-ms="1200"
48
+ * progress-percent="25"
47
49
  * ></obc-sequence-loading-spinner>
48
50
  * ```
49
- *
50
- * Keywords: sequence, loading, spinner, progress, determinate, scanning.
51
51
  */
52
52
  export declare class ObcSequenceLoadingSpinner extends LitElement {
53
53
  type: SequenceLoadingSpinnerType;
54
54
  progression: SequenceLoadingSpinnerProgressionType;
55
55
  rotationDurationMs: number;
56
56
  progressPercent: number;
57
- private get wrapperClasses();
57
+ private determinateDisplayPercent;
58
+ private fillAnimGeneration;
59
+ private determinateFillFrame?;
60
+ private determinateStartDelayTimeout?;
58
61
  private get isButtonType();
59
62
  private get clampedRotationDurationMs();
60
63
  private get clampedProgressPercent();
64
+ private get determinateRenderPercent();
65
+ private get rootClasses();
66
+ private get spinnerStyle();
67
+ disconnectedCallback(): void;
68
+ connectedCallback(): void;
69
+ updated(changed: PropertyValues): void;
70
+ private clearFillAnimation;
71
+ private startDeterminateFillAnimation;
61
72
  render(): import('lit-html').TemplateResult<1>;
62
73
  static styles: import('lit').CSSResult;
63
74
  }
package/dist/components/sequence-loading-spinner/sequence-loading-spinner.d.ts.map CHANGED
@@ -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"}
package/dist/components/sequence-loading-spinner/sequence-loading-spinner.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { unsafeCSS, LitElement, html } from "lit";
2
- import { property } from "lit/decorators.js";
2
+ import { property, state } from "lit/decorators.js";
3
3
  import { classMap } from "lit/directives/class-map.js";
4
4
  import { styleMap } from "lit/directives/style-map.js";
5
5
  import { customElement } from "../../decorator.js";
@@ -14,6 +14,10 @@ var __decorateClass = (decorators, target, key, kind) => {
14
14
  if (kind && result) __defProp(target, key, result);
15
15
  return result;
16
16
  };
17
+ const DETERMINATE_MS_PER_PERCENT = 50;
18
+ const DETERMINATE_MIN_DURATION_MS = 1200;
19
+ const DETERMINATE_MAX_DURATION_MS = 9e3;
20
+ const DETERMINATE_START_DELAY_MS = 1e3;
17
21
  var SequenceLoadingSpinnerType = /* @__PURE__ */ ((SequenceLoadingSpinnerType2) => {
18
22
  SequenceLoadingSpinnerType2["indicator"] = "indicator";
19
23
  SequenceLoadingSpinnerType2["indicatorPoint"] = "indicator-point";
@@ -34,15 +38,9 @@ let ObcSequenceLoadingSpinner = class extends LitElement {
34
38
  this.type = "indicator";
35
39
  this.progression = "determinate";
36
40
  this.rotationDurationMs = 1e3;
37
- this.progressPercent = 62.5;
38
- }
39
- get wrapperClasses() {
40
- return {
41
- wrapper: true,
42
- "sequence-loading-spinner": true,
43
- [`type-${this.type}`]: true,
44
- [`progression-${this.progression}`]: true
45
- };
41
+ this.progressPercent = 0;
42
+ this.determinateDisplayPercent = 0;
43
+ this.fillAnimGeneration = 0;
46
44
  }
47
45
  get isButtonType() {
48
46
  return this.type === "button" || this.type === "button-point";
@@ -52,26 +50,126 @@ let ObcSequenceLoadingSpinner = class extends LitElement {
52
50
  return Math.max(100, duration);
53
51
  }
54
52
  get clampedProgressPercent() {
55
- const percent = Number.isFinite(this.progressPercent) ? this.progressPercent : 62.5;
53
+ const percent = Number.isFinite(this.progressPercent) ? this.progressPercent : 0;
56
54
  return Math.min(100, Math.max(0, percent));
57
55
  }
58
- render() {
59
- const style = styleMap({
60
- "--spinner-rotation-duration": `${this.clampedRotationDurationMs}ms`,
61
- "--spinner-progress-deg": `${this.clampedProgressPercent * 3.6}deg`
56
+ get determinateRenderPercent() {
57
+ return this.hasUpdated ? this.determinateDisplayPercent : this.clampedProgressPercent;
58
+ }
59
+ get rootClasses() {
60
+ const isDeterminate = this.progression === "determinate";
61
+ const p = this.determinateRenderPercent;
62
+ return {
63
+ "sequence-loading-spinner": true,
64
+ [`type-${this.type}`]: true,
65
+ [`progression-${this.progression}`]: true,
66
+ "progress-empty": isDeterminate && p <= 0,
67
+ "progress-full": isDeterminate && p >= 100
68
+ };
69
+ }
70
+ get spinnerStyle() {
71
+ if (this.progression === "scanning") {
72
+ return styleMap({
73
+ "--spinner-rotation-duration": `${this.clampedRotationDurationMs}ms`
74
+ });
75
+ }
76
+ const percent = this.determinateRenderPercent;
77
+ return styleMap({
78
+ "--spinner-progress-deg": `${percent * 3.6}deg`
62
79
  });
80
+ }
81
+ disconnectedCallback() {
82
+ this.clearFillAnimation();
83
+ super.disconnectedCallback();
84
+ }
85
+ connectedCallback() {
86
+ super.connectedCallback();
87
+ if (!this.hasUpdated) return;
88
+ if (this.progression !== "determinate") {
89
+ return;
90
+ }
91
+ if (this.clampedProgressPercent >= 100) {
92
+ return;
93
+ }
94
+ this.startDeterminateFillAnimation();
95
+ }
96
+ updated(changed) {
97
+ super.updated(changed);
98
+ if (this.progression === "scanning") {
99
+ this.clearFillAnimation();
100
+ return;
101
+ }
102
+ if (this.progression !== "determinate") {
103
+ return;
104
+ }
105
+ const rerun = ["progressPercent", "progression"].some(
106
+ (k) => changed.has(k)
107
+ );
108
+ if (!rerun) {
109
+ return;
110
+ }
111
+ this.startDeterminateFillAnimation();
112
+ }
113
+ clearFillAnimation() {
114
+ if (this.determinateFillFrame !== void 0) {
115
+ window.cancelAnimationFrame(this.determinateFillFrame);
116
+ }
117
+ this.determinateFillFrame = void 0;
118
+ window.clearTimeout(this.determinateStartDelayTimeout);
119
+ this.determinateStartDelayTimeout = void 0;
120
+ this.fillAnimGeneration++;
121
+ }
122
+ startDeterminateFillAnimation() {
123
+ this.clearFillAnimation();
124
+ const generation = this.fillAnimGeneration;
125
+ const start = this.clampedProgressPercent;
126
+ const remaining = Math.max(0, 100 - start);
127
+ const duration = Math.min(
128
+ DETERMINATE_MAX_DURATION_MS,
129
+ Math.max(
130
+ DETERMINATE_MIN_DURATION_MS,
131
+ remaining * DETERMINATE_MS_PER_PERCENT
132
+ )
133
+ );
134
+ if (start >= 100) {
135
+ this.determinateDisplayPercent = 100;
136
+ return;
137
+ }
138
+ this.determinateDisplayPercent = start;
139
+ let startTime = void 0;
140
+ const tick = () => {
141
+ if (generation !== this.fillAnimGeneration) return;
142
+ const now = performance.now();
143
+ if (startTime === void 0) {
144
+ startTime = now;
145
+ }
146
+ const elapsed = now - startTime;
147
+ const t = Math.min(1, elapsed / Math.max(duration, 1));
148
+ this.determinateDisplayPercent = start + (100 - start) * t;
149
+ if (t < 1) {
150
+ this.determinateFillFrame = window.requestAnimationFrame(tick);
151
+ } else {
152
+ this.determinateFillFrame = void 0;
153
+ this.determinateDisplayPercent = 100;
154
+ }
155
+ };
156
+ this.determinateStartDelayTimeout = window.setTimeout(() => {
157
+ if (generation !== this.fillAnimGeneration) return;
158
+ this.determinateFillFrame = window.requestAnimationFrame(tick);
159
+ }, DETERMINATE_START_DELAY_MS);
160
+ }
161
+ render() {
162
+ const style = this.spinnerStyle;
63
163
  const content = html`
64
164
  <span class="spinner" part="spinner" aria-hidden="true" style=${style}>
65
- <span class="caps" aria-hidden="true">
66
- <span class="cap cap-start" aria-hidden="true"></span>
67
- <span class="cap cap-end" aria-hidden="true"></span>
68
- </span>
165
+ <span class="cap cap-start" aria-hidden="true"></span>
166
+ <span class="cap cap-end" aria-hidden="true"></span>
69
167
  </span>
70
168
  `;
71
169
  return this.isButtonType ? html`
72
170
  <button
73
171
  type="button"
74
- class=${classMap(this.wrapperClasses)}
172
+ class=${classMap(this.rootClasses)}
75
173
  part="wrapper"
76
174
  aria-label="Loading"
77
175
  disabled
@@ -79,7 +177,7 @@ let ObcSequenceLoadingSpinner = class extends LitElement {
79
177
  ${content}
80
178
  </button>
81
179
  ` : html`
82
- <span class=${classMap(this.wrapperClasses)} part="wrapper">
180
+ <span class=${classMap(this.rootClasses)} part="wrapper">
83
181
  ${content}
84
182
  </span>
85
183
  `;
@@ -98,6 +196,9 @@ __decorateClass([
98
196
  __decorateClass([
99
197
  property({ type: Number, attribute: "progress-percent" })
100
198
  ], ObcSequenceLoadingSpinner.prototype, "progressPercent", 2);
199
+ __decorateClass([
200
+ state()
201
+ ], ObcSequenceLoadingSpinner.prototype, "determinateDisplayPercent", 2);
101
202
  ObcSequenceLoadingSpinner = __decorateClass([
102
203
  customElement("obc-sequence-loading-spinner")
103
204
  ], ObcSequenceLoadingSpinner);
package/dist/components/sequence-loading-spinner/sequence-loading-spinner.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sequence-loading-spinner.js","sources":["../../../src/components/sequence-loading-spinner/sequence-loading-spinner.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {styleMap} from 'lit/directives/style-map.js';\nimport {customElement} from '../../decorator.js';\nimport componentStyle from './sequence-loading-spinner.css?inline';\n\nexport enum SequenceLoadingSpinnerType {\n indicator = 'indicator',\n indicatorPoint = 'indicator-point',\n tag = 'tag',\n tagPoint = 'tag-point',\n button = 'button',\n buttonPoint = 'button-point',\n}\n\nexport enum SequenceLoadingSpinnerProgressionType {\n determinate = 'determinate',\n scanning = 'scanning',\n}\n\n/**\n * `<obc-sequence-loading-spinner>` — circular loading indicator for sequence UI.\n *\n * Overview:\n * A compact spinner used alongside sequence steps, tags, or buttons.\n *\n * Features / Variants:\n * - `type`: `indicator | indicator-point | tag | tag-point | button | button-point`.\n * - `progression`: `determinate | scanning`.\n * - `progress-percent`: number `0–100` (used when `progression=\"determinate\"`).\n * - `rotation-duration-ms`: number in ms (controls spin speed).\n *\n * Usage Guidelines:\n * - Use `type` to match the surrounding element size.\n * - Use `progression=\"determinate\"` when you have progress data.\n *\n * Slots / Content:\n * - None.\n *\n * Events:\n * - None.\n *\n * Best Practices:\n * - Keep `progress-percent` within `0–100` for predictable rendering.\n * - Prefer `scanning` for indefinite loading states.\n *\n * Example:\n * ```html\n * <obc-sequence-loading-spinner\n * type=\"button\"\n * progression=\"determinate\"\n * progress-percent=\"62.5\"\n * rotation-duration-ms=\"1200\"\n * ></obc-sequence-loading-spinner>\n * ```\n *\n * Keywords: sequence, loading, spinner, progress, determinate, scanning.\n */\n@customElement('obc-sequence-loading-spinner')\nexport class ObcSequenceLoadingSpinner extends LitElement {\n @property({type: String}) type: SequenceLoadingSpinnerType =\n SequenceLoadingSpinnerType.indicator;\n @property({type: String}) progression: SequenceLoadingSpinnerProgressionType =\n SequenceLoadingSpinnerProgressionType.determinate;\n @property({type: Number, attribute: 'rotation-duration-ms'})\n rotationDurationMs = 1000;\n @property({type: Number, attribute: 'progress-percent'})\n progressPercent = 62.5;\n\n private get wrapperClasses() {\n return {\n wrapper: true,\n 'sequence-loading-spinner': true,\n [`type-${this.type}`]: true,\n [`progression-${this.progression}`]: true,\n };\n }\n\n private get isButtonType(): boolean {\n return (\n this.type === SequenceLoadingSpinnerType.button ||\n this.type === SequenceLoadingSpinnerType.buttonPoint\n );\n }\n\n private get clampedRotationDurationMs(): number {\n const duration = Number.isFinite(this.rotationDurationMs)\n ? this.rotationDurationMs\n : 1000;\n return Math.max(100, duration);\n }\n\n private get clampedProgressPercent(): number {\n const percent = Number.isFinite(this.progressPercent)\n ? this.progressPercent\n : 62.5;\n return Math.min(100, Math.max(0, percent));\n }\n\n override render() {\n const style = styleMap({\n '--spinner-rotation-duration': `${this.clampedRotationDurationMs}ms`,\n '--spinner-progress-deg': `${this.clampedProgressPercent * 3.6}deg`,\n });\n const content = html`\n <span class=\"spinner\" part=\"spinner\" aria-hidden=\"true\" style=${style}>\n <span class=\"caps\" aria-hidden=\"true\">\n <span class=\"cap cap-start\" aria-hidden=\"true\"></span>\n <span class=\"cap cap-end\" aria-hidden=\"true\"></span>\n </span>\n </span>\n `;\n\n return this.isButtonType\n ? html`\n <button\n type=\"button\"\n class=${classMap(this.wrapperClasses)}\n part=\"wrapper\"\n aria-label=\"Loading\"\n disabled\n >\n ${content}\n </button>\n `\n : html`\n <span class=${classMap(this.wrapperClasses)} part=\"wrapper\">\n ${content}\n </span>\n `;\n }\n\n static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-sequence-loading-spinner': ObcSequenceLoadingSpinner;\n }\n}\n"],"names":["SequenceLoadingSpinnerType","SequenceLoadingSpinnerProgressionType"],"mappings":";;;;;;;;;;;;;;;;AAOO,IAAK,+CAAAA,gCAAL;AACLA,8BAAA,WAAA,IAAY;AACZA,8BAAA,gBAAA,IAAiB;AACjBA,8BAAA,KAAA,IAAM;AACNA,8BAAA,UAAA,IAAW;AACXA,8BAAA,QAAA,IAAS;AACTA,8BAAA,aAAA,IAAc;AANJ,SAAAA;AAAA,GAAA,8BAAA,CAAA,CAAA;AASL,IAAK,0DAAAC,2CAAL;AACLA,yCAAA,aAAA,IAAc;AACdA,yCAAA,UAAA,IAAW;AAFD,SAAAA;AAAA,GAAA,yCAAA,CAAA,CAAA;AA4CL,IAAM,4BAAN,cAAwC,WAAW;AAAA,EAAnD,cAAA;AAAA,UAAA,GAAA,SAAA;AACqB,SAAA,OACxB;AACwB,SAAA,cACxB;AAEF,SAAA,qBAAqB;AAErB,SAAA,kBAAkB;AAAA,EAAA;AAAA,EAElB,IAAY,iBAAiB;AAC3B,WAAO;AAAA,MACL,SAAS;AAAA,MACT,4BAA4B;AAAA,MAC5B,CAAC,QAAQ,KAAK,IAAI,EAAE,GAAG;AAAA,MACvB,CAAC,eAAe,KAAK,WAAW,EAAE,GAAG;AAAA,IAAA;AAAA,EAEzC;AAAA,EAEA,IAAY,eAAwB;AAClC,WACE,KAAK,SAAS,YACd,KAAK,SAAS;AAAA,EAElB;AAAA,EAEA,IAAY,4BAAoC;AAC9C,UAAM,WAAW,OAAO,SAAS,KAAK,kBAAkB,IACpD,KAAK,qBACL;AACJ,WAAO,KAAK,IAAI,KAAK,QAAQ;AAAA,EAC/B;AAAA,EAEA,IAAY,yBAAiC;AAC3C,UAAM,UAAU,OAAO,SAAS,KAAK,eAAe,IAChD,KAAK,kBACL;AACJ,WAAO,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,OAAO,CAAC;AAAA,EAC3C;AAAA,EAES,SAAS;AAChB,UAAM,QAAQ,SAAS;AAAA,MACrB,+BAA+B,GAAG,KAAK,yBAAyB;AAAA,MAChE,0BAA0B,GAAG,KAAK,yBAAyB,GAAG;AAAA,IAAA,CAC/D;AACD,UAAM,UAAU;AAAA,sEACkD,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQvE,WAAO,KAAK,eACR;AAAA;AAAA;AAAA,oBAGY,SAAS,KAAK,cAAc,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,cAKnC,OAAO;AAAA;AAAA,YAGb;AAAA,wBACgB,SAAS,KAAK,cAAc,CAAC;AAAA,cACvC,OAAO;AAAA;AAAA;AAAA,EAGnB;AAGF;AA1Ea,0BAyEK,SAAS,UAAU,cAAc;AAxEvB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GADb,0BACe,WAAA,QAAA,CAAA;AAEA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAHb,0BAGe,WAAA,eAAA,CAAA;AAG1B,gBAAA;AAAA,EADC,SAAS,EAAC,MAAM,QAAQ,WAAW,wBAAuB;AAAA,GALhD,0BAMX,WAAA,sBAAA,CAAA;AAEA,gBAAA;AAAA,EADC,SAAS,EAAC,MAAM,QAAQ,WAAW,oBAAmB;AAAA,GAP5C,0BAQX,WAAA,mBAAA,CAAA;AARW,4BAAN,gBAAA;AAAA,EADN,cAAc,8BAA8B;AAAA,GAChC,yBAAA;"}
1
+ {"version":3,"file":"sequence-loading-spinner.js","sources":["../../../src/components/sequence-loading-spinner/sequence-loading-spinner.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS} from 'lit';\nimport {property, state} from 'lit/decorators.js';\nimport type {PropertyValues} from 'lit';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {styleMap} from 'lit/directives/style-map.js';\nimport {customElement} from '../../decorator.js';\nimport componentStyle from './sequence-loading-spinner.css?inline';\n\nconst DETERMINATE_MS_PER_PERCENT = 50;\nconst DETERMINATE_MIN_DURATION_MS = 1200;\nconst DETERMINATE_MAX_DURATION_MS = 9000;\nconst DETERMINATE_START_DELAY_MS = 1000;\n\nexport enum SequenceLoadingSpinnerType {\n indicator = 'indicator',\n indicatorPoint = 'indicator-point',\n tag = 'tag',\n tagPoint = 'tag-point',\n button = 'button',\n buttonPoint = 'button-point',\n}\n\nexport enum SequenceLoadingSpinnerProgressionType {\n determinate = 'determinate',\n scanning = 'scanning',\n}\n\n/**\n * `<obc-sequence-loading-spinner>` — circular loading indicator for sequence UI.\n *\n * Overview:\n * A compact spinner used alongside sequence steps, tags, or buttons.\n *\n * Features / Variants:\n * - `type`: `indicator | indicator-point | tag | tag-point | button | button-point`.\n * - `progression`: `determinate | scanning`.\n * - `progress-percent`: number `0–100` (used when `progression=\"determinate\"`).\n * - Determinate progression uses a built-in fill animation from the current arc toward full completion.\n * - `rotation-duration-ms`: number in ms (controls spin speed).\n *\n * Usage Guidelines:\n * - Use `type` to match the surrounding element size.\n * - With `progression=\"determinate\"`, the arc starts at 12 o'clock on the ring and grows clockwise.\n * - `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.\n * - Changing `progress-percent` during determinate progression restarts the fill from the new start value.\n *\n * Slots / Content:\n * - None.\n *\n * Events:\n * - None.\n *\n * Best Practices:\n * - Keep `progress-percent` within `0–100` for predictable rendering.\n * - Prefer `scanning` for indefinite loading states.\n *\n * Example:\n * ```html\n * <obc-sequence-loading-spinner\n * type=\"button\"\n * progression=\"determinate\"\n * progress-percent=\"25\"\n * ></obc-sequence-loading-spinner>\n * ```\n */\n@customElement('obc-sequence-loading-spinner')\nexport class ObcSequenceLoadingSpinner extends LitElement {\n @property({type: String}) type: SequenceLoadingSpinnerType =\n SequenceLoadingSpinnerType.indicator;\n @property({type: String}) progression: SequenceLoadingSpinnerProgressionType =\n SequenceLoadingSpinnerProgressionType.determinate;\n @property({type: Number, attribute: 'rotation-duration-ms'})\n rotationDurationMs = 1000;\n @property({type: Number, attribute: 'progress-percent'})\n progressPercent = 0;\n\n @state() private determinateDisplayPercent = 0;\n\n private fillAnimGeneration = 0;\n private determinateFillFrame?: number;\n private determinateStartDelayTimeout?: number;\n\n private get isButtonType(): boolean {\n return (\n this.type === SequenceLoadingSpinnerType.button ||\n this.type === SequenceLoadingSpinnerType.buttonPoint\n );\n }\n\n private get clampedRotationDurationMs(): number {\n const duration = Number.isFinite(this.rotationDurationMs)\n ? this.rotationDurationMs\n : 1000;\n return Math.max(100, duration);\n }\n\n private get clampedProgressPercent(): number {\n const percent = Number.isFinite(this.progressPercent)\n ? this.progressPercent\n : 0;\n return Math.min(100, Math.max(0, percent));\n }\n\n private get determinateRenderPercent(): number {\n return this.hasUpdated\n ? this.determinateDisplayPercent\n : this.clampedProgressPercent;\n }\n\n private get rootClasses() {\n const isDeterminate =\n this.progression === SequenceLoadingSpinnerProgressionType.determinate;\n const p = this.determinateRenderPercent;\n return {\n 'sequence-loading-spinner': true,\n [`type-${this.type}`]: true,\n [`progression-${this.progression}`]: true,\n 'progress-empty': isDeterminate && p <= 0,\n 'progress-full': isDeterminate && p >= 100,\n };\n }\n\n private get spinnerStyle() {\n if (this.progression === SequenceLoadingSpinnerProgressionType.scanning) {\n return styleMap({\n '--spinner-rotation-duration': `${this.clampedRotationDurationMs}ms`,\n });\n }\n const percent = this.determinateRenderPercent;\n return styleMap({\n '--spinner-progress-deg': `${percent * 3.6}deg`,\n });\n }\n\n override disconnectedCallback(): void {\n this.clearFillAnimation();\n super.disconnectedCallback();\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n if (!this.hasUpdated) return;\n if (\n this.progression !== SequenceLoadingSpinnerProgressionType.determinate\n ) {\n return;\n }\n if (this.clampedProgressPercent >= 100) {\n return;\n }\n this.startDeterminateFillAnimation();\n }\n\n override updated(changed: PropertyValues): void {\n super.updated(changed);\n if (this.progression === SequenceLoadingSpinnerProgressionType.scanning) {\n this.clearFillAnimation();\n return;\n }\n if (\n this.progression !== SequenceLoadingSpinnerProgressionType.determinate\n ) {\n return;\n }\n const rerun = ['progressPercent', 'progression'].some((k) =>\n changed.has(k)\n );\n if (!rerun) {\n return;\n }\n this.startDeterminateFillAnimation();\n }\n\n private clearFillAnimation(): void {\n if (this.determinateFillFrame !== undefined) {\n window.cancelAnimationFrame(this.determinateFillFrame);\n }\n this.determinateFillFrame = undefined;\n window.clearTimeout(this.determinateStartDelayTimeout);\n this.determinateStartDelayTimeout = undefined;\n this.fillAnimGeneration++;\n }\n\n private startDeterminateFillAnimation(): void {\n this.clearFillAnimation();\n const generation = this.fillAnimGeneration;\n const start = this.clampedProgressPercent;\n const remaining = Math.max(0, 100 - start);\n const duration = Math.min(\n DETERMINATE_MAX_DURATION_MS,\n Math.max(\n DETERMINATE_MIN_DURATION_MS,\n remaining * DETERMINATE_MS_PER_PERCENT\n )\n );\n\n if (start >= 100) {\n this.determinateDisplayPercent = 100;\n return;\n }\n\n this.determinateDisplayPercent = start;\n\n let startTime: number | undefined = undefined;\n const tick = () => {\n if (generation !== this.fillAnimGeneration) return;\n const now = performance.now();\n if (startTime === undefined) {\n startTime = now;\n }\n const elapsed = now - startTime;\n const t = Math.min(1, elapsed / Math.max(duration, 1));\n this.determinateDisplayPercent = start + (100 - start) * t;\n if (t < 1) {\n this.determinateFillFrame = window.requestAnimationFrame(tick);\n } else {\n this.determinateFillFrame = undefined;\n this.determinateDisplayPercent = 100;\n }\n };\n this.determinateStartDelayTimeout = window.setTimeout(() => {\n if (generation !== this.fillAnimGeneration) return;\n this.determinateFillFrame = window.requestAnimationFrame(tick);\n }, DETERMINATE_START_DELAY_MS);\n }\n\n override render() {\n const style = this.spinnerStyle;\n const content = html`\n <span class=\"spinner\" part=\"spinner\" aria-hidden=\"true\" style=${style}>\n <span class=\"cap cap-start\" aria-hidden=\"true\"></span>\n <span class=\"cap cap-end\" aria-hidden=\"true\"></span>\n </span>\n `;\n\n return this.isButtonType\n ? html`\n <button\n type=\"button\"\n class=${classMap(this.rootClasses)}\n part=\"wrapper\"\n aria-label=\"Loading\"\n disabled\n >\n ${content}\n </button>\n `\n : html`\n <span class=${classMap(this.rootClasses)} part=\"wrapper\">\n ${content}\n </span>\n `;\n }\n\n static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-sequence-loading-spinner': ObcSequenceLoadingSpinner;\n }\n}\n"],"names":["SequenceLoadingSpinnerType","SequenceLoadingSpinnerProgressionType"],"mappings":"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"}
package/dist/navigation-instruments/instrument-field/instrument-field.d.ts CHANGED
@@ -1,7 +1,6 @@
1
1
  import { LitElement } from 'lit';
2
2
  import '../../components/button/button.js';
3
3
  import '../../icons/icon-drop-down-google.js';
4
- import '../../components/context-menu/context-menu.js';
5
4
  import '../../components/navigation-item/navigation-item.js';
6
5
  /**
7
6
  * Enum for instrument field sizes.
@@ -30,10 +29,8 @@ export declare enum InstrumentFieldSize {
30
29
  * | Slot Name | Purpose |
31
30
  * |---------------------|-------------------------------------------------------------------------|
32
31
  * | off-value | Content to display when the `off` property is true (defaults to "OFF"). |
33
- * | src-picker-content | Content for the source picker context menu (e.g., a list of sources). |
34
32
  *
35
33
  * @slot off-value - Content to display when the `off` property is true (defaults to "OFF").
36
- * @slot src-picker-content - Content for the source picker context menu (e.g., a list of sources).
37
34
  *
38
35
  * @csspart label - The container for the tag and unit.
39
36
  * @csspart tag - The tag text element.
@@ -71,14 +68,10 @@ export declare class ObcInstrumentField extends LitElement {
71
68
  labelOnly: boolean;
72
69
  /** If true, displays the "off" state (e.g., showing "OFF" instead of value). */
73
70
  off: boolean;
74
- /** If true, the source field acts as a button to open a picker. */
75
- hasSrcPicker: boolean;
76
71
  /** If true, automatically hides the setpoint when the value is close to it. */
77
72
  autoHideSetpoint: boolean;
78
73
  /** The deadband within which the setpoint is hidden if `autoHideSetpoint` is true. */
79
74
  autoHideDeadband: number;
80
- /** Controls the visibility of the source picker context menu. */
81
- private srcPickerContentVisible;
82
75
  /**
83
76
  * Generates a dashed string representation for undefined values.
84
77
  * @returns A string of dashes formatted according to the current numeric settings.
package/dist/navigation-instruments/instrument-field/instrument-field.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"instrument-field.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/instrument-field/instrument-field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAIzD,OAAO,mCAAmC,CAAC;AAC3C,OAAO,sCAAsC,CAAC;AAC9C,OAAO,+CAA+C,CAAC;AACvD,OAAO,qDAAqD,CAAC;AAG7D;;;;GAIG;AACH,oBAAY,mBAAmB;IAC7B,OAAO,YAAY;IACnB,QAAQ,aAAa;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,qBACa,kBAAmB,SAAQ,UAAU;IAChD,wCAAwC;IACd,IAAI,EAAE,mBAAmB,CACrB;IAE9B,qCAAqC;IACX,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAEvD,oCAAoC;IACT,WAAW,UAAS;IAE/C,8CAA8C;IACnB,MAAM,UAAS;IAE1C,oCAAoC;IACV,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAEpD,uEAAuE;IAC7C,SAAS,SAAK;IAExC,uDAAuD;IAC5B,eAAe,UAAS;IAEnD,+CAA+C;IACrB,cAAc,SAAK;IAE7C,0DAA0D;IAChC,GAAG,SAAM;IAEnC,mDAAmD;IACzB,IAAI,SAAM;IAEpC,+CAA+C;IACrB,GAAG,SAAM;IAEnC,oFAAoF;IACzD,YAAY,UAAS;IAEhD,yCAAyC;IACd,UAAU,UAAS;IAE9C,oCAAoC;IACT,MAAM,UAAS;IAE1C,2DAA2D;IAChC,SAAS,UAAS;IAE7C,gFAAgF;IACrD,GAAG,UAAS;IAEvC,mEAAmE;IACxC,YAAY,UAAS;IAEhD,+EAA+E;IACpD,gBAAgB,UAAS;IAEpD,sFAAsF;IAC5D,gBAAgB,SAAK;IAE/C,iEAAiE;IACxD,OAAO,CAAC,uBAAuB,CAAS;IAEjD;;;OAGG;IACH,eAAe,IAAI,MAAM;IAYhB,MAAM;IAqGf;;;OAGG;IACH,IAAI,wBAAwB,IAAI,MAAM,CAMrC;IAED;;;OAGG;IACH,IAAI,gBAAgB,IAAI,MAAM,CAM7B;IAED;;;OAGG;IACH,IAAI,SAAS,IAAI,MAAM,CAUtB;IAED,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,kBAAkB,CAAC;KAC5C;CACF"}
1
+ {"version":3,"file":"instrument-field.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/instrument-field/instrument-field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAIzD,OAAO,mCAAmC,CAAC;AAC3C,OAAO,sCAAsC,CAAC;AAC9C,OAAO,qDAAqD,CAAC;AAG7D;;;;GAIG;AACH,oBAAY,mBAAmB;IAC7B,OAAO,YAAY;IACnB,QAAQ,aAAa;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBACa,kBAAmB,SAAQ,UAAU;IAChD,wCAAwC;IACd,IAAI,EAAE,mBAAmB,CACrB;IAE9B,qCAAqC;IACX,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAEvD,oCAAoC;IACT,WAAW,UAAS;IAE/C,8CAA8C;IACnB,MAAM,UAAS;IAE1C,oCAAoC;IACV,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAEpD,uEAAuE;IAC7C,SAAS,SAAK;IAExC,uDAAuD;IAC5B,eAAe,UAAS;IAEnD,+CAA+C;IACrB,cAAc,SAAK;IAE7C,0DAA0D;IAChC,GAAG,SAAM;IAEnC,mDAAmD;IACzB,IAAI,SAAM;IAEpC,+CAA+C;IACrB,GAAG,SAAM;IAEnC,oFAAoF;IACzD,YAAY,UAAS;IAEhD,yCAAyC;IACd,UAAU,UAAS;IAE9C,oCAAoC;IACT,MAAM,UAAS;IAE1C,2DAA2D;IAChC,SAAS,UAAS;IAE7C,gFAAgF;IACrD,GAAG,UAAS;IAEvC,+EAA+E;IACpD,gBAAgB,UAAS;IAEpD,sFAAsF;IAC5D,gBAAgB,SAAK;IAE/C;;;OAGG;IACH,eAAe,IAAI,MAAM;IAYhB,MAAM;IA0Ef;;;OAGG;IACH,IAAI,wBAAwB,IAAI,MAAM,CAMrC;IAED;;;OAGG;IACH,IAAI,gBAAgB,IAAI,MAAM,CAM7B;IAED;;;OAGG;IACH,IAAI,SAAS,IAAI,MAAM,CAUtB;IAED,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,kBAAkB,CAAC;KAC5C;CACF"}
package/dist/navigation-instruments/instrument-field/instrument-field.js CHANGED
@@ -1,10 +1,9 @@
1
1
  import { unsafeCSS, LitElement, nothing, html } from "lit";
2
- import { property, state } from "lit/decorators.js";
2
+ import { property } from "lit/decorators.js";
3
3
  import compentStyle from "./instrument-field.css.js";
4
4
  import { classMap } from "lit/directives/class-map.js";
5
5
  import "../../components/button/button.js";
6
6
  import "../../icons/icon-drop-down-google.js";
7
- import "../../components/context-menu/context-menu.js";
8
7
  import "../../components/navigation-item/navigation-item.js";
9
8
  import { customElement } from "../../decorator.js";
10
9
  var __defProp = Object.defineProperty;
@@ -39,10 +38,8 @@ let ObcInstrumentField = class extends LitElement {
39
38
  this.center = false;
40
39
  this.labelOnly = false;
41
40
  this.off = false;
42
- this.hasSrcPicker = false;
43
41
  this.autoHideSetpoint = false;
44
42
  this.autoHideDeadband = 0;
45
- this.srcPickerContentVisible = false;
46
43
  }
47
44
  /**
48
45
  * Generates a dashed string representation for undefined values.
@@ -92,40 +89,21 @@ let ObcInstrumentField = class extends LitElement {
92
89
  />
93
90
  </svg>
94
91
  <div class="setpoint-value">${this.setpointValueBlueNumbers}</div>
95
- </div>` : null}
96
- ${this.horizontal && !this.labelOnly && this.hasSetpoint ? html`<div class="divider"></div>` : null}
92
+ </div>` : nothing}
93
+ ${this.horizontal && !this.labelOnly && this.hasSetpoint ? html`<div class="divider"></div>` : nothing}
97
94
  ${!this.labelOnly ? html` <div class="value">
98
95
  ${this.off ? html`<div class="value-blue">
99
96
  <slot name="off-value">OFF</slot>
100
97
  </div>` : html` <div class="value-hint-zero">${this.hintZeros}</div>
101
98
  <div class="value-blue">${this.valueBlueNumbers}</div>`}
102
- </div>` : null}
99
+ </div>` : nothing}
103
100
  <div class="label" part="label">
104
101
  ${this.horizontal && this.size === "regular" ? nothing : html`<div class="tag" part="tag">${this.tag}</div>`}
105
102
  <div class="unit">${this.unit}</div>
106
103
  </div>
107
- ${this.hasSrc && this.horizontal ? html`<div class="divider src-divider"></div>` : null}
108
- ${this.hasSrc ? this.hasSrcPicker ? html`<div class="src">
109
- <obc-button
110
- variant="flat"
111
- showTrailingIcon
112
- class="src-picker"
113
- @click=${() => this.srcPickerContentVisible = !this.srcPickerContentVisible}
114
- showTrailingIcon
115
- >
116
- ${this.src}
117
- <obi-drop-down-google
118
- slot="trailing-icon"
119
- ></obi-drop-down-google>
120
- </obc-button>
121
- </div>` : html`<div class="src">${this.src}</div>` : null}
104
+ ${this.hasSrc && this.horizontal ? html`<div class="divider src-divider"></div>` : nothing}
105
+ ${this.hasSrc ? html`<div class="src">${this.src}</div>` : nothing}
122
106
  </div>
123
- ${this.hasSrcPicker && this.srcPickerContentVisible ? html`<obc-context-menu
124
- class="src-picker-content"
125
- @click=${() => this.srcPickerContentVisible = false}
126
- >
127
- <slot name="src-picker-content"></slot>
128
- </obc-context-menu>` : nothing}
129
107
  `;
130
108
  }
131
109
  /**
@@ -213,18 +191,12 @@ __decorateClass([
213
191
  __decorateClass([
214
192
  property({ type: Boolean })
215
193
  ], ObcInstrumentField.prototype, "off", 2);
216
- __decorateClass([
217
- property({ type: Boolean })
218
- ], ObcInstrumentField.prototype, "hasSrcPicker", 2);
219
194
  __decorateClass([
220
195
  property({ type: Boolean })
221
196
  ], ObcInstrumentField.prototype, "autoHideSetpoint", 2);
222
197
  __decorateClass([
223
198
  property({ type: Number })
224
199
  ], ObcInstrumentField.prototype, "autoHideDeadband", 2);
225
- __decorateClass([
226
- state()
227
- ], ObcInstrumentField.prototype, "srcPickerContentVisible", 2);
228
200
  ObcInstrumentField = __decorateClass([
229
201
  customElement("obc-instrument-field")
230
202
  ], ObcInstrumentField);
package/dist/navigation-instruments/instrument-field/instrument-field.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"instrument-field.js","sources":["../../../src/navigation-instruments/instrument-field/instrument-field.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property, state} from 'lit/decorators.js';\nimport compentStyle from './instrument-field.css?inline';\nimport {classMap} from 'lit/directives/class-map.js';\nimport '../../components/button/button.js';\nimport '../../icons/icon-drop-down-google.js';\nimport '../../components/context-menu/context-menu.js';\nimport '../../components/navigation-item/navigation-item.js';\nimport {customElement} from '../../decorator.js';\n\n/**\n * Enum for instrument field sizes.\n * - `regular`: Standard size for navigation instrument data fields.\n * - `enhanced`: Larger size with increased visual prominence.\n */\nexport enum InstrumentFieldSize {\n regular = 'regular',\n enhanced = 'enhanced',\n}\n\n/**\n * `<obc-instrument-field>` – A component for displaying navigation instrument data.\n *\n * This component is used to show a primary value, an optional setpoint, units, and a source (e.g., GPS, Gyro).\n * It supports different sizes, horizontal/vertical layouts, and configurable numeric formatting.\n *\n * ### Features\n * - **Sizes:** Supports `regular` and `enhanced` sizes.\n * - **Setpoint:** Optional setpoint display with an arrow indicator.\n * - **Source Picker:** Optional source selection with a dropdown and context menu.\n * - **Formatting:** Customizable integer and fraction digits, with optional zero padding.\n * - **Status Indicators:** Supports an \"OFF\" state and neutral color mode.\n * - **Layouts:** Can be oriented horizontally or vertically, with various alignment options.\n *\n * ### Slots\n * | Slot Name | Purpose |\n * |---------------------|-------------------------------------------------------------------------|\n * | off-value | Content to display when the `off` property is true (defaults to \"OFF\"). |\n * | src-picker-content | Content for the source picker context menu (e.g., a list of sources). |\n *\n * @slot off-value - Content to display when the `off` property is true (defaults to \"OFF\").\n * @slot src-picker-content - Content for the source picker context menu (e.g., a list of sources).\n *\n * @csspart label - The container for the tag and unit.\n * @csspart tag - The tag text element.\n */\n@customElement('obc-instrument-field')\nexport class ObcInstrumentField extends LitElement {\n /** The size of the instrument field. */\n @property({type: String}) size: InstrumentFieldSize =\n InstrumentFieldSize.regular;\n\n /** The setpoint value to display. */\n @property({type: Number}) setpoint: number | undefined;\n\n /** Whether to show the setpoint. */\n @property({type: Boolean}) hasSetpoint = false;\n\n /** Whether to show the source (src) field. */\n @property({type: Boolean}) hasSrc = false;\n\n /** The primary value to display. */\n @property({type: Number}) value: number | undefined;\n\n /** The maximum number of integer digits to show (for zero padding). */\n @property({type: Number}) maxDigits = 1;\n\n /** Whether to show leading zeros up to `maxDigits`. */\n @property({type: Boolean}) showZeroPadding = false;\n\n /** The number of decimal places to display. */\n @property({type: Number}) fractionDigits = 0;\n\n /** The tag or label for the data (e.g., \"HDG\", \"SPD\"). */\n @property({type: String}) tag = '';\n\n /** The unit of measurement (e.g., \"DEG\", \"KN\"). */\n @property({type: String}) unit = '';\n\n /** The current source name (e.g., \"GPS 1\"). */\n @property({type: String}) src = '';\n\n /** If true, uses a neutral color scheme instead of the default instrument color. */\n @property({type: Boolean}) neutralColor = false;\n\n /** If true, uses a horizontal layout. */\n @property({type: Boolean}) horizontal = false;\n\n /** If true, centers the content. */\n @property({type: Boolean}) center = false;\n\n /** If true, only the label (tag and unit) is displayed. */\n @property({type: Boolean}) labelOnly = false;\n\n /** If true, displays the \"off\" state (e.g., showing \"OFF\" instead of value). */\n @property({type: Boolean}) off = false;\n\n /** If true, the source field acts as a button to open a picker. */\n @property({type: Boolean}) hasSrcPicker = false;\n\n /** If true, automatically hides the setpoint when the value is close to it. */\n @property({type: Boolean}) autoHideSetpoint = false;\n\n /** The deadband within which the setpoint is hidden if `autoHideSetpoint` is true. */\n @property({type: Number}) autoHideDeadband = 0;\n\n /** Controls the visibility of the source picker context menu. */\n @state() private srcPickerContentVisible = false;\n\n /**\n * Generates a dashed string representation for undefined values.\n * @returns A string of dashes formatted according to the current numeric settings.\n */\n dashedGenerator(): string {\n const n = this.showZeroPadding ? Math.max(this.maxDigits, 1) : 1;\n if (this.fractionDigits < 1) {\n return '-'.repeat(n);\n } else {\n const diff = n - this.fractionDigits;\n return (\n '-'.repeat(Math.max(diff, 1)) + '.' + '-'.repeat(this.fractionDigits)\n );\n }\n }\n\n override render() {\n const hideSetpoint =\n this.hasSetpoint &&\n this.autoHideSetpoint &&\n this.setpoint !== undefined &&\n this.value !== undefined &&\n Math.abs(this.setpoint - this.value) <= this.autoHideDeadband;\n\n return html`\n <div\n class=${classMap({\n wrapper: true,\n [this.size]: true,\n 'neutral-color': this.neutralColor,\n off: this.off,\n horizontal: this.horizontal,\n center: this.center,\n 'left-aligned':\n this.labelOnly || (this.horizontal && !this.hasSetpoint),\n 'hide-setpoint': hideSetpoint,\n 'show-zero-padding': this.showZeroPadding,\n })}\n >\n ${this.horizontal && this.size === InstrumentFieldSize.regular\n ? html`<div class=\"label\">\n <div class=\"tag\" part=\"tag\">${this.tag}</div>\n </div>`\n : nothing}\n ${this.hasSetpoint\n ? html`<div class=\"setpoint\">\n <svg\n class=\"setpoint-arrow\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill=\"var(--instrument-enhanced-secondary-color)\"\n d=\"M4.66797 4.80263C4.66797 4.14363 5.45194 3.76746 6.0013 4.16286L10.4456 7.17243C11.0312 7.56899 11.0314 8.43154 10.4459 8.82828L6.0013 11.8401C5.45194 12.2355 4.66797 11.8593 4.66797 11.2003L4.66797 4.80263Z\"\n fill=\"var(--instrument-enhanced-primary-color)\"\n />\n </svg>\n <div class=\"setpoint-value\">${this.setpointValueBlueNumbers}</div>\n </div>`\n : null}\n ${this.horizontal && !this.labelOnly && this.hasSetpoint\n ? html`<div class=\"divider\"></div>`\n : null}\n ${!this.labelOnly\n ? html` <div class=\"value\">\n ${this.off\n ? html`<div class=\"value-blue\">\n <slot name=\"off-value\">OFF</slot>\n </div>`\n : html` <div class=\"value-hint-zero\">${this.hintZeros}</div>\n <div class=\"value-blue\">${this.valueBlueNumbers}</div>`}\n </div>`\n : null}\n <div class=\"label\" part=\"label\">\n ${this.horizontal && this.size === InstrumentFieldSize.regular\n ? nothing\n : html`<div class=\"tag\" part=\"tag\">${this.tag}</div>`}\n <div class=\"unit\">${this.unit}</div>\n </div>\n ${this.hasSrc && this.horizontal\n ? html`<div class=\"divider src-divider\"></div>`\n : null}\n ${this.hasSrc\n ? this.hasSrcPicker\n ? html`<div class=\"src\">\n <obc-button\n variant=\"flat\"\n showTrailingIcon\n class=\"src-picker\"\n @click=${() =>\n (this.srcPickerContentVisible =\n !this.srcPickerContentVisible)}\n showTrailingIcon\n >\n ${this.src}\n <obi-drop-down-google\n slot=\"trailing-icon\"\n ></obi-drop-down-google>\n </obc-button>\n </div>`\n : html`<div class=\"src\">${this.src}</div>`\n : null}\n </div>\n ${this.hasSrcPicker && this.srcPickerContentVisible\n ? html`<obc-context-menu\n class=\"src-picker-content\"\n @click=${() => (this.srcPickerContentVisible = false)}\n >\n <slot name=\"src-picker-content\"></slot>\n </obc-context-menu>`\n : nothing}\n `;\n }\n\n /**\n * Returns the formatted setpoint value as a string.\n * If the setpoint is undefined, it returns a dashed string.\n */\n get setpointValueBlueNumbers(): string {\n if (this.setpoint === undefined) {\n return this.dashedGenerator();\n }\n\n return this.setpoint.toFixed(this.fractionDigits);\n }\n\n /**\n * Returns the formatted primary value as a string.\n * If the value is undefined, it returns a dashed string.\n */\n get valueBlueNumbers(): string {\n if (this.value === undefined) {\n return this.dashedGenerator();\n }\n\n return this.value.toFixed(this.fractionDigits);\n }\n\n /**\n * Generates a string of hint zeros for alignment when `showZeroPadding` is false.\n * These zeros are typically displayed with lower opacity.\n */\n get hintZeros(): string {\n if (this.value === undefined || this.value < 0) {\n return '';\n }\n const nBlues = this.valueBlueNumbers.length;\n const nHints = this.maxDigits - nBlues;\n if (nHints > 0) {\n return '0'.repeat(nHints);\n }\n return '';\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-instrument-field': ObcInstrumentField;\n }\n}\n"],"names":["InstrumentFieldSize"],"mappings":"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"}
1
+ {"version":3,"file":"instrument-field.js","sources":["../../../src/navigation-instruments/instrument-field/instrument-field.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport compentStyle from './instrument-field.css?inline';\nimport {classMap} from 'lit/directives/class-map.js';\nimport '../../components/button/button.js';\nimport '../../icons/icon-drop-down-google.js';\nimport '../../components/navigation-item/navigation-item.js';\nimport {customElement} from '../../decorator.js';\n\n/**\n * Enum for instrument field sizes.\n * - `regular`: Standard size for navigation instrument data fields.\n * - `enhanced`: Larger size with increased visual prominence.\n */\nexport enum InstrumentFieldSize {\n regular = 'regular',\n enhanced = 'enhanced',\n}\n\n/**\n * `<obc-instrument-field>` – A component for displaying navigation instrument data.\n *\n * This component is used to show a primary value, an optional setpoint, units, and a source (e.g., GPS, Gyro).\n * It supports different sizes, horizontal/vertical layouts, and configurable numeric formatting.\n *\n * ### Features\n * - **Sizes:** Supports `regular` and `enhanced` sizes.\n * - **Setpoint:** Optional setpoint display with an arrow indicator.\n * - **Source Picker:** Optional source selection with a dropdown and context menu.\n * - **Formatting:** Customizable integer and fraction digits, with optional zero padding.\n * - **Status Indicators:** Supports an \"OFF\" state and neutral color mode.\n * - **Layouts:** Can be oriented horizontally or vertically, with various alignment options.\n *\n * ### Slots\n * | Slot Name | Purpose |\n * |---------------------|-------------------------------------------------------------------------|\n * | off-value | Content to display when the `off` property is true (defaults to \"OFF\"). |\n *\n * @slot off-value - Content to display when the `off` property is true (defaults to \"OFF\").\n *\n * @csspart label - The container for the tag and unit.\n * @csspart tag - The tag text element.\n */\n@customElement('obc-instrument-field')\nexport class ObcInstrumentField extends LitElement {\n /** The size of the instrument field. */\n @property({type: String}) size: InstrumentFieldSize =\n InstrumentFieldSize.regular;\n\n /** The setpoint value to display. */\n @property({type: Number}) setpoint: number | undefined;\n\n /** Whether to show the setpoint. */\n @property({type: Boolean}) hasSetpoint = false;\n\n /** Whether to show the source (src) field. */\n @property({type: Boolean}) hasSrc = false;\n\n /** The primary value to display. */\n @property({type: Number}) value: number | undefined;\n\n /** The maximum number of integer digits to show (for zero padding). */\n @property({type: Number}) maxDigits = 1;\n\n /** Whether to show leading zeros up to `maxDigits`. */\n @property({type: Boolean}) showZeroPadding = false;\n\n /** The number of decimal places to display. */\n @property({type: Number}) fractionDigits = 0;\n\n /** The tag or label for the data (e.g., \"HDG\", \"SPD\"). */\n @property({type: String}) tag = '';\n\n /** The unit of measurement (e.g., \"DEG\", \"KN\"). */\n @property({type: String}) unit = '';\n\n /** The current source name (e.g., \"GPS 1\"). */\n @property({type: String}) src = '';\n\n /** If true, uses a neutral color scheme instead of the default instrument color. */\n @property({type: Boolean}) neutralColor = false;\n\n /** If true, uses a horizontal layout. */\n @property({type: Boolean}) horizontal = false;\n\n /** If true, centers the content. */\n @property({type: Boolean}) center = false;\n\n /** If true, only the label (tag and unit) is displayed. */\n @property({type: Boolean}) labelOnly = false;\n\n /** If true, displays the \"off\" state (e.g., showing \"OFF\" instead of value). */\n @property({type: Boolean}) off = false;\n\n /** If true, automatically hides the setpoint when the value is close to it. */\n @property({type: Boolean}) autoHideSetpoint = false;\n\n /** The deadband within which the setpoint is hidden if `autoHideSetpoint` is true. */\n @property({type: Number}) autoHideDeadband = 0;\n\n /**\n * Generates a dashed string representation for undefined values.\n * @returns A string of dashes formatted according to the current numeric settings.\n */\n dashedGenerator(): string {\n const n = this.showZeroPadding ? Math.max(this.maxDigits, 1) : 1;\n if (this.fractionDigits < 1) {\n return '-'.repeat(n);\n } else {\n const diff = n - this.fractionDigits;\n return (\n '-'.repeat(Math.max(diff, 1)) + '.' + '-'.repeat(this.fractionDigits)\n );\n }\n }\n\n override render() {\n const hideSetpoint =\n this.hasSetpoint &&\n this.autoHideSetpoint &&\n this.setpoint !== undefined &&\n this.value !== undefined &&\n Math.abs(this.setpoint - this.value) <= this.autoHideDeadband;\n\n return html`\n <div\n class=${classMap({\n wrapper: true,\n [this.size]: true,\n 'neutral-color': this.neutralColor,\n off: this.off,\n horizontal: this.horizontal,\n center: this.center,\n 'left-aligned':\n this.labelOnly || (this.horizontal && !this.hasSetpoint),\n 'hide-setpoint': hideSetpoint,\n 'show-zero-padding': this.showZeroPadding,\n })}\n >\n ${this.horizontal && this.size === InstrumentFieldSize.regular\n ? html`<div class=\"label\">\n <div class=\"tag\" part=\"tag\">${this.tag}</div>\n </div>`\n : nothing}\n ${this.hasSetpoint\n ? html`<div class=\"setpoint\">\n <svg\n class=\"setpoint-arrow\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill=\"var(--instrument-enhanced-secondary-color)\"\n d=\"M4.66797 4.80263C4.66797 4.14363 5.45194 3.76746 6.0013 4.16286L10.4456 7.17243C11.0312 7.56899 11.0314 8.43154 10.4459 8.82828L6.0013 11.8401C5.45194 12.2355 4.66797 11.8593 4.66797 11.2003L4.66797 4.80263Z\"\n fill=\"var(--instrument-enhanced-primary-color)\"\n />\n </svg>\n <div class=\"setpoint-value\">${this.setpointValueBlueNumbers}</div>\n </div>`\n : nothing}\n ${this.horizontal && !this.labelOnly && this.hasSetpoint\n ? html`<div class=\"divider\"></div>`\n : nothing}\n ${!this.labelOnly\n ? html` <div class=\"value\">\n ${this.off\n ? html`<div class=\"value-blue\">\n <slot name=\"off-value\">OFF</slot>\n </div>`\n : html` <div class=\"value-hint-zero\">${this.hintZeros}</div>\n <div class=\"value-blue\">${this.valueBlueNumbers}</div>`}\n </div>`\n : nothing}\n <div class=\"label\" part=\"label\">\n ${this.horizontal && this.size === InstrumentFieldSize.regular\n ? nothing\n : html`<div class=\"tag\" part=\"tag\">${this.tag}</div>`}\n <div class=\"unit\">${this.unit}</div>\n </div>\n ${this.hasSrc && this.horizontal\n ? html`<div class=\"divider src-divider\"></div>`\n : nothing}\n ${this.hasSrc ? html`<div class=\"src\">${this.src}</div>` : nothing}\n </div>\n `;\n }\n\n /**\n * Returns the formatted setpoint value as a string.\n * If the setpoint is undefined, it returns a dashed string.\n */\n get setpointValueBlueNumbers(): string {\n if (this.setpoint === undefined) {\n return this.dashedGenerator();\n }\n\n return this.setpoint.toFixed(this.fractionDigits);\n }\n\n /**\n * Returns the formatted primary value as a string.\n * If the value is undefined, it returns a dashed string.\n */\n get valueBlueNumbers(): string {\n if (this.value === undefined) {\n return this.dashedGenerator();\n }\n\n return this.value.toFixed(this.fractionDigits);\n }\n\n /**\n * Generates a string of hint zeros for alignment when `showZeroPadding` is false.\n * These zeros are typically displayed with lower opacity.\n */\n get hintZeros(): string {\n if (this.value === undefined || this.value < 0) {\n return '';\n }\n const nBlues = this.valueBlueNumbers.length;\n const nHints = this.maxDigits - nBlues;\n if (nHints > 0) {\n return '0'.repeat(nHints);\n }\n return '';\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-instrument-field': ObcInstrumentField;\n }\n}\n"],"names":["InstrumentFieldSize"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oicl/openbridge-webcomponents",
3
- "version": "0.0.20260407112816",
3
+ "version": "0.0.20260408061309",
4
4
  "type": "module",
5
5
  "repository": {
6
6
  "type": "git",
package/dist/components/context-menu/context-menu.css.js DELETED
@@ -1,21 +0,0 @@
1
- import { css } from "lit";
2
- const compentStyle = css`
3
- * {
4
- -webkit-tap-highlight-color: transparent;
5
- }
6
- ol {
7
- display: block;
8
- list-style-type: none;
9
- margin: 0;
10
- padding: 0;
11
- width: fit-content;
12
-
13
- border-radius: 6px;
14
- background: var(--normal-enabled-background-color);
15
- box-shadow: var(--shadow-floating);
16
- }
17
- `;
18
- export {
19
- compentStyle as default
20
- };
21
- //# sourceMappingURL=context-menu.css.js.map
package/dist/components/context-menu/context-menu.css.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"context-menu.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}
package/dist/components/context-menu/context-menu.d.ts DELETED
@@ -1,54 +0,0 @@
1
- import { LitElement } from 'lit';
2
- /**
3
- * `<obc-context-menu>` – A contextual menu component for presenting a list of actions or navigation options.
4
- *
5
- * Displays a floating menu containing selectable items, typically invoked by right-clicking or interacting with a trigger element. The menu appears above other UI content, allowing users to choose from a set of related commands or destinations without navigating away from their current context.
6
- *
7
- * ### Features
8
- * - **Menu structure:** Renders its content as a vertical list of options using an ordered list (`<ol>`), with each item typically represented by a child component such as `<obc-navigation-item>`.
9
- * - **Customizable content:** Supports any number of menu items, each of which can include icons, labels, and additional metadata.
10
- * - **Icon support:** Menu items can display leading icons for visual identification (see example usage with `<obi-applications>` and `<obi-alerts>`).
11
- * - **Floating appearance:** Styled with background, border radius, and shadow to visually separate the menu from the underlying content.
12
- *
13
- * ### Usage Guidelines
14
- * Use `<obc-context-menu>` to present a set of context-specific actions or navigation links, typically in response to a user gesture such as right-clicking, long-pressing, or clicking a menu trigger. It is ideal for secondary actions that are relevant to a specific UI element or region. Avoid using it for primary navigation or persistent menus; for those scenarios, consider a sidebar or top navigation component.
15
- *
16
- * **TODO(designer):** Specify recommended trigger patterns (e.g., right-click, button click), keyboard accessibility expectations, and whether the menu should auto-close on selection or outside click.
17
- *
18
- * ### Slots
19
- *
20
- * | Slot Name | Renders When... | Purpose |
21
- * |-----------|-----------------|---------|
22
- * | (default) | Always | Accepts one or more menu item components (e.g., `<obc-navigation-item>`) to display as selectable options. |
23
- *
24
- * ### Best Practices and Constraints
25
- * - Each child should be a valid menu item component (such as `<obc-navigation-item>`) for consistent styling and interaction.
26
- * - Ensure menu items are accessible via keyboard navigation (arrow keys, Enter/Escape for selection and dismissal).
27
- * - Keep the number of menu items manageable to avoid overwhelming users.
28
- * - For destructive or critical actions, consider visually distinguishing those items.
29
- *
30
- * ### Example:
31
- * ```
32
- * <obc-context-menu>
33
- * <obc-navigation-item label="Apps" .hasIcon=${true}>
34
- * <obi-applications slot="icon"></obi-applications>
35
- * </obc-navigation-item>
36
- * <obc-navigation-item label="Alerts" .hasIcon=${true}>
37
- * <obi-alerts slot="icon"></obi-alerts>
38
- * </obc-navigation-item>
39
- * </obc-context-menu>
40
- * ```
41
- * In this example, the context menu displays two navigation items, each with a leading icon.
42
- *
43
- * @slot - Default slot for menu items (e.g., `<obc-navigation-item>`)
44
- */
45
- export declare class ObcContextMenu extends LitElement {
46
- render(): import('lit-html').TemplateResult<1>;
47
- static styles: import('lit').CSSResult;
48
- }
49
- declare global {
50
- interface HTMLElementTagNameMap {
51
- 'obc-context-menu': ObcContextMenu;
52
- }
53
- }
54
- //# sourceMappingURL=context-menu.d.ts.map
package/dist/components/context-menu/context-menu.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"context-menu.d.ts","sourceRoot":"","sources":["../../../src/components/context-menu/context-menu.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,UAAU,EAAkB,MAAM,KAAK,CAAC;AAGhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,qBACa,cAAe,SAAQ,UAAU;IACnC,MAAM;IAMf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}
package/dist/components/context-menu/context-menu.js DELETED
@@ -1,26 +0,0 @@
1
- import { customElement } from "../../decorator.js";
2
- import { unsafeCSS, LitElement, html } from "lit";
3
- import compentStyle from "./context-menu.css.js";
4
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
- var __decorateClass = (decorators, target, key, kind) => {
6
- var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
7
- for (var i = decorators.length - 1, decorator; i >= 0; i--)
8
- if (decorator = decorators[i])
9
- result = decorator(result) || result;
10
- return result;
11
- };
12
- let ObcContextMenu = class extends LitElement {
13
- render() {
14
- return html` <ol>
15
- <slot></slot>
16
- </ol>`;
17
- }
18
- };
19
- ObcContextMenu.styles = unsafeCSS(compentStyle);
20
- ObcContextMenu = __decorateClass([
21
- customElement("obc-context-menu")
22
- ], ObcContextMenu);
23
- export {
24
- ObcContextMenu
25
- };
26
- //# sourceMappingURL=context-menu.js.map
package/dist/components/context-menu/context-menu.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"context-menu.js","sources":["../../../src/components/context-menu/context-menu.ts"],"sourcesContent":["import {customElement} from '../../decorator.js';\nimport {LitElement, html, unsafeCSS} from 'lit';\nimport compentStyle from './context-menu.css?inline';\n\n/**\n * `<obc-context-menu>` – A contextual menu component for presenting a list of actions or navigation options.\n *\n * Displays a floating menu containing selectable items, typically invoked by right-clicking or interacting with a trigger element. The menu appears above other UI content, allowing users to choose from a set of related commands or destinations without navigating away from their current context.\n *\n * ### Features\n * - **Menu structure:** Renders its content as a vertical list of options using an ordered list (`<ol>`), with each item typically represented by a child component such as `<obc-navigation-item>`.\n * - **Customizable content:** Supports any number of menu items, each of which can include icons, labels, and additional metadata.\n * - **Icon support:** Menu items can display leading icons for visual identification (see example usage with `<obi-applications>` and `<obi-alerts>`).\n * - **Floating appearance:** Styled with background, border radius, and shadow to visually separate the menu from the underlying content.\n *\n * ### Usage Guidelines\n * Use `<obc-context-menu>` to present a set of context-specific actions or navigation links, typically in response to a user gesture such as right-clicking, long-pressing, or clicking a menu trigger. It is ideal for secondary actions that are relevant to a specific UI element or region. Avoid using it for primary navigation or persistent menus; for those scenarios, consider a sidebar or top navigation component.\n *\n * **TODO(designer):** Specify recommended trigger patterns (e.g., right-click, button click), keyboard accessibility expectations, and whether the menu should auto-close on selection or outside click.\n *\n * ### Slots\n *\n * | Slot Name | Renders When... | Purpose |\n * |-----------|-----------------|---------|\n * | (default) | Always | Accepts one or more menu item components (e.g., `<obc-navigation-item>`) to display as selectable options. |\n *\n * ### Best Practices and Constraints\n * - Each child should be a valid menu item component (such as `<obc-navigation-item>`) for consistent styling and interaction.\n * - Ensure menu items are accessible via keyboard navigation (arrow keys, Enter/Escape for selection and dismissal).\n * - Keep the number of menu items manageable to avoid overwhelming users.\n * - For destructive or critical actions, consider visually distinguishing those items.\n *\n * ### Example:\n * ```\n * <obc-context-menu>\n * <obc-navigation-item label=\"Apps\" .hasIcon=${true}>\n * <obi-applications slot=\"icon\"></obi-applications>\n * </obc-navigation-item>\n * <obc-navigation-item label=\"Alerts\" .hasIcon=${true}>\n * <obi-alerts slot=\"icon\"></obi-alerts>\n * </obc-navigation-item>\n * </obc-context-menu>\n * ```\n * In this example, the context menu displays two navigation items, each with a leading icon.\n *\n * @slot - Default slot for menu items (e.g., `<obc-navigation-item>`)\n */\n@customElement('obc-context-menu')\nexport class ObcContextMenu extends LitElement {\n override render() {\n return html` <ol>\n <slot></slot>\n </ol>`;\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-context-menu': ObcContextMenu;\n }\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAgDO,IAAM,iBAAN,cAA6B,WAAW;AAAA,EACpC,SAAS;AAChB,WAAO;AAAA;AAAA;AAAA,EAGT;AAGF;AARa,eAOK,SAAS,UAAU,YAAY;AAPpC,iBAAN,gBAAA;AAAA,EADN,cAAc,kBAAkB;AAAA,GACpB,cAAA;"}