@kelvininc/ui-components
Version:
Kelvin UI Components
268 lines (262 loc) • 16.1 kB
JavaScript
import { H as proxyCustomElement, I as H, J as createEvent, i as EAbsoluteTimePickerMode, K as h, t as EIconName, L as Host } from './p-BP5CxQcH.js';
import { h as fromDateFields, p as getFirstWeekdayIndexOfMonth, s as getNumberOfDaysInMonth, k as getDateMonth, l as getDateYear, y as isDateInArray, x as isDateBefore, H as dayjs, w as isDateAfter, f as formatDate, z as isDateInRange, E as newDate, A as isDateSame, a as areDatesValid, D as isDateValid, q as getMonthAndYearTitle, v as getWeekdaysNames } from './p-BS8xGxWJ.js';
import { g as getArrayOfIndexes } from './p-C0GqgbWr.js';
import { d as defineCustomElement$2 } from './p-DRIdNOSH.js';
import { d as defineCustomElement$1 } from './p-DQ7v6WT-.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}}kv-dropdown-base:not(.hydrated)>[slot=list]{display:none}:host{--calendar-width:196px;--calendar-horizontal-padding:0px;--calendar-vertical-padding:0px;--calendar-background-color:var(--transparent);--calendar-month-title-text-color:var(--text-container-neutral-default);--calendar-month-weekday-text-color:var(--text-container-neutral-subtle)}.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(--spacing-md)}.calendar__header .month{font-family:Proxima Nova;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0;color:var(--calendar-month-title-text-color);user-select:none}.calendar__header .navigator{min-width:16px;cursor:pointer}.calendar__header .navigator kv-icon{--icon-color:var(--icon-container-table-icon-default)}.calendar__header .navigator--disabled{cursor:not-allowed}.calendar__header .navigator--disabled kv-icon{--icon-color:var(--icon-container-table-icon-disabled)}.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(--spacing-xs)}.calendar__body .calendar-month__weekdays .weekday{font-family:Proxima Nova;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0;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: '8f5764e3f37cdd1d2dbb68900eeaca1e77fd1cd3' }, h("div", { key: 'c73976a343e46594dcdbe47d8438983f61fd3082', class: "calendar" }, h("div", { key: 'dbada5e01ae087e2cce5f2c60626592343768c62', class: "calendar__header" }, h("div", { key: 'da12ffadf2ed1f3a3fd5d22e89b2c3dace26438b', class: { 'navigator': true, 'navigator--disabled': this.isBackNavigationDisabled() }, onClick: this.onClickPreviousMonth }, this.displayPreviousMonthArrow && h("kv-icon", { key: '2058734c09beeab7e263cc50aa8e35077bb638a0', name: EIconName.NavClose })), h("div", { key: 'de22d24456eb450aac401c14651948732585e0fb', class: "month" }, getMonthAndYearTitle(this.month, this.year)), h("div", { key: '187ad16cca89403441617b91134070f486a9a7a4', class: { 'navigator': true, 'navigator--disabled': this.isNextNavigationDisabled() }, onClick: this.onClickNextMonth }, this.displayNextMonthArrow && h("kv-icon", { key: '6a166df8116d9c6235ae65122913ec4f5155279a', name: EIconName.NavOpen }))), h("div", { key: 'e7f86824e86c2f693ba703c5dfe009bb227541d3', class: "calendar__body" }, h("div", { key: 'bfe88d3c9553a40c04db2e731b2003bc04ee4441', class: "calendar-month" }, h("div", { key: '62c7b6798491be9241243204337c36d2abbf1c42', class: "calendar-month__weekdays" }, getWeekdaysNames().map(weekday => (h("div", { key: weekday, class: "weekday" }, weekday)))), h("div", { key: 'd5a0036cea1e6d77239b07ef2d5a8a2756cdd78b', 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; }
}, [257, "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 };