gov-gui
Version:
Gov UI Component Library Typscript Build
368 lines (367 loc) • 13 kB
JavaScript
import { h } from "@stencil/core";
import { getGlobalPropsClasses } from "../../global/global-styles-helper";
import { getAnimationClasses } from "../../global/animation-helpers";
export class Checkbox {
constructor() {
this.label = ''; // Text next to the checkbox
// Make checked mutable and reflect its value so external consumers see the current state.
this.checked = false;
this.disabled = false; // Checkbox disabled state
this.value = ''; // Value to return when checked
// New required prop and error message for validation.
this.required = false;
this.requiredErrorMessage = 'This field is required';
this.isHovered = false; // Hover state
this.error = ''; // Holds any validation error message
this.animationDelay = '2s';
this.allClasses = '';
// Toggle checkbox selection by updating the mutable prop.
this.handleCheckboxClick = () => {
if (!this.disabled) {
this.checked = !this.checked;
this.valueChanged.emit(this.checked ? this.value : '');
// Clear any error if now valid.
if (this.required && this.checked) {
this.error = '';
}
}
};
this.handleMouseEnter = () => {
if (!this.disabled) {
this.isHovered = true;
}
};
this.handleMouseLeave = () => {
this.isHovered = false;
};
}
/**
* Returns the current value of the checkbox.
* If checked, returns the `value` prop; otherwise, returns an empty string.
*/
async getValue() {
return this.checked ? this.value : '';
}
/**
* Public method to validate the checkbox.
* If the checkbox is required and not checked, sets an error message and returns false.
*/
async validate() {
if (this.required && !this.checked) {
this.error = this.requiredErrorMessage;
return false;
}
this.error = '';
return true;
}
//watching for any change in animations to trigger them
watchAnimations() {
this.provideClass();
}
watchAnimationsDelay() {
this.provideClass();
}
watchAnimationsSpeed() {
this.provideClass();
}
// inject the animations and styles on component load
componentWillLoad() {
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,
});
}
render() {
const checkboxClass = {
'checkbox': true,
'checkbox--checked': this.checked,
'checkbox--disabled': this.disabled,
'checkbox--hovered': this.isHovered,
};
return (h("div", { key: 'c8e465d2fd58d73745fc3903bf7bf519716419cc' }, h("div", { key: '099e3f3b16f4db9d60a79b9f489215fdb7af3fea', class: `checkbox-container ${this.allClasses}`, onClick: this.handleCheckboxClick, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: '511e4e550936cd1c43a445023135aefa35197f5b', class: checkboxClass }, this.checked && h("span", { key: 'e99639a25f7635c875c932f90a63771d6e74aaa4', class: "checkbox-icon" }, "\u2714")), this.label && h("span", { key: 'ddac70a9a56a478d3d60cd4c6411b3d45535c99d', class: "checkbox-label" }, this.label)), this.error && (h("p", { key: '785b01d88305a86898d8eef1b82bcf038d681f2a', class: "error-message", style: { color: 'red', fontSize: '14px', margin: '0.25rem 0 0 0' } }, this.error))));
}
static get is() { return "gov-checkbox"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["gov-checkbox.css"]
};
}
static get styleUrls() {
return {
"$": ["gov-checkbox.css"]
};
}
static get properties() {
return {
"label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "label",
"reflect": false,
"defaultValue": "''"
},
"checked": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "checked",
"reflect": true,
"defaultValue": "false"
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "disabled",
"reflect": false,
"defaultValue": "false"
},
"value": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "value",
"reflect": false,
"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 {
"isHovered": {},
"error": {}
};
}
static get events() {
return [{
"method": "valueChanged",
"name": "valueChanged",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
}
}];
}
static get methods() {
return {
"getValue": {
"complexType": {
"signature": "() => Promise<string>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<string>"
},
"docs": {
"text": "Returns the current value of the checkbox.\r\nIf checked, returns the `value` prop; otherwise, returns an empty string.",
"tags": []
}
},
"validate": {
"complexType": {
"signature": "() => Promise<boolean>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<boolean>"
},
"docs": {
"text": "Public method to validate the checkbox.\r\nIf the checkbox is required and not checked, sets an error message and returns false.",
"tags": []
}
}
};
}
static get watchers() {
return [{
"propName": "animation",
"methodName": "watchAnimations"
}, {
"propName": "animationDelay",
"methodName": "watchAnimationsDelay"
}, {
"propName": "animationSpeed",
"methodName": "watchAnimationsSpeed"
}];
}
}
//# sourceMappingURL=gov-checkbox.js.map