@progressive-development/pd-wizard 0.0.7 → 0.0.9
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 +2 -21
- package/package.json +3 -3
- package/src/PdSteps.js +297 -295
- package/src/PdWizard.js +340 -301
- package/test/pd-wizard.test.js +3 -1
package/src/PdWizard.js
CHANGED
|
@@ -1,319 +1,358 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c)
|
|
4
|
-
* This code may only be used under the BSD style license found at
|
|
5
|
-
* http://polymer.github.io/LICENSE.txt
|
|
6
|
-
* The complete set of authors may be found at
|
|
7
|
-
* http://polymer.github.io/AUTHORS.txt
|
|
8
|
-
* The complete set of contributors may be found at
|
|
9
|
-
* http://polymer.github.io/CONTRIBUTORS.txt
|
|
10
|
-
* Code distributed by Google as part of the polymer project is also
|
|
11
|
-
* subject to an additional IP rights grant found at
|
|
12
|
-
* http://polymer.github.io/PATENTS.txt
|
|
3
|
+
* Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
|
|
13
4
|
*/
|
|
14
5
|
|
|
15
|
-
import { LitElement, html, css
|
|
6
|
+
import { LitElement, html, css } from 'lit';
|
|
16
7
|
|
|
17
8
|
import '@progressive-development/pd-forms/PdButton.js';
|
|
18
9
|
import './PdSteps.js';
|
|
19
10
|
|
|
20
11
|
// TODO: dont get it running with attribute???
|
|
21
12
|
export const ticomiLogo = html`
|
|
22
|
-
<svg
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
<
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
13
|
+
<svg
|
|
14
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
15
|
+
viewBox="0 0 298.09 120.94"
|
|
16
|
+
class="logo"
|
|
17
|
+
>
|
|
18
|
+
<g id="Ebene_2" data-name="Ebene 2">
|
|
19
|
+
<!--g style="fill: var(--logo-fill-1,#15a1dc)"-->
|
|
20
|
+
<g id="Ebene_1-2" data-name="Ebene 1">
|
|
21
|
+
<path
|
|
22
|
+
d="M115.21,72.59c-2,0-3.5-1.46-3.5-4.68V48.68h7.2V44h-7.17l.12-9.64h-7l-3.49,9.6-5,.65v4.1h4.44V61.75c0,2.68-.07,4.52-.07,6.91,0,6.78,3.64,9.55,9.87,9.55,5,0,8.23-2,10.05-5.49l-1.68-1.65A6.16,6.16,0,0,1,115.21,72.59Z"
|
|
23
|
+
style="fill:#fff"
|
|
24
|
+
></path>
|
|
25
|
+
<path
|
|
26
|
+
d="M136.92,62.74V53.63l.21-10L136,42.92l-14.38,4.57v2.7l4.24.62c.14,2.75.21,4.88.21,8.66v3.27c0,2.89,0,7.08-.1,10.43l-3.69.8v3.2h18.22V74L137,73.26C137,69.89,136.92,65.66,136.92,62.74Z"
|
|
27
|
+
style="fill:#fff"
|
|
28
|
+
></path>
|
|
29
|
+
<ellipse
|
|
30
|
+
cx="131.35"
|
|
31
|
+
cy="32.37"
|
|
32
|
+
rx="5.82"
|
|
33
|
+
ry="5.47"
|
|
34
|
+
style="fill:#fff"
|
|
35
|
+
></ellipse>
|
|
36
|
+
<path
|
|
37
|
+
d="M163.55,46.46a10.9,10.9,0,0,1,1.29.08l.44,3.46c.33,4.84,2.56,6.51,5.27,6.51,2.47,0,3.89-1.12,4.63-3.58-.5-5.48-5.58-10-12.83-10-10.25,0-18.55,6.51-18.55,17.74,0,11.55,7.74,17.55,17.1,17.55,6.5,0,11.44-2.67,14.09-8.27l-2.39-2.11a9.87,9.87,0,0,1-7.73,3.82c-5.77,0-9.57-4.34-9.57-12.25C155.3,50.11,159.6,46.46,163.55,46.46Z"
|
|
38
|
+
style="fill:#fff"
|
|
39
|
+
></path>
|
|
40
|
+
<path
|
|
41
|
+
d="M196.07,42.92c-9.83,0-17.44,6.95-17.44,17.51s6.72,17.78,17.44,17.78,17.44-7.07,17.44-17.78S205.86,42.92,196.07,42.92Zm0,31.7c-3.88,0-5.81-4.24-5.81-14s1.93-14.07,5.81-14.07,5.81,4.32,5.81,14.07S199.92,74.62,196.07,74.62Z"
|
|
42
|
+
style="fill:#fff"
|
|
43
|
+
></path>
|
|
44
|
+
<path
|
|
45
|
+
d="M272.87,62.74V55.07c0-8.16-3.08-12.15-10-12.15-3.92,0-7.26,1.47-11.09,6.12-1.35-4.09-4.39-6.12-9.07-6.12-4.13,0-7.47,1.94-10.76,5.8l-.41-5.06-1.18-.74L216.8,47.49v2.7l4.2.62c.19,2.75.21,4.18.21,8v4c0,2.89,0,7.07-.1,10.43l-3.7.8v3.2h18.07V74l-3.23-.69c-.06-3.37-.1-7.62-.1-10.54V52.07a9.42,9.42,0,0,1,5.68-2.5c3,0,4,1.76,4,6.56v6.61c0,3,0,7.1-.09,10.43l-3.56.8v3.2h17.73V74l-3.23-.7c-.07-3.34-.1-7.52-.1-10.53v-8a22.71,22.71,0,0,0-.15-2.69,9.14,9.14,0,0,1,5.8-2.48c2.82,0,3.91,1.36,3.91,6.52v6.65c0,3,0,7.11-.09,10.44l-3.32.79v3.2H276.4V74L273,73.24C272.9,69.91,272.87,65.74,272.87,62.74Z"
|
|
46
|
+
style="fill:#fff"
|
|
47
|
+
></path>
|
|
48
|
+
<ellipse
|
|
49
|
+
cx="288.99"
|
|
50
|
+
cy="32.37"
|
|
51
|
+
rx="5.82"
|
|
52
|
+
ry="5.47"
|
|
53
|
+
style="fill:#fff"
|
|
54
|
+
></ellipse>
|
|
55
|
+
<path
|
|
56
|
+
d="M294.66,73.26c-.06-3.37-.09-7.6-.09-10.52V53.63l.2-10-1.18-.74-14.38,4.57v2.7l4.24.62c.14,2.75.21,4.88.21,8.66v3.27c0,2.89,0,7.08-.1,10.43l-3.69.8v3.2h18.22V74Z"
|
|
57
|
+
style="fill:#fff"
|
|
58
|
+
></path>
|
|
59
|
+
<path
|
|
60
|
+
d="M100.27,113.34V97.1H96.33V95.29l4-.22.29-7.31h2v7.31h7.32v2H102.6v16.42c0,3.22.81,5.4,4.29,5.4a9.14,9.14,0,0,0,3.17-.8l.61,1.88a14.75,14.75,0,0,1-4.13.94C101.69,120.94,100.27,117.87,100.27,113.34Zm17-5.6c0-8.24,5.36-13.3,11-13.3,6,0,9.67,4.25,9.67,11.68a10.92,10.92,0,0,1-.13,1.89H119.71c.09,6.37,3.82,10.93,9.51,10.93A11.4,11.4,0,0,0,136,116.7l1,1.76a13.84,13.84,0,0,1-8,2.48C122.55,120.94,117.32,116,117.32,107.74Zm18.49-1.64c0-6.45-2.92-9.66-7.46-9.66-4.26,0-8.12,3.62-8.65,9.66Zm10.84,1.64c0-8.44,5.4-13.3,11.54-13.3a10.35,10.35,0,0,1,7.39,3.11l-1.37,1.62a8.57,8.57,0,0,0-6-2.68c-5.16,0-9.15,4.6-9.15,11.25s3.63,11.15,9.12,11.15A10,10,0,0,0,165,116l1.2,1.63a12,12,0,0,1-8.06,3.33C151.59,120.94,146.65,116.09,146.65,107.74Zm29.67-25.25h2.32v11l0,5.56c2.64-2.62,5.26-4.59,8.74-4.59,5.21,0,7.63,3.16,7.63,9.68v16.19h-2.32V104.43c0-5.36-1.69-7.9-5.75-7.9-3,0-5.19,1.59-8.26,4.74v19h-2.32ZM208,95.07h2l.25,3.91h.12c2.57-2.57,5.2-4.54,8.68-4.54,5.22,0,7.64,3.16,7.64,9.68v16.19h-2.32V104.43c0-5.36-1.7-7.9-5.76-7.9-3,0-5.18,1.59-8.25,4.74v19H208Zm31-8.16a2.12,2.12,0,0,1,4.23,0,2.12,2.12,0,0,1-4.23,0Zm.91,8.16h2.32v25.24h-2.32Zm13.85,12.67c0-8.44,5.4-13.3,11.54-13.3a10.35,10.35,0,0,1,7.39,3.11l-1.37,1.62a8.57,8.57,0,0,0-6-2.68c-5.16,0-9.15,4.6-9.15,11.25s3.63,11.15,9.12,11.15a10,10,0,0,0,6.76-2.91l1.2,1.63a12,12,0,0,1-8.06,3.33C258.71,120.94,253.77,116.09,253.77,107.74Zm26.53,9.71,1.34-1.69a11.7,11.7,0,0,0,8,3.2c4,0,6-2.33,6-5,0-3.16-3.27-4.55-6.18-5.6-3.81-1.35-8-2.9-8-7.22,0-3.63,2.88-6.71,8.13-6.71a11.89,11.89,0,0,1,7.22,2.61l-1.25,1.68a9.6,9.6,0,0,0-6-2.31c-3.94,0-5.72,2.27-5.72,4.6,0,2.88,3,4,6,5.11,3.91,1.49,8.24,2.78,8.24,7.7,0,3.8-3,7.11-8.51,7.11A14.39,14.39,0,0,1,280.3,117.45Z"
|
|
61
|
+
style="fill:#fff"
|
|
62
|
+
></path>
|
|
63
|
+
<path
|
|
64
|
+
d="M74,70.68C74,27.21,29.57,0,29.57,0a121.75,121.75,0,0,1-9,30.61C13.35,46.77,0,57.83,0,76.72c0,24.43,17.1,44.22,37.18,44.22S74,98.27,74,70.68Z"
|
|
65
|
+
style="fill:#db3a34"
|
|
66
|
+
></path>
|
|
67
|
+
<path
|
|
68
|
+
d="M67.14,78.6C67.14,42,31,19.07,31,19.07a105.49,105.49,0,0,1-7.34,25.78C17.74,58.46,6.86,67.78,6.86,83.7c0,20.57,13.93,37.24,30.29,37.24S67.14,101.84,67.14,78.6Z"
|
|
69
|
+
style="fill:#f7931e"
|
|
70
|
+
></path>
|
|
71
|
+
<path
|
|
72
|
+
d="M57.92,88.46c0-28.09-25.12-45.67-25.12-45.67a87.16,87.16,0,0,1-5.1,19.78C23.63,73,16.08,80.16,16.08,92.37c0,15.78,9.67,28.57,21,28.57S57.92,106.29,57.92,88.46Z"
|
|
73
|
+
style="fill:#ffc857"
|
|
74
|
+
></path>
|
|
75
|
+
<path
|
|
76
|
+
d="M47.44,104.74c0-14-12.53-22.77-12.53-22.77a43.35,43.35,0,0,1-2.55,9.86c-2,5.21-5.79,8.77-5.79,14.86,0,7.87,4.82,14.25,10.48,14.25S47.44,113.64,47.44,104.74Z"
|
|
77
|
+
style="fill:#fff"
|
|
78
|
+
></path>
|
|
79
|
+
</g>
|
|
39
80
|
</g>
|
|
40
|
-
</
|
|
41
|
-
</svg>
|
|
81
|
+
</svg>
|
|
42
82
|
`;
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
83
|
+
|
|
84
|
+
/**
|
|
85
|
+
* An example element.
|
|
86
|
+
*
|
|
87
|
+
* @slot - This element has a slot
|
|
88
|
+
* @csspart button - The button
|
|
89
|
+
*/
|
|
90
|
+
export class PdWizard extends LitElement {
|
|
91
|
+
/**
|
|
92
|
+
* Fired when next step clicked
|
|
93
|
+
* @event next-step
|
|
94
|
+
*/
|
|
95
|
+
|
|
96
|
+
/**
|
|
97
|
+
* Fired when previous step clicked
|
|
98
|
+
* @event previous-step
|
|
99
|
+
*/
|
|
100
|
+
|
|
101
|
+
/**
|
|
102
|
+
* Fired when wizard submited
|
|
103
|
+
* @event submit-wizard
|
|
104
|
+
*/
|
|
105
|
+
/**
|
|
106
|
+
* Fired when wizard submited
|
|
107
|
+
* @event close-wizard
|
|
108
|
+
*/
|
|
109
|
+
|
|
110
|
+
static get styles() {
|
|
111
|
+
return css`
|
|
112
|
+
:host {
|
|
113
|
+
--my-font: var(--app-font, Oswald);
|
|
114
|
+
|
|
115
|
+
--my-header-background-color: var(--squi-test, #084c61);
|
|
116
|
+
--my-header-text-color: var(--squi-test, white);
|
|
117
|
+
|
|
118
|
+
--my-footer-background-color: var(--squi-test, #fefefe);
|
|
119
|
+
|
|
120
|
+
display: block;
|
|
121
|
+
/*min-height: 100%;*/
|
|
122
|
+
height: 100%;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
/* Layout Grid for the Wizard Component
|
|
86
126
|
Wird hier für die "Text-Bildschirmgröße" verwendet, umstellen/gleichziehen => verschiedene Implementierungen, die Flex Variante (ticomi-web) scheint am schlankesten...
|
|
87
127
|
*/
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
128
|
+
.layout-container {
|
|
129
|
+
/*min-height: 100%;*/
|
|
130
|
+
height: 100%;
|
|
131
|
+
display: grid;
|
|
132
|
+
grid-template-columns: minmax(10px, auto) minmax(300px, 1000px) minmax(
|
|
133
|
+
5px,
|
|
134
|
+
auto
|
|
135
|
+
);
|
|
136
|
+
/*grid-template-rows: auto minmax(30em, 1fr) 4.166rem; /* ToDo wie 100% hoch????* für content, damit footer unten ist?*/
|
|
137
|
+
gap: 1px;
|
|
138
|
+
grid-template-areas:
|
|
139
|
+
'header header header'
|
|
140
|
+
'. content .'
|
|
141
|
+
'. footer .';
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
/* Grid Area positions for layout container above */
|
|
145
|
+
.wiz-header {
|
|
146
|
+
grid-area: header;
|
|
147
|
+
}
|
|
148
|
+
.wiz-content {
|
|
149
|
+
grid-area: content;
|
|
150
|
+
margin-top: 20px; /* ToDo: Steps sind verschoben, daher hier mehr*/
|
|
151
|
+
/*min-height: 100%;*/
|
|
152
|
+
height: 100%;
|
|
153
|
+
max-width: 1200px;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.wiz-buttons {
|
|
157
|
+
grid-area: footer;
|
|
158
|
+
display: flex;
|
|
159
|
+
/*padding-left: 50px;
|
|
120
160
|
padding-right: 50px;*/
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
.close:hover,
|
|
163
|
-
.close:focus {
|
|
164
|
-
color: rgb(247, 211, 8);
|
|
165
|
-
text-decoration: none;
|
|
166
|
-
cursor: pointer;
|
|
167
|
-
}
|
|
168
|
-
|
|
169
|
-
/* Size Elements for small width */
|
|
170
|
-
@media (max-width: 550px) {
|
|
171
|
-
.wiz-title {
|
|
172
|
-
height: 60px;
|
|
173
|
-
line-height: 60px;
|
|
174
|
-
}
|
|
175
|
-
|
|
176
|
-
.wiz-breadcrumbs {
|
|
177
|
-
}
|
|
178
|
-
|
|
179
|
-
.title {
|
|
180
|
-
font-size: 1.5em;
|
|
181
|
-
}
|
|
182
|
-
|
|
183
|
-
.logo {
|
|
184
|
-
max-width: 6rem;
|
|
185
|
-
width: 6rem; /* wird sonst im Chrome nicht angezeigt*/
|
|
186
|
-
}
|
|
187
|
-
|
|
188
|
-
.close {
|
|
189
|
-
font-size: 1.5em;
|
|
190
|
-
right: 5px;
|
|
191
|
-
}
|
|
192
|
-
}
|
|
193
|
-
|
|
194
|
-
/* Size Elements for small width */
|
|
195
|
-
@media (max-width: 380px) {
|
|
196
|
-
.wiz-title {
|
|
197
|
-
text-align: right;
|
|
198
|
-
padding-right: 20px;
|
|
199
|
-
}
|
|
200
|
-
|
|
201
|
-
.title {
|
|
202
|
-
font-size: 1.2em;
|
|
203
|
-
}
|
|
204
|
-
}
|
|
205
|
-
`;
|
|
206
|
-
}
|
|
207
|
-
|
|
208
|
-
static get properties() {
|
|
209
|
-
return {
|
|
210
|
-
currentNumber: { type: Number },
|
|
211
|
-
wizardSteps: { Array },
|
|
212
|
-
logo: { type: Object }
|
|
213
|
-
};
|
|
214
|
-
}
|
|
215
|
-
|
|
216
|
-
constructor() {
|
|
217
|
-
super();
|
|
218
|
-
this.currentNumber = -99;
|
|
219
|
-
this.wizardSteps = [];
|
|
220
|
-
this.logo = {};
|
|
221
|
-
}
|
|
222
|
-
|
|
223
|
-
render() {
|
|
224
|
-
if (this.wizardSteps && this.wizardSteps.length > 0) {
|
|
225
|
-
return html`
|
|
226
|
-
<div class="layout-container">
|
|
227
|
-
<div class="wiz-header">
|
|
228
|
-
<div class="wiz-title">
|
|
161
|
+
justify-content: space-between;
|
|
162
|
+
background-color: var(--my-footer-background-color);
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.wiz-breadcrumbs {
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
.wiz-title {
|
|
169
|
+
text-align: center;
|
|
170
|
+
background-color: var(--my-header-background-color);
|
|
171
|
+
height: 80px;
|
|
172
|
+
line-height: 80px;
|
|
173
|
+
padding-left: 80px;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.title {
|
|
177
|
+
font-family: var(--my-font);
|
|
178
|
+
font-size: 1.8em;
|
|
179
|
+
font-weight: bolder;
|
|
180
|
+
color: var(--my-header-text-color);
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
.logo {
|
|
184
|
+
max-width: 8rem;
|
|
185
|
+
width: 8rem; /* wird sonst im Chrome nicht angezeigt*/
|
|
186
|
+
position: absolute;
|
|
187
|
+
left: 20px;
|
|
188
|
+
top: 10px;
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
/* The Close Button */
|
|
192
|
+
.close {
|
|
193
|
+
position: absolute;
|
|
194
|
+
color: #fefefe;
|
|
195
|
+
font-size: 2.5em;
|
|
196
|
+
font-weight: bold;
|
|
197
|
+
line-height: 1em;
|
|
198
|
+
top: 5px;
|
|
199
|
+
right: 10px;
|
|
200
|
+
}
|
|
229
201
|
|
|
202
|
+
.close:hover,
|
|
203
|
+
.close:focus {
|
|
204
|
+
color: rgb(247, 211, 8);
|
|
205
|
+
text-decoration: none;
|
|
206
|
+
cursor: pointer;
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
/* Size Elements for small width */
|
|
210
|
+
@media (max-width: 550px) {
|
|
211
|
+
.wiz-title {
|
|
212
|
+
height: 60px;
|
|
213
|
+
line-height: 60px;
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
.wiz-breadcrumbs {
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
.title {
|
|
220
|
+
font-size: 1.5em;
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
.logo {
|
|
224
|
+
max-width: 6rem;
|
|
225
|
+
width: 6rem; /* wird sonst im Chrome nicht angezeigt*/
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
.close {
|
|
229
|
+
font-size: 1.5em;
|
|
230
|
+
right: 5px;
|
|
231
|
+
}
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
/* Size Elements for small width */
|
|
235
|
+
@media (max-width: 380px) {
|
|
236
|
+
.wiz-title {
|
|
237
|
+
text-align: right;
|
|
238
|
+
padding-right: 20px;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
.title {
|
|
242
|
+
font-size: 1.2em;
|
|
243
|
+
}
|
|
244
|
+
}
|
|
245
|
+
`;
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
static get properties() {
|
|
249
|
+
return {
|
|
250
|
+
currentNumber: { type: Number },
|
|
251
|
+
wizardSteps: { Array },
|
|
252
|
+
logo: { type: Object },
|
|
253
|
+
};
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
constructor() {
|
|
257
|
+
super();
|
|
258
|
+
this.currentNumber = -99;
|
|
259
|
+
this.wizardSteps = [];
|
|
260
|
+
this.logo = {};
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
render() {
|
|
264
|
+
if (this.wizardSteps && this.wizardSteps.length > 0) {
|
|
265
|
+
return html`
|
|
266
|
+
<div class="layout-container">
|
|
267
|
+
<div class="wiz-header">
|
|
268
|
+
<div class="wiz-title">
|
|
230
269
|
${ticomiLogo}
|
|
231
270
|
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
271
|
+
<span class="title"
|
|
272
|
+
>${this.currentNumber >= 1 && this.wizardSteps
|
|
273
|
+
? this.wizardSteps[this.currentNumber - 1].title
|
|
274
|
+
: 'No-Title'}</span
|
|
275
|
+
>
|
|
276
|
+
<span
|
|
277
|
+
class="close"
|
|
278
|
+
@click="${this._closeWizard}"
|
|
279
|
+
@keypress="${this._closeWizard}"
|
|
280
|
+
>×</span
|
|
281
|
+
>
|
|
282
|
+
</div>
|
|
283
|
+
<div class="wiz-breadcrumbs">
|
|
284
|
+
<pd-steps
|
|
285
|
+
.steps="${this.wizardSteps}"
|
|
286
|
+
currentStepNr="${this.currentNumber}"
|
|
287
|
+
></pd-steps>
|
|
288
|
+
</div>
|
|
289
|
+
</div>
|
|
290
|
+
|
|
291
|
+
<div class="wiz-content">
|
|
292
|
+
<div style="${this.currentNumber === 1 ? '' : 'display:none'}">
|
|
293
|
+
<slot name="step-1"></slot>
|
|
294
|
+
</div>
|
|
295
|
+
<div style="${this.currentNumber === 2 ? '' : 'display:none'}">
|
|
296
|
+
<slot name="step-2"></slot>
|
|
297
|
+
</div>
|
|
298
|
+
<div style="${this.currentNumber === 3 ? '' : 'display:none'}">
|
|
299
|
+
<slot name="step-3"></slot>
|
|
300
|
+
</div>
|
|
301
|
+
<div style="${this.currentNumber === 4 ? '' : 'display:none'}">
|
|
302
|
+
<slot name="step-4"></slot>
|
|
303
|
+
</div>
|
|
304
|
+
</div>
|
|
305
|
+
|
|
306
|
+
<div class="wiz-buttons">
|
|
307
|
+
${this.currentNumber >= 1 && this.wizardSteps
|
|
308
|
+
? html`
|
|
309
|
+
<squi-button
|
|
310
|
+
@click="${this._previousStep}"
|
|
311
|
+
text="Terug"
|
|
312
|
+
style="visibility: ${this.currentNumber === 1
|
|
313
|
+
? 'hidden'
|
|
314
|
+
: 'visible'};"
|
|
315
|
+
></squi-button>
|
|
316
|
+
${this.currentNumber !== this.wizardSteps.length &&
|
|
317
|
+
this.wizardSteps[this.currentNumber - 1].next !== false
|
|
318
|
+
? html`<squi-button
|
|
319
|
+
@click="${this._nextStep}"
|
|
320
|
+
text="Volgende"
|
|
321
|
+
></squi-button>`
|
|
322
|
+
: ''}
|
|
323
|
+
${this.currentNumber === this.wizardSteps.length
|
|
324
|
+
? html`<squi-button
|
|
325
|
+
primary
|
|
326
|
+
@click="${this._submit}"
|
|
327
|
+
text="Order"
|
|
328
|
+
></squi-button>`
|
|
329
|
+
: ''}
|
|
330
|
+
`
|
|
331
|
+
: ''}
|
|
332
|
+
</div>
|
|
333
|
+
</div>
|
|
334
|
+
`;
|
|
335
|
+
}
|
|
336
|
+
return '';
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
_previousStep() {
|
|
340
|
+
this.dispatchEvent(new CustomEvent('previous-step'));
|
|
341
|
+
}
|
|
342
|
+
|
|
343
|
+
_nextStep() {
|
|
344
|
+
this.dispatchEvent(new CustomEvent('next-step'));
|
|
345
|
+
}
|
|
346
|
+
|
|
347
|
+
_submit() {
|
|
348
|
+
this.dispatchEvent(new CustomEvent('submit-wizard'));
|
|
349
|
+
}
|
|
350
|
+
|
|
351
|
+
_closeWizard() {
|
|
352
|
+
// eslint-disable-next-line no-restricted-globals
|
|
353
|
+
const r = confirm('Data will be lost, abort current order?');
|
|
354
|
+
if (r === true) {
|
|
355
|
+
this.dispatchEvent(new CustomEvent('close-wizard'));
|
|
356
|
+
}
|
|
357
|
+
}
|
|
358
|
+
}
|