@postnord/pn-marketweb-components 3.5.2 → 4.0.0

package/cjs/pn-stats-info.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"pn-stats-info.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,q6gBAAq6gB,CAAC;AAC77gB,0BAAe,cAAc;;ACG7B,MAAM,eAAe,GACnB,msBAAmsB,CAAC;MAMzrB,WAAW;;;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,QACEA,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAC,0BAA0B,IACnCA,kEAAK,KAAK,EAAC,+BAA+B,EAAC,KAAK,EAAE,EAAE,eAAe,EAAE,OAAO,IAAI,CAAC,aAAa,GAAG,EAAE,GAAQ,EAE3GA,kEAAK,KAAK,EAAC,+BAA+B,IACxCA,mEAAM,IAAI,EAAC,cAAc,GAAG,CACxB,EAENA,kEAAK,KAAK,EAAC,mCAAmC,EAAC,KAAK,EAAE,EAAE,eAAe,EAAE,OAAO,IAAI,CAAC,aAAa,GAAG,EAAE,IACpG,IAAI,CAAC,OAAO,IAAIA,iEAAI,KAAK,EAAC,4CAA4C,IAAE,IAAI,CAAC,OAAO,CAAM,EAC3FA,kEAAK,KAAK,EAAC,yCAAyC,IACjD,IAAI,CAAC,aAAa;YACjB,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,KAAK,EAAEE,OAAK;gBAClC,QACEF,gCACE,KAAK,EAAEE,OAAK,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":["h","Host","index"],"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.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,8uhBAA8uhB,CAAC;AACtwhB,0BAAe,cAAc;;ACG7B,MAAM,eAAe,GACnB,msBAAmsB,CAAC;MAMzrB,WAAW;;;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,QACEA,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAC,0BAA0B,IACnCA,kEAAK,KAAK,EAAC,+BAA+B,EAAC,KAAK,EAAE,EAAE,eAAe,EAAE,OAAO,IAAI,CAAC,aAAa,GAAG,EAAE,GAAQ,EAE3GA,kEAAK,KAAK,EAAC,+BAA+B,IACxCA,mEAAM,IAAI,EAAC,cAAc,GAAG,CACxB,EAENA,kEAAK,KAAK,EAAC,mCAAmC,EAAC,KAAK,EAAE,EAAE,eAAe,EAAE,OAAO,IAAI,CAAC,aAAa,GAAG,EAAE,IACpG,IAAI,CAAC,OAAO,IAAIA,iEAAI,KAAK,EAAC,4CAA4C,IAAE,IAAI,CAAC,OAAO,CAAM,EAC3FA,kEAAK,KAAK,EAAC,yCAAyC,IACjD,IAAI,CAAC,aAAa;YACjB,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,KAAK,EAAEE,OAAK;gBAClC,QACEF,gCACE,KAAK,EAAEE,OAAK,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":["h","Host","index"],"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/cjs/pn-teaser-card.cjs.entry.js

@@ -2,9 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-34e1c673.js');
+const index = require('./index-b02670c2.js');
+const HeadingTag = require('./HeadingTag-19376e1f.js');
 
-const pnTeaserCardCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.block.teasercardblock a[data-block-clickable-link=true]{z-index:1}pn-teaser-card{width:100%;height:100%;display:flex}pn-teaser-card .pn-teaser-card__container{display:flex;flex-direction:column;justify-content:flex-start;border-radius:2.4rem;width:100%}pn-teaser-card .pn-teaser-card__container__image__container{width:100%;position:relative}pn-teaser-card .pn-teaser-card__container__image__container>[slot=illustration]{clip-path:ellipse(100% 90% at 50% 0%);height:100%;overflow:hidden;border-top-left-radius:2.4rem;border-top-right-radius:2.4rem}pn-teaser-card .pn-teaser-card__container__image__container>[slot=illustration]>picture>img{width:100%;height:auto;transition:0.4s ease-in-out;transform:scale(1);aspect-ratio:16/9;object-fit:cover;object-position:50% 0}pn-teaser-card .pn-teaser-card__container__content{display:flex;flex-direction:column;justify-content:space-between;flex:1 1 100%;gap:3.2rem;padding:2.4rem 2.4rem;padding-top:0}pn-teaser-card .pn-teaser-card__container__content__text__container__heading{font-weight:700;font-size:2.4rem;line-height:2.64rem;margin-bottom:0}pn-teaser-card .pn-teaser-card__container__content__text__container__preamble{padding-top:1.6rem;font-weight:400;font-size:1.6rem;line-height:2.24rem;margin-bottom:0}pn-teaser-card .pn-teaser-card__container__content__text__container__label{display:block;margin-bottom:1.6rem;font-weight:400;font-size:1.2rem;line-height:140%}pn-teaser-card .pn-teaser-card__container__content__cta>pn-button{align-self:flex-end;width:100%}pn-teaser-card .pn-teaser-card__container__content__cta>pn-button a:hover{text-decoration:none}pn-teaser-card .pn-teaser-card__container__content__cta>pn-button>button>.pn-button-bg,pn-teaser-card .pn-teaser-card__container__content__cta>pn-button>a>.pn-button-bg{transition:0.4s ease-in-out}@media screen and (min-width: 768px){pn-teaser-card .pn-teaser-card__container__content__cta>pn-button{width:fit-content}}pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:500;font-size:1.6rem;text-decoration:none;color:#005d92}pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated pn-icon svg{transition:0.3s ease-in-out;position:relative;left:-0.3rem}pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated pn-icon svg path{fill:#005d92}pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated[target=_blank]:not(.pn-button):after{display:none}pn-teaser-card[data-card-color=coral]>.pn-teaser-card__container{background-color:#fdefee}pn-teaser-card[data-card-color=green]>.pn-teaser-card__container{background-color:#dcf6e7}pn-teaser-card[data-card-color=blue]>.pn-teaser-card__container{background-color:#effbff}pn-teaser-card[data-card-color=blue50]>.pn-teaser-card__container{background-color:#e0f8ff}pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container{background-color:#00a0d6}pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__label,pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__heading,pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__preamble,pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container .pn-teaser-card__container__content__cta .secondary-link--animated{color:#ffffff}pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container .secondary-link--animated>pn-icon>svg>path{fill:#ffffff}pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container{background-color:#0d234b}pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__heading{color:#f06365}pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__label,pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__preamble,pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container .pn-teaser-card__container__content__cta .secondary-link--animated{color:#ffffff}pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container .secondary-link--animated>pn-icon>svg>path{fill:#ffffff}pn-teaser-card[data-card-color=white]>.pn-teaser-card__container{background-color:#ffffff}.teasercardlistblock .teasercardblock.has-bg{background-color:transparent;background:transparent}@media screen and (min-width: 1200px){.onequarterwidth:not(.familywrapperblock) .pn-teaser-card__container__content__text__container__label{margin-bottom:0.8rem}}.onethirdwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__image__container--no-image,.onequarterwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__image__container--no-image{padding-top:2.4rem}.onethirdwidth:not(.familywrapperblock) .pn-teaser-card__container__content__cta .secondary-link--animated,.onequarterwidth:not(.familywrapperblock) .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:400}.halfwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:400}.halfwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__image__container--no-image{padding-top:2.4rem}@media screen and (min-width: 992px){.halfwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:500}}@media screen and (min-width: 1200px){.halfwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__image__container--no-image{padding-top:4rem}.halfwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content{padding:0 4rem 4rem}.halfwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content__text__container__heading{font-weight:700;font-size:3.2rem;line-height:3.52rem}.halfwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content__text__container__preamble{font-weight:400;font-size:2rem;line-height:2.8rem}}@media screen and (min-width: 1640px){.halfwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__image__container--no-image{padding-top:5.6rem}.halfwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content{padding:0 5.6rem 5.6rem}}.fullwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:400}.fullwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__image__container--no-image{width:auto;padding-top:2.4rem}@media screen and (min-width: 768px){.fullwidth:not(.familywrapperblock) pn-teaser-card{min-height:35rem}.fullwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:500}.fullwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container{flex-direction:row}.fullwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content{align-self:center;gap:2.4rem;padding:3.2rem 3.2rem 3.2rem 2.4rem}.fullwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__image__container>[slot=illustration]{border-top-left-radius:2.4rem;border-bottom-left-radius:2.4rem;clip-path:ellipse(100% 100% at 0% 50%)}.fullwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__image__container>[slot=illustration]>picture>img{height:100%;object-fit:cover}}@media screen and (min-width: 1200px){.fullwidth:not(.familywrapperblock) pn-teaser-card{min-height:52rem}.fullwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content{padding:4rem 4rem 4rem 3.2rem}.fullwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content__text__container__heading{font-weight:700;font-size:4.8rem;line-height:5.28rem}.fullwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content__text__container__preamble{font-size:2rem;line-height:2.8rem}}@media screen and (min-width: 768px){.fullwidth:not(.familywrapperblock) pn-teaser-card[data-card-alignment=right] .pn-teaser-card__container{flex-direction:row-reverse}.fullwidth:not(.familywrapperblock) pn-teaser-card[data-card-alignment=right] .pn-teaser-card__container__content{padding:3.2rem 2.4rem 3.2rem 3.2rem}.fullwidth:not(.familywrapperblock) pn-teaser-card[data-card-alignment=right] .pn-teaser-card__container__image__container>[slot=illustration]{border-bottom-right-radius:2.4rem;clip-path:ellipse(100% 100% at 100% 50%)}}@media screen and (min-width: 1200px){.fullwidth:not(.familywrapperblock) pn-teaser-card[data-card-alignment=right] .pn-teaser-card__container__content{padding:4rem 3.2rem 4rem 4rem}}pn-teaser-card.teaser-card--hover-effect:hover{cursor:pointer}pn-teaser-card.teaser-card--hover-effect:hover .pn-teaser-card__container__image__container [slot=illustration] picture>img{transform:scale(1.02);filter:brightness(0.85)}pn-teaser-card.teaser-card--hover-effect:hover .secondary-link--animated{text-decoration:underline}pn-teaser-card.teaser-card--hover-effect:hover .secondary-link--animated pn-icon svg{left:0}pn-teaser-card.teaser-card--hover-effect:hover pn-button button .pn-button-bg,pn-teaser-card.teaser-card--hover-effect:hover pn-button a .pn-button-bg{background-color:#0d234b}pn-teaser-card.teaser-card--hover-effect:hover[data-card-color=blue900] pn-button button .pn-button-bg,pn-teaser-card.teaser-card--hover-effect:hover[data-card-color=blue900] pn-button a .pn-button-bg{background-color:#00a0d6}";
+const pnTeaserCardCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}.block.teasercardblock a[data-block-clickable-link=true]{z-index:1}pn-teaser-card{width:100%;height:100%;display:flex}pn-teaser-card .pn-teaser-card__container{display:flex;flex-direction:column;justify-content:flex-start;border-radius:2.4rem;width:100%}pn-teaser-card .pn-teaser-card__container__image__container{width:100%;position:relative}pn-teaser-card .pn-teaser-card__container__image__container>[slot=illustration]{clip-path:ellipse(100% 90% at 50% 0%);height:100%;overflow:hidden;border-top-left-radius:2.4rem;border-top-right-radius:2.4rem}pn-teaser-card .pn-teaser-card__container__image__container>[slot=illustration]>picture>img{width:100%;height:auto;transition:0.4s ease-in-out;transform:scale(1);aspect-ratio:16/9;object-fit:cover;object-position:50% 0}pn-teaser-card .pn-teaser-card__container__content{display:flex;flex-direction:column;justify-content:space-between;flex:1 1 100%;gap:3.2rem;padding:2.4rem 2.4rem;padding-top:0}pn-teaser-card .pn-teaser-card__container__content__text__container__heading{font-weight:700;font-size:2.4rem;line-height:2.64rem;margin-bottom:0}pn-teaser-card .pn-teaser-card__container__content__text__container__preamble{padding-top:1.6rem;font-weight:400;font-size:1.6rem;line-height:2.24rem;margin-bottom:0}pn-teaser-card .pn-teaser-card__container__content__text__container__label{display:block;margin-bottom:1.6rem;font-weight:400;font-size:1.2rem;line-height:140%}pn-teaser-card .pn-teaser-card__container__content__cta>pn-button{align-self:flex-end;width:100%}pn-teaser-card .pn-teaser-card__container__content__cta>pn-button a:hover{text-decoration:none}pn-teaser-card .pn-teaser-card__container__content__cta>pn-button>button>.pn-button-bg,pn-teaser-card .pn-teaser-card__container__content__cta>pn-button>a>.pn-button-bg{transition:0.4s ease-in-out}@media screen and (min-width: 768px){pn-teaser-card .pn-teaser-card__container__content__cta>pn-button{width:fit-content}}pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:500;font-size:1.6rem;text-decoration:none;color:#005d92}pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated pn-icon svg{transition:0.3s ease-in-out;position:relative;left:-0.3rem}pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated pn-icon svg path{fill:#005d92}pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated[target=_blank]:not(.pn-button):after{display:none}pn-teaser-card[data-card-color=coral]>.pn-teaser-card__container{background-color:#fdefee}pn-teaser-card[data-card-color=green]>.pn-teaser-card__container{background-color:#dcf6e7}pn-teaser-card[data-card-color=blue]>.pn-teaser-card__container{background-color:#effbff}pn-teaser-card[data-card-color=blue50]>.pn-teaser-card__container{background-color:#e0f8ff}pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container{background-color:#00a0d6}pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__label,pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__heading,pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__preamble,pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container .pn-teaser-card__container__content__cta .secondary-link--animated{color:#ffffff}pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container .secondary-link--animated>pn-icon>svg>path{fill:#ffffff}pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container{background-color:#0d234b}pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__heading{color:#f06365}pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__label,pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__preamble,pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container .pn-teaser-card__container__content__cta .secondary-link--animated{color:#ffffff}pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container .secondary-link--animated>pn-icon>svg>path{fill:#ffffff}pn-teaser-card[data-card-color=white]>.pn-teaser-card__container{background-color:#ffffff}.teasercardlistblock .teasercardblock.has-bg{background-color:transparent;background:transparent}@media screen and (min-width: 1200px){.onequarterwidth:not(.familywrapperblock) .pn-teaser-card__container__content__text__container__label{margin-bottom:0.8rem}}.onethirdwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__image__container--no-image,.onequarterwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__image__container--no-image{padding-top:2.4rem}.onethirdwidth:not(.familywrapperblock) .pn-teaser-card__container__content__cta .secondary-link--animated,.onequarterwidth:not(.familywrapperblock) .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:400}.halfwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:400}.halfwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__image__container--no-image{padding-top:2.4rem}@media screen and (min-width: 992px){.halfwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:500}}@media screen and (min-width: 1200px){.halfwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__image__container--no-image{padding-top:4rem}.halfwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content{padding:0 4rem 4rem}.halfwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content__text__container__heading{font-weight:700;font-size:3.2rem;line-height:3.52rem}.halfwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content__text__container__preamble{font-weight:400;font-size:2rem;line-height:2.8rem}}@media screen and (min-width: 1640px){.halfwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__image__container--no-image{padding-top:5.6rem}.halfwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content{padding:0 5.6rem 5.6rem}}.fullwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:400}.fullwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__image__container--no-image{width:auto;padding-top:2.4rem}@media screen and (min-width: 768px){.fullwidth:not(.familywrapperblock) pn-teaser-card{min-height:35rem}.fullwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:500}.fullwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container{flex-direction:row}.fullwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content{align-self:center;gap:2.4rem;padding:3.2rem 3.2rem 3.2rem 2.4rem}.fullwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__image__container>[slot=illustration]{border-top-left-radius:2.4rem;border-bottom-left-radius:2.4rem;clip-path:ellipse(100% 100% at 0% 50%)}.fullwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__image__container>[slot=illustration]>picture>img{height:100%;object-fit:cover}}@media screen and (min-width: 1200px){.fullwidth:not(.familywrapperblock) pn-teaser-card{min-height:52rem}.fullwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content{padding:4rem 4rem 4rem 3.2rem}.fullwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content__text__container__heading{font-weight:700;font-size:4.8rem;line-height:5.28rem}.fullwidth:not(.familywrapperblock) pn-teaser-card .pn-teaser-card__container__content__text__container__preamble{font-size:2rem;line-height:2.8rem}}@media screen and (min-width: 768px){.fullwidth:not(.familywrapperblock) pn-teaser-card[data-card-alignment=right] .pn-teaser-card__container{flex-direction:row-reverse}.fullwidth:not(.familywrapperblock) pn-teaser-card[data-card-alignment=right] .pn-teaser-card__container__content{padding:3.2rem 2.4rem 3.2rem 3.2rem}.fullwidth:not(.familywrapperblock) pn-teaser-card[data-card-alignment=right] .pn-teaser-card__container__image__container>[slot=illustration]{border-bottom-right-radius:2.4rem;clip-path:ellipse(100% 100% at 100% 50%)}}@media screen and (min-width: 1200px){.fullwidth:not(.familywrapperblock) pn-teaser-card[data-card-alignment=right] .pn-teaser-card__container__content{padding:4rem 3.2rem 4rem 4rem}}pn-teaser-card.teaser-card--hover-effect:hover{cursor:pointer}pn-teaser-card.teaser-card--hover-effect:hover .pn-teaser-card__container__image__container [slot=illustration] picture>img{transform:scale(1.02);filter:brightness(0.85)}pn-teaser-card.teaser-card--hover-effect:hover .secondary-link--animated{text-decoration:underline}pn-teaser-card.teaser-card--hover-effect:hover .secondary-link--animated pn-icon svg{left:0}pn-teaser-card.teaser-card--hover-effect:hover pn-button button .pn-button-bg,pn-teaser-card.teaser-card--hover-effect:hover pn-button a .pn-button-bg{background-color:#0d234b}pn-teaser-card.teaser-card--hover-effect:hover[data-card-color=blue900] pn-button button .pn-button-bg,pn-teaser-card.teaser-card--hover-effect:hover[data-card-color=blue900] pn-button a .pn-button-bg{background-color:#00a0d6}";
 const PnTeaserCardStyle0 = pnTeaserCardCss;
 
 const PnTeaserCard = class {
@@ -13,7 +14,7 @@ const PnTeaserCard = class {
         this.text = null;
         this.heading = null;
         this.label = null;
-        this.headingLevel = undefined;
+        this.headingLevel = 'h3';
         this.dataCardColor = 'coral';
         this.dataCardAlignment = 'left';
         this.hasCtaSlotContent = false;
@@ -23,15 +24,10 @@ const PnTeaserCard = class {
     componentWillLoad() {
         this.hasCtaSlotContent = !!this.hostElement.querySelector('[slot="cta"]');
         this.hasIllustrationSlot = !!this.hostElement.querySelector('[slot="illustration"]');
-        if (!this.headingLevel || isNaN(this.headingLevel)) {
-            this.headingLevel = 3;
-        }
     }
-    //render
     render() {
         const labelToCapitals = this.label?.toUpperCase();
-        const HeadingTag = `h${this.headingLevel ?? 3}`;
-        return (index.h(index.Host, { key: '25cfc8729df548f28a7577a2d0fdc3065d30e5e5' }, index.h("slot", { key: '834e0525865f88c787934c10e01ec6383cb91ce5', name: "clickable-block-wrapper" }), index.h("div", { key: 'ba3820116797f86be9db43183a64db20a91887df', class: "pn-teaser-card__container" }, index.h("div", { key: 'cdd17367c264860077cdf2aff76fe381b1be1e5e', class: `pn-teaser-card__container__image__container ${!this.hasIllustrationSlot ? 'pn-teaser-card__container__image__container--no-image' : ''}` }, index.h("slot", { key: '38a98a3440f3b29a1028abcaa31803d0de4dd917', name: "illustration" })), index.h("div", { key: '528a7a7425b031486521270ac184de4c1a34a9a0', class: "pn-teaser-card__container__content" }, index.h("div", { key: '7e848e8fe005a8aa9867861abc355b610150d44b', class: "pn-teaser-card__container__content__text__container" }, labelToCapitals && index.h("span", { key: 'c741d9222acf8cb73f8c0060c799911d21fe26d8', class: "pn-teaser-card__container__content__text__container__label" }, labelToCapitals), this.heading && index.h(HeadingTag, { key: 'c74daeb97ac60690c146832417ac394825fadef0', class: "pn-teaser-card__container__content__text__container__heading" }, this.heading), index.h("p", { key: '0da77ddcf36cadaad9df5bfbefcb2609bc7161c8', class: "pn-teaser-card__container__content__text__container__preamble" }, this.text)), this.hasCtaSlotContent && (index.h("div", { key: '1af0c6c39adfa993abacc832c1bc8326e4f3996b', class: "pn-teaser-card__container__content__cta" }, index.h("slot", { key: '6bc3e69ed72ad8dc978d40f2ebb1b28bc6f2be51', name: "cta" })))))));
+        return (index.h(index.Host, { key: 'b5ee6a71383c676dff65be68bd2c583af8d4b73e' }, index.h("slot", { key: '26f672cccdf0b4a647608dec90d9da91d5326f2e', name: "clickable-block-wrapper" }), index.h("div", { key: '664a86e96d02078ad7d3b9feec848620b08a64e7', class: "pn-teaser-card__container" }, index.h("div", { key: 'b2690687573bc1421b4087b25574aac4e1bf210e', class: `pn-teaser-card__container__image__container ${!this.hasIllustrationSlot ? 'pn-teaser-card__container__image__container--no-image' : ''}` }, index.h("slot", { key: '92c205f97f90b35df8f34f6905ebb5f858ba3115', name: "illustration" })), index.h("div", { key: 'f9b96157ea921c801f993133b0b4e7d785224a3b', class: "pn-teaser-card__container__content" }, index.h("div", { key: '150b6993e403a65c3d75794554b39a2c4c073099', class: "pn-teaser-card__container__content__text__container" }, labelToCapitals && index.h("span", { key: '20973e8c988b6f3c5bed312ad6f5e339f22565f4', class: "pn-teaser-card__container__content__text__container__label" }, labelToCapitals), this.heading && index.h(HeadingTag.HeadingTag, { key: '64cdb89e6106839ef6bd7d6a6912c69bad4e1d85', level: this.headingLevel, cssClass: "pn-teaser-card__container__content__text__container__heading" }, this.heading), index.h("p", { key: '7366108ac28438903a71cb89e6a4d70d3e5ef96a', class: "pn-teaser-card__container__content__text__container__preamble" }, this.text)), this.hasCtaSlotContent && (index.h("div", { key: 'dcee0ddb4c36f90e321db3c8817b444794851b93', class: "pn-teaser-card__container__content__cta" }, index.h("slot", { key: '1aedb8f19e547e163676b76b502a155603c0b3ce', name: "cta" })))))));
     }
 };
 PnTeaserCard.style = PnTeaserCardStyle0;

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

@@ -1 +1 @@
-{"file":"pn-teaser-card.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,8iTAA8iT,CAAC;AACvkT,2BAAe,eAAe;;MCKjB,YAAY;;;oBAGA,IAAI;uBACD,IAAI;qBACL,IAAI;;6BAEoB,OAAO;iCACH,MAAM;iCAErB,KAAK;mCACH,IAAI;;;IAE5C,iBAAiB;QACf,IAAI,CAAC,iBAAiB,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;QAC1E,IAAI,CAAC,mBAAmB,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;QAErF,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,KAAK,CAAC,IAAI,CAAC,YAAmB,CAAC,EAAE;YACzD,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;SACvB;KACF;;IAGD,MAAM;QACJ,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,EAAE,WAAW,EAAE,CAAC;QAClD,MAAM,UAAU,GAAG,IAAI,IAAI,CAAC,YAAY,IAAI,CAAC,EAAE,CAAC;QAEhD,QACEA,QAACC,UAAI,uDACHD,mEAAM,IAAI,EAAC,yBAAyB,GAAG,EACvCA,kEAAK,KAAK,EAAC,2BAA2B,IACpCA,kEAAK,KAAK,EAAE,+CAA+C,CAAC,IAAI,CAAC,mBAAmB,GAAG,uDAAuD,GAAG,EAAE,EAAE,IACnJA,mEAAM,IAAI,EAAC,cAAc,GAAG,CACxB,EACNA,kEAAK,KAAK,EAAC,oCAAoC,IAC7CA,kEAAK,KAAK,EAAC,qDAAqD,IAC7D,eAAe,IAAIA,mEAAM,KAAK,EAAC,4DAA4D,IAAE,eAAe,CAAQ,EACpH,IAAI,CAAC,OAAO,IAAIA,QAAC,UAAU,qDAAC,KAAK,EAAC,8DAA8D,IAAE,IAAI,CAAC,OAAO,CAAc,EAC7HA,gEAAG,KAAK,EAAC,+DAA+D,IAAE,IAAI,CAAC,IAAI,CAAK,CACpF,EACL,IAAI,CAAC,iBAAiB,KACrBA,kEAAK,KAAK,EAAC,yCAAyC,IAClDA,mEAAM,IAAI,EAAC,KAAK,GAAG,CACf,CACP,CACG,CACF,CACD,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/cards/pn-teaser-card/pn-teaser-card.scss?tag=pn-teaser-card","src/components/cards/pn-teaser-card/pn-teaser-card.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\n//making pn wrapping link clickable over card image\n.block.teasercardblock {\n  a[data-block-clickable-link='true'] {\n    z-index: 1;\n  }\n}\n\n//mobile first\npn-teaser-card {\n  width: 100%;\n  height: 100%;\n  display: flex;\n\n  .pn-teaser-card__container {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    border-radius: 2.4rem;\n    width: 100%;\n  }\n\n  .pn-teaser-card__container__image__container {\n    width: 100%;\n    position: relative;\n\n    & > [slot='illustration'] {\n      clip-path: ellipse(100% 90% at 50% 0%);\n      height: 100%;\n      overflow: hidden;\n      border-top-left-radius: 2.4rem;\n      border-top-right-radius: 2.4rem;\n\n      & > picture > img {\n        width: 100%;\n        height: auto;\n        transition: 0.4s ease-in-out;\n        transform: scale(1);\n        aspect-ratio: 16/9;\n        object-fit: cover;\n        object-position: 50% 0;\n      }\n    }\n  }\n\n  .pn-teaser-card__container__content {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    flex: 1 1 100%;\n    gap: 3.2rem;\n    padding: 2.4rem 2.4rem;\n    padding-top: 0;\n  }\n\n  .pn-teaser-card__container__content__text__container__heading {\n    font-weight: 700;\n    font-size: 2.4rem;\n    line-height: 2.64rem;\n    margin-bottom: 0;\n  }\n\n  .pn-teaser-card__container__content__text__container__preamble {\n    padding-top: 1.6rem;\n    font-weight: 400;\n    font-size: 1.6rem;\n    line-height: 2.24rem;\n    margin-bottom: 0;\n  }\n\n  .pn-teaser-card__container__content__text__container__label {\n    display: block;\n    margin-bottom: 1.6rem;\n    font-weight: 400;\n    font-size: 1.2rem;\n    line-height: 140%;\n  }\n\n  .pn-teaser-card__container__content__cta {\n    & > pn-button {\n      align-self: flex-end;\n      width: 100%;\n\n      & a:hover {\n        text-decoration: none;\n      }\n\n      & > button,\n      & > a {\n        & > .pn-button-bg {\n          transition: 0.4s ease-in-out;\n        }\n      }\n\n      @media screen and (min-width: $min-width-md) {\n        width: fit-content;\n      }\n    }\n\n    .secondary-link--animated {\n      font-weight: 500;\n      font-size: 1.6rem;\n      text-decoration: none;\n      color: $blue700;\n\n      pn-icon svg {\n        transition: 0.3s ease-in-out;\n        position: relative;\n        left: -0.3rem;\n\n        path {\n          fill: $blue700;\n        }\n      }\n\n      &[target='_blank']:not(.pn-button):after {\n        display: none;\n      }\n    }\n  }\n}\n\n//colors\npn-teaser-card[data-card-color='coral'] {\n  & > .pn-teaser-card__container {\n    background-color: $coral50;\n  }\n}\n\npn-teaser-card[data-card-color='green'] {\n  & > .pn-teaser-card__container {\n    background-color: $green50;\n  }\n}\n\npn-teaser-card[data-card-color='blue'] {\n  & > .pn-teaser-card__container {\n    background-color: $blue25;\n  }\n}\n\npn-teaser-card[data-card-color='blue50'] {\n  & > .pn-teaser-card__container {\n    background-color: $blue50;\n  }\n}\n\npn-teaser-card[data-card-color='blue400'] {\n  & > .pn-teaser-card__container {\n    background-color: $blue400;\n\n    .pn-teaser-card__container__content__text__container__label,\n    .pn-teaser-card__container__content__text__container__heading,\n    .pn-teaser-card__container__content__text__container__preamble,\n    .pn-teaser-card__container__content__cta .secondary-link--animated {\n      color: $white;\n    }\n\n    .secondary-link--animated {\n      & > pn-icon > svg > path {\n        fill: $white;\n      }\n    }\n  }\n}\n\npn-teaser-card[data-card-color='blue900'] {\n  & > .pn-teaser-card__container {\n    background-color: $blue900;\n    .pn-teaser-card__container__content__text__container__heading {\n      color: $coral400;\n    }\n\n    .pn-teaser-card__container__content__text__container__label,\n    .pn-teaser-card__container__content__text__container__preamble,\n    .pn-teaser-card__container__content__cta .secondary-link--animated {\n      color: $white;\n    }\n\n    .secondary-link--animated {\n      & > pn-icon > svg > path {\n        fill: $white;\n      }\n    }\n  }\n}\n\npn-teaser-card[data-card-color='white'] {\n  & > .pn-teaser-card__container {\n    background-color: $white;\n  }\n}\n\n//color override when in a listblock\n.teasercardlistblock {\n  .teasercardblock.has-bg {\n    background-color: transparent;\n    background: transparent;\n  }\n}\n\n// variants\n\n.onequarterwidth:not(.familywrapperblock) {\n  .pn-teaser-card__container__content__text__container__label {\n    @media screen and (min-width: $min-width-xl) {\n      margin-bottom: 0.8rem;\n    }\n  }\n}\n\n.onethirdwidth:not(.familywrapperblock),\n.onequarterwidth:not(.familywrapperblock) {\n  & pn-teaser-card {\n    .pn-teaser-card__container__image__container--no-image {\n      padding-top: 2.4rem;\n    }\n  }\n\n  .pn-teaser-card__container__content__cta {\n    .secondary-link--animated {\n      font-weight: 400;\n    }\n  }\n}\n\n.halfwidth:not(.familywrapperblock) {\n  & pn-teaser-card {\n    .pn-teaser-card__container__content__cta {\n      .secondary-link--animated {\n        font-weight: 400;\n      }\n    }\n\n    .pn-teaser-card__container__image__container--no-image {\n      padding-top: 2.4rem;\n    }\n\n    @media screen and (min-width: $min-width-lg) {\n      .pn-teaser-card__container__content__cta {\n        .secondary-link--animated {\n          font-weight: 500;\n        }\n      }\n    }\n\n    @media screen and (min-width: $min-width-xl) {\n      .pn-teaser-card__container__image__container--no-image {\n        padding-top: 4rem;\n      }\n\n      .pn-teaser-card__container__content {\n        padding: 0 4rem 4rem;\n      }\n\n      .pn-teaser-card__container__content__text__container__heading {\n        font-weight: 700;\n        font-size: 3.2rem;\n        line-height: 3.52rem;\n      }\n\n      .pn-teaser-card__container__content__text__container__preamble {\n        font-weight: 400;\n        font-size: 2rem;\n        line-height: 2.8rem;\n      }\n    }\n\n    @media screen and (min-width: $min-width-xxl) {\n      .pn-teaser-card__container__image__container--no-image {\n        padding-top: 5.6rem;\n      }\n\n      .pn-teaser-card__container__content {\n        padding: 0 5.6rem 5.6rem;\n      }\n    }\n  }\n}\n\n.fullwidth:not(.familywrapperblock) {\n  & pn-teaser-card {\n    .pn-teaser-card__container__content__cta {\n      .secondary-link--animated {\n        font-weight: 400;\n      }\n    }\n\n    .pn-teaser-card__container__image__container--no-image {\n      width: auto;\n      padding-top: 2.4rem;\n    }\n\n    @media screen and (min-width: $min-width-md) {\n      min-height: 35rem;\n\n      .pn-teaser-card__container__content__cta {\n        .secondary-link--animated {\n          font-weight: 500;\n        }\n      }\n\n      .pn-teaser-card__container {\n        flex-direction: row;\n      }\n\n      .pn-teaser-card__container__content {\n        align-self: center;\n        gap: 2.4rem;\n        padding: 3.2rem 3.2rem 3.2rem 2.4rem;\n      }\n\n      .pn-teaser-card__container__image__container {\n        & > [slot='illustration'] {\n          border-top-left-radius: 2.4rem;\n          border-bottom-left-radius: 2.4rem;\n          clip-path: ellipse(100% 100% at 0% 50%);\n\n          & > picture > img {\n            height: 100%;\n            object-fit: cover;\n          }\n        }\n      }\n    }\n\n    @media screen and (min-width: $min-width-xl) {\n      min-height: 52rem;\n\n      .pn-teaser-card__container__content {\n        padding: 4rem 4rem 4rem 3.2rem;\n      }\n\n      .pn-teaser-card__container__content__text__container__heading {\n        font-weight: 700;\n        font-size: 4.8rem;\n        line-height: 5.28rem;\n      }\n\n      .pn-teaser-card__container__content__text__container__preamble {\n        font-size: 2rem;\n        line-height: 2.8rem;\n      }\n    }\n  }\n\n  pn-teaser-card[data-card-alignment='right'] {\n    @media screen and (min-width: $min-width-md) {\n      .pn-teaser-card__container {\n        flex-direction: row-reverse;\n      }\n\n      .pn-teaser-card__container__content {\n        padding: 3.2rem 2.4rem 3.2rem 3.2rem;\n      }\n\n      .pn-teaser-card__container__image__container {\n        & > [slot='illustration'] {\n          border-bottom-right-radius: 2.4rem;\n          clip-path: ellipse(100% 100% at 100% 50%);\n        }\n      }\n    }\n\n    @media screen and (min-width: $min-width-xl) {\n      .pn-teaser-card__container__content {\n        padding: 4rem 3.2rem 4rem 4rem;\n      }\n    }\n  }\n}\n\n//effect class\npn-teaser-card.teaser-card--hover-effect {\n  &:hover {\n    cursor: pointer;\n    .pn-teaser-card__container__image__container {\n      & [slot='illustration'] {\n        & picture > img {\n          transform: scale(1.02);\n          filter: brightness(0.85);\n        }\n      }\n    }\n\n    .secondary-link--animated {\n      text-decoration: underline;\n\n      pn-icon svg {\n        left: 0;\n      }\n    }\n\n    pn-button {\n      button,\n      a {\n        .pn-button-bg {\n          background-color: $blue900;\n        }\n      }\n    }\n\n    &[data-card-color='blue900'] {\n      pn-button {\n        button,\n        a {\n          .pn-button-bg {\n            background-color: $blue400;\n          }\n        }\n      }\n    }\n  }\n}\n","import { Component, Prop, h, Element, State, Host } from \"@stencil/core\";\n\n@Component({\n  tag: 'pn-teaser-card',\n  styleUrl: 'pn-teaser-card.scss'\n})\nexport class PnTeaserCard {\n  @Element() hostElement: HTMLElement;\n  //props\n  @Prop() text: string = null;\n  @Prop() heading: string = null;\n  @Prop() label?: string = null;\n  @Prop() headingLevel?: number;\n  @Prop({ reflect: true }) dataCardColor: string = 'coral';\n  @Prop({ reflect: true }) dataCardAlignment: string = 'left';\n\n  @State() hasCtaSlotContent: boolean = false;\n  @State() hasIllustrationSlot: boolean = true;\n\n  componentWillLoad() {\n    this.hasCtaSlotContent = !!this.hostElement.querySelector('[slot=\"cta\"]');\n    this.hasIllustrationSlot = !!this.hostElement.querySelector('[slot=\"illustration\"]');\n\n    if (!this.headingLevel || isNaN(this.headingLevel as any)) {\n      this.headingLevel = 3;\n    }\n  }\n\n  //render\n  render() {\n    const labelToCapitals = this.label?.toUpperCase();\n    const HeadingTag = `h${this.headingLevel ?? 3}`;\n\n    return (\n      <Host>\n        <slot name=\"clickable-block-wrapper\" />\n        <div class=\"pn-teaser-card__container\">\n          <div class={`pn-teaser-card__container__image__container ${!this.hasIllustrationSlot ? 'pn-teaser-card__container__image__container--no-image' : ''}`}>\n            <slot name=\"illustration\" />\n          </div>\n          <div class=\"pn-teaser-card__container__content\">\n            <div class=\"pn-teaser-card__container__content__text__container\">\n              {labelToCapitals && <span class=\"pn-teaser-card__container__content__text__container__label\">{labelToCapitals}</span>}\n              {this.heading && <HeadingTag class=\"pn-teaser-card__container__content__text__container__heading\">{this.heading}</HeadingTag>}\n              <p class=\"pn-teaser-card__container__content__text__container__preamble\">{this.text}</p>\n            </div>\n            {this.hasCtaSlotContent && (\n              <div class=\"pn-teaser-card__container__content__cta\">\n                <slot name=\"cta\" />\n              </div>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pn-teaser-card.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,eAAe,GAAG,u3TAAu3T,CAAC;AACh5T,2BAAe,eAAe;;MCMjB,YAAY;;;oBAGA,IAAI;uBACD,IAAI;qBACL,IAAI;4BACG,IAAI;6BACa,OAAO;iCACH,MAAM;iCAErB,KAAK;mCACH,IAAI;;;IAE5C,iBAAiB;QACf,IAAI,CAAC,iBAAiB,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;QAC1E,IAAI,CAAC,mBAAmB,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;KACtF;IAED,MAAM;QACJ,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,EAAE,WAAW,EAAE,CAAC;QAElD,QACEA,QAACC,UAAI,uDACHD,mEAAM,IAAI,EAAC,yBAAyB,GAAG,EACvCA,kEAAK,KAAK,EAAC,2BAA2B,IACpCA,kEAAK,KAAK,EAAE,+CAA+C,CAAC,IAAI,CAAC,mBAAmB,GAAG,uDAAuD,GAAG,EAAE,EAAE,IACnJA,mEAAM,IAAI,EAAC,cAAc,GAAG,CACxB,EACNA,kEAAK,KAAK,EAAC,oCAAoC,IAC7CA,kEAAK,KAAK,EAAC,qDAAqD,IAC7D,eAAe,IAAIA,mEAAM,KAAK,EAAC,4DAA4D,IAAE,eAAe,CAAQ,EACpH,IAAI,CAAC,OAAO,IAAIA,QAACE,qBAAU,qDAAC,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,QAAQ,EAAC,8DAA8D,IACzH,IAAI,CAAC,OAAO,CACF,EACfF,gEAAG,KAAK,EAAC,+DAA+D,IAAE,IAAI,CAAC,IAAI,CAAK,CACpF,EACL,IAAI,CAAC,iBAAiB,KACrBA,kEAAK,KAAK,EAAC,yCAAyC,IAClDA,mEAAM,IAAI,EAAC,KAAK,GAAG,CACf,CACP,CACG,CACF,CACD,EACP;KACH;;;;;;","names":["h","Host","HeadingTag"],"sources":["src/components/cards/pn-teaser-card/pn-teaser-card.scss?tag=pn-teaser-card","src/components/cards/pn-teaser-card/pn-teaser-card.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\n//making pn wrapping link clickable over card image\n.block.teasercardblock {\n  a[data-block-clickable-link='true'] {\n    z-index: 1;\n  }\n}\n\n//mobile first\npn-teaser-card {\n  width: 100%;\n  height: 100%;\n  display: flex;\n\n  .pn-teaser-card__container {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    border-radius: 2.4rem;\n    width: 100%;\n  }\n\n  .pn-teaser-card__container__image__container {\n    width: 100%;\n    position: relative;\n\n    & > [slot='illustration'] {\n      clip-path: ellipse(100% 90% at 50% 0%);\n      height: 100%;\n      overflow: hidden;\n      border-top-left-radius: 2.4rem;\n      border-top-right-radius: 2.4rem;\n\n      & > picture > img {\n        width: 100%;\n        height: auto;\n        transition: 0.4s ease-in-out;\n        transform: scale(1);\n        aspect-ratio: 16/9;\n        object-fit: cover;\n        object-position: 50% 0;\n      }\n    }\n  }\n\n  .pn-teaser-card__container__content {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    flex: 1 1 100%;\n    gap: 3.2rem;\n    padding: 2.4rem 2.4rem;\n    padding-top: 0;\n  }\n\n  .pn-teaser-card__container__content__text__container__heading {\n    font-weight: 700;\n    font-size: 2.4rem;\n    line-height: 2.64rem;\n    margin-bottom: 0;\n  }\n\n  .pn-teaser-card__container__content__text__container__preamble {\n    padding-top: 1.6rem;\n    font-weight: 400;\n    font-size: 1.6rem;\n    line-height: 2.24rem;\n    margin-bottom: 0;\n  }\n\n  .pn-teaser-card__container__content__text__container__label {\n    display: block;\n    margin-bottom: 1.6rem;\n    font-weight: 400;\n    font-size: 1.2rem;\n    line-height: 140%;\n  }\n\n  .pn-teaser-card__container__content__cta {\n    & > pn-button {\n      align-self: flex-end;\n      width: 100%;\n\n      & a:hover {\n        text-decoration: none;\n      }\n\n      & > button,\n      & > a {\n        & > .pn-button-bg {\n          transition: 0.4s ease-in-out;\n        }\n      }\n\n      @media screen and (min-width: $min-width-md) {\n        width: fit-content;\n      }\n    }\n\n    .secondary-link--animated {\n      font-weight: 500;\n      font-size: 1.6rem;\n      text-decoration: none;\n      color: $blue700;\n\n      pn-icon svg {\n        transition: 0.3s ease-in-out;\n        position: relative;\n        left: -0.3rem;\n\n        path {\n          fill: $blue700;\n        }\n      }\n\n      &[target='_blank']:not(.pn-button):after {\n        display: none;\n      }\n    }\n  }\n}\n\n//colors\npn-teaser-card[data-card-color='coral'] {\n  & > .pn-teaser-card__container {\n    background-color: $coral50;\n  }\n}\n\npn-teaser-card[data-card-color='green'] {\n  & > .pn-teaser-card__container {\n    background-color: $green50;\n  }\n}\n\npn-teaser-card[data-card-color='blue'] {\n  & > .pn-teaser-card__container {\n    background-color: $blue25;\n  }\n}\n\npn-teaser-card[data-card-color='blue50'] {\n  & > .pn-teaser-card__container {\n    background-color: $blue50;\n  }\n}\n\npn-teaser-card[data-card-color='blue400'] {\n  & > .pn-teaser-card__container {\n    background-color: $blue400;\n\n    .pn-teaser-card__container__content__text__container__label,\n    .pn-teaser-card__container__content__text__container__heading,\n    .pn-teaser-card__container__content__text__container__preamble,\n    .pn-teaser-card__container__content__cta .secondary-link--animated {\n      color: $white;\n    }\n\n    .secondary-link--animated {\n      & > pn-icon > svg > path {\n        fill: $white;\n      }\n    }\n  }\n}\n\npn-teaser-card[data-card-color='blue900'] {\n  & > .pn-teaser-card__container {\n    background-color: $blue900;\n    .pn-teaser-card__container__content__text__container__heading {\n      color: $coral400;\n    }\n\n    .pn-teaser-card__container__content__text__container__label,\n    .pn-teaser-card__container__content__text__container__preamble,\n    .pn-teaser-card__container__content__cta .secondary-link--animated {\n      color: $white;\n    }\n\n    .secondary-link--animated {\n      & > pn-icon > svg > path {\n        fill: $white;\n      }\n    }\n  }\n}\n\npn-teaser-card[data-card-color='white'] {\n  & > .pn-teaser-card__container {\n    background-color: $white;\n  }\n}\n\n//color override when in a listblock\n.teasercardlistblock {\n  .teasercardblock.has-bg {\n    background-color: transparent;\n    background: transparent;\n  }\n}\n\n// variants\n\n.onequarterwidth:not(.familywrapperblock) {\n  .pn-teaser-card__container__content__text__container__label {\n    @media screen and (min-width: $min-width-xl) {\n      margin-bottom: 0.8rem;\n    }\n  }\n}\n\n.onethirdwidth:not(.familywrapperblock),\n.onequarterwidth:not(.familywrapperblock) {\n  & pn-teaser-card {\n    .pn-teaser-card__container__image__container--no-image {\n      padding-top: 2.4rem;\n    }\n  }\n\n  .pn-teaser-card__container__content__cta {\n    .secondary-link--animated {\n      font-weight: 400;\n    }\n  }\n}\n\n.halfwidth:not(.familywrapperblock) {\n  & pn-teaser-card {\n    .pn-teaser-card__container__content__cta {\n      .secondary-link--animated {\n        font-weight: 400;\n      }\n    }\n\n    .pn-teaser-card__container__image__container--no-image {\n      padding-top: 2.4rem;\n    }\n\n    @media screen and (min-width: $min-width-lg) {\n      .pn-teaser-card__container__content__cta {\n        .secondary-link--animated {\n          font-weight: 500;\n        }\n      }\n    }\n\n    @media screen and (min-width: $min-width-xl) {\n      .pn-teaser-card__container__image__container--no-image {\n        padding-top: 4rem;\n      }\n\n      .pn-teaser-card__container__content {\n        padding: 0 4rem 4rem;\n      }\n\n      .pn-teaser-card__container__content__text__container__heading {\n        font-weight: 700;\n        font-size: 3.2rem;\n        line-height: 3.52rem;\n      }\n\n      .pn-teaser-card__container__content__text__container__preamble {\n        font-weight: 400;\n        font-size: 2rem;\n        line-height: 2.8rem;\n      }\n    }\n\n    @media screen and (min-width: $min-width-xxl) {\n      .pn-teaser-card__container__image__container--no-image {\n        padding-top: 5.6rem;\n      }\n\n      .pn-teaser-card__container__content {\n        padding: 0 5.6rem 5.6rem;\n      }\n    }\n  }\n}\n\n.fullwidth:not(.familywrapperblock) {\n  & pn-teaser-card {\n    .pn-teaser-card__container__content__cta {\n      .secondary-link--animated {\n        font-weight: 400;\n      }\n    }\n\n    .pn-teaser-card__container__image__container--no-image {\n      width: auto;\n      padding-top: 2.4rem;\n    }\n\n    @media screen and (min-width: $min-width-md) {\n      min-height: 35rem;\n\n      .pn-teaser-card__container__content__cta {\n        .secondary-link--animated {\n          font-weight: 500;\n        }\n      }\n\n      .pn-teaser-card__container {\n        flex-direction: row;\n      }\n\n      .pn-teaser-card__container__content {\n        align-self: center;\n        gap: 2.4rem;\n        padding: 3.2rem 3.2rem 3.2rem 2.4rem;\n      }\n\n      .pn-teaser-card__container__image__container {\n        & > [slot='illustration'] {\n          border-top-left-radius: 2.4rem;\n          border-bottom-left-radius: 2.4rem;\n          clip-path: ellipse(100% 100% at 0% 50%);\n\n          & > picture > img {\n            height: 100%;\n            object-fit: cover;\n          }\n        }\n      }\n    }\n\n    @media screen and (min-width: $min-width-xl) {\n      min-height: 52rem;\n\n      .pn-teaser-card__container__content {\n        padding: 4rem 4rem 4rem 3.2rem;\n      }\n\n      .pn-teaser-card__container__content__text__container__heading {\n        font-weight: 700;\n        font-size: 4.8rem;\n        line-height: 5.28rem;\n      }\n\n      .pn-teaser-card__container__content__text__container__preamble {\n        font-size: 2rem;\n        line-height: 2.8rem;\n      }\n    }\n  }\n\n  pn-teaser-card[data-card-alignment='right'] {\n    @media screen and (min-width: $min-width-md) {\n      .pn-teaser-card__container {\n        flex-direction: row-reverse;\n      }\n\n      .pn-teaser-card__container__content {\n        padding: 3.2rem 2.4rem 3.2rem 3.2rem;\n      }\n\n      .pn-teaser-card__container__image__container {\n        & > [slot='illustration'] {\n          border-bottom-right-radius: 2.4rem;\n          clip-path: ellipse(100% 100% at 100% 50%);\n        }\n      }\n    }\n\n    @media screen and (min-width: $min-width-xl) {\n      .pn-teaser-card__container__content {\n        padding: 4rem 3.2rem 4rem 4rem;\n      }\n    }\n  }\n}\n\n//effect class\npn-teaser-card.teaser-card--hover-effect {\n  &:hover {\n    cursor: pointer;\n    .pn-teaser-card__container__image__container {\n      & [slot='illustration'] {\n        & picture > img {\n          transform: scale(1.02);\n          filter: brightness(0.85);\n        }\n      }\n    }\n\n    .secondary-link--animated {\n      text-decoration: underline;\n\n      pn-icon svg {\n        left: 0;\n      }\n    }\n\n    pn-button {\n      button,\n      a {\n        .pn-button-bg {\n          background-color: $blue900;\n        }\n      }\n    }\n\n    &[data-card-color='blue900'] {\n      pn-button {\n        button,\n        a {\n          .pn-button-bg {\n            background-color: $blue400;\n          }\n        }\n      }\n    }\n  }\n}\n","import { Component, Prop, h, Element, State, Host } from \"@stencil/core\";\nimport { HeadingTag } from '@/globals/HeadingTag';\n\n@Component({\n  tag: 'pn-teaser-card',\n  styleUrl: 'pn-teaser-card.scss'\n})\nexport class PnTeaserCard {\n  @Element() hostElement: HTMLElement;\n  \n  @Prop() text: string = null;\n  @Prop() heading: string = null;\n  @Prop() label?: string = null;\n  @Prop() headingLevel?: string = 'h3';\n  @Prop({ reflect: true }) dataCardColor: string = 'coral';\n  @Prop({ reflect: true }) dataCardAlignment: string = 'left';\n\n  @State() hasCtaSlotContent: boolean = false;\n  @State() hasIllustrationSlot: boolean = true;\n\n  componentWillLoad() {\n    this.hasCtaSlotContent = !!this.hostElement.querySelector('[slot=\"cta\"]');\n    this.hasIllustrationSlot = !!this.hostElement.querySelector('[slot=\"illustration\"]');\n  }\n\n  render() {\n    const labelToCapitals = this.label?.toUpperCase();\n\n    return (\n      <Host>\n        <slot name=\"clickable-block-wrapper\" />\n        <div class=\"pn-teaser-card__container\">\n          <div class={`pn-teaser-card__container__image__container ${!this.hasIllustrationSlot ? 'pn-teaser-card__container__image__container--no-image' : ''}`}>\n            <slot name=\"illustration\" />\n          </div>\n          <div class=\"pn-teaser-card__container__content\">\n            <div class=\"pn-teaser-card__container__content__text__container\">\n              {labelToCapitals && <span class=\"pn-teaser-card__container__content__text__container__label\">{labelToCapitals}</span>}\n              {this.heading && <HeadingTag level={this.headingLevel} cssClass=\"pn-teaser-card__container__content__text__container__heading\">\n                  {this.heading}\n                </HeadingTag>}\n              <p class=\"pn-teaser-card__container__content__text__container__preamble\">{this.text}</p>\n            </div>\n            {this.hasCtaSlotContent && (\n              <div class=\"pn-teaser-card__container__content__cta\">\n                <slot name=\"cta\" />\n              </div>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/cjs/pn-titletag.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-34e1c673.js');
+const index = require('./index-b02670c2.js');
 
-const pnTitletagCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-titletag{display:inline-flex;border-radius:0.4rem;min-height:2.5em;font-weight:normal;font-size:0.75em;text-align:center;vertical-align:bottom;padding:0.6rem;gap:0.6em}pn-titletag[color=green700],pn-titletag[color=green]{color:#005e41;background:#dcf6e7}pn-titletag[color=blue700],pn-titletag[color=blue]{background:#e0f8ff;color:#005d92}pn-titletag[color=coral700],pn-titletag[color=coral]{background:#fdefee;color:#9b1c2e}pn-titletag[color=gray900],pn-titletag[color=gray],pn-titletag[color=grey]{background:#d3cecb;color:#2d2013}pn-titletag[color=gray50],pn-titletag[color=lightgray],pn-titletag[color=lightgrey]{background:#f3f2f2;color:#2d2013}";
+const pnTitletagCss = "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-titletag{display:inline-flex;border-radius:0.4rem;min-height:2.5em;font-weight:normal;font-size:0.75em;text-align:center;vertical-align:bottom;padding:0.6rem;gap:0.6em}pn-titletag[color=green700],pn-titletag[color=green]{color:#005e41;background:#dcf6e7}pn-titletag[color=blue700],pn-titletag[color=blue]{background:#e0f8ff;color:#005d92}pn-titletag[color=coral700],pn-titletag[color=coral]{background:#fdefee;color:#9b1c2e}pn-titletag[color=gray900],pn-titletag[color=gray],pn-titletag[color=grey]{background:#d3cecb;color:#2d2013}pn-titletag[color=gray50],pn-titletag[color=lightgray],pn-titletag[color=lightgrey]{background:#f3f2f2;color:#2d2013}";
 const PnTitletagStyle0 = pnTitletagCss;
 
 const PnTiletag = class {
@@ -15,7 +15,7 @@ const PnTiletag = class {
     }
     get hostElement() { return index.getElement(this); }
     render() {
-        return (index.h(index.Host, { key: '01ea9f33d75dac321884aae478532c4df23c2390' }, index.h("slot", { key: '5d9e6425f8f1b1efd3661f99f4d7735af71f667e' }), this.icon ? index.h("pn-icon", { icon: this.icon, small: "false", color: this.color }) : null));
+        return (index.h(index.Host, { key: '989e8d33c93954b1a77bfb87d92634d2b09b906f' }, index.h("slot", { key: 'fcb48d9ce70886036834c994ba3949863241aa7c' }), this.icon ? index.h("pn-icon", { icon: this.icon, small: "false", color: this.color }) : null));
     }
 };
 PnTiletag.style = PnTitletagStyle0;

package/cjs/pn-titletag.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"pn-titletag.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,6tBAA6tB,CAAC;AACpvB,yBAAe,aAAa;;MCKf,SAAS;;;oBAEG,IAAI;qBAG6B,UAAU;;;IAIlE,MAAM;QACJ,QACEA,QAACC,UAAI,uDACHD,oEAAQ,EACP,IAAI,CAAC,IAAI,GAAGA,qBAAS,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,OAAO,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,GAAY,GAAG,IAAI,CACpF,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/minor/pn-titletag/pn-titletag.scss?tag=pn-titletag","src/components/minor/pn-titletag/pn-titletag.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-titletag {\n  display: inline-flex;\n  border-radius: 0.4rem;\n  min-height: 2.5em;\n  font-weight: normal;\n  font-size: 0.75em;\n  text-align: center;\n  vertical-align: bottom;\n  padding: 0.6rem;\n  gap: 0.6em;\n\n  pn-icon {\n  }\n\n  &[color='green700'],\n  &[color='green'] {\n    color: $green700;\n    background: $green50;\n  }\n\n  &[color='blue700'],\n  &[color='blue'] {\n    background: $blue50;\n    color: $blue700;\n  }\n\n  &[color='coral700'],\n  &[color='coral'] {\n    background: $coral50;\n    color: $coral700;\n  }\n\n  &[color='gray900'],\n  &[color='gray'],\n  &[color='grey'] {\n    background: $gray200;\n    color: $gray900;\n  }\n\n  &[color='gray50'],\n  &[color='lightgray'],\n  &[color='lightgrey'] {\n    background: $gray50;\n    color: $gray900;\n  }\n}\n","import { Component, Prop, h, Host, Element, Listen } from '@stencil/core';\n\n@Component({\n  tag: 'pn-titletag',\n  styleUrl: 'pn-titletag.scss',\n})\nexport class PnTiletag {\n  /** Icon of the tag */\n  @Prop() icon: string = null;\n\n  /** Icon of the tag */\n  @Prop({ mutable: true, reflect: true }) color: string = 'green700';\n\n  @Element() hostElement: HTMLElement;\n\n  render() {\n    return (\n      <Host>\n        <slot />\n        {this.icon ? <pn-icon icon={this.icon} small=\"false\" color={this.color}></pn-icon> : null}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pn-titletag.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,siCAAsiC,CAAC;AAC7jC,yBAAe,aAAa;;MCKf,SAAS;;;oBAEG,IAAI;qBAG6B,UAAU;;;IAIlE,MAAM;QACJ,QACEA,QAACC,UAAI,uDACHD,oEAAQ,EACP,IAAI,CAAC,IAAI,GAAGA,qBAAS,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,OAAO,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,GAAY,GAAG,IAAI,CACpF,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/minor/pn-titletag/pn-titletag.scss?tag=pn-titletag","src/components/minor/pn-titletag/pn-titletag.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-titletag {\n  display: inline-flex;\n  border-radius: 0.4rem;\n  min-height: 2.5em;\n  font-weight: normal;\n  font-size: 0.75em;\n  text-align: center;\n  vertical-align: bottom;\n  padding: 0.6rem;\n  gap: 0.6em;\n\n  pn-icon {\n  }\n\n  &[color='green700'],\n  &[color='green'] {\n    color: $green700;\n    background: $green50;\n  }\n\n  &[color='blue700'],\n  &[color='blue'] {\n    background: $blue50;\n    color: $blue700;\n  }\n\n  &[color='coral700'],\n  &[color='coral'] {\n    background: $coral50;\n    color: $coral700;\n  }\n\n  &[color='gray900'],\n  &[color='gray'],\n  &[color='grey'] {\n    background: $gray200;\n    color: $gray900;\n  }\n\n  &[color='gray50'],\n  &[color='lightgray'],\n  &[color='lightgrey'] {\n    background: $gray50;\n    color: $gray900;\n  }\n}\n","import { Component, Prop, h, Host, Element, Listen } from '@stencil/core';\n\n@Component({\n  tag: 'pn-titletag',\n  styleUrl: 'pn-titletag.scss',\n})\nexport class PnTiletag {\n  /** Icon of the tag */\n  @Prop() icon: string = null;\n\n  /** Icon of the tag */\n  @Prop({ mutable: true, reflect: true }) color: string = 'green700';\n\n  @Element() hostElement: HTMLElement;\n\n  render() {\n    return (\n      <Host>\n        <slot />\n        {this.icon ? <pn-icon icon={this.icon} small=\"false\" color={this.color}></pn-icon> : null}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/cjs/pn-usp-promoter.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-34e1c673.js');
+const index = require('./index-b02670c2.js');
 
-const pnUspPromoterCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-usp-promoter{width:80%}pn-usp-promoter .usp-promoter{display:flex;justify-content:center;padding:3rem 0.8rem}pn-usp-promoter .usp-promoter--full-width{overflow:hidden;margin:0 calc(-50vw + 50%)}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter--full-width{padding:8rem 4rem}}pn-usp-promoter .usp-promoter__content{display:flex;flex-direction:row;width:100%;max-width:114rem}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter__content{align-items:center;text-align:left;justify-content:center}}pn-usp-promoter .usp-promoter__content-wrapper{display:flex;flex-direction:column;width:100%;max-width:75rem}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter__content-wrapper{align-items:flex-start;padding-left:4rem}}pn-usp-promoter .usp-promoter__content-heading{margin-bottom:0.8rem}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter__content-heading{font-size:4.2rem}}@media screen and (min-width: 1140px){pn-usp-promoter .usp-promoter__content-heading{font-size:4.8rem}}@media screen and (min-width: 1440px){pn-usp-promoter .usp-promoter__content-heading{font-size:5.6rem}}pn-usp-promoter .usp-promoter__no-margin-bottom{margin-bottom:0 !important}pn-usp-promoter .usp-promoter__content-text{font-size:1.6rem;max-width:47rem;margin-bottom:2.6rem}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter__content-text{text-wrap:balance}}@media screen and (min-width: 1140px){pn-usp-promoter .usp-promoter__content-text{font-size:1.8rem;max-width:60rem}}@media screen and (min-width: 1440px){pn-usp-promoter .usp-promoter__content-text{font-size:2rem;max-width:70rem}}pn-usp-promoter [slot=app-store]{display:flex;align-items:flex-start;margin-bottom:2.6rem;gap:1rem}pn-usp-promoter [slot=app-store]>a{background-color:black;border:0.1rem solid #a6a6a6;border-radius:0.8rem;color:#fff;display:inline-block;line-height:0;text-decoration:none;transition:background-color 0.2s ease-in-out}pn-usp-promoter [slot=app-store]>a::after{margin-left:0 !important;margin-right:0.5rem;top:0.2rem;position:relative}pn-usp-promoter [slot=app-store]>a:hover{background-color:#0d234b}pn-usp-promoter [slot=app-store]>a:focus{background-color:#0d234b;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #0d234b}pn-usp-promoter [slot=app-store]>a:focus-visible{outline:none}pn-usp-promoter [slot=app-store]>a img{height:4rem}pn-usp-promoter [slot=usp-buttons] pn-button{margin-bottom:1.6rem}pn-usp-promoter [slot=usp-buttons]>a{color:#005d92;font-weight:500;font-size:1.6rem;padding:0.1rem;text-decoration:none}pn-usp-promoter [slot=usp-buttons]>a pn-icon svg{transition:transform 0.3s ease-in-out}pn-usp-promoter [slot=usp-buttons]>a pn-icon svg path{fill:#005d92}pn-usp-promoter [slot=usp-buttons]>a:hover pn-icon svg{transition:transform 0.3s ease-in-out;transform:translateX(0.3rem)}pn-usp-promoter [slot=usp-buttons]>a:hover pn-icon svg path{fill:#005d92}pn-usp-promoter [slot=app-store],pn-usp-promoter [slot=usp-buttons]{flex-direction:column}@media screen and (min-width: 768px){pn-usp-promoter [slot=app-store],pn-usp-promoter [slot=usp-buttons]{display:flex;flex-direction:row;gap:1.6rem}}pn-usp-promoter [slot=illustration]{max-width:25%;position:relative;left:-1.6rem}pn-usp-promoter [slot=illustration] pn-scroll{position:sticky;top:0}@media screen and (min-width: 768px){pn-usp-promoter [slot=illustration]{display:block}}pn-usp-promoter [slot=illustration] picture img{max-width:100%}@media screen and (min-width: 1140px){pn-usp-promoter [slot=illustration] picture img{width:32rem}}@media screen and (min-width: 1440px){pn-usp-promoter [slot=illustration] picture img{width:33.6rem}}pn-usp-promoter .usp-promoter__heading-extension{display:flex;flex-direction:column}pn-usp-promoter .usp-promoter--right-align .usp-promoter__content{flex-direction:row-reverse;text-align:right}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter--right-align .usp-promoter__content{align-items:center}}pn-usp-promoter .usp-promoter--right-align .usp-promoter__content-wrapper{display:flex;flex-direction:column;align-items:flex-end;padding-left:0}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter--right-align .usp-promoter__content-wrapper{padding-right:4rem}}pn-usp-promoter .usp-promoter--right-align [slot=app-store],pn-usp-promoter .usp-promoter--right-align [slot=usp-buttons]{align-items:flex-end}pn-usp-promoter .usp-promoter--right-align [slot=illustration]{left:1.6rem}@media screen and (max-width: 768px){pn-usp-promoter .usp-promoter--hide-image-small-screen [slot=illustration] picture img{display:none}pn-usp-promoter .usp-promoter--hide-image-small-screen .usp-promoter__content{text-align:center}pn-usp-promoter .usp-promoter--hide-image-small-screen .usp-promoter__content-wrapper{align-items:center;padding-right:0}pn-usp-promoter .usp-promoter--hide-image-small-screen [slot=app-store],pn-usp-promoter .usp-promoter--hide-image-small-screen [slot=usp-buttons]{display:flex;flex-direction:row;justify-content:center}}";
+const pnUspPromoterCss = "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-usp-promoter{width:80%}pn-usp-promoter .usp-promoter{display:flex;justify-content:center;padding:3rem 0.8rem}pn-usp-promoter .usp-promoter--full-width{overflow:hidden;margin:0 calc(-50vw + 50%)}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter--full-width{padding:8rem 4rem}}pn-usp-promoter .usp-promoter__content{display:flex;flex-direction:row;width:100%;max-width:114rem}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter__content{align-items:center;text-align:left;justify-content:center}}pn-usp-promoter .usp-promoter__content-wrapper{display:flex;flex-direction:column;width:100%;max-width:75rem}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter__content-wrapper{align-items:flex-start;padding-left:4rem}}pn-usp-promoter .usp-promoter__content-heading{margin-bottom:0.8rem}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter__content-heading{font-size:4.2rem}}@media screen and (min-width: 1140px){pn-usp-promoter .usp-promoter__content-heading{font-size:4.8rem}}@media screen and (min-width: 1440px){pn-usp-promoter .usp-promoter__content-heading{font-size:5.6rem}}pn-usp-promoter .usp-promoter__no-margin-bottom{margin-bottom:0 !important}pn-usp-promoter .usp-promoter__content-text{font-size:1.6rem;max-width:47rem;margin-bottom:2.6rem}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter__content-text{text-wrap:balance}}@media screen and (min-width: 1140px){pn-usp-promoter .usp-promoter__content-text{font-size:1.8rem;max-width:60rem}}@media screen and (min-width: 1440px){pn-usp-promoter .usp-promoter__content-text{font-size:2rem;max-width:70rem}}pn-usp-promoter [slot=app-store]{display:flex;align-items:flex-start;margin-bottom:2.6rem;gap:1rem}pn-usp-promoter [slot=app-store]>a{background-color:black;border:0.1rem solid #a6a6a6;border-radius:0.8rem;color:#fff;display:inline-block;line-height:0;text-decoration:none;transition:background-color 0.2s ease-in-out}pn-usp-promoter [slot=app-store]>a::after{margin-left:0 !important;margin-right:0.5rem;top:0.2rem;position:relative}pn-usp-promoter [slot=app-store]>a:hover{background-color:#0d234b}pn-usp-promoter [slot=app-store]>a:focus{background-color:#0d234b;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #0d234b}pn-usp-promoter [slot=app-store]>a:focus-visible{outline:none}pn-usp-promoter [slot=app-store]>a img{height:4rem}pn-usp-promoter [slot=usp-buttons] pn-button{margin-bottom:1.6rem}pn-usp-promoter [slot=usp-buttons]>a{color:#005d92;font-weight:500;font-size:1.6rem;padding:0.1rem;text-decoration:none}pn-usp-promoter [slot=usp-buttons]>a pn-icon svg{transition:transform 0.3s ease-in-out}pn-usp-promoter [slot=usp-buttons]>a pn-icon svg path{fill:#005d92}pn-usp-promoter [slot=usp-buttons]>a:hover pn-icon svg{transition:transform 0.3s ease-in-out;transform:translateX(0.3rem)}pn-usp-promoter [slot=usp-buttons]>a:hover pn-icon svg path{fill:#005d92}pn-usp-promoter [slot=app-store],pn-usp-promoter [slot=usp-buttons]{flex-direction:column}@media screen and (min-width: 768px){pn-usp-promoter [slot=app-store],pn-usp-promoter [slot=usp-buttons]{display:flex;flex-direction:row;gap:1.6rem}}pn-usp-promoter [slot=illustration]{max-width:25%;position:relative;left:-1.6rem}pn-usp-promoter [slot=illustration] pn-scroll{position:sticky;top:0}@media screen and (min-width: 768px){pn-usp-promoter [slot=illustration]{display:block}}pn-usp-promoter [slot=illustration] picture img{max-width:100%}@media screen and (min-width: 1140px){pn-usp-promoter [slot=illustration] picture img{width:32rem}}@media screen and (min-width: 1440px){pn-usp-promoter [slot=illustration] picture img{width:33.6rem}}pn-usp-promoter .usp-promoter__heading-extension{display:flex;flex-direction:column}pn-usp-promoter .usp-promoter--right-align .usp-promoter__content{flex-direction:row-reverse;text-align:right}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter--right-align .usp-promoter__content{align-items:center}}pn-usp-promoter .usp-promoter--right-align .usp-promoter__content-wrapper{display:flex;flex-direction:column;align-items:flex-end;padding-left:0}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter--right-align .usp-promoter__content-wrapper{padding-right:4rem}}pn-usp-promoter .usp-promoter--right-align [slot=app-store],pn-usp-promoter .usp-promoter--right-align [slot=usp-buttons]{align-items:flex-end}pn-usp-promoter .usp-promoter--right-align [slot=illustration]{left:1.6rem}@media screen and (max-width: 768px){pn-usp-promoter .usp-promoter--hide-image-small-screen [slot=illustration] picture img{display:none}pn-usp-promoter .usp-promoter--hide-image-small-screen .usp-promoter__content{text-align:center}pn-usp-promoter .usp-promoter--hide-image-small-screen .usp-promoter__content-wrapper{align-items:center;padding-right:0}pn-usp-promoter .usp-promoter--hide-image-small-screen [slot=app-store],pn-usp-promoter .usp-promoter--hide-image-small-screen [slot=usp-buttons]{display:flex;flex-direction:row;justify-content:center}}";
 const PnUspPromoterStyle0 = pnUspPromoterCss;
 
 const PnUspPromoter = class {
@@ -34,7 +34,7 @@ const PnUspPromoter = class {
             rightAlign ? "usp-promoter--right-align" : "",
         ].join(' ');
         const hasHeadingExtension = this.headingExtension ? "usp-promoter__heading-extension" : "";
-        return (index.h(index.Host, { key: '264c4f6da6ddee9569089074fc08ccf9e5c371ba' }, index.h("div", { key: 'c832ef39dcfece93643964f6994c91c79f7f8ea0', class: ` ${classes} ${this.centerMobileContent()}`, style: { 'background': `${this.backgroundGradient}` } }, index.h("div", { key: '41f8995ae12546fd008a8eec5b5de0a9482d3312', class: "usp-promoter__content" }, index.h("slot", { key: '3a967323a69ec83ed03d619ba6a2fa9115fa2a90', name: "illustration" }), index.h("div", { key: 'ed9bcfb59255d8369b41386b834b773b8aad3a71', class: "usp-promoter__content-wrapper" }, index.h("h2", { key: '58eb3a2d9650920070c25a65e699d21cfba8b118', class: `usp-promoter__content-heading ${hasHeadingExtension}` }, index.h("span", { key: '08fc4b8dcc49746a699033c7ad1009ade8d46e71' }, this.heading), this.headingExtension ? index.h("span", null, this.headingExtension) : null), index.h("p", { key: '9452a7544e7255842331591f1d9178018c594524', class: "usp-promoter__content-text" }, this.bodyText), index.h("slot", { key: 'd1eee8f90dd6280de590e288ac7f11beb1aa5dd1', name: "app-store" }), index.h("slot", { key: 'cf45783c7d093218e4aeb5707da2b742225a4594', name: "usp-buttons" }))))));
+        return (index.h(index.Host, { key: '65ca041fe5a9d764d892bf5f39c877418835ba73' }, index.h("div", { key: '45bb6090cc1d44f490e11fc3688ac2175788798d', class: ` ${classes} ${this.centerMobileContent()}`, style: { 'background': `${this.backgroundGradient}` } }, index.h("div", { key: '76fe7cf83ef175d1a6e145f9a826bb4eb34cb248', class: "usp-promoter__content" }, index.h("slot", { key: '3a62a913271bc7e5bc89f1f2e0750cfb36262c95', name: "illustration" }), index.h("div", { key: '2cd14cf9668526e19509ffdd242acf4492487ac0', class: "usp-promoter__content-wrapper" }, index.h("h2", { key: '2a48031bbb06a0474d1581bceea450a805f37f13', class: `usp-promoter__content-heading ${hasHeadingExtension}` }, index.h("span", { key: '9cccb5af337bfe8ac6353a44bf4ae037d92c6dc6' }, this.heading), this.headingExtension ? index.h("span", null, this.headingExtension) : null), index.h("p", { key: '8c4c602653cbc0d0d385ded6bed0d390ee8f91ef', class: "usp-promoter__content-text" }, this.bodyText), index.h("slot", { key: '1ce50455c4ac1b55888d2a8f5cc1cad59bc97cdd', name: "app-store" }), index.h("slot", { key: '8e1e6cccec6b638df6a13bcd839862d9eba0ff80', name: "usp-buttons" }))))));
     }
 };
 PnUspPromoter.style = PnUspPromoterStyle0;

package/cjs/pn-usp-promoter.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"pn-usp-promoter.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,gBAAgB,GAAG,u+JAAu+J,CAAC;AACjgK,4BAAe,gBAAgB;;MCKlB,aAAa;;;uBAGE,IAAI;gCACK,IAAI;wBACZ,IAAI;kCACM,IAAI;yBACZ,KAAK;0BACJ,KAAK;+BACA,KAAK;;;IAEhC,mBAAmB;QACzB,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;QACrE,IAAI,IAAI,CAAC,eAAe,IAAI,IAAI,IAAI,IAAI,EAAE;YACxC,OAAO,uCAAuC,CAAC;SAChD;QACD,OAAO,EAAE,CAAC;KACX;IAED,MAAM;QACJ,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;QACvC,MAAM,OAAO,GAAG;YACd,cAAc;YACd,SAAS,GAAG,0BAA0B,GAAG,EAAE;YAC3C,UAAU,GAAG,2BAA2B,GAAG,EAAE;SAC9C,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACZ,MAAM,mBAAmB,GAAG,IAAI,CAAC,gBAAgB,GAAG,iCAAiC,GAAG,EAAE,CAAC;QAE3F,QACEA,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAE,IAAI,OAAO,IAAI,IAAI,CAAC,mBAAmB,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC,kBAAkB,EAAE,EAAE,IAC5GA,kEAAK,KAAK,EAAC,uBAAuB,IAChCA,mEAAM,IAAI,EAAC,cAAc,GAAQ,EACjCA,kEAAK,KAAK,EAAC,+BAA+B,IACxCA,iEAAI,KAAK,EAAE,iCAAiC,mBAAmB,EAAE,IAC/DA,qEAAO,IAAI,CAAC,OAAO,CAAQ,EAC1B,IAAI,CAAC,gBAAgB,GAAGA,sBAAO,IAAI,CAAC,gBAAgB,CAAQ,GAAG,IAAI,CACjE,EACLA,gEAAG,KAAK,EAAC,4BAA4B,IAAE,IAAI,CAAC,QAAQ,CAAK,EACzDA,mEAAM,IAAI,EAAC,WAAW,GAAQ,EAC9BA,mEAAM,IAAI,EAAC,aAAa,GAAQ,CAC5B,CACF,CACF,CACD,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/widgets/pn-usp-promoter/pn-usp-promoter.scss?tag=pn-usp-promoter","src/components/widgets/pn-usp-promoter/pn-usp-promoter.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\n$borderWhiteShadowSmall: 0 0 0 0.2rem #fff;\n$borderBlueShadowMedium: 0 0 0 0.4rem $blue900;\n\npn-usp-promoter {\n  width: 80%;\n\n  .usp-promoter {\n    display: flex;\n    justify-content: center;\n    padding: 3rem 0.8rem;\n  }\n\n  .usp-promoter--full-width {\n    overflow: hidden;\n    margin: 0 calc(-50vw + 50%);\n\n    @media screen and (min-width: $min-width-md) {\n      padding: 8rem 4rem;\n    }\n  }\n\n  .usp-promoter__content {\n    display: flex;\n    flex-direction: row;\n    width: 100%;\n    max-width: 114rem;\n\n    @media screen and (min-width: $min-width-md) {\n      align-items: center;\n      text-align: left;\n      justify-content: center;\n    }\n  }\n\n  .usp-promoter__content-wrapper {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    max-width: 75rem;\n\n    @media screen and (min-width: $min-width-md) {\n      align-items: flex-start;\n      padding-left: 4rem;\n    }\n  }\n\n  .usp-promoter__content-heading {\n    margin-bottom: 0.8rem;\n\n    @media screen and (min-width: $min-width-md) {\n      font-size: 4.2rem;\n    }\n\n    @media screen and (min-width:$max-width-xl) {\n      font-size: 4.8rem;\n    }\n\n    @media screen and (min-width:$max-width-xxl) {\n      font-size: 5.6rem;\n    }\n  }\n\n  .usp-promoter__no-margin-bottom {\n    margin-bottom: 0 !important;\n  }\n\n  .usp-promoter__content-text {\n    font-size: 1.6rem;\n    max-width: 47rem;\n    margin-bottom: 2.6rem;\n\n    @media screen and (min-width: $min-width-md) {\n      text-wrap: balance;\n    }\n\n    @media screen and (min-width:$max-width-xl) {\n      font-size: 1.8rem;\n      max-width: 60rem;\n    }\n\n    @media screen and (min-width:$max-width-xxl) {\n      font-size: 2rem;\n      max-width: 70rem;\n    }\n  }\n\n  [slot='app-store'] {\n    display: flex;\n    align-items: flex-start;\n    margin-bottom: 2.6rem;\n    gap: 1rem;\n\n    &>a {\n      background-color: black;\n      border: 0.1rem solid #a6a6a6;\n      border-radius: 0.8rem;\n      color: #fff;\n      display: inline-block;\n      line-height: 0;\n      text-decoration: none;\n      transition: background-color 0.2s ease-in-out;\n\n      &::after {\n        margin-left: 0 !important;\n        margin-right: 0.5rem;\n        top: 0.2rem;\n        position: relative;\n      }\n\n      &:hover {\n        background-color: $blue900;\n      }\n\n      &:focus {\n        background-color: $blue900;\n        box-shadow: $borderWhiteShadowSmall, $borderBlueShadowMedium;\n      }\n\n      &:focus-visible {\n        outline: none;\n      }\n\n      img {\n        height: 4rem;\n      }\n    }\n  }\n\n  [slot='usp-buttons'] {\n    pn-button {\n      margin-bottom: 1.6rem;\n    }\n\n    &>a {\n      color: $blue700;\n      font-weight: 500;\n      font-size: 1.6rem;\n      padding: 0.1rem;\n      text-decoration: none;\n\n      pn-icon svg {\n        transition: transform 0.3s ease-in-out;\n\n        path {\n          fill: $blue700;\n        }\n      }\n\n      &:hover {\n        pn-icon svg {\n          transition: transform 0.3s ease-in-out;\n          transform: translateX(0.3rem);\n\n          path {\n            fill: $blue700;\n          }\n        }\n      }\n    }\n  }\n\n  [slot='app-store'],\n  [slot='usp-buttons'] {\n    flex-direction: column;\n\n    @media screen and (min-width: $min-width-md) {\n      display: flex;\n      flex-direction: row;\n      gap: 1.6rem;\n    }\n  }\n\n  [slot='illustration'] {\n    max-width: 25%;\n    position: relative;\n    left: -1.6rem;\n\n    pn-scroll {\n      position: sticky;\n      top: 0;\n    }\n\n    @media screen and (min-width: $min-width-md) {\n      display: block;\n    }\n\n    & picture img {\n      max-width: 100%;\n\n      @media screen and (min-width: $max-width-xl) {\n        width: 32rem;\n      }\n\n      @media screen and (min-width: $max-width-xxl) {\n        width: 33.6rem;\n      }\n    }\n  }\n\n  .usp-promoter__heading-extension {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .usp-promoter--right-align {\n    .usp-promoter__content {\n      flex-direction: row-reverse;\n      text-align: right;\n\n      @media screen and (min-width: $min-width-md) {\n        align-items: center;\n      }\n    }\n\n    .usp-promoter__content-wrapper {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-end;\n      padding-left: 0;\n\n      @media screen and (min-width: $min-width-md) {\n        padding-right: 4rem;\n      }\n    }\n\n    [slot='app-store'],\n    [slot='usp-buttons'] {\n      align-items: flex-end;\n    }\n\n    [slot='illustration'] {\n      left: 1.6rem;\n    }\n  }\n\n  .usp-promoter--hide-image-small-screen {\n    @media screen and (max-width: $min-width-md) {\n      [slot='illustration'] picture img {\n        display: none;\n      }\n\n      .usp-promoter__content {\n        text-align: center;\n      }\n\n      .usp-promoter__content-wrapper {\n        align-items: center;\n        padding-right: 0;\n      }\n\n      [slot='app-store'],\n      [slot='usp-buttons'] {\n        display: flex;\n        flex-direction: row;\n        justify-content: center;\n      }\n    }\n  }\n}","import { Component, Prop, h, Host, Element } from '@stencil/core';\n\n@Component({\n  tag: 'pn-usp-promoter',\n  styleUrl: 'pn-usp-promoter.scss',\n})\nexport class PnUspPromoter {\n  @Element() hostElement: HTMLElement;\n\n  @Prop() heading: string = null;\n  @Prop() headingExtension: string = null;\n  @Prop() bodyText: string = null;\n  @Prop() backgroundGradient: string = null;\n  @Prop() fullWidth: boolean = false;\n  @Prop() rightAlign: boolean = false;\n  @Prop() hideMobileImage: boolean = false;\n\n  private centerMobileContent() {\n    const slot = this.hostElement.querySelector('[slot=\"illustration\"]');\n    if (this.hideMobileImage || slot == null) {\n      return 'usp-promoter--hide-image-small-screen';\n    }\n    return \"\";\n  }\n\n  render() {\n    const { fullWidth, rightAlign } = this;\n    const classes = [\n      'usp-promoter',\n      fullWidth ? \"usp-promoter--full-width\" : \"\",\n      rightAlign ? \"usp-promoter--right-align\" : \"\",\n    ].join(' ');\n    const hasHeadingExtension = this.headingExtension ? \"usp-promoter__heading-extension\" : \"\";\n\n    return (\n      <Host>\n        <div class={` ${classes} ${this.centerMobileContent()}`} style={{ 'background': `${this.backgroundGradient}` }}>\n          <div class=\"usp-promoter__content\">\n            <slot name=\"illustration\"></slot>\n            <div class=\"usp-promoter__content-wrapper\">\n              <h2 class={`usp-promoter__content-heading ${hasHeadingExtension}`}>\n                <span>{this.heading}</span>\n                {this.headingExtension ? <span>{this.headingExtension}</span> : null}\n              </h2>\n              <p class=\"usp-promoter__content-text\">{this.bodyText}</p>\n              <slot name=\"app-store\"></slot>\n              <slot name=\"usp-buttons\"></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pn-usp-promoter.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,gBAAgB,GAAG,gzKAAgzK,CAAC;AAC10K,4BAAe,gBAAgB;;MCKlB,aAAa;;;uBAGE,IAAI;gCACK,IAAI;wBACZ,IAAI;kCACM,IAAI;yBACZ,KAAK;0BACJ,KAAK;+BACA,KAAK;;;IAEhC,mBAAmB;QACzB,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;QACrE,IAAI,IAAI,CAAC,eAAe,IAAI,IAAI,IAAI,IAAI,EAAE;YACxC,OAAO,uCAAuC,CAAC;SAChD;QACD,OAAO,EAAE,CAAC;KACX;IAED,MAAM;QACJ,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;QACvC,MAAM,OAAO,GAAG;YACd,cAAc;YACd,SAAS,GAAG,0BAA0B,GAAG,EAAE;YAC3C,UAAU,GAAG,2BAA2B,GAAG,EAAE;SAC9C,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACZ,MAAM,mBAAmB,GAAG,IAAI,CAAC,gBAAgB,GAAG,iCAAiC,GAAG,EAAE,CAAC;QAE3F,QACEA,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAE,IAAI,OAAO,IAAI,IAAI,CAAC,mBAAmB,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC,kBAAkB,EAAE,EAAE,IAC5GA,kEAAK,KAAK,EAAC,uBAAuB,IAChCA,mEAAM,IAAI,EAAC,cAAc,GAAQ,EACjCA,kEAAK,KAAK,EAAC,+BAA+B,IACxCA,iEAAI,KAAK,EAAE,iCAAiC,mBAAmB,EAAE,IAC/DA,qEAAO,IAAI,CAAC,OAAO,CAAQ,EAC1B,IAAI,CAAC,gBAAgB,GAAGA,sBAAO,IAAI,CAAC,gBAAgB,CAAQ,GAAG,IAAI,CACjE,EACLA,gEAAG,KAAK,EAAC,4BAA4B,IAAE,IAAI,CAAC,QAAQ,CAAK,EACzDA,mEAAM,IAAI,EAAC,WAAW,GAAQ,EAC9BA,mEAAM,IAAI,EAAC,aAAa,GAAQ,CAC5B,CACF,CACF,CACD,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/widgets/pn-usp-promoter/pn-usp-promoter.scss?tag=pn-usp-promoter","src/components/widgets/pn-usp-promoter/pn-usp-promoter.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\n$borderWhiteShadowSmall: 0 0 0 0.2rem #fff;\n$borderBlueShadowMedium: 0 0 0 0.4rem $blue900;\n\npn-usp-promoter {\n  width: 80%;\n\n  .usp-promoter {\n    display: flex;\n    justify-content: center;\n    padding: 3rem 0.8rem;\n  }\n\n  .usp-promoter--full-width {\n    overflow: hidden;\n    margin: 0 calc(-50vw + 50%);\n\n    @media screen and (min-width: $min-width-md) {\n      padding: 8rem 4rem;\n    }\n  }\n\n  .usp-promoter__content {\n    display: flex;\n    flex-direction: row;\n    width: 100%;\n    max-width: 114rem;\n\n    @media screen and (min-width: $min-width-md) {\n      align-items: center;\n      text-align: left;\n      justify-content: center;\n    }\n  }\n\n  .usp-promoter__content-wrapper {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    max-width: 75rem;\n\n    @media screen and (min-width: $min-width-md) {\n      align-items: flex-start;\n      padding-left: 4rem;\n    }\n  }\n\n  .usp-promoter__content-heading {\n    margin-bottom: 0.8rem;\n\n    @media screen and (min-width: $min-width-md) {\n      font-size: 4.2rem;\n    }\n\n    @media screen and (min-width:$max-width-xl) {\n      font-size: 4.8rem;\n    }\n\n    @media screen and (min-width:$max-width-xxl) {\n      font-size: 5.6rem;\n    }\n  }\n\n  .usp-promoter__no-margin-bottom {\n    margin-bottom: 0 !important;\n  }\n\n  .usp-promoter__content-text {\n    font-size: 1.6rem;\n    max-width: 47rem;\n    margin-bottom: 2.6rem;\n\n    @media screen and (min-width: $min-width-md) {\n      text-wrap: balance;\n    }\n\n    @media screen and (min-width:$max-width-xl) {\n      font-size: 1.8rem;\n      max-width: 60rem;\n    }\n\n    @media screen and (min-width:$max-width-xxl) {\n      font-size: 2rem;\n      max-width: 70rem;\n    }\n  }\n\n  [slot='app-store'] {\n    display: flex;\n    align-items: flex-start;\n    margin-bottom: 2.6rem;\n    gap: 1rem;\n\n    &>a {\n      background-color: black;\n      border: 0.1rem solid #a6a6a6;\n      border-radius: 0.8rem;\n      color: #fff;\n      display: inline-block;\n      line-height: 0;\n      text-decoration: none;\n      transition: background-color 0.2s ease-in-out;\n\n      &::after {\n        margin-left: 0 !important;\n        margin-right: 0.5rem;\n        top: 0.2rem;\n        position: relative;\n      }\n\n      &:hover {\n        background-color: $blue900;\n      }\n\n      &:focus {\n        background-color: $blue900;\n        box-shadow: $borderWhiteShadowSmall, $borderBlueShadowMedium;\n      }\n\n      &:focus-visible {\n        outline: none;\n      }\n\n      img {\n        height: 4rem;\n      }\n    }\n  }\n\n  [slot='usp-buttons'] {\n    pn-button {\n      margin-bottom: 1.6rem;\n    }\n\n    &>a {\n      color: $blue700;\n      font-weight: 500;\n      font-size: 1.6rem;\n      padding: 0.1rem;\n      text-decoration: none;\n\n      pn-icon svg {\n        transition: transform 0.3s ease-in-out;\n\n        path {\n          fill: $blue700;\n        }\n      }\n\n      &:hover {\n        pn-icon svg {\n          transition: transform 0.3s ease-in-out;\n          transform: translateX(0.3rem);\n\n          path {\n            fill: $blue700;\n          }\n        }\n      }\n    }\n  }\n\n  [slot='app-store'],\n  [slot='usp-buttons'] {\n    flex-direction: column;\n\n    @media screen and (min-width: $min-width-md) {\n      display: flex;\n      flex-direction: row;\n      gap: 1.6rem;\n    }\n  }\n\n  [slot='illustration'] {\n    max-width: 25%;\n    position: relative;\n    left: -1.6rem;\n\n    pn-scroll {\n      position: sticky;\n      top: 0;\n    }\n\n    @media screen and (min-width: $min-width-md) {\n      display: block;\n    }\n\n    & picture img {\n      max-width: 100%;\n\n      @media screen and (min-width: $max-width-xl) {\n        width: 32rem;\n      }\n\n      @media screen and (min-width: $max-width-xxl) {\n        width: 33.6rem;\n      }\n    }\n  }\n\n  .usp-promoter__heading-extension {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .usp-promoter--right-align {\n    .usp-promoter__content {\n      flex-direction: row-reverse;\n      text-align: right;\n\n      @media screen and (min-width: $min-width-md) {\n        align-items: center;\n      }\n    }\n\n    .usp-promoter__content-wrapper {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-end;\n      padding-left: 0;\n\n      @media screen and (min-width: $min-width-md) {\n        padding-right: 4rem;\n      }\n    }\n\n    [slot='app-store'],\n    [slot='usp-buttons'] {\n      align-items: flex-end;\n    }\n\n    [slot='illustration'] {\n      left: 1.6rem;\n    }\n  }\n\n  .usp-promoter--hide-image-small-screen {\n    @media screen and (max-width: $min-width-md) {\n      [slot='illustration'] picture img {\n        display: none;\n      }\n\n      .usp-promoter__content {\n        text-align: center;\n      }\n\n      .usp-promoter__content-wrapper {\n        align-items: center;\n        padding-right: 0;\n      }\n\n      [slot='app-store'],\n      [slot='usp-buttons'] {\n        display: flex;\n        flex-direction: row;\n        justify-content: center;\n      }\n    }\n  }\n}","import { Component, Prop, h, Host, Element } from '@stencil/core';\n\n@Component({\n  tag: 'pn-usp-promoter',\n  styleUrl: 'pn-usp-promoter.scss',\n})\nexport class PnUspPromoter {\n  @Element() hostElement: HTMLElement;\n\n  @Prop() heading: string = null;\n  @Prop() headingExtension: string = null;\n  @Prop() bodyText: string = null;\n  @Prop() backgroundGradient: string = null;\n  @Prop() fullWidth: boolean = false;\n  @Prop() rightAlign: boolean = false;\n  @Prop() hideMobileImage: boolean = false;\n\n  private centerMobileContent() {\n    const slot = this.hostElement.querySelector('[slot=\"illustration\"]');\n    if (this.hideMobileImage || slot == null) {\n      return 'usp-promoter--hide-image-small-screen';\n    }\n    return \"\";\n  }\n\n  render() {\n    const { fullWidth, rightAlign } = this;\n    const classes = [\n      'usp-promoter',\n      fullWidth ? \"usp-promoter--full-width\" : \"\",\n      rightAlign ? \"usp-promoter--right-align\" : \"\",\n    ].join(' ');\n    const hasHeadingExtension = this.headingExtension ? \"usp-promoter__heading-extension\" : \"\";\n\n    return (\n      <Host>\n        <div class={` ${classes} ${this.centerMobileContent()}`} style={{ 'background': `${this.backgroundGradient}` }}>\n          <div class=\"usp-promoter__content\">\n            <slot name=\"illustration\"></slot>\n            <div class=\"usp-promoter__content-wrapper\">\n              <h2 class={`usp-promoter__content-heading ${hasHeadingExtension}`}>\n                <span>{this.heading}</span>\n                {this.headingExtension ? <span>{this.headingExtension}</span> : null}\n              </h2>\n              <p class=\"usp-promoter__content-text\">{this.bodyText}</p>\n              <slot name=\"app-store\"></slot>\n              <slot name=\"usp-buttons\"></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/cjs/pn-usp-simple.cjs.entry.js

@@ -0,0 +1,56 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-b02670c2.js');
+const HeadingTag = require('./HeadingTag-19376e1f.js');
+
+const pnUspSimpleCss = "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}}:root{--usp-preamble-margin:clamp(1.5rem, 3vw, 1.8rem)}.pn-usp-simple{background:linear-gradient(90deg, #ffffff 0%, #effbff 17.44%);color:#2d2013;display:flex;flex-direction:column-reverse;max-width:100%;padding:clamp(2rem, 5vw, 5rem)}.pn-usp-simple .heading{font-size:clamp(2rem, 4vw, 3rem);font-weight:700;margin-bottom:1rem}.pn-usp-simple .preamble{font-size:clamp(1rem, 4vw, 1.6rem);margin-top:var(--usp-preamble-margin);margin-bottom:var(--usp-preamble-margin)}.pn-usp-simple .cta{display:flex;font-size:clamp(1rem, 4vw, 1.6rem);flex-direction:column;gap:clamp(1rem, 4vw, 1.2rem);padding:0 6rem}.pn-usp-simple .image-container{display:flex;align-items:center;justify-content:center;margin-bottom:2rem}.pn-usp-simple .image-container .graphics{--pn-width:12rem !important;--pn-height:12rem !important}.pn-usp-simple .image-container .image{border-radius:50%}@media (min-width: 768px){.pn-usp-simple{flex-direction:row;align-items:center}.pn-usp-simple .content{max-width:60%}.pn-usp-simple .cta{flex-direction:row;gap:clamp(2rem, 3vw, 3rem);padding:0}.pn-usp-simple .image-container{flex:clamp(15rem, 3vw, 20rem);margin-bottom:0}.pn-usp-simple .image-container .graphics{--pn-width:15rem;--pn-height:15rem}}@media (min-width: 1200px){.pn-usp-simple{max-width:1140px;margin:0 auto}.pn-usp-simple .content{max-width:50%}.pn-usp-simple .image-container .graphics{--pn-width:18rem;--pn-height:18rem}}@media (min-width: 1640px){.pn-usp-simple{max-width:1400px}.pn-usp-simple .image-container .graphics{--pn-width:20rem;--pn-height:20rem}}";
+const PnUspSimpleStyle0 = pnUspSimpleCss;
+
+const PnUspSimple = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.heading = undefined;
+        this.headingLevel = 'h2';
+        this.preamble = undefined;
+        this.ctaButtonsLabel = undefined;
+        this.primaryButtonText = undefined;
+        this.primaryButtonUrl = undefined;
+        this.primaryButtonIconSvg = undefined;
+        this.secondaryButtonText = undefined;
+        this.secondaryButtonUrl = undefined;
+        this.pnIllustrationSvg = undefined;
+        this.imageUrl = undefined;
+        this.imageAltText = undefined;
+    }
+    get hasPrimaryButton() {
+        return Boolean(this.primaryButtonText && this.primaryButtonUrl);
+    }
+    get hasSecondaryButton() {
+        return Boolean(this.secondaryButtonText && this.secondaryButtonUrl);
+    }
+    renderButton(props, isPrimary) {
+        const buttonType = isPrimary ? 'primary' : 'secondary';
+        return (index.h("pn-button", { icon: props.iconSvg, "left-icon": Boolean(props.iconSvg), href: props.url, class: "btn", "data-button-type": buttonType, appearance: isPrimary ? 'default' : 'light' }, props.text));
+    }
+    render() {
+        const hasButtons = this.hasPrimaryButton || this.hasSecondaryButton;
+        const headingId = 'usp-heading';
+        return (index.h(index.Host, { key: '86a81876d75377462d4a94cc9ca0d8a7b8150791' }, index.h("div", { key: '59568c012efdb309dc7e9b3ed64a0a344ab28360', class: "pn-usp-simple", role: "region", "aria-labelledby": this.heading ? headingId : undefined }, index.h("div", { key: '54685035dc6a2eba2130693961b87fe315023f27', class: "content" }, this.heading && (index.h(HeadingTag.HeadingTag, { key: '1f0b464103fdcbf3b18ab6adf4f82b454e5c81eb', id: headingId, level: this.headingLevel, cssClass: "heading" }, this.heading)), this.preamble && (index.h("div", { key: 'd143480b02ecb45130ac2a825e392dbe7c0f3128', class: "preamble" }, this.preamble)), hasButtons && (index.h("div", { key: 'f618b4b041cf79eac3b67dd6d3c26697e29a72c6', class: "cta", role: "group", "aria-label": this.ctaButtonsLabel }, this.hasPrimaryButton &&
+            this.renderButton({
+                text: this.primaryButtonText,
+                url: this.primaryButtonUrl,
+                iconSvg: this.primaryButtonIconSvg,
+            }, true), this.hasSecondaryButton &&
+            this.renderButton({
+                text: this.secondaryButtonText,
+                url: this.secondaryButtonUrl,
+            }, false)))), index.h("div", { key: 'cb22f2bd663e90bd009fac12d4662c729bffdd68', class: "image-container", "aria-hidden": !this.imageAltText }, this.imageUrl && index.h("img", { key: 'f76f0a6cbdb0cdc8847f062410f7c20c847d8a47', class: "image graphics", src: this.imageUrl, alt: this.imageAltText || '', loading: "lazy" }), !this.imageUrl && this.pnIllustrationSvg && index.h("pn-illustration", { key: '5653434436d33c04820f3ee201fd1e2853008e1b', class: "illustration graphics", illustration: this.pnIllustrationSvg, role: "presentation" })))));
+    }
+};
+PnUspSimple.style = PnUspSimpleStyle0;
+
+exports.pn_usp_simple = PnUspSimple;
+
+//# sourceMappingURL=pn-usp-simple.cjs.entry.js.map

package/cjs/pn-usp-simple.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"pn-usp-simple.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,cAAc,GAAG,25DAA25D,CAAC;AACn7D,0BAAe,cAAc;;MCahB,WAAW;;;;4BAEe,IAAI;;;;;;;;;;;;IAYzC,IAAY,gBAAgB;QAC1B,OAAO,OAAO,CAAC,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,gBAAgB,CAAC,CAAC;KACjE;IAED,IAAY,kBAAkB;QAC5B,OAAO,OAAO,CAAC,IAAI,CAAC,mBAAmB,IAAI,IAAI,CAAC,kBAAkB,CAAC,CAAC;KACrE;IAEO,YAAY,CAAC,KAAkB,EAAE,SAAkB;QACzD,MAAM,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,WAAW,CAAC;QACvD,QACEA,uBACE,IAAI,EAAE,KAAK,CAAC,OAAO,eACR,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,EACjC,IAAI,EAAE,KAAK,CAAC,GAAG,EACf,KAAK,EAAC,KAAK,sBACO,UAAU,EAC5B,UAAU,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,IAE1C,KAAK,CAAC,IAAI,CACD,EACZ;KACH;IAED,MAAM;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,kBAAkB,CAAC;QACpE,MAAM,SAAS,GAAG,aAAa,CAAC;QAEhC,QACEA,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,QAAQ,qBAAkB,IAAI,CAAC,OAAO,GAAG,SAAS,GAAG,SAAS,IAC5FA,kEAAK,KAAK,EAAC,SAAS,IACjB,IAAI,CAAC,OAAO,KACXA,QAACE,qBAAU,qDAAC,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,QAAQ,EAAC,SAAS,IACpE,IAAI,CAAC,OAAO,CACF,CACd,EAEA,IAAI,CAAC,QAAQ,KACZF,kEAAK,KAAK,EAAC,UAAU,IAClB,IAAI,CAAC,QAAQ,CACV,CACP,EAEA,UAAU,KACTA,kEAAK,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,OAAO,gBAAa,IAAI,CAAC,eAAe,IAC3D,IAAI,CAAC,gBAAgB;YACpB,IAAI,CAAC,YAAY,CACf;gBACE,IAAI,EAAE,IAAI,CAAC,iBAAkB;gBAC7B,GAAG,EAAE,IAAI,CAAC,gBAAiB;gBAC3B,OAAO,EAAE,IAAI,CAAC,oBAAoB;aACnC,EACD,IAAI,CACL,EACF,IAAI,CAAC,kBAAkB;YACtB,IAAI,CAAC,YAAY,CACf;gBACE,IAAI,EAAE,IAAI,CAAC,mBAAoB;gBAC/B,GAAG,EAAE,IAAI,CAAC,kBAAmB;aAC9B,EACD,KAAK,CACN,CACC,CACP,CACG,EACNA,kEAAK,KAAK,EAAC,iBAAiB,iBAAc,CAAC,IAAI,CAAC,YAAY,IACzD,IAAI,CAAC,QAAQ,IAAIA,kEAAK,KAAK,EAAC,gBAAgB,EAAC,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,YAAY,IAAI,EAAE,EAAE,OAAO,EAAC,MAAM,GAAG,EAChH,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,iBAAiB,IAAIA,8EAAiB,KAAK,EAAC,uBAAuB,EAAC,YAAY,EAAE,IAAI,CAAC,iBAAiB,EAAE,IAAI,EAAC,cAAc,GAAG,CACpJ,CACF,CACD,EACP;KACH;;;;;;","names":["h","Host","HeadingTag"],"sources":["src/components/widgets/pn-usp-simple/pn-usp-simple.scss?tag=pn-usp-simple","src/components/widgets/pn-usp-simple/pn-usp-simple.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\n:root {\n  --usp-preamble-margin: clamp(1.5rem, 3vw, 1.8rem);\n}\n\n.pn-usp-simple {\n  background: linear-gradient(90deg, $white 0%, $blue25 17.44%);\n  color: $gray900;\n  display: flex;\n  flex-direction: column-reverse;\n  max-width: 100%;\n  padding: clamp(2rem, 5vw, 5rem);\n\n  .heading {\n    font-size: clamp(2rem, 4vw, 3rem);\n    font-weight: 700;\n    margin-bottom: 1rem;\n  }\n\n  .preamble {\n    font-size: clamp(1rem, 4vw, 1.6rem);\n    margin-top: var(--usp-preamble-margin);\n    margin-bottom: var(--usp-preamble-margin);\n  }\n\n  .cta {\n    display: flex;\n    font-size: clamp(1rem, 4vw, 1.6rem);\n    flex-direction: column;\n    gap: clamp(1rem, 4vw, 1.2rem);\n    padding: 0 6rem;\n  }\n\n  .image-container {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-bottom: 2rem;\n\n    .graphics {\n      --pn-width: #{$graphicsWidth} !important;\n      --pn-height: #{$graphicsWidth} !important;\n    }\n\n    .image {\n      border-radius: 50%;\n    }\n  }\n}\n\n@media (min-width: 768px) {\n  .pn-usp-simple {\n    flex-direction: row;\n    align-items: center;\n\n    .content {\n      max-width: 60%;\n    }\n\n    .cta {\n      flex-direction: row;\n      gap: clamp(2rem, 3vw, 3rem);\n      padding: 0;\n    }\n\n    .image-container {\n      flex: clamp(15rem, 3vw, 20rem);\n      margin-bottom: 0;\n\n      .graphics {\n        --pn-width: #{$graphicsWidthMd};\n        --pn-height: #{$graphicsWidthMd};\n      }\n    }\n  }\n}\n\n@media (min-width: 992px) {\n}\n\n@media (min-width: 1200px) {\n  .pn-usp-simple {\n    max-width: 1140px;\n    margin: 0 auto;\n\n    .content {\n      max-width: 50%;\n    }\n\n    .image-container {\n      .graphics {\n        --pn-width: #{$graphicsWidthXl};\n        --pn-height: #{$graphicsWidthXl};\n      }\n    }\n  }\n}\n\n@media (min-width: 1640px) {\n  .pn-usp-simple {\n    max-width: 1400px;\n\n    .image-container {\n      .graphics {\n        --pn-width: #{$graphicsWidthXxl};\n        --pn-height: #{$graphicsWidthXxl};\n      }\n    }\n  }\n}\n","import { HeadingLevel } from '@/components';\nimport { HeadingTag } from '@/globals/HeadingTag';\nimport { Component, Host, Prop, h } from '@stencil/core';\n\ninterface ButtonProps {\n  text: string;\n  url: string;\n  iconSvg?: string;\n}\n\n@Component({\n  tag: 'pn-usp-simple',\n  styleUrl: 'pn-usp-simple.scss',\n})\nexport class PnUspSimple {\n  @Prop() heading?: string;\n  @Prop() headingLevel: HeadingLevel = 'h2';\n  @Prop() preamble?: string;\n  @Prop() ctaButtonsLabel?: string;\n  @Prop() primaryButtonText?: string;\n  @Prop() primaryButtonUrl?: string;\n  @Prop() primaryButtonIconSvg?: string;\n  @Prop() secondaryButtonText?: string;\n  @Prop() secondaryButtonUrl?: string;\n  @Prop() pnIllustrationSvg?: string;\n  @Prop() imageUrl?: string;\n  @Prop() imageAltText?: string;\n\n  private get hasPrimaryButton(): boolean {\n    return Boolean(this.primaryButtonText && this.primaryButtonUrl);\n  }\n\n  private get hasSecondaryButton(): boolean {\n    return Boolean(this.secondaryButtonText && this.secondaryButtonUrl);\n  }\n\n  private renderButton(props: ButtonProps, isPrimary: boolean) {\n    const buttonType = isPrimary ? 'primary' : 'secondary';\n    return (\n      <pn-button\n        icon={props.iconSvg}\n        left-icon={Boolean(props.iconSvg)}\n        href={props.url}\n        class=\"btn\"\n        data-button-type={buttonType}\n        appearance={isPrimary ? 'default' : 'light'}\n      >\n        {props.text}\n      </pn-button>\n    );\n  }\n\n  render() {\n    const hasButtons = this.hasPrimaryButton || this.hasSecondaryButton;\n    const headingId = 'usp-heading';\n\n    return (\n      <Host>\n        <div class=\"pn-usp-simple\" role=\"region\" aria-labelledby={this.heading ? headingId : undefined}>\n          <div class=\"content\">\n            {this.heading && (\n              <HeadingTag id={headingId} level={this.headingLevel} cssClass=\"heading\">\n                {this.heading}\n              </HeadingTag>\n            )}\n\n            {this.preamble && (\n              <div class=\"preamble\">\n                {this.preamble}\n              </div>\n            )}\n\n            {hasButtons && (\n              <div class=\"cta\" role=\"group\" aria-label={this.ctaButtonsLabel}>\n                {this.hasPrimaryButton &&\n                  this.renderButton(\n                    {\n                      text: this.primaryButtonText!,\n                      url: this.primaryButtonUrl!,\n                      iconSvg: this.primaryButtonIconSvg,\n                    },\n                    true,\n                  )}\n                {this.hasSecondaryButton &&\n                  this.renderButton(\n                    {\n                      text: this.secondaryButtonText!,\n                      url: this.secondaryButtonUrl!,\n                    },\n                    false,\n                  )}\n              </div>\n            )}\n          </div>\n          <div class=\"image-container\" aria-hidden={!this.imageAltText}>\n            {this.imageUrl && <img class=\"image graphics\" src={this.imageUrl} alt={this.imageAltText || ''} loading=\"lazy\" />}\n            {!this.imageUrl && this.pnIllustrationSvg && <pn-illustration class=\"illustration graphics\" illustration={this.pnIllustrationSvg} role=\"presentation\" />}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/collection/collection-manifest.json

@@ -69,12 +69,18 @@
     "components/profile/pn-profile-selector/pn-profile-selector-option.js",
     "components/profile/pn-profile-selector/pn-profile-selector.js",
     "components/utilities/pn-breakpoints/pn-breakpoints.js",
+    "components/widgets/pn-chat/pn-chat.js",
+    "components/widgets/pn-chat/pn-chat-message/pn-chat-message.js",
     "components/widgets/pn-find-price/pn-find-price-result.js",
     "components/widgets/pn-find-price/pn-find-price.js",
     "components/widgets/pn-find-service-and-price/pn-find-service-and-price-result.js",
     "components/widgets/pn-find-service-and-price/pn-find-service-and-price.js",
     "components/widgets/pn-hero-block-international/pn-hero-block-international.js",
+    "components/widgets/pn-level-up/pn-level-up.js",
+    "components/widgets/pn-level-up/pn-level-up-modal/pn-level-up-modal.js",
     "components/widgets/pn-link-list/pn-link-list.js",
+    "components/widgets/pn-marketweb-carousel/pn-marketweb-carousel.js",
+    "components/widgets/pn-marketweb-table/pn-marketweb-table.js",
     "components/widgets/pn-pex-pricefinder/pn-pex-pricefinder.js",
     "components/widgets/pn-product-card/pn-product-card-info.js",
     "components/widgets/pn-product-card/pn-product-card-price.js",
@@ -91,7 +97,10 @@
     "components/widgets/pn-proxio-productcard/pn-proxio-productcard-information.js",
     "components/widgets/pn-proxio-productcard/pn-proxio-productcard-pricelink.js",
     "components/widgets/pn-proxio-productcard/pn-proxio-productcard.js",
-    "components/widgets/pn-usp-promoter/pn-usp-promoter.js"
+    "components/widgets/pn-qr-code-generator/pn-qr-code-generator.js",
+    "components/widgets/pn-search/pn-search.js",
+    "components/widgets/pn-usp-promoter/pn-usp-promoter.js",
+    "components/widgets/pn-usp-simple/pn-usp-simple.js"
   ],
   "compiler": {
     "name": "@stencil/core",

package/collection/components/animation/pn-animated-tile/pn-animated-tile.css

@@ -2,6 +2,31 @@ 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-animated-tile .pn-animated-tile__container {
   position: relative;
   border-radius: 2.4rem;

package/collection/components/animation/pn-play-on-scroll/pn-video-overlay/pn-video-overlay.css

@@ -2,6 +2,31 @@ 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-video-overlay.pn-video-overlay--show-overlay {
   position: absolute;
   width: 100%;

package/collection/components/cards/pn-quote-card/pn-line-shape/pn-line-shape.css

@@ -2,6 +2,31 @@ 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-line-shape .pn-line-shape__container {
   display: flex;
 }