@progressive-development/pd-wizard 1.0.4 → 1.0.5
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/dist/default-wizard/DefaultWizard.d.ts +5 -0
- package/dist/default-wizard/DefaultWizard.d.ts.map +1 -1
- package/dist/default-wizard/DefaultWizard.js +15 -0
- package/dist/pd-default-wizard-step/PdDefaultWizardStep.d.ts +8 -0
- package/dist/pd-default-wizard-step/PdDefaultWizardStep.d.ts.map +1 -1
- package/dist/pd-default-wizard-step/PdDefaultWizardStep.js +9 -0
- package/package.json +5 -5
- package/dist/pd-wizard/pd-steps/pd-steps.stories.d.ts +0 -50
- package/dist/pd-wizard/pd-steps/pd-steps.stories.d.ts.map +0 -1
- package/dist/pd-wizard/pd-wizard.stories.d.ts +0 -51
- package/dist/pd-wizard/pd-wizard.stories.d.ts.map +0 -1
- package/dist/wizard-close-popup/wizard-close-popup.stories.d.ts +0 -39
- package/dist/wizard-close-popup/wizard-close-popup.stories.d.ts.map +0 -1
- package/dist/wizard-reload-popup/wizard-reload-popup.stories.d.ts +0 -42
- package/dist/wizard-reload-popup/wizard-reload-popup.stories.d.ts.map +0 -1
|
@@ -47,6 +47,11 @@ export declare abstract class DefaultWizard<T> extends LitElement {
|
|
|
47
47
|
protected _goToStep(e: CustomEvent<{
|
|
48
48
|
step: number;
|
|
49
49
|
}>): void;
|
|
50
|
+
/**
|
|
51
|
+
* Notify a step element that it has become active.
|
|
52
|
+
* Calls `onStepEnter()` with the current accumulated form data.
|
|
53
|
+
*/
|
|
54
|
+
private _notifyStepEnter;
|
|
50
55
|
/** Scroll to top of page after step change. Disabled when `_scrollToTopOnStepChange` is false. */
|
|
51
56
|
protected _scrollToTop(): void;
|
|
52
57
|
protected _closeWizardRequest(): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DefaultWizard.d.ts","sourceRoot":"","sources":["../../src/default-wizard/DefaultWizard.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AAEH,OAAO,EAEL,UAAU,EACV,kBAAkB,EAClB,cAAc,EAEd,cAAc,EACf,MAAM,KAAK,CAAC;AAIb,OAAO,oDAAoD,CAAC;AAM5D,OAAO,2BAA2B,CAAC;
|
|
1
|
+
{"version":3,"file":"DefaultWizard.d.ts","sourceRoot":"","sources":["../../src/default-wizard/DefaultWizard.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AAEH,OAAO,EAEL,UAAU,EACV,kBAAkB,EAClB,cAAc,EAEd,cAAc,EACf,MAAM,KAAK,CAAC;AAIb,OAAO,oDAAoD,CAAC;AAM5D,OAAO,2BAA2B,CAAC;AAwBnC,6BAA6B;AAC7B,MAAM,WAAW,UAAU;IACzB,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,4BAA4B;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,sBAAsB;IACtB,GAAG,EAAE,MAAM,CAAC;CACb;AAED,8CAA8C;AAC9C,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,IAAI,CAAC;IACrD,KAAK,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,IAAI,CAAC;CACtD;AAMD;;;;GAIG;AACH,8BAAsB,aAAa,CAAC,CAAC,CAAE,SAAQ,UAAU;IAKvD,oCAAoC;IACpC,SAAS,CAAC,OAAO,CAAC,EAAE,YAAY,CAAC;IAEjC,wFAAwF;IACxF,SAAS,CAAC,wBAAwB,EAAE,OAAO,CAAQ;IAMnD,wDAAwD;IAExD,QAAQ,CAAC,YAAY,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;IAEzC,oCAAoC;IAEpC,iBAAiB,EAAE,MAAM,CAAK;IAE9B,8EAA8E;IAE9E,OAAO,CAAC,eAAe,CAAa;IAEpC,0BAA0B;IAE1B,cAAc,CAAC,EAAE,CAAC,CAAC;IAEnB,oEAAoE;IAEpE,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAM7B,MAAM,CAAC,MAAM,EAIR,cAAc,CAAC;IAMX,MAAM,CAAC,YAAY,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAWzD,MAAM;IAsBN,6CAA6C;IAC7C,SAAS,CAAC,QAAQ,CAAC,YAAY,IAAI,IAAI;IAEvC,8BAA8B;IAC9B,SAAS,CAAC,QAAQ,CAAC,YAAY,IAAI,kBAAkB;IAErD,kCAAkC;IAClC,SAAS,CAAC,QAAQ,CAAC,aAAa,IAAI,IAAI;IAMxC,SAAS,CAAC,SAAS,CAAC,CAAC,EAAE,WAAW;IAqClC,SAAS,CAAC,aAAa,CAAC,CAAC,EAAE,WAAW;IAStC,SAAS,CAAC,SAAS,CAAC,CAAC,EAAE,WAAW,CAAC;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAcpD;;;OAGG;IACH,OAAO,CAAC,gBAAgB;IASxB,kGAAkG;IAClG,SAAS,CAAC,YAAY;IAetB,SAAS,CAAC,mBAAmB,IAAI,IAAI;IAwDrC,SAAS,CAAC,kBAAkB,CAAC,UAAU,EAAE,MAAM;IAqD/C,SAAS,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,EAAE,CAAC;IAkBhD,SAAS,CAAC,kBAAkB;IAc5B,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,qBAAqB;CAmB9B"}
|
|
@@ -78,6 +78,7 @@ class DefaultWizard extends LitElement {
|
|
|
78
78
|
if (this._withLocalStorageId) {
|
|
79
79
|
this._doStorageUpdate();
|
|
80
80
|
}
|
|
81
|
+
this._notifyStepEnter(this._currentOrderStep);
|
|
81
82
|
this._scrollToTop();
|
|
82
83
|
}
|
|
83
84
|
};
|
|
@@ -99,6 +100,7 @@ class DefaultWizard extends LitElement {
|
|
|
99
100
|
_previousStep(e) {
|
|
100
101
|
if (this._currentOrderStep > 1) {
|
|
101
102
|
this._currentOrderStep -= 1;
|
|
103
|
+
this._notifyStepEnter(this._currentOrderStep);
|
|
102
104
|
this._scrollToTop();
|
|
103
105
|
}
|
|
104
106
|
e.stopPropagation();
|
|
@@ -107,6 +109,7 @@ class DefaultWizard extends LitElement {
|
|
|
107
109
|
const stepNr = e.detail.step;
|
|
108
110
|
if (stepNr > 0 && stepNr <= this._wizardSteps.length) {
|
|
109
111
|
this._currentOrderStep = Number(stepNr);
|
|
112
|
+
this._notifyStepEnter(this._currentOrderStep);
|
|
110
113
|
this._scrollToTop();
|
|
111
114
|
}
|
|
112
115
|
e.stopPropagation();
|
|
@@ -114,6 +117,18 @@ class DefaultWizard extends LitElement {
|
|
|
114
117
|
// ---------------------------------------------------------------------------
|
|
115
118
|
// Utilities
|
|
116
119
|
// ---------------------------------------------------------------------------
|
|
120
|
+
/**
|
|
121
|
+
* Notify a step element that it has become active.
|
|
122
|
+
* Calls `onStepEnter()` with the current accumulated form data.
|
|
123
|
+
*/
|
|
124
|
+
_notifyStepEnter(stepNr) {
|
|
125
|
+
const stepEl = this.shadowRoot?.getElementById(
|
|
126
|
+
`wiz${stepNr}Id`
|
|
127
|
+
);
|
|
128
|
+
if (stepEl && typeof stepEl.onStepEnter === "function") {
|
|
129
|
+
stepEl.onStepEnter(this._orderFormData ?? {});
|
|
130
|
+
}
|
|
131
|
+
}
|
|
117
132
|
/** Scroll to top of page after step change. Disabled when `_scrollToTopOnStepChange` is false. */
|
|
118
133
|
_scrollToTop() {
|
|
119
134
|
if (!this._scrollToTopOnStepChange) return;
|
|
@@ -46,6 +46,14 @@ export declare abstract class PdDefaultWizardStep<T, F> extends LitElement {
|
|
|
46
46
|
* @param _reloadedOrder - The order data to reload
|
|
47
47
|
*/
|
|
48
48
|
reloadFromOrder(_reloadedOrder: T): void;
|
|
49
|
+
/**
|
|
50
|
+
* Called when this step becomes active (navigated to via Next, Previous, or Go-To).
|
|
51
|
+
* Override in implementing class to react to step activation, e.g. to
|
|
52
|
+
* pre-fill fields based on data collected in previous steps.
|
|
53
|
+
*
|
|
54
|
+
* @param _orderFormData - The current accumulated wizard form data
|
|
55
|
+
*/
|
|
56
|
+
onStepEnter(_orderFormData: T): void;
|
|
49
57
|
/**
|
|
50
58
|
* Get the step title. Override to customize.
|
|
51
59
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PdDefaultWizardStep.d.ts","sourceRoot":"","sources":["../../src/pd-default-wizard-step/PdDefaultWizardStep.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AAEH,OAAO,EAAQ,UAAU,EAAE,cAAc,EAAO,cAAc,EAAE,MAAM,KAAK,CAAC;AAgB5E,UAAU,WAAW,CAAC,CAAC;IACrB,eAAe,EAAE,MAAM,OAAO,CAAC,OAAO,CAAC,CAAC;IACxC,KAAK,EAAE,OAAO,CAAC;IACf,SAAS,EAAE,MAAM;QACf,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QAC5B,MAAM,EAAE,CAAC,CAAC;KACX,CAAC;CACH;AAMD;;;;;;;GAOG;AACH,8BAAsB,mBAAmB,CAAC,CAAC,EAAE,CAAC,CAAE,SAAQ,UAAU;IAKhE,yCAAyC;IAEzC,SAAS,EAAE,MAAM,CAAY;IAE7B,oCAAoC;IAEpC,gBAAgB,EAAE,OAAO,CAAS;IAElC,4CAA4C;IAE5C,YAAY,EAAE,OAAO,CAAQ;IAM7B,sCAAsC;IAEtC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAM;IAEjC,0CAA0C;IAE1C,SAAS,CAAC,UAAU,EAAE,OAAO,CAAS;IAOtC,SAAS,CAAC,YAAY,EAAG,WAAW,CAAC,CAAC,CAAC,CAAC;IAExC,OAAgB,MAAM,EAAE,cAAc,CAOpC;IAMO,MAAM;IAoBf,qCAAqC;IACrC,IAAW,KAAK,YAEf;IAED,8BAA8B;IACjB,eAAe,IAAI,OAAO,CAAC,OAAO,CAAC;IAIhD;;;;OAIG;IACI,WAAW,CAAC,YAAY,EAAE,CAAC,GAAG,CAAC;IAgBtC;;;;;OAKG;IACH,eAAe,CAAC,cAAc,EAAE,CAAC,GAAG,IAAI;
|
|
1
|
+
{"version":3,"file":"PdDefaultWizardStep.d.ts","sourceRoot":"","sources":["../../src/pd-default-wizard-step/PdDefaultWizardStep.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AAEH,OAAO,EAAQ,UAAU,EAAE,cAAc,EAAO,cAAc,EAAE,MAAM,KAAK,CAAC;AAgB5E,UAAU,WAAW,CAAC,CAAC;IACrB,eAAe,EAAE,MAAM,OAAO,CAAC,OAAO,CAAC,CAAC;IACxC,KAAK,EAAE,OAAO,CAAC;IACf,SAAS,EAAE,MAAM;QACf,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QAC5B,MAAM,EAAE,CAAC,CAAC;KACX,CAAC;CACH;AAMD;;;;;;;GAOG;AACH,8BAAsB,mBAAmB,CAAC,CAAC,EAAE,CAAC,CAAE,SAAQ,UAAU;IAKhE,yCAAyC;IAEzC,SAAS,EAAE,MAAM,CAAY;IAE7B,oCAAoC;IAEpC,gBAAgB,EAAE,OAAO,CAAS;IAElC,4CAA4C;IAE5C,YAAY,EAAE,OAAO,CAAQ;IAM7B,sCAAsC;IAEtC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAM;IAEjC,0CAA0C;IAE1C,SAAS,CAAC,UAAU,EAAE,OAAO,CAAS;IAOtC,SAAS,CAAC,YAAY,EAAG,WAAW,CAAC,CAAC,CAAC,CAAC;IAExC,OAAgB,MAAM,EAAE,cAAc,CAOpC;IAMO,MAAM;IAoBf,qCAAqC;IACrC,IAAW,KAAK,YAEf;IAED,8BAA8B;IACjB,eAAe,IAAI,OAAO,CAAC,OAAO,CAAC;IAIhD;;;;OAIG;IACI,WAAW,CAAC,YAAY,EAAE,CAAC,GAAG,CAAC;IAgBtC;;;;;OAKG;IACH,eAAe,CAAC,cAAc,EAAE,CAAC,GAAG,IAAI;IAIxC;;;;;;OAMG;IACH,WAAW,CAAC,cAAc,EAAE,CAAC,GAAG,IAAI;IAQpC;;OAEG;IACH,SAAS,CAAC,SAAS,IAAI,cAAc,GAAG,MAAM;IAI9C;;OAEG;IACH,SAAS,CAAC,QAAQ,CAAC,kBAAkB,IAAI,cAAc;IAEvD;;;;OAIG;IACH,SAAS,CAAC,gBAAgB,IAAI,OAAO;IAIrC;;;;;;OAMG;IACH,SAAS,CAAC,4BAA4B,CAAC,YAAY,EAAE,CAAC,GAAG,CAAC;IAI1D;;;;;OAKG;IACH,SAAS,CAAC,oBAAoB,IAAI,CAAC;IAQnC;;;OAGG;IACH,SAAS,CAAC,cAAc;CAezB"}
|
|
@@ -87,6 +87,15 @@ class PdDefaultWizardStep extends LitElement {
|
|
|
87
87
|
*/
|
|
88
88
|
reloadFromOrder(_reloadedOrder) {
|
|
89
89
|
}
|
|
90
|
+
/**
|
|
91
|
+
* Called when this step becomes active (navigated to via Next, Previous, or Go-To).
|
|
92
|
+
* Override in implementing class to react to step activation, e.g. to
|
|
93
|
+
* pre-fill fields based on data collected in previous steps.
|
|
94
|
+
*
|
|
95
|
+
* @param _orderFormData - The current accumulated wizard form data
|
|
96
|
+
*/
|
|
97
|
+
onStepEnter(_orderFormData) {
|
|
98
|
+
}
|
|
90
99
|
// ---------------------------------------------------------------------------
|
|
91
100
|
// Protected Methods (can be overridden)
|
|
92
101
|
// ---------------------------------------------------------------------------
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progressive-development/pd-wizard",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.5",
|
|
4
4
|
"description": "Webcomponent pd-wizard following open-wc recommendations",
|
|
5
5
|
"author": "PD Progressive Development",
|
|
6
6
|
"license": "MIT",
|
|
@@ -34,12 +34,12 @@
|
|
|
34
34
|
"lit": "^3.3.1",
|
|
35
35
|
"@lit/localize": "^0.12.2",
|
|
36
36
|
"tslib": "^2.8.1",
|
|
37
|
-
"@progressive-development/pd-
|
|
38
|
-
"@progressive-development/pd-
|
|
39
|
-
"@progressive-development/pd-
|
|
40
|
-
"@progressive-development/pd-order": "1.1.2",
|
|
37
|
+
"@progressive-development/pd-dialog": "1.0.3",
|
|
38
|
+
"@progressive-development/pd-content": "1.0.3",
|
|
39
|
+
"@progressive-development/pd-forms": "1.0.3",
|
|
41
40
|
"@progressive-development/pd-icon": "1.0.2",
|
|
42
41
|
"@progressive-development/pd-shared-styles": "0.3.2",
|
|
42
|
+
"@progressive-development/pd-order": "1.1.3",
|
|
43
43
|
"@progressive-development/pd-utils": "1.0.0"
|
|
44
44
|
},
|
|
45
45
|
"customElements": "custom-elements.json",
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
import { Meta, StoryObj } from '@storybook/web-components-vite';
|
|
2
|
-
import { PdWizardStep } from '../../types.js';
|
|
3
|
-
/**
|
|
4
|
-
* Story arguments interface for pd-steps component.
|
|
5
|
-
* Maps to the component's public API.
|
|
6
|
-
*/
|
|
7
|
-
interface PdStepsArgs {
|
|
8
|
-
/** Step definitions with names */
|
|
9
|
-
steps: PdWizardStep[];
|
|
10
|
-
/** Current visible step (1-based) */
|
|
11
|
-
currentStepNr: number;
|
|
12
|
-
/** Display mode: circle or tab */
|
|
13
|
-
styleTyp: "circle" | "tab";
|
|
14
|
-
}
|
|
15
|
-
/**
|
|
16
|
-
* ## pd-steps
|
|
17
|
-
*
|
|
18
|
-
* A progress indicator component that displays wizard steps as numbered circles
|
|
19
|
-
* with connecting lines, showing current, passed, and future states.
|
|
20
|
-
*
|
|
21
|
-
* ### Features
|
|
22
|
-
* - Circle-style step indicators with numbered circles and connecting line
|
|
23
|
-
* - Three visual states: current (accent color), passed (green, clickable), and pending
|
|
24
|
-
* - Click navigation on passed steps to go back
|
|
25
|
-
* - Full keyboard accessibility on passed step circles
|
|
26
|
-
* - Responsive sizing for smaller screens
|
|
27
|
-
* - Step name labels displayed below each circle
|
|
28
|
-
* - CSS Custom Properties for circle size, colors, and font sizes
|
|
29
|
-
*
|
|
30
|
-
* ### Accessibility
|
|
31
|
-
* - Uses `role="list"` / `role="listitem"` for semantic step structure
|
|
32
|
-
* - Passed steps have `role="button"` and are keyboard focusable
|
|
33
|
-
* - `aria-current="step"` marks the current step
|
|
34
|
-
* - Each step has a descriptive `aria-label` with state information
|
|
35
|
-
* - Focus-visible styling on interactive passed steps
|
|
36
|
-
*/
|
|
37
|
-
declare const meta: Meta<PdStepsArgs>;
|
|
38
|
-
export default meta;
|
|
39
|
-
type Story = StoryObj<PdStepsArgs>;
|
|
40
|
-
/** Default step indicator with four steps, second step active. Interactive via Controls panel. */
|
|
41
|
-
export declare const Default: Story;
|
|
42
|
-
/** All step states shown in one overview: first step, middle step, last step, and all passed. */
|
|
43
|
-
export declare const AllStates: Story;
|
|
44
|
-
/** Six steps demonstrating how the indicator handles a larger number of steps. */
|
|
45
|
-
export declare const ManySteps: Story;
|
|
46
|
-
/** Tab-style display variant (alternative to circle style). */
|
|
47
|
-
export declare const TabStyle: Story;
|
|
48
|
-
/** CSS Custom Properties — Branded and Redesigned variants. */
|
|
49
|
-
export declare const CustomStyling: Story;
|
|
50
|
-
//# sourceMappingURL=pd-steps.stories.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"pd-steps.stories.d.ts","sourceRoot":"","sources":["../../../src/pd-wizard/pd-steps/pd-steps.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEnD,OAAO,eAAe,CAAC;AAMvB;;;GAGG;AACH,UAAU,WAAW;IACnB,kCAAkC;IAClC,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,qCAAqC;IACrC,aAAa,EAAE,MAAM,CAAC;IACtB,kCAAkC;IAClC,QAAQ,EAAE,QAAQ,GAAG,KAAK,CAAC;CAC5B;AAgCD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,WAAW,CA0F3B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;AAMnC,kGAAkG;AAClG,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAMjC,iGAAiG;AACjG,eAAO,MAAM,SAAS,EAAE,KAwDvB,CAAC;AAMF,kFAAkF;AAClF,eAAO,MAAM,SAAS,EAAE,KAavB,CAAC;AAMF,+DAA+D;AAC/D,eAAO,MAAM,QAAQ,EAAE,KAiBtB,CAAC;AAMF,+DAA+D;AAC/D,eAAO,MAAM,aAAa,EAAE,KA+E3B,CAAC"}
|
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
import { Meta, StoryObj } from '@storybook/web-components-vite';
|
|
2
|
-
import { PdWizardStep } from '../types.js';
|
|
3
|
-
/**
|
|
4
|
-
* Story arguments interface for pd-wizard component.
|
|
5
|
-
* Maps to the component's public API.
|
|
6
|
-
*/
|
|
7
|
-
interface PdWizardArgs {
|
|
8
|
-
/** List of wizard step definitions */
|
|
9
|
-
wizardSteps: PdWizardStep[];
|
|
10
|
-
/** Current step number (1-based index) */
|
|
11
|
-
currentNumber: number;
|
|
12
|
-
}
|
|
13
|
-
/**
|
|
14
|
-
* ## pd-wizard
|
|
15
|
-
*
|
|
16
|
-
* A multi-step wizard UI component with navigation, progress tracking, and submit handling.
|
|
17
|
-
*
|
|
18
|
-
* ### Features
|
|
19
|
-
* - Step navigation with Back/Next buttons and automatic visibility
|
|
20
|
-
* - Visual progress indicator via integrated pd-steps component
|
|
21
|
-
* - Dynamic step content via named slots (step-1, step-2, etc.)
|
|
22
|
-
* - Submit handling on final step with disabled-after-submit protection
|
|
23
|
-
* - Close button with keyboard accessibility (Enter/Space)
|
|
24
|
-
* - CSS Parts for full styling control (`::part(header)`, `::part(content)`, `::part(buttons)`)
|
|
25
|
-
* - CSS Custom Properties for token-based theming
|
|
26
|
-
* - Responsive padding adjustments for mobile screens
|
|
27
|
-
*
|
|
28
|
-
* ### Accessibility
|
|
29
|
-
* - Close icon is keyboard-focusable with `role="button"` and `aria-label`
|
|
30
|
-
* - Focus-visible styling on close icon for keyboard users
|
|
31
|
-
* - Back/Next buttons use native `<pd-button>` with full keyboard support
|
|
32
|
-
* - Step indicator supports keyboard navigation for passed steps
|
|
33
|
-
*/
|
|
34
|
-
declare const meta: Meta<PdWizardArgs>;
|
|
35
|
-
export default meta;
|
|
36
|
-
type Story = StoryObj<PdWizardArgs>;
|
|
37
|
-
/** Default wizard with four steps at the first step. Interactive via Controls panel. */
|
|
38
|
-
export declare const Default: Story;
|
|
39
|
-
/** Wizard navigated to the second step, showing Back and Next buttons. */
|
|
40
|
-
export declare const MiddleStep: Story;
|
|
41
|
-
/** Wizard at the final step with the Submit button replacing Next. */
|
|
42
|
-
export declare const FinalStep: Story;
|
|
43
|
-
/** A shorter wizard with three steps, demonstrating flexible step count. */
|
|
44
|
-
export declare const ThreeSteps: Story;
|
|
45
|
-
/** Default scroll behavior — content scrolls within fixed wizard height. */
|
|
46
|
-
export declare const ScrollableContent: Story;
|
|
47
|
-
/** Growing wizard — wizard expands with content, no internal scroll. */
|
|
48
|
-
export declare const GrowingContent: Story;
|
|
49
|
-
/** CSS Custom Properties and CSS Parts — Branded and Redesigned variants. */
|
|
50
|
-
export declare const CustomStyling: Story;
|
|
51
|
-
//# sourceMappingURL=pd-wizard.stories.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"pd-wizard.stories.d.ts","sourceRoot":"","sources":["../../src/pd-wizard/pd-wizard.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,OAAO,gBAAgB,CAAC;AAMxB;;;GAGG;AACH,UAAU,YAAY;IACpB,sCAAsC;IACtC,WAAW,EAAE,YAAY,EAAE,CAAC;IAC5B,0CAA0C;IAC1C,aAAa,EAAE,MAAM,CAAC;CACvB;AAuBD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,YAAY,CAuH5B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;AAMpC,wFAAwF;AACxF,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAMF,0EAA0E;AAC1E,eAAO,MAAM,UAAU,EAAE,KAUxB,CAAC;AAMF,sEAAsE;AACtE,eAAO,MAAM,SAAS,EAAE,KAUvB,CAAC;AAMF,4EAA4E;AAC5E,eAAO,MAAM,UAAU,EAAE,KAgCxB,CAAC;AA2BF,4EAA4E;AAC5E,eAAO,MAAM,iBAAiB,EAAE,KAsC/B,CAAC;AAMF,wEAAwE;AACxE,eAAO,MAAM,cAAc,EAAE,KAqC5B,CAAC;AAMF,6EAA6E;AAC7E,eAAO,MAAM,aAAa,EAAE,KA+I3B,CAAC"}
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
import { Meta, StoryObj } from '@storybook/web-components-vite';
|
|
2
|
-
/**
|
|
3
|
-
* Story arguments interface for wizard-close-popup component.
|
|
4
|
-
* Maps to the component's public API.
|
|
5
|
-
*/
|
|
6
|
-
interface WizardClosePopupArgs {
|
|
7
|
-
/** Whether local storage persistence is enabled */
|
|
8
|
-
withStorage: boolean;
|
|
9
|
-
/** Text for the confirm button */
|
|
10
|
-
confirmButtonText: string;
|
|
11
|
-
/** Text for the cancel button */
|
|
12
|
-
cancelButtonText: string;
|
|
13
|
-
}
|
|
14
|
-
/**
|
|
15
|
-
* ## wizard-close-popup
|
|
16
|
-
*
|
|
17
|
-
* A confirmation dialog shown when a user attempts to close a wizard with unsaved changes.
|
|
18
|
-
* Extends PdConfirmDialog with warning-style presentation.
|
|
19
|
-
*
|
|
20
|
-
* ### Features
|
|
21
|
-
* - Warning dialog type for visual emphasis on data loss
|
|
22
|
-
* - Two modes: with storage (save/discard) and without storage (close/cancel)
|
|
23
|
-
* - Customizable button texts via properties
|
|
24
|
-
* - Inherits full PdConfirmDialog behavior and styling
|
|
25
|
-
*
|
|
26
|
-
* ### Usage
|
|
27
|
-
* This component is typically used internally by DefaultWizard.
|
|
28
|
-
* It is instantiated programmatically when the close-wizard event fires.
|
|
29
|
-
*/
|
|
30
|
-
declare const meta: Meta<WizardClosePopupArgs>;
|
|
31
|
-
export default meta;
|
|
32
|
-
type Story = StoryObj<WizardClosePopupArgs>;
|
|
33
|
-
/** Default close popup without storage — warns about losing unsaved data. */
|
|
34
|
-
export declare const Default: Story;
|
|
35
|
-
/** Close popup with storage enabled — offers save/discard options. */
|
|
36
|
-
export declare const WithStorage: Story;
|
|
37
|
-
/** Side-by-side comparison of both modes: without and with storage. */
|
|
38
|
-
export declare const BothModes: Story;
|
|
39
|
-
//# sourceMappingURL=wizard-close-popup.stories.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"wizard-close-popup.stories.d.ts","sourceRoot":"","sources":["../../src/wizard-close-popup/wizard-close-popup.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,uBAAuB,CAAC;AAM/B;;;GAGG;AACH,UAAU,oBAAoB;IAC5B,mDAAmD;IACnD,WAAW,EAAE,OAAO,CAAC;IACrB,kCAAkC;IAClC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,iCAAiC;IACjC,gBAAgB,EAAE,MAAM,CAAC;CAC1B;AAMD;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,oBAAoB,CAqEpC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,oBAAoB,CAAC,CAAC;AAM5C,6EAA6E;AAC7E,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAMjC,sEAAsE;AACtE,eAAO,MAAM,WAAW,EAAE,KAmBzB,CAAC;AAMF,uEAAuE;AACvE,eAAO,MAAM,SAAS,EAAE,KAkCvB,CAAC"}
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
import { Meta, StoryObj } from '@storybook/web-components-vite';
|
|
2
|
-
import { WizardReloadItem } from './WizardReloadPopup.js';
|
|
3
|
-
/**
|
|
4
|
-
* Story arguments interface for wizard-reload-popup component.
|
|
5
|
-
* Maps to the component's public API.
|
|
6
|
-
*/
|
|
7
|
-
interface WizardReloadPopupArgs {
|
|
8
|
-
/** Saved wizard state to display */
|
|
9
|
-
reloadItem: WizardReloadItem;
|
|
10
|
-
/** Text for the confirm button */
|
|
11
|
-
confirmButtonText: string;
|
|
12
|
-
/** Text for the cancel button */
|
|
13
|
-
cancelButtonText: string;
|
|
14
|
-
}
|
|
15
|
-
/**
|
|
16
|
-
* ## wizard-reload-popup
|
|
17
|
-
*
|
|
18
|
-
* A confirmation dialog shown when saved wizard progress is found in localStorage.
|
|
19
|
-
* Extends PdConfirmDialog with info-style presentation, timestamp display, and
|
|
20
|
-
* a warning notice about data deletion on restart.
|
|
21
|
-
*
|
|
22
|
-
* ### Features
|
|
23
|
-
* - Info dialog type for non-destructive action context
|
|
24
|
-
* - Formatted date and time display from saved timestamp
|
|
25
|
-
* - Warning notice box clearly stating that restart deletes saved data
|
|
26
|
-
* - Continue/Restart options for the user
|
|
27
|
-
* - Inherits full PdConfirmDialog behavior and styling
|
|
28
|
-
*
|
|
29
|
-
* ### Usage
|
|
30
|
-
* This component is typically used internally by DefaultWizard.
|
|
31
|
-
* It is instantiated programmatically when saved progress is detected on initialization.
|
|
32
|
-
*/
|
|
33
|
-
declare const meta: Meta<WizardReloadPopupArgs>;
|
|
34
|
-
export default meta;
|
|
35
|
-
type Story = StoryObj<WizardReloadPopupArgs>;
|
|
36
|
-
/** Default reload popup with a recent timestamp — offers to continue or restart. */
|
|
37
|
-
export declare const Default: Story;
|
|
38
|
-
/** Reload popup showing data saved a week ago, at a later wizard step. */
|
|
39
|
-
export declare const OldSavedData: Story;
|
|
40
|
-
/** Side-by-side comparison: recent vs. older saved data. */
|
|
41
|
-
export declare const TimestampComparison: Story;
|
|
42
|
-
//# sourceMappingURL=wizard-reload-popup.stories.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"wizard-reload-popup.stories.d.ts","sourceRoot":"","sources":["../../src/wizard-reload-popup/wizard-reload-popup.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE/D,OAAO,wBAAwB,CAAC;AAMhC;;;GAGG;AACH,UAAU,qBAAqB;IAC7B,oCAAoC;IACpC,UAAU,EAAE,gBAAgB,CAAC;IAC7B,kCAAkC;IAClC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,iCAAiC;IACjC,gBAAgB,EAAE,MAAM,CAAC;CAC1B;AAoBD;;;;;;;;;;;;;;;;;GAiBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,qBAAqB,CAwErC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,qBAAqB,CAAC,CAAC;AAM7C,oFAAoF;AACpF,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAMjC,0EAA0E;AAC1E,eAAO,MAAM,YAAY,EAAE,KAmB1B,CAAC;AAMF,4DAA4D;AAC5D,eAAO,MAAM,mBAAmB,EAAE,KAmCjC,CAAC"}
|