@aqua-ds/web-components
Version:
AquaDS Web Components
189 lines (185 loc) • 9.18 kB
JavaScript
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { S as SELECTION, a as DATE_MODE, b as RANGE_STATUS } from './format.js';
import { D as DateTime } from './luxon.js';
import { e as emitEvent } from './eventEmitter.js';
import { d as defineCustomElement$1 } from './aq-calendar2.js';
const aqDateCss = ":host{display:block}.aq-date{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between}.aq-date .aq-date-controls{display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:justify;justify-content:space-between;height:var(--spacing-size-big);-ms-flex-align:center;align-items:center;-webkit-box-sizing:content-box;box-sizing:content-box}.aq-date .aq-date-controls button{border:none;background:unset;cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border-radius:var(--spacing-size-minor);height:var(--spacing-size-big);width:var(--spacing-size-big);padding:0}.aq-date .aq-date-controls button em{color:var(--color-ink-base);font-size:var(--font-size-m)}.aq-date .aq-date-controls button:hover{-webkit-box-shadow:var(--shadow-medium);box-shadow:var(--shadow-medium)}.aq-date .aq-date-controls .aq-date-info{color:var(--color-ink-base);font-size:var(--font-size-s);height:var(--spacing-size-big);padding:0 var(--spacing-size-short);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;cursor:pointer}.aq-date .aq-date-controls .aq-date-info:hover{-webkit-box-shadow:var(--shadow-medium);box-shadow:var(--shadow-medium)}";
const AqDate = /*@__PURE__*/ proxyCustomElement(class AqDate extends HTMLElement {
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
this.dayChanged = createEvent(this, "dayChanged", 7);
this.mouseOverDate = createEvent(this, "mouseOverDate", 7);
this.monthSelection = createEvent(this, "monthSelection", 7);
this.selection = SELECTION;
this.isRange = false;
this.isStart = false;
this.isEnd = false;
this.hasTime = false;
this.currentStartDate = null;
this.currentEndDate = null;
this.timeValue = '';
this.timePickerLabel = '';
this.uid = '';
this.calendarInfo = [];
this.localStart = '';
this.localEnd = '';
this.localHover = '';
}
componentDidLoad() {
this.localCalendar = this.host.querySelector('aq-calendar');
this.localCalendar.getCalendarData().then(data => {
this.calendarData = data;
if (this.isRange)
this.checkDate();
});
}
handleValueChange(newValue, oldValue) {
this.updateCalendarData(newValue, oldValue);
}
handleSelectionChange(newValue, oldValue) {
this.updateLocalVariablesBySelection(newValue);
this.updateCalendarData(newValue, oldValue);
}
updateLocalVariablesBySelection(newValue) {
this.localStart = newValue.date?.start;
this.localEnd = newValue.date?.end;
this.localHover = newValue.date?.hover;
}
updateCalendarData(newValue, oldValue) {
if (!!oldValue === false || newValue != oldValue) {
setTimeout(() => {
this.localCalendar.getCalendarData().then(data => {
this.calendarData = data;
});
}, 100);
}
}
getDateFromObject(date) {
if (!!date)
return DateTime.fromObject({
month: date?.month,
year: date?.year,
})?.startOf('month');
}
checkDate() {
const rangeMode = this.isStart ? RANGE_STATUS.START : RANGE_STATUS.END;
emitEvent('onMonthSelection', this.host, {
rangeMode,
month: this.calendarData?.showed?.month,
year: this.calendarData?.showed?.year,
});
}
previousMonth() {
this.localCalendar.previousMonth();
this.localCalendar.getCalendarData().then(data => {
this.calendarData = data;
if (this.isRange)
this.checkDate();
});
}
nextMonth() {
this.localCalendar.nextMonth();
this.localCalendar.getCalendarData().then(data => {
this.calendarData = data;
if (this.isRange)
this.checkDate();
});
}
dayClicked(event) {
const selected = event.detail.value;
this.emitValueChanged(selected);
}
emitValueChanged(newVal) {
this.dayChanged.emit({
calendar: this.calendarData,
value: newVal,
});
}
handleMouseOverDate({ detail }) {
this.mouseOverDate.emit(detail);
}
get canGetPrevMonth() {
if (!!this.value === false && !!this.selection?.date?.start === false)
return false;
if (!this.isRange)
return true;
if (this.isEnd) {
const currentEnd = this.getDateFromObject(this.currentEndDate);
const currentStartDate = this.getDateFromObject(this.currentStartDate);
const limitDate = currentStartDate?.startOf('month');
return currentEnd?.minus({ months: 1 })?.diff(limitDate, 'months').months >= 1;
}
else
return true;
}
get canGetNextMonth() {
if (!!this.value === false && !!this.selection?.date?.start === false)
return false;
if (!this.isRange)
return true;
if (this.isStart) {
const currentStart = this.getDateFromObject(this.currentStartDate);
const currentEndDate = this.getDateFromObject(this.currentEndDate);
const limitDate = currentEndDate?.startOf('month');
return limitDate?.diff(currentStart?.plus({ months: 1 }), 'months').months >= 1;
}
else
return true;
}
get calendarSelectedValue() {
return this.value;
}
render() {
const getPrevMonth = this.canGetPrevMonth;
const getNextMonth = this.canGetNextMonth;
return (h(Host, { key: 'd04934a840d46197530c7ee7811de8acace6ae4f', class: "aq-date" }, h("div", { key: '40663f399d7ff85463b3b5732af4674f61c9b39f', class: "aq-date-wrapper" }, h("div", { key: '7ace5f02164cdd8400d2bb9eb061b49d3fd3f69f', class: "aq-date-controls" }, h("button", { key: '4710a82d1abdcf5545c67231f7333decf7b10a2a', style: { visibility: getPrevMonth ? 'visible' : 'hidden' }, onClick: this.previousMonth.bind(this) }, h("em", { key: '9d176c1e7ac091dc0c0af557353f05d075d9d5d0', class: "aq-icon-chevron-left" })), h("div", { key: '6508bdf5d6fa5ddb27ed250579e7bb851c77254a', class: "aq-date-info" }, this.calendarData?.showed.monthName, " ", this.calendarData?.showed.year), h("button", { key: 'd06cfc62d54abcf52d35059c40a5c883f5a6d7cf', style: { visibility: getNextMonth ? 'visible' : 'hidden' }, onClick: this.nextMonth.bind(this) }, h("em", { key: '399884393c43aaf9b7d80eed2eaec45d206375e4', class: "aq-icon-chevron-right" }))), h("aq-calendar", { key: 'ae8e8b7e49c8d47b3455c6ace48919546117cfd3', uid: this.uid, "is-range": this.isRange, "has-time": this.hasTime, selection: this.isRange ? this.selection : null, mode: this.isRange ? DATE_MODE.RANGE : DATE_MODE.SINGLE, calendarInfo: this.calendarInfo, value: this.calendarSelectedValue, onDaysSelected: this.dayClicked.bind(this), onMouseOverDate: evt => this.handleMouseOverDate(evt) }))));
}
get host() { return this; }
static get watchers() { return {
"value": ["handleValueChange"],
"selection": ["handleSelectionChange"]
}; }
static get style() { return aqDateCss; }
}, [256, "aq-date", {
"value": [1025],
"selection": [1040],
"isRange": [4, "is-range"],
"isStart": [4, "is-start"],
"isEnd": [4, "is-end"],
"hasTime": [4, "has-time"],
"currentStartDate": [16, "current-start-date"],
"currentEndDate": [16, "current-end-date"],
"timeValue": [1, "time-value"],
"timePickerLabel": [1, "time-picker-label"],
"uid": [1],
"calendarInfo": [16, "calendar-info"],
"calendarData": [32],
"localStart": [32],
"localEnd": [32],
"localHover": [32]
}, undefined, {
"value": ["handleValueChange"],
"selection": ["handleSelectionChange"]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["aq-date", "aq-calendar"];
components.forEach(tagName => { switch (tagName) {
case "aq-date":
if (!customElements.get(tagName)) {
customElements.define(tagName, AqDate);
}
break;
case "aq-calendar":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
export { AqDate as A, defineCustomElement as d };