@vaadin/login 24.8.4 → 25.0.0-alpha10

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

@@ -1,52 +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 { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { LoginOverlayWrapperMixin } from './vaadin-login-overlay-wrapper-mixin.js';
-import { loginOverlayWrapperStyles } from './vaadin-login-overlay-wrapper-styles.js';
-
-/**
- * An element used internally by `<vaadin-login-overlay>`. Not intended to be used separately.
- *
- * @extends HTMLElement
- * @private
- */
-class LoginOverlayWrapper extends LoginOverlayWrapperMixin(ThemableMixin(PolylitMixin(LitElement))) {
-  static get is() {
-    return 'vaadin-login-overlay-wrapper';
-  }
-
-  static get styles() {
-    return [overlayStyles, loginOverlayWrapperStyles];
-  }
-
-  /** @protected */
-  render() {
-    return html`
-      <div id="backdrop" part="backdrop" ?hidden="${!this.withBackdrop}"></div>
-      <div part="overlay" id="overlay" tabindex="0">
-        <div part="content" id="content">
-          <section part="card">
-            <div part="brand">
-              <slot name="title">
-                <div part="title" role="heading" aria-level="${this.headingLevel}">${this.title}</div>
-              </slot>
-              <p part="description">${this.description}</p>
-            </div>
-            <div part="form">
-              <slot></slot>
-            </div>
-          </section>
-        </div>
-      </div>
-    `;
-  }
-}
-
-defineCustomElement(LoginOverlayWrapper);

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

@@ -1,83 +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-lit-login-form.js';
-import './vaadin-lit-login-overlay-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 { LoginOverlayMixin } from './vaadin-login-overlay-mixin.js';
-
-/**
- * LitElement based version of `<vaadin-login-overlay>` 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 LoginOverlay extends LoginOverlayMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
-  static get is() {
-    return 'vaadin-login-overlay';
-  }
-
-  /** @protected */
-  render() {
-    return html`
-      <vaadin-login-overlay-wrapper
-        id="vaadinLoginOverlayWrapper"
-        .opened="${this.opened}"
-        .title="${this.title}"
-        .description="${this.description}"
-        .headingLevel="${this.headingLevel}"
-        role="dialog"
-        focus-trap
-        with-backdrop
-        theme="${ifDefined(this._theme)}"
-        @vaadin-overlay-escape-press="${this._preventClosingLogin}"
-        @vaadin-overlay-outside-click="${this._preventClosingLogin}"
-        @opened-changed="${this._onOpenedChanged}"
-      >
-        <vaadin-login-form
-          theme="with-overlay"
-          id="vaadinLoginForm"
-          .action="${this.action}"
-          .disabled="${this.disabled}"
-          .error="${this.error}"
-          .noAutofocus="${this.noAutofocus}"
-          .noForgotPassword="${this.noForgotPassword}"
-          .headingLevel="${this.__computeHeadingLevel(this.headingLevel)}"
-          .i18n="${this.__effectiveI18n}"
-          @login="${this._retargetEvent}"
-          @forgot-password="${this._retargetEvent}"
-          @disabled-changed="${this._onDisabledChanged}"
-        ></vaadin-login-form>
-      </vaadin-login-overlay-wrapper>
-
-      <div hidden>
-        <slot name="custom-form-area"></slot>
-        <slot name="footer"></slot>
-      </div>
-    `;
-  }
-
-  /** @private */
-  _onOpenedChanged(event) {
-    this.opened = event.detail.value;
-  }
-
-  /** @private */
-  _onDisabledChanged(event) {
-    this.disabled = event.detail.value;
-  }
-}
-
-defineCustomElement(LoginOverlay);
-
-export { LoginOverlay };

package/src/vaadin-login-overlay-wrapper-mixin.js

@@ -1,78 +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 { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
-import { SlotObserver } from '@vaadin/component-base/src/slot-observer.js';
-import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
-import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
-
-/**
- * @polymerMixin
- * @mixes DirMixin
- * @mixes OverlayMixin
- */
-export const LoginOverlayWrapperMixin = (superClass) =>
-  class LoginOverlayWrapperMixin extends OverlayMixin(DirMixin(superClass)) {
-    static get properties() {
-      return {
-        /**
-         * Title of the application.
-         */
-        title: {
-          type: String,
-          observer: '_titleChanged',
-        },
-
-        /**
-         * Application description. Displayed under the title.
-         */
-        description: {
-          type: String,
-        },
-
-        /**
-         * Used to customize the `aria-level` attribute on the heading element.
-         */
-        headingLevel: {
-          type: Number,
-        },
-      };
-    }
-
-    /** @protected */
-    ready() {
-      super.ready();
-
-      // Use slot observer instead of slot controller since the latter
-      // does not work well with teleporting (it removes custom title).
-      const slot = this.shadowRoot.querySelector('slot[name="title"]');
-      this._titleSlotObserver = new SlotObserver(slot, () => {
-        const title = slot.assignedElements({ flatten: true })[0];
-        if (!title) {
-          return;
-        }
-
-        // Only set ID on the custom slotted title and link it using
-        // aria-labelledby as the default title is in the shadow DOM.
-        if (title.getAttribute('part') === 'title') {
-          this.setAttribute('aria-label', this.title);
-          this.removeAttribute('aria-labelledby');
-        } else {
-          if (!title.id) {
-            title.id = `login-overlay-title-${generateUniqueId()}`;
-          }
-          this.removeAttribute('aria-label');
-          this.setAttribute('aria-labelledby', title.id);
-        }
-      });
-    }
-
-    /** @private */
-    _titleChanged(title) {
-      if (title && this.hasAttribute('aria-label')) {
-        this.setAttribute('aria-label', title);
-      }
-    }
-  };

package/theme/lumo/vaadin-lit-login-form.d.ts

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

package/theme/lumo/vaadin-lit-login-form.js

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

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

@@ -1,3 +0,0 @@
-import './vaadin-login-overlay-styles.js';
-import './vaadin-lit-login-form.js';
-import '../../src/vaadin-lit-login-overlay.js';

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

@@ -1,3 +0,0 @@
-import './vaadin-login-overlay-styles.js';
-import './vaadin-lit-login-form.js';
-import '../../src/vaadin-lit-login-overlay.js';

package/theme/material/vaadin-lit-login-form.d.ts

@@ -1,5 +0,0 @@
-import '@vaadin/button/theme/material/vaadin-button-styles.js';
-import '@vaadin/text-field/theme/material/vaadin-text-field-styles.js';
-import '@vaadin/password-field/theme/material/vaadin-password-field-styles.js';
-import './vaadin-login-form-wrapper-styles.js';
-import '../../src/vaadin-lit-login-form.js';

package/theme/material/vaadin-lit-login-form.js

@@ -1,5 +0,0 @@
-import '@vaadin/button/theme/material/vaadin-button-styles.js';
-import '@vaadin/text-field/theme/material/vaadin-text-field-styles.js';
-import '@vaadin/password-field/theme/material/vaadin-password-field-styles.js';
-import './vaadin-login-form-wrapper-styles.js';
-import '../../src/vaadin-lit-login-form.js';

package/theme/material/vaadin-lit-login-overlay.d.ts

@@ -1,3 +0,0 @@
-import './vaadin-login-overlay-styles.js';
-import './vaadin-lit-login-form.js';
-import '../../src/vaadin-lit-login-overlay.js';

package/theme/material/vaadin-lit-login-overlay.js

@@ -1,3 +0,0 @@
-import './vaadin-login-overlay-styles.js';
-import './vaadin-lit-login-form.js';
-import '../../src/vaadin-lit-login-overlay.js';

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

@@ -1 +0,0 @@
-import '@vaadin/vaadin-material-styles/color.js';

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

@@ -1,109 +0,0 @@
-import '@vaadin/vaadin-material-styles/color.js';
-import { typography } from '@vaadin/vaadin-material-styles/typography.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-const loginFormWrapper = css`
-  :host {
-    background: var(--material-background-color) linear-gradient(hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
-  }
-
-  [part='form'] {
-    padding: 1.5rem;
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    box-sizing: border-box;
-    justify-content: center;
-  }
-
-  [part='form-title'] {
-    margin-top: calc(var(--material-h3-font-size) - var(--material-h4-font-size));
-    font-size: var(--material-h5-font-size);
-    font-weight: 300;
-    line-height: 1.1;
-    letter-spacing: -0.01em;
-    text-indent: -0.07em;
-  }
-
-  ::slotted([slot='submit']) {
-    margin-top: 3em;
-    margin-bottom: 2em;
-    flex-grow: 0;
-  }
-
-  @media only screen and (max-width: 1023px) {
-    ::slotted([slot='submit']) {
-      margin-top: 2.5em;
-      margin-bottom: 1em;
-    }
-  }
-
-  ::slotted([slot='forgot-password']) {
-    margin: 0.5rem auto;
-    padding-bottom: 12px;
-    padding-top: 12px;
-    text-transform: none;
-  }
-
-  [part='error-message'] {
-    background-color: hsla(3, 100%, 60%, 0.1);
-    padding: 1rem;
-    border-radius: 0.25em;
-    margin-top: 1rem;
-    margin-bottom: 0.5rem;
-    color: var(--material-error-text-color);
-  }
-
-  :host(:not([dir='rtl'])) [part='error-message'] {
-    padding-left: 2.25rem;
-  }
-
-  :host([dir='rtl']) [part='error-message'] {
-    padding-right: 2.25rem;
-  }
-
-  [part='error-message']::before {
-    content: '!';
-    font-size: 1.3em;
-    font-weight: 500;
-    position: absolute;
-    width: 2.25rem;
-    height: 1em;
-    line-height: 1;
-    text-align: center;
-  }
-
-  /* Visual centering */
-  :host(:not([dir='rtl'])) [part='error-message']::before {
-    margin-left: calc(2.25rem * -0.95);
-  }
-
-  :host([dir='rtl']) [part='error-message']::before {
-    margin-right: calc(2.25rem * -0.95);
-  }
-
-  [part='error-message-title'] {
-    display: block;
-    margin: 0 0 0.25em;
-    color: inherit;
-    line-height: 1.1;
-    text-indent: -0.025em;
-  }
-
-  [part='error-message'] p {
-    font-size: var(--material-small-font-size);
-    line-height: 1.375;
-    margin: 0;
-    opacity: 0.9;
-  }
-
-  [part='footer'] {
-    font-size: var(--material-small-font-size);
-    line-height: 1.375;
-    color: var(--material-secondary-text-color);
-  }
-`;
-
-registerStyles('vaadin-login-form-wrapper', [typography, loginFormWrapper], {
-  moduleId: 'material-login-form-wrapper',
-});

package/theme/material/vaadin-login-form.d.ts

@@ -1,5 +0,0 @@
-import '@vaadin/button/theme/material/vaadin-button.js';
-import '@vaadin/text-field/theme/material/vaadin-text-field.js';
-import '@vaadin/password-field/theme/material/vaadin-password-field.js';
-import './vaadin-login-form-wrapper-styles.js';
-import '../../src/vaadin-login-form.js';

package/theme/material/vaadin-login-form.js

@@ -1,5 +0,0 @@
-import '@vaadin/button/theme/material/vaadin-button.js';
-import '@vaadin/text-field/theme/material/vaadin-text-field.js';
-import '@vaadin/password-field/theme/material/vaadin-password-field.js';
-import './vaadin-login-form-wrapper-styles.js';
-import '../../src/vaadin-login-form.js';

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

@@ -1 +0,0 @@
-import '@vaadin/vaadin-material-styles/color.js';