@cbpds/web-components
Version:
Web components for the CBP Design System.
355 lines (354 loc) • 14.5 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import { Host, h } from "@stencil/core";
import { setCSSProps, createNamespaceKey } from "../../utils/utils";
export class CbpFormField {
constructor() {
this.label = undefined;
this.description = undefined;
this.fieldId = createNamespaceKey('cbp-formfield');
this.group = undefined;
this.error = undefined;
this.errorMessages = undefined;
this.readonly = undefined;
this.disabled = undefined;
this.context = undefined;
this.sx = {};
}
handleChange(e) {
this.valueChange.emit({
host: this.host,
nativeElement: this.formField,
value: this.formField.value,
nativeEvent: e
});
}
watchReadonlyHandler(newValue) {
if (this.formField) {
(newValue)
? this.formField.setAttribute('readonly', '')
: this.formField.removeAttribute('readonly');
}
if (this.formFieldComponent) {
this.formFieldComponent.readonly = newValue;
}
if (this.buttons) {
this.buttons.forEach((el) => {
el.disabled = this.disabled || this.readonly;
});
}
}
watchDisabledHandler(newValue) {
if (this.formField) {
(newValue)
? this.formField.setAttribute('disabled', '')
: this.formField.removeAttribute('disabled');
}
if (this.formFieldComponent) {
this.formFieldComponent.disabled = newValue;
}
if (this.buttons) {
this.buttons.forEach((el) => {
el.disabled = this.disabled || this.readonly;
});
}
}
watchErrorHandler(newValue) {
if (this.formField) {
(newValue)
? this.formField.setAttribute('aria-invalid', 'true')
: this.formField.removeAttribute('aria-invalid');
}
if (this.formFieldComponent) {
this.formFieldComponent.error = newValue;
}
if (this.buttons) {
this.buttons.forEach((el) => {
(newValue)
? el.color = "danger"
: el.color = "secondary";
});
}
}
componentWillLoad() {
if (typeof this.sx == 'string') {
this.sx = JSON.parse(this.sx) || {};
}
setCSSProps(this.host, Object.assign({}, this.sx));
}
componentDidLoad() {
if (!this.group) {
this.formField = this.host.querySelector('button[role=combobox],input,select,textarea');
this.formFieldComponent = this.host.querySelector('cbp-dropdown,cbp-slider,cbp-file-input');
this.buttons = this.host.querySelectorAll('cbp-button');
this.attachedButtons = this.host.querySelectorAll('[slot=cbp-form-field-attached-button] cbp-button');
this.hasDescription = !!this.description || !!this.host.querySelector('[slot=cbp-form-field-description]');
if (this.formField) {
this.formField.getAttribute('id')
? this.fieldId = this.formField.getAttribute('id')
: this.formField.setAttribute('id', `${this.fieldId}`);
this.hasDescription && this.formField.setAttribute('aria-describedby', `${this.fieldId}-description`);
this.formField.addEventListener('change', (e) => this.handleChange(e));
}
if (!!this.formField) {
if (this.readonly)
this.formField.setAttribute('readonly', '');
if (this.disabled)
this.formField.setAttribute('disabled', '');
if (this.error)
this.formField.setAttribute('aria-invalid', 'true');
}
if (this.formFieldComponent) {
this.formFieldComponent.fieldId
? this.fieldId = this.formFieldComponent.fieldId
: this.formFieldComponent.fieldId = this.fieldId;
if (this.readonly)
this.formFieldComponent.readonly = true;
if (this.disabled)
this.formFieldComponent.disabled = true;
if (this.error)
this.formFieldComponent.error = true;
}
if (!!this.buttons) {
this.buttons.forEach((el) => {
if (this.disabled || this.readonly)
el.disabled = true;
});
}
if (!!this.attachedButtons) {
this.attachedButtons.forEach((el) => {
if (this.error)
el.color = "danger";
});
}
}
}
render() {
if (this.group) {
return (h(Host, null, h("fieldset", { disabled: this.disabled, "aria-labelledby": `${this.fieldId}-grouplabel`, "aria-describedby": `${this.fieldId}-description`, "aria-invalid": this.error ? 'true' : false }, h("legend", { id: `${this.fieldId}-grouplabel`, class: "cbp-form-field-label" }, this.label, h("slot", { name: "cbp-form-field-label" })), h("div", { id: `${this.fieldId}-description`, class: "cbp-form-field-description" }, this.error && h("cbp-icon", { name: "triangle-exclamation", color: "var(--cbp-form-field-color-description)", sx: '{"margin-inline-end":"var(--cbp-space-1x)","vertical-align":"text-top"}' }), this.description, h("slot", { name: "cbp-form-field-description" })), h("div", { class: "cbp-form-field-container" }, h("slot", null)), h("slot", { name: "cbp-form-field-extra" }))));
}
else {
return (h(Host, null, h("label", { htmlFor: this.fieldId, id: `${this.fieldId}-label`, class: "cbp-form-field-label" }, this.label, h("slot", { name: "cbp-form-field-label" })), h("div", { id: `${this.fieldId}-description`, class: "cbp-form-field-description" }, this.error && h("cbp-icon", { name: "triangle-exclamation", color: "var(--cbp-form-field-color-description)", size: "var(--cbp-space-3x)", sx: '{"margin-inline-end":"var(--cbp-space-1x)"}' }), this.description, h("slot", { name: "cbp-form-field-description" })), h("div", { class: "cbp-form-field-container" }, h("slot", null)), h("slot", { name: "cbp-form-field-extra" })));
}
}
static get is() { return "cbp-form-field"; }
static get originalStyleUrls() {
return {
"$": ["cbp-form-field.scss"]
};
}
static get styleUrls() {
return {
"$": ["cbp-form-field.css"]
};
}
static get properties() {
return {
"label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Provide a visible/accessible label for the form field/group."
},
"attribute": "label",
"reflect": false
},
"description": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Provide additional details about the field, including whether it's required, which is applied to the form field via `aria-describedby`."
},
"attribute": "description",
"reflect": false
},
"fieldId": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Optionally specify the ID of the field here, which is used to generate related pattern node IDs and associate everything for accessibility"
},
"attribute": "field-id",
"reflect": false,
"defaultValue": "createNamespaceKey('cbp-formfield')"
},
"group": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies that this form field represents a group of (slotted) inputs, such as a radio list, checklist, or related inputs in a compound pattern."
},
"attribute": "group",
"reflect": true
},
"error": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies that the field has an error (and sets aria-invalid accordingly)."
},
"attribute": "error",
"reflect": true
},
"errorMessages": {
"type": "any",
"mutable": false,
"complexType": {
"original": "string | any",
"resolved": "any",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the error message(s) to replace the description text while in an error state."
},
"attribute": "error-messages",
"reflect": false
},
"readonly": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies that the field is readonly; sets all form fields as readonly and related button controls to disabled."
},
"attribute": "readonly",
"reflect": true
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies that the field is disabled; sets all form fields and button controls as disabled."
},
"attribute": "disabled",
"reflect": true
},
"context": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always'",
"resolved": "\"dark-always\" | \"dark-inverts\" | \"light-always\" | \"light-inverts\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is \"light-inverts\" and does not have to be specified."
},
"attribute": "context",
"reflect": true
},
"sx": {
"type": "any",
"mutable": false,
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Supports adding inline styles as an object"
},
"attribute": "sx",
"reflect": false,
"defaultValue": "{}"
}
};
}
static get events() {
return [{
"method": "valueChange",
"name": "valueChange",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "A custom event emitted when the the nested input is changed by user interaction."
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}];
}
static get elementRef() { return "host"; }
static get watchers() {
return [{
"propName": "readonly",
"methodName": "watchReadonlyHandler"
}, {
"propName": "disabled",
"methodName": "watchDisabledHandler"
}, {
"propName": "error",
"methodName": "watchErrorHandler"
}];
}
}
//# sourceMappingURL=cbp-form-field.js.map