@vaadin/vaadin-date-picker 4.3.0 → 4.4.2

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.3.0",
+  "version": "4.4.2",
   "main": "vaadin-date-picker.js",
   "author": "Vaadin Ltd",
   "license": "Apache-2.0",
@@ -25,6 +25,8 @@
     "theme"
   ],
   "resolutions": {
+    "es-abstract": "1.17.6",
+    "@types/doctrine": "0.0.3",
     "inherits": "2.0.3",
     "samsam": "1.1.3",
     "supports-color": "3.1.2",
@@ -37,7 +39,7 @@
     "@polymer/iron-resizable-behavior": "^3.0.0",
     "@polymer/polymer": "^3.0.0",
     "@vaadin/vaadin-button": "^2.4.0",
-    "@vaadin/vaadin-text-field": "^2.7.0",
+    "@vaadin/vaadin-text-field": "^2.8.0",
     "@vaadin/vaadin-themable-mixin": "^1.6.1",
     "@vaadin/vaadin-control-state-mixin": "^2.2.2",
     "@vaadin/vaadin-overlay": "^3.5.0",
@@ -46,9 +48,9 @@
     "@vaadin/vaadin-element-mixin": "^2.4.1"
   },
   "scripts": {
-    "generate-typings": "gen-typescript-declarations --outDir . --verify"
-  },
-  "devDependencies": {
+  "generate-typings": "gen-typescript-declarations --outDir . --verify"
+},
+"devDependencies": {
     "@polymer/iron-component-page": "^4.0.0",
     "@polymer/iron-form": "^3.0.0",
     "@polymer/iron-icon": "^3.0.0",

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>

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

@@ -134,6 +134,12 @@ declare class DatePickerElement extends
    */
   placeholder: string|null|undefined;
 
+  /**
+   * String used for the helper text.
+   * @attr {string} helper-text
+   */
+  helperText: string|null|undefined;
+
   /**
    * Set to true to make this element read-only.
    */

package/src/vaadin-date-picker.js

@@ -124,8 +124,9 @@ class DatePickerElement extends
     </style>
 
 
-    <vaadin-date-picker-text-field id="input" role="application" autocomplete="off" on-focus="_focus" value="{{_userInputValue}}" invalid="[[invalid]]" label="[[label]]" name="[[name]]" placeholder="[[placeholder]]" required="[[required]]" disabled="[[disabled]]" readonly="[[readonly]]" error-message="[[errorMessage]]" clear-button-visible="[[clearButtonVisible]]" aria-label\$="[[label]]" part="text-field" theme\$="[[theme]]">
+    <vaadin-date-picker-text-field id="input" role="application" autocomplete="off" on-focus="_focus" value="{{_userInputValue}}" invalid="[[invalid]]" label="[[label]]" name="[[name]]" placeholder="[[placeholder]]" required="[[required]]" disabled="[[disabled]]" readonly="[[readonly]]" error-message="[[errorMessage]]" clear-button-visible="[[clearButtonVisible]]" aria-label\$="[[label]]" part="text-field" helper-text="[[helperText]]" theme\$="[[theme]]">
       <slot name="prefix" slot="prefix"></slot>
+      <slot name="helper" slot="helper">[[helperText]]</slot>
       <div part="toggle-button" slot="suffix" on-tap="_toggle" role="button" aria-label\$="[[i18n.calendar]]" aria-expanded\$="[[_getAriaExpanded(opened)]]"></div>
     </vaadin-date-picker-text-field>
 
@@ -146,7 +147,7 @@ class DatePickerElement extends
   }
 
   static get version() {
-    return '4.3.0';
+    return '4.4.2';
   }
 
   static get properties() {
@@ -182,6 +183,15 @@ class DatePickerElement extends
        */
       placeholder: String,
 
+      /**
+       * String used for the helper text.
+       * @attr {string} helper-text
+       */
+      helperText: {
+        type: String,
+        value: ''
+      },
+
       /**
        * Set to true to make this element read-only.
        * @type {boolean}

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) */