overview-components 1.1.0 → 1.1.11

package/dist/shared/lit-date-picker.js

@@ -6,38 +6,49 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, html, css } from 'lit';
 import { property, customElement, query, state } from 'lit/decorators.js';
+import { isEmpty, isEqual } from 'lodash';
 import { DateTime } from 'luxon';
 import { msg } from '@lit/localize';
 import 'air-datepicker/air-datepicker.css';
 // components
 import './lit-icon-button.js';
+import './lit-icon.js';
+import './simple-popper.js';
+import './lit-menu.js';
+import './lit-menu-item.js';
 import AirDatepicker from 'air-datepicker';
 import { localizedDatePicker } from '../utils/localization.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { getDefaultOperator } from '../utils/getOperatorByType.js';
+import { debounce } from '../utils/utils.js';
+import { autoUpdate, computePosition, flip, hide, offset, shift } from '@floating-ui/dom';
 let LitDatePicker = class LitDatePicker extends LitElement {
     constructor() {
-        super(...arguments);
+        super();
+        this.pickerVariant = 'date';
         this.userLang = 'cs';
         this.placeholder = '';
         this.disableClearButton = false;
         this.range = false;
         this.server = false;
         this.disabled = false;
-        this.setOperator = (operator) => { };
-        this.filterVariant = '';
+        this.setOperator = (operator, opt) => { };
+        this.filterOperators = [];
+        this.displayValue = '';
+        this.isSubmenuOpen = false;
+        this.submenuTriggerEl = null;
         this.handleOutsideClick = (event) => {
             const path = event.composedPath();
             const isClickInsideDatepicker = path.some((element) => element instanceof HTMLElement && element.classList.contains('air-datepicker'));
             // Check if the date picker is visible before trying to hide it
             if (!path.includes(this) && !isClickInsideDatepicker && this.datePicker.visible) {
+                this.datePicker.clear();
                 this.datePicker.hide();
             }
         };
+        this.debouncedHandleInput = debounce(this.handleDateInput, 500);
     }
     connectedCallback() {
         super.connectedCallback();
-        this.filterVariant = this.column?.columnDef?.meta.filterVariant || '';
         this.addEventListener('focus', () => this.focus());
     }
     disconnectedCallback() {
@@ -46,15 +57,27 @@ let LitDatePicker = class LitDatePicker extends LitElement {
         this.removeEventListener('focus', () => this.focus());
     }
     updated(changedProperties) {
+        if (changedProperties.has('operator')) {
+            const oldValue = changedProperties.get('operator');
+            if (this.operator === 'fromTo' || oldValue === 'fromTo') {
+                this.datePicker.update({
+                    range: this.operator === 'fromTo',
+                }, { silent: true });
+            }
+        }
         if (changedProperties.has('range')) {
-            this.reinitializeDatePicker();
+            this.datePicker.update({
+                range: this.range,
+            }, { silent: true });
         }
-        if (changedProperties.has('column') && this.column) {
-            // console.log('this.column', this.column);
-            const filterValue = this.column?.getFilterValue();
-            const parsedDate = DateTime.fromISO(filterValue).toJSDate();
-            if (parsedDate) {
-                this.datePicker.selectDate(parsedDate);
+        if (changedProperties.has('value') &&
+            !isEqual(this.value, changedProperties.get('value'))) {
+            if (typeof this.value === 'undefined' || this.value === '') {
+                this.datePicker.clear({ silent: true });
+                return;
+            }
+            if (this.value) {
+                this.datePicker.selectDate(this.value, { silent: true });
             }
         }
     }
@@ -63,244 +86,477 @@ let LitDatePicker = class LitDatePicker extends LitElement {
             this.datePicker.destroy();
         }
         this.datePicker = new AirDatepicker(this.dateInputEl, {
-            timepicker: this.filterVariant === 'dateTime',
+            timepicker: this.pickerVariant === 'dateTime',
             multipleDatesSeparator: ' - ',
-            isMobile: window.matchMedia('(max-width: 600px)').matches,
+            // isMobile: window.matchMedia('(max-width: 600px)').matches,
             dateFormat: this.dateFormat || undefined,
             locale: this.getLocale(),
             autoClose: true,
-            range: this.range,
+            range: this.operator === 'fromTo',
             onRenderCell: ({ date, cellType, }) => {
                 const isDay = cellType === 'day';
                 const _date = date.getDate();
             },
+            onShow: () => {
+                const dpRoot = this.datePicker.$datepicker;
+                this.submenuTriggerEl = dpRoot?.querySelector('.submenu-trigger');
+                if (this.submenuTriggerEl) {
+                    this.submenuTriggerEl.addEventListener('mouseenter', () => {
+                        this.openSubmenu(true);
+                    });
+                    this.submenuTriggerEl?.addEventListener('mouseleave', (e) => {
+                        const related = e.relatedTarget;
+                        const isGoingToPopper = related?.closest('simple-popper');
+                        if (!isGoingToPopper) {
+                            this.openSubmenu(false);
+                        }
+                    });
+                }
+                const $datepicker = this.datePicker?.$datepicker;
+                const $target = this.dateInputEl;
+                if (!$datepicker || !$target)
+                    return;
+                // Destroy previous observer
+                this.cleanupAutoUpdate?.();
+                this.cleanupAutoUpdate = autoUpdate($target, $datepicker, () => {
+                    computePosition($target, $datepicker, {
+                        placement: 'bottom-start',
+                        middleware: [offset(4), flip(), hide(), shift({ padding: 8 })],
+                    }).then(({ x, y, middlewareData }) => {
+                        if (middlewareData.hide) {
+                            Object.assign($datepicker.style, {
+                                display: middlewareData.hide.referenceHidden ? 'none' : 'block',
+                            });
+                        }
+                        Object.assign($datepicker.style, {
+                            position: 'absolute',
+                            left: `${x}px`,
+                            top: `${y}px`,
+                            overflow: 'visible',
+                        });
+                    });
+                });
+            },
+            onHide: () => {
+                this.cleanupAutoUpdate?.();
+                this.openSubmenu(false);
+            },
             buttons: [
                 {
                     content: msg('Dnes'), // Button text
                     className: 'custom-today-btn', // Custom class (optional)
                     onClick: (dp) => {
-                        dp.selectDate(new Date()); // Select today's date
+                        this.handleSetOperator('=');
+                        dp.update({
+                            range: false,
+                            selectedDates: [new Date()],
+                        });
                     },
                 },
+                ...(this.server
+                    ? [
+                        {
+                            content: '<lit-icon icon="arrowLeft" size="1rem" style="margin-right: 0.5rem"></lit-icon> ' +
+                                msg('Rychlé volby'),
+                            className: 'custom-today-btn submenu-trigger',
+                            onClick: () => { },
+                        },
+                    ]
+                    : []),
             ],
             onSelect: ({ date, formattedDate, datepicker, }) => {
                 if (Array.isArray(date) && date.length === 2) {
-                    const from = DateTime.fromJSDate(new Date(date[0])).toUTC().toISO({
-                        suppressMilliseconds: false,
-                        includeOffset: false,
-                    });
-                    const to = DateTime.fromJSDate(new Date(date[1])).toUTC().toISO({
-                        suppressMilliseconds: false,
-                        includeOffset: false,
-                    });
-                    this.value = `${from},${to}`;
+                    const from = date[0].toISOString();
+                    const to = date[1].toISOString();
+                    this.value = [from, to];
                 }
                 else if (date instanceof Date) {
-                    this.value = DateTime.fromJSDate(new Date(date)).toUTC().toISO({
-                        suppressMilliseconds: false,
-                        includeOffset: false,
-                    });
+                    this.value = date.toISOString();
                 }
-                else {
+                else if ((Array.isArray(date) && date.length === 0) || !date) {
                     this.value = undefined;
                 }
-                this.handleDateSelection();
+                if (this.onChange) {
+                    this.onChange(this.value);
+                }
+                this.displayValue = formattedDate;
             },
         });
     }
     firstUpdated() {
+        this.reinitializeDatePicker();
         document.addEventListener('click', this.handleOutsideClick, { capture: true });
     }
-    handleDateSelection() {
-        if (this.onDateChange) {
-            this.onDateChange(this.value);
-        }
+    openSubmenu(open) {
+        this.isSubmenuOpen = open;
     }
     getLocale() {
         const lang = this.userLang || localStorage.getItem('userLang') || 'cs';
         return localizedDatePicker.get(lang);
     }
-    handleDateInput(event) {
-        const target = event.target;
-        const dateStr = target.value;
+    handleDateInput(dateStr) {
         const parsedDate = this._parseDate(dateStr);
         if (parsedDate) {
             // this.value = parsedDate;
             this.datePicker.selectDate(parsedDate);
         }
         if (dateStr === '') {
-            this.setOperator(getDefaultOperator('date'));
+            this.datePicker.clear();
         }
     }
     _parseDate(dateStr) {
         // Regular expressions for different date formats
         // Patterns for different formats
         const patterns = [
-            { regex: /^(\d{2})\.(\d{2})\.(\d{4})$/, format: 'dd.MM.yyyy' }, // dd.MM.yyyy
             { regex: /^(\d{1,2})\.(\d{1,2})\.(\d{4})$/, format: 'd.M.yyyy' }, // d.M.yyyy
-            { regex: /^(\d{2})\/(\d{2})\/(\d{4})$/, format: 'dd/MM/yyyy' }, // dd/MM/yyyy
+            { regex: /^(\d{2})\.(\d{2})\.(\d{4})$/, format: 'dd.MM.yyyy' }, // dd.MM.yyyy
             { regex: /^(\d{2})\/(\d{2})\/(\d{4})$/, format: 'MM/dd/yyyy' }, // MM/dd/yyyy
+            { regex: /^(\d{2})\/(\d{2})\/(\d{4})$/, format: 'dd/MM/yyyy' }, // dd/MM/yyyy
             { regex: /^(\d{4})-(\d{2})-(\d{2})$/, format: 'yyyy-MM-dd' }, // yyyy-MM-dd
+            // Ranges
+            {
+                regex: /^(\d{2})\.(\d{2})\.(\d{4})\s*-\s*(\d{2})\.(\d{2})\.(\d{4})$/,
+                format: 'dd.MM.yyyy - dd.MM.yyyy',
+            },
+            {
+                regex: /^(\d{1,2})\.(\d{1,2})\.(\d{4})\s*-\s*(\d{1,2})\.(\d{1,2})\.(\d{4})$/,
+                format: 'd.M.yyyy - d.M.yyyy',
+            },
+            {
+                regex: /^(\d{2})\/(\d{2})\/(\d{4})\s*-\s*(\d{2})\/(\d{2})\/(\d{4})$/,
+                format: 'MM/dd/yyyy - MM/dd/yyyy',
+            },
+            {
+                regex: /^(\d{2})\/(\d{2})\/(\d{4})\s*-\s*(\d{2})\/(\d{2})\/(\d{4})$/,
+                format: 'dd/MM/yyyy - dd/MM/yyyy',
+            },
+            {
+                regex: /^(\d{4})-(\d{2})-(\d{2})\s*-\s*(\d{4})-(\d{2})-(\d{2})$/,
+                format: 'yyyy-MM-dd - yyyy-MM-dd',
+            },
         ];
         for (const { regex, format } of patterns) {
             const match = dateStr.match(regex);
             if (match) {
-                return DateTime.fromFormat(dateStr, format).toJSDate();
+                // Handle ranges
+                if (format.includes(' - ')) {
+                    // Extract start and end dates from the match groups
+                    const startDateStr = match[0].split(' - ')[0];
+                    const endDateStr = match[0].split(' - ')[1];
+                    // Parse both start and end dates
+                    const startDate = DateTime.fromFormat(startDateStr, this.dateFormat || format.split(' - ')[0]).toJSDate();
+                    console.log('startDateStr', startDateStr);
+                    console.log(format.split(' - ')[0]);
+                    console.log('startDate', startDate);
+                    const endDate = DateTime.fromFormat(endDateStr, this.dateFormat || format.split(' - ')[1]).toJSDate();
+                    return [startDate, endDate];
+                }
+                else {
+                    // Single date match
+                    return DateTime.fromFormat(dateStr, this.dateFormat || format).toJSDate();
+                }
             }
         }
         return null;
     }
+    handleSetOperator(value) {
+        this.datePicker.update({
+            range: value === 'fromTo',
+            selectedDates: [],
+        }, { silent: true });
+        if (!['isEmpty', 'isNotEmpty'].includes(value)) {
+            // this.focus();
+            this.datePicker.show();
+        }
+        this.setOperator(value, { silent: true });
+    }
     focus() {
         const firstFocusable = this.shadowRoot?.querySelector('input');
         firstFocusable?.focus();
     }
-    clearValueOnOperatorChange(value) {
-        if (['isEmpty', 'isNotEmpty', 'fromTo'].includes(value) || this.operator === 'fromTo') {
-            this.value = undefined;
-            this.datePicker?.clear();
-        }
+    _handleClearButtonClick() {
+        this.datePicker.clear();
     }
     render() {
-        return html `
-            <div class="custom-icon-wrapper">
-                <input
-                    id="dateInput"
-                    class="inputs customCell"
-                    type="text"
-                    placeholder="${msg(this.placeholder)}"
-                    value="${this.value || ''}"
-                    @input="${this.handleDateInput}"
-                    .disabled="${this.disabled}"
-                />
-                <div
+        return html `
+            <div class="custom-icon-wrapper">
+                <input
+                    id="dateInput"
+                    class="inputs customCell"
+                    type="text"
+                    placeholder="${msg(this.placeholder)}"
+                    value="${this.displayValue || ''}"
+                    @input=${(e) => this.debouncedHandleInput(e.target.value)}
+                    .disabled="${this.disabled}"
+                />
+                <div
                     class=${classMap({
             'events-icon': true,
             'events-icon--no-filter': !this.server,
-        })}
+        })}
                     @click=${() => {
             this.datePicker.show();
-        }}
-                >
-                    <lit-icon-button
-                        icon="events"
-                        size="small"
-                        variant="text"
-                        .disabled="${this.disabled}"
-                    ></lit-icon-button>
-                </div>
-                ${this.value && !this.disableClearButton
-            ? html `
-                          <div
+        }}
+                >
+                    <lit-icon-button
+                        icon="events"
+                        size="small"
+                        variant="text"
+                        .disabled="${this.disabled}"
+                    ></lit-icon-button>
+                </div>
+                ${(!isEmpty(this.value) ||
+            this.operator === 'isEmpty' ||
+            this.operator === 'isNotEmpty') &&
+            !this.disableClearButton
+            ? html `
+                          <div
                               class=${classMap({
                 'clear-icon': true,
                 'clear-icon--no-filter': !this.server,
-            })}
+            })}
                               @click=${() => {
-                this.value = undefined;
-                this.datePicker.clear();
-                this.setOperator(getDefaultOperator('date'));
-            }}
-                          >
-                              <lit-icon-button
-                                  icon="close"
-                                  size="small"
-                                  variant="text"
-                              ></lit-icon-button>
-                          </div>
+                this._handleClearButtonClick();
+            }}
+                          >
+                              <lit-icon-button
+                                  icon="close"
+                                  size="small"
+                                  variant="text"
+                              ></lit-icon-button>
+                          </div>
                       `
-            : ''}
+            : ''}
                 ${this.server
-            ? html `<lit-data-grid-operators-popover
-                          class="filter-icon"
-                          .type="${'date'}"
+            ? html `<lit-data-grid-operators-popover
+                          class="filter-icon"
+                          .type="${'date'}"
                           .setOperator="${(value) => {
-                this.clearValueOnOperatorChange(value);
-                this.setOperator(value);
-            }}"
-                          .operator="${this.operator}"
+                this.handleSetOperator(value);
+            }}"
+                          .operator="${this.operator}"
                           @mousedown=${(e) => {
                 e.preventDefault();
                 e.stopPropagation();
-            }}
-                          .disabled="${this.disabled}"
+            }}
+                          .disabled="${this.disabled}"
+                          .filterOperators="${this.filterOperators}"
                       ></lit-data-grid-operators-popover>`
-            : null}
-            </div>
+            : null}
+            </div>
+            ${this.server
+            ? html `<simple-popper
+                      placement="left-end"
+                      manualOpening
+                      .offset="${0}"
+                      .target=${this.submenuTriggerEl}
+                      .showing=${this.isSubmenuOpen}
+                  >
+                      <lit-menu>
+                          <lit-menu-item
+                              icon="events"
+                              .onClick="${() => {
+                this.handleSetOperator('fromTo');
+                this.datePicker.update({
+                    range: true,
+                    selectedDates: [
+                        DateTime.now().minus({ days: 7 }).toJSDate(),
+                        new Date(),
+                    ],
+                });
+                this.isSubmenuOpen = false;
+            }}"
+                          >
+                              ${msg('Posledních 7 dní')}
+                          </lit-menu-item>
+                          <lit-menu-item
+                              icon="events"
+                              .onClick="${() => {
+                this.handleSetOperator('fromTo');
+                this.datePicker.update({
+                    range: true,
+                    selectedDates: [
+                        DateTime.now().minus({ days: 14 }).toJSDate(),
+                        new Date(),
+                    ],
+                });
+                this.isSubmenuOpen = false;
+            }}"
+                          >
+                              ${msg('Posledních 14 dní')}
+                          </lit-menu-item>
+                          <lit-menu-item
+                              icon="events"
+                              .onClick="${() => {
+                this.handleSetOperator('fromTo');
+                this.datePicker.update({
+                    range: true,
+                    selectedDates: [
+                        DateTime.now().minus({ days: 30 }).toJSDate(),
+                        new Date(),
+                    ],
+                });
+                this.isSubmenuOpen = false;
+            }}"
+                          >
+                              ${msg('Posledních 30 dní')}
+                          </lit-menu-item>
+                          <lit-menu-item
+                              icon="events"
+                              .onClick="${() => {
+                this.handleSetOperator('fromTo');
+                this.datePicker.update({
+                    range: true,
+                    selectedDates: [
+                        DateTime.now()
+                            .minus({ months: 1 })
+                            .startOf('month')
+                            .toJSDate(),
+                        new Date(),
+                    ],
+                });
+            }}"
+                          >
+                              ${msg('Poslední kalendářní měsíc')}
+                          </lit-menu-item>
+                          <lit-menu-item
+                              icon="events"
+                              .onClick="${() => {
+                this.handleSetOperator('fromTo');
+                const now = DateTime.now();
+                const currentQuarter = now.quarter;
+                const lastQuarterDate = now.minus({ quarters: 1 });
+                const startOfLastQuarter = lastQuarterDate.startOf('quarter');
+                const endOfLastQuarter = lastQuarterDate.endOf('quarter');
+                this.datePicker.update({
+                    range: true,
+                    selectedDates: [
+                        startOfLastQuarter.toJSDate(),
+                        endOfLastQuarter.toJSDate(),
+                    ],
+                });
+            }}"
+                          >
+                              ${msg('Poslední kvartál')}
+                          </lit-menu-item>
+                          <lit-menu-item
+                              icon="events"
+                              .onClick="${() => {
+                this.handleSetOperator('fromTo');
+                this.datePicker.update({
+                    range: true,
+                    selectedDates: [
+                        DateTime.now().minus({ months: 12 }).toJSDate(),
+                        new Date(),
+                    ],
+                });
+            }}"
+                          >
+                              ${msg('Poslední 12 měsíců')}
+                          </lit-menu-item>
+                          <lit-menu-item
+                              icon="events"
+                              .onClick="${() => {
+                this.handleSetOperator('fromTo');
+                this.datePicker.update({
+                    range: true,
+                    selectedDates: [
+                        DateTime.now().startOf('year').toJSDate(),
+                        DateTime.now().endOf('year').toJSDate(),
+                    ],
+                });
+            }}"
+                          >
+                              ${msg('Poslední kalendářní rok')}
+                          </lit-menu-item>
+                      </lit-menu>
+                  </simple-popper>`
+            : ''}
         `;
     }
 };
-LitDatePicker.styles = css `
-        .custom-icon-wrapper {
-            position: relative;
-            width: 100%;
-            display: inline-block;
-        }
-
-        input {
-            padding: 0.5rem 0.75rem 0.5rem 0.75rem;
-            border: 0.0625rem solid var(--color-divider, #d0d3db);
-            border-radius: 0.25rem;
-            min-width: 0;
-            width: -webkit-fill-available;
-        }
-
-        input:hover {
-            border: 0.0625rem solid var(--color-secondary-main, #111827);
-        }
-
-        input:focus {
-            outline: none;
-            border: 0.0625rem solid var(--color-secondary-dark, #010204);
-        }
-
-        .custom-icon-wrapper .clear-icon {
-            display: none;
-            position: absolute;
-            right: 56px;
-            top: 50%;
-            transform: translateY(-50%);
-            cursor: pointer;
-            pointer-events: auto;
-        }
-
-        .custom-icon-wrapper .clear-icon--no-filter {
-            right: 33px;
-        }
-
-        .custom-icon-wrapper:hover .clear-icon {
-            display: inline-block;
-        }
-
-        .custom-icon-wrapper .events-icon {
-            position: absolute;
-            right: 33px;
-            top: 50%;
-            transform: translateY(-50%);
-            z-index: 0;
-            cursor: pointer;
-            pointer-events: auto;
-        }
-
-        .custom-icon-wrapper .events-icon--no-filter {
-            right: 10px;
-        }
-
-        .custom-icon-wrapper .filter-icon {
-            display: block;
-            position: absolute;
-            right: 10px;
-            top: 50%;
-            transform: translateY(-50%);
-            cursor: pointer;
-            pointer-events: auto;
-        }
+LitDatePicker.styles = css `
+        .custom-icon-wrapper {
+            position: relative;
+            width: 100%;
+            display: inline-block;
+        }
+
+        input {
+            padding: 0.5rem;
+            border: 0.0625rem solid var(--color-divider, #d0d3db);
+            border-radius: 0.25rem;
+            min-width: 0;
+            width: -webkit-fill-available;
+            width: -moz-available;
+            width: fill-available;
+            background-color: var(--background-paper, #fff);
+            color: var(--text-primary, #111827);
+        }
+
+        input:hover:not(:disabled) {
+            border: 0.0625rem solid var(--color-secondary-main, #111827);
+        }
+        input:disabled {
+            background-color: var(--background-paper, #fff);
+            cursor: not-allowed;
+        }
+        input:focus {
+            outline: none;
+            border: 0.0625rem solid var(--color-secondary-dark, #010204);
+        }
+
+        .custom-icon-wrapper .clear-icon {
+            display: none;
+            position: absolute;
+            right: 56px;
+            top: 50%;
+            transform: translateY(-50%);
+            cursor: pointer;
+            pointer-events: auto;
+        }
+
+        .custom-icon-wrapper .clear-icon--no-filter {
+            right: 33px;
+        }
+
+        .custom-icon-wrapper:hover .clear-icon {
+            display: inline-block;
+        }
+
+        .custom-icon-wrapper .events-icon {
+            position: absolute;
+            right: 33px;
+            top: 50%;
+            transform: translateY(-50%);
+            z-index: 0;
+            cursor: pointer;
+            pointer-events: auto;
+        }
+
+        .custom-icon-wrapper .events-icon--no-filter {
+            right: 10px;
+        }
+
+        .custom-icon-wrapper .filter-icon {
+            display: block;
+            position: absolute;
+            right: 10px;
+            top: 50%;
+            transform: translateY(-50%);
+            cursor: pointer;
+            pointer-events: auto;
+        }
     `;
-__decorate([
-    property({ type: Object })
-], LitDatePicker.prototype, "column", void 0);
 __decorate([
     property({ type: String })
 ], LitDatePicker.prototype, "dateFormat", void 0);
+__decorate([
+    property({ type: String })
+], LitDatePicker.prototype, "pickerVariant", void 0);
+__decorate([
+    property({ type: String })
+], LitDatePicker.prototype, "value", void 0);
 __decorate([
     property({ type: String })
 ], LitDatePicker.prototype, "userLang", void 0);
@@ -309,7 +565,7 @@ __decorate([
 ], LitDatePicker.prototype, "placeholder", void 0);
 __decorate([
     property({ type: Function })
-], LitDatePicker.prototype, "onDateChange", void 0);
+], LitDatePicker.prototype, "onChange", void 0);
 __decorate([
     property({ type: Boolean })
 ], LitDatePicker.prototype, "disableClearButton", void 0);
@@ -329,14 +585,20 @@ __decorate([
     property({ type: Function })
 ], LitDatePicker.prototype, "setOperator", void 0);
 __decorate([
-    state()
-], LitDatePicker.prototype, "value", void 0);
+    property({ type: Array })
+], LitDatePicker.prototype, "filterOperators", void 0);
 __decorate([
     state()
-], LitDatePicker.prototype, "filterVariant", void 0);
+], LitDatePicker.prototype, "displayValue", void 0);
 __decorate([
     query('#dateInput')
 ], LitDatePicker.prototype, "dateInputEl", void 0);
+__decorate([
+    state()
+], LitDatePicker.prototype, "isSubmenuOpen", void 0);
+__decorate([
+    query('simple-popper')
+], LitDatePicker.prototype, "simplePopperEl", void 0);
 LitDatePicker = __decorate([
     customElement('lit-date-picker')
 ], LitDatePicker);