@postnord/web-components/postnord-web-components/p-ff068744.entry.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{r as n,c as t,g as e,h as i,a as s}from"./p-43660913.js";import{u as a,k as o,e as r}from"./p-f64d17a6.js";const l='<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=l;const d='<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 h=d;const f={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}@media (prefers-reduced-motion: reduce){pn-search-field input{transition-duration:0s;transition-delay:0s}}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%)}@media (prefers-reduced-motion: reduce){pn-search-field>.input-container pn-button{transition-duration:0s;transition-delay:0s}}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);this.label=undefined;this.value="";this.placeholder=undefined;this.searchid=this.id;this.name=undefined;this.autocomplete=undefined;this.list=undefined;this.language=null;this.disabled=false;this.required=false;this.loading=false;this.button="";this.buttonLabel=undefined;this.buttonLight=false}id=`pn-search-field-${a()}`;searchElement;get hostElement(){return e(this)}search;update;inputHandler(){this.update.emit(this.value)}async componentWillLoad(){if(this.language)return;await o(this.hostElement)}translate(n){return f?.[n]?.[this.language||r]}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(s,{key:"e37e5e244250cfa6f2f042b2c4b78952fa7d9a79",class:this.getClassNames()},i("div",{key:"eed981fb9d9fb396fbd18242e54efb2f7d7045aa",class:"input-container"},i("input",{key:"218ba7784220d2709d65ed94b818e14d9d49c08a",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:"90487db137ea5f86500d4cebe40c101085aa6dff",class:"button-container"},(this.button==="none"||this.button==="icon-inline")&&i("pn-button",{key:"db7bd6327c382b49b3a3f1d4ae355273b64f01b3",small:true,class:"search",type:"button",appearance:"light",icon:h,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:"44b876f97d6a961b12363c0e3e342399ddccad1f",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:"8f116b75dee2226c3efb89bbc4df1a1cf1e21175"}))),this.button!=="none"&&this.button!=="icon-inline"&&i("pn-button",{key:"a952f2dce26f841f3e934d2195649ab8c584c297",label:this.buttonLabel,appearance:this.buttonLight?"light":null,icon:h,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-ff068744.entry.js.map