@trebired/frontend 6.15.6 → 6.15.7
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.
- package/CHANGELOG.md +4 -0
- package/dist/primitives/styles/_wizard.scss +15 -2
- package/dist/src/wizard/index.js +1 -1
- package/dist/src/wizard/index.js.map +1 -1
- package/dist/src/wizard/sizing.d.ts.map +1 -1
- package/dist/src/wizard/sizing.js +5 -89
- package/dist/src/wizard/sizing.js.map +1 -1
- package/dist/wizard/index.js +1 -1
- package/dist/wizard/index.js.map +1 -1
- package/dist/wizard/sizing.d.ts.map +1 -1
- package/dist/wizard/sizing.js +5 -89
- package/dist/wizard/sizing.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
All notable package changes are documented here.
|
|
4
4
|
|
|
5
|
+
## 6.15.7
|
|
6
|
+
|
|
7
|
+
- Fixed wizard first-load height stability by hiding inactive SSR steps and removing runtime height measurement so CSS/SSR shell sizing stays stable through font readiness.
|
|
8
|
+
|
|
5
9
|
## 6.15.6
|
|
6
10
|
|
|
7
11
|
- Fixed wizard SSR sizing by rendering first/last step metadata and CSS-only initial footer visibility so the first paint matches the hydrated measured layout.
|
|
@@ -2,6 +2,19 @@
|
|
|
2
2
|
display: grid;
|
|
3
3
|
align-items: stretch;
|
|
4
4
|
width: 100%;
|
|
5
|
+
min-height: 100%;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
form:has(> .wizard) {
|
|
9
|
+
min-height: 0;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
:where(.column, .row) > form:has(> .wizard) {
|
|
13
|
+
flex: 1 1 auto;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
form:has(> .wizard) > .wizard {
|
|
17
|
+
height: 100%;
|
|
5
18
|
}
|
|
6
19
|
|
|
7
20
|
wizard-previous-button,
|
|
@@ -12,8 +25,8 @@ wizard-final-action {
|
|
|
12
25
|
|
|
13
26
|
.wizard-step {
|
|
14
27
|
grid-area: 1 / 1;
|
|
15
|
-
width:
|
|
16
|
-
min-height:
|
|
28
|
+
width: 100%;
|
|
29
|
+
min-height: 100%;
|
|
17
30
|
min-width: 0;
|
|
18
31
|
opacity: 0;
|
|
19
32
|
visibility: hidden;
|
package/dist/src/wizard/index.js
CHANGED
|
@@ -6,7 +6,7 @@ import { primitiveButtonClassName, primitiveCardClassName, } from "../../primiti
|
|
|
6
6
|
function wizardStepInactiveProps(active) {
|
|
7
7
|
if (active)
|
|
8
8
|
return {};
|
|
9
|
-
return { "aria-hidden": true, inert: true };
|
|
9
|
+
return { "aria-hidden": true, hidden: true, inert: true };
|
|
10
10
|
}
|
|
11
11
|
function wizardStepPositionProps(index, lastIndex) {
|
|
12
12
|
return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/wizard/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAkB,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EACL,wBAAwB,EACxB,sBAAsB,GACvB,MAAM,eAAe,CAAC;AAcvB,SAAS,uBAAuB,CAAC,MAAe;IAC9C,IAAI,MAAM;QAAE,OAAO,EAAE,CAAC;IACtB,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/wizard/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAkB,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EACL,wBAAwB,EACxB,sBAAsB,GACvB,MAAM,eAAe,CAAC;AAcvB,SAAS,uBAAuB,CAAC,MAAe;IAC9C,IAAI,MAAM;QAAE,OAAO,EAAE,CAAC;IACtB,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;AAC5D,CAAC;AAED,SAAS,uBAAuB,CAAC,KAAa,EAAE,SAAiB;IAC/D,OAAO;QACL,wBAAwB,EAAE,MAAM,CAAC,KAAK,CAAC;QACvC,GAAG,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,wBAAwB,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QAC5D,GAAG,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,uBAAuB,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;KACpE,CAAC;AACJ,CAAC;AAED,SAAS,MAAM,CAAC,KAAmB;IACjC,MAAM,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;IAEzC,OAAO,aAAa,CAClB,aAAa,EACb;QACE,SAAS,EAAE,cAAc,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;QACpD,EAAE,EAAE,KAAK,CAAC,EAAE;KACb,EACD,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAC9B,aAAa,CACX,aAAa,EACb;QACE,SAAS,EAAE,sBAAsB,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC;QAC1E,EAAE,EAAE,GAAG,KAAK,CAAC,EAAE,IAAI,IAAI,CAAC,EAAE,EAAE;QAC5B,GAAG,EAAE,IAAI,CAAC,EAAE;QACZ,GAAG,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,wBAAwB,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QAC9D,GAAG,uBAAuB,CAAC,KAAK,EAAE,SAAS,CAAC;QAC5C,GAAG,uBAAuB,CAAC,KAAK,KAAK,CAAC,CAAC;KACxC,EACD,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CACb,cAAK,SAAS,EAAC,kBAAkB,YAAE,IAAI,CAAC,OAAO,GAAO,CACvD,CAAC,CAAC,CAAC,IAAI,CACT,CACF,CACF,CAAC;AACJ,CAAC;AAOD,SAAS,sBAAsB,CAAC,KAA8B;IAC5D,OAAO,aAAa,CAClB,wBAAwB,EACxB,IAAI,EACJ,kBACA,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,wBAAwB,CAAC,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC,aAEnE,KAAC,IAAI,IAAC,IAAI,EAAC,2BAA2B,GAAG,EACxC,KAAK,CAAC,KAAK,IACH,CACV,CAAC;AACJ,CAAC;AAED,SAAS,kBAAkB,CAAC,KAA8B;IACxD,OAAO,aAAa,CAClB,oBAAoB,EACpB,IAAI,EACJ,kBAAQ,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAE,wBAAwB,CAAC,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC,aACzF,KAAC,IAAI,IAAC,IAAI,EAAC,4BAA4B,GAAG,EACzC,KAAK,CAAC,KAAK,IACH,CACV,CAAC;AACJ,CAAC;AAED,SAAS,mBAAmB,CAAC,QAAmB;IAC9C,OAAO,aAAa,CAAC,qBAAqB,EAAE,IAAI,EAAE,QAAQ,CAAC,CAAC;AAC9D,CAAC;AAGD,OAAO,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,CAAC;AAC3E,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AACtE,eAAe,MAAM,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sizing.d.ts","sourceRoot":"","sources":["../../../src/wizard/sizing.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"sizing.d.ts","sourceRoot":"","sources":["../../../src/wizard/sizing.ts"],"names":[],"mappings":"AAUA,iBAAS,oBAAoB,CAC3B,IAAI,EAAE,WAAW,EACjB,KAAK,EAAE,WAAW,EAAE,EACpB,WAAW,EAAE,WAAW,EAAE,EAC1B,WAAW,EAAE,WAAW,EAAE,EAC1B,YAAY,EAAE,WAAW,EAAE,EAC3B,SAAS,EAAE,MAAM,UAiBlB;AAED,OAAO,EAAE,oBAAoB,EAAE,CAAC"}
|
|
@@ -1,78 +1,6 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { updateWizardNav
|
|
1
|
+
import { showWizardStep } from "./step_state.js";
|
|
2
|
+
import { updateWizardNav } from "./nav.js";
|
|
3
3
|
import { stepIsValid } from "./validity.js";
|
|
4
|
-
function restoreMeasuredStep(step, state) {
|
|
5
|
-
step.hidden = state.hidden;
|
|
6
|
-
step.style.pointerEvents = state.pointerEvents;
|
|
7
|
-
step.style.visibility = state.visibility;
|
|
8
|
-
if (state.state)
|
|
9
|
-
step.setAttribute("data-wizard-step-state", state.state);
|
|
10
|
-
else
|
|
11
|
-
step.removeAttribute("data-wizard-step-state");
|
|
12
|
-
if (state.ariaHidden == null)
|
|
13
|
-
step.removeAttribute("aria-hidden");
|
|
14
|
-
else
|
|
15
|
-
step.setAttribute("aria-hidden", state.ariaHidden);
|
|
16
|
-
if (state.inert)
|
|
17
|
-
step.setAttribute("inert", "");
|
|
18
|
-
else
|
|
19
|
-
step.removeAttribute("inert");
|
|
20
|
-
}
|
|
21
|
-
function syncWizardStepSize(root, steps, prevButtons, nextButtons, finalOnlyEls, lastIndex) {
|
|
22
|
-
const states = steps.map((step) => ({
|
|
23
|
-
ariaHidden: step.getAttribute("aria-hidden"),
|
|
24
|
-
hidden: step.hidden,
|
|
25
|
-
inert: step.hasAttribute("inert"),
|
|
26
|
-
pointerEvents: step.style.pointerEvents,
|
|
27
|
-
state: step.getAttribute("data-wizard-step-state") || "",
|
|
28
|
-
visibility: step.style.visibility,
|
|
29
|
-
}));
|
|
30
|
-
const prevStates = prevButtons.map(captureNavState);
|
|
31
|
-
const nextStates = nextButtons.map(captureNavState);
|
|
32
|
-
const finalStates = finalOnlyEls.map(captureNavState);
|
|
33
|
-
let maxHeight = 0;
|
|
34
|
-
let maxWidth = 0;
|
|
35
|
-
root.style.removeProperty("--wizard-step-min-height");
|
|
36
|
-
root.style.removeProperty("--wizard-step-width");
|
|
37
|
-
steps.forEach((step, stepIndex) => {
|
|
38
|
-
steps.forEach((candidate, candidateIndex) => {
|
|
39
|
-
setStepState(candidate, candidateIndex === stepIndex ? "active" : "", candidateIndex !== stepIndex);
|
|
40
|
-
candidate.style.pointerEvents = "none";
|
|
41
|
-
candidate.style.visibility = "hidden";
|
|
42
|
-
});
|
|
43
|
-
updateWizardNav(prevButtons, nextButtons, finalOnlyEls, stepIndex, lastIndex, stepIsValid(step));
|
|
44
|
-
const rect = step.getBoundingClientRect();
|
|
45
|
-
maxHeight = Math.max(maxHeight, Math.ceil(rect.height));
|
|
46
|
-
maxWidth = Math.max(maxWidth, Math.ceil(rect.width));
|
|
47
|
-
});
|
|
48
|
-
steps.forEach((step, index) => restoreMeasuredStep(step, states[index]));
|
|
49
|
-
restoreMeasuredNav(prevButtons, prevStates);
|
|
50
|
-
restoreMeasuredNav(nextButtons, nextStates);
|
|
51
|
-
restoreMeasuredNav(finalOnlyEls, finalStates);
|
|
52
|
-
if (maxHeight > 0)
|
|
53
|
-
root.style.setProperty("--wizard-step-min-height", `${maxHeight}px`);
|
|
54
|
-
if (maxWidth > 0)
|
|
55
|
-
root.style.setProperty("--wizard-step-width", `${maxWidth}px`);
|
|
56
|
-
return maxHeight > 0 && maxWidth > 0;
|
|
57
|
-
}
|
|
58
|
-
function bindWizardSizing(root, steps, prevButtons, nextButtons, finalOnlyEls, lastIndex, onMeasured) {
|
|
59
|
-
const sync = () => {
|
|
60
|
-
if (syncWizardStepSize(root, steps, prevButtons, nextButtons, finalOnlyEls, lastIndex)) {
|
|
61
|
-
onMeasured?.();
|
|
62
|
-
}
|
|
63
|
-
};
|
|
64
|
-
window.addEventListener("resize", sync);
|
|
65
|
-
if (typeof ResizeObserver === "function") {
|
|
66
|
-
const observer = new ResizeObserver(sync);
|
|
67
|
-
observer.observe(root);
|
|
68
|
-
}
|
|
69
|
-
if (document.readyState !== "complete") {
|
|
70
|
-
window.addEventListener("load", sync, { once: true });
|
|
71
|
-
}
|
|
72
|
-
if (document.fonts && typeof document.fonts.ready?.then === "function") {
|
|
73
|
-
document.fonts.ready.then(sync).catch(() => { });
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
4
|
function markWizardReady(root) {
|
|
77
5
|
window.requestAnimationFrame(() => {
|
|
78
6
|
root.setAttribute("data-wizard-ready", "true");
|
|
@@ -80,21 +8,9 @@ function markWizardReady(root) {
|
|
|
80
8
|
}
|
|
81
9
|
function initializeWizardStep(root, steps, prevButtons, nextButtons, finalOnlyEls, lastIndex) {
|
|
82
10
|
const currentIndex = Math.max(0, steps.findIndex((step) => !step.hidden));
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
return;
|
|
87
|
-
ready = true;
|
|
88
|
-
showWizardStep(steps, currentIndex);
|
|
89
|
-
updateWizardNav(prevButtons, nextButtons, finalOnlyEls, currentIndex, lastIndex, stepIsValid(steps[currentIndex]));
|
|
90
|
-
markWizardReady(root);
|
|
91
|
-
};
|
|
92
|
-
const measured = syncWizardStepSize(root, steps, prevButtons, nextButtons, finalOnlyEls, lastIndex);
|
|
93
|
-
if (measured)
|
|
94
|
-
showReadyStep();
|
|
95
|
-
else
|
|
96
|
-
updateWizardNav(prevButtons, nextButtons, finalOnlyEls, currentIndex, lastIndex, stepIsValid(steps[currentIndex]));
|
|
97
|
-
bindWizardSizing(root, steps, prevButtons, nextButtons, finalOnlyEls, lastIndex, showReadyStep);
|
|
11
|
+
showWizardStep(steps, currentIndex);
|
|
12
|
+
updateWizardNav(prevButtons, nextButtons, finalOnlyEls, currentIndex, lastIndex, stepIsValid(steps[currentIndex]));
|
|
13
|
+
markWizardReady(root);
|
|
98
14
|
return currentIndex;
|
|
99
15
|
}
|
|
100
16
|
export { initializeWizardStep };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sizing.js","sourceRoot":"","sources":["../../../src/wizard/sizing.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"sizing.js","sourceRoot":"","sources":["../../../src/wizard/sizing.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,SAAS,eAAe,CAAC,IAAiB;IACxC,MAAM,CAAC,qBAAqB,CAAC,GAAG,EAAE;QAC9B,IAAI,CAAC,YAAY,CAAC,mBAAmB,EAAE,MAAM,CAAC,CAAC;IACnD,CAAC,CAAC,CAAC;AACL,CAAC;AAED,SAAS,oBAAoB,CAC3B,IAAiB,EACjB,KAAoB,EACpB,WAA0B,EAC1B,WAA0B,EAC1B,YAA2B,EAC3B,SAAiB;IAEjB,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,CAC3B,CAAC,EACD,KAAK,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CACxC,CAAC;IACF,cAAc,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC;IACpC,eAAe,CACb,WAAW,EACX,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,SAAS,EACT,WAAW,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CACjC,CAAC;IACF,eAAe,CAAC,IAAI,CAAC,CAAC;IACtB,OAAO,YAAY,CAAC;AACtB,CAAC;AAED,OAAO,EAAE,oBAAoB,EAAE,CAAC"}
|
package/dist/wizard/index.js
CHANGED
|
@@ -6,7 +6,7 @@ import { primitiveButtonClassName, primitiveCardClassName, } from "../primitives
|
|
|
6
6
|
function wizardStepInactiveProps(active) {
|
|
7
7
|
if (active)
|
|
8
8
|
return {};
|
|
9
|
-
return { "aria-hidden": true, inert: true };
|
|
9
|
+
return { "aria-hidden": true, hidden: true, inert: true };
|
|
10
10
|
}
|
|
11
11
|
function wizardStepPositionProps(index, lastIndex) {
|
|
12
12
|
return {
|
package/dist/wizard/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/wizard/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAkB,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EACL,wBAAwB,EACxB,sBAAsB,GACvB,MAAM,eAAe,CAAC;AAcvB,SAAS,uBAAuB,CAAC,MAAe;IAC9C,IAAI,MAAM;QAAE,OAAO,EAAE,CAAC;IACtB,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/wizard/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sizing.d.ts","sourceRoot":"","sources":["../../../src/wizard/sizing.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"sizing.d.ts","sourceRoot":"","sources":["../../../src/wizard/sizing.ts"],"names":[],"mappings":"AAUA,iBAAS,oBAAoB,CAC3B,IAAI,EAAE,WAAW,EACjB,KAAK,EAAE,WAAW,EAAE,EACpB,WAAW,EAAE,WAAW,EAAE,EAC1B,WAAW,EAAE,WAAW,EAAE,EAC1B,YAAY,EAAE,WAAW,EAAE,EAC3B,SAAS,EAAE,MAAM,UAiBlB;AAED,OAAO,EAAE,oBAAoB,EAAE,CAAC"}
|
package/dist/wizard/sizing.js
CHANGED
|
@@ -1,78 +1,6 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { updateWizardNav
|
|
1
|
+
import { showWizardStep } from "./step_state.js";
|
|
2
|
+
import { updateWizardNav } from "./nav.js";
|
|
3
3
|
import { stepIsValid } from "./validity.js";
|
|
4
|
-
function restoreMeasuredStep(step, state) {
|
|
5
|
-
step.hidden = state.hidden;
|
|
6
|
-
step.style.pointerEvents = state.pointerEvents;
|
|
7
|
-
step.style.visibility = state.visibility;
|
|
8
|
-
if (state.state)
|
|
9
|
-
step.setAttribute("data-wizard-step-state", state.state);
|
|
10
|
-
else
|
|
11
|
-
step.removeAttribute("data-wizard-step-state");
|
|
12
|
-
if (state.ariaHidden == null)
|
|
13
|
-
step.removeAttribute("aria-hidden");
|
|
14
|
-
else
|
|
15
|
-
step.setAttribute("aria-hidden", state.ariaHidden);
|
|
16
|
-
if (state.inert)
|
|
17
|
-
step.setAttribute("inert", "");
|
|
18
|
-
else
|
|
19
|
-
step.removeAttribute("inert");
|
|
20
|
-
}
|
|
21
|
-
function syncWizardStepSize(root, steps, prevButtons, nextButtons, finalOnlyEls, lastIndex) {
|
|
22
|
-
const states = steps.map((step) => ({
|
|
23
|
-
ariaHidden: step.getAttribute("aria-hidden"),
|
|
24
|
-
hidden: step.hidden,
|
|
25
|
-
inert: step.hasAttribute("inert"),
|
|
26
|
-
pointerEvents: step.style.pointerEvents,
|
|
27
|
-
state: step.getAttribute("data-wizard-step-state") || "",
|
|
28
|
-
visibility: step.style.visibility,
|
|
29
|
-
}));
|
|
30
|
-
const prevStates = prevButtons.map(captureNavState);
|
|
31
|
-
const nextStates = nextButtons.map(captureNavState);
|
|
32
|
-
const finalStates = finalOnlyEls.map(captureNavState);
|
|
33
|
-
let maxHeight = 0;
|
|
34
|
-
let maxWidth = 0;
|
|
35
|
-
root.style.removeProperty("--wizard-step-min-height");
|
|
36
|
-
root.style.removeProperty("--wizard-step-width");
|
|
37
|
-
steps.forEach((step, stepIndex) => {
|
|
38
|
-
steps.forEach((candidate, candidateIndex) => {
|
|
39
|
-
setStepState(candidate, candidateIndex === stepIndex ? "active" : "", candidateIndex !== stepIndex);
|
|
40
|
-
candidate.style.pointerEvents = "none";
|
|
41
|
-
candidate.style.visibility = "hidden";
|
|
42
|
-
});
|
|
43
|
-
updateWizardNav(prevButtons, nextButtons, finalOnlyEls, stepIndex, lastIndex, stepIsValid(step));
|
|
44
|
-
const rect = step.getBoundingClientRect();
|
|
45
|
-
maxHeight = Math.max(maxHeight, Math.ceil(rect.height));
|
|
46
|
-
maxWidth = Math.max(maxWidth, Math.ceil(rect.width));
|
|
47
|
-
});
|
|
48
|
-
steps.forEach((step, index) => restoreMeasuredStep(step, states[index]));
|
|
49
|
-
restoreMeasuredNav(prevButtons, prevStates);
|
|
50
|
-
restoreMeasuredNav(nextButtons, nextStates);
|
|
51
|
-
restoreMeasuredNav(finalOnlyEls, finalStates);
|
|
52
|
-
if (maxHeight > 0)
|
|
53
|
-
root.style.setProperty("--wizard-step-min-height", `${maxHeight}px`);
|
|
54
|
-
if (maxWidth > 0)
|
|
55
|
-
root.style.setProperty("--wizard-step-width", `${maxWidth}px`);
|
|
56
|
-
return maxHeight > 0 && maxWidth > 0;
|
|
57
|
-
}
|
|
58
|
-
function bindWizardSizing(root, steps, prevButtons, nextButtons, finalOnlyEls, lastIndex, onMeasured) {
|
|
59
|
-
const sync = () => {
|
|
60
|
-
if (syncWizardStepSize(root, steps, prevButtons, nextButtons, finalOnlyEls, lastIndex)) {
|
|
61
|
-
onMeasured?.();
|
|
62
|
-
}
|
|
63
|
-
};
|
|
64
|
-
window.addEventListener("resize", sync);
|
|
65
|
-
if (typeof ResizeObserver === "function") {
|
|
66
|
-
const observer = new ResizeObserver(sync);
|
|
67
|
-
observer.observe(root);
|
|
68
|
-
}
|
|
69
|
-
if (document.readyState !== "complete") {
|
|
70
|
-
window.addEventListener("load", sync, { once: true });
|
|
71
|
-
}
|
|
72
|
-
if (document.fonts && typeof document.fonts.ready?.then === "function") {
|
|
73
|
-
document.fonts.ready.then(sync).catch(() => { });
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
4
|
function markWizardReady(root) {
|
|
77
5
|
window.requestAnimationFrame(() => {
|
|
78
6
|
root.setAttribute("data-wizard-ready", "true");
|
|
@@ -80,21 +8,9 @@ function markWizardReady(root) {
|
|
|
80
8
|
}
|
|
81
9
|
function initializeWizardStep(root, steps, prevButtons, nextButtons, finalOnlyEls, lastIndex) {
|
|
82
10
|
const currentIndex = Math.max(0, steps.findIndex((step) => !step.hidden));
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
return;
|
|
87
|
-
ready = true;
|
|
88
|
-
showWizardStep(steps, currentIndex);
|
|
89
|
-
updateWizardNav(prevButtons, nextButtons, finalOnlyEls, currentIndex, lastIndex, stepIsValid(steps[currentIndex]));
|
|
90
|
-
markWizardReady(root);
|
|
91
|
-
};
|
|
92
|
-
const measured = syncWizardStepSize(root, steps, prevButtons, nextButtons, finalOnlyEls, lastIndex);
|
|
93
|
-
if (measured)
|
|
94
|
-
showReadyStep();
|
|
95
|
-
else
|
|
96
|
-
updateWizardNav(prevButtons, nextButtons, finalOnlyEls, currentIndex, lastIndex, stepIsValid(steps[currentIndex]));
|
|
97
|
-
bindWizardSizing(root, steps, prevButtons, nextButtons, finalOnlyEls, lastIndex, showReadyStep);
|
|
11
|
+
showWizardStep(steps, currentIndex);
|
|
12
|
+
updateWizardNav(prevButtons, nextButtons, finalOnlyEls, currentIndex, lastIndex, stepIsValid(steps[currentIndex]));
|
|
13
|
+
markWizardReady(root);
|
|
98
14
|
return currentIndex;
|
|
99
15
|
}
|
|
100
16
|
export { initializeWizardStep };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sizing.js","sourceRoot":"","sources":["../../../src/wizard/sizing.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"sizing.js","sourceRoot":"","sources":["../../../src/wizard/sizing.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,SAAS,eAAe,CAAC,IAAiB;IACxC,MAAM,CAAC,qBAAqB,CAAC,GAAG,EAAE;QAC9B,IAAI,CAAC,YAAY,CAAC,mBAAmB,EAAE,MAAM,CAAC,CAAC;IACnD,CAAC,CAAC,CAAC;AACL,CAAC;AAED,SAAS,oBAAoB,CAC3B,IAAiB,EACjB,KAAoB,EACpB,WAA0B,EAC1B,WAA0B,EAC1B,YAA2B,EAC3B,SAAiB;IAEjB,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,CAC3B,CAAC,EACD,KAAK,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CACxC,CAAC;IACF,cAAc,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC;IACpC,eAAe,CACb,WAAW,EACX,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,SAAS,EACT,WAAW,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CACjC,CAAC;IACF,eAAe,CAAC,IAAI,CAAC,CAAC;IACtB,OAAO,YAAY,CAAC;AACtB,CAAC;AAED,OAAO,EAAE,oBAAoB,EAAE,CAAC"}
|