@postnord/pn-marketweb-components 2.9.1 → 2.9.2
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/pn-cta-block.cjs.entry.js +7 -2
- package/cjs/pn-usp-promoter.cjs.entry.js +9 -4
- package/collection/components/cta/pn-cta-block/cta-block.stories.js +90 -21
- package/collection/components/cta/pn-cta-block/pn-cta-block.css +35 -20
- package/collection/components/cta/pn-cta-block/pn-cta-block.js +6 -1
- package/collection/components/widgets/pn-usp-promoter/pn-usp-promoter.css +12 -3
- package/collection/components/widgets/pn-usp-promoter/pn-usp-promoter.js +8 -3
- package/collection/components/widgets/pn-usp-promoter/usp-promoter.stories.js +13 -13
- package/collection/globals/storybookGlobals.js +10 -0
- package/components/pn-cta-block.js +7 -2
- package/components/pn-usp-promoter.js +9 -4
- package/esm/pn-cta-block.entry.js +7 -2
- package/esm/pn-usp-promoter.entry.js +9 -4
- package/esm-es5/pn-cta-block.entry.js +1 -1
- package/esm-es5/pn-usp-promoter.entry.js +1 -1
- package/package.json +1 -1
- package/pn-market-web-components/p-4f6ebbda.system.entry.js +1 -0
- package/pn-market-web-components/p-6f853c29.system.js +1 -1
- package/pn-market-web-components/p-928ced33.system.entry.js +1 -0
- package/pn-market-web-components/p-9f6c833e.entry.js +1 -0
- package/pn-market-web-components/p-b0055a00.entry.js +1 -0
- package/pn-market-web-components/pn-market-web-components.esm.js +1 -1
- package/types/globals/storybookGlobals.d.ts +10 -0
- package/pn-market-web-components/p-395105d0.system.entry.js +0 -1
- package/pn-market-web-components/p-a2ed2bf6.entry.js +0 -1
- package/pn-market-web-components/p-df1142cc.entry.js +0 -1
- package/pn-market-web-components/p-e4d68a16.system.entry.js +0 -1
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import readme from "./readme.md";
|
|
2
|
+
import { imageUrls, appImages} from "../../../globals/storybookGlobals";
|
|
2
3
|
|
|
3
4
|
export default {
|
|
4
5
|
title: "widgets/Usp Promoter",
|
|
5
6
|
parameters: {
|
|
6
7
|
notes: readme
|
|
7
|
-
}
|
|
8
|
+
},
|
|
8
9
|
};
|
|
9
10
|
|
|
10
11
|
const Template = ({ ...args }) => {
|
|
@@ -20,10 +21,10 @@ const Template = ({ ...args }) => {
|
|
|
20
21
|
hide-mobile-image="${args.hideMobileImage}">
|
|
21
22
|
<div slot="app-store">
|
|
22
23
|
<a href="http://www.apple.com">
|
|
23
|
-
<img src="
|
|
24
|
+
<img src="${appImages.postnordAppStore}">
|
|
24
25
|
</a>
|
|
25
26
|
<a href="http://www.google.com">
|
|
26
|
-
<img src="
|
|
27
|
+
<img src="${appImages.postnordGooglePlay}">
|
|
27
28
|
</a>
|
|
28
29
|
</div>
|
|
29
30
|
<div slot="usp-buttons">
|
|
@@ -33,7 +34,7 @@ const Template = ({ ...args }) => {
|
|
|
33
34
|
<pn-scroll>
|
|
34
35
|
<div slot="scroll-affected">
|
|
35
36
|
<picture>
|
|
36
|
-
<img src="
|
|
37
|
+
<img src="${imageUrls.mobileIllustration}" />
|
|
37
38
|
</picture>
|
|
38
39
|
</div>
|
|
39
40
|
</pn-scroll>
|
|
@@ -41,7 +42,7 @@ const Template = ({ ...args }) => {
|
|
|
41
42
|
<pn-scroll>
|
|
42
43
|
<div slot="scroll-affected">
|
|
43
44
|
<picture>
|
|
44
|
-
<img src="
|
|
45
|
+
<img src="${imageUrls.mobileIllustration}" />
|
|
45
46
|
</picture>
|
|
46
47
|
</div>
|
|
47
48
|
</pn-scroll>
|
|
@@ -60,7 +61,6 @@ Primary.args = {
|
|
|
60
61
|
backgroundGradient: "linear-gradient(90deg, #FFF 47.46%, #EFFBFF 70.86%)",
|
|
61
62
|
fullWidth: true,
|
|
62
63
|
rightAlign: true,
|
|
63
|
-
hideMobileImage: false,
|
|
64
64
|
};
|
|
65
65
|
|
|
66
66
|
const WithImageTemplate = ({ ...args }) => {
|
|
@@ -75,10 +75,10 @@ const WithImageTemplate = ({ ...args }) => {
|
|
|
75
75
|
hide-mobile-image="${args.hideMobileImage}">
|
|
76
76
|
<div slot="app-store">
|
|
77
77
|
<a href="http://www.apple.com">
|
|
78
|
-
<img src="
|
|
78
|
+
<img src="${appImages.postnordAppStore}">
|
|
79
79
|
</a>
|
|
80
80
|
<a href="http://www.google.com">
|
|
81
|
-
<img src="
|
|
81
|
+
<img src="${appImages.postnordGooglePlay}">
|
|
82
82
|
</a>
|
|
83
83
|
</div>
|
|
84
84
|
<div slot="usp-buttons">
|
|
@@ -88,7 +88,7 @@ const WithImageTemplate = ({ ...args }) => {
|
|
|
88
88
|
<pn-scroll>
|
|
89
89
|
<div slot="scroll-affected">
|
|
90
90
|
<picture>
|
|
91
|
-
<img src="
|
|
91
|
+
<img src="${imageUrls.mobileIllustration}" />
|
|
92
92
|
</picture>
|
|
93
93
|
</div>
|
|
94
94
|
</pn-scroll>
|
|
@@ -96,7 +96,7 @@ const WithImageTemplate = ({ ...args }) => {
|
|
|
96
96
|
<pn-scroll>
|
|
97
97
|
<div slot="scroll-affected">
|
|
98
98
|
<picture>
|
|
99
|
-
<img src="
|
|
99
|
+
<img src="${imageUrls.mobileIllustration}" />
|
|
100
100
|
</picture>
|
|
101
101
|
</div>
|
|
102
102
|
</pn-scroll>
|
|
@@ -130,10 +130,10 @@ const NoImageTemplate = ({ ...args }) => {
|
|
|
130
130
|
hide-mobile-image="${args.hideMobileImage}">
|
|
131
131
|
<div slot="app-store">
|
|
132
132
|
<a href="http://www.apple.com">
|
|
133
|
-
<img src="
|
|
133
|
+
<img src="${appImages.postnordAppStore}">
|
|
134
134
|
</a>
|
|
135
135
|
<a href="http://www.google.com">
|
|
136
|
-
<img src="
|
|
136
|
+
<img src="${appImages.postnordGooglePlay}">
|
|
137
137
|
</a>
|
|
138
138
|
</div>
|
|
139
139
|
<div slot="usp-buttons">
|
|
@@ -142,7 +142,7 @@ const NoImageTemplate = ({ ...args }) => {
|
|
|
142
142
|
<pn-scroll>
|
|
143
143
|
<div slot="scroll-affected">
|
|
144
144
|
<picture>
|
|
145
|
-
<img src="
|
|
145
|
+
<img src="${imageUrls.mobileIllustration}" />
|
|
146
146
|
</picture>
|
|
147
147
|
</div>
|
|
148
148
|
</pn-scroll>
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
export const imageSvgs = {
|
|
2
|
+
success: 'https://www.postnord.se/contentassets/5fe2c739644149e79d73c1082e575af3/success.svg'
|
|
3
|
+
};
|
|
4
|
+
export const imageUrls = {
|
|
5
|
+
mobileIllustration: 'https://se-prep.postnord.com/siteassets/images-new/app-images/track-swe.webp',
|
|
6
|
+
};
|
|
7
|
+
export const appImages = {
|
|
8
|
+
postnordAppStore: 'https://se-prep.postnord.com/siteassets/startpage-blocks/AppStore-transparent.svg',
|
|
9
|
+
postnordGooglePlay: 'https://se-prep.postnord.com/siteassets/startpage-blocks/googleplay-transparent.svg',
|
|
10
|
+
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
|
|
2
2
|
|
|
3
|
-
const pnCtaBlockCss = "pn-cta-block .cta-block{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-direction:column;flex-direction:column;border-radius:2.4rem;padding:3.2rem 2.4rem;width:100%}@media screen and (min-width: 768px){pn-cta-block .cta-block{-ms-flex-direction:row;flex-direction:row;padding:2.4rem}}@media screen and (min-width: 1140px){pn-cta-block .cta-block{
|
|
3
|
+
const pnCtaBlockCss = "pn-cta-block{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}pn-cta-block .cta-block{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-direction:column;flex-direction:column;border-radius:2.4rem;padding:3.2rem 2.4rem;width:100%}@media screen and (min-width: 768px){pn-cta-block .cta-block{-ms-flex-direction:row;flex-direction:row;padding:2.4rem}}@media screen and (min-width: 1140px){pn-cta-block .cta-block{max-width:95%}}@media screen and (min-width: 1440px){pn-cta-block .cta-block{max-width:90%}}pn-cta-block .cta-block[pn-background-color=blue25]{background-color:#EFFBFF}pn-cta-block .cta-block[pn-background-color=coral50]{background-color:#FDEFEE}pn-cta-block .cta-block[pn-background-color=gray25]{background-color:#F9F8F8}pn-cta-block .cta-block[pn-background-color=green25]{background-color:#EDFBF3}pn-cta-block .cta-block[pn-background-color=transparent]{padding:0 3.2rem}pn-cta-block .cta-block--content-top .cta-block__content{-ms-flex-pack:start;justify-content:flex-start}@media screen and (min-width: 768px){pn-cta-block .cta-block--large .cta-block__heading{font-size:3.6rem}}@media screen and (min-width: 768px){pn-cta-block .cta-block--large .cta-block__text{font-size:2rem}}pn-cta-block .cta-block--small{width:auto}@media screen and (min-width: 992px){pn-cta-block .cta-block--small{display:-ms-inline-flexbox;display:inline-flex;max-width:75%}pn-cta-block .cta-block--small.cta-block--center{max-width:66%}}pn-cta-block .cta-block--center{-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column;gap:1.6rem;text-align:center}@media screen and (min-width: 768px){pn-cta-block .cta-block--center{gap:2.4rem;padding:3.2rem}}@media screen and (min-width: 768px){pn-cta-block .cta-block--center .cta-block__content{max-width:74rem;padding:0}}pn-cta-block .cta-block--center .cta-block__action{margin-top:0.8rem}@media screen and (min-width: 768px){pn-cta-block .cta-block--center .cta-block__action{-ms-flex-direction:row;flex-direction:row;gap:2.4rem;margin-top:0}pn-cta-block .cta-block--center .cta-block__action.cta-block__button{margin-bottom:0}pn-cta-block .cta-block--center .cta-block__action>[slot=cta-buttons]{-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;gap:2.4rem}}@media screen and (min-width: 768px){pn-cta-block .cta-block--center .cta-block__image-wrapper{display:block}}pn-cta-block .cta-block--center .cta-block__image-wrapper>[slot=illustration]{padding-right:0}pn-cta-block .cta-block--center .cta-block__text{margin-bottom:0 !important}pn-cta-block .cta-block__image-wrapper{margin-bottom:1.6rem}pn-cta-block .cta-block__image-wrapper>[slot=illustration]>picture>img{border-radius:0.8rem;max-width:100%}@media screen and (min-width: 768px){pn-cta-block .cta-block__image-wrapper{display:none;max-width:20%}}@media screen and (min-width: 992px){pn-cta-block .cta-block__image-wrapper{display:block;margin-bottom:0}pn-cta-block .cta-block__image-wrapper>[slot=illustration]{padding-right:3.2rem}}pn-cta-block .cta-block__content{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center}@media screen and (min-width: 768px){pn-cta-block .cta-block__content{padding-right:2.4rem}}@media screen and (min-width: 768px){pn-cta-block .cta-block__content .cta-block__heading,pn-cta-block .cta-block__content .cta-block__text{max-width:74rem}}pn-cta-block .cta-block__content .cta-block__text{margin-bottom:2.4rem}@media screen and (min-width: 768px){pn-cta-block .cta-block__content .cta-block__text{margin-bottom:0}}pn-cta-block .cta-block__heading{margin-bottom:0.8rem}pn-cta-block .cta-block__action{display:-ms-flexbox;display:flex}pn-cta-block .cta-block__action>[slot=cta-buttons]{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;row-gap:1.6rem;-ms-flex:1;flex:1}@media screen and (min-width: 768px){pn-cta-block .cta-block__action>[slot=cta-buttons]{-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:center;justify-content:center;gap:1.6rem;margin-top:0}}pn-cta-block .cta-block__action>[slot=cta-buttons]>a{color:#005D92;font-weight:500;font-size:1.6rem;padding:0.1rem;text-decoration:none}pn-cta-block .cta-block__action>[slot=cta-buttons]>a pn-icon svg{-webkit-transition:-webkit-transform 0.3s ease-in-out;transition:-webkit-transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out}pn-cta-block .cta-block__action>[slot=cta-buttons]>a pn-icon svg path{fill:#005D92}pn-cta-block .cta-block__action>[slot=cta-buttons]>a:hover pn-icon svg{-webkit-transition:-webkit-transform 0.3s ease-in-out;transition:-webkit-transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;-webkit-transform:translateX(0.3rem);transform:translateX(0.3rem)}pn-cta-block .cta-block__action>[slot=cta-buttons]>a:hover pn-icon svg path{fill:#005D92}";
|
|
4
4
|
|
|
5
5
|
const PnCtaBlock$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
6
6
|
constructor() {
|
|
@@ -15,7 +15,12 @@ const PnCtaBlock$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
|
|
|
15
15
|
this.contentTop = false;
|
|
16
16
|
}
|
|
17
17
|
render() {
|
|
18
|
-
|
|
18
|
+
const hasImage = this.hostElement.querySelector('[slot="illustration"]');
|
|
19
|
+
const hasButtons = this.hostElement.querySelector('[slot="cta-buttons"]');
|
|
20
|
+
return (h(Host, null, h("div", { "pn-background-color": this.pnBackgroundColor, class: `cta-block ${this.isLarge ? 'cta-block--large' : ''} ${this.isCentered ? 'cta-block--center' : ''} ${(this.isSmall ? 'cta-block--small' : '')} ${this.contentTop ? 'cta-block--content-top' : ''}` }, (hasImage ?
|
|
21
|
+
h("div", { class: "cta-block__image-wrapper" }, h("slot", { name: "illustration" })) : null), (this.heading && this.bodyText) ?
|
|
22
|
+
h("div", { class: "cta-block__content" }, h("h2", { class: "cta-block__heading" }, this.heading), h("p", { class: "cta-block__text" }, this.bodyText)) : null, (hasButtons ?
|
|
23
|
+
h("div", { class: "cta-block__action" }, h("slot", { name: "cta-buttons" })) : null))));
|
|
19
24
|
}
|
|
20
25
|
get hostElement() { return this; }
|
|
21
26
|
static get style() { return pnCtaBlockCss; }
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
|
|
2
2
|
|
|
3
|
-
const pnUspPromoterCss = "pn-usp-promoter{width:80%}pn-usp-promoter .usp-promoter{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:3rem 0.8rem}pn-usp-promoter .usp-promoter--full-width{overflow:hidden;margin:0 calc(-50vw + 50%)}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter--full-width{padding:8rem 4rem}}pn-usp-promoter .usp-promoter__content{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter__content{-ms-flex-align:center;align-items:center;text-align:left;-ms-flex-pack:center;justify-content:center}}pn-usp-promoter .usp-promoter__content-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter__content-wrapper{-ms-flex-align:start;align-items:flex-start;padding-left:4rem}}pn-usp-promoter .usp-promoter__content-heading{margin-bottom:0.8rem}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter__content-heading{font-size:4.2rem
|
|
3
|
+
const pnUspPromoterCss = "pn-usp-promoter{width:80%}pn-usp-promoter .usp-promoter{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:3rem 0.8rem}pn-usp-promoter .usp-promoter--full-width{overflow:hidden;margin:0 calc(-50vw + 50%)}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter--full-width{padding:8rem 4rem}}pn-usp-promoter .usp-promoter__content{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;width:100%;max-width:114rem}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter__content{-ms-flex-align:center;align-items:center;text-align:left;-ms-flex-pack:center;justify-content:center}}pn-usp-promoter .usp-promoter__content-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:100%;max-width:75rem}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter__content-wrapper{-ms-flex-align:start;align-items:flex-start;padding-left:4rem}}pn-usp-promoter .usp-promoter__content-heading{margin-bottom:0.8rem}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter__content-heading{font-size:4.2rem}}@media screen and (min-width: 1140px){pn-usp-promoter .usp-promoter__content-heading{font-size:4.8rem}}@media screen and (min-width: 1440px){pn-usp-promoter .usp-promoter__content-heading{font-size:5.6rem}}pn-usp-promoter .usp-promoter__no-margin-bottom{margin-bottom:0 !important}pn-usp-promoter .usp-promoter__content-text{font-size:1.6rem;max-width:47rem;margin-bottom:2.6rem}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter__content-text{text-wrap:balance}}@media screen and (min-width: 1140px){pn-usp-promoter .usp-promoter__content-text{font-size:1.8rem;max-width:60rem}}@media screen and (min-width: 1440px){pn-usp-promoter .usp-promoter__content-text{font-size:2rem;max-width:70rem}}pn-usp-promoter [slot=app-store]{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;margin-bottom:2.6rem;gap:1rem}pn-usp-promoter [slot=app-store]>a{background-color:black;border:0.1rem solid #A6A6A6;border-radius:0.8rem;color:#FFF;display:inline-block;line-height:0;text-decoration:none;-webkit-transition:background-color 0.2s ease-in-out;transition:background-color 0.2s ease-in-out}pn-usp-promoter [slot=app-store]>a::after{margin-left:0 !important;margin-right:0.5rem;top:0.2rem;position:relative}pn-usp-promoter [slot=app-store]>a:hover{background-color:#0D234B}pn-usp-promoter [slot=app-store]>a:focus{background-color:#0D234B;-webkit-box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #0D234B;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #0D234B}pn-usp-promoter [slot=app-store]>a:focus-visible{outline:none}pn-usp-promoter [slot=usp-buttons] pn-button{margin-bottom:1.6rem}pn-usp-promoter [slot=usp-buttons]>a{color:#005D92;font-weight:500;font-size:1.6rem;padding:0.1rem;text-decoration:none}pn-usp-promoter [slot=usp-buttons]>a pn-icon svg{-webkit-transition:-webkit-transform 0.3s ease-in-out;transition:-webkit-transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out}pn-usp-promoter [slot=usp-buttons]>a pn-icon svg path{fill:#005D92}pn-usp-promoter [slot=usp-buttons]>a:hover pn-icon svg{-webkit-transition:-webkit-transform 0.3s ease-in-out;transition:-webkit-transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;-webkit-transform:translateX(0.3rem);transform:translateX(0.3rem)}pn-usp-promoter [slot=usp-buttons]>a:hover pn-icon svg path{fill:#005D92}pn-usp-promoter [slot=app-store],pn-usp-promoter [slot=usp-buttons]{-ms-flex-direction:column;flex-direction:column}@media screen and (min-width: 768px){pn-usp-promoter [slot=app-store],pn-usp-promoter [slot=usp-buttons]{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;gap:1.6rem}}pn-usp-promoter [slot=illustration]{max-width:25%;position:relative;left:-1.6rem}pn-usp-promoter [slot=illustration] pn-scroll{position:-webkit-sticky;position:sticky;top:0}@media screen and (min-width: 768px){pn-usp-promoter [slot=illustration]{display:block}}pn-usp-promoter [slot=illustration] picture img{max-width:100%}@media screen and (min-width: 1140px){pn-usp-promoter [slot=illustration] picture img{width:32rem}}@media screen and (min-width: 1440px){pn-usp-promoter [slot=illustration] picture img{width:33.6rem}}pn-usp-promoter .usp-promoter__heading-extension{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}pn-usp-promoter .usp-promoter--right-align .usp-promoter__content{-ms-flex-direction:row-reverse;flex-direction:row-reverse;text-align:right}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter--right-align .usp-promoter__content{-ms-flex-align:center;align-items:center}}pn-usp-promoter .usp-promoter--right-align .usp-promoter__content-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:end;align-items:flex-end;padding-left:0}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter--right-align .usp-promoter__content-wrapper{padding-right:4rem}}pn-usp-promoter .usp-promoter--right-align [slot=app-store],pn-usp-promoter .usp-promoter--right-align [slot=usp-buttons]{-ms-flex-align:end;align-items:flex-end}pn-usp-promoter .usp-promoter--right-align [slot=illustration]{left:1.6rem}@media screen and (max-width: 768px){pn-usp-promoter .usp-promoter--hide-image-small-screen [slot=illustration] picture img{display:none}pn-usp-promoter .usp-promoter--hide-image-small-screen .usp-promoter__content{text-align:center}pn-usp-promoter .usp-promoter--hide-image-small-screen .usp-promoter__content-wrapper{-ms-flex-align:center;align-items:center;padding-right:0}pn-usp-promoter .usp-promoter--hide-image-small-screen [slot=app-store],pn-usp-promoter .usp-promoter--hide-image-small-screen [slot=usp-buttons]{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center}}";
|
|
4
4
|
|
|
5
5
|
const PnUspPromoter$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
6
6
|
constructor() {
|
|
@@ -19,12 +19,17 @@ const PnUspPromoter$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
|
|
|
19
19
|
if (this.hideMobileImage || slot == null) {
|
|
20
20
|
return "usp-promoter--hide-image-small-screen";
|
|
21
21
|
}
|
|
22
|
+
return "";
|
|
22
23
|
}
|
|
23
24
|
render() {
|
|
24
|
-
const
|
|
25
|
-
const
|
|
25
|
+
const { fullWidth, rightAlign } = this;
|
|
26
|
+
const classes = [
|
|
27
|
+
'usp-promoter',
|
|
28
|
+
fullWidth ? "usp-promoter--full-width" : "",
|
|
29
|
+
rightAlign ? "usp-promoter--right-align" : "",
|
|
30
|
+
].join(' ');
|
|
26
31
|
const hasHeadingExtension = this.headingExtension ? "usp-promoter__heading-extension" : "";
|
|
27
|
-
return (h(Host, null, h("div", { class: `
|
|
32
|
+
return (h(Host, null, h("div", { class: ` ${classes} ${this.centerMobileContent()}`, style: { 'background': `${this.backgroundGradient}` } }, h("div", { class: "usp-promoter__content" }, h("slot", { name: "illustration" }), h("div", { class: "usp-promoter__content-wrapper" }, h("h2", { class: `usp-promoter__content-heading ${hasHeadingExtension}` }, h("span", null, this.heading), (this.headingExtension) ? h("span", null, this.headingExtension) : null), h("p", { class: "usp-promoter__content-text" }, this.bodyText), h("slot", { name: "app-store" }), h("slot", { name: "usp-buttons" }))))));
|
|
28
33
|
}
|
|
29
34
|
get hostElement() { return this; }
|
|
30
35
|
static get style() { return pnUspPromoterCss; }
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, h, e as Host, g as getElement } from './index-a0d3240d.js';
|
|
2
2
|
|
|
3
|
-
const pnCtaBlockCss = "pn-cta-block .cta-block{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-direction:column;flex-direction:column;border-radius:2.4rem;padding:3.2rem 2.4rem;width:100%}@media screen and (min-width: 768px){pn-cta-block .cta-block{-ms-flex-direction:row;flex-direction:row;padding:2.4rem}}@media screen and (min-width: 1140px){pn-cta-block .cta-block{
|
|
3
|
+
const pnCtaBlockCss = "pn-cta-block{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}pn-cta-block .cta-block{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-direction:column;flex-direction:column;border-radius:2.4rem;padding:3.2rem 2.4rem;width:100%}@media screen and (min-width: 768px){pn-cta-block .cta-block{-ms-flex-direction:row;flex-direction:row;padding:2.4rem}}@media screen and (min-width: 1140px){pn-cta-block .cta-block{max-width:95%}}@media screen and (min-width: 1440px){pn-cta-block .cta-block{max-width:90%}}pn-cta-block .cta-block[pn-background-color=blue25]{background-color:#EFFBFF}pn-cta-block .cta-block[pn-background-color=coral50]{background-color:#FDEFEE}pn-cta-block .cta-block[pn-background-color=gray25]{background-color:#F9F8F8}pn-cta-block .cta-block[pn-background-color=green25]{background-color:#EDFBF3}pn-cta-block .cta-block[pn-background-color=transparent]{padding:0 3.2rem}pn-cta-block .cta-block--content-top .cta-block__content{-ms-flex-pack:start;justify-content:flex-start}@media screen and (min-width: 768px){pn-cta-block .cta-block--large .cta-block__heading{font-size:3.6rem}}@media screen and (min-width: 768px){pn-cta-block .cta-block--large .cta-block__text{font-size:2rem}}pn-cta-block .cta-block--small{width:auto}@media screen and (min-width: 992px){pn-cta-block .cta-block--small{display:-ms-inline-flexbox;display:inline-flex;max-width:75%}pn-cta-block .cta-block--small.cta-block--center{max-width:66%}}pn-cta-block .cta-block--center{-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column;gap:1.6rem;text-align:center}@media screen and (min-width: 768px){pn-cta-block .cta-block--center{gap:2.4rem;padding:3.2rem}}@media screen and (min-width: 768px){pn-cta-block .cta-block--center .cta-block__content{max-width:74rem;padding:0}}pn-cta-block .cta-block--center .cta-block__action{margin-top:0.8rem}@media screen and (min-width: 768px){pn-cta-block .cta-block--center .cta-block__action{-ms-flex-direction:row;flex-direction:row;gap:2.4rem;margin-top:0}pn-cta-block .cta-block--center .cta-block__action.cta-block__button{margin-bottom:0}pn-cta-block .cta-block--center .cta-block__action>[slot=cta-buttons]{-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;gap:2.4rem}}@media screen and (min-width: 768px){pn-cta-block .cta-block--center .cta-block__image-wrapper{display:block}}pn-cta-block .cta-block--center .cta-block__image-wrapper>[slot=illustration]{padding-right:0}pn-cta-block .cta-block--center .cta-block__text{margin-bottom:0 !important}pn-cta-block .cta-block__image-wrapper{margin-bottom:1.6rem}pn-cta-block .cta-block__image-wrapper>[slot=illustration]>picture>img{border-radius:0.8rem;max-width:100%}@media screen and (min-width: 768px){pn-cta-block .cta-block__image-wrapper{display:none;max-width:20%}}@media screen and (min-width: 992px){pn-cta-block .cta-block__image-wrapper{display:block;margin-bottom:0}pn-cta-block .cta-block__image-wrapper>[slot=illustration]{padding-right:3.2rem}}pn-cta-block .cta-block__content{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center}@media screen and (min-width: 768px){pn-cta-block .cta-block__content{padding-right:2.4rem}}@media screen and (min-width: 768px){pn-cta-block .cta-block__content .cta-block__heading,pn-cta-block .cta-block__content .cta-block__text{max-width:74rem}}pn-cta-block .cta-block__content .cta-block__text{margin-bottom:2.4rem}@media screen and (min-width: 768px){pn-cta-block .cta-block__content .cta-block__text{margin-bottom:0}}pn-cta-block .cta-block__heading{margin-bottom:0.8rem}pn-cta-block .cta-block__action{display:-ms-flexbox;display:flex}pn-cta-block .cta-block__action>[slot=cta-buttons]{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;row-gap:1.6rem;-ms-flex:1;flex:1}@media screen and (min-width: 768px){pn-cta-block .cta-block__action>[slot=cta-buttons]{-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:center;justify-content:center;gap:1.6rem;margin-top:0}}pn-cta-block .cta-block__action>[slot=cta-buttons]>a{color:#005D92;font-weight:500;font-size:1.6rem;padding:0.1rem;text-decoration:none}pn-cta-block .cta-block__action>[slot=cta-buttons]>a pn-icon svg{-webkit-transition:-webkit-transform 0.3s ease-in-out;transition:-webkit-transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out}pn-cta-block .cta-block__action>[slot=cta-buttons]>a pn-icon svg path{fill:#005D92}pn-cta-block .cta-block__action>[slot=cta-buttons]>a:hover pn-icon svg{-webkit-transition:-webkit-transform 0.3s ease-in-out;transition:-webkit-transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;-webkit-transform:translateX(0.3rem);transform:translateX(0.3rem)}pn-cta-block .cta-block__action>[slot=cta-buttons]>a:hover pn-icon svg path{fill:#005D92}";
|
|
4
4
|
|
|
5
5
|
const PnCtaBlock = class {
|
|
6
6
|
constructor(hostRef) {
|
|
@@ -14,7 +14,12 @@ const PnCtaBlock = class {
|
|
|
14
14
|
this.contentTop = false;
|
|
15
15
|
}
|
|
16
16
|
render() {
|
|
17
|
-
|
|
17
|
+
const hasImage = this.hostElement.querySelector('[slot="illustration"]');
|
|
18
|
+
const hasButtons = this.hostElement.querySelector('[slot="cta-buttons"]');
|
|
19
|
+
return (h(Host, null, h("div", { "pn-background-color": this.pnBackgroundColor, class: `cta-block ${this.isLarge ? 'cta-block--large' : ''} ${this.isCentered ? 'cta-block--center' : ''} ${(this.isSmall ? 'cta-block--small' : '')} ${this.contentTop ? 'cta-block--content-top' : ''}` }, (hasImage ?
|
|
20
|
+
h("div", { class: "cta-block__image-wrapper" }, h("slot", { name: "illustration" })) : null), (this.heading && this.bodyText) ?
|
|
21
|
+
h("div", { class: "cta-block__content" }, h("h2", { class: "cta-block__heading" }, this.heading), h("p", { class: "cta-block__text" }, this.bodyText)) : null, (hasButtons ?
|
|
22
|
+
h("div", { class: "cta-block__action" }, h("slot", { name: "cta-buttons" })) : null))));
|
|
18
23
|
}
|
|
19
24
|
get hostElement() { return getElement(this); }
|
|
20
25
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, h, e as Host, g as getElement } from './index-a0d3240d.js';
|
|
2
2
|
|
|
3
|
-
const pnUspPromoterCss = "pn-usp-promoter{width:80%}pn-usp-promoter .usp-promoter{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:3rem 0.8rem}pn-usp-promoter .usp-promoter--full-width{overflow:hidden;margin:0 calc(-50vw + 50%)}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter--full-width{padding:8rem 4rem}}pn-usp-promoter .usp-promoter__content{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter__content{-ms-flex-align:center;align-items:center;text-align:left;-ms-flex-pack:center;justify-content:center}}pn-usp-promoter .usp-promoter__content-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter__content-wrapper{-ms-flex-align:start;align-items:flex-start;padding-left:4rem}}pn-usp-promoter .usp-promoter__content-heading{margin-bottom:0.8rem}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter__content-heading{font-size:4.2rem
|
|
3
|
+
const pnUspPromoterCss = "pn-usp-promoter{width:80%}pn-usp-promoter .usp-promoter{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:3rem 0.8rem}pn-usp-promoter .usp-promoter--full-width{overflow:hidden;margin:0 calc(-50vw + 50%)}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter--full-width{padding:8rem 4rem}}pn-usp-promoter .usp-promoter__content{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;width:100%;max-width:114rem}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter__content{-ms-flex-align:center;align-items:center;text-align:left;-ms-flex-pack:center;justify-content:center}}pn-usp-promoter .usp-promoter__content-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:100%;max-width:75rem}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter__content-wrapper{-ms-flex-align:start;align-items:flex-start;padding-left:4rem}}pn-usp-promoter .usp-promoter__content-heading{margin-bottom:0.8rem}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter__content-heading{font-size:4.2rem}}@media screen and (min-width: 1140px){pn-usp-promoter .usp-promoter__content-heading{font-size:4.8rem}}@media screen and (min-width: 1440px){pn-usp-promoter .usp-promoter__content-heading{font-size:5.6rem}}pn-usp-promoter .usp-promoter__no-margin-bottom{margin-bottom:0 !important}pn-usp-promoter .usp-promoter__content-text{font-size:1.6rem;max-width:47rem;margin-bottom:2.6rem}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter__content-text{text-wrap:balance}}@media screen and (min-width: 1140px){pn-usp-promoter .usp-promoter__content-text{font-size:1.8rem;max-width:60rem}}@media screen and (min-width: 1440px){pn-usp-promoter .usp-promoter__content-text{font-size:2rem;max-width:70rem}}pn-usp-promoter [slot=app-store]{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;margin-bottom:2.6rem;gap:1rem}pn-usp-promoter [slot=app-store]>a{background-color:black;border:0.1rem solid #A6A6A6;border-radius:0.8rem;color:#FFF;display:inline-block;line-height:0;text-decoration:none;-webkit-transition:background-color 0.2s ease-in-out;transition:background-color 0.2s ease-in-out}pn-usp-promoter [slot=app-store]>a::after{margin-left:0 !important;margin-right:0.5rem;top:0.2rem;position:relative}pn-usp-promoter [slot=app-store]>a:hover{background-color:#0D234B}pn-usp-promoter [slot=app-store]>a:focus{background-color:#0D234B;-webkit-box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #0D234B;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #0D234B}pn-usp-promoter [slot=app-store]>a:focus-visible{outline:none}pn-usp-promoter [slot=usp-buttons] pn-button{margin-bottom:1.6rem}pn-usp-promoter [slot=usp-buttons]>a{color:#005D92;font-weight:500;font-size:1.6rem;padding:0.1rem;text-decoration:none}pn-usp-promoter [slot=usp-buttons]>a pn-icon svg{-webkit-transition:-webkit-transform 0.3s ease-in-out;transition:-webkit-transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out}pn-usp-promoter [slot=usp-buttons]>a pn-icon svg path{fill:#005D92}pn-usp-promoter [slot=usp-buttons]>a:hover pn-icon svg{-webkit-transition:-webkit-transform 0.3s ease-in-out;transition:-webkit-transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;-webkit-transform:translateX(0.3rem);transform:translateX(0.3rem)}pn-usp-promoter [slot=usp-buttons]>a:hover pn-icon svg path{fill:#005D92}pn-usp-promoter [slot=app-store],pn-usp-promoter [slot=usp-buttons]{-ms-flex-direction:column;flex-direction:column}@media screen and (min-width: 768px){pn-usp-promoter [slot=app-store],pn-usp-promoter [slot=usp-buttons]{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;gap:1.6rem}}pn-usp-promoter [slot=illustration]{max-width:25%;position:relative;left:-1.6rem}pn-usp-promoter [slot=illustration] pn-scroll{position:-webkit-sticky;position:sticky;top:0}@media screen and (min-width: 768px){pn-usp-promoter [slot=illustration]{display:block}}pn-usp-promoter [slot=illustration] picture img{max-width:100%}@media screen and (min-width: 1140px){pn-usp-promoter [slot=illustration] picture img{width:32rem}}@media screen and (min-width: 1440px){pn-usp-promoter [slot=illustration] picture img{width:33.6rem}}pn-usp-promoter .usp-promoter__heading-extension{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}pn-usp-promoter .usp-promoter--right-align .usp-promoter__content{-ms-flex-direction:row-reverse;flex-direction:row-reverse;text-align:right}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter--right-align .usp-promoter__content{-ms-flex-align:center;align-items:center}}pn-usp-promoter .usp-promoter--right-align .usp-promoter__content-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:end;align-items:flex-end;padding-left:0}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter--right-align .usp-promoter__content-wrapper{padding-right:4rem}}pn-usp-promoter .usp-promoter--right-align [slot=app-store],pn-usp-promoter .usp-promoter--right-align [slot=usp-buttons]{-ms-flex-align:end;align-items:flex-end}pn-usp-promoter .usp-promoter--right-align [slot=illustration]{left:1.6rem}@media screen and (max-width: 768px){pn-usp-promoter .usp-promoter--hide-image-small-screen [slot=illustration] picture img{display:none}pn-usp-promoter .usp-promoter--hide-image-small-screen .usp-promoter__content{text-align:center}pn-usp-promoter .usp-promoter--hide-image-small-screen .usp-promoter__content-wrapper{-ms-flex-align:center;align-items:center;padding-right:0}pn-usp-promoter .usp-promoter--hide-image-small-screen [slot=app-store],pn-usp-promoter .usp-promoter--hide-image-small-screen [slot=usp-buttons]{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center}}";
|
|
4
4
|
|
|
5
5
|
const PnUspPromoter = class {
|
|
6
6
|
constructor(hostRef) {
|
|
@@ -18,12 +18,17 @@ const PnUspPromoter = class {
|
|
|
18
18
|
if (this.hideMobileImage || slot == null) {
|
|
19
19
|
return "usp-promoter--hide-image-small-screen";
|
|
20
20
|
}
|
|
21
|
+
return "";
|
|
21
22
|
}
|
|
22
23
|
render() {
|
|
23
|
-
const
|
|
24
|
-
const
|
|
24
|
+
const { fullWidth, rightAlign } = this;
|
|
25
|
+
const classes = [
|
|
26
|
+
'usp-promoter',
|
|
27
|
+
fullWidth ? "usp-promoter--full-width" : "",
|
|
28
|
+
rightAlign ? "usp-promoter--right-align" : "",
|
|
29
|
+
].join(' ');
|
|
25
30
|
const hasHeadingExtension = this.headingExtension ? "usp-promoter__heading-extension" : "";
|
|
26
|
-
return (h(Host, null, h("div", { class: `
|
|
31
|
+
return (h(Host, null, h("div", { class: ` ${classes} ${this.centerMobileContent()}`, style: { 'background': `${this.backgroundGradient}` } }, h("div", { class: "usp-promoter__content" }, h("slot", { name: "illustration" }), h("div", { class: "usp-promoter__content-wrapper" }, h("h2", { class: `usp-promoter__content-heading ${hasHeadingExtension}` }, h("span", null, this.heading), (this.headingExtension) ? h("span", null, this.headingExtension) : null), h("p", { class: "usp-promoter__content-text" }, this.bodyText), h("slot", { name: "app-store" }), h("slot", { name: "usp-buttons" }))))));
|
|
27
32
|
}
|
|
28
33
|
get hostElement() { return getElement(this); }
|
|
29
34
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as registerInstance,h,e as Host,g as getElement}from"./index-a0d3240d.js";var pnCtaBlockCss="pn-cta-block .cta-block{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-direction:column;flex-direction:column;border-radius:2.4rem;padding:3.2rem 2.4rem;width:100%}@media screen and (min-width: 768px){pn-cta-block .cta-block{-ms-flex-direction:row;flex-direction:row;padding:2.4rem}}@media screen and (min-width: 1140px){pn-cta-block .cta-block{
|
|
1
|
+
import{r as registerInstance,h,e as Host,g as getElement}from"./index-a0d3240d.js";var pnCtaBlockCss="pn-cta-block{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}pn-cta-block .cta-block{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-direction:column;flex-direction:column;border-radius:2.4rem;padding:3.2rem 2.4rem;width:100%}@media screen and (min-width: 768px){pn-cta-block .cta-block{-ms-flex-direction:row;flex-direction:row;padding:2.4rem}}@media screen and (min-width: 1140px){pn-cta-block .cta-block{max-width:95%}}@media screen and (min-width: 1440px){pn-cta-block .cta-block{max-width:90%}}pn-cta-block .cta-block[pn-background-color=blue25]{background-color:#EFFBFF}pn-cta-block .cta-block[pn-background-color=coral50]{background-color:#FDEFEE}pn-cta-block .cta-block[pn-background-color=gray25]{background-color:#F9F8F8}pn-cta-block .cta-block[pn-background-color=green25]{background-color:#EDFBF3}pn-cta-block .cta-block[pn-background-color=transparent]{padding:0 3.2rem}pn-cta-block .cta-block--content-top .cta-block__content{-ms-flex-pack:start;justify-content:flex-start}@media screen and (min-width: 768px){pn-cta-block .cta-block--large .cta-block__heading{font-size:3.6rem}}@media screen and (min-width: 768px){pn-cta-block .cta-block--large .cta-block__text{font-size:2rem}}pn-cta-block .cta-block--small{width:auto}@media screen and (min-width: 992px){pn-cta-block .cta-block--small{display:-ms-inline-flexbox;display:inline-flex;max-width:75%}pn-cta-block .cta-block--small.cta-block--center{max-width:66%}}pn-cta-block .cta-block--center{-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column;gap:1.6rem;text-align:center}@media screen and (min-width: 768px){pn-cta-block .cta-block--center{gap:2.4rem;padding:3.2rem}}@media screen and (min-width: 768px){pn-cta-block .cta-block--center .cta-block__content{max-width:74rem;padding:0}}pn-cta-block .cta-block--center .cta-block__action{margin-top:0.8rem}@media screen and (min-width: 768px){pn-cta-block .cta-block--center .cta-block__action{-ms-flex-direction:row;flex-direction:row;gap:2.4rem;margin-top:0}pn-cta-block .cta-block--center .cta-block__action.cta-block__button{margin-bottom:0}pn-cta-block .cta-block--center .cta-block__action>[slot=cta-buttons]{-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;gap:2.4rem}}@media screen and (min-width: 768px){pn-cta-block .cta-block--center .cta-block__image-wrapper{display:block}}pn-cta-block .cta-block--center .cta-block__image-wrapper>[slot=illustration]{padding-right:0}pn-cta-block .cta-block--center .cta-block__text{margin-bottom:0 !important}pn-cta-block .cta-block__image-wrapper{margin-bottom:1.6rem}pn-cta-block .cta-block__image-wrapper>[slot=illustration]>picture>img{border-radius:0.8rem;max-width:100%}@media screen and (min-width: 768px){pn-cta-block .cta-block__image-wrapper{display:none;max-width:20%}}@media screen and (min-width: 992px){pn-cta-block .cta-block__image-wrapper{display:block;margin-bottom:0}pn-cta-block .cta-block__image-wrapper>[slot=illustration]{padding-right:3.2rem}}pn-cta-block .cta-block__content{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center}@media screen and (min-width: 768px){pn-cta-block .cta-block__content{padding-right:2.4rem}}@media screen and (min-width: 768px){pn-cta-block .cta-block__content .cta-block__heading,pn-cta-block .cta-block__content .cta-block__text{max-width:74rem}}pn-cta-block .cta-block__content .cta-block__text{margin-bottom:2.4rem}@media screen and (min-width: 768px){pn-cta-block .cta-block__content .cta-block__text{margin-bottom:0}}pn-cta-block .cta-block__heading{margin-bottom:0.8rem}pn-cta-block .cta-block__action{display:-ms-flexbox;display:flex}pn-cta-block .cta-block__action>[slot=cta-buttons]{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;row-gap:1.6rem;-ms-flex:1;flex:1}@media screen and (min-width: 768px){pn-cta-block .cta-block__action>[slot=cta-buttons]{-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:center;justify-content:center;gap:1.6rem;margin-top:0}}pn-cta-block .cta-block__action>[slot=cta-buttons]>a{color:#005D92;font-weight:500;font-size:1.6rem;padding:0.1rem;text-decoration:none}pn-cta-block .cta-block__action>[slot=cta-buttons]>a pn-icon svg{-webkit-transition:-webkit-transform 0.3s ease-in-out;transition:-webkit-transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out}pn-cta-block .cta-block__action>[slot=cta-buttons]>a pn-icon svg path{fill:#005D92}pn-cta-block .cta-block__action>[slot=cta-buttons]>a:hover pn-icon svg{-webkit-transition:-webkit-transform 0.3s ease-in-out;transition:-webkit-transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;-webkit-transform:translateX(0.3rem);transform:translateX(0.3rem)}pn-cta-block .cta-block__action>[slot=cta-buttons]>a:hover pn-icon svg path{fill:#005D92}";var PnCtaBlock=function(){function t(t){registerInstance(this,t);this.heading=null;this.bodyText=null;this.pnBackgroundColor=null;this.isLarge=false;this.isCentered=false;this.isSmall=false;this.contentTop=false}t.prototype.render=function(){var t=this.hostElement.querySelector('[slot="illustration"]');var c=this.hostElement.querySelector('[slot="cta-buttons"]');return h(Host,null,h("div",{"pn-background-color":this.pnBackgroundColor,class:"cta-block ".concat(this.isLarge?"cta-block--large":""," ").concat(this.isCentered?"cta-block--center":""," ").concat(this.isSmall?"cta-block--small":""," ").concat(this.contentTop?"cta-block--content-top":"")},t?h("div",{class:"cta-block__image-wrapper"},h("slot",{name:"illustration"})):null,this.heading&&this.bodyText?h("div",{class:"cta-block__content"},h("h2",{class:"cta-block__heading"},this.heading),h("p",{class:"cta-block__text"},this.bodyText)):null,c?h("div",{class:"cta-block__action"},h("slot",{name:"cta-buttons"})):null))};Object.defineProperty(t.prototype,"hostElement",{get:function(){return getElement(this)},enumerable:false,configurable:true});return t}();PnCtaBlock.style=pnCtaBlockCss;export{PnCtaBlock as pn_cta_block};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as registerInstance,h,e as Host,g as getElement}from"./index-a0d3240d.js";var pnUspPromoterCss="pn-usp-promoter{width:80%}pn-usp-promoter .usp-promoter{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:3rem 0.8rem}pn-usp-promoter .usp-promoter--full-width{overflow:hidden;margin:0 calc(-50vw + 50%)}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter--full-width{padding:8rem 4rem}}pn-usp-promoter .usp-promoter__content{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter__content{-ms-flex-align:center;align-items:center;text-align:left;-ms-flex-pack:center;justify-content:center}}pn-usp-promoter .usp-promoter__content-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter__content-wrapper{-ms-flex-align:start;align-items:flex-start;padding-left:4rem}}pn-usp-promoter .usp-promoter__content-heading{margin-bottom:0.8rem}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter__content-heading{font-size:4.2rem
|
|
1
|
+
import{r as registerInstance,h,e as Host,g as getElement}from"./index-a0d3240d.js";var pnUspPromoterCss="pn-usp-promoter{width:80%}pn-usp-promoter .usp-promoter{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:3rem 0.8rem}pn-usp-promoter .usp-promoter--full-width{overflow:hidden;margin:0 calc(-50vw + 50%)}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter--full-width{padding:8rem 4rem}}pn-usp-promoter .usp-promoter__content{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;width:100%;max-width:114rem}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter__content{-ms-flex-align:center;align-items:center;text-align:left;-ms-flex-pack:center;justify-content:center}}pn-usp-promoter .usp-promoter__content-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:100%;max-width:75rem}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter__content-wrapper{-ms-flex-align:start;align-items:flex-start;padding-left:4rem}}pn-usp-promoter .usp-promoter__content-heading{margin-bottom:0.8rem}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter__content-heading{font-size:4.2rem}}@media screen and (min-width: 1140px){pn-usp-promoter .usp-promoter__content-heading{font-size:4.8rem}}@media screen and (min-width: 1440px){pn-usp-promoter .usp-promoter__content-heading{font-size:5.6rem}}pn-usp-promoter .usp-promoter__no-margin-bottom{margin-bottom:0 !important}pn-usp-promoter .usp-promoter__content-text{font-size:1.6rem;max-width:47rem;margin-bottom:2.6rem}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter__content-text{text-wrap:balance}}@media screen and (min-width: 1140px){pn-usp-promoter .usp-promoter__content-text{font-size:1.8rem;max-width:60rem}}@media screen and (min-width: 1440px){pn-usp-promoter .usp-promoter__content-text{font-size:2rem;max-width:70rem}}pn-usp-promoter [slot=app-store]{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;margin-bottom:2.6rem;gap:1rem}pn-usp-promoter [slot=app-store]>a{background-color:black;border:0.1rem solid #A6A6A6;border-radius:0.8rem;color:#FFF;display:inline-block;line-height:0;text-decoration:none;-webkit-transition:background-color 0.2s ease-in-out;transition:background-color 0.2s ease-in-out}pn-usp-promoter [slot=app-store]>a::after{margin-left:0 !important;margin-right:0.5rem;top:0.2rem;position:relative}pn-usp-promoter [slot=app-store]>a:hover{background-color:#0D234B}pn-usp-promoter [slot=app-store]>a:focus{background-color:#0D234B;-webkit-box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #0D234B;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #0D234B}pn-usp-promoter [slot=app-store]>a:focus-visible{outline:none}pn-usp-promoter [slot=usp-buttons] pn-button{margin-bottom:1.6rem}pn-usp-promoter [slot=usp-buttons]>a{color:#005D92;font-weight:500;font-size:1.6rem;padding:0.1rem;text-decoration:none}pn-usp-promoter [slot=usp-buttons]>a pn-icon svg{-webkit-transition:-webkit-transform 0.3s ease-in-out;transition:-webkit-transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out}pn-usp-promoter [slot=usp-buttons]>a pn-icon svg path{fill:#005D92}pn-usp-promoter [slot=usp-buttons]>a:hover pn-icon svg{-webkit-transition:-webkit-transform 0.3s ease-in-out;transition:-webkit-transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;-webkit-transform:translateX(0.3rem);transform:translateX(0.3rem)}pn-usp-promoter [slot=usp-buttons]>a:hover pn-icon svg path{fill:#005D92}pn-usp-promoter [slot=app-store],pn-usp-promoter [slot=usp-buttons]{-ms-flex-direction:column;flex-direction:column}@media screen and (min-width: 768px){pn-usp-promoter [slot=app-store],pn-usp-promoter [slot=usp-buttons]{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;gap:1.6rem}}pn-usp-promoter [slot=illustration]{max-width:25%;position:relative;left:-1.6rem}pn-usp-promoter [slot=illustration] pn-scroll{position:-webkit-sticky;position:sticky;top:0}@media screen and (min-width: 768px){pn-usp-promoter [slot=illustration]{display:block}}pn-usp-promoter [slot=illustration] picture img{max-width:100%}@media screen and (min-width: 1140px){pn-usp-promoter [slot=illustration] picture img{width:32rem}}@media screen and (min-width: 1440px){pn-usp-promoter [slot=illustration] picture img{width:33.6rem}}pn-usp-promoter .usp-promoter__heading-extension{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}pn-usp-promoter .usp-promoter--right-align .usp-promoter__content{-ms-flex-direction:row-reverse;flex-direction:row-reverse;text-align:right}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter--right-align .usp-promoter__content{-ms-flex-align:center;align-items:center}}pn-usp-promoter .usp-promoter--right-align .usp-promoter__content-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:end;align-items:flex-end;padding-left:0}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter--right-align .usp-promoter__content-wrapper{padding-right:4rem}}pn-usp-promoter .usp-promoter--right-align [slot=app-store],pn-usp-promoter .usp-promoter--right-align [slot=usp-buttons]{-ms-flex-align:end;align-items:flex-end}pn-usp-promoter .usp-promoter--right-align [slot=illustration]{left:1.6rem}@media screen and (max-width: 768px){pn-usp-promoter .usp-promoter--hide-image-small-screen [slot=illustration] picture img{display:none}pn-usp-promoter .usp-promoter--hide-image-small-screen .usp-promoter__content{text-align:center}pn-usp-promoter .usp-promoter--hide-image-small-screen .usp-promoter__content-wrapper{-ms-flex-align:center;align-items:center;padding-right:0}pn-usp-promoter .usp-promoter--hide-image-small-screen [slot=app-store],pn-usp-promoter .usp-promoter--hide-image-small-screen [slot=usp-buttons]{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center}}";var PnUspPromoter=function(){function t(t){registerInstance(this,t);this.heading=null;this.headingExtension=null;this.bodyText=null;this.backgroundGradient=null;this.fullWidth=false;this.rightAlign=false;this.hideMobileImage=false}t.prototype.centerMobileContent=function(){var t=this.hostElement.querySelector('[slot="illustration"]');if(this.hideMobileImage||t==null){return"usp-promoter--hide-image-small-screen"}return""};t.prototype.render=function(){var t=this,e=t.fullWidth,o=t.rightAlign;var r=["usp-promoter",e?"usp-promoter--full-width":"",o?"usp-promoter--right-align":""].join(" ");var n=this.headingExtension?"usp-promoter__heading-extension":"";return h(Host,null,h("div",{class:" ".concat(r," ").concat(this.centerMobileContent()),style:{background:"".concat(this.backgroundGradient)}},h("div",{class:"usp-promoter__content"},h("slot",{name:"illustration"}),h("div",{class:"usp-promoter__content-wrapper"},h("h2",{class:"usp-promoter__content-heading ".concat(n)},h("span",null,this.heading),this.headingExtension?h("span",null,this.headingExtension):null),h("p",{class:"usp-promoter__content-text"},this.bodyText),h("slot",{name:"app-store"}),h("slot",{name:"usp-buttons"})))))};Object.defineProperty(t.prototype,"hostElement",{get:function(){return getElement(this)},enumerable:false,configurable:true});return t}();PnUspPromoter.style=pnUspPromoterCss;export{PnUspPromoter as pn_usp_promoter};
|
package/package.json
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
System.register(["./p-3afcafee.system.js"],(function(t){"use strict";var e,o,r,n;return{setters:[function(t){e=t.r;o=t.h;r=t.e;n=t.g}],execute:function(){var s="pn-usp-promoter{width:80%}pn-usp-promoter .usp-promoter{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:3rem 0.8rem}pn-usp-promoter .usp-promoter--full-width{overflow:hidden;margin:0 calc(-50vw + 50%)}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter--full-width{padding:8rem 4rem}}pn-usp-promoter .usp-promoter__content{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;width:100%;max-width:114rem}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter__content{-ms-flex-align:center;align-items:center;text-align:left;-ms-flex-pack:center;justify-content:center}}pn-usp-promoter .usp-promoter__content-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:100%;max-width:75rem}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter__content-wrapper{-ms-flex-align:start;align-items:flex-start;padding-left:4rem}}pn-usp-promoter .usp-promoter__content-heading{margin-bottom:0.8rem}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter__content-heading{font-size:4.2rem}}@media screen and (min-width: 1140px){pn-usp-promoter .usp-promoter__content-heading{font-size:4.8rem}}@media screen and (min-width: 1440px){pn-usp-promoter .usp-promoter__content-heading{font-size:5.6rem}}pn-usp-promoter .usp-promoter__no-margin-bottom{margin-bottom:0 !important}pn-usp-promoter .usp-promoter__content-text{font-size:1.6rem;max-width:47rem;margin-bottom:2.6rem}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter__content-text{text-wrap:balance}}@media screen and (min-width: 1140px){pn-usp-promoter .usp-promoter__content-text{font-size:1.8rem;max-width:60rem}}@media screen and (min-width: 1440px){pn-usp-promoter .usp-promoter__content-text{font-size:2rem;max-width:70rem}}pn-usp-promoter [slot=app-store]{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;margin-bottom:2.6rem;gap:1rem}pn-usp-promoter [slot=app-store]>a{background-color:black;border:0.1rem solid #A6A6A6;border-radius:0.8rem;color:#FFF;display:inline-block;line-height:0;text-decoration:none;-webkit-transition:background-color 0.2s ease-in-out;transition:background-color 0.2s ease-in-out}pn-usp-promoter [slot=app-store]>a::after{margin-left:0 !important;margin-right:0.5rem;top:0.2rem;position:relative}pn-usp-promoter [slot=app-store]>a:hover{background-color:#0D234B}pn-usp-promoter [slot=app-store]>a:focus{background-color:#0D234B;-webkit-box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #0D234B;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #0D234B}pn-usp-promoter [slot=app-store]>a:focus-visible{outline:none}pn-usp-promoter [slot=usp-buttons] pn-button{margin-bottom:1.6rem}pn-usp-promoter [slot=usp-buttons]>a{color:#005D92;font-weight:500;font-size:1.6rem;padding:0.1rem;text-decoration:none}pn-usp-promoter [slot=usp-buttons]>a pn-icon svg{-webkit-transition:-webkit-transform 0.3s ease-in-out;transition:-webkit-transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out}pn-usp-promoter [slot=usp-buttons]>a pn-icon svg path{fill:#005D92}pn-usp-promoter [slot=usp-buttons]>a:hover pn-icon svg{-webkit-transition:-webkit-transform 0.3s ease-in-out;transition:-webkit-transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;-webkit-transform:translateX(0.3rem);transform:translateX(0.3rem)}pn-usp-promoter [slot=usp-buttons]>a:hover pn-icon svg path{fill:#005D92}pn-usp-promoter [slot=app-store],pn-usp-promoter [slot=usp-buttons]{-ms-flex-direction:column;flex-direction:column}@media screen and (min-width: 768px){pn-usp-promoter [slot=app-store],pn-usp-promoter [slot=usp-buttons]{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;gap:1.6rem}}pn-usp-promoter [slot=illustration]{max-width:25%;position:relative;left:-1.6rem}pn-usp-promoter [slot=illustration] pn-scroll{position:-webkit-sticky;position:sticky;top:0}@media screen and (min-width: 768px){pn-usp-promoter [slot=illustration]{display:block}}pn-usp-promoter [slot=illustration] picture img{max-width:100%}@media screen and (min-width: 1140px){pn-usp-promoter [slot=illustration] picture img{width:32rem}}@media screen and (min-width: 1440px){pn-usp-promoter [slot=illustration] picture img{width:33.6rem}}pn-usp-promoter .usp-promoter__heading-extension{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}pn-usp-promoter .usp-promoter--right-align .usp-promoter__content{-ms-flex-direction:row-reverse;flex-direction:row-reverse;text-align:right}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter--right-align .usp-promoter__content{-ms-flex-align:center;align-items:center}}pn-usp-promoter .usp-promoter--right-align .usp-promoter__content-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:end;align-items:flex-end;padding-left:0}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter--right-align .usp-promoter__content-wrapper{padding-right:4rem}}pn-usp-promoter .usp-promoter--right-align [slot=app-store],pn-usp-promoter .usp-promoter--right-align [slot=usp-buttons]{-ms-flex-align:end;align-items:flex-end}pn-usp-promoter .usp-promoter--right-align [slot=illustration]{left:1.6rem}@media screen and (max-width: 768px){pn-usp-promoter .usp-promoter--hide-image-small-screen [slot=illustration] picture img{display:none}pn-usp-promoter .usp-promoter--hide-image-small-screen .usp-promoter__content{text-align:center}pn-usp-promoter .usp-promoter--hide-image-small-screen .usp-promoter__content-wrapper{-ms-flex-align:center;align-items:center;padding-right:0}pn-usp-promoter .usp-promoter--hide-image-small-screen [slot=app-store],pn-usp-promoter .usp-promoter--hide-image-small-screen [slot=usp-buttons]{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center}}";var p=t("pn_usp_promoter",function(){function t(t){e(this,t);this.heading=null;this.headingExtension=null;this.bodyText=null;this.backgroundGradient=null;this.fullWidth=false;this.rightAlign=false;this.hideMobileImage=false}t.prototype.centerMobileContent=function(){var t=this.hostElement.querySelector('[slot="illustration"]');if(this.hideMobileImage||t==null){return"usp-promoter--hide-image-small-screen"}return""};t.prototype.render=function(){var t=this,e=t.fullWidth,n=t.rightAlign;var s=["usp-promoter",e?"usp-promoter--full-width":"",n?"usp-promoter--right-align":""].join(" ");var p=this.headingExtension?"usp-promoter__heading-extension":"";return o(r,null,o("div",{class:" ".concat(s," ").concat(this.centerMobileContent()),style:{background:"".concat(this.backgroundGradient)}},o("div",{class:"usp-promoter__content"},o("slot",{name:"illustration"}),o("div",{class:"usp-promoter__content-wrapper"},o("h2",{class:"usp-promoter__content-heading ".concat(p)},o("span",null,this.heading),this.headingExtension?o("span",null,this.headingExtension):null),o("p",{class:"usp-promoter__content-text"},this.bodyText),o("slot",{name:"app-store"}),o("slot",{name:"usp-buttons"})))))};Object.defineProperty(t.prototype,"hostElement",{get:function(){return n(this)},enumerable:false,configurable:true});return t}());p.style=s}}}));
|