@postnord/web-components
Version:
PostNord Web Components
86 lines (81 loc) • 6.27 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
;
var index = require('./index-CfUQZtlH.js');
var index$1 = require('./index.cjs.js');
var alert_exclamation_circle = require('./alert_exclamation_circle-BiBEJK9P.js');
var alert_info_circle = require('./alert_info_circle-BaN88M1m.js');
const pnFieldsetCss = () => `${index.transformTag("pn-fieldset")}{display:inline-block}${index.transformTag("pn-fieldset")} .pn-fieldset{border:0;padding:0;margin:0;color:#2d2013;display:flex;flex-direction:column;font-size:1em}${index.transformTag("pn-fieldset")} .pn-fieldset-legend{float:left;font-weight:500;line-height:1.4;padding:0}${index.transformTag("pn-fieldset")} .pn-fieldset-helpertext{color:#5e554a;margin:0}${index.transformTag("pn-fieldset")} .pn-fieldset-items{padding:0.75em 0;display:flex;flex-direction:column;gap:0.75em}${index.transformTag("pn-fieldset")} .pn-fieldset-message-wrapper{display:flex;gap:0.75em;color:#2d2013;line-height:1.4;font-weight:400}${index.transformTag("pn-fieldset")} .pn-fieldset-message-wrapper[hidden]{display:none}${index.transformTag("pn-fieldset")} .pn-fieldset-message{margin:0}${index.transformTag("pn-fieldset")} .pn-fieldset[aria-invalid=true]>.pn-fieldset-legend,${index.transformTag("pn-fieldset")} .pn-fieldset[aria-invalid=true]>.pn-fieldset-helpertext,${index.transformTag("pn-fieldset")} .pn-fieldset[aria-invalid=true]>.pn-fieldset-message-wrapper{color:#a70707}${index.transformTag("pn-fieldset")} .pn-fieldset[aria-invalid=true]>.pn-fieldset-legend>${index.transformTag("pn-icon")} .pn-icon-svg>path,${index.transformTag("pn-fieldset")} .pn-fieldset[aria-invalid=true]>.pn-fieldset-helpertext>${index.transformTag("pn-icon")} .pn-icon-svg>path,${index.transformTag("pn-fieldset")} .pn-fieldset[aria-invalid=true]>.pn-fieldset-message-wrapper>${index.transformTag("pn-icon")} .pn-icon-svg>path{fill:#a70707}${index.transformTag("pn-fieldset")} .pn-fieldset:disabled>.pn-fieldset-legend,${index.transformTag("pn-fieldset")} .pn-fieldset:disabled>.pn-fieldset-helpertext,${index.transformTag("pn-fieldset")} .pn-fieldset:disabled>.pn-fieldset-message,${index.transformTag("pn-fieldset")} .pn-fieldset:disabled>.pn-fieldset-message-wrapper{color:#2d2013}${index.transformTag("pn-fieldset")} .pn-fieldset:disabled>.pn-fieldset-legend>${index.transformTag("pn-icon")} .pn-icon-svg>path,${index.transformTag("pn-fieldset")} .pn-fieldset:disabled>.pn-fieldset-helpertext>${index.transformTag("pn-icon")} .pn-icon-svg>path,${index.transformTag("pn-fieldset")} .pn-fieldset:disabled>.pn-fieldset-message>${index.transformTag("pn-icon")} .pn-icon-svg>path,${index.transformTag("pn-fieldset")} .pn-fieldset:disabled>.pn-fieldset-message-wrapper>${index.transformTag("pn-icon")} .pn-icon-svg>path{fill:#2d2013}`;
const PnFieldset = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
}
mo;
id = `pn-fieldset-${index$1.uuidv4()}`;
idHelpertext = `${this.id}-helpertext`;
get hostElement() { return index.getElement(this); }
/**
* The legend provides a caption for the fieldset group.
* This should be a question or heading that describes the inputs/fields.
*/
legend;
/** Text message underneath the legend for more instruction or hints on how to fill in controls correctly. */
helpertext;
/** Give the fieldset a custom HTML id. */
fieldsetId = this.id;
/**
* The id of the form you want the fieldset to be part of.
* If you want the inputs inside to be associated with a specific form, you need to set on those elements directly.
*/
form;
/** Give the fieldset a HTML name. */
name;
/** Disable all of the inputs inside of the fieldset. */
disabled = false;
/** Set the fieldset as `invalid`, will add red error styles. */
invalid = false;
/** Error message, applies warning styles and icon. */
error;
handleId() {
this.idHelpertext = `${this.fieldsetId}-helpertext`;
}
componentWillLoad() {
this.handleId();
}
componentDidLoad() {
if (this.mo)
this.mo.disconnect();
this.mo = new MutationObserver(() => index.forceUpdate(this.hostElement));
this.mo.observe(this.hostElement.querySelector('.pn-fieldset'), { childList: true, subtree: true });
}
componentDidRender() {
/**
* Stencil has a known problem about rendering the `form` attribute.
* Setting it via setAttribute solves it for now.
* https://github.com/ionic-team/stencil/issues/2703
**/
if (this.form) {
this.hostElement.querySelector('fieldset')?.setAttribute('form', this.form);
}
}
hasError() {
return this.invalid || !!this.error;
}
getSymbol() {
if (this.disabled)
return alert_info_circle.alert_info_circle;
return alert_exclamation_circle.alert_exclamation_circle;
}
render() {
return (index.h(index.Host, { key: '4eac26b9a4c9095888cbe548f30eddcbed3efcdf' }, index.h("fieldset", { key: '341684c752c43382f37d0d95f9ea8c0d2d170ef1', id: this.fieldsetId, class: "pn-fieldset", disabled: this.disabled, "aria-describedby": this.helpertext && this.idHelpertext, "aria-invalid": this.hasError().toString() }, index.h("legend", { key: '3f98ab3a56288cebb07cce9c49b6e1bebd2096f2', class: "pn-fieldset-legend" }, this.legend), this.helpertext && (index.h("p", { key: '979b9b47ae0baa2f84bf19de877149773bfd63b9', id: this.idHelpertext, class: "pn-fieldset-helpertext" }, this.helpertext)), index.h("div", { key: 'a67905a01003d767e26061ff8fa3af86a0900c27', class: "pn-fieldset-items" }, index.h("slot", { key: 'a2a02e54157e39e43cf03839c8bb2a561533eb39' })), index.h("div", { key: '4c618709e6a3cbaa20761368acc70b6d2e964930', class: "pn-fieldset-message-wrapper", role: "alert", hidden: !this.error }, index.h("pn-icon", { key: 'db1b62bccada153943c62195242e66b62d9cc2c3', icon: this.getSymbol() }), index.h("p", { key: '9b94853b5064d9563e39c20491d7139eead83f56', class: "pn-fieldset-message" }, this.error)))));
}
static get watchers() { return {
"fieldsetId": [{
"handleId": 0
}]
}; }
};
PnFieldset.style = pnFieldsetCss();
exports.pn_fieldset = PnFieldset;