@postnord/pn-marketweb-components 2.8.4 → 2.8.5

package/components/pn-media-block.js

@@ -0,0 +1,232 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$4 } from './pn-play-on-scroll2.js';
+import { d as defineCustomElement$3 } from './pn-scroll2.js';
+import { d as defineCustomElement$2 } from './pn-video-overlay2.js';
+
+const pnMediaBlockCss = "pn-media-block .media-block .media-block__block-container{display:grid;overflow:hidden}pn-media-block .media-block .media-block__media-container,pn-media-block .media-block .media-block__content-container,pn-media-block .media-block .media-block__overlay-filter{grid-area:1/1;width:100%;position:relative}pn-media-block .media-block .media-block__media-container{height:100vh;overflow:hidden;position:relative}pn-media-block .media-block .media-block__media-container img,pn-media-block .media-block .media-block__media-container video{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);-o-object-fit:cover;object-fit:cover;pointer-events:none;max-width:100%;max-height:none;height:100%;width:100%;pointer-events:none}pn-media-block .media-block .media-block__media-container pn-play-on-scroll{width:100%;height:100%}pn-media-block .media-block .media-block__media-container .scroll-wrapper{width:100%;height:100%}pn-media-block .media-block .media-block__media-container [slot=scroll-affected]{width:100%;height:100%;display:-ms-flexbox;display:flex}pn-media-block .media-block .media-block__media-container .scroll-wrapper,pn-media-block .media-block .media-block__media-container .scroll-affected{width:100%;height:100%;display:-ms-flexbox;display:flex}pn-media-block .media-block .media-block__media-container video{width:100%;height:100%}pn-media-block .media-block .media-block__overlay-filter{z-index:2}pn-media-block .media-block .media-block__content-container{z-index:3;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-transition:opacity 1s;transition:opacity 1s;-ms-flex-direction:column;flex-direction:column;margin:0 auto;padding:3.4rem 0;width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media (min-width: 576px){pn-media-block .media-block .media-block__content-container{max-width:540px}}@media (min-width: 768px){pn-media-block .media-block .media-block__content-container{max-width:720px}}@media (min-width: 992px){pn-media-block .media-block .media-block__content-container{max-width:960px}}@media (min-width: 1200px){pn-media-block .media-block .media-block__content-container{max-width:1140px}}@media (min-width: 1640px){pn-media-block .media-block .media-block__content-container{max-width:1440px}}@media screen and (min-width: 992px){pn-media-block .media-block .media-block__content-container{padding:6.4rem 0}}@media screen and (min-width: 1200px){pn-media-block .media-block .media-block__content-container{padding:7.2rem 0}}@media screen and (min-width: 1640px){pn-media-block .media-block .media-block__content-container{padding:8rem 0}}pn-media-block .media-block .media-block__content-container .media-block__block-heading{max-width:100rem;text-wrap:balance;color:white;font-size:3.2rem;text-align:center;font-weight:700;line-height:1.1;margin-bottom:3rem}@media screen and (min-width: 576px){pn-media-block .media-block .media-block__content-container .media-block__block-heading{font-size:4rem}}@media screen and (min-width: 768px){pn-media-block .media-block .media-block__content-container .media-block__block-heading{font-size:4.8rem}}@media screen and (min-width: 992px){pn-media-block .media-block .media-block__content-container .media-block__block-heading{font-size:5.6rem}}@media screen and (min-width: 1200px){pn-media-block .media-block .media-block__content-container .media-block__block-heading{font-size:8rem}}@media screen and (min-width: 1640px){pn-media-block .media-block .media-block__content-container .media-block__block-heading{font-size:8.8rem}}pn-media-block .media-block .media-block__content-container .media-block__preamble{max-width:80rem;max-width:80ch;text-wrap:balance;display:-ms-flexbox;display:flex;color:white;font-size:1.8rem;text-align:center;font-weight:300}@media screen and (min-width: 576px){pn-media-block .media-block .media-block__content-container .media-block__preamble{font-size:2rem}}@media screen and (min-width: 1200px){pn-media-block .media-block .media-block__content-container .media-block__preamble{font-size:2.4rem}}@media screen and (min-width: 1640px){pn-media-block .media-block .media-block__content-container .media-block__preamble{font-weight:500}}pn-media-block .media-block .media-block__content-container .media-block__cta-link{margin-top:3rem}pn-media-block .media-block--height-100svh{height:100vh}@supports (height: 100svh){pn-media-block .media-block--height-100svh{height:100svh}}pn-media-block .media-block--height-100svh .media-block__block-container{height:100vh}@supports (max-height: 100svh){pn-media-block .media-block--height-100svh .media-block__block-container{max-height:100svh}}pn-media-block .media-block--height-100svh .media-block__block-container .media-block__media-container,pn-media-block .media-block--height-100svh .media-block__block-container .media-block__content-container,pn-media-block .media-block--height-100svh .media-block__block-container .media-block__overlay-filter{height:100vh}@supports (max-height: 100svh){pn-media-block .media-block--height-100svh .media-block__block-container .media-block__media-container,pn-media-block .media-block--height-100svh .media-block__block-container .media-block__content-container,pn-media-block .media-block--height-100svh .media-block__block-container .media-block__overlay-filter{max-height:100svh}}pn-media-block .media-block--height-100svh .media-block__block-container .media-block__media-container picture{height:100vh}@supports (max-height: 100svh){pn-media-block .media-block--height-100svh .media-block__block-container .media-block__media-container picture{max-height:100svh}}pn-media-block .media-block--height-65svh{height:65svh;overflow:auto}pn-media-block .media-block--height-65svh .media-block__block-container{height:65vh}@supports (max-height: 100svh){pn-media-block .media-block--height-65svh .media-block__block-container{max-height:65svh}}pn-media-block .media-block--height-65svh .media-block__block-container .media-block__media-container,pn-media-block .media-block--height-65svh .media-block__block-container .media-block__content-container,pn-media-block .media-block--height-65svh .media-block__block-container .media-block__overlay-filter{height:65vh}@supports (max-height: 100svh){pn-media-block .media-block--height-65svh .media-block__block-container .media-block__media-container,pn-media-block .media-block--height-65svh .media-block__block-container .media-block__content-container,pn-media-block .media-block--height-65svh .media-block__block-container .media-block__overlay-filter{max-height:65svh}}pn-media-block .media-block--height-65svh .media-block__media-container img{max-height:none !important;height:auto !important}pn-media-block .media-block--height-dynamic{height:auto;overflow:auto}pn-media-block .media-block--height-dynamic .media-block__block-container{height:auto;max-height:none}pn-media-block .media-block--height-dynamic .media-block__block-container .media-block__media-container,pn-media-block .media-block--height-dynamic .media-block__block-container .media-block__content-container,pn-media-block .media-block--height-dynamic .media-block__block-container .media-block__overlay-filter{height:auto;max-height:none}pn-media-block .media-block--with-overlay .media-block__block-container .media-block__overlay-filter{z-index:2;background:radial-gradient(circle, rgba(13, 35, 75, 0.68) 7%, rgba(13, 35, 75, 0) 80%)}pn-media-block .media-block--fixed-background .media-block__block-container .media-block__media-container,pn-media-block .media-block--fixed-background .media-block__block-container .media-block__overlay-filter{position:relative;overflow:hidden;top:0;width:100%;display:-ms-flexbox !important;display:flex !important;-webkit-clip-path:inset(0);clip-path:inset(0)}pn-media-block .media-block--fixed-background .media-block__block-container .media-block__media-container picture{position:absolute;top:0;width:100%;display:-ms-flexbox !important;display:flex !important;-webkit-clip-path:inset(0);clip-path:inset(0);height:100%}pn-media-block .media-block--fixed-background .media-block__block-container .media-block__media-container picture img{position:fixed;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;z-index:1}pn-media-block .media-block--video .media-block__content-container{max-width:80%}pn-media-block .media-block--animate-overlay-background .media-block__overlay-filter{background-size:200% 200% !important;-webkit-animation:overlayBackgroundAnimation 20s ease infinite;animation:overlayBackgroundAnimation 20s ease infinite}@-webkit-keyframes overlayBackgroundAnimation{0%{background-position:100% 100%}50%{background-position:50% 60%}100%{background-position:100% 100%}}@keyframes overlayBackgroundAnimation{0%{background-position:100% 100%}50%{background-position:50% 60%}100%{background-position:100% 100%}}";
+
+function userPrefersReducedMotion() {
+  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+const PnmediaBlock = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.handleScroll = () => {
+      if (!this.parallaxScroll)
+        return;
+      const mediaBlockElement = this.block.firstElementChild;
+      const scrollTrigger = this.block.querySelector('#scroll-trigger');
+      const videoPauseButton = this.block.querySelector('#overlayed-button-pause-video');
+      const scrollTriggerTop = scrollTrigger.getBoundingClientRect().top;
+      const mediaBlockElementHeight = mediaBlockElement.offsetHeight;
+      const scrollPosition = mediaBlockElementHeight - scrollTriggerTop;
+      const parallaxSpeedContent = 0.3;
+      const parallaxSpeedMedia = 0.2;
+      const mediaContainer = this.block.querySelector('.media-block__media-container');
+      const content = this.block.querySelector('.media-block__content-container');
+      if (mediaContainer != null) {
+        // Move the image or video at a slower speed
+        mediaContainer.style.transform = `translate(0, ${scrollPosition * (0.1 + parallaxSpeedMedia)}px)`;
+        if (videoPauseButton != null) {
+          // Move the pause button up
+          videoPauseButton.style.transform = `translate(0, ${-scrollPosition * (0.3 + parallaxSpeedMedia)}px)`;
+        }
+      }
+      if (content) {
+        // Move the content at a faster speed
+        content.style.transform = `translate(0, ${scrollPosition * (0.5 + parallaxSpeedContent)}px)`;
+        // Change the opacity based on the scroll position
+        const opacity = Math.max(0, 1 - scrollPosition / 600);
+        content.style.opacity = `${opacity}`;
+      }
+    };
+    this.blockHeight = null;
+    this.imageSrc = null;
+    this.imageSrcSmallScreenFormat = undefined;
+    this.imageAltText = "";
+    this.videoSrc = null;
+    this.parallaxScroll = false;
+    this.showOverlayLayer = false;
+    this.customOverlayBackground = null;
+    this.animateOverlayBackground = false;
+    this.scrollSnapBlock = false;
+    this.fixedBackground = false;
+    this.blockHeading = null;
+    this.blockHeadingLevel = 2;
+    this.blockPreamble = null;
+    this.blockLinkText = null;
+    this.blockLinkUrl = null;
+    this.pnPlayOnScrollObserverOptions = {
+      root: document,
+      threshold: 1,
+      rootMargin: '220px 0px 220px 0px',
+    };
+    this.calculatedBlockHeight = undefined;
+    this.hasButtonSlot = true;
+  }
+  get blockHeadingLevelChecked() {
+    if (this.blockLinkText && this.blockLinkUrl === null) {
+      console.warn('blockHeadingLevel is required when blockHeading is set');
+      return undefined;
+    }
+    return this.blockHeadingLevel;
+  }
+  get hasBlockCta() {
+    if (this.blockLinkText && this.blockLinkUrl) {
+      return true;
+    }
+    return false;
+  }
+  get hasVideo() {
+    if (this.videoSrc !== null && this.videoSrc !== "undefined") {
+      return true;
+    }
+    return false;
+  }
+  get hasImage() {
+    if (this.imageSrc !== null && this.imageSrc !== "undefined") {
+      return true;
+    }
+    return false;
+  }
+  componentWillLoad() {
+    this.hasButtonSlot = !!this.block.querySelector('[slot="cta-button"]');
+  }
+  async componentDidLoad() {
+    if (userPrefersReducedMotion()) {
+      // Handle the case where the user prefers reduced motion.
+      // For example, you might disable parallax scrolling:
+      this.parallaxScroll = false;
+    }
+    const scrollTrigger = document.getElementById('scroll-trigger');
+    this.calculatedBlockHeight = this.block.offsetHeight;
+    const overlayElement = this.block.querySelector('#mediaBlockOverlay');
+    if (this.customOverlayBackground != null || this.customOverlayBackground != "undefined") {
+      overlayElement.style.background = `${this.customOverlayBackground}`;
+    }
+    if (this.parallaxScroll) {
+      this.observerScroll = new IntersectionObserver(entries => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            window.addEventListener('scroll', this.handleScroll);
+          }
+          else {
+            window.removeEventListener('scroll', this.handleScroll);
+          }
+        });
+      }, { rootMargin: `0px 0px` });
+      this.observerScroll.observe(scrollTrigger);
+    }
+    if (this.scrollSnapBlock) {
+      this.observerSnap = new IntersectionObserver(entries => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            // The block is within 100px of the viewport, scroll it into view
+            if (this.block instanceof HTMLElement) {
+              setTimeout(() => {
+                this.block.scrollIntoView({ behavior: 'smooth', block: 'start' });
+              }, 1000); // Adjust the delay as needed
+            }
+            else {
+              console.error('this.block is not a valid HTMLElement');
+            }
+          }
+        });
+      }, {
+        root: document,
+        rootMargin: "100px 0px 100px 0px",
+        threshold: 0
+      });
+      this.observerSnap.observe(scrollTrigger);
+    }
+  }
+  disconnectedCallback() {
+    // Clean up the observer and event listener when the component is removed
+    if (this.observerScroll) {
+      this.observerScroll.disconnect();
+    }
+    if (this.observerSnap) {
+      this.observerSnap.disconnect();
+    }
+    window.removeEventListener('scroll', this.handleScroll);
+  }
+  render() {
+    const { showOverlayLayer, fixedBackground, blockHeight, scrollSnapBlock, blockHeadingLevelChecked, hasBlockCta, hasVideo, hasImage, animateOverlayBackground } = this;
+    const HeadingTag = `h${blockHeadingLevelChecked !== null && blockHeadingLevelChecked !== void 0 ? blockHeadingLevelChecked : 2}`;
+    const showCta = hasBlockCta;
+    const isVideo = hasVideo;
+    const isImage = hasImage;
+    const classes = [
+      'media-block',
+      blockHeight ? `media-block--height-${blockHeight}` : '',
+      showOverlayLayer ? 'media-block--with-overlay' : '',
+      animateOverlayBackground ? `media-block--animate-overlay-background` : '',
+      isVideo ? 'media-block--video' : '',
+      scrollSnapBlock ? 'scroll-snap' : 'no-scroll-snap',
+      fixedBackground ? 'media-block--fixed-background' : ''
+    ].join(' ');
+    const pnPlayOnScrollObserverOptions = {
+      root: this.blockHeight === "100svh" ? document : null,
+      threshold: 1,
+      rootMargin: '220px 0px 220px 0px',
+    };
+    return (h("div", { class: classes }, h("div", { class: "media-block__block-container" }, h("div", { class: "media-block__media-container" }, isVideo ? (h("pn-play-on-scroll", { "show-overlay": this.showOverlayLayer, observerOptions: pnPlayOnScrollObserverOptions, "video-src": this.videoSrc })) : isImage ? (h("picture", null, h("source", { media: "(min-width: 1400px)", srcSet: this.imageSrc }), h("source", { media: "(min-width: 1224px)", srcSet: this.imageSrc }), h("source", { media: "(min-width: 1140px)", srcSet: this.imageSrc }), h("source", { media: "(min-width: 1023px)", srcSet: this.imageSrcSmallScreenFormat && this.imageSrcSmallScreenFormat !== "undefined" ? this.imageSrcSmallScreenFormat : this.imageSrc }), h("source", { media: "(min-width: 768px)", srcSet: this.imageSrcSmallScreenFormat && this.imageSrcSmallScreenFormat !== "undefined" ? this.imageSrcSmallScreenFormat : this.imageSrc }), h("source", { media: "(min-width: 500px)", srcSet: this.imageSrcSmallScreenFormat && this.imageSrcSmallScreenFormat !== "undefined" ? this.imageSrcSmallScreenFormat : this.imageSrc }), h("img", { src: this.imageSrcSmallScreenFormat !== "undefined" ? this.imageSrcSmallScreenFormat : this.imageSrc, alt: this.imageAltText !== "undefined" ? this.imageAltText : "", role: this.imageAltText !== "undefined" ? "img" : "presentation", "aria-hidden": this.imageAltText !== "undefined" ? "false" : "true" }))) : null), !isVideo && (h("div", { class: "media-block__overlay-filter", id: "mediaBlockOverlay" })), (this.blockHeading || this.blockPreamble) && (h("div", { class: "media-block__content-container" }, this.blockHeading && h(HeadingTag, { class: "media-block__block-heading" }, this.blockHeading), this.blockPreamble && h("p", { class: "media-block__preamble" }, this.blockPreamble), showCta && h("div", { class: "media-block__cta-link" }, h("slot", { name: "cta-button" }))))), h("div", { id: "scroll-trigger" })));
+  }
+  get block() { return this; }
+  static get style() { return pnMediaBlockCss; }
+}, [4, "pn-media-block", {
+    "blockHeight": [1, "block-height"],
+    "imageSrc": [1, "image-src"],
+    "imageSrcSmallScreenFormat": [1, "image-src-small-screen-format"],
+    "imageAltText": [1, "image-alt-text"],
+    "videoSrc": [1, "video-src"],
+    "parallaxScroll": [4, "parallax-scroll"],
+    "showOverlayLayer": [4, "show-overlay-layer"],
+    "customOverlayBackground": [1, "custom-overlay-background"],
+    "animateOverlayBackground": [4, "animate-overlay-background"],
+    "scrollSnapBlock": [4, "scroll-snap-block"],
+    "fixedBackground": [4, "fixed-background"],
+    "blockHeading": [1, "block-heading"],
+    "blockHeadingLevel": [2, "block-heading-level"],
+    "blockPreamble": [1, "block-preamble"],
+    "blockLinkText": [1, "block-link-text"],
+    "blockLinkUrl": [1, "block-link-url"],
+    "pnPlayOnScrollObserverOptions": [32],
+    "calculatedBlockHeight": [32],
+    "hasButtonSlot": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-media-block", "pn-play-on-scroll", "pn-scroll", "pn-video-overlay"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-media-block":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnmediaBlock);
+      }
+      break;
+    case "pn-play-on-scroll":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "pn-scroll":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "pn-video-overlay":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const PnMediaBlock = PnmediaBlock;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnMediaBlock, defineCustomElement };

package/components/pn-play-on-scroll.js

@@ -1,100 +1,4 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$3 } from './pn-scroll2.js';
-import { d as defineCustomElement$2 } from './pn-video-overlay2.js';
-import { v as v4 } from './v4.js';
-
-const pnPlayOnScrollCss = "pn-play-on-scroll pn-scroll [slot=scroll-affected]{position:relative;display:-ms-flexbox;display:flex}pn-play-on-scroll pn-scroll [slot=scroll-affected] video{width:100%}pn-play-on-scroll pn-scroll [slot=scroll-affected] video:hover{cursor:pointer}pn-play-on-scroll pn-scroll [slot=scroll-affected] pn-video-overlay{position:absolute;bottom:8px;left:8px}@media screen and (min-width: 768px){pn-play-on-scroll pn-scroll [slot=scroll-affected] pn-video-overlay{bottom:16px;left:16px}}";
-
-/*
-    play content when scoll observer sees content as inview
-*/
-const onIntersecting = (video, isManualPaused, togglePaused) => {
-  //what to do when intersecting, eg video.play()
-  if (!isManualPaused) {
-    video && video.play();
-    togglePaused(false);
-  }
-};
-const onNotIntersecting = (video, togglePaused) => {
-  //what to do when not intersecting, eg video.pause()
-  video && video.pause();
-  togglePaused(true);
-};
-const observerOptions = {
-  root: null,
-  threshold: 1,
-  rootMargin: '0px 0px 0px 0px',
-};
-const PnPlayOnScroll$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.testAdditionalParamIntoCallback = true;
-    this.handlePlayPauseClicked = () => {
-      if (this.video.paused || this.video.ended) {
-        this.video.play();
-        this.isManuallyPaused = false;
-        this.isPaused = false;
-      }
-      else {
-        this.video.pause();
-        this.isManuallyPaused = true;
-        this.isPaused = true;
-      }
-    };
-    this.togglePaused = (paused) => {
-      this.isPaused = paused;
-    };
-    this.videoSrc = '';
-    this.videoId = '';
-    this.isManuallyPaused = false;
-    this.isPaused = false;
-  }
-  generateUniqueId() {
-    return v4();
-  }
-  componentWillLoad() {
-    this.videoId = this.generateUniqueId();
-  }
-  componentDidLoad() {
-    this.video = document.getElementById(this.videoId);
-    this.video.addEventListener('click', this.handlePlayPauseClicked);
-  }
-  render() {
-    return (h(Host, null, h("pn-scroll", { intersectFunc: () => onIntersecting(this.video, this.isManuallyPaused, this.togglePaused), notIntersectFunc: () => onNotIntersecting(this.video, this.togglePaused), shouldLoop: true, behaviourClasses: 'some-behaviour-class', observerOptions: observerOptions }, h("div", { slot: "scroll-affected" }, h("video", { muted: true, autoPlay: true, id: `${this.videoId}` }, h("source", { src: this.videoSrc, type: "video/mp4" })), h("pn-video-overlay", { isPaused: this.isManuallyPaused || this.isPaused, onPlayPauseClicked: this.handlePlayPauseClicked })))));
-  }
-  get hostElement() { return this; }
-  static get style() { return pnPlayOnScrollCss; }
-}, [0, "pn-play-on-scroll", {
-    "videoSrc": [1, "video-src"],
-    "videoId": [32],
-    "isManuallyPaused": [32],
-    "isPaused": [32]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["pn-play-on-scroll", "pn-scroll", "pn-video-overlay"];
-  components.forEach(tagName => { switch (tagName) {
-    case "pn-play-on-scroll":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, PnPlayOnScroll$1);
-      }
-      break;
-    case "pn-scroll":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "pn-video-overlay":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
-defineCustomElement$1();
+import { P as PnPlayOnScroll$1, d as defineCustomElement$1 } from './pn-play-on-scroll2.js';
 
 const PnPlayOnScroll = PnPlayOnScroll$1;
 const defineCustomElement = defineCustomElement$1;

package/components/pn-play-on-scroll2.js

@@ -0,0 +1,103 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './pn-scroll2.js';
+import { d as defineCustomElement$1 } from './pn-video-overlay2.js';
+import { v as v4 } from './v4.js';
+
+const pnPlayOnScrollCss = "pn-play-on-scroll pn-scroll [slot=scroll-affected]{position:relative;display:-ms-flexbox;display:flex}pn-play-on-scroll pn-scroll [slot=scroll-affected] video{width:100%}pn-play-on-scroll pn-scroll [slot=scroll-affected] video:hover{cursor:pointer}";
+
+/*
+    play content when scoll observer sees content as inview
+*/
+const defaultObserverOptions = {
+  root: null,
+  threshold: 0,
+  rootMargin: '0px 0px 0px 0px',
+};
+const onIntersecting = (video, isManualPaused, togglePaused) => {
+  //what to do when intersecting, eg video.play()
+  if (!isManualPaused) {
+    video && video.play();
+    togglePaused(false);
+  }
+};
+const onNotIntersecting = (video, togglePaused) => {
+  //what to do when not intersecting, eg video.pause()
+  video && video.pause();
+  togglePaused(true);
+};
+const PnPlayOnScroll = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.testAdditionalParamIntoCallback = true;
+    this.handlePlayPauseClicked = () => {
+      if (this.video.paused || this.video.ended) {
+        this.video.play();
+        this.isManuallyPaused = false;
+        this.isPaused = false;
+      }
+      else {
+        this.video.pause();
+        this.isManuallyPaused = true;
+        this.isPaused = true;
+      }
+    };
+    this.togglePaused = (paused) => {
+      this.isPaused = paused;
+    };
+    this.videoSrc = '';
+    this.observerOptions = defaultObserverOptions;
+    this.showOverlay = false;
+    this.videoId = '';
+    this.isManuallyPaused = false;
+    this.isPaused = false;
+  }
+  generateUniqueId() {
+    return v4();
+  }
+  componentWillLoad() {
+    this.videoId = this.generateUniqueId();
+  }
+  componentDidLoad() {
+    this.video = document.getElementById(this.videoId);
+    this.video.addEventListener('click', this.handlePlayPauseClicked);
+  }
+  render() {
+    return (h(Host, null, h("pn-scroll", { intersectFunc: () => onIntersecting(this.video, this.isManuallyPaused, this.togglePaused), notIntersectFunc: () => onNotIntersecting(this.video, this.togglePaused), shouldLoop: true, behaviourClasses: 'some-behaviour-class', observerOptions: this.observerOptions }, h("div", { slot: "scroll-affected" }, h("video", { muted: true, autoPlay: true, id: `${this.videoId}` }, h("source", { src: this.videoSrc, type: "video/mp4" })), h("pn-video-overlay", { showOverlay: this.showOverlay, isPaused: this.isManuallyPaused || this.isPaused, onPlayPauseClicked: this.handlePlayPauseClicked })))));
+  }
+  get hostElement() { return this; }
+  static get style() { return pnPlayOnScrollCss; }
+}, [0, "pn-play-on-scroll", {
+    "videoSrc": [1, "video-src"],
+    "observerOptions": [16],
+    "showOverlay": [4, "show-overlay"],
+    "videoId": [32],
+    "isManuallyPaused": [32],
+    "isPaused": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-play-on-scroll", "pn-scroll", "pn-video-overlay"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-play-on-scroll":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnPlayOnScroll);
+      }
+      break;
+    case "pn-scroll":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "pn-video-overlay":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { PnPlayOnScroll as P, defineCustomElement as d };

package/components/pn-teaser-card.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const pnTeaserCardCss = ".block.teasercardblock a[data-block-clickable-link=true]{z-index:1}pn-teaser-card{width:100%;height:100%;display:-ms-flexbox;display:flex}pn-teaser-card .pn-teaser-card__container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:start;justify-content:flex-start;border-radius:2.4rem;width:100%}pn-teaser-card .pn-teaser-card__container__image__container{width:100%;position:relative}pn-teaser-card .pn-teaser-card__container__image__container>[slot=illustration]{-webkit-clip-path:ellipse(100% 90% at 50% 0%);clip-path:ellipse(100% 90% at 50% 0%);height:100%;overflow:hidden;border-top-left-radius:2.4rem;border-top-right-radius:2.4rem}pn-teaser-card .pn-teaser-card__container__image__container>[slot=illustration]>picture>img{width:100%;height:auto;-webkit-transition:0.4s ease-in-out;transition:0.4s ease-in-out;-webkit-transform:scale(1);transform:scale(1);aspect-ratio:16/9;-o-object-fit:cover;object-fit:cover;-o-object-position:50% 0;object-position:50% 0}pn-teaser-card .pn-teaser-card__container__content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;-ms-flex:1 1 100%;flex:1 1 100%;gap:3.2rem;padding:2.4rem 2.4rem;padding-top:0}pn-teaser-card .pn-teaser-card__container__content__text__container__heading{font-weight:700;font-size:2.4rem;line-height:2.64rem;margin-bottom:0}pn-teaser-card .pn-teaser-card__container__content__text__container__preamble{padding-top:1.6rem;font-weight:400;font-size:1.6rem;line-height:2.24rem;margin-bottom:0}pn-teaser-card .pn-teaser-card__container__content__text__container__label{display:block;margin-bottom:1.6rem;font-weight:400;font-size:1.2rem;line-height:140%}pn-teaser-card .pn-teaser-card__container__content__cta>pn-button{-ms-flex-item-align:end;align-self:flex-end;width:100%}pn-teaser-card .pn-teaser-card__container__content__cta>pn-button a:hover{text-decoration:none}pn-teaser-card .pn-teaser-card__container__content__cta>pn-button>button>.pn-button-bg,pn-teaser-card .pn-teaser-card__container__content__cta>pn-button>a>.pn-button-bg{-webkit-transition:0.4s ease-in-out;transition:0.4s ease-in-out}@media screen and (min-width: 768px){pn-teaser-card .pn-teaser-card__container__content__cta>pn-button{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}}pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:500;font-size:1.6rem;text-decoration:none;color:#005D92}pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated pn-icon svg{-webkit-transition:0.3s ease-in-out;transition:0.3s ease-in-out;position:relative;left:-0.3rem}pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated pn-icon svg path{fill:#005D92}pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated[target=_blank]:not(.pn-button):after{display:none}pn-teaser-card[data-card-color=coral]>.pn-teaser-card__container{background-color:#FDEFEE}pn-teaser-card[data-card-color=green]>.pn-teaser-card__container{background-color:#DCF6E7}pn-teaser-card[data-card-color=blue]>.pn-teaser-card__container{background-color:#EFFBFF}pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container{background-color:#00A0D6}pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__label,pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__heading,pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__preamble,pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container .pn-teaser-card__container__content__cta .secondary-link--animated{color:#FFFFFF}pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container .secondary-link--animated>pn-icon>svg>path{fill:#FFFFFF}pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container{background-color:#0D234B}pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__heading{color:#F06365}pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__label,pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__preamble,pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container .pn-teaser-card__container__content__cta .secondary-link--animated{color:#FFFFFF}pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container .secondary-link--animated>pn-icon>svg>path{fill:#FFFFFF}pn-teaser-card[data-card-color=white]>.pn-teaser-card__container{background-color:#FFFFFF}.teasercardlistblock .teasercardblock.has-bg{background-color:transparent;background:transparent}@media screen and (min-width: 1200px){.onequarterwidth .pn-teaser-card__container__content__text__container__label{margin-bottom:0.8rem}}.onethirdwidth>pn-teaser-card .pn-teaser-card__container__image__container--no-image,.onequarterwidth>pn-teaser-card .pn-teaser-card__container__image__container--no-image{padding-top:2.4rem}.onethirdwidth .pn-teaser-card__container__content__cta .secondary-link--animated,.onequarterwidth .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:400}.halfwidth>pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:400}.halfwidth>pn-teaser-card .pn-teaser-card__container__image__container--no-image{padding-top:2.4rem}@media screen and (min-width: 992px){.halfwidth>pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:500}}@media screen and (min-width: 1200px){.halfwidth>pn-teaser-card .pn-teaser-card__container__image__container--no-image{padding-top:4rem}.halfwidth>pn-teaser-card .pn-teaser-card__container__content{padding:0 4rem 4rem}.halfwidth>pn-teaser-card .pn-teaser-card__container__content__text__container__heading{font-weight:700;font-size:3.2rem;line-height:3.52rem}.halfwidth>pn-teaser-card .pn-teaser-card__container__content__text__container__preamble{font-weight:400;font-size:2rem;line-height:2.8rem}}@media screen and (min-width: 1640px){.halfwidth>pn-teaser-card .pn-teaser-card__container__image__container--no-image{padding-top:5.6rem}.halfwidth>pn-teaser-card .pn-teaser-card__container__content{padding:0 5.6rem 5.6rem}}.fullwidth>pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:400}.fullwidth>pn-teaser-card .pn-teaser-card__container__image__container--no-image{width:auto;padding-top:2.4rem}@media screen and (min-width: 768px){.fullwidth>pn-teaser-card{min-height:35rem}.fullwidth>pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:500}.fullwidth>pn-teaser-card .pn-teaser-card__container{-ms-flex-direction:row;flex-direction:row}.fullwidth>pn-teaser-card .pn-teaser-card__container__content{-ms-flex-item-align:center;align-self:center;gap:2.4rem;padding:3.2rem 3.2rem 3.2rem 2.4rem}.fullwidth>pn-teaser-card .pn-teaser-card__container__image__container>[slot=illustration]{border-top-left-radius:2.4rem;border-bottom-left-radius:2.4rem;-webkit-clip-path:ellipse(100% 100% at 0% 50%);clip-path:ellipse(100% 100% at 0% 50%)}.fullwidth>pn-teaser-card .pn-teaser-card__container__image__container>[slot=illustration]>picture>img{height:100%;-o-object-fit:cover;object-fit:cover}}@media screen and (min-width: 1200px){.fullwidth>pn-teaser-card{min-height:52rem}.fullwidth>pn-teaser-card .pn-teaser-card__container__content{padding:4rem 4rem 4rem 3.2rem}.fullwidth>pn-teaser-card .pn-teaser-card__container__content__text__container__heading{font-weight:700;font-size:4.8rem;line-height:5.28rem}.fullwidth>pn-teaser-card .pn-teaser-card__container__content__text__container__preamble{font-size:2rem;line-height:2.8rem}}@media screen and (min-width: 768px){.fullwidth pn-teaser-card[data-card-alignment=right] .pn-teaser-card__container{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.fullwidth pn-teaser-card[data-card-alignment=right] .pn-teaser-card__container__content{padding:3.2rem 2.4rem 3.2rem 3.2rem}.fullwidth pn-teaser-card[data-card-alignment=right] .pn-teaser-card__container__image__container>[slot=illustration]{border-bottom-right-radius:2.4rem;-webkit-clip-path:ellipse(100% 100% at 100% 50%);clip-path:ellipse(100% 100% at 100% 50%)}}@media screen and (min-width: 1200px){.fullwidth pn-teaser-card[data-card-alignment=right] .pn-teaser-card__container__content{padding:4rem 3.2rem 4rem 4rem}}pn-teaser-card.teaser-card--hover-effect:hover{cursor:pointer}pn-teaser-card.teaser-card--hover-effect:hover .pn-teaser-card__container__image__container [slot=illustration] picture>img{-webkit-transform:scale(1.02);transform:scale(1.02);-webkit-filter:brightness(0.85);filter:brightness(0.85)}pn-teaser-card.teaser-card--hover-effect:hover .secondary-link--animated{text-decoration:underline}pn-teaser-card.teaser-card--hover-effect:hover .secondary-link--animated pn-icon svg{left:0}pn-teaser-card.teaser-card--hover-effect:hover pn-button button .pn-button-bg,pn-teaser-card.teaser-card--hover-effect:hover pn-button a .pn-button-bg{background-color:#0D234B}pn-teaser-card.teaser-card--hover-effect:hover[data-card-color=blue900] pn-button button .pn-button-bg,pn-teaser-card.teaser-card--hover-effect:hover[data-card-color=blue900] pn-button a .pn-button-bg{background-color:#00A0D6}";
+const pnTeaserCardCss = ".block.teasercardblock a[data-block-clickable-link=true]{z-index:1}pn-teaser-card{width:100%;height:100%;display:-ms-flexbox;display:flex}pn-teaser-card .pn-teaser-card__container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:start;justify-content:flex-start;border-radius:2.4rem;width:100%}pn-teaser-card .pn-teaser-card__container__image__container{width:100%;position:relative}pn-teaser-card .pn-teaser-card__container__image__container>[slot=illustration]{-webkit-clip-path:ellipse(100% 90% at 50% 0%);clip-path:ellipse(100% 90% at 50% 0%);height:100%;overflow:hidden;border-top-left-radius:2.4rem;border-top-right-radius:2.4rem}pn-teaser-card .pn-teaser-card__container__image__container>[slot=illustration]>picture>img{width:100%;height:auto;-webkit-transition:0.4s ease-in-out;transition:0.4s ease-in-out;-webkit-transform:scale(1);transform:scale(1);aspect-ratio:16/9;-o-object-fit:cover;object-fit:cover;-o-object-position:50% 0;object-position:50% 0}pn-teaser-card .pn-teaser-card__container__content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;-ms-flex:1 1 100%;flex:1 1 100%;gap:3.2rem;padding:2.4rem 2.4rem;padding-top:0}pn-teaser-card .pn-teaser-card__container__content__text__container__heading{font-weight:700;font-size:2.4rem;line-height:2.64rem;margin-bottom:0}pn-teaser-card .pn-teaser-card__container__content__text__container__preamble{padding-top:1.6rem;font-weight:400;font-size:1.6rem;line-height:2.24rem;margin-bottom:0}pn-teaser-card .pn-teaser-card__container__content__text__container__label{display:block;margin-bottom:1.6rem;font-weight:400;font-size:1.2rem;line-height:140%}pn-teaser-card .pn-teaser-card__container__content__cta>pn-button{-ms-flex-item-align:end;align-self:flex-end;width:100%}pn-teaser-card .pn-teaser-card__container__content__cta>pn-button a:hover{text-decoration:none}pn-teaser-card .pn-teaser-card__container__content__cta>pn-button>button>.pn-button-bg,pn-teaser-card .pn-teaser-card__container__content__cta>pn-button>a>.pn-button-bg{-webkit-transition:0.4s ease-in-out;transition:0.4s ease-in-out}@media screen and (min-width: 768px){pn-teaser-card .pn-teaser-card__container__content__cta>pn-button{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}}pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:500;font-size:1.6rem;text-decoration:none;color:#005D92}pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated pn-icon svg{-webkit-transition:0.3s ease-in-out;transition:0.3s ease-in-out;position:relative;left:-0.3rem}pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated pn-icon svg path{fill:#005D92}pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated[target=_blank]:not(.pn-button):after{display:none}pn-teaser-card[data-card-color=coral]>.pn-teaser-card__container{background-color:#FDEFEE}pn-teaser-card[data-card-color=green]>.pn-teaser-card__container{background-color:#DCF6E7}pn-teaser-card[data-card-color=blue]>.pn-teaser-card__container{background-color:#EFFBFF}pn-teaser-card[data-card-color=blue50]>.pn-teaser-card__container{background-color:#E0F8FF}pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container{background-color:#00A0D6}pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__label,pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__heading,pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__preamble,pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container .pn-teaser-card__container__content__cta .secondary-link--animated{color:#FFFFFF}pn-teaser-card[data-card-color=blue400]>.pn-teaser-card__container .secondary-link--animated>pn-icon>svg>path{fill:#FFFFFF}pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container{background-color:#0D234B}pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__heading{color:#F06365}pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__label,pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container .pn-teaser-card__container__content__text__container__preamble,pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container .pn-teaser-card__container__content__cta .secondary-link--animated{color:#FFFFFF}pn-teaser-card[data-card-color=blue900]>.pn-teaser-card__container .secondary-link--animated>pn-icon>svg>path{fill:#FFFFFF}pn-teaser-card[data-card-color=white]>.pn-teaser-card__container{background-color:#FFFFFF}.teasercardlistblock .teasercardblock.has-bg{background-color:transparent;background:transparent}@media screen and (min-width: 1200px){.onequarterwidth .pn-teaser-card__container__content__text__container__label{margin-bottom:0.8rem}}.onethirdwidth>pn-teaser-card .pn-teaser-card__container__image__container--no-image,.onequarterwidth>pn-teaser-card .pn-teaser-card__container__image__container--no-image{padding-top:2.4rem}.onethirdwidth .pn-teaser-card__container__content__cta .secondary-link--animated,.onequarterwidth .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:400}.halfwidth>pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:400}.halfwidth>pn-teaser-card .pn-teaser-card__container__image__container--no-image{padding-top:2.4rem}@media screen and (min-width: 992px){.halfwidth>pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:500}}@media screen and (min-width: 1200px){.halfwidth>pn-teaser-card .pn-teaser-card__container__image__container--no-image{padding-top:4rem}.halfwidth>pn-teaser-card .pn-teaser-card__container__content{padding:0 4rem 4rem}.halfwidth>pn-teaser-card .pn-teaser-card__container__content__text__container__heading{font-weight:700;font-size:3.2rem;line-height:3.52rem}.halfwidth>pn-teaser-card .pn-teaser-card__container__content__text__container__preamble{font-weight:400;font-size:2rem;line-height:2.8rem}}@media screen and (min-width: 1640px){.halfwidth>pn-teaser-card .pn-teaser-card__container__image__container--no-image{padding-top:5.6rem}.halfwidth>pn-teaser-card .pn-teaser-card__container__content{padding:0 5.6rem 5.6rem}}.fullwidth>pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:400}.fullwidth>pn-teaser-card .pn-teaser-card__container__image__container--no-image{width:auto;padding-top:2.4rem}@media screen and (min-width: 768px){.fullwidth>pn-teaser-card{min-height:35rem}.fullwidth>pn-teaser-card .pn-teaser-card__container__content__cta .secondary-link--animated{font-weight:500}.fullwidth>pn-teaser-card .pn-teaser-card__container{-ms-flex-direction:row;flex-direction:row}.fullwidth>pn-teaser-card .pn-teaser-card__container__content{-ms-flex-item-align:center;align-self:center;gap:2.4rem;padding:3.2rem 3.2rem 3.2rem 2.4rem}.fullwidth>pn-teaser-card .pn-teaser-card__container__image__container>[slot=illustration]{border-top-left-radius:2.4rem;border-bottom-left-radius:2.4rem;-webkit-clip-path:ellipse(100% 100% at 0% 50%);clip-path:ellipse(100% 100% at 0% 50%)}.fullwidth>pn-teaser-card .pn-teaser-card__container__image__container>[slot=illustration]>picture>img{height:100%;-o-object-fit:cover;object-fit:cover}}@media screen and (min-width: 1200px){.fullwidth>pn-teaser-card{min-height:52rem}.fullwidth>pn-teaser-card .pn-teaser-card__container__content{padding:4rem 4rem 4rem 3.2rem}.fullwidth>pn-teaser-card .pn-teaser-card__container__content__text__container__heading{font-weight:700;font-size:4.8rem;line-height:5.28rem}.fullwidth>pn-teaser-card .pn-teaser-card__container__content__text__container__preamble{font-size:2rem;line-height:2.8rem}}@media screen and (min-width: 768px){.fullwidth pn-teaser-card[data-card-alignment=right] .pn-teaser-card__container{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.fullwidth pn-teaser-card[data-card-alignment=right] .pn-teaser-card__container__content{padding:3.2rem 2.4rem 3.2rem 3.2rem}.fullwidth pn-teaser-card[data-card-alignment=right] .pn-teaser-card__container__image__container>[slot=illustration]{border-bottom-right-radius:2.4rem;-webkit-clip-path:ellipse(100% 100% at 100% 50%);clip-path:ellipse(100% 100% at 100% 50%)}}@media screen and (min-width: 1200px){.fullwidth pn-teaser-card[data-card-alignment=right] .pn-teaser-card__container__content{padding:4rem 3.2rem 4rem 4rem}}pn-teaser-card.teaser-card--hover-effect:hover{cursor:pointer}pn-teaser-card.teaser-card--hover-effect:hover .pn-teaser-card__container__image__container [slot=illustration] picture>img{-webkit-transform:scale(1.02);transform:scale(1.02);-webkit-filter:brightness(0.85);filter:brightness(0.85)}pn-teaser-card.teaser-card--hover-effect:hover .secondary-link--animated{text-decoration:underline}pn-teaser-card.teaser-card--hover-effect:hover .secondary-link--animated pn-icon svg{left:0}pn-teaser-card.teaser-card--hover-effect:hover pn-button button .pn-button-bg,pn-teaser-card.teaser-card--hover-effect:hover pn-button a .pn-button-bg{background-color:#0D234B}pn-teaser-card.teaser-card--hover-effect:hover[data-card-color=blue900] pn-button button .pn-button-bg,pn-teaser-card.teaser-card--hover-effect:hover[data-card-color=blue900] pn-button a .pn-button-bg{background-color:#00A0D6}";
 
 const PnTeaserCard$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/components/pn-video-overlay2.js

@@ -30,7 +30,7 @@ const translations = {
   },
 };
 
-const pnVideoOverlayCss = "pn-video-overlay button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border-radius:50%;padding:0;border:none;outline:none;cursor:pointer;background-color:transparent}pn-video-overlay button:hover svg rect{fill:#003d5f}pn-video-overlay button:active svg rect{fill:#001c2c}pn-video-overlay button:focus,pn-video-overlay button:focus-visible{outline:2px solid #FFFFFF}pn-video-overlay button svg{scale:0.7}@media screen and (min-width: 768px){pn-video-overlay button svg{scale:1}}";
+const pnVideoOverlayCss = "pn-video-overlay.pn-video-overlay--show-overlay{position:absolute;width:100%;height:100%;background:radial-gradient(circle, rgba(13, 35, 75, 0.68) 7%, rgba(13, 35, 75, 0) 80%)}pn-video-overlay button{position:absolute;bottom:8px;left:8px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border-radius:50%;padding:0;border:none;outline:none;cursor:pointer;background-color:transparent}@media screen and (min-width: 768px){pn-video-overlay button{bottom:16px;left:16px}}pn-video-overlay button:hover svg rect{fill:#003d5f}pn-video-overlay button:active svg rect{fill:#001c2c}pn-video-overlay button:focus,pn-video-overlay button:focus-visible{outline:2px solid #FFFFFF}pn-video-overlay button svg{scale:0.7}@media screen and (min-width: 768px){pn-video-overlay button svg{scale:1}}";
 
 const PnVideoOverlay = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -48,6 +48,7 @@ const PnVideoOverlay = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     };
     this.language = 'en';
     this.isPaused = false;
+    this.showOverlay = false;
     this.i18n = undefined;
   }
   componentWillLoad() {
@@ -65,7 +66,7 @@ const PnVideoOverlay = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     this.setTranslations();
   }
   render() {
-    return (h(Host, null, h("button", { "aria-label": `${this.i18n.ariaLabel}`, onClick: this.handlePlayPauseClicked }, this.isPaused ? this.renderPlayIcon() : this.renderPauseIcon())));
+    return (h(Host, { class: `pn-video-overlay ${this.showOverlay ? 'pn-video-overlay--show-overlay' : ''}` }, h("button", { type: "button", id: "overlayed-button-pause-video", "aria-label": `${this.i18n.ariaLabel}`, onClick: this.handlePlayPauseClicked }, this.isPaused ? this.renderPlayIcon() : this.renderPauseIcon())));
   }
   get hostElement() { return this; }
   static get watchers() { return {
@@ -75,6 +76,7 @@ const PnVideoOverlay = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
 }, [0, "pn-video-overlay", {
     "language": [1],
     "isPaused": [4, "is-paused"],
+    "showOverlay": [4, "show-overlay"],
     "i18n": [32]
   }]);
 function defineCustomElement() {

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

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

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

@@ -1828,12 +1828,16 @@ const setContentReference = (elm) => {
 const disconnectedCallback = (elm) => {
     if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0) {
         const hostRef = getHostRef(elm);
+        const instance = hostRef.$lazyInstance$ ;
         {
             if (hostRef.$rmListeners$) {
                 hostRef.$rmListeners$.map((rmListener) => rmListener());
                 hostRef.$rmListeners$ = undefined;
             }
         }
+        {
+            safeCall(instance, 'disconnectedCallback');
+        }
     }
 };
 const patchCloneNode = (HostElementPrototype) => {
@@ -2187,6 +2191,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './pn-marketweb-siteheader.entry.js').then(processMod, consoleError);
+        case 'pn-media-block':
+          return import(
+            /* webpackMode: "lazy" */
+            './pn-media-block.entry.js').then(processMod, consoleError);
         case 'pn-multi-formfield':
           return import(
             /* webpackMode: "lazy" */
@@ -2207,10 +2215,6 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './pn-pex-pricefinder.entry.js').then(processMod, consoleError);
-        case 'pn-play-on-scroll':
-          return import(
-            /* webpackMode: "lazy" */
-            './pn-play-on-scroll.entry.js').then(processMod, consoleError);
         case 'pn-product-pricelist':
           return import(
             /* webpackMode: "lazy" */
@@ -2311,14 +2315,14 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './pn-multi-row-connected-dropdown-row.entry.js').then(processMod, consoleError);
-        case 'pn-proxio-findprice-result':
+        case 'pn-play-on-scroll':
           return import(
             /* webpackMode: "lazy" */
-            './pn-proxio-findprice-result.entry.js').then(processMod, consoleError);
-        case 'pn-scroll_2':
+            './pn-play-on-scroll.entry.js').then(processMod, consoleError);
+        case 'pn-proxio-findprice-result':
           return import(
             /* webpackMode: "lazy" */
-            './pn-scroll_2.entry.js').then(processMod, consoleError);
+            './pn-proxio-findprice-result.entry.js').then(processMod, consoleError);
         case 'pn-share-item':
           return import(
             /* webpackMode: "lazy" */
@@ -2351,6 +2355,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './pn-product-tile-info_2.entry.js').then(processMod, consoleError);
+        case 'pn-scroll_2':
+          return import(
+            /* webpackMode: "lazy" */
+            './pn-scroll_2.entry.js').then(processMod, consoleError);
         case 'pn-choice-button':
           return import(
             /* webpackMode: "lazy" */