@postnord/web-components
Version:
PostNord Web Components
6 lines • 3.73 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import{r as e,g as s,f as t,h as i,a as d}from"./p-c2c6299e.js";import{u as n}from"./p-c511b4fb.js";import{a as l}from"./p-9a18b612.js";import{a as p}from"./p-fc06684e.js";const f="pn-fieldset{display:inline-block}pn-fieldset .pn-fieldset{border:0;padding:0;margin:0;color:#2d2013;display:flex;flex-direction:column;font-size:1em}pn-fieldset .pn-fieldset-legend{float:left;font-weight:500;line-height:1.4;padding:0}pn-fieldset .pn-fieldset-helpertext{color:#5e554a;margin:0}pn-fieldset .pn-fieldset-items{padding:0.75em 0;display:flex;flex-direction:column;gap:0.75em}pn-fieldset .pn-fieldset-message-wrapper{display:flex;gap:0.75em;color:#2d2013;line-height:1.4;font-weight:400}pn-fieldset .pn-fieldset-message-wrapper[hidden]{display:none}pn-fieldset .pn-fieldset-message{margin:0}pn-fieldset .pn-fieldset[data-error]>.pn-fieldset-legend,pn-fieldset .pn-fieldset[data-error]>.pn-fieldset-helpertext,pn-fieldset .pn-fieldset[data-error]>.pn-fieldset-message-wrapper{color:#a70707}pn-fieldset .pn-fieldset[data-error]>.pn-fieldset-legend>pn-icon .pn-icon-svg>path,pn-fieldset .pn-fieldset[data-error]>.pn-fieldset-helpertext>pn-icon .pn-icon-svg>path,pn-fieldset .pn-fieldset[data-error]>.pn-fieldset-message-wrapper>pn-icon .pn-icon-svg>path{fill:#a70707}pn-fieldset .pn-fieldset:disabled>.pn-fieldset-legend,pn-fieldset .pn-fieldset:disabled>.pn-fieldset-helpertext,pn-fieldset .pn-fieldset:disabled>.pn-fieldset-message,pn-fieldset .pn-fieldset:disabled>.pn-fieldset-message-wrapper{color:#2d2013}pn-fieldset .pn-fieldset:disabled>.pn-fieldset-legend>pn-icon .pn-icon-svg>path,pn-fieldset .pn-fieldset:disabled>.pn-fieldset-helpertext>pn-icon .pn-icon-svg>path,pn-fieldset .pn-fieldset:disabled>.pn-fieldset-message>pn-icon .pn-icon-svg>path,pn-fieldset .pn-fieldset:disabled>.pn-fieldset-message-wrapper>pn-icon .pn-icon-svg>path{fill:#2d2013}";const a=f;const r=class{constructor(s){e(this,s)}mo;id=`pn-fieldset-${n()}`;idHelpertext=`${this.id}-helpertext`;get hostElement(){return s(this)}legend;helpertext;fieldsetId=this.id;form;name;disabled=false;invalid=false;error;handleId(){this.idHelpertext=`${this.fieldsetId}-helpertext`}componentWillLoad(){this.handleId()}componentDidLoad(){if(this.mo)this.mo.disconnect();this.mo=new MutationObserver((()=>t(this.hostElement)));this.mo.observe(this.hostElement.querySelector(".pn-fieldset"),{childList:true,subtree:true})}componentDidRender(){if(this.form){this.hostElement.querySelector("fieldset")?.setAttribute("form",this.form)}}hasError(){return this.invalid||!!this.error}getSymbol(){if(this.disabled)return p;return l}render(){return i(d,{key:"2f9bd47d141fe715a0550ec9bdea9139a4e30cb8"},i("fieldset",{key:"c72ea4f3ca1336bd0ed0ba3cdf20771d3394aad1",id:this.fieldsetId,class:"pn-fieldset",disabled:this.disabled,"aria-describedby":this.helpertext&&this.idHelpertext,"data-error":this.hasError()},i("legend",{key:"b1cb227f4638fe50f2a062d8b2e2b26f0bbddfe7",class:"pn-fieldset-legend"},this.legend),this.helpertext&&i("p",{key:"7b67268a4fd7c135808d3b64236ff3e287d06aa2",id:this.idHelpertext,class:"pn-fieldset-helpertext"},this.helpertext),i("div",{key:"6bd3c274636fd1394b1695371905127d9b79112f",class:"pn-fieldset-items"},i("slot",{key:"d9bc4fd16c21bc2871c0374d3feffe025ff83b7f"})),i("div",{key:"a42a9e9bda1e906a90724fe9ad97044f5563e80c",class:"pn-fieldset-message-wrapper",role:"alert",hidden:!this.error},i("pn-icon",{key:"5e48f24beece808f5f24ca04152fdd4f6bceb082",icon:this.getSymbol()}),i("p",{key:"711b7ce505b5e11e62d397952cd62c49c6d53c3c",class:"pn-fieldset-message"},this.error))))}static get watchers(){return{fieldsetId:["handleId"]}}};r.style=a;export{r as pn_fieldset};
//# sourceMappingURL=p-582e647f.entry.js.map