@vaadin/field-base 25.2.0-alpha1 → 25.2.0-alpha10

package/src/input-mixin.js

@@ -11,219 +11,220 @@ import { dedupeMixin } from '@open-wc/dedupe-mixin';
  *
  * @polymerMixin
  */
-export const InputMixin = dedupeMixin(
-  (superclass) =>
-    class InputMixinClass extends superclass {
-      static get properties() {
-        return {
-          /**
-           * A reference to the input element controlled by the mixin.
-           * Any component implementing this mixin is expected to provide it
-           * by using `this._setInputElement(input)` API. A typical case is
-           * using `InputController` that does this automatically.
-           *
-           * @protected
-           * @type {!HTMLElement}
-           */
-          inputElement: {
-            type: Object,
-            readOnly: true,
-            observer: '_inputElementChanged',
-            sync: true,
-          },
-
-          /**
-           * String used to define input type.
-           * @protected
-           */
-          type: {
-            type: String,
-            readOnly: true,
-          },
-
-          /**
-           * The value of the field.
-           */
-          value: {
-            type: String,
-            value: '',
-            observer: '_valueChanged',
-            notify: true,
-            sync: true,
-          },
-        };
+const InputMixinImplementation = (superclass) => {
+  return class InputMixinClass extends superclass {
+    static get properties() {
+      return {
+        /**
+         * A reference to the input element controlled by the mixin.
+         * Any component implementing this mixin is expected to provide it
+         * by using `this._setInputElement(input)` API. A typical case is
+         * using `InputController` that does this automatically.
+         *
+         * @protected
+         * @type {!HTMLElement}
+         */
+        inputElement: {
+          type: Object,
+          readOnly: true,
+          observer: '_inputElementChanged',
+          sync: true,
+        },
+
+        /**
+         * String used to define input type.
+         * @protected
+         */
+        type: {
+          type: String,
+          readOnly: true,
+        },
+
+        /**
+         * The value of the field.
+         */
+        value: {
+          type: String,
+          value: '',
+          observer: '_valueChanged',
+          notify: true,
+          sync: true,
+        },
+      };
+    }
+
+    constructor() {
+      super();
+
+      this._boundOnInput = this._onInput.bind(this);
+      this._boundOnChange = this._onChange.bind(this);
+    }
+
+    /**
+     * Indicates whether the value is different from the default one.
+     * Override if the `value` property has a type other than `string`.
+     *
+     * @protected
+     */
+    get _hasValue() {
+      return this.value != null && this.value !== '';
+    }
+
+    /**
+     * A property for accessing the input element's value.
+     *
+     * Override this getter if the property is different from the default `value` one.
+     *
+     * @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 input element's value.
+     *
+     * @protected
+     */
+    set _inputElementValue(value) {
+      if (this.inputElement) {
+        this.inputElement[this._inputElementValueProperty] = value;
       }
-
-      constructor() {
-        super();
-
-        this._boundOnInput = this._onInput.bind(this);
-        this._boundOnChange = this._onChange.bind(this);
-      }
-
-      /**
-       * Indicates whether the value is different from the default one.
-       * Override if the `value` property has a type other than `string`.
-       *
-       * @protected
-       */
-      get _hasValue() {
-        return this.value != null && this.value !== '';
-      }
-
-      /**
-       * A property for accessing the input element's value.
-       *
-       * Override this getter if the property is different from the default `value` one.
-       *
-       * @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 input element's value.
-       *
-       * @protected
-       */
-      set _inputElementValue(value) {
-        if (this.inputElement) {
-          this.inputElement[this._inputElementValueProperty] = value;
-        }
+    }
+
+    /**
+     * Clear the value of the field.
+     */
+    clear() {
+      this.value = '';
+
+      // Clear the input immediately without waiting for the observer.
+      // Otherwise, when using Lit, the old value would be restored.
+      this._inputElementValue = '';
+    }
+
+    /**
+     * Add event listeners to the input element instance.
+     * Override this method to add custom listeners.
+     * @param {!HTMLElement} input
+     * @protected
+     */
+    _addInputListeners(input) {
+      input.addEventListener('input', this._boundOnInput);
+      input.addEventListener('change', this._boundOnChange);
+    }
+
+    /**
+     * Remove event listeners from the input element instance.
+     * @param {!HTMLElement} input
+     * @protected
+     */
+    _removeInputListeners(input) {
+      input.removeEventListener('input', this._boundOnInput);
+      input.removeEventListener('change', this._boundOnChange);
+    }
+
+    /**
+     * A method to forward the value property set on the field
+     * programmatically back to the input element value.
+     * Override this method to perform additional checks,
+     * for example to skip this in certain conditions.
+     * @param {string} value
+     * @protected
+     */
+    _forwardInputValue(value) {
+      // Value might be set before an input element is initialized.
+      // This case should be handled separately by a component that
+      // implements this mixin, for example in `connectedCallback`.
+      if (!this.inputElement) {
+        return;
       }
 
-      /**
-       * Clear the value of the field.
-       */
-      clear() {
-        this.value = '';
-
-        // Clear the input immediately without waiting for the observer.
-        // Otherwise, when using Lit, the old value would be restored.
-        this._inputElementValue = '';
-      }
-
-      /**
-       * Add event listeners to the input element instance.
-       * Override this method to add custom listeners.
-       * @param {!HTMLElement} input
-       * @protected
-       */
-      _addInputListeners(input) {
-        input.addEventListener('input', this._boundOnInput);
-        input.addEventListener('change', this._boundOnChange);
-      }
-
-      /**
-       * Remove event listeners from the input element instance.
-       * @param {!HTMLElement} input
-       * @protected
-       */
-      _removeInputListeners(input) {
-        input.removeEventListener('input', this._boundOnInput);
-        input.removeEventListener('change', this._boundOnChange);
+      this._inputElementValue = value != null ? value : '';
+    }
+
+    /**
+     * @param {HTMLElement | undefined} input
+     * @param {HTMLElement | undefined} oldInput
+     * @protected
+     */
+    _inputElementChanged(input, oldInput) {
+      if (input) {
+        this._addInputListeners(input);
+      } else if (oldInput) {
+        this._removeInputListeners(oldInput);
       }
-
-      /**
-       * A method to forward the value property set on the field
-       * programmatically back to the input element value.
-       * Override this method to perform additional checks,
-       * for example to skip this in certain conditions.
-       * @param {string} value
-       * @protected
-       */
-      _forwardInputValue(value) {
-        // Value might be set before an input element is initialized.
-        // This case should be handled separately by a component that
-        // implements this mixin, for example in `connectedCallback`.
-        if (!this.inputElement) {
-          return;
-        }
-
-        this._inputElementValue = value != null ? value : '';
+    }
+
+    /**
+     * An input event listener used to update the field value.
+     *
+     * @param {Event} event
+     * @protected
+     */
+    _onInput(event) {
+      // In the case a custom web component is passed as `inputElement`,
+      // the actual native input element, on which the event occurred,
+      // can be inside shadow trees.
+      const target = event.composedPath()[0];
+      // Ignore fake input events e.g. used by clear button.
+      this.__userInput = event.isTrusted;
+      this.value = target.value;
+      this.__userInput = false;
+    }
+
+    /**
+     * A change event listener.
+     * Override this method with an actual implementation.
+     * @param {Event} _event
+     * @protected
+     */
+    _onChange(_event) {}
+
+    /**
+     * Toggle the has-value attribute based on the value property.
+     *
+     * @param {boolean} hasValue
+     * @protected
+     */
+    _toggleHasValue(hasValue) {
+      this.toggleAttribute('has-value', hasValue);
+    }
+
+    /**
+     * Observer called when a value property changes.
+     * @param {string | undefined} newVal
+     * @param {string | undefined} oldVal
+     * @protected
+     */
+    _valueChanged(newVal, oldVal) {
+      this._toggleHasValue(this._hasValue);
+
+      // Setting initial value to empty string, do nothing.
+      if (newVal === '' && oldVal === undefined) {
+        return;
       }
 
-      /**
-       * @param {HTMLElement | undefined} input
-       * @param {HTMLElement | undefined} oldInput
-       * @protected
-       */
-      _inputElementChanged(input, oldInput) {
-        if (input) {
-          this._addInputListeners(input);
-        } else if (oldInput) {
-          this._removeInputListeners(oldInput);
-        }
+      // Value is set by the user, no need to sync it back to input.
+      if (this.__userInput) {
+        return;
       }
 
-      /**
-       * An input event listener used to update the field value.
-       *
-       * @param {Event} event
-       * @protected
-       */
-      _onInput(event) {
-        // In the case a custom web component is passed as `inputElement`,
-        // the actual native input element, on which the event occurred,
-        // can be inside shadow trees.
-        const target = event.composedPath()[0];
-        // Ignore fake input events e.g. used by clear button.
-        this.__userInput = event.isTrusted;
-        this.value = target.value;
-        this.__userInput = false;
-      }
+      // Setting a value programmatically, sync it to input element.
+      this._forwardInputValue(newVal);
+    }
+  };
+};
 
-      /**
-       * A change event listener.
-       * Override this method with an actual implementation.
-       * @param {Event} _event
-       * @protected
-       */
-      _onChange(_event) {}
-
-      /**
-       * Toggle the has-value attribute based on the value property.
-       *
-       * @param {boolean} hasValue
-       * @protected
-       */
-      _toggleHasValue(hasValue) {
-        this.toggleAttribute('has-value', hasValue);
-      }
-
-      /**
-       * Observer called when a value property changes.
-       * @param {string | undefined} newVal
-       * @param {string | undefined} oldVal
-       * @protected
-       */
-      _valueChanged(newVal, oldVal) {
-        this._toggleHasValue(this._hasValue);
-
-        // Setting initial value to empty string, do nothing.
-        if (newVal === '' && oldVal === undefined) {
-          return;
-        }
-
-        // Value is set by the user, no need to sync it back to input.
-        if (this.__userInput) {
-          return;
-        }
-
-        // Setting a value programmatically, sync it to input element.
-        this._forwardInputValue(newVal);
-      }
-    },
-);
+export const InputMixin = dedupeMixin(InputMixinImplementation);

package/src/label-mixin.js

@@ -38,7 +38,7 @@ export const LabelMixin = (superclass) =>
     /** @protected */
     get _labelId() {
       const node = this._labelNode;
-      return node && node.id;
+      return node?.id;
     }
 
     /** @protected */

package/src/styles/button-base-styles.js

@@ -15,8 +15,8 @@ export const button = css`
     -webkit-user-select: none;
     user-select: none;
     /* Ensure minimum click target (WCAG) */
-    padding: max(0px, (24px - 1lh) / 2);
-    margin: min(0px, (24px - 1lh) / -2);
+    padding: max(0px, (24px - var(--vaadin-icon-size, 1lh)) / 2);
+    margin: min(0px, (24px - var(--vaadin-icon-size, 1lh)) / -2);
   }
 
   /* Icon */

package/src/validate-mixin.js

@@ -10,107 +10,99 @@ import { dedupeMixin } from '@open-wc/dedupe-mixin';
  *
  * @polymerMixin
  */
-export const ValidateMixin = dedupeMixin(
-  (superclass) =>
-    class ValidateMixinClass extends superclass {
-      static get properties() {
-        return {
-          /**
-           * Set to true when the field is invalid.
-           */
-          invalid: {
-            type: Boolean,
-            reflectToAttribute: true,
-            notify: true,
-            value: false,
-            sync: true,
-          },
+const ValidateMixinImplementation = (superclass) =>
+  class extends superclass {
+    static get properties() {
+      return {
+        /**
+         * Set to true when the field is invalid.
+         */
+        invalid: {
+          type: Boolean,
+          reflectToAttribute: true,
+          notify: true,
+          value: false,
+          sync: true,
+        },
 
-          /**
-           * Set to true to enable manual validation mode. This mode disables automatic
-           * constraint validation, allowing you to control the validation process yourself.
-           * You can still trigger constraint validation manually with the `validate()` method
-           * or use `checkValidity()` to assess the component's validity without affecting
-           * the invalid state. In manual validation mode, you can also manipulate
-           * the `invalid` property directly through your application logic without conflicts
-           * with the component's internal validation.
-           *
-           * @attr {boolean} manual-validation
-           */
-          manualValidation: {
-            type: Boolean,
-            value: false,
-          },
+        /**
+         * Set to true to enable manual validation mode. This mode disables automatic
+         * constraint validation, allowing you to control the validation process yourself.
+         * You can still trigger constraint validation manually with the `validate()` method
+         * or use `checkValidity()` to assess the component's validity without affecting
+         * the invalid state. In manual validation mode, you can also manipulate
+         * the `invalid` property directly through your application logic without conflicts
+         * with the component's internal validation.
+         *
+         * @attr {boolean} manual-validation
+         */
+        manualValidation: {
+          type: Boolean,
+          value: false,
+        },
 
-          /**
-           * Specifies that the user must fill in a value.
-           */
-          required: {
-            type: Boolean,
-            reflectToAttribute: true,
-            sync: true,
-          },
-        };
-      }
+        /**
+         * Specifies that the user must fill in a value.
+         */
+        required: {
+          type: Boolean,
+          reflectToAttribute: true,
+          sync: 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() {
-        const isValid = this.checkValidity();
-        this._setInvalid(!isValid);
-        this.dispatchEvent(new CustomEvent('validated', { detail: { valid: isValid } }));
-        return isValid;
-      }
+    /**
+     * 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() {
+      const isValid = this.checkValidity();
+      this._setInvalid(!isValid);
+      this.dispatchEvent(new CustomEvent('validated', { detail: { valid: isValid } }));
+      return isValid;
+    }
 
-      /**
-       * Returns true if the field value satisfies all constraints (if any).
-       *
-       * @return {boolean}
-       */
-      checkValidity() {
-        return !this.required || !!this.value;
-      }
+    /**
+     * Returns true if the field value satisfies all constraints (if any).
+     *
+     * @return {boolean}
+     */
+    checkValidity() {
+      return !this.required || !!this.value;
+    }
 
-      /**
-       * @param {boolean} invalid
-       * @protected
-       */
-      _setInvalid(invalid) {
-        if (this._shouldSetInvalid(invalid)) {
-          this.invalid = invalid;
-        }
+    /**
+     * @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;
-      }
+    /**
+     * Override this method to define whether the given `invalid` state should be set.
+     *
+     * @param {boolean} _invalid
+     * @return {boolean}
+     * @protected
+     */
+    _shouldSetInvalid(_invalid) {
+      return true;
+    }
 
-      /** @protected */
-      _requestValidation() {
-        if (!this.manualValidation) {
-          // eslint-disable-next-line no-restricted-syntax
-          this.validate();
-        }
+    /** @protected */
+    _requestValidation() {
+      if (!this.manualValidation) {
+        // eslint-disable-next-line no-restricted-syntax
+        this.validate();
       }
+    }
+  };
 
-      /**
-       * Fired whenever the field is validated.
-       *
-       * @event validated
-       * @param {Object} detail
-       * @param {boolean} detail.valid the result of the validation.
-       */
-    },
-);
+export const ValidateMixin = dedupeMixin(ValidateMixinImplementation);