@vaadin/field-base 23.0.0-beta1 → 23.0.0-beta5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/field-base",
-  "version": "23.0.0-beta1",
+  "version": "23.0.0-beta5",
   "publishConfig": {
     "access": "public"
   },
@@ -32,7 +32,7 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "23.0.0-beta1",
+    "@vaadin/component-base": "23.0.0-beta5",
     "lit": "^2.0.0"
   },
   "devDependencies": {
@@ -40,5 +40,5 @@
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^9.2.1"
   },
-  "gitHead": "467244b76021176c109df675799b07029b293e58"
+  "gitHead": "4c388aeec6623869c70896c909799804fc95d0f9"
 }

package/src/delegate-focus-mixin.d.ts

@@ -6,13 +6,18 @@
 import { Constructor } from '@open-wc/dedupe-mixin';
 import { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
 import { FocusMixinClass } from '@vaadin/component-base/src/focus-mixin.js';
+import { TabindexMixinClass } from '@vaadin/component-base/src/tabindex-mixin.js';
 
 /**
  * A mixin to forward focus to an element in the light DOM.
  */
 export declare function DelegateFocusMixin<T extends Constructor<HTMLElement>>(
   base: T
-): T & Constructor<DelegateFocusMixinClass> & Constructor<DisabledMixinClass> & Constructor<FocusMixinClass>;
+): T &
+  Constructor<DelegateFocusMixinClass> &
+  Constructor<DisabledMixinClass> &
+  Constructor<FocusMixinClass> &
+  Constructor<TabindexMixinClass>;
 
 export declare class DelegateFocusMixinClass {
   /**

package/src/delegate-focus-mixin.js

@@ -4,19 +4,19 @@
  * 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 { DisabledMixin } from '@vaadin/component-base/src/disabled-mixin.js';
 import { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js';
+import { TabindexMixin } from '@vaadin/component-base/src/tabindex-mixin.js';
 
 /**
  * A mixin to forward focus to an element in the light DOM.
  *
  * @polymerMixin
- * @mixes DisabledMixin
  * @mixes FocusMixin
+ * @mixes TabindexMixin
  */
 export const DelegateFocusMixin = dedupingMixin(
   (superclass) =>
-    class DelegateFocusMixinClass extends FocusMixin(DisabledMixin(superclass)) {
+    class DelegateFocusMixinClass extends FocusMixin(TabindexMixin(superclass)) {
       static get properties() {
         return {
           /**
@@ -40,6 +40,19 @@ export const DelegateFocusMixin = dedupingMixin(
             type: Object,
             readOnly: true,
             observer: '_focusElementChanged'
+          },
+
+          /**
+           * Indicates whether the element can be focused and where it participates in sequential keyboard navigation.
+           *
+           * By default, the host element does not have tabindex attribute. Instead, `focusElement` should have it.
+           * Toggling `tabindex` attribute on the host element propagates its value to `focusElement`.
+           *
+           * @protected
+           */
+          tabindex: {
+            type: Number,
+            value: undefined
           }
         };
       }
@@ -103,6 +116,7 @@ export const DelegateFocusMixin = dedupingMixin(
         if (element) {
           element.disabled = this.disabled;
           this._addFocusListeners(element);
+          this.__forwardTabIndex(this.tabindex);
         } else if (oldElement) {
           this._removeFocusListeners(oldElement);
         }
@@ -162,10 +176,12 @@ export const DelegateFocusMixin = dedupingMixin(
 
       /**
        * @param {boolean} disabled
+       * @param {boolean} oldDisabled
        * @protected
+       * @override
        */
-      _disabledChanged(disabled) {
-        super._disabledChanged(disabled);
+      _disabledChanged(disabled, oldDisabled) {
+        super._disabledChanged(disabled, oldDisabled);
 
         if (this.focusElement) {
           this.focusElement.disabled = disabled;
@@ -175,5 +191,37 @@ export const DelegateFocusMixin = dedupingMixin(
           this.blur();
         }
       }
+
+      /**
+       * Override an observer from `TabindexMixin`.
+       * Do not call super to remove tabindex attribute
+       * from the host after it has been forwarded.
+       * @param {string} tabindex
+       * @protected
+       * @override
+       */
+      _tabindexChanged(tabindex) {
+        this.__forwardTabIndex(tabindex);
+      }
+
+      /** @private */
+      __forwardTabIndex(tabindex) {
+        if (tabindex !== undefined && this.focusElement) {
+          this.focusElement.tabIndex = tabindex;
+
+          // Preserve tabindex="-1" on the host element
+          if (tabindex !== -1) {
+            this.tabindex = undefined;
+          }
+        }
+
+        if (this.disabled && tabindex) {
+          // If tabindex attribute was changed while component was disabled
+          if (tabindex !== -1) {
+            this.__lastTabIndex = tabindex;
+          }
+          this.tabindex = undefined;
+        }
+      }
     }
 );

package/src/error-controller.d.ts

@@ -0,0 +1,36 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
+
+/**
+ * A controller that manages the error message node content.
+ */
+export class ErrorController extends SlotController {
+  /**
+   * ID attribute value set on the error message element.
+   */
+  readonly errorId: string;
+
+  /**
+   * String used for the error message text content.
+   */
+  protected errorMessage: string | null | undefined;
+
+  /**
+   * Set to true when the host element is invalid.
+   */
+  protected invalid: boolean;
+
+  /**
+   * Set the error message element text content.
+   */
+  setErrorMessage(errorMessage: string | null | undefined): void;
+
+  /**
+   * Set invalid state for detecting whether to show error message.
+   */
+  setInvalid(invalid: boolean): void;
+}

package/src/error-controller.js

@@ -0,0 +1,134 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
+
+/**
+ * A controller that manages the error message node content.
+ */
+export class ErrorController extends SlotController {
+  constructor(host) {
+    super(
+      host,
+      'error-message',
+      () => document.createElement('div'),
+      (_host, node) => {
+        this.__updateErrorId(node);
+
+        this.__updateHasError();
+      }
+    );
+  }
+
+  /**
+   * ID attribute value set on the error message element.
+   *
+   * @return {string}
+   */
+  get errorId() {
+    return this.node && this.node.id;
+  }
+
+  /**
+   * Set the error message element text content.
+   *
+   * @param {string} errorMessage
+   */
+  setErrorMessage(errorMessage) {
+    this.errorMessage = errorMessage;
+
+    this.__updateHasError();
+  }
+
+  /**
+   * Set invalid state for detecting whether to show error message.
+   *
+   * @param {boolean} invalid
+   */
+  setInvalid(invalid) {
+    this.invalid = invalid;
+
+    this.__updateHasError();
+  }
+
+  /**
+   * Override to initialize the newly added custom label.
+   *
+   * @param {Node} errorNode
+   * @protected
+   * @override
+   */
+  initCustomNode(errorNode) {
+    this.__updateErrorId(errorNode);
+
+    // Save the custom error message content on the host.
+    if (errorNode.textContent && !this.errorMessage) {
+      this.errorMessage = errorNode.textContent.trim();
+    }
+
+    this.__updateHasError();
+  }
+
+  /**
+   * Override to cleanup label node when it's removed.
+   *
+   * @param {Node} node
+   * @protected
+   * @override
+   */
+  teardownNode(node) {
+    let errorNode = this.getSlotChild();
+
+    // If custom error was removed, restore the default one.
+    if (!errorNode && node !== this.defaultNode) {
+      errorNode = this.attachDefaultNode();
+
+      // Run initializer to update default label and ID.
+      this.initNode(errorNode);
+    }
+
+    this.__updateHasError();
+  }
+
+  /**
+   * @param {string} error
+   * @private
+   */
+  __isNotEmpty(error) {
+    return Boolean(error && error.trim() !== '');
+  }
+
+  /** @private */
+  __updateHasError() {
+    const errorNode = this.node;
+    const hasError = Boolean(this.invalid && this.__isNotEmpty(this.errorMessage));
+
+    // Update both default and custom error message node.
+    if (errorNode) {
+      errorNode.textContent = hasError ? this.errorMessage : '';
+      errorNode.hidden = !hasError;
+
+      // Role alert will make the error message announce immediately
+      // as the field becomes invalid
+      if (hasError) {
+        errorNode.setAttribute('role', 'alert');
+      } else {
+        errorNode.removeAttribute('role');
+      }
+    }
+
+    this.host.toggleAttribute('has-error-message', hasError);
+  }
+
+  /**
+   * @param {HTMLElement} errorNode
+   * @private
+   */
+  __updateErrorId(errorNode) {
+    if (!errorNode.id) {
+      errorNode.id = this.defaultId;
+    }
+  }
+}

package/src/field-mixin.js

@@ -4,7 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
-import { SlotMixin } from '@vaadin/component-base/src/slot-mixin.js';
+import { ErrorController } from './error-controller.js';
 import { FieldAriaController } from './field-aria-controller.js';
 import { HelperController } from './helper-controller.js';
 import { LabelMixin } from './label-mixin.js';
@@ -16,11 +16,10 @@ import { ValidateMixin } from './validate-mixin.js';
  * @polymerMixin
  * @mixes ControllerMixin
  * @mixes LabelMixin
- * @mixes SlotMixin
  * @mixes ValidateMixin
  */
 export const FieldMixin = (superclass) =>
-  class FieldMixinClass extends ValidateMixin(LabelMixin(ControllerMixin(SlotMixin(superclass)))) {
+  class FieldMixinClass extends ValidateMixin(LabelMixin(ControllerMixin(superclass))) {
     static get properties() {
       return {
         /**
@@ -38,7 +37,8 @@ export const FieldMixin = (superclass) =>
          * @attr {string} error-message
          */
         errorMessage: {
-          type: String
+          type: String,
+          observer: '_errorMessageChanged'
         },
 
         /**
@@ -55,20 +55,13 @@ export const FieldMixin = (superclass) =>
       };
     }
 
-    /** @protected */
-    get slots() {
-      return {
-        ...super.slots,
-        'error-message': () => {
-          const error = document.createElement('div');
-          error.textContent = this.errorMessage;
-          return error;
-        }
-      };
+    static get observers() {
+      return ['_invalidChanged(invalid)', '_requiredChanged(required)'];
     }
 
-    static get observers() {
-      return ['_updateErrorMessage(invalid, errorMessage)', '_invalidChanged(invalid)', '_requiredChanged(required)'];
+    /** @protected */
+    get _errorId() {
+      return this._errorController.errorId;
     }
 
     /**
@@ -76,7 +69,7 @@ export const FieldMixin = (superclass) =>
      * @return {HTMLElement}
      */
     get _errorNode() {
-      return this._getDirectSlotChild('error-message');
+      return this._errorController.node;
     }
 
     /** @protected */
@@ -95,15 +88,13 @@ export const FieldMixin = (superclass) =>
     constructor() {
       super();
 
-      // Ensure every instance has unique ID
-      const uniqueId = (FieldMixinClass._uniqueFieldId = 1 + FieldMixinClass._uniqueFieldId || 0);
-      this._errorId = `error-${this.localName}-${uniqueId}`;
-
       this._fieldAriaController = new FieldAriaController(this);
       this._helperController = new HelperController(this);
+      this._errorController = new ErrorController(this);
 
       this.addController(this._fieldAriaController);
       this.addController(this._helperController);
+      this.addController(this._errorController);
 
       this._labelController.addEventListener('label-changed', (event) => {
         const { hasLabel, node } = event.detail;
@@ -116,29 +107,6 @@ export const FieldMixin = (superclass) =>
       });
     }
 
-    /** @protected */
-    ready() {
-      super.ready();
-
-      const error = this._errorNode;
-      if (error) {
-        error.id = this._errorId;
-
-        this.__applyCustomError();
-
-        this._updateErrorMessage(this.invalid, this.errorMessage);
-      }
-    }
-
-    /** @private */
-    __applyCustomError() {
-      const error = this.__errorMessage;
-      if (error && error !== this.errorMessage) {
-        this.errorMessage = error;
-        delete this.__errorMessage;
-      }
-    }
-
     /** @private */
     __helperChanged(hasHelper, helperNode) {
       if (hasHelper) {
@@ -160,32 +128,11 @@ export const FieldMixin = (superclass) =>
     }
 
     /**
-     * @param {boolean} invalid
      * @param {string | null | undefined} errorMessage
      * @protected
      */
-    _updateErrorMessage(invalid, errorMessage) {
-      const error = this._errorNode;
-      if (!error) {
-        return;
-      }
-
-      // save the custom error message content
-      if (error.textContent && !errorMessage) {
-        this.__errorMessage = error.textContent.trim();
-      }
-      const hasError = Boolean(invalid && errorMessage);
-      error.textContent = hasError ? errorMessage : '';
-      error.hidden = !hasError;
-      this.toggleAttribute('has-error-message', hasError);
-
-      // Role alert will make the error message announce immediately
-      // as the field becomes invalid
-      if (hasError) {
-        error.setAttribute('role', 'alert');
-      } else {
-        error.removeAttribute('role');
-      }
+    _errorMessageChanged(errorMessage) {
+      this._errorController.setErrorMessage(errorMessage);
     }
 
     /**
@@ -219,6 +166,8 @@ export const FieldMixin = (superclass) =>
      * @protected
      */
     _invalidChanged(invalid) {
+      this._errorController.setInvalid(invalid);
+
       // This timeout is needed to prevent NVDA from announcing the error message twice:
       // 1. Once adding the `[role=alert]` attribute by the `_updateErrorMessage` method (OK).
       // 2. Once linking the error ID with the ARIA target here (unwanted).
@@ -227,7 +176,7 @@ export const FieldMixin = (superclass) =>
         // Error message ID needs to be dynamically added / removed based on the validity
         // Otherwise assistive technologies would announce the error, even if we hide it.
         if (invalid) {
-          this._fieldAriaController.setErrorId(this._errorId);
+          this._fieldAriaController.setErrorId(this._errorController.errorId);
         } else {
           this._fieldAriaController.setErrorId(null);
         }

package/src/input-control-mixin.js

@@ -107,9 +107,7 @@ export const InputControlMixin = (superclass) =>
     _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 }));
+      this.__clear();
     }
 
     /**
@@ -137,10 +135,8 @@ export const InputControlMixin = (superclass) =>
     _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 }));
+      if (event.key === 'Escape' && this.clearButtonVisible && !!this.value) {
+        this.__clear();
       }
     }
 
@@ -167,4 +163,24 @@ export const InputControlMixin = (superclass) =>
         })
       );
     }
+
+    /** @private */
+    __clear() {
+      this.clear();
+      this.inputElement.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+      this.inputElement.dispatchEvent(new Event('change', { bubbles: true }));
+    }
+
+    /**
+     * Fired when the user commits a value change.
+     *
+     * @event change
+     */
+
+    /**
+     * Fired when the value is changed by the user: on every typing keystroke,
+     * and the value is cleared using the clear button.
+     *
+     * @event input
+     */
   };

package/src/label-controller.js

@@ -41,6 +41,8 @@ export class LabelController extends SlotController {
    * @override
    */
   initCustomNode(labelNode) {
+    this.__updateLabelId(labelNode);
+
     const hasLabel = this.__hasLabel(labelNode);
     this.__toggleHasLabel(hasLabel);
   }

package/src/shadow-focus-mixin.js

@@ -4,7 +4,6 @@
  * 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 { TabindexMixin } from '@vaadin/component-base/src/tabindex-mixin.js';
 import { DelegateFocusMixin } from './delegate-focus-mixin.js';
 
 /**
@@ -13,10 +12,23 @@ import { DelegateFocusMixin } from './delegate-focus-mixin.js';
  * @polymerMixin
  * @mixes DelegateFocusMixin
  * @mixes KeyboardMixin
- * @mixes TabindexMixin
  */
 export const ShadowFocusMixin = (superClass) =>
-  class ShadowFocusMixinClass extends TabindexMixin(DelegateFocusMixin(KeyboardMixin(superClass))) {
+  class ShadowFocusMixinClass extends DelegateFocusMixin(KeyboardMixin(superClass)) {
+    static get properties() {
+      return {
+        /**
+         * Indicates whether the element can be focused and where it participates in sequential keyboard navigation.
+         *
+         * @protected
+         */
+        tabindex: {
+          type: Number,
+          value: 0
+        }
+      };
+    }
+
     /**
      * Override an event listener from `KeyboardMixin`
      * to prevent setting `focused` on Shift Tab.