@progressive-development/pd-wizard 0.0.56 → 0.0.58
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/package.json +3 -2
- package/src/PdSteps.js +42 -23
- package/src/PdWizard.js +100 -80
- package/stories/wizard.stories.js +15 -3
package/package.json
CHANGED
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
"order",
|
|
15
15
|
"steps"
|
|
16
16
|
],
|
|
17
|
-
"version": "0.0.
|
|
17
|
+
"version": "0.0.58",
|
|
18
18
|
"main": "index.js",
|
|
19
19
|
"module": "index.js",
|
|
20
20
|
"scripts": {
|
|
@@ -31,7 +31,8 @@
|
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
33
|
"@lit/localize": "^0.11.2",
|
|
34
|
-
"@progressive-development/pd-forms": "^0.1.
|
|
34
|
+
"@progressive-development/pd-forms": "^0.1.4",
|
|
35
|
+
"@progressive-development/pd-icon": "^0.1.8",
|
|
35
36
|
"lit": "^2.2.0"
|
|
36
37
|
},
|
|
37
38
|
"devDependencies": {
|
package/src/PdSteps.js
CHANGED
|
@@ -21,28 +21,38 @@ class PdSteps extends LitElement {
|
|
|
21
21
|
static get styles() {
|
|
22
22
|
return css`
|
|
23
23
|
:host {
|
|
24
|
-
--my-font: var(--app-font, Oswald);
|
|
25
|
-
--my-step-text-color: var(--squi-test, #177e89);
|
|
26
|
-
--my-step-current-text-color: var(--squi-test, #fefefe);
|
|
27
|
-
|
|
28
|
-
--my-step-current-name-circle-color: var(--squi-test, #ffc857);
|
|
29
|
-
--my-step-passed-name-circle-color: var(--squi-test, #fefefe);
|
|
30
|
-
--my-step-name-circle-color: var(--squi-test, #fefefe);
|
|
31
|
-
|
|
32
|
-
--my-step-unfinished-border-color: var(--squi-test, #fefefe);
|
|
33
|
-
--my-step-passed-border-color: var(--squi-test, #fefefe);
|
|
34
|
-
--my-step-current-border-color: var(--squi-test, #fefefe);
|
|
35
|
-
|
|
36
|
-
--my-step-unfinished-color: var(--squi-test, #fefefe);
|
|
37
|
-
--my-step-passed-color: var(--squi-test, #fefefe);
|
|
38
|
-
--my-step-passed-gradient-color: var(--squi-test, #084c61);
|
|
39
|
-
--my-step-current-color: var(--squi-test, #177e89);
|
|
40
|
-
--my-step-current-gradient-color: var(--squi-test, #f3d7a0);
|
|
41
24
|
|
|
42
|
-
|
|
25
|
+
/**
|
|
26
|
+
* CSS Struktur refactoring hier zunächst gestoppt.
|
|
27
|
+
* D.h. noch alter Still, hier werden zunächst nur die
|
|
28
|
+
* Übergabe Properties angepasst, bis die Steps refactored werden....
|
|
29
|
+
*/
|
|
43
30
|
|
|
44
|
-
--my-
|
|
45
|
-
|
|
31
|
+
--my-font: var(--app-font-title-family);
|
|
32
|
+
|
|
33
|
+
--my-step-passed-name-circle-color: var(--app-primary-dark-col, #0A3A48);
|
|
34
|
+
--my-step-passed-border-color: var(--app-success-col, #42a01c);
|
|
35
|
+
--my-step-passed-color: var(--app-success-light-col, #f5ffe8);
|
|
36
|
+
|
|
37
|
+
--my-step-text-color: var(--app-primary-bg-col, #fefefe);
|
|
38
|
+
--my-step-name-circle-color: var(--app-primary-bg-col, #fefefe);
|
|
39
|
+
|
|
40
|
+
--my-step-current-text-color: var(--app-primary-dark-col, #0A3A48);
|
|
41
|
+
--my-step-current-name-circle-color: var(--app-primary-dark-col, #0A3A48);;
|
|
42
|
+
--my-step-current-border-color: var(--app-primary-bg-col, #fefefe);
|
|
43
|
+
--my-step-current-color: var(--app-hover-col, #f3d7a0);
|
|
44
|
+
|
|
45
|
+
--my-step-unfinished-border-color: var(--app-primary-bg-col, #fefefe);
|
|
46
|
+
--my-step-unfinished-color: var(--app-primary-col, #067394);
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
--my-step-passed-gradient-color: var(--squi-test, #084c61);
|
|
50
|
+
--my-step-current-gradient-color: var(--squi-test, #f3d7a0);
|
|
51
|
+
|
|
52
|
+
--my-step-hover-color: var(--app-hover-col, #f3d7a0);
|
|
53
|
+
|
|
54
|
+
--my-bg-color: var(--app-primary-light-col, #AFC1D2);
|
|
55
|
+
--my-hr-bg-color: var(--app-primary-bg-col, #fefefe);
|
|
46
56
|
|
|
47
57
|
display: block;
|
|
48
58
|
background-color: var(--my-bg-color);
|
|
@@ -84,6 +94,8 @@ class PdSteps extends LitElement {
|
|
|
84
94
|
text-align: center;
|
|
85
95
|
z-index: 51;
|
|
86
96
|
width: 100%;
|
|
97
|
+
|
|
98
|
+
padding-top: 10px;
|
|
87
99
|
}
|
|
88
100
|
|
|
89
101
|
.step {
|
|
@@ -132,7 +144,7 @@ class PdSteps extends LitElement {
|
|
|
132
144
|
}
|
|
133
145
|
|
|
134
146
|
.circle.passed:hover {
|
|
135
|
-
background-color: var(--my-step-
|
|
147
|
+
background-color: var(--my-step-hover-color);
|
|
136
148
|
}
|
|
137
149
|
|
|
138
150
|
.circle.current {
|
|
@@ -193,22 +205,29 @@ class PdSteps extends LitElement {
|
|
|
193
205
|
color: var(--my-step-current-text-color);
|
|
194
206
|
}
|
|
195
207
|
|
|
208
|
+
.circle .step-nr.passed {
|
|
209
|
+
color: var(--my-step-passed-name-circle-color);
|
|
210
|
+
}
|
|
211
|
+
|
|
196
212
|
/* used for circle style */
|
|
197
213
|
hr {
|
|
198
214
|
/*background: linear-gradient(to right, var(--my-step-passed-color) , var(--my-step-unfinished-color));*/
|
|
199
215
|
background-color: var(--my-hr-bg-color);
|
|
200
216
|
height: 3px;
|
|
201
217
|
position: relative;
|
|
202
|
-
top:
|
|
218
|
+
top: 43px;
|
|
203
219
|
z-index: 50;
|
|
204
220
|
width: 100%;
|
|
205
221
|
}
|
|
206
222
|
|
|
207
223
|
/* Size Elements for small width */
|
|
208
|
-
@media (max-width:
|
|
224
|
+
@media (max-width: 700px) {
|
|
209
225
|
.parent {
|
|
210
226
|
/*height: 30px; /* Or whatever */
|
|
211
227
|
}
|
|
228
|
+
.step-container {
|
|
229
|
+
padding-top: 0px;
|
|
230
|
+
}
|
|
212
231
|
.step.circle {
|
|
213
232
|
height: 30px; /* Or whatever */
|
|
214
233
|
width: 30px;
|
package/src/PdWizard.js
CHANGED
|
@@ -6,7 +6,11 @@
|
|
|
6
6
|
import { LitElement, html, css } from 'lit';
|
|
7
7
|
import { msg, updateWhenLocaleChanges } from '@lit/localize';
|
|
8
8
|
|
|
9
|
+
import { ICON_CLOSE as CLOSEICON } from '@progressive-development/pd-icon/src/PdIcon.js';
|
|
10
|
+
|
|
11
|
+
import '@progressive-development/pd-icon/pd-icon.js';
|
|
9
12
|
import '@progressive-development/pd-forms/pd-button.js';
|
|
13
|
+
|
|
10
14
|
import './PdSteps.js';
|
|
11
15
|
|
|
12
16
|
/**
|
|
@@ -38,24 +42,33 @@ export class PdWizard extends LitElement {
|
|
|
38
42
|
static get styles() {
|
|
39
43
|
return css`
|
|
40
44
|
:host {
|
|
41
|
-
--my-font: var(--app-font, Oswald);
|
|
42
|
-
|
|
43
|
-
--my-header-background-color: var(--pd-wizard-header-bg-color, #084c61);
|
|
44
|
-
--my-header-text-color: var(--pd-wizard-header-txt-color, white);
|
|
45
45
|
|
|
46
|
-
|
|
46
|
+
/* These values are used more than onnce and dfined here for short access */
|
|
47
|
+
--my-height: var(--pd-wizard-title-height, 110px);
|
|
48
|
+
--my-header-font-color: var(--pd-wizard-header-font-col, var(--app-primary-bg-col, #fefefe));
|
|
49
|
+
--my-header-bg-col: var(--pd-wizard-header-bg-col, var(--app-primary-col, #067394));
|
|
47
50
|
|
|
48
51
|
display: block;
|
|
49
52
|
/*min-height: 100%;*/
|
|
50
53
|
height: 100%;
|
|
51
54
|
}
|
|
52
55
|
|
|
53
|
-
:host(
|
|
56
|
+
:host(.small-size) .layout-container {
|
|
54
57
|
gap: 0px;
|
|
55
58
|
grid-template-areas:
|
|
56
59
|
'header header header'
|
|
57
|
-
'
|
|
58
|
-
'
|
|
60
|
+
'. content .'
|
|
61
|
+
'. footer .';
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
:host(.top-rounded) .wiz-title {
|
|
65
|
+
border-top-left-radius: var(--pd-wizard-top-borderradius, 5px);
|
|
66
|
+
border-top-right-radius: var(--pd-wizard-top-borderradius, 5px);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
:host(.bottom-rounded) .wiz-buttons {
|
|
70
|
+
border-bottom-left-radius: var(--pd-wizard-bottom-borderradius, 5px);
|
|
71
|
+
border-bottom-right-radius: var(--pd-wizard-bottom-borderradius, 5px);
|
|
59
72
|
}
|
|
60
73
|
|
|
61
74
|
/* Layout Grid for the Wizard Component
|
|
@@ -73,8 +86,8 @@ export class PdWizard extends LitElement {
|
|
|
73
86
|
gap: 1px;
|
|
74
87
|
grid-template-areas:
|
|
75
88
|
'header header header'
|
|
76
|
-
'
|
|
77
|
-
'
|
|
89
|
+
'content content content'
|
|
90
|
+
'footer footer footer';
|
|
78
91
|
}
|
|
79
92
|
|
|
80
93
|
/* Grid Area positions for layout container above */
|
|
@@ -82,11 +95,19 @@ export class PdWizard extends LitElement {
|
|
|
82
95
|
grid-area: header;
|
|
83
96
|
}
|
|
84
97
|
.wiz-content {
|
|
85
|
-
grid-area: content;
|
|
86
|
-
|
|
87
|
-
|
|
98
|
+
grid-area: content;
|
|
99
|
+
display: flex;
|
|
100
|
+
justify-content: center;
|
|
88
101
|
height: 100%;
|
|
89
|
-
|
|
102
|
+
background-color: var(--pd-wizard-content-bg-col, var(--app-primary-bg-col, #fefefe));
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.wiz-content-inner {
|
|
106
|
+
padding: 1rem;
|
|
107
|
+
min-height: 200px;
|
|
108
|
+
min-width: 400px;
|
|
109
|
+
max-width: 1000px;
|
|
110
|
+
background-color: var(--pd-wizard-content-inner-bg-col, var(--app-primary-bg-col, #fefefe));
|
|
90
111
|
}
|
|
91
112
|
|
|
92
113
|
.wiz-buttons {
|
|
@@ -94,11 +115,14 @@ export class PdWizard extends LitElement {
|
|
|
94
115
|
display: flex;
|
|
95
116
|
/*padding-left: 50px;
|
|
96
117
|
padding-right: 50px;*/
|
|
97
|
-
justify-content: var(--pd-justify-buttons, space-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
118
|
+
justify-content: var(--pd-wizard-justify-buttons, space-around);
|
|
119
|
+
align-items: center;
|
|
120
|
+
|
|
121
|
+
height: 80px;
|
|
122
|
+
/*background-color: var(--pd-wizard-footer-bg-col, red);*/
|
|
123
|
+
background: linear-gradient(to right,
|
|
124
|
+
var(--pd-wizard-buttons-bg-col1, var(--app-primary-light-col, #AFC1D2)) 0%,
|
|
125
|
+
var(--pd-wizard-buttons-bg-col2, var(--pd-default-disabled-light-col, lightgrey)) 100%);
|
|
102
126
|
}
|
|
103
127
|
|
|
104
128
|
.wiz-breadcrumbs {
|
|
@@ -107,72 +131,68 @@ export class PdWizard extends LitElement {
|
|
|
107
131
|
.wiz-title {
|
|
108
132
|
position: relative;
|
|
109
133
|
text-align: center;
|
|
110
|
-
background-color: var(--my-header-
|
|
111
|
-
height: var(
|
|
112
|
-
line-height: 80px;
|
|
134
|
+
background-color: var(--my-header-bg-col);
|
|
135
|
+
height: var(---my-height);
|
|
113
136
|
padding-left: var(--pd-wizard-title-padding-left, 0);
|
|
114
|
-
|
|
115
|
-
border-top-left-radius: var(--pd-wizard-top-borderradius, 0);
|
|
116
|
-
border-top-right-radius: var(--pd-wizard-top-borderradius, 0);
|
|
137
|
+
color: var(--my-header-font-color);
|
|
117
138
|
}
|
|
118
139
|
|
|
119
140
|
.title {
|
|
120
|
-
font-family: var(--
|
|
121
|
-
font-size:
|
|
141
|
+
font-family: var(--app-font-title-family);
|
|
142
|
+
font-size: var(--pd-wizard-header-font-size, 2em);
|
|
122
143
|
font-weight: bolder;
|
|
123
|
-
|
|
124
|
-
}
|
|
144
|
+
line-height: var(--my-height);
|
|
145
|
+
}
|
|
125
146
|
|
|
126
147
|
/* The Close Button */
|
|
127
148
|
.close {
|
|
128
149
|
position: absolute;
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
150
|
+
top: 3px;
|
|
151
|
+
right: 3px;
|
|
152
|
+
|
|
153
|
+
display: flex;
|
|
154
|
+
align-items: center;
|
|
155
|
+
gap: 5px;
|
|
156
|
+
|
|
157
|
+
font-size: 0.8rem;
|
|
158
|
+
|
|
159
|
+
cursor: pointer;
|
|
160
|
+
|
|
161
|
+
--pd-icon-col: var(--my-header-bg-col);
|
|
162
|
+
--pd-icon-stroke-col: var(--my-header-font-color);
|
|
163
|
+
--pd-icon-bg-col: var(--my-header-bg-col);
|
|
164
|
+
--pd-icon-bg-col-hover: var(--my-header-bg-col);
|
|
135
165
|
}
|
|
136
166
|
|
|
137
167
|
.close:hover,
|
|
138
168
|
.close:focus {
|
|
139
|
-
color:
|
|
140
|
-
|
|
141
|
-
cursor: pointer;
|
|
169
|
+
color: var(--app-hover-col, #f3d7a0);
|
|
170
|
+
--pd-icon-stroke-col: var(--app-hover-col, #f3d7a0);
|
|
142
171
|
}
|
|
143
172
|
|
|
144
173
|
/* Size Elements for small width */
|
|
145
|
-
@media (max-width:
|
|
146
|
-
|
|
147
|
-
height: 60px;
|
|
148
|
-
line-height: 60px;
|
|
149
|
-
padding-left: 70px;
|
|
174
|
+
@media (max-width: 700px) {
|
|
175
|
+
:host {
|
|
176
|
+
--my-height: 60px;
|
|
150
177
|
}
|
|
151
178
|
|
|
152
|
-
.wiz-
|
|
179
|
+
.wiz-title {
|
|
180
|
+
padding-left: 70px;
|
|
153
181
|
}
|
|
154
182
|
|
|
155
183
|
.title {
|
|
156
|
-
font-size: 1.
|
|
184
|
+
font-size: 1.2em;
|
|
185
|
+
line-height: 70px;
|
|
157
186
|
}
|
|
158
187
|
|
|
159
|
-
.close {
|
|
160
|
-
font-size:
|
|
161
|
-
|
|
188
|
+
.close {
|
|
189
|
+
font-size: 0.7rem;
|
|
190
|
+
--pd-icon-size: 1.2rem;
|
|
191
|
+
top: 0;
|
|
192
|
+
right: 0;
|
|
162
193
|
}
|
|
163
194
|
}
|
|
164
195
|
|
|
165
|
-
/* Size Elements for small width */
|
|
166
|
-
@media (max-width: 380px) {
|
|
167
|
-
.wiz-title {
|
|
168
|
-
text-align: right;
|
|
169
|
-
padding-right: 20px;
|
|
170
|
-
}
|
|
171
|
-
|
|
172
|
-
.title {
|
|
173
|
-
font-size: 1.2em;
|
|
174
|
-
}
|
|
175
|
-
}
|
|
176
196
|
`;
|
|
177
197
|
}
|
|
178
198
|
|
|
@@ -205,12 +225,10 @@ export class PdWizard extends LitElement {
|
|
|
205
225
|
? this.wizardSteps[this.currentNumber - 1].title
|
|
206
226
|
: 'No-Title'}</span
|
|
207
227
|
>
|
|
208
|
-
<
|
|
209
|
-
|
|
210
|
-
@click="${this._closeWizard}"
|
|
211
|
-
|
|
212
|
-
>×</span
|
|
213
|
-
>
|
|
228
|
+
<div class="close">
|
|
229
|
+
<span>Close</span>
|
|
230
|
+
<pd-icon icon="${CLOSEICON}" @click="${this._closeWizard}"></pd-icon>
|
|
231
|
+
</div>
|
|
214
232
|
</div>
|
|
215
233
|
<div class="wiz-breadcrumbs">
|
|
216
234
|
<pd-steps
|
|
@@ -221,25 +239,27 @@ export class PdWizard extends LitElement {
|
|
|
221
239
|
</div>
|
|
222
240
|
|
|
223
241
|
<div class="wiz-content">
|
|
224
|
-
<div
|
|
225
|
-
<
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
<
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
<
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
<
|
|
242
|
+
<div class="wiz-content-inner">
|
|
243
|
+
<div style="${this.currentNumber === 1 ? '' : 'display:none'}">
|
|
244
|
+
<slot name="step-1"></slot>
|
|
245
|
+
</div>
|
|
246
|
+
<div style="${this.currentNumber === 2 ? '' : 'display:none'}">
|
|
247
|
+
<slot name="step-2"></slot>
|
|
248
|
+
</div>
|
|
249
|
+
<div style="${this.currentNumber === 3 ? '' : 'display:none'}">
|
|
250
|
+
<slot name="step-3"></slot>
|
|
251
|
+
</div>
|
|
252
|
+
<div style="${this.currentNumber === 4 ? '' : 'display:none'}">
|
|
253
|
+
<slot name="step-4"></slot>
|
|
254
|
+
</div>
|
|
235
255
|
</div>
|
|
236
256
|
</div>
|
|
237
257
|
|
|
238
258
|
<div class="wiz-buttons">
|
|
239
259
|
${this.currentNumber >= 1 && this.wizardSteps
|
|
240
|
-
? html`
|
|
260
|
+
? html`
|
|
241
261
|
<pd-button
|
|
242
|
-
@
|
|
262
|
+
@button-clicked="${this._previousStep}"
|
|
243
263
|
text="${msg('Zurück', {desc: '#pd.wizard.back#'})}"
|
|
244
264
|
style="visibility: ${this.currentNumber === 1
|
|
245
265
|
? 'hidden'
|
|
@@ -248,14 +268,14 @@ export class PdWizard extends LitElement {
|
|
|
248
268
|
${this.currentNumber !== this.wizardSteps.length &&
|
|
249
269
|
this.wizardSteps[this.currentNumber - 1].next !== false
|
|
250
270
|
? html`<pd-button
|
|
251
|
-
@
|
|
271
|
+
@button-clicked="${this._nextStep}"
|
|
252
272
|
text="${msg('Weiter', {desc: '#pd.wizard.next#'})}"
|
|
253
273
|
></pd-button>`
|
|
254
274
|
: ''}
|
|
255
275
|
${this.currentNumber === this.wizardSteps.length
|
|
256
276
|
? html`<pd-button
|
|
257
277
|
primary
|
|
258
|
-
@
|
|
278
|
+
@button-clicked="${this._submit}"
|
|
259
279
|
text="${msg('Absenden', {desc: '#pd.wizard.submit#'})}"
|
|
260
280
|
></pd-button>`
|
|
261
281
|
: ''}
|
|
@@ -8,14 +8,26 @@ export default {
|
|
|
8
8
|
};
|
|
9
9
|
|
|
10
10
|
function WizardTemplate({ wizardSteps, currentNumber }) {
|
|
11
|
+
|
|
12
|
+
let currentNr = currentNumber;
|
|
13
|
+
|
|
11
14
|
return html`
|
|
12
15
|
<pd-wizard
|
|
13
16
|
id="wizardId"
|
|
14
17
|
.wizardSteps="${wizardSteps}"
|
|
15
|
-
|
|
18
|
+
class="small-size_"
|
|
19
|
+
currentNumber="${currentNr}"
|
|
20
|
+
@previous-step="${() => {currentNr -= 1; console.log("Hier hin");}}"
|
|
21
|
+
@next-step="${() => {currentNr -= 1; console.log("Hier hin");}}"
|
|
16
22
|
>
|
|
17
|
-
<div slot="step-1">
|
|
18
|
-
|
|
23
|
+
<div slot="step-1">
|
|
24
|
+
<h2>Das ist ein Titel 1</h2>
|
|
25
|
+
<p>Hier steht etwtwas Text. In der Regel aber kommt direkt eine Form.</p>
|
|
26
|
+
</div>
|
|
27
|
+
<div slot="step-2">
|
|
28
|
+
<h2>Das ist ein Titel 2</h2>
|
|
29
|
+
<p>Hier steht etwtwas Text. In der Regel aber kommt direkt eine Form. Das ist jetzt ein löanger Text um zu gucken wie es so aussieht. er sollte schön umbrechen und mittig das ganze platzieren.</p>
|
|
30
|
+
</div>
|
|
19
31
|
<div slot="step-3">Test 3</div>
|
|
20
32
|
<div slot="step-4">Test 4</div>
|
|
21
33
|
</pd-wizard>
|