@aqua-ds/web-components
Version:
AquaDS Web Components
219 lines (215 loc) • 8.55 kB
JavaScript
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { D as DateTime } from './luxon.js';
import { D as DATE_FORMAT, S as SELECTION, c as SELECTION_MODE, b as RANGE_STATUS } from './format.js';
import { U as UniqueIdGenerator } from './uidGenerator.js';
import { d as defineCustomElement$2 } from './aq-calendar2.js';
import { d as defineCustomElement$1 } from './aq-date2.js';
const aqRangeCss = ".aq-range{display:-ms-flexbox;display:flex}.aq-range aq-date:nth-child(1){margin-right:var(--spacing-size-large)}";
const AqRange = /*@__PURE__*/ proxyCustomElement(class AqRange extends HTMLElement {
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
this.rangeSelected = createEvent(this, "rangeSelected", 7);
this.value = { start: '', end: '' };
this.hasTime = false;
this.isoFormat = DATE_FORMAT.FORMAT_ISO;
this.startDate = '';
this.endDate = '';
this.status = null;
this.selection = SELECTION;
this.hoverDate = '';
this.startValue = '';
this.endValue = '';
this.currentStartDate = null;
this.currentEndDate = null;
}
onValueChange(newVal) {
this.setRange(newVal);
}
onSelectionChange(newVal) {
if (!!newVal.date.start)
this.currentStartDate = this.getMonthAndYear(newVal.date.start);
if (!!newVal.date.end)
this.currentEndDate = this.getMonthAndYear(newVal.date.end);
}
getMonthAndYear(date) {
const cleanDate = date?.split('T')[0]; // elimina la hora si viene en formato ISO con tiempo
if (!cleanDate)
return null;
const dateISO = DateTime.fromFormat(cleanDate, DATE_FORMAT.FORMAT_ISO).toISO();
const month = DateTime.fromISO(dateISO).get('month');
const year = DateTime.fromISO(dateISO).get('year');
return { month, year };
}
setRange(value) {
this.startValue = DateTime.fromFormat(value.start, this.format).toFormat(this.isoFormat);
this.endValue = DateTime.fromFormat(value.end, this.format).toFormat(this.isoFormat);
this.selection.mode = SELECTION_MODE.SELECTION;
this.selection.date = {
start: this.startValue,
end: this.endValue,
hover: '',
};
this.forceSelectionUpdate();
this.setCalendarInfo({ start: this.startValue, end: this.endValue });
}
setCalendarInfo(value) {
this.calendarInfo = [
{ uid: this.uidLeft, value: value.start },
{ uid: this.uidRight, value: value.end },
];
}
isInRange(date) {
if (!this.startDate || !this.endDate)
return false;
const d = new Date(date).getTime();
return d >= new Date(this.startDate).getTime() && d <= new Date(this.endDate).getTime();
}
isStart(date) {
return date === this.startDate;
}
isEnd(date) {
return date === this.endDate;
}
handleDayChange({ detail }) {
switch (this.status) {
case 1:
this.finishSelection(detail);
this.sortDate();
break;
case 2:
this.resetSelection();
this.handleDayChange({ detail });
break;
default:
this.initSelection(detail);
break;
}
this.forceSelectionUpdate();
}
resetSelection() {
this.status = null;
this.selection.mode = SELECTION_MODE.NONE;
this.selection.date = {
start: '',
end: '',
hover: '',
};
}
setUID() {
this.uidLeft = new UniqueIdGenerator().generateId();
this.uidRight = new UniqueIdGenerator().generateId();
}
initSelection({ value }) {
this.status = 1;
this.selection.mode = SELECTION_MODE.HOVER;
this.selection.date = {
start: value.start,
end: '',
hover: '',
};
}
finishSelection({ value }) {
this.status = 2;
this.selection.mode = SELECTION_MODE.SELECTION;
this.selection.date = { ...this.selection.date, start: value.start, end: value.end };
this.hoverDate = '';
this.emitSelection();
}
forceSelectionUpdate() {
const selection = { ...this.selection };
this.selection = { ...selection };
}
sortDate() {
const { start, end } = this.selection.date;
const date1 = DateTime.fromISO(start);
const date2 = DateTime.fromISO(end);
this.selection.date = {
...this.selection.date,
start: DateTime.min(date1, date2).toFormat('yyyy-MM-dd'),
end: DateTime.max(date1, date2).toFormat('yyyy-MM-dd'),
};
this.startValue = this.selection.date.start;
this.endValue = this.selection.date.end;
}
emitSelection() {
const { start, end } = this.selection.date;
this.rangeSelected.emit({ start, end });
}
updateHoverDate({ detail }) {
this.selection.date.hover = detail;
this.hoverDate = detail;
}
handleMonthSelection({ detail }) {
const date = { month: detail.month, year: detail.year };
if (detail.rangeMode === RANGE_STATUS.START)
this.currentStartDate = date;
if (detail.rangeMode === RANGE_STATUS.END)
this.currentEndDate = date;
}
get getIdLeft() {
return this.uidLeft;
}
get getIdRight() {
return this.uidRight;
}
componentWillLoad() {
this.setUID();
this.setCalendarInfo({ start: this.value.start, end: this.value.end });
}
render() {
const idLeft = this.getIdLeft;
const idRight = this.getIdRight;
return (h(Host, { key: 'd41d7b5f3b9a03f931ddd5925df668a261151cb2' }, h("div", { key: '7693b09e146385b2492df6b78a0bd7e534839241', class: "aq-range" }, h("aq-date", { key: '5592b0cffe8254f4dd2e4622c320f1114adc3490', uid: idLeft, calendarInfo: this.calendarInfo, selection: { ...this.selection }, currentStartDate: this.currentStartDate, currentEndDate: this.currentEndDate, "has-time": this.hasTime, "is-range": true, "is-start": true, "time-picker-label": this.translations.range.start, onDayChanged: evt => this.handleDayChange(evt), onMouseOverDate: evt => this.updateHoverDate(evt), onMonthSelection: evt => this.handleMonthSelection(evt) }), h("aq-date", { key: '000355b1c089b4de4b178e9c40d5dd9a2a6eae50', uid: idRight, calendarInfo: this.calendarInfo, selection: { ...this.selection }, currentEndDate: this.currentEndDate, currentStartDate: this.currentStartDate, "has-time": this.hasTime, "is-range": true, "is-end": true, "time-picker-label": this.translations.range.end, onDayChanged: evt => this.handleDayChange(evt), onMouseOverDate: evt => this.updateHoverDate(evt), onMonthSelection: evt => this.handleMonthSelection(evt) }))));
}
static get watchers() { return {
"value": ["onValueChange"],
"selection": ["onSelectionChange"]
}; }
static get style() { return aqRangeCss; }
}, [256, "aq-range", {
"value": [16],
"hasTime": [4, "has-time"],
"format": [1],
"translations": [16],
"isoFormat": [1, "iso-format"],
"startDate": [32],
"endDate": [32],
"status": [32],
"selection": [32],
"hoverDate": [32],
"startValue": [32],
"endValue": [32],
"currentStartDate": [32],
"currentEndDate": [32],
"calendarInfo": [32]
}, undefined, {
"value": ["onValueChange"],
"selection": ["onSelectionChange"]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["aq-range", "aq-calendar", "aq-date"];
components.forEach(tagName => { switch (tagName) {
case "aq-range":
if (!customElements.get(tagName)) {
customElements.define(tagName, AqRange);
}
break;
case "aq-calendar":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
case "aq-date":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
export { AqRange as A, defineCustomElement as d };