@progressive-development/pd-dialog 0.0.45 → 0.0.47
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 -3
- package/src/PdBookDatePopup.js +8 -1
- package/src/PdPopup.js +20 -60
- package/src/PdPopupDialog.js +29 -53
- package/src/PdSubmitDialog.js +15 -22
- package/src/shared-global-styles.js +56 -0
- package/stories/popup.stories.js +11 -0
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "Progressive Development dialog components.",
|
|
4
4
|
"license": "SEE LICENSE IN LICENSE",
|
|
5
5
|
"author": "PD Progressive Development",
|
|
6
|
-
"version": "0.0.
|
|
6
|
+
"version": "0.0.47",
|
|
7
7
|
"main": "index.js",
|
|
8
8
|
"module": "index.js",
|
|
9
9
|
"scripts": {
|
|
@@ -17,8 +17,8 @@
|
|
|
17
17
|
"storybook:build": "npm run analyze -- --exclude dist && build-storybook"
|
|
18
18
|
},
|
|
19
19
|
"dependencies": {
|
|
20
|
-
"@progressive-development/pd-forms": "0.
|
|
21
|
-
"@progressive-development/pd-icon": "^0.
|
|
20
|
+
"@progressive-development/pd-forms": "^0.1.2",
|
|
21
|
+
"@progressive-development/pd-icon": "^0.1.6",
|
|
22
22
|
"@progressive-development/pd-price": "0.0.8",
|
|
23
23
|
"lit": "^2.0.2"
|
|
24
24
|
},
|
package/src/PdBookDatePopup.js
CHANGED
|
@@ -24,7 +24,14 @@ export class PdBookDatePopup extends LitElement {
|
|
|
24
24
|
*/
|
|
25
25
|
|
|
26
26
|
static get styles() {
|
|
27
|
-
return css
|
|
27
|
+
return css`
|
|
28
|
+
p {
|
|
29
|
+
color: var(--pd-default-font-content-col);
|
|
30
|
+
font-size: var(--pd-default-font-content-size);
|
|
31
|
+
font-family: var(--pd-default-font-content-family);
|
|
32
|
+
max-width: 600px;
|
|
33
|
+
}
|
|
34
|
+
`;
|
|
28
35
|
}
|
|
29
36
|
|
|
30
37
|
static get properties() {
|
package/src/PdPopup.js
CHANGED
|
@@ -4,6 +4,13 @@
|
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
import { LitElement, html, css } from 'lit';
|
|
7
|
+
import { ICON_CLOSE as CLOSEICON } from '@progressive-development/pd-icon/src/PdIcon.js';
|
|
8
|
+
|
|
9
|
+
import '@progressive-development/pd-icon';
|
|
10
|
+
|
|
11
|
+
import { SharedGlobalStyles } from './shared-global-styles.js';
|
|
12
|
+
|
|
13
|
+
|
|
7
14
|
|
|
8
15
|
/**
|
|
9
16
|
* An example element.
|
|
@@ -13,46 +20,27 @@ import { LitElement, html, css } from 'lit';
|
|
|
13
20
|
*/
|
|
14
21
|
export class PdPopup extends LitElement {
|
|
15
22
|
static get styles() {
|
|
16
|
-
return
|
|
23
|
+
return [
|
|
24
|
+
SharedGlobalStyles,
|
|
25
|
+
css`
|
|
17
26
|
:host {
|
|
18
27
|
display: block;
|
|
19
28
|
}
|
|
20
29
|
|
|
21
|
-
h1,
|
|
22
|
-
h2,
|
|
23
|
-
h3,
|
|
24
|
-
h4 {
|
|
25
|
-
color: var(--my-text-color, #084c61);
|
|
26
|
-
font-family: var(--my-font, Oswald);
|
|
27
|
-
/*
|
|
28
|
-
font-weight: bold;
|
|
29
|
-
font-size: 2em;
|
|
30
|
-
*/
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
/* Popup box BEGIN */
|
|
34
30
|
/* The Modal (background) */
|
|
35
31
|
.modal {
|
|
36
32
|
display: none; /* Hidden by default */
|
|
37
|
-
|
|
38
|
-
z-index: 100; /* Sit on top */
|
|
39
|
-
padding-top: 100px; /* Location of the box */
|
|
40
|
-
left: 0;
|
|
41
|
-
top: 0;
|
|
42
|
-
width: 100%; /* Full width */
|
|
43
|
-
height: 100%; /* Full height */
|
|
44
|
-
overflow: auto; /* Enable scroll if needed */
|
|
45
|
-
background-color: rgb(0, 0, 0); /* Fallback color */
|
|
46
|
-
background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
|
|
33
|
+
padding-top: 100px; /* Location of the box */
|
|
47
34
|
}
|
|
48
35
|
|
|
49
36
|
/* Modal Content */
|
|
50
|
-
.modal-content {
|
|
51
|
-
background-color:
|
|
37
|
+
.modal-content {
|
|
38
|
+
background-color: var(--pd-default-bg-color);
|
|
39
|
+
opacity: 1;
|
|
52
40
|
margin: auto;
|
|
53
41
|
padding: 20px;
|
|
54
42
|
padding-bottom: 130px;
|
|
55
|
-
border:
|
|
43
|
+
border: 2px solid var(--pd-default-col);
|
|
56
44
|
width: 80%;
|
|
57
45
|
max-width: 1200px;
|
|
58
46
|
}
|
|
@@ -63,36 +51,12 @@ export class PdPopup extends LitElement {
|
|
|
63
51
|
margin-right: 30px;
|
|
64
52
|
}
|
|
65
53
|
|
|
66
|
-
|
|
67
|
-
.close {
|
|
68
|
-
color: #aaaaaa;
|
|
54
|
+
.close-icon {
|
|
69
55
|
float: right;
|
|
70
|
-
font-size: 28px;
|
|
71
|
-
font-weight: bold;
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
.close:hover,
|
|
75
|
-
.close:focus {
|
|
76
|
-
color: #000;
|
|
77
|
-
text-decoration: none;
|
|
78
56
|
cursor: pointer;
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
`;
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
/*
|
|
85
|
-
static get properties() {
|
|
86
|
-
return {
|
|
87
|
-
// not needed at the moment
|
|
88
|
-
};
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
constructor() {
|
|
92
|
-
super();
|
|
93
|
-
// no need at the moment
|
|
57
|
+
}`
|
|
58
|
+
];
|
|
94
59
|
}
|
|
95
|
-
*/
|
|
96
60
|
|
|
97
61
|
render() {
|
|
98
62
|
return html`
|
|
@@ -105,12 +69,8 @@ export class PdPopup extends LitElement {
|
|
|
105
69
|
<div id="modalId" class="modal">
|
|
106
70
|
<!-- Modal content -->
|
|
107
71
|
<div class="modal-content">
|
|
108
|
-
<
|
|
109
|
-
|
|
110
|
-
@click="${this._closePopup}"
|
|
111
|
-
@keypress="${this._closePopup}"
|
|
112
|
-
>×</span
|
|
113
|
-
>
|
|
72
|
+
<pd-icon icon="${CLOSEICON}" class="close-icon"
|
|
73
|
+
@click="${this._closePopup}"></pd-icon>
|
|
114
74
|
<div class="modal-content-slot">
|
|
115
75
|
<slot name="content"></slot>
|
|
116
76
|
</div>
|
package/src/PdPopupDialog.js
CHANGED
|
@@ -7,6 +7,8 @@ import { LitElement, html, css } from 'lit';
|
|
|
7
7
|
|
|
8
8
|
import '@progressive-development/pd-forms/pd-button.js';
|
|
9
9
|
|
|
10
|
+
import { SharedGlobalStyles } from './shared-global-styles.js';
|
|
11
|
+
|
|
10
12
|
/**
|
|
11
13
|
* An example element.
|
|
12
14
|
*
|
|
@@ -19,68 +21,41 @@ export class PdPopupDialog extends LitElement {
|
|
|
19
21
|
*/
|
|
20
22
|
|
|
21
23
|
static get styles() {
|
|
22
|
-
return
|
|
24
|
+
return [
|
|
25
|
+
SharedGlobalStyles,
|
|
26
|
+
css`
|
|
23
27
|
:host {
|
|
24
|
-
display: block;
|
|
25
|
-
|
|
26
|
-
--my-max-width: var(--popup-max-width, 600px);
|
|
27
|
-
--my-header-color: var(--popup-header-col, #084c61);
|
|
28
|
-
--my-content-color: var(--popup-content-col, #fefefe);
|
|
29
|
-
--my-footer-color: var(--popup-footer-col, #177e89);
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
h1,
|
|
33
|
-
h2,
|
|
34
|
-
h3,
|
|
35
|
-
h4 {
|
|
36
|
-
color: var(--my-text-color, #084c61);
|
|
37
|
-
font-family: var(--my-font, Oswald);
|
|
38
|
-
/*
|
|
39
|
-
font-weight: bold;
|
|
40
|
-
font-size: 2em;
|
|
41
|
-
*/
|
|
28
|
+
display: block;
|
|
42
29
|
}
|
|
43
|
-
|
|
44
|
-
/* Popup box BEGIN */
|
|
30
|
+
|
|
45
31
|
/* The Modal (background) */
|
|
46
32
|
.modal {
|
|
47
|
-
display: block;
|
|
48
|
-
position: fixed; /* Stay in place */
|
|
49
|
-
z-index: 100; /* Sit on top */
|
|
50
|
-
|
|
33
|
+
display: block;
|
|
51
34
|
padding-top: 150px; /* Location of the box */
|
|
52
35
|
padding-left: 10px;
|
|
53
36
|
padding-right: 10px;
|
|
37
|
+
}
|
|
54
38
|
|
|
55
|
-
|
|
56
|
-
top: 0;
|
|
57
|
-
width: 100%; /* Full width */
|
|
58
|
-
height: 100%; /* Full height */
|
|
59
|
-
overflow: auto; /* Enable scroll if needed */
|
|
60
|
-
background-color: rgba(8, 76, 97, 0.1);
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
/* Modal Content */
|
|
64
|
-
.modal-content {
|
|
65
|
-
background-color: #fefefe;
|
|
39
|
+
.modal-content {
|
|
66
40
|
margin: auto;
|
|
67
|
-
border:
|
|
68
|
-
box-shadow: -4px 4px 10px
|
|
69
|
-
max-width: var(--
|
|
41
|
+
border: 1px solid #666666;
|
|
42
|
+
box-shadow: -4px 4px 10px var(--pd-default-dark-col);
|
|
43
|
+
max-width: var(--pd-popup-max-width, 700px);
|
|
70
44
|
}
|
|
71
45
|
|
|
72
46
|
.header {
|
|
73
|
-
background-color: var(--
|
|
47
|
+
background-color: var(--pd-popup-header-col, var(--pd-default-col));
|
|
74
48
|
height: 45px;
|
|
75
49
|
}
|
|
76
50
|
|
|
77
51
|
.header-txt {
|
|
52
|
+
/* TODO: Absolute positionierung entfernen => Passt ja nicht für verschiedenen propertie angaben */
|
|
78
53
|
position: absolute;
|
|
79
54
|
padding-left: 15px;
|
|
80
|
-
padding-top:
|
|
81
|
-
font-family:
|
|
82
|
-
font-size: 1.4em;
|
|
83
|
-
color:
|
|
55
|
+
padding-top: 8px;
|
|
56
|
+
font-family: var(--pd-default-font-title-family);
|
|
57
|
+
font-size: var(--pd-popup-header-font-size, 1.4em);
|
|
58
|
+
color: var(--pd-popup-header-font-col, var(--pd-default-bg-color));
|
|
84
59
|
}
|
|
85
60
|
|
|
86
61
|
.info-logo {
|
|
@@ -90,21 +65,22 @@ export class PdPopupDialog extends LitElement {
|
|
|
90
65
|
}
|
|
91
66
|
|
|
92
67
|
.content {
|
|
93
|
-
padding:
|
|
94
|
-
background-color: var(--
|
|
68
|
+
padding: 0.5rem 1rem 1rem 1rem;
|
|
69
|
+
background-color: var(--pd-popup-header-font-col, var(--pd-default-bg-color));
|
|
95
70
|
height: 100%;
|
|
96
71
|
}
|
|
97
72
|
|
|
98
73
|
.footer {
|
|
99
|
-
display: flex;
|
|
100
|
-
|
|
101
|
-
|
|
74
|
+
display: flex;
|
|
75
|
+
|
|
76
|
+
background: linear-gradient(to right,
|
|
77
|
+
var(--pd-popup-footer-col, var(--pd-default-light-col)) 0%, var(--pd-default-disabled-light-col) 100%);
|
|
78
|
+
|
|
79
|
+
height: 70px;
|
|
80
|
+
align-items: center;
|
|
102
81
|
justify-content: space-around;
|
|
103
|
-
padding-bottom: 15px;
|
|
104
82
|
}
|
|
105
|
-
|
|
106
|
-
/* Popup box END */
|
|
107
|
-
`;
|
|
83
|
+
`];
|
|
108
84
|
}
|
|
109
85
|
|
|
110
86
|
static get properties() {
|
package/src/PdSubmitDialog.js
CHANGED
|
@@ -29,20 +29,8 @@ export class PdSubmitDialog extends LitElement {
|
|
|
29
29
|
display: block;
|
|
30
30
|
}
|
|
31
31
|
|
|
32
|
-
h1,
|
|
33
|
-
h2,
|
|
34
|
-
h3,
|
|
35
|
-
h4 {
|
|
36
|
-
color: var(--my-text-color, #084c61);
|
|
37
|
-
font-family: var(--my-font, Oswald);
|
|
38
|
-
/*
|
|
39
|
-
font-weight: bold;
|
|
40
|
-
font-size: 2em;
|
|
41
|
-
*/
|
|
42
|
-
}
|
|
43
|
-
|
|
44
32
|
.popup-dialog {
|
|
45
|
-
--popup-max-width:
|
|
33
|
+
--popup-max-width: 800px;
|
|
46
34
|
}
|
|
47
35
|
|
|
48
36
|
.progress-container {
|
|
@@ -61,8 +49,8 @@ export class PdSubmitDialog extends LitElement {
|
|
|
61
49
|
}
|
|
62
50
|
|
|
63
51
|
.loader {
|
|
64
|
-
border: 16px solid
|
|
65
|
-
border-top: 16px solid
|
|
52
|
+
border: 16px solid var(--pd-default-disabled-light-col);
|
|
53
|
+
border-top: 16px solid var(--pd-default-col); /* Blue */
|
|
66
54
|
border-radius: 50%;
|
|
67
55
|
width: 10px;
|
|
68
56
|
height: 10px;
|
|
@@ -71,14 +59,19 @@ export class PdSubmitDialog extends LitElement {
|
|
|
71
59
|
|
|
72
60
|
.success-icon {
|
|
73
61
|
padding-top: 5px;
|
|
74
|
-
--pd-icon-
|
|
75
|
-
--pd-icon-
|
|
62
|
+
--pd-icon-col-active: var(--pd-default-success-light-col);
|
|
63
|
+
--pd-icon-stroke-col-active: var(--pd-default-success-col);
|
|
76
64
|
}
|
|
77
65
|
|
|
78
66
|
.error-icon {
|
|
79
67
|
padding-top: 5px;
|
|
80
|
-
--pd-icon-
|
|
81
|
-
--pd-icon-
|
|
68
|
+
--pd-icon-col: var(--pd-default-error-light-col);
|
|
69
|
+
--pd-icon-stroke-col: var(--pd-default-error-col);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.progress-txt {
|
|
73
|
+
font-size: 1em;
|
|
74
|
+
color: var(--pd-default-dark-col);
|
|
82
75
|
}
|
|
83
76
|
|
|
84
77
|
@keyframes spin {
|
|
@@ -176,7 +169,7 @@ export class PdSubmitDialog extends LitElement {
|
|
|
176
169
|
value = html` <div class="first-row-tmp">
|
|
177
170
|
<div class="loader"></div>
|
|
178
171
|
</div>
|
|
179
|
-
<span
|
|
172
|
+
<span class="progress-txt"
|
|
180
173
|
>${this.type === 'mail'
|
|
181
174
|
? 'E-mail versturen, even geduld...'
|
|
182
175
|
: 'Uw gegevens worden verzonden.'}</span
|
|
@@ -190,7 +183,7 @@ export class PdSubmitDialog extends LitElement {
|
|
|
190
183
|
activeIcon
|
|
191
184
|
></pd-icon>
|
|
192
185
|
</div>
|
|
193
|
-
<span
|
|
186
|
+
<span class="progress-txt"
|
|
194
187
|
>${this.type === 'mail'
|
|
195
188
|
? 'Mail is succesvol verzonden, we zullen spoedig reageren.'
|
|
196
189
|
: 'Uw bestelling is succesvol verwerkt. Bekijk de bevestigingsmail voor meer informatie.'}</span
|
|
@@ -200,7 +193,7 @@ export class PdSubmitDialog extends LitElement {
|
|
|
200
193
|
value = html` <div class="first-row-tmp">
|
|
201
194
|
<pd-icon class="error-icon" icon="checkBox"></pd-icon>
|
|
202
195
|
</div>
|
|
203
|
-
<span
|
|
196
|
+
<span class="progress-txt"
|
|
204
197
|
>${this.type === 'mail'
|
|
205
198
|
? 'Sending the mail failed.'
|
|
206
199
|
: 'Er is een fout opgetreden bij het opmaken van uw bestelling.'}</span
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
import { css } from 'lit';
|
|
7
|
+
|
|
8
|
+
export const SharedGlobalStyles = css`
|
|
9
|
+
|
|
10
|
+
:host {
|
|
11
|
+
/**
|
|
12
|
+
* Set default fonts for all pd-components.
|
|
13
|
+
* Use content, title and input categories for fonts.
|
|
14
|
+
*/
|
|
15
|
+
--pd-default-font-title-family: var(--app-font-title-family);
|
|
16
|
+
--pd-default-font-content-family: var(--app-font-content-family);
|
|
17
|
+
--pd-default-font-input-family: var(--app-font-input-family);
|
|
18
|
+
|
|
19
|
+
--pd-default-font-title-col: var(--app-font-title-col, #0A3A48);
|
|
20
|
+
--pd-default-font-content-col: var(--app-font-content-col, #353738);
|
|
21
|
+
--pd-default-font-input-col: var(--app-font-input-col, #353738);
|
|
22
|
+
|
|
23
|
+
--pd-default-font-content-size: var(--app-font-content-size, 1em);
|
|
24
|
+
--pd-default-font-input-size: var(--app-font-input-size, 1em);
|
|
25
|
+
|
|
26
|
+
/**
|
|
27
|
+
* Set default colors for all pd-components
|
|
28
|
+
*/
|
|
29
|
+
--pd-default-col: var(--app-primary-col, #067394);
|
|
30
|
+
--pd-default-light-col: var(--app-primary-light-col, #AFC1D2);
|
|
31
|
+
--pd-default-dark-col: var(--app-primary-dark-col, #0A3A48);
|
|
32
|
+
--pd-default-bg-color: var(--app-primary-bg-col, #fefefe);
|
|
33
|
+
|
|
34
|
+
--pd-default-hover-col: var(--app-hover-col, #E1E03D);
|
|
35
|
+
--pd-default-error-col: var(--app-error-col, #cc2029);
|
|
36
|
+
--pd-default-error-light-col: var(--app-error-light-col, #ffe8e8);
|
|
37
|
+
--pd-default-success-col: var(--app-success-col, #42a01c);
|
|
38
|
+
--pd-default-success-light-col: var(--app-success-light-col, #f5ffe8);
|
|
39
|
+
--pd-default-disabled-col: var(--app-disabled-col, #888585);
|
|
40
|
+
--pd-default-disabled-light-col: var(--app-disabled-light-col, lightgrey);
|
|
41
|
+
|
|
42
|
+
--pd-default-modal-bg-rgba: rgba(175, 193, 210, 0.8); /* #AFC1D2 to rgba for opacity */
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.modal {
|
|
46
|
+
position: fixed; /* Stay in place */
|
|
47
|
+
z-index: 100; /* Sit on top */
|
|
48
|
+
left: 0;
|
|
49
|
+
top: 0;
|
|
50
|
+
width: 100%; /* Full width */
|
|
51
|
+
height: 100%; /* Full height */
|
|
52
|
+
overflow: auto; /* Enable scroll if needed */
|
|
53
|
+
background-color: var(--pd-popup-modal-bg-rgba, var(--pd-default-modal-bg-rgba)); /* RGBA Wert muss hier verwendet werden */
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
`;
|
package/stories/popup.stories.js
CHANGED
|
@@ -9,6 +9,15 @@ export default {
|
|
|
9
9
|
|
|
10
10
|
function PopupTemplate() {
|
|
11
11
|
return html`
|
|
12
|
+
|
|
13
|
+
<style>
|
|
14
|
+
.image-div {
|
|
15
|
+
background-image: url('https://mobimg.b-cdn.net/v3/fetch/4a/4a6da09ed52fc9f8f0a98dceba2d5fc2.jpeg');
|
|
16
|
+
width: 100vw;
|
|
17
|
+
height: 100vh;
|
|
18
|
+
}
|
|
19
|
+
</style>
|
|
20
|
+
<div class="image-div">
|
|
12
21
|
<pd-popup>
|
|
13
22
|
<div slot="small-view">Open Popup</div>
|
|
14
23
|
<div slot="content">
|
|
@@ -16,6 +25,8 @@ function PopupTemplate() {
|
|
|
16
25
|
<p>Hier steht dann etwas....</p>
|
|
17
26
|
</div>
|
|
18
27
|
</pd-popup>
|
|
28
|
+
|
|
29
|
+
</div>
|
|
19
30
|
`;
|
|
20
31
|
}
|
|
21
32
|
|