@postnord/pn-marketweb-components 2.9.0 → 2.9.1

package/collection/components/animation/pn-play-on-scroll/pn-play-on-scroll.stories.js

@@ -10,93 +10,13 @@ export default {
 
 const PlayOnScrollTemplate = args => {
   return `
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-    <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <pn-play-on-scroll></pn-play-on-scroll>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
+  <div style="height: 140rem;"></div>
+  <pn-play-on-scroll video-src="${args.videoSrc}"></pn-play-on-scroll>
+  <div style="height: 140rem;"></div>
   `;
 };
 
 export const PlayOnScroll = PlayOnScrollTemplate.bind({});
-PlayOnScroll.args = {};
+PlayOnScroll.args = {
+  videoSrc: "https://com-inte.postnord.com/contentassets/1d0fd381dbde41f69f64df946b3e1e34/postnord-jakaa-turussa-kaikki-paketit-lahibokseihin-paastottomasti-sahkolla.mp4"
+};

package/collection/components/input/pn-multi-row-connected-dropdown/pn-multi-row-connected-dropdown-row.js

@@ -162,8 +162,10 @@ export class PnMultiRowConnectedDropdownRow {
     const emmitValues = debounce(this.emittRowValues.bind(this), 500);
     this.pnInputField.addEventListener('keyup', this.handleInput.bind(this));
     this.pnInputField.addEventListener('change', this.handleInput.bind(this));
+    this.pnInputField.addEventListener('input', this.handleInput.bind(this));
     this.pnInputField.addEventListener('keyup', emmitValues);
     this.pnInputField.addEventListener('change', emmitValues);
+    this.pnInputField.addEventListener('input', emmitValues);
     if (this.allowMultipleDates) {
       this.pnShowDateRangeFiledButton.addEventListener('click', this.showDateRangeRow.bind(this));
       this.pnStartDate.addEventListener('dateselection', this.HandleRangeDatePickers.bind(this));

package/collection/components/media/pn-media-block/media-block.stories.js

@@ -14,7 +14,6 @@ export default {
       imageSrcSmallScreenFormat: { type: 'string' },
       imageAltText: { type: 'string' },
       videoSrc: { type: 'string' },
-      parallaxScroll: { type: 'boolean' },
       showOverlayLayer: { type: 'boolean' },
       customOverlayBackground: { type: 'string' },
       animateOverlayBackground: { type: 'boolean' },
@@ -40,12 +39,12 @@ const Template = ({ ...args }) => {
       image-src="${args.imageSrc}"
       image-src-small-screen-format="${args.imageSrcSmallScreenFormat}"
       image-alt-text="${args.imageAltText}"
-      parallax-scroll="${args.parallaxScroll}"
       show-overlay-layer="${args.showOverlayLayer}"
       custom-overlay-background="${args.customOverlayBackground}"
       animate-overlay-background="${args.animateOverlayBackground}"
       scroll-snap-block="${args.scrollSnapBlock}"
       fixed-background="${args.fixedBackground}"
+      margin-bottom="${args.marginBottom}"
       block-heading="${args.blockHeading}"
       block-heading-level="${args.blockHeadingLevel}"
       block-preamble="${args.blockPreamble}">
@@ -60,10 +59,10 @@ export const Default = Template.bind({});
 Default.args = {
   blockHeight : '100svh',
   imageSrc : 'https://i.redd.it/connections-5160x2160-v0-o914e0x2jkfc1.png?s=5c46aceebe337175ad192d5edb0ed9f66fd3e130',
-  parallaxScroll : false,
   showOverlayLayer : true,
   scrollSnapBlock : false,
   fixedBackground : false,
+  marginBottom : false,
   blockHeadingLevel: 2,
   blockHeading: "Maximize your e-commerce potential",
   blockPreamble: "Enhance your customers shopping journey. We have simplified delivery solutions for a global marketplace.",
@@ -73,7 +72,6 @@ export const FixedBackground = Template.bind({});
 FixedBackground.args = {
   blockHeight : '100svh',
   imageSrc : 'https://i.redd.it/connections-5160x2160-v0-o914e0x2jkfc1.png?s=5c46aceebe337175ad192d5edb0ed9f66fd3e130',
-  parallaxScroll : false,
   showOverlayLayer : true,
   scrollSnapBlock : false,
   fixedBackground : true,
@@ -86,7 +84,6 @@ export const CompactHeightBlock = Template.bind({});
 CompactHeightBlock.args = {
   blockHeight : '65svh',
   imageSrc : 'https://i.redd.it/connections-5160x2160-v0-o914e0x2jkfc1.png?s=5c46aceebe337175ad192d5edb0ed9f66fd3e130',
-  parallaxScroll : false,
   showOverlayLayer : true,
   scrollSnapBlock : false,
   fixedBackground : true,
@@ -99,7 +96,6 @@ export const DynamicHeight = Template.bind({});
 DynamicHeight.args = {
   blockHeight : 'dynamic',
   imageSrc : 'https://i.redd.it/connections-5160x2160-v0-o914e0x2jkfc1.png?s=5c46aceebe337175ad192d5edb0ed9f66fd3e130',
-  parallaxScroll : false,
   showOverlayLayer : true,
   scrollSnapBlock : false,
   fixedBackground : false,
@@ -114,7 +110,6 @@ MultipleSrc.args = {
   imageSrc : 'https://i.redd.it/connections-5160x2160-v0-o914e0x2jkfc1.png?s=5c46aceebe337175ad192d5edb0ed9f66fd3e130',
   imageSrcSmallScreenFormat : 'https://picsum.photos/1200/1200',
   imageAltText : 'This is an image',
-  parallaxScroll : true,
   showOverlayLayer : true,
   scrollSnapBlock : false,
   fixedBackground : false,
@@ -127,7 +122,6 @@ export const ParallaxBackground = Template.bind({});
 ParallaxBackground.args = {
   blockHeight : '100svh',
   imageSrc : 'https://i.redd.it/connections-5160x2160-v0-o914e0x2jkfc1.png?s=5c46aceebe337175ad192d5edb0ed9f66fd3e130',
-  parallaxScroll : true,
   showOverlayLayer : true,
   scrollSnapBlock : false,
   fixedBackground : false,
@@ -140,7 +134,6 @@ export const ScrollSnap = Template.bind({});
 ScrollSnap.args = {
   blockHeight : '100svh',
   imageSrc : 'https://i.redd.it/connections-5160x2160-v0-o914e0x2jkfc1.png?s=5c46aceebe337175ad192d5edb0ed9f66fd3e130',
-  parallaxScroll : true,
   showOverlayLayer : true,
   scrollSnapBlock : true,
   fixedBackground : false,
@@ -153,7 +146,6 @@ export const CustomOverlayBackground = Template.bind({});
 CustomOverlayBackground.args = {
   blockHeight : '100svh',
   imageSrc : 'https://i.redd.it/connections-5160x2160-v0-o914e0x2jkfc1.png?s=5c46aceebe337175ad192d5edb0ed9f66fd3e130',
-  parallaxScroll : false,
   showOverlayLayer : true,
   customOverlayBackground : "linear-gradient(180deg, #0d234b, transparent)",
   scrollSnapBlock : true,
@@ -167,7 +159,6 @@ export const AnimateOverlayBackground = Template.bind({});
 AnimateOverlayBackground.args = {
   blockHeight : '100svh',
   imageSrc : 'https://i.redd.it/connections-5160x2160-v0-o914e0x2jkfc1.png?s=5c46aceebe337175ad192d5edb0ed9f66fd3e130',
-  parallaxScroll : false,
   showOverlayLayer : true,
   customOverlayBackground : "linear-gradient(90deg, rgba(131,58,180,0.8253676470588236) 0%, rgba(253,29,29,0.1783088235294118) 50%, rgba(252,176,69,0.727328431372549) 100%)",
   animateOverlayBackground : true,
@@ -186,7 +177,6 @@ const TemplateWithLink = ({ ...args }) => {
     <pn-media-block
       block-height="${args.blockHeight}"
       image-src="${args.imageSrc}"
-      parallax-scroll="${args.parallaxScroll}"
       show-overlay-layer="${args.showOverlayLayer}"
       scroll-snap-block="${args.scrollSnapBlock}"
       fixed-background="${args.fixedBackground}"
@@ -211,7 +201,6 @@ export const WithLink = TemplateWithLink.bind({});
 WithLink.args = {
   blockHeight : '100svh',
   imageSrc : 'https://i.redd.it/connections-5160x2160-v0-o914e0x2jkfc1.png?s=5c46aceebe337175ad192d5edb0ed9f66fd3e130',
-  parallaxScroll : false,
   fixedBackground : true,
   showOverlayLayer : true,
   blockHeading: "Maximize your e-commerce potential",
@@ -224,12 +213,13 @@ WithLink.args = {
 
 const TemplateVideo = ({ ...args }) => {
   return `
+    <br>
+    <div style="background-color: #f5f5f5; border: 5px solid black; height: 400px; display: flex; align-items: center; justify-content: center; margin-top: 240px; margin-bottom: 240px;"><h2>This is another block</h2></div>
     <br>
     <div style="background-color: #f5f5f5; border: 5px solid black; height: 400px; display: flex; align-items: center; justify-content: center; margin-top: 240px; margin-bottom: 240px;"><h2>This is another block</h2></div>
     <br>
     <pn-media-block block-height="${args.blockHeight}"
       video-src="${args.videoSrc}"
-      parallax-scroll="${args.parallaxScroll}"
       show-overlay-layer="${args.showOverlayLayer}"
       scroll-snap-block="${args.scrollSnapBlock}"
       fixed-background="${args.fixedBackground}"
@@ -240,6 +230,8 @@ const TemplateVideo = ({ ...args }) => {
     <br>
     <div style="background-color: #f5f5f5; border: 5px solid black; height: 400px; display: flex; align-items: center; justify-content: center; margin-top: 240px; margin-bottom: 240px;"><h2>This is another block</h2></div>
     <br>
+    <div style="background-color: #f5f5f5; border: 5px solid black; height: 400px; display: flex; align-items: center; justify-content: center; margin-top: 240px; margin-bottom: 240px;"><h2>This is another block</h2></div>
+    <br>
   `;
 };
 
@@ -247,7 +239,6 @@ export const Video = TemplateVideo.bind({});
 Video.args = {
   blockHeight : '100svh',
   videoSrc : 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',
-  parallaxScroll : false,
   fixedBackground : false,
   showOverlayLayer : true,
   blockHeading: "Maximize your e-commerce potential",

package/collection/components/media/pn-media-block/pn-media-block.css

@@ -169,7 +169,7 @@ pn-media-block .media-block .media-block__content-container .media-block__cta-li
   margin-top: 3rem;
 }
 pn-media-block .media-block--height-100svh {
-  height: 100vh;
+  min-height: 100vh;
 }
 @supports (height: 100svh) {
   pn-media-block .media-block--height-100svh {
@@ -201,7 +201,7 @@ pn-media-block .media-block--height-100svh .media-block__block-container .media-
   }
 }
 pn-media-block .media-block--height-65svh {
-  height: 65svh;
+  min-height: 65svh;
   overflow: auto;
 }
 pn-media-block .media-block--height-65svh .media-block__block-container {
@@ -280,4 +280,22 @@ pn-media-block .media-block--animate-overlay-background .media-block__overlay-fi
   100% {
     background-position: 100% 100%;
   }
+}
+pn-media-block .media-block--margin-bottom {
+  margin-bottom: 3.2rem;
+}
+@media screen and (min-width: 768px) {
+  pn-media-block .media-block--margin-bottom {
+    margin-bottom: 4rem;
+  }
+}
+@media screen and (min-width: 992px) {
+  pn-media-block .media-block--margin-bottom {
+    margin-bottom: 5.6rem;
+  }
+}
+@media screen and (min-width: 1200px) {
+  pn-media-block .media-block--margin-bottom {
+    margin-bottom: 7.2rem;
+  }
 }

package/collection/components/media/pn-media-block/pn-media-block.js

@@ -1,22 +1,15 @@
 import { h } from "@stencil/core";
-function userPrefersReducedMotion() {
-  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-}
 export class PnmediaBlock {
   constructor() {
     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)`;
@@ -25,25 +18,18 @@ export class PnmediaBlock {
           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.marginBottom = false;
     this.blockHeading = null;
     this.blockHeadingLevel = 2;
     this.blockPreamble = null;
@@ -78,31 +64,12 @@ export class PnmediaBlock {
     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 => {
@@ -138,7 +105,7 @@ export class PnmediaBlock {
     window.removeEventListener('scroll', this.handleScroll);
   }
   render() {
-    const { showOverlayLayer, fixedBackground, blockHeight, scrollSnapBlock, blockHeadingLevelChecked, hasButtonSlot, hasVideo, hasImage, animateOverlayBackground } = this;
+    const { showOverlayLayer, fixedBackground, blockHeight, scrollSnapBlock, blockHeadingLevelChecked, hasButtonSlot, hasVideo, hasImage, animateOverlayBackground, marginBottom } = this;
     const HeadingTag = `h${blockHeadingLevelChecked !== null && blockHeadingLevelChecked !== void 0 ? blockHeadingLevelChecked : 2}`;
     const isVideo = hasVideo;
     const isImage = hasImage;
@@ -149,12 +116,12 @@ export class PnmediaBlock {
       animateOverlayBackground ? `media-block--animate-overlay-background` : '',
       isVideo ? 'media-block--video' : '',
       scrollSnapBlock ? 'scroll-snap' : 'no-scroll-snap',
-      fixedBackground ? 'media-block--fixed-background' : ''
+      fixedBackground ? 'media-block--fixed-background' : '',
+      marginBottom ? 'media-block--margin-bottom' : ''
     ].join(' ');
     const pnPlayOnScrollObserverOptions = {
-      root: this.blockHeight === "100svh" ? document : null,
-      threshold: 1,
-      rootMargin: '220px 0px 220px 0px',
+      root: this.blockHeight === "100svh" ? this.block : null,
+      threshold: [0, 0.5, 1], // Callback will be executed when 0%, 50%, and 100% of the target is visible
     };
     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), hasButtonSlot &&
       h("div", { class: "media-block__cta-link" }, h("slot", { name: "cta-button" }))))), h("div", { id: "scroll-trigger" })));
@@ -262,24 +229,6 @@ export class PnmediaBlock {
         "reflect": false,
         "defaultValue": "null"
       },
-      "parallaxScroll": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "parallax-scroll",
-        "reflect": false,
-        "defaultValue": "false"
-      },
       "showOverlayLayer": {
         "type": "boolean",
         "mutable": false,
@@ -370,6 +319,24 @@ export class PnmediaBlock {
         "reflect": false,
         "defaultValue": "false"
       },
+      "marginBottom": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "margin-bottom",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "blockHeading": {
         "type": "string",
         "mutable": false,

package/components/pn-media-block.js

@@ -3,28 +3,21 @@ 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%}}";
+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{min-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{min-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%}}pn-media-block .media-block--margin-bottom{margin-bottom:3.2rem}@media screen and (min-width: 768px){pn-media-block .media-block--margin-bottom{margin-bottom:4rem}}@media screen and (min-width: 992px){pn-media-block .media-block--margin-bottom{margin-bottom:5.6rem}}@media screen and (min-width: 1200px){pn-media-block .media-block--margin-bottom{margin-bottom:7.2rem}}";
 
-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)`;
@@ -33,25 +26,18 @@ const PnmediaBlock = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
           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.marginBottom = false;
     this.blockHeading = null;
     this.blockHeadingLevel = 2;
     this.blockPreamble = null;
@@ -86,30 +72,12 @@ const PnmediaBlock = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     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 => {
@@ -144,7 +112,7 @@ const PnmediaBlock = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     window.removeEventListener('scroll', this.handleScroll);
   }
   render() {
-    const { showOverlayLayer, fixedBackground, blockHeight, scrollSnapBlock, blockHeadingLevelChecked, hasButtonSlot, hasVideo, hasImage, animateOverlayBackground } = this;
+    const { showOverlayLayer, fixedBackground, blockHeight, scrollSnapBlock, blockHeadingLevelChecked, hasButtonSlot, hasVideo, hasImage, animateOverlayBackground, marginBottom } = this;
     const HeadingTag = `h${blockHeadingLevelChecked !== null && blockHeadingLevelChecked !== void 0 ? blockHeadingLevelChecked : 2}`;
     const isVideo = hasVideo;
     const isImage = hasImage;
@@ -155,12 +123,12 @@ const PnmediaBlock = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       animateOverlayBackground ? `media-block--animate-overlay-background` : '',
       isVideo ? 'media-block--video' : '',
       scrollSnapBlock ? 'scroll-snap' : 'no-scroll-snap',
-      fixedBackground ? 'media-block--fixed-background' : ''
+      fixedBackground ? 'media-block--fixed-background' : '',
+      marginBottom ? 'media-block--margin-bottom' : ''
     ].join(' ');
     const pnPlayOnScrollObserverOptions = {
-      root: this.blockHeight === "100svh" ? document : null,
-      threshold: 1,
-      rootMargin: '220px 0px 220px 0px',
+      root: this.blockHeight === "100svh" ? this.block : null,
+      threshold: [0, 0.5, 1], // Callback will be executed when 0%, 50%, and 100% of the target is visible
     };
     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), hasButtonSlot &&
       h("div", { class: "media-block__cta-link" }, h("slot", { name: "cta-button" }))))), h("div", { id: "scroll-trigger" })));
@@ -173,12 +141,12 @@ const PnmediaBlock = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "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"],
+    "marginBottom": [4, "margin-bottom"],
     "blockHeading": [1, "block-heading"],
     "blockHeadingLevel": [2, "block-heading-level"],
     "blockPreamble": [1, "block-preamble"],

package/components/pn-multi-row-connected-dropdown-row2.js

@@ -171,8 +171,10 @@ const PnMultiRowConnectedDropdownRow = /*@__PURE__*/ proxyCustomElement(class ex
     const emmitValues = debounce_1.debounce(this.emittRowValues.bind(this), 500);
     this.pnInputField.addEventListener('keyup', this.handleInput.bind(this));
     this.pnInputField.addEventListener('change', this.handleInput.bind(this));
+    this.pnInputField.addEventListener('input', this.handleInput.bind(this));
     this.pnInputField.addEventListener('keyup', emmitValues);
     this.pnInputField.addEventListener('change', emmitValues);
+    this.pnInputField.addEventListener('input', emmitValues);
     if (this.allowMultipleDates) {
       this.pnShowDateRangeFiledButton.addEventListener('click', this.showDateRangeRow.bind(this));
       this.pnStartDate.addEventListener('dateselection', this.HandleRangeDatePickers.bind(this));

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

@@ -10,7 +10,7 @@ const pnPlayOnScrollCss = "pn-play-on-scroll pn-scroll [slot=scroll-affected]{po
 */
 const defaultObserverOptions = {
   root: null,
-  threshold: 0,
+  threshold: 1,
   rootMargin: '0px 0px 0px 0px',
 };
 const onIntersecting = (video, isManualPaused, togglePaused) => {
@@ -61,9 +61,10 @@ const PnPlayOnScroll = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
   componentDidLoad() {
     this.video = document.getElementById(this.videoId);
     this.video.addEventListener('click', this.handlePlayPauseClicked);
+    this.localObserverOptions = this.observerOptions;
   }
   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 })))));
+    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.localObserverOptions }, h("div", { slot: "scroll-affected" }, h("video", { playsinline: true, 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; }