@kelvininc/ui-components
Version:
Kelvin UI Components
410 lines (400 loc) • 27.8 kB
JavaScript
import { r as registerInstance, c as createEvent, h, H as Host, F as Fragment, g as getElement } from './index-D-JVwta2.js';
import { r as fromDateFields, s as getFirstWeekdayIndexOfMonth, t as getNumberOfDaysInMonth, u as getDateMonth, v as getDateYear, w as isDateInArray, q as isDateBefore, a as dayjs, x as isDateAfter, y as formatDate, z as isDateInRange, o as newDate, p as isDateSame, A as areDatesValid, B as isDateValid, C as getMonthAndYearTitle, D as getWeekdaysNames } from './date.helper-D0D1COyq.js';
import { g as getArrayOfIndexes } from './arrays.helper-C0GqgbWr.js';
import { E as EIconName } from './icon.types-SVedE_O8.js';
import { D as DATE_FORMAT, C as CALENDAR_FILLED_ROWS_NUMBER_OF_DAYS, a as CALENDAR_DEFAULT_MIN_DATE } from './calendar.config-BY-Rxx_4.js';
import { a as EComponentSize } from './components-DzZLIMy0.js';
import './lib-config-DwRzddFC.js';
import './action-button.types-DVds6a5Z.js';
import { i as EAbsoluteTimePickerMode, b as EValidationState, a as EInputFieldType } 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 { E as EDateTimeInputTypeStyle } from './date-time-input.types-AOocjcjw.js';
import { I as Inputmask } from './inputmask-0_J5CAE2.js';
import { m as merge } from './merge-uvn7Q6Uf.js';
import { i as isNil } from './isNil-DjSNdVAB.js';
import './_commonjsHelpers-BFTU3MAI.js';
import './_Set-B7Zkvu4X.js';
import './_Map-B6Xd0L4K.js';
import './isObject-Dkd2PDJ-.js';
import './_baseMerge-CgbDsiSj.js';
import './identity-CK4jS9_E.js';
import './_MapCache-nTWrGhJJ.js';
const getCalendarStartDisabledDays = (month, year) => {
const currentMonthFirstWeekday = getFirstWeekdayIndexOfMonth(month, year);
const lastMonthNumberOfDays = getNumberOfDaysInMonth(month - 1, year);
const lastMonthDays = [];
let index = currentMonthFirstWeekday;
while (index > 0) {
lastMonthDays.push(lastMonthNumberOfDays - index + 1);
index = index - 1;
}
return lastMonthDays;
};
const getCalendarEndDisabledDays = (filledDays) => {
return getArrayOfIndexes(CALENDAR_FILLED_ROWS_NUMBER_OF_DAYS - filledDays).map(item => item + 1);
};
const getSelectedRange = (selectedDates = []) => {
if (selectedDates.length > 0) {
const [startDate] = selectedDates;
if (selectedDates.length === 1) {
return [startDate];
}
const [endDate] = selectedDates.slice(-1);
return [startDate, endDate];
}
return [];
};
const getHooveredDate = (hoveredDay, month, year, hoveredDate) => {
if (hoveredDay !== undefined) {
return fromDateFields(hoveredDay, month, year).format(DATE_FORMAT);
}
if (hoveredDate !== undefined) {
return hoveredDate;
}
return undefined;
};
const calendarCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--calendar-width:196px;--calendar-horizontal-padding:0px;--calendar-vertical-padding:0px;--calendar-background-color:var(--kv-neutral-7, #2a2a2a);--calendar-month-title-text-color:var(--kv-neutral-2, #e5e5e5);--calendar-month-weekday-text-color:var(--kv-neutral-4, #bebebe)}.calendar{padding:var(--calendar-vertical-padding) var(--calendar-horizontal-padding);background-color:var(--calendar-background-color);border-radius:4px;width:var(--calendar-width);box-sizing:border-box}.calendar__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--kv-spacing-2x, 8px)}.calendar__header .month{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(--calendar-month-title-text-color);user-select:none}.calendar__header .navigator{min-width:16px;cursor:pointer}.calendar__header .navigator--disabled{cursor:not-allowed}.calendar__header .navigator--disabled kv-icon{--icon-color:var(--kv-neutral-5, #707070)}.calendar__body .calendar-month{display:grid;grid-template-columns:repeat(auto-fit, calc((var(--calendar-width) - var(--calendar-horizontal-padding) * 2) / 7 * 7))}.calendar__body .calendar-month__weekdays{display:flex;align-items:center;justify-content:space-between;user-select:none;margin-bottom:var(--kv-spacing, 4px)}.calendar__body .calendar-month__weekdays .weekday{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;width:calc((var(--calendar-width) - var(--calendar-horizontal-padding) * 2) / 7);color:var(--calendar-month-weekday-text-color);text-align:center}.calendar__body .calendar-month__days{display:grid;grid-template-columns:repeat(auto-fit, calc((var(--calendar-width) - var(--calendar-horizontal-padding) * 2) / 7))}";
const KvCalendar = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.changeMonth = createEvent(this, "changeMonth", 7);
this.changeYear = createEvent(this, "changeYear", 7);
this.clickDate = createEvent(this, "clickDate", 7);
this.hoveredDateChange = createEvent(this, "hoveredDateChange", 7);
var _a, _b;
/** @inheritdoc */
this.selectedDates = [];
/** @inheritdoc */
this.disableHoveringStyling = false;
/** @inheritdoc */
this.disabledDates = [];
/** @inheritdoc */
this.displayPreviousMonthArrow = true;
/** @inheritdoc */
this.displayNextMonthArrow = true;
/** @inheritdoc */
this.mode = EAbsoluteTimePickerMode.Range;
this.month = getDateMonth((_a = this.initialDate) !== null && _a !== void 0 ? _a : new Date());
this.year = getDateYear((_b = this.initialDate) !== null && _b !== void 0 ? _b : new Date());
this.onClickPreviousMonth = () => {
if (!this.isBackNavigationDisabled()) {
if (this.month === 1) {
this.year = this.year - 1;
this.month = 12;
this.changeMonth.emit({ month: this.month });
this.changeYear.emit({ year: this.year });
return;
}
this.month = this.month - 1;
this.changeMonth.emit({ month: this.month });
}
};
this.onClickNextMonth = () => {
if (!this.isNextNavigationDisabled()) {
if (this.month === 12) {
this.year = this.year + 1;
this.month = 1;
this.changeMonth.emit({ month: this.month });
this.changeYear.emit({ year: this.year });
return;
}
this.month = this.month + 1;
this.changeMonth.emit({ month: this.month });
}
};
this.isDayDisabled = (day) => {
const dayMoment = fromDateFields(day, this.month, this.year);
if (isDateInArray(dayMoment, this.disabledDates)) {
return true;
}
if (this.minDate && isDateBefore(dayMoment, dayjs(this.minDate, DATE_FORMAT))) {
return true;
}
if (this.maxDate && isDateAfter(dayMoment, dayjs(this.maxDate, DATE_FORMAT))) {
return true;
}
return false;
};
this.onClickDay = (day) => {
const clickedDateMoment = fromDateFields(day, this.month, this.year);
this.clickDate.emit({ date: formatDate(clickedDateMoment) });
};
this.isDayActive = (day) => {
const date = fromDateFields(day, this.month, this.year);
return isDateInArray(date, this.selectedDates.filter(date => date !== undefined));
};
this.onMouseEnter = (day) => {
this.hoveredDay = day;
const date = fromDateFields(day, this.month, this.year).format(DATE_FORMAT);
this.hoveredDateChange.emit(date);
};
this.onMouseLeave = (_day) => {
this.hoveredDay = undefined;
this.hoveredDateChange.emit('');
};
this.isDayInRange = (day) => {
const [selectedStartDate, selectedEndDate] = this.getSelectedRange();
if (this.disableHoveringStyling ||
this.mode === EAbsoluteTimePickerMode.Single ||
this.isDayDisabled(day) ||
selectedStartDate === undefined ||
selectedEndDate !== undefined) {
return false;
}
const date = fromDateFields(day, this.month, this.year).format(DATE_FORMAT);
const hoveredDate = getHooveredDate(this.hoveredDay, this.month, this.year, this.hoveredDate);
return isDateInRange(date, newDate(selectedStartDate).format(DATE_FORMAT), hoveredDate, false);
};
this.isSelectedStartDay = (day) => {
const [selectedStartDate] = this.getSelectedRange();
if (selectedStartDate === undefined) {
return false;
}
const dateMoment = fromDateFields(day, this.month, this.year);
return isDateSame(dateMoment, selectedStartDate);
};
this.isSelectedEndDay = (day) => {
const date = fromDateFields(day, this.month, this.year);
const [selectedStartDate, selectedEndDate] = this.getSelectedRange();
if (selectedStartDate === undefined) {
return false;
}
return isDateSame(date, selectedEndDate !== null && selectedEndDate !== void 0 ? selectedEndDate : selectedStartDate);
};
this.isToday = (day) => {
const nowDate = newDate().format(DATE_FORMAT);
const dayDate = fromDateFields(day, this.month, this.year).format(DATE_FORMAT);
return nowDate === dayDate;
};
this.isInsideDataRange = (day) => {
const dayDate = fromDateFields(day, this.month, this.year);
const [selectedStartDate, selectedEndDate] = this.getSelectedRange();
if (selectedStartDate === undefined || selectedEndDate === undefined)
return false;
return isDateInRange(dayDate, selectedStartDate, selectedEndDate, false);
};
this.isBackNavigationDisabled = () => {
const calendarMinDate = this.minDate ? this.minDate : CALENDAR_DEFAULT_MIN_DATE;
const dayDate = fromDateFields(1, this.month, this.year);
const minDateFormatted = dayjs(calendarMinDate, DATE_FORMAT);
return dayDate.isBefore(minDateFormatted) || dayDate.isSame(minDateFormatted);
};
this.isNextNavigationDisabled = () => {
if (isEmpty(this.maxDate))
return false;
const dayDate = fromDateFields(1, this.month, this.year);
const maxDateFormatted = dayjs(this.maxDate, DATE_FORMAT);
return dayDate.isAfter(maxDateFormatted);
};
}
validateSelectedDates(newSelectedDates) {
if (newSelectedDates !== undefined && !areDatesValid(newSelectedDates)) {
throw new Error('Selected date should be an array with valid dates');
}
}
validateInitialDate(newInitialDate) {
if (newInitialDate !== undefined && !isDateValid(newInitialDate)) {
throw new Error('Initial date should be a valid date');
}
else {
this.month = getDateMonth(newInitialDate !== null && newInitialDate !== void 0 ? newInitialDate : new Date());
this.year = getDateYear(newInitialDate !== null && newInitialDate !== void 0 ? newInitialDate : new Date());
}
}
validateDisabledDates(newDisabledDates) {
if (newDisabledDates !== undefined && !areDatesValid(newDisabledDates)) {
throw new Error('Disabled dates should be an array with valid dates');
}
}
componentWillLoad() {
this.validateSelectedDates(this.selectedDates);
this.validateInitialDate(this.initialDate);
this.validateDisabledDates(this.disabledDates);
}
getSelectedRange() {
return getSelectedRange(this.selectedDates);
}
render() {
const previousMonthLastDays = getCalendarStartDisabledDays(this.month, this.year);
const currentMonthDays = getArrayOfIndexes(getNumberOfDaysInMonth(this.month, this.year));
const nextMonthStartDays = getCalendarEndDisabledDays(previousMonthLastDays.length + currentMonthDays.length);
return (h(Host, { key: '9310ba6c9b27714a18adf64a2e6cbdabe00961b1' }, h("div", { key: '58cc403963167482b5b0133ec5e4e1710d074bec', class: "calendar" }, h("div", { key: '1f44a313b2500392190144c2b15fce121effbb3a', class: "calendar__header" }, h("div", { key: '91e41ad29bc3fcf72ed9afe8159b30e2ac88f627', class: { 'navigator': true, 'navigator--disabled': this.isBackNavigationDisabled() }, onClick: this.onClickPreviousMonth }, this.displayPreviousMonthArrow && h("kv-icon", { key: '93ed77d6e9868dc04231aa50044c795dd597a190', name: EIconName.NavClose })), h("div", { key: '9941068318d245e2860812f36fb926a111f505b3', class: "month" }, getMonthAndYearTitle(this.month, this.year)), h("div", { key: 'b0e489006e68111aaa7dd5284ec63b6c54f998df', class: { 'navigator': true, 'navigator--disabled': this.isNextNavigationDisabled() }, onClick: this.onClickNextMonth }, this.displayNextMonthArrow && h("kv-icon", { key: '15efdf9a4936dadf1159a03ad1ec3eb9390eb8d1', name: EIconName.NavOpen }))), h("div", { key: '5ddad731f73ea3a936761f181d5230f34f067686', class: "calendar__body" }, h("div", { key: 'e0e41bc4aebb85affdfbf9671f26e9552d98f2fb', class: "calendar-month" }, h("div", { key: 'd740c163935af02d2e60d27f6acd125577e1abc9', class: "calendar-month__weekdays" }, getWeekdaysNames().map(weekday => (h("div", { key: weekday, class: "weekday" }, weekday)))), h("div", { key: '8d430dd5d08e079e0c084c6293bd218b7eb67650', class: "calendar-month__days" }, previousMonthLastDays.map(id => (h("kv-calendar-day", { key: `previous-${this.year}-${this.month}-${id + 1}`, day: id, disabled: true }))), currentMonthDays.map(index => (h("kv-calendar-day", { key: `${this.year}-${this.month}-${index + 1}`, day: index + 1, onClickDay: this.onClickDay.bind(this, index + 1), disabled: this.isDayDisabled(index + 1), active: this.isDayActive(index + 1), inRange: this.isDayInRange(index + 1), isRangeStartDate: this.isSelectedStartDay(index + 1), isRangeEndDate: this.isSelectedEndDay(index + 1), isToday: this.isToday(index + 1), isBetweenSelectedDates: this.isInsideDataRange(index + 1), onMouseEnterDay: this.onMouseEnter.bind(this, index + 1), onMouseLeaveDay: this.onMouseLeave.bind(this, index + 1) }))), nextMonthStartDays.map(id => (h("kv-calendar-day", { key: `after-${this.year}-${this.month}-${id + 1}`, day: id, disabled: true })))))))));
}
static get watchers() { return {
"selectedDates": ["validateSelectedDates"],
"initialDate": ["validateInitialDate"],
"disabledDates": ["validateDisabledDates"]
}; }
};
KvCalendar.style = calendarCss;
const calendarDayCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--day-width:28px;--day-height:28px}.calendar-day{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;width:var(--day-width);height:var(--day-height);display:flex;align-items:center;justify-content:center;background-color:transparent;color:var(--kv-neutral-4, #bebebe);user-select:none;cursor:pointer}.calendar-day:hover:not(.calendar-day--disabled):not(.calendar-day--active){background-color:rgba(var(--kv-info-rgb, 39, 110, 241), 0.16)}.calendar-day--today:not(.calendar-day--disabled){border:1px solid var(--kv-neutral-5, #707070);width:calc(var(--day-width) - 2px);height:calc(var(--day-height) - 2px)}.calendar-day--in-range:not(.calendar-day--disabled){background-color:rgba(var(--kv-info-rgb, 39, 110, 241), 0.16)}.calendar-day--active:not(.calendar-day--disabled){background-color:var(--kv-primary-dark, #103d73);color:var(--kv-neutral-2, #e5e5e5)}.calendar-day--active:not(.calendar-day--disabled):hover{background-color:rgba(var(--kv-info-rgb, 39, 110, 241), 0.16);color:var(--kv-neutral-4, #bebebe)}.calendar-day--range-start:not(.calendar-day--disabled){background-color:var(--kv-primary-dark, #103d73);color:var(--kv-neutral-2, #e5e5e5)}.calendar-day--range-end:not(.calendar-day--disabled){background-color:var(--kv-primary-dark, #103d73);color:var(--kv-neutral-2, #e5e5e5)}.calendar-day--between-dates:not(.calendar-day--disabled){background-color:rgba(var(--kv-info-rgb, 39, 110, 241), 0.16);color:var(--kv-neutral-4, #bebebe)}.calendar-day--disabled{cursor:not-allowed;color:var(--kv-neutral-5, #707070)}";
const KvCalendarDay = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.clickDay = createEvent(this, "clickDay", 7);
this.mouseEnterDay = createEvent(this, "mouseEnterDay", 7);
this.mouseLeaveDay = createEvent(this, "mouseLeaveDay", 7);
/** @inheritdoc */
this.disabled = false;
/** @inheritdoc */
this.active = false;
/** @inheritdoc */
this.inRange = false;
/** @inheritdoc */
this.isRangeStartDate = false;
/** @inheritdoc */
this.isRangeEndDate = false;
/** @inheritdoc */
this.isToday = false;
/** @inheritdoc */
this.isBetweenSelectedDates = false;
this.onClickDay = () => {
if (this.disabled) {
return;
}
this.clickDay.emit(this.day);
};
this.onMouseEnterDay = () => {
this.mouseEnterDay.emit(this.day);
};
this.onMouseLeaveDay = () => {
this.mouseLeaveDay.emit(this.day);
};
}
render() {
return (h(Host, { key: 'bbb19b4c68d581c0d89093b5b9d036cb981f72fd' }, h("div", { key: 'd011caf9477b14c259eb894408189c0cda9bb4b7', onClick: this.onClickDay, class: {
'calendar-day': true,
'calendar-day--disabled': this.disabled,
'calendar-day--active': this.active,
'calendar-day--in-range': this.inRange,
'calendar-day--today': this.isToday,
'calendar-day--range-start': this.isRangeStartDate,
'calendar-day--range-end': this.isRangeEndDate,
'calendar-day--between-dates': this.isBetweenSelectedDates
}, onMouseEnter: this.onMouseEnterDay, onMouseLeave: this.onMouseLeaveDay, part: "day-container" }, this.day)));
}
};
KvCalendarDay.style = calendarDayCss;
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-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 = class {
constructor(hostRef) {
registerInstance(this, hostRef);
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 getElement(this); }
static get watchers() { return {
"forcedFocus": ["forcedFocusChangeHandler"],
"useInputMask": ["handleUseInputMask"]
}; }
};
KvDateTimeInput.style = dateTimeInputCss;
export { KvCalendar as kv_calendar, KvCalendarDay as kv_calendar_day, KvDateTimeInput as kv_date_time_input };