@postnord/web-components/postnord-web-components/p-459160e7.entry.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{r as e,g as t,h as n,a as i}from"./p-43660913.js";import{u as s,j as a,e as p}from"./p-c511b4fb.js";import{a as r}from"./p-9a18b612.js";import{c as o}from"./p-aae10869.js";import{c as l}from"./p-92b0338a.js";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="M1.81 11.727a1 1 0 0 1 1.363.378c.29.513.835 1.343 1.7 2.174a9.5 9.5 0 0 0 3.457 2.128c1.03.361 2.244.593 3.67.593s2.64-.232 3.67-.593a9.5 9.5 0 0 0 3.458-2.128 9.7 9.7 0 0 0 1.698-2.174 1 1 0 0 1 1.742.984 11.5 11.5 0 0 1-1.445 2.001l1.686 2.322a1 1 0 1 1-1.618 1.175l-1.537-2.116a11.4 11.4 0 0 1-2.453 1.48l.763 2.785a1 1 0 1 1-1.928.528l-.73-2.661c-.993.251-2.093.397-3.306.397s-2.313-.146-3.306-.397l-.73 2.661a1 1 0 1 1-1.928-.528l.763-2.786a11.4 11.4 0 0 1-2.453-1.479L2.81 18.587a1 1 0 0 1-1.618-1.175l1.686-2.322a11.5 11.5 0 0 1-1.445-2 1 1 0 0 1 .379-1.363" clip-rule="evenodd"/></svg>';const u=h;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="M12 7c-5.382 0-7.908 3.33-8.758 4.775a.43.43 0 0 0 0 .45C4.092 13.67 6.618 17 12 17s7.908-3.33 8.758-4.775a.43.43 0 0 0 0-.45C19.908 10.33 17.382 7 12 7M1.518 10.761C2.55 9.005 5.618 5 12 5s9.45 4.005 10.482 5.761a2.43 2.43 0 0 1 0 2.478C21.45 14.995 18.382 19 12 19s-9.45-4.005-10.482-5.761a2.43 2.43 0 0 1 0-2.478M8 12a4 4 0 1 1 8 0 4 4 0 0 1-8 0m4-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4" clip-rule="evenodd"/></svg>';const f=d;const c={SHOW:{sv:"Visa",en:"Show",da:"At vise",fi:"Näytä",no:"Vise"},HIDE:{sv:"Dölj",en:"Hide",da:"Skjule",fi:"Piilottaa",no:"Gjemme seg"},CLEAR:{sv:"Rensa",en:"Clear",da:"Klar",fi:"Asia selvä",no:"Klar"}};const b="pn-input{display:inline-flex;flex-direction:column}pn-input .pn-input-label{cursor:pointer;display:flex;justify-content:space-between;align-items:flex-end;font-weight:400;color:#2d2013;margin:0 0 0.25em 0;gap:0.5em;transition-property:color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1);-webkit-tap-highlight-color:transparent}pn-input .pn-input-label>span{font-size:0.875em}pn-input .pn-input-group{position:relative}pn-input .pn-input-element{--pn-input-offset-left:0em;--pn-input-offset-right:0em;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);width:100%;padding-left:calc(var(--pn-input-offset-left) + 0.75em);padding-right:calc(var(--pn-input-offset-right) + 0.75em)}pn-input .pn-input-element:-webkit-autofill,pn-input .pn-input-element:-webkit-autofill:hover,pn-input .pn-input-element:-webkit-autofill:focus,pn-input .pn-input-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #e0f8ff inset;-webkit-text-fill-color:#2d2013}pn-input .pn-input-element:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}pn-input .pn-input-element::placeholder{color:#5e554a;font-weight:normal}pn-input .pn-input-element:hover{border-color:#005d92}pn-input .pn-input-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}pn-input .pn-input-element:read-only{border-color:#ffffff}pn-input .pn-input-element:disabled~.pn-input-eyecandy>pn-icon>.pn-icon-svg>path{fill:#969087}pn-input .pn-input-element::-webkit-calendar-picker-indicator{visibility:hidden;display:none}pn-input .pn-input-element::-webkit-textfield-decoration-container,pn-input .pn-input-element::-webkit-search-cancel-button,pn-input .pn-input-element::-webkit-inner-spin-button,pn-input .pn-input-element::-webkit-outer-spin-button,pn-input .pn-input-element::-webkit-search-decoration{-webkit-appearance:none;-moz-appearance:none;appearance:none}pn-input .pn-input-element[type=number]{appearance:textfield}pn-input .pn-input-eyecandy{position:absolute;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;gap:0.5em;height:1.5em}pn-input .pn-input-eyecandy[data-prefix]{left:0.75em}pn-input .pn-input-eyecandy[data-suffix]{right:0.75em}pn-input .pn-input-text{color:#5e554a;font-weight:400;line-height:1.5em}pn-input .pn-input-message{color:#5e554a;font-size:0.875em;font-weight:400;margin:0.25em 0 0 0;display:flex;flex-direction:column;gap:0.25em}pn-input .pn-input-message[hidden],pn-input .pn-input-message>span[hidden]{display:none}pn-input .pn-input[data-error]>.pn-input-label{color:#a70707}pn-input .pn-input[data-error]>.pn-input-group>.pn-input-element{border-color:#a70707}pn-input .pn-input[data-error]>.pn-input-group>.pn-input-element:hover{border-color:#500715}pn-input .pn-input[data-error]>.pn-input-group>.pn-input-element:focus-visible{background-color:#ffffff;border-color:#a70707;outline-color:#a70707}pn-input .pn-input[data-error]>.pn-input-message[role=alert]{color:#a70707}pn-input .pn-input[data-valid]>.pn-input-label{color:#005e41}pn-input .pn-input[data-valid]>.pn-input-group>.pn-input-element{border-color:#005e41}pn-input .pn-input[data-valid]>.pn-input-group>.pn-input-element:hover{border-color:#002f24}pn-input .pn-input[data-valid]>.pn-input-group>.pn-input-element:focus-visible{background-color:#ffffff;border-color:#005e41;outline-color:#005e41}";const m=b;const g=class{constructor(t){e(this,t);this.offsetLeft=0;this.offsetRight=0;this.showHelperSlot=false;this.showErrorSlot=false;this.showPassword=false;this.label=undefined;this.helpertext=undefined;this.inputid=this.id;this.value="";this.language=null;this.icon=undefined;this.textPrefix=undefined;this.textSuffix=undefined;this.type="text";this.name=undefined;this.placeholder=undefined;this.autocomplete=undefined;this.maxlength=undefined;this.inputmode=undefined;this.list=undefined;this.pattern=undefined;this.min=undefined;this.max=undefined;this.step=undefined;this.arialabel=undefined;this.ariacontrols=undefined;this.required=false;this.disabled=false;this.readonly=false;this.valid=false;this.invalid=false;this.error=undefined}id=`pn-input-${s()}`;idMessage=`${this.id}-message`;prefix;suffix;mo;get hostElement(){return t(this)}togglePassword(){this.showPassword=!this.showPassword}handleOffset(){requestAnimationFrame((()=>requestAnimationFrame((()=>{const e=this.prefix?.clientWidth?this.prefix.clientWidth+8:0;const t=this.suffix?.clientWidth?this.suffix.clientWidth+8:0;this.offsetLeft=e;this.offsetRight=t}))))}handleMessage(){this.checkSlottedHelper();this.checkSlottedError()}async componentWillLoad(){this.handleMessage();if(this.inputid!==this.id)this.idMessage=`${this.inputid}-message`;if(this.language===null)await a(this.hostElement)}componentDidLoad(){this.handleOffset();if(this.mo)this.mo.disconnect();this.mo=new MutationObserver((()=>{this.handleOffset();this.handleMessage()}));this.mo.observe(this.hostElement,{subtree:true,childList:true})}setVal(e){const t=e.composedPath?.()[0];this.value=t.value}clearVal(){const e=new InputEvent("input",{bubbles:true,data:""});const t=this.hostElement.querySelector("input");this.value="";t.focus();t.value=this.value;t.dispatchEvent(e)}translate(e){return c?.[e]?.[this.language||p]}hasHelperText(){return this.helpertext?.length>0||this.showHelperSlot}hasErrorMessage(){return this.error?.length>0||this.showErrorSlot}hasError(){return this.hasErrorMessage()||this.invalid||this.showErrorSlot}hasMessage(){return this.hasHelperText()||this.hasErrorMessage()}checkSlottedHelper(){const e=this.hostElement.querySelector("[slot=helpertext]")?.textContent;this.showHelperSlot=!!e?.length}checkSlottedError(){const e=this.hostElement.querySelector("[slot=error]")?.textContent;this.showErrorSlot=!!e?.length}getInputType(){const e=["text","password","url","tel","search","number","email"];return e.includes(this.type)&&!this.showPassword?this.type:"text"}isPassword(){if(this.disabled)return false;return this.type==="password"||this.type==="text"&&this.showPassword}isSearch(){if(this.disabled)return false;return this.type==="search"&&!!this.value?.length}passwordText(){return this.translate(this.showPassword?"HIDE":"SHOW")}stateDisplay(){return this.valid||this.hasError()}stateIcon(){if(this.valid)return o;return r}stateColor(){if(this.valid)return"green700";return"warning"}showPrefix(){return this.textPrefix&&!this.icon}showSuffix(){return!this.showPrefix()&&!!this.textSuffix?.length&&!this.isPassword()&&this.type!=="search"}render(){return n(i,{key:"2bc031e2fc0f7cd478ff02ab4bb56adc5f4b46c0"},n("div",{key:"dc3a9890f53bd38e47447ac430811be4d14693fe",class:"pn-input","data-valid":this.valid,"data-error":this.hasError()},(this.label||this.maxlength>=1)&&n("label",{key:"7c214ac52d5b1a8cc7386a73ac4f630f78528049",htmlFor:this.inputid,class:"pn-input-label"},this.label&&n("span",{key:"905fa8707cbfa3a23eddad91f8ce5d98433d8f5f"},this.label),this.maxlength>=0&&n("span",{key:"6bc0675d6f15ee8d35424edc03e0c2fbbf7835ca"},`${this.value.length}/${this.maxlength}`)),n("div",{key:"917e726163fd0d954306ae7b3e4dfbb88e3a1672",class:"pn-input-group"},n("input",{key:"d8fdb828f60e1401a87dfd1166fa7b556502f03a",type:this.getInputType(),id:this.inputid,class:"pn-input-element",name:this.name,placeholder:this.placeholder,autocomplete:this.autocomplete,maxlength:this.maxlength,list:this.list,pattern:this.pattern,min:this.min,max:this.max,step:this.step,value:this.value,inputmode:this.inputmode,disabled:this.disabled,required:this.required,readonly:this.readonly,"aria-label":this.arialabel,"aria-describedby":this.hasMessage()?this.idMessage:null,"aria-controls":this.ariacontrols,"aria-invalid":this.hasError()?.toString(),style:{"--pn-input-offset-left":`${this.offsetLeft}px`,"--pn-input-offset-right":`${this.offsetRight}px`},onInput:e=>this.setVal(e)}),n("div",{key:"e94ec9cc3a31ab98e4c065b3dfbe1175b98856ad",class:"pn-input-eyecandy","data-prefix":true,ref:e=>this.prefix=e},!!this.icon&&n("pn-icon",{key:"8706a6c62500d9f4860c821f140f392300713433",icon:this.icon,"aria-hidden":"true"}),this.showPrefix()&&n("span",{key:"fe78515f28e209423b64364c11f8a639ddb9a190",class:"pn-input-text"},this.textPrefix)),n("div",{key:"48cd35cb9de70878cabeab034912ef0e823a5889",class:"pn-input-eyecandy","data-suffix":true,ref:e=>this.suffix=e},this.showSuffix()&&n("span",{key:"0b4f5bec4bfbf736716c08ff16b3c8f8827786d9",class:"pn-input-text"},this.textSuffix),this.stateDisplay()&&n("pn-icon",{key:"a6984b78251c0430f5eb43f4761d8ff12173dee2","aria-hidden":"true",icon:this.stateIcon(),color:this.stateColor()}),this.isPassword()&&n("pn-button",{key:"dde16f9148ec4a23482ae15cd20249a5f1cf622d",icon:this.showPassword?f:u,iconOnly:true,arialabel:this.passwordText(),small:true,appearance:"light",variant:"borderless",onClick:()=>this.togglePassword()}),this.isSearch()&&n("pn-button",{key:"0b9ceab2669930332d54eac6e67ef4eddc913a3a",icon:l,iconOnly:true,arialabel:this.translate("CLEAR"),small:true,appearance:"light",variant:"borderless",onClick:()=>this.clearVal()}))),n("p",{key:"3ca0b7bbf296d2545c30f501973e00d1f3105971",class:"pn-input-message",id:this.idMessage,role:this.hasErrorMessage()?"alert":null,hidden:!this.hasMessage()},this.hasHelperText()&&!this.hasError()&&n("span",{key:"4e01f516a3e607ebb693e11557536709e0b0c4ac",class:"pn-input-helper"},this.helpertext),n("span",{key:"7a7b1fc60f2fc479b13eb17f77d397dafbe9670a",class:"pn-input-helper-slot",hidden:!this.showHelperSlot||this.hasError()},n("slot",{key:"7fbf45a720fa99a002e18eee7c13a9139447d3dc",name:"helpertext"})),this.hasErrorMessage()&&n("span",{key:"5a8407a45b84b9cccac81729ec9858265a033760",class:"pn-input-error"},this.error),n("span",{key:"f3929bdf3e0b0986c82ec59959770cba462748e0",class:"pn-input-error-slot",hidden:!this.showErrorSlot},n("slot",{key:"e932cda8b4b4b162baf53234edafd82a94366436",name:"error"})))))}static get watchers(){return{textPrefix:["handleOffset"],textSuffix:["handleOffset"],helpertext:["handleMessage"],error:["handleMessage"]}}};g.style=m;export{g as pn_input};
//# sourceMappingURL=p-459160e7.entry.js.map