@postnord/pn-marketweb-components 3.3.1 → 3.3.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.
- package/cjs/pn-media-block.cjs.entry.js +1 -1
- package/cjs/pn-media-block.cjs.entry.js.map +1 -1
- package/collection/components/media/pn-media-block/pn-media-block.css +1 -2
- package/components/pn-media-block.js +1 -1
- package/components/pn-media-block.js.map +1 -1
- package/esm/pn-media-block.entry.js +1 -1
- package/esm/pn-media-block.entry.js.map +1 -1
- package/package.json +1 -1
- package/pn-market-web-components/p-42c9386d.entry.js +2 -0
- package/pn-market-web-components/p-42c9386d.entry.js.map +1 -0
- package/pn-market-web-components/pn-market-web-components.esm.js +1 -1
- package/pn-market-web-components/p-c5856c0b.entry.js +0 -2
- package/pn-market-web-components/p-c5856c0b.entry.js.map +0 -1
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-bca6f414.js');
|
|
6
6
|
|
|
7
|
-
const pnMediaBlockCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-media-block .media-block .media-block__block-container{display:grid;overflow:hidden}pn-media-block .media-block .media-block__media-container,pn-media-block .media-block .media-block__content-container,pn-media-block .media-block .media-block__overlay-filter{grid-area:1/1;width:100%;position:relative}pn-media-block .media-block .media-block__media-container{height:100vh;overflow:hidden;position:relative}pn-media-block .media-block .media-block__media-container img,pn-media-block .media-block .media-block__media-container video{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);object-fit:cover;pointer-events:none;max-width:100%;max-height:none;height:100%;width:100%;pointer-events:none}pn-media-block .media-block .media-block__media-container pn-play-on-scroll{width:100%;height:100%}pn-media-block .media-block .media-block__media-container .scroll-wrapper{width:100%;height:100%}pn-media-block .media-block .media-block__media-container [slot=scroll-affected]{width:100%;height:100%;display:flex}pn-media-block .media-block .media-block__media-container .scroll-wrapper,pn-media-block .media-block .media-block__media-container .scroll-affected{width:100%;height:100%;display:flex}pn-media-block .media-block .media-block__media-container video{width:100%;height:100%}pn-media-block .media-block .media-block__overlay-filter{z-index:2}pn-media-block .media-block .media-block__content-container{z-index:3;display:flex;align-items:center;justify-content:center;transition:opacity 1s;flex-direction:column;margin:0 auto;padding:3.4rem 0;width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media (min-width: 576px){pn-media-block .media-block .media-block__content-container{max-width:540px}}@media (min-width: 768px){pn-media-block .media-block .media-block__content-container{max-width:720px}}@media (min-width: 992px){pn-media-block .media-block .media-block__content-container{max-width:960px}}@media (min-width: 1200px){pn-media-block .media-block .media-block__content-container{max-width:1140px}}@media (min-width: 1640px){pn-media-block .media-block .media-block__content-container{max-width:1440px}}@media screen and (min-width: 992px){pn-media-block .media-block .media-block__content-container{padding:6.4rem 0}}@media screen and (min-width: 1200px){pn-media-block .media-block .media-block__content-container{padding:7.2rem 0}}@media screen and (min-width: 1640px){pn-media-block .media-block .media-block__content-container{padding:8rem 0}}pn-media-block .media-block .media-block__content-container .media-block__block-heading{max-width:100rem;text-wrap:balance;color:white;font-size:3.2rem;text-align:center;font-weight:700;line-height:1.1;margin-bottom:3rem}@media screen and (min-width: 576px){pn-media-block .media-block .media-block__content-container .media-block__block-heading{font-size:4rem}}@media screen and (min-width: 768px){pn-media-block .media-block .media-block__content-container .media-block__block-heading{font-size:4.8rem}}@media screen and (min-width: 992px){pn-media-block .media-block .media-block__content-container .media-block__block-heading{font-size:5.6rem}}@media screen and (min-width: 1200px){pn-media-block .media-block .media-block__content-container .media-block__block-heading{font-size:8rem}}@media screen and (min-width: 1640px){pn-media-block .media-block .media-block__content-container .media-block__block-heading{font-size:8.8rem}}pn-media-block .media-block .media-block__content-container .media-block__preamble{max-width:80rem;max-width:80ch;text-wrap:balance;display:flex;color:white;font-size:1.8rem;text-align:center;font-weight:300}@media screen and (min-width: 576px){pn-media-block .media-block .media-block__content-container .media-block__preamble{font-size:2rem}}@media screen and (min-width: 1200px){pn-media-block .media-block .media-block__content-container .media-block__preamble{font-size:2.4rem}}@media screen and (min-width: 1640px){pn-media-block .media-block .media-block__content-container .media-block__preamble{font-weight:500}}pn-media-block .media-block .media-block__content-container .media-block__cta-link{margin-top:3rem}pn-media-block .media-block--height-100svh{min-height:100vh}@supports (height: 100svh){pn-media-block .media-block--height-100svh{height:100svh}}pn-media-block .media-block--height-100svh .media-block__block-container{height:100vh}@supports (max-height: 100svh){pn-media-block .media-block--height-100svh .media-block__block-container{max-height:100svh}}pn-media-block .media-block--height-100svh .media-block__block-container .media-block__media-container,pn-media-block .media-block--height-100svh .media-block__block-container .media-block__content-container,pn-media-block .media-block--height-100svh .media-block__block-container .media-block__overlay-filter{height:100vh}@supports (max-height: 100svh){pn-media-block .media-block--height-100svh .media-block__block-container .media-block__media-container,pn-media-block .media-block--height-100svh .media-block__block-container .media-block__content-container,pn-media-block .media-block--height-100svh .media-block__block-container .media-block__overlay-filter{max-height:100svh}}pn-media-block .media-block--height-100svh .media-block__block-container .media-block__media-container picture{height:100vh}@supports (max-height: 100svh){pn-media-block .media-block--height-100svh .media-block__block-container .media-block__media-container picture{max-height:100svh}}pn-media-block .media-block--height-65svh{min-height:65svh;overflow:auto}pn-media-block .media-block--height-65svh .media-block__block-container{height:65vh}@supports (max-height: 100svh){pn-media-block .media-block--height-65svh .media-block__block-container{max-height:65svh}}pn-media-block .media-block--height-65svh .media-block__block-container .media-block__media-container,pn-media-block .media-block--height-65svh .media-block__block-container .media-block__content-container,pn-media-block .media-block--height-65svh .media-block__block-container .media-block__overlay-filter{height:65vh}@supports (max-height: 100svh){pn-media-block .media-block--height-65svh .media-block__block-container .media-block__media-container,pn-media-block .media-block--height-65svh .media-block__block-container .media-block__content-container,pn-media-block .media-block--height-65svh .media-block__block-container .media-block__overlay-filter{max-height:65svh}}pn-media-block .media-block--height-65svh .media-block__media-container
|
|
7
|
+
const pnMediaBlockCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-media-block .media-block .media-block__block-container{display:grid;overflow:hidden}pn-media-block .media-block .media-block__media-container,pn-media-block .media-block .media-block__content-container,pn-media-block .media-block .media-block__overlay-filter{grid-area:1/1;width:100%;position:relative}pn-media-block .media-block .media-block__media-container{height:100vh;overflow:hidden;position:relative}pn-media-block .media-block .media-block__media-container img,pn-media-block .media-block .media-block__media-container video{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);object-fit:cover;pointer-events:none;max-width:100%;max-height:none;height:100%;width:100%;pointer-events:none}pn-media-block .media-block .media-block__media-container pn-play-on-scroll{width:100%;height:100%}pn-media-block .media-block .media-block__media-container .scroll-wrapper{width:100%;height:100%}pn-media-block .media-block .media-block__media-container [slot=scroll-affected]{width:100%;height:100%;display:flex}pn-media-block .media-block .media-block__media-container .scroll-wrapper,pn-media-block .media-block .media-block__media-container .scroll-affected{width:100%;height:100%;display:flex}pn-media-block .media-block .media-block__media-container video{width:100%;height:100%}pn-media-block .media-block .media-block__overlay-filter{z-index:2}pn-media-block .media-block .media-block__content-container{z-index:3;display:flex;align-items:center;justify-content:center;transition:opacity 1s;flex-direction:column;margin:0 auto;padding:3.4rem 0;width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media (min-width: 576px){pn-media-block .media-block .media-block__content-container{max-width:540px}}@media (min-width: 768px){pn-media-block .media-block .media-block__content-container{max-width:720px}}@media (min-width: 992px){pn-media-block .media-block .media-block__content-container{max-width:960px}}@media (min-width: 1200px){pn-media-block .media-block .media-block__content-container{max-width:1140px}}@media (min-width: 1640px){pn-media-block .media-block .media-block__content-container{max-width:1440px}}@media screen and (min-width: 992px){pn-media-block .media-block .media-block__content-container{padding:6.4rem 0}}@media screen and (min-width: 1200px){pn-media-block .media-block .media-block__content-container{padding:7.2rem 0}}@media screen and (min-width: 1640px){pn-media-block .media-block .media-block__content-container{padding:8rem 0}}pn-media-block .media-block .media-block__content-container .media-block__block-heading{max-width:100rem;text-wrap:balance;color:white;font-size:3.2rem;text-align:center;font-weight:700;line-height:1.1;margin-bottom:3rem}@media screen and (min-width: 576px){pn-media-block .media-block .media-block__content-container .media-block__block-heading{font-size:4rem}}@media screen and (min-width: 768px){pn-media-block .media-block .media-block__content-container .media-block__block-heading{font-size:4.8rem}}@media screen and (min-width: 992px){pn-media-block .media-block .media-block__content-container .media-block__block-heading{font-size:5.6rem}}@media screen and (min-width: 1200px){pn-media-block .media-block .media-block__content-container .media-block__block-heading{font-size:8rem}}@media screen and (min-width: 1640px){pn-media-block .media-block .media-block__content-container .media-block__block-heading{font-size:8.8rem}}pn-media-block .media-block .media-block__content-container .media-block__preamble{max-width:80rem;max-width:80ch;text-wrap:balance;display:flex;color:white;font-size:1.8rem;text-align:center;font-weight:300}@media screen and (min-width: 576px){pn-media-block .media-block .media-block__content-container .media-block__preamble{font-size:2rem}}@media screen and (min-width: 1200px){pn-media-block .media-block .media-block__content-container .media-block__preamble{font-size:2.4rem}}@media screen and (min-width: 1640px){pn-media-block .media-block .media-block__content-container .media-block__preamble{font-weight:500}}pn-media-block .media-block .media-block__content-container .media-block__cta-link{margin-top:3rem}pn-media-block .media-block--height-100svh{min-height:100vh}@supports (height: 100svh){pn-media-block .media-block--height-100svh{height:100svh}}pn-media-block .media-block--height-100svh .media-block__block-container{height:100vh}@supports (max-height: 100svh){pn-media-block .media-block--height-100svh .media-block__block-container{max-height:100svh}}pn-media-block .media-block--height-100svh .media-block__block-container .media-block__media-container,pn-media-block .media-block--height-100svh .media-block__block-container .media-block__content-container,pn-media-block .media-block--height-100svh .media-block__block-container .media-block__overlay-filter{height:100vh}@supports (max-height: 100svh){pn-media-block .media-block--height-100svh .media-block__block-container .media-block__media-container,pn-media-block .media-block--height-100svh .media-block__block-container .media-block__content-container,pn-media-block .media-block--height-100svh .media-block__block-container .media-block__overlay-filter{max-height:100svh}}pn-media-block .media-block--height-100svh .media-block__block-container .media-block__media-container picture{height:100vh}@supports (max-height: 100svh){pn-media-block .media-block--height-100svh .media-block__block-container .media-block__media-container picture{max-height:100svh}}pn-media-block .media-block--height-65svh{min-height:65svh;overflow:auto}pn-media-block .media-block--height-65svh .media-block__block-container{height:65vh}@supports (max-height: 100svh){pn-media-block .media-block--height-65svh .media-block__block-container{max-height:65svh}}pn-media-block .media-block--height-65svh .media-block__block-container .media-block__media-container,pn-media-block .media-block--height-65svh .media-block__block-container .media-block__content-container,pn-media-block .media-block--height-65svh .media-block__block-container .media-block__overlay-filter{height:65vh}@supports (max-height: 100svh){pn-media-block .media-block--height-65svh .media-block__block-container .media-block__media-container,pn-media-block .media-block--height-65svh .media-block__block-container .media-block__content-container,pn-media-block .media-block--height-65svh .media-block__block-container .media-block__overlay-filter{max-height:65svh}}pn-media-block .media-block--height-65svh .media-block__media-container picture{max-height:none !important;height:auto !important}pn-media-block .media-block--height-dynamic{height:auto;overflow:auto}pn-media-block .media-block--height-dynamic .media-block__block-container{height:auto;max-height:none}pn-media-block .media-block--height-dynamic .media-block__block-container .media-block__media-container,pn-media-block .media-block--height-dynamic .media-block__block-container .media-block__content-container,pn-media-block .media-block--height-dynamic .media-block__block-container .media-block__overlay-filter{height:auto;max-height:none}pn-media-block .media-block--with-overlay .media-block__block-container .media-block__overlay-filter{z-index:2;background:radial-gradient(circle, rgba(13, 35, 75, 0.68) 7%, rgba(13, 35, 75, 0) 80%)}pn-media-block .media-block--fixed-background .media-block__block-container .media-block__media-container,pn-media-block .media-block--fixed-background .media-block__block-container .media-block__overlay-filter{position:relative;overflow:hidden;top:0;width:100%;display:flex !important;clip-path:inset(0)}pn-media-block .media-block--fixed-background .media-block__block-container .media-block__media-container picture{position:absolute;top:0;width:100%;display:flex !important;height:100%}pn-media-block .media-block--fixed-background .media-block__block-container .media-block__media-container picture img{position:fixed;width:100%;height:100%;object-fit:cover;z-index:1}pn-media-block .media-block--video .media-block__content-container{max-width:80%}pn-media-block .media-block--animate-overlay-background .media-block__overlay-filter{background-size:200% 200% !important;animation:overlayBackgroundAnimation 20s ease infinite}@keyframes overlayBackgroundAnimation{0%{background-position:100% 100%}50%{background-position:50% 60%}100%{background-position:100% 100%}}pn-media-block .media-block--margin-bottom{margin-bottom:3.2rem}@media screen and (min-width: 768px){pn-media-block .media-block--margin-bottom{margin-bottom:4rem}}@media screen and (min-width: 992px){pn-media-block .media-block--margin-bottom{margin-bottom:5.6rem}}@media screen and (min-width: 1200px){pn-media-block .media-block--margin-bottom{margin-bottom:7.2rem}}";
|
|
8
8
|
const PnMediaBlockStyle0 = pnMediaBlockCss;
|
|
9
9
|
|
|
10
10
|
const PnmediaBlock = class {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"pn-media-block.entry.cjs.js","mappings":"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","names":["h"],"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: 992px) {\n padding: 6.4rem 0;\n }\n\n @media screen and (min-width: 1200px) {\n padding: 7.2rem 0;\n }\n\n @media screen and (min-width: 1640px) {\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: 576px) {\n font-size: 4rem;\n }\n\n @media screen and (min-width: 768px) {\n font-size: 4.8rem;\n }\n\n @media screen and (min-width: 992px) {\n font-size: 5.6rem;\n }\n\n @media screen and (min-width: 1200px) {\n font-size: 8rem;\n }\n\n @media screen and (min-width: 1640px) {\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: 576px) {\n font-size: 2rem;\n }\n\n @media screen and (min-width: 1200px) {\n font-size: 2.4rem;\n }\n\n @media screen and (min-width: 1640px) {\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 img {\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 clip-path: inset(0);\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:768px) {\n margin-bottom: 4rem;\n }\n\n @media screen and (min-width:992px) {\n margin-bottom: 5.6rem;\n }\n\n @media screen and (min-width:1200px) {\n margin-bottom: 7.2rem;\n }\n }\n}\n","import { 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?: number = 2;\n @Prop() blockPreamble?: string = null;\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 blockHeadingLevelChecked() {\n if (this.blockHeading && this.blockHeading !== null) {\n console.warn('blockHeadingLevel is required when blockHeading is set');\n return undefined;\n }\n return this.blockHeadingLevel;\n }\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, blockHeadingLevelChecked, hasButtonSlot, hasVideo, hasImage, animateOverlayBackground } = this;\n const HeadingTag = `h${blockHeadingLevelChecked ?? 2}`;\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 ].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 && <HeadingTag class=\"media-block__block-heading\">{this.blockHeading}</HeadingTag>}\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.entry.cjs.js","mappings":"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","names":["h"],"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: 992px) {\n padding: 6.4rem 0;\n }\n\n @media screen and (min-width: 1200px) {\n padding: 7.2rem 0;\n }\n\n @media screen and (min-width: 1640px) {\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: 576px) {\n font-size: 4rem;\n }\n\n @media screen and (min-width: 768px) {\n font-size: 4.8rem;\n }\n\n @media screen and (min-width: 992px) {\n font-size: 5.6rem;\n }\n\n @media screen and (min-width: 1200px) {\n font-size: 8rem;\n }\n\n @media screen and (min-width: 1640px) {\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: 576px) {\n font-size: 2rem;\n }\n\n @media screen and (min-width: 1200px) {\n font-size: 2.4rem;\n }\n\n @media screen and (min-width: 1640px) {\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:768px) {\n margin-bottom: 4rem;\n }\n\n @media screen and (min-width:992px) {\n margin-bottom: 5.6rem;\n }\n\n @media screen and (min-width:1200px) {\n margin-bottom: 7.2rem;\n }\n }\n}\n","import { 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?: number = 2;\n @Prop() blockPreamble?: string = null;\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 blockHeadingLevelChecked() {\n if (this.blockHeading && this.blockHeading !== null) {\n console.warn('blockHeadingLevel is required when blockHeading is set');\n return undefined;\n }\n return this.blockHeadingLevel;\n }\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, blockHeadingLevelChecked, hasButtonSlot, hasVideo, hasImage, animateOverlayBackground } = this;\n const HeadingTag = `h${blockHeadingLevelChecked ?? 2}`;\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 ].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 && <HeadingTag class=\"media-block__block-heading\">{this.blockHeading}</HeadingTag>}\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}
|
|
@@ -236,7 +236,7 @@ pn-media-block .media-block--height-65svh .media-block__block-container .media-b
|
|
|
236
236
|
max-height: 65svh;
|
|
237
237
|
}
|
|
238
238
|
}
|
|
239
|
-
pn-media-block .media-block--height-65svh .media-block__media-container
|
|
239
|
+
pn-media-block .media-block--height-65svh .media-block__media-container picture {
|
|
240
240
|
max-height: none !important;
|
|
241
241
|
height: auto !important;
|
|
242
242
|
}
|
|
@@ -272,7 +272,6 @@ pn-media-block .media-block--fixed-background .media-block__block-container .med
|
|
|
272
272
|
top: 0;
|
|
273
273
|
width: 100%;
|
|
274
274
|
display: flex !important;
|
|
275
|
-
clip-path: inset(0);
|
|
276
275
|
height: 100%;
|
|
277
276
|
}
|
|
278
277
|
pn-media-block .media-block--fixed-background .media-block__block-container .media-block__media-container picture img {
|
|
@@ -3,7 +3,7 @@ import { d as defineCustomElement$4 } from './pn-play-on-scroll2.js';
|
|
|
3
3
|
import { d as defineCustomElement$3 } from './pn-scroll2.js';
|
|
4
4
|
import { d as defineCustomElement$2 } from './pn-video-overlay2.js';
|
|
5
5
|
|
|
6
|
-
const pnMediaBlockCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-media-block .media-block .media-block__block-container{display:grid;overflow:hidden}pn-media-block .media-block .media-block__media-container,pn-media-block .media-block .media-block__content-container,pn-media-block .media-block .media-block__overlay-filter{grid-area:1/1;width:100%;position:relative}pn-media-block .media-block .media-block__media-container{height:100vh;overflow:hidden;position:relative}pn-media-block .media-block .media-block__media-container img,pn-media-block .media-block .media-block__media-container video{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);object-fit:cover;pointer-events:none;max-width:100%;max-height:none;height:100%;width:100%;pointer-events:none}pn-media-block .media-block .media-block__media-container pn-play-on-scroll{width:100%;height:100%}pn-media-block .media-block .media-block__media-container .scroll-wrapper{width:100%;height:100%}pn-media-block .media-block .media-block__media-container [slot=scroll-affected]{width:100%;height:100%;display:flex}pn-media-block .media-block .media-block__media-container .scroll-wrapper,pn-media-block .media-block .media-block__media-container .scroll-affected{width:100%;height:100%;display:flex}pn-media-block .media-block .media-block__media-container video{width:100%;height:100%}pn-media-block .media-block .media-block__overlay-filter{z-index:2}pn-media-block .media-block .media-block__content-container{z-index:3;display:flex;align-items:center;justify-content:center;transition:opacity 1s;flex-direction:column;margin:0 auto;padding:3.4rem 0;width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media (min-width: 576px){pn-media-block .media-block .media-block__content-container{max-width:540px}}@media (min-width: 768px){pn-media-block .media-block .media-block__content-container{max-width:720px}}@media (min-width: 992px){pn-media-block .media-block .media-block__content-container{max-width:960px}}@media (min-width: 1200px){pn-media-block .media-block .media-block__content-container{max-width:1140px}}@media (min-width: 1640px){pn-media-block .media-block .media-block__content-container{max-width:1440px}}@media screen and (min-width: 992px){pn-media-block .media-block .media-block__content-container{padding:6.4rem 0}}@media screen and (min-width: 1200px){pn-media-block .media-block .media-block__content-container{padding:7.2rem 0}}@media screen and (min-width: 1640px){pn-media-block .media-block .media-block__content-container{padding:8rem 0}}pn-media-block .media-block .media-block__content-container .media-block__block-heading{max-width:100rem;text-wrap:balance;color:white;font-size:3.2rem;text-align:center;font-weight:700;line-height:1.1;margin-bottom:3rem}@media screen and (min-width: 576px){pn-media-block .media-block .media-block__content-container .media-block__block-heading{font-size:4rem}}@media screen and (min-width: 768px){pn-media-block .media-block .media-block__content-container .media-block__block-heading{font-size:4.8rem}}@media screen and (min-width: 992px){pn-media-block .media-block .media-block__content-container .media-block__block-heading{font-size:5.6rem}}@media screen and (min-width: 1200px){pn-media-block .media-block .media-block__content-container .media-block__block-heading{font-size:8rem}}@media screen and (min-width: 1640px){pn-media-block .media-block .media-block__content-container .media-block__block-heading{font-size:8.8rem}}pn-media-block .media-block .media-block__content-container .media-block__preamble{max-width:80rem;max-width:80ch;text-wrap:balance;display:flex;color:white;font-size:1.8rem;text-align:center;font-weight:300}@media screen and (min-width: 576px){pn-media-block .media-block .media-block__content-container .media-block__preamble{font-size:2rem}}@media screen and (min-width: 1200px){pn-media-block .media-block .media-block__content-container .media-block__preamble{font-size:2.4rem}}@media screen and (min-width: 1640px){pn-media-block .media-block .media-block__content-container .media-block__preamble{font-weight:500}}pn-media-block .media-block .media-block__content-container .media-block__cta-link{margin-top:3rem}pn-media-block .media-block--height-100svh{min-height:100vh}@supports (height: 100svh){pn-media-block .media-block--height-100svh{height:100svh}}pn-media-block .media-block--height-100svh .media-block__block-container{height:100vh}@supports (max-height: 100svh){pn-media-block .media-block--height-100svh .media-block__block-container{max-height:100svh}}pn-media-block .media-block--height-100svh .media-block__block-container .media-block__media-container,pn-media-block .media-block--height-100svh .media-block__block-container .media-block__content-container,pn-media-block .media-block--height-100svh .media-block__block-container .media-block__overlay-filter{height:100vh}@supports (max-height: 100svh){pn-media-block .media-block--height-100svh .media-block__block-container .media-block__media-container,pn-media-block .media-block--height-100svh .media-block__block-container .media-block__content-container,pn-media-block .media-block--height-100svh .media-block__block-container .media-block__overlay-filter{max-height:100svh}}pn-media-block .media-block--height-100svh .media-block__block-container .media-block__media-container picture{height:100vh}@supports (max-height: 100svh){pn-media-block .media-block--height-100svh .media-block__block-container .media-block__media-container picture{max-height:100svh}}pn-media-block .media-block--height-65svh{min-height:65svh;overflow:auto}pn-media-block .media-block--height-65svh .media-block__block-container{height:65vh}@supports (max-height: 100svh){pn-media-block .media-block--height-65svh .media-block__block-container{max-height:65svh}}pn-media-block .media-block--height-65svh .media-block__block-container .media-block__media-container,pn-media-block .media-block--height-65svh .media-block__block-container .media-block__content-container,pn-media-block .media-block--height-65svh .media-block__block-container .media-block__overlay-filter{height:65vh}@supports (max-height: 100svh){pn-media-block .media-block--height-65svh .media-block__block-container .media-block__media-container,pn-media-block .media-block--height-65svh .media-block__block-container .media-block__content-container,pn-media-block .media-block--height-65svh .media-block__block-container .media-block__overlay-filter{max-height:65svh}}pn-media-block .media-block--height-65svh .media-block__media-container
|
|
6
|
+
const pnMediaBlockCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-media-block .media-block .media-block__block-container{display:grid;overflow:hidden}pn-media-block .media-block .media-block__media-container,pn-media-block .media-block .media-block__content-container,pn-media-block .media-block .media-block__overlay-filter{grid-area:1/1;width:100%;position:relative}pn-media-block .media-block .media-block__media-container{height:100vh;overflow:hidden;position:relative}pn-media-block .media-block .media-block__media-container img,pn-media-block .media-block .media-block__media-container video{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);object-fit:cover;pointer-events:none;max-width:100%;max-height:none;height:100%;width:100%;pointer-events:none}pn-media-block .media-block .media-block__media-container pn-play-on-scroll{width:100%;height:100%}pn-media-block .media-block .media-block__media-container .scroll-wrapper{width:100%;height:100%}pn-media-block .media-block .media-block__media-container [slot=scroll-affected]{width:100%;height:100%;display:flex}pn-media-block .media-block .media-block__media-container .scroll-wrapper,pn-media-block .media-block .media-block__media-container .scroll-affected{width:100%;height:100%;display:flex}pn-media-block .media-block .media-block__media-container video{width:100%;height:100%}pn-media-block .media-block .media-block__overlay-filter{z-index:2}pn-media-block .media-block .media-block__content-container{z-index:3;display:flex;align-items:center;justify-content:center;transition:opacity 1s;flex-direction:column;margin:0 auto;padding:3.4rem 0;width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media (min-width: 576px){pn-media-block .media-block .media-block__content-container{max-width:540px}}@media (min-width: 768px){pn-media-block .media-block .media-block__content-container{max-width:720px}}@media (min-width: 992px){pn-media-block .media-block .media-block__content-container{max-width:960px}}@media (min-width: 1200px){pn-media-block .media-block .media-block__content-container{max-width:1140px}}@media (min-width: 1640px){pn-media-block .media-block .media-block__content-container{max-width:1440px}}@media screen and (min-width: 992px){pn-media-block .media-block .media-block__content-container{padding:6.4rem 0}}@media screen and (min-width: 1200px){pn-media-block .media-block .media-block__content-container{padding:7.2rem 0}}@media screen and (min-width: 1640px){pn-media-block .media-block .media-block__content-container{padding:8rem 0}}pn-media-block .media-block .media-block__content-container .media-block__block-heading{max-width:100rem;text-wrap:balance;color:white;font-size:3.2rem;text-align:center;font-weight:700;line-height:1.1;margin-bottom:3rem}@media screen and (min-width: 576px){pn-media-block .media-block .media-block__content-container .media-block__block-heading{font-size:4rem}}@media screen and (min-width: 768px){pn-media-block .media-block .media-block__content-container .media-block__block-heading{font-size:4.8rem}}@media screen and (min-width: 992px){pn-media-block .media-block .media-block__content-container .media-block__block-heading{font-size:5.6rem}}@media screen and (min-width: 1200px){pn-media-block .media-block .media-block__content-container .media-block__block-heading{font-size:8rem}}@media screen and (min-width: 1640px){pn-media-block .media-block .media-block__content-container .media-block__block-heading{font-size:8.8rem}}pn-media-block .media-block .media-block__content-container .media-block__preamble{max-width:80rem;max-width:80ch;text-wrap:balance;display:flex;color:white;font-size:1.8rem;text-align:center;font-weight:300}@media screen and (min-width: 576px){pn-media-block .media-block .media-block__content-container .media-block__preamble{font-size:2rem}}@media screen and (min-width: 1200px){pn-media-block .media-block .media-block__content-container .media-block__preamble{font-size:2.4rem}}@media screen and (min-width: 1640px){pn-media-block .media-block .media-block__content-container .media-block__preamble{font-weight:500}}pn-media-block .media-block .media-block__content-container .media-block__cta-link{margin-top:3rem}pn-media-block .media-block--height-100svh{min-height:100vh}@supports (height: 100svh){pn-media-block .media-block--height-100svh{height:100svh}}pn-media-block .media-block--height-100svh .media-block__block-container{height:100vh}@supports (max-height: 100svh){pn-media-block .media-block--height-100svh .media-block__block-container{max-height:100svh}}pn-media-block .media-block--height-100svh .media-block__block-container .media-block__media-container,pn-media-block .media-block--height-100svh .media-block__block-container .media-block__content-container,pn-media-block .media-block--height-100svh .media-block__block-container .media-block__overlay-filter{height:100vh}@supports (max-height: 100svh){pn-media-block .media-block--height-100svh .media-block__block-container .media-block__media-container,pn-media-block .media-block--height-100svh .media-block__block-container .media-block__content-container,pn-media-block .media-block--height-100svh .media-block__block-container .media-block__overlay-filter{max-height:100svh}}pn-media-block .media-block--height-100svh .media-block__block-container .media-block__media-container picture{height:100vh}@supports (max-height: 100svh){pn-media-block .media-block--height-100svh .media-block__block-container .media-block__media-container picture{max-height:100svh}}pn-media-block .media-block--height-65svh{min-height:65svh;overflow:auto}pn-media-block .media-block--height-65svh .media-block__block-container{height:65vh}@supports (max-height: 100svh){pn-media-block .media-block--height-65svh .media-block__block-container{max-height:65svh}}pn-media-block .media-block--height-65svh .media-block__block-container .media-block__media-container,pn-media-block .media-block--height-65svh .media-block__block-container .media-block__content-container,pn-media-block .media-block--height-65svh .media-block__block-container .media-block__overlay-filter{height:65vh}@supports (max-height: 100svh){pn-media-block .media-block--height-65svh .media-block__block-container .media-block__media-container,pn-media-block .media-block--height-65svh .media-block__block-container .media-block__content-container,pn-media-block .media-block--height-65svh .media-block__block-container .media-block__overlay-filter{max-height:65svh}}pn-media-block .media-block--height-65svh .media-block__media-container picture{max-height:none !important;height:auto !important}pn-media-block .media-block--height-dynamic{height:auto;overflow:auto}pn-media-block .media-block--height-dynamic .media-block__block-container{height:auto;max-height:none}pn-media-block .media-block--height-dynamic .media-block__block-container .media-block__media-container,pn-media-block .media-block--height-dynamic .media-block__block-container .media-block__content-container,pn-media-block .media-block--height-dynamic .media-block__block-container .media-block__overlay-filter{height:auto;max-height:none}pn-media-block .media-block--with-overlay .media-block__block-container .media-block__overlay-filter{z-index:2;background:radial-gradient(circle, rgba(13, 35, 75, 0.68) 7%, rgba(13, 35, 75, 0) 80%)}pn-media-block .media-block--fixed-background .media-block__block-container .media-block__media-container,pn-media-block .media-block--fixed-background .media-block__block-container .media-block__overlay-filter{position:relative;overflow:hidden;top:0;width:100%;display:flex !important;clip-path:inset(0)}pn-media-block .media-block--fixed-background .media-block__block-container .media-block__media-container picture{position:absolute;top:0;width:100%;display:flex !important;height:100%}pn-media-block .media-block--fixed-background .media-block__block-container .media-block__media-container picture img{position:fixed;width:100%;height:100%;object-fit:cover;z-index:1}pn-media-block .media-block--video .media-block__content-container{max-width:80%}pn-media-block .media-block--animate-overlay-background .media-block__overlay-filter{background-size:200% 200% !important;animation:overlayBackgroundAnimation 20s ease infinite}@keyframes overlayBackgroundAnimation{0%{background-position:100% 100%}50%{background-position:50% 60%}100%{background-position:100% 100%}}pn-media-block .media-block--margin-bottom{margin-bottom:3.2rem}@media screen and (min-width: 768px){pn-media-block .media-block--margin-bottom{margin-bottom:4rem}}@media screen and (min-width: 992px){pn-media-block .media-block--margin-bottom{margin-bottom:5.6rem}}@media screen and (min-width: 1200px){pn-media-block .media-block--margin-bottom{margin-bottom:7.2rem}}";
|
|
7
7
|
const PnMediaBlockStyle0 = pnMediaBlockCss;
|
|
8
8
|
|
|
9
9
|
const PnmediaBlock = /*@__PURE__*/ proxyCustomElement(class PnmediaBlock extends HTMLElement {
|
|
@@ -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: 992px) {\n padding: 6.4rem 0;\n }\n\n @media screen and (min-width: 1200px) {\n padding: 7.2rem 0;\n }\n\n @media screen and (min-width: 1640px) {\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: 576px) {\n font-size: 4rem;\n }\n\n @media screen and (min-width: 768px) {\n font-size: 4.8rem;\n }\n\n @media screen and (min-width: 992px) {\n font-size: 5.6rem;\n }\n\n @media screen and (min-width: 1200px) {\n font-size: 8rem;\n }\n\n @media screen and (min-width: 1640px) {\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: 576px) {\n font-size: 2rem;\n }\n\n @media screen and (min-width: 1200px) {\n font-size: 2.4rem;\n }\n\n @media screen and (min-width: 1640px) {\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 img {\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 clip-path: inset(0);\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:768px) {\n margin-bottom: 4rem;\n }\n\n @media screen and (min-width:992px) {\n margin-bottom: 5.6rem;\n }\n\n @media screen and (min-width:1200px) {\n margin-bottom: 7.2rem;\n }\n }\n}\n","import { 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?: number = 2;\n @Prop() blockPreamble?: string = null;\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 blockHeadingLevelChecked() {\n if (this.blockHeading && this.blockHeading !== null) {\n console.warn('blockHeadingLevel is required when blockHeading is set');\n return undefined;\n }\n return this.blockHeadingLevel;\n }\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, blockHeadingLevelChecked, hasButtonSlot, hasVideo, hasImage, animateOverlayBackground } = this;\n const HeadingTag = `h${blockHeadingLevelChecked ?? 2}`;\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 ].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 && <HeadingTag class=\"media-block__block-heading\">{this.blockHeading}</HeadingTag>}\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: 992px) {\n padding: 6.4rem 0;\n }\n\n @media screen and (min-width: 1200px) {\n padding: 7.2rem 0;\n }\n\n @media screen and (min-width: 1640px) {\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: 576px) {\n font-size: 4rem;\n }\n\n @media screen and (min-width: 768px) {\n font-size: 4.8rem;\n }\n\n @media screen and (min-width: 992px) {\n font-size: 5.6rem;\n }\n\n @media screen and (min-width: 1200px) {\n font-size: 8rem;\n }\n\n @media screen and (min-width: 1640px) {\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: 576px) {\n font-size: 2rem;\n }\n\n @media screen and (min-width: 1200px) {\n font-size: 2.4rem;\n }\n\n @media screen and (min-width: 1640px) {\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:768px) {\n margin-bottom: 4rem;\n }\n\n @media screen and (min-width:992px) {\n margin-bottom: 5.6rem;\n }\n\n @media screen and (min-width:1200px) {\n margin-bottom: 7.2rem;\n }\n }\n}\n","import { 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?: number = 2;\n @Prop() blockPreamble?: string = null;\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 blockHeadingLevelChecked() {\n if (this.blockHeading && this.blockHeading !== null) {\n console.warn('blockHeadingLevel is required when blockHeading is set');\n return undefined;\n }\n return this.blockHeadingLevel;\n }\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, blockHeadingLevelChecked, hasButtonSlot, hasVideo, hasImage, animateOverlayBackground } = this;\n const HeadingTag = `h${blockHeadingLevelChecked ?? 2}`;\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 ].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 && <HeadingTag class=\"media-block__block-heading\">{this.blockHeading}</HeadingTag>}\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,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, g as getElement, h } from './index-fa51bde4.js';
|
|
2
2
|
|
|
3
|
-
const pnMediaBlockCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-media-block .media-block .media-block__block-container{display:grid;overflow:hidden}pn-media-block .media-block .media-block__media-container,pn-media-block .media-block .media-block__content-container,pn-media-block .media-block .media-block__overlay-filter{grid-area:1/1;width:100%;position:relative}pn-media-block .media-block .media-block__media-container{height:100vh;overflow:hidden;position:relative}pn-media-block .media-block .media-block__media-container img,pn-media-block .media-block .media-block__media-container video{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);object-fit:cover;pointer-events:none;max-width:100%;max-height:none;height:100%;width:100%;pointer-events:none}pn-media-block .media-block .media-block__media-container pn-play-on-scroll{width:100%;height:100%}pn-media-block .media-block .media-block__media-container .scroll-wrapper{width:100%;height:100%}pn-media-block .media-block .media-block__media-container [slot=scroll-affected]{width:100%;height:100%;display:flex}pn-media-block .media-block .media-block__media-container .scroll-wrapper,pn-media-block .media-block .media-block__media-container .scroll-affected{width:100%;height:100%;display:flex}pn-media-block .media-block .media-block__media-container video{width:100%;height:100%}pn-media-block .media-block .media-block__overlay-filter{z-index:2}pn-media-block .media-block .media-block__content-container{z-index:3;display:flex;align-items:center;justify-content:center;transition:opacity 1s;flex-direction:column;margin:0 auto;padding:3.4rem 0;width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media (min-width: 576px){pn-media-block .media-block .media-block__content-container{max-width:540px}}@media (min-width: 768px){pn-media-block .media-block .media-block__content-container{max-width:720px}}@media (min-width: 992px){pn-media-block .media-block .media-block__content-container{max-width:960px}}@media (min-width: 1200px){pn-media-block .media-block .media-block__content-container{max-width:1140px}}@media (min-width: 1640px){pn-media-block .media-block .media-block__content-container{max-width:1440px}}@media screen and (min-width: 992px){pn-media-block .media-block .media-block__content-container{padding:6.4rem 0}}@media screen and (min-width: 1200px){pn-media-block .media-block .media-block__content-container{padding:7.2rem 0}}@media screen and (min-width: 1640px){pn-media-block .media-block .media-block__content-container{padding:8rem 0}}pn-media-block .media-block .media-block__content-container .media-block__block-heading{max-width:100rem;text-wrap:balance;color:white;font-size:3.2rem;text-align:center;font-weight:700;line-height:1.1;margin-bottom:3rem}@media screen and (min-width: 576px){pn-media-block .media-block .media-block__content-container .media-block__block-heading{font-size:4rem}}@media screen and (min-width: 768px){pn-media-block .media-block .media-block__content-container .media-block__block-heading{font-size:4.8rem}}@media screen and (min-width: 992px){pn-media-block .media-block .media-block__content-container .media-block__block-heading{font-size:5.6rem}}@media screen and (min-width: 1200px){pn-media-block .media-block .media-block__content-container .media-block__block-heading{font-size:8rem}}@media screen and (min-width: 1640px){pn-media-block .media-block .media-block__content-container .media-block__block-heading{font-size:8.8rem}}pn-media-block .media-block .media-block__content-container .media-block__preamble{max-width:80rem;max-width:80ch;text-wrap:balance;display:flex;color:white;font-size:1.8rem;text-align:center;font-weight:300}@media screen and (min-width: 576px){pn-media-block .media-block .media-block__content-container .media-block__preamble{font-size:2rem}}@media screen and (min-width: 1200px){pn-media-block .media-block .media-block__content-container .media-block__preamble{font-size:2.4rem}}@media screen and (min-width: 1640px){pn-media-block .media-block .media-block__content-container .media-block__preamble{font-weight:500}}pn-media-block .media-block .media-block__content-container .media-block__cta-link{margin-top:3rem}pn-media-block .media-block--height-100svh{min-height:100vh}@supports (height: 100svh){pn-media-block .media-block--height-100svh{height:100svh}}pn-media-block .media-block--height-100svh .media-block__block-container{height:100vh}@supports (max-height: 100svh){pn-media-block .media-block--height-100svh .media-block__block-container{max-height:100svh}}pn-media-block .media-block--height-100svh .media-block__block-container .media-block__media-container,pn-media-block .media-block--height-100svh .media-block__block-container .media-block__content-container,pn-media-block .media-block--height-100svh .media-block__block-container .media-block__overlay-filter{height:100vh}@supports (max-height: 100svh){pn-media-block .media-block--height-100svh .media-block__block-container .media-block__media-container,pn-media-block .media-block--height-100svh .media-block__block-container .media-block__content-container,pn-media-block .media-block--height-100svh .media-block__block-container .media-block__overlay-filter{max-height:100svh}}pn-media-block .media-block--height-100svh .media-block__block-container .media-block__media-container picture{height:100vh}@supports (max-height: 100svh){pn-media-block .media-block--height-100svh .media-block__block-container .media-block__media-container picture{max-height:100svh}}pn-media-block .media-block--height-65svh{min-height:65svh;overflow:auto}pn-media-block .media-block--height-65svh .media-block__block-container{height:65vh}@supports (max-height: 100svh){pn-media-block .media-block--height-65svh .media-block__block-container{max-height:65svh}}pn-media-block .media-block--height-65svh .media-block__block-container .media-block__media-container,pn-media-block .media-block--height-65svh .media-block__block-container .media-block__content-container,pn-media-block .media-block--height-65svh .media-block__block-container .media-block__overlay-filter{height:65vh}@supports (max-height: 100svh){pn-media-block .media-block--height-65svh .media-block__block-container .media-block__media-container,pn-media-block .media-block--height-65svh .media-block__block-container .media-block__content-container,pn-media-block .media-block--height-65svh .media-block__block-container .media-block__overlay-filter{max-height:65svh}}pn-media-block .media-block--height-65svh .media-block__media-container
|
|
3
|
+
const pnMediaBlockCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-media-block .media-block .media-block__block-container{display:grid;overflow:hidden}pn-media-block .media-block .media-block__media-container,pn-media-block .media-block .media-block__content-container,pn-media-block .media-block .media-block__overlay-filter{grid-area:1/1;width:100%;position:relative}pn-media-block .media-block .media-block__media-container{height:100vh;overflow:hidden;position:relative}pn-media-block .media-block .media-block__media-container img,pn-media-block .media-block .media-block__media-container video{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);object-fit:cover;pointer-events:none;max-width:100%;max-height:none;height:100%;width:100%;pointer-events:none}pn-media-block .media-block .media-block__media-container pn-play-on-scroll{width:100%;height:100%}pn-media-block .media-block .media-block__media-container .scroll-wrapper{width:100%;height:100%}pn-media-block .media-block .media-block__media-container [slot=scroll-affected]{width:100%;height:100%;display:flex}pn-media-block .media-block .media-block__media-container .scroll-wrapper,pn-media-block .media-block .media-block__media-container .scroll-affected{width:100%;height:100%;display:flex}pn-media-block .media-block .media-block__media-container video{width:100%;height:100%}pn-media-block .media-block .media-block__overlay-filter{z-index:2}pn-media-block .media-block .media-block__content-container{z-index:3;display:flex;align-items:center;justify-content:center;transition:opacity 1s;flex-direction:column;margin:0 auto;padding:3.4rem 0;width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media (min-width: 576px){pn-media-block .media-block .media-block__content-container{max-width:540px}}@media (min-width: 768px){pn-media-block .media-block .media-block__content-container{max-width:720px}}@media (min-width: 992px){pn-media-block .media-block .media-block__content-container{max-width:960px}}@media (min-width: 1200px){pn-media-block .media-block .media-block__content-container{max-width:1140px}}@media (min-width: 1640px){pn-media-block .media-block .media-block__content-container{max-width:1440px}}@media screen and (min-width: 992px){pn-media-block .media-block .media-block__content-container{padding:6.4rem 0}}@media screen and (min-width: 1200px){pn-media-block .media-block .media-block__content-container{padding:7.2rem 0}}@media screen and (min-width: 1640px){pn-media-block .media-block .media-block__content-container{padding:8rem 0}}pn-media-block .media-block .media-block__content-container .media-block__block-heading{max-width:100rem;text-wrap:balance;color:white;font-size:3.2rem;text-align:center;font-weight:700;line-height:1.1;margin-bottom:3rem}@media screen and (min-width: 576px){pn-media-block .media-block .media-block__content-container .media-block__block-heading{font-size:4rem}}@media screen and (min-width: 768px){pn-media-block .media-block .media-block__content-container .media-block__block-heading{font-size:4.8rem}}@media screen and (min-width: 992px){pn-media-block .media-block .media-block__content-container .media-block__block-heading{font-size:5.6rem}}@media screen and (min-width: 1200px){pn-media-block .media-block .media-block__content-container .media-block__block-heading{font-size:8rem}}@media screen and (min-width: 1640px){pn-media-block .media-block .media-block__content-container .media-block__block-heading{font-size:8.8rem}}pn-media-block .media-block .media-block__content-container .media-block__preamble{max-width:80rem;max-width:80ch;text-wrap:balance;display:flex;color:white;font-size:1.8rem;text-align:center;font-weight:300}@media screen and (min-width: 576px){pn-media-block .media-block .media-block__content-container .media-block__preamble{font-size:2rem}}@media screen and (min-width: 1200px){pn-media-block .media-block .media-block__content-container .media-block__preamble{font-size:2.4rem}}@media screen and (min-width: 1640px){pn-media-block .media-block .media-block__content-container .media-block__preamble{font-weight:500}}pn-media-block .media-block .media-block__content-container .media-block__cta-link{margin-top:3rem}pn-media-block .media-block--height-100svh{min-height:100vh}@supports (height: 100svh){pn-media-block .media-block--height-100svh{height:100svh}}pn-media-block .media-block--height-100svh .media-block__block-container{height:100vh}@supports (max-height: 100svh){pn-media-block .media-block--height-100svh .media-block__block-container{max-height:100svh}}pn-media-block .media-block--height-100svh .media-block__block-container .media-block__media-container,pn-media-block .media-block--height-100svh .media-block__block-container .media-block__content-container,pn-media-block .media-block--height-100svh .media-block__block-container .media-block__overlay-filter{height:100vh}@supports (max-height: 100svh){pn-media-block .media-block--height-100svh .media-block__block-container .media-block__media-container,pn-media-block .media-block--height-100svh .media-block__block-container .media-block__content-container,pn-media-block .media-block--height-100svh .media-block__block-container .media-block__overlay-filter{max-height:100svh}}pn-media-block .media-block--height-100svh .media-block__block-container .media-block__media-container picture{height:100vh}@supports (max-height: 100svh){pn-media-block .media-block--height-100svh .media-block__block-container .media-block__media-container picture{max-height:100svh}}pn-media-block .media-block--height-65svh{min-height:65svh;overflow:auto}pn-media-block .media-block--height-65svh .media-block__block-container{height:65vh}@supports (max-height: 100svh){pn-media-block .media-block--height-65svh .media-block__block-container{max-height:65svh}}pn-media-block .media-block--height-65svh .media-block__block-container .media-block__media-container,pn-media-block .media-block--height-65svh .media-block__block-container .media-block__content-container,pn-media-block .media-block--height-65svh .media-block__block-container .media-block__overlay-filter{height:65vh}@supports (max-height: 100svh){pn-media-block .media-block--height-65svh .media-block__block-container .media-block__media-container,pn-media-block .media-block--height-65svh .media-block__block-container .media-block__content-container,pn-media-block .media-block--height-65svh .media-block__block-container .media-block__overlay-filter{max-height:65svh}}pn-media-block .media-block--height-65svh .media-block__media-container picture{max-height:none !important;height:auto !important}pn-media-block .media-block--height-dynamic{height:auto;overflow:auto}pn-media-block .media-block--height-dynamic .media-block__block-container{height:auto;max-height:none}pn-media-block .media-block--height-dynamic .media-block__block-container .media-block__media-container,pn-media-block .media-block--height-dynamic .media-block__block-container .media-block__content-container,pn-media-block .media-block--height-dynamic .media-block__block-container .media-block__overlay-filter{height:auto;max-height:none}pn-media-block .media-block--with-overlay .media-block__block-container .media-block__overlay-filter{z-index:2;background:radial-gradient(circle, rgba(13, 35, 75, 0.68) 7%, rgba(13, 35, 75, 0) 80%)}pn-media-block .media-block--fixed-background .media-block__block-container .media-block__media-container,pn-media-block .media-block--fixed-background .media-block__block-container .media-block__overlay-filter{position:relative;overflow:hidden;top:0;width:100%;display:flex !important;clip-path:inset(0)}pn-media-block .media-block--fixed-background .media-block__block-container .media-block__media-container picture{position:absolute;top:0;width:100%;display:flex !important;height:100%}pn-media-block .media-block--fixed-background .media-block__block-container .media-block__media-container picture img{position:fixed;width:100%;height:100%;object-fit:cover;z-index:1}pn-media-block .media-block--video .media-block__content-container{max-width:80%}pn-media-block .media-block--animate-overlay-background .media-block__overlay-filter{background-size:200% 200% !important;animation:overlayBackgroundAnimation 20s ease infinite}@keyframes overlayBackgroundAnimation{0%{background-position:100% 100%}50%{background-position:50% 60%}100%{background-position:100% 100%}}pn-media-block .media-block--margin-bottom{margin-bottom:3.2rem}@media screen and (min-width: 768px){pn-media-block .media-block--margin-bottom{margin-bottom:4rem}}@media screen and (min-width: 992px){pn-media-block .media-block--margin-bottom{margin-bottom:5.6rem}}@media screen and (min-width: 1200px){pn-media-block .media-block--margin-bottom{margin-bottom:7.2rem}}";
|
|
4
4
|
const PnMediaBlockStyle0 = pnMediaBlockCss;
|
|
5
5
|
|
|
6
6
|
const PnmediaBlock = class {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"pn-media-block.entry.js","mappings":";;AAAA,MAAM,eAAe,GAAG,knRAAknR,CAAC;AAC3oR,2BAAe,eAAe;;MCSjB,YAAY;;;2BACO,IAAI;wBACN,IAAI;yCACa,SAAS;4BACtB,EAAE;wBACN,IAAI;8BACE,KAAK;gCACH,KAAK;uCACE,IAAI;wCACH,KAAK;+BACd,KAAK;+BACL,KAAK;4BACR,IAAI;iCACC,CAAC;6BACL,IAAI;6CAE8B;YACjE,IAAI,EAAE,QAAQ;YACd,SAAS,EAAE,CAAC;YACZ,UAAU,EAAE,qBAAqB;SAClC;;6BAGiC,IAAI;;;IAItC,IAAI,wBAAwB;QAC1B,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,YAAY,KAAK,IAAI,EAAE;YACnD,OAAO,CAAC,IAAI,CAAC,wDAAwD,CAAC,CAAC;YACvE,OAAO,SAAS,CAAC;SAClB;QACD,OAAO,IAAI,CAAC,iBAAiB,CAAC;KAC/B;IAED,IAAI,QAAQ;QACV,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,IAAI,IAAI,CAAC,QAAQ,KAAK,WAAW,EAAE;YAC3D,OAAO,IAAI,CAAC;SACb;QACD,OAAO,KAAK,CAAC;KACd;IAED,IAAI,QAAQ;QACV,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,IAAI,IAAI,CAAC,QAAQ,KAAK,WAAW,EAAE;YAC3D,OAAO,IAAI,CAAC;SACb;QACD,OAAO,KAAK,CAAC;KACd;IAEO,cAAc,CAAuB;IACrC,YAAY,CAAuB;IAE3C,iBAAiB;QACf,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;KACxE;IAED,MAAM,gBAAgB;QACpB,MAAM,aAAa,GAAG,QAAQ,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC;QAChE,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC;QAErD,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,oBAAoB,CAAgB,CAAC;QACrF,IAAI,IAAI,CAAC,uBAAuB,IAAI,IAAI,IAAI,IAAI,CAAC,uBAAuB,IAAI,WAAW,EAAE;YACvF,cAAc,CAAC,KAAK,CAAC,UAAU,GAAG,GAAG,IAAI,CAAC,uBAAuB,EAAE,CAAC;SACrE;QAED,IAAI,IAAI,CAAC,cAAc,EAAE;YACvB,IAAI,CAAC,cAAc,GAAG,IAAI,oBAAoB,CAC5C,OAAO;gBACL,OAAO,CAAC,OAAO,CAAC,KAAK;oBACnB,IAAI,KAAK,CAAC,cAAc,EAAE;wBACxB,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;qBACtD;yBAAM;wBACL,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;qBACzD;iBACF,CAAC,CAAC;aACJ,EACD,EAAE,UAAU,EAAE,SAAS,EAAE,CAC1B,CAAC;YAEF,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;SAC5C;QAED,IAAI,IAAI,CAAC,eAAe,EAAE;YACxB,IAAI,CAAC,YAAY,GAAG,IAAI,oBAAoB,CAC1C,OAAO;gBACL,OAAO,CAAC,OAAO,CAAC,KAAK;oBACnB,IAAI,KAAK,CAAC,cAAc,EAAE;;wBAExB,IAAI,IAAI,CAAC,KAAK,YAAY,WAAW,EAAE;4BACrC,UAAU,CAAC;gCACT,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC;6BACnE,EAAE,IAAI,CAAC,CAAC;yBACV;6BAAM;4BACL,OAAO,CAAC,KAAK,CAAC,uCAAuC,CAAC,CAAC;yBACxD;qBACF;iBACF,CAAC,CAAC;aACJ,EACD;gBACE,IAAI,EAAE,QAAQ;gBACd,UAAU,EAAE,qBAAqB;gBACjC,SAAS,EAAE,CAAC;aACb,CACF,CAAC;YAEF,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;SAC1C;KACF;IAED,oBAAoB;;QAElB,IAAI,IAAI,CAAC,cAAc,EAAE;YACvB,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,CAAC;SAClC;QACD,IAAI,IAAI,CAAC,YAAY,EAAE;YACrB,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,CAAC;SAChC;QACD,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;KACzD;IAED,YAAY,GAAG;QACb,MAAM,iBAAiB,GAAG,IAAI,CAAC,KAAK,CAAC,iBAAgC,CAAC;QACtE,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAgB,CAAC;QACjF,MAAM,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,+BAA+B,CAAsB,CAAC;QAExG,MAAM,gBAAgB,GAAG,aAAa,CAAC,qBAAqB,EAAE,CAAC,GAAG,CAAC;QACnE,MAAM,uBAAuB,GAAG,iBAAiB,CAAC,YAAY,CAAC;QAE/D,MAAM,cAAc,GAAG,uBAAuB,GAAG,gBAAgB,CAAC;QAElE,MAAM,oBAAoB,GAAG,GAAG,CAAC;QACjC,MAAM,kBAAkB,GAAG,GAAG,CAAC;QAE/B,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,+BAA+B,CAAgB,CAAC;QAChG,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,iCAAiC,CAAgB,CAAC;QAE3F,IAAI,cAAc,IAAI,IAAI,EAAE;;YAE1B,cAAc,CAAC,KAAK,CAAC,SAAS,GAAG,gBAAgB,cAAc,IAAI,GAAG,GAAG,kBAAkB,CAAC,KAAK,CAAC;YAElG,IAAI,gBAAgB,IAAI,IAAI,EAAE;;gBAE5B,gBAAgB,CAAC,KAAK,CAAC,SAAS,GAAG,gBAAgB,CAAC,cAAc,IAAI,GAAG,GAAG,kBAAkB,CAAC,KAAK,CAAC;aACtG;SACF;QAED,IAAI,OAAO,EAAE;;YAEX,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,gBAAgB,cAAc,IAAI,GAAG,GAAG,oBAAoB,CAAC,KAAK,CAAC;;YAG7F,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,GAAG,cAAc,GAAG,GAAG,CAAC,CAAC;YACtD,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,OAAO,EAAE,CAAC;SACtC;KACF,CAAC;IAEF,MAAM;QACJ,MAAM,EAAE,gBAAgB,EAAE,eAAe,EAAE,WAAW,EAAE,eAAe,EAAE,wBAAwB,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,wBAAwB,EAAE,GAAG,IAAI,CAAC;QACxK,MAAM,UAAU,GAAG,IAAI,wBAAwB,IAAI,CAAC,EAAE,CAAC;QACvD,MAAM,OAAO,GAAG,QAAQ,CAAC;QACzB,MAAM,OAAO,GAAG,QAAQ,CAAC;QAEzB,MAAM,OAAO,GAAG;YACd,aAAa;YACb,WAAW,GAAG,uBAAuB,WAAW,EAAE,GAAG,EAAE;YACvD,gBAAgB,GAAG,2BAA2B,GAAG,EAAE;YACnD,wBAAwB,GAAG,yCAAyC,GAAG,EAAE;YACzE,OAAO,GAAG,oBAAoB,GAAG,EAAE;YACnC,eAAe,GAAG,aAAa,GAAG,gBAAgB;YAClD,eAAe,GAAG,+BAA+B,GAAG,EAAE;SACvD,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAEZ,MAAM,6BAA6B,GAA6B;YAC9D,IAAI,EAAE,IAAI,CAAC,WAAW,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI;YACvD,SAAS,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC;SACvB,CAAC;QAEF,QACE,4DAAK,KAAK,EAAE,OAAO,IACjB,4DAAK,KAAK,EAAC,8BAA8B,IACvC,4DAAK,KAAK,EAAC,8BAA8B,IACtC,OAAO,IACN,yCAAiC,IAAI,CAAC,gBAAgB,EAAE,eAAe,EAAE,6BAA6B,eAAa,IAAI,CAAC,QAAQ,GAAsB,IACpJ,OAAO,IACT,mBACE,cAAQ,KAAK,EAAC,qBAAqB,EAAC,MAAM,EAAE,IAAI,CAAC,QAAQ,GAAI,EAC7D,cAAQ,KAAK,EAAC,qBAAqB,EAAC,MAAM,EAAE,IAAI,CAAC,QAAQ,GAAI,EAC7D,cAAQ,KAAK,EAAC,qBAAqB,EAAC,MAAM,EAAE,IAAI,CAAC,QAAQ,GAAI,EAC7D,cACE,KAAK,EAAC,qBAAqB,EAC3B,MAAM,EAAE,IAAI,CAAC,yBAAyB,IAAI,IAAI,CAAC,yBAAyB,KAAK,WAAW,GAAG,IAAI,CAAC,yBAAyB,GAAG,IAAI,CAAC,QAAQ,GACzI,EACF,cACE,KAAK,EAAC,oBAAoB,EAC1B,MAAM,EAAE,IAAI,CAAC,yBAAyB,IAAI,IAAI,CAAC,yBAAyB,KAAK,WAAW,GAAG,IAAI,CAAC,yBAAyB,GAAG,IAAI,CAAC,QAAQ,GACzI,EACF,cACE,KAAK,EAAC,oBAAoB,EAC1B,MAAM,EAAE,IAAI,CAAC,yBAAyB,IAAI,IAAI,CAAC,yBAAyB,KAAK,WAAW,GAAG,IAAI,CAAC,yBAAyB,GAAG,IAAI,CAAC,QAAQ,GACzI,EACF,WACE,GAAG,EAAE,IAAI,CAAC,yBAAyB,KAAK,WAAW,GAAG,IAAI,CAAC,yBAAyB,GAAG,IAAI,CAAC,QAAQ,EACpG,GAAG,EAAE,IAAI,CAAC,YAAY,KAAK,WAAW,GAAG,IAAI,CAAC,YAAY,GAAG,EAAE,EAC/D,IAAI,EAAE,IAAI,CAAC,YAAY,KAAK,WAAW,GAAG,KAAK,GAAG,cAAc,iBACnD,IAAI,CAAC,YAAY,KAAK,WAAW,GAAG,OAAO,GAAG,MAAM,GACjE,CACM,IACR,IAAI,CACJ,EAEL,CAAC,OAAO,IAAI,4DAAK,KAAK,EAAC,6BAA6B,EAAC,EAAE,EAAC,mBAAmB,GAAO,EAElF,CAAC,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,aAAa,MACvC,4DAAK,KAAK,EAAC,gCAAgC,IACxC,IAAI,CAAC,YAAY,IAAI,EAAC,UAAU,qDAAC,KAAK,EAAC,4BAA4B,IAAE,IAAI,CAAC,YAAY,CAAc,EACpG,IAAI,CAAC,aAAa,IAAI,0DAAG,KAAK,EAAC,uBAAuB,IAAE,IAAI,CAAC,aAAa,CAAK,EAC/E,aAAa,KACZ,4DAAK,KAAK,EAAC,uBAAuB,IAChC,6DAAM,IAAI,EAAC,YAAY,GAAG,CACtB,CACP,CACG,CACP,CACG,EAEN,4DAAK,EAAE,EAAC,gBAAgB,GAAO,CAC3B,EACN;KACH;;;;;;","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: 992px) {\n padding: 6.4rem 0;\n }\n\n @media screen and (min-width: 1200px) {\n padding: 7.2rem 0;\n }\n\n @media screen and (min-width: 1640px) {\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: 576px) {\n font-size: 4rem;\n }\n\n @media screen and (min-width: 768px) {\n font-size: 4.8rem;\n }\n\n @media screen and (min-width: 992px) {\n font-size: 5.6rem;\n }\n\n @media screen and (min-width: 1200px) {\n font-size: 8rem;\n }\n\n @media screen and (min-width: 1640px) {\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: 576px) {\n font-size: 2rem;\n }\n\n @media screen and (min-width: 1200px) {\n font-size: 2.4rem;\n }\n\n @media screen and (min-width: 1640px) {\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 img {\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 clip-path: inset(0);\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:768px) {\n margin-bottom: 4rem;\n }\n\n @media screen and (min-width:992px) {\n margin-bottom: 5.6rem;\n }\n\n @media screen and (min-width:1200px) {\n margin-bottom: 7.2rem;\n }\n }\n}\n","import { 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?: number = 2;\n @Prop() blockPreamble?: string = null;\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 blockHeadingLevelChecked() {\n if (this.blockHeading && this.blockHeading !== null) {\n console.warn('blockHeadingLevel is required when blockHeading is set');\n return undefined;\n }\n return this.blockHeadingLevel;\n }\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, blockHeadingLevelChecked, hasButtonSlot, hasVideo, hasImage, animateOverlayBackground } = this;\n const HeadingTag = `h${blockHeadingLevelChecked ?? 2}`;\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 ].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 && <HeadingTag class=\"media-block__block-heading\">{this.blockHeading}</HeadingTag>}\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.entry.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: 992px) {\n padding: 6.4rem 0;\n }\n\n @media screen and (min-width: 1200px) {\n padding: 7.2rem 0;\n }\n\n @media screen and (min-width: 1640px) {\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: 576px) {\n font-size: 4rem;\n }\n\n @media screen and (min-width: 768px) {\n font-size: 4.8rem;\n }\n\n @media screen and (min-width: 992px) {\n font-size: 5.6rem;\n }\n\n @media screen and (min-width: 1200px) {\n font-size: 8rem;\n }\n\n @media screen and (min-width: 1640px) {\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: 576px) {\n font-size: 2rem;\n }\n\n @media screen and (min-width: 1200px) {\n font-size: 2.4rem;\n }\n\n @media screen and (min-width: 1640px) {\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:768px) {\n margin-bottom: 4rem;\n }\n\n @media screen and (min-width:992px) {\n margin-bottom: 5.6rem;\n }\n\n @media screen and (min-width:1200px) {\n margin-bottom: 7.2rem;\n }\n }\n}\n","import { 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?: number = 2;\n @Prop() blockPreamble?: string = null;\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 blockHeadingLevelChecked() {\n if (this.blockHeading && this.blockHeading !== null) {\n console.warn('blockHeadingLevel is required when blockHeading is set');\n return undefined;\n }\n return this.blockHeadingLevel;\n }\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, blockHeadingLevelChecked, hasButtonSlot, hasVideo, hasImage, animateOverlayBackground } = this;\n const HeadingTag = `h${blockHeadingLevelChecked ?? 2}`;\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 ].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 && <HeadingTag class=\"media-block__block-heading\">{this.blockHeading}</HeadingTag>}\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/package.json
CHANGED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as e,g as i,h as o}from"./p-06555615.js";const a="pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-media-block .media-block .media-block__block-container{display:grid;overflow:hidden}pn-media-block .media-block .media-block__media-container,pn-media-block .media-block .media-block__content-container,pn-media-block .media-block .media-block__overlay-filter{grid-area:1/1;width:100%;position:relative}pn-media-block .media-block .media-block__media-container{height:100vh;overflow:hidden;position:relative}pn-media-block .media-block .media-block__media-container img,pn-media-block .media-block .media-block__media-container video{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);object-fit:cover;pointer-events:none;max-width:100%;max-height:none;height:100%;width:100%;pointer-events:none}pn-media-block .media-block .media-block__media-container pn-play-on-scroll{width:100%;height:100%}pn-media-block .media-block .media-block__media-container .scroll-wrapper{width:100%;height:100%}pn-media-block .media-block .media-block__media-container [slot=scroll-affected]{width:100%;height:100%;display:flex}pn-media-block .media-block .media-block__media-container .scroll-wrapper,pn-media-block .media-block .media-block__media-container .scroll-affected{width:100%;height:100%;display:flex}pn-media-block .media-block .media-block__media-container video{width:100%;height:100%}pn-media-block .media-block .media-block__overlay-filter{z-index:2}pn-media-block .media-block .media-block__content-container{z-index:3;display:flex;align-items:center;justify-content:center;transition:opacity 1s;flex-direction:column;margin:0 auto;padding:3.4rem 0;width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media (min-width: 576px){pn-media-block .media-block .media-block__content-container{max-width:540px}}@media (min-width: 768px){pn-media-block .media-block .media-block__content-container{max-width:720px}}@media (min-width: 992px){pn-media-block .media-block .media-block__content-container{max-width:960px}}@media (min-width: 1200px){pn-media-block .media-block .media-block__content-container{max-width:1140px}}@media (min-width: 1640px){pn-media-block .media-block .media-block__content-container{max-width:1440px}}@media screen and (min-width: 992px){pn-media-block .media-block .media-block__content-container{padding:6.4rem 0}}@media screen and (min-width: 1200px){pn-media-block .media-block .media-block__content-container{padding:7.2rem 0}}@media screen and (min-width: 1640px){pn-media-block .media-block .media-block__content-container{padding:8rem 0}}pn-media-block .media-block .media-block__content-container .media-block__block-heading{max-width:100rem;text-wrap:balance;color:white;font-size:3.2rem;text-align:center;font-weight:700;line-height:1.1;margin-bottom:3rem}@media screen and (min-width: 576px){pn-media-block .media-block .media-block__content-container .media-block__block-heading{font-size:4rem}}@media screen and (min-width: 768px){pn-media-block .media-block .media-block__content-container .media-block__block-heading{font-size:4.8rem}}@media screen and (min-width: 992px){pn-media-block .media-block .media-block__content-container .media-block__block-heading{font-size:5.6rem}}@media screen and (min-width: 1200px){pn-media-block .media-block .media-block__content-container .media-block__block-heading{font-size:8rem}}@media screen and (min-width: 1640px){pn-media-block .media-block .media-block__content-container .media-block__block-heading{font-size:8.8rem}}pn-media-block .media-block .media-block__content-container .media-block__preamble{max-width:80rem;max-width:80ch;text-wrap:balance;display:flex;color:white;font-size:1.8rem;text-align:center;font-weight:300}@media screen and (min-width: 576px){pn-media-block .media-block .media-block__content-container .media-block__preamble{font-size:2rem}}@media screen and (min-width: 1200px){pn-media-block .media-block .media-block__content-container .media-block__preamble{font-size:2.4rem}}@media screen and (min-width: 1640px){pn-media-block .media-block .media-block__content-container .media-block__preamble{font-weight:500}}pn-media-block .media-block .media-block__content-container .media-block__cta-link{margin-top:3rem}pn-media-block .media-block--height-100svh{min-height:100vh}@supports (height: 100svh){pn-media-block .media-block--height-100svh{height:100svh}}pn-media-block .media-block--height-100svh .media-block__block-container{height:100vh}@supports (max-height: 100svh){pn-media-block .media-block--height-100svh .media-block__block-container{max-height:100svh}}pn-media-block .media-block--height-100svh .media-block__block-container .media-block__media-container,pn-media-block .media-block--height-100svh .media-block__block-container .media-block__content-container,pn-media-block .media-block--height-100svh .media-block__block-container .media-block__overlay-filter{height:100vh}@supports (max-height: 100svh){pn-media-block .media-block--height-100svh .media-block__block-container .media-block__media-container,pn-media-block .media-block--height-100svh .media-block__block-container .media-block__content-container,pn-media-block .media-block--height-100svh .media-block__block-container .media-block__overlay-filter{max-height:100svh}}pn-media-block .media-block--height-100svh .media-block__block-container .media-block__media-container picture{height:100vh}@supports (max-height: 100svh){pn-media-block .media-block--height-100svh .media-block__block-container .media-block__media-container picture{max-height:100svh}}pn-media-block .media-block--height-65svh{min-height:65svh;overflow:auto}pn-media-block .media-block--height-65svh .media-block__block-container{height:65vh}@supports (max-height: 100svh){pn-media-block .media-block--height-65svh .media-block__block-container{max-height:65svh}}pn-media-block .media-block--height-65svh .media-block__block-container .media-block__media-container,pn-media-block .media-block--height-65svh .media-block__block-container .media-block__content-container,pn-media-block .media-block--height-65svh .media-block__block-container .media-block__overlay-filter{height:65vh}@supports (max-height: 100svh){pn-media-block .media-block--height-65svh .media-block__block-container .media-block__media-container,pn-media-block .media-block--height-65svh .media-block__block-container .media-block__content-container,pn-media-block .media-block--height-65svh .media-block__block-container .media-block__overlay-filter{max-height:65svh}}pn-media-block .media-block--height-65svh .media-block__media-container picture{max-height:none !important;height:auto !important}pn-media-block .media-block--height-dynamic{height:auto;overflow:auto}pn-media-block .media-block--height-dynamic .media-block__block-container{height:auto;max-height:none}pn-media-block .media-block--height-dynamic .media-block__block-container .media-block__media-container,pn-media-block .media-block--height-dynamic .media-block__block-container .media-block__content-container,pn-media-block .media-block--height-dynamic .media-block__block-container .media-block__overlay-filter{height:auto;max-height:none}pn-media-block .media-block--with-overlay .media-block__block-container .media-block__overlay-filter{z-index:2;background:radial-gradient(circle, rgba(13, 35, 75, 0.68) 7%, rgba(13, 35, 75, 0) 80%)}pn-media-block .media-block--fixed-background .media-block__block-container .media-block__media-container,pn-media-block .media-block--fixed-background .media-block__block-container .media-block__overlay-filter{position:relative;overflow:hidden;top:0;width:100%;display:flex !important;clip-path:inset(0)}pn-media-block .media-block--fixed-background .media-block__block-container .media-block__media-container picture{position:absolute;top:0;width:100%;display:flex !important;height:100%}pn-media-block .media-block--fixed-background .media-block__block-container .media-block__media-container picture img{position:fixed;width:100%;height:100%;object-fit:cover;z-index:1}pn-media-block .media-block--video .media-block__content-container{max-width:80%}pn-media-block .media-block--animate-overlay-background .media-block__overlay-filter{background-size:200% 200% !important;animation:overlayBackgroundAnimation 20s ease infinite}@keyframes overlayBackgroundAnimation{0%{background-position:100% 100%}50%{background-position:50% 60%}100%{background-position:100% 100%}}pn-media-block .media-block--margin-bottom{margin-bottom:3.2rem}@media screen and (min-width: 768px){pn-media-block .media-block--margin-bottom{margin-bottom:4rem}}@media screen and (min-width: 992px){pn-media-block .media-block--margin-bottom{margin-bottom:5.6rem}}@media screen and (min-width: 1200px){pn-media-block .media-block--margin-bottom{margin-bottom:7.2rem}}";const n=a;const t=class{constructor(i){e(this,i);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 block(){return i(this)}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}observerScroll;observerSnap;componentWillLoad(){this.hasButtonSlot=!!this.block.querySelector('[slot="cta-button"]')}async componentDidLoad(){const e=document.getElementById("scroll-trigger");this.calculatedBlockHeight=this.block.offsetHeight;const i=this.block.querySelector("#mediaBlockOverlay");if(this.customOverlayBackground!=null||this.customOverlayBackground!="undefined"){i.style.background=`${this.customOverlayBackground}`}if(this.parallaxScroll){this.observerScroll=new IntersectionObserver((e=>{e.forEach((e=>{if(e.isIntersecting){window.addEventListener("scroll",this.handleScroll)}else{window.removeEventListener("scroll",this.handleScroll)}}))}),{rootMargin:`0px 0px`});this.observerScroll.observe(e)}if(this.scrollSnapBlock){this.observerSnap=new IntersectionObserver((e=>{e.forEach((e=>{if(e.isIntersecting){if(this.block instanceof HTMLElement){setTimeout((()=>{this.block.scrollIntoView({behavior:"smooth",block:"start"})}),1e3)}else{console.error("this.block is not a valid HTMLElement")}}}))}),{root:document,rootMargin:"100px 0px 100px 0px",threshold:0});this.observerSnap.observe(e)}}disconnectedCallback(){if(this.observerScroll){this.observerScroll.disconnect()}if(this.observerSnap){this.observerSnap.disconnect()}window.removeEventListener("scroll",this.handleScroll)}handleScroll=()=>{const e=this.block.firstElementChild;const i=this.block.querySelector("#scroll-trigger");const o=this.block.querySelector("#overlayed-button-pause-video");const a=i.getBoundingClientRect().top;const n=e.offsetHeight;const t=n-a;const c=.3;const d=.2;const l=this.block.querySelector(".media-block__media-container");const m=this.block.querySelector(".media-block__content-container");if(l!=null){l.style.transform=`translate(0, ${t*(.1+d)}px)`;if(o!=null){o.style.transform=`translate(0, ${-t*(.3+d)}px)`}}if(m){m.style.transform=`translate(0, ${t*(.5+c)}px)`;const e=Math.max(0,1-t/600);m.style.opacity=`${e}`}};render(){const{showOverlayLayer:e,fixedBackground:i,blockHeight:a,scrollSnapBlock:n,blockHeadingLevelChecked:t,hasButtonSlot:c,hasVideo:d,hasImage:l,animateOverlayBackground:m}=this;const b=`h${t??2}`;const h=d;const r=l;const k=["media-block",a?`media-block--height-${a}`:"",e?"media-block--with-overlay":"",m?`media-block--animate-overlay-background`:"",h?"media-block--video":"",n?"scroll-snap":"no-scroll-snap",i?"media-block--fixed-background":""].join(" ");const s={root:this.blockHeight==="100svh"?this.block:null,threshold:[0,.5,1]};return o("div",{key:"ecced5b0bf6d2a859e77c79a10e6691b67dac996",class:k},o("div",{key:"49b925b7e2f0726fdde6cc5f37aeecdd542d1579",class:"media-block__block-container"},o("div",{key:"496847f2fa31bc56d51bc2fc57d76f90f91e43de",class:"media-block__media-container"},h?o("pn-play-on-scroll",{"show-overlay":this.showOverlayLayer,observerOptions:s,"video-src":this.videoSrc}):r?o("picture",null,o("source",{media:"(min-width: 1400px)",srcSet:this.imageSrc}),o("source",{media:"(min-width: 1224px)",srcSet:this.imageSrc}),o("source",{media:"(min-width: 1140px)",srcSet:this.imageSrc}),o("source",{media:"(min-width: 1023px)",srcSet:this.imageSrcSmallScreenFormat&&this.imageSrcSmallScreenFormat!=="undefined"?this.imageSrcSmallScreenFormat:this.imageSrc}),o("source",{media:"(min-width: 768px)",srcSet:this.imageSrcSmallScreenFormat&&this.imageSrcSmallScreenFormat!=="undefined"?this.imageSrcSmallScreenFormat:this.imageSrc}),o("source",{media:"(min-width: 500px)",srcSet:this.imageSrcSmallScreenFormat&&this.imageSrcSmallScreenFormat!=="undefined"?this.imageSrcSmallScreenFormat:this.imageSrc}),o("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),!h&&o("div",{key:"2738b9052d0d5d66330b5ba6abfe65eee1a5a6d2",class:"media-block__overlay-filter",id:"mediaBlockOverlay"}),(this.blockHeading||this.blockPreamble)&&o("div",{key:"199f4a644a1f19f6165b7426de824dc82ae60dd4",class:"media-block__content-container"},this.blockHeading&&o(b,{key:"bf840616f0a52383d6fba1d183a08fa5abf2cb6e",class:"media-block__block-heading"},this.blockHeading),this.blockPreamble&&o("p",{key:"7040983d8f422af63452d6ed04d026829507c8eb",class:"media-block__preamble"},this.blockPreamble),c&&o("div",{key:"6e3440cf418fa5196926aefdd76465c8e0ece2c2",class:"media-block__cta-link"},o("slot",{key:"15b22fe51024c91a7073aa6ae75350d0f9068d6a",name:"cta-button"})))),o("div",{key:"7f670bd4220934049a3b231bd4efc8b2b5430d1e",id:"scroll-trigger"}))}};t.style=n;export{t as pn_media_block};
|
|
2
|
+
//# sourceMappingURL=p-42c9386d.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["pnMediaBlockCss","PnMediaBlockStyle0","PnmediaBlock","undefined","root","document","threshold","rootMargin","blockHeadingLevelChecked","this","blockHeading","console","warn","blockHeadingLevel","hasVideo","videoSrc","hasImage","imageSrc","observerScroll","observerSnap","componentWillLoad","hasButtonSlot","block","querySelector","componentDidLoad","scrollTrigger","getElementById","calculatedBlockHeight","offsetHeight","overlayElement","customOverlayBackground","style","background","parallaxScroll","IntersectionObserver","entries","forEach","entry","isIntersecting","window","addEventListener","handleScroll","removeEventListener","observe","scrollSnapBlock","HTMLElement","setTimeout","scrollIntoView","behavior","error","disconnectedCallback","disconnect","mediaBlockElement","firstElementChild","videoPauseButton","scrollTriggerTop","getBoundingClientRect","top","mediaBlockElementHeight","scrollPosition","parallaxSpeedContent","parallaxSpeedMedia","mediaContainer","content","transform","opacity","Math","max","render","showOverlayLayer","fixedBackground","blockHeight","animateOverlayBackground","HeadingTag","isVideo","isImage","classes","join","pnPlayOnScrollObserverOptions","h","key","class","observerOptions","media","srcSet","imageSrcSmallScreenFormat","src","alt","imageAltText","role","id","blockPreamble","name"],"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: 992px) {\n padding: 6.4rem 0;\n }\n\n @media screen and (min-width: 1200px) {\n padding: 7.2rem 0;\n }\n\n @media screen and (min-width: 1640px) {\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: 576px) {\n font-size: 4rem;\n }\n\n @media screen and (min-width: 768px) {\n font-size: 4.8rem;\n }\n\n @media screen and (min-width: 992px) {\n font-size: 5.6rem;\n }\n\n @media screen and (min-width: 1200px) {\n font-size: 8rem;\n }\n\n @media screen and (min-width: 1640px) {\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: 576px) {\n font-size: 2rem;\n }\n\n @media screen and (min-width: 1200px) {\n font-size: 2.4rem;\n }\n\n @media screen and (min-width: 1640px) {\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:768px) {\n margin-bottom: 4rem;\n }\n\n @media screen and (min-width:992px) {\n margin-bottom: 5.6rem;\n }\n\n @media screen and (min-width:1200px) {\n margin-bottom: 7.2rem;\n }\n }\n}\n","import { 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?: number = 2;\n @Prop() blockPreamble?: string = null;\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 blockHeadingLevelChecked() {\n if (this.blockHeading && this.blockHeading !== null) {\n console.warn('blockHeadingLevel is required when blockHeading is set');\n return undefined;\n }\n return this.blockHeadingLevel;\n }\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, blockHeadingLevelChecked, hasButtonSlot, hasVideo, hasImage, animateOverlayBackground } = this;\n const HeadingTag = `h${blockHeadingLevelChecked ?? 2}`;\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 ].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 && <HeadingTag class=\"media-block__block-heading\">{this.blockHeading}</HeadingTag>}\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"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as t,b as a}from"./p-06555615.js";export{s as setNonce}from"./p-06555615.js";import{g as n}from"./p-e1255160.js";var o=()=>{{r(t.prototype)}const a=import.meta.url;const n={};if(a!==""){n.resourcesUrl=new URL(".",a).href}return e(n)};var r=e=>{const t=e.cloneNode;e.cloneNode=function(e){if(this.nodeName==="TEMPLATE"){return t.call(this,e)}const a=t.call(this,false);const n=this.childNodes;if(e){for(let e=0;e<n.length;e++){if(n[e].nodeType!==2){a.appendChild(n[e].cloneNode(true))}}}return a}};o().then((async e=>{await n();return a(JSON.parse('[["p-b765e4a9",[[4,"pn-marketweb-siteheader",{"market":[1537],"language":[1537],"siteid":[1],"environment":[1537],"userToken":[1,"user-token"],"userFullname":[1,"user-fullname"],"userLoggedin":[516,"user-loggedin"],"endpoint":[1],"hideSiteSelector":[1540,"hide-site-selector"],"hideHomeMenuItem":[1540,"hide-home-menu-item"],"hideLanguageSelector":[1540,"hide-language-selector"],"hideSearch":[1540,"hide-search"],"hideLogin":[1540,"hide-login"],"showProfileSelection":[1540,"show-profile-selection"],"showUnifiedLogin":[4,"show-unified-login"],"siteDomainInUrls":[4,"site-domain-in-urls"],"AutocompleteEndpoint":[1,"autocomplete-endpoint"],"sessionForward":[4,"session-forward"],"cache":[4],"searchPlaceholder":[1,"search-placeholder"],"spaMode":[4,"spa-mode"],"checkUserLoggedInStateInterval":[2,"check-user-logged-in-state-interval"],"pageId":[1,"page-id"],"i18n":[32],"gotData":[32],"fetchingData":[32],"homePageLink":[32],"menuItems":[32],"siteDefinition":[32],"search":[32],"siteSelector":[32],"languageSelector":[32],"languageOptions":[32],"loginDialog":[32],"minimizeSearch":[32],"loggedIn":[32]},[[0,"setLanguage","onLanguageSelectorChange"],[0,"loginStateChange","onLoginStateChange"],[9,"resize","handleResize"]],{"language":["onLanguageChange"],"market":["onMarketChange"]}]]],["p-63505736",[[0,"pn-proxio-findprice",{"endpoint":[1025],"language":[1025],"market":[1025],"showMedium":[4,"show-medium"],"showInternational":[4,"show-international"],"maxAbroadKg":[2,"max-abroad-kg"],"weightListName":[1,"weight-list-name"],"cache":[4],"filteredItems":[32],"weight":[32],"weightvalue":[32],"countrycodevalue":[32],"sizecategory":[32],"data":[32]},null,{"market":["setState"],"language":["setState"],"sizecategory":["filterItems"],"weightvalue":["filterItems"],"countrycodevalue":["filterItems"]}]]],["p-4372d10e",[[0,"pn-find-price",{"source":[1],"language":[1025],"market":[1025],"filteredItems":[32],"weight":[32],"weightvalue":[32],"sourceData":[32],"sizecategory":[32]},null,{"market":["setState"],"language":["setState"],"sizecategory":["filterItems"],"weightvalue":["filterItems"]}]]],["p-796ebfee",[[0,"pn-find-service-and-price",{"source":[1],"language":[1025],"market":[1025],"filteredItems":[32],"postagetype":[32],"weight":[32],"weightvalue":[32],"deliveryscope":[32],"sourceData":[32]},null,{"market":["setState"],"language":["setState"],"postagetype":["filterItems"],"deliveryscope":["filterItems"],"weightvalue":["filterItems"]}]]],["p-721598b8",[[4,"pn-product-pricelist",{"source":[1],"language":[1025],"market":[1025],"productid":[1],"filteredItems":[32],"sourceData":[32],"gotData":[32],"loading":[32],"postagetype":[32],"weight":[32],"weightvalue":[32]},null,{"market":["setState"],"language":["setState"],"postagetype":["filterItems"],"weightvalue":["filterItems"]}]]],["p-7b05d7c7",[[0,"pn-proxio-pricegroup",{"endpoint":[1025],"language":[1],"market":[1],"tariffid":[1],"cache":[4],"activeWeightIndex":[32],"data":[32],"i18n":[32]},[[0,"activeWeightIndex","setActiveWeightIndex"],[0,"language","setLanguage"]]]]],["p-f0568315",[[0,"pn-product-pricelist-result",{"item":[1040],"description":[16],"shownitems":[16],"showMeasurement":[4,"show-measurement"],"weightText":[32]},null,{"item":["composeItems"]}]]],["p-e5345c69",[[4,"pn-marketweb-sitefooter",{"market":[1537],"language":[1537],"environment":[1537],"endpoint":[1],"siteDomainInUrls":[4,"site-domain-in-urls"],"cache":[4],"theme":[513],"backgroundcolor":[513],"showSwan":[4,"show-swan"],"siteDefinition":[32],"footerContent":[32],"i18n":[32],"gotData":[32],"fetchingData":[32]},null,{"language":["onLanguageChange"],"market":["onMarketChange"]}]]],["p-c5856c0b",[[4,"pn-media-block",{"blockHeight":[1,"block-height"],"imageSrc":[1,"image-src"],"imageSrcSmallScreenFormat":[1,"image-src-small-screen-format"],"imageAltText":[1,"image-alt-text"],"videoSrc":[1,"video-src"],"parallaxScroll":[4,"parallax-scroll"],"showOverlayLayer":[4,"show-overlay-layer"],"customOverlayBackground":[1,"custom-overlay-background"],"animateOverlayBackground":[4,"animate-overlay-background"],"scrollSnapBlock":[4,"scroll-snap-block"],"fixedBackground":[4,"fixed-background"],"blockHeading":[1,"block-heading"],"blockHeadingLevel":[2,"block-heading-level"],"blockPreamble":[1,"block-preamble"],"pnPlayOnScrollObserverOptions":[32],"calculatedBlockHeight":[32],"hasButtonSlot":[32]}]]],["p-5ac23b38",[[0,"pn-multi-row-connected-dropdown",{"dropdownData":[1,"dropdown-data"],"languageCode":[1,"language-code"],"label":[1],"firstDropdownLabel":[1,"first-dropdown-label"],"secondDropdownLabel":[1,"second-dropdown-label"],"dropdownPlaceholder":[1,"dropdown-placeholder"],"addRowText":[1,"add-row-text"],"inputFildLabel":[1,"input-fild-label"],"inputFildPlaceholder":[1,"input-fild-placeholder"],"dateButtonText":[1,"date-button-text"],"datePlaceholder":[1,"date-placeholder"],"dateDaysFromToday":[2,"date-days-from-today"],"allowMultipleRows":[4,"allow-multiple-rows"],"allowMultipleDates":[4,"allow-multiple-dates"],"startDateLabel":[1,"start-date-label"],"endDateLabel":[1,"end-date-label"],"multiDateHelperText":[1,"multi-date-helper-text"],"generateDatesButtonText":[1,"generate-dates-button-text"],"saveDateButtonText":[1,"save-date-button-text"],"noDatesText":[1,"no-dates-text"],"yearsToAddToEndDate":[2,"years-to-add-to-end-date"],"rowCount":[32],"rowData":[32],"formValues":[32]},[[0,"rowValueChange","predefinedValueChange"],[0,"deleteRowEvent","deleteRowEvent"]]]]],["p-781ef432",[[0,"pn-dropdown-with-multi-input-rows",{"dropdownData":[1,"dropdown-data"],"languageCode":[1,"language-code"],"firstDropdownLabel":[1,"first-dropdown-label"],"firstDropdownHelperText":[1,"first-dropdown-helper-text"],"secondDropdownLabel":[1,"second-dropdown-label"],"secondDropdownHelperText":[1,"second-dropdown-helper-text"],"secondDropdownMax":[2,"second-dropdown-max"],"deleteMultipleRowsWarningText":[1,"delete-multiple-rows-warning-text"],"confirmDeleteButtonText":[1,"confirm-delete-button-text"],"abortDeleteButtonText":[1,"abort-delete-button-text"],"fristInputLabel":[1,"frist-input-label"],"fristInputPlaceholder":[1,"frist-input-placeholder"],"firstInputMin":[2,"first-input-min"],"firstInputMax":[2,"first-input-max"],"firstInputWarning":[2,"first-input-warning"],"firstInputWarningText":[1,"first-input-warning-text"],"firstInputLowErrorText":[1,"first-input-low-error-text"],"firstInputHighErrorText":[1,"first-input-high-error-text"],"secondInputLabel":[1,"second-input-label"],"secondInputPlaceholder":[1,"second-input-placeholder"],"secondInputMin":[2,"second-input-min"],"secondInputMax":[2,"second-input-max"],"secondInputWarning":[2,"second-input-warning"],"secondInputWarningText":[1,"second-input-warning-text"],"secondInputLowErrorText":[1,"second-input-low-error-text"],"secondInputHighErrorText":[1,"second-input-high-error-text"],"dateLabel":[1,"date-label"],"datePlaceholder":[1,"date-placeholder"],"dateDaysFromToday":[2,"date-days-from-today"],"yearsToAddToEndDate":[2,"years-to-add-to-end-date"],"sumFieldLabel":[1,"sum-field-label"],"addRowText":[1,"add-row-text"],"elementHelperText":[1,"element-helper-text"],"dropdownDataRoot":[32],"secondDropdownArr":[32],"rowCount":[32],"rowData":[32],"formValues":[32],"firstValidDateString":[32],"lastValidDateString":[32],"rowSum":[32],"minRowCount":[32],"showDelteConfirm":[32]},[[0,"rowValueChange","predefinedValueChange"],[0,"firstInputChange","predefinedValueChange"],[0,"secondInputChange","predefinedValueChange"],[0,"deleteRowEvent","deleteRowEvent"]]]]],["p-acbe60df",[[0,"pn-address-autofill",{"market":[1537],"environment":[1537],"endpoint":[1],"cache":[4],"countryCode":[1,"country-code"],"postalCodeProps":[1,"postal-code-props"],"cityProps":[1,"city-props"],"streetAddressProps":[1,"street-address-props"],"streetNumberProps":[1,"street-number-props"],"streetAdressArr":[32],"streetNumberArr":[32],"city":[32],"postalCode":[32],"streetAddress":[32],"streetNumber":[32],"fullAddress":[32]}]]],["p-e9501c6f",[[4,"pn-dropdown-choice-adds-row",{"dropdownData":[1,"dropdown-data"],"languageCode":[1,"language-code"],"addRowDropdownName":[1,"add-row-dropdown-name"],"addRowDropdownPlaceholder":[1,"add-row-dropdown-placeholder"],"addRowDropdownLabel":[1,"add-row-dropdown-label"],"rowNameLabel":[1,"row-name-label"],"rowHasDropdown":[4,"row-has-dropdown"],"rowDropdownLabel":[1,"row-dropdown-label"],"rowDropdownPlaceholder":[1,"row-dropdown-placeholder"],"rowInputLabel":[1,"row-input-label"],"rowDeleteButtonText":[1,"row-delete-button-text"],"totalInputLimit":[2,"total-input-limit"],"inputLimitWarning":[1,"input-limit-warning"],"nextRowIndex":[32],"rowSelectDropdownArr":[32],"columnCount":[32],"showWarning":[32],"formValue":[32]},null,{"dropdownData":["dropdownDataWatcher"]}]]],["p-391970af",[[0,"pn-multiple-input",{"label":[1],"placeholder":[1],"addRowButtonText":[1,"add-row-button-text"],"rowData":[32]}]]],["p-ebaeee5e",[[0,"pn-parcel-tracker",{"formActionUrl":[1,"form-action-url"],"heading":[1],"buttonLabel":[1,"button-label"],"locale":[1],"placeholder":[1],"inputName":[1,"input-name"],"currentWidth":[32]},[[9,"resize","handleViewportSizeChange"]]]]],["p-95c10b7e",[[0,"pn-pex-pricefinder",{"language":[1],"currency":[1],"apiUrl":[1,"api-url"],"i18n":[32],"fromzip":[32],"tozip":[32],"weight":[32],"when":[32],"response":[32]},[[0,"language","setLanguage"]]]]],["p-40538914",[[0,"pn-share",{"link":[1],"language":[1537],"i18n":[32]},null,{"language":["onLanguageChange"]}]]],["p-34689c97",[[4,"pn-stats-info",{"heading":[1],"dataArray":[1,"data-array"],"backgroundUrl":[1,"background-url"],"myParsedArray":[32]},null,{"dataArray":["parseMyArrayProp"]}]]],["p-68aa55f7",[[4,"pn-animated-tile",{"toggled":[32],"transitionClassName":[32],"animateIcon":[32]},null,{"toggled":["onToggledHandler"]}]]],["p-586a1e3c",[[0,"pn-app-banner",{"appName":[1,"app-name"],"appDescription":[1,"app-description"],"ctaText":[1,"cta-text"],"appleStoreLink":[1,"apple-store-link"],"googleStoreLink":[1,"google-store-link"],"isClosed":[32],"storeLink":[32],"isLocalStorageAvailable":[32]}]]],["p-16f70311",[[4,"pn-bonus-progressbar",{"icon":[1],"heading":[1],"sumtext":[513],"theme":[513],"bonuspercentage":[1],"currency":[513],"value":[1538],"min":[1538],"max":[1538],"valuepercentage":[32],"progresspercentage":[32],"levelValues":[32],"currentLevelAdjustedValue":[32]},null,{"currentLevelAdjustedValue":["setValuePercentage"],"value":["setValuePercentage"],"min":["setValuePercentage"],"max":["setValuePercentage"]}]]],["p-a8220c88",[[0,"pn-bonus-progressbar-level",{"current":[516],"value":[1538],"bonuspercentage":[1537],"visualpercentage":[1538],"percentage":[32],"max":[32],"min":[32],"currency":[32]}]]],["p-56bd346e",[[0,"pn-breakpoints",{"breakPointClass":[1,"break-point-class"],"currentWidth":[32]},[[9,"resize","handleViewportSizeChange"]]]]],["p-1317587f",[[0,"pn-chart",{"labels":[1],"dataSets":[1,"data-sets"],"dataChartType":[8,"data-chart-type"],"myChartCtxRef":[32]},null,{"dataSets":["dataChangeHandler"],"labels":["labelsChangeHandler"]}]]],["p-190c671b",[[4,"pn-charts-card",{"header":[1],"highlight":[1],"preamble":[1],"label":[1],"source":[1],"sourceUrl":[1,"source-url"],"ctaLinkText":[1,"cta-link-text"],"openInNewWindow":[4,"open-in-new-window"]}]]],["p-69a56d5c",[[4,"pn-cta-block",{"heading":[1],"bodyText":[1,"body-text"],"pnBackgroundColor":[1,"pn-background-color"],"isLarge":[4,"is-large"],"isCentered":[4,"is-centered"],"isSmall":[4,"is-small"],"contentTop":[4,"content-top"]}]]],["p-95e054fd",[[4,"pn-customernumber-selector",{"language":[1537],"open":[1540],"heading":[1],"description":[1],"i18n":[32]}]]],["p-09b9cc06",[[4,"pn-customernumber-selector-option",{"heading":[1],"description":[1],"url":[1]}]]],["p-d8a57eba",[[0,"pn-date-and-time",{"languageCode":[1,"language-code"],"dateAndTimeLabel":[1,"date-and-time-label"],"dateDaysFromToday":[2,"date-days-from-today"],"validTimeRangeMinutes":[2,"valid-time-range-minutes"],"errorMessage":[1,"error-message"],"dateHelperText":[1,"date-helper-text"],"timeHelperText":[1,"time-helper-text"],"disableWeekends":[4,"disable-weekends"],"datePlacehodler":[1,"date-placehodler"],"language":[32],"hourArr":[32],"minuteArr":[32],"formValue":[32],"invalidTimespan":[32],"selectedDate":[32],"selectedFromHour":[32],"selectedFromMin":[32],"selectedToHour":[32],"selectedToMin":[32],"firstValidDateString":[32],"lastValidDateString":[32]}]]],["p-fbe70284",[[4,"pn-hero-block-international",{"heading":[1],"subHeading":[1,"sub-heading"],"preamble":[1],"animateLogo":[4,"animate-logo"],"showSideLoader":[4,"show-side-loader"],"centeredLayout":[4,"centered-layout"]}]]],["p-e42f0fbe",[[0,"pn-line-shape"]]],["p-ade7ffcf",[[4,"pn-link-list",{"heading":[1],"label":[1],"preamble":[1],"url":[1],"showMoreLabel":[1,"show-more-label"],"showMoreUrl":[1,"show-more-url"]}]]],["p-c25acf85",[[0,"pn-marketweb-icon",{"symbol":[1],"small":[4],"color":[1]}]]],["p-2044eddc",[[1,"pn-marketweb-search",{"disabled":[4],"placeholder":[1],"inputid":[1],"name":[1],"autocomplete":[1],"list":[1],"value":[1],"label":[1],"loading":[4],"button":[1],"light":[4],"suggestionObserver":[32],"hasClonedInput":[32],"listSuggestion":[32]},[[0,"input","inputHandler"]]]]],["p-c0fd8e61",[[4,"pn-product-tile"]]],["p-90ba1d8e",[[4,"pn-profile-modal",{"heading":[1],"continueCtaText":[1,"continue-cta-text"],"choosenCompanyText":[1,"choosen-company-text"],"toText":[1,"to-text"],"chooseCustomerNumberText":[1,"choose-customer-number-text"],"isLoading":[32]},[[0,"urlSelected","onUrlSelected"]]]]],["p-c9f21ea3",[[4,"pn-profile-modal-customernumber",{"url":[513],"customernumber":[513],"selected":[516]}]]],["p-f62879f6",[[4,"pn-profile-modal-profile",{"heading":[513],"description":[513],"url":[513],"selected":[1028],"showCustomerNumbers":[516,"show-customer-numbers"],"pleaseSelectText":[513,"please-select-text"],"visible":[1540],"identifier":[32]}]]],["p-931d3a9b",[[4,"pn-profile-modal-type",{"typeid":[513],"name":[1025],"selected":[1028],"selectedprofile":[1025]},null,{"selected":["onSelectedChange"]}]]],["p-74203d3e",[[4,"pn-profile-selector",{"language":[1537],"returnUrl":[1,"return-url"],"heading":[1],"i18n":[32],"isLoading":[32],"numberOfProfiles":[32]}]]],["p-f2d0d0cc",[[0,"pn-profile-selector-option",{"heading":[1],"description":[1],"url":[1]}]]],["p-5a467ca6",[[4,"pn-quick-cta",{"heading":[1],"preamble":[1]}]]],["p-e4c7aaec",[[4,"pn-quote-card",{"quote":[1],"name":[1],"occupation":[1]}]]],["p-67d862ac",[[4,"pn-sidenav",{"language":[1],"navLabel":[1,"nav-label"],"i18n":[32]},[[0,"language","setLanguage"],[0,"openSubMenuLevelChange","onOpenSubMenuLevelChange"]]]]],["p-1535a09f",[[4,"pn-sidenav-level",{"level":[32],"levelId":[32],"isOpen":[32],"parentName":[32],"parentHref":[32],"parentLinkId":[32],"alignment":[32]},null,{"isOpen":["onOpen"]}]]],["p-6e9875e5",[[4,"pn-sidenav-link",{"name":[1],"href":[1],"target":[1],"linkid":[1],"icon":[1],"current":[4],"levelId":[32],"open":[32],"hasChildren":[32]}]]],["p-7021985c",[[4,"pn-sidenav-togglebutton",{"label":[1],"i18n":[32]}]]],["p-0a522476",[[4,"pn-spotlight",{"heading":[1],"preamble":[1],"isDynamic":[4,"is-dynamic"],"addDynamic":[32]}]]],["p-73db2c9c",[[4,"pn-teaser-card",{"text":[1],"heading":[1],"label":[1],"dataCardColor":[513,"data-card-color"],"dataCardAlignment":[513,"data-card-alignment"],"hasCtaSlotContent":[32],"hasIllustrationSlot":[32]}]]],["p-69ee0033",[[4,"pn-usp-promoter",{"heading":[1],"headingExtension":[1,"heading-extension"],"bodyText":[1,"body-text"],"backgroundGradient":[1,"background-gradient"],"fullWidth":[4,"full-width"],"rightAlign":[4,"right-align"],"hideMobileImage":[4,"hide-mobile-image"]}]]],["p-9776a1c5",[[0,"pn-proxio-findprice-result",{"item":[1040],"activeweight":[1026],"shownitems":[16],"Usp1":[1,"usp-1"],"Usp2":[1,"usp-2"],"Usp3":[1,"usp-3"],"description":[16],"showMeasurement":[4,"show-measurement"],"showInternational":[4,"show-international"],"selectedCountrycode":[1,"selected-countrycode"],"market":[1],"language":[1025],"weightText":[32],"linkId":[32],"shopLabel":[32],"shopUrl":[32],"shopId":[32],"i18n":[32]},null,{"item":["composeItems"],"activeweight":["getPriceString","getProductLink"]}]]],["p-2f779414",[[0,"pn-find-service-and-price-result",{"item":[1040],"shownitems":[16],"weightText":[32]},null,{"item":["composeItems"]}]]],["p-85d57c9d",[[0,"pn-multi-row-connected-dropdown-row",{"dropdownData":[1,"dropdown-data"],"languageCode":[1,"language-code"],"label":[1],"firstDropdownLabel":[1,"first-dropdown-label"],"secondDropdownLabel":[1,"second-dropdown-label"],"dropdownPlaceholder":[1,"dropdown-placeholder"],"addRowText":[1,"add-row-text"],"inputFildLabel":[1,"input-fild-label"],"inputFildPlaceholder":[1,"input-fild-placeholder"],"dateButtonText":[1,"date-button-text"],"datePlaceholder":[1,"date-placeholder"],"dateDaysFromToday":[2,"date-days-from-today"],"allowMultipleDates":[4,"allow-multiple-dates"],"startDateLabel":[1,"start-date-label"],"endDateLabel":[1,"end-date-label"],"multiDateHelperText":[1,"multi-date-helper-text"],"generateDatesButtonText":[1,"generate-dates-button-text"],"saveDateButtonText":[1,"save-date-button-text"],"noDatesText":[1,"no-dates-text"],"index":[2],"predefinedValue":[1,"predefined-value"],"yearsToAddToEndDate":[2,"years-to-add-to-end-date"],"buttonsArray":[32],"firstDropdownArr":[32],"secondDropdownArr":[32],"firstDropdownClass":[32],"secondDropdownClass":[32],"firstValidDateString":[32],"lastValidDateString":[32],"firstDropdownPlaceholder":[32],"secondDropdownPlaceholder":[32],"starDateValue":[32],"endDateValue":[32],"generatedDatesArr":[32],"selectedButtonValue":[32],"inputFieldValue":[32],"dateValue":[32],"daysArr":[32]},null,{"predefinedValue":["applyPredefinedValue"]}]]],["p-c696bedf",[[0,"pn-play-on-scroll",{"videoSrc":[1,"video-src"],"observerOptions":[16],"showOverlay":[4,"show-overlay"],"videoId":[32],"isManuallyPaused":[32],"isPaused":[32]}]]],["p-d40ff187",[[0,"pn-dropdown-with-multi-input-rows-row",{"languageCode":[1,"language-code"],"fristInputPlaceholder":[1,"frist-input-placeholder"],"firstInputMin":[2,"first-input-min"],"firstInputMax":[2,"first-input-max"],"firstInputWarning":[2,"first-input-warning"],"firstInputWarningText":[1,"first-input-warning-text"],"firstInputLowErrorText":[1,"first-input-low-error-text"],"firstInputHighErrorText":[1,"first-input-high-error-text"],"secondInputPlaceholder":[1,"second-input-placeholder"],"secondInputMin":[2,"second-input-min"],"secondInputMax":[2,"second-input-max"],"secondInputWarning":[2,"second-input-warning"],"secondInputWarningText":[1,"second-input-warning-text"],"secondInputLowErrorText":[1,"second-input-low-error-text"],"secondInputHighErrorText":[1,"second-input-high-error-text"],"dateLabel":[1,"date-label"],"datePlaceholder":[1,"date-placeholder"],"firstValidDate":[1,"first-valid-date"],"lastValidDate":[1,"last-valid-date"],"predefinedValue":[1,"predefined-value"],"rowIndex":[2,"row-index"],"minRowCount":[2,"min-row-count"],"showFirstInputWarning":[32],"showFirstInputLowError":[32],"showFirstInputHighError":[32],"showSecondInputWarning":[32],"showSecondInputLowError":[32],"showSecondInputHighError":[32],"firstInputValue":[32],"secondInputValue":[32],"dateValue":[32]},null,{"predefinedValue":["applyPredefinedValue"]}]]],["p-81b3e038",[[4,"pn-share-item",{"link":[1],"text":[1]}]]],["p-1bd5fa26",[[0,"pn-stats-info-data",{"format":[1],"formatStyle":[1,"format-style"],"startValue":[2,"start-value"],"data":[2],"unit":[1],"preamble":[1],"duration":[2],"index":[2],"hasBeenShown":[32],"compId":[32]},null,{"hasBeenShown":["watchStateHandlder"]}]]],["p-7b598d81",[[0,"pn-find-price-result",{"item":[1040],"shownitems":[16],"Usp1":[1,"usp-1"],"Usp2":[1,"usp-2"],"Usp3":[1,"usp-3"],"description":[16],"showMeasurement":[4,"show-measurement"],"weightText":[32],"linkId":[32],"shopLabel":[32],"shopUrl":[32],"shopId":[32]},null,{"item":["composeItems"]}]]],["p-370829c6",[[1,"pn-filter-checkbox",{"value":[520],"name":[1],"checkboxid":[1],"disabled":[4],"checked":[4],"indeterminate":[1028]},[[0,"change","handlechange"]]]]],["p-c224d7c4",[[4,"pn-mainnav-link",{"name":[1],"href":[1],"target":[1],"linkid":[1],"levelId":[32],"open":[32],"hasChildren":[32]}]]],["p-78fbc88c",[[4,"pn-site-footer",{"url":[1],"linktitle":[1],"theme":[513]}],[4,"pn-site-footer-col",{"theme":[513]}],[0,"pn-swan",{"licenseNumber":[1,"license-number"],"language":[1537],"linkTo":[1,"link-to"],"i18n":[32]},null,{"language":["onLanguageChange"]}]]],["p-9be27d72",[[4,"pn-choice-button",{"value":[520],"name":[1],"choiceid":[1],"type":[1],"disabled":[4],"checked":[4],"indeterminate":[1028]},[[0,"change","handlechange"]]]]],["p-1217d60f",[[0,"pn-product-tile-info",{"label":[1],"text":[1],"icon":[1]}],[0,"pn-product-tile-price",{"label":[1],"amount":[1],"currency":[1],"url":[1]}]]],["p-828449da",[[4,"pn-scroll",{"observerOptions":[16],"behaviourClasses":[1,"behaviour-classes"],"transitionDurationSeconds":[2,"transition-duration-seconds"],"shouldLoop":[4,"should-loop"],"intersectFunc":[16],"notIntersectFunc":[16],"compId":[32]}],[0,"pn-video-overlay",{"language":[1],"isPaused":[4,"is-paused"],"showOverlay":[4,"show-overlay"],"i18n":[32]},null,{"language":["onLanguageChange"]}]]],["p-b2dcce7c",[[0,"pn-marketweb-siteheader-login-linklist",{"heading":[1],"links":[16],"idNamespace":[1,"id-namespace"],"showUnifiedLogin":[4,"show-unified-login"]}]]],["p-1578e02e",[[4,"pn-titletag",{"icon":[1],"color":[1537]}]]],["p-9998c29d",[[0,"pn-marketweb-input",{"disabled":[4],"error":[1],"invalid":[4],"helpertext":[1],"label":[1],"placeholder":[1],"inputid":[1],"name":[1],"required":[4],"type":[1025],"autocomplete":[1],"valid":[4],"value":[1],"maxlength":[1],"min":[1],"max":[1],"step":[1],"pattern":[1],"showText":[32]}]]],["p-9a7abcee",[[0,"pn-marketweb-siteheader-unified-login",{"loggedIn":[4,"logged-in"],"myPageLabel":[1,"my-page-label"],"myPageUrl":[1,"my-page-url"],"logInLabel":[1,"log-in-label"]}],[0,"pn-marketweb-siteheader-login-links",{"loginDialog":[1040],"idNamespace":[1,"id-namespace"],"loggedin":[516],"username":[1],"showUnifiedLogin":[4,"show-unified-login"]},null,{"loginDialog":["init"]}],[0,"pn-marketweb-siteheader-login-profileselection",{"loginDialog":[1040],"endpoint":[1],"loggedin":[4],"idNamespace":[1,"id-namespace"],"heading":[1],"i18n":[16],"currentProfile":[1040],"profileoptions":[1040],"user":[32],"logoutLink":[32],"userName":[32],"userEmail":[32]}],[0,"pn-marketweb-siteheader-login-button",{"label":[1]}],[0,"pn-marketweb-siteheader-login-mypage-button",{"label":[1],"myPageUrl":[1,"my-page-url"]}]]],["p-4ea1409d",[[0,"pn-marketweb-siteheader-login",{"endpoint":[1],"token":[1],"i18n":[16],"siteUrl":[1,"site-url"],"emitEvents":[4,"emit-events"],"loginDialog":[1040],"fullname":[1],"loggedin":[4],"showProfileSelection":[1028,"show-profile-selection"],"showUnifiedLogin":[4,"show-unified-login"],"checkUserLoggedInStateInterval":[2,"check-user-logged-in-state-interval"],"environment":[1],"loginLinks":[32],"toggleButtonText":[32],"username":[32]},null,{"i18n":["init"],"loginDialog":["init"]}],[4,"pn-mainnav-level",{"label":[1537],"level":[32],"levelId":[32],"isOpen":[32],"parentName":[32],"parentHref":[32],"parentLinkId":[32],"listCount":[32],"alignment":[32]},null,{"label":["setState"],"isOpen":["onOpen"]}],[4,"pn-language-selector",{"value":[1537],"selectedLanguageName":[32],"options":[32],"i18n":[32]},null,{"value":["setSelectedLanguageName","setTranslations","onValueChange"]}],[0,"pn-language-selector-option",{"name":[1],"code":[1],"url":[1],"selected":[4],"currentLanguage":[1,"current-language"]}],[4,"pn-mainnav",{"market":[1],"language":[1],"navigationId":[1,"navigation-id"],"openMenu":[1028,"open-menu"],"navLabel":[1,"nav-label"]},[[0,"language","setLanguage"],[0,"market","setMarket"],[0,"menuLanguageChange","onLanguageChange"],[0,"setmenuopenstate","setMenuOpenState"],[0,"openMenuLevelChange","onOpenMenuLevelChange"]]],[4,"pn-mainnav-list",{"heading":[1],"linkCount":[32]}],[0,"pn-marketweb-siteheader-search",{"i18n":[8,"i-1-8n"],"showOnlyLink":[1028,"show-only-link"],"hideSearch":[1028,"hide-search"],"language":[1537],"siteid":[1],"search":[1040],"primary":[4],"icononly":[4],"autoCompleteOptions":[32]}],[4,"pn-site-selector",{"buttontext":[1537],"heading":[1537],"language":[1537],"i18n":[32]}],[0,"pn-site-selector-item",{"url":[1],"heading":[1],"description":[1],"newwindow":[4]}]]],["p-75a09bb2",[[4,"pn-proxio-productcard"],[0,"pn-proxio-productcard-description",{"heading":[1],"highlight":[1],"description":[1],"list":[1040]}],[0,"pn-proxio-productcard-information",{"label":[1],"information":[16]}],[0,"pn-proxio-productcard-pricelink",{"price":[1],"vatText":[1,"vat-text"],"link":[1],"linktext":[1]}]]],["p-609da67c",[[0,"pn-product-card-info",{"rulle":[1],"paket":[1],"label":[1],"text":[1]}],[0,"pn-product-card-price",{"label":[1],"amount":[1],"currency":[1],"note":[1],"url":[1],"service":[1],"linkid":[1]}],[4,"pn-product-card"]]]]'),e)}));
|
|
1
|
+
import{p as e,H as t,b as a}from"./p-06555615.js";export{s as setNonce}from"./p-06555615.js";import{g as n}from"./p-e1255160.js";var o=()=>{{r(t.prototype)}const a=import.meta.url;const n={};if(a!==""){n.resourcesUrl=new URL(".",a).href}return e(n)};var r=e=>{const t=e.cloneNode;e.cloneNode=function(e){if(this.nodeName==="TEMPLATE"){return t.call(this,e)}const a=t.call(this,false);const n=this.childNodes;if(e){for(let e=0;e<n.length;e++){if(n[e].nodeType!==2){a.appendChild(n[e].cloneNode(true))}}}return a}};o().then((async e=>{await n();return a(JSON.parse('[["p-b765e4a9",[[4,"pn-marketweb-siteheader",{"market":[1537],"language":[1537],"siteid":[1],"environment":[1537],"userToken":[1,"user-token"],"userFullname":[1,"user-fullname"],"userLoggedin":[516,"user-loggedin"],"endpoint":[1],"hideSiteSelector":[1540,"hide-site-selector"],"hideHomeMenuItem":[1540,"hide-home-menu-item"],"hideLanguageSelector":[1540,"hide-language-selector"],"hideSearch":[1540,"hide-search"],"hideLogin":[1540,"hide-login"],"showProfileSelection":[1540,"show-profile-selection"],"showUnifiedLogin":[4,"show-unified-login"],"siteDomainInUrls":[4,"site-domain-in-urls"],"AutocompleteEndpoint":[1,"autocomplete-endpoint"],"sessionForward":[4,"session-forward"],"cache":[4],"searchPlaceholder":[1,"search-placeholder"],"spaMode":[4,"spa-mode"],"checkUserLoggedInStateInterval":[2,"check-user-logged-in-state-interval"],"pageId":[1,"page-id"],"i18n":[32],"gotData":[32],"fetchingData":[32],"homePageLink":[32],"menuItems":[32],"siteDefinition":[32],"search":[32],"siteSelector":[32],"languageSelector":[32],"languageOptions":[32],"loginDialog":[32],"minimizeSearch":[32],"loggedIn":[32]},[[0,"setLanguage","onLanguageSelectorChange"],[0,"loginStateChange","onLoginStateChange"],[9,"resize","handleResize"]],{"language":["onLanguageChange"],"market":["onMarketChange"]}]]],["p-63505736",[[0,"pn-proxio-findprice",{"endpoint":[1025],"language":[1025],"market":[1025],"showMedium":[4,"show-medium"],"showInternational":[4,"show-international"],"maxAbroadKg":[2,"max-abroad-kg"],"weightListName":[1,"weight-list-name"],"cache":[4],"filteredItems":[32],"weight":[32],"weightvalue":[32],"countrycodevalue":[32],"sizecategory":[32],"data":[32]},null,{"market":["setState"],"language":["setState"],"sizecategory":["filterItems"],"weightvalue":["filterItems"],"countrycodevalue":["filterItems"]}]]],["p-4372d10e",[[0,"pn-find-price",{"source":[1],"language":[1025],"market":[1025],"filteredItems":[32],"weight":[32],"weightvalue":[32],"sourceData":[32],"sizecategory":[32]},null,{"market":["setState"],"language":["setState"],"sizecategory":["filterItems"],"weightvalue":["filterItems"]}]]],["p-796ebfee",[[0,"pn-find-service-and-price",{"source":[1],"language":[1025],"market":[1025],"filteredItems":[32],"postagetype":[32],"weight":[32],"weightvalue":[32],"deliveryscope":[32],"sourceData":[32]},null,{"market":["setState"],"language":["setState"],"postagetype":["filterItems"],"deliveryscope":["filterItems"],"weightvalue":["filterItems"]}]]],["p-721598b8",[[4,"pn-product-pricelist",{"source":[1],"language":[1025],"market":[1025],"productid":[1],"filteredItems":[32],"sourceData":[32],"gotData":[32],"loading":[32],"postagetype":[32],"weight":[32],"weightvalue":[32]},null,{"market":["setState"],"language":["setState"],"postagetype":["filterItems"],"weightvalue":["filterItems"]}]]],["p-7b05d7c7",[[0,"pn-proxio-pricegroup",{"endpoint":[1025],"language":[1],"market":[1],"tariffid":[1],"cache":[4],"activeWeightIndex":[32],"data":[32],"i18n":[32]},[[0,"activeWeightIndex","setActiveWeightIndex"],[0,"language","setLanguage"]]]]],["p-f0568315",[[0,"pn-product-pricelist-result",{"item":[1040],"description":[16],"shownitems":[16],"showMeasurement":[4,"show-measurement"],"weightText":[32]},null,{"item":["composeItems"]}]]],["p-e5345c69",[[4,"pn-marketweb-sitefooter",{"market":[1537],"language":[1537],"environment":[1537],"endpoint":[1],"siteDomainInUrls":[4,"site-domain-in-urls"],"cache":[4],"theme":[513],"backgroundcolor":[513],"showSwan":[4,"show-swan"],"siteDefinition":[32],"footerContent":[32],"i18n":[32],"gotData":[32],"fetchingData":[32]},null,{"language":["onLanguageChange"],"market":["onMarketChange"]}]]],["p-42c9386d",[[4,"pn-media-block",{"blockHeight":[1,"block-height"],"imageSrc":[1,"image-src"],"imageSrcSmallScreenFormat":[1,"image-src-small-screen-format"],"imageAltText":[1,"image-alt-text"],"videoSrc":[1,"video-src"],"parallaxScroll":[4,"parallax-scroll"],"showOverlayLayer":[4,"show-overlay-layer"],"customOverlayBackground":[1,"custom-overlay-background"],"animateOverlayBackground":[4,"animate-overlay-background"],"scrollSnapBlock":[4,"scroll-snap-block"],"fixedBackground":[4,"fixed-background"],"blockHeading":[1,"block-heading"],"blockHeadingLevel":[2,"block-heading-level"],"blockPreamble":[1,"block-preamble"],"pnPlayOnScrollObserverOptions":[32],"calculatedBlockHeight":[32],"hasButtonSlot":[32]}]]],["p-5ac23b38",[[0,"pn-multi-row-connected-dropdown",{"dropdownData":[1,"dropdown-data"],"languageCode":[1,"language-code"],"label":[1],"firstDropdownLabel":[1,"first-dropdown-label"],"secondDropdownLabel":[1,"second-dropdown-label"],"dropdownPlaceholder":[1,"dropdown-placeholder"],"addRowText":[1,"add-row-text"],"inputFildLabel":[1,"input-fild-label"],"inputFildPlaceholder":[1,"input-fild-placeholder"],"dateButtonText":[1,"date-button-text"],"datePlaceholder":[1,"date-placeholder"],"dateDaysFromToday":[2,"date-days-from-today"],"allowMultipleRows":[4,"allow-multiple-rows"],"allowMultipleDates":[4,"allow-multiple-dates"],"startDateLabel":[1,"start-date-label"],"endDateLabel":[1,"end-date-label"],"multiDateHelperText":[1,"multi-date-helper-text"],"generateDatesButtonText":[1,"generate-dates-button-text"],"saveDateButtonText":[1,"save-date-button-text"],"noDatesText":[1,"no-dates-text"],"yearsToAddToEndDate":[2,"years-to-add-to-end-date"],"rowCount":[32],"rowData":[32],"formValues":[32]},[[0,"rowValueChange","predefinedValueChange"],[0,"deleteRowEvent","deleteRowEvent"]]]]],["p-781ef432",[[0,"pn-dropdown-with-multi-input-rows",{"dropdownData":[1,"dropdown-data"],"languageCode":[1,"language-code"],"firstDropdownLabel":[1,"first-dropdown-label"],"firstDropdownHelperText":[1,"first-dropdown-helper-text"],"secondDropdownLabel":[1,"second-dropdown-label"],"secondDropdownHelperText":[1,"second-dropdown-helper-text"],"secondDropdownMax":[2,"second-dropdown-max"],"deleteMultipleRowsWarningText":[1,"delete-multiple-rows-warning-text"],"confirmDeleteButtonText":[1,"confirm-delete-button-text"],"abortDeleteButtonText":[1,"abort-delete-button-text"],"fristInputLabel":[1,"frist-input-label"],"fristInputPlaceholder":[1,"frist-input-placeholder"],"firstInputMin":[2,"first-input-min"],"firstInputMax":[2,"first-input-max"],"firstInputWarning":[2,"first-input-warning"],"firstInputWarningText":[1,"first-input-warning-text"],"firstInputLowErrorText":[1,"first-input-low-error-text"],"firstInputHighErrorText":[1,"first-input-high-error-text"],"secondInputLabel":[1,"second-input-label"],"secondInputPlaceholder":[1,"second-input-placeholder"],"secondInputMin":[2,"second-input-min"],"secondInputMax":[2,"second-input-max"],"secondInputWarning":[2,"second-input-warning"],"secondInputWarningText":[1,"second-input-warning-text"],"secondInputLowErrorText":[1,"second-input-low-error-text"],"secondInputHighErrorText":[1,"second-input-high-error-text"],"dateLabel":[1,"date-label"],"datePlaceholder":[1,"date-placeholder"],"dateDaysFromToday":[2,"date-days-from-today"],"yearsToAddToEndDate":[2,"years-to-add-to-end-date"],"sumFieldLabel":[1,"sum-field-label"],"addRowText":[1,"add-row-text"],"elementHelperText":[1,"element-helper-text"],"dropdownDataRoot":[32],"secondDropdownArr":[32],"rowCount":[32],"rowData":[32],"formValues":[32],"firstValidDateString":[32],"lastValidDateString":[32],"rowSum":[32],"minRowCount":[32],"showDelteConfirm":[32]},[[0,"rowValueChange","predefinedValueChange"],[0,"firstInputChange","predefinedValueChange"],[0,"secondInputChange","predefinedValueChange"],[0,"deleteRowEvent","deleteRowEvent"]]]]],["p-acbe60df",[[0,"pn-address-autofill",{"market":[1537],"environment":[1537],"endpoint":[1],"cache":[4],"countryCode":[1,"country-code"],"postalCodeProps":[1,"postal-code-props"],"cityProps":[1,"city-props"],"streetAddressProps":[1,"street-address-props"],"streetNumberProps":[1,"street-number-props"],"streetAdressArr":[32],"streetNumberArr":[32],"city":[32],"postalCode":[32],"streetAddress":[32],"streetNumber":[32],"fullAddress":[32]}]]],["p-e9501c6f",[[4,"pn-dropdown-choice-adds-row",{"dropdownData":[1,"dropdown-data"],"languageCode":[1,"language-code"],"addRowDropdownName":[1,"add-row-dropdown-name"],"addRowDropdownPlaceholder":[1,"add-row-dropdown-placeholder"],"addRowDropdownLabel":[1,"add-row-dropdown-label"],"rowNameLabel":[1,"row-name-label"],"rowHasDropdown":[4,"row-has-dropdown"],"rowDropdownLabel":[1,"row-dropdown-label"],"rowDropdownPlaceholder":[1,"row-dropdown-placeholder"],"rowInputLabel":[1,"row-input-label"],"rowDeleteButtonText":[1,"row-delete-button-text"],"totalInputLimit":[2,"total-input-limit"],"inputLimitWarning":[1,"input-limit-warning"],"nextRowIndex":[32],"rowSelectDropdownArr":[32],"columnCount":[32],"showWarning":[32],"formValue":[32]},null,{"dropdownData":["dropdownDataWatcher"]}]]],["p-391970af",[[0,"pn-multiple-input",{"label":[1],"placeholder":[1],"addRowButtonText":[1,"add-row-button-text"],"rowData":[32]}]]],["p-ebaeee5e",[[0,"pn-parcel-tracker",{"formActionUrl":[1,"form-action-url"],"heading":[1],"buttonLabel":[1,"button-label"],"locale":[1],"placeholder":[1],"inputName":[1,"input-name"],"currentWidth":[32]},[[9,"resize","handleViewportSizeChange"]]]]],["p-95c10b7e",[[0,"pn-pex-pricefinder",{"language":[1],"currency":[1],"apiUrl":[1,"api-url"],"i18n":[32],"fromzip":[32],"tozip":[32],"weight":[32],"when":[32],"response":[32]},[[0,"language","setLanguage"]]]]],["p-40538914",[[0,"pn-share",{"link":[1],"language":[1537],"i18n":[32]},null,{"language":["onLanguageChange"]}]]],["p-34689c97",[[4,"pn-stats-info",{"heading":[1],"dataArray":[1,"data-array"],"backgroundUrl":[1,"background-url"],"myParsedArray":[32]},null,{"dataArray":["parseMyArrayProp"]}]]],["p-68aa55f7",[[4,"pn-animated-tile",{"toggled":[32],"transitionClassName":[32],"animateIcon":[32]},null,{"toggled":["onToggledHandler"]}]]],["p-586a1e3c",[[0,"pn-app-banner",{"appName":[1,"app-name"],"appDescription":[1,"app-description"],"ctaText":[1,"cta-text"],"appleStoreLink":[1,"apple-store-link"],"googleStoreLink":[1,"google-store-link"],"isClosed":[32],"storeLink":[32],"isLocalStorageAvailable":[32]}]]],["p-16f70311",[[4,"pn-bonus-progressbar",{"icon":[1],"heading":[1],"sumtext":[513],"theme":[513],"bonuspercentage":[1],"currency":[513],"value":[1538],"min":[1538],"max":[1538],"valuepercentage":[32],"progresspercentage":[32],"levelValues":[32],"currentLevelAdjustedValue":[32]},null,{"currentLevelAdjustedValue":["setValuePercentage"],"value":["setValuePercentage"],"min":["setValuePercentage"],"max":["setValuePercentage"]}]]],["p-a8220c88",[[0,"pn-bonus-progressbar-level",{"current":[516],"value":[1538],"bonuspercentage":[1537],"visualpercentage":[1538],"percentage":[32],"max":[32],"min":[32],"currency":[32]}]]],["p-56bd346e",[[0,"pn-breakpoints",{"breakPointClass":[1,"break-point-class"],"currentWidth":[32]},[[9,"resize","handleViewportSizeChange"]]]]],["p-1317587f",[[0,"pn-chart",{"labels":[1],"dataSets":[1,"data-sets"],"dataChartType":[8,"data-chart-type"],"myChartCtxRef":[32]},null,{"dataSets":["dataChangeHandler"],"labels":["labelsChangeHandler"]}]]],["p-190c671b",[[4,"pn-charts-card",{"header":[1],"highlight":[1],"preamble":[1],"label":[1],"source":[1],"sourceUrl":[1,"source-url"],"ctaLinkText":[1,"cta-link-text"],"openInNewWindow":[4,"open-in-new-window"]}]]],["p-69a56d5c",[[4,"pn-cta-block",{"heading":[1],"bodyText":[1,"body-text"],"pnBackgroundColor":[1,"pn-background-color"],"isLarge":[4,"is-large"],"isCentered":[4,"is-centered"],"isSmall":[4,"is-small"],"contentTop":[4,"content-top"]}]]],["p-95e054fd",[[4,"pn-customernumber-selector",{"language":[1537],"open":[1540],"heading":[1],"description":[1],"i18n":[32]}]]],["p-09b9cc06",[[4,"pn-customernumber-selector-option",{"heading":[1],"description":[1],"url":[1]}]]],["p-d8a57eba",[[0,"pn-date-and-time",{"languageCode":[1,"language-code"],"dateAndTimeLabel":[1,"date-and-time-label"],"dateDaysFromToday":[2,"date-days-from-today"],"validTimeRangeMinutes":[2,"valid-time-range-minutes"],"errorMessage":[1,"error-message"],"dateHelperText":[1,"date-helper-text"],"timeHelperText":[1,"time-helper-text"],"disableWeekends":[4,"disable-weekends"],"datePlacehodler":[1,"date-placehodler"],"language":[32],"hourArr":[32],"minuteArr":[32],"formValue":[32],"invalidTimespan":[32],"selectedDate":[32],"selectedFromHour":[32],"selectedFromMin":[32],"selectedToHour":[32],"selectedToMin":[32],"firstValidDateString":[32],"lastValidDateString":[32]}]]],["p-fbe70284",[[4,"pn-hero-block-international",{"heading":[1],"subHeading":[1,"sub-heading"],"preamble":[1],"animateLogo":[4,"animate-logo"],"showSideLoader":[4,"show-side-loader"],"centeredLayout":[4,"centered-layout"]}]]],["p-e42f0fbe",[[0,"pn-line-shape"]]],["p-ade7ffcf",[[4,"pn-link-list",{"heading":[1],"label":[1],"preamble":[1],"url":[1],"showMoreLabel":[1,"show-more-label"],"showMoreUrl":[1,"show-more-url"]}]]],["p-c25acf85",[[0,"pn-marketweb-icon",{"symbol":[1],"small":[4],"color":[1]}]]],["p-2044eddc",[[1,"pn-marketweb-search",{"disabled":[4],"placeholder":[1],"inputid":[1],"name":[1],"autocomplete":[1],"list":[1],"value":[1],"label":[1],"loading":[4],"button":[1],"light":[4],"suggestionObserver":[32],"hasClonedInput":[32],"listSuggestion":[32]},[[0,"input","inputHandler"]]]]],["p-c0fd8e61",[[4,"pn-product-tile"]]],["p-90ba1d8e",[[4,"pn-profile-modal",{"heading":[1],"continueCtaText":[1,"continue-cta-text"],"choosenCompanyText":[1,"choosen-company-text"],"toText":[1,"to-text"],"chooseCustomerNumberText":[1,"choose-customer-number-text"],"isLoading":[32]},[[0,"urlSelected","onUrlSelected"]]]]],["p-c9f21ea3",[[4,"pn-profile-modal-customernumber",{"url":[513],"customernumber":[513],"selected":[516]}]]],["p-f62879f6",[[4,"pn-profile-modal-profile",{"heading":[513],"description":[513],"url":[513],"selected":[1028],"showCustomerNumbers":[516,"show-customer-numbers"],"pleaseSelectText":[513,"please-select-text"],"visible":[1540],"identifier":[32]}]]],["p-931d3a9b",[[4,"pn-profile-modal-type",{"typeid":[513],"name":[1025],"selected":[1028],"selectedprofile":[1025]},null,{"selected":["onSelectedChange"]}]]],["p-74203d3e",[[4,"pn-profile-selector",{"language":[1537],"returnUrl":[1,"return-url"],"heading":[1],"i18n":[32],"isLoading":[32],"numberOfProfiles":[32]}]]],["p-f2d0d0cc",[[0,"pn-profile-selector-option",{"heading":[1],"description":[1],"url":[1]}]]],["p-5a467ca6",[[4,"pn-quick-cta",{"heading":[1],"preamble":[1]}]]],["p-e4c7aaec",[[4,"pn-quote-card",{"quote":[1],"name":[1],"occupation":[1]}]]],["p-67d862ac",[[4,"pn-sidenav",{"language":[1],"navLabel":[1,"nav-label"],"i18n":[32]},[[0,"language","setLanguage"],[0,"openSubMenuLevelChange","onOpenSubMenuLevelChange"]]]]],["p-1535a09f",[[4,"pn-sidenav-level",{"level":[32],"levelId":[32],"isOpen":[32],"parentName":[32],"parentHref":[32],"parentLinkId":[32],"alignment":[32]},null,{"isOpen":["onOpen"]}]]],["p-6e9875e5",[[4,"pn-sidenav-link",{"name":[1],"href":[1],"target":[1],"linkid":[1],"icon":[1],"current":[4],"levelId":[32],"open":[32],"hasChildren":[32]}]]],["p-7021985c",[[4,"pn-sidenav-togglebutton",{"label":[1],"i18n":[32]}]]],["p-0a522476",[[4,"pn-spotlight",{"heading":[1],"preamble":[1],"isDynamic":[4,"is-dynamic"],"addDynamic":[32]}]]],["p-73db2c9c",[[4,"pn-teaser-card",{"text":[1],"heading":[1],"label":[1],"dataCardColor":[513,"data-card-color"],"dataCardAlignment":[513,"data-card-alignment"],"hasCtaSlotContent":[32],"hasIllustrationSlot":[32]}]]],["p-69ee0033",[[4,"pn-usp-promoter",{"heading":[1],"headingExtension":[1,"heading-extension"],"bodyText":[1,"body-text"],"backgroundGradient":[1,"background-gradient"],"fullWidth":[4,"full-width"],"rightAlign":[4,"right-align"],"hideMobileImage":[4,"hide-mobile-image"]}]]],["p-9776a1c5",[[0,"pn-proxio-findprice-result",{"item":[1040],"activeweight":[1026],"shownitems":[16],"Usp1":[1,"usp-1"],"Usp2":[1,"usp-2"],"Usp3":[1,"usp-3"],"description":[16],"showMeasurement":[4,"show-measurement"],"showInternational":[4,"show-international"],"selectedCountrycode":[1,"selected-countrycode"],"market":[1],"language":[1025],"weightText":[32],"linkId":[32],"shopLabel":[32],"shopUrl":[32],"shopId":[32],"i18n":[32]},null,{"item":["composeItems"],"activeweight":["getPriceString","getProductLink"]}]]],["p-2f779414",[[0,"pn-find-service-and-price-result",{"item":[1040],"shownitems":[16],"weightText":[32]},null,{"item":["composeItems"]}]]],["p-85d57c9d",[[0,"pn-multi-row-connected-dropdown-row",{"dropdownData":[1,"dropdown-data"],"languageCode":[1,"language-code"],"label":[1],"firstDropdownLabel":[1,"first-dropdown-label"],"secondDropdownLabel":[1,"second-dropdown-label"],"dropdownPlaceholder":[1,"dropdown-placeholder"],"addRowText":[1,"add-row-text"],"inputFildLabel":[1,"input-fild-label"],"inputFildPlaceholder":[1,"input-fild-placeholder"],"dateButtonText":[1,"date-button-text"],"datePlaceholder":[1,"date-placeholder"],"dateDaysFromToday":[2,"date-days-from-today"],"allowMultipleDates":[4,"allow-multiple-dates"],"startDateLabel":[1,"start-date-label"],"endDateLabel":[1,"end-date-label"],"multiDateHelperText":[1,"multi-date-helper-text"],"generateDatesButtonText":[1,"generate-dates-button-text"],"saveDateButtonText":[1,"save-date-button-text"],"noDatesText":[1,"no-dates-text"],"index":[2],"predefinedValue":[1,"predefined-value"],"yearsToAddToEndDate":[2,"years-to-add-to-end-date"],"buttonsArray":[32],"firstDropdownArr":[32],"secondDropdownArr":[32],"firstDropdownClass":[32],"secondDropdownClass":[32],"firstValidDateString":[32],"lastValidDateString":[32],"firstDropdownPlaceholder":[32],"secondDropdownPlaceholder":[32],"starDateValue":[32],"endDateValue":[32],"generatedDatesArr":[32],"selectedButtonValue":[32],"inputFieldValue":[32],"dateValue":[32],"daysArr":[32]},null,{"predefinedValue":["applyPredefinedValue"]}]]],["p-c696bedf",[[0,"pn-play-on-scroll",{"videoSrc":[1,"video-src"],"observerOptions":[16],"showOverlay":[4,"show-overlay"],"videoId":[32],"isManuallyPaused":[32],"isPaused":[32]}]]],["p-d40ff187",[[0,"pn-dropdown-with-multi-input-rows-row",{"languageCode":[1,"language-code"],"fristInputPlaceholder":[1,"frist-input-placeholder"],"firstInputMin":[2,"first-input-min"],"firstInputMax":[2,"first-input-max"],"firstInputWarning":[2,"first-input-warning"],"firstInputWarningText":[1,"first-input-warning-text"],"firstInputLowErrorText":[1,"first-input-low-error-text"],"firstInputHighErrorText":[1,"first-input-high-error-text"],"secondInputPlaceholder":[1,"second-input-placeholder"],"secondInputMin":[2,"second-input-min"],"secondInputMax":[2,"second-input-max"],"secondInputWarning":[2,"second-input-warning"],"secondInputWarningText":[1,"second-input-warning-text"],"secondInputLowErrorText":[1,"second-input-low-error-text"],"secondInputHighErrorText":[1,"second-input-high-error-text"],"dateLabel":[1,"date-label"],"datePlaceholder":[1,"date-placeholder"],"firstValidDate":[1,"first-valid-date"],"lastValidDate":[1,"last-valid-date"],"predefinedValue":[1,"predefined-value"],"rowIndex":[2,"row-index"],"minRowCount":[2,"min-row-count"],"showFirstInputWarning":[32],"showFirstInputLowError":[32],"showFirstInputHighError":[32],"showSecondInputWarning":[32],"showSecondInputLowError":[32],"showSecondInputHighError":[32],"firstInputValue":[32],"secondInputValue":[32],"dateValue":[32]},null,{"predefinedValue":["applyPredefinedValue"]}]]],["p-81b3e038",[[4,"pn-share-item",{"link":[1],"text":[1]}]]],["p-1bd5fa26",[[0,"pn-stats-info-data",{"format":[1],"formatStyle":[1,"format-style"],"startValue":[2,"start-value"],"data":[2],"unit":[1],"preamble":[1],"duration":[2],"index":[2],"hasBeenShown":[32],"compId":[32]},null,{"hasBeenShown":["watchStateHandlder"]}]]],["p-7b598d81",[[0,"pn-find-price-result",{"item":[1040],"shownitems":[16],"Usp1":[1,"usp-1"],"Usp2":[1,"usp-2"],"Usp3":[1,"usp-3"],"description":[16],"showMeasurement":[4,"show-measurement"],"weightText":[32],"linkId":[32],"shopLabel":[32],"shopUrl":[32],"shopId":[32]},null,{"item":["composeItems"]}]]],["p-370829c6",[[1,"pn-filter-checkbox",{"value":[520],"name":[1],"checkboxid":[1],"disabled":[4],"checked":[4],"indeterminate":[1028]},[[0,"change","handlechange"]]]]],["p-c224d7c4",[[4,"pn-mainnav-link",{"name":[1],"href":[1],"target":[1],"linkid":[1],"levelId":[32],"open":[32],"hasChildren":[32]}]]],["p-78fbc88c",[[4,"pn-site-footer",{"url":[1],"linktitle":[1],"theme":[513]}],[4,"pn-site-footer-col",{"theme":[513]}],[0,"pn-swan",{"licenseNumber":[1,"license-number"],"language":[1537],"linkTo":[1,"link-to"],"i18n":[32]},null,{"language":["onLanguageChange"]}]]],["p-9be27d72",[[4,"pn-choice-button",{"value":[520],"name":[1],"choiceid":[1],"type":[1],"disabled":[4],"checked":[4],"indeterminate":[1028]},[[0,"change","handlechange"]]]]],["p-1217d60f",[[0,"pn-product-tile-info",{"label":[1],"text":[1],"icon":[1]}],[0,"pn-product-tile-price",{"label":[1],"amount":[1],"currency":[1],"url":[1]}]]],["p-828449da",[[4,"pn-scroll",{"observerOptions":[16],"behaviourClasses":[1,"behaviour-classes"],"transitionDurationSeconds":[2,"transition-duration-seconds"],"shouldLoop":[4,"should-loop"],"intersectFunc":[16],"notIntersectFunc":[16],"compId":[32]}],[0,"pn-video-overlay",{"language":[1],"isPaused":[4,"is-paused"],"showOverlay":[4,"show-overlay"],"i18n":[32]},null,{"language":["onLanguageChange"]}]]],["p-b2dcce7c",[[0,"pn-marketweb-siteheader-login-linklist",{"heading":[1],"links":[16],"idNamespace":[1,"id-namespace"],"showUnifiedLogin":[4,"show-unified-login"]}]]],["p-1578e02e",[[4,"pn-titletag",{"icon":[1],"color":[1537]}]]],["p-9998c29d",[[0,"pn-marketweb-input",{"disabled":[4],"error":[1],"invalid":[4],"helpertext":[1],"label":[1],"placeholder":[1],"inputid":[1],"name":[1],"required":[4],"type":[1025],"autocomplete":[1],"valid":[4],"value":[1],"maxlength":[1],"min":[1],"max":[1],"step":[1],"pattern":[1],"showText":[32]}]]],["p-9a7abcee",[[0,"pn-marketweb-siteheader-unified-login",{"loggedIn":[4,"logged-in"],"myPageLabel":[1,"my-page-label"],"myPageUrl":[1,"my-page-url"],"logInLabel":[1,"log-in-label"]}],[0,"pn-marketweb-siteheader-login-links",{"loginDialog":[1040],"idNamespace":[1,"id-namespace"],"loggedin":[516],"username":[1],"showUnifiedLogin":[4,"show-unified-login"]},null,{"loginDialog":["init"]}],[0,"pn-marketweb-siteheader-login-profileselection",{"loginDialog":[1040],"endpoint":[1],"loggedin":[4],"idNamespace":[1,"id-namespace"],"heading":[1],"i18n":[16],"currentProfile":[1040],"profileoptions":[1040],"user":[32],"logoutLink":[32],"userName":[32],"userEmail":[32]}],[0,"pn-marketweb-siteheader-login-button",{"label":[1]}],[0,"pn-marketweb-siteheader-login-mypage-button",{"label":[1],"myPageUrl":[1,"my-page-url"]}]]],["p-4ea1409d",[[0,"pn-marketweb-siteheader-login",{"endpoint":[1],"token":[1],"i18n":[16],"siteUrl":[1,"site-url"],"emitEvents":[4,"emit-events"],"loginDialog":[1040],"fullname":[1],"loggedin":[4],"showProfileSelection":[1028,"show-profile-selection"],"showUnifiedLogin":[4,"show-unified-login"],"checkUserLoggedInStateInterval":[2,"check-user-logged-in-state-interval"],"environment":[1],"loginLinks":[32],"toggleButtonText":[32],"username":[32]},null,{"i18n":["init"],"loginDialog":["init"]}],[4,"pn-mainnav-level",{"label":[1537],"level":[32],"levelId":[32],"isOpen":[32],"parentName":[32],"parentHref":[32],"parentLinkId":[32],"listCount":[32],"alignment":[32]},null,{"label":["setState"],"isOpen":["onOpen"]}],[4,"pn-language-selector",{"value":[1537],"selectedLanguageName":[32],"options":[32],"i18n":[32]},null,{"value":["setSelectedLanguageName","setTranslations","onValueChange"]}],[0,"pn-language-selector-option",{"name":[1],"code":[1],"url":[1],"selected":[4],"currentLanguage":[1,"current-language"]}],[4,"pn-mainnav",{"market":[1],"language":[1],"navigationId":[1,"navigation-id"],"openMenu":[1028,"open-menu"],"navLabel":[1,"nav-label"]},[[0,"language","setLanguage"],[0,"market","setMarket"],[0,"menuLanguageChange","onLanguageChange"],[0,"setmenuopenstate","setMenuOpenState"],[0,"openMenuLevelChange","onOpenMenuLevelChange"]]],[4,"pn-mainnav-list",{"heading":[1],"linkCount":[32]}],[0,"pn-marketweb-siteheader-search",{"i18n":[8,"i-1-8n"],"showOnlyLink":[1028,"show-only-link"],"hideSearch":[1028,"hide-search"],"language":[1537],"siteid":[1],"search":[1040],"primary":[4],"icononly":[4],"autoCompleteOptions":[32]}],[4,"pn-site-selector",{"buttontext":[1537],"heading":[1537],"language":[1537],"i18n":[32]}],[0,"pn-site-selector-item",{"url":[1],"heading":[1],"description":[1],"newwindow":[4]}]]],["p-75a09bb2",[[4,"pn-proxio-productcard"],[0,"pn-proxio-productcard-description",{"heading":[1],"highlight":[1],"description":[1],"list":[1040]}],[0,"pn-proxio-productcard-information",{"label":[1],"information":[16]}],[0,"pn-proxio-productcard-pricelink",{"price":[1],"vatText":[1,"vat-text"],"link":[1],"linktext":[1]}]]],["p-609da67c",[[0,"pn-product-card-info",{"rulle":[1],"paket":[1],"label":[1],"text":[1]}],[0,"pn-product-card-price",{"label":[1],"amount":[1],"currency":[1],"note":[1],"url":[1],"service":[1],"linkid":[1]}],[4,"pn-product-card"]]]]'),e)}));
|
|
2
2
|
//# sourceMappingURL=pn-market-web-components.esm.js.map
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as e,g as i,h as o}from"./p-06555615.js";const a="pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-media-block .media-block .media-block__block-container{display:grid;overflow:hidden}pn-media-block .media-block .media-block__media-container,pn-media-block .media-block .media-block__content-container,pn-media-block .media-block .media-block__overlay-filter{grid-area:1/1;width:100%;position:relative}pn-media-block .media-block .media-block__media-container{height:100vh;overflow:hidden;position:relative}pn-media-block .media-block .media-block__media-container img,pn-media-block .media-block .media-block__media-container video{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);object-fit:cover;pointer-events:none;max-width:100%;max-height:none;height:100%;width:100%;pointer-events:none}pn-media-block .media-block .media-block__media-container pn-play-on-scroll{width:100%;height:100%}pn-media-block .media-block .media-block__media-container .scroll-wrapper{width:100%;height:100%}pn-media-block .media-block .media-block__media-container [slot=scroll-affected]{width:100%;height:100%;display:flex}pn-media-block .media-block .media-block__media-container .scroll-wrapper,pn-media-block .media-block .media-block__media-container .scroll-affected{width:100%;height:100%;display:flex}pn-media-block .media-block .media-block__media-container video{width:100%;height:100%}pn-media-block .media-block .media-block__overlay-filter{z-index:2}pn-media-block .media-block .media-block__content-container{z-index:3;display:flex;align-items:center;justify-content:center;transition:opacity 1s;flex-direction:column;margin:0 auto;padding:3.4rem 0;width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media (min-width: 576px){pn-media-block .media-block .media-block__content-container{max-width:540px}}@media (min-width: 768px){pn-media-block .media-block .media-block__content-container{max-width:720px}}@media (min-width: 992px){pn-media-block .media-block .media-block__content-container{max-width:960px}}@media (min-width: 1200px){pn-media-block .media-block .media-block__content-container{max-width:1140px}}@media (min-width: 1640px){pn-media-block .media-block .media-block__content-container{max-width:1440px}}@media screen and (min-width: 992px){pn-media-block .media-block .media-block__content-container{padding:6.4rem 0}}@media screen and (min-width: 1200px){pn-media-block .media-block .media-block__content-container{padding:7.2rem 0}}@media screen and (min-width: 1640px){pn-media-block .media-block .media-block__content-container{padding:8rem 0}}pn-media-block .media-block .media-block__content-container .media-block__block-heading{max-width:100rem;text-wrap:balance;color:white;font-size:3.2rem;text-align:center;font-weight:700;line-height:1.1;margin-bottom:3rem}@media screen and (min-width: 576px){pn-media-block .media-block .media-block__content-container .media-block__block-heading{font-size:4rem}}@media screen and (min-width: 768px){pn-media-block .media-block .media-block__content-container .media-block__block-heading{font-size:4.8rem}}@media screen and (min-width: 992px){pn-media-block .media-block .media-block__content-container .media-block__block-heading{font-size:5.6rem}}@media screen and (min-width: 1200px){pn-media-block .media-block .media-block__content-container .media-block__block-heading{font-size:8rem}}@media screen and (min-width: 1640px){pn-media-block .media-block .media-block__content-container .media-block__block-heading{font-size:8.8rem}}pn-media-block .media-block .media-block__content-container .media-block__preamble{max-width:80rem;max-width:80ch;text-wrap:balance;display:flex;color:white;font-size:1.8rem;text-align:center;font-weight:300}@media screen and (min-width: 576px){pn-media-block .media-block .media-block__content-container .media-block__preamble{font-size:2rem}}@media screen and (min-width: 1200px){pn-media-block .media-block .media-block__content-container .media-block__preamble{font-size:2.4rem}}@media screen and (min-width: 1640px){pn-media-block .media-block .media-block__content-container .media-block__preamble{font-weight:500}}pn-media-block .media-block .media-block__content-container .media-block__cta-link{margin-top:3rem}pn-media-block .media-block--height-100svh{min-height:100vh}@supports (height: 100svh){pn-media-block .media-block--height-100svh{height:100svh}}pn-media-block .media-block--height-100svh .media-block__block-container{height:100vh}@supports (max-height: 100svh){pn-media-block .media-block--height-100svh .media-block__block-container{max-height:100svh}}pn-media-block .media-block--height-100svh .media-block__block-container .media-block__media-container,pn-media-block .media-block--height-100svh .media-block__block-container .media-block__content-container,pn-media-block .media-block--height-100svh .media-block__block-container .media-block__overlay-filter{height:100vh}@supports (max-height: 100svh){pn-media-block .media-block--height-100svh .media-block__block-container .media-block__media-container,pn-media-block .media-block--height-100svh .media-block__block-container .media-block__content-container,pn-media-block .media-block--height-100svh .media-block__block-container .media-block__overlay-filter{max-height:100svh}}pn-media-block .media-block--height-100svh .media-block__block-container .media-block__media-container picture{height:100vh}@supports (max-height: 100svh){pn-media-block .media-block--height-100svh .media-block__block-container .media-block__media-container picture{max-height:100svh}}pn-media-block .media-block--height-65svh{min-height:65svh;overflow:auto}pn-media-block .media-block--height-65svh .media-block__block-container{height:65vh}@supports (max-height: 100svh){pn-media-block .media-block--height-65svh .media-block__block-container{max-height:65svh}}pn-media-block .media-block--height-65svh .media-block__block-container .media-block__media-container,pn-media-block .media-block--height-65svh .media-block__block-container .media-block__content-container,pn-media-block .media-block--height-65svh .media-block__block-container .media-block__overlay-filter{height:65vh}@supports (max-height: 100svh){pn-media-block .media-block--height-65svh .media-block__block-container .media-block__media-container,pn-media-block .media-block--height-65svh .media-block__block-container .media-block__content-container,pn-media-block .media-block--height-65svh .media-block__block-container .media-block__overlay-filter{max-height:65svh}}pn-media-block .media-block--height-65svh .media-block__media-container img{max-height:none !important;height:auto !important}pn-media-block .media-block--height-dynamic{height:auto;overflow:auto}pn-media-block .media-block--height-dynamic .media-block__block-container{height:auto;max-height:none}pn-media-block .media-block--height-dynamic .media-block__block-container .media-block__media-container,pn-media-block .media-block--height-dynamic .media-block__block-container .media-block__content-container,pn-media-block .media-block--height-dynamic .media-block__block-container .media-block__overlay-filter{height:auto;max-height:none}pn-media-block .media-block--with-overlay .media-block__block-container .media-block__overlay-filter{z-index:2;background:radial-gradient(circle, rgba(13, 35, 75, 0.68) 7%, rgba(13, 35, 75, 0) 80%)}pn-media-block .media-block--fixed-background .media-block__block-container .media-block__media-container,pn-media-block .media-block--fixed-background .media-block__block-container .media-block__overlay-filter{position:relative;overflow:hidden;top:0;width:100%;display:flex !important;clip-path:inset(0)}pn-media-block .media-block--fixed-background .media-block__block-container .media-block__media-container picture{position:absolute;top:0;width:100%;display:flex !important;clip-path:inset(0);height:100%}pn-media-block .media-block--fixed-background .media-block__block-container .media-block__media-container picture img{position:fixed;width:100%;height:100%;object-fit:cover;z-index:1}pn-media-block .media-block--video .media-block__content-container{max-width:80%}pn-media-block .media-block--animate-overlay-background .media-block__overlay-filter{background-size:200% 200% !important;animation:overlayBackgroundAnimation 20s ease infinite}@keyframes overlayBackgroundAnimation{0%{background-position:100% 100%}50%{background-position:50% 60%}100%{background-position:100% 100%}}pn-media-block .media-block--margin-bottom{margin-bottom:3.2rem}@media screen and (min-width: 768px){pn-media-block .media-block--margin-bottom{margin-bottom:4rem}}@media screen and (min-width: 992px){pn-media-block .media-block--margin-bottom{margin-bottom:5.6rem}}@media screen and (min-width: 1200px){pn-media-block .media-block--margin-bottom{margin-bottom:7.2rem}}";const n=a;const t=class{constructor(i){e(this,i);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 block(){return i(this)}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}observerScroll;observerSnap;componentWillLoad(){this.hasButtonSlot=!!this.block.querySelector('[slot="cta-button"]')}async componentDidLoad(){const e=document.getElementById("scroll-trigger");this.calculatedBlockHeight=this.block.offsetHeight;const i=this.block.querySelector("#mediaBlockOverlay");if(this.customOverlayBackground!=null||this.customOverlayBackground!="undefined"){i.style.background=`${this.customOverlayBackground}`}if(this.parallaxScroll){this.observerScroll=new IntersectionObserver((e=>{e.forEach((e=>{if(e.isIntersecting){window.addEventListener("scroll",this.handleScroll)}else{window.removeEventListener("scroll",this.handleScroll)}}))}),{rootMargin:`0px 0px`});this.observerScroll.observe(e)}if(this.scrollSnapBlock){this.observerSnap=new IntersectionObserver((e=>{e.forEach((e=>{if(e.isIntersecting){if(this.block instanceof HTMLElement){setTimeout((()=>{this.block.scrollIntoView({behavior:"smooth",block:"start"})}),1e3)}else{console.error("this.block is not a valid HTMLElement")}}}))}),{root:document,rootMargin:"100px 0px 100px 0px",threshold:0});this.observerSnap.observe(e)}}disconnectedCallback(){if(this.observerScroll){this.observerScroll.disconnect()}if(this.observerSnap){this.observerSnap.disconnect()}window.removeEventListener("scroll",this.handleScroll)}handleScroll=()=>{const e=this.block.firstElementChild;const i=this.block.querySelector("#scroll-trigger");const o=this.block.querySelector("#overlayed-button-pause-video");const a=i.getBoundingClientRect().top;const n=e.offsetHeight;const t=n-a;const c=.3;const d=.2;const l=this.block.querySelector(".media-block__media-container");const m=this.block.querySelector(".media-block__content-container");if(l!=null){l.style.transform=`translate(0, ${t*(.1+d)}px)`;if(o!=null){o.style.transform=`translate(0, ${-t*(.3+d)}px)`}}if(m){m.style.transform=`translate(0, ${t*(.5+c)}px)`;const e=Math.max(0,1-t/600);m.style.opacity=`${e}`}};render(){const{showOverlayLayer:e,fixedBackground:i,blockHeight:a,scrollSnapBlock:n,blockHeadingLevelChecked:t,hasButtonSlot:c,hasVideo:d,hasImage:l,animateOverlayBackground:m}=this;const b=`h${t??2}`;const h=d;const r=l;const k=["media-block",a?`media-block--height-${a}`:"",e?"media-block--with-overlay":"",m?`media-block--animate-overlay-background`:"",h?"media-block--video":"",n?"scroll-snap":"no-scroll-snap",i?"media-block--fixed-background":""].join(" ");const s={root:this.blockHeight==="100svh"?this.block:null,threshold:[0,.5,1]};return o("div",{key:"ecced5b0bf6d2a859e77c79a10e6691b67dac996",class:k},o("div",{key:"49b925b7e2f0726fdde6cc5f37aeecdd542d1579",class:"media-block__block-container"},o("div",{key:"496847f2fa31bc56d51bc2fc57d76f90f91e43de",class:"media-block__media-container"},h?o("pn-play-on-scroll",{"show-overlay":this.showOverlayLayer,observerOptions:s,"video-src":this.videoSrc}):r?o("picture",null,o("source",{media:"(min-width: 1400px)",srcSet:this.imageSrc}),o("source",{media:"(min-width: 1224px)",srcSet:this.imageSrc}),o("source",{media:"(min-width: 1140px)",srcSet:this.imageSrc}),o("source",{media:"(min-width: 1023px)",srcSet:this.imageSrcSmallScreenFormat&&this.imageSrcSmallScreenFormat!=="undefined"?this.imageSrcSmallScreenFormat:this.imageSrc}),o("source",{media:"(min-width: 768px)",srcSet:this.imageSrcSmallScreenFormat&&this.imageSrcSmallScreenFormat!=="undefined"?this.imageSrcSmallScreenFormat:this.imageSrc}),o("source",{media:"(min-width: 500px)",srcSet:this.imageSrcSmallScreenFormat&&this.imageSrcSmallScreenFormat!=="undefined"?this.imageSrcSmallScreenFormat:this.imageSrc}),o("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),!h&&o("div",{key:"2738b9052d0d5d66330b5ba6abfe65eee1a5a6d2",class:"media-block__overlay-filter",id:"mediaBlockOverlay"}),(this.blockHeading||this.blockPreamble)&&o("div",{key:"199f4a644a1f19f6165b7426de824dc82ae60dd4",class:"media-block__content-container"},this.blockHeading&&o(b,{key:"bf840616f0a52383d6fba1d183a08fa5abf2cb6e",class:"media-block__block-heading"},this.blockHeading),this.blockPreamble&&o("p",{key:"7040983d8f422af63452d6ed04d026829507c8eb",class:"media-block__preamble"},this.blockPreamble),c&&o("div",{key:"6e3440cf418fa5196926aefdd76465c8e0ece2c2",class:"media-block__cta-link"},o("slot",{key:"15b22fe51024c91a7073aa6ae75350d0f9068d6a",name:"cta-button"})))),o("div",{key:"7f670bd4220934049a3b231bd4efc8b2b5430d1e",id:"scroll-trigger"}))}};t.style=n;export{t as pn_media_block};
|
|
2
|
-
//# sourceMappingURL=p-c5856c0b.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["pnMediaBlockCss","PnMediaBlockStyle0","PnmediaBlock","undefined","root","document","threshold","rootMargin","blockHeadingLevelChecked","this","blockHeading","console","warn","blockHeadingLevel","hasVideo","videoSrc","hasImage","imageSrc","observerScroll","observerSnap","componentWillLoad","hasButtonSlot","block","querySelector","componentDidLoad","scrollTrigger","getElementById","calculatedBlockHeight","offsetHeight","overlayElement","customOverlayBackground","style","background","parallaxScroll","IntersectionObserver","entries","forEach","entry","isIntersecting","window","addEventListener","handleScroll","removeEventListener","observe","scrollSnapBlock","HTMLElement","setTimeout","scrollIntoView","behavior","error","disconnectedCallback","disconnect","mediaBlockElement","firstElementChild","videoPauseButton","scrollTriggerTop","getBoundingClientRect","top","mediaBlockElementHeight","scrollPosition","parallaxSpeedContent","parallaxSpeedMedia","mediaContainer","content","transform","opacity","Math","max","render","showOverlayLayer","fixedBackground","blockHeight","animateOverlayBackground","HeadingTag","isVideo","isImage","classes","join","pnPlayOnScrollObserverOptions","h","key","class","observerOptions","media","srcSet","imageSrcSmallScreenFormat","src","alt","imageAltText","role","id","blockPreamble","name"],"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: 992px) {\n padding: 6.4rem 0;\n }\n\n @media screen and (min-width: 1200px) {\n padding: 7.2rem 0;\n }\n\n @media screen and (min-width: 1640px) {\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: 576px) {\n font-size: 4rem;\n }\n\n @media screen and (min-width: 768px) {\n font-size: 4.8rem;\n }\n\n @media screen and (min-width: 992px) {\n font-size: 5.6rem;\n }\n\n @media screen and (min-width: 1200px) {\n font-size: 8rem;\n }\n\n @media screen and (min-width: 1640px) {\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: 576px) {\n font-size: 2rem;\n }\n\n @media screen and (min-width: 1200px) {\n font-size: 2.4rem;\n }\n\n @media screen and (min-width: 1640px) {\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 img {\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 clip-path: inset(0);\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:768px) {\n margin-bottom: 4rem;\n }\n\n @media screen and (min-width:992px) {\n margin-bottom: 5.6rem;\n }\n\n @media screen and (min-width:1200px) {\n margin-bottom: 7.2rem;\n }\n }\n}\n","import { 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?: number = 2;\n @Prop() blockPreamble?: string = null;\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 blockHeadingLevelChecked() {\n if (this.blockHeading && this.blockHeading !== null) {\n console.warn('blockHeadingLevel is required when blockHeading is set');\n return undefined;\n }\n return this.blockHeadingLevel;\n }\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, blockHeadingLevelChecked, hasButtonSlot, hasVideo, hasImage, animateOverlayBackground } = this;\n const HeadingTag = `h${blockHeadingLevelChecked ?? 2}`;\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 ].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 && <HeadingTag class=\"media-block__block-heading\">{this.blockHeading}</HeadingTag>}\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"],"mappings":"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","ignoreList":[]}
|