@oicl/openbridge-webcomponents 0.0.20260407112816 → 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 (7) 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/package.json +1 -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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oicl/openbridge-webcomponents",
3
- "version": "0.0.20260407112816",
3
+ "version": "0.0.20260408055359",
4
4
  "type": "module",
5
5
  "repository": {
6
6
  "type": "git",