@vaadin/field-base 22.0.0-alpha6 → 22.0.0-alpha7

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

@@ -5,39 +5,28 @@
  */
 
 /**
- * A mixin to forward the content from a source slot to a target element.
+ * A mixin to copy the content from a source slot to a target element.
  */
-declare function SlotTargetMixinMixin<T extends new (...args: any[]) => {}>(
-  base: T
-): T & SlotTargetMixinMixinConstructor;
+declare function SlotTargetMixin<T extends new (...args: any[]) => {}>(base: T): T & SlotTargetMixinConstructor;
 
-interface SlotTargetMixinMixinConstructor {
-  new (...args: any[]): SlotTargetMixinMixin;
+interface SlotTargetMixinConstructor {
+  new (...args: any[]): SlotTargetMixin;
 }
 
-interface SlotTargetMixinMixin {
+interface SlotTargetMixin {
   /**
-   * A reference to the source slot from which the content is forwarded to the target element.
+   * 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 forwarded from the source slot.
+   * A reference to the target element to which the content is copied from the source slot.
    *
    * @protected
    */
   _slotTarget: HTMLElement;
-
-  /**
-   * A callback method that is called once the target element's content is changed.
-   *
-   * By default, it does nothing. Override the method to implement your own behavior.
-   *
-   * @protected
-   */
-  _onSlotTargetContentChange(): void;
 }
 
-export { SlotTargetMixinMixinConstructor, SlotTargetMixinMixin };
+export { SlotTargetMixinConstructor, SlotTargetMixin };

package/src/slot-target-mixin.js

@@ -1,90 +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';
 
-const SlotTargetMixinImplementation = (superclass) =>
-  class SlotTargetMixinClass extends superclass {
-    constructor() {
-      super();
+/**
+ * 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();
 
-      /**
-       * @type {MutationObserver}
-       * @private
-       */
-      this.__slotTargetObserver = new MutationObserver(() => {
-        this._onSlotTargetContentChange();
-      });
-    }
+        if (this._sourceSlot) {
+          this.__sourceSlotObserver = new MutationObserver(() => this.__checkAndCopyNodesToSlotTarget());
 
-    /** @protected */
-    ready() {
-      super.ready();
+          this.__checkAndCopyNodesToSlotTarget();
 
-      if (this._slotTarget) {
-        // Observe for changes in the target element.
-        this.__slotTargetObserver.observe(this._slotTarget, {
-          childList: true
-        });
+          this._sourceSlot.addEventListener('slotchange', () => {
+            this.__checkAndCopyNodesToSlotTarget();
+          });
+        }
       }
 
-      if (this._sourceSlot) {
-        // Observe for changes in the source slot.
-        this._sourceSlot.addEventListener('slotchange', () => {
-          this.__onSourceSlotContentChange();
-        });
+      /**
+       * 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;
+      }
 
-        this.__onSourceSlotContentChange();
+      /**
+       * 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;
       }
-    }
 
-    /**
-     * A reference to the source slot from which the content is forwarded to the target element.
-     *
-     * @type {HTMLSlotElement | null}
-     * @protected
-     */
-    get _sourceSlot() {
-      console.warn(`Please implement the '_sourceSlot' 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();
 
-    /**
-     * A reference to the target element to which the content is forwarded from the source slot.
-     *
-     * @type {HTMLElement | null}
-     * @protected
-     */
-    get _slotTarget() {
-      console.warn(`Please implement the '_slotTarget' property in <${this.localName}>`);
-      return null;
-    }
+        if (!this._slotTarget) {
+          return;
+        }
 
-    /**
-     * A callback method that is called once the target element's content is changed.
-     *
-     * By default, it does nothing. Override the method to implement your own behavior.
-     *
-     * @protected
-     */
-    _onSlotTargetContentChange() {}
+        // 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;
+        }
 
-    /**
-     * Forwards every node from the source slot to the target element
-     * once the source slot' content is changed.
-     *
-     * @private
-     */
-    __onSourceSlotContentChange() {
-      if (!this._slotTarget) {
-        return;
+        // 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);
+        }
       }
 
-      const nodes = this._sourceSlot.assignedNodes({ flatten: true });
-      if (nodes.length > 0) {
-        this._slotTarget.replaceChildren(...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
+          });
+        });
       }
     }
-  };
-
-/**
- * A mixin to forward the content from a source slot to a target element.
- */
-export const SlotTargetMixin = dedupingMixin(SlotTargetMixinImplementation);
+);

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;

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

@@ -0,0 +1,29 @@
+/**
+ * @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 fieldShared = css`
+  :host {
+    display: inline-flex;
+    outline: none;
+  }
+
+  :host::before {
+    content: '\\2003';
+    width: 0;
+    display: inline-block;
+    /* Size and position this element on the same vertical position as the input-field element
+          to make vertical align for the host element work as expected */
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  :host(:not([has-label])) [part='label'] {
+    display: none;
+  }
+`;

package/src/styles/input-field-container-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 inputFieldContainer: CSSResult;

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

@@ -0,0 +1,16 @@
+/**
+ * @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 inputFieldContainer = css`
+  [class$='container'] {
+    display: flex;
+    flex-direction: column;
+    min-width: 100%;
+    max-width: 100%;
+    width: var(--vaadin-field-default-width, 12em);
+  }
+`;

package/src/styles/input-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 inputFieldShared: CSSResult;

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

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright (c) 2021 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';
+import { fieldShared } from './field-shared-styles.js';
+import { inputFieldContainer } from './input-field-container-styles.js';
+
+export const inputFieldShared = [fieldShared, inputFieldContainer, clearButton];

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

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { SlotController } from './slot-controller.js';
+
+/**
+ * A controller to create and initialize slotted `<textarea>` element.
+ */
+export class TextAreaController implements SlotController {}

package/src/text-area-controller.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 { SlotController } from './slot-controller.js';
+
+/**
+ * A controller to create and initialize slotted `<textarea>` element.
+ */
+export class TextAreaController extends SlotController {
+  constructor(host, callback) {
+    super(host, [
+      'textarea',
+      () => document.createElement('textarea'),
+      (host, node) => {
+        const value = host.getAttribute('value');
+        if (value) {
+          node.value = value;
+        }
+
+        const name = host.getAttribute('name');
+        if (name) {
+          node.setAttribute('name', name);
+        }
+
+        // Ensure every instance has unique ID
+        const uniqueId = (TextAreaController._uniqueTextAreaId = 1 + TextAreaController._uniqueInputId || 0);
+        host._textareaId = `${host.localName}-${uniqueId}`;
+        node.id = host._textareaId;
+
+        if (typeof callback == 'function') {
+          callback(node);
+        }
+      }
+    ]);
+  }
+}

package/src/validate-mixin.d.ts

@@ -3,7 +3,6 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { SlotMixin } from '@vaadin/component-base/src/slot-mixin.js';
 
 /**
  * A mixin to provide required state and validation logic.
@@ -14,7 +13,7 @@ interface ValidateMixinConstructor {
   new (...args: any[]): ValidateMixin;
 }
 
-interface ValidateMixin extends SlotMixin {
+interface ValidateMixin {
   /**
    * Set to true when the field is invalid.
    */
@@ -25,13 +24,6 @@ interface ValidateMixin extends SlotMixin {
    */
   required: boolean;
 
-  /**
-   * Error to show when the field is invalid.
-   *
-   * @attr {string} error-message
-   */
-  errorMessage: string;
-
   /**
    * Returns true if field is valid, and sets `invalid` based on the field validity.
    */