@vaadin/field-base 24.2.0-dev.e9803eea7 → 24.3.0-alpha1

package/index.d.ts

@@ -7,6 +7,5 @@ export { InputMixin } from './src/input-mixin.js';
 export { LabelledInputController } from './src/labelled-input-controller.js';
 export { LabelMixin } from './src/label-mixin.js';
 export { PatternMixin } from './src/pattern-mixin.js';
-export { SlotStylesMixin } from './src/slot-styles-mixin.js';
 export { TextAreaController } from './src/text-area-controller.js';
 export { ValidateMixin } from './src/validate-mixin.js';

package/index.js

@@ -7,6 +7,5 @@ export { InputMixin } from './src/input-mixin.js';
 export { LabelledInputController } from './src/labelled-input-controller.js';
 export { LabelMixin } from './src/label-mixin.js';
 export { PatternMixin } from './src/pattern-mixin.js';
-export { SlotStylesMixin } from './src/slot-styles-mixin.js';
 export { TextAreaController } from './src/text-area-controller.js';
 export { ValidateMixin } from './src/validate-mixin.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/field-base",
-  "version": "24.2.0-dev.e9803eea7",
+  "version": "24.3.0-alpha1",
   "publishConfig": {
     "access": "public"
   },
@@ -32,14 +32,14 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.2.0-dev.e9803eea7",
-    "@vaadin/component-base": "24.2.0-dev.e9803eea7",
+    "@vaadin/a11y-base": "24.3.0-alpha1",
+    "@vaadin/component-base": "24.3.0-alpha1",
     "lit": "^2.0.0"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.4.3",
+    "@vaadin/testing-helpers": "^0.5.0",
     "sinon": "^13.0.2"
   },
-  "gitHead": "a065b79b9d5a189e457fab312cc8aff0d7f2f910"
+  "gitHead": "9ca6f3ca220a777e8eea181a1f5717e39a732240"
 }

package/src/checked-mixin.js

@@ -47,6 +47,8 @@ export const CheckedMixin = dedupingMixin(
       _onChange(event) {
         const input = event.target;
 
+        this.dirty = true;
+
         this._toggleChecked(input.checked);
 
         // Clicking the checkbox or radio-button in Safari

package/src/input-control-mixin.d.ts

@@ -10,12 +10,12 @@ import type { FocusMixinClass } from '@vaadin/a11y-base/src/focus-mixin.js';
 import type { KeyboardMixinClass } from '@vaadin/a11y-base/src/keyboard-mixin.js';
 import type { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
 import type { DelegateStateMixinClass } from '@vaadin/component-base/src/delegate-state-mixin.js';
+import type { SlotStylesMixinClass } from '@vaadin/component-base/src/slot-styles-mixin.js';
 import type { ClearButtonMixinClass } from './clear-button-mixin.js';
 import type { FieldMixinClass } from './field-mixin.js';
 import type { InputConstraintsMixinClass } from './input-constraints-mixin.js';
 import type { InputMixinClass } from './input-mixin.js';
 import type { LabelMixinClass } from './label-mixin.js';
-import type { SlotStylesMixinClass } from './slot-styles-mixin.js';
 import type { ValidateMixinClass } from './validate-mixin.js';
 
 /**

package/src/input-control-mixin.js

@@ -7,10 +7,10 @@ import { DelegateFocusMixin } from '@vaadin/a11y-base/src/delegate-focus-mixin.j
 import { KeyboardMixin } from '@vaadin/a11y-base/src/keyboard-mixin.js';
 import { timeOut } from '@vaadin/component-base/src/async.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
+import { SlotStylesMixin } from '@vaadin/component-base/src/slot-styles-mixin.js';
 import { ClearButtonMixin } from './clear-button-mixin.js';
 import { FieldMixin } from './field-mixin.js';
 import { InputConstraintsMixin } from './input-constraints-mixin.js';
-import { SlotStylesMixin } from './slot-styles-mixin.js';
 
 /**
  * A mixin to provide shared logic for the editable form input controls.

package/src/input-field-mixin.d.ts

@@ -10,13 +10,13 @@ import type { FocusMixinClass } from '@vaadin/a11y-base/src/focus-mixin.js';
 import type { KeyboardMixinClass } from '@vaadin/a11y-base/src/keyboard-mixin.js';
 import type { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
 import type { DelegateStateMixinClass } from '@vaadin/component-base/src/delegate-state-mixin.js';
+import type { SlotStylesMixinClass } from '@vaadin/component-base/src/slot-styles-mixin.js';
 import type { ClearButtonMixinClass } from './clear-button-mixin.js';
 import type { FieldMixinClass } from './field-mixin.js';
 import type { InputConstraintsMixinClass } from './input-constraints-mixin.js';
 import type { InputControlMixinClass } from './input-control-mixin.js';
 import type { InputMixinClass } from './input-mixin.js';
 import type { LabelMixinClass } from './label-mixin.js';
-import type { SlotStylesMixinClass } from './slot-styles-mixin.js';
 import type { ValidateMixinClass } from './validate-mixin.js';
 
 /**

package/src/input-mixin.d.ts

@@ -28,6 +28,15 @@ export declare class InputMixinClass {
    */
   value: string;
 
+  /**
+   * 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: boolean;
+
   /**
    * Indicates whether the value is different from the default one.
    * Override if the `value` property has a type other than `string`.

package/src/input-mixin.js

@@ -51,6 +51,20 @@ export const InputMixin = dedupingMixin(
             value: '',
             observer: '_valueChanged',
             notify: true,
+            sync: true,
+          },
+
+          /**
+           * 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,
           },
 
           /**
@@ -194,7 +208,7 @@ export const InputMixin = dedupingMixin(
       }
 
       /**
-       * An input event listener used to update `_hasInputValue` property.
+       * An input event listener used to update `_hasInputValue` and `dirty` properties.
        * Do not override this method.
        *
        * @param {Event} event
@@ -202,6 +216,7 @@ export const InputMixin = dedupingMixin(
        */
       __onInput(event) {
         this._setHasInputValue(event);
+        this.dirty = true;
         this._onInput(event);
       }
 

package/src/slot-styles-mixin.d.ts

@@ -1,21 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import type { Constructor } from '@open-wc/dedupe-mixin';
-
-/**
- * Mixin to insert styles into the outer scope to handle slotted components.
- * This is useful e.g. to hide native `<input type="number">` controls.
- */
-export declare function SlotStylesMixin<T extends Constructor<HTMLElement>>(
-  base: T,
-): Constructor<SlotStylesMixinClass> & T;
-
-export declare class SlotStylesMixinClass {
-  /**
-   * List of styles to insert into root.
-   */
-  protected readonly slotStyles: string[];
-}

package/src/slot-styles-mixin.js

@@ -1,76 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';
-
-const stylesMap = new WeakMap();
-
-/**
- * Get all the styles inserted into root.
- * @param {DocumentOrShadowRoot} root
- * @return {Set<string>}
- */
-function getRootStyles(root) {
-  if (!stylesMap.has(root)) {
-    stylesMap.set(root, new Set());
-  }
-
-  return stylesMap.get(root);
-}
-
-/**
- * Insert styles into the root.
- * @param {string} styles
- * @param {DocumentOrShadowRoot} root
- */
-function insertStyles(styles, root) {
-  const style = document.createElement('style');
-  style.textContent = styles;
-
-  if (root === document) {
-    document.head.appendChild(style);
-  } else {
-    root.insertBefore(style, root.firstChild);
-  }
-}
-
-/**
- * Mixin to insert styles into the outer scope to handle slotted components.
- * This is useful e.g. to hide native `<input type="number">` controls.
- *
- * @polymerMixin
- */
-export const SlotStylesMixin = dedupingMixin(
-  (superclass) =>
-    class SlotStylesMixinClass extends superclass {
-      /**
-       * List of styles to insert into root.
-       * @protected
-       */
-      get slotStyles() {
-        return {};
-      }
-
-      /** @protected */
-      connectedCallback() {
-        super.connectedCallback();
-
-        this.__applySlotStyles();
-      }
-
-      /** @private */
-      __applySlotStyles() {
-        const root = this.getRootNode();
-        const rootStyles = getRootStyles(root);
-
-        this.slotStyles.forEach((styles) => {
-          if (!rootStyles.has(styles)) {
-            insertStyles(styles, root);
-            rootStyles.add(styles);
-          }
-        });
-      }
-    },
-);