@vaadin/login 24.8.4 → 25.0.0-alpha10

package/src/vaadin-login-overlay.js

@@ -3,93 +3,124 @@
  * Copyright (c) 2018 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import './vaadin-login-form.js';
+import '@vaadin/button/src/vaadin-button.js';
+import '@vaadin/text-field/src/vaadin-text-field.js';
+import '@vaadin/password-field/src/vaadin-password-field.js';
+import './vaadin-login-form-wrapper.js';
 import './vaadin-login-overlay-wrapper.js';
-import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { css, html, LitElement } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { LoginFormMixin } from './vaadin-login-form-mixin.js';
 import { LoginOverlayMixin } from './vaadin-login-overlay-mixin.js';
 
 /**
- * `<vaadin-login-overlay>` is a wrapper of the `<vaadin-login-form>` which opens a login form in an overlay and
- * having an additional `brand` part for application title and description. Using `<vaadin-login-overlay>` allows
- * password managers to work with login form.
+ * `<vaadin-login-overlay>` is a web component which renders a login form in an overlay and
+ * provides an additional `brand` part for application title and description.
  *
- * ```
+ * ```html
  * <vaadin-login-overlay opened></vaadin-login-overlay>
  * ```
  *
  * ### Styling
  *
- * The component doesn't have a shadowRoot, so the `<form>` and input fields can be styled from a global scope.
- * Use `<vaadin-login-overlay-wrapper>` and `<vaadin-login-form-wrapper>` to apply styles.
- *
- * The following shadow DOM parts of the `<vaadin-login-overlay-wrapper>` are available for styling:
+ * The following shadow DOM parts are available for styling:
  *
- * Part name       | Description
- * ----------------|---------------------------------------------------------|
- * `card`          | Container for the entire component's content
- * `brand`         | Container for application title and description
- * `form`          | Container for the `<vaadin-login-form>` component
+ * Part name                    | Description
+ * -----------------------------|--------------------------------
+ * `backdrop`                   | Backdrop of the overlay
+ * `overlay`                    | The overlay container element
+ * `content`                    | The overlay content element
+ * `card`                       | Container for the brand and form wrapper
+ * `brand`                      | Container for application title and description
+ * `description`                | The application description
+ * `form-wrapper`               | The login form wrapper element
+ * `form`                       | The login form element
+ * `form-title`                 | Title of the login form
+ * `error-message`              | Container for error message
+ * `error-message-title`        | Container for error message title
+ * `error-message-description`  | Container for error message description
+ * `footer`                     | Container for the footer element
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
- * 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.
+ * @fires {CustomEvent} closed - Fired when the overlay is closed.
  *
  * @customElement
  * @extends HTMLElement
  * @mixes ElementMixin
  * @mixes ThemableMixin
+ * @mixes LoginFormMixin
  * @mixes LoginOverlayMixin
  */
-class LoginOverlay extends LoginOverlayMixin(ElementMixin(ThemableMixin(PolymerElement))) {
-  static get template() {
+class LoginOverlay extends LoginFormMixin(LoginOverlayMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement))))) {
+  static get is() {
+    return 'vaadin-login-overlay';
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+      }
+
+      :host([hidden]) {
+        display: none !important;
+      }
+    `;
+  }
+
+  /** @protected */
+  render() {
     return html`
       <vaadin-login-overlay-wrapper
-        id="vaadinLoginOverlayWrapper"
-        opened="{{opened}}"
-        role="dialog"
+        id="overlay"
+        .owner="${this}"
+        .opened="${this.opened}"
+        .description="${this.description}"
         focus-trap
         with-backdrop
-        title="[[title]]"
-        description="[[description]]"
-        heading-level="[[headingLevel]]"
-        theme$="[[_theme]]"
-        on-vaadin-overlay-escape-press="_preventClosingLogin"
-        on-vaadin-overlay-outside-click="_preventClosingLogin"
+        theme="${ifDefined(this._theme)}"
+        @vaadin-overlay-escape-press="${this._preventClosingLogin}"
+        @vaadin-overlay-outside-click="${this._preventClosingLogin}"
+        @vaadin-overlay-closed="${this.__handleOverlayClosed}"
+        @opened-changed="${this._onOpenedChanged}"
+        exportparts="backdrop, overlay, content, card, brand, description, form-wrapper"
       >
-        <vaadin-login-form
-          theme="with-overlay"
-          id="vaadinLoginForm"
-          action="[[action]]"
-          disabled="{{disabled}}"
-          error="{{error}}"
-          heading-level="[[__computeHeadingLevel(headingLevel)]]"
-          no-autofocus="[[noAutofocus]]"
-          no-forgot-password="[[noForgotPassword]]"
-          i18n="{{__effectiveI18n}}"
-          on-login="_retargetEvent"
-          on-forgot-password="_retargetEvent"
-        ></vaadin-login-form>
+        <slot name="title" slot="title"></slot>
+        <vaadin-login-form-wrapper
+          id="form"
+          .error="${this.error}"
+          .i18n="${this.__effectiveI18n}"
+          part="form"
+          role="region"
+          aria-labelledby="title"
+          exportparts="error-message, error-message-title, error-message-description, footer"
+        >
+          <div id="title" slot="form-title" part="form-title" role="heading" aria-level="${this.headingLevel + 1}">
+            ${this.__effectiveI18n.form.title}
+          </div>
+          <slot name="form" slot="form"></slot>
+          <slot name="custom-form-area" slot="custom-form-area"></slot>
+          <slot name="submit" slot="submit"></slot>
+          <slot name="forgot-password" slot="forgot-password"></slot>
+          <slot name="footer" slot="footer"></slot>
+        </vaadin-login-form-wrapper>
       </vaadin-login-overlay-wrapper>
-
-      <div hidden>
-        <slot name="custom-form-area"></slot>
-        <slot name="footer"></slot>
-      </div>
     `;
   }
 
-  static get is() {
-    return 'vaadin-login-overlay';
+  /** @private */
+  _onOpenedChanged(event) {
+    this.opened = event.detail.value;
   }
 }
 

package/theme/lumo/vaadin-login-form-wrapper-styles.d.ts

@@ -1 +1,4 @@
+import '@vaadin/vaadin-lumo-styles/color.js';
+import '@vaadin/vaadin-lumo-styles/sizing.js';
 import '@vaadin/vaadin-lumo-styles/spacing.js';
+import '@vaadin/vaadin-lumo-styles/typography.js';

package/theme/lumo/vaadin-login-form-wrapper-styles.js

@@ -1,19 +1,23 @@
+import '@vaadin/vaadin-lumo-styles/color.js';
+import '@vaadin/vaadin-lumo-styles/sizing.js';
 import '@vaadin/vaadin-lumo-styles/spacing.js';
-import { color } from '@vaadin/vaadin-lumo-styles/color.js';
-import { typography } from '@vaadin/vaadin-lumo-styles/typography.js';
+import '@vaadin/vaadin-lumo-styles/typography.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 const loginFormWrapper = css`
   :host {
-    max-width: calc(var(--lumo-size-m) * 10);
+    width: calc(var(--lumo-size-m) * 10);
+    padding: var(--lumo-space-l);
+    max-width: 100%;
     background: var(--lumo-base-color) linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct));
   }
 
-  [part='form'] {
-    padding: var(--lumo-space-l);
+  ::slotted(form) {
+    display: flex;
+    flex-direction: column;
   }
 
-  [part='form-title'] {
+  ::slotted([slot='form-title']) {
     margin-top: calc(var(--lumo-font-size-xxxl) - var(--lumo-font-size-xxl));
     color: var(--lumo-header-text-color);
     font-size: var(--lumo-font-size-xxl);
@@ -89,6 +93,6 @@ const loginFormWrapper = css`
   }
 `;
 
-registerStyles('vaadin-login-form-wrapper', [color, typography, loginFormWrapper], {
+registerStyles('vaadin-login-form-wrapper', loginFormWrapper, {
   moduleId: 'lumo-login-form-wrapper',
 });

package/theme/lumo/vaadin-login-overlay-styles.d.ts

@@ -1,2 +1,3 @@
+import '@vaadin/vaadin-lumo-styles/color.js';
 import '@vaadin/vaadin-lumo-styles/spacing.js';
-import './vaadin-login-form-wrapper-styles.js';
+import '@vaadin/vaadin-lumo-styles/typography.js';

package/theme/lumo/vaadin-login-overlay-styles.js

@@ -1,8 +1,7 @@
+import '@vaadin/vaadin-lumo-styles/color.js';
 import '@vaadin/vaadin-lumo-styles/spacing.js';
-import './vaadin-login-form-wrapper-styles.js';
-import { color } from '@vaadin/vaadin-lumo-styles/color.js';
+import '@vaadin/vaadin-lumo-styles/typography.js';
 import { overlay } from '@vaadin/vaadin-lumo-styles/mixins/overlay.js';
-import { typography } from '@vaadin/vaadin-lumo-styles/typography.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 const loginOverlayWrapper = css`
@@ -29,7 +28,7 @@ const loginOverlayWrapper = css`
     min-height: calc(var(--lumo-size-m) * 5);
   }
 
-  [part='title'] {
+  ::slotted([slot='title']) {
     font-size: var(--lumo-font-size-xxxl);
     font-weight: 600;
     line-height: var(--lumo-line-height-xs);
@@ -38,7 +37,7 @@ const loginOverlayWrapper = css`
   [part='description'] {
     line-height: var(--lumo-line-height-s);
     color: var(--lumo-tint-70pct);
-    margin-bottom: 0;
+    margin: 0.5em 0 0;
   }
 
   [part='content'] {
@@ -58,6 +57,11 @@ const loginOverlayWrapper = css`
     height: auto;
   }
 
+  ::slotted(vaadin-login-form-wrapper) {
+    min-height: 100%;
+    max-width: 100%;
+  }
+
   /* Small screen */
   @media only screen and (max-width: 500px) {
     [part='overlay'],
@@ -95,7 +99,7 @@ const loginOverlayWrapper = css`
     }
 
     [part='brand'],
-    [part='form'] {
+    [part='form-wrapper'] {
       flex: auto;
       flex-basis: 0;
       box-sizing: border-box;
@@ -105,10 +109,15 @@ const loginOverlayWrapper = css`
       justify-content: flex-start;
     }
 
-    [part='form'] {
+    [part='form-wrapper'] {
       padding: var(--lumo-space-l);
       overflow: auto;
     }
+
+    ::slotted(vaadin-login-form-wrapper) {
+      flex: 1;
+      padding: 2px;
+    }
   }
 
   /* Landscape really small screen */
@@ -128,10 +137,9 @@ const loginOverlayWrapper = css`
       box-shadow: none;
     }
 
-    [part='form'] {
+    [part='form-wrapper'] {
       height: 100%;
       overflow: auto;
-      -webkit-overflow-scrolling: touch;
     }
   }
 
@@ -160,29 +168,6 @@ const loginOverlayWrapper = css`
   }
 `;
 
-registerStyles('vaadin-login-overlay-wrapper', [color, typography, overlay, loginOverlayWrapper], {
+registerStyles('vaadin-login-overlay-wrapper', [overlay, loginOverlayWrapper], {
   moduleId: 'lumo-login-overlay-wrapper',
 });
-
-const loginFormWrapper = css`
-  :host([theme~='with-overlay']) {
-    min-height: 100%;
-    display: flex;
-    justify-content: center;
-    max-width: 100%;
-  }
-
-  /* Landscape small screen */
-  @media only screen and (max-height: 600px) and (min-width: 600px) and (orientation: landscape) {
-    :host([theme~='with-overlay']) [part='form'] {
-      height: 100%;
-      -webkit-overflow-scrolling: touch;
-      flex: 1;
-      padding: 2px;
-    }
-  }
-`;
-
-registerStyles('vaadin-login-form-wrapper', [loginFormWrapper], {
-  moduleId: 'lumo-login-overlay',
-});

package/theme/lumo/vaadin-login-overlay.d.ts

@@ -1,6 +1,6 @@
+import '@vaadin/button/theme/lumo/vaadin-button.js';
 import '@vaadin/text-field/theme/lumo/vaadin-text-field.js';
 import '@vaadin/password-field/theme/lumo/vaadin-password-field.js';
-import '@vaadin/button/theme/lumo/vaadin-button.js';
-import './vaadin-login-form.js';
+import './vaadin-login-form-wrapper-styles.js';
 import './vaadin-login-overlay-styles.js';
 import '../../src/vaadin-login-overlay.js';

package/theme/lumo/vaadin-login-overlay.js

@@ -1,6 +1,6 @@
+import '@vaadin/button/theme/lumo/vaadin-button.js';
 import '@vaadin/text-field/theme/lumo/vaadin-text-field.js';
 import '@vaadin/password-field/theme/lumo/vaadin-password-field.js';
-import '@vaadin/button/theme/lumo/vaadin-button.js';
-import './vaadin-login-form.js';
+import './vaadin-login-form-wrapper-styles.js';
 import './vaadin-login-overlay-styles.js';
 import '../../src/vaadin-login-overlay.js';

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/login",
-  "version": "24.8.4",
+  "version": "25.0.0-alpha10",
   "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`footer`  | Container additional information text from `i18n` object\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/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```html\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 following shadow DOM parts 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/styling-components) documentation.",
           "attributes": [
             {
               "name": "action",
@@ -170,7 +170,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/styling-components) documentation.\n\nSee [`<vaadin-login-form>`](https://cdn.vaadin.com/vaadin-web-components/24.8.4/#/elements/vaadin-login-form)\ndocumentation for  `<vaadin-login-form-wrapper>` stylable parts.",
+          "description": "`<vaadin-login-overlay>` is a web component which renders a login form in an overlay and\nprovides an additional `brand` part for application title and description.\n\n```html\n<vaadin-login-overlay opened></vaadin-login-overlay>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name                    | Description\n-----------------------------|--------------------------------\n`backdrop`                   | Backdrop of the overlay\n`overlay`                    | The overlay container element\n`content`                    | The overlay content element\n`card`                       | Container for the brand and form wrapper\n`brand`                      | Container for application title and description\n`description`                | The application description\n`form-wrapper`               | The login form wrapper element\n`form`                       | The login form element\n`form-title`                 | Title of the login form\n`error-message`              | Container for error message\n`error-message-title`        | Container for error message title\n`error-message-description`  | Container for error message description\n`footer`                     | Container for the footer element\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "attributes": [
             {
               "name": "action",
@@ -395,6 +395,10 @@
                 "name": "login",
                 "description": "Fired when an user submits the login.\nThe event contains `username` and `password` values in the `detail` property."
               },
+              {
+                "name": "closed",
+                "description": "Fired when the overlay is closed."
+              },
               {
                 "name": "disabled-changed",
                 "description": "Fired when the `disabled` property changes."

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/login",
-  "version": "24.8.4",
+  "version": "25.0.0-alpha10",
   "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`footer`  | Container additional information text from `i18n` object\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/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```html\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 following shadow DOM parts 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/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {
@@ -100,7 +100,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/styling-components) documentation.\n\nSee [`<vaadin-login-form>`](https://cdn.vaadin.com/vaadin-web-components/24.8.4/#/elements/vaadin-login-form)\ndocumentation for  `<vaadin-login-form-wrapper>` stylable parts.",
+          "description": "`<vaadin-login-overlay>` is a web component which renders a login form in an overlay and\nprovides an additional `brand` part for application title and description.\n\n```html\n<vaadin-login-overlay opened></vaadin-login-overlay>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name                    | Description\n-----------------------------|--------------------------------\n`backdrop`                   | Backdrop of the overlay\n`overlay`                    | The overlay container element\n`content`                    | The overlay content element\n`card`                       | Container for the brand and form wrapper\n`brand`                      | Container for application title and description\n`description`                | The application description\n`form-wrapper`               | The login form wrapper element\n`form`                       | The login form element\n`form-title`                 | Title of the login form\n`error-message`              | Container for error message\n`error-message-title`        | Container for error message title\n`error-message-description`  | Container for error message description\n`footer`                     | Container for the footer element\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {
@@ -194,6 +194,13 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "@closed",
+              "description": "Fired when the overlay is closed.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": "@disabled-changed",
               "description": "Fired when the `disabled` property changes.",

package/src/vaadin-lit-login-form-wrapper.js

@@ -1,86 +0,0 @@
-/**
- * @license
- * Copyright (c) 2018 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { html, LitElement } from 'lit';
-import { defineCustomElement } from '@vaadin/component-base/src/define.js';
-import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { loginFormWrapperStyles } from './vaadin-login-form-wrapper-styles.js';
-
-/**
- * An element used internally by `<vaadin-login-form>`. Not intended to be used separately.
- *
- * @extends HTMLElement
- * @mixes ThemableMixin
- * @private
- */
-class LoginFormWrapper extends ThemableMixin(PolylitMixin(LitElement)) {
-  static get is() {
-    return 'vaadin-login-form-wrapper';
-  }
-
-  static get styles() {
-    return loginFormWrapperStyles;
-  }
-
-  static get properties() {
-    return {
-      /**
-       * If set, the error message is shown. The message is hidden by default.
-       * When set, it changes the disabled state of the submit button.
-       * @type {boolean}
-       */
-      error: {
-        type: Boolean,
-        value: false,
-        reflectToAttribute: true,
-      },
-
-      /**
-       * The object used to localize this component.
-       */
-      i18n: {
-        type: Object,
-      },
-
-      /**
-       * Used to customize the `aria-level` attribute on the heading element.
-       */
-      headingLevel: {
-        type: Number,
-      },
-    };
-  }
-
-  /** @protected */
-  render() {
-    return html`
-      <section part="form">
-        <div part="form-title" role="heading" aria-level="${this.headingLevel}">${this.i18n.form.title}</div>
-        <div part="error-message" ?hidden="${!this.error}">
-          <strong part="error-message-title">${this.i18n.errorMessage.title}</strong>
-          <p part="error-message-description">${this.i18n.errorMessage.message}</p>
-        </div>
-
-        <slot name="form"></slot>
-
-        <slot name="custom-form-area"></slot>
-
-        <slot name="submit"></slot>
-
-        <slot name="forgot-password"></slot>
-
-        <div part="footer">
-          <slot name="footer"></slot>
-          <p>${this.i18n.additionalInformation}</p>
-        </div>
-      </section>
-    `;
-  }
-}
-
-defineCustomElement(LoginFormWrapper);
-
-export { LoginFormWrapper };

package/src/vaadin-lit-login-form.js

@@ -1,112 +0,0 @@
-/**
- * @license
- * Copyright (c) 2018 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import '@vaadin/button/src/vaadin-lit-button.js';
-import '@vaadin/text-field/src/vaadin-lit-text-field.js';
-import '@vaadin/password-field/src/vaadin-lit-password-field.js';
-import './vaadin-lit-login-form-wrapper.js';
-import { html, LitElement } from 'lit';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { defineCustomElement } from '@vaadin/component-base/src/define.js';
-import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { LoginFormMixin } from './vaadin-login-form-mixin.js';
-
-/**
- * LitElement based version of `<vaadin-login-form>` web component.
- *
- * ## Disclaimer
- *
- * This component is an experiment and not yet a part of Vaadin platform.
- * There is no ETA regarding specific Vaadin version where it'll land.
- * Feel free to try this code in your apps as per Apache 2.0 license.
- */
-class LoginForm extends LoginFormMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
-  static get is() {
-    return 'vaadin-login-form';
-  }
-
-  /**
-   * @protected
-   * @override
-   */
-  createRenderRoot() {
-    return this;
-  }
-
-  /** @protected */
-  render() {
-    return html`
-      <style>
-        vaadin-login-form-wrapper > form > * {
-          width: 100%;
-        }
-      </style>
-      <vaadin-login-form-wrapper
-        id="vaadinLoginFormWrapper"
-        theme="${ifDefined(this._theme)}"
-        .error="${this.error}"
-        .i18n="${this.__effectiveI18n}"
-        .headingLevel="${this.headingLevel}"
-      >
-        <form method="POST" action="${ifDefined(this.action)}" @formdata="${this._onFormData}" slot="form">
-          <input id="csrf" type="hidden" />
-          <vaadin-text-field
-            name="username"
-            .label="${this.__effectiveI18n.form.username}"
-            .errorMessage="${this.__effectiveI18n.errorMessage.username}"
-            id="vaadinLoginUsername"
-            required
-            @keydown="${this._handleInputKeydown}"
-            autocapitalize="none"
-            autocorrect="off"
-            spellcheck="false"
-            autocomplete="username"
-            manual-validation
-          >
-            <input type="text" slot="input" @keyup="${this._handleInputKeyup}" />
-          </vaadin-text-field>
-
-          <vaadin-password-field
-            name="password"
-            .label="${this.__effectiveI18n.form.password}"
-            .errorMessage="${this.__effectiveI18n.errorMessage.password}"
-            id="vaadinLoginPassword"
-            required
-            @keydown="${this._handleInputKeydown}"
-            spellcheck="false"
-            autocomplete="current-password"
-            manual-validation
-          >
-            <input type="password" slot="input" @keyup="${this._handleInputKeyup}" />
-          </vaadin-password-field>
-        </form>
-
-        <vaadin-button
-          slot="submit"
-          theme="primary contained submit"
-          @click="${this.submit}"
-          .disabled="${this.disabled}"
-        >
-          ${this.__effectiveI18n.form.submit}
-        </vaadin-button>
-
-        <vaadin-button
-          slot="forgot-password"
-          theme="tertiary small"
-          @click="${this._onForgotPasswordClick}"
-          ?hidden="${this.noForgotPassword}"
-        >
-          ${this.__effectiveI18n.form.forgotPassword}
-        </vaadin-button>
-      </vaadin-login-form-wrapper>
-    `;
-  }
-}
-
-defineCustomElement(LoginForm);
-
-export { LoginForm };