@postnord/pn-marketweb-components 2.0.143 → 2.0.144
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/cjs/loader.cjs.js +1 -1
- package/cjs/pn-market-web-components.cjs.js +1 -1
- package/cjs/pn-stats-info-data.cjs.entry.js +1 -1
- package/cjs/pn-stats-info.cjs.entry.js +3 -3
- package/collection/components/data-visualization/pn-stats-info/pn-stats-info-data/pn-stats-info-data.css +0 -3
- package/collection/components/data-visualization/pn-stats-info/pn-stats-info.css +313 -14
- package/collection/components/data-visualization/pn-stats-info/pn-stats-info.js +3 -3
- package/collection/components/data-visualization/pn-stats-info/pn-stats-info.stories.js +93 -7
- package/custom-elements/index.js +5 -5
- package/esm/loader.js +1 -1
- package/esm/pn-market-web-components.js +1 -1
- package/esm/pn-stats-info-data.entry.js +1 -1
- package/esm/pn-stats-info.entry.js +3 -3
- package/esm-es5/loader.js +1 -1
- package/esm-es5/pn-market-web-components.js +1 -1
- package/esm-es5/pn-stats-info-data.entry.js +1 -1
- package/esm-es5/pn-stats-info.entry.js +1 -1
- package/package.json +1 -1
- package/pn-market-web-components/p-00165a55.system.entry.js +1 -0
- package/pn-market-web-components/p-0fbcc2b8.entry.js +1 -0
- package/pn-market-web-components/p-80e58bf9.entry.js +1 -0
- package/pn-market-web-components/p-d295ef71.system.js +1 -1
- package/pn-market-web-components/p-fd040ac6.system.entry.js +1 -0
- package/pn-market-web-components/pn-market-web-components.esm.js +1 -1
- package/umd/pn-marketweb-init.js +1 -1
- package/umd/pn-marketweb-salesforce.js +2 -2
- package/pn-market-web-components/p-0ffa3353.entry.js +0 -1
- package/pn-market-web-components/p-19b622e7.entry.js +0 -1
- package/pn-market-web-components/p-488a5506.system.entry.js +0 -1
- package/pn-market-web-components/p-8879ac54.system.entry.js +0 -1
|
@@ -1,3 +1,230 @@
|
|
|
1
|
+
pn-stats-info .pn-stats-info__container {
|
|
2
|
+
display: flex;
|
|
3
|
+
flex-direction: row;
|
|
4
|
+
justify-content: center;
|
|
5
|
+
}
|
|
6
|
+
pn-stats-info .pn-stats-info__container__map {
|
|
7
|
+
display: none;
|
|
8
|
+
}
|
|
9
|
+
pn-stats-info .pn-stats-info-image-container {
|
|
10
|
+
display: none;
|
|
11
|
+
}
|
|
12
|
+
pn-stats-info .pn-stats-info__container__content {
|
|
13
|
+
display: flex;
|
|
14
|
+
flex-direction: column;
|
|
15
|
+
align-items: center;
|
|
16
|
+
padding: 2rem;
|
|
17
|
+
width: 100%;
|
|
18
|
+
background-color: #0D234B;
|
|
19
|
+
border-radius: 24px;
|
|
20
|
+
}
|
|
21
|
+
pn-stats-info .pn-stats-info__container__content__heading {
|
|
22
|
+
color: #F06365;
|
|
23
|
+
margin-bottom: 2.4rem;
|
|
24
|
+
align-self: center;
|
|
25
|
+
text-align: center;
|
|
26
|
+
font-size: 3rem;
|
|
27
|
+
line-height: 110%;
|
|
28
|
+
}
|
|
29
|
+
@media screen and (min-width: 1200px) {
|
|
30
|
+
pn-stats-info .pn-stats-info__container__content__heading {
|
|
31
|
+
font-weight: 700;
|
|
32
|
+
font-size: 4.8rem;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
pn-stats-info .pn-stats-info__container__content__data {
|
|
36
|
+
height: 100%;
|
|
37
|
+
display: flex;
|
|
38
|
+
flex-direction: row;
|
|
39
|
+
justify-content: center;
|
|
40
|
+
flex-wrap: wrap;
|
|
41
|
+
min-height: 20rem;
|
|
42
|
+
width: 100%;
|
|
43
|
+
}
|
|
44
|
+
@media screen and (min-width: 1640px) {
|
|
45
|
+
pn-stats-info .pn-stats-info__container__content__data {
|
|
46
|
+
width: 65rem;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(1) {
|
|
50
|
+
width: 100%;
|
|
51
|
+
}
|
|
52
|
+
pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(2),
|
|
53
|
+
pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(2) ~ pn-stats-info-data {
|
|
54
|
+
width: 50%;
|
|
55
|
+
}
|
|
56
|
+
pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(3n),
|
|
57
|
+
pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(3n) ~ pn-stats-info-data {
|
|
58
|
+
width: 33%;
|
|
59
|
+
}
|
|
60
|
+
pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(8),
|
|
61
|
+
pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(8) ~ pn-stats-info-data {
|
|
62
|
+
width: 25%;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
pn-stats-info[data-stats-image=background] .pn-stats-info__container__map {
|
|
66
|
+
display: none;
|
|
67
|
+
border-top-left-radius: 24px;
|
|
68
|
+
border-bottom-left-radius: 24px;
|
|
69
|
+
}
|
|
70
|
+
@media screen and (min-width: 768px) {
|
|
71
|
+
pn-stats-info[data-stats-image=background] .pn-stats-info__container__map {
|
|
72
|
+
display: block;
|
|
73
|
+
max-width: 46rem;
|
|
74
|
+
width: 100%;
|
|
75
|
+
background-color: #0D234B;
|
|
76
|
+
background-repeat: no-repeat;
|
|
77
|
+
background-position: bottom center;
|
|
78
|
+
background-size: 55%;
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
@media screen and (min-width: 1200px) {
|
|
82
|
+
pn-stats-info[data-stats-image=background] .pn-stats-info__container__map {
|
|
83
|
+
background-size: contain;
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
pn-stats-info[data-stats-image=background] .pn-stats-info-image-container {
|
|
87
|
+
display: none;
|
|
88
|
+
}
|
|
89
|
+
pn-stats-info[data-stats-image=background] .pn-stats-info__container__content {
|
|
90
|
+
display: flex;
|
|
91
|
+
flex-direction: column;
|
|
92
|
+
align-items: center;
|
|
93
|
+
padding: 2rem;
|
|
94
|
+
width: 100%;
|
|
95
|
+
background-color: #0D234B;
|
|
96
|
+
background-repeat: no-repeat;
|
|
97
|
+
background-position: bottom left;
|
|
98
|
+
background-size: 50%;
|
|
99
|
+
background-blend-mode: overlay;
|
|
100
|
+
padding-bottom: 2rem;
|
|
101
|
+
border-radius: 24px;
|
|
102
|
+
}
|
|
103
|
+
@media screen and (min-width: 768px) {
|
|
104
|
+
pn-stats-info[data-stats-image=background] .pn-stats-info__container__content {
|
|
105
|
+
border-top-left-radius: 0px;
|
|
106
|
+
border-bottom-left-radius: 0px;
|
|
107
|
+
max-width: 540px;
|
|
108
|
+
background-position: -999px -999px;
|
|
109
|
+
background-size: 0;
|
|
110
|
+
padding-bottom: 4rem;
|
|
111
|
+
padding-right: 4rem;
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
@media screen and (min-width: 1200px) {
|
|
115
|
+
pn-stats-info[data-stats-image=background] .pn-stats-info__container__content {
|
|
116
|
+
max-width: 100%;
|
|
117
|
+
padding-bottom: 6rem;
|
|
118
|
+
padding-right: 6rem;
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
pn-stats-info[data-stats-image=background] .pn-stats-info__container__content__data {
|
|
122
|
+
min-height: 0;
|
|
123
|
+
}
|
|
124
|
+
pn-stats-info[data-stats-image=background] .pn-stats-info__container__content__data .pn-stats-info-data__container {
|
|
125
|
+
justify-content: flex-start;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
pn-stats-info[data-stats-image=image] .pn-stats-info__container {
|
|
129
|
+
flex-direction: column;
|
|
130
|
+
padding-top: 0;
|
|
131
|
+
}
|
|
132
|
+
@media screen and (min-width: 992px) {
|
|
133
|
+
pn-stats-info[data-stats-image=image] .pn-stats-info__container {
|
|
134
|
+
flex-direction: row;
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
pn-stats-info[data-stats-image=image] .pn-stats-info__container__map {
|
|
138
|
+
display: none;
|
|
139
|
+
}
|
|
140
|
+
pn-stats-info[data-stats-image=image] .pn-stats-info-image-container {
|
|
141
|
+
display: block;
|
|
142
|
+
position: relative;
|
|
143
|
+
}
|
|
144
|
+
pn-stats-info[data-stats-image=image] .pn-stats-info-image-container [slot=illustration] {
|
|
145
|
+
border-top-left-radius: 24px;
|
|
146
|
+
border-top-right-radius: 24px;
|
|
147
|
+
}
|
|
148
|
+
pn-stats-info[data-stats-image=image] .pn-stats-info-image-container [slot=illustration] > picture > img {
|
|
149
|
+
width: 100%;
|
|
150
|
+
height: auto;
|
|
151
|
+
border-top-left-radius: 24px;
|
|
152
|
+
border-top-right-radius: 24px;
|
|
153
|
+
}
|
|
154
|
+
@media screen and (min-width: 992px) {
|
|
155
|
+
pn-stats-info[data-stats-image=image] .pn-stats-info-image-container {
|
|
156
|
+
display: flex;
|
|
157
|
+
align-items: center;
|
|
158
|
+
background-color: #0D234B;
|
|
159
|
+
padding-left: 40px;
|
|
160
|
+
border-top-left-radius: 24px;
|
|
161
|
+
border-bottom-left-radius: 24px;
|
|
162
|
+
}
|
|
163
|
+
pn-stats-info[data-stats-image=image] .pn-stats-info-image-container [slot=illustration] img {
|
|
164
|
+
clip-path: circle(50%);
|
|
165
|
+
object-fit: cover;
|
|
166
|
+
object-position: center;
|
|
167
|
+
aspect-ratio: 1;
|
|
168
|
+
max-width: 450px;
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
pn-stats-info[data-stats-image=image] .pn-stats-info__container__content {
|
|
172
|
+
width: 100%;
|
|
173
|
+
max-width: 100%;
|
|
174
|
+
border-bottom-right-radius: 24px;
|
|
175
|
+
border-bottom-left-radius: 24px;
|
|
176
|
+
border-top-right-radius: 0;
|
|
177
|
+
border-top-left-radius: 0;
|
|
178
|
+
}
|
|
179
|
+
@media screen and (min-width: 768px) {
|
|
180
|
+
pn-stats-info[data-stats-image=image] .pn-stats-info__container__content {
|
|
181
|
+
justify-content: center;
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
@media screen and (min-width: 992px) {
|
|
185
|
+
pn-stats-info[data-stats-image=image] .pn-stats-info__container__content {
|
|
186
|
+
border-top-right-radius: 24px;
|
|
187
|
+
border-bottom-right-radius: 24px;
|
|
188
|
+
border-bottom-left-radius: 0;
|
|
189
|
+
padding: 50px 25px;
|
|
190
|
+
max-width: 100%;
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
@media screen and (min-width: 992px) {
|
|
194
|
+
pn-stats-info[data-stats-image=image] .pn-stats-info__container__content__heading {
|
|
195
|
+
font-size: 4.8rem;
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
pn-stats-info[data-stats-image=image] .pn-stats-info__container__content__data {
|
|
199
|
+
width: 100%;
|
|
200
|
+
height: auto;
|
|
201
|
+
min-height: 0;
|
|
202
|
+
}
|
|
203
|
+
pn-stats-info[data-stats-image=image] .pn-stats-info__container__content__data .pn-stats-info-data__container {
|
|
204
|
+
justify-content: flex-start;
|
|
205
|
+
min-height: 56px;
|
|
206
|
+
}
|
|
207
|
+
@media screen and (min-width: 768px) {
|
|
208
|
+
pn-stats-info[data-stats-image=image] .pn-stats-info__container__content__data .pn-stats-info-data__container {
|
|
209
|
+
min-height: 56px;
|
|
210
|
+
padding: 2.4rem;
|
|
211
|
+
}
|
|
212
|
+
}
|
|
213
|
+
@media screen and (min-width: 1200px) {
|
|
214
|
+
pn-stats-info[data-stats-image=image] .pn-stats-info__container__content__data .pn-stats-info-data__container {
|
|
215
|
+
min-height: 50px;
|
|
216
|
+
}
|
|
217
|
+
}
|
|
218
|
+
@media screen and (min-width: 992px) {
|
|
219
|
+
pn-stats-info[data-stats-image=image] .pn-stats-info__container__content__data .pn-stats-info-data__container__content__data {
|
|
220
|
+
font-size: 5.6rem;
|
|
221
|
+
}
|
|
222
|
+
}
|
|
223
|
+
@media screen and (min-width: 992px) {
|
|
224
|
+
pn-stats-info[data-stats-image=image] .pn-stats-info__container__content__data .pn-stats-info-data__container__content__unit {
|
|
225
|
+
font-size: 5.6rem;
|
|
226
|
+
}
|
|
227
|
+
}
|
|
1
228
|
.bleed-container:has(pn-stats-info) {
|
|
2
229
|
padding: 0;
|
|
3
230
|
margin-bottom: 3rem;
|
|
@@ -10,30 +237,30 @@
|
|
|
10
237
|
margin-bottom: 0 !important;
|
|
11
238
|
}
|
|
12
239
|
|
|
13
|
-
pn-stats-info {
|
|
240
|
+
.comboquotestatsblock pn-stats-info {
|
|
14
241
|
width: 100%;
|
|
15
242
|
}
|
|
16
|
-
pn-stats-info .pn-stats-info__container {
|
|
243
|
+
.comboquotestatsblock pn-stats-info .pn-stats-info__container {
|
|
17
244
|
display: flex;
|
|
18
245
|
flex-direction: row;
|
|
19
246
|
justify-content: center;
|
|
20
247
|
padding-top: 2rem;
|
|
21
248
|
}
|
|
22
249
|
@media screen and (min-width: 768px) {
|
|
23
|
-
pn-stats-info .pn-stats-info__container {
|
|
250
|
+
.comboquotestatsblock pn-stats-info .pn-stats-info__container {
|
|
24
251
|
padding-top: 6rem;
|
|
25
252
|
}
|
|
26
253
|
}
|
|
27
254
|
@media screen and (min-width: 1200px) {
|
|
28
|
-
pn-stats-info .pn-stats-info__container {
|
|
255
|
+
.comboquotestatsblock pn-stats-info .pn-stats-info__container {
|
|
29
256
|
padding-top: 8rem;
|
|
30
257
|
}
|
|
31
258
|
}
|
|
32
|
-
pn-stats-info .pn-stats-info__container__map {
|
|
259
|
+
.comboquotestatsblock pn-stats-info .pn-stats-info__container__map {
|
|
33
260
|
display: none;
|
|
34
261
|
}
|
|
35
262
|
@media screen and (min-width: 768px) {
|
|
36
|
-
pn-stats-info .pn-stats-info__container__map {
|
|
263
|
+
.comboquotestatsblock pn-stats-info .pn-stats-info__container__map {
|
|
37
264
|
display: block;
|
|
38
265
|
max-width: 46rem;
|
|
39
266
|
width: 100%;
|
|
@@ -44,11 +271,14 @@ pn-stats-info .pn-stats-info__container__map {
|
|
|
44
271
|
}
|
|
45
272
|
}
|
|
46
273
|
@media screen and (min-width: 1200px) {
|
|
47
|
-
pn-stats-info .pn-stats-info__container__map {
|
|
274
|
+
.comboquotestatsblock pn-stats-info .pn-stats-info__container__map {
|
|
48
275
|
background-size: contain;
|
|
49
276
|
}
|
|
50
277
|
}
|
|
51
|
-
pn-stats-info .pn-stats-
|
|
278
|
+
.comboquotestatsblock pn-stats-info .pn-stats-info-image-container {
|
|
279
|
+
display: none;
|
|
280
|
+
}
|
|
281
|
+
.comboquotestatsblock pn-stats-info .pn-stats-info__container__content {
|
|
52
282
|
display: flex;
|
|
53
283
|
flex-direction: column;
|
|
54
284
|
align-items: center;
|
|
@@ -62,7 +292,7 @@ pn-stats-info .pn-stats-info__container__content {
|
|
|
62
292
|
padding-bottom: 2rem;
|
|
63
293
|
}
|
|
64
294
|
@media screen and (min-width: 768px) {
|
|
65
|
-
pn-stats-info .pn-stats-info__container__content {
|
|
295
|
+
.comboquotestatsblock pn-stats-info .pn-stats-info__container__content {
|
|
66
296
|
max-width: 540px;
|
|
67
297
|
background-position: -999px -999px;
|
|
68
298
|
background-size: 0;
|
|
@@ -71,13 +301,13 @@ pn-stats-info .pn-stats-info__container__content {
|
|
|
71
301
|
}
|
|
72
302
|
}
|
|
73
303
|
@media screen and (min-width: 1200px) {
|
|
74
|
-
pn-stats-info .pn-stats-info__container__content {
|
|
304
|
+
.comboquotestatsblock pn-stats-info .pn-stats-info__container__content {
|
|
75
305
|
max-width: 100%;
|
|
76
306
|
padding-bottom: 6rem;
|
|
77
307
|
padding-right: 6rem;
|
|
78
308
|
}
|
|
79
309
|
}
|
|
80
|
-
pn-stats-info .pn-stats-info__container__content__heading {
|
|
310
|
+
.comboquotestatsblock pn-stats-info .pn-stats-info__container__content__heading {
|
|
81
311
|
color: #F06365;
|
|
82
312
|
margin-bottom: 2.4rem;
|
|
83
313
|
align-self: center;
|
|
@@ -86,12 +316,12 @@ pn-stats-info .pn-stats-info__container__content__heading {
|
|
|
86
316
|
line-height: 110%;
|
|
87
317
|
}
|
|
88
318
|
@media screen and (min-width: 1200px) {
|
|
89
|
-
pn-stats-info .pn-stats-info__container__content__heading {
|
|
319
|
+
.comboquotestatsblock pn-stats-info .pn-stats-info__container__content__heading {
|
|
90
320
|
font-weight: 700;
|
|
91
321
|
font-size: 4.8rem;
|
|
92
322
|
}
|
|
93
323
|
}
|
|
94
|
-
pn-stats-info .pn-stats-info__container__content__data {
|
|
324
|
+
.comboquotestatsblock pn-stats-info .pn-stats-info__container__content__data {
|
|
95
325
|
height: 100%;
|
|
96
326
|
display: flex;
|
|
97
327
|
flex-direction: row;
|
|
@@ -99,7 +329,76 @@ pn-stats-info .pn-stats-info__container__content__data {
|
|
|
99
329
|
min-height: 20rem;
|
|
100
330
|
}
|
|
101
331
|
@media screen and (min-width: 1640px) {
|
|
102
|
-
pn-stats-info .pn-stats-info__container__content__data {
|
|
332
|
+
.comboquotestatsblock pn-stats-info .pn-stats-info__container__content__data {
|
|
103
333
|
width: 65rem;
|
|
104
334
|
}
|
|
335
|
+
}
|
|
336
|
+
|
|
337
|
+
pn-stats-info[data-stats-background-color=bluedarkest] .pn-stats-info__container__content,
|
|
338
|
+
pn-stats-info[data-stats-background-color=bluedarkest] .pn-stats-info__container__map {
|
|
339
|
+
background-color: #0D234B;
|
|
340
|
+
}
|
|
341
|
+
pn-stats-info[data-stats-background-color=bluedarkest] .pn-stats-info-image-container {
|
|
342
|
+
background-color: transparent;
|
|
343
|
+
}
|
|
344
|
+
pn-stats-info[data-stats-background-color=bluedarkest] .pn-stats-info-image-container [slot=illustration] {
|
|
345
|
+
background-color: #0D234B;
|
|
346
|
+
}
|
|
347
|
+
@media screen and (min-width: 992px) {
|
|
348
|
+
pn-stats-info[data-stats-background-color=bluedarkest] .pn-stats-info-image-container {
|
|
349
|
+
background-color: #0D234B;
|
|
350
|
+
}
|
|
351
|
+
}
|
|
352
|
+
pn-stats-info[data-stats-background-color=bluedarkest] .pn-stats-info__container__content__heading,
|
|
353
|
+
pn-stats-info[data-stats-background-color=bluedarkest] .pn-stats-info-data__container__content {
|
|
354
|
+
color: #F06365;
|
|
355
|
+
}
|
|
356
|
+
pn-stats-info[data-stats-background-color=bluedarkest] .pn-stats-info-data__container__content__preamble {
|
|
357
|
+
color: #FFFFFF;
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
pn-stats-info[data-stats-background-color=greendarkest] .pn-stats-info__container__content,
|
|
361
|
+
pn-stats-info[data-stats-background-color=greendarkest] .pn-stats-info__container__map {
|
|
362
|
+
background-color: #005E41;
|
|
363
|
+
}
|
|
364
|
+
pn-stats-info[data-stats-background-color=greendarkest] .pn-stats-info-image-container {
|
|
365
|
+
background-color: transparent;
|
|
366
|
+
}
|
|
367
|
+
pn-stats-info[data-stats-background-color=greendarkest] .pn-stats-info-image-container [slot=illustration] {
|
|
368
|
+
background-color: #005E41;
|
|
369
|
+
}
|
|
370
|
+
@media screen and (min-width: 992px) {
|
|
371
|
+
pn-stats-info[data-stats-background-color=greendarkest] .pn-stats-info-image-container {
|
|
372
|
+
background-color: #005E41;
|
|
373
|
+
}
|
|
374
|
+
}
|
|
375
|
+
pn-stats-info[data-stats-background-color=greendarkest] .pn-stats-info__container__content__heading,
|
|
376
|
+
pn-stats-info[data-stats-background-color=greendarkest] .pn-stats-info-data__container__content {
|
|
377
|
+
color: #FFFFFF;
|
|
378
|
+
}
|
|
379
|
+
pn-stats-info[data-stats-background-color=greendarkest] .pn-stats-info-data__container__content__preamble {
|
|
380
|
+
color: #FFFFFF;
|
|
381
|
+
}
|
|
382
|
+
|
|
383
|
+
pn-stats-info[data-stats-background-color=greenlightest] .pn-stats-info__container__content,
|
|
384
|
+
pn-stats-info[data-stats-background-color=greenlightest] .pn-stats-info__container__map {
|
|
385
|
+
background-color: #EDFBF3;
|
|
386
|
+
}
|
|
387
|
+
pn-stats-info[data-stats-background-color=greenlightest] .pn-stats-info-image-container {
|
|
388
|
+
background-color: transparent;
|
|
389
|
+
}
|
|
390
|
+
pn-stats-info[data-stats-background-color=greenlightest] .pn-stats-info-image-container [slot=illustration] {
|
|
391
|
+
background-color: #EDFBF3;
|
|
392
|
+
}
|
|
393
|
+
@media screen and (min-width: 992px) {
|
|
394
|
+
pn-stats-info[data-stats-background-color=greenlightest] .pn-stats-info-image-container {
|
|
395
|
+
background-color: #EDFBF3;
|
|
396
|
+
}
|
|
397
|
+
}
|
|
398
|
+
pn-stats-info[data-stats-background-color=greenlightest] .pn-stats-info__container__content__heading,
|
|
399
|
+
pn-stats-info[data-stats-background-color=greenlightest] .pn-stats-info-data__container__content {
|
|
400
|
+
color: #005D92;
|
|
401
|
+
}
|
|
402
|
+
pn-stats-info[data-stats-background-color=greenlightest] .pn-stats-info-data__container__content__preamble {
|
|
403
|
+
color: #0D234B;
|
|
105
404
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { h, Host
|
|
2
|
-
const mockStringArray = '[{ "preamble": "Million parcels", "data": 226, "unit": null, "duration": 1000 }, { "preamble": "
|
|
1
|
+
import { h, Host } from '@stencil/core';
|
|
2
|
+
const mockStringArray = '[ { "preamble": "Million parcels", "data": 226, "unit": null, "duration": 1000 }, { "preamble": "Million parcels", "data": 226, "unit": null, "duration": 1000 },{"preamble": "carbon dioxide emissions since 2009", "data": -44, "unit": "%", "duration": 2000 }, { "preamble": "Million parcels", "data": 226, "unit": null, "duration": 1000 }]';
|
|
3
3
|
export class PnStatsInfo {
|
|
4
4
|
constructor() {
|
|
5
5
|
this.heading = 'Heading';
|
|
@@ -15,7 +15,7 @@ export class PnStatsInfo {
|
|
|
15
15
|
return Date.now();
|
|
16
16
|
}
|
|
17
17
|
render() {
|
|
18
|
-
return (h(Host, null, h("div", { class: "pn-stats-info__container" }, h("div", { class: "pn-stats-info__container__map", style: { backgroundImage: `url(${this.backgroundUrl})` } }), h("div", { class: "pn-stats-info__container__content", style: { backgroundImage: `url(${this.backgroundUrl})` } }, h("h3", { class: "pn-stats-info__container__content__heading" }, this.heading), h("div", { class: "pn-stats-info__container__content__data" }, this.myParsedArray &&
|
|
18
|
+
return (h(Host, null, h("div", { class: "pn-stats-info__container" }, h("div", { class: "pn-stats-info__container__map", style: { backgroundImage: `url(${this.backgroundUrl})` } }), h("div", { class: "pn-stats-info-image-container" }, h("slot", { name: "illustration" })), h("div", { class: "pn-stats-info__container__content", style: { backgroundImage: `url(${this.backgroundUrl})` } }, h("h3", { class: "pn-stats-info__container__content__heading" }, this.heading), h("div", { class: "pn-stats-info__container__content__data" }, this.myParsedArray &&
|
|
19
19
|
this.myParsedArray.map((stats, index) => {
|
|
20
20
|
return (h("pn-stats-info-data", { "comp-id": `${this.generateUniqueID()}-${index}`, data: stats.data, unit: stats.unit, preamble: stats.preamble, duration: stats.duration }));
|
|
21
21
|
}))))));
|
|
@@ -8,30 +8,116 @@ export default {
|
|
|
8
8
|
},
|
|
9
9
|
};
|
|
10
10
|
|
|
11
|
-
const
|
|
11
|
+
const ForComboBlockTemplate = ({ ...args }) => {
|
|
12
12
|
return `
|
|
13
|
-
<div style="height:1200px">
|
|
13
|
+
<div style="height:1200px" class="comboquotestatsblock">
|
|
14
14
|
<h1 style="text-align:center;">Scroll Down...</h1>
|
|
15
15
|
</div>
|
|
16
16
|
<div style="background-color:#0D234B;">
|
|
17
17
|
<div style="width:100%; max-width:1140px; margin:0 auto">
|
|
18
|
-
<pn-stats-info heading="${args.heading}" background-url="${args.backgroundUrl}">
|
|
18
|
+
<pn-stats-info heading="${args.heading}" data-stats-image="background" background-url="${args.backgroundUrl}">
|
|
19
19
|
</pn-stats-info>
|
|
20
20
|
</div>
|
|
21
|
-
|
|
21
|
+
</div>
|
|
22
22
|
<br/>
|
|
23
23
|
|
|
24
24
|
<div style="background-color:#0D234B;">
|
|
25
25
|
<div style="width:100%; max-width:1140px; margin:0 auto">
|
|
26
|
-
<pn-stats-info heading="${args.heading}" background-url="${args.backgroundUrl}">
|
|
26
|
+
<pn-stats-info heading="${args.heading}" data-stats-image="background" background-url="${args.backgroundUrl}" >
|
|
27
27
|
</pn-stats-info>
|
|
28
28
|
</div>
|
|
29
|
+
</div>
|
|
30
|
+
`;
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
const StandaloneTemplateNoImage = ({ ...args }) => {
|
|
34
|
+
return `
|
|
35
|
+
<pn-breakpoints></pn-breakpoints>
|
|
36
|
+
|
|
37
|
+
<div class="fullwidth statsblock" style="width:100%; max-width:1140px; margin:0 auto">
|
|
38
|
+
<pn-stats-info heading="${args.heading}" background-url="" data-stats-image="none" data-stats-background-color="greenlightest">
|
|
39
|
+
</pn-stats-info>
|
|
40
|
+
</div>
|
|
41
|
+
<br/>
|
|
42
|
+
<div class="fullwidth statsblock" style="width:100%; max-width:1140px; margin:0 auto">
|
|
43
|
+
<pn-stats-info heading="${args.heading}" background-url="" data-stats-image="none" data-stats-background-color="greendarkest">
|
|
44
|
+
</pn-stats-info>
|
|
45
|
+
</div>
|
|
46
|
+
<br/>
|
|
47
|
+
<div class="fullwidth statsblock" style="width:100%; max-width:1140px; margin:0 auto">
|
|
48
|
+
<pn-stats-info heading="${args.heading}" background-url="" data-stats-image="none" data-stats-background-color="bluedarkest">
|
|
49
|
+
</pn-stats-info>
|
|
50
|
+
</div>
|
|
51
|
+
`;
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
const StandAloneCenterImageTemplate = ({ ...args }) => {
|
|
55
|
+
return `
|
|
56
|
+
<pn-breakpoints></pn-breakpoints>
|
|
57
|
+
|
|
58
|
+
<div class="fullwidth statsblock" style="width:100%; max-width:1140px; margin:0 auto">
|
|
59
|
+
<pn-stats-info heading="${args.heading}" background-url="" data-stats-image="image" data-stats-background-color="bluedarkest">
|
|
60
|
+
<div slot="illustration">
|
|
61
|
+
<picture>
|
|
62
|
+
<img src="https://com-integration.postnord.com/contentassets/8008a14914564b5c999d2cea4e151bdd/man-driving.jpg?width=690&height=388&mode=crop&quality=80&anchor=topcenter" />
|
|
63
|
+
</picture>
|
|
64
|
+
</div>
|
|
65
|
+
</pn-stats-info>
|
|
66
|
+
</div>
|
|
67
|
+
|
|
68
|
+
<br/>
|
|
69
|
+
|
|
70
|
+
<div class="fullwidth statsblock" style="width:100%; max-width:1140px; margin:0 auto">
|
|
71
|
+
<pn-stats-info heading="${args.heading}" background-url="" data-stats-image="image" data-stats-background-color="greendarkest">
|
|
72
|
+
<div slot="illustration">
|
|
73
|
+
<picture>
|
|
74
|
+
<img src="https://com-integration.postnord.com/contentassets/f302a64bf3b5496aaf6f49d8d47e834e/bcdda39b3033ad8b_org.jpg?width=540&height=304&mode=crop&quality=80&anchor=topcenter" />
|
|
75
|
+
</picture>
|
|
76
|
+
</div>
|
|
77
|
+
</pn-stats-info>
|
|
29
78
|
</div>
|
|
30
79
|
`;
|
|
31
80
|
};
|
|
32
81
|
|
|
33
|
-
|
|
34
|
-
|
|
82
|
+
const StandAloneBackgroundImageTemplate = ({ ...args }) => {
|
|
83
|
+
return `
|
|
84
|
+
<pn-breakpoints></pn-breakpoints>
|
|
85
|
+
<div class="fullwidth statsblock" style="width:100%; max-width:1140px; margin:0 auto">
|
|
86
|
+
<pn-stats-info heading="${args.heading}" data-stats-image="background" background-url="${args.backgroundUrl}">
|
|
87
|
+
</pn-stats-info>
|
|
88
|
+
</div>
|
|
89
|
+
<br/>
|
|
90
|
+
|
|
91
|
+
<div class="fullwidth statsblock" style="width:100%; max-width:1140px; margin:0 auto">
|
|
92
|
+
<pn-stats-info heading="${args.heading}" data-stats-image="background" background-url="https://com-integration.postnord.com/globalassets/illustrations/product-hero-illustrations--transparent-background/illu-computer-option.svg" data-stats-background-color="greenlightest">
|
|
93
|
+
</pn-stats-info>
|
|
94
|
+
</div>
|
|
95
|
+
<br/>
|
|
96
|
+
<div class="fullwidth statsblock" style="width:100%; max-width:1140px; margin:0 auto">
|
|
97
|
+
<pn-stats-info heading="${args.heading}" data-stats-image="background" background-url="https://com-integration.postnord.com/contentassets/87e64ce0b9ce4acfafa0c26a1b11bd85/9b5aa1ae4698932c_org.png" data-stats-background-color="greendarkest">
|
|
98
|
+
</pn-stats-info>
|
|
99
|
+
</div>
|
|
100
|
+
`;
|
|
101
|
+
};
|
|
102
|
+
|
|
103
|
+
export const Combo = ForComboBlockTemplate.bind({});
|
|
104
|
+
Combo.args = {
|
|
35
105
|
heading: 'Postnord in figures 2022',
|
|
36
106
|
backgroundUrl: 'https://com-integration.postnord.com/siteassets/map.png?width=1410&height=793&mode=crop&quality=80',
|
|
37
107
|
};
|
|
108
|
+
|
|
109
|
+
export const StandaloneNoImage = StandaloneTemplateNoImage.bind({});
|
|
110
|
+
StandaloneNoImage.args = {
|
|
111
|
+
heading: 'Standalone Postnord in figures 2022',
|
|
112
|
+
};
|
|
113
|
+
|
|
114
|
+
export const StandAloneCenterImage = StandAloneCenterImageTemplate.bind({});
|
|
115
|
+
StandAloneCenterImage.args = {
|
|
116
|
+
heading: 'Standalone Center Image',
|
|
117
|
+
};
|
|
118
|
+
|
|
119
|
+
export const StandAloneBackGroundImage = StandAloneBackgroundImageTemplate.bind({});
|
|
120
|
+
StandAloneBackGroundImage.args = {
|
|
121
|
+
heading: 'Standalone BG Image 2023',
|
|
122
|
+
backgroundUrl: 'https://com-integration.postnord.com/siteassets/map.png?width=1410&height=793&mode=crop&quality=80',
|
|
123
|
+
};
|
package/custom-elements/index.js
CHANGED
|
@@ -28774,9 +28774,9 @@ const PnSpotlight$1 = class extends HTMLElement {
|
|
|
28774
28774
|
static get style() { return pnSpotlightCss; }
|
|
28775
28775
|
};
|
|
28776
28776
|
|
|
28777
|
-
const pnStatsInfoCss = ".bleed-container:has(pn-stats-info){padding:0;margin-bottom:3rem;overflow:hidden}.bleed-container:has(pn-stats-info) .container>.mb-5{margin-bottom:0 !important}.bleed-container:has(pn-stats-info) .statsblock{margin-bottom:0 !important}pn-stats-info{width:100%}pn-stats-info .pn-stats-info__container{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center;padding-top:2rem}@media screen and (min-width: 768px){pn-stats-info .pn-stats-info__container{padding-top:6rem}}@media screen and (min-width: 1200px){pn-stats-info .pn-stats-info__container{padding-top:8rem}}pn-stats-info .pn-stats-info__container__map{display:none}@media screen and (min-width: 768px){pn-stats-info .pn-stats-info__container__map{display:block;max-width:46rem;width:100%;background-color:#0D234B;background-repeat:no-repeat;background-position:bottom center;background-size:55%}}@media screen and (min-width: 1200px){pn-stats-info .pn-stats-info__container__map{background-size:contain}}pn-stats-info .pn-stats-info__container__content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;padding:1rem;width:100%;background-color:#0D234B;background-repeat:no-repeat;background-position:bottom left;background-size:50%;background-blend-mode:overlay;padding-bottom:2rem}@media screen and (min-width: 768px){pn-stats-info .pn-stats-info__container__content{max-width:540px;background-position:-999px -999px;background-size:0;padding-bottom:4rem;padding-right:4rem}}@media screen and (min-width: 1200px){pn-stats-info .pn-stats-info__container__content{max-width:100%;padding-bottom:6rem;padding-right:6rem}}pn-stats-info .pn-stats-info__container__content__heading{color:#F06365;margin-bottom:2.4rem;-ms-flex-item-align:center;align-self:center;text-align:center;font-size:3rem;line-height:110%}@media screen and (min-width: 1200px){pn-stats-info .pn-stats-info__container__content__heading{font-weight:700;font-size:4.8rem}}pn-stats-info .pn-stats-info__container__content__data{height:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;min-height:20rem}@media screen and (min-width: 1640px){pn-stats-info .pn-stats-info__container__content__data{width:65rem}}";
|
|
28777
|
+
const pnStatsInfoCss = "pn-stats-info .pn-stats-info__container{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center}pn-stats-info .pn-stats-info__container__map{display:none}pn-stats-info .pn-stats-info-image-container{display:none}pn-stats-info .pn-stats-info__container__content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;padding:2rem;width:100%;background-color:#0D234B;border-radius:24px}pn-stats-info .pn-stats-info__container__content__heading{color:#F06365;margin-bottom:2.4rem;-ms-flex-item-align:center;align-self:center;text-align:center;font-size:3rem;line-height:110%}@media screen and (min-width: 1200px){pn-stats-info .pn-stats-info__container__content__heading{font-weight:700;font-size:4.8rem}}pn-stats-info .pn-stats-info__container__content__data{height:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center;-ms-flex-wrap:wrap;flex-wrap:wrap;min-height:20rem;width:100%}@media screen and (min-width: 1640px){pn-stats-info .pn-stats-info__container__content__data{width:65rem}}pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(1){width:100%}pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(2),pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(2)~pn-stats-info-data{width:50%}pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(3n),pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(3n)~pn-stats-info-data{width:33%}pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(8),pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(8)~pn-stats-info-data{width:25%}pn-stats-info[data-stats-image=background] .pn-stats-info__container__map{display:none;border-top-left-radius:24px;border-bottom-left-radius:24px}@media screen and (min-width: 768px){pn-stats-info[data-stats-image=background] .pn-stats-info__container__map{display:block;max-width:46rem;width:100%;background-color:#0D234B;background-repeat:no-repeat;background-position:bottom center;background-size:55%}}@media screen and (min-width: 1200px){pn-stats-info[data-stats-image=background] .pn-stats-info__container__map{background-size:contain}}pn-stats-info[data-stats-image=background] .pn-stats-info-image-container{display:none}pn-stats-info[data-stats-image=background] .pn-stats-info__container__content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;padding:2rem;width:100%;background-color:#0D234B;background-repeat:no-repeat;background-position:bottom left;background-size:50%;background-blend-mode:overlay;padding-bottom:2rem;border-radius:24px}@media screen and (min-width: 768px){pn-stats-info[data-stats-image=background] .pn-stats-info__container__content{border-top-left-radius:0px;border-bottom-left-radius:0px;max-width:540px;background-position:-999px -999px;background-size:0;padding-bottom:4rem;padding-right:4rem}}@media screen and (min-width: 1200px){pn-stats-info[data-stats-image=background] .pn-stats-info__container__content{max-width:100%;padding-bottom:6rem;padding-right:6rem}}pn-stats-info[data-stats-image=background] .pn-stats-info__container__content__data{min-height:0}pn-stats-info[data-stats-image=background] .pn-stats-info__container__content__data .pn-stats-info-data__container{-ms-flex-pack:start;justify-content:flex-start}pn-stats-info[data-stats-image=image] .pn-stats-info__container{-ms-flex-direction:column;flex-direction:column;padding-top:0}@media screen and (min-width: 992px){pn-stats-info[data-stats-image=image] .pn-stats-info__container{-ms-flex-direction:row;flex-direction:row}}pn-stats-info[data-stats-image=image] .pn-stats-info__container__map{display:none}pn-stats-info[data-stats-image=image] .pn-stats-info-image-container{display:block;position:relative}pn-stats-info[data-stats-image=image] .pn-stats-info-image-container [slot=illustration]{border-top-left-radius:24px;border-top-right-radius:24px}pn-stats-info[data-stats-image=image] .pn-stats-info-image-container [slot=illustration]>picture>img{width:100%;height:auto;border-top-left-radius:24px;border-top-right-radius:24px}@media screen and (min-width: 992px){pn-stats-info[data-stats-image=image] .pn-stats-info-image-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;background-color:#0D234B;padding-left:40px;border-top-left-radius:24px;border-bottom-left-radius:24px}pn-stats-info[data-stats-image=image] .pn-stats-info-image-container [slot=illustration] img{-webkit-clip-path:circle(50%);clip-path:circle(50%);-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;aspect-ratio:1;max-width:450px}}pn-stats-info[data-stats-image=image] .pn-stats-info__container__content{width:100%;max-width:100%;border-bottom-right-radius:24px;border-bottom-left-radius:24px;border-top-right-radius:0;border-top-left-radius:0}@media screen and (min-width: 768px){pn-stats-info[data-stats-image=image] .pn-stats-info__container__content{-ms-flex-pack:center;justify-content:center}}@media screen and (min-width: 992px){pn-stats-info[data-stats-image=image] .pn-stats-info__container__content{border-top-right-radius:24px;border-bottom-right-radius:24px;border-bottom-left-radius:0;padding:50px 25px;max-width:100%}}@media screen and (min-width: 992px){pn-stats-info[data-stats-image=image] .pn-stats-info__container__content__heading{font-size:4.8rem}}pn-stats-info[data-stats-image=image] .pn-stats-info__container__content__data{width:100%;height:auto;min-height:0}pn-stats-info[data-stats-image=image] .pn-stats-info__container__content__data .pn-stats-info-data__container{-ms-flex-pack:start;justify-content:flex-start;min-height:56px}@media screen and (min-width: 768px){pn-stats-info[data-stats-image=image] .pn-stats-info__container__content__data .pn-stats-info-data__container{min-height:56px;padding:2.4rem}}@media screen and (min-width: 1200px){pn-stats-info[data-stats-image=image] .pn-stats-info__container__content__data .pn-stats-info-data__container{min-height:50px}}@media screen and (min-width: 992px){pn-stats-info[data-stats-image=image] .pn-stats-info__container__content__data .pn-stats-info-data__container__content__data{font-size:5.6rem}}@media screen and (min-width: 992px){pn-stats-info[data-stats-image=image] .pn-stats-info__container__content__data .pn-stats-info-data__container__content__unit{font-size:5.6rem}}.bleed-container:has(pn-stats-info){padding:0;margin-bottom:3rem;overflow:hidden}.bleed-container:has(pn-stats-info) .container>.mb-5{margin-bottom:0 !important}.bleed-container:has(pn-stats-info) .statsblock{margin-bottom:0 !important}.comboquotestatsblock pn-stats-info{width:100%}.comboquotestatsblock pn-stats-info .pn-stats-info__container{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center;padding-top:2rem}@media screen and (min-width: 768px){.comboquotestatsblock pn-stats-info .pn-stats-info__container{padding-top:6rem}}@media screen and (min-width: 1200px){.comboquotestatsblock pn-stats-info .pn-stats-info__container{padding-top:8rem}}.comboquotestatsblock pn-stats-info .pn-stats-info__container__map{display:none}@media screen and (min-width: 768px){.comboquotestatsblock pn-stats-info .pn-stats-info__container__map{display:block;max-width:46rem;width:100%;background-color:#0D234B;background-repeat:no-repeat;background-position:bottom center;background-size:55%}}@media screen and (min-width: 1200px){.comboquotestatsblock pn-stats-info .pn-stats-info__container__map{background-size:contain}}.comboquotestatsblock pn-stats-info .pn-stats-info-image-container{display:none}.comboquotestatsblock pn-stats-info .pn-stats-info__container__content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;padding:1rem;width:100%;background-color:#0D234B;background-repeat:no-repeat;background-position:bottom left;background-size:50%;background-blend-mode:overlay;padding-bottom:2rem}@media screen and (min-width: 768px){.comboquotestatsblock pn-stats-info .pn-stats-info__container__content{max-width:540px;background-position:-999px -999px;background-size:0;padding-bottom:4rem;padding-right:4rem}}@media screen and (min-width: 1200px){.comboquotestatsblock pn-stats-info .pn-stats-info__container__content{max-width:100%;padding-bottom:6rem;padding-right:6rem}}.comboquotestatsblock pn-stats-info .pn-stats-info__container__content__heading{color:#F06365;margin-bottom:2.4rem;-ms-flex-item-align:center;align-self:center;text-align:center;font-size:3rem;line-height:110%}@media screen and (min-width: 1200px){.comboquotestatsblock pn-stats-info .pn-stats-info__container__content__heading{font-weight:700;font-size:4.8rem}}.comboquotestatsblock pn-stats-info .pn-stats-info__container__content__data{height:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;min-height:20rem}@media screen and (min-width: 1640px){.comboquotestatsblock pn-stats-info .pn-stats-info__container__content__data{width:65rem}}pn-stats-info[data-stats-background-color=bluedarkest] .pn-stats-info__container__content,pn-stats-info[data-stats-background-color=bluedarkest] .pn-stats-info__container__map{background-color:#0D234B}pn-stats-info[data-stats-background-color=bluedarkest] .pn-stats-info-image-container{background-color:transparent}pn-stats-info[data-stats-background-color=bluedarkest] .pn-stats-info-image-container [slot=illustration]{background-color:#0D234B}@media screen and (min-width: 992px){pn-stats-info[data-stats-background-color=bluedarkest] .pn-stats-info-image-container{background-color:#0D234B}}pn-stats-info[data-stats-background-color=bluedarkest] .pn-stats-info__container__content__heading,pn-stats-info[data-stats-background-color=bluedarkest] .pn-stats-info-data__container__content{color:#F06365}pn-stats-info[data-stats-background-color=bluedarkest] .pn-stats-info-data__container__content__preamble{color:#FFFFFF}pn-stats-info[data-stats-background-color=greendarkest] .pn-stats-info__container__content,pn-stats-info[data-stats-background-color=greendarkest] .pn-stats-info__container__map{background-color:#005E41}pn-stats-info[data-stats-background-color=greendarkest] .pn-stats-info-image-container{background-color:transparent}pn-stats-info[data-stats-background-color=greendarkest] .pn-stats-info-image-container [slot=illustration]{background-color:#005E41}@media screen and (min-width: 992px){pn-stats-info[data-stats-background-color=greendarkest] .pn-stats-info-image-container{background-color:#005E41}}pn-stats-info[data-stats-background-color=greendarkest] .pn-stats-info__container__content__heading,pn-stats-info[data-stats-background-color=greendarkest] .pn-stats-info-data__container__content{color:#FFFFFF}pn-stats-info[data-stats-background-color=greendarkest] .pn-stats-info-data__container__content__preamble{color:#FFFFFF}pn-stats-info[data-stats-background-color=greenlightest] .pn-stats-info__container__content,pn-stats-info[data-stats-background-color=greenlightest] .pn-stats-info__container__map{background-color:#EDFBF3}pn-stats-info[data-stats-background-color=greenlightest] .pn-stats-info-image-container{background-color:transparent}pn-stats-info[data-stats-background-color=greenlightest] .pn-stats-info-image-container [slot=illustration]{background-color:#EDFBF3}@media screen and (min-width: 992px){pn-stats-info[data-stats-background-color=greenlightest] .pn-stats-info-image-container{background-color:#EDFBF3}}pn-stats-info[data-stats-background-color=greenlightest] .pn-stats-info__container__content__heading,pn-stats-info[data-stats-background-color=greenlightest] .pn-stats-info-data__container__content{color:#005D92}pn-stats-info[data-stats-background-color=greenlightest] .pn-stats-info-data__container__content__preamble{color:#0D234B}";
|
|
28778
28778
|
|
|
28779
|
-
const mockStringArray = '[{ "preamble": "Million parcels", "data": 226, "unit": null, "duration": 1000 }, { "preamble": "
|
|
28779
|
+
const mockStringArray = '[ { "preamble": "Million parcels", "data": 226, "unit": null, "duration": 1000 }, { "preamble": "Million parcels", "data": 226, "unit": null, "duration": 1000 },{"preamble": "carbon dioxide emissions since 2009", "data": -44, "unit": "%", "duration": 2000 }, { "preamble": "Million parcels", "data": 226, "unit": null, "duration": 1000 }]';
|
|
28780
28780
|
const PnStatsInfo$1 = class extends HTMLElement {
|
|
28781
28781
|
constructor() {
|
|
28782
28782
|
super();
|
|
@@ -28794,7 +28794,7 @@ const PnStatsInfo$1 = class extends HTMLElement {
|
|
|
28794
28794
|
return Date.now();
|
|
28795
28795
|
}
|
|
28796
28796
|
render() {
|
|
28797
|
-
return (h(Host, null, h("div", { class: "pn-stats-info__container" }, h("div", { class: "pn-stats-info__container__map", style: { backgroundImage: `url(${this.backgroundUrl})` } }), h("div", { class: "pn-stats-info__container__content", style: { backgroundImage: `url(${this.backgroundUrl})` } }, h("h3", { class: "pn-stats-info__container__content__heading" }, this.heading), h("div", { class: "pn-stats-info__container__content__data" }, this.myParsedArray &&
|
|
28797
|
+
return (h(Host, null, h("div", { class: "pn-stats-info__container" }, h("div", { class: "pn-stats-info__container__map", style: { backgroundImage: `url(${this.backgroundUrl})` } }), h("div", { class: "pn-stats-info-image-container" }, h("slot", { name: "illustration" })), h("div", { class: "pn-stats-info__container__content", style: { backgroundImage: `url(${this.backgroundUrl})` } }, h("h3", { class: "pn-stats-info__container__content__heading" }, this.heading), h("div", { class: "pn-stats-info__container__content__data" }, this.myParsedArray &&
|
|
28798
28798
|
this.myParsedArray.map((stats, index) => {
|
|
28799
28799
|
return (h("pn-stats-info-data", { "comp-id": `${this.generateUniqueID()}-${index}`, data: stats.data, unit: stats.unit, preamble: stats.preamble, duration: stats.duration }));
|
|
28800
28800
|
}))))));
|
|
@@ -28827,7 +28827,7 @@ const inViewport = (entries, toggleClass, isEntryIntersectingCallBack) => {
|
|
|
28827
28827
|
});
|
|
28828
28828
|
};
|
|
28829
28829
|
|
|
28830
|
-
const pnStatsInfoDataCss = "pn-stats-info-data{width:50
|
|
28830
|
+
const pnStatsInfoDataCss = "pn-stats-info-data{width:50%}pn-stats-info-data .pn-stats-info-data__container{width:100%;background-color:transparent;color:#F06365;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;padding:2rem}@media screen and (min-width: 768px){pn-stats-info-data .pn-stats-info-data__container{-ms-flex-pack:center;justify-content:center;min-height:102px;padding:0 2rem}}@media screen and (min-width: 1200px){pn-stats-info-data .pn-stats-info-data__container{min-height:125px}}pn-stats-info-data .pn-stats-info-data__container__content{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center}pn-stats-info-data .pn-stats-info-data__container__content__data{font-weight:700;font-size:3rem;line-height:110%}@media screen and (min-width: 1200px){pn-stats-info-data .pn-stats-info-data__container__content__data{font-size:5.6rem}}pn-stats-info-data .pn-stats-info-data__container__content__unit{font-weight:700;font-size:3rem;line-height:110%}@media screen and (min-width: 1200px){pn-stats-info-data .pn-stats-info-data__container__content__unit{font-size:5.6rem}}pn-stats-info-data .pn-stats-info-data__container__content__preamble{text-align:center;font-weight:400;font-size:1.4rem;line-height:110%;color:#FFFFFF}";
|
|
28831
28831
|
|
|
28832
28832
|
const PnStatsInfoData$1 = class extends HTMLElement {
|
|
28833
28833
|
constructor() {
|
|
@@ -28970,7 +28970,7 @@ const PnSiteFooterCol = /*@__PURE__*/proxyCustomElement(PnSiteFooterCol$1, [4,"p
|
|
|
28970
28970
|
const PnSiteSelector = /*@__PURE__*/proxyCustomElement(PnSiteSelector$1, [4,"pn-site-selector",{"buttontext":[1537],"heading":[1537],"language":[1537],"i18n":[32]}]);
|
|
28971
28971
|
const PnSiteSelectorItem = /*@__PURE__*/proxyCustomElement(PnSiteSelectorItem$1, [0,"pn-site-selector-item",{"url":[1],"heading":[1],"description":[1],"newwindow":[4]}]);
|
|
28972
28972
|
const PnSpotlight = /*@__PURE__*/proxyCustomElement(PnSpotlight$1, [4,"pn-spotlight",{"heading":[1],"preamble":[1]}]);
|
|
28973
|
-
const PnStatsInfo = /*@__PURE__*/proxyCustomElement(PnStatsInfo$1, [
|
|
28973
|
+
const PnStatsInfo = /*@__PURE__*/proxyCustomElement(PnStatsInfo$1, [4,"pn-stats-info",{"heading":[1],"dataArray":[1,"data-array"],"backgroundUrl":[1,"background-url"],"myParsedArray":[32]}]);
|
|
28974
28974
|
const PnStatsInfoData = /*@__PURE__*/proxyCustomElement(PnStatsInfoData$1, [0,"pn-stats-info-data",{"data":[2],"unit":[1],"preamble":[1],"compId":[1,"comp-id"],"duration":[2],"hasBeenShown":[32]}]);
|
|
28975
28975
|
const PnTeaserCard = /*@__PURE__*/proxyCustomElement(PnTeaserCard$1, [4,"pn-teaser-card",{"text":[1],"heading":[1],"label":[1],"dataCardColor":[513,"data-card-color"],"dataCardAlignment":[513,"data-card-alignment"],"hasCtaSlotContent":[32],"hasIllustrationSlot":[32]}]);
|
|
28976
28976
|
const PnTitletag = /*@__PURE__*/proxyCustomElement(PnTiletag, [4,"pn-titletag",{"icon":[1],"color":[1537]}]);
|