@vaadin/field-base 22.0.2 → 23.0.0-alpha4

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

@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * Adds a value to an attribute containing space-delimited values.
+ */
+export declare function addValueToAttribute(element: HTMLElement, attr: string, value: string): void;
+
+/**
+ * Removes a value from an attribute containing space-delimited values.
+ * If the value is the last one, the whole attribute is removed.
+ */
+export declare function removeValueFromAttribute(element: HTMLElement, attr: string, value: string): void;

package/src/utils.js

@@ -0,0 +1,56 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * @param {string} value
+ * @return {Set<string>}
+ */
+function deserializeAttributeValue(value) {
+  if (!value) {
+    return new Set();
+  }
+
+  return new Set(value.split(' '));
+}
+
+/**
+ * @param {Set<string>} values
+ * @return {string}
+ */
+function serializeAttributeValue(values) {
+  return [...values].join(' ');
+}
+
+/**
+ * Adds a value to an attribute containing space-delimited values.
+ *
+ * @param {HTMLElement} element
+ * @param {string} attr
+ * @param {string} value
+ */
+export function addValueToAttribute(element, attr, value) {
+  const values = deserializeAttributeValue(element.getAttribute(attr));
+  values.add(value);
+  element.setAttribute(attr, serializeAttributeValue(values));
+}
+
+/**
+ * Removes a value from an attribute containing space-delimited values.
+ * If the value is the last one, the whole attribute is removed.
+ *
+ * @param {HTMLElement} element
+ * @param {string} attr
+ * @param {string} value
+ */
+export function removeValueFromAttribute(element, attr, value) {
+  const values = deserializeAttributeValue(element.getAttribute(attr));
+  values.delete(value);
+  if (values.size === 0) {
+    element.removeAttribute(attr);
+    return;
+  }
+  element.setAttribute(attr, serializeAttributeValue(values));
+}

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';
+    }
+  }
+}