@vaadin/date-picker 24.2.0-alpha6 → 24.2.0-alpha8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/date-picker",
-  "version": "24.2.0-alpha6",
+  "version": "24.2.0-alpha8",
   "publishConfig": {
     "access": "public"
   },
@@ -21,6 +21,10 @@
   "type": "module",
   "files": [
     "src",
+    "!src/vaadin-lit-date-picker-overlay-content.js",
+    "!src/vaadin-lit-date-picker-overlay.js",
+    "!src/vaadin-lit-month-calendar.js",
+    "!src/vaadin-lit-date-picker.js",
     "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
@@ -36,15 +40,15 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.2.0",
-    "@vaadin/a11y-base": "24.2.0-alpha6",
-    "@vaadin/button": "24.2.0-alpha6",
-    "@vaadin/component-base": "24.2.0-alpha6",
-    "@vaadin/field-base": "24.2.0-alpha6",
-    "@vaadin/input-container": "24.2.0-alpha6",
-    "@vaadin/overlay": "24.2.0-alpha6",
-    "@vaadin/vaadin-lumo-styles": "24.2.0-alpha6",
-    "@vaadin/vaadin-material-styles": "24.2.0-alpha6",
-    "@vaadin/vaadin-themable-mixin": "24.2.0-alpha6"
+    "@vaadin/a11y-base": "24.2.0-alpha8",
+    "@vaadin/button": "24.2.0-alpha8",
+    "@vaadin/component-base": "24.2.0-alpha8",
+    "@vaadin/field-base": "24.2.0-alpha8",
+    "@vaadin/input-container": "24.2.0-alpha8",
+    "@vaadin/overlay": "24.2.0-alpha8",
+    "@vaadin/vaadin-lumo-styles": "24.2.0-alpha8",
+    "@vaadin/vaadin-material-styles": "24.2.0-alpha8",
+    "@vaadin/vaadin-themable-mixin": "24.2.0-alpha8"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
@@ -55,5 +59,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "3ef6e6cd66919b3ef7637e42916e4c54656beb51"
+  "gitHead": "2c024e8fd462d178430418f76a61f498fb549998"
 }

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

@@ -25,6 +25,11 @@ export type DatePickerLightOpenedChangedEvent = CustomEvent<{ value: boolean }>;
  */
 export type DatePickerLightInvalidChangedEvent = CustomEvent<{ value: boolean }>;
 
+/**
+ * Fired when the `dirty` property changes.
+ */
+export type DatePickerLightDirtyChangedEvent = CustomEvent<{ value: boolean }>;
+
 /**
  * Fired when the `value` property changes.
  */
@@ -40,6 +45,8 @@ export interface DatePickerLightCustomEventMap {
 
   'invalid-changed': DatePickerLightInvalidChangedEvent;
 
+  'dirty-changed': DatePickerLightDirtyChangedEvent;
+
   'value-changed': DatePickerLightValueChangedEvent;
 
   validated: DatePickerLightValidatedEvent;
@@ -80,6 +87,7 @@ 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} dirty-changed - Fired when the `dirty` property changes.
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  * @fires {CustomEvent} validated - Fired whenever the field is validated.
  */

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

@@ -42,14 +42,18 @@ export const DatePickerMixin = (subclass) =>
          * @protected
          */
         _selectedDate: {
-          type: Date,
+          type: Object,
+          sync: true,
         },
 
         /**
          * @type {Date | undefined}
          * @protected
          */
-        _focusedDate: Date,
+        _focusedDate: {
+          type: Object,
+          sync: true,
+        },
 
         /**
          * Selected date.
@@ -64,6 +68,7 @@ export const DatePickerMixin = (subclass) =>
           type: String,
           notify: true,
           value: '',
+          sync: true,
         },
 
         /**
@@ -82,6 +87,7 @@ export const DatePickerMixin = (subclass) =>
           reflectToAttribute: true,
           notify: true,
           observer: '_openedChanged',
+          sync: true,
         },
 
         /**
@@ -99,6 +105,7 @@ export const DatePickerMixin = (subclass) =>
         showWeekNumbers: {
           type: Boolean,
           value: false,
+          sync: true,
         },
 
         /**
@@ -108,6 +115,7 @@ export const DatePickerMixin = (subclass) =>
         _fullscreen: {
           type: Boolean,
           value: false,
+          sync: true,
         },
 
         /**
@@ -206,6 +214,7 @@ export const DatePickerMixin = (subclass) =>
          */
         i18n: {
           type: Object,
+          sync: true,
           value: () => {
             return {
               monthNames: [
@@ -276,6 +285,7 @@ export const DatePickerMixin = (subclass) =>
          */
         min: {
           type: String,
+          sync: true,
         },
 
         /**
@@ -289,6 +299,7 @@ export const DatePickerMixin = (subclass) =>
          */
         max: {
           type: String,
+          sync: true,
         },
 
         /**
@@ -299,6 +310,7 @@ export const DatePickerMixin = (subclass) =>
         _minDate: {
           type: Date,
           computed: '__computeMinOrMaxDate(min)',
+          sync: true,
         },
 
         /**
@@ -309,6 +321,7 @@ export const DatePickerMixin = (subclass) =>
         _maxDate: {
           type: Date,
           computed: '__computeMinOrMaxDate(max)',
+          sync: true,
         },
 
         /** @private */
@@ -327,7 +340,10 @@ export const DatePickerMixin = (subclass) =>
         _focusOverlayOnOpen: Boolean,
 
         /** @private */
-        _overlayContent: Object,
+        _overlayContent: {
+          type: Object,
+          sync: true,
+        },
 
         /**
          * In date-picker, unlike other components extending `InputMixin`,
@@ -347,8 +363,8 @@ export const DatePickerMixin = (subclass) =>
 
     static get observers() {
       return [
-        '_selectedDateChanged(_selectedDate, i18n.formatDate)',
-        '_focusedDateChanged(_focusedDate, i18n.formatDate)',
+        '_selectedDateChanged(_selectedDate, i18n)',
+        '_focusedDateChanged(_focusedDate, i18n)',
         '__updateOverlayContent(_overlayContent, i18n, label, _minDate, _maxDate, _focusedDate, _selectedDate, showWeekNumbers)',
         '__updateOverlayContentTheme(_overlayContent, _theme)',
         '__updateOverlayContentFullScreen(_overlayContent, _fullscreen)',
@@ -490,6 +506,22 @@ export const DatePickerMixin = (subclass) =>
       }
     }
 
+    /**
+     * Override LitElement lifecycle callback to dispatch `change` event if needed.
+     * This is necessary to ensure `change` is fired after `value-changed`.
+     *
+     * @protected
+     * @override
+     */
+    updated(props) {
+      super.updated(props);
+
+      if (props.has('value') && this.__dispatchChange) {
+        this.dispatchEvent(new CustomEvent('change', { bubbles: true }));
+        this.__dispatchChange = false;
+      }
+    }
+
     /**
      * Opens the dropdown.
      */
@@ -639,6 +671,7 @@ export const DatePickerMixin = (subclass) =>
 
       // Only set flag if the value will change.
       if (this.value !== value) {
+        this.dirty = true;
         this.__dispatchChange = true;
       }
 
@@ -718,8 +751,8 @@ export const DatePickerMixin = (subclass) =>
     }
 
     /** @private */
-    _selectedDateChanged(selectedDate, formatDate) {
-      if (selectedDate === undefined || formatDate === undefined) {
+    _selectedDateChanged(selectedDate, i18n) {
+      if (selectedDate === undefined || i18n === undefined) {
         return;
       }
       const value = this._formatISO(selectedDate);
@@ -738,8 +771,8 @@ export const DatePickerMixin = (subclass) =>
     }
 
     /** @private */
-    _focusedDateChanged(focusedDate, formatDate) {
-      if (focusedDate === undefined || formatDate === undefined) {
+    _focusedDateChanged(focusedDate, i18n) {
+      if (focusedDate === undefined || i18n === undefined) {
         return;
       }
       if (!this._ignoreFocusedDateChange && !this._noInput) {
@@ -789,15 +822,13 @@ export const DatePickerMixin = (subclass) =>
     // eslint-disable-next-line max-params
     __updateOverlayContent(overlayContent, i18n, label, minDate, maxDate, focusedDate, selectedDate, showWeekNumbers) {
       if (overlayContent) {
-        overlayContent.setProperties({
-          i18n,
-          label,
-          minDate,
-          maxDate,
-          focusedDate,
-          selectedDate,
-          showWeekNumbers,
-        });
+        overlayContent.i18n = i18n;
+        overlayContent.label = label;
+        overlayContent.minDate = minDate;
+        overlayContent.maxDate = maxDate;
+        overlayContent.focusedDate = focusedDate;
+        overlayContent.selectedDate = selectedDate;
+        overlayContent.showWeekNumbers = showWeekNumbers;
       }
     }
 
@@ -828,6 +859,7 @@ export const DatePickerMixin = (subclass) =>
     /** @protected */
     _onOverlayOpened() {
       const content = this._overlayContent;
+      content.reset();
 
       // Detect which date to show
       const initialPosition = this._getInitialPosition();
@@ -1009,6 +1041,7 @@ export const DatePickerMixin = (subclass) =>
      */
     _onClearButtonClick(event) {
       event.preventDefault();
+      this.dirty = true;
       this._inputElementValue = '';
       this.value = '';
       this.validate();

package/src/vaadin-date-picker-month-scroller.js

@@ -3,11 +3,11 @@
  * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { dateAfterXMonths } from './vaadin-date-picker-helper.js';
 import { InfiniteScroller } from './vaadin-infinite-scroller.js';
 
-const stylesTemplate = html`
+const stylesTemplate = document.createElement('template');
+stylesTemplate.innerHTML = `
   <style>
     :host {
       --vaadin-infinite-scroller-item-height: 270px;
@@ -21,8 +21,6 @@ const stylesTemplate = html`
   </style>
 `;
 
-let memoizedTemplate;
-
 /**
  * An element used internally by `<vaadin-date-picker>`. Not intended to be used separately.
  *
@@ -34,22 +32,11 @@ class DatePickerMonthScroller extends InfiniteScroller {
     return 'vaadin-date-picker-month-scroller';
   }
 
-  static get template() {
-    if (!memoizedTemplate) {
-      memoizedTemplate = super.template.cloneNode(true);
-      memoizedTemplate.content.appendChild(stylesTemplate.content.cloneNode(true));
-    }
-
-    return memoizedTemplate;
-  }
+  constructor() {
+    super();
 
-  static get properties() {
-    return {
-      bufferSize: {
-        type: Number,
-        value: 3,
-      },
-    };
+    this.bufferSize = 3;
+    this.shadowRoot.appendChild(stylesTemplate.content.cloneNode(true));
   }
 
   /**