@vaadin/field-base 22.0.0-alpha6 → 22.0.0-alpha7

package/src/input-constraints-mixin.js

@@ -4,104 +4,123 @@
  * 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';
-import { DelegateInputStateMixin } from './delegate-input-state-mixin.js';
+import { DelegateStateMixin } from './delegate-state-mixin.js';
+import { InputMixin } from './input-mixin.js';
+import { ValidateMixin } from './validate-mixin.js';
 
-const InputConstraintsMixinImplementation = (superclass) =>
-  class InputConstraintsMixinClass extends DelegateInputStateMixin(superclass) {
-    /**
-     * An array of attributes which participate in the input validation.
-     * Changing these attributes will cause the input to re-validate.
-     *
-     * IMPORTANT: The attributes should be properly delegated to the input element from the host
-     * which can be achieved by listing them in the list of delegated attributes (see `DelegateStateMixin.delegateAttrs`).
-     * Otherwise, the input validation will not work correctly.
-     *
-     * Note, the `required` attribute is already delegated in the parent `DelegateInputStateMixin`.
-     */
-    static get constraints() {
-      return ['required'];
-    }
+/**
+ * A mixin to combine multiple input validation constraints.
+ *
+ * @polymerMixin
+ * @mixes DelegateStateMixin
+ * @mixes InputMixin
+ * @mixes ValidateMixin
+ */
+export const InputConstraintsMixin = dedupingMixin(
+  (superclass) =>
+    class InputConstraintsMixinClass extends DelegateStateMixin(ValidateMixin(InputMixin(superclass))) {
+      /**
+       * An array of attributes which participate in the input validation.
+       * Changing these attributes will cause the input to re-validate.
+       *
+       * IMPORTANT: The attributes should be properly delegated to the input element
+       * from the host using `delegateAttrs` getter (see `DelegateStateMixin`).
+       * The `required` attribute is already delegated.
+       */
+      static get constraints() {
+        return ['required'];
+      }
 
-    /** @protected */
-    ready() {
-      super.ready();
+      static get delegateAttrs() {
+        return [...super.delegateAttrs, 'required'];
+      }
 
-      this._createConstraintsObserver();
-    }
+      /** @protected */
+      ready() {
+        super.ready();
 
-    /**
-     * Returns true if the current input value satisfies all constraints (if any).
-     * @return {boolean}
-     */
-    checkValidity() {
-      if (this.inputElement && this.constructor.constraints.some((c) => this.__isValidConstraint(this[c]))) {
-        return this.inputElement.checkValidity();
-      } else {
-        return !this.invalid;
+        this._createConstraintsObserver();
       }
-    }
 
-    /**
-     * Override this method to customize setting up constraints observer.
-     * @protected
-     */
-    _createConstraintsObserver() {
-      // This complex observer needs to be added dynamically instead of using `static get observers()`
-      // to make it possible to tweak this behavior in classes that apply this mixin.
-      this._createMethodObserver(`_constraintsChanged(${this.constructor.constraints.join(', ')})`);
-    }
+      /**
+       * Returns true if the current input value satisfies all constraints (if any).
+       * @return {boolean}
+       */
+      checkValidity() {
+        if (this.inputElement && this._hasValidConstraints(this.constructor.constraints.map((c) => this[c]))) {
+          return this.inputElement.checkValidity();
+        } else {
+          return !this.invalid;
+        }
+      }
 
-    /**
-     * Override this method to implement custom validation constraints.
-     * @param {unknown[]} constraints
-     * @protected
-     */
-    _constraintsChanged(...constraints) {
-      // Prevent marking field as invalid when setting required state
-      // or any other constraint before a user has entered the value.
-      if (!this.invalid) {
-        return;
+      /**
+       * Returns true if some of the provided set of constraints are valid.
+       * @param {Array} constraints
+       * @return {boolean}
+       * @protected
+       */
+      _hasValidConstraints(constraints) {
+        return constraints.some((c) => this.__isValidConstraint(c));
       }
 
-      if (constraints.some((c) => this.__isValidConstraint(c))) {
-        this.validate();
-      } else {
-        this.invalid = false;
+      /**
+       * Override this method to customize setting up constraints observer.
+       * @protected
+       */
+      _createConstraintsObserver() {
+        // This complex observer needs to be added dynamically instead of using `static get observers()`
+        // to make it possible to tweak this behavior in classes that apply this mixin.
+        this._createMethodObserver(`_constraintsChanged(${this.constructor.constraints.join(', ')})`);
       }
-    }
 
-    /**
-     * Override an event listener inherited from `InputMixin`
-     * to capture native `change` event and make sure that
-     * a new one is dispatched after validation runs.
-     * @param {Event} event
-     * @protected
-     * @override
-     */
-    _onChange(event) {
-      event.stopPropagation();
+      /**
+       * Override this method to implement custom validation constraints.
+       * @param {unknown[]} constraints
+       * @protected
+       */
+      _constraintsChanged(...constraints) {
+        // Prevent marking field as invalid when setting required state
+        // or any other constraint before a user has entered the value.
+        if (!this.invalid) {
+          return;
+        }
 
-      this.validate();
+        if (this._hasValidConstraints(constraints)) {
+          this.validate();
+        } else {
+          this.invalid = false;
+        }
+      }
 
-      this.dispatchEvent(
-        new CustomEvent('change', {
-          detail: {
-            sourceEvent: event
-          },
-          bubbles: event.bubbles,
-          cancelable: event.cancelable
-        })
-      );
-    }
+      /**
+       * Override an event listener inherited from `InputMixin`
+       * to capture native `change` event and make sure that
+       * a new one is dispatched after validation runs.
+       * @param {Event} event
+       * @protected
+       * @override
+       */
+      _onChange(event) {
+        event.stopPropagation();
 
-    /** @private */
-    __isValidConstraint(constraint) {
-      // 0 is valid for `minlength` and `maxlength`
-      return Boolean(constraint) || constraint === 0;
-    }
-  };
+        this.validate();
 
-/**
- * A mixin to combine multiple input validation constraints.
- */
-export const InputConstraintsMixin = dedupingMixin(InputConstraintsMixinImplementation);
+        this.dispatchEvent(
+          new CustomEvent('change', {
+            detail: {
+              sourceEvent: event
+            },
+            bubbles: event.bubbles,
+            cancelable: event.cancelable
+          })
+        );
+      }
+
+      /** @private */
+      __isValidConstraint(constraint) {
+        // 0 is valid for `minlength` and `maxlength`
+        return Boolean(constraint) || constraint === 0;
+      }
+    }
+);

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

@@ -0,0 +1,52 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { KeyboardMixin } from '@vaadin/component-base/src/keyboard-mixin.js';
+import { FieldMixin } from './field-mixin.js';
+import { InputConstraintsMixin } from './input-constraints-mixin.js';
+
+/**
+ * A mixin to provide shared logic for the editable form input controls.
+ */
+declare function InputControlMixin<T extends new (...args: any[]) => {}>(base: T): T & InputControlMixinConstructor;
+
+interface InputControlMixinConstructor {
+  new (...args: any[]): InputControlMixin;
+}
+
+interface InputControlMixin extends KeyboardMixin, InputConstraintsMixin, FieldMixin {
+  /**
+   * Specify that the value should be automatically selected when the field gains focus.
+   */
+  autoselect: boolean;
+
+  /**
+   * Set to true to display the clear icon which clears the input.
+   * @attr {boolean} clear-button-visible
+   */
+  clearButtonVisible: boolean;
+
+  /**
+   * The name of this field.
+   */
+  name: string;
+
+  /**
+   * A hint to the user of what can be entered in the field.
+   */
+  placeholder: string;
+
+  /**
+   * When present, it specifies that the field is read-only.
+   */
+  readonly: boolean;
+
+  /**
+   * The text usually displayed in a tooltip popup when the mouse is over the field.
+   */
+  title: string;
+}
+
+export { InputControlMixin, InputControlMixinConstructor };

package/src/input-control-mixin.js

@@ -0,0 +1,170 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { KeyboardMixin } from '@vaadin/component-base/src/keyboard-mixin.js';
+import { DelegateFocusMixin } from './delegate-focus-mixin.js';
+import { FieldMixin } from './field-mixin.js';
+import { InputConstraintsMixin } from './input-constraints-mixin.js';
+
+/**
+ * A mixin to provide shared logic for the editable form input controls.
+ *
+ * @polymerMixin
+ * @mixes DelegateFocusMixin
+ * @mixes FieldMixin
+ * @mixes InputConstraintsMixin
+ * @mixes KeyboardMixin
+ */
+export const InputControlMixin = (superclass) =>
+  class InputControlMixinClass extends DelegateFocusMixin(
+    InputConstraintsMixin(FieldMixin(KeyboardMixin(superclass)))
+  ) {
+    static get properties() {
+      return {
+        /**
+         * Specify that the value should be automatically selected when the field gains focus.
+         */
+        autoselect: {
+          type: Boolean,
+          value: false
+        },
+
+        /**
+         * Set to true to display the clear icon which clears the input.
+         * @attr {boolean} clear-button-visible
+         */
+        clearButtonVisible: {
+          type: Boolean,
+          reflectToAttribute: true,
+          value: false
+        },
+
+        /**
+         * The name of this field.
+         */
+        name: {
+          type: String,
+          reflectToAttribute: true
+        },
+
+        /**
+         * A hint to the user of what can be entered in the field.
+         */
+        placeholder: {
+          type: String,
+          reflectToAttribute: true
+        },
+
+        /**
+         * When present, it specifies that the field is read-only.
+         */
+        readonly: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true
+        },
+
+        /**
+         * The text usually displayed in a tooltip popup when the mouse is over the field.
+         */
+        title: {
+          type: String,
+          reflectToAttribute: true
+        }
+      };
+    }
+
+    static get delegateAttrs() {
+      return [...super.delegateAttrs, 'name', 'type', 'placeholder', 'readonly', 'invalid', 'title'];
+    }
+
+    /**
+     * Any element extending this mixin is required to implement this getter.
+     * It returns the reference to the clear button element.
+     * @protected
+     * @return {Element | null | undefined}
+     */
+    get clearElement() {
+      console.warn(`Please implement the 'clearElement' property in <${this.localName}>`);
+      return null;
+    }
+
+    /** @protected */
+    ready() {
+      super.ready();
+
+      if (this.clearElement) {
+        this.clearElement.addEventListener('click', (e) => this._onClearButtonClick(e));
+      }
+    }
+
+    /**
+     * @param {Event} event
+     * @protected
+     */
+    _onClearButtonClick(event) {
+      event.preventDefault();
+      this.inputElement.focus();
+      this.clear();
+      this.inputElement.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+      this.inputElement.dispatchEvent(new Event('change', { bubbles: true }));
+    }
+
+    /**
+     * Override an event listener from `DelegateFocusMixin`.
+     * @param {FocusEvent} event
+     * @protected
+     * @override
+     */
+    _onFocus(event) {
+      super._onFocus(event);
+
+      if (this.autoselect && this.inputElement) {
+        this.inputElement.select();
+      }
+    }
+
+    /**
+     * Override an event listener inherited from `KeydownMixin` to clear on Esc.
+     * Components that extend this mixin can prevent this behavior by overriding
+     * this method without calling `super._onKeyDown` to provide custom logic.
+     * @param {KeyboardEvent} event
+     * @protected
+     * @override
+     */
+    _onKeyDown(event) {
+      super._onKeyDown(event);
+
+      if (event.key === 'Escape' && this.clearButtonVisible) {
+        const dispatchChange = !!this.value;
+        this.clear();
+        dispatchChange && this.inputElement.dispatchEvent(new Event('change', { bubbles: true }));
+      }
+    }
+
+    /**
+     * Override an event listener inherited from `InputMixin`
+     * to capture native `change` event and make sure that
+     * a new one is dispatched after validation runs.
+     * @param {Event} event
+     * @protected
+     * @override
+     */
+    _onChange(event) {
+      event.stopPropagation();
+
+      this.validate();
+
+      this.dispatchEvent(
+        new CustomEvent('change', {
+          detail: {
+            sourceEvent: event
+          },
+          bubbles: event.bubbles,
+          cancelable: event.cancelable
+        })
+      );
+    }
+  };

package/src/input-controller.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { SlotController } from './slot-controller.js';
+
+/**
+ * A controller to create and initialize slotted `<input>` element.
+ */
+export class InputController implements SlotController {}

package/src/input-controller.js

@@ -0,0 +1,35 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { SlotController } from './slot-controller.js';
+
+/**
+ * A controller to create and initialize slotted `<input>` element.
+ */
+export class InputController extends SlotController {
+  constructor(host, callback) {
+    super(host, [
+      'input',
+      () => document.createElement('input'),
+      (host, node) => {
+        if (host.value) {
+          node.setAttribute('value', host.value);
+        }
+        if (host.type) {
+          node.setAttribute('type', host.type);
+        }
+
+        // Ensure every instance has unique ID
+        const uniqueId = (InputController._uniqueInputId = 1 + InputController._uniqueInputId || 0);
+        host._inputId = `${host.localName}-${uniqueId}`;
+        node.id = host._inputId;
+
+        if (typeof callback == 'function') {
+          callback(node);
+        }
+      }
+    ]);
+  }
+}

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

@@ -3,11 +3,7 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { AriaLabelMixin } from './aria-label-mixin.js';
-import { ClearButtonMixin } from './clear-button-mixin.js';
-import { DelegateFocusMixin } from './delegate-focus-mixin.js';
-import { InputConstraintsMixin } from './input-constraints-mixin.js';
-import { FieldAriaMixin } from './field-aria-mixin.js';
+import { InputControlMixin } from './input-control-mixin.js';
 
 /**
  * A mixin to provide logic for vaadin-text-field and related components.
@@ -18,12 +14,7 @@ interface InputFieldMixinConstructor {
   new (...args: any[]): InputFieldMixin;
 }
 
-interface InputFieldMixin
-  extends AriaLabelMixin,
-    ClearButtonMixin,
-    DelegateFocusMixin,
-    FieldAriaMixin,
-    InputConstraintsMixin {
+interface InputFieldMixin extends InputControlMixin {
   /**
    * Whether the value of the control can be automatically completed by the browser.
    * List of available options at:
@@ -50,11 +41,6 @@ interface InputFieldMixin
    * none: No capitalization.
    */
   autocapitalize: 'on' | 'off' | 'none' | 'characters' | 'words' | 'sentences' | undefined;
-
-  /**
-   * Specify that the value should be automatically selected when the field gains focus.
-   */
-  autoselect: boolean;
 }
 
 export { InputFieldMixin, InputFieldMixinConstructor };

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';
+import { InputControlMixin } from './input-control-mixin.js';
 
-const InputFieldMixinImplementation = (superclass) =>
-  class InputFieldMixinClass extends ClearButtonMixin(
-    FieldAriaMixin(InputConstraintsMixin(AriaLabelMixin(DelegateFocusMixin(superclass))))
-  ) {
+/**
+ * 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 {
         /**
@@ -49,14 +46,6 @@ const InputFieldMixinImplementation = (superclass) =>
          */
         autocapitalize: {
           type: String
-        },
-
-        /**
-         * Specify that the value should be automatically selected when the field gains focus.
-         */
-        autoselect: {
-          type: Boolean,
-          value: false
         }
       };
     }
@@ -65,40 +54,23 @@ const InputFieldMixinImplementation = (superclass) =>
       return [...super.delegateAttrs, 'autocapitalize', 'autocomplete', 'autocorrect'];
     }
 
-    static get observers() {
-      return ['__observeOffsetHeight(errorMessage, invalid, label, helperText)'];
-    }
-
     /**
-     * Element used by `FieldAriaMixin` to set ARIA attributes.
+     * @param {HTMLElement} input
      * @protected
+     * @override
      */
-    get _ariaTarget() {
-      return this.inputElement;
-    }
-
-    /** @protected */
-    ready() {
-      super.ready();
+    _inputElementChanged(input) {
+      super._inputElementChanged(input);
 
-      // 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();
-        });
-      }
-
-      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;
         }
       }
     }
@@ -112,20 +84,6 @@ const InputFieldMixinImplementation = (superclass) =>
       this.__dataValue = value;
     }
 
-    /**
-     * Override an event listener from `DelegateFocusMixin`.
-     * @param {FocusEvent} event
-     * @protected
-     * @override
-     */
-    _onFocus(event) {
-      super._onFocus(event);
-
-      if (this.autoselect && this.inputElement) {
-        this.inputElement.select();
-      }
-    }
-
     /**
      * Override an event listener from `DelegateFocusMixin`.
      * @param {FocusEvent} event
@@ -138,31 +96,6 @@ const InputFieldMixinImplementation = (superclass) =>
       this.validate();
     }
 
-    /**
-     * Dispatch an event if a specific size measurement property has changed.
-     * Supporting multiple properties here is needed for `vaadin-text-area`.
-     * @protected
-     */
-    _dispatchIronResizeEventIfNeeded(prop, value) {
-      const oldSize = '__old' + prop;
-      if (this[oldSize] !== undefined && this[oldSize] !== value) {
-        this.dispatchEvent(new CustomEvent('iron-resize', { bubbles: true, composed: true }));
-      }
-
-      this[oldSize] = value;
-    }
-
-    /** @private */
-    __observeOffsetHeight() {
-      this.__observeOffsetHeightDebouncer = Debouncer.debounce(
-        this.__observeOffsetHeightDebouncer,
-        animationFrame,
-        () => {
-          this._dispatchIronResizeEventIfNeeded('Height', this.offsetHeight);
-        }
-      );
-    }
-
     /**
      * Override a method from `InputMixin` to validate the field
      * when a new value is set programmatically.
@@ -178,8 +111,3 @@ const InputFieldMixinImplementation = (superclass) =>
       }
     }
   };
-
-/**
- * A mixin to provide logic for vaadin-text-field and related components.
- */
-export const InputFieldMixin = dedupingMixin(InputFieldMixinImplementation);

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.
    */