@kelvininc/ui-components
Version:
Kelvin UI Components
348 lines (341 loc) • 20.4 kB
JavaScript
import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-D6GMjtmE.js';
import { a as EComponentSize } from './p-BRgmvbuh.js';
import { b as EIconName, d as EValidationState, o as EAbsoluteTimePickerMode, q as EInputSource } from './p-DBphUUgi.js';
import './p-BcMhjKoS.js';
import './p-BQDwJ0uF.js';
import { d as defineCustomElement$7, E as EDateTimeInputTypeStyle } from './p-B3cB-2yy.js';
import { a as dayjs, f as getDefaultTimezoneSettings, h as fromISO } from './p-Ba4zaTTd.js';
import { g as getFirstCalendarInitialDate, b as getSecondCalendarInitialDate } from './p-B-qotxf9.js';
import { i as isEmpty } from './p-BZNGlO8m.js';
import { i as isNumber } from './p-C9bG1i86.js';
import { d as defineCustomElement$9 } from './p-CMo0NrV5.js';
import { d as defineCustomElement$8 } from './p-BjCPFCkN.js';
import { d as defineCustomElement$6 } from './p-z6Xl-2s2.js';
import { d as defineCustomElement$5 } from './p-BYJ5hjZN.js';
import { d as defineCustomElement$4 } from './p-Bu3_3dFw.js';
import { d as defineCustomElement$3 } from './p-B41PGLQm.js';
import { d as defineCustomElement$2 } from './p-BIWUEm1f.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}}.time-range-input-container{display:flex;border-radius:4px;width:100%;align-items:flex-end}.time-range-input-container kv-date-time-input{width:50%}.single-input-container{border-radius:4px}.calendar-container{display:flex;gap:var(--kv-spacing-5x, 20px);border-radius:4px;border:1px solid var(--kv-neutral-6, #3f3f3f);background:var(--kv-neutral-7, #2a2a2a);padding:var(--kv-spacing-5x, 20px)}";
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: 'd022b0082105162fd2cf7e9482c9d5a5f405b8ea' }, h("kv-dropdown-base", { key: '3cbbdadc22ecfe7c25dc0725b2f904f3da89c458', isOpen: this.isDropdownOpen, onClickOutside: this.handleCloseDropdown }, h("slot", { key: '9364eeeea27305f426fc619b8d5c49f7d1e104b6', 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: '8bd27d7b4efa9ff75ad5764685f9f5e89f6de682', slot: "list" }, h("div", { key: 'ac42692d4a023c4a62aecac88359b7b8aaa3fadb', class: "calendar-container" }, h("kv-calendar", { key: '7d73f1c25498556a361140bae8d7f5f7d8243788', 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: 'fa9ab39d1c542dfede4741f9fcc2d3a5c6fce983', 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; }
}, [4, "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 };