@postnord/web-components
Version:
PostNord Web Components
223 lines (222 loc) • 8.51 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { forceUpdate, Host, h } from "@stencil/core";
import { uuidv4 } from "../../../globals/helpers";
import { alert_exclamation_circle, alert_info_circle } from "pn-design-assets/pn-assets/icons.js";
/**
* The fielset is a wrapper to give context and information about inputs. Most commonly, a set of radio/checkboxes.
* However, you may include any type of input such as textareas, toggles and selects.
*/
export class PnFieldset {
constructor() {
this.legend = undefined;
this.helpertext = undefined;
this.fieldsetId = this.id;
this.form = undefined;
this.name = undefined;
this.disabled = false;
this.invalid = false;
this.error = undefined;
}
mo;
id = `pn-fieldset-${uuidv4()}`;
idHelpertext = `${this.id}-helpertext`;
hostElement;
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: 'e22e77e7d49f4dd10607f1fc2cb500d3b63ee4f2' }, h("fieldset", { key: 'c6cb9c43620b223e69c5814446e26678c83d0fa3', id: this.fieldsetId, class: "pn-fieldset", disabled: this.disabled, "aria-describedby": this.helpertext && this.idHelpertext, "aria-invalid": this.hasError().toString() }, h("legend", { key: 'ec669e86d003bd11db387c0e6e9619b792175c72', class: "pn-fieldset-legend" }, this.legend), this.helpertext && (h("p", { key: '60cf8252ec833d0db9620cab9e57a5dbd2212a5e', id: this.idHelpertext, class: "pn-fieldset-helpertext" }, this.helpertext)), h("div", { key: '38191db1e9344469e37132c4b90c6197e1ba59d9', class: "pn-fieldset-items" }, h("slot", { key: '8c4048eaea924b96d9fd4d95e64d96ef6b42e058' })), h("div", { key: 'f2b627b8155e94cdeb681f9405601b480a8d7a1f', class: "pn-fieldset-message-wrapper", role: "alert", hidden: !this.error }, h("pn-icon", { key: 'fcd13f423dcd055821c7d0854b34b4babad17ad8', icon: this.getSymbol() }), h("p", { key: 'e620363bcdca770ebc01d3190a9588f4f0a1f21e', class: "pn-fieldset-message" }, this.error)))));
}
static get is() { return "pn-fieldset"; }
static get originalStyleUrls() {
return {
"$": ["pn-fieldset.scss"]
};
}
static get styleUrls() {
return {
"$": ["pn-fieldset.css"]
};
}
static get properties() {
return {
"legend": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "The legend provides a caption for the fieldset group.\nThis should be a question or heading that describes the inputs/fields."
},
"attribute": "legend",
"reflect": false
},
"helpertext": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Text message underneath the legend for more instruction or hints on how to fill in controls correctly."
},
"attribute": "helpertext",
"reflect": false
},
"fieldsetId": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Give the fieldset a custom HTML id."
},
"attribute": "fieldset-id",
"reflect": false,
"defaultValue": "this.id"
},
"form": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The id of the form you want the fieldset to be part of.\nIf you want the inputs inside to be associated with a specific form, you need to set on those elements directly."
},
"attribute": "form",
"reflect": false
},
"name": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Give the fieldset a HTML name."
},
"attribute": "name",
"reflect": false
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Disable all of the inputs inside of the fieldset."
},
"attribute": "disabled",
"reflect": false,
"defaultValue": "false"
},
"invalid": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Set the fieldset as `invalid`, will add red error styles."
},
"attribute": "invalid",
"reflect": false,
"defaultValue": "false"
},
"error": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Error message, applies warning styles and icon."
},
"attribute": "error",
"reflect": false
}
};
}
static get elementRef() { return "hostElement"; }
static get watchers() {
return [{
"propName": "fieldsetId",
"methodName": "handleId"
}];
}
}
//# sourceMappingURL=pn-fieldset.js.map