@kelvininc/ui-components
Version:
Kelvin UI Components
272 lines (266 loc) • 16.3 kB
JavaScript
import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-D6GMjtmE.js';
import { q as fromDateFields, r as getFirstWeekdayIndexOfMonth, s as getNumberOfDaysInMonth, t as getDateMonth, u as getDateYear, v as isDateInArray, p as isDateBefore, a as dayjs, w as isDateAfter, x as formatDate, y as isDateInRange, m as newDate, o as isDateSame, z as areDatesValid, A as isDateValid, B as getMonthAndYearTitle, C as getWeekdaysNames } from './p-Ba4zaTTd.js';
import { g as getArrayOfIndexes } from './p-C0GqgbWr.js';
import { o as EAbsoluteTimePickerMode, b as EIconName } from './p-DBphUUgi.js';
import './p-BRgmvbuh.js';
import './p-BcMhjKoS.js';
import './p-BQDwJ0uF.js';
import { d as defineCustomElement$2 } from './p-BjCPFCkN.js';
import { d as defineCustomElement$1 } from './p-B41PGLQm.js';
import { i as isEmpty } from './p-BZNGlO8m.js';
const DATE_FORMAT = 'YYYY-MM-DD';
const CALENDAR_FILLED_ROWS_NUMBER_OF_DAYS = 42;
const CALENDAR_DEFAULT_MIN_DATE = '2018-01-01';
const getCalendarStartDisabledDays = (month, year) => {
const currentMonthFirstWeekday = getFirstWeekdayIndexOfMonth(month, year);
const lastMonthNumberOfDays = getNumberOfDaysInMonth(month - 1, year);
const lastMonthDays = [];
let index = currentMonthFirstWeekday;
while (index > 0) {
lastMonthDays.push(lastMonthNumberOfDays - index + 1);
index = index - 1;
}
return lastMonthDays;
};
const getCalendarEndDisabledDays = (filledDays) => {
return getArrayOfIndexes(CALENDAR_FILLED_ROWS_NUMBER_OF_DAYS - filledDays).map(item => item + 1);
};
const getSelectedRange = (selectedDates = []) => {
if (selectedDates.length > 0) {
const [startDate] = selectedDates;
if (selectedDates.length === 1) {
return [startDate];
}
const [endDate] = selectedDates.slice(-1);
return [startDate, endDate];
}
return [];
};
const getHooveredDate = (hoveredDay, month, year, hoveredDate) => {
if (hoveredDay !== undefined) {
return fromDateFields(hoveredDay, month, year).format(DATE_FORMAT);
}
if (hoveredDate !== undefined) {
return hoveredDate;
}
return undefined;
};
const calendarCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--calendar-width:196px;--calendar-horizontal-padding:0px;--calendar-vertical-padding:0px;--calendar-background-color:var(--kv-neutral-7, #2a2a2a);--calendar-month-title-text-color:var(--kv-neutral-2, #e5e5e5);--calendar-month-weekday-text-color:var(--kv-neutral-4, #bebebe)}.calendar{padding:var(--calendar-vertical-padding) var(--calendar-horizontal-padding);background-color:var(--calendar-background-color);border-radius:4px;width:var(--calendar-width);box-sizing:border-box}.calendar__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--kv-spacing-2x, 8px)}.calendar__header .month{font-family:var(--kv-primary-font, \"proxima-nova\", sans-serif, \"Arial\");font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:21px;letter-spacing:normal;text-transform:none;color:var(--calendar-month-title-text-color);user-select:none}.calendar__header .navigator{min-width:16px;cursor:pointer}.calendar__header .navigator--disabled{cursor:not-allowed}.calendar__header .navigator--disabled kv-icon{--icon-color:var(--kv-neutral-5, #707070)}.calendar__body .calendar-month{display:grid;grid-template-columns:repeat(auto-fit, calc((var(--calendar-width) - var(--calendar-horizontal-padding) * 2) / 7 * 7))}.calendar__body .calendar-month__weekdays{display:flex;align-items:center;justify-content:space-between;user-select:none;margin-bottom:var(--kv-spacing, 4px)}.calendar__body .calendar-month__weekdays .weekday{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;width:calc((var(--calendar-width) - var(--calendar-horizontal-padding) * 2) / 7);color:var(--calendar-month-weekday-text-color);text-align:center}.calendar__body .calendar-month__days{display:grid;grid-template-columns:repeat(auto-fit, calc((var(--calendar-width) - var(--calendar-horizontal-padding) * 2) / 7))}";
const KvCalendar = /*@__PURE__*/ proxyCustomElement(class KvCalendar extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.changeMonth = createEvent(this, "changeMonth", 7);
this.changeYear = createEvent(this, "changeYear", 7);
this.clickDate = createEvent(this, "clickDate", 7);
this.hoveredDateChange = createEvent(this, "hoveredDateChange", 7);
var _a, _b;
/** @inheritdoc */
this.selectedDates = [];
/** @inheritdoc */
this.disableHoveringStyling = false;
/** @inheritdoc */
this.disabledDates = [];
/** @inheritdoc */
this.displayPreviousMonthArrow = true;
/** @inheritdoc */
this.displayNextMonthArrow = true;
/** @inheritdoc */
this.mode = EAbsoluteTimePickerMode.Range;
this.month = getDateMonth((_a = this.initialDate) !== null && _a !== void 0 ? _a : new Date());
this.year = getDateYear((_b = this.initialDate) !== null && _b !== void 0 ? _b : new Date());
this.onClickPreviousMonth = () => {
if (!this.isBackNavigationDisabled()) {
if (this.month === 1) {
this.year = this.year - 1;
this.month = 12;
this.changeMonth.emit({ month: this.month });
this.changeYear.emit({ year: this.year });
return;
}
this.month = this.month - 1;
this.changeMonth.emit({ month: this.month });
}
};
this.onClickNextMonth = () => {
if (!this.isNextNavigationDisabled()) {
if (this.month === 12) {
this.year = this.year + 1;
this.month = 1;
this.changeMonth.emit({ month: this.month });
this.changeYear.emit({ year: this.year });
return;
}
this.month = this.month + 1;
this.changeMonth.emit({ month: this.month });
}
};
this.isDayDisabled = (day) => {
const dayMoment = fromDateFields(day, this.month, this.year);
if (isDateInArray(dayMoment, this.disabledDates)) {
return true;
}
if (this.minDate && isDateBefore(dayMoment, dayjs(this.minDate, DATE_FORMAT))) {
return true;
}
if (this.maxDate && isDateAfter(dayMoment, dayjs(this.maxDate, DATE_FORMAT))) {
return true;
}
return false;
};
this.onClickDay = (day) => {
const clickedDateMoment = fromDateFields(day, this.month, this.year);
this.clickDate.emit({ date: formatDate(clickedDateMoment) });
};
this.isDayActive = (day) => {
const date = fromDateFields(day, this.month, this.year);
return isDateInArray(date, this.selectedDates.filter(date => date !== undefined));
};
this.onMouseEnter = (day) => {
this.hoveredDay = day;
const date = fromDateFields(day, this.month, this.year).format(DATE_FORMAT);
this.hoveredDateChange.emit(date);
};
this.onMouseLeave = (_day) => {
this.hoveredDay = undefined;
this.hoveredDateChange.emit('');
};
this.isDayInRange = (day) => {
const [selectedStartDate, selectedEndDate] = this.getSelectedRange();
if (this.disableHoveringStyling ||
this.mode === EAbsoluteTimePickerMode.Single ||
this.isDayDisabled(day) ||
selectedStartDate === undefined ||
selectedEndDate !== undefined) {
return false;
}
const date = fromDateFields(day, this.month, this.year).format(DATE_FORMAT);
const hoveredDate = getHooveredDate(this.hoveredDay, this.month, this.year, this.hoveredDate);
return isDateInRange(date, newDate(selectedStartDate).format(DATE_FORMAT), hoveredDate, false);
};
this.isSelectedStartDay = (day) => {
const [selectedStartDate] = this.getSelectedRange();
if (selectedStartDate === undefined) {
return false;
}
const dateMoment = fromDateFields(day, this.month, this.year);
return isDateSame(dateMoment, selectedStartDate);
};
this.isSelectedEndDay = (day) => {
const date = fromDateFields(day, this.month, this.year);
const [selectedStartDate, selectedEndDate] = this.getSelectedRange();
if (selectedStartDate === undefined) {
return false;
}
return isDateSame(date, selectedEndDate !== null && selectedEndDate !== void 0 ? selectedEndDate : selectedStartDate);
};
this.isToday = (day) => {
const nowDate = newDate().format(DATE_FORMAT);
const dayDate = fromDateFields(day, this.month, this.year).format(DATE_FORMAT);
return nowDate === dayDate;
};
this.isInsideDataRange = (day) => {
const dayDate = fromDateFields(day, this.month, this.year);
const [selectedStartDate, selectedEndDate] = this.getSelectedRange();
if (selectedStartDate === undefined || selectedEndDate === undefined)
return false;
return isDateInRange(dayDate, selectedStartDate, selectedEndDate, false);
};
this.isBackNavigationDisabled = () => {
const calendarMinDate = this.minDate ? this.minDate : CALENDAR_DEFAULT_MIN_DATE;
const dayDate = fromDateFields(1, this.month, this.year);
const minDateFormatted = dayjs(calendarMinDate, DATE_FORMAT);
return dayDate.isBefore(minDateFormatted) || dayDate.isSame(minDateFormatted);
};
this.isNextNavigationDisabled = () => {
if (isEmpty(this.maxDate))
return false;
const dayDate = fromDateFields(1, this.month, this.year);
const maxDateFormatted = dayjs(this.maxDate, DATE_FORMAT);
return dayDate.isAfter(maxDateFormatted);
};
}
validateSelectedDates(newSelectedDates) {
if (newSelectedDates !== undefined && !areDatesValid(newSelectedDates)) {
throw new Error('Selected date should be an array with valid dates');
}
}
validateInitialDate(newInitialDate) {
if (newInitialDate !== undefined && !isDateValid(newInitialDate)) {
throw new Error('Initial date should be a valid date');
}
else {
this.month = getDateMonth(newInitialDate !== null && newInitialDate !== void 0 ? newInitialDate : new Date());
this.year = getDateYear(newInitialDate !== null && newInitialDate !== void 0 ? newInitialDate : new Date());
}
}
validateDisabledDates(newDisabledDates) {
if (newDisabledDates !== undefined && !areDatesValid(newDisabledDates)) {
throw new Error('Disabled dates should be an array with valid dates');
}
}
componentWillLoad() {
this.validateSelectedDates(this.selectedDates);
this.validateInitialDate(this.initialDate);
this.validateDisabledDates(this.disabledDates);
}
getSelectedRange() {
return getSelectedRange(this.selectedDates);
}
render() {
const previousMonthLastDays = getCalendarStartDisabledDays(this.month, this.year);
const currentMonthDays = getArrayOfIndexes(getNumberOfDaysInMonth(this.month, this.year));
const nextMonthStartDays = getCalendarEndDisabledDays(previousMonthLastDays.length + currentMonthDays.length);
return (h(Host, { key: '9310ba6c9b27714a18adf64a2e6cbdabe00961b1' }, h("div", { key: '58cc403963167482b5b0133ec5e4e1710d074bec', class: "calendar" }, h("div", { key: '1f44a313b2500392190144c2b15fce121effbb3a', class: "calendar__header" }, h("div", { key: '91e41ad29bc3fcf72ed9afe8159b30e2ac88f627', class: { 'navigator': true, 'navigator--disabled': this.isBackNavigationDisabled() }, onClick: this.onClickPreviousMonth }, this.displayPreviousMonthArrow && h("kv-icon", { key: '93ed77d6e9868dc04231aa50044c795dd597a190', name: EIconName.NavClose })), h("div", { key: '9941068318d245e2860812f36fb926a111f505b3', class: "month" }, getMonthAndYearTitle(this.month, this.year)), h("div", { key: 'b0e489006e68111aaa7dd5284ec63b6c54f998df', class: { 'navigator': true, 'navigator--disabled': this.isNextNavigationDisabled() }, onClick: this.onClickNextMonth }, this.displayNextMonthArrow && h("kv-icon", { key: '15efdf9a4936dadf1159a03ad1ec3eb9390eb8d1', name: EIconName.NavOpen }))), h("div", { key: '5ddad731f73ea3a936761f181d5230f34f067686', class: "calendar__body" }, h("div", { key: 'e0e41bc4aebb85affdfbf9671f26e9552d98f2fb', class: "calendar-month" }, h("div", { key: 'd740c163935af02d2e60d27f6acd125577e1abc9', class: "calendar-month__weekdays" }, getWeekdaysNames().map(weekday => (h("div", { key: weekday, class: "weekday" }, weekday)))), h("div", { key: '8d430dd5d08e079e0c084c6293bd218b7eb67650', class: "calendar-month__days" }, previousMonthLastDays.map(id => (h("kv-calendar-day", { key: `previous-${this.year}-${this.month}-${id + 1}`, day: id, disabled: true }))), currentMonthDays.map(index => (h("kv-calendar-day", { key: `${this.year}-${this.month}-${index + 1}`, day: index + 1, onClickDay: this.onClickDay.bind(this, index + 1), disabled: this.isDayDisabled(index + 1), active: this.isDayActive(index + 1), inRange: this.isDayInRange(index + 1), isRangeStartDate: this.isSelectedStartDay(index + 1), isRangeEndDate: this.isSelectedEndDay(index + 1), isToday: this.isToday(index + 1), isBetweenSelectedDates: this.isInsideDataRange(index + 1), onMouseEnterDay: this.onMouseEnter.bind(this, index + 1), onMouseLeaveDay: this.onMouseLeave.bind(this, index + 1) }))), nextMonthStartDays.map(id => (h("kv-calendar-day", { key: `after-${this.year}-${this.month}-${id + 1}`, day: id, disabled: true })))))))));
}
static get watchers() { return {
"selectedDates": ["validateSelectedDates"],
"initialDate": ["validateInitialDate"],
"disabledDates": ["validateDisabledDates"]
}; }
static get style() { return calendarCss; }
}, [1, "kv-calendar", {
"selectedDates": [16, "selected-dates"],
"initialDate": [1, "initial-date"],
"disableHoveringStyling": [4, "disable-hovering-styling"],
"hoveredDate": [1, "hovered-date"],
"disabledDates": [16, "disabled-dates"],
"minDate": [1, "min-date"],
"maxDate": [1, "max-date"],
"displayPreviousMonthArrow": [4, "display-previous-month-arrow"],
"displayNextMonthArrow": [4, "display-next-month-arrow"],
"mode": [1],
"month": [32],
"year": [32],
"hoveredDay": [32]
}, undefined, {
"selectedDates": ["validateSelectedDates"],
"initialDate": ["validateInitialDate"],
"disabledDates": ["validateDisabledDates"]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["kv-calendar", "kv-calendar-day", "kv-icon"];
components.forEach(tagName => { switch (tagName) {
case "kv-calendar":
if (!customElements.get(tagName)) {
customElements.define(tagName, KvCalendar);
}
break;
case "kv-calendar-day":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
case "kv-icon":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
defineCustomElement();
export { DATE_FORMAT as D, KvCalendar as K, defineCustomElement as d };