@kelvininc/ui-components
Version:
Kelvin UI Components
382 lines (367 loc) • 29.2 kB
JavaScript
'use strict';
var index = require('./index-rNNWWpit.js');
var wizard_types = require('./wizard.types-C9Yhv1tt.js');
var isEmpty = require('./isEmpty-CqcsgK-A.js');
var string_helper = require('./string.helper-DxzCWS0Y.js');
var inputmask = require('./inputmask-DtXnpVWa.js');
var isNil = require('./isNil-B-fGcnNC.js');
var merge = require('./merge-DKeNMXHS.js');
require('./isObject-COPdF2vE.js');
require('./_commonjsHelpers-CFO10eej.js');
require('./_baseMerge-Bq8HwF_X.js');
require('./identity-Dz5mxHaJ.js');
const badgeCss = "@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{--badge-min-width:unset;--badge-max-width:fit-content;--badge-height:var(--size-md);--badge-width:unset;--badge-background-color-primary:var(--background-container-accent-purple-default);--badge-text-color-primary:var(--text-container-accent-purple-default);--badge-background-color-secondary:var(--background-interactive-counter-default);--badge-text-color-secondary:var(--text-interactive-counter-default)}.badge{font-family:Proxima Nova;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0;display:flex;align-items:center;justify-content:center;min-width:var(--badge-min-width);max-width:var(--badge-max-width);height:var(--badge-height);width:var(--badge-width);padding:0 var(--spacing-xs);line-height:unset;border-radius:var(--radius-full)}.badge--type-primary{color:var(--badge-text-color-primary);background-color:var(--badge-background-color-primary)}.badge--type-secondary{color:var(--badge-text-color-secondary);background-color:var(--badge-background-color-secondary)}.badge.disabled{color:var(--text-interactive-counter-disabled);background-color:var(--background-interactive-counter-disabled)}";
const KvBadge = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
/** (optional) Defines the badge type.*/
this.type = wizard_types.EBadgeType.Primary;
/** (optional) If `true` the badge is in disabled state. */
this.disabled = false;
}
render() {
return (index.h(index.Host, { key: '328a5d250cedc4b7e3203350524c619178929f73' }, index.h("span", { key: 'b8bebd22e6e57faf92db60bba1af4a0e20f4fe9d', class: { badge: true, [`badge--type-${this.type}`]: true, disabled: this.disabled }, part: "badge" }, index.h("slot", { key: 'b294395e58d978304c6a6964589fceccdd9bfa39' }))));
}
};
KvBadge.style = badgeCss;
const dirtyDotCss = "@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{--dot-color:var(--color-purple-500);--dot-height:6px;--dot-width:6px}.dot{--icon-color:var(--dot-color);--icon-height:var(--dot-height);--icon-width:var(--dot-width)}";
const KvDirtyDot = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
}
render() {
return (index.h(index.Host, { key: '920c8524ac48990e81ef9ba12cf72d533f824050' }, index.h("kv-icon", { key: 'def82cec1666feb0101bbe63531ca2ca7e270278', name: wizard_types.EIconName.Circle, class: "dot", part: "dot" })));
}
};
KvDirtyDot.style = dirtyDotCss;
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 = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
/** (optional) Form field help text */
this.helpText = [];
/** (optional) Form field state */
this.state = wizard_types.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 (index.h(index.Host, { key: 'c5f6b34e9e4de29ef68cec33927e247676c9d940' }, !isEmpty.isEmpty(this._helpTexts) && (index.h("div", { key: '9acac05c1a02f627eab11110cac4319f86d2cb7a', class: { 'help-text-container': true, 'invalid': this.state === wizard_types.EValidationState.Invalid } }, this.state === wizard_types.EValidationState.Invalid && this.showIcon && index.h("kv-icon", { key: 'cbade7410e0897cbed7a3b989aa43a69cefdc0cb', name: wizard_types.EIconName.Error, customClass: "icon-16" }), this._helpTexts.map(msg => (index.h("span", { class: "help-text" }, msg)))))));
}
static get watchers() { return {
"helpText": ["helpTextChangeHandler"]
}; }
};
KvFormHelpText.style = formHelpTextCss;
const formLabelCss = "@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{--label-color:var(--text-surface-neutral-tertiary);--label-required-color:var(--text-surface-danger-default);--label-gap:var(--spacing-2xs);--label-bottom-spacing:var(--spacing-2xs);display:inline-flex;user-select:none}.required{font-family:Proxima Nova;font-weight:600;font-size:12px;line-height:16px;letter-spacing:1.5px;text-transform:uppercase}.required+label{font-family:Proxima Nova;font-weight:600;font-size:12px;line-height:16px;letter-spacing:1.5px;text-transform:uppercase}.label{font-family:Proxima Nova;font-weight:400;font-size:12px;line-height:16px;letter-spacing:1.5px;text-transform:uppercase;color:var(--label-color)}.required{color:var(--label-required-color)}.label-container{display:inline-flex;gap:var(--label-gap);margin-bottom:var(--label-bottom-spacing)}";
const KvFormLabel = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
}
render() {
return (index.h(index.Host, { key: 'c4e38461c2b5c5857614c1bd0101e43513a411e0' }, string_helper.isValidLabel(this.label) && (index.h("div", { key: 'b76a5f1434976e4b7cfa9f14472ad97ee264aab3', class: "label-container" }, this.required && index.h("span", { key: 'f13abb2a716d0ba7a3f74409ce4a54b78952fb59', class: "required" }, "*"), this.label && index.h("span", { key: '14062de99c40a90543bfdfa140a499705e1f641c', class: "label" }, this.label)))));
}
};
KvFormLabel.style = formLabelCss;
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: wizard_types.ETooltipPosition.TopStart,
truncate: true
};
function getInputMaskConfig(type) {
if (type === wizard_types.EInputFieldType.Text) {
return COMMON_INPUT_MASK_CONFIG;
}
if (type === wizard_types.EInputFieldType.DateTime) {
return DATE_TIME_INPUT_MASK_CONFIG;
}
return Object.assign({ alias: 'numeric' }, COMMON_INPUT_MASK_CONFIG);
}
function isInputMaskCompatibleType(type) {
return [wizard_types.EInputFieldType.Number, wizard_types.EInputFieldType.Text, wizard_types.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 string_helper.getUTF8StringLength(fieldValue) <= maxLength ? fieldValue : false;
} })).mask(input);
}
function getValueAsString(newValue) {
return typeof newValue === 'number' ? newValue.toString() : (newValue || '').toString();
}
const textFieldCss = "@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{--input-width:auto;--input-min-width:140px;--input-max-width:100%;--input-height-large:var(--input-height-regular);--input-height-small:var(--input-height-compact);--input-gap-x:var(--input-gap-vertical-default);--input-prefix-spacing-x:var(--input-gap-vertical-small);--input-gap-y:var(--input-gap-horizontal-horizontal);--input-padding-x-large:var(--input-padding-x-regular);--input-padding-x-small:var(--input-padding-x-compact);--input-radius-large:var(--input-radius-regular);--input-radius-small:var(--input-radius-compact);--input-border-thickness:var(--input-border-thickness-default);--icon-size-large:var(--input-icon-size-regular);--icon-size-small:var(--input-icon-size-regular);--action-icon-size:var(--size-lg);--text-color-input-default:var(--input-text-text-input-default);--text-color-help-text-default:var(--input-text-helper-text-default);--border-color-default:var(--input-border-color-default);--background-color-default:var(--input-background-default);--text-color-icon-default:var(--input-icon-color-default);--text-color-action-icon-default:var(--input-icon-color-default);--text-color-input-focused:var(--input-text-text-input-selected);--border-color-focused:var(--input-border-color-selected);--text-color-icon-focused:var(--icon-interactive-input-selected);--text-color-action-icon-focused:var(--icon-interactive-input-selected);--text-color-input-filled:var(--input-text-text-input-filled);--text-color-icon-filled:var(--icon-interactive-input-filled);--text-color-action-icon-filled:var(--icon-interactive-input-filled);--border-color-filled:var(--input-border-color-filled);--text-color-input-disabled:var(--input-text-text-input-disabled);--text-color-placeholder-disabled:var(--input-text-text-input-disabled);--border-color-disabled:var(--input-border-color-disabled);--background-color-disabled:var(--input-background-disabled);--text-color-icon-disabled:var(--icon-interactive-input-disabled);--text-color-action-icon-disabled:var(--icon-interactive-input-disabled);--text-color-help-text-error:var(--input-text-helper-text-error);--border-color-error:var(--input-border-color-error)}kv-form-label{--label-color:var(--input-text-label-default);--label-gap:var(--input-gap-vertical-small);--label-required-color:var(--input-text-required-default);--label-bottom-spacing:var(--spacing-none)}kv-form-help-text{--help-text-default-color:var(--text-color-help-text-default);--help-text-error-color:var(--text-color-help-text-error);--help-text-top-spacing:var(--spacing-none);--help-text-bottom-spacing:var(--spacing-none);--help-text-right-spacing:var(--spacing-none);--help-text-left-spacing:var(--spacing-none)}kv-tooltip::part(content){width:100%}.text-field-container{display:flex;flex-direction:column;gap:var(--input-gap-y)}.resize-container{display:inline-block;position:relative;flex:1;overflow:hidden}.resize-input,.resize-text{font-family:Proxima Nova;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0;flex:1;appearance:textfield;border:0;height:100%;outline:0;box-sizing:border-box;color:var(--text-color-input-filled);background-color:transparent}.resize-text{display:inline-block;visibility:hidden;white-space:pre}.resize-input{position:absolute;top:-1px;left:0;right:0;bottom:0}input{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0}input::placeholder{color:var(--text-color-input-default)}input:focus,input.forced-focus{color:var(--text-color-input-focused)}input:read-only:not(:disabled){cursor:pointer}input:disabled{color:var(--text-color-input-disabled)}input:disabled::placeholder{color:var(--text-color-placeholder-disabled)}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);border:solid var(--input-border-thickness) var(--border-color-default);position:relative;overflow:hidden;background-color:var(--background-color-default);box-sizing:border-box}.input-container.filled{border-color:var(--border-color-filled)}.input-container.focused{border-color:var(--border-color-focused)}.input-container.invalid{border-color:var(--border-color-error)}.input-container.disabled{border-color:var(--border-color-disabled);background-color:var(--background-color-disabled)}.input-container:has(input:read-only:not(:disabled)){cursor:pointer}.input-container .left-slot-container,.input-container .right-slot-container{height:100%;display:flex;align-items:center;gap:var(--spacing-xs);color:var(--text-color-input-default)}.input-container .left-slot-container.filled,.input-container .right-slot-container.filled{color:var(--text-color-input-filled)}.input-container .left-slot-container.focus,.input-container .right-slot-container.focus{color:var(--text-color-input-focused)}.input-container .left-slot-container.disabled,.input-container .right-slot-container.disabled{color:var(--text-color-input-disabled)}.input-container .left-slot-container{color:var(--text-color-input-filled);overflow:hidden;user-select:none;margin-right:var(--input-gap-x)}.input-container .left-slot-container.has-value-prefix{margin-right:var(--input-prefix-spacing-x)}.input-container .left-slot-container kv-icon{--icon-color:var(--text-color-icon-default)}.input-container .left-slot-container kv-icon.filled{--icon-color:var(--text-color-icon-filled)}.input-container .left-slot-container kv-icon.focus{--icon-color:var(--text-color-icon-focused)}.input-container .left-slot-container kv-icon.disabled{--icon-color:var(--text-color-icon-disabled)}.input-container .left-slot-container .value-prefix{white-space:nowrap;font-family:Proxima Nova;font-weight:600;font-size:14px;line-height:20px;letter-spacing:0}.input-container .right-slot-container{justify-content:center;margin-left:var(--input-gap-x)}.input-container .right-slot-container kv-icon{--icon-color:var(--text-color-action-icon-default);--icon-width:var(--action-icon-size);--icon-height:var(--action-icon-size)}.input-container .right-slot-container kv-icon.filled{--icon-color:var(--text-color-action-icon-filled)}.input-container .right-slot-container kv-icon.focus{--icon-color:var(--text-color-action-icon-focused)}.input-container .right-slot-container kv-icon.disabled{--icon-color:var(--text-color-action-icon-disabled)}.input-container .right-slot-container:not(.disabled){cursor:pointer}.input-container--size-large{height:var(--input-height-large);border-radius:var(--input-radius-large);padding:0 var(--input-padding-x-large)}.input-container--size-large .left-slot-container kv-icon{--icon-width:var(--icon-size-large);--icon-height:var(--icon-size-large)}.input-container--size-small{height:var(--input-height-small);border-radius:var(--input-radius-small);padding:0 var(--input-padding-x-small)}.input-container--size-small .left-slot-container kv-icon{--icon-width:var(--icon-size-small);--icon-height:var(--icon-size-small)}.input-container-loading{width:100%;display:flex;margin-top:var(--spacing-xs);background:linear-gradient(90deg, color-mix(in srgb, var(--background-color-disabled) 30%, transparent) 0%, var(--background-color-disabled) 50%, color-mix(in srgb, var(--background-color-disabled) 30%, transparent) 100%);background-size:200%;animation:ghostGradientAnimation 0.8s infinite ease-out;border-radius:4px}@keyframes ghostGradientAnimation{0%{background-position:-100% 0}100%{background-position:100% 0}}.input-container-loading--size-large{height:var(--input-height-large)}.input-container-loading--size-small{height:var(--input-height-small)}";
const KvTextField = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.textChange = index.createEvent(this, "textChange", 7);
this.textFieldBlur = index.createEvent(this, "textFieldBlur", 7);
this.textFieldFocus = index.createEvent(this, "textFieldFocus", 7);
this.rightActionClick = index.createEvent(this, "rightActionClick", 7);
this.fieldClick = index.createEvent(this, "fieldClick", 7);
/** @inheritdoc */
this.type = wizard_types.EInputFieldType.Text;
/** @inheritdoc */
this.placeholder = '';
/** @inheritdoc */
this.size = wizard_types.EComponentSize.Large;
/** @inheritdoc */
this.inputDisabled = false;
/** @inheritdoc */
this.inputRequired = false;
/** @inheritdoc */
this.loading = false;
/** @inheritdoc */
this.state = wizard_types.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;
/** @inheritdoc */
this.hideBadge = false;
/** Text field focus state */
this.focused = false;
this.onHostClick = (event) => {
if (this.inputDisabled)
return;
event.preventDefault();
this.fieldClick.emit(event);
};
this.onRightActionClick = (event) => {
event.preventDefault();
this.rightActionClick.emit(event);
};
this.onInputHandler = ({ target }) => {
const input = target;
if (this.maxLength && string_helper.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.isNil(input)) {
this.value = input.value || '';
}
this.textChange.emit(this.getValue());
};
this.onPasteHandler = (event) => {
const textLength = string_helper.getUTF8StringLength(this.nativeInput.value);
const pasteData = event.clipboardData.getData('text/plain');
const shouldDisablePaste = this.maxLength && textLength + string_helper.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.textFieldFocus.emit(this.nativeInput.value);
this.focused = true;
};
this.getTooltipConfig = () => {
var _a;
return merge.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 === wizard_types.EInputFieldType.Number) {
return Number.MIN_SAFE_INTEGER;
}
};
this.getMaxValue = () => {
if (this.max !== undefined) {
return this.max;
}
if (this.type === wizard_types.EInputFieldType.Number) {
return Number.MAX_SAFE_INTEGER;
}
};
this.getUseInputMask = () => {
var _a;
return (_a = this.useInputMask) !== null && _a !== void 0 ? _a : this.type === wizard_types.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 === wizard_types.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.Inputmask.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() ? wizard_types.EInputFieldType.Text : this.type;
}
render() {
var _a;
const id = this.el.getAttribute('id');
const value = this.getValue();
const type = this.getType();
return (index.h(index.Host, { key: '44ee367f8924242448bd82fcfab54cfd3476febc', onClick: this.onHostClick, style: Object.assign({}, this.customStyle) }, index.h("kv-tooltip", Object.assign({ key: '4adcf9b956b9a23e3e997cf1a97614aa61bceebf' }, this.getTooltipConfig()), index.h("div", { key: '2dd4367e4420fb48361ab90b72d2c8bef98dbffe', class: "text-field-container" }, this.label && index.h("kv-form-label", { key: '2837e4ff1c3e996cc040b4f86b1ed147eca654b3', label: this.label, required: this.inputRequired }), !this.loading ? (index.h("div", { part: "input-container", class: {
'input-container': true,
[`input-container--size-${this.size}`]: true,
'invalid': this.state === wizard_types.EValidationState.Invalid,
'focused': this.focused,
'disabled': this.inputDisabled,
'filled': !isEmpty.isEmpty(value)
} }, index.h("div", { class: {
'left-slot-container': true,
'focus': this.focused,
'invalid': this.state === wizard_types.EValidationState.Invalid,
'disabled': this.inputDisabled,
'filled': !isEmpty.isEmpty(value),
'has-value-prefix': this.valuePrefix && !isEmpty.isEmpty(value)
} }, index.h("slot", { name: "left-slot" }), this.icon && (index.h("kv-icon", { name: this.icon, exportparts: "icon", class: {
disabled: this.inputDisabled,
focus: this.focused,
filled: !isEmpty.isEmpty(value)
} })), value && this.valuePrefix && index.h("div", { class: "value-prefix" }, this.valuePrefix)), index.h("div", { class: "resize-container" }, this.fitContent && (index.h("span", { class: "resize-text", part: "input-text" }, value || this.placeholder)), index.h("slot", { name: "input" }, index.h("input", { ref: input => (this.nativeInput = input), type: type, list: !isNil.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, part: "input-text" }))), index.h("div", { class: {
'right-slot-container': true,
'focus': this.focused,
'disabled': this.inputDisabled,
'filled': !isEmpty.isEmpty(value)
} }, index.h("slot", { name: "right-slot" }), this.isDirty && index.h("kv-dirty-dot", null), !this.hideBadge && ((_a = this.badge) === null || _a === void 0 ? void 0 : _a.trim()) && index.h("kv-badge", { exportparts: "badge" }, this.badge), this.actionIcon && (index.h("kv-icon", { name: this.actionIcon, onClick: this.onRightActionClick, class: {
disabled: this.inputDisabled,
focus: this.focused,
filled: !isEmpty.isEmpty(value)
} }))))) : (index.h("div", { class: { 'input-container-loading': true, [`input-container-loading--size-${this.size}`]: true } })), !isEmpty.isEmpty(this._helpTexts) && index.h("kv-form-help-text", { key: '1e1e36bed67c4ec2fb531ac190c07a7a380623ee', helpText: this._helpTexts, state: this.state })), !isEmpty.isEmpty(this.examples) ? (index.h("datalist", { id: `examples_${id}` }, this.examples.map(example => (index.h("option", { key: example, value: example }))))) : null)));
}
get el() { return index.getElement(this); }
static get watchers() { return {
"value": ["valueChangeHandler"],
"helpText": ["helpTextChangeHandler"],
"forcedFocus": ["forcedFocusChangeHandler"],
"useInputMask": ["handleUseInputMask"]
}; }
};
KvTextField.style = textFieldCss;
exports.kv_badge = KvBadge;
exports.kv_dirty_dot = KvDirtyDot;
exports.kv_form_help_text = KvFormHelpText;
exports.kv_form_label = KvFormLabel;
exports.kv_text_field = KvTextField;