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

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

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

Files changed (1163) hide show

package/dist/cjs/pn-teaser-card.cjs.entry.js.map CHANGED Viewed

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

package/dist/cjs/pn-titletag.cjs.entry.js CHANGED Viewed

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

package/dist/cjs/pn-titletag.cjs.entry.js.map CHANGED Viewed

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

package/dist/cjs/pn-usp-promoter.cjs.entry.js CHANGED Viewed

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

package/dist/cjs/pn-usp-promoter.cjs.entry.js.map CHANGED Viewed

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

package/dist/collection/collection-manifest.json CHANGED Viewed

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

package/dist/collection/components/animation/pn-animated-tile/pn-animated-tile.css CHANGED Viewed

@@ -2,31 +2,6 @@ pn-button-dropdown .pn-button-dropdown > pn-button > .pn-button {
   min-height: initial;
 }
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-}
-@media screen and (max-width: 767px) {
-  .sr-only-mobile {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border-width: 0;
-  }
-}
 pn-animated-tile .pn-animated-tile__container {
   position: relative;
   border-radius: 2.4rem;

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

@@ -2,31 +2,6 @@ pn-button-dropdown .pn-button-dropdown > pn-button > .pn-button {
   min-height: initial;
 }
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-}
-@media screen and (max-width: 767px) {
-  .sr-only-mobile {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border-width: 0;
-  }
-}
 pn-video-overlay.pn-video-overlay--show-overlay {
   position: absolute;
   width: 100%;

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

@@ -2,31 +2,6 @@ pn-button-dropdown .pn-button-dropdown > pn-button > .pn-button {
   min-height: initial;
 }
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-}
-@media screen and (max-width: 767px) {
-  .sr-only-mobile {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border-width: 0;
-  }
-}
 pn-line-shape .pn-line-shape__container {
   display: flex;
 }

package/dist/collection/components/cards/pn-quote-card/pn-quote-card.css CHANGED Viewed

@@ -2,31 +2,6 @@ pn-button-dropdown .pn-button-dropdown > pn-button > .pn-button {
   min-height: initial;
 }
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-}
-@media screen and (max-width: 767px) {
-  .sr-only-mobile {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border-width: 0;
-  }
-}
 pn-quote-card .pn-quote-card__container {
   margin: 0 auto;
   display: flex;

package/dist/collection/components/cards/pn-teaser-card/pn-teaser-card.css CHANGED Viewed

@@ -2,31 +2,6 @@ pn-button-dropdown .pn-button-dropdown > pn-button > .pn-button {
   min-height: initial;
 }
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-}
-@media screen and (max-width: 767px) {
-  .sr-only-mobile {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border-width: 0;
-  }
-}
 .block.teasercardblock a[data-block-clickable-link=true] {
   z-index: 1;
 }

package/dist/collection/components/cards/pn-teaser-card/pn-teaser-card.js CHANGED Viewed

@@ -1,11 +1,10 @@
 import { h, Host } from "@stencil/core";
-import { HeadingTag } from "../../../globals/HeadingTag";
 export class PnTeaserCard {
     constructor() {
         this.text = null;
         this.heading = null;
         this.label = null;
-        this.headingLevel = 'h3';
+        this.headingLevel = undefined;
         this.dataCardColor = 'coral';
         this.dataCardAlignment = 'left';
         this.hasCtaSlotContent = false;
@@ -15,10 +14,15 @@ export class PnTeaserCard {
     componentWillLoad() {
         this.hasCtaSlotContent = !!this.hostElement.querySelector('[slot="cta"]');
         this.hasIllustrationSlot = !!this.hostElement.querySelector('[slot="illustration"]');
+        if (!this.headingLevel || isNaN(this.headingLevel)) {
+            this.headingLevel = 3;
+        }
     }
+    //render
     render() {
         const labelToCapitals = this.label?.toUpperCase();
-        return (h(Host, { key: 'b5ee6a71383c676dff65be68bd2c583af8d4b73e' }, h("slot", { key: '26f672cccdf0b4a647608dec90d9da91d5326f2e', name: "clickable-block-wrapper" }), h("div", { key: '664a86e96d02078ad7d3b9feec848620b08a64e7', class: "pn-teaser-card__container" }, h("div", { key: 'b2690687573bc1421b4087b25574aac4e1bf210e', class: `pn-teaser-card__container__image__container ${!this.hasIllustrationSlot ? 'pn-teaser-card__container__image__container--no-image' : ''}` }, h("slot", { key: '92c205f97f90b35df8f34f6905ebb5f858ba3115', name: "illustration" })), h("div", { key: 'f9b96157ea921c801f993133b0b4e7d785224a3b', class: "pn-teaser-card__container__content" }, h("div", { key: '150b6993e403a65c3d75794554b39a2c4c073099', class: "pn-teaser-card__container__content__text__container" }, labelToCapitals && h("span", { key: '20973e8c988b6f3c5bed312ad6f5e339f22565f4', class: "pn-teaser-card__container__content__text__container__label" }, labelToCapitals), this.heading && h(HeadingTag, { key: '64cdb89e6106839ef6bd7d6a6912c69bad4e1d85', level: this.headingLevel, cssClass: "pn-teaser-card__container__content__text__container__heading" }, this.heading), h("p", { key: '7366108ac28438903a71cb89e6a4d70d3e5ef96a', class: "pn-teaser-card__container__content__text__container__preamble" }, this.text)), this.hasCtaSlotContent && (h("div", { key: 'dcee0ddb4c36f90e321db3c8817b444794851b93', class: "pn-teaser-card__container__content__cta" }, h("slot", { key: '1aedb8f19e547e163676b76b502a155603c0b3ce', name: "cta" })))))));
+        const HeadingTag = `h${this.headingLevel ?? 3}`;
+        return (h(Host, { key: '25cfc8729df548f28a7577a2d0fdc3065d30e5e5' }, h("slot", { key: '834e0525865f88c787934c10e01ec6383cb91ce5', name: "clickable-block-wrapper" }), h("div", { key: 'ba3820116797f86be9db43183a64db20a91887df', class: "pn-teaser-card__container" }, h("div", { key: 'cdd17367c264860077cdf2aff76fe381b1be1e5e', class: `pn-teaser-card__container__image__container ${!this.hasIllustrationSlot ? 'pn-teaser-card__container__image__container--no-image' : ''}` }, h("slot", { key: '38a98a3440f3b29a1028abcaa31803d0de4dd917', name: "illustration" })), h("div", { key: '528a7a7425b031486521270ac184de4c1a34a9a0', class: "pn-teaser-card__container__content" }, h("div", { key: '7e848e8fe005a8aa9867861abc355b610150d44b', class: "pn-teaser-card__container__content__text__container" }, labelToCapitals && h("span", { key: 'c741d9222acf8cb73f8c0060c799911d21fe26d8', class: "pn-teaser-card__container__content__text__container__label" }, labelToCapitals), this.heading && h(HeadingTag, { key: 'c74daeb97ac60690c146832417ac394825fadef0', class: "pn-teaser-card__container__content__text__container__heading" }, this.heading), h("p", { key: '0da77ddcf36cadaad9df5bfbefcb2609bc7161c8', class: "pn-teaser-card__container__content__text__container__preamble" }, this.text)), this.hasCtaSlotContent && (h("div", { key: '1af0c6c39adfa993abacc832c1bc8326e4f3996b', class: "pn-teaser-card__container__content__cta" }, h("slot", { key: '6bc3e69ed72ad8dc978d40f2ebb1b28bc6f2be51', name: "cta" })))))));
     }
     static get is() { return "pn-teaser-card"; }
     static get originalStyleUrls() {
@@ -88,11 +92,11 @@ export class PnTeaserCard {
                 "defaultValue": "null"
             },
             "headingLevel": {
-                "type": "string",
+                "type": "number",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "number",
+                    "resolved": "number",
                     "references": {}
                 },
                 "required": false,
@@ -102,8 +106,7 @@ export class PnTeaserCard {
                     "text": ""
                 },
                 "attribute": "heading-level",
-                "reflect": false,
-                "defaultValue": "'h3'"
+                "reflect": false
             },
             "dataCardColor": {
                 "type": "string",

package/dist/collection/components/cards/pn-teaser-card/pn-teaser-card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pn-teaser-card.js","sourceRoot":"","sources":["../../../../src/components/cards/pn-teaser-card/pn-teaser-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;~~AACzE~~,~~OAAO,EAAE,UAAU,EAAE,~~MAAM,~~sBAAsB,CAAC;AAMlD,MAAM,~~OAAO,YAAY;;oBAGA,IAAI;uBACD,IAAI;qBACL,IAAI~~;4BACG~~,~~IAAI;6BACa,~~OAAO;iCACH,MAAM;iCAErB,KAAK;mCACH,IAAI;;IAVjC,WAAW,CAAc;IAYpC,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;~~IACvF~~,CAAC;IAED,MAAM;QACJ,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,EAAE,WAAW,EAAE,CAAC;~~QAElD~~,OAAO,CACL,EAAC,IAAI;YACH,6DAAM,IAAI,EAAC,yBAAyB,GAAG;YACvC,4DAAK,KAAK,EAAC,2BAA2B;gBACpC,4DAAK,KAAK,EAAE,+CAA+C,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,uDAAuD,CAAC,CAAC,CAAC,EAAE,EAAE;oBACnJ,6DAAM,IAAI,EAAC,cAAc,GAAG,CACxB;gBACN,4DAAK,KAAK,EAAC,oCAAoC;oBAC7C,4DAAK,KAAK,EAAC,qDAAqD;wBAC7D,eAAe,IAAI,6DAAM,KAAK,EAAC,4DAA4D,IAAE,eAAe,CAAQ;wBACpH,IAAI,CAAC,OAAO,IAAI,EAAC,UAAU,qDAAC,KAAK,~~EAAE,IAAI,CAAC,YAAY,EAAE,QAAQ,~~EAAC,8DAA8D,~~IACzH~~,IAAI,CAAC,OAAO,~~CACF~~;~~wBACf~~,0DAAG,KAAK,EAAC,+DAA+D,IAAE,IAAI,CAAC,IAAI,CAAK,CACpF;oBACL,IAAI,CAAC,iBAAiB,IAAI,CACzB,4DAAK,KAAK,EAAC,yCAAyC;wBAClD,6DAAM,IAAI,EAAC,KAAK,GAAG,CACf,CACP,CACG,CACF,CACD,CACR,CAAC;IACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import { Component, Prop, h, Element, State, Host } from \"@stencil/core\";\~~nimport { HeadingTag } from '@/globals/HeadingTag';\~~n\n@Component({\n tag: 'pn-teaser-card',\n styleUrl: 'pn-teaser-card.scss'\n})\nexport class PnTeaserCard {\n @Element() hostElement: HTMLElement;\n \n @Prop() text: string = null;\n @Prop() heading: string = null;\n @Prop() label?: string = null;\n @Prop() headingLevel?: ~~string = 'h3'~~;\n @Prop({ reflect: true }) dataCardColor: string = 'coral';\n @Prop({ reflect: true }) dataCardAlignment: string = 'left';\n\n @State() hasCtaSlotContent: boolean = false;\n @State() hasIllustrationSlot: boolean = true;\n\n componentWillLoad() {\n this.hasCtaSlotContent = !!this.hostElement.querySelector('[slot=\"cta\"]');\n this.hasIllustrationSlot = !!this.hostElement.querySelector('[slot=\"illustration\"]');\n }\n\n render() {\n const labelToCapitals = this.label?.toUpperCase();\n\n return (\n <Host>\n <slot name=\"clickable-block-wrapper\" />\n <div class=\"pn-teaser-card__container\">\n <div class={`pn-teaser-card__container__image__container ${!this.hasIllustrationSlot ? 'pn-teaser-card__container__image__container--no-image' : ''}`}>\n <slot name=\"illustration\" />\n </div>\n <div class=\"pn-teaser-card__container__content\">\n <div class=\"pn-teaser-card__container__content__text__container\">\n {labelToCapitals && <span class=\"pn-teaser-card__container__content__text__container__label\">{labelToCapitals}</span>}\n {this.heading && <HeadingTag ~~level={this.headingLevel} cssClass~~=\"pn-teaser-card__container__content__text__container__heading\"~~>\n~~ {this.heading}\n </HeadingTag>}\n <p class=\"pn-teaser-card__container__content__text__container__preamble\">{this.text}</p>\n </div>\n {this.hasCtaSlotContent && (\n <div class=\"pn-teaser-card__container__content__cta\">\n <slot name=\"cta\" />\n </div>\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"pn-teaser-card.js","sourceRoot":"","sources":["../../../../src/components/cards/pn-teaser-card/pn-teaser-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAMzE,MAAM,OAAO,YAAY;;oBAGA,IAAI;uBACD,IAAI;qBACL,IAAI;;6BAEoB,OAAO;iCACH,MAAM;iCAErB,KAAK;mCACH,IAAI;;IAVjC,WAAW,CAAc;IAYpC,iBAAiB;QACf,IAAI,CAAC,iBAAiB,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;QAC1E,IAAI,CAAC,mBAAmB,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;QAErF,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,KAAK,CAAC,IAAI,CAAC,YAAmB,CAAC,EAAE,CAAC;YAC1D,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;QACxB,CAAC;IACH,CAAC;IAED,QAAQ;IACR,MAAM;QACJ,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,EAAE,WAAW,EAAE,CAAC;QAClD,MAAM,UAAU,GAAG,IAAI,IAAI,CAAC,YAAY,IAAI,CAAC,EAAE,CAAC;QAEhD,OAAO,CACL,EAAC,IAAI;YACH,6DAAM,IAAI,EAAC,yBAAyB,GAAG;YACvC,4DAAK,KAAK,EAAC,2BAA2B;gBACpC,4DAAK,KAAK,EAAE,+CAA+C,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,uDAAuD,CAAC,CAAC,CAAC,EAAE,EAAE;oBACnJ,6DAAM,IAAI,EAAC,cAAc,GAAG,CACxB;gBACN,4DAAK,KAAK,EAAC,oCAAoC;oBAC7C,4DAAK,KAAK,EAAC,qDAAqD;wBAC7D,eAAe,IAAI,6DAAM,KAAK,EAAC,4DAA4D,IAAE,eAAe,CAAQ;wBACpH,IAAI,CAAC,OAAO,IAAI,EAAC,UAAU,qDAAC,KAAK,EAAC,8DAA8D,IAAE,IAAI,CAAC,OAAO,CAAc;wBAC7H,0DAAG,KAAK,EAAC,+DAA+D,IAAE,IAAI,CAAC,IAAI,CAAK,CACpF;oBACL,IAAI,CAAC,iBAAiB,IAAI,CACzB,4DAAK,KAAK,EAAC,yCAAyC;wBAClD,6DAAM,IAAI,EAAC,KAAK,GAAG,CACf,CACP,CACG,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Element, State, Host } from \"@stencil/core\";\n\n@Component({\n tag: 'pn-teaser-card',\n styleUrl: 'pn-teaser-card.scss'\n})\nexport class PnTeaserCard {\n @Element() hostElement: HTMLElement;\n //props\n @Prop() text: string = null;\n @Prop() heading: string = null;\n @Prop() label?: string = null;\n @Prop() headingLevel?: number;\n @Prop({ reflect: true }) dataCardColor: string = 'coral';\n @Prop({ reflect: true }) dataCardAlignment: string = 'left';\n\n @State() hasCtaSlotContent: boolean = false;\n @State() hasIllustrationSlot: boolean = true;\n\n componentWillLoad() {\n this.hasCtaSlotContent = !!this.hostElement.querySelector('[slot=\"cta\"]');\n this.hasIllustrationSlot = !!this.hostElement.querySelector('[slot=\"illustration\"]');\n\n if (!this.headingLevel \|\| isNaN(this.headingLevel as any)) {\n this.headingLevel = 3;\n }\n }\n\n //render\n render() {\n const labelToCapitals = this.label?.toUpperCase();\n const HeadingTag = `h${this.headingLevel ?? 3}`;\n\n return (\n <Host>\n <slot name=\"clickable-block-wrapper\" />\n <div class=\"pn-teaser-card__container\">\n <div class={`pn-teaser-card__container__image__container ${!this.hasIllustrationSlot ? 'pn-teaser-card__container__image__container--no-image' : ''}`}>\n <slot name=\"illustration\" />\n </div>\n <div class=\"pn-teaser-card__container__content\">\n <div class=\"pn-teaser-card__container__content__text__container\">\n {labelToCapitals && <span class=\"pn-teaser-card__container__content__text__container__label\">{labelToCapitals}</span>}\n {this.heading && <HeadingTag class=\"pn-teaser-card__container__content__text__container__heading\">{this.heading}</HeadingTag>}\n <p class=\"pn-teaser-card__container__content__text__container__preamble\">{this.text}</p>\n </div>\n {this.hasCtaSlotContent && (\n <div class=\"pn-teaser-card__container__content__cta\">\n <slot name=\"cta\" />\n </div>\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/cards/pn-teaser-card/pn-teaser-card.stories.js CHANGED Viewed

@@ -188,19 +188,19 @@ OneThird.args = {
       heading: 'E-commerce & Logistics',
       text: 'Pellentesque lectus orci, ullamcorper a quam in, malesuada efficitur nulla. Duis rhoncus suscipit tortor, at volutpat magna posuere scelerisque. Fusce vitae sem tristique',
       buttonLabel: 'Some button',
-      headingLevel: 'h2',
+      headingLevel: '',
     },
     {
       heading: 'Lorem ipsum dolor sit amet',
       text: 'Pellentesque lectus orci, ullamcorper a quam in, malesuada efficitur nulla. Duis rhoncus suscipit tortor, at volutpat magna posuere scelerisque. Fusce vitae sem tristique Pellentesque lectus orci',
       buttonLabel: 'Some button',
-      headingLevel: 'h2',
+      headingLevel: 2,
     },
     {
       heading: 'Communications',
       text: 'Pellentesque lectus orci, ullamcorper a quam in eargareg aergarea aerg aergaeg a aer gaerg ',
       buttonLabel: 'Some button',
-      headingLevel: 'h1',
+      headingLevel: 1,
     },
   ],
 };

package/dist/collection/components/charts/pn-chart/pn-chart.css CHANGED Viewed

@@ -2,31 +2,6 @@ pn-button-dropdown .pn-button-dropdown > pn-button > .pn-button {
   min-height: initial;
 }
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-}
-@media screen and (max-width: 767px) {
-  .sr-only-mobile {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border-width: 0;
-  }
-}
 pn-chart {
   display: flex;
   height: 100%;

package/dist/collection/components/charts/pn-charts-card/pn-charts-card.css CHANGED Viewed

@@ -2,31 +2,6 @@ pn-button-dropdown .pn-button-dropdown > pn-button > .pn-button {
   min-height: initial;
 }
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-}
-@media screen and (max-width: 767px) {
-  .sr-only-mobile {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border-width: 0;
-  }
-}
 pn-charts-card {
   width: 100%;
   height: 100%;

package/dist/collection/components/cta/pn-cta-block/pn-cta-block.css CHANGED Viewed

@@ -2,31 +2,6 @@ pn-button-dropdown .pn-button-dropdown > pn-button > .pn-button {
   min-height: initial;
 }
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-}
-@media screen and (max-width: 767px) {
-  .sr-only-mobile {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border-width: 0;
-  }
-}
 pn-cta-block {
   display: flex;
   justify-content: center;

package/dist/collection/components/cta/pn-parcel-tracker/pn-parcel-tracker.css CHANGED Viewed

@@ -2,31 +2,6 @@ pn-button-dropdown .pn-button-dropdown > pn-button > .pn-button {
   min-height: initial;
 }
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-}
-@media screen and (max-width: 767px) {
-  .sr-only-mobile {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border-width: 0;
-  }
-}
 pn-spotlight .pn-spotlight__container:has(pn-parcel-tracker) [slot=mobile-heading] {
   color: #005d92;
 }