@vaadin/field-base 22.0.0-alpha5 → 22.0.0-alpha9

package/src/label-mixin.js

@@ -4,77 +4,90 @@
  * 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 { SlotMixin } from './slot-mixin.js';
+import { SlotMixin } from '@vaadin/component-base/src/slot-mixin.js';
 
-const LabelMixinImplementation = (superclass) =>
-  class LabelMixinClass extends SlotMixin(superclass) {
-    static get properties() {
-      return {
-        /**
-         * The label text for the input node.
-         * When no light dom defined via [slot=label], this value will be used.
-         */
-        label: {
-          type: String,
-          observer: '_labelChanged'
-        }
-      };
-    }
+/**
+ * A mixin to provide label via corresponding property or named slot.
+ *
+ * @polymerMixin
+ * @mixes SlotMixin
+ */
+export const LabelMixin = dedupingMixin(
+  (superclass) =>
+    class LabelMixinClass extends SlotMixin(superclass) {
+      static get properties() {
+        return {
+          /**
+           * The label text for the input node.
+           * When no light dom defined via [slot=label], this value will be used.
+           */
+          label: {
+            type: String,
+            observer: '_labelChanged'
+          }
+        };
+      }
 
-    get slots() {
-      return {
-        ...super.slots,
-        label: () => {
-          const label = document.createElement('label');
-          label.textContent = this.label;
-          return label;
-        }
-      };
-    }
+      /** @protected */
+      get slots() {
+        return {
+          ...super.slots,
+          label: () => {
+            const label = document.createElement('label');
+            label.textContent = this.label;
+            return label;
+          }
+        };
+      }
 
-    /** @protected */
-    get _labelNode() {
-      return this._getDirectSlotChild('label');
-    }
+      /** @protected */
+      get _labelNode() {
+        return this._getDirectSlotChild('label');
+      }
 
-    constructor() {
-      super();
+      constructor() {
+        super();
 
-      // Ensure every instance has unique ID
-      const uniqueId = (LabelMixinClass._uniqueId = 1 + LabelMixinClass._uniqueId || 0);
-      this._labelId = `label-${this.localName}-${uniqueId}`;
-    }
+        // Ensure every instance has unique ID
+        const uniqueId = (LabelMixinClass._uniqueLabelId = 1 + LabelMixinClass._uniqueLabelId || 0);
+        this._labelId = `label-${this.localName}-${uniqueId}`;
 
-    /** @protected */
-    connectedCallback() {
-      super.connectedCallback();
+        /**
+         * @type {MutationObserver}
+         * @private
+         */
+        this.__labelNodeObserver = new MutationObserver(() => {
+          this._toggleHasLabelAttribute();
+        });
+      }
 
-      if (this._labelNode) {
-        this._labelNode.id = this._labelId;
+      /** @protected */
+      ready() {
+        super.ready();
 
-        this._applyCustomLabel();
-      }
-    }
+        if (this._labelNode) {
+          this._labelNode.id = this._labelId;
+          this._toggleHasLabelAttribute();
 
-    /** @protected */
-    _applyCustomLabel() {
-      const label = this._labelNode.textContent;
-      if (label !== this.label) {
-        this.label = label;
+          this.__labelNodeObserver.observe(this._labelNode, { childList: true });
+        }
       }
-    }
 
-    /** @protected */
-    _labelChanged(label) {
-      if (this._labelNode) {
-        this._labelNode.textContent = label;
+      /** @protected */
+      _labelChanged(label) {
+        if (this._labelNode) {
+          this._labelNode.textContent = label;
+          this._toggleHasLabelAttribute();
+        }
       }
 
-      this.toggleAttribute('has-label', Boolean(label));
-    }
-  };
+      /** @protected */
+      _toggleHasLabelAttribute() {
+        if (this._labelNode) {
+          const hasLabel = this._labelNode.children.length > 0 || this._labelNode.textContent.trim() !== '';
 
-/**
- * A mixin to provide label via corresponding property or named slot.
- */
-export const LabelMixin = dedupingMixin(LabelMixinImplementation);
+          this.toggleAttribute('has-label', hasLabel);
+        }
+      }
+    }
+);

package/src/pattern-mixin.js

@@ -3,12 +3,17 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { Debouncer } from '@polymer/polymer/lib/utils/debounce.js';
-import { timeOut } from '@polymer/polymer/lib/utils/async.js';
-import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';
+import { Debouncer } from '@vaadin/component-base/src/debounce.js';
+import { timeOut } from '@vaadin/component-base/src/async.js';
 import { InputConstraintsMixin } from './input-constraints-mixin.js';
 
-const PatternMixinImplementation = (superclass) =>
+/**
+ * A mixin to provide `pattern` and `preventInvalidInput` properties.
+ *
+ * @polymerMixin
+ * @mixes InputConstraintsMixin
+ */
+export const PatternMixin = (superclass) =>
   class PatternMixinClass extends InputConstraintsMixin(superclass) {
     static get properties() {
       return {
@@ -65,8 +70,3 @@ const PatternMixinImplementation = (superclass) =>
       super._onInput(event);
     }
   };
-
-/**
- * A mixin to provide `pattern` and `preventInvalidInput` properties.
- */
-export const PatternMixin = dedupingMixin(PatternMixinImplementation);

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

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright (c) 2021 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 { TabindexMixin } from '@vaadin/component-base/src/tabindex-mixin.js';
+import { DelegateFocusMixin } from './delegate-focus-mixin.js';
+
+/**
+ * A mixin to forward focus to an element in the shadow DOM.
+ */
+declare function ShadowFocusMixin<T extends new (...args: any[]) => {}>(base: T): T & ShadowFocusMixinConstructor;
+
+interface ShadowFocusMixinConstructor {
+  new (...args: any[]): ShadowFocusMixin;
+}
+
+interface ShadowFocusMixin extends KeyboardMixin, TabindexMixin, DelegateFocusMixin {}
+
+export { ShadowFocusMixinConstructor, ShadowFocusMixin };

package/src/shadow-focus-mixin.js

@@ -0,0 +1,87 @@
+/**
+ * @license
+ * Copyright (c) 2021 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 { TabindexMixin } from '@vaadin/component-base/src/tabindex-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
+ * @mixes TabindexMixin
+ */
+export const ShadowFocusMixin = (superClass) =>
+  class ShadowFocusMixinClass extends TabindexMixin(DelegateFocusMixin(KeyboardMixin(superClass))) {
+    /**
+     * Override an event listener from `KeyboardMixin`
+     * to prevent setting `focused` on Shift Tab.
+     * @param {KeyboardEvent} event
+     * @protected
+     * @override
+     */
+    _onKeyDown(event) {
+      super._onKeyDown(event);
+
+      // When focus moves with Shift + Tab, do not mark host as focused.
+      // The flag set here will be later used in focusin event listener.
+      if (!event.defaultPrevented && event.keyCode === 9 && event.shiftKey) {
+        this._isShiftTabbing = true;
+        HTMLElement.prototype.focus.apply(this);
+        this._setFocused(false);
+        setTimeout(() => (this._isShiftTabbing = false), 0);
+      }
+    }
+
+    /**
+     * 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 from outside and not with Shift + Tab, delegate it to focusElement.
+        if (path[0] === this && !this.contains(event.relatedTarget) && !this._isShiftTabbing) {
+          this.focusElement.focus();
+          return true;
+        }
+
+        if (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-controller.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { ReactiveController } from 'lit';
+
+export class SlotController implements ReactiveController {}

package/src/slot-controller.js

@@ -0,0 +1,36 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+export class SlotController {
+  constructor(host, [slotName, slotFactory, slotInitializer]) {
+    this.host = host;
+    this.slotName = slotName;
+    this.slotFactory = slotFactory;
+    this.slotInitializer = slotInitializer;
+  }
+
+  hostConnected() {
+    if (!this.__initialized) {
+      const { host, slotName, slotFactory } = this;
+
+      const slotted = host.querySelector(`[slot=${slotName}]`);
+
+      if (!slotted) {
+        const slotContent = slotFactory(host);
+        if (slotContent instanceof Element) {
+          slotContent.setAttribute('slot', slotName);
+          host.appendChild(slotContent);
+          this.__slotContent = slotContent;
+        }
+      } else {
+        this.__slotContent = slotted;
+      }
+
+      this.slotInitializer(host, this.__slotContent);
+
+      this.__initialized = true;
+    }
+  }
+}

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

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+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.
+ */
+declare function SlotLabelMixin<T extends new (...args: any[]) => {}>(base: T): T & SlotLabelMixinConstructor;
+
+interface SlotLabelMixinConstructor {
+  new (...args: any[]): SlotLabelMixin;
+}
+
+interface SlotLabelMixin extends SlotTargetMixin, LabelMixin {}
+
+export { SlotLabelMixinConstructor, SlotLabelMixin };

package/src/slot-label-mixin.js

@@ -0,0 +1,38 @@
+/**
+ * @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-styles-mixin.js

@@ -1,3 +1,8 @@
+/**
+ * @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';
 
 const stylesMap = new WeakMap();
@@ -31,39 +36,41 @@ function insertStyles(styles, root) {
   }
 }
 
-const SlotStylesMixinImplementation = (superclass) =>
-  class SlotStylesMixinClass extends superclass {
-    /**
-     * List of styles to insert into root.
-     * @protected
-     */
-    get slotStyles() {
-      return {};
-    }
+/**
+ * Mixin to insert styles into the outer scope to handle slotted components.
+ * This is useful e.g. to hide native `<input type="number">` controls.
+ *
+ * @polymerMixin
+ */
+export const SlotStylesMixin = dedupingMixin(
+  (superclass) =>
+    class SlotStylesMixinClass extends superclass {
+      /**
+       * List of styles to insert into root.
+       * @protected
+       */
+      get slotStyles() {
+        return {};
+      }
 
-    /** @protected */
-    connectedCallback() {
-      super.connectedCallback();
+      /** @protected */
+      connectedCallback() {
+        super.connectedCallback();
 
-      this.__applySlotStyles();
-    }
+        this.__applySlotStyles();
+      }
 
-    /** @private */
-    __applySlotStyles() {
-      const root = this.getRootNode();
-      const rootStyles = getRootStyles(root);
+      /** @private */
+      __applySlotStyles() {
+        const root = this.getRootNode();
+        const rootStyles = getRootStyles(root);
 
-      this.slotStyles.forEach((styles) => {
-        if (!rootStyles.has(styles)) {
-          insertStyles(styles, root);
-          rootStyles.add(styles);
-        }
-      });
+        this.slotStyles.forEach((styles) => {
+          if (!rootStyles.has(styles)) {
+            insertStyles(styles, root);
+            rootStyles.add(styles);
+          }
+        });
+      }
     }
-  };
-
-/**
- * Mixin to insert styles into the outer scope to handle slotted components.
- * This is useful e.g. to hide native `<input type="number">` controls.
- */
-export const SlotStylesMixin = dedupingMixin(SlotStylesMixinImplementation);
+);

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

@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * A mixin to copy the content from a source slot to a target element.
+ */
+declare function SlotTargetMixin<T extends new (...args: any[]) => {}>(base: T): T & SlotTargetMixinConstructor;
+
+interface SlotTargetMixinConstructor {
+  new (...args: any[]): SlotTargetMixin;
+}
+
+interface SlotTargetMixin {
+  /**
+   * A reference to the source slot from which the content is copied to the target element.
+   *
+   * @protected
+   */
+  _sourceSlot: HTMLSlotElement;
+
+  /**
+   * A reference to the target element to which the content is copied from the source slot.
+   *
+   * @protected
+   */
+  _slotTarget: HTMLElement;
+}
+
+export { SlotTargetMixinConstructor, SlotTargetMixin };

package/src/slot-target-mixin.js

@@ -0,0 +1,110 @@
+/**
+ * @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
+          });
+        });
+      }
+    }
+);

package/src/styles/clear-button-styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { CSSResult } from 'lit';
+
+export const clearButton: CSSResult;

package/src/styles/clear-button-styles.js

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css } from 'lit';
+
+export const clearButton = css`
+  [part='clear-button'] {
+    display: none;
+    cursor: default;
+  }
+
+  [part='clear-button']::before {
+    content: '✕';
+  }
+
+  :host([clear-button-visible][has-value]:not([disabled]):not([readonly])) [part='clear-button'] {
+    display: block;
+  }
+`;

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

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { CSSResult } from 'lit';
+
+export const fieldShared: CSSResult;