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

package/src/validate-mixin.js

@@ -4,130 +4,53 @@
  * 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 '@vaadin/component-base/src/slot-mixin.js';
 
-const ValidateMixinImplementation = (superclass) =>
-  class ValidateMixinClass extends SlotMixin(superclass) {
-    static get properties() {
-      return {
-        /**
-         * Set to true when the field is invalid.
-         */
-        invalid: {
-          type: Boolean,
-          reflectToAttribute: true,
-          notify: true,
-          value: false
-        },
-
-        /**
-         * Specifies that the user must fill in a value.
-         */
-        required: {
-          type: Boolean,
-          reflectToAttribute: true
-        },
-
-        /**
-         * Error to show when the field is invalid.
-         *
-         * @attr {string} error-message
-         */
-        errorMessage: {
-          type: String
-        }
-      };
-    }
-
-    get slots() {
-      return {
-        ...super.slots,
-        'error-message': () => {
-          const error = document.createElement('div');
-          error.textContent = this.errorMessage;
-          error.setAttribute('aria-live', 'assertive');
-          return error;
-        }
-      };
-    }
-
-    static get observers() {
-      return ['_updateErrorMessage(invalid, errorMessage)'];
-    }
-
-    /** @protected */
-    get _errorNode() {
-      return this._getDirectSlotChild('error-message');
-    }
-
-    constructor() {
-      super();
-
-      // Ensure every instance has unique ID
-      const uniqueId = (ValidateMixinClass._uniqueId = 1 + ValidateMixinClass._uniqueId || 0);
-      this._errorId = `error-${this.localName}-${uniqueId}`;
-    }
-
-    /** @protected */
-    ready() {
-      super.ready();
-
-      if (this._errorNode) {
-        this._errorNode.id = this._errorId;
-
-        this._applyCustomError();
-
-        this._updateErrorMessage(this.invalid, this.errorMessage);
-      }
-    }
-
-    /**
-     * Returns true if field is valid, and sets `invalid` based on the field validity.
-     *
-     * @return {boolean} True if the value is valid.
-     */
-    validate() {
-      return !(this.invalid = !this.checkValidity());
-    }
-
-    /**
-     * Returns true if the field value satisfies all constraints (if any).
-     *
-     * @return {boolean}
-     */
-    checkValidity() {
-      return !this.required || !!this.value;
-    }
-
-    /** @protected */
-    _applyCustomError() {
-      const error = this.__errorMessage;
-      if (error && error !== this.errorMessage) {
-        this.errorMessage = error;
-        delete this.__errorMessage;
+/**
+ * A mixin to provide required state and validation logic.
+ *
+ * @polymerMixin
+ */
+export const ValidateMixin = dedupingMixin(
+  (superclass) =>
+    class ValidateMixinClass extends superclass {
+      static get properties() {
+        return {
+          /**
+           * Set to true when the field is invalid.
+           */
+          invalid: {
+            type: Boolean,
+            reflectToAttribute: true,
+            notify: true,
+            value: false
+          },
+
+          /**
+           * Specifies that the user must fill in a value.
+           */
+          required: {
+            type: Boolean,
+            reflectToAttribute: true
+          }
+        };
       }
-    }
 
-    /**
-     * @param {boolean} invalid
-     * @protected
-     */
-    _updateErrorMessage(invalid, errorMessage) {
-      if (!this._errorNode) {
-        return;
+      /**
+       * Returns true if field is valid, and sets `invalid` based on the field validity.
+       *
+       * @return {boolean} True if the value is valid.
+       */
+      validate() {
+        return !(this.invalid = !this.checkValidity());
       }
 
-      // save the custom error message content
-      if (this._errorNode.textContent && !errorMessage) {
-        this.__errorMessage = this._errorNode.textContent.trim();
+      /**
+       * Returns true if the field value satisfies all constraints (if any).
+       *
+       * @return {boolean}
+       */
+      checkValidity() {
+        return !this.required || !!this.value;
       }
-      const hasError = Boolean(invalid && errorMessage);
-      this._errorNode.textContent = hasError ? errorMessage : '';
-      this.toggleAttribute('has-error-message', hasError);
     }
-  };
-
-/**
- * A mixin to provide required state and validation logic.
- */
-export const ValidateMixin = dedupingMixin(ValidateMixinImplementation);
+);

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

@@ -1,20 +0,0 @@
-/**
- * @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 { InputMixin } from './input-mixin.js';
-
-/**
- * A mixin to link an input element with a slotted `<label>` element.
- */
-declare function AriaLabelMixin<T extends new (...args: any[]) => {}>(base: T): T & AriaLabelMixinConstructor;
-
-interface AriaLabelMixinConstructor {
-  new (...args: any[]): AriaLabelMixin;
-}
-
-interface AriaLabelMixin extends InputMixin, LabelMixin {}
-
-export { AriaLabelMixin, AriaLabelMixinConstructor };

package/src/aria-label-mixin.js

@@ -1,71 +0,0 @@
-/**
- * @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 { InputMixin } from './input-mixin.js';
-
-const AriaLabelMixinImplementation = (superclass) =>
-  class AriaLabelMixinClass extends InputMixin(LabelMixin(superclass)) {
-    constructor() {
-      super();
-
-      this.__preventDuplicateLabelClick = this.__preventDuplicateLabelClick.bind(this);
-    }
-
-    /** @protected */
-    connectedCallback() {
-      super.connectedCallback();
-
-      if (this._labelNode) {
-        this._labelNode.addEventListener('click', this.__preventDuplicateLabelClick);
-      }
-    }
-
-    /** @protected */
-    disconnectedCallback() {
-      super.disconnectedCallback();
-
-      if (this._labelNode) {
-        this._labelNode.removeEventListener('click', this.__preventDuplicateLabelClick);
-      }
-    }
-
-    /**
-     * Override an observer from `InputMixin`.
-     * @protected
-     * @override
-     */
-    _inputElementChanged(input) {
-      super._inputElementChanged(input);
-
-      if (input) {
-        input.setAttribute('aria-labelledby', this._labelId);
-
-        this._labelNode.setAttribute('for', input.id);
-      }
-    }
-
-    /**
-     * 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.inputElement.removeEventListener('click', inputClickHandler);
-      };
-      this.inputElement.addEventListener('click', inputClickHandler);
-    }
-  };
-
-/**
- * A mixin to link an input element with a slotted `<label>` element.
- */
-export const AriaLabelMixin = dedupingMixin(AriaLabelMixinImplementation);

package/src/char-length-mixin.d.ts

@@ -1,30 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { InputConstraintsMixin } from './input-constraints-mixin.js';
-
-/**
- * A mixin to provide `minlength` and `maxlength` properties
- * for components that use `<input>` or `<textarea>`.
- */
-declare function CharLengthMixin<T extends new (...args: any[]) => {}>(base: T): T & CharLengthMixinConstructor;
-
-interface CharLengthMixinConstructor {
-  new (...args: any[]): CharLengthMixin;
-}
-
-interface CharLengthMixin extends InputConstraintsMixin {
-  /**
-   * Maximum number of characters (in Unicode code points) that the user can enter.
-   */
-  maxlength: number | null | undefined;
-
-  /**
-   * Minimum number of characters (in Unicode code points) that the user can enter.
-   */
-  minlength: number | null | undefined;
-}
-
-export { CharLengthMixin, CharLengthMixinConstructor };

package/src/char-length-mixin.js

@@ -1,42 +0,0 @@
-/**
- * @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 { InputConstraintsMixin } from './input-constraints-mixin.js';
-
-const CharLengthMixinImplementation = (superclass) =>
-  class CharLengthMixinClass extends InputConstraintsMixin(superclass) {
-    static get properties() {
-      return {
-        /**
-         * Maximum number of characters (in Unicode code points) that the user can enter.
-         */
-        maxlength: {
-          type: Number
-        },
-
-        /**
-         * Minimum number of characters (in Unicode code points) that the user can enter.
-         */
-        minlength: {
-          type: Number
-        }
-      };
-    }
-
-    static get delegateAttrs() {
-      return [...super.delegateAttrs, 'maxlength', 'minlength'];
-    }
-
-    static get constraints() {
-      return [...super.constraints, 'maxlength', 'minlength'];
-    }
-  };
-
-/**
- * A mixin to provide `minlength` and `maxlength` properties
- * for components that use `<input>` or `<textarea>`.
- */
-export const CharLengthMixin = dedupingMixin(CharLengthMixinImplementation);

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

@@ -1,28 +0,0 @@
-/**
- * @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 { InputMixin } from './input-mixin.js';
-
-/**
- * A mixin to add clear button support to field components.
- */
-declare function ClearButtonMixin<T extends new (...args: any[]) => {}>(base: T): T & ClearButtonMixinConstructor;
-
-interface ClearButtonMixinConstructor {
-  new (...args: any[]): ClearButtonMixin;
-}
-
-interface ClearButtonMixin extends InputMixin, KeyboardMixin {
-  /**
-   * Set to true to display the clear icon which clears the input.
-   * @attr {boolean} clear-button-visible
-   */
-  clearButtonVisible: boolean;
-
-  readonly _clearOnEsc: boolean;
-}
-
-export { ClearButtonMixin, ClearButtonMixinConstructor };

package/src/clear-button-mixin.js

@@ -1,82 +0,0 @@
-/**
- * @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 { KeyboardMixin } from '@vaadin/component-base/src/keyboard-mixin.js';
-import { InputMixin } from './input-mixin.js';
-
-const ClearButtonMixinImplementation = (superclass) =>
-  class ClearButtonMixinClass extends InputMixin(KeyboardMixin(superclass)) {
-    static get properties() {
-      return {
-        /**
-         * Set to true to display the clear icon which clears the input.
-         * @attr {boolean} clear-button-visible
-         */
-        clearButtonVisible: {
-          type: Boolean,
-          reflectToAttribute: true,
-          value: false
-        }
-      };
-    }
-
-    /**
-     * Any element extending this mixin is required to implement this getter.
-     * It returns the reference to the clear button element.
-     * @protected
-     * @return {Element | null | undefined}
-     */
-    get clearElement() {
-      console.warn(`Please implement the 'clearElement' property in <${this.localName}>`);
-      return null;
-    }
-
-    /** @protected */
-    get _clearOnEsc() {
-      return true;
-    }
-
-    /** @protected */
-    ready() {
-      super.ready();
-
-      if (this.clearElement) {
-        this.clearElement.addEventListener('click', (e) => this._onClearButtonClick(e));
-      }
-    }
-
-    /**
-     * @param {Event} event
-     * @protected
-     */
-    _onClearButtonClick(event) {
-      event.preventDefault();
-      this.inputElement.focus();
-      this.clear();
-      this.inputElement.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
-      this.inputElement.dispatchEvent(new Event('change', { bubbles: true }));
-    }
-
-    /**
-     * @param {KeyboardEvent} event
-     * @protected
-     * @override
-     */
-    _onKeyDown(event) {
-      super._onKeyDown(event);
-
-      if (event.key === 'Escape' && this.clearButtonVisible && this._clearOnEsc) {
-        const dispatchChange = !!this.value;
-        this.clear();
-        dispatchChange && this.inputElement.dispatchEvent(new Event('change', { bubbles: true }));
-      }
-    }
-  };
-
-/**
- * A mixin to add clear button support to field components.
- */
-export const ClearButtonMixin = dedupingMixin(ClearButtonMixinImplementation);

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

@@ -1,43 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { DelegateStateMixin } from './delegate-state-mixin.js';
-import { InputMixin } from './input-mixin.js';
-import { ValidateMixin } from './validate-mixin.js';
-
-/**
- * A mixin to forward properties to the input element.
- */
-declare function DelegateInputStateMixin<T extends new (...args: any[]) => {}>(
-  base: T
-): T & DelegateInputStateMixinConstructor;
-
-interface DelegateInputStateMixinConstructor {
-  new (...args: any[]): DelegateInputStateMixin;
-}
-
-interface DelegateInputStateMixin extends DelegateStateMixin, ValidateMixin, InputMixin {
-  /**
-   * The name of this field.
-   */
-  name: string;
-
-  /**
-   * A hint to the user of what can be entered in the field.
-   */
-  placeholder: string;
-
-  /**
-   * When present, it specifies that the field is read-only.
-   */
-  readonly: boolean;
-
-  /**
-   * The text usually displayed in a tooltip popup when the mouse is over the field.
-   */
-  title: string;
-}
-
-export { DelegateInputStateMixinConstructor, DelegateInputStateMixin };

package/src/delegate-input-state-mixin.js

@@ -1,63 +0,0 @@
-/**
- * @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 { DelegateStateMixin } from './delegate-state-mixin.js';
-import { InputMixin } from './input-mixin.js';
-import { ValidateMixin } from './validate-mixin.js';
-
-const DelegateInputStateMixinImplementation = (superclass) =>
-  class DelegateInputStateMixinClass extends DelegateStateMixin(ValidateMixin(InputMixin(superclass))) {
-    static get properties() {
-      return {
-        /**
-         * The name of this field.
-         */
-        name: {
-          type: String,
-          reflectToAttribute: true
-        },
-
-        /**
-         * A hint to the user of what can be entered in the field.
-         */
-        placeholder: {
-          type: String,
-          reflectToAttribute: true
-        },
-
-        /**
-         * When present, it specifies that the field is read-only.
-         */
-        readonly: {
-          type: Boolean,
-          value: false,
-          reflectToAttribute: true
-        },
-
-        /**
-         * The text usually displayed in a tooltip popup when the mouse is over the field.
-         */
-        title: {
-          type: String,
-          reflectToAttribute: true
-        }
-      };
-    }
-
-    static get delegateAttrs() {
-      return ['name', 'type', 'placeholder', 'required', 'readonly', 'invalid', 'title'];
-    }
-
-    /** @protected */
-    get _delegateStateTarget() {
-      return this.inputElement;
-    }
-  };
-
-/**
- * A mixin to delegate attributes to the input element.
- */
-export const DelegateInputStateMixin = dedupingMixin(DelegateInputStateMixinImplementation);

package/src/field-aria-mixin.d.ts

@@ -1,24 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { HelperTextMixin } from './helper-text-mixin.js';
-import { ValidateMixin } from './validate-mixin.js';
-
-/**
- * A mixin to handle field ARIA attributes based on the label, error message and helper text.
- */
-declare function FieldAriaMixin<T extends new (...args: any[]) => {}>(base: T): T & FieldAriaMixinConstructor;
-
-interface FieldAriaMixinConstructor {
-  new (...args: any[]): FieldAriaMixin;
-}
-
-interface FieldAriaMixin extends HelperTextMixin, ValidateMixin {
-  readonly _ariaTarget: HTMLElement;
-
-  readonly _ariaAttr: string;
-}
-
-export { FieldAriaMixin, FieldAriaMixinConstructor };

package/src/field-aria-mixin.js

@@ -1,61 +0,0 @@
-/**
- * @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 { HelperTextMixin } from './helper-text-mixin.js';
-import { ValidateMixin } from './validate-mixin.js';
-
-const FieldAriaMixinImplementation = (superclass) =>
-  class FieldAriaMixinClass extends HelperTextMixin(ValidateMixin(superclass)) {
-    /** @protected */
-    get _ariaTarget() {
-      return this;
-    }
-
-    /** @protected */
-    get _ariaAttr() {
-      return 'aria-describedby';
-    }
-
-    static get observers() {
-      return ['__ariaChanged(invalid, _helperId)'];
-    }
-
-    /** @protected */
-    ready() {
-      super.ready();
-
-      this._updateAriaAttribute(this.invalid, this._helperId);
-    }
-
-    /** @protected */
-    _updateAriaAttribute(invalid, helperId) {
-      const attr = this._ariaAttr;
-
-      if (this._ariaTarget && attr) {
-        // For groups, add all IDs to aria-labelledby rather than aria-describedby -
-        // that should guarantee that it's announced when the group is entered.
-        const ariaIds = attr === 'aria-describedby' ? [helperId] : [this._labelId, helperId];
-
-        // Error message ID needs to be dynamically added / removed based on the validity
-        // Otherwise assistive technologies would announce the error, even if we hide it.
-        if (invalid) {
-          ariaIds.push(this._errorId);
-        }
-
-        this._ariaTarget.setAttribute(attr, ariaIds.join(' '));
-      }
-    }
-
-    /** @private */
-    __ariaChanged(invalid, helperId) {
-      this._updateAriaAttribute(invalid, helperId);
-    }
-  };
-
-/**
- * A mixin to handle field ARIA attributes based on the label, error message and helper text.
- */
-export const FieldAriaMixin = dedupingMixin(FieldAriaMixinImplementation);

package/src/helper-text-mixin.d.ts

@@ -1,24 +0,0 @@
-/**
- * @license
- * 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 helper text via corresponding property or named slot.
- */
-declare function HelperTextMixin<T extends new (...args: any[]) => {}>(base: T): T & HelperTextMixinConstructor;
-
-interface HelperTextMixinConstructor {
-  new (...args: any[]): HelperTextMixin;
-}
-
-interface HelperTextMixin extends SlotMixin {
-  /**
-   * String used for the helper text.
-   */
-  helperText: string | null | undefined;
-}
-
-export { HelperTextMixinConstructor, HelperTextMixin };