{"version":3,"names":["sewWsPopularBlogsItemCss","SewWsPopularBlogsItem","formatDate","date","Date","toLocaleDateString","undefined","month","day","year","render","h","Host","key","class","href","this","blog","url","icon","size","hero_picture","mq2","hero_picture_alt","hero_picture_title","media","srcSet","mq1","mq1r","mq2r","mq3","mq3r","headline","tags","map","tag","slot","sewWsTeaserCss","SewWsTeaser","constructor","hostRef","noGrid","noMargin","columns","hasDownloadSlot","componentWillLoad","host","querySelector","style","setProperty","innerHTML","name"],"sources":["src/components/website-components/sew-ws-popular-blogs/sew-ws-popular-blogs-item.scss?tag=sew-ws-popular-blogs-item&encapsulation=shadow","src/components/website-components/sew-ws-popular-blogs/sew-ws-popular-blogs-item.tsx","src/components/website-components/sew-ws-teaser/sew-ws-teaser.scss?tag=sew-ws-teaser&encapsulation=shadow","src/components/website-components/sew-ws-teaser/sew-ws-teaser.tsx"],"sourcesContent":[":host {\n    display: block;\n    border: 1px solid $color-grey-04-middle;\n    background-color: $color-grey-06-bright;\n    position: relative;\n}\n\n.link {\n    all: unset;\n    cursor: pointer;\n}\n\n.icon {\n    position: absolute;\n    top: 0;\n    right: 0;\n    background-color: $color-red;\n    color: $color-white;\n    width: 60px;\n    height: 60px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    z-index: 1;\n}\n\n.image-wrapper {\n    position: relative;\n    aspect-ratio: 2/1;\n}\n\n.content {\n    padding: 16px 32px 24px;\n    display: flex;\n    flex-direction: column;\n}\n\n.date {\n    @include typo-ws-paragraph;\n\n    color: $color-grey-03;\n}\n\n.headline {\n    @include typo-ws-h4;\n\n    margin: 8px 0 32px;\n    display: flex;\n    align-items: center;\n    column-gap: 3px;\n    transform: translateX(-21px);\n    transition:\n        transform 0.2s,\n        color 0.2s;\n\n    .svg {\n        flex-shrink: 0;\n        opacity: 0;\n        transition: opacity 0.2s;\n    }\n}\n\n.tags {\n    display: flex;\n    flex-wrap: wrap;\n    column-gap: 8px;\n    row-gap: 8px;\n    margin-top: auto;\n}\n\n.tag {\n    @include typo-ws-paragraph-s;\n\n    line-height: 24px;\n    padding: 0 8px;\n    border-radius: 8px;\n    border: 1px solid $color-grey-04-middle;\n    color: $color-grey-03;\n}\n\n:host(:hover) {\n    .headline {\n        color: $color-red;\n        transform: translateX(0);\n\n        .svg {\n            opacity: 1;\n        }\n    }\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { Blog } from './sew-ws-popular-blogs.types';\n\n@Component({\n    tag: 'sew-ws-popular-blogs-item',\n    styleUrl: 'sew-ws-popular-blogs-item.scss',\n    shadow: true,\n})\nexport class SewWsPopularBlogsItem {\n    @Prop() blog: Blog;\n\n    private formatDate(date: string) {\n        return new Date(date).toLocaleDateString(undefined, {\n            month: '2-digit',\n            day: '2-digit',\n            year: 'numeric',\n        });\n    }\n\n    render() {\n        return (\n            <Host>\n                <a class=\"link\" href={this.blog.url}>\n                    <div class=\"icon\">\n                        <sew-icon icon=\"document-pen\" size=\"xl\" />\n                    </div>\n                    <div class=\"image-wrapper\">\n                        <sew-picture\n                            img-src={this.blog.hero_picture.mq2}\n                            img-alt={this.blog.hero_picture_alt}\n                            img-title={this.blog.hero_picture_title}\n                        >\n                            <source\n                                media=\"(max-width: 600px)\"\n                                srcSet={`${this.blog.hero_picture.mq1} 1x, ${this.blog.hero_picture.mq1r} 2x`}\n                            />\n                            <source\n                                media=\"(max-width: 1344px)\"\n                                srcSet={`${this.blog.hero_picture.mq2} 1x, ${this.blog.hero_picture.mq2r} 2x`}\n                            />\n                            <source\n                                media=\"(max-width: 2456px)\"\n                                srcSet={`${this.blog.hero_picture.mq3} 1x, ${this.blog.hero_picture.mq3r} 2x`}\n                            />\n                        </sew-picture>\n                    </div>\n                    <div class=\"content\">\n                        <div class=\"date\">{this.formatDate(this.blog.date)}</div>\n                        <div class=\"headline\">\n                            <sew-icon class=\"svg\" icon=\"arrow-right\" size=\"s\" />\n                            {this.blog.headline}\n                        </div>\n                        <div class=\"tags\">\n                            {this.blog.tags.map(tag => (\n                                <div class=\"tag\" slot=\"target\">\n                                    {tag}\n                                </div>\n                            ))}\n                        </div>\n                    </div>\n                </a>\n            </Host>\n        );\n    }\n}\n","@include component-spacing-and-grid;\n\n:host {\n    display: block;\n\n    h2 {\n        @include typo-ws-h2;\n\n        margin: 0 0 40px;\n    }\n\n    ::slotted(sew-ws-richtext) {\n        margin: -24px 0 60px;\n    }\n\n    slot[name='teaser-item'] {\n        column-gap: var(--column-gap);\n        display: grid;\n        grid-template-columns: repeat(var(--columns), 1fr);\n        row-gap: 40px;\n    }\n\n    .download {\n        align-items: center;\n        border-top: 2px solid $color-grey-01-dark;\n        display: flex;\n        margin-top: 80px;\n        padding-top: 40px;\n    }\n\n    ::slotted(sew-ws-link) {\n        margin-left: 40px;\n    }\n\n    .limit-content-width {\n        display: grid;\n        grid-template-columns: repeat(12, 1fr);\n\n        > div {\n            grid-column: span 8;\n        }\n\n        @include mq-2 {\n            > div {\n                grid-column: span 12;\n            }\n        }\n    }\n}\n\n::slotted(*) {\n    hyphens: auto;\n}\n\n@include mq-2-5 {\n    :host {\n        slot[name='teaser-item'] {\n            grid-template-columns: 1fr 1fr 1fr;\n        }\n    }\n\n    :host([columns='2']) {\n        slot[name='teaser-item'] {\n            grid-template-columns: 1fr 1fr;\n        }\n    }\n}\n\n@include mq-2 {\n    :host {\n        slot[name='teaser-item'] {\n            grid-template-columns: 1fr 1fr;\n        }\n    }\n}\n\n@include mq-1 {\n    :host {\n        h2 {\n            margin-bottom: 32px;\n        }\n\n        slot[name='teaser-item'] {\n            display: grid;\n            grid-template-columns: 1fr !important;\n            row-gap: 60px;\n        }\n\n        .download {\n            align-items: flex-start;\n            flex-direction: column;\n            margin-top: 60px;\n            padding-top: 40px;\n        }\n\n        ::slotted(sew-ws-link) {\n            margin-left: 0;\n            margin-top: 32px;\n        }\n    }\n}\n\n@media print {\n    :host {\n        h2 {\n            margin: 0 0 20px;\n        }\n\n        slot[name='teaser-item'] {\n            display: flex;\n            flex-direction: column;\n            gap: 12px;\n        }\n\n        .download {\n            margin-top: 60px;\n            padding-top: 0;\n        }\n    }\n\n    ::slotted([slot='download']) {\n        display: none !important;\n    }\n}\n","import { Component, ComponentInterface, h, Host, Prop, Element, State } from '@stencil/core';\n\n@Component({\n    tag: 'sew-ws-teaser',\n    styleUrl: 'sew-ws-teaser.scss',\n    shadow: true,\n})\nexport class SewWsTeaser implements ComponentInterface {\n    @Element() host: HTMLSewWsTeaserElement;\n\n    @Prop({ reflect: true }) noGrid = false;\n    @Prop({ reflect: true }) noMargin = false;\n    @Prop({ reflect: true }) columns = '3';\n\n    @Prop() headline: string;\n\n    @State() hasDownloadSlot = false;\n\n    componentWillLoad(): void {\n        this.hasDownloadSlot = !!this.host.querySelector('[slot=\"download\"]');\n        this.host.style.setProperty('--columns', this.columns);\n    }\n\n    render() {\n        return (\n            <Host>\n                <div class=\"main-content-container\">\n                    {this.headline && (\n                        <div class=\"limit-content-width\">\n                            <div>\n                                <h2 innerHTML={this.headline}></h2>\n                                <slot name=\"intro\"></slot>\n                            </div>\n                        </div>\n                    )}\n                    <slot name=\"teaser-item\" />\n                    {this.hasDownloadSlot && (\n                        <div class=\"download\">\n                            <slot name=\"download\" />\n                        </div>\n                    )}\n                </div>\n            </Host>\n        );\n    }\n}\n"],"mappings":"yDAAA,MAAMA,EAA2B,g7C,MCQpBC,EAAqB,M,yBAGtB,UAAAC,CAAWC,GACf,OAAO,IAAIC,KAAKD,GAAME,mBAAmBC,UAAW,CAChDC,MAAO,UACPC,IAAK,UACLC,KAAM,W,CAId,MAAAC,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,4CACDF,EAAG,KAAAE,IAAA,2CAAAC,MAAM,OAAOC,KAAMC,KAAKC,KAAKC,KAC5BP,EAAK,OAAAE,IAAA,2CAAAC,MAAM,QACPH,EAAU,YAAAE,IAAA,2CAAAM,KAAK,eAAeC,KAAK,QAEvCT,EAAK,OAAAE,IAAA,2CAAAC,MAAM,iBACPH,EAAA,eAAAE,IAAA,qDACaG,KAAKC,KAAKI,aAAaC,IACvB,UAAAN,KAAKC,KAAKM,iBAAgB,YACxBP,KAAKC,KAAKO,oBAErBb,EACI,UAAAE,IAAA,2CAAAY,MAAM,qBACNC,OAAQ,GAAGV,KAAKC,KAAKI,aAAaM,WAAWX,KAAKC,KAAKI,aAAaO,YAExEjB,EACI,UAAAE,IAAA,2CAAAY,MAAM,sBACNC,OAAQ,GAAGV,KAAKC,KAAKI,aAAaC,WAAWN,KAAKC,KAAKI,aAAaQ,YAExElB,EACI,UAAAE,IAAA,2CAAAY,MAAM,sBACNC,OAAQ,GAAGV,KAAKC,KAAKI,aAAaS,WAAWd,KAAKC,KAAKI,aAAaU,cAIhFpB,EAAK,OAAAE,IAAA,2CAAAC,MAAM,WACPH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,QAAQE,KAAKd,WAAWc,KAAKC,KAAKd,OAC7CQ,EAAK,OAAAE,IAAA,2CAAAC,MAAM,YACPH,EAAU,YAAAE,IAAA,2CAAAC,MAAM,MAAMK,KAAK,cAAcC,KAAK,MAC7CJ,KAAKC,KAAKe,UAEfrB,EAAA,OAAAE,IAAA,2CAAKC,MAAM,QACNE,KAAKC,KAAKgB,KAAKC,KAAIC,GAChBxB,EAAK,OAAAG,MAAM,MAAMsB,KAAK,UACjBD,Q,aCvDrC,MAAME,EAAiB,80E,MCOVC,EAAW,MALxB,WAAAC,CAAAC,G,UAQ6BxB,KAAMyB,OAAG,MACTzB,KAAQ0B,SAAG,MACX1B,KAAO2B,QAAG,IAI1B3B,KAAe4B,gBAAG,KA6B9B,CA3BG,iBAAAC,GACI7B,KAAK4B,kBAAoB5B,KAAK8B,KAAKC,cAAc,qBACjD/B,KAAK8B,KAAKE,MAAMC,YAAY,YAAajC,KAAK2B,Q,CAGlD,MAAAjC,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,4CACDF,EAAK,OAAAE,IAAA,2CAAAC,MAAM,0BACNE,KAAKgB,UACFrB,EAAK,OAAAE,IAAA,2CAAAC,MAAM,uBACPH,EAAA,OAAAE,IAAA,4CACIF,EAAA,MAAAE,IAAA,2CAAIqC,UAAWlC,KAAKgB,WACpBrB,EAAA,QAAAE,IAAA,2CAAMsC,KAAK,YAIvBxC,EAAM,QAAAE,IAAA,2CAAAsC,KAAK,gBACVnC,KAAK4B,iBACFjC,EAAK,OAAAE,IAAA,2CAAAC,MAAM,YACPH,EAAM,QAAAE,IAAA,2CAAAsC,KAAK,e","ignoreList":[]}