@postnord/pn-marketweb-components 2.8.6 → 2.8.9

package/collection/components/widgets/pn-usp-promoter/usp-promoter.stories.js

@@ -0,0 +1,183 @@
+import readme from "./readme.md";
+
+export default {
+  title: "widgets/Usp Promoter",
+  parameters: {
+    notes: readme
+  }
+};
+
+const Template = ({ ...args }) => {
+  return `
+  <pn-breakpoints break-point-class="dotcom"></pn-breakpoints>
+    <pn-usp-promoter
+      heading="${args.heading}"
+      heading-extension="${args.headingExtension}"
+      body-text="${args.bodyText}"
+      background-gradient="${args.backgroundGradient}"
+      full-width="${args.fullWidth}"
+      right-align="${args.rightAlign}"
+      hide-mobile-image="${args.hideMobileImage}">
+      <div slot="app-store">
+        <a href="http://www.apple.com">
+          <img src="https://se-integration.postnord.com/globalassets/images/other/appstore-transparent.svg">
+        </a>
+        <a href="http://www.google.com">
+          <img src="https://se-integration.postnord.com/globalassets/images/other/googleplay-transparent.svg">
+        </a>
+      </div>
+      <div slot="usp-buttons">
+        <pn-button href=${args.buttonUrl}>${args.buttonLabel} <pn-icon symbol="arrow-right"></pn-icon></pn-button>
+      </div>
+      <div slot="illustration">
+        <pn-scroll>
+          <div slot="scroll-affected">
+            <picture>
+              <img src="https://se-preproduction.postnord.com/globalassets/illustrations/mobilephone.png" /> 
+            </picture>
+          </div>
+        </pn-scroll>
+      </div>
+      <pn-scroll>
+        <div slot="scroll-affected">
+          <picture>
+            <img src="https://se-preproduction.postnord.com/globalassets/illustrations/mobilephone.png" /> 
+          </picture>
+        </div>
+      </pn-scroll>
+    </div>
+    </pn-usp-promoter>
+  `;
+};
+
+export const Primary = Template.bind({});
+Primary.args = {
+  heading: "Track your PostNord",
+  headingExtension: "parcels automatically",
+  bodyText: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed sapien ornare, dictum massa eu, tristique quam. Suspendisse imperdiet a ipsum dictum laoreet. Praesent bibendum tincidunt sem sit amet pulvinar. Phasellus egestas orci non metus viverra malesuada. Nulla facilisi. Nulla et justo faucibus, sodales metus ",
+  buttonLabel: "See all about the app",
+  buttonUrl: "http://www.google.se",
+  backgroundGradient: "linear-gradient(90deg, #FFF 47.46%, #EFFBFF 70.86%)",
+  fullWidth: true,
+  rightAlign: true,
+  hideMobileImage: false,
+};
+
+const WithImageTemplate = ({ ...args }) => {
+  return `
+  <pn-usp-promoter
+    heading="${args.heading}"
+    heading-extension="${args.headingExtension}"
+    body-text="${args.bodyText}"
+    background-gradient="${args.backgroundGradient}"
+    full-width="${args.fullWidth}"
+    right-align="${args.rightAlign}"
+    hide-mobile-image="${args.hideMobileImage}">
+    <div slot="app-store">
+      <a href="http://www.apple.com">
+        <img src="https://se-integration.postnord.com/globalassets/images/other/appstore-transparent.svg">
+      </a>
+      <a href="http://www.google.com">
+        <img src="https://se-integration.postnord.com/globalassets/images/other/googleplay-transparent.svg">
+      </a>
+    </div>
+    <div slot="usp-buttons">
+      <pn-button href=${args.buttonUrl}>${args.buttonLabel} <pn-icon symbol="arrow-right"></pn-icon></pn-button>
+    </div>
+    <div slot="illustration">
+      <pn-scroll>
+        <div slot="scroll-affected">
+          <picture>
+            <img src="https://se-preproduction.postnord.com/globalassets/illustrations/mobilephone.png" /> 
+          </picture>
+        </div>
+      </pn-scroll>
+    </div>
+    <pn-scroll>
+      <div slot="scroll-affected">
+        <picture>
+          <img src="https://se-preproduction.postnord.com/globalassets/illustrations/mobilephone.png" /> 
+        </picture>
+      </div>
+    </pn-scroll>
+  </div>
+  </pn-usp-promoter>
+`;
+};
+
+export const WithImage = WithImageTemplate.bind({});
+WithImage.args = {
+  heading: "Track your PostNord",
+  headingExtension: "parcels automatically",
+  bodyText: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed sapien ornare, dictum massa eu, tristique quam. Suspendisse imperdiet a ipsum dictum laoreet. Praesent bibendum tincidunt sem sit amet pulvinar. Phasellus egestas orci non metus viverra malesuada. Nulla facilisi. Nulla et justo faucibus, sodales metus ",
+  buttonLabel: "See all about the app",
+  buttonUrl: "http://www.google.se",
+  backgroundGradient: "linear-gradient(90deg, #FFF 47.46%, #EFFBFF 70.86%)",
+  fullWidth: true,
+  rightAlign: true,
+  hideMobileImage: false,
+};
+
+const NoImageTemplate = ({ ...args }) => {
+  return `
+    <pn-usp-promoter
+      heading="${args.heading}"
+      heading-extension="${args.headingExtension}"
+      body-text="${args.bodyText}"
+      background-gradient="${args.backgroundGradient}"
+      full-width="${args.fullWidth}"
+      right-align="${args.rightAlign}"
+      hide-mobile-image="${args.hideMobileImage}">
+      <div slot="app-store">
+        <a href="http://www.apple.com">
+          <img src="https://se-integration.postnord.com/globalassets/images/other/appstore-transparent.svg">
+        </a>
+        <a href="http://www.google.com">
+          <img src="https://se-integration.postnord.com/globalassets/images/other/googleplay-transparent.svg">
+        </a>
+      </div>
+      <div slot="usp-buttons">
+        <a href=${args.buttonUrl}>${args.buttonLabel} <pn-icon symbol="arrow-right"> </pn-icon></a>
+      </div>
+      <pn-scroll>
+        <div slot="scroll-affected">
+          <picture>
+            <img src="https://se-preproduction.postnord.com/globalassets/illustrations/mobilephone.png" /> 
+          </picture>
+        </div>
+      </pn-scroll>
+    </div>
+    </pn-usp-promoter>
+  `;
+};
+
+export const NoImage = NoImageTemplate.bind({});
+NoImage.args = {
+  heading: "Track your PostNord",
+  headingExtension: "parcels automatically",
+  bodyText: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed sapien ornare, dictum massa eu, tristique quam. Suspendisse imperdiet a ipsum dictum laoreet. Praesent bibendum tincidunt sem sit amet pulvinar. Phasellus egestas orci non metus viverra malesuada. Nulla facilisi. Nulla et justo faucibus, sodales metus ",
+  buttonLabel: "See all about the app",
+  buttonUrl: "http://www.google.se",
+  backgroundGradient: "linear-gradient(90deg, #FFF 47.46%, #EFFBFF 70.86%)",
+  fullWidth: true,
+  rightAlign: true,
+  hideMobileImage: false,
+};
+
+const MissingProperties = ({...args}) => {
+  return `
+  <pn-usp-promoter>
+  </pn-usp-promoter>
+  `;
+};
+
+export const Empty = MissingProperties.bind({});
+Empty.args = {
+  heading: "Track your PostNord",
+  headingExtension: "parcels automatically",
+  bodyText: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed sapien ornare, dictum massa eu, tristique quam. Suspendisse imperdiet a ipsum dictum laoreet. Praesent bibendum tincidunt sem sit amet pulvinar. Phasellus egestas orci non metus viverra malesuada. Nulla facilisi. Nulla et justo faucibus, sodales metus ",
+  buttonLabel: "See all about the app",
+  buttonUrl: "http://www.google.se",
+  backgroundGradient: "linear-gradient(90deg, #FFF 47.46%, #EFFBFF 70.86%)",
+  fullWidth: true,
+};

package/components/index.d.ts

@@ -88,6 +88,7 @@ export { PnStatsInfoData as PnStatsInfoData } from '../types/components/data-vis
 export { PnSwan as PnSwan } from '../types/components/minor/pn-swan/pn-swan';
 export { PnTeaserCard as PnTeaserCard } from '../types/components/cards/pn-teaser-card/pn-teaser-card';
 export { PnTiletag as PnTitletag } from '../types/components/minor/pn-titletag/pn-titletag';
+export { PnUspPromoter as PnUspPromoter } from '../types/components/widgets/pn-usp-promoter/pn-usp-promoter';
 export { PnVideoOverlay as PnVideoOverlay } from '../types/components/animation/pn-play-on-scroll/pn-video-overlay/pn-video-overlay';
 
 /**

package/components/index.js

@@ -88,4 +88,5 @@ export { PnStatsInfoData, defineCustomElement as defineCustomElementPnStatsInfoD
 export { PnSwan, defineCustomElement as defineCustomElementPnSwan } from './pn-swan.js';
 export { PnTeaserCard, defineCustomElement as defineCustomElementPnTeaserCard } from './pn-teaser-card.js';
 export { PnTitletag, defineCustomElement as defineCustomElementPnTitletag } from './pn-titletag.js';
+export { PnUspPromoter, defineCustomElement as defineCustomElementPnUspPromoter } from './pn-usp-promoter.js';
 export { PnVideoOverlay, defineCustomElement as defineCustomElementPnVideoOverlay } from './pn-video-overlay.js';

package/components/pn-cta-block.js

@@ -13,12 +13,6 @@ const PnCtaBlock$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.isCentered = false;
     this.isSmall = false;
     this.contentTop = false;
-    this.hasIllustrationSlot = true;
-    this.hasButtonSlot = true;
-  }
-  componentWillLoad() {
-    this.hasIllustrationSlot = !!this.hostElement.querySelector('[slot="illustration"]');
-    this.hasButtonSlot = !!this.hostElement.querySelector('[slot="cta-button"]');
   }
   render() {
     return (h(Host, null, h("div", { "pn-background-color": this.pnBackgroundColor, class: `cta-block ${this.isLarge ? 'cta-block--large' : ''}  ${this.isCentered ? 'cta-block--center' : ''}  ${(this.isSmall ? 'cta-block--small' : '')} ${this.contentTop ? 'cta-block--content-top' : ''}` }, h("div", { class: "cta-block__image-wrapper" }, h("slot", { name: "illustration" })), h("div", { class: "cta-block__content" }, h("h2", { class: "cta-block__heading" }, this.heading), h("p", { class: "cta-block__text" }, this.bodyText)), h("div", { class: "cta-block__action" }, h("slot", { name: "cta-button" })))));
@@ -32,9 +26,7 @@ const PnCtaBlock$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "isLarge": [4, "is-large"],
     "isCentered": [4, "is-centered"],
     "isSmall": [4, "is-small"],
-    "contentTop": [4, "content-top"],
-    "hasIllustrationSlot": [32],
-    "hasButtonSlot": [32]
+    "contentTop": [4, "content-top"]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

package/components/pn-link-list.js

@@ -1,64 +1,70 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const pnLinkListCss = "pn-link-list .link-list__heading{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;margin-bottom:0.8rem}@media screen and (min-width: 992px){pn-link-list .link-list__heading{margin-bottom:1.6rem}}pn-link-list .link-list{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;position:relative;overflow:hidden;margin:0;margin-bottom:2.4rem;padding:0}pn-link-list .link-list__container{overflow-x:auto;text-align:center;white-space:nowrap;scrollbar-color:#005D92 #d3cecb}pn-link-list .link-list__container.link-list__active a,pn-link-list .link-list__container.link-list__active li,pn-link-list .link-list__container.link-list__active ul{cursor:grab;cursor:-webkit-grab}pn-link-list .link-list__container::-webkit-scrollbar{height:0.4rem;margin-top:2rem;-webkit-appearance:none}@media screen and (min-width: 768px){pn-link-list .link-list__container::-webkit-scrollbar{height:0.6rem}}pn-link-list .link-list__container::-webkit-scrollbar-thumb{background:#005D92;border-radius:2rem}pn-link-list .link-list__container::-webkit-scrollbar-track{background:#d3cecb;border-radius:2rem;width:100%;margin:0 5rem}@media screen and (min-width: 768px){pn-link-list .link-list__container::-webkit-scrollbar-track{margin:0 10rem}}@media screen and (min-width: 1140px){pn-link-list .link-list__container::-webkit-scrollbar-track{margin:0 15rem}}@media screen and (min-width: 1440px){pn-link-list .link-list__container::-webkit-scrollbar-track{margin:0 20rem}}pn-link-list .link-list__container::-webkit-resizer{display:none}pn-link-list .link-list__container::before,pn-link-list .link-list__container::after{content:\"\";position:absolute;top:0;bottom:0;height:85%;width:10%}pn-link-list .link-list__container::before{background:-webkit-gradient(linear, right top, left top, color-stop(50%, rgba(255, 255, 255, 0)), color-stop(95%, #FFF));background:linear-gradient(270deg, rgba(255, 255, 255, 0) 50%, #FFF 95%);left:0}pn-link-list .link-list__container::after{background:-webkit-gradient(linear, left top, right top, color-stop(50%, rgba(255, 255, 255, 0)), color-stop(95%, #FFF));background:linear-gradient(90deg, rgba(255, 255, 255, 0) 50%, #FFF 95%);right:0}pn-link-list .link-list__scrollable{display:inline-block;padding:2rem 0 1rem}@media screen and (min-width: 992px){pn-link-list .link-list__scrollable{padding:2rem 2rem 1rem}}pn-link-list [slot=linklist] ul{display:-ms-flexbox;display:flex;list-style:none;margin:0;padding:0 1.6rem}pn-link-list [slot=linklist] li>a{display:block;color:#2D2013;font-size:1.4rem;font-weight:500;line-height:140%;text-decoration:none;cursor:pointer;background-color:#FFFFFF;border:0.1rem solid #D3CECB;border-radius:0.8rem;margin:0 0.8rem;padding:1rem}@media screen and (min-width: 1410px){pn-link-list [slot=linklist] li>a{font-size:1.6rem}}pn-link-list [slot=linklist] li>a:hover,pn-link-list [slot=linklist] li>a:active,pn-link-list [slot=linklist] li>a:focus{color:#FFF}pn-link-list [slot=linklist] li>a:hover,pn-link-list [slot=linklist] li>a:focus{background-color:#005D92}pn-link-list [slot=linklist] li>a:active{background-color:#0D234B}pn-link-list [slot=linklist] li>a:focus{outline:2px solid #005D92;outline-offset:2px}pn-link-list .link-list__button{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}@-moz-document url-prefix(){pn-link-list .link-list__scrollable{padding:2rem}}";
+const pnLinkListCss = "pn-link-list .link-list__header{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;margin-bottom:0.8rem}pn-link-list .link-list__heading{margin-bottom:0.8rem}@media screen and (min-width: 1140px){pn-link-list .link-list__heading{font-size:3.2rem}}pn-link-list .link-list__preamble{max-width:85rem;text-align:center;margin-bottom:0}@media screen and (min-width: 1140px){pn-link-list .link-list__preamble{text-wrap:balance}}pn-link-list .link-list{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;position:relative;overflow:hidden;margin:0;margin-bottom:2.4rem;padding:0}pn-link-list .link-list__container{overflow-x:auto;text-align:center;white-space:nowrap}pn-link-list .link-list__container.link-list__active a,pn-link-list .link-list__container.link-list__active li,pn-link-list .link-list__container.link-list__active ul{cursor:grab;cursor:-webkit-grab}pn-link-list .link-list__container::-webkit-scrollbar{height:0.4rem;margin-top:2rem;-webkit-appearance:none}@media screen and (min-width: 768px){pn-link-list .link-list__container::-webkit-scrollbar{height:0.6rem}}pn-link-list .link-list__container::-webkit-scrollbar-thumb{background:#005D92;border-radius:2rem}pn-link-list .link-list__container::-webkit-scrollbar-track{background:#d3cecb;border-radius:2rem;width:100%;margin:0 5rem}@media screen and (min-width: 768px){pn-link-list .link-list__container::-webkit-scrollbar-track{margin:0 10rem}}@media screen and (min-width: 1140px){pn-link-list .link-list__container::-webkit-scrollbar-track{margin:0 15rem}}@media screen and (min-width: 1440px){pn-link-list .link-list__container::-webkit-scrollbar-track{margin:0 20rem}}pn-link-list .link-list__container::-webkit-resizer{display:none}pn-link-list .link-list__container::before,pn-link-list .link-list__container::after{content:\"\";position:absolute;top:0;bottom:0;height:85%;width:10%}pn-link-list .link-list__container::before{background:-webkit-gradient(linear, right top, left top, color-stop(50%, rgba(255, 255, 255, 0)), color-stop(95%, #FFF));background:linear-gradient(270deg, rgba(255, 255, 255, 0) 50%, #FFF 95%);left:0}pn-link-list .link-list__container::after{background:-webkit-gradient(linear, left top, right top, color-stop(50%, rgba(255, 255, 255, 0)), color-stop(95%, #FFF));background:linear-gradient(90deg, rgba(255, 255, 255, 0) 50%, #FFF 95%);right:0}pn-link-list .link-list__scrollable{display:inline-block;padding:2rem 0 1rem}@media screen and (min-width: 992px){pn-link-list .link-list__scrollable{padding:0.5rem 2rem 1rem}}pn-link-list [slot=linklist] ul{display:-ms-flexbox;display:flex;list-style:none;margin:0;padding:0 1.6rem}pn-link-list [slot=linklist] li>a{display:block;color:#2D2013;font-size:1.4rem;font-weight:500;line-height:140%;text-decoration:none;cursor:pointer;background-color:#FFFFFF;border:0.1rem solid #D3CECB;border-radius:0.8rem;margin:0 0.8rem;padding:1rem}@media screen and (min-width: 1410px){pn-link-list [slot=linklist] li>a{font-size:1.6rem}}pn-link-list [slot=linklist] li>a:hover,pn-link-list [slot=linklist] li>a:active,pn-link-list [slot=linklist] li>a:focus{color:#FFF}pn-link-list [slot=linklist] li>a:hover,pn-link-list [slot=linklist] li>a:focus{background-color:#005D92}pn-link-list [slot=linklist] li>a:active{background-color:#0D234B}pn-link-list [slot=linklist] li>a:focus{outline:2px solid #005D92;outline-offset:2px}pn-link-list .link-list__button{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}@-moz-document url-prefix(){pn-link-list .link-list__container{scrollbar-color:#005D92 #d3cecb}pn-link-list .link-list__scrollable{padding:0.5rem 2rem 2rem}}";
 
 const PnLinkList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.slider = null;
+    this.isDragging = false;
+    this.startX = 0;
+    this.scrollLeft = 0;
+    this.handleMouseDown = (e) => {
+      var _a, _b, _c;
+      const target = e.target;
+      const isContainerClick = target.classList.contains('link-list__container');
+      const isLinkClick = target.tagName === 'A';
+      if (isContainerClick || isLinkClick) {
+        this.isDragging = true;
+        (_a = this.slider) === null || _a === void 0 ? void 0 : _a.classList.add('link-list__active');
+        this.startX = e.pageX - ((_b = this.slider) === null || _b === void 0 ? void 0 : _b.offsetLeft);
+        this.scrollLeft = (_c = this.slider) === null || _c === void 0 ? void 0 : _c.scrollLeft;
+        if (isLinkClick) {
+          e.preventDefault();
+        }
+      }
+    };
+    this.handleMouseLeave = () => {
+      var _a;
+      this.isDragging = false;
+      (_a = this.slider) === null || _a === void 0 ? void 0 : _a.classList.remove('link-list__active');
+    };
+    this.handleMouseUp = () => {
+      var _a;
+      this.isDragging = false;
+      (_a = this.slider) === null || _a === void 0 ? void 0 : _a.classList.remove('link-list__active');
+    };
+    this.handleMouseMove = (e) => {
+      var _a;
+      if (this.isDragging) {
+        const x = e.pageX - ((_a = this.slider) === null || _a === void 0 ? void 0 : _a.offsetLeft);
+        const move = (x - this.startX) * 2;
+        this.slider.scrollLeft = this.scrollLeft - move;
+      }
+    };
     this.heading = null;
     this.label = null;
+    this.preamble = null;
     this.url = null;
     this.showMoreLabel = null;
     this.showMoreUrl = null;
-    this.isDown = false;
-    this.startX = 0;
-    this.scrollLeft = 0;
   }
   componentDidLoad() {
     this.slider = document.querySelector('.link-list__container');
   }
-  handleMouseDown(e) {
-    var _a, _b, _c;
-    this.isDown = true;
-    (_a = this.slider) === null || _a === void 0 ? void 0 : _a.classList.add('link-list__active');
-    this.startX = e.pageX - ((_b = this.slider) === null || _b === void 0 ? void 0 : _b.offsetLeft);
-    this.scrollLeft = (_c = this.slider) === null || _c === void 0 ? void 0 : _c.scrollLeft;
-  }
-  handleMouseLeave() {
-    var _a;
-    this.isDown = false;
-    (_a = this.slider) === null || _a === void 0 ? void 0 : _a.classList.remove('link-list__active');
-  }
-  handleMouseUp() {
-    var _a;
-    this.isDown = false;
-    (_a = this.slider) === null || _a === void 0 ? void 0 : _a.classList.remove('link-list__active');
-  }
-  handleMouseMove(e) {
-    var _a;
-    if (!this.isDown)
-      return;
-    e.preventDefault();
-    const x = e.pageX - ((_a = this.slider) === null || _a === void 0 ? void 0 : _a.offsetLeft);
-    const move = (x - this.startX) * 2;
-    this.slider.scrollLeft = this.scrollLeft - move;
-  }
   render() {
-    return (h(Host, null, h("div", { class: "link-list__heading" }, h("h2", null, this.heading)), h("div", { class: "link-list" }, h("div", { class: "link-list__container" }, h("div", { class: "link-list__scrollable" }, h("slot", { name: "linklist" })))), this.showMoreUrl ? h("div", { class: "link-list__button" }, h("pn-button", { appearance: "light", href: this.showMoreUrl }, this.showMoreLabel), " ") : ""));
+    return (h(Host, null, h("div", { class: "link-list__header" }, h("h2", { class: "link-list__heading" }, this.heading), h("p", { class: "link-list__preamble" }, this.preamble)), h("div", { class: "link-list" }, h("div", { class: "link-list__container", onMouseDown: this.handleMouseDown, onMouseUp: this.handleMouseUp, onMouseLeave: this.handleMouseLeave, onMouseMove: this.handleMouseMove }, h("div", { class: "link-list__scrollable" }, h("slot", { name: "linklist" })))), this.showMoreUrl ? h("div", { class: "link-list__button" }, h("pn-button", { appearance: "light", href: this.showMoreUrl }, this.showMoreLabel), " ") : ""));
   }
   static get style() { return pnLinkListCss; }
 }, [4, "pn-link-list", {
     "heading": [1],
     "label": [1],
+    "preamble": [1],
     "url": [1],
     "showMoreLabel": [1, "show-more-label"],
-    "showMoreUrl": [1, "show-more-url"],
-    "isDown": [32],
-    "startX": [32],
-    "scrollLeft": [32]
-  }, [[5, "mousedown", "handleMouseDown"], [5, "mouseleave", "handleMouseLeave"], [5, "mouseup", "handleMouseUp"], [5, "mousemove", "handleMouseMove"]]]);
+    "showMoreUrl": [1, "show-more-url"]
+  }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;

package/components/pn-usp-promoter.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PnUspPromoter extends Components.PnUspPromoter, HTMLElement {}
+export const PnUspPromoter: {
+  prototype: PnUspPromoter;
+  new (): PnUspPromoter;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/pn-usp-promoter.js

@@ -0,0 +1,58 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const pnUspPromoterCss = "pn-usp-promoter{width:80%}pn-usp-promoter .usp-promoter{display:-ms-flexbox;display:flex;-ms-flex-pack:center;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:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter__content{-ms-flex-align:center;align-items:center;text-align:left;-ms-flex-pack:center;justify-content:center}}pn-usp-promoter .usp-promoter__content-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter__content-wrapper{-ms-flex-align:start;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;max-width:45rem}}@media screen and (min-width: 1140px){pn-usp-promoter .usp-promoter__content-heading{font-size:4.8rem;max-width:50rem}}@media screen and (min-width: 1440px){pn-usp-promoter .usp-promoter__content-heading{font-size:5.6rem;max-width:58rem}}pn-usp-promoter .usp-promoter__content-text{font-size:1.6rem;max-width:47rem;margin-bottom:2.6rem}@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:-ms-flexbox;display:flex;-ms-flex-align:start;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;-webkit-transition:background-color 0.2s ease-in-out;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;-webkit-box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #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{-webkit-transition:-webkit-transform 0.3s ease-in-out;transition:-webkit-transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out, -webkit-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{-webkit-transition:-webkit-transform 0.3s ease-in-out;transition:-webkit-transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;-webkit-transform:translateX(0.3rem);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]{-ms-flex-direction:column;flex-direction:column}@media screen and (min-width: 768px){pn-usp-promoter [slot=app-store],pn-usp-promoter [slot=usp-buttons]{display:-ms-flexbox;display:flex;-ms-flex-direction:row;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:-webkit-sticky;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:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}pn-usp-promoter .usp-promoter--right-align .usp-promoter__content{-ms-flex-direction:row-reverse;flex-direction:row-reverse;text-align:right}@media screen and (min-width: 768px){pn-usp-promoter .usp-promoter--right-align .usp-promoter__content{-ms-flex-align:center;align-items:center}}pn-usp-promoter .usp-promoter--right-align .usp-promoter__content-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:end;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]{-ms-flex-align:end;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{-ms-flex-align:center;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:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center}}";
+
+const PnUspPromoter$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.heading = null;
+    this.headingExtension = null;
+    this.bodyText = null;
+    this.backgroundGradient = null;
+    this.fullWidth = false;
+    this.rightAlign = false;
+    this.hideMobileImage = false;
+  }
+  centerMobileContent() {
+    const slot = this.hostElement.querySelector('[slot="illustration"]');
+    if (this.hideMobileImage || slot == null) {
+      return "usp-promoter--hide-image-small-screen";
+    }
+  }
+  render() {
+    const isFullWidth = this.fullWidth ? "usp-promoter--full-width" : "";
+    const isRightAlign = this.rightAlign ? "usp-promoter--right-align" : "";
+    const hasHeadingExtension = this.headingExtension ? "usp-promoter__heading-extension" : "";
+    return (h(Host, null, h("div", { class: `usp-promoter ${isFullWidth} ${isRightAlign} ${this.centerMobileContent()}`, style: { 'background': `${this.backgroundGradient}` } }, h("div", { class: "usp-promoter__content" }, h("slot", { name: "illustration" }), h("div", { class: "usp-promoter__content-wrapper" }, h("h2", { class: `usp-promoter__content-heading ${hasHeadingExtension}` }, h("span", null, this.heading), (this.headingExtension) ? h("span", null, this.headingExtension) : null), h("p", { class: "usp-promoter__content-text" }, this.bodyText), h("slot", { name: "app-store" }), h("slot", { name: "usp-buttons" }))))));
+  }
+  get hostElement() { return this; }
+  static get style() { return pnUspPromoterCss; }
+}, [4, "pn-usp-promoter", {
+    "heading": [1],
+    "headingExtension": [1, "heading-extension"],
+    "bodyText": [1, "body-text"],
+    "backgroundGradient": [1, "background-gradient"],
+    "fullWidth": [4, "full-width"],
+    "rightAlign": [4, "right-align"],
+    "hideMobileImage": [4, "hide-mobile-image"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-usp-promoter"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-usp-promoter":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnUspPromoter$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const PnUspPromoter = PnUspPromoter$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnUspPromoter, defineCustomElement };

package/esm/{index-6ee8c83f.js → index-6a2abc18.js}

@@ -1,4 +1,4 @@
-import { e as getRenderingRef, f as forceUpdate } from './index-70664d8e.js';
+import { e as getRenderingRef, f as forceUpdate } from './index-6e611ed9.js';
 
 const appendToMap = (map, propName, value) => {
     const items = map.get(propName);

package/esm/{index-70664d8e.js → index-6e611ed9.js}

@@ -2055,8 +2055,6 @@ const hostListenerProxy = (hostRef, methodName) => (ev) => {
     }
 };
 const getHostListenerTarget = (elm, flags) => {
-    if (flags & 4 /* LISTENER_FLAGS.TargetDocument */)
-        return doc;
     if (flags & 8 /* LISTENER_FLAGS.TargetWindow */)
         return win;
     return elm;
@@ -2299,6 +2297,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './pn-teaser-card.entry.js').then(processMod, consoleError);
+        case 'pn-usp-promoter':
+          return import(
+            /* webpackMode: "lazy" */
+            './pn-usp-promoter.entry.js').then(processMod, consoleError);
         case 'pn-dropdown-with-multi-input-rows-row':
           return import(
             /* webpackMode: "lazy" */