gov-gui
Version:
Gov UI Component Library Typscript Build
373 lines (372 loc) • 13.2 kB
JavaScript
import { h } from "@stencil/core";
import { getGlobalPropsClasses } from "../../global/global-styles-helper";
import { getAnimationClasses } from "../../global/animation-helpers";
export class GovRadiobutton {
constructor() {
this.parsedOptions = [];
this.value = '';
// New required prop and corresponding error message.
this.required = false;
this.requiredErrorMessage = 'This field is required';
this.error = '';
this.animationDelay = '2s';
this.allClasses = '';
}
//watching for any change in animations to trigger them
watchAnimations() {
this.provideClass();
}
watchAnimationsDelay() {
this.provideClass();
}
watchAnimationsSpeed() {
this.provideClass();
}
parseOptions(newValue) {
if (!newValue) {
this.parsedOptions = [];
}
else if (typeof newValue === 'string') {
try {
const parsed = JSON.parse(newValue);
if (Array.isArray(parsed)) {
this.parsedOptions = parsed.map(item => (typeof item === 'string' ? { label: item, value: item } : { label: item.label, value: item.value }));
}
else {
console.error('Options JSON must be an array.');
this.parsedOptions = [];
}
}
catch (error) {
console.error('Invalid JSON string for options', error);
this.parsedOptions = [];
}
}
else if (Array.isArray(newValue)) {
this.parsedOptions = newValue.map(item => (typeof item === 'string' ? { label: item, value: item } : { label: item.label, value: item.value }));
}
}
componentWillLoad() {
this.parseOptions(this.options);
const animationClasses = getAnimationClasses({
animation: this.animation,
animationDelay: this.animationDelay,
animationSpeed: this.animationSpeed,
});
this.allClasses = getGlobalPropsClasses({
classes: ' ' + animationClasses,
});
}
//Called on change of any animation related property to trigger change
provideClass() {
const animationClasses = getAnimationClasses({
animation: this.animation,
animationDelay: this.animationDelay,
animationSpeed: this.animationSpeed,
});
this.allClasses = getGlobalPropsClasses({
classes: ' ' + animationClasses,
});
}
handleSelection(event) {
const input = event.target;
this.value = input.value;
this.selectedChange.emit(this.value);
// Clear any error if a value is selected.
if (this.value) {
this.error = '';
}
}
/**
* Public method to validate the radio button group.
* If required is true and no option is selected, sets an error message and returns false.
*/
async validate() {
if (this.required && !this.value) {
this.error = this.requiredErrorMessage;
return false;
}
this.error = '';
return true;
}
render() {
return (h("div", { key: '5dc96d4dc55de3e3c13c20e3f80ce29740ec3d1f', class: `radio-group ${this.allClasses}` }, this.heading && h("h2", { key: '7f907caf5746103faa35ac1e3e86daacb657ed93' }, this.heading), this.subtitle && h("p", { key: '72eaa97816b452a547f64bc5805378da28702d73' }, this.subtitle), h("div", { key: '964109ee16a086d24c65e7fc192e5df12b548005', class: "options" }, this.parsedOptions.map(option => (h("label", { key: option.value }, h("input", { type: "radio", name: this.name || 'radio-group', value: option.value, checked: this.value === option.value, onInput: event => this.handleSelection(event) }), option.label)))), this.error && (h("p", { key: '1f83b7b7abc829ee4f9053b1582352775c1b47af', class: "error-message", style: { color: 'red', fontSize: '14px', marginTop: '0.5rem' } }, this.error))));
}
static get is() { return "gov-radiobutton"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["gov-radiobutton.css"]
};
}
static get styleUrls() {
return {
"$": ["gov-radiobutton.css"]
};
}
static get properties() {
return {
"name": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "name",
"reflect": false
},
"heading": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "heading",
"reflect": false
},
"subtitle": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "subtitle",
"reflect": false
},
"options": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string[] | RadioOption[] | string",
"resolved": "RadioOption[] | string | string[]",
"references": {
"RadioOption": {
"location": "local",
"path": "C:/Users/theo1/Documents/gov-component-library/src/components/gov-radiobutton/gov-radiobutton.tsx",
"id": "src/components/gov-radiobutton/gov-radiobutton.tsx::RadioOption"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "options",
"reflect": false
},
"value": {
"type": "string",
"mutable": true,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "value",
"reflect": true,
"defaultValue": "''"
},
"required": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "required",
"reflect": false,
"defaultValue": "false"
},
"requiredErrorMessage": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "required-error-message",
"reflect": false,
"defaultValue": "'This field is required'"
},
"animation": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "animation",
"reflect": false
},
"animationDelay": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'2s' | '3s' | '4s' | '5s'",
"resolved": "\"2s\" | \"3s\" | \"4s\" | \"5s\"",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "animation-delay",
"reflect": false,
"defaultValue": "'2s'"
},
"animationSpeed": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'slow' | 'slower' | 'fast' | 'faster'",
"resolved": "\"fast\" | \"faster\" | \"slow\" | \"slower\"",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "animation-speed",
"reflect": false
}
};
}
static get states() {
return {
"parsedOptions": {},
"error": {}
};
}
static get events() {
return [{
"method": "selectedChange",
"name": "selectedChange",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
}
}];
}
static get methods() {
return {
"validate": {
"complexType": {
"signature": "() => Promise<boolean>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<boolean>"
},
"docs": {
"text": "Public method to validate the radio button group.\r\nIf required is true and no option is selected, sets an error message and returns false.",
"tags": []
}
}
};
}
static get watchers() {
return [{
"propName": "animation",
"methodName": "watchAnimations"
}, {
"propName": "animationDelay",
"methodName": "watchAnimationsDelay"
}, {
"propName": "animationSpeed",
"methodName": "watchAnimationsSpeed"
}, {
"propName": "options",
"methodName": "parseOptions"
}];
}
}
//# sourceMappingURL=gov-radiobutton.js.map