@postnord/pn-marketweb-components 2.3.14 → 2.4.1

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,24 @@
+pn-video-overlay button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  padding: 12px;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  background-color: #005D92;
+}
+pn-video-overlay button:hover {
+  background-color: #003d5f;
+}
+pn-video-overlay button:active {
+  background-color: #001c2c;
+}
+pn-video-overlay button:focus, pn-video-overlay button:focus-visible {
+  outline: 2px solid #FFFFFF;
+}
+pn-video-overlay button svg {
+  width: 20px;
+  height: 20px;
+}

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: "19", height: "19", viewBox: "0 0 19 19", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M17 9.125C17 4.77576 13.4742 1.25 9.125 1.25C7.0653 1.25 5.19152 2.03991 3.78779 3.33445C3.53404 3.56846 3.13864 3.55246 2.90463 3.29871C2.67062 3.04496 2.68662 2.64956 2.94037 2.41555C4.56585 0.916511 6.7391 0 9.125 0C14.1646 0 18.25 4.0854 18.25 9.125C18.25 14.1646 14.1646 18.25 9.125 18.25C4.0854 18.25 0 14.1646 0 9.125C0 8.77982 0.279821 8.5 0.625 8.5C0.970178 8.5 1.25 8.77982 1.25 9.125C1.25 13.4742 4.77576 17 9.125 17C13.4742 17 17 13.4742 17 9.125ZM6.30222 4.5898C6.48977 4.47669 6.72286 4.47 6.91659 4.57219L13.9166 8.2645C14.1151 8.36921 14.2422 8.57231 14.2497 8.79661C14.2571 9.02091 14.1437 9.23198 13.9526 9.3496L6.95256 13.6573C6.75972 13.776 6.51778 13.781 6.32012 13.6706C6.12246 13.5601 6 13.3514 6 13.125V5.125C6 4.90597 6.11466 4.70292 6.30222 4.5898ZM7.25 6.16129V12.0065L12.3646 8.85909L7.25 6.16129ZM2.22949 4.85425C2.57467 4.85425 2.85449 4.57443 2.85449 4.22925C2.85449 3.88407 2.57467 3.60425 2.22949 3.60425C1.88431 3.60425 1.60449 3.88407 1.60449 4.22925C1.60449 4.57443 1.88431 4.85425 2.22949 4.85425Z", fill: "white" })));
+    };
+    this.renderPauseIcon = () => {
+      return (h("svg", { width: "20", height: "20", viewBox: "0 0 19 19", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M17 9.1C17 4.8 13.5 1.2 9.1 1.2C7.1 1.2 5.2 2 3.8 3.3C3.5 3.5 3.2 3.5 2.9 3.3C2.6 3.1 2.7 2.7 2.9 2.4C4.6 0.9 6.7 0 9.1 0C14.1 0 18.2 4.1 18.2 9.1C18.2 14.1 14.1 18.2 9.1 18.2C4.1 18.2 0 14.2 0 9.1C0 8.8 0.3 8.5 0.6 8.5C0.9 8.5 1.2 8.8 1.2 9.1C1.2 13.4 4.7 17 9.1 17C13.5 17 17 13.5 17 9.1ZM2.2 4.9C2.5 4.9 2.8 4.6 2.8 4.3C2.8 4 2.6 3.6 2.2 3.6C1.8 3.6 1.6 3.9 1.6 4.2C1.6 4.5 1.9 4.9 2.2 4.9Z", fill: "white" }), h("path", { d: "M10.7143 4C10.3733 4 10.0463 4.14223 9.80515 4.39541C9.56403 4.64858 9.42857 4.99196 9.42857 5.35V11.65C9.42857 12.008 9.56403 12.3514 9.80515 12.6046C10.0463 12.8578 10.3733 13 10.7143 13C11.0553 13 11.3823 12.8578 11.6234 12.6046C11.8645 12.3514 12 12.008 12 11.65V5.35C12 4.99196 11.8645 4.64858 11.6234 4.39541C11.3823 4.14223 11.0553 4 10.7143 4ZM11.1429 11.65C11.1428 11.7693 11.0977 11.8838 11.0173 11.9682C10.9369 12.0525 10.8279 12.0999 10.7143 12.0999C10.6006 12.0999 10.4916 12.0525 10.4113 11.9682C10.3309 11.8838 10.2857 11.7693 10.2857 11.65V5.35C10.2857 5.23066 10.3309 5.11622 10.4113 5.03185C10.4916 4.94747 10.6006 4.90007 10.7143 4.90007C10.8279 4.90007 10.9369 4.94747 11.0173 5.03185C11.0977 5.11622 11.1428 5.23066 11.1429 5.35V11.65ZM7.28571 4C6.94472 4 6.6177 4.14223 6.37658 4.39541C6.13546 4.64858 6 4.99196 6 5.35V11.65C6 12.008 6.13546 12.3514 6.37658 12.6046C6.6177 12.8578 6.94472 13 7.28571 13C7.62671 13 7.95373 12.8578 8.19485 12.6046C8.43597 12.3514 8.57143 12.008 8.57143 11.65V5.35C8.57143 4.99196 8.43597 4.64858 8.19485 4.39541C7.95373 4.14223 7.62671 4 7.28571 4ZM7.71429 11.65C7.71427 11.7693 7.66911 11.8838 7.58874 11.9682C7.50837 12.0525 7.39937 12.0999 7.28571 12.0999C7.17206 12.0999 7.06306 12.0525 6.98269 11.9682C6.90232 11.8838 6.85716 11.7693 6.85714 11.65V5.35C6.85716 5.23066 6.90232 5.11622 6.98269 5.03185C7.06306 4.94747 7.17206 4.90007 7.28571 4.90007C7.39937 4.90007 7.50837 4.94747 7.58874 5.03185C7.66911 5.11622 7.71427 5.23066 7.71429 5.35V11.65Z", fill: "white" })));
+    };
+    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,93 @@
+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}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:0;left:0;padding:24px}";
+
+/*
+    play content when scoll observer sees content as inview
+*/
+const onIntersecting = (video, isManualPaused) => {
+  //what to do when intersecting, eg video.play()
+  if (!isManualPaused) {
+    video && video.play();
+  }
+};
+const onNotIntersecting = (video) => {
+  //what to do when not intersecting, eg video.pause()
+  video && video.pause();
+};
+const observerOptions = {
+  root: null,
+  threshold: 0,
+  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.isPaused = false;
+      }
+      else {
+        this.video.pause();
+        this.isPaused = true;
+      }
+    };
+    this.videoSrc = '';
+    this.videoId = '';
+    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.isPaused), notIntersectFunc: () => onNotIntersecting(this.video), 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.isPaused, onPlayPauseClicked: this.handlePlayPauseClicked })))));
+  }
+  get hostElement() { return this; }
+  static get style() { return pnPlayOnScrollCss; }
+}, [0, "pn-play-on-scroll", {
+    "videoSrc": [1, "video-src"],
+    "videoId": [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;