@postnord/pn-marketweb-components 3.0.3 → 3.0.4

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

@@ -1 +1 @@
-{"file":"pn-teaser-card.entry.js","mappings":";;AAAA,MAAM,eAAe,GAAG,g0RAAg0R,CAAC;AACz1R,2BAAe,eAAe;;MCKjB,YAAY;;;;QASvB,oBAAe,GAAG,MAAA,IAAI,CAAC,KAAK,0CAAE,WAAW,EAAE,CAAC;oBANrB,IAAI;uBACD,IAAI;qBACL,IAAI;6BACoB,OAAO;iCACH,MAAM;iCAIrB,KAAK;mCACH,IAAI;;IAE5C,iBAAiB;QACf,IAAI,CAAC,iBAAiB,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;QAC1E,IAAI,CAAC,mBAAmB,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;KACtF;;IAGD,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,6DAAM,IAAI,EAAC,yBAAyB,GAAG,EACvC,4DAAK,KAAK,EAAC,2BAA2B,IACpC,4DAAK,KAAK,EAAE,+CAA+C,CAAC,IAAI,CAAC,mBAAmB,GAAG,uDAAuD,GAAG,EAAE,EAAE,IACnJ,6DAAM,IAAI,EAAC,cAAc,GAAG,CACxB,EACN,4DAAK,KAAK,EAAC,oCAAoC,IAC7C,4DAAK,KAAK,EAAC,qDAAqD,IAC7D,IAAI,CAAC,eAAe,IAAI,6DAAM,KAAK,EAAC,4DAA4D,IAAE,IAAI,CAAC,eAAe,CAAQ,EAC/H,2DAAI,KAAK,EAAC,8DAA8D,IAAE,IAAI,CAAC,OAAO,CAAM,EAC5F,0DAAG,KAAK,EAAC,+DAA+D,IAAE,IAAI,CAAC,IAAI,CAAK,CACpF,EACL,IAAI,CAAC,iBAAiB,KACrB,4DAAK,KAAK,EAAC,yCAAyC,IAClD,6DAAM,IAAI,EAAC,KAAK,GAAG,CACf,CACP,CACG,CACF,CACD,EACP;KACH;;;;;;;","names":[],"sources":["src/components/cards/pn-teaser-card/pn-teaser-card.scss?tag=pn-teaser-card","src/components/cards/pn-teaser-card/pn-teaser-card.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\n$teaser-card-media-tablet: 768px; // 768px\n$teaser-card-media-desktop: 1200px; //1200px\n$teaser-card-media-large-desktop: 1640px; //1640\n\n//making pn wrapping link clickable over card image\n.block.teasercardblock {\n  a[data-block-clickable-link='true'] {\n    z-index: 1;\n  }\n}\n\n//mobile first\npn-teaser-card {\n  width: 100%;\n  height: 100%;\n  display: flex;\n\n  .pn-teaser-card__container {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    border-radius: 2.4rem;\n    width: 100%;\n  }\n\n  .pn-teaser-card__container__image__container {\n    width: 100%;\n    position: relative;\n\n    & > [slot='illustration'] {\n      clip-path: ellipse(100% 90% at 50% 0%);\n      height: 100%;\n      overflow: hidden;\n      border-top-left-radius: 2.4rem;\n      border-top-right-radius: 2.4rem;\n\n      & > picture > img {\n        width: 100%;\n        height: auto;\n        transition: 0.4s ease-in-out;\n        transform: scale(1);\n        aspect-ratio: 16/9;\n        object-fit: cover;\n        object-position: 50% 0;\n      }\n    }\n  }\n\n  .pn-teaser-card__container__content {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    flex: 1 1 100%;\n    gap: 3.2rem;\n    padding: 2.4rem 2.4rem;\n    padding-top: 0;\n  }\n\n  .pn-teaser-card__container__content__text__container__heading {\n    font-weight: 700;\n    font-size: 2.4rem;\n    line-height: 2.64rem;\n    margin-bottom: 0;\n  }\n\n  .pn-teaser-card__container__content__text__container__preamble {\n    padding-top: 1.6rem;\n    font-weight: 400;\n    font-size: 1.6rem;\n    line-height: 2.24rem;\n    margin-bottom: 0;\n  }\n\n  .pn-teaser-card__container__content__text__container__label {\n    display: block;\n    margin-bottom: 1.6rem;\n    font-weight: 400;\n    font-size: 1.2rem;\n    line-height: 140%;\n  }\n\n  .pn-teaser-card__container__content__cta {\n    & > pn-button {\n      align-self: flex-end;\n      width: 100%;\n\n      & a:hover {\n        text-decoration: none;\n      }\n\n      & > button,\n      & > a {\n        & > .pn-button-bg {\n          transition: 0.4s ease-in-out;\n        }\n      }\n\n      @media screen and (min-width: $teaser-card-media-tablet) {\n        width: fit-content;\n      }\n    }\n\n    .secondary-link--animated {\n      font-weight: 500;\n      font-size: 1.6rem;\n      text-decoration: none;\n      color: $blue700;\n\n      pn-icon svg {\n        transition: 0.3s ease-in-out;\n        position: relative;\n        left: -0.3rem;\n\n        path {\n          fill: $blue700;\n        }\n      }\n\n      &[target='_blank']:not(.pn-button):after {\n        display: none;\n      }\n    }\n  }\n}\n\n//colors\npn-teaser-card[data-card-color='coral'] {\n  & > .pn-teaser-card__container {\n    background-color: $coral50;\n  }\n}\n\npn-teaser-card[data-card-color='green'] {\n  & > .pn-teaser-card__container {\n    background-color: $green50;\n  }\n}\n\npn-teaser-card[data-card-color='blue'] {\n  & > .pn-teaser-card__container {\n    background-color: $blue25;\n  }\n}\n\npn-teaser-card[data-card-color='blue50'] {\n  & > .pn-teaser-card__container {\n    background-color: $blue50;\n  }\n}\n\npn-teaser-card[data-card-color='blue400'] {\n  & > .pn-teaser-card__container {\n    background-color: $blue400;\n\n    .pn-teaser-card__container__content__text__container__label,\n    .pn-teaser-card__container__content__text__container__heading,\n    .pn-teaser-card__container__content__text__container__preamble,\n    .pn-teaser-card__container__content__cta .secondary-link--animated {\n      color: $white;\n    }\n\n    .secondary-link--animated {\n      & > pn-icon > svg > path {\n        fill: $white;\n      }\n    }\n  }\n}\n\npn-teaser-card[data-card-color='blue900'] {\n  & > .pn-teaser-card__container {\n    background-color: $blue900;\n    .pn-teaser-card__container__content__text__container__heading {\n      color: $coral400;\n    }\n\n    .pn-teaser-card__container__content__text__container__label,\n    .pn-teaser-card__container__content__text__container__preamble,\n    .pn-teaser-card__container__content__cta .secondary-link--animated {\n      color: $white;\n    }\n\n    .secondary-link--animated {\n      & > pn-icon > svg > path {\n        fill: $white;\n      }\n    }\n  }\n}\n\npn-teaser-card[data-card-color='white'] {\n  & > .pn-teaser-card__container {\n    background-color: $white;\n  }\n}\n\n//color override when in a listblock\n.teasercardlistblock {\n  .teasercardblock.has-bg {\n    background-color: transparent;\n    background: transparent;\n  }\n}\n\n// variants\n\n.onequarterwidth {\n  .pn-teaser-card__container__content__text__container__label {\n    @media screen and (min-width: $teaser-card-media-desktop) {\n      margin-bottom: 0.8rem;\n    }\n  }\n}\n\n.onethirdwidth,\n.onequarterwidth {\n  & > pn-teaser-card {\n    .pn-teaser-card__container__image__container--no-image {\n      padding-top: 2.4rem;\n    }\n  }\n\n  .pn-teaser-card__container__content__cta {\n    .secondary-link--animated {\n      font-weight: 400;\n    }\n  }\n}\n\n.halfwidth {\n  & > pn-teaser-card {\n    .pn-teaser-card__container__content__cta {\n      .secondary-link--animated {\n        font-weight: 400;\n      }\n    }\n\n    .pn-teaser-card__container__image__container--no-image {\n      padding-top: 2.4rem;\n    }\n\n    @media screen and (min-width: 992px) {\n      .pn-teaser-card__container__content__cta {\n        .secondary-link--animated {\n          font-weight: 500;\n        }\n      }\n    }\n\n    @media screen and (min-width: $teaser-card-media-desktop) {\n      .pn-teaser-card__container__image__container--no-image {\n        padding-top: 4rem;\n      }\n\n      .pn-teaser-card__container__content {\n        padding: 0 4rem 4rem;\n      }\n\n      .pn-teaser-card__container__content__text__container__heading {\n        font-weight: 700;\n        font-size: 3.2rem;\n        line-height: 3.52rem;\n      }\n\n      .pn-teaser-card__container__content__text__container__preamble {\n        font-weight: 400;\n        font-size: 2rem;\n        line-height: 2.8rem;\n      }\n    }\n\n    @media screen and (min-width: $teaser-card-media-large-desktop) {\n      .pn-teaser-card__container__image__container--no-image {\n        padding-top: 5.6rem;\n      }\n\n      .pn-teaser-card__container__content {\n        padding: 0 5.6rem 5.6rem;\n      }\n    }\n  }\n}\n\n.fullwidth {\n  & > pn-teaser-card {\n    .pn-teaser-card__container__content__cta {\n      .secondary-link--animated {\n        font-weight: 400;\n      }\n    }\n\n    .pn-teaser-card__container__image__container--no-image {\n      width: auto;\n      padding-top: 2.4rem;\n    }\n\n    @media screen and (min-width: $teaser-card-media-tablet) {\n      min-height: 35rem;\n\n      .pn-teaser-card__container__content__cta {\n        .secondary-link--animated {\n          font-weight: 500;\n        }\n      }\n\n      .pn-teaser-card__container {\n        flex-direction: row;\n      }\n\n      .pn-teaser-card__container__content {\n        align-self: center;\n        gap: 2.4rem;\n        padding: 3.2rem 3.2rem 3.2rem 2.4rem;\n      }\n\n      .pn-teaser-card__container__image__container {\n        & > [slot='illustration'] {\n          border-top-left-radius: 2.4rem;\n          border-bottom-left-radius: 2.4rem;\n          clip-path: ellipse(100% 100% at 0% 50%);\n\n          & > picture > img {\n            height: 100%;\n            object-fit: cover;\n          }\n        }\n      }\n    }\n\n    @media screen and (min-width: $teaser-card-media-desktop) {\n      min-height: 52rem;\n\n      .pn-teaser-card__container__content {\n        padding: 4rem 4rem 4rem 3.2rem;\n      }\n\n      .pn-teaser-card__container__content__text__container__heading {\n        font-weight: 700;\n        font-size: 4.8rem;\n        line-height: 5.28rem;\n      }\n\n      .pn-teaser-card__container__content__text__container__preamble {\n        font-size: 2rem;\n        line-height: 2.8rem;\n      }\n    }\n  }\n\n  pn-teaser-card[data-card-alignment='right'] {\n    @media screen and (min-width: $teaser-card-media-tablet) {\n      .pn-teaser-card__container {\n        flex-direction: row-reverse;\n      }\n\n      .pn-teaser-card__container__content {\n        padding: 3.2rem 2.4rem 3.2rem 3.2rem;\n      }\n\n      .pn-teaser-card__container__image__container {\n        & > [slot='illustration'] {\n          border-bottom-right-radius: 2.4rem;\n          clip-path: ellipse(100% 100% at 100% 50%);\n        }\n      }\n    }\n\n    @media screen and (min-width: $teaser-card-media-desktop) {\n      .pn-teaser-card__container__content {\n        padding: 4rem 3.2rem 4rem 4rem;\n      }\n    }\n  }\n}\n\n//effect class\npn-teaser-card.teaser-card--hover-effect {\n  &:hover {\n    cursor: pointer;\n    .pn-teaser-card__container__image__container {\n      & [slot='illustration'] {\n        & picture > img {\n          transform: scale(1.02);\n          filter: brightness(0.85);\n        }\n      }\n    }\n\n    .secondary-link--animated {\n      text-decoration: underline;\n\n      pn-icon svg {\n        left: 0;\n      }\n    }\n\n    pn-button {\n      button,\n      a {\n        .pn-button-bg {\n          background-color: $blue900;\n        }\n      }\n    }\n\n    &[data-card-color='blue900'] {\n      pn-button {\n        button,\n        a {\n          .pn-button-bg {\n            background-color: $blue400;\n          }\n        }\n      }\n    }\n  }\n}\n","import { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\n@Component({\n  tag: 'pn-teaser-card',\n  styleUrl: 'pn-teaser-card.scss',\n})\nexport class PnTeaserCard {\n  @Element() hostElement: HTMLElement;\n  //props\n  @Prop() text: string = null;\n  @Prop() heading: string = null;\n  @Prop() label?: string = null;\n  @Prop({ reflect: true }) dataCardColor: string = 'coral';\n  @Prop({ reflect: true }) dataCardAlignment: string = 'left';\n\n  labelToCapitals = this.label?.toUpperCase();\n\n  @State() hasCtaSlotContent: boolean = false;\n  @State() hasIllustrationSlot: boolean = true;\n\n  componentWillLoad() {\n    this.hasCtaSlotContent = !!this.hostElement.querySelector('[slot=\"cta\"]');\n    this.hasIllustrationSlot = !!this.hostElement.querySelector('[slot=\"illustration\"]');\n  }\n\n  //render\n  render() {\n    return (\n      <Host>\n        <slot name=\"clickable-block-wrapper\" />\n        <div class=\"pn-teaser-card__container\">\n          <div class={`pn-teaser-card__container__image__container ${!this.hasIllustrationSlot ? 'pn-teaser-card__container__image__container--no-image' : ''}`}>\n            <slot name=\"illustration\" />\n          </div>\n          <div class=\"pn-teaser-card__container__content\">\n            <div class=\"pn-teaser-card__container__content__text__container\">\n              {this.labelToCapitals && <span class=\"pn-teaser-card__container__content__text__container__label\">{this.labelToCapitals}</span>}\n              <h2 class=\"pn-teaser-card__container__content__text__container__heading\">{this.heading}</h2>\n              <p class=\"pn-teaser-card__container__content__text__container__preamble\">{this.text}</p>\n            </div>\n            {this.hasCtaSlotContent && (\n              <div class=\"pn-teaser-card__container__content__cta\">\n                <slot name=\"cta\" />\n              </div>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pn-teaser-card.entry.js","mappings":";;AAAA,MAAM,eAAe,GAAG,g0RAAg0R,CAAC;AACz1R,2BAAe,eAAe;;MCKjB,YAAY;;;oBAGA,IAAI;uBACD,IAAI;qBACL,IAAI;6BACoB,OAAO;iCACH,MAAM;iCAIrB,KAAK;mCACH,IAAI;;;IAH5C,eAAe,GAAG,IAAI,CAAC,KAAK,EAAE,WAAW,EAAE,CAAC;IAK5C,iBAAiB;QACf,IAAI,CAAC,iBAAiB,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;QAC1E,IAAI,CAAC,mBAAmB,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;KACtF;;IAGD,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,6DAAM,IAAI,EAAC,yBAAyB,GAAG,EACvC,4DAAK,KAAK,EAAC,2BAA2B,IACpC,4DAAK,KAAK,EAAE,+CAA+C,CAAC,IAAI,CAAC,mBAAmB,GAAG,uDAAuD,GAAG,EAAE,EAAE,IACnJ,6DAAM,IAAI,EAAC,cAAc,GAAG,CACxB,EACN,4DAAK,KAAK,EAAC,oCAAoC,IAC7C,4DAAK,KAAK,EAAC,qDAAqD,IAC7D,IAAI,CAAC,eAAe,IAAI,6DAAM,KAAK,EAAC,4DAA4D,IAAE,IAAI,CAAC,eAAe,CAAQ,EAC/H,2DAAI,KAAK,EAAC,8DAA8D,IAAE,IAAI,CAAC,OAAO,CAAM,EAC5F,0DAAG,KAAK,EAAC,+DAA+D,IAAE,IAAI,CAAC,IAAI,CAAK,CACpF,EACL,IAAI,CAAC,iBAAiB,KACrB,4DAAK,KAAK,EAAC,yCAAyC,IAClD,6DAAM,IAAI,EAAC,KAAK,GAAG,CACf,CACP,CACG,CACF,CACD,EACP;KACH;;;;;;","names":[],"sources":["src/components/cards/pn-teaser-card/pn-teaser-card.scss?tag=pn-teaser-card","src/components/cards/pn-teaser-card/pn-teaser-card.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\n$teaser-card-media-tablet: 768px; // 768px\n$teaser-card-media-desktop: 1200px; //1200px\n$teaser-card-media-large-desktop: 1640px; //1640\n\n//making pn wrapping link clickable over card image\n.block.teasercardblock {\n  a[data-block-clickable-link='true'] {\n    z-index: 1;\n  }\n}\n\n//mobile first\npn-teaser-card {\n  width: 100%;\n  height: 100%;\n  display: flex;\n\n  .pn-teaser-card__container {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    border-radius: 2.4rem;\n    width: 100%;\n  }\n\n  .pn-teaser-card__container__image__container {\n    width: 100%;\n    position: relative;\n\n    & > [slot='illustration'] {\n      clip-path: ellipse(100% 90% at 50% 0%);\n      height: 100%;\n      overflow: hidden;\n      border-top-left-radius: 2.4rem;\n      border-top-right-radius: 2.4rem;\n\n      & > picture > img {\n        width: 100%;\n        height: auto;\n        transition: 0.4s ease-in-out;\n        transform: scale(1);\n        aspect-ratio: 16/9;\n        object-fit: cover;\n        object-position: 50% 0;\n      }\n    }\n  }\n\n  .pn-teaser-card__container__content {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    flex: 1 1 100%;\n    gap: 3.2rem;\n    padding: 2.4rem 2.4rem;\n    padding-top: 0;\n  }\n\n  .pn-teaser-card__container__content__text__container__heading {\n    font-weight: 700;\n    font-size: 2.4rem;\n    line-height: 2.64rem;\n    margin-bottom: 0;\n  }\n\n  .pn-teaser-card__container__content__text__container__preamble {\n    padding-top: 1.6rem;\n    font-weight: 400;\n    font-size: 1.6rem;\n    line-height: 2.24rem;\n    margin-bottom: 0;\n  }\n\n  .pn-teaser-card__container__content__text__container__label {\n    display: block;\n    margin-bottom: 1.6rem;\n    font-weight: 400;\n    font-size: 1.2rem;\n    line-height: 140%;\n  }\n\n  .pn-teaser-card__container__content__cta {\n    & > pn-button {\n      align-self: flex-end;\n      width: 100%;\n\n      & a:hover {\n        text-decoration: none;\n      }\n\n      & > button,\n      & > a {\n        & > .pn-button-bg {\n          transition: 0.4s ease-in-out;\n        }\n      }\n\n      @media screen and (min-width: $teaser-card-media-tablet) {\n        width: fit-content;\n      }\n    }\n\n    .secondary-link--animated {\n      font-weight: 500;\n      font-size: 1.6rem;\n      text-decoration: none;\n      color: $blue700;\n\n      pn-icon svg {\n        transition: 0.3s ease-in-out;\n        position: relative;\n        left: -0.3rem;\n\n        path {\n          fill: $blue700;\n        }\n      }\n\n      &[target='_blank']:not(.pn-button):after {\n        display: none;\n      }\n    }\n  }\n}\n\n//colors\npn-teaser-card[data-card-color='coral'] {\n  & > .pn-teaser-card__container {\n    background-color: $coral50;\n  }\n}\n\npn-teaser-card[data-card-color='green'] {\n  & > .pn-teaser-card__container {\n    background-color: $green50;\n  }\n}\n\npn-teaser-card[data-card-color='blue'] {\n  & > .pn-teaser-card__container {\n    background-color: $blue25;\n  }\n}\n\npn-teaser-card[data-card-color='blue50'] {\n  & > .pn-teaser-card__container {\n    background-color: $blue50;\n  }\n}\n\npn-teaser-card[data-card-color='blue400'] {\n  & > .pn-teaser-card__container {\n    background-color: $blue400;\n\n    .pn-teaser-card__container__content__text__container__label,\n    .pn-teaser-card__container__content__text__container__heading,\n    .pn-teaser-card__container__content__text__container__preamble,\n    .pn-teaser-card__container__content__cta .secondary-link--animated {\n      color: $white;\n    }\n\n    .secondary-link--animated {\n      & > pn-icon > svg > path {\n        fill: $white;\n      }\n    }\n  }\n}\n\npn-teaser-card[data-card-color='blue900'] {\n  & > .pn-teaser-card__container {\n    background-color: $blue900;\n    .pn-teaser-card__container__content__text__container__heading {\n      color: $coral400;\n    }\n\n    .pn-teaser-card__container__content__text__container__label,\n    .pn-teaser-card__container__content__text__container__preamble,\n    .pn-teaser-card__container__content__cta .secondary-link--animated {\n      color: $white;\n    }\n\n    .secondary-link--animated {\n      & > pn-icon > svg > path {\n        fill: $white;\n      }\n    }\n  }\n}\n\npn-teaser-card[data-card-color='white'] {\n  & > .pn-teaser-card__container {\n    background-color: $white;\n  }\n}\n\n//color override when in a listblock\n.teasercardlistblock {\n  .teasercardblock.has-bg {\n    background-color: transparent;\n    background: transparent;\n  }\n}\n\n// variants\n\n.onequarterwidth {\n  .pn-teaser-card__container__content__text__container__label {\n    @media screen and (min-width: $teaser-card-media-desktop) {\n      margin-bottom: 0.8rem;\n    }\n  }\n}\n\n.onethirdwidth,\n.onequarterwidth {\n  & > pn-teaser-card {\n    .pn-teaser-card__container__image__container--no-image {\n      padding-top: 2.4rem;\n    }\n  }\n\n  .pn-teaser-card__container__content__cta {\n    .secondary-link--animated {\n      font-weight: 400;\n    }\n  }\n}\n\n.halfwidth {\n  & > pn-teaser-card {\n    .pn-teaser-card__container__content__cta {\n      .secondary-link--animated {\n        font-weight: 400;\n      }\n    }\n\n    .pn-teaser-card__container__image__container--no-image {\n      padding-top: 2.4rem;\n    }\n\n    @media screen and (min-width: 992px) {\n      .pn-teaser-card__container__content__cta {\n        .secondary-link--animated {\n          font-weight: 500;\n        }\n      }\n    }\n\n    @media screen and (min-width: $teaser-card-media-desktop) {\n      .pn-teaser-card__container__image__container--no-image {\n        padding-top: 4rem;\n      }\n\n      .pn-teaser-card__container__content {\n        padding: 0 4rem 4rem;\n      }\n\n      .pn-teaser-card__container__content__text__container__heading {\n        font-weight: 700;\n        font-size: 3.2rem;\n        line-height: 3.52rem;\n      }\n\n      .pn-teaser-card__container__content__text__container__preamble {\n        font-weight: 400;\n        font-size: 2rem;\n        line-height: 2.8rem;\n      }\n    }\n\n    @media screen and (min-width: $teaser-card-media-large-desktop) {\n      .pn-teaser-card__container__image__container--no-image {\n        padding-top: 5.6rem;\n      }\n\n      .pn-teaser-card__container__content {\n        padding: 0 5.6rem 5.6rem;\n      }\n    }\n  }\n}\n\n.fullwidth {\n  & > pn-teaser-card {\n    .pn-teaser-card__container__content__cta {\n      .secondary-link--animated {\n        font-weight: 400;\n      }\n    }\n\n    .pn-teaser-card__container__image__container--no-image {\n      width: auto;\n      padding-top: 2.4rem;\n    }\n\n    @media screen and (min-width: $teaser-card-media-tablet) {\n      min-height: 35rem;\n\n      .pn-teaser-card__container__content__cta {\n        .secondary-link--animated {\n          font-weight: 500;\n        }\n      }\n\n      .pn-teaser-card__container {\n        flex-direction: row;\n      }\n\n      .pn-teaser-card__container__content {\n        align-self: center;\n        gap: 2.4rem;\n        padding: 3.2rem 3.2rem 3.2rem 2.4rem;\n      }\n\n      .pn-teaser-card__container__image__container {\n        & > [slot='illustration'] {\n          border-top-left-radius: 2.4rem;\n          border-bottom-left-radius: 2.4rem;\n          clip-path: ellipse(100% 100% at 0% 50%);\n\n          & > picture > img {\n            height: 100%;\n            object-fit: cover;\n          }\n        }\n      }\n    }\n\n    @media screen and (min-width: $teaser-card-media-desktop) {\n      min-height: 52rem;\n\n      .pn-teaser-card__container__content {\n        padding: 4rem 4rem 4rem 3.2rem;\n      }\n\n      .pn-teaser-card__container__content__text__container__heading {\n        font-weight: 700;\n        font-size: 4.8rem;\n        line-height: 5.28rem;\n      }\n\n      .pn-teaser-card__container__content__text__container__preamble {\n        font-size: 2rem;\n        line-height: 2.8rem;\n      }\n    }\n  }\n\n  pn-teaser-card[data-card-alignment='right'] {\n    @media screen and (min-width: $teaser-card-media-tablet) {\n      .pn-teaser-card__container {\n        flex-direction: row-reverse;\n      }\n\n      .pn-teaser-card__container__content {\n        padding: 3.2rem 2.4rem 3.2rem 3.2rem;\n      }\n\n      .pn-teaser-card__container__image__container {\n        & > [slot='illustration'] {\n          border-bottom-right-radius: 2.4rem;\n          clip-path: ellipse(100% 100% at 100% 50%);\n        }\n      }\n    }\n\n    @media screen and (min-width: $teaser-card-media-desktop) {\n      .pn-teaser-card__container__content {\n        padding: 4rem 3.2rem 4rem 4rem;\n      }\n    }\n  }\n}\n\n//effect class\npn-teaser-card.teaser-card--hover-effect {\n  &:hover {\n    cursor: pointer;\n    .pn-teaser-card__container__image__container {\n      & [slot='illustration'] {\n        & picture > img {\n          transform: scale(1.02);\n          filter: brightness(0.85);\n        }\n      }\n    }\n\n    .secondary-link--animated {\n      text-decoration: underline;\n\n      pn-icon svg {\n        left: 0;\n      }\n    }\n\n    pn-button {\n      button,\n      a {\n        .pn-button-bg {\n          background-color: $blue900;\n        }\n      }\n    }\n\n    &[data-card-color='blue900'] {\n      pn-button {\n        button,\n        a {\n          .pn-button-bg {\n            background-color: $blue400;\n          }\n        }\n      }\n    }\n  }\n}\n","import { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\n@Component({\n  tag: 'pn-teaser-card',\n  styleUrl: 'pn-teaser-card.scss',\n})\nexport class PnTeaserCard {\n  @Element() hostElement: HTMLElement;\n  //props\n  @Prop() text: string = null;\n  @Prop() heading: string = null;\n  @Prop() label?: string = null;\n  @Prop({ reflect: true }) dataCardColor: string = 'coral';\n  @Prop({ reflect: true }) dataCardAlignment: string = 'left';\n\n  labelToCapitals = this.label?.toUpperCase();\n\n  @State() hasCtaSlotContent: boolean = false;\n  @State() hasIllustrationSlot: boolean = true;\n\n  componentWillLoad() {\n    this.hasCtaSlotContent = !!this.hostElement.querySelector('[slot=\"cta\"]');\n    this.hasIllustrationSlot = !!this.hostElement.querySelector('[slot=\"illustration\"]');\n  }\n\n  //render\n  render() {\n    return (\n      <Host>\n        <slot name=\"clickable-block-wrapper\" />\n        <div class=\"pn-teaser-card__container\">\n          <div class={`pn-teaser-card__container__image__container ${!this.hasIllustrationSlot ? 'pn-teaser-card__container__image__container--no-image' : ''}`}>\n            <slot name=\"illustration\" />\n          </div>\n          <div class=\"pn-teaser-card__container__content\">\n            <div class=\"pn-teaser-card__container__content__text__container\">\n              {this.labelToCapitals && <span class=\"pn-teaser-card__container__content__text__container__label\">{this.labelToCapitals}</span>}\n              <h2 class=\"pn-teaser-card__container__content__text__container__heading\">{this.heading}</h2>\n              <p class=\"pn-teaser-card__container__content__text__container__preamble\">{this.text}</p>\n            </div>\n            {this.hasCtaSlotContent && (\n              <div class=\"pn-teaser-card__container__content__cta\">\n                <slot name=\"cta\" />\n              </div>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/esm/pn-titletag.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, d as Host, g as getElement } from './index-fa51bde4.js';
+import { r as registerInstance, g as getElement, h, d as Host } from './index-fa51bde4.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 PnTitletagStyle0 = pnTitletagCss;
@@ -9,10 +9,10 @@ const PnTiletag = class {
         this.icon = null;
         this.color = 'green700';
     }
+    get hostElement() { return getElement(this); }
     render() {
         return (h(Host, { key: '5bbfd9957602bef0ef9c38d911b1eb3cd977d3d5' }, h("slot", { key: '59678c4d10fb45c1c341bb2545e69bd0d7443a77' }), this.icon ? h("pn-icon", { icon: this.icon, small: "false", color: this.color }) : null));
     }
-    get hostElement() { return getElement(this); }
 };
 PnTiletag.style = PnTitletagStyle0;
 

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

@@ -1 +1 @@
-{"file":"pn-titletag.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,6tBAA6tB,CAAC;AACpvB,yBAAe,aAAa;;MCKf,SAAS;;;oBAEG,IAAI;qBAG6B,UAAU;;IAIlE,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,8DAAQ,EACP,IAAI,CAAC,IAAI,GAAG,eAAS,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,OAAO,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,GAAY,GAAG,IAAI,CACpF,EACP;KACH;;;;;;;","names":[],"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.js","mappings":";;AAAA,MAAM,aAAa,GAAG,6tBAA6tB,CAAC;AACpvB,yBAAe,aAAa;;MCKf,SAAS;;;oBAEG,IAAI;qBAG6B,UAAU;;;IAIlE,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,8DAAQ,EACP,IAAI,CAAC,IAAI,GAAG,eAAS,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,OAAO,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,GAAY,GAAG,IAAI,CACpF,EACP;KACH;;;;;;","names":[],"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/esm/pn-usp-promoter.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, d as Host, g as getElement } from './index-fa51bde4.js';
+import { r as registerInstance, g as getElement, h, d as Host } from './index-fa51bde4.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=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;
@@ -14,6 +14,7 @@ const PnUspPromoter = class {
         this.rightAlign = false;
         this.hideMobileImage = false;
     }
+    get hostElement() { return getElement(this); }
     centerMobileContent() {
         const slot = this.hostElement.querySelector('[slot="illustration"]');
         if (this.hideMobileImage || slot == null) {
@@ -31,7 +32,6 @@ const PnUspPromoter = class {
         const hasHeadingExtension = this.headingExtension ? "usp-promoter__heading-extension" : "";
         return (h(Host, { key: '8974befbef406ab8ec5487b26d639c3029ca3c28' }, h("div", { key: '376ab3f6277b3275166a03da05556de80401f741', class: ` ${classes} ${this.centerMobileContent()}`, style: { 'background': `${this.backgroundGradient}` } }, h("div", { key: 'eca02253ebcadb30f15521007faf078145e26584', class: "usp-promoter__content" }, h("slot", { key: 'ab1816f4edc0f7a13d2ff80ed6b494b88475892a', name: "illustration" }), h("div", { key: 'eb351fd5e6493d33ec236125a45f3d3d4db94ce1', class: "usp-promoter__content-wrapper" }, h("h2", { key: 'f407944ee01af230a02c38555c3aef9344bd2aca', class: `usp-promoter__content-heading ${hasHeadingExtension}` }, h("span", { key: '5061991946b31aab88c2ef846b1f32325a5689b9' }, this.heading), this.headingExtension ? h("span", null, this.headingExtension) : null), h("p", { key: '89e3a84910fe0eaa5490628228548be16db8f049', class: "usp-promoter__content-text" }, this.bodyText), h("slot", { key: 'f743a7618e9dd439af7267615217b7feff2281df', name: "app-store" }), h("slot", { key: '6784ae05d8ef3ac0882472241a25822a345eea92', name: "usp-buttons" }))))));
     }
-    get hostElement() { return getElement(this); }
 };
 PnUspPromoter.style = PnUspPromoterStyle0;
 

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

@@ -1 +1 @@
-{"file":"pn-usp-promoter.entry.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,o7JAAo7J,CAAC;AAC98J,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,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,IAAI,OAAO,IAAI,IAAI,CAAC,mBAAmB,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC,kBAAkB,EAAE,EAAE,IAC5G,4DAAK,KAAK,EAAC,uBAAuB,IAChC,6DAAM,IAAI,EAAC,cAAc,GAAQ,EACjC,4DAAK,KAAK,EAAC,+BAA+B,IACxC,2DAAI,KAAK,EAAE,iCAAiC,mBAAmB,EAAE,IAC/D,+DAAO,IAAI,CAAC,OAAO,CAAQ,EAC1B,IAAI,CAAC,gBAAgB,GAAG,gBAAO,IAAI,CAAC,gBAAgB,CAAQ,GAAG,IAAI,CACjE,EACL,0DAAG,KAAK,EAAC,4BAA4B,IAAE,IAAI,CAAC,QAAQ,CAAK,EACzD,6DAAM,IAAI,EAAC,WAAW,GAAQ,EAC9B,6DAAM,IAAI,EAAC,aAAa,GAAQ,CAC5B,CACF,CACF,CACD,EACP;KACH;;;;;;;","names":[],"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: 768px) {\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: 768px) {\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: 768px) {\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:768px) {\n      font-size: 4.2rem;\n    }\n\n    @media screen and (min-width:1140px) {\n      font-size: 4.8rem;\n    }\n\n    @media screen and (min-width:1440px) {\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:768px){\n      text-wrap: balance;\n    }\n\n    @media screen and (min-width:1140px) {\n      font-size: 1.8rem;\n      max-width: 60rem;\n    }\n\n    @media screen and (min-width:1440px) {\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  }\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: 768px) {\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: 768px) {\n      display: block;\n    }\n\n    & picture img {\n      max-width: 100%;\n\n      @media screen and (min-width: 1140px) {\n        width: 32rem;\n      }\n\n      @media screen and (min-width: 1440px) {\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: 768px) {\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: 768px) {\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: 768px) {\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}\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.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,o7JAAo7J,CAAC;AAC98J,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,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,IAAI,OAAO,IAAI,IAAI,CAAC,mBAAmB,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC,kBAAkB,EAAE,EAAE,IAC5G,4DAAK,KAAK,EAAC,uBAAuB,IAChC,6DAAM,IAAI,EAAC,cAAc,GAAQ,EACjC,4DAAK,KAAK,EAAC,+BAA+B,IACxC,2DAAI,KAAK,EAAE,iCAAiC,mBAAmB,EAAE,IAC/D,+DAAO,IAAI,CAAC,OAAO,CAAQ,EAC1B,IAAI,CAAC,gBAAgB,GAAG,gBAAO,IAAI,CAAC,gBAAgB,CAAQ,GAAG,IAAI,CACjE,EACL,0DAAG,KAAK,EAAC,4BAA4B,IAAE,IAAI,CAAC,QAAQ,CAAK,EACzD,6DAAM,IAAI,EAAC,WAAW,GAAQ,EAC9B,6DAAM,IAAI,EAAC,aAAa,GAAQ,CAC5B,CACF,CACF,CACD,EACP;KACH;;;;;;","names":[],"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: 768px) {\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: 768px) {\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: 768px) {\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:768px) {\n      font-size: 4.2rem;\n    }\n\n    @media screen and (min-width:1140px) {\n      font-size: 4.8rem;\n    }\n\n    @media screen and (min-width:1440px) {\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:768px){\n      text-wrap: balance;\n    }\n\n    @media screen and (min-width:1140px) {\n      font-size: 1.8rem;\n      max-width: 60rem;\n    }\n\n    @media screen and (min-width:1440px) {\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  }\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: 768px) {\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: 768px) {\n      display: block;\n    }\n\n    & picture img {\n      max-width: 100%;\n\n      @media screen and (min-width: 1140px) {\n        width: 32rem;\n      }\n\n      @media screen and (min-width: 1440px) {\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: 768px) {\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: 768px) {\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: 768px) {\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}\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/package.json

@@ -1,13 +1,12 @@
 {
   "name": "@postnord/pn-marketweb-components",
-  "version": "3.0.3",
+  "version": "3.0.4",
   "description": "PostNord Market Websites Components",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
   "main": "./index.cjs.js",
   "module": "./index.js",
-  "es2015": "./esm/index.mjs",
   "es2017": "./esm/index.mjs",
   "types": "./types/index.d.ts",
   "collection": "./collection/collection-manifest.json",

package/pn-market-web-components/{p-8ca34ec3.entry.js → p-0247c553.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,h as a,d as t,g as n}from"./p-06555615.js";const r="pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.block.teasercardblock a[data-block-clickable-link=true]{z-index:1}pn-teaser-card{width:100%;height:100%;display:flex}pn-teaser-card .pn-teaser-card__container{display:flex;flex-direction:column;justify-content:flex-start;border-radius:2.4rem;width:100%}pn-teaser-card .pn-teaser-card__container__image__container{width:100%;position:relative}pn-teaser-card .pn-teaser-card__container__image__container>[slot=illustration]{clip-path:ellipse(100% 90% at 50% 0%);height:100%;overflow:hidden;border-top-left-radius:2.4rem;border-top-right-radius:2.4rem}pn-teaser-card .pn-teaser-card__container__image__container>[slot=illustration]>picture>img{width:100%;height:auto;transition:0.4s ease-in-out;transform:scale(1);aspect-ratio:16/9;object-fit:cover;object-position:50% 0}pn-teaser-card .pn-teaser-card__container__content{display:flex;flex-direction:column;justify-content:space-between;flex:1 1 100%;gap:3.2rem;padding:2.4rem 2.4rem;padding-top:0}pn-teaser-card .pn-teaser-card__container__content__text__container__heading{font-weight:700;font-size:2.4rem;line-height:2.64rem;margin-bottom:0}pn-teaser-card .pn-teaser-card__container__content__text__container__preamble{padding-top:1.6rem;font-weight:400;font-size:1.6rem;line-height:2.24rem;margin-bottom:0}pn-teaser-card .pn-teaser-card__container__content__text__container__label{display:block;margin-bottom:1.6rem;font-weight:400;font-size:1.2rem;line-height:140%}pn-teaser-card .pn-teaser-card__container__content__cta>pn-button{align-self:flex-end;width:100%}pn-teaser-card .pn-teaser-card__container__content__cta>pn-button a:hover{text-decoration:none}pn-teaser-card .pn-teaser-card__container__content__cta>pn-button>button>.pn-button-bg,pn-teaser-card .pn-teaser-card__container__content__cta>pn-button>a>.pn-button-bg{transition:0.4s ease-in-out}@media screen and (min-width: 768px){pn-teaser-card .pn-teaser-card__container__content__cta>pn-button{width:fit-content}}pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:500;font-size:1.6rem;text-decoration:none;color:#005d92}pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated pn-icon svg{transition:0.3s ease-in-out;position:relative;left:-0.3rem}pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated pn-icon svg path{fill:#005d92}pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated[target=_blank]:not(.pn-button):after{display:none}pn-teaser-card[data-card-color=coral]>.pn-teaser-card__container{background-color:#fdefee}pn-teaser-card[data-card-color=green]>.pn-teaser-card__container{background-color:#dcf6e7}pn-teaser-card[data-card-color=blue]>.pn-teaser-card__container{background-color:#effbff}pn-teaser-card[data-card-color=blue50]>.pn-teaser-card__container{background-color:#e0f8ff}pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container{background-color:#00a0d6}pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__label,pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__heading,pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__preamble,pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container .pn-teaser-card__container__content__cta .secondary-link--animated{color:#ffffff}pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container .secondary-link--animated>pn-icon>svg>path{fill:#ffffff}pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container{background-color:#0d234b}pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__heading{color:#f06365}pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__label,pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__preamble,pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container .pn-teaser-card__container__content__cta .secondary-link--animated{color:#ffffff}pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container .secondary-link--animated>pn-icon>svg>path{fill:#ffffff}pn-teaser-card[data-card-color=white]>.pn-teaser-card__container{background-color:#ffffff}.teasercardlistblock .teasercardblock.has-bg{background-color:transparent;background:transparent}@media screen and (min-width: 1200px){.onequarterwidth .pn-teaser-card__container__content__text__container__label{margin-bottom:0.8rem}}.onethirdwidth>pn-teaser-card .pn-teaser-card__container__image__container--no-image,.onequarterwidth>pn-teaser-card .pn-teaser-card__container__image__container--no-image{padding-top:2.4rem}.onethirdwidth .pn-teaser-card__container__content__cta .secondary-link--animated,.onequarterwidth .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:400}.halfwidth>pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:400}.halfwidth>pn-teaser-card .pn-teaser-card__container__image__container--no-image{padding-top:2.4rem}@media screen and (min-width: 992px){.halfwidth>pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:500}}@media screen and (min-width: 1200px){.halfwidth>pn-teaser-card .pn-teaser-card__container__image__container--no-image{padding-top:4rem}.halfwidth>pn-teaser-card .pn-teaser-card__container__content{padding:0 4rem 4rem}.halfwidth>pn-teaser-card .pn-teaser-card__container__content__text__container__heading{font-weight:700;font-size:3.2rem;line-height:3.52rem}.halfwidth>pn-teaser-card .pn-teaser-card__container__content__text__container__preamble{font-weight:400;font-size:2rem;line-height:2.8rem}}@media screen and (min-width: 1640px){.halfwidth>pn-teaser-card .pn-teaser-card__container__image__container--no-image{padding-top:5.6rem}.halfwidth>pn-teaser-card .pn-teaser-card__container__content{padding:0 5.6rem 5.6rem}}.fullwidth>pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:400}.fullwidth>pn-teaser-card .pn-teaser-card__container__image__container--no-image{width:auto;padding-top:2.4rem}@media screen and (min-width: 768px){.fullwidth>pn-teaser-card{min-height:35rem}.fullwidth>pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:500}.fullwidth>pn-teaser-card .pn-teaser-card__container{flex-direction:row}.fullwidth>pn-teaser-card .pn-teaser-card__container__content{align-self:center;gap:2.4rem;padding:3.2rem 3.2rem 3.2rem 2.4rem}.fullwidth>pn-teaser-card .pn-teaser-card__container__image__container>[slot=illustration]{border-top-left-radius:2.4rem;border-bottom-left-radius:2.4rem;clip-path:ellipse(100% 100% at 0% 50%)}.fullwidth>pn-teaser-card .pn-teaser-card__container__image__container>[slot=illustration]>picture>img{height:100%;object-fit:cover}}@media screen and (min-width: 1200px){.fullwidth>pn-teaser-card{min-height:52rem}.fullwidth>pn-teaser-card .pn-teaser-card__container__content{padding:4rem 4rem 4rem 3.2rem}.fullwidth>pn-teaser-card .pn-teaser-card__container__content__text__container__heading{font-weight:700;font-size:4.8rem;line-height:5.28rem}.fullwidth>pn-teaser-card .pn-teaser-card__container__content__text__container__preamble{font-size:2rem;line-height:2.8rem}}@media screen and (min-width: 768px){.fullwidth pn-teaser-card[data-card-alignment=right] .pn-teaser-card__container{flex-direction:row-reverse}.fullwidth pn-teaser-card[data-card-alignment=right] .pn-teaser-card__container__content{padding:3.2rem 2.4rem 3.2rem 3.2rem}.fullwidth pn-teaser-card[data-card-alignment=right] .pn-teaser-card__container__image__container>[slot=illustration]{border-bottom-right-radius:2.4rem;clip-path:ellipse(100% 100% at 100% 50%)}}@media screen and (min-width: 1200px){.fullwidth pn-teaser-card[data-card-alignment=right] .pn-teaser-card__container__content{padding:4rem 3.2rem 4rem 4rem}}pn-teaser-card.teaser-card--hover-effect:hover{cursor:pointer}pn-teaser-card.teaser-card--hover-effect:hover .pn-teaser-card__container__image__container [slot=illustration] picture>img{transform:scale(1.02);filter:brightness(0.85)}pn-teaser-card.teaser-card--hover-effect:hover .secondary-link--animated{text-decoration:underline}pn-teaser-card.teaser-card--hover-effect:hover .secondary-link--animated pn-icon svg{left:0}pn-teaser-card.teaser-card--hover-effect:hover pn-button button .pn-button-bg,pn-teaser-card.teaser-card--hover-effect:hover pn-button a .pn-button-bg{background-color:#0d234b}pn-teaser-card.teaser-card--hover-effect:hover[data-card-color=blue900] pn-button button .pn-button-bg,pn-teaser-card.teaser-card--hover-effect:hover[data-card-color=blue900] pn-button a .pn-button-bg{background-color:#00a0d6}";const c=r;const _=class{constructor(a){e(this,a);var t;this.labelToCapitals=(t=this.label)===null||t===void 0?void 0:t.toUpperCase();this.text=null;this.heading=null;this.label=null;this.dataCardColor="coral";this.dataCardAlignment="left";this.hasCtaSlotContent=false;this.hasIllustrationSlot=true}componentWillLoad(){this.hasCtaSlotContent=!!this.hostElement.querySelector('[slot="cta"]');this.hasIllustrationSlot=!!this.hostElement.querySelector('[slot="illustration"]')}render(){return a(t,{key:"791b3dc0bb9f180af134c20ad6db6b30383fa22b"},a("slot",{key:"5877ea4e196f8f8579ff49d2ff1422ee31681140",name:"clickable-block-wrapper"}),a("div",{key:"09428d901cd7946fd72084cd14a4a04101698b4b",class:"pn-teaser-card__container"},a("div",{key:"e9e5e1c3243886efd2bb4c75af6c7702081971e5",class:`pn-teaser-card__container__image__container ${!this.hasIllustrationSlot?"pn-teaser-card__container__image__container--no-image":""}`},a("slot",{key:"aca99666b8ff47fb02a990788d4e86a32d231cfe",name:"illustration"})),a("div",{key:"f16f31b42437a48adaf8e7e56ecd8bec5c069946",class:"pn-teaser-card__container__content"},a("div",{key:"7308c30884cd8ad391943652b90ba1f3a64fbf26",class:"pn-teaser-card__container__content__text__container"},this.labelToCapitals&&a("span",{key:"a81ef74a015fbfc76193f1732c9fe6ae98b811db",class:"pn-teaser-card__container__content__text__container__label"},this.labelToCapitals),a("h2",{key:"56f846822e14b3d5541fd049d9150ced61722f93",class:"pn-teaser-card__container__content__text__container__heading"},this.heading),a("p",{key:"a7a74cbb08fe34c491b9ef426e4c50dbf0900f13",class:"pn-teaser-card__container__content__text__container__preamble"},this.text)),this.hasCtaSlotContent&&a("div",{key:"f2ff04dcb61429db60a5c0be06b6c0888a06fd34",class:"pn-teaser-card__container__content__cta"},a("slot",{key:"e02486c130c31907aaf82123a550c27f6c6f6f92",name:"cta"})))))}get hostElement(){return n(this)}};_.style=c;export{_ as pn_teaser_card};
-//# sourceMappingURL=p-8ca34ec3.entry.js.map
+import{r as e,g as a,h as t,d as n}from"./p-06555615.js";const r="pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.block.teasercardblock a[data-block-clickable-link=true]{z-index:1}pn-teaser-card{width:100%;height:100%;display:flex}pn-teaser-card .pn-teaser-card__container{display:flex;flex-direction:column;justify-content:flex-start;border-radius:2.4rem;width:100%}pn-teaser-card .pn-teaser-card__container__image__container{width:100%;position:relative}pn-teaser-card .pn-teaser-card__container__image__container>[slot=illustration]{clip-path:ellipse(100% 90% at 50% 0%);height:100%;overflow:hidden;border-top-left-radius:2.4rem;border-top-right-radius:2.4rem}pn-teaser-card .pn-teaser-card__container__image__container>[slot=illustration]>picture>img{width:100%;height:auto;transition:0.4s ease-in-out;transform:scale(1);aspect-ratio:16/9;object-fit:cover;object-position:50% 0}pn-teaser-card .pn-teaser-card__container__content{display:flex;flex-direction:column;justify-content:space-between;flex:1 1 100%;gap:3.2rem;padding:2.4rem 2.4rem;padding-top:0}pn-teaser-card .pn-teaser-card__container__content__text__container__heading{font-weight:700;font-size:2.4rem;line-height:2.64rem;margin-bottom:0}pn-teaser-card .pn-teaser-card__container__content__text__container__preamble{padding-top:1.6rem;font-weight:400;font-size:1.6rem;line-height:2.24rem;margin-bottom:0}pn-teaser-card .pn-teaser-card__container__content__text__container__label{display:block;margin-bottom:1.6rem;font-weight:400;font-size:1.2rem;line-height:140%}pn-teaser-card .pn-teaser-card__container__content__cta>pn-button{align-self:flex-end;width:100%}pn-teaser-card .pn-teaser-card__container__content__cta>pn-button a:hover{text-decoration:none}pn-teaser-card .pn-teaser-card__container__content__cta>pn-button>button>.pn-button-bg,pn-teaser-card .pn-teaser-card__container__content__cta>pn-button>a>.pn-button-bg{transition:0.4s ease-in-out}@media screen and (min-width: 768px){pn-teaser-card .pn-teaser-card__container__content__cta>pn-button{width:fit-content}}pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:500;font-size:1.6rem;text-decoration:none;color:#005d92}pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated pn-icon svg{transition:0.3s ease-in-out;position:relative;left:-0.3rem}pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated pn-icon svg path{fill:#005d92}pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated[target=_blank]:not(.pn-button):after{display:none}pn-teaser-card[data-card-color=coral]>.pn-teaser-card__container{background-color:#fdefee}pn-teaser-card[data-card-color=green]>.pn-teaser-card__container{background-color:#dcf6e7}pn-teaser-card[data-card-color=blue]>.pn-teaser-card__container{background-color:#effbff}pn-teaser-card[data-card-color=blue50]>.pn-teaser-card__container{background-color:#e0f8ff}pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container{background-color:#00a0d6}pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__label,pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__heading,pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__preamble,pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container .pn-teaser-card__container__content__cta .secondary-link--animated{color:#ffffff}pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container .secondary-link--animated>pn-icon>svg>path{fill:#ffffff}pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container{background-color:#0d234b}pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__heading{color:#f06365}pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__label,pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__preamble,pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container .pn-teaser-card__container__content__cta .secondary-link--animated{color:#ffffff}pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container .secondary-link--animated>pn-icon>svg>path{fill:#ffffff}pn-teaser-card[data-card-color=white]>.pn-teaser-card__container{background-color:#ffffff}.teasercardlistblock .teasercardblock.has-bg{background-color:transparent;background:transparent}@media screen and (min-width: 1200px){.onequarterwidth .pn-teaser-card__container__content__text__container__label{margin-bottom:0.8rem}}.onethirdwidth>pn-teaser-card .pn-teaser-card__container__image__container--no-image,.onequarterwidth>pn-teaser-card .pn-teaser-card__container__image__container--no-image{padding-top:2.4rem}.onethirdwidth .pn-teaser-card__container__content__cta .secondary-link--animated,.onequarterwidth .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:400}.halfwidth>pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:400}.halfwidth>pn-teaser-card .pn-teaser-card__container__image__container--no-image{padding-top:2.4rem}@media screen and (min-width: 992px){.halfwidth>pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:500}}@media screen and (min-width: 1200px){.halfwidth>pn-teaser-card .pn-teaser-card__container__image__container--no-image{padding-top:4rem}.halfwidth>pn-teaser-card .pn-teaser-card__container__content{padding:0 4rem 4rem}.halfwidth>pn-teaser-card .pn-teaser-card__container__content__text__container__heading{font-weight:700;font-size:3.2rem;line-height:3.52rem}.halfwidth>pn-teaser-card .pn-teaser-card__container__content__text__container__preamble{font-weight:400;font-size:2rem;line-height:2.8rem}}@media screen and (min-width: 1640px){.halfwidth>pn-teaser-card .pn-teaser-card__container__image__container--no-image{padding-top:5.6rem}.halfwidth>pn-teaser-card .pn-teaser-card__container__content{padding:0 5.6rem 5.6rem}}.fullwidth>pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:400}.fullwidth>pn-teaser-card .pn-teaser-card__container__image__container--no-image{width:auto;padding-top:2.4rem}@media screen and (min-width: 768px){.fullwidth>pn-teaser-card{min-height:35rem}.fullwidth>pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:500}.fullwidth>pn-teaser-card .pn-teaser-card__container{flex-direction:row}.fullwidth>pn-teaser-card .pn-teaser-card__container__content{align-self:center;gap:2.4rem;padding:3.2rem 3.2rem 3.2rem 2.4rem}.fullwidth>pn-teaser-card .pn-teaser-card__container__image__container>[slot=illustration]{border-top-left-radius:2.4rem;border-bottom-left-radius:2.4rem;clip-path:ellipse(100% 100% at 0% 50%)}.fullwidth>pn-teaser-card .pn-teaser-card__container__image__container>[slot=illustration]>picture>img{height:100%;object-fit:cover}}@media screen and (min-width: 1200px){.fullwidth>pn-teaser-card{min-height:52rem}.fullwidth>pn-teaser-card .pn-teaser-card__container__content{padding:4rem 4rem 4rem 3.2rem}.fullwidth>pn-teaser-card .pn-teaser-card__container__content__text__container__heading{font-weight:700;font-size:4.8rem;line-height:5.28rem}.fullwidth>pn-teaser-card .pn-teaser-card__container__content__text__container__preamble{font-size:2rem;line-height:2.8rem}}@media screen and (min-width: 768px){.fullwidth pn-teaser-card[data-card-alignment=right] .pn-teaser-card__container{flex-direction:row-reverse}.fullwidth pn-teaser-card[data-card-alignment=right] .pn-teaser-card__container__content{padding:3.2rem 2.4rem 3.2rem 3.2rem}.fullwidth pn-teaser-card[data-card-alignment=right] .pn-teaser-card__container__image__container>[slot=illustration]{border-bottom-right-radius:2.4rem;clip-path:ellipse(100% 100% at 100% 50%)}}@media screen and (min-width: 1200px){.fullwidth pn-teaser-card[data-card-alignment=right] .pn-teaser-card__container__content{padding:4rem 3.2rem 4rem 4rem}}pn-teaser-card.teaser-card--hover-effect:hover{cursor:pointer}pn-teaser-card.teaser-card--hover-effect:hover .pn-teaser-card__container__image__container [slot=illustration] picture>img{transform:scale(1.02);filter:brightness(0.85)}pn-teaser-card.teaser-card--hover-effect:hover .secondary-link--animated{text-decoration:underline}pn-teaser-card.teaser-card--hover-effect:hover .secondary-link--animated pn-icon svg{left:0}pn-teaser-card.teaser-card--hover-effect:hover pn-button button .pn-button-bg,pn-teaser-card.teaser-card--hover-effect:hover pn-button a .pn-button-bg{background-color:#0d234b}pn-teaser-card.teaser-card--hover-effect:hover[data-card-color=blue900] pn-button button .pn-button-bg,pn-teaser-card.teaser-card--hover-effect:hover[data-card-color=blue900] pn-button a .pn-button-bg{background-color:#00a0d6}";const c=r;const _=class{constructor(a){e(this,a);this.text=null;this.heading=null;this.label=null;this.dataCardColor="coral";this.dataCardAlignment="left";this.hasCtaSlotContent=false;this.hasIllustrationSlot=true}get hostElement(){return a(this)}labelToCapitals=this.label?.toUpperCase();componentWillLoad(){this.hasCtaSlotContent=!!this.hostElement.querySelector('[slot="cta"]');this.hasIllustrationSlot=!!this.hostElement.querySelector('[slot="illustration"]')}render(){return t(n,{key:"791b3dc0bb9f180af134c20ad6db6b30383fa22b"},t("slot",{key:"5877ea4e196f8f8579ff49d2ff1422ee31681140",name:"clickable-block-wrapper"}),t("div",{key:"09428d901cd7946fd72084cd14a4a04101698b4b",class:"pn-teaser-card__container"},t("div",{key:"e9e5e1c3243886efd2bb4c75af6c7702081971e5",class:`pn-teaser-card__container__image__container ${!this.hasIllustrationSlot?"pn-teaser-card__container__image__container--no-image":""}`},t("slot",{key:"aca99666b8ff47fb02a990788d4e86a32d231cfe",name:"illustration"})),t("div",{key:"f16f31b42437a48adaf8e7e56ecd8bec5c069946",class:"pn-teaser-card__container__content"},t("div",{key:"7308c30884cd8ad391943652b90ba1f3a64fbf26",class:"pn-teaser-card__container__content__text__container"},this.labelToCapitals&&t("span",{key:"a81ef74a015fbfc76193f1732c9fe6ae98b811db",class:"pn-teaser-card__container__content__text__container__label"},this.labelToCapitals),t("h2",{key:"56f846822e14b3d5541fd049d9150ced61722f93",class:"pn-teaser-card__container__content__text__container__heading"},this.heading),t("p",{key:"a7a74cbb08fe34c491b9ef426e4c50dbf0900f13",class:"pn-teaser-card__container__content__text__container__preamble"},this.text)),this.hasCtaSlotContent&&t("div",{key:"f2ff04dcb61429db60a5c0be06b6c0888a06fd34",class:"pn-teaser-card__container__content__cta"},t("slot",{key:"e02486c130c31907aaf82123a550c27f6c6f6f92",name:"cta"})))))}};_.style=c;export{_ as pn_teaser_card};
+//# sourceMappingURL=p-0247c553.entry.js.map

package/pn-market-web-components/p-0247c553.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pnTeaserCardCss","PnTeaserCardStyle0","PnTeaserCard","labelToCapitals","this","label","toUpperCase","componentWillLoad","hasCtaSlotContent","hostElement","querySelector","hasIllustrationSlot","render","h","Host","key","name","class","heading","text"],"sources":["src/components/cards/pn-teaser-card/pn-teaser-card.scss?tag=pn-teaser-card","src/components/cards/pn-teaser-card/pn-teaser-card.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\n$teaser-card-media-tablet: 768px; // 768px\n$teaser-card-media-desktop: 1200px; //1200px\n$teaser-card-media-large-desktop: 1640px; //1640\n\n//making pn wrapping link clickable over card image\n.block.teasercardblock {\n  a[data-block-clickable-link='true'] {\n    z-index: 1;\n  }\n}\n\n//mobile first\npn-teaser-card {\n  width: 100%;\n  height: 100%;\n  display: flex;\n\n  .pn-teaser-card__container {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    border-radius: 2.4rem;\n    width: 100%;\n  }\n\n  .pn-teaser-card__container__image__container {\n    width: 100%;\n    position: relative;\n\n    & > [slot='illustration'] {\n      clip-path: ellipse(100% 90% at 50% 0%);\n      height: 100%;\n      overflow: hidden;\n      border-top-left-radius: 2.4rem;\n      border-top-right-radius: 2.4rem;\n\n      & > picture > img {\n        width: 100%;\n        height: auto;\n        transition: 0.4s ease-in-out;\n        transform: scale(1);\n        aspect-ratio: 16/9;\n        object-fit: cover;\n        object-position: 50% 0;\n      }\n    }\n  }\n\n  .pn-teaser-card__container__content {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    flex: 1 1 100%;\n    gap: 3.2rem;\n    padding: 2.4rem 2.4rem;\n    padding-top: 0;\n  }\n\n  .pn-teaser-card__container__content__text__container__heading {\n    font-weight: 700;\n    font-size: 2.4rem;\n    line-height: 2.64rem;\n    margin-bottom: 0;\n  }\n\n  .pn-teaser-card__container__content__text__container__preamble {\n    padding-top: 1.6rem;\n    font-weight: 400;\n    font-size: 1.6rem;\n    line-height: 2.24rem;\n    margin-bottom: 0;\n  }\n\n  .pn-teaser-card__container__content__text__container__label {\n    display: block;\n    margin-bottom: 1.6rem;\n    font-weight: 400;\n    font-size: 1.2rem;\n    line-height: 140%;\n  }\n\n  .pn-teaser-card__container__content__cta {\n    & > pn-button {\n      align-self: flex-end;\n      width: 100%;\n\n      & a:hover {\n        text-decoration: none;\n      }\n\n      & > button,\n      & > a {\n        & > .pn-button-bg {\n          transition: 0.4s ease-in-out;\n        }\n      }\n\n      @media screen and (min-width: $teaser-card-media-tablet) {\n        width: fit-content;\n      }\n    }\n\n    .secondary-link--animated {\n      font-weight: 500;\n      font-size: 1.6rem;\n      text-decoration: none;\n      color: $blue700;\n\n      pn-icon svg {\n        transition: 0.3s ease-in-out;\n        position: relative;\n        left: -0.3rem;\n\n        path {\n          fill: $blue700;\n        }\n      }\n\n      &[target='_blank']:not(.pn-button):after {\n        display: none;\n      }\n    }\n  }\n}\n\n//colors\npn-teaser-card[data-card-color='coral'] {\n  & > .pn-teaser-card__container {\n    background-color: $coral50;\n  }\n}\n\npn-teaser-card[data-card-color='green'] {\n  & > .pn-teaser-card__container {\n    background-color: $green50;\n  }\n}\n\npn-teaser-card[data-card-color='blue'] {\n  & > .pn-teaser-card__container {\n    background-color: $blue25;\n  }\n}\n\npn-teaser-card[data-card-color='blue50'] {\n  & > .pn-teaser-card__container {\n    background-color: $blue50;\n  }\n}\n\npn-teaser-card[data-card-color='blue400'] {\n  & > .pn-teaser-card__container {\n    background-color: $blue400;\n\n    .pn-teaser-card__container__content__text__container__label,\n    .pn-teaser-card__container__content__text__container__heading,\n    .pn-teaser-card__container__content__text__container__preamble,\n    .pn-teaser-card__container__content__cta .secondary-link--animated {\n      color: $white;\n    }\n\n    .secondary-link--animated {\n      & > pn-icon > svg > path {\n        fill: $white;\n      }\n    }\n  }\n}\n\npn-teaser-card[data-card-color='blue900'] {\n  & > .pn-teaser-card__container {\n    background-color: $blue900;\n    .pn-teaser-card__container__content__text__container__heading {\n      color: $coral400;\n    }\n\n    .pn-teaser-card__container__content__text__container__label,\n    .pn-teaser-card__container__content__text__container__preamble,\n    .pn-teaser-card__container__content__cta .secondary-link--animated {\n      color: $white;\n    }\n\n    .secondary-link--animated {\n      & > pn-icon > svg > path {\n        fill: $white;\n      }\n    }\n  }\n}\n\npn-teaser-card[data-card-color='white'] {\n  & > .pn-teaser-card__container {\n    background-color: $white;\n  }\n}\n\n//color override when in a listblock\n.teasercardlistblock {\n  .teasercardblock.has-bg {\n    background-color: transparent;\n    background: transparent;\n  }\n}\n\n// variants\n\n.onequarterwidth {\n  .pn-teaser-card__container__content__text__container__label {\n    @media screen and (min-width: $teaser-card-media-desktop) {\n      margin-bottom: 0.8rem;\n    }\n  }\n}\n\n.onethirdwidth,\n.onequarterwidth {\n  & > pn-teaser-card {\n    .pn-teaser-card__container__image__container--no-image {\n      padding-top: 2.4rem;\n    }\n  }\n\n  .pn-teaser-card__container__content__cta {\n    .secondary-link--animated {\n      font-weight: 400;\n    }\n  }\n}\n\n.halfwidth {\n  & > pn-teaser-card {\n    .pn-teaser-card__container__content__cta {\n      .secondary-link--animated {\n        font-weight: 400;\n      }\n    }\n\n    .pn-teaser-card__container__image__container--no-image {\n      padding-top: 2.4rem;\n    }\n\n    @media screen and (min-width: 992px) {\n      .pn-teaser-card__container__content__cta {\n        .secondary-link--animated {\n          font-weight: 500;\n        }\n      }\n    }\n\n    @media screen and (min-width: $teaser-card-media-desktop) {\n      .pn-teaser-card__container__image__container--no-image {\n        padding-top: 4rem;\n      }\n\n      .pn-teaser-card__container__content {\n        padding: 0 4rem 4rem;\n      }\n\n      .pn-teaser-card__container__content__text__container__heading {\n        font-weight: 700;\n        font-size: 3.2rem;\n        line-height: 3.52rem;\n      }\n\n      .pn-teaser-card__container__content__text__container__preamble {\n        font-weight: 400;\n        font-size: 2rem;\n        line-height: 2.8rem;\n      }\n    }\n\n    @media screen and (min-width: $teaser-card-media-large-desktop) {\n      .pn-teaser-card__container__image__container--no-image {\n        padding-top: 5.6rem;\n      }\n\n      .pn-teaser-card__container__content {\n        padding: 0 5.6rem 5.6rem;\n      }\n    }\n  }\n}\n\n.fullwidth {\n  & > pn-teaser-card {\n    .pn-teaser-card__container__content__cta {\n      .secondary-link--animated {\n        font-weight: 400;\n      }\n    }\n\n    .pn-teaser-card__container__image__container--no-image {\n      width: auto;\n      padding-top: 2.4rem;\n    }\n\n    @media screen and (min-width: $teaser-card-media-tablet) {\n      min-height: 35rem;\n\n      .pn-teaser-card__container__content__cta {\n        .secondary-link--animated {\n          font-weight: 500;\n        }\n      }\n\n      .pn-teaser-card__container {\n        flex-direction: row;\n      }\n\n      .pn-teaser-card__container__content {\n        align-self: center;\n        gap: 2.4rem;\n        padding: 3.2rem 3.2rem 3.2rem 2.4rem;\n      }\n\n      .pn-teaser-card__container__image__container {\n        & > [slot='illustration'] {\n          border-top-left-radius: 2.4rem;\n          border-bottom-left-radius: 2.4rem;\n          clip-path: ellipse(100% 100% at 0% 50%);\n\n          & > picture > img {\n            height: 100%;\n            object-fit: cover;\n          }\n        }\n      }\n    }\n\n    @media screen and (min-width: $teaser-card-media-desktop) {\n      min-height: 52rem;\n\n      .pn-teaser-card__container__content {\n        padding: 4rem 4rem 4rem 3.2rem;\n      }\n\n      .pn-teaser-card__container__content__text__container__heading {\n        font-weight: 700;\n        font-size: 4.8rem;\n        line-height: 5.28rem;\n      }\n\n      .pn-teaser-card__container__content__text__container__preamble {\n        font-size: 2rem;\n        line-height: 2.8rem;\n      }\n    }\n  }\n\n  pn-teaser-card[data-card-alignment='right'] {\n    @media screen and (min-width: $teaser-card-media-tablet) {\n      .pn-teaser-card__container {\n        flex-direction: row-reverse;\n      }\n\n      .pn-teaser-card__container__content {\n        padding: 3.2rem 2.4rem 3.2rem 3.2rem;\n      }\n\n      .pn-teaser-card__container__image__container {\n        & > [slot='illustration'] {\n          border-bottom-right-radius: 2.4rem;\n          clip-path: ellipse(100% 100% at 100% 50%);\n        }\n      }\n    }\n\n    @media screen and (min-width: $teaser-card-media-desktop) {\n      .pn-teaser-card__container__content {\n        padding: 4rem 3.2rem 4rem 4rem;\n      }\n    }\n  }\n}\n\n//effect class\npn-teaser-card.teaser-card--hover-effect {\n  &:hover {\n    cursor: pointer;\n    .pn-teaser-card__container__image__container {\n      & [slot='illustration'] {\n        & picture > img {\n          transform: scale(1.02);\n          filter: brightness(0.85);\n        }\n      }\n    }\n\n    .secondary-link--animated {\n      text-decoration: underline;\n\n      pn-icon svg {\n        left: 0;\n      }\n    }\n\n    pn-button {\n      button,\n      a {\n        .pn-button-bg {\n          background-color: $blue900;\n        }\n      }\n    }\n\n    &[data-card-color='blue900'] {\n      pn-button {\n        button,\n        a {\n          .pn-button-bg {\n            background-color: $blue400;\n          }\n        }\n      }\n    }\n  }\n}\n","import { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\n@Component({\n  tag: 'pn-teaser-card',\n  styleUrl: 'pn-teaser-card.scss',\n})\nexport class PnTeaserCard {\n  @Element() hostElement: HTMLElement;\n  //props\n  @Prop() text: string = null;\n  @Prop() heading: string = null;\n  @Prop() label?: string = null;\n  @Prop({ reflect: true }) dataCardColor: string = 'coral';\n  @Prop({ reflect: true }) dataCardAlignment: string = 'left';\n\n  labelToCapitals = this.label?.toUpperCase();\n\n  @State() hasCtaSlotContent: boolean = false;\n  @State() hasIllustrationSlot: boolean = true;\n\n  componentWillLoad() {\n    this.hasCtaSlotContent = !!this.hostElement.querySelector('[slot=\"cta\"]');\n    this.hasIllustrationSlot = !!this.hostElement.querySelector('[slot=\"illustration\"]');\n  }\n\n  //render\n  render() {\n    return (\n      <Host>\n        <slot name=\"clickable-block-wrapper\" />\n        <div class=\"pn-teaser-card__container\">\n          <div class={`pn-teaser-card__container__image__container ${!this.hasIllustrationSlot ? 'pn-teaser-card__container__image__container--no-image' : ''}`}>\n            <slot name=\"illustration\" />\n          </div>\n          <div class=\"pn-teaser-card__container__content\">\n            <div class=\"pn-teaser-card__container__content__text__container\">\n              {this.labelToCapitals && <span class=\"pn-teaser-card__container__content__text__container__label\">{this.labelToCapitals}</span>}\n              <h2 class=\"pn-teaser-card__container__content__text__container__heading\">{this.heading}</h2>\n              <p class=\"pn-teaser-card__container__content__text__container__preamble\">{this.text}</p>\n            </div>\n            {this.hasCtaSlotContent && (\n              <div class=\"pn-teaser-card__container__content__cta\">\n                <slot name=\"cta\" />\n              </div>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAkB,i0RACxB,MAAAC,EAAeD,E,MCKFE,EAAY,M,mCAGA,K,aACG,K,WACD,K,mBACwB,Q,uBACI,O,uBAIf,M,yBACE,I,kCAHxCC,gBAAkBC,KAAKC,OAAOC,cAK9B,iBAAAC,GACEH,KAAKI,oBAAsBJ,KAAKK,YAAYC,cAAc,gBAC1DN,KAAKO,sBAAwBP,KAAKK,YAAYC,cAAc,wB,CAI9D,MAAAE,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,QAAAE,IAAA,2CAAMC,KAAK,4BACXH,EAAA,OAAAE,IAAA,2CAAKE,MAAM,6BACTJ,EAAA,OAAAE,IAAA,2CAAKE,MAAO,gDAAgDb,KAAKO,oBAAsB,wDAA0D,MAC/IE,EAAA,QAAAE,IAAA,2CAAMC,KAAK,kBAEbH,EAAA,OAAAE,IAAA,2CAAKE,MAAM,sCACTJ,EAAA,OAAAE,IAAA,2CAAKE,MAAM,uDACRb,KAAKD,iBAAmBU,EAAA,QAAAE,IAAA,2CAAME,MAAM,8DAA8Db,KAAKD,iBACxGU,EAAA,MAAAE,IAAA,2CAAIE,MAAM,gEAAgEb,KAAKc,SAC/EL,EAAA,KAAAE,IAAA,2CAAGE,MAAM,iEAAiEb,KAAKe,OAEhFf,KAAKI,mBACJK,EAAA,OAAAE,IAAA,2CAAKE,MAAM,2CACTJ,EAAA,QAAAE,IAAA,2CAAMC,KAAK,W","ignoreList":[]}

package/pn-market-web-components/{p-3f50be05.entry.js → p-09b9cc06.entry.js}

@@ -1,2 +1,2 @@
-import{r as o,h as e,d as t,g as n}from"./p-06555615.js";const r="pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-customernumber-selector-option{display:flex;flex-direction:column;width:100%;overflow:hidden}pn-customernumber-selector-option:last-of-type{border-bottom-left-radius:0.8rem;border-bottom-right-radius:0.8rem}.customernumberoption{overflow:hidden;max-width:100%;text-decoration:none;background:#ffffff;transition:background 0.15s ease;padding:1.6rem 1rem}.customernumberoption:hover,.customernumberoption:focus,.customernumberoption:active{background:#e0f8ff;text-decoration:none}.customernumberoption-text{font-weight:700;color:#2d2013}.customernumberoption-title{display:block;font-size:1em;color:#005d92;font-weight:700}.customernumberoption-description{font-size:0.75em;color:#5e554a;font-weight:normal}";const s=r;const c=class{constructor(e){o(this,e);this.heading="";this.description="";this.url=""}render(){return e(t,{key:"d172e0800706cc597ae98251949b82126972a947"},e("a",{key:"424a253bd2ff08411698484e2dacaeb5395ad23e",class:"customernumberoption",href:this.url},e("span",{key:"3f4abf7c9db59ba1b6e8c3d517e59d002cbecdb7",class:"customernumberoption-text"},e("span",{key:"be944d80224df353672d0070cdf906e18c261c7b",class:"customernumberoption-title"},this.heading),e("span",{key:"9d59a2f8f79344cdaf487896a66981f3fc52ff39",class:"customernumberoption-description"},this.description),e("slot",{key:"9afd978a36634da1143190318f70521c5166ac53"}))))}get hostElement(){return n(this)}};c.style=s;export{c as pn_customernumber_selector_option};
-//# sourceMappingURL=p-3f50be05.entry.js.map
+import{r as o,g as e,h as t,d as n}from"./p-06555615.js";const r="pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-customernumber-selector-option{display:flex;flex-direction:column;width:100%;overflow:hidden}pn-customernumber-selector-option:last-of-type{border-bottom-left-radius:0.8rem;border-bottom-right-radius:0.8rem}.customernumberoption{overflow:hidden;max-width:100%;text-decoration:none;background:#ffffff;transition:background 0.15s ease;padding:1.6rem 1rem}.customernumberoption:hover,.customernumberoption:focus,.customernumberoption:active{background:#e0f8ff;text-decoration:none}.customernumberoption-text{font-weight:700;color:#2d2013}.customernumberoption-title{display:block;font-size:1em;color:#005d92;font-weight:700}.customernumberoption-description{font-size:0.75em;color:#5e554a;font-weight:normal}";const s=r;const c=class{constructor(e){o(this,e);this.heading="";this.description="";this.url=""}get hostElement(){return e(this)}render(){return t(n,{key:"d172e0800706cc597ae98251949b82126972a947"},t("a",{key:"424a253bd2ff08411698484e2dacaeb5395ad23e",class:"customernumberoption",href:this.url},t("span",{key:"3f4abf7c9db59ba1b6e8c3d517e59d002cbecdb7",class:"customernumberoption-text"},t("span",{key:"be944d80224df353672d0070cdf906e18c261c7b",class:"customernumberoption-title"},this.heading),t("span",{key:"9d59a2f8f79344cdaf487896a66981f3fc52ff39",class:"customernumberoption-description"},this.description),t("slot",{key:"9afd978a36634da1143190318f70521c5166ac53"}))))}};c.style=s;export{c as pn_customernumber_selector_option};
+//# sourceMappingURL=p-09b9cc06.entry.js.map

package/pn-market-web-components/{p-3f50be05.entry.js.map → p-09b9cc06.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["pnCustomernumberSelectorOptionCss","PnCustomernumberSelectorOptionStyle0","PnProfileSelectorOption","render","h","Host","key","class","href","this","url","heading","description"],"sources":["src/components/profile/pn-customernumber-selector/pn-customernumber-selector-option.scss?tag=pn-customernumber-selector-option","src/components/profile/pn-customernumber-selector/pn-customernumber-selector-option.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-customernumber-selector-option {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  overflow: hidden;\n  &:last-of-type {\n    border-bottom-left-radius: 0.8rem;\n    border-bottom-right-radius: 0.8rem;\n  }\n}\n.customernumberoption {\n  overflow: hidden;\n  max-width: 100%;\n  text-decoration: none;\n  background: $white;\n  transition: background 0.15s ease;\n  padding: 1.6rem 1rem;\n  &:hover,\n  &:focus,\n  &:active {\n    background: $blue50;\n    text-decoration: none;\n  }\n}\n.customernumberoption-text {\n  font-weight: 700;\n  color: $gray900;\n}\n\n.customernumberoption-title {\n  display: block;\n  font-size: 1em;\n  color: $blue700;\n  font-weight: 700;\n}\n\n.customernumberoption-description {\n  font-size: 0.75em;\n  color: $gray700;\n  font-weight: normal;\n}\n","import { Component, Prop, h, State, Element, Host } from '@stencil/core';\n@Component({\n  tag: 'pn-customernumber-selector-option',\n  styleUrl: 'pn-customernumber-selector-option.scss',\n})\nexport class PnProfileSelectorOption {\n  @Element() hostElement: Element;\n\n  @Prop() heading: string = '';\n  @Prop() description: string = '';\n  @Prop() url: string = '';\n\n  render() {\n    return (\n      <Host>\n        <a class=\"customernumberoption\" href={this.url}>\n          <span class=\"customernumberoption-text\">\n            <span class=\"customernumberoption-title\">{this.heading}</span>\n            <span class=\"customernumberoption-description\">{this.description}</span>\n            <slot />\n          </span>\n        </a>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAoC,sxBAC1C,MAAAC,EAAeD,E,MCIFE,EAAuB,M,sCAGR,G,iBACI,G,SACR,E,CAEtB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,KAAAE,IAAA,2CAAGC,MAAM,uBAAuBC,KAAMC,KAAKC,KACzCN,EAAA,QAAAE,IAAA,2CAAMC,MAAM,6BACVH,EAAA,QAAAE,IAAA,2CAAMC,MAAM,8BAA8BE,KAAKE,SAC/CP,EAAA,QAAAE,IAAA,2CAAMC,MAAM,oCAAoCE,KAAKG,aACrDR,EAAA,QAAAE,IAAA,+C","ignoreList":[]}
+{"version":3,"names":["pnCustomernumberSelectorOptionCss","PnCustomernumberSelectorOptionStyle0","PnProfileSelectorOption","render","h","Host","key","class","href","this","url","heading","description"],"sources":["src/components/profile/pn-customernumber-selector/pn-customernumber-selector-option.scss?tag=pn-customernumber-selector-option","src/components/profile/pn-customernumber-selector/pn-customernumber-selector-option.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-customernumber-selector-option {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  overflow: hidden;\n  &:last-of-type {\n    border-bottom-left-radius: 0.8rem;\n    border-bottom-right-radius: 0.8rem;\n  }\n}\n.customernumberoption {\n  overflow: hidden;\n  max-width: 100%;\n  text-decoration: none;\n  background: $white;\n  transition: background 0.15s ease;\n  padding: 1.6rem 1rem;\n  &:hover,\n  &:focus,\n  &:active {\n    background: $blue50;\n    text-decoration: none;\n  }\n}\n.customernumberoption-text {\n  font-weight: 700;\n  color: $gray900;\n}\n\n.customernumberoption-title {\n  display: block;\n  font-size: 1em;\n  color: $blue700;\n  font-weight: 700;\n}\n\n.customernumberoption-description {\n  font-size: 0.75em;\n  color: $gray700;\n  font-weight: normal;\n}\n","import { Component, Prop, h, State, Element, Host } from '@stencil/core';\n@Component({\n  tag: 'pn-customernumber-selector-option',\n  styleUrl: 'pn-customernumber-selector-option.scss',\n})\nexport class PnProfileSelectorOption {\n  @Element() hostElement: Element;\n\n  @Prop() heading: string = '';\n  @Prop() description: string = '';\n  @Prop() url: string = '';\n\n  render() {\n    return (\n      <Host>\n        <a class=\"customernumberoption\" href={this.url}>\n          <span class=\"customernumberoption-text\">\n            <span class=\"customernumberoption-title\">{this.heading}</span>\n            <span class=\"customernumberoption-description\">{this.description}</span>\n            <slot />\n          </span>\n        </a>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAoC,sxBAC1C,MAAAC,EAAeD,E,MCIFE,EAAuB,M,sCAGR,G,iBACI,G,SACR,E,kCAEtB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,KAAAE,IAAA,2CAAGC,MAAM,uBAAuBC,KAAMC,KAAKC,KACzCN,EAAA,QAAAE,IAAA,2CAAMC,MAAM,6BACVH,EAAA,QAAAE,IAAA,2CAAMC,MAAM,8BAA8BE,KAAKE,SAC/CP,EAAA,QAAAE,IAAA,2CAAMC,MAAM,oCAAoCE,KAAKG,aACrDR,EAAA,QAAAE,IAAA,+C","ignoreList":[]}

package/pn-market-web-components/{p-03dfc155.entry.js → p-0a522476.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,h as n,d as o,g as e}from"./p-06555615.js";import{c as a}from"./p-12360e4c.js";const i="pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-spotlight .pn-spotlight__container{overflow:hidden}@media screen and (max-width: 991px){pn-spotlight .pn-spotlight__container{margin-left:calc(-50vw + 50%);margin-right:calc(-50vw + 50%)}}pn-spotlight [slot=mobile-heading]{text-align:center;padding-bottom:1.6rem;font-weight:500;color:#0d234b}@media screen and (min-width: 769px){pn-spotlight [slot=mobile-heading]{display:none}}pn-spotlight .pn-spotlight__container__wrapper{position:relative;max-width:100%}@media screen and (min-width: 992px){pn-spotlight .pn-spotlight__container__wrapper{max-width:90%;margin:0 auto}}@media screen and (min-width: 1640px){pn-spotlight .pn-spotlight__container__wrapper{max-width:80%}}pn-spotlight .pn-spotlight__container__wrapper__content{position:relative;margin:0 auto;display:flex;flex-direction:row;left:-57.5px;width:calc(100% + 57.5px)}@media screen and (min-width: 768px){pn-spotlight .pn-spotlight__container__wrapper__content{left:-50px;width:calc(100% + 50px)}}@media screen and (min-width: 992px){pn-spotlight .pn-spotlight__container__wrapper__content{left:0;width:100%}}pn-spotlight .pn-spotlight__container__wrapper__content__ball{border-radius:50%;min-height:75px;aspect-ratio:1/1;margin-right:1.5rem}@media screen and (min-width: 768px){pn-spotlight .pn-spotlight__container__wrapper__content__ball{min-height:85px;margin-right:2.5rem}}pn-spotlight [slot=content]{display:flex;border-top-left-radius:10rem;border-bottom-left-radius:10rem;align-items:center;justify-content:right;padding:0 1.5rem;padding-left:50px;width:100%}@media screen and (min-width: 992px){pn-spotlight [slot=content]{padding:0 2rem;border-radius:10rem}}@media screen and (min-width: 992px){.pn-spotlight__container__wrapper.cta--dynamic{width:fit-content}}@media screen and (min-width: 992px){.pn-spotlight__container__wrapper.cta--dynamic [slot=content]{padding-left:4rem}}pn-spotlight[data-cta-color=green] [slot=content]{background-color:#dcf6e7}pn-spotlight[data-cta-color=green] .pn-spotlight__container__wrapper__content__ball{background-color:#dcf6e7}pn-spotlight[data-cta-color=coral] [slot=content]{background-color:#fdefee}pn-spotlight[data-cta-color=coral] .pn-spotlight__container__wrapper__content__ball{background-color:#fdefee}pn-spotlight[data-cta-color=blue] [slot=content]{background-color:#effbff}pn-spotlight[data-cta-color=blue] .pn-spotlight__container__wrapper__content__ball{background-color:#effbff}pn-spotlight[data-cta-color=business] [slot=content],pn-spotlight[data-cta-color=business] .pn-spotlight__container__wrapper__content__ball{background-color:#0d234b}pn-spotlight[data-cta-color=private] [slot=content],pn-spotlight[data-cta-color=private] .pn-spotlight__container__wrapper__content__ball{background-color:#00a0d6}pn-spotlight[data-cta-color=hybrid] [slot=content],pn-spotlight[data-cta-color=hybrid] .pn-spotlight__container__wrapper__content__ball{background-color:#e9e6e5}";const p=i;const r=class{constructor(n){t(this,n);this.heading=null;this.preamble=null;this.isDynamic=false;this.addDynamic=""}componentDidLoad(){this.addDynamic=a({"cta--dynamic":this.isDynamic})}render(){return n(o,{key:"b1d831c63742021f8f180473beb71b44b1665447"},n("div",{key:"8abd3c2d5cd4e17675124cbabc971420e6be2960",class:"pn-spotlight__container"},n("slot",{key:"456fc111a6dbd235c087c6991bf517189cc08033",name:"mobile-heading"}),n("div",{key:"84ee92f9b62e61981149c298fa20708b09e6ffa4",class:`pn-spotlight__container__wrapper ${this.addDynamic}`},n("div",{key:"00e67b61996c7c9265652d7ff6d0cc29aaa3a685",class:"pn-spotlight__container__wrapper__content"},n("div",{key:"c417b1c80cd9518f9eb2620f1211d972f4da5c24",class:"pn-spotlight__container__wrapper__content__ball"}),n("slot",{key:"48817e2a5cb6d5c485be0485f4364fe9bef33742",name:"content"})))))}get hostElement(){return e(this)}};r.style=p;export{r as pn_spotlight};
-//# sourceMappingURL=p-03dfc155.entry.js.map
+import{r as t,g as n,h as o,d as e}from"./p-06555615.js";import{c as a}from"./p-12360e4c.js";const i="pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-spotlight .pn-spotlight__container{overflow:hidden}@media screen and (max-width: 991px){pn-spotlight .pn-spotlight__container{margin-left:calc(-50vw + 50%);margin-right:calc(-50vw + 50%)}}pn-spotlight [slot=mobile-heading]{text-align:center;padding-bottom:1.6rem;font-weight:500;color:#0d234b}@media screen and (min-width: 769px){pn-spotlight [slot=mobile-heading]{display:none}}pn-spotlight .pn-spotlight__container__wrapper{position:relative;max-width:100%}@media screen and (min-width: 992px){pn-spotlight .pn-spotlight__container__wrapper{max-width:90%;margin:0 auto}}@media screen and (min-width: 1640px){pn-spotlight .pn-spotlight__container__wrapper{max-width:80%}}pn-spotlight .pn-spotlight__container__wrapper__content{position:relative;margin:0 auto;display:flex;flex-direction:row;left:-57.5px;width:calc(100% + 57.5px)}@media screen and (min-width: 768px){pn-spotlight .pn-spotlight__container__wrapper__content{left:-50px;width:calc(100% + 50px)}}@media screen and (min-width: 992px){pn-spotlight .pn-spotlight__container__wrapper__content{left:0;width:100%}}pn-spotlight .pn-spotlight__container__wrapper__content__ball{border-radius:50%;min-height:75px;aspect-ratio:1/1;margin-right:1.5rem}@media screen and (min-width: 768px){pn-spotlight .pn-spotlight__container__wrapper__content__ball{min-height:85px;margin-right:2.5rem}}pn-spotlight [slot=content]{display:flex;border-top-left-radius:10rem;border-bottom-left-radius:10rem;align-items:center;justify-content:right;padding:0 1.5rem;padding-left:50px;width:100%}@media screen and (min-width: 992px){pn-spotlight [slot=content]{padding:0 2rem;border-radius:10rem}}@media screen and (min-width: 992px){.pn-spotlight__container__wrapper.cta--dynamic{width:fit-content}}@media screen and (min-width: 992px){.pn-spotlight__container__wrapper.cta--dynamic [slot=content]{padding-left:4rem}}pn-spotlight[data-cta-color=green] [slot=content]{background-color:#dcf6e7}pn-spotlight[data-cta-color=green] .pn-spotlight__container__wrapper__content__ball{background-color:#dcf6e7}pn-spotlight[data-cta-color=coral] [slot=content]{background-color:#fdefee}pn-spotlight[data-cta-color=coral] .pn-spotlight__container__wrapper__content__ball{background-color:#fdefee}pn-spotlight[data-cta-color=blue] [slot=content]{background-color:#effbff}pn-spotlight[data-cta-color=blue] .pn-spotlight__container__wrapper__content__ball{background-color:#effbff}pn-spotlight[data-cta-color=business] [slot=content],pn-spotlight[data-cta-color=business] .pn-spotlight__container__wrapper__content__ball{background-color:#0d234b}pn-spotlight[data-cta-color=private] [slot=content],pn-spotlight[data-cta-color=private] .pn-spotlight__container__wrapper__content__ball{background-color:#00a0d6}pn-spotlight[data-cta-color=hybrid] [slot=content],pn-spotlight[data-cta-color=hybrid] .pn-spotlight__container__wrapper__content__ball{background-color:#e9e6e5}";const p=i;const r=class{constructor(n){t(this,n);this.heading=null;this.preamble=null;this.isDynamic=false;this.addDynamic=""}get hostElement(){return n(this)}componentDidLoad(){this.addDynamic=a({"cta--dynamic":this.isDynamic})}render(){return o(e,{key:"b1d831c63742021f8f180473beb71b44b1665447"},o("div",{key:"8abd3c2d5cd4e17675124cbabc971420e6be2960",class:"pn-spotlight__container"},o("slot",{key:"456fc111a6dbd235c087c6991bf517189cc08033",name:"mobile-heading"}),o("div",{key:"84ee92f9b62e61981149c298fa20708b09e6ffa4",class:`pn-spotlight__container__wrapper ${this.addDynamic}`},o("div",{key:"00e67b61996c7c9265652d7ff6d0cc29aaa3a685",class:"pn-spotlight__container__wrapper__content"},o("div",{key:"c417b1c80cd9518f9eb2620f1211d972f4da5c24",class:"pn-spotlight__container__wrapper__content__ball"}),o("slot",{key:"48817e2a5cb6d5c485be0485f4364fe9bef33742",name:"content"})))))}};r.style=p;export{r as pn_spotlight};
+//# sourceMappingURL=p-0a522476.entry.js.map

package/pn-market-web-components/{p-03dfc155.entry.js.map → p-0a522476.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["pnSpotlightCss","PnSpotlightStyle0","PnSpotlight","componentDidLoad","this","addDynamic","classNames","isDynamic","render","h","Host","key","class","name"],"sources":["src/components/cta/pn-spotlight/pn-spotlight.scss?tag=pn-spotlight","src/components/cta/pn-spotlight/pn-spotlight.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-spotlight {\n  .pn-spotlight__container {\n    overflow: hidden;\n\n    @media screen and (max-width: 991px) {\n      //cover viewport width regardless of parent margins\n      margin-left: calc(-50vw + 50%);\n      margin-right: calc(-50vw + 50%);\n    }\n  }\n\n  [slot='mobile-heading'] {\n    text-align: center;\n    padding-bottom: 1.6rem;\n    font-weight: 500;\n    color: $blue900;\n    @media screen and (min-width: 769px) {\n      display: none;\n    }\n  }\n\n  .pn-spotlight__container__wrapper {\n    position: relative;\n    max-width: 100%;\n\n    @media screen and (min-width: 992px) {\n      max-width: 90%;\n      margin: 0 auto;\n    }\n\n    @media screen and (min-width: 1640px) {\n      max-width: 80%;\n    }\n  }\n\n  .pn-spotlight__container__wrapper__content {\n    position: relative;\n    margin: 0 auto;\n\n    display: flex;\n    flex-direction: row;\n    left: -57.5px;\n    width: calc(100% + 57.5px);\n\n    @media screen and (min-width: 768px) {\n      left: -50px;\n      width: calc(100% + 50px);\n    }\n\n    @media screen and (min-width: 992px) {\n      left: 0;\n      width: 100%;\n    }\n  }\n\n  .pn-spotlight__container__wrapper__content__ball {\n    border-radius: 50%;\n    min-height: 75px;\n    aspect-ratio: 1 / 1;\n    margin-right: 1.5rem;\n\n    @media screen and (min-width: 768px) {\n      min-height: 85px;\n      margin-right: 2.5rem;\n    }\n\n    @media screen and (min-width: 992px) {\n    }\n\n    @media screen and (min-width: 1200px) {\n    }\n\n    @media screen and (min-width: 1640px) {\n    }\n  }\n\n  [slot='content'] {\n    display: flex;\n    border-top-left-radius: 10rem;\n    border-bottom-left-radius: 10rem;\n    align-items: center;\n    justify-content: right;\n    padding: 0 1.5rem;\n    padding-left: 50px;\n    width: 100%;\n\n    @media screen and (min-width: 768px) {\n    }\n\n    @media screen and (min-width: 992px) {\n      padding: 0 2rem;\n      border-radius: 10rem;\n    }\n  }\n}\n\n//dynamic cta\n.pn-spotlight__container__wrapper.cta--dynamic {\n  @media screen and (min-width: 992px) {\n    width: fit-content;\n  }\n\n  [slot='content'] {\n    @media screen and (min-width: 992px) {\n      padding-left: 4rem;\n    }\n  }\n}\n\n//colors\n\npn-spotlight[data-cta-color='green'] {\n  [slot='content'] {\n    background-color: $green50;\n  }\n\n  .pn-spotlight__container__wrapper__content__ball {\n    background-color: $green50;\n  }\n}\n\npn-spotlight[data-cta-color='coral'] {\n  [slot='content'] {\n    background-color: $coral50;\n  }\n\n  .pn-spotlight__container__wrapper__content__ball {\n    background-color: $coral50;\n  }\n}\n\npn-spotlight[data-cta-color='blue'] {\n  [slot='content'] {\n    background-color: $blue25;\n  }\n\n  .pn-spotlight__container__wrapper__content__ball {\n    background-color: $blue25;\n  }\n}\n\npn-spotlight[data-cta-color='business'] {\n  [slot='content'],\n  .pn-spotlight__container__wrapper__content__ball {\n    background-color: $blue900;\n  }\n}\n\npn-spotlight[data-cta-color='private'] {\n  [slot='content'],\n  .pn-spotlight__container__wrapper__content__ball {\n    background-color: $blue400;\n  }\n}\n\npn-spotlight[data-cta-color='hybrid'] {\n  [slot='content'],\n  .pn-spotlight__container__wrapper__content__ball {\n    background-color: #e9e6e5;\n  }\n}\n","import classNames from 'classnames';\n\nimport { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\n@Component({\n  tag: 'pn-spotlight',\n  styleUrl: 'pn-spotlight.scss',\n})\nexport class PnSpotlight {\n  @Element() hostElement: HTMLElement;\n  @Prop() heading: string = null;\n  @Prop() preamble: string = null;\n  @Prop() isDynamic: boolean = false;\n\n  @State() addDynamic: string = '';\n\n  componentDidLoad() {\n    this.addDynamic = classNames({ 'cta--dynamic': this.isDynamic });\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"pn-spotlight__container\">\n          <slot name=\"mobile-heading\" />\n          <div class={`pn-spotlight__container__wrapper ${this.addDynamic}`}>\n            <div class=\"pn-spotlight__container__wrapper__content\">\n              <div class=\"pn-spotlight__container__wrapper__content__ball\"></div>\n              <slot name=\"content\" />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6FAAA,MAAMA,EAAiB,g6FACvB,MAAAC,EAAeD,E,MCOFE,EAAW,M,sCAEI,K,cACC,K,eACE,M,gBAEC,E,CAE9B,gBAAAC,GACEC,KAAKC,WAAaC,EAAW,CAAE,eAAgBF,KAAKG,W,CAGtD,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,2BACTH,EAAA,QAAAE,IAAA,2CAAME,KAAK,mBACXJ,EAAA,OAAAE,IAAA,2CAAKC,MAAO,oCAAoCR,KAAKC,cACnDI,EAAA,OAAAE,IAAA,2CAAKC,MAAM,6CACTH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,oDACXH,EAAA,QAAAE,IAAA,2CAAME,KAAK,e","ignoreList":[]}
+{"version":3,"names":["pnSpotlightCss","PnSpotlightStyle0","PnSpotlight","componentDidLoad","this","addDynamic","classNames","isDynamic","render","h","Host","key","class","name"],"sources":["src/components/cta/pn-spotlight/pn-spotlight.scss?tag=pn-spotlight","src/components/cta/pn-spotlight/pn-spotlight.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-spotlight {\n  .pn-spotlight__container {\n    overflow: hidden;\n\n    @media screen and (max-width: 991px) {\n      //cover viewport width regardless of parent margins\n      margin-left: calc(-50vw + 50%);\n      margin-right: calc(-50vw + 50%);\n    }\n  }\n\n  [slot='mobile-heading'] {\n    text-align: center;\n    padding-bottom: 1.6rem;\n    font-weight: 500;\n    color: $blue900;\n    @media screen and (min-width: 769px) {\n      display: none;\n    }\n  }\n\n  .pn-spotlight__container__wrapper {\n    position: relative;\n    max-width: 100%;\n\n    @media screen and (min-width: 992px) {\n      max-width: 90%;\n      margin: 0 auto;\n    }\n\n    @media screen and (min-width: 1640px) {\n      max-width: 80%;\n    }\n  }\n\n  .pn-spotlight__container__wrapper__content {\n    position: relative;\n    margin: 0 auto;\n\n    display: flex;\n    flex-direction: row;\n    left: -57.5px;\n    width: calc(100% + 57.5px);\n\n    @media screen and (min-width: 768px) {\n      left: -50px;\n      width: calc(100% + 50px);\n    }\n\n    @media screen and (min-width: 992px) {\n      left: 0;\n      width: 100%;\n    }\n  }\n\n  .pn-spotlight__container__wrapper__content__ball {\n    border-radius: 50%;\n    min-height: 75px;\n    aspect-ratio: 1 / 1;\n    margin-right: 1.5rem;\n\n    @media screen and (min-width: 768px) {\n      min-height: 85px;\n      margin-right: 2.5rem;\n    }\n\n    @media screen and (min-width: 992px) {\n    }\n\n    @media screen and (min-width: 1200px) {\n    }\n\n    @media screen and (min-width: 1640px) {\n    }\n  }\n\n  [slot='content'] {\n    display: flex;\n    border-top-left-radius: 10rem;\n    border-bottom-left-radius: 10rem;\n    align-items: center;\n    justify-content: right;\n    padding: 0 1.5rem;\n    padding-left: 50px;\n    width: 100%;\n\n    @media screen and (min-width: 768px) {\n    }\n\n    @media screen and (min-width: 992px) {\n      padding: 0 2rem;\n      border-radius: 10rem;\n    }\n  }\n}\n\n//dynamic cta\n.pn-spotlight__container__wrapper.cta--dynamic {\n  @media screen and (min-width: 992px) {\n    width: fit-content;\n  }\n\n  [slot='content'] {\n    @media screen and (min-width: 992px) {\n      padding-left: 4rem;\n    }\n  }\n}\n\n//colors\n\npn-spotlight[data-cta-color='green'] {\n  [slot='content'] {\n    background-color: $green50;\n  }\n\n  .pn-spotlight__container__wrapper__content__ball {\n    background-color: $green50;\n  }\n}\n\npn-spotlight[data-cta-color='coral'] {\n  [slot='content'] {\n    background-color: $coral50;\n  }\n\n  .pn-spotlight__container__wrapper__content__ball {\n    background-color: $coral50;\n  }\n}\n\npn-spotlight[data-cta-color='blue'] {\n  [slot='content'] {\n    background-color: $blue25;\n  }\n\n  .pn-spotlight__container__wrapper__content__ball {\n    background-color: $blue25;\n  }\n}\n\npn-spotlight[data-cta-color='business'] {\n  [slot='content'],\n  .pn-spotlight__container__wrapper__content__ball {\n    background-color: $blue900;\n  }\n}\n\npn-spotlight[data-cta-color='private'] {\n  [slot='content'],\n  .pn-spotlight__container__wrapper__content__ball {\n    background-color: $blue400;\n  }\n}\n\npn-spotlight[data-cta-color='hybrid'] {\n  [slot='content'],\n  .pn-spotlight__container__wrapper__content__ball {\n    background-color: #e9e6e5;\n  }\n}\n","import classNames from 'classnames';\n\nimport { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\n@Component({\n  tag: 'pn-spotlight',\n  styleUrl: 'pn-spotlight.scss',\n})\nexport class PnSpotlight {\n  @Element() hostElement: HTMLElement;\n  @Prop() heading: string = null;\n  @Prop() preamble: string = null;\n  @Prop() isDynamic: boolean = false;\n\n  @State() addDynamic: string = '';\n\n  componentDidLoad() {\n    this.addDynamic = classNames({ 'cta--dynamic': this.isDynamic });\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"pn-spotlight__container\">\n          <slot name=\"mobile-heading\" />\n          <div class={`pn-spotlight__container__wrapper ${this.addDynamic}`}>\n            <div class=\"pn-spotlight__container__wrapper__content\">\n              <div class=\"pn-spotlight__container__wrapper__content__ball\"></div>\n              <slot name=\"content\" />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6FAAA,MAAMA,EAAiB,g6FACvB,MAAAC,EAAeD,E,MCOFE,EAAW,M,sCAEI,K,cACC,K,eACE,M,gBAEC,E,kCAE9B,gBAAAC,GACEC,KAAKC,WAAaC,EAAW,CAAE,eAAgBF,KAAKG,W,CAGtD,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,2BACTH,EAAA,QAAAE,IAAA,2CAAME,KAAK,mBACXJ,EAAA,OAAAE,IAAA,2CAAKC,MAAO,oCAAoCR,KAAKC,cACnDI,EAAA,OAAAE,IAAA,2CAAKC,MAAM,6CACTH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,oDACXH,EAAA,QAAAE,IAAA,2CAAME,KAAK,e","ignoreList":[]}