@vaadin/vaadin-text-field - npm Package Compare versions

Comparing version 2.6.0-alpha2 to 2.6.0-alpha3

package.json

@@ -13,3 +13,3 @@ {
   "name": "@vaadin/vaadin-text-field",
-  "version": "2.6.0-alpha2",
+  "version": "2.6.0-alpha3",
   "main": "vaadin-text-field.js",
@@ -16,0 +16,0 @@ "author": "Vaadin Ltd",

src/vaadin-email-field.js

@@ -33,3 +33,3 @@ /**
   static get version() {
-    return '2.6.0-alpha2';
+    return '2.6.0-alpha3';
   }
@@ -36,0 +36,0 @@

src/vaadin-integer-field.js

@@ -36,3 +36,3 @@ /**
   static get version() {
-    return '2.6.0-alpha2';
+    return '2.6.0-alpha3';
   }
@@ -39,0 +39,0 @@

src/vaadin-number-field.js

@@ -79,3 +79,3 @@ /**
   static get version() {
-    return '2.6.0-alpha2';
+    return '2.6.0-alpha3';
   }
@@ -82,0 +82,0 @@

src/vaadin-password-field.js

@@ -79,3 +79,3 @@ /**
   static get version() {
-    return '2.6.0-alpha2';
+    return '2.6.0-alpha3';
   }
@@ -82,0 +82,0 @@

src/vaadin-text-area.js

@@ -140,3 +140,3 @@ /**
   static get version() {
-    return '2.6.0-alpha2';
+    return '2.6.0-alpha3';
   }
@@ -143,0 +143,0 @@

src/vaadin-text-field.js

@@ -112,3 +112,3 @@ /**
   static get version() {
-    return '2.6.0-alpha2';
+    return '2.6.0-alpha3';
   }
@@ -115,0 +115,0 @@

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

@@ -261,2 +261,7 @@ import '@vaadin/vaadin-lumo-styles/color.js';
 
+      :host([theme~="align-left"]) [part="value"] {
+        text-align: left;
+        --_lumo-text-field-overflow-mask-image: none;
+      }
+
       :host([theme~="align-center"]) [part="value"] {
@@ -279,2 +284,9 @@ text-align: center;
 
+      @-moz-document url-prefix() {
+        /* Firefox is smart enough to align overflowing text to right */
+        :host([theme~="align-left"]) [part="value"] {
+          --_lumo-text-field-overflow-mask-image: linear-gradient(to left, transparent 0.25em, #000 1.5em);
+        }
+      }
+
       /* helper-text position */
@@ -333,2 +345,56 @@
       }
+
+      /* RTL specific styles */
+
+      :host([dir="rtl"]) [part="input-field"]::after {
+        transform-origin: 0% 0;
+      }
+
+      :host([dir="rtl"]) [part="value"],
+      :host([dir="rtl"]) [part="input-field"] ::slotted(input),
+      :host([dir="rtl"]) [part="input-field"] ::slotted(textarea) {
+        --_lumo-text-field-overflow-mask-image: linear-gradient(to right, transparent, #000 1.25em);
+      }
+
+      :host([dir="rtl"]) [part="value"]:focus,
+      :host([focused][dir="rtl"]) [part="input-field"] ::slotted(input),
+      :host([focused][dir="rtl"]) [part="input-field"] ::slotted(textarea) {
+        -webkit-mask-image: none;
+        mask-image: none;
+      }
+
+      @-moz-document url-prefix() {
+        :host([dir="rtl"]) [part="value"],
+        :host([dir="rtl"]) [part="input-field"] ::slotted(input),
+        :host([dir="rtl"]) [part="input-field"] ::slotted(textarea),
+        :host([dir="rtl"]) [part="input-field"] ::slotted([part="value"]) {
+          mask-image: var(--_lumo-text-field-overflow-mask-image);
+        }
+      }
+
+      :host([theme~="align-left"][dir="rtl"]) [part="value"] {
+        --_lumo-text-field-overflow-mask-image: none;
+      }
+
+      :host([theme~="align-center"][dir="rtl"]) [part="value"] {
+        --_lumo-text-field-overflow-mask-image: none;
+      }
+
+      :host([theme~="align-right"][dir="rtl"]) [part="value"] {
+        --_lumo-text-field-overflow-mask-image: none;
+      }
+
+      @-moz-document url-prefix() {
+        /* Firefox is smart enough to align overflowing text to right */
+        :host([theme~="align-right"][dir="rtl"]) [part="value"] {
+          --_lumo-text-field-overflow-mask-image: linear-gradient(to right, transparent 0.25em, #000 1.5em);
+        }
+      }
+
+      @-moz-document url-prefix() {
+        /* Firefox is smart enough to align overflowing text to right */
+        :host([theme~="align-left"][dir="rtl"]) [part="value"] {
+          --_lumo-text-field-overflow-mask-image: linear-gradient(to left, transparent 0.25em, #000 1.5em);
+        }
+      }
     </style>
@@ -335,0 +401,0 @@ </template>

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

@@ -50,2 +50,3 @@ import '@vaadin/vaadin-material-styles/color.js';
         padding-left: 0;
+        padding-right: 0;
         background-color: transparent;
@@ -235,2 +236,3 @@ margin: 0;
         left: auto;
+        right: auto;
         transition-delay: 0.1s;
@@ -248,2 +250,8 @@ }
       }
+
+      /* RTL specific styles */
+
+      :host([disabled][dir="rtl"]) [part="input-field"]::before {
+        background-image: linear-gradient(-90deg, var(--_material-text-field-input-line-background-color, #000) 0, var(--_material-text-field-input-line-background-color, #000) 2px, transparent 2px);
+      }
     </style>
@@ -250,0 +258,0 @@ </template>

No alert changes

Improved metrics

Total package byte prevSize

109903

increased by2.64%

Lines of code

2512

increased by2.45%

No dependency changes