@kelvininc/ui-components
Version:
Kelvin UI Components
344 lines (337 loc) • 20.4 kB
JavaScript
import { t as EIconName, e as EComponentSize, B as EValidationState, H as proxyCustomElement, I as H, J as createEvent, i as EAbsoluteTimePickerMode, k as EInputSource, K as h, q as EDateTimeInputTypeStyle, L as Host } from './p-BP5CxQcH.js';
import { H as dayjs, o as getDefaultTimezoneSettings, j as fromISO } from './p-BS8xGxWJ.js';
import { g as getFirstCalendarInitialDate, b as getSecondCalendarInitialDate } from './p-BWl-z3SO.js';
import { i as isEmpty } from './p-BZNGlO8m.js';
import { i as isNumber } from './p-C9bG1i86.js';
import { d as defineCustomElement$9 } from './p-DvAWw3VB.js';
import { d as defineCustomElement$8 } from './p-DRIdNOSH.js';
import { d as defineCustomElement$7 } from './p-Bo7D4REV.js';
import { d as defineCustomElement$6 } from './p-BfW2hU_X.js';
import { d as defineCustomElement$5 } from './p-BOKt4LQl.js';
import { d as defineCustomElement$4 } from './p-E4GiU6Fx.js';
import { d as defineCustomElement$3 } from './p-DQ7v6WT-.js';
import { d as defineCustomElement$2 } from './p-CgqRIP0M.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$1 = /*@__PURE__*/ proxyCustomElement(class KvAbsoluteTimePickerDropdownInput extends H {
constructor() {
super();
this.__registerHost();
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"]
}; }
static get style() { return absoluteTimePickerDropdownInputCss; }
}, [260, "kv-absolute-time-picker-dropdown-input", {
"selectedTime": [16, "selected-time"],
"timezone": [16],
"mode": [1],
"isDropdownOpen": [1028, "is-dropdown-open"],
"disabled": [4],
"initialDate": [2, "initial-date"],
"minimumFromInputDate": [2, "minimum-from-input-date"],
"minimumToInputDate": [2, "minimum-to-input-date"],
"minimumSingleInputDate": [2, "minimum-single-input-date"],
"rangeInputValues": [32],
"singleTimeInputValue": [32],
"displayedMonth": [32],
"focusedInput": [32],
"hoveredDate": [32]
}, undefined, {
"selectedTime": ["handleSelectedTimeChange"]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["kv-absolute-time-picker-dropdown-input", "kv-calendar", "kv-calendar-day", "kv-date-time-input", "kv-dropdown-base", "kv-form-help-text", "kv-form-label", "kv-icon", "kv-portal"];
components.forEach(tagName => { switch (tagName) {
case "kv-absolute-time-picker-dropdown-input":
if (!customElements.get(tagName)) {
customElements.define(tagName, KvAbsoluteTimePickerDropdownInput$1);
}
break;
case "kv-calendar":
if (!customElements.get(tagName)) {
defineCustomElement$9();
}
break;
case "kv-calendar-day":
if (!customElements.get(tagName)) {
defineCustomElement$8();
}
break;
case "kv-date-time-input":
if (!customElements.get(tagName)) {
defineCustomElement$7();
}
break;
case "kv-dropdown-base":
if (!customElements.get(tagName)) {
defineCustomElement$6();
}
break;
case "kv-form-help-text":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "kv-form-label":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "kv-icon":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "kv-portal":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
defineCustomElement$1();
const KvAbsoluteTimePickerDropdownInput = KvAbsoluteTimePickerDropdownInput$1;
const defineCustomElement = defineCustomElement$1;
export { KvAbsoluteTimePickerDropdownInput, defineCustomElement };