@postnord/web-components/components/pn-zipcode-search.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{transformTag as e,proxyCustomElement as s,HTMLElement as t,createEvent as i,h as n,Host as r}from"@stencil/core/internal/client";import{u as a,k as o,s as c}from"./helpers.js";import{d as l}from"./pn-button2.js";import{d as h}from"./pn-icon2.js";import{d as p}from"./pn-search-field2.js";import{d}from"./pn-spinner2.js";const u={CLOSEST_DELIVERY_DATE:{en:"Closest delivery date:",sv:"Nästa utdelningsdag:"},NEXT_DELIVERY_DATE:{en:"Next delivery date:",sv:"Kommande utdelningsdag:"},ZIP_CODE:{en:"Zip code:",sv:"Postnummer:"},VALIDATION_ERROR_MESSAGE:{en:"Zip code not valid",sv:"Postnumret är inte giltigt"},SERVER_ERROR_MESSAGE:{en:"Could not find zip code",sv:"Kan inte hitta postnumret"},PLACEHOLDER_TEXT:{en:"Search for a zip code",sv:"Sök på ett postnummer"},SEARCH:{en:"Search",sv:"Sök"}},E=s(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.searchsuccessful=i(this,"searchsuccessful",7)}searchId="pn-zipcode-"+a();get hostElement(){return this}validZipCode;loading=!1;showResult=!1;zipCodeSearchResult={delivery:"",upcoming:"",city:"",postalCode:""};error=!1;errorMessage;language=null;value;searchsuccessful;async componentWillLoad(){null===this.language&&await o(this.hostElement),this.value&&this.handleSearch(this.value)}translation(e){return u[e][this.language||c]}handleSearch(e){this.value=e,this.validateZipCode(),this.error?this.errorMessage="VALIDATION_ERROR_MESSAGE":this.zipCodeSearch()}async zipCodeSearch(){this.loading=!0,await fetch("https://portal.postnord.com/api/sendoutarrival/closest?postalCode="+this.validZipCode).then((e=>e.json())).then((e=>{this.showResult=!0,this.zipCodeSearchResult=e,this.searchsuccessful.emit(!0)})).catch((()=>{this.error=!0,this.errorMessage="SERVER_ERROR_MESSAGE",this.searchsuccessful.emit(!1)})).finally((()=>{this.loading=!1}))}validateZipCode(){const e=this.value?this.value.replace(/[ -]/gi,""):"",s=/^\d{5}$/.test(e);this.error=!s,s&&(this.validZipCode=e)}renderSearchResult(){if(!this.loading&&!this.error&&this.showResult)return n("output",{class:"pn-search-results",htmlFor:this.searchId},n("p",{class:"text-row"},n("span",null,this.translation("CLOSEST_DELIVERY_DATE")),n("h3",{class:"delivery-date"},this.zipCodeSearchResult.delivery)),n("p",{class:"text-row"},n("span",null,this.translation("NEXT_DELIVERY_DATE")),n("h3",{class:"delivery-date"},this.zipCodeSearchResult.upcoming)),n("p",{class:"text-row"},n("span",null,this.translation("ZIP_CODE")),n("h3",null,this.zipCodeSearchResult.postalCode,", ",this.zipCodeSearchResult.city||"N/A")))}renderErrorMessage(){if(this.error&&!this.loading)return n("p",{class:"pn-error-text",role:"alert"},n("small",null,this.translation(this.errorMessage)))}render(){return n(r,{key:"b9314bbca808c725bc074d1dc9e58223bb551468"},n("pn-search-field",{key:"4c7eaf8c96aa36e17c546371345c7aac6a0c5ee7",label:this.translation("PLACEHOLDER_TEXT"),value:this.value,searchid:this.searchId,loading:this.loading,button:"icon",buttonLabel:this.translation("SEARCH"),placeholder:this.translation("PLACEHOLDER_TEXT"),onSearch:e=>this.handleSearch(e.detail)}),this.renderSearchResult(),this.renderErrorMessage())}static get style(){return`${e("pn-zipcode-search")}{display:block;color:#5e554a}${e("pn-zipcode-search")} .pn-search-results{display:flex;flex-direction:column;gap:1em;padding:0 0.75em}${e("pn-zipcode-search")} .pn-search-results span{color:#5e554a}${e("pn-zipcode-search")} .pn-search-results h3{color:#2d2013}${e("pn-zipcode-search")} .pn-error-text{color:#a70707;padding:0 0.75em}${e("pn-zipcode-search")}>${e("pn-search-field")}{width:100%;margin-bottom:1em}`}},[512,"pn-zipcode-search",{language:[1],value:[1025],validZipCode:[32],loading:[32],showResult:[32],zipCodeSearchResult:[32],error:[32],errorMessage:[32]}]),m=E,R=function(){"undefined"!=typeof customElements&&["pn-zipcode-search","pn-button","pn-icon","pn-search-field","pn-spinner"].forEach((s=>{switch(s){case"pn-zipcode-search":customElements.get(e(e(s)))||customElements.define(e(e(s)),E);break;case"pn-button":customElements.get(e(e(s)))||l();break;case"pn-icon":customElements.get(e(e(s)))||h();break;case"pn-search-field":customElements.get(e(e(s)))||p();break;case"pn-spinner":customElements.get(e(e(s)))||d()}}))};export{m as PnZipcodeSearch,R as defineCustomElement}