@kelvininc/ui-components
Version:
Kelvin UI Components
399 lines (392 loc) • 30.1 kB
JavaScript
import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-D6GMjtmE.js';
import { b as ETooltipPosition, a as EComponentSize } from './p-BRgmvbuh.js';
import { c as EInputFieldType, d as EValidationState } from './p-DBphUUgi.js';
import './p-BcMhjKoS.js';
import { E as EBadgeState } from './p-BQDwJ0uF.js';
import { g as getUTF8StringLength } from './p-BVsEG3aJ.js';
import { m as merge, I as Inputmask$1 } from './p-DZUGWoQz.js';
import { d as defineCustomElement$8 } from './p-BOySlV0g.js';
import { d as defineCustomElement$7 } from './p-BJSKhyhi.js';
import { d as defineCustomElement$6 } from './p-BYJ5hjZN.js';
import { d as defineCustomElement$5 } from './p-Bu3_3dFw.js';
import { d as defineCustomElement$4 } from './p-B41PGLQm.js';
import { d as defineCustomElement$3 } from './p-BIWUEm1f.js';
import { d as defineCustomElement$2 } from './p-GHnCHOez.js';
import { d as defineCustomElement$1 } from './p-BuaFqlfN.js';
import { i as isNil } from './p-BEvgYojK.js';
import { i as isEmpty } from './p-BZNGlO8m.js';
const COMMON_INPUT_MASK_CONFIG = {
rightAlign: false,
showMaskOnHover: false,
showMaskOnFocus: false,
clearMaskOnLostFocus: false,
placeholder: '',
oncleared: function () {
this.value = '';
}
};
const DATE_TIME_INPUT_MASK_CONFIG = {
alias: 'datetime',
inputFormat: 'dd-mm-yyyy HH:MM:ss',
displayFormat: 'dd-mm-yyyy 00:00:00',
placeholder: 'dd-mm-yyyy 00:00:00',
jitMasking: true,
showMaskOnHover: false,
clearMaskOnLostFocus: false
};
const DEFAULT_TEXT_TOOLTIP_CONFIG = {
position: ETooltipPosition.TopStart,
truncate: true
};
function getInputMaskConfig(type) {
if (type === EInputFieldType.Text) {
return COMMON_INPUT_MASK_CONFIG;
}
if (type === EInputFieldType.DateTime) {
return DATE_TIME_INPUT_MASK_CONFIG;
}
return Object.assign({ alias: 'numeric' }, COMMON_INPUT_MASK_CONFIG);
}
function isInputMaskCompatibleType(type) {
return [EInputFieldType.Number, EInputFieldType.Text, EInputFieldType.DateTime].includes(type);
}
function buildInputMask(input, inputType, options, maxLength) {
// @ts-ignore the types library for Inputmask has the callback type definition for onBeforePaste incorrect, it should return string | false
return Inputmask(Object.assign(Object.assign(Object.assign({}, getInputMaskConfig(inputType)), options), { onBeforePaste: (fieldValue) => {
if (!maxLength)
return fieldValue;
return getUTF8StringLength(fieldValue) <= maxLength ? fieldValue : false;
} })).mask(input);
}
function getValueAsString(newValue) {
return typeof newValue === 'number' ? newValue.toString() : (newValue || '').toString();
}
const textFieldLightCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--input-height-large:36px;--input-height-small:28px;--input-width:auto;--input-min-width:140px;--input-max-width:100%;--text-color-help-text-default:var(--kv-neutral-4, #bebebe);--text-color-help-text-error:var(--kv-error-light, #f9d1cc);--border-color-error:var(--kv-error, #e11900);--action-icon-size:16px}kv-form-label{--label-color:var(--text-color-label)}kv-form-help-text{--help-text-default-color:var(--text-color-help-text-default);--help-text-error-color:var(--text-color-help-text-error)}kv-tooltip::part(container){font-family:var(--kv-primary-font, \"proxima-nova\", sans-serif, \"Arial\");font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:21px;letter-spacing:normal;text-transform:none;color:var(--kv-neutral-2, #e5e5e5)}kv-tooltip::part(content){width:100%}.resize-container{display:inline-block;position:relative;flex:1;overflow:hidden}.resize-input,.resize-text{font-family:var(--kv-primary-font, \"proxima-nova\", sans-serif, \"Arial\");font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:21px;letter-spacing:normal;text-transform:none;flex:1;appearance:textfield;border:0;height:100%;outline:0;box-sizing:border-box;color:var(--text-color-input-default);background-color:transparent}.resize-text{padding:0 var(--kv-spacing, 4px);display:inline-block;visibility:hidden;white-space:pre}.resize-input{position:absolute;top:0;left:0;right:0;bottom:0}input{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}input::placeholder{color:var(--text-color-placeholder-default)}input:disabled{color:var(--text-color-input-disabled)}input:disabled::placeholder{color:var(--text-color-placeholder-disabled)}input:focus,input.forced-focus{color:var(--text-color-input-focused)}input:focus::placeholder,input.forced-focus::placeholder{color:var(--text-color-placeholder-focused)}input:read-only:not(:disabled){cursor:pointer}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{appearance:none}.input-container{display:flex;width:var(--input-width);min-width:var(--input-min-width);max-width:var(--input-max-width);padding:0 var(--kv-spacing-2x, 8px);border:solid 1px var(--border-color-default);border-radius:4px;position:relative;overflow:hidden;background-color:var(--background-color-default);box-sizing:border-box}.input-container.invalid{border-color:var(--border-color-error)}.input-container.disabled{border-color:var(--background-color-disabled);background-color:var(--background-color-disabled)}.input-container.focused:not(.invalid){border-color:var(--border-color-focused)}.input-container .left-slot-container kv-icon{--icon-color:var(--text-color-icon-default)}.input-container .left-slot-container kv-icon.disabled{--icon-color:var(--text-color-icon-disabled)}.input-container .left-slot-container kv-icon.focus:not(.invalid){--icon-color:var(--text-color-icon-focused)}.input-container .right-slot-container kv-icon{--icon-color:var(--text-color-action-icon-default)}.input-container .right-slot-container kv-icon.disabled{--icon-color:var(--text-color-action-icon-disabled)}.input-container .right-slot-container kv-icon.focus:not(.invalid){--icon-color:var(--text-color-action-icon-focused)}.input-container .left-slot-container,.input-container .right-slot-container{height:100%;display:flex;align-items:center;gap:var(--kv-spacing, 4px)}.input-container .left-slot-container.invalid,.input-container .right-slot-container.invalid{color:var(--text-color-help-text-error)}.input-container .left-slot-container.disabled,.input-container .right-slot-container.disabled{color:var(--text-color-icon-disabled)}.input-container .left-slot-container.focus:not(.invalid),.input-container .right-slot-container.focus:not(.invalid){color:var(--text-color-input-focused)}.input-container .left-slot-container{color:var(--text-color-input-default);overflow:hidden;user-select:none}.input-container .left-slot-container kv-icon{--icon-width:24px;--icon-height:24px}.input-container .left-slot-container .value-prefix{white-space:nowrap;margin-right:calc(var(--kv-spacing, 4px) / 2);font-family:var(--kv-primary-font, \"proxima-nova\", sans-serif, \"Arial\");font-size:14px;font-weight:600;font-stretch:normal;font-style:normal;line-height:21px;letter-spacing:normal;text-transform:none}.input-container .right-slot-container{justify-content:center}.input-container .right-slot-container:not(.disabled){cursor:pointer}.input-container .right-slot-container kv-icon{--icon-width:var(--action-icon-size);--icon-height:var(--action-icon-size);margin-left:var(--kv-spacing, 4px)}.input-container--size-large{height:var(--input-height-large)}.input-container--size-small{height:var(--input-height-small)}.input-container--size-small .left-slot-container kv-icon{--icon-width:16px;--icon-height:16px}.input-container-loading{width:100%;display:flex;margin-top:var(--kv-spacing, 4px)}.input-container-loading--size-large{height:var(--input-height-large)}.input-container-loading--size-small{height:var(--input-height-small)}:host{--text-color-label:var(--kv-neutral-5, #707070);--text-color-icon-default:var(--kv-neutral-4, #bebebe);--text-color-icon-disabled:var(--kv-neutral-4, #bebebe);--text-color-icon-focused:var(--kv-primary, #005cc7);--text-color-action-icon-default:var(--kv-neutral-4, #bebebe);--text-color-action-icon-disabled:var(--kv-neutral-4, #bebebe);--text-color-action-icon-focused:var(--kv-primary, #005cc7);--text-color-input-default:var(--kv-neutral-8, #202020);--text-color-input-disabled:var(--kv-neutral-5, #707070);--text-color-input-focused:var(--kv-primary, #005cc7);--text-color-placeholder-default:var(--kv-neutral-5, #707070);--text-color-placeholder-disabled:var(--kv-neutral-5, #707070);--text-color-placeholder-focused:var(--kv-neutral-5, #707070);--border-color-default:var(--kv-neutral-3, #ddd);--border-color-focused:var(--kv-primary, #005cc7);--background-color-default:var(--kv-neutral-0, #fff);--background-color-disabled:var(--kv-neutral-2, #e5e5e5)}.input-container-loading{background:linear-gradient(90deg, rgba(var(--kv-neutral-2-rgb, 229, 229, 229), 0.3) 0%, var(--kv-neutral-2, #e5e5e5) 50%, rgba(var(--kv-neutral-2-rgb, 229, 229, 229), 0.3) 100%);background-size:200%;animation:ghostGradientAnimation 0.8s infinite ease-out;transition:all 1s ease-in;border-radius:4px;transition:none}@keyframes ghostGradientAnimation{0%{background-position:-100% 0}100%{background-position:100% 0}}";
const textFieldNightCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--input-height-large:36px;--input-height-small:28px;--input-width:auto;--input-min-width:140px;--input-max-width:100%;--text-color-help-text-default:var(--kv-neutral-4, #bebebe);--text-color-help-text-error:var(--kv-error-light, #f9d1cc);--border-color-error:var(--kv-error, #e11900);--action-icon-size:16px}kv-form-label{--label-color:var(--text-color-label)}kv-form-help-text{--help-text-default-color:var(--text-color-help-text-default);--help-text-error-color:var(--text-color-help-text-error)}kv-tooltip::part(container){font-family:var(--kv-primary-font, \"proxima-nova\", sans-serif, \"Arial\");font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:21px;letter-spacing:normal;text-transform:none;color:var(--kv-neutral-2, #e5e5e5)}kv-tooltip::part(content){width:100%}.resize-container{display:inline-block;position:relative;flex:1;overflow:hidden}.resize-input,.resize-text{font-family:var(--kv-primary-font, \"proxima-nova\", sans-serif, \"Arial\");font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:21px;letter-spacing:normal;text-transform:none;flex:1;appearance:textfield;border:0;height:100%;outline:0;box-sizing:border-box;color:var(--text-color-input-default);background-color:transparent}.resize-text{padding:0 var(--kv-spacing, 4px);display:inline-block;visibility:hidden;white-space:pre}.resize-input{position:absolute;top:0;left:0;right:0;bottom:0}input{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}input::placeholder{color:var(--text-color-placeholder-default)}input:disabled{color:var(--text-color-input-disabled)}input:disabled::placeholder{color:var(--text-color-placeholder-disabled)}input:focus,input.forced-focus{color:var(--text-color-input-focused)}input:focus::placeholder,input.forced-focus::placeholder{color:var(--text-color-placeholder-focused)}input:read-only:not(:disabled){cursor:pointer}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{appearance:none}.input-container{display:flex;width:var(--input-width);min-width:var(--input-min-width);max-width:var(--input-max-width);padding:0 var(--kv-spacing-2x, 8px);border:solid 1px var(--border-color-default);border-radius:4px;position:relative;overflow:hidden;background-color:var(--background-color-default);box-sizing:border-box}.input-container.invalid{border-color:var(--border-color-error)}.input-container.disabled{border-color:var(--background-color-disabled);background-color:var(--background-color-disabled)}.input-container.focused:not(.invalid){border-color:var(--border-color-focused)}.input-container .left-slot-container kv-icon{--icon-color:var(--text-color-icon-default)}.input-container .left-slot-container kv-icon.disabled{--icon-color:var(--text-color-icon-disabled)}.input-container .left-slot-container kv-icon.focus:not(.invalid){--icon-color:var(--text-color-icon-focused)}.input-container .right-slot-container kv-icon{--icon-color:var(--text-color-action-icon-default)}.input-container .right-slot-container kv-icon.disabled{--icon-color:var(--text-color-action-icon-disabled)}.input-container .right-slot-container kv-icon.focus:not(.invalid){--icon-color:var(--text-color-action-icon-focused)}.input-container .left-slot-container,.input-container .right-slot-container{height:100%;display:flex;align-items:center;gap:var(--kv-spacing, 4px)}.input-container .left-slot-container.invalid,.input-container .right-slot-container.invalid{color:var(--text-color-help-text-error)}.input-container .left-slot-container.disabled,.input-container .right-slot-container.disabled{color:var(--text-color-icon-disabled)}.input-container .left-slot-container.focus:not(.invalid),.input-container .right-slot-container.focus:not(.invalid){color:var(--text-color-input-focused)}.input-container .left-slot-container{color:var(--text-color-input-default);overflow:hidden;user-select:none}.input-container .left-slot-container kv-icon{--icon-width:24px;--icon-height:24px}.input-container .left-slot-container .value-prefix{white-space:nowrap;margin-right:calc(var(--kv-spacing, 4px) / 2);font-family:var(--kv-primary-font, \"proxima-nova\", sans-serif, \"Arial\");font-size:14px;font-weight:600;font-stretch:normal;font-style:normal;line-height:21px;letter-spacing:normal;text-transform:none}.input-container .right-slot-container{justify-content:center}.input-container .right-slot-container:not(.disabled){cursor:pointer}.input-container .right-slot-container kv-icon{--icon-width:var(--action-icon-size);--icon-height:var(--action-icon-size);margin-left:var(--kv-spacing, 4px)}.input-container--size-large{height:var(--input-height-large)}.input-container--size-small{height:var(--input-height-small)}.input-container--size-small .left-slot-container kv-icon{--icon-width:16px;--icon-height:16px}.input-container-loading{width:100%;display:flex;margin-top:var(--kv-spacing, 4px)}.input-container-loading--size-large{height:var(--input-height-large)}.input-container-loading--size-small{height:var(--input-height-small)}:host{--text-color-label:var(--kv-neutral-4, #bebebe);--text-color-icon-default:var(--kv-neutral-4, #bebebe);--text-color-icon-disabled:var(--kv-neutral-5, #707070);--text-color-icon-focused:var(--kv-neutral-2, #e5e5e5);--text-color-action-icon-default:var(--kv-neutral-4, #bebebe);--text-color-action-icon-disabled:var(--kv-neutral-5, #707070);--text-color-action-icon-focused:var(--kv-neutral-2, #e5e5e5);--text-color-input-default:var(--kv-neutral-2, #e5e5e5);--text-color-input-disabled:var(--kv-neutral-5, #707070);--text-color-input-focused:var(--kv-neutral-2, #e5e5e5);--text-color-placeholder-default:var(--kv-neutral-4, #bebebe);--text-color-placeholder-disabled:var(--kv-neutral-5, #707070);--text-color-placeholder-focused:var(--kv-neutral-4, #bebebe);--border-color-default:var(--kv-neutral-6, #3f3f3f);--border-color-focused:var(--kv-neutral-0, #fff);--background-color-default:var(--kv-neutral-6, #3f3f3f);--background-color-disabled:var(--kv-neutral-7, #2a2a2a)}input{color-scheme:dark}.input-container-loading{background:linear-gradient(90deg, rgba(var(--kv-neutral-7-rgb, 42, 42, 42), 0.3) 0%, var(--kv-neutral-7, #2a2a2a) 50%, rgba(var(--kv-neutral-7-rgb, 42, 42, 42), 0.3) 100%);background-size:200%;animation:ghostGradientAnimation 0.8s infinite ease-out;transition:all 1s ease-in;border-radius:4px;transition:none}@keyframes ghostGradientAnimation{0%{background-position:-100% 0}100%{background-position:100% 0}}";
const KvTextField = /*@__PURE__*/ proxyCustomElement(class KvTextField extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.textChange = createEvent(this, "textChange", 7);
this.textFieldBlur = createEvent(this, "textFieldBlur", 7);
this.rightActionClick = createEvent(this, "rightActionClick", 7);
this.fieldClick = createEvent(this, "fieldClick", 7);
/** @inheritdoc */
this.type = EInputFieldType.Text;
/** @inheritdoc */
this.placeholder = '';
/** @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.isDirty = false;
/** @inheritdoc */
this.inputMaskRegex = '';
/** @inheritdoc */
this.fitContent = true;
/** Text field focus state */
this.focused = false;
this.onHostClick = (event) => {
if (this.inputDisabled)
return;
event.preventDefault();
this.fieldClick.emit();
};
this.onRightActionClick = (event) => {
event.preventDefault();
this.rightActionClick.emit();
};
this.onInputHandler = ({ target }) => {
const input = target;
if (this.maxLength && getUTF8StringLength(input.value) > this.maxLength) {
const caretPositionIdx = input.selectionStart - 1;
input.value = this.getValue().substring(0, this.maxLength);
input.setSelectionRange(caretPositionIdx, caretPositionIdx);
return;
}
if (!isNil(input)) {
this.value = input.value || '';
}
this.textChange.emit(this.getValue());
};
this.onPasteHandler = (event) => {
const textLength = getUTF8StringLength(this.nativeInput.value);
const pasteData = event.clipboardData.getData('text/plain');
const shouldDisablePaste = this.maxLength && textLength + getUTF8StringLength(pasteData) > this.maxLength;
if (shouldDisablePaste) {
event.preventDefault();
}
};
this.onBlurHandler = ({ target }) => {
this.textFieldBlur.emit(target.value);
if (this.forcedFocus) {
return;
}
this.focused = false;
};
this.onFocusHandler = () => {
this.focused = true;
};
this.getTooltipConfig = () => {
var _a;
return merge({}, DEFAULT_TEXT_TOOLTIP_CONFIG, (_a = this.tooltipConfig) !== null && _a !== void 0 ? _a : {});
};
this.getMinValue = () => {
if (this.min !== undefined) {
return this.min;
}
if (this.type === EInputFieldType.Number) {
return Number.MIN_SAFE_INTEGER;
}
};
this.getMaxValue = () => {
if (this.max !== undefined) {
return this.max;
}
if (this.type === EInputFieldType.Number) {
return Number.MAX_SAFE_INTEGER;
}
};
this.getUseInputMask = () => {
var _a;
return (_a = this.useInputMask) !== null && _a !== void 0 ? _a : this.type === EInputFieldType.Number;
};
}
/** Focuses the input */
async focusInput() {
this.nativeInput.focus();
}
/** Watch `value` property for changes and update native input element accordingly */
valueChangeHandler(newValue) {
const newStringValue = getValueAsString(newValue);
if (this.nativeInput && this.nativeInput.value !== newStringValue) {
/**
* Assigning the native input's value on attribute
* value change, allows `textChange` implementations
* to override the control's value.
*
* Used for patterns such as input trimming (removing whitespace),
* or input masking.
*/
this.updateAndEmitValue(newStringValue);
}
}
/** Watch the `helpText` property and update internal state accordingly */
helpTextChangeHandler(newValue) {
this._helpTexts = this.buildHelpTextMessages(newValue);
}
/** Watch the `forcedFocus` property and update internal state accordingly */
forcedFocusChangeHandler(newValue) {
this.focused = newValue;
if (!this.focused) {
this.el.blur();
this.nativeInput.blur();
}
else {
this.el.focus();
this.nativeInput.focus();
}
}
handleUseInputMask(newValue = this.type === EInputFieldType.Number) {
if (newValue && isInputMaskCompatibleType(this.type) && !this.maskInstance) {
this.maskInstance = buildInputMask(this.nativeInput, this.type, {
min: this.getMinValue(),
max: this.getMaxValue(),
regex: this.inputMaskRegex
}, this.maxLength);
this.maskInstance.shadowRoot = this.el.shadowRoot;
}
else {
if (this.nativeInput) {
Inputmask$1.remove(this.nativeInput);
this.valueChangeHandler(this.value);
}
}
}
componentWillLoad() {
// Init the states because Watches run only on component updates
this._helpTexts = this.buildHelpTextMessages(this.helpText);
this.focused = this.forcedFocus;
}
componentDidLoad() {
var _a, _b;
this.handleUseInputMask(this.getUseInputMask());
this.updateAndEmitValue(this.getValue());
if (!this.focused) {
this.el.blur();
(_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.blur();
}
else {
this.el.focus();
(_b = this.nativeInput) === null || _b === void 0 ? void 0 : _b.focus();
}
}
updateAndEmitValue(newString) {
this.value = this.maxLength ? newString.substring(0, this.maxLength) : newString;
if (this.nativeInput && this.nativeInput.value) {
this.nativeInput.value = this.value;
}
if (this.value !== newString) {
this.textChange.emit(this.value);
}
}
buildHelpTextMessages(value) {
value = value || [];
return Array.isArray(value) ? value : [value];
}
getValue() {
return getValueAsString(this.value);
}
getType() {
return this.getUseInputMask() ? EInputFieldType.Text : this.type;
}
render() {
const id = this.el.getAttribute('id');
const value = this.getValue();
const type = this.getType();
return (h(Host, { key: 'a7829d5d3688cfe05b18df12c027659db90e1418', onClick: this.onHostClick, style: Object.assign({}, this.customStyle) }, h("kv-tooltip", Object.assign({ key: '9c93ee2b2b128df6774459ff00faeaae204f9ad3' }, this.getTooltipConfig()), h("div", { key: 'e70a0cdcba828f71c53b4ad91195376017453592', class: "text-field-container" }, h("kv-form-label", { key: 'e279663945e21d643787ef583d759be8caf2657a', label: this.label, required: this.inputRequired }), !this.loading ? (h("div", { part: "input-container", class: {
'input-container': true,
[`input-container--size-${this.size}`]: true,
'invalid': this.state === EValidationState.Invalid,
'focused': this.focused,
'disabled': this.inputDisabled
} }, h("div", { class: {
'left-slot-container': true,
'focus': this.focused,
'invalid': this.state === EValidationState.Invalid,
'disabled': this.inputDisabled
} }, h("slot", { name: "left-slot" }), this.icon && (h("kv-icon", { name: this.icon, exportparts: "icon", class: {
invalid: this.state === EValidationState.Invalid,
disabled: this.inputDisabled,
focus: this.focused
} })), value && this.valuePrefix && h("div", { class: "value-prefix" }, this.valuePrefix)), h("div", { class: "resize-container" }, this.fitContent && h("span", { class: "resize-text" }, value || this.placeholder), h("slot", { name: "input" }, h("input", { ref: input => (this.nativeInput = input), type: type, list: !isNil(this.examples) ? `examples_${id}` : undefined, name: this.inputName, placeholder: this.placeholder, disabled: this.inputDisabled, max: this.getMaxValue(), min: this.getMinValue(), minLength: this.minLength, step: this.step, value: value, onInput: this.onInputHandler, onBlur: this.onBlurHandler, onFocus: this.onFocusHandler, onPaste: this.onPasteHandler, class: { 'resize-input': true, 'forced-focus': this.focused }, readonly: this.inputReadonly }))), h("div", { class: {
'right-slot-container': true,
'focus': this.focused,
'disabled': this.inputDisabled
} }, h("slot", { name: "right-slot" }), this.isDirty && h("kv-dirty-dot", null), this.badge && (h("kv-badge", { state: EBadgeState.Info, exportparts: "badge" }, this.badge)), this.actionIcon && (h("kv-icon", { name: this.actionIcon, onClick: this.onRightActionClick, class: {
invalid: this.state === EValidationState.Invalid,
disabled: this.inputDisabled,
focus: this.focused
} }))))) : (h("div", { class: { 'input-container-loading': true, [`input-container-loading--size-${this.size}`]: true } })), h("kv-form-help-text", { key: '742c37161773be063c52edcf7f0d23e1d17b1e8a', helpText: this._helpTexts, state: this.state })), !isEmpty(this.examples) ? (h("datalist", { id: `examples_${id}` }, this.examples.map(example => (h("option", { key: example, value: example }))))) : null)));
}
get el() { return this; }
static get watchers() { return {
"value": ["valueChangeHandler"],
"helpText": ["helpTextChangeHandler"],
"forcedFocus": ["forcedFocusChangeHandler"],
"useInputMask": ["handleUseInputMask"]
}; }
static get style() { return {
light: textFieldLightCss,
night: textFieldNightCss
}; }
}, [33, "kv-text-field", {
"type": [513],
"label": [513],
"examples": [16],
"icon": [513],
"actionIcon": [513, "action-icon"],
"inputName": [513, "input-name"],
"placeholder": [513],
"maxLength": [514, "max-length"],
"minLength": [514, "min-length"],
"max": [520],
"min": [520],
"step": [520],
"size": [1],
"inputDisabled": [4, "input-disabled"],
"inputRequired": [516, "input-required"],
"loading": [516],
"state": [513],
"inputReadonly": [4, "input-readonly"],
"helpText": [513, "help-text"],
"forcedFocus": [516, "forced-focus"],
"tooltipConfig": [16, "tooltip-config"],
"value": [1544],
"valuePrefix": [513, "value-prefix"],
"badge": [513],
"isDirty": [516, "is-dirty"],
"useInputMask": [516, "use-input-mask"],
"inputMaskRegex": [513, "input-mask-regex"],
"fitContent": [516, "fit-content"],
"customStyle": [16, "custom-style"],
"_helpTexts": [32],
"focused": [32],
"focusInput": [64]
}, undefined, {
"value": ["valueChangeHandler"],
"helpText": ["helpTextChangeHandler"],
"forcedFocus": ["forcedFocusChangeHandler"],
"useInputMask": ["handleUseInputMask"]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["kv-text-field", "kv-badge", "kv-dirty-dot", "kv-form-help-text", "kv-form-label", "kv-icon", "kv-portal", "kv-tooltip", "kv-tooltip-text"];
components.forEach(tagName => { switch (tagName) {
case "kv-text-field":
if (!customElements.get(tagName)) {
customElements.define(tagName, KvTextField);
}
break;
case "kv-badge":
if (!customElements.get(tagName)) {
defineCustomElement$8();
}
break;
case "kv-dirty-dot":
if (!customElements.get(tagName)) {
defineCustomElement$7();
}
break;
case "kv-form-help-text":
if (!customElements.get(tagName)) {
defineCustomElement$6();
}
break;
case "kv-form-label":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "kv-icon":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "kv-portal":
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 { KvTextField as K, defineCustomElement as d };