{"version":3,"names":["sewWsStageItemCss","SewWsStageItem","constructor","hostRef","this","compact","autoplay","imageAlign","hasVideo","hasChild","componentWillLoad","hasLink","el","querySelector","videoElement","classList","add","duration","style","setProperty","sewPicture","objectFit","render","stageTeaserClasses","h","Host","key","class","splide__slide","name","headline","topicLine","index","innerHTML","icon"],"sources":["src/components/website-components/sew-ws-stage/sew-ws-stage-item.scss?tag=sew-ws-stage-item","src/components/website-components/sew-ws-stage/sew-ws-stage-item.tsx"],"sourcesContent":["/* stylelint-disable selector-class-pattern */\n\nsew-ws-stage-item {\n --stage-image-animation-time: 5000ms;\n\n display: block;\n position: relative;\n\n &::after,\n &::before {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n z-index: 1;\n }\n\n &:not(:has(.compact)) {\n &::after {\n background: linear-gradient(\n to right,\n rgba(0, 0, 0, 0.6),\n rgba(0, 0, 0, 0) 50%,\n transparent 0,\n transparent\n );\n }\n }\n &::before {\n background: linear-gradient(\n to bottom,\n rgba(0, 0, 0, 0.9),\n rgba(0, 0, 0, 0) 30%,\n transparent 0,\n transparent\n );\n }\n\n .image-wrapper,\n .video-wrapper {\n overflow: hidden;\n max-height: min(80vh, 1000px);\n min-height: 600px;\n display: flex;\n flex-direction: column;\n }\n\n .video-wrapper {\n position: relative;\n height: 50vw;\n z-index: 2;\n }\n\n sew-picture {\n display: block;\n transform: scale(1);\n transition: transform var(--stage-image-animation-time) linear;\n width: 100%;\n }\n\n sew-video {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 2;\n }\n\n &[autoplay] {\n sew-video {\n z-index: 0;\n }\n }\n\n .stage-teaser {\n background-color: $color-white;\n box-sizing: border-box;\n color: $color-grey-01-dark;\n max-width: 634px;\n padding: clamp(24px, 2.778vw, 40px) clamp(24px, 3.472vw, 50px) 32px clamp(24px, 5.556vw, 80px);\n position: absolute;\n transform: translateY(-50%);\n bottom: 0;\n width: 44vw;\n z-index: 1000;\n opacity: 0.95;\n\n &::after {\n background-color: $color-red;\n bottom: -6px;\n content: '';\n height: 6px;\n left: 0;\n position: absolute;\n transform: scaleX(0);\n transform-origin: left;\n width: 100%;\n }\n\n @keyframes loading {\n from {\n transform: scaleX(0);\n }\n to {\n transform: scaleX(1);\n }\n }\n }\n\n .compact {\n background-color: transparent;\n }\n\n .topic-line {\n @include typo-ws-topic-line-stage;\n }\n\n .headline {\n @include font-h1;\n\n margin-top: 4px;\n min-height: clamp(88px, 5.9vw, 112px);\n hyphens: auto;\n text-wrap: balance;\n }\n\n .link {\n color: $color-red;\n display: inline-block;\n margin-top: 8px;\n position: relative;\n transform: translate3d(-9px, 0, 0);\n transition: transform 0.2s;\n\n .svg {\n left: -2px;\n position: absolute;\n top: 2px;\n }\n\n .shaft {\n opacity: 0;\n transition: opacity 0.2s;\n }\n\n a {\n @include typo-ws-h4;\n\n color: inherit;\n padding-left: 28px;\n text-decoration: none;\n }\n\n &:hover {\n transform: translate3d(0, 0, 0);\n\n .shaft {\n opacity: 1;\n }\n }\n }\n\n &.is-active {\n z-index: 1;\n\n sew-picture {\n transform: scale(1.3);\n }\n\n .stage-teaser {\n &::after {\n animation: loading var(--stage-image-animation-time) linear;\n }\n }\n }\n\n .slotted {\n margin-top: 24px;\n\n div {\n display: flex;\n flex-direction: row;\n column-gap: 10px;\n }\n }\n}\n\n@include mq-4-min {\n sew-ws-stage-item {\n .stage-teaser {\n left: 50%;\n // half max content width, see _grid.scss\n transform: translate3d(-880px, -50%, 0);\n }\n\n .compact {\n padding-left: 0;\n }\n }\n}\n\n@include mq-3 {\n sew-ws-stage-item {\n .stage-teaser {\n left: 0;\n }\n }\n}\n\n@include mq-2 {\n sew-ws-stage-item {\n .stage-teaser {\n width: 50vw;\n }\n\n .image-wrapper,\n .video-wrapper {\n min-height: 500px;\n }\n }\n}\n\n@include mq-1 {\n sew-ws-stage-item {\n padding-bottom: 270px;\n\n &::after {\n display: none;\n }\n\n .image-wrapper,\n .video-wrapper {\n aspect-ratio: 1;\n max-height: unset;\n min-height: unset;\n }\n\n .video-wrapper {\n height: unset;\n }\n\n sew-picture {\n width: 100%;\n height: 100%;\n }\n\n .stage-teaser {\n opacity: 1;\n bottom: 108px;\n left: var(--grid-margin);\n top: auto;\n transform: translateY(0);\n width: calc(100% - var(--grid-margin) - var(--grid-margin));\n max-width: none;\n }\n }\n}\n","import { Component, Host, h, Prop, Element, State } from '@stencil/core';\n\n@Component({\n tag: 'sew-ws-stage-item',\n styleUrl: 'sew-ws-stage-item.scss',\n shadow: false,\n})\nexport class SewWsStageItem {\n @Element() el: HTMLSewWsStageItemElement;\n\n @Prop() topicLine: string;\n @Prop() headline: string;\n @Prop({ reflect: true }) index: number;\n @Prop({ reflect: true }) compact = false;\n @Prop({ reflect: true }) duration: string;\n\n /**\n * controls if video has autoplay\n */\n @Prop({ reflect: true }) autoplay = false;\n @Prop() videoTitle: string;\n\n @Prop() imageAlign = 'center';\n\n @State() hasLink: boolean;\n @State() hasVideo = false;\n @State() hasChild = false;\n\n componentWillLoad(): void {\n this.hasLink = !!this.el.querySelector('a');\n const videoElement = this.el.querySelector('sew-video');\n this.hasVideo = !!videoElement;\n this.hasChild = !!this.el.querySelector('div');\n\n if (this.hasVideo) {\n videoElement.classList.add('inside-stage');\n }\n\n if (this.duration) {\n this.el.style.setProperty('--stage-image-animation-time', this.duration + 'ms');\n }\n\n // set object-fit for image\n const sewPicture = this.el.querySelector('sew-picture');\n if (sewPicture) {\n sewPicture.objectFit = true;\n }\n }\n\n render() {\n const stageTeaserClasses = {\n 'stage-teaser': true,\n 'compact': this.compact,\n };\n\n return (\n \n {!this.hasVideo && (\n
\n \n
\n )}\n {this.hasVideo && (\n
\n \n
\n )}\n {this.headline && (\n
\n
{this.topicLine}
\n {this.index === 0 &&

}\n {this.index !== 0 &&

}\n {this.hasLink && (\n
\n \n \n
\n )}\n {this.compact && this.hasChild && (\n
\n \n
\n )}\n
\n )}\n \n );\n }\n}\n"],"mappings":"yDAAA,MAAMA,EAAoB,2hI,MCObC,EAAc,MAL3B,WAAAC,CAAAC,G,UAW6BC,KAAOC,QAAG,MAMVD,KAAQE,SAAG,MAG5BF,KAAUG,WAAG,SAGZH,KAAQI,SAAG,MACXJ,KAAQK,SAAG,KA8DvB,CA5DG,iBAAAC,GACIN,KAAKO,UAAYP,KAAKQ,GAAGC,cAAc,KACvC,MAAMC,EAAeV,KAAKQ,GAAGC,cAAc,aAC3CT,KAAKI,WAAaM,EAClBV,KAAKK,WAAaL,KAAKQ,GAAGC,cAAc,OAExC,GAAIT,KAAKI,SAAU,CACfM,EAAaC,UAAUC,IAAI,e,CAG/B,GAAIZ,KAAKa,SAAU,CACfb,KAAKQ,GAAGM,MAAMC,YAAY,+BAAgCf,KAAKa,SAAW,K,CAI9E,MAAMG,EAAahB,KAAKQ,GAAGC,cAAc,eACzC,GAAIO,EAAY,CACZA,EAAWC,UAAY,I,EAI/B,MAAAC,GACI,MAAMC,EAAqB,CACvB,eAAgB,KAChBlB,QAAWD,KAAKC,SAGpB,OACImB,EAACC,EAAK,CAAAC,IAAA,2CAAAC,MAAO,CAAEC,cAAiB,KAAM,WAAYxB,KAAKI,YACjDJ,KAAKI,UACHgB,EAAA,OAAAE,IAAA,2CAAKC,MAAM,gBAAgBT,MAAO,CAAE,kBAAmBd,KAAKG,aACxDiB,EAAA,QAAAE,IAAA,2CAAMG,KAAK,aAGlBzB,KAAKI,UACFgB,EAAK,OAAAE,IAAA,2CAAAC,MAAM,iBACPH,EAAA,QAAAE,IAAA,2CAAMG,KAAK,WAGlBzB,KAAK0B,UACFN,EAAK,OAAAE,IAAA,2CAAAC,MAAOJ,GACRC,EAAA,OAAAE,IAAA,2CAAKC,MAAM,cAAcvB,KAAK2B,WAC7B3B,KAAK4B,QAAU,GAAKR,EAAI,MAAAE,IAAA,2CAAAC,MAAM,WAAWM,UAAW7B,KAAK0B,WACzD1B,KAAK4B,QAAU,GAAKR,EAAI,MAAAE,IAAA,2CAAAC,MAAM,WAAWM,UAAW7B,KAAK0B,WACzD1B,KAAKO,SACFa,EAAK,OAAAE,IAAA,2CAAAC,MAAM,QACPH,EAAA,YAAAE,IAAA,2CAAUC,MAAM,MAAMO,KAAK,eAC3BV,EAAA,QAAAE,IAAA,8CAGPtB,KAAKC,SAAWD,KAAKK,UAClBe,EAAA,OAAAE,IAAA,2CAAKC,MAAM,WACPH,EAAA,QAAAE,IAAA,+C","ignoreList":[]}