@postnord/pn-marketweb-components 3.5.2 → 4.0.0

package/components/pn-site-selector-item2.js

@@ -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}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}.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 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: '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)))));
+        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)))));
     }
     static get style() { return PnSiteSelectorItemStyle0; }
 }, [0, "pn-site-selector-item", {

package/components/pn-site-selector-item2.js.map

@@ -1 +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}
+{"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}

package/components/pn-site-selector2.js

@@ -22,7 +22,7 @@ const languageData = {
   },
 };
 
-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 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 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: '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' }))))));
+        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' }))))));
     }
     static get style() { return PnSiteSelectorStyle0; }
 }, [4, "pn-site-selector", {

package/components/pn-site-selector2.js.map

@@ -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,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}
+{"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}

package/components/pn-spotlight.js

@@ -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}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}.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 PnSpotlightStyle0 = pnSpotlightCss;
 
 const PnSpotlight$1 = /*@__PURE__*/ proxyCustomElement(class PnSpotlight extends HTMLElement {

package/components/pn-spotlight.js.map

@@ -1 +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}
+{"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}

package/components/pn-stats-info-data2.js

@@ -42,7 +42,7 @@ const inViewport = (entries, toggleClass, isEntryIntersectingCallBack) => {
     });
 };
 
-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 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 PnStatsInfoDataStyle0 = pnStatsInfoDataCss;
 
 const PnStatsInfoData = /*@__PURE__*/ proxyCustomElement(class PnStatsInfoData extends HTMLElement {

package/components/pn-stats-info-data2.js.map

@@ -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,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}
+{"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}

package/components/pn-stats-info.js

@@ -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}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}.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 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/components/pn-stats-info.js.map

@@ -1 +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}
+{"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}

package/components/pn-swan2.js

@@ -23,7 +23,7 @@ const translations = {
     },
 };
 
-const pnSwanCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-swan a{text-decoration:none}pn-swan a:hover{text-decoration:none}pn-swan a:hover span,pn-swan a:hover .pn-swan-text{text-decoration:underline}pn-swan .pn-swan__wrapper{display:flex;flex-direction:column-reverse;align-items:center;gap:0.8rem;color:#2d2013}@media screen and (min-width: 768px){pn-swan .pn-swan__wrapper{flex-direction:row;gap:2.4rem}}pn-swan .pn-swan-icon__wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center}pn-swan .pn-swan-icon svg{width:6rem}pn-swan .pn-swan-icon__preamble{text-align:center;font-size:1rem;font-weight:500}pn-swan .pn-swan-icon__preamble span{display:block;font-weight:400}pn-swan .pn-swan-text{font-size:1.2rem;max-width:20rem;text-align:center;color:#005d92}@media screen and (min-width: 768px){pn-swan .pn-swan-text{text-align:left}}";
+const pnSwanCss = "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-swan a{text-decoration:none}pn-swan a:hover{text-decoration:none}pn-swan a:hover span,pn-swan a:hover .pn-swan-text{text-decoration:underline}pn-swan .pn-swan__wrapper{display:flex;flex-direction:column-reverse;align-items:center;gap:0.8rem;color:#2d2013}@media screen and (min-width: 768px){pn-swan .pn-swan__wrapper{flex-direction:row;gap:2.4rem}}pn-swan .pn-swan-icon__wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center}pn-swan .pn-swan-icon svg{width:6rem}pn-swan .pn-swan-icon__preamble{text-align:center;font-size:1rem;font-weight:500}pn-swan .pn-swan-icon__preamble span{display:block;font-weight:400}pn-swan .pn-swan-text{font-size:1.2rem;max-width:20rem;text-align:center;color:#005d92}@media screen and (min-width: 768px){pn-swan .pn-swan-text{text-align:left}}";
 const PnSwanStyle0 = pnSwanCss;
 
 const PnSwan = /*@__PURE__*/ proxyCustomElement(class PnSwan extends HTMLElement {
@@ -51,7 +51,7 @@ const PnSwan = /*@__PURE__*/ proxyCustomElement(class PnSwan extends HTMLElement
         this.setTranslations();
     }
     render() {
-        return (h(Host, { key: '6e9385e52863368cd35ce30aa5b74f965a04057c' }, h("a", { key: 'e6e0a2f16871ce80a5ec89a807b4105521b0512b', href: this.linkTo }, h("div", { key: 'aa57678a810ea38003d7c18d692edbdb96e919ec', class: "pn-swan__wrapper" }, h("div", { key: '85a18d41fe204bec0775a35b555c7581fd542994', class: "pn-swan-icon__wrapper" }, h("div", { key: 'e077950d928d365b6ec061675b64a3358f052691', class: "pn-swan-icon" }, h("svg", { key: '31c7ea2152e7312b2c4577d4c3543e33eeb20226', viewBox: "0 0 57 57", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: '63e647a3fb249f2b2d03da157384fbee71886343', "clip-path": "url(#clip0_17509_174280)" }, h("path", { key: 'd8065934ee84fba1201022dc913201cfd73b039d', d: "M28.5003 52.5053C41.0088 52.5053 51.149 42.4597 51.149 30.0679C51.149 17.6762 41.0088 7.63062 28.5003 7.63062C15.9917 7.63062 5.85156 17.6762 5.85156 30.0679C5.85156 42.4597 15.9917 52.5053 28.5003 52.5053Z", fill: "white" }), h("path", { key: '8c140223e45231140d64126812195507c873e4dd', d: "M28.5 56.5C43.964 56.5 56.5 43.964 56.5 28.5C56.5 13.036 43.964 0.5 28.5 0.5C13.036 0.5 0.5 13.036 0.5 28.5C0.5 43.964 13.036 56.5 28.5 56.5Z", fill: "white" }), h("path", { key: 'c700a76bc9aa5bd4d3557ddb8fc36112dde890b3', d: "M22.3195 8.48928L5.88882 30.9266C5.88882 30.6653 5.88882 30.3666 5.88882 30.0679C5.85114 19.8013 12.8229 11.1399 22.3195 8.48928ZM41.3128 11.5506C40.0315 10.6919 38.6748 9.94528 37.2428 9.34795L16.9682 37.0493C17.9104 37.5346 18.4379 38.356 20.0207 38.356C20.9252 38.356 22.0934 37.7586 23.2239 36.228L41.3128 11.5506ZM7.99919 39.6253C9.54427 39.6253 11.5793 39.0653 12.6721 38.1693C13.6896 37.348 14.2549 36.6386 15.3101 36.6386C15.4608 36.6386 15.6493 36.6386 15.8 36.676L36.1122 8.93728C34.5672 8.37728 32.9467 8.00395 31.2885 7.81728L7.99919 39.6253ZM8.52678 40.6333C9.12974 41.7533 9.84575 42.836 10.5995 43.8066L12.9359 40.6333H8.52678ZM35.5846 40.6333L26.9171 52.468C27.4447 52.5053 27.9723 52.5053 28.4999 52.5053C29.9696 52.5053 31.4393 52.356 32.8336 52.0946L41.2374 40.596L35.5846 40.6333ZM29.9696 7.66795C29.4797 7.63062 28.9898 7.63062 28.4999 7.63062C26.9548 7.63062 25.4474 7.77995 24.0153 8.07861L6.00188 32.644C6.22799 34.66 6.7179 36.564 7.4716 38.3933L29.9696 7.66795ZM42.6694 40.6333L34.5295 51.7213C40.5591 50.0786 45.6089 46.0093 48.4729 40.6333H42.6694ZM28.4999 40.6333L20.7744 51.1986C22.3195 51.7586 23.94 52.132 25.5981 52.3559L34.1903 40.6333H28.4999ZM21.4151 40.6333L15.6116 48.548C16.8929 49.4066 18.2118 50.1533 19.6439 50.7506L27.0678 40.6333H21.4151ZM14.3303 40.6333L11.3155 44.74C12.333 45.8973 13.4635 46.9426 14.6694 47.876L19.983 40.6333H14.3303ZM15.3478 37.3479C14.8956 37.3479 14.5187 37.7213 14.5187 38.1693C14.5187 38.6173 14.8956 38.9906 15.3478 38.9906C15.8 38.9906 16.1768 38.6173 16.1768 38.1693C16.1768 37.7213 15.8 37.3479 15.3478 37.3479ZM51.1486 29.06C51.1109 28.4626 51.0732 27.9026 50.9978 27.3053L43.0463 38.132H44.4783L51.1486 29.06ZM48.9628 20.436L35.9615 38.1693H37.3935L49.5281 21.6306C49.3397 21.2199 49.1513 20.8093 48.9628 20.436ZM45.6089 15.3586L28.8767 38.1693H30.3087L46.3626 16.2546C46.1365 15.9559 45.8727 15.6573 45.6089 15.3586Z", fill: "#005D92" }), h("path", { key: '21ed2eead81fc9ffabdd12e486ae135dcc64ab6c', d: "M9.2805 13.492C9.73272 13.9026 10.2226 13.7533 10.6372 13.3426C11.0517 12.8946 11.014 12.5213 10.7879 12.2973C10.5618 12.0733 10.3357 12.1106 10.1849 12.2226C9.92114 12.372 9.61966 12.596 9.09207 12.8946C8.48911 13.268 8.03689 13.156 7.73541 12.8573C7.13245 12.2973 7.39624 11.5133 7.88615 10.9533C8.48911 10.3186 9.2805 10.132 9.88346 10.692L9.39355 11.2146C8.97902 10.8786 8.60217 11.028 8.263 11.364C8.03689 11.588 7.84846 11.9986 8.11226 12.26C8.30069 12.4466 8.56448 12.4093 8.82828 12.26C8.86596 12.2226 9.65735 11.7373 9.88346 11.6253C10.3734 11.3266 10.8633 11.476 11.1647 11.7373C11.8054 12.3346 11.5416 13.1933 10.9763 13.7906C10.3357 14.4626 9.50661 14.724 8.75291 14.052L9.2805 13.492Z", fill: "black" }), h("path", { key: 'f825663ac21f6a8e0ebcae963594db1375d2897b', d: "M9.69531 9.23587L10.2983 8.78787L13.087 10.6172L11.9564 7.4812L12.5217 7.0332L13.916 11.0279L13.2754 11.5132L9.69531 9.23587Z", fill: "black" }), h("path", { key: 'a05a61afe2f8264385282f2a692973548c8258f6', d: "M14.1426 6.06254L14.8209 5.68921L18.2126 8.37721L17.5342 8.75054L16.6675 8.04121L15.2354 8.86254L15.4239 9.98254L14.7832 10.3559L14.1426 6.06254ZM15.1224 8.26521L16.2153 7.63054L14.8209 6.47321L15.1224 8.26521Z", fill: "black" }), h("path", { key: '0b741b624683588ddac0d0bd43d86fa545da16ee', d: "M17.2695 4.42005L17.9855 4.15872L20.7742 6.28672L19.7567 3.52405L20.3974 3.30005L21.7917 7.03338L21.0757 7.29472L18.3247 5.16672L19.3422 7.92938L18.7016 8.15338L17.2695 4.42005Z", fill: "black" }), h("path", { key: '66a898bf0bbf4e33a1bde11fa5c0e078097b8e71', d: "M21.9805 2.88937L24.8822 2.3667L24.9953 2.96403L22.8095 3.3747L22.998 4.42003L25.033 4.0467L25.146 4.6067L23.111 4.98003L23.3371 6.13737L25.5605 5.7267L25.6736 6.32403L22.7342 6.80937L21.9805 2.88937Z", fill: "black" }), h("path", { key: '4dbaa4d2cf7ec6f0154c93f2425315db5c9268a8', d: "M26.3145 2.21726H27.0682L28.9901 5.12927L28.9524 2.17993H29.6307L29.7061 6.1746H28.9524L27.0305 3.2626L27.0682 6.21193H26.3898L26.3145 2.21726Z", fill: "black" }), h("path", { key: '184726d60a6cae5c9f32fcd46bf4d875739b2560', d: "M31.4016 2.25464L32.3814 2.44131L32.9467 5.72664L34.6048 2.85197L35.5846 3.03864L34.8686 6.95864L34.1903 6.84664L34.7555 3.82264L33.0974 6.65997L32.4944 6.47331L31.9292 3.26264L31.3639 6.28664L30.6855 6.17464L31.4016 2.25464Z", fill: "black" }), h("path", { key: '8946ff676e45f10d8b323752f1d93ee8acd2d0ea', d: "M38.3359 3.93468L39.0519 4.19601V8.48934L38.3359 8.22801L38.3736 7.10801L36.8285 6.51068L36.0748 7.36934L35.3965 7.10801L38.3359 3.93468ZM37.2054 6.06268L38.3736 6.51068L38.4113 4.68134L37.2054 6.06268ZM38.0721 3.33734L38.2982 2.77734L38.9012 3.00134L38.6751 3.56134L38.0721 3.33734ZM39.8433 3.37468L39.6172 3.93468L39.0142 3.71068L39.2404 3.15068L39.8433 3.37468Z", fill: "black" }), h("path", { key: '6af7952c8f93c35b9dc9eebcf7436711d2fea02a', d: "M41.576 5.31592L43.2718 6.32392C44.0255 6.77192 44.214 7.36925 43.8748 7.92925C43.4603 8.60125 42.895 8.48925 42.7819 8.45192C42.9704 8.60125 43.1965 8.93725 42.8573 9.49725C42.6312 9.90792 42.4428 10.2813 42.5181 10.5053L41.8398 10.1319C41.8398 9.94525 41.9529 9.75858 42.0659 9.57192C42.4428 8.93725 42.4805 8.60125 41.9152 8.26525L41.0107 7.74258L40.144 9.16125L39.541 8.78792L41.576 5.31592ZM41.2368 7.21992L42.2543 7.81725C42.6312 8.04125 42.9704 8.00392 43.1965 7.63058C43.4603 7.18258 43.2342 6.92125 42.895 6.73458L41.8775 6.13725L41.2368 7.21992Z", fill: "black" }), h("path", { key: 'fee15b66364d0d5b9006f3b92a60a02e7f9f570b', d: "M45.7214 7.96655L46.249 8.41455L45.043 9.79589L47.6056 9.57189L48.2463 10.1319L45.9852 10.2812L45.7214 13.1932L45.043 12.6332L45.3068 10.3186L44.5154 10.3559L43.6487 11.3639L43.1211 10.9159L45.7214 7.96655Z", fill: "black" }), h("path", { key: 'b3ae4b2b1211b7cf6e9c8d01d2c1cff58d9b83fc', d: "M48.6246 10.5054L50.7727 12.932L50.3204 13.3427L49.4914 12.372L46.9288 14.612L46.4766 14.0894L49.0391 11.8494L48.2101 10.916L48.6246 10.5054Z", fill: "black" }), h("path", { key: 'cc034b2a8963c605534577e352bf65556ae0025a', d: "M28.5003 52.5053C41.0088 52.5053 51.149 42.4597 51.149 30.0679C51.149 17.6762 41.0088 7.63062 28.5003 7.63062C15.9917 7.63062 5.85156 17.6762 5.85156 30.0679C5.85156 42.4597 15.9917 52.5053 28.5003 52.5053Z", fill: "white" }), h("path", { key: '725df5debf04ef44a912efb1db9b4221eeb172ea', d: "M28.5 56.5C43.964 56.5 56.5 43.964 56.5 28.5C56.5 13.036 43.964 0.5 28.5 0.5C13.036 0.5 0.5 13.036 0.5 28.5C0.5 43.964 13.036 56.5 28.5 56.5Z", fill: "white" }), h("path", { key: 'af5203cb2e2ea5f0848eed9c94fb5c23fa4effeb', d: "M22.3195 8.48928L5.88882 30.9266C5.88882 30.6653 5.88882 30.3666 5.88882 30.0679C5.85114 19.8013 12.8229 11.1399 22.3195 8.48928ZM41.3128 11.5506C40.0315 10.6919 38.6748 9.94528 37.2428 9.34795L16.9682 37.0493C17.9104 37.5346 18.4379 38.356 20.0207 38.356C20.9252 38.356 22.0934 37.7586 23.2239 36.228L41.3128 11.5506ZM7.99919 39.6253C9.54427 39.6253 11.5793 39.0653 12.6721 38.1693C13.6896 37.348 14.2549 36.6386 15.3101 36.6386C15.4608 36.6386 15.6493 36.6386 15.8 36.676L36.1122 8.93728C34.5672 8.37728 32.9467 8.00395 31.2885 7.81728L7.99919 39.6253ZM8.52678 40.6333C9.12974 41.7533 9.84575 42.836 10.5995 43.8066L12.9359 40.6333H8.52678ZM35.5846 40.6333L26.9171 52.4679C27.4447 52.5053 27.9723 52.5053 28.4999 52.5053C29.9696 52.5053 31.4393 52.3559 32.8336 52.0946L41.2374 40.596L35.5846 40.6333ZM29.9696 7.66795C29.4797 7.63062 28.9898 7.63062 28.4999 7.63062C26.9548 7.63062 25.4474 7.77995 24.0153 8.07861L6.00188 32.644C6.22799 34.66 6.71789 36.5639 7.4716 38.3933L29.9696 7.66795ZM42.6694 40.6333L34.5295 51.7213C40.5591 50.0786 45.6089 46.0093 48.4729 40.6333H42.6694ZM28.4999 40.6333L20.7744 51.1986C22.3195 51.7586 23.94 52.132 25.5981 52.3559L34.1903 40.6333H28.4999ZM21.4151 40.6333L15.6116 48.548C16.8929 49.4066 18.2118 50.1533 19.6439 50.7506L27.0678 40.6333H21.4151ZM14.3303 40.6333L11.3155 44.74C12.333 45.8973 13.4635 46.9426 14.6694 47.876L19.983 40.6333H14.3303ZM15.3478 37.3479C14.8956 37.3479 14.5187 37.7213 14.5187 38.1693C14.5187 38.6173 14.8956 38.9906 15.3478 38.9906C15.8 38.9906 16.1768 38.6173 16.1768 38.1693C16.1768 37.7213 15.8 37.3479 15.3478 37.3479ZM51.1486 29.0599C51.1109 28.4626 51.0732 27.9026 50.9978 27.3053L43.0463 38.132H44.4783L51.1486 29.0599ZM48.9628 20.436L35.9615 38.1693H37.3935L49.5281 21.6306C49.3397 21.2199 49.1513 20.8093 48.9628 20.436ZM45.6089 15.3586L28.8767 38.1693H30.3087L46.3626 16.2546C46.1365 15.9559 45.8727 15.6573 45.6089 15.3586Z", fill: "#00A65D" }), h("path", { key: 'd6c599e5ad2d60ddee78bca97215eda6854ed352', d: "M9.2805 13.492C9.73272 13.9026 10.2226 13.7533 10.6372 13.3426C11.0517 12.8946 11.014 12.5213 10.7879 12.2973C10.5618 12.0733 10.3357 12.1106 10.1849 12.2226C9.92114 12.372 9.61966 12.596 9.09207 12.8946C8.48911 13.268 8.03689 13.156 7.73541 12.8573C7.13245 12.2973 7.39624 11.5133 7.88615 10.9533C8.48911 10.3186 9.2805 10.132 9.88346 10.692L9.39355 11.2146C8.97902 10.8786 8.60217 11.028 8.263 11.364C8.03689 11.588 7.84846 11.9986 8.11226 12.26C8.30069 12.4466 8.56448 12.4093 8.82828 12.26C8.86596 12.2226 9.65735 11.7373 9.88346 11.6253C10.3734 11.3266 10.8633 11.476 11.1647 11.7373C11.8054 12.3346 11.5416 13.1933 10.9763 13.7906C10.3357 14.4626 9.50661 14.724 8.75291 14.052L9.2805 13.492Z", fill: "black" }), h("path", { key: 'fb7556e3583d98e06cfd1d9ec33ab94f1cea784a', d: "M9.69531 9.23587L10.2983 8.78787L13.087 10.6172L11.9564 7.4812L12.5217 7.0332L13.916 11.0279L13.2754 11.5132L9.69531 9.23587Z", fill: "black" }), h("path", { key: '17a15b0068a12182f0a7c3743753a178b3cdaaec', d: "M14.1426 6.06254L14.8209 5.68921L18.2126 8.37721L17.5342 8.75054L16.6675 8.04121L15.2354 8.86254L15.4239 9.98254L14.7832 10.3559L14.1426 6.06254ZM15.1224 8.26521L16.2153 7.63054L14.8209 6.47321L15.1224 8.26521Z", fill: "black" }), h("path", { key: 'c18607c798bceabb8da3806fef5db66f6157897f', d: "M17.2695 4.42005L17.9855 4.15872L20.7742 6.28672L19.7567 3.52405L20.3974 3.30005L21.7917 7.03338L21.0757 7.29472L18.3247 5.16672L19.3422 7.92938L18.7016 8.15338L17.2695 4.42005Z", fill: "black" }), h("path", { key: '4038c9ce4f16438858226418f66c5bb0b3a729e6', d: "M21.9805 2.88937L24.8822 2.3667L24.9953 2.96403L22.8095 3.3747L22.998 4.42003L25.033 4.0467L25.146 4.6067L23.111 4.98003L23.3371 6.13737L25.5605 5.7267L25.6736 6.32403L22.7342 6.80937L21.9805 2.88937Z", fill: "black" }), h("path", { key: '416976da4cb040ed9e391f181c2515c8989d1b15', d: "M26.3145 2.21726H27.0682L28.9901 5.12927L28.9524 2.17993H29.6307L29.7061 6.1746H28.9524L27.0305 3.2626L27.0682 6.21193H26.3898L26.3145 2.21726Z", fill: "black" }), h("path", { key: '6b003b151977f39955846bf4fabcd9e8a5bec70b', d: "M31.4016 2.25464L32.3814 2.44131L32.9467 5.72664L34.6048 2.85197L35.5846 3.03864L34.8686 6.95864L34.1903 6.84664L34.7555 3.82264L33.0974 6.65997L32.4944 6.47331L31.9292 3.26264L31.3639 6.28664L30.6855 6.17464L31.4016 2.25464Z", fill: "black" }), h("path", { key: 'fa82647172acea8fe45468605dcf4c7522e5216c', d: "M38.3359 3.93468L39.0519 4.19601V8.48934L38.3359 8.22801L38.3736 7.10801L36.8285 6.51068L36.0748 7.36934L35.3965 7.10801L38.3359 3.93468ZM37.2054 6.06268L38.3736 6.51068L38.4113 4.68134L37.2054 6.06268ZM38.0721 3.33734L38.2982 2.77734L38.9012 3.00134L38.6751 3.56134L38.0721 3.33734ZM39.8433 3.37468L39.6172 3.93468L39.0142 3.71068L39.2404 3.15068L39.8433 3.37468Z", fill: "black" }), h("path", { key: '940bf827e2a84dafadc781ab1f5e3670986c912f', d: "M41.576 5.31592L43.2718 6.32392C44.0255 6.77192 44.214 7.36925 43.8748 7.92925C43.4603 8.60125 42.895 8.48925 42.7819 8.45192C42.9704 8.60125 43.1965 8.93725 42.8573 9.49725C42.6312 9.90792 42.4428 10.2813 42.5181 10.5053L41.8398 10.1319C41.8398 9.94525 41.9529 9.75858 42.0659 9.57192C42.4428 8.93725 42.4805 8.60125 41.9152 8.26525L41.0107 7.74258L40.144 9.16125L39.541 8.78792L41.576 5.31592ZM41.2368 7.21992L42.2543 7.81725C42.6312 8.04125 42.9704 8.00392 43.1965 7.63058C43.4603 7.18258 43.2342 6.92125 42.895 6.73458L41.8775 6.13725L41.2368 7.21992Z", fill: "black" }), h("path", { key: '09dbd87fcb161b56ed35b004407ba4a3bf3a831c', d: "M45.7214 7.96655L46.249 8.41455L45.043 9.79589L47.6056 9.57189L48.2463 10.1319L45.9852 10.2812L45.7214 13.1932L45.043 12.6332L45.3068 10.3186L44.5154 10.3559L43.6487 11.3639L43.1211 10.9159L45.7214 7.96655Z", fill: "black" }), h("path", { key: '11fbdfc9bd90cccf80dec451b069620ea490e0da', d: "M48.6246 10.5054L50.7727 12.932L50.3204 13.3427L49.4914 12.372L46.9288 14.612L46.4766 14.0894L49.0391 11.8494L48.2101 10.916L48.6246 10.5054Z", fill: "black" })), h("defs", { key: 'fe3002320ec725925cae5278cc894d6b25f3799d' }, h("clipPath", { key: 'c8f29f7033a3d32810a04acc2d47e96081dab987', id: "clip0_17509_174280" }, h("rect", { key: '80ade9eb6752b5565c408d5d0def98b300928c5d', width: "56", height: "56", fill: "white", transform: "translate(0.5 0.5)" }))))), h("div", { key: 'bca463e11883f21423fbcbdca7a2bc23d06250c0', class: "pn-swan-icon__preamble" }, this.i18n.preamble, " ", h("span", { key: '04f6a907b1b090a17d274d75b68fd21133720ac7' }, this.licenseNumber))), h("div", { key: 'cafab0d2fae269063e3360d45b29001cf15e6c73', class: "pn-swan-text" }, this.i18n.text)))));
+        return (h(Host, { key: 'd3841749f6a4865bdcf204e8ceba8c848259a69a' }, h("a", { key: '52e50bc1bb5679b5880316dd47ed59fcb7a82cde', href: this.linkTo }, h("div", { key: '5fe11003a4caf154669e6ba53cfb6fa54d41bff4', class: "pn-swan__wrapper" }, h("div", { key: '870e24126109f92ceec52aed50300d2dbd179a2d', class: "pn-swan-icon__wrapper" }, h("div", { key: '3d3de35ec4d3f70981a9a69748afc568a1fb747c', class: "pn-swan-icon" }, h("svg", { key: '720090e34592ea214c4fba8ad56c2e27a4d248c6', viewBox: "0 0 57 57", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: '9cfd2df154215de84e38d0d758a5dd5d981e16bf', "clip-path": "url(#clip0_17509_174280)" }, h("path", { key: '1c8d7a2eaf57bb0b4d94df1c7737a6c14a4e720a', d: "M28.5003 52.5053C41.0088 52.5053 51.149 42.4597 51.149 30.0679C51.149 17.6762 41.0088 7.63062 28.5003 7.63062C15.9917 7.63062 5.85156 17.6762 5.85156 30.0679C5.85156 42.4597 15.9917 52.5053 28.5003 52.5053Z", fill: "white" }), h("path", { key: '6482a569e525d0e3fc388d6740912137893fe408', d: "M28.5 56.5C43.964 56.5 56.5 43.964 56.5 28.5C56.5 13.036 43.964 0.5 28.5 0.5C13.036 0.5 0.5 13.036 0.5 28.5C0.5 43.964 13.036 56.5 28.5 56.5Z", fill: "white" }), h("path", { key: 'c7baa68042fc9f53ed0c27b90a1bc7c3e1dac9e3', d: "M22.3195 8.48928L5.88882 30.9266C5.88882 30.6653 5.88882 30.3666 5.88882 30.0679C5.85114 19.8013 12.8229 11.1399 22.3195 8.48928ZM41.3128 11.5506C40.0315 10.6919 38.6748 9.94528 37.2428 9.34795L16.9682 37.0493C17.9104 37.5346 18.4379 38.356 20.0207 38.356C20.9252 38.356 22.0934 37.7586 23.2239 36.228L41.3128 11.5506ZM7.99919 39.6253C9.54427 39.6253 11.5793 39.0653 12.6721 38.1693C13.6896 37.348 14.2549 36.6386 15.3101 36.6386C15.4608 36.6386 15.6493 36.6386 15.8 36.676L36.1122 8.93728C34.5672 8.37728 32.9467 8.00395 31.2885 7.81728L7.99919 39.6253ZM8.52678 40.6333C9.12974 41.7533 9.84575 42.836 10.5995 43.8066L12.9359 40.6333H8.52678ZM35.5846 40.6333L26.9171 52.468C27.4447 52.5053 27.9723 52.5053 28.4999 52.5053C29.9696 52.5053 31.4393 52.356 32.8336 52.0946L41.2374 40.596L35.5846 40.6333ZM29.9696 7.66795C29.4797 7.63062 28.9898 7.63062 28.4999 7.63062C26.9548 7.63062 25.4474 7.77995 24.0153 8.07861L6.00188 32.644C6.22799 34.66 6.7179 36.564 7.4716 38.3933L29.9696 7.66795ZM42.6694 40.6333L34.5295 51.7213C40.5591 50.0786 45.6089 46.0093 48.4729 40.6333H42.6694ZM28.4999 40.6333L20.7744 51.1986C22.3195 51.7586 23.94 52.132 25.5981 52.3559L34.1903 40.6333H28.4999ZM21.4151 40.6333L15.6116 48.548C16.8929 49.4066 18.2118 50.1533 19.6439 50.7506L27.0678 40.6333H21.4151ZM14.3303 40.6333L11.3155 44.74C12.333 45.8973 13.4635 46.9426 14.6694 47.876L19.983 40.6333H14.3303ZM15.3478 37.3479C14.8956 37.3479 14.5187 37.7213 14.5187 38.1693C14.5187 38.6173 14.8956 38.9906 15.3478 38.9906C15.8 38.9906 16.1768 38.6173 16.1768 38.1693C16.1768 37.7213 15.8 37.3479 15.3478 37.3479ZM51.1486 29.06C51.1109 28.4626 51.0732 27.9026 50.9978 27.3053L43.0463 38.132H44.4783L51.1486 29.06ZM48.9628 20.436L35.9615 38.1693H37.3935L49.5281 21.6306C49.3397 21.2199 49.1513 20.8093 48.9628 20.436ZM45.6089 15.3586L28.8767 38.1693H30.3087L46.3626 16.2546C46.1365 15.9559 45.8727 15.6573 45.6089 15.3586Z", fill: "#005D92" }), h("path", { key: '82bd69a11719ab2b4d8699591414f61484fef5b0', d: "M9.2805 13.492C9.73272 13.9026 10.2226 13.7533 10.6372 13.3426C11.0517 12.8946 11.014 12.5213 10.7879 12.2973C10.5618 12.0733 10.3357 12.1106 10.1849 12.2226C9.92114 12.372 9.61966 12.596 9.09207 12.8946C8.48911 13.268 8.03689 13.156 7.73541 12.8573C7.13245 12.2973 7.39624 11.5133 7.88615 10.9533C8.48911 10.3186 9.2805 10.132 9.88346 10.692L9.39355 11.2146C8.97902 10.8786 8.60217 11.028 8.263 11.364C8.03689 11.588 7.84846 11.9986 8.11226 12.26C8.30069 12.4466 8.56448 12.4093 8.82828 12.26C8.86596 12.2226 9.65735 11.7373 9.88346 11.6253C10.3734 11.3266 10.8633 11.476 11.1647 11.7373C11.8054 12.3346 11.5416 13.1933 10.9763 13.7906C10.3357 14.4626 9.50661 14.724 8.75291 14.052L9.2805 13.492Z", fill: "black" }), h("path", { key: '997523d4701391285e1edf2af719370d07f80f2c', d: "M9.69531 9.23587L10.2983 8.78787L13.087 10.6172L11.9564 7.4812L12.5217 7.0332L13.916 11.0279L13.2754 11.5132L9.69531 9.23587Z", fill: "black" }), h("path", { key: '02d4812eef9a1e8b1f82d61d8194d0bcb68d2d3e', d: "M14.1426 6.06254L14.8209 5.68921L18.2126 8.37721L17.5342 8.75054L16.6675 8.04121L15.2354 8.86254L15.4239 9.98254L14.7832 10.3559L14.1426 6.06254ZM15.1224 8.26521L16.2153 7.63054L14.8209 6.47321L15.1224 8.26521Z", fill: "black" }), h("path", { key: '5df2cc9682aa51c0676d1b4b9b0965b89874a998', d: "M17.2695 4.42005L17.9855 4.15872L20.7742 6.28672L19.7567 3.52405L20.3974 3.30005L21.7917 7.03338L21.0757 7.29472L18.3247 5.16672L19.3422 7.92938L18.7016 8.15338L17.2695 4.42005Z", fill: "black" }), h("path", { key: '5aa2959867c92e9e92a64c7cd949f7a55a472a6e', d: "M21.9805 2.88937L24.8822 2.3667L24.9953 2.96403L22.8095 3.3747L22.998 4.42003L25.033 4.0467L25.146 4.6067L23.111 4.98003L23.3371 6.13737L25.5605 5.7267L25.6736 6.32403L22.7342 6.80937L21.9805 2.88937Z", fill: "black" }), h("path", { key: 'bcc5a5ab91bc50687a38d0d1522b73d6a73cf144', d: "M26.3145 2.21726H27.0682L28.9901 5.12927L28.9524 2.17993H29.6307L29.7061 6.1746H28.9524L27.0305 3.2626L27.0682 6.21193H26.3898L26.3145 2.21726Z", fill: "black" }), h("path", { key: 'ccf4442edd4a89c25bee672809c2e72e5666360a', d: "M31.4016 2.25464L32.3814 2.44131L32.9467 5.72664L34.6048 2.85197L35.5846 3.03864L34.8686 6.95864L34.1903 6.84664L34.7555 3.82264L33.0974 6.65997L32.4944 6.47331L31.9292 3.26264L31.3639 6.28664L30.6855 6.17464L31.4016 2.25464Z", fill: "black" }), h("path", { key: 'a6dee23d807a157486117dc228421746cf049bc5', d: "M38.3359 3.93468L39.0519 4.19601V8.48934L38.3359 8.22801L38.3736 7.10801L36.8285 6.51068L36.0748 7.36934L35.3965 7.10801L38.3359 3.93468ZM37.2054 6.06268L38.3736 6.51068L38.4113 4.68134L37.2054 6.06268ZM38.0721 3.33734L38.2982 2.77734L38.9012 3.00134L38.6751 3.56134L38.0721 3.33734ZM39.8433 3.37468L39.6172 3.93468L39.0142 3.71068L39.2404 3.15068L39.8433 3.37468Z", fill: "black" }), h("path", { key: '11357ccf9327c4df5bbb8b5c90c59cd6b3f10ac8', d: "M41.576 5.31592L43.2718 6.32392C44.0255 6.77192 44.214 7.36925 43.8748 7.92925C43.4603 8.60125 42.895 8.48925 42.7819 8.45192C42.9704 8.60125 43.1965 8.93725 42.8573 9.49725C42.6312 9.90792 42.4428 10.2813 42.5181 10.5053L41.8398 10.1319C41.8398 9.94525 41.9529 9.75858 42.0659 9.57192C42.4428 8.93725 42.4805 8.60125 41.9152 8.26525L41.0107 7.74258L40.144 9.16125L39.541 8.78792L41.576 5.31592ZM41.2368 7.21992L42.2543 7.81725C42.6312 8.04125 42.9704 8.00392 43.1965 7.63058C43.4603 7.18258 43.2342 6.92125 42.895 6.73458L41.8775 6.13725L41.2368 7.21992Z", fill: "black" }), h("path", { key: 'e885556ebb59d8e4f1f4d9222061d3bc437fd323', d: "M45.7214 7.96655L46.249 8.41455L45.043 9.79589L47.6056 9.57189L48.2463 10.1319L45.9852 10.2812L45.7214 13.1932L45.043 12.6332L45.3068 10.3186L44.5154 10.3559L43.6487 11.3639L43.1211 10.9159L45.7214 7.96655Z", fill: "black" }), h("path", { key: '4817d8f3d1d6449dd384aae61b57c0144f4c8a37', d: "M48.6246 10.5054L50.7727 12.932L50.3204 13.3427L49.4914 12.372L46.9288 14.612L46.4766 14.0894L49.0391 11.8494L48.2101 10.916L48.6246 10.5054Z", fill: "black" }), h("path", { key: '261dc46adec04d9e1235f32baf07c3c2ef11ebbc', d: "M28.5003 52.5053C41.0088 52.5053 51.149 42.4597 51.149 30.0679C51.149 17.6762 41.0088 7.63062 28.5003 7.63062C15.9917 7.63062 5.85156 17.6762 5.85156 30.0679C5.85156 42.4597 15.9917 52.5053 28.5003 52.5053Z", fill: "white" }), h("path", { key: '27756a5649187e0265165513856561c9b46f0f42', d: "M28.5 56.5C43.964 56.5 56.5 43.964 56.5 28.5C56.5 13.036 43.964 0.5 28.5 0.5C13.036 0.5 0.5 13.036 0.5 28.5C0.5 43.964 13.036 56.5 28.5 56.5Z", fill: "white" }), h("path", { key: '4b65ecc46651b08cd18e040fddac650c70544726', d: "M22.3195 8.48928L5.88882 30.9266C5.88882 30.6653 5.88882 30.3666 5.88882 30.0679C5.85114 19.8013 12.8229 11.1399 22.3195 8.48928ZM41.3128 11.5506C40.0315 10.6919 38.6748 9.94528 37.2428 9.34795L16.9682 37.0493C17.9104 37.5346 18.4379 38.356 20.0207 38.356C20.9252 38.356 22.0934 37.7586 23.2239 36.228L41.3128 11.5506ZM7.99919 39.6253C9.54427 39.6253 11.5793 39.0653 12.6721 38.1693C13.6896 37.348 14.2549 36.6386 15.3101 36.6386C15.4608 36.6386 15.6493 36.6386 15.8 36.676L36.1122 8.93728C34.5672 8.37728 32.9467 8.00395 31.2885 7.81728L7.99919 39.6253ZM8.52678 40.6333C9.12974 41.7533 9.84575 42.836 10.5995 43.8066L12.9359 40.6333H8.52678ZM35.5846 40.6333L26.9171 52.4679C27.4447 52.5053 27.9723 52.5053 28.4999 52.5053C29.9696 52.5053 31.4393 52.3559 32.8336 52.0946L41.2374 40.596L35.5846 40.6333ZM29.9696 7.66795C29.4797 7.63062 28.9898 7.63062 28.4999 7.63062C26.9548 7.63062 25.4474 7.77995 24.0153 8.07861L6.00188 32.644C6.22799 34.66 6.71789 36.5639 7.4716 38.3933L29.9696 7.66795ZM42.6694 40.6333L34.5295 51.7213C40.5591 50.0786 45.6089 46.0093 48.4729 40.6333H42.6694ZM28.4999 40.6333L20.7744 51.1986C22.3195 51.7586 23.94 52.132 25.5981 52.3559L34.1903 40.6333H28.4999ZM21.4151 40.6333L15.6116 48.548C16.8929 49.4066 18.2118 50.1533 19.6439 50.7506L27.0678 40.6333H21.4151ZM14.3303 40.6333L11.3155 44.74C12.333 45.8973 13.4635 46.9426 14.6694 47.876L19.983 40.6333H14.3303ZM15.3478 37.3479C14.8956 37.3479 14.5187 37.7213 14.5187 38.1693C14.5187 38.6173 14.8956 38.9906 15.3478 38.9906C15.8 38.9906 16.1768 38.6173 16.1768 38.1693C16.1768 37.7213 15.8 37.3479 15.3478 37.3479ZM51.1486 29.0599C51.1109 28.4626 51.0732 27.9026 50.9978 27.3053L43.0463 38.132H44.4783L51.1486 29.0599ZM48.9628 20.436L35.9615 38.1693H37.3935L49.5281 21.6306C49.3397 21.2199 49.1513 20.8093 48.9628 20.436ZM45.6089 15.3586L28.8767 38.1693H30.3087L46.3626 16.2546C46.1365 15.9559 45.8727 15.6573 45.6089 15.3586Z", fill: "#00A65D" }), h("path", { key: '83aa00bdbff9fd26d96679c99decdafd11daf0ad', d: "M9.2805 13.492C9.73272 13.9026 10.2226 13.7533 10.6372 13.3426C11.0517 12.8946 11.014 12.5213 10.7879 12.2973C10.5618 12.0733 10.3357 12.1106 10.1849 12.2226C9.92114 12.372 9.61966 12.596 9.09207 12.8946C8.48911 13.268 8.03689 13.156 7.73541 12.8573C7.13245 12.2973 7.39624 11.5133 7.88615 10.9533C8.48911 10.3186 9.2805 10.132 9.88346 10.692L9.39355 11.2146C8.97902 10.8786 8.60217 11.028 8.263 11.364C8.03689 11.588 7.84846 11.9986 8.11226 12.26C8.30069 12.4466 8.56448 12.4093 8.82828 12.26C8.86596 12.2226 9.65735 11.7373 9.88346 11.6253C10.3734 11.3266 10.8633 11.476 11.1647 11.7373C11.8054 12.3346 11.5416 13.1933 10.9763 13.7906C10.3357 14.4626 9.50661 14.724 8.75291 14.052L9.2805 13.492Z", fill: "black" }), h("path", { key: '567cf369234fa436a5a573d1f37894b9aacb1ca2', d: "M9.69531 9.23587L10.2983 8.78787L13.087 10.6172L11.9564 7.4812L12.5217 7.0332L13.916 11.0279L13.2754 11.5132L9.69531 9.23587Z", fill: "black" }), h("path", { key: 'e937cb50357cc8204ae24678a87c776431b15eab', d: "M14.1426 6.06254L14.8209 5.68921L18.2126 8.37721L17.5342 8.75054L16.6675 8.04121L15.2354 8.86254L15.4239 9.98254L14.7832 10.3559L14.1426 6.06254ZM15.1224 8.26521L16.2153 7.63054L14.8209 6.47321L15.1224 8.26521Z", fill: "black" }), h("path", { key: '31c281e384bca5b969831c0d0bb93a5f03eb8d59', d: "M17.2695 4.42005L17.9855 4.15872L20.7742 6.28672L19.7567 3.52405L20.3974 3.30005L21.7917 7.03338L21.0757 7.29472L18.3247 5.16672L19.3422 7.92938L18.7016 8.15338L17.2695 4.42005Z", fill: "black" }), h("path", { key: '76daf8372b554124fbff4f4161ab63def69367fe', d: "M21.9805 2.88937L24.8822 2.3667L24.9953 2.96403L22.8095 3.3747L22.998 4.42003L25.033 4.0467L25.146 4.6067L23.111 4.98003L23.3371 6.13737L25.5605 5.7267L25.6736 6.32403L22.7342 6.80937L21.9805 2.88937Z", fill: "black" }), h("path", { key: '7fb648e4b98652ff36aae4c8bd37cdd551dc1e86', d: "M26.3145 2.21726H27.0682L28.9901 5.12927L28.9524 2.17993H29.6307L29.7061 6.1746H28.9524L27.0305 3.2626L27.0682 6.21193H26.3898L26.3145 2.21726Z", fill: "black" }), h("path", { key: 'd90788bea0df5a489daec21e52b81826a3c4403d', d: "M31.4016 2.25464L32.3814 2.44131L32.9467 5.72664L34.6048 2.85197L35.5846 3.03864L34.8686 6.95864L34.1903 6.84664L34.7555 3.82264L33.0974 6.65997L32.4944 6.47331L31.9292 3.26264L31.3639 6.28664L30.6855 6.17464L31.4016 2.25464Z", fill: "black" }), h("path", { key: 'b5e76d74040753dbb27b1bd49b891479a72f3e0d', d: "M38.3359 3.93468L39.0519 4.19601V8.48934L38.3359 8.22801L38.3736 7.10801L36.8285 6.51068L36.0748 7.36934L35.3965 7.10801L38.3359 3.93468ZM37.2054 6.06268L38.3736 6.51068L38.4113 4.68134L37.2054 6.06268ZM38.0721 3.33734L38.2982 2.77734L38.9012 3.00134L38.6751 3.56134L38.0721 3.33734ZM39.8433 3.37468L39.6172 3.93468L39.0142 3.71068L39.2404 3.15068L39.8433 3.37468Z", fill: "black" }), h("path", { key: '7a68c8fb22fe68819bc0b5a9f59912f665c21c7f', d: "M41.576 5.31592L43.2718 6.32392C44.0255 6.77192 44.214 7.36925 43.8748 7.92925C43.4603 8.60125 42.895 8.48925 42.7819 8.45192C42.9704 8.60125 43.1965 8.93725 42.8573 9.49725C42.6312 9.90792 42.4428 10.2813 42.5181 10.5053L41.8398 10.1319C41.8398 9.94525 41.9529 9.75858 42.0659 9.57192C42.4428 8.93725 42.4805 8.60125 41.9152 8.26525L41.0107 7.74258L40.144 9.16125L39.541 8.78792L41.576 5.31592ZM41.2368 7.21992L42.2543 7.81725C42.6312 8.04125 42.9704 8.00392 43.1965 7.63058C43.4603 7.18258 43.2342 6.92125 42.895 6.73458L41.8775 6.13725L41.2368 7.21992Z", fill: "black" }), h("path", { key: '146ca6b6977bc4412a507266d6572f0a17b4ed95', d: "M45.7214 7.96655L46.249 8.41455L45.043 9.79589L47.6056 9.57189L48.2463 10.1319L45.9852 10.2812L45.7214 13.1932L45.043 12.6332L45.3068 10.3186L44.5154 10.3559L43.6487 11.3639L43.1211 10.9159L45.7214 7.96655Z", fill: "black" }), h("path", { key: '3f3d4e4ed58a83718f92bb2512d2cdc5dcaa0948', d: "M48.6246 10.5054L50.7727 12.932L50.3204 13.3427L49.4914 12.372L46.9288 14.612L46.4766 14.0894L49.0391 11.8494L48.2101 10.916L48.6246 10.5054Z", fill: "black" })), h("defs", { key: 'e0bf711a1474ab0780fca19866598dccaaba2ce1' }, h("clipPath", { key: '956404507d40516bbde1944cf62eb9a84b7279b1', id: "clip0_17509_174280" }, h("rect", { key: 'ddd7216fe391518340e79545b51f9d386cc4bf5d', width: "56", height: "56", fill: "white", transform: "translate(0.5 0.5)" }))))), h("div", { key: '6f8618fa3c0db1dedd6d9c796f05357e1019378e', class: "pn-swan-icon__preamble" }, this.i18n.preamble, " ", h("span", { key: '8194ea8dab2fb6c274c639e495a2e24bcbb957f2' }, this.licenseNumber))), h("div", { key: '7f890202ad62c272bfeb411108f57175fd3b42dd', class: "pn-swan-text" }, this.i18n.text)))));
     }
     static get watchers() { return {
         "language": ["onLanguageChange"]