@vaadin/field-base 23.2.16 → 23.2.17

package/src/shadow-focus-mixin.js

@@ -0,0 +1,97 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { KeyboardMixin } from '@vaadin/component-base/src/keyboard-mixin.js';
+import { DelegateFocusMixin } from './delegate-focus-mixin.js';
+
+/**
+ * A mixin to forward focus to an element in the shadow DOM.
+ *
+ * @polymerMixin
+ * @mixes DelegateFocusMixin
+ * @mixes KeyboardMixin
+ */
+export const ShadowFocusMixin = (superClass) =>
+  class ShadowFocusMixinClass extends DelegateFocusMixin(KeyboardMixin(superClass)) {
+    static get properties() {
+      return {
+        /**
+         * Indicates whether the element can be focused and where it participates in sequential keyboard navigation.
+         *
+         * @override
+         * @protected
+         */
+        tabindex: {
+          type: Number,
+          value: 0,
+        },
+      };
+    }
+
+    /**
+     * Override an event listener from `KeyboardMixin`
+     * to prevent focusing the host element on Shift Tab.
+     * @param {KeyboardEvent} event
+     * @protected
+     * @override
+     */
+    _onKeyDown(event) {
+      super._onKeyDown(event);
+
+      // When focus moves with Shift + Tab, skip focusing the host element
+      // by focusing it before the default browser focus handling runs
+      if (!event.defaultPrevented && event.keyCode === 9 && event.shiftKey) {
+        HTMLElement.prototype.focus.apply(this);
+      }
+    }
+
+    /**
+     * Override method inherited from `FocusMixin`
+     * to support focusElement in Shadow DOM.
+     * @param {Event} event
+     * @return {boolean}
+     * @protected
+     * @override
+     */
+    _shouldSetFocus(event) {
+      if (!this.disabled && this.focusElement) {
+        const path = event.composedPath();
+
+        // When focus moves to the host element itself, then delegate it to the focusElement
+        // This should only move focus when using keyboard navigation, for clicks we don't want to interfere,
+        // for example when the user tries to select some text
+        if (path[0] === this && this._keyboardActive) {
+          this.focusElement.focus();
+        }
+        if (path[0] === this || path.includes(this.focusElement)) {
+          return true;
+        }
+      }
+
+      return false;
+    }
+
+    /**
+     * Override an observer from `TabindexMixin`.
+     * Do not call super to remove tabindex attribute
+     * from host when disabled by setting undefined.
+     * @param {string} tabindex
+     * @protected
+     * @override
+     */
+    _tabindexChanged(tabindex) {
+      if (tabindex !== undefined) {
+        this.focusElement.tabIndex = tabindex;
+      }
+
+      if (this.disabled && tabindex) {
+        // If tabindex attribute was changed while component was disabled
+        if (tabindex !== -1) {
+          this._lastTabIndex = tabindex;
+        }
+        this.tabindex = undefined;
+      }
+    }
+  };

package/src/slot-styles-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/slot-styles-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';

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

@@ -0,0 +1,31 @@
+/**
+ * @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 { ReactiveController } from 'lit';
+
+export class SlotTargetController implements ReactiveController {
+  /**
+   * The source `<slot>` element to copy nodes from.
+   */
+  protected sourceSlot: HTMLSlotElement;
+
+  /**
+   * Function used to get a reference to slot target.
+   */
+  protected targetFactory: () => HTMLElement;
+
+  /**
+   * Function called after copying nodes to target.
+   */
+  protected copyCallback?: (nodes: HTMLElement[]) => void;
+
+  constructor(
+    sourceSlot: HTMLSlotElement,
+    targetFactory: () => HTMLElement,
+    copyCallback?: (nodes: HTMLElement[]) => void,
+  );
+
+  hostConnected(): void;
+}

package/src/slot-target-controller.js

@@ -0,0 +1,123 @@
+/**
+ * @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 to copy the content from a source slot to a target element.
+ */
+export class SlotTargetController {
+  constructor(sourceSlot, targetFactory, callback) {
+    /**
+     * The source `<slot>` element to copy nodes from.
+     */
+    this.sourceSlot = sourceSlot;
+
+    /**
+     * Function used to get a reference to slot target.
+     */
+    this.targetFactory = targetFactory;
+
+    /**
+     * Function called after copying nodes to target.
+     */
+    this.copyCallback = callback;
+
+    if (sourceSlot) {
+      sourceSlot.addEventListener('slotchange', () => {
+        // Copy in progress, ignore this event.
+        if (this.__copying) {
+          this.__copying = false;
+        } else {
+          this.__checkAndCopyNodesToSlotTarget();
+        }
+      });
+    }
+  }
+
+  hostConnected() {
+    this.__sourceSlotObserver = new MutationObserver(() => this.__checkAndCopyNodesToSlotTarget());
+
+    // Ensure the content is up to date when host is connected
+    // to handle e.g. mutating text content while disconnected.
+    // Note, `hostConnected()` is called twice if the controller
+    // is initialized in `ready()` when using `ControllerMixin`.
+    if (!this.__copying) {
+      this.__checkAndCopyNodesToSlotTarget();
+    }
+  }
+
+  /**
+   * Copies every node from the source slot to the target element
+   * once the source slot' content is changed.
+   *
+   * @private
+   */
+  __checkAndCopyNodesToSlotTarget() {
+    this.__sourceSlotObserver.disconnect();
+
+    // Ensure slot target element is up to date.
+    const slotTarget = this.targetFactory();
+
+    if (!slotTarget) {
+      return;
+    }
+
+    // Remove any existing clones from the slot target
+    if (this.__slotTargetClones) {
+      this.__slotTargetClones.forEach((node) => {
+        if (node.parentElement === slotTarget) {
+          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) {
+      slotTarget.innerHTML = '';
+
+      // Ignore next slotchange
+      this.__copying = true;
+
+      this.__copyNodesToSlotTarget(nodes, slotTarget);
+    }
+  }
+
+  /**
+   * Copies the nodes to the target element.
+   *
+   * @param {!Array<!Node>} nodes
+   * @param {HTMLElement} slotTarget
+   * @private
+   */
+  __copyNodesToSlotTarget(nodes, slotTarget) {
+    this.__slotTargetClones = this.__slotTargetClones || [];
+
+    nodes.forEach((node) => {
+      // Clone the nodes and append the clones to the target
+      const clone = node.cloneNode(true);
+      this.__slotTargetClones.push(clone);
+
+      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,
+      });
+    });
+
+    // Run callback e.g. to show a deprecation warning
+    if (typeof this.copyCallback === 'function') {
+      this.copyCallback(nodes);
+    }
+  }
+}

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

package/src/styles/clear-button-styles.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 { css } from 'lit';
@@ -12,7 +12,7 @@ export const clearButton = css`
   }
 
   [part='clear-button']::before {
-    content: '\\2715';
+    content: '✕';
   }
 
   :host([clear-button-visible][has-value]:not([disabled]):not([readonly])) [part='clear-button'] {

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

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

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

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

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

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

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

package/src/text-area-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 TextAreaController extends SlotController {
   constructor(host, callback) {
-    super(host, 'textarea', 'textarea', {
-      initializer: (node, host) => {
+    super(
+      host,
+      'textarea',
+      () => document.createElement('textarea'),
+      (host, node) => {
         const value = host.getAttribute('value');
         if (value) {
           node.value = value;
@@ -28,7 +31,7 @@ export class TextAreaController extends SlotController {
           callback(node);
         }
       },
-      useUniqueId: true,
-    });
+      true,
+    );
   }
 }

package/src/validate-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/validate-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';

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