@kelvininc/ui-components
Version:
Kelvin UI Components
68 lines (64 loc) • 3.93 kB
JavaScript
import { p as proxyCustomElement, H, h, e as Host } from './p-D6GMjtmE.js';
import './p-BRgmvbuh.js';
import { d as EValidationState, b as EIconName } from './p-DBphUUgi.js';
import './p-BcMhjKoS.js';
import './p-BQDwJ0uF.js';
import { d as defineCustomElement$1 } from './p-B41PGLQm.js';
import { i as isEmpty } from './p-BZNGlO8m.js';
const formHelpTextCss = "@charset \"UTF-8\";@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--help-text-default-color:var(--kv-neutral-4, #bebebe);--help-text-error-color:var(--kv-error-light, #f9d1cc)}.help-text-container{width:calc(100% - var(--kv-spacing-2x, 8px));overflow:hidden;padding:var(--kv-spacing, 4px) 0 0 var(--kv-spacing-2x, 8px);color:var(--help-text-default-color);box-sizing:border-box}.help-text-container .help-text{font-family:var(--kv-primary-font, \"proxima-nova\", sans-serif, \"Arial\");font-size:12px;font-weight:400;font-stretch:normal;font-style:normal;line-height:18px;letter-spacing:normal;text-transform:none;margin-right:var(--kv-spacing, 4px);color:var(--help-text-default-color)}.help-text-container span+span::before{content:\"•\";padding-right:var(--kv-spacing, 4px)}.help-text-container kv-icon{--icon-color:var(--help-text-default-color);align-items:center;margin-right:var(--kv-spacing-2x, 8px);float:left;margin-top:2px}.help-text-container.invalid{color:var(--help-text-error-color)}.help-text-container.invalid .help-text{color:var(--help-text-error-color)}.help-text-container.invalid kv-icon{--icon-color:var(--help-text-error-color)}";
const KvFormHelpText = /*@__PURE__*/ proxyCustomElement(class KvFormHelpText extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
/** (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 watchers() { return {
"helpText": ["helpTextChangeHandler"]
}; }
static get style() { return formHelpTextCss; }
}, [1, "kv-form-help-text", {
"helpText": [513, "help-text"],
"state": [513],
"_helpTexts": [32]
}, undefined, {
"helpText": ["helpTextChangeHandler"]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["kv-form-help-text", "kv-icon"];
components.forEach(tagName => { switch (tagName) {
case "kv-form-help-text":
if (!customElements.get(tagName)) {
customElements.define(tagName, KvFormHelpText);
}
break;
case "kv-icon":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
defineCustomElement();
export { KvFormHelpText as K, defineCustomElement as d };