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

package/src/input-mixin.js

@@ -8,222 +8,221 @@ import { dedupeMixin } from '@open-wc/dedupe-mixin';
 /**
  * A mixin to store the reference to an input element
  * and add input and change event listeners to it.
- *
- * @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-controller.d.ts

@@ -9,6 +9,8 @@ import { SlotChildObserveController } from '@vaadin/component-base/src/slot-chil
  * A controller to manage the label element.
  */
 export class LabelController extends SlotChildObserveController {
+  constructor(host: HTMLElement);
+
   /**
    * String used for the label.
    */

package/src/label-mixin.js

@@ -7,8 +7,6 @@ import { LabelController } from './label-controller.js';
 
 /**
  * A mixin to provide label via corresponding property or named slot.
- *
- * @polymerMixin
  */
 export const LabelMixin = (superclass) =>
   class LabelMixinClass extends superclass {
@@ -38,7 +36,7 @@ export const LabelMixin = (superclass) =>
     /** @protected */
     get _labelId() {
       const node = this._labelNode;
-      return node && node.id;
+      return node?.id;
     }
 
     /** @protected */

package/src/labelled-input-controller.d.ts

@@ -4,8 +4,24 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { ReactiveController } from 'lit';
+import type { LabelController } from './label-controller.js';
 
 /**
  * A controller for linking a `<label>` element with an `<input>` element.
  */
-export class LabelledInputController implements ReactiveController {}
+export class LabelledInputController implements ReactiveController {
+  constructor(input: HTMLInputElement, labelController: LabelController);
+
+  /**
+   * The input element to link with the label.
+   */
+  input: HTMLInputElement;
+
+  /**
+   * Phantom optional method to satisfy the `ReactiveController` interface
+   * (TS2559: an interface with all-optional members needs at least one
+   * declared property in common). Not implemented at runtime; Lit's
+   * `addController` invokes it via optional chaining.
+   */
+  hostConnected?(): void;
+}

package/src/pattern-mixin.js

@@ -7,9 +7,6 @@ import { InputConstraintsMixin } from './input-constraints-mixin.js';
 
 /**
  * A mixin to provide `pattern` property.
- *
- * @polymerMixin
- * @mixes InputConstraintsMixin
  */
 export const PatternMixin = (superclass) =>
   class PatternMixinClass extends InputConstraintsMixin(superclass) {

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/text-area-controller.d.ts

@@ -8,4 +8,6 @@ import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
 /**
  * A controller to create and initialize slotted `<textarea>` element.
  */
-export class TextAreaController extends SlotController {}
+export class TextAreaController extends SlotController {
+  constructor(host: HTMLElement, callback?: (node: HTMLTextAreaElement) => void);
+}