@kelvininc/ui-components
Version:
Kelvin UI Components
207 lines (201 loc) • 11.7 kB
JavaScript
'use strict';
var index = require('./index-rNNWWpit.js');
var wizard_types = require('./wizard.types-C9Yhv1tt.js');
var date_helper = require('./date.helper-C8Apy5Qj.js');
var absoluteTimePicker_config = require('./absolute-time-picker.config-BF9QIy90.js');
var timePicker_helper = require('./time-picker.helper-B1FalC13.js');
var isEmpty = require('./isEmpty-CqcsgK-A.js');
var isNil = require('./isNil-B-fGcnNC.js');
var isNumber = require('./isNumber-nnoh6LNV.js');
var merge = require('./merge-DKeNMXHS.js');
require('./_commonjsHelpers-CFO10eej.js');
require('./floating-ui.dom-CxA-aH57.js');
require('./config-dyyw7PBD.js');
require('./relative-time.helper-BP961qCt.js');
require('./isObject-COPdF2vE.js');
require('./_baseMerge-Bq8HwF_X.js');
require('./identity-Dz5mxHaJ.js');
const getSelectedTimestampDates = (range, mode, timezoneName) => {
if ((range === null || range === void 0 ? void 0 : range.length) === 0)
return [];
if (mode === wizard_types.EAbsoluteTimePickerMode.Single) {
const [date] = range;
return [timePicker_helper.createTimestampInTimezoneFromFormattedDate(date, timezoneName, absoluteTimePicker_config.CALENDAR_DATE_TIME_MASK)];
}
const [from, to] = range;
const dateFrom = timePicker_helper.createTimestampInTimezoneFromFormattedDate(from, timezoneName, absoluteTimePicker_config.CALENDAR_DATE_TIME_MASK);
const dateTo = !isEmpty.isEmpty(to) ? timePicker_helper.createTimestampInTimezoneFromFormattedDate(to, timezoneName, absoluteTimePicker_config.CALENDAR_DATE_TIME_MASK) : undefined;
return [dateFrom, dateTo];
};
const getFormattedSelectedDates = (range, mode, timezoneName) => {
if (isEmpty.isEmpty(range))
return [];
if (mode === wizard_types.EAbsoluteTimePickerMode.Single) {
const [date] = range;
return [date_helper.dayjs(date).tz(timezoneName).format(absoluteTimePicker_config.CALENDAR_DATE_TIME_MASK)];
}
const [from, to] = range;
const dateFrom = date_helper.dayjs(from).tz(timezoneName).format(absoluteTimePicker_config.CALENDAR_DATE_TIME_MASK);
const dateTo = !isNil.isNil(to) ? date_helper.dayjs(to).tz(timezoneName).format(absoluteTimePicker_config.CALENDAR_DATE_TIME_MASK) : undefined;
return [dateFrom, dateTo];
};
const getAbsoluteTimePickerError = (range, mode, limits) => {
if (!isAbsoluteTimePickerFilled(range, mode)) {
return;
}
if (mode === wizard_types.EAbsoluteTimePickerMode.Single) {
const [date] = range;
if (limits.minDate && date_helper.dayjs(date).isBefore(limits.minDate)) {
return wizard_types.EAbsoluteTimeError.StartDateBeforeMinimumDate;
}
if (limits.maxDate && date_helper.dayjs(date).isAfter(limits.maxDate)) {
return wizard_types.EAbsoluteTimeError.EndDateAfterMaximumDate;
}
return;
}
const [startDate, endDate] = range;
if (!date_helper.dayjs(endDate).isAfter(startDate)) {
return wizard_types.EAbsoluteTimeError.EndDateBeforeStartDate;
}
if (limits.minDate && date_helper.dayjs(startDate).isBefore(limits.minDate)) {
return wizard_types.EAbsoluteTimeError.StartDateBeforeMinimumDate;
}
if (limits.maxDate && date_helper.dayjs(endDate).isAfter(limits.maxDate)) {
return wizard_types.EAbsoluteTimeError.EndDateAfterMaximumDate;
}
return;
};
const isAbsoluteTimePickerFilled = (range, mode) => {
if (isEmpty.isEmpty(range))
return false;
if (mode === wizard_types.EAbsoluteTimePickerMode.Single) {
const [date] = range;
return isNumber.isNumber(date);
}
const [from, to] = range;
return isNumber.isNumber(from) && isNumber.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) {
index.registerInstance(this, hostRef);
this.selectedDatesChange = index.createEvent(this, "selectedDatesChange", 7);
this.cancelClicked = index.createEvent(this, "cancelClicked", 7);
this.dropdownStateChange = index.createEvent(this, "dropdownStateChange", 7);
/** @inheritdoc */
this.inputConfig = {};
/** @inheritdoc */
this.dropdownPositionOptions = timePicker_helper.DEFAULT_TIME_RANGE_DROPDOWN_POSITION_OPTIONS;
/** @inheritdoc */
this.selectedDates = [];
/** @inheritdoc */
this.timezones = date_helper.buildTimezoneByOffset(date_helper.getTimezonesNames());
/** @inheritdoc */
this.disabledDates = [];
/** @inheritdoc */
this.mode = wizard_types.EAbsoluteTimePickerMode.Single;
/** @inheritdoc */
this.tooltipPosition = wizard_types.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.isEmpty(this.timezone))
return this.timezone;
const defaultTimezone = date_helper.getDefaultTimezone();
return {
name: defaultTimezone,
offset: date_helper.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.isNumber(date))
return;
const selectedTimezone = this.getSelectedTimezone();
return date_helper.dayjs(date).tz(selectedTimezone.name).format(absoluteTimePicker_config.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 timePicker_helper.buildTooltipText(this.selectedDates, this.getSelectedTimezone(), this.timezones);
}
};
this.getDropdownInputValue = () => {
return timePicker_helper.buildCustomIntervalTimeRange(this.selectedDates, this.getSelectedTimezone().name);
};
this.getInputConfig = () => {
const inputValue = this.getDropdownInputValue();
return merge.merge({}, timePicker_helper.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.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.isEmpty(this.initialDate) && (newDates === null || newDates === void 0 ? void 0 : newDates.length) > 0) {
const [fromDate] = newDates;
this.calendarInitialDate = date_helper.dayjs(fromDate).format(absoluteTimePicker_config.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 = timePicker_helper.hasRangeChanged(this.selectedDateState, this.selectedDates);
const hasError = error !== undefined;
const isApplyDisabled = !isFilled || hasError || !isDirty;
return (index.h(index.Host, { key: 'e8a6c8392f1fd83a285f5464f325d285666566e1' }, index.h("kv-dropdown", { key: 'f8184559f8ea3e54c3e68a62b75cc674524e96c9', isOpen: this.dropdownOpen, onOpenStateChange: this.onDropdownChange, inputConfig: inputConfig, options: dropdownPositionConfig, disabled: this.disabled }, index.h("div", { key: '7f9a37b66cdde9c499787fc92e81bba976b1e229', class: "absolute-time-content" }, index.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 }), index.h("div", { key: '4665e0872f9b6cbd9067f3b45c2253ce10ecc710', class: "footer" }, index.h("div", { key: '46779a15bdf99ae88ce29a99ad6d45c417342bb5', class: "actions" }, index.h("kv-action-button-text", { key: '53601132a95621dd5b1deb6f0998aa724dc01621', type: wizard_types.EActionButtonType.Tertiary, size: wizard_types.EComponentSize.Small, text: "Cancel", onClickButton: this.onClickCancel }), index.h("kv-action-button-text", { key: '36dbacf08df298b9d522ad9d62cb63a4825e1da1', type: wizard_types.EActionButtonType.Primary, size: wizard_types.EComponentSize.Small, text: "Apply", disabled: isApplyDisabled, onClickButton: this.onClickApply })))))));
}
static get watchers() { return {
"selectedDates": ["handleSelecteDatesChange"]
}; }
};
KvAbsoluteTimePickerDropdown.style = absoluteTimePickerDropdownCss;
exports.kv_absolute_time_picker_dropdown = KvAbsoluteTimePickerDropdown;