npm - @postnord/pn-marketweb-components - Versions diffs - 4.0.2 → 4.0.4-test - Mend

@postnord/pn-marketweb-components 4.0.2 → 4.0.4-test

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1163) hide show

package/dist/components/pn-site-footer2.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-const pnSiteFooterCss = "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}}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}}pn-site-footer:not([theme=dotcom]){display:block;line-height:1.5}pn-site-footer:not([theme=dotcom]) a{color:#005d92}pn-site-footer:not([theme=dotcom]) a:hover{color:#0d234b;text-decoration:underline}pn-site-footer:not([theme=dotcom]) h3{font-size:2.4rem;margin-bottom:0.5rem;line-height:1.2}pn-site-footer:not([theme=dotcom]) p{font-size:1.6rem}pn-site-footer:not([theme=dotcom]) pn-site-footer-col ul.social-media{display:flex;flex-flow:row;gap:1.6rem;row-gap:1.2rem;margin-bottom:1.6rem;flex-wrap:wrap}pn-site-footer:not([theme=dotcom]) pn-site-footer-col ul.social-media li{margin-bottom:0}pn-site-footer:not([theme=dotcom])>svg{display:block}pn-site-footer:not([theme=dotcom])>div{background:#f3f2f2}pn-site-footer:not([theme=dotcom]) .pn-sitefooter-top{display:flex}pn-site-footer:not([theme=dotcom]) .pn-sitefooter-cols{align-self:center;justify-content:center;display:block;flex-flow:row wrap;margin:0 auto;max-width:90em}@media screen and (min-width: 33.125em){pn-site-footer:not([theme=dotcom]) .pn-sitefooter-cols{display:flex}}pn-site-footer:not([theme=dotcom]) .pn-sitefooter-bottom [slot=bottom]{display:flex;flex-direction:column;flex-wrap:wrap;gap:1rem;justify-content:center;max-width:90em;margin:0 auto;padding:1.6rem 0;border-top:1px solid #d3cecb;border-bottom:1px solid #d3cecb}pn-site-footer:not([theme=dotcom]) .pn-sitefooter-bottom [slot=bottom] span,pn-site-footer:not([theme=dotcom]) .pn-sitefooter-bottom [slot=bottom] a{display:flex;flex-direction:column;gap:1rem;align-items:center}pn-site-footer:not([theme=dotcom]) .pn-sitefooter-bottom [slot=bottom] a{text-decoration:underline !important}@media screen and (min-width: 768px){pn-site-footer:not([theme=dotcom]) .pn-sitefooter-bottom [slot=bottom]{gap:0;flex-direction:row}pn-site-footer:not([theme=dotcom]) .pn-sitefooter-bottom [slot=bottom] span,pn-site-footer:not([theme=dotcom]) .pn-sitefooter-bottom [slot=bottom] a{flex-direction:row;align-items:flex-start;line-height:2;margin:0 1.6rem;text-decoration:none}}pn-site-footer:not([theme=dotcom]) .pn-sitefooter-bottom [slot=bottom] li{line-height:2em;margin:0 1.6rem}pn-site-footer:not([theme=dotcom]) .pn-sitefooter-logo{display:flex;flex-wrap:wrap;justify-content:center;padding:3rem}pn-site-footer:not([theme=dotcom]) .pn-sitefooter-logo svg{display:block;width:13.3rem;height:2.6rem}pn-site-footer:not([theme=dotcom]) .pn-sitefooter-logo:has(div) a slot-fb{display:none}pn-site-footer[theme=dotcom]{width:100%;display:flex;flex-direction:column;background-color:#0d234b;margin:0 auto}pn-site-footer[theme=dotcom]>svg{background-color:#ffffff}pn-site-footer[theme=dotcom]>svg path{fill:#0d234b}pn-site-footer[theme=dotcom] .pn-sitefooter-top{width:100%;position:relative;top:-1px;background-color:#0d234b}pn-site-footer[theme=dotcom] .pn-sitefooter-top .pn-sitefooter-cols{display:flex;flex-direction:row;flex-wrap:wrap;padding-top:4.8rem;padding-left:3rem;padding-right:3rem;margin:0 auto}@media screen and (min-width: 768px){pn-site-footer[theme=dotcom] .pn-sitefooter-top .pn-sitefooter-cols{max-width:72rem}}@media screen and (min-width: 992px){pn-site-footer[theme=dotcom] .pn-sitefooter-top .pn-sitefooter-cols{max-width:96rem;padding-left:0;padding-right:0}}@media screen and (min-width: 1200px){pn-site-footer[theme=dotcom] .pn-sitefooter-top .pn-sitefooter-cols{max-width:114rem}}@media screen and (min-width: 1640px){pn-site-footer[theme=dotcom] .pn-sitefooter-top .pn-sitefooter-cols{max-width:144rem}}pn-site-footer[theme=dotcom] .pn-sitefooter-top .pn-sitefooter-cols h3{font-weight:500}pn-site-footer[theme=dotcom] .pn-sitefooter-top .pn-sitefooter-cols a:hover{text-decoration:underline;color:#ffffff}pn-site-footer[theme=dotcom] .pn-sitefooter-bottom{width:100%;padding:0.8rem 0;background-color:#0d234b}pn-site-footer[theme=dotcom] .pn-sitefooter-bottom>[slot=bottom]{max-width:120rem;margin:0 auto;padding-left:0.8rem;padding-right:0.8rem;display:flex;flex-direction:column;gap:2.4rem}@media screen and (min-width: 768px){pn-site-footer[theme=dotcom] .pn-sitefooter-bottom>[slot=bottom]{padding-left:3rem;padding-right:3rem}}pn-site-footer[theme=dotcom] .pn-sitefooter-bottom>[slot=bottom]>.social-media{display:flex;justify-content:center;padding:1.6rem 0;border-top:1px solid rgba(0, 93, 146, 0.3019607843);border-bottom:1px solid rgba(0, 93, 146, 0.3019607843)}pn-site-footer[theme=dotcom] .pn-sitefooter-bottom>[slot=bottom]>.social-media>ul{display:flex;flex-direction:row;flex-wrap:wrap;gap:2.4rem;margin:0;padding:0;list-style-type:none}pn-site-footer[theme=dotcom] .pn-sitefooter-bottom>[slot=bottom]>.social-media>ul>li:hover svg>circle{fill:#005d92}pn-site-footer[theme=dotcom] .pn-sitefooter-bottom>[slot=bottom]>.copyright{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1rem}pn-site-footer[theme=dotcom] .pn-sitefooter-bottom>[slot=bottom]>.copyright a{text-decoration:underline}pn-site-footer[theme=dotcom] .pn-sitefooter-bottom>[slot=bottom]>.copyright a:hover{text-decoration:none}@media screen and (min-width: 768px){pn-site-footer[theme=dotcom] .pn-sitefooter-bottom>[slot=bottom]>.copyright{flex-direction:row;gap:2.4rem}}pn-site-footer[theme=dotcom] .pn-sitefooter-bottom>[slot=bottom]>.copyright *{display:flex;align-items:center;color:#ffffff;font-weight:400;font-size:1.4rem;line-height:1.96rem;min-height:26px}pn-site-footer[theme=dotcom] .pn-sitefooter-bottom>[slot=bottom]>.copyright>ul{margin:0;padding:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1rem}@media screen and (min-width: 768px){pn-site-footer[theme=dotcom] .pn-sitefooter-bottom>[slot=bottom]>.copyright>ul{flex-direction:row;justify-content:flex-start;align-items:flex-start}}pn-site-footer[theme=dotcom] .pn-sitefooter-bottom>[slot=bottom]>.copyright>ul>li{display:inline}pn-site-footer[theme=dotcom] .pn-sitefooter-bottom>[slot=bottom]>.copyright>ul>li:first-child{margin-left:0}@media screen and (min-width: 768px){pn-site-footer[theme=dotcom] .pn-sitefooter-bottom>[slot=bottom]>.copyright>ul>li{margin-left:2.4rem}}pn-site-footer[theme=dotcom] .pn-sitefooter-logo{padding:3rem;margin:0 auto}pn-site-footer[theme=dotcom] .pn-sitefooter-logo [name=logo]>svg{display:block;width:13.3rem;height:2.6rem}pn-site-footer[theme=dotcom] .pn-sitefooter-logo [name=logo]>svg>path{fill:#00a0d6}";
+const pnSiteFooterCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-site-footer:not([theme=dotcom]){display:block;line-height:1.5}pn-site-footer:not([theme=dotcom]) a{color:#005d92}pn-site-footer:not([theme=dotcom]) a:hover{color:#0d234b;text-decoration:underline}pn-site-footer:not([theme=dotcom]) h3{font-size:2.4rem;margin-bottom:0.5rem;line-height:1.2}pn-site-footer:not([theme=dotcom]) p{font-size:1.6rem}pn-site-footer:not([theme=dotcom]) pn-site-footer-col ul.social-media{display:flex;flex-flow:row;gap:1.6rem;row-gap:1.2rem;margin-bottom:1.6rem;flex-wrap:wrap}pn-site-footer:not([theme=dotcom]) pn-site-footer-col ul.social-media li{margin-bottom:0}pn-site-footer:not([theme=dotcom])>svg{display:block}pn-site-footer:not([theme=dotcom])>div{background:#f3f2f2}pn-site-footer:not([theme=dotcom]) .pn-sitefooter-top{display:flex}pn-site-footer:not([theme=dotcom]) .pn-sitefooter-cols{align-self:center;justify-content:center;display:block;flex-flow:row wrap;margin:0 auto;max-width:90em}@media screen and (min-width: 33.125em){pn-site-footer:not([theme=dotcom]) .pn-sitefooter-cols{display:flex}}pn-site-footer:not([theme=dotcom]) .pn-sitefooter-bottom [slot=bottom]{display:flex;flex-direction:column;flex-wrap:wrap;gap:1rem;justify-content:center;max-width:90em;margin:0 auto;padding:1.6rem 0;border-top:1px solid #d3cecb;border-bottom:1px solid #d3cecb}pn-site-footer:not([theme=dotcom]) .pn-sitefooter-bottom [slot=bottom] span,pn-site-footer:not([theme=dotcom]) .pn-sitefooter-bottom [slot=bottom] a{display:flex;flex-direction:column;gap:1rem;align-items:center}pn-site-footer:not([theme=dotcom]) .pn-sitefooter-bottom [slot=bottom] a{text-decoration:underline !important}@media screen and (min-width: 768px){pn-site-footer:not([theme=dotcom]) .pn-sitefooter-bottom [slot=bottom]{gap:0;flex-direction:row}pn-site-footer:not([theme=dotcom]) .pn-sitefooter-bottom [slot=bottom] span,pn-site-footer:not([theme=dotcom]) .pn-sitefooter-bottom [slot=bottom] a{flex-direction:row;align-items:flex-start;line-height:2;margin:0 1.6rem;text-decoration:none}}pn-site-footer:not([theme=dotcom]) .pn-sitefooter-bottom [slot=bottom] li{line-height:2em;margin:0 1.6rem}pn-site-footer:not([theme=dotcom]) .pn-sitefooter-logo{display:flex;flex-wrap:wrap;justify-content:center;padding:3rem}pn-site-footer:not([theme=dotcom]) .pn-sitefooter-logo svg{display:block;width:13.3rem;height:2.6rem}pn-site-footer:not([theme=dotcom]) .pn-sitefooter-logo:has(div) a slot-fb{display:none}pn-site-footer[theme=dotcom]{width:100%;display:flex;flex-direction:column;background-color:#0d234b;margin:0 auto}pn-site-footer[theme=dotcom]>svg{background-color:#ffffff}pn-site-footer[theme=dotcom]>svg path{fill:#0d234b}pn-site-footer[theme=dotcom] .pn-sitefooter-top{width:100%;position:relative;top:-1px;background-color:#0d234b}pn-site-footer[theme=dotcom] .pn-sitefooter-top .pn-sitefooter-cols{display:flex;flex-direction:row;flex-wrap:wrap;padding-top:4.8rem;padding-left:3rem;padding-right:3rem;margin:0 auto}@media screen and (min-width: 768px){pn-site-footer[theme=dotcom] .pn-sitefooter-top .pn-sitefooter-cols{max-width:72rem}}@media screen and (min-width: 992px){pn-site-footer[theme=dotcom] .pn-sitefooter-top .pn-sitefooter-cols{max-width:96rem;padding-left:0;padding-right:0}}@media screen and (min-width: 1200px){pn-site-footer[theme=dotcom] .pn-sitefooter-top .pn-sitefooter-cols{max-width:114rem}}@media screen and (min-width: 1640px){pn-site-footer[theme=dotcom] .pn-sitefooter-top .pn-sitefooter-cols{max-width:144rem}}pn-site-footer[theme=dotcom] .pn-sitefooter-top .pn-sitefooter-cols h3{font-weight:500}pn-site-footer[theme=dotcom] .pn-sitefooter-top .pn-sitefooter-cols a:hover{text-decoration:underline;color:#ffffff}pn-site-footer[theme=dotcom] .pn-sitefooter-bottom{width:100%;padding:0.8rem 0;background-color:#0d234b}pn-site-footer[theme=dotcom] .pn-sitefooter-bottom>[slot=bottom]{max-width:120rem;margin:0 auto;padding-left:0.8rem;padding-right:0.8rem;display:flex;flex-direction:column;gap:2.4rem}@media screen and (min-width: 768px){pn-site-footer[theme=dotcom] .pn-sitefooter-bottom>[slot=bottom]{padding-left:3rem;padding-right:3rem}}pn-site-footer[theme=dotcom] .pn-sitefooter-bottom>[slot=bottom]>.social-media{display:flex;justify-content:center;padding:1.6rem 0;border-top:1px solid rgba(0, 93, 146, 0.3019607843);border-bottom:1px solid rgba(0, 93, 146, 0.3019607843)}pn-site-footer[theme=dotcom] .pn-sitefooter-bottom>[slot=bottom]>.social-media>ul{display:flex;flex-direction:row;flex-wrap:wrap;gap:2.4rem;margin:0;padding:0;list-style-type:none}pn-site-footer[theme=dotcom] .pn-sitefooter-bottom>[slot=bottom]>.social-media>ul>li:hover svg>circle{fill:#005d92}pn-site-footer[theme=dotcom] .pn-sitefooter-bottom>[slot=bottom]>.copyright{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1rem}pn-site-footer[theme=dotcom] .pn-sitefooter-bottom>[slot=bottom]>.copyright a{text-decoration:underline}pn-site-footer[theme=dotcom] .pn-sitefooter-bottom>[slot=bottom]>.copyright a:hover{text-decoration:none}@media screen and (min-width: 768px){pn-site-footer[theme=dotcom] .pn-sitefooter-bottom>[slot=bottom]>.copyright{flex-direction:row;gap:2.4rem}}pn-site-footer[theme=dotcom] .pn-sitefooter-bottom>[slot=bottom]>.copyright *{display:flex;align-items:center;color:#ffffff;font-weight:400;font-size:1.4rem;line-height:1.96rem;min-height:26px}pn-site-footer[theme=dotcom] .pn-sitefooter-bottom>[slot=bottom]>.copyright>ul{margin:0;padding:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1rem}@media screen and (min-width: 768px){pn-site-footer[theme=dotcom] .pn-sitefooter-bottom>[slot=bottom]>.copyright>ul{flex-direction:row;justify-content:flex-start;align-items:flex-start}}pn-site-footer[theme=dotcom] .pn-sitefooter-bottom>[slot=bottom]>.copyright>ul>li{display:inline}pn-site-footer[theme=dotcom] .pn-sitefooter-bottom>[slot=bottom]>.copyright>ul>li:first-child{margin-left:0}@media screen and (min-width: 768px){pn-site-footer[theme=dotcom] .pn-sitefooter-bottom>[slot=bottom]>.copyright>ul>li{margin-left:2.4rem}}pn-site-footer[theme=dotcom] .pn-sitefooter-logo{padding:3rem;margin:0 auto}pn-site-footer[theme=dotcom] .pn-sitefooter-logo [name=logo]>svg{display:block;width:13.3rem;height:2.6rem}pn-site-footer[theme=dotcom] .pn-sitefooter-logo [name=logo]>svg>path{fill:#00a0d6}";
 const PnSiteFooterStyle0 = pnSiteFooterCss;
 const PnSiteFooter = /*@__PURE__*/ proxyCustomElement(class PnSiteFooter extends HTMLElement {
@@ -13,7 +13,7 @@ const PnSiteFooter = /*@__PURE__*/ proxyCustomElement(class PnSiteFooter extends
     }
     componentWillLoad() { }
     render() {
-        return (h(Host, { key: 'c7677a0c717209be174c7b9e13404fbdec1b25fc' }, h("svg", { key: '35121c3693be25165da4e2a4d1b209923640003a', fill: "none", viewBox: "0 0 1680 126", role: "presentation" }, h("path", { key: 'bd5a475f1fba23a9123a82d1eda69ec7adf305cc', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M0 124.425C265.751 43.517 547.794 0 840 0c292.21 0 574.25 43.517 840 124.425V126H0v-1.575z", fill: "#F3F2F2" })), h("div", { key: '896a62bb9c9d4b1dded5f356e996dc888f89292a', class: "pn-sitefooter-top" }, h("div", { key: '0186f296e49ea0897567448732c4a8a2b83b3714', class: "pn-sitefooter-cols" }, h("slot", { key: 'a5b3a6b15cbd4595a128831c4b26999883a1d7f8' }))), h("div", { key: '0e3be31147926f0b9c598eb875ade2900cd03780', class: "pn-sitefooter-bottom" }, h("slot", { key: 'd95b961f5dd8478e3f49dba6a91654eb6c9b3adf', name: "bottom" })), h("div", { key: '01bbd833042eb7d647a29180910cff35df9f42b3', class: "pn-sitefooter-logo" }, h("a", { key: 'd2ca02a908a94169242346ac84bcefe1e080fff7', href: this.url, title: this.linktitle, "aria-label": this.linktitle }, h("slot", { key: '37a4f84c271577e3245d92ba99612e1ccc5bb3d6', name: "logo" }, h("svg", { key: '72bb821ebf969e6d39f7568ffa009f7ab8a6109b', viewBox: "0 0 133 26", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img", "aria-label": "PostNord" }, h("path", { key: 'b675d2af4df7e3f2418be6599d5d0879a0273748', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M132.749 0.333618V20.9198H126.976V19.3809C126.976 19.3809 125.475 21.4316 122.191 21.4316C117.381 21.4316 114.662 17.7015 114.662 13.0327C114.662 8.47612 117.776 4.7187 122.617 4.7187C125.589 4.7187 126.976 6.19924 126.976 6.19924V1.47206L132.749 0.333618ZM54.2322 1.67091H60.0055V5.20216H65.3564L62.7235 10.0999H60.0055V20.9198H54.2322V1.67091ZM28.2484 21.4023C32.8051 21.4023 37.6446 18.8974 37.6446 12.9187C37.6446 7.16616 32.9746 4.69042 28.4461 4.69042C23.8042 4.69042 19.049 7.25192 19.049 13.175C19.049 18.9549 23.7199 21.4023 28.2484 21.4023ZM28.3327 9.78608C30.2294 9.78608 31.5032 11.1243 31.5032 13.0902C31.5032 14.9392 30.2575 16.3076 28.3327 16.3076C26.437 16.3076 25.1351 14.9392 25.1351 13.0902C25.1351 11.1243 26.4089 9.78608 28.3327 9.78608ZM47.0708 10.8963C46.8158 10.8574 46.5804 10.8239 46.3639 10.7931C44.9938 10.5979 44.3827 10.5108 44.3827 9.87279C44.3827 9.24608 45.146 8.9888 46.6465 8.9888C49.1941 8.9888 51.4298 9.84357 51.4298 9.84357L52.4488 5.43022C52.4488 5.43022 49.9865 4.71869 46.7027 4.71869C41.1841 4.71869 38.2965 6.85422 38.2965 10.2705C38.2965 12.9187 39.8532 14.485 44.4108 15.0825C46.3355 15.3388 47.0427 15.4519 47.0427 16.1644C47.0427 16.8486 46.2784 17.0757 44.9484 17.0757C42.0608 17.0757 39.3437 15.8515 39.3437 15.8515L38.1832 20.4081C38.1832 20.4081 40.9003 21.375 44.4389 21.375C50.3826 21.375 53.1279 19.2668 53.1279 15.8223C53.1279 13.0902 51.6555 11.6087 47.0708 10.8963ZM76.1968 4.69042C72.8287 4.69042 71.6111 6.74018 71.6111 6.74018V5.20216H65.8369V20.9198H71.6111V12.8612C71.6111 10.8689 72.3483 9.95666 74.1297 9.95666C75.913 9.95666 76.1687 11.4381 76.1687 13.3173V20.9198H81.9982V11.2666C81.9982 6.93903 79.9339 4.69042 76.1968 4.69042ZM123.948 9.8153C125.843 9.8153 127.144 11.1818 127.144 13.0327C127.144 14.9958 125.87 16.335 123.948 16.335C122.051 16.335 120.778 14.9958 120.778 13.0327C120.778 11.1818 122.024 9.8153 123.948 9.8153ZM112.456 10.213C110.53 10.213 109.088 10.9537 109.088 13.3456V20.9198H103.313V5.20216H109.088V7.02479C109.088 7.02479 109.965 4.97409 113.191 4.97409C114.181 4.97409 114.55 5.14467 114.55 5.14467L114.408 10.4976C114.408 10.4976 113.643 10.213 112.456 10.213ZM11.9728 13.0902C11.9728 11.1243 10.699 9.78608 8.80235 9.78608C6.87853 9.78608 5.6038 11.1243 5.6038 13.0902C5.6038 14.9392 6.9057 16.3076 8.80235 16.3076C10.728 16.3076 11.9728 14.9392 11.9728 13.0902ZM10.1333 21.4023C14.9728 21.4023 18.0871 17.6468 18.0871 13.0902C18.0871 8.41958 15.3699 4.69042 10.5576 4.69042C7.27472 4.69042 5.77426 6.74018 5.77426 6.74018V5.20216H0V25.4453H5.77426V19.9227C5.77426 19.9227 7.16139 21.4023 10.1333 21.4023ZM95.7984 13.0902C95.7984 11.1243 94.5246 9.78608 92.6279 9.78608C90.7032 9.78608 89.4284 11.1243 89.4284 13.0902C89.4284 14.9392 90.7322 16.3076 92.6279 16.3076C94.5536 16.3076 95.7984 14.9392 95.7984 13.0902ZM92.5427 21.4023C97.0994 21.4023 101.94 18.8974 101.94 12.9187C101.94 7.16616 97.2698 4.69042 92.7413 4.69042C88.0984 4.69042 83.3442 7.25192 83.3442 13.175C83.3442 18.9549 88.0142 21.4023 92.5427 21.4023Z", fill: "black" })))))));
+        return (h(Host, { key: 'c8467bef98389340ea034c714bfe2753da67f68a' }, h("svg", { key: '242201e96f09d092eebd3fb903c6fbf15d7953da', fill: "none", viewBox: "0 0 1680 126", role: "presentation" }, h("path", { key: '227f3ee48145e422d41d88a578d1a0dd687031e2', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M0 124.425C265.751 43.517 547.794 0 840 0c292.21 0 574.25 43.517 840 124.425V126H0v-1.575z", fill: "#F3F2F2" })), h("div", { key: '205d20116b326660e6f9d15faab33131f256eb22', class: "pn-sitefooter-top" }, h("div", { key: '7f5e1c8daf2275f87c0015e375b430fc4874a191', class: "pn-sitefooter-cols" }, h("slot", { key: '3c29a9e6d8c5a2e91d9d089841727ebcc1b6f0b6' }))), h("div", { key: '4587736d3803a4f00fa861ebe137c4863c3a61fc', class: "pn-sitefooter-bottom" }, h("slot", { key: '94d70e42dcd9f12460abe3503f4e8329e6e2e34c', name: "bottom" })), h("div", { key: '91bab511bcb143fad35daef0d50be62dc59118c0', class: "pn-sitefooter-logo" }, h("a", { key: '5bf5357778030bf6f3e797fcb011759750356086', href: this.url, title: this.linktitle, "aria-label": this.linktitle }, h("slot", { key: '0e399370c9e274976aa924cdc818510423dbf298', name: "logo" }, h("svg", { key: '89df826f8d0b13a8bf7a945040ecb27bc3534679', viewBox: "0 0 133 26", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img", "aria-label": "PostNord" }, h("path", { key: '82d347ca33c36d88ff0693a39ff86cc4471c2ba7', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M132.749 0.333618V20.9198H126.976V19.3809C126.976 19.3809 125.475 21.4316 122.191 21.4316C117.381 21.4316 114.662 17.7015 114.662 13.0327C114.662 8.47612 117.776 4.7187 122.617 4.7187C125.589 4.7187 126.976 6.19924 126.976 6.19924V1.47206L132.749 0.333618ZM54.2322 1.67091H60.0055V5.20216H65.3564L62.7235 10.0999H60.0055V20.9198H54.2322V1.67091ZM28.2484 21.4023C32.8051 21.4023 37.6446 18.8974 37.6446 12.9187C37.6446 7.16616 32.9746 4.69042 28.4461 4.69042C23.8042 4.69042 19.049 7.25192 19.049 13.175C19.049 18.9549 23.7199 21.4023 28.2484 21.4023ZM28.3327 9.78608C30.2294 9.78608 31.5032 11.1243 31.5032 13.0902C31.5032 14.9392 30.2575 16.3076 28.3327 16.3076C26.437 16.3076 25.1351 14.9392 25.1351 13.0902C25.1351 11.1243 26.4089 9.78608 28.3327 9.78608ZM47.0708 10.8963C46.8158 10.8574 46.5804 10.8239 46.3639 10.7931C44.9938 10.5979 44.3827 10.5108 44.3827 9.87279C44.3827 9.24608 45.146 8.9888 46.6465 8.9888C49.1941 8.9888 51.4298 9.84357 51.4298 9.84357L52.4488 5.43022C52.4488 5.43022 49.9865 4.71869 46.7027 4.71869C41.1841 4.71869 38.2965 6.85422 38.2965 10.2705C38.2965 12.9187 39.8532 14.485 44.4108 15.0825C46.3355 15.3388 47.0427 15.4519 47.0427 16.1644C47.0427 16.8486 46.2784 17.0757 44.9484 17.0757C42.0608 17.0757 39.3437 15.8515 39.3437 15.8515L38.1832 20.4081C38.1832 20.4081 40.9003 21.375 44.4389 21.375C50.3826 21.375 53.1279 19.2668 53.1279 15.8223C53.1279 13.0902 51.6555 11.6087 47.0708 10.8963ZM76.1968 4.69042C72.8287 4.69042 71.6111 6.74018 71.6111 6.74018V5.20216H65.8369V20.9198H71.6111V12.8612C71.6111 10.8689 72.3483 9.95666 74.1297 9.95666C75.913 9.95666 76.1687 11.4381 76.1687 13.3173V20.9198H81.9982V11.2666C81.9982 6.93903 79.9339 4.69042 76.1968 4.69042ZM123.948 9.8153C125.843 9.8153 127.144 11.1818 127.144 13.0327C127.144 14.9958 125.87 16.335 123.948 16.335C122.051 16.335 120.778 14.9958 120.778 13.0327C120.778 11.1818 122.024 9.8153 123.948 9.8153ZM112.456 10.213C110.53 10.213 109.088 10.9537 109.088 13.3456V20.9198H103.313V5.20216H109.088V7.02479C109.088 7.02479 109.965 4.97409 113.191 4.97409C114.181 4.97409 114.55 5.14467 114.55 5.14467L114.408 10.4976C114.408 10.4976 113.643 10.213 112.456 10.213ZM11.9728 13.0902C11.9728 11.1243 10.699 9.78608 8.80235 9.78608C6.87853 9.78608 5.6038 11.1243 5.6038 13.0902C5.6038 14.9392 6.9057 16.3076 8.80235 16.3076C10.728 16.3076 11.9728 14.9392 11.9728 13.0902ZM10.1333 21.4023C14.9728 21.4023 18.0871 17.6468 18.0871 13.0902C18.0871 8.41958 15.3699 4.69042 10.5576 4.69042C7.27472 4.69042 5.77426 6.74018 5.77426 6.74018V5.20216H0V25.4453H5.77426V19.9227C5.77426 19.9227 7.16139 21.4023 10.1333 21.4023ZM95.7984 13.0902C95.7984 11.1243 94.5246 9.78608 92.6279 9.78608C90.7032 9.78608 89.4284 11.1243 89.4284 13.0902C89.4284 14.9392 90.7322 16.3076 92.6279 16.3076C94.5536 16.3076 95.7984 14.9392 95.7984 13.0902ZM92.5427 21.4023C97.0994 21.4023 101.94 18.8974 101.94 12.9187C101.94 7.16616 97.2698 4.69042 92.7413 4.69042C88.0984 4.69042 83.3442 7.25192 83.3442 13.175C83.3442 18.9549 88.0142 21.4023 92.5427 21.4023Z", fill: "black" })))))));
     }
     static get style() { return PnSiteFooterStyle0; }
 }, [4, "pn-site-footer", {

package/dist/components/pn-site-footer2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pn-site-footer2.js","mappings":";;AAAA,MAAM,eAAe,GAAG,i9NAAi9N,CAAC;AAC1+N,2BAAe,eAAe;;MCKjB,YAAY;;;;mBAED,GAAG;yBACG,UAAU;qBACG,IAAI;;IAE7C,iBAAiB,MAAK;IAEtB,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,cAAc,EAAC,IAAI,EAAC,cAAc,IACzD,0EAAgB,SAAS,eAAW,SAAS,EAAC,CAAC,EAAC,4FAA4F,EAAC,IAAI,EAAC,SAAS,GAAQ,CAC/J,EACN,4DAAK,KAAK,EAAC,mBAAmB,IAC5B,4DAAK,KAAK,EAAC,oBAAoB,IAC7B,8DAAQ,CACJ,CACF,EACN,4DAAK,KAAK,EAAC,sBAAsB,IAC/B,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,EACN,4DAAK,KAAK,EAAC,oBAAoB,IAC7B,0DAAG,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,SAAS,gBAAc,IAAI,CAAC,SAAS,IAClE,6DAAM,IAAI,EAAC,MAAM,IACf,4DAAK,OAAO,EAAC,YAAY,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,KAAK,gBAAY,UAAU,IACvG,0EACY,SAAS,eACT,SAAS,EACnB,CAAC,EAAC,w8FAAw8F,EAC18F,IAAI,EAAC,OAAO,GACN,CACJ,CACD,CACL,CACA,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/navigation/pn-site-footer/pn-site-footer.scss?tag=pn-site-footer","src/components/navigation/pn-site-footer/pn-site-footer.tsx"],"sourcesContent":["@import './pn-site-footer-common.scss';\n@import '../../../globals/main.scss';\n\npn-site-footer:not([theme='dotcom']) {\n display: block;\n line-height: 1.5;\n a {\n color: $blue700;\n &:hover {\n color: $blue900;\n text-decoration: underline;\n }\n }\n\n h3 {\n font-size: 2.4rem;\n margin-bottom: 0.5rem;\n line-height: 1.2;\n }\n p {\n font-size: 1.6rem;\n }\n\n pn-site-footer-col ul.social-media {\n display: flex;\n flex-flow: row;\n gap: 1.6rem;\n row-gap: 1.2rem;\n margin-bottom: 1.6rem;\n flex-wrap: wrap;\n\n li {\n margin-bottom: 0;\n }\n }\n > svg {\n display: block;\n }\n > div {\n background: $gray50;\n }\n\n .pn-sitefooter-top {\n display: flex;\n }\n\n .pn-sitefooter-cols {\n align-self: center;\n justify-content: center;\n display: block;\n flex-flow: row wrap;\n margin: 0 auto;\n max-width: 90em;\n\n @media screen and (min-width: $sitefooter-media-phoneheight) {\n display: flex;\n }\n }\n\n .pn-sitefooter-bottom [slot='bottom'] {\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n gap: 1rem;\n justify-content: center;\n max-width: 90em;\n margin: 0 auto;\n padding: 1.6rem 0;\n border-top: 1px solid $gray200;\n border-bottom: 1px solid $gray200;\n\n span,\n a {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n align-items: center;\n }\n\n a {\n text-decoration: underline !important;\n }\n\n @media screen and (min-width: $min-width-md) {\n gap: 0;\n flex-direction: row;\n \n span,\n a {\n flex-direction: row;\n align-items: flex-start;\n line-height: 2;\n margin: 0 1.6rem;\n text-decoration: none;\n }\n }\n\n li {\n line-height: 2em;\n margin: 0 1.6rem;\n }\n }\n\n .pn-sitefooter-logo {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n padding: 3rem;\n svg {\n display: block;\n width: 13.3rem;\n height: 2.6rem;\n }\n &:has(div) a slot-fb {\n display: none;\n }\n }\n}\n\npn-site-footer[theme='dotcom'] {\n width: 100%;\n display: flex;\n flex-direction: column;\n background-color: $blue900;\n margin: 0 auto;\n\n & > svg {\n background-color: $white;\n path {\n fill: $blue900;\n }\n }\n\n .pn-sitefooter-top {\n width: 100%;\n position: relative;\n top: -1px;\n\n background-color: $blue900;\n\n .pn-sitefooter-cols {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding-top: 4.8rem;\n padding-left: 3rem;\n padding-right: 3rem;\n\n margin: 0 auto;\n\n @media screen and (min-width: $min-width-md) {\n max-width: 72rem;\n }\n\n @media screen and (min-width: $min-width-lg) {\n max-width: 96rem;\n padding-left: 0;\n padding-right: 0;\n }\n\n @media screen and (min-width: $min-width-xl) {\n max-width: 114rem;\n }\n\n @media screen and (min-width: $min-width-xxl) {\n max-width: 144rem;\n }\n\n h3 {\n font-weight: 500;\n }\n\n a:hover {\n text-decoration: underline;\n color: $white;\n }\n }\n }\n\n .pn-sitefooter-bottom {\n width: 100%;\n padding: 0.8rem 0;\n background-color: $blue900;\n\n & > [slot='bottom'] {\n max-width: 120rem;\n margin: 0 auto;\n padding-left: .8rem;\n padding-right: .8rem;\n\n @media screen and (min-width: $min-width-md) {\n padding-left: 3rem;\n padding-right: 3rem;\n }\n\n display: flex;\n flex-direction: column;\n gap: 2.4rem;\n\n & > .social-media {\n display: flex;\n justify-content: center;\n\n padding: 1.6rem 0;\n border-top: 1px solid #005d924d;\n border-bottom: 1px solid #005d924d;\n\n & > ul {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n gap: 2.4rem;\n\n margin: 0;\n padding: 0;\n list-style-type: none;\n\n & > li:hover {\n svg > circle {\n fill: $blue700;\n }\n }\n }\n }\n\n & > .copyright {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 1rem;\n\n a {\n text-decoration: underline;\n\n &:hover {\n text-decoration: none;\n }\n }\n \n @media screen and (min-width: $min-width-md) {\n flex-direction: row;\n gap: 2.4rem;\n }\n\n & * {\n display: flex;\n align-items: center;\n color: $white;\n font-weight: 400;\n font-size: 1.4rem;\n line-height: 1.96rem;\n min-height: 26px;\n }\n \n & > ul {\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 1rem;\n\n @media screen and (min-width: $min-width-md) {\n flex-direction: row;\n justify-content: flex-start;\n align-items: flex-start;\n }\n\n & > li {\n display: inline;\n &:first-child {\n margin-left: 0;\n }\n @media screen and (min-width: $min-width-md) {\n margin-left: 2.4rem;\n }\n }\n }\n }\n }\n }\n\n .pn-sitefooter-logo {\n padding: 3rem;\n margin: 0 auto;\n [name='logo'] {\n & > svg {\n display: block;\n width: 13.3rem;\n height: 2.6rem;\n & > path {\n fill: $blue400;\n }\n }\n }\n }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'pn-site-footer',\n styleUrl: 'pn-site-footer.scss',\n})\nexport class PnSiteFooter {\n /** What you write in the comment block above each prop is what ends up in the description fields in the prop table in the documentation */\n @Prop() url: string = '#';\n @Prop() linktitle: string = 'PostNord';\n @Prop({ reflect: true }) theme: string = null;\n\n componentWillLoad() {}\n\n render() {\n return (\n <Host>\n <svg fill=\"none\" viewBox=\"0 0 1680 126\" role=\"presentation\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M0 124.425C265.751 43.517 547.794 0 840 0c292.21 0 574.25 43.517 840 124.425V126H0v-1.575z\" fill=\"#F3F2F2\"></path>\n </svg>\n <div class=\"pn-sitefooter-top\">\n <div class=\"pn-sitefooter-cols\">\n <slot />\n </div>\n </div>\n <div class=\"pn-sitefooter-bottom\">\n <slot name=\"bottom\" />\n </div>\n <div class=\"pn-sitefooter-logo\">\n <a href={this.url} title={this.linktitle} aria-label={this.linktitle}>\n <slot name=\"logo\">\n <svg viewBox=\"0 0 133 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" aria-label=\"PostNord\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M132.749 0.333618V20.9198H126.976V19.3809C126.976 19.3809 125.475 21.4316 122.191 21.4316C117.381 21.4316 114.662 17.7015 114.662 13.0327C114.662 8.47612 117.776 4.7187 122.617 4.7187C125.589 4.7187 126.976 6.19924 126.976 6.19924V1.47206L132.749 0.333618ZM54.2322 1.67091H60.0055V5.20216H65.3564L62.7235 10.0999H60.0055V20.9198H54.2322V1.67091ZM28.2484 21.4023C32.8051 21.4023 37.6446 18.8974 37.6446 12.9187C37.6446 7.16616 32.9746 4.69042 28.4461 4.69042C23.8042 4.69042 19.049 7.25192 19.049 13.175C19.049 18.9549 23.7199 21.4023 28.2484 21.4023ZM28.3327 9.78608C30.2294 9.78608 31.5032 11.1243 31.5032 13.0902C31.5032 14.9392 30.2575 16.3076 28.3327 16.3076C26.437 16.3076 25.1351 14.9392 25.1351 13.0902C25.1351 11.1243 26.4089 9.78608 28.3327 9.78608ZM47.0708 10.8963C46.8158 10.8574 46.5804 10.8239 46.3639 10.7931C44.9938 10.5979 44.3827 10.5108 44.3827 9.87279C44.3827 9.24608 45.146 8.9888 46.6465 8.9888C49.1941 8.9888 51.4298 9.84357 51.4298 9.84357L52.4488 5.43022C52.4488 5.43022 49.9865 4.71869 46.7027 4.71869C41.1841 4.71869 38.2965 6.85422 38.2965 10.2705C38.2965 12.9187 39.8532 14.485 44.4108 15.0825C46.3355 15.3388 47.0427 15.4519 47.0427 16.1644C47.0427 16.8486 46.2784 17.0757 44.9484 17.0757C42.0608 17.0757 39.3437 15.8515 39.3437 15.8515L38.1832 20.4081C38.1832 20.4081 40.9003 21.375 44.4389 21.375C50.3826 21.375 53.1279 19.2668 53.1279 15.8223C53.1279 13.0902 51.6555 11.6087 47.0708 10.8963ZM76.1968 4.69042C72.8287 4.69042 71.6111 6.74018 71.6111 6.74018V5.20216H65.8369V20.9198H71.6111V12.8612C71.6111 10.8689 72.3483 9.95666 74.1297 9.95666C75.913 9.95666 76.1687 11.4381 76.1687 13.3173V20.9198H81.9982V11.2666C81.9982 6.93903 79.9339 4.69042 76.1968 4.69042ZM123.948 9.8153C125.843 9.8153 127.144 11.1818 127.144 13.0327C127.144 14.9958 125.87 16.335 123.948 16.335C122.051 16.335 120.778 14.9958 120.778 13.0327C120.778 11.1818 122.024 9.8153 123.948 9.8153ZM112.456 10.213C110.53 10.213 109.088 10.9537 109.088 13.3456V20.9198H103.313V5.20216H109.088V7.02479C109.088 7.02479 109.965 4.97409 113.191 4.97409C114.181 4.97409 114.55 5.14467 114.55 5.14467L114.408 10.4976C114.408 10.4976 113.643 10.213 112.456 10.213ZM11.9728 13.0902C11.9728 11.1243 10.699 9.78608 8.80235 9.78608C6.87853 9.78608 5.6038 11.1243 5.6038 13.0902C5.6038 14.9392 6.9057 16.3076 8.80235 16.3076C10.728 16.3076 11.9728 14.9392 11.9728 13.0902ZM10.1333 21.4023C14.9728 21.4023 18.0871 17.6468 18.0871 13.0902C18.0871 8.41958 15.3699 4.69042 10.5576 4.69042C7.27472 4.69042 5.77426 6.74018 5.77426 6.74018V5.20216H0V25.4453H5.77426V19.9227C5.77426 19.9227 7.16139 21.4023 10.1333 21.4023ZM95.7984 13.0902C95.7984 11.1243 94.5246 9.78608 92.6279 9.78608C90.7032 9.78608 89.4284 11.1243 89.4284 13.0902C89.4284 14.9392 90.7322 16.3076 92.6279 16.3076C94.5536 16.3076 95.7984 14.9392 95.7984 13.0902ZM92.5427 21.4023C97.0994 21.4023 101.94 18.8974 101.94 12.9187C101.94 7.16616 97.2698 4.69042 92.7413 4.69042C88.0984 4.69042 83.3442 7.25192 83.3442 13.175C83.3442 18.9549 88.0142 21.4023 92.5427 21.4023Z\"\n fill=\"black\"\n ></path>\n </svg>\n </slot>\n </a>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pn-site-footer2.js","mappings":";;AAAA,MAAM,eAAe,GAAG,+zMAA+zM,CAAC;AACx1M,2BAAe,eAAe;;MCKjB,YAAY;;;;mBAED,GAAG;yBACG,UAAU;qBACG,IAAI;;IAE7C,iBAAiB,MAAK;IAEtB,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,cAAc,EAAC,IAAI,EAAC,cAAc,IACzD,0EAAgB,SAAS,eAAW,SAAS,EAAC,CAAC,EAAC,4FAA4F,EAAC,IAAI,EAAC,SAAS,GAAQ,CAC/J,EACN,4DAAK,KAAK,EAAC,mBAAmB,IAC5B,4DAAK,KAAK,EAAC,oBAAoB,IAC7B,8DAAQ,CACJ,CACF,EACN,4DAAK,KAAK,EAAC,sBAAsB,IAC/B,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,EACN,4DAAK,KAAK,EAAC,oBAAoB,IAC7B,0DAAG,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,SAAS,gBAAc,IAAI,CAAC,SAAS,IAClE,6DAAM,IAAI,EAAC,MAAM,IACf,4DAAK,OAAO,EAAC,YAAY,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,KAAK,gBAAY,UAAU,IACvG,0EACY,SAAS,eACT,SAAS,EACnB,CAAC,EAAC,w8FAAw8F,EAC18F,IAAI,EAAC,OAAO,GACN,CACJ,CACD,CACL,CACA,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/navigation/pn-site-footer/pn-site-footer.scss?tag=pn-site-footer","src/components/navigation/pn-site-footer/pn-site-footer.tsx"],"sourcesContent":["@import './pn-site-footer-common.scss';\n@import '../../../globals/main.scss';\n\npn-site-footer:not([theme='dotcom']) {\n display: block;\n line-height: 1.5;\n a {\n color: $blue700;\n &:hover {\n color: $blue900;\n text-decoration: underline;\n }\n }\n\n h3 {\n font-size: 2.4rem;\n margin-bottom: 0.5rem;\n line-height: 1.2;\n }\n p {\n font-size: 1.6rem;\n }\n\n pn-site-footer-col ul.social-media {\n display: flex;\n flex-flow: row;\n gap: 1.6rem;\n row-gap: 1.2rem;\n margin-bottom: 1.6rem;\n flex-wrap: wrap;\n\n li {\n margin-bottom: 0;\n }\n }\n > svg {\n display: block;\n }\n > div {\n background: $gray50;\n }\n\n .pn-sitefooter-top {\n display: flex;\n }\n\n .pn-sitefooter-cols {\n align-self: center;\n justify-content: center;\n display: block;\n flex-flow: row wrap;\n margin: 0 auto;\n max-width: 90em;\n\n @media screen and (min-width: $sitefooter-media-phoneheight) {\n display: flex;\n }\n }\n\n .pn-sitefooter-bottom [slot='bottom'] {\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n gap: 1rem;\n justify-content: center;\n max-width: 90em;\n margin: 0 auto;\n padding: 1.6rem 0;\n border-top: 1px solid $gray200;\n border-bottom: 1px solid $gray200;\n\n span,\n a {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n align-items: center;\n }\n\n a {\n text-decoration: underline !important;\n }\n\n @media screen and (min-width: $min-width-md) {\n gap: 0;\n flex-direction: row;\n \n span,\n a {\n flex-direction: row;\n align-items: flex-start;\n line-height: 2;\n margin: 0 1.6rem;\n text-decoration: none;\n }\n }\n\n li {\n line-height: 2em;\n margin: 0 1.6rem;\n }\n }\n\n .pn-sitefooter-logo {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n padding: 3rem;\n svg {\n display: block;\n width: 13.3rem;\n height: 2.6rem;\n }\n &:has(div) a slot-fb {\n display: none;\n }\n }\n}\n\npn-site-footer[theme='dotcom'] {\n width: 100%;\n display: flex;\n flex-direction: column;\n background-color: $blue900;\n margin: 0 auto;\n\n & > svg {\n background-color: $white;\n path {\n fill: $blue900;\n }\n }\n\n .pn-sitefooter-top {\n width: 100%;\n position: relative;\n top: -1px;\n\n background-color: $blue900;\n\n .pn-sitefooter-cols {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding-top: 4.8rem;\n padding-left: 3rem;\n padding-right: 3rem;\n\n margin: 0 auto;\n\n @media screen and (min-width: $min-width-md) {\n max-width: 72rem;\n }\n\n @media screen and (min-width: $min-width-lg) {\n max-width: 96rem;\n padding-left: 0;\n padding-right: 0;\n }\n\n @media screen and (min-width: $min-width-xl) {\n max-width: 114rem;\n }\n\n @media screen and (min-width: $min-width-xxl) {\n max-width: 144rem;\n }\n\n h3 {\n font-weight: 500;\n }\n\n a:hover {\n text-decoration: underline;\n color: $white;\n }\n }\n }\n\n .pn-sitefooter-bottom {\n width: 100%;\n padding: 0.8rem 0;\n background-color: $blue900;\n\n & > [slot='bottom'] {\n max-width: 120rem;\n margin: 0 auto;\n padding-left: .8rem;\n padding-right: .8rem;\n\n @media screen and (min-width: $min-width-md) {\n padding-left: 3rem;\n padding-right: 3rem;\n }\n\n display: flex;\n flex-direction: column;\n gap: 2.4rem;\n\n & > .social-media {\n display: flex;\n justify-content: center;\n\n padding: 1.6rem 0;\n border-top: 1px solid #005d924d;\n border-bottom: 1px solid #005d924d;\n\n & > ul {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n gap: 2.4rem;\n\n margin: 0;\n padding: 0;\n list-style-type: none;\n\n & > li:hover {\n svg > circle {\n fill: $blue700;\n }\n }\n }\n }\n\n & > .copyright {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 1rem;\n\n a {\n text-decoration: underline;\n\n &:hover {\n text-decoration: none;\n }\n }\n \n @media screen and (min-width: $min-width-md) {\n flex-direction: row;\n gap: 2.4rem;\n }\n\n & * {\n display: flex;\n align-items: center;\n color: $white;\n font-weight: 400;\n font-size: 1.4rem;\n line-height: 1.96rem;\n min-height: 26px;\n }\n \n & > ul {\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 1rem;\n\n @media screen and (min-width: $min-width-md) {\n flex-direction: row;\n justify-content: flex-start;\n align-items: flex-start;\n }\n\n & > li {\n display: inline;\n &:first-child {\n margin-left: 0;\n }\n @media screen and (min-width: $min-width-md) {\n margin-left: 2.4rem;\n }\n }\n }\n }\n }\n }\n\n .pn-sitefooter-logo {\n padding: 3rem;\n margin: 0 auto;\n [name='logo'] {\n & > svg {\n display: block;\n width: 13.3rem;\n height: 2.6rem;\n & > path {\n fill: $blue400;\n }\n }\n }\n }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'pn-site-footer',\n styleUrl: 'pn-site-footer.scss',\n})\nexport class PnSiteFooter {\n /** What you write in the comment block above each prop is what ends up in the description fields in the prop table in the documentation */\n @Prop() url: string = '#';\n @Prop() linktitle: string = 'PostNord';\n @Prop({ reflect: true }) theme: string = null;\n\n componentWillLoad() {}\n\n render() {\n return (\n <Host>\n <svg fill=\"none\" viewBox=\"0 0 1680 126\" role=\"presentation\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M0 124.425C265.751 43.517 547.794 0 840 0c292.21 0 574.25 43.517 840 124.425V126H0v-1.575z\" fill=\"#F3F2F2\"></path>\n </svg>\n <div class=\"pn-sitefooter-top\">\n <div class=\"pn-sitefooter-cols\">\n <slot />\n </div>\n </div>\n <div class=\"pn-sitefooter-bottom\">\n <slot name=\"bottom\" />\n </div>\n <div class=\"pn-sitefooter-logo\">\n <a href={this.url} title={this.linktitle} aria-label={this.linktitle}>\n <slot name=\"logo\">\n <svg viewBox=\"0 0 133 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" aria-label=\"PostNord\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M132.749 0.333618V20.9198H126.976V19.3809C126.976 19.3809 125.475 21.4316 122.191 21.4316C117.381 21.4316 114.662 17.7015 114.662 13.0327C114.662 8.47612 117.776 4.7187 122.617 4.7187C125.589 4.7187 126.976 6.19924 126.976 6.19924V1.47206L132.749 0.333618ZM54.2322 1.67091H60.0055V5.20216H65.3564L62.7235 10.0999H60.0055V20.9198H54.2322V1.67091ZM28.2484 21.4023C32.8051 21.4023 37.6446 18.8974 37.6446 12.9187C37.6446 7.16616 32.9746 4.69042 28.4461 4.69042C23.8042 4.69042 19.049 7.25192 19.049 13.175C19.049 18.9549 23.7199 21.4023 28.2484 21.4023ZM28.3327 9.78608C30.2294 9.78608 31.5032 11.1243 31.5032 13.0902C31.5032 14.9392 30.2575 16.3076 28.3327 16.3076C26.437 16.3076 25.1351 14.9392 25.1351 13.0902C25.1351 11.1243 26.4089 9.78608 28.3327 9.78608ZM47.0708 10.8963C46.8158 10.8574 46.5804 10.8239 46.3639 10.7931C44.9938 10.5979 44.3827 10.5108 44.3827 9.87279C44.3827 9.24608 45.146 8.9888 46.6465 8.9888C49.1941 8.9888 51.4298 9.84357 51.4298 9.84357L52.4488 5.43022C52.4488 5.43022 49.9865 4.71869 46.7027 4.71869C41.1841 4.71869 38.2965 6.85422 38.2965 10.2705C38.2965 12.9187 39.8532 14.485 44.4108 15.0825C46.3355 15.3388 47.0427 15.4519 47.0427 16.1644C47.0427 16.8486 46.2784 17.0757 44.9484 17.0757C42.0608 17.0757 39.3437 15.8515 39.3437 15.8515L38.1832 20.4081C38.1832 20.4081 40.9003 21.375 44.4389 21.375C50.3826 21.375 53.1279 19.2668 53.1279 15.8223C53.1279 13.0902 51.6555 11.6087 47.0708 10.8963ZM76.1968 4.69042C72.8287 4.69042 71.6111 6.74018 71.6111 6.74018V5.20216H65.8369V20.9198H71.6111V12.8612C71.6111 10.8689 72.3483 9.95666 74.1297 9.95666C75.913 9.95666 76.1687 11.4381 76.1687 13.3173V20.9198H81.9982V11.2666C81.9982 6.93903 79.9339 4.69042 76.1968 4.69042ZM123.948 9.8153C125.843 9.8153 127.144 11.1818 127.144 13.0327C127.144 14.9958 125.87 16.335 123.948 16.335C122.051 16.335 120.778 14.9958 120.778 13.0327C120.778 11.1818 122.024 9.8153 123.948 9.8153ZM112.456 10.213C110.53 10.213 109.088 10.9537 109.088 13.3456V20.9198H103.313V5.20216H109.088V7.02479C109.088 7.02479 109.965 4.97409 113.191 4.97409C114.181 4.97409 114.55 5.14467 114.55 5.14467L114.408 10.4976C114.408 10.4976 113.643 10.213 112.456 10.213ZM11.9728 13.0902C11.9728 11.1243 10.699 9.78608 8.80235 9.78608C6.87853 9.78608 5.6038 11.1243 5.6038 13.0902C5.6038 14.9392 6.9057 16.3076 8.80235 16.3076C10.728 16.3076 11.9728 14.9392 11.9728 13.0902ZM10.1333 21.4023C14.9728 21.4023 18.0871 17.6468 18.0871 13.0902C18.0871 8.41958 15.3699 4.69042 10.5576 4.69042C7.27472 4.69042 5.77426 6.74018 5.77426 6.74018V5.20216H0V25.4453H5.77426V19.9227C5.77426 19.9227 7.16139 21.4023 10.1333 21.4023ZM95.7984 13.0902C95.7984 11.1243 94.5246 9.78608 92.6279 9.78608C90.7032 9.78608 89.4284 11.1243 89.4284 13.0902C89.4284 14.9392 90.7322 16.3076 92.6279 16.3076C94.5536 16.3076 95.7984 14.9392 95.7984 13.0902ZM92.5427 21.4023C97.0994 21.4023 101.94 18.8974 101.94 12.9187C101.94 7.16616 97.2698 4.69042 92.7413 4.69042C88.0984 4.69042 83.3442 7.25192 83.3442 13.175C83.3442 18.9549 88.0142 21.4023 92.5427 21.4023Z\"\n fill=\"black\"\n ></path>\n </svg>\n </slot>\n </a>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/pn-site-selector-item2.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 const icon = '<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M16.707 11.293a1 1 0 0 1 0 1.414l-6 6a1 1 0 0 1-1.414-1.414L14.586 12 9.293 6.707a1 1 0 0 1 1.414-1.414z" clip-rule="evenodd"/></svg>';
 const angle_small_right = icon;
-const pnSiteSelectorItemCss = "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}}pn-site-selector-item{display:block}pn-site-selector-item>div,pn-site-selector-item>a{padding:0.8rem 0;display:flex;flex-flow:column;position:relative}.siteselector-item-link{border-radius:0;text-decoration:none;color:#005d92;flex-direction:row}.siteselector-item-link:hover,.siteselector-item-link:focus{background-color:#f3f2f2;color:#005d92;text-decoration:underline;outline:none;box-shadow:none}.siteselector-item-link:active{background-color:#f3f2f2;color:#00a0d6;outline:none}.siteselector-item-link>span{flex-grow:1}.siteselector-item-link pn-icon{right:3.2rem;height:1.9rem;width:1.9rem;align-self:center}.siteselector-item-link pn-icon svg{width:100%;height:auto}.siteselector-item-title{display:block}.siteselector-item-description{color:#2d2013;font-size:1.28rem}a:hover>.siteselector-item-description,a:focus>.siteselector-item-description{background-color:#f3f2f2;color:#005d92;text-decoration:underline;outline:none}a:active>.siteselector-item-description{background-color:#f3f2f2;color:#00a0d6;outline:none}";
+const pnSiteSelectorItemCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-site-selector-item{display:block}pn-site-selector-item>div,pn-site-selector-item>a{padding:0.8rem 0;display:flex;flex-flow:column;position:relative}.siteselector-item-link{border-radius:0;text-decoration:none;color:#005d92;flex-direction:row}.siteselector-item-link:hover,.siteselector-item-link:focus{background-color:#f3f2f2;color:#005d92;text-decoration:underline;outline:none;box-shadow:none}.siteselector-item-link:active{background-color:#f3f2f2;color:#00a0d6;outline:none}.siteselector-item-link>span{flex-grow:1}.siteselector-item-link pn-icon{right:3.2rem;height:1.9rem;width:1.9rem;align-self:center}.siteselector-item-link pn-icon svg{width:100%;height:auto}.siteselector-item-title{display:block}.siteselector-item-description{color:#2d2013;font-size:1.28rem}a:hover>.siteselector-item-description,a:focus>.siteselector-item-description{background-color:#f3f2f2;color:#005d92;text-decoration:underline;outline:none}a:active>.siteselector-item-description{background-color:#f3f2f2;color:#00a0d6;outline:none}";
 const PnSiteSelectorItemStyle0 = pnSiteSelectorItemCss;
 const PnSiteSelectorItem = /*@__PURE__*/ proxyCustomElement(class PnSiteSelectorItem extends HTMLElement {
@@ -16,7 +16,7 @@ const PnSiteSelectorItem = /*@__PURE__*/ proxyCustomElement(class PnSiteSelector
         this.newwindow = false;
     }
     render() {
-        return (h(Host, { key: '3ab9a70de23a30212fe3c69f1b7ea043679de7bf', role: "menuitem" }, this.url ? (h("a", { class: "siteselector-item-link", href: this.url, target: this.newwindow ? '_blank' : 'self', rel: this.newwindow ? 'nofollow noopener' : '' }, h("span", null, this.heading && h("span", { class: "siteselector-item-title" }, this.heading), this.description && h("small", { class: "siteselector-item-description" }, this.description)), h("pn-icon", { icon: angle_small_right, color: "blue700" }))) : (h("div", null, this.heading && h("span", { class: "siteselector-item-title" }, this.heading), this.description && h("small", { class: "siteselector-item-description" }, this.description)))));
+        return (h(Host, { key: '7b6e6a7c528dbfd2d6278f217c22df982cc48158', role: "menuitem" }, this.url ? (h("a", { class: "siteselector-item-link", href: this.url, target: this.newwindow ? '_blank' : 'self', rel: this.newwindow ? 'nofollow noopener' : '' }, h("span", null, this.heading && h("span", { class: "siteselector-item-title" }, this.heading), this.description && h("small", { class: "siteselector-item-description" }, this.description)), h("pn-icon", { icon: angle_small_right, color: "blue700" }))) : (h("div", null, this.heading && h("span", { class: "siteselector-item-title" }, this.heading), this.description && h("small", { class: "siteselector-item-description" }, this.description)))));
     }
     static get style() { return PnSiteSelectorItemStyle0; }
 }, [0, "pn-site-selector-item", {

package/dist/components/pn-site-selector-item2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pn-site-selector-item2.js","mappings":";;AAAA,MAAM,IAAI,GAAG,4QAA4Q,CAAC;AACnR,MAAM,iBAAiB,GAAG,IAAI;;ACDrC,MAAM,qBAAqB,GAAG,~~w5CAAw5C,~~CAAC;~~AACv7C~~,iCAAe,qBAAqB;;MCMvB,kBAAkB;;;;mBAEP,EAAE;uBAGE,EAAE;2BAGE,EAAE;yBAGH,KAAK;;IAElC,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,IAClB,IAAI,CAAC,GAAG,IACP,SAAG,KAAK,EAAC,wBAAwB,EAAC,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,SAAS,GAAG,QAAQ,GAAG,MAAM,EAAE,GAAG,EAAE,IAAI,CAAC,SAAS,GAAG,mBAAmB,GAAG,EAAE,IAC1I,gBACG,IAAI,CAAC,OAAO,IAAI,YAAM,KAAK,EAAC,yBAAyB,IAAE,IAAI,CAAC,OAAO,CAAQ,EAC3E,IAAI,CAAC,WAAW,IAAI,aAAO,KAAK,EAAC,+BAA+B,IAAE,IAAI,CAAC,WAAW,CAAS,CACvF,EACP,eAAS,IAAI,EAAE,iBAAiB,EAAE,KAAK,EAAC,SAAS,GAAG,CAClD,KAEJ,eACG,IAAI,CAAC,OAAO,IAAI,YAAM,KAAK,EAAC,yBAAyB,IAAE,IAAI,CAAC,OAAO,CAAQ,EAC3E,IAAI,CAAC,WAAW,IAAI,aAAO,KAAK,EAAC,+BAA+B,IAAE,IAAI,CAAC,WAAW,CAAS,CACxF,CACP,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["node_modules/pn-design-assets/pn-assets/icons/angle_small_right.js","src/components/navigation/pn-site-selector/pn-site-selector-item.scss?tag=pn-site-selector-item","src/components/navigation/pn-site-selector/pn-site-selector-item.tsx"],"sourcesContent":["const icon = '<svg class=\"pn-icon-svg\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"#000\" fill-rule=\"evenodd\" d=\"M16.707 11.293a1 1 0 0 1 0 1.414l-6 6a1 1 0 0 1-1.414-1.414L14.586 12 9.293 6.707a1 1 0 0 1 1.414-1.414z\" clip-rule=\"evenodd\"/></svg>';\nexport const angle_small_right = icon;\nexport const angleSmallRight = icon;\n","@import '../../../globals/main.scss';\n@import './pn-site-selector-common.scss';\n\npn-site-selector-item {\n display: block;\n > div,\n > a {\n padding: 0.8rem 0;\n display: flex;\n flex-flow: column;\n position: relative;\n }\n}\n\n.siteselector-item-link {\n border-radius: 0;\n text-decoration: none;\n color: $blue700;\n flex-direction: row;\n\n &:hover,\n &:focus {\n background-color: $gray50;\n color: $blue700;\n text-decoration: underline;\n outline: none;\n box-shadow: none;\n }\n\n &:active {\n background-color: $gray50;\n color: $blue400;\n outline: none;\n }\n > span {\n flex-grow: 1;\n }\n pn-icon {\n right: 3.2rem;\n height: 1.9rem;\n width: 1.9rem;\n align-self: center;\n\n svg {\n width: 100%;\n height: auto;\n }\n }\n}\n.siteselector-item-title {\n display: block;\n}\n\n.siteselector-item-description {\n color: $gray900;\n font-size: 1.28rem;\n\n a:hover > &,\n a:focus > & {\n background-color: $gray50;\n color: $blue700;\n text-decoration: underline;\n outline: none;\n }\n\n a:active > & {\n background-color: $gray50;\n color: $blue400;\n outline: none;\n }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport { angle_small_right } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n tag: 'pn-site-selector-item',\n styleUrl: 'pn-site-selector-item.scss',\n})\nexport class PnSiteSelectorItem {\n /* Link URL /\n @Prop() url: string = '';\n\n / Link title /\n @Prop() heading: string = '';\n\n / Link description /\n @Prop() description: string = '';\n\n / Open link in new window */\n @Prop() newwindow: boolean = false;\n\n render() {\n return (\n <Host role=\"menuitem\">\n {this.url ? (\n <a class=\"siteselector-item-link\" href={this.url} target={this.newwindow ? '_blank' : 'self'} rel={this.newwindow ? 'nofollow noopener' : ''}>\n <span>\n {this.heading && <span class=\"siteselector-item-title\">{this.heading}</span>}\n {this.description && <small class=\"siteselector-item-description\">{this.description}</small>}\n </span>\n <pn-icon icon={angle_small_right} color=\"blue700\" />\n </a>\n ) : (\n <div>\n {this.heading && <span class=\"siteselector-item-title\">{this.heading}</span>}\n {this.description && <small class=\"siteselector-item-description\">{this.description}</small>}\n </div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pn-site-selector-item2.js","mappings":";;AAAA,MAAM,IAAI,GAAG,4QAA4Q,CAAC;AACnR,MAAM,iBAAiB,GAAG,IAAI;;ACDrC,MAAM,qBAAqB,GAAG,+kCAA+kC,CAAC;AAC9mC,iCAAe,qBAAqB;;MCMvB,kBAAkB;;;;mBAEP,EAAE;uBAGE,EAAE;2BAGE,EAAE;yBAGH,KAAK;;IAElC,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,IAClB,IAAI,CAAC,GAAG,IACP,SAAG,KAAK,EAAC,wBAAwB,EAAC,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,SAAS,GAAG,QAAQ,GAAG,MAAM,EAAE,GAAG,EAAE,IAAI,CAAC,SAAS,GAAG,mBAAmB,GAAG,EAAE,IAC1I,gBACG,IAAI,CAAC,OAAO,IAAI,YAAM,KAAK,EAAC,yBAAyB,IAAE,IAAI,CAAC,OAAO,CAAQ,EAC3E,IAAI,CAAC,WAAW,IAAI,aAAO,KAAK,EAAC,+BAA+B,IAAE,IAAI,CAAC,WAAW,CAAS,CACvF,EACP,eAAS,IAAI,EAAE,iBAAiB,EAAE,KAAK,EAAC,SAAS,GAAG,CAClD,KAEJ,eACG,IAAI,CAAC,OAAO,IAAI,YAAM,KAAK,EAAC,yBAAyB,IAAE,IAAI,CAAC,OAAO,CAAQ,EAC3E,IAAI,CAAC,WAAW,IAAI,aAAO,KAAK,EAAC,+BAA+B,IAAE,IAAI,CAAC,WAAW,CAAS,CACxF,CACP,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["node_modules/pn-design-assets/pn-assets/icons/angle_small_right.js","src/components/navigation/pn-site-selector/pn-site-selector-item.scss?tag=pn-site-selector-item","src/components/navigation/pn-site-selector/pn-site-selector-item.tsx"],"sourcesContent":["const icon = '<svg class=\"pn-icon-svg\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"#000\" fill-rule=\"evenodd\" d=\"M16.707 11.293a1 1 0 0 1 0 1.414l-6 6a1 1 0 0 1-1.414-1.414L14.586 12 9.293 6.707a1 1 0 0 1 1.414-1.414z\" clip-rule=\"evenodd\"/></svg>';\nexport const angle_small_right = icon;\nexport const angleSmallRight = icon;\n","@import '../../../globals/main.scss';\n@import './pn-site-selector-common.scss';\n\npn-site-selector-item {\n display: block;\n > div,\n > a {\n padding: 0.8rem 0;\n display: flex;\n flex-flow: column;\n position: relative;\n }\n}\n\n.siteselector-item-link {\n border-radius: 0;\n text-decoration: none;\n color: $blue700;\n flex-direction: row;\n\n &:hover,\n &:focus {\n background-color: $gray50;\n color: $blue700;\n text-decoration: underline;\n outline: none;\n box-shadow: none;\n }\n\n &:active {\n background-color: $gray50;\n color: $blue400;\n outline: none;\n }\n > span {\n flex-grow: 1;\n }\n pn-icon {\n right: 3.2rem;\n height: 1.9rem;\n width: 1.9rem;\n align-self: center;\n\n svg {\n width: 100%;\n height: auto;\n }\n }\n}\n.siteselector-item-title {\n display: block;\n}\n\n.siteselector-item-description {\n color: $gray900;\n font-size: 1.28rem;\n\n a:hover > &,\n a:focus > & {\n background-color: $gray50;\n color: $blue700;\n text-decoration: underline;\n outline: none;\n }\n\n a:active > & {\n background-color: $gray50;\n color: $blue400;\n outline: none;\n }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport { angle_small_right } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n tag: 'pn-site-selector-item',\n styleUrl: 'pn-site-selector-item.scss',\n})\nexport class PnSiteSelectorItem {\n /* Link URL /\n @Prop() url: string = '';\n\n / Link title /\n @Prop() heading: string = '';\n\n / Link description /\n @Prop() description: string = '';\n\n / Open link in new window */\n @Prop() newwindow: boolean = false;\n\n render() {\n return (\n <Host role=\"menuitem\">\n {this.url ? (\n <a class=\"siteselector-item-link\" href={this.url} target={this.newwindow ? '_blank' : 'self'} rel={this.newwindow ? 'nofollow noopener' : ''}>\n <span>\n {this.heading && <span class=\"siteselector-item-title\">{this.heading}</span>}\n {this.description && <small class=\"siteselector-item-description\">{this.description}</small>}\n </span>\n <pn-icon icon={angle_small_right} color=\"blue700\" />\n </a>\n ) : (\n <div>\n {this.heading && <span class=\"siteselector-item-title\">{this.heading}</span>}\n {this.description && <small class=\"siteselector-item-description\">{this.description}</small>}\n </div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/pn-site-selector2.js CHANGED Viewed

@@ -22,7 +22,7 @@ const languageData = {
   },
 };
-const pnSiteSelectorCss = "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}}pn-site-selector{display:flex;position:relative;justify-content:center;max-height:5.2rem}@media screen and (min-width: 75em){pn-site-selector{display:block}}.siteselector-heading{display:block;padding:0;margin-bottom:1.6rem}@media screen and (min-width: 75em){.siteselector-heading{display:flex;align-items:center;margin-top:0.8rem}}.siteselector-list{list-style:none;margin:0;padding:0}";
+const pnSiteSelectorCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-site-selector{display:flex;position:relative;justify-content:center;max-height:5.2rem}@media screen and (min-width: 75em){pn-site-selector{display:block}}.siteselector-heading{display:block;padding:0;margin-bottom:1.6rem}@media screen and (min-width: 75em){.siteselector-heading{display:flex;align-items:center;margin-top:0.8rem}}.siteselector-list{list-style:none;margin:0;padding:0}";
 const PnSiteSelectorStyle0 = pnSiteSelectorCss;
 const PnSiteSelector = /*@__PURE__*/ proxyCustomElement(class PnSiteSelector extends HTMLElement {
@@ -44,7 +44,7 @@ const PnSiteSelector = /*@__PURE__*/ proxyCustomElement(class PnSiteSelector ext
         }
     }
     render() {
-        return (h(Host, { key: 'ac59e2962f921acb6e7439517a5344992c33d539' }, h("pn-button-dropdown", { key: '884bffb7024ff896652e9c0df04127b77c12be56', label: this.buttontext, icon: angle_small_down, appearance: "light", variant: "borderless" }, h("div", { key: '2d6cd4f4d959a3fce5c6c6131ddd3c18f4824320', class: "siteselector-nav", "aria-label": this.i18n.navlabel }, this.heading ? h("strong", { class: "siteselector-heading" }, this.heading) : null, h("div", { key: '9a0f90ac531974293f687830e35fe3b61eb51cde', role: "menu", class: "siteselector-list" }, h("slot", { key: 'e7c49e2ceaa9c59559b7e43eee5ec0572ec3f8c0' }))))));
+        return (h(Host, { key: '92b83d54a7290f46eeb4901af54f301d9c4eb311' }, h("pn-button-dropdown", { key: 'd669b1a641ea99aded2aa26c15bf77fc1367967e', label: this.buttontext, icon: angle_small_down, appearance: "light", variant: "borderless" }, h("div", { key: '58cc511845706c56967bf938619e12316a8cc23a', class: "siteselector-nav", "aria-label": this.i18n.navlabel }, this.heading ? h("strong", { class: "siteselector-heading" }, this.heading) : null, h("div", { key: '537f0dd923d73cf495202c3d2b8f5a768bc40c30', role: "menu", class: "siteselector-list" }, h("slot", { key: '0e83af255ea3867ea828cc2046876bc57bf2a341' }))))));
     }
     static get style() { return PnSiteSelectorStyle0; }
 }, [4, "pn-site-selector", {

package/dist/components/pn-site-selector2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pn-site-selector2.js","mappings":";;;AAAA,qBAAe;AACf,EAAE,EAAE,EAAE;AACN,IAAI,QAAQ,EAAE,kBAAkB;AAChC,GAAG;AACH,EAAE,EAAE,EAAE;AACN,IAAI,QAAQ,EAAE,kBAAkB;AAChC,GAAG;AACH,EAAE,EAAE,EAAE;AACN,IAAI,QAAQ,EAAE,gBAAgB;AAC9B,GAAG;AACH,EAAE,EAAE,EAAE;AACN,IAAI,QAAQ,EAAE,iBAAiB;AAC/B,GAAG;AACH,EAAE,EAAE,EAAE;AACN,IAAI,QAAQ,EAAE,sBAAsB;AACpC,GAAG;AACH,EAAE,EAAE,EAAE;AACN,IAAI,QAAQ,EAAE,kBAAkB;AAChC,GAAG;AACH,CAAC;;ACnBD,MAAM,iBAAiB,GAAG,~~6xBAA6xB~~,CAAC;~~AACxzB~~,6BAAe,iBAAiB;;MCOnB,cAAc;;;;0BAIoC,UAAU;uBAEb,UAAU;wBAET,IAAI;oBAC7B,EAAE,QAAQ,EAAE,eAAe,EAAE;;;IAE/D,iBAAiB;QACf,IAAI,CAAC,WAAW,EAAE,CAAC;KACpB;IAED,WAAW;QACT,IAAI,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE;YAC/B,IAAI,CAAC,IAAI,GAAG,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAqB,CAAC;SAC7D;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,2EAAoB,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,gBAAgB,EAAE,UAAU,EAAC,OAAO,EAAC,OAAO,EAAC,YAAY,IACzG,4DAAK,KAAK,EAAC,kBAAkB,gBAAa,IAAI,CAAC,IAAI,CAAC,QAAQ,IACzD,IAAI,CAAC,OAAO,GAAG,cAAQ,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,OAAO,CAAU,GAAG,IAAI,EACnF,4DAAK,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,mBAAmB,IACxC,8DAAQ,CACJ,CACF,CACa,CAChB,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/navigation/pn-site-selector/pn-site-selector-i18n.js","src/components/navigation/pn-site-selector/pn-site-selector.scss?tag=pn-site-selector","src/components/navigation/pn-site-selector/pn-site-selector.tsx"],"sourcesContent":["export default {\n sv: {\n navlabel: 'Webbplatsväljare',\n },\n en: {\n navlabel: 'Website selector',\n },\n da: {\n navlabel: 'Webstedsvælger',\n },\n no: {\n navlabel: 'Nettstedsvelger',\n },\n fi: {\n navlabel: 'Verkkosivun valitsin',\n },\n de: {\n navlabel: 'Website-Selektor',\n },\n};\n","@import '../../../globals/main.scss';\n@import './pn-site-selector-common.scss';\n\npn-site-selector {\n display: flex;\n position: relative;\n justify-content: center;\n max-height: 5.2rem;\n\n @media screen and (min-width: $siteselector-media-desktop) {\n display: block;\n }\n}\n\n.siteselector-heading {\n display: block;\n padding: 0;\n margin-bottom: 1.6rem;\n\n @media screen and (min-width: $siteselector-media-desktop) {\n display: flex;\n align-items: center;\n margin-top: 0.8rem;\n }\n}\n\n.siteselector-list {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n","import { Component, Prop, h, State, Element, Host } from '@stencil/core';\nimport { SiteSelectori18n } from './pn-site-selector-types';\nimport languageData from './pn-site-selector-i18n';\nimport { angle_small_down } from 'pn-design-assets/pn-assets/icons.js';\n@Component({\n tag: 'pn-site-selector',\n styleUrl: 'pn-site-selector.scss',\n})\nexport class PnSiteSelector {\n @Element() hostElement: HTMLElement;\n\n /* Site selector Button text /\n @Prop({ mutable: true, reflect: true }) buttontext: string = 'postnord';\n / Site selector flyout title /\n @Prop({ mutable: true, reflect: true }) heading: string = 'PostNord';\n /* Specifies which language we want to show navigation in (sv,da,fi,no,en) */\n @Prop({ mutable: true, reflect: true }) language: string = 'sv';\n @State() i18n: SiteSelectori18n = { navlabel: 'Site selector' };\n\n componentWillLoad() {\n this.setLanguage();\n }\n\n setLanguage() {\n if (languageData[this.language]) {\n this.i18n = languageData[this.language] as SiteSelectori18n;\n }\n }\n\n render() {\n return (\n <Host>\n <pn-button-dropdown label={this.buttontext} icon={angle_small_down} appearance=\"light\" variant=\"borderless\">\n <div class=\"siteselector-nav\" aria-label={this.i18n.navlabel}>\n {this.heading ? <strong class=\"siteselector-heading\">{this.heading}</strong> : null}\n <div role=\"menu\" class=\"siteselector-list\">\n <slot />\n </div>\n </div>\n </pn-button-dropdown>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pn-site-selector2.js","mappings":";;;AAAA,qBAAe;AACf,EAAE,EAAE,EAAE;AACN,IAAI,QAAQ,EAAE,kBAAkB;AAChC,GAAG;AACH,EAAE,EAAE,EAAE;AACN,IAAI,QAAQ,EAAE,kBAAkB;AAChC,GAAG;AACH,EAAE,EAAE,EAAE;AACN,IAAI,QAAQ,EAAE,gBAAgB;AAC9B,GAAG;AACH,EAAE,EAAE,EAAE;AACN,IAAI,QAAQ,EAAE,iBAAiB;AAC/B,GAAG;AACH,EAAE,EAAE,EAAE;AACN,IAAI,QAAQ,EAAE,sBAAsB;AACpC,GAAG;AACH,EAAE,EAAE,EAAE;AACN,IAAI,QAAQ,EAAE,kBAAkB;AAChC,GAAG;AACH,CAAC;;ACnBD,MAAM,iBAAiB,GAAG,odAAod,CAAC;AAC/e,6BAAe,iBAAiB;;MCOnB,cAAc;;;;0BAIoC,UAAU;uBAEb,UAAU;wBAET,IAAI;oBAC7B,EAAE,QAAQ,EAAE,eAAe,EAAE;;;IAE/D,iBAAiB;QACf,IAAI,CAAC,WAAW,EAAE,CAAC;KACpB;IAED,WAAW;QACT,IAAI,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE;YAC/B,IAAI,CAAC,IAAI,GAAG,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAqB,CAAC;SAC7D;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,2EAAoB,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,gBAAgB,EAAE,UAAU,EAAC,OAAO,EAAC,OAAO,EAAC,YAAY,IACzG,4DAAK,KAAK,EAAC,kBAAkB,gBAAa,IAAI,CAAC,IAAI,CAAC,QAAQ,IACzD,IAAI,CAAC,OAAO,GAAG,cAAQ,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,OAAO,CAAU,GAAG,IAAI,EACnF,4DAAK,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,mBAAmB,IACxC,8DAAQ,CACJ,CACF,CACa,CAChB,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/navigation/pn-site-selector/pn-site-selector-i18n.js","src/components/navigation/pn-site-selector/pn-site-selector.scss?tag=pn-site-selector","src/components/navigation/pn-site-selector/pn-site-selector.tsx"],"sourcesContent":["export default {\n sv: {\n navlabel: 'Webbplatsväljare',\n },\n en: {\n navlabel: 'Website selector',\n },\n da: {\n navlabel: 'Webstedsvælger',\n },\n no: {\n navlabel: 'Nettstedsvelger',\n },\n fi: {\n navlabel: 'Verkkosivun valitsin',\n },\n de: {\n navlabel: 'Website-Selektor',\n },\n};\n","@import '../../../globals/main.scss';\n@import './pn-site-selector-common.scss';\n\npn-site-selector {\n display: flex;\n position: relative;\n justify-content: center;\n max-height: 5.2rem;\n\n @media screen and (min-width: $siteselector-media-desktop) {\n display: block;\n }\n}\n\n.siteselector-heading {\n display: block;\n padding: 0;\n margin-bottom: 1.6rem;\n\n @media screen and (min-width: $siteselector-media-desktop) {\n display: flex;\n align-items: center;\n margin-top: 0.8rem;\n }\n}\n\n.siteselector-list {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n","import { Component, Prop, h, State, Element, Host } from '@stencil/core';\nimport { SiteSelectori18n } from './pn-site-selector-types';\nimport languageData from './pn-site-selector-i18n';\nimport { angle_small_down } from 'pn-design-assets/pn-assets/icons.js';\n@Component({\n tag: 'pn-site-selector',\n styleUrl: 'pn-site-selector.scss',\n})\nexport class PnSiteSelector {\n @Element() hostElement: HTMLElement;\n\n /* Site selector Button text /\n @Prop({ mutable: true, reflect: true }) buttontext: string = 'postnord';\n / Site selector flyout title /\n @Prop({ mutable: true, reflect: true }) heading: string = 'PostNord';\n /* Specifies which language we want to show navigation in (sv,da,fi,no,en) */\n @Prop({ mutable: true, reflect: true }) language: string = 'sv';\n @State() i18n: SiteSelectori18n = { navlabel: 'Site selector' };\n\n componentWillLoad() {\n this.setLanguage();\n }\n\n setLanguage() {\n if (languageData[this.language]) {\n this.i18n = languageData[this.language] as SiteSelectori18n;\n }\n }\n\n render() {\n return (\n <Host>\n <pn-button-dropdown label={this.buttontext} icon={angle_small_down} appearance=\"light\" variant=\"borderless\">\n <div class=\"siteselector-nav\" aria-label={this.i18n.navlabel}>\n {this.heading ? <strong class=\"siteselector-heading\">{this.heading}</strong> : null}\n <div role=\"menu\" class=\"siteselector-list\">\n <slot />\n </div>\n </div>\n </pn-button-dropdown>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/pn-spotlight.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { c as classNames } from './index3.js';
-const pnSpotlightCss = "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}}pn-spotlight .pn-spotlight__container{overflow:hidden}@media screen and (max-width: 991px){pn-spotlight .pn-spotlight__container{margin-left:calc(-50vw + 50%);margin-right:calc(-50vw + 50%)}}pn-spotlight [slot=mobile-heading]{text-align:center;padding-bottom:1.6rem;font-weight:500;color:#0d234b}@media screen and (min-width: 769px){pn-spotlight [slot=mobile-heading]{display:none}}pn-spotlight .pn-spotlight__container__wrapper{position:relative;max-width:100%}@media screen and (min-width: 992px){pn-spotlight .pn-spotlight__container__wrapper{max-width:90%;margin:0 auto}}@media screen and (min-width: 1640px){pn-spotlight .pn-spotlight__container__wrapper{max-width:80%}}pn-spotlight .pn-spotlight__container__wrapper__content{position:relative;margin:0 auto;display:flex;flex-direction:row;left:-57.5px;width:calc(100% + 57.5px)}@media screen and (min-width: 768px){pn-spotlight .pn-spotlight__container__wrapper__content{left:-50px;width:calc(100% + 50px)}}@media screen and (min-width: 992px){pn-spotlight .pn-spotlight__container__wrapper__content{left:0;width:100%}}pn-spotlight .pn-spotlight__container__wrapper__content__ball{border-radius:50%;min-height:75px;aspect-ratio:1/1;margin-right:1.5rem}@media screen and (min-width: 768px){pn-spotlight .pn-spotlight__container__wrapper__content__ball{min-height:85px;margin-right:2.5rem}}pn-spotlight [slot=content]{display:flex;border-top-left-radius:10rem;border-bottom-left-radius:10rem;align-items:center;justify-content:right;padding:0 1.5rem;padding-left:50px;width:100%}@media screen and (min-width: 992px){pn-spotlight [slot=content]{padding:0 2rem;border-radius:10rem}}@media screen and (min-width: 992px){.pn-spotlight__container__wrapper.cta--dynamic{width:fit-content}}@media screen and (min-width: 992px){.pn-spotlight__container__wrapper.cta--dynamic [slot=content]{padding-left:4rem}}pn-spotlight[data-cta-color=green] [slot=content]{background-color:#dcf6e7}pn-spotlight[data-cta-color=green] .pn-spotlight__container__wrapper__content__ball{background-color:#dcf6e7}pn-spotlight[data-cta-color=coral] [slot=content]{background-color:#fdefee}pn-spotlight[data-cta-color=coral] .pn-spotlight__container__wrapper__content__ball{background-color:#fdefee}pn-spotlight[data-cta-color=blue] [slot=content]{background-color:#effbff}pn-spotlight[data-cta-color=blue] .pn-spotlight__container__wrapper__content__ball{background-color:#effbff}pn-spotlight[data-cta-color=business] [slot=content],pn-spotlight[data-cta-color=business] .pn-spotlight__container__wrapper__content__ball{background-color:#0d234b}pn-spotlight[data-cta-color=private] [slot=content],pn-spotlight[data-cta-color=private] .pn-spotlight__container__wrapper__content__ball{background-color:#00a0d6}pn-spotlight[data-cta-color=hybrid] [slot=content],pn-spotlight[data-cta-color=hybrid] .pn-spotlight__container__wrapper__content__ball{background-color:#e9e6e5}";
+const pnSpotlightCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-spotlight .pn-spotlight__container{overflow:hidden}@media screen and (max-width: 991px){pn-spotlight .pn-spotlight__container{margin-left:calc(-50vw + 50%);margin-right:calc(-50vw + 50%)}}pn-spotlight [slot=mobile-heading]{text-align:center;padding-bottom:1.6rem;font-weight:500;color:#0d234b}@media screen and (min-width: 769px){pn-spotlight [slot=mobile-heading]{display:none}}pn-spotlight .pn-spotlight__container__wrapper{position:relative;max-width:100%}@media screen and (min-width: 992px){pn-spotlight .pn-spotlight__container__wrapper{max-width:90%;margin:0 auto}}@media screen and (min-width: 1640px){pn-spotlight .pn-spotlight__container__wrapper{max-width:80%}}pn-spotlight .pn-spotlight__container__wrapper__content{position:relative;margin:0 auto;display:flex;flex-direction:row;left:-57.5px;width:calc(100% + 57.5px)}@media screen and (min-width: 768px){pn-spotlight .pn-spotlight__container__wrapper__content{left:-50px;width:calc(100% + 50px)}}@media screen and (min-width: 992px){pn-spotlight .pn-spotlight__container__wrapper__content{left:0;width:100%}}pn-spotlight .pn-spotlight__container__wrapper__content__ball{border-radius:50%;min-height:75px;aspect-ratio:1/1;margin-right:1.5rem}@media screen and (min-width: 768px){pn-spotlight .pn-spotlight__container__wrapper__content__ball{min-height:85px;margin-right:2.5rem}}pn-spotlight [slot=content]{display:flex;border-top-left-radius:10rem;border-bottom-left-radius:10rem;align-items:center;justify-content:right;padding:0 1.5rem;padding-left:50px;width:100%}@media screen and (min-width: 992px){pn-spotlight [slot=content]{padding:0 2rem;border-radius:10rem}}@media screen and (min-width: 992px){.pn-spotlight__container__wrapper.cta--dynamic{width:fit-content}}@media screen and (min-width: 992px){.pn-spotlight__container__wrapper.cta--dynamic [slot=content]{padding-left:4rem}}pn-spotlight[data-cta-color=green] [slot=content]{background-color:#dcf6e7}pn-spotlight[data-cta-color=green] .pn-spotlight__container__wrapper__content__ball{background-color:#dcf6e7}pn-spotlight[data-cta-color=coral] [slot=content]{background-color:#fdefee}pn-spotlight[data-cta-color=coral] .pn-spotlight__container__wrapper__content__ball{background-color:#fdefee}pn-spotlight[data-cta-color=blue] [slot=content]{background-color:#effbff}pn-spotlight[data-cta-color=blue] .pn-spotlight__container__wrapper__content__ball{background-color:#effbff}pn-spotlight[data-cta-color=business] [slot=content],pn-spotlight[data-cta-color=business] .pn-spotlight__container__wrapper__content__ball{background-color:#0d234b}pn-spotlight[data-cta-color=private] [slot=content],pn-spotlight[data-cta-color=private] .pn-spotlight__container__wrapper__content__ball{background-color:#00a0d6}pn-spotlight[data-cta-color=hybrid] [slot=content],pn-spotlight[data-cta-color=hybrid] .pn-spotlight__container__wrapper__content__ball{background-color:#e9e6e5}";
 const PnSpotlightStyle0 = pnSpotlightCss;
 const PnSpotlight$1 = /*@__PURE__*/ proxyCustomElement(class PnSpotlight extends HTMLElement {

package/dist/components/pn-spotlight.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pn-spotlight.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,~~wuGAAwuG,~~CAAC;~~AAChwG~~,0BAAe,cAAc;;MCOhBA,aAAW;;;;uBAEI,IAAI;wBACH,IAAI;yBACF,KAAK;0BAEJ,EAAE;;;IAEhC,gBAAgB;QACd,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC,EAAE,cAAc,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC;KAClE;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,yBAAyB,IAClC,6DAAM,IAAI,EAAC,gBAAgB,GAAG,EAC9B,4DAAK,KAAK,EAAE,oCAAoC,IAAI,CAAC,UAAU,EAAE,IAC/D,4DAAK,KAAK,EAAC,2CAA2C,IACpD,4DAAK,KAAK,EAAC,iDAAiD,GAAO,EACnE,6DAAM,IAAI,EAAC,SAAS,GAAG,CACnB,CACF,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PnSpotlight"],"sources":["src/components/cta/pn-spotlight/pn-spotlight.scss?tag=pn-spotlight","src/components/cta/pn-spotlight/pn-spotlight.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-spotlight {\n .pn-spotlight__container {\n overflow: hidden;\n\n @media screen and (max-width: 991px) {\n //cover viewport width regardless of parent margins\n margin-left: calc(-50vw + 50%);\n margin-right: calc(-50vw + 50%);\n }\n }\n\n [slot='mobile-heading'] {\n text-align: center;\n padding-bottom: 1.6rem;\n font-weight: 500;\n color: $blue900;\n @media screen and (min-width: 769px) {\n display: none;\n }\n }\n\n .pn-spotlight__container__wrapper {\n position: relative;\n max-width: 100%;\n\n @media screen and (min-width: $min-width-lg) {\n max-width: 90%;\n margin: 0 auto;\n }\n\n @media screen and (min-width: $min-width-xxl) {\n max-width: 80%;\n }\n }\n\n .pn-spotlight__container__wrapper__content {\n position: relative;\n margin: 0 auto;\n\n display: flex;\n flex-direction: row;\n left: -57.5px;\n width: calc(100% + 57.5px);\n\n @media screen and (min-width: $min-width-md) {\n left: -50px;\n width: calc(100% + 50px);\n }\n\n @media screen and (min-width: $min-width-lg) {\n left: 0;\n width: 100%;\n }\n }\n\n .pn-spotlight__container__wrapper__content__ball {\n border-radius: 50%;\n min-height: 75px;\n aspect-ratio: 1 / 1;\n margin-right: 1.5rem;\n\n @media screen and (min-width: $min-width-md) {\n min-height: 85px;\n margin-right: 2.5rem;\n }\n\n @media screen and (min-width: $min-width-lg) {\n }\n\n @media screen and (min-width: $min-width-xl) {\n }\n\n @media screen and (min-width: $min-width-xxl) {\n }\n }\n\n [slot='content'] {\n display: flex;\n border-top-left-radius: 10rem;\n border-bottom-left-radius: 10rem;\n align-items: center;\n justify-content: right;\n padding: 0 1.5rem;\n padding-left: 50px;\n width: 100%;\n\n @media screen and (min-width: $min-width-md) {\n }\n\n @media screen and (min-width: $min-width-lg) {\n padding: 0 2rem;\n border-radius: 10rem;\n }\n }\n}\n\n//dynamic cta\n.pn-spotlight__container__wrapper.cta--dynamic {\n @media screen and (min-width: $min-width-lg) {\n width: fit-content;\n }\n\n [slot='content'] {\n @media screen and (min-width: $min-width-lg) {\n padding-left: 4rem;\n }\n }\n}\n\n//colors\n\npn-spotlight[data-cta-color='green'] {\n [slot='content'] {\n background-color: $green50;\n }\n\n .pn-spotlight__container__wrapper__content__ball {\n background-color: $green50;\n }\n}\n\npn-spotlight[data-cta-color='coral'] {\n [slot='content'] {\n background-color: $coral50;\n }\n\n .pn-spotlight__container__wrapper__content__ball {\n background-color: $coral50;\n }\n}\n\npn-spotlight[data-cta-color='blue'] {\n [slot='content'] {\n background-color: $blue25;\n }\n\n .pn-spotlight__container__wrapper__content__ball {\n background-color: $blue25;\n }\n}\n\npn-spotlight[data-cta-color='business'] {\n [slot='content'],\n .pn-spotlight__container__wrapper__content__ball {\n background-color: $blue900;\n }\n}\n\npn-spotlight[data-cta-color='private'] {\n [slot='content'],\n .pn-spotlight__container__wrapper__content__ball {\n background-color: $blue400;\n }\n}\n\npn-spotlight[data-cta-color='hybrid'] {\n [slot='content'],\n .pn-spotlight__container__wrapper__content__ball {\n background-color: #e9e6e5;\n }\n}\n","import classNames from 'classnames';\n\nimport { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\n@Component({\n tag: 'pn-spotlight',\n styleUrl: 'pn-spotlight.scss',\n})\nexport class PnSpotlight {\n @Element() hostElement: HTMLElement;\n @Prop() heading: string = null;\n @Prop() preamble: string = null;\n @Prop() isDynamic: boolean = false;\n\n @State() addDynamic: string = '';\n\n componentDidLoad() {\n this.addDynamic = classNames({ 'cta--dynamic': this.isDynamic });\n }\n\n render() {\n return (\n <Host>\n <div class=\"pn-spotlight__container\">\n <slot name=\"mobile-heading\" />\n <div class={`pn-spotlight__container__wrapper ${this.addDynamic}`}>\n <div class=\"pn-spotlight__container__wrapper__content\">\n <div class=\"pn-spotlight__container__wrapper__content__ball\"></div>\n <slot name=\"content\" />\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pn-spotlight.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,+5FAA+5F,CAAC;AACv7F,0BAAe,cAAc;;MCOhBA,aAAW;;;;uBAEI,IAAI;wBACH,IAAI;yBACF,KAAK;0BAEJ,EAAE;;;IAEhC,gBAAgB;QACd,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC,EAAE,cAAc,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC;KAClE;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,yBAAyB,IAClC,6DAAM,IAAI,EAAC,gBAAgB,GAAG,EAC9B,4DAAK,KAAK,EAAE,oCAAoC,IAAI,CAAC,UAAU,EAAE,IAC/D,4DAAK,KAAK,EAAC,2CAA2C,IACpD,4DAAK,KAAK,EAAC,iDAAiD,GAAO,EACnE,6DAAM,IAAI,EAAC,SAAS,GAAG,CACnB,CACF,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PnSpotlight"],"sources":["src/components/cta/pn-spotlight/pn-spotlight.scss?tag=pn-spotlight","src/components/cta/pn-spotlight/pn-spotlight.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-spotlight {\n .pn-spotlight__container {\n overflow: hidden;\n\n @media screen and (max-width: 991px) {\n //cover viewport width regardless of parent margins\n margin-left: calc(-50vw + 50%);\n margin-right: calc(-50vw + 50%);\n }\n }\n\n [slot='mobile-heading'] {\n text-align: center;\n padding-bottom: 1.6rem;\n font-weight: 500;\n color: $blue900;\n @media screen and (min-width: 769px) {\n display: none;\n }\n }\n\n .pn-spotlight__container__wrapper {\n position: relative;\n max-width: 100%;\n\n @media screen and (min-width: $min-width-lg) {\n max-width: 90%;\n margin: 0 auto;\n }\n\n @media screen and (min-width: $min-width-xxl) {\n max-width: 80%;\n }\n }\n\n .pn-spotlight__container__wrapper__content {\n position: relative;\n margin: 0 auto;\n\n display: flex;\n flex-direction: row;\n left: -57.5px;\n width: calc(100% + 57.5px);\n\n @media screen and (min-width: $min-width-md) {\n left: -50px;\n width: calc(100% + 50px);\n }\n\n @media screen and (min-width: $min-width-lg) {\n left: 0;\n width: 100%;\n }\n }\n\n .pn-spotlight__container__wrapper__content__ball {\n border-radius: 50%;\n min-height: 75px;\n aspect-ratio: 1 / 1;\n margin-right: 1.5rem;\n\n @media screen and (min-width: $min-width-md) {\n min-height: 85px;\n margin-right: 2.5rem;\n }\n\n @media screen and (min-width: $min-width-lg) {\n }\n\n @media screen and (min-width: $min-width-xl) {\n }\n\n @media screen and (min-width: $min-width-xxl) {\n }\n }\n\n [slot='content'] {\n display: flex;\n border-top-left-radius: 10rem;\n border-bottom-left-radius: 10rem;\n align-items: center;\n justify-content: right;\n padding: 0 1.5rem;\n padding-left: 50px;\n width: 100%;\n\n @media screen and (min-width: $min-width-md) {\n }\n\n @media screen and (min-width: $min-width-lg) {\n padding: 0 2rem;\n border-radius: 10rem;\n }\n }\n}\n\n//dynamic cta\n.pn-spotlight__container__wrapper.cta--dynamic {\n @media screen and (min-width: $min-width-lg) {\n width: fit-content;\n }\n\n [slot='content'] {\n @media screen and (min-width: $min-width-lg) {\n padding-left: 4rem;\n }\n }\n}\n\n//colors\n\npn-spotlight[data-cta-color='green'] {\n [slot='content'] {\n background-color: $green50;\n }\n\n .pn-spotlight__container__wrapper__content__ball {\n background-color: $green50;\n }\n}\n\npn-spotlight[data-cta-color='coral'] {\n [slot='content'] {\n background-color: $coral50;\n }\n\n .pn-spotlight__container__wrapper__content__ball {\n background-color: $coral50;\n }\n}\n\npn-spotlight[data-cta-color='blue'] {\n [slot='content'] {\n background-color: $blue25;\n }\n\n .pn-spotlight__container__wrapper__content__ball {\n background-color: $blue25;\n }\n}\n\npn-spotlight[data-cta-color='business'] {\n [slot='content'],\n .pn-spotlight__container__wrapper__content__ball {\n background-color: $blue900;\n }\n}\n\npn-spotlight[data-cta-color='private'] {\n [slot='content'],\n .pn-spotlight__container__wrapper__content__ball {\n background-color: $blue400;\n }\n}\n\npn-spotlight[data-cta-color='hybrid'] {\n [slot='content'],\n .pn-spotlight__container__wrapper__content__ball {\n background-color: #e9e6e5;\n }\n}\n","import classNames from 'classnames';\n\nimport { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\n@Component({\n tag: 'pn-spotlight',\n styleUrl: 'pn-spotlight.scss',\n})\nexport class PnSpotlight {\n @Element() hostElement: HTMLElement;\n @Prop() heading: string = null;\n @Prop() preamble: string = null;\n @Prop() isDynamic: boolean = false;\n\n @State() addDynamic: string = '';\n\n componentDidLoad() {\n this.addDynamic = classNames({ 'cta--dynamic': this.isDynamic });\n }\n\n render() {\n return (\n <Host>\n <div class=\"pn-spotlight__container\">\n <slot name=\"mobile-heading\" />\n <div class={`pn-spotlight__container__wrapper ${this.addDynamic}`}>\n <div class=\"pn-spotlight__container__wrapper__content\">\n <div class=\"pn-spotlight__container__wrapper__content__ball\"></div>\n <slot name=\"content\" />\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/pn-stats-info-data2.js CHANGED Viewed

@@ -42,7 +42,7 @@ const inViewport = (entries, toggleClass, isEntryIntersectingCallBack) => {
     });
 };
-const pnStatsInfoDataCss = "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}}pn-stats-info-data{width:50%}pn-stats-info-data .pn-stats-info-data__container{width:100%;background-color:transparent;color:#f06365;display:flex;flex-direction:column;align-items:center;padding:2rem}@media screen and (min-width: 768px){pn-stats-info-data .pn-stats-info-data__container{justify-content:center;min-height:102px;padding:0 2rem}}@media screen and (min-width: 1200px){pn-stats-info-data .pn-stats-info-data__container{min-height:125px}}pn-stats-info-data .pn-stats-info-data__container__content{display:flex;flex-direction:row;justify-content:center}pn-stats-info-data .pn-stats-info-data__container__content__data{font-weight:700;font-size:3rem;line-height:110%}@media screen and (min-width: 1200px){pn-stats-info-data .pn-stats-info-data__container__content__data{font-size:5.6rem}}pn-stats-info-data .pn-stats-info-data__container__content__unit{font-weight:700;font-size:3rem;line-height:110%;margin-left:0.8rem}@media screen and (min-width: 1200px){pn-stats-info-data .pn-stats-info-data__container__content__unit{font-size:5.6rem}}pn-stats-info-data .pn-stats-info-data__container__content__preamble{text-align:center;font-weight:400;font-size:1.4rem;line-height:110%;color:#ffffff}";
+const pnStatsInfoDataCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-stats-info-data{width:50%}pn-stats-info-data .pn-stats-info-data__container{width:100%;background-color:transparent;color:#f06365;display:flex;flex-direction:column;align-items:center;padding:2rem}@media screen and (min-width: 768px){pn-stats-info-data .pn-stats-info-data__container{justify-content:center;min-height:102px;padding:0 2rem}}@media screen and (min-width: 1200px){pn-stats-info-data .pn-stats-info-data__container{min-height:125px}}pn-stats-info-data .pn-stats-info-data__container__content{display:flex;flex-direction:row;justify-content:center}pn-stats-info-data .pn-stats-info-data__container__content__data{font-weight:700;font-size:3rem;line-height:110%}@media screen and (min-width: 1200px){pn-stats-info-data .pn-stats-info-data__container__content__data{font-size:5.6rem}}pn-stats-info-data .pn-stats-info-data__container__content__unit{font-weight:700;font-size:3rem;line-height:110%;margin-left:0.8rem}@media screen and (min-width: 1200px){pn-stats-info-data .pn-stats-info-data__container__content__unit{font-size:5.6rem}}pn-stats-info-data .pn-stats-info-data__container__content__preamble{text-align:center;font-weight:400;font-size:1.4rem;line-height:110%;color:#ffffff}";
 const PnStatsInfoDataStyle0 = pnStatsInfoDataCss;
 const PnStatsInfoData = /*@__PURE__*/ proxyCustomElement(class PnStatsInfoData extends HTMLElement {

package/dist/components/pn-stats-info-data2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pn-stats-info-data2.js","mappings":";;;AAAO,MAAM,YAAY,GAAG,CAC1B,GAAgB,EAChB,QAAgB,CAAC,EACjB,MAAc,GAAG,EACjB,WAAmB,IAAI,EACvB,eAAuB,OAAO,EAC9B,WAAoG;IAEpG,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC;IAEnE,IAAI,QAAQ,IAAI,CAAC,EAAE;QACjB,GAAG,CAAC,WAAW,GAAG,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;QACxC,OAAO;KACR;IAED,IAAI,cAAc,GAAG,IAAI,CAAC;IAE1B,MAAM,IAAI,GAAG,CAAC,SAAiB;QAC7B,IAAI,CAAC,cAAc;YAAE,cAAc,GAAG,SAAS,CAAC;QAEhD,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,SAAS,GAAG,cAAc,IAAI,QAAQ,EAAE,CAAC,CAAC,CAAC;QAEtE,IAAI,QAAQ,GAAG,CAAC,EAAE;YAChB,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,QAAQ,IAAI,GAAG,GAAG,KAAK,CAAC,GAAG,KAAK,IAAI,EAAE,CAAC,GAAG,EAAE,CAAC;YAC/E,GAAG,CAAC,WAAW,GAAG,SAAS,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;YAClD,MAAM,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC;SACpC;aAAM;YACL,GAAG,CAAC,WAAW,GAAG,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;SACzC;KACF,CAAC;IACF,MAAM,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC;AACrC,CAAC;;AC/BD,MAAM,gBAAgB,GAAG;IACvB,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE;IACjC,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE;CAClC,CAAC;AAEF,MAAM,iBAAiB,GAAG;IACxB,OAAO,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE;IAC7B,QAAQ,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,KAAK,EAAE;IAChD,OAAO,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE;IAC7B,IAAI,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,KAAK,EAAE;CAC/C;;ACVM,MAAM,UAAU,GAAG,CAAC,OAAoC,EAAE,WAAmB,EAAE,2BAAsE;IAC1J,OAAO,CAAC,OAAO,CAAC,KAAK;QACnB,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC;QACjE,2BAA2B,CAAC,KAAK,CAAC,CAAC;KACpC,CAAC,CAAC;AACL,CAAC;;ACLD,MAAM,kBAAkB,GAAG,~~2kDAA2kD~~,CAAC;~~AACvmD~~,8BAAe,kBAAkB;;MCWpB,eAAe;;;;sBACD,IAAI;2BACC,SAAS;0BACV,CAAC;oBACP,CAAC;oBACD,IAAI;wBACA,IAAI;wBACH,IAAI;qBACR,IAAI;4BAEK,KAAK;sBACZ,IAAI;;IAE9B,kBAAkB,GAAG,CAAC,KAAgC;QACpD,IAAI,KAAK,CAAC,cAAc,EAAE;YACxB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;SAC1B;KACF,CAAC;IAEF,gBAAgB;QACd,OAAOA,EAAM,EAAE,CAAC;KACjB;IAED,iBAAiB;QACf,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACvC;IAGD,kBAAkB,CAAC,QAAiB,EAAE,QAAiB;QACrD,MAAM,GAAG,GAAG,QAAQ,CAAC,cAAc,CAAC,sBAAsB,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;QACvF,IAAI,GAAG,CAAC,SAAS,CAAC,QAAQ,CAAC,eAAe,CAAC,IAAI,QAAQ,KAAK,QAAQ,EAAE;YACpE,YAAY,CAAC,GAAG,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,gBAAgB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;SACvI;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,+BAA+B,IACxC,4DAAK,KAAK,EAAC,wCAAwC,IACjD,4DAAK,KAAK,EAAC,8CAA8C,EAAC,EAAE,EAAE,sBAAsB,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,EAAE,GAAQ,EACtH,IAAI,CAAC,IAAI,IAAI,4DAAK,KAAK,EAAC,8CAA8C,IAAE,IAAI,CAAC,IAAI,CAAO,CACrF,EACN,4DAAK,KAAK,EAAC,kDAAkD,IAAE,IAAI,CAAC,QAAQ,CAAO,CAC/E,CACD,EACP;KACH;IAED,kBAAkB;QAChB,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CAAC,OAAO,IAAI,UAAU,CAAC,OAAO,EAAE,eAAe,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC;QACpH,MAAM,GAAG,GAAG,QAAQ,CAAC,cAAc,CAAC,sBAAsB,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;QACvF,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;KACvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["uuidv4"],"sources":["src/components/data-visualization/pn-stats-info/pn-stats-info-data/animationHelper.ts","src/components/data-visualization/pn-stats-info/pn-stats-info-data/numberFormats.ts","src/components/data-visualization/pn-stats-info/pn-stats-info-data/viewIntersectionHelper.ts","src/components/data-visualization/pn-stats-info/pn-stats-info-data/pn-stats-info-data.scss?tag=pn-stats-info-data","src/components/data-visualization/pn-stats-info/pn-stats-info-data/pn-stats-info-data.tsx"],"sourcesContent":["export const animateValue = (\n obj: HTMLElement,\n start: number = 0,\n end: number = 100,\n duration: number = 1000,\n numberFormat: string = 'Sv-SE',\n formatStyle: { style: \"decimal\" \| \"percent\" \| \"currency\"; currency?: string; useGrouping?: boolean },\n) => {\n const formatter = new Intl.NumberFormat(numberFormat, formatStyle);\n\n if (duration <= 0) {\n obj.textContent = formatter.format(end);\n return;\n }\n\n let startTimestamp = null;\n\n const step = (timestamp: number) => {\n if (!startTimestamp) startTimestamp = timestamp;\n\n const progress = Math.min((timestamp - startTimestamp) / duration, 1);\n\n if (progress < 1) {\n const animatedValue = Math.round((progress * (end - start) + start) * 10) / 10;\n obj.textContent = formatter.format(animatedValue);\n window.requestAnimationFrame(step);\n } else {\n obj.textContent = formatter.format(end);\n }\n };\n window.requestAnimationFrame(step);\n};\n","const NumberFormatList = {\n Sv: { lang: 'Sv', code: 'Sv-SE' },\n En: { lang: 'En', code: 'En-GB' },\n};\n\nconst NumberFormatStyle = {\n Decimal: { style: 'decimal' },\n Currency: { style: 'currency', currency: 'SEK' },\n Percent: { style: 'percent' },\n None: { style: 'decimal', useGrouping: false },\n};\n\nexport { NumberFormatList, NumberFormatStyle };\n","export const inViewport = (entries: IntersectionObserverEntry[], toggleClass: string, isEntryIntersectingCallBack: (entry: IntersectionObserverEntry) => any) => {\n entries.forEach(entry => {\n entry.target.classList.toggle(toggleClass, entry.isIntersecting);\n isEntryIntersectingCallBack(entry);\n });\n};\n","@import '../../../../globals/main.scss';\n\npn-stats-info-data {\n width: 50%;\n\n .pn-stats-info-data__container {\n width: 100%;\n\n background-color: transparent;\n color: $coral400;\n\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 2rem;\n\n @media screen and (min-width: $min-width-md) {\n justify-content: center;\n min-height: 102px;\n padding: 0 2rem;\n }\n\n @media screen and (min-width: $min-width-xl) {\n min-height: 125px;\n }\n }\n\n .pn-stats-info-data__container__content {\n display: flex;\n flex-direction: row;\n justify-content: center;\n }\n\n .pn-stats-info-data__container__content__data {\n font-weight: 700;\n font-size: 3rem;\n line-height: 110%;\n\n @media screen and (min-width: $min-width-xl) {\n font-size: 5.6rem;\n }\n }\n\n .pn-stats-info-data__container__content__unit {\n font-weight: 700;\n font-size: 3rem;\n line-height: 110%;\n\n margin-left: 0.8rem;\n\n @media screen and (min-width: $min-width-xl) {\n font-size: 5.6rem;\n }\n }\n\n .pn-stats-info-data__container__content__preamble {\n text-align: center;\n font-weight: 400;\n font-size: 1.4rem;\n line-height: 110%;\n color: $white;\n }\n}\n","import { v4 as uuidv4 } from 'uuid';\n\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { animateValue } from './animationHelper';\nimport { NumberFormatList, NumberFormatStyle } from './numberFormats';\nimport { inViewport } from './viewIntersectionHelper';\n\n@Component({\n tag: 'pn-stats-info-data',\n styleUrl: 'pn-stats-info-data.scss',\n})\nexport class PnStatsInfoData {\n @Prop() format: string = 'En';\n @Prop() formatStyle: string = 'Decimal';\n @Prop() startValue: number = 0;\n @Prop() data: number = 0;\n @Prop() unit: string = null;\n @Prop() preamble: string = null;\n @Prop() duration?: number = 1000; //ms;\n @Prop() index: number = null;\n\n @State() hasBeenShown: boolean = false;\n @State() compId: string = null;\n\n inViewPortCallback = (entry: IntersectionObserverEntry) => {\n if (entry.isIntersecting) {\n this.hasBeenShown = true;\n }\n };\n\n generateUniqueId() {\n return uuidv4();\n }\n\n componentWillLoad() {\n this.compId = this.generateUniqueId();\n }\n\n @Watch('hasBeenShown')\n watchStateHandlder(newValue: boolean, oldValue: boolean) {\n const obj = document.getElementById(`pn-stats-info-data-${this.compId}-${this.index}`);\n if (obj.classList.contains('is-inViewport') && newValue !== oldValue) {\n animateValue(obj, this.startValue, this.data, this.duration, NumberFormatList[this.format].code, NumberFormatStyle[this.formatStyle]);\n }\n }\n\n render() {\n return (\n <Host>\n <div class=\"pn-stats-info-data__container\">\n <div class=\"pn-stats-info-data__container__content\">\n <div class=\"pn-stats-info-data__container__content__data\" id={`pn-stats-info-data-${this.compId}-${this.index}`}></div>\n {this.unit && <div class=\"pn-stats-info-data__container__content__unit\">{this.unit}</div>}\n </div>\n <div class=\"pn-stats-info-data__container__content__preamble\">{this.preamble}</div>\n </div>\n </Host>\n );\n }\n\n componentDidRender() {\n const observer = new IntersectionObserver(entries => inViewport(entries, 'is-inViewport', this.inViewPortCallback));\n const obj = document.getElementById(`pn-stats-info-data-${this.compId}-${this.index}`);\n observer.observe(obj);\n }\n}\n"],"version":3}
1	+ {"file":"pn-stats-info-data2.js","mappings":";;;AAAO,MAAM,YAAY,GAAG,CAC1B,GAAgB,EAChB,QAAgB,CAAC,EACjB,MAAc,GAAG,EACjB,WAAmB,IAAI,EACvB,eAAuB,OAAO,EAC9B,WAAoG;IAEpG,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC;IAEnE,IAAI,QAAQ,IAAI,CAAC,EAAE;QACjB,GAAG,CAAC,WAAW,GAAG,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;QACxC,OAAO;KACR;IAED,IAAI,cAAc,GAAG,IAAI,CAAC;IAE1B,MAAM,IAAI,GAAG,CAAC,SAAiB;QAC7B,IAAI,CAAC,cAAc;YAAE,cAAc,GAAG,SAAS,CAAC;QAEhD,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,SAAS,GAAG,cAAc,IAAI,QAAQ,EAAE,CAAC,CAAC,CAAC;QAEtE,IAAI,QAAQ,GAAG,CAAC,EAAE;YAChB,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,QAAQ,IAAI,GAAG,GAAG,KAAK,CAAC,GAAG,KAAK,IAAI,EAAE,CAAC,GAAG,EAAE,CAAC;YAC/E,GAAG,CAAC,WAAW,GAAG,SAAS,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;YAClD,MAAM,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC;SACpC;aAAM;YACL,GAAG,CAAC,WAAW,GAAG,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;SACzC;KACF,CAAC;IACF,MAAM,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC;AACrC,CAAC;;AC/BD,MAAM,gBAAgB,GAAG;IACvB,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE;IACjC,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE;CAClC,CAAC;AAEF,MAAM,iBAAiB,GAAG;IACxB,OAAO,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE;IAC7B,QAAQ,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,KAAK,EAAE;IAChD,OAAO,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE;IAC7B,IAAI,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,KAAK,EAAE;CAC/C;;ACVM,MAAM,UAAU,GAAG,CAAC,OAAoC,EAAE,WAAmB,EAAE,2BAAsE;IAC1J,OAAO,CAAC,OAAO,CAAC,KAAK;QACnB,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC;QACjE,2BAA2B,CAAC,KAAK,CAAC,CAAC;KACpC,CAAC,CAAC;AACL,CAAC;;ACLD,MAAM,kBAAkB,GAAG,kwCAAkwC,CAAC;AAC9xC,8BAAe,kBAAkB;;MCWpB,eAAe;;;;sBACD,IAAI;2BACC,SAAS;0BACV,CAAC;oBACP,CAAC;oBACD,IAAI;wBACA,IAAI;wBACH,IAAI;qBACR,IAAI;4BAEK,KAAK;sBACZ,IAAI;;IAE9B,kBAAkB,GAAG,CAAC,KAAgC;QACpD,IAAI,KAAK,CAAC,cAAc,EAAE;YACxB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;SAC1B;KACF,CAAC;IAEF,gBAAgB;QACd,OAAOA,EAAM,EAAE,CAAC;KACjB;IAED,iBAAiB;QACf,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACvC;IAGD,kBAAkB,CAAC,QAAiB,EAAE,QAAiB;QACrD,MAAM,GAAG,GAAG,QAAQ,CAAC,cAAc,CAAC,sBAAsB,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;QACvF,IAAI,GAAG,CAAC,SAAS,CAAC,QAAQ,CAAC,eAAe,CAAC,IAAI,QAAQ,KAAK,QAAQ,EAAE;YACpE,YAAY,CAAC,GAAG,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,gBAAgB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;SACvI;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,+BAA+B,IACxC,4DAAK,KAAK,EAAC,wCAAwC,IACjD,4DAAK,KAAK,EAAC,8CAA8C,EAAC,EAAE,EAAE,sBAAsB,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,EAAE,GAAQ,EACtH,IAAI,CAAC,IAAI,IAAI,4DAAK,KAAK,EAAC,8CAA8C,IAAE,IAAI,CAAC,IAAI,CAAO,CACrF,EACN,4DAAK,KAAK,EAAC,kDAAkD,IAAE,IAAI,CAAC,QAAQ,CAAO,CAC/E,CACD,EACP;KACH;IAED,kBAAkB;QAChB,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CAAC,OAAO,IAAI,UAAU,CAAC,OAAO,EAAE,eAAe,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC;QACpH,MAAM,GAAG,GAAG,QAAQ,CAAC,cAAc,CAAC,sBAAsB,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;QACvF,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;KACvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["uuidv4"],"sources":["src/components/data-visualization/pn-stats-info/pn-stats-info-data/animationHelper.ts","src/components/data-visualization/pn-stats-info/pn-stats-info-data/numberFormats.ts","src/components/data-visualization/pn-stats-info/pn-stats-info-data/viewIntersectionHelper.ts","src/components/data-visualization/pn-stats-info/pn-stats-info-data/pn-stats-info-data.scss?tag=pn-stats-info-data","src/components/data-visualization/pn-stats-info/pn-stats-info-data/pn-stats-info-data.tsx"],"sourcesContent":["export const animateValue = (\n obj: HTMLElement,\n start: number = 0,\n end: number = 100,\n duration: number = 1000,\n numberFormat: string = 'Sv-SE',\n formatStyle: { style: \"decimal\" \| \"percent\" \| \"currency\"; currency?: string; useGrouping?: boolean },\n) => {\n const formatter = new Intl.NumberFormat(numberFormat, formatStyle);\n\n if (duration <= 0) {\n obj.textContent = formatter.format(end);\n return;\n }\n\n let startTimestamp = null;\n\n const step = (timestamp: number) => {\n if (!startTimestamp) startTimestamp = timestamp;\n\n const progress = Math.min((timestamp - startTimestamp) / duration, 1);\n\n if (progress < 1) {\n const animatedValue = Math.round((progress * (end - start) + start) * 10) / 10;\n obj.textContent = formatter.format(animatedValue);\n window.requestAnimationFrame(step);\n } else {\n obj.textContent = formatter.format(end);\n }\n };\n window.requestAnimationFrame(step);\n};\n","const NumberFormatList = {\n Sv: { lang: 'Sv', code: 'Sv-SE' },\n En: { lang: 'En', code: 'En-GB' },\n};\n\nconst NumberFormatStyle = {\n Decimal: { style: 'decimal' },\n Currency: { style: 'currency', currency: 'SEK' },\n Percent: { style: 'percent' },\n None: { style: 'decimal', useGrouping: false },\n};\n\nexport { NumberFormatList, NumberFormatStyle };\n","export const inViewport = (entries: IntersectionObserverEntry[], toggleClass: string, isEntryIntersectingCallBack: (entry: IntersectionObserverEntry) => any) => {\n entries.forEach(entry => {\n entry.target.classList.toggle(toggleClass, entry.isIntersecting);\n isEntryIntersectingCallBack(entry);\n });\n};\n","@import '../../../../globals/main.scss';\n\npn-stats-info-data {\n width: 50%;\n\n .pn-stats-info-data__container {\n width: 100%;\n\n background-color: transparent;\n color: $coral400;\n\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 2rem;\n\n @media screen and (min-width: $min-width-md) {\n justify-content: center;\n min-height: 102px;\n padding: 0 2rem;\n }\n\n @media screen and (min-width: $min-width-xl) {\n min-height: 125px;\n }\n }\n\n .pn-stats-info-data__container__content {\n display: flex;\n flex-direction: row;\n justify-content: center;\n }\n\n .pn-stats-info-data__container__content__data {\n font-weight: 700;\n font-size: 3rem;\n line-height: 110%;\n\n @media screen and (min-width: $min-width-xl) {\n font-size: 5.6rem;\n }\n }\n\n .pn-stats-info-data__container__content__unit {\n font-weight: 700;\n font-size: 3rem;\n line-height: 110%;\n\n margin-left: 0.8rem;\n\n @media screen and (min-width: $min-width-xl) {\n font-size: 5.6rem;\n }\n }\n\n .pn-stats-info-data__container__content__preamble {\n text-align: center;\n font-weight: 400;\n font-size: 1.4rem;\n line-height: 110%;\n color: $white;\n }\n}\n","import { v4 as uuidv4 } from 'uuid';\n\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { animateValue } from './animationHelper';\nimport { NumberFormatList, NumberFormatStyle } from './numberFormats';\nimport { inViewport } from './viewIntersectionHelper';\n\n@Component({\n tag: 'pn-stats-info-data',\n styleUrl: 'pn-stats-info-data.scss',\n})\nexport class PnStatsInfoData {\n @Prop() format: string = 'En';\n @Prop() formatStyle: string = 'Decimal';\n @Prop() startValue: number = 0;\n @Prop() data: number = 0;\n @Prop() unit: string = null;\n @Prop() preamble: string = null;\n @Prop() duration?: number = 1000; //ms;\n @Prop() index: number = null;\n\n @State() hasBeenShown: boolean = false;\n @State() compId: string = null;\n\n inViewPortCallback = (entry: IntersectionObserverEntry) => {\n if (entry.isIntersecting) {\n this.hasBeenShown = true;\n }\n };\n\n generateUniqueId() {\n return uuidv4();\n }\n\n componentWillLoad() {\n this.compId = this.generateUniqueId();\n }\n\n @Watch('hasBeenShown')\n watchStateHandlder(newValue: boolean, oldValue: boolean) {\n const obj = document.getElementById(`pn-stats-info-data-${this.compId}-${this.index}`);\n if (obj.classList.contains('is-inViewport') && newValue !== oldValue) {\n animateValue(obj, this.startValue, this.data, this.duration, NumberFormatList[this.format].code, NumberFormatStyle[this.formatStyle]);\n }\n }\n\n render() {\n return (\n <Host>\n <div class=\"pn-stats-info-data__container\">\n <div class=\"pn-stats-info-data__container__content\">\n <div class=\"pn-stats-info-data__container__content__data\" id={`pn-stats-info-data-${this.compId}-${this.index}`}></div>\n {this.unit && <div class=\"pn-stats-info-data__container__content__unit\">{this.unit}</div>}\n </div>\n <div class=\"pn-stats-info-data__container__content__preamble\">{this.preamble}</div>\n </div>\n </Host>\n );\n }\n\n componentDidRender() {\n const observer = new IntersectionObserver(entries => inViewport(entries, 'is-inViewport', this.inViewPortCallback));\n const obj = document.getElementById(`pn-stats-info-data-${this.compId}-${this.index}`);\n observer.observe(obj);\n }\n}\n"],"version":3}

package/dist/components/pn-stats-info.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './pn-stats-info-data2.js';
-const pnStatsInfoCss = "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}}pn-stats-info .pn-stats-info__container{display:flex;flex-direction:row;justify-content:center}pn-stats-info .pn-stats-info__container__map{display:none}pn-stats-info .pn-stats-info-image-container{display:none}pn-stats-info .pn-stats-info__container__content{display:flex;flex-direction:column;align-items:center;padding:2.4rem 2.4rem 1.6rem;width:100%;background-color:#0d234b;border-radius:2.4rem}@media screen and (min-width: 992px){pn-stats-info .pn-stats-info__container__content{padding:4rem 2.4rem 1.6rem}}@media screen and (min-width: 1200px){pn-stats-info .pn-stats-info__container__content{padding:5.6rem 2.4rem 3.2rem}}pn-stats-info .pn-stats-info__container__content__heading{color:#f06365;margin-bottom:2.4rem;align-self:center;text-align:center;font-size:3rem;line-height:110%}@media screen and (min-width: 1200px){pn-stats-info .pn-stats-info__container__content__heading{font-weight:700;font-size:4.8rem}}pn-stats-info .pn-stats-info__container__content__data{height:100%;display:flex;flex-direction:row;justify-content:center;flex-wrap:wrap;width:100%}pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(2n),pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(2n)~pn-stats-info-data{width:50%}@media screen and (min-width: 768px){pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(1){width:100%}pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(2),pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(2)~pn-stats-info-data{width:50%}pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(3n),pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(3n)~pn-stats-info-data{width:33%}pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(8),pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(8)~pn-stats-info-data{width:25%}}pn-stats-info .pn-stats-info__container__content__data .pn-stats-info-data__container{justify-content:flex-start;min-height:0;padding:2.4rem}@media screen and (min-width: 768px){pn-stats-info .pn-stats-info__container__content__data .pn-stats-info-data__container{min-height:0}}@media screen and (min-width: 992px){pn-stats-info .pn-stats-info__container__content__data .pn-stats-info-data__container{min-height:0}}@media screen and (min-width: 1200px){pn-stats-info .pn-stats-info__container__content__data .pn-stats-info-data__container{min-height:0}}pn-stats-info[data-stats-image=background] .pn-stats-info__container__map{display:none;border-top-left-radius:2.4rem;border-bottom-left-radius:2.4rem}@media screen and (min-width: 768px){pn-stats-info[data-stats-image=background] .pn-stats-info__container__map{display:block;max-width:46rem;width:100%;background-color:#0d234b;background-repeat:no-repeat;background-position:bottom center;background-size:55%}}@media screen and (min-width: 1200px){pn-stats-info[data-stats-image=background] .pn-stats-info__container__map{background-size:contain}}pn-stats-info[data-stats-image=background] .pn-stats-info-image-container{display:none}pn-stats-info[data-stats-image=background] .pn-stats-info__container__content{display:flex;flex-direction:column;align-items:center;width:100%;background-color:#0d234b;background-repeat:no-repeat;background-position:bottom left;background-size:50%;background-blend-mode:overlay;border-radius:2.4rem}@media screen and (min-width: 768px){pn-stats-info[data-stats-image=background] .pn-stats-info__container__content{border-top-left-radius:0;border-bottom-left-radius:0;max-width:54rem;background-position:-999px -999px;background-size:0}}@media screen and (min-width: 1200px){pn-stats-info[data-stats-image=background] .pn-stats-info__container__content{max-width:100%}}pn-stats-info[data-stats-image=background] .pn-stats-info__container__content__data{min-height:0}pn-stats-info[data-stats-image=image] .pn-stats-info__container{flex-direction:column;padding-top:0}@media screen and (min-width: 992px){pn-stats-info[data-stats-image=image] .pn-stats-info__container{flex-direction:row}}pn-stats-info[data-stats-image=image] .pn-stats-info__container__map{display:none}pn-stats-info[data-stats-image=image] .pn-stats-info-image-container{display:block;position:relative}pn-stats-info[data-stats-image=image] .pn-stats-info-image-container [slot=illustration]{border-top-left-radius:2.4rem;border-top-right-radius:2.4rem}pn-stats-info[data-stats-image=image] .pn-stats-info-image-container [slot=illustration]>picture>img{width:100%;height:auto;border-top-left-radius:2.4rem;border-top-right-radius:2.4rem;border-bottom-left-radius:0;border-bottom-right-radius:0}@media screen and (min-width: 992px){pn-stats-info[data-stats-image=image] .pn-stats-info-image-container{display:flex;align-items:center;background-color:#0d234b;padding-left:4rem;border-top-left-radius:2.4rem;border-bottom-left-radius:2.4rem}pn-stats-info[data-stats-image=image] .pn-stats-info-image-container [slot=illustration] img{clip-path:circle(50%);object-fit:cover;object-position:center;aspect-ratio:1;max-width:45rem}}pn-stats-info[data-stats-image=image] .pn-stats-info__container__content{width:100%;max-width:100%;border-bottom-right-radius:2.4rem;border-bottom-left-radius:2.4rem;border-top-right-radius:0;border-top-left-radius:0}@media screen and (min-width: 768px){pn-stats-info[data-stats-image=image] .pn-stats-info__container__content{justify-content:center}}@media screen and (min-width: 992px){pn-stats-info[data-stats-image=image] .pn-stats-info__container__content{border-top-right-radius:2.4rem;border-bottom-right-radius:2.4rem;border-bottom-left-radius:0;max-width:100%}}@media screen and (min-width: 992px){pn-stats-info[data-stats-image=image] .pn-stats-info__container__content__heading{font-size:4.8rem}}pn-stats-info[data-stats-image=image] .pn-stats-info__container__content__data{width:100%;height:auto;min-height:0}pn-stats-info[data-stats-image=image] .pn-stats-info__container__content__data .pn-stats-info-data__container{justify-content:flex-start;min-height:5.6rem}@media screen and (min-width: 768px){pn-stats-info[data-stats-image=image] .pn-stats-info__container__content__data .pn-stats-info-data__container{min-height:5.6rem;padding:2.4rem}}@media screen and (min-width: 1200px){pn-stats-info[data-stats-image=image] .pn-stats-info__container__content__data .pn-stats-info-data__container{min-height:5rem}}@media screen and (min-width: 992px){pn-stats-info[data-stats-image=image] .pn-stats-info__container__content__data .pn-stats-info-data__container__content__data{font-size:5.6rem}}@media screen and (min-width: 992px){pn-stats-info[data-stats-image=image] .pn-stats-info__container__content__data .pn-stats-info-data__container__content__unit{font-size:5.6rem}}.bleed-container:has(pn-stats-info){padding:0;margin-bottom:3rem;overflow:hidden}.bleed-container:has(pn-stats-info) .container>.mb-5{margin-bottom:0 !important}.bleed-container:has(pn-stats-info) .statsblock{margin-bottom:0 !important}.comboquotestatsblock pn-stats-info{width:100%}.comboquotestatsblock pn-stats-info .pn-stats-info__container{display:flex;flex-direction:row;justify-content:center;padding-top:2rem}@media screen and (min-width: 768px){.comboquotestatsblock pn-stats-info .pn-stats-info__container{padding-top:6rem}}@media screen and (min-width: 1200px){.comboquotestatsblock pn-stats-info .pn-stats-info__container{padding-top:8rem}}.comboquotestatsblock pn-stats-info .pn-stats-info__container__map{display:none}@media screen and (min-width: 768px){.comboquotestatsblock pn-stats-info .pn-stats-info__container__map{display:block;max-width:46rem;width:100%;background-color:#0d234b;background-repeat:no-repeat;background-position:bottom center;background-size:55%}}@media screen and (min-width: 1200px){.comboquotestatsblock pn-stats-info .pn-stats-info__container__map{background-size:contain}}.comboquotestatsblock pn-stats-info .pn-stats-info-image-container{display:none}.comboquotestatsblock pn-stats-info .pn-stats-info__container__content{display:flex;flex-direction:column;align-items:center;padding:1rem;width:100%;background-color:#0d234b;background-repeat:no-repeat;background-position:bottom left;background-size:50%;background-blend-mode:overlay;padding-bottom:2rem}@media screen and (min-width: 768px){.comboquotestatsblock pn-stats-info .pn-stats-info__container__content{max-width:54rem;background-position:-999px -999px;background-size:0;padding-bottom:4rem;padding-right:4rem}}@media screen and (min-width: 1200px){.comboquotestatsblock pn-stats-info .pn-stats-info__container__content{max-width:100%;padding-bottom:6rem;padding-right:6rem}}.comboquotestatsblock pn-stats-info .pn-stats-info__container__content__heading{color:#f06365;margin-bottom:2.4rem;align-self:center;text-align:center;font-size:3rem;line-height:110%}@media screen and (min-width: 1200px){.comboquotestatsblock pn-stats-info .pn-stats-info__container__content__heading{font-weight:700;font-size:4.8rem}}.comboquotestatsblock pn-stats-info .pn-stats-info__container__content__data{height:100%;display:flex;flex-direction:row;flex-wrap:wrap;min-height:20rem}@media screen and (min-width: 1640px){.comboquotestatsblock pn-stats-info .pn-stats-info__container__content__data{width:65rem}}pn-stats-info[data-stats-background-color=bluedarkest] .pn-stats-info__container__content,pn-stats-info[data-stats-background-color=bluedarkest] .pn-stats-info__container__map{background-color:#0d234b}pn-stats-info[data-stats-background-color=bluedarkest] .pn-stats-info-image-container{background-color:transparent}pn-stats-info[data-stats-background-color=bluedarkest] .pn-stats-info-image-container [slot=illustration]{background-color:#0d234b}@media screen and (min-width: 992px){pn-stats-info[data-stats-background-color=bluedarkest] .pn-stats-info-image-container{background-color:#0d234b}}pn-stats-info[data-stats-background-color=bluedarkest] .pn-stats-info__container__content__heading,pn-stats-info[data-stats-background-color=bluedarkest] .pn-stats-info-data__container__content{color:#f06365}pn-stats-info[data-stats-background-color=bluedarkest] .pn-stats-info-data__container__content__preamble{color:#ffffff}pn-stats-info[data-stats-background-color=greendark] .pn-stats-info__container__content,pn-stats-info[data-stats-background-color=greendark] .pn-stats-info__container__map{background-color:#005e41}pn-stats-info[data-stats-background-color=greendark] .pn-stats-info-image-container{background-color:transparent}pn-stats-info[data-stats-background-color=greendark] .pn-stats-info-image-container [slot=illustration]{background-color:#005e41}@media screen and (min-width: 992px){pn-stats-info[data-stats-background-color=greendark] .pn-stats-info-image-container{background-color:#005e41}}pn-stats-info[data-stats-background-color=greendark] .pn-stats-info__container__content__heading,pn-stats-info[data-stats-background-color=greendark] .pn-stats-info-data__container__content{color:#ffffff}pn-stats-info[data-stats-background-color=greendark] .pn-stats-info-data__container__content__preamble{color:#ffffff}pn-stats-info[data-stats-background-color=green25] .pn-stats-info__container__content,pn-stats-info[data-stats-background-color=green25] .pn-stats-info__container__map{background-color:#edfbf3}pn-stats-info[data-stats-background-color=green25] .pn-stats-info-image-container{background-color:transparent}pn-stats-info[data-stats-background-color=green25] .pn-stats-info-image-container [slot=illustration]{background-color:#edfbf3}@media screen and (min-width: 992px){pn-stats-info[data-stats-background-color=green25] .pn-stats-info-image-container{background-color:#edfbf3}}pn-stats-info[data-stats-background-color=green25] .pn-stats-info__container__content__heading,pn-stats-info[data-stats-background-color=green25] .pn-stats-info-data__container__content{color:#005d92}pn-stats-info[data-stats-background-color=green25] .pn-stats-info-data__container__content__preamble{color:#0d234b}pn-stats-info[data-stats-background-color=gray100] .pn-stats-info__container__content,pn-stats-info[data-stats-background-color=gray100] .pn-stats-info__container__map{background-color:#e9e6e5}pn-stats-info[data-stats-background-color=gray100] .pn-stats-info-image-container{background-color:transparent}pn-stats-info[data-stats-background-color=gray100] .pn-stats-info-image-container [slot=illustration]{background-color:#e9e6e5}@media screen and (min-width: 992px){pn-stats-info[data-stats-background-color=gray100] .pn-stats-info-image-container{background-color:#e9e6e5}}pn-stats-info[data-stats-background-color=gray100] .pn-stats-info__container__content__heading,pn-stats-info[data-stats-background-color=gray100] .pn-stats-info-data__container__content{color:#005d92}pn-stats-info[data-stats-background-color=gray100] .pn-stats-info-data__container__content__preamble{color:#0d234b}pn-stats-info[data-stats-background-color=bluedefault] .pn-stats-info__container__content,pn-stats-info[data-stats-background-color=bluedefault] .pn-stats-info__container__map{background-color:#00a0d6}pn-stats-info[data-stats-background-color=bluedefault] .pn-stats-info-image-container{background-color:transparent}pn-stats-info[data-stats-background-color=bluedefault] .pn-stats-info-image-container [slot=illustration]{background-color:#00a0d6}@media screen and (min-width: 992px){pn-stats-info[data-stats-background-color=bluedefault] .pn-stats-info-image-container{background-color:#00a0d6}}pn-stats-info[data-stats-background-color=bluedefault] .pn-stats-info__container__content__heading,pn-stats-info[data-stats-background-color=bluedefault] .pn-stats-info-data__container__content{color:#ffffff}pn-stats-info[data-stats-background-color=bluedefault] .pn-stats-info-data__container__content__preamble{color:#0d234b}pn-stats-info[data-stats-background-color=blue25] .pn-stats-info__container__content,pn-stats-info[data-stats-background-color=blue25] .pn-stats-info__container__map{background-color:#effbff}pn-stats-info[data-stats-background-color=blue25] .pn-stats-info-image-container{background-color:transparent}pn-stats-info[data-stats-background-color=blue25] .pn-stats-info-image-container [slot=illustration]{background-color:#effbff}@media screen and (min-width: 992px){pn-stats-info[data-stats-background-color=blue25] .pn-stats-info-image-container{background-color:#effbff}}pn-stats-info[data-stats-background-color=blue25] .pn-stats-info__container__content__heading,pn-stats-info[data-stats-background-color=blue25] .pn-stats-info-data__container__content{color:#005d92}pn-stats-info[data-stats-background-color=blue25] .pn-stats-info-data__container__content__preamble{color:#0d234b}pn-stats-info[data-stats-background-color=coral25] .pn-stats-info__container__content,pn-stats-info[data-stats-background-color=coral25] .pn-stats-info__container__map{background-color:#fef7f6}pn-stats-info[data-stats-background-color=coral25] .pn-stats-info-image-container{background-color:transparent}pn-stats-info[data-stats-background-color=coral25] .pn-stats-info-image-container [slot=illustration]{background-color:#fef7f6}@media screen and (min-width: 992px){pn-stats-info[data-stats-background-color=coral25] .pn-stats-info-image-container{background-color:#fef7f6}}pn-stats-info[data-stats-background-color=coral25] .pn-stats-info__container__content__heading,pn-stats-info[data-stats-background-color=coral25] .pn-stats-info-data__container__content{color:#005d92}pn-stats-info[data-stats-background-color=coral25] .pn-stats-info-data__container__content__preamble{color:#0d234b}pn-stats-info[data-stats-background-color=gray25] .pn-stats-info__container__content,pn-stats-info[data-stats-background-color=gray25] .pn-stats-info__container__map{background-color:#f9f8f8}pn-stats-info[data-stats-background-color=gray25] .pn-stats-info-image-container{background-color:transparent}pn-stats-info[data-stats-background-color=gray25] .pn-stats-info-image-container [slot=illustration]{background-color:#f9f8f8}@media screen and (min-width: 992px){pn-stats-info[data-stats-background-color=gray25] .pn-stats-info-image-container{background-color:#f9f8f8}}pn-stats-info[data-stats-background-color=gray25] .pn-stats-info__container__content__heading,pn-stats-info[data-stats-background-color=gray25] .pn-stats-info-data__container__content{color:#005d92}pn-stats-info[data-stats-background-color=gray25] .pn-stats-info-data__container__content__preamble{color:#0d234b}";
+const pnStatsInfoCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-stats-info .pn-stats-info__container{display:flex;flex-direction:row;justify-content:center}pn-stats-info .pn-stats-info__container__map{display:none}pn-stats-info .pn-stats-info-image-container{display:none}pn-stats-info .pn-stats-info__container__content{display:flex;flex-direction:column;align-items:center;padding:2.4rem 2.4rem 1.6rem;width:100%;background-color:#0d234b;border-radius:2.4rem}@media screen and (min-width: 992px){pn-stats-info .pn-stats-info__container__content{padding:4rem 2.4rem 1.6rem}}@media screen and (min-width: 1200px){pn-stats-info .pn-stats-info__container__content{padding:5.6rem 2.4rem 3.2rem}}pn-stats-info .pn-stats-info__container__content__heading{color:#f06365;margin-bottom:2.4rem;align-self:center;text-align:center;font-size:3rem;line-height:110%}@media screen and (min-width: 1200px){pn-stats-info .pn-stats-info__container__content__heading{font-weight:700;font-size:4.8rem}}pn-stats-info .pn-stats-info__container__content__data{height:100%;display:flex;flex-direction:row;justify-content:center;flex-wrap:wrap;width:100%}pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(2n),pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(2n)~pn-stats-info-data{width:50%}@media screen and (min-width: 768px){pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(1){width:100%}pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(2),pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(2)~pn-stats-info-data{width:50%}pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(3n),pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(3n)~pn-stats-info-data{width:33%}pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(8),pn-stats-info .pn-stats-info__container__content__data pn-stats-info-data:first-child:nth-last-child(8)~pn-stats-info-data{width:25%}}pn-stats-info .pn-stats-info__container__content__data .pn-stats-info-data__container{justify-content:flex-start;min-height:0;padding:2.4rem}@media screen and (min-width: 768px){pn-stats-info .pn-stats-info__container__content__data .pn-stats-info-data__container{min-height:0}}@media screen and (min-width: 992px){pn-stats-info .pn-stats-info__container__content__data .pn-stats-info-data__container{min-height:0}}@media screen and (min-width: 1200px){pn-stats-info .pn-stats-info__container__content__data .pn-stats-info-data__container{min-height:0}}pn-stats-info[data-stats-image=background] .pn-stats-info__container__map{display:none;border-top-left-radius:2.4rem;border-bottom-left-radius:2.4rem}@media screen and (min-width: 768px){pn-stats-info[data-stats-image=background] .pn-stats-info__container__map{display:block;max-width:46rem;width:100%;background-color:#0d234b;background-repeat:no-repeat;background-position:bottom center;background-size:55%}}@media screen and (min-width: 1200px){pn-stats-info[data-stats-image=background] .pn-stats-info__container__map{background-size:contain}}pn-stats-info[data-stats-image=background] .pn-stats-info-image-container{display:none}pn-stats-info[data-stats-image=background] .pn-stats-info__container__content{display:flex;flex-direction:column;align-items:center;width:100%;background-color:#0d234b;background-repeat:no-repeat;background-position:bottom left;background-size:50%;background-blend-mode:overlay;border-radius:2.4rem}@media screen and (min-width: 768px){pn-stats-info[data-stats-image=background] .pn-stats-info__container__content{border-top-left-radius:0;border-bottom-left-radius:0;max-width:54rem;background-position:-999px -999px;background-size:0}}@media screen and (min-width: 1200px){pn-stats-info[data-stats-image=background] .pn-stats-info__container__content{max-width:100%}}pn-stats-info[data-stats-image=background] .pn-stats-info__container__content__data{min-height:0}pn-stats-info[data-stats-image=image] .pn-stats-info__container{flex-direction:column;padding-top:0}@media screen and (min-width: 992px){pn-stats-info[data-stats-image=image] .pn-stats-info__container{flex-direction:row}}pn-stats-info[data-stats-image=image] .pn-stats-info__container__map{display:none}pn-stats-info[data-stats-image=image] .pn-stats-info-image-container{display:block;position:relative}pn-stats-info[data-stats-image=image] .pn-stats-info-image-container [slot=illustration]{border-top-left-radius:2.4rem;border-top-right-radius:2.4rem}pn-stats-info[data-stats-image=image] .pn-stats-info-image-container [slot=illustration]>picture>img{width:100%;height:auto;border-top-left-radius:2.4rem;border-top-right-radius:2.4rem;border-bottom-left-radius:0;border-bottom-right-radius:0}@media screen and (min-width: 992px){pn-stats-info[data-stats-image=image] .pn-stats-info-image-container{display:flex;align-items:center;background-color:#0d234b;padding-left:4rem;border-top-left-radius:2.4rem;border-bottom-left-radius:2.4rem}pn-stats-info[data-stats-image=image] .pn-stats-info-image-container [slot=illustration] img{clip-path:circle(50%);object-fit:cover;object-position:center;aspect-ratio:1;max-width:45rem}}pn-stats-info[data-stats-image=image] .pn-stats-info__container__content{width:100%;max-width:100%;border-bottom-right-radius:2.4rem;border-bottom-left-radius:2.4rem;border-top-right-radius:0;border-top-left-radius:0}@media screen and (min-width: 768px){pn-stats-info[data-stats-image=image] .pn-stats-info__container__content{justify-content:center}}@media screen and (min-width: 992px){pn-stats-info[data-stats-image=image] .pn-stats-info__container__content{border-top-right-radius:2.4rem;border-bottom-right-radius:2.4rem;border-bottom-left-radius:0;max-width:100%}}@media screen and (min-width: 992px){pn-stats-info[data-stats-image=image] .pn-stats-info__container__content__heading{font-size:4.8rem}}pn-stats-info[data-stats-image=image] .pn-stats-info__container__content__data{width:100%;height:auto;min-height:0}pn-stats-info[data-stats-image=image] .pn-stats-info__container__content__data .pn-stats-info-data__container{justify-content:flex-start;min-height:5.6rem}@media screen and (min-width: 768px){pn-stats-info[data-stats-image=image] .pn-stats-info__container__content__data .pn-stats-info-data__container{min-height:5.6rem;padding:2.4rem}}@media screen and (min-width: 1200px){pn-stats-info[data-stats-image=image] .pn-stats-info__container__content__data .pn-stats-info-data__container{min-height:5rem}}@media screen and (min-width: 992px){pn-stats-info[data-stats-image=image] .pn-stats-info__container__content__data .pn-stats-info-data__container__content__data{font-size:5.6rem}}@media screen and (min-width: 992px){pn-stats-info[data-stats-image=image] .pn-stats-info__container__content__data .pn-stats-info-data__container__content__unit{font-size:5.6rem}}.bleed-container:has(pn-stats-info){padding:0;margin-bottom:3rem;overflow:hidden}.bleed-container:has(pn-stats-info) .container>.mb-5{margin-bottom:0 !important}.bleed-container:has(pn-stats-info) .statsblock{margin-bottom:0 !important}.comboquotestatsblock pn-stats-info{width:100%}.comboquotestatsblock pn-stats-info .pn-stats-info__container{display:flex;flex-direction:row;justify-content:center;padding-top:2rem}@media screen and (min-width: 768px){.comboquotestatsblock pn-stats-info .pn-stats-info__container{padding-top:6rem}}@media screen and (min-width: 1200px){.comboquotestatsblock pn-stats-info .pn-stats-info__container{padding-top:8rem}}.comboquotestatsblock pn-stats-info .pn-stats-info__container__map{display:none}@media screen and (min-width: 768px){.comboquotestatsblock pn-stats-info .pn-stats-info__container__map{display:block;max-width:46rem;width:100%;background-color:#0d234b;background-repeat:no-repeat;background-position:bottom center;background-size:55%}}@media screen and (min-width: 1200px){.comboquotestatsblock pn-stats-info .pn-stats-info__container__map{background-size:contain}}.comboquotestatsblock pn-stats-info .pn-stats-info-image-container{display:none}.comboquotestatsblock pn-stats-info .pn-stats-info__container__content{display:flex;flex-direction:column;align-items:center;padding:1rem;width:100%;background-color:#0d234b;background-repeat:no-repeat;background-position:bottom left;background-size:50%;background-blend-mode:overlay;padding-bottom:2rem}@media screen and (min-width: 768px){.comboquotestatsblock pn-stats-info .pn-stats-info__container__content{max-width:54rem;background-position:-999px -999px;background-size:0;padding-bottom:4rem;padding-right:4rem}}@media screen and (min-width: 1200px){.comboquotestatsblock pn-stats-info .pn-stats-info__container__content{max-width:100%;padding-bottom:6rem;padding-right:6rem}}.comboquotestatsblock pn-stats-info .pn-stats-info__container__content__heading{color:#f06365;margin-bottom:2.4rem;align-self:center;text-align:center;font-size:3rem;line-height:110%}@media screen and (min-width: 1200px){.comboquotestatsblock pn-stats-info .pn-stats-info__container__content__heading{font-weight:700;font-size:4.8rem}}.comboquotestatsblock pn-stats-info .pn-stats-info__container__content__data{height:100%;display:flex;flex-direction:row;flex-wrap:wrap;min-height:20rem}@media screen and (min-width: 1640px){.comboquotestatsblock pn-stats-info .pn-stats-info__container__content__data{width:65rem}}pn-stats-info[data-stats-background-color=bluedarkest] .pn-stats-info__container__content,pn-stats-info[data-stats-background-color=bluedarkest] .pn-stats-info__container__map{background-color:#0d234b}pn-stats-info[data-stats-background-color=bluedarkest] .pn-stats-info-image-container{background-color:transparent}pn-stats-info[data-stats-background-color=bluedarkest] .pn-stats-info-image-container [slot=illustration]{background-color:#0d234b}@media screen and (min-width: 992px){pn-stats-info[data-stats-background-color=bluedarkest] .pn-stats-info-image-container{background-color:#0d234b}}pn-stats-info[data-stats-background-color=bluedarkest] .pn-stats-info__container__content__heading,pn-stats-info[data-stats-background-color=bluedarkest] .pn-stats-info-data__container__content{color:#f06365}pn-stats-info[data-stats-background-color=bluedarkest] .pn-stats-info-data__container__content__preamble{color:#ffffff}pn-stats-info[data-stats-background-color=greendark] .pn-stats-info__container__content,pn-stats-info[data-stats-background-color=greendark] .pn-stats-info__container__map{background-color:#005e41}pn-stats-info[data-stats-background-color=greendark] .pn-stats-info-image-container{background-color:transparent}pn-stats-info[data-stats-background-color=greendark] .pn-stats-info-image-container [slot=illustration]{background-color:#005e41}@media screen and (min-width: 992px){pn-stats-info[data-stats-background-color=greendark] .pn-stats-info-image-container{background-color:#005e41}}pn-stats-info[data-stats-background-color=greendark] .pn-stats-info__container__content__heading,pn-stats-info[data-stats-background-color=greendark] .pn-stats-info-data__container__content{color:#ffffff}pn-stats-info[data-stats-background-color=greendark] .pn-stats-info-data__container__content__preamble{color:#ffffff}pn-stats-info[data-stats-background-color=green25] .pn-stats-info__container__content,pn-stats-info[data-stats-background-color=green25] .pn-stats-info__container__map{background-color:#edfbf3}pn-stats-info[data-stats-background-color=green25] .pn-stats-info-image-container{background-color:transparent}pn-stats-info[data-stats-background-color=green25] .pn-stats-info-image-container [slot=illustration]{background-color:#edfbf3}@media screen and (min-width: 992px){pn-stats-info[data-stats-background-color=green25] .pn-stats-info-image-container{background-color:#edfbf3}}pn-stats-info[data-stats-background-color=green25] .pn-stats-info__container__content__heading,pn-stats-info[data-stats-background-color=green25] .pn-stats-info-data__container__content{color:#005d92}pn-stats-info[data-stats-background-color=green25] .pn-stats-info-data__container__content__preamble{color:#0d234b}pn-stats-info[data-stats-background-color=gray100] .pn-stats-info__container__content,pn-stats-info[data-stats-background-color=gray100] .pn-stats-info__container__map{background-color:#e9e6e5}pn-stats-info[data-stats-background-color=gray100] .pn-stats-info-image-container{background-color:transparent}pn-stats-info[data-stats-background-color=gray100] .pn-stats-info-image-container [slot=illustration]{background-color:#e9e6e5}@media screen and (min-width: 992px){pn-stats-info[data-stats-background-color=gray100] .pn-stats-info-image-container{background-color:#e9e6e5}}pn-stats-info[data-stats-background-color=gray100] .pn-stats-info__container__content__heading,pn-stats-info[data-stats-background-color=gray100] .pn-stats-info-data__container__content{color:#005d92}pn-stats-info[data-stats-background-color=gray100] .pn-stats-info-data__container__content__preamble{color:#0d234b}pn-stats-info[data-stats-background-color=bluedefault] .pn-stats-info__container__content,pn-stats-info[data-stats-background-color=bluedefault] .pn-stats-info__container__map{background-color:#00a0d6}pn-stats-info[data-stats-background-color=bluedefault] .pn-stats-info-image-container{background-color:transparent}pn-stats-info[data-stats-background-color=bluedefault] .pn-stats-info-image-container [slot=illustration]{background-color:#00a0d6}@media screen and (min-width: 992px){pn-stats-info[data-stats-background-color=bluedefault] .pn-stats-info-image-container{background-color:#00a0d6}}pn-stats-info[data-stats-background-color=bluedefault] .pn-stats-info__container__content__heading,pn-stats-info[data-stats-background-color=bluedefault] .pn-stats-info-data__container__content{color:#ffffff}pn-stats-info[data-stats-background-color=bluedefault] .pn-stats-info-data__container__content__preamble{color:#0d234b}pn-stats-info[data-stats-background-color=blue25] .pn-stats-info__container__content,pn-stats-info[data-stats-background-color=blue25] .pn-stats-info__container__map{background-color:#effbff}pn-stats-info[data-stats-background-color=blue25] .pn-stats-info-image-container{background-color:transparent}pn-stats-info[data-stats-background-color=blue25] .pn-stats-info-image-container [slot=illustration]{background-color:#effbff}@media screen and (min-width: 992px){pn-stats-info[data-stats-background-color=blue25] .pn-stats-info-image-container{background-color:#effbff}}pn-stats-info[data-stats-background-color=blue25] .pn-stats-info__container__content__heading,pn-stats-info[data-stats-background-color=blue25] .pn-stats-info-data__container__content{color:#005d92}pn-stats-info[data-stats-background-color=blue25] .pn-stats-info-data__container__content__preamble{color:#0d234b}pn-stats-info[data-stats-background-color=coral25] .pn-stats-info__container__content,pn-stats-info[data-stats-background-color=coral25] .pn-stats-info__container__map{background-color:#fef7f6}pn-stats-info[data-stats-background-color=coral25] .pn-stats-info-image-container{background-color:transparent}pn-stats-info[data-stats-background-color=coral25] .pn-stats-info-image-container [slot=illustration]{background-color:#fef7f6}@media screen and (min-width: 992px){pn-stats-info[data-stats-background-color=coral25] .pn-stats-info-image-container{background-color:#fef7f6}}pn-stats-info[data-stats-background-color=coral25] .pn-stats-info__container__content__heading,pn-stats-info[data-stats-background-color=coral25] .pn-stats-info-data__container__content{color:#005d92}pn-stats-info[data-stats-background-color=coral25] .pn-stats-info-data__container__content__preamble{color:#0d234b}pn-stats-info[data-stats-background-color=gray25] .pn-stats-info__container__content,pn-stats-info[data-stats-background-color=gray25] .pn-stats-info__container__map{background-color:#f9f8f8}pn-stats-info[data-stats-background-color=gray25] .pn-stats-info-image-container{background-color:transparent}pn-stats-info[data-stats-background-color=gray25] .pn-stats-info-image-container [slot=illustration]{background-color:#f9f8f8}@media screen and (min-width: 992px){pn-stats-info[data-stats-background-color=gray25] .pn-stats-info-image-container{background-color:#f9f8f8}}pn-stats-info[data-stats-background-color=gray25] .pn-stats-info__container__content__heading,pn-stats-info[data-stats-background-color=gray25] .pn-stats-info-data__container__content{color:#005d92}pn-stats-info[data-stats-background-color=gray25] .pn-stats-info-data__container__content__preamble{color:#0d234b}";
 const PnStatsInfoStyle0 = pnStatsInfoCss;
 const mockStringArray = '[ { "preamble": "Million parcels","formatStyle":"None", "format":"En","startValue":0, "data": 2023, "unit": null, "duration": 0 }, { "preamble": "Million parcels", "format": "En", "startValue":40, "data": 226, "unit": null, "duration": 1000 },{"preamble": "carbon dioxide emissions since 2009", "startValue":0, "format":"En", "formatStyle":"None", "data": -44, "unit": "%", "duration": 2000 }, { "preamble": "Million parcels", "startValue":100, "data": 226, "unit": null, "duration": 1000 }, {"preamble": "carbon dioxide emissions since 2009", "startValue": 30, "data": -44, "unit": "%", "duration": 2000 }, { "preamble": "Million parcels", "startValue": 20, "data": 226, "unit": null, "duration": 1000 }]';

package/dist/components/pn-stats-info.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pn-stats-info.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,8uhBAA8uhB,CAAC;AACtwhB,0BAAe,cAAc;;ACG7B,MAAM,eAAe,GACnB,msBAAmsB,CAAC;MAMzrBA,aAAW;;;;uBACI,IAAI;yBACF,eAAe;6BACX,IAAI;6BAEa,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAA2B;;IAGrG,gBAAgB,CAAC,QAAgB;QAC/B,IAAI,QAAQ;YAAE,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;KACzD;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,0BAA0B,IACnC,4DAAK,KAAK,EAAC,+BAA+B,EAAC,KAAK,EAAE,EAAE,eAAe,EAAE,OAAO,IAAI,CAAC,aAAa,GAAG,EAAE,GAAQ,EAE3G,4DAAK,KAAK,EAAC,+BAA+B,IACxC,6DAAM,IAAI,EAAC,cAAc,GAAG,CACxB,EAEN,4DAAK,KAAK,EAAC,mCAAmC,EAAC,KAAK,EAAE,EAAE,eAAe,EAAE,OAAO,IAAI,CAAC,aAAa,GAAG,EAAE,IACpG,IAAI,CAAC,OAAO,IAAI,2DAAI,KAAK,EAAC,4CAA4C,IAAE,IAAI,CAAC,OAAO,CAAM,EAC3F,4DAAK,KAAK,EAAC,yCAAyC,IACjD,IAAI,CAAC,aAAa;YACjB,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK;gBAClC,QACE,0BACE,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,KAAK,CAAC,UAAU,EAC5B,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,WAAW,EAAE,KAAK,CAAC,WAAW,GACV,EACtB;aACH,CAAC,CACA,CACF,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PnStatsInfo"],"sources":["src/components/data-visualization/pn-stats-info/pn-stats-info.scss?tag=pn-stats-info","src/components/data-visualization/pn-stats-info/pn-stats-info.tsx"],"sourcesContent":["@import '../../../globals/main';\n\n//standalone no image/ default\npn-stats-info {\n .pn-stats-info__container {\n display: flex;\n flex-direction: row;\n justify-content: center;\n }\n\n .pn-stats-info__container__map {\n display: none;\n }\n\n .pn-stats-info-image-container {\n display: none;\n }\n\n .pn-stats-info__container__content {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 2.4rem 2.4rem 1.6rem;\n\n width: 100%;\n background-color: $blue900;\n\n border-radius: 2.4rem;\n\n @media screen and (min-width: $min-width-lg) {\n padding: 4rem 2.4rem 1.6rem;\n }\n\n @media screen and (min-width: $min-width-xl) {\n padding: 5.6rem 2.4rem 3.2rem;\n }\n }\n\n .pn-stats-info__container__content__heading {\n color: $coral400;\n margin-bottom: 2.4rem;\n align-self: center;\n text-align: center;\n\n font-size: 3rem;\n line-height: 110%;\n\n @media screen and (min-width: $min-width-xl) {\n font-weight: 700;\n font-size: 4.8rem;\n }\n }\n\n .pn-stats-info__container__content__data {\n height: 100%;\n display: flex;\n flex-direction: row;\n justify-content: center;\n flex-wrap: wrap;\n\n width: 100%;\n //one item\n\n pn-stats-info-data:first-child:nth-last-child(2n),\n pn-stats-info-data:first-child:nth-last-child(2n) ~ pn-stats-info-data {\n width: 50%;\n }\n\n @media screen and (min-width: $min-width-md) {\n pn-stats-info-data:first-child:nth-last-child(1) {\n width: 100%;\n }\n\n // two items\n pn-stats-info-data:first-child:nth-last-child(2),\n pn-stats-info-data:first-child:nth-last-child(2) ~ pn-stats-info-data {\n width: 50%;\n }\n\n //multiples of tree items\n pn-stats-info-data:first-child:nth-last-child(3n),\n pn-stats-info-data:first-child:nth-last-child(3n) ~ pn-stats-info-data {\n width: 33%;\n }\n\n //8 items\n pn-stats-info-data:first-child:nth-last-child(8),\n pn-stats-info-data:first-child:nth-last-child(8) ~ pn-stats-info-data {\n width: 25%;\n }\n }\n\n .pn-stats-info-data__container {\n justify-content: flex-start;\n min-height: 0;\n padding: 2.4rem;\n\n @media screen and (min-width: $min-width-md) {\n min-height: 0;\n }\n @media screen and (min-width: $min-width-lg) {\n min-height: 0;\n }\n @media screen and (min-width: $min-width-xl) {\n min-height: 0;\n }\n }\n }\n}\n\n// WITH BACKGROUND -------------------------------------\n\npn-stats-info[data-stats-image='background'] {\n .pn-stats-info__container__map {\n display: none;\n\n @media screen and (min-width: $min-width-md) {\n display: block;\n max-width: 46rem;\n width: 100%;\n background-color: $blue900;\n background-repeat: no-repeat;\n background-position: bottom center;\n background-size: 55%;\n }\n\n @media screen and (min-width: $min-width-xl) {\n background-size: contain;\n }\n\n border-top-left-radius: 2.4rem;\n border-bottom-left-radius: 2.4rem;\n }\n\n .pn-stats-info-image-container {\n display: none;\n }\n\n .pn-stats-info__container__content {\n display: flex;\n flex-direction: column;\n align-items: center;\n\n width: 100%;\n background-color: $blue900;\n background-repeat: no-repeat;\n background-position: bottom left;\n background-size: 50%;\n background-blend-mode: overlay;\n\n border-radius: 2.4rem;\n\n @media screen and (min-width: $min-width-md) {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n max-width: 54rem;\n background-position: -999px -999px;\n background-size: 0;\n }\n\n @media screen and (min-width: $min-width-xl) {\n max-width: 100%;\n }\n }\n\n .pn-stats-info__container__content__data {\n min-height: 0;\n }\n}\n\n// WITH IMAGE--------------------------------------------\n\npn-stats-info[data-stats-image='image'] {\n .pn-stats-info__container {\n flex-direction: column;\n padding-top: 0;\n\n @media screen and (min-width: $min-width-lg) {\n flex-direction: row;\n }\n }\n\n .pn-stats-info__container__map {\n display: none;\n }\n\n .pn-stats-info-image-container {\n display: block;\n position: relative;\n\n & [slot='illustration'] {\n border-top-left-radius: 2.4rem;\n border-top-right-radius: 2.4rem;\n & > picture > img {\n width: 100%;\n height: auto;\n border-top-left-radius: 2.4rem;\n border-top-right-radius: 2.4rem;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n }\n\n @media screen and (min-width: $min-width-lg) {\n display: flex;\n align-items: center;\n background-color: $blue900;\n padding-left: 4rem;\n border-top-left-radius: 2.4rem;\n border-bottom-left-radius: 2.4rem;\n\n & [slot='illustration'] {\n img {\n clip-path: circle(50%);\n object-fit: cover;\n object-position: center;\n aspect-ratio: 1;\n max-width: 45rem;\n }\n }\n }\n }\n\n .pn-stats-info__container__content {\n width: 100%;\n max-width: 100%;\n border-bottom-right-radius: 2.4rem;\n border-bottom-left-radius: 2.4rem;\n border-top-right-radius: 0;\n border-top-left-radius: 0;\n\n @media screen and (min-width: $min-width-md) {\n justify-content: center;\n }\n\n @media screen and (min-width: $min-width-lg) {\n border-top-right-radius: 2.4rem;\n border-bottom-right-radius: 2.4rem;\n border-bottom-left-radius: 0;\n max-width: 100%;\n }\n }\n\n .pn-stats-info__container__content__heading {\n @media screen and (min-width: $min-width-lg) {\n font-size: 4.8rem;\n }\n }\n\n .pn-stats-info__container__content__data {\n width: 100%;\n height: auto;\n min-height: 0;\n .pn-stats-info-data__container {\n justify-content: flex-start;\n min-height: 5.6rem;\n\n @media screen and (min-width: $min-width-md) {\n min-height: 5.6rem;\n padding: 2.4rem;\n }\n\n @media screen and (min-width: $min-width-xl) {\n min-height: 5rem;\n }\n }\n\n .pn-stats-info-data__container__content__data {\n @media screen and (min-width: $min-width-lg) {\n font-size: 5.6rem;\n }\n }\n\n .pn-stats-info-data__container__content__unit {\n @media screen and (min-width: $min-width-lg) {\n font-size: 5.6rem;\n }\n }\n }\n}\n\n//bleed\n.bleed-container:has(pn-stats-info) {\n padding: 0;\n margin-bottom: 3rem;\n\n overflow: hidden;\n\n .container > .mb-5 {\n margin-bottom: 0 !important; //counteracts mb-5 in pn-project, sorry for the !important\n }\n .statsblock {\n margin-bottom: 0 !important; //counteracts mb-5 in pn-project sorry for the !important\n }\n}\n\n//i combo\n.comboquotestatsblock {\n pn-stats-info {\n width: 100%;\n\n .pn-stats-info__container {\n display: flex;\n flex-direction: row;\n justify-content: center;\n\n padding-top: 2rem;\n @media screen and (min-width: $min-width-md) {\n padding-top: 6rem;\n }\n\n @media screen and (min-width: $min-width-xl) {\n padding-top: 8rem;\n }\n }\n\n .pn-stats-info__container__map {\n display: none;\n\n @media screen and (min-width: $min-width-md) {\n display: block;\n max-width: 46rem;\n width: 100%;\n background-color: $blue900;\n background-repeat: no-repeat;\n background-position: bottom center;\n background-size: 55%;\n }\n\n @media screen and (min-width: $min-width-xl) {\n background-size: contain;\n }\n }\n\n .pn-stats-info-image-container {\n display: none;\n }\n\n .pn-stats-info__container__content {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 1rem;\n\n //map\n width: 100%;\n background-color: $blue900;\n background-repeat: no-repeat;\n background-position: bottom left;\n background-size: 50%;\n background-blend-mode: overlay;\n padding-bottom: 2rem;\n @media screen and (min-width: $min-width-md) {\n max-width: 54rem;\n background-position: -999px -999px;\n background-size: 0;\n padding-bottom: 4rem;\n padding-right: 4rem;\n }\n\n @media screen and (min-width: $min-width-xl) {\n max-width: 100%;\n padding-bottom: 6rem;\n padding-right: 6rem;\n }\n }\n\n .pn-stats-info__container__content__heading {\n color: $coral400;\n margin-bottom: 2.4rem;\n align-self: center;\n text-align: center;\n\n font-size: 3rem;\n line-height: 110%;\n\n @media screen and (min-width: $min-width-xl) {\n font-weight: 700;\n font-size: 4.8rem;\n }\n }\n\n .pn-stats-info__container__content__data {\n height: 100%;\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n min-height: 20rem;\n\n @media screen and (min-width: $min-width-xxl) {\n width: 65rem;\n }\n }\n }\n}\n\n//colors\npn-stats-info[data-stats-background-color='bluedarkest'] {\n .pn-stats-info__container__content,\n .pn-stats-info__container__map {\n background-color: $blue900;\n }\n\n .pn-stats-info-image-container {\n background-color: transparent;\n [slot='illustration'] {\n background-color: $blue900;\n }\n @media screen and (min-width: $min-width-lg) {\n background-color: $blue900;\n }\n }\n\n .pn-stats-info__container__content__heading,\n .pn-stats-info-data__container__content {\n color: $coral400;\n }\n\n .pn-stats-info-data__container__content__preamble {\n color: $white;\n }\n}\n\npn-stats-info[data-stats-background-color='greendark'] {\n .pn-stats-info__container__content,\n .pn-stats-info__container__map {\n background-color: $green700;\n }\n\n .pn-stats-info-image-container {\n background-color: transparent;\n [slot='illustration'] {\n background-color: $green700;\n }\n \n @media screen and (min-width: $min-width-lg) {\n background-color: $green700;\n }\n }\n\n .pn-stats-info__container__content__heading,\n .pn-stats-info-data__container__content {\n color: $white;\n }\n\n .pn-stats-info-data__container__content__preamble {\n color: $white;\n }\n}\n\npn-stats-info[data-stats-background-color='green25'] {\n .pn-stats-info__container__content,\n .pn-stats-info__container__map {\n background-color: $green25;\n }\n\n .pn-stats-info-image-container {\n background-color: transparent;\n [slot='illustration'] {\n background-color: $green25;\n }\n @media screen and (min-width: $min-width-lg) {\n background-color: $green25;\n }\n }\n\n .pn-stats-info__container__content__heading,\n .pn-stats-info-data__container__content {\n color: $blue700;\n }\n\n .pn-stats-info-data__container__content__preamble {\n color: $blue900;\n }\n}\n\npn-stats-info[data-stats-background-color='gray100'] {\n .pn-stats-info__container__content,\n .pn-stats-info__container__map {\n background-color: $gray100;\n }\n\n .pn-stats-info-image-container {\n background-color: transparent;\n [slot='illustration'] {\n background-color: $gray100;\n }\n @media screen and (min-width: $min-width-lg) {\n background-color: $gray100;\n }\n }\n\n .pn-stats-info__container__content__heading,\n .pn-stats-info-data__container__content {\n color: $blue700;\n }\n\n .pn-stats-info-data__container__content__preamble {\n color: $blue900;\n }\n}\n\npn-stats-info[data-stats-background-color='bluedefault'] {\n .pn-stats-info__container__content,\n .pn-stats-info__container__map {\n background-color: $blue400;\n }\n\n .pn-stats-info-image-container {\n background-color: transparent;\n [slot='illustration'] {\n background-color: $blue400;\n }\n @media screen and (min-width: $min-width-lg) {\n background-color: $blue400;\n }\n }\n\n .pn-stats-info__container__content__heading,\n .pn-stats-info-data__container__content {\n color: $white;\n }\n\n .pn-stats-info-data__container__content__preamble {\n color: $blue900;\n }\n}\n\npn-stats-info[data-stats-background-color='blue25'] {\n .pn-stats-info__container__content,\n .pn-stats-info__container__map {\n background-color: $blue25;\n }\n\n .pn-stats-info-image-container {\n background-color: transparent;\n [slot='illustration'] {\n background-color: $blue25;\n }\n @media screen and (min-width: $min-width-lg) {\n background-color: $blue25;\n }\n }\n\n .pn-stats-info__container__content__heading,\n .pn-stats-info-data__container__content {\n color: $blue700;\n }\n\n .pn-stats-info-data__container__content__preamble {\n color: $blue900;\n }\n}\n\npn-stats-info[data-stats-background-color='coral25'] {\n .pn-stats-info__container__content,\n .pn-stats-info__container__map {\n background-color: $coral25;\n }\n\n .pn-stats-info-image-container {\n background-color: transparent;\n [slot='illustration'] {\n background-color: $coral25;\n }\n @media screen and (min-width: $min-width-lg) {\n background-color: $coral25;\n }\n }\n\n .pn-stats-info__container__content__heading,\n .pn-stats-info-data__container__content {\n color: $blue700;\n }\n\n .pn-stats-info-data__container__content__preamble {\n color: $blue900;\n }\n}\n\npn-stats-info[data-stats-background-color='gray25'] {\n .pn-stats-info__container__content,\n .pn-stats-info__container__map {\n background-color: $gray25;\n }\n\n .pn-stats-info-image-container {\n background-color: transparent;\n [slot='illustration'] {\n background-color: $gray25;\n }\n @media screen and (min-width: $min-width-lg) {\n background-color: $gray25;\n }\n }\n\n .pn-stats-info__container__content__heading,\n .pn-stats-info-data__container__content {\n color: $blue700;\n }\n\n .pn-stats-info-data__container__content__preamble {\n color: $blue900;\n }\n}\n","import { Component, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { PnStatsInfoDataProps } from './types';\n\nconst mockStringArray =\n '[ { \"preamble\": \"Million parcels\",\"formatStyle\":\"None\", \"format\":\"En\",\"startValue\":0, \"data\": 2023, \"unit\": null, \"duration\": 0 }, { \"preamble\": \"Million parcels\", \"format\": \"En\", \"startValue\":40, \"data\": 226, \"unit\": null, \"duration\": 1000 },{\"preamble\": \"carbon dioxide emissions since 2009\", \"startValue\":0, \"format\":\"En\", \"formatStyle\":\"None\", \"data\": -44, \"unit\": \"%\", \"duration\": 2000 }, { \"preamble\": \"Million parcels\", \"startValue\":100, \"data\": 226, \"unit\": null, \"duration\": 1000 }, {\"preamble\": \"carbon dioxide emissions since 2009\", \"startValue\": 30, \"data\": -44, \"unit\": \"%\", \"duration\": 2000 }, { \"preamble\": \"Million parcels\", \"startValue\": 20, \"data\": 226, \"unit\": null, \"duration\": 1000 }]';\n\n@Component({\n tag: 'pn-stats-info',\n styleUrl: 'pn-stats-info.scss',\n})\nexport class PnStatsInfo {\n @Prop() heading: string = null;\n @Prop() dataArray: string = mockStringArray;\n @Prop() backgroundUrl: string = null;\n\n @State() myParsedArray: PnStatsInfoDataProps[] = JSON.parse(this.dataArray) as PnStatsInfoDataProps[];\n\n @Watch('dataArray')\n parseMyArrayProp(newValue: string) {\n if (newValue) this.myParsedArray = JSON.parse(newValue);\n }\n\n render() {\n return (\n <Host>\n <div class=\"pn-stats-info__container\">\n <div class=\"pn-stats-info__container__map\" style={{ backgroundImage: `url(${this.backgroundUrl})` }}></div>\n\n <div class=\"pn-stats-info-image-container\">\n <slot name=\"illustration\" />\n </div>\n\n <div class=\"pn-stats-info__container__content\" style={{ backgroundImage: `url(${this.backgroundUrl})` }}>\n {this.heading && <h3 class=\"pn-stats-info__container__content__heading\">{this.heading}</h3>}\n <div class=\"pn-stats-info__container__content__data\">\n {this.myParsedArray &&\n this.myParsedArray.map((stats, index) => {\n return (\n <pn-stats-info-data\n index={index}\n startValue={stats.startValue}\n data={stats.data}\n unit={stats.unit}\n preamble={stats.preamble}\n duration={stats.duration}\n format={stats.format}\n formatStyle={stats.formatStyle}\n ></pn-stats-info-data>\n );\n })}\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pn-stats-info.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,q6gBAAq6gB,CAAC;AAC77gB,0BAAe,cAAc;;ACG7B,MAAM,eAAe,GACnB,msBAAmsB,CAAC;MAMzrBA,aAAW;;;;uBACI,IAAI;yBACF,eAAe;6BACX,IAAI;6BAEa,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAA2B;;IAGrG,gBAAgB,CAAC,QAAgB;QAC/B,IAAI,QAAQ;YAAE,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;KACzD;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,0BAA0B,IACnC,4DAAK,KAAK,EAAC,+BAA+B,EAAC,KAAK,EAAE,EAAE,eAAe,EAAE,OAAO,IAAI,CAAC,aAAa,GAAG,EAAE,GAAQ,EAE3G,4DAAK,KAAK,EAAC,+BAA+B,IACxC,6DAAM,IAAI,EAAC,cAAc,GAAG,CACxB,EAEN,4DAAK,KAAK,EAAC,mCAAmC,EAAC,KAAK,EAAE,EAAE,eAAe,EAAE,OAAO,IAAI,CAAC,aAAa,GAAG,EAAE,IACpG,IAAI,CAAC,OAAO,IAAI,2DAAI,KAAK,EAAC,4CAA4C,IAAE,IAAI,CAAC,OAAO,CAAM,EAC3F,4DAAK,KAAK,EAAC,yCAAyC,IACjD,IAAI,CAAC,aAAa;YACjB,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK;gBAClC,QACE,0BACE,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,KAAK,CAAC,UAAU,EAC5B,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,WAAW,EAAE,KAAK,CAAC,WAAW,GACV,EACtB;aACH,CAAC,CACA,CACF,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PnStatsInfo"],"sources":["src/components/data-visualization/pn-stats-info/pn-stats-info.scss?tag=pn-stats-info","src/components/data-visualization/pn-stats-info/pn-stats-info.tsx"],"sourcesContent":["@import '../../../globals/main';\n\n//standalone no image/ default\npn-stats-info {\n .pn-stats-info__container {\n display: flex;\n flex-direction: row;\n justify-content: center;\n }\n\n .pn-stats-info__container__map {\n display: none;\n }\n\n .pn-stats-info-image-container {\n display: none;\n }\n\n .pn-stats-info__container__content {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 2.4rem 2.4rem 1.6rem;\n\n width: 100%;\n background-color: $blue900;\n\n border-radius: 2.4rem;\n\n @media screen and (min-width: $min-width-lg) {\n padding: 4rem 2.4rem 1.6rem;\n }\n\n @media screen and (min-width: $min-width-xl) {\n padding: 5.6rem 2.4rem 3.2rem;\n }\n }\n\n .pn-stats-info__container__content__heading {\n color: $coral400;\n margin-bottom: 2.4rem;\n align-self: center;\n text-align: center;\n\n font-size: 3rem;\n line-height: 110%;\n\n @media screen and (min-width: $min-width-xl) {\n font-weight: 700;\n font-size: 4.8rem;\n }\n }\n\n .pn-stats-info__container__content__data {\n height: 100%;\n display: flex;\n flex-direction: row;\n justify-content: center;\n flex-wrap: wrap;\n\n width: 100%;\n //one item\n\n pn-stats-info-data:first-child:nth-last-child(2n),\n pn-stats-info-data:first-child:nth-last-child(2n) ~ pn-stats-info-data {\n width: 50%;\n }\n\n @media screen and (min-width: $min-width-md) {\n pn-stats-info-data:first-child:nth-last-child(1) {\n width: 100%;\n }\n\n // two items\n pn-stats-info-data:first-child:nth-last-child(2),\n pn-stats-info-data:first-child:nth-last-child(2) ~ pn-stats-info-data {\n width: 50%;\n }\n\n //multiples of tree items\n pn-stats-info-data:first-child:nth-last-child(3n),\n pn-stats-info-data:first-child:nth-last-child(3n) ~ pn-stats-info-data {\n width: 33%;\n }\n\n //8 items\n pn-stats-info-data:first-child:nth-last-child(8),\n pn-stats-info-data:first-child:nth-last-child(8) ~ pn-stats-info-data {\n width: 25%;\n }\n }\n\n .pn-stats-info-data__container {\n justify-content: flex-start;\n min-height: 0;\n padding: 2.4rem;\n\n @media screen and (min-width: $min-width-md) {\n min-height: 0;\n }\n @media screen and (min-width: $min-width-lg) {\n min-height: 0;\n }\n @media screen and (min-width: $min-width-xl) {\n min-height: 0;\n }\n }\n }\n}\n\n// WITH BACKGROUND -------------------------------------\n\npn-stats-info[data-stats-image='background'] {\n .pn-stats-info__container__map {\n display: none;\n\n @media screen and (min-width: $min-width-md) {\n display: block;\n max-width: 46rem;\n width: 100%;\n background-color: $blue900;\n background-repeat: no-repeat;\n background-position: bottom center;\n background-size: 55%;\n }\n\n @media screen and (min-width: $min-width-xl) {\n background-size: contain;\n }\n\n border-top-left-radius: 2.4rem;\n border-bottom-left-radius: 2.4rem;\n }\n\n .pn-stats-info-image-container {\n display: none;\n }\n\n .pn-stats-info__container__content {\n display: flex;\n flex-direction: column;\n align-items: center;\n\n width: 100%;\n background-color: $blue900;\n background-repeat: no-repeat;\n background-position: bottom left;\n background-size: 50%;\n background-blend-mode: overlay;\n\n border-radius: 2.4rem;\n\n @media screen and (min-width: $min-width-md) {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n max-width: 54rem;\n background-position: -999px -999px;\n background-size: 0;\n }\n\n @media screen and (min-width: $min-width-xl) {\n max-width: 100%;\n }\n }\n\n .pn-stats-info__container__content__data {\n min-height: 0;\n }\n}\n\n// WITH IMAGE--------------------------------------------\n\npn-stats-info[data-stats-image='image'] {\n .pn-stats-info__container {\n flex-direction: column;\n padding-top: 0;\n\n @media screen and (min-width: $min-width-lg) {\n flex-direction: row;\n }\n }\n\n .pn-stats-info__container__map {\n display: none;\n }\n\n .pn-stats-info-image-container {\n display: block;\n position: relative;\n\n & [slot='illustration'] {\n border-top-left-radius: 2.4rem;\n border-top-right-radius: 2.4rem;\n & > picture > img {\n width: 100%;\n height: auto;\n border-top-left-radius: 2.4rem;\n border-top-right-radius: 2.4rem;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n }\n\n @media screen and (min-width: $min-width-lg) {\n display: flex;\n align-items: center;\n background-color: $blue900;\n padding-left: 4rem;\n border-top-left-radius: 2.4rem;\n border-bottom-left-radius: 2.4rem;\n\n & [slot='illustration'] {\n img {\n clip-path: circle(50%);\n object-fit: cover;\n object-position: center;\n aspect-ratio: 1;\n max-width: 45rem;\n }\n }\n }\n }\n\n .pn-stats-info__container__content {\n width: 100%;\n max-width: 100%;\n border-bottom-right-radius: 2.4rem;\n border-bottom-left-radius: 2.4rem;\n border-top-right-radius: 0;\n border-top-left-radius: 0;\n\n @media screen and (min-width: $min-width-md) {\n justify-content: center;\n }\n\n @media screen and (min-width: $min-width-lg) {\n border-top-right-radius: 2.4rem;\n border-bottom-right-radius: 2.4rem;\n border-bottom-left-radius: 0;\n max-width: 100%;\n }\n }\n\n .pn-stats-info__container__content__heading {\n @media screen and (min-width: $min-width-lg) {\n font-size: 4.8rem;\n }\n }\n\n .pn-stats-info__container__content__data {\n width: 100%;\n height: auto;\n min-height: 0;\n .pn-stats-info-data__container {\n justify-content: flex-start;\n min-height: 5.6rem;\n\n @media screen and (min-width: $min-width-md) {\n min-height: 5.6rem;\n padding: 2.4rem;\n }\n\n @media screen and (min-width: $min-width-xl) {\n min-height: 5rem;\n }\n }\n\n .pn-stats-info-data__container__content__data {\n @media screen and (min-width: $min-width-lg) {\n font-size: 5.6rem;\n }\n }\n\n .pn-stats-info-data__container__content__unit {\n @media screen and (min-width: $min-width-lg) {\n font-size: 5.6rem;\n }\n }\n }\n}\n\n//bleed\n.bleed-container:has(pn-stats-info) {\n padding: 0;\n margin-bottom: 3rem;\n\n overflow: hidden;\n\n .container > .mb-5 {\n margin-bottom: 0 !important; //counteracts mb-5 in pn-project, sorry for the !important\n }\n .statsblock {\n margin-bottom: 0 !important; //counteracts mb-5 in pn-project sorry for the !important\n }\n}\n\n//i combo\n.comboquotestatsblock {\n pn-stats-info {\n width: 100%;\n\n .pn-stats-info__container {\n display: flex;\n flex-direction: row;\n justify-content: center;\n\n padding-top: 2rem;\n @media screen and (min-width: $min-width-md) {\n padding-top: 6rem;\n }\n\n @media screen and (min-width: $min-width-xl) {\n padding-top: 8rem;\n }\n }\n\n .pn-stats-info__container__map {\n display: none;\n\n @media screen and (min-width: $min-width-md) {\n display: block;\n max-width: 46rem;\n width: 100%;\n background-color: $blue900;\n background-repeat: no-repeat;\n background-position: bottom center;\n background-size: 55%;\n }\n\n @media screen and (min-width: $min-width-xl) {\n background-size: contain;\n }\n }\n\n .pn-stats-info-image-container {\n display: none;\n }\n\n .pn-stats-info__container__content {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 1rem;\n\n //map\n width: 100%;\n background-color: $blue900;\n background-repeat: no-repeat;\n background-position: bottom left;\n background-size: 50%;\n background-blend-mode: overlay;\n padding-bottom: 2rem;\n @media screen and (min-width: $min-width-md) {\n max-width: 54rem;\n background-position: -999px -999px;\n background-size: 0;\n padding-bottom: 4rem;\n padding-right: 4rem;\n }\n\n @media screen and (min-width: $min-width-xl) {\n max-width: 100%;\n padding-bottom: 6rem;\n padding-right: 6rem;\n }\n }\n\n .pn-stats-info__container__content__heading {\n color: $coral400;\n margin-bottom: 2.4rem;\n align-self: center;\n text-align: center;\n\n font-size: 3rem;\n line-height: 110%;\n\n @media screen and (min-width: $min-width-xl) {\n font-weight: 700;\n font-size: 4.8rem;\n }\n }\n\n .pn-stats-info__container__content__data {\n height: 100%;\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n min-height: 20rem;\n\n @media screen and (min-width: $min-width-xxl) {\n width: 65rem;\n }\n }\n }\n}\n\n//colors\npn-stats-info[data-stats-background-color='bluedarkest'] {\n .pn-stats-info__container__content,\n .pn-stats-info__container__map {\n background-color: $blue900;\n }\n\n .pn-stats-info-image-container {\n background-color: transparent;\n [slot='illustration'] {\n background-color: $blue900;\n }\n @media screen and (min-width: $min-width-lg) {\n background-color: $blue900;\n }\n }\n\n .pn-stats-info__container__content__heading,\n .pn-stats-info-data__container__content {\n color: $coral400;\n }\n\n .pn-stats-info-data__container__content__preamble {\n color: $white;\n }\n}\n\npn-stats-info[data-stats-background-color='greendark'] {\n .pn-stats-info__container__content,\n .pn-stats-info__container__map {\n background-color: $green700;\n }\n\n .pn-stats-info-image-container {\n background-color: transparent;\n [slot='illustration'] {\n background-color: $green700;\n }\n \n @media screen and (min-width: $min-width-lg) {\n background-color: $green700;\n }\n }\n\n .pn-stats-info__container__content__heading,\n .pn-stats-info-data__container__content {\n color: $white;\n }\n\n .pn-stats-info-data__container__content__preamble {\n color: $white;\n }\n}\n\npn-stats-info[data-stats-background-color='green25'] {\n .pn-stats-info__container__content,\n .pn-stats-info__container__map {\n background-color: $green25;\n }\n\n .pn-stats-info-image-container {\n background-color: transparent;\n [slot='illustration'] {\n background-color: $green25;\n }\n @media screen and (min-width: $min-width-lg) {\n background-color: $green25;\n }\n }\n\n .pn-stats-info__container__content__heading,\n .pn-stats-info-data__container__content {\n color: $blue700;\n }\n\n .pn-stats-info-data__container__content__preamble {\n color: $blue900;\n }\n}\n\npn-stats-info[data-stats-background-color='gray100'] {\n .pn-stats-info__container__content,\n .pn-stats-info__container__map {\n background-color: $gray100;\n }\n\n .pn-stats-info-image-container {\n background-color: transparent;\n [slot='illustration'] {\n background-color: $gray100;\n }\n @media screen and (min-width: $min-width-lg) {\n background-color: $gray100;\n }\n }\n\n .pn-stats-info__container__content__heading,\n .pn-stats-info-data__container__content {\n color: $blue700;\n }\n\n .pn-stats-info-data__container__content__preamble {\n color: $blue900;\n }\n}\n\npn-stats-info[data-stats-background-color='bluedefault'] {\n .pn-stats-info__container__content,\n .pn-stats-info__container__map {\n background-color: $blue400;\n }\n\n .pn-stats-info-image-container {\n background-color: transparent;\n [slot='illustration'] {\n background-color: $blue400;\n }\n @media screen and (min-width: $min-width-lg) {\n background-color: $blue400;\n }\n }\n\n .pn-stats-info__container__content__heading,\n .pn-stats-info-data__container__content {\n color: $white;\n }\n\n .pn-stats-info-data__container__content__preamble {\n color: $blue900;\n }\n}\n\npn-stats-info[data-stats-background-color='blue25'] {\n .pn-stats-info__container__content,\n .pn-stats-info__container__map {\n background-color: $blue25;\n }\n\n .pn-stats-info-image-container {\n background-color: transparent;\n [slot='illustration'] {\n background-color: $blue25;\n }\n @media screen and (min-width: $min-width-lg) {\n background-color: $blue25;\n }\n }\n\n .pn-stats-info__container__content__heading,\n .pn-stats-info-data__container__content {\n color: $blue700;\n }\n\n .pn-stats-info-data__container__content__preamble {\n color: $blue900;\n }\n}\n\npn-stats-info[data-stats-background-color='coral25'] {\n .pn-stats-info__container__content,\n .pn-stats-info__container__map {\n background-color: $coral25;\n }\n\n .pn-stats-info-image-container {\n background-color: transparent;\n [slot='illustration'] {\n background-color: $coral25;\n }\n @media screen and (min-width: $min-width-lg) {\n background-color: $coral25;\n }\n }\n\n .pn-stats-info__container__content__heading,\n .pn-stats-info-data__container__content {\n color: $blue700;\n }\n\n .pn-stats-info-data__container__content__preamble {\n color: $blue900;\n }\n}\n\npn-stats-info[data-stats-background-color='gray25'] {\n .pn-stats-info__container__content,\n .pn-stats-info__container__map {\n background-color: $gray25;\n }\n\n .pn-stats-info-image-container {\n background-color: transparent;\n [slot='illustration'] {\n background-color: $gray25;\n }\n @media screen and (min-width: $min-width-lg) {\n background-color: $gray25;\n }\n }\n\n .pn-stats-info__container__content__heading,\n .pn-stats-info-data__container__content {\n color: $blue700;\n }\n\n .pn-stats-info-data__container__content__preamble {\n color: $blue900;\n }\n}\n","import { Component, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { PnStatsInfoDataProps } from './types';\n\nconst mockStringArray =\n '[ { \"preamble\": \"Million parcels\",\"formatStyle\":\"None\", \"format\":\"En\",\"startValue\":0, \"data\": 2023, \"unit\": null, \"duration\": 0 }, { \"preamble\": \"Million parcels\", \"format\": \"En\", \"startValue\":40, \"data\": 226, \"unit\": null, \"duration\": 1000 },{\"preamble\": \"carbon dioxide emissions since 2009\", \"startValue\":0, \"format\":\"En\", \"formatStyle\":\"None\", \"data\": -44, \"unit\": \"%\", \"duration\": 2000 }, { \"preamble\": \"Million parcels\", \"startValue\":100, \"data\": 226, \"unit\": null, \"duration\": 1000 }, {\"preamble\": \"carbon dioxide emissions since 2009\", \"startValue\": 30, \"data\": -44, \"unit\": \"%\", \"duration\": 2000 }, { \"preamble\": \"Million parcels\", \"startValue\": 20, \"data\": 226, \"unit\": null, \"duration\": 1000 }]';\n\n@Component({\n tag: 'pn-stats-info',\n styleUrl: 'pn-stats-info.scss',\n})\nexport class PnStatsInfo {\n @Prop() heading: string = null;\n @Prop() dataArray: string = mockStringArray;\n @Prop() backgroundUrl: string = null;\n\n @State() myParsedArray: PnStatsInfoDataProps[] = JSON.parse(this.dataArray) as PnStatsInfoDataProps[];\n\n @Watch('dataArray')\n parseMyArrayProp(newValue: string) {\n if (newValue) this.myParsedArray = JSON.parse(newValue);\n }\n\n render() {\n return (\n <Host>\n <div class=\"pn-stats-info__container\">\n <div class=\"pn-stats-info__container__map\" style={{ backgroundImage: `url(${this.backgroundUrl})` }}></div>\n\n <div class=\"pn-stats-info-image-container\">\n <slot name=\"illustration\" />\n </div>\n\n <div class=\"pn-stats-info__container__content\" style={{ backgroundImage: `url(${this.backgroundUrl})` }}>\n {this.heading && <h3 class=\"pn-stats-info__container__content__heading\">{this.heading}</h3>}\n <div class=\"pn-stats-info__container__content__data\">\n {this.myParsedArray &&\n this.myParsedArray.map((stats, index) => {\n return (\n <pn-stats-info-data\n index={index}\n startValue={stats.startValue}\n data={stats.data}\n unit={stats.unit}\n preamble={stats.preamble}\n duration={stats.duration}\n format={stats.format}\n formatStyle={stats.formatStyle}\n ></pn-stats-info-data>\n );\n })}\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}