@kelvininc/ui-components
Version:
Kelvin UI Components
67 lines (63 loc) • 4.14 kB
JavaScript
import { H as proxyCustomElement, I as H, B as EValidationState, K as h, t as EIconName, L as Host } from './p-BP5CxQcH.js';
import { d as defineCustomElement$1 } from './p-DQ7v6WT-.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}}kv-dropdown-base:not(.hydrated)>[slot=list]{display:none}:host{--help-text-default-color:var(--text-surface-neutral-tertiary);--help-text-error-color:var(--text-container-status-danger-default);--help-text-top-spacing:var(--spacing-xs);--help-text-bottom-spacing:var(--spacing-none);--help-text-right-spacing:var(--spacing-none);--help-text-left-spacing:var(--spacing-md);display:flex}.help-text-container{display:inline-flex;flex-flow:wrap;flex:1;overflow:hidden;padding:var(--help-text-top-spacing) var(--help-text-right-spacing) var(--help-text-bottom-spacing) var(--help-text-left-spacing);color:var(--help-text-default-color)}.help-text-container .help-text{font-family:Proxima Nova;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0;margin-right:var(--spacing-xs);color:var(--help-text-default-color)}.help-text-container span+span::before{content:\"•\";padding-right:var(--spacing-xs)}.help-text-container kv-icon{--icon-color:var(--help-text-default-color);align-items:center;margin-right:var(--spacing-xs);float:left}.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;
/** (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 watchers() { return {
"helpText": ["helpTextChangeHandler"]
}; }
static get style() { return formHelpTextCss; }
}, [257, "kv-form-help-text", {
"helpText": [513, "help-text"],
"state": [513],
"showIcon": [516, "show-icon"],
"_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 };