@smart-wizard/core 0.0.0-stage → 1.0.1
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/LICENSE +21 -0
- package/README.md +43 -2
- package/dist/index.d.mts +592 -0
- package/dist/index.d.ts +592 -0
- package/dist/index.js +1954 -0
- package/dist/index.mjs +1892 -0
- package/package.json +50 -3
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 Dipu Rajendran
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,3 +1,44 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @smart-wizard/core
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
**The framework-agnostic engine for SmartWizard.**
|
|
4
|
+
Zero dependencies · TypeScript · Accessible · Extensible · Themeable
|
|
5
|
+
|
|
6
|
+
> This package is part of the **[SmartWizard](https://github.com/techlab/smart-wizard)** project, the next-generation continuation of the popular jQuery SmartWizard.
|
|
7
|
+
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
## 📖 Documentation & Links
|
|
11
|
+
|
|
12
|
+
* 📚 **Full Documentation & Guides**: [GitHub Readme](https://github.com/techlab/smart-wizard#readme)
|
|
13
|
+
* 🌐 **Official Website & Demos**: [techlaboratory.net/smart-wizard](https://techlaboratory.net/smart-wizard)
|
|
14
|
+
* 🐙 **Repository**: [github.com/techlab/smart-wizard](https://github.com/techlab/smart-wizard)
|
|
15
|
+
* 🐛 **Issue Tracker**: [github.com/techlab/smart-wizard/issues](https://github.com/techlab/smart-wizard/issues)
|
|
16
|
+
|
|
17
|
+
---
|
|
18
|
+
|
|
19
|
+
## 📥 Installation
|
|
20
|
+
|
|
21
|
+
```bash
|
|
22
|
+
npm install @smart-wizard/core @smart-wizard/ui
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
---
|
|
26
|
+
|
|
27
|
+
## ⚡ Quick Example
|
|
28
|
+
|
|
29
|
+
```javascript
|
|
30
|
+
import { SmartWizard } from '@smart-wizard/core';
|
|
31
|
+
import '@smart-wizard/ui/full';
|
|
32
|
+
import '@smart-wizard/ui/themes/arrows.css'; // optional theme
|
|
33
|
+
|
|
34
|
+
const wizard = new SmartWizard('#wizard', {
|
|
35
|
+
theme: 'arrows',
|
|
36
|
+
transition: { effect: 'slideHorizontal', speed: 400 },
|
|
37
|
+
});
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
---
|
|
41
|
+
|
|
42
|
+
## 📝 License
|
|
43
|
+
|
|
44
|
+
Dual-licensed under [MIT](https://github.com/techlab/smart-wizard/blob/main/LICENSE) (open-source) and [Commercial License](https://techlaboratory.net/smart-wizard#license).
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,592 @@
|
|
|
1
|
+
type ContentDirection = "ltr" | "rtl";
|
|
2
|
+
type ColorScheme = 'auto' | 'dark' | 'light' | 'none';
|
|
3
|
+
type WizardLayout = 'horizontal' | 'vertical';
|
|
4
|
+
type WizardColor = 'default' | 'blue' | 'violet' | string;
|
|
5
|
+
type StepDirection = 'forward' | 'backward' | 'none';
|
|
6
|
+
type StepPosition = 'first' | 'middle' | 'last';
|
|
7
|
+
type StepState = 'default' | 'active' | 'completed' | 'disabled' | 'hidden' | 'error' | 'warning';
|
|
8
|
+
interface WizardOptions {
|
|
9
|
+
initialStep: number;
|
|
10
|
+
theme: string;
|
|
11
|
+
colorScheme: ColorScheme;
|
|
12
|
+
layout: WizardLayout;
|
|
13
|
+
color: WizardColor;
|
|
14
|
+
behavior: Behavior;
|
|
15
|
+
navigation: Navigation;
|
|
16
|
+
transition: Transition;
|
|
17
|
+
keyboardNavigation: KeyboardNavigation;
|
|
18
|
+
stepStates: {
|
|
19
|
+
completed: number[];
|
|
20
|
+
disabled: number[];
|
|
21
|
+
hidden: number[];
|
|
22
|
+
error: number[];
|
|
23
|
+
warning: number[];
|
|
24
|
+
};
|
|
25
|
+
swipeNavigation: SwipeNavigation;
|
|
26
|
+
scrollToView: boolean;
|
|
27
|
+
contentLoader: ContentLoader | null;
|
|
28
|
+
}
|
|
29
|
+
interface Behavior {
|
|
30
|
+
autoHeight: boolean;
|
|
31
|
+
useUrlHash: boolean;
|
|
32
|
+
supportBrowserHistory: boolean;
|
|
33
|
+
}
|
|
34
|
+
interface Navigation {
|
|
35
|
+
enabled: boolean;
|
|
36
|
+
alwaysClickable: boolean;
|
|
37
|
+
completed: {
|
|
38
|
+
enabled: boolean;
|
|
39
|
+
completeAllPreviousSteps: boolean;
|
|
40
|
+
clearOnBack: boolean;
|
|
41
|
+
clickable: boolean;
|
|
42
|
+
};
|
|
43
|
+
}
|
|
44
|
+
interface Transition {
|
|
45
|
+
effect: 'default' | 'none' | 'fade' | 'slideHorizontal' | 'slideVertical' | 'slideSwing' | 'css' | string;
|
|
46
|
+
speed: number;
|
|
47
|
+
easing: string;
|
|
48
|
+
css: {
|
|
49
|
+
prefix: string;
|
|
50
|
+
forward: {
|
|
51
|
+
show: string;
|
|
52
|
+
hide: string;
|
|
53
|
+
};
|
|
54
|
+
backward: {
|
|
55
|
+
show: string;
|
|
56
|
+
hide: string;
|
|
57
|
+
};
|
|
58
|
+
};
|
|
59
|
+
}
|
|
60
|
+
interface KeyboardNavigation {
|
|
61
|
+
enabled: boolean;
|
|
62
|
+
keys: {
|
|
63
|
+
left: string[];
|
|
64
|
+
right: string[];
|
|
65
|
+
};
|
|
66
|
+
}
|
|
67
|
+
interface SwipeNavigation {
|
|
68
|
+
enabled: boolean;
|
|
69
|
+
threshold: number;
|
|
70
|
+
}
|
|
71
|
+
type ContentLoader = (stepIndex: number, stepDirection: StepDirection, stepPosition: StepPosition, stepElement: HTMLElement, callback: (content: string | Node) => void) => void;
|
|
72
|
+
type TransitionCallback = () => void;
|
|
73
|
+
interface TransitionHandler {
|
|
74
|
+
(next: HTMLElement, current: HTMLElement | null, stepDirection: StepDirection, wizard: WizardInterface, callback: TransitionCallback): void;
|
|
75
|
+
}
|
|
76
|
+
interface StepItem {
|
|
77
|
+
step: HTMLElement;
|
|
78
|
+
page: HTMLElement;
|
|
79
|
+
}
|
|
80
|
+
/**
|
|
81
|
+
* Contract for a single wizard step wrapper.
|
|
82
|
+
* Implemented by `WizardStep`. Declared here to avoid circular imports
|
|
83
|
+
* between `types.ts` ↔ `WizardStep.ts`.
|
|
84
|
+
*/
|
|
85
|
+
interface IWizardStep {
|
|
86
|
+
/** Zero-based index of this step. */
|
|
87
|
+
readonly index: number;
|
|
88
|
+
/** The nav anchor `<a>` / `<button>` element. */
|
|
89
|
+
readonly element: HTMLElement;
|
|
90
|
+
/** The content panel element. */
|
|
91
|
+
readonly page: HTMLElement;
|
|
92
|
+
/** Returns `true` if the given state class is applied. */
|
|
93
|
+
hasState(state: StepState): boolean;
|
|
94
|
+
/** Returns `true` if this is the currently active step. */
|
|
95
|
+
isActive(): boolean;
|
|
96
|
+
/** Returns `true` if the step has the `disabled` state. */
|
|
97
|
+
isDisabled(): boolean;
|
|
98
|
+
/** Returns `true` if the step has the `completed` state. */
|
|
99
|
+
isCompleted(): boolean;
|
|
100
|
+
/** Returns `true` if the step has the `hidden` state. */
|
|
101
|
+
isHidden(): boolean;
|
|
102
|
+
state(s: StepState): this;
|
|
103
|
+
removeState(s: StepState): this;
|
|
104
|
+
/** Remove **all** state classes from this step. */
|
|
105
|
+
reset(): this;
|
|
106
|
+
disable(): this;
|
|
107
|
+
enable(): this;
|
|
108
|
+
complete(): this;
|
|
109
|
+
warning(): this;
|
|
110
|
+
error(): this;
|
|
111
|
+
show(): this;
|
|
112
|
+
hide(): this;
|
|
113
|
+
}
|
|
114
|
+
/**
|
|
115
|
+
* Contract for a collection of wizard steps supporting bulk operations.
|
|
116
|
+
* Implemented by `WizardStepCollection`.
|
|
117
|
+
*/
|
|
118
|
+
interface IWizardStepCollection {
|
|
119
|
+
/** Number of steps in the collection. */
|
|
120
|
+
readonly length: number;
|
|
121
|
+
state(s: StepState): this;
|
|
122
|
+
removeState(s: StepState): this;
|
|
123
|
+
/** Clear all state classes from every step in the collection. */
|
|
124
|
+
reset(): this;
|
|
125
|
+
disable(): this;
|
|
126
|
+
enable(): this;
|
|
127
|
+
complete(): this;
|
|
128
|
+
warning(): this;
|
|
129
|
+
error(): this;
|
|
130
|
+
show(): this;
|
|
131
|
+
hide(): this;
|
|
132
|
+
}
|
|
133
|
+
/** Controls the wizard's loading overlay. */
|
|
134
|
+
interface WizardLoader {
|
|
135
|
+
/** Show the loading overlay (`sw-loading` class on the root element). */
|
|
136
|
+
show(): void;
|
|
137
|
+
/** Hide the loading overlay. */
|
|
138
|
+
hide(): void;
|
|
139
|
+
}
|
|
140
|
+
/**
|
|
141
|
+
* The public API surface that extensions receive in every hook.
|
|
142
|
+
* Extension packages should depend on this interface rather than
|
|
143
|
+
* the concrete `SmartWizard` class, keeping the dependency graph clean.
|
|
144
|
+
*/
|
|
145
|
+
interface WizardInterface {
|
|
146
|
+
readonly options: WizardOptions;
|
|
147
|
+
readonly stepItems: StepItem[];
|
|
148
|
+
readonly activeIndex: number;
|
|
149
|
+
/** The currently active step as a `WizardStep` object. */
|
|
150
|
+
readonly activeStep: IWizardStep;
|
|
151
|
+
/** Current progress as a percentage (0–100). 0% on the first step, 100% on the last. */
|
|
152
|
+
readonly progress: number;
|
|
153
|
+
/** `true` if there is a showable step after the current one. */
|
|
154
|
+
readonly canGoNext: boolean;
|
|
155
|
+
/** `true` if there is a showable step before the current one. */
|
|
156
|
+
readonly canGoPrev: boolean;
|
|
157
|
+
readonly main: HTMLElement;
|
|
158
|
+
readonly container: HTMLElement;
|
|
159
|
+
next(): void;
|
|
160
|
+
prev(): void;
|
|
161
|
+
goTo(stepIndex: number, options?: {
|
|
162
|
+
force?: boolean;
|
|
163
|
+
}): void;
|
|
164
|
+
reset(): void;
|
|
165
|
+
/**
|
|
166
|
+
* Return a `WizardStep` wrapper for the step at the given index.
|
|
167
|
+
* @example wizard.step(2).disable();
|
|
168
|
+
*/
|
|
169
|
+
step(index: number): IWizardStep;
|
|
170
|
+
/**
|
|
171
|
+
* Return a `WizardStepCollection` for the given indices, or **all** steps
|
|
172
|
+
* if no indices are provided.
|
|
173
|
+
* @example wizard.steps([1, 2, 3]).disable();
|
|
174
|
+
* @example wizard.steps().reset();
|
|
175
|
+
*/
|
|
176
|
+
steps(indexes?: number[]): IWizardStepCollection;
|
|
177
|
+
readonly width: number;
|
|
178
|
+
readonly height: number;
|
|
179
|
+
updateHeight(): void;
|
|
180
|
+
readonly info: WizardInfo;
|
|
181
|
+
/** Controls the wizard loading overlay. */
|
|
182
|
+
readonly loader: WizardLoader;
|
|
183
|
+
}
|
|
184
|
+
interface StepInfo {
|
|
185
|
+
currentStep: number;
|
|
186
|
+
totalSteps: number;
|
|
187
|
+
}
|
|
188
|
+
/** Aggregated snapshot of the wizard's current runtime state. */
|
|
189
|
+
interface WizardInfo {
|
|
190
|
+
/** Current and total step counts. */
|
|
191
|
+
stepInfo: StepInfo;
|
|
192
|
+
/** Text flow direction of the wizard content area. */
|
|
193
|
+
contentDirection: ContentDirection;
|
|
194
|
+
/** Active layout mode. */
|
|
195
|
+
layout: WizardLayout;
|
|
196
|
+
/** Active color scheme. */
|
|
197
|
+
colorScheme: ColorScheme;
|
|
198
|
+
/** Width of the root wizard element in pixels. */
|
|
199
|
+
width: number;
|
|
200
|
+
/** Height of the root wizard element in pixels. */
|
|
201
|
+
height: number;
|
|
202
|
+
}
|
|
203
|
+
interface Transitions {
|
|
204
|
+
[key: string]: TransitionHandler;
|
|
205
|
+
}
|
|
206
|
+
/** Arguments passed to `onBeforeShow`. */
|
|
207
|
+
interface ExtensionBeforeShowArgs {
|
|
208
|
+
/** Index of the step about to be shown. */
|
|
209
|
+
stepIdx: number;
|
|
210
|
+
/** Index of the step that is currently active (-1 on initial load). */
|
|
211
|
+
activeIndex: number;
|
|
212
|
+
/** Direction of the navigation. */
|
|
213
|
+
direction: StepDirection;
|
|
214
|
+
}
|
|
215
|
+
/** Arguments passed to `onAfterShow`. */
|
|
216
|
+
interface ExtensionAfterShowArgs {
|
|
217
|
+
/** Index of the step that was just shown. */
|
|
218
|
+
stepIdx: number;
|
|
219
|
+
/** Direction of the navigation. */
|
|
220
|
+
direction: StepDirection;
|
|
221
|
+
}
|
|
222
|
+
/**
|
|
223
|
+
* A `WizardExtension` is a plain object that hooks into the SmartWizard lifecycle.
|
|
224
|
+
* All hooks are optional.
|
|
225
|
+
*
|
|
226
|
+
* @example
|
|
227
|
+
* const myExtension: WizardExtension = {
|
|
228
|
+
* name: 'my-extension',
|
|
229
|
+
* onBeforeShow(wizard, { stepIdx, direction }) {
|
|
230
|
+
* if (!validate(stepIdx)) return false; // cancel navigation
|
|
231
|
+
* },
|
|
232
|
+
* };
|
|
233
|
+
* wizard.extend(myExtension);
|
|
234
|
+
*/
|
|
235
|
+
interface WizardExtension {
|
|
236
|
+
/** Unique identifier — used to prevent duplicate registration. */
|
|
237
|
+
readonly name: string;
|
|
238
|
+
/**
|
|
239
|
+
* Called once immediately after the extension is registered via `extend()`.
|
|
240
|
+
* Use this to set up any state your extension needs.
|
|
241
|
+
*/
|
|
242
|
+
onInstall?(wizard: WizardInterface): void;
|
|
243
|
+
/**
|
|
244
|
+
* Called every time `init()` runs: on construction, after `setOptions()`, and after `reset()`.
|
|
245
|
+
* Use this to re-apply DOM mutations that init() might have undone.
|
|
246
|
+
*/
|
|
247
|
+
onInit?(wizard: WizardInterface): void;
|
|
248
|
+
/**
|
|
249
|
+
* Called after the wizard finishes loading and the first step is shown.
|
|
250
|
+
* Fires on construction and after `setOptions()` / `reset()`.
|
|
251
|
+
*/
|
|
252
|
+
onLoad?(wizard: WizardInterface): void;
|
|
253
|
+
/**
|
|
254
|
+
* Called just before a step transition begins.
|
|
255
|
+
* Return `false` or `Promise<false>` to **cancel** the navigation.
|
|
256
|
+
*
|
|
257
|
+
* @example Async validation
|
|
258
|
+
* async onBeforeShow(wizard, { stepIdx, activeIndex }) {
|
|
259
|
+
* const ok = await myApi.validateStep(activeIndex);
|
|
260
|
+
* if (!ok) return false;
|
|
261
|
+
* }
|
|
262
|
+
*/
|
|
263
|
+
onBeforeShow?(wizard: WizardInterface, args: ExtensionBeforeShowArgs): Promise<boolean | void> | boolean | void;
|
|
264
|
+
/**
|
|
265
|
+
* Called after a step transition completes and the new page is visible.
|
|
266
|
+
*/
|
|
267
|
+
onAfterShow?(wizard: WizardInterface, args: ExtensionAfterShowArgs): void;
|
|
268
|
+
/**
|
|
269
|
+
* Called when `destroy()` is invoked on the wizard.
|
|
270
|
+
* Use this to clean up any resources your extension allocated.
|
|
271
|
+
*/
|
|
272
|
+
onDestroy?(wizard: WizardInterface): void;
|
|
273
|
+
}
|
|
274
|
+
interface StepEventArgs {
|
|
275
|
+
stepIndex: number;
|
|
276
|
+
stepElement: HTMLElement | null;
|
|
277
|
+
stepDirection: StepDirection;
|
|
278
|
+
stepPosition: StepPosition;
|
|
279
|
+
}
|
|
280
|
+
interface LeaveStepEventArgs extends StepEventArgs {
|
|
281
|
+
nextStepIndex: number;
|
|
282
|
+
}
|
|
283
|
+
interface WizardEvents {
|
|
284
|
+
initialized: {
|
|
285
|
+
wizard: SmartWizard;
|
|
286
|
+
};
|
|
287
|
+
loaded: {
|
|
288
|
+
wizard: SmartWizard;
|
|
289
|
+
};
|
|
290
|
+
showStep: StepEventArgs;
|
|
291
|
+
leaveStep: LeaveStepEventArgs;
|
|
292
|
+
stepChanged: {
|
|
293
|
+
currentStep: number;
|
|
294
|
+
previousStep: number;
|
|
295
|
+
};
|
|
296
|
+
}
|
|
297
|
+
type EventCallback$1<T = any> = (event: CustomEvent<T>) => void;
|
|
298
|
+
|
|
299
|
+
/**
|
|
300
|
+
* A first-class wrapper around a single wizard step.
|
|
301
|
+
* All mutating methods return `this` for fluent chaining.
|
|
302
|
+
*
|
|
303
|
+
* @example
|
|
304
|
+
* wizard.step(2).disable();
|
|
305
|
+
* wizard.step(3).state('error').state('warning'); // chain multiple states
|
|
306
|
+
*/
|
|
307
|
+
declare class WizardStep implements IWizardStep {
|
|
308
|
+
private readonly _index;
|
|
309
|
+
private readonly _item;
|
|
310
|
+
/** Accessor so isActive() always reflects the live wizard state. */
|
|
311
|
+
private readonly _getActiveIndex;
|
|
312
|
+
constructor(_index: number, _item: StepItem,
|
|
313
|
+
/** Accessor so isActive() always reflects the live wizard state. */
|
|
314
|
+
_getActiveIndex: () => number);
|
|
315
|
+
/** Zero-based index of this step in the wizard. */
|
|
316
|
+
get index(): number;
|
|
317
|
+
/** The nav anchor element for this step. */
|
|
318
|
+
get element(): HTMLElement;
|
|
319
|
+
/** The content panel element for this step. */
|
|
320
|
+
get page(): HTMLElement;
|
|
321
|
+
/** Returns `true` if the given state class is currently applied to this step. */
|
|
322
|
+
hasState(state: StepState): boolean;
|
|
323
|
+
/** Returns `true` if this is the currently active step. */
|
|
324
|
+
isActive(): boolean;
|
|
325
|
+
/** Returns `true` if the step has the `disabled` state. */
|
|
326
|
+
isDisabled(): boolean;
|
|
327
|
+
/** Returns `true` if the step has the `completed` state. */
|
|
328
|
+
isCompleted(): boolean;
|
|
329
|
+
/** Returns `true` if the step has the `hidden` state. */
|
|
330
|
+
isHidden(): boolean;
|
|
331
|
+
/**
|
|
332
|
+
* Add a state class to this step.
|
|
333
|
+
* @example wizard.step(2).state('error');
|
|
334
|
+
*/
|
|
335
|
+
state(s: StepState): this;
|
|
336
|
+
/**
|
|
337
|
+
* Remove a state class from this step.
|
|
338
|
+
* @example wizard.step(2).removeState('disabled');
|
|
339
|
+
*/
|
|
340
|
+
removeState(s: StepState): this;
|
|
341
|
+
/**
|
|
342
|
+
* Remove **all** state classes from this step, returning it to a blank slate.
|
|
343
|
+
* @example wizard.step(2).reset();
|
|
344
|
+
*/
|
|
345
|
+
reset(): this;
|
|
346
|
+
/** Mark this step as disabled (prevents navigation). */
|
|
347
|
+
disable(): this;
|
|
348
|
+
/** Remove the `disabled` state from this step. */
|
|
349
|
+
enable(): this;
|
|
350
|
+
/** Mark this step as completed. */
|
|
351
|
+
complete(): this;
|
|
352
|
+
/** Mark this step with a warning. */
|
|
353
|
+
warning(): this;
|
|
354
|
+
/** Mark this step with an error. */
|
|
355
|
+
error(): this;
|
|
356
|
+
/** Make this step visible (removes the `hidden` state). */
|
|
357
|
+
show(): this;
|
|
358
|
+
/** Hide this step (adds the `hidden` state). */
|
|
359
|
+
hide(): this;
|
|
360
|
+
private _stateToClass;
|
|
361
|
+
}
|
|
362
|
+
|
|
363
|
+
/**
|
|
364
|
+
* A collection of `WizardStep` objects that supports bulk state operations.
|
|
365
|
+
* All mutating methods return `this` for fluent chaining.
|
|
366
|
+
*
|
|
367
|
+
* @example
|
|
368
|
+
* wizard.steps([1, 2, 3]).disable();
|
|
369
|
+
* wizard.steps().reset(); // reset ALL steps
|
|
370
|
+
* wizard.steps([0, 1]).complete().show();
|
|
371
|
+
*/
|
|
372
|
+
declare class WizardStepCollection implements IWizardStepCollection {
|
|
373
|
+
private readonly _steps;
|
|
374
|
+
constructor(_steps: WizardStep[]);
|
|
375
|
+
/** Number of steps in this collection. */
|
|
376
|
+
get length(): number;
|
|
377
|
+
/**
|
|
378
|
+
* Iterate over every step in the collection.
|
|
379
|
+
* Returns `this` for fluent chaining.
|
|
380
|
+
*/
|
|
381
|
+
forEach(callback: (step: WizardStep, index: number) => void): this;
|
|
382
|
+
/**
|
|
383
|
+
* Add a state class to every step in the collection.
|
|
384
|
+
* @example wizard.steps([0, 1]).state('disabled');
|
|
385
|
+
*/
|
|
386
|
+
state(s: StepState): this;
|
|
387
|
+
/**
|
|
388
|
+
* Remove a state class from every step in the collection.
|
|
389
|
+
* @example wizard.steps([0, 1]).removeState('disabled');
|
|
390
|
+
*/
|
|
391
|
+
removeState(s: StepState): this;
|
|
392
|
+
/**
|
|
393
|
+
* Clear all state classes from every step in the collection.
|
|
394
|
+
* @example wizard.steps().reset();
|
|
395
|
+
*/
|
|
396
|
+
reset(): this;
|
|
397
|
+
/** Disable every step in the collection. */
|
|
398
|
+
disable(): this;
|
|
399
|
+
/** Enable (un-disable) every step in the collection. */
|
|
400
|
+
enable(): this;
|
|
401
|
+
/** Mark every step in the collection as completed. */
|
|
402
|
+
complete(): this;
|
|
403
|
+
/** Mark every step in the collection with a warning. */
|
|
404
|
+
warning(): this;
|
|
405
|
+
/** Mark every step in the collection with an error. */
|
|
406
|
+
error(): this;
|
|
407
|
+
/** Make every step in the collection visible. */
|
|
408
|
+
show(): this;
|
|
409
|
+
/** Hide every step in the collection. */
|
|
410
|
+
hide(): this;
|
|
411
|
+
}
|
|
412
|
+
|
|
413
|
+
declare class SmartWizard implements WizardInterface {
|
|
414
|
+
private _options;
|
|
415
|
+
readonly main: HTMLElement;
|
|
416
|
+
container: HTMLElement;
|
|
417
|
+
protected nav: HTMLElement;
|
|
418
|
+
stepItems: StepItem[];
|
|
419
|
+
private contentDirection;
|
|
420
|
+
private isInitialized;
|
|
421
|
+
private _activeIndex;
|
|
422
|
+
private touchStartX;
|
|
423
|
+
private touchStartY;
|
|
424
|
+
private readonly emitter;
|
|
425
|
+
private readonly binder;
|
|
426
|
+
private readonly registry;
|
|
427
|
+
private navScroll;
|
|
428
|
+
private stateManager;
|
|
429
|
+
private navigator;
|
|
430
|
+
private progressBar;
|
|
431
|
+
private navButtons;
|
|
432
|
+
private static _instanceCounter;
|
|
433
|
+
readonly id: string;
|
|
434
|
+
constructor(element: HTMLElement | string, options?: Partial<WizardOptions>);
|
|
435
|
+
private setup;
|
|
436
|
+
private _generateWizardId;
|
|
437
|
+
private init;
|
|
438
|
+
private load;
|
|
439
|
+
private resetDataAttributes;
|
|
440
|
+
private getInitialStep;
|
|
441
|
+
private setElements;
|
|
442
|
+
private setColorScheme;
|
|
443
|
+
private setNav;
|
|
444
|
+
private setEvents;
|
|
445
|
+
private setAnchor;
|
|
446
|
+
private setButtons;
|
|
447
|
+
private setProgressbar;
|
|
448
|
+
private showStep;
|
|
449
|
+
private loadContent;
|
|
450
|
+
private navigate;
|
|
451
|
+
private navigateToIndex;
|
|
452
|
+
private getStepByAnchor;
|
|
453
|
+
private getURLHashIndex;
|
|
454
|
+
private setURLHash;
|
|
455
|
+
private recalculateHeight;
|
|
456
|
+
/**
|
|
457
|
+
* Register one or more extensions. Safe to call before or after init().
|
|
458
|
+
* Returns `this` for fluent chaining.
|
|
459
|
+
*/
|
|
460
|
+
extend(...exts: WizardExtension[]): this;
|
|
461
|
+
/** Index of the active step */
|
|
462
|
+
get activeIndex(): number;
|
|
463
|
+
/** Length of the steps */
|
|
464
|
+
get stepLength(): number;
|
|
465
|
+
/**
|
|
466
|
+
* Return a `WizardStep` wrapper for the step at the given index.
|
|
467
|
+
* @example wizard.step(2).disable();
|
|
468
|
+
* @example wizard.step(0).complete().show();
|
|
469
|
+
*/
|
|
470
|
+
step(index: number): WizardStep;
|
|
471
|
+
/**
|
|
472
|
+
* Return a `WizardStepCollection` for the given indices.
|
|
473
|
+
* When called with no arguments, wraps **all** steps.
|
|
474
|
+
* @example wizard.steps([1, 2, 3]).disable();
|
|
475
|
+
* @example wizard.steps().reset();
|
|
476
|
+
*/
|
|
477
|
+
steps(indexes?: number[]): WizardStepCollection;
|
|
478
|
+
/** The currently active step as a `WizardStep` object. */
|
|
479
|
+
get activeStep(): WizardStep;
|
|
480
|
+
/**
|
|
481
|
+
* Current progress as a percentage (0–100).
|
|
482
|
+
* 0% on the first step, 100% on the last step.
|
|
483
|
+
*/
|
|
484
|
+
get progress(): number;
|
|
485
|
+
/** `true` if there is a showable step after the current one. */
|
|
486
|
+
get canGoNext(): boolean;
|
|
487
|
+
/** `true` if there is a showable step before the current one. */
|
|
488
|
+
get canGoPrev(): boolean;
|
|
489
|
+
/** Configuration */
|
|
490
|
+
get options(): Readonly<WizardOptions>;
|
|
491
|
+
get width(): number;
|
|
492
|
+
get height(): number;
|
|
493
|
+
/** Returns an aggregated snapshot of the wizard's current runtime state. */
|
|
494
|
+
get info(): WizardInfo;
|
|
495
|
+
next(): void;
|
|
496
|
+
prev(): void;
|
|
497
|
+
first(): void;
|
|
498
|
+
last(): void;
|
|
499
|
+
goTo(stepIndex: number, options?: {
|
|
500
|
+
force?: boolean;
|
|
501
|
+
}): void;
|
|
502
|
+
reset(): void;
|
|
503
|
+
setOptions(options: Partial<WizardOptions>): void;
|
|
504
|
+
getOptions(): WizardOptions;
|
|
505
|
+
/**
|
|
506
|
+
* Controls the wizard loading overlay.
|
|
507
|
+
*
|
|
508
|
+
* @example
|
|
509
|
+
* wizard.loader.show();
|
|
510
|
+
* // ... async work ...
|
|
511
|
+
* wizard.loader.hide();
|
|
512
|
+
*/
|
|
513
|
+
get loader(): WizardLoader;
|
|
514
|
+
updateHeight(): void;
|
|
515
|
+
on<K extends keyof WizardEvents>(eventName: K, callback: EventCallback$1<WizardEvents[K]>): this;
|
|
516
|
+
off<K extends keyof WizardEvents>(eventName: K, callback?: EventCallback$1<WizardEvents[K]>): this;
|
|
517
|
+
once<K extends keyof WizardEvents>(eventName: K, callback: EventCallback$1<WizardEvents[K]>): this;
|
|
518
|
+
/**
|
|
519
|
+
* Destroy the wizard and remove all event listeners and styles
|
|
520
|
+
*/
|
|
521
|
+
destroy(): void;
|
|
522
|
+
}
|
|
523
|
+
|
|
524
|
+
declare const defaultOptions: WizardOptions;
|
|
525
|
+
|
|
526
|
+
declare const transitions: Record<string, TransitionHandler>;
|
|
527
|
+
/**
|
|
528
|
+
* Register a custom transition effect.
|
|
529
|
+
*
|
|
530
|
+
* @param name - Unique transition name used in `options.transition.effect`.
|
|
531
|
+
* @param handler - The transition function to execute.
|
|
532
|
+
*
|
|
533
|
+
* @example
|
|
534
|
+
* import { registerTransition } from '@smart-wizard/core';
|
|
535
|
+
*
|
|
536
|
+
* registerTransition('myFlip', (next, current, direction, wizard, done) => {
|
|
537
|
+
* // your animation logic
|
|
538
|
+
* done();
|
|
539
|
+
* });
|
|
540
|
+
*
|
|
541
|
+
* new SmartWizard('#wz', { transition: { effect: 'myFlip' } });
|
|
542
|
+
*/
|
|
543
|
+
declare function registerTransition(name: string, handler: TransitionHandler): void;
|
|
544
|
+
|
|
545
|
+
type ElementCallback = (element: HTMLElement) => void;
|
|
546
|
+
type EventCallback = (event: Event) => void;
|
|
547
|
+
declare const applyTo: (value: Element | Element[] | NodeListOf<Element>, cb: ElementCallback) => void;
|
|
548
|
+
declare const getElement: (selector: string) => HTMLElement | null;
|
|
549
|
+
declare const getElements: (selector: string) => HTMLElement[];
|
|
550
|
+
declare const getChildren: (selector: string, root?: Element | Document | any) => HTMLElement[];
|
|
551
|
+
declare const getFirstDescendant: (selector: string, parent?: Element | Document | any) => HTMLElement | null;
|
|
552
|
+
declare const getAllDescendants: (selector: string, parent?: Element | Document | any) => HTMLElement[];
|
|
553
|
+
declare const addClass: (className: string, element: Element | Element[] | NodeListOf<Element>) => void;
|
|
554
|
+
declare const removeClass: (className: string, element: Element | Element[] | NodeListOf<Element>) => void;
|
|
555
|
+
declare const removeClassByPrefix: (element: Element | Element[] | NodeListOf<Element>, classNamePrefix: string) => void;
|
|
556
|
+
declare const hasClass: (className: string, element: HTMLElement) => boolean;
|
|
557
|
+
declare const showElement: (element: Element | Element[] | NodeListOf<Element>) => void;
|
|
558
|
+
declare const hideElement: (element: Element | Element[] | NodeListOf<Element>) => void;
|
|
559
|
+
declare const addEvent: (element: Element | Element[] | NodeListOf<Element> | Window | Document, event: keyof HTMLElementEventMap | keyof WindowEventMap, listener: EventCallback) => void;
|
|
560
|
+
declare const dispatchEvent: (element: HTMLElement, eventName: string, data?: CustomEventInit) => boolean;
|
|
561
|
+
declare const getAttribute: (element: HTMLElement, attributeName: string) => string | null;
|
|
562
|
+
declare const setAttribute: (el: HTMLElement, attributeName: string, value: string) => void;
|
|
563
|
+
declare const getElementHeight: (element: HTMLElement) => string;
|
|
564
|
+
declare const setElementHeight: (element: HTMLElement, value: string) => void;
|
|
565
|
+
declare const setElementWidth: (element: HTMLElement, value: string) => void;
|
|
566
|
+
declare const getElementWidth: (element: HTMLElement) => number;
|
|
567
|
+
/**
|
|
568
|
+
* Sets content on an element safely.
|
|
569
|
+
* - `string` → assigned to `textContent` (XSS-safe for plain text)
|
|
570
|
+
* - `Node` → replaces children via `appendChild`
|
|
571
|
+
* Use this instead of `setHtml` when the content is not trusted HTML.
|
|
572
|
+
*/
|
|
573
|
+
declare const setContent: (element: HTMLElement, content: string | Node) => void;
|
|
574
|
+
/** @deprecated Use `setContent()` for safe content assignment. Direct innerHTML usage is an XSS risk. */
|
|
575
|
+
declare const setHtml: (element: HTMLElement, content: string) => void;
|
|
576
|
+
/** @deprecated Use DOM APIs directly. Direct innerHTML concatenation is an XSS risk. */
|
|
577
|
+
declare const appendHTML: (element: HTMLElement, content: string) => void;
|
|
578
|
+
/** @deprecated Use DOM APIs directly. Direct innerHTML concatenation is an XSS risk. */
|
|
579
|
+
declare const prependHTML: (element: HTMLElement, content: string) => void;
|
|
580
|
+
/**
|
|
581
|
+
* Returns true only if `cls` is a safe, plain CSS class name.
|
|
582
|
+
* Prevents CSS injection attacks in dynamic class assignment.
|
|
583
|
+
* Allows: letters, digits, hyphens, underscores. Must start with a letter or underscore.
|
|
584
|
+
*/
|
|
585
|
+
declare const isSafeCssClass: (cls: string) => boolean;
|
|
586
|
+
declare const appendElement: (element: HTMLElement, content: HTMLElement) => void;
|
|
587
|
+
declare const prependElement: (element: HTMLElement, content: HTMLElement) => void;
|
|
588
|
+
declare const triggerEvent: (el: HTMLElement, eventName: string, data?: {}) => boolean;
|
|
589
|
+
declare const deepMerge: <T extends Record<string, any>>(target: T, ...sources: Partial<T>[]) => T;
|
|
590
|
+
declare const mergeOptions: (target: WizardOptions, ...sources: Partial<WizardOptions>[]) => WizardOptions;
|
|
591
|
+
|
|
592
|
+
export { type Behavior, type ColorScheme, type ContentDirection, type ContentLoader, type ElementCallback, type EventCallback$1 as EventCallback, type ExtensionAfterShowArgs, type ExtensionBeforeShowArgs, type IWizardStep, type IWizardStepCollection, type KeyboardNavigation, type LeaveStepEventArgs, type Navigation, SmartWizard, type StepDirection, type StepEventArgs, type StepInfo, type StepItem, type StepPosition, type StepState, type SwipeNavigation, type Transition, type TransitionCallback, type TransitionHandler, type Transitions, type WizardColor, type WizardEvents, type WizardExtension, type WizardInfo, type WizardInterface, type WizardLayout, type WizardLoader, type WizardOptions, WizardStep, WizardStepCollection, addClass, addEvent, appendElement, appendHTML, applyTo, deepMerge, defaultOptions, dispatchEvent, getAllDescendants, getAttribute, getChildren, getElement, getElementHeight, getElementWidth, getElements, getFirstDescendant, hasClass, hideElement, isSafeCssClass, mergeOptions, prependElement, prependHTML, registerTransition, removeClass, removeClassByPrefix, setAttribute, setContent, setElementHeight, setElementWidth, setHtml, showElement, transitions, triggerEvent };
|