{"version":3,"names":["sewWsServicesItemCss","SewWsServicesItem","constructor","hostRef","this","toggleItem","itemClickedEmitter","emit","clickedItem","host","active","watchActiveHandler","style","setProperty","contentElement","scrollHeight","render","h","Host","key","onClick","class","icon","size","shortendLabel","ref","el"],"sources":["src/components/website-components/sew-ws-services/sew-ws-services-item.scss?tag=sew-ws-services-item&encapsulation=shadow","src/components/website-components/sew-ws-services/sew-ws-services-item.tsx"],"sourcesContent":[":host {\n    display: block;\n\n    .content {\n        height: 0;\n        overflow: hidden;\n        background-color: $color-grey-06-bright;\n        animation: fadeOut 500ms forwards;\n    }\n\n    button {\n        width: 100%;\n        display: flex;\n        align-items: center;\n        border: 0;\n        border-bottom: 2px solid $color-white;\n        padding: 0;\n\n        span {\n            @include typo-ws-paragraph-bold;\n\n            color: $color-grey-01-dark;\n            width: 100%;\n            text-align: start;\n            padding-left: 20px;\n        }\n\n        .svg {\n            color: $color-red;\n            flex-shrink: 0;\n        }\n\n        .service-icon {\n            height: 40px;\n            width: 40px;\n            padding: 20px;\n        }\n\n        .chevron-icon {\n            height: 32px;\n            width: 32px;\n            padding: 0 24px;\n            transition: transform 0.2s linear;\n            transform-origin: center;\n        }\n    }\n\n    ::slotted(sew-ws-teaser) {\n        margin-top: 0;\n        padding: 32px 0 40px;\n    }\n}\n\n:host([active]) {\n    button {\n        .chevron-icon {\n            transform: rotate(-180deg);\n        }\n    }\n\n    .content {\n        animation: fadeIn 500ms forwards;\n    }\n}\n\n@include mq-2-min {\n    :host {\n        button {\n            display: none;\n        }\n\n        ::slotted(sew-ws-teaser) {\n            padding: 40px 0;\n        }\n    }\n\n    :host([open-content]) {\n        .content {\n            animation: fadeIn 500ms forwards 500ms;\n        }\n    }\n}\n\n@keyframes fadeIn {\n    from {\n        height: 0;\n        border-bottom: 0;\n    }\n\n    99% {\n        height: var(--content-height);\n        overflow: hidden;\n    }\n\n    to {\n        overflow: visible;\n        height: auto;\n        border-bottom: 2px solid $color-white;\n    }\n}\n\n@keyframes fadeOut {\n    from {\n        overflow: visible;\n        height: auto;\n        border-bottom: 2px solid $color-white;\n    }\n\n    1% {\n        height: var(--content-height);\n        overflow: hidden;\n    }\n\n    to {\n        height: 0;\n        border-bottom: 0;\n    }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Element, Watch } from '@stencil/core';\nimport { PanelTileClickedEvent } from './sew-ws-services.types';\n\n@Component({\n    tag: 'sew-ws-services-item',\n    styleUrl: 'sew-ws-services-item.scss',\n    shadow: true,\n})\nexport class SewWsServicesItem {\n    @Element() host: HTMLSewWsServicesItemElement;\n\n    @Prop() label: string;\n    @Prop() shortendLabel: string;\n    @Prop() icon: string;\n    @Prop({ reflect: true }) active: boolean;\n    @Prop({ reflect: true }) openContent: boolean;\n\n    @Event() itemClickedEmitter: EventEmitter<PanelTileClickedEvent>;\n\n    private contentElement: HTMLDivElement;\n\n    @Watch('active')\n    watchActiveHandler(): void {\n        this.host.style.setProperty('--content-height', this.contentElement.scrollHeight + 'px');\n    }\n\n    private toggleItem = (): void => {\n        this.itemClickedEmitter.emit({ clickedItem: this.host, active: !this.active });\n    };\n\n    render() {\n        return (\n            <Host>\n                <button onClick={this.toggleItem}>\n                    <sew-icon class=\"svg service-icon\" icon={this.icon} size=\"xl\" />\n                    <span>{this.shortendLabel}</span>\n                    <sew-icon class=\"chevron-icon svg\" icon=\"arrow-chevron-down\" size=\"l\" />\n                </button>\n\n                <div class=\"content\" ref={el => (this.contentElement = el as HTMLDivElement)}>\n                    <slot />\n                </div>\n            </Host>\n        );\n    }\n}\n"],"mappings":"gEAAA,MAAMA,EAAuB,y7C,MCQhBC,EAAiB,MAL9B,WAAAC,CAAAC,G,iEAuBYC,KAAUC,WAAG,KACjBD,KAAKE,mBAAmBC,KAAK,CAAEC,YAAaJ,KAAKK,KAAMC,QAASN,KAAKM,QAAS,CAkBrF,CAvBG,kBAAAC,GACIP,KAAKK,KAAKG,MAAMC,YAAY,mBAAoBT,KAAKU,eAAeC,aAAe,K,CAOvF,MAAAC,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,4CACDF,EAAA,UAAAE,IAAA,2CAAQC,QAAShB,KAAKC,YAClBY,EAAA,YAAAE,IAAA,2CAAUE,MAAM,mBAAmBC,KAAMlB,KAAKkB,KAAMC,KAAK,OACzDN,EAAO,QAAAE,IAAA,4CAAAf,KAAKoB,eACZP,EAAA,YAAAE,IAAA,2CAAUE,MAAM,mBAAmBC,KAAK,qBAAqBC,KAAK,OAGtEN,EAAA,OAAAE,IAAA,2CAAKE,MAAM,UAAUI,IAAKC,GAAOtB,KAAKU,eAAiBY,GACnDT,EAAQ,QAAAE,IAAA,8C","ignoreList":[]}