@kelvininc/ui-components
Version:
Kelvin UI Components
193 lines (188 loc) • 14.2 kB
JavaScript
import { H as proxyCustomElement, I as H, J as createEvent, e as EComponentSize, B as EValidationState, q as EDateTimeInputTypeStyle, K as h, M as Fragment, A as EInputFieldType, L as Host } from './p-BP5CxQcH.js';
import { m as merge, I as Inputmask } from './p-597Q-QFb.js';
import { d as defineCustomElement$3 } from './p-BOKt4LQl.js';
import { d as defineCustomElement$2 } from './p-E4GiU6Fx.js';
import { d as defineCustomElement$1 } from './p-DQ7v6WT-.js';
import { i as isNil } from './p-CRcRM80a.js';
import { i as isEmpty } from './p-BZNGlO8m.js';
const DATE_TIME_INPUTMASK_CONFIG = {
alias: 'datetime',
prefillYear: false,
showMaskOnHover: false,
clearMaskOnLostFocus: false,
allowMinus: false
};
const DEFAULT_DATE_FORMAT = 'dd-mm-yyyy HH:MM:ss';
const DEFAULT_PLACEHOLDER = 'dd-mm-yyyy 00:00:00';
const dateTimeInputCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}kv-dropdown-base:not(.hydrated)>[slot=list]{display:none}.date-time-input-container{display:flex;flex-direction:column;gap:var(--input-gap-horizontal-horizontal)}.date-time-input-container 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)}.date-time-input-container kv-form-help-text{--help-text-default-color:var(--input-text-helper-text-default);--help-text-error-color:var(--input-text-helper-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)}input{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:Proxima Nova;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0;appearance:textfield;outline:0;padding:0;width:100%;border:transparent;background-color:transparent;color:var(--input-text-text-input-filled)}input::placeholder{color:var(--input-text-text-input-default)}input:focus,input.forced-focus{color:var(--input-text-text-input-selected)}input:read-only:not(:disabled){cursor:pointer}input:disabled{color:var(--input-text-text-input-disabled)}input:disabled::placeholder{color:var(--input-text-text-input-disabled)}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{appearance:none}.input-container-wrapper{display:flex;align-items:center;min-width:140px;border:solid var(--input-border-thickness-default) var(--input-border-color-default);background-color:var(--input-background-default);overflow:hidden;box-sizing:border-box}.input-container-wrapper--size-large{height:var(--input-height-regular)}.input-container-wrapper--size-large .input-container{padding:0 var(--input-padding-x-regular)}.input-container-wrapper--size-small{height:var(--input-height-compact)}.input-container-wrapper--size-small .input-container{padding:0 var(--input-padding-x-compact)}.input-container-wrapper--style-merged-left{border-top-left-radius:var(--input-radius-regular);border-bottom-left-radius:var(--input-radius-regular);border-right-color:transparent}.input-container-wrapper--style-merged-right{border-top-right-radius:var(--input-radius-regular);border-bottom-right-radius:var(--input-radius-regular);border-left-color:transparent}.input-container-wrapper--style-separated{border-radius:var(--input-radius-regular)}.input-container-wrapper .input-separator{width:1px;height:22px;background-color:var(--border-container-neutral-subtlest)}.input-container-wrapper.filled{border-color:var(--input-border-color-filled)}.input-container-wrapper.filled.input-container-wrapper--style-merged-left{border-right-color:transparent}.input-container-wrapper.filled.input-container-wrapper--style-merged-right{border-left-color:transparent}.input-container-wrapper.focused{border-color:var(--input-border-color-selected)}.input-container-wrapper.focused .input-separator{background-color:transparent}.input-container-wrapper.focused.input-container-wrapper--style-merged-left{border-right-color:var(--input-border-color-selected)}.input-container-wrapper.focused.input-container-wrapper--style-merged-right{border-left-color:var(--input-border-color-selected)}.input-container-wrapper.invalid{border-color:var(--input-border-color-error)}.input-container-wrapper.invalid.input-container-wrapper--style-merged-left{border-right-color:transparent}.input-container-wrapper.invalid.input-container-wrapper--style-merged-right{border-left-color:transparent}.input-container-wrapper.disabled{border-color:var(--input-border-color-disabled);background-color:var(--input-background-disabled)}.input-container-wrapper.disabled.input-container-wrapper--style-merged-left{border-right-color:transparent}.input-container-wrapper.disabled.input-container-wrapper--style-merged-right{border-left-color:transparent}.input-container{position:relative;display:flex;align-items:center;justify-content:space-between;height:100%;width:100%}.input-container .left-container,.input-container .right-container{height:100%;display:flex;align-items:center;gap:var(--spacing-xs)}.input-container .left-container{overflow:hidden;user-select:none;margin-right:var(--input-gap-vertical-default)}.input-container .left-container kv-icon{--icon-color:var(--input-icon-color-default);--icon-with:var(--input-icon-size-regular);--icon-height:var(--input-icon-size-regular)}.input-container .left-container kv-icon.filled{--icon-color:var(--icon-interactive-input-filled)}.input-container .left-container kv-icon.focus{--icon-color:var(--icon-interactive-input-selected)}.input-container .left-container kv-icon.disabled{--icon-color:var(--icon-interactive-input-disabled)}.input-container .right-container{justify-content:center;margin-left:var(--input-gap-vertical-default)}.input-container .right-container kv-icon{--icon-color:var(--input-icon-color-default);--icon-width:var(--size-lg);--icon-height:var(--size-lg)}.input-container .right-container kv-icon.filled{--icon-color:var(--icon-interactive-input-filled)}.input-container .right-container kv-icon.focus{--icon-color:var(--icon-interactive-input-selected)}.input-container .right-container kv-icon.disabled{--icon-color:var(--icon-interactive-input-disabled)}.input-container .right-container:not(.disabled){cursor:pointer}";
const KvDateTimeInput = /*@__PURE__*/ proxyCustomElement(class KvDateTimeInput extends H {
constructor() {
super();
this.__registerHost();
this.textChange = createEvent(this, "textChange", 7);
this.dateTimeBlur = createEvent(this, "dateTimeBlur", 7);
this.inputFocus = createEvent(this, "inputFocus", 7);
this.rightIconClick = createEvent(this, "rightIconClick", 7);
/** @inheritdoc */
this.placeholder = DEFAULT_PLACEHOLDER;
/** @inheritdoc */
this.dateFormat = DEFAULT_DATE_FORMAT;
/** @inheritdoc */
this.value = '';
/** @inheritdoc */
this.useInputMask = false;
/** @inheritdoc */
this.size = EComponentSize.Large;
/** @inheritdoc */
this.forcedFocus = false;
/** @inheritdoc */
this.highlighted = false;
/** @inheritdoc */
this.disabled = false;
/** @inheritdoc */
this.required = false;
/** @inheritdoc */
this.state = EValidationState.None;
/** @inheritdoc */
this.helpText = [];
/** @inheritdoc */
this.inputStyleType = EDateTimeInputTypeStyle.Separated;
this.focused = false;
this.getInputMaskConfig = () => {
return merge({}, DATE_TIME_INPUTMASK_CONFIG, { inputFormat: this.dateFormat, displayFormat: this.dateFormat, placeholder: this.placeholder });
};
this.createInputMaskInstance = () => {
Inputmask(this.getInputMaskConfig()).mask(this.nativeInput);
};
this.onInputHandler = ({ target }) => {
const input = target;
if (!isNil(input) && (input === null || input === void 0 ? void 0 : input.value) !== this.value) {
this.textChange.emit(input.value || '');
}
};
this.onBlurHandler = ({ target }) => {
this.dateTimeBlur.emit(target.value);
this.focused = false;
};
this.onFocusHandler = (event) => {
this.focused = true;
this.inputFocus.emit(event);
};
this.onRightIconClickHandler = () => {
this.rightIconClick.emit();
};
}
forcedFocusChangeHandler(newValue) {
this.focused = newValue;
if (!this.focused) {
this.el.blur();
}
}
handleUseInputMask(useInputMaskValue) {
if (useInputMaskValue) {
this.createInputMaskInstance();
}
else if (this.nativeInput) {
Inputmask.remove(this.nativeInput);
}
}
componentWillLoad() {
this.focused = this.forcedFocus;
}
componentDidLoad() {
this.handleUseInputMask(this.useInputMask);
}
getValue() {
return (this.value || '').toString();
}
render() {
const id = this.el.getAttribute('id');
const value = this.getValue();
return (h(Host, { key: '3ae52f6d1ccf5ba70ed9e56c84468c669c7228c3' }, h("div", { key: '228840c815c0cbe386f5f810490050e5d9a53120', class: "date-time-input-container" }, this.label && h("kv-form-label", { key: '6e8897a69a60727f6d1e2bf09594c37972bff4ce', label: this.label, required: this.required }), h("div", { key: '52b99762c6e8ca56c1a4ecfd3f894a12aae66ba6', class: {
'input-container-wrapper': true,
[`input-container-wrapper--style-${this.inputStyleType}`]: true,
[`input-container-wrapper--size-${this.size}`]: true,
'focused': (this.focused || this.forcedFocus || this.highlighted) && !this.disabled,
'invalid': this.state === EValidationState.Invalid,
'disabled': this.disabled,
'filled': !isEmpty(value)
} }, h("div", { key: '935b59370eab00f3527791c1c4c005df9cd9ee5b', class: "input-container" }, h(Fragment, { key: '20c347c8eb0a589bd86ca5c50454d147510aca3a' }, h("div", { key: '81f7984d61fc1997bd1e9cb900b2f10beae4a057', class: {
'left-container': true,
'focus': this.focused || this.forcedFocus,
'invalid': this.state === EValidationState.Invalid,
'disabled': this.disabled,
'filled': !isEmpty(value)
} }, this.leftIcon && (h("kv-icon", { key: 'df48082bb6fb0545fca8b3afb130bafa3bba0377', name: this.leftIcon, exportparts: "icon", class: {
// invalid: this.state === EValidationState.Invalid,
disabled: this.disabled,
focus: this.focused || this.forcedFocus,
filled: !isEmpty(value)
} }))), h("input", { key: '77180cc4b65aadc4d39a17f84cea710296dcfa44', id: id, ref: input => (this.nativeInput = input), type: EInputFieldType.Text, name: this.inputName, disabled: this.disabled, placeholder: this.placeholder, value: value, onInput: this.onInputHandler, onBlur: this.onBlurHandler, onFocus: this.onFocusHandler, class: { 'forced-focus': this.focused || this.forcedFocus } }), this.rightIcon && (h("div", { key: 'b0760b3716f36d7e911d1c908d84bd0b5f871b65', class: {
'right-container': true,
'focus': this.focused || this.forcedFocus,
'disabled': this.disabled,
'filled': !isEmpty(value)
}, onClick: this.onRightIconClickHandler }, h("kv-icon", { key: '1b1768d497117431d7f5e6bec1d0532969b736e1', name: this.rightIcon, exportparts: "icon", class: {
disabled: this.disabled,
focus: this.focused || this.forcedFocus,
filled: !isEmpty(value)
} }))))), this.inputStyleType === EDateTimeInputTypeStyle.MergedLeft && h("div", { key: 'a8b8c3477306f15e1c9948fc6bd7abbbc28aaa09', class: "input-separator" })), h("kv-form-help-text", { key: '4255bd4cdab979a1bcad573042a7e64d05752289', helpText: this.helpText, state: this.state }))));
}
get el() { return this; }
static get watchers() { return {
"forcedFocus": ["forcedFocusChangeHandler"],
"useInputMask": ["handleUseInputMask"]
}; }
static get style() { return dateTimeInputCss; }
}, [256, "kv-date-time-input", {
"label": [513],
"inputName": [513, "input-name"],
"placeholder": [513],
"dateFormat": [513, "date-format"],
"value": [513],
"useInputMask": [516, "use-input-mask"],
"size": [1],
"forcedFocus": [516, "forced-focus"],
"highlighted": [516],
"disabled": [516],
"required": [516],
"state": [513],
"helpText": [513, "help-text"],
"inputStyleType": [513, "input-style-type"],
"leftIcon": [513, "left-icon"],
"rightIcon": [513, "right-icon"],
"focused": [32]
}, undefined, {
"forcedFocus": ["forcedFocusChangeHandler"],
"useInputMask": ["handleUseInputMask"]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["kv-date-time-input", "kv-form-help-text", "kv-form-label", "kv-icon"];
components.forEach(tagName => { switch (tagName) {
case "kv-date-time-input":
if (!customElements.get(tagName)) {
customElements.define(tagName, KvDateTimeInput);
}
break;
case "kv-form-help-text":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "kv-form-label":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
case "kv-icon":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
defineCustomElement();
export { KvDateTimeInput as K, defineCustomElement as d };