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

package/index.d.ts

@@ -1,18 +1,15 @@
-export { AriaLabelMixin } from './src/aria-label-mixin.js';
-export { CharLengthMixin } from './src/char-length-mixin.js';
+export { AriaLabelController } from './src/aria-label-controller.js';
 export { CheckedMixin } from './src/checked-mixin.js';
-export { ClearButtonMixin } from './src/clear-button-mixin.js';
 export { DelegateFocusMixin } from './src/delegate-focus-mixin.js';
-export { DelegateInputStateMixin } from './src/delegate-input-state-mixin.js';
 export { DelegateStateMixin } from './src/delegate-state-mixin.js';
-export { FieldAriaMixin } from './src/field-aria-mixin.js';
-export { HelperTextMixin } from './src/helper-text-mixin.js';
+export { FieldMixin } from './src/field-mixin.js';
+export { InputController } from './src/input-controller.js';
+export { InputControlMixin } from './src/input-control-mixin.js';
 export { InputFieldMixin } from './src/input-field-mixin.js';
 export { InputMixin } from './src/input-mixin.js';
-export { InputSlotMixin } from './src/input-slot-mixin.js';
 export { LabelMixin } from './src/label-mixin.js';
 export { PatternMixin } from './src/pattern-mixin.js';
+export { ShadowFocusMixin } from './src/shadow-focus-mixin.js';
 export { SlotStylesMixin } from './src/slot-styles-mixin.js';
-export { TextAreaSlotMixin } from './src/text-area-slot-mixin.js';
-export { TextFieldMixin } from './src/text-field-mixin.js';
+export { TextAreaController } from './src/text-area-controller.js';
 export { ValidateMixin } from './src/validate-mixin.js';

package/index.js

@@ -1,18 +1,15 @@
-export { AriaLabelMixin } from './src/aria-label-mixin.js';
-export { CharLengthMixin } from './src/char-length-mixin.js';
+export { AriaLabelController } from './src/aria-label-controller.js';
 export { CheckedMixin } from './src/checked-mixin.js';
-export { ClearButtonMixin } from './src/clear-button-mixin.js';
 export { DelegateFocusMixin } from './src/delegate-focus-mixin.js';
-export { DelegateInputStateMixin } from './src/delegate-input-state-mixin.js';
 export { DelegateStateMixin } from './src/delegate-state-mixin.js';
-export { FieldAriaMixin } from './src/field-aria-mixin.js';
-export { HelperTextMixin } from './src/helper-text-mixin.js';
+export { FieldMixin } from './src/field-mixin.js';
+export { InputController } from './src/input-controller.js';
+export { InputControlMixin } from './src/input-control-mixin.js';
 export { InputFieldMixin } from './src/input-field-mixin.js';
 export { InputMixin } from './src/input-mixin.js';
-export { InputSlotMixin } from './src/input-slot-mixin.js';
 export { LabelMixin } from './src/label-mixin.js';
 export { PatternMixin } from './src/pattern-mixin.js';
+export { ShadowFocusMixin } from './src/shadow-focus-mixin.js';
 export { SlotStylesMixin } from './src/slot-styles-mixin.js';
-export { TextAreaSlotMixin } from './src/text-area-slot-mixin.js';
-export { TextFieldMixin } from './src/text-field-mixin.js';
+export { TextAreaController } from './src/text-area-controller.js';
 export { ValidateMixin } from './src/validate-mixin.js';

package/package.json

@@ -1,37 +1,42 @@
 {
   "name": "@vaadin/field-base",
-  "version": "22.0.0-alpha6",
+  "version": "22.0.0-alpha7",
+  "publishConfig": {
+    "access": "public"
+  },
   "description": "Vaadin field base mixins",
-  "main": "index.js",
-  "module": "index.js",
-  "repository": "vaadin/web-components",
-  "keywords": [
-    "Vaadin",
-    "web-components",
-    "web-component"
-  ],
-  "author": "Vaadin Ltd",
   "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vaadin/web-components.git",
+    "directory": "packages/field-base"
+  },
+  "author": "Vaadin Ltd",
+  "homepage": "https://vaadin.com/components",
   "bugs": {
     "url": "https://github.com/vaadin/web-components"
   },
-  "homepage": "https://vaadin.com/components",
+  "main": "index.js",
+  "module": "index.js",
   "files": [
-    "index.js",
     "index.d.ts",
+    "index.js",
     "src"
   ],
+  "keywords": [
+    "Vaadin",
+    "web-components",
+    "web-component"
+  ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "^22.0.0-alpha6"
+    "@vaadin/component-base": "22.0.0-alpha7",
+    "lit": "^2.0.0"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
     "@vaadin/testing-helpers": "^0.3.0",
     "sinon": "^9.2.1"
   },
-  "publishConfig": {
-    "access": "public"
-  },
-  "gitHead": "4b136b1c7da8942960e7255f40c27859125b3a45"
+  "gitHead": "8e89419c6b44a1d225d5859e180d7b35e47ddb52"
 }

package/src/aria-label-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 { ReactiveController } from 'lit';
+
+/**
+ * A controller to link an input element with a slotted `<label>` element.
+ */
+export class AriaLabelController implements ReactiveController {}

package/src/aria-label-controller.js

@@ -0,0 +1,53 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * A controller to link an input element with a slotted `<label>` element.
+ */
+export class AriaLabelController {
+  constructor(input, label) {
+    this.input = input;
+    this.label = label;
+    this.__preventDuplicateLabelClick = this.__preventDuplicateLabelClick.bind(this);
+  }
+
+  hostConnected() {
+    const label = this.label;
+    const input = this.input;
+
+    if (label) {
+      label.addEventListener('click', this.__preventDuplicateLabelClick);
+
+      if (input) {
+        input.setAttribute('aria-labelledby', label.id);
+        label.setAttribute('for', input.id);
+      }
+    }
+  }
+
+  hostDisconnected() {
+    const label = this.label;
+    if (label) {
+      label.removeEventListener('click', this.__preventDuplicateLabelClick);
+    }
+  }
+
+  /**
+   * The native platform fires an event for both the click on the label, and also
+   * the subsequent click on the native input element caused by label click.
+   * This results in two click events arriving at the host, but we only want one.
+   * This method prevents the duplicate click and ensures the correct isTrusted event
+   * with the correct event.target arrives at the host.
+   * @private
+   */
+  __preventDuplicateLabelClick() {
+    const inputClickHandler = (e) => {
+      e.stopImmediatePropagation();
+      this.input.removeEventListener('click', inputClickHandler);
+    };
+    this.input.addEventListener('click', inputClickHandler);
+  }
+}

package/src/checked-mixin.js

@@ -8,77 +8,47 @@ import { DisabledMixin } from '@vaadin/component-base/src/disabled-mixin.js';
 import { DelegateStateMixin } from './delegate-state-mixin.js';
 import { InputMixin } from './input-mixin.js';
 
-const CheckedMixinImplementation = (superclass) =>
-  class CheckedMixinClass extends DelegateStateMixin(DisabledMixin(InputMixin(superclass))) {
-    static get properties() {
-      return {
-        /**
-         * True if the element is checked.
-         * @type {boolean}
-         */
-        checked: {
-          type: Boolean,
-          value: false,
-          notify: true,
-          reflectToAttribute: true
-        }
-      };
-    }
-
-    static get delegateAttrs() {
-      return [...super.delegateAttrs, 'checked'];
-    }
-
-    get _delegateStateTarget() {
-      return this.inputElement;
-    }
-
-    /** @protected */
-    ready() {
-      super.ready();
-
-      this.addEventListener('click', (event) => {
-        this._onClick(event);
-      });
-    }
-
-    /**
-     * @param {!MouseEvent} event
-     * @return {boolean}
-     * @protected
-     */
-    _interactionsAllowed(event) {
-      if (this.disabled) {
-        return false;
+/**
+ * A mixin to manage the checked state.
+ *
+ * @polymerMixin
+ * @mixes DelegateStateMixin
+ * @mixes DisabledMixin
+ * @mixes InputMixin
+ */
+export const CheckedMixin = dedupingMixin(
+  (superclass) =>
+    class CheckedMixinClass extends DelegateStateMixin(DisabledMixin(InputMixin(superclass))) {
+      static get properties() {
+        return {
+          /**
+           * True if the element is checked.
+           * @type {boolean}
+           */
+          checked: {
+            type: Boolean,
+            value: false,
+            notify: true,
+            reflectToAttribute: true
+          }
+        };
       }
 
-      if (event.target.localName === 'a') {
-        return false;
+      static get delegateProps() {
+        return [...super.delegateProps, 'checked'];
       }
 
-      return true;
-    }
-
-    /**
-     * @param {!MouseEvent} event
-     * @protected
-     */
-    _onClick(event) {
-      if (!this._interactionsAllowed(event)) {
-        event.preventDefault();
-        return;
+      /**
+       * @protected
+       * @override
+       */
+      _onChange(event) {
+        this._toggleChecked(event.target.checked);
       }
 
-      this._toggleChecked();
-    }
-
-    /** @protected */
-    _toggleChecked() {
-      this.checked = !this.checked;
+      /** @protected */
+      _toggleChecked(checked) {
+        this.checked = checked;
+      }
     }
-  };
-
-/**
- * A mixin to manage the checked state.
- */
-export const CheckedMixin = dedupingMixin(CheckedMixinImplementation);
+);

package/src/delegate-focus-mixin.js

@@ -7,157 +7,173 @@ import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';
 import { DisabledMixin } from '@vaadin/component-base/src/disabled-mixin.js';
 import { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js';
 
-const DelegateFocusMixinImplementation = (superclass) =>
-  class DelegateFocusMixinClass extends FocusMixin(DisabledMixin(superclass)) {
-    static get properties() {
-      return {
-        /**
-         * Specify that this control should have input focus when the page loads.
-         */
-        autofocus: {
-          type: Boolean
-        },
-
-        /**
-         * A reference to the focusable element controlled by the mixin.
-         * It can be an input, textarea, button or any element with tabindex > -1.
-         *
-         * Any component implementing this mixin is expected to provide it
-         * by using `this._setFocusElement(input)` Polymer API.
-         *
-         * @protected
-         * @type {!HTMLElement}
-         */
-        focusElement: {
-          type: Object,
-          readOnly: true,
-          observer: '_focusElementChanged'
-        }
-      };
-    }
+/**
+ * A mixin to forward focus to an element in the light DOM.
+ *
+ * @polymerMixin
+ * @mixes DisabledMixin
+ * @mixes FocusMixin
+ */
+export const DelegateFocusMixin = dedupingMixin(
+  (superclass) =>
+    class DelegateFocusMixinClass extends FocusMixin(DisabledMixin(superclass)) {
+      static get properties() {
+        return {
+          /**
+           * Specify that this control should have input focus when the page loads.
+           */
+          autofocus: {
+            type: Boolean
+          },
+
+          /**
+           * A reference to the focusable element controlled by the mixin.
+           * It can be an input, textarea, button or any element with tabindex > -1.
+           *
+           * Any component implementing this mixin is expected to provide it
+           * by using `this._setFocusElement(input)` Polymer API.
+           *
+           * @protected
+           * @type {!HTMLElement}
+           */
+          focusElement: {
+            type: Object,
+            readOnly: true,
+            observer: '_focusElementChanged'
+          }
+        };
+      }
 
-    constructor() {
-      super();
+      constructor() {
+        super();
 
-      this._boundOnBlur = this._onBlur.bind(this);
-      this._boundOnFocus = this._onFocus.bind(this);
-    }
+        this._boundOnBlur = this._onBlur.bind(this);
+        this._boundOnFocus = this._onFocus.bind(this);
+      }
 
-    /** @protected */
-    ready() {
-      super.ready();
+      /** @protected */
+      ready() {
+        super.ready();
 
-      if (this.autofocus && !this.disabled) {
-        requestAnimationFrame(() => {
-          this.focus();
-          this.setAttribute('focus-ring', '');
-        });
+        if (this.autofocus && !this.disabled) {
+          requestAnimationFrame(() => {
+            this.focus();
+            this.setAttribute('focus-ring', '');
+          });
+        }
       }
-    }
 
-    focus() {
-      if (!this.focusElement || this.disabled) {
-        return;
-      }
+      /**
+       * @protected
+       * @override
+       */
+      focus() {
+        if (!this.focusElement || this.disabled) {
+          return;
+        }
 
-      this.focusElement.focus();
-      this._setFocused(true);
-    }
+        this.focusElement.focus();
+        this._setFocused(true);
+      }
 
-    blur() {
-      if (!this.focusElement) {
-        return;
+      /**
+       * @protected
+       * @override
+       */
+      blur() {
+        if (!this.focusElement) {
+          return;
+        }
+        this.focusElement.blur();
+        this._setFocused(false);
       }
-      this.focusElement.blur();
-      this._setFocused(false);
-    }
 
-    click() {
-      if (this.focusElement && !this.disabled) {
-        this.focusElement.click();
+      /**
+       * @protected
+       * @override
+       */
+      click() {
+        if (this.focusElement && !this.disabled) {
+          this.focusElement.click();
+        }
       }
-    }
 
-    /** @protected */
-    _focusElementChanged(element, oldElement) {
-      if (element) {
-        element.disabled = this.disabled;
-        this._addFocusListeners(element);
-      } else if (oldElement) {
-        this._removeFocusListeners(oldElement);
+      /** @protected */
+      _focusElementChanged(element, oldElement) {
+        if (element) {
+          element.disabled = this.disabled;
+          this._addFocusListeners(element);
+        } else if (oldElement) {
+          this._removeFocusListeners(oldElement);
+        }
       }
-    }
 
-    /**
-     * @param {HTMLElement} element
-     * @protected
-     */
-    _addFocusListeners(element) {
-      element.addEventListener('blur', this._boundOnBlur);
-      element.addEventListener('focus', this._boundOnFocus);
-    }
+      /**
+       * @param {HTMLElement} element
+       * @protected
+       */
+      _addFocusListeners(element) {
+        element.addEventListener('blur', this._boundOnBlur);
+        element.addEventListener('focus', this._boundOnFocus);
+      }
 
-    /**
-     * @param {HTMLElement} element
-     * @protected
-     */
-    _removeFocusListeners(element) {
-      element.removeEventListener('blur', this._boundOnBlur);
-      element.removeEventListener('focus', this._boundOnFocus);
-    }
+      /**
+       * @param {HTMLElement} element
+       * @protected
+       */
+      _removeFocusListeners(element) {
+        element.removeEventListener('blur', this._boundOnBlur);
+        element.removeEventListener('focus', this._boundOnFocus);
+      }
 
-    /**
-     * Focus event does not bubble, so we dispatch it manually
-     * on the host element to support adding focus listeners
-     * when the focusable element is placed in light DOM.
-     * @param {FocusEvent} event
-     * @protected
-     */
-    _onFocus(event) {
-      event.stopPropagation();
-      this.dispatchEvent(new Event('focus'));
-    }
+      /**
+       * Focus event does not bubble, so we dispatch it manually
+       * on the host element to support adding focus listeners
+       * when the focusable element is placed in light DOM.
+       * @param {FocusEvent} event
+       * @protected
+       */
+      _onFocus(event) {
+        event.stopPropagation();
+        this.dispatchEvent(new Event('focus'));
+      }
 
-    /**
-     * Blur event does not bubble, so we dispatch it manually
-     * on the host element to support adding blur listeners
-     * when the focusable element is placed in light DOM.
-     * @param {FocusEvent} event
-     * @protected
-     */
-    _onBlur(event) {
-      event.stopPropagation();
-      this.dispatchEvent(new Event('blur'));
-    }
+      /**
+       * Blur event does not bubble, so we dispatch it manually
+       * on the host element to support adding blur listeners
+       * when the focusable element is placed in light DOM.
+       * @param {FocusEvent} event
+       * @protected
+       */
+      _onBlur(event) {
+        event.stopPropagation();
+        this.dispatchEvent(new Event('blur'));
+      }
 
-    /**
-     * @param {Event} event
-     * @return {boolean}
-     * @protected
-     * @override
-     */
-    _shouldSetFocus(event) {
-      return event.target === this.focusElement;
-    }
+      /**
+       * @param {Event} event
+       * @return {boolean}
+       * @protected
+       * @override
+       */
+      _shouldSetFocus(event) {
+        return event.target === this.focusElement;
+      }
 
-    /**
-     * @param {boolean} disabled
-     * @protected
-     */
-    _disabledChanged(disabled) {
-      super._disabledChanged(disabled);
+      /**
+       * @param {boolean} disabled
+       * @protected
+       */
+      _disabledChanged(disabled) {
+        super._disabledChanged(disabled);
 
-      if (this.focusElement) {
-        this.focusElement.disabled = disabled;
-      }
+        if (this.focusElement) {
+          this.focusElement.disabled = disabled;
+        }
 
-      if (disabled) {
-        this.blur();
+        if (disabled) {
+          this.blur();
+        }
       }
     }
-  };
-
-/**
- * A mixin to forward focus to an element in the light DOM.
- */
-export const DelegateFocusMixin = dedupingMixin(DelegateFocusMixinImplementation);
+);

package/src/delegate-state-mixin.d.ts

@@ -17,7 +17,7 @@ interface DelegateStateMixin {
   /**
    * A target element to which attributes and properties are delegated.
    */
-  _delegateStateTarget: HTMLElement | null;
+  stateTarget: HTMLElement | null;
 }
 
 export { DelegateStateMixinConstructor, DelegateStateMixin };