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

package/src/input-props-mixin.js

@@ -1,106 +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 { InputAriaMixin } from './input-aria-mixin.js';
-import { ValidateMixin } from './validate-mixin.js';
-
-const InputPropsMixinImplementation = (superclass) =>
-  class InputPropsMixinClass extends ValidateMixin(InputAriaMixin(superclass)) {
-    static get properties() {
-      return {
-        /**
-         * The name of this field.
-         */
-        name: {
-          type: String
-        },
-
-        /**
-         * A hint to the user of what can be entered in the field.
-         */
-        placeholder: {
-          type: String
-        },
-
-        /**
-         * 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
-        }
-      };
-    }
-
-    static get hostProps() {
-      return ['name', 'type', 'placeholder', 'readonly', 'required', 'invalid', 'title'];
-    }
-
-    /** @protected */
-    connectedCallback() {
-      super.connectedCallback();
-
-      if (this._inputNode) {
-        // Propagate initially defined properties to the slotted input
-        this._propagateHostAttributes(this.constructor.hostProps.map((attr) => this[attr] || this.getAttribute(attr)));
-      }
-    }
-
-    /** @protected */
-    ready() {
-      super.ready();
-
-      // create observer dynamically to allow subclasses to override hostProps
-      this._createMethodObserver(`_hostPropsChanged(${this.constructor.hostProps.join(', ')})`);
-    }
-
-    /** @private */
-    _hostPropsChanged(...attributesValues) {
-      this._propagateHostAttributes(attributesValues);
-    }
-
-    /** @private */
-    _propagateHostAttributes(attributesValues) {
-      const input = this._inputNode;
-      const attributeNames = this.constructor.hostProps;
-
-      attributeNames.forEach((attr, index) => {
-        const value = attributesValues[index];
-        if (attr === 'invalid') {
-          this._setOrToggleAttribute(attr, value, input);
-          this._setOrToggleAttribute('aria-invalid', value ? 'true' : false, input);
-        } else {
-          this._setOrToggleAttribute(attr, value, input);
-        }
-      });
-    }
-
-    /** @protected */
-    _setOrToggleAttribute(name, value, node) {
-      if (!name || !node) {
-        return;
-      }
-
-      if (value) {
-        node.setAttribute(name, typeof value === 'boolean' ? '' : value);
-      } else {
-        node.removeAttribute(name);
-      }
-    }
-  };
-
-/**
- * A mixin to forward properties to the native <input> element.
- */
-export const InputPropsMixin = dedupingMixin(InputPropsMixinImplementation);

package/src/slot-mixin.d.ts

@@ -1,23 +0,0 @@
-/**
- * @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 provide content for named slots defined by component.
- */
-declare function SlotMixin<T extends new (...args: any[]) => {}>(base: T): T & SlotMixinConstructor;
-
-interface SlotMixinConstructor {
-  new (...args: any[]): SlotMixin;
-}
-
-interface SlotMixin {
-  /**
-   * List of named slots to initialize.
-   */
-  readonly slots: Record<string, () => HTMLElement>;
-}
-
-export { SlotMixinConstructor, SlotMixin };

package/src/slot-mixin.js

@@ -1,55 +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';
-
-const SlotMixinImplementation = (superclass) =>
-  class SlotMixinClass extends superclass {
-    /**
-     * List of named slots to initialize.
-     */
-    get slots() {
-      return {};
-    }
-
-    /** @protected */
-    connectedCallback() {
-      super.connectedCallback();
-      this._connectSlotMixin();
-    }
-
-    /** @private */
-    _connectSlotMixin() {
-      if (this.__isConnectedSlotMixin) {
-        return;
-      }
-
-      Object.keys(this.slots).forEach((slotName) => {
-        // Ignore labels of nested components, if any
-        const hasContent = this._getDirectSlotChild(slotName) !== undefined;
-
-        if (!hasContent) {
-          const slotFactory = this.slots[slotName];
-          const slotContent = slotFactory();
-          if (slotContent instanceof Element) {
-            slotContent.setAttribute('slot', slotName);
-            this.appendChild(slotContent);
-          }
-        }
-      });
-
-      this.__isConnectedSlotMixin = true;
-    }
-
-    /** @protected */
-    _getDirectSlotChild(slotName) {
-      return Array.from(this.children).find((el) => el.slot === slotName);
-    }
-  };
-
-/**
- * A mixin to provide content for named slots defined by component.
- */
-export const SlotMixin = dedupingMixin(SlotMixinImplementation);

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

@@ -1,47 +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 { InputFieldMixin } from './input-field-mixin.js';
-
-/**
- * A mixin to provide validation constraints for vaadin-text-field and related components.
- */
-declare function TextFieldMixin<T extends new (...args: any[]) => {}>(base: T): T & TextFieldMixinConstructor;
-
-interface TextFieldMixinConstructor {
-  new (...args: any[]): TextFieldMixin;
-}
-
-interface TextFieldMixin extends InputFieldMixin {
-  /**
-   * 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;
-
-  /**
-   * A regular expression that the value is checked against.
-   * The pattern must match the entire value, not just some subset.
-   */
-  pattern: string | null | undefined;
-
-  /**
-   * When set to true, user is prevented from typing a value that
-   * conflicts with the given `pattern`.
-   * @attr {boolean} prevent-invalid-input
-   */
-  preventInvalidInput: boolean | null | undefined;
-
-  /**
-   * Returns true if the current input value satisfies all constraints (if any).
-   */
-  checkValidity(): boolean;
-}
-
-export { TextFieldMixin, TextFieldMixinConstructor };

package/src/text-field-mixin.js

@@ -1,125 +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 { 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 { InputFieldMixin } from './input-field-mixin.js';
-
-const TextFieldMixinImplementation = (superclass) =>
-  class TextFieldMixinClass extends InputFieldMixin(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
-        },
-
-        /**
-         * A regular expression that the value is checked against.
-         * The pattern must match the entire value, not just some subset.
-         */
-        pattern: {
-          type: String
-        },
-
-        /**
-         * When set to true, user is prevented from typing a value that
-         * conflicts with the given `pattern`.
-         * @attr {boolean} prevent-invalid-input
-         */
-        preventInvalidInput: {
-          type: Boolean
-        }
-      };
-    }
-
-    static get hostProps() {
-      return [...super.hostProps, 'pattern', 'maxlength', 'minlength'];
-    }
-
-    /** @protected */
-    ready() {
-      super.ready();
-
-      this._createConstraintsObserver();
-    }
-
-    /** @protected */
-    _createConstraintsObserver() {
-      // This complex observer needs to be added dynamically instead of using `static get observers()`
-      // to make it possible to tweak this behavior in classes that apply this mixin.
-      // An example is `vaadin-email-field` where the pattern is set before defining the observer.
-      this._createMethodObserver('_constraintsChanged(required, minlength, maxlength, pattern)');
-    }
-
-    /**
-     * @param {boolean | undefined} required
-     * @param {number | undefined} minlength
-     * @param {number | undefined} maxlength
-     * @param {string | undefined} maxlength
-     * @protected
-     */
-    _constraintsChanged(required, minlength, maxlength, pattern) {
-      // Prevent marking field as invalid when setting required state
-      // or any other constraint before a user has entered the value.
-      if (!this.invalid) {
-        return;
-      }
-
-      if (!required && !minlength && !maxlength && !pattern) {
-        this.invalid = false;
-      } else {
-        this.validate();
-      }
-    }
-
-    /**
-     * @param {Event} e
-     * @protected
-     */
-    _onInput(e) {
-      if (this.preventInvalidInput) {
-        const input = this._inputNode;
-        if (input && input.value.length > 0 && !this.checkValidity()) {
-          input.value = this.value || '';
-          // add input-prevented attribute for 200ms
-          this.setAttribute('input-prevented', '');
-          this._inputDebouncer = Debouncer.debounce(this._inputDebouncer, timeOut.after(200), () => {
-            this.removeAttribute('input-prevented');
-          });
-          return;
-        }
-      }
-
-      super._onInput(e);
-    }
-
-    /**
-     * Returns true if the current input value satisfies all constraints (if any)
-     * @return {boolean}
-     */
-    checkValidity() {
-      if (this.required || this.pattern || this.maxlength || this.minlength) {
-        return this._inputNode ? this._inputNode.checkValidity() : undefined;
-      } else {
-        return !this.invalid;
-      }
-    }
-  };
-
-/**
- * A mixin to provide validation constraints for vaadin-text-field and related components.
- */
-export const TextFieldMixin = dedupingMixin(TextFieldMixinImplementation);