@postnord/pn-marketweb-components 2.4.0 → 2.4.2

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

@@ -0,0 +1,102 @@
+import readme from './readme.md';
+
+export default {
+  title: 'Scroller/Fade',
+  parameters: {
+    notes: readme,
+    layout: 'fullscreen',
+  },
+};
+
+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>
+  `;
+};
+
+export const PlayOnScroll = PlayOnScrollTemplate.bind({});
+PlayOnScroll.args = {};

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

@@ -0,0 +1,28 @@
+pn-video-overlay button {
+  display: flex;
+  align-items: 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;
+  }
+}

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

@@ -0,0 +1,116 @@
+import { h, Host } from '@stencil/core';
+import { translations } from './translations';
+export class PnVideoOverlay {
+  constructor() {
+    this.handlePlayPauseClicked = () => {
+      this.playPauseClicked.emit();
+    };
+    this.renderPlayIcon = () => {
+      return (h("svg", { width: "64", height: "64", viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("rect", { width: "64", height: "64", rx: "32", fill: "#005D92" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M52.7123 32C52.7123 20.5609 43.4391 11.2877 32 11.2877C26.5827 11.2877 21.6544 13.3653 17.9624 16.7701C17.295 17.3855 16.255 17.3434 15.6396 16.6761C15.0241 16.0087 15.0662 14.9687 15.7336 14.3532C20.0088 10.4105 25.7248 8 32 8C45.2548 8 56 18.7452 56 32C56 45.2548 45.2548 56 32 56C18.7452 56 8 45.2548 8 32C8 31.0921 8.73597 30.3562 9.64383 30.3562C10.5517 30.3562 11.2877 31.0921 11.2877 32C11.2877 43.4391 20.5609 52.7123 32 52.7123C43.4391 52.7123 52.7123 43.4391 52.7123 32ZM24.5757 20.0718C25.069 19.7743 25.682 19.7567 26.1916 20.0255L44.6025 29.7368C45.1246 30.0122 45.459 30.5463 45.4785 31.1363C45.4981 31.7262 45.1999 32.2814 44.6971 32.5907L26.2862 43.9205C25.779 44.2327 25.1427 44.246 24.6228 43.9555C24.1029 43.665 23.7808 43.1161 23.7808 42.5205V21.4795C23.7808 20.9034 24.0824 20.3693 24.5757 20.0718ZM27.0685 24.205V39.5788L40.5205 31.3006L27.0685 24.205ZM13.8639 20.7673C14.7717 20.7673 15.5077 20.0314 15.5077 19.1235C15.5077 18.2156 14.7717 17.4797 13.8639 17.4797C12.956 17.4797 12.22 18.2156 12.22 19.1235C12.22 20.0314 12.956 20.7673 13.8639 20.7673Z", fill: "white" })));
+    };
+    this.renderPauseIcon = () => {
+      return (h("svg", { width: "64", height: "64", viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("rect", { width: "64", height: "64", rx: "32", fill: "#005D92" }), h("g", { "clip-path": "url(#clip0_3459_35103)" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M52.8352 32C52.8352 20.6593 43.6044 11.1648 32 11.1648C26.7253 11.1648 21.7143 13.2747 18.022 16.7033C17.2308 17.2308 16.4396 17.2308 15.6484 16.7033C14.8571 16.1758 15.1209 15.1209 15.6484 14.3297C20.1319 10.3736 25.6703 8 32 8C45.1868 8 56 18.8132 56 32C56 45.1868 45.1868 56 32 56C18.8132 56 8 45.4505 8 32C8 31.2088 8.79121 30.4176 9.58242 30.4176C10.3736 30.4176 11.1648 31.2088 11.1648 32C11.1648 43.3407 20.3956 52.8352 32 52.8352C43.6044 52.8352 52.8352 43.6044 52.8352 32ZM13.8022 20.9231C14.5934 20.9231 15.3846 20.1319 15.3846 19.3407C15.3846 18.5495 14.8571 17.4945 13.8022 17.4945C12.7473 17.4945 12.2198 18.2857 12.2198 19.0769C12.2198 19.8681 13.011 20.9231 13.8022 20.9231Z", fill: "white" }), h("path", { d: "M37.3571 20C36.391 20 35.4644 20.3793 34.7813 21.0544C34.0981 21.7295 33.7143 22.6452 33.7143 23.6V40.4C33.7143 41.3548 34.0981 42.2705 34.7813 42.9456C35.4644 43.6207 36.391 44 37.3571 44C38.3233 44 39.2499 43.6207 39.933 42.9456C40.6162 42.2705 41 41.3548 41 40.4V23.6C41 22.6452 40.6162 21.7295 39.933 21.0544C39.2499 20.3793 38.3233 20 37.3571 20ZM38.5714 40.4C38.5714 40.7182 38.4434 41.0234 38.2157 41.2484C37.988 41.4734 37.6792 41.5998 37.3571 41.5998C37.0351 41.5998 36.7263 41.4734 36.4986 41.2484C36.2709 41.0234 36.1429 40.7182 36.1429 40.4V23.6C36.1429 23.2818 36.2709 22.9766 36.4986 22.7516C36.7263 22.5266 37.0351 22.4002 37.3571 22.4002C37.6792 22.4002 37.988 22.5266 38.2157 22.7516C38.4434 22.9766 38.5714 23.2818 38.5714 23.6V40.4ZM27.6429 20C26.6767 20 25.7501 20.3793 25.067 21.0544C24.3838 21.7295 24 22.6452 24 23.6V40.4C24 41.3548 24.3838 42.2705 25.067 42.9456C25.7501 43.6207 26.6767 44 27.6429 44C28.609 44 29.5356 43.6207 30.2187 42.9456C30.9019 42.2705 31.2857 41.3548 31.2857 40.4V23.6C31.2857 22.6452 30.9019 21.7295 30.2187 21.0544C29.5356 20.3793 28.609 20 27.6429 20ZM28.8571 40.4C28.8571 40.7182 28.7291 41.0234 28.5014 41.2484C28.2737 41.4734 27.9649 41.5998 27.6429 41.5998C27.3208 41.5998 27.012 41.4734 26.7843 41.2484C26.5566 41.0234 26.4286 40.7182 26.4286 40.4V23.6C26.4286 23.2818 26.5566 22.9766 26.7843 22.7516C27.012 22.5266 27.3208 22.4002 27.6429 22.4002C27.9649 22.4002 28.2737 22.5266 28.5014 22.7516C28.7291 22.9766 28.8571 23.2818 28.8571 23.6V40.4Z", fill: "white" })), h("defs", null, h("clipPath", { id: "clip0_3459_35103" }, h("rect", { width: "48", height: "48", fill: "white", transform: "translate(8 8)" })))));
+    };
+    this.language = 'en';
+    this.isPaused = false;
+    this.i18n = undefined;
+  }
+  componentWillLoad() {
+    this.setTranslations();
+  }
+  setTranslations() {
+    if (this.language === 'nb') {
+      this.language = 'no';
+    }
+    if (this.language && translations[this.language]) {
+      this.i18n = translations[this.language];
+    }
+  }
+  onLanguageChange() {
+    this.setTranslations();
+  }
+  render() {
+    return (h(Host, null, h("button", { "aria-label": `${this.i18n.ariaLabel}`, onClick: this.handlePlayPauseClicked }, this.isPaused ? this.renderPlayIcon() : this.renderPauseIcon())));
+  }
+  static get is() { return "pn-video-overlay"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["pn-video-overlay.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["pn-video-overlay.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "language": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "language",
+        "reflect": false,
+        "defaultValue": "'en'"
+      },
+      "isPaused": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-paused",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "i18n": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "playPauseClicked",
+        "name": "playPauseClicked",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "hostElement"; }
+  static get watchers() {
+    return [{
+        "propName": "language",
+        "methodName": "onLanguageChange"
+      }];
+  }
+}

package/collection/components/animation/pn-play-on-scroll/pn-video-overlay/translations.js

@@ -0,0 +1,29 @@
+export const translations = {
+  sv: {
+    ariaLabel: 'Spela eller pausa video',
+  },
+  en: {
+    ariaLabel: 'Play or pause video',
+  },
+  da: {
+    ariaLabel: 'Afspil eller sæt video på pause',
+  },
+  no: {
+    ariaLabel: 'Spill av eller sett video på pause',
+  },
+  fi: {
+    ariaLabel: 'Toista tai keskeytä video',
+  },
+  de: {
+    ariaLabel: 'Video abspielen oder anhalten',
+  },
+  zh: {
+    sharelabel: 'Play or pause video',
+  },
+  it: {
+    sharelabel: 'Play or pause video',
+  },
+  nl: {
+    sharelabel: 'Play or pause video',
+  },
+};

package/collection/components/animation/pn-scroll/pn-scroll.js

@@ -1,20 +1,5 @@
 import { v4 as uuidv4 } from 'uuid';
 import { h, Host } from '@stencil/core';
-const defaultIntersectionCallback = (entries, observer, shouldLoop = false) => {
-  entries.forEach(entry => {
-    if (!shouldLoop) {
-      if (entry.isIntersecting) {
-        entry.target.classList.add('in-view');
-        //stop observering after added
-        observer.unobserve(entry.target);
-      }
-    }
-    else {
-      //toggle and keep observing and toggling, for continous behavior on element
-      entry.target.classList.toggle('in-view', entry.isIntersecting);
-    }
-  });
-};
 const defaultObserverOptions = {
   root: null,
   threshold: 0,
@@ -23,21 +8,45 @@ const defaultObserverOptions = {
 const SCROLL_ID = `pn-scroll-wrapper-id-`;
 export class PnScroll {
   constructor() {
-    this.intersectionCustomCallback = defaultIntersectionCallback;
     this.observerOptions = defaultObserverOptions;
     this.behaviourClasses = 'fade slide-up';
     this.transitionDurationSeconds = 0.5;
+    this.shouldLoop = false;
+    this.intersectFunc = undefined;
+    this.notIntersectFunc = undefined;
     this.compId = null;
   }
   generateUniqueId() {
     return uuidv4();
   }
+  handleIntersection(entries, observer, onIntersecting, onNotIntersecting, shouldLoop) {
+    entries.forEach(entry => {
+      if (!shouldLoop) {
+        if (!entry.isIntersecting) {
+          onNotIntersecting === null || onNotIntersecting === void 0 ? void 0 : onNotIntersecting(entry, observer);
+          return;
+        }
+        entry.target.classList.add('in-view');
+        onIntersecting === null || onIntersecting === void 0 ? void 0 : onIntersecting(entry, observer);
+        observer.unobserve(entry.target);
+      }
+      else {
+        entry.target.classList.toggle('in-view', entry.isIntersecting);
+        if (entry.isIntersecting) {
+          onIntersecting === null || onIntersecting === void 0 ? void 0 : onIntersecting(entry, observer);
+        }
+        else {
+          onNotIntersecting === null || onNotIntersecting === void 0 ? void 0 : onNotIntersecting(entry, observer);
+        }
+      }
+    });
+  }
   //on load, generate unique id for this wrapper
   componentWillLoad() {
     this.compId = this.generateUniqueId();
   }
   componentDidLoad() {
-    const observer = new IntersectionObserver(this.intersectionCustomCallback, this.observerOptions);
+    const observer = new IntersectionObserver((entries, observer) => this.handleIntersection(entries, observer, this.intersectFunc, this.notIntersectFunc, this.shouldLoop), this.observerOptions);
     const objectToObserve = document.getElementById(`${SCROLL_ID}${this.compId}`);
     observer.observe(objectToObserve);
   }
@@ -57,26 +66,6 @@ export class PnScroll {
   }
   static get properties() {
     return {
-      "intersectionCustomCallback": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "IntersectionObserverCallback",
-          "resolved": "IntersectionObserverCallback",
-          "references": {
-            "IntersectionObserverCallback": {
-              "location": "global"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "defaultValue": "defaultIntersectionCallback"
-      },
       "observerOptions": {
         "type": "unknown",
         "mutable": false,
@@ -132,6 +121,62 @@ export class PnScroll {
         "attribute": "transition-duration-seconds",
         "reflect": false,
         "defaultValue": "0.5"
+      },
+      "shouldLoop": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "should-loop",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "intersectFunc": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Function",
+          "resolved": "Function",
+          "references": {
+            "Function": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      },
+      "notIntersectFunc": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Function",
+          "resolved": "Function",
+          "references": {
+            "Function": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
       }
     };
   }

package/components/index.d.ts

@@ -35,6 +35,7 @@ export { PnMarketwebSiteheaderUnifiedLogin as PnMarketwebSiteheaderUnifiedLogin
 export { PnMultiFormField as PnMultiFormfield } from '../types/components/layout-components/pn-multi-formfield/pn-multi-formfield';
 export { PnSpotlight as PnParcelTracker } from '../types/components/cta/pn-parcel-tracker/pn-parcel-tracker';
 export { PnPexPricefinder as PnPexPricefinder } from '../types/components/widgets/pn-pex-pricefinder/pn-pex-pricefinder';
+export { PnPlayOnScroll as PnPlayOnScroll } from '../types/components/animation/pn-play-on-scroll/pn-play-on-scroll';
 export { PnProductCard as PnProductCard } from '../types/components/widgets/pn-product-card/pn-product-card';
 export { PnProductCardInfo as PnProductCardInfo } from '../types/components/widgets/pn-product-card/pn-product-card-info';
 export { PnProductCardPrice as PnProductCardPrice } from '../types/components/widgets/pn-product-card/pn-product-card-price';
@@ -74,6 +75,7 @@ export { PnStatsInfo as PnStatsInfo } from '../types/components/data-visualizati
 export { PnStatsInfoData as PnStatsInfoData } from '../types/components/data-visualization/pn-stats-info/pn-stats-info-data/pn-stats-info-data';
 export { PnTeaserCard as PnTeaserCard } from '../types/components/cards/pn-teaser-card/pn-teaser-card';
 export { PnTiletag as PnTitletag } from '../types/components/minor/pn-titletag/pn-titletag';
+export { PnVideoOverlay as PnVideoOverlay } from '../types/components/animation/pn-play-on-scroll/pn-video-overlay/pn-video-overlay';
 
 /**
  * Used to manually set the base path where assets can be found.

package/components/index.js

@@ -35,6 +35,7 @@ export { PnMarketwebSiteheaderUnifiedLogin, defineCustomElement as defineCustomE
 export { PnMultiFormfield, defineCustomElement as defineCustomElementPnMultiFormfield } from './pn-multi-formfield.js';
 export { PnParcelTracker, defineCustomElement as defineCustomElementPnParcelTracker } from './pn-parcel-tracker.js';
 export { PnPexPricefinder, defineCustomElement as defineCustomElementPnPexPricefinder } from './pn-pex-pricefinder.js';
+export { PnPlayOnScroll, defineCustomElement as defineCustomElementPnPlayOnScroll } from './pn-play-on-scroll.js';
 export { PnProductCard, defineCustomElement as defineCustomElementPnProductCard } from './pn-product-card.js';
 export { PnProductCardInfo, defineCustomElement as defineCustomElementPnProductCardInfo } from './pn-product-card-info.js';
 export { PnProductCardPrice, defineCustomElement as defineCustomElementPnProductCardPrice } from './pn-product-card-price.js';
@@ -74,3 +75,4 @@ export { PnStatsInfo, defineCustomElement as defineCustomElementPnStatsInfo } fr
 export { PnStatsInfoData, defineCustomElement as defineCustomElementPnStatsInfoData } from './pn-stats-info-data.js';
 export { PnTeaserCard, defineCustomElement as defineCustomElementPnTeaserCard } from './pn-teaser-card.js';
 export { PnTitletag, defineCustomElement as defineCustomElementPnTitletag } from './pn-titletag.js';
+export { PnVideoOverlay, defineCustomElement as defineCustomElementPnVideoOverlay } from './pn-video-overlay.js';

package/components/pn-play-on-scroll.d.ts

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

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

@@ -0,0 +1,102 @@
+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();
+
+const PnPlayOnScroll = PnPlayOnScroll$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnPlayOnScroll, defineCustomElement };

package/components/pn-scroll.js

@@ -1,77 +1,4 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { v as v4 } from './v4.js';
-
-const pnScrollCss = "pn-scroll .scroll-wrapper{-webkit-transition:all var(--transition-duration) ease-in-out 250ms;transition:all var(--transition-duration) ease-in-out 250ms}pn-scroll .scroll-wrapper.fade{opacity:0}pn-scroll .scroll-wrapper.fade.in-view{opacity:1}pn-scroll .scroll-wrapper.slide-up{-webkit-transform:translateY(50px);transform:translateY(50px)}pn-scroll .scroll-wrapper.slide-up.in-view{-webkit-transform:translateY(0);transform:translateY(0)}";
-
-const defaultIntersectionCallback = (entries, observer, shouldLoop = false) => {
-  entries.forEach(entry => {
-    if (!shouldLoop) {
-      if (entry.isIntersecting) {
-        entry.target.classList.add('in-view');
-        //stop observering after added
-        observer.unobserve(entry.target);
-      }
-    }
-    else {
-      //toggle and keep observing and toggling, for continous behavior on element
-      entry.target.classList.toggle('in-view', entry.isIntersecting);
-    }
-  });
-};
-const defaultObserverOptions = {
-  root: null,
-  threshold: 0,
-  rootMargin: '0px 0px -150px 0px',
-};
-const SCROLL_ID = `pn-scroll-wrapper-id-`;
-const PnScroll$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.intersectionCustomCallback = defaultIntersectionCallback;
-    this.observerOptions = defaultObserverOptions;
-    this.behaviourClasses = 'fade slide-up';
-    this.transitionDurationSeconds = 0.5;
-    this.compId = null;
-  }
-  generateUniqueId() {
-    return v4();
-  }
-  //on load, generate unique id for this wrapper
-  componentWillLoad() {
-    this.compId = this.generateUniqueId();
-  }
-  componentDidLoad() {
-    const observer = new IntersectionObserver(this.intersectionCustomCallback, this.observerOptions);
-    const objectToObserve = document.getElementById(`${SCROLL_ID}${this.compId}`);
-    observer.observe(objectToObserve);
-  }
-  render() {
-    return (h(Host, null, h("div", { class: `scroll-wrapper ${this.behaviourClasses}`, id: `${SCROLL_ID}${this.compId}`, style: { '--transition-duration': `${this.transitionDurationSeconds}s` } }, h("slot", { name: "scroll-affected" }))));
-  }
-  get hostElement() { return this; }
-  static get style() { return pnScrollCss; }
-}, [4, "pn-scroll", {
-    "intersectionCustomCallback": [16],
-    "observerOptions": [16],
-    "behaviourClasses": [1, "behaviour-classes"],
-    "transitionDurationSeconds": [2, "transition-duration-seconds"],
-    "compId": [32]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["pn-scroll"];
-  components.forEach(tagName => { switch (tagName) {
-    case "pn-scroll":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, PnScroll$1);
-      }
-      break;
-  } });
-}
-defineCustomElement$1();
+import { P as PnScroll$1, d as defineCustomElement$1 } from './pn-scroll2.js';
 
 const PnScroll = PnScroll$1;
 const defineCustomElement = defineCustomElement$1;