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

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{transformTag as e,proxyCustomElement as i,HTMLElement as s,forceUpdate as t,h as d,Host as n}from"@stencil/core/internal/client";import{u as l}from"./helpers.js";import{a}from"./alert_exclamation_circle.js";import{a as p}from"./alert_info_circle.js";import{d as f}from"./pn-icon2.js";const r=i(class extends s{constructor(e){super(),!1!==e&&this.__registerHost()}mo;id="pn-fieldset-"+l();idHelpertext=this.id+"-helpertext";get hostElement(){return this}legend;helpertext;name;form;disabled=!1;invalid=!1;error;pnId=this.id;fieldsetId=this.id;handleId(){this.idHelpertext=this.getId()+"-helpertext"}connectedCallback(){this.mo=new MutationObserver((()=>t(this.hostElement))),this.mo.observe(this.hostElement,{childList:!0,subtree:!0})}disconnectedCallback(){this.mo&&this.mo.disconnect()}getId(){return this.pnId||this.fieldsetId||this.id}hasHelpertext(){const e=this.hostElement.querySelector('[slot="helpertext"]');return!!this.helpertext||e?.textContent?.trim().length>0}hasError(){const e=this.hostElement.querySelector('[slot="error"]');return!!this.error||e?.textContent?.trim().length>0}isInvalid(){return this.invalid||this.hasError()}getIcon(){return this.disabled?p:a}render(){return d(n,{key:"908a403f3fb8b4779393f4ca0a4f17f518ba53a7"},d("fieldset",{key:"97b321f776944a0d27f1b1096a967b2c9d9c9fcd",id:this.getId(),name:this.name,form:this.form,class:"pn-fieldset",disabled:this.disabled,"aria-describedby":this.hasHelpertext()?this.idHelpertext:void 0,"aria-invalid":""+this.isInvalid()},d("legend",{key:"a230416f33f787624f90977054c6492f1516dba6",class:"pn-fieldset-legend"},this.legend),d("p",{key:"6911c6e63588c36bc0e314d7b3c8b81df2282579",id:this.idHelpertext,class:"pn-fieldset-message",hidden:!this.hasHelpertext()},d("span",{key:"3370e13a7cf93741a4aa76880533b11c320aea03"},this.helpertext),d("slot",{key:"0365489d121f3fcfa1211e3c2dcf2881f849940d",name:"helpertext"})),d("div",{key:"23d806e61d39d509ad07f0f68c002a1962332bf4",class:"pn-fieldset-items"},d("slot",{key:"a2ead121001e5f751f779957fbbb44716e64274c"})),d("div",{key:"075c709c13a8363be1b1a0b661e3621419a69333",class:"pn-fieldset-error",role:"alert",hidden:!this.hasError()},d("pn-icon",{key:"0c4e969436033de98814135853e51388862e0812",icon:this.getIcon(),color:"warning"}),d("p",{key:"d94095bee0a7e4fdc3962db9666dd4ffba7dfa50",class:"pn-fieldset-message"},d("span",{key:"0c3808a66242f11afdc1ea5053517e965eeb3a93"},this.error),d("slot",{key:"ad9604de305ce00ef164cc999562707e923bdd83",name:"error"})))))}static get watchers(){return{fieldsetId:[{handleId:0}],pnId:[{handleId:1}]}}static get style(){return`${e("pn-fieldset")}{display:inline-block}${e("pn-fieldset")} .pn-fieldset{border:0;padding:0;margin:0;color:#2d2013;display:flex;flex-direction:column;font-size:1em}${e("pn-fieldset")} .pn-fieldset-legend{float:left;font-weight:500;line-height:1.4;padding:0}${e("pn-fieldset")} .pn-fieldset-message{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-fieldset")} .pn-fieldset-message[hidden]{display:none}${e("pn-fieldset")} .pn-fieldset-error{display:flex;flex-direction:row;flex-wrap:nowrap;gap:0.25em}${e("pn-fieldset")} .pn-fieldset-error[hidden]{display:none}${e("pn-fieldset")} .pn-fieldset-error>.pn-fieldset-message{color:#a70707}${e("pn-fieldset")} .pn-fieldset-items{padding:0.75em 0;display:flex;flex-direction:column;gap:0.75em}${e("pn-fieldset")} .pn-fieldset[aria-invalid=true]>.pn-fieldset-legend,${e("pn-fieldset")} .pn-fieldset[aria-invalid=true]>.pn-fieldset-message-wrapper{color:#a70707}${e("pn-fieldset")} .pn-fieldset[aria-invalid=true]>.pn-fieldset-legend>${e("pn-icon")} .pn-icon-svg>path,${e("pn-fieldset")} .pn-fieldset[aria-invalid=true]>.pn-fieldset-message-wrapper>${e("pn-icon")} .pn-icon-svg>path{fill:#a70707}${e("pn-fieldset")} .pn-fieldset:disabled>.pn-fieldset-legend,${e("pn-fieldset")} .pn-fieldset:disabled>.pn-fieldset-helpertext,${e("pn-fieldset")} .pn-fieldset:disabled>.pn-fieldset-message,${e("pn-fieldset")} .pn-fieldset:disabled>.pn-fieldset-message-wrapper{color:#2d2013}${e("pn-fieldset")} .pn-fieldset:disabled>.pn-fieldset-legend>${e("pn-icon")} .pn-icon-svg>path,${e("pn-fieldset")} .pn-fieldset:disabled>.pn-fieldset-helpertext>${e("pn-icon")} .pn-icon-svg>path,${e("pn-fieldset")} .pn-fieldset:disabled>.pn-fieldset-message>${e("pn-icon")} .pn-icon-svg>path,${e("pn-fieldset")} .pn-fieldset:disabled>.pn-fieldset-message-wrapper>${e("pn-icon")} .pn-icon-svg>path{fill:#2d2013}`}},[772,"pn-fieldset",{legend:[1],helpertext:[1],name:[1],form:[1],disabled:[4],invalid:[4],error:[1],pnId:[1,"pn-id"],fieldsetId:[1,"fieldset-id"]},void 0,{fieldsetId:[{handleId:0}],pnId:[{handleId:1}]}]),o=r,c=function(){"undefined"!=typeof customElements&&["pn-fieldset","pn-icon"].forEach((i=>{switch(i){case"pn-fieldset":customElements.get(e(e(i)))||customElements.define(e(e(i)),r);break;case"pn-icon":customElements.get(e(e(i)))||f()}}))};export{o as PnFieldset,c as defineCustomElement}