@kelvininc/ui-components
Version:
Kelvin UI Components
101 lines (100 loc) • 3.73 kB
JavaScript
import { Host, h } from "@stencil/core";
import { isEmpty } from "lodash-es";
import { EValidationState } from "../../types";
import { EIconName } from "../icon/icon.types";
export class KvFormHelpText {
constructor() {
/** (optional) Form field help text */
this.helpText = [];
/** (optional) Form field state */
this.state = EValidationState.None;
}
/** Watch the `helpText` property and update internal state accordingly */
helpTextChangeHandler(newValue) {
this._helpTexts = this.buildHelpTextMessages(newValue);
}
componentWillLoad() {
// Init the states because Watches run only on component updates
this._helpTexts = this.buildHelpTextMessages(this.helpText);
}
buildHelpTextMessages(value) {
value = value || [];
return Array.isArray(value) ? value : [value];
}
render() {
return (h(Host, { key: '270589a3d2b4b801186368e1f651164aaac57579' }, !isEmpty(this._helpTexts) && (h("div", { key: '2fc516f00482998194970308532883d2ae70e742', class: { 'help-text-container': true, 'invalid': this.state === EValidationState.Invalid } }, this.state === EValidationState.Invalid && h("kv-icon", { key: 'ddd960b2a27cd396c0d895e76f203db43f4bb58a', name: EIconName.Error, customClass: "icon-16" }), this._helpTexts.map(msg => (h("span", { class: "help-text" }, msg)))))));
}
static get is() { return "kv-form-help-text"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["form-help-text.scss"]
};
}
static get styleUrls() {
return {
"$": ["form-help-text.css"]
};
}
static get properties() {
return {
"helpText": {
"type": "string",
"attribute": "help-text",
"mutable": false,
"complexType": {
"original": "string | string[]",
"resolved": "string | string[]",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "(optional) Form field help text"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "[]"
},
"state": {
"type": "string",
"attribute": "state",
"mutable": false,
"complexType": {
"original": "EValidationState",
"resolved": "EValidationState.Invalid | EValidationState.None | EValidationState.Valid",
"references": {
"EValidationState": {
"location": "import",
"path": "../../types",
"id": "src/types.ts::EValidationState"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "(optional) Form field state"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "EValidationState.None"
}
};
}
static get states() {
return {
"_helpTexts": {}
};
}
static get watchers() {
return [{
"propName": "helpText",
"methodName": "helpTextChangeHandler"
}];
}
}