@postnord/web-components/components/pn-input2.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{transformTag as t,proxyCustomElement as e,HTMLElement as n,forceUpdate as i,h as a,Host as p}from"@stencil/core/internal/client";import{u as s,k as r,e as o}from"./helpers.js";import{a as l}from"./alert_exclamation_circle.js";import{c as u}from"./check.js";import{c}from"./close.js";import{d}from"./pn-button2.js";import{d as h}from"./pn-icon2.js";import{d as f}from"./pn-spinner2.js";const m={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"}},b=e(class extends n{constructor(t){super(),!1!==t&&this.__registerHost()}id=`pn-input-${s()}`;idMessage=`${this.id}-message`;prefix;suffix;mo;get hostElement(){return this}offsetLeft=0;offsetRight=0;showHelperSlot=!1;showErrorSlot=!1;showPassword=!1;togglePassword(){this.showPassword=!this.showPassword}label;helpertext;inputid=this.id;value="";language=null;compact=!1;icon;textPrefix;textSuffix;type="text";name;placeholder;autocomplete;maxlength;inputmode;list;pattern;min;max;step;arialabel;ariacontrols;required=!1;disabled=!1;readonly=!1;valid=!1;invalid=!1;error;handleOffset(){requestAnimationFrame((()=>{const t=this.prefix?.clientWidth?this.prefix.clientWidth+8:0,e=this.suffix?.clientWidth?this.suffix.clientWidth+8:0;this.offsetLeft=t,this.offsetRight=e}))}handleMessage(){this.checkSlottedHelper(),this.checkSlottedError()}connectedCallback(){this.mo=new MutationObserver((()=>{i(this.hostElement),this.handleOffset(),this.handleMessage()})),this.mo.observe(this.hostElement,{childList:!0,subtree:!0})}disconnectedCallback(){this.mo&&this.mo.disconnect()}async componentWillLoad(){this.handleMessage(),this.inputid!==this.id&&(this.idMessage=`${this.inputid}-message`),null===this.language&&await r(this.hostElement)}componentDidLoad(){this.handleOffset()}setVal(t){const e=t.composedPath?.()[0];this.value=e.value}clearVal(){const t=new InputEvent("input",{bubbles:!0,data:""}),e=this.hostElement.querySelector("input");this.value="",e.focus(),e.value=this.value,e.dispatchEvent(t)}translate(t){return m?.[t]?.[this.language||o]}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 t=this.hostElement.querySelector("[slot=helpertext]")?.textContent;this.showHelperSlot=!!t?.length}checkSlottedError(){const t=this.hostElement.querySelector("[slot=error]")?.textContent;this.showErrorSlot=!!t?.length}getInputType(){return["text","password","url","tel","search","number","email"].includes(this.type)&&!this.showPassword?this.type:"text"}isPassword(){return!this.disabled&&("password"===this.type||"text"===this.type&&this.showPassword)}passwordText(){return this.translate(this.showPassword?"HIDE":"SHOW")}displayState(){return this.valid||this.hasError()}stateIcon(){return this.valid?u:l}stateColor(){return this.valid?"green700":"warning"}showPrefix(){return this.textPrefix&&!this.icon}showSuffix(){return!this.showPrefix()&&!!this.textSuffix?.length&&!this.isPassword()&&"search"!==this.type}showClear(){return!this.disabled&&!this.readonly&&"search"===this.type&&!!this.value?.length}validLabel(){return this.label?.length>0||this.maxlength>=1}useLabel(){return this.validLabel()&&!this.compact}useCompactLabel(){return this.validLabel()&&this.compact}renderLabel(){return a("label",{htmlFor:this.inputid,class:"pn-input-label","data-compact":this.compact},this.label&&a("span",null,this.label),this.maxlength>=0&&a("span",null,`${this.value.length}/${this.maxlength}`))}render(){return a(p,{key:"3250630450288d09811b7c78bca5091ba93ec7ab"},a("div",{key:"db673ba19f300966eaf5c38136fe7d6143aa661d",class:"pn-input","data-valid":this.valid,"data-error":this.hasError(),style:{"--pn-input-offset-left":`${this.offsetLeft}px`,"--pn-input-offset-right":`${this.offsetRight}px`}},this.useLabel()&&this.renderLabel(),a("div",{key:"b216b7f951be237aed6e46f1ccbcfd29b2a3cad1",class:"pn-input-group"},a("input",{key:"4ee129c35c6a74a359df9d611b236132d7afac38",type:this.getInputType(),id:this.inputid,class:"pn-input-element",name:this.name,placeholder:this.compact?this.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(),"data-compact":this.compact,"data-value":this.value?.length>0,onInput:t=>this.setVal(t)}),this.useCompactLabel()&&this.renderLabel(),a("div",{key:"753a9abeaf5bfa5ffb3be10042a76aa7863bce9c",class:"pn-input-eyecandy","data-prefix":!0,ref:t=>this.prefix=t},!!this.icon&&a("pn-icon",{key:"acf1a6e42c9d37cab6f6a0453d8ea674df1cd0c3",icon:this.icon,"aria-hidden":"true"}),this.showPrefix()&&a("span",{key:"70d2eb7e94e790d665a57557595c2bce4855b827",class:"pn-input-text"},this.textPrefix)),a("div",{key:"1dcae3fb8489d2dc6aa7325baea693591acef31c",class:"pn-input-eyecandy","data-suffix":!0,ref:t=>this.suffix=t},this.showSuffix()&&a("span",{key:"05044f3fbea582d507de30a0ff751abaf1da3206",class:"pn-input-text"},this.textSuffix),this.displayState()&&a("pn-icon",{key:"727650c9e6c9b9da2ef43e933fab95b6adc8a6bb","aria-hidden":"true",icon:this.stateIcon(),color:this.stateColor()}),this.isPassword()&&a("pn-button",{key:"4e28eddff11c9aea670a6764aeb0316bccba1c1c",icon:this.showPassword?'<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>':'<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>',iconOnly:!0,arialabel:this.passwordText(),small:!0,appearance:"light",variant:"borderless",onClick:()=>this.togglePassword()}),this.showClear()&&a("pn-button",{key:"2181adb68c152d837ef03bf9b7e0eb66eb3ea6d2",icon:c,iconOnly:!0,arialabel:this.translate("CLEAR"),small:!0,appearance:"light",variant:"borderless",onClick:()=>this.clearVal()}))),a("p",{key:"b8b1039a61a23efd24ebd71285b15cce7bfc5ec0",class:"pn-input-message",id:this.idMessage,role:this.hasErrorMessage()?"alert":null,hidden:!this.hasMessage()},this.hasHelperText()&&!this.hasError()&&a("span",{key:"4433df6b700cc40ce2ae698d2474f57163b398a1",class:"pn-input-helper"},this.helpertext),a("span",{key:"41c8fb1cbbc17b7c349922cac2ff42244a017e0c",class:"pn-input-helper-slot",hidden:!this.showHelperSlot||this.hasError()},a("slot",{key:"5628bbc8db75161d18ad3e75c259bf3eb5fc9052",name:"helpertext"})),this.hasErrorMessage()&&a("span",{key:"e41145d7fab9f3ae35dd428971c79673d0531301",class:"pn-input-error"},this.error),a("span",{key:"ae85a9420fcb449cc874eadc7a066dd772f097a9",class:"pn-input-error-slot",hidden:!this.showErrorSlot},a("slot",{key:"bdd31ab2f706cac6e243562d035361a381ecfa43",name:"error"})))))}static get watchers(){return{textPrefix:[{handleOffset:0}],textSuffix:[{handleOffset:0}],helpertext:[{handleMessage:0}],error:[{handleMessage:0}]}}static get style(){return`${t("pn-input")}{display:inline-flex;flex-direction:column}${t("pn-input")} .pn-input{--pn-input-offset-left:0em;--pn-input-offset-right:0em}${t("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, transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${t("pn-input")} .pn-input-label{transition-duration:0s;transition-delay:0s}}${t("pn-input")} .pn-input-label[data-compact]{position:absolute;top:1.5625em;left:calc(var(--pn-input-offset-left, 0px) + 0.75em + 0.0625em);margin:0;pointer-events:none;align-items:center;height:1.5em;max-width:calc(100% - (var(--pn-input-offset-left, 0px) + 0.75em) - (var(--pn-input-offset-right, 0px) + 0.75em));transform:translateY(-50%) scale(1) translateZ(0);transform-origin:0 0;transition-delay:0.2s}${t("pn-input")} .pn-input-label[data-compact]>span{font-size:1em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;line-height:1.5em}${t("pn-input")} .pn-input-label>span{font-size:0.875em}${t("pn-input")} .pn-input-group{position:relative}${t("pn-input")} .pn-input-element{width:100%;color:#2d2013;background-color:#ffffff;border:0.0625em solid #969087;border-radius:0.5em;padding:0.75em calc(0.75em + var(--pn-input-offset-right)) 0.75em calc(0.75em + var(--pn-input-offset-left));font-family:inherit;font-size:1em;font-weight:500;line-height:1.5em;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}${t("pn-input")} .pn-input-element:-webkit-autofill,${t("pn-input")} .pn-input-element:-webkit-autofill:hover,${t("pn-input")} .pn-input-element:-webkit-autofill:focus,${t("pn-input")} .pn-input-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #e0f8ff inset;-webkit-text-fill-color:#2d2013}${t("pn-input")} .pn-input-element{outline:0.2rem solid transparent;outline-offset:0.2rem}${t("pn-input")} .pn-input-element:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}${t("pn-input")} .pn-input-element{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){${t("pn-input")} .pn-input-element{transition-duration:0s;transition-delay:0s}}${t("pn-input")} .pn-input-element[data-compact]{text-align:left;padding-top:1.125em;padding-bottom:0.375em;max-width:unset}${t("pn-input")} .pn-input-element[data-compact]::placeholder{color:transparent}${t("pn-input")} .pn-input-element[data-compact]:focus+.pn-input-label,${t("pn-input")} .pn-input-element[data-compact]:not(:placeholder-shown)+.pn-input-label{transform:translateY(-85%) scale(0.75);transition-delay:0s}${t("pn-input")} .pn-input-element::placeholder{color:#5e554a;font-weight:normal}${t("pn-input")} .pn-input-element:hover{border-color:#005d92}${t("pn-input")} .pn-input-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}${t("pn-input")} .pn-input-element:read-only{border-color:#ffffff}${t("pn-input")} .pn-input-element:disabled~.pn-input-eyecandy>${t("pn-icon")}>.pn-icon-svg>path{fill:#969087}${t("pn-input")} .pn-input-element::-webkit-calendar-picker-indicator{visibility:hidden;display:none !important}${t("pn-input")} .pn-input-element::-webkit-textfield-decoration-container,${t("pn-input")} .pn-input-element::-webkit-search-cancel-button,${t("pn-input")} .pn-input-element::-webkit-inner-spin-button,${t("pn-input")} .pn-input-element::-webkit-outer-spin-button,${t("pn-input")} .pn-input-element::-webkit-search-decoration{-webkit-appearance:none;-moz-appearance:none;appearance:none}${t("pn-input")} .pn-input-element[type=number]{appearance:textfield}${t("pn-input")} .pn-input-eyecandy{position:absolute;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;gap:0.5em;height:1.5em}${t("pn-input")} .pn-input-eyecandy[data-prefix]{left:0.75em}${t("pn-input")} .pn-input-eyecandy[data-suffix]{right:0.75em}${t("pn-input")} .pn-input-text{color:#5e554a;font-weight:400;line-height:1.5em}${t("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}${t("pn-input")} .pn-input-message[hidden],${t("pn-input")} .pn-input-message>span[hidden]{display:none}${t("pn-input")} .pn-input[data-error]>.pn-input-label{color:#a70707}${t("pn-input")} .pn-input[data-error]>.pn-input-group>.pn-input-element{border-color:#a70707}${t("pn-input")} .pn-input[data-error]>.pn-input-group>.pn-input-element:hover{border-color:#500715}${t("pn-input")} .pn-input[data-error]>.pn-input-group>.pn-input-element:focus-visible{background-color:#ffffff;border-color:#a70707;outline-color:#a70707}${t("pn-input")} .pn-input[data-error]>.pn-input-group>.pn-input-element:-webkit-autofill,${t("pn-input")} .pn-input[data-error]>.pn-input-group>.pn-input-element:-webkit-autofill:hover,${t("pn-input")} .pn-input[data-error]>.pn-input-group>.pn-input-element:-webkit-autofill:focus,${t("pn-input")} .pn-input[data-error]>.pn-input-group>.pn-input-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #fef7f6 inset;-webkit-text-fill-color:#2d2013}${t("pn-input")} .pn-input[data-error]>.pn-input-message[role=alert]{color:#a70707}${t("pn-input")} .pn-input[data-valid]>.pn-input-label{color:#005e41}${t("pn-input")} .pn-input[data-valid]>.pn-input-group>.pn-input-element{border-color:#005e41}${t("pn-input")} .pn-input[data-valid]>.pn-input-group>.pn-input-element:hover{border-color:#002f24}${t("pn-input")} .pn-input[data-valid]>.pn-input-group>.pn-input-element:focus-visible{background-color:#ffffff;border-color:#005e41;outline-color:#005e41}${t("pn-input")} .pn-input[data-valid]>.pn-input-group>.pn-input-element:-webkit-autofill,${t("pn-input")} .pn-input[data-valid]>.pn-input-group>.pn-input-element:-webkit-autofill:hover,${t("pn-input")} .pn-input[data-valid]>.pn-input-group>.pn-input-element:-webkit-autofill:focus,${t("pn-input")} .pn-input[data-valid]>.pn-input-group>.pn-input-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #edfbf3 inset;-webkit-text-fill-color:#2d2013}`}},[772,"pn-input",{label:[1],helpertext:[1],inputid:[1],value:[1025],language:[1],compact:[4],icon:[1],textPrefix:[1,"text-prefix"],textSuffix:[1,"text-suffix"],type:[1025],name:[1],placeholder:[1],autocomplete:[1],maxlength:[2],inputmode:[1],list:[1],pattern:[1],min:[8],max:[8],step:[8],arialabel:[1],ariacontrols:[1],required:[4],disabled:[4],readonly:[4],valid:[4],invalid:[4],error:[1],offsetLeft:[32],offsetRight:[32],showHelperSlot:[32],showErrorSlot:[32],showPassword:[32]},void 0,{textPrefix:[{handleOffset:0}],textSuffix:[{handleOffset:0}],helpertext:[{handleMessage:0}],error:[{handleMessage:0}]}]);function g(){"undefined"!=typeof customElements&&["pn-input","pn-button","pn-icon","pn-spinner"].forEach((e=>{switch(e){case"pn-input":customElements.get(t(t(e)))||customElements.define(t(t(e)),b);break;case"pn-button":customElements.get(t(t(e)))||d();break;case"pn-icon":customElements.get(t(t(e)))||h();break;case"pn-spinner":customElements.get(t(t(e)))||f()}}))}export{b as P,g as d}