@postnord/web-components
Version:
PostNord Web Components
310 lines (309 loc) • 12.6 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.
*
* @slot - Default slot is the content of the fieldset, where you can add your inputs.
* @slot helpertext - Use this slot to add custom HTML inside of the helpertext element. {@since v7.25.0}
* @slot error - Use this slot to add custom HTML inside of the `error` element. {@since v7.25.0}
*/
export class PnFieldset {
mo;
id = `pn-fieldset-${uuidv4()}`;
idHelpertext = `${this.id}-helpertext`;
hostElement;
/**
* 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 HTML name. @category Native attributes */
name;
/**
* 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.
* @category Native attributes
*/
form;
/** Disable all of the inputs inside of the fieldset. @category Native attributes */
disabled = false;
/** Set the fieldset as `invalid`, will add red error styles. @category Features */
invalid = false;
/** Error message, applies warning styles and icon. @category Features */
error;
/** Set a custom ID for the fieldset. @since v7.25.0 @category HTML attributes */
pnId = this.id;
/** Set a custom ID for the fieldset. @deprecated Use `pn-id` instead. @category HTML attributes */
fieldsetId = this.id;
handleId() {
this.idHelpertext = `${this.getId()}-helpertext`;
}
connectedCallback() {
this.mo = new MutationObserver(() => forceUpdate(this.hostElement));
this.mo.observe(this.hostElement, { childList: true, subtree: true });
}
disconnectedCallback() {
if (this.mo)
this.mo.disconnect();
}
getId() {
return this.pnId || this.fieldsetId || this.id;
}
hasHelpertext() {
const helpertextSlot = this.hostElement.querySelector('[slot="helpertext"]');
return !!this.helpertext || helpertextSlot?.textContent?.trim().length > 0;
}
hasError() {
const errorSlot = this.hostElement.querySelector('[slot="error"]');
return !!this.error || errorSlot?.textContent?.trim().length > 0;
}
isInvalid() {
return this.invalid || this.hasError();
}
getIcon() {
if (this.disabled)
return alert_info_circle;
return alert_exclamation_circle;
}
render() {
return (h(Host, { key: '908a403f3fb8b4779393f4ca0a4f17f518ba53a7' }, h("fieldset", { key: '97b321f776944a0d27f1b1096a967b2c9d9c9fcd', id: this.getId(), name: this.name, form: this.form, class: "pn-fieldset", disabled: this.disabled, "aria-describedby": this.hasHelpertext() ? this.idHelpertext : undefined, "aria-invalid": this.isInvalid().toString() }, h("legend", { key: 'a230416f33f787624f90977054c6492f1516dba6', class: "pn-fieldset-legend" }, this.legend), h("p", { key: '6911c6e63588c36bc0e314d7b3c8b81df2282579', id: this.idHelpertext, class: "pn-fieldset-message", hidden: !this.hasHelpertext() }, h("span", { key: '3370e13a7cf93741a4aa76880533b11c320aea03' }, this.helpertext), h("slot", { key: '0365489d121f3fcfa1211e3c2dcf2881f849940d', name: "helpertext" })), h("div", { key: '23d806e61d39d509ad07f0f68c002a1962332bf4', class: "pn-fieldset-items" }, h("slot", { key: 'a2ead121001e5f751f779957fbbb44716e64274c' })), h("div", { key: '075c709c13a8363be1b1a0b661e3621419a69333', class: "pn-fieldset-error", role: "alert", hidden: !this.hasError() }, h("pn-icon", { key: '0c4e969436033de98814135853e51388862e0812', icon: this.getIcon(), color: "warning" }), h("p", { key: 'd94095bee0a7e4fdc3962db9666dd4ffba7dfa50', class: "pn-fieldset-message" }, h("span", { key: '0c3808a66242f11afdc1ea5053517e965eeb3a93' }, this.error), h("slot", { key: 'ad9604de305ce00ef164cc999562707e923bdd83', name: "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."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "legend"
},
"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."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "helpertext"
},
"name": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "Native attributes"
}],
"text": "Give the fieldset a HTML name."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "name"
},
"form": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "Native attributes"
}],
"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."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "form"
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "category",
"text": "Native attributes"
}],
"text": "Disable all of the inputs inside of the fieldset."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "disabled",
"defaultValue": "false"
},
"invalid": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "category",
"text": "Features"
}],
"text": "Set the fieldset as `invalid`, will add red error styles."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "invalid",
"defaultValue": "false"
},
"error": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "Features"
}],
"text": "Error message, applies warning styles and icon."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "error"
},
"pnId": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "since",
"text": "v7.25.0"
}, {
"name": "category",
"text": "HTML attributes"
}],
"text": "Set a custom ID for the fieldset."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "pn-id",
"defaultValue": "this.id"
},
"fieldsetId": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "deprecated",
"text": "Use `pn-id` instead."
}, {
"name": "category",
"text": "HTML attributes"
}],
"text": "Set a custom ID for the fieldset."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "fieldset-id",
"defaultValue": "this.id"
}
};
}
static get elementRef() { return "hostElement"; }
static get watchers() {
return [{
"propName": "fieldsetId",
"methodName": "handleId"
}, {
"propName": "pnId",
"methodName": "handleId",
"handlerOptions": {
"immediate": true
}
}];
}
}