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

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{transformTag as e,proxyCustomElement as t,HTMLElement as n,forceUpdate as l,h as s,Host as a}from"@stencil/core/internal/client";import{a as r}from"./alert_exclamation_circle.js";import{c}from"./chevron_down.js";import{u as i}from"./helpers.js";import{d as o}from"./pn-icon2.js";const p=t(class extends n{constructor(e){super(),!1!==e&&this.__registerHost()}id=`pn-select-${i()}`;idHelper=`${this.id}-text`;idError=`${this.id}-error`;mo;get hostElement(){return this}label;helpertext;name;form;autocomplete;required=!1;disabled=!1;compact=!1;icon;invalid=!1;error;pnId;pnAriaLabel;pnAriaLabelledby;selectId;handleId(){this.idHelper=`${this.getId()}-text`,this.idError=`${this.getId()}-error`}connectedCallback(){this.mo=new MutationObserver((()=>l(this.hostElement))),this.mo.observe(this.hostElement,{childList:!0,subtree:!0})}disconnectedCallback(){this.mo&&this.mo.disconnect()}hasHelperText(){return this.helpertext?.length>0||this.checkSlottedHelper()}hasErrorMessage(){return this.error?.length>0||this.checkSlottedError()}hasError(){return this.hasErrorMessage()||this.invalid||this.checkSlottedError()}checkSlottedHelper(){return!!this.hostElement.querySelector("[slot=helpertext]")}checkSlottedError(){return!!this.hostElement.querySelector("[slot=error]")}hideHelpertext(){return this.hasErrorMessage()||!this.hasHelperText()}hideError(){return!this.hasErrorMessage()}getId(){return this.pnId||this.selectId||this.id}displayLabel(){return!!this.label}getAriaLabel(){return this.displayLabel()||this.pnAriaLabelledby?null:this.pnAriaLabel}getAriaLabelledby(){return this.displayLabel()||this.pnAriaLabel?null:this.pnAriaLabelledby}getAriaDescribedby(){const e=[];return this.hasErrorMessage()?e.push(this.idError):this.hasHelperText()&&e.push(this.idHelper),e.length?e.join(" "):null}renderLabel(){return this.label?s("label",{htmlFor:this.getId(),class:"pn-select-label","data-compact":this.compact,"data-icon":!!this.icon},s("span",null,this.label)):null}render(){return s(a,{key:"dfd4d3814426a88b975bd86948c7ac2207255f4b"},s("div",{key:"5423289d1771840d08ab1de18ab3af4a31cb98f1",class:"pn-select","data-error":this.hasError()},!this.compact&&this.renderLabel(),s("div",{key:"164933a196821353cf7ca31d6d12b65a84da012a",class:"pn-select-input"},this.icon&&s("pn-icon",{key:"da732b9152cba5035039a9761f38471d5885ddb1",class:"pn-select-icon",icon:this.icon,"data-custom":!0,"aria-hidden":"true"}),this.hasError()&&s("pn-icon",{key:"3370ffc0f4f6de399762bf5d854433020830ff2e",class:"pn-select-icon",icon:r,color:"warning","data-error":!0,"aria-hidden":"true"}),s("select",{key:"2a31f44242dd230d68c8d10ed461aeb25f8ec231",id:this.getId(),class:"pn-select-element",name:this.name,form:this.form,autocomplete:this.autocomplete,"aria-label":this.getAriaLabel(),"aria-labelledby":this.getAriaLabelledby(),"aria-describedby":this.getAriaDescribedby(),"aria-invalid":this.hasError().toString(),disabled:this.disabled,"data-compact":this.compact},s("slot",{key:"8130b7ac6969e2fa0c801e0b10a47e97cf6505bf"})),this.compact&&this.renderLabel(),s("pn-icon",{key:"c2167ea78e00914296efd758d044a9ea24e428da",class:"pn-select-icon",icon:c,color:"blue700","data-default":!0,"aria-hidden":"true"})),s("p",{key:"528f5a13255b52009b6b291eff57a164b3650f07",id:this.idHelper,class:"pn-select-text",hidden:this.hideHelpertext()},s("span",{key:"0a802a236cef453ef78783a051b29ccfd0efd997"},this.helpertext),s("slot",{key:"b23ef510ec48ac499ab6c589d0be1b71517a9496",name:"helpertext"})),s("p",{key:"026c3978d58c24193731048373e83510002dd116",id:this.idError,class:"pn-select-text",role:"alert",hidden:this.hideError()},s("span",{key:"b8724dfc973607a0f4776aa40846c2c86c33c8af"},this.error),s("slot",{key:"90b29ba6d58e629783c4c8264c9aeaf3d84ffce8",name:"error"}))))}static get watchers(){return{selectId:[{handleId:0}],pnId:[{handleId:1}]}}static get style(){return`${e("pn-select")}{display:inline-block}${e("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, transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-select")} .pn-select-label{transition-duration:0s;transition-delay:0s}}${e("pn-select")} .pn-select-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}${e("pn-select")} .pn-select-label[data-compact]>span{font-size:1em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;line-height:1.5em}${e("pn-select")} .pn-select-label>span{font-size:0.875em}${e("pn-select")} .pn-select-label[data-compact][data-icon]{--pn-input-offset-left:calc(2em)}${e("pn-select")} .pn-select-input{position:relative}${e("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}${e("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){${e("pn-select")} .pn-select-icon .pn-icon-svg{transition-duration:0s;transition-delay:0s}}${e("pn-select")} .pn-select-icon[data-default]{right:1em}${e("pn-select")} .pn-select-icon[data-custom]{left:0.75em}${e("pn-select")} .pn-select-icon[data-custom]~.pn-select-element{padding-left:2.75em}${e("pn-select")} .pn-select-icon[data-error]{right:3.5em}${e("pn-select")} .pn-select-icon[data-error]~.pn-select-element{padding-right:5.5em}${e("pn-select")} .pn-select-element{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;text-overflow:ellipsis;white-space:nowrap;color:#2d2013;background-color:#ffffff;border:0.0625em solid #969087;border-radius:0.5em;padding:0.75em 3em 0.75em 0.75em;font-family:inherit;font-size:1em;font-weight:500;line-height:1.5em;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}${e("pn-select")} .pn-select-element:-webkit-autofill,${e("pn-select")} .pn-select-element:-webkit-autofill:hover,${e("pn-select")} .pn-select-element:-webkit-autofill:focus,${e("pn-select")} .pn-select-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #e0f8ff inset;-webkit-text-fill-color:#2d2013}${e("pn-select")} .pn-select-element{outline:0.2rem solid transparent;outline-offset:0.2rem}${e("pn-select")} .pn-select-element:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}${e("pn-select")} .pn-select-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){${e("pn-select")} .pn-select-element{transition-duration:0s;transition-delay:0s}}${e("pn-select")} .pn-select-element[data-compact]{text-align:left;padding-top:1.125em;padding-bottom:0.375em;max-width:unset}${e("pn-select")} .pn-select-element[data-compact]::placeholder{color:transparent}${e("pn-select")} .pn-select-element[data-compact]:focus+.pn-select-label,${e("pn-select")} .pn-select-element[data-compact]:not(:placeholder-shown)+.pn-select-label{transform:translateY(-85%) scale(0.75);transition-delay:0s}${e("pn-select")} .pn-select-element::placeholder{color:#5e554a;font-weight:normal}${e("pn-select")} .pn-select-element:hover{border-color:#005d92}${e("pn-select")} .pn-select-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}${e("pn-select")} .pn-select-element:open~.pn-select-icon .pn-icon-svg{transform:rotate(180deg)}${e("pn-select")} .pn-select-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2;pointer-events:none}${e("pn-select")} .pn-select-element:disabled:hover{background-color:#f3f2f2}${e("pn-select")} .pn-select-element:has(option[value=""]:checked){color:#5e554a;font-weight:normal}${e("pn-select")} .pn-select-element:hover{color:#2d2013;background-color:#effbff}${e("pn-select")} .pn-select-no-results{margin:0;padding:0.75em}${e("pn-select")} .pn-select-text{color:#5e554a;font-size:0.875em;font-weight:400;margin:0.25em 0 0 0;display:flex;flex-direction:column;gap:0.25em}${e("pn-select")} .pn-select-text[role=alert]{color:#a70707}${e("pn-select")} .pn-select[data-error]>.pn-select-label{color:#a70707}${e("pn-select")} .pn-select[data-error]>.pn-select-input>.pn-select-element{border-color:#a70707}${e("pn-select")} .pn-select[data-error]>.pn-select-input>.pn-select-element:hover{border-color:#500715}${e("pn-select")} .pn-select[data-error]>.pn-select-input>.pn-select-element:focus-visible{background-color:#ffffff;border-color:#a70707;outline-color:#a70707}${e("pn-select")} .pn-select[data-error]>.pn-select-input>.pn-select-element:-webkit-autofill,${e("pn-select")} .pn-select[data-error]>.pn-select-input>.pn-select-element:-webkit-autofill:hover,${e("pn-select")} .pn-select[data-error]>.pn-select-input>.pn-select-element:-webkit-autofill:focus,${e("pn-select")} .pn-select[data-error]>.pn-select-input>.pn-select-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #fef7f6 inset;-webkit-text-fill-color:#2d2013}${e("pn-select")} .pn-select[data-error]>.pn-select-input>.pn-select-element:hover{background-color:#fdefee}`}},[772,"pn-select",{label:[1],helpertext:[1],name:[1],form:[1],autocomplete:[1],required:[4],disabled:[4],compact:[4],icon:[1],invalid:[4],error:[1],pnId:[1,"pn-id"],pnAriaLabel:[1,"pn-aria-label"],pnAriaLabelledby:[1,"pn-aria-labelledby"],selectId:[1,"select-id"]},void 0,{selectId:[{handleId:0}],pnId:[{handleId:1}]}]);function d(){"undefined"!=typeof customElements&&["pn-select","pn-icon"].forEach((t=>{switch(t){case"pn-select":customElements.get(e(e(t)))||customElements.define(e(e(t)),p);break;case"pn-icon":customElements.get(e(e(t)))||o()}}))}export{p as P,d}