@kelvininc/ui-components
Version:
Kelvin UI Components
157 lines (153 loc) • 8.2 kB
JavaScript
import { H as proxyCustomElement, I as H, J as createEvent, A as EInputFieldType, e as EComponentSize, B as EValidationState, K as h, t as EIconName, L as Host } from './p-BP5CxQcH.js';
import { d as defineCustomElement$9 } from './p-CJTppmYq.js';
import { d as defineCustomElement$8 } from './p-CcHqOBLS.js';
import { d as defineCustomElement$7 } from './p-BOKt4LQl.js';
import { d as defineCustomElement$6 } from './p-E4GiU6Fx.js';
import { d as defineCustomElement$5 } from './p-DQ7v6WT-.js';
import { d as defineCustomElement$4 } from './p-CgqRIP0M.js';
import { d as defineCustomElement$3 } from './p-sG4FxOig.js';
import { d as defineCustomElement$2 } from './p-DdZmrasC.js';
import { d as defineCustomElement$1 } from './p-DFBbXuLI.js';
import { i as isEmpty } from './p-BZNGlO8m.js';
const searchCss = "kv-text-field{--input-height-large:var(--search-height-regular);--input-height-small:var(--search-height-compact);--input-gap-x:var(--search-gap-default);--input-padding-x-large:var(--search-padding-x-regular);--input-padding-x-small:var(--search-padding-x-compact);--input-radius-large:var(--search-radius-regular);--input-radius-small:var(--search-radius-compact);--input-border-thickness:var(--search-border-thickness-default);--icon-size-large:var(--search-icon-size-large);--icon-size-small:var(--search-icon-size-large);--action-icon-size:var(--search-icon-size-regular);--text-color-input-default:var(--search-text-default);--border-color-default:var(--search-border-color-default);--background-color-default:var(--search-background-default);--text-color-icon-default:var(--search-icon-color-default);--text-color-action-icon-default:var(--search-icon-color-default);--text-color-input-focused:var(--search-text-selected);--border-color-focused:var(--search-border-color-selected);--text-color-icon-focused:var(--search-icon-color-selected);--text-color-action-icon-focused:var(--search-icon-color-selected);--text-color-input-filled:var(--search-text-filled);--text-color-icon-filled:var(--search-icon-color-filled);--text-color-action-icon-filled:var(--search-icon-color-selected);--border-color-filled:var(--search-border-color-filled);--text-color-input-disabled:var(--search-text-disabled);--text-color-placeholder-disabled:var(--search-text-disabled);--border-color-disabled:var(--search-border-color-disabled);--background-color-disabled:var(--search-background-disabled);--text-color-icon-disabled:var(--search-icon-color-disabled);--text-color-action-icon-disabled:var(--search-icon-color-disabled)}";
const KvSearch = /*@__PURE__*/ proxyCustomElement(class KvSearch extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.textChange = createEvent(this, "textChange", 7);
this.textFieldBlur = createEvent(this, "textFieldBlur", 7);
this.textFieldFocus = createEvent(this, "textFieldFocus", 7);
this.clickResetButton = createEvent(this, "clickResetButton", 7);
this.rightActionClick = createEvent(this, "rightActionClick", 7);
this.fieldClick = createEvent(this, "fieldClick", 7);
/** @inheritdoc */
this.type = EInputFieldType.Text;
/** @inheritdoc */
this.placeholder = 'Search';
/** @inheritdoc */
this.size = EComponentSize.Large;
/** @inheritdoc */
this.inputDisabled = false;
/** @inheritdoc */
this.inputRequired = false;
/** @inheritdoc */
this.loading = false;
/** @inheritdoc */
this.state = EValidationState.None;
/** @inheritdoc */
this.inputReadonly = false;
/** @inheritdoc */
this.helpText = [];
/** @inheritdoc */
this.forcedFocus = false;
/** @inheritdoc */
this.value = '';
/** @inheritdoc */
this.useInputMask = false;
/** @inheritdoc */
this.inputMaskRegex = '';
this.onTextChange = (event) => {
event.stopPropagation();
this.textChange.emit(event.detail);
};
this.onResetClick = (event) => {
event.stopPropagation();
this.clickResetButton.emit(event.detail);
this.textChange.emit();
};
}
/** Focus input */
async focusInput() {
this.inputRef.focusInput();
}
render() {
const shouldShowResetIcon = !isEmpty(this.value) && !this.inputDisabled;
return (h(Host, { key: 'b3115390fc6d21369673cb6c92ba90b7a710173a' }, h("kv-text-field", { key: 'eafc11f469c34dd631ff974604c233b39b8a5906', ref: el => (this.inputRef = el), actionIcon: shouldShowResetIcon ? EIconName.Close : undefined, onTextChange: this.onTextChange, onRightActionClick: this.onResetClick, type: this.type, label: this.label, examples: this.examples, icon: EIconName.Search, inputName: this.inputName, placeholder: this.placeholder, maxLength: this.maxLength, minLength: this.minLength, max: this.max, min: this.min, step: this.step, size: this.size, inputDisabled: this.inputDisabled, inputRequired: this.inputRequired, loading: this.loading, state: this.state, inputReadonly: this.inputReadonly, helpText: this.helpText, forcedFocus: this.forcedFocus, tooltipConfig: this.tooltipConfig, value: this.value, useInputMask: this.useInputMask, inputMaskRegex: this.inputMaskRegex, fitContent: false })));
}
static get style() { return searchCss; }
}, [257, "kv-search", {
"type": [513],
"label": [513],
"examples": [16],
"inputName": [513, "input-name"],
"placeholder": [513],
"maxLength": [514, "max-length"],
"minLength": [514, "min-length"],
"max": [520],
"min": [520],
"step": [520],
"size": [1],
"inputDisabled": [516, "input-disabled"],
"inputRequired": [516, "input-required"],
"loading": [516],
"state": [513],
"inputReadonly": [516, "input-readonly"],
"helpText": [513, "help-text"],
"forcedFocus": [516, "forced-focus"],
"tooltipConfig": [16, "tooltip-config"],
"value": [520],
"useInputMask": [516, "use-input-mask"],
"inputMaskRegex": [513, "input-mask-regex"],
"focusInput": [64]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["kv-search", "kv-badge", "kv-dirty-dot", "kv-form-help-text", "kv-form-label", "kv-icon", "kv-portal", "kv-text-field", "kv-tooltip", "kv-tooltip-text"];
components.forEach(tagName => { switch (tagName) {
case "kv-search":
if (!customElements.get(tagName)) {
customElements.define(tagName, KvSearch);
}
break;
case "kv-badge":
if (!customElements.get(tagName)) {
defineCustomElement$9();
}
break;
case "kv-dirty-dot":
if (!customElements.get(tagName)) {
defineCustomElement$8();
}
break;
case "kv-form-help-text":
if (!customElements.get(tagName)) {
defineCustomElement$7();
}
break;
case "kv-form-label":
if (!customElements.get(tagName)) {
defineCustomElement$6();
}
break;
case "kv-icon":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "kv-portal":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "kv-text-field":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "kv-tooltip":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
case "kv-tooltip-text":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
defineCustomElement();
export { KvSearch as K, defineCustomElement as d };