@kelvininc/ui-components
Version:
Kelvin UI Components
265 lines (259 loc) • 17.4 kB
JavaScript
import { r as registerInstance, c as createEvent, h, H as Host } from './index-BOTigrTZ.js';
import { o as EIconName, c as EComponentSize, w as EValidationState, f as EAbsoluteTimePickerMode, h as EInputSource, n as EDateTimeInputTypeStyle } from './wizard.types-COrzvkrr.js';
import { H as dayjs, o as getDefaultTimezoneSettings, j as fromISO } from './date.helper-CiW9uy7b.js';
import { g as getFirstCalendarInitialDate, a as getSecondCalendarInitialDate } from './absolute-time-picker.helper-CXJL98c7.js';
import { i as isEmpty } from './isEmpty-DYR6-7ab.js';
import { i as isNumber } from './isNumber-MOd_OQoh.js';
import './_commonjsHelpers-B85MJLTf.js';
import './absolute-time-picker.config-jTjLvKa0.js';
import './isObject-Dkd2PDJ-.js';
const DEFAULT_LEFT_INPUT_CONFIG = {
label: 'Change On',
required: true,
state: EValidationState.None,
size: EComponentSize.Large,
leftIcon: EIconName.Calendar
};
const DEFAULT_RIGHT_INPUT_CONFIG = {
label: 'Revert On',
required: true,
state: EValidationState.None,
size: EComponentSize.Large
};
const DATE_TIME_INPUT_DATE_FORMAT = 'dd-mm-yyyy HH:MM';
const INPUT_MASK_PLACEHOLDER = 'dd-mm-yyyy 00:00';
const EMPTY_INPUT_PLACEHOLDER = 'Pick date & time';
const DATE_FORMAT = 'DD-MM-YYYY HH:mm';
const CALENDAR_DATE_FORMAT = 'YYYY-MM-DD';
const getSingleInputDate = (selectedTime, timezoneName) => {
if (isEmpty(selectedTime)) {
return '';
}
return dayjs(selectedTime[0]).tz(timezoneName).format(DATE_FORMAT);
};
const getRangeInputValues = (selectedTime, timezoneName) => {
if (isEmpty(selectedTime)) {
return {
from: '',
to: ''
};
}
const [from, to] = selectedTime;
return {
from: isNumber(from) ? dayjs(from).tz(timezoneName).format(DATE_FORMAT) : '',
to: isNumber(to) ? dayjs(to).tz(timezoneName).format(DATE_FORMAT) : ''
};
};
const getSingleCalendarDate = (inputValue) => {
return isEmpty(inputValue) ? [] : [dayjs(inputValue, DATE_FORMAT).format(CALENDAR_DATE_FORMAT)];
};
const getRangeCalendarDates = (rangeInputValues) => {
const from = rangeInputValues === null || rangeInputValues === void 0 ? void 0 : rangeInputValues.from;
const to = rangeInputValues === null || rangeInputValues === void 0 ? void 0 : rangeInputValues.to;
if (isEmpty(from) && isEmpty(to))
return [];
if (isEmpty(from) && !isEmpty(to))
return [dayjs(to, DATE_FORMAT).format(CALENDAR_DATE_FORMAT)];
if (!isEmpty(from) && isEmpty(to))
return [dayjs(from, DATE_FORMAT).format(CALENDAR_DATE_FORMAT)];
return [dayjs(from, DATE_FORMAT).format(CALENDAR_DATE_FORMAT), dayjs(to, DATE_FORMAT).format(CALENDAR_DATE_FORMAT)];
};
const absoluteTimePickerDropdownInputCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}kv-dropdown-base:not(.hydrated)>[slot=list]{display:none}.time-range-input-container{display:flex;border-radius:var(--radius-md);width:100%;align-items:flex-end}.time-range-input-container kv-date-time-input{width:50%}.single-input-container{border-radius:var(--radius-md)}.calendar-container{display:flex;gap:var(--spacing-3xl);border-radius:var(--radius-md);background-color:var(--background-container-elevated-slider);border:1px solid var(--slider-border-color-default);padding:var(--spacing-3xl)}";
const KvAbsoluteTimePickerDropdownInput = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.selectedTimeChange = createEvent(this, "selectedTimeChange", 7);
this.dropdownStateChange = createEvent(this, "dropdownStateChange", 7);
/** @inheritdoc */
this.timezone = getDefaultTimezoneSettings();
/** @inheritdoc */
this.mode = EAbsoluteTimePickerMode.Range;
/** @inheritdoc */
this.isDropdownOpen = false;
/** @inheritdoc */
this.disabled = false;
this.singleTimeInputValue = '';
this.displayedMonth = isNumber(this.initialDate) ? dayjs(this.initialDate) : dayjs();
/** Shared hovered date between calendars for range mode */
this.hoveredDate = '';
this.handleInputFocus = (source) => {
this.focusedInput = source;
if (!this.isDropdownOpen) {
this.isDropdownOpen = true;
this.dropdownStateChange.emit(this.isDropdownOpen);
}
};
this.getValidSelectedRangeFromUserClick = (parsedDate) => {
var _a, _b, _c, _d;
if (this.focusedInput === EInputSource.From) {
if (isNumber(this.minimumFromInputDate) && parsedDate.isBefore(this.minimumFromInputDate)) {
return Object.assign(Object.assign({}, this.rangeInputValues), { from: dayjs(this.minimumFromInputDate).format(DATE_FORMAT) });
}
if (!isEmpty((_a = this.rangeInputValues) === null || _a === void 0 ? void 0 : _a.to) && dayjs((_b = this.rangeInputValues) === null || _b === void 0 ? void 0 : _b.to, DATE_FORMAT).isBefore(parsedDate)) {
return { from: parsedDate.format(DATE_FORMAT), to: parsedDate.format(DATE_FORMAT) };
}
return Object.assign(Object.assign({}, this.rangeInputValues), { from: parsedDate.format(DATE_FORMAT) });
}
else {
if (isNumber(this.minimumToInputDate) && parsedDate.isBefore(this.minimumToInputDate)) {
return Object.assign(Object.assign({}, this.rangeInputValues), { to: dayjs(this.minimumToInputDate).format(DATE_FORMAT) });
}
if (!isEmpty((_c = this.rangeInputValues) === null || _c === void 0 ? void 0 : _c.from) && dayjs((_d = this.rangeInputValues) === null || _d === void 0 ? void 0 : _d.from, DATE_FORMAT).isAfter(parsedDate)) {
return { from: parsedDate.format(DATE_FORMAT), to: parsedDate.format(DATE_FORMAT) };
}
return Object.assign(Object.assign({}, this.rangeInputValues), { to: parsedDate.format(DATE_FORMAT) });
}
};
this.onClickDate = ({ detail }) => {
var _a, _b;
let clickedDate = fromISO(detail.date);
if (this.mode === EAbsoluteTimePickerMode.Single) {
if (isNumber(this.minimumSingleInputDate) && dayjs(clickedDate).isBefore(this.minimumSingleInputDate)) {
clickedDate = dayjs(this.minimumSingleInputDate);
}
this.singleTimeInputValue = clickedDate.format(DATE_FORMAT);
return;
}
const validSelectedRange = this.getValidSelectedRangeFromUserClick(clickedDate);
this.rangeInputValues = validSelectedRange;
if (this.focusedInput === EInputSource.From && isEmpty((_a = this.rangeInputValues) === null || _a === void 0 ? void 0 : _a.to)) {
this.focusedInput = EInputSource.To;
}
if (this.focusedInput === EInputSource.To && isEmpty((_b = this.rangeInputValues) === null || _b === void 0 ? void 0 : _b.from)) {
this.focusedInput = EInputSource.From;
}
};
this.handleEmptyTextChange = () => {
if (this.mode === EAbsoluteTimePickerMode.Single) {
this.singleTimeInputValue = '';
}
else {
if (this.focusedInput === EInputSource.From) {
this.rangeInputValues = Object.assign(Object.assign({}, this.rangeInputValues), { from: '' });
}
else {
this.rangeInputValues = Object.assign(Object.assign({}, this.rangeInputValues), { to: '' });
}
}
};
this.hanleOnTextChange = (event) => {
const parsedDateTime = dayjs(event.detail, DATE_FORMAT);
if (isEmpty(event.detail)) {
this.handleEmptyTextChange();
return;
}
if (parsedDateTime.isValid()) {
if (this.mode === EAbsoluteTimePickerMode.Single) {
this.singleTimeInputValue = parsedDateTime.format(DATE_FORMAT);
this.displayedMonth = parsedDateTime;
return;
}
if (this.focusedInput === EInputSource.From) {
this.rangeInputValues = Object.assign(Object.assign({}, this.rangeInputValues), { from: parsedDateTime.format(DATE_FORMAT) });
}
else {
this.rangeInputValues = Object.assign(Object.assign({}, this.rangeInputValues), { to: parsedDateTime.format(DATE_FORMAT) });
}
this.displayedMonth = parsedDateTime;
}
};
this.handleClickBackMonth = () => {
this.displayedMonth = this.displayedMonth.subtract(1, 'month');
};
this.handleClickForwardMonth = () => {
this.displayedMonth = this.displayedMonth.add(1, 'month');
};
this.handleHoveredDateChange = (event) => {
if (this.mode === EAbsoluteTimePickerMode.Range)
this.hoveredDate = event.detail;
};
this.handleCloseDropdown = () => {
var _a, _b;
this.isDropdownOpen = false;
this.focusedInput = null;
if (this.mode === EAbsoluteTimePickerMode.Single) {
if (isEmpty(this.singleTimeInputValue)) {
this.syncSelectedTimeState(this.selectedTime);
}
else {
this.selectedTimeChange.emit([dayjs(this.singleTimeInputValue, DATE_FORMAT).tz(this.timezone.name, true).valueOf()]);
}
}
else {
if (isEmpty((_a = this.rangeInputValues) === null || _a === void 0 ? void 0 : _a.from) || isEmpty((_b = this.rangeInputValues) === null || _b === void 0 ? void 0 : _b.to)) {
this.syncSelectedTimeState(this.selectedTime);
}
else {
this.selectedTimeChange.emit([
dayjs(this.rangeInputValues.from, DATE_FORMAT).tz(this.timezone.name, true).valueOf(),
dayjs(this.rangeInputValues.to, DATE_FORMAT).tz(this.timezone.name, true).valueOf()
]);
}
}
this.dropdownStateChange.emit(this.isDropdownOpen);
};
this.handleDropdownArrowClick = () => {
const previousDropdownState = this.isDropdownOpen;
// Dropdown was open, we need to handle the time state update and close the dropdown
if (previousDropdownState) {
this.handleCloseDropdown();
}
else {
this.isDropdownOpen = true;
this.focusedInput = this.mode === EAbsoluteTimePickerMode.Single ? EInputSource.Single : EInputSource.To;
this.dropdownStateChange.emit(this.isDropdownOpen);
}
};
this.isHoveringStylingActive = () => {
var _a, _b;
return (!isEmpty((_a = this.rangeInputValues) === null || _a === void 0 ? void 0 : _a.from) && this.focusedInput === EInputSource.To) || (!isEmpty((_b = this.rangeInputValues) === null || _b === void 0 ? void 0 : _b.to) && this.focusedInput === EInputSource.From);
};
this.getMinimumCalendarDate = () => {
return this.mode === EAbsoluteTimePickerMode.Single
? isNumber(this.minimumSingleInputDate) && dayjs(this.minimumSingleInputDate).format(CALENDAR_DATE_FORMAT)
: isNumber(this.minimumFromInputDate) && dayjs(this.minimumFromInputDate).format(CALENDAR_DATE_FORMAT);
};
this.getSelectedCalendarDates = () => {
const inputDate = this.mode === EAbsoluteTimePickerMode.Single ? getSingleCalendarDate(this.singleTimeInputValue) : getRangeCalendarDates(this.rangeInputValues);
if (inputDate)
return inputDate;
if (this.selectedTime) {
return this.mode === EAbsoluteTimePickerMode.Single
? getSingleCalendarDate(getSingleInputDate(this.selectedTime, this.timezone.name))
: getRangeCalendarDates(getRangeInputValues(this.selectedTime, this.timezone.name));
}
return [];
};
}
componentWillLoad() {
this.syncSelectedTimeState(this.selectedTime);
}
handleSelectedTimeChange(newValue) {
this.syncSelectedTimeState(newValue);
}
syncSelectedTimeState(newValue) {
if (this.mode === EAbsoluteTimePickerMode.Single) {
this.singleTimeInputValue = getSingleInputDate(newValue, this.timezone.name);
}
else {
this.rangeInputValues = getRangeInputValues(newValue, this.timezone.name);
}
}
render() {
var _a, _b;
const fromCalendarInitialDate = getFirstCalendarInitialDate(this.displayedMonth);
const toCalendarInitialDate = getSecondCalendarInitialDate(this.displayedMonth);
const selectedDates = this.getSelectedCalendarDates();
const useFromInputInputMask = this.focusedInput === EInputSource.From;
const useToInputInputMask = this.focusedInput === EInputSource.To;
const useSingleInputInputMask = this.focusedInput === EInputSource.Single;
const isHoveringStyleEnabled = this.isHoveringStylingActive();
const minimumCalendarDate = this.getMinimumCalendarDate();
return (h(Host, { key: '2460d2e8ab558c6d64e6b4148d232e374f50a235' }, h("kv-dropdown-base", { key: '8556ff31672fb6a9438a65cb8ac2b2cbddad29ea', isOpen: this.isDropdownOpen, onClickOutside: this.handleCloseDropdown }, h("slot", { key: '6fd559cf83df7bfd58cfb7ae8760d6dd0194d11f', name: "dropdown-action", slot: "action" }, this.mode === EAbsoluteTimePickerMode.Range ? (h("div", { class: "time-range-input-container" }, h("kv-date-time-input", Object.assign({ disabled: this.disabled, inputStyleType: EDateTimeInputTypeStyle.MergedLeft, value: (_a = this.rangeInputValues) === null || _a === void 0 ? void 0 : _a.from, dateFormat: DATE_TIME_INPUT_DATE_FORMAT, placeholder: useFromInputInputMask ? INPUT_MASK_PLACEHOLDER : EMPTY_INPUT_PLACEHOLDER, useInputMask: useFromInputInputMask, onInputFocus: () => this.handleInputFocus(EInputSource.From), forcedFocus: this.focusedInput === EInputSource.From && this.isDropdownOpen, onTextChange: this.hanleOnTextChange }, DEFAULT_LEFT_INPUT_CONFIG)), h("kv-date-time-input", Object.assign({ disabled: this.disabled, inputStyleType: EDateTimeInputTypeStyle.MergedRight, value: (_b = this.rangeInputValues) === null || _b === void 0 ? void 0 : _b.to, dateFormat: DATE_TIME_INPUT_DATE_FORMAT, placeholder: useToInputInputMask ? INPUT_MASK_PLACEHOLDER : EMPTY_INPUT_PLACEHOLDER, useInputMask: useToInputInputMask, onInputFocus: () => this.handleInputFocus(EInputSource.To), forcedFocus: this.focusedInput === EInputSource.To && this.isDropdownOpen, rightIcon: this.isDropdownOpen ? EIconName.ArrowDropUp : EIconName.ArrowDropDown, onTextChange: this.hanleOnTextChange, onRightIconClick: this.handleDropdownArrowClick }, DEFAULT_RIGHT_INPUT_CONFIG)))) : (h("div", { class: "single-input-container" }, h("kv-date-time-input", Object.assign({ disabled: this.disabled, value: this.singleTimeInputValue, dateFormat: DATE_TIME_INPUT_DATE_FORMAT, placeholder: useSingleInputInputMask ? INPUT_MASK_PLACEHOLDER : EMPTY_INPUT_PLACEHOLDER, useInputMask: useSingleInputInputMask, forcedFocus: this.focusedInput === EInputSource.Single && this.isDropdownOpen, onInputFocus: () => this.handleInputFocus(EInputSource.Single), inputStyleType: EDateTimeInputTypeStyle.Separated, rightIcon: this.isDropdownOpen ? EIconName.ArrowDropUp : EIconName.ArrowDropDown, onTextChange: this.hanleOnTextChange, onRightIconClick: this.handleDropdownArrowClick }, DEFAULT_LEFT_INPUT_CONFIG))))), h("div", { key: '4c3775d051bf21b6b00edef7cdeb3916fde9c072', slot: "list" }, h("div", { key: '32ed07881274b42003e22f12e4f3a91faa49d20b', class: "calendar-container" }, h("kv-calendar", { key: '87c0a5814c14d756b7ac3610be39e551c9b8789d', mode: this.mode, displayNextMonthArrow: false, displayPreviousMonthArrow: true, selectedDates: selectedDates, hoveredDate: this.hoveredDate, onHoveredDateChange: this.handleHoveredDateChange, disableHoveringStyling: !isHoveringStyleEnabled, initialDate: fromCalendarInitialDate, onChangeMonth: this.handleClickBackMonth, onClickDate: this.onClickDate, minDate: minimumCalendarDate }), h("kv-calendar", { key: '529c70d7002e510e7fe00c7d951fa01e726a9ccc', mode: this.mode, displayNextMonthArrow: true, displayPreviousMonthArrow: false, selectedDates: selectedDates, hoveredDate: this.hoveredDate, onHoveredDateChange: this.handleHoveredDateChange, disableHoveringStyling: !isHoveringStyleEnabled, initialDate: toCalendarInitialDate, onChangeMonth: this.handleClickForwardMonth, onClickDate: this.onClickDate, minDate: minimumCalendarDate }))))));
}
static get watchers() { return {
"selectedTime": ["handleSelectedTimeChange"]
}; }
};
KvAbsoluteTimePickerDropdownInput.style = absoluteTimePickerDropdownInputCss;
export { KvAbsoluteTimePickerDropdownInput as kv_absolute_time_picker_dropdown_input };