@kelvininc/ui-components
Version:
Kelvin UI Components
413 lines (402 loc) • 31.3 kB
JavaScript
'use strict';
var index = require('./index-rNNWWpit.js');
var date_helper = require('./date.helper-C8Apy5Qj.js');
var arrays_helper = require('./arrays.helper-Cq8m3hyH.js');
var wizard_types = require('./wizard.types-C9Yhv1tt.js');
var calendar_config = require('./calendar.config-MPAoKWYY.js');
var isEmpty = require('./isEmpty-CqcsgK-A.js');
var inputmask = require('./inputmask-DtXnpVWa.js');
var merge = require('./merge-DKeNMXHS.js');
var isNil = require('./isNil-B-fGcnNC.js');
require('./_commonjsHelpers-CFO10eej.js');
require('./isObject-COPdF2vE.js');
require('./_baseMerge-Bq8HwF_X.js');
require('./identity-Dz5mxHaJ.js');
const getCalendarStartDisabledDays = (month, year) => {
const currentMonthFirstWeekday = date_helper.getFirstWeekdayIndexOfMonth(month, year);
const lastMonthNumberOfDays = date_helper.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 arrays_helper.getArrayOfIndexes(calendar_config.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 date_helper.fromDateFields(hoveredDay, month, year).format(calendar_config.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}}kv-dropdown-base:not(.hydrated)>[slot=list]{display:none}:host{--calendar-width:196px;--calendar-horizontal-padding:0px;--calendar-vertical-padding:0px;--calendar-background-color:var(--transparent);--calendar-month-title-text-color:var(--text-container-neutral-default);--calendar-month-weekday-text-color:var(--text-container-neutral-subtle)}.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(--spacing-md)}.calendar__header .month{font-family:Proxima Nova;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0;color:var(--calendar-month-title-text-color);user-select:none}.calendar__header .navigator{min-width:16px;cursor:pointer}.calendar__header .navigator kv-icon{--icon-color:var(--icon-container-table-icon-default)}.calendar__header .navigator--disabled{cursor:not-allowed}.calendar__header .navigator--disabled kv-icon{--icon-color:var(--icon-container-table-icon-disabled)}.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(--spacing-xs)}.calendar__body .calendar-month__weekdays .weekday{font-family:Proxima Nova;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0;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) {
index.registerInstance(this, hostRef);
this.changeMonth = index.createEvent(this, "changeMonth", 7);
this.changeYear = index.createEvent(this, "changeYear", 7);
this.clickDate = index.createEvent(this, "clickDate", 7);
this.hoveredDateChange = index.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 = wizard_types.EAbsoluteTimePickerMode.Range;
this.month = date_helper.getDateMonth((_a = this.initialDate) !== null && _a !== void 0 ? _a : new Date());
this.year = date_helper.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 = date_helper.fromDateFields(day, this.month, this.year);
if (date_helper.isDateInArray(dayMoment, this.disabledDates)) {
return true;
}
if (this.minDate && date_helper.isDateBefore(dayMoment, date_helper.dayjs(this.minDate, calendar_config.DATE_FORMAT))) {
return true;
}
if (this.maxDate && date_helper.isDateAfter(dayMoment, date_helper.dayjs(this.maxDate, calendar_config.DATE_FORMAT))) {
return true;
}
return false;
};
this.onClickDay = (day) => {
const clickedDateMoment = date_helper.fromDateFields(day, this.month, this.year);
this.clickDate.emit({ date: date_helper.formatDate(clickedDateMoment) });
};
this.isDayActive = (day) => {
const date = date_helper.fromDateFields(day, this.month, this.year);
return date_helper.isDateInArray(date, this.selectedDates.filter(date => date !== undefined));
};
this.onMouseEnter = (day) => {
this.hoveredDay = day;
const date = date_helper.fromDateFields(day, this.month, this.year).format(calendar_config.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 === wizard_types.EAbsoluteTimePickerMode.Single ||
this.isDayDisabled(day) ||
selectedStartDate === undefined ||
selectedEndDate !== undefined) {
return false;
}
const date = date_helper.fromDateFields(day, this.month, this.year).format(calendar_config.DATE_FORMAT);
const hoveredDate = getHooveredDate(this.hoveredDay, this.month, this.year, this.hoveredDate);
return date_helper.isDateInRange(date, date_helper.newDate(selectedStartDate).format(calendar_config.DATE_FORMAT), hoveredDate, false);
};
this.isSelectedStartDay = (day) => {
const [selectedStartDate] = this.getSelectedRange();
if (selectedStartDate === undefined) {
return false;
}
const dateMoment = date_helper.fromDateFields(day, this.month, this.year);
return date_helper.isDateSame(dateMoment, selectedStartDate);
};
this.isSelectedEndDay = (day) => {
const date = date_helper.fromDateFields(day, this.month, this.year);
const [selectedStartDate, selectedEndDate] = this.getSelectedRange();
if (selectedStartDate === undefined) {
return false;
}
return date_helper.isDateSame(date, selectedEndDate !== null && selectedEndDate !== void 0 ? selectedEndDate : selectedStartDate);
};
this.isToday = (day) => {
const nowDate = date_helper.newDate().format(calendar_config.DATE_FORMAT);
const dayDate = date_helper.fromDateFields(day, this.month, this.year).format(calendar_config.DATE_FORMAT);
return nowDate === dayDate;
};
this.isInsideDataRange = (day) => {
const dayDate = date_helper.fromDateFields(day, this.month, this.year);
const [selectedStartDate, selectedEndDate] = this.getSelectedRange();
if (selectedStartDate === undefined || selectedEndDate === undefined)
return false;
return date_helper.isDateInRange(dayDate, selectedStartDate, selectedEndDate, false);
};
this.isBackNavigationDisabled = () => {
const calendarMinDate = this.minDate ? this.minDate : calendar_config.CALENDAR_DEFAULT_MIN_DATE;
const dayDate = date_helper.fromDateFields(1, this.month, this.year);
const minDateFormatted = date_helper.dayjs(calendarMinDate, calendar_config.DATE_FORMAT);
return dayDate.isBefore(minDateFormatted) || dayDate.isSame(minDateFormatted);
};
this.isNextNavigationDisabled = () => {
if (isEmpty.isEmpty(this.maxDate))
return false;
const dayDate = date_helper.fromDateFields(1, this.month, this.year);
const maxDateFormatted = date_helper.dayjs(this.maxDate, calendar_config.DATE_FORMAT);
return dayDate.isAfter(maxDateFormatted);
};
}
validateSelectedDates(newSelectedDates) {
if (newSelectedDates !== undefined && !date_helper.areDatesValid(newSelectedDates)) {
throw new Error('Selected date should be an array with valid dates');
}
}
validateInitialDate(newInitialDate) {
if (newInitialDate !== undefined && !date_helper.isDateValid(newInitialDate)) {
throw new Error('Initial date should be a valid date');
}
else {
this.month = date_helper.getDateMonth(newInitialDate !== null && newInitialDate !== void 0 ? newInitialDate : new Date());
this.year = date_helper.getDateYear(newInitialDate !== null && newInitialDate !== void 0 ? newInitialDate : new Date());
}
}
validateDisabledDates(newDisabledDates) {
if (newDisabledDates !== undefined && !date_helper.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 = arrays_helper.getArrayOfIndexes(date_helper.getNumberOfDaysInMonth(this.month, this.year));
const nextMonthStartDays = getCalendarEndDisabledDays(previousMonthLastDays.length + currentMonthDays.length);
return (index.h(index.Host, { key: '8f5764e3f37cdd1d2dbb68900eeaca1e77fd1cd3' }, index.h("div", { key: 'c73976a343e46594dcdbe47d8438983f61fd3082', class: "calendar" }, index.h("div", { key: 'dbada5e01ae087e2cce5f2c60626592343768c62', class: "calendar__header" }, index.h("div", { key: 'da12ffadf2ed1f3a3fd5d22e89b2c3dace26438b', class: { 'navigator': true, 'navigator--disabled': this.isBackNavigationDisabled() }, onClick: this.onClickPreviousMonth }, this.displayPreviousMonthArrow && index.h("kv-icon", { key: '2058734c09beeab7e263cc50aa8e35077bb638a0', name: wizard_types.EIconName.NavClose })), index.h("div", { key: 'de22d24456eb450aac401c14651948732585e0fb', class: "month" }, date_helper.getMonthAndYearTitle(this.month, this.year)), index.h("div", { key: '187ad16cca89403441617b91134070f486a9a7a4', class: { 'navigator': true, 'navigator--disabled': this.isNextNavigationDisabled() }, onClick: this.onClickNextMonth }, this.displayNextMonthArrow && index.h("kv-icon", { key: '6a166df8116d9c6235ae65122913ec4f5155279a', name: wizard_types.EIconName.NavOpen }))), index.h("div", { key: 'e7f86824e86c2f693ba703c5dfe009bb227541d3', class: "calendar__body" }, index.h("div", { key: 'bfe88d3c9553a40c04db2e731b2003bc04ee4441', class: "calendar-month" }, index.h("div", { key: '62c7b6798491be9241243204337c36d2abbf1c42', class: "calendar-month__weekdays" }, date_helper.getWeekdaysNames().map(weekday => (index.h("div", { key: weekday, class: "weekday" }, weekday)))), index.h("div", { key: 'd5a0036cea1e6d77239b07ef2d5a8a2756cdd78b', class: "calendar-month__days" }, previousMonthLastDays.map(id => (index.h("kv-calendar-day", { key: `previous-${this.year}-${this.month}-${id + 1}`, day: id, disabled: true }))), currentMonthDays.map(index$1 => (index.h("kv-calendar-day", { key: `${this.year}-${this.month}-${index$1 + 1}`, day: index$1 + 1, onClickDay: this.onClickDay.bind(this, index$1 + 1), disabled: this.isDayDisabled(index$1 + 1), active: this.isDayActive(index$1 + 1), inRange: this.isDayInRange(index$1 + 1), isRangeStartDate: this.isSelectedStartDay(index$1 + 1), isRangeEndDate: this.isSelectedEndDay(index$1 + 1), isToday: this.isToday(index$1 + 1), isBetweenSelectedDates: this.isInsideDataRange(index$1 + 1), onMouseEnterDay: this.onMouseEnter.bind(this, index$1 + 1), onMouseLeaveDay: this.onMouseLeave.bind(this, index$1 + 1) }))), nextMonthStartDays.map(id => (index.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}}kv-dropdown-base:not(.hydrated)>[slot=list]{display:none}:host{--day-width:28px;--day-height:28px}.calendar-day{font-family:Proxima Nova;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0;width:var(--day-width);height:var(--day-height);display:flex;align-items:center;justify-content:center;background-color:transparent;color:var(--text-container-neutral-subtle);user-select:none;cursor:pointer}.calendar-day:hover:not(.calendar-day--disabled):not(.calendar-day--active){background-color:var(--background-interactive-calendar-hover)}.calendar-day--today:not(.calendar-day--disabled){border:1px solid var(--border-container-neutral-subtlest);width:calc(var(--day-width) - 2px);height:calc(var(--day-height) - 2px)}.calendar-day--in-range:not(.calendar-day--disabled){background-color:var(--background-interactive-calendar-selected-middle)}.calendar-day--active:not(.calendar-day--disabled){background-color:var(--background-interactive-calendar-selected);color:var(--text-container-neutral-default)}.calendar-day--active:not(.calendar-day--disabled):hover{background-color:var(--background-interactive-calendar-hover);color:var(--text-container-neutral-subtle)}.calendar-day--range-start:not(.calendar-day--disabled){background-color:var(--background-interactive-calendar-selected);color:var(--text-container-neutral-default)}.calendar-day--range-end:not(.calendar-day--disabled){background-color:var(--background-interactive-calendar-selected);color:var(--text-container-neutral-default)}.calendar-day--between-dates:not(.calendar-day--disabled){background-color:var(--background-interactive-calendar-hover);color:var(--text-container-neutral-subtle)}.calendar-day--disabled{cursor:not-allowed;color:var(--text-container-neutral-disabled)}";
const KvCalendarDay = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.clickDay = index.createEvent(this, "clickDay", 7);
this.mouseEnterDay = index.createEvent(this, "mouseEnterDay", 7);
this.mouseLeaveDay = index.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 (index.h(index.Host, { key: '6074d9d6678ce58f1e7f60188e3b51d737c2730e' }, index.h("div", { key: '8447c6c1d26da0d615acacb18a79db21c343d18a', 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-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 = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.textChange = index.createEvent(this, "textChange", 7);
this.dateTimeBlur = index.createEvent(this, "dateTimeBlur", 7);
this.inputFocus = index.createEvent(this, "inputFocus", 7);
this.rightIconClick = index.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 = wizard_types.EComponentSize.Large;
/** @inheritdoc */
this.forcedFocus = false;
/** @inheritdoc */
this.highlighted = false;
/** @inheritdoc */
this.disabled = false;
/** @inheritdoc */
this.required = false;
/** @inheritdoc */
this.state = wizard_types.EValidationState.None;
/** @inheritdoc */
this.helpText = [];
/** @inheritdoc */
this.inputStyleType = wizard_types.EDateTimeInputTypeStyle.Separated;
this.focused = false;
this.getInputMaskConfig = () => {
return merge.merge({}, DATE_TIME_INPUTMASK_CONFIG, { inputFormat: this.dateFormat, displayFormat: this.dateFormat, placeholder: this.placeholder });
};
this.createInputMaskInstance = () => {
inputmask.Inputmask(this.getInputMaskConfig()).mask(this.nativeInput);
};
this.onInputHandler = ({ target }) => {
const input = target;
if (!isNil.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.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 (index.h(index.Host, { key: '3ae52f6d1ccf5ba70ed9e56c84468c669c7228c3' }, index.h("div", { key: '228840c815c0cbe386f5f810490050e5d9a53120', class: "date-time-input-container" }, this.label && index.h("kv-form-label", { key: '6e8897a69a60727f6d1e2bf09594c37972bff4ce', label: this.label, required: this.required }), index.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 === wizard_types.EValidationState.Invalid,
'disabled': this.disabled,
'filled': !isEmpty.isEmpty(value)
} }, index.h("div", { key: '935b59370eab00f3527791c1c4c005df9cd9ee5b', class: "input-container" }, index.h(index.Fragment, { key: '20c347c8eb0a589bd86ca5c50454d147510aca3a' }, index.h("div", { key: '81f7984d61fc1997bd1e9cb900b2f10beae4a057', class: {
'left-container': true,
'focus': this.focused || this.forcedFocus,
'invalid': this.state === wizard_types.EValidationState.Invalid,
'disabled': this.disabled,
'filled': !isEmpty.isEmpty(value)
} }, this.leftIcon && (index.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.isEmpty(value)
} }))), index.h("input", { key: '77180cc4b65aadc4d39a17f84cea710296dcfa44', id: id, ref: input => (this.nativeInput = input), type: wizard_types.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 && (index.h("div", { key: 'b0760b3716f36d7e911d1c908d84bd0b5f871b65', class: {
'right-container': true,
'focus': this.focused || this.forcedFocus,
'disabled': this.disabled,
'filled': !isEmpty.isEmpty(value)
}, onClick: this.onRightIconClickHandler }, index.h("kv-icon", { key: '1b1768d497117431d7f5e6bec1d0532969b736e1', name: this.rightIcon, exportparts: "icon", class: {
disabled: this.disabled,
focus: this.focused || this.forcedFocus,
filled: !isEmpty.isEmpty(value)
} }))))), this.inputStyleType === wizard_types.EDateTimeInputTypeStyle.MergedLeft && index.h("div", { key: 'a8b8c3477306f15e1c9948fc6bd7abbbc28aaa09', class: "input-separator" })), index.h("kv-form-help-text", { key: '4255bd4cdab979a1bcad573042a7e64d05752289', helpText: this.helpText, state: this.state }))));
}
get el() { return index.getElement(this); }
static get watchers() { return {
"forcedFocus": ["forcedFocusChangeHandler"],
"useInputMask": ["handleUseInputMask"]
}; }
};
KvDateTimeInput.style = dateTimeInputCss;
exports.kv_calendar = KvCalendar;
exports.kv_calendar_day = KvCalendarDay;
exports.kv_date_time_input = KvDateTimeInput;