@kelvininc/ui-components
Version:
Kelvin UI Components
123 lines (122 loc) • 4.51 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;
/** (optional) Show icon. Default: false */
this.showIcon = false;
}
/** 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: 'c5f6b34e9e4de29ef68cec33927e247676c9d940' }, !isEmpty(this._helpTexts) && (h("div", { key: '9acac05c1a02f627eab11110cac4319f86d2cb7a', class: { 'help-text-container': true, 'invalid': this.state === EValidationState.Invalid } }, this.state === EValidationState.Invalid && this.showIcon && h("kv-icon", { key: 'cbade7410e0897cbed7a3b989aa43a69cefdc0cb', 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"
},
"showIcon": {
"type": "boolean",
"attribute": "show-icon",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "(optional) Show icon. Default: false"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
}
};
}
static get states() {
return {
"_helpTexts": {}
};
}
static get watchers() {
return [{
"propName": "helpText",
"methodName": "helpTextChangeHandler"
}];
}
}