@postnord/pn-marketweb-components 2.2.7 → 2.2.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (50) hide show
  1. package/cjs/loader.cjs.js +1 -1
  2. package/cjs/pn-market-web-components.cjs.js +1 -1
  3. package/cjs/pn-marketweb-sitefooter.cjs.entry.js +1 -1
  4. package/cjs/pn-quote-card.cjs.entry.js +1 -1
  5. package/cjs/pn-scroll.cjs.entry.js +58 -0
  6. package/cjs/pn-stats-info-data.cjs.entry.js +2 -66
  7. package/cjs/v4-45e08b63.js +68 -0
  8. package/collection/collection-manifest.json +1 -0
  9. package/collection/components/animation/pn-scroll.css +15 -0
  10. package/collection/components/animation/pn-scroll.js +137 -0
  11. package/collection/components/animation/pn-scroll.stories.js +145 -0
  12. package/collection/components/cards/pn-quote-card/pn-quote-card.css +1 -0
  13. package/collection/components/cards/pn-quote-card/pn-quote-card.stories.js +1 -1
  14. package/collection/components/layout-components/pn-marketweb-sitefooter/pn-marketweb-sitefooter.css +22 -9
  15. package/collection/components/layout-components/pn-marketweb-sitefooter/pn-marketweb-sitefooter.stories.js +1 -2
  16. package/custom-elements/index.d.ts +6 -0
  17. package/custom-elements/index.js +121 -68
  18. package/esm/loader.js +1 -1
  19. package/esm/pn-market-web-components.js +1 -1
  20. package/esm/pn-marketweb-sitefooter.entry.js +1 -1
  21. package/esm/pn-quote-card.entry.js +1 -1
  22. package/esm/pn-scroll.entry.js +54 -0
  23. package/esm/pn-stats-info-data.entry.js +1 -65
  24. package/esm/v4-f450efa7.js +66 -0
  25. package/esm-es5/loader.js +1 -1
  26. package/esm-es5/pn-market-web-components.js +1 -1
  27. package/esm-es5/pn-marketweb-sitefooter.entry.js +1 -1
  28. package/esm-es5/pn-quote-card.entry.js +1 -1
  29. package/esm-es5/pn-scroll.entry.js +1 -0
  30. package/esm-es5/pn-stats-info-data.entry.js +1 -1
  31. package/esm-es5/v4-f450efa7.js +1 -0
  32. package/package.json +1 -1
  33. package/pn-market-web-components/p-3343610e.entry.js +1 -0
  34. package/pn-market-web-components/p-41220f82.system.entry.js +1 -0
  35. package/pn-market-web-components/p-5b9144fd.system.entry.js +1 -0
  36. package/pn-market-web-components/p-67887512.system.js +1 -1
  37. package/pn-market-web-components/p-acf5fe7a.entry.js +1 -0
  38. package/pn-market-web-components/p-d3d7fec8.js +1 -0
  39. package/pn-market-web-components/p-dc4a66ad.entry.js +1 -0
  40. package/pn-market-web-components/{p-249964b5.entry.js → p-dd0b02de.entry.js} +1 -1
  41. package/pn-market-web-components/p-e351523a.system.js +1 -0
  42. package/pn-market-web-components/{p-d57f4246.system.entry.js → p-ed990629.system.entry.js} +1 -1
  43. package/pn-market-web-components/p-f64a7188.system.entry.js +1 -0
  44. package/pn-market-web-components/pn-market-web-components.esm.js +1 -1
  45. package/types/components/animation/pn-scroll.d.ts +12 -0
  46. package/types/components.d.ts +21 -0
  47. package/pn-market-web-components/p-0862b4b6.entry.js +0 -1
  48. package/pn-market-web-components/p-28c4b4d9.system.entry.js +0 -1
  49. package/pn-market-web-components/p-c5f98650.entry.js +0 -1
  50. package/pn-market-web-components/p-d05ab060.system.entry.js +0 -1
package/collection/components/animation/pn-scroll.js ADDED
@@ -0,0 +1,137 @@
1
+ import { v4 as uuidv4 } from 'uuid';
2
+ import { Component, Element, h, Host, Prop, State } from '@stencil/core';
3
+ const defaultIntersectionCallback = (entries, observer, shouldLoop = false) => {
4
+ entries.forEach(entry => {
5
+ if (!shouldLoop) {
6
+ if (entry.isIntersecting) {
7
+ entry.target.classList.add('in-view');
8
+ //stop observering after added
9
+ observer.unobserve(entry.target);
10
+ }
11
+ }
12
+ else {
13
+ //toggle and keep observing and toggling, for continous behavior on element
14
+ entry.target.classList.toggle('in-view', entry.isIntersecting);
15
+ }
16
+ });
17
+ };
18
+ const defaultObserverOptions = {
19
+ root: null,
20
+ threshold: 0.2,
21
+ };
22
+ const SCROLL_ID = `pn-scroll-wrapper-id-`;
23
+ export class PnScroll {
24
+ constructor() {
25
+ this.intersectionCustomCallback = defaultIntersectionCallback;
26
+ this.observerOptions = defaultObserverOptions;
27
+ this.behaviourClasses = 'fade slide-up';
28
+ this.transitionDurationSeconds = 0.5;
29
+ this.compId = null;
30
+ }
31
+ generateUniqueId() {
32
+ return uuidv4();
33
+ }
34
+ //on load, generate unique id for this wrapper
35
+ componentWillLoad() {
36
+ this.compId = this.generateUniqueId();
37
+ }
38
+ componentDidLoad() {
39
+ const observer = new IntersectionObserver(this.intersectionCustomCallback, this.observerOptions);
40
+ const objectToObserve = document.getElementById(`${SCROLL_ID}${this.compId}`);
41
+ observer.observe(objectToObserve);
42
+ }
43
+ render() {
44
+ return (h(Host, null,
45
+ h("div", { class: `scroll-wrapper ${this.behaviourClasses}`, id: `${SCROLL_ID}${this.compId}`, style: { '--transition-duration': `${this.transitionDurationSeconds}s` } },
46
+ h("slot", { name: "scroll-affected" }))));
47
+ }
48
+ static get is() { return "pn-scroll"; }
49
+ static get originalStyleUrls() { return {
50
+ "$": ["pn-scroll.scss"]
51
+ }; }
52
+ static get styleUrls() { return {
53
+ "$": ["pn-scroll.css"]
54
+ }; }
55
+ static get properties() { return {
56
+ "intersectionCustomCallback": {
57
+ "type": "unknown",
58
+ "mutable": false,
59
+ "complexType": {
60
+ "original": "IntersectionObserverCallback",
61
+ "resolved": "IntersectionObserverCallback",
62
+ "references": {
63
+ "IntersectionObserverCallback": {
64
+ "location": "global"
65
+ }
66
+ }
67
+ },
68
+ "required": false,
69
+ "optional": false,
70
+ "docs": {
71
+ "tags": [],
72
+ "text": ""
73
+ },
74
+ "defaultValue": "defaultIntersectionCallback"
75
+ },
76
+ "observerOptions": {
77
+ "type": "unknown",
78
+ "mutable": false,
79
+ "complexType": {
80
+ "original": "IntersectionObserverInit",
81
+ "resolved": "IntersectionObserverInit",
82
+ "references": {
83
+ "IntersectionObserverInit": {
84
+ "location": "global"
85
+ }
86
+ }
87
+ },
88
+ "required": false,
89
+ "optional": false,
90
+ "docs": {
91
+ "tags": [],
92
+ "text": ""
93
+ },
94
+ "defaultValue": "defaultObserverOptions"
95
+ },
96
+ "behaviourClasses": {
97
+ "type": "string",
98
+ "mutable": false,
99
+ "complexType": {
100
+ "original": "string",
101
+ "resolved": "string",
102
+ "references": {}
103
+ },
104
+ "required": false,
105
+ "optional": false,
106
+ "docs": {
107
+ "tags": [],
108
+ "text": ""
109
+ },
110
+ "attribute": "behaviour-classes",
111
+ "reflect": false,
112
+ "defaultValue": "'fade slide-up'"
113
+ },
114
+ "transitionDurationSeconds": {
115
+ "type": "number",
116
+ "mutable": false,
117
+ "complexType": {
118
+ "original": "number",
119
+ "resolved": "number",
120
+ "references": {}
121
+ },
122
+ "required": false,
123
+ "optional": false,
124
+ "docs": {
125
+ "tags": [],
126
+ "text": ""
127
+ },
128
+ "attribute": "transition-duration-seconds",
129
+ "reflect": false,
130
+ "defaultValue": "0.5"
131
+ }
132
+ }; }
133
+ static get states() { return {
134
+ "compId": {}
135
+ }; }
136
+ static get elementRef() { return "hostElement"; }
137
+ }
package/collection/components/animation/pn-scroll.stories.js ADDED
@@ -0,0 +1,145 @@
1
+ import readme from './readme.md';
2
+
3
+ export default {
4
+ title: 'Scroller/Fade',
5
+ parameters: {
6
+ notes: readme,
7
+ layout: 'fullscreen',
8
+ },
9
+ };
10
+
11
+ const ScrollTemplateFade = args => {
12
+ args.intersectionCallback = customIntersectionCallback;
13
+ args.observerOptions = customObserverOptions;
14
+
15
+ return `
16
+ <br>
17
+ <p>Scroll down...</p>
18
+ <br>
19
+ <br>
20
+ <br>
21
+ <br>
22
+ <br>
23
+ <br>
24
+ <br>
25
+ <br>
26
+ <br>
27
+ <br>
28
+ <br>
29
+ <br>
30
+ <br>
31
+ <br>
32
+ <br>
33
+ <br>
34
+ <br>
35
+ <br>
36
+ <br>
37
+ <br>
38
+ <br>
39
+ <br>
40
+ <br>
41
+ <br>
42
+ <br>
43
+ <br>
44
+ <br>
45
+ <br>
46
+ <br>
47
+ <br>
48
+ <br>
49
+ <br>
50
+ <br>
51
+ <br>
52
+ <br>
53
+ <br>
54
+ <br>
55
+ <br>
56
+ <br>
57
+ <br>
58
+ <br>
59
+ <br>
60
+ <br>
61
+ <br>
62
+ <pn-scroll><p slot="scroll-affected">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque fringilla sem sed lectus convallis, sit amet posuere dolor imperdiet. Morbi in arcu consectetur, ultricies orci et, dignissim magna. Nulla nec erat sed mi eleifend efficitur. Donec placerat felis vel cursus mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean facilisis purus id arcu consequat facilisis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam interdum nulla a odio facilisis sodales. Vivamus finibus vestibulum orci nec rutrum. Aenean in ullamcorper eros, eget hendrerit quam.</p></pn-scroll>
63
+ <br>
64
+ <br>
65
+ <br>
66
+ <br>
67
+ <br>
68
+ <br>
69
+ <br>
70
+ <pn-scroll><p slot="scroll-affected">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque fringilla sem sed lectus convallis, sit amet posuere dolor imperdiet. Morbi in arcu consectetur, ultricies orci et, dignissim magna. Nulla nec erat sed mi eleifend efficitur. Donec placerat felis vel cursus mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean facilisis purus id arcu consequat facilisis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam interdum nulla a odio facilisis sodales. Vivamus finibus vestibulum orci nec rutrum. Aenean in ullamcorper eros, eget hendrerit quam.</p></pn-scroll>
71
+ <br>
72
+ <br>
73
+ <br>
74
+ <br>
75
+ <br>
76
+ <br>
77
+ <br>
78
+ <pn-scroll><p slot="scroll-affected">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque fringilla sem sed lectus convallis, sit amet posuere dolor imperdiet. Morbi in arcu consectetur, ultricies orci et, dignissim magna. Nulla nec erat sed mi eleifend efficitur. Donec placerat felis vel cursus mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean facilisis purus id arcu consequat facilisis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam interdum nulla a odio facilisis sodales. Vivamus finibus vestibulum orci nec rutrum. Aenean in ullamcorper eros, eget hendrerit quam.</p></pn-scroll>
79
+ <br>
80
+ <br>
81
+ <br>
82
+ <br>
83
+ <br>
84
+ <br>
85
+ <br>
86
+ <br>
87
+ <br>
88
+ <br>
89
+ <br>
90
+ <br>
91
+ <br>
92
+ <br>
93
+ <br>
94
+ <br>
95
+ <br>
96
+ <br>
97
+ <br>
98
+ <br>
99
+ <br>
100
+ <br>
101
+ <br>
102
+ <br>
103
+ <br>
104
+ <br>
105
+ <br>
106
+ <br>
107
+ <br>
108
+ <br>
109
+ <br>
110
+ <br>
111
+ <br>
112
+ <br>
113
+ <br>
114
+ <br>
115
+ <br>
116
+ <br>
117
+ <br>
118
+ <br>
119
+ <br>
120
+ <br>
121
+ <br>
122
+ <br>
123
+ <br>
124
+ <br>
125
+ <br>
126
+ `;
127
+ };
128
+
129
+ export const ScrollFade = ScrollTemplateFade.bind({});
130
+ ScrollFade.args = {
131
+ //intersectionCallback: customIntersectionCallack,
132
+ //observerOptions: customObserverOptions,
133
+ };
134
+
135
+ const customIntersectionCallback = (entries /*:IntersectionObserverEntry[]*/, observer /*:IntersectionObserver*/) => {
136
+ entries.forEach(entry => {
137
+ entry.target.classList.toggle('in-view', entry.isIntersecting);
138
+ //check more here perhaps
139
+ });
140
+ };
141
+
142
+ const customObserverOptions = {
143
+ root: null,
144
+ threshold: 20, //percent visible before "isIntersecting"
145
+ };
package/collection/components/cards/pn-quote-card/pn-quote-card.css CHANGED
@@ -56,6 +56,7 @@ pn-quote-card [slot=illustration-big] picture {
56
56
  pn-quote-card [slot=illustration] picture img,
57
57
  pn-quote-card [slot=illustration-big] picture img {
58
58
  clip-path: circle(50%);
59
+ max-width: unset;
59
60
  }
60
61
 
61
62
  pn-quote-card [slot=horizontal-line],
package/collection/components/cards/pn-quote-card/pn-quote-card.stories.js CHANGED
@@ -44,7 +44,7 @@ QuotePage.args = {
44
44
  photoUrl:
45
45
  'https://com-integration.postnord.com/globalassets/images/hero-article-photos/smiling-customer-service-worker-with-headset.jpg?width=240&height=240&mode=crop&quality=80',
46
46
  name: 'Jenny Jennysson',
47
- occupation: 'Owner at Headsets for All',
47
+ occupation: 'Owner at Headsets for All And some longer text here',
48
48
  };
49
49
 
50
50
  const TemplateQuoteCardStartPage = ({ ...args }) => {
package/collection/components/layout-components/pn-marketweb-sitefooter/pn-marketweb-sitefooter.css CHANGED
@@ -41,14 +41,16 @@ pn-marketweb-sitefooter:not([theme=dotcom]) [slot=bottomsocialmediamobile] .trus
41
41
  }
42
42
  }
43
43
 
44
- div[slot=middle-extra-mobile], div[slot=middle-extra] {
44
+ div[slot=middle-extra-mobile],
45
+ div[slot=middle-extra] {
45
46
  display: none;
46
47
  }
47
48
 
48
49
  pn-marketweb-sitefooter[theme=dotcom] {
49
50
  width: 100%;
50
51
  }
51
- pn-marketweb-sitefooter[theme=dotcom] div[slot=bottomsocialmediamobile], pn-marketweb-sitefooter[theme=dotcom] div[slot=bottomsocialmediadesktop] {
52
+ pn-marketweb-sitefooter[theme=dotcom] div[slot=bottomsocialmediamobile],
53
+ pn-marketweb-sitefooter[theme=dotcom] div[slot=bottomsocialmediadesktop] {
52
54
  display: none;
53
55
  }
54
56
  pn-marketweb-sitefooter[theme=dotcom] div[slot=middle-extra-mobile] {
@@ -74,7 +76,8 @@ pn-marketweb-sitefooter[theme=dotcom][backgroundcolor=darkestblue] pn-site-foote
74
76
  pn-marketweb-sitefooter[theme=dotcom][backgroundcolor=blue] pn-site-footer[theme=dotcom] {
75
77
  background-color: #005D92;
76
78
  }
77
- pn-marketweb-sitefooter[theme=dotcom][backgroundcolor=blue] pn-site-footer[theme=dotcom] .pn-sitefooter-top, pn-marketweb-sitefooter[theme=dotcom][backgroundcolor=blue] pn-site-footer[theme=dotcom] .pn-sitefooter-bottom {
79
+ pn-marketweb-sitefooter[theme=dotcom][backgroundcolor=blue] pn-site-footer[theme=dotcom] .pn-sitefooter-top,
80
+ pn-marketweb-sitefooter[theme=dotcom][backgroundcolor=blue] pn-site-footer[theme=dotcom] .pn-sitefooter-bottom {
78
81
  background-color: #005D92;
79
82
  }
80
83
  pn-marketweb-sitefooter[theme=dotcom][backgroundcolor=blue] pn-site-footer[theme=dotcom] > svg path {
@@ -96,7 +99,8 @@ pn-marketweb-sitefooter[theme=dotcom][backgroundcolor=gray] pn-site-footer[theme
96
99
  pn-marketweb-sitefooter[theme=dotcom][backgroundcolor=gray] pn-site-footer[theme=dotcom] > svg path {
97
100
  fill: #F3F2F2;
98
101
  }
99
- pn-marketweb-sitefooter[theme=dotcom][backgroundcolor=gray] pn-site-footer[theme=dotcom] .pn-sitefooter-top, pn-marketweb-sitefooter[theme=dotcom][backgroundcolor=gray] pn-site-footer[theme=dotcom] .pn-sitefooter-bottom {
102
+ pn-marketweb-sitefooter[theme=dotcom][backgroundcolor=gray] pn-site-footer[theme=dotcom] .pn-sitefooter-top,
103
+ pn-marketweb-sitefooter[theme=dotcom][backgroundcolor=gray] pn-site-footer[theme=dotcom] .pn-sitefooter-bottom {
100
104
  background-color: #F3F2F2;
101
105
  }
102
106
  pn-marketweb-sitefooter[theme=dotcom][backgroundcolor=gray] pn-site-footer[theme=dotcom] .pn-sitefooter-bottom .social-media {
@@ -106,15 +110,21 @@ pn-marketweb-sitefooter[theme=dotcom][backgroundcolor=gray] pn-site-footer[theme
106
110
  pn-marketweb-sitefooter[theme=dotcom][backgroundcolor=gray] pn-site-footer[theme=dotcom] .pn-sitefooter-bottom .social-media li svg circle {
107
111
  fill: #005D92;
108
112
  }
113
+ pn-marketweb-sitefooter[theme=dotcom][backgroundcolor=gray] pn-site-footer[theme=dotcom] .pn-sitefooter-bottom .social-media li svg:hover > circle {
114
+ fill: #00A0D6;
115
+ }
109
116
  pn-marketweb-sitefooter[theme=dotcom][backgroundcolor=gray] pn-site-footer[theme=dotcom] .pn-sitefooter-bottom > [slot=bottom] > .copyright * {
110
- color: #0D234B;
117
+ color: #005D92;
111
118
  }
112
119
  pn-marketweb-sitefooter[theme=dotcom][backgroundcolor=gray] pn-site-footer[theme=dotcom] pn-site-footer-col[theme=dotcom] * {
113
120
  color: #0D234B;
114
121
  }
115
- pn-marketweb-sitefooter[theme=dotcom][backgroundcolor=gray] pn-site-footer[theme=dotcom] pn-site-footer-col[theme=dotcom] * svg path {
122
+ pn-marketweb-sitefooter[theme=dotcom][backgroundcolor=gray] pn-site-footer[theme=dotcom] pn-site-footer-col[theme=dotcom] svg path {
116
123
  fill: #0D234B;
117
124
  }
125
+ pn-marketweb-sitefooter[theme=dotcom][backgroundcolor=gray] pn-site-footer[theme=dotcom] pn-site-footer-col[theme=dotcom] a:not(h3) {
126
+ color: #005D92;
127
+ }
118
128
 
119
129
  pn-marketweb-sitefooter[theme=tpl] pn-site-footer {
120
130
  background-color: #0D234B;
@@ -145,14 +155,17 @@ pn-marketweb-sitefooter[theme=tpl] div.pn-sitefooter-bottom a:hover {
145
155
  text-decoration: underline;
146
156
  color: #FFFFFF;
147
157
  }
148
- pn-marketweb-sitefooter[theme=tpl] .pn-sitefooter-top, pn-marketweb-sitefooter[theme=tpl] .pn-sitefooter-logo {
158
+ pn-marketweb-sitefooter[theme=tpl] .pn-sitefooter-top,
159
+ pn-marketweb-sitefooter[theme=tpl] .pn-sitefooter-logo {
149
160
  background-color: #0D234B;
150
161
  color: #FFFFFF;
151
162
  }
152
- pn-marketweb-sitefooter[theme=tpl] .pn-sitefooter-top a, pn-marketweb-sitefooter[theme=tpl] .pn-sitefooter-logo a {
163
+ pn-marketweb-sitefooter[theme=tpl] .pn-sitefooter-top a,
164
+ pn-marketweb-sitefooter[theme=tpl] .pn-sitefooter-logo a {
153
165
  color: #FBC2C1;
154
166
  }
155
- pn-marketweb-sitefooter[theme=tpl] .pn-sitefooter-top a:hover, pn-marketweb-sitefooter[theme=tpl] .pn-sitefooter-logo a:hover {
167
+ pn-marketweb-sitefooter[theme=tpl] .pn-sitefooter-top a:hover,
168
+ pn-marketweb-sitefooter[theme=tpl] .pn-sitefooter-logo a:hover {
156
169
  text-decoration: underline;
157
170
  color: #FBC2C1;
158
171
  }
package/collection/components/layout-components/pn-marketweb-sitefooter/pn-marketweb-sitefooter.stories.js CHANGED
@@ -162,7 +162,7 @@ export const GrayDotCom = TemplateGrayDotCom.bind({});
162
162
  GrayDotCom.args = {
163
163
  market: 'com',
164
164
  language: 'en',
165
- endpoint: 'https://com-integration.postnord.com',
165
+ endpoint: 'http://localhost:51444/',
166
166
  };
167
167
 
168
168
  const TemplateTPL = ({ ...args }) => {
@@ -183,7 +183,6 @@ const TemplateTPL = ({ ...args }) => {
183
183
  `;
184
184
  };
185
185
 
186
-
187
186
  export const TPL = TemplateTPL.bind({});
188
187
  TPL.args = {
189
188
  market: 'tpl',
package/custom-elements/index.d.ts CHANGED
@@ -344,6 +344,12 @@ export const PnQuoteCard: {
344
344
  new (): PnQuoteCard;
345
345
  };
346
346
 
347
+ interface PnScroll extends Components.PnScroll, HTMLElement {}
348
+ export const PnScroll: {
349
+ prototype: PnScroll;
350
+ new (): PnScroll;
351
+ };
352
+
347
353
  interface PnShare extends Components.PnShare, HTMLElement {}
348
354
  export const PnShare: {
349
355
  prototype: PnShare;