@vaadin/password-field 22.0.2 → 23.0.0-alpha4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/password-field",
-  "version": "22.0.2",
+  "version": "23.0.0-alpha4",
   "publishConfig": {
     "access": "public"
   },
@@ -18,6 +18,7 @@
   },
   "main": "vaadin-password-field.js",
   "module": "vaadin-password-field.js",
+  "type": "module",
   "files": [
     "src",
     "theme",
@@ -32,14 +33,15 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/text-field": "^22.0.2",
-    "@vaadin/vaadin-lumo-styles": "^22.0.2",
-    "@vaadin/vaadin-material-styles": "^22.0.2"
+    "@vaadin/button": "23.0.0-alpha4",
+    "@vaadin/text-field": "23.0.0-alpha4",
+    "@vaadin/vaadin-lumo-styles": "23.0.0-alpha4",
+    "@vaadin/vaadin-material-styles": "23.0.0-alpha4"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^9.2.1"
   },
-  "gitHead": "df21370c4a655a38eac11f79686021ab3b0887ad"
+  "gitHead": "81e2deee5147bb7c1f4884760f4598613306f1fb"
 }

package/src/vaadin-password-field-button.js

@@ -0,0 +1,35 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { html } from '@polymer/polymer/polymer-element.js';
+import { Button } from '@vaadin/button/src/vaadin-button.js';
+
+/**
+ * An element used internally by `<vaadin-password-field>`. Not intended to be used separately.
+ *
+ * @extends Button
+ * @private
+ */
+class PasswordFieldButton extends Button {
+  static get is() {
+    return 'vaadin-password-field-button';
+  }
+
+  static get template() {
+    return html`
+      <style>
+        :host {
+          display: block;
+        }
+
+        :host([hidden]) {
+          display: none !important;
+        }
+      </style>
+    `;
+  }
+}
+
+customElements.define(PasswordFieldButton.is, PasswordFieldButton);

package/src/vaadin-password-field.d.ts

@@ -1,11 +1,18 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { SlotStylesMixin } from '@vaadin/field-base/src/slot-styles-mixin.js';
 import { TextField } from '@vaadin/text-field/src/vaadin-text-field.js';
 
+/**
+ * Fired when the user commits a value change.
+ */
+export type PasswordFieldChangeEvent = Event & {
+  target: PasswordField;
+};
+
 /**
  * Fired when the `invalid` property changes.
  */
@@ -22,7 +29,9 @@ export interface PasswordFieldCustomEventMap {
   'value-changed': PasswordFieldValueChangedEvent;
 }
 
-export interface PasswordFieldEventMap extends HTMLElementEventMap, PasswordFieldCustomEventMap {}
+export interface PasswordFieldEventMap extends HTMLElementEventMap, PasswordFieldCustomEventMap {
+  change: PasswordFieldChangeEvent;
+}
 
 /**
  * `<vaadin-password-field>` is an extension of `<vaadin-text-field>` component for entering passwords.

package/src/vaadin-password-field.js

@@ -1,8 +1,9 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import './vaadin-password-field-button.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { SlotStylesMixin } from '@vaadin/field-base/src/slot-styles-mixin.js';
 import { TextField } from '@vaadin/text-field/src/vaadin-text-field.js';
@@ -125,8 +126,7 @@ export class PasswordField extends SlotStylesMixin(TextField) {
     return {
       ...super.slots,
       reveal: () => {
-        const btn = document.createElement('button');
-        btn.setAttribute('type', 'button');
+        const btn = document.createElement('vaadin-password-field-button');
         btn.disabled = this.disabled;
         return btn;
       }
@@ -170,7 +170,6 @@ export class PasswordField extends SlotStylesMixin(TextField) {
 
     if (this._revealNode) {
       this.__updateAriaLabel(this.i18n);
-      this._revealNode.setAttribute('aria-label', 'Show password');
       this._revealNode.addEventListener('click', this.__boundRevealButtonClick);
       this._revealNode.addEventListener('touchend', this.__boundRevealButtonTouchend);
     }

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

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { button } from '@vaadin/button/theme/lumo/vaadin-button-styles.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+const passwordFieldButton = css`
+  :host {
+    position: absolute;
+    right: 0;
+    top: 0;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    min-width: auto;
+    background: transparent;
+    outline: none;
+  }
+`;
+
+registerStyles('vaadin-password-field-button', [button, passwordFieldButton], {
+  moduleId: 'lumo-password-field-button'
+});

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '@vaadin/vaadin-lumo-styles/font-icons.js';
@@ -27,23 +27,6 @@ const passwordField = css`
   [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']: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' });

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

@@ -1,8 +1,9 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '@vaadin/text-field/theme/lumo/vaadin-text-field.js';
+import './vaadin-password-field-button-styles.js';
 import './vaadin-password-field-styles.js';
 import '../../src/vaadin-password-field.js';

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

@@ -0,0 +1,37 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { button } from '@vaadin/button/theme/material/vaadin-button-styles.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+const passwordFieldButton = css`
+  :host {
+    position: absolute;
+    right: 0;
+    top: 0;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    min-width: auto;
+    background: transparent;
+    outline: none;
+    border-radius: 50%;
+    overflow: visible;
+  }
+
+  :host::before {
+    transform: scale(1.5);
+  }
+
+  /* Disable ripple */
+  :host::after {
+    display: none;
+  }
+`;
+
+registerStyles('vaadin-password-field-button', [button, passwordFieldButton], {
+  moduleId: 'material-password-field-button'
+});

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '@vaadin/vaadin-material-styles/color.js';
@@ -35,53 +35,9 @@ const passwordField = css`
     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'])::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);
   }
-
-  ::slotted([slot='reveal']:hover)::before {
-    opacity: 0.08;
-  }
-
-  ::slotted([slot='reveal']:focus)::before {
-    opacity: 0.12;
-  }
-
-  ::slotted([slot='reveal']:active)::before {
-    opacity: 0.16;
-  }
-
-  ::slotted([slot='reveal']:hover)::before,
-  ::slotted([slot='reveal']:focus)::before {
-    transform: scale(1.5);
-  }
 `;
 
 registerStyles('vaadin-password-field', [inputFieldShared, passwordField], { moduleId: 'material-password-field' });

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

@@ -1,8 +1,9 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '@vaadin/text-field/theme/material/vaadin-text-field.js';
+import './vaadin-password-field-button-styles.js';
 import './vaadin-password-field-styles.js';
 import '../../src/vaadin-password-field.js';