@vaadin/date-picker 23.1.2 → 23.2.0-alpha3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/date-picker",
-  "version": "23.1.2",
+  "version": "23.2.0-alpha3",
   "publishConfig": {
     "access": "public"
   },
@@ -34,19 +34,19 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.2.0",
-    "@vaadin/button": "^23.1.2",
-    "@vaadin/component-base": "^23.1.2",
-    "@vaadin/field-base": "^23.1.2",
-    "@vaadin/input-container": "^23.1.2",
-    "@vaadin/vaadin-lumo-styles": "^23.1.2",
-    "@vaadin/vaadin-material-styles": "^23.1.2",
-    "@vaadin/vaadin-overlay": "^23.1.2",
-    "@vaadin/vaadin-themable-mixin": "^23.1.2"
+    "@vaadin/button": "23.2.0-alpha3",
+    "@vaadin/component-base": "23.2.0-alpha3",
+    "@vaadin/field-base": "23.2.0-alpha3",
+    "@vaadin/input-container": "23.2.0-alpha3",
+    "@vaadin/vaadin-lumo-styles": "23.2.0-alpha3",
+    "@vaadin/vaadin-material-styles": "23.2.0-alpha3",
+    "@vaadin/vaadin-overlay": "23.2.0-alpha3",
+    "@vaadin/vaadin-themable-mixin": "23.2.0-alpha3"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^13.0.2"
   },
-  "gitHead": "6fb205c6e9a761feadfb779dd5d7af96d3102e56"
+  "gitHead": "06e5875be93ca50da2846dafc65a8531010c0576"
 }

package/src/vaadin-date-picker-light.d.ts

@@ -3,6 +3,7 @@
  * Copyright (c) 2016 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { ValidateMixin } from '@vaadin/field-base/src/validate-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { DatePickerMixin } from './vaadin-date-picker-mixin.js';
 export { DatePickerDate, DatePickerI18n } from './vaadin-date-picker-mixin.js';
@@ -29,12 +30,19 @@ export type DatePickerLightInvalidChangedEvent = CustomEvent<{ value: boolean }>
  */
 export type DatePickerLightValueChangedEvent = CustomEvent<{ value: string }>;
 
+/**
+ * Fired whenever the field is validated.
+ */
+export type DatePickerLightValidatedEvent = CustomEvent<{ valid: boolean }>;
+
 export interface DatePickerLightCustomEventMap {
   'opened-changed': DatePickerLightOpenedChangedEvent;
 
   'invalid-changed': DatePickerLightInvalidChangedEvent;
 
   'value-changed': DatePickerLightValueChangedEvent;
+
+  validated: DatePickerLightValidatedEvent;
 }
 
 export interface DatePickerLightEventMap extends HTMLElementEventMap, DatePickerLightCustomEventMap {
@@ -79,8 +87,9 @@ export interface DatePickerLightEventMap extends HTMLElementEventMap, DatePicker
  * @fires {Event} change - Fired when the user commits a value change.
  * @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.
  */
-declare class DatePickerLight extends ThemableMixin(DatePickerMixin(HTMLElement)) {
+declare class DatePickerLight extends ThemableMixin(DatePickerMixin(ValidateMixin(HTMLElement))) {
   /**
    * Name of the two-way data-bindable property representing the
    * value of the custom input field.

package/src/vaadin-date-picker-light.js

@@ -7,6 +7,7 @@ import './vaadin-date-picker-overlay.js';
 import './vaadin-date-picker-overlay-content.js';
 import { dashToCamelCase } from '@polymer/polymer/lib/utils/case-map.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { ValidateMixin } from '@vaadin/field-base/src/validate-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { DatePickerMixin } from './vaadin-date-picker-mixin.js';
 
@@ -48,12 +49,13 @@ import { DatePickerMixin } from './vaadin-date-picker-mixin.js';
  * @fires {Event} change - Fired when the user commits a value change.
  * @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 ThemableMixin
  * @mixes DatePickerMixin
  */
-class DatePickerLight extends ThemableMixin(DatePickerMixin(PolymerElement)) {
+class DatePickerLight extends ThemableMixin(DatePickerMixin(ValidateMixin(PolymerElement))) {
   static get template() {
     return html`
       <style>

package/src/vaadin-date-picker-mixin.d.ts

@@ -3,12 +3,12 @@
  * Copyright (c) 2016 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { Constructor } from '@open-wc/dedupe-mixin';
-import { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
-import { FocusMixinClass } from '@vaadin/component-base/src/focus-mixin.js';
-import { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mixin.js';
-import { DelegateFocusMixinClass } from '@vaadin/field-base/src/delegate-focus-mixin.js';
-import { InputMixinClass } from '@vaadin/field-base/src/input-mixin.js';
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
+import type { FocusMixinClass } from '@vaadin/component-base/src/focus-mixin.js';
+import type { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mixin.js';
+import type { DelegateFocusMixinClass } from '@vaadin/field-base/src/delegate-focus-mixin.js';
+import type { InputMixinClass } from '@vaadin/field-base/src/input-mixin.js';
 
 export interface DatePickerDate {
   day: number;
@@ -188,13 +188,6 @@ export declare class DatePickerMixinClass {
    */
   close(): void;
 
-  /**
-   * Returns true if `value` is valid, and sets the `invalid` flag appropriately.
-   *
-   * @returns True if the value is valid and sets the `invalid` flag appropriately
-   */
-  validate(): boolean;
-
   /**
    * Returns true if the current input value satisfies all constraints (if any)
    *

package/src/vaadin-date-picker-mixin.js

@@ -475,7 +475,9 @@ export 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;
@@ -510,15 +512,6 @@ export const DatePickerMixin = (subclass) =>
       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)
      *
@@ -529,7 +522,7 @@ export 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;
@@ -819,9 +812,9 @@ export const DatePickerMixin = (subclass) =>
       window.removeEventListener('scroll', this._boundOnScroll, true);
 
       if (this._touchPrevented) {
-        this._touchPrevented.forEach(
-          (prevented) => (prevented.element.style.webkitOverflowScrolling = prevented.oldInlineValue),
-        );
+        this._touchPrevented.forEach((prevented) => {
+          prevented.element.style.webkitOverflowScrolling = prevented.oldInlineValue;
+        });
         this._touchPrevented = [];
       }
 

package/src/vaadin-date-picker-overlay-content.js

@@ -451,7 +451,9 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
 
   _onYearScrollTouchStart() {
     this._notTapping = false;
-    setTimeout(() => (this._notTapping = true), 300);
+    setTimeout(() => {
+      this._notTapping = true;
+    }, 300);
 
     this._repositionMonthScroller();
   }
@@ -462,7 +464,9 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
 
   _doIgnoreTaps() {
     this._ignoreTaps = true;
-    this._debouncer = Debouncer.debounce(this._debouncer, timeOut.after(300), () => (this._ignoreTaps = false));
+    this._debouncer = Debouncer.debounce(this._debouncer, timeOut.after(300), () => {
+      this._ignoreTaps = false;
+    });
   }
 
   _formatDisplayed(date, formatDate, label) {

package/src/vaadin-date-picker.d.ts

@@ -31,12 +31,19 @@ export type DatePickerInvalidChangedEvent = CustomEvent<{ value: boolean }>;
  */
 export type DatePickerValueChangedEvent = CustomEvent<{ value: string }>;
 
+/**
+ * Fired whenever the field is validated.
+ */
+export type DatePickerValidatedEvent = CustomEvent<{ valid: boolean }>;
+
 export interface DatePickerCustomEventMap {
   'opened-changed': DatePickerOpenedChangedEvent;
 
   'invalid-changed': DatePickerInvalidChangedEvent;
 
   'value-changed': DatePickerValueChangedEvent;
+
+  validated: DatePickerValidatedEvent;
 }
 
 export interface DatePickerEventMap extends HTMLElementEventMap, DatePickerCustomEventMap {
@@ -133,6 +140,7 @@ export interface DatePickerEventMap extends HTMLElementEventMap, DatePickerCusto
  * @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.
  */
 declare class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(ElementMixin(HTMLElement)))) {
   addEventListener<K extends keyof DatePickerEventMap>(

package/src/vaadin-date-picker.js

@@ -108,6 +108,7 @@ registerStyles('vaadin-date-picker', [inputFieldShared, datePickerStyles], { mod
  * @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

package/src/vaadin-infinite-scroller.js

@@ -155,7 +155,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();
@@ -318,7 +318,7 @@ class InfiniteScroller extends PolymerElement {
           }
         }, 1); // Wait for first reset
       }
-    }, this);
+    });
 
     setTimeout(() => {
       afterNextRender(this, this._finishInit.bind(this));
@@ -356,7 +356,7 @@ class InfiniteScroller extends PolymerElement {
         });
         buffer.updated = true;
       }
-    }, this);
+    });
   }
 
   _isVisible(element, container) {

package/src/vaadin-month-calendar.js

@@ -250,7 +250,9 @@ class MonthCalendar extends FocusMixin(ThemableMixin(PolymerElement)) {
 
   _onMonthGridTouchStart() {
     this._notTapping = false;
-    setTimeout(() => (this._notTapping = true), 300);
+    setTimeout(() => {
+      this._notTapping = true;
+    }, 300);
   }
 
   _dateAdd(date, delta) {