@kelvininc/ui-components
Version:
Kelvin UI Components
205 lines (200 loc) • 11.4 kB
JavaScript
import { r as registerInstance, c as createEvent, h, H as Host } from './index-BOTigrTZ.js';
import { f as EAbsoluteTimePickerMode, i as EAbsoluteTimeError, d as ETooltipPosition, c as EComponentSize, j as EActionButtonType } from './wizard.types-COrzvkrr.js';
import { H as dayjs, b as buildTimezoneByOffset, u as getTimezonesNames, n as getDefaultTimezone, t as getTimezoneOffset } from './date.helper-CiW9uy7b.js';
import { C as CALENDAR_DATE_TIME_MASK, D as DATETIME_INPUT_MASK, a as CALENDAR_MASK } from './absolute-time-picker.config-jTjLvKa0.js';
import { c as createTimestampInTimezoneFromFormattedDate, D as DEFAULT_TIME_RANGE_DROPDOWN_POSITION_OPTIONS, b as buildTooltipText, a as buildCustomIntervalTimeRange, d as DEFAULT_TIME_RANGE_PICKER_INPUT_CONFIG, h as hasRangeChanged } from './time-picker.helper-Ri9_auu5.js';
import { i as isEmpty } from './isEmpty-DYR6-7ab.js';
import { i as isNil } from './isNil-DjSNdVAB.js';
import { i as isNumber } from './isNumber-MOd_OQoh.js';
import { m as merge } from './merge-D2bAicdu.js';
import './_commonjsHelpers-B85MJLTf.js';
import './floating-ui.dom-CJTtq_QG.js';
import './config-DfTrc9q6.js';
import './relative-time.helper-CEymGdgK.js';
import './isObject-Dkd2PDJ-.js';
import './_baseMerge-ECDD_Loo.js';
import './identity-CK4jS9_E.js';
const getSelectedTimestampDates = (range, mode, timezoneName) => {
if ((range === null || range === void 0 ? void 0 : range.length) === 0)
return [];
if (mode === EAbsoluteTimePickerMode.Single) {
const [date] = range;
return [createTimestampInTimezoneFromFormattedDate(date, timezoneName, CALENDAR_DATE_TIME_MASK)];
}
const [from, to] = range;
const dateFrom = createTimestampInTimezoneFromFormattedDate(from, timezoneName, CALENDAR_DATE_TIME_MASK);
const dateTo = !isEmpty(to) ? createTimestampInTimezoneFromFormattedDate(to, timezoneName, CALENDAR_DATE_TIME_MASK) : undefined;
return [dateFrom, dateTo];
};
const getFormattedSelectedDates = (range, mode, timezoneName) => {
if (isEmpty(range))
return [];
if (mode === EAbsoluteTimePickerMode.Single) {
const [date] = range;
return [dayjs(date).tz(timezoneName).format(CALENDAR_DATE_TIME_MASK)];
}
const [from, to] = range;
const dateFrom = dayjs(from).tz(timezoneName).format(CALENDAR_DATE_TIME_MASK);
const dateTo = !isNil(to) ? dayjs(to).tz(timezoneName).format(CALENDAR_DATE_TIME_MASK) : undefined;
return [dateFrom, dateTo];
};
const getAbsoluteTimePickerError = (range, mode, limits) => {
if (!isAbsoluteTimePickerFilled(range, mode)) {
return;
}
if (mode === EAbsoluteTimePickerMode.Single) {
const [date] = range;
if (limits.minDate && dayjs(date).isBefore(limits.minDate)) {
return EAbsoluteTimeError.StartDateBeforeMinimumDate;
}
if (limits.maxDate && dayjs(date).isAfter(limits.maxDate)) {
return EAbsoluteTimeError.EndDateAfterMaximumDate;
}
return;
}
const [startDate, endDate] = range;
if (!dayjs(endDate).isAfter(startDate)) {
return EAbsoluteTimeError.EndDateBeforeStartDate;
}
if (limits.minDate && dayjs(startDate).isBefore(limits.minDate)) {
return EAbsoluteTimeError.StartDateBeforeMinimumDate;
}
if (limits.maxDate && dayjs(endDate).isAfter(limits.maxDate)) {
return EAbsoluteTimeError.EndDateAfterMaximumDate;
}
return;
};
const isAbsoluteTimePickerFilled = (range, mode) => {
if (isEmpty(range))
return false;
if (mode === EAbsoluteTimePickerMode.Single) {
const [date] = range;
return isNumber(date);
}
const [from, to] = range;
return isNumber(from) && isNumber(to);
};
const absoluteTimePickerDropdownCss = "@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{display:block}.absolute-time-content{background-color:var(--background-container-elevated-slider);border:1px solid var(--slider-border-color-default);border-radius:var(--radius-md);width:max-content}.absolute-time-content .footer{display:flex;justify-content:flex-end;padding:var(--spacing-2xl);border-top:1px solid var(--slider-border-color-default)}.absolute-time-content .footer .actions{display:flex;gap:var(--spacing-md)}";
const KvAbsoluteTimePickerDropdown = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.selectedDatesChange = createEvent(this, "selectedDatesChange", 7);
this.cancelClicked = createEvent(this, "cancelClicked", 7);
this.dropdownStateChange = createEvent(this, "dropdownStateChange", 7);
/** @inheritdoc */
this.inputConfig = {};
/** @inheritdoc */
this.dropdownPositionOptions = DEFAULT_TIME_RANGE_DROPDOWN_POSITION_OPTIONS;
/** @inheritdoc */
this.selectedDates = [];
/** @inheritdoc */
this.timezones = buildTimezoneByOffset(getTimezonesNames());
/** @inheritdoc */
this.disabledDates = [];
/** @inheritdoc */
this.mode = EAbsoluteTimePickerMode.Single;
/** @inheritdoc */
this.tooltipPosition = ETooltipPosition.BottomStart;
/** @inheritdoc */
this.headerTitle = '';
/** @inheritdoc */
this.disabled = false;
/** @inheritdoc */
this.dropdownOpen = false;
// Defines the calendar initial date if needed
this.calendarInitialDate = this.initialDate;
// Current selected option
this.selectedDateState = [];
this.getSelectedTimezone = () => {
if (!isEmpty(this.timezone))
return this.timezone;
const defaultTimezone = getDefaultTimezone();
return {
name: defaultTimezone,
offset: getTimezoneOffset(defaultTimezone)
};
};
this.handleAbsoluteDatesChange = ({ detail }) => {
const range = detail.range;
const { name: timezoneName } = this.getSelectedTimezone();
this.selectedDateState = getSelectedTimestampDates(range, this.mode, timezoneName);
};
this.getAbsoluteRange = () => {
const { name: timezoneName } = this.getSelectedTimezone();
return getFormattedSelectedDates(this.selectedDateState, this.mode, timezoneName);
};
this.getCalendarLimitDatesFormatted = (date) => {
if (!isNumber(date))
return;
const selectedTimezone = this.getSelectedTimezone();
return dayjs(date).tz(selectedTimezone.name).format(DATETIME_INPUT_MASK);
};
this.onDropdownChange = ({ detail: isDropdownOpen }) => {
this.dropdownOpen = isDropdownOpen;
this.dropdownStateChange.emit(isDropdownOpen);
};
this.getTextFieldTooltip = () => {
var _a;
if (((_a = this.selectedDates) === null || _a === void 0 ? void 0 : _a.length) > 0) {
return buildTooltipText(this.selectedDates, this.getSelectedTimezone(), this.timezones);
}
};
this.getDropdownInputValue = () => {
return buildCustomIntervalTimeRange(this.selectedDates, this.getSelectedTimezone().name);
};
this.getInputConfig = () => {
const inputValue = this.getDropdownInputValue();
return merge({}, DEFAULT_TIME_RANGE_PICKER_INPUT_CONFIG, this.inputConfig, {
value: inputValue,
tooltipConfig: { text: this.getTextFieldTooltip(), position: this.tooltipPosition }
});
};
this.onClickApply = () => {
this.selectedDatesChange.emit(this.selectedDateState);
this.dropdownStateChange.emit(false);
this.dropdownOpen = false;
};
this.onClickCancel = (event) => {
this.undoLastChanges();
this.cancelClicked.emit(event);
this.dropdownOpen = false;
};
this.undoLastChanges = () => {
if (!isEmpty(this.selectedDates)) {
this.selectedDateState = this.selectedDates;
}
else {
this.selectedDateState = [];
}
};
}
componentWillLoad() {
var _a, _b;
if (((_a = this.selectedDates) === null || _a === void 0 ? void 0 : _a.length) > 0 && ((_b = this.selectedDateState) === null || _b === void 0 ? void 0 : _b.length) === 0) {
this.selectedDateState = this.selectedDates;
this.handleSelecteDatesChange(this.selectedDates);
}
}
handleSelecteDatesChange(newDates) {
this.selectedDateState = newDates;
if (isEmpty(this.initialDate) && (newDates === null || newDates === void 0 ? void 0 : newDates.length) > 0) {
const [fromDate] = newDates;
this.calendarInitialDate = dayjs(fromDate).format(CALENDAR_MASK);
}
}
render() {
const dropdownPositionConfig = this.dropdownPositionOptions;
const inputConfig = this.getInputConfig();
const error = getAbsoluteTimePickerError(this.selectedDateState, this.mode, { minDate: this.calendarInputMinDate, maxDate: this.calendarInputMaxDate });
const isFilled = isAbsoluteTimePickerFilled(this.selectedDateState, this.mode);
const isDirty = hasRangeChanged(this.selectedDateState, this.selectedDates);
const hasError = error !== undefined;
const isApplyDisabled = !isFilled || hasError || !isDirty;
return (h(Host, { key: 'e8a6c8392f1fd83a285f5464f325d285666566e1' }, h("kv-dropdown", { key: 'f8184559f8ea3e54c3e68a62b75cc674524e96c9', isOpen: this.dropdownOpen, onOpenStateChange: this.onDropdownChange, inputConfig: inputConfig, options: dropdownPositionConfig, disabled: this.disabled }, h("div", { key: '7f9a37b66cdde9c499787fc92e81bba976b1e229', class: "absolute-time-content" }, h("kv-absolute-time-picker", { key: '5f0321217c06709ba47cc1269be3fd0fd73c70f7', mode: this.mode, headerTitle: this.headerTitle, selectedDates: this.getAbsoluteRange(), disabledDates: this.disabledDates, initialDate: this.calendarInitialDate, onSelectedDatesChange: this.handleAbsoluteDatesChange, calendarInputMinDate: this.getCalendarLimitDatesFormatted(this.calendarInputMinDate), calendarInputMaxDate: this.getCalendarLimitDatesFormatted(this.calendarInputMaxDate), error: error }), h("div", { key: '4665e0872f9b6cbd9067f3b45c2253ce10ecc710', class: "footer" }, h("div", { key: '46779a15bdf99ae88ce29a99ad6d45c417342bb5', class: "actions" }, h("kv-action-button-text", { key: '53601132a95621dd5b1deb6f0998aa724dc01621', type: EActionButtonType.Tertiary, size: EComponentSize.Small, text: "Cancel", onClickButton: this.onClickCancel }), h("kv-action-button-text", { key: '36dbacf08df298b9d522ad9d62cb63a4825e1da1', type: EActionButtonType.Primary, size: EComponentSize.Small, text: "Apply", disabled: isApplyDisabled, onClickButton: this.onClickApply })))))));
}
static get watchers() { return {
"selectedDates": ["handleSelecteDatesChange"]
}; }
};
KvAbsoluteTimePickerDropdown.style = absoluteTimePickerDropdownCss;
export { KvAbsoluteTimePickerDropdown as kv_absolute_time_picker_dropdown };