gov-gui
Version:
Gov UI Component Library Typscript Build
526 lines (525 loc) • 18.2 kB
JavaScript
import { h } from "@stencil/core";
import { getGlobalPropsClasses } from "../../global/global-styles-helper";
import { getAnimationClasses } from "../../global/animation-helpers";
export class GovInput {
constructor() {
this.type = 'text';
this.placeholder = '';
this.value = '';
this.disabled = false;
this.errorMessage = 'Invalid input';
this.required = false;
this.requiredErrorMessage = 'This field is required';
this.isValid = true;
this.isTouched = false;
this.currentErrorMessage = '';
this.animationDelay = '2s';
this.allClasses = '';
}
//watching for any change in animations to trigger them
watchAnimations() {
this.provideClass();
}
watchAnimationsDelay() {
this.provideClass();
}
watchAnimationsSpeed() {
this.provideClass();
}
async getValue() {
return this.value;
}
async validate() {
this.isTouched = true;
this.validateValue();
return this.isValid;
}
// 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,
});
}
validateValue() {
if (this.disabled) {
this.isValid = true;
this.currentErrorMessage = '';
return;
}
let isValid = true;
let errorMsg = '';
if (this.required && !this.value.trim()) {
isValid = false;
errorMsg = this.requiredErrorMessage;
}
else if (this.type === 'email' && this.value) {
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
isValid = emailPattern.test(this.value);
if (!isValid)
errorMsg = 'Please enter a valid email address';
}
else if (this.type === 'password' && this.value) {
const passwordPattern = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/;
isValid = passwordPattern.test(this.value);
if (!isValid)
errorMsg = 'Password must be at least 8 characters long and include at least one letter and one number';
}
else if (this.type === 'tel' && this.value) {
const phonePattern = /^\+?[1-9]\d{1,14}$/;
isValid = phonePattern.test(this.value);
if (!isValid)
errorMsg = 'Please enter a valid phone number';
}
else if (this.type === 'number' && this.value) {
isValid = !isNaN(Number(this.value));
if (!isValid)
errorMsg = 'Please enter a valid number';
}
else if (this.validationPattern && this.value) {
isValid = this.validationPattern.test(this.value);
if (!isValid)
errorMsg = this.errorMessage;
}
this.isValid = isValid;
this.currentErrorMessage = errorMsg;
this.validationChanged.emit(this.isValid);
}
handleInput(event) {
this.isTouched = true;
const input = event.target;
this.value = input.value.trim();
this.valueChanged.emit(this.value);
this.validateValue();
}
render() {
const showLegend = this.isValid && this.legend && this.isTouched && this.value;
const showError = !this.isValid && this.isTouched;
return (h("div", { key: '6a3441f8fc508b73c029f5c627ebacd400b312dd', class: `input-container ${this.allClasses}` }, this.label && h("label", { key: 'caa0700a011a2ac2625c7b4305e9530b604dd0be', class: "input-label" }, this.label), h("div", { key: 'ebd73d434f8b76193d3b10ba8d9add6d1676699b', class: `input-with-icon ${this.icon ? 'with-icon' : ''}` }, this.icon && h("gov-icon", { key: '6afa1a33572aa7fff791c9741dc25bbcd91f8f8b', name: this.icon, size: "medium" }), this.type === 'textarea' ? (h("textarea", { placeholder: this.placeholder, value: this.value, onInput: event => this.handleInput(event), disabled: this.disabled, maxlength: this.maxlength, class: {
'input-error': showError,
'input-success': this.isValid && this.isTouched && !!this.value,
'shape': true,
} })) : (h("input", { type: this.type, placeholder: this.placeholder, value: this.value, onInput: event => this.handleInput(event), disabled: this.disabled, maxlength: this.maxlength, class: {
'input-error': showError,
'input-success': this.isValid && this.isTouched && !!this.value,
} }))), showError && h("p", { key: '1545e35868560284094092bc08784a3317cc4a32', class: "error-message" }, this.currentErrorMessage), showLegend && h("p", { key: 'b99c47fc1fa36e8a6930a66a26e048c7806dd42d', class: "legend" }, this.legend)));
}
static get is() { return "gov-input"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["gov-input.css"]
};
}
static get styleUrls() {
return {
"$": ["gov-input.css"]
};
}
static get properties() {
return {
"type": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "type",
"reflect": false,
"defaultValue": "'text'"
},
"placeholder": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "placeholder",
"reflect": false,
"defaultValue": "''"
},
"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": "''"
},
"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
},
"legend": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "legend",
"reflect": 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"
},
"maxlength": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "maxlength",
"reflect": false
},
"validationPattern": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "RegExp",
"resolved": "RegExp",
"references": {
"RegExp": {
"location": "global",
"id": "global::RegExp"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false
},
"errorMessage": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "error-message",
"reflect": false,
"defaultValue": "'Invalid input'"
},
"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'"
},
"icon": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "icon",
"reflect": false
},
"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 {
"isValid": {},
"isTouched": {},
"currentErrorMessage": {}
};
}
static get events() {
return [{
"method": "valueChanged",
"name": "valueChanged",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
}
}, {
"method": "validationChanged",
"name": "validationChanged",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
}
}];
}
static get methods() {
return {
"getValue": {
"complexType": {
"signature": "() => Promise<string>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<string>"
},
"docs": {
"text": "",
"tags": []
}
},
"validate": {
"complexType": {
"signature": "() => Promise<boolean>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<boolean>"
},
"docs": {
"text": "",
"tags": []
}
}
};
}
static get watchers() {
return [{
"propName": "animation",
"methodName": "watchAnimations"
}, {
"propName": "animationDelay",
"methodName": "watchAnimationsDelay"
}, {
"propName": "animationSpeed",
"methodName": "watchAnimationsSpeed"
}];
}
}
//# sourceMappingURL=gov-input.js.map