@postnord/web-components
Version:
PostNord Web Components
118 lines (113 loc) • 6.5 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { proxyCustomElement, HTMLElement, forceUpdate, h, Host } from '@stencil/core/internal/client';
import { u as uuidv4 } from './helpers.js';
import { a as alert_exclamation_circle } from './alert_exclamation_circle.js';
import { a as alert_info_circle } from './alert_info_circle.js';
import { d as defineCustomElement$2 } from './pn-icon2.js';
const pnFieldsetCss = "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 PnFieldsetStyle0 = pnFieldsetCss;
const PnFieldset$1 = /*@__PURE__*/ proxyCustomElement(class PnFieldset extends HTMLElement {
constructor() {
super();
this.__registerHost();
}
mo;
id = `pn-fieldset-${uuidv4()}`;
idHelpertext = `${this.id}-helpertext`;
get hostElement() { return 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(() => 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;
return alert_exclamation_circle;
}
render() {
return (h(Host, { key: '2f9bd47d141fe715a0550ec9bdea9139a4e30cb8' }, h("fieldset", { key: 'c72ea4f3ca1336bd0ed0ba3cdf20771d3394aad1', id: this.fieldsetId, class: "pn-fieldset", disabled: this.disabled, "aria-describedby": this.helpertext && this.idHelpertext, "data-error": this.hasError() }, h("legend", { key: 'b1cb227f4638fe50f2a062d8b2e2b26f0bbddfe7', class: "pn-fieldset-legend" }, this.legend), this.helpertext && (h("p", { key: '7b67268a4fd7c135808d3b64236ff3e287d06aa2', id: this.idHelpertext, class: "pn-fieldset-helpertext" }, this.helpertext)), h("div", { key: '6bd3c274636fd1394b1695371905127d9b79112f', class: "pn-fieldset-items" }, h("slot", { key: 'd9bc4fd16c21bc2871c0374d3feffe025ff83b7f' })), h("div", { key: 'a42a9e9bda1e906a90724fe9ad97044f5563e80c', class: "pn-fieldset-message-wrapper", role: "alert", hidden: !this.error }, h("pn-icon", { key: '5e48f24beece808f5f24ca04152fdd4f6bceb082', icon: this.getSymbol() }), h("p", { key: '711b7ce505b5e11e62d397952cd62c49c6d53c3c', class: "pn-fieldset-message" }, this.error)))));
}
static get watchers() { return {
"fieldsetId": ["handleId"]
}; }
static get style() { return PnFieldsetStyle0; }
}, [4, "pn-fieldset", {
"legend": [1],
"helpertext": [1],
"fieldsetId": [1, "fieldset-id"],
"form": [1],
"name": [1],
"disabled": [4],
"invalid": [4],
"error": [1]
}, undefined, {
"fieldsetId": ["handleId"]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["pn-fieldset", "pn-icon"];
components.forEach(tagName => { switch (tagName) {
case "pn-fieldset":
if (!customElements.get(tagName)) {
customElements.define(tagName, PnFieldset$1);
}
break;
case "pn-icon":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
const PnFieldset = PnFieldset$1;
const defineCustomElement = defineCustomElement$1;
export { PnFieldset, defineCustomElement };
//# sourceMappingURL=pn-fieldset.js.map