radh-ui
Version:
Stencil Component Starter
96 lines (95 loc) • 3.04 kB
JavaScript
import { Component, Prop, Event, h } from '@stencil/core';
import { defaultValidator, getValidator } from '../../validators';
export class RadhInput {
constructor() {
this._validator = defaultValidator;
}
componentWillLoad() {
this._validator = getValidator(this.validator);
}
componentWillUpdate() {
this._validator = getValidator(this.validator);
}
handleChange(ev) {
this.value = ev.target ? ev.target.value : null;
this.changed.emit(this.value);
}
render() {
console.log(this._validator, this._validator.validate(this.value));
return (h("div", null,
h("div", { class: "input-container" },
h("input", { value: this.value, onInput: (ev) => this.handleChange(ev) })),
!this._validator.validate(this.value) ?
h("span", { class: "validation-error" }, this._validator.errorMessage)
: null));
}
static get is() { return "radh-input"; }
static get originalStyleUrls() { return {
"$": ["radh-input.css"]
}; }
static get styleUrls() { return {
"$": ["radh-input.css"]
}; }
static get properties() { return {
"value": {
"type": "string",
"mutable": true,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "value",
"reflect": false
},
"validator": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "Array<string | ValidatorEntry | Validator<string>>",
"resolved": "(string | ValidatorEntry | Validator<string>)[]",
"references": {
"Array": {
"location": "global"
},
"ValidatorEntry": {
"location": "import",
"path": "../../validators"
},
"Validator": {
"location": "import",
"path": "../../validators"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
}
}
}; }
static get events() { return [{
"method": "changed",
"name": "changed",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
}
}]; }
}