@everymatrix/helper-filters 0.1.2 → 0.1.4

package/dist/components/helper-filters.js

@@ -14,7 +14,8 @@ const TRANSLATIONS = {
     filterDateRangePlaceholder: 'Date Range',
     filterModalButton: 'Search',
     filterFromCalendar: 'From',
-    filterToCalendar: 'To'
+    filterToCalendar: 'To',
+    filterOrDate: 'or search by date'
   },
   ro: {
     filterOpen: 'Filtrare',
@@ -24,7 +25,8 @@ const TRANSLATIONS = {
     filterTicketPlaceholder: 'Cauta ID bilet',
     filterDrawPlaceholder: 'Cauta ID draw',
     filterDateRangePlaceholder: 'Perioada',
-    filterModalButton: 'Cauta'
+    filterModalButton: 'Cauta',
+    filterOrDate: 'sau cauta dupa data'
   },
 };
 const translate$1 = (key, customLang) => {
@@ -39,7 +41,7 @@ const translate$1 = (key, customLang) => {
  */
 class Lumo extends HTMLElement {
   static get version() {
-    return '23.1.5';
+    return '23.2.0';
   }
 }
 
@@ -95,7 +97,7 @@ const ThemePropertyMixin = (superClass) =>
          * **NOTE:** Extending the mixin only provides the property for binding,
          * and does not make the propagation alone.
          *
-         * See [Styling Components: Sub-components](https://vaadin.com/docs/latest/ds/customization/styling-components/#sub-components).
+         * See [Styling Components: Sub-components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components/#sub-components).
          * page for more information.
          *
          * @deprecated The `theme` property is not supposed for public use and will be dropped in Vaadin 24.
@@ -120,7 +122,7 @@ const ThemePropertyMixin = (superClass) =>
          * **NOTE:** Extending the mixin only provides the property for binding,
          * and does not make the propagation alone.
          *
-         * See [Styling Components: Sub-components](https://vaadin.com/docs/latest/ds/customization/styling-components/#sub-components).
+         * See [Styling Components: Sub-components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components/#sub-components).
          * page for more information.
          *
          * @protected
@@ -225,9 +227,9 @@ function matchesThemeFor(themeFor, tagName) {
  */
 function getIncludePriority(moduleName = '') {
   let includePriority = 0;
-  if (moduleName.indexOf('lumo-') === 0 || moduleName.indexOf('material-') === 0) {
+  if (moduleName.startsWith('lumo-') || moduleName.startsWith('material-')) {
     includePriority = 1;
-  } else if (moduleName.indexOf('vaadin-') === 0) {
+  } else if (moduleName.startsWith('vaadin-')) {
     includePriority = 2;
   }
   return includePriority;
@@ -10112,6 +10114,38 @@ const ControllerMixin = dedupingMixin(
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
+// We consider the keyboard to be active if the window has received a keydown
+// event since the last mousedown event.
+let keyboardActive = false;
+
+// Listen for top-level keydown and mousedown events.
+// Use capture phase so we detect events even if they're handled.
+window.addEventListener(
+  'keydown',
+  () => {
+    keyboardActive = true;
+  },
+  { capture: true },
+);
+
+window.addEventListener(
+  'mousedown',
+  () => {
+    keyboardActive = false;
+  },
+  { capture: true },
+);
+
+/**
+ * Returns true if the window has received a keydown
+ * event since the last mousedown event.
+ *
+ * @return {boolean}
+ */
+function isKeyboardActive() {
+  return keyboardActive;
+}
+
 /**
  * Returns true if the element is hidden directly with `display: none` or `visibility: hidden`,
  * false otherwise.
@@ -10552,7 +10586,7 @@ class FocusTrapController {
  * ---|---|---
  * `--vaadin-overlay-viewport-bottom` | Bottom offset of the visible viewport area | `0` or detected offset
  *
- * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
  *
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  * @fires {CustomEvent} vaadin-overlay-open - Fired after the overlay is opened.
@@ -12822,7 +12856,7 @@ const registered = new Set();
 const ElementMixin = (superClass) =>
   class VaadinElementMixin extends DirMixin(superClass) {
     static get version() {
-      return '23.1.5';
+      return '23.2.0';
     }
 
     /** @protected */
@@ -13120,7 +13154,7 @@ function _handleNative(ev) {
   }
   if (!ev[HANDLED_OBJ]) {
     ev[HANDLED_OBJ] = {};
-    if (type.slice(0, 5) === 'touch') {
+    if (type.startsWith('touch')) {
       const t = ev.changedTouches[0];
       if (type === 'touchstart') {
         // Only handle the first finger
@@ -13979,28 +14013,6 @@ const ActiveMixin = (superclass) =>
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
-// We consider the keyboard to be active if the window has received a keydown
-// event since the last mousedown event.
-let keyboardActive = false;
-
-// Listen for top-level keydown and mousedown events.
-// Use capture phase so we detect events even if they're handled.
-window.addEventListener(
-  'keydown',
-  () => {
-    keyboardActive = true;
-  },
-  { capture: true },
-);
-
-window.addEventListener(
-  'mousedown',
-  () => {
-    keyboardActive = false;
-  },
-  { capture: true },
-);
-
 /**
  * A mixin to handle `focused` and `focus-ring` attributes based on focus.
  *
@@ -14014,7 +14026,7 @@ const FocusMixin = dedupingMixin(
        * @return {boolean}
        */
       get _keyboardActive() {
-        return keyboardActive;
+        return isKeyboardActive();
       }
 
       /** @protected */
@@ -14278,7 +14290,7 @@ const ButtonMixin = (superClass) =>
  * `focus-ring` | Set when the button is focused using the keyboard.
  * `focused`    | Set when the button is focused.
  *
- * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
  *
  * @extends HTMLElement
  * @mixes ButtonMixin
@@ -14360,7 +14372,6 @@ registerStyles(
   i$1`
     :host {
       position: relative;
-      background-color: transparent;
       /* Background for the year scroller, placed here as we are using a mask image on the actual years part */
       background-image: linear-gradient(var(--lumo-shade-5pct), var(--lumo-shade-5pct));
       background-size: 57px 100%;
@@ -14468,17 +14479,10 @@ registerStyles(
 
     [part='toolbar'] {
       padding: var(--lumo-space-s);
-      box-shadow: 0 -1px 0 0 var(--lumo-contrast-10pct);
       border-bottom-left-radius: var(--lumo-border-radius-l);
       margin-right: 57px;
     }
 
-    @supports (mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000)) {
-      [part='toolbar'] {
-        box-shadow: none;
-      }
-    }
-
     /* Today and Cancel buttons */
 
     [part='toolbar'] [part\$='button'] {
@@ -14511,8 +14515,6 @@ registerStyles(
     /* Very narrow screen (year scroller initially hidden) */
 
     [part='years-toggle-button'] {
-      position: relative;
-      right: auto;
       display: flex;
       align-items: center;
       height: var(--lumo-size-s);
@@ -14530,10 +14532,6 @@ registerStyles(
       color: var(--lumo-primary-contrast-color);
     }
 
-    [part='years-toggle-button']::before {
-      content: none;
-    }
-
     /* TODO magic number (same as used for iron-media-query in vaadin-date-picker-overlay-content) */
     @media screen and (max-width: 374px) {
       :host {
@@ -14709,9 +14707,9 @@ registerStyles(
   { moduleId: 'lumo-month-calendar' },
 );
 
-const $_documentContainer$1 = document.createElement('template');
+const template$1 = document.createElement('template');
 
-$_documentContainer$1.innerHTML = `
+template$1.innerHTML = `
   <style>
     @keyframes vaadin-date-picker-month-calendar-focus-date {
       50% {
@@ -14721,7 +14719,7 @@ $_documentContainer$1.innerHTML = `
   </style>
 `;
 
-document.head.appendChild($_documentContainer$1.content);
+document.head.appendChild(template$1.content);
 
 /**
  * @license
@@ -14729,9 +14727,9 @@ document.head.appendChild($_documentContainer$1.content);
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
-const $_documentContainer = document.createElement('template');
+const template = document.createElement('template');
 
-$_documentContainer.innerHTML = `
+template.innerHTML = `
   <style>
     @font-face {
       font-family: 'lumo-icons';
@@ -14787,7 +14785,7 @@ $_documentContainer.innerHTML = `
   </style>
 `;
 
-document.head.appendChild($_documentContainer.content);
+document.head.appendChild(template.content);
 
 /**
  * @license
@@ -15354,6 +15352,57 @@ function getAncestorRootNodes(node) {
   return result;
 }
 
+/**
+ * @param {string} value
+ * @return {Set<string>}
+ */
+function deserializeAttributeValue(value) {
+  if (!value) {
+    return new Set();
+  }
+
+  return new Set(value.split(' '));
+}
+
+/**
+ * @param {Set<string>} values
+ * @return {string}
+ */
+function serializeAttributeValue(values) {
+  return [...values].join(' ');
+}
+
+/**
+ * Adds a value to an attribute containing space-delimited values.
+ *
+ * @param {HTMLElement} element
+ * @param {string} attr
+ * @param {string} value
+ */
+function addValueToAttribute(element, attr, value) {
+  const values = deserializeAttributeValue(element.getAttribute(attr));
+  values.add(value);
+  element.setAttribute(attr, serializeAttributeValue(values));
+}
+
+/**
+ * Removes a value from an attribute containing space-delimited values.
+ * If the value is the last one, the whole attribute is removed.
+ *
+ * @param {HTMLElement} element
+ * @param {string} attr
+ * @param {string} value
+ */
+function removeValueFromAttribute(element, attr, value) {
+  const values = deserializeAttributeValue(element.getAttribute(attr));
+  values.delete(value);
+  if (values.size === 0) {
+    element.removeAttribute(attr);
+    return;
+  }
+  element.setAttribute(attr, serializeAttributeValue(values));
+}
+
 /**
  * @license
  * Copyright (c) 2017 - 2022 Vaadin Ltd.
@@ -17078,7 +17127,9 @@ class MonthCalendar extends FocusMixin(ThemableMixin(PolymerElement)) {
 
   _onMonthGridTouchStart() {
     this._notTapping = false;
-    setTimeout(() => (this._notTapping = true), 300);
+    setTimeout(() => {
+      this._notTapping = true;
+    }, 300);
   }
 
   _dateAdd(date, delta) {
@@ -17413,7 +17464,7 @@ class InfiniteScroller extends PolymerElement {
       // Once the first set of items start fading in, stamp the rest
       this._buffers.forEach((buffer) => {
         [].forEach.call(buffer.children, (insertionPoint) => this._ensureStampedInstance(insertionPoint._itemWrapper));
-      }, this);
+      });
 
       if (!this._buffers[0].translateY) {
         this._reset();
@@ -17576,7 +17627,7 @@ class InfiniteScroller extends PolymerElement {
           }
         }, 1); // Wait for first reset
       }
-    }, this);
+    });
 
     setTimeout(() => {
       afterNextRender(this, this._finishInit.bind(this));
@@ -17614,7 +17665,7 @@ class InfiniteScroller extends PolymerElement {
         });
         buffer.updated = true;
       }
-    }, this);
+    });
   }
 
   _isVisible(element, container) {
@@ -17713,7 +17764,6 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
           height: 100%;
           width: 100%;
           outline: none;
-          background: #fff;
         }
 
         [part='overlay-header'] {
@@ -17731,22 +17781,14 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
           flex-grow: 1;
         }
 
-        [part='clear-button']:not([showclear]) {
-          display: none;
+        [hidden] {
+          display: none !important;
         }
 
         [part='years-toggle-button'] {
           display: flex;
         }
 
-        [part='years-toggle-button'][desktop] {
-          display: none;
-        }
-
-        :host(:not([years-visible])) [part='years-toggle-button']::before {
-          transform: rotate(180deg);
-        }
-
         #scrollers {
           display: flex;
           height: 100%;
@@ -17820,27 +17862,14 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
           z-index: 2;
           flex-shrink: 0;
         }
-
-        [part~='overlay-header']:not([desktop]) {
-          padding-bottom: 40px;
-        }
-
-        [part~='years-toggle-button'] {
-          position: absolute;
-          top: auto;
-          right: 8px;
-          bottom: 0;
-          z-index: 1;
-          padding: 8px;
-        }
       </style>
 
       <div part="overlay-header" on-touchend="_preventDefault" desktop$="[[_desktopMode]]" aria-hidden="true">
         <div part="label">[[_formatDisplayed(selectedDate, i18n.formatDate, label)]]</div>
-        <div part="clear-button" showclear$="[[_showClear(selectedDate)]]"></div>
+        <div part="clear-button" hidden$="[[!selectedDate]]"></div>
         <div part="toggle-button"></div>
 
-        <div part="years-toggle-button" desktop$="[[_desktopMode]]" aria-hidden="true">
+        <div part="years-toggle-button" hidden$="[[_desktopMode]]" aria-hidden="true">
           [[_yearAfterXMonths(_visibleMonthIndex)]]
         </div>
       </div>
@@ -17926,6 +17955,7 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
        */
       selectedDate: {
         type: Date,
+        value: null,
       },
 
       /**
@@ -18001,10 +18031,12 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
     return this.getAttribute('dir') === 'rtl';
   }
 
+  get calendars() {
+    return [...this.shadowRoot.querySelectorAll('vaadin-month-calendar')];
+  }
+
   get focusableDateElement() {
-    return [...this.shadowRoot.querySelectorAll('vaadin-month-calendar')]
-      .map((calendar) => calendar.focusableDateElement)
-      .find(Boolean);
+    return this.calendars.map((calendar) => calendar.focusableDateElement).find(Boolean);
   }
 
   ready() {
@@ -18012,7 +18044,6 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
 
     this.setAttribute('role', 'dialog');
 
-    addListener(this, 'tap', this._stopPropagation);
     addListener(this.$.scrollers, 'track', this._track.bind(this));
     addListener(this.shadowRoot.querySelector('[part="clear-button"]'), 'tap', this._clear.bind(this));
     addListener(this.shadowRoot.querySelector('[part="today-button"]'), 'tap', this._onTodayTap.bind(this));
@@ -18134,7 +18165,9 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
 
   _onYearScrollTouchStart() {
     this._notTapping = false;
-    setTimeout(() => (this._notTapping = true), 300);
+    setTimeout(() => {
+      this._notTapping = true;
+    }, 300);
 
     this._repositionMonthScroller();
   }
@@ -18145,7 +18178,9 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
 
   _doIgnoreTaps() {
     this._ignoreTaps = true;
-    this._debouncer = Debouncer$1.debounce(this._debouncer, timeOut.after(300), () => (this._ignoreTaps = false));
+    this._debouncer = Debouncer$1.debounce(this._debouncer, timeOut.after(300), () => {
+      this._ignoreTaps = false;
+    });
   }
 
   _formatDisplayed(date, formatDate, label) {
@@ -18176,10 +18211,6 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
     this.scrollToDate(new Date(), true);
   }
 
-  _showClear(selectedDate) {
-    return !!selectedDate;
-  }
-
   _onYearTap(e) {
     if (!this._ignoreTaps && !this._notTapping) {
       const scrollDelta =
@@ -18205,6 +18236,11 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
 
     this._targetPosition = targetPosition;
 
+    let revealResolve;
+    this._revealPromise = new Promise((resolve) => {
+      revealResolve = resolve;
+    });
+
     // http://gizma.com/easing/
     const easingFunction = (t, b, c, d) => {
       t /= d / 2;
@@ -18245,7 +18281,9 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
 
         this.$.monthScroller.position = this._targetPosition;
         this._targetPosition = undefined;
-        this.__tryFocusDate();
+
+        revealResolve();
+        this._revealPromise = undefined;
       }
 
       setTimeout(this._repositionYearScroller.bind(this), 1);
@@ -18455,51 +18493,44 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
     switch (section) {
       case 'calendar':
         if (event.shiftKey) {
-          // Return focus back to the input field.
           event.preventDefault();
-          this.__focusInput();
+
+          if (this.hasAttribute('fullscreen')) {
+            // Trap focus in the overlay
+            this.$.cancelButton.focus();
+          } else {
+            this.__focusInput();
+          }
         }
         break;
       case 'today':
         if (event.shiftKey) {
-          // Browser returns focus back to the calendar.
-          // We need to move the scroll to focused date.
-          setTimeout(() => this.revealDate(this.focusedDate), 1);
+          event.preventDefault();
+          this.focusDateElement();
         }
         break;
       case 'cancel':
         if (!event.shiftKey) {
-          // Return focus back to the input field.
           event.preventDefault();
-          this.__focusInput();
+
+          if (this.hasAttribute('fullscreen')) {
+            // Trap focus in the overlay
+            this.focusDateElement();
+          } else {
+            this.__focusInput();
+          }
         }
         break;
     }
   }
 
   __onTodayButtonKeyDown(event) {
-    if (this.hasAttribute('fullscreen')) {
-      // Do not prevent closing on Esc
-      if (event.key !== 'Escape') {
-        event.stopPropagation();
-      }
-      return;
-    }
-
     if (event.key === 'Tab') {
       this._onTabKeyDown(event, 'today');
     }
   }
 
   __onCancelButtonKeyDown(event) {
-    if (this.hasAttribute('fullscreen')) {
-      // Do not prevent closing on Esc
-      if (event.key !== 'Escape') {
-        event.stopPropagation();
-      }
-      return;
-    }
-
     if (event.key === 'Tab') {
       this._onTabKeyDown(event, 'cancel');
     }
@@ -18528,15 +18559,29 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
     if (!keepMonth) {
       this._focusedMonthDate = dateToFocus.getDate();
     }
-    await this.focusDateElement();
+    await this.focusDateElement(false);
   }
 
-  async focusDateElement() {
+  async focusDateElement(reveal = true) {
     this.__pendingDateFocus = this.focusedDate;
 
-    await new Promise((resolve) => {
-      requestAnimationFrame(resolve);
-    });
+    // Wait for `vaadin-month-calendar` elements to be rendered
+    if (!this.calendars.length) {
+      await new Promise((resolve) => {
+        setTimeout(resolve);
+      });
+    }
+
+    // Reveal focused date unless it has been just set,
+    // which triggers `revealDate()` in the observer.
+    if (reveal) {
+      this.revealDate(this.focusedDate);
+    }
+
+    if (this._revealPromise) {
+      // Wait for focused date to be scrolled into view.
+      await this._revealPromise;
+    }
 
     this.__tryFocusDate();
   }
@@ -18634,10 +18679,6 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
     todayMidnight.setDate(today.getDate());
     return this._dateAllowed(todayMidnight, min, max);
   }
-
-  _stopPropagation(e) {
-    e.stopPropagation();
-  }
 }
 
 customElements.define(DatePickerOverlayContent.is, DatePickerOverlayContent);
@@ -18868,6 +18909,24 @@ const DelegateFocusMixin = dedupingMixin(
     },
 );
 
+/**
+ * @license
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+let uniqueId = 0;
+
+/**
+ * Returns a unique integer id.
+ *
+ * @return {number}
+ */
+function generateUniqueId() {
+  // eslint-disable-next-line no-plusplus
+  return uniqueId++;
+}
+
 /**
  * @license
  * Copyright (c) 2021 - 2022 Vaadin Ltd.
@@ -18888,24 +18947,21 @@ class SlotController extends EventTarget {
    */
   static generateId(slotName, host) {
     const prefix = slotName || 'default';
-
-    // Support dash-case slot names e.g. "error-message"
-    const field = `${dashToCamelCase(prefix)}Id`;
-
-    // Maintain the unique ID counter for a given prefix.
-    this[field] = 1 + this[field] || 0;
-
-    return `${prefix}-${host.localName}-${this[field]}`;
+    return `${prefix}-${host.localName}-${generateUniqueId()}`;
   }
 
-  constructor(host, slotName, slotFactory, slotInitializer) {
+  constructor(host, slotName, slotFactory, slotInitializer, useUniqueId) {
     super();
 
     this.host = host;
     this.slotName = slotName;
     this.slotFactory = slotFactory;
     this.slotInitializer = slotInitializer;
-    this.defaultId = SlotController.generateId(slotName, host);
+
+    // Only generate the default ID if requested by the controller.
+    if (useUniqueId) {
+      this.defaultId = SlotController.generateId(slotName, host);
+    }
   }
 
   hostConnected() {
@@ -19060,6 +19116,7 @@ class ErrorController extends SlotController {
 
         this.__updateHasError();
       },
+      true,
     );
   }
 
@@ -19174,63 +19231,6 @@ class ErrorController extends SlotController {
   }
 }
 
-/**
- * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-/**
- * @param {string} value
- * @return {Set<string>}
- */
-function deserializeAttributeValue(value) {
-  if (!value) {
-    return new Set();
-  }
-
-  return new Set(value.split(' '));
-}
-
-/**
- * @param {Set<string>} values
- * @return {string}
- */
-function serializeAttributeValue(values) {
-  return [...values].join(' ');
-}
-
-/**
- * Adds a value to an attribute containing space-delimited values.
- *
- * @param {HTMLElement} element
- * @param {string} attr
- * @param {string} value
- */
-function addValueToAttribute(element, attr, value) {
-  const values = deserializeAttributeValue(element.getAttribute(attr));
-  values.add(value);
-  element.setAttribute(attr, serializeAttributeValue(values));
-}
-
-/**
- * Removes a value from an attribute containing space-delimited values.
- * If the value is the last one, the whole attribute is removed.
- *
- * @param {HTMLElement} element
- * @param {string} attr
- * @param {string} value
- */
-function removeValueFromAttribute(element, attr, value) {
-  const values = deserializeAttributeValue(element.getAttribute(attr));
-  values.delete(value);
-  if (values.size === 0) {
-    element.removeAttribute(attr);
-    return;
-  }
-  element.setAttribute(attr, serializeAttributeValue(values));
-}
-
 /**
  * @license
  * Copyright (c) 2021 - 2022 Vaadin Ltd.
@@ -19405,7 +19405,7 @@ class FieldAriaController {
 
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
@@ -19415,7 +19415,7 @@ class FieldAriaController {
 class HelperController extends SlotController {
   constructor(host) {
     // Do not provide slot factory, as only create helper lazily.
-    super(host, 'helper');
+    super(host, 'helper', null, null, true);
   }
 
   get helperId() {
@@ -19612,6 +19612,7 @@ class LabelController extends SlotController {
 
         this.__observeLabel(node);
       },
+      true,
     );
   }
 
@@ -19818,6 +19819,12 @@ const LabelMixin = dedupingMixin(
         super();
 
         this._labelController = new LabelController(this);
+      }
+
+      /** @protected */
+      ready() {
+        super.ready();
+
         this.addController(this._labelController);
       }
 
@@ -19865,12 +19872,17 @@ const ValidateMixin = dedupingMixin(
       }
 
       /**
-       * Returns true if field is valid, and sets `invalid` based on the field validity.
+       * Validates the field and sets the `invalid` property based on the result.
+       *
+       * The method fires a `validated` event with the result of the validation.
        *
        * @return {boolean} True if the value is valid.
        */
       validate() {
-        return !(this.invalid = !this.checkValidity());
+        const isValid = this.checkValidity();
+        this._setInvalid(!isValid);
+        this.dispatchEvent(new CustomEvent('validated', { detail: { valid: isValid } }));
+        return isValid;
       }
 
       /**
@@ -19881,6 +19893,35 @@ const ValidateMixin = dedupingMixin(
       checkValidity() {
         return !this.required || !!this.value;
       }
+
+      /**
+       * @param {boolean} invalid
+       * @protected
+       */
+      _setInvalid(invalid) {
+        if (this._shouldSetInvalid(invalid)) {
+          this.invalid = invalid;
+        }
+      }
+
+      /**
+       * Override this method to define whether the given `invalid` state should be set.
+       *
+       * @param {boolean} _invalid
+       * @return {boolean}
+       * @protected
+       */
+      _shouldSetInvalid(_invalid) {
+        return true;
+      }
+
+      /**
+       * Fired whenever the field is validated.
+       *
+       * @event validated
+       * @param {Object} detail
+       * @param {boolean} detail.valid the result of the validation.
+       */
     },
 );
 
@@ -19969,10 +20010,6 @@ const FieldMixin = (superclass) =>
       this._helperController = new HelperController(this);
       this._errorController = new ErrorController(this);
 
-      this.addController(this._fieldAriaController);
-      this.addController(this._helperController);
-      this.addController(this._errorController);
-
       this._labelController.addEventListener('label-changed', (event) => {
         const { hasLabel, node } = event.detail;
         this.__labelChanged(hasLabel, node);
@@ -19984,6 +20021,15 @@ const FieldMixin = (superclass) =>
       });
     }
 
+    /** @protected */
+    ready() {
+      super.ready();
+
+      this.addController(this._fieldAriaController);
+      this.addController(this._helperController);
+      this.addController(this._errorController);
+    }
+
     /** @private */
     __helperChanged(hasHelper, helperNode) {
       if (hasHelper) {
@@ -20039,7 +20085,7 @@ const FieldMixin = (superclass) =>
     }
 
     /**
-     * @param {boolean} required
+     * @param {boolean} invalid
      * @protected
      */
     _invalidChanged(invalid) {
@@ -20239,13 +20285,23 @@ const InputMixin = dedupingMixin(
             observer: '_valueChanged',
             notify: true,
           },
+
+          /**
+           * When true, the input element has a non-empty value entered by the user.
+           * @protected
+           */
+          _hasInputValue: {
+            type: Boolean,
+            value: false,
+            observer: '_hasInputValueChanged',
+          },
         };
       }
 
       constructor() {
         super();
 
-        this._boundOnInput = this._onInput.bind(this);
+        this._boundOnInput = this.__onInput.bind(this);
         this._boundOnChange = this._onChange.bind(this);
       }
 
@@ -20260,6 +20316,7 @@ const InputMixin = dedupingMixin(
        * Add event listeners to the input element instance.
        * Override this method to add custom listeners.
        * @param {!HTMLElement} input
+       * @protected
        */
       _addInputListeners(input) {
         input.addEventListener('input', this._boundOnInput);
@@ -20269,6 +20326,7 @@ const InputMixin = dedupingMixin(
       /**
        * Remove event listeners from the input element instance.
        * @param {!HTMLElement} input
+       * @protected
        */
       _removeInputListeners(input) {
         input.removeEventListener('input', this._boundOnInput);
@@ -20282,7 +20340,6 @@ const InputMixin = dedupingMixin(
        * for example to skip this in certain conditions.
        * @param {string} value
        * @protected
-       * @override
        */
       _forwardInputValue(value) {
         // Value might be set before an input element is initialized.
@@ -20299,7 +20356,11 @@ const InputMixin = dedupingMixin(
         }
       }
 
-      /** @protected */
+      /**
+       * @param {HTMLElement | undefined} input
+       * @param {HTMLElement | undefined} oldInput
+       * @protected
+       */
       _inputElementChanged(input, oldInput) {
         if (input) {
           this._addInputListeners(input);
@@ -20308,17 +20369,47 @@ const InputMixin = dedupingMixin(
         }
       }
 
+      /**
+       * Observer to notify about the change of private property.
+       *
+       * @private
+       */
+      _hasInputValueChanged(hasValue, oldHasValue) {
+        if (hasValue || oldHasValue) {
+          this.dispatchEvent(new CustomEvent('has-input-value-changed'));
+        }
+      }
+
+      /**
+       * An input event listener used to update `_hasInputValue` property.
+       * Do not override this method.
+       *
+       * @param {Event} event
+       * @private
+       */
+      __onInput(event) {
+        // In the case a custom web component is passed as `inputElement`,
+        // the actual native input element, on which the event occurred,
+        // can be inside shadow trees.
+        const target = event.composedPath()[0];
+        this._hasInputValue = target.value.length > 0;
+        this._onInput(event);
+      }
+
       /**
        * An input event listener used to update the field value.
-       * Override this method with an actual implementation.
-       * @param {Event} _event
+       *
+       * @param {Event} event
        * @protected
-       * @override
        */
       _onInput(event) {
+        // In the case a custom web component is passed as `inputElement`,
+        // the actual native input element, on which the event occurred,
+        // can be inside shadow trees.
+        const target = event.composedPath()[0];
         // Ignore fake input events e.g. used by clear button.
         this.__userInput = event.isTrusted;
-        this.value = event.target.value;
+        this.value = target.value;
         this.__userInput = false;
       }
 
@@ -20327,12 +20418,12 @@ const InputMixin = dedupingMixin(
        * Override this method with an actual implementation.
        * @param {Event} _event
        * @protected
-       * @override
        */
       _onChange(_event) {}
 
       /**
        * Toggle the has-value attribute based on the value property.
+       *
        * @param {boolean} hasValue
        * @protected
        */
@@ -20345,10 +20436,9 @@ const InputMixin = dedupingMixin(
        * @param {string | undefined} newVal
        * @param {string | undefined} oldVal
        * @protected
-       * @override
        */
       _valueChanged(newVal, oldVal) {
-        this._toggleHasValue(newVal !== '' && newVal != null);
+        this._toggleHasValue(this._hasValue);
 
         // Setting initial value to empty string, do nothing.
         if (newVal === '' && oldVal === undefined) {
@@ -20363,6 +20453,16 @@ const InputMixin = dedupingMixin(
         // Setting a value programmatically, sync it to input element.
         this._forwardInputValue(newVal);
       }
+
+      /**
+       * Indicates whether the value is different from the default one.
+       * Override if the `value` property has a type other than `string`.
+       *
+       * @protected
+       */
+      get _hasValue() {
+        return this.value != null && this.value !== '';
+      }
     },
 );
 
@@ -20434,26 +20534,32 @@ const InputConstraintsMixin = dedupingMixin(
       _createConstraintsObserver() {
         // This complex observer needs to be added dynamically instead of using `static get observers()`
         // to make it possible to tweak this behavior in classes that apply this mixin.
-        this._createMethodObserver(`_constraintsChanged(${this.constructor.constraints.join(', ')})`);
+        this._createMethodObserver(`_constraintsChanged(stateTarget, ${this.constructor.constraints.join(', ')})`);
       }
 
       /**
        * Override this method to implement custom validation constraints.
+       * @param {HTMLElement | undefined} stateTarget
        * @param {unknown[]} constraints
        * @protected
        */
-      _constraintsChanged(...constraints) {
-        // Prevent marking field as invalid when setting required state
-        // or any other constraint before a user has entered the value.
-        if (!this.invalid) {
+      _constraintsChanged(stateTarget, ...constraints) {
+        // The input element's validity cannot be determined until
+        // all the necessary constraint attributes aren't set on it.
+        if (!stateTarget) {
           return;
         }
 
-        if (this._hasValidConstraints(constraints)) {
+        const hasConstraints = this._hasValidConstraints(constraints);
+        const isLastConstraintRemoved = this.__previousHasConstraints && !hasConstraints;
+
+        if ((this._hasValue || this.invalid) && hasConstraints) {
           this.validate();
-        } else {
-          this.invalid = false;
+        } else if (isLastConstraintRemoved) {
+          this._setInvalid(false);
         }
+
+        this.__previousHasConstraints = hasConstraints;
       }
 
       /**
@@ -20509,6 +20615,22 @@ const InputControlMixin = (superclass) =>
   ) {
     static get properties() {
       return {
+        /**
+         * A pattern matched against individual characters the user inputs.
+         *
+         * When set, the field will prevent:
+         * - `keydown` events if the entered key doesn't match `/^allowedCharPattern$/`
+         * - `paste` events if the pasted text doesn't match `/^allowedCharPattern*$/`
+         * - `drop` events if the dropped text doesn't match `/^allowedCharPattern*$/`
+         *
+         * For example, to allow entering only numbers and minus signs, use:
+         * `allowedCharPattern = "[\\d-]"`
+         */
+        allowedCharPattern: {
+          type: String,
+          observer: '_allowedCharPatternChanged',
+        },
+
         /**
          * If true, the input text gets fully selected when the field is focused using click or touch / tap.
          */
@@ -20566,6 +20688,14 @@ const InputControlMixin = (superclass) =>
       return [...super.delegateAttrs, 'name', 'type', 'placeholder', 'readonly', 'invalid', 'title'];
     }
 
+    constructor() {
+      super();
+
+      this._boundOnPaste = this._onPaste.bind(this);
+      this._boundOnDrop = this._onDrop.bind(this);
+      this._boundOnBeforeInput = this._onBeforeInput.bind(this);
+    }
+
     /**
      * Any element extending this mixin is required to implement this getter.
      * It returns the reference to the clear button element.
@@ -20658,6 +20788,115 @@ const InputControlMixin = (superclass) =>
       this.inputElement.dispatchEvent(new Event('change', { bubbles: true }));
     }
 
+    /**
+     * Override a method from `InputMixin`.
+     * @param {!HTMLElement} input
+     * @protected
+     * @override
+     */
+    _addInputListeners(input) {
+      super._addInputListeners(input);
+
+      input.addEventListener('paste', this._boundOnPaste);
+      input.addEventListener('drop', this._boundOnDrop);
+      input.addEventListener('beforeinput', this._boundOnBeforeInput);
+    }
+
+    /**
+     * Override a method from `InputMixin`.
+     * @param {!HTMLElement} input
+     * @protected
+     * @override
+     */
+    _removeInputListeners(input) {
+      super._removeInputListeners(input);
+
+      input.removeEventListener('paste', this._boundOnPaste);
+      input.removeEventListener('drop', this._boundOnDrop);
+      input.removeEventListener('beforeinput', this._boundOnBeforeInput);
+    }
+
+    /**
+     * Override an event listener from `KeyboardMixin`.
+     * @param {!KeyboardEvent} event
+     * @protected
+     * @override
+     */
+    _onKeyDown(event) {
+      super._onKeyDown(event);
+
+      if (this.allowedCharPattern && !this.__shouldAcceptKey(event)) {
+        event.preventDefault();
+        this._markInputPrevented();
+      }
+    }
+
+    /** @protected */
+    _markInputPrevented() {
+      // Add input-prevented attribute for 200ms
+      this.setAttribute('input-prevented', '');
+      this._preventInputDebouncer = Debouncer$1.debounce(this._preventInputDebouncer, timeOut.after(200), () => {
+        this.removeAttribute('input-prevented');
+      });
+    }
+
+    /** @private */
+    __shouldAcceptKey(event) {
+      return (
+        event.metaKey ||
+        event.ctrlKey ||
+        !event.key || // Allow typing anything if event.key is not supported
+        event.key.length !== 1 || // Allow "Backspace", "ArrowLeft" etc.
+        this.__allowedCharRegExp.test(event.key)
+      );
+    }
+
+    /** @private */
+    _onPaste(e) {
+      if (this.allowedCharPattern) {
+        const pastedText = e.clipboardData.getData('text');
+        if (!this.__allowedTextRegExp.test(pastedText)) {
+          e.preventDefault();
+          this._markInputPrevented();
+        }
+      }
+    }
+
+    /** @private */
+    _onDrop(e) {
+      if (this.allowedCharPattern) {
+        const draggedText = e.dataTransfer.getData('text');
+        if (!this.__allowedTextRegExp.test(draggedText)) {
+          e.preventDefault();
+          this._markInputPrevented();
+        }
+      }
+    }
+
+    /** @private */
+    _onBeforeInput(e) {
+      // The `beforeinput` event covers all the cases for `allowedCharPattern`: keyboard, pasting and dropping,
+      // but it is still experimental technology so we can't rely on it. It's used here just as an additional check,
+      // because it seems to be the only way to detect and prevent specific keys on mobile devices.
+      // See https://github.com/vaadin/vaadin-text-field/issues/429
+      if (this.allowedCharPattern && e.data && !this.__allowedTextRegExp.test(e.data)) {
+        e.preventDefault();
+        this._markInputPrevented();
+      }
+    }
+
+    /** @private */
+    _allowedCharPatternChanged(charPattern) {
+      if (charPattern) {
+        try {
+          this.__allowedCharRegExp = new RegExp(`^${charPattern}$`);
+          this.__allowedTextRegExp = new RegExp(`^${charPattern}*$`);
+        } catch (e) {
+          console.error(e);
+        }
+      }
+    }
+
     /**
      * Fired when the user commits a value change.
      *
@@ -20696,14 +20935,13 @@ class InputController extends SlotController {
         }
 
         // Ensure every instance has unique ID
-        const uniqueId = (InputController._uniqueInputId = 1 + InputController._uniqueInputId || 0);
-        host._inputId = `${host.localName}-${uniqueId}`;
-        node.id = host._inputId;
+        node.id = this.defaultId;
 
         if (typeof callback === 'function') {
           callback(node);
         }
       },
+      true,
     );
   }
 }
@@ -20885,7 +21123,9 @@ class VirtualKeyboardController {
  * @param {function(new:HTMLElement)} subclass
  */
 const DatePickerMixin = (subclass) =>
-  class VaadinDatePickerMixin extends ControllerMixin(DelegateFocusMixin(InputMixin(KeyboardMixin(subclass)))) {
+  class VaadinDatePickerMixin extends ControllerMixin(
+    DelegateFocusMixin(InputConstraintsMixin(KeyboardMixin(subclass))),
+  ) {
     static get properties() {
       return {
         /**
@@ -20914,7 +21154,6 @@ const DatePickerMixin = (subclass) =>
          */
         value: {
           type: String,
-          observer: '_valueChanged',
           notify: true,
           value: '',
         },
@@ -20970,13 +21209,6 @@ const DatePickerMixin = (subclass) =>
           value: '(max-width: 420px), (max-height: 420px)',
         },
 
-        /**
-         * An array of ancestor elements whose -webkit-overflow-scrolling is forced from value
-         * 'touch' to value 'auto' in order to prevent them from clipping the dropdown. iOS only.
-         * @private
-         */
-        _touchPrevented: Array,
-
         /**
          * The object used to localize this component.
          * To change the default localization, replace the entire
@@ -21132,7 +21364,6 @@ const DatePickerMixin = (subclass) =>
          */
         min: {
           type: String,
-          observer: '_minChanged',
         },
 
         /**
@@ -21146,28 +21377,26 @@ const DatePickerMixin = (subclass) =>
          */
         max: {
           type: String,
-          observer: '_maxChanged',
         },
 
         /**
          * The earliest date that can be selected. All earlier dates will be disabled.
-         * @type {Date | string}
+         * @type {Date | undefined}
          * @protected
          */
         _minDate: {
           type: Date,
-          // Null does not work here because minimizer passes undefined to overlay (#351)
-          value: '',
+          computed: '__computeMinOrMaxDate(min)',
         },
 
         /**
          * The latest date that can be selected. All later dates will be disabled.
-         * @type {Date | string}
+         * @type {Date | undefined}
          * @protected
          */
         _maxDate: {
           type: Date,
-          value: '',
+          computed: '__computeMinOrMaxDate(max)',
         },
 
         /** @private */
@@ -21182,12 +21411,6 @@ const DatePickerMixin = (subclass) =>
           value: isIOS,
         },
 
-        /** @private */
-        _webkitOverflowScroll: {
-          type: Boolean,
-          value: document.createElement('div').style.webkitOverflowScrolling === '',
-        },
-
         /** @private */
         _focusOverlayOnOpen: Boolean,
 
@@ -21203,6 +21426,10 @@ const DatePickerMixin = (subclass) =>
       ];
     }
 
+    static get constraints() {
+      return [...super.constraints, 'min', 'max'];
+    }
+
     /**
      * Override a getter from `InputControlMixin` to make it optional
      * and to prevent warning when a clear button is missing,
@@ -21269,12 +21496,10 @@ const DatePickerMixin = (subclass) =>
           }
         }
 
-        if (this.inputElement.value === '' && this.__dispatchChange) {
-          this.validate();
+        this.validate();
+
+        if (this._inputValue === '' && this.value !== '') {
           this.value = '';
-          this.__dispatchChange = false;
-        } else {
-          this.validate();
         }
       }
     }
@@ -21343,14 +21568,19 @@ const DatePickerMixin = (subclass) =>
       this.$.overlay.removeAttribute('disable-upgrade');
       this._overlayInitialized = true;
 
-      this.$.overlay.addEventListener('opened-changed', (e) => (this.opened = e.detail.value));
+      this.$.overlay.addEventListener('opened-changed', (e) => {
+        this.opened = e.detail.value;
+      });
 
       this.$.overlay.addEventListener('vaadin-overlay-escape-press', () => {
         this._focusedDate = this._selectedDate;
         this._close();
       });
 
-      this._overlayContent.addEventListener('close', this._close.bind(this));
+      this._overlayContent.addEventListener('close', () => {
+        this._close();
+      });
+
       this._overlayContent.addEventListener('focus-input', this._focusAndSelect.bind(this));
 
       // User confirmed selected date by clicking the calendar.
@@ -21359,7 +21589,7 @@ const DatePickerMixin = (subclass) =>
 
         this._selectDate(e.detail.date);
 
-        this._close(e);
+        this._close();
       });
 
       // User confirmed selected date by pressing Enter or Today.
@@ -21369,24 +21599,18 @@ const DatePickerMixin = (subclass) =>
         this._selectDate(e.detail.date);
       });
 
-      // Keep focus attribute in focusElement for styling
+      // Set focus-ring attribute when moving focus to the overlay
+      // by pressing Tab or arrow key, after opening it on click.
       this._overlayContent.addEventListener('focusin', () => {
-        this._setFocused(true);
+        if (this._keyboardActive) {
+          this._setFocused(true);
+        }
       });
 
       this.addEventListener('mousedown', () => this.__bringToFront());
       this.addEventListener('touchstart', () => this.__bringToFront());
     }
 
-    /**
-     * Returns true if `value` is valid, and sets the `invalid` flag appropriately.
-     *
-     * @return {boolean} True if the value is valid and sets the `invalid` flag appropriately
-     */
-    validate() {
-      return !(this.invalid = !this.checkValidity());
-    }
-
     /**
      * Returns true if the current input value satisfies all constraints (if any)
      *
@@ -21397,7 +21621,7 @@ const DatePickerMixin = (subclass) =>
     checkValidity() {
       const inputValid =
         !this._inputValue ||
-        (this._selectedDate && this._inputValue === this._getFormattedDate(this.i18n.formatDate, this._selectedDate));
+        (!!this._selectedDate && this._inputValue === this._getFormattedDate(this.i18n.formatDate, this._selectedDate));
       const minMaxValid = !this._selectedDate || dateAllowed(this._selectedDate, this._minDate, this._maxDate);
 
       let inputValidity = true;
@@ -21413,6 +21637,51 @@ const DatePickerMixin = (subclass) =>
       return inputValid && minMaxValid && inputValidity;
     }
 
+    /**
+     * Override method inherited from `FocusMixin`
+     * to not call `_setFocused(true)` when focus
+     * is restored after closing overlay on click,
+     * and to avoid removing `focus-ring` attribute.
+     *
+     * @param {!FocusEvent} _event
+     * @return {boolean}
+     * @protected
+     * @override
+     */
+    _shouldSetFocus(_event) {
+      return !this._shouldKeepFocusRing;
+    }
+
+    /**
+     * Override method inherited from `FocusMixin`
+     * to prevent removing the `focused` attribute:
+     * - when moving focus to the overlay content,
+     * - when closing on date click / outside click.
+     *
+     * @param {!FocusEvent} _event
+     * @return {boolean}
+     * @protected
+     * @override
+     */
+    _shouldRemoveFocus(_event) {
+      return !this.opened;
+    }
+
+    /**
+     * Override method inherited from `FocusMixin`
+     * to store the `focus-ring` state to restore
+     * it later when closing on outside click.
+     *
+     * @param {boolean} focused
+     * @protected
+     * @override
+     */
+    _setFocused(focused) {
+      super._setFocused(focused);
+
+      this._shouldKeepFocusRing = focused && this._keyboardActive;
+    }
+
     /**
      * Select date on user interaction and set the flag
      * to fire change event if necessary.
@@ -21432,10 +21701,7 @@ const DatePickerMixin = (subclass) =>
     }
 
     /** @private */
-    _close(e) {
-      if (e) {
-        e.stopPropagation();
-      }
+    _close() {
       this._focus();
       this.close();
     }
@@ -21564,47 +21830,46 @@ const DatePickerMixin = (subclass) =>
       }
     }
 
-    /** @private */
-    _handleDateChange(property, value, oldValue) {
-      if (!value) {
-        this[property] = '';
-        return;
-      }
+    /**
+     * Override the value observer from `InputMixin` to implement custom
+     * handling of the `value` property. The date-picker doesn't forward
+     * the value directly to the input like the default implementation of `InputMixin`.
+     * Instead, it parses the value into a date, puts it in `_selectedDate` which
+     * is then displayed in the input with respect to the specified date format.
+     *
+     * @param {string | undefined} value
+     * @param {string | undefined} oldValue
+     * @protected
+     * @override
+     */
+    _valueChanged(value, oldValue) {
+      const newDate = this._parseDate(value);
 
-      const date = this._parseDate(value);
-      if (!date) {
+      if (value && !newDate) {
+        // The new value cannot be parsed, revert the old value.
         this.value = oldValue;
         return;
       }
-      if (!dateEquals(this[property], date)) {
-        this[property] = date;
-        if (this.value) {
-          this.validate();
-        }
-      }
-    }
 
-    /** @private */
-    _valueChanged(value, oldValue) {
-      this._handleDateChange('_selectedDate', value, oldValue);
+      if (value) {
+        if (!dateEquals(this._selectedDate, newDate)) {
+          // Update the date instance only if the date has actually changed.
+          this._selectedDate = newDate;
 
-      this._toggleHasValue(!!value);
-    }
-
-    /** @private */
-    _minChanged(value, oldValue) {
-      this._handleDateChange('_minDate', value, oldValue);
-    }
+          if (oldValue !== undefined) {
+            // Validate only if `value` changes after initialization.
+            this.validate();
+          }
+        }
+      } else {
+        this._selectedDate = null;
+      }
 
-    /** @private */
-    _maxChanged(value, oldValue) {
-      this._handleDateChange('_maxDate', value, oldValue);
+      this._toggleHasValue(this._hasValue);
     }
 
     /** @protected */
     _onOverlayOpened() {
-      this._openedWithFocusRing = this.hasAttribute('focus-ring');
-
       const parsedInitialPosition = this._parseDate(this.initialPosition);
 
       const initialPosition =
@@ -21624,10 +21889,6 @@ const DatePickerMixin = (subclass) =>
 
       window.addEventListener('scroll', this._boundOnScroll, true);
 
-      if (this._webkitOverflowScroll) {
-        this._touchPrevented = this._preventWebkitOverflowScrollingTouch(this.parentElement);
-      }
-
       if (this._focusOverlayOnOpen) {
         this._overlayContent.focusDateElement();
         this._focusOverlayOnOpen = false;
@@ -21641,25 +21902,6 @@ const DatePickerMixin = (subclass) =>
       }
     }
 
-    // A hack needed for iOS to prevent dropdown from being clipped in an
-    // ancestor container with -webkit-overflow-scrolling: touch;
-    /** @private */
-    _preventWebkitOverflowScrollingTouch(element) {
-      const result = [];
-      while (element) {
-        if (window.getComputedStyle(element).webkitOverflowScrolling === 'touch') {
-          const oldInlineValue = element.style.webkitOverflowScrolling;
-          element.style.webkitOverflowScrolling = 'auto';
-          result.push({
-            element,
-            oldInlineValue,
-          });
-        }
-        element = element.parentElement;
-      }
-      return result;
-    }
-
     /** @private */
     _selectParsedOrFocusedDate() {
       // Select the parsed input or focused date
@@ -21686,13 +21928,6 @@ const DatePickerMixin = (subclass) =>
     _onOverlayClosed() {
       window.removeEventListener('scroll', this._boundOnScroll, true);
 
-      if (this._touchPrevented) {
-        this._touchPrevented.forEach(
-          (prevented) => (prevented.element.style.webkitOverflowScrolling = prevented.oldInlineValue),
-        );
-        this._touchPrevented = [];
-      }
-
       // No need to select date on close if it was confirmed by the user.
       if (this.__userConfirmedDate) {
         this.__userConfirmedDate = false;
@@ -21708,11 +21943,6 @@ const DatePickerMixin = (subclass) =>
       if (!this.value) {
         this.validate();
       }
-
-      // If the input isn't focused when overlay closes (fullscreen mode), clear focused state
-      if (this.getRootNode().activeElement !== this.inputElement) {
-        this._setFocused(false);
-      }
     }
 
     /** @private */
@@ -21765,10 +21995,7 @@ const DatePickerMixin = (subclass) =>
     _onChange(event) {
       // For change event on the native <input> blur, after the input is cleared,
       // we schedule change event to be dispatched on date-picker blur.
-      if (
-        this.inputElement.value === '' &&
-        !(event.detail && event.detail.sourceEvent && event.detail.sourceEvent.__fromClearButton)
-      ) {
+      if (this._inputValue === '') {
         this.__dispatchChange = true;
       }
 
@@ -21855,7 +22082,7 @@ const DatePickerMixin = (subclass) =>
             if (e.shiftKey) {
               this._overlayContent.focusCancel();
             } else {
-              this._overlayContent.focusDate(this._focusedDate);
+              this._overlayContent.focusDateElement();
             }
           }
           break;
@@ -21966,6 +22193,11 @@ const DatePickerMixin = (subclass) =>
       return this.$.overlay.content.querySelector('#overlay-content');
     }
 
+    /** @private */
+    __computeMinOrMaxDate(dateString) {
+      return this._parseDate(dateString);
+    }
+
     /**
      * Fired when the user commits a value change.
      *
@@ -22077,12 +22309,13 @@ registerStyles('vaadin-date-picker', [inputFieldShared, datePickerStyles], { mod
  * Note: the `theme` attribute value set on `<vaadin-date-picker>` is
  * propagated to the internal components listed above.
  *
- * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
  *
  * @fires {Event} change - Fired when the user commits a value change.
  * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
+ * @fires {CustomEvent} validated - Fired whenever the field is validated.
  *
  * @extends HTMLElement
  * @mixes ElementMixin
@@ -22136,7 +22369,7 @@ class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(Element
         fullscreen$="[[_fullscreen]]"
         theme$="[[__getOverlayTheme(_theme, _overlayInitialized)]]"
         on-vaadin-overlay-open="_onOverlayOpened"
-        on-vaadin-overlay-close="_onOverlayClosed"
+        on-vaadin-overlay-closing="_onOverlayClosed"
         restore-focus-on-close
         restore-focus-node="[[inputElement]]"
         disable-upgrade
@@ -22196,11 +22429,6 @@ class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(Element
 
   /** @private */
   _onVaadinOverlayClose(e) {
-    if (this._openedWithFocusRing && this.hasAttribute('focused')) {
-      this.setAttribute('focus-ring', '');
-    } else if (!this.hasAttribute('focused')) {
-      this.blur();
-    }
     if (e.detail.sourceEvent && e.detail.sourceEvent.composedPath().includes(this)) {
       e.preventDefault();
     }
@@ -22224,13 +22452,14 @@ class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(Element
 
 customElements.define(DatePicker.is, DatePicker);
 
-const helperFiltersCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.FilterButtonsWrapper{display:flex;justify-content:flex-end;gap:5px}.FilterButtonsWrapper .FilterOpen{cursor:pointer;border-radius:4px;padding:8px 15px;width:max-content;border:1px solid #00958f;background:#00958f;color:#FFF;font-size:12px;transition:all 0.2s linear;text-align:center;letter-spacing:0}.FilterButtonsWrapper .FilterOpen:hover{background:#00958f;color:#FFF}.FilterButtonsWrapper .FilterClear{cursor:pointer;border-radius:4px;padding:8px 15px;width:max-content;border:1px solid #00958f;background:#FFF;color:#000;font-size:12px;transition:all 0.2s linear;text-align:center;letter-spacing:0}.FilterButtonsWrapper .FilterClear:hover{background:#00958f;color:#FFF}.FilterModalHeader,.FilterModalBody,.FilterModalFooter{display:flex;flex-direction:column;gap:5px;align-items:center;margin:20px 0}.FilterModalHeader .FilterModalTitle,.FilterModalBody .FilterModalTitle,.FilterModalFooter .FilterModalTitle{margin:0;padding:0;font-weight:700;font-size:16px;color:#009993;text-transform:uppercase}.FilterModalHeader .FilterModalSearch,.FilterModalBody .FilterModalSearch,.FilterModalFooter .FilterModalSearch{border-radius:4px;background:#e8ebef;color:#263445;width:100%;height:26px;max-width:280px;padding:5px;font-size:15px;border:none;outline:#009993}.FilterModalHeader .FilterCalendarWrapper,.FilterModalBody .FilterCalendarWrapper,.FilterModalFooter .FilterCalendarWrapper{display:flex;gap:5px}.FilterModalHeader .FilterCalendarWrapper .VaadinDatePicker,.FilterModalBody .FilterCalendarWrapper .VaadinDatePicker,.FilterModalFooter .FilterCalendarWrapper .VaadinDatePicker{width:50%;max-width:143px}.FilterModalHeader .FilterModalButton,.FilterModalBody .FilterModalButton,.FilterModalFooter .FilterModalButton{cursor:pointer;border-radius:4px;padding:8px 60px;width:max-content;margin:5px;border:1px solid #00958f;background:#00958f;color:#FFF;font-size:12px;transition:all 0.2s linear;text-transform:uppercase;text-align:center;letter-spacing:0}.FilterModalHeader .FilterModalButton:hover,.FilterModalBody .FilterModalButton:hover,.FilterModalFooter .FilterModalButton:hover{background:#00958f;color:#FFF}";
+const helperFiltersCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.FilterButtonsWrapper{display:flex;justify-content:flex-end;gap:5px}.FilterButtonsWrapper .FilterOpen{cursor:pointer;border-radius:4px;padding:8px 15px;width:max-content;border:1px solid #00958f;background:#00958f;color:#FFF;font-size:12px;transition:all 0.2s linear;text-align:center;letter-spacing:0}.FilterButtonsWrapper .FilterOpen:hover{background:#00958f;color:#FFF}.FilterButtonsWrapper .FilterClear{cursor:pointer;border-radius:4px;padding:8px 15px;width:max-content;border:1px solid #00958f;background:#FFF;color:#000;font-size:12px;transition:all 0.2s linear;text-align:center;letter-spacing:0}.FilterButtonsWrapper .FilterClear:hover{background:#00958f;color:#FFF}.FilterModalHeader,.FilterModalBody,.FilterModalFooter{display:flex;flex-direction:column;gap:5px;align-items:center;margin:20px 0}.FilterModalHeader .FilterModalTitle,.FilterModalBody .FilterModalTitle,.FilterModalFooter .FilterModalTitle{margin:0;padding:0;font-weight:700;font-size:16px;color:#009993;text-transform:uppercase}.FilterModalHeader .FilterModalSearch,.FilterModalBody .FilterModalSearch,.FilterModalFooter .FilterModalSearch{border-radius:4px;background:#e8ebef;color:#263445;width:100%;height:26px;max-width:280px;padding:5px;font-size:15px;border:none;outline:#009993}.FilterModalHeader .FilterCalendarWrapper,.FilterModalBody .FilterCalendarWrapper,.FilterModalFooter .FilterCalendarWrapper{display:flex;gap:5px}.FilterModalHeader .FilterCalendarWrapper .VaadinDatePicker,.FilterModalBody .FilterCalendarWrapper .VaadinDatePicker,.FilterModalFooter .FilterCalendarWrapper .VaadinDatePicker{width:50%;max-width:143px}.FilterModalHeader .FilterModalButton,.FilterModalBody .FilterModalButton,.FilterModalFooter .FilterModalButton{cursor:pointer;border-radius:4px;padding:8px 60px;width:max-content;margin:5px;border:1px solid #00958f;background:#00958f;color:#FFF;font-size:12px;transition:all 0.2s linear;text-transform:uppercase;text-align:center;letter-spacing:0}.FilterModalHeader .FilterModalButton:hover,.FilterModalBody .FilterModalButton:hover,.FilterModalFooter .FilterModalButton:hover{background:#00958f;color:#FFF}.FilterModalHeader p,.FilterModalBody p,.FilterModalFooter p{margin:5px 0}";
 
 const HelperFilters$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
+    this.filterDraw = createEvent(this, "filterDraw", 7);
     this.filterSelection = createEvent(this, "filterSelection", 7);
     this.filterSelectionReset = createEvent(this, "filterSelectionReset", 7);
     /**
@@ -22264,23 +22493,29 @@ const HelperFilters$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     this.showFilterModal = false;
     this.showClearButton = false;
     this.filterData = {};
-    this.filterDataReset = { drawTicketId: '', filterFromCalendar: '', filterToCalendar: '' };
+    this.filterDataReset = { ticketDrawId: '', filterFromCalendar: '', filterToCalendar: '' };
+  }
+  // reset field values each time the filter modal opens
+  componentDidRender() {
+    this.filterData.ticketDrawId = null;
+    this.filterData.filterFromCalendar = null;
+    this.filterData.filterToCalendar = null;
+    // @TODO: to way binding?
+    if (document.getElementById('#FilterById'))
+      document.getElementById('#FilterById').value = '';
   }
   filterSelectionHandler(event) {
-    if (this.postMessage) {
+    if (this.postMessage)
       window.postMessage({ type: 'filterSelection', event }, window.location.href);
-    }
-    else {
+    if (this.filterData.ticketDrawId)
+      this.filterDraw.emit(event);
+    if (this.filterData.filterFromCalendar || this.filterData.filterToCalendar)
       this.filterSelection.emit(event);
-    }
   }
   filterSelectionResetHandler(event) {
-    if (this.postMessage) {
+    if (this.postMessage)
       window.postMessage({ type: 'filterSelectionReset', event }, window.location.href);
-    }
-    else {
-      this.filterSelectionReset.emit(event);
-    }
+    this.filterSelectionReset.emit(event);
   }
   modalCloseEvent() {
     this.showFilterModal = false;
@@ -22298,9 +22533,10 @@ const HelperFilters$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
   resetSearch() {
     this.showClearButton = false;
     this.filterSelectionResetHandler(this.filterDataReset);
+    this.filterData = {};
   }
-  handleDrawTicketId(event) {
-    this.filterData.drawTicketId = event.target.value;
+  handleTicketDrawId(event) {
+    this.filterData.ticketDrawId = event.target.value;
   }
   handleFilterFrom(event) {
     this.filterData.filterFromCalendar = new Date(event.target.value).toISOString();
@@ -22309,7 +22545,7 @@ const HelperFilters$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     this.filterData.filterToCalendar = new Date(event.target.value).toISOString();
   }
   render() {
-    return (h$2("div", { class: "HelperFilters" }, h$2("div", { class: "FilterButtonsWrapper" }, h$2("button", { class: "FilterOpen", onClick: () => this.toggleFilterModal() }, translate$1('filterOpen', this.language)), this.showClearButton ? h$2("button", { class: "FilterClear", onClick: () => this.resetSearch() }, translate$1('filterClear', this.language)) : null), h$2("helper-modal", { "title-modal": "Filter Modal", visible: this.showFilterModal }, h$2("div", { class: "FilterModalHeader" }, h$2("h3", { class: "FilterModalTitle" }, this.activateTicketSearch ? translate$1('filterModalTicketTitle', this.language) : translate$1('filterModalDrawTitle', this.language))), h$2("div", { class: "FilterModalBody" }, h$2("input", { type: "text", value: this.filterData.drawTicketId, onInput: (event) => this.handleDrawTicketId(event), class: "FilterModalSearch", placeholder: this.activateTicketSearch ? translate$1('filterTicketPlaceholder', this.language) : translate$1('filterDrawPlaceholder', this.language) }), h$2("div", { class: "FilterCalendarWrapper" }, h$2("vaadin-date-picker", { value: this.filterData.filterFromCalendar, onChange: (event) => this.handleFilterFrom(event), placeholder: translate$1('filterFromCalendar', this.language), class: "VaadinDatePicker" }), h$2("vaadin-date-picker", { value: this.filterData.filterToCalendar, onChange: (event) => this.handleFilterTo(event), placeholder: translate$1('filterToCalendar', this.language), class: "VaadinDatePicker" }))), h$2("div", { class: "FilterModalFooter" }, h$2("button", { class: "FilterModalButton", onClick: () => this.filterSearch() }, translate$1('filterModalButton', this.language))))));
+    return (h$2("div", { class: "HelperFilters" }, h$2("div", { class: "FilterButtonsWrapper" }, h$2("button", { class: "FilterOpen", onClick: () => this.toggleFilterModal() }, translate$1('filterOpen', this.language)), this.showClearButton ? h$2("button", { class: "FilterClear", onClick: () => this.resetSearch() }, translate$1('filterClear', this.language)) : null), h$2("helper-modal", { "title-modal": "Filter Modal", visible: this.showFilterModal }, h$2("div", { class: "FilterModalHeader" }, h$2("h3", { class: "FilterModalTitle" }, this.activateTicketSearch ? translate$1('filterModalTicketTitle', this.language) : translate$1('filterModalDrawTitle', this.language))), h$2("div", { class: "FilterModalBody" }, h$2("input", { id: "FilterById", type: "text", value: this.filterData.ticketDrawId, onInput: (event) => this.handleTicketDrawId(event), class: "FilterModalSearch", placeholder: this.activateTicketSearch ? translate$1('filterTicketPlaceholder', this.language) : translate$1('filterDrawPlaceholder', this.language) }), h$2("p", null, translate$1('filterOrDate', this.language)), h$2("div", { class: "FilterCalendarWrapper" }, h$2("vaadin-date-picker", { value: this.filterData.filterFromCalendar, onChange: (event) => this.handleFilterFrom(event), placeholder: translate$1('filterFromCalendar', this.language), class: "VaadinDatePicker" }), h$2("vaadin-date-picker", { value: this.filterData.filterToCalendar, onChange: (event) => this.handleFilterTo(event), placeholder: translate$1('filterToCalendar', this.language), class: "VaadinDatePicker" }))), h$2("div", { class: "FilterModalFooter" }, h$2("button", { class: "FilterModalButton", onClick: () => this.filterSearch() }, translate$1('filterModalButton', this.language))))));
   }
   static get style() { return helperFiltersCss; }
 }, [1, "helper-filters", {