@kelvininc/ui-components
Version:
Kelvin UI Components
191 lines (185 loc) • 11.2 kB
JavaScript
import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, e as Host } from './p-D6GMjtmE.js';
import { d as EValidationState, c as EInputFieldType } from './p-DBphUUgi.js';
import { a as EComponentSize } from './p-BRgmvbuh.js';
import './p-BcMhjKoS.js';
import './p-BQDwJ0uF.js';
import { m as merge, I as Inputmask } from './p-DZUGWoQz.js';
import { d as defineCustomElement$3 } from './p-BYJ5hjZN.js';
import { d as defineCustomElement$2 } from './p-Bu3_3dFw.js';
import { d as defineCustomElement$1 } from './p-B41PGLQm.js';
import { i as isNil } from './p-BEvgYojK.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';
var EDateTimeInputTypeStyle;
(function (EDateTimeInputTypeStyle) {
EDateTimeInputTypeStyle["Separated"] = "separated";
EDateTimeInputTypeStyle["MergedLeft"] = "merged-left";
EDateTimeInputTypeStyle["MergedRight"] = "merged-right";
})(EDateTimeInputTypeStyle || (EDateTimeInputTypeStyle = {}));
const dateTimeInputCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}kv-form-label{user-select:none;--label-color:var(--kv-neutral-4, #bebebe)}input{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;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-scheme:dark;appearance:textfield;outline:0;background:var(--kv-neutral-6, #3f3f3f);border:transparent;padding:0 var(--kv-spacing-2x, 8px);width:100%}.input-container-wrapper{display:flex;align-items:center;background-color:var(--kv-neutral-6, #3f3f3f);min-width:196px}.input-container-wrapper--size-large{height:36px}.input-container-wrapper--size-small{height:28px}.input-container-wrapper--style-merged-left{border-top-left-radius:4px;border-bottom-left-radius:4px}.input-container-wrapper--style-merged-right{border-top-right-radius:4px;border-bottom-right-radius:4px}.input-container-wrapper--style-separated{border-radius:4px}.input-container-wrapper .input-separator{width:1px;height:20px;background-color:var(--kv-neutral-5, #707070)}.input-container{position:relative;display:flex;align-items:center;justify-content:space-between;height:100%;width:100%;border-radius:4px;border:solid 1px var(--kv-neutral-6, #3f3f3f);color:var(--kv-neutral-2, #e5e5e5);overflow:hidden;box-sizing:border-box}.input-container kv-icon{--icon-color:var(--kv-neutral-4, #bebebe)}.input-container.focus,.input-container.forced-focus{color:var(--kv-neutral-2, #e5e5e5);border-color:var(--kv-neutral-0, #fff)}.input-container.focus kv-icon,.input-container.forced-focus kv-icon{--icon-color:var(--kv-neutral-2, #e5e5e5)}.input-container.focus::placeholder,.input-container.forced-focus::placeholder{color:var(--kv-neutral-4, #bebebe)}.input-container.disabled{background-color:var(--kv-neutral-7, #2a2a2a);color:var(--kv-neutral-5, #707070)}.input-container.disabled kv-icon{--icon-color:var(--kv-neutral-5, #707070)}.input-container.invalid{border-color:var(--kv-error, #e11900)}.input-container .left-container{display:flex;align-items:center;width:100%}.input-container .left-container .left-icon{padding-left:var(--kv-spacing-2x, 8px)}.input-container .left-container .left-icon kv-icon{--icon-height:20px;--icon-width:20px}.input-container .right-icon{padding-right:var(--kv-spacing-2x, 8px);cursor:pointer}.input-container .right-icon kv-icon{--icon-height:20px;--icon-width:20px}";
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 = event => {
this.rightIconClick.emit(event);
};
}
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: '2c4940748a70ba1e0452c128ba02bec52725930a' }, h("div", { key: '5a9627e030248adbe1a2bc0255b8ca7dcf0cb134', class: "date-time-input-container" }, h("kv-form-label", { key: '983972d70402b41787f33be0485df8d1485a7620', label: this.label, required: this.required }), h("div", { key: '649da9531044930b489c7ce10feb4436e3ae43a5', class: {
'input-container-wrapper': true,
[`input-container-wrapper--style-${this.inputStyleType}`]: true,
[`input-container-wrapper--size-${this.size}`]: true
} }, h("div", { key: '50200018e10bb1a3115b88681dbdf2c4808c279f', class: {
'input-container': true,
['forced-focus']: (this.focused || this.forcedFocus || this.highlighted) && !this.disabled,
['invalid']: this.state === EValidationState.Invalid
} }, h(Fragment, { key: 'c5bd8b44f73a895eb5697400df5b620d5ba1014f' }, h("div", { key: '7ac7455e49fcbef073a45e6b1995badb99095ca9', class: "left-container" }, this.leftIcon && (h("div", { key: 'b0f4c5261abb68e86fc4f8fdcf7b1201f927d2e1', class: "left-icon" }, h("kv-icon", { key: 'f985a2ae950d9a0caf702053b3534e98b272c66f', name: this.leftIcon, exportparts: "icon", class: {
invalid: this.state === EValidationState.Invalid,
disabled: this.disabled,
focus: this.focused || this.forcedFocus
} }))), h("input", { key: '5cf836911e9e2e7fd22b08aa2ac0d3863ed2f388', 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: '66c5764aed37e6421d07d7c8729bd7911ffcc63e', class: "right-icon", onClick: this.onRightIconClickHandler }, h("kv-icon", { key: 'a77591fbf1a343fa0b2136a36021a2776a3a9825', name: this.rightIcon, exportparts: "icon", class: {
invalid: this.state === EValidationState.Invalid,
disabled: this.disabled,
focus: this.focused || this.forcedFocus
} }))))), this.inputStyleType === EDateTimeInputTypeStyle.MergedLeft && h("div", { key: 'ee8645473a297c52af6b90834e01f11096826da6', class: "input-separator" })), h("kv-form-help-text", { key: 'c8d301bf44fb091e7b4c60c6850642b70ec3afcc', helpText: this.helpText, state: this.state }))));
}
get el() { return this; }
static get watchers() { return {
"forcedFocus": ["forcedFocusChangeHandler"],
"useInputMask": ["handleUseInputMask"]
}; }
static get style() { return dateTimeInputCss; }
}, [0, "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 { EDateTimeInputTypeStyle as E, KvDateTimeInput as K, defineCustomElement as d };