@aqua-ds/web-components
Version:
AquaDS Web Components
312 lines (307 loc) • 16.2 kB
JavaScript
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { R as RANGES, d as DEFAULT_TRANSLATIONS, D as DATE_FORMAT } from './format.js';
import { D as DateFormatter, b as DateParser, d as defineCustomElement$e } from './aq-calendar2.js';
import { e as emitEvent } from './eventEmitter.js';
import { D as DateTime } from './luxon.js';
import { d as defineCustomElement$g } from './aq-banner2.js';
import { d as defineCustomElement$f } from './aq-button2.js';
import { d as defineCustomElement$d } from './aq-date2.js';
import { d as defineCustomElement$c } from './aq-date-picker-panel2.js';
import { d as defineCustomElement$b } from './aq-helper-text2.js';
import { d as defineCustomElement$a } from './aq-label2.js';
import { d as defineCustomElement$9 } from './aq-popover2.js';
import { d as defineCustomElement$8 } from './aq-range2.js';
import { d as defineCustomElement$7 } from './aq-range-shortcuts2.js';
import { d as defineCustomElement$6 } from './aq-range-time-picker2.js';
import { d as defineCustomElement$5 } from './aq-text-field2.js';
import { d as defineCustomElement$4 } from './aq-time-picker2.js';
import { d as defineCustomElement$3 } from './aq-tooltip2.js';
import { d as defineCustomElement$2 } from './aq-transition2.js';
const aqDatePickerCss = ".aq-date-picker{display:inline-block}.aq-date-picker__content{width:100%;min-height:248px}.aq-date-picker__content--individual{width:296px}.aq-date-picker__content--range{width:664px}.aq-date-picker__body{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:start;justify-content:flex-start}.aq-date-picker__shortcuts{width:144px;max-width:144px;height:100%;border-right:1px solid var(--color-paper-light);padding:var(--spacing-size-short)}.aq-date-picker__shortcuts-item{border:unset;font-size:var(--font-size-xs);font-weight:var(--font-weight-regular);padding:var(--spacing-size-short) var(--spacing-size-medium);border-radius:var(--spacing-size-minor);font-family:var(--font-family-basic);background-color:var(--color-white);cursor:pointer;width:128px;text-align:left;margin-bottom:1.5px}.aq-date-picker__shortcuts-item:hover,.aq-date-picker__shortcuts-item:focus{-webkit-box-shadow:var(--shadow-medium);box-shadow:var(--shadow-medium)}.aq-date-picker__shortcuts-item:active{-webkit-box-shadow:var(--shadow-medium-inverse);box-shadow:var(--shadow-medium-inverse)}.aq-date-picker__shortcuts-item--active{color:var(--color-white);background-color:var(--color-primary-base)}.aq-date-picker__activator{position:relative}.aq-date-picker__activator .tippy-box[data-theme~=aqua]{padding:0px;cursor:auto}.aq-date-picker__activator>aq-button>.aq-button{padding:0;border:unset;height:auto;cursor:pointer;position:absolute;height:31px;left:0;bottom:5px;width:100%;z-index:2}.aq-date-picker__activator>aq-button>.aq-button:hover{-webkit-box-shadow:unset;box-shadow:unset;background-color:transparent}.aq-date-picker__activator>aq-button>.aq-button:focus{-webkit-box-shadow:unset;box-shadow:unset;background-color:transparent}.aq-date-picker__activator .aq-text-field--focus{-webkit-box-shadow:var(--shadow-active);box-shadow:var(--shadow-active)}.aq-date-picker__summary-header{padding:var(--spacing-size-moderate) var(--spacing-size-large);font-size:var(--spacing-size-medium);color:var(--color-ink-base);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;font-weight:var(--font-weight-regular);border-bottom:1px solid var(--color-paper-light)}.aq-date-picker__summary-header .summary-header__close-icon{height:var(--spacing-size-moderate);width:var(--spacing-size-moderate);color:var(--color-paper-dark);cursor:pointer}.aq-date-picker__summary-header .summary-header__info-icon{margin-right:var(--spacing-size-short)}.aq-date-picker__summary-header .summary-header__info-text--label{color:var(--color-paper-darker);margin-right:var(--spacing-size-small)}.aq-date-picker__summary-header .summary-header__info-text--last{margin-left:var(--spacing-size-short)}.aq-date-picker__banner{padding:var(--spacing-size-medium);width:100%}.aq-date-picker__banner>*:first-child,.aq-date-picker__banner .aq-banner,.aq-date-picker__banner .aq-transition,.aq-date-picker__banner .aq-banner__transition{width:100%}.aq-date-picker__footer{padding:var(--spacing-size-short) var(--spacing-size-large);width:100%;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end;border-top:1px solid var(--color-paper-light)}.aq-date-picker__footer--space-between{-ms-flex-pack:justify;justify-content:space-between}.aq-date-picker__footer--label{color:var(--color-paper-darker);margin-right:var(--spacing-size-minor);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs)}.aq-date-picker__footer--value{color:var(--color-ink-base);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs)}";
const AqDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class AqDatePicker extends HTMLElement {
onValueChange(newVal) {
this.localValue = newVal;
this.setTextFieldText(newVal);
}
onIsRangeChange(newVal) {
this.localValue = null;
this.textFieldValue = '';
this.activatorElement = null;
if (newVal === false) {
this.value = null;
}
this.forceReinitialize();
setTimeout(() => {
if (newVal === true) {
const currentDay = this.setCurrentDay();
this.value = this.dateFormatter.formatDateForValue(currentDay, this.isRange, this.getDateISOFormat);
}
this.loadInitDatePicker();
}, 10);
}
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
this.isRange = false;
this.ranges = RANGES;
this.showSummaryHeader = true;
this.format = this.getDateISOFormat;
this.closeOnClick = true;
this.translations = DEFAULT_TRANSLATIONS;
this.activatorElement = null;
this.forceUpdate = 0;
this.popoverConfig = {
hideOnClick: false,
hideOnClickOutside: this.closeOnClick,
appendTo: document.body,
customMount: instance => {
requestAnimationFrame(() => {
this.popoverInstance = instance;
});
},
};
this.dateFormatter = new DateFormatter();
this.dateParser = new DateParser();
}
forceReinitialize() {
this.forceUpdate++;
}
handleBlur() {
if (!this.popoverInstance?.state?.isMounted && !this.isReadonly) {
this.popoverInstance?.show();
}
}
setActivatorElement() {
requestAnimationFrame(() => {
const aqButton = this.el.querySelector('aq-button');
const activator = aqButton.querySelector('button');
if (activator) {
this.activatorElement = activator;
}
});
}
setTextFieldText(value) {
this.textFieldValue = this.dateFormatter.formatDateForDisplay(value, this.isRange, this.format);
}
setCurrentDay() {
return this.isRange ? {
start: DateTime.now().toFormat(this.getDateISOFormat),
end: DateTime.now().plus({ month: 1 }).startOf('month').toFormat(this.getDateISOFormat)
} : DateTime.now().toFormat(this.getDateISOFormat);
}
handleClick() {
const textField = this.el.querySelector('aq-text-field');
const input = textField.querySelector('input');
input.readOnly = true;
textField.querySelector('.aq-text-field__container').classList.add('aq-text-field--focus');
}
handleCloseHeaderSummary() {
this.showSummaryHeader = false;
}
handleApply({ detail: { value, event } }) {
this.setTextFieldText(value);
this.value = this.dateFormatter.formatDateForValue(value, this.isRange, this.getDateISOFormat);
this.popoverInstance?.hide();
event.stopPropagation();
emitEvent('input', this.el, { value: this.value }, event);
}
handleUpdate({ detail }) {
this.localValue = detail;
}
handleClean() {
this.localValue = this.value;
}
handleCancel({ detail }) {
this.popoverInstance?.hide();
this.handleClean();
detail.stopPropagation();
}
handleCloseBanner() {
this.bannerObject.value = false;
}
setCapitalize(value) {
const upperCaseLetter = value.slice(0, 1).toUpperCase();
return `${upperCaseLetter}${value.slice(1, value.length)}`;
}
get getDateISOFormat() {
return this.hasTime ? DATE_FORMAT.FORMAT_ISO_WITH_TIME : DATE_FORMAT.FORMAT_ISO;
}
get getCssStyleAqTextField() {
return {
'autocomplete-error-text-field': this.isError,
};
}
get getPopoverConfig() {
return {
...this.popoverConfig,
placement: this.placement,
onHide: () => {
const textField = this.el.querySelector('aq-text-field');
textField.querySelector('.aq-text-field__container').classList.remove('aq-text-field--focus');
},
};
}
get getValueNotStringType() {
return typeof this.value !== 'string';
}
get getContent() {
if (this.isRange && !!this.ranges)
return h("aq-range", null);
else if (typeof this.value === 'string')
return h("aq-date", { value: this.value });
}
componentDidRender() {
this.setActivatorElement();
}
loadInitDatePicker() {
if (!!this.value) {
this.localValue = typeof this.value !== 'string' && this.isRange ? { ...this.value } : this.value;
this.setTextFieldText(this.localValue);
}
else {
const currentDay = this.setCurrentDay();
this.value = this.dateFormatter.formatDateForValue(currentDay, this.isRange, this.getDateISOFormat);
emitEvent('input', this.el, { value: this.value });
}
}
handleClickIconClose() {
this.popoverInstance?.hide();
}
componentDidLoad() {
this.loadInitDatePicker();
}
render() {
const getPopoverConfig = this.getPopoverConfig;
const cssStyleAqTextField = this.getCssStyleAqTextField;
return (h(Host, { key: '285ec70bdc6897bdb76c2d90fb9974a9789429ba', class: "aq-date-picker", id: this.cid }, h("div", { key: 'b234ddd447c360ef774b7a356698c57fdcf93f7c', class: "aq-date-picker__activator" }, h("aq-button", { key: 'a6725d0d180aef39179fe50eb067e432252b01c7', isOutline: true, onClick: () => this.handleClick() }), h("aq-text-field", { key: '80bf15869d5c960bc64a314e7ed9040ac82d9cb9', info: this.info, class: cssStyleAqTextField, label: this.label, isRequired: this.isRequired, sublabel: this.sublabel, value: this.textFieldValue, icon: this.icon, placeholder: this.placeholder, isDisabled: this.isDisabled, isPlain: this.isPlain, isError: this.isPlain ? false : this.isError, onBlur: () => this.handleBlur(), isReadonly: this.isReadonly })), h("aq-popover", { key: '55e7484f1aabdaa2191b46dd3a34d8ca9c9d5ff0', slot: "popover", disabled: this.isDisabled || this.isReadonly, trigger: this.activatorElement, config: { ...getPopoverConfig } }, h("aq-date-picker-panel", { onClickIconClose: () => this.handleClickIconClose(), key: this.isRange ? 'range' : 'single', isRange: this.isRange, hasTime: this.hasTime, value: this.localValue, translations: this.translations, realValue: this.value, showSummaryHeader: this.showSummaryHeader, ranges: { ...this.ranges }, format: this.format, bannerObject: { ...this.bannerObject }, onUpdate: evt => this.handleUpdate(evt), onApply: evt => this.handleApply(evt), onClean: () => this.handleClean(), onCancel: evt => this.handleCancel(evt) }))));
}
get el() { return this; }
static get watchers() { return {
"value": ["onValueChange"],
"isRange": ["onIsRangeChange"]
}; }
static get style() { return aqDatePickerCss; }
}, [256, "aq-date-picker", {
"value": [1025],
"isDisabled": [4, "is-disabled"],
"isRequired": [4, "is-required"],
"isReadonly": [4, "is-readonly"],
"isError": [4, "is-error"],
"isPlain": [4, "is-plain"],
"isRange": [4, "is-range"],
"hasTime": [4, "has-time"],
"ranges": [16],
"showSummaryHeader": [4, "show-summary-header"],
"sublabel": [1],
"label": [1],
"info": [1],
"placeholder": [1],
"cid": [1],
"icon": [1],
"format": [1],
"placement": [1],
"closeOnClick": [4, "close-on-click"],
"translations": [16],
"bannerObject": [1040, "banner-object"],
"textFieldValue": [32],
"activatorElement": [32],
"localValue": [32],
"forceUpdate": [32],
"popoverConfig": [32]
}, undefined, {
"value": ["onValueChange"],
"isRange": ["onIsRangeChange"]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["aq-date-picker", "aq-banner", "aq-button", "aq-calendar", "aq-date", "aq-date-picker-panel", "aq-helper-text", "aq-label", "aq-popover", "aq-range", "aq-range-shortcuts", "aq-range-time-picker", "aq-text-field", "aq-time-picker", "aq-tooltip", "aq-transition"];
components.forEach(tagName => { switch (tagName) {
case "aq-date-picker":
if (!customElements.get(tagName)) {
customElements.define(tagName, AqDatePicker$1);
}
break;
case "aq-banner":
if (!customElements.get(tagName)) {
defineCustomElement$g();
}
break;
case "aq-button":
if (!customElements.get(tagName)) {
defineCustomElement$f();
}
break;
case "aq-calendar":
if (!customElements.get(tagName)) {
defineCustomElement$e();
}
break;
case "aq-date":
if (!customElements.get(tagName)) {
defineCustomElement$d();
}
break;
case "aq-date-picker-panel":
if (!customElements.get(tagName)) {
defineCustomElement$c();
}
break;
case "aq-helper-text":
if (!customElements.get(tagName)) {
defineCustomElement$b();
}
break;
case "aq-label":
if (!customElements.get(tagName)) {
defineCustomElement$a();
}
break;
case "aq-popover":
if (!customElements.get(tagName)) {
defineCustomElement$9();
}
break;
case "aq-range":
if (!customElements.get(tagName)) {
defineCustomElement$8();
}
break;
case "aq-range-shortcuts":
if (!customElements.get(tagName)) {
defineCustomElement$7();
}
break;
case "aq-range-time-picker":
if (!customElements.get(tagName)) {
defineCustomElement$6();
}
break;
case "aq-text-field":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "aq-time-picker":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "aq-tooltip":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "aq-transition":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
const AqDatePicker = AqDatePicker$1;
const defineCustomElement = defineCustomElement$1;
export { AqDatePicker, defineCustomElement };