@vaadin/vaadin-text-field 22.0.0-alpha4 → 22.0.0-alpha8

package/package.json

@@ -1,10 +1,29 @@
 {
   "name": "@vaadin/vaadin-text-field",
-  "version": "22.0.0-alpha4",
+  "version": "22.0.0-alpha8",
+  "publishConfig": {
+    "access": "public"
+  },
   "description": "vaadin-text-field",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vaadin/web-components.git",
+    "directory": "packages/vaadin-text-field"
+  },
+  "author": "Vaadin Ltd",
+  "homepage": "https://vaadin.com/components",
+  "bugs": {
+    "url": "https://github.com/vaadin/vaadin-text-field/issues"
+  },
   "main": "vaadin-text-field.js",
   "module": "vaadin-text-field.js",
-  "repository": "vaadin/vaadin-text-field",
+  "files": [
+    "src",
+    "theme",
+    "vaadin-*.d.ts",
+    "vaadin-*.js"
+  ],
   "keywords": [
     "Vaadin",
     "input",
@@ -12,38 +31,14 @@
     "web-component",
     "polymer"
   ],
-  "author": "Vaadin Ltd",
-  "license": "Apache-2.0",
-  "bugs": {
-    "url": "https://github.com/vaadin/vaadin-text-field/issues"
-  },
-  "homepage": "https://vaadin.com/components",
-  "files": [
-    "vaadin-*.d.ts",
-    "vaadin-*.js",
-    "src",
-    "theme"
-  ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/email-field": "^22.0.0-alpha4",
-    "@vaadin/integer-field": "^22.0.0-alpha4",
-    "@vaadin/number-field": "^22.0.0-alpha4",
-    "@vaadin/password-field": "^22.0.0-alpha4",
-    "@vaadin/text-area": "^22.0.0-alpha4",
-    "@vaadin/vaadin-control-state-mixin": "^22.0.0-alpha4",
-    "@vaadin/vaadin-element-mixin": "^22.0.0-alpha4",
-    "@vaadin/vaadin-lumo-styles": "^22.0.0-alpha4",
-    "@vaadin/vaadin-material-styles": "^22.0.0-alpha4",
-    "@vaadin/vaadin-themable-mixin": "^22.0.0-alpha4"
-  },
-  "devDependencies": {
-    "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.2.1",
-    "sinon": "^9.2.1"
-  },
-  "publishConfig": {
-    "access": "public"
+    "@vaadin/email-field": "22.0.0-alpha8",
+    "@vaadin/integer-field": "22.0.0-alpha8",
+    "@vaadin/number-field": "22.0.0-alpha8",
+    "@vaadin/password-field": "22.0.0-alpha8",
+    "@vaadin/text-area": "22.0.0-alpha8",
+    "@vaadin/text-field": "22.0.0-alpha8"
   },
-  "gitHead": "86c025abd605d5a4a3c0ae36eb07c34704cee1f2"
+  "gitHead": "c24468526298ee26ad7f7280b59f6c8789e1f75f"
 }

package/src/vaadin-email-field.d.ts

@@ -3,4 +3,16 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { EmailField } from '@vaadin/email-field/src/vaadin-email-field.js';
+
+/**
+ * @deprecated Import `EmailField` from `@vaadin/email-field` instead.
+ */
+export type EmailFieldElement = EmailField;
+
+/**
+ * @deprecated Import `EmailField` from `@vaadin/email-field` instead.
+ */
+export const EmailFieldElement: typeof EmailField;
+
 export * from '@vaadin/email-field/src/vaadin-email-field.js';

package/src/vaadin-email-field.js

@@ -3,4 +3,11 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { EmailField } from '@vaadin/email-field/src/vaadin-email-field.js';
+
+/**
+ * @deprecated Import `EmailField` from `@vaadin/email-field` instead.
+ */
+export const EmailFieldElement = EmailField;
+
 export * from '@vaadin/email-field/src/vaadin-email-field.js';

package/src/vaadin-integer-field.d.ts

@@ -3,4 +3,16 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { IntegerField } from '@vaadin/integer-field/src/vaadin-integer-field.js';
+
+/**
+ * @deprecated Import `IntegerField` from `@vaadin/integer-field` instead.
+ */
+export type IntegerFieldElement = IntegerField;
+
+/**
+ * @deprecated Import `IntegerField` from `@vaadin/integer-field` instead.
+ */
+export const IntegerFieldElement: typeof IntegerField;
+
 export * from '@vaadin/integer-field/src/vaadin-integer-field.js';

package/src/vaadin-integer-field.js

@@ -3,4 +3,11 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { IntegerField } from '@vaadin/integer-field/src/vaadin-integer-field.js';
+
+/**
+ * @deprecated Import `IntegerField` from `@vaadin/integer-field` instead.
+ */
+export const IntegerFieldElement = IntegerField;
+
 export * from '@vaadin/integer-field/src/vaadin-integer-field.js';

package/src/vaadin-number-field.d.ts

@@ -3,4 +3,16 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { NumberField } from '@vaadin/number-field/src/vaadin-number-field.js';
+
+/**
+ * @deprecated Import `NumberField` from `@vaadin/number-field` instead.
+ */
+export type NumberFieldElement = NumberField;
+
+/**
+ * @deprecated Import `NumberField` from `@vaadin/number-field` instead.
+ */
+export const NumberFieldElement: typeof NumberField;
+
 export * from '@vaadin/number-field/src/vaadin-number-field.js';

package/src/vaadin-number-field.js

@@ -3,4 +3,11 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { NumberField } from '@vaadin/number-field/src/vaadin-number-field.js';
+
+/**
+ * @deprecated Import `NumberField` from `@vaadin/number-field` instead.
+ */
+export const NumberFieldElement = NumberField;
+
 export * from '@vaadin/number-field/src/vaadin-number-field.js';

package/src/vaadin-password-field.d.ts

@@ -3,4 +3,16 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { PasswordField } from '@vaadin/password-field/src/vaadin-password-field.js';
+
+/**
+ * @deprecated Import `PasswordField` from `@vaadin/password-field` instead.
+ */
+export type PasswordFieldElement = PasswordField;
+
+/**
+ * @deprecated Import `PasswordField` from `@vaadin/password-field` instead.
+ */
+export const PasswordFieldElement: typeof PasswordField;
+
 export * from '@vaadin/password-field/src/vaadin-password-field.js';

package/src/vaadin-password-field.js

@@ -3,4 +3,11 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { PasswordField } from '@vaadin/password-field/src/vaadin-password-field.js';
+
+/**
+ * @deprecated Import `PasswordField` from `@vaadin/password-field` instead.
+ */
+export const PasswordFieldElement = PasswordField;
+
 export * from '@vaadin/password-field/src/vaadin-password-field.js';

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

@@ -3,4 +3,16 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { TextArea } from '@vaadin/text-area/src/vaadin-text-area.js';
+
+/**
+ * @deprecated Import `TextArea` from `@vaadin/text-area` instead.
+ */
+export type TextAreaElement = TextArea;
+
+/**
+ * @deprecated Import `TextArea` from `@vaadin/text-area` instead.
+ */
+export const TextAreaElement: typeof TextArea;
+
 export * from '@vaadin/text-area/src/vaadin-text-area.js';

package/src/vaadin-text-area.js

@@ -3,4 +3,11 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { TextArea } from '@vaadin/text-area/src/vaadin-text-area.js';
+
+/**
+ * @deprecated Import `TextArea` from `@vaadin/text-area` instead.
+ */
+export const TextAreaElement = TextArea;
+
 export * from '@vaadin/text-area/src/vaadin-text-area.js';

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

@@ -1,103 +1,18 @@
-import { TextFieldMixin } from './vaadin-text-field-mixin.js';
-
-import { ControlStateMixin } from '@vaadin/vaadin-control-state-mixin/vaadin-control-state-mixin.js';
-
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
-
-import { TextFieldEventMap } from './interfaces';
-
 /**
- * `<vaadin-text-field>` is a Web Component for text field control in forms.
- *
- * ```html
- * <vaadin-text-field label="First Name">
- * </vaadin-text-field>
- * ```
- *
- * ### Prefixes and suffixes
- *
- * These are child elements of a `<vaadin-text-field>` that are displayed
- * inline with the input, before or after.
- * In order for an element to be considered as a prefix, it must have the slot
- * attribute set to `prefix` (and similarly for `suffix`).
- *
- * ```html
- * <vaadin-text-field label="Email address">
- *   <div slot="prefix">Sent to:</div>
- *   <div slot="suffix">@vaadin.com</div>
- * </vaadin-text-field>
- * ```
- *
- * ### Styling
- *
- * The following custom properties are available for styling:
- *
- * Custom property | Description | Default
- * ----------------|-------------|-------------
- * `--vaadin-text-field-default-width` | Set the default width of the input field | `12em`
- *
- * The following shadow DOM parts are available for styling:
- *
- * Part name | Description
- * ----------------|----------------
- * `label` | The label element
- * `input-field` | The element that wraps prefix, value and suffix
- * `value` | The text value element inside the `input-field` element
- * `error-message` | The error message element
- *
- * The following state attributes are available for styling:
- *
- * Attribute    | Description | Part name
- * -------------|-------------|------------
- * `disabled` | Set to a disabled text field | :host
- * `has-value` | Set when the element has a value | :host
- * `has-label` | Set when the element has a label | :host
- * `has-helper` | Set when the element has helper text or slot | :host
- * `has-error-message` | Set when the element has an error message | :host
- * `invalid` | Set when the element is invalid | :host
- * `input-prevented` | Temporarily set when invalid input is prevented | :host
- * `focused` | Set when the element is focused | :host
- * `focus-ring` | Set when the element is keyboard focused | :host
- * `readonly` | Set to a readonly text field | :host
- *
- * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
- *
- * @fires {Event} input - Fired when the value is changed by the user: on every typing keystroke, and the value is cleared using the clear button.
- * @fires {Event} change - Fired when the user commits a value change.
- * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
- * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-declare class TextFieldElement extends TextFieldMixin(ControlStateMixin(ThemableMixin(ElementMixin(HTMLElement)))) {
-  /**
-   * A regular expression that the value is checked against.
-   * The pattern must match the entire value, not just some subset.
-   */
-  pattern: string | null | undefined;
-
-  /**
-   * The text usually displayed in a tooltip popup when the mouse is over the field.
-   */
-  title: string;
+import { TextField } from '@vaadin/text-field/src/vaadin-text-field.js';
 
-  addEventListener<K extends keyof TextFieldEventMap>(
-    type: K,
-    listener: (this: TextFieldElement, ev: TextFieldEventMap[K]) => void,
-    options?: boolean | AddEventListenerOptions
-  ): void;
-
-  removeEventListener<K extends keyof TextFieldEventMap>(
-    type: K,
-    listener: (this: TextFieldElement, ev: TextFieldEventMap[K]) => void,
-    options?: boolean | EventListenerOptions
-  ): void;
-}
+/**
+ * @deprecated Import `TextField` from `@vaadin/text-field` instead.
+ */
+export type TextFieldElement = TextField;
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'vaadin-text-field': TextFieldElement;
-  }
-}
+/**
+ * @deprecated Import `TextField` from `@vaadin/text-field` instead.
+ */
+export const TextFieldElement: typeof TextField;
 
-export { TextFieldElement };
+export * from '@vaadin/text-field/src/vaadin-text-field.js';

package/src/vaadin-text-field.js

@@ -3,138 +3,11 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
-import { TextFieldMixin } from './vaadin-text-field-mixin.js';
-import { ControlStateMixin } from '@vaadin/vaadin-control-state-mixin/vaadin-control-state-mixin.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
+import { TextField } from '@vaadin/text-field/src/vaadin-text-field.js';
 
 /**
- * `<vaadin-text-field>` is a Web Component for text field control in forms.
- *
- * ```html
- * <vaadin-text-field label="First Name">
- * </vaadin-text-field>
- * ```
- *
- * ### Prefixes and suffixes
- *
- * These are child elements of a `<vaadin-text-field>` that are displayed
- * inline with the input, before or after.
- * In order for an element to be considered as a prefix, it must have the slot
- * attribute set to `prefix` (and similarly for `suffix`).
- *
- * ```html
- * <vaadin-text-field label="Email address">
- *   <div slot="prefix">Sent to:</div>
- *   <div slot="suffix">@vaadin.com</div>
- * </vaadin-text-field>
- * ```
- *
- * ### Styling
- *
- * The following custom properties are available for styling:
- *
- * Custom property | Description | Default
- * ----------------|-------------|-------------
- * `--vaadin-text-field-default-width` | Set the default width of the input field | `12em`
- *
- * The following shadow DOM parts are available for styling:
- *
- * Part name | Description
- * ----------------|----------------
- * `label` | The label element
- * `input-field` | The element that wraps prefix, value and suffix
- * `value` | The text value element inside the `input-field` element
- * `error-message` | The error message element
- *
- * The following state attributes are available for styling:
- *
- * Attribute    | Description | Part name
- * -------------|-------------|------------
- * `disabled` | Set to a disabled text field | :host
- * `has-value` | Set when the element has a value | :host
- * `has-label` | Set when the element has a label | :host
- * `has-helper` | Set when the element has helper text or slot | :host
- * `has-error-message` | Set when the element has an error message | :host
- * `invalid` | Set when the element is invalid | :host
- * `input-prevented` | Temporarily set when invalid input is prevented | :host
- * `focused` | Set when the element is focused | :host
- * `focus-ring` | Set when the element is keyboard focused | :host
- * `readonly` | Set to a readonly text field | :host
- *
- * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
- *
- * @fires {Event} input - Fired when the value is changed by the user: on every typing keystroke, and the value is cleared using the clear button.
- * @fires {Event} change - Fired when the user commits a value change.
- * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
- * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
- *
- * @extends HTMLElement
- * @mixes TextFieldMixin
- * @mixes ControlStateMixin
- * @mixes ThemableMixin
- * @mixes ElementMixin
+ * @deprecated Import `TextField` from `@vaadin/text-field` instead.
  */
-class TextFieldElement extends ElementMixin(TextFieldMixin(ControlStateMixin(ThemableMixin(PolymerElement)))) {
-  static get template() {
-    return html`
-      <style include="vaadin-text-field-shared-styles"></style>
+export const TextFieldElement = TextField;
 
-      <div class="vaadin-text-field-container">
-        <label part="label" on-click="focus" id="[[_labelId]]">[[label]]</label>
-
-        <div part="input-field" id="[[_inputId]]">
-          <slot name="prefix"></slot>
-
-          <slot name="input">
-            <input part="value" />
-          </slot>
-
-          <div part="clear-button" id="clearButton" role="button" aria-label$="[[i18n.clear]]"></div>
-          <slot name="suffix"></slot>
-        </div>
-
-        <div part="helper-text" id="[[_helperTextId]]">
-          <slot name="helper">[[helperText]]</slot>
-        </div>
-
-        <div
-          part="error-message"
-          id="[[_errorId]]"
-          aria-live="assertive"
-          aria-hidden$="[[_getErrorMessageAriaHidden(invalid, errorMessage, _errorId)]]"
-          >[[errorMessage]]</div
-        >
-      </div>
-    `;
-  }
-
-  static get is() {
-    return 'vaadin-text-field';
-  }
-
-  static get properties() {
-    return {
-      /**
-       * A regular expression that the value is checked against.
-       * The pattern must match the entire value, not just some subset.
-       */
-      pattern: {
-        type: String
-      },
-
-      /**
-       * The text usually displayed in a tooltip popup when the mouse is over the field.
-       * @type {string}
-       */
-      title: {
-        type: String
-      }
-    };
-  }
-}
-
-customElements.define(TextFieldElement.is, TextFieldElement);
-
-export { TextFieldElement };
+export * from '@vaadin/text-field/src/vaadin-text-field.js';

package/theme/lumo/vaadin-text-field.js

@@ -1,2 +1,6 @@
-import './vaadin-text-field-styles.js';
-import '../../src/vaadin-text-field.js';
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import '@vaadin/text-field/theme/lumo/vaadin-text-field.js';

package/theme/material/vaadin-text-field.js

@@ -1,2 +1,6 @@
-import './vaadin-text-field-styles.js';
-import '../../src/vaadin-text-field.js';
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import '@vaadin/text-field/theme/material/vaadin-text-field.js';

package/vaadin-text-field.d.ts

@@ -1,2 +1 @@
 export * from './src/vaadin-text-field.js';
-export * from './src/interfaces';

package/src/interfaces.d.ts

@@ -1,21 +0,0 @@
-export type TextFieldAutoCapitalize = 'on' | 'off' | 'none' | 'characters' | 'words' | 'sentences';
-
-export type TextFieldAutoCorrect = 'on' | 'off';
-
-/**
- * Fired when the `invalid` property changes.
- */
-export type TextFieldInvalidChangedEvent = CustomEvent<{ value: boolean }>;
-
-/**
- * Fired when the `value` property changes.
- */
-export type TextFieldValueChangedEvent = CustomEvent<{ value: string }>;
-
-export interface TextFieldElementEventMap {
-  'invalid-changed': TextFieldInvalidChangedEvent;
-
-  'value-changed': TextFieldValueChangedEvent;
-}
-
-export interface TextFieldEventMap extends HTMLElementEventMap, TextFieldElementEventMap {}