@vaadin/field-base 22.0.0-alpha1 → 22.0.0-alpha10

package/index.d.ts

@@ -1,14 +1,15 @@
-export { ClearButtonMixin } from './src/clear-button-mixin.js';
+export { AriaLabelController } from './src/aria-label-controller.js';
+export { CheckedMixin } from './src/checked-mixin.js';
 export { DelegateFocusMixin } from './src/delegate-focus-mixin.js';
-export { DisabledMixin } from './src/disabled-mixin.js';
-export { FieldAriaMixin } from './src/field-aria-mixin.js';
-export { FocusMixin } from './src/focus-mixin.js';
-export { HelperTextMixin } from './src/helper-text-mixin.js';
-export { InputAriaMixin } from './src/input-aria-mixin.js';
+export { DelegateStateMixin } from './src/delegate-state-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 { InputPropsMixin } from './src/input-props-mixin.js';
 export { LabelMixin } from './src/label-mixin.js';
-export { SlotMixin } from './src/slot-mixin.js';
-export { TextFieldMixin } from './src/text-field-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 { TextAreaController } from './src/text-area-controller.js';
 export { ValidateMixin } from './src/validate-mixin.js';

package/index.js

@@ -1,14 +1,15 @@
-export { ClearButtonMixin } from './src/clear-button-mixin.js';
+export { AriaLabelController } from './src/aria-label-controller.js';
+export { CheckedMixin } from './src/checked-mixin.js';
 export { DelegateFocusMixin } from './src/delegate-focus-mixin.js';
-export { DisabledMixin } from './src/disabled-mixin.js';
-export { FieldAriaMixin } from './src/field-aria-mixin.js';
-export { FocusMixin } from './src/focus-mixin.js';
-export { HelperTextMixin } from './src/helper-text-mixin.js';
-export { InputAriaMixin } from './src/input-aria-mixin.js';
+export { DelegateStateMixin } from './src/delegate-state-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 { InputPropsMixin } from './src/input-props-mixin.js';
 export { LabelMixin } from './src/label-mixin.js';
-export { SlotMixin } from './src/slot-mixin.js';
-export { TextFieldMixin } from './src/text-field-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 { TextAreaController } from './src/text-area-controller.js';
 export { ValidateMixin } from './src/validate-mixin.js';

package/package.json

@@ -1,36 +1,42 @@
 {
   "name": "@vaadin/field-base",
-  "version": "22.0.0-alpha1",
+  "version": "22.0.0-alpha10",
+  "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"
+    "@polymer/polymer": "^3.0.0",
+    "@vaadin/component-base": "22.0.0-alpha10",
+    "lit": "^2.0.0"
   },
   "devDependencies": {
-    "@esm-bundle/chai": "^4.1.5",
-    "@vaadin/testing-helpers": "^0.2.1",
+    "@esm-bundle/chai": "^4.3.4",
+    "@vaadin/testing-helpers": "^0.3.0",
     "sinon": "^9.2.1"
   },
-  "publishConfig": {
-    "access": "public"
-  },
-  "gitHead": "c9694d6549bff1f7fffb9ece26178e57fc228a51"
+  "gitHead": "6d3055383b9c3c8306ea34c6f2e2087e63c49348"
 }

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,58 @@
+/**
+ * @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(host, input, label) {
+    this.input = input;
+    this.__preventDuplicateLabelClick = this.__preventDuplicateLabelClick.bind(this);
+
+    if (label) {
+      label.addEventListener('click', this.__preventDuplicateLabelClick);
+
+      if (input) {
+        label.setAttribute('for', input.id);
+
+        this.__setAriaLabelledBy(input, host.hasAttribute('has-label') ? label.id : null);
+        host.addEventListener('has-label-changed', (event) =>
+          this.__setAriaLabelledBy(input, event.detail.value ? label.id : null)
+        );
+      }
+    }
+  }
+
+  /**
+   * 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);
+  }
+
+  /**
+   * Sets or removes the `aria-labelledby` attribute on the input element.
+   * @param {HTMLElement} input
+   * @param {string | null | undefined} value
+   * @private
+   */
+  __setAriaLabelledBy(input, value) {
+    if (value) {
+      input.setAttribute('aria-labelledby', value);
+    } else {
+      input.removeAttribute('aria-labelledby');
+    }
+  }
+}

package/src/checked-mixin.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { DisabledMixin } from '@vaadin/component-base/src/disabled-mixin.js';
+import { DelegateStateMixin } from './delegate-state-mixin.js';
+import { InputMixin } from './input-mixin.js';
+
+/**
+ * A mixin to manage the checked state.
+ */
+declare function CheckedMixin<T extends new (...args: any[]) => {}>(base: T): T & CheckedMixinConstructor;
+
+interface CheckedMixinConstructor {
+  new (...args: any[]): CheckedMixin;
+}
+
+interface CheckedMixin extends DelegateStateMixin, DisabledMixin, InputMixin {
+  /**
+   * True if the element is checked.
+   */
+  checked: boolean;
+}
+
+export { CheckedMixinConstructor, CheckedMixin };

package/src/checked-mixin.js

@@ -0,0 +1,54 @@
+/**
+ * @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 { DisabledMixin } from '@vaadin/component-base/src/disabled-mixin.js';
+import { DelegateStateMixin } from './delegate-state-mixin.js';
+import { InputMixin } from './input-mixin.js';
+
+/**
+ * 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
+          }
+        };
+      }
+
+      static get delegateProps() {
+        return [...super.delegateProps, 'checked'];
+      }
+
+      /**
+       * @protected
+       * @override
+       */
+      _onChange(event) {
+        this._toggleChecked(event.target.checked);
+      }
+
+      /** @protected */
+      _toggleChecked(checked) {
+        this.checked = checked;
+      }
+    }
+);

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

@@ -3,8 +3,8 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { FocusMixin } from './focus-mixin.js';
-import { DisabledMixin } from './disabled-mixin.js';
+import { DisabledMixin } from '@vaadin/component-base/src/disabled-mixin.js';
+import { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js';
 
 /**
  * A mixin to forward focus to an element in the light DOM.
@@ -22,8 +22,11 @@ interface DelegateFocusMixin extends DisabledMixin, FocusMixin {
   autofocus: boolean;
 
   /**
-   * Any element extending this mixin is required to implement this getter.
-   * It returns the actual focusable element in the component.
+   * 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.
    */
   readonly focusElement: Element | null | undefined;
 }

package/src/delegate-focus-mixin.js

@@ -4,94 +4,176 @@
  * 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 { FocusMixin } from './focus-mixin.js';
-import { DisabledMixin } from './disabled-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
+import { DisabledMixin } from '@vaadin/component-base/src/disabled-mixin.js';
+import { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js';
+
+/**
+ * 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();
+
+        this._boundOnBlur = this._onBlur.bind(this);
+        this._boundOnFocus = this._onFocus.bind(this);
+      }
+
+      /** @protected */
+      ready() {
+        super.ready();
+
+        if (this.autofocus && !this.disabled) {
+          requestAnimationFrame(() => {
+            this.focus();
+            this.setAttribute('focus-ring', '');
+          });
         }
-      };
-    }
+      }
 
-    /**
-     * Any element extending this mixin is required to implement this getter.
-     * It returns the actual focusable element in the component.
-     * @return {Element | null | undefined}
-     */
-    get focusElement() {
-      console.warn(`Please implement the 'focusElement' property in <${this.localName}>`);
-      return null;
-    }
+      /**
+       * @protected
+       * @override
+       */
+      focus() {
+        if (!this.focusElement || this.disabled) {
+          return;
+        }
 
-    /** @protected */
-    ready() {
-      super.ready();
+        this.focusElement.focus();
+        this._setFocused(true);
+      }
 
-      if (this.autofocus && !this.disabled) {
-        requestAnimationFrame(() => {
-          this.focus();
-          this.setAttribute('focus-ring', '');
-        });
+      /**
+       * @protected
+       * @override
+       */
+      blur() {
+        if (!this.focusElement) {
+          return;
+        }
+        this.focusElement.blur();
+        this._setFocused(false);
       }
-    }
 
-    focus() {
-      if (!this.focusElement || this.disabled) {
-        return;
+      /**
+       * @protected
+       * @override
+       */
+      click() {
+        if (this.focusElement && !this.disabled) {
+          this.focusElement.click();
+        }
       }
 
-      this.focusElement.focus();
-      this._setFocused(true);
-    }
+      /** @protected */
+      _focusElementChanged(element, oldElement) {
+        if (element) {
+          element.disabled = this.disabled;
+          this._addFocusListeners(element);
+        } else if (oldElement) {
+          this._removeFocusListeners(oldElement);
+        }
+      }
 
-    blur() {
-      if (!this.focusElement) {
-        return;
+      /**
+       * @param {HTMLElement} element
+       * @protected
+       */
+      _addFocusListeners(element) {
+        element.addEventListener('blur', this._boundOnBlur);
+        element.addEventListener('focus', this._boundOnFocus);
       }
-      this.focusElement.blur();
-      this._setFocused(false);
-    }
 
-    click() {
-      if (this.focusElement && !this.disabled) {
-        this.focusElement.click();
+      /**
+       * @param {HTMLElement} element
+       * @protected
+       */
+      _removeFocusListeners(element) {
+        element.removeEventListener('blur', this._boundOnBlur);
+        element.removeEventListener('focus', this._boundOnFocus);
       }
-    }
 
-    /**
-     * @param {Event} event
-     * @return {boolean}
-     * @protected
-     */
-    _shouldSetFocus(event) {
-      return event.target === this.focusElement;
-    }
+      /**
+       * 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'));
+      }
 
-    /**
-     * @param {boolean} disabled
-     * @protected
-     */
-    _disabledChanged(disabled) {
-      super._disabledChanged(disabled);
+      /**
+       * 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'));
+      }
 
-      if (this.focusElement) {
-        this.focusElement.disabled = disabled;
+      /**
+       * @param {Event} event
+       * @return {boolean}
+       * @protected
+       * @override
+       */
+      _shouldSetFocus(event) {
+        return event.target === this.focusElement;
       }
 
-      if (disabled) {
-        this.blur();
+      /**
+       * @param {boolean} disabled
+       * @protected
+       */
+      _disabledChanged(disabled) {
+        super._disabledChanged(disabled);
+
+        if (this.focusElement) {
+          this.focusElement.disabled = disabled;
+        }
+
+        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

@@ -0,0 +1,23 @@
+/**
+ * @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 delegate properties and attributes to a target element.
+ */
+declare function DelegateStateMixin<T extends new (...args: any[]) => {}>(base: T): T & DelegateStateMixinConstructor;
+
+interface DelegateStateMixinConstructor {
+  new (...args: any[]): DelegateStateMixin;
+}
+
+interface DelegateStateMixin {
+  /**
+   * A target element to which attributes and properties are delegated.
+   */
+  stateTarget: HTMLElement | null;
+}
+
+export { DelegateStateMixinConstructor, DelegateStateMixin };