{"version":3,"names":["sewWsStageCss","SewWsStage","constructor","hostRef","this","bigSwiperOptions","classes","pagination","page","mediaQuery","gap","direction","perPage","arrows","speed","type","lazyLoad","smallSwiperOptions","pauseOnHover","perMove","start","autoplay","interval","breakpoints","showPager","compact","sliderElementCount","suppressSlideChangeEvent","videoIsRunning","hideSlider","clonedItems","hasMobileHeadline","onActive","activeSplide","bigSliderRef","querySelector","duration","swiperSmall","Components","Autoplay","pause","setTimeout","go","play","Number","restartAvifImg","classList","contains","videoElement","add","remove","isReady","startVideo","addEventListener","once","pauseVideo","smallSliderRef","stopVideo","onMove","updateStageSmall","index","swiperBig","onSwiperSlideClick","event","moveSliderLeft","moveSliderRight","getCompactMobileHeadline","firstItem","el","headline","onScroll","windowCenter","window","innerHeight","sliderPosition","getBoundingClientRect","top","offsetHeight","scrollY","toggle","sectionBridgeRef","onResize","getCurrentMediaQuery","setShowImageOnPictures","pictures","querySelectorAll","forEach","picture","showImage","removeAutoplayPoster","items","item","poster","parentNode","removeChild","componentWillLoad","componentDidLoad","cloneSwiperItems","componentDidUpdate","hasSmallSlider","Splide","mount","on","document","body","style","setProperty","avifImg","src","endsWith","reloadImage","childnodes","length","node","push","h","class","getTextContentOfNode","adaptMaxItemsForSlider","amount","classname","textContent","render","Host","key","ref","onClick","icon","size","width","height"],"sources":["src/components/website-components/sew-ws-stage/sew-ws-stage.scss?tag=sew-ws-stage","src/components/website-components/sew-ws-stage/sew-ws-stage.tsx"],"sourcesContent":["@import '~@splidejs/splide/dist/css/splide.min.css';\n\n/* stylelint-disable selector-class-pattern, max-nesting-depth, selector-max-compound-selectors */\nsew-ws-stage {\n background-color: $color-grey-05-light;\n display: block;\n position: relative;\n\n .swiper-big {\n li {\n list-style: none;\n }\n\n .splide-pagination {\n all: unset;\n margin: 0;\n bottom: 30px;\n display: flex;\n justify-content: center;\n left: 0;\n position: absolute;\n width: 100%;\n z-index: 1;\n opacity: 0;\n transition: opacity 300ms;\n column-gap: 10px;\n\n li {\n line-height: 10px !important;\n width: 10px;\n height: 10px;\n overflow: hidden;\n }\n }\n\n .splide-pagination-item {\n all: unset;\n background-color: $color-grey-04-middle;\n cursor: pointer;\n height: 40px;\n margin: 0;\n width: 40px;\n\n &.is-active {\n background-color: $color-red;\n }\n }\n\n &.swiper-minimize,\n &.video-plays,\n &.show-pager {\n .splide-pagination {\n z-index: 2;\n opacity: 1;\n }\n }\n\n &.no-consent,\n &.video-plays {\n .stage-teaser {\n display: none;\n }\n\n sew-video {\n z-index: 2;\n }\n }\n }\n\n .swiper-small-container {\n bottom: 0;\n position: absolute;\n width: 100%;\n z-index: 1;\n\n .grid {\n @include grid;\n }\n\n .swiper-scale-container {\n grid-area: 1 / 2 / 2 / 14;\n background-color: $color-grey-01-dark;\n display: flex;\n opacity: 1;\n transform: scaleY(1);\n transform-origin: bottom;\n transition:\n transform 300ms,\n opacity 150ms;\n width: 100%;\n\n @include mq-1 {\n grid-area: 1/1/2/15;\n }\n\n &.video-plays,\n &.swiper-minimize {\n opacity: 0;\n transform: scaleY(0);\n transition:\n transform 300ms,\n opacity 150ms 150ms;\n }\n\n &.is-moving {\n .splide__slide.is-next {\n &::before {\n opacity: 0;\n }\n }\n }\n }\n\n .splide {\n width: calc(100% - 70px);\n }\n\n .topic-line {\n @include typo-ws-paragraph-s;\n\n color: $color-white;\n text-transform: uppercase;\n }\n\n .headline {\n @include typo-ws-h4;\n\n font-size: clamp(18px, 1.388vw, 20px);\n line-height: clamp(26px, 1.944vw, 28px);\n min-height: 56px;\n color: $color-white;\n }\n\n .splide__slide {\n box-sizing: border-box;\n padding: 24px 32px;\n position: relative;\n cursor: pointer;\n\n &::before {\n background-color: $color-grey-03;\n bottom: 20px;\n content: '';\n left: 0.5px;\n position: absolute;\n top: 20px;\n width: 1px;\n z-index: 1;\n opacity: 1;\n transition: opacity 1s;\n }\n\n &:hover {\n .topic-line,\n .headline {\n color: $color-white;\n }\n }\n }\n\n .splide__slide.is-active {\n &::before {\n display: none;\n }\n }\n\n a {\n display: none;\n }\n\n .swiper-button-prev,\n .swiper-button-next {\n align-items: center;\n color: $color-grey-03;\n display: flex;\n flex-shrink: 0;\n position: relative;\n width: 35px;\n z-index: 1;\n cursor: pointer;\n background-color: $color-grey-01-dark;\n\n .svg {\n margin: 0 -16px;\n width: 48px;\n }\n\n &:hover {\n color: $color-white;\n }\n\n &::before {\n content: '';\n position: absolute;\n top: 0;\n height: 100%;\n background-color: inherit;\n width: 3px;\n }\n }\n\n .swiper-button-prev {\n justify-content: flex-end;\n\n &::before {\n right: -3px;\n }\n }\n\n .swiper-button-next {\n justify-content: flex-start;\n\n &::before {\n left: -3px;\n }\n }\n }\n\n .section-bridge {\n background-color: $color-grey-05-light;\n height: var(--half-of-small-slider);\n transition: height 300ms;\n\n &.bridge-minimize {\n height: 0;\n }\n }\n\n &.no-progress-bar {\n sew-ws-stage-item {\n .stage-teaser::after {\n display: none;\n }\n }\n }\n}\n\n@include mq-2-min {\n sew-ws-stage {\n &[compact] {\n .image-wrapper,\n .video-wrapper {\n max-height: 400px;\n min-height: auto;\n }\n\n .stage-teaser {\n top: auto;\n transform: none;\n\n @include mq-4-min {\n // half max content width, see _grid.scss\n transform: translate3d(-880px, 0, 0);\n }\n }\n }\n }\n}\n\n@include mq-1 {\n sew-ws-stage {\n .swiper-big {\n .splide-pagination {\n bottom: 12px;\n }\n\n &.video-plays {\n .splide-pagination {\n z-index: 1;\n }\n\n .stage-teaser {\n display: block;\n }\n }\n }\n\n &.no-progress-bar {\n sew-ws-stage-item {\n padding-bottom: 0;\n\n .stage-teaser {\n position: relative;\n bottom: 40px;\n }\n }\n }\n\n .swiper-small-container {\n .swiper-scale-container {\n &.video-plays:not(.swiper-minimize) {\n opacity: 1;\n transform: scaleY(1);\n }\n }\n }\n\n &[compact] {\n @include grid;\n\n background-color: transparent;\n margin-top: 60px;\n\n .mobile-headline {\n grid-column: 2 / -2;\n .headline {\n @include typo-ws-h1;\n\n margin: 0;\n }\n }\n\n .stage {\n display: none;\n }\n }\n }\n}\n","import { Component, Host, h, State, Element, Listen, Prop } from '@stencil/core';\nimport Splide, { Options } from '@splidejs/splide';\nimport { getCurrentMediaQuery } from '../../../utils/getCurrentMediaQuery';\n\n@Component({\n tag: 'sew-ws-stage',\n styleUrl: 'sew-ws-stage.scss',\n shadow: false,\n})\nexport class SewWsStage {\n private bigSwiperOptions: Options = {\n classes: {\n pagination: 'splide-pagination',\n page: 'splide-pagination-item',\n },\n mediaQuery: 'min',\n gap: 0,\n direction: 'ltr',\n perPage: 1,\n pagination: true,\n arrows: false,\n speed: 2000,\n type: 'fade',\n lazyLoad: 'nearby',\n };\n\n private smallSwiperOptions: Options = {\n type: 'loop',\n pauseOnHover: false,\n speed: 2000,\n pagination: false,\n mediaQuery: 'min',\n gap: 0,\n direction: 'ltr',\n perPage: 1,\n perMove: 1,\n start: 1,\n arrows: false,\n autoplay: true,\n interval: 5000,\n breakpoints: {\n 560: {\n perPage: 2,\n },\n 1024: {\n perPage: 3,\n },\n 1212: {\n perPage: 4,\n },\n },\n };\n\n @Element() el: HTMLSewWsStageElement;\n @Prop() showPager = false;\n @Prop({ reflect: true }) compact = false;\n\n private swiperSmall: Splide;\n private swiperBig: Splide;\n private smallSliderRef?: HTMLDivElement;\n private bigSliderRef?: HTMLDivElement;\n private sectionBridgeRef: HTMLDivElement;\n private sliderElementCount = 0;\n private suppressSlideChangeEvent = false;\n private videoElement;\n private videoIsRunning = false;\n private hideSlider = false;\n @State() private clonedItems = [];\n @State() private hasSmallSlider: boolean;\n @State() private hasMobileHeadline = false;\n\n @Listen('scroll', { target: 'window' })\n onScroll(): void {\n if (this.smallSliderRef && !this.showPager) {\n const windowCenter = (window.innerHeight * 3) / 4;\n\n // add half sliderheight if it is hidden, because the disappearing bridge influences the slider position\n const sliderPosition =\n this.smallSliderRef.getBoundingClientRect().top +\n (this.hideSlider ? 0 : this.smallSliderRef.offsetHeight / 2);\n\n const hideSlider = sliderPosition < windowCenter && window.scrollY > 10;\n this.hideSlider = hideSlider;\n\n this.smallSliderRef.classList.toggle('swiper-minimize', hideSlider);\n this.bigSliderRef.classList.toggle('swiper-minimize', hideSlider);\n this.sectionBridgeRef.classList.toggle('bridge-minimize', hideSlider);\n }\n }\n\n @Listen('resize', { target: 'window' })\n onResize(): void {\n this.hasMobileHeadline = this.compact && getCurrentMediaQuery() === 1;\n }\n\n private setShowImageOnPictures(): void {\n const pictures = this.el.querySelectorAll('sew-picture');\n\n pictures.forEach(picture => (picture.showImage = true));\n }\n\n private removeAutoplayPoster(): void {\n // remove all posters from videos with autoplay\n const items = this.el.querySelectorAll('sew-ws-stage-item');\n\n items.forEach(item => {\n if (item.autoplay !== true) return;\n\n const poster = item.querySelector('sew-video sew-picture');\n\n if (poster) {\n poster.parentNode.removeChild(poster);\n }\n });\n }\n\n componentWillLoad(): void {\n this.removeAutoplayPoster();\n this.onResize();\n }\n\n componentDidLoad(): void {\n this.setShowImageOnPictures();\n this.cloneSwiperItems();\n }\n\n componentDidUpdate(): void {\n if (this.hasSmallSlider) {\n this.swiperSmall = new Splide('.swiper-small', this.smallSwiperOptions);\n this.swiperSmall.mount();\n this.swiperSmall.on('move', this.updateStageSmall);\n this.swiperSmall.on('click', this.onSwiperSlideClick);\n }\n this.swiperBig = new Splide('.swiper-big', this.bigSwiperOptions);\n this.swiperBig.mount();\n this.swiperBig.on('active', this.onActive);\n this.swiperBig.on('move', this.onMove);\n this.onActive();\n document.body.style.setProperty(\n '--half-of-small-slider',\n this.smallSliderRef ? this.smallSliderRef.offsetHeight / 2 + 'px' : '0px'\n );\n }\n\n restartAvifImg(activeSplide) {\n const avifImg = activeSplide.querySelector('sew-picture') as HTMLSewPictureElement;\n\n if (!avifImg) return;\n\n const src = avifImg.src;\n\n if (src.endsWith('.avif')) {\n avifImg.reloadImage();\n }\n }\n\n private onActive = () => {\n const activeSplide = this.bigSliderRef.querySelector('.is-active') as HTMLSewWsStageItemElement;\n\n if (activeSplide.duration) {\n this.swiperSmall.Components.Autoplay.pause();\n setTimeout(() => {\n this.swiperSmall.go('+1');\n this.swiperSmall.Components.Autoplay.play();\n }, Number(activeSplide.duration));\n }\n\n this.restartAvifImg(activeSplide);\n\n if (!activeSplide.classList.contains('is-video')) {\n return;\n }\n\n this.videoElement = activeSplide.querySelector('sew-video');\n\n if (this.videoElement.classList.contains('no-consent')) {\n this.bigSliderRef && this.bigSliderRef.classList.add('no-consent');\n } else {\n this.bigSliderRef && this.bigSliderRef.classList.remove('no-consent');\n }\n\n // start youtube video\n if (activeSplide.autoplay === true) {\n if (this.videoElement.isReady) {\n this.startVideo();\n } else {\n this.videoElement.addEventListener(\n 'playerReady',\n () => {\n this.startVideo();\n },\n { once: true }\n );\n }\n } else {\n this.videoElement.addEventListener('videoPlaying', () => {\n this.startVideo();\n });\n\n this.videoElement.addEventListener('videoPaused', () => {\n this.pauseVideo();\n });\n }\n };\n\n private startVideo = () => {\n this.bigSliderRef.classList.add('video-plays');\n this.smallSliderRef && this.smallSliderRef.classList.add('video-plays');\n this.videoElement.startVideo();\n this.swiperSmall && this.swiperSmall.Components.Autoplay.pause();\n this.videoIsRunning = true;\n\n this.videoElement.addEventListener(\n 'videoEnded',\n () => {\n this.stopVideo();\n },\n { once: true }\n );\n };\n\n private stopVideo = () => {\n if (!this.videoIsRunning) return;\n\n this.videoIsRunning = false;\n this.videoElement.stopVideo();\n this.bigSliderRef.classList.remove('video-plays');\n this.smallSliderRef && this.smallSliderRef.classList.remove('video-plays');\n this.swiperSmall && this.swiperSmall.go('+1');\n this.swiperSmall && this.swiperSmall.Components.Autoplay.play();\n };\n\n private pauseVideo = () => {\n this.videoIsRunning = false;\n this.bigSliderRef.classList.remove('video-plays');\n this.smallSliderRef && this.smallSliderRef.classList.remove('video-plays');\n this.swiperSmall && this.swiperSmall.Components.Autoplay.play();\n };\n\n private onMove = () => {\n if (this.videoIsRunning) {\n this.stopVideo();\n }\n };\n\n private updateStageSmall = () => {\n this.smallSliderRef.classList.add('is-moving');\n setTimeout(() => {\n this.smallSliderRef.classList.remove('is-moving');\n }, this.smallSwiperOptions.speed);\n if (this.suppressSlideChangeEvent) {\n setTimeout(() => {\n this.suppressSlideChangeEvent = false;\n });\n return;\n }\n\n const index =\n this.swiperSmall.index - 1 < 0 ? this.sliderElementCount - 1 : this.swiperSmall.index - 1;\n this.swiperBig.go(index);\n };\n\n private onSwiperSlideClick = event => {\n this.swiperSmall.go(event.index + 1);\n };\n\n private cloneSwiperItems() {\n const clonedItems = [];\n const childnodes = this.el.querySelectorAll('sew-ws-stage-item');\n this.hasSmallSlider = childnodes.length > 1;\n\n if (!this.hasSmallSlider) {\n childnodes[0].index = 0;\n return;\n }\n\n childnodes.forEach((node, index) => {\n (node as HTMLSewWsStageItemElement).index = index;\n clonedItems.push(\n
\n );\n\n this.sliderElementCount++;\n });\n\n this.clonedItems = clonedItems;\n\n this.adaptMaxItemsForSlider(clonedItems.length);\n }\n\n private adaptMaxItemsForSlider(amount: number) {\n if (amount >= 5) return;\n\n if (amount === 4) {\n this.smallSwiperOptions.breakpoints['1212'].perPage = 3;\n } else if (amount === 3) {\n this.smallSwiperOptions.breakpoints['1212'].perPage = 2;\n this.smallSwiperOptions.breakpoints['1024'].perPage = 2;\n } else if (amount === 2) {\n this.smallSwiperOptions.breakpoints['1212'].perPage = 1;\n this.smallSwiperOptions.breakpoints['1024'].perPage = 1;\n this.smallSwiperOptions.breakpoints['560'].perPage = 1;\n }\n }\n\n private getTextContentOfNode(node, classname) {\n return node.querySelector(classname).textContent;\n }\n\n private moveSliderLeft = () => {\n this.suppressSlideChangeEvent = true;\n this.swiperSmall.go('<');\n };\n\n private moveSliderRight = () => {\n this.suppressSlideChangeEvent = true;\n this.swiperSmall.go('>');\n };\n\n private getCompactMobileHeadline = () => {\n const firstItem = this.el.querySelector('sew-ws-stage-item');\n const headline = firstItem.headline;\n\n return headline;\n };\n\n render() {\n return (\n