@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 r,k as s,e as l}from"./helpers.js";import{a as o}from"./alert_exclamation_circle.js";import{c as u}from"./check.js";import{c as d}from"./close.js";import{d as c}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-${r()}`;idHelper=`${this.id}-helper`;idError=`${this.id}-error`;prefix;suffix;mo;get hostElement(){return this}offsetLeft=0;offsetRight=0;showPassword=!1;togglePassword(){this.showPassword=!this.showPassword}label;helpertext;language=void 0;value="";type="text";name;placeholder;autocomplete;maxlength;inputmode;list;pattern;min;max;step;required=!1;readonly=!1;disabled=!1;compact=!1;icon;textPrefix;textSuffix;valid=!1;invalid=!1;error;pnId;pnAriaLabel;pnAriaLabelledby;pnAriaControls;inputid;arialabel;ariacontrols;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}))}handleId(){this.idHelper=`${this.getId()}-helper`,this.idError=`${this.getId()}-error`}connectedCallback(){this.mo=new MutationObserver((()=>{i(this.hostElement),this.handleOffset()})),this.mo.observe(this.hostElement,{childList:!0,subtree:!0})}disconnectedCallback(){this.mo&&this.mo.disconnect()}async componentWillLoad(){void 0===this.language&&await s(this.hostElement)}componentDidLoad(){this.handleOffset()}getId(){return this.pnId||this.inputid||this.id}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||l]}hasHelperText(){return this.helpertext?.length>0||this.checkSlottedHelper()}hasErrorMessage(){return this.error?.length>0||this.checkSlottedError()}hasError(){return this.hasErrorMessage()||this.invalid}hideHelpertext(){return this.hasErrorMessage()||!this.hasHelperText()}hideError(){return!this.hasErrorMessage()}checkSlottedHelper(){return!!this.hostElement.querySelector("[slot=helpertext]")}checkSlottedError(){return!!this.hostElement.querySelector("[slot=error]")}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:o}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}displayLabel(){return!!this.label}getAriaLabel(){return this.displayLabel()||this.pnAriaLabelledby?null:this.pnAriaLabel}getAriaLabelledby(){return this.displayLabel()||this.pnAriaLabel||this.arialabel?null:this.pnAriaLabelledby}getAriaDescribedby(){return this.hasErrorMessage()?this.idError:this.hasHelperText()?this.idHelper:null}renderLabel(){return a("label",{htmlFor:this.getId(),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:"800f4fb8490656e28657f7a4a041ba0c6dc46af2"},a("div",{key:"8defa078a3e541509bc17278751f8e59f59f3bd7",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:"dc01fb7fdb2a60ee89473f0152d833243be4ff8d",class:"pn-input-group"},a("input",{key:"32f63d4aa1c6edd2d10f8876ebd3371cff366eb7",type:this.getInputType(),id:this.getId(),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.getAriaLabel(),"aria-labelledby":this.getAriaLabelledby(),"aria-describedby":this.getAriaDescribedby(),"aria-controls":this.pnAriaControls||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:"b52d9bfa61569635f422fedc22edd09c768ab9d8",class:"pn-input-eyecandy","data-prefix":!0,ref:t=>this.prefix=t},!!this.icon&&a("pn-icon",{key:"e5035273e663855094ba88ed0b485a4e8ffed56c",icon:this.icon,"aria-hidden":"true"}),this.showPrefix()&&a("span",{key:"1d0e5355c5dbfecf3dbb693589726a233e3b7df6",class:"pn-input-text"},this.textPrefix)),a("div",{key:"e1faa82f19dcfdb6c427d5d2967bfb6694508675",class:"pn-input-eyecandy","data-suffix":!0,ref:t=>this.suffix=t},this.showSuffix()&&a("span",{key:"4c5ecf7c19bf64eea77b21b05d9ffe491bf4b91c",class:"pn-input-text"},this.textSuffix),this.displayState()&&a("pn-icon",{key:"f7014e0c31faf3c563c846e4a7061c6f4b35a64a","aria-hidden":"true",icon:this.stateIcon(),color:this.stateColor()}),this.isPassword()&&a("pn-button",{key:"21518c4f16245de370fcba302b177cfe04e91904",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:"60263a255ee8c8d3ed72ea89a26abfbe9be11d0d",icon:d,iconOnly:!0,arialabel:this.translate("CLEAR"),small:!0,appearance:"light",variant:"borderless",onClick:()=>this.clearVal()}))),a("p",{key:"d23165556ffcdbfcf7229a04f5c1ea8686432c97",id:this.idHelper,class:"pn-input-message",hidden:this.hideHelpertext()},!!this.helpertext&&a("span",{key:"b7e31855d677953bbc7a4f65cb0b26a5eac8887b"},this.helpertext),a("slot",{key:"a6bbaeceb31e2cc38d1e110b900e13b4f0957c6e",name:"helpertext"})),a("p",{key:"3668fbc1a512f92d3f5a2c6f1f7d86cf04df148b",id:this.idError,class:"pn-input-message",role:"alert",hidden:this.hideError()},!!this.error&&a("span",{key:"c14fb6ab8e17c7d17813c83c0993f95d079f8274"},this.error),a("slot",{key:"75ba01e945315e6a3bbf2f5e5ac34c73fe7ab57f",name:"error"}))))}static get watchers(){return{textPrefix:[{handleOffset:0}],textSuffix:[{handleOffset:0}],inputid:[{handleId:0}],pnId:[{handleId:1}]}}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],language:[1],value:[1025],type:[1025],name:[1],placeholder:[1],autocomplete:[1],maxlength:[2],inputmode:[1],list:[1],pattern:[1],min:[8],max:[8],step:[8],required:[4],readonly:[4],disabled:[4],compact:[4],icon:[1],textPrefix:[1,"text-prefix"],textSuffix:[1,"text-suffix"],valid:[4],invalid:[4],error:[1],pnId:[1,"pn-id"],pnAriaLabel:[1,"pn-aria-label"],pnAriaLabelledby:[1,"pn-aria-labelledby"],pnAriaControls:[1,"pn-aria-controls"],inputid:[1],arialabel:[1],ariacontrols:[1],offsetLeft:[32],offsetRight:[32],showPassword:[32]},void 0,{textPrefix:[{handleOffset:0}],textSuffix:[{handleOffset:0}],inputid:[{handleId:0}],pnId:[{handleId:1}]}]);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)))||c();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}