@progressive-development/pd-wizard 0.9.1 → 1.0.0
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 -2
- package/README.md +33 -57
- package/dist/default-step-address/DefaultStepAddress.d.ts +26 -0
- package/dist/default-step-address/DefaultStepAddress.d.ts.map +1 -0
- package/dist/default-step-address/DefaultStepAddress.js +66 -0
- package/dist/default-step-address/default-step-address.d.ts +2 -0
- package/dist/default-step-address/default-step-address.d.ts.map +1 -0
- package/dist/default-step-address.d.ts +2 -0
- package/dist/default-step-address.js +1 -0
- package/dist/default-step-summary/DefaultStepSummary.d.ts +58 -0
- package/dist/default-step-summary/DefaultStepSummary.d.ts.map +1 -0
- package/dist/default-step-summary/DefaultStepSummary.js +77 -0
- package/dist/default-step-summary/default-step-summary.d.ts +3 -0
- package/dist/default-step-summary/default-step-summary.d.ts.map +1 -0
- package/dist/default-step-summary.d.ts +2 -0
- package/dist/default-step-summary.js +1 -0
- package/dist/default-wizard/DefaultWizard.d.ts +57 -0
- package/dist/default-wizard/DefaultWizard.d.ts.map +1 -0
- package/dist/default-wizard/DefaultWizard.js +270 -0
- package/dist/default-wizard/default-wizard.d.ts +3 -0
- package/dist/default-wizard/default-wizard.d.ts.map +1 -0
- package/dist/default-wizard.d.ts +2 -0
- package/dist/default-wizard.js +1 -0
- package/dist/generated/locales/be.d.ts +17 -0
- package/dist/generated/locales/be.d.ts.map +1 -1
- package/dist/generated/locales/de.d.ts +17 -0
- package/dist/generated/locales/de.d.ts.map +1 -1
- package/dist/generated/locales/en.d.ts +17 -0
- package/dist/generated/locales/en.d.ts.map +1 -1
- package/dist/index.d.ts +10 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +8 -0
- package/dist/locales/be.js +20 -1
- package/dist/locales/de.js +20 -1
- package/dist/locales/en.js +20 -1
- package/dist/pd-components/pd-content/dist/pd-notice-box/PdNoticeBox.js +224 -0
- package/dist/pd-components/pd-content/dist/pd-notice-box/pd-notice-box.js +8 -0
- package/dist/pd-default-wizard-step/PdDefaultWizardStep.d.ts +85 -0
- package/dist/pd-default-wizard-step/PdDefaultWizardStep.d.ts.map +1 -0
- package/dist/pd-default-wizard-step/PdDefaultWizardStep.js +167 -0
- package/dist/pd-default-wizard-step/pd-default-wizard-step.d.ts +2 -0
- package/dist/pd-default-wizard-step/pd-default-wizard-step.d.ts.map +1 -0
- package/dist/pd-default-wizard-step.d.ts +2 -0
- package/dist/pd-default-wizard-step.js +1 -0
- package/dist/pd-utils/dist/date-helper.js +35 -0
- package/dist/pd-utils/dist/locale-format.js +6 -0
- package/dist/pd-wizard/PdWizard.d.ts +36 -23
- package/dist/pd-wizard/PdWizard.d.ts.map +1 -1
- package/dist/pd-wizard/PdWizard.js +91 -145
- package/dist/pd-wizard/pd-steps/PdSteps.d.ts +26 -10
- package/dist/pd-wizard/pd-steps/PdSteps.d.ts.map +1 -1
- package/dist/pd-wizard/pd-steps/PdSteps.js +126 -62
- package/dist/pd-wizard/pd-steps/pd-steps.stories.d.ts +45 -37
- package/dist/pd-wizard/pd-steps/pd-steps.stories.d.ts.map +1 -1
- package/dist/pd-wizard/pd-wizard.stories.d.ts +46 -7
- package/dist/pd-wizard/pd-wizard.stories.d.ts.map +1 -1
- package/dist/wizard-close-popup/WizardClosePopup.d.ts +12 -0
- package/dist/wizard-close-popup/WizardClosePopup.d.ts.map +1 -0
- package/dist/wizard-close-popup/WizardClosePopup.js +56 -0
- package/dist/wizard-close-popup/wizard-close-popup.d.ts +2 -0
- package/dist/wizard-close-popup/wizard-close-popup.d.ts.map +1 -0
- package/dist/wizard-close-popup/wizard-close-popup.stories.d.ts +39 -0
- package/dist/wizard-close-popup/wizard-close-popup.stories.d.ts.map +1 -0
- package/dist/wizard-close-popup.d.ts +2 -0
- package/dist/wizard-close-popup.js +1 -0
- package/dist/wizard-reload-popup/WizardReloadPopup.d.ts +19 -0
- package/dist/wizard-reload-popup/WizardReloadPopup.d.ts.map +1 -0
- package/dist/wizard-reload-popup/WizardReloadPopup.js +88 -0
- package/dist/wizard-reload-popup/wizard-reload-popup.d.ts +3 -0
- package/dist/wizard-reload-popup/wizard-reload-popup.d.ts.map +1 -0
- package/dist/wizard-reload-popup/wizard-reload-popup.stories.d.ts +42 -0
- package/dist/wizard-reload-popup/wizard-reload-popup.stories.d.ts.map +1 -0
- package/dist/wizard-reload-popup.d.ts +2 -0
- package/dist/wizard-reload-popup.js +1 -0
- package/package.json +19 -6
|
@@ -0,0 +1,224 @@
|
|
|
1
|
+
import { LitElement, css, nothing, html } from 'lit';
|
|
2
|
+
import { property } from 'lit/decorators.js';
|
|
3
|
+
import { pdIcons } from '@progressive-development/pd-icon';
|
|
4
|
+
import '@progressive-development/pd-icon/pd-icon';
|
|
5
|
+
|
|
6
|
+
var __defProp = Object.defineProperty;
|
|
7
|
+
var __decorateClass = (decorators, target, key, kind) => {
|
|
8
|
+
var result = void 0 ;
|
|
9
|
+
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
10
|
+
if (decorator = decorators[i])
|
|
11
|
+
result = (decorator(target, key, result) ) || result;
|
|
12
|
+
if (result) __defProp(target, key, result);
|
|
13
|
+
return result;
|
|
14
|
+
};
|
|
15
|
+
const DEFAULT_ICONS = {
|
|
16
|
+
info: pdIcons.ICON_INFO_FLD,
|
|
17
|
+
note: pdIcons.ICON_INFO_FLD,
|
|
18
|
+
success: pdIcons.ICON_CHECKBOX,
|
|
19
|
+
warning: pdIcons.ICON_WARNING_FLD,
|
|
20
|
+
error: pdIcons.ICON_ERROR_FLD
|
|
21
|
+
};
|
|
22
|
+
class PdNoticeBox extends LitElement {
|
|
23
|
+
constructor() {
|
|
24
|
+
super(...arguments);
|
|
25
|
+
this.type = "info";
|
|
26
|
+
this.variant = "box";
|
|
27
|
+
this.title = "";
|
|
28
|
+
this.icon = "";
|
|
29
|
+
this.hideIcon = false;
|
|
30
|
+
}
|
|
31
|
+
static {
|
|
32
|
+
this.styles = [
|
|
33
|
+
css`
|
|
34
|
+
:host {
|
|
35
|
+
/* Layout */
|
|
36
|
+
--_width: var(--pd-notice-box-width, 100%);
|
|
37
|
+
--_radius: var(--pd-notice-box-border-radius, var(--pd-radius-md, 8px));
|
|
38
|
+
--_padding: var(--pd-notice-box-padding, var(--pd-spacing-sm, 12px));
|
|
39
|
+
--_gap: var(--pd-notice-box-gap, var(--pd-spacing-sm, 12px));
|
|
40
|
+
|
|
41
|
+
/* Typography */
|
|
42
|
+
--_font-size: var(
|
|
43
|
+
--pd-notice-box-font-size,
|
|
44
|
+
var(--pd-default-font-content-size, 1rem)
|
|
45
|
+
);
|
|
46
|
+
--_title-font-size: var(
|
|
47
|
+
--pd-notice-box-title-font-size,
|
|
48
|
+
var(--pd-default-font-input-size, 1.05rem)
|
|
49
|
+
);
|
|
50
|
+
--_title-font-weight: var(--pd-notice-box-title-font-weight, 600);
|
|
51
|
+
|
|
52
|
+
/* Icon */
|
|
53
|
+
--_icon-size: var(--pd-notice-box-icon-size, 24px);
|
|
54
|
+
|
|
55
|
+
/* Sidebar */
|
|
56
|
+
--_sidebar-width: var(--pd-notice-box-sidebar-width, 4px);
|
|
57
|
+
|
|
58
|
+
/* Type colors - will be overridden per type */
|
|
59
|
+
--_type-col: var(--pd-default-info-col, #6b86ff);
|
|
60
|
+
--_type-bg-col: #e8f0ff;
|
|
61
|
+
--_type-text-col: var(
|
|
62
|
+
--pd-notice-box-text-col,
|
|
63
|
+
var(--pd-default-font-content-col, #353738)
|
|
64
|
+
);
|
|
65
|
+
|
|
66
|
+
display: block;
|
|
67
|
+
width: var(--_width);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
/* Type-specific color overrides */
|
|
71
|
+
:host([type="info"]) {
|
|
72
|
+
--_type-col: var(
|
|
73
|
+
--pd-notice-box-info-col,
|
|
74
|
+
var(--pd-default-info-col, #6b86ff)
|
|
75
|
+
);
|
|
76
|
+
--_type-bg-col: var(--pd-notice-box-info-bg-col, #e8f0ff);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
:host([type="note"]) {
|
|
80
|
+
--_type-col: var(
|
|
81
|
+
--pd-notice-box-note-col,
|
|
82
|
+
var(--pd-default-col, #067394)
|
|
83
|
+
);
|
|
84
|
+
--_type-bg-col: var(
|
|
85
|
+
--pd-notice-box-note-bg-col,
|
|
86
|
+
var(--pd-default-lightest-col, #cde2eb)
|
|
87
|
+
);
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
:host([type="success"]) {
|
|
91
|
+
--_type-col: var(
|
|
92
|
+
--pd-notice-box-success-col,
|
|
93
|
+
var(--pd-default-success-col, #348b11)
|
|
94
|
+
);
|
|
95
|
+
--_type-bg-col: var(
|
|
96
|
+
--pd-notice-box-success-bg-col,
|
|
97
|
+
var(--pd-default-success-light-col, #f5ffe8)
|
|
98
|
+
);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
:host([type="warning"]) {
|
|
102
|
+
--_type-col: var(
|
|
103
|
+
--pd-notice-box-warning-col,
|
|
104
|
+
var(--pd-default-warning-col, #ffbf00)
|
|
105
|
+
);
|
|
106
|
+
--_type-bg-col: var(--pd-notice-box-warning-bg-col, #fff8e0);
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
:host([type="error"]) {
|
|
110
|
+
--_type-col: var(
|
|
111
|
+
--pd-notice-box-error-col,
|
|
112
|
+
var(--pd-default-error-col, #a1141b)
|
|
113
|
+
);
|
|
114
|
+
--_type-bg-col: var(
|
|
115
|
+
--pd-notice-box-error-bg-col,
|
|
116
|
+
var(--pd-default-error-light-col, #ffe8e8)
|
|
117
|
+
);
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
/* Box variant */
|
|
121
|
+
.notice-box {
|
|
122
|
+
display: flex;
|
|
123
|
+
align-items: flex-start;
|
|
124
|
+
gap: var(--_gap);
|
|
125
|
+
padding: var(--_padding);
|
|
126
|
+
border-radius: var(--_radius);
|
|
127
|
+
background-color: var(--_type-bg-col);
|
|
128
|
+
border: 1px solid var(--_type-col);
|
|
129
|
+
font-size: var(--_font-size);
|
|
130
|
+
color: var(--_type-text-col);
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
/* Sidebar variant */
|
|
134
|
+
:host([variant="sidebar"]) .notice-box {
|
|
135
|
+
background-color: transparent;
|
|
136
|
+
border: none;
|
|
137
|
+
border-left: var(--_sidebar-width) solid var(--_type-col);
|
|
138
|
+
border-radius: 0;
|
|
139
|
+
padding-left: var(--_padding);
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
/* Icon wrapper */
|
|
143
|
+
.icon-wrapper {
|
|
144
|
+
flex-shrink: 0;
|
|
145
|
+
display: flex;
|
|
146
|
+
align-items: center;
|
|
147
|
+
justify-content: center;
|
|
148
|
+
width: var(--_icon-size);
|
|
149
|
+
height: var(--_icon-size);
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.icon-wrapper pd-icon {
|
|
153
|
+
--pd-icon-primary-col: var(--_type-col);
|
|
154
|
+
--pd-icon-col-primary-active: var(--_type-col);
|
|
155
|
+
width: var(--_icon-size);
|
|
156
|
+
height: var(--_icon-size);
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
/* Content area */
|
|
160
|
+
.content {
|
|
161
|
+
flex: 1;
|
|
162
|
+
min-width: 0;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.title {
|
|
166
|
+
margin: 0 0 0.25em 0;
|
|
167
|
+
font-size: var(--_title-font-size);
|
|
168
|
+
font-weight: var(--_title-font-weight);
|
|
169
|
+
font-family: var(--pd-default-font-title-family, inherit);
|
|
170
|
+
color: var(--_type-col);
|
|
171
|
+
line-height: 1.3;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
.body {
|
|
175
|
+
line-height: 1.5;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.body ::slotted(*) {
|
|
179
|
+
margin: 0;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
.body ::slotted(*:not(:last-child)) {
|
|
183
|
+
margin-bottom: 0.5em;
|
|
184
|
+
}
|
|
185
|
+
`
|
|
186
|
+
];
|
|
187
|
+
}
|
|
188
|
+
render() {
|
|
189
|
+
const showIcon = this.variant === "box" && !this.hideIcon;
|
|
190
|
+
const iconName = this.icon || DEFAULT_ICONS[this.type];
|
|
191
|
+
return html`
|
|
192
|
+
<div class="notice-box" role="note" aria-label="${this.type} notice">
|
|
193
|
+
${showIcon ? html`
|
|
194
|
+
<div class="icon-wrapper" aria-hidden="true">
|
|
195
|
+
<pd-icon icon="${iconName}" class="primary"></pd-icon>
|
|
196
|
+
</div>
|
|
197
|
+
` : nothing}
|
|
198
|
+
<div class="content">
|
|
199
|
+
${this.title ? html`<h4 class="title">${this.title}</h4>` : nothing}
|
|
200
|
+
<div class="body">
|
|
201
|
+
<slot></slot>
|
|
202
|
+
</div>
|
|
203
|
+
</div>
|
|
204
|
+
</div>
|
|
205
|
+
`;
|
|
206
|
+
}
|
|
207
|
+
}
|
|
208
|
+
__decorateClass([
|
|
209
|
+
property({ type: String, reflect: true })
|
|
210
|
+
], PdNoticeBox.prototype, "type");
|
|
211
|
+
__decorateClass([
|
|
212
|
+
property({ type: String, reflect: true })
|
|
213
|
+
], PdNoticeBox.prototype, "variant");
|
|
214
|
+
__decorateClass([
|
|
215
|
+
property({ type: String })
|
|
216
|
+
], PdNoticeBox.prototype, "title");
|
|
217
|
+
__decorateClass([
|
|
218
|
+
property({ type: String })
|
|
219
|
+
], PdNoticeBox.prototype, "icon");
|
|
220
|
+
__decorateClass([
|
|
221
|
+
property({ type: Boolean })
|
|
222
|
+
], PdNoticeBox.prototype, "hideIcon");
|
|
223
|
+
|
|
224
|
+
export { PdNoticeBox };
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
import { LitElement, TemplateResult, CSSResultGroup } from 'lit';
|
|
2
|
+
interface FormElement<F> {
|
|
3
|
+
triggerValidate: () => Promise<boolean>;
|
|
4
|
+
valid: boolean;
|
|
5
|
+
getValues: () => {
|
|
6
|
+
origin: Record<string, any>;
|
|
7
|
+
parsed: F;
|
|
8
|
+
};
|
|
9
|
+
}
|
|
10
|
+
/**
|
|
11
|
+
* Abstract base class for wizard steps.
|
|
12
|
+
*
|
|
13
|
+
* Contains generics for the OrderFormData (T) and the specific FormData (F) for this Step.
|
|
14
|
+
*
|
|
15
|
+
* @typeParam T - The complete order/wizard form data type
|
|
16
|
+
* @typeParam F - The form data type specific to this step
|
|
17
|
+
*/
|
|
18
|
+
export declare abstract class PdDefaultWizardStep<T, F> extends LitElement {
|
|
19
|
+
/** Step title displayed in the header */
|
|
20
|
+
stepTitle: string;
|
|
21
|
+
/** Show required field info text */
|
|
22
|
+
withRequiredInfo: boolean;
|
|
23
|
+
/** Auto-trim whitespace from form inputs */
|
|
24
|
+
withAutoTrim: boolean;
|
|
25
|
+
/** Common error message to display */
|
|
26
|
+
protected _errorMsg: string;
|
|
27
|
+
/** Whether the form is currently valid */
|
|
28
|
+
protected _validForm: boolean;
|
|
29
|
+
protected _formElement: FormElement<F>;
|
|
30
|
+
static styles: CSSResultGroup;
|
|
31
|
+
render(): TemplateResult<1>;
|
|
32
|
+
/** Whether the step form is valid */
|
|
33
|
+
get valid(): boolean;
|
|
34
|
+
/** Trigger form validation */
|
|
35
|
+
triggerValidate(): Promise<boolean>;
|
|
36
|
+
/**
|
|
37
|
+
* Extract and merge form data into the order
|
|
38
|
+
* @param currentOrder - Current order data
|
|
39
|
+
* @returns Updated order with this step's data
|
|
40
|
+
*/
|
|
41
|
+
setFormData(currentOrder: T): T;
|
|
42
|
+
/**
|
|
43
|
+
* Called from wizard to reload form data from storage.
|
|
44
|
+
* Override in implementing class to populate form fields.
|
|
45
|
+
*
|
|
46
|
+
* @param _reloadedOrder - The order data to reload
|
|
47
|
+
*/
|
|
48
|
+
reloadFromOrder(_reloadedOrder: T): void;
|
|
49
|
+
/**
|
|
50
|
+
* Get the step title. Override to customize.
|
|
51
|
+
*/
|
|
52
|
+
protected _getTitle(): TemplateResult | string;
|
|
53
|
+
/**
|
|
54
|
+
* Render the form content. Must be implemented by subclass.
|
|
55
|
+
*/
|
|
56
|
+
protected abstract _renderFormContent(): TemplateResult;
|
|
57
|
+
/**
|
|
58
|
+
* Additional validation beyond form field validation.
|
|
59
|
+
* Override to add custom validation logic.
|
|
60
|
+
* @returns true if form data is valid
|
|
61
|
+
*/
|
|
62
|
+
protected _isValidFormData(): boolean;
|
|
63
|
+
/**
|
|
64
|
+
* Prepare the order after step update (for side-effects).
|
|
65
|
+
* Used e.g. to reset values based on other selections.
|
|
66
|
+
*
|
|
67
|
+
* @param updatedOrder - Order with updates from this step
|
|
68
|
+
* @returns Prepared order with any additional changes
|
|
69
|
+
*/
|
|
70
|
+
protected _prepareOrderAfterStepUpdate(updatedOrder: T): T;
|
|
71
|
+
/**
|
|
72
|
+
* Extract data from form inputs.
|
|
73
|
+
* Override to customize data extraction.
|
|
74
|
+
*
|
|
75
|
+
* @returns Prepared data object from form
|
|
76
|
+
*/
|
|
77
|
+
protected _prepareDataFromForm(): F;
|
|
78
|
+
/**
|
|
79
|
+
* Called on input change to trigger auto-save.
|
|
80
|
+
* Debounced to avoid excessive events.
|
|
81
|
+
*/
|
|
82
|
+
protected _doInputChange(): void;
|
|
83
|
+
}
|
|
84
|
+
export {};
|
|
85
|
+
//# sourceMappingURL=PdDefaultWizardStep.d.ts.map
|
|
@@ -0,0 +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;IAQxC;;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"}
|
|
@@ -0,0 +1,167 @@
|
|
|
1
|
+
import { LitElement, css, html } from 'lit';
|
|
2
|
+
import { property, state, query } from 'lit/decorators.js';
|
|
3
|
+
|
|
4
|
+
var __defProp = Object.defineProperty;
|
|
5
|
+
var __decorateClass = (decorators, target, key, kind) => {
|
|
6
|
+
var result = void 0 ;
|
|
7
|
+
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
8
|
+
if (decorator = decorators[i])
|
|
9
|
+
result = (decorator(target, key, result) ) || result;
|
|
10
|
+
if (result) __defProp(target, key, result);
|
|
11
|
+
return result;
|
|
12
|
+
};
|
|
13
|
+
const DELAY_TIME = 3e3;
|
|
14
|
+
let timeoutInputRef;
|
|
15
|
+
class PdDefaultWizardStep extends LitElement {
|
|
16
|
+
constructor() {
|
|
17
|
+
super(...arguments);
|
|
18
|
+
this.stepTitle = "Step 1";
|
|
19
|
+
this.withRequiredInfo = false;
|
|
20
|
+
this.withAutoTrim = true;
|
|
21
|
+
this._errorMsg = "";
|
|
22
|
+
this._validForm = false;
|
|
23
|
+
}
|
|
24
|
+
static {
|
|
25
|
+
this.styles = [
|
|
26
|
+
css`
|
|
27
|
+
h3 {
|
|
28
|
+
color: var(--pd-default-font-title-col);
|
|
29
|
+
font-family: var(--pd-default-font-title-family);
|
|
30
|
+
}
|
|
31
|
+
`
|
|
32
|
+
];
|
|
33
|
+
}
|
|
34
|
+
// ---------------------------------------------------------------------------
|
|
35
|
+
// Render
|
|
36
|
+
// ---------------------------------------------------------------------------
|
|
37
|
+
render() {
|
|
38
|
+
return html`
|
|
39
|
+
<h3>${this._getTitle()}</h3>
|
|
40
|
+
|
|
41
|
+
<pd-form-container
|
|
42
|
+
id="stepFormContainerId"
|
|
43
|
+
class="form-container"
|
|
44
|
+
commonError="${this._errorMsg}"
|
|
45
|
+
?autoTrimm="${this.withAutoTrim}"
|
|
46
|
+
?requiredFieldInfo="${this.withRequiredInfo}"
|
|
47
|
+
>
|
|
48
|
+
${this._renderFormContent()}
|
|
49
|
+
</pd-form-container>
|
|
50
|
+
`;
|
|
51
|
+
}
|
|
52
|
+
// ---------------------------------------------------------------------------
|
|
53
|
+
// Public API
|
|
54
|
+
// ---------------------------------------------------------------------------
|
|
55
|
+
/** Whether the step form is valid */
|
|
56
|
+
get valid() {
|
|
57
|
+
return this._formElement?.valid && this._isValidFormData();
|
|
58
|
+
}
|
|
59
|
+
/** Trigger form validation */
|
|
60
|
+
async triggerValidate() {
|
|
61
|
+
return this._formElement?.triggerValidate();
|
|
62
|
+
}
|
|
63
|
+
/**
|
|
64
|
+
* Extract and merge form data into the order
|
|
65
|
+
* @param currentOrder - Current order data
|
|
66
|
+
* @returns Updated order with this step's data
|
|
67
|
+
*/
|
|
68
|
+
setFormData(currentOrder) {
|
|
69
|
+
this._errorMsg = "";
|
|
70
|
+
try {
|
|
71
|
+
const preparedOrder = {
|
|
72
|
+
...currentOrder,
|
|
73
|
+
...this._prepareDataFromForm()
|
|
74
|
+
};
|
|
75
|
+
return preparedOrder;
|
|
76
|
+
} catch (error) {
|
|
77
|
+
const errorMessage = error instanceof Error ? error.message : "Unknown error";
|
|
78
|
+
this._errorMsg = errorMessage;
|
|
79
|
+
throw error;
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
/**
|
|
83
|
+
* Called from wizard to reload form data from storage.
|
|
84
|
+
* Override in implementing class to populate form fields.
|
|
85
|
+
*
|
|
86
|
+
* @param _reloadedOrder - The order data to reload
|
|
87
|
+
*/
|
|
88
|
+
reloadFromOrder(_reloadedOrder) {
|
|
89
|
+
}
|
|
90
|
+
// ---------------------------------------------------------------------------
|
|
91
|
+
// Protected Methods (can be overridden)
|
|
92
|
+
// ---------------------------------------------------------------------------
|
|
93
|
+
/**
|
|
94
|
+
* Get the step title. Override to customize.
|
|
95
|
+
*/
|
|
96
|
+
_getTitle() {
|
|
97
|
+
return this.stepTitle;
|
|
98
|
+
}
|
|
99
|
+
/**
|
|
100
|
+
* Additional validation beyond form field validation.
|
|
101
|
+
* Override to add custom validation logic.
|
|
102
|
+
* @returns true if form data is valid
|
|
103
|
+
*/
|
|
104
|
+
_isValidFormData() {
|
|
105
|
+
return true;
|
|
106
|
+
}
|
|
107
|
+
/**
|
|
108
|
+
* Prepare the order after step update (for side-effects).
|
|
109
|
+
* Used e.g. to reset values based on other selections.
|
|
110
|
+
*
|
|
111
|
+
* @param updatedOrder - Order with updates from this step
|
|
112
|
+
* @returns Prepared order with any additional changes
|
|
113
|
+
*/
|
|
114
|
+
_prepareOrderAfterStepUpdate(updatedOrder) {
|
|
115
|
+
return updatedOrder;
|
|
116
|
+
}
|
|
117
|
+
/**
|
|
118
|
+
* Extract data from form inputs.
|
|
119
|
+
* Override to customize data extraction.
|
|
120
|
+
*
|
|
121
|
+
* @returns Prepared data object from form
|
|
122
|
+
*/
|
|
123
|
+
_prepareDataFromForm() {
|
|
124
|
+
if (!this._formElement?.valid) {
|
|
125
|
+
throw new Error("Invalid form, prepare not possible");
|
|
126
|
+
}
|
|
127
|
+
return this._formElement?.getValues().parsed;
|
|
128
|
+
}
|
|
129
|
+
/**
|
|
130
|
+
* Called on input change to trigger auto-save.
|
|
131
|
+
* Debounced to avoid excessive events.
|
|
132
|
+
*/
|
|
133
|
+
_doInputChange() {
|
|
134
|
+
if (timeoutInputRef) {
|
|
135
|
+
window.clearTimeout(timeoutInputRef);
|
|
136
|
+
}
|
|
137
|
+
timeoutInputRef = window.setTimeout(() => {
|
|
138
|
+
this.dispatchEvent(
|
|
139
|
+
new CustomEvent("wizard-step-update", {
|
|
140
|
+
detail: this._prepareDataFromForm(),
|
|
141
|
+
bubbles: true,
|
|
142
|
+
composed: true
|
|
143
|
+
})
|
|
144
|
+
);
|
|
145
|
+
}, DELAY_TIME);
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
__decorateClass([
|
|
149
|
+
property({ type: String })
|
|
150
|
+
], PdDefaultWizardStep.prototype, "stepTitle");
|
|
151
|
+
__decorateClass([
|
|
152
|
+
property({ type: Boolean })
|
|
153
|
+
], PdDefaultWizardStep.prototype, "withRequiredInfo");
|
|
154
|
+
__decorateClass([
|
|
155
|
+
property({ type: Boolean })
|
|
156
|
+
], PdDefaultWizardStep.prototype, "withAutoTrim");
|
|
157
|
+
__decorateClass([
|
|
158
|
+
state()
|
|
159
|
+
], PdDefaultWizardStep.prototype, "_errorMsg");
|
|
160
|
+
__decorateClass([
|
|
161
|
+
state()
|
|
162
|
+
], PdDefaultWizardStep.prototype, "_validForm");
|
|
163
|
+
__decorateClass([
|
|
164
|
+
query("#stepFormContainerId")
|
|
165
|
+
], PdDefaultWizardStep.prototype, "_formElement");
|
|
166
|
+
|
|
167
|
+
export { PdDefaultWizardStep };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pd-default-wizard-step.d.ts","sourceRoot":"","sources":["../../src/pd-default-wizard-step/pd-default-wizard-step.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { PdDefaultWizardStep } from './pd-default-wizard-step/PdDefaultWizardStep.js';
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { getCurrentFormatLocale, getCurrentTimeZone } from './locale-format.js';
|
|
2
|
+
|
|
3
|
+
const formatToTime = (date, emptyResult) => {
|
|
4
|
+
let resultStr = "--";
|
|
5
|
+
try {
|
|
6
|
+
if (date !== void 0 && date !== null) {
|
|
7
|
+
const usedDate = typeof date === "string" || typeof date === "number" ? new Date(date) : date;
|
|
8
|
+
resultStr = usedDate.toLocaleTimeString(getCurrentFormatLocale(), {
|
|
9
|
+
hour: "2-digit",
|
|
10
|
+
minute: "2-digit",
|
|
11
|
+
timeZone: getCurrentTimeZone()
|
|
12
|
+
});
|
|
13
|
+
}
|
|
14
|
+
} catch {
|
|
15
|
+
}
|
|
16
|
+
return resultStr;
|
|
17
|
+
};
|
|
18
|
+
const formatShortDate = (date, withTime) => {
|
|
19
|
+
let resultStr = "--";
|
|
20
|
+
if (date) {
|
|
21
|
+
const usedDate = typeof date === "string" || typeof date === "number" ? new Date(date) : date;
|
|
22
|
+
resultStr = usedDate.toLocaleDateString(
|
|
23
|
+
getCurrentFormatLocale(),
|
|
24
|
+
{
|
|
25
|
+
day: "2-digit",
|
|
26
|
+
month: "2-digit",
|
|
27
|
+
year: "numeric",
|
|
28
|
+
timeZone: getCurrentTimeZone()
|
|
29
|
+
}
|
|
30
|
+
);
|
|
31
|
+
}
|
|
32
|
+
return resultStr;
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
export { formatShortDate, formatToTime };
|
|
@@ -3,42 +3,55 @@ import { PdWizardStep } from '../types.js';
|
|
|
3
3
|
/**
|
|
4
4
|
* A multi-step wizard UI component.
|
|
5
5
|
*
|
|
6
|
-
* @
|
|
7
|
-
* @fires previous-step - Fired when the "Zurück" button is clicked
|
|
8
|
-
* @fires submit-wizard - Fired when the wizard is submitted; can modify the `submited` flag in the detail object
|
|
9
|
-
* @fires close-wizard - Fired when the wizard is closed
|
|
6
|
+
* @summary Multi-step wizard with navigation, progress indicator, and submit handling.
|
|
10
7
|
*
|
|
11
|
-
* @slot slotLogo - The slot for the logo in the title area
|
|
12
|
-
* @slot step-1 - Content for step 1
|
|
13
|
-
* @slot step-2 - Content for step 2
|
|
14
|
-
* @slot step-3 - Content for step 3
|
|
15
|
-
* @slot step-4 - Content for step 4
|
|
16
|
-
* @slot step-5 - Content for step 5
|
|
17
|
-
* @slot step-6 - Content for step 6
|
|
18
8
|
* @tagname pd-wizard
|
|
9
|
+
*
|
|
10
|
+
* @event next-step - Fired when the "Next" button is clicked.
|
|
11
|
+
* @event previous-step - Fired when the "Back" button is clicked.
|
|
12
|
+
* @event submit-wizard - Fired when the wizard is submitted with `{submitted}` detail.
|
|
13
|
+
* @event close-wizard - Fired when the wizard is closed.
|
|
14
|
+
*
|
|
15
|
+
* @slot step-[n] - Dynamic slots for wizard step content (step-1, step-2, etc.).
|
|
16
|
+
*
|
|
17
|
+
* @cssprop --pd-wizard-header-bg - Header background. Default: `var(--pd-default-col)`.
|
|
18
|
+
* @cssprop --pd-wizard-header-color - Header text color. Default: `var(--pd-on-primary-col)`.
|
|
19
|
+
* @cssprop --pd-wizard-header-height - Header min-height. Default: `auto`.
|
|
20
|
+
* @cssprop --pd-wizard-header-font-size - Header font size. Default: `2em`.
|
|
21
|
+
* @cssprop --pd-wizard-content-bg - Content background. Default: `var(--pd-default-bg-col)`.
|
|
22
|
+
* @cssprop --pd-wizard-content-padding - Content padding. Default: `2rem 3.5rem 0.5rem 3.5rem`.
|
|
23
|
+
* @cssprop --pd-wizard-content-overflow - Content overflow-y. Default: `auto`.
|
|
24
|
+
* @cssprop --pd-wizard-content-max-width - Content max-width (centered). Default: `var(--pd-content-max-width)`.
|
|
25
|
+
* @cssprop --pd-wizard-buttons-bg - Buttons background. Default: `var(--pd-default-light-col)`.
|
|
26
|
+
* @cssprop --pd-wizard-buttons-padding - Buttons padding. Default: `var(--pd-spacing-md)`.
|
|
27
|
+
* @cssprop --pd-wizard-buttons-justify - Buttons justify-content. Default: `space-around`.
|
|
28
|
+
* @cssprop --pd-wizard-close-icon-col - Close icon color. Default: `var(--pd-on-primary-col)`.
|
|
29
|
+
* @cssprop --pd-wizard-close-icon-hover-col - Close icon hover color. Default: `var(--pd-default-hover-col)`.
|
|
30
|
+
* @cssprop --pd-wizard-border-radius - Border radius for header top and buttons bottom. Default: `0`.
|
|
31
|
+
*
|
|
32
|
+
* @csspart header - The header container (includes title, close icon, breadcrumbs).
|
|
33
|
+
* @csspart content - The content area (scrollable, with centered inner container).
|
|
34
|
+
* @csspart buttons - The navigation buttons area.
|
|
19
35
|
*/
|
|
20
36
|
export declare class PdWizard extends LitElement {
|
|
21
|
-
/**
|
|
22
|
-
* Current step number (1-based index)
|
|
23
|
-
*/
|
|
37
|
+
/** Current step number (1-based index). */
|
|
24
38
|
currentNumber: number;
|
|
25
|
-
/**
|
|
26
|
-
* List of wizard step definitions
|
|
27
|
-
*/
|
|
39
|
+
/** List of wizard step definitions. */
|
|
28
40
|
wizardSteps: PdWizardStep[];
|
|
29
|
-
/**
|
|
30
|
-
* If true, renders the wizard in panel style (reduced header)
|
|
31
|
-
*/
|
|
32
|
-
panelWizard: boolean;
|
|
33
41
|
/**
|
|
34
42
|
* Internal state to disable submit button after submission
|
|
35
|
-
*/
|
|
36
|
-
private
|
|
43
|
+
* @ignore */
|
|
44
|
+
private _submitted;
|
|
37
45
|
static styles: CSSResultGroup;
|
|
38
46
|
protected render(): import('lit').TemplateResult<1>;
|
|
39
47
|
private _previousStep;
|
|
40
48
|
private _nextStep;
|
|
41
49
|
private _submit;
|
|
42
50
|
private _closeWizard;
|
|
51
|
+
/**
|
|
52
|
+
* Handles keyboard events on the close icon.
|
|
53
|
+
* Activates on Enter or Space key.
|
|
54
|
+
*/
|
|
55
|
+
private _handleCloseKeydown;
|
|
43
56
|
}
|
|
44
57
|
//# sourceMappingURL=PdWizard.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PdWizard.d.ts","sourceRoot":"","sources":["../../src/pd-wizard/PdWizard.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAK5D,OAAO,0CAA0C,CAAC;AAClD,OAAO,
|
|
1
|
+
{"version":3,"file":"PdWizard.d.ts","sourceRoot":"","sources":["../../src/pd-wizard/PdWizard.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAK5D,OAAO,0CAA0C,CAAC;AAClD,OAAO,6CAA6C,CAAC;AAErD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,OAAO,wBAAwB,CAAC;AAEhC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,2CAA2C;IAE3C,aAAa,SAAO;IAEpB,uCAAuC;IAEvC,WAAW,EAAE,YAAY,EAAE,CAAM;IAEjC;;iBAEa;IAEb,OAAO,CAAC,UAAU,CAAS;IAE3B,OAAgB,MAAM,EAAE,cAAc,CAgGpC;IAEF,SAAS,CAAC,MAAM;IAyFhB,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,OAAO;IAMf,OAAO,CAAC,YAAY;IAIpB;;;OAGG;IACH,OAAO,CAAC,mBAAmB;CAM5B"}
|