@postnord/pn-marketweb-components 2.8.4 → 2.8.6

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

@@ -0,0 +1,437 @@
+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)`;
+        if (videoPauseButton != null) {
+          // Move the pause button up
+          videoPauseButton.style.transform = `translate(0, ${-scrollPosition * (0.3 + parallaxSpeedMedia)}px)`;
+        }
+      }
+      if (content) {
+        // Move the content at a faster speed
+        content.style.transform = `translate(0, ${scrollPosition * (0.5 + parallaxSpeedContent)}px)`;
+        // Change the opacity based on the scroll position
+        const opacity = Math.max(0, 1 - scrollPosition / 600);
+        content.style.opacity = `${opacity}`;
+      }
+    };
+    this.blockHeight = null;
+    this.imageSrc = null;
+    this.imageSrcSmallScreenFormat = undefined;
+    this.imageAltText = "";
+    this.videoSrc = null;
+    this.parallaxScroll = false;
+    this.showOverlayLayer = false;
+    this.customOverlayBackground = null;
+    this.animateOverlayBackground = false;
+    this.scrollSnapBlock = false;
+    this.fixedBackground = false;
+    this.blockHeading = null;
+    this.blockHeadingLevel = 2;
+    this.blockPreamble = null;
+    this.pnPlayOnScrollObserverOptions = {
+      root: document,
+      threshold: 1,
+      rootMargin: '220px 0px 220px 0px',
+    };
+    this.calculatedBlockHeight = undefined;
+    this.hasButtonSlot = true;
+  }
+  get blockHeadingLevelChecked() {
+    if (this.blockHeading && this.blockHeading !== null) {
+      console.warn('blockHeadingLevel is required when blockHeading is set');
+      return undefined;
+    }
+    return this.blockHeadingLevel;
+  }
+  get hasVideo() {
+    if (this.videoSrc !== null && this.videoSrc !== "undefined") {
+      return true;
+    }
+    return false;
+  }
+  get hasImage() {
+    if (this.imageSrc !== null && this.imageSrc !== "undefined") {
+      return true;
+    }
+    return false;
+  }
+  componentWillLoad() {
+    this.hasButtonSlot = !!this.block.querySelector('[slot="cta-button"]');
+  }
+  async componentDidLoad() {
+    if (userPrefersReducedMotion()) {
+      // Handle the case where the user prefers reduced motion.
+      // For example, you might disable parallax scrolling:
+      this.parallaxScroll = false;
+    }
+    const scrollTrigger = document.getElementById('scroll-trigger');
+    this.calculatedBlockHeight = this.block.offsetHeight;
+    const overlayElement = this.block.querySelector('#mediaBlockOverlay');
+    if (this.customOverlayBackground != null || this.customOverlayBackground != "undefined") {
+      overlayElement.style.background = `${this.customOverlayBackground}`;
+    }
+    if (this.parallaxScroll) {
+      this.observerScroll = new IntersectionObserver(entries => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            window.addEventListener('scroll', this.handleScroll);
+          }
+          else {
+            window.removeEventListener('scroll', this.handleScroll);
+          }
+        });
+      }, { rootMargin: `0px 0px` });
+      this.observerScroll.observe(scrollTrigger);
+    }
+    ;
+    if (this.scrollSnapBlock) {
+      this.observerSnap = new IntersectionObserver(entries => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            // The block is within 100px of the viewport, scroll it into view
+            if (this.block instanceof HTMLElement) {
+              setTimeout(() => {
+                this.block.scrollIntoView({ behavior: 'smooth', block: 'start' });
+              }, 1000); // Adjust the delay as needed
+            }
+            else {
+              console.error('this.block is not a valid HTMLElement');
+            }
+          }
+        });
+      }, {
+        root: document,
+        rootMargin: "100px 0px 100px 0px",
+        threshold: 0
+      });
+      this.observerSnap.observe(scrollTrigger);
+    }
+    ;
+  }
+  disconnectedCallback() {
+    // Clean up the observer and event listener when the component is removed
+    if (this.observerScroll) {
+      this.observerScroll.disconnect();
+    }
+    if (this.observerSnap) {
+      this.observerSnap.disconnect();
+    }
+    window.removeEventListener('scroll', this.handleScroll);
+  }
+  render() {
+    const { showOverlayLayer, fixedBackground, blockHeight, scrollSnapBlock, blockHeadingLevelChecked, hasButtonSlot, hasVideo, hasImage, animateOverlayBackground } = this;
+    const HeadingTag = `h${blockHeadingLevelChecked !== null && blockHeadingLevelChecked !== void 0 ? blockHeadingLevelChecked : 2}`;
+    const isVideo = hasVideo;
+    const isImage = hasImage;
+    const classes = [
+      'media-block',
+      blockHeight ? `media-block--height-${blockHeight}` : '',
+      showOverlayLayer ? 'media-block--with-overlay' : '',
+      animateOverlayBackground ? `media-block--animate-overlay-background` : '',
+      isVideo ? 'media-block--video' : '',
+      scrollSnapBlock ? 'scroll-snap' : 'no-scroll-snap',
+      fixedBackground ? 'media-block--fixed-background' : ''
+    ].join(' ');
+    const pnPlayOnScrollObserverOptions = {
+      root: this.blockHeight === "100svh" ? document : null,
+      threshold: 1,
+      rootMargin: '220px 0px 220px 0px',
+    };
+    return (h("div", { class: classes }, h("div", { class: "media-block__block-container" }, h("div", { class: "media-block__media-container" }, isVideo ? (h("pn-play-on-scroll", { "show-overlay": this.showOverlayLayer, observerOptions: pnPlayOnScrollObserverOptions, "video-src": this.videoSrc })) : isImage ? (h("picture", null, h("source", { media: "(min-width: 1400px)", srcSet: this.imageSrc }), h("source", { media: "(min-width: 1224px)", srcSet: this.imageSrc }), h("source", { media: "(min-width: 1140px)", srcSet: this.imageSrc }), h("source", { media: "(min-width: 1023px)", srcSet: this.imageSrcSmallScreenFormat && this.imageSrcSmallScreenFormat !== "undefined" ? this.imageSrcSmallScreenFormat : this.imageSrc }), h("source", { media: "(min-width: 768px)", srcSet: this.imageSrcSmallScreenFormat && this.imageSrcSmallScreenFormat !== "undefined" ? this.imageSrcSmallScreenFormat : this.imageSrc }), h("source", { media: "(min-width: 500px)", srcSet: this.imageSrcSmallScreenFormat && this.imageSrcSmallScreenFormat !== "undefined" ? this.imageSrcSmallScreenFormat : this.imageSrc }), h("img", { src: this.imageSrcSmallScreenFormat !== "undefined" ? this.imageSrcSmallScreenFormat : this.imageSrc, alt: this.imageAltText !== "undefined" ? this.imageAltText : "", role: this.imageAltText !== "undefined" ? "img" : "presentation", "aria-hidden": this.imageAltText !== "undefined" ? "false" : "true" }))) : null), !isVideo && (h("div", { class: "media-block__overlay-filter", id: "mediaBlockOverlay" })), (this.blockHeading || this.blockPreamble) && (h("div", { class: "media-block__content-container" }, this.blockHeading && h(HeadingTag, { class: "media-block__block-heading" }, this.blockHeading), this.blockPreamble && h("p", { class: "media-block__preamble" }, this.blockPreamble), hasButtonSlot &&
+      h("div", { class: "media-block__cta-link" }, h("slot", { name: "cta-button" }))))), h("div", { id: "scroll-trigger" })));
+  }
+  static get is() { return "pn-media-block"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["pn-media-block.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["pn-media-block.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "blockHeight": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "block-height",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "imageSrc": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "image-src",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "imageSrcSmallScreenFormat": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "image-src-small-screen-format",
+        "reflect": false,
+        "defaultValue": "undefined"
+      },
+      "imageAltText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "image-alt-text",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "videoSrc": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "video-src",
+        "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,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-overlay-layer",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "customOverlayBackground": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "custom-overlay-background",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "animateOverlayBackground": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "animate-overlay-background",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "scrollSnapBlock": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "scroll-snap-block",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "fixedBackground": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "fixed-background",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "blockHeading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "block-heading",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "blockHeadingLevel": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "block-heading-level",
+        "reflect": false,
+        "defaultValue": "2"
+      },
+      "blockPreamble": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "block-preamble",
+        "reflect": false,
+        "defaultValue": "null"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "pnPlayOnScrollObserverOptions": {},
+      "calculatedBlockHeight": {},
+      "hasButtonSlot": {}
+    };
+  }
+  static get elementRef() { return "block"; }
+}

package/components/index.d.ts

@@ -40,6 +40,7 @@ export { PnMarketwebSiteheaderLoginMypageButton as PnMarketwebSiteheaderLoginMyp
 export { PnMarketwebSiteheaderLoginProfileselection as PnMarketwebSiteheaderLoginProfileselection } from '../types/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-login-profileselection';
 export { PnMarketwebSiteheaderSearch as PnMarketwebSiteheaderSearch } from '../types/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-search';
 export { PnMarketwebSiteheaderUnifiedLogin as PnMarketwebSiteheaderUnifiedLogin } from '../types/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-unified-login';
+export { PnmediaBlock as PnMediaBlock } from '../types/components/media/pn-media-block/pn-media-block';
 export { PnMultiFormField as PnMultiFormfield } from '../types/components/input/pn-multi-formfield/pn-multi-formfield';
 export { PnMultiRowConnectedDropdown as PnMultiRowConnectedDropdown } from '../types/components/input/pn-multi-row-connected-dropdown/pn-multi-row-connected-dropdown';
 export { PnMultiRowConnectedDropdownRow as PnMultiRowConnectedDropdownRow } from '../types/components/input/pn-multi-row-connected-dropdown/pn-multi-row-connected-dropdown-row';

package/components/index.js

@@ -40,6 +40,7 @@ export { PnMarketwebSiteheaderLoginMypageButton, defineCustomElement as defineCu
 export { PnMarketwebSiteheaderLoginProfileselection, defineCustomElement as defineCustomElementPnMarketwebSiteheaderLoginProfileselection } from './pn-marketweb-siteheader-login-profileselection.js';
 export { PnMarketwebSiteheaderSearch, defineCustomElement as defineCustomElementPnMarketwebSiteheaderSearch } from './pn-marketweb-siteheader-search.js';
 export { PnMarketwebSiteheaderUnifiedLogin, defineCustomElement as defineCustomElementPnMarketwebSiteheaderUnifiedLogin } from './pn-marketweb-siteheader-unified-login.js';
+export { PnMediaBlock, defineCustomElement as defineCustomElementPnMediaBlock } from './pn-media-block.js';
 export { PnMultiFormfield, defineCustomElement as defineCustomElementPnMultiFormfield } from './pn-multi-formfield.js';
 export { PnMultiRowConnectedDropdown, defineCustomElement as defineCustomElementPnMultiRowConnectedDropdown } from './pn-multi-row-connected-dropdown.js';
 export { PnMultiRowConnectedDropdownRow, defineCustomElement as defineCustomElementPnMultiRowConnectedDropdownRow } from './pn-multi-row-connected-dropdown-row.js';

package/components/pn-media-block.d.ts

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