@vaadin/custom-field 24.5.0-rc1 → 24.6.0-alpha1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/custom-field",
-  "version": "24.5.0-rc1",
+  "version": "24.6.0-alpha1",
   "publishConfig": {
     "access": "public"
   },
@@ -38,32 +38,32 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.5.0-rc1",
-    "@vaadin/component-base": "24.5.0-rc1",
-    "@vaadin/field-base": "24.5.0-rc1",
-    "@vaadin/vaadin-lumo-styles": "24.5.0-rc1",
-    "@vaadin/vaadin-material-styles": "24.5.0-rc1",
-    "@vaadin/vaadin-themable-mixin": "24.5.0-rc1",
+    "@vaadin/a11y-base": "24.6.0-alpha1",
+    "@vaadin/component-base": "24.6.0-alpha1",
+    "@vaadin/field-base": "24.6.0-alpha1",
+    "@vaadin/vaadin-lumo-styles": "24.6.0-alpha1",
+    "@vaadin/vaadin-material-styles": "24.6.0-alpha1",
+    "@vaadin/vaadin-themable-mixin": "24.6.0-alpha1",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.5.0-rc1",
-    "@vaadin/combo-box": "24.5.0-rc1",
-    "@vaadin/date-picker": "24.5.0-rc1",
-    "@vaadin/email-field": "24.5.0-rc1",
-    "@vaadin/form-layout": "24.5.0-rc1",
-    "@vaadin/number-field": "24.5.0-rc1",
-    "@vaadin/password-field": "24.5.0-rc1",
-    "@vaadin/select": "24.5.0-rc1",
+    "@vaadin/chai-plugins": "24.6.0-alpha1",
+    "@vaadin/combo-box": "24.6.0-alpha1",
+    "@vaadin/date-picker": "24.6.0-alpha1",
+    "@vaadin/email-field": "24.6.0-alpha1",
+    "@vaadin/form-layout": "24.6.0-alpha1",
+    "@vaadin/number-field": "24.6.0-alpha1",
+    "@vaadin/password-field": "24.6.0-alpha1",
+    "@vaadin/select": "24.6.0-alpha1",
     "@vaadin/testing-helpers": "^1.0.0",
-    "@vaadin/text-area": "24.5.0-rc1",
-    "@vaadin/text-field": "24.5.0-rc1",
-    "@vaadin/time-picker": "24.5.0-rc1",
+    "@vaadin/text-area": "24.6.0-alpha1",
+    "@vaadin/text-field": "24.6.0-alpha1",
+    "@vaadin/time-picker": "24.6.0-alpha1",
     "sinon": "^18.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "a8ae853ab69d7938cf507843784f1551a2eeb972"
+  "gitHead": "ae1fb0e6e7ce925999051c6cc62ba8476264c63f"
 }

package/src/vaadin-custom-field-mixin.js

@@ -65,6 +65,7 @@ export const CustomFieldMixin = (superClass) =>
         inputs: {
           type: Array,
           readOnly: true,
+          observer: '__inputsChanged',
         },
 
         /**
@@ -190,6 +191,21 @@ export const CustomFieldMixin = (superClass) =>
       return true;
     }
 
+    /**
+     * Override an observer from `FieldMixin`
+     * to validate when required is removed.
+     *
+     * @protected
+     * @override
+     */
+    _requiredChanged(required) {
+      super._requiredChanged(required);
+
+      if (required === false) {
+        this.validate();
+      }
+    }
+
     /**
      * @param {KeyboardEvent} e
      * @protected
@@ -249,7 +265,20 @@ export const CustomFieldMixin = (superClass) =>
     /** @private */
     __setInputsFromSlot() {
       this._setInputs(this.__getInputsFromSlot());
-      this.__setValue();
+    }
+
+    /** @private */
+    __inputsChanged(inputs, oldInputs) {
+      if (inputs.length === 0) {
+        return;
+      }
+
+      // When inputs are first initialized, apply value set with property.
+      if (this.value && this.value !== '\t' && (!oldInputs || oldInputs.length === 0)) {
+        this.__applyInputsValue(this.value);
+      } else {
+        this.__setValue();
+      }
     }
 
     /** @private */
@@ -259,24 +288,31 @@ export const CustomFieldMixin = (superClass) =>
 
     /** @private */
     __valueChanged(value, oldValue) {
+      this.__toggleHasValue(value);
+
       if (this.__settingValue || !this.inputs) {
         return;
       }
 
-      this.__toggleHasValue(value);
+      this.__applyInputsValue(value);
 
+      if (oldValue !== undefined) {
+        this.validate();
+      }
+    }
+
+    /** @private */
+    __applyInputsValue(value) {
       const parseFn = this.parseValue || defaultParseValue;
       const valuesArray = parseFn.apply(this, [value]);
+
       if (!valuesArray || valuesArray.length === 0) {
         console.warn('Value parser has not provided values array');
         return;
       }
 
-      this.inputs.forEach((input, id) => {
-        input.value = valuesArray[id];
+      this.inputs.forEach((input, idx) => {
+        input.value = valuesArray[idx];
       });
-      if (oldValue !== undefined) {
-        this.validate();
-      }
     }
   };

package/src/vaadin-custom-field.d.ts

@@ -33,6 +33,7 @@ export type CustomFieldValidatedEvent = CustomEvent<{ valid: boolean }>;
 
 /**
  * Fired on Tab keydown triggered from the internal inputs, meaning focus will not leave the inputs.
+ * @deprecated
  */
 export type CustomFieldInternalTabEvent = Event & {
   target: CustomField;
@@ -91,7 +92,6 @@ export interface CustomFieldEventMap extends HTMLElementEventMap, CustomFieldCus
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
  * @fires {Event} change - Fired when the user commits a value change for any of the internal inputs.
- * @fires {Event} internal-tab - Fired on Tab keydown triggered from the internal inputs, meaning focus will not leave the inputs.
  * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  * @fires {CustomEvent} validated - Fired whenever the field is validated.

package/src/vaadin-custom-field.js

@@ -51,7 +51,6 @@ registerStyles('vaadin-custom-field', customFieldStyles, { moduleId: 'vaadin-cus
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
  * @fires {Event} change - Fired when the user commits a value change for any of the internal inputs.
- * @fires {Event} internal-tab - Fired on Tab keydown triggered from the internal inputs, meaning focus will not leave the inputs.
  * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  * @fires {CustomEvent} validated - Fired whenever the field is validated.

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/custom-field",
-  "version": "24.5.0-rc1",
+  "version": "24.6.0-alpha1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -100,7 +100,7 @@
             },
             {
               "name": "value",
-              "description": "The value of the field. When wrapping several inputs, it will contain `\\t`\n(Tab character) as a delimiter indicating parts intended to be used as the\ncorresponding inputs values.\nUse the [`formatValue`](https://cdn.vaadin.com/vaadin-web-components/24.5.0-rc1/#/elements/vaadin-custom-field#property-formatValue)\nand [`parseValue`](https://cdn.vaadin.com/vaadin-web-components/24.5.0-rc1/#/elements/vaadin-custom-field#property-parseValue)\nproperties to customize this behavior.",
+              "description": "The value of the field. When wrapping several inputs, it will contain `\\t`\n(Tab character) as a delimiter indicating parts intended to be used as the\ncorresponding inputs values.\nUse the [`formatValue`](https://cdn.vaadin.com/vaadin-web-components/24.6.0-alpha1/#/elements/vaadin-custom-field#property-formatValue)\nand [`parseValue`](https://cdn.vaadin.com/vaadin-web-components/24.6.0-alpha1/#/elements/vaadin-custom-field#property-parseValue)\nproperties to customize this behavior.",
               "value": {
                 "type": [
                   "string",
@@ -213,7 +213,7 @@
               },
               {
                 "name": "value",
-                "description": "The value of the field. When wrapping several inputs, it will contain `\\t`\n(Tab character) as a delimiter indicating parts intended to be used as the\ncorresponding inputs values.\nUse the [`formatValue`](https://cdn.vaadin.com/vaadin-web-components/24.5.0-rc1/#/elements/vaadin-custom-field#property-formatValue)\nand [`parseValue`](https://cdn.vaadin.com/vaadin-web-components/24.5.0-rc1/#/elements/vaadin-custom-field#property-parseValue)\nproperties to customize this behavior.",
+                "description": "The value of the field. When wrapping several inputs, it will contain `\\t`\n(Tab character) as a delimiter indicating parts intended to be used as the\ncorresponding inputs values.\nUse the [`formatValue`](https://cdn.vaadin.com/vaadin-web-components/24.6.0-alpha1/#/elements/vaadin-custom-field#property-formatValue)\nand [`parseValue`](https://cdn.vaadin.com/vaadin-web-components/24.6.0-alpha1/#/elements/vaadin-custom-field#property-parseValue)\nproperties to customize this behavior.",
                 "value": {
                   "type": [
                     "string",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/custom-field",
-  "version": "24.5.0-rc1",
+  "version": "24.6.0-alpha1",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -77,7 +77,7 @@
             },
             {
               "name": ".value",
-              "description": "The value of the field. When wrapping several inputs, it will contain `\\t`\n(Tab character) as a delimiter indicating parts intended to be used as the\ncorresponding inputs values.\nUse the [`formatValue`](https://cdn.vaadin.com/vaadin-web-components/24.5.0-rc1/#/elements/vaadin-custom-field#property-formatValue)\nand [`parseValue`](https://cdn.vaadin.com/vaadin-web-components/24.5.0-rc1/#/elements/vaadin-custom-field#property-parseValue)\nproperties to customize this behavior.",
+              "description": "The value of the field. When wrapping several inputs, it will contain `\\t`\n(Tab character) as a delimiter indicating parts intended to be used as the\ncorresponding inputs values.\nUse the [`formatValue`](https://cdn.vaadin.com/vaadin-web-components/24.6.0-alpha1/#/elements/vaadin-custom-field#property-formatValue)\nand [`parseValue`](https://cdn.vaadin.com/vaadin-web-components/24.6.0-alpha1/#/elements/vaadin-custom-field#property-parseValue)\nproperties to customize this behavior.",
               "value": {
                 "kind": "expression"
               }