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

Comparing version 2.1.2 to 2.1.3

package.json

@@ -13,3 +13,3 @@ {
   "name": "@vaadin/vaadin-text-field",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "main": "vaadin-text-field.js",
@@ -36,4 +36,4 @@ "author": "Vaadin Ltd",
     "@vaadin/vaadin-control-state-mixin": "^2.1.1",
-    "@vaadin/vaadin-lumo-styles": "^1.1.0-beta1",
-    "@vaadin/vaadin-material-styles": "^1.1.0-beta1",
+    "@vaadin/vaadin-lumo-styles": "^1.2.0",
+    "@vaadin/vaadin-material-styles": "^1.2.0",
     "@vaadin/vaadin-element-mixin": "^2.0.0"
@@ -48,5 +48,6 @@ },
     "wct-browser-legacy": "^1.0.1",
-    "@vaadin/vaadin-demo-helpers": "2.0.1",
-    "@vaadin/vaadin-button": "2.1.0-beta2"
+    "@vaadin/vaadin-demo-helpers": "^2.1.0",
+    "@vaadin/vaadin-button": "^2.1.0",
+    "@vaadin/vaadin-ordered-layout": "^1.1.0"
   }
 }

src/vaadin-password-field.js

@@ -80,3 +80,3 @@ /**
   static get version() {
-    return '2.1.2';
+    return '2.1.3';
   }
@@ -83,0 +83,0 @@

src/vaadin-text-area.js

@@ -120,3 +120,3 @@ /**
   static get version() {
-    return '2.1.2';
+    return '2.1.3';
   }
@@ -123,0 +123,0 @@

src/vaadin-text-field-mixin.js

@@ -17,2 +17,3 @@ /**
         outline: none;
+        align-self: baseline;
       }
@@ -306,2 +307,3 @@
 
+    /* istanbul ignore if */
     if (navigator.userAgent.match(/Trident/)) {
@@ -355,2 +357,3 @@ this._addIEListeners();
     // Needed until Edge has CSS Custom Properties (present in Edge Preview)
+    /* istanbul ignore if */
     if (!(window.ShadyCSS && window.ShadyCSS.nativeCss) &&
@@ -364,2 +367,3 @@ /^(focused|focus-ring|invalid|disabled|placeholder|has-value)$/.test(prop)) {
     const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+    /* istanbul ignore if */
     if (isSafari && this.root) {
@@ -366,0 +370,0 @@ const WEBKIT_PROPERTY = '-webkit-backface-visibility';

src/vaadin-text-field.js

@@ -102,3 +102,3 @@ /**
   static get version() {
-    return '2.1.2';
+    return '2.1.3';
   }
@@ -105,0 +105,0 @@

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

@@ -0,0 +0,0 @@ import '@vaadin/vaadin-lumo-styles/font-icons.js';

theme/lumo/vaadin-password-field.js

 import './vaadin-password-field-styles.js';
 import './vaadin-text-field.js';
 import '../../src/vaadin-password-field.js';

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

@@ -0,0 +0,0 @@ import '@vaadin/vaadin-lumo-styles/color.js';

theme/lumo/vaadin-text-area.js

 import './vaadin-text-area-styles.js';
 import './vaadin-text-field.js';
 import '../../src/vaadin-text-area.js';

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

@@ -6,2 +6,3 @@ import '@vaadin/vaadin-lumo-styles/color.js';
 import '@vaadin/vaadin-lumo-styles/typography.js';
+import '@vaadin/vaadin-lumo-styles/mixins/required-field.js';
 const $_documentContainer = document.createElement('template');
@@ -11,3 +12,3 @@
   <template>
-    <style>
+    <style include="lumo-required-field">
       :host {
@@ -31,28 +32,2 @@ --lumo-text-field-size: var(--lumo-size-m);
 
-      [part="label"] {
-        align-self: flex-start;
-        color: var(--lumo-secondary-text-color);
-        font-weight: 500;
-        font-size: var(--lumo-font-size-s);
-        margin-left: calc(var(--lumo-border-radius) / 4);
-        transition: color 0.2s;
-        line-height: 1;
-        padding-bottom: 0.5em;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        position: relative;
-        max-width: 100%;
-        box-sizing: border-box;
-      }
-
-      :host([has-label])::before {
-        /* Label height + margin */
-        margin-top: calc(var(--lumo-font-size-s) * 1.5);
-      }
-
-      :host([has-label]) {
-        padding-top: var(--lumo-space-m);
-      }
-
       :host([focused]:not([readonly])) [part="label"] {
@@ -62,18 +37,2 @@ color: var(--lumo-primary-text-color);
 
-      :host([required]) [part="label"] {
-        padding-right: 1em;
-      }
-
-      /* Used for required and invalid indicators */
-      [part="label"]::after {
-        content: var(--lumo-required-field-indicator, "•");
-        transition: opacity 0.2s;
-        opacity: 0;
-        color: var(--lumo-primary-text-color);
-        position: absolute;
-        right: 0;
-        width: 1em;
-        text-align: center;
-      }
-
       [part="value"],
@@ -243,14 +202,4 @@ [part="input-field"] ::slotted([part="value"]) {
 
-      /* Required field style */
-
-      :host([required]:not([has-value])) [part="label"]::after {
-        opacity: 1;
-      }
-
       /* Invalid style */
 
-      :host([invalid]) [part="label"]::after {
-        color: var(--lumo-error-text-color);
-      }
-
       :host([invalid]) [part="input-field"] {
@@ -268,27 +217,2 @@ background-color: var(--lumo-error-color-10pct);
 
-      /* Error message */
-
-      [part="error-message"] {
-        margin-left: calc(var(--lumo-border-radius) / 4);
-        font-size: var(--lumo-font-size-xs);
-        line-height: var(--lumo-line-height-xs);
-        color: var(--lumo-error-text-color);
-        will-change: max-height;
-        transition: 0.4s max-height;
-        max-height: 5em;
-      }
-
-      /* Margin that doesn’t reserve space when there’s no error message */
-      [part="error-message"]:not(:empty)::before,
-      [part="error-message"]:not(:empty)::after {
-        content: "";
-        display: block;
-        height: 0.4em;
-      }
-
-      :host(:not([invalid])) [part="error-message"] {
-        max-height: 0;
-        overflow: hidden;
-      }
-
       /* Small theme */
@@ -295,0 +219,0 @@

theme/lumo/vaadin-text-field.js

 import './vaadin-text-field-styles.js';
 import '../../src/vaadin-text-field.js';

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

@@ -0,0 +0,0 @@ import './vaadin-text-field-styles.js';

theme/material/vaadin-password-field.js

 import './vaadin-password-field-styles.js';
 import '../../src/vaadin-password-field.js';

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

@@ -0,0 +0,0 @@ import './vaadin-text-field-styles.js';

theme/material/vaadin-text-area.js

 import './vaadin-text-area-styles.js';
 import '../../src/vaadin-text-area.js';

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

 import '@vaadin/vaadin-material-styles/color.js';
 import '@vaadin/vaadin-material-styles/typography.js';
+import '@vaadin/vaadin-material-styles/mixins/required-field.js';
 const $_documentContainer = document.createElement('template');
@@ -7,3 +8,3 @@
   <template>
-    <style>
+    <style include="material-required-field">
       :host {
@@ -147,15 +148,2 @@ display: inline-flex;
       [part="label"] {
-        display: block;
-        position: absolute;
-        top: 8px;
-        font-size: 1em;
-        line-height: 1;
-        height: 20px;
-        margin-bottom: -4px;
-        white-space: nowrap;
-        overflow-x: hidden;
-        text-overflow: ellipsis;
-        color: var(--material-secondary-text-color);
-        transform-origin: 0 75%;
-        transform: scale(0.75);
         transition: transform 0.175s, color 0.175s, width 0.175s;
@@ -194,6 +182,2 @@ transition-timing-function: ease, ease, step-end;
 
-      :host([invalid]) [part="label"] {
-        color: var(--material-error-text-color);
-      }
-
       :host([invalid]) [part="input-field"]::after {
@@ -228,30 +212,2 @@ background-color: var(--material-error-color);
 
-      [part="error-message"] {
-        font-size: .75em;
-        line-height: 1;
-        color: var(--material-error-text-color);
-        margin-top: 6px;
-      }
-
-      :host(:not([invalid])) [part="error-message"] {
-        margin-top: 0;
-        max-height: 0;
-        overflow: hidden;
-      }
-
-      :host([invalid]) [part="error-message"] {
-        animation: reveal 0.2s;
-      }
-
-      @keyframes reveal {
-        0% {
-          opacity: 0;
-        }
-      }
-
-      :host([required]) [part="label"]::after {
-        content: " *";
-        color: inherit;
-      }
-
       /* Slotted content */
@@ -258,0 +214,0 @@

theme/material/vaadin-text-field.js

 import './vaadin-text-field-styles.js';
 import '../../src/vaadin-text-field.js';

vaadin-password-field.js

 import './theme/lumo/vaadin-password-field.js';

vaadin-text-area.js

 import './theme/lumo/vaadin-text-area.js';

vaadin-text-field.js

 import './theme/lumo/vaadin-text-field.js';

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

65259

decreased by-6.42%

Dev dependency count

9

increased by12.5%

Lines of code

1294

decreased by-7.04%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@vaadin/vaadin-lumo-styles@^1.2.0

• Updated@vaadin/vaadin-material-styles@^1.2.0