@postnord/web-components/postnord-web-components/p-e087c5c5.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,k as a,e as p}from"./p-f64d17a6.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 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="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=d;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="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 c=h;const f={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;-webkit-tap-highlight-color:transparent;transition-property:color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-input .pn-input-label{transition-duration:0s;transition-delay:0s}}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}@media (prefers-reduced-motion: reduce){pn-input .pn-input-element{transition-duration:0s;transition-delay:0s}}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 f?.[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:"6b2db20d9aa3c3d300814a71022a6fe314fa6d03"},n("div",{key:"419fa861a5748d0c95e9e69b9defd48f50975683",class:"pn-input","data-valid":this.valid,"data-error":this.hasError()},(this.label||this.maxlength>=1)&&n("label",{key:"06576cf8fe7613382cb7aa64d00ece94556a1304",htmlFor:this.inputid,class:"pn-input-label"},this.label&&n("span",{key:"2c534cf97da3005b773e57ea6623240afea8186d"},this.label),this.maxlength>=0&&n("span",{key:"ab2626d9046b75f372a4e01a7234969017837f2f"},`${this.value.length}/${this.maxlength}`)),n("div",{key:"e236d0a4dc4c7c719ea2f4be51cd81def68ca53b",class:"pn-input-group"},n("input",{key:"8aeb20eaa6fe21732c813bb5f9a8028cc0dcbc76",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:"409947a09fe6960778458060590c47ee204ea534",class:"pn-input-eyecandy","data-prefix":true,ref:e=>this.prefix=e},!!this.icon&&n("pn-icon",{key:"0e914746aecea9a37c4f66304e89a82197defd7a",icon:this.icon,"aria-hidden":"true"}),this.showPrefix()&&n("span",{key:"e6a7eb7f10ac9d5cf5de4f2064e3922038dfc9e0",class:"pn-input-text"},this.textPrefix)),n("div",{key:"f97005264aca3330f9b7c4eb0489c36f7bd31842",class:"pn-input-eyecandy","data-suffix":true,ref:e=>this.suffix=e},this.showSuffix()&&n("span",{key:"769efb326ce6d4058ee4d8d6c5d2f3b781c65c11",class:"pn-input-text"},this.textSuffix),this.stateDisplay()&&n("pn-icon",{key:"fe18921f222fd14d91edc799da3f50c6d1c7dff8","aria-hidden":"true",icon:this.stateIcon(),color:this.stateColor()}),this.isPassword()&&n("pn-button",{key:"7e10d1c4502d9abc9fd8156652718e04cdfa9955",icon:this.showPassword?c:u,iconOnly:true,arialabel:this.passwordText(),small:true,appearance:"light",variant:"borderless",onClick:()=>this.togglePassword()}),this.isSearch()&&n("pn-button",{key:"841edb1592c21de8315a0b1c4a8a7c9815c61e01",icon:l,iconOnly:true,arialabel:this.translate("CLEAR"),small:true,appearance:"light",variant:"borderless",onClick:()=>this.clearVal()}))),n("p",{key:"fb41bb4f2559b05cae5b80d214c218429493b5ba",class:"pn-input-message",id:this.idMessage,role:this.hasErrorMessage()?"alert":null,hidden:!this.hasMessage()},this.hasHelperText()&&!this.hasError()&&n("span",{key:"a4b226408274dc3fc6788af3932edd5b05f398f3",class:"pn-input-helper"},this.helpertext),n("span",{key:"488b39c606ca027df73153a9e6e83b4d59360814",class:"pn-input-helper-slot",hidden:!this.showHelperSlot||this.hasError()},n("slot",{key:"3cf5c96a8ee99d1d1954a3075862119512ef589c",name:"helpertext"})),this.hasErrorMessage()&&n("span",{key:"b6907bee94961eeb0f4c8c3c59d4f8cc30080754",class:"pn-input-error"},this.error),n("span",{key:"0193a2c21c1d248f762207351b7bba336368cd6c",class:"pn-input-error-slot",hidden:!this.showErrorSlot},n("slot",{key:"9e7b771c38bbdd7b3fd75bdc0587c21dcfef2857",name:"error"})))))}static get watchers(){return{textPrefix:["handleOffset"],textSuffix:["handleOffset"],helpertext:["handleMessage"],error:["handleMessage"]}}};g.style=m;export{g as pn_input};
//# sourceMappingURL=p-e087c5c5.entry.js.map