@vaadin/custom-field 24.2.0-alpha7 → 24.2.0-alpha9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/custom-field",
-  "version": "24.2.0-alpha7",
+  "version": "24.2.0-alpha9",
   "publishConfig": {
     "access": "public"
   },
@@ -21,6 +21,8 @@
   "type": "module",
   "files": [
     "src",
+    "!src/vaadin-lit-custom-field.d.ts",
+    "!src/vaadin-lit-custom-field.js",
     "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
@@ -36,31 +38,31 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.2.0-alpha7",
-    "@vaadin/component-base": "24.2.0-alpha7",
-    "@vaadin/field-base": "24.2.0-alpha7",
-    "@vaadin/vaadin-lumo-styles": "24.2.0-alpha7",
-    "@vaadin/vaadin-material-styles": "24.2.0-alpha7",
-    "@vaadin/vaadin-themable-mixin": "24.2.0-alpha7"
+    "@vaadin/a11y-base": "24.2.0-alpha9",
+    "@vaadin/component-base": "24.2.0-alpha9",
+    "@vaadin/field-base": "24.2.0-alpha9",
+    "@vaadin/vaadin-lumo-styles": "24.2.0-alpha9",
+    "@vaadin/vaadin-material-styles": "24.2.0-alpha9",
+    "@vaadin/vaadin-themable-mixin": "24.2.0-alpha9"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/combo-box": "24.2.0-alpha7",
-    "@vaadin/date-picker": "24.2.0-alpha7",
-    "@vaadin/email-field": "24.2.0-alpha7",
-    "@vaadin/form-layout": "24.2.0-alpha7",
-    "@vaadin/number-field": "24.2.0-alpha7",
-    "@vaadin/password-field": "24.2.0-alpha7",
-    "@vaadin/select": "24.2.0-alpha7",
-    "@vaadin/testing-helpers": "^0.4.3",
-    "@vaadin/text-area": "24.2.0-alpha7",
-    "@vaadin/text-field": "24.2.0-alpha7",
-    "@vaadin/time-picker": "24.2.0-alpha7",
+    "@vaadin/combo-box": "24.2.0-alpha9",
+    "@vaadin/date-picker": "24.2.0-alpha9",
+    "@vaadin/email-field": "24.2.0-alpha9",
+    "@vaadin/form-layout": "24.2.0-alpha9",
+    "@vaadin/number-field": "24.2.0-alpha9",
+    "@vaadin/password-field": "24.2.0-alpha9",
+    "@vaadin/select": "24.2.0-alpha9",
+    "@vaadin/testing-helpers": "^0.5.0",
+    "@vaadin/text-area": "24.2.0-alpha9",
+    "@vaadin/text-field": "24.2.0-alpha9",
+    "@vaadin/time-picker": "24.2.0-alpha9",
     "sinon": "^13.0.2"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "81ecf12d2d59a3e5b467273c37a391e31932dc9c"
+  "gitHead": "e9765733fea96542e379e02e6f42b07145893140"
 }

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

@@ -105,6 +105,19 @@ export const CustomFieldMixin = (superClass) =>
         parseValue: {
           type: Function,
         },
+
+        /**
+         * Whether the field is dirty.
+         *
+         * The field is automatically marked as dirty once the user triggers
+         * an `input` or `change` event. Additionally, the field can be manually
+         * marked as dirty by setting the property to `true`.
+         */
+        dirty: {
+          type: Boolean,
+          value: false,
+          notify: true,
+        },
       };
     }
 
@@ -210,9 +223,15 @@ export const CustomFieldMixin = (superClass) =>
     }
 
     /** @protected */
-    _onInputChange(event) {
+    _onInput() {
+      this.dirty = true;
+    }
+
+    /** @protected */
+    _onChange(event) {
       // Stop native change events
       event.stopPropagation();
+      this.dirty = true;
 
       this.__setValue();
       this.validate();

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

@@ -16,6 +16,11 @@ export type CustomFieldChangeEvent = Event & {
   target: CustomField;
 };
 
+/**
+ * Fired when the `dirty` property changes.
+ */
+export type CustomFieldDirtyChangedEvent = CustomEvent<{ value: boolean }>;
+
 /**
  * Fired when the `invalid` property changes.
  */
@@ -39,6 +44,8 @@ export type CustomFieldInternalTabEvent = Event & {
 };
 
 export interface CustomFieldCustomEventMap {
+  'dirty-changed': CustomFieldDirtyChangedEvent;
+
   'invalid-changed': CustomFieldInvalidChangedEvent;
 
   'value-changed': CustomFieldValueChangedEvent;
@@ -91,6 +98,7 @@ export interface CustomFieldEventMap extends HTMLElementEventMap, CustomFieldCus
  *
  * @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} dirty-changed - Fired when the `dirty` property changes.
  * @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

@@ -50,6 +50,7 @@ registerStyles('vaadin-custom-field', customFieldStyles, { moduleId: 'vaadin-cus
  *
  * @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} dirty-changed - Fired when the `dirty` property changes.
  * @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.
@@ -72,7 +73,7 @@ class CustomField extends CustomFieldMixin(ThemableMixin(ElementMixin(PolymerEle
           <span part="required-indicator" aria-hidden="true"></span>
         </div>
 
-        <div class="inputs-wrapper" on-change="_onInputChange">
+        <div class="inputs-wrapper" on-change="_onChange" on-input="_onInput">
           <slot id="slot"></slot>
         </div>
 

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/custom-field",
-  "version": "24.2.0-alpha7",
+  "version": "24.2.0-alpha9",
   "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.2.0-alpha7/#/elements/vaadin-custom-field#property-formatValue)\nand [`parseValue`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha7/#/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.2.0-alpha9/#/elements/vaadin-custom-field#property-formatValue)\nand [`parseValue`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha9/#/elements/vaadin-custom-field#property-parseValue)\nproperties to customize this behavior.",
               "value": {
                 "type": [
                   "string",
@@ -109,6 +109,17 @@
                 ]
               }
             },
+            {
+              "name": "dirty",
+              "description": "Whether the field is dirty.\n\nThe field is automatically marked as dirty once the user triggers\nan `input` or `change` event. Additionally, the field can be manually\nmarked as dirty by setting the property to `true`.",
+              "value": {
+                "type": [
+                  "boolean",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
             {
               "name": "theme",
               "description": "The theme variants to apply to the component.",
@@ -213,7 +224,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.2.0-alpha7/#/elements/vaadin-custom-field#property-formatValue)\nand [`parseValue`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha7/#/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.2.0-alpha9/#/elements/vaadin-custom-field#property-formatValue)\nand [`parseValue`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha9/#/elements/vaadin-custom-field#property-parseValue)\nproperties to customize this behavior.",
                 "value": {
                   "type": [
                     "string",
@@ -241,6 +252,17 @@
                     "undefined"
                   ]
                 }
+              },
+              {
+                "name": "dirty",
+                "description": "Whether the field is dirty.\n\nThe field is automatically marked as dirty once the user triggers\nan `input` or `change` event. Additionally, the field can be manually\nmarked as dirty by setting the property to `true`.",
+                "value": {
+                  "type": [
+                    "boolean",
+                    "null",
+                    "undefined"
+                  ]
+                }
               }
             ],
             "events": [
@@ -259,6 +281,10 @@
               {
                 "name": "value-changed",
                 "description": "Fired when the `value` property changes."
+              },
+              {
+                "name": "dirty-changed",
+                "description": "Fired when the `dirty` property changes."
               }
             ]
           }

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/custom-field",
-  "version": "24.2.0-alpha7",
+  "version": "24.2.0-alpha9",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -33,6 +33,13 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "?dirty",
+              "description": "Whether the field is dirty.\n\nThe field is automatically marked as dirty once the user triggers\nan `input` or `change` event. Additionally, the field can be manually\nmarked as dirty by setting the property to `true`.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": ".label",
               "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
@@ -77,7 +84,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.2.0-alpha7/#/elements/vaadin-custom-field#property-formatValue)\nand [`parseValue`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha7/#/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.2.0-alpha9/#/elements/vaadin-custom-field#property-formatValue)\nand [`parseValue`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha9/#/elements/vaadin-custom-field#property-parseValue)\nproperties to customize this behavior.",
               "value": {
                 "kind": "expression"
               }
@@ -123,6 +130,13 @@
               "value": {
                 "kind": "expression"
               }
+            },
+            {
+              "name": "@dirty-changed",
+              "description": "Fired when the `dirty` property changes.",
+              "value": {
+                "kind": "expression"
+              }
             }
           ]
         }