@vaadin/password-field 23.0.0-beta4 → 23.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/password-field",
-  "version": "23.0.0-beta4",
+  "version": "23.0.0",
   "publishConfig": {
     "access": "public"
   },
@@ -33,15 +33,15 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/button": "23.0.0-beta4",
-    "@vaadin/text-field": "23.0.0-beta4",
-    "@vaadin/vaadin-lumo-styles": "23.0.0-beta4",
-    "@vaadin/vaadin-material-styles": "23.0.0-beta4"
+    "@vaadin/button": "^23.0.0",
+    "@vaadin/text-field": "^23.0.0",
+    "@vaadin/vaadin-lumo-styles": "^23.0.0",
+    "@vaadin/vaadin-material-styles": "^23.0.0"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^9.2.1"
   },
-  "gitHead": "d0b447f1c31ca4256a5e26f2dcd27784447ff79b"
+  "gitHead": "e5ce38429a14de1448d732614e359fb32b2c42e0"
 }

package/src/vaadin-password-field.js

@@ -5,7 +5,7 @@
  */
 import './vaadin-password-field-button.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
-import { SlotMixin } from '@vaadin/component-base/src/slot-mixin.js';
+import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
 import { SlotStylesMixin } from '@vaadin/field-base/src/slot-styles-mixin.js';
 import { TextField } from '@vaadin/text-field/src/vaadin-text-field.js';
 
@@ -51,7 +51,7 @@ let memoizedTemplate;
  * @extends TextField
  * @mixes SlotStylesMixin
  */
-export class PasswordField extends SlotStylesMixin(SlotMixin(TextField)) {
+export class PasswordField extends SlotStylesMixin(TextField) {
   static get is() {
     return 'vaadin-password-field';
   }
@@ -122,18 +122,6 @@ export class PasswordField extends SlotStylesMixin(SlotMixin(TextField)) {
     return ['__i18nChanged(i18n.*)'];
   }
 
-  /** @protected */
-  get slots() {
-    return {
-      ...super.slots,
-      reveal: () => {
-        const btn = document.createElement('vaadin-password-field-button');
-        btn.disabled = this.disabled;
-        return btn;
-      }
-    };
-  }
-
   /** @protected */
   get slotStyles() {
     const tag = this.localName;
@@ -148,7 +136,7 @@ export class PasswordField extends SlotStylesMixin(SlotMixin(TextField)) {
 
   /** @protected */
   get _revealNode() {
-    return this._getDirectSlotChild('reveal');
+    return this._revealButtonController && this._revealButtonController.node;
   }
 
   constructor() {
@@ -163,33 +151,27 @@ export class PasswordField extends SlotStylesMixin(SlotMixin(TextField)) {
     super.ready();
 
     this._revealPart = this.shadowRoot.querySelector('[part="reveal-button"]');
-  }
 
-  /** @protected */
-  connectedCallback() {
-    super.connectedCallback();
+    this._revealButtonController = new SlotController(
+      this,
+      'reveal',
+      () => document.createElement('vaadin-password-field-button'),
+      (host, btn) => {
+        btn.disabled = host.disabled;
 
-    if (this._revealNode) {
-      this.__updateAriaLabel(this.i18n);
-      this._revealNode.addEventListener('click', this.__boundRevealButtonClick);
-      this._revealNode.addEventListener('touchend', this.__boundRevealButtonTouchend);
-    }
+        btn.addEventListener('click', host.__boundRevealButtonClick);
+        btn.addEventListener('touchend', host.__boundRevealButtonTouchend);
+      }
+    );
+    this.addController(this._revealButtonController);
 
-    if (this.inputElement) {
-      this.inputElement.autocapitalize = 'off';
-    }
+    this.__updateAriaLabel(this.i18n);
 
-    this._toggleRevealHidden(this.revealButtonHidden);
     this._updateToggleState(false);
-  }
-
-  /** @protected */
-  disconnectedCallback() {
-    super.disconnectedCallback();
+    this._toggleRevealHidden(this.revealButtonHidden);
 
-    if (this._revealNode) {
-      this._revealNode.removeEventListener('click', this.__boundRevealButtonClick);
-      this._revealNode.removeEventListener('touchend', this.__boundRevealButtonTouchend);
+    if (this.inputElement) {
+      this.inputElement.autocapitalize = 'off';
     }
   }
 
@@ -306,10 +288,11 @@ export class PasswordField extends SlotStylesMixin(SlotMixin(TextField)) {
    * 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) {
-    super._disabledChanged(disabled);
+  _disabledChanged(disabled, oldDisabled) {
+    super._disabledChanged(disabled, oldDisabled);
 
     if (this._revealNode) {
       this._revealNode.disabled = disabled;