@vaadin/text-area - npm Package Compare versions

Comparing version 22.0.0-alpha6 to 22.0.0-alpha7

package.json

 {
   "name": "@vaadin/text-area",
-  "version": "22.0.0-alpha6",
+  "version": "22.0.0-alpha7",
+  "publishConfig": {
+    "access": "public"
+  },
   "description": "vaadin-text-area",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vaadin/web-components.git",
+    "directory": "packages/text-area"
+  },
+  "author": "Vaadin Ltd",
+  "homepage": "https://vaadin.com/components",
+  "bugs": {
+    "url": "https://github.com/vaadin/web-components/issues"
+  },
   "main": "vaadin-text-area.js",
   "module": "vaadin-text-area.js",
-  "repository": "vaadin/web-components",
+  "files": [
+    "src",
+    "theme",
+    "vaadin-*.d.ts",
+    "vaadin-*.js"
+  ],
   "keywords": [
@@ -14,23 +33,10 @@ "Vaadin",
   ],
-  "author": "Vaadin Ltd",
-  "license": "Apache-2.0",
-  "bugs": {
-    "url": "https://github.com/vaadin/web-components/issues"
-  },
-  "homepage": "https://vaadin.com/components",
-  "files": [
-    "vaadin-*.d.ts",
-    "vaadin-*.js",
-    "src",
-    "theme"
-  ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/field-base": "^22.0.0-alpha6",
-    "@vaadin/input-container": "^22.0.0-alpha6",
-    "@vaadin/text-field": "^22.0.0-alpha6",
-    "@vaadin/vaadin-element-mixin": "^22.0.0-alpha6",
-    "@vaadin/vaadin-lumo-styles": "^22.0.0-alpha6",
-    "@vaadin/vaadin-material-styles": "^22.0.0-alpha6",
-    "@vaadin/vaadin-themable-mixin": "^22.0.0-alpha6"
+    "@vaadin/component-base": "22.0.0-alpha7",
+    "@vaadin/field-base": "22.0.0-alpha7",
+    "@vaadin/input-container": "22.0.0-alpha7",
+    "@vaadin/vaadin-lumo-styles": "22.0.0-alpha7",
+    "@vaadin/vaadin-material-styles": "22.0.0-alpha7",
+    "@vaadin/vaadin-themable-mixin": "22.0.0-alpha7"
   },
@@ -42,6 +48,3 @@ "devDependencies": {
   },
-  "publishConfig": {
-    "access": "public"
-  },
-  "gitHead": "4b136b1c7da8942960e7255f40c27859125b3a45"
+  "gitHead": "8e89419c6b44a1d225d5859e180d7b35e47ddb52"
 }

src/vaadin-text-area.d.ts

@@ -6,6 +6,4 @@ /**
  */
-import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
-import { CharLengthMixin } from '@vaadin/field-base/src/char-length-mixin.js';
+import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { InputFieldMixin } from '@vaadin/field-base/src/input-field-mixin.js';
-import { TextAreaSlotMixin } from '@vaadin/field-base/src/text-area-slot-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
@@ -54,2 +52,8 @@
  *
+ * The following custom properties are available for styling:
+ *
+ * Custom property                | Description                | Default
+ * -------------------------------|----------------------------|---------
+ * `--vaadin-field-default-width` | Default width of the field | `12em`
+ *
  * The following shadow DOM parts are available for styling:
@@ -85,5 +89,13 @@ *
  */
-declare class TextArea extends CharLengthMixin(
-  InputFieldMixin(TextAreaSlotMixin(ThemableMixin(ElementMixin(HTMLElement))))
-) {
+declare class TextArea extends InputFieldMixin(ThemableMixin(ElementMixin(HTMLElement))) {
+  /**
+   * 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;
+
   addEventListener<K extends keyof TextAreaEventMap>(
@@ -90,0 +102,0 @@ type: K,

src/vaadin-text-area.js

@@ -7,10 +7,13 @@ /**
 import { PolymerElement, html } from '@polymer/polymer';
-import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
-import { CharLengthMixin } from '@vaadin/field-base/src/char-length-mixin.js';
+import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { AriaLabelController } from '@vaadin/field-base/src/aria-label-controller.js';
 import { InputFieldMixin } from '@vaadin/field-base/src/input-field-mixin.js';
-import { TextAreaSlotMixin } from '@vaadin/field-base/src/text-area-slot-mixin.js';
+import { TextAreaController } from '@vaadin/field-base/src/text-area-controller.js';
+import { inputFieldShared } from '@vaadin/field-base/src/styles/input-field-shared-styles.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import '@vaadin/input-container/src/vaadin-input-container.js';
-import '@vaadin/text-field/src/vaadin-input-field-shared-styles.js';
 
+registerStyles('vaadin-text-area', inputFieldShared, { moduleId: 'vaadin-text-area-styles' });
+
 /**
@@ -39,2 +42,8 @@ * `<vaadin-text-area>` is a web component for multi-line text input.
  *
+ * The following custom properties are available for styling:
+ *
+ * Custom property                | Description                | Default
+ * -------------------------------|----------------------------|---------
+ * `--vaadin-field-default-width` | Default width of the field | `12em`
+ *
  * The following shadow DOM parts are available for styling:
@@ -71,11 +80,7 @@ *
  * @extends HTMLElement
- * @mixes CharLengthMixin
  * @mixes InputFieldMixin
- * @mixes TextAreaSlotMixin
  * @mixes ElementMixin
  * @mixes ThemableMixin
  */
-export class TextArea extends CharLengthMixin(
-  InputFieldMixin(TextAreaSlotMixin(ThemableMixin(ElementMixin(PolymerElement))))
-) {
+export class TextArea extends InputFieldMixin(ThemableMixin(ElementMixin(PolymerElement))) {
   static get is() {
@@ -87,3 +92,3 @@ return 'vaadin-text-area';
     return html`
-      <style include="vaadin-input-field-shared-styles">
+      <style>
         :host {
@@ -93,3 +98,3 @@ animation: 1ms vaadin-text-area-appear;
 
-        [part='container'] {
+        .vaadin-text-area-container {
           flex: auto;
@@ -106,2 +111,3 @@ }
         [part='input-field'] {
+          flex: auto;
           overflow: auto;
@@ -145,6 +151,6 @@ -webkit-overflow-scrolling: touch;
 
-      <div part="container">
+      <div class="vaadin-text-area-container">
         <div part="label">
           <slot name="label"></slot>
-          <span part="indicator" aria-hidden="true"></span>
+          <span part="required-indicator" aria-hidden="true"></span>
         </div>
@@ -176,2 +182,28 @@
 
+  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'];
+  }
+
   /**
@@ -196,2 +228,12 @@ * Used by `ClearButtonMixin` as a reference to the clear button element.
     super.ready();
+
+    this.addController(
+      new TextAreaController(this, (input) => {
+        this._setInputElement(input);
+        this._setFocusElement(input);
+        this.stateTarget = input;
+        this.ariaTarget = input;
+      })
+    );
+    this.addController(new AriaLabelController(this.inputElement, this._labelNode));
     this.addEventListener('animationend', this._onAnimationEnd);
@@ -198,0 +240,0 @@ }

theme/lumo/vaadin-text-area-styles.js

@@ -10,3 +10,3 @@ /**
 import '@vaadin/vaadin-lumo-styles/typography.js';
-import { inputFieldShared } from '@vaadin/text-field/theme/lumo/vaadin-input-field-shared-styles.js';
+import { inputFieldShared } from '@vaadin/vaadin-lumo-styles/mixins/input-field-shared.js';
 
@@ -13,0 +13,0 @@ const textArea = css`

theme/material/vaadin-text-area-styles.js

@@ -7,3 +7,3 @@ /**
 import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
-import { inputFieldShared } from '@vaadin/text-field/theme/material/vaadin-input-field-shared-styles.js';
+import { inputFieldShared } from '@vaadin/vaadin-material-styles/mixins/input-field-shared.js';
 
@@ -10,0 +10,0 @@ const textArea = css`

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

31372

increased by5.59%

Dependency count

7

decreased by-12.5%

Lines of code

468

increased by10.9%

Number of low supply chain risk alerts

0

decreased by-100%

Dependency changes

• + Added@vaadin/component-base@22.0.0-alpha7

• + Added@vaadin/component-base@22.0.0-alpha7(transitive)

• + Added@vaadin/field-base@22.0.0-alpha7(transitive)

• + Added@vaadin/icon@22.0.0-alpha7(transitive)

• + Added@vaadin/input-container@22.0.0-alpha7(transitive)

• + Added@vaadin/vaadin-lumo-styles@22.0.0-alpha7(transitive)

• + Added@vaadin/vaadin-material-styles@22.0.0-alpha7(transitive)

• + Added@vaadin/vaadin-themable-mixin@22.0.0-alpha7(transitive)

• - Removed@vaadin/text-field@^22.0.0-alpha6

• - Removed@vaadin/vaadin-element-mixin@^22.0.0-alpha6

• - Removed@open-wc/dedupe-mixin@1.4.0(transitive)

• - Removed@vaadin/component-base@22.1.0(transitive)

• - Removed@vaadin/field-base@22.1.0(transitive)

• - Removed@vaadin/icon@22.1.0(transitive)

• - Removed@vaadin/input-container@22.1.0(transitive)

• - Removed@vaadin/text-field@22.1.0(transitive)

• - Removed@vaadin/vaadin-element-mixin@22.0.0-alpha6(transitive)

• - Removed@vaadin/vaadin-lumo-styles@22.1.0(transitive)

• - Removed@vaadin/vaadin-material-styles@22.1.0(transitive)

• - Removed@vaadin/vaadin-themable-mixin@22.1.0(transitive)

• Updated@vaadin/field-base@22.0.0-alpha7

• Updated@vaadin/input-container@22.0.0-alpha7

• Updated@vaadin/vaadin-lumo-styles@22.0.0-alpha7

• Updated@vaadin/vaadin-material-styles@22.0.0-alpha7

• Updated@vaadin/vaadin-themable-mixin@22.0.0-alpha7