@kelvininc/ui-components
Version:
Kelvin UI Components
371 lines (357 loc) • 33.6 kB
JavaScript
import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-D-JVwta2.js';
import { E as EIconName } from './icon.types-SVedE_O8.js';
import { b as ETooltipPosition, a as EComponentSize } from './components-DzZLIMy0.js';
import './lib-config-DwRzddFC.js';
import './action-button.types-DVds6a5Z.js';
import { b as EValidationState, a as EInputFieldType, d as EBadgeState } from './absolute-time-picker-dropdown.types-CojoW2Y2.js';
import './summary-card.types-BcMhjKoS.js';
import './toaster.types-vhHhaF4Q.js';
import './tree-item.types-CBuzk8fR.js';
import './tag-alarm.types-DHk26cGe.js';
import './wizard.types-7ioMFMb5.js';
import { i as isEmpty } from './isEmpty-BAGi1PqI.js';
import { a as isValidLabel, g as getUTF8StringLength } from './string.helper-BMAMF_sW.js';
import { I as Inputmask$1 } from './inputmask-0_J5CAE2.js';
import { i as isNil } from './isNil-DjSNdVAB.js';
import { m as merge } from './merge-uvn7Q6Uf.js';
import './_Set-B7Zkvu4X.js';
import './_Map-B6Xd0L4K.js';
import './isObject-Dkd2PDJ-.js';
import './_commonjsHelpers-BFTU3MAI.js';
import './_baseMerge-CgbDsiSj.js';
import './identity-CK4jS9_E.js';
import './_MapCache-nTWrGhJJ.js';
const dirtyDotCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--dot-color:var(--kv-secondary-5, #8358fe);--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) {
registerInstance(this, hostRef);
}
render() {
return (h(Host, { key: '9744993691fcad91fb41cf486c42f06e626de62e' }, h("kv-icon", { key: '2e82415195d005db5067f183fedf48b142b76764', name: 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}}:host{--help-text-default-color:var(--kv-neutral-4, #bebebe);--help-text-error-color:var(--kv-error-light, #f9d1cc)}.help-text-container{width:calc(100% - var(--kv-spacing-2x, 8px));overflow:hidden;padding:var(--kv-spacing, 4px) 0 0 var(--kv-spacing-2x, 8px);color:var(--help-text-default-color);box-sizing:border-box}.help-text-container .help-text{font-family:var(--kv-primary-font, \"proxima-nova\", sans-serif, \"Arial\");font-size:12px;font-weight:400;font-stretch:normal;font-style:normal;line-height:18px;letter-spacing:normal;text-transform:none;margin-right:var(--kv-spacing, 4px);color:var(--help-text-default-color)}.help-text-container span+span::before{content:\"•\";padding-right:var(--kv-spacing, 4px)}.help-text-container kv-icon{--icon-color:var(--help-text-default-color);align-items:center;margin-right:var(--kv-spacing-2x, 8px);float:left;margin-top:2px}.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) {
registerInstance(this, hostRef);
/** (optional) Form field help text */
this.helpText = [];
/** (optional) Form field state */
this.state = EValidationState.None;
}
/** 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: '270589a3d2b4b801186368e1f651164aaac57579' }, !isEmpty(this._helpTexts) && (h("div", { key: '2fc516f00482998194970308532883d2ae70e742', class: { 'help-text-container': true, 'invalid': this.state === EValidationState.Invalid } }, this.state === EValidationState.Invalid && h("kv-icon", { key: 'ddd960b2a27cd396c0d895e76f203db43f4bb58a', name: EIconName.Error, customClass: "icon-16" }), this._helpTexts.map(msg => (h("span", { class: "help-text" }, msg)))))));
}
static get watchers() { return {
"helpText": ["helpTextChangeHandler"]
}; }
};
KvFormHelpText.style = formHelpTextCss;
const formLabelLightCss = "@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{}.required{font-family:var(--kv-primary-font, \"proxima-nova\", sans-serif, \"Arial\");font-size:12px;font-weight:600;font-stretch:normal;font-style:normal;line-height:18px;letter-spacing:normal;letter-spacing:1.5px;text-transform:uppercase}.required+label{font-family:var(--kv-primary-font, \"proxima-nova\", sans-serif, \"Arial\");font-size:12px;font-weight:600;font-stretch:normal;font-style:normal;line-height:18px;letter-spacing:normal;letter-spacing:1.5px;text-transform:uppercase}.label{font-family:var(--kv-primary-font, \"proxima-nova\", sans-serif, \"Arial\");font-size:12px;font-weight:400;font-stretch:normal;font-style:normal;line-height:18px;letter-spacing:normal;letter-spacing:1.5px;text-transform:uppercase;color:var(--label-color);margin-left:var(--kv-spacing, 4px)}.required{color:var(--kv-error, #e11900);margin-left:var(--kv-spacing, 4px)}.label-container{margin-bottom:var(--kv-spacing, 4px)}:host{--label-color:var(--kv-neutral-5, #707070)}";
const formLabelNightCss = "@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{}.required{font-family:var(--kv-primary-font, \"proxima-nova\", sans-serif, \"Arial\");font-size:12px;font-weight:600;font-stretch:normal;font-style:normal;line-height:18px;letter-spacing:normal;letter-spacing:1.5px;text-transform:uppercase}.required+label{font-family:var(--kv-primary-font, \"proxima-nova\", sans-serif, \"Arial\");font-size:12px;font-weight:600;font-stretch:normal;font-style:normal;line-height:18px;letter-spacing:normal;letter-spacing:1.5px;text-transform:uppercase}.label{font-family:var(--kv-primary-font, \"proxima-nova\", sans-serif, \"Arial\");font-size:12px;font-weight:400;font-stretch:normal;font-style:normal;line-height:18px;letter-spacing:normal;letter-spacing:1.5px;text-transform:uppercase;color:var(--label-color);margin-left:var(--kv-spacing, 4px)}.required{color:var(--kv-error, #e11900);margin-left:var(--kv-spacing, 4px)}.label-container{margin-bottom:var(--kv-spacing, 4px)}:host{--label-color:var(--kv-neutral-4, #bebebe)}";
const KvFormLabel = class {
constructor(hostRef) {
registerInstance(this, hostRef);
}
render() {
return (h(Host, { key: '5e6266f1840de5eb1e1ec90d963d690ce9a465c3' }, h("div", { key: '239914614f97a770ab3bf285b5124324b9295df9', class: "form-field-container" }, isValidLabel(this.label) && (h("div", { key: '63a8dfd9500eac893251862ee4db8bb2598d88d9', class: "label-container" }, this.required && h("span", { key: '00c16d9d85f45e07f0bd4b0ba2a97e31dfb99fdd', class: "required" }, "*"), this.label && h("span", { key: '72e13e80ba2d64ac25c8fc2e5bf9341f9e5b4d71', class: "label" }, this.label))))));
}
};
KvFormLabel.style = {
light: formLabelLightCss,
night: formLabelNightCss
};
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 = class {
constructor(hostRef) {
registerInstance(this, hostRef);
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 getElement(this); }
static get watchers() { return {
"value": ["valueChangeHandler"],
"helpText": ["helpTextChangeHandler"],
"forcedFocus": ["forcedFocusChangeHandler"],
"useInputMask": ["handleUseInputMask"]
}; }
};
KvTextField.style = {
light: textFieldLightCss,
night: textFieldNightCss
};
export { KvDirtyDot as kv_dirty_dot, KvFormHelpText as kv_form_help_text, KvFormLabel as kv_form_label, KvTextField as kv_text_field };