@vaadin/vaadin-date-picker 4.5.0 → 4.6.0

package/package.json

@@ -10,7 +10,7 @@
   "repository": "vaadin/vaadin-date-picker",
   "homepage": "https://vaadin.com/components",
   "name": "@vaadin/vaadin-date-picker",
-  "version": "4.5.0",
+  "version": "4.6.0",
   "main": "vaadin-date-picker.js",
   "author": "Vaadin Ltd",
   "license": "Apache-2.0",
@@ -37,7 +37,7 @@
     "@polymer/iron-resizable-behavior": "^3.0.0",
     "@polymer/polymer": "^3.0.0",
     "@vaadin/vaadin-button": "^2.4.0",
-    "@vaadin/vaadin-text-field": "^2.8.0",
+    "@vaadin/vaadin-text-field": "^2.10.0",
     "@vaadin/vaadin-themable-mixin": "^1.6.1",
     "@vaadin/vaadin-control-state-mixin": "^2.2.2",
     "@vaadin/vaadin-overlay": "^3.5.0",

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

@@ -72,8 +72,14 @@ declare class DatePickerLightElement extends
   ThemableMixin(
   DatePickerMixin(
   PolymerElement)) {
+
+  /**
+   * The method is overridden to allow the customization of
+   * the input element value property name, which can be
+   * achieved by providing a custom `attrForValue` property.
+   */
+  readonly _inputElementValueProperty: string;
   _overlayInitialized: boolean;
-  _inputValue: string|undefined;
 
   /**
    * Name of the two-way data-bindable property representing the

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

@@ -130,15 +130,17 @@ class DatePickerLightElement extends
     return this.querySelector('vaadin-text-field,iron-input,paper-input,.paper-input-input,.input');
   }
 
-  set _inputValue(value) {
-    if (this._inputElement) {
-      this._inputElement[dashToCamelCase(this.attrForValue)] = value;
-    }
-  }
-
-  /** @return {string | undefined} */
-  get _inputValue() {
-    return this._inputElement && this._inputElement[dashToCamelCase(this.attrForValue)];
+  /**
+   * The method is overridden to allow the customization of
+   * the input element value property name, which can be
+   * achieved by providing a custom `attrForValue` property.
+   *
+   * @protected
+   * @override
+   * @return {string}
+   */
+  get _inputElementValueProperty() {
+    return dashToCamelCase(this.attrForValue);
   }
 }
 

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

@@ -33,6 +33,18 @@ export {DatePickerMixinConstructor};
 interface DatePickerMixin {
   readonly _inputElement: HTMLElement|null;
 
+  /**
+   * A property for accessing the input element's value.
+   *
+   * Override this getter if the property is different from the default `value` one.
+   */
+  readonly _inputElementValueProperty: string;
+
+  /**
+   * The input element's value.
+   */
+  _inputElementValue: string;
+
   /**
    * The current selected date.
    */
@@ -204,6 +216,14 @@ interface DatePickerMixin {
    * The latest date that can be selected. All later dates will be disabled.
    */
   _maxDate: Date|string|null;
+
+  /**
+   * The property indicates true only if the input has been entered by the user.
+   * In the case of programmatic changes, the property is reset to false.
+   * Read more about why this workaround is needed:
+   * https://github.com/vaadin/web-components/issues/5639
+   */
+  _hasInputValue: boolean|null|undefined;
   _overlayInitialized: boolean|null|undefined;
   ready(): void;
   disconnectedCallback(): void;
@@ -219,11 +239,19 @@ interface DatePickerMixin {
   close(): void;
   _onOverlayOpened(): void;
   _onOverlayClosed(): void;
+  _setInvalid(invalid: boolean): void;
+
+  /**
+   * Override this method to define whether the given `invalid` state should be set.
+   */
+  _shouldSetInvalid(_invalid: boolean): boolean;
 
   /**
-   * Returns true if `value` is valid, and sets the `invalid` flag appropriately.
+   * Validates the field and sets the `invalid` property based on the result.
    *
-   * @returns True if the value is valid and sets the `invalid` flag appropriately
+   * The method fires a `validated` event with the result of the validation.
+   *
+   * @returns True if the value is valid.
    */
   validate(): boolean;
 
@@ -236,6 +264,11 @@ interface DatePickerMixin {
    */
   checkValidity(): boolean;
   _focus(): void;
+
+  /**
+   * Sets the `_hasInputValue` property based on the `input` event.
+   */
+  _setHasInputValue(event: InputEvent|null): void;
 }
 
 import {DatePickerI18n} from '../@types/interfaces';

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

@@ -332,6 +332,20 @@ export const DatePickerMixin = subclass => class VaadinDatePickerMixin extends m
         computed: '_isNoInput(_fullscreen, _ios, i18n, i18n.*, opened, autoOpenDisabled)'
       },
 
+      /**
+       * The property indicates true only if the input has been entered by the user.
+       * In the case of programmatic changes, the property is reset to false.
+       * Read more about why this workaround is needed:
+       * https://github.com/vaadin/web-components/issues/5639
+       *
+       * @protected
+       */
+      _hasInputValue: {
+        type: Boolean,
+        value: false,
+        observer: '_hasInputValueChanged',
+      },
+
       /** @private */
       _ios: {
         type: Boolean,
@@ -397,7 +411,7 @@ export const DatePickerMixin = subclass => class VaadinDatePickerMixin extends m
       }
     });
     this.addEventListener('keydown', this._onKeydown.bind(this));
-    this.addEventListener('input', this._onUserInput.bind(this));
+    this.addEventListener('input', this.__onUserInput.bind(this));
     this.addEventListener('focus', e => this._noInput && e.target.blur());
     this.addEventListener('blur', e => {
       if (!this.opened) {
@@ -408,7 +422,7 @@ export const DatePickerMixin = subclass => class VaadinDatePickerMixin extends m
           }
         }
 
-        if (this._inputElement.value === '' && this.__dispatchChange) {
+        if (this._inputElementValue === '' && this.__dispatchChange) {
           this.validate();
           this.value = '';
           this.__dispatchChange = false;
@@ -774,7 +788,7 @@ export const DatePickerMixin = subclass => class VaadinDatePickerMixin extends m
     // Select the parsed input or focused date
     this._ignoreFocusedDateChange = true;
     if (this.i18n.parseDate) {
-      const inputValue = this._inputValue || '';
+      const inputValue = this._inputElementValue || '';
       const parsedDate = this._getParsedDate(inputValue);
 
       if (this._isValidDate(parsedDate)) {
@@ -818,16 +832,80 @@ export const DatePickerMixin = subclass => class VaadinDatePickerMixin extends m
   }
 
   /**
-   * Returns true if `value` is valid, and sets the `invalid` flag appropriately.
+   * A property for accessing the input element's value.
+   *
+   * Override this getter if the property is different from the default `value` one.
    *
-   * @param {string=} value Value to validate. Optional, defaults to user's input value.
-   * @return {boolean} True if the value is valid and sets the `invalid` flag appropriately
+   * @protected
+   * @return {string}
+   */
+  get _inputElementValueProperty() {
+    return 'value';
+  }
+
+  /**
+   * The input element's value.
+   *
+   * @protected
+   * @return {string}
+   */
+  get _inputElementValue() {
+    return this._inputElement ? this._inputElement[this._inputElementValueProperty] : undefined;
+  }
+
+  /**
+   * The setter resets the `_hasInputValue` property
+   * to false when the input element's value is updated programmatically.
+   * In date-picker, `_hasInputValue` is supposed to indicate true only
+   * if the input has been entered by the user.
+   * Read more about why this workaround is needed:
+   * https://github.com/vaadin/web-components/issues/5639
+   *
+   * @protected
+   */
+  set _inputElementValue(value) {
+    if (this._inputElement) {
+      this._inputElement[this._inputElementValueProperty] = value;
+      this._hasInputValue = false;
+    }
+  }
+
+  /**
+   * @param {boolean} invalid
+   * @protected
+   */
+  _setInvalid(invalid) {
+    if (this._shouldSetInvalid(invalid)) {
+      this.invalid = invalid;
+    }
+  }
+
+  /**
+   * Override this method to define whether the given `invalid` state should be set.
+   *
+   * @param {boolean} _invalid
+   * @return {boolean}
+   * @protected
+   */
+  _shouldSetInvalid(_invalid) {
+    return true;
+  }
+
+  /**
+   * Validates the field and sets the `invalid` property based on the result.
+   *
+   * The method fires a `validated` event with the result of the validation.
+   *
+   * @return {boolean} True if the value is valid.
    */
   validate() {
-    // Note (Yuriy): Workaround `this._inputValue` is used in order
-    // to avoid breaking change on custom `checkValidity`.
-    // Can be removed with next major.
-    return !(this.invalid = !this.checkValidity(this._inputValue));
+    // Note (Yuriy): this._inputElementValue is passed to checkValidity() as an argument to maintain
+    // backward compatibility in case it's being used in a custom implementation of checkValidity().
+    // The workaround can be removed with the next major.
+    const isValid = this.checkValidity(this._inputElementValue);
+    this._setInvalid(!isValid);
+    this.dispatchEvent(new CustomEvent('validated', {detail: {valid: isValid}}));
+    return isValid;
   }
 
   /**
@@ -839,8 +917,8 @@ export const DatePickerMixin = subclass => class VaadinDatePickerMixin extends m
    * @return {boolean} True if the value is valid
    */
   checkValidity() {
-    const inputValid = !this._inputValue ||
-      (this._selectedDate && this._inputValue === this._getFormattedDate(this.i18n.formatDate, this._selectedDate));
+    const inputValid = !this._inputElementValue ||
+      (this._selectedDate && this._inputElementValue === this._getFormattedDate(this.i18n.formatDate, this._selectedDate));
     const minMaxValid = !this._selectedDate ||
       DatePickerHelper._dateAllowed(this._selectedDate, this._minDate, this._maxDate);
 
@@ -857,7 +935,7 @@ export const DatePickerMixin = subclass => class VaadinDatePickerMixin extends m
       }
     }
 
-    return inputValid && minMaxValid && inputValidity;
+    return !!(inputValid && minMaxValid && inputValidity);
   }
 
   /** @private */
@@ -879,12 +957,12 @@ export const DatePickerMixin = subclass => class VaadinDatePickerMixin extends m
   /** @private */
   _focusAndSelect() {
     this._focus();
-    this._setSelectionRange(0, this._inputValue.length);
+    this._setSelectionRange(0, this._inputElementValue.length);
   }
 
   /** @private */
   _applyInputValue(date) {
-    this._inputValue = date ? this._getFormattedDate(this.i18n.formatDate, date) : '';
+    this._inputElementValue = date ? this._getFormattedDate(this.i18n.formatDate, date) : '';
   }
 
   /** @private */
@@ -957,7 +1035,7 @@ export const DatePickerMixin = subclass => class VaadinDatePickerMixin extends m
           }
           this.close();
         } else {
-          if (!isValidDate && this._inputElement.value !== '') {
+          if (!isValidDate && this._inputElementValue !== '') {
             this.validate();
           } else {
             const oldValue = this.value;
@@ -975,7 +1053,7 @@ export const DatePickerMixin = subclass => class VaadinDatePickerMixin extends m
           this._close();
         } else if (this.autoOpenDisabled) {
           // Do not restore selected date if Esc was pressed after clearing input field
-          if (this._inputElement.value === '') {
+          if (this._inputElementValue === '') {
             this._selectedDate = null;
           }
           this._applyInputValue(this._selectedDate);
@@ -1002,16 +1080,50 @@ export const DatePickerMixin = subclass => class VaadinDatePickerMixin extends m
   }
 
   /** @private */
-  _getParsedDate(inputValue = this._inputValue) {
+  _getParsedDate(inputValue = this._inputElementValue) {
     const dateObject = this.i18n.parseDate && this.i18n.parseDate(inputValue);
     const parsedDate = dateObject &&
       this._parseDate(dateObject.year + '-' + (dateObject.month + 1) + '-' + dateObject.day);
     return parsedDate;
   }
 
+  /**
+   * Sets the `_hasInputValue` property based on the `input` event.
+   *
+   * @param {InputEvent} event
+   * @protected
+   */
+  _setHasInputValue(event) {
+    const target = event.composedPath()[0];
+    this._hasInputValue = target.value.length > 0;
+  }
+
+  /**
+   * An input event listener used to update `_hasInputValue` property.
+   * Do not override this method.
+   *
+   * @param {Event} event
+   * @private
+   */
+  __onUserInput(event) {
+    this._setHasInputValue(event);
+    this._onUserInput(event);
+  }
+
+  /**
+   * Observer to notify about the change of private property.
+   *
+   * @private
+   */
+  _hasInputValueChanged(hasValue, oldHasValue) {
+    if (hasValue || oldHasValue) {
+      this.dispatchEvent(new CustomEvent('has-input-value-changed'));
+    }
+  }
+
   /** @private */
   _onUserInput(e) {
-    if (!this.opened && this._inputElement.value && !this.autoOpenDisabled) {
+    if (!this.opened && this._inputElementValue && !this.autoOpenDisabled) {
       this.open();
     }
     this._userInputValueChanged();
@@ -1026,7 +1138,7 @@ export const DatePickerMixin = subclass => class VaadinDatePickerMixin extends m
 
   /** @private */
   _userInputValueChanged(value) {
-    if (this._inputValue) {
+    if (this._inputElementValue) {
       const parsedDate = this._getParsedDate();
 
       if (this._isValidDate(parsedDate)) {
@@ -1055,4 +1167,12 @@ export const DatePickerMixin = subclass => class VaadinDatePickerMixin extends m
    *
    * @event change
    */
+
+  /**
+   * Fired whenever the field is validated.
+   *
+   * @event validated
+   * @param {Object} detail
+   * @param {boolean} detail.valid the result of the validation.
+   */
 };

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

@@ -115,7 +115,6 @@ declare class DatePickerElement extends
    * Set to true to disable this element.
    */
   disabled: boolean;
-  _inputValue: string;
 
   /**
    * Set to true to display the clear icon which clears the input.

package/src/vaadin-date-picker.js

@@ -147,7 +147,7 @@ class DatePickerElement extends
   }
 
   static get version() {
-    return '4.5.0';
+    return '4.6.0';
   }
 
   static get properties() {
@@ -235,7 +235,7 @@ class DatePickerElement extends
     this._inputElement.addEventListener('change', (e) => {
       // For change event on text-field blur, after the field is cleared,
       // we schedule change event to be dispatched on date-picker blur.
-      if (this._inputElement.value === '' && !e.__fromClearButton) {
+      if (this._inputElementValue === '' && !e.__fromClearButton) {
         this.__dispatchChange = true;
       }
     });
@@ -267,15 +267,6 @@ class DatePickerElement extends
     return this.$.input;
   }
 
-  set _inputValue(value) {
-    this._inputElement.value = value;
-  }
-
-  /** @return {string} */
-  get _inputValue() {
-    return this._inputElement.value;
-  }
-
   /** @private */
   _getAriaExpanded(opened) {
     return Boolean(opened).toString();