@kelvininc/ui-components
Version:
Kelvin UI Components
620 lines (619 loc) • 24 kB
JavaScript
import { Fragment, Host, h } from "@stencil/core";
import { EInputFieldType, EValidationState } from "../text-field/text-field.types";
import { EComponentSize } from "../../types";
import { isEmpty, 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 = () => {
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 }))));
}
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": false,
"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": "void",
"resolved": "void",
"references": {}
}
}];
}
static get elementRef() { return "el"; }
static get watchers() {
return [{
"propName": "forcedFocus",
"methodName": "forcedFocusChangeHandler"
}, {
"propName": "useInputMask",
"methodName": "handleUseInputMask"
}];
}
}