@vaadin/password-field 24.3.2 → 24.4.0-dev.223e39f050

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/password-field",
-  "version": "24.3.2",
+  "version": "24.4.0-dev.223e39f050",
   "publishConfig": {
     "access": "public"
   },
@@ -34,13 +34,16 @@
     "web-component"
   ],
   "dependencies": {
+    "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/button": "~24.3.2",
-    "@vaadin/component-base": "~24.3.2",
-    "@vaadin/text-field": "~24.3.2",
-    "@vaadin/vaadin-lumo-styles": "~24.3.2",
-    "@vaadin/vaadin-material-styles": "~24.3.2",
-    "@vaadin/vaadin-themable-mixin": "~24.3.2"
+    "@vaadin/a11y-base": "24.4.0-dev.223e39f050",
+    "@vaadin/button": "24.4.0-dev.223e39f050",
+    "@vaadin/component-base": "24.4.0-dev.223e39f050",
+    "@vaadin/field-base": "24.4.0-dev.223e39f050",
+    "@vaadin/text-field": "24.4.0-dev.223e39f050",
+    "@vaadin/vaadin-lumo-styles": "24.4.0-dev.223e39f050",
+    "@vaadin/vaadin-material-styles": "24.4.0-dev.223e39f050",
+    "@vaadin/vaadin-themable-mixin": "24.4.0-dev.223e39f050"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
@@ -51,5 +54,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "615ee9dd4611f52db90445b0db13dcbb91ca74d4"
+  "gitHead": "5e2e3bfc811c95aed9354235fab93fdbf43eb354"
 }

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

@@ -3,35 +3,32 @@
  * Copyright (c) 2021 - 2023 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';
+import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { buttonStyles } from '@vaadin/button/src/vaadin-button-base.js';
+import { ButtonMixin } from '@vaadin/button/src/vaadin-button-mixin.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+registerStyles('vaadin-password-field-button', buttonStyles, { moduleId: 'vaadin-password-field-button-styles' });
 
 /**
  * An element used internally by `<vaadin-password-field>`. Not intended to be used separately.
  *
  * @customElement
- * @extends Button
+ * @extends HTMLElement
+ * @mixes ButtonMixin
+ * @mixes DirMixin
+ * @mixes ThemableMixin
  * @private
  */
-class PasswordFieldButton extends Button {
+class PasswordFieldButton extends ButtonMixin(DirMixin(ThemableMixin(PolymerElement))) {
   static get is() {
     return 'vaadin-password-field-button';
   }
 
   static get template() {
-    return html`
-      <style>
-        :host {
-          display: block;
-        }
-
-        :host([hidden]) {
-          display: none !important;
-        }
-      </style>
-      <slot name="tooltip"></slot>
-    `;
+    return html``;
   }
 }
 

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

@@ -0,0 +1,46 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { DisabledMixinClass } from '@vaadin/a11y-base/src/disabled-mixin.js';
+import type { FocusMixinClass } from '@vaadin/a11y-base/src/focus-mixin.js';
+import type { SlotStylesMixinClass } from '@vaadin/component-base/src/slot-styles-mixin.js';
+import type { InputMixinClass } from '@vaadin/field-base/src/input-mixin.js';
+
+export declare function PasswordFieldMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<DisabledMixinClass> &
+  Constructor<FocusMixinClass> &
+  Constructor<InputMixinClass> &
+  Constructor<PasswordFieldMixinClass> &
+  Constructor<SlotStylesMixinClass> &
+  T;
+
+export declare class PasswordFieldMixinClass {
+  /**
+   * Set to true to hide the eye icon which toggles the password visibility.
+   * @attr {boolean} reveal-button-hidden
+   */
+  revealButtonHidden: boolean;
+
+  /**
+   * True if the password is visible ([type=text]).
+   * @attr {boolean} password-visible
+   */
+  readonly passwordVisible: boolean;
+
+  /**
+   * An object with translated strings used for localization.
+   * It has the following structure and default values:
+   *
+   * ```
+   * {
+   *   // Translation of the reveal icon button accessible label
+   *   reveal: 'Show password'
+   * }
+   * ```
+   */
+  i18n: { reveal: string };
+}

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

@@ -0,0 +1,265 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { DisabledMixin } from '@vaadin/a11y-base/src/disabled-mixin.js';
+import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
+import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
+import { SlotStylesMixin } from '@vaadin/component-base/src/slot-styles-mixin.js';
+import { InputMixin } from '@vaadin/field-base/src/input-mixin.js';
+
+/**
+ * @polymerMixin
+ * @mixes DisabledMixin
+ * @mixes FocusMixin
+ * @mixes InputMixin
+ * @mixes SlotStylesMixin
+ */
+export const PasswordFieldMixin = (superClass) =>
+  class PasswordFieldMixinClass extends SlotStylesMixin(DisabledMixin(FocusMixin(InputMixin(superClass)))) {
+    static get properties() {
+      return {
+        /**
+         * Set to true to hide the eye icon which toggles the password visibility.
+         * @attr {boolean} reveal-button-hidden
+         */
+        revealButtonHidden: {
+          type: Boolean,
+          observer: '_revealButtonHiddenChanged',
+          value: false,
+        },
+
+        /**
+         * True if the password is visible ([type=text]).
+         * @attr {boolean} password-visible
+         */
+        passwordVisible: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true,
+          observer: '_passwordVisibleChanged',
+          readOnly: true,
+        },
+
+        /**
+         * An object with translated strings used for localization.
+         * It has the following structure and default values:
+         *
+         * ```
+         * {
+         *   // Translation of the reveal icon button accessible label
+         *   reveal: 'Show password'
+         * }
+         * ```
+         */
+        i18n: {
+          type: Object,
+          value: () => {
+            return {
+              reveal: 'Show password',
+            };
+          },
+        },
+      };
+    }
+
+    static get observers() {
+      return ['__i18nChanged(i18n.*)'];
+    }
+
+    constructor() {
+      super();
+      this._setType('password');
+      this.__boundRevealButtonClick = this._onRevealButtonClick.bind(this);
+      this.__boundRevealButtonMouseDown = this._onRevealButtonMouseDown.bind(this);
+      this.__lastChange = '';
+    }
+
+    /** @protected */
+    get slotStyles() {
+      const tag = this.localName;
+      return [
+        ...super.slotStyles,
+        `
+          ${tag} [slot="input"]::-ms-reveal {
+            display: none;
+          }
+        `,
+      ];
+    }
+
+    /** @protected */
+    get _revealNode() {
+      return this._revealButtonController && this._revealButtonController.node;
+    }
+
+    /** @protected */
+    ready() {
+      super.ready();
+
+      this._revealPart = this.shadowRoot.querySelector('[part="reveal-button"]');
+
+      this._revealButtonController = new SlotController(this, 'reveal', 'vaadin-password-field-button', {
+        initializer: (btn) => {
+          btn.disabled = this.disabled;
+
+          btn.addEventListener('click', this.__boundRevealButtonClick);
+          btn.addEventListener('mousedown', this.__boundRevealButtonMouseDown);
+        },
+      });
+      this.addController(this._revealButtonController);
+
+      this.__updateAriaLabel(this.i18n);
+
+      this._updateToggleState(false);
+      this._toggleRevealHidden(this.revealButtonHidden);
+
+      if (this.inputElement) {
+        this.inputElement.autocapitalize = 'off';
+      }
+    }
+
+    /**
+     * Override an event listener inherited from `InputControlMixin`
+     * to store the value at the moment of the native `change` event.
+     * @param {Event} event
+     * @protected
+     * @override
+     */
+    _onChange(event) {
+      super._onChange(event);
+
+      this.__lastChange = this.inputElement.value;
+    }
+
+    /**
+     * Override method inherited from `FocusMixin` to mark field as focused
+     * when focus moves to the reveal button using Shift Tab.
+     * @param {Event} event
+     * @return {boolean}
+     * @protected
+     */
+    _shouldSetFocus(event) {
+      return event.target === this.inputElement || event.target === this._revealNode;
+    }
+
+    /**
+     * Override method inherited from `FocusMixin` to not hide password
+     * when focus moves to the reveal button or back to the input.
+     * @param {Event} event
+     * @return {boolean}
+     * @protected
+     */
+    _shouldRemoveFocus(event) {
+      return !(
+        event.relatedTarget === this._revealNode ||
+        (event.relatedTarget === this.inputElement && event.target === this._revealNode)
+      );
+    }
+
+    /**
+     * Override method inherited from `FocusMixin` to toggle password visibility.
+     * @param {boolean} focused
+     * @protected
+     * @override
+     */
+    _setFocused(focused) {
+      super._setFocused(focused);
+
+      if (!focused) {
+        this._setPasswordVisible(false);
+
+        // Detect if `focusout` was prevented and if so, dispatch `change` event manually.
+        if (this.__lastChange !== this.inputElement.value) {
+          this.__lastChange = this.inputElement.value;
+          this.dispatchEvent(new CustomEvent('change', { bubbles: true }));
+        }
+      } else {
+        const isButtonFocused = this.getRootNode().activeElement === this._revealNode;
+        // Remove focus-ring from the field when the reveal button gets focused
+        this.toggleAttribute('focus-ring', this._keyboardActive && !isButtonFocused);
+      }
+    }
+
+    /** @private */
+    __updateAriaLabel(i18n) {
+      if (i18n.reveal && this._revealNode) {
+        this._revealNode.setAttribute('aria-label', i18n.reveal);
+      }
+    }
+
+    /** @private */
+    __i18nChanged(i18n) {
+      this.__updateAriaLabel(i18n.base);
+    }
+
+    /** @private */
+    _revealButtonHiddenChanged(hidden) {
+      this._toggleRevealHidden(hidden);
+    }
+
+    /** @private */
+    _togglePasswordVisibility() {
+      this._setPasswordVisible(!this.passwordVisible);
+    }
+
+    /** @private */
+    _onRevealButtonClick() {
+      this._togglePasswordVisibility();
+    }
+
+    /** @private */
+    _onRevealButtonMouseDown(e) {
+      // Cancel the following focusout event
+      e.preventDefault();
+
+      // Focus the input to avoid problem with password still visible
+      // when user clicks the reveal button and then clicks outside.
+      this.inputElement.focus();
+    }
+
+    /** @private */
+    _toggleRevealHidden(hidden) {
+      if (this._revealNode) {
+        if (hidden) {
+          this._revealPart.setAttribute('hidden', '');
+          this._revealNode.setAttribute('tabindex', '-1');
+          this._revealNode.setAttribute('aria-hidden', 'true');
+        } else {
+          this._revealPart.removeAttribute('hidden');
+          this._revealNode.setAttribute('tabindex', '0');
+          this._revealNode.removeAttribute('aria-hidden');
+        }
+      }
+    }
+
+    /** @private */
+    _updateToggleState(passwordVisible) {
+      if (this._revealNode) {
+        this._revealNode.setAttribute('aria-pressed', passwordVisible ? 'true' : 'false');
+      }
+    }
+
+    /** @private */
+    _passwordVisibleChanged(passwordVisible) {
+      this._setType(passwordVisible ? 'text' : 'password');
+
+      this._updateToggleState(passwordVisible);
+    }
+
+    /**
+     * Override method inherited from `DisabledMixin` to synchronize the reveal button
+     * disabled state with the password field disabled state.
+     * @param {boolean} disabled
+     * @param {boolean} oldDisabled
+     * @protected
+     */
+    _disabledChanged(disabled, oldDisabled) {
+      super._disabledChanged(disabled, oldDisabled);
+
+      if (this._revealNode) {
+        this._revealNode.disabled = disabled;
+      }
+    }
+  };

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

@@ -4,6 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { TextField } from '@vaadin/text-field/src/vaadin-text-field.js';
+import { PasswordFieldMixin } from './vaadin-password-field-mixin.js';
 
 /**
  * Fired when the user commits a value change.
@@ -71,32 +72,7 @@ export interface PasswordFieldEventMap extends HTMLElementEventMap, PasswordFiel
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  * @fires {CustomEvent} validated - Fired whenever the field is validated.
  */
-declare class PasswordField extends TextField {
-  /**
-   * Set to true to hide the eye icon which toggles the password visibility.
-   * @attr {boolean} reveal-button-hidden
-   */
-  revealButtonHidden: boolean;
-
-  /**
-   * True if the password is visible ([type=text]).
-   * @attr {boolean} password-visible
-   */
-  readonly passwordVisible: boolean;
-
-  /**
-   * An object with translated strings used for localization.
-   * It has the following structure and default values:
-   *
-   * ```
-   * {
-   *   // Translation of the reveal icon button accessible label
-   *   reveal: 'Show password'
-   * }
-   * ```
-   */
-  i18n: { reveal: string };
-
+declare class PasswordField extends PasswordFieldMixin(TextField) {
   addEventListener<K extends keyof PasswordFieldEventMap>(
     type: K,
     listener: (this: PasswordField, ev: PasswordFieldEventMap[K]) => void,