UNPKG

@postnord/web-components

Version:

PostNord Web Components

6 lines 6.22 kB
/*! * Built with Stencil * By PostNord. */ import{r as e,g as t,f as n,h as s,a as o}from"./p-43660913.js";import{a as i}from"./p-9a18b612.js";import{a as l}from"./p-bf967b50.js";import{u as c}from"./p-f64d17a6.js";const r="pn-select{display:inline-block}pn-select .pn-select-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-select .pn-select-label{transition-duration:0s;transition-delay:0s}}pn-select .pn-select-label>span{font-size:0.875em}pn-select .pn-select-input{position:relative}pn-select .pn-select-icon{pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);width:1.5em;height:1.5em;border-radius:50%;background-color:transparent}pn-select .pn-select-icon[data-default]{right:0.75em}pn-select .pn-select-icon[data-custom]{left:0.75em}pn-select .pn-select-icon[data-custom]~.pn-select-element{padding-left:3em}pn-select .pn-select-icon[data-error]{right:3em}pn-select .pn-select-icon[data-error]~.pn-select-element{padding-right:5em}pn-select .pn-select-icon>.pn-icon-svg{transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-select .pn-select-icon>.pn-icon-svg{transition-duration:0s;transition-delay:0s}}pn-select .pn-select-element{cursor:pointer;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-right:3em;-webkit-appearance:none;-moz-appearance:none;appearance:none}pn-select .pn-select-element:-webkit-autofill,pn-select .pn-select-element:-webkit-autofill:hover,pn-select .pn-select-element:-webkit-autofill:focus,pn-select .pn-select-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #e0f8ff inset;-webkit-text-fill-color:#2d2013}pn-select .pn-select-element:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}@media (prefers-reduced-motion: reduce){pn-select .pn-select-element{transition-duration:0s;transition-delay:0s}}pn-select .pn-select-element::placeholder{color:#5e554a;font-weight:normal}pn-select .pn-select-element:hover{border-color:#005d92}pn-select .pn-select-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}pn-select .pn-select-element:open+pn-icon .pn-icon-svg{transform:rotate(180deg)}pn-select .pn-select-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}pn-select .pn-select-element[data-placeholder]{color:#5e554a;font-weight:normal}pn-select .pn-select-element:hover{color:#2d2013;background-color:#effbff}pn-select .pn-select-no-results{margin:0;padding:0.75em}pn-select .pn-select-helper{color:#5e554a;font-size:0.875em;font-weight:400;margin:0.25em 0 0 0;display:flex;flex-direction:column;gap:0.25em}pn-select .pn-select-helper[role=alert]{color:#a70707}pn-select .pn-select[data-error]>.pn-select-label{color:#a70707}pn-select .pn-select[data-error]>.pn-select-input>.pn-select-element{border-color:#a70707}pn-select .pn-select[data-error]>.pn-select-input>.pn-select-element:hover{border-color:#500715}pn-select .pn-select[data-error]>.pn-select-input>.pn-select-element:focus-visible{background-color:#ffffff;border-color:#a70707;outline-color:#a70707}pn-select .pn-select[data-error]>.pn-select-input>.pn-select-element:hover{background-color:#fdefee}";const a=r;const d=class{constructor(t){e(this,t);this.label=undefined;this.helpertext=undefined;this.selectId=this.id;this.icon=undefined;this.name=undefined;this.form=undefined;this.autocomplete=undefined;this.required=false;this.disabled=false;this.invalid=false;this.error=undefined}id=`pn-select-${c()}`;idHelpertext=`${this.id}-text`;select;mo;get hostElement(){return t(this)}componentDidLoad(){if(this.mo)this.mo.disconnect();this.mo=new MutationObserver((()=>n(this.hostElement)));this.mo.observe(this.hostElement,{childList:true,subtree:true})}hasError(){return this.invalid||!!this.error}hasMessage(){return!!this.helpertext||!!this.error}render(){return s(o,{key:"1e9048eda53ecaa901689f0164cba2a389f543df"},s("div",{key:"e24db0f74c4d3657bb1ee6903160fcdaf2910da4",class:"pn-select","data-error":this.hasError()},this.label&&s("label",{key:"c4e6c6c613df6392b0a67123d46f9474ae0e305f",htmlFor:this.selectId,class:"pn-select-label"},s("span",{key:"58965840227667a57d624538702990125c5f7dca"},this.label)),s("div",{key:"d48cef7cd8ceb7cc7fafce1da20574d933d9413f",class:"pn-select-input"},this.icon&&s("pn-icon",{key:"f4021fd781fb67e2df267606b165607369fd0371",class:"pn-select-icon",icon:this.icon,"data-custom":true,"aria-hidden":"true"}),this.hasError()&&s("pn-icon",{key:"e7d35d9f8191aec7c0ced7442b2419c9dc88fb44",class:"pn-select-icon",icon:i,color:"warning","data-error":true,"aria-hidden":"true"}),s("select",{key:"1b2bd070a7d12e7504bfddfb389d1cb3e9a9053f",id:this.selectId,class:"pn-select-element",name:this.name,form:this.form,autocomplete:this.autocomplete,"aria-describedby":this.hasMessage()&&this.idHelpertext,"aria-invalid":this.hasError().toString(),disabled:this.disabled,"data-placeholder":this.select?.value==="",ref:e=>this.select=e},s("slot",{key:"b9d68ad6844d3c0444f4a4c0f53e7f4c98ce41f7"})),s("pn-icon",{key:"66bc82e862821f70b7f62559c00a9937301b3715",class:"pn-select-icon",icon:l,color:"blue700","data-default":true,"aria-hidden":"true"})),this.hasMessage()&&s("p",{key:"100c25db7cb319a1ae7389bc862ffbcdb6b8f6d3",id:this.idHelpertext,class:"pn-select-helper",role:!!this.error?"alert":null},s("span",{key:"73a0373c059ee9d0ec9abd4bcbf99a48409d8112"},this.error||this.helpertext))))}};d.style=a;export{d as pn_select}; //# sourceMappingURL=p-936ed2a1.entry.js.map