@vaadin/password-field - npm Package Compare versions

Comparing version 22.0.0-alpha4 to 22.0.0-alpha5

package.json

 {
   "name": "@vaadin/password-field",
-  "version": "22.0.0-alpha4",
+  "version": "22.0.0-alpha5",
   "description": "vaadin-password-field",
@@ -28,5 +28,5 @@ "main": "vaadin-password-field.js",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/text-field": "^22.0.0-alpha4",
-    "@vaadin/vaadin-lumo-styles": "^22.0.0-alpha4",
-    "@vaadin/vaadin-material-styles": "^22.0.0-alpha4"
+    "@vaadin/text-field": "^22.0.0-alpha5",
+    "@vaadin/vaadin-lumo-styles": "^22.0.0-alpha5",
+    "@vaadin/vaadin-material-styles": "^22.0.0-alpha5"
   },
@@ -41,3 +41,3 @@ "devDependencies": {
   },
-  "gitHead": "86c025abd605d5a4a3c0ae36eb07c34704cee1f2"
+  "gitHead": "012f658db6f81375be8889f63ee15e3f660fe9ec"
 }

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

@@ -10,43 +10,41 @@ /**
 import '@vaadin/vaadin-lumo-styles/style.js';
-import '@vaadin/text-field/theme/lumo/vaadin-input-field-shared-styles.js';
+import { inputFieldShared } from '@vaadin/text-field/theme/lumo/vaadin-input-field-shared-styles.js';
 
-registerStyles(
-  'vaadin-password-field',
-  css`
-    [part='reveal-button']::before {
-      content: var(--lumo-icons-eye);
-    }
+const passwordField = css`
+  [part='reveal-button']::before {
+    content: var(--lumo-icons-eye);
+  }
 
-    :host([password-visible]) [part='reveal-button']::before {
-      content: var(--lumo-icons-eye-disabled);
-    }
+  :host([password-visible]) [part='reveal-button']::before {
+    content: var(--lumo-icons-eye-disabled);
+  }
 
-    /* Make it easy to hide the button across the whole app */
-    [part='reveal-button'] {
-      position: relative;
-      display: var(--lumo-password-field-reveal-button-display, block);
-    }
+  /* Make it easy to hide the button across the whole app */
+  [part='reveal-button'] {
+    position: relative;
+    display: var(--lumo-password-field-reveal-button-display, block);
+  }
 
-    [part='reveal-button'][hidden] {
-      display: none !important;
-    }
+  [part='reveal-button'][hidden] {
+    display: none !important;
+  }
 
-    ::slotted([slot='reveal']) {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      width: 100%;
-      background: transparent;
-      border: none;
-    }
+  ::slotted([slot='reveal']) {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    background: transparent;
+    border: none;
+  }
 
-    ::slotted([slot='reveal']:focus) {
-      border-radius: var(--lumo-border-radius-s);
-      box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);
-      outline: none;
-    }
-  `,
-  { moduleId: 'lumo-password-field', include: ['lumo-input-field-shared-styles'] }
-);
+  ::slotted([slot='reveal']:focus) {
+    border-radius: var(--lumo-border-radius-s);
+    box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);
+    outline: none;
+  }
+`;
+
+registerStyles('vaadin-password-field', [inputFieldShared, passwordField], { moduleId: 'lumo-password-field' });

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

@@ -9,82 +9,80 @@ /**
 import '@vaadin/vaadin-material-styles/font-icons.js';
-import '@vaadin/text-field/theme/material/vaadin-input-field-shared-styles.js';
+import { inputFieldShared } from '@vaadin/text-field/theme/material/vaadin-input-field-shared-styles.js';
 
-registerStyles(
-  'vaadin-password-field',
-  css`
-    [part='reveal-button']::before {
-      content: var(--material-icons-eye);
-    }
+const passwordField = css`
+  [part='reveal-button']::before {
+    content: var(--material-icons-eye);
+  }
 
-    :host([password-visible]) [part='reveal-button']::before {
-      content: var(--material-icons-eye-disabled);
-    }
+  :host([password-visible]) [part='reveal-button']::before {
+    content: var(--material-icons-eye-disabled);
+  }
 
-    /* The reveal button works also in readonly mode */
-    :host([readonly]) [part$='button'] {
-      color: var(--material-secondary-text-color);
-    }
+  /* The reveal button works also in readonly mode */
+  :host([readonly]) [part$='button'] {
+    color: var(--material-secondary-text-color);
+  }
 
-    [part='reveal-button'] {
-      position: relative;
-      cursor: pointer;
-    }
+  [part='reveal-button'] {
+    position: relative;
+    cursor: pointer;
+  }
 
-    [part='reveal-button']:hover {
-      color: var(--material-text-color);
-    }
+  [part='reveal-button']:hover {
+    color: var(--material-text-color);
+  }
 
-    [part='reveal-button'][hidden] {
-      display: none !important;
-    }
+  [part='reveal-button'][hidden] {
+    display: none !important;
+  }
 
-    ::slotted([slot='reveal']) {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      width: 100%;
-      background: transparent;
-      border: none;
-      outline: none;
-    }
+  ::slotted([slot='reveal']) {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    background: transparent;
+    border: none;
+    outline: none;
+  }
 
-    ::slotted([slot='reveal'])::before {
-      position: absolute;
-      content: '';
-      top: 0;
-      left: 0;
-      width: 32px;
-      height: 32px;
-      border-radius: 50%;
-      background-color: var(--material-body-text-color);
-      transform: scale(0);
-      opacity: 0;
-      transition: transform 0.08s, opacity 0.01s;
-      will-change: transform, opacity;
-    }
+  ::slotted([slot='reveal'])::before {
+    position: absolute;
+    content: '';
+    top: 0;
+    left: 0;
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    background-color: var(--material-body-text-color);
+    transform: scale(0);
+    opacity: 0;
+    transition: transform 0.08s, opacity 0.01s;
+    will-change: transform, opacity;
+  }
 
-    :host([focused]) ::slotted([slot='reveal'])::before {
-      background-color: var(--material-primary-text-color);
-    }
+  :host([focused]) ::slotted([slot='reveal'])::before {
+    background-color: var(--material-primary-text-color);
+  }
 
-    ::slotted([slot='reveal']:hover)::before {
-      opacity: 0.08;
-    }
+  ::slotted([slot='reveal']:hover)::before {
+    opacity: 0.08;
+  }
 
-    ::slotted([slot='reveal']:focus)::before {
-      opacity: 0.12;
-    }
+  ::slotted([slot='reveal']:focus)::before {
+    opacity: 0.12;
+  }
 
-    ::slotted([slot='reveal']:active)::before {
-      opacity: 0.16;
-    }
+  ::slotted([slot='reveal']:active)::before {
+    opacity: 0.16;
+  }
 
-    ::slotted([slot='reveal']:hover)::before,
-    ::slotted([slot='reveal']:focus)::before {
-      transform: scale(1.5);
-    }
-  `,
-  { moduleId: 'material-password-field', include: ['material-input-field-shared-styles'] }
-);
+  ::slotted([slot='reveal']:hover)::before,
+  ::slotted([slot='reveal']:focus)::before {
+    transform: scale(1.5);
+  }
+`;
+
+registerStyles('vaadin-password-field', [inputFieldShared, passwordField], { moduleId: 'material-password-field' });

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

Worsened metrics

Total package byte prevSize

28928

decreased by-0.43%

Lines of code

470

decreased by-1.26%

Dependency changes

• Updated@vaadin/text-field@^22.0.0-alpha5

• Updated@vaadin/vaadin-lumo-styles@^22.0.0-alpha5

• Updated@vaadin/vaadin-material-styles@^22.0.0-alpha5