@vaadin/password-field 25.0.0-alpha17 → 25.0.0-alpha19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/password-field",
-  "version": "25.0.0-alpha17",
+  "version": "25.0.0-alpha19",
   "publishConfig": {
     "access": "public"
   },
@@ -34,24 +34,24 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.0.0-alpha17",
-    "@vaadin/button": "25.0.0-alpha17",
-    "@vaadin/component-base": "25.0.0-alpha17",
-    "@vaadin/field-base": "25.0.0-alpha17",
-    "@vaadin/text-field": "25.0.0-alpha17",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha17",
+    "@vaadin/a11y-base": "25.0.0-alpha19",
+    "@vaadin/button": "25.0.0-alpha19",
+    "@vaadin/component-base": "25.0.0-alpha19",
+    "@vaadin/field-base": "25.0.0-alpha19",
+    "@vaadin/text-field": "25.0.0-alpha19",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha19",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha17",
-    "@vaadin/test-runner-commands": "25.0.0-alpha17",
+    "@vaadin/chai-plugins": "25.0.0-alpha19",
+    "@vaadin/test-runner-commands": "25.0.0-alpha19",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha17",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha19",
     "sinon": "^21.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "8264c71309907be99368b09414f0f8d7f591e0b9"
+  "gitHead": "1f9af1ce5f0bae8daff044176c8a8df697763881"
 }

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

@@ -35,7 +35,7 @@ export declare class PasswordFieldMixinClass {
    * An object with translated strings used for localization.
    * It has the following structure and default values:
    *
-   * ```
+   * ```js
    * {
    *   // Translation of the reveal icon button accessible label
    *   reveal: 'Show password'

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

@@ -26,7 +26,6 @@ export const PasswordFieldMixin = (superClass) =>
          */
         revealButtonHidden: {
           type: Boolean,
-          observer: '_revealButtonHiddenChanged',
           value: false,
         },
 
@@ -38,7 +37,6 @@ export const PasswordFieldMixin = (superClass) =>
           type: Boolean,
           value: false,
           reflectToAttribute: true,
-          observer: '_passwordVisibleChanged',
           readOnly: true,
         },
 
@@ -46,7 +44,7 @@ export const PasswordFieldMixin = (superClass) =>
          * An object with translated strings used for localization.
          * It has the following structure and default values:
          *
-         * ```
+         * ```js
          * {
          *   // Translation of the reveal icon button accessible label
          *   reveal: 'Show password'
@@ -64,10 +62,6 @@ export const PasswordFieldMixin = (superClass) =>
       };
     }
 
-    static get observers() {
-      return ['__i18nChanged(i18n)'];
-    }
-
     /** @override */
     static get delegateAttrs() {
       // Do not delegate autocapitalize as it should be always set to "off"
@@ -95,11 +89,6 @@ export const PasswordFieldMixin = (superClass) =>
       ];
     }
 
-    /** @protected */
-    get _revealNode() {
-      return this._revealButtonController && this._revealButtonController.node;
-    }
-
     /** @protected */
     ready() {
       super.ready();
@@ -108,7 +97,7 @@ export const PasswordFieldMixin = (superClass) =>
 
       this._revealButtonController = new SlotController(this, 'reveal', 'vaadin-password-field-button', {
         initializer: (btn) => {
-          btn.disabled = this.disabled;
+          this._revealNode = btn;
 
           btn.addEventListener('click', this.__boundRevealButtonClick);
           btn.addEventListener('mousedown', this.__boundRevealButtonMouseDown);
@@ -116,16 +105,33 @@ export const PasswordFieldMixin = (superClass) =>
       });
       this.addController(this._revealButtonController);
 
-      this.__updateAriaLabel(this.i18n);
-
-      this._updateToggleState(false);
-      this._toggleRevealHidden(this.revealButtonHidden);
-
       if (this.inputElement) {
         this.inputElement.autocapitalize = 'off';
       }
     }
 
+    /** @protected */
+    updated(props) {
+      super.updated(props);
+
+      if (props.has('disabled')) {
+        this._revealNode.disabled = this.disabled;
+      }
+
+      if (props.has('revealButtonHidden')) {
+        this._toggleRevealHidden(this.revealButtonHidden);
+      }
+
+      if (props.has('passwordVisible')) {
+        this._setType(this.passwordVisible ? 'text' : 'password');
+        this._revealNode.setAttribute('aria-pressed', this.passwordVisible ? 'true' : 'false');
+      }
+
+      if (props.has('i18n') && this.i18n && this.i18n.reveal) {
+        this._revealNode.setAttribute('aria-label', this.i18n.reveal);
+      }
+    }
+
     /**
      * Override an event listener inherited from `InputControlMixin`
      * to store the value at the moment of the native `change` event.
@@ -188,31 +194,9 @@ export const PasswordFieldMixin = (superClass) =>
       }
     }
 
-    /** @private */
-    __updateAriaLabel(i18n) {
-      if (i18n && i18n.reveal && this._revealNode) {
-        this._revealNode.setAttribute('aria-label', i18n.reveal);
-      }
-    }
-
-    /** @private */
-    __i18nChanged(i18n) {
-      this.__updateAriaLabel(i18n);
-    }
-
-    /** @private */
-    _revealButtonHiddenChanged(hidden) {
-      this._toggleRevealHidden(hidden);
-    }
-
-    /** @private */
-    _togglePasswordVisibility() {
-      this._setPasswordVisible(!this.passwordVisible);
-    }
-
     /** @private */
     _onRevealButtonClick() {
-      this._togglePasswordVisibility();
+      this._setPasswordVisible(!this.passwordVisible);
     }
 
     /** @private */
@@ -239,33 +223,4 @@ export const PasswordFieldMixin = (superClass) =>
         }
       }
     }
-
-    /** @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/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/password-field",
-  "version": "25.0.0-alpha17",
+  "version": "25.0.0-alpha19",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -576,7 +576,7 @@
               },
               {
                 "name": "i18n",
-                "description": "An object with translated strings used for localization.\nIt has the following structure and default values:\n\n```\n{\n  // Translation of the reveal icon button accessible label\n  reveal: 'Show password'\n}\n```",
+                "description": "An object with translated strings used for localization.\nIt has the following structure and default values:\n\n```js\n{\n  // Translation of the reveal icon button accessible label\n  reveal: 'Show password'\n}\n```",
                 "value": {
                   "type": [
                     "Object",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/password-field",
-  "version": "25.0.0-alpha17",
+  "version": "25.0.0-alpha19",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -196,7 +196,7 @@
             },
             {
               "name": ".i18n",
-              "description": "An object with translated strings used for localization.\nIt has the following structure and default values:\n\n```\n{\n  // Translation of the reveal icon button accessible label\n  reveal: 'Show password'\n}\n```",
+              "description": "An object with translated strings used for localization.\nIt has the following structure and default values:\n\n```js\n{\n  // Translation of the reveal icon button accessible label\n  reveal: 'Show password'\n}\n```",
               "value": {
                 "kind": "expression"
               }