@vaadin/field-base 24.0.0-alpha1 → 24.0.0-alpha11

package/src/label-controller.js

@@ -1,77 +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 to manage the label element.
  */
-export class LabelController extends SlotController {
+export class LabelController extends SlotChildObserveController {
   constructor(host) {
-    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);
+    super(host, 'label', 'label');
   }
 
   /**
@@ -82,108 +21,65 @@ export class LabelController extends SlotController {
   setLabel(label) {
     this.label = label;
 
-    this.__updateDefaultLabel(label);
-  }
-
-  /**
-   * @param {HTMLElement} labelNode
-   * @return {boolean}
-   * @private
-   */
-  __hasLabel(labelNode) {
+    // Restore the default label, if needed.
+    const labelNode = this.getSlotChild();
     if (!labelNode) {
-      return false;
+      this.restoreDefaultNode();
     }
 
-    return labelNode.children.length > 0 || this.__isNotEmpty(labelNode.textContent);
-  }
-
-  /**
-   * @param {string} label
-   * @private
-   */
-  __isNotEmpty(label) {
-    return Boolean(label && label.trim() !== '');
+    // When default label is used, update it.
+    if (this.node === this.defaultNode) {
+      this.updateDefaultNode(this.node);
+    }
   }
 
   /**
-   * @param {HTMLElement} labelNode
-   * @private
+   * Override method inherited from `SlotChildObserveController`
+   * to restore and observe the default label element.
+   *
+   * @protected
+   * @override
    */
-  __observeLabel(labelNode) {
-    this.__labelObserver = new MutationObserver((mutations) => {
-      mutations.forEach((mutation) => {
-        const target = mutation.target;
+  restoreDefaultNode() {
+    const { label } = this;
 
-        // Ensure the mutation target is the currently connected label
-        // to ignore async mutations dispatched for removed element.
-        const isLabelMutation = target === this.node;
+    // Restore the default label.
+    if (label && label.trim() !== '') {
+      const labelNode = this.attachDefaultNode();
 
-        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,
-    });
+      // Observe the default label.
+      this.observeNode(labelNode);
+    }
   }
 
   /**
-   * @param {boolean} hasLabel
-   * @private
+   * Override method inherited from `SlotChildObserveController`
+   * to update the default label element text content.
+   *
+   * @param {Node | undefined} node
+   * @protected
+   * @override
    */
-  __toggleHasLabel(hasLabel) {
-    this.host.toggleAttribute('has-label', hasLabel);
+  updateDefaultNode(node) {
+    if (node) {
+      node.textContent = this.label;
+    }
 
-    // Make it possible for other mixins to observe change
-    this.dispatchEvent(
-      new CustomEvent('label-changed', {
-        detail: {
-          hasLabel,
-          node: this.node,
-        },
-      }),
-    );
+    // Notify the host after update.
+    super.updateDefaultNode(node);
   }
 
   /**
-   * @param {string} label
-   * @private
+   * Override to observe the newly added custom node.
+   *
+   * @param {Node} node
+   * @protected
+   * @override
    */
-  __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);
-      }
-    }
-  }
+  initCustomNode(node) {
+    // Notify the host about adding a custom node.
+    super.initCustomNode(node);
 
-  /**
-   * @param {HTMLElement} labelNode
-   * @private
-   */
-  __updateLabelId(labelNode) {
-    if (!labelNode.id) {
-      labelNode.id = this.defaultId;
-    }
+    this.observeNode(node);
   }
 }

package/src/label-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/label-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 { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';
@@ -11,7 +11,7 @@ import { LabelController } from './label-controller.js';
  * A mixin to provide label via corresponding property or named slot.
  *
  * @polymerMixin
- * @mixes SlotMixin
+ * @mixes ControllerMixin
  */
 export const LabelMixin = dedupingMixin(
   (superclass) =>
@@ -29,9 +29,20 @@ 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() {
-        return this._labelController.labelId;
+        const node = this._labelNode;
+        return node && node.id;
       }
 
       /** @protected */
@@ -39,12 +50,6 @@ 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 - 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 { ReactiveController } from 'lit';

package/src/labelled-input-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/
  */
 
@@ -12,7 +12,7 @@ export class LabelledInputController {
     this.input = input;
     this.__preventDuplicateLabelClick = this.__preventDuplicateLabelClick.bind(this);
 
-    labelController.addEventListener('label-changed', (event) => {
+    labelController.addEventListener('slot-content-changed', (event) => {
       this.__initLabel(event.detail.node);
     });
 

package/src/pattern-mixin.d.ts

@@ -1,22 +1,20 @@
 /**
  * @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 { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
-import type { DelegateStateMixinClass } from './delegate-state-mixin.js';
+import type { DelegateStateMixinClass } from '@vaadin/component-base/src/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` and `preventInvalidInput` properties.
+ * A mixin to provide `pattern` property.
  */
 export declare function PatternMixin<T extends Constructor<HTMLElement>>(
   base: T,
 ): Constructor<DelegateStateMixinClass> &
-  Constructor<DisabledMixinClass> &
   Constructor<InputConstraintsMixinClass> &
   Constructor<InputMixinClass> &
   Constructor<PatternMixinClass> &
@@ -29,12 +27,4 @@ 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,14 +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 { 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` and `preventInvalidInput` properties.
+ * A mixin to provide `pattern` property.
  *
  * @polymerMixin
  * @mixes InputConstraintsMixin
@@ -24,17 +22,6 @@ 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',
-        },
       };
     }
 
@@ -45,39 +32,4 @@ 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/slot-styles-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/slot-styles-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 { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';

package/src/styles/clear-button-styles.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 { CSSResult } from 'lit';

package/src/styles/clear-button-styles.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 { css } from 'lit';

package/src/styles/field-shared-styles.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 { CSSResult } from 'lit';

package/src/styles/field-shared-styles.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 { css } from 'lit';

package/src/styles/input-field-container-styles.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 { CSSResult } from 'lit';

package/src/styles/input-field-container-styles.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 { css } from 'lit';

package/src/styles/input-field-shared-styles.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 { CSSResult } from 'lit';

package/src/styles/input-field-shared-styles.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 { clearButton } from './clear-button-styles.js';

package/src/text-area-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/
  */
 import { SlotController } from '@vaadin/component-base/src/slot-controller.js';

package/src/text-area-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 { SlotController } from '@vaadin/component-base/src/slot-controller.js';
@@ -10,11 +10,8 @@ import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
  */
 export class TextAreaController extends SlotController {
   constructor(host, callback) {
-    super(
-      host,
-      'textarea',
-      () => document.createElement('textarea'),
-      (host, node) => {
+    super(host, 'textarea', 'textarea', {
+      initializer: (node, host) => {
         const value = host.getAttribute('value');
         if (value) {
           node.value = value;
@@ -31,7 +28,7 @@ export class TextAreaController extends SlotController {
           callback(node);
         }
       },
-      true,
-    );
+      useUniqueId: true,
+    });
   }
 }

package/src/validate-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/validate-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 { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';

package/src/virtual-keyboard-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/
  */
 import type { ReactiveController } from 'lit';

package/src/virtual-keyboard-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/
  */
 

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

@@ -1,48 +0,0 @@
-/**
- * @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 { 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,
-): Constructor<DelegateFocusMixinClass> &
-  Constructor<DisabledMixinClass> &
-  Constructor<FocusMixinClass> &
-  Constructor<TabindexMixinClass> &
-  T;
-
-export declare class DelegateFocusMixinClass {
-  /**
-   * Specify that this control should have input focus when the page loads.
-   */
-  autofocus: boolean;
-
-  /**
-   * A reference to the focusable element controlled by the mixin.
-   * It can be an input, textarea, button or any element with tabindex > -1.
-   *
-   * Any component implementing this mixin is expected to provide it
-   * by using `this._setFocusElement(input)` Polymer API.
-   */
-  readonly focusElement: HTMLElement | null | undefined;
-
-  protected _addFocusListeners(element: HTMLElement): void;
-
-  protected _removeFocusListeners(element: HTMLElement): void;
-
-  protected _focusElementChanged(element: HTMLElement, oldElement: HTMLElement): void;
-
-  protected _onBlur(event: FocusEvent): void;
-
-  protected _onFocus(event: FocusEvent): void;
-
-  protected _setFocusElement(element: HTMLElement): void;
-}