@kelvininc/ui-components
Version:
Kelvin UI Components
349 lines (344 loc) • 23.8 kB
JavaScript
'use strict';
var index = require('./index-DpuMIXDY.js');
var components = require('./components-D2lyDQ_a.js');
require('./lib-config-QLtHwxiM.js');
require('./action-button.types-BYOe6st0.js');
var absoluteTimePickerDropdown_types = require('./absolute-time-picker-dropdown.types-mPwO9zQk.js');
var icon_types = require('./icon.types-B8lvUrX_.js');
require('./summary-card.types-W26sTdH1.js');
require('./toaster.types-DlSCye8T.js');
require('./tree-item.types-C2yRoORC.js');
require('./tag-alarm.types-BeZw-7PT.js');
require('./wizard.types-DTbE-B6d.js');
var date_helper = require('./date.helper-DwNTBYV0.js');
var absoluteTimePicker_config = require('./absolute-time-picker.config-BF9QIy90.js');
var absoluteTimePicker_helper = require('./absolute-time-picker.helper-Ug7h3o45.js');
var calendar_config = require('./calendar.config-MPAoKWYY.js');
var isEmpty = require('./isEmpty-C_HQvGy-.js');
require('./_commonjsHelpers-BJu3ubxk.js');
require('./_Set-BIUoGFN6.js');
require('./_Map-DiT24PAz.js');
require('./isObject-COPdF2vE.js');
const absoluteTimePickerCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}.absolute-time-picker-container{display:flex;flex-direction:column;gap:var(--kv-spacing-3x, 12px);background-color:var(--kv-neutral-7, #2a2a2a);padding:var(--kv-spacing-4x, 16px);border-radius:4px;width:fit-content}.absolute-time-picker-container .navigate-back{display:flex;gap:var(--kv-spacing, 4px);align-items:center;cursor:pointer;width:fit-content}.absolute-time-picker-container .navigate-back kv-icon{--icon-color:var(--kv-neutral-4, #bebebe)}.absolute-time-picker-container .navigate-back .back-text{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;color:var(--kv-neutral-4, #bebebe);user-select:none}.absolute-time-picker-container .header .title{font-family:var(--kv-primary-font, \"proxima-nova\", sans-serif, \"Arial\");font-size:16px;font-weight:600;font-stretch:normal;font-style:normal;line-height:24px;letter-spacing:normal;text-transform:none;color:var(--kv-neutral-2, #e5e5e5)}.absolute-time-picker-container .absolute-range-input{display:flex;gap:var(--kv-spacing-6x, 24px)}.absolute-time-picker-container .absolute-range-input kv-date-time-input{width:196px}.absolute-time-picker-container .absolute-point-input{width:100%}.absolute-time-picker-container .calendars{display:flex;gap:var(--kv-spacing-6x, 24px)}";
const KvAbsoluteTimePicker = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.selectedDatesChange = index.createEvent(this, "selectedDatesChange", 7);
this.backButtonClicked = index.createEvent(this, "backButtonClicked", 7);
this.relativeTimeConfigReset = index.createEvent(this, "relativeTimeConfigReset", 7);
this.relativeTimeConfigChange = index.createEvent(this, "relativeTimeConfigChange", 7);
var _a;
/** @inheritdoc */
this.headerTitle = absoluteTimePicker_config.DEFAULT_HEADER_TITLE;
/** @inheritdoc */
this.displayBackButton = false;
/** @inheritdoc */
this.mode = absoluteTimePickerDropdown_types.EAbsoluteTimePickerMode.Range;
/** @inheritdoc */
this.selectedDates = [];
/** @inheritdoc */
this.disabledDates = [];
/** @inheritdoc */
this.calendarInputMinDate = absoluteTimePicker_config.CALENDAR_INPUT_MIN_DATE;
/** @inheritdoc */
this.calendarInputMaxDate = absoluteTimePicker_config.CALENDAR_INPUT_MAX_DATE;
/** Input values inserted by the user on the date and time input */
this.fromInputValue = '';
this.toInputValue = '';
this.singleInputValue = '';
/** Shared hovered date between calendars for range mode */
this.hoveredDate = '';
/** First calendar displayed month (Second calendar is displayedMonth + 1) */
this.displayedMonth = (_a = date_helper.fromDateInput(this.initialDate)) !== null && _a !== void 0 ? _a : date_helper.fromDateInput(new Date());
/** Used to force focus the from and to input */
this.fromInputFocused = true;
this.toInputFocused = false;
/**
* Used to define when the input dates came from the relative time picker where the input
* can be an absolute date or a text (ex: last 24 hours)
*/
this.inputMode = absoluteTimePickerDropdown_types.ERelativeTimeInputMode.Date;
/** Calendars max and minimum dates */
this.minDate = '';
this.maxDate = '';
this.setDateLimits = (min, max) => {
this.minDate = min;
this.maxDate = max;
};
this.setInputValues = (from, to) => {
this.fromInputValue = from;
this.toInputValue = to;
};
this.resetInputValues = () => {
this.fromInputValue = '';
this.toInputValue = '';
this.singleInputValue = '';
};
this.resetDateLimits = () => {
this.minDate = '';
this.maxDate = '';
};
this.emitSelectRangeDatesChangeEvent = (dateA, dateB) => {
const range = absoluteTimePicker_helper.buildSelectedDatesEventPayload(dateA, dateB);
this.selectedDatesChange.emit({
range
});
};
this.handleBackClick = (event) => {
this.backButtonClicked.emit(event);
};
this.onClickDate = ({ detail }) => {
var _a;
const date = detail.date;
const clickedDate = date_helper.fromISO(date);
const inputDate = date_helper.newDate(date);
const fromDate = absoluteTimePicker_helper.getMinimumDateFromDayClick(clickedDate, this.calendarInputMinDate);
const toDate = absoluteTimePicker_helper.getMaximumDateFromDayClick(clickedDate, this.calendarInputMaxDate);
if (this.mode === absoluteTimePickerDropdown_types.EAbsoluteTimePickerMode.Range) {
const [selectedStartDate, selectedEndDate] = (_a = this.selectedDates) !== null && _a !== void 0 ? _a : [];
if (!selectedStartDate) {
this.displayedMonth = clickedDate.startOf('day');
this.setInputValues(fromDate.format(absoluteTimePicker_config.DATETIME_INPUT_MASK), '');
this.setDateLimits(clickedDate.format(absoluteTimePicker_config.CALENDAR_MASK), '');
this.emitSelectRangeDatesChangeEvent(fromDate);
return;
}
if (date_helper.isDateSame(clickedDate, selectedStartDate)) {
if (!selectedEndDate) {
this.setInputValues(fromDate.format(absoluteTimePicker_config.DATETIME_INPUT_MASK), toDate.format(absoluteTimePicker_config.DATETIME_INPUT_MASK));
this.resetDateLimits();
this.emitSelectRangeDatesChangeEvent(fromDate, toDate);
return;
}
this.resetInputValues();
this.resetDateLimits();
this.emitSelectRangeDatesChangeEvent();
return;
}
if (selectedEndDate !== undefined) {
this.displayedMonth = inputDate;
this.setInputValues(fromDate.format(absoluteTimePicker_config.DATETIME_INPUT_MASK), '');
this.setDateLimits(inputDate.format(absoluteTimePicker_config.CALENDAR_MASK), '');
this.emitSelectRangeDatesChangeEvent(fromDate);
return;
}
if (date_helper.isDateBefore(clickedDate, selectedStartDate)) {
this.displayedMonth = clickedDate;
this.setInputValues(fromDate.format(absoluteTimePicker_config.DATETIME_INPUT_MASK), '');
this.setDateLimits(fromDate.format(absoluteTimePicker_config.CALENDAR_MASK), '');
this.emitSelectRangeDatesChangeEvent(fromDate);
return;
}
this.setInputValues(date_helper.newDate(selectedStartDate).format(absoluteTimePicker_config.DATETIME_INPUT_MASK), toDate.format(absoluteTimePicker_config.DATETIME_INPUT_MASK));
this.resetDateLimits();
this.emitSelectRangeDatesChangeEvent(date_helper.fromISO(selectedStartDate), toDate);
return;
}
else {
this.displayedMonth = clickedDate;
this.singleInputValue = fromDate.format(absoluteTimePicker_config.DATETIME_INPUT_MASK);
this.emitSelectRangeDatesChangeEvent(fromDate);
}
};
this.handleClickBackMonth = () => {
this.displayedMonth = this.displayedMonth.subtract(1, 'month');
if (!isEmpty.isEmpty(this.relativeTimeConfig)) {
this.relativeTimeConfigReset.emit();
}
};
this.handleClickForwardMonth = () => {
this.displayedMonth = this.displayedMonth.add(1, 'month');
if (!isEmpty.isEmpty(this.relativeTimeConfig)) {
this.relativeTimeConfigReset.emit();
}
};
this.handleHoveredDateChange = (event) => {
if (this.mode === absoluteTimePickerDropdown_types.EAbsoluteTimePickerMode.Range)
this.hoveredDate = event.detail;
};
this.handleInputReset = () => {
this.resetInputValues();
this.inputMode = absoluteTimePickerDropdown_types.ERelativeTimeInputMode.Date;
this.relativeTimeConfigReset.emit();
};
/** User date-time-input I/O event handlers */
this.handleOnFocusFromInput = () => {
this.toInputFocused = false;
this.fromInputFocused = true;
const parsedFromInputDate = date_helper.dayjs(this.fromInputValue, absoluteTimePicker_config.DATETIME_INPUT_MASK);
const parsedToInputDate = date_helper.dayjs(this.toInputValue, absoluteTimePicker_config.DATETIME_INPUT_MASK);
if (this.relativeTimeConfig) {
if (this.relativeTimeConfig.mode === absoluteTimePickerDropdown_types.ERelativeTimeInputMode.Text) {
this.handleInputReset();
}
else {
if (!isEmpty.isEmpty(this.fromInputValue)) {
this.displayedMonth = parsedFromInputDate;
}
this.emitSelectRangeDatesChangeEvent(date_helper.dayjs(this.fromInputValue, absoluteTimePicker_config.DATETIME_INPUT_MASK), date_helper.dayjs(this.toInputValue, absoluteTimePicker_config.DATETIME_INPUT_MASK));
}
}
else {
if (!isEmpty.isEmpty(this.fromInputValue) && (parsedToInputDate.diff(parsedFromInputDate, 'month') > 0 || this.displayedMonth.diff(parsedFromInputDate, 'month') > 0)) {
this.displayedMonth = parsedFromInputDate;
}
}
};
this.handleOnFocusToInput = () => {
this.toInputFocused = true;
this.fromInputFocused = false;
const parsedToInputDate = date_helper.dayjs(this.toInputValue, absoluteTimePicker_config.DATETIME_INPUT_MASK);
const parsedFromInputDate = date_helper.dayjs(this.fromInputValue, absoluteTimePicker_config.DATETIME_INPUT_MASK);
if (this.relativeTimeConfig) {
if (this.relativeTimeConfig.mode === absoluteTimePickerDropdown_types.ERelativeTimeInputMode.Text) {
this.handleInputReset();
}
else {
if (!isEmpty.isEmpty(this.toInputValue) && parsedFromInputDate.diff(parsedToInputDate, 'month') > 0) {
this.displayedMonth = parsedToInputDate.subtract(1, 'month');
}
this.emitSelectRangeDatesChangeEvent(date_helper.dayjs(this.fromInputValue, absoluteTimePicker_config.DATETIME_INPUT_MASK), date_helper.dayjs(this.toInputValue, absoluteTimePicker_config.DATETIME_INPUT_MASK));
}
}
else {
if (!isEmpty.isEmpty(this.toInputValue) && (parsedToInputDate.diff(parsedFromInputDate, 'month') > 0 || this.displayedMonth.diff(parsedToInputDate, 'month') > 0)) {
this.displayedMonth = parsedToInputDate.subtract(1, 'month');
}
}
};
this.handleDateChange = (event, inputSource) => {
const date = event.detail;
const parsedDate = date_helper.dayjs(date, absoluteTimePicker_config.DATE_INPUT_MASK);
const parsedDateTime = date_helper.dayjs(date, absoluteTimePicker_config.DATETIME_INPUT_MASK);
if (inputSource === absoluteTimePickerDropdown_types.EInputSource.Single) {
if (parsedDate.isValid() && parsedDateTime.isValid()) {
this.singleInputValue = parsedDateTime.format(absoluteTimePicker_config.DATETIME_INPUT_MASK);
this.displayedMonth = parsedDate;
this.emitSelectRangeDatesChangeEvent(parsedDateTime);
}
}
else {
if (parsedDateTime.isValid()) {
if (inputSource === absoluteTimePickerDropdown_types.EInputSource.From) {
this.handleFromInputDateChange(parsedDate, parsedDateTime);
}
else {
this.handleToInputDateChange(parsedDate, parsedDateTime);
}
}
else {
if (isEmpty.isEmpty(this.fromInputValue)) {
this.minDate = '';
}
if (isEmpty.isEmpty(this.toInputValue)) {
this.maxDate = '';
}
}
}
};
this.handleFromInputDateChange = (parsedDate, parsedDateTime) => {
this.fromInputValue = parsedDateTime.format(absoluteTimePicker_config.DATETIME_INPUT_MASK);
this.displayedMonth = parsedDate;
if (!isEmpty.isEmpty(this.toInputValue)) {
this.emitSelectRangeDatesChangeEvent(parsedDateTime, date_helper.dayjs(this.toInputValue, absoluteTimePicker_config.DATETIME_INPUT_MASK));
this.resetDateLimits();
}
else {
this.emitSelectRangeDatesChangeEvent(parsedDateTime);
this.toInputFocused = true;
this.minDate = parsedDate.format(absoluteTimePicker_config.CALENDAR_MASK);
}
};
this.handleToInputDateChange = (parsedDate, parsedDateTime) => {
this.toInputValue = parsedDateTime.format(absoluteTimePicker_config.DATETIME_INPUT_MASK);
this.displayedMonth = parsedDate.subtract(1, 'month');
if (!isEmpty.isEmpty(this.fromInputValue)) {
this.emitSelectRangeDatesChangeEvent(date_helper.dayjs(this.fromInputValue, absoluteTimePicker_config.DATETIME_INPUT_MASK), parsedDateTime);
this.resetDateLimits();
}
else {
this.maxDate = parsedDate.format(absoluteTimePicker_config.CALENDAR_MASK);
this.emitSelectRangeDatesChangeEvent(parsedDateTime);
this.fromInputFocused = true;
}
};
this.handleEndDateLostFocus = (event) => {
const date = event.detail;
const parsedDate = date_helper.dayjs(date, absoluteTimePicker_config.DATE_INPUT_MASK);
const parsedDateTime = date_helper.dayjs(date, absoluteTimePicker_config.DATETIME_INPUT_MASK);
if (parsedDate.isValid() && absoluteTimePicker_helper.isEndDateAtStartOfDay(parsedDateTime)) {
const parsedDateFormatted = parsedDate.endOf('day').format(absoluteTimePicker_config.DATETIME_INPUT_MASK);
this.toInputValue = parsedDateFormatted;
this.displayedMonth = parsedDate.subtract(1, 'month');
if (!isEmpty.isEmpty(this.fromInputValue)) {
this.emitSelectRangeDatesChangeEvent(date_helper.dayjs(this.fromInputValue, absoluteTimePicker_config.DATETIME_INPUT_MASK), parsedDate.endOf('day'));
}
else {
this.emitSelectRangeDatesChangeEvent(parsedDate.endOf('day'));
this.fromInputFocused = true;
}
}
};
/** Components config methods */
this.useInputMask = () => {
return this.inputMode === absoluteTimePickerDropdown_types.ERelativeTimeInputMode.Date;
};
this.getCalendarStringLimits = () => ({
minDate: !isEmpty.isEmpty(this.minDate) ? this.minDate : date_helper.dayjs(this.calendarInputMinDate, absoluteTimePicker_config.DATETIME_INPUT_MASK).format(calendar_config.DATE_FORMAT),
maxDate: !isEmpty.isEmpty(this.maxDate) ? this.maxDate : date_helper.dayjs(this.calendarInputMaxDate, absoluteTimePicker_config.DATETIME_INPUT_MASK).format(calendar_config.DATE_FORMAT)
});
this.getCalendarTimestampLimits = () => ({
minDate: !isEmpty.isEmpty(this.minDate) ? undefined : date_helper.dayjs(this.calendarInputMinDate, absoluteTimePicker_config.DATETIME_INPUT_MASK).valueOf(),
maxDate: !isEmpty.isEmpty(this.maxDate) ? undefined : date_helper.dayjs(this.calendarInputMaxDate, absoluteTimePicker_config.DATETIME_INPUT_MASK).valueOf()
});
}
handleSelectedRangeDatesChange(value = []) {
if (value.length === 0) {
this.resetInputValues();
this.resetDateLimits();
return;
}
if (this.mode === absoluteTimePickerDropdown_types.EAbsoluteTimePickerMode.Range) {
if (isEmpty.isEmpty(this.relativeTimeConfig)) {
const [from, to] = value;
const parsedFromDate = date_helper.dayjs(from, absoluteTimePicker_config.CALENDAR_DATE_TIME_MASK).format(absoluteTimePicker_config.DATETIME_INPUT_MASK);
const parsedToDate = date_helper.dayjs(to, absoluteTimePicker_config.CALENDAR_DATE_TIME_MASK).format(absoluteTimePicker_config.DATETIME_INPUT_MASK);
this.setInputValues(parsedFromDate, parsedToDate);
}
}
else {
const [date] = value;
const parsedDate = date_helper.dayjs(date, absoluteTimePicker_config.CALENDAR_DATE_TIME_MASK).format(absoluteTimePicker_config.DATETIME_INPUT_MASK);
this.singleInputValue = parsedDate;
}
}
handleRelativeTimeConfigInput(newValue) {
var _a;
if (isEmpty.isEmpty(newValue)) {
this.inputMode = absoluteTimePickerDropdown_types.ERelativeTimeInputMode.Date;
if (!this.selectedDates || this.selectedDates.length === 0) {
this.setInputValues('', '');
this.displayedMonth = date_helper.fromDateInput(new Date());
}
return;
}
this.inputMode = newValue.mode;
this.setInputValues(newValue.from, newValue.to);
const [from] = (_a = this.selectedDates) !== null && _a !== void 0 ? _a : [];
const date = date_helper.newDate(from);
if (date.isValid()) {
this.displayedMonth = date;
}
}
render() {
const fromCalendarInitialDate = absoluteTimePicker_helper.getFirstCalendarInitialDate(this.displayedMonth);
const toCalendarInitialDate = absoluteTimePicker_helper.getSecondCalendarInitialDate(this.displayedMonth);
return (index.h(index.Host, { key: '25e66a7babdc4feef5fd99969d1f135698752a44' }, index.h("div", { key: '6fdc8c49640ce9efa33ac740da64487648762097', class: "absolute-time-picker-container" }, this.displayBackButton && (index.h("div", { key: 'a47537fad2669332373350101c208c4554152f36', class: "navigate-back", onClick: this.handleBackClick }, index.h("kv-icon", { key: 'ca2a47f5cbdccdf6c2f782b35c62e917ec3a9c1d', name: icon_types.EIconName.SlimRight, customClass: "rotate-180" }), index.h("div", { key: 'b9d6b9d018a4b16175d7fd97a323e2deae4fa2b9', class: "back-text" }, "Back"))), index.h("div", { key: '60f81ab5cd34c78da812e7414e12db89b6a7a73d', class: "header" }, index.h("div", { key: '7fec81a57a70cf9d21b714af99640b3c2a0103a5', class: "title" }, this.headerTitle)), this.mode === absoluteTimePickerDropdown_types.EAbsoluteTimePickerMode.Range ? (index.h("div", { class: "absolute-range-input" }, index.h("kv-date-time-input", Object.assign({ inputName: "from-input", useInputMask: this.useInputMask(), label: "From", value: this.fromInputValue, size: components.EComponentSize.Small, placeholder: absoluteTimePicker_config.DATE_INPUT_PLACEHOLDER, highlighted: isEmpty.isEmpty(this.fromInputValue) && !this.toInputFocused, onTextChange: ev => this.handleDateChange(ev, absoluteTimePickerDropdown_types.EInputSource.From), onInputFocus: this.handleOnFocusFromInput }, absoluteTimePicker_helper.getFromDateInputState(this.error, this.getCalendarTimestampLimits()))), index.h("kv-date-time-input", Object.assign({ inputName: "to-input", useInputMask: this.useInputMask(), label: "To", value: this.toInputValue, size: components.EComponentSize.Small, placeholder: absoluteTimePicker_config.DATE_INPUT_PLACEHOLDER, highlighted: isEmpty.isEmpty(this.toInputValue) && !isEmpty.isEmpty(this.fromInputValue), onTextChange: ev => this.handleDateChange(ev, absoluteTimePickerDropdown_types.EInputSource.To), onDateTimeBlur: this.handleEndDateLostFocus, onInputFocus: this.handleOnFocusToInput }, absoluteTimePicker_helper.getToDateTimeInputState(this.error, this.getCalendarTimestampLimits()))))) : (index.h("div", { class: "absolute-point-input" }, index.h("kv-date-time-input", Object.assign({ id: "single-date-input", useInputMask: true, label: "Day & Hour", value: this.singleInputValue, size: components.EComponentSize.Small, placeholder: absoluteTimePicker_config.DATE_INPUT_PLACEHOLDER, onTextChange: ev => this.handleDateChange(ev, absoluteTimePickerDropdown_types.EInputSource.Single) }, absoluteTimePicker_helper.getSingleDateTimeInputState(this.error, this.getCalendarTimestampLimits()))))), index.h("div", { key: '8ce1318dbbe6ca8d6671940b6796d937f8012321', class: "calendars" }, index.h("kv-calendar", Object.assign({ key: 'c6a6567d84918b8412178a1d2e8af1915a7813c6', mode: this.mode, displayNextMonthArrow: false, displayPreviousMonthArrow: true, selectedDates: this.selectedDates, hoveredDate: this.hoveredDate, initialDate: fromCalendarInitialDate, disabledDates: this.disabledDates, onClickDate: this.onClickDate, onChangeMonth: this.handleClickBackMonth, onHoveredDateChange: this.handleHoveredDateChange }, this.getCalendarStringLimits())), index.h("kv-calendar", Object.assign({ key: '96576139143224ac533005be2fd94c369d7c7192', mode: this.mode, displayNextMonthArrow: true, displayPreviousMonthArrow: false, selectedDates: this.selectedDates, hoveredDate: this.hoveredDate, initialDate: toCalendarInitialDate, disabledDates: this.disabledDates, onClickDate: this.onClickDate, onChangeMonth: this.handleClickForwardMonth, onHoveredDateChange: this.handleHoveredDateChange }, this.getCalendarStringLimits()))))));
}
static get watchers() { return {
"selectedDates": ["handleSelectedRangeDatesChange"],
"relativeTimeConfig": ["handleRelativeTimeConfigInput"]
}; }
};
KvAbsoluteTimePicker.style = absoluteTimePickerCss;
exports.kv_absolute_time_picker = KvAbsoluteTimePicker;