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

package/src/styles/field-shared-styles.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 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 { css } from 'lit';

package/src/styles/input-field-container-styles.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 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 { CSSResult } from 'lit';

package/src/styles/input-field-container-styles.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 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 { css } from 'lit';

package/src/styles/input-field-shared-styles.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 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 { CSSResult } from 'lit';

package/src/styles/input-field-shared-styles.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 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 { clearButton } from './clear-button-styles.js';

package/src/text-area-controller.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 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';

package/src/text-area-controller.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 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';

package/src/utils.d.ts

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

package/src/utils.js

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

package/src/validate-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 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 { Constructor } from '@open-wc/dedupe-mixin';

package/src/validate-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 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';

package/src/virtual-keyboard-controller.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { ReactiveController } from 'lit';
+
+/**
+ * A controller which prevents the virtual keyboard from showing up on mobile devices
+ * when the field's overlay is closed.
+ */
+export class VirtualKeyboardController implements ReactiveController {
+  constructor(host: { inputElement?: HTMLElement; opened: boolean } & HTMLElement);
+}

package/src/virtual-keyboard-controller.js

@@ -0,0 +1,38 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * A controller which prevents the virtual keyboard from showing up on mobile devices
+ * when the field's overlay is closed.
+ */
+export class VirtualKeyboardController {
+  /**
+   * @param {{ inputElement?: HTMLElement; opened: boolean } & HTMLElement} host
+   */
+  constructor(host) {
+    this.host = host;
+
+    host.addEventListener('opened-changed', () => {
+      if (!host.opened) {
+        // Prevent opening the virtual keyboard when the input gets re-focused on dropdown close
+        this.__setVirtualKeyboardEnabled(false);
+      }
+    });
+
+    // Re-enable virtual keyboard on blur, so it gets opened when the field is focused again
+    host.addEventListener('blur', () => this.__setVirtualKeyboardEnabled(true));
+
+    // Re-enable the virtual keyboard whenever the field is touched
+    host.addEventListener('touchstart', () => this.__setVirtualKeyboardEnabled(true));
+  }
+
+  /** @private */
+  __setVirtualKeyboardEnabled(value) {
+    if (this.host.inputElement) {
+      this.host.inputElement.inputMode = value ? '' : 'none';
+    }
+  }
+}

package/src/slot-label-mixin.d.ts

@@ -1,15 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { Constructor } from '@open-wc/dedupe-mixin';
-import { LabelMixinClass } from './label-mixin.js';
-import { SlotTargetMixinClass } from './slot-target-mixin.js';
-
-/**
- * A mixin to forward any content from the default slot to the label node.
- */
-export declare function SlotLabelMixin<T extends Constructor<HTMLElement>>(
-  base: T
-): T & Constructor<LabelMixinClass> & Constructor<SlotTargetMixinClass>;

package/src/slot-label-mixin.js

@@ -1,38 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 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 { LabelMixin } from './label-mixin.js';
-import { SlotTargetMixin } from './slot-target-mixin.js';
-
-/**
- * A mixin to forward any content from the default slot to the label node.
- *
- * @polymerMixin
- * @mixes LabelMixin
- * @mixes SlotTargetMixin
- */
-export const SlotLabelMixin = dedupingMixin(
-  (superclass) =>
-    class SlotLabelMixinClass extends SlotTargetMixin(LabelMixin(superclass)) {
-      /** @protected */
-      get _slotTarget() {
-        return this._labelNode;
-      }
-
-      /** @protected */
-      ready() {
-        super.ready();
-
-        if (this._labelNode) {
-          // The default slot's content is moved to the label node
-          // only after `LabelMixin` is initialized which means
-          // we should manually toggle the `has-label` attribute
-          // respecting the new label content.
-          this._toggleHasLabelAttribute();
-        }
-      }
-    }
-);

package/src/slot-target-mixin.d.ts

@@ -1,25 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { Constructor } from '@open-wc/dedupe-mixin';
-
-/**
- * A mixin to copy the content from a source slot to a target element.
- */
-export declare function SlotTargetMixin<T extends Constructor<HTMLElement>>(
-  base: T
-): T & Constructor<SlotTargetMixinClass>;
-
-export declare class SlotTargetMixinClass {
-  /**
-   * A reference to the source slot from which the content is copied to the target element.
-   */
-  protected readonly _sourceSlot: HTMLSlotElement;
-
-  /**
-   * A reference to the target element to which the content is copied from the source slot.
-   */
-  protected readonly _slotTarget: HTMLElement;
-}

package/src/slot-target-mixin.js

@@ -1,110 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 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';
-
-/**
- * A mixin to copy the content from a source slot to a target element.
- *
- * @polymerMixin
- */
-export const SlotTargetMixin = dedupingMixin(
-  (superclass) =>
-    class SlotTargetMixinClass extends superclass {
-      /** @protected */
-      ready() {
-        super.ready();
-
-        if (this._sourceSlot) {
-          this.__sourceSlotObserver = new MutationObserver(() => this.__checkAndCopyNodesToSlotTarget());
-
-          this.__checkAndCopyNodesToSlotTarget();
-
-          this._sourceSlot.addEventListener('slotchange', () => {
-            this.__checkAndCopyNodesToSlotTarget();
-          });
-        }
-      }
-
-      /**
-       * A reference to the source slot from which the nodes are copied to the target element.
-       *
-       * @type {HTMLSlotElement | null}
-       * @protected
-       */
-      get _sourceSlot() {
-        console.warn(`Please implement the '_sourceSlot' property in <${this.localName}>`);
-        return null;
-      }
-
-      /**
-       * A reference to the target element to which the nodes are copied from the source slot.
-       *
-       * @type {HTMLElement | null}
-       * @protected
-       */
-      get _slotTarget() {
-        console.warn(`Please implement the '_slotTarget' property in <${this.localName}>`);
-        return null;
-      }
-
-      /**
-       * Copies every node from the source slot to the target element
-       * once the source slot' content is changed.
-       *
-       * @private
-       */
-      __checkAndCopyNodesToSlotTarget() {
-        this.__sourceSlotObserver.disconnect();
-
-        if (!this._slotTarget) {
-          return;
-        }
-
-        // Remove any existing clones from the slot target
-        if (this.__slotTargetClones) {
-          this.__slotTargetClones.forEach((node) => {
-            if (node.parentElement === this._slotTarget) {
-              this._slotTarget.removeChild(node);
-            }
-          });
-          delete this.__slotTargetClones;
-        }
-
-        // Exclude whitespace text nodes
-        const nodes = this._sourceSlot
-          .assignedNodes({ flatten: true })
-          .filter((node) => !(node.nodeType == Node.TEXT_NODE && node.textContent.trim() === ''));
-
-        if (nodes.length > 0) {
-          this._slotTarget.innerHTML = '';
-          this.__copyNodesToSlotTarget(nodes);
-        }
-      }
-
-      /**
-       * Copies the nodes to the target element.
-       *
-       * @protected
-       * @param {!Array<!Node>} nodes
-       */
-      __copyNodesToSlotTarget(nodes) {
-        this.__slotTargetClones = this.__slotTargetClones || [];
-        nodes.forEach((node) => {
-          // Clone the nodes and append the clones to the target slot
-          const clone = node.cloneNode(true);
-          this.__slotTargetClones.push(clone);
-          this._slotTarget.appendChild(clone);
-          // Observe all changes to the source node to have the clones updated
-          this.__sourceSlotObserver.observe(node, {
-            attributes: true,
-            childList: true,
-            subtree: true,
-            characterData: true
-          });
-        });
-      }
-    }
-);