@vaadin/field-base 22.0.0-alpha5 → 22.0.0-alpha9

package/src/input-field-mixin.js

@@ -3,19 +3,16 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { Debouncer } from '@polymer/polymer/lib/utils/debounce.js';
-import { animationFrame } from '@polymer/polymer/lib/utils/async.js';
-import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';
-import { AriaLabelMixin } from './aria-label-mixin.js';
-import { ClearButtonMixin } from './clear-button-mixin.js';
-import { DelegateFocusMixin } from './delegate-focus-mixin.js';
-import { FieldAriaMixin } from './field-aria-mixin.js';
-import { InputConstraintsMixin } from './input-constraints-mixin.js';
-
-const InputFieldMixinImplementation = (superclass) =>
-  class InputFieldMixinClass extends ClearButtonMixin(
-    FieldAriaMixin(InputConstraintsMixin(AriaLabelMixin(DelegateFocusMixin(superclass))))
-  ) {
+import { InputControlMixin } from './input-control-mixin.js';
+
+/**
+ * A mixin to provide logic for vaadin-text-field and related components.
+ *
+ * @polymerMixin
+ * @mixes InputControlMixin
+ */
+export const InputFieldMixin = (superclass) =>
+  class InputFieldMixinClass extends InputControlMixin(superclass) {
     static get properties() {
       return {
         /**
@@ -52,11 +49,19 @@ const InputFieldMixinImplementation = (superclass) =>
         },
 
         /**
-         * Specify that the value should be automatically selected when the field gains focus.
+         * A pattern matched against individual characters the user inputs.
+         * When set, the field will prevent:
+         * - `keyDown` events if the entered key doesn't match `/^_enabledCharPattern$/`
+         * - `paste` events if the pasted text doesn't match `/^_enabledCharPattern*$/`
+         * - `drop` events if the dropped text doesn't match `/^_enabledCharPattern*$/`
+         *
+         * For example, to enable entering only numbers and minus signs,
+         * `_enabledCharPattern = "[\\d-]"`
+         * @protected
          */
-        autoselect: {
-          type: Boolean,
-          value: false
+        _enabledCharPattern: {
+          type: String,
+          observer: '_enabledCharPatternChanged'
         }
       };
     }
@@ -65,40 +70,31 @@ const InputFieldMixinImplementation = (superclass) =>
       return [...super.delegateAttrs, 'autocapitalize', 'autocomplete', 'autocorrect'];
     }
 
-    static get observers() {
-      return ['__observeOffsetHeight(errorMessage, invalid, label, helperText)'];
+    constructor() {
+      super();
+
+      this._boundOnPaste = this._onPaste.bind(this);
+      this._boundOnDrop = this._onDrop.bind(this);
+      this._boundOnBeforeInput = this._onBeforeInput.bind(this);
     }
 
     /**
-     * Element used by `FieldAriaMixin` to set ARIA attributes.
+     * @param {HTMLElement} input
      * @protected
+     * @override
      */
-    get _ariaTarget() {
-      return this.inputElement;
-    }
-
-    /** @protected */
-    ready() {
-      super.ready();
-
-      // Lumo theme defines a max-height transition for the "error-message"
-      // part on invalid state change.
-      const errorPart = this.shadowRoot.querySelector('[part="error-message"]');
-      if (errorPart) {
-        errorPart.addEventListener('transitionend', () => {
-          this.__observeOffsetHeight();
-        });
-      }
+    _inputElementChanged(input) {
+      super._inputElementChanged(input);
 
-      if (this.inputElement) {
+      if (input) {
         // Discard value set on the custom slotted input.
-        if (this.inputElement.value && this.inputElement.value !== this.value) {
+        if (input.value && input.value !== this.value) {
           console.warn(`Please define value on the <${this.localName}> component!`);
-          this.inputElement.value = '';
+          input.value = '';
         }
 
         if (this.value) {
-          this.inputElement.value = this.value;
+          input.value = this.value;
         }
       }
     }
@@ -113,73 +109,122 @@ const InputFieldMixinImplementation = (superclass) =>
     }
 
     /**
-     * Override an event listener from `DelegatesFocusMixin`.
+     * Override an event listener from `DelegateFocusMixin`.
      * @param {FocusEvent} event
      * @protected
      * @override
      */
-    _onFocus(event) {
-      super._onFocus(event);
+    _onBlur(event) {
+      super._onBlur(event);
 
-      if (this.autoselect && this.inputElement) {
-        this.inputElement.select();
-      }
+      this.validate();
     }
 
     /**
-     * Override an event listener from `DelegatesFocusMixin`.
-     * @param {FocusEvent} event
+     * Override a method from `InputMixin` to validate the field
+     * when a new value is set programmatically.
+     * @param {string} value
      * @protected
      * @override
      */
-    _onBlur(event) {
-      super._onBlur(event);
+    _forwardInputValue(value) {
+      super._forwardInputValue(value);
 
-      this.validate();
+      if (this.invalid) {
+        this.validate();
+      }
     }
 
     /**
-     * Dispatch an event if a specific size measurement property has changed.
-     * Supporting multiple properties here is needed for `vaadin-text-area`.
+     * Override a method from `InputMixin`.
+     * @param {!HTMLElement} input
      * @protected
+     * @override
      */
-    _dispatchIronResizeEventIfNeeded(prop, value) {
-      const oldSize = '__old' + prop;
-      if (this[oldSize] !== undefined && this[oldSize] !== value) {
-        this.dispatchEvent(new CustomEvent('iron-resize', { bubbles: true, composed: true }));
-      }
+    _addInputListeners(input) {
+      super._addInputListeners(input);
 
-      this[oldSize] = value;
+      input.addEventListener('paste', this._boundOnPaste);
+      input.addEventListener('drop', this._boundOnDrop);
+      input.addEventListener('beforeinput', this._boundOnBeforeInput);
     }
 
-    /** @private */
-    __observeOffsetHeight() {
-      this.__observeOffsetHeightDebouncer = Debouncer.debounce(
-        this.__observeOffsetHeightDebouncer,
-        animationFrame,
-        () => {
-          this._dispatchIronResizeEventIfNeeded('Height', this.offsetHeight);
-        }
-      );
+    /**
+     * Override a method from `InputMixin`.
+     * @param {!HTMLElement} input
+     * @protected
+     * @override
+     */
+    _removeInputListeners(input) {
+      super._removeInputListeners(input);
+
+      input.removeEventListener('paste', this._boundOnPaste);
+      input.removeEventListener('drop', this._boundOnDrop);
+      input.removeEventListener('beforeinput', this._boundOnBeforeInput);
     }
 
     /**
-     * Override a method from `InputMixin` to validate the field
-     * when a new value is set programmatically.
-     * @param {string} value
+     * Override an event listener from `ClearButtonMixin`
+     * to avoid adding a separate listener.
+     * @param {!KeyboardEvent} event
      * @protected
      * @override
      */
-    _forwardInputValue(value) {
-      super._forwardInputValue(value);
+    _onKeyDown(event) {
+      if (this._enabledCharPattern && !this.__shouldAcceptKey(event)) {
+        event.preventDefault();
+      }
 
-      if (this.invalid) {
-        this.validate();
+      super._onKeyDown(event);
+    }
+
+    /** @private */
+    __shouldAcceptKey(event) {
+      return (
+        event.metaKey ||
+        event.ctrlKey ||
+        !event.key || // allow typing anything if event.key is not supported
+        event.key.length !== 1 || // allow "Backspace", "ArrowLeft" etc.
+        this.__enabledCharRegExp.test(event.key)
+      );
+    }
+
+    /** @private */
+    _onPaste(e) {
+      if (this._enabledCharPattern) {
+        const pastedText = (e.clipboardData || window.clipboardData).getData('text');
+        if (!this.__enabledTextRegExp.test(pastedText)) {
+          e.preventDefault();
+        }
       }
     }
-  };
 
-/**
- * A mixin to provide logic for vaadin-text-field and related components.
- */
-export const InputFieldMixin = dedupingMixin(InputFieldMixinImplementation);
+    /** @private */
+    _onDrop(e) {
+      if (this._enabledCharPattern) {
+        const draggedText = e.dataTransfer.getData('text');
+        if (!this.__enabledTextRegExp.test(draggedText)) {
+          e.preventDefault();
+        }
+      }
+    }
+
+    /** @private */
+    _onBeforeInput(e) {
+      // The `beforeinput` event covers all the cases for `_enabledCharPattern`: keyboard, pasting and dropping,
+      // but it is still experimental technology so we can't rely on it. It's used here just as an additional check,
+      // because it seems to be the only way to detect and prevent specific keys on mobile devices.
+      // See https://github.com/vaadin/vaadin-text-field/issues/429
+      if (this._enabledCharPattern && e.data && !this.__enabledTextRegExp.test(e.data)) {
+        e.preventDefault();
+      }
+    }
+
+    /** @private */
+    _enabledCharPatternChanged(charPattern) {
+      if (charPattern) {
+        this.__enabledCharRegExp = new RegExp('^' + charPattern + '$');
+        this.__enabledTextRegExp = new RegExp('^' + charPattern + '*$');
+      }
+    }
+  };

package/src/input-mixin.d.ts

@@ -20,7 +20,7 @@ interface InputMixin {
    * Any component implementing this mixin is expected to provide it
    * by using `this._setInputElement(input)` Polymer API.
    *
-   * A typical case is using `InputSlotMixin` that does this automatically.
+   * A typical case is using `InputController` that does this automatically.
    * However, the input element does not have to always be native <input>:
    * as an example, <vaadin-combo-box-light> accepts other components.
    */

package/src/input-mixin.js

@@ -5,165 +5,176 @@
  */
 import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';
 
-const InputMixinImplementation = (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)` Polymer API.
-         *
-         * A typical case is using `InputSlotMixin` that does this automatically.
-         * However, the input element does not have to always be native <input>:
-         * as an example, <vaadin-combo-box-light> accepts other components.
-         *
-         * @protected
-         * @type {!HTMLElement}
-         */
-        inputElement: {
-          type: Object,
-          readOnly: true,
-          observer: '_inputElementChanged'
-        },
-
-        /**
-         * The value of the field.
-         */
-        value: {
-          type: String,
-          value: '',
-          observer: '_valueChanged',
-          notify: true
-        }
-      };
-    }
+/**
+ * A mixin to store the reference to an input element
+ * and add input and change event listeners to it.
+ *
+ * @polymerMixin
+ */
+export const InputMixin = dedupingMixin(
+  (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)` Polymer API.
+           *
+           * A typical case is using `InputController` that does this automatically.
+           * However, the input element does not have to always be native <input>:
+           * as an example, <vaadin-combo-box-light> accepts other components.
+           *
+           * @protected
+           * @type {!HTMLElement}
+           */
+          inputElement: {
+            type: Object,
+            readOnly: true,
+            observer: '_inputElementChanged'
+          },
+
+          /**
+           * 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
+          }
+        };
+      }
 
-    constructor() {
-      super();
+      constructor() {
+        super();
 
-      this._boundOnInput = this._onInput.bind(this);
-      this._boundOnChange = this._onChange.bind(this);
-    }
+        this._boundOnInput = this._onInput.bind(this);
+        this._boundOnChange = this._onChange.bind(this);
+      }
 
-    /**
-     * Clear the value of the field.
-     */
-    clear() {
-      this.value = '';
-    }
+      /**
+       * Clear the value of the field.
+       */
+      clear() {
+        this.value = '';
+      }
 
-    /**
-     * Add event listeners to the input element instance.
-     * Override this method to add custom listeners.
-     * @param {!HTMLElement} input
-     */
-    _addInputListeners(input) {
-      input.addEventListener('input', this._boundOnInput);
-      input.addEventListener('change', this._boundOnChange);
-    }
+      /**
+       * Add event listeners to the input element instance.
+       * Override this method to add custom listeners.
+       * @param {!HTMLElement} input
+       */
+      _addInputListeners(input) {
+        input.addEventListener('input', this._boundOnInput);
+        input.addEventListener('change', this._boundOnChange);
+      }
 
-    /**
-     * Remove event listeners from the input element instance.
-     * @param {!HTMLElement} input
-     */
-    _removeInputListeners(input) {
-      input.removeEventListener('input', this._boundOnInput);
-      input.removeEventListener('change', this._boundOnChange);
-    }
+      /**
+       * Remove event listeners from the input element instance.
+       * @param {!HTMLElement} input
+       */
+      _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
+       * @override
+       */
+      _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;
+        }
 
-    /**
-     * 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
-     * @override
-     */
-    _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;
+        if (value != undefined) {
+          this.inputElement.value = value;
+        } else {
+          this.inputElement.value = '';
+        }
       }
 
-      if (value != undefined) {
-        this.inputElement.value = value;
-      } else {
-        this.inputElement.value = '';
+      /** @protected */
+      _inputElementChanged(input, oldInput) {
+        if (input) {
+          this._addInputListeners(input);
+        } else if (oldInput) {
+          this._removeInputListeners(oldInput);
+        }
       }
-    }
 
-    /** @protected */
-    _inputElementChanged(input, oldInput) {
-      if (input) {
-        this._addInputListeners(input);
-      } else if (oldInput) {
-        this._removeInputListeners(oldInput);
+      /**
+       * An input event listener used to update the field value.
+       * Override this method with an actual implementation.
+       * @param {Event} _event
+       * @protected
+       * @override
+       */
+      _onInput(event) {
+        // Ignore fake input events e.g. used by clear button.
+        this.__userInput = event.isTrusted;
+        this.value = event.target.value;
+        this.__userInput = false;
       }
-    }
 
-    /**
-     * An input event listener used to update the field value.
-     * Override this method with an actual implementation.
-     * @param {Event} _event
-     * @protected
-     * @override
-     */
-    _onInput(event) {
-      // Ignore fake input events e.g. used by clear button.
-      this.__userInput = event.isTrusted;
-      this.value = event.target.value;
-      this.__userInput = false;
-    }
+      /**
+       * A change event listener.
+       * Override this method with an actual implementation.
+       * @param {Event} _event
+       * @protected
+       * @override
+       */
+      _onChange(_event) {}
+
+      /**
+       * Toggle the has-value attribute based on the value property.
+       * @param {boolean} hasValue
+       * @protected
+       */
+      _toggleHasValue(hasValue) {
+        this.toggleAttribute('has-value', hasValue);
+      }
 
-    /**
-     * A change event listener.
-     * Override this method with an actual implementation.
-     * @param {Event} _event
-     * @protected
-     * @override
-     */
-    _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
+       * @override
+       */
+      _valueChanged(newVal, oldVal) {
+        this._toggleHasValue(newVal !== '' && newVal != null);
+
+        // Setting initial value to empty string, do nothing.
+        if (newVal === '' && oldVal === undefined) {
+          return;
+        }
 
-    /**
-     * Observer called when a value property changes.
-     * @param {string | undefined} newVal
-     * @param {string | undefined} oldVal
-     * @protected
-     * @override
-     */
-    _valueChanged(newVal, oldVal) {
-      this._toggleHasValue(newVal !== '' && newVal != null);
-
-      // 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;
+        }
 
-      // 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);
       }
-
-      // Setting a value programmatically, sync it to input element.
-      this._forwardInputValue(newVal);
     }
-  };
-
-/**
- * A mixin to store the reference to an input element
- * and add input and change event listeners to it.
- */
-export const InputMixin = dedupingMixin(InputMixinImplementation);
+);

package/src/label-mixin.d.ts

@@ -3,7 +3,7 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { SlotMixin } from './slot-mixin.js';
+import { SlotMixin } from '@vaadin/component-base/src/slot-mixin.js';
 
 /**
  * A mixin to provide label via corresponding property or named slot.
@@ -18,7 +18,7 @@ interface LabelMixin extends SlotMixin {
   /**
    * String used for a label element.
    */
-  label: string;
+  label: string | null | undefined;
 }
 
 export { LabelMixinConstructor, LabelMixin };