vaadin-component-factory · paodb · Nov 10, 2023 · Nov 10, 2023
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vaadin-component-factory/vcf-date-range-picker",
-  "version": "4.9.3",
+  "version": "5.0.0",
   "description": "Polymer element providing a date range selection field with scrollable month calendar",
   "main": "vcf-date-range-picker.js",
   "repository": {
@@ -33,28 +33,29 @@
     "@polymer/iron-a11y-keys-behavior": "^3.0.0",
     "@polymer/iron-media-query": "^3.0.0",
     "@polymer/iron-resizable-behavior": "^3.0.1",
-    "@polymer/polymer": "^3.2.0",
-    "@vaadin/button": "^23.0.7",
+    "@polymer/polymer": "^3.3.0",
+    "@vaadin/button": "^24.2.0",
+    "@vaadin/component-base": "^24.2.0",
+    "@vaadin/form-layout": "^24.2.0",
+    "@vaadin/overlay": "^24.2.0",
+    "@vaadin/polymer-legacy-adapter": "^24.2.2",
+    "@vaadin/text-field": "^24.2.0",
     "@vaadin/vaadin-control-state-mixin": "^21.0.5",
-    "@vaadin/component-base": "^23.0.7",
-    "@vaadin/vaadin-lumo-styles": "^23.0.7",
-    "@vaadin/vaadin-material-styles": "^23.0.7",
-    "@vaadin/vaadin-overlay": "^23.0.7",
-    "@vaadin/text-field": "^23.0.7",
-    "@vaadin/vaadin-themable-mixin": "^23.0.7",
-    "@vaadin/form-layout": "^23.0.7"
+    "@vaadin/vaadin-lumo-styles": "^24.2.0",
+    "@vaadin/vaadin-material-styles": "^24.2.0",
+    "@vaadin/vaadin-themable-mixin": "^24.2.0"
   },
   "devDependencies": {
     "@polymer/iron-component-page": "^4.0.0",
+    "@polymer/iron-demo-helpers": "^3.0.0-pre.19",
     "@polymer/iron-form": "^3.0.0",
     "@polymer/iron-icon": "^3.0.1",
     "@polymer/iron-icons": "^3.0.1",
     "@polymer/iron-input": "^3.0.1",
     "@polymer/iron-test-helpers": "^3.0.0",
-    "@vaadin/custom-field": "^23.0.7",
-    "@polymer/iron-demo-helpers": "^3.0.0-pre.19",
-    "@vaadin/icons": "^23.0.7",
-    "@vaadin/dialog": "^23.0.7",
+    "@vaadin/custom-field": "^24.2.0",
+    "@vaadin/dialog": "^24.2.0",
+    "@vaadin/icons": "^24.2.0",
     "sugar": "^2.0.0",
     "wct-browser-legacy": "^1.0.1"
   },

diff --git a/src/vcf-date-range-picker-mixin.js b/src/vcf-date-range-picker-mixin.js
@@ -1,14 +1,20 @@
 import { IronA11yKeysBehavior } from '@polymer/iron-a11y-keys-behavior/iron-a11y-keys-behavior.js';
-import { IronResizableBehavior } from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
 import { dateAllowed, dateEquals, extractDateParts, getClosestDate } from './vcf-date-range-picker-helper.js';
 import { addListener } from '@polymer/polymer/lib/utils/gestures.js';
-import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';
+import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
+import { MediaQueryController } from '@vaadin/component-base/src/media-query-controller.js';
+import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
+import { InputConstraintsMixin } from '@vaadin/field-base/src/input-constraints-mixin.js';
+import { VirtualKeyboardController } from '@vaadin/field-base/src/virtual-keyboard-controller.js';
+import { DelegateFocusMixin } from '@vaadin/a11y-base/src/delegate-focus-mixin.js';
+import { KeyboardMixin } from '@vaadin/a11y-base/src/keyboard-mixin.js';
 
 /**
  * @polymerMixin
  */
 export const DateRangePickerMixin = (subclass) =>
-  class VaadinDatePickerMixin extends mixinBehaviors([IronResizableBehavior], subclass) {
+  class VaadinDatePickerMixin extends OverlayClassMixin(
+    ControllerMixin(DelegateFocusMixin(InputConstraintsMixin(KeyboardMixin(subclass)))),) {
   static get properties() {
     return {
       /**
@@ -121,6 +127,7 @@ export const DateRangePickerMixin = (subclass) =>
        * @protected
        */
       _fullscreen: {
+        type: Boolean,
         value: false,
         observer: '_fullscreenChanged'
       },
@@ -358,6 +365,12 @@ export const DateRangePickerMixin = (subclass) =>
       /** @private */
       _focusOverlayOnOpen: Boolean,
 
+      /** @private */
+      _overlayContent: {
+        type: Object,
+        sync: true,
+      },
+
       /** @protected */
       _overlayInitialized: Boolean
     };
@@ -369,17 +382,79 @@ export const DateRangePickerMixin = (subclass) =>
       '_selectedStartDateChanged(_selectedStartDate, i18n.formatDate)',
       '_selectedEndDateChanged(_selectedEndDate, i18n.formatDate)',
       '_focusedDateChanged(_focusedDate, i18n.formatDate)',
-      '_announceFocusedDate(_focusedDate, opened, _ignoreAnnounce)'
+      '_announceFocusedDate(_focusedDate, opened, _ignoreAnnounce)',
+      '__updateOverlayContent(_overlayContent, i18n, label, _minDate, _maxDate, _focusedDate, showWeekNumbers, _selectedStartDate, _selectedEndDate, _selectingStartDate, hideSidePanel)',
+      '__updateOverlayContentTheme(_overlayContent, _theme)',
+      '__updateOverlayContentFullScreen(_overlayContent, _fullscreen)',
     ];
   }
+
+  /** @private */
+  // eslint-disable-next-line max-params
+  __updateOverlayContent(overlayContent, i18n, label, minDate, maxDate, focusedDate, showWeekNumbers, _selectedStartDate, _selectedEndDate, selectingStartDate, hideSidePanel) {
+    if (overlayContent) {
+      overlayContent.i18n = i18n;
+      overlayContent.label = label;
+      overlayContent.minDate = minDate;
+      overlayContent.maxDate = maxDate;
+      overlayContent.focusedDate = focusedDate;
+      overlayContent.showWeekNumbers = showWeekNumbers;
+      overlayContent.selectedStartDate = _selectedStartDate;
+      overlayContent.selectedEndDate = _selectedEndDate;
+      overlayContent.selectingStartDate = selectingStartDate;
+      overlayContent.hideSidePanel = hideSidePanel;
+    }
+  }
 
-  /** @protected */
-  ready() {
-    super.ready();
+  /** @private */
+  __updateOverlayContentTheme(overlayContent, theme) {
+    if (overlayContent) {
+      if (theme) {
+        overlayContent.setAttribute('theme', theme);
+      } else {
+        overlayContent.removeAttribute('theme');
+      }
+    }
+  }
+
+  /** @private */
+  __updateOverlayContentFullScreen(overlayContent, fullscreen) {
+    if (overlayContent) {
+      overlayContent.toggleAttribute('fullscreen', fullscreen);
+    }
+  }
+
+  constructor() {
+    super();
+
+    this._boundOnClick = this._onClick.bind(this)
     this._boundOnScroll = this._onScroll.bind(this);
     this._boundFocus = this._focus.bind(this);
     this._boundUpdateAlignmentAndPosition = this._updateAlignmentAndPosition.bind(this);
 
+    this._boundOverlayRenderer = this._overlayRenderer.bind(this);
+  }
+
+  /** @protected */
+  ready() {
+    super.ready();
+
+    // new stuff from v24
+    this.addController(
+      new MediaQueryController(this._fullscreenMediaQuery, (matches) => {
+        this._fullscreen = matches;
+      }),
+    );
+
+    this.addController(new VirtualKeyboardController(this));
+
+    const overlay = this.$.overlay;
+    this._overlayElement = overlay;
+
+    overlay.renderer = this._boundOverlayRenderer;
+
+    // new stuff from v24
+
     const isClearButton = e => {
       const path = e.composedPath();
       // FIX: Just using inputStartElement, but don't know what to do
@@ -536,6 +611,52 @@ export const DateRangePickerMixin = (subclass) =>
     }
   }
 
+   /** @private */
+   _overlayRenderer(root) {
+    if (root.firstChild) {
+      return;
+    }
+
+    // Create and store document content element
+    const content = document.createElement('vcf-date-range-picker-overlay-content');
+    root.appendChild(content);
+
+    this._overlayContent = content;
+
+    this._initOverlay();
+
+    this._updateAlignmentAndPosition();
+
+   content.addEventListener('close', () => {
+      this._close();
+    });
+
+    content.addEventListener('focus-input', this._focusAndSelect.bind(this));
+
+    // User confirmed selected date by clicking the calendar.
+    content.addEventListener('date-tap', e => this._closeOnTap(e));
+
+    // Two-way data binding for `selectedStartDate` property
+    content.addEventListener('selected-start-date-changed', (e) => {
+      this._selectedStartDate = e.detail.value;
+    });
+
+    // Two-way data binding for `selectedEndDate` property
+    content.addEventListener('selected-end-date-changed', (e) => {
+      this._selectedEndDate = e.detail.value;
+    });
+
+    // Two-way data binding for `selectedEndDate` property
+    content.addEventListener('selecting-start-date-changed', (e) => {
+      this._selectingStartDate = e.detail.value;
+    });
+
+    // Two-way data binding for `focusedDate` property
+    content.addEventListener('focused-date-changed', (e) => {
+      this._focusedDate = e.detail.value;
+    });
+  }
+
   /**
     * @return {HTMLElement}
     * @protected
@@ -613,14 +734,9 @@ export const DateRangePickerMixin = (subclass) =>
   /** @private */
   _openedChanged(opened) {
     this._selectingStartDate = true;
-    if (opened && !this._overlayInitialized) {
-      this._initOverlay();
-    }
-    if (this._overlayInitialized) {
-      this.$.overlay.opened = opened;
-    }
-    if (opened) {
-      this._updateAlignmentAndPosition();
+
+    if (this.inputElement) {
+      this.inputElement.setAttribute('aria-expanded', opened);
     }
   }
 
@@ -1101,6 +1217,29 @@ export const DateRangePickerMixin = (subclass) =>
     }
   }
 
+  /**
+     * @param {Event} event
+     * @private
+     */
+  _onClick(event) {
+    // Clear button click is handled in separate listener
+    // but bubbles to the host, so we need to ignore it.
+    if (!this._isClearButton(event)) {
+      this._onHostClick(event);
+    }
+  }
+
+  /**
+   * @param {Event} event
+   * @private
+   */
+  _onHostClick(event) {
+    if (!this.autoOpenDisabled || this._noInput) {
+      event.preventDefault();
+      this.open();
+    }
+  }
+
   /**
     * Keyboard Navigation
     * @private
@@ -1322,11 +1461,6 @@ export const DateRangePickerMixin = (subclass) =>
     }
   }
 
-  /** @private */
-  get _overlayContent() {
-    return this.$.overlay.content.querySelector('#overlay-content');
-  }
-
   /**
     * Fired when the user commits a value change.
     *

diff --git a/src/vcf-date-range-picker-overlay.js b/src/vcf-date-range-picker-overlay.js
@@ -1,5 +1,6 @@
-import { OverlayElement } from '@vaadin/vaadin-overlay/src/vaadin-overlay.js';
-import { DisableUpgradeMixin } from '@polymer/polymer/lib/mixins/disable-upgrade-mixin.js';
+import { Overlay } from '@vaadin/overlay/src/vaadin-overlay.js';
+import { PositionMixin } from '@vaadin/overlay/src/vaadin-overlay-position-mixin.js';
+import './vcf-date-range-picker-overlay-content.js';
 
 /**
  * The overlay element.
@@ -11,14 +12,15 @@ import { DisableUpgradeMixin } from '@polymer/polymer/lib/mixins/disable-upgrade
  *
  * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)
  *
- * @extends Vaadin.OverlayElement
+ * @extends Vaadin.Overlay
  * @memberof Vaadin
  * @private
  */
-class DateRangePickerOverlayElement extends DisableUpgradeMixin(OverlayElement) {
+class DateRangePickerOverlayElement extends PositionMixin(Overlay) {
   static get is() {
     return 'vcf-date-range-picker-overlay';
   }
+
 }
 
 customElements.define(DateRangePickerOverlayElement.is, DateRangePickerOverlayElement);
diff --git a/src/vcf-date-range-picker.js b/src/vcf-date-range-picker.js
@@ -4,7 +4,7 @@ import '@polymer/iron-media-query/iron-media-query.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { ControlStateMixin } from '@vaadin/vaadin-control-state-mixin/vaadin-control-state-mixin.js';
 import './vcf-date-range-picker-overlay.js';
-import './vcf-date-range-picker-overlay-content.js';
+
 import { DateRangePickerMixin } from './vcf-date-range-picker-mixin.js';
 import './vcf-date-range-picker-text-field.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
@@ -208,30 +208,12 @@ import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
     <vcf-date-range-picker-overlay
         id="overlay"
         fullscreen$="[[_fullscreen]]"
+        opened="{{opened}}"
         theme$="[[__getOverlayTheme(theme, _overlayInitialized)]]"
         on-vaadin-overlay-open="_onOverlayOpened"
         on-vaadin-overlay-close="_onOverlayClosed"
         disable-upgrade>
-      <template>
-        <vcf-date-range-picker-overlay-content
-            id="overlay-content" i18n="[[i18n]]"
-            fullscreen$="[[_fullscreen]]"
-            label="[[label]]"
-            selected-start-date="{{_selectedStartDate}}"
-            selected-end-date="{{_selectedEndDate}}"
-            selecting-start-date="{{_selectingStartDate}}"
-            hide-side-panel="{{hideSidePanel}}"
-            slot="dropdown-content"
-            focused-date="{{_focusedDate}}"
-            show-week-numbers="[[showWeekNumbers]]"
-            min-date="[[_minDate]]"
-            max-date="[[_maxDate]]"
-            role="dialog"
-            on-date-tap="_closeOnTap"
-            part="overlay-content"
-            theme$="[[__getOverlayTheme(theme, _overlayInitialized)]]">
-        </vcf-date-range-picker-overlay-content>
-      </template>
+
     </vcf-date-range-picker-overlay>
     <div style="display:none">
       <slot name="presets"></slot>
@@ -248,7 +230,7 @@ import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
   }
 
   static get version() {
-    return '4.4.1';
+    return '5.0.0';
   }
 
   static get properties() {
@@ -401,6 +383,15 @@ import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
     this._classNamesForDates = newJson;
   }
 
+  // Workaround https://github.com/vaadin/web-components/issues/2855
+  /** @protected */
+  _openedChanged(opened) {
+    super._openedChanged(opened);
+
+    this.$.overlay.positionTarget = this.shadowRoot.querySelector('[part="input-field"]');
+    this.$.overlay.noVerticalOverlap = true;
+  }
+
   /** @private */
   _onVaadinOverlayClose(e) {
     if (this._openedWithFocusRing && this.hasAttribute('focused')) {