@postnord/pn-marketweb-components 4.3.5 → 4.3.7

package/cjs/pn-find-price.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9a9efa1c.js');
 const data = require('./data-1066a856.js');
-const convert = require('./convert-9361e443.js');
+const convert = require('./convert-aa209554.js');
 const pnFindPriceStore = require('./pn-find-price-store-880fb647.js');
 require('./index-a8de2b09.js');
 

package/cjs/pn-find-service-and-price.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9a9efa1c.js');
-const convert = require('./convert-9361e443.js');
+const convert = require('./convert-aa209554.js');
 const pnFindServiceAndPriceStore = require('./pn-find-service-and-price-store-1b5945fe.js');
 require('./index-a8de2b09.js');
 

package/cjs/pn-product-pricelist.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9a9efa1c.js');
 const data = require('./data-4380242c.js');
-const convert = require('./convert-9361e443.js');
+const convert = require('./convert-aa209554.js');
 const pnFindPriceStore = require('./pn-find-price-store-880fb647.js');
 require('./index-a8de2b09.js');
 

package/cjs/pn-teaser-card.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-9a9efa1c.js');
 const HeadingTag = require('./HeadingTag-190a9892.js');
 
-const pnTeaserCardCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}.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:#8eddf9}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:not(.familywrapperblock) .pn-teaser-card__container__content__text__container__label{margin-bottom:0.8rem}}.onethirdwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__image__container--no-image,.onequarterwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__image__container--no-image{padding-top:2.4rem}.onethirdwidth:not(.familywrapperblock) .pn-teaser-card__container__content__cta .secondary-link--animated,.onequarterwidth:not(.familywrapperblock) .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:400}.halfwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:400}.halfwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__image__container--no-image{padding-top:2.4rem}@media screen and (min-width: 992px){.halfwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:500}}@media screen and (min-width: 1200px){.halfwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__image__container--no-image{padding-top:4rem}.halfwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content{padding:0 4rem 4rem}.halfwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content__text__container__heading{font-weight:700;font-size:3.2rem;line-height:3.52rem}.halfwidth:not(.familywrapperblock) 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:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__image__container--no-image{padding-top:5.6rem}.halfwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content{padding:0 5.6rem 5.6rem}}.fullwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:400}.fullwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__image__container--no-image{width:auto;padding-top:2.4rem}@media screen and (min-width: 768px){.fullwidth:not(.familywrapperblock) pn-teaser-card{min-height:35rem}.fullwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:500}.fullwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container{flex-direction:row}.fullwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content{align-self:center;gap:2.4rem;padding:3.2rem 3.2rem 3.2rem 2.4rem}.fullwidth:not(.familywrapperblock) 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:not(.familywrapperblock) 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:not(.familywrapperblock) pn-teaser-card{min-height:52rem}.fullwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content{padding:4rem 4rem 4rem 3.2rem}.fullwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content__text__container__heading{font-weight:700;font-size:4.8rem;line-height:5.28rem}.fullwidth:not(.familywrapperblock) 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:not(.familywrapperblock) pn-teaser-card[data-card-alignment=right] .pn-teaser-card__container{flex-direction:row-reverse}.fullwidth:not(.familywrapperblock) pn-teaser-card[data-card-alignment=right] .pn-teaser-card__container__content{padding:3.2rem 2.4rem 3.2rem 3.2rem}.fullwidth:not(.familywrapperblock) 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:not(.familywrapperblock) 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 pnTeaserCardCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}.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:#8eddf9}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:not(.familywrapperblock) .pn-teaser-card__container__content__text__container__label{margin-bottom:0.8rem}}.onethirdwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__image__container--no-image,.onequarterwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__image__container--no-image{padding-top:2.4rem}.onethirdwidth:not(.familywrapperblock) .pn-teaser-card__container__content__cta .secondary-link--animated,.onequarterwidth:not(.familywrapperblock) .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:400}.halfwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:400}.halfwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__image__container--no-image{padding-top:2.4rem}@media screen and (min-width: 992px){.halfwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:500}}@media screen and (min-width: 1200px){.halfwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__image__container--no-image{padding-top:4rem}.halfwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content{padding:0 4rem 4rem}.halfwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content__text__container__heading{font-weight:700;font-size:3.2rem;line-height:3.52rem}.halfwidth:not(.familywrapperblock) 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:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__image__container--no-image{padding-top:5.6rem}.halfwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content{padding:0 5.6rem 5.6rem}}.fullwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:400}.fullwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__image__container--no-image{width:auto;padding-top:2.4rem}@media screen and (min-width: 768px){.fullwidth:not(.familywrapperblock) pn-teaser-card{min-height:35rem}.fullwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:500}.fullwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container{flex-direction:row}.fullwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content{align-self:center;gap:2.4rem;padding:3.2rem 3.2rem 3.2rem 2.4rem}.fullwidth:not(.familywrapperblock) 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:not(.familywrapperblock) 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:not(.familywrapperblock) pn-teaser-card{min-height:52rem}.fullwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content{padding:4rem 4rem 4rem 3.2rem}.fullwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content__text__container__heading{font-weight:700;font-size:4.8rem;line-height:5.28rem}.fullwidth:not(.familywrapperblock) 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:not(.familywrapperblock) pn-teaser-card[data-card-alignment=right] .pn-teaser-card__container{flex-direction:row-reverse}.fullwidth:not(.familywrapperblock) pn-teaser-card[data-card-alignment=right] .pn-teaser-card__container__content{padding:3.2rem 2.4rem 3.2rem 3.2rem}.fullwidth:not(.familywrapperblock) 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:not(.familywrapperblock) 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 PnTeaserCardStyle0 = pnTeaserCardCss;
 
 const PnTeaserCard = class {

package/cjs/pn-teaser-card.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"pn-teaser-card.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,eAAe,GAAG,u3TAAu3T,CAAC;AACh5T,2BAAe,eAAe;;MCMjB,YAAY;;;oBAGA,IAAI;uBACD,IAAI;qBACL,IAAI;4BACG,IAAI;6BACa,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;IAED,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,EACpH,IAAI,CAAC,OAAO,IAAIA,QAACE,qBAAU,qDAAC,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,QAAQ,EAAC,8DAA8D,IACzH,IAAI,CAAC,OAAO,CACF,EACfF,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","HeadingTag"],"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//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: $min-width-md) {\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: $blue200;\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:not(.familywrapperblock) {\n  .pn-teaser-card__container__content__text__container__label {\n    @media screen and (min-width: $min-width-xl) {\n      margin-bottom: 0.8rem;\n    }\n  }\n}\n\n.onethirdwidth:not(.familywrapperblock),\n.onequarterwidth:not(.familywrapperblock) {\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:not(.familywrapperblock) {\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: $min-width-lg) {\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: $min-width-xl) {\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: $min-width-xxl) {\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:not(.familywrapperblock) {\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: $min-width-md) {\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: $min-width-xl) {\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: $min-width-md) {\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: $min-width-xl) {\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\";\nimport { HeadingTag } from '@/globals/HeadingTag';\n\n@Component({\n  tag: 'pn-teaser-card',\n  styleUrl: 'pn-teaser-card.scss'\n})\nexport class PnTeaserCard {\n  @Element() hostElement: HTMLElement;\n  \n  @Prop() text: string = null;\n  @Prop() heading: string = null;\n  @Prop() label?: string = null;\n  @Prop() headingLevel?: string = 'h3';\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    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              {this.heading && <HeadingTag level={this.headingLevel} cssClass=\"pn-teaser-card__container__content__text__container__heading\">\n                  {this.heading}\n                </HeadingTag>}\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}
+{"file":"pn-teaser-card.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,eAAe,GAAG,u3TAAu3T,CAAC;AACh5T,2BAAe,eAAe;;MCMjB,YAAY;;;oBAGA,IAAI;uBACD,IAAI;qBACL,IAAI;4BACG,IAAI;6BACa,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;IAED,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,EACpH,IAAI,CAAC,OAAO,IAAIA,QAACE,qBAAU,qDAAC,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,QAAQ,EAAC,8DAA8D,IACzH,IAAI,CAAC,OAAO,CACF,EACfF,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","HeadingTag"],"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//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: $min-width-md) {\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: $blue200;\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:not(.familywrapperblock) {\n  .pn-teaser-card__container__content__text__container__label {\n    @media screen and (min-width: $min-width-xl) {\n      margin-bottom: 0.8rem;\n    }\n  }\n}\n\n.onethirdwidth:not(.familywrapperblock),\n.onequarterwidth:not(.familywrapperblock) {\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:not(.familywrapperblock) {\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: $min-width-lg) {\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: $min-width-xl) {\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: $min-width-xxl) {\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:not(.familywrapperblock) {\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: $min-width-md) {\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: $min-width-xl) {\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: $min-width-md) {\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: $min-width-xl) {\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\";\nimport { HeadingTag } from '@/globals/HeadingTag';\n\n@Component({\n  tag: 'pn-teaser-card',\n  styleUrl: 'pn-teaser-card.scss'\n})\nexport class PnTeaserCard {\n  @Element() hostElement: HTMLElement;\n  \n  @Prop() text: string = null;\n  @Prop() heading: string = null;\n  @Prop() label?: string = null;\n  @Prop() headingLevel?: string = 'h3';\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    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              {this.heading && <HeadingTag level={this.headingLevel} cssClass=\"pn-teaser-card__container__content__text__container__heading\">\n                  {this.heading}\n                </HeadingTag>}\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/collection/components/cards/pn-teaser-card/pn-teaser-card.css

@@ -150,7 +150,7 @@ pn-teaser-card[data-card-color=blue400] > .pn-teaser-card__container .pn-teaser-
 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 {
+pn-teaser-card[data-card-color=blue400] > .pn-teaser-card__container .secondary-link--animated pn-icon svg path {
   fill: #ffffff;
 }
 
@@ -165,7 +165,7 @@ pn-teaser-card[data-card-color=blue900] > .pn-teaser-card__container .pn-teaser-
 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 {
+pn-teaser-card[data-card-color=blue900] > .pn-teaser-card__container .secondary-link--animated pn-icon svg path {
   fill: #ffffff;
 }
 

package/collection/components/layout-components/pn-marketweb-header/pn-marketweb-header-salesforce-loader.stories.js

@@ -0,0 +1,479 @@
+const ORIGINAL_FETCH = window.fetch.bind(window);
+const RELOAD_CLICK_HANDLER_KEY = '__mwSalesforceHeaderReloadHandler';
+const TOGGLER_MOCKED_RESPONSE = {
+    value: {
+        sitedefinition: {
+            name: 'PostNord Denmark',
+            url: '/',
+        },
+        search: {
+            formActionUrl: 'https://www.postnord.dk/sog/',
+            AutocompleteEndpoint: 'https://www.postnord.dk/api/search/autocomplete',
+        },
+        languageSelectorViewModel: {
+            currentLanguageNativeName: 'Dansk',
+            languages: [
+                { twoLetterISOLanguageName: 'da', nativeName: 'Dansk', isCurrent: true },
+                { twoLetterISOLanguageName: 'en', nativeName: 'English', isCurrent: false },
+            ],
+        },
+        siteSelectorViewModel: {
+            siteSelectorButtonText: 'postnord.dk',
+            siteSelectorTitle: 'PostNord',
+            currentSiteTitle: 'postnord.dk',
+            currentSiteDescription: 'Kundeservice og værktøjer',
+            siteSelections: [],
+        },
+        loginViewModel: {
+            loginMenuLinks: [],
+            legacyLoginLinks: [],
+            loggedInLinks: [],
+            overrideLoginMenu: false,
+            loginMenuLinkText: 'Log ind',
+            countryCode: 'DK',
+            locale: 'da',
+            loginUrl: '',
+            registerUrl: '',
+            loggedInButtonText: 'Min side',
+            loginTitle: 'Log ind',
+            loginLinkText: 'Log ind',
+            createLoginLinkText: 'Opret konto',
+            loginInfo: '',
+        },
+        mainMenu: {
+            // all but last are switchable roots; last is shared root
+            menuItems: [
+                {
+                    name: 'Privat',
+                    href: '/',
+                    id: 'root-private',
+                    selected: false,
+                    open: false,
+                    children: [
+                        {
+                            name: 'Send pakke',
+                            href: '/',
+                            id: 'private-send-package',
+                            selected: false,
+                            open: false,
+                            children: [],
+                            navigationHeading: '',
+                            promotedMenuItemsHeader: '',
+                            promotedMenuItems: [],
+                            hasChildren: false,
+                            linkTarget: '',
+                            trackingId: 'private-send-package',
+                            level: 1,
+                            isMegaMenuParent: false,
+                        },
+                        {
+                            name: 'Track forsendelse',
+                            href: '/',
+                            id: 'private-track',
+                            selected: false,
+                            open: false,
+                            children: [],
+                            navigationHeading: '',
+                            promotedMenuItemsHeader: '',
+                            promotedMenuItems: [],
+                            hasChildren: false,
+                            linkTarget: '',
+                            trackingId: 'private-track',
+                            level: 1,
+                            isMegaMenuParent: false,
+                        },
+                    ],
+                    navigationHeading: '',
+                    promotedMenuItemsHeader: '',
+                    promotedMenuItems: [],
+                    hasChildren: true,
+                    linkTarget: '',
+                    trackingId: 'private',
+                    level: 0,
+                    isMegaMenuParent: true,
+                    toggleTheme: 'private',
+                },
+                {
+                    name: 'Erhverv',
+                    href: '/',
+                    id: 'root-business',
+                    selected: false,
+                    open: false,
+                    children: [
+                        {
+                            name: 'Book pickup',
+                            href: '/',
+                            id: 'business-book-pickup',
+                            selected: false,
+                            open: false,
+                            children: [],
+                            navigationHeading: '',
+                            promotedMenuItemsHeader: '',
+                            promotedMenuItems: [],
+                            hasChildren: false,
+                            linkTarget: '',
+                            trackingId: 'business-book-pickup',
+                            level: 1,
+                            isMegaMenuParent: false,
+                        },
+                        {
+                            name: 'Business portal',
+                            href: '/',
+                            id: 'business-portal',
+                            selected: false,
+                            open: false,
+                            children: [],
+                            navigationHeading: '',
+                            promotedMenuItemsHeader: '',
+                            promotedMenuItems: [],
+                            hasChildren: false,
+                            linkTarget: '',
+                            trackingId: 'business-portal',
+                            level: 1,
+                            isMegaMenuParent: false,
+                        },
+                    ],
+                    navigationHeading: '',
+                    promotedMenuItemsHeader: '',
+                    promotedMenuItems: [],
+                    hasChildren: true,
+                    linkTarget: '',
+                    trackingId: 'business',
+                    level: 0,
+                    isMegaMenuParent: true,
+                    toggleTheme: 'business',
+                },
+                {
+                    name: 'Fælles',
+                    href: '/',
+                    id: 'root-shared',
+                    selected: false,
+                    open: false,
+                    children: [],
+                    navigationHeading: '',
+                    promotedMenuItemsHeader: '',
+                    promotedMenuItems: [],
+                    hasChildren: false,
+                    linkTarget: '',
+                    trackingId: 'shared',
+                    level: 0,
+                    isMegaMenuParent: false,
+                },
+            ],
+        },
+    },
+    formatters: [],
+    contentTypes: [],
+    declaredType: null,
+    statusCode: 200,
+};
+const OLD_SITEHEADER_MOCKED_RESPONSE = {
+    value: {
+        sitedefinition: {
+            name: 'PostNord Denmark',
+            url: '/',
+        },
+        search: {
+            formActionUrl: 'https://www.postnord.dk/sog/',
+            AutocompleteEndpoint: 'https://www.postnord.dk/api/search/autocomplete',
+        },
+        languageSelectorViewModel: {
+            currentLanguageNativeName: 'Dansk',
+            languages: [
+                { twoLetterISOLanguageName: 'da', nativeName: 'Dansk', isCurrent: true },
+                { twoLetterISOLanguageName: 'en', nativeName: 'English', isCurrent: false },
+            ],
+        },
+        siteSelectorViewModel: {
+            siteSelectorButtonText: 'postnord.dk',
+            siteSelectorTitle: 'PostNord',
+            currentSiteTitle: 'postnord.dk',
+            currentSiteDescription: 'Kundeservice og værktøjer',
+            siteSelections: [],
+        },
+        loginViewModel: {
+            loginMenuLinks: [],
+            legacyLoginLinks: [],
+            loggedInLinks: [],
+            overrideLoginMenu: false,
+            loginMenuLinkText: 'Log ind',
+            countryCode: 'DK',
+            locale: 'da',
+            loginUrl: '',
+            registerUrl: '',
+            loggedInButtonText: 'Min side',
+            loginTitle: 'Log ind',
+            loginLinkText: 'Log ind',
+            createLoginLinkText: 'Opret konto',
+            loginInfo: '',
+        },
+        mainMenu: {
+            // old siteheader mock data (siteheader endpoint shape)
+            menuItems: [
+                {
+                    name: 'Sende',
+                    href: '/',
+                    id: '4571',
+                    selected: false,
+                    open: false,
+                    children: [
+                        {
+                            name: 'Breve, q-breve og breve til udlandet',
+                            href: '/',
+                            id: '144202',
+                            selected: false,
+                            open: false,
+                            children: [],
+                            navigationHeading: '',
+                            promotedMenuItemsHeader: '',
+                            promotedMenuItems: [],
+                            hasChildren: false,
+                            linkTarget: '',
+                            trackingId: 'breveqbreveogbrevetiludlandet144202',
+                            level: 2,
+                            isMegaMenuParent: false,
+                            isDefaultToggleParent: false,
+                            toggleTheme: 'Private',
+                        },
+                    ],
+                    navigationHeading: '',
+                    promotedMenuItemsHeader: '',
+                    promotedMenuItems: [],
+                    hasChildren: true,
+                    linkTarget: '',
+                    trackingId: 'sende4571',
+                    level: 1,
+                    isMegaMenuParent: false,
+                    isDefaultToggleParent: false,
+                    toggleTheme: 'Private',
+                },
+                {
+                    name: 'Modtage',
+                    href: '/',
+                    id: '5501',
+                    selected: false,
+                    open: false,
+                    children: [],
+                    navigationHeading: '',
+                    promotedMenuItemsHeader: '',
+                    promotedMenuItems: [],
+                    hasChildren: false,
+                    linkTarget: '',
+                    trackingId: 'modtage5501',
+                    level: 1,
+                    isMegaMenuParent: false,
+                    isDefaultToggleParent: false,
+                    toggleTheme: 'Private',
+                },
+                {
+                    name: 'Kundeservice',
+                    href: '/',
+                    id: '5509',
+                    selected: false,
+                    open: false,
+                    children: [
+                        {
+                            name: 'Privat',
+                            href: '/',
+                            id: '15088',
+                            selected: false,
+                            open: false,
+                            children: [],
+                            navigationHeading: '',
+                            promotedMenuItemsHeader: '',
+                            promotedMenuItems: [],
+                            hasChildren: false,
+                            linkTarget: '',
+                            trackingId: 'privat15088',
+                            level: 2,
+                            isMegaMenuParent: false,
+                            isDefaultToggleParent: false,
+                            toggleTheme: 'Private',
+                        },
+                    ],
+                    navigationHeading: '',
+                    promotedMenuItemsHeader: '',
+                    promotedMenuItems: [],
+                    hasChildren: true,
+                    linkTarget: '',
+                    trackingId: 'kundeservice5509',
+                    level: 1,
+                    isMegaMenuParent: false,
+                    isDefaultToggleParent: false,
+                    toggleTheme: 'Private',
+                },
+            ],
+            activeMenuToggleParentIndex: -1,
+        },
+    },
+    formatters: [],
+    contentTypes: [],
+    declaredType: null,
+    statusCode: 200,
+};
+function createRouteSafeMockedResponse(baseResponse) {
+    const currentUrl = window.location.href;
+    const response = JSON.parse(JSON.stringify(baseResponse));
+    response.value.sitedefinition.url = currentUrl;
+    response.value.search.formActionUrl = currentUrl;
+    if (Array.isArray(response.value.mainMenu?.menuItems)) {
+        response.value.mainMenu.menuItems.forEach((menuItem) => {
+            menuItem.href = currentUrl;
+            if (Array.isArray(menuItem.children)) {
+                menuItem.children.forEach((child) => {
+                    child.href = currentUrl;
+                });
+            }
+        });
+    }
+    return response;
+}
+function createRouteSafeSiteheaderResponse(baseResponse) {
+    const currentUrl = window.location.href;
+    const rootResponse = baseResponse?.value ? baseResponse.value : baseResponse;
+    const response = JSON.parse(JSON.stringify(rootResponse));
+    response.sitedefinition.url = currentUrl;
+    response.search.formActionUrl = currentUrl;
+    if (Array.isArray(response.mainMenu?.menuItems)) {
+        response.mainMenu.menuItems.forEach((menuItem) => {
+            menuItem.href = currentUrl;
+            if (Array.isArray(menuItem.children)) {
+                menuItem.children.forEach((child) => {
+                    child.href = currentUrl;
+                });
+            }
+        });
+    }
+    return response;
+}
+const meta = {
+    title: 'Marketweb/Header/pn-marketweb-header Salesforce loader',
+    parameters: {
+        layout: 'fullscreen',
+        docs: {
+            description: {
+                story: 'Executes /umd/pn-marketweb-salesforce-header.js exactly like an external site integration. The script injects header/footer, then loads standalone-loader-salesforce.js and CSS.',
+            },
+        },
+    },
+    argTypes: {
+        hostLanguage: {
+            control: 'select',
+            options: ['da', 'en', 'en-US', 'en_US'],
+        },
+        componentVersion: {
+            control: 'text',
+            description: 'Injected into ?componentversion so the UMD bootstrap script can resolve CDN loader/CSS.',
+        },
+        useMockedResponse: {
+            control: 'boolean',
+            description: 'Intercepts /api/navigation/toggle-header to return Storybook mock data (recommended for toggler testing).',
+        },
+    },
+};
+export default meta;
+function cleanupInjectedArtifacts() {
+    clearInterval(window['renderpncomponent-interval']);
+    window.fetch = ORIGINAL_FETCH;
+    const existingReloadHandler = window[RELOAD_CLICK_HANDLER_KEY];
+    if (existingReloadHandler) {
+        document.removeEventListener('click', existingReloadHandler, true);
+        delete window[RELOAD_CLICK_HANDLER_KEY];
+    }
+    delete document.body.dataset.marketwebComponentsSalesforceInit;
+    delete document.body.dataset.marketwebComponentsSalesforceHeaderInit;
+    document
+        .querySelectorAll('pn-marketweb-header, pn-marketweb-siteheader, pn-marketweb-sitefooter, script[src*="pn-marketweb-salesforce-header.js"], script[src*="pn-marketweb-salesforce.js"], script[src*="standalone-loader-salesforce.js"], link[href*="pn-marketweb-wrongrembase.css"]')
+        .forEach((el) => el.remove());
+}
+function installHeaderLinkReloadBehavior() {
+    const reloadHandler = (event) => {
+        const path = (event.composedPath?.() ?? []);
+        const clickedLink = path.find((node) => node instanceof HTMLAnchorElement && node.hasAttribute('href'));
+        const headerHost = path.find((node) => node instanceof HTMLElement && node.tagName === 'PN-MARKETWEB-HEADER');
+        if (!clickedLink || !headerHost) {
+            return;
+        }
+        event.preventDefault();
+        const currentUrl = window.location.href;
+        window.location.href = currentUrl;
+    };
+    window[RELOAD_CLICK_HANDLER_KEY] = reloadHandler;
+    document.addEventListener('click', reloadHandler, true);
+}
+function installHeaderFetchMock(mockedResponse) {
+    window.fetch = async (input, init) => {
+        const requestUrl = typeof input === 'string'
+            ? input
+            : input instanceof URL
+                ? input.toString()
+                : input.url;
+        if (requestUrl.includes('/api/navigation/header')) {
+            return new Response(JSON.stringify(createRouteSafeSiteheaderResponse(mockedResponse)), {
+                status: 200,
+                headers: { 'Content-Type': 'application/json' },
+            });
+        }
+        if (requestUrl.includes('/api/navigation/toggle-header')) {
+            return new Response(JSON.stringify(createRouteSafeMockedResponse(mockedResponse)), {
+                status: 200,
+                headers: { 'Content-Type': 'application/json' },
+            });
+        }
+        return ORIGINAL_FETCH(input, init);
+    };
+}
+function applyComponentVersion(version) {
+    const url = new URL(window.location.href);
+    url.searchParams.set('componentversion', version);
+    window.history.replaceState({}, '', url.toString());
+}
+function renderExternalBootstrap(args) {
+    cleanupInjectedArtifacts();
+    installHeaderLinkReloadBehavior();
+    if (args.useMockedResponse) {
+        installHeaderFetchMock(TOGGLER_MOCKED_RESPONSE);
+    }
+    document.documentElement.setAttribute('lang', args.hostLanguage);
+    applyComponentVersion(args.componentVersion);
+    const root = document.createElement('div');
+    root.innerHTML =
+        '<main style="min-height:50vh;padding:2rem;background:#f8f8f8;"><h1>External host page</h1><p>The header/footer in this preview are injected by the real UMD bootstrap script, not by Storybook render code.</p></main>';
+    const script = document.createElement('script');
+    script.src = `/umd/pn-marketweb-salesforce-header.js?storyReload=${Date.now()}`;
+    document.head.appendChild(script);
+    return root;
+}
+export const ExternalSiteScript = {
+    name: 'External site script bootstrap toggle menu/mega menu(new header)',
+    render: (args) => renderExternalBootstrap(args),
+    args: {
+        hostLanguage: 'da',
+        componentVersion: '4.3.5',
+        useMockedResponse: true,
+    },
+};
+export const ExternalSiteScriptOld = {
+    name: 'External site script bootstrap siteheader (old header)',
+    render: (args) => {
+        cleanupInjectedArtifacts();
+        if (args.useMockedResponse) {
+            installHeaderFetchMock(OLD_SITEHEADER_MOCKED_RESPONSE);
+        }
+        document.documentElement.setAttribute('lang', args.hostLanguage);
+        applyComponentVersion(args.componentVersion);
+        const root = document.createElement('div');
+        root.innerHTML =
+            '<main style="min-height:50vh;padding:2rem;background:#f8f8f8;"><h1>External host page</h1><p>This preview injects the old Salesforce bootstrap script (pn-marketweb-salesforce.js).</p></main>';
+        const script = document.createElement('script');
+        script.src = `/umd/pn-marketweb-salesforce.js?storyReload=${Date.now()}`;
+        document.head.appendChild(script);
+        return root;
+    },
+    args: {
+        hostLanguage: 'da',
+        componentVersion: '4.3.5',
+        useMockedResponse: true,
+    },
+};
+//# sourceMappingURL=pn-marketweb-header-salesforce-loader.stories.js.map