@vaadin/field-base 23.3.3 → 24.0.0-alpha10

package/index.d.ts

@@ -1,6 +1,4 @@
 export { CheckedMixin } from './src/checked-mixin.js';
-export { DelegateFocusMixin } from './src/delegate-focus-mixin.js';
-export { DelegateStateMixin } from './src/delegate-state-mixin.js';
 export { FieldAriaController } from './src/field-aria-controller.js';
 export { FieldMixin } from './src/field-mixin.js';
 export { InputController } from './src/input-controller.js';
@@ -10,7 +8,6 @@ export { InputMixin } from './src/input-mixin.js';
 export { LabelledInputController } from './src/labelled-input-controller.js';
 export { LabelMixin } from './src/label-mixin.js';
 export { PatternMixin } from './src/pattern-mixin.js';
-export { ShadowFocusMixin } from './src/shadow-focus-mixin.js';
 export { SlotStylesMixin } from './src/slot-styles-mixin.js';
 export { TextAreaController } from './src/text-area-controller.js';
 export { ValidateMixin } from './src/validate-mixin.js';

package/index.js

@@ -1,6 +1,4 @@
 export { CheckedMixin } from './src/checked-mixin.js';
-export { DelegateFocusMixin } from './src/delegate-focus-mixin.js';
-export { DelegateStateMixin } from './src/delegate-state-mixin.js';
 export { FieldAriaController } from './src/field-aria-controller.js';
 export { FieldMixin } from './src/field-mixin.js';
 export { InputController } from './src/input-controller.js';
@@ -10,7 +8,6 @@ export { InputMixin } from './src/input-mixin.js';
 export { LabelledInputController } from './src/labelled-input-controller.js';
 export { LabelMixin } from './src/label-mixin.js';
 export { PatternMixin } from './src/pattern-mixin.js';
-export { ShadowFocusMixin } from './src/shadow-focus-mixin.js';
 export { SlotStylesMixin } from './src/slot-styles-mixin.js';
 export { TextAreaController } from './src/text-area-controller.js';
 export { ValidateMixin } from './src/validate-mixin.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/field-base",
-  "version": "23.3.3",
+  "version": "24.0.0-alpha10",
   "publishConfig": {
     "access": "public"
   },
@@ -32,7 +32,7 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "~23.3.3",
+    "@vaadin/component-base": "24.0.0-alpha10",
     "lit": "^2.0.0"
   },
   "devDependencies": {
@@ -40,5 +40,5 @@
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^13.0.2"
   },
-  "gitHead": "1529ed623e053d28a3c1c66af55ebe402743ddd0"
+  "gitHead": "2e04534d8b47bcd216f89b5f849bafef1a73b174"
 }

package/src/checked-mixin.d.ts

@@ -1,11 +1,11 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { DelegateStateMixinClass } from '@vaadin/component-base/src/delegate-state-mixin.js';
 import type { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
-import type { DelegateStateMixinClass } from './delegate-state-mixin.js';
 import type { InputMixinClass } from './input-mixin.js';
 
 /**

package/src/checked-mixin.js

@@ -1,12 +1,12 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * 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 { DelegateStateMixin } from '@vaadin/component-base/src/delegate-state-mixin.js';
 import { DisabledMixin } from '@vaadin/component-base/src/disabled-mixin.js';
 import { isElementFocused } from '@vaadin/component-base/src/focus-utils.js';
-import { DelegateStateMixin } from './delegate-state-mixin.js';
 import { InputMixin } from './input-mixin.js';
 
 /**

package/src/error-controller.d.ts

@@ -1,19 +1,14 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 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';
+import { SlotChildObserveController } from '@vaadin/component-base/src/slot-child-observe-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;
-
+export class ErrorController extends SlotChildObserveController {
   /**
    * String used for the error message text content.
    */

package/src/error-controller.js

@@ -1,35 +1,16 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 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';
+import { SlotChildObserveController } from '@vaadin/component-base/src/slot-child-observe-controller.js';
 
 /**
  * A controller that manages the error message node content.
  */
-export class ErrorController extends SlotController {
+export class ErrorController extends SlotChildObserveController {
   constructor(host) {
-    super(
-      host,
-      'error-message',
-      () => document.createElement('div'),
-      (_host, node) => {
-        this.__updateErrorId(node);
-
-        this.__updateHasError();
-      },
-      true,
-    );
-  }
-
-  /**
-   * ID attribute value set on the error message element.
-   *
-   * @return {string}
-   */
-  get errorId() {
-    return this.node && this.node.id;
+    super(host, 'error-message', 'div');
   }
 
   /**
@@ -40,7 +21,7 @@ export class ErrorController extends SlotController {
   setErrorMessage(errorMessage) {
     this.errorMessage = errorMessage;
 
-    this.__updateHasError();
+    this.updateDefaultNode(this.node);
   }
 
   /**
@@ -51,7 +32,33 @@ export class ErrorController extends SlotController {
   setInvalid(invalid) {
     this.invalid = invalid;
 
-    this.__updateHasError();
+    this.updateDefaultNode(this.node);
+  }
+
+  /**
+   * Override method inherited from `SlotController` to not run
+   * initializer on the custom slotted node unnecessarily.
+   *
+   * @param {Node} node
+   * @protected
+   * @override
+   */
+  initAddedNode(node) {
+    if (node !== this.defaultNode) {
+      // There is no need to run `initNode`.
+      this.initCustomNode(node);
+    }
+  }
+
+  /**
+   * Override to initialize the newly added default error message.
+   *
+   * @param {Node} errorNode
+   * @protected
+   * @override
+   */
+  initNode(errorNode) {
+    this.updateDefaultNode(errorNode);
   }
 
   /**
@@ -62,53 +69,43 @@ export class ErrorController extends SlotController {
    * @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();
+    // Notify the host about custom node.
+    super.initCustomNode(errorNode);
   }
 
   /**
-   * Override to cleanup error message node when it's removed.
+   * Override method inherited from `SlotChildObserveController`
+   * to restore the default error message element.
    *
-   * @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 error message ID.
-      this.initNode(errorNode);
-    }
-
-    this.__updateHasError();
+  restoreDefaultNode() {
+    this.attachDefaultNode();
   }
 
   /**
-   * @param {string} error
-   * @private
+   * Override method inherited from `SlotChildObserveController`
+   * to update the error message text and hidden state.
+   *
+   * Note: unlike with other controllers, this method is
+   * called for both default and custom error message.
+   *
+   * @param {Node | undefined} node
+   * @protected
+   * @override
    */
-  __isNotEmpty(error) {
-    return Boolean(error && error.trim() !== '');
-  }
-
-  /** @private */
-  __updateHasError() {
-    const errorNode = this.node;
-    const hasError = Boolean(this.invalid && this.__isNotEmpty(this.errorMessage));
+  updateDefaultNode(errorNode) {
+    const { errorMessage, invalid } = this;
+    const hasError = Boolean(invalid && errorMessage && errorMessage.trim() !== '');
 
-    // Update both default and custom error message node.
     if (errorNode) {
-      errorNode.textContent = hasError ? this.errorMessage : '';
+      errorNode.textContent = hasError ? errorMessage : '';
       errorNode.hidden = !hasError;
 
       // Role alert will make the error message announce immediately
@@ -120,16 +117,7 @@ export class ErrorController extends SlotController {
       }
     }
 
-    this.host.toggleAttribute('has-error-message', hasError);
-  }
-
-  /**
-   * @param {HTMLElement} errorNode
-   * @private
-   */
-  __updateErrorId(errorNode) {
-    if (!errorNode.id) {
-      errorNode.id = this.defaultId;
-    }
+    // Notify the host after update.
+    super.updateDefaultNode(errorNode);
   }
 }

package/src/field-aria-controller.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 

package/src/field-aria-controller.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { addValueToAttribute, removeValueFromAttribute } from '@vaadin/component-base/src/dom-utils.js';
@@ -15,6 +15,16 @@ export class FieldAriaController {
     this.__required = false;
   }
 
+  /**
+   * `true` if the target element is the host component itself, `false` otherwise.
+   *
+   * @return {boolean}
+   * @private
+   */
+  get __isGroupField() {
+    return this.__target === this.host;
+  }
+
   /**
    * Sets a target element to which ARIA attributes are added.
    *
@@ -81,16 +91,6 @@ export class FieldAriaController {
     this.__helperId = helperId;
   }
 
-  /**
-   * `true` if the target element is the host component itself, `false` otherwise.
-   *
-   * @return {boolean}
-   * @private
-   */
-  get __isGroupField() {
-    return this.__target === this.host;
-  }
-
   /**
    * @param {string | null | undefined} labelId
    * @param {string | null | undefined} oldLabelId

package/src/field-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';

package/src/field-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * 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';
@@ -56,9 +56,27 @@ export const FieldMixin = (superclass) =>
       return ['_invalidChanged(invalid)', '_requiredChanged(required)'];
     }
 
-    /** @protected */
-    get _errorId() {
-      return this._errorController.errorId;
+    constructor() {
+      super();
+
+      this._fieldAriaController = new FieldAriaController(this);
+      this._helperController = new HelperController(this);
+      this._errorController = new ErrorController(this);
+
+      this._errorController.addEventListener('slot-content-changed', (event) => {
+        this.toggleAttribute('has-error-message', event.detail.hasContent);
+      });
+
+      this._labelController.addEventListener('slot-content-changed', (event) => {
+        const { hasContent, node } = event.detail;
+        this.__labelChanged(hasContent, node);
+      });
+
+      this._helperController.addEventListener('slot-content-changed', (event) => {
+        const { hasContent, node } = event.detail;
+        this.toggleAttribute('has-helper', hasContent);
+        this.__helperChanged(hasContent, node);
+      });
     }
 
     /**
@@ -69,11 +87,6 @@ export const FieldMixin = (superclass) =>
       return this._errorController.node;
     }
 
-    /** @protected */
-    get _helperId() {
-      return this._helperController.helperId;
-    }
-
     /**
      * @protected
      * @return {HTMLElement}
@@ -82,24 +95,6 @@ export const FieldMixin = (superclass) =>
       return this._helperController.node;
     }
 
-    constructor() {
-      super();
-
-      this._fieldAriaController = new FieldAriaController(this);
-      this._helperController = new HelperController(this);
-      this._errorController = new ErrorController(this);
-
-      this._labelController.addEventListener('label-changed', (event) => {
-        const { hasLabel, node } = event.detail;
-        this.__labelChanged(hasLabel, node);
-      });
-
-      this._helperController.addEventListener('helper-changed', (event) => {
-        const { hasHelper, node } = event.detail;
-        this.__helperChanged(hasHelper, node);
-      });
-    }
-
     /** @protected */
     ready() {
       super.ready();
@@ -178,7 +173,8 @@ 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._errorController.errorId);
+          const node = this._errorNode;
+          this._fieldAriaController.setErrorId(node && node.id);
         } else {
           this._fieldAriaController.setErrorId(null);
         }

package/src/helper-controller.d.ts

@@ -1,21 +1,19 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 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';
+import { SlotChildObserveController } from '@vaadin/component-base/src/slot-child-observe-controller.js';
 
 /**
  * A controller that manages the helper node content.
  */
-export class HelperController extends SlotController {
+export class HelperController extends SlotChildObserveController {
   /**
    * String used for the helper text.
    */
   helperText: string | null | undefined;
 
-  helperId: string;
-
   /**
    * Set helper text based on corresponding host property.
    */