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

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{transformTag as e,proxyCustomElement as i,HTMLElement as t,forceUpdate as s,h as d,Host as n}from"@stencil/core/internal/client";import{u as l}from"./helpers.js";import{a as p}from"./alert_exclamation_circle.js";import{a}from"./alert_info_circle.js";import{d as f}from"./pn-icon2.js";const r=i(class extends t{constructor(e){super(),!1!==e&&this.__registerHost()}mo;id="pn-fieldset-"+l();idHelpertext=this.id+"-helpertext";get hostElement(){return this}legend;helpertext;fieldsetId=this.id;form;name;disabled=!1;invalid=!1;error;handleId(){this.idHelpertext=this.fieldsetId+"-helpertext"}componentWillLoad(){this.handleId()}componentDidLoad(){this.mo&&this.mo.disconnect(),this.mo=new MutationObserver((()=>s(this.hostElement))),this.mo.observe(this.hostElement.querySelector(".pn-fieldset"),{childList:!0,subtree:!0})}componentDidRender(){this.form&&this.hostElement.querySelector("fieldset")?.setAttribute("form",this.form)}hasError(){return this.invalid||!!this.error}getSymbol(){return this.disabled?a:p}render(){return d(n,{key:"4eac26b9a4c9095888cbe548f30eddcbed3efcdf"},d("fieldset",{key:"341684c752c43382f37d0d95f9ea8c0d2d170ef1",id:this.fieldsetId,class:"pn-fieldset",disabled:this.disabled,"aria-describedby":this.helpertext&&this.idHelpertext,"aria-invalid":""+this.hasError()},d("legend",{key:"3f98ab3a56288cebb07cce9c49b6e1bebd2096f2",class:"pn-fieldset-legend"},this.legend),this.helpertext&&d("p",{key:"979b9b47ae0baa2f84bf19de877149773bfd63b9",id:this.idHelpertext,class:"pn-fieldset-helpertext"},this.helpertext),d("div",{key:"a67905a01003d767e26061ff8fa3af86a0900c27",class:"pn-fieldset-items"},d("slot",{key:"a2a02e54157e39e43cf03839c8bb2a561533eb39"})),d("div",{key:"4c618709e6a3cbaa20761368acc70b6d2e964930",class:"pn-fieldset-message-wrapper",role:"alert",hidden:!this.error},d("pn-icon",{key:"db1b62bccada153943c62195242e66b62d9cc2c3",icon:this.getSymbol()}),d("p",{key:"9b94853b5064d9563e39c20491d7139eead83f56",class:"pn-fieldset-message"},this.error))))}static get watchers(){return{fieldsetId:[{handleId:0}]}}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-helpertext{color:#5e554a;margin:0}${e("pn-fieldset")} .pn-fieldset-items{padding:0.75em 0;display:flex;flex-direction:column;gap:0.75em}${e("pn-fieldset")} .pn-fieldset-message-wrapper{display:flex;gap:0.75em;color:#2d2013;line-height:1.4;font-weight:400}${e("pn-fieldset")} .pn-fieldset-message-wrapper[hidden]{display:none}${e("pn-fieldset")} .pn-fieldset-message{margin:0}${e("pn-fieldset")} .pn-fieldset[aria-invalid=true]>.pn-fieldset-legend,${e("pn-fieldset")} .pn-fieldset[aria-invalid=true]>.pn-fieldset-helpertext,${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-helpertext>${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],fieldsetId:[1,"fieldset-id"],form:[1],name:[1],disabled:[4],invalid:[4],error:[1]},void 0,{fieldsetId:[{handleId:0}]}]),c=r,o=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{c as PnFieldset,o as defineCustomElement}