@vaadin/vaadin-combo-box 5.4.12 → 5.5.1

package/package.json

@@ -10,7 +10,7 @@
   "repository": "vaadin/vaadin-combo-box",
   "homepage": "https://vaadin.com/components",
   "name": "@vaadin/vaadin-combo-box",
-  "version": "5.4.12",
+  "version": "5.5.1",
   "main": "vaadin-combo-box.js",
   "author": "Vaadin Ltd",
   "license": "Apache-2.0",
@@ -45,10 +45,6 @@
     "@vaadin/vaadin-item": "^2.3.0",
     "@vaadin/vaadin-element-mixin": "^2.4.1"
   },
-  "scripts": {
-    "generate-typings": "gen-typescript-declarations --outDir . --verify",
-    "test": "wct --npm"
-  },
   "devDependencies": {
     "@web-padawan/gen-typescript-declarations": "^1.6.2",
     "web-component-tester": "6.9.2",
@@ -60,5 +56,9 @@
     "wct-browser-legacy": "^1.0.1",
     "@vaadin/vaadin-demo-helpers": "^3.1.0",
     "@vaadin/vaadin-dialog": "^2.5.0"
+  },
+  "scripts": {
+    "generate-typings": "gen-typescript-declarations --outDir . --verify",
+    "test": "wct --npm"
   }
 }

package/src/vaadin-combo-box-light.js

@@ -183,6 +183,7 @@ class ComboBoxLightElement extends
   set _inputElementValue(value) {
     if (this.inputElement) {
       this.inputElement[this._propertyForValue] = value;
+      this._inputElementValueChanged(value);
     }
   }
 }

package/src/vaadin-combo-box-mixin.d.ts

@@ -122,6 +122,11 @@ interface ComboBoxMixin {
    */
   selectedItem: ComboBoxItem|string|null|undefined;
 
+  /**
+   * Whether the input element has a non-empty value.
+   */
+  _hasInputValue: boolean|null|undefined;
+
   /**
    * Path for label of the item. If `items` is an array of objects, the
    * `itemLabelPath` is used to fetch the displayed string label for each
@@ -201,10 +206,19 @@ interface ComboBoxMixin {
    * Filtering and items handling
    */
   _inputValueChanged(e: Event): void;
+  _inputElementValueChanged(inputElementValue: any): void;
   _revertInputValue(): void;
+  _setInvalid(invalid: boolean): void;
 
   /**
-   * Returns true if `value` is valid, and sets the `invalid` flag appropriately.
+   * Override this method to define whether the given `invalid` state should be set.
+   */
+  _shouldSetInvalid(_invalid: boolean): boolean;
+
+  /**
+   * Validates the field and sets the `invalid` property based on the result.
+   *
+   * The method fires a `validated` event with the result of the validation.
    *
    * @returns True if the value is valid and sets the `invalid` flag appropriately
    */

package/src/vaadin-combo-box-mixin.js

@@ -166,6 +166,16 @@ export const ComboBoxMixin = subclass => class VaadinComboBoxMixinElement extend
         notify: true
       },
 
+      /**
+       * Whether the input element has a non-empty value.
+       * @protected
+       */
+      _hasInputValue: {
+        type: Boolean,
+        value: false,
+        observer: '_hasInputValueChanged',
+      },
+
       /**
        * Path for label of the item. If `items` is an array of objects, the
        * `itemLabelPath` is used to fetch the displayed string label for each
@@ -261,7 +271,8 @@ export const ComboBoxMixin = subclass => class VaadinComboBoxMixinElement extend
       '_templateOrRendererChanged(_itemTemplate, renderer)',
       '_loadingChanged(loading)',
       '_selectedItemChanged(selectedItem, itemValuePath, itemLabelPath)',
-      '_toggleElementChanged(_toggleElement)'
+      '_toggleElementChanged(_toggleElement)',
+      '_inputElementValueChanged(_inputElementValue)'
     ];
   }
 
@@ -632,6 +643,7 @@ export const ComboBoxMixin = subclass => class VaadinComboBoxMixinElement extend
     this.selectedItem = null;
 
     if (this.allowCustomValue) {
+      this._inputElementValue = '';
       this.value = '';
     }
 
@@ -758,11 +770,17 @@ export const ComboBoxMixin = subclass => class VaadinComboBoxMixinElement extend
   _inputValueChanged(e) {
     // Handle only input events from our inputElement.
     if (e.composedPath().indexOf(this.inputElement) !== -1) {
-      this._inputElementValue = this.inputElement[this._propertyForValue];
+      if (!e.__fromClearButton) {
+        this._inputElementValue = this.inputElement[this._propertyForValue];
+      }
       this._filterFromInput(e);
     }
   }
 
+  _inputElementValueChanged(inputElementValue) {
+    this._hasInputValue = inputElementValue != null ? inputElementValue.length > 0 : false;
+  }
+
   /** @private */
   _filterFromInput(e) {
     if (!this.opened && !e.__fromClearButton && !this.autoOpenDisabled) {
@@ -1090,12 +1108,49 @@ export const ComboBoxMixin = subclass => class VaadinComboBoxMixinElement extend
   }
 
   /**
-   * Returns true if `value` is valid, and sets the `invalid` flag appropriately.
+   * Observer to notify about the change of private property.
+   *
+   * @private
+   */
+  _hasInputValueChanged(hasValue, oldHasValue) {
+    if (hasValue || oldHasValue) {
+      this.dispatchEvent(new CustomEvent('has-input-value-changed'));
+    }
+  }
+
+  /**
+   * @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 and sets the `invalid` flag appropriately
    */
   validate() {
-    return !(this.invalid = !this.checkValidity());
+    const isValid = this.checkValidity();
+    this._setInvalid(!isValid);
+    this.dispatchEvent(new CustomEvent('validated', {detail: {valid: isValid}}));
+    return isValid;
   }
 
   /**
@@ -1206,4 +1261,12 @@ export const ComboBoxMixin = subclass => class VaadinComboBoxMixinElement extend
    * To comply with https://developer.mozilla.org/en-US/docs/Web/Events/change
    * @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-combo-box.js

@@ -203,7 +203,7 @@ class ComboBoxElement extends
       }
     </style>
 
-    <vaadin-text-field part="text-field" id="input" pattern="[[pattern]]" prevent-invalid-input="[[preventInvalidInput]]" value="{{_inputElementValue}}" autocomplete="off" invalid="[[invalid]]" label="[[label]]" name="[[name]]" placeholder="[[placeholder]]" required="[[required]]" disabled="[[disabled]]" readonly="[[readonly]]" helper-text="[[helperText]]" error-message="[[errorMessage]]" autocapitalize="none" autofocus="[[autofocus]]" on-change="_stopPropagation" on-input="_inputValueChanged" clear-button-visible="[[clearButtonVisible]]" theme\$="[[theme]]">
+    <vaadin-text-field part="text-field" id="input" pattern="[[pattern]]" prevent-invalid-input="[[preventInvalidInput]]" value="[[_inputElementValue]]" autocomplete="off" invalid="[[invalid]]" label="[[label]]" name="[[name]]" placeholder="[[placeholder]]" required="[[required]]" disabled="[[disabled]]" readonly="[[readonly]]" helper-text="[[helperText]]" error-message="[[errorMessage]]" autocapitalize="none" autofocus="[[autofocus]]" on-change="_stopPropagation" on-input="_inputValueChanged" clear-button-visible="[[clearButtonVisible]]" theme\$="[[theme]]">
       <slot name="prefix" slot="prefix"></slot>
       <slot name="helper" slot="helper">[[helperText]]</slot>
 
@@ -229,7 +229,7 @@ class ComboBoxElement extends
   }
 
   static get version() {
-    return '5.4.12';
+    return '5.5.1';
   }
 
   static get properties() {