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

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{transformTag as e,proxyCustomElement as i,HTMLElement as n,createEvent as t,h as a,Host as s}from"@stencil/core/internal/client";import{u as l,k as r,e as o}from"./helpers.js";import{c}from"./close_small.js";import{d}from"./pn-button2.js";import{d as h}from"./pn-icon2.js";import{d as p}from"./pn-spinner2.js";const f='<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>',u={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"}},b=i(class extends n{constructor(e){super(),!1!==e&&this.__registerHost(),this.search=t(this,"search",7),this.update=t(this,"update",7)}id=`pn-search-field-${l()}`;get hostElement(){return this}label;language=void 0;value="";name;placeholder;autocomplete;list;required=!1;disabled=!1;loading=!1;button="";buttonLabel;buttonTooltip;buttonLight=!1;pnId;pnAriaLabelledby;searchid;search;update;inputHandler(){this.update.emit(this.value)}async componentWillLoad(){void 0===this.language&&await r(this.hostElement)}getId(){return this.pnId||this.searchid||this.id}translate(e){return u?.[e]?.[this.language||o]}emitSearch({click:e,button:i}){("click"===e?.type||"keydown"===i?.type&&"Enter"===i?.key)&&((e||i).preventDefault(),this.search.emit(this.value))}setVal(e){this.value=e.target.value}clearInput(){this.value="",this.update.emit(this.value),this.hostElement.querySelector("input").focus()}displayLabel(){return!!this.label}getAriaLabelledby(){return this.displayLabel()?null:this.pnAriaLabelledby}getButtonLabel(){return this.buttonLabel||this.translate("SEARCH")}searchSimple(){return"icon"===this.button||"simple"===this.button}searchAuto(){return"icon-inline"===this.button||"none"===this.button||"auto"===this.button}searchJumbo(){return"jumbo"===this.button}searchButtonAppearance(){return this.searchSimple()?"light":null}searchButtonVariant(){return this.searchSimple()?"outlined":null}render(){return a(s,{key:"aa01f135ec98eed061d33617a5d21fb75407a917"},a("div",{key:"17161eac733e7f46c26524baf0508292b1575712",class:"pn-search-field","data-inline":this.searchAuto(),"data-loading":this.loading,"data-searching":!!this.value,"data-jumbo":this.searchJumbo()},a("div",{key:"12a771d29c021a6c83fe9aa152f8367c7f20f2e3",class:"pn-search-field-container"},a("input",{key:"b5ce3770f1ef6d53ee904ef40894eb91c76c96b4",class:"pn-search-field-input",id:this.getId(),type:"search",value:this.value,name:this.name,placeholder:this.placeholder,autocomplete:this.autocomplete,list:this.list,required:this.required,disabled:this.disabled,"aria-label":this.label,"aria-labelledby":this.getAriaLabelledby(),onKeyDown:e=>this.emitSearch({button:e}),onInput:e=>this.setVal(e)}),a("div",{key:"f1922be073a70bbf54f67b7adc793c240b212769",class:"pn-search-field-inline"},this.searchAuto()&&a("pn-button",{key:"497b71cf5c3a1403789a4746b92da1b6f72f6341",class:"pn-search-field-button",type:"button",appearance:"light",small:!0,icon:f,iconOnly:!0,arialabel:this.getButtonLabel(),noTab:this.loading,onPnClick:e=>this.emitSearch({click:e.detail})}),!this.disabled&&a("pn-button",{key:"d1591b1d364e9da38129099a7f2841282c0d224e",small:!0,class:"pn-search-field-clear",type:"button",appearance:"light",icon:c,iconOnly:!0,arialabel:this.translate("CLEAR"),noTab:!this.value||this.loading,onPnClick:()=>this.clearInput()}),this.searchAuto()&&a("pn-spinner",{key:"205a3761b7637381f9ea50c4e28c6734f27558f3",class:"pn-search-field-spinner"}))),!this.searchAuto()&&a("pn-button",{key:"0b41069b9d9554c196e32289e82192137cd8059e",class:"pn-search-field-submit",label:this.getButtonLabel(),tooltip:this.buttonTooltip,appearance:this.searchButtonAppearance(),variant:this.searchButtonVariant(),icon:f,iconOnly:this.searchSimple()||this.searchJumbo(),arialabel:this.searchSimple()||this.searchJumbo()?this.getButtonLabel():null,loading:this.loading,onPnClick:e=>this.emitSearch({click:e.detail})})))}static get style(){return`${e("pn-search-field")}{display:inline-block}${e("pn-search-field")} .pn-search-field{display:flex;gap:0.5em}${e("pn-search-field")} .pn-search-field-container{width:100%;flex:1 1 100%;position:relative}${e("pn-search-field")} .pn-search-field-input{min-height:3em;height:100%;width:100%;color:#2d2013;background-color:#ffffff;border:0.0625em solid #969087;border-radius:3em;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}${e("pn-search-field")} .pn-search-field-input:-webkit-autofill,${e("pn-search-field")} .pn-search-field-input:-webkit-autofill:hover,${e("pn-search-field")} .pn-search-field-input:-webkit-autofill:focus,${e("pn-search-field")} .pn-search-field-input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #e0f8ff inset;-webkit-text-fill-color:#2d2013}${e("pn-search-field")} .pn-search-field-input{outline:0.2rem solid transparent;outline-offset:0.2rem}${e("pn-search-field")} .pn-search-field-input:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}${e("pn-search-field")} .pn-search-field-input{transition-property:outline-color, background-color, border-color, color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-search-field")} .pn-search-field-input{transition-duration:0s;transition-delay:0s}}${e("pn-search-field")} .pn-search-field-input::placeholder{color:#5e554a;font-weight:normal}${e("pn-search-field")} .pn-search-field-input:hover{border-color:#005d92}${e("pn-search-field")} .pn-search-field-input:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}${e("pn-search-field")} .pn-search-field-input::-webkit-calendar-picker-indicator,${e("pn-search-field")} .pn-search-field-input::-webkit-search-cancel-button,${e("pn-search-field")} .pn-search-field-input::-webkit-search-decoration{display:none !important}${e("pn-search-field")} .pn-search-field-inline{pointer-events:none;position:absolute;top:0;right:0;background:transparent;width:3em;height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center}${e("pn-search-field")} .pn-search-field-inline ${e("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)}@media (prefers-reduced-motion: reduce){${e("pn-search-field")} .pn-search-field-inline ${e("pn-button")}{transition-duration:0s;transition-delay:0s}}${e("pn-search-field")} .pn-search-field-inline ${e("pn-button")}{transition-delay:0.2s;transform:translate(100%, -50%)}${e("pn-search-field")} .pn-search-field-submit{white-space:nowrap}${e("pn-search-field")} .pn-search-field-spinner{position:absolute;left:50%;top:50%;transition:transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s;transform:translate(100%, -50%)}${e("pn-search-field")} .pn-search-field[data-inline] .pn-search-field-inline{pointer-events:unset}${e("pn-search-field")} .pn-search-field[data-inline] .pn-search-field-button{transform:translate(-50%, -50%)}${e("pn-search-field")} .pn-search-field[data-inline][data-loading] ${e("pn-button")}{transform:translate(100%, -50%)}${e("pn-search-field")} .pn-search-field[data-inline][data-loading] .pn-search-field-spinner{transform:translate(-50%, -50%)}${e("pn-search-field")} .pn-search-field[data-inline][data-searching] .pn-search-field-button{transform:translate(150%, -50%)}${e("pn-search-field")} .pn-search-field[data-jumbo] .pn-search-field-input{min-height:4em;padding-left:1.25em}${e("pn-search-field")} .pn-search-field[data-jumbo] .pn-search-field-submit .pn-button[data-icon-only]{width:4em;height:4em}${e("pn-search-field")} .pn-search-field[data-jumbo] .pn-search-field-submit .pn-button[data-icon-only][data-loading] .pn-button-bg{width:4em;height:4em}${e("pn-search-field")} .pn-search-field[data-searching] .pn-search-field-inline{pointer-events:unset}${e("pn-search-field")} .pn-search-field[data-searching] .pn-search-field-clear{transform:translate(-50%, -50%)}`}},[512,"pn-search-field",{label:[1],language:[1],value:[1025],name:[1],placeholder:[1],autocomplete:[1],list:[1],required:[4],disabled:[4],loading:[4],button:[1],buttonLabel:[1,"button-label"],buttonTooltip:[1,"button-tooltip"],buttonLight:[4,"button-light"],pnId:[1,"pn-id"],pnAriaLabelledby:[1,"pn-aria-labelledby"],searchid:[1]},[[0,"input","inputHandler"]]]);function m(){"undefined"!=typeof customElements&&["pn-search-field","pn-button","pn-icon","pn-spinner"].forEach((i=>{switch(i){case"pn-search-field":customElements.get(e(e(i)))||customElements.define(e(e(i)),b);break;case"pn-button":customElements.get(e(e(i)))||d();break;case"pn-icon":customElements.get(e(e(i)))||h();break;case"pn-spinner":customElements.get(e(e(i)))||p()}}))}export{b as P,m as d}