@vaadin/vaadin-date-picker 4.4.0 → 4.4.3

package/README.md

@@ -1,20 +1,18 @@
-[![npm version](https://badgen.net/npm/v/@vaadin/vaadin-date-picker)](https://www.npmjs.com/package/@vaadin/vaadin-date-picker)
-[![Bower version](https://badgen.net/github/release/vaadin/vaadin-date-picker)](https://github.com/vaadin/vaadin-date-picker/releases)
-[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/vaadin/vaadin-date-picker)
-[![Build Status](https://travis-ci.org/vaadin/vaadin-date-picker.svg?branch=master)](https://travis-ci.org/vaadin/vaadin-date-picker)
-[![Coverage Status](https://coveralls.io/repos/github/vaadin/vaadin-date-picker/badge.svg?branch=master)](https://coveralls.io/github/vaadin/vaadin-date-picker?branch=master)
-[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/vaadin/web-components?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
+# <vaadin-date-picker>
 
-[![Published on Vaadin  Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-date-picker)
-[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/vaadinvaadin-date-picker.svg)](https://vaadin.com/directory/component/vaadinvaadin-date-picker)
+> ⚠️ Starting from Vaadin 20, the source code and issues for this component are migrated to the [`vaadin/web-components`](https://github.com/vaadin/web-components/tree/master/packages/vaadin-date-picker) monorepository.
+> This repository contains the source code and releases of `<vaadin-date-picker>` for the Vaadin versions 10 to 19.
 
-# &lt;vaadin-date-picker&gt;
+[&lt;vaadin-date-picker&gt;](https://vaadin.com/components/vaadin-date-picker) is a Web Component providing a date selection field which includes a scrollable month calendar view, part of the [Vaadin components](https://vaadin.com/components).
 
 [Live Demo ↗](https://vaadin.com/components/vaadin-date-picker/html-examples)
 |
 [API documentation ↗](https://vaadin.com/components/vaadin-date-picker/html-api)
 
-[&lt;vaadin-date-picker&gt;](https://vaadin.com/components/vaadin-date-picker) is a Web Component providing a date selection field which includes a scrollable month calendar view, part of the [Vaadin components](https://vaadin.com/components).
+[![npm version](https://badgen.net/npm/v/@vaadin/vaadin-date-picker)](https://www.npmjs.com/package/@vaadin/vaadin-date-picker)
+[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/vaadin/va
+[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-date-picker)
+[![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
 
 <!--
 ```
@@ -80,18 +78,18 @@ To use the Material theme, import the correspondent file from the `theme/materia
 
 - The components with the Lumo theme:
 
-  `theme/lumo/vaadin-date-picker.html`  
+  `theme/lumo/vaadin-date-picker.html`
   `theme/lumo/vaadin-date-picker-light.html`
 
 - The components with the Material theme:
 
-  `theme/material/vaadin-date-picker.html`  
+  `theme/material/vaadin-date-picker.html`
   `theme/material/vaadin-date-picker-light.html`
 
-- Alias for `theme/lumo/vaadin-date-picker.html`  
+- Alias for `theme/lumo/vaadin-date-picker.html`
   `theme/lumo/vaadin-date-picker-light.html`:
 
-  `vaadin-date-picker.html`  
+  `vaadin-date-picker.html`
   `vaadin-date-picker-light.html`
 
 

package/package.json

@@ -10,7 +10,7 @@
   "repository": "vaadin/vaadin-date-picker",
   "homepage": "https://vaadin.com/components",
   "name": "@vaadin/vaadin-date-picker",
-  "version": "4.4.0",
+  "version": "4.4.3",
   "main": "vaadin-date-picker.js",
   "author": "Vaadin Ltd",
   "license": "Apache-2.0",
@@ -45,10 +45,9 @@
     "@vaadin/vaadin-material-styles": "^1.3.2",
     "@vaadin/vaadin-element-mixin": "^2.4.1"
   },
-  "scripts": {
-    "generate-typings": "gen-typescript-declarations --outDir . --verify"
-  },
   "devDependencies": {
+    "@web-padawan/gen-typescript-declarations": "^1.6.2",
+    "web-component-tester": "6.9.2",
     "@polymer/iron-component-page": "^4.0.0",
     "@polymer/iron-form": "^3.0.0",
     "@polymer/iron-icon": "^3.0.0",
@@ -60,5 +59,9 @@
     "@vaadin/vaadin-demo-helpers": "^3.1.0",
     "@vaadin/vaadin-custom-field": "^1.0.0",
     "@vaadin/vaadin-dialog": "^2.2.1"
+  },
+  "scripts": {
+    "generate-typings": "gen-typescript-declarations --outDir . --verify",
+    "test": "wct --npm"
   }
 }

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

@@ -307,7 +307,7 @@ export const DatePickerMixin = subclass => class VaadinDatePickerMixin extends m
       /** @private */
       _noInput: {
         type: Boolean,
-        computed: '_isNoInput(_fullscreen, _ios, i18n, i18n.*)'
+        computed: '_isNoInput(_fullscreen, _ios, i18n, i18n.*, opened, autoOpenDisabled)'
       },
 
       /** @private */
@@ -370,7 +370,7 @@ export const DatePickerMixin = subclass => class VaadinDatePickerMixin extends m
     });
 
     this.addEventListener('touchend', e => {
-      if (!isClearButton(e)) {
+      if (this._noInput && !isClearButton(e)) {
         e.preventDefault();
       }
     });
@@ -498,8 +498,16 @@ export const DatePickerMixin = subclass => class VaadinDatePickerMixin extends m
   }
 
   /** @private */
-  _isNoInput(fullscreen, ios, i18n) {
-    return !this._inputElement || fullscreen || ios || !i18n.parseDate;
+  _isNoInput(fullscreen, ios, i18n, i18nChanges, opened, autoOpenDisabled) {
+    // On fullscreen mode, text input is disabled if auto-open isn't disabled or
+    // whenever the dropdown is opened
+    const noInputOnFullscreenMode = fullscreen && (!autoOpenDisabled || opened);
+    // On iOS, text input is disabled whenever the dropdown is opened, because
+    // the virtual keyboard doesn't affect the viewport metrics and thus the
+    // dropdown could get covered by the keyboard.
+    const noInputOnIos = ios && opened;
+
+    return !this._inputElement || noInputOnFullscreenMode || noInputOnIos || !i18n.parseDate;
   }
 
   /** @private */

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

@@ -199,10 +199,10 @@ class DatePickerOverlayContentElement extends
     </div>
 
     <div on-touchend="_preventDefault" role="toolbar" part="toolbar">
-      <vaadin-button id="todayButton" part="today-button" disabled="[[!_isTodayAllowed(minDate, maxDate)]]" on-tap="_onTodayTap">
+      <vaadin-button id="todayButton" theme="tertiary" part="today-button" disabled="[[!_isTodayAllowed(minDate, maxDate)]]" on-tap="_onTodayTap">
         [[i18n.today]]
       </vaadin-button>
-      <vaadin-button id="cancelButton" part="cancel-button" on-tap="_cancel">
+      <vaadin-button id="cancelButton" theme="tertiary" part="cancel-button" on-tap="_cancel">
         [[i18n.cancel]]
       </vaadin-button>
     </div>
@@ -376,18 +376,22 @@ class DatePickerOverlayContentElement extends
   /**
    * Scrolls the month and year scrollers enough to reveal the given date.
    */
-  revealDate(date) {
+  revealDate(date, animate = true) {
     if (date) {
-      var diff = this._differenceInMonths(date, this._originDate);
-      var scrolledAboveViewport = this.$.monthScroller.position > diff;
+      const diff = this._differenceInMonths(date, this._originDate);
+      const scrolledAboveViewport = this.$.monthScroller.position > diff;
 
-      var visibleItems = this.$.monthScroller.clientHeight / this.$.monthScroller.itemHeight;
-      var scrolledBelowViewport = this.$.monthScroller.position + visibleItems - 1 < diff;
+      const visibleArea = Math.max(
+        this.$.monthScroller.itemHeight,
+        this.$.monthScroller.clientHeight - this.$.monthScroller.bufferOffset * 2
+      );
+      const visibleItems = visibleArea / this.$.monthScroller.itemHeight;
+      const scrolledBelowViewport = this.$.monthScroller.position + visibleItems - 1 < diff;
 
       if (scrolledAboveViewport) {
-        this._scrollToPosition(diff, true);
+        this._scrollToPosition(diff, animate);
       } else if (scrolledBelowViewport) {
-        this._scrollToPosition(diff - visibleItems + 1, true);
+        this._scrollToPosition(diff - visibleItems + 1, animate);
       }
     }
   }

package/src/vaadin-date-picker.js

@@ -147,7 +147,7 @@ class DatePickerElement extends
   }
 
   static get version() {
-    return '4.4.0';
+    return '4.4.3';
   }
 
   static get properties() {

package/src/vaadin-infinite-scroller.js

@@ -187,9 +187,9 @@ class InfiniteScrollerElement extends PolymerElement {
     }
 
     // Check if we scrolled enough to translate the buffer positions.
-    var bufferOffset = this.root.querySelector('.buffer').offsetTop;
-    var upperThresholdReached = scrollTop > this._buffers[1].translateY + this.itemHeight + bufferOffset;
-    var lowerThresholdReached = scrollTop < this._buffers[0].translateY + this.itemHeight + bufferOffset;
+    const offset = this.itemHeight + this.bufferOffset;
+    const upperThresholdReached = scrollTop > this._buffers[1].translateY + offset;
+    const lowerThresholdReached = scrollTop < this._buffers[0].translateY + offset;
 
     if (upperThresholdReached || lowerThresholdReached) {
       this._translateBuffer(lowerThresholdReached);
@@ -241,6 +241,13 @@ class InfiniteScrollerElement extends PolymerElement {
 
   }
 
+  /**
+   * @return {number}
+   */
+  get bufferOffset() {
+    return this._buffers[0].offsetTop;
+  }
+
   /**
    * @private
    */

package/theme/lumo/vaadin-date-picker-overlay-content-styles.js

@@ -129,14 +129,8 @@ const $_documentContainer = html`<dom-module id="lumo-date-picker-overlay-conten
         }
       }
 
-      /* Today and Cancel buttons */
-
-      /* TODO: Would be great if I could apply the "tertiary" theme from here instead of copying those styles */
       [part="toolbar"] [part\$="button"] {
-        background-color: transparent;
         margin: 0;
-        min-width: 0;
-        padding: 0 0.75em;
       }
 
       /* Narrow viewport mode (fullscreen) */