@postnord/web-components/postnord-web-components/p-14ee90a3.entry.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{r as n,c as t,g as e,h as i,a}from"./p-c2c6299e.js";import{u as o,j as s,e as l}from"./p-c511b4fb.js";const r='<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414" clip-rule="evenodd"/></svg>';const c=r;const h='<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M4 11.442A7.44 7.44 0 0 1 11.44 4c6.24 0 9.617 7.154 5.923 11.949l2.844 2.844a1 1 0 0 1-1.414 1.414l-2.837-2.837C11.21 21.045 4 17.73 4 11.441m11.277 3.867C11.846 18.714 6 16.284 6 11.442A5.44 5.44 0 0 1 11.44 6c4.724 0 7.204 5.605 4.026 9.1z" clip-rule="evenodd"/></svg>';const f=h;const d={SEARCH:{en:"Search",sv:"Sök",da:"Søg",fi:"Hae",no:"Søk"},CLEAR:{en:"Clear search field",sv:"Rensa sökfältet",da:"Ryd søgefeltet",fi:"Tyhjennä hakukenttä",no:"Tøm søkefeltet"}};const p="pn-search-field{display:inline-flex;gap:0.5em}pn-search-field input{color:#2d2013;background-color:#ffffff;border:0.0625em solid #969087;border-radius:0.5em;padding:0.75em;font-family:inherit;font-size:1em;font-weight:500;line-height:1.5em;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:outline-color, background-color, border-color, color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1);min-height:3em;height:100%;width:100%;border-radius:3em}pn-search-field input:-webkit-autofill,pn-search-field input:-webkit-autofill:hover,pn-search-field input:-webkit-autofill:focus,pn-search-field input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #e0f8ff inset;-webkit-text-fill-color:#2d2013}pn-search-field input:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}pn-search-field input::placeholder{color:#5e554a;font-weight:normal}pn-search-field input:hover{border-color:#005d92}pn-search-field input:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}pn-search-field input::-webkit-search-cancel-button{display:none}pn-search-field>.input-container{width:100%;position:relative}pn-search-field>.input-container .button-container{position:absolute;top:0;right:0;background:transparent;width:3em;height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center}pn-search-field>.input-container pn-button{position:absolute;left:50%;top:50%;transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1);transition-delay:0.2s;transform:translate(100%, -50%)}pn-search-field.searching pn-button.search{transform:translate(150%, -50%)}pn-search-field.searching pn-button.clear{transform:translate(-50%, -50%)}pn-search-field.button-none input,pn-search-field.button-icon-inline input{padding-right:2em}pn-search-field.button-none pn-spinner,pn-search-field.button-icon-inline pn-spinner{position:absolute;left:50%;top:50%;transition:transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s;transform:translate(100%, -50%)}pn-search-field.button-none pn-button.search,pn-search-field.button-icon-inline pn-button.search{transform:translate(-50%, -50%)}pn-search-field.button-none.loading pn-button,pn-search-field.button-icon-inline.loading pn-button{transform:translate(100%, -50%)}pn-search-field.button-none.loading pn-spinner,pn-search-field.button-icon-inline.loading pn-spinner{transform:translate(-50%, -50%)}pn-search-field.button-none.searching pn-button.search{transform:translate(100%, -50%)}pn-search-field.button-icon>pn-button[data-loading=true] .pn-button-bg{left:50%;transform:translateX(-50%)}";const u=p;const b=class{constructor(e){n(this,e);this.search=t(this,"search",7);this.update=t(this,"update",7)}id=`pn-search-field-${o()}`;searchElement;get hostElement(){return e(this)}label;value="";placeholder;searchid=this.id;name;autocomplete;list;language=null;disabled=false;required=false;loading=false;button="";buttonLabel;buttonLight=false;search;update;inputHandler(){this.update.emit(this.value)}async componentWillLoad(){if(this.language)return;await s(this.hostElement)}translate(n){return d?.[n]?.[this.language||l]}emitSearch({click:n,button:t}){if(n?.type==="click"||t?.type==="keydown"&&t?.key==="Enter"){const e=n||t;e.preventDefault();this.search.emit(this.value)}}setVal(n){this.value=n.target.value}clearInput(){this.value="";this.update.emit(this.value);this.hostElement.querySelector("input").focus()}getClassNames(){let n="";const t=["none","icon","icon-inline"];if(this.value)n+="searching ";if(this.loading)n+="loading ";if(t.includes(this.button))n+=`button-${this.button} `;return n}render(){return i(a,{key:"832efc417d5cdac506bd633c278850c6632b37f4",class:this.getClassNames()},i("div",{key:"4216bce9ecec34c4f9d8c638da80b2c44c8615be",class:"input-container"},i("input",{key:"817f49b544f9ef97d8f281cc6c8bcee65edb231a",type:"search",value:this.value,id:this.searchid,name:this.name,"aria-label":this.label,placeholder:this.placeholder,disabled:this.disabled,required:this.required,autocomplete:this.autocomplete,list:this.list,ref:n=>this.searchElement=n,onKeyDown:n=>this.emitSearch({button:n}),onInput:n=>this.setVal(n)}),i("div",{key:"2f5c2f864712551c7928ceb57733837720a1bc2e",class:"button-container"},(this.button==="none"||this.button==="icon-inline")&&i("pn-button",{key:"69f28fbd1dc19c68d2125a8f689ac067e77c68bf",small:true,class:"search",type:"button",appearance:"light",icon:f,iconOnly:true,noTab:this.button!=="icon-inline",arialabel:this.translate("SEARCH"),onPnClick:n=>this.emitSearch({click:n.detail})}),this.button!=="icon-inline"&&i("pn-button",{key:"82f9599ab84356609cce0a03f2c9be24f28d950f",small:true,class:"clear",type:"button",appearance:"light",icon:c,iconOnly:true,arialabel:this.translate("CLEAR"),noTab:this.value&&(!this.loading||this.button!=="none"),onPnClick:()=>this.clearInput()}),this.button==="none"||this.button==="icon-inline"&&i("pn-spinner",{key:"42c3319f161dd199695d2b460311d43abfc31e30"}))),this.button!=="none"&&this.button!=="icon-inline"&&i("pn-button",{key:"9fc3a87ad30f92688b65762d98787319bba06df0",label:this.buttonLabel,appearance:this.buttonLight?"light":null,icon:f,iconOnly:true,arialabel:this.button==="icon"?this.buttonLabel:null,loading:this.loading,onPnClick:n=>this.emitSearch({click:n.detail})}))}};b.style=u;export{b as pn_search_field};
//# sourceMappingURL=p-14ee90a3.entry.js.map