@vaadin/field-base 23.2.16 → 23.2.17

package/src/input-controller.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * 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';
@@ -10,8 +10,11 @@ import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
  */
 export class InputController extends SlotController {
   constructor(host, callback) {
-    super(host, 'input', 'input', {
-      initializer: (node, host) => {
+    super(
+      host,
+      'input',
+      () => document.createElement('input'),
+      (host, node) => {
         if (host.value) {
           node.setAttribute('value', host.value);
         }
@@ -26,7 +29,7 @@ export class InputController extends SlotController {
           callback(node);
         }
       },
-      useUniqueId: true,
-    });
+      true,
+    );
   }
 }

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

@@ -1,15 +1,15 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 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 { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
-import type { DelegateFocusMixinClass } from '@vaadin/component-base/src/delegate-focus-mixin.js';
-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 { FocusMixinClass } from '@vaadin/component-base/src/focus-mixin.js';
 import type { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mixin.js';
+import type { DelegateFocusMixinClass } from './delegate-focus-mixin.js';
+import type { DelegateStateMixinClass } from './delegate-state-mixin.js';
 import type { FieldMixinClass } from './field-mixin.js';
 import type { InputConstraintsMixinClass } from './input-constraints-mixin.js';
 import type { InputControlMixinClass } from './input-control-mixin.js';

package/src/input-field-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { InputControlMixin } from './input-control-mixin.js';
@@ -55,15 +55,6 @@ export const InputFieldMixin = (superclass) =>
       return [...super.delegateAttrs, 'autocapitalize', 'autocomplete', 'autocorrect'];
     }
 
-    // Workaround for https://github.com/Polymer/polymer/issues/5259
-    get __data() {
-      return this.__dataValue || {};
-    }
-
-    set __data(value) {
-      this.__dataValue = value;
-    }
-
     /**
      * @param {HTMLElement} input
      * @protected
@@ -85,6 +76,15 @@ export const InputFieldMixin = (superclass) =>
       }
     }
 
+    // Workaround for https://github.com/Polymer/polymer/issues/5259
+    get __data() {
+      return this.__dataValue || {};
+    }
+
+    set __data(value) {
+      this.__dataValue = value;
+    }
+
     /**
      * Override an event listener from `FocusMixin`.
      * @param {boolean} focused

package/src/input-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 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';
@@ -47,15 +47,13 @@ export declare class InputMixinClass {
 
   protected _inputElementChanged(input: HTMLElement, oldInput: HTMLElement): void;
 
-  protected _onChange(event: Event): void;
+  protected _onChange(event: void): void;
 
-  protected _onInput(event: Event): void;
+  protected _onInput(event: void): void;
 
   protected _setInputElement(input: HTMLElement): void;
 
   protected _toggleHasValue(hasValue: boolean): void;
 
   protected _valueChanged(value?: string, oldValue?: string): void;
-
-  protected _setHasInputValue(event: InputEvent): void;
 }

package/src/input-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 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';
@@ -72,27 +72,11 @@ export const InputMixin = dedupingMixin(
         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 !== '';
-      }
-
       /**
        * 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.
-        if (this.inputElement) {
-          this.inputElement.value = '';
-        }
       }
 
       /**
@@ -171,7 +155,11 @@ export const InputMixin = dedupingMixin(
        * @private
        */
       __onInput(event) {
-        this._setHasInputValue(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];
+        this._hasInputValue = target.value.length > 0;
         this._onInput(event);
       }
 
@@ -234,17 +222,13 @@ export const InputMixin = dedupingMixin(
       }
 
       /**
-       * Sets the `_hasInputValue` property based on the `input` event.
+       * Indicates whether the value is different from the default one.
+       * Override if the `value` property has a type other than `string`.
        *
-       * @param {InputEvent} event
        * @protected
        */
-      _setHasInputValue(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];
-        this._hasInputValue = target.value.length > 0;
+      get _hasValue() {
+        return this.value != null && this.value !== '';
       }
     },
 );

package/src/label-controller.d.ts

@@ -1,14 +1,19 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { SlotChildObserveController } from '@vaadin/component-base/src/slot-child-observe-controller.js';
+import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
 
 /**
  * A controller to manage the label element.
  */
-export class LabelController extends SlotChildObserveController {
+export class LabelController extends SlotController {
+  /**
+   * ID attribute value set on the label element.
+   */
+  labelId: string;
+
   /**
    * String used for the label.
    */

package/src/label-controller.js

@@ -1,16 +1,77 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { SlotChildObserveController } from '@vaadin/component-base/src/slot-child-observe-controller.js';
+import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
 
 /**
  * A controller to manage the label element.
  */
-export class LabelController extends SlotChildObserveController {
+export class LabelController extends SlotController {
   constructor(host) {
-    super(host, 'label', 'label');
+    super(
+      host,
+      'label',
+      () => document.createElement('label'),
+      (_host, node) => {
+        // Set ID attribute or use the existing one.
+        this.__updateLabelId(node);
+
+        // Set text content for the default label.
+        this.__updateDefaultLabel(this.label);
+
+        this.__observeLabel(node);
+      },
+      true,
+    );
+  }
+
+  /**
+   * @return {string}
+   */
+  get labelId() {
+    return this.node.id;
+  }
+
+  /**
+   * Override to initialize the newly added custom label.
+   *
+   * @param {Node} labelNode
+   * @protected
+   * @override
+   */
+  initCustomNode(labelNode) {
+    this.__updateLabelId(labelNode);
+
+    const hasLabel = this.__hasLabel(labelNode);
+    this.__toggleHasLabel(hasLabel);
+  }
+
+  /**
+   * Override to cleanup label node when it's removed.
+   *
+   * @param {Node} node
+   * @protected
+   * @override
+   */
+  teardownNode(node) {
+    if (this.__labelObserver) {
+      this.__labelObserver.disconnect();
+    }
+
+    let labelNode = this.getSlotChild();
+
+    // If custom label was removed, restore the default one.
+    if (!labelNode && node !== this.defaultNode) {
+      labelNode = this.attachDefaultNode();
+
+      // Run initializer to update default label and ID.
+      this.initNode(labelNode);
+    }
+
+    const hasLabel = this.__hasLabel(labelNode);
+    this.__toggleHasLabel(hasLabel);
   }
 
   /**
@@ -21,65 +82,108 @@ export class LabelController extends SlotChildObserveController {
   setLabel(label) {
     this.label = label;
 
-    // Restore the default label, if needed.
-    const labelNode = this.getSlotChild();
+    this.__updateDefaultLabel(label);
+  }
+
+  /**
+   * @param {HTMLElement} labelNode
+   * @return {boolean}
+   * @private
+   */
+  __hasLabel(labelNode) {
     if (!labelNode) {
-      this.restoreDefaultNode();
+      return false;
     }
 
-    // When default label is used, update it.
-    if (this.node === this.defaultNode) {
-      this.updateDefaultNode(this.node);
-    }
+    return labelNode.children.length > 0 || this.__isNotEmpty(labelNode.textContent);
   }
 
   /**
-   * Override method inherited from `SlotChildObserveController`
-   * to restore and observe the default label element.
-   *
-   * @protected
-   * @override
+   * @param {string} label
+   * @private
    */
-  restoreDefaultNode() {
-    const { label } = this;
+  __isNotEmpty(label) {
+    return Boolean(label && label.trim() !== '');
+  }
 
-    // Restore the default label.
-    if (label && label.trim() !== '') {
-      const labelNode = this.attachDefaultNode();
+  /**
+   * @param {HTMLElement} labelNode
+   * @private
+   */
+  __observeLabel(labelNode) {
+    this.__labelObserver = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        const target = mutation.target;
 
-      // Observe the default label.
-      this.observeNode(labelNode);
-    }
+        // Ensure the mutation target is the currently connected label
+        // to ignore async mutations dispatched for removed element.
+        const isLabelMutation = target === this.node;
+
+        if (mutation.type === 'attributes') {
+          // We use attributeFilter to only observe ID mutation,
+          // no need to check for attribute name separately.
+          if (isLabelMutation && target.id !== this.defaultId) {
+            this.__updateLabelId(target);
+          }
+        } else if (isLabelMutation || target.parentElement === this.node) {
+          // Update has-label when textContent changes
+          const hasLabel = this.__hasLabel(this.node);
+          this.__toggleHasLabel(hasLabel);
+        }
+      });
+    });
+
+    // Observe changes to label ID attribute, text content and children.
+    this.__labelObserver.observe(labelNode, {
+      attributes: true,
+      attributeFilter: ['id'],
+      childList: true,
+      subtree: true,
+      characterData: true,
+    });
   }
 
   /**
-   * Override method inherited from `SlotChildObserveController`
-   * to update the default label element text content.
-   *
-   * @param {Node | undefined} node
-   * @protected
-   * @override
+   * @param {boolean} hasLabel
+   * @private
    */
-  updateDefaultNode(node) {
-    if (node) {
-      node.textContent = this.label;
-    }
+  __toggleHasLabel(hasLabel) {
+    this.host.toggleAttribute('has-label', hasLabel);
 
-    // Notify the host after update.
-    super.updateDefaultNode(node);
+    // Make it possible for other mixins to observe change
+    this.dispatchEvent(
+      new CustomEvent('label-changed', {
+        detail: {
+          hasLabel,
+          node: this.node,
+        },
+      }),
+    );
   }
 
   /**
-   * Override to observe the newly added custom node.
-   *
-   * @param {Node} node
-   * @protected
-   * @override
+   * @param {string} label
+   * @private
    */
-  initCustomNode(node) {
-    // Notify the host about adding a custom node.
-    super.initCustomNode(node);
+  __updateDefaultLabel(label) {
+    if (this.defaultNode) {
+      this.defaultNode.textContent = label;
+
+      // Update has-label if default label is used
+      if (this.defaultNode === this.node) {
+        const hasLabel = this.__isNotEmpty(label);
+        this.__toggleHasLabel(hasLabel);
+      }
+    }
+  }
 
-    this.observeNode(node);
+  /**
+   * @param {HTMLElement} labelNode
+   * @private
+   */
+  __updateLabelId(labelNode) {
+    if (!labelNode.id) {
+      labelNode.id = this.defaultId;
+    }
   }
 }

package/src/label-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 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/label-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 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';
@@ -29,20 +29,9 @@ export const LabelMixin = dedupingMixin(
         };
       }
 
-      constructor() {
-        super();
-
-        this._labelController = new LabelController(this);
-
-        this._labelController.addEventListener('slot-content-changed', (event) => {
-          this.toggleAttribute('has-label', event.detail.hasContent);
-        });
-      }
-
       /** @protected */
       get _labelId() {
-        const node = this._labelNode;
-        return node && node.id;
+        return this._labelController.labelId;
       }
 
       /** @protected */
@@ -50,6 +39,12 @@ export const LabelMixin = dedupingMixin(
         return this._labelController.node;
       }
 
+      constructor() {
+        super();
+
+        this._labelController = new LabelController(this);
+      }
+
       /** @protected */
       ready() {
         super.ready();

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

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

package/src/labelled-input-controller.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
@@ -12,7 +12,7 @@ export class LabelledInputController {
     this.input = input;
     this.__preventDuplicateLabelClick = this.__preventDuplicateLabelClick.bind(this);
 
-    labelController.addEventListener('slot-content-changed', (event) => {
+    labelController.addEventListener('label-changed', (event) => {
       this.__initLabel(event.detail.node);
     });
 

package/src/pattern-mixin.d.ts

@@ -1,20 +1,22 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 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 { InputConstraintsMixinClass } from './input-constraints-mixin.js';
 import type { InputMixinClass } from './input-mixin.js';
 import type { ValidateMixinClass } from './validate-mixin.js';
 
 /**
- * A mixin to provide `pattern` property.
+ * A mixin to provide `pattern` and `preventInvalidInput` properties.
  */
 export declare function PatternMixin<T extends Constructor<HTMLElement>>(
   base: T,
 ): Constructor<DelegateStateMixinClass> &
+  Constructor<DisabledMixinClass> &
   Constructor<InputConstraintsMixinClass> &
   Constructor<InputMixinClass> &
   Constructor<PatternMixinClass> &
@@ -27,4 +29,12 @@ export declare class PatternMixinClass {
    * The pattern must match the entire value, not just some subset.
    */
   pattern: string;
+
+  /**
+   * When set to true, user is prevented from typing a value that
+   * conflicts with the given `pattern`.
+   * @attr {boolean} prevent-invalid-input
+   * @deprecated Please use `allowedCharPattern` instead.
+   */
+  preventInvalidInput: boolean | null | undefined;
 }

package/src/pattern-mixin.js

@@ -1,12 +1,14 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { timeOut } from '@vaadin/component-base/src/async.js';
+import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { InputConstraintsMixin } from './input-constraints-mixin.js';
 
 /**
- * A mixin to provide `pattern` property.
+ * A mixin to provide `pattern` and `preventInvalidInput` properties.
  *
  * @polymerMixin
  * @mixes InputConstraintsMixin
@@ -22,6 +24,17 @@ export const PatternMixin = (superclass) =>
         pattern: {
           type: String,
         },
+
+        /**
+         * When set to true, user is prevented from typing a value that
+         * conflicts with the given `pattern`.
+         * @attr {boolean} prevent-invalid-input
+         * @deprecated Please use `allowedCharPattern` instead.
+         */
+        preventInvalidInput: {
+          type: Boolean,
+          observer: '_preventInvalidInputChanged',
+        },
       };
     }
 
@@ -32,4 +45,39 @@ export const PatternMixin = (superclass) =>
     static get constraints() {
       return [...super.constraints, 'pattern'];
     }
+
+    /** @private */
+    _checkInputValue() {
+      if (this.preventInvalidInput) {
+        const input = this.inputElement;
+        if (input && input.value.length > 0 && !this.checkValidity()) {
+          input.value = this.value || '';
+          // Add input-prevented attribute for 200ms
+          this.setAttribute('input-prevented', '');
+          this._inputDebouncer = Debouncer.debounce(this._inputDebouncer, timeOut.after(200), () => {
+            this.removeAttribute('input-prevented');
+          });
+        }
+      }
+    }
+
+    /**
+     * @param {Event} event
+     * @protected
+     * @override
+     */
+    _onInput(event) {
+      this._checkInputValue();
+
+      super._onInput(event);
+    }
+
+    /** @private */
+    _preventInvalidInputChanged(preventInvalidInput) {
+      if (preventInvalidInput) {
+        console.warn(
+          `WARNING: Since Vaadin 23.2, "preventInvalidInput" is deprecated. Please use "allowedCharPattern" instead.`,
+        );
+      }
+    }
   };

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

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2022 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 { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
+import type { FocusMixinClass } from '@vaadin/component-base/src/focus-mixin.js';
+import type { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mixin.js';
+import type { TabindexMixinClass } from '@vaadin/component-base/src/tabindex-mixin.js';
+import type { DelegateFocusMixinClass } from './delegate-focus-mixin.js';
+
+/**
+ * A mixin to forward focus to an element in the shadow DOM.
+ */
+export declare function ShadowFocusMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<DelegateFocusMixinClass> &
+  Constructor<DisabledMixinClass> &
+  Constructor<FocusMixinClass> &
+  Constructor<KeyboardMixinClass> &
+  Constructor<TabindexMixinClass> &
+  T;