{"version":3,"names":["sewWsTeaserItemCss","SewWsTeaserItem","constructor","hostRef","this","video","hasButton","triggerContentLink","link","host","querySelector","click","componentWillLoad","render","h","Host","key","class","onClick","name","icon","size","innerHTML","headline","text"],"sources":["src/components/website-components/sew-ws-teaser-item/sew-ws-teaser-item.scss?tag=sew-ws-teaser-item&encapsulation=shadow","src/components/website-components/sew-ws-teaser-item/sew-ws-teaser-item.tsx"],"sourcesContent":[":host {\n    border: 1px solid #c8cccf;\n    display: flex;\n    flex-direction: column;\n}\n\n.image-wrapper {\n    position: relative;\n\n    slot {\n        display: block;\n        overflow: hidden;\n        cursor: pointer;\n    }\n}\n\n:host(.no-button) {\n    .image-wrapper {\n        slot {\n            cursor: unset;\n            pointer-events: none;\n        }\n    }\n}\n\n.video {\n    @include video-play-button;\n}\n\n::slotted(sew-picture) {\n    aspect-ratio: 2 / 1;\n    transition: transform 0.2s ease;\n}\n\n::slotted(sew-picture:hover) {\n    transform: scale(1.2);\n}\n\n.headline,\n.text,\nslot[name='button'] {\n    margin: 0 32px;\n}\n\n.headline {\n    @include typo-ws-h3;\n\n    margin-top: 24px;\n}\n\n.text {\n    @include typo-ws-paragraph;\n\n    // hier wurde mit Absicht auf die scss Funktion verzichtet.\n    margin-top: clamp(14px, 0.972vw, 18.666px);\n    margin-bottom: 32px;\n}\n\nslot[name='button'] {\n    display: block;\n    margin-bottom: 40px;\n    margin-top: auto;\n}\n\n@include mq-1 {\n    .headline,\n    .text,\n    slot[name='button'] {\n        margin-left: 20px;\n        margin-right: 20px;\n    }\n}\n","import { Component, h, Prop, Host, Element, State } from '@stencil/core';\n\n@Component({\n    tag: 'sew-ws-teaser-item',\n    styleUrl: 'sew-ws-teaser-item.scss',\n    shadow: true,\n})\nexport class SewWsTeaserItem {\n    @Element() host: HTMLSewWsTeaserItemElement;\n    @Prop() headline: string;\n    @Prop() text: string;\n    @Prop() video = false;\n    @State() hasButton = false;\n\n    private triggerContentLink = () => {\n        if (!this.hasButton) return;\n\n        const link = this.host.querySelector('a, button') as HTMLElement;\n\n        link.click();\n    };\n\n    componentWillLoad(): void {\n        this.hasButton = !!this.host.querySelector('[slot=\"button\"]');\n    }\n\n    render() {\n        return (\n            <Host class={{ 'no-button': !this.hasButton }}>\n                <div class=\"image-wrapper\" onClick={this.triggerContentLink}>\n                    <slot name=\"picture\"></slot>\n                    {this.video && (\n                        <div class=\"video\">\n                            <sew-icon icon=\"play-filled\" size=\"xl\"></sew-icon>\n                        </div>\n                    )}\n                </div>\n                <h3 class=\"headline\" innerHTML={this.headline}></h3>\n                <p class=\"text\" innerHTML={this.text}></p>\n                <slot name=\"button\"></slot>\n            </Host>\n        );\n    }\n}\n"],"mappings":"yDAAA,MAAMA,EAAqB,i1C,MCOdC,EAAe,MAL5B,WAAAC,CAAAC,G,UASYC,KAAKC,MAAG,MACPD,KAASE,UAAG,MAEbF,KAAkBG,mBAAG,KACzB,IAAKH,KAAKE,UAAW,OAErB,MAAME,EAAOJ,KAAKK,KAAKC,cAAc,aAErCF,EAAKG,OAAO,CAwBnB,CArBG,iBAAAC,GACIR,KAAKE,YAAcF,KAAKK,KAAKC,cAAc,kB,CAG/C,MAAAG,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO,CAAE,aAAcb,KAAKE,YAC9BQ,EAAK,OAAAE,IAAA,2CAAAC,MAAM,gBAAgBC,QAASd,KAAKG,oBACrCO,EAAM,QAAAE,IAAA,2CAAAG,KAAK,YACVf,KAAKC,OACFS,EAAK,OAAAE,IAAA,2CAAAC,MAAM,SACPH,EAAU,YAAAE,IAAA,2CAAAI,KAAK,cAAcC,KAAK,SAI9CP,EAAI,MAAAE,IAAA,2CAAAC,MAAM,WAAWK,UAAWlB,KAAKmB,WACrCT,EAAG,KAAAE,IAAA,2CAAAC,MAAM,OAAOK,UAAWlB,KAAKoB,OAChCV,EAAA,QAAAE,IAAA,2CAAMG,KAAK,W","ignoreList":[]}