@aqua-ds/web-components
Version:
AquaDS Web Components
331 lines (327 loc) • 16.6 kB
JavaScript
import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
import { R as RANGES, D as DATE_FORMAT } from './format.js';
import { D as DateFormatter, a as DateRangeService, b as DateParser, d as defineCustomElement$8 } from './aq-calendar2.js';
import { D as DateTime } from './luxon.js';
import { U as UniqueIdGenerator } from './uidGenerator.js';
import { e as emitEvent } from './eventEmitter.js';
import { d as defineCustomElement$a } from './aq-banner2.js';
import { d as defineCustomElement$9 } from './aq-button2.js';
import { d as defineCustomElement$7 } from './aq-date2.js';
import { d as defineCustomElement$6 } from './aq-range2.js';
import { d as defineCustomElement$5 } from './aq-range-shortcuts2.js';
import { d as defineCustomElement$4 } from './aq-range-time-picker2.js';
import { d as defineCustomElement$3 } from './aq-time-picker2.js';
import { d as defineCustomElement$2 } from './aq-tooltip2.js';
import { d as defineCustomElement$1 } from './aq-transition2.js';
const aqDatePickerPanelCss = ".aq-date-picker__content .aq-date-picker__calendars{height:100%;min-height:266px;padding:var(--spacing-size-medium) var(--spacing-size-large)}.aq-date-picker__content .aq-date-time__wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;border-top:var(--spacing-size-basic) solid var(--color-paper-light);padding:var(--spacing-size-short) var(--spacing-size-large);background-color:var(--color-paper-lighter)}";
const AqDatePickerPanel = /*@__PURE__*/ proxyCustomElement(class AqDatePickerPanel extends HTMLElement {
onValueChange(newVal) {
this.setLocalValue(newVal);
if (this.hasTime)
this.setLocalTime(newVal);
}
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
this.apply = createEvent(this, "apply", 7);
this.clean = createEvent(this, "clean", 7);
this.cancel = createEvent(this, "cancel", 7);
this.update = createEvent(this, "update", 7);
this.clickIconClose = createEvent(this, "clickIconClose", 7);
this.isRange = false;
this.hasTime = false;
this.showSummaryHeader = true;
this.ranges = RANGES;
this.shortcutRender = 0;
this.canShowRangeLabel = false;
this.dateFormatter = new DateFormatter();
this.dateRangeService = new DateRangeService();
this.dateParser = new DateParser();
}
getDateAndTime(value, time) {
const { start, end } = this.parseDateToGetTime(value, this.format);
if (!!time) {
const { start: startTime, end: endTime } = time;
const isoFormat = this.getDateISOFormat;
const startDate = this.dateFormatter.convertToISO(start, isoFormat, true, isoFormat).replace(/T([0-9\:]+)/g, `T${startTime}`);
const endDate = this.dateFormatter.convertToISO(end, isoFormat, true, isoFormat).replace(/T([0-9\:]+)/g, `T${endTime}`);
return { start: startDate, end: endDate };
}
else {
return { start, end };
}
}
formatDurationRange(value, time) {
const { start, end } = this.getDateAndTime(value, time);
const durationRange = this.dateRangeService.formatDurationRange({ start, end }, this.getDateISOFormat);
requestAnimationFrame(() => {
this.canShowRangeLabel = durationRange.length > 0;
});
return durationRange;
}
handleUpdateRange({ detail }) {
this.setLocalValue(detail);
emitEvent('onUpdate', this.host, this.localValue);
}
handleCancel(evt) {
this.cancel.emit(evt);
this.setLocalValue(this.value);
}
handleClean() {
this.clean.emit();
this.setLocalValue(this.value);
}
handleCloseHeaderSummary() {
this.clickIconClose.emit();
}
handleApply(value, evt) {
const ISOFormat = this.getDateISOFormat;
let date;
if (this.hasTime) {
date = this.getDateAndTime(this.localValue, this.localTime);
}
let format = !!date ? ISOFormat : this.format;
let emittedValue = typeof value !== 'string'
? this.dateRangeService.convertRangeToISO(date || value, format, false, ISOFormat)
: this.dateFormatter.convertToISO(value, ISOFormat, true, ISOFormat);
this.apply.emit({ value: emittedValue, event: evt });
}
handleCloseBanner() {
this.bannerObject.value = false;
}
handleDayChange(evt) {
const { detail: { value }, } = evt;
if (this.hasTime && !this.isRange) {
const time = this.extractHourAndMinute(this.localTime);
this.localValue = this.dateFormatter.convertToISO(value, DATE_FORMAT.FORMAT_ISO, true, this.getDateISOFormat).replace(/T([0-9\:]+)/g, `T${time}`);
}
else {
const format = this.getDateISOFormat;
this.localValue = this.dateFormatter.convertToISO(value, format, true, format);
}
}
handleTimeUpdate({ detail }) {
if (typeof this.localTime !== 'string' && typeof this.localValue !== 'string') {
const { value, type } = detail;
const localTime = { ...this.localTime };
localTime[type] = value[type];
this.localTime = { ...localTime };
const { start, end } = this.getDateAndTime(this.localValue, this.localTime);
this.localValue = this.dateFormatter.formatRangeForDate({ start, end }, this.format);
}
else if (typeof this.localTime === 'string' && typeof this.localValue === 'string') {
this.localTime = detail.value;
let time = this.extractHourAndMinute(this.localTime);
let format = this.getDateISOFormat;
this.localValue = this.dateFormatter.convertToISO(this.localValue, format, true, format).replace(/T([0-9\:]+)/g, `T${time}`);
}
}
handleRangeSelected({ detail }) {
const value = this.dateFormatter.formatRangeForDate(detail, this.format);
const { start, end } = this.getDateAndTime(value, this.localTime);
this.localValue = this.dateFormatter.formatRangeForDate({ start, end }, this.format);
}
parseDateToGetTime(value, format) {
const isoFormat = this.getDateISOFormat;
const hasFormat = !!format;
const date = typeof value !== 'string'
? hasFormat
? this.dateFormatter.formatRangeForISO(value, format, false, isoFormat)
: this.dateFormatter.formatRangeForISO(value, isoFormat, true, isoFormat)
: this.dateParser.parseFromISO(value);
return date;
}
extractHourAndMinute(value) {
const dt = DateTime.fromISO(value);
return `${dt.hour.toString().padStart(2, '0')}:${dt.minute.toString().padStart(2, '0')}`;
}
setLocalValue(value) {
if (!!value) {
if (typeof value !== 'string') {
const { start, end } = this.dateFormatter.formatRangeForDate(value, this.format);
this.localValue = { start: `${start}`, end: `${end}` };
this.forceShortcutRender();
}
else {
this.localValue = this.dateFormatter.formatDate(value, this.getDateISOFormat);
}
}
}
forceShortcutRender() {
this.shortcutRender++;
}
setLocalTime(value) {
if (!!value && this.isRange) {
const time = this.parseDateToGetTime(this.value);
const start = this.extractHourAndMinute(time.start);
const end = this.extractHourAndMinute(time.end);
this.localTime = typeof value !== 'string' && typeof this.localTime !== 'string' ? { start, end } : value;
}
else if (!!value && !this.isRange) {
this.localTime = this.extractHourAndMinute(value);
}
}
get getCssStyleAqDatePicker() {
return {
'aq-date-picker__content': true,
'aq-date-picker__content--range': this.isRange,
'aq-date-picker__content--individual': !this.isRange,
};
}
get getCssStyleFooter() {
return {
'aq-date-picker__footer': true,
'aq-date-picker__footer--space-between': this.isRange,
};
}
get getDateISOFormat() {
return this.hasTime ? DATE_FORMAT.FORMAT_ISO_WITH_TIME : DATE_FORMAT.FORMAT_ISO;
}
get getHeaderIsRangeText() {
if (typeof this.localValue !== 'string')
return (h("span", { class: "summary-header__info-text" }, h("span", { class: "summary-header__info-text--label" }, this.translations.range.start, ":"), h("span", { class: "summary-header__info-text" }, this.localValue?.start), h("span", { class: "summary-header__info-text--label summary-header__info-text--last" }, this.translations.range.end, ":"), h("span", { class: "summary-header__info-text" }, this.localValue?.end)));
}
get getHeaderText() {
if (typeof this.localValue === 'string') {
return h("span", { class: "summary-header__info-text" }, this.dateFormatter.formatDate(this.localValue, this.format));
}
else {
return h("span", { class: "summary-header__info-text" }, this.localValue?.start);
}
}
get getHeaderContent() {
return (this.showSummaryHeader && (h("div", { class: "aq-date-picker__summary-header" }, h("div", { class: "summary-header__info" }, h("span", { class: "summary-header__info-icon" }, h("em", { class: "aq-icon-calendar-dots" })), h("span", { class: "summary-header" }, this.isRange ? this.getHeaderIsRangeText : this.getHeaderText)), h("div", { class: "summary-header__close-icon", onClick: () => this.handleCloseHeaderSummary() }, h("em", { class: "aq-icon-close" })))));
}
get getRangesContent() {
if (!!this.localValue && this.isRange && typeof this.localValue !== 'string' && typeof this.value !== 'string') {
return (h("aq-range-shortcuts", { ranges: { ...this.ranges }, format: this.format, isoFormat: this.getDateISOFormat, value: { ...this.localValue },
// version={this.shortcutRender}
realValue: { ...this.value }, translations: this.translations, onUpdate: evt => this.handleUpdateRange(evt) }));
}
}
get getContent() {
if (this.isRange && !!this.ranges && typeof this.localValue !== 'string')
return (h("aq-range", { value: this.localValue, isoFormat: this.getDateISOFormat, format: this.format, translations: this.translations, hasTime: this.hasTime, onRangeSelected: evt => this.handleRangeSelected(evt) }));
else if (typeof this.localValue === 'string') {
const uid = new UniqueIdGenerator().generateId();
return h("aq-date", { uid: uid, isRange: false, value: this.localValue, onDayChanged: evt => this.handleDayChange(evt), hasTime: this.hasTime });
}
}
get getTimePicker() {
if (this.isRange && !!this.ranges && typeof this.localTime !== 'string' && this.hasTime)
return (h("aq-range-time-picker", { value: this.localTime, isRange: this.isRange, translations: this.translations, onUpdateTime: evt => this.handleTimeUpdate(evt) }));
else if (typeof this.localTime === 'string') {
return (h("div", { class: "aq-date-time__wrapper" }, h("aq-time-picker", { value: this.localTime, onChange: evt => this.handleTimeUpdate(evt) })));
}
}
get getFooter() {
return (h(Fragment, null, this.isRange && typeof this.localValue !== 'string' && !!this.localValue && (h("div", null, this.canShowRangeLabel && h("span", { class: "aq-date-picker__footer--label" }, this.translations.range.range, ":"), h("span", { class: "aq-date-picker__footer--value" }, this.formatDurationRange(this.localValue, this.localTime)))), h("div", null, h("aq-button", { variant: "default", onClick: () => this.handleClean() }, this.translations.clear), h("aq-button", { "is-outline": true, onClick: evt => this.handleCancel(evt) }, this.translations.cancel), h("aq-button", { variant: "primary", onClick: evt => this.handleApply(this.localValue, evt) }, this.translations.apply))));
}
get getBannerContent() {
return (!!this.bannerObject &&
this.bannerObject?.value && (h("div", { class: "aq-date-picker__banner" }, h("aq-banner", { ...this.bannerObject, onClose: () => this.handleCloseBanner() }, this.bannerObject.content))));
}
get getCalendarsClasses() {
return {
'aq-date-picker__calendars--time': this.hasTime,
'aq-date-picker__calendars': true,
};
}
componentDidLoad() {
if (!!this.value)
this.setLocalValue(this.value);
if (this.hasTime && !!this.value)
this.setLocalTime(this.value);
}
render() {
const getCalendarsClasses = this.getCalendarsClasses;
return (h(Fragment, { key: 'bfdc3aba2c8a0fb547f6245410471387283f8058' }, h("div", { key: 'fc5a9a0049698f1de4e90226038c6fd833395f60', class: this.getCssStyleAqDatePicker }, this.getHeaderContent, h("div", { key: '72de5f2599cd1730b90733b4bc3d5cfc0ba64611', class: "aq-date-picker__body" }, this.getRangesContent, h("div", { key: '7fd8c41aaab940a0eabf545d3a9c472fd4f7dccb', class: "aq-date-picker__content" }, this.getBannerContent, h("div", { key: 'a870b3961838e916eb8b8a6f5766fdb60bd55195', class: getCalendarsClasses }, this.getContent), this.getTimePicker))), h("div", { key: 'c5f405b2cb88ce428ae04b8e13715fdfd3ff8dc0', class: this.getCssStyleFooter }, this.getFooter)));
}
get host() { return this; }
static get watchers() { return {
"value": ["onValueChange"]
}; }
static get style() { return aqDatePickerPanelCss; }
}, [256, "aq-date-picker-panel", {
"isRange": [4, "is-range"],
"hasTime": [4, "has-time"],
"value": [1],
"realValue": [1, "real-value"],
"showSummaryHeader": [4, "show-summary-header"],
"ranges": [16],
"format": [1],
"bannerObject": [1040, "banner-object"],
"translations": [16],
"localValue": [32],
"localTime": [32],
"shortcutRender": [32],
"canShowRangeLabel": [32]
}, undefined, {
"value": ["onValueChange"]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["aq-date-picker-panel", "aq-banner", "aq-button", "aq-calendar", "aq-date", "aq-range", "aq-range-shortcuts", "aq-range-time-picker", "aq-time-picker", "aq-tooltip", "aq-transition"];
components.forEach(tagName => { switch (tagName) {
case "aq-date-picker-panel":
if (!customElements.get(tagName)) {
customElements.define(tagName, AqDatePickerPanel);
}
break;
case "aq-banner":
if (!customElements.get(tagName)) {
defineCustomElement$a();
}
break;
case "aq-button":
if (!customElements.get(tagName)) {
defineCustomElement$9();
}
break;
case "aq-calendar":
if (!customElements.get(tagName)) {
defineCustomElement$8();
}
break;
case "aq-date":
if (!customElements.get(tagName)) {
defineCustomElement$7();
}
break;
case "aq-range":
if (!customElements.get(tagName)) {
defineCustomElement$6();
}
break;
case "aq-range-shortcuts":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "aq-range-time-picker":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "aq-time-picker":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "aq-tooltip":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
case "aq-transition":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
export { AqDatePickerPanel as A, defineCustomElement as d };