@progressive-development/pd-wizard 0.1.58 → 0.1.60
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/.storybook/main.js +12 -2
- package/.storybook/preview-head.html +35 -0
- package/.storybook/preview.js +14 -0
- package/package.json +23 -14
- package/src/PdSteps.js +2 -3
- package/src/PdWizard.js +163 -164
- package/{stories → src/stories}/index.stories.js +1 -1
- package/{stories → src/stories}/steps.stories.js +1 -1
- package/src/stories/wizard.stories.js +171 -0
- package/.storybook/server.mjs +0 -8
- package/stories/wizard.stories.js +0 -46
package/.storybook/main.js
CHANGED
|
@@ -1,3 +1,13 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
/** @type { import('@storybook/web-components-vite').StorybookConfig } */
|
|
2
|
+
const config = {
|
|
3
|
+
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
|
|
4
|
+
addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
|
|
5
|
+
framework: {
|
|
6
|
+
name: '@storybook/web-components-vite',
|
|
7
|
+
options: {},
|
|
8
|
+
},
|
|
9
|
+
docs: {
|
|
10
|
+
autodocs: 'tag',
|
|
11
|
+
},
|
|
3
12
|
};
|
|
13
|
+
export default config;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
|
|
2
|
+
<!-- .storybook/preview-head.html -->
|
|
3
|
+
|
|
4
|
+
<!-- Pull in static files served from your Static directory or the internet -->
|
|
5
|
+
<!-- Example: `main.js|ts` is configured with staticDirs: ['../public'] and your font is located in the `fonts` directory inside your `public` directory -->
|
|
6
|
+
<link rel="preconnect" href="https://fonts.gstatic.com">
|
|
7
|
+
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400&family=Oswald:wght@700&display=swap" rel="stylesheet">
|
|
8
|
+
|
|
9
|
+
<script>
|
|
10
|
+
// Redux assumes `process.env.NODE_ENV` exists in the ES module build.
|
|
11
|
+
// https://github.com/reactjs/redux/issues/2907
|
|
12
|
+
window.process = { env: { NODE_ENV: 'dev' } };
|
|
13
|
+
</script>
|
|
14
|
+
|
|
15
|
+
<style>
|
|
16
|
+
|
|
17
|
+
html,
|
|
18
|
+
body {
|
|
19
|
+
padding: 0;
|
|
20
|
+
margin: 0;
|
|
21
|
+
min-height: 100%;
|
|
22
|
+
height: 100%; /* !!! works only with both, height/min-height */
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
/* storybook internal, sets root to 100% height => only then wizard flex grow works here in story book #root, in older version*/
|
|
26
|
+
#root-inner, #storybook-root {
|
|
27
|
+
height: 100%;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
/* storybook internal, sets padding to 0 */
|
|
31
|
+
.sb-show-main.sb-main-padded {
|
|
32
|
+
padding: 0;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
</style>
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/** @type { import('@storybook/web-components').Preview } */
|
|
2
|
+
const preview = {
|
|
3
|
+
parameters: {
|
|
4
|
+
actions: { argTypesRegex: '^on[A-Z].*' },
|
|
5
|
+
controls: {
|
|
6
|
+
matchers: {
|
|
7
|
+
color: /(background|color)$/i,
|
|
8
|
+
date: /Date$/i,
|
|
9
|
+
},
|
|
10
|
+
},
|
|
11
|
+
},
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
export default preview;
|
package/package.json
CHANGED
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
"order",
|
|
15
15
|
"steps"
|
|
16
16
|
],
|
|
17
|
-
"version": "0.1.
|
|
17
|
+
"version": "0.1.60",
|
|
18
18
|
"main": "index.js",
|
|
19
19
|
"module": "index.js",
|
|
20
20
|
"scripts": {
|
|
@@ -24,37 +24,46 @@
|
|
|
24
24
|
"format": "eslint --ext .js,.html . --fix --ignore-path .gitignore && prettier \"**/*.js\" --write --ignore-path .gitignore",
|
|
25
25
|
"test": "web-test-runner --coverage",
|
|
26
26
|
"test:watch": "web-test-runner --watch",
|
|
27
|
-
"storybook": "npm run analyze -- --exclude dist && web-dev-server -c .storybook/server.mjs",
|
|
28
|
-
"storybook:build": "npm run analyze -- --exclude dist && build-storybook",
|
|
29
27
|
"localizeExtract": "lit-localize extract",
|
|
30
|
-
"localizeBuild": "lit-localize build"
|
|
28
|
+
"localizeBuild": "lit-localize build",
|
|
29
|
+
"storybook": "storybook dev -p 6006",
|
|
30
|
+
"build-storybook": "storybook build"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@lit/localize": "^0.11.
|
|
33
|
+
"@lit/localize": "^0.11.4",
|
|
34
34
|
"@progressive-development/pd-forms": "^0.2.8",
|
|
35
35
|
"@progressive-development/pd-icon": "^0.1.20",
|
|
36
36
|
"@progressive-development/pd-shared-styles": "0.1.1",
|
|
37
|
-
"lit": "^2.
|
|
37
|
+
"lit": "^2.8.0"
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|
|
40
40
|
"@custom-elements-manifest/analyzer": "^0.4.17",
|
|
41
|
-
"@lit/localize-tools": "^0.6.
|
|
41
|
+
"@lit/localize-tools": "^0.6.10",
|
|
42
42
|
"@open-wc/eslint-config": "^4.3.0",
|
|
43
|
-
"@open-wc/testing": "
|
|
44
|
-
"@
|
|
45
|
-
"@
|
|
46
|
-
"@
|
|
43
|
+
"@open-wc/testing": "^3.2.2",
|
|
44
|
+
"@storybook/addon-essentials": "^7.6.4",
|
|
45
|
+
"@storybook/addon-links": "^7.6.4",
|
|
46
|
+
"@storybook/blocks": "^7.6.4",
|
|
47
|
+
"@storybook/web-components": "^7.6.4",
|
|
48
|
+
"@storybook/web-components-vite": "^7.6.4",
|
|
49
|
+
"@web/dev-server": "^0.1.38",
|
|
50
|
+
"@web/test-runner": "^0.13.31",
|
|
47
51
|
"eslint": "^7.32.0",
|
|
48
|
-
"eslint-config-prettier": "^8.
|
|
52
|
+
"eslint-config-prettier": "^8.10.0",
|
|
53
|
+
"eslint-plugin-storybook": "^0.6.15",
|
|
49
54
|
"husky": "^4.3.8",
|
|
50
55
|
"lint-staged": "^10.5.4",
|
|
51
|
-
"prettier": "^2.
|
|
56
|
+
"prettier": "^2.8.8",
|
|
57
|
+
"react": "^18.2.0",
|
|
58
|
+
"react-dom": "^18.2.0",
|
|
59
|
+
"storybook": "^7.6.4"
|
|
52
60
|
},
|
|
53
61
|
"customElements": "custom-elements.json",
|
|
54
62
|
"eslintConfig": {
|
|
55
63
|
"extends": [
|
|
56
64
|
"@open-wc",
|
|
57
|
-
"prettier"
|
|
65
|
+
"prettier",
|
|
66
|
+
"plugin:storybook/recommended"
|
|
58
67
|
]
|
|
59
68
|
},
|
|
60
69
|
"prettier": {
|
package/src/PdSteps.js
CHANGED
|
@@ -100,7 +100,7 @@ class PdSteps extends LitElement {
|
|
|
100
100
|
z-index: 51;
|
|
101
101
|
width: 100%;
|
|
102
102
|
|
|
103
|
-
padding-top: 10px;
|
|
103
|
+
padding-top: var(--pd-steps-padding-top, 10px);
|
|
104
104
|
}
|
|
105
105
|
|
|
106
106
|
.step {
|
|
@@ -220,9 +220,8 @@ class PdSteps extends LitElement {
|
|
|
220
220
|
background-color: var(--my-hr-bg-color);
|
|
221
221
|
height: 3px;
|
|
222
222
|
position: relative;
|
|
223
|
-
top:
|
|
223
|
+
top: calc(33px + var(--pd-steps-padding-top, 10px));
|
|
224
224
|
z-index: 50;
|
|
225
|
-
width: 100%;
|
|
226
225
|
}
|
|
227
226
|
|
|
228
227
|
/* Size Elements for small width */
|
package/src/PdWizard.js
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
import { LitElement, html, css } from 'lit';
|
|
8
8
|
import { msg, updateWhenLocaleChanges } from '@lit/localize';
|
|
9
9
|
|
|
10
|
-
import { ICON_CLOSE as CLOSEICON } from '@progressive-development/pd-icon/src/PdIcon.js';
|
|
10
|
+
import { ICON_CLOSE as CLOSEICON, ICON_ARROW_BACK, ICON_CAMERA, ICON_NEXT, ICON_PREVIOUS, ICON_XCLOSE } from '@progressive-development/pd-icon/src/PdIcon.js';
|
|
11
11
|
|
|
12
12
|
import '@progressive-development/pd-icon/pd-icon.js';
|
|
13
13
|
import '@progressive-development/pd-forms/pd-button.js';
|
|
@@ -53,17 +53,22 @@ export class PdWizard extends LitElement {
|
|
|
53
53
|
--my-header-font-color: var(--pd-wizard-header-font-col, var(--pd-default-bg-col));
|
|
54
54
|
--my-header-bg-col: var(--pd-wizard-header-bg-col, var(--pd-default-col));
|
|
55
55
|
|
|
56
|
-
display:
|
|
57
|
-
|
|
56
|
+
display: flex;
|
|
57
|
+
flex-direction: column;
|
|
58
58
|
height: 100%;
|
|
59
59
|
}
|
|
60
60
|
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
61
|
+
.wiz-header {
|
|
62
|
+
flex-grow: 0;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.wiz-title {
|
|
66
|
+
position: relative;
|
|
67
|
+
text-align: center;
|
|
68
|
+
background-color: var(--my-header-bg-col);
|
|
69
|
+
height: var(---my-height);
|
|
70
|
+
padding-left: var(--pd-wizard-title-padding-left, 0);
|
|
71
|
+
color: var(--my-header-font-color);
|
|
67
72
|
}
|
|
68
73
|
|
|
69
74
|
:host(.top-rounded) .wiz-title {
|
|
@@ -71,141 +76,107 @@ export class PdWizard extends LitElement {
|
|
|
71
76
|
border-top-right-radius: var(--pd-wizard-top-borderradius, 5px);
|
|
72
77
|
}
|
|
73
78
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
79
|
+
.title {
|
|
80
|
+
font-family: var(--pd-default-font-title-family);
|
|
81
|
+
font-size: var(--pd-wizard-header-font-size, 2em);
|
|
82
|
+
font-weight: bolder;
|
|
83
|
+
line-height: var(--my-height);
|
|
77
84
|
}
|
|
78
85
|
|
|
79
|
-
/*
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
);
|
|
92
|
-
grid-template-rows: auto 1fr auto;
|
|
93
|
-
/*grid-template-rows: auto minmax(30em, 1fr) 4.166rem; /* ToDo wie 100% hoch????* für content, damit footer unten ist?*/
|
|
94
|
-
gap: 0px;
|
|
95
|
-
grid-template-areas:
|
|
96
|
-
'header header header'
|
|
97
|
-
'content content content'
|
|
98
|
-
'footer footer footer';
|
|
86
|
+
/* The Close Icon */
|
|
87
|
+
.close {
|
|
88
|
+
position: absolute;
|
|
89
|
+
top: 6px;
|
|
90
|
+
right: 6px;
|
|
91
|
+
|
|
92
|
+
cursor: pointer;
|
|
93
|
+
|
|
94
|
+
--pd-icon-col: var(--my-header-bg-col);
|
|
95
|
+
--pd-icon-stroke-col: var(--my-header-font-color);
|
|
96
|
+
--pd-icon-bg-col: var(--my-header-bg-col);
|
|
97
|
+
--pd-icon-bg-col-hover: var(--my-header-bg-col);
|
|
99
98
|
}
|
|
100
99
|
|
|
101
|
-
|
|
102
|
-
.
|
|
103
|
-
|
|
100
|
+
.close:hover,
|
|
101
|
+
.close:focus {
|
|
102
|
+
color: var(--pd-default-hover-col);
|
|
103
|
+
--pd-icon-stroke-col: var(--pd-default-hover-col);
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.wiz-breadcrumbs {
|
|
107
|
+
--pd-steps-bg-col: var(--pd-wizard-steps-bg-col, var(--pd-default-light-col));
|
|
104
108
|
}
|
|
105
|
-
|
|
106
|
-
|
|
109
|
+
|
|
110
|
+
.wiz-content {
|
|
107
111
|
display: flex;
|
|
108
|
-
justify-content: center;
|
|
109
|
-
|
|
112
|
+
justify-content: var(--pd-wizard-justify-content, center);
|
|
113
|
+
flex-grow: 1;
|
|
114
|
+
|
|
110
115
|
background-color: var(--pd-wizard-content-bg-col, var(--pd-default-bg-col));
|
|
116
|
+
padding: var(--pd-wizard-content-padding, 1em);
|
|
117
|
+
overflow-y: var(--pd-wizard-content-scroll, auto);
|
|
111
118
|
}
|
|
112
119
|
|
|
113
|
-
/* Hier festlegung ob das innere Element voll ausfüllen soll (width: 100%), oder aber
|
|
114
|
-
zentral als inneres Element innerhalb des content Elements angezeigt werden soll => andere Angabe, vorher war max-width nur angegeben (ticomi) */
|
|
115
120
|
.wiz-content-inner {
|
|
116
|
-
min-height: 200px;
|
|
117
121
|
background-color: var(--pd-wizard-content-inner-bg-col, var(--pd-default-bg-col));
|
|
118
|
-
max-width:
|
|
119
|
-
min-width: 850px;
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
:host(.full-inner) .wiz-content-inner {
|
|
123
|
-
width: 100%;
|
|
124
|
-
max-width: 100%;
|
|
122
|
+
max-width: var(--pd-wizard-content-max-width, 1024px);
|
|
125
123
|
}
|
|
126
124
|
|
|
127
125
|
.wiz-buttons {
|
|
128
|
-
grid-area: footer;
|
|
129
126
|
display: flex;
|
|
130
|
-
/*padding-left: 50px;
|
|
131
|
-
padding-right: 50px;*/
|
|
132
127
|
justify-content: var(--pd-wizard-justify-buttons, space-around);
|
|
133
|
-
|
|
128
|
+
flex-grow: 0;
|
|
129
|
+
padding: 1em;
|
|
134
130
|
|
|
135
|
-
height: 80px;
|
|
136
|
-
/*background-color: var(--pd-wizard-footer-bg-col, red);*/
|
|
137
131
|
background: linear-gradient(to top,
|
|
138
132
|
var(--pd-wizard-buttons-bg-col1, var(--pd-default-light-col)) 0%,
|
|
139
133
|
var(--pd-wizard-buttons-bg-col2, var(--pd-default-disabled-light-col)) 100%);
|
|
140
134
|
}
|
|
141
135
|
|
|
142
|
-
.wiz-
|
|
143
|
-
|
|
136
|
+
:host(.bottom-rounded) .wiz-buttons {
|
|
137
|
+
border-bottom-left-radius: var(--pd-wizard-bottom-borderradius, 5px);
|
|
138
|
+
border-bottom-right-radius: var(--pd-wizard-bottom-borderradius, 5px);
|
|
144
139
|
}
|
|
145
140
|
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
141
|
+
/*
|
|
142
|
+
* CSS for panel wizard
|
|
143
|
+
*/
|
|
144
|
+
.wiz-panel-h {
|
|
145
|
+
padding: 0.5em 2.5em 0.5em 2.5em;
|
|
146
|
+
display: flex;
|
|
147
|
+
align-items: center;
|
|
148
|
+
justify-content: space-between;
|
|
153
149
|
}
|
|
154
150
|
|
|
155
|
-
.
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
151
|
+
.wiz-panel-h h1 {
|
|
152
|
+
color: var(--pd-default-col);
|
|
153
|
+
padding: 0;
|
|
154
|
+
margin: 0;
|
|
155
|
+
font-size: 1.6em;
|
|
160
156
|
}
|
|
161
157
|
|
|
162
|
-
|
|
163
|
-
.close {
|
|
164
|
-
position: absolute;
|
|
165
|
-
top: 6px;
|
|
166
|
-
right: 6px;
|
|
167
|
-
|
|
158
|
+
.header-icons {
|
|
168
159
|
display: flex;
|
|
169
160
|
align-items: center;
|
|
170
|
-
gap:
|
|
171
|
-
|
|
172
|
-
font-size: 0.8rem;
|
|
161
|
+
gap: 0.2em;
|
|
162
|
+
}
|
|
173
163
|
|
|
164
|
+
.header-icons pd-icon {
|
|
165
|
+
--pd-icon-stroke-col-active: var(--pd-default-col);
|
|
166
|
+
--pd-icon-col-active: var(--pd-default-light-col);
|
|
167
|
+
--pd-icon-stroke-col: var(--pd-default-col);
|
|
168
|
+
--pd-icon-col: var(--pd-default-light-col);
|
|
174
169
|
cursor: pointer;
|
|
175
|
-
|
|
176
|
-
--pd-icon-col: var(--my-header-bg-col);
|
|
177
|
-
--pd-icon-stroke-col: var(--my-header-font-color);
|
|
178
|
-
--pd-icon-bg-col: var(--my-header-bg-col);
|
|
179
|
-
--pd-icon-bg-col-hover: var(--my-header-bg-col);
|
|
180
170
|
}
|
|
181
171
|
|
|
182
|
-
.close
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
--pd-icon-stroke-col: var(--pd-default-hover-col);
|
|
172
|
+
.panel-close-icon {
|
|
173
|
+
--pd-icon-size: 3em;
|
|
174
|
+
padding-left: 1.8em;
|
|
186
175
|
}
|
|
187
176
|
|
|
188
|
-
@media (max-width: 1000px) {
|
|
189
|
-
.wiz-content-inner {
|
|
190
|
-
min-width: 95%;
|
|
191
|
-
}
|
|
192
|
-
}
|
|
193
177
|
|
|
194
178
|
/* Size Elements for small width */
|
|
195
179
|
@media (max-width: 700px) {
|
|
196
|
-
:host {
|
|
197
|
-
--my-height: 60px;
|
|
198
|
-
}
|
|
199
|
-
|
|
200
|
-
.wiz-title {
|
|
201
|
-
padding-left: 70px;
|
|
202
|
-
}
|
|
203
|
-
|
|
204
|
-
.title {
|
|
205
|
-
font-size: 1.2em;
|
|
206
|
-
line-height: 70px;
|
|
207
|
-
}
|
|
208
|
-
|
|
209
180
|
.close {
|
|
210
181
|
font-size: 0.7rem;
|
|
211
182
|
--pd-icon-size: 1.2rem;
|
|
@@ -222,6 +193,7 @@ export class PdWizard extends LitElement {
|
|
|
222
193
|
currentNumber: { type: Number },
|
|
223
194
|
wizardSteps: { Array },
|
|
224
195
|
logo: { type: Object },
|
|
196
|
+
panelWizard: { type: Boolean },
|
|
225
197
|
};
|
|
226
198
|
}
|
|
227
199
|
|
|
@@ -230,81 +202,108 @@ export class PdWizard extends LitElement {
|
|
|
230
202
|
updateWhenLocaleChanges(this);
|
|
231
203
|
this.currentNumber = -99;
|
|
232
204
|
this.wizardSteps = [];
|
|
205
|
+
this.panelWizard = false;
|
|
233
206
|
}
|
|
234
207
|
|
|
235
208
|
render() {
|
|
236
209
|
if (this.wizardSteps && this.wizardSteps.length > 0) {
|
|
237
|
-
return html`
|
|
238
|
-
|
|
239
|
-
|
|
210
|
+
return html`
|
|
211
|
+
|
|
212
|
+
<div class="wiz-header">
|
|
213
|
+
|
|
214
|
+
${this.panelWizard ? html`
|
|
215
|
+
<div class="wiz-panel-h">
|
|
216
|
+
<h1>${this.currentNumber >= 1 && this.wizardSteps
|
|
217
|
+
? this.wizardSteps[this.currentNumber - 1].title
|
|
218
|
+
: 'No-Title'}</h1>
|
|
219
|
+
<div class="header-icons">
|
|
220
|
+
<pd-icon icon="${ICON_ARROW_BACK}" ?disabled="${this.currentNumber === 1}"
|
|
221
|
+
title="Previous Step" activeIcon @click="${this._previousStep}"></pd-icon>
|
|
222
|
+
|
|
223
|
+
${this.currentNumber !== this.wizardSteps.length ? html`
|
|
224
|
+
<pd-icon style="transform: rotate(180deg);" icon="${ICON_ARROW_BACK}" ?disabled="${this.wizardSteps[this.currentNumber - 1].next === false}"
|
|
225
|
+
title="Next Step" activeIcon @click="${this._nextStep}"></pd-icon>
|
|
226
|
+
` : html`
|
|
227
|
+
<pd-icon icon="${ICON_CAMERA}"
|
|
228
|
+
title="Submit" activeIcon @click="${this._submit}"></pd-icon>
|
|
229
|
+
`}
|
|
230
|
+
|
|
231
|
+
<pd-icon class="panel-close-icon"
|
|
232
|
+
title="Close" activeIcon icon="${ICON_XCLOSE}" @click="${this._closeWizard}"></pd-icon>
|
|
233
|
+
</div>
|
|
234
|
+
</div>
|
|
235
|
+
` : html`
|
|
240
236
|
<div class="wiz-title">
|
|
241
237
|
<slot name="slotLogo"></slot>
|
|
242
238
|
<span class="title"
|
|
243
239
|
>${this.currentNumber >= 1 && this.wizardSteps
|
|
244
240
|
? this.wizardSteps[this.currentNumber - 1].title
|
|
245
241
|
: 'No-Title'}</span
|
|
246
|
-
>
|
|
247
|
-
<
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
<
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
></pd-steps>
|
|
257
|
-
</div>
|
|
242
|
+
>
|
|
243
|
+
<pd-icon class="close" icon="${CLOSEICON}" @click="${this._closeWizard}"></pd-icon>
|
|
244
|
+
</div>
|
|
245
|
+
`}
|
|
246
|
+
|
|
247
|
+
<div class="wiz-breadcrumbs">
|
|
248
|
+
<pd-steps
|
|
249
|
+
.steps="${this.wizardSteps}"
|
|
250
|
+
currentStepNr="${this.currentNumber}"
|
|
251
|
+
></pd-steps>
|
|
258
252
|
</div>
|
|
259
253
|
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
254
|
+
</div>
|
|
255
|
+
|
|
256
|
+
<div class="wiz-content">
|
|
257
|
+
|
|
258
|
+
<div class="wiz-content-inner">
|
|
259
|
+
<div style="${this.currentNumber === 1 ? '' : 'display:none'}">
|
|
260
|
+
<slot name="step-1"></slot>
|
|
261
|
+
</div>
|
|
262
|
+
<div style="${this.currentNumber === 2 ? '' : 'display:none'}">
|
|
263
|
+
<slot name="step-2"></slot>
|
|
264
|
+
</div>
|
|
265
|
+
<div style="${this.currentNumber === 3 ? '' : 'display:none'}">
|
|
266
|
+
<slot name="step-3"></slot>
|
|
267
|
+
</div>
|
|
268
|
+
<div style="${this.currentNumber === 4 ? '' : 'display:none'}">
|
|
269
|
+
<slot name="step-4"></slot>
|
|
270
|
+
</div>
|
|
271
|
+
<div style="${this.currentNumber === 5 ? '' : 'display:none'}">
|
|
272
|
+
<slot name="step-5"></slot>
|
|
277
273
|
</div>
|
|
278
274
|
</div>
|
|
279
275
|
|
|
280
|
-
<div class="wiz-buttons">
|
|
281
|
-
${this.currentNumber >= 1 && this.wizardSteps
|
|
282
|
-
? html`
|
|
283
|
-
<pd-button
|
|
284
|
-
@button-clicked="${this._previousStep}"
|
|
285
|
-
text="${msg('Zurück', {desc: '#pd.wizard.back#'})}"
|
|
286
|
-
style="visibility: ${this.currentNumber === 1
|
|
287
|
-
? 'hidden'
|
|
288
|
-
: 'visible'};"
|
|
289
|
-
></pd-button>
|
|
290
|
-
${this.currentNumber !== this.wizardSteps.length &&
|
|
291
|
-
this.wizardSteps[this.currentNumber - 1].next !== false
|
|
292
|
-
? html`<pd-button
|
|
293
|
-
@button-clicked="${this._nextStep}"
|
|
294
|
-
text="${msg('Weiter', {desc: '#pd.wizard.next#'})}"
|
|
295
|
-
></pd-button>`
|
|
296
|
-
: ''}
|
|
297
|
-
${this.currentNumber === this.wizardSteps.length
|
|
298
|
-
? html`<pd-button
|
|
299
|
-
primary
|
|
300
|
-
@button-clicked="${this._submit}"
|
|
301
|
-
text="${msg('Absenden', {desc: '#pd.wizard.submit#'})}"
|
|
302
|
-
></pd-button>`
|
|
303
|
-
: ''}
|
|
304
|
-
`
|
|
305
|
-
: ''}
|
|
306
|
-
</div>
|
|
307
276
|
</div>
|
|
277
|
+
|
|
278
|
+
${!this.panelWizard ? html`
|
|
279
|
+
<div class="wiz-buttons">
|
|
280
|
+
${this.currentNumber >= 1 && this.wizardSteps
|
|
281
|
+
? html`
|
|
282
|
+
<pd-button
|
|
283
|
+
@button-clicked="${this._previousStep}"
|
|
284
|
+
text="${msg('Zurück', {desc: '#pd.wizard.back#'})}"
|
|
285
|
+
style="visibility: ${this.currentNumber === 1
|
|
286
|
+
? 'hidden'
|
|
287
|
+
: 'visible'};"
|
|
288
|
+
></pd-button>
|
|
289
|
+
${this.currentNumber !== this.wizardSteps.length &&
|
|
290
|
+
this.wizardSteps[this.currentNumber - 1].next !== false
|
|
291
|
+
? html`<pd-button
|
|
292
|
+
@button-clicked="${this._nextStep}"
|
|
293
|
+
text="${msg('Weiter', {desc: '#pd.wizard.next#'})}"
|
|
294
|
+
></pd-button>`
|
|
295
|
+
: ''}
|
|
296
|
+
${this.currentNumber === this.wizardSteps.length
|
|
297
|
+
? html`<pd-button
|
|
298
|
+
primary
|
|
299
|
+
@button-clicked="${this._submit}"
|
|
300
|
+
text="${msg('Absenden', {desc: '#pd.wizard.submit#'})}"
|
|
301
|
+
></pd-button>`
|
|
302
|
+
: ''}
|
|
303
|
+
`
|
|
304
|
+
: ''}
|
|
305
|
+
</div>
|
|
306
|
+
` : ''}
|
|
308
307
|
`;
|
|
309
308
|
}
|
|
310
309
|
return '';
|
|
@@ -0,0 +1,171 @@
|
|
|
1
|
+
import { html } from 'lit';
|
|
2
|
+
import '../../pd-wizard.js';
|
|
3
|
+
|
|
4
|
+
export default {
|
|
5
|
+
title: 'PdWizard/Wizard',
|
|
6
|
+
component: 'pd-wizard',
|
|
7
|
+
argTypes: {},
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
function WizardTemplate({ wizardSteps, currentNumber }) {
|
|
11
|
+
|
|
12
|
+
let currentNr = currentNumber;
|
|
13
|
+
|
|
14
|
+
return html`
|
|
15
|
+
<pd-wizard
|
|
16
|
+
id="wizardId"
|
|
17
|
+
.wizardSteps="${wizardSteps}"
|
|
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");}}"
|
|
22
|
+
>
|
|
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
|
+
<h2>Das ist ein Titel 2</h2>
|
|
31
|
+
<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>
|
|
32
|
+
<h2>Das ist ein Titel 2</h2>
|
|
33
|
+
<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>
|
|
34
|
+
<h2>Das ist ein Titel 2</h2>
|
|
35
|
+
<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>
|
|
36
|
+
<h2>Das ist ein Titel 2</h2>
|
|
37
|
+
<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>
|
|
38
|
+
<h2>Das ist ein Titel 2</h2>
|
|
39
|
+
<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>
|
|
40
|
+
<h2>Das ist ein Titel 2</h2>
|
|
41
|
+
<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>
|
|
42
|
+
<h2>Das ist ein Titel 2</h2>
|
|
43
|
+
<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>
|
|
44
|
+
</div>
|
|
45
|
+
<div slot="step-3">Test 3</div>
|
|
46
|
+
<div slot="step-4">Test 4</div>
|
|
47
|
+
</pd-wizard>
|
|
48
|
+
`;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
function WizardPanelTemplate({ wizardSteps, currentNumber }) {
|
|
52
|
+
|
|
53
|
+
let currentNr = currentNumber;
|
|
54
|
+
|
|
55
|
+
return html`
|
|
56
|
+
|
|
57
|
+
<style>
|
|
58
|
+
:host {
|
|
59
|
+
display: block;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
:host {
|
|
63
|
+
display: block;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
/* The Modal (background) */
|
|
67
|
+
.modal {
|
|
68
|
+
position: fixed; /* Stay in place */
|
|
69
|
+
left: 0;
|
|
70
|
+
top: 0;
|
|
71
|
+
z-index: 100; /* Sit on top */
|
|
72
|
+
|
|
73
|
+
display: flex;
|
|
74
|
+
align-items: center;
|
|
75
|
+
justify-content: center;
|
|
76
|
+
|
|
77
|
+
width: 100%; /* Full width */
|
|
78
|
+
height: 100%; /* Full height */
|
|
79
|
+
overflow: hidden;
|
|
80
|
+
/* RGBA Wert muss hier verwendet werden #AFC1D2 to rgba for opacity */
|
|
81
|
+
background-color: var(--pd-modal-panel-bg-rgba, rgba(175, 193, 210, 0.8));
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.content {
|
|
85
|
+
background-color: var(--pd-modal-panel-content-bg-col, var(--pd-default-bg-col, #edf7fd));
|
|
86
|
+
border: 2px solid var(--pd-modal-panel-content-border-col, var(--pd-default-col, #067394));
|
|
87
|
+
border-radius: 5px;
|
|
88
|
+
|
|
89
|
+
height: var(--pd-modal-panel-content-height, auto);
|
|
90
|
+
height: var(--pd-modal-panel-content-min-height, auto);
|
|
91
|
+
max-height: var(--pd-modal-panel-content-max-height, auto);
|
|
92
|
+
min-width: var(--pd-modal-panel-content-min-width, auto);
|
|
93
|
+
padding: var(--pd-modal-panel-content-padding, 0);
|
|
94
|
+
margin: var(--pd-modal-panel-content-margin, 1em);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.event-details-panel {
|
|
98
|
+
--pd-modal-panel-content-bg-col: white;
|
|
99
|
+
--pd-modal-panel-content-max-height: 90%;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.event-wizard-panel {
|
|
103
|
+
--pd-modal-panel-content-min-width: 60%;
|
|
104
|
+
--pd-modal-panel-content-min-height: 45em;
|
|
105
|
+
--pd-steps-padding-top: 0px;
|
|
106
|
+
}
|
|
107
|
+
</style>
|
|
108
|
+
|
|
109
|
+
<div id="modalId" class="modal event-wizard-panel">
|
|
110
|
+
<div class="content">
|
|
111
|
+
|
|
112
|
+
<pd-wizard
|
|
113
|
+
id="wizardId"
|
|
114
|
+
panelWizard
|
|
115
|
+
.wizardSteps="${wizardSteps}"
|
|
116
|
+
currentNumber="${currentNr}"
|
|
117
|
+
@previous-step="${() => {currentNr -= 1; console.log("Hier hin");}}"
|
|
118
|
+
@next-step="${() => {currentNr -= 1; console.log("Hier hin");}}"
|
|
119
|
+
>
|
|
120
|
+
<div slot="step-1">
|
|
121
|
+
<h2>Das ist ein Titel 1</h2>
|
|
122
|
+
<p>Hier steht etwtwas Text. In der Regel aber kommt direkt eine Form.</p>
|
|
123
|
+
</div>
|
|
124
|
+
<div slot="step-2">
|
|
125
|
+
<h2>Das ist ein Titel 2</h2>
|
|
126
|
+
<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>
|
|
127
|
+
<h2>Das ist ein Titel 2</h2>
|
|
128
|
+
<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>
|
|
129
|
+
<h2>Das ist ein Titel 2</h2>
|
|
130
|
+
<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>
|
|
131
|
+
<h2>Das ist ein Titel 2</h2>
|
|
132
|
+
<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>
|
|
133
|
+
<h2>Das ist ein Titel 2</h2>
|
|
134
|
+
<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>
|
|
135
|
+
<h2>Das ist ein Titel 2</h2>
|
|
136
|
+
<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>
|
|
137
|
+
<h2>Das ist ein Titel 2</h2>
|
|
138
|
+
<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>
|
|
139
|
+
<h2>Das ist ein Titel 2</h2>
|
|
140
|
+
<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>
|
|
141
|
+
</div>
|
|
142
|
+
<div slot="step-3">Test 3</div>
|
|
143
|
+
<div slot="step-4">Test 4</div>
|
|
144
|
+
</pd-wizard>
|
|
145
|
+
|
|
146
|
+
</div>
|
|
147
|
+
</div>
|
|
148
|
+
`;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
export const Wizard = WizardTemplate.bind({});
|
|
152
|
+
Wizard.args = {
|
|
153
|
+
wizardSteps: [
|
|
154
|
+
{ title: 'Step 1', name: 'Step 1' },
|
|
155
|
+
{ title: 'Maintenance Bronze', name: 'Step 2' },
|
|
156
|
+
{ title: 'Step 3', name: 'Step 3' },
|
|
157
|
+
{ title: 'Step 4', name: 'Step 4' },
|
|
158
|
+
],
|
|
159
|
+
currentNumber: 2,
|
|
160
|
+
};
|
|
161
|
+
|
|
162
|
+
export const WizardPanel = WizardPanelTemplate.bind({});
|
|
163
|
+
WizardPanel.args = {
|
|
164
|
+
wizardSteps: [
|
|
165
|
+
{ title: 'Step 1', name: 'Step 1' },
|
|
166
|
+
{ title: 'Maintenance Bronze', name: 'Step 2' },
|
|
167
|
+
{ title: 'Step 3', name: 'Step 3' },
|
|
168
|
+
{ title: 'Step 4', name: 'Step 4' },
|
|
169
|
+
],
|
|
170
|
+
currentNumber: 2,
|
|
171
|
+
};
|
package/.storybook/server.mjs
DELETED
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { storybookPlugin } from '@web/dev-server-storybook';
|
|
2
|
-
import baseConfig from '../web-dev-server.config.mjs';
|
|
3
|
-
|
|
4
|
-
export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
|
|
5
|
-
...baseConfig,
|
|
6
|
-
open: '/',
|
|
7
|
-
plugins: [storybookPlugin({ type: 'web-components' }), ...baseConfig.plugins],
|
|
8
|
-
});
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
import { html } from 'lit';
|
|
2
|
-
import '../pd-wizard.js';
|
|
3
|
-
|
|
4
|
-
export default {
|
|
5
|
-
title: 'PdWizard/Wizard',
|
|
6
|
-
component: 'pd-wizard',
|
|
7
|
-
argTypes: {},
|
|
8
|
-
};
|
|
9
|
-
|
|
10
|
-
function WizardTemplate({ wizardSteps, currentNumber }) {
|
|
11
|
-
|
|
12
|
-
let currentNr = currentNumber;
|
|
13
|
-
|
|
14
|
-
return html`
|
|
15
|
-
<pd-wizard
|
|
16
|
-
id="wizardId"
|
|
17
|
-
.wizardSteps="${wizardSteps}"
|
|
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");}}"
|
|
22
|
-
>
|
|
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>
|
|
31
|
-
<div slot="step-3">Test 3</div>
|
|
32
|
-
<div slot="step-4">Test 4</div>
|
|
33
|
-
</pd-wizard>
|
|
34
|
-
`;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
export const Wizard = WizardTemplate.bind({});
|
|
38
|
-
Wizard.args = {
|
|
39
|
-
wizardSteps: [
|
|
40
|
-
{ title: 'Step 1', name: 'Step 1' },
|
|
41
|
-
{ title: 'Maintenance Bronze', name: 'Step 2' },
|
|
42
|
-
{ title: 'Step 3', name: 'Step 3' },
|
|
43
|
-
{ title: 'Step 4', name: 'Step 4' },
|
|
44
|
-
],
|
|
45
|
-
currentNumber: 2,
|
|
46
|
-
};
|