@kelvininc/ui-components
Version:
Kelvin UI Components
608 lines (607 loc) • 23.6 kB
JavaScript
import { Fragment, Host, h } from "@stencil/core";
import { EInputFieldType, EValidationState } from "../text-field/text-field.types";
import { EComponentSize } from "../../types";
import { isNil, merge } from "lodash-es";
import { DATE_TIME_INPUTMASK_CONFIG, DEFAULT_DATE_FORMAT, DEFAULT_PLACEHOLDER } from "./date-time-input.config";
import { EDateTimeInputTypeStyle } from "./date-time-input.types";
import Inputmask from "inputmask";
export class KvDateTimeInput {
constructor() {
/** @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 }))));
}
static get is() { return "kv-date-time-input"; }
static get originalStyleUrls() {
return {
"$": ["date-time-input.scss"]
};
}
static get styleUrls() {
return {
"$": ["date-time-input.css"]
};
}
static get properties() {
return {
"label": {
"type": "string",
"attribute": "label",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Date time input label"
},
"getter": false,
"setter": false,
"reflect": true
},
"inputName": {
"type": "string",
"attribute": "input-name",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Date time input name"
},
"getter": false,
"setter": false,
"reflect": true
},
"placeholder": {
"type": "string",
"attribute": "placeholder",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Date time place holder"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "DEFAULT_PLACEHOLDER"
},
"dateFormat": {
"type": "string",
"attribute": "date-format",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Format of the provided date"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "DEFAULT_DATE_FORMAT"
},
"value": {
"type": "string",
"attribute": "value",
"mutable": false,
"complexType": {
"original": "string | null",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Date time value"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "''"
},
"useInputMask": {
"type": "boolean",
"attribute": "use-input-mask",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Use a input mask when the Date time type is a Datetime (default true)"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"size": {
"type": "string",
"attribute": "size",
"mutable": false,
"complexType": {
"original": "EComponentSize",
"resolved": "EComponentSize.Large | EComponentSize.Small",
"references": {
"EComponentSize": {
"location": "import",
"path": "../../types",
"id": "src/types.ts::EComponentSize"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Sets this tab item to a different styling configuration"
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "EComponentSize.Large"
},
"forcedFocus": {
"type": "boolean",
"attribute": "forced-focus",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Date time focus state"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"highlighted": {
"type": "boolean",
"attribute": "highlighted",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Similar to forcedFocus but does not emmit events"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"disabled": {
"type": "boolean",
"attribute": "disabled",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Date time input disabled"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"required": {
"type": "boolean",
"attribute": "required",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Date time input required"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"state": {
"type": "string",
"attribute": "state",
"mutable": false,
"complexType": {
"original": "EValidationState",
"resolved": "EValidationState.Invalid | EValidationState.None | EValidationState.Valid",
"references": {
"EValidationState": {
"location": "import",
"path": "../text-field/text-field.types",
"id": "src/components/text-field/text-field.types.ts::EValidationState"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Date time input state"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "EValidationState.None"
},
"helpText": {
"type": "string",
"attribute": "help-text",
"mutable": false,
"complexType": {
"original": "string | string[]",
"resolved": "string | string[]",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Date time input help text"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "[]"
},
"inputStyleType": {
"type": "string",
"attribute": "input-style-type",
"mutable": false,
"complexType": {
"original": "EDateTimeInputTypeStyle",
"resolved": "EDateTimeInputTypeStyle.MergedLeft | EDateTimeInputTypeStyle.MergedRight | EDateTimeInputTypeStyle.Separated",
"references": {
"EDateTimeInputTypeStyle": {
"location": "import",
"path": "./date-time-input.types",
"id": "src/components/date-time-input/date-time-input.types.ts::EDateTimeInputTypeStyle"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Specifies if the inputs should be joined together or separated"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "EDateTimeInputTypeStyle.Separated"
},
"leftIcon": {
"type": "string",
"attribute": "left-icon",
"mutable": false,
"complexType": {
"original": "EIconName",
"resolved": "EIconName",
"references": {
"EIconName": {
"location": "import",
"path": "../../types",
"id": "src/types.ts::EIconName"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Input left icon"
},
"getter": false,
"setter": false,
"reflect": true
},
"rightIcon": {
"type": "string",
"attribute": "right-icon",
"mutable": false,
"complexType": {
"original": "EIconName",
"resolved": "EIconName",
"references": {
"EIconName": {
"location": "import",
"path": "../../types",
"id": "src/types.ts::EIconName"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Input right icon"
},
"getter": false,
"setter": false,
"reflect": true
}
};
}
static get states() {
return {
"focused": {}
};
}
static get events() {
return [{
"method": "textChange",
"name": "textChange",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Emitted when a keyboard input occurred"
},
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
}
}, {
"method": "dateTimeBlur",
"name": "dateTimeBlur",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Emitted when date time lost focus"
},
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
}
}, {
"method": "inputFocus",
"name": "inputFocus",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Emitted when the input is foccused"
},
"complexType": {
"original": "FocusEvent",
"resolved": "FocusEvent",
"references": {
"FocusEvent": {
"location": "global",
"id": "global::FocusEvent"
}
}
}
}, {
"method": "rightIconClick",
"name": "rightIconClick",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Emitted when the right icon is clicked"
},
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
}
}];
}
static get elementRef() { return "el"; }
static get watchers() {
return [{
"propName": "forcedFocus",
"methodName": "forcedFocusChangeHandler"
}, {
"propName": "useInputMask",
"methodName": "handleUseInputMask"
}];
}
}