@postnord/pn-marketweb-components 3.2.1 → 3.3.1
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 +1 -1
- package/cjs/pn-cta-block.cjs.entry.js.map +1 -1
- package/cjs/pn-teaser-card.cjs.entry.js +2 -2
- package/cjs/pn-teaser-card.cjs.entry.js.map +1 -1
- package/collection/components/cards/pn-teaser-card/pn-teaser-card.js +2 -2
- package/collection/components/cards/pn-teaser-card/pn-teaser-card.js.map +1 -1
- package/collection/components/cta/pn-cta-block/pn-cta-block.css +5 -1
- package/components/pn-cta-block.js +1 -1
- package/components/pn-cta-block.js.map +1 -1
- package/components/pn-teaser-card.js +2 -2
- package/components/pn-teaser-card.js.map +1 -1
- package/esm/pn-cta-block.entry.js +1 -1
- package/esm/pn-cta-block.entry.js.map +1 -1
- package/esm/pn-teaser-card.entry.js +2 -2
- package/esm/pn-teaser-card.entry.js.map +1 -1
- package/package.json +4 -2
- package/pn-market-web-components/{p-fbc07c7a.entry.js → p-69a56d5c.entry.js} +2 -2
- package/pn-market-web-components/{p-fbc07c7a.entry.js.map → p-69a56d5c.entry.js.map} +1 -1
- package/pn-market-web-components/{p-0247c553.entry.js → p-73db2c9c.entry.js} +2 -2
- package/pn-market-web-components/{p-0247c553.entry.js.map → p-73db2c9c.entry.js.map} +1 -1
- package/pn-market-web-components/pn-market-web-components.esm.js +1 -1
- package/types/components/cards/pn-teaser-card/pn-teaser-card.d.ts +0 -1
- package/umd/pn-marketweb-init.js +1 -1
- package/umd/pn-marketweb-salesforce.js +1 -1
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-bca6f414.js');
|
|
6
6
|
|
|
7
|
-
const pnCtaBlockCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-cta-block{display:flex;justify-content:center}pn-cta-block .cta-block{display:flex;justify-content:space-between;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{flex-direction:row;padding:2.4rem}}@media screen and (min-width: 1140px){pn-cta-block .cta-block{margin-right:auto;margin-left:auto;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{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:inline-flex;max-width:75%}pn-cta-block .cta-block--small.cta-block--center{max-width:66%}}pn-cta-block .cta-block--center{align-items:center;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}pn-cta-block .cta-block--center .cta-block__action>[slot=cta-button]{gap:0.8rem}@media screen and (min-width: 768px){pn-cta-block .cta-block--center .cta-block__action{flex-direction:row;gap:2.4rem;margin-top:1.6rem}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]{flex-direction:row;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:flex;flex:1;flex-direction:column;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:flex}pn-cta-block .cta-block__action>[slot=cta-buttons]{display:flex;flex-direction:column;row-gap:1.6rem;flex:1}@media screen and (min-width: 768px){pn-cta-block .cta-block__action>[slot=cta-buttons]{align-items:flex-end;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{transition: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{transition:transform 0.3s ease-in-out;transform:translateX(0.3rem)}pn-cta-block .cta-block__action>[slot=cta-buttons]>a:hover pn-icon svg path{fill:#
|
|
7
|
+
const pnCtaBlockCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-cta-block{display:flex;justify-content:center}pn-cta-block .cta-block{display:flex;justify-content:space-between;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{flex-direction:row;padding:2.4rem}}@media screen and (min-width: 1140px){pn-cta-block .cta-block{margin-right:auto;margin-left:auto;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{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:inline-flex;max-width:75%}pn-cta-block .cta-block--small.cta-block--center{max-width:66%}}pn-cta-block .cta-block--center{align-items:center;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}pn-cta-block .cta-block--center .cta-block__action>[slot=cta-button]{gap:0.8rem}@media screen and (min-width: 768px){pn-cta-block .cta-block--center .cta-block__action{flex-direction:row;gap:2.4rem;margin-top:1.6rem}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]{flex-direction:row;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:flex;flex:1;flex-direction:column;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:flex}pn-cta-block .cta-block__action>[slot=cta-buttons]{display:flex;flex-direction:column;row-gap:1.6rem;flex:1}@media screen and (min-width: 768px){pn-cta-block .cta-block__action>[slot=cta-buttons]{align-items:flex-end;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{transition: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{color:#0d234b;text-decoration:underline}pn-cta-block .cta-block__action>[slot=cta-buttons]>a:hover pn-icon svg{transition:transform 0.3s ease-in-out;transform:translateX(0.3rem)}pn-cta-block .cta-block__action>[slot=cta-buttons]>a:hover pn-icon svg path{fill:#0d234b}";
|
|
8
8
|
const PnCtaBlockStyle0 = pnCtaBlockCss;
|
|
9
9
|
|
|
10
10
|
const PnCtaBlock = class {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"pn-cta-block.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,
|
|
1
|
+
{"file":"pn-cta-block.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,q6IAAq6I,CAAC;AAC57I,yBAAe,aAAa;;MCKf,UAAU;;;uBAGK,IAAI;wBACH,IAAI;iCAEK,IAAI;uBAEb,KAAK;0BACF,KAAK;uBACR,KAAK;0BACF,KAAK;;;IAEnC,MAAM;QACJ,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;QACzE,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;QAC1E,QACEA,QAACC,UAAI,uDACHD,yFAA0B,IAAI,CAAC,iBAAiB,EAAE,KAAK,EAAE,aAAa,IAAI,CAAC,OAAO,GAAG,kBAAkB,GAAG,EAAE,KAAK,IAAI,CAAC,UAAU,GAAG,mBAAmB,GAAG,EAAE,MAAM,IAAI,CAAC,OAAO,GAAG,kBAAkB,GAAG,EAAE,KAAK,IAAI,CAAC,UAAU,GAAG,wBAAwB,GAAG,EAAE,EAAE,KACzP,QAAQ;YACRA,iBAAK,KAAK,EAAC,0BAA0B,IACnCA,kBAAM,IAAI,EAAC,cAAc,GAAG,CACxB,GAAG,IAAI,GAEd,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ;YAC7BA,iBAAK,KAAK,EAAC,oBAAoB,IAC7BA,gBAAI,KAAK,EAAC,oBAAoB,IAAE,IAAI,CAAC,OAAO,CAAM,EAClDA,eAAG,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,QAAQ,CAAK,CAC1C,GAAG,IAAI,GAEb,UAAU;YACVA,iBAAK,KAAK,EAAC,mBAAmB,IAC5BA,kBAAM,IAAI,EAAC,aAAa,GAAG,CACvB,GAAG,IAAI,EAEX,CACD,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/cta/pn-cta-block/pn-cta-block.scss?tag=pn-cta-block","src/components/cta/pn-cta-block/pn-cta-block.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-cta-block {\n display: flex;\n justify-content: center;\n\n .cta-block {\n display: flex;\n justify-content: space-between;\n flex-direction: column;\n border-radius: 2.4rem;\n padding: 3.2rem 2.4rem;\n width: 100%;\n\n @media screen and (min-width: 768px) {\n flex-direction: row;\n padding: 2.4rem;\n }\n\n @media screen and (min-width: 1140px) {\n margin-right: auto;\n margin-left: auto;\n max-width: 95%;\n }\n\n @media screen and (min-width: 1440px) {\n max-width: 90%;\n }\n\n &[pn-background-color='blue25'] {\n background-color: $blue25;\n }\n\n &[pn-background-color='coral50'] {\n background-color: $coral50;\n }\n\n &[pn-background-color='gray25'] {\n background-color: $gray25;\n }\n\n &[pn-background-color='green25'] {\n background-color: $green25;\n }\n\n &[pn-background-color='transparent'] {\n padding: 0 3.2rem;\n }\n }\n\n .cta-block--content-top {\n .cta-block__content {\n justify-content: flex-start;\n }\n }\n\n .cta-block--large {\n .cta-block__heading {\n @media screen and (min-width: 768px) {\n font-size: 3.6rem;\n }\n }\n\n .cta-block__text {\n @media screen and (min-width: 768px) {\n font-size: 2rem;\n }\n }\n }\n\n .cta-block--small {\n width: auto;\n\n @media screen and (min-width:992px) {\n display: inline-flex;\n max-width: 75%;\n\n &.cta-block--center {\n max-width: 66%;\n }\n }\n }\n\n .cta-block--center {\n align-items: center;\n flex-direction: column;\n gap: 1.6rem;\n text-align: center;\n\n @media screen and (min-width:768px) {\n gap: 2.4rem;\n padding: 3.2rem;\n }\n\n .cta-block__content {\n @media screen and (min-width: 768px) {\n max-width: 74rem;\n padding: 0;\n }\n }\n\n .cta-block__action {\n margin-top: 0.8rem;\n\n &>[slot='cta-button'] {\n gap: 0.8rem;\n }\n\n @media screen and (min-width: 768px) {\n flex-direction: row;\n gap: 2.4rem;\n margin-top: 1.6rem;\n\n &.cta-block__button {\n margin-bottom: 0;\n }\n\n &>[slot='cta-buttons'] {\n flex-direction: row;\n align-items: center;\n gap: 2.4rem;\n }\n }\n }\n\n .cta-block__image-wrapper {\n @media screen and (min-width: 768px) {\n display: block;\n }\n\n & > [slot='illustration'] {\n padding-right: 0;\n }\n }\n\n .cta-block__text {\n margin-bottom: 0 !important;\n }\n }\n\n .cta-block__image-wrapper {\n margin-bottom: 1.6rem;\n\n &>[slot='illustration'] {\n &>picture>img {\n border-radius: 0.8rem;\n max-width: 100%;\n }\n }\n\n @media screen and (min-width:768px) {\n display: none;\n max-width: 20%;\n }\n\n @media screen and (min-width: 992px) {\n display: block;\n margin-bottom: 0;\n\n & > [slot='illustration'] {\n padding-right: 3.2rem;\n }\n }\n }\n\n .cta-block__content {\n display: flex;\n flex: 1;\n flex-direction: column;\n justify-content: center;\n\n @media screen and (min-width: 768px) {\n padding-right: 2.4rem;\n }\n\n .cta-block__heading,\n .cta-block__text {\n @media screen and (min-width:768px) {\n max-width: 74rem;\n }\n }\n\n .cta-block__text {\n margin-bottom: 2.4rem;\n\n @media screen and (min-width: 768px) {\n margin-bottom: 0;\n }\n }\n }\n\n .cta-block__heading {\n margin-bottom: 0.8rem;\n }\n\n .cta-block__action {\n display: flex;\n\n &>[slot='cta-buttons'] {\n display: flex;\n flex-direction: column;\n row-gap: 1.6rem;\n flex: 1;\n\n @media screen and (min-width:768px) {\n align-items: flex-end;\n justify-content: center;\n gap: 1.6rem;\n margin-top: 0;\n }\n\n & > a {\n color: $blue700;\n font-weight: 500;\n font-size: 1.6rem;\n padding: 0.1rem;\n text-decoration: none;\n\n pn-icon svg {\n transition: transform 0.3s ease-in-out;\n\n path {\n fill: $blue700;\n }\n }\n\n &:hover {\n color: $blue900;\n text-decoration: underline;\n \n pn-icon svg {\n transition: transform 0.3s ease-in-out;\n transform: translateX(0.3rem);\n\n path {\n fill: $blue900;\n }\n }\n }\n }\n }\n }\n}\n","import { Component, Host, Prop, h, Element } from '@stencil/core';\n\n@Component({\n tag: 'pn-cta-block',\n styleUrl: 'pn-cta-block.scss',\n})\nexport class PnCtaBlock {\n @Element() hostElement: HTMLElement;\n\n @Prop() heading: string = null;\n @Prop() bodyText: string = null;\n\n @Prop() pnBackgroundColor: string = null;\n\n @Prop() isLarge: boolean = false;\n @Prop() isCentered: boolean = false;\n @Prop() isSmall: boolean = false;\n @Prop() contentTop: boolean = false;\n\n render() {\n const hasImage = this.hostElement.querySelector('[slot=\"illustration\"]');\n const hasButtons = this.hostElement.querySelector('[slot=\"cta-buttons\"]');\n return (\n <Host>\n <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' : ''}`}>\n {(hasImage ?\n <div class=\"cta-block__image-wrapper\">\n <slot name=\"illustration\" />\n </div> : null\n )}\n {(this.heading && this.bodyText)?\n <div class=\"cta-block__content\">\n <h2 class=\"cta-block__heading\">{this.heading}</h2>\n <p class=\"cta-block__text\">{this.bodyText}</p>\n </div> : null\n }\n {(hasButtons ?\n <div class=\"cta-block__action\">\n <slot name=\"cta-buttons\" />\n </div> : null\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -19,14 +19,14 @@ const PnTeaserCard = class {
|
|
|
19
19
|
this.hasIllustrationSlot = true;
|
|
20
20
|
}
|
|
21
21
|
get hostElement() { return index.getElement(this); }
|
|
22
|
-
labelToCapitals = this.label?.toUpperCase();
|
|
23
22
|
componentWillLoad() {
|
|
24
23
|
this.hasCtaSlotContent = !!this.hostElement.querySelector('[slot="cta"]');
|
|
25
24
|
this.hasIllustrationSlot = !!this.hostElement.querySelector('[slot="illustration"]');
|
|
26
25
|
}
|
|
27
26
|
//render
|
|
28
27
|
render() {
|
|
29
|
-
|
|
28
|
+
const labelToCapitals = this.label?.toUpperCase();
|
|
29
|
+
return (index.h(index.Host, { key: 'fdbbca9a340be605fab4928fd899e2ed7d6da987' }, index.h("slot", { key: '73c277568a6552fc2cdad9449c5805198f6c4c39', name: "clickable-block-wrapper" }), index.h("div", { key: '263a5919c76eb373958d3ef92aa90ed67656d25e', class: "pn-teaser-card__container" }, index.h("div", { key: '11cd5bc0d913acc378f960ec4d3baf0c7d3ecc99', class: `pn-teaser-card__container__image__container ${!this.hasIllustrationSlot ? 'pn-teaser-card__container__image__container--no-image' : ''}` }, index.h("slot", { key: '71893f8f45c0275c68c59768582a663737fd5eea', name: "illustration" })), index.h("div", { key: '99a874f3c2a22983edcab63a018050d47cbdc5d0', class: "pn-teaser-card__container__content" }, index.h("div", { key: '451ae56adec502481416822c169a01774fa262aa', class: "pn-teaser-card__container__content__text__container" }, labelToCapitals && index.h("span", { key: '2dfcef1bf94c1caea50c0f86263fea71713bf572', class: "pn-teaser-card__container__content__text__container__label" }, labelToCapitals), index.h("h2", { key: 'bd796379bb1bb106aea2de582df537a804f4c415', class: "pn-teaser-card__container__content__text__container__heading" }, this.heading), index.h("p", { key: 'ec25bea0041371fb67bb414cbc731d46234b118a', class: "pn-teaser-card__container__content__text__container__preamble" }, this.text)), this.hasCtaSlotContent && (index.h("div", { key: '6ebbe23c0584a63325e2faff4eb3979f804869aa', class: "pn-teaser-card__container__content__cta" }, index.h("slot", { key: '0a87639586c866e4e2439c67951362abe7a2f26d', name: "cta" })))))));
|
|
30
30
|
}
|
|
31
31
|
};
|
|
32
32
|
PnTeaserCard.style = PnTeaserCardStyle0;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"pn-teaser-card.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,g0RAAg0R,CAAC;AACz1R,2BAAe,eAAe;;MCKjB,YAAY;;;oBAGA,IAAI;uBACD,IAAI;qBACL,IAAI;6BACoB,OAAO;iCACH,MAAM;iCAIrB,KAAK;mCACH,IAAI;;;IAH5C,eAAe,GAAG,IAAI,CAAC,KAAK,EAAE,WAAW,EAAE,CAAC;IAK5C,iBAAiB;QACf,IAAI,CAAC,iBAAiB,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;QAC1E,IAAI,CAAC,mBAAmB,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;KACtF;;IAGD,MAAM;QACJ,QACEA,QAACC,UAAI,uDACHD,mEAAM,IAAI,EAAC,yBAAyB,GAAG,EACvCA,kEAAK,KAAK,EAAC,2BAA2B,IACpCA,kEAAK,KAAK,EAAE,+CAA+C,CAAC,IAAI,CAAC,mBAAmB,GAAG,uDAAuD,GAAG,EAAE,EAAE,IACnJA,mEAAM,IAAI,EAAC,cAAc,GAAG,CACxB,EACNA,kEAAK,KAAK,EAAC,oCAAoC,IAC7CA,kEAAK,KAAK,EAAC,qDAAqD,IAC7D,IAAI,CAAC,eAAe,IAAIA,mEAAM,KAAK,EAAC,4DAA4D,IAAE,IAAI,CAAC,eAAe,CAAQ,EAC/HA,iEAAI,KAAK,EAAC,8DAA8D,IAAE,IAAI,CAAC,OAAO,CAAM,EAC5FA,gEAAG,KAAK,EAAC,+DAA+D,IAAE,IAAI,CAAC,IAAI,CAAK,CACpF,EACL,IAAI,CAAC,iBAAiB,KACrBA,kEAAK,KAAK,EAAC,yCAAyC,IAClDA,mEAAM,IAAI,EAAC,KAAK,GAAG,CACf,CACP,CACG,CACF,CACD,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/cards/pn-teaser-card/pn-teaser-card.scss?tag=pn-teaser-card","src/components/cards/pn-teaser-card/pn-teaser-card.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\n$teaser-card-media-tablet: 768px; // 768px\n$teaser-card-media-desktop: 1200px; //1200px\n$teaser-card-media-large-desktop: 1640px; //1640\n\n//making pn wrapping link clickable over card image\n.block.teasercardblock {\n a[data-block-clickable-link='true'] {\n z-index: 1;\n }\n}\n\n//mobile first\npn-teaser-card {\n width: 100%;\n height: 100%;\n display: flex;\n\n .pn-teaser-card__container {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n border-radius: 2.4rem;\n width: 100%;\n }\n\n .pn-teaser-card__container__image__container {\n width: 100%;\n position: relative;\n\n & > [slot='illustration'] {\n clip-path: ellipse(100% 90% at 50% 0%);\n height: 100%;\n overflow: hidden;\n border-top-left-radius: 2.4rem;\n border-top-right-radius: 2.4rem;\n\n & > picture > img {\n width: 100%;\n height: auto;\n transition: 0.4s ease-in-out;\n transform: scale(1);\n aspect-ratio: 16/9;\n object-fit: cover;\n object-position: 50% 0;\n }\n }\n }\n\n .pn-teaser-card__container__content {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n flex: 1 1 100%;\n gap: 3.2rem;\n padding: 2.4rem 2.4rem;\n padding-top: 0;\n }\n\n .pn-teaser-card__container__content__text__container__heading {\n font-weight: 700;\n font-size: 2.4rem;\n line-height: 2.64rem;\n margin-bottom: 0;\n }\n\n .pn-teaser-card__container__content__text__container__preamble {\n padding-top: 1.6rem;\n font-weight: 400;\n font-size: 1.6rem;\n line-height: 2.24rem;\n margin-bottom: 0;\n }\n\n .pn-teaser-card__container__content__text__container__label {\n display: block;\n margin-bottom: 1.6rem;\n font-weight: 400;\n font-size: 1.2rem;\n line-height: 140%;\n }\n\n .pn-teaser-card__container__content__cta {\n & > pn-button {\n align-self: flex-end;\n width: 100%;\n\n & a:hover {\n text-decoration: none;\n }\n\n & > button,\n & > a {\n & > .pn-button-bg {\n transition: 0.4s ease-in-out;\n }\n }\n\n @media screen and (min-width: $teaser-card-media-tablet) {\n width: fit-content;\n }\n }\n\n .secondary-link--animated {\n font-weight: 500;\n font-size: 1.6rem;\n text-decoration: none;\n color: $blue700;\n\n pn-icon svg {\n transition: 0.3s ease-in-out;\n position: relative;\n left: -0.3rem;\n\n path {\n fill: $blue700;\n }\n }\n\n &[target='_blank']:not(.pn-button):after {\n display: none;\n }\n }\n }\n}\n\n//colors\npn-teaser-card[data-card-color='coral'] {\n & > .pn-teaser-card__container {\n background-color: $coral50;\n }\n}\n\npn-teaser-card[data-card-color='green'] {\n & > .pn-teaser-card__container {\n background-color: $green50;\n }\n}\n\npn-teaser-card[data-card-color='blue'] {\n & > .pn-teaser-card__container {\n background-color: $blue25;\n }\n}\n\npn-teaser-card[data-card-color='blue50'] {\n & > .pn-teaser-card__container {\n background-color: $blue50;\n }\n}\n\npn-teaser-card[data-card-color='blue400'] {\n & > .pn-teaser-card__container {\n background-color: $blue400;\n\n .pn-teaser-card__container__content__text__container__label,\n .pn-teaser-card__container__content__text__container__heading,\n .pn-teaser-card__container__content__text__container__preamble,\n .pn-teaser-card__container__content__cta .secondary-link--animated {\n color: $white;\n }\n\n .secondary-link--animated {\n & > pn-icon > svg > path {\n fill: $white;\n }\n }\n }\n}\n\npn-teaser-card[data-card-color='blue900'] {\n & > .pn-teaser-card__container {\n background-color: $blue900;\n .pn-teaser-card__container__content__text__container__heading {\n color: $coral400;\n }\n\n .pn-teaser-card__container__content__text__container__label,\n .pn-teaser-card__container__content__text__container__preamble,\n .pn-teaser-card__container__content__cta .secondary-link--animated {\n color: $white;\n }\n\n .secondary-link--animated {\n & > pn-icon > svg > path {\n fill: $white;\n }\n }\n }\n}\n\npn-teaser-card[data-card-color='white'] {\n & > .pn-teaser-card__container {\n background-color: $white;\n }\n}\n\n//color override when in a listblock\n.teasercardlistblock {\n .teasercardblock.has-bg {\n background-color: transparent;\n background: transparent;\n }\n}\n\n// variants\n\n.onequarterwidth {\n .pn-teaser-card__container__content__text__container__label {\n @media screen and (min-width: $teaser-card-media-desktop) {\n margin-bottom: 0.8rem;\n }\n }\n}\n\n.onethirdwidth,\n.onequarterwidth {\n & > pn-teaser-card {\n .pn-teaser-card__container__image__container--no-image {\n padding-top: 2.4rem;\n }\n }\n\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 400;\n }\n }\n}\n\n.halfwidth {\n & > pn-teaser-card {\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 400;\n }\n }\n\n .pn-teaser-card__container__image__container--no-image {\n padding-top: 2.4rem;\n }\n\n @media screen and (min-width: 992px) {\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 500;\n }\n }\n }\n\n @media screen and (min-width: $teaser-card-media-desktop) {\n .pn-teaser-card__container__image__container--no-image {\n padding-top: 4rem;\n }\n\n .pn-teaser-card__container__content {\n padding: 0 4rem 4rem;\n }\n\n .pn-teaser-card__container__content__text__container__heading {\n font-weight: 700;\n font-size: 3.2rem;\n line-height: 3.52rem;\n }\n\n .pn-teaser-card__container__content__text__container__preamble {\n font-weight: 400;\n font-size: 2rem;\n line-height: 2.8rem;\n }\n }\n\n @media screen and (min-width: $teaser-card-media-large-desktop) {\n .pn-teaser-card__container__image__container--no-image {\n padding-top: 5.6rem;\n }\n\n .pn-teaser-card__container__content {\n padding: 0 5.6rem 5.6rem;\n }\n }\n }\n}\n\n.fullwidth {\n & > pn-teaser-card {\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 400;\n }\n }\n\n .pn-teaser-card__container__image__container--no-image {\n width: auto;\n padding-top: 2.4rem;\n }\n\n @media screen and (min-width: $teaser-card-media-tablet) {\n min-height: 35rem;\n\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 500;\n }\n }\n\n .pn-teaser-card__container {\n flex-direction: row;\n }\n\n .pn-teaser-card__container__content {\n align-self: center;\n gap: 2.4rem;\n padding: 3.2rem 3.2rem 3.2rem 2.4rem;\n }\n\n .pn-teaser-card__container__image__container {\n & > [slot='illustration'] {\n border-top-left-radius: 2.4rem;\n border-bottom-left-radius: 2.4rem;\n clip-path: ellipse(100% 100% at 0% 50%);\n\n & > picture > img {\n height: 100%;\n object-fit: cover;\n }\n }\n }\n }\n\n @media screen and (min-width: $teaser-card-media-desktop) {\n min-height: 52rem;\n\n .pn-teaser-card__container__content {\n padding: 4rem 4rem 4rem 3.2rem;\n }\n\n .pn-teaser-card__container__content__text__container__heading {\n font-weight: 700;\n font-size: 4.8rem;\n line-height: 5.28rem;\n }\n\n .pn-teaser-card__container__content__text__container__preamble {\n font-size: 2rem;\n line-height: 2.8rem;\n }\n }\n }\n\n pn-teaser-card[data-card-alignment='right'] {\n @media screen and (min-width: $teaser-card-media-tablet) {\n .pn-teaser-card__container {\n flex-direction: row-reverse;\n }\n\n .pn-teaser-card__container__content {\n padding: 3.2rem 2.4rem 3.2rem 3.2rem;\n }\n\n .pn-teaser-card__container__image__container {\n & > [slot='illustration'] {\n border-bottom-right-radius: 2.4rem;\n clip-path: ellipse(100% 100% at 100% 50%);\n }\n }\n }\n\n @media screen and (min-width: $teaser-card-media-desktop) {\n .pn-teaser-card__container__content {\n padding: 4rem 3.2rem 4rem 4rem;\n }\n }\n }\n}\n\n//effect class\npn-teaser-card.teaser-card--hover-effect {\n &:hover {\n cursor: pointer;\n .pn-teaser-card__container__image__container {\n & [slot='illustration'] {\n & picture > img {\n transform: scale(1.02);\n filter: brightness(0.85);\n }\n }\n }\n\n .secondary-link--animated {\n text-decoration: underline;\n\n pn-icon svg {\n left: 0;\n }\n }\n\n pn-button {\n button,\n a {\n .pn-button-bg {\n background-color: $blue900;\n }\n }\n }\n\n &[data-card-color='blue900'] {\n pn-button {\n button,\n a {\n .pn-button-bg {\n background-color: $blue400;\n }\n }\n }\n }\n }\n}\n","import { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\n@Component({\n tag: 'pn-teaser-card',\n styleUrl: 'pn-teaser-card.scss',\n})\nexport class PnTeaserCard {\n @Element() hostElement: HTMLElement;\n //props\n @Prop() text: string = null;\n @Prop() heading: string = null;\n @Prop() label?: string = null;\n @Prop({ reflect: true }) dataCardColor: string = 'coral';\n @Prop({ reflect: true }) dataCardAlignment: string = 'left';\n\n labelToCapitals = this.label?.toUpperCase();\n\n @State() hasCtaSlotContent: boolean = false;\n @State() hasIllustrationSlot: boolean = true;\n\n componentWillLoad() {\n this.hasCtaSlotContent = !!this.hostElement.querySelector('[slot=\"cta\"]');\n this.hasIllustrationSlot = !!this.hostElement.querySelector('[slot=\"illustration\"]');\n }\n\n //render\n render() {\n return (\n <Host>\n <slot name=\"clickable-block-wrapper\" />\n <div class=\"pn-teaser-card__container\">\n <div class={`pn-teaser-card__container__image__container ${!this.hasIllustrationSlot ? 'pn-teaser-card__container__image__container--no-image' : ''}`}>\n <slot name=\"illustration\" />\n </div>\n <div class=\"pn-teaser-card__container__content\">\n <div class=\"pn-teaser-card__container__content__text__container\">\n {this.labelToCapitals && <span class=\"pn-teaser-card__container__content__text__container__label\">{this.labelToCapitals}</span>}\n <h2 class=\"pn-teaser-card__container__content__text__container__heading\">{this.heading}</h2>\n <p class=\"pn-teaser-card__container__content__text__container__preamble\">{this.text}</p>\n </div>\n {this.hasCtaSlotContent && (\n <div class=\"pn-teaser-card__container__content__cta\">\n <slot name=\"cta\" />\n </div>\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"pn-teaser-card.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,g0RAAg0R,CAAC;AACz1R,2BAAe,eAAe;;MCKjB,YAAY;;;oBAGA,IAAI;uBACD,IAAI;qBACL,IAAI;6BACoB,OAAO;iCACH,MAAM;iCAErB,KAAK;mCACH,IAAI;;;IAE5C,iBAAiB;QACf,IAAI,CAAC,iBAAiB,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;QAC1E,IAAI,CAAC,mBAAmB,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;KACtF;;IAGD,MAAM;QACJ,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,EAAE,WAAW,EAAE,CAAC;QAElD,QACEA,QAACC,UAAI,uDACHD,mEAAM,IAAI,EAAC,yBAAyB,GAAG,EACvCA,kEAAK,KAAK,EAAC,2BAA2B,IACpCA,kEAAK,KAAK,EAAE,+CAA+C,CAAC,IAAI,CAAC,mBAAmB,GAAG,uDAAuD,GAAG,EAAE,EAAE,IACnJA,mEAAM,IAAI,EAAC,cAAc,GAAG,CACxB,EACNA,kEAAK,KAAK,EAAC,oCAAoC,IAC7CA,kEAAK,KAAK,EAAC,qDAAqD,IAC7D,eAAe,IAAIA,mEAAM,KAAK,EAAC,4DAA4D,IAAE,eAAe,CAAQ,EACrHA,iEAAI,KAAK,EAAC,8DAA8D,IAAE,IAAI,CAAC,OAAO,CAAM,EAC5FA,gEAAG,KAAK,EAAC,+DAA+D,IAAE,IAAI,CAAC,IAAI,CAAK,CACpF,EACL,IAAI,CAAC,iBAAiB,KACrBA,kEAAK,KAAK,EAAC,yCAAyC,IAClDA,mEAAM,IAAI,EAAC,KAAK,GAAG,CACf,CACP,CACG,CACF,CACD,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/cards/pn-teaser-card/pn-teaser-card.scss?tag=pn-teaser-card","src/components/cards/pn-teaser-card/pn-teaser-card.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\n$teaser-card-media-tablet: 768px; // 768px\n$teaser-card-media-desktop: 1200px; //1200px\n$teaser-card-media-large-desktop: 1640px; //1640\n\n//making pn wrapping link clickable over card image\n.block.teasercardblock {\n a[data-block-clickable-link='true'] {\n z-index: 1;\n }\n}\n\n//mobile first\npn-teaser-card {\n width: 100%;\n height: 100%;\n display: flex;\n\n .pn-teaser-card__container {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n border-radius: 2.4rem;\n width: 100%;\n }\n\n .pn-teaser-card__container__image__container {\n width: 100%;\n position: relative;\n\n & > [slot='illustration'] {\n clip-path: ellipse(100% 90% at 50% 0%);\n height: 100%;\n overflow: hidden;\n border-top-left-radius: 2.4rem;\n border-top-right-radius: 2.4rem;\n\n & > picture > img {\n width: 100%;\n height: auto;\n transition: 0.4s ease-in-out;\n transform: scale(1);\n aspect-ratio: 16/9;\n object-fit: cover;\n object-position: 50% 0;\n }\n }\n }\n\n .pn-teaser-card__container__content {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n flex: 1 1 100%;\n gap: 3.2rem;\n padding: 2.4rem 2.4rem;\n padding-top: 0;\n }\n\n .pn-teaser-card__container__content__text__container__heading {\n font-weight: 700;\n font-size: 2.4rem;\n line-height: 2.64rem;\n margin-bottom: 0;\n }\n\n .pn-teaser-card__container__content__text__container__preamble {\n padding-top: 1.6rem;\n font-weight: 400;\n font-size: 1.6rem;\n line-height: 2.24rem;\n margin-bottom: 0;\n }\n\n .pn-teaser-card__container__content__text__container__label {\n display: block;\n margin-bottom: 1.6rem;\n font-weight: 400;\n font-size: 1.2rem;\n line-height: 140%;\n }\n\n .pn-teaser-card__container__content__cta {\n & > pn-button {\n align-self: flex-end;\n width: 100%;\n\n & a:hover {\n text-decoration: none;\n }\n\n & > button,\n & > a {\n & > .pn-button-bg {\n transition: 0.4s ease-in-out;\n }\n }\n\n @media screen and (min-width: $teaser-card-media-tablet) {\n width: fit-content;\n }\n }\n\n .secondary-link--animated {\n font-weight: 500;\n font-size: 1.6rem;\n text-decoration: none;\n color: $blue700;\n\n pn-icon svg {\n transition: 0.3s ease-in-out;\n position: relative;\n left: -0.3rem;\n\n path {\n fill: $blue700;\n }\n }\n\n &[target='_blank']:not(.pn-button):after {\n display: none;\n }\n }\n }\n}\n\n//colors\npn-teaser-card[data-card-color='coral'] {\n & > .pn-teaser-card__container {\n background-color: $coral50;\n }\n}\n\npn-teaser-card[data-card-color='green'] {\n & > .pn-teaser-card__container {\n background-color: $green50;\n }\n}\n\npn-teaser-card[data-card-color='blue'] {\n & > .pn-teaser-card__container {\n background-color: $blue25;\n }\n}\n\npn-teaser-card[data-card-color='blue50'] {\n & > .pn-teaser-card__container {\n background-color: $blue50;\n }\n}\n\npn-teaser-card[data-card-color='blue400'] {\n & > .pn-teaser-card__container {\n background-color: $blue400;\n\n .pn-teaser-card__container__content__text__container__label,\n .pn-teaser-card__container__content__text__container__heading,\n .pn-teaser-card__container__content__text__container__preamble,\n .pn-teaser-card__container__content__cta .secondary-link--animated {\n color: $white;\n }\n\n .secondary-link--animated {\n & > pn-icon > svg > path {\n fill: $white;\n }\n }\n }\n}\n\npn-teaser-card[data-card-color='blue900'] {\n & > .pn-teaser-card__container {\n background-color: $blue900;\n .pn-teaser-card__container__content__text__container__heading {\n color: $coral400;\n }\n\n .pn-teaser-card__container__content__text__container__label,\n .pn-teaser-card__container__content__text__container__preamble,\n .pn-teaser-card__container__content__cta .secondary-link--animated {\n color: $white;\n }\n\n .secondary-link--animated {\n & > pn-icon > svg > path {\n fill: $white;\n }\n }\n }\n}\n\npn-teaser-card[data-card-color='white'] {\n & > .pn-teaser-card__container {\n background-color: $white;\n }\n}\n\n//color override when in a listblock\n.teasercardlistblock {\n .teasercardblock.has-bg {\n background-color: transparent;\n background: transparent;\n }\n}\n\n// variants\n\n.onequarterwidth {\n .pn-teaser-card__container__content__text__container__label {\n @media screen and (min-width: $teaser-card-media-desktop) {\n margin-bottom: 0.8rem;\n }\n }\n}\n\n.onethirdwidth,\n.onequarterwidth {\n & > pn-teaser-card {\n .pn-teaser-card__container__image__container--no-image {\n padding-top: 2.4rem;\n }\n }\n\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 400;\n }\n }\n}\n\n.halfwidth {\n & > pn-teaser-card {\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 400;\n }\n }\n\n .pn-teaser-card__container__image__container--no-image {\n padding-top: 2.4rem;\n }\n\n @media screen and (min-width: 992px) {\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 500;\n }\n }\n }\n\n @media screen and (min-width: $teaser-card-media-desktop) {\n .pn-teaser-card__container__image__container--no-image {\n padding-top: 4rem;\n }\n\n .pn-teaser-card__container__content {\n padding: 0 4rem 4rem;\n }\n\n .pn-teaser-card__container__content__text__container__heading {\n font-weight: 700;\n font-size: 3.2rem;\n line-height: 3.52rem;\n }\n\n .pn-teaser-card__container__content__text__container__preamble {\n font-weight: 400;\n font-size: 2rem;\n line-height: 2.8rem;\n }\n }\n\n @media screen and (min-width: $teaser-card-media-large-desktop) {\n .pn-teaser-card__container__image__container--no-image {\n padding-top: 5.6rem;\n }\n\n .pn-teaser-card__container__content {\n padding: 0 5.6rem 5.6rem;\n }\n }\n }\n}\n\n.fullwidth {\n & > pn-teaser-card {\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 400;\n }\n }\n\n .pn-teaser-card__container__image__container--no-image {\n width: auto;\n padding-top: 2.4rem;\n }\n\n @media screen and (min-width: $teaser-card-media-tablet) {\n min-height: 35rem;\n\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 500;\n }\n }\n\n .pn-teaser-card__container {\n flex-direction: row;\n }\n\n .pn-teaser-card__container__content {\n align-self: center;\n gap: 2.4rem;\n padding: 3.2rem 3.2rem 3.2rem 2.4rem;\n }\n\n .pn-teaser-card__container__image__container {\n & > [slot='illustration'] {\n border-top-left-radius: 2.4rem;\n border-bottom-left-radius: 2.4rem;\n clip-path: ellipse(100% 100% at 0% 50%);\n\n & > picture > img {\n height: 100%;\n object-fit: cover;\n }\n }\n }\n }\n\n @media screen and (min-width: $teaser-card-media-desktop) {\n min-height: 52rem;\n\n .pn-teaser-card__container__content {\n padding: 4rem 4rem 4rem 3.2rem;\n }\n\n .pn-teaser-card__container__content__text__container__heading {\n font-weight: 700;\n font-size: 4.8rem;\n line-height: 5.28rem;\n }\n\n .pn-teaser-card__container__content__text__container__preamble {\n font-size: 2rem;\n line-height: 2.8rem;\n }\n }\n }\n\n pn-teaser-card[data-card-alignment='right'] {\n @media screen and (min-width: $teaser-card-media-tablet) {\n .pn-teaser-card__container {\n flex-direction: row-reverse;\n }\n\n .pn-teaser-card__container__content {\n padding: 3.2rem 2.4rem 3.2rem 3.2rem;\n }\n\n .pn-teaser-card__container__image__container {\n & > [slot='illustration'] {\n border-bottom-right-radius: 2.4rem;\n clip-path: ellipse(100% 100% at 100% 50%);\n }\n }\n }\n\n @media screen and (min-width: $teaser-card-media-desktop) {\n .pn-teaser-card__container__content {\n padding: 4rem 3.2rem 4rem 4rem;\n }\n }\n }\n}\n\n//effect class\npn-teaser-card.teaser-card--hover-effect {\n &:hover {\n cursor: pointer;\n .pn-teaser-card__container__image__container {\n & [slot='illustration'] {\n & picture > img {\n transform: scale(1.02);\n filter: brightness(0.85);\n }\n }\n }\n\n .secondary-link--animated {\n text-decoration: underline;\n\n pn-icon svg {\n left: 0;\n }\n }\n\n pn-button {\n button,\n a {\n .pn-button-bg {\n background-color: $blue900;\n }\n }\n }\n\n &[data-card-color='blue900'] {\n pn-button {\n button,\n a {\n .pn-button-bg {\n background-color: $blue400;\n }\n }\n }\n }\n }\n}\n","import { Component, Prop, h, Element, State, Host } from \"@stencil/core\";\n\n@Component({\n tag: 'pn-teaser-card',\n styleUrl: 'pn-teaser-card.scss'\n})\nexport class PnTeaserCard {\n @Element() hostElement: HTMLElement;\n //props\n @Prop() text: string = null;\n @Prop() heading: string = null;\n @Prop() label?: string = null;\n @Prop({ reflect: true }) dataCardColor: string = 'coral';\n @Prop({ reflect: true }) dataCardAlignment: string = 'left';\n\n @State() hasCtaSlotContent: boolean = false;\n @State() hasIllustrationSlot: boolean = true;\n\n componentWillLoad() {\n this.hasCtaSlotContent = !!this.hostElement.querySelector('[slot=\"cta\"]');\n this.hasIllustrationSlot = !!this.hostElement.querySelector('[slot=\"illustration\"]');\n }\n\n //render\n render() {\n const labelToCapitals = this.label?.toUpperCase();\n\n return (\n <Host>\n <slot name=\"clickable-block-wrapper\" />\n <div class=\"pn-teaser-card__container\">\n <div class={`pn-teaser-card__container__image__container ${!this.hasIllustrationSlot ? 'pn-teaser-card__container__image__container--no-image' : ''}`}>\n <slot name=\"illustration\" />\n </div>\n <div class=\"pn-teaser-card__container__content\">\n <div class=\"pn-teaser-card__container__content__text__container\">\n {labelToCapitals && <span class=\"pn-teaser-card__container__content__text__container__label\">{labelToCapitals}</span>}\n <h2 class=\"pn-teaser-card__container__content__text__container__heading\">{this.heading}</h2>\n <p class=\"pn-teaser-card__container__content__text__container__preamble\">{this.text}</p>\n </div>\n {this.hasCtaSlotContent && (\n <div class=\"pn-teaser-card__container__content__cta\">\n <slot name=\"cta\" />\n </div>\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -10,14 +10,14 @@ export class PnTeaserCard {
|
|
|
10
10
|
this.hasIllustrationSlot = true;
|
|
11
11
|
}
|
|
12
12
|
hostElement;
|
|
13
|
-
labelToCapitals = this.label?.toUpperCase();
|
|
14
13
|
componentWillLoad() {
|
|
15
14
|
this.hasCtaSlotContent = !!this.hostElement.querySelector('[slot="cta"]');
|
|
16
15
|
this.hasIllustrationSlot = !!this.hostElement.querySelector('[slot="illustration"]');
|
|
17
16
|
}
|
|
18
17
|
//render
|
|
19
18
|
render() {
|
|
20
|
-
|
|
19
|
+
const labelToCapitals = this.label?.toUpperCase();
|
|
20
|
+
return (h(Host, { key: 'fdbbca9a340be605fab4928fd899e2ed7d6da987' }, h("slot", { key: '73c277568a6552fc2cdad9449c5805198f6c4c39', name: "clickable-block-wrapper" }), h("div", { key: '263a5919c76eb373958d3ef92aa90ed67656d25e', class: "pn-teaser-card__container" }, h("div", { key: '11cd5bc0d913acc378f960ec4d3baf0c7d3ecc99', class: `pn-teaser-card__container__image__container ${!this.hasIllustrationSlot ? 'pn-teaser-card__container__image__container--no-image' : ''}` }, h("slot", { key: '71893f8f45c0275c68c59768582a663737fd5eea', name: "illustration" })), h("div", { key: '99a874f3c2a22983edcab63a018050d47cbdc5d0', class: "pn-teaser-card__container__content" }, h("div", { key: '451ae56adec502481416822c169a01774fa262aa', class: "pn-teaser-card__container__content__text__container" }, labelToCapitals && h("span", { key: '2dfcef1bf94c1caea50c0f86263fea71713bf572', class: "pn-teaser-card__container__content__text__container__label" }, labelToCapitals), h("h2", { key: 'bd796379bb1bb106aea2de582df537a804f4c415', class: "pn-teaser-card__container__content__text__container__heading" }, this.heading), h("p", { key: 'ec25bea0041371fb67bb414cbc731d46234b118a', class: "pn-teaser-card__container__content__text__container__preamble" }, this.text)), this.hasCtaSlotContent && (h("div", { key: '6ebbe23c0584a63325e2faff4eb3979f804869aa', class: "pn-teaser-card__container__content__cta" }, h("slot", { key: '0a87639586c866e4e2439c67951362abe7a2f26d', name: "cta" })))))));
|
|
21
21
|
}
|
|
22
22
|
static get is() { return "pn-teaser-card"; }
|
|
23
23
|
static get originalStyleUrls() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pn-teaser-card.js","sourceRoot":"","sources":["../../../../src/components/cards/pn-teaser-card/pn-teaser-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,
|
|
1
|
+
{"version":3,"file":"pn-teaser-card.js","sourceRoot":"","sources":["../../../../src/components/cards/pn-teaser-card/pn-teaser-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAMzE,MAAM,OAAO,YAAY;;oBAGA,IAAI;uBACD,IAAI;qBACL,IAAI;6BACoB,OAAO;iCACH,MAAM;iCAErB,KAAK;mCACH,IAAI;;IATjC,WAAW,CAAc;IAWpC,iBAAiB;QACf,IAAI,CAAC,iBAAiB,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;QAC1E,IAAI,CAAC,mBAAmB,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;IACvF,CAAC;IAED,QAAQ;IACR,MAAM;QACJ,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,EAAE,WAAW,EAAE,CAAC;QAElD,OAAO,CACL,EAAC,IAAI;YACH,6DAAM,IAAI,EAAC,yBAAyB,GAAG;YACvC,4DAAK,KAAK,EAAC,2BAA2B;gBACpC,4DAAK,KAAK,EAAE,+CAA+C,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,uDAAuD,CAAC,CAAC,CAAC,EAAE,EAAE;oBACnJ,6DAAM,IAAI,EAAC,cAAc,GAAG,CACxB;gBACN,4DAAK,KAAK,EAAC,oCAAoC;oBAC7C,4DAAK,KAAK,EAAC,qDAAqD;wBAC7D,eAAe,IAAI,6DAAM,KAAK,EAAC,4DAA4D,IAAE,eAAe,CAAQ;wBACrH,2DAAI,KAAK,EAAC,8DAA8D,IAAE,IAAI,CAAC,OAAO,CAAM;wBAC5F,0DAAG,KAAK,EAAC,+DAA+D,IAAE,IAAI,CAAC,IAAI,CAAK,CACpF;oBACL,IAAI,CAAC,iBAAiB,IAAI,CACzB,4DAAK,KAAK,EAAC,yCAAyC;wBAClD,6DAAM,IAAI,EAAC,KAAK,GAAG,CACf,CACP,CACG,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Element, State, Host } from \"@stencil/core\";\n\n@Component({\n tag: 'pn-teaser-card',\n styleUrl: 'pn-teaser-card.scss'\n})\nexport class PnTeaserCard {\n @Element() hostElement: HTMLElement;\n //props\n @Prop() text: string = null;\n @Prop() heading: string = null;\n @Prop() label?: string = null;\n @Prop({ reflect: true }) dataCardColor: string = 'coral';\n @Prop({ reflect: true }) dataCardAlignment: string = 'left';\n\n @State() hasCtaSlotContent: boolean = false;\n @State() hasIllustrationSlot: boolean = true;\n\n componentWillLoad() {\n this.hasCtaSlotContent = !!this.hostElement.querySelector('[slot=\"cta\"]');\n this.hasIllustrationSlot = !!this.hostElement.querySelector('[slot=\"illustration\"]');\n }\n\n //render\n render() {\n const labelToCapitals = this.label?.toUpperCase();\n\n return (\n <Host>\n <slot name=\"clickable-block-wrapper\" />\n <div class=\"pn-teaser-card__container\">\n <div class={`pn-teaser-card__container__image__container ${!this.hasIllustrationSlot ? 'pn-teaser-card__container__image__container--no-image' : ''}`}>\n <slot name=\"illustration\" />\n </div>\n <div class=\"pn-teaser-card__container__content\">\n <div class=\"pn-teaser-card__container__content__text__container\">\n {labelToCapitals && <span class=\"pn-teaser-card__container__content__text__container__label\">{labelToCapitals}</span>}\n <h2 class=\"pn-teaser-card__container__content__text__container__heading\">{this.heading}</h2>\n <p class=\"pn-teaser-card__container__content__text__container__preamble\">{this.text}</p>\n </div>\n {this.hasCtaSlotContent && (\n <div class=\"pn-teaser-card__container__content__cta\">\n <slot name=\"cta\" />\n </div>\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
|
|
@@ -202,10 +202,14 @@ pn-cta-block .cta-block__action > [slot=cta-buttons] > a pn-icon svg {
|
|
|
202
202
|
pn-cta-block .cta-block__action > [slot=cta-buttons] > a pn-icon svg path {
|
|
203
203
|
fill: #005d92;
|
|
204
204
|
}
|
|
205
|
+
pn-cta-block .cta-block__action > [slot=cta-buttons] > a:hover {
|
|
206
|
+
color: #0d234b;
|
|
207
|
+
text-decoration: underline;
|
|
208
|
+
}
|
|
205
209
|
pn-cta-block .cta-block__action > [slot=cta-buttons] > a:hover pn-icon svg {
|
|
206
210
|
transition: transform 0.3s ease-in-out;
|
|
207
211
|
transform: translateX(0.3rem);
|
|
208
212
|
}
|
|
209
213
|
pn-cta-block .cta-block__action > [slot=cta-buttons] > a:hover pn-icon svg path {
|
|
210
|
-
fill: #
|
|
214
|
+
fill: #0d234b;
|
|
211
215
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
|
|
2
2
|
|
|
3
|
-
const pnCtaBlockCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-cta-block{display:flex;justify-content:center}pn-cta-block .cta-block{display:flex;justify-content:space-between;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{flex-direction:row;padding:2.4rem}}@media screen and (min-width: 1140px){pn-cta-block .cta-block{margin-right:auto;margin-left:auto;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{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:inline-flex;max-width:75%}pn-cta-block .cta-block--small.cta-block--center{max-width:66%}}pn-cta-block .cta-block--center{align-items:center;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}pn-cta-block .cta-block--center .cta-block__action>[slot=cta-button]{gap:0.8rem}@media screen and (min-width: 768px){pn-cta-block .cta-block--center .cta-block__action{flex-direction:row;gap:2.4rem;margin-top:1.6rem}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]{flex-direction:row;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:flex;flex:1;flex-direction:column;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:flex}pn-cta-block .cta-block__action>[slot=cta-buttons]{display:flex;flex-direction:column;row-gap:1.6rem;flex:1}@media screen and (min-width: 768px){pn-cta-block .cta-block__action>[slot=cta-buttons]{align-items:flex-end;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{transition: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{transition:transform 0.3s ease-in-out;transform:translateX(0.3rem)}pn-cta-block .cta-block__action>[slot=cta-buttons]>a:hover pn-icon svg path{fill:#
|
|
3
|
+
const pnCtaBlockCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-cta-block{display:flex;justify-content:center}pn-cta-block .cta-block{display:flex;justify-content:space-between;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{flex-direction:row;padding:2.4rem}}@media screen and (min-width: 1140px){pn-cta-block .cta-block{margin-right:auto;margin-left:auto;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{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:inline-flex;max-width:75%}pn-cta-block .cta-block--small.cta-block--center{max-width:66%}}pn-cta-block .cta-block--center{align-items:center;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}pn-cta-block .cta-block--center .cta-block__action>[slot=cta-button]{gap:0.8rem}@media screen and (min-width: 768px){pn-cta-block .cta-block--center .cta-block__action{flex-direction:row;gap:2.4rem;margin-top:1.6rem}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]{flex-direction:row;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:flex;flex:1;flex-direction:column;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:flex}pn-cta-block .cta-block__action>[slot=cta-buttons]{display:flex;flex-direction:column;row-gap:1.6rem;flex:1}@media screen and (min-width: 768px){pn-cta-block .cta-block__action>[slot=cta-buttons]{align-items:flex-end;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{transition: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{color:#0d234b;text-decoration:underline}pn-cta-block .cta-block__action>[slot=cta-buttons]>a:hover pn-icon svg{transition:transform 0.3s ease-in-out;transform:translateX(0.3rem)}pn-cta-block .cta-block__action>[slot=cta-buttons]>a:hover pn-icon svg path{fill:#0d234b}";
|
|
4
4
|
const PnCtaBlockStyle0 = pnCtaBlockCss;
|
|
5
5
|
|
|
6
6
|
const PnCtaBlock$1 = /*@__PURE__*/ proxyCustomElement(class PnCtaBlock extends HTMLElement {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"pn-cta-block.js","mappings":";;AAAA,MAAM,aAAa,GAAG,
|
|
1
|
+
{"file":"pn-cta-block.js","mappings":";;AAAA,MAAM,aAAa,GAAG,q6IAAq6I,CAAC;AAC57I,yBAAe,aAAa;;MCKfA,YAAU;;;;uBAGK,IAAI;wBACH,IAAI;iCAEK,IAAI;uBAEb,KAAK;0BACF,KAAK;uBACR,KAAK;0BACF,KAAK;;;IAEnC,MAAM;QACJ,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;QACzE,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;QAC1E,QACE,EAAC,IAAI,uDACH,mFAA0B,IAAI,CAAC,iBAAiB,EAAE,KAAK,EAAE,aAAa,IAAI,CAAC,OAAO,GAAG,kBAAkB,GAAG,EAAE,KAAK,IAAI,CAAC,UAAU,GAAG,mBAAmB,GAAG,EAAE,MAAM,IAAI,CAAC,OAAO,GAAG,kBAAkB,GAAG,EAAE,KAAK,IAAI,CAAC,UAAU,GAAG,wBAAwB,GAAG,EAAE,EAAE,KACzP,QAAQ;YACR,WAAK,KAAK,EAAC,0BAA0B,IACnC,YAAM,IAAI,EAAC,cAAc,GAAG,CACxB,GAAG,IAAI,GAEd,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ;YAC7B,WAAK,KAAK,EAAC,oBAAoB,IAC7B,UAAI,KAAK,EAAC,oBAAoB,IAAE,IAAI,CAAC,OAAO,CAAM,EAClD,SAAG,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,QAAQ,CAAK,CAC1C,GAAG,IAAI,GAEb,UAAU;YACV,WAAK,KAAK,EAAC,mBAAmB,IAC5B,YAAM,IAAI,EAAC,aAAa,GAAG,CACvB,GAAG,IAAI,EAEX,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PnCtaBlock"],"sources":["src/components/cta/pn-cta-block/pn-cta-block.scss?tag=pn-cta-block","src/components/cta/pn-cta-block/pn-cta-block.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-cta-block {\n display: flex;\n justify-content: center;\n\n .cta-block {\n display: flex;\n justify-content: space-between;\n flex-direction: column;\n border-radius: 2.4rem;\n padding: 3.2rem 2.4rem;\n width: 100%;\n\n @media screen and (min-width: 768px) {\n flex-direction: row;\n padding: 2.4rem;\n }\n\n @media screen and (min-width: 1140px) {\n margin-right: auto;\n margin-left: auto;\n max-width: 95%;\n }\n\n @media screen and (min-width: 1440px) {\n max-width: 90%;\n }\n\n &[pn-background-color='blue25'] {\n background-color: $blue25;\n }\n\n &[pn-background-color='coral50'] {\n background-color: $coral50;\n }\n\n &[pn-background-color='gray25'] {\n background-color: $gray25;\n }\n\n &[pn-background-color='green25'] {\n background-color: $green25;\n }\n\n &[pn-background-color='transparent'] {\n padding: 0 3.2rem;\n }\n }\n\n .cta-block--content-top {\n .cta-block__content {\n justify-content: flex-start;\n }\n }\n\n .cta-block--large {\n .cta-block__heading {\n @media screen and (min-width: 768px) {\n font-size: 3.6rem;\n }\n }\n\n .cta-block__text {\n @media screen and (min-width: 768px) {\n font-size: 2rem;\n }\n }\n }\n\n .cta-block--small {\n width: auto;\n\n @media screen and (min-width:992px) {\n display: inline-flex;\n max-width: 75%;\n\n &.cta-block--center {\n max-width: 66%;\n }\n }\n }\n\n .cta-block--center {\n align-items: center;\n flex-direction: column;\n gap: 1.6rem;\n text-align: center;\n\n @media screen and (min-width:768px) {\n gap: 2.4rem;\n padding: 3.2rem;\n }\n\n .cta-block__content {\n @media screen and (min-width: 768px) {\n max-width: 74rem;\n padding: 0;\n }\n }\n\n .cta-block__action {\n margin-top: 0.8rem;\n\n &>[slot='cta-button'] {\n gap: 0.8rem;\n }\n\n @media screen and (min-width: 768px) {\n flex-direction: row;\n gap: 2.4rem;\n margin-top: 1.6rem;\n\n &.cta-block__button {\n margin-bottom: 0;\n }\n\n &>[slot='cta-buttons'] {\n flex-direction: row;\n align-items: center;\n gap: 2.4rem;\n }\n }\n }\n\n .cta-block__image-wrapper {\n @media screen and (min-width: 768px) {\n display: block;\n }\n\n & > [slot='illustration'] {\n padding-right: 0;\n }\n }\n\n .cta-block__text {\n margin-bottom: 0 !important;\n }\n }\n\n .cta-block__image-wrapper {\n margin-bottom: 1.6rem;\n\n &>[slot='illustration'] {\n &>picture>img {\n border-radius: 0.8rem;\n max-width: 100%;\n }\n }\n\n @media screen and (min-width:768px) {\n display: none;\n max-width: 20%;\n }\n\n @media screen and (min-width: 992px) {\n display: block;\n margin-bottom: 0;\n\n & > [slot='illustration'] {\n padding-right: 3.2rem;\n }\n }\n }\n\n .cta-block__content {\n display: flex;\n flex: 1;\n flex-direction: column;\n justify-content: center;\n\n @media screen and (min-width: 768px) {\n padding-right: 2.4rem;\n }\n\n .cta-block__heading,\n .cta-block__text {\n @media screen and (min-width:768px) {\n max-width: 74rem;\n }\n }\n\n .cta-block__text {\n margin-bottom: 2.4rem;\n\n @media screen and (min-width: 768px) {\n margin-bottom: 0;\n }\n }\n }\n\n .cta-block__heading {\n margin-bottom: 0.8rem;\n }\n\n .cta-block__action {\n display: flex;\n\n &>[slot='cta-buttons'] {\n display: flex;\n flex-direction: column;\n row-gap: 1.6rem;\n flex: 1;\n\n @media screen and (min-width:768px) {\n align-items: flex-end;\n justify-content: center;\n gap: 1.6rem;\n margin-top: 0;\n }\n\n & > a {\n color: $blue700;\n font-weight: 500;\n font-size: 1.6rem;\n padding: 0.1rem;\n text-decoration: none;\n\n pn-icon svg {\n transition: transform 0.3s ease-in-out;\n\n path {\n fill: $blue700;\n }\n }\n\n &:hover {\n color: $blue900;\n text-decoration: underline;\n \n pn-icon svg {\n transition: transform 0.3s ease-in-out;\n transform: translateX(0.3rem);\n\n path {\n fill: $blue900;\n }\n }\n }\n }\n }\n }\n}\n","import { Component, Host, Prop, h, Element } from '@stencil/core';\n\n@Component({\n tag: 'pn-cta-block',\n styleUrl: 'pn-cta-block.scss',\n})\nexport class PnCtaBlock {\n @Element() hostElement: HTMLElement;\n\n @Prop() heading: string = null;\n @Prop() bodyText: string = null;\n\n @Prop() pnBackgroundColor: string = null;\n\n @Prop() isLarge: boolean = false;\n @Prop() isCentered: boolean = false;\n @Prop() isSmall: boolean = false;\n @Prop() contentTop: boolean = false;\n\n render() {\n const hasImage = this.hostElement.querySelector('[slot=\"illustration\"]');\n const hasButtons = this.hostElement.querySelector('[slot=\"cta-buttons\"]');\n return (\n <Host>\n <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' : ''}`}>\n {(hasImage ?\n <div class=\"cta-block__image-wrapper\">\n <slot name=\"illustration\" />\n </div> : null\n )}\n {(this.heading && this.bodyText)?\n <div class=\"cta-block__content\">\n <h2 class=\"cta-block__heading\">{this.heading}</h2>\n <p class=\"cta-block__text\">{this.bodyText}</p>\n </div> : null\n }\n {(hasButtons ?\n <div class=\"cta-block__action\">\n <slot name=\"cta-buttons\" />\n </div> : null\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -16,14 +16,14 @@ const PnTeaserCard$1 = /*@__PURE__*/ proxyCustomElement(class PnTeaserCard exten
|
|
|
16
16
|
this.hasIllustrationSlot = true;
|
|
17
17
|
}
|
|
18
18
|
get hostElement() { return this; }
|
|
19
|
-
labelToCapitals = this.label?.toUpperCase();
|
|
20
19
|
componentWillLoad() {
|
|
21
20
|
this.hasCtaSlotContent = !!this.hostElement.querySelector('[slot="cta"]');
|
|
22
21
|
this.hasIllustrationSlot = !!this.hostElement.querySelector('[slot="illustration"]');
|
|
23
22
|
}
|
|
24
23
|
//render
|
|
25
24
|
render() {
|
|
26
|
-
|
|
25
|
+
const labelToCapitals = this.label?.toUpperCase();
|
|
26
|
+
return (h(Host, { key: 'fdbbca9a340be605fab4928fd899e2ed7d6da987' }, h("slot", { key: '73c277568a6552fc2cdad9449c5805198f6c4c39', name: "clickable-block-wrapper" }), h("div", { key: '263a5919c76eb373958d3ef92aa90ed67656d25e', class: "pn-teaser-card__container" }, h("div", { key: '11cd5bc0d913acc378f960ec4d3baf0c7d3ecc99', class: `pn-teaser-card__container__image__container ${!this.hasIllustrationSlot ? 'pn-teaser-card__container__image__container--no-image' : ''}` }, h("slot", { key: '71893f8f45c0275c68c59768582a663737fd5eea', name: "illustration" })), h("div", { key: '99a874f3c2a22983edcab63a018050d47cbdc5d0', class: "pn-teaser-card__container__content" }, h("div", { key: '451ae56adec502481416822c169a01774fa262aa', class: "pn-teaser-card__container__content__text__container" }, labelToCapitals && h("span", { key: '2dfcef1bf94c1caea50c0f86263fea71713bf572', class: "pn-teaser-card__container__content__text__container__label" }, labelToCapitals), h("h2", { key: 'bd796379bb1bb106aea2de582df537a804f4c415', class: "pn-teaser-card__container__content__text__container__heading" }, this.heading), h("p", { key: 'ec25bea0041371fb67bb414cbc731d46234b118a', class: "pn-teaser-card__container__content__text__container__preamble" }, this.text)), this.hasCtaSlotContent && (h("div", { key: '6ebbe23c0584a63325e2faff4eb3979f804869aa', class: "pn-teaser-card__container__content__cta" }, h("slot", { key: '0a87639586c866e4e2439c67951362abe7a2f26d', name: "cta" })))))));
|
|
27
27
|
}
|
|
28
28
|
static get style() { return PnTeaserCardStyle0; }
|
|
29
29
|
}, [4, "pn-teaser-card", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"pn-teaser-card.js","mappings":";;AAAA,MAAM,eAAe,GAAG,g0RAAg0R,CAAC;AACz1R,2BAAe,eAAe;;MCKjBA,cAAY;;;;oBAGA,IAAI;uBACD,IAAI;qBACL,IAAI;6BACoB,OAAO;iCACH,MAAM;iCAIrB,KAAK;mCACH,IAAI;;;IAH5C,eAAe,GAAG,IAAI,CAAC,KAAK,EAAE,WAAW,EAAE,CAAC;IAK5C,iBAAiB;QACf,IAAI,CAAC,iBAAiB,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;QAC1E,IAAI,CAAC,mBAAmB,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;KACtF;;IAGD,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,6DAAM,IAAI,EAAC,yBAAyB,GAAG,EACvC,4DAAK,KAAK,EAAC,2BAA2B,IACpC,4DAAK,KAAK,EAAE,+CAA+C,CAAC,IAAI,CAAC,mBAAmB,GAAG,uDAAuD,GAAG,EAAE,EAAE,IACnJ,6DAAM,IAAI,EAAC,cAAc,GAAG,CACxB,EACN,4DAAK,KAAK,EAAC,oCAAoC,IAC7C,4DAAK,KAAK,EAAC,qDAAqD,IAC7D,IAAI,CAAC,eAAe,IAAI,6DAAM,KAAK,EAAC,4DAA4D,IAAE,IAAI,CAAC,eAAe,CAAQ,EAC/H,2DAAI,KAAK,EAAC,8DAA8D,IAAE,IAAI,CAAC,OAAO,CAAM,EAC5F,0DAAG,KAAK,EAAC,+DAA+D,IAAE,IAAI,CAAC,IAAI,CAAK,CACpF,EACL,IAAI,CAAC,iBAAiB,KACrB,4DAAK,KAAK,EAAC,yCAAyC,IAClD,6DAAM,IAAI,EAAC,KAAK,GAAG,CACf,CACP,CACG,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PnTeaserCard"],"sources":["src/components/cards/pn-teaser-card/pn-teaser-card.scss?tag=pn-teaser-card","src/components/cards/pn-teaser-card/pn-teaser-card.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\n$teaser-card-media-tablet: 768px; // 768px\n$teaser-card-media-desktop: 1200px; //1200px\n$teaser-card-media-large-desktop: 1640px; //1640\n\n//making pn wrapping link clickable over card image\n.block.teasercardblock {\n a[data-block-clickable-link='true'] {\n z-index: 1;\n }\n}\n\n//mobile first\npn-teaser-card {\n width: 100%;\n height: 100%;\n display: flex;\n\n .pn-teaser-card__container {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n border-radius: 2.4rem;\n width: 100%;\n }\n\n .pn-teaser-card__container__image__container {\n width: 100%;\n position: relative;\n\n & > [slot='illustration'] {\n clip-path: ellipse(100% 90% at 50% 0%);\n height: 100%;\n overflow: hidden;\n border-top-left-radius: 2.4rem;\n border-top-right-radius: 2.4rem;\n\n & > picture > img {\n width: 100%;\n height: auto;\n transition: 0.4s ease-in-out;\n transform: scale(1);\n aspect-ratio: 16/9;\n object-fit: cover;\n object-position: 50% 0;\n }\n }\n }\n\n .pn-teaser-card__container__content {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n flex: 1 1 100%;\n gap: 3.2rem;\n padding: 2.4rem 2.4rem;\n padding-top: 0;\n }\n\n .pn-teaser-card__container__content__text__container__heading {\n font-weight: 700;\n font-size: 2.4rem;\n line-height: 2.64rem;\n margin-bottom: 0;\n }\n\n .pn-teaser-card__container__content__text__container__preamble {\n padding-top: 1.6rem;\n font-weight: 400;\n font-size: 1.6rem;\n line-height: 2.24rem;\n margin-bottom: 0;\n }\n\n .pn-teaser-card__container__content__text__container__label {\n display: block;\n margin-bottom: 1.6rem;\n font-weight: 400;\n font-size: 1.2rem;\n line-height: 140%;\n }\n\n .pn-teaser-card__container__content__cta {\n & > pn-button {\n align-self: flex-end;\n width: 100%;\n\n & a:hover {\n text-decoration: none;\n }\n\n & > button,\n & > a {\n & > .pn-button-bg {\n transition: 0.4s ease-in-out;\n }\n }\n\n @media screen and (min-width: $teaser-card-media-tablet) {\n width: fit-content;\n }\n }\n\n .secondary-link--animated {\n font-weight: 500;\n font-size: 1.6rem;\n text-decoration: none;\n color: $blue700;\n\n pn-icon svg {\n transition: 0.3s ease-in-out;\n position: relative;\n left: -0.3rem;\n\n path {\n fill: $blue700;\n }\n }\n\n &[target='_blank']:not(.pn-button):after {\n display: none;\n }\n }\n }\n}\n\n//colors\npn-teaser-card[data-card-color='coral'] {\n & > .pn-teaser-card__container {\n background-color: $coral50;\n }\n}\n\npn-teaser-card[data-card-color='green'] {\n & > .pn-teaser-card__container {\n background-color: $green50;\n }\n}\n\npn-teaser-card[data-card-color='blue'] {\n & > .pn-teaser-card__container {\n background-color: $blue25;\n }\n}\n\npn-teaser-card[data-card-color='blue50'] {\n & > .pn-teaser-card__container {\n background-color: $blue50;\n }\n}\n\npn-teaser-card[data-card-color='blue400'] {\n & > .pn-teaser-card__container {\n background-color: $blue400;\n\n .pn-teaser-card__container__content__text__container__label,\n .pn-teaser-card__container__content__text__container__heading,\n .pn-teaser-card__container__content__text__container__preamble,\n .pn-teaser-card__container__content__cta .secondary-link--animated {\n color: $white;\n }\n\n .secondary-link--animated {\n & > pn-icon > svg > path {\n fill: $white;\n }\n }\n }\n}\n\npn-teaser-card[data-card-color='blue900'] {\n & > .pn-teaser-card__container {\n background-color: $blue900;\n .pn-teaser-card__container__content__text__container__heading {\n color: $coral400;\n }\n\n .pn-teaser-card__container__content__text__container__label,\n .pn-teaser-card__container__content__text__container__preamble,\n .pn-teaser-card__container__content__cta .secondary-link--animated {\n color: $white;\n }\n\n .secondary-link--animated {\n & > pn-icon > svg > path {\n fill: $white;\n }\n }\n }\n}\n\npn-teaser-card[data-card-color='white'] {\n & > .pn-teaser-card__container {\n background-color: $white;\n }\n}\n\n//color override when in a listblock\n.teasercardlistblock {\n .teasercardblock.has-bg {\n background-color: transparent;\n background: transparent;\n }\n}\n\n// variants\n\n.onequarterwidth {\n .pn-teaser-card__container__content__text__container__label {\n @media screen and (min-width: $teaser-card-media-desktop) {\n margin-bottom: 0.8rem;\n }\n }\n}\n\n.onethirdwidth,\n.onequarterwidth {\n & > pn-teaser-card {\n .pn-teaser-card__container__image__container--no-image {\n padding-top: 2.4rem;\n }\n }\n\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 400;\n }\n }\n}\n\n.halfwidth {\n & > pn-teaser-card {\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 400;\n }\n }\n\n .pn-teaser-card__container__image__container--no-image {\n padding-top: 2.4rem;\n }\n\n @media screen and (min-width: 992px) {\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 500;\n }\n }\n }\n\n @media screen and (min-width: $teaser-card-media-desktop) {\n .pn-teaser-card__container__image__container--no-image {\n padding-top: 4rem;\n }\n\n .pn-teaser-card__container__content {\n padding: 0 4rem 4rem;\n }\n\n .pn-teaser-card__container__content__text__container__heading {\n font-weight: 700;\n font-size: 3.2rem;\n line-height: 3.52rem;\n }\n\n .pn-teaser-card__container__content__text__container__preamble {\n font-weight: 400;\n font-size: 2rem;\n line-height: 2.8rem;\n }\n }\n\n @media screen and (min-width: $teaser-card-media-large-desktop) {\n .pn-teaser-card__container__image__container--no-image {\n padding-top: 5.6rem;\n }\n\n .pn-teaser-card__container__content {\n padding: 0 5.6rem 5.6rem;\n }\n }\n }\n}\n\n.fullwidth {\n & > pn-teaser-card {\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 400;\n }\n }\n\n .pn-teaser-card__container__image__container--no-image {\n width: auto;\n padding-top: 2.4rem;\n }\n\n @media screen and (min-width: $teaser-card-media-tablet) {\n min-height: 35rem;\n\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 500;\n }\n }\n\n .pn-teaser-card__container {\n flex-direction: row;\n }\n\n .pn-teaser-card__container__content {\n align-self: center;\n gap: 2.4rem;\n padding: 3.2rem 3.2rem 3.2rem 2.4rem;\n }\n\n .pn-teaser-card__container__image__container {\n & > [slot='illustration'] {\n border-top-left-radius: 2.4rem;\n border-bottom-left-radius: 2.4rem;\n clip-path: ellipse(100% 100% at 0% 50%);\n\n & > picture > img {\n height: 100%;\n object-fit: cover;\n }\n }\n }\n }\n\n @media screen and (min-width: $teaser-card-media-desktop) {\n min-height: 52rem;\n\n .pn-teaser-card__container__content {\n padding: 4rem 4rem 4rem 3.2rem;\n }\n\n .pn-teaser-card__container__content__text__container__heading {\n font-weight: 700;\n font-size: 4.8rem;\n line-height: 5.28rem;\n }\n\n .pn-teaser-card__container__content__text__container__preamble {\n font-size: 2rem;\n line-height: 2.8rem;\n }\n }\n }\n\n pn-teaser-card[data-card-alignment='right'] {\n @media screen and (min-width: $teaser-card-media-tablet) {\n .pn-teaser-card__container {\n flex-direction: row-reverse;\n }\n\n .pn-teaser-card__container__content {\n padding: 3.2rem 2.4rem 3.2rem 3.2rem;\n }\n\n .pn-teaser-card__container__image__container {\n & > [slot='illustration'] {\n border-bottom-right-radius: 2.4rem;\n clip-path: ellipse(100% 100% at 100% 50%);\n }\n }\n }\n\n @media screen and (min-width: $teaser-card-media-desktop) {\n .pn-teaser-card__container__content {\n padding: 4rem 3.2rem 4rem 4rem;\n }\n }\n }\n}\n\n//effect class\npn-teaser-card.teaser-card--hover-effect {\n &:hover {\n cursor: pointer;\n .pn-teaser-card__container__image__container {\n & [slot='illustration'] {\n & picture > img {\n transform: scale(1.02);\n filter: brightness(0.85);\n }\n }\n }\n\n .secondary-link--animated {\n text-decoration: underline;\n\n pn-icon svg {\n left: 0;\n }\n }\n\n pn-button {\n button,\n a {\n .pn-button-bg {\n background-color: $blue900;\n }\n }\n }\n\n &[data-card-color='blue900'] {\n pn-button {\n button,\n a {\n .pn-button-bg {\n background-color: $blue400;\n }\n }\n }\n }\n }\n}\n","import { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\n@Component({\n tag: 'pn-teaser-card',\n styleUrl: 'pn-teaser-card.scss',\n})\nexport class PnTeaserCard {\n @Element() hostElement: HTMLElement;\n //props\n @Prop() text: string = null;\n @Prop() heading: string = null;\n @Prop() label?: string = null;\n @Prop({ reflect: true }) dataCardColor: string = 'coral';\n @Prop({ reflect: true }) dataCardAlignment: string = 'left';\n\n labelToCapitals = this.label?.toUpperCase();\n\n @State() hasCtaSlotContent: boolean = false;\n @State() hasIllustrationSlot: boolean = true;\n\n componentWillLoad() {\n this.hasCtaSlotContent = !!this.hostElement.querySelector('[slot=\"cta\"]');\n this.hasIllustrationSlot = !!this.hostElement.querySelector('[slot=\"illustration\"]');\n }\n\n //render\n render() {\n return (\n <Host>\n <slot name=\"clickable-block-wrapper\" />\n <div class=\"pn-teaser-card__container\">\n <div class={`pn-teaser-card__container__image__container ${!this.hasIllustrationSlot ? 'pn-teaser-card__container__image__container--no-image' : ''}`}>\n <slot name=\"illustration\" />\n </div>\n <div class=\"pn-teaser-card__container__content\">\n <div class=\"pn-teaser-card__container__content__text__container\">\n {this.labelToCapitals && <span class=\"pn-teaser-card__container__content__text__container__label\">{this.labelToCapitals}</span>}\n <h2 class=\"pn-teaser-card__container__content__text__container__heading\">{this.heading}</h2>\n <p class=\"pn-teaser-card__container__content__text__container__preamble\">{this.text}</p>\n </div>\n {this.hasCtaSlotContent && (\n <div class=\"pn-teaser-card__container__content__cta\">\n <slot name=\"cta\" />\n </div>\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"pn-teaser-card.js","mappings":";;AAAA,MAAM,eAAe,GAAG,g0RAAg0R,CAAC;AACz1R,2BAAe,eAAe;;MCKjBA,cAAY;;;;oBAGA,IAAI;uBACD,IAAI;qBACL,IAAI;6BACoB,OAAO;iCACH,MAAM;iCAErB,KAAK;mCACH,IAAI;;;IAE5C,iBAAiB;QACf,IAAI,CAAC,iBAAiB,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;QAC1E,IAAI,CAAC,mBAAmB,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;KACtF;;IAGD,MAAM;QACJ,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,EAAE,WAAW,EAAE,CAAC;QAElD,QACE,EAAC,IAAI,uDACH,6DAAM,IAAI,EAAC,yBAAyB,GAAG,EACvC,4DAAK,KAAK,EAAC,2BAA2B,IACpC,4DAAK,KAAK,EAAE,+CAA+C,CAAC,IAAI,CAAC,mBAAmB,GAAG,uDAAuD,GAAG,EAAE,EAAE,IACnJ,6DAAM,IAAI,EAAC,cAAc,GAAG,CACxB,EACN,4DAAK,KAAK,EAAC,oCAAoC,IAC7C,4DAAK,KAAK,EAAC,qDAAqD,IAC7D,eAAe,IAAI,6DAAM,KAAK,EAAC,4DAA4D,IAAE,eAAe,CAAQ,EACrH,2DAAI,KAAK,EAAC,8DAA8D,IAAE,IAAI,CAAC,OAAO,CAAM,EAC5F,0DAAG,KAAK,EAAC,+DAA+D,IAAE,IAAI,CAAC,IAAI,CAAK,CACpF,EACL,IAAI,CAAC,iBAAiB,KACrB,4DAAK,KAAK,EAAC,yCAAyC,IAClD,6DAAM,IAAI,EAAC,KAAK,GAAG,CACf,CACP,CACG,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PnTeaserCard"],"sources":["src/components/cards/pn-teaser-card/pn-teaser-card.scss?tag=pn-teaser-card","src/components/cards/pn-teaser-card/pn-teaser-card.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\n$teaser-card-media-tablet: 768px; // 768px\n$teaser-card-media-desktop: 1200px; //1200px\n$teaser-card-media-large-desktop: 1640px; //1640\n\n//making pn wrapping link clickable over card image\n.block.teasercardblock {\n a[data-block-clickable-link='true'] {\n z-index: 1;\n }\n}\n\n//mobile first\npn-teaser-card {\n width: 100%;\n height: 100%;\n display: flex;\n\n .pn-teaser-card__container {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n border-radius: 2.4rem;\n width: 100%;\n }\n\n .pn-teaser-card__container__image__container {\n width: 100%;\n position: relative;\n\n & > [slot='illustration'] {\n clip-path: ellipse(100% 90% at 50% 0%);\n height: 100%;\n overflow: hidden;\n border-top-left-radius: 2.4rem;\n border-top-right-radius: 2.4rem;\n\n & > picture > img {\n width: 100%;\n height: auto;\n transition: 0.4s ease-in-out;\n transform: scale(1);\n aspect-ratio: 16/9;\n object-fit: cover;\n object-position: 50% 0;\n }\n }\n }\n\n .pn-teaser-card__container__content {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n flex: 1 1 100%;\n gap: 3.2rem;\n padding: 2.4rem 2.4rem;\n padding-top: 0;\n }\n\n .pn-teaser-card__container__content__text__container__heading {\n font-weight: 700;\n font-size: 2.4rem;\n line-height: 2.64rem;\n margin-bottom: 0;\n }\n\n .pn-teaser-card__container__content__text__container__preamble {\n padding-top: 1.6rem;\n font-weight: 400;\n font-size: 1.6rem;\n line-height: 2.24rem;\n margin-bottom: 0;\n }\n\n .pn-teaser-card__container__content__text__container__label {\n display: block;\n margin-bottom: 1.6rem;\n font-weight: 400;\n font-size: 1.2rem;\n line-height: 140%;\n }\n\n .pn-teaser-card__container__content__cta {\n & > pn-button {\n align-self: flex-end;\n width: 100%;\n\n & a:hover {\n text-decoration: none;\n }\n\n & > button,\n & > a {\n & > .pn-button-bg {\n transition: 0.4s ease-in-out;\n }\n }\n\n @media screen and (min-width: $teaser-card-media-tablet) {\n width: fit-content;\n }\n }\n\n .secondary-link--animated {\n font-weight: 500;\n font-size: 1.6rem;\n text-decoration: none;\n color: $blue700;\n\n pn-icon svg {\n transition: 0.3s ease-in-out;\n position: relative;\n left: -0.3rem;\n\n path {\n fill: $blue700;\n }\n }\n\n &[target='_blank']:not(.pn-button):after {\n display: none;\n }\n }\n }\n}\n\n//colors\npn-teaser-card[data-card-color='coral'] {\n & > .pn-teaser-card__container {\n background-color: $coral50;\n }\n}\n\npn-teaser-card[data-card-color='green'] {\n & > .pn-teaser-card__container {\n background-color: $green50;\n }\n}\n\npn-teaser-card[data-card-color='blue'] {\n & > .pn-teaser-card__container {\n background-color: $blue25;\n }\n}\n\npn-teaser-card[data-card-color='blue50'] {\n & > .pn-teaser-card__container {\n background-color: $blue50;\n }\n}\n\npn-teaser-card[data-card-color='blue400'] {\n & > .pn-teaser-card__container {\n background-color: $blue400;\n\n .pn-teaser-card__container__content__text__container__label,\n .pn-teaser-card__container__content__text__container__heading,\n .pn-teaser-card__container__content__text__container__preamble,\n .pn-teaser-card__container__content__cta .secondary-link--animated {\n color: $white;\n }\n\n .secondary-link--animated {\n & > pn-icon > svg > path {\n fill: $white;\n }\n }\n }\n}\n\npn-teaser-card[data-card-color='blue900'] {\n & > .pn-teaser-card__container {\n background-color: $blue900;\n .pn-teaser-card__container__content__text__container__heading {\n color: $coral400;\n }\n\n .pn-teaser-card__container__content__text__container__label,\n .pn-teaser-card__container__content__text__container__preamble,\n .pn-teaser-card__container__content__cta .secondary-link--animated {\n color: $white;\n }\n\n .secondary-link--animated {\n & > pn-icon > svg > path {\n fill: $white;\n }\n }\n }\n}\n\npn-teaser-card[data-card-color='white'] {\n & > .pn-teaser-card__container {\n background-color: $white;\n }\n}\n\n//color override when in a listblock\n.teasercardlistblock {\n .teasercardblock.has-bg {\n background-color: transparent;\n background: transparent;\n }\n}\n\n// variants\n\n.onequarterwidth {\n .pn-teaser-card__container__content__text__container__label {\n @media screen and (min-width: $teaser-card-media-desktop) {\n margin-bottom: 0.8rem;\n }\n }\n}\n\n.onethirdwidth,\n.onequarterwidth {\n & > pn-teaser-card {\n .pn-teaser-card__container__image__container--no-image {\n padding-top: 2.4rem;\n }\n }\n\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 400;\n }\n }\n}\n\n.halfwidth {\n & > pn-teaser-card {\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 400;\n }\n }\n\n .pn-teaser-card__container__image__container--no-image {\n padding-top: 2.4rem;\n }\n\n @media screen and (min-width: 992px) {\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 500;\n }\n }\n }\n\n @media screen and (min-width: $teaser-card-media-desktop) {\n .pn-teaser-card__container__image__container--no-image {\n padding-top: 4rem;\n }\n\n .pn-teaser-card__container__content {\n padding: 0 4rem 4rem;\n }\n\n .pn-teaser-card__container__content__text__container__heading {\n font-weight: 700;\n font-size: 3.2rem;\n line-height: 3.52rem;\n }\n\n .pn-teaser-card__container__content__text__container__preamble {\n font-weight: 400;\n font-size: 2rem;\n line-height: 2.8rem;\n }\n }\n\n @media screen and (min-width: $teaser-card-media-large-desktop) {\n .pn-teaser-card__container__image__container--no-image {\n padding-top: 5.6rem;\n }\n\n .pn-teaser-card__container__content {\n padding: 0 5.6rem 5.6rem;\n }\n }\n }\n}\n\n.fullwidth {\n & > pn-teaser-card {\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 400;\n }\n }\n\n .pn-teaser-card__container__image__container--no-image {\n width: auto;\n padding-top: 2.4rem;\n }\n\n @media screen and (min-width: $teaser-card-media-tablet) {\n min-height: 35rem;\n\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 500;\n }\n }\n\n .pn-teaser-card__container {\n flex-direction: row;\n }\n\n .pn-teaser-card__container__content {\n align-self: center;\n gap: 2.4rem;\n padding: 3.2rem 3.2rem 3.2rem 2.4rem;\n }\n\n .pn-teaser-card__container__image__container {\n & > [slot='illustration'] {\n border-top-left-radius: 2.4rem;\n border-bottom-left-radius: 2.4rem;\n clip-path: ellipse(100% 100% at 0% 50%);\n\n & > picture > img {\n height: 100%;\n object-fit: cover;\n }\n }\n }\n }\n\n @media screen and (min-width: $teaser-card-media-desktop) {\n min-height: 52rem;\n\n .pn-teaser-card__container__content {\n padding: 4rem 4rem 4rem 3.2rem;\n }\n\n .pn-teaser-card__container__content__text__container__heading {\n font-weight: 700;\n font-size: 4.8rem;\n line-height: 5.28rem;\n }\n\n .pn-teaser-card__container__content__text__container__preamble {\n font-size: 2rem;\n line-height: 2.8rem;\n }\n }\n }\n\n pn-teaser-card[data-card-alignment='right'] {\n @media screen and (min-width: $teaser-card-media-tablet) {\n .pn-teaser-card__container {\n flex-direction: row-reverse;\n }\n\n .pn-teaser-card__container__content {\n padding: 3.2rem 2.4rem 3.2rem 3.2rem;\n }\n\n .pn-teaser-card__container__image__container {\n & > [slot='illustration'] {\n border-bottom-right-radius: 2.4rem;\n clip-path: ellipse(100% 100% at 100% 50%);\n }\n }\n }\n\n @media screen and (min-width: $teaser-card-media-desktop) {\n .pn-teaser-card__container__content {\n padding: 4rem 3.2rem 4rem 4rem;\n }\n }\n }\n}\n\n//effect class\npn-teaser-card.teaser-card--hover-effect {\n &:hover {\n cursor: pointer;\n .pn-teaser-card__container__image__container {\n & [slot='illustration'] {\n & picture > img {\n transform: scale(1.02);\n filter: brightness(0.85);\n }\n }\n }\n\n .secondary-link--animated {\n text-decoration: underline;\n\n pn-icon svg {\n left: 0;\n }\n }\n\n pn-button {\n button,\n a {\n .pn-button-bg {\n background-color: $blue900;\n }\n }\n }\n\n &[data-card-color='blue900'] {\n pn-button {\n button,\n a {\n .pn-button-bg {\n background-color: $blue400;\n }\n }\n }\n }\n }\n}\n","import { Component, Prop, h, Element, State, Host } from \"@stencil/core\";\n\n@Component({\n tag: 'pn-teaser-card',\n styleUrl: 'pn-teaser-card.scss'\n})\nexport class PnTeaserCard {\n @Element() hostElement: HTMLElement;\n //props\n @Prop() text: string = null;\n @Prop() heading: string = null;\n @Prop() label?: string = null;\n @Prop({ reflect: true }) dataCardColor: string = 'coral';\n @Prop({ reflect: true }) dataCardAlignment: string = 'left';\n\n @State() hasCtaSlotContent: boolean = false;\n @State() hasIllustrationSlot: boolean = true;\n\n componentWillLoad() {\n this.hasCtaSlotContent = !!this.hostElement.querySelector('[slot=\"cta\"]');\n this.hasIllustrationSlot = !!this.hostElement.querySelector('[slot=\"illustration\"]');\n }\n\n //render\n render() {\n const labelToCapitals = this.label?.toUpperCase();\n\n return (\n <Host>\n <slot name=\"clickable-block-wrapper\" />\n <div class=\"pn-teaser-card__container\">\n <div class={`pn-teaser-card__container__image__container ${!this.hasIllustrationSlot ? 'pn-teaser-card__container__image__container--no-image' : ''}`}>\n <slot name=\"illustration\" />\n </div>\n <div class=\"pn-teaser-card__container__content\">\n <div class=\"pn-teaser-card__container__content__text__container\">\n {labelToCapitals && <span class=\"pn-teaser-card__container__content__text__container__label\">{labelToCapitals}</span>}\n <h2 class=\"pn-teaser-card__container__content__text__container__heading\">{this.heading}</h2>\n <p class=\"pn-teaser-card__container__content__text__container__preamble\">{this.text}</p>\n </div>\n {this.hasCtaSlotContent && (\n <div class=\"pn-teaser-card__container__content__cta\">\n <slot name=\"cta\" />\n </div>\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, g as getElement, h, d as Host } from './index-fa51bde4.js';
|
|
2
2
|
|
|
3
|
-
const pnCtaBlockCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-cta-block{display:flex;justify-content:center}pn-cta-block .cta-block{display:flex;justify-content:space-between;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{flex-direction:row;padding:2.4rem}}@media screen and (min-width: 1140px){pn-cta-block .cta-block{margin-right:auto;margin-left:auto;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{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:inline-flex;max-width:75%}pn-cta-block .cta-block--small.cta-block--center{max-width:66%}}pn-cta-block .cta-block--center{align-items:center;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}pn-cta-block .cta-block--center .cta-block__action>[slot=cta-button]{gap:0.8rem}@media screen and (min-width: 768px){pn-cta-block .cta-block--center .cta-block__action{flex-direction:row;gap:2.4rem;margin-top:1.6rem}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]{flex-direction:row;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:flex;flex:1;flex-direction:column;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:flex}pn-cta-block .cta-block__action>[slot=cta-buttons]{display:flex;flex-direction:column;row-gap:1.6rem;flex:1}@media screen and (min-width: 768px){pn-cta-block .cta-block__action>[slot=cta-buttons]{align-items:flex-end;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{transition: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{transition:transform 0.3s ease-in-out;transform:translateX(0.3rem)}pn-cta-block .cta-block__action>[slot=cta-buttons]>a:hover pn-icon svg path{fill:#
|
|
3
|
+
const pnCtaBlockCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-cta-block{display:flex;justify-content:center}pn-cta-block .cta-block{display:flex;justify-content:space-between;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{flex-direction:row;padding:2.4rem}}@media screen and (min-width: 1140px){pn-cta-block .cta-block{margin-right:auto;margin-left:auto;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{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:inline-flex;max-width:75%}pn-cta-block .cta-block--small.cta-block--center{max-width:66%}}pn-cta-block .cta-block--center{align-items:center;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}pn-cta-block .cta-block--center .cta-block__action>[slot=cta-button]{gap:0.8rem}@media screen and (min-width: 768px){pn-cta-block .cta-block--center .cta-block__action{flex-direction:row;gap:2.4rem;margin-top:1.6rem}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]{flex-direction:row;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:flex;flex:1;flex-direction:column;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:flex}pn-cta-block .cta-block__action>[slot=cta-buttons]{display:flex;flex-direction:column;row-gap:1.6rem;flex:1}@media screen and (min-width: 768px){pn-cta-block .cta-block__action>[slot=cta-buttons]{align-items:flex-end;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{transition: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{color:#0d234b;text-decoration:underline}pn-cta-block .cta-block__action>[slot=cta-buttons]>a:hover pn-icon svg{transition:transform 0.3s ease-in-out;transform:translateX(0.3rem)}pn-cta-block .cta-block__action>[slot=cta-buttons]>a:hover pn-icon svg path{fill:#0d234b}";
|
|
4
4
|
const PnCtaBlockStyle0 = pnCtaBlockCss;
|
|
5
5
|
|
|
6
6
|
const PnCtaBlock = class {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"pn-cta-block.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,
|
|
1
|
+
{"file":"pn-cta-block.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,q6IAAq6I,CAAC;AAC57I,yBAAe,aAAa;;MCKf,UAAU;;;uBAGK,IAAI;wBACH,IAAI;iCAEK,IAAI;uBAEb,KAAK;0BACF,KAAK;uBACR,KAAK;0BACF,KAAK;;;IAEnC,MAAM;QACJ,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;QACzE,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;QAC1E,QACE,EAAC,IAAI,uDACH,mFAA0B,IAAI,CAAC,iBAAiB,EAAE,KAAK,EAAE,aAAa,IAAI,CAAC,OAAO,GAAG,kBAAkB,GAAG,EAAE,KAAK,IAAI,CAAC,UAAU,GAAG,mBAAmB,GAAG,EAAE,MAAM,IAAI,CAAC,OAAO,GAAG,kBAAkB,GAAG,EAAE,KAAK,IAAI,CAAC,UAAU,GAAG,wBAAwB,GAAG,EAAE,EAAE,KACzP,QAAQ;YACR,WAAK,KAAK,EAAC,0BAA0B,IACnC,YAAM,IAAI,EAAC,cAAc,GAAG,CACxB,GAAG,IAAI,GAEd,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ;YAC7B,WAAK,KAAK,EAAC,oBAAoB,IAC7B,UAAI,KAAK,EAAC,oBAAoB,IAAE,IAAI,CAAC,OAAO,CAAM,EAClD,SAAG,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,QAAQ,CAAK,CAC1C,GAAG,IAAI,GAEb,UAAU;YACV,WAAK,KAAK,EAAC,mBAAmB,IAC5B,YAAM,IAAI,EAAC,aAAa,GAAG,CACvB,GAAG,IAAI,EAEX,CACD,EACP;KACH;;;;;;","names":[],"sources":["src/components/cta/pn-cta-block/pn-cta-block.scss?tag=pn-cta-block","src/components/cta/pn-cta-block/pn-cta-block.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-cta-block {\n display: flex;\n justify-content: center;\n\n .cta-block {\n display: flex;\n justify-content: space-between;\n flex-direction: column;\n border-radius: 2.4rem;\n padding: 3.2rem 2.4rem;\n width: 100%;\n\n @media screen and (min-width: 768px) {\n flex-direction: row;\n padding: 2.4rem;\n }\n\n @media screen and (min-width: 1140px) {\n margin-right: auto;\n margin-left: auto;\n max-width: 95%;\n }\n\n @media screen and (min-width: 1440px) {\n max-width: 90%;\n }\n\n &[pn-background-color='blue25'] {\n background-color: $blue25;\n }\n\n &[pn-background-color='coral50'] {\n background-color: $coral50;\n }\n\n &[pn-background-color='gray25'] {\n background-color: $gray25;\n }\n\n &[pn-background-color='green25'] {\n background-color: $green25;\n }\n\n &[pn-background-color='transparent'] {\n padding: 0 3.2rem;\n }\n }\n\n .cta-block--content-top {\n .cta-block__content {\n justify-content: flex-start;\n }\n }\n\n .cta-block--large {\n .cta-block__heading {\n @media screen and (min-width: 768px) {\n font-size: 3.6rem;\n }\n }\n\n .cta-block__text {\n @media screen and (min-width: 768px) {\n font-size: 2rem;\n }\n }\n }\n\n .cta-block--small {\n width: auto;\n\n @media screen and (min-width:992px) {\n display: inline-flex;\n max-width: 75%;\n\n &.cta-block--center {\n max-width: 66%;\n }\n }\n }\n\n .cta-block--center {\n align-items: center;\n flex-direction: column;\n gap: 1.6rem;\n text-align: center;\n\n @media screen and (min-width:768px) {\n gap: 2.4rem;\n padding: 3.2rem;\n }\n\n .cta-block__content {\n @media screen and (min-width: 768px) {\n max-width: 74rem;\n padding: 0;\n }\n }\n\n .cta-block__action {\n margin-top: 0.8rem;\n\n &>[slot='cta-button'] {\n gap: 0.8rem;\n }\n\n @media screen and (min-width: 768px) {\n flex-direction: row;\n gap: 2.4rem;\n margin-top: 1.6rem;\n\n &.cta-block__button {\n margin-bottom: 0;\n }\n\n &>[slot='cta-buttons'] {\n flex-direction: row;\n align-items: center;\n gap: 2.4rem;\n }\n }\n }\n\n .cta-block__image-wrapper {\n @media screen and (min-width: 768px) {\n display: block;\n }\n\n & > [slot='illustration'] {\n padding-right: 0;\n }\n }\n\n .cta-block__text {\n margin-bottom: 0 !important;\n }\n }\n\n .cta-block__image-wrapper {\n margin-bottom: 1.6rem;\n\n &>[slot='illustration'] {\n &>picture>img {\n border-radius: 0.8rem;\n max-width: 100%;\n }\n }\n\n @media screen and (min-width:768px) {\n display: none;\n max-width: 20%;\n }\n\n @media screen and (min-width: 992px) {\n display: block;\n margin-bottom: 0;\n\n & > [slot='illustration'] {\n padding-right: 3.2rem;\n }\n }\n }\n\n .cta-block__content {\n display: flex;\n flex: 1;\n flex-direction: column;\n justify-content: center;\n\n @media screen and (min-width: 768px) {\n padding-right: 2.4rem;\n }\n\n .cta-block__heading,\n .cta-block__text {\n @media screen and (min-width:768px) {\n max-width: 74rem;\n }\n }\n\n .cta-block__text {\n margin-bottom: 2.4rem;\n\n @media screen and (min-width: 768px) {\n margin-bottom: 0;\n }\n }\n }\n\n .cta-block__heading {\n margin-bottom: 0.8rem;\n }\n\n .cta-block__action {\n display: flex;\n\n &>[slot='cta-buttons'] {\n display: flex;\n flex-direction: column;\n row-gap: 1.6rem;\n flex: 1;\n\n @media screen and (min-width:768px) {\n align-items: flex-end;\n justify-content: center;\n gap: 1.6rem;\n margin-top: 0;\n }\n\n & > a {\n color: $blue700;\n font-weight: 500;\n font-size: 1.6rem;\n padding: 0.1rem;\n text-decoration: none;\n\n pn-icon svg {\n transition: transform 0.3s ease-in-out;\n\n path {\n fill: $blue700;\n }\n }\n\n &:hover {\n color: $blue900;\n text-decoration: underline;\n \n pn-icon svg {\n transition: transform 0.3s ease-in-out;\n transform: translateX(0.3rem);\n\n path {\n fill: $blue900;\n }\n }\n }\n }\n }\n }\n}\n","import { Component, Host, Prop, h, Element } from '@stencil/core';\n\n@Component({\n tag: 'pn-cta-block',\n styleUrl: 'pn-cta-block.scss',\n})\nexport class PnCtaBlock {\n @Element() hostElement: HTMLElement;\n\n @Prop() heading: string = null;\n @Prop() bodyText: string = null;\n\n @Prop() pnBackgroundColor: string = null;\n\n @Prop() isLarge: boolean = false;\n @Prop() isCentered: boolean = false;\n @Prop() isSmall: boolean = false;\n @Prop() contentTop: boolean = false;\n\n render() {\n const hasImage = this.hostElement.querySelector('[slot=\"illustration\"]');\n const hasButtons = this.hostElement.querySelector('[slot=\"cta-buttons\"]');\n return (\n <Host>\n <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' : ''}`}>\n {(hasImage ?\n <div class=\"cta-block__image-wrapper\">\n <slot name=\"illustration\" />\n </div> : null\n )}\n {(this.heading && this.bodyText)?\n <div class=\"cta-block__content\">\n <h2 class=\"cta-block__heading\">{this.heading}</h2>\n <p class=\"cta-block__text\">{this.bodyText}</p>\n </div> : null\n }\n {(hasButtons ?\n <div class=\"cta-block__action\">\n <slot name=\"cta-buttons\" />\n </div> : null\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -15,14 +15,14 @@ const PnTeaserCard = class {
|
|
|
15
15
|
this.hasIllustrationSlot = true;
|
|
16
16
|
}
|
|
17
17
|
get hostElement() { return getElement(this); }
|
|
18
|
-
labelToCapitals = this.label?.toUpperCase();
|
|
19
18
|
componentWillLoad() {
|
|
20
19
|
this.hasCtaSlotContent = !!this.hostElement.querySelector('[slot="cta"]');
|
|
21
20
|
this.hasIllustrationSlot = !!this.hostElement.querySelector('[slot="illustration"]');
|
|
22
21
|
}
|
|
23
22
|
//render
|
|
24
23
|
render() {
|
|
25
|
-
|
|
24
|
+
const labelToCapitals = this.label?.toUpperCase();
|
|
25
|
+
return (h(Host, { key: 'fdbbca9a340be605fab4928fd899e2ed7d6da987' }, h("slot", { key: '73c277568a6552fc2cdad9449c5805198f6c4c39', name: "clickable-block-wrapper" }), h("div", { key: '263a5919c76eb373958d3ef92aa90ed67656d25e', class: "pn-teaser-card__container" }, h("div", { key: '11cd5bc0d913acc378f960ec4d3baf0c7d3ecc99', class: `pn-teaser-card__container__image__container ${!this.hasIllustrationSlot ? 'pn-teaser-card__container__image__container--no-image' : ''}` }, h("slot", { key: '71893f8f45c0275c68c59768582a663737fd5eea', name: "illustration" })), h("div", { key: '99a874f3c2a22983edcab63a018050d47cbdc5d0', class: "pn-teaser-card__container__content" }, h("div", { key: '451ae56adec502481416822c169a01774fa262aa', class: "pn-teaser-card__container__content__text__container" }, labelToCapitals && h("span", { key: '2dfcef1bf94c1caea50c0f86263fea71713bf572', class: "pn-teaser-card__container__content__text__container__label" }, labelToCapitals), h("h2", { key: 'bd796379bb1bb106aea2de582df537a804f4c415', class: "pn-teaser-card__container__content__text__container__heading" }, this.heading), h("p", { key: 'ec25bea0041371fb67bb414cbc731d46234b118a', class: "pn-teaser-card__container__content__text__container__preamble" }, this.text)), this.hasCtaSlotContent && (h("div", { key: '6ebbe23c0584a63325e2faff4eb3979f804869aa', class: "pn-teaser-card__container__content__cta" }, h("slot", { key: '0a87639586c866e4e2439c67951362abe7a2f26d', name: "cta" })))))));
|
|
26
26
|
}
|
|
27
27
|
};
|
|
28
28
|
PnTeaserCard.style = PnTeaserCardStyle0;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"pn-teaser-card.entry.js","mappings":";;AAAA,MAAM,eAAe,GAAG,g0RAAg0R,CAAC;AACz1R,2BAAe,eAAe;;MCKjB,YAAY;;;oBAGA,IAAI;uBACD,IAAI;qBACL,IAAI;6BACoB,OAAO;iCACH,MAAM;iCAIrB,KAAK;mCACH,IAAI;;;IAH5C,eAAe,GAAG,IAAI,CAAC,KAAK,EAAE,WAAW,EAAE,CAAC;IAK5C,iBAAiB;QACf,IAAI,CAAC,iBAAiB,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;QAC1E,IAAI,CAAC,mBAAmB,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;KACtF;;IAGD,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,6DAAM,IAAI,EAAC,yBAAyB,GAAG,EACvC,4DAAK,KAAK,EAAC,2BAA2B,IACpC,4DAAK,KAAK,EAAE,+CAA+C,CAAC,IAAI,CAAC,mBAAmB,GAAG,uDAAuD,GAAG,EAAE,EAAE,IACnJ,6DAAM,IAAI,EAAC,cAAc,GAAG,CACxB,EACN,4DAAK,KAAK,EAAC,oCAAoC,IAC7C,4DAAK,KAAK,EAAC,qDAAqD,IAC7D,IAAI,CAAC,eAAe,IAAI,6DAAM,KAAK,EAAC,4DAA4D,IAAE,IAAI,CAAC,eAAe,CAAQ,EAC/H,2DAAI,KAAK,EAAC,8DAA8D,IAAE,IAAI,CAAC,OAAO,CAAM,EAC5F,0DAAG,KAAK,EAAC,+DAA+D,IAAE,IAAI,CAAC,IAAI,CAAK,CACpF,EACL,IAAI,CAAC,iBAAiB,KACrB,4DAAK,KAAK,EAAC,yCAAyC,IAClD,6DAAM,IAAI,EAAC,KAAK,GAAG,CACf,CACP,CACG,CACF,CACD,EACP;KACH;;;;;;","names":[],"sources":["src/components/cards/pn-teaser-card/pn-teaser-card.scss?tag=pn-teaser-card","src/components/cards/pn-teaser-card/pn-teaser-card.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\n$teaser-card-media-tablet: 768px; // 768px\n$teaser-card-media-desktop: 1200px; //1200px\n$teaser-card-media-large-desktop: 1640px; //1640\n\n//making pn wrapping link clickable over card image\n.block.teasercardblock {\n a[data-block-clickable-link='true'] {\n z-index: 1;\n }\n}\n\n//mobile first\npn-teaser-card {\n width: 100%;\n height: 100%;\n display: flex;\n\n .pn-teaser-card__container {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n border-radius: 2.4rem;\n width: 100%;\n }\n\n .pn-teaser-card__container__image__container {\n width: 100%;\n position: relative;\n\n & > [slot='illustration'] {\n clip-path: ellipse(100% 90% at 50% 0%);\n height: 100%;\n overflow: hidden;\n border-top-left-radius: 2.4rem;\n border-top-right-radius: 2.4rem;\n\n & > picture > img {\n width: 100%;\n height: auto;\n transition: 0.4s ease-in-out;\n transform: scale(1);\n aspect-ratio: 16/9;\n object-fit: cover;\n object-position: 50% 0;\n }\n }\n }\n\n .pn-teaser-card__container__content {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n flex: 1 1 100%;\n gap: 3.2rem;\n padding: 2.4rem 2.4rem;\n padding-top: 0;\n }\n\n .pn-teaser-card__container__content__text__container__heading {\n font-weight: 700;\n font-size: 2.4rem;\n line-height: 2.64rem;\n margin-bottom: 0;\n }\n\n .pn-teaser-card__container__content__text__container__preamble {\n padding-top: 1.6rem;\n font-weight: 400;\n font-size: 1.6rem;\n line-height: 2.24rem;\n margin-bottom: 0;\n }\n\n .pn-teaser-card__container__content__text__container__label {\n display: block;\n margin-bottom: 1.6rem;\n font-weight: 400;\n font-size: 1.2rem;\n line-height: 140%;\n }\n\n .pn-teaser-card__container__content__cta {\n & > pn-button {\n align-self: flex-end;\n width: 100%;\n\n & a:hover {\n text-decoration: none;\n }\n\n & > button,\n & > a {\n & > .pn-button-bg {\n transition: 0.4s ease-in-out;\n }\n }\n\n @media screen and (min-width: $teaser-card-media-tablet) {\n width: fit-content;\n }\n }\n\n .secondary-link--animated {\n font-weight: 500;\n font-size: 1.6rem;\n text-decoration: none;\n color: $blue700;\n\n pn-icon svg {\n transition: 0.3s ease-in-out;\n position: relative;\n left: -0.3rem;\n\n path {\n fill: $blue700;\n }\n }\n\n &[target='_blank']:not(.pn-button):after {\n display: none;\n }\n }\n }\n}\n\n//colors\npn-teaser-card[data-card-color='coral'] {\n & > .pn-teaser-card__container {\n background-color: $coral50;\n }\n}\n\npn-teaser-card[data-card-color='green'] {\n & > .pn-teaser-card__container {\n background-color: $green50;\n }\n}\n\npn-teaser-card[data-card-color='blue'] {\n & > .pn-teaser-card__container {\n background-color: $blue25;\n }\n}\n\npn-teaser-card[data-card-color='blue50'] {\n & > .pn-teaser-card__container {\n background-color: $blue50;\n }\n}\n\npn-teaser-card[data-card-color='blue400'] {\n & > .pn-teaser-card__container {\n background-color: $blue400;\n\n .pn-teaser-card__container__content__text__container__label,\n .pn-teaser-card__container__content__text__container__heading,\n .pn-teaser-card__container__content__text__container__preamble,\n .pn-teaser-card__container__content__cta .secondary-link--animated {\n color: $white;\n }\n\n .secondary-link--animated {\n & > pn-icon > svg > path {\n fill: $white;\n }\n }\n }\n}\n\npn-teaser-card[data-card-color='blue900'] {\n & > .pn-teaser-card__container {\n background-color: $blue900;\n .pn-teaser-card__container__content__text__container__heading {\n color: $coral400;\n }\n\n .pn-teaser-card__container__content__text__container__label,\n .pn-teaser-card__container__content__text__container__preamble,\n .pn-teaser-card__container__content__cta .secondary-link--animated {\n color: $white;\n }\n\n .secondary-link--animated {\n & > pn-icon > svg > path {\n fill: $white;\n }\n }\n }\n}\n\npn-teaser-card[data-card-color='white'] {\n & > .pn-teaser-card__container {\n background-color: $white;\n }\n}\n\n//color override when in a listblock\n.teasercardlistblock {\n .teasercardblock.has-bg {\n background-color: transparent;\n background: transparent;\n }\n}\n\n// variants\n\n.onequarterwidth {\n .pn-teaser-card__container__content__text__container__label {\n @media screen and (min-width: $teaser-card-media-desktop) {\n margin-bottom: 0.8rem;\n }\n }\n}\n\n.onethirdwidth,\n.onequarterwidth {\n & > pn-teaser-card {\n .pn-teaser-card__container__image__container--no-image {\n padding-top: 2.4rem;\n }\n }\n\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 400;\n }\n }\n}\n\n.halfwidth {\n & > pn-teaser-card {\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 400;\n }\n }\n\n .pn-teaser-card__container__image__container--no-image {\n padding-top: 2.4rem;\n }\n\n @media screen and (min-width: 992px) {\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 500;\n }\n }\n }\n\n @media screen and (min-width: $teaser-card-media-desktop) {\n .pn-teaser-card__container__image__container--no-image {\n padding-top: 4rem;\n }\n\n .pn-teaser-card__container__content {\n padding: 0 4rem 4rem;\n }\n\n .pn-teaser-card__container__content__text__container__heading {\n font-weight: 700;\n font-size: 3.2rem;\n line-height: 3.52rem;\n }\n\n .pn-teaser-card__container__content__text__container__preamble {\n font-weight: 400;\n font-size: 2rem;\n line-height: 2.8rem;\n }\n }\n\n @media screen and (min-width: $teaser-card-media-large-desktop) {\n .pn-teaser-card__container__image__container--no-image {\n padding-top: 5.6rem;\n }\n\n .pn-teaser-card__container__content {\n padding: 0 5.6rem 5.6rem;\n }\n }\n }\n}\n\n.fullwidth {\n & > pn-teaser-card {\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 400;\n }\n }\n\n .pn-teaser-card__container__image__container--no-image {\n width: auto;\n padding-top: 2.4rem;\n }\n\n @media screen and (min-width: $teaser-card-media-tablet) {\n min-height: 35rem;\n\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 500;\n }\n }\n\n .pn-teaser-card__container {\n flex-direction: row;\n }\n\n .pn-teaser-card__container__content {\n align-self: center;\n gap: 2.4rem;\n padding: 3.2rem 3.2rem 3.2rem 2.4rem;\n }\n\n .pn-teaser-card__container__image__container {\n & > [slot='illustration'] {\n border-top-left-radius: 2.4rem;\n border-bottom-left-radius: 2.4rem;\n clip-path: ellipse(100% 100% at 0% 50%);\n\n & > picture > img {\n height: 100%;\n object-fit: cover;\n }\n }\n }\n }\n\n @media screen and (min-width: $teaser-card-media-desktop) {\n min-height: 52rem;\n\n .pn-teaser-card__container__content {\n padding: 4rem 4rem 4rem 3.2rem;\n }\n\n .pn-teaser-card__container__content__text__container__heading {\n font-weight: 700;\n font-size: 4.8rem;\n line-height: 5.28rem;\n }\n\n .pn-teaser-card__container__content__text__container__preamble {\n font-size: 2rem;\n line-height: 2.8rem;\n }\n }\n }\n\n pn-teaser-card[data-card-alignment='right'] {\n @media screen and (min-width: $teaser-card-media-tablet) {\n .pn-teaser-card__container {\n flex-direction: row-reverse;\n }\n\n .pn-teaser-card__container__content {\n padding: 3.2rem 2.4rem 3.2rem 3.2rem;\n }\n\n .pn-teaser-card__container__image__container {\n & > [slot='illustration'] {\n border-bottom-right-radius: 2.4rem;\n clip-path: ellipse(100% 100% at 100% 50%);\n }\n }\n }\n\n @media screen and (min-width: $teaser-card-media-desktop) {\n .pn-teaser-card__container__content {\n padding: 4rem 3.2rem 4rem 4rem;\n }\n }\n }\n}\n\n//effect class\npn-teaser-card.teaser-card--hover-effect {\n &:hover {\n cursor: pointer;\n .pn-teaser-card__container__image__container {\n & [slot='illustration'] {\n & picture > img {\n transform: scale(1.02);\n filter: brightness(0.85);\n }\n }\n }\n\n .secondary-link--animated {\n text-decoration: underline;\n\n pn-icon svg {\n left: 0;\n }\n }\n\n pn-button {\n button,\n a {\n .pn-button-bg {\n background-color: $blue900;\n }\n }\n }\n\n &[data-card-color='blue900'] {\n pn-button {\n button,\n a {\n .pn-button-bg {\n background-color: $blue400;\n }\n }\n }\n }\n }\n}\n","import { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\n@Component({\n tag: 'pn-teaser-card',\n styleUrl: 'pn-teaser-card.scss',\n})\nexport class PnTeaserCard {\n @Element() hostElement: HTMLElement;\n //props\n @Prop() text: string = null;\n @Prop() heading: string = null;\n @Prop() label?: string = null;\n @Prop({ reflect: true }) dataCardColor: string = 'coral';\n @Prop({ reflect: true }) dataCardAlignment: string = 'left';\n\n labelToCapitals = this.label?.toUpperCase();\n\n @State() hasCtaSlotContent: boolean = false;\n @State() hasIllustrationSlot: boolean = true;\n\n componentWillLoad() {\n this.hasCtaSlotContent = !!this.hostElement.querySelector('[slot=\"cta\"]');\n this.hasIllustrationSlot = !!this.hostElement.querySelector('[slot=\"illustration\"]');\n }\n\n //render\n render() {\n return (\n <Host>\n <slot name=\"clickable-block-wrapper\" />\n <div class=\"pn-teaser-card__container\">\n <div class={`pn-teaser-card__container__image__container ${!this.hasIllustrationSlot ? 'pn-teaser-card__container__image__container--no-image' : ''}`}>\n <slot name=\"illustration\" />\n </div>\n <div class=\"pn-teaser-card__container__content\">\n <div class=\"pn-teaser-card__container__content__text__container\">\n {this.labelToCapitals && <span class=\"pn-teaser-card__container__content__text__container__label\">{this.labelToCapitals}</span>}\n <h2 class=\"pn-teaser-card__container__content__text__container__heading\">{this.heading}</h2>\n <p class=\"pn-teaser-card__container__content__text__container__preamble\">{this.text}</p>\n </div>\n {this.hasCtaSlotContent && (\n <div class=\"pn-teaser-card__container__content__cta\">\n <slot name=\"cta\" />\n </div>\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"pn-teaser-card.entry.js","mappings":";;AAAA,MAAM,eAAe,GAAG,g0RAAg0R,CAAC;AACz1R,2BAAe,eAAe;;MCKjB,YAAY;;;oBAGA,IAAI;uBACD,IAAI;qBACL,IAAI;6BACoB,OAAO;iCACH,MAAM;iCAErB,KAAK;mCACH,IAAI;;;IAE5C,iBAAiB;QACf,IAAI,CAAC,iBAAiB,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;QAC1E,IAAI,CAAC,mBAAmB,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;KACtF;;IAGD,MAAM;QACJ,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,EAAE,WAAW,EAAE,CAAC;QAElD,QACE,EAAC,IAAI,uDACH,6DAAM,IAAI,EAAC,yBAAyB,GAAG,EACvC,4DAAK,KAAK,EAAC,2BAA2B,IACpC,4DAAK,KAAK,EAAE,+CAA+C,CAAC,IAAI,CAAC,mBAAmB,GAAG,uDAAuD,GAAG,EAAE,EAAE,IACnJ,6DAAM,IAAI,EAAC,cAAc,GAAG,CACxB,EACN,4DAAK,KAAK,EAAC,oCAAoC,IAC7C,4DAAK,KAAK,EAAC,qDAAqD,IAC7D,eAAe,IAAI,6DAAM,KAAK,EAAC,4DAA4D,IAAE,eAAe,CAAQ,EACrH,2DAAI,KAAK,EAAC,8DAA8D,IAAE,IAAI,CAAC,OAAO,CAAM,EAC5F,0DAAG,KAAK,EAAC,+DAA+D,IAAE,IAAI,CAAC,IAAI,CAAK,CACpF,EACL,IAAI,CAAC,iBAAiB,KACrB,4DAAK,KAAK,EAAC,yCAAyC,IAClD,6DAAM,IAAI,EAAC,KAAK,GAAG,CACf,CACP,CACG,CACF,CACD,EACP;KACH;;;;;;","names":[],"sources":["src/components/cards/pn-teaser-card/pn-teaser-card.scss?tag=pn-teaser-card","src/components/cards/pn-teaser-card/pn-teaser-card.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\n$teaser-card-media-tablet: 768px; // 768px\n$teaser-card-media-desktop: 1200px; //1200px\n$teaser-card-media-large-desktop: 1640px; //1640\n\n//making pn wrapping link clickable over card image\n.block.teasercardblock {\n a[data-block-clickable-link='true'] {\n z-index: 1;\n }\n}\n\n//mobile first\npn-teaser-card {\n width: 100%;\n height: 100%;\n display: flex;\n\n .pn-teaser-card__container {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n border-radius: 2.4rem;\n width: 100%;\n }\n\n .pn-teaser-card__container__image__container {\n width: 100%;\n position: relative;\n\n & > [slot='illustration'] {\n clip-path: ellipse(100% 90% at 50% 0%);\n height: 100%;\n overflow: hidden;\n border-top-left-radius: 2.4rem;\n border-top-right-radius: 2.4rem;\n\n & > picture > img {\n width: 100%;\n height: auto;\n transition: 0.4s ease-in-out;\n transform: scale(1);\n aspect-ratio: 16/9;\n object-fit: cover;\n object-position: 50% 0;\n }\n }\n }\n\n .pn-teaser-card__container__content {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n flex: 1 1 100%;\n gap: 3.2rem;\n padding: 2.4rem 2.4rem;\n padding-top: 0;\n }\n\n .pn-teaser-card__container__content__text__container__heading {\n font-weight: 700;\n font-size: 2.4rem;\n line-height: 2.64rem;\n margin-bottom: 0;\n }\n\n .pn-teaser-card__container__content__text__container__preamble {\n padding-top: 1.6rem;\n font-weight: 400;\n font-size: 1.6rem;\n line-height: 2.24rem;\n margin-bottom: 0;\n }\n\n .pn-teaser-card__container__content__text__container__label {\n display: block;\n margin-bottom: 1.6rem;\n font-weight: 400;\n font-size: 1.2rem;\n line-height: 140%;\n }\n\n .pn-teaser-card__container__content__cta {\n & > pn-button {\n align-self: flex-end;\n width: 100%;\n\n & a:hover {\n text-decoration: none;\n }\n\n & > button,\n & > a {\n & > .pn-button-bg {\n transition: 0.4s ease-in-out;\n }\n }\n\n @media screen and (min-width: $teaser-card-media-tablet) {\n width: fit-content;\n }\n }\n\n .secondary-link--animated {\n font-weight: 500;\n font-size: 1.6rem;\n text-decoration: none;\n color: $blue700;\n\n pn-icon svg {\n transition: 0.3s ease-in-out;\n position: relative;\n left: -0.3rem;\n\n path {\n fill: $blue700;\n }\n }\n\n &[target='_blank']:not(.pn-button):after {\n display: none;\n }\n }\n }\n}\n\n//colors\npn-teaser-card[data-card-color='coral'] {\n & > .pn-teaser-card__container {\n background-color: $coral50;\n }\n}\n\npn-teaser-card[data-card-color='green'] {\n & > .pn-teaser-card__container {\n background-color: $green50;\n }\n}\n\npn-teaser-card[data-card-color='blue'] {\n & > .pn-teaser-card__container {\n background-color: $blue25;\n }\n}\n\npn-teaser-card[data-card-color='blue50'] {\n & > .pn-teaser-card__container {\n background-color: $blue50;\n }\n}\n\npn-teaser-card[data-card-color='blue400'] {\n & > .pn-teaser-card__container {\n background-color: $blue400;\n\n .pn-teaser-card__container__content__text__container__label,\n .pn-teaser-card__container__content__text__container__heading,\n .pn-teaser-card__container__content__text__container__preamble,\n .pn-teaser-card__container__content__cta .secondary-link--animated {\n color: $white;\n }\n\n .secondary-link--animated {\n & > pn-icon > svg > path {\n fill: $white;\n }\n }\n }\n}\n\npn-teaser-card[data-card-color='blue900'] {\n & > .pn-teaser-card__container {\n background-color: $blue900;\n .pn-teaser-card__container__content__text__container__heading {\n color: $coral400;\n }\n\n .pn-teaser-card__container__content__text__container__label,\n .pn-teaser-card__container__content__text__container__preamble,\n .pn-teaser-card__container__content__cta .secondary-link--animated {\n color: $white;\n }\n\n .secondary-link--animated {\n & > pn-icon > svg > path {\n fill: $white;\n }\n }\n }\n}\n\npn-teaser-card[data-card-color='white'] {\n & > .pn-teaser-card__container {\n background-color: $white;\n }\n}\n\n//color override when in a listblock\n.teasercardlistblock {\n .teasercardblock.has-bg {\n background-color: transparent;\n background: transparent;\n }\n}\n\n// variants\n\n.onequarterwidth {\n .pn-teaser-card__container__content__text__container__label {\n @media screen and (min-width: $teaser-card-media-desktop) {\n margin-bottom: 0.8rem;\n }\n }\n}\n\n.onethirdwidth,\n.onequarterwidth {\n & > pn-teaser-card {\n .pn-teaser-card__container__image__container--no-image {\n padding-top: 2.4rem;\n }\n }\n\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 400;\n }\n }\n}\n\n.halfwidth {\n & > pn-teaser-card {\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 400;\n }\n }\n\n .pn-teaser-card__container__image__container--no-image {\n padding-top: 2.4rem;\n }\n\n @media screen and (min-width: 992px) {\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 500;\n }\n }\n }\n\n @media screen and (min-width: $teaser-card-media-desktop) {\n .pn-teaser-card__container__image__container--no-image {\n padding-top: 4rem;\n }\n\n .pn-teaser-card__container__content {\n padding: 0 4rem 4rem;\n }\n\n .pn-teaser-card__container__content__text__container__heading {\n font-weight: 700;\n font-size: 3.2rem;\n line-height: 3.52rem;\n }\n\n .pn-teaser-card__container__content__text__container__preamble {\n font-weight: 400;\n font-size: 2rem;\n line-height: 2.8rem;\n }\n }\n\n @media screen and (min-width: $teaser-card-media-large-desktop) {\n .pn-teaser-card__container__image__container--no-image {\n padding-top: 5.6rem;\n }\n\n .pn-teaser-card__container__content {\n padding: 0 5.6rem 5.6rem;\n }\n }\n }\n}\n\n.fullwidth {\n & > pn-teaser-card {\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 400;\n }\n }\n\n .pn-teaser-card__container__image__container--no-image {\n width: auto;\n padding-top: 2.4rem;\n }\n\n @media screen and (min-width: $teaser-card-media-tablet) {\n min-height: 35rem;\n\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 500;\n }\n }\n\n .pn-teaser-card__container {\n flex-direction: row;\n }\n\n .pn-teaser-card__container__content {\n align-self: center;\n gap: 2.4rem;\n padding: 3.2rem 3.2rem 3.2rem 2.4rem;\n }\n\n .pn-teaser-card__container__image__container {\n & > [slot='illustration'] {\n border-top-left-radius: 2.4rem;\n border-bottom-left-radius: 2.4rem;\n clip-path: ellipse(100% 100% at 0% 50%);\n\n & > picture > img {\n height: 100%;\n object-fit: cover;\n }\n }\n }\n }\n\n @media screen and (min-width: $teaser-card-media-desktop) {\n min-height: 52rem;\n\n .pn-teaser-card__container__content {\n padding: 4rem 4rem 4rem 3.2rem;\n }\n\n .pn-teaser-card__container__content__text__container__heading {\n font-weight: 700;\n font-size: 4.8rem;\n line-height: 5.28rem;\n }\n\n .pn-teaser-card__container__content__text__container__preamble {\n font-size: 2rem;\n line-height: 2.8rem;\n }\n }\n }\n\n pn-teaser-card[data-card-alignment='right'] {\n @media screen and (min-width: $teaser-card-media-tablet) {\n .pn-teaser-card__container {\n flex-direction: row-reverse;\n }\n\n .pn-teaser-card__container__content {\n padding: 3.2rem 2.4rem 3.2rem 3.2rem;\n }\n\n .pn-teaser-card__container__image__container {\n & > [slot='illustration'] {\n border-bottom-right-radius: 2.4rem;\n clip-path: ellipse(100% 100% at 100% 50%);\n }\n }\n }\n\n @media screen and (min-width: $teaser-card-media-desktop) {\n .pn-teaser-card__container__content {\n padding: 4rem 3.2rem 4rem 4rem;\n }\n }\n }\n}\n\n//effect class\npn-teaser-card.teaser-card--hover-effect {\n &:hover {\n cursor: pointer;\n .pn-teaser-card__container__image__container {\n & [slot='illustration'] {\n & picture > img {\n transform: scale(1.02);\n filter: brightness(0.85);\n }\n }\n }\n\n .secondary-link--animated {\n text-decoration: underline;\n\n pn-icon svg {\n left: 0;\n }\n }\n\n pn-button {\n button,\n a {\n .pn-button-bg {\n background-color: $blue900;\n }\n }\n }\n\n &[data-card-color='blue900'] {\n pn-button {\n button,\n a {\n .pn-button-bg {\n background-color: $blue400;\n }\n }\n }\n }\n }\n}\n","import { Component, Prop, h, Element, State, Host } from \"@stencil/core\";\n\n@Component({\n tag: 'pn-teaser-card',\n styleUrl: 'pn-teaser-card.scss'\n})\nexport class PnTeaserCard {\n @Element() hostElement: HTMLElement;\n //props\n @Prop() text: string = null;\n @Prop() heading: string = null;\n @Prop() label?: string = null;\n @Prop({ reflect: true }) dataCardColor: string = 'coral';\n @Prop({ reflect: true }) dataCardAlignment: string = 'left';\n\n @State() hasCtaSlotContent: boolean = false;\n @State() hasIllustrationSlot: boolean = true;\n\n componentWillLoad() {\n this.hasCtaSlotContent = !!this.hostElement.querySelector('[slot=\"cta\"]');\n this.hasIllustrationSlot = !!this.hostElement.querySelector('[slot=\"illustration\"]');\n }\n\n //render\n render() {\n const labelToCapitals = this.label?.toUpperCase();\n\n return (\n <Host>\n <slot name=\"clickable-block-wrapper\" />\n <div class=\"pn-teaser-card__container\">\n <div class={`pn-teaser-card__container__image__container ${!this.hasIllustrationSlot ? 'pn-teaser-card__container__image__container--no-image' : ''}`}>\n <slot name=\"illustration\" />\n </div>\n <div class=\"pn-teaser-card__container__content\">\n <div class=\"pn-teaser-card__container__content__text__container\">\n {labelToCapitals && <span class=\"pn-teaser-card__container__content__text__container__label\">{labelToCapitals}</span>}\n <h2 class=\"pn-teaser-card__container__content__text__container__heading\">{this.heading}</h2>\n <p class=\"pn-teaser-card__container__content__text__container__preamble\">{this.text}</p>\n </div>\n {this.hasCtaSlotContent && (\n <div class=\"pn-teaser-card__container__content__cta\">\n <slot name=\"cta\" />\n </div>\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@postnord/pn-marketweb-components",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.3.1",
|
|
4
4
|
"description": "PostNord Market Websites Components",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -29,7 +29,8 @@
|
|
|
29
29
|
"storybook": "storybook dev -p 6008 ",
|
|
30
30
|
"build-storybook": "storybook build",
|
|
31
31
|
"post:build": "node ./scripts/post_build.js",
|
|
32
|
-
"format": "cd src && npx prettier --write ."
|
|
32
|
+
"format": "cd src && npx prettier --write .",
|
|
33
|
+
"generate": "plop"
|
|
33
34
|
},
|
|
34
35
|
"devDependencies": {
|
|
35
36
|
"@babel/core": "7.24.7",
|
|
@@ -59,6 +60,7 @@
|
|
|
59
60
|
"jest": "29.7.0",
|
|
60
61
|
"jest-cli": "29.7.0",
|
|
61
62
|
"npm-run-all": "4.1.5",
|
|
63
|
+
"plop": "4.0.1",
|
|
62
64
|
"pn-design-assets": "1.8.1",
|
|
63
65
|
"puppeteer": "^22.11.2",
|
|
64
66
|
"sass": "^1.77.5",
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as t,g as c,h as a,d as o}from"./p-06555615.js";const n="pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-cta-block{display:flex;justify-content:center}pn-cta-block .cta-block{display:flex;justify-content:space-between;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{flex-direction:row;padding:2.4rem}}@media screen and (min-width: 1140px){pn-cta-block .cta-block{margin-right:auto;margin-left:auto;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{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:inline-flex;max-width:75%}pn-cta-block .cta-block--small.cta-block--center{max-width:66%}}pn-cta-block .cta-block--center{align-items:center;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}pn-cta-block .cta-block--center .cta-block__action>[slot=cta-button]{gap:0.8rem}@media screen and (min-width: 768px){pn-cta-block .cta-block--center .cta-block__action{flex-direction:row;gap:2.4rem;margin-top:1.6rem}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]{flex-direction:row;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:flex;flex:1;flex-direction:column;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:flex}pn-cta-block .cta-block__action>[slot=cta-buttons]{display:flex;flex-direction:column;row-gap:1.6rem;flex:1}@media screen and (min-width: 768px){pn-cta-block .cta-block__action>[slot=cta-buttons]{align-items:flex-end;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{transition: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{transition:transform 0.3s ease-in-out;transform:translateX(0.3rem)}pn-cta-block .cta-block__action>[slot=cta-buttons]>a:hover pn-icon svg path{fill:#
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as t,g as c,h as a,d as o}from"./p-06555615.js";const n="pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-cta-block{display:flex;justify-content:center}pn-cta-block .cta-block{display:flex;justify-content:space-between;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{flex-direction:row;padding:2.4rem}}@media screen and (min-width: 1140px){pn-cta-block .cta-block{margin-right:auto;margin-left:auto;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{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:inline-flex;max-width:75%}pn-cta-block .cta-block--small.cta-block--center{max-width:66%}}pn-cta-block .cta-block--center{align-items:center;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}pn-cta-block .cta-block--center .cta-block__action>[slot=cta-button]{gap:0.8rem}@media screen and (min-width: 768px){pn-cta-block .cta-block--center .cta-block__action{flex-direction:row;gap:2.4rem;margin-top:1.6rem}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]{flex-direction:row;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:flex;flex:1;flex-direction:column;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:flex}pn-cta-block .cta-block__action>[slot=cta-buttons]{display:flex;flex-direction:column;row-gap:1.6rem;flex:1}@media screen and (min-width: 768px){pn-cta-block .cta-block__action>[slot=cta-buttons]{align-items:flex-end;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{transition: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{color:#0d234b;text-decoration:underline}pn-cta-block .cta-block__action>[slot=cta-buttons]>a:hover pn-icon svg{transition:transform 0.3s ease-in-out;transform:translateX(0.3rem)}pn-cta-block .cta-block__action>[slot=cta-buttons]>a:hover pn-icon svg path{fill:#0d234b}";const e=n;const l=class{constructor(c){t(this,c);this.heading=null;this.bodyText=null;this.pnBackgroundColor=null;this.isLarge=false;this.isCentered=false;this.isSmall=false;this.contentTop=false}get hostElement(){return c(this)}render(){const t=this.hostElement.querySelector('[slot="illustration"]');const c=this.hostElement.querySelector('[slot="cta-buttons"]');return a(o,{key:"5fdd4c5e517e54cfef34011fb06fc5cf04ab2506"},a("div",{key:"1ba76095e428688e6ed6a02bedbdf929e7918fb5","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":""}`},t?a("div",{class:"cta-block__image-wrapper"},a("slot",{name:"illustration"})):null,this.heading&&this.bodyText?a("div",{class:"cta-block__content"},a("h2",{class:"cta-block__heading"},this.heading),a("p",{class:"cta-block__text"},this.bodyText)):null,c?a("div",{class:"cta-block__action"},a("slot",{name:"cta-buttons"})):null))}};l.style=e;export{l as pn_cta_block};
|
|
2
|
+
//# sourceMappingURL=p-69a56d5c.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["pnCtaBlockCss","PnCtaBlockStyle0","PnCtaBlock","render","hasImage","this","hostElement","querySelector","hasButtons","h","Host","key","pnBackgroundColor","class","isLarge","isCentered","isSmall","contentTop","name","heading","bodyText"],"sources":["src/components/cta/pn-cta-block/pn-cta-block.scss?tag=pn-cta-block","src/components/cta/pn-cta-block/pn-cta-block.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-cta-block {\n display: flex;\n justify-content: center;\n\n .cta-block {\n display: flex;\n justify-content: space-between;\n flex-direction: column;\n border-radius: 2.4rem;\n padding: 3.2rem 2.4rem;\n width: 100%;\n\n @media screen and (min-width: 768px) {\n flex-direction: row;\n padding: 2.4rem;\n }\n\n @media screen and (min-width: 1140px) {\n margin-right: auto;\n margin-left: auto;\n max-width: 95%;\n }\n\n @media screen and (min-width: 1440px) {\n max-width: 90%;\n }\n\n &[pn-background-color='blue25'] {\n background-color: $blue25;\n }\n\n &[pn-background-color='coral50'] {\n background-color: $coral50;\n }\n\n &[pn-background-color='gray25'] {\n background-color: $gray25;\n }\n\n &[pn-background-color='green25'] {\n background-color: $green25;\n }\n\n &[pn-background-color='transparent'] {\n padding: 0 3.2rem;\n }\n }\n\n .cta-block--content-top {\n .cta-block__content {\n justify-content: flex-start;\n }\n }\n\n .cta-block--large {\n .cta-block__heading {\n @media screen and (min-width: 768px) {\n font-size: 3.6rem;\n }\n }\n\n .cta-block__text {\n @media screen and (min-width: 768px) {\n font-size: 2rem;\n }\n }\n }\n\n .cta-block--small {\n width: auto;\n\n @media screen and (min-width:992px) {\n display: inline-flex;\n max-width: 75%;\n\n &.cta-block--center {\n max-width: 66%;\n }\n }\n }\n\n .cta-block--center {\n align-items: center;\n flex-direction: column;\n gap: 1.6rem;\n text-align: center;\n\n @media screen and (min-width:768px) {\n gap: 2.4rem;\n padding: 3.2rem;\n }\n\n .cta-block__content {\n @media screen and (min-width: 768px) {\n max-width: 74rem;\n padding: 0;\n }\n }\n\n .cta-block__action {\n margin-top: 0.8rem;\n\n &>[slot='cta-button'] {\n gap: 0.8rem;\n }\n\n @media screen and (min-width: 768px) {\n flex-direction: row;\n gap: 2.4rem;\n margin-top: 1.6rem;\n\n &.cta-block__button {\n margin-bottom: 0;\n }\n\n &>[slot='cta-buttons'] {\n flex-direction: row;\n align-items: center;\n gap: 2.4rem;\n }\n }\n }\n\n .cta-block__image-wrapper {\n @media screen and (min-width: 768px) {\n display: block;\n }\n\n & > [slot='illustration'] {\n padding-right: 0;\n }\n }\n\n .cta-block__text {\n margin-bottom: 0 !important;\n }\n }\n\n .cta-block__image-wrapper {\n margin-bottom: 1.6rem;\n\n &>[slot='illustration'] {\n &>picture>img {\n border-radius: 0.8rem;\n max-width: 100%;\n }\n }\n\n @media screen and (min-width:768px) {\n display: none;\n max-width: 20%;\n }\n\n @media screen and (min-width: 992px) {\n display: block;\n margin-bottom: 0;\n\n & > [slot='illustration'] {\n padding-right: 3.2rem;\n }\n }\n }\n\n .cta-block__content {\n display: flex;\n flex: 1;\n flex-direction: column;\n justify-content: center;\n\n @media screen and (min-width: 768px) {\n padding-right: 2.4rem;\n }\n\n .cta-block__heading,\n .cta-block__text {\n @media screen and (min-width:768px) {\n max-width: 74rem;\n }\n }\n\n .cta-block__text {\n margin-bottom: 2.4rem;\n\n @media screen and (min-width: 768px) {\n margin-bottom: 0;\n }\n }\n }\n\n .cta-block__heading {\n margin-bottom: 0.8rem;\n }\n\n .cta-block__action {\n display: flex;\n\n &>[slot='cta-buttons'] {\n display: flex;\n flex-direction: column;\n row-gap: 1.6rem;\n flex: 1;\n\n @media screen and (min-width:768px) {\n align-items: flex-end;\n justify-content: center;\n gap: 1.6rem;\n margin-top: 0;\n }\n\n & > a {\n color: $blue700;\n font-weight: 500;\n font-size: 1.6rem;\n padding: 0.1rem;\n text-decoration: none;\n\n pn-icon svg {\n transition: transform 0.3s ease-in-out;\n\n path {\n fill: $blue700;\n }\n }\n\n &:hover {\n pn-icon svg {\n transition: transform 0.3s ease-in-out;\n transform: translateX(0.3rem);\n\n path {\n fill: $
|
|
1
|
+
{"version":3,"names":["pnCtaBlockCss","PnCtaBlockStyle0","PnCtaBlock","render","hasImage","this","hostElement","querySelector","hasButtons","h","Host","key","pnBackgroundColor","class","isLarge","isCentered","isSmall","contentTop","name","heading","bodyText"],"sources":["src/components/cta/pn-cta-block/pn-cta-block.scss?tag=pn-cta-block","src/components/cta/pn-cta-block/pn-cta-block.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-cta-block {\n display: flex;\n justify-content: center;\n\n .cta-block {\n display: flex;\n justify-content: space-between;\n flex-direction: column;\n border-radius: 2.4rem;\n padding: 3.2rem 2.4rem;\n width: 100%;\n\n @media screen and (min-width: 768px) {\n flex-direction: row;\n padding: 2.4rem;\n }\n\n @media screen and (min-width: 1140px) {\n margin-right: auto;\n margin-left: auto;\n max-width: 95%;\n }\n\n @media screen and (min-width: 1440px) {\n max-width: 90%;\n }\n\n &[pn-background-color='blue25'] {\n background-color: $blue25;\n }\n\n &[pn-background-color='coral50'] {\n background-color: $coral50;\n }\n\n &[pn-background-color='gray25'] {\n background-color: $gray25;\n }\n\n &[pn-background-color='green25'] {\n background-color: $green25;\n }\n\n &[pn-background-color='transparent'] {\n padding: 0 3.2rem;\n }\n }\n\n .cta-block--content-top {\n .cta-block__content {\n justify-content: flex-start;\n }\n }\n\n .cta-block--large {\n .cta-block__heading {\n @media screen and (min-width: 768px) {\n font-size: 3.6rem;\n }\n }\n\n .cta-block__text {\n @media screen and (min-width: 768px) {\n font-size: 2rem;\n }\n }\n }\n\n .cta-block--small {\n width: auto;\n\n @media screen and (min-width:992px) {\n display: inline-flex;\n max-width: 75%;\n\n &.cta-block--center {\n max-width: 66%;\n }\n }\n }\n\n .cta-block--center {\n align-items: center;\n flex-direction: column;\n gap: 1.6rem;\n text-align: center;\n\n @media screen and (min-width:768px) {\n gap: 2.4rem;\n padding: 3.2rem;\n }\n\n .cta-block__content {\n @media screen and (min-width: 768px) {\n max-width: 74rem;\n padding: 0;\n }\n }\n\n .cta-block__action {\n margin-top: 0.8rem;\n\n &>[slot='cta-button'] {\n gap: 0.8rem;\n }\n\n @media screen and (min-width: 768px) {\n flex-direction: row;\n gap: 2.4rem;\n margin-top: 1.6rem;\n\n &.cta-block__button {\n margin-bottom: 0;\n }\n\n &>[slot='cta-buttons'] {\n flex-direction: row;\n align-items: center;\n gap: 2.4rem;\n }\n }\n }\n\n .cta-block__image-wrapper {\n @media screen and (min-width: 768px) {\n display: block;\n }\n\n & > [slot='illustration'] {\n padding-right: 0;\n }\n }\n\n .cta-block__text {\n margin-bottom: 0 !important;\n }\n }\n\n .cta-block__image-wrapper {\n margin-bottom: 1.6rem;\n\n &>[slot='illustration'] {\n &>picture>img {\n border-radius: 0.8rem;\n max-width: 100%;\n }\n }\n\n @media screen and (min-width:768px) {\n display: none;\n max-width: 20%;\n }\n\n @media screen and (min-width: 992px) {\n display: block;\n margin-bottom: 0;\n\n & > [slot='illustration'] {\n padding-right: 3.2rem;\n }\n }\n }\n\n .cta-block__content {\n display: flex;\n flex: 1;\n flex-direction: column;\n justify-content: center;\n\n @media screen and (min-width: 768px) {\n padding-right: 2.4rem;\n }\n\n .cta-block__heading,\n .cta-block__text {\n @media screen and (min-width:768px) {\n max-width: 74rem;\n }\n }\n\n .cta-block__text {\n margin-bottom: 2.4rem;\n\n @media screen and (min-width: 768px) {\n margin-bottom: 0;\n }\n }\n }\n\n .cta-block__heading {\n margin-bottom: 0.8rem;\n }\n\n .cta-block__action {\n display: flex;\n\n &>[slot='cta-buttons'] {\n display: flex;\n flex-direction: column;\n row-gap: 1.6rem;\n flex: 1;\n\n @media screen and (min-width:768px) {\n align-items: flex-end;\n justify-content: center;\n gap: 1.6rem;\n margin-top: 0;\n }\n\n & > a {\n color: $blue700;\n font-weight: 500;\n font-size: 1.6rem;\n padding: 0.1rem;\n text-decoration: none;\n\n pn-icon svg {\n transition: transform 0.3s ease-in-out;\n\n path {\n fill: $blue700;\n }\n }\n\n &:hover {\n color: $blue900;\n text-decoration: underline;\n \n pn-icon svg {\n transition: transform 0.3s ease-in-out;\n transform: translateX(0.3rem);\n\n path {\n fill: $blue900;\n }\n }\n }\n }\n }\n }\n}\n","import { Component, Host, Prop, h, Element } from '@stencil/core';\n\n@Component({\n tag: 'pn-cta-block',\n styleUrl: 'pn-cta-block.scss',\n})\nexport class PnCtaBlock {\n @Element() hostElement: HTMLElement;\n\n @Prop() heading: string = null;\n @Prop() bodyText: string = null;\n\n @Prop() pnBackgroundColor: string = null;\n\n @Prop() isLarge: boolean = false;\n @Prop() isCentered: boolean = false;\n @Prop() isSmall: boolean = false;\n @Prop() contentTop: boolean = false;\n\n render() {\n const hasImage = this.hostElement.querySelector('[slot=\"illustration\"]');\n const hasButtons = this.hostElement.querySelector('[slot=\"cta-buttons\"]');\n return (\n <Host>\n <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' : ''}`}>\n {(hasImage ?\n <div class=\"cta-block__image-wrapper\">\n <slot name=\"illustration\" />\n </div> : null\n )}\n {(this.heading && this.bodyText)?\n <div class=\"cta-block__content\">\n <h2 class=\"cta-block__heading\">{this.heading}</h2>\n <p class=\"cta-block__text\">{this.bodyText}</p>\n </div> : null\n }\n {(hasButtons ?\n <div class=\"cta-block__action\">\n <slot name=\"cta-buttons\" />\n </div> : null\n )}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"yDAAA,MAAMA,EAAgB,s6IACtB,MAAAC,EAAeD,E,MCKFE,EAAU,M,sCAGK,K,cACC,K,uBAES,K,aAET,M,gBACG,M,aACH,M,gBACG,K,kCAE9B,MAAAC,GACE,MAAMC,EAAWC,KAAKC,YAAYC,cAAc,yBAChD,MAAMC,EAAaH,KAAKC,YAAYC,cAAc,wBAClD,OACEE,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,iEAA0BN,KAAKO,kBAAmBC,MAAO,aAAaR,KAAKS,QAAU,mBAAqB,OAAOT,KAAKU,WAAa,oBAAsB,OAAQV,KAAKW,QAAU,mBAAqB,MAAOX,KAAKY,WAAa,yBAA2B,MACrPb,EACAK,EAAA,OAAKI,MAAM,4BACTJ,EAAA,QAAMS,KAAK,kBACJ,KAETb,KAAKc,SAAWd,KAAKe,SACrBX,EAAA,OAAKI,MAAM,sBACTJ,EAAA,MAAII,MAAM,sBAAsBR,KAAKc,SACrCV,EAAA,KAAGI,MAAM,mBAAmBR,KAAKe,WAC1B,KAETZ,EACAC,EAAA,OAAKI,MAAM,qBACTJ,EAAA,QAAMS,KAAK,iBACJ,M","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as e,g as a,h as t,d as n}from"./p-06555615.js";const r="pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.block.teasercardblock a[data-block-clickable-link=true]{z-index:1}pn-teaser-card{width:100%;height:100%;display:flex}pn-teaser-card .pn-teaser-card__container{display:flex;flex-direction:column;justify-content:flex-start;border-radius:2.4rem;width:100%}pn-teaser-card .pn-teaser-card__container__image__container{width:100%;position:relative}pn-teaser-card .pn-teaser-card__container__image__container>[slot=illustration]{clip-path:ellipse(100% 90% at 50% 0%);height:100%;overflow:hidden;border-top-left-radius:2.4rem;border-top-right-radius:2.4rem}pn-teaser-card .pn-teaser-card__container__image__container>[slot=illustration]>picture>img{width:100%;height:auto;transition:0.4s ease-in-out;transform:scale(1);aspect-ratio:16/9;object-fit:cover;object-position:50% 0}pn-teaser-card .pn-teaser-card__container__content{display:flex;flex-direction:column;justify-content:space-between;flex:1 1 100%;gap:3.2rem;padding:2.4rem 2.4rem;padding-top:0}pn-teaser-card .pn-teaser-card__container__content__text__container__heading{font-weight:700;font-size:2.4rem;line-height:2.64rem;margin-bottom:0}pn-teaser-card .pn-teaser-card__container__content__text__container__preamble{padding-top:1.6rem;font-weight:400;font-size:1.6rem;line-height:2.24rem;margin-bottom:0}pn-teaser-card .pn-teaser-card__container__content__text__container__label{display:block;margin-bottom:1.6rem;font-weight:400;font-size:1.2rem;line-height:140%}pn-teaser-card .pn-teaser-card__container__content__cta>pn-button{align-self:flex-end;width:100%}pn-teaser-card .pn-teaser-card__container__content__cta>pn-button a:hover{text-decoration:none}pn-teaser-card .pn-teaser-card__container__content__cta>pn-button>button>.pn-button-bg,pn-teaser-card .pn-teaser-card__container__content__cta>pn-button>a>.pn-button-bg{transition:0.4s ease-in-out}@media screen and (min-width: 768px){pn-teaser-card .pn-teaser-card__container__content__cta>pn-button{width:fit-content}}pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:500;font-size:1.6rem;text-decoration:none;color:#005d92}pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated pn-icon svg{transition:0.3s ease-in-out;position:relative;left:-0.3rem}pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated pn-icon svg path{fill:#005d92}pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated[target=_blank]:not(.pn-button):after{display:none}pn-teaser-card[data-card-color=coral]>.pn-teaser-card__container{background-color:#fdefee}pn-teaser-card[data-card-color=green]>.pn-teaser-card__container{background-color:#dcf6e7}pn-teaser-card[data-card-color=blue]>.pn-teaser-card__container{background-color:#effbff}pn-teaser-card[data-card-color=blue50]>.pn-teaser-card__container{background-color:#e0f8ff}pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container{background-color:#00a0d6}pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__label,pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__heading,pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__preamble,pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container .pn-teaser-card__container__content__cta .secondary-link--animated{color:#ffffff}pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container .secondary-link--animated>pn-icon>svg>path{fill:#ffffff}pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container{background-color:#0d234b}pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__heading{color:#f06365}pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__label,pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__preamble,pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container .pn-teaser-card__container__content__cta .secondary-link--animated{color:#ffffff}pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container .secondary-link--animated>pn-icon>svg>path{fill:#ffffff}pn-teaser-card[data-card-color=white]>.pn-teaser-card__container{background-color:#ffffff}.teasercardlistblock .teasercardblock.has-bg{background-color:transparent;background:transparent}@media screen and (min-width: 1200px){.onequarterwidth .pn-teaser-card__container__content__text__container__label{margin-bottom:0.8rem}}.onethirdwidth>pn-teaser-card .pn-teaser-card__container__image__container--no-image,.onequarterwidth>pn-teaser-card .pn-teaser-card__container__image__container--no-image{padding-top:2.4rem}.onethirdwidth .pn-teaser-card__container__content__cta .secondary-link--animated,.onequarterwidth .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:400}.halfwidth>pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:400}.halfwidth>pn-teaser-card .pn-teaser-card__container__image__container--no-image{padding-top:2.4rem}@media screen and (min-width: 992px){.halfwidth>pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:500}}@media screen and (min-width: 1200px){.halfwidth>pn-teaser-card .pn-teaser-card__container__image__container--no-image{padding-top:4rem}.halfwidth>pn-teaser-card .pn-teaser-card__container__content{padding:0 4rem 4rem}.halfwidth>pn-teaser-card .pn-teaser-card__container__content__text__container__heading{font-weight:700;font-size:3.2rem;line-height:3.52rem}.halfwidth>pn-teaser-card .pn-teaser-card__container__content__text__container__preamble{font-weight:400;font-size:2rem;line-height:2.8rem}}@media screen and (min-width: 1640px){.halfwidth>pn-teaser-card .pn-teaser-card__container__image__container--no-image{padding-top:5.6rem}.halfwidth>pn-teaser-card .pn-teaser-card__container__content{padding:0 5.6rem 5.6rem}}.fullwidth>pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:400}.fullwidth>pn-teaser-card .pn-teaser-card__container__image__container--no-image{width:auto;padding-top:2.4rem}@media screen and (min-width: 768px){.fullwidth>pn-teaser-card{min-height:35rem}.fullwidth>pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:500}.fullwidth>pn-teaser-card .pn-teaser-card__container{flex-direction:row}.fullwidth>pn-teaser-card .pn-teaser-card__container__content{align-self:center;gap:2.4rem;padding:3.2rem 3.2rem 3.2rem 2.4rem}.fullwidth>pn-teaser-card .pn-teaser-card__container__image__container>[slot=illustration]{border-top-left-radius:2.4rem;border-bottom-left-radius:2.4rem;clip-path:ellipse(100% 100% at 0% 50%)}.fullwidth>pn-teaser-card .pn-teaser-card__container__image__container>[slot=illustration]>picture>img{height:100%;object-fit:cover}}@media screen and (min-width: 1200px){.fullwidth>pn-teaser-card{min-height:52rem}.fullwidth>pn-teaser-card .pn-teaser-card__container__content{padding:4rem 4rem 4rem 3.2rem}.fullwidth>pn-teaser-card .pn-teaser-card__container__content__text__container__heading{font-weight:700;font-size:4.8rem;line-height:5.28rem}.fullwidth>pn-teaser-card .pn-teaser-card__container__content__text__container__preamble{font-size:2rem;line-height:2.8rem}}@media screen and (min-width: 768px){.fullwidth pn-teaser-card[data-card-alignment=right] .pn-teaser-card__container{flex-direction:row-reverse}.fullwidth pn-teaser-card[data-card-alignment=right] .pn-teaser-card__container__content{padding:3.2rem 2.4rem 3.2rem 3.2rem}.fullwidth pn-teaser-card[data-card-alignment=right] .pn-teaser-card__container__image__container>[slot=illustration]{border-bottom-right-radius:2.4rem;clip-path:ellipse(100% 100% at 100% 50%)}}@media screen and (min-width: 1200px){.fullwidth pn-teaser-card[data-card-alignment=right] .pn-teaser-card__container__content{padding:4rem 3.2rem 4rem 4rem}}pn-teaser-card.teaser-card--hover-effect:hover{cursor:pointer}pn-teaser-card.teaser-card--hover-effect:hover .pn-teaser-card__container__image__container [slot=illustration] picture>img{transform:scale(1.02);filter:brightness(0.85)}pn-teaser-card.teaser-card--hover-effect:hover .secondary-link--animated{text-decoration:underline}pn-teaser-card.teaser-card--hover-effect:hover .secondary-link--animated pn-icon svg{left:0}pn-teaser-card.teaser-card--hover-effect:hover pn-button button .pn-button-bg,pn-teaser-card.teaser-card--hover-effect:hover pn-button a .pn-button-bg{background-color:#0d234b}pn-teaser-card.teaser-card--hover-effect:hover[data-card-color=blue900] pn-button button .pn-button-bg,pn-teaser-card.teaser-card--hover-effect:hover[data-card-color=blue900] pn-button a .pn-button-bg{background-color:#00a0d6}";const c=r;const _=class{constructor(a){e(this,a);this.text=null;this.heading=null;this.label=null;this.dataCardColor="coral";this.dataCardAlignment="left";this.hasCtaSlotContent=false;this.hasIllustrationSlot=true}get hostElement(){return a(this)}labelToCapitals=this.label?.toUpperCase();componentWillLoad(){this.hasCtaSlotContent=!!this.hostElement.querySelector('[slot="cta"]');this.hasIllustrationSlot=!!this.hostElement.querySelector('[slot="illustration"]')}render(){return t(n,{key:"791b3dc0bb9f180af134c20ad6db6b30383fa22b"},t("slot",{key:"5877ea4e196f8f8579ff49d2ff1422ee31681140",name:"clickable-block-wrapper"}),t("div",{key:"09428d901cd7946fd72084cd14a4a04101698b4b",class:"pn-teaser-card__container"},t("div",{key:"e9e5e1c3243886efd2bb4c75af6c7702081971e5",class:`pn-teaser-card__container__image__container ${!this.hasIllustrationSlot?"pn-teaser-card__container__image__container--no-image":""}`},t("slot",{key:"aca99666b8ff47fb02a990788d4e86a32d231cfe",name:"illustration"})),t("div",{key:"f16f31b42437a48adaf8e7e56ecd8bec5c069946",class:"pn-teaser-card__container__content"},t("div",{key:"7308c30884cd8ad391943652b90ba1f3a64fbf26",class:"pn-teaser-card__container__content__text__container"},this.labelToCapitals&&t("span",{key:"a81ef74a015fbfc76193f1732c9fe6ae98b811db",class:"pn-teaser-card__container__content__text__container__label"},this.labelToCapitals),t("h2",{key:"56f846822e14b3d5541fd049d9150ced61722f93",class:"pn-teaser-card__container__content__text__container__heading"},this.heading),t("p",{key:"a7a74cbb08fe34c491b9ef426e4c50dbf0900f13",class:"pn-teaser-card__container__content__text__container__preamble"},this.text)),this.hasCtaSlotContent&&t("div",{key:"f2ff04dcb61429db60a5c0be06b6c0888a06fd34",class:"pn-teaser-card__container__content__cta"},t("slot",{key:"e02486c130c31907aaf82123a550c27f6c6f6f92",name:"cta"})))))}};_.style=c;export{_ as pn_teaser_card};
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as e,g as a,h as t,d as n}from"./p-06555615.js";const r="pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.block.teasercardblock a[data-block-clickable-link=true]{z-index:1}pn-teaser-card{width:100%;height:100%;display:flex}pn-teaser-card .pn-teaser-card__container{display:flex;flex-direction:column;justify-content:flex-start;border-radius:2.4rem;width:100%}pn-teaser-card .pn-teaser-card__container__image__container{width:100%;position:relative}pn-teaser-card .pn-teaser-card__container__image__container>[slot=illustration]{clip-path:ellipse(100% 90% at 50% 0%);height:100%;overflow:hidden;border-top-left-radius:2.4rem;border-top-right-radius:2.4rem}pn-teaser-card .pn-teaser-card__container__image__container>[slot=illustration]>picture>img{width:100%;height:auto;transition:0.4s ease-in-out;transform:scale(1);aspect-ratio:16/9;object-fit:cover;object-position:50% 0}pn-teaser-card .pn-teaser-card__container__content{display:flex;flex-direction:column;justify-content:space-between;flex:1 1 100%;gap:3.2rem;padding:2.4rem 2.4rem;padding-top:0}pn-teaser-card .pn-teaser-card__container__content__text__container__heading{font-weight:700;font-size:2.4rem;line-height:2.64rem;margin-bottom:0}pn-teaser-card .pn-teaser-card__container__content__text__container__preamble{padding-top:1.6rem;font-weight:400;font-size:1.6rem;line-height:2.24rem;margin-bottom:0}pn-teaser-card .pn-teaser-card__container__content__text__container__label{display:block;margin-bottom:1.6rem;font-weight:400;font-size:1.2rem;line-height:140%}pn-teaser-card .pn-teaser-card__container__content__cta>pn-button{align-self:flex-end;width:100%}pn-teaser-card .pn-teaser-card__container__content__cta>pn-button a:hover{text-decoration:none}pn-teaser-card .pn-teaser-card__container__content__cta>pn-button>button>.pn-button-bg,pn-teaser-card .pn-teaser-card__container__content__cta>pn-button>a>.pn-button-bg{transition:0.4s ease-in-out}@media screen and (min-width: 768px){pn-teaser-card .pn-teaser-card__container__content__cta>pn-button{width:fit-content}}pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:500;font-size:1.6rem;text-decoration:none;color:#005d92}pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated pn-icon svg{transition:0.3s ease-in-out;position:relative;left:-0.3rem}pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated pn-icon svg path{fill:#005d92}pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated[target=_blank]:not(.pn-button):after{display:none}pn-teaser-card[data-card-color=coral]>.pn-teaser-card__container{background-color:#fdefee}pn-teaser-card[data-card-color=green]>.pn-teaser-card__container{background-color:#dcf6e7}pn-teaser-card[data-card-color=blue]>.pn-teaser-card__container{background-color:#effbff}pn-teaser-card[data-card-color=blue50]>.pn-teaser-card__container{background-color:#e0f8ff}pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container{background-color:#00a0d6}pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__label,pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__heading,pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__preamble,pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container .pn-teaser-card__container__content__cta .secondary-link--animated{color:#ffffff}pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container .secondary-link--animated>pn-icon>svg>path{fill:#ffffff}pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container{background-color:#0d234b}pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__heading{color:#f06365}pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__label,pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__preamble,pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container .pn-teaser-card__container__content__cta .secondary-link--animated{color:#ffffff}pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container .secondary-link--animated>pn-icon>svg>path{fill:#ffffff}pn-teaser-card[data-card-color=white]>.pn-teaser-card__container{background-color:#ffffff}.teasercardlistblock .teasercardblock.has-bg{background-color:transparent;background:transparent}@media screen and (min-width: 1200px){.onequarterwidth .pn-teaser-card__container__content__text__container__label{margin-bottom:0.8rem}}.onethirdwidth>pn-teaser-card .pn-teaser-card__container__image__container--no-image,.onequarterwidth>pn-teaser-card .pn-teaser-card__container__image__container--no-image{padding-top:2.4rem}.onethirdwidth .pn-teaser-card__container__content__cta .secondary-link--animated,.onequarterwidth .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:400}.halfwidth>pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:400}.halfwidth>pn-teaser-card .pn-teaser-card__container__image__container--no-image{padding-top:2.4rem}@media screen and (min-width: 992px){.halfwidth>pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:500}}@media screen and (min-width: 1200px){.halfwidth>pn-teaser-card .pn-teaser-card__container__image__container--no-image{padding-top:4rem}.halfwidth>pn-teaser-card .pn-teaser-card__container__content{padding:0 4rem 4rem}.halfwidth>pn-teaser-card .pn-teaser-card__container__content__text__container__heading{font-weight:700;font-size:3.2rem;line-height:3.52rem}.halfwidth>pn-teaser-card .pn-teaser-card__container__content__text__container__preamble{font-weight:400;font-size:2rem;line-height:2.8rem}}@media screen and (min-width: 1640px){.halfwidth>pn-teaser-card .pn-teaser-card__container__image__container--no-image{padding-top:5.6rem}.halfwidth>pn-teaser-card .pn-teaser-card__container__content{padding:0 5.6rem 5.6rem}}.fullwidth>pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:400}.fullwidth>pn-teaser-card .pn-teaser-card__container__image__container--no-image{width:auto;padding-top:2.4rem}@media screen and (min-width: 768px){.fullwidth>pn-teaser-card{min-height:35rem}.fullwidth>pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:500}.fullwidth>pn-teaser-card .pn-teaser-card__container{flex-direction:row}.fullwidth>pn-teaser-card .pn-teaser-card__container__content{align-self:center;gap:2.4rem;padding:3.2rem 3.2rem 3.2rem 2.4rem}.fullwidth>pn-teaser-card .pn-teaser-card__container__image__container>[slot=illustration]{border-top-left-radius:2.4rem;border-bottom-left-radius:2.4rem;clip-path:ellipse(100% 100% at 0% 50%)}.fullwidth>pn-teaser-card .pn-teaser-card__container__image__container>[slot=illustration]>picture>img{height:100%;object-fit:cover}}@media screen and (min-width: 1200px){.fullwidth>pn-teaser-card{min-height:52rem}.fullwidth>pn-teaser-card .pn-teaser-card__container__content{padding:4rem 4rem 4rem 3.2rem}.fullwidth>pn-teaser-card .pn-teaser-card__container__content__text__container__heading{font-weight:700;font-size:4.8rem;line-height:5.28rem}.fullwidth>pn-teaser-card .pn-teaser-card__container__content__text__container__preamble{font-size:2rem;line-height:2.8rem}}@media screen and (min-width: 768px){.fullwidth pn-teaser-card[data-card-alignment=right] .pn-teaser-card__container{flex-direction:row-reverse}.fullwidth pn-teaser-card[data-card-alignment=right] .pn-teaser-card__container__content{padding:3.2rem 2.4rem 3.2rem 3.2rem}.fullwidth pn-teaser-card[data-card-alignment=right] .pn-teaser-card__container__image__container>[slot=illustration]{border-bottom-right-radius:2.4rem;clip-path:ellipse(100% 100% at 100% 50%)}}@media screen and (min-width: 1200px){.fullwidth pn-teaser-card[data-card-alignment=right] .pn-teaser-card__container__content{padding:4rem 3.2rem 4rem 4rem}}pn-teaser-card.teaser-card--hover-effect:hover{cursor:pointer}pn-teaser-card.teaser-card--hover-effect:hover .pn-teaser-card__container__image__container [slot=illustration] picture>img{transform:scale(1.02);filter:brightness(0.85)}pn-teaser-card.teaser-card--hover-effect:hover .secondary-link--animated{text-decoration:underline}pn-teaser-card.teaser-card--hover-effect:hover .secondary-link--animated pn-icon svg{left:0}pn-teaser-card.teaser-card--hover-effect:hover pn-button button .pn-button-bg,pn-teaser-card.teaser-card--hover-effect:hover pn-button a .pn-button-bg{background-color:#0d234b}pn-teaser-card.teaser-card--hover-effect:hover[data-card-color=blue900] pn-button button .pn-button-bg,pn-teaser-card.teaser-card--hover-effect:hover[data-card-color=blue900] pn-button a .pn-button-bg{background-color:#00a0d6}";const c=r;const _=class{constructor(a){e(this,a);this.text=null;this.heading=null;this.label=null;this.dataCardColor="coral";this.dataCardAlignment="left";this.hasCtaSlotContent=false;this.hasIllustrationSlot=true}get hostElement(){return a(this)}componentWillLoad(){this.hasCtaSlotContent=!!this.hostElement.querySelector('[slot="cta"]');this.hasIllustrationSlot=!!this.hostElement.querySelector('[slot="illustration"]')}render(){const e=this.label?.toUpperCase();return t(n,{key:"fdbbca9a340be605fab4928fd899e2ed7d6da987"},t("slot",{key:"73c277568a6552fc2cdad9449c5805198f6c4c39",name:"clickable-block-wrapper"}),t("div",{key:"263a5919c76eb373958d3ef92aa90ed67656d25e",class:"pn-teaser-card__container"},t("div",{key:"11cd5bc0d913acc378f960ec4d3baf0c7d3ecc99",class:`pn-teaser-card__container__image__container ${!this.hasIllustrationSlot?"pn-teaser-card__container__image__container--no-image":""}`},t("slot",{key:"71893f8f45c0275c68c59768582a663737fd5eea",name:"illustration"})),t("div",{key:"99a874f3c2a22983edcab63a018050d47cbdc5d0",class:"pn-teaser-card__container__content"},t("div",{key:"451ae56adec502481416822c169a01774fa262aa",class:"pn-teaser-card__container__content__text__container"},e&&t("span",{key:"2dfcef1bf94c1caea50c0f86263fea71713bf572",class:"pn-teaser-card__container__content__text__container__label"},e),t("h2",{key:"bd796379bb1bb106aea2de582df537a804f4c415",class:"pn-teaser-card__container__content__text__container__heading"},this.heading),t("p",{key:"ec25bea0041371fb67bb414cbc731d46234b118a",class:"pn-teaser-card__container__content__text__container__preamble"},this.text)),this.hasCtaSlotContent&&t("div",{key:"6ebbe23c0584a63325e2faff4eb3979f804869aa",class:"pn-teaser-card__container__content__cta"},t("slot",{key:"0a87639586c866e4e2439c67951362abe7a2f26d",name:"cta"})))))}};_.style=c;export{_ as pn_teaser_card};
|
|
2
|
+
//# sourceMappingURL=p-73db2c9c.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["pnTeaserCardCss","PnTeaserCardStyle0","PnTeaserCard","labelToCapitals","this","label","toUpperCase","componentWillLoad","hasCtaSlotContent","hostElement","querySelector","hasIllustrationSlot","render","h","Host","key","name","class","heading","text"],"sources":["src/components/cards/pn-teaser-card/pn-teaser-card.scss?tag=pn-teaser-card","src/components/cards/pn-teaser-card/pn-teaser-card.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\n$teaser-card-media-tablet: 768px; // 768px\n$teaser-card-media-desktop: 1200px; //1200px\n$teaser-card-media-large-desktop: 1640px; //1640\n\n//making pn wrapping link clickable over card image\n.block.teasercardblock {\n a[data-block-clickable-link='true'] {\n z-index: 1;\n }\n}\n\n//mobile first\npn-teaser-card {\n width: 100%;\n height: 100%;\n display: flex;\n\n .pn-teaser-card__container {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n border-radius: 2.4rem;\n width: 100%;\n }\n\n .pn-teaser-card__container__image__container {\n width: 100%;\n position: relative;\n\n & > [slot='illustration'] {\n clip-path: ellipse(100% 90% at 50% 0%);\n height: 100%;\n overflow: hidden;\n border-top-left-radius: 2.4rem;\n border-top-right-radius: 2.4rem;\n\n & > picture > img {\n width: 100%;\n height: auto;\n transition: 0.4s ease-in-out;\n transform: scale(1);\n aspect-ratio: 16/9;\n object-fit: cover;\n object-position: 50% 0;\n }\n }\n }\n\n .pn-teaser-card__container__content {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n flex: 1 1 100%;\n gap: 3.2rem;\n padding: 2.4rem 2.4rem;\n padding-top: 0;\n }\n\n .pn-teaser-card__container__content__text__container__heading {\n font-weight: 700;\n font-size: 2.4rem;\n line-height: 2.64rem;\n margin-bottom: 0;\n }\n\n .pn-teaser-card__container__content__text__container__preamble {\n padding-top: 1.6rem;\n font-weight: 400;\n font-size: 1.6rem;\n line-height: 2.24rem;\n margin-bottom: 0;\n }\n\n .pn-teaser-card__container__content__text__container__label {\n display: block;\n margin-bottom: 1.6rem;\n font-weight: 400;\n font-size: 1.2rem;\n line-height: 140%;\n }\n\n .pn-teaser-card__container__content__cta {\n & > pn-button {\n align-self: flex-end;\n width: 100%;\n\n & a:hover {\n text-decoration: none;\n }\n\n & > button,\n & > a {\n & > .pn-button-bg {\n transition: 0.4s ease-in-out;\n }\n }\n\n @media screen and (min-width: $teaser-card-media-tablet) {\n width: fit-content;\n }\n }\n\n .secondary-link--animated {\n font-weight: 500;\n font-size: 1.6rem;\n text-decoration: none;\n color: $blue700;\n\n pn-icon svg {\n transition: 0.3s ease-in-out;\n position: relative;\n left: -0.3rem;\n\n path {\n fill: $blue700;\n }\n }\n\n &[target='_blank']:not(.pn-button):after {\n display: none;\n }\n }\n }\n}\n\n//colors\npn-teaser-card[data-card-color='coral'] {\n & > .pn-teaser-card__container {\n background-color: $coral50;\n }\n}\n\npn-teaser-card[data-card-color='green'] {\n & > .pn-teaser-card__container {\n background-color: $green50;\n }\n}\n\npn-teaser-card[data-card-color='blue'] {\n & > .pn-teaser-card__container {\n background-color: $blue25;\n }\n}\n\npn-teaser-card[data-card-color='blue50'] {\n & > .pn-teaser-card__container {\n background-color: $blue50;\n }\n}\n\npn-teaser-card[data-card-color='blue400'] {\n & > .pn-teaser-card__container {\n background-color: $blue400;\n\n .pn-teaser-card__container__content__text__container__label,\n .pn-teaser-card__container__content__text__container__heading,\n .pn-teaser-card__container__content__text__container__preamble,\n .pn-teaser-card__container__content__cta .secondary-link--animated {\n color: $white;\n }\n\n .secondary-link--animated {\n & > pn-icon > svg > path {\n fill: $white;\n }\n }\n }\n}\n\npn-teaser-card[data-card-color='blue900'] {\n & > .pn-teaser-card__container {\n background-color: $blue900;\n .pn-teaser-card__container__content__text__container__heading {\n color: $coral400;\n }\n\n .pn-teaser-card__container__content__text__container__label,\n .pn-teaser-card__container__content__text__container__preamble,\n .pn-teaser-card__container__content__cta .secondary-link--animated {\n color: $white;\n }\n\n .secondary-link--animated {\n & > pn-icon > svg > path {\n fill: $white;\n }\n }\n }\n}\n\npn-teaser-card[data-card-color='white'] {\n & > .pn-teaser-card__container {\n background-color: $white;\n }\n}\n\n//color override when in a listblock\n.teasercardlistblock {\n .teasercardblock.has-bg {\n background-color: transparent;\n background: transparent;\n }\n}\n\n// variants\n\n.onequarterwidth {\n .pn-teaser-card__container__content__text__container__label {\n @media screen and (min-width: $teaser-card-media-desktop) {\n margin-bottom: 0.8rem;\n }\n }\n}\n\n.onethirdwidth,\n.onequarterwidth {\n & > pn-teaser-card {\n .pn-teaser-card__container__image__container--no-image {\n padding-top: 2.4rem;\n }\n }\n\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 400;\n }\n }\n}\n\n.halfwidth {\n & > pn-teaser-card {\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 400;\n }\n }\n\n .pn-teaser-card__container__image__container--no-image {\n padding-top: 2.4rem;\n }\n\n @media screen and (min-width: 992px) {\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 500;\n }\n }\n }\n\n @media screen and (min-width: $teaser-card-media-desktop) {\n .pn-teaser-card__container__image__container--no-image {\n padding-top: 4rem;\n }\n\n .pn-teaser-card__container__content {\n padding: 0 4rem 4rem;\n }\n\n .pn-teaser-card__container__content__text__container__heading {\n font-weight: 700;\n font-size: 3.2rem;\n line-height: 3.52rem;\n }\n\n .pn-teaser-card__container__content__text__container__preamble {\n font-weight: 400;\n font-size: 2rem;\n line-height: 2.8rem;\n }\n }\n\n @media screen and (min-width: $teaser-card-media-large-desktop) {\n .pn-teaser-card__container__image__container--no-image {\n padding-top: 5.6rem;\n }\n\n .pn-teaser-card__container__content {\n padding: 0 5.6rem 5.6rem;\n }\n }\n }\n}\n\n.fullwidth {\n & > pn-teaser-card {\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 400;\n }\n }\n\n .pn-teaser-card__container__image__container--no-image {\n width: auto;\n padding-top: 2.4rem;\n }\n\n @media screen and (min-width: $teaser-card-media-tablet) {\n min-height: 35rem;\n\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 500;\n }\n }\n\n .pn-teaser-card__container {\n flex-direction: row;\n }\n\n .pn-teaser-card__container__content {\n align-self: center;\n gap: 2.4rem;\n padding: 3.2rem 3.2rem 3.2rem 2.4rem;\n }\n\n .pn-teaser-card__container__image__container {\n & > [slot='illustration'] {\n border-top-left-radius: 2.4rem;\n border-bottom-left-radius: 2.4rem;\n clip-path: ellipse(100% 100% at 0% 50%);\n\n & > picture > img {\n height: 100%;\n object-fit: cover;\n }\n }\n }\n }\n\n @media screen and (min-width: $teaser-card-media-desktop) {\n min-height: 52rem;\n\n .pn-teaser-card__container__content {\n padding: 4rem 4rem 4rem 3.2rem;\n }\n\n .pn-teaser-card__container__content__text__container__heading {\n font-weight: 700;\n font-size: 4.8rem;\n line-height: 5.28rem;\n }\n\n .pn-teaser-card__container__content__text__container__preamble {\n font-size: 2rem;\n line-height: 2.8rem;\n }\n }\n }\n\n pn-teaser-card[data-card-alignment='right'] {\n @media screen and (min-width: $teaser-card-media-tablet) {\n .pn-teaser-card__container {\n flex-direction: row-reverse;\n }\n\n .pn-teaser-card__container__content {\n padding: 3.2rem 2.4rem 3.2rem 3.2rem;\n }\n\n .pn-teaser-card__container__image__container {\n & > [slot='illustration'] {\n border-bottom-right-radius: 2.4rem;\n clip-path: ellipse(100% 100% at 100% 50%);\n }\n }\n }\n\n @media screen and (min-width: $teaser-card-media-desktop) {\n .pn-teaser-card__container__content {\n padding: 4rem 3.2rem 4rem 4rem;\n }\n }\n }\n}\n\n//effect class\npn-teaser-card.teaser-card--hover-effect {\n &:hover {\n cursor: pointer;\n .pn-teaser-card__container__image__container {\n & [slot='illustration'] {\n & picture > img {\n transform: scale(1.02);\n filter: brightness(0.85);\n }\n }\n }\n\n .secondary-link--animated {\n text-decoration: underline;\n\n pn-icon svg {\n left: 0;\n }\n }\n\n pn-button {\n button,\n a {\n .pn-button-bg {\n background-color: $blue900;\n }\n }\n }\n\n &[data-card-color='blue900'] {\n pn-button {\n button,\n a {\n .pn-button-bg {\n background-color: $blue400;\n }\n }\n }\n }\n }\n}\n","import { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\n@Component({\n tag: 'pn-teaser-card',\n styleUrl: 'pn-teaser-card.scss',\n})\nexport class PnTeaserCard {\n @Element() hostElement: HTMLElement;\n //props\n @Prop() text: string = null;\n @Prop() heading: string = null;\n @Prop() label?: string = null;\n @Prop({ reflect: true }) dataCardColor: string = 'coral';\n @Prop({ reflect: true }) dataCardAlignment: string = 'left';\n\n labelToCapitals = this.label?.toUpperCase();\n\n @State() hasCtaSlotContent: boolean = false;\n @State() hasIllustrationSlot: boolean = true;\n\n componentWillLoad() {\n this.hasCtaSlotContent = !!this.hostElement.querySelector('[slot=\"cta\"]');\n this.hasIllustrationSlot = !!this.hostElement.querySelector('[slot=\"illustration\"]');\n }\n\n //render\n render() {\n return (\n <Host>\n <slot name=\"clickable-block-wrapper\" />\n <div class=\"pn-teaser-card__container\">\n <div class={`pn-teaser-card__container__image__container ${!this.hasIllustrationSlot ? 'pn-teaser-card__container__image__container--no-image' : ''}`}>\n <slot name=\"illustration\" />\n </div>\n <div class=\"pn-teaser-card__container__content\">\n <div class=\"pn-teaser-card__container__content__text__container\">\n {this.labelToCapitals && <span class=\"pn-teaser-card__container__content__text__container__label\">{this.labelToCapitals}</span>}\n <h2 class=\"pn-teaser-card__container__content__text__container__heading\">{this.heading}</h2>\n <p class=\"pn-teaser-card__container__content__text__container__preamble\">{this.text}</p>\n </div>\n {this.hasCtaSlotContent && (\n <div class=\"pn-teaser-card__container__content__cta\">\n <slot name=\"cta\" />\n </div>\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"yDAAA,MAAMA,EAAkB,i0RACxB,MAAAC,EAAeD,E,MCKFE,EAAY,M,mCAGA,K,aACG,K,WACD,K,mBACwB,Q,uBACI,O,uBAIf,M,yBACE,I,kCAHxCC,gBAAkBC,KAAKC,OAAOC,cAK9B,iBAAAC,GACEH,KAAKI,oBAAsBJ,KAAKK,YAAYC,cAAc,gBAC1DN,KAAKO,sBAAwBP,KAAKK,YAAYC,cAAc,wB,CAI9D,MAAAE,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,QAAAE,IAAA,2CAAMC,KAAK,4BACXH,EAAA,OAAAE,IAAA,2CAAKE,MAAM,6BACTJ,EAAA,OAAAE,IAAA,2CAAKE,MAAO,gDAAgDb,KAAKO,oBAAsB,wDAA0D,MAC/IE,EAAA,QAAAE,IAAA,2CAAMC,KAAK,kBAEbH,EAAA,OAAAE,IAAA,2CAAKE,MAAM,sCACTJ,EAAA,OAAAE,IAAA,2CAAKE,MAAM,uDACRb,KAAKD,iBAAmBU,EAAA,QAAAE,IAAA,2CAAME,MAAM,8DAA8Db,KAAKD,iBACxGU,EAAA,MAAAE,IAAA,2CAAIE,MAAM,gEAAgEb,KAAKc,SAC/EL,EAAA,KAAAE,IAAA,2CAAGE,MAAM,iEAAiEb,KAAKe,OAEhFf,KAAKI,mBACJK,EAAA,OAAAE,IAAA,2CAAKE,MAAM,2CACTJ,EAAA,QAAAE,IAAA,2CAAMC,KAAK,W","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["pnTeaserCardCss","PnTeaserCardStyle0","PnTeaserCard","componentWillLoad","this","hasCtaSlotContent","hostElement","querySelector","hasIllustrationSlot","render","labelToCapitals","label","toUpperCase","h","Host","key","name","class","heading","text"],"sources":["src/components/cards/pn-teaser-card/pn-teaser-card.scss?tag=pn-teaser-card","src/components/cards/pn-teaser-card/pn-teaser-card.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\n$teaser-card-media-tablet: 768px; // 768px\n$teaser-card-media-desktop: 1200px; //1200px\n$teaser-card-media-large-desktop: 1640px; //1640\n\n//making pn wrapping link clickable over card image\n.block.teasercardblock {\n a[data-block-clickable-link='true'] {\n z-index: 1;\n }\n}\n\n//mobile first\npn-teaser-card {\n width: 100%;\n height: 100%;\n display: flex;\n\n .pn-teaser-card__container {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n border-radius: 2.4rem;\n width: 100%;\n }\n\n .pn-teaser-card__container__image__container {\n width: 100%;\n position: relative;\n\n & > [slot='illustration'] {\n clip-path: ellipse(100% 90% at 50% 0%);\n height: 100%;\n overflow: hidden;\n border-top-left-radius: 2.4rem;\n border-top-right-radius: 2.4rem;\n\n & > picture > img {\n width: 100%;\n height: auto;\n transition: 0.4s ease-in-out;\n transform: scale(1);\n aspect-ratio: 16/9;\n object-fit: cover;\n object-position: 50% 0;\n }\n }\n }\n\n .pn-teaser-card__container__content {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n flex: 1 1 100%;\n gap: 3.2rem;\n padding: 2.4rem 2.4rem;\n padding-top: 0;\n }\n\n .pn-teaser-card__container__content__text__container__heading {\n font-weight: 700;\n font-size: 2.4rem;\n line-height: 2.64rem;\n margin-bottom: 0;\n }\n\n .pn-teaser-card__container__content__text__container__preamble {\n padding-top: 1.6rem;\n font-weight: 400;\n font-size: 1.6rem;\n line-height: 2.24rem;\n margin-bottom: 0;\n }\n\n .pn-teaser-card__container__content__text__container__label {\n display: block;\n margin-bottom: 1.6rem;\n font-weight: 400;\n font-size: 1.2rem;\n line-height: 140%;\n }\n\n .pn-teaser-card__container__content__cta {\n & > pn-button {\n align-self: flex-end;\n width: 100%;\n\n & a:hover {\n text-decoration: none;\n }\n\n & > button,\n & > a {\n & > .pn-button-bg {\n transition: 0.4s ease-in-out;\n }\n }\n\n @media screen and (min-width: $teaser-card-media-tablet) {\n width: fit-content;\n }\n }\n\n .secondary-link--animated {\n font-weight: 500;\n font-size: 1.6rem;\n text-decoration: none;\n color: $blue700;\n\n pn-icon svg {\n transition: 0.3s ease-in-out;\n position: relative;\n left: -0.3rem;\n\n path {\n fill: $blue700;\n }\n }\n\n &[target='_blank']:not(.pn-button):after {\n display: none;\n }\n }\n }\n}\n\n//colors\npn-teaser-card[data-card-color='coral'] {\n & > .pn-teaser-card__container {\n background-color: $coral50;\n }\n}\n\npn-teaser-card[data-card-color='green'] {\n & > .pn-teaser-card__container {\n background-color: $green50;\n }\n}\n\npn-teaser-card[data-card-color='blue'] {\n & > .pn-teaser-card__container {\n background-color: $blue25;\n }\n}\n\npn-teaser-card[data-card-color='blue50'] {\n & > .pn-teaser-card__container {\n background-color: $blue50;\n }\n}\n\npn-teaser-card[data-card-color='blue400'] {\n & > .pn-teaser-card__container {\n background-color: $blue400;\n\n .pn-teaser-card__container__content__text__container__label,\n .pn-teaser-card__container__content__text__container__heading,\n .pn-teaser-card__container__content__text__container__preamble,\n .pn-teaser-card__container__content__cta .secondary-link--animated {\n color: $white;\n }\n\n .secondary-link--animated {\n & > pn-icon > svg > path {\n fill: $white;\n }\n }\n }\n}\n\npn-teaser-card[data-card-color='blue900'] {\n & > .pn-teaser-card__container {\n background-color: $blue900;\n .pn-teaser-card__container__content__text__container__heading {\n color: $coral400;\n }\n\n .pn-teaser-card__container__content__text__container__label,\n .pn-teaser-card__container__content__text__container__preamble,\n .pn-teaser-card__container__content__cta .secondary-link--animated {\n color: $white;\n }\n\n .secondary-link--animated {\n & > pn-icon > svg > path {\n fill: $white;\n }\n }\n }\n}\n\npn-teaser-card[data-card-color='white'] {\n & > .pn-teaser-card__container {\n background-color: $white;\n }\n}\n\n//color override when in a listblock\n.teasercardlistblock {\n .teasercardblock.has-bg {\n background-color: transparent;\n background: transparent;\n }\n}\n\n// variants\n\n.onequarterwidth {\n .pn-teaser-card__container__content__text__container__label {\n @media screen and (min-width: $teaser-card-media-desktop) {\n margin-bottom: 0.8rem;\n }\n }\n}\n\n.onethirdwidth,\n.onequarterwidth {\n & > pn-teaser-card {\n .pn-teaser-card__container__image__container--no-image {\n padding-top: 2.4rem;\n }\n }\n\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 400;\n }\n }\n}\n\n.halfwidth {\n & > pn-teaser-card {\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 400;\n }\n }\n\n .pn-teaser-card__container__image__container--no-image {\n padding-top: 2.4rem;\n }\n\n @media screen and (min-width: 992px) {\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 500;\n }\n }\n }\n\n @media screen and (min-width: $teaser-card-media-desktop) {\n .pn-teaser-card__container__image__container--no-image {\n padding-top: 4rem;\n }\n\n .pn-teaser-card__container__content {\n padding: 0 4rem 4rem;\n }\n\n .pn-teaser-card__container__content__text__container__heading {\n font-weight: 700;\n font-size: 3.2rem;\n line-height: 3.52rem;\n }\n\n .pn-teaser-card__container__content__text__container__preamble {\n font-weight: 400;\n font-size: 2rem;\n line-height: 2.8rem;\n }\n }\n\n @media screen and (min-width: $teaser-card-media-large-desktop) {\n .pn-teaser-card__container__image__container--no-image {\n padding-top: 5.6rem;\n }\n\n .pn-teaser-card__container__content {\n padding: 0 5.6rem 5.6rem;\n }\n }\n }\n}\n\n.fullwidth {\n & > pn-teaser-card {\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 400;\n }\n }\n\n .pn-teaser-card__container__image__container--no-image {\n width: auto;\n padding-top: 2.4rem;\n }\n\n @media screen and (min-width: $teaser-card-media-tablet) {\n min-height: 35rem;\n\n .pn-teaser-card__container__content__cta {\n .secondary-link--animated {\n font-weight: 500;\n }\n }\n\n .pn-teaser-card__container {\n flex-direction: row;\n }\n\n .pn-teaser-card__container__content {\n align-self: center;\n gap: 2.4rem;\n padding: 3.2rem 3.2rem 3.2rem 2.4rem;\n }\n\n .pn-teaser-card__container__image__container {\n & > [slot='illustration'] {\n border-top-left-radius: 2.4rem;\n border-bottom-left-radius: 2.4rem;\n clip-path: ellipse(100% 100% at 0% 50%);\n\n & > picture > img {\n height: 100%;\n object-fit: cover;\n }\n }\n }\n }\n\n @media screen and (min-width: $teaser-card-media-desktop) {\n min-height: 52rem;\n\n .pn-teaser-card__container__content {\n padding: 4rem 4rem 4rem 3.2rem;\n }\n\n .pn-teaser-card__container__content__text__container__heading {\n font-weight: 700;\n font-size: 4.8rem;\n line-height: 5.28rem;\n }\n\n .pn-teaser-card__container__content__text__container__preamble {\n font-size: 2rem;\n line-height: 2.8rem;\n }\n }\n }\n\n pn-teaser-card[data-card-alignment='right'] {\n @media screen and (min-width: $teaser-card-media-tablet) {\n .pn-teaser-card__container {\n flex-direction: row-reverse;\n }\n\n .pn-teaser-card__container__content {\n padding: 3.2rem 2.4rem 3.2rem 3.2rem;\n }\n\n .pn-teaser-card__container__image__container {\n & > [slot='illustration'] {\n border-bottom-right-radius: 2.4rem;\n clip-path: ellipse(100% 100% at 100% 50%);\n }\n }\n }\n\n @media screen and (min-width: $teaser-card-media-desktop) {\n .pn-teaser-card__container__content {\n padding: 4rem 3.2rem 4rem 4rem;\n }\n }\n }\n}\n\n//effect class\npn-teaser-card.teaser-card--hover-effect {\n &:hover {\n cursor: pointer;\n .pn-teaser-card__container__image__container {\n & [slot='illustration'] {\n & picture > img {\n transform: scale(1.02);\n filter: brightness(0.85);\n }\n }\n }\n\n .secondary-link--animated {\n text-decoration: underline;\n\n pn-icon svg {\n left: 0;\n }\n }\n\n pn-button {\n button,\n a {\n .pn-button-bg {\n background-color: $blue900;\n }\n }\n }\n\n &[data-card-color='blue900'] {\n pn-button {\n button,\n a {\n .pn-button-bg {\n background-color: $blue400;\n }\n }\n }\n }\n }\n}\n","import { Component, Prop, h, Element, State, Host } from \"@stencil/core\";\n\n@Component({\n tag: 'pn-teaser-card',\n styleUrl: 'pn-teaser-card.scss'\n})\nexport class PnTeaserCard {\n @Element() hostElement: HTMLElement;\n //props\n @Prop() text: string = null;\n @Prop() heading: string = null;\n @Prop() label?: string = null;\n @Prop({ reflect: true }) dataCardColor: string = 'coral';\n @Prop({ reflect: true }) dataCardAlignment: string = 'left';\n\n @State() hasCtaSlotContent: boolean = false;\n @State() hasIllustrationSlot: boolean = true;\n\n componentWillLoad() {\n this.hasCtaSlotContent = !!this.hostElement.querySelector('[slot=\"cta\"]');\n this.hasIllustrationSlot = !!this.hostElement.querySelector('[slot=\"illustration\"]');\n }\n\n //render\n render() {\n const labelToCapitals = this.label?.toUpperCase();\n\n return (\n <Host>\n <slot name=\"clickable-block-wrapper\" />\n <div class=\"pn-teaser-card__container\">\n <div class={`pn-teaser-card__container__image__container ${!this.hasIllustrationSlot ? 'pn-teaser-card__container__image__container--no-image' : ''}`}>\n <slot name=\"illustration\" />\n </div>\n <div class=\"pn-teaser-card__container__content\">\n <div class=\"pn-teaser-card__container__content__text__container\">\n {labelToCapitals && <span class=\"pn-teaser-card__container__content__text__container__label\">{labelToCapitals}</span>}\n <h2 class=\"pn-teaser-card__container__content__text__container__heading\">{this.heading}</h2>\n <p class=\"pn-teaser-card__container__content__text__container__preamble\">{this.text}</p>\n </div>\n {this.hasCtaSlotContent && (\n <div class=\"pn-teaser-card__container__content__cta\">\n <slot name=\"cta\" />\n </div>\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"yDAAA,MAAMA,EAAkB,i0RACxB,MAAAC,EAAeD,E,MCKFE,EAAY,M,mCAGA,K,aACG,K,WACD,K,mBACwB,Q,uBACI,O,uBAEf,M,yBACE,I,kCAExC,iBAAAC,GACEC,KAAKC,oBAAsBD,KAAKE,YAAYC,cAAc,gBAC1DH,KAAKI,sBAAwBJ,KAAKE,YAAYC,cAAc,wB,CAI9D,MAAAE,GACE,MAAMC,EAAkBN,KAAKO,OAAOC,cAEpC,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,QAAAE,IAAA,2CAAMC,KAAK,4BACXH,EAAA,OAAAE,IAAA,2CAAKE,MAAM,6BACTJ,EAAA,OAAAE,IAAA,2CAAKE,MAAO,gDAAgDb,KAAKI,oBAAsB,wDAA0D,MAC/IK,EAAA,QAAAE,IAAA,2CAAMC,KAAK,kBAEbH,EAAA,OAAAE,IAAA,2CAAKE,MAAM,sCACTJ,EAAA,OAAAE,IAAA,2CAAKE,MAAM,uDACRP,GAAmBG,EAAA,QAAAE,IAAA,2CAAME,MAAM,8DAA8DP,GAC9FG,EAAA,MAAAE,IAAA,2CAAIE,MAAM,gEAAgEb,KAAKc,SAC/EL,EAAA,KAAAE,IAAA,2CAAGE,MAAM,iEAAiEb,KAAKe,OAEhFf,KAAKC,mBACJQ,EAAA,OAAAE,IAAA,2CAAKE,MAAM,2CACTJ,EAAA,QAAAE,IAAA,2CAAMC,KAAK,W","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as t,b as a}from"./p-06555615.js";export{s as setNonce}from"./p-06555615.js";import{g as n}from"./p-e1255160.js";var o=()=>{{r(t.prototype)}const a=import.meta.url;const n={};if(a!==""){n.resourcesUrl=new URL(".",a).href}return e(n)};var r=e=>{const t=e.cloneNode;e.cloneNode=function(e){if(this.nodeName==="TEMPLATE"){return t.call(this,e)}const a=t.call(this,false);const n=this.childNodes;if(e){for(let e=0;e<n.length;e++){if(n[e].nodeType!==2){a.appendChild(n[e].cloneNode(true))}}}return a}};o().then((async e=>{await n();return a(JSON.parse('[["p-b765e4a9",[[4,"pn-marketweb-siteheader",{"market":[1537],"language":[1537],"siteid":[1],"environment":[1537],"userToken":[1,"user-token"],"userFullname":[1,"user-fullname"],"userLoggedin":[516,"user-loggedin"],"endpoint":[1],"hideSiteSelector":[1540,"hide-site-selector"],"hideHomeMenuItem":[1540,"hide-home-menu-item"],"hideLanguageSelector":[1540,"hide-language-selector"],"hideSearch":[1540,"hide-search"],"hideLogin":[1540,"hide-login"],"showProfileSelection":[1540,"show-profile-selection"],"showUnifiedLogin":[4,"show-unified-login"],"siteDomainInUrls":[4,"site-domain-in-urls"],"AutocompleteEndpoint":[1,"autocomplete-endpoint"],"sessionForward":[4,"session-forward"],"cache":[4],"searchPlaceholder":[1,"search-placeholder"],"spaMode":[4,"spa-mode"],"checkUserLoggedInStateInterval":[2,"check-user-logged-in-state-interval"],"pageId":[1,"page-id"],"i18n":[32],"gotData":[32],"fetchingData":[32],"homePageLink":[32],"menuItems":[32],"siteDefinition":[32],"search":[32],"siteSelector":[32],"languageSelector":[32],"languageOptions":[32],"loginDialog":[32],"minimizeSearch":[32],"loggedIn":[32]},[[0,"setLanguage","onLanguageSelectorChange"],[0,"loginStateChange","onLoginStateChange"],[9,"resize","handleResize"]],{"language":["onLanguageChange"],"market":["onMarketChange"]}]]],["p-63505736",[[0,"pn-proxio-findprice",{"endpoint":[1025],"language":[1025],"market":[1025],"showMedium":[4,"show-medium"],"showInternational":[4,"show-international"],"maxAbroadKg":[2,"max-abroad-kg"],"weightListName":[1,"weight-list-name"],"cache":[4],"filteredItems":[32],"weight":[32],"weightvalue":[32],"countrycodevalue":[32],"sizecategory":[32],"data":[32]},null,{"market":["setState"],"language":["setState"],"sizecategory":["filterItems"],"weightvalue":["filterItems"],"countrycodevalue":["filterItems"]}]]],["p-4372d10e",[[0,"pn-find-price",{"source":[1],"language":[1025],"market":[1025],"filteredItems":[32],"weight":[32],"weightvalue":[32],"sourceData":[32],"sizecategory":[32]},null,{"market":["setState"],"language":["setState"],"sizecategory":["filterItems"],"weightvalue":["filterItems"]}]]],["p-796ebfee",[[0,"pn-find-service-and-price",{"source":[1],"language":[1025],"market":[1025],"filteredItems":[32],"postagetype":[32],"weight":[32],"weightvalue":[32],"deliveryscope":[32],"sourceData":[32]},null,{"market":["setState"],"language":["setState"],"postagetype":["filterItems"],"deliveryscope":["filterItems"],"weightvalue":["filterItems"]}]]],["p-721598b8",[[4,"pn-product-pricelist",{"source":[1],"language":[1025],"market":[1025],"productid":[1],"filteredItems":[32],"sourceData":[32],"gotData":[32],"loading":[32],"postagetype":[32],"weight":[32],"weightvalue":[32]},null,{"market":["setState"],"language":["setState"],"postagetype":["filterItems"],"weightvalue":["filterItems"]}]]],["p-7b05d7c7",[[0,"pn-proxio-pricegroup",{"endpoint":[1025],"language":[1],"market":[1],"tariffid":[1],"cache":[4],"activeWeightIndex":[32],"data":[32],"i18n":[32]},[[0,"activeWeightIndex","setActiveWeightIndex"],[0,"language","setLanguage"]]]]],["p-f0568315",[[0,"pn-product-pricelist-result",{"item":[1040],"description":[16],"shownitems":[16],"showMeasurement":[4,"show-measurement"],"weightText":[32]},null,{"item":["composeItems"]}]]],["p-e5345c69",[[4,"pn-marketweb-sitefooter",{"market":[1537],"language":[1537],"environment":[1537],"endpoint":[1],"siteDomainInUrls":[4,"site-domain-in-urls"],"cache":[4],"theme":[513],"backgroundcolor":[513],"showSwan":[4,"show-swan"],"siteDefinition":[32],"footerContent":[32],"i18n":[32],"gotData":[32],"fetchingData":[32]},null,{"language":["onLanguageChange"],"market":["onMarketChange"]}]]],["p-c5856c0b",[[4,"pn-media-block",{"blockHeight":[1,"block-height"],"imageSrc":[1,"image-src"],"imageSrcSmallScreenFormat":[1,"image-src-small-screen-format"],"imageAltText":[1,"image-alt-text"],"videoSrc":[1,"video-src"],"parallaxScroll":[4,"parallax-scroll"],"showOverlayLayer":[4,"show-overlay-layer"],"customOverlayBackground":[1,"custom-overlay-background"],"animateOverlayBackground":[4,"animate-overlay-background"],"scrollSnapBlock":[4,"scroll-snap-block"],"fixedBackground":[4,"fixed-background"],"blockHeading":[1,"block-heading"],"blockHeadingLevel":[2,"block-heading-level"],"blockPreamble":[1,"block-preamble"],"pnPlayOnScrollObserverOptions":[32],"calculatedBlockHeight":[32],"hasButtonSlot":[32]}]]],["p-5ac23b38",[[0,"pn-multi-row-connected-dropdown",{"dropdownData":[1,"dropdown-data"],"languageCode":[1,"language-code"],"label":[1],"firstDropdownLabel":[1,"first-dropdown-label"],"secondDropdownLabel":[1,"second-dropdown-label"],"dropdownPlaceholder":[1,"dropdown-placeholder"],"addRowText":[1,"add-row-text"],"inputFildLabel":[1,"input-fild-label"],"inputFildPlaceholder":[1,"input-fild-placeholder"],"dateButtonText":[1,"date-button-text"],"datePlaceholder":[1,"date-placeholder"],"dateDaysFromToday":[2,"date-days-from-today"],"allowMultipleRows":[4,"allow-multiple-rows"],"allowMultipleDates":[4,"allow-multiple-dates"],"startDateLabel":[1,"start-date-label"],"endDateLabel":[1,"end-date-label"],"multiDateHelperText":[1,"multi-date-helper-text"],"generateDatesButtonText":[1,"generate-dates-button-text"],"saveDateButtonText":[1,"save-date-button-text"],"noDatesText":[1,"no-dates-text"],"yearsToAddToEndDate":[2,"years-to-add-to-end-date"],"rowCount":[32],"rowData":[32],"formValues":[32]},[[0,"rowValueChange","predefinedValueChange"],[0,"deleteRowEvent","deleteRowEvent"]]]]],["p-781ef432",[[0,"pn-dropdown-with-multi-input-rows",{"dropdownData":[1,"dropdown-data"],"languageCode":[1,"language-code"],"firstDropdownLabel":[1,"first-dropdown-label"],"firstDropdownHelperText":[1,"first-dropdown-helper-text"],"secondDropdownLabel":[1,"second-dropdown-label"],"secondDropdownHelperText":[1,"second-dropdown-helper-text"],"secondDropdownMax":[2,"second-dropdown-max"],"deleteMultipleRowsWarningText":[1,"delete-multiple-rows-warning-text"],"confirmDeleteButtonText":[1,"confirm-delete-button-text"],"abortDeleteButtonText":[1,"abort-delete-button-text"],"fristInputLabel":[1,"frist-input-label"],"fristInputPlaceholder":[1,"frist-input-placeholder"],"firstInputMin":[2,"first-input-min"],"firstInputMax":[2,"first-input-max"],"firstInputWarning":[2,"first-input-warning"],"firstInputWarningText":[1,"first-input-warning-text"],"firstInputLowErrorText":[1,"first-input-low-error-text"],"firstInputHighErrorText":[1,"first-input-high-error-text"],"secondInputLabel":[1,"second-input-label"],"secondInputPlaceholder":[1,"second-input-placeholder"],"secondInputMin":[2,"second-input-min"],"secondInputMax":[2,"second-input-max"],"secondInputWarning":[2,"second-input-warning"],"secondInputWarningText":[1,"second-input-warning-text"],"secondInputLowErrorText":[1,"second-input-low-error-text"],"secondInputHighErrorText":[1,"second-input-high-error-text"],"dateLabel":[1,"date-label"],"datePlaceholder":[1,"date-placeholder"],"dateDaysFromToday":[2,"date-days-from-today"],"yearsToAddToEndDate":[2,"years-to-add-to-end-date"],"sumFieldLabel":[1,"sum-field-label"],"addRowText":[1,"add-row-text"],"elementHelperText":[1,"element-helper-text"],"dropdownDataRoot":[32],"secondDropdownArr":[32],"rowCount":[32],"rowData":[32],"formValues":[32],"firstValidDateString":[32],"lastValidDateString":[32],"rowSum":[32],"minRowCount":[32],"showDelteConfirm":[32]},[[0,"rowValueChange","predefinedValueChange"],[0,"firstInputChange","predefinedValueChange"],[0,"secondInputChange","predefinedValueChange"],[0,"deleteRowEvent","deleteRowEvent"]]]]],["p-acbe60df",[[0,"pn-address-autofill",{"market":[1537],"environment":[1537],"endpoint":[1],"cache":[4],"countryCode":[1,"country-code"],"postalCodeProps":[1,"postal-code-props"],"cityProps":[1,"city-props"],"streetAddressProps":[1,"street-address-props"],"streetNumberProps":[1,"street-number-props"],"streetAdressArr":[32],"streetNumberArr":[32],"city":[32],"postalCode":[32],"streetAddress":[32],"streetNumber":[32],"fullAddress":[32]}]]],["p-e9501c6f",[[4,"pn-dropdown-choice-adds-row",{"dropdownData":[1,"dropdown-data"],"languageCode":[1,"language-code"],"addRowDropdownName":[1,"add-row-dropdown-name"],"addRowDropdownPlaceholder":[1,"add-row-dropdown-placeholder"],"addRowDropdownLabel":[1,"add-row-dropdown-label"],"rowNameLabel":[1,"row-name-label"],"rowHasDropdown":[4,"row-has-dropdown"],"rowDropdownLabel":[1,"row-dropdown-label"],"rowDropdownPlaceholder":[1,"row-dropdown-placeholder"],"rowInputLabel":[1,"row-input-label"],"rowDeleteButtonText":[1,"row-delete-button-text"],"totalInputLimit":[2,"total-input-limit"],"inputLimitWarning":[1,"input-limit-warning"],"nextRowIndex":[32],"rowSelectDropdownArr":[32],"columnCount":[32],"showWarning":[32],"formValue":[32]},null,{"dropdownData":["dropdownDataWatcher"]}]]],["p-391970af",[[0,"pn-multiple-input",{"label":[1],"placeholder":[1],"addRowButtonText":[1,"add-row-button-text"],"rowData":[32]}]]],["p-ebaeee5e",[[0,"pn-parcel-tracker",{"formActionUrl":[1,"form-action-url"],"heading":[1],"buttonLabel":[1,"button-label"],"locale":[1],"placeholder":[1],"inputName":[1,"input-name"],"currentWidth":[32]},[[9,"resize","handleViewportSizeChange"]]]]],["p-95c10b7e",[[0,"pn-pex-pricefinder",{"language":[1],"currency":[1],"apiUrl":[1,"api-url"],"i18n":[32],"fromzip":[32],"tozip":[32],"weight":[32],"when":[32],"response":[32]},[[0,"language","setLanguage"]]]]],["p-40538914",[[0,"pn-share",{"link":[1],"language":[1537],"i18n":[32]},null,{"language":["onLanguageChange"]}]]],["p-34689c97",[[4,"pn-stats-info",{"heading":[1],"dataArray":[1,"data-array"],"backgroundUrl":[1,"background-url"],"myParsedArray":[32]},null,{"dataArray":["parseMyArrayProp"]}]]],["p-68aa55f7",[[4,"pn-animated-tile",{"toggled":[32],"transitionClassName":[32],"animateIcon":[32]},null,{"toggled":["onToggledHandler"]}]]],["p-586a1e3c",[[0,"pn-app-banner",{"appName":[1,"app-name"],"appDescription":[1,"app-description"],"ctaText":[1,"cta-text"],"appleStoreLink":[1,"apple-store-link"],"googleStoreLink":[1,"google-store-link"],"isClosed":[32],"storeLink":[32],"isLocalStorageAvailable":[32]}]]],["p-16f70311",[[4,"pn-bonus-progressbar",{"icon":[1],"heading":[1],"sumtext":[513],"theme":[513],"bonuspercentage":[1],"currency":[513],"value":[1538],"min":[1538],"max":[1538],"valuepercentage":[32],"progresspercentage":[32],"levelValues":[32],"currentLevelAdjustedValue":[32]},null,{"currentLevelAdjustedValue":["setValuePercentage"],"value":["setValuePercentage"],"min":["setValuePercentage"],"max":["setValuePercentage"]}]]],["p-a8220c88",[[0,"pn-bonus-progressbar-level",{"current":[516],"value":[1538],"bonuspercentage":[1537],"visualpercentage":[1538],"percentage":[32],"max":[32],"min":[32],"currency":[32]}]]],["p-56bd346e",[[0,"pn-breakpoints",{"breakPointClass":[1,"break-point-class"],"currentWidth":[32]},[[9,"resize","handleViewportSizeChange"]]]]],["p-1317587f",[[0,"pn-chart",{"labels":[1],"dataSets":[1,"data-sets"],"dataChartType":[8,"data-chart-type"],"myChartCtxRef":[32]},null,{"dataSets":["dataChangeHandler"],"labels":["labelsChangeHandler"]}]]],["p-190c671b",[[4,"pn-charts-card",{"header":[1],"highlight":[1],"preamble":[1],"label":[1],"source":[1],"sourceUrl":[1,"source-url"],"ctaLinkText":[1,"cta-link-text"],"openInNewWindow":[4,"open-in-new-window"]}]]],["p-fbc07c7a",[[4,"pn-cta-block",{"heading":[1],"bodyText":[1,"body-text"],"pnBackgroundColor":[1,"pn-background-color"],"isLarge":[4,"is-large"],"isCentered":[4,"is-centered"],"isSmall":[4,"is-small"],"contentTop":[4,"content-top"]}]]],["p-95e054fd",[[4,"pn-customernumber-selector",{"language":[1537],"open":[1540],"heading":[1],"description":[1],"i18n":[32]}]]],["p-09b9cc06",[[4,"pn-customernumber-selector-option",{"heading":[1],"description":[1],"url":[1]}]]],["p-d8a57eba",[[0,"pn-date-and-time",{"languageCode":[1,"language-code"],"dateAndTimeLabel":[1,"date-and-time-label"],"dateDaysFromToday":[2,"date-days-from-today"],"validTimeRangeMinutes":[2,"valid-time-range-minutes"],"errorMessage":[1,"error-message"],"dateHelperText":[1,"date-helper-text"],"timeHelperText":[1,"time-helper-text"],"disableWeekends":[4,"disable-weekends"],"datePlacehodler":[1,"date-placehodler"],"language":[32],"hourArr":[32],"minuteArr":[32],"formValue":[32],"invalidTimespan":[32],"selectedDate":[32],"selectedFromHour":[32],"selectedFromMin":[32],"selectedToHour":[32],"selectedToMin":[32],"firstValidDateString":[32],"lastValidDateString":[32]}]]],["p-fbe70284",[[4,"pn-hero-block-international",{"heading":[1],"subHeading":[1,"sub-heading"],"preamble":[1],"animateLogo":[4,"animate-logo"],"showSideLoader":[4,"show-side-loader"],"centeredLayout":[4,"centered-layout"]}]]],["p-e42f0fbe",[[0,"pn-line-shape"]]],["p-ade7ffcf",[[4,"pn-link-list",{"heading":[1],"label":[1],"preamble":[1],"url":[1],"showMoreLabel":[1,"show-more-label"],"showMoreUrl":[1,"show-more-url"]}]]],["p-c25acf85",[[0,"pn-marketweb-icon",{"symbol":[1],"small":[4],"color":[1]}]]],["p-2044eddc",[[1,"pn-marketweb-search",{"disabled":[4],"placeholder":[1],"inputid":[1],"name":[1],"autocomplete":[1],"list":[1],"value":[1],"label":[1],"loading":[4],"button":[1],"light":[4],"suggestionObserver":[32],"hasClonedInput":[32],"listSuggestion":[32]},[[0,"input","inputHandler"]]]]],["p-c0fd8e61",[[4,"pn-product-tile"]]],["p-90ba1d8e",[[4,"pn-profile-modal",{"heading":[1],"continueCtaText":[1,"continue-cta-text"],"choosenCompanyText":[1,"choosen-company-text"],"toText":[1,"to-text"],"chooseCustomerNumberText":[1,"choose-customer-number-text"],"isLoading":[32]},[[0,"urlSelected","onUrlSelected"]]]]],["p-c9f21ea3",[[4,"pn-profile-modal-customernumber",{"url":[513],"customernumber":[513],"selected":[516]}]]],["p-f62879f6",[[4,"pn-profile-modal-profile",{"heading":[513],"description":[513],"url":[513],"selected":[1028],"showCustomerNumbers":[516,"show-customer-numbers"],"pleaseSelectText":[513,"please-select-text"],"visible":[1540],"identifier":[32]}]]],["p-931d3a9b",[[4,"pn-profile-modal-type",{"typeid":[513],"name":[1025],"selected":[1028],"selectedprofile":[1025]},null,{"selected":["onSelectedChange"]}]]],["p-74203d3e",[[4,"pn-profile-selector",{"language":[1537],"returnUrl":[1,"return-url"],"heading":[1],"i18n":[32],"isLoading":[32],"numberOfProfiles":[32]}]]],["p-f2d0d0cc",[[0,"pn-profile-selector-option",{"heading":[1],"description":[1],"url":[1]}]]],["p-5a467ca6",[[4,"pn-quick-cta",{"heading":[1],"preamble":[1]}]]],["p-e4c7aaec",[[4,"pn-quote-card",{"quote":[1],"name":[1],"occupation":[1]}]]],["p-67d862ac",[[4,"pn-sidenav",{"language":[1],"navLabel":[1,"nav-label"],"i18n":[32]},[[0,"language","setLanguage"],[0,"openSubMenuLevelChange","onOpenSubMenuLevelChange"]]]]],["p-1535a09f",[[4,"pn-sidenav-level",{"level":[32],"levelId":[32],"isOpen":[32],"parentName":[32],"parentHref":[32],"parentLinkId":[32],"alignment":[32]},null,{"isOpen":["onOpen"]}]]],["p-6e9875e5",[[4,"pn-sidenav-link",{"name":[1],"href":[1],"target":[1],"linkid":[1],"icon":[1],"current":[4],"levelId":[32],"open":[32],"hasChildren":[32]}]]],["p-7021985c",[[4,"pn-sidenav-togglebutton",{"label":[1],"i18n":[32]}]]],["p-0a522476",[[4,"pn-spotlight",{"heading":[1],"preamble":[1],"isDynamic":[4,"is-dynamic"],"addDynamic":[32]}]]],["p-0247c553",[[4,"pn-teaser-card",{"text":[1],"heading":[1],"label":[1],"dataCardColor":[513,"data-card-color"],"dataCardAlignment":[513,"data-card-alignment"],"hasCtaSlotContent":[32],"hasIllustrationSlot":[32]}]]],["p-69ee0033",[[4,"pn-usp-promoter",{"heading":[1],"headingExtension":[1,"heading-extension"],"bodyText":[1,"body-text"],"backgroundGradient":[1,"background-gradient"],"fullWidth":[4,"full-width"],"rightAlign":[4,"right-align"],"hideMobileImage":[4,"hide-mobile-image"]}]]],["p-9776a1c5",[[0,"pn-proxio-findprice-result",{"item":[1040],"activeweight":[1026],"shownitems":[16],"Usp1":[1,"usp-1"],"Usp2":[1,"usp-2"],"Usp3":[1,"usp-3"],"description":[16],"showMeasurement":[4,"show-measurement"],"showInternational":[4,"show-international"],"selectedCountrycode":[1,"selected-countrycode"],"market":[1],"language":[1025],"weightText":[32],"linkId":[32],"shopLabel":[32],"shopUrl":[32],"shopId":[32],"i18n":[32]},null,{"item":["composeItems"],"activeweight":["getPriceString","getProductLink"]}]]],["p-2f779414",[[0,"pn-find-service-and-price-result",{"item":[1040],"shownitems":[16],"weightText":[32]},null,{"item":["composeItems"]}]]],["p-85d57c9d",[[0,"pn-multi-row-connected-dropdown-row",{"dropdownData":[1,"dropdown-data"],"languageCode":[1,"language-code"],"label":[1],"firstDropdownLabel":[1,"first-dropdown-label"],"secondDropdownLabel":[1,"second-dropdown-label"],"dropdownPlaceholder":[1,"dropdown-placeholder"],"addRowText":[1,"add-row-text"],"inputFildLabel":[1,"input-fild-label"],"inputFildPlaceholder":[1,"input-fild-placeholder"],"dateButtonText":[1,"date-button-text"],"datePlaceholder":[1,"date-placeholder"],"dateDaysFromToday":[2,"date-days-from-today"],"allowMultipleDates":[4,"allow-multiple-dates"],"startDateLabel":[1,"start-date-label"],"endDateLabel":[1,"end-date-label"],"multiDateHelperText":[1,"multi-date-helper-text"],"generateDatesButtonText":[1,"generate-dates-button-text"],"saveDateButtonText":[1,"save-date-button-text"],"noDatesText":[1,"no-dates-text"],"index":[2],"predefinedValue":[1,"predefined-value"],"yearsToAddToEndDate":[2,"years-to-add-to-end-date"],"buttonsArray":[32],"firstDropdownArr":[32],"secondDropdownArr":[32],"firstDropdownClass":[32],"secondDropdownClass":[32],"firstValidDateString":[32],"lastValidDateString":[32],"firstDropdownPlaceholder":[32],"secondDropdownPlaceholder":[32],"starDateValue":[32],"endDateValue":[32],"generatedDatesArr":[32],"selectedButtonValue":[32],"inputFieldValue":[32],"dateValue":[32],"daysArr":[32]},null,{"predefinedValue":["applyPredefinedValue"]}]]],["p-c696bedf",[[0,"pn-play-on-scroll",{"videoSrc":[1,"video-src"],"observerOptions":[16],"showOverlay":[4,"show-overlay"],"videoId":[32],"isManuallyPaused":[32],"isPaused":[32]}]]],["p-d40ff187",[[0,"pn-dropdown-with-multi-input-rows-row",{"languageCode":[1,"language-code"],"fristInputPlaceholder":[1,"frist-input-placeholder"],"firstInputMin":[2,"first-input-min"],"firstInputMax":[2,"first-input-max"],"firstInputWarning":[2,"first-input-warning"],"firstInputWarningText":[1,"first-input-warning-text"],"firstInputLowErrorText":[1,"first-input-low-error-text"],"firstInputHighErrorText":[1,"first-input-high-error-text"],"secondInputPlaceholder":[1,"second-input-placeholder"],"secondInputMin":[2,"second-input-min"],"secondInputMax":[2,"second-input-max"],"secondInputWarning":[2,"second-input-warning"],"secondInputWarningText":[1,"second-input-warning-text"],"secondInputLowErrorText":[1,"second-input-low-error-text"],"secondInputHighErrorText":[1,"second-input-high-error-text"],"dateLabel":[1,"date-label"],"datePlaceholder":[1,"date-placeholder"],"firstValidDate":[1,"first-valid-date"],"lastValidDate":[1,"last-valid-date"],"predefinedValue":[1,"predefined-value"],"rowIndex":[2,"row-index"],"minRowCount":[2,"min-row-count"],"showFirstInputWarning":[32],"showFirstInputLowError":[32],"showFirstInputHighError":[32],"showSecondInputWarning":[32],"showSecondInputLowError":[32],"showSecondInputHighError":[32],"firstInputValue":[32],"secondInputValue":[32],"dateValue":[32]},null,{"predefinedValue":["applyPredefinedValue"]}]]],["p-81b3e038",[[4,"pn-share-item",{"link":[1],"text":[1]}]]],["p-1bd5fa26",[[0,"pn-stats-info-data",{"format":[1],"formatStyle":[1,"format-style"],"startValue":[2,"start-value"],"data":[2],"unit":[1],"preamble":[1],"duration":[2],"index":[2],"hasBeenShown":[32],"compId":[32]},null,{"hasBeenShown":["watchStateHandlder"]}]]],["p-7b598d81",[[0,"pn-find-price-result",{"item":[1040],"shownitems":[16],"Usp1":[1,"usp-1"],"Usp2":[1,"usp-2"],"Usp3":[1,"usp-3"],"description":[16],"showMeasurement":[4,"show-measurement"],"weightText":[32],"linkId":[32],"shopLabel":[32],"shopUrl":[32],"shopId":[32]},null,{"item":["composeItems"]}]]],["p-370829c6",[[1,"pn-filter-checkbox",{"value":[520],"name":[1],"checkboxid":[1],"disabled":[4],"checked":[4],"indeterminate":[1028]},[[0,"change","handlechange"]]]]],["p-c224d7c4",[[4,"pn-mainnav-link",{"name":[1],"href":[1],"target":[1],"linkid":[1],"levelId":[32],"open":[32],"hasChildren":[32]}]]],["p-78fbc88c",[[4,"pn-site-footer",{"url":[1],"linktitle":[1],"theme":[513]}],[4,"pn-site-footer-col",{"theme":[513]}],[0,"pn-swan",{"licenseNumber":[1,"license-number"],"language":[1537],"linkTo":[1,"link-to"],"i18n":[32]},null,{"language":["onLanguageChange"]}]]],["p-9be27d72",[[4,"pn-choice-button",{"value":[520],"name":[1],"choiceid":[1],"type":[1],"disabled":[4],"checked":[4],"indeterminate":[1028]},[[0,"change","handlechange"]]]]],["p-1217d60f",[[0,"pn-product-tile-info",{"label":[1],"text":[1],"icon":[1]}],[0,"pn-product-tile-price",{"label":[1],"amount":[1],"currency":[1],"url":[1]}]]],["p-828449da",[[4,"pn-scroll",{"observerOptions":[16],"behaviourClasses":[1,"behaviour-classes"],"transitionDurationSeconds":[2,"transition-duration-seconds"],"shouldLoop":[4,"should-loop"],"intersectFunc":[16],"notIntersectFunc":[16],"compId":[32]}],[0,"pn-video-overlay",{"language":[1],"isPaused":[4,"is-paused"],"showOverlay":[4,"show-overlay"],"i18n":[32]},null,{"language":["onLanguageChange"]}]]],["p-b2dcce7c",[[0,"pn-marketweb-siteheader-login-linklist",{"heading":[1],"links":[16],"idNamespace":[1,"id-namespace"],"showUnifiedLogin":[4,"show-unified-login"]}]]],["p-1578e02e",[[4,"pn-titletag",{"icon":[1],"color":[1537]}]]],["p-9998c29d",[[0,"pn-marketweb-input",{"disabled":[4],"error":[1],"invalid":[4],"helpertext":[1],"label":[1],"placeholder":[1],"inputid":[1],"name":[1],"required":[4],"type":[1025],"autocomplete":[1],"valid":[4],"value":[1],"maxlength":[1],"min":[1],"max":[1],"step":[1],"pattern":[1],"showText":[32]}]]],["p-9a7abcee",[[0,"pn-marketweb-siteheader-unified-login",{"loggedIn":[4,"logged-in"],"myPageLabel":[1,"my-page-label"],"myPageUrl":[1,"my-page-url"],"logInLabel":[1,"log-in-label"]}],[0,"pn-marketweb-siteheader-login-links",{"loginDialog":[1040],"idNamespace":[1,"id-namespace"],"loggedin":[516],"username":[1],"showUnifiedLogin":[4,"show-unified-login"]},null,{"loginDialog":["init"]}],[0,"pn-marketweb-siteheader-login-profileselection",{"loginDialog":[1040],"endpoint":[1],"loggedin":[4],"idNamespace":[1,"id-namespace"],"heading":[1],"i18n":[16],"currentProfile":[1040],"profileoptions":[1040],"user":[32],"logoutLink":[32],"userName":[32],"userEmail":[32]}],[0,"pn-marketweb-siteheader-login-button",{"label":[1]}],[0,"pn-marketweb-siteheader-login-mypage-button",{"label":[1],"myPageUrl":[1,"my-page-url"]}]]],["p-4ea1409d",[[0,"pn-marketweb-siteheader-login",{"endpoint":[1],"token":[1],"i18n":[16],"siteUrl":[1,"site-url"],"emitEvents":[4,"emit-events"],"loginDialog":[1040],"fullname":[1],"loggedin":[4],"showProfileSelection":[1028,"show-profile-selection"],"showUnifiedLogin":[4,"show-unified-login"],"checkUserLoggedInStateInterval":[2,"check-user-logged-in-state-interval"],"environment":[1],"loginLinks":[32],"toggleButtonText":[32],"username":[32]},null,{"i18n":["init"],"loginDialog":["init"]}],[4,"pn-mainnav-level",{"label":[1537],"level":[32],"levelId":[32],"isOpen":[32],"parentName":[32],"parentHref":[32],"parentLinkId":[32],"listCount":[32],"alignment":[32]},null,{"label":["setState"],"isOpen":["onOpen"]}],[4,"pn-language-selector",{"value":[1537],"selectedLanguageName":[32],"options":[32],"i18n":[32]},null,{"value":["setSelectedLanguageName","setTranslations","onValueChange"]}],[0,"pn-language-selector-option",{"name":[1],"code":[1],"url":[1],"selected":[4],"currentLanguage":[1,"current-language"]}],[4,"pn-mainnav",{"market":[1],"language":[1],"navigationId":[1,"navigation-id"],"openMenu":[1028,"open-menu"],"navLabel":[1,"nav-label"]},[[0,"language","setLanguage"],[0,"market","setMarket"],[0,"menuLanguageChange","onLanguageChange"],[0,"setmenuopenstate","setMenuOpenState"],[0,"openMenuLevelChange","onOpenMenuLevelChange"]]],[4,"pn-mainnav-list",{"heading":[1],"linkCount":[32]}],[0,"pn-marketweb-siteheader-search",{"i18n":[8,"i-1-8n"],"showOnlyLink":[1028,"show-only-link"],"hideSearch":[1028,"hide-search"],"language":[1537],"siteid":[1],"search":[1040],"primary":[4],"icononly":[4],"autoCompleteOptions":[32]}],[4,"pn-site-selector",{"buttontext":[1537],"heading":[1537],"language":[1537],"i18n":[32]}],[0,"pn-site-selector-item",{"url":[1],"heading":[1],"description":[1],"newwindow":[4]}]]],["p-75a09bb2",[[4,"pn-proxio-productcard"],[0,"pn-proxio-productcard-description",{"heading":[1],"highlight":[1],"description":[1],"list":[1040]}],[0,"pn-proxio-productcard-information",{"label":[1],"information":[16]}],[0,"pn-proxio-productcard-pricelink",{"price":[1],"vatText":[1,"vat-text"],"link":[1],"linktext":[1]}]]],["p-609da67c",[[0,"pn-product-card-info",{"rulle":[1],"paket":[1],"label":[1],"text":[1]}],[0,"pn-product-card-price",{"label":[1],"amount":[1],"currency":[1],"note":[1],"url":[1],"service":[1],"linkid":[1]}],[4,"pn-product-card"]]]]'),e)}));
|
|
1
|
+
import{p as e,H as t,b as a}from"./p-06555615.js";export{s as setNonce}from"./p-06555615.js";import{g as n}from"./p-e1255160.js";var o=()=>{{r(t.prototype)}const a=import.meta.url;const n={};if(a!==""){n.resourcesUrl=new URL(".",a).href}return e(n)};var r=e=>{const t=e.cloneNode;e.cloneNode=function(e){if(this.nodeName==="TEMPLATE"){return t.call(this,e)}const a=t.call(this,false);const n=this.childNodes;if(e){for(let e=0;e<n.length;e++){if(n[e].nodeType!==2){a.appendChild(n[e].cloneNode(true))}}}return a}};o().then((async e=>{await n();return a(JSON.parse('[["p-b765e4a9",[[4,"pn-marketweb-siteheader",{"market":[1537],"language":[1537],"siteid":[1],"environment":[1537],"userToken":[1,"user-token"],"userFullname":[1,"user-fullname"],"userLoggedin":[516,"user-loggedin"],"endpoint":[1],"hideSiteSelector":[1540,"hide-site-selector"],"hideHomeMenuItem":[1540,"hide-home-menu-item"],"hideLanguageSelector":[1540,"hide-language-selector"],"hideSearch":[1540,"hide-search"],"hideLogin":[1540,"hide-login"],"showProfileSelection":[1540,"show-profile-selection"],"showUnifiedLogin":[4,"show-unified-login"],"siteDomainInUrls":[4,"site-domain-in-urls"],"AutocompleteEndpoint":[1,"autocomplete-endpoint"],"sessionForward":[4,"session-forward"],"cache":[4],"searchPlaceholder":[1,"search-placeholder"],"spaMode":[4,"spa-mode"],"checkUserLoggedInStateInterval":[2,"check-user-logged-in-state-interval"],"pageId":[1,"page-id"],"i18n":[32],"gotData":[32],"fetchingData":[32],"homePageLink":[32],"menuItems":[32],"siteDefinition":[32],"search":[32],"siteSelector":[32],"languageSelector":[32],"languageOptions":[32],"loginDialog":[32],"minimizeSearch":[32],"loggedIn":[32]},[[0,"setLanguage","onLanguageSelectorChange"],[0,"loginStateChange","onLoginStateChange"],[9,"resize","handleResize"]],{"language":["onLanguageChange"],"market":["onMarketChange"]}]]],["p-63505736",[[0,"pn-proxio-findprice",{"endpoint":[1025],"language":[1025],"market":[1025],"showMedium":[4,"show-medium"],"showInternational":[4,"show-international"],"maxAbroadKg":[2,"max-abroad-kg"],"weightListName":[1,"weight-list-name"],"cache":[4],"filteredItems":[32],"weight":[32],"weightvalue":[32],"countrycodevalue":[32],"sizecategory":[32],"data":[32]},null,{"market":["setState"],"language":["setState"],"sizecategory":["filterItems"],"weightvalue":["filterItems"],"countrycodevalue":["filterItems"]}]]],["p-4372d10e",[[0,"pn-find-price",{"source":[1],"language":[1025],"market":[1025],"filteredItems":[32],"weight":[32],"weightvalue":[32],"sourceData":[32],"sizecategory":[32]},null,{"market":["setState"],"language":["setState"],"sizecategory":["filterItems"],"weightvalue":["filterItems"]}]]],["p-796ebfee",[[0,"pn-find-service-and-price",{"source":[1],"language":[1025],"market":[1025],"filteredItems":[32],"postagetype":[32],"weight":[32],"weightvalue":[32],"deliveryscope":[32],"sourceData":[32]},null,{"market":["setState"],"language":["setState"],"postagetype":["filterItems"],"deliveryscope":["filterItems"],"weightvalue":["filterItems"]}]]],["p-721598b8",[[4,"pn-product-pricelist",{"source":[1],"language":[1025],"market":[1025],"productid":[1],"filteredItems":[32],"sourceData":[32],"gotData":[32],"loading":[32],"postagetype":[32],"weight":[32],"weightvalue":[32]},null,{"market":["setState"],"language":["setState"],"postagetype":["filterItems"],"weightvalue":["filterItems"]}]]],["p-7b05d7c7",[[0,"pn-proxio-pricegroup",{"endpoint":[1025],"language":[1],"market":[1],"tariffid":[1],"cache":[4],"activeWeightIndex":[32],"data":[32],"i18n":[32]},[[0,"activeWeightIndex","setActiveWeightIndex"],[0,"language","setLanguage"]]]]],["p-f0568315",[[0,"pn-product-pricelist-result",{"item":[1040],"description":[16],"shownitems":[16],"showMeasurement":[4,"show-measurement"],"weightText":[32]},null,{"item":["composeItems"]}]]],["p-e5345c69",[[4,"pn-marketweb-sitefooter",{"market":[1537],"language":[1537],"environment":[1537],"endpoint":[1],"siteDomainInUrls":[4,"site-domain-in-urls"],"cache":[4],"theme":[513],"backgroundcolor":[513],"showSwan":[4,"show-swan"],"siteDefinition":[32],"footerContent":[32],"i18n":[32],"gotData":[32],"fetchingData":[32]},null,{"language":["onLanguageChange"],"market":["onMarketChange"]}]]],["p-c5856c0b",[[4,"pn-media-block",{"blockHeight":[1,"block-height"],"imageSrc":[1,"image-src"],"imageSrcSmallScreenFormat":[1,"image-src-small-screen-format"],"imageAltText":[1,"image-alt-text"],"videoSrc":[1,"video-src"],"parallaxScroll":[4,"parallax-scroll"],"showOverlayLayer":[4,"show-overlay-layer"],"customOverlayBackground":[1,"custom-overlay-background"],"animateOverlayBackground":[4,"animate-overlay-background"],"scrollSnapBlock":[4,"scroll-snap-block"],"fixedBackground":[4,"fixed-background"],"blockHeading":[1,"block-heading"],"blockHeadingLevel":[2,"block-heading-level"],"blockPreamble":[1,"block-preamble"],"pnPlayOnScrollObserverOptions":[32],"calculatedBlockHeight":[32],"hasButtonSlot":[32]}]]],["p-5ac23b38",[[0,"pn-multi-row-connected-dropdown",{"dropdownData":[1,"dropdown-data"],"languageCode":[1,"language-code"],"label":[1],"firstDropdownLabel":[1,"first-dropdown-label"],"secondDropdownLabel":[1,"second-dropdown-label"],"dropdownPlaceholder":[1,"dropdown-placeholder"],"addRowText":[1,"add-row-text"],"inputFildLabel":[1,"input-fild-label"],"inputFildPlaceholder":[1,"input-fild-placeholder"],"dateButtonText":[1,"date-button-text"],"datePlaceholder":[1,"date-placeholder"],"dateDaysFromToday":[2,"date-days-from-today"],"allowMultipleRows":[4,"allow-multiple-rows"],"allowMultipleDates":[4,"allow-multiple-dates"],"startDateLabel":[1,"start-date-label"],"endDateLabel":[1,"end-date-label"],"multiDateHelperText":[1,"multi-date-helper-text"],"generateDatesButtonText":[1,"generate-dates-button-text"],"saveDateButtonText":[1,"save-date-button-text"],"noDatesText":[1,"no-dates-text"],"yearsToAddToEndDate":[2,"years-to-add-to-end-date"],"rowCount":[32],"rowData":[32],"formValues":[32]},[[0,"rowValueChange","predefinedValueChange"],[0,"deleteRowEvent","deleteRowEvent"]]]]],["p-781ef432",[[0,"pn-dropdown-with-multi-input-rows",{"dropdownData":[1,"dropdown-data"],"languageCode":[1,"language-code"],"firstDropdownLabel":[1,"first-dropdown-label"],"firstDropdownHelperText":[1,"first-dropdown-helper-text"],"secondDropdownLabel":[1,"second-dropdown-label"],"secondDropdownHelperText":[1,"second-dropdown-helper-text"],"secondDropdownMax":[2,"second-dropdown-max"],"deleteMultipleRowsWarningText":[1,"delete-multiple-rows-warning-text"],"confirmDeleteButtonText":[1,"confirm-delete-button-text"],"abortDeleteButtonText":[1,"abort-delete-button-text"],"fristInputLabel":[1,"frist-input-label"],"fristInputPlaceholder":[1,"frist-input-placeholder"],"firstInputMin":[2,"first-input-min"],"firstInputMax":[2,"first-input-max"],"firstInputWarning":[2,"first-input-warning"],"firstInputWarningText":[1,"first-input-warning-text"],"firstInputLowErrorText":[1,"first-input-low-error-text"],"firstInputHighErrorText":[1,"first-input-high-error-text"],"secondInputLabel":[1,"second-input-label"],"secondInputPlaceholder":[1,"second-input-placeholder"],"secondInputMin":[2,"second-input-min"],"secondInputMax":[2,"second-input-max"],"secondInputWarning":[2,"second-input-warning"],"secondInputWarningText":[1,"second-input-warning-text"],"secondInputLowErrorText":[1,"second-input-low-error-text"],"secondInputHighErrorText":[1,"second-input-high-error-text"],"dateLabel":[1,"date-label"],"datePlaceholder":[1,"date-placeholder"],"dateDaysFromToday":[2,"date-days-from-today"],"yearsToAddToEndDate":[2,"years-to-add-to-end-date"],"sumFieldLabel":[1,"sum-field-label"],"addRowText":[1,"add-row-text"],"elementHelperText":[1,"element-helper-text"],"dropdownDataRoot":[32],"secondDropdownArr":[32],"rowCount":[32],"rowData":[32],"formValues":[32],"firstValidDateString":[32],"lastValidDateString":[32],"rowSum":[32],"minRowCount":[32],"showDelteConfirm":[32]},[[0,"rowValueChange","predefinedValueChange"],[0,"firstInputChange","predefinedValueChange"],[0,"secondInputChange","predefinedValueChange"],[0,"deleteRowEvent","deleteRowEvent"]]]]],["p-acbe60df",[[0,"pn-address-autofill",{"market":[1537],"environment":[1537],"endpoint":[1],"cache":[4],"countryCode":[1,"country-code"],"postalCodeProps":[1,"postal-code-props"],"cityProps":[1,"city-props"],"streetAddressProps":[1,"street-address-props"],"streetNumberProps":[1,"street-number-props"],"streetAdressArr":[32],"streetNumberArr":[32],"city":[32],"postalCode":[32],"streetAddress":[32],"streetNumber":[32],"fullAddress":[32]}]]],["p-e9501c6f",[[4,"pn-dropdown-choice-adds-row",{"dropdownData":[1,"dropdown-data"],"languageCode":[1,"language-code"],"addRowDropdownName":[1,"add-row-dropdown-name"],"addRowDropdownPlaceholder":[1,"add-row-dropdown-placeholder"],"addRowDropdownLabel":[1,"add-row-dropdown-label"],"rowNameLabel":[1,"row-name-label"],"rowHasDropdown":[4,"row-has-dropdown"],"rowDropdownLabel":[1,"row-dropdown-label"],"rowDropdownPlaceholder":[1,"row-dropdown-placeholder"],"rowInputLabel":[1,"row-input-label"],"rowDeleteButtonText":[1,"row-delete-button-text"],"totalInputLimit":[2,"total-input-limit"],"inputLimitWarning":[1,"input-limit-warning"],"nextRowIndex":[32],"rowSelectDropdownArr":[32],"columnCount":[32],"showWarning":[32],"formValue":[32]},null,{"dropdownData":["dropdownDataWatcher"]}]]],["p-391970af",[[0,"pn-multiple-input",{"label":[1],"placeholder":[1],"addRowButtonText":[1,"add-row-button-text"],"rowData":[32]}]]],["p-ebaeee5e",[[0,"pn-parcel-tracker",{"formActionUrl":[1,"form-action-url"],"heading":[1],"buttonLabel":[1,"button-label"],"locale":[1],"placeholder":[1],"inputName":[1,"input-name"],"currentWidth":[32]},[[9,"resize","handleViewportSizeChange"]]]]],["p-95c10b7e",[[0,"pn-pex-pricefinder",{"language":[1],"currency":[1],"apiUrl":[1,"api-url"],"i18n":[32],"fromzip":[32],"tozip":[32],"weight":[32],"when":[32],"response":[32]},[[0,"language","setLanguage"]]]]],["p-40538914",[[0,"pn-share",{"link":[1],"language":[1537],"i18n":[32]},null,{"language":["onLanguageChange"]}]]],["p-34689c97",[[4,"pn-stats-info",{"heading":[1],"dataArray":[1,"data-array"],"backgroundUrl":[1,"background-url"],"myParsedArray":[32]},null,{"dataArray":["parseMyArrayProp"]}]]],["p-68aa55f7",[[4,"pn-animated-tile",{"toggled":[32],"transitionClassName":[32],"animateIcon":[32]},null,{"toggled":["onToggledHandler"]}]]],["p-586a1e3c",[[0,"pn-app-banner",{"appName":[1,"app-name"],"appDescription":[1,"app-description"],"ctaText":[1,"cta-text"],"appleStoreLink":[1,"apple-store-link"],"googleStoreLink":[1,"google-store-link"],"isClosed":[32],"storeLink":[32],"isLocalStorageAvailable":[32]}]]],["p-16f70311",[[4,"pn-bonus-progressbar",{"icon":[1],"heading":[1],"sumtext":[513],"theme":[513],"bonuspercentage":[1],"currency":[513],"value":[1538],"min":[1538],"max":[1538],"valuepercentage":[32],"progresspercentage":[32],"levelValues":[32],"currentLevelAdjustedValue":[32]},null,{"currentLevelAdjustedValue":["setValuePercentage"],"value":["setValuePercentage"],"min":["setValuePercentage"],"max":["setValuePercentage"]}]]],["p-a8220c88",[[0,"pn-bonus-progressbar-level",{"current":[516],"value":[1538],"bonuspercentage":[1537],"visualpercentage":[1538],"percentage":[32],"max":[32],"min":[32],"currency":[32]}]]],["p-56bd346e",[[0,"pn-breakpoints",{"breakPointClass":[1,"break-point-class"],"currentWidth":[32]},[[9,"resize","handleViewportSizeChange"]]]]],["p-1317587f",[[0,"pn-chart",{"labels":[1],"dataSets":[1,"data-sets"],"dataChartType":[8,"data-chart-type"],"myChartCtxRef":[32]},null,{"dataSets":["dataChangeHandler"],"labels":["labelsChangeHandler"]}]]],["p-190c671b",[[4,"pn-charts-card",{"header":[1],"highlight":[1],"preamble":[1],"label":[1],"source":[1],"sourceUrl":[1,"source-url"],"ctaLinkText":[1,"cta-link-text"],"openInNewWindow":[4,"open-in-new-window"]}]]],["p-69a56d5c",[[4,"pn-cta-block",{"heading":[1],"bodyText":[1,"body-text"],"pnBackgroundColor":[1,"pn-background-color"],"isLarge":[4,"is-large"],"isCentered":[4,"is-centered"],"isSmall":[4,"is-small"],"contentTop":[4,"content-top"]}]]],["p-95e054fd",[[4,"pn-customernumber-selector",{"language":[1537],"open":[1540],"heading":[1],"description":[1],"i18n":[32]}]]],["p-09b9cc06",[[4,"pn-customernumber-selector-option",{"heading":[1],"description":[1],"url":[1]}]]],["p-d8a57eba",[[0,"pn-date-and-time",{"languageCode":[1,"language-code"],"dateAndTimeLabel":[1,"date-and-time-label"],"dateDaysFromToday":[2,"date-days-from-today"],"validTimeRangeMinutes":[2,"valid-time-range-minutes"],"errorMessage":[1,"error-message"],"dateHelperText":[1,"date-helper-text"],"timeHelperText":[1,"time-helper-text"],"disableWeekends":[4,"disable-weekends"],"datePlacehodler":[1,"date-placehodler"],"language":[32],"hourArr":[32],"minuteArr":[32],"formValue":[32],"invalidTimespan":[32],"selectedDate":[32],"selectedFromHour":[32],"selectedFromMin":[32],"selectedToHour":[32],"selectedToMin":[32],"firstValidDateString":[32],"lastValidDateString":[32]}]]],["p-fbe70284",[[4,"pn-hero-block-international",{"heading":[1],"subHeading":[1,"sub-heading"],"preamble":[1],"animateLogo":[4,"animate-logo"],"showSideLoader":[4,"show-side-loader"],"centeredLayout":[4,"centered-layout"]}]]],["p-e42f0fbe",[[0,"pn-line-shape"]]],["p-ade7ffcf",[[4,"pn-link-list",{"heading":[1],"label":[1],"preamble":[1],"url":[1],"showMoreLabel":[1,"show-more-label"],"showMoreUrl":[1,"show-more-url"]}]]],["p-c25acf85",[[0,"pn-marketweb-icon",{"symbol":[1],"small":[4],"color":[1]}]]],["p-2044eddc",[[1,"pn-marketweb-search",{"disabled":[4],"placeholder":[1],"inputid":[1],"name":[1],"autocomplete":[1],"list":[1],"value":[1],"label":[1],"loading":[4],"button":[1],"light":[4],"suggestionObserver":[32],"hasClonedInput":[32],"listSuggestion":[32]},[[0,"input","inputHandler"]]]]],["p-c0fd8e61",[[4,"pn-product-tile"]]],["p-90ba1d8e",[[4,"pn-profile-modal",{"heading":[1],"continueCtaText":[1,"continue-cta-text"],"choosenCompanyText":[1,"choosen-company-text"],"toText":[1,"to-text"],"chooseCustomerNumberText":[1,"choose-customer-number-text"],"isLoading":[32]},[[0,"urlSelected","onUrlSelected"]]]]],["p-c9f21ea3",[[4,"pn-profile-modal-customernumber",{"url":[513],"customernumber":[513],"selected":[516]}]]],["p-f62879f6",[[4,"pn-profile-modal-profile",{"heading":[513],"description":[513],"url":[513],"selected":[1028],"showCustomerNumbers":[516,"show-customer-numbers"],"pleaseSelectText":[513,"please-select-text"],"visible":[1540],"identifier":[32]}]]],["p-931d3a9b",[[4,"pn-profile-modal-type",{"typeid":[513],"name":[1025],"selected":[1028],"selectedprofile":[1025]},null,{"selected":["onSelectedChange"]}]]],["p-74203d3e",[[4,"pn-profile-selector",{"language":[1537],"returnUrl":[1,"return-url"],"heading":[1],"i18n":[32],"isLoading":[32],"numberOfProfiles":[32]}]]],["p-f2d0d0cc",[[0,"pn-profile-selector-option",{"heading":[1],"description":[1],"url":[1]}]]],["p-5a467ca6",[[4,"pn-quick-cta",{"heading":[1],"preamble":[1]}]]],["p-e4c7aaec",[[4,"pn-quote-card",{"quote":[1],"name":[1],"occupation":[1]}]]],["p-67d862ac",[[4,"pn-sidenav",{"language":[1],"navLabel":[1,"nav-label"],"i18n":[32]},[[0,"language","setLanguage"],[0,"openSubMenuLevelChange","onOpenSubMenuLevelChange"]]]]],["p-1535a09f",[[4,"pn-sidenav-level",{"level":[32],"levelId":[32],"isOpen":[32],"parentName":[32],"parentHref":[32],"parentLinkId":[32],"alignment":[32]},null,{"isOpen":["onOpen"]}]]],["p-6e9875e5",[[4,"pn-sidenav-link",{"name":[1],"href":[1],"target":[1],"linkid":[1],"icon":[1],"current":[4],"levelId":[32],"open":[32],"hasChildren":[32]}]]],["p-7021985c",[[4,"pn-sidenav-togglebutton",{"label":[1],"i18n":[32]}]]],["p-0a522476",[[4,"pn-spotlight",{"heading":[1],"preamble":[1],"isDynamic":[4,"is-dynamic"],"addDynamic":[32]}]]],["p-73db2c9c",[[4,"pn-teaser-card",{"text":[1],"heading":[1],"label":[1],"dataCardColor":[513,"data-card-color"],"dataCardAlignment":[513,"data-card-alignment"],"hasCtaSlotContent":[32],"hasIllustrationSlot":[32]}]]],["p-69ee0033",[[4,"pn-usp-promoter",{"heading":[1],"headingExtension":[1,"heading-extension"],"bodyText":[1,"body-text"],"backgroundGradient":[1,"background-gradient"],"fullWidth":[4,"full-width"],"rightAlign":[4,"right-align"],"hideMobileImage":[4,"hide-mobile-image"]}]]],["p-9776a1c5",[[0,"pn-proxio-findprice-result",{"item":[1040],"activeweight":[1026],"shownitems":[16],"Usp1":[1,"usp-1"],"Usp2":[1,"usp-2"],"Usp3":[1,"usp-3"],"description":[16],"showMeasurement":[4,"show-measurement"],"showInternational":[4,"show-international"],"selectedCountrycode":[1,"selected-countrycode"],"market":[1],"language":[1025],"weightText":[32],"linkId":[32],"shopLabel":[32],"shopUrl":[32],"shopId":[32],"i18n":[32]},null,{"item":["composeItems"],"activeweight":["getPriceString","getProductLink"]}]]],["p-2f779414",[[0,"pn-find-service-and-price-result",{"item":[1040],"shownitems":[16],"weightText":[32]},null,{"item":["composeItems"]}]]],["p-85d57c9d",[[0,"pn-multi-row-connected-dropdown-row",{"dropdownData":[1,"dropdown-data"],"languageCode":[1,"language-code"],"label":[1],"firstDropdownLabel":[1,"first-dropdown-label"],"secondDropdownLabel":[1,"second-dropdown-label"],"dropdownPlaceholder":[1,"dropdown-placeholder"],"addRowText":[1,"add-row-text"],"inputFildLabel":[1,"input-fild-label"],"inputFildPlaceholder":[1,"input-fild-placeholder"],"dateButtonText":[1,"date-button-text"],"datePlaceholder":[1,"date-placeholder"],"dateDaysFromToday":[2,"date-days-from-today"],"allowMultipleDates":[4,"allow-multiple-dates"],"startDateLabel":[1,"start-date-label"],"endDateLabel":[1,"end-date-label"],"multiDateHelperText":[1,"multi-date-helper-text"],"generateDatesButtonText":[1,"generate-dates-button-text"],"saveDateButtonText":[1,"save-date-button-text"],"noDatesText":[1,"no-dates-text"],"index":[2],"predefinedValue":[1,"predefined-value"],"yearsToAddToEndDate":[2,"years-to-add-to-end-date"],"buttonsArray":[32],"firstDropdownArr":[32],"secondDropdownArr":[32],"firstDropdownClass":[32],"secondDropdownClass":[32],"firstValidDateString":[32],"lastValidDateString":[32],"firstDropdownPlaceholder":[32],"secondDropdownPlaceholder":[32],"starDateValue":[32],"endDateValue":[32],"generatedDatesArr":[32],"selectedButtonValue":[32],"inputFieldValue":[32],"dateValue":[32],"daysArr":[32]},null,{"predefinedValue":["applyPredefinedValue"]}]]],["p-c696bedf",[[0,"pn-play-on-scroll",{"videoSrc":[1,"video-src"],"observerOptions":[16],"showOverlay":[4,"show-overlay"],"videoId":[32],"isManuallyPaused":[32],"isPaused":[32]}]]],["p-d40ff187",[[0,"pn-dropdown-with-multi-input-rows-row",{"languageCode":[1,"language-code"],"fristInputPlaceholder":[1,"frist-input-placeholder"],"firstInputMin":[2,"first-input-min"],"firstInputMax":[2,"first-input-max"],"firstInputWarning":[2,"first-input-warning"],"firstInputWarningText":[1,"first-input-warning-text"],"firstInputLowErrorText":[1,"first-input-low-error-text"],"firstInputHighErrorText":[1,"first-input-high-error-text"],"secondInputPlaceholder":[1,"second-input-placeholder"],"secondInputMin":[2,"second-input-min"],"secondInputMax":[2,"second-input-max"],"secondInputWarning":[2,"second-input-warning"],"secondInputWarningText":[1,"second-input-warning-text"],"secondInputLowErrorText":[1,"second-input-low-error-text"],"secondInputHighErrorText":[1,"second-input-high-error-text"],"dateLabel":[1,"date-label"],"datePlaceholder":[1,"date-placeholder"],"firstValidDate":[1,"first-valid-date"],"lastValidDate":[1,"last-valid-date"],"predefinedValue":[1,"predefined-value"],"rowIndex":[2,"row-index"],"minRowCount":[2,"min-row-count"],"showFirstInputWarning":[32],"showFirstInputLowError":[32],"showFirstInputHighError":[32],"showSecondInputWarning":[32],"showSecondInputLowError":[32],"showSecondInputHighError":[32],"firstInputValue":[32],"secondInputValue":[32],"dateValue":[32]},null,{"predefinedValue":["applyPredefinedValue"]}]]],["p-81b3e038",[[4,"pn-share-item",{"link":[1],"text":[1]}]]],["p-1bd5fa26",[[0,"pn-stats-info-data",{"format":[1],"formatStyle":[1,"format-style"],"startValue":[2,"start-value"],"data":[2],"unit":[1],"preamble":[1],"duration":[2],"index":[2],"hasBeenShown":[32],"compId":[32]},null,{"hasBeenShown":["watchStateHandlder"]}]]],["p-7b598d81",[[0,"pn-find-price-result",{"item":[1040],"shownitems":[16],"Usp1":[1,"usp-1"],"Usp2":[1,"usp-2"],"Usp3":[1,"usp-3"],"description":[16],"showMeasurement":[4,"show-measurement"],"weightText":[32],"linkId":[32],"shopLabel":[32],"shopUrl":[32],"shopId":[32]},null,{"item":["composeItems"]}]]],["p-370829c6",[[1,"pn-filter-checkbox",{"value":[520],"name":[1],"checkboxid":[1],"disabled":[4],"checked":[4],"indeterminate":[1028]},[[0,"change","handlechange"]]]]],["p-c224d7c4",[[4,"pn-mainnav-link",{"name":[1],"href":[1],"target":[1],"linkid":[1],"levelId":[32],"open":[32],"hasChildren":[32]}]]],["p-78fbc88c",[[4,"pn-site-footer",{"url":[1],"linktitle":[1],"theme":[513]}],[4,"pn-site-footer-col",{"theme":[513]}],[0,"pn-swan",{"licenseNumber":[1,"license-number"],"language":[1537],"linkTo":[1,"link-to"],"i18n":[32]},null,{"language":["onLanguageChange"]}]]],["p-9be27d72",[[4,"pn-choice-button",{"value":[520],"name":[1],"choiceid":[1],"type":[1],"disabled":[4],"checked":[4],"indeterminate":[1028]},[[0,"change","handlechange"]]]]],["p-1217d60f",[[0,"pn-product-tile-info",{"label":[1],"text":[1],"icon":[1]}],[0,"pn-product-tile-price",{"label":[1],"amount":[1],"currency":[1],"url":[1]}]]],["p-828449da",[[4,"pn-scroll",{"observerOptions":[16],"behaviourClasses":[1,"behaviour-classes"],"transitionDurationSeconds":[2,"transition-duration-seconds"],"shouldLoop":[4,"should-loop"],"intersectFunc":[16],"notIntersectFunc":[16],"compId":[32]}],[0,"pn-video-overlay",{"language":[1],"isPaused":[4,"is-paused"],"showOverlay":[4,"show-overlay"],"i18n":[32]},null,{"language":["onLanguageChange"]}]]],["p-b2dcce7c",[[0,"pn-marketweb-siteheader-login-linklist",{"heading":[1],"links":[16],"idNamespace":[1,"id-namespace"],"showUnifiedLogin":[4,"show-unified-login"]}]]],["p-1578e02e",[[4,"pn-titletag",{"icon":[1],"color":[1537]}]]],["p-9998c29d",[[0,"pn-marketweb-input",{"disabled":[4],"error":[1],"invalid":[4],"helpertext":[1],"label":[1],"placeholder":[1],"inputid":[1],"name":[1],"required":[4],"type":[1025],"autocomplete":[1],"valid":[4],"value":[1],"maxlength":[1],"min":[1],"max":[1],"step":[1],"pattern":[1],"showText":[32]}]]],["p-9a7abcee",[[0,"pn-marketweb-siteheader-unified-login",{"loggedIn":[4,"logged-in"],"myPageLabel":[1,"my-page-label"],"myPageUrl":[1,"my-page-url"],"logInLabel":[1,"log-in-label"]}],[0,"pn-marketweb-siteheader-login-links",{"loginDialog":[1040],"idNamespace":[1,"id-namespace"],"loggedin":[516],"username":[1],"showUnifiedLogin":[4,"show-unified-login"]},null,{"loginDialog":["init"]}],[0,"pn-marketweb-siteheader-login-profileselection",{"loginDialog":[1040],"endpoint":[1],"loggedin":[4],"idNamespace":[1,"id-namespace"],"heading":[1],"i18n":[16],"currentProfile":[1040],"profileoptions":[1040],"user":[32],"logoutLink":[32],"userName":[32],"userEmail":[32]}],[0,"pn-marketweb-siteheader-login-button",{"label":[1]}],[0,"pn-marketweb-siteheader-login-mypage-button",{"label":[1],"myPageUrl":[1,"my-page-url"]}]]],["p-4ea1409d",[[0,"pn-marketweb-siteheader-login",{"endpoint":[1],"token":[1],"i18n":[16],"siteUrl":[1,"site-url"],"emitEvents":[4,"emit-events"],"loginDialog":[1040],"fullname":[1],"loggedin":[4],"showProfileSelection":[1028,"show-profile-selection"],"showUnifiedLogin":[4,"show-unified-login"],"checkUserLoggedInStateInterval":[2,"check-user-logged-in-state-interval"],"environment":[1],"loginLinks":[32],"toggleButtonText":[32],"username":[32]},null,{"i18n":["init"],"loginDialog":["init"]}],[4,"pn-mainnav-level",{"label":[1537],"level":[32],"levelId":[32],"isOpen":[32],"parentName":[32],"parentHref":[32],"parentLinkId":[32],"listCount":[32],"alignment":[32]},null,{"label":["setState"],"isOpen":["onOpen"]}],[4,"pn-language-selector",{"value":[1537],"selectedLanguageName":[32],"options":[32],"i18n":[32]},null,{"value":["setSelectedLanguageName","setTranslations","onValueChange"]}],[0,"pn-language-selector-option",{"name":[1],"code":[1],"url":[1],"selected":[4],"currentLanguage":[1,"current-language"]}],[4,"pn-mainnav",{"market":[1],"language":[1],"navigationId":[1,"navigation-id"],"openMenu":[1028,"open-menu"],"navLabel":[1,"nav-label"]},[[0,"language","setLanguage"],[0,"market","setMarket"],[0,"menuLanguageChange","onLanguageChange"],[0,"setmenuopenstate","setMenuOpenState"],[0,"openMenuLevelChange","onOpenMenuLevelChange"]]],[4,"pn-mainnav-list",{"heading":[1],"linkCount":[32]}],[0,"pn-marketweb-siteheader-search",{"i18n":[8,"i-1-8n"],"showOnlyLink":[1028,"show-only-link"],"hideSearch":[1028,"hide-search"],"language":[1537],"siteid":[1],"search":[1040],"primary":[4],"icononly":[4],"autoCompleteOptions":[32]}],[4,"pn-site-selector",{"buttontext":[1537],"heading":[1537],"language":[1537],"i18n":[32]}],[0,"pn-site-selector-item",{"url":[1],"heading":[1],"description":[1],"newwindow":[4]}]]],["p-75a09bb2",[[4,"pn-proxio-productcard"],[0,"pn-proxio-productcard-description",{"heading":[1],"highlight":[1],"description":[1],"list":[1040]}],[0,"pn-proxio-productcard-information",{"label":[1],"information":[16]}],[0,"pn-proxio-productcard-pricelink",{"price":[1],"vatText":[1,"vat-text"],"link":[1],"linktext":[1]}]]],["p-609da67c",[[0,"pn-product-card-info",{"rulle":[1],"paket":[1],"label":[1],"text":[1]}],[0,"pn-product-card-price",{"label":[1],"amount":[1],"currency":[1],"note":[1],"url":[1],"service":[1],"linkid":[1]}],[4,"pn-product-card"]]]]'),e)}));
|
|
2
2
|
//# sourceMappingURL=pn-market-web-components.esm.js.map
|
package/umd/pn-marketweb-init.js
CHANGED
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
};
|
|
37
37
|
|
|
38
38
|
const s = document.createElement('script');
|
|
39
|
-
const currentMinorVersion = "3.
|
|
39
|
+
const currentMinorVersion = "3.3.0";
|
|
40
40
|
const requestedComponentVersion = (new URLSearchParams(window.location.search)).get("componentversion");
|
|
41
41
|
const versionToLoad = (requestedComponentVersion) ? requestedComponentVersion : currentMinorVersion;
|
|
42
42
|
const currentScriptTag = document.querySelector('script[src*="pn-marketweb-init.js"]');
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
document.body.insertBefore(header, document.body.firstElementChild);
|
|
25
25
|
document.body.appendChild(footer);
|
|
26
26
|
|
|
27
|
-
const currentMinorVersion = "3.
|
|
27
|
+
const currentMinorVersion = "3.3.0";
|
|
28
28
|
const requestedComponentVersion = new URLSearchParams(window.location.search).get("componentversion");
|
|
29
29
|
const versionToLoad = requestedComponentVersion ? requestedComponentVersion : currentMinorVersion;
|
|
30
30
|
|