@progressive-development/pd-wizard 0.1.70 → 0.1.71
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 +1 -1
- package/src/PdSteps.js +60 -190
- package/src/PdWizard.js +15 -17
package/package.json
CHANGED
package/src/PdSteps.js
CHANGED
|
@@ -26,236 +26,106 @@ class PdSteps extends LitElement {
|
|
|
26
26
|
css`
|
|
27
27
|
:host {
|
|
28
28
|
|
|
29
|
-
|
|
30
|
-
* CSS Struktur refactoring hier zunächst gestoppt.
|
|
31
|
-
* D.h. noch alter Still, hier werden zunächst nur die
|
|
32
|
-
* Übergabe Properties angepasst, bis die Steps refactored werden....
|
|
33
|
-
*/
|
|
34
|
-
|
|
35
|
-
--my-font: var(--pd-default-font-title-family);
|
|
36
|
-
|
|
37
|
-
--my-step-passed-color: var(--pd-steps-passed-col, var(--pd-default-success-light-col));
|
|
38
|
-
--my-step-passed-name-circle-color: var(--pd-steps-name-passed-col, var(--pd-default-dark-col));
|
|
39
|
-
--my-step-passed-border-color: var(--pd-steps-border-passed-col, var(--pd-default-success-col));
|
|
40
|
-
--my-step-passed-nr-color: var(--pd-steps-nr-passed-col, var(--pd-default-dark-col));
|
|
41
|
-
|
|
42
|
-
--my-step-current-color: var(--pd-steps-current-col, var(--pd-default-hover-col));
|
|
43
|
-
--my-step-current-name-circle-color: var(--pd-steps-name-current-col, var(--pd-default-dark-col));
|
|
44
|
-
--my-step-current-border-color: var(--pd-steps-border-current-col, var(--pd-default-bg-col));
|
|
45
|
-
--my-step-current-nr-color: var(--pd-steps-nr-current-col, var(--pd-default-dark-col));
|
|
46
|
-
|
|
47
|
-
--my-step-unfinished-color: var(--pd-steps-nex-col, var(--pd-default-col));
|
|
48
|
-
--my-step-name-circle-color: var(--pd-steps-nr-next-col, var(--pd-default-bg-col));
|
|
49
|
-
--my-step-unfinished-border-color: var(--pd-steps-border-next-col, var(--pd-default-bg-col));
|
|
50
|
-
--my-step-text-color: var(--pd-steps-name-next-col, var(--pd-default-bg-col));
|
|
51
|
-
|
|
52
|
-
/*
|
|
53
|
-
--my-step-passed-gradient-color: var(--squi-test, #084c61);
|
|
54
|
-
--my-step-current-gradient-color: var(--squi-test, #f3d7a0);
|
|
55
|
-
*/
|
|
56
|
-
|
|
57
|
-
--my-step-hover-color: var(--pd-steps-hover-col, var(--pd-default-hover-col));
|
|
58
|
-
|
|
59
|
-
--my-bg-color: var(--pd-steps-bg-col, var(--pd-default-light-col));
|
|
60
|
-
--my-hr-bg-color: var(--pd-steps-hr-col, var(--pd-default-bg-col));
|
|
29
|
+
--circle-size: var(--pd-step-circle-size, 40px);
|
|
61
30
|
|
|
62
31
|
display: block;
|
|
63
|
-
background-color: var(--
|
|
64
|
-
|
|
65
|
-
border-bottom-left-radius: var(--pd-step-bottom-borderradius, 0);
|
|
66
|
-
border-bottom-right-radius: var(--pd-step-bottom-borderradius, 0);
|
|
32
|
+
background-color: var(--pd-steps-bg-color, var(--pd-default-col));
|
|
67
33
|
|
|
68
|
-
/*
|
|
69
|
-
|
|
34
|
+
/* needed for the absolut step name */
|
|
35
|
+
padding-bottom: calc(var(--pd-step-name-font-size, 1em) * 2);
|
|
70
36
|
}
|
|
71
37
|
|
|
72
38
|
.parent {
|
|
73
39
|
display: flex;
|
|
74
|
-
/*
|
|
75
|
-
flex-direction: row; /* default *
|
|
76
|
-
flex-wrap: nowrap; /* default *
|
|
77
|
-
*/
|
|
78
|
-
/* short hand for above lines => default, not needed */
|
|
79
40
|
flex-flow: row nowrap;
|
|
80
41
|
align-items: center;
|
|
81
|
-
|
|
82
|
-
padding-bottom: 10px;
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
.parent.circle {
|
|
86
|
-
justify-content: space-around;
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
.parent.tab {
|
|
90
|
-
justify-content: start;
|
|
42
|
+
position: relative;
|
|
91
43
|
}
|
|
92
44
|
|
|
93
|
-
/* Eingeführt, um den Text unter dem Circle zentral darzustellen => !Funktioniert nur für circle im Augenblick*/
|
|
94
45
|
.step-container {
|
|
95
46
|
display: flex;
|
|
96
47
|
flex-direction: column;
|
|
97
48
|
align-items: center;
|
|
98
|
-
|
|
99
49
|
text-align: center;
|
|
100
50
|
z-index: 51;
|
|
101
51
|
width: 100%;
|
|
102
|
-
|
|
103
|
-
padding-top: var(--pd-steps-padding-top, 10px);
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
.step {
|
|
107
|
-
/*margin: auto; /* Magic!/*/
|
|
52
|
+
position: relative;
|
|
108
53
|
}
|
|
109
54
|
|
|
55
|
+
/* Kreis-Styling */
|
|
110
56
|
.step.circle {
|
|
111
|
-
width:
|
|
112
|
-
height:
|
|
57
|
+
width: var(--circle-size);
|
|
58
|
+
height: var(--circle-size);
|
|
113
59
|
border-radius: 50%;
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
.step.tab {
|
|
122
|
-
width: 100%;
|
|
123
|
-
max-width: 250px;
|
|
124
|
-
height: 40px;
|
|
125
|
-
border: solid 1px var(--my-step-unfinished-border-color);
|
|
126
|
-
box-shadow: 1px 1px grey;
|
|
127
|
-
background-image: linear-gradient(
|
|
128
|
-
to right,
|
|
129
|
-
var(--my-step-unfinished-color),
|
|
130
|
-
grey
|
|
131
|
-
);
|
|
132
|
-
cursor: pointer;
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
.step.tab:hover:not(.current) {
|
|
136
|
-
border: solid 1px yellow;
|
|
137
|
-
background-image: linear-gradient(
|
|
138
|
-
to right,
|
|
139
|
-
var(--my-step-hover-color),
|
|
140
|
-
grey
|
|
141
|
-
);
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
.circle.passed {
|
|
145
|
-
/*background-image: linear-gradient(to right, var(--my-step-passed-color) , var(--my-step-passed-gradient-color)); */
|
|
146
|
-
background-color: var(--my-step-passed-color);
|
|
147
|
-
border: solid 2px var(--my-step-passed-border-color);
|
|
148
|
-
cursor: pointer;
|
|
149
|
-
}
|
|
150
|
-
|
|
151
|
-
.circle.passed:hover {
|
|
152
|
-
background-color: var(--my-step-hover-color);
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
.circle.current {
|
|
156
|
-
/*background-image: linear-gradient(to right, var(--my-step-current-color) , var(--my-step-current-gradient-color)); */
|
|
157
|
-
background-color: var(--my-step-current-color);
|
|
158
|
-
border: solid 2px var(--my-step-current-border-color);
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
.tab.current {
|
|
162
|
-
background-image: linear-gradient(
|
|
163
|
-
to right,
|
|
164
|
-
var(--my-step-current-color),
|
|
165
|
-
grey
|
|
166
|
-
);
|
|
167
|
-
box-shadow: 1px 1px grey;
|
|
168
|
-
border-color: var(--my-step-current-border-color);
|
|
169
|
-
cursor: auto;
|
|
60
|
+
border: solid var(--pd-step-circle-border-size, 2px) var(--pd-step-circle-border-color, white);
|
|
61
|
+
background-color: var(--pd-step-circle-bg-color, var(--pd-default-col));
|
|
62
|
+
display: flex;
|
|
63
|
+
justify-content: center;
|
|
64
|
+
align-items: center;
|
|
65
|
+
position: relative;
|
|
66
|
+
z-index: 51; /* Ensure the circle is above the hr line */
|
|
170
67
|
}
|
|
171
68
|
|
|
69
|
+
/* Dynamische Schriftgröße der Nummer */
|
|
172
70
|
.step-nr {
|
|
173
|
-
font-family: var(--
|
|
174
|
-
color: var(--my-step-text-color);
|
|
71
|
+
font-family: var(--pd-default-font-title-family);
|
|
175
72
|
font-weight: bold;
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
73
|
+
color: var(--pd-step-circle-nr-color, white);
|
|
74
|
+
font-size: calc(var(--circle-size) / 1.8);
|
|
75
|
+
// line-height: 1;
|
|
76
|
+
position: absolute;
|
|
179
77
|
}
|
|
180
78
|
|
|
181
|
-
/*
|
|
182
|
-
|
|
183
|
-
|
|
79
|
+
/* Linien-Styling */
|
|
80
|
+
hr {
|
|
81
|
+
background-color: var(--pd-step-hr-color, white);
|
|
82
|
+
height: 2px;
|
|
83
|
+
position: absolute;
|
|
84
|
+
top: 50%;
|
|
85
|
+
left: 0;
|
|
86
|
+
width: 100%;
|
|
87
|
+
z-index: 50; /* Make sure the hr is under the circle */
|
|
88
|
+
border-style: none;
|
|
89
|
+
border-width: 0em;
|
|
90
|
+
margin:0;
|
|
184
91
|
}
|
|
185
92
|
|
|
93
|
+
/* Schritt-Name Styling */
|
|
186
94
|
.step-name {
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
font-size: 1em;
|
|
190
|
-
}
|
|
191
|
-
|
|
192
|
-
/* Style Circle ohne Step Name => ToDo: Nur ab bestimmter Breite /*/
|
|
193
|
-
.circle .step-name {
|
|
194
|
-
white-space: nowrap;
|
|
195
|
-
color: var(--my-step-name-circle-color);
|
|
196
|
-
/* display: none; */
|
|
95
|
+
font-family: var(--pd-default-font-title-family);
|
|
96
|
+
color: var(--pd-step-name-color, white);
|
|
97
|
+
font-size: var(--pd-step-name-font-size, 1em);
|
|
197
98
|
font-weight: bold;
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
.circle .step-name.passed {
|
|
202
|
-
color: var(--my-step-passed-name-circle-color);
|
|
99
|
+
position: absolute;
|
|
100
|
+
top: calc(var(--circle-size) + (var(--pd-step-name-font-size, 1em) / 2));
|
|
203
101
|
}
|
|
204
102
|
|
|
205
|
-
.
|
|
206
|
-
color: var(--
|
|
103
|
+
.current {
|
|
104
|
+
color: var(--pd-step-color-current, var(--pd-default-hover-col));
|
|
207
105
|
}
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
color: var(--my-step-current-nr-color);
|
|
106
|
+
.step.circle.current {
|
|
107
|
+
border: solid var(--pd-step-circle-border-size, 2px) var(--pd-step-color-current, var(--pd-default-hover-col));
|
|
211
108
|
}
|
|
212
109
|
|
|
213
|
-
.
|
|
214
|
-
color: var(--
|
|
110
|
+
.passed {
|
|
111
|
+
color: var(--pd-step-color-passed, var(--pd-default-dark-col));;
|
|
112
|
+
cursor: pointer;
|
|
215
113
|
}
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
/*background: linear-gradient(to right, var(--my-step-passed-color) , var(--my-step-unfinished-color));*/
|
|
220
|
-
background-color: var(--my-hr-bg-color);
|
|
221
|
-
height: 3px;
|
|
222
|
-
position: relative;
|
|
223
|
-
top: calc(33px + var(--pd-steps-padding-top, 10px));
|
|
224
|
-
z-index: 50;
|
|
114
|
+
.step.circle.passed {
|
|
115
|
+
border: solid var(--pd-step-circle-border-size, 2px) var(--pd-step-color-passed, var(--pd-default-success-col));
|
|
116
|
+
background-color: var(--pd-default-success-light-col);
|
|
225
117
|
}
|
|
226
118
|
|
|
227
|
-
/*
|
|
119
|
+
/* Dynamische Anpassung für kleine Bildschirme */
|
|
228
120
|
@media (max-width: 700px) {
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
}
|
|
232
|
-
.step-container {
|
|
233
|
-
padding-top: 0px;
|
|
234
|
-
}
|
|
235
|
-
.step.circle {
|
|
236
|
-
height: 30px; /* Or whatever */
|
|
237
|
-
width: 30px;
|
|
238
|
-
}
|
|
239
|
-
.step.tab {
|
|
240
|
-
height: 30px; /* Or whatever */
|
|
241
|
-
}
|
|
242
|
-
hr {
|
|
243
|
-
height: 2px;
|
|
244
|
-
top: 28px;
|
|
245
|
-
}
|
|
246
|
-
.step-nr {
|
|
247
|
-
font-size: 1.2em;
|
|
248
|
-
text-align: center;
|
|
249
|
-
line-height: 28px;
|
|
121
|
+
:host {
|
|
122
|
+
--circle-size: 30px;
|
|
250
123
|
}
|
|
251
124
|
.step-name {
|
|
252
125
|
font-size: 0.9em;
|
|
253
126
|
}
|
|
254
|
-
|
|
255
|
-
.circle .step-name {
|
|
256
|
-
padding-top: 3px;
|
|
257
|
-
}
|
|
258
127
|
}
|
|
128
|
+
|
|
259
129
|
`];
|
|
260
130
|
}
|
|
261
131
|
|
|
@@ -290,20 +160,20 @@ class PdSteps extends LitElement {
|
|
|
290
160
|
}
|
|
291
161
|
|
|
292
162
|
_renderCircle() {
|
|
293
|
-
return html`
|
|
294
|
-
${this.styleTyp === 'circle' ? html`<hr />` : ''}
|
|
163
|
+
return html`
|
|
295
164
|
<div class="parent ${this.styleTyp}">
|
|
165
|
+
${this.styleTyp === 'circle' ? html`<hr />` : ''}
|
|
296
166
|
${this.steps.map((st, index) => {
|
|
297
167
|
let pClass = '';
|
|
298
168
|
if (this.currentStepNr > index) {
|
|
299
169
|
pClass = this.currentStepNr === index + 1 ? 'current' : 'passed';
|
|
300
170
|
}
|
|
301
171
|
return html`
|
|
302
|
-
<div class="step-container"
|
|
303
|
-
<div
|
|
304
|
-
class="step ${this.styleTyp} ${pClass}"
|
|
172
|
+
<div class="step-container"
|
|
305
173
|
data-step="${index + 1}"
|
|
306
|
-
@click="${this._stepClicked}"
|
|
174
|
+
@click="${this._stepClicked}">
|
|
175
|
+
<div
|
|
176
|
+
class="step ${this.styleTyp} ${pClass}"
|
|
307
177
|
>
|
|
308
178
|
<span class="step-nr ${pClass}">${index + 1}</span>
|
|
309
179
|
</div>
|
package/src/PdWizard.js
CHANGED
|
@@ -91,10 +91,9 @@ export class PdWizard extends LitElement {
|
|
|
91
91
|
|
|
92
92
|
cursor: pointer;
|
|
93
93
|
|
|
94
|
-
--pd-icon-
|
|
95
|
-
--pd-icon-stroke-col: var(--
|
|
96
|
-
--pd-icon-
|
|
97
|
-
--pd-icon-bg-col-hover: var(--my-header-bg-col);
|
|
94
|
+
--pd-icon-size: 2em;
|
|
95
|
+
--pd-icon-stroke-col-active: var(--pd-default-col);
|
|
96
|
+
--pd-icon-col-active: white;
|
|
98
97
|
}
|
|
99
98
|
|
|
100
99
|
.close:hover,
|
|
@@ -102,10 +101,6 @@ export class PdWizard extends LitElement {
|
|
|
102
101
|
color: var(--pd-default-hover-col);
|
|
103
102
|
--pd-icon-stroke-col: var(--pd-default-hover-col);
|
|
104
103
|
}
|
|
105
|
-
|
|
106
|
-
.wiz-breadcrumbs {
|
|
107
|
-
--pd-steps-bg-col: var(--pd-wizard-steps-bg-col, var(--pd-default-light-col));
|
|
108
|
-
}
|
|
109
104
|
|
|
110
105
|
.wiz-content {
|
|
111
106
|
display: flex;
|
|
@@ -142,27 +137,30 @@ export class PdWizard extends LitElement {
|
|
|
142
137
|
* CSS for panel wizard
|
|
143
138
|
*/
|
|
144
139
|
.wiz-panel-h {
|
|
145
|
-
padding: var(--pd-wizard-header-panel-padding, 0
|
|
140
|
+
padding: var(--pd-wizard-header-panel-padding, 0);
|
|
146
141
|
display: flex;
|
|
147
142
|
align-items: center;
|
|
148
|
-
justify-content:
|
|
143
|
+
justify-content: center;
|
|
144
|
+
background-color: var(--pd-wizard-header-panel-bg-col, var(--pd-default-col));
|
|
145
|
+
position: relative;
|
|
149
146
|
}
|
|
150
147
|
|
|
151
148
|
.wiz-panel-h h1 {
|
|
152
|
-
color: var(--pd-
|
|
149
|
+
color: var(--pd-wizard-header-panel-title-col, white);
|
|
153
150
|
padding: 0;
|
|
154
|
-
margin: 0;
|
|
155
|
-
font-size: 1.
|
|
151
|
+
margin: 0.5em 0px 0px;
|
|
152
|
+
font-size: 1.2em;
|
|
156
153
|
font-family: var(--pd-default-font-title-family);
|
|
157
154
|
}
|
|
158
155
|
|
|
159
156
|
.panel-close-icon {
|
|
160
|
-
--pd-icon-size:
|
|
157
|
+
--pd-icon-size: 2em;
|
|
161
158
|
--pd-icon-stroke-col-active: var(--pd-default-col);
|
|
162
|
-
--pd-icon-col-active:
|
|
163
|
-
--pd-icon-stroke-col: var(--pd-default-col);
|
|
164
|
-
--pd-icon-col: var(--pd-default-light-col);
|
|
159
|
+
--pd-icon-col-active: white;
|
|
165
160
|
cursor: pointer;
|
|
161
|
+
position: absolute;
|
|
162
|
+
right: 0px;
|
|
163
|
+
top: 0px;
|
|
166
164
|
}
|
|
167
165
|
|
|
168
166
|
|