@vaadin/vaadin-login - npm Package Compare versions

Comparing version 1.0.1 to 1.1.0-alpha1

package.json

@@ -13,3 +13,3 @@ {
   "name": "@vaadin/vaadin-login",
-  "version": "1.0.1",
+  "version": "1.1.0-alpha1",
   "main": "vaadin-login-overlay.js",
@@ -34,17 +34,17 @@ "author": "Vaadin Ltd",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/vaadin-themable-mixin": "^1.4.1",
-    "@vaadin/vaadin-element-mixin": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "^1.3.0",
-    "@vaadin/vaadin-material-styles": "^1.2.0",
-    "@vaadin/vaadin-text-field": "^2.3.0",
-    "@vaadin/vaadin-button": "^2.1.0",
-    "@vaadin/vaadin-overlay": "^3.2.1"
+    "@vaadin/vaadin-themable-mixin": "^1.5.2",
+    "@vaadin/vaadin-element-mixin": "^2.3.1",
+    "@vaadin/vaadin-lumo-styles": "^1.6.0",
+    "@vaadin/vaadin-material-styles": "^1.3.2",
+    "@vaadin/vaadin-text-field": "^2.6.0-alpha4",
+    "@vaadin/vaadin-button": "^2.3.0-alpha1",
+    "@vaadin/vaadin-overlay": "^3.4.0"
   },
   "devDependencies": {
-    "@polymer/iron-component-page": "^3.0.0-pre.18",
-    "@polymer/iron-demo-helpers": "^3.0.0-pre.18",
+    "@polymer/iron-component-page": "^4.0.0",
+    "@polymer/iron-demo-helpers": "^3.0.0",
     "@webcomponents/webcomponentsjs": "^2.0.0",
     "wct-browser-legacy": "^1.0.1",
-    "@polymer/iron-test-helpers": "^3.0.0-pre.18",
-    "@vaadin/vaadin-demo-helpers": "^2.0.0",
+    "@polymer/iron-test-helpers": "^3.0.0",
+    "@vaadin/vaadin-demo-helpers": "^3.0.0",
     "@vaadin/vaadin-icons": "^4.2.1",
@@ -51,0 +51,0 @@ "@vaadin/vaadin-dialog": "^2.2.0"

src/vaadin-login-form.js

@@ -61,3 +61,3 @@ import './vaadin-login-form-wrapper.js';
   static get version() {
-    return '1.0.1';
+    return '1.1.0-alpha1';
   }
@@ -64,0 +64,0 @@

theme/lumo/vaadin-login-form-wrapper-styles.js

@@ -29,3 +29,2 @@ import '@vaadin/vaadin-lumo-styles/color.js';
         padding: var(--lumo-space-m);
-        padding-left: var(--lumo-size-m);
         border-radius: var(--lumo-border-radius);
@@ -37,2 +36,10 @@ margin-top: var(--lumo-space-m);
 
+      :host(:not([dir="rtl"])) [part="error-message"] {
+        padding-left: var(--lumo-size-m);
+      }
+
+      :host([dir="rtl"]) [part="error-message"] {
+        padding-right: var(--lumo-size-m);
+      }
+
       [part="error-message"]::before {
@@ -47,2 +54,5 @@ content: var(--lumo-icons-error);
         text-align: center;
+      }
+
+      :host(:not([dir="rtl"])) [part="error-message"]::before {
         /* Visual centering */
@@ -52,2 +62,7 @@ margin-left: calc(var(--lumo-size-m) * -0.95);
 
+      :host([dir="rtl"]) [part="error-message"]::before {
+        /* Visual centering */
+        margin-right: calc(var(--lumo-size-m) * -0.95);
+      }
+
       [part="error-message-title"] {
@@ -54,0 +69,0 @@ margin: 0 0 0.25em;

theme/lumo/vaadin-login-overlay-styles.js

@@ -34,10 +34,2 @@ import '@vaadin/vaadin-lumo-styles/color.js';
 
-      @media only screen
-      and (max-width: 500px) {
-        [part="overlay"],
-        [part="content"] {
-          height: 100%;
-        }
-      }
-
       [part="card"] {
@@ -78,3 +70,8 @@ width: calc(var(--lumo-size-m) * 10);
       and (max-width: 500px) {
+        [part="overlay"],
         [part="content"] {
+          height: 100%;
+        }
+
+        [part="content"] {
           min-height: 100%;
@@ -92,2 +89,7 @@ background: var(--lumo-base-color);
         }
+
+        /* RTL styles */
+        :host([dir="rtl"]) [part="brand"] {
+          padding: var(--lumo-space-l) var(--lumo-space-l) var(--lumo-space-l) var(--lumo-space-xl);
+        }
       }
@@ -160,12 +162,31 @@
         [part="card"] {
-          padding: 0 constant(safe-area-inset-bottom);
-          padding: 0 env(safe-area-inset-bottom);
+          padding-right: constant(safe-area-inset-right);
+          padding-right: env(safe-area-inset-right);
+
+          padding-left: constant(safe-area-inset-left);
+          padding-left: env(safe-area-inset-left);
         }
 
         [part="brand"] {
-          margin-left: calc(constant(safe-area-inset-bottom) * -1);
-          margin-left: calc(env(safe-area-inset-bottom) * -1);
-          padding-left: calc(var(--lumo-space-l) + constant(safe-area-inset-bottom));
-          padding-left: calc(var(--lumo-space-l) + env(safe-area-inset-bottom));
+          margin-left: calc(constant(safe-area-inset-left) * -1);
+          margin-left: calc(env(safe-area-inset-left) * -1);
+
+          padding-left: calc(var(--lumo-space-l) + constant(safe-area-inset-left));
+          padding-left: calc(var(--lumo-space-l) + env(safe-area-inset-left));
         }
+
+        /* RTL styles */
+        :host([dir="rtl"]) [part="card"] {
+          padding-left: constant(safe-area-inset-right);
+          padding-left: env(safe-area-inset-right);
+          padding-right: constant(safe-area-inset-left);
+          padding-right: env(safe-area-inset-left);
+        }
+
+        :host([dir="rtl"]) [part="brand"] {
+          margin-right: calc(constant(safe-area-inset-left) * -1);
+          margin-right: calc(env(safe-area-inset-left) * -1);
+          padding-right: calc(var(--lumo-space-l) + constant(safe-area-inset-left));
+          padding-right: calc(var(--lumo-space-l) + env(safe-area-inset-left));
+        }
       }
@@ -172,0 +193,0 @@ </style>

theme/material/vaadin-login-form-wrapper-styles.js

@@ -35,3 +35,2 @@ import { html } from '@polymer/polymer/lib/utils/html-tag.js';
         padding: 1rem;
-        padding-left: 2.25rem;
         border-radius: 0.25em;
@@ -43,2 +42,10 @@ margin-top: 1rem;
 
+      :host(:not([dir="rtl"])) [part="error-message"] {
+        padding-left: 2.25rem;
+      }
+
+      :host([dir="rtl"]) [part="error-message"] {
+        padding-right: 2.25rem;
+      }
+
       [part="error-message"]::before {
@@ -53,2 +60,5 @@ content: "!";
         text-align: center;
+      }
+
+      :host(:not([dir="rtl"])) [part="error-message"]::before {
         /* Visual centering */
@@ -58,2 +68,7 @@ margin-left: calc(2.25rem * -0.95);
 
+      :host([dir="rtl"]) [part="error-message"]::before {
+        /* Visual centering */
+        margin-right: calc(2.25rem * -0.95);
+      }
+
       [part="error-message"] h5 {
@@ -60,0 +75,0 @@ margin: 0 0 0.25em;

theme/material/vaadin-login-overlay-styles.js

@@ -85,2 +85,7 @@ import '@vaadin/vaadin-material-styles/typography.js';
 
+      /* RTL styles */
+      :host([dir="rtl"]) [part="brand"] {
+        padding: 2.8rem 3.5rem 1.5rem 2.5rem;
+      }
+
       /* Small screen */
@@ -105,2 +110,7 @@ @media only screen
         }
+
+        /* RTL styles */
+        :host([dir="rtl"]) [part="brand"] {
+          padding: 0 2rem 5.5rem 2.5rem;
+        }
       }
@@ -227,2 +237,11 @@
         }
+
+        /* RTL styles */
+        :host([dir="rtl"]) [part="brand"] {
+          padding: 1.5rem 1.5rem 1.5rem 2.5rem;
+        }
+
+        :host([dir="rtl"]) [part="form"] {
+          margin: 80px -20px 40px 30px;
+        }
       }
@@ -249,9 +268,26 @@
           height: 100%;
-          margin-right: 22px;
           -webkit-overflow-scrolling: touch;
         }
 
-        [part="form"] ::slotted(*) {
+        :host(:not([dir="rtl"])) [part="form"] {
+          margin-right: 22px;
+        }
+
+        :host(:not([dir="rtl"])) [part="form"] ::slotted(*) {
           right: 80px;
         }
+
+        /* RTL styles */
+        :host([dir="rtl"]) [part="brand"] {
+          padding-right: 4rem;
+          padding-left: 1rem;
+        }
+
+        :host([dir="rtl"]) [part="form"] {
+          margin-left: 22px;
+        }
+
+        :host([dir="rtl"]) [part="form"]::slotted(*) {
+          left: 80px;
+        }
       }
@@ -269,3 +305,3 @@
 
-        [part="brand"] {
+        :host(:not([dir="rtl"])) [part="brand"] {
           margin-left: calc(constant(safe-area-inset-bottom) * -1);
@@ -275,2 +311,9 @@ margin-left: calc(env(safe-area-inset-bottom) * -1);
         }
+
+        /* RTL styles */
+        :host([dir="rtl"]) [part="brand"] {
+          margin-right: calc(constant(safe-area-inset-bottom) * -1);
+          margin-right: calc(env(safe-area-inset-bottom) * -1);
+          padding-right: calc(1.5rem + constant(safe-area-inset-bottom));
+        }
       }
@@ -324,2 +367,7 @@ </style>
       }
+
+      /* RTL styles */
+      :host([dir="rtl"][theme~="with-overlay"]) [part="form"] {
+        padding: 2rem 1.8rem 2rem 2.5rem;
+      }
     </style>
@@ -326,0 +374,0 @@ </template>

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

61551

increased by5.04%

Lines of code

1346

increased by5.98%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@vaadin/vaadin-button@^2.3.0-alpha1

• Updated@vaadin/vaadin-element-mixin@^2.3.1

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

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

• Updated@vaadin/vaadin-overlay@^3.4.0

• Updated@vaadin/vaadin-text-field@^2.6.0-alpha4

• Updated@vaadin/vaadin-themable-mixin@^1.5.2