@kelvininc/ui-components
Version:
Kelvin UI Components
400 lines (394 loc) • 24.8 kB
JavaScript
import { f as ETooltipPosition, A as EInputFieldType, H as proxyCustomElement, I as H, J as createEvent, e as EComponentSize, B as EValidationState, K as h, L as Host } from './p-BP5CxQcH.js';
import { g as getUTF8StringLength } from './p-YzSFobpQ.js';
import { m as merge, I as Inputmask$1 } from './p-597Q-QFb.js';
import { d as defineCustomElement$8 } from './p-CJTppmYq.js';
import { d as defineCustomElement$7 } from './p-CcHqOBLS.js';
import { d as defineCustomElement$6 } from './p-BOKt4LQl.js';
import { d as defineCustomElement$5 } from './p-E4GiU6Fx.js';
import { d as defineCustomElement$4 } from './p-DQ7v6WT-.js';
import { d as defineCustomElement$3 } from './p-CgqRIP0M.js';
import { d as defineCustomElement$2 } from './p-DdZmrasC.js';
import { d as defineCustomElement$1 } from './p-DFBbXuLI.js';
import { i as isNil } from './p-CRcRM80a.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 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 = /*@__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.textFieldFocus = createEvent(this, "textFieldFocus", 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;
/** @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 && 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.textFieldFocus.emit(this.nativeInput.value);
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() {
var _a;
const id = this.el.getAttribute('id');
const value = this.getValue();
const type = this.getType();
return (h(Host, { key: '44ee367f8924242448bd82fcfab54cfd3476febc', onClick: this.onHostClick, style: Object.assign({}, this.customStyle) }, h("kv-tooltip", Object.assign({ key: '4adcf9b956b9a23e3e997cf1a97614aa61bceebf' }, this.getTooltipConfig()), h("div", { key: '2dd4367e4420fb48361ab90b72d2c8bef98dbffe', class: "text-field-container" }, this.label && h("kv-form-label", { key: '2837e4ff1c3e996cc040b4f86b1ed147eca654b3', 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,
'filled': !isEmpty(value)
} }, h("div", { class: {
'left-slot-container': true,
'focus': this.focused,
'invalid': this.state === EValidationState.Invalid,
'disabled': this.inputDisabled,
'filled': !isEmpty(value),
'has-value-prefix': this.valuePrefix && !isEmpty(value)
} }, h("slot", { name: "left-slot" }), this.icon && (h("kv-icon", { name: this.icon, exportparts: "icon", class: {
disabled: this.inputDisabled,
focus: this.focused,
filled: !isEmpty(value)
} })), value && this.valuePrefix && h("div", { class: "value-prefix" }, this.valuePrefix)), h("div", { class: "resize-container" }, this.fitContent && (h("span", { class: "resize-text", part: "input-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, part: "input-text" }))), h("div", { class: {
'right-slot-container': true,
'focus': this.focused,
'disabled': this.inputDisabled,
'filled': !isEmpty(value)
} }, h("slot", { name: "right-slot" }), this.isDirty && h("kv-dirty-dot", null), !this.hideBadge && ((_a = this.badge) === null || _a === void 0 ? void 0 : _a.trim()) && h("kv-badge", { exportparts: "badge" }, this.badge), this.actionIcon && (h("kv-icon", { name: this.actionIcon, onClick: this.onRightActionClick, class: {
disabled: this.inputDisabled,
focus: this.focused,
filled: !isEmpty(value)
} }))))) : (h("div", { class: { 'input-container-loading': true, [`input-container-loading--size-${this.size}`]: true } })), !isEmpty(this._helpTexts) && h("kv-form-help-text", { key: '1e1e36bed67c4ec2fb531ac190c07a7a380623ee', 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 textFieldCss; }
}, [257, "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"],
"hideBadge": [516, "hide-badge"],
"_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 };