@vaadin/login 23.2.7 → 23.2.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/login",
-  "version": "23.2.7",
+  "version": "23.2.9",
   "publishConfig": {
     "access": "public"
   },
@@ -37,14 +37,14 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/button": "~23.2.7",
-    "@vaadin/component-base": "~23.2.7",
-    "@vaadin/password-field": "~23.2.7",
-    "@vaadin/text-field": "~23.2.7",
-    "@vaadin/vaadin-lumo-styles": "~23.2.7",
-    "@vaadin/vaadin-material-styles": "~23.2.7",
-    "@vaadin/vaadin-overlay": "~23.2.7",
-    "@vaadin/vaadin-themable-mixin": "~23.2.7"
+    "@vaadin/button": "~23.2.9",
+    "@vaadin/component-base": "~23.2.9",
+    "@vaadin/password-field": "~23.2.9",
+    "@vaadin/text-field": "~23.2.9",
+    "@vaadin/vaadin-lumo-styles": "~23.2.9",
+    "@vaadin/vaadin-material-styles": "~23.2.9",
+    "@vaadin/vaadin-overlay": "~23.2.9",
+    "@vaadin/vaadin-themable-mixin": "~23.2.9"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
@@ -55,5 +55,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "bdaf12e4200bd68a3a9224bdf4cb41954f1b8bf1"
+  "gitHead": "880679b5eca131e7fbd4f651726bea5abc270493"
 }

package/src/vaadin-login-form.d.ts

@@ -8,12 +8,26 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
 import { LoginMixin } from './vaadin-login-mixin.js';
 export { LoginI18n } from './vaadin-login-mixin.js';
 
+/**
+ * Fired when the `disabled` property changes.
+ */
+export type LoginFormDisabledChangedEvent = CustomEvent<{ value: boolean }>;
+
+/**
+ * Fired when the `error` property changes.
+ */
+export type LoginFormErrorChangedEvent = CustomEvent<{ value: boolean }>;
+
 /**
  * Fired when a user submits the login.
  */
 export type LoginFormLoginEvent = CustomEvent<{ username: string; password: string }>;
 
 export interface LoginFormCustomEventMap {
+  'disabled-changed': LoginFormDisabledChangedEvent;
+
+  'error-changed': LoginFormErrorChangedEvent;
+
   'forgot-password': Event;
 
   login: LoginFormLoginEvent;
@@ -46,11 +60,12 @@ export interface LoginFormEventMap extends HTMLElementEventMap, LoginFormCustomE
  * `error-message`| Container for error message, contains error-message-title and error-message-description parts. Hidden by default.
  * `error-message-title`       | Container for error message title
  * `error-message-description` | Container for error message description
- * `error-message-description` | Container for error message description
  * `footer`  | Container additional information text from `i18n` object
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
  *
+ * @fires {CustomEvent} disabled-changed - Fired when the `disabled` property changes.
+ * @fires {CustomEvent} error-changed - Fired when the `error` property changes.
  * @fires {CustomEvent} forgot-password - Fired when user clicks on the "Forgot password" button.
  * @fires {CustomEvent} login - Fired when a user submits the login.
  */

package/src/vaadin-login-form.js

@@ -36,11 +36,12 @@ import { LoginMixin } from './vaadin-login-mixin.js';
  * `error-message`| Container for error message, contains error-message-title and error-message-description parts. Hidden by default.
  * `error-message-title`       | Container for error message title
  * `error-message-description` | Container for error message description
- * `error-message-description` | Container for error message description
  * `footer`  | Container additional information text from `i18n` object
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
  *
+ * @fires {CustomEvent} disabled-changed - Fired when the `disabled` property changes.
+ * @fires {CustomEvent} error-changed - Fired when the `error` property changes.
  * @fires {CustomEvent} forgot-password - Fired when user clicks on the "Forgot password" button.
  * @fires {CustomEvent} login - Fired when a user submits the login.
  *
@@ -60,11 +61,9 @@ class LoginForm extends LoginMixin(ElementMixin(ThemableMixin(PolymerElement)))
       <vaadin-login-form-wrapper
         theme$="[[_theme]]"
         part="vaadin-login-native-form-wrapper"
-        action="{{action}}"
-        disabled="{{disabled}}"
-        error="{{error}}"
-        no-forgot-password="{{noForgotPassword}}"
-        i18n="{{i18n}}"
+        error="[[error]]"
+        no-forgot-password="[[noForgotPassword]]"
+        i18n="[[i18n]]"
         on-login="_retargetEvent"
         on-forgot-password="_retargetEvent"
       >
@@ -79,6 +78,7 @@ class LoginForm extends LoginMixin(ElementMixin(ThemableMixin(PolymerElement)))
             autocapitalize="none"
             autocorrect="off"
             spellcheck="false"
+            autocomplete="username"
           >
             <input type="text" slot="input" on-keyup="_handleInputKeyup" />
           </vaadin-text-field>
@@ -110,7 +110,7 @@ class LoginForm extends LoginMixin(ElementMixin(ThemableMixin(PolymerElement)))
   /** @protected */
   connectedCallback() {
     super.connectedCallback();
-    this._handleInputKeydown = this._handleInputKeydown.bind(this);
+
     if (!this.noAutofocus) {
       this.$.vaadinLoginUsername.focus();
     }
@@ -137,7 +137,10 @@ class LoginForm extends LoginMixin(ElementMixin(ThemableMixin(PolymerElement)))
   }
 
   submit() {
-    if (this.disabled || !(this.__isValid(this.$.vaadinLoginUsername) && this.__isValid(this.$.vaadinLoginPassword))) {
+    const userName = this.$.vaadinLoginUsername;
+    const password = this.$.vaadinLoginPassword;
+
+    if (this.disabled || !(userName.validate() && password.validate())) {
       return;
     }
 
@@ -148,8 +151,8 @@ class LoginForm extends LoginMixin(ElementMixin(ThemableMixin(PolymerElement)))
       bubbles: true,
       cancelable: true,
       detail: {
-        username: this.$.vaadinLoginUsername.value,
-        password: this.$.vaadinLoginPassword.value,
+        username: userName.value,
+        password: password.value,
       },
     };
 
@@ -165,24 +168,14 @@ class LoginForm extends LoginMixin(ElementMixin(ThemableMixin(PolymerElement)))
     }
   }
 
-  /** @private */
-  __isValid(input) {
-    return (input.validate && input.validate()) || (input.checkValidity && input.checkValidity());
-  }
-
-  /** @private */
-  _isEnterKey(e) {
-    return e.key === 'Enter' || e.keyCode === 13;
-  }
-
   /** @private */
   _handleInputKeydown(e) {
-    if (this._isEnterKey(e)) {
+    if (e.key === 'Enter') {
       const { currentTarget: inputActive } = e;
       const nextInput =
         inputActive.id === 'vaadinLoginUsername' ? this.$.vaadinLoginPassword : this.$.vaadinLoginUsername;
-      if (this.__isValid(inputActive)) {
-        if (this.__isValid(nextInput)) {
+      if (inputActive.validate()) {
+        if (nextInput.validate()) {
           this.submit();
         } else {
           nextInput.focus();
@@ -193,12 +186,9 @@ class LoginForm extends LoginMixin(ElementMixin(ThemableMixin(PolymerElement)))
 
   /** @private */
   _handleInputKeyup(e) {
-    const isTab = e.key === 'Tab' || e.keyCode === 9;
     const input = e.currentTarget;
-    if (isTab && input && input.select) {
+    if (e.key === 'Tab' && input instanceof HTMLInputElement) {
       input.select();
-      // IOS 9 workaround: https://stackoverflow.com/a/7436574
-      setTimeout(() => input.setSelectionRange(0, 9999));
     }
   }
 }

package/src/vaadin-login-overlay.d.ts

@@ -8,12 +8,33 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
 import { LoginMixin } from './vaadin-login-mixin.js';
 export { LoginI18n } from './vaadin-login-mixin.js';
 
+/**
+ * Fired when the `description` property changes.
+ */
+export type LoginOverlayDescriptionChangedEvent = CustomEvent<{ value: string }>;
+
+/**
+ * Fired when the `disabled` property changes.
+ */
+export type LoginOverlayDisabledChangedEvent = CustomEvent<{ value: boolean }>;
+
+/**
+ * Fired when the `error` property changes.
+ */
+export type LoginOverlayErrorChangedEvent = CustomEvent<{ value: boolean }>;
+
 /**
  * Fired when a user submits the login.
  */
 export type LoginOverlayLoginEvent = CustomEvent<{ username: string; password: string }>;
 
 export interface LoginOverlayCustomEventMap {
+  'description-changed': LoginOverlayDescriptionChangedEvent;
+
+  'disabled-changed': LoginOverlayDisabledChangedEvent;
+
+  'error-changed': LoginOverlayErrorChangedEvent;
+
   'forgot-password': Event;
 
   login: LoginOverlayLoginEvent;
@@ -48,6 +69,9 @@ export interface LoginOverlayEventMap extends HTMLElementEventMap, LoginOverlayC
  * See [`<vaadin-login-form>`](#/elements/vaadin-login-form)
  * documentation for  `<vaadin-login-form-wrapper>` stylable parts.
  *
+ * @fires {CustomEvent} description-changed - Fired when the `description` property changes.
+ * @fires {CustomEvent} disabled-changed - Fired when the `disabled` property changes.
+ * @fires {CustomEvent} error-changed - Fired when the `error` property changes.
  * @fires {CustomEvent} forgot-password - Fired when user clicks on the "Forgot password" button.
  * @fires {CustomEvent} login - Fired when a user submits the login.
  */

package/src/vaadin-login-overlay.js

@@ -37,6 +37,9 @@ import { LoginMixin } from './vaadin-login-mixin.js';
  * See [`<vaadin-login-form>`](#/elements/vaadin-login-form)
  * documentation for  `<vaadin-login-form-wrapper>` stylable parts.
  *
+ * @fires {CustomEvent} description-changed - Fired when the `description` property changes.
+ * @fires {CustomEvent} disabled-changed - Fired when the `disabled` property changes.
+ * @fires {CustomEvent} error-changed - Fired when the `error` property changes.
  * @fires {CustomEvent} forgot-password - Fired when user clicks on the "Forgot password" button.
  * @fires {CustomEvent} login - Fired when a user submits the login.
  *

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/login",
-  "version": "23.2.7",
+  "version": "23.2.9",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "name": "vaadin-login-form",
-          "description": "`<vaadin-login-form>` is a Web Component providing an easy way to require users\nto log in into an application. Note that component has no shadowRoot.\n\n```\n<vaadin-login-form></vaadin-login-form>\n```\n\nComponent has to be accessible from the `document` layer in order to allow password managers to work properly with form values.\nUsing `<vaadin-login-overlay>` allows to always attach the component to the document body.\n\n### Styling\n\nThe component doesn't have a shadowRoot, so the `<form>` and input fields can be styled from a global scope.\nUse `<vaadin-login-form-wrapper>` themable component to apply styles.\n\nThe following shadow DOM parts of the `<vaadin-login-form-wrapper>` are available for styling:\n\nPart name      | Description\n---------------|---------------------------------------------------------|\n`form`         | Container for the entire component's content\n`form-title`   | Title of the login form\n`error-message`| Container for error message, contains error-message-title and error-message-description parts. Hidden by default.\n`error-message-title`       | Container for error message title\n`error-message-description` | Container for error message description\n`error-message-description` | Container for error message description\n`footer`  | Container additional information text from `i18n` object\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
+          "description": "`<vaadin-login-form>` is a Web Component providing an easy way to require users\nto log in into an application. Note that component has no shadowRoot.\n\n```\n<vaadin-login-form></vaadin-login-form>\n```\n\nComponent has to be accessible from the `document` layer in order to allow password managers to work properly with form values.\nUsing `<vaadin-login-overlay>` allows to always attach the component to the document body.\n\n### Styling\n\nThe component doesn't have a shadowRoot, so the `<form>` and input fields can be styled from a global scope.\nUse `<vaadin-login-form-wrapper>` themable component to apply styles.\n\nThe following shadow DOM parts of the `<vaadin-login-form-wrapper>` are available for styling:\n\nPart name      | Description\n---------------|---------------------------------------------------------|\n`form`         | Container for the entire component's content\n`form-title`   | Title of the login form\n`error-message`| Container for error message, contains error-message-title and error-message-description parts. Hidden by default.\n`error-message-title`       | Container for error message title\n`error-message-description` | Container for error message description\n`footer`  | Container additional information text from `i18n` object\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
           "attributes": [
             {
               "name": "action",
@@ -160,7 +160,7 @@
         },
         {
           "name": "vaadin-login-overlay",
-          "description": "`<vaadin-login-overlay>` is a wrapper of the `<vaadin-login-form>` which opens a login form in an overlay and\nhaving an additional `brand` part for application title and description. Using `<vaadin-login-overlay>` allows\npassword managers to work with login form.\n\n```\n<vaadin-login-overlay opened></vaadin-login-overlay>\n```\n\n### Styling\n\nThe component doesn't have a shadowRoot, so the `<form>` and input fields can be styled from a global scope.\nUse `<vaadin-login-overlay-wrapper>` and `<vaadin-login-form-wrapper>` to apply styles.\n\nThe following shadow DOM parts of the `<vaadin-login-overlay-wrapper>` are available for styling:\n\nPart name       | Description\n----------------|---------------------------------------------------------|\n`card`          | Container for the entire component's content\n`brand`         | Container for application title and description\n`form`          | Container for the `<vaadin-login-form>` component\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.\n\nSee [`<vaadin-login-form>`](https://cdn.vaadin.com/vaadin-web-components/23.2.7/#/elements/vaadin-login-form)\ndocumentation for  `<vaadin-login-form-wrapper>` stylable parts.",
+          "description": "`<vaadin-login-overlay>` is a wrapper of the `<vaadin-login-form>` which opens a login form in an overlay and\nhaving an additional `brand` part for application title and description. Using `<vaadin-login-overlay>` allows\npassword managers to work with login form.\n\n```\n<vaadin-login-overlay opened></vaadin-login-overlay>\n```\n\n### Styling\n\nThe component doesn't have a shadowRoot, so the `<form>` and input fields can be styled from a global scope.\nUse `<vaadin-login-overlay-wrapper>` and `<vaadin-login-form-wrapper>` to apply styles.\n\nThe following shadow DOM parts of the `<vaadin-login-overlay-wrapper>` are available for styling:\n\nPart name       | Description\n----------------|---------------------------------------------------------|\n`card`          | Container for the entire component's content\n`brand`         | Container for application title and description\n`form`          | Container for the `<vaadin-login-form>` component\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.\n\nSee [`<vaadin-login-form>`](https://cdn.vaadin.com/vaadin-web-components/23.2.9/#/elements/vaadin-login-form)\ndocumentation for  `<vaadin-login-form-wrapper>` stylable parts.",
           "attributes": [
             {
               "name": "action",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/login",
-  "version": "23.2.7",
+  "version": "23.2.9",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,7 +16,7 @@
       "elements": [
         {
           "name": "vaadin-login-form",
-          "description": "`<vaadin-login-form>` is a Web Component providing an easy way to require users\nto log in into an application. Note that component has no shadowRoot.\n\n```\n<vaadin-login-form></vaadin-login-form>\n```\n\nComponent has to be accessible from the `document` layer in order to allow password managers to work properly with form values.\nUsing `<vaadin-login-overlay>` allows to always attach the component to the document body.\n\n### Styling\n\nThe component doesn't have a shadowRoot, so the `<form>` and input fields can be styled from a global scope.\nUse `<vaadin-login-form-wrapper>` themable component to apply styles.\n\nThe following shadow DOM parts of the `<vaadin-login-form-wrapper>` are available for styling:\n\nPart name      | Description\n---------------|---------------------------------------------------------|\n`form`         | Container for the entire component's content\n`form-title`   | Title of the login form\n`error-message`| Container for error message, contains error-message-title and error-message-description parts. Hidden by default.\n`error-message-title`       | Container for error message title\n`error-message-description` | Container for error message description\n`error-message-description` | Container for error message description\n`footer`  | Container additional information text from `i18n` object\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
+          "description": "`<vaadin-login-form>` is a Web Component providing an easy way to require users\nto log in into an application. Note that component has no shadowRoot.\n\n```\n<vaadin-login-form></vaadin-login-form>\n```\n\nComponent has to be accessible from the `document` layer in order to allow password managers to work properly with form values.\nUsing `<vaadin-login-overlay>` allows to always attach the component to the document body.\n\n### Styling\n\nThe component doesn't have a shadowRoot, so the `<form>` and input fields can be styled from a global scope.\nUse `<vaadin-login-form-wrapper>` themable component to apply styles.\n\nThe following shadow DOM parts of the `<vaadin-login-form-wrapper>` are available for styling:\n\nPart name      | Description\n---------------|---------------------------------------------------------|\n`form`         | Container for the entire component's content\n`form-title`   | Title of the login form\n`error-message`| Container for error message, contains error-message-title and error-message-description parts. Hidden by default.\n`error-message-title`       | Container for error message title\n`error-message-description` | Container for error message description\n`footer`  | Container additional information text from `i18n` object\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {
@@ -114,7 +114,7 @@
         },
         {
           "name": "vaadin-login-overlay",
-          "description": "`<vaadin-login-overlay>` is a wrapper of the `<vaadin-login-form>` which opens a login form in an overlay and\nhaving an additional `brand` part for application title and description. Using `<vaadin-login-overlay>` allows\npassword managers to work with login form.\n\n```\n<vaadin-login-overlay opened></vaadin-login-overlay>\n```\n\n### Styling\n\nThe component doesn't have a shadowRoot, so the `<form>` and input fields can be styled from a global scope.\nUse `<vaadin-login-overlay-wrapper>` and `<vaadin-login-form-wrapper>` to apply styles.\n\nThe following shadow DOM parts of the `<vaadin-login-overlay-wrapper>` are available for styling:\n\nPart name       | Description\n----------------|---------------------------------------------------------|\n`card`          | Container for the entire component's content\n`brand`         | Container for application title and description\n`form`          | Container for the `<vaadin-login-form>` component\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.\n\nSee [`<vaadin-login-form>`](https://cdn.vaadin.com/vaadin-web-components/23.2.7/#/elements/vaadin-login-form)\ndocumentation for  `<vaadin-login-form-wrapper>` stylable parts.",
+          "description": "`<vaadin-login-overlay>` is a wrapper of the `<vaadin-login-form>` which opens a login form in an overlay and\nhaving an additional `brand` part for application title and description. Using `<vaadin-login-overlay>` allows\npassword managers to work with login form.\n\n```\n<vaadin-login-overlay opened></vaadin-login-overlay>\n```\n\n### Styling\n\nThe component doesn't have a shadowRoot, so the `<form>` and input fields can be styled from a global scope.\nUse `<vaadin-login-overlay-wrapper>` and `<vaadin-login-form-wrapper>` to apply styles.\n\nThe following shadow DOM parts of the `<vaadin-login-overlay-wrapper>` are available for styling:\n\nPart name       | Description\n----------------|---------------------------------------------------------|\n`card`          | Container for the entire component's content\n`brand`         | Container for application title and description\n`form`          | Container for the `<vaadin-login-form>` component\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.\n\nSee [`<vaadin-login-form>`](https://cdn.vaadin.com/vaadin-web-components/23.2.9/#/elements/vaadin-login-form)\ndocumentation for  `<vaadin-login-form-wrapper>` stylable parts.",
           "extension": true,
           "attributes": [
             {