@kelvininc/ui-components
Version:
Kelvin UI Components
336 lines (330 loc) • 16.4 kB
JavaScript
import { i as EAbsoluteTimePickerMode, l as EAbsoluteTimeError, H as proxyCustomElement, I as H, J as createEvent, f as ETooltipPosition, K as h, e as EComponentSize, m as EActionButtonType, L as Host } from './p-BP5CxQcH.js';
import { H as dayjs, b as buildTimezoneByOffset, u as getTimezonesNames, n as getDefaultTimezone, t as getTimezoneOffset } from './p-BS8xGxWJ.js';
import { C as CALENDAR_DATE_TIME_MASK, D as DATETIME_INPUT_MASK, a as CALENDAR_MASK } from './p-BWl-z3SO.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 './p-58Jj-JHl.js';
import { i as isEmpty } from './p-BZNGlO8m.js';
import { i as isNil } from './p-CRcRM80a.js';
import { i as isNumber } from './p-C9bG1i86.js';
import { d as defineCustomElement$i } from './p-Bcu5R5me.js';
import { d as defineCustomElement$h } from './p-0XA6IHyr.js';
import { d as defineCustomElement$g } from './p-DviRLduP.js';
import { d as defineCustomElement$f } from './p-CJTppmYq.js';
import { d as defineCustomElement$e } from './p-DvAWw3VB.js';
import { d as defineCustomElement$d } from './p-DRIdNOSH.js';
import { d as defineCustomElement$c } from './p-Bo7D4REV.js';
import { d as defineCustomElement$b } from './p-CcHqOBLS.js';
import { d as defineCustomElement$a } from './p-DzkvH5wF.js';
import { d as defineCustomElement$9 } from './p-BfW2hU_X.js';
import { d as defineCustomElement$8 } from './p-BOKt4LQl.js';
import { d as defineCustomElement$7 } from './p-E4GiU6Fx.js';
import { d as defineCustomElement$6 } from './p-DQ7v6WT-.js';
import { d as defineCustomElement$5 } from './p-CgqRIP0M.js';
import { d as defineCustomElement$4 } from './p-sG4FxOig.js';
import { d as defineCustomElement$3 } from './p-DdZmrasC.js';
import { d as defineCustomElement$2 } from './p-DFBbXuLI.js';
import { m as merge } from './p-597Q-QFb.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$1 = /*@__PURE__*/ proxyCustomElement(class KvAbsoluteTimePickerDropdown extends H {
constructor() {
super();
this.__registerHost();
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"]
}; }
static get style() { return absoluteTimePickerDropdownCss; }
}, [256, "kv-absolute-time-picker-dropdown", {
"inputConfig": [16, "input-config"],
"dropdownPositionOptions": [16, "dropdown-position-options"],
"selectedDates": [16, "selected-dates"],
"timezone": [16],
"timezones": [16],
"disabledDates": [16, "disabled-dates"],
"initialDate": [1, "initial-date"],
"calendarInputMinDate": [2, "calendar-input-min-date"],
"calendarInputMaxDate": [2, "calendar-input-max-date"],
"mode": [1],
"tooltipPosition": [1, "tooltip-position"],
"headerTitle": [1, "header-title"],
"disabled": [516],
"dropdownOpen": [1028, "dropdown-open"],
"calendarInitialDate": [32],
"selectedDateState": [32]
}, undefined, {
"selectedDates": ["handleSelecteDatesChange"]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["kv-absolute-time-picker-dropdown", "kv-absolute-time-picker", "kv-action-button", "kv-action-button-text", "kv-badge", "kv-calendar", "kv-calendar-day", "kv-date-time-input", "kv-dirty-dot", "kv-dropdown", "kv-dropdown-base", "kv-form-help-text", "kv-form-label", "kv-icon", "kv-portal", "kv-text-field", "kv-tooltip", "kv-tooltip-text"];
components.forEach(tagName => { switch (tagName) {
case "kv-absolute-time-picker-dropdown":
if (!customElements.get(tagName)) {
customElements.define(tagName, KvAbsoluteTimePickerDropdown$1);
}
break;
case "kv-absolute-time-picker":
if (!customElements.get(tagName)) {
defineCustomElement$i();
}
break;
case "kv-action-button":
if (!customElements.get(tagName)) {
defineCustomElement$h();
}
break;
case "kv-action-button-text":
if (!customElements.get(tagName)) {
defineCustomElement$g();
}
break;
case "kv-badge":
if (!customElements.get(tagName)) {
defineCustomElement$f();
}
break;
case "kv-calendar":
if (!customElements.get(tagName)) {
defineCustomElement$e();
}
break;
case "kv-calendar-day":
if (!customElements.get(tagName)) {
defineCustomElement$d();
}
break;
case "kv-date-time-input":
if (!customElements.get(tagName)) {
defineCustomElement$c();
}
break;
case "kv-dirty-dot":
if (!customElements.get(tagName)) {
defineCustomElement$b();
}
break;
case "kv-dropdown":
if (!customElements.get(tagName)) {
defineCustomElement$a();
}
break;
case "kv-dropdown-base":
if (!customElements.get(tagName)) {
defineCustomElement$9();
}
break;
case "kv-form-help-text":
if (!customElements.get(tagName)) {
defineCustomElement$8();
}
break;
case "kv-form-label":
if (!customElements.get(tagName)) {
defineCustomElement$7();
}
break;
case "kv-icon":
if (!customElements.get(tagName)) {
defineCustomElement$6();
}
break;
case "kv-portal":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "kv-text-field":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "kv-tooltip":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "kv-tooltip-text":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
defineCustomElement$1();
const KvAbsoluteTimePickerDropdown = KvAbsoluteTimePickerDropdown$1;
const defineCustomElement = defineCustomElement$1;
export { KvAbsoluteTimePickerDropdown, defineCustomElement };