npm - @postnord/pn-marketweb-components - Versions diffs - 4.2.0 → 4.2.2 - Mend

@postnord/pn-marketweb-components 4.2.0 → 4.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (37) hide show

package/components/pn-media-block.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pn-media-block.js","mappings":"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","names":[],"sources":["src/components/media/pn-media-block/pn-media-block.scss?tag=pn-media-block","src/components/media/pn-media-block/pn-media-block.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\n$animationDuration: 20s;\n\npn-media-block {\n .media-block {\n .media-block__block-container {\n display: grid;\n overflow: hidden;\n }\n .media-block__media-container,\n .media-block__content-container,\n .media-block__overlay-filter {\n grid-area: 1 / 1;\n width: 100%;\n position: relative;\n }\n\n .media-block__media-container {\n height: 100vh;\n overflow: hidden;\n position: relative;\n\n img,\n video {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n object-fit: cover;\n pointer-events: none;\n max-width: 100%;\n max-height: none;\n height: 100%;\n width: 100%;\n pointer-events: none;\n }\n\n pn-play-on-scroll {\n width: 100%;\n height: 100%;\n }\n\n .scroll-wrapper {\n width: 100%;\n height: 100%;\n }\n\n [slot='scroll-affected'] {\n width: 100%;\n height: 100%;\n display: flex;\n }\n\n .scroll-wrapper,\n .scroll-affected {\n width: 100%;\n height: 100%;\n display: flex;\n }\n video {\n width: 100%;\n height: 100%;\n }\n }\n\n .media-block__overlay-filter {\n z-index: 2;\n }\n\n .media-block__content-container {\n z-index: 3;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: opacity 1s;\n flex-direction: column;\n margin: 0 auto;\n padding: 3.4rem 0;\n\n @include inner-container;\n\n @media screen and (min-width: $min-width-lg) {\n padding: 6.4rem 0;\n }\n\n @media screen and (min-width: $min-width-xl) {\n padding: 7.2rem 0;\n }\n\n @media screen and (min-width: $min-width-xxl) {\n padding: 8rem 0;\n }\n\n .media-block__block-heading {\n max-width: 100rem;\n text-wrap: balance;\n color: white;\n font-size: 3.2rem;\n text-align: center;\n font-weight: 700;\n line-height: 1.1;\n margin-bottom: 3rem;\n\n @media screen and (min-width: $min-width-sm) {\n font-size: 4rem;\n }\n\n @media screen and (min-width: $min-width-md) {\n font-size: 4.8rem;\n }\n\n @media screen and (min-width: $min-width-lg) {\n font-size: 5.6rem;\n }\n\n @media screen and (min-width: $min-width-xl) {\n font-size: 8rem;\n }\n\n @media screen and (min-width: $min-width-xxl) {\n font-size: 8.8rem;\n }\n }\n\n .media-block__preamble {\n max-width: 80rem;\n max-width: 80ch;\n text-wrap: balance;\n display: flex;\n color: white;\n font-size: 1.8rem;\n text-align: center;\n font-weight: 300;\n\n @media screen and (min-width: $min-width-sm) {\n font-size: 2rem;\n }\n\n @media screen and (min-width: $min-width-xl) {\n font-size: 2.4rem;\n }\n\n @media screen and (min-width: $min-width-xxl) {\n font-weight: 500;\n }\n }\n\n .media-block__cta-link {\n margin-top: 3rem;\n }\n }\n }\n\n .media-block--height-100svh {\n min-height: 100vh;\n\n @supports (height: 100svh) {\n height: 100svh;\n }\n\n .media-block__block-container {\n height: 100vh;\n\n @supports (max-height: 100svh) {\n max-height: 100svh;\n }\n\n .media-block__media-container,\n .media-block__content-container,\n .media-block__overlay-filter {\n height: 100vh;\n\n @supports (max-height: 100svh) {\n max-height: 100svh;\n }\n }\n\n .media-block__media-container picture {\n height: 100vh;\n\n @supports (max-height: 100svh) {\n max-height: 100svh;\n }\n }\n }\n }\n\n .media-block--height-65svh {\n min-height: 65svh;\n overflow: auto;\n\n .media-block__block-container {\n height: 65vh;\n\n @supports (max-height: 100svh) {\n max-height: 65svh;\n }\n\n .media-block__media-container,\n .media-block__content-container,\n .media-block__overlay-filter {\n height: 65vh;\n\n @supports (max-height: 100svh) {\n max-height: 65svh;\n }\n }\n }\n\n .media-block__media-container picture {\n max-height: none !important;\n height: auto !important;\n }\n }\n\n .media-block--height-dynamic {\n height: auto;\n overflow: auto;\n\n .media-block__block-container {\n height: auto;\n max-height: none;\n\n .media-block__media-container,\n .media-block__content-container,\n .media-block__overlay-filter {\n height: auto;\n max-height: none;\n }\n }\n }\n\n .media-block--with-overlay {\n .media-block__block-container .media-block__overlay-filter {\n z-index: 2;\n background: radial-gradient(circle, rgba(13, 35, 75, 0.68) 7%, rgba(13, 35, 75, 0) 80%);\n }\n }\n\n .media-block--fixed-background {\n .media-block__block-container {\n .media-block__media-container,\n .media-block__overlay-filter {\n position: relative;\n overflow: hidden;\n top: 0;\n width: 100%;\n display: flex !important;\n clip-path: inset(0);\n }\n\n .media-block__media-container {\n picture {\n position: absolute;\n top: 0;\n width: 100%;\n display: flex !important;\n height: 100%;\n\n img {\n position: fixed;\n width: 100%;\n height: 100%;\n object-fit: cover;\n z-index: 1;\n }\n }\n }\n }\n }\n\n .media-block--video {\n .media-block__content-container {\n max-width: 80%;\n }\n }\n\n .media-block--animate-overlay-background {\n .media-block__overlay-filter {\n background-size: 200% 200% !important;\n animation: overlayBackgroundAnimation $animationDuration ease infinite;\n }\n }\n\n @keyframes overlayBackgroundAnimation {\n 0% {\n background-position: 100% 100%;\n }\n 50% {\n background-position: 50% 60%;\n }\n 100% {\n background-position: 100% 100%;\n }\n }\n\n .media-block--margin-bottom {\n margin-bottom: 3.2rem;\n\n @media screen and (min-width:$min-width-md) {\n margin-bottom: 4rem;\n }\n\n @media screen and (min-width:$min-width-lg) {\n margin-bottom: 5.6rem;\n }\n\n @media screen and (min-width:$min-width-xl) {\n margin-bottom: 7.2rem;\n }\n }\n}\n","import { HeadingTag } from '@/globals/HeadingTag';\nimport { Component, Element, Prop, h, State } from '@stencil/core';\n\nfunction userPrefersReducedMotion(): boolean {\n return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n\n@Component({\n tag: 'pn-media-block',\n styleUrl: 'pn-media-block.scss',\n})\nexport class PnmediaBlock {\n @Prop() blockHeight: string = null;\n @Prop() imageSrc?: string = null;\n @Prop() imageSrcSmallScreenFormat?: string = undefined;\n @Prop() imageAltText?: string = '';\n @Prop() videoSrc?: string = null;\n @Prop() parallaxScroll: boolean = false;\n @Prop() showOverlayLayer: boolean = false;\n @Prop() customOverlayBackground?: string = null;\n @Prop() animateOverlayBackground: boolean = false;\n @Prop() scrollSnapBlock: boolean = false;\n @Prop() fixedBackground: boolean = false;\n @Prop() blockHeading?: string = null;\n @Prop() blockHeadingLevel?: string = 'h2';\n @Prop() blockPreamble?: string = null;\n @Prop() marginBottom?: boolean = false;\n\n @State() pnPlayOnScrollObserverOptions: IntersectionObserverInit = {\n root: document,\n threshold: 1,\n rootMargin: '220px 0px 220px 0px',\n };\n\n @State() calculatedBlockHeight: number;\n @State() hasButtonSlot: boolean = true;\n\n @Element() block: HTMLElement;\n\n get hasVideo() {\n if (this.videoSrc !== null && this.videoSrc !== 'undefined') {\n return true;\n }\n return false;\n }\n\n get hasImage() {\n if (this.imageSrc !== null && this.imageSrc !== 'undefined') {\n return true;\n }\n return false;\n }\n\n private observerScroll: IntersectionObserver;\n private observerSnap: IntersectionObserver;\n\n componentWillLoad() {\n this.hasButtonSlot = !!this.block.querySelector('[slot=\"cta-button\"]');\n }\n\n async componentDidLoad() {\n const scrollTrigger = document.getElementById('scroll-trigger');\n this.calculatedBlockHeight = this.block.offsetHeight;\n\n const overlayElement = this.block.querySelector('#mediaBlockOverlay') as HTMLElement;\n if (this.customOverlayBackground != null \|\| this.customOverlayBackground != 'undefined') {\n overlayElement.style.background = `${this.customOverlayBackground}`;\n }\n\n if (this.parallaxScroll) {\n this.observerScroll = new IntersectionObserver(\n entries => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n window.addEventListener('scroll', this.handleScroll);\n } else {\n window.removeEventListener('scroll', this.handleScroll);\n }\n });\n },\n { rootMargin: `0px 0px` },\n );\n\n this.observerScroll.observe(scrollTrigger);\n }\n\n if (this.scrollSnapBlock) {\n this.observerSnap = new IntersectionObserver(\n entries => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n // The block is within 100px of the viewport, scroll it into view\n if (this.block instanceof HTMLElement) {\n setTimeout(() => {\n this.block.scrollIntoView({ behavior: 'smooth', block: 'start' });\n }, 1000); // Adjust the delay as needed\n } else {\n console.error('this.block is not a valid HTMLElement');\n }\n }\n });\n },\n {\n root: document,\n rootMargin: '100px 0px 100px 0px',\n threshold: 0,\n },\n );\n\n this.observerSnap.observe(scrollTrigger);\n }\n }\n\n disconnectedCallback() {\n // Clean up the observer and event listener when the component is removed\n if (this.observerScroll) {\n this.observerScroll.disconnect();\n }\n if (this.observerSnap) {\n this.observerSnap.disconnect();\n }\n window.removeEventListener('scroll', this.handleScroll);\n }\n\n handleScroll = () => {\n const mediaBlockElement = this.block.firstElementChild as HTMLElement;\n const scrollTrigger = this.block.querySelector('#scroll-trigger') as HTMLElement;\n const videoPauseButton = this.block.querySelector('#overlayed-button-pause-video') as HTMLButtonElement;\n\n const scrollTriggerTop = scrollTrigger.getBoundingClientRect().top;\n const mediaBlockElementHeight = mediaBlockElement.offsetHeight;\n\n const scrollPosition = mediaBlockElementHeight - scrollTriggerTop;\n\n const parallaxSpeedContent = 0.3;\n const parallaxSpeedMedia = 0.2;\n\n const mediaContainer = this.block.querySelector('.media-block__media-container') as HTMLElement;\n const content = this.block.querySelector('.media-block__content-container') as HTMLElement;\n\n if (mediaContainer != null) {\n // Move the image or video at a slower speed\n mediaContainer.style.transform = `translate(0, ${scrollPosition * (0.1 + parallaxSpeedMedia)}px)`;\n\n if (videoPauseButton != null) {\n // Move the pause button up\n videoPauseButton.style.transform = `translate(0, ${-scrollPosition * (0.3 + parallaxSpeedMedia)}px)`;\n }\n }\n\n if (content) {\n // Move the content at a faster speed\n content.style.transform = `translate(0, ${scrollPosition * (0.5 + parallaxSpeedContent)}px)`;\n\n // Change the opacity based on the scroll position\n const opacity = Math.max(0, 1 - scrollPosition / 600);\n content.style.opacity = `${opacity}`;\n }\n };\n\n render() {\n const { showOverlayLayer, fixedBackground, blockHeight, scrollSnapBlock, hasButtonSlot, hasVideo, hasImage, animateOverlayBackground, marginBottom } = this;\n\n const isVideo = hasVideo;\n const isImage = hasImage;\n\n const classes = [\n 'media-block',\n blockHeight ? `media-block--height-${blockHeight}` : '',\n showOverlayLayer ? 'media-block--with-overlay' : '',\n animateOverlayBackground ? `media-block--animate-overlay-background` : '',\n isVideo ? 'media-block--video' : '',\n scrollSnapBlock ? 'scroll-snap' : 'no-scroll-snap',\n fixedBackground ? 'media-block--fixed-background' : '',\n marginBottom ? 'media-block--margin-bottom' : '',\n ].join(' ');\n\n const pnPlayOnScrollObserverOptions: IntersectionObserverInit = {\n root: this.blockHeight === '100svh' ? this.block : null,\n threshold: [0, 0.5, 1], // Callback will be executed when 0%, 50%, and 100% of the target is visible\n };\n\n return (\n <div class={classes}>\n <div class=\"media-block__block-container\">\n <div class=\"media-block__media-container\">\n {isVideo ? (\n <pn-play-on-scroll show-overlay={this.showOverlayLayer} observerOptions={pnPlayOnScrollObserverOptions} video-src={this.videoSrc}></pn-play-on-scroll>\n ) : isImage ? (\n <picture>\n <source media=\"(min-width: 1400px)\" srcSet={this.imageSrc} />\n <source media=\"(min-width: 1224px)\" srcSet={this.imageSrc} />\n <source media=\"(min-width: 1140px)\" srcSet={this.imageSrc} />\n <source\n media=\"(min-width: 1023px)\"\n srcSet={this.imageSrcSmallScreenFormat && this.imageSrcSmallScreenFormat !== 'undefined' ? this.imageSrcSmallScreenFormat : this.imageSrc}\n />\n <source\n media=\"(min-width: 768px)\"\n srcSet={this.imageSrcSmallScreenFormat && this.imageSrcSmallScreenFormat !== 'undefined' ? this.imageSrcSmallScreenFormat : this.imageSrc}\n />\n <source\n media=\"(min-width: 500px)\"\n srcSet={this.imageSrcSmallScreenFormat && this.imageSrcSmallScreenFormat !== 'undefined' ? this.imageSrcSmallScreenFormat : this.imageSrc}\n />\n <img\n src={this.imageSrcSmallScreenFormat !== 'undefined' ? this.imageSrcSmallScreenFormat : this.imageSrc}\n alt={this.imageAltText !== 'undefined' ? this.imageAltText : ''}\n role={this.imageAltText !== 'undefined' ? 'img' : 'presentation'}\n aria-hidden={this.imageAltText !== 'undefined' ? 'false' : 'true'}\n />\n </picture>\n ) : null}\n </div>\n\n {!isVideo && <div class=\"media-block__overlay-filter\" id=\"mediaBlockOverlay\"></div>}\n\n {(this.blockHeading \|\| this.blockPreamble) && (\n <div class=\"media-block__content-container\">\n {this.blockHeading && (\n <HeadingTag level={this.blockHeadingLevel} cssClass=\"media-block__block-heading\">\n {this.blockHeading}\n </HeadingTag>\n )}\n {this.blockPreamble && <p class=\"media-block__preamble\">{this.blockPreamble}</p>}\n {hasButtonSlot && (\n <div class=\"media-block__cta-link\">\n <slot name=\"cta-button\" />\n </div>\n )}\n </div>\n )}\n </div>\n\n <div id=\"scroll-trigger\"></div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pn-media-block.js","mappings":"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","names":[],"sources":["src/components/media/pn-media-block/pn-media-block.scss?tag=pn-media-block","src/components/media/pn-media-block/pn-media-block.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\n$animationDuration: 20s;\n\npn-media-block {\n .media-block {\n .media-block__block-container {\n display: grid;\n overflow: hidden;\n }\n .media-block__media-container,\n .media-block__content-container,\n .media-block__overlay-filter {\n grid-area: 1 / 1;\n width: 100%;\n position: relative;\n }\n\n .media-block__media-container {\n height: 100vh;\n overflow: hidden;\n position: relative;\n\n img,\n video {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n object-fit: cover;\n pointer-events: none;\n max-width: 100%;\n max-height: none;\n height: 100%;\n width: 100%;\n pointer-events: none;\n }\n\n pn-play-on-scroll {\n width: 100%;\n height: 100%;\n }\n\n .scroll-wrapper {\n width: 100%;\n height: 100%;\n }\n\n [slot='scroll-affected'] {\n width: 100%;\n height: 100%;\n display: flex;\n }\n\n .scroll-wrapper,\n .scroll-affected {\n width: 100%;\n height: 100%;\n display: flex;\n }\n video {\n width: 100%;\n height: 100%;\n }\n }\n\n .media-block__overlay-filter {\n z-index: 2;\n }\n\n .media-block__content-container {\n z-index: 3;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: opacity 1s;\n flex-direction: column;\n margin: 0 auto;\n padding: 3.4rem 0;\n\n @include inner-container;\n\n @media screen and (min-width: $min-width-lg) {\n padding: 6.4rem 0;\n }\n\n @media screen and (min-width: $min-width-xl) {\n padding: 7.2rem 0;\n }\n\n @media screen and (min-width: $min-width-xxl) {\n padding: 8rem 0;\n }\n\n .media-block__block-heading {\n max-width: 100rem;\n text-wrap: balance;\n color: white;\n font-size: 3.2rem;\n text-align: center;\n font-weight: 700;\n line-height: 1.1;\n margin-bottom: 3rem;\n\n @media screen and (min-width: $min-width-sm) {\n font-size: 4rem;\n }\n\n @media screen and (min-width: $min-width-md) {\n font-size: 4.8rem;\n }\n\n @media screen and (min-width: $min-width-lg) {\n font-size: 5.6rem;\n }\n\n @media screen and (min-width: $min-width-xl) {\n font-size: 8rem;\n }\n\n @media screen and (min-width: $min-width-xxl) {\n font-size: 8.8rem;\n }\n }\n\n .media-block__preamble {\n max-width: 80rem;\n max-width: 80ch;\n text-wrap: balance;\n display: flex;\n color: white;\n font-size: 1.8rem;\n text-align: center;\n font-weight: 300;\n\n @media screen and (min-width: $min-width-sm) {\n font-size: 2rem;\n }\n\n @media screen and (min-width: $min-width-xl) {\n font-size: 2.4rem;\n }\n\n @media screen and (min-width: $min-width-xxl) {\n font-weight: 500;\n }\n }\n\n .media-block__cta-link {\n margin-top: 3rem;\n }\n }\n }\n\n .media-block--height-100svh {\n min-height: 100vh;\n\n @supports (height: 100svh) {\n height: 100svh;\n }\n\n .media-block__block-container {\n height: 100vh;\n\n @supports (max-height: 100svh) {\n max-height: 100svh;\n }\n\n .media-block__media-container,\n .media-block__content-container,\n .media-block__overlay-filter {\n height: 100vh;\n\n @supports (max-height: 100svh) {\n max-height: 100svh;\n }\n }\n\n .media-block__media-container picture {\n height: 100vh;\n\n @supports (max-height: 100svh) {\n max-height: 100svh;\n }\n }\n }\n }\n\n .media-block--height-65svh {\n min-height: 65svh;\n overflow: auto;\n\n .media-block__block-container {\n height: 65vh;\n\n @supports (max-height: 100svh) {\n max-height: 65svh;\n }\n\n .media-block__media-container,\n .media-block__content-container,\n .media-block__overlay-filter {\n height: 65vh;\n\n @supports (max-height: 100svh) {\n max-height: 65svh;\n }\n }\n }\n\n .media-block__media-container picture {\n max-height: none !important;\n height: auto !important;\n }\n }\n\n .media-block--height-dynamic {\n height: auto;\n overflow: auto;\n\n .media-block__block-container {\n height: auto;\n max-height: none;\n\n .media-block__media-container,\n .media-block__content-container,\n .media-block__overlay-filter {\n height: auto;\n max-height: none;\n }\n }\n }\n\n .media-block--with-overlay {\n .media-block__block-container .media-block__overlay-filter {\n z-index: 2;\n background: radial-gradient(circle, rgba(13, 35, 75, 0.68) 7%, rgba(13, 35, 75, 0) 80%);\n }\n }\n\n .media-block--fixed-background {\n .media-block__block-container {\n .media-block__media-container,\n .media-block__overlay-filter {\n position: relative;\n overflow: hidden;\n top: 0;\n width: 100%;\n display: flex !important;\n clip-path: inset(0);\n }\n\n .media-block__media-container {\n picture {\n position: absolute;\n top: 0;\n width: 100%;\n display: flex !important;\n height: 100%;\n\n img {\n position: fixed;\n width: 100%;\n height: 100%;\n object-fit: cover;\n z-index: 1;\n }\n }\n }\n }\n }\n\n .media-block--video {\n .media-block__content-container {\n max-width: 80%;\n }\n }\n\n .media-block--animate-overlay-background {\n .media-block__overlay-filter {\n background-size: 200% 200% !important;\n animation: overlayBackgroundAnimation $animationDuration ease infinite;\n }\n }\n\n @keyframes overlayBackgroundAnimation {\n 0% {\n background-position: 100% 100%;\n }\n 50% {\n background-position: 50% 60%;\n }\n 100% {\n background-position: 100% 100%;\n }\n }\n\n .media-block--margin-bottom {\n margin-bottom: 3.2rem;\n\n @media screen and (min-width:$min-width-md) {\n margin-bottom: 4rem;\n }\n\n @media screen and (min-width:$min-width-lg) {\n margin-bottom: 5.6rem;\n }\n\n @media screen and (min-width:$min-width-xl) {\n margin-bottom: 7.2rem;\n }\n }\n}\n","import { HeadingTag } from '@/globals/HeadingTag';\nimport {\n Component,\n Element,\n h,\n Prop,\n State,\n} from '@stencil/core';\n\nfunction userPrefersReducedMotion(): boolean {\n return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n\n@Component({\n tag: 'pn-media-block',\n styleUrl: 'pn-media-block.scss',\n})\nexport class PnmediaBlock {\n @Prop() blockHeight: string = null;\n @Prop() imageSrc?: string = null;\n @Prop() imageSrcSmallScreenFormat?: string = undefined;\n @Prop() imageAltText?: string = '';\n @Prop() videoSrc?: string = null;\n @Prop() parallaxScroll: boolean = false;\n @Prop() showOverlayLayer: boolean = false;\n @Prop() customOverlayBackground?: string = null;\n @Prop() animateOverlayBackground: boolean = false;\n @Prop() scrollSnapBlock: boolean = false;\n @Prop() fixedBackground: boolean = false;\n @Prop() blockHeading?: string = null;\n @Prop() blockHeadingLevel?: string = 'h2';\n @Prop() blockPreamble?: string = null;\n @Prop() marginBottom?: boolean = false;\n\n @State() pnPlayOnScrollObserverOptions: IntersectionObserverInit = {\n root: document,\n threshold: 1,\n rootMargin: '220px 0px 220px 0px',\n };\n\n @State() calculatedBlockHeight: number;\n @State() hasButtonSlot: boolean = true;\n\n @Element() block: HTMLElement;\n\n get hasVideo() {\n if (this.videoSrc !== null && this.videoSrc !== 'undefined') {\n return true;\n }\n return false;\n }\n\n get hasImage() {\n if (this.imageSrc !== null && this.imageSrc !== 'undefined') {\n return true;\n }\n return false;\n }\n\n private observerScroll: IntersectionObserver;\n private observerSnap: IntersectionObserver;\n\n componentWillLoad() {\n this.hasButtonSlot = !!this.block.querySelector('[slot=\"cta-button\"]');\n }\n\n async componentDidLoad() {\n const scrollTrigger = document.getElementById('scroll-trigger');\n this.calculatedBlockHeight = this.block.offsetHeight;\n\n const overlayElement = this.block.querySelector<HTMLElement>('#mediaBlockOverlay');\n const bg = this.customOverlayBackground?.trim();\n\n if (overlayElement && bg && bg !== 'undefined' && bg !== 'null') {\n overlayElement.style.background = bg;\n }\n\n if (this.parallaxScroll) {\n this.observerScroll = new IntersectionObserver(\n entries => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n window.addEventListener('scroll', this.handleScroll);\n } else {\n window.removeEventListener('scroll', this.handleScroll);\n }\n });\n },\n { rootMargin: `0px 0px` },\n );\n\n this.observerScroll.observe(scrollTrigger);\n }\n\n if (this.scrollSnapBlock) {\n this.observerSnap = new IntersectionObserver(\n entries => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n // The block is within 100px of the viewport, scroll it into view\n if (this.block instanceof HTMLElement) {\n setTimeout(() => {\n this.block.scrollIntoView({ behavior: 'smooth', block: 'start' });\n }, 1000); // Adjust the delay as needed\n } else {\n console.error('this.block is not a valid HTMLElement');\n }\n }\n });\n },\n {\n root: document,\n rootMargin: '100px 0px 100px 0px',\n threshold: 0,\n },\n );\n\n this.observerSnap.observe(scrollTrigger);\n }\n }\n\n disconnectedCallback() {\n // Clean up the observer and event listener when the component is removed\n if (this.observerScroll) {\n this.observerScroll.disconnect();\n }\n if (this.observerSnap) {\n this.observerSnap.disconnect();\n }\n window.removeEventListener('scroll', this.handleScroll);\n }\n\n handleScroll = () => {\n const mediaBlockElement = this.block.firstElementChild as HTMLElement;\n const scrollTrigger = this.block.querySelector('#scroll-trigger') as HTMLElement;\n const videoPauseButton = this.block.querySelector('#overlayed-button-pause-video') as HTMLButtonElement;\n\n const scrollTriggerTop = scrollTrigger.getBoundingClientRect().top;\n const mediaBlockElementHeight = mediaBlockElement.offsetHeight;\n\n const scrollPosition = mediaBlockElementHeight - scrollTriggerTop;\n\n const parallaxSpeedContent = 0.3;\n const parallaxSpeedMedia = 0.2;\n\n const mediaContainer = this.block.querySelector('.media-block__media-container') as HTMLElement;\n const content = this.block.querySelector('.media-block__content-container') as HTMLElement;\n\n if (mediaContainer != null) {\n // Move the image or video at a slower speed\n mediaContainer.style.transform = `translate(0, ${scrollPosition * (0.1 + parallaxSpeedMedia)}px)`;\n\n if (videoPauseButton != null) {\n // Move the pause button up\n videoPauseButton.style.transform = `translate(0, ${-scrollPosition * (0.3 + parallaxSpeedMedia)}px)`;\n }\n }\n\n if (content) {\n // Move the content at a faster speed\n content.style.transform = `translate(0, ${scrollPosition * (0.5 + parallaxSpeedContent)}px)`;\n\n // Change the opacity based on the scroll position\n const opacity = Math.max(0, 1 - scrollPosition / 600);\n content.style.opacity = `${opacity}`;\n }\n };\n\n render() {\n const { showOverlayLayer, fixedBackground, blockHeight, scrollSnapBlock, hasButtonSlot, hasVideo, hasImage, animateOverlayBackground, marginBottom } = this;\n\n const isVideo = hasVideo;\n const isImage = hasImage;\n\n const classes = [\n 'media-block',\n blockHeight ? `media-block--height-${blockHeight}` : '',\n showOverlayLayer ? 'media-block--with-overlay' : '',\n animateOverlayBackground ? `media-block--animate-overlay-background` : '',\n isVideo ? 'media-block--video' : '',\n scrollSnapBlock ? 'scroll-snap' : 'no-scroll-snap',\n fixedBackground ? 'media-block--fixed-background' : '',\n marginBottom ? 'media-block--margin-bottom' : '',\n ].join(' ');\n\n const pnPlayOnScrollObserverOptions: IntersectionObserverInit = {\n root: this.blockHeight === '100svh' ? this.block : null,\n threshold: [0, 0.5, 1], // Callback will be executed when 0%, 50%, and 100% of the target is visible\n };\n\n return (\n <div class={classes}>\n <div class=\"media-block__block-container\">\n <div class=\"media-block__media-container\">\n {isVideo ? (\n <pn-play-on-scroll show-overlay={this.showOverlayLayer} observerOptions={pnPlayOnScrollObserverOptions} video-src={this.videoSrc}></pn-play-on-scroll>\n ) : isImage ? (\n <picture>\n <source media=\"(min-width: 1400px)\" srcSet={this.imageSrc} />\n <source media=\"(min-width: 1224px)\" srcSet={this.imageSrc} />\n <source media=\"(min-width: 1140px)\" srcSet={this.imageSrc} />\n <source\n media=\"(min-width: 1023px)\"\n srcSet={this.imageSrcSmallScreenFormat && this.imageSrcSmallScreenFormat !== 'undefined' ? this.imageSrcSmallScreenFormat : this.imageSrc}\n />\n <source\n media=\"(min-width: 768px)\"\n srcSet={this.imageSrcSmallScreenFormat && this.imageSrcSmallScreenFormat !== 'undefined' ? this.imageSrcSmallScreenFormat : this.imageSrc}\n />\n <source\n media=\"(min-width: 500px)\"\n srcSet={this.imageSrcSmallScreenFormat && this.imageSrcSmallScreenFormat !== 'undefined' ? this.imageSrcSmallScreenFormat : this.imageSrc}\n />\n <img\n src={this.imageSrcSmallScreenFormat !== 'undefined' ? this.imageSrcSmallScreenFormat : this.imageSrc}\n alt={this.imageAltText !== 'undefined' ? this.imageAltText : ''}\n role={this.imageAltText !== 'undefined' ? 'img' : 'presentation'}\n aria-hidden={this.imageAltText !== 'undefined' ? 'false' : 'true'}\n />\n </picture>\n ) : null}\n </div>\n\n {!isVideo && <div class=\"media-block__overlay-filter\" id=\"mediaBlockOverlay\"></div>}\n\n {(this.blockHeading \|\| this.blockPreamble) && (\n <div class=\"media-block__content-container\">\n {this.blockHeading && (\n <HeadingTag level={this.blockHeadingLevel} cssClass=\"media-block__block-heading\">\n {this.blockHeading}\n </HeadingTag>\n )}\n {this.blockPreamble && <p class=\"media-block__preamble\">{this.blockPreamble}</p>}\n {hasButtonSlot && (\n <div class=\"media-block__cta-link\">\n <slot name=\"cta-button\" />\n </div>\n )}\n </div>\n )}\n </div>\n\n <div id=\"scroll-trigger\"></div>\n </div>\n );\n }\n}\n"],"version":3}

package/components/pn-site-selector2.js CHANGED Viewed

@@ -44,7 +44,7 @@ const PnSiteSelector = /*@__PURE__*/ proxyCustomElement(class PnSiteSelector ext
         }
     }
     render() {
-        return (h(Host, { key: 'ac59e2962f921acb6e7439517a5344992c33d539' }, h("pn-button-dropdown", { key: '884bffb7024ff896652e9c0df04127b77c12be56', label: this.buttontext, icon: angle_small_down, appearance: "light", variant: "borderless" }, h("div", { key: '2d6cd4f4d959a3fce5c6c6131ddd3c18f4824320', class: "siteselector-nav", "aria-label": this.i18n.navlabel }, this.heading ? h("strong", { class: "siteselector-heading" }, this.heading) : null, h("div", { key: '9a0f90ac531974293f687830e35fe3b61eb51cde', role: "menu", class: "siteselector-list" }, h("slot", { key: 'e7c49e2ceaa9c59559b7e43eee5ec0572ec3f8c0' }))))));
+        return (h(Host, { key: 'ac59e2962f921acb6e7439517a5344992c33d539' }, h("pn-button-dropdown", { key: '717d4412cc16fa75cc075df49b89e86b0b29cbc2', label: this.buttontext, icon: angle_small_down, appearance: "light", variant: "borderless", "aria-label": this.i18n.navlabel }, h("div", { key: '3bec2e29f0ff717506c74d036477a31a01ee4ac8', class: "siteselector-nav" }, this.heading ? h("strong", { class: "siteselector-heading" }, this.heading) : null, h("div", { key: '9a0f90ac531974293f687830e35fe3b61eb51cde', role: "menu", class: "siteselector-list" }, h("slot", { key: 'e7c49e2ceaa9c59559b7e43eee5ec0572ec3f8c0' }))))));
     }
     static get style() { return PnSiteSelectorStyle0; }
 }, [4, "pn-site-selector", {

package/components/pn-site-selector2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pn-site-selector2.js","mappings":";;;AAAA,qBAAe;AACf,EAAE,EAAE,EAAE;AACN,IAAI,QAAQ,EAAE,kBAAkB;AAChC,GAAG;AACH,EAAE,EAAE,EAAE;AACN,IAAI,QAAQ,EAAE,kBAAkB;AAChC,GAAG;AACH,EAAE,EAAE,EAAE;AACN,IAAI,QAAQ,EAAE,gBAAgB;AAC9B,GAAG;AACH,EAAE,EAAE,EAAE;AACN,IAAI,QAAQ,EAAE,iBAAiB;AAC/B,GAAG;AACH,EAAE,EAAE,EAAE;AACN,IAAI,QAAQ,EAAE,sBAAsB;AACpC,GAAG;AACH,EAAE,EAAE,EAAE;AACN,IAAI,QAAQ,EAAE,kBAAkB;AAChC,GAAG;AACH,CAAC;;ACnBD,MAAM,iBAAiB,GAAG,6xBAA6xB,CAAC;AACxzB,6BAAe,iBAAiB;;MCOnB,cAAc;;;;0BAIoC,UAAU;uBAEb,UAAU;wBAET,IAAI;oBAC7B,EAAE,QAAQ,EAAE,eAAe,EAAE;;;IAE/D,iBAAiB;QACf,IAAI,CAAC,WAAW,EAAE,CAAC;KACpB;IAED,WAAW;QACT,IAAI,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE;YAC/B,IAAI,CAAC,IAAI,GAAG,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAqB,CAAC;SAC7D;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,2EAAoB,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,gBAAgB,EAAE,UAAU,EAAC,OAAO,EAAC,OAAO,EAAC,YAAY,~~IACzG,4DAAK,KAAK,EAAC,kBAAkB,~~gBAAa,IAAI,CAAC,IAAI,CAAC,QAAQ,~~IACzD~~,IAAI,CAAC,OAAO,GAAG,cAAQ,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,OAAO,CAAU,GAAG,IAAI,EACnF,4DAAK,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,mBAAmB,IACxC,8DAAQ,CACJ,CACF,CACa,CAChB,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/navigation/pn-site-selector/pn-site-selector-i18n.js","src/components/navigation/pn-site-selector/pn-site-selector.scss?tag=pn-site-selector","src/components/navigation/pn-site-selector/pn-site-selector.tsx"],"sourcesContent":["export default {\n sv: {\n navlabel: 'Webbplatsväljare',\n },\n en: {\n navlabel: 'Website selector',\n },\n da: {\n navlabel: 'Webstedsvælger',\n },\n no: {\n navlabel: 'Nettstedsvelger',\n },\n fi: {\n navlabel: 'Verkkosivun valitsin',\n },\n de: {\n navlabel: 'Website-Selektor',\n },\n};\n","@import '../../../globals/main.scss';\n@import './pn-site-selector-common.scss';\n\npn-site-selector {\n display: flex;\n position: relative;\n justify-content: center;\n max-height: 5.2rem;\n\n @media screen and (min-width: $siteselector-media-desktop) {\n display: block;\n }\n}\n\n.siteselector-heading {\n display: block;\n padding: 0;\n margin-bottom: 1.6rem;\n\n @media screen and (min-width: $siteselector-media-desktop) {\n display: flex;\n align-items: center;\n margin-top: 0.8rem;\n }\n}\n\n.siteselector-list {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n","import { Component, Prop, h, State, Element, Host } from '@stencil/core';\nimport { SiteSelectori18n } from './pn-site-selector-types';\nimport languageData from './pn-site-selector-i18n';\nimport { angle_small_down } from 'pn-design-assets/pn-assets/icons.js';\n@Component({\n tag: 'pn-site-selector',\n styleUrl: 'pn-site-selector.scss',\n})\nexport class PnSiteSelector {\n @Element() hostElement: HTMLElement;\n\n /* Site selector Button text /\n @Prop({ mutable: true, reflect: true }) buttontext: string = 'postnord';\n / Site selector flyout title /\n @Prop({ mutable: true, reflect: true }) heading: string = 'PostNord';\n /* Specifies which language we want to show navigation in (sv,da,fi,no,en) */\n @Prop({ mutable: true, reflect: true }) language: string = 'sv';\n @State() i18n: SiteSelectori18n = { navlabel: 'Site selector' };\n\n componentWillLoad() {\n this.setLanguage();\n }\n\n setLanguage() {\n if (languageData[this.language]) {\n this.i18n = languageData[this.language] as SiteSelectori18n;\n }\n }\n\n render() {\n return (\n <Host>\n <pn-button-dropdown label={this.buttontext} icon={angle_small_down} appearance=\"light\" variant=\"borderless\">\n <div class=\"siteselector-nav\" ~~aria-label={this.i18n.navlabel}~~>\n {this.heading ? <strong class=\"siteselector-heading\">{this.heading}</strong> : null}\n <div role=\"menu\" class=\"siteselector-list\">\n <slot />\n </div>\n </div>\n </pn-button-dropdown>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pn-site-selector2.js","mappings":";;;AAAA,qBAAe;AACf,EAAE,EAAE,EAAE;AACN,IAAI,QAAQ,EAAE,kBAAkB;AAChC,GAAG;AACH,EAAE,EAAE,EAAE;AACN,IAAI,QAAQ,EAAE,kBAAkB;AAChC,GAAG;AACH,EAAE,EAAE,EAAE;AACN,IAAI,QAAQ,EAAE,gBAAgB;AAC9B,GAAG;AACH,EAAE,EAAE,EAAE;AACN,IAAI,QAAQ,EAAE,iBAAiB;AAC/B,GAAG;AACH,EAAE,EAAE,EAAE;AACN,IAAI,QAAQ,EAAE,sBAAsB;AACpC,GAAG;AACH,EAAE,EAAE,EAAE;AACN,IAAI,QAAQ,EAAE,kBAAkB;AAChC,GAAG;AACH,CAAC;;ACnBD,MAAM,iBAAiB,GAAG,6xBAA6xB,CAAC;AACxzB,6BAAe,iBAAiB;;MCOnB,cAAc;;;;0BAIoC,UAAU;uBAEb,UAAU;wBAET,IAAI;oBAC7B,EAAE,QAAQ,EAAE,eAAe,EAAE;;;IAE/D,iBAAiB;QACf,IAAI,CAAC,WAAW,EAAE,CAAC;KACpB;IAED,WAAW;QACT,IAAI,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE;YAC/B,IAAI,CAAC,IAAI,GAAG,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAqB,CAAC;SAC7D;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,2EAAoB,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,gBAAgB,EAAE,UAAU,EAAC,OAAO,EAAC,OAAO,EAAC,YAAY,gBAAa,IAAI,CAAC,IAAI,CAAC,QAAQ,IACxI,4DAAK,KAAK,EAAC,kBAAkB,IAC1B,IAAI,CAAC,OAAO,GAAG,cAAQ,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,OAAO,CAAU,GAAG,IAAI,EACnF,4DAAK,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,mBAAmB,IACxC,8DAAQ,CACJ,CACF,CACa,CAChB,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/navigation/pn-site-selector/pn-site-selector-i18n.js","src/components/navigation/pn-site-selector/pn-site-selector.scss?tag=pn-site-selector","src/components/navigation/pn-site-selector/pn-site-selector.tsx"],"sourcesContent":["export default {\n sv: {\n navlabel: 'Webbplatsväljare',\n },\n en: {\n navlabel: 'Website selector',\n },\n da: {\n navlabel: 'Webstedsvælger',\n },\n no: {\n navlabel: 'Nettstedsvelger',\n },\n fi: {\n navlabel: 'Verkkosivun valitsin',\n },\n de: {\n navlabel: 'Website-Selektor',\n },\n};\n","@import '../../../globals/main.scss';\n@import './pn-site-selector-common.scss';\n\npn-site-selector {\n display: flex;\n position: relative;\n justify-content: center;\n max-height: 5.2rem;\n\n @media screen and (min-width: $siteselector-media-desktop) {\n display: block;\n }\n}\n\n.siteselector-heading {\n display: block;\n padding: 0;\n margin-bottom: 1.6rem;\n\n @media screen and (min-width: $siteselector-media-desktop) {\n display: flex;\n align-items: center;\n margin-top: 0.8rem;\n }\n}\n\n.siteselector-list {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n","import { Component, Prop, h, State, Element, Host } from '@stencil/core';\nimport { SiteSelectori18n } from './pn-site-selector-types';\nimport languageData from './pn-site-selector-i18n';\nimport { angle_small_down } from 'pn-design-assets/pn-assets/icons.js';\n@Component({\n tag: 'pn-site-selector',\n styleUrl: 'pn-site-selector.scss',\n})\nexport class PnSiteSelector {\n @Element() hostElement: HTMLElement;\n\n /* Site selector Button text /\n @Prop({ mutable: true, reflect: true }) buttontext: string = 'postnord';\n / Site selector flyout title /\n @Prop({ mutable: true, reflect: true }) heading: string = 'PostNord';\n /* Specifies which language we want to show navigation in (sv,da,fi,no,en) */\n @Prop({ mutable: true, reflect: true }) language: string = 'sv';\n @State() i18n: SiteSelectori18n = { navlabel: 'Site selector' };\n\n componentWillLoad() {\n this.setLanguage();\n }\n\n setLanguage() {\n if (languageData[this.language]) {\n this.i18n = languageData[this.language] as SiteSelectori18n;\n }\n }\n\n render() {\n return (\n <Host>\n <pn-button-dropdown label={this.buttontext} icon={angle_small_down} appearance=\"light\" variant=\"borderless\" aria-label={this.i18n.navlabel}>\n <div class=\"siteselector-nav\">\n {this.heading ? <strong class=\"siteselector-heading\">{this.heading}</strong> : null}\n <div role=\"menu\" class=\"siteselector-list\">\n <slot />\n </div>\n </div>\n </pn-button-dropdown>\n </Host>\n );\n }\n}\n"],"version":3}

package/esm/pn-language-selector_9.entry.js CHANGED Viewed

@@ -149,7 +149,7 @@ const PnlanguageSelector = class {
         });
     }
     render() {
-        return (h(Host, { key: '51c58ba4d9b206480d1439d4dd9fcf12803e299d', value: this.value }, h("pn-button-dropdown", { key: '2dffb2112ec6a67af450c1e3471fbe6f1183b1ad', label: this.selectedLanguageName, icon: globe, appearance: "light", variant: "borderless" }, h("div", { key: '40f9c5ea57162c02d64d12249eabd96184d6d506', class: "languageselector-nav", "aria-label": this.i18n.heading }, h("strong", { key: '5c8ea21f8fa63c88e65fb64a1de4b9958c6f498f', class: "languageselector-title" }, this.i18n.heading), h("div", { key: '8308aa54e0201a82ec522e8a55c79aae253ca0d4', class: "languageselector-list", role: "list" }, h("slot", { key: 'ec1c726288ca9098f270ab743e716ef75cdeee47' }))))));
+        return (h(Host, { key: '51c58ba4d9b206480d1439d4dd9fcf12803e299d', value: this.value }, h("pn-button-dropdown", { key: 'd025c43d4db63bc312c6d17c97ef9997eebb97cd', label: this.selectedLanguageName, icon: globe, appearance: "light", variant: "borderless", "aria-label": this.i18n.heading }, h("div", { key: 'af8dd3ee81a4b74320025efe5979567341300080', class: "languageselector-nav" }, h("strong", { key: '5c8ea21f8fa63c88e65fb64a1de4b9958c6f498f', class: "languageselector-title" }, this.i18n.heading), h("div", { key: '8308aa54e0201a82ec522e8a55c79aae253ca0d4', class: "languageselector-list", role: "list" }, h("slot", { key: 'ec1c726288ca9098f270ab743e716ef75cdeee47' }))))));
     }
     static get watchers() { return {
         "value": ["setSelectedLanguageName", "setTranslations", "onValueChange"]
@@ -1117,7 +1117,7 @@ const PnSiteSelector = class {
         }
     }
     render() {
-        return (h(Host, { key: 'ac59e2962f921acb6e7439517a5344992c33d539' }, h("pn-button-dropdown", { key: '884bffb7024ff896652e9c0df04127b77c12be56', label: this.buttontext, icon: angle_small_down, appearance: "light", variant: "borderless" }, h("div", { key: '2d6cd4f4d959a3fce5c6c6131ddd3c18f4824320', class: "siteselector-nav", "aria-label": this.i18n.navlabel }, this.heading ? h("strong", { class: "siteselector-heading" }, this.heading) : null, h("div", { key: '9a0f90ac531974293f687830e35fe3b61eb51cde', role: "menu", class: "siteselector-list" }, h("slot", { key: 'e7c49e2ceaa9c59559b7e43eee5ec0572ec3f8c0' }))))));
+        return (h(Host, { key: 'ac59e2962f921acb6e7439517a5344992c33d539' }, h("pn-button-dropdown", { key: '717d4412cc16fa75cc075df49b89e86b0b29cbc2', label: this.buttontext, icon: angle_small_down, appearance: "light", variant: "borderless", "aria-label": this.i18n.navlabel }, h("div", { key: '3bec2e29f0ff717506c74d036477a31a01ee4ac8', class: "siteselector-nav" }, this.heading ? h("strong", { class: "siteselector-heading" }, this.heading) : null, h("div", { key: '9a0f90ac531974293f687830e35fe3b61eb51cde', role: "menu", class: "siteselector-list" }, h("slot", { key: 'e7c49e2ceaa9c59559b7e43eee5ec0572ec3f8c0' }))))));
     }
 };
 PnSiteSelector.style = PnSiteSelectorStyle0;