{"version":3,"names":["sewWsServicesContactCss","SewWsServicesContact","constructor","hostRef","this","apiUrl","phonePrefixLabel","value","addressElementWidth","search","options","headers","Headers","fetch","then","response","json","hasResult","result_available","address","result","searchTerm","onSearchTermChange","e","target","_a","externalZipcodeSearch","length","convertText","text","convertedText","replace","submitForm","formElement","submit","componentDidRender","addressElement","offsetWidth","render","h","Host","key","class","style","ref","el","action","id","ws","size","E_SEW_SEARCH_FIELD_SIZE","XS","placeholder","onChange","name","externalZipcodeInputName","gettrackmeEventCategory","gettrackmeEventObject","servicesItemLabel","onClick","buttonText","_b","_c","_d","_e","telephone","_f","_g","email","_h","innerHTML","errorMessage"],"sources":["src/components/website-components/sew-ws-services-contact/sew-ws-services-contact.scss?tag=sew-ws-services-contact&encapsulation=shadow","src/components/website-components/sew-ws-services-contact/sew-ws-services-contact.tsx"],"sourcesContent":[":host {\n    @include grid;\n\n    padding: 48px 0 42px;\n\n    .content-wrapper {\n        grid-column: 2 / -2;\n        display: grid;\n        column-gap: var(--column-gap);\n        row-gap: 40px;\n        grid-template-columns: repeat(auto-fit, minmax(var(--min-width), 1fr));\n    }\n\n    .search-area {\n        display: flex;\n        gap: 20px;\n        align-items: flex-start;\n\n        sew-ws-button {\n            flex-shrink: 0;\n            height: 48px;\n        }\n    }\n\n    .address-area {\n        font-weight: bolder;\n        font-style: normal;\n        font-size: 18px;\n        white-space: nowrap;\n        justify-self: start;\n    }\n\n    .error-message {\n        @include typo-ws-paragraph;\n\n        margin: 0;\n        white-space: normal;\n    }\n}\n\n@include mq-2 {\n    :host {\n        .content-wrapper {\n            grid-template-columns: 1fr 1fr;\n        }\n    }\n}\n\n@include mq-1 {\n    :host {\n        padding: 40px 0 42px;\n\n        .content-wrapper {\n            grid-template-columns: 1fr;\n        }\n\n        .search-area {\n            flex-direction: column;\n            align-items: stretch;\n        }\n\n        .address-area:empty {\n            display: none;\n        }\n    }\n}\n","import { Component, Host, h, Element, State, Prop } from '@stencil/core';\nimport { gettrackmeEventCategory, gettrackmeEventObject } from '../../../utils/tracking-helpers';\nimport { E_SEW_SEARCH_FIELD_SIZE } from '../../forms/sew-search-field/sew-search-field.types';\n\n@Component({\n    tag: 'sew-ws-services-contact',\n    styleUrl: 'sew-ws-services-contact.scss',\n    shadow: true,\n})\nexport class SewWsServicesContact {\n    @Element() host: HTMLSewWsServicesContactElement;\n\n    @Prop() apiUrl = 'https://www.sew-d.de/api/v1/zipcode/DE?search=';\n    @Prop() phonePrefixLabel = 'Tel.';\n    @Prop() placeholder: string;\n    @Prop() buttonText: string;\n    @Prop() helpText: string;\n    @Prop() errorMessage: string;\n    @Prop() servicesItemLabel: string;\n    @Prop() externalZipcodeSearch: string;\n    @Prop() externalZipcodeInputName: string;\n\n    @State() value = '';\n    @State() address: { name: string; email: string; telephone: string };\n    @State() addressElementWidth = '0';\n    @State() hasResult: boolean;\n    @State() searchTerm: string;\n\n    private addressElement: HTMLElement;\n    private formElement: HTMLFormElement;\n\n    private search = () => {\n        const options = {\n            headers: new Headers({\n                'Content-Type': 'application/json',\n            }),\n        };\n\n        fetch(this.apiUrl + this.value, options)\n            .then(response => response.json())\n            .then(json => {\n                this.hasResult = json.result_available;\n                this.address = json.result;\n                this.searchTerm = json.search;\n            });\n    };\n\n    private onSearchTermChange = (e: Event) => {\n        const target = e.target as HTMLInputElement;\n        this.value = target.value;\n        !(this.externalZipcodeSearch?.length > 0) && this.search();\n    };\n\n    private convertText = (text: string): string => {\n        const convertedText = text.replace('%1', this.searchTerm);\n\n        return convertedText;\n    };\n\n    private submitForm = () => {\n        this.externalZipcodeSearch?.length > 0 && this.formElement.submit();\n    };\n\n    componentDidRender(): void {\n        this.addressElementWidth = this.hasResult ? this.addressElement.offsetWidth + 'px' : '1px';\n    }\n\n    render() {\n        return (\n            <Host>\n                <div class=\"content-wrapper\" style={{ '--min-width': this.addressElementWidth }}>\n                    <div class=\"search-area\">\n                        {this.externalZipcodeSearch?.length > 0 ? (\n                            <form\n                                ref={el => (this.formElement = el)}\n                                action={this.externalZipcodeSearch}\n                                id=\"fr_contact_form\"\n                            >\n                                <sew-search-field ws size={E_SEW_SEARCH_FIELD_SIZE.XS}>\n                                    <input\n                                        placeholder={this.placeholder}\n                                        onChange={this.onSearchTermChange}\n                                        value={this.value}\n                                        name={this.externalZipcodeInputName}\n                                    />\n                                </sew-search-field>\n                            </form>\n                        ) : (\n                            <sew-search-field ws size={E_SEW_SEARCH_FIELD_SIZE.XS}>\n                                <input\n                                    placeholder={this.placeholder}\n                                    onChange={this.onSearchTermChange}\n                                    value={this.value}\n                                />\n                            </sew-search-field>\n                        )}\n\n                        <sew-ws-button>\n                            <button\n                                data-sew-trackme-event-category={gettrackmeEventCategory('Services')}\n                                data-sew-trackme-event-object={gettrackmeEventObject(\n                                    `Services_${this.servicesItemLabel}_${this.placeholder}`\n                                )}\n                                data-sew-trackme-event-action={`Click_${this.value}`}\n                                onClick={this.submitForm}\n                            >\n                                {this.buttonText}\n                            </button>\n                        </sew-ws-button>\n                    </div>\n\n                    {!(this.externalZipcodeSearch?.length > 0) && (\n                        <address class=\"address-area\" ref={el => (this.addressElement = el as HTMLElement)}>\n                            {this.hasResult && this.address?.name && <div>{this.address?.name}</div>}\n                            {this.hasResult && this.address?.telephone && (\n                                <div>{this.phonePrefixLabel + ': ' + this.address?.telephone}</div>\n                            )}\n                            {this.hasResult && this.address?.email && <div>{this.address?.email}</div>}\n                            {this.hasResult === false && (\n                                <p class=\"error-message\" innerHTML={this.convertText(this.errorMessage)} />\n                            )}\n                        </address>\n                    )}\n\n                    <div class=\"links-area\">\n                        <slot name=\"links\" />\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n}\n"],"mappings":"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","ignoreList":[]}