@progressive-development/pd-page 0.9.1 → 1.0.0

package/dist/pd-footer/PdFooter.js

@@ -1,28 +1,111 @@
-import { LitElement, css, nothing, html } from 'lit';
+import { css, LitElement, nothing, html } from 'lit';
 import { property } from 'lit/decorators.js';
-import { PdColorStyles, PdFontStyles } from '@progressive-development/pd-shared-styles';
+import { localized, msg } from '@lit/localize';
 
 var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
   return result;
 };
-class PdFooter extends LitElement {
+let PdFooter = class extends LitElement {
   constructor() {
     super(...arguments);
     this.copyright = "";
     this.version = "";
     this.footerLinks = [];
   }
-  static {
-    this.styles = [
-      PdColorStyles,
-      PdFontStyles,
-      css`
+  render() {
+    return html`
+      <nav
+        class="footer-links"
+        aria-label="${msg("Footer Navigation", { id: "pd.footer.nav.aria" })}"
+      >
+        <ul role="list">
+          ${this.footerLinks?.map(
+      (link) => html`
+              <li
+                role="button"
+                tabindex="0"
+                data-link="${link.key}"
+                @click="${this._footerLinkClicked}"
+                @keydown="${this._handleLinkKeydown}"
+              >
+                ${link.name}
+              </li>
+            `
+    )}
+        </ul>
+      </nav>
+
+      <div class="bottom-line">
+        <div>
+          ${this.copyright ? html`<span class="copyright">© ${this.copyright}, </span>` : nothing}
+          ${this.version ? html`<span class="version">${this.version}</span>` : nothing}
+        </div>
+
+        ${this.madeBy ? html`<span
+              class="made-by"
+              role="button"
+              tabindex="0"
+              @click="${this._clickMadeBy}"
+              @keydown="${this._handleMadeByKeydown}"
+              >${this.madeBy.txt}</span
+            >` : nothing}
+      </div>
+    `;
+  }
+  /**
+   * Handles keyboard events on footer links.
+   * Activates on Enter or Space key.
+   */
+  _handleLinkKeydown(e) {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      this._footerLinkClicked(e);
+    }
+  }
+  /**
+   * Handles keyboard events on madeBy element.
+   * Activates on Enter or Space key.
+   */
+  _handleMadeByKeydown(e) {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      this._clickMadeBy();
+    }
+  }
+  _clickMadeBy() {
+    if (this.madeBy?.email) {
+      window.location.href = `mailto:${this.madeBy.email}`;
+    } else if (this.madeBy?.link) {
+      const url = this.madeBy.link;
+      if (url.startsWith("https://") || url.startsWith("http://")) {
+        window.open(url, "_blank", "noopener,noreferrer");
+      }
+    }
+  }
+  _footerLinkClicked(e) {
+    const target = e.currentTarget;
+    const linkKey = target.dataset.link;
+    const linkObj = this.footerLinks?.find((fl) => fl.key === linkKey);
+    if (linkObj) {
+      this.dispatchEvent(
+        new CustomEvent("footer-link", {
+          detail: { linkObj },
+          bubbles: true,
+          composed: true
+        })
+      );
+    }
+  }
+};
+PdFooter.styles = [
+  css`
       :host {
         display: flex;
         flex-flow: column;
@@ -37,7 +120,7 @@ class PdFooter extends LitElement {
         align-items: center;
         justify-content: right;
         height: 100%;
-        color: var(--pd-footer-font-col, var(--pd-default-bg-col));
+        color: var(--pd-footer-font-col, var(--pd-on-primary-col));
         font-family: var(
           --pd-footer-font-family,
           var(--pd-default-font-link-family)
@@ -49,9 +132,9 @@ class PdFooter extends LitElement {
         display: flex;
         flex-wrap: wrap;
         list-style: none;
-        gap: 2em;
+        gap: var(--pd-spacing-lg);
         margin: 0;
-        padding: 2em 2.5em;
+        padding: var(--pd-spacing-lg);
       }
 
       .footer-links li {
@@ -62,6 +145,12 @@ class PdFooter extends LitElement {
         color: var(--pd-default-hover-col);
       }
 
+      .footer-links li:focus-visible {
+        outline: 2px solid var(--pd-focus-ring-col, var(--pd-default-col));
+        outline-offset: 2px;
+        border-radius: var(--pd-radius-sm);
+      }
+
       .bottom-line {
         background-color: var(
           --pd-footer-bottom-col,
@@ -69,9 +158,9 @@ class PdFooter extends LitElement {
         );
         font-size: var(--pd-footer-bottom-font-size, 0.9em);
         color: var(--pd-footer-bottom-font-col, var(--pd-default-dark-col));
-        padding: 0.5em;
+        padding: var(--pd-spacing-sm);
         display: flex;
-        gap: 1em;
+        gap: var(--pd-spacing-md);
         flex-wrap: wrap;
         justify-content: space-between;
         align-items: center;
@@ -85,78 +174,37 @@ class PdFooter extends LitElement {
         font-weight: normal;
       }
 
-      .madeBy {
+      .made-by {
         cursor: pointer;
         font-style: italic;
+        white-space: normal;
       }
 
-      .madeBy:hover {
+      .made-by:hover {
         color: var(--pd-default-col);
       }
-    `
-    ];
-  }
-  render() {
-    return html`
-      <div class="footer-links">
-        <ul>
-          ${this.footerLinks?.map(
-      (link) => html`
-              <li>
-                <a @click=${this._footerLinkClicked} data-link=${link.key}
-                  >${link.name}</a
-                >
-              </li>
-            `
-    )}
-        </ul>
-      </div>
 
-      <div class="bottom-line">
-        <div>
-          ${this.copyright ? html`<span class="copyright">© ${this.copyright}, </span>` : nothing}
-          ${this.version ? html`<span class="version">${this.version}</span>` : nothing}
-        </div>
-
-        ${this.madeBy ? html`<span class="madeBy" @click=${this._clickMadeBy}
-              >${this.madeBy.txt}</span
-            >` : nothing}
-      </div>
-    `;
-  }
-  _clickMadeBy() {
-    if (this.madeBy?.email) {
-      window.location.href = `mailto:${this.madeBy.email}`;
-    } else if (this.madeBy?.link) {
-      window.open(this.madeBy.link, "_blank");
-    }
-  }
-  _footerLinkClicked(e) {
-    const target = e.currentTarget;
-    const linkKey = target.dataset.link;
-    const linkObj = this.footerLinks?.find((fl) => fl.key === linkKey);
-    if (linkObj) {
-      this.dispatchEvent(
-        new CustomEvent("footer-link", {
-          detail: { linkObj },
-          bubbles: true,
-          composed: true
-        })
-      );
-    }
-  }
-}
+      .made-by:focus-visible {
+        outline: 2px solid var(--pd-focus-ring-col, var(--pd-default-col));
+        outline-offset: 2px;
+        border-radius: var(--pd-radius-sm);
+      }
+    `
+];
 __decorateClass([
   property({ type: String })
-], PdFooter.prototype, "copyright");
+], PdFooter.prototype, "copyright", 2);
 __decorateClass([
   property({ type: String })
-], PdFooter.prototype, "version");
+], PdFooter.prototype, "version", 2);
 __decorateClass([
   property({ type: Object })
-], PdFooter.prototype, "madeBy");
+], PdFooter.prototype, "madeBy", 2);
 __decorateClass([
   property({ type: Array })
-], PdFooter.prototype, "footerLinks");
+], PdFooter.prototype, "footerLinks", 2);
+PdFooter = __decorateClass([
+  localized()
+], PdFooter);
 
 export { PdFooter };

package/dist/pd-footer/pd-footer.stories.d.ts

@@ -1,8 +1,48 @@
-import { Meta, StoryFn } from '@storybook/web-components';
-declare const _default: Meta;
-export default _default;
-export declare const Default: StoryFn;
-export declare const OhneVersionUndMadeBy: StoryFn;
-export declare const NurLinks: StoryFn;
-export declare const NurMadeByMitLink: StoryFn;
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+import { PdFooterLink, PdFooterMadeBy } from '../types.js';
+/**
+ * Story arguments interface for pd-footer component.
+ * Maps to the component's public API.
+ */
+interface PdFooterArgs {
+    /** Footer navigation links */
+    footerLinks: PdFooterLink[];
+    /** Copyright text */
+    copyright: string;
+    /** Version string */
+    version: string;
+    /** Developer/agency reference */
+    madeBy?: PdFooterMadeBy;
+}
+/**
+ * ## pd-footer
+ *
+ * Application footer with navigation links, copyright info, version display, and developer reference.
+ *
+ * ### Features
+ * - Configurable footer links with click events
+ * - Copyright text and version string display
+ * - Developer/agency reference with email (mailto:) or external link
+ * - Responsive layout with flex-wrap for links
+ * - Full keyboard accessibility (Tab, Enter, Space on links and madeBy)
+ *
+ * ### Accessibility
+ * - Uses `<nav>` element with `aria-label` for footer navigation landmark
+ * - Footer links use `role="button"` and `tabindex="0"`
+ * - Focus-visible styling for keyboard users
+ * - Made-by link opens in new tab with noopener,noreferrer for security
+ */
+declare const meta: Meta<PdFooterArgs>;
+export default meta;
+type Story = StoryObj<PdFooterArgs>;
+/** Default footer with links, copyright, and version. Interactive via Controls panel. */
+export declare const Default: Story;
+/** Footer with developer/agency reference — email opens mailto:, link opens in new tab. */
+export declare const WithMadeBy: Story;
+/** Minimal footer configurations — different content combinations. */
+export declare const MinimalConfigurations: Story;
+/** Overview of all footer configurations at a glance. */
+export declare const AllVariants: Story;
+/** CSS Custom Properties -- Branded and Redesigned variants. */
+export declare const CustomStyling: Story;
 //# sourceMappingURL=pd-footer.stories.d.ts.map

package/dist/pd-footer/pd-footer.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pd-footer.stories.d.ts","sourceRoot":"","sources":["../../src/pd-footer/pd-footer.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AAI/D,OAAO,gBAAgB,CAAC;wBAcnB,IAAI;AAZT,wBAYU;AAuBV,eAAO,MAAM,OAAO,EAAE,OAA2B,CAAC;AAQlD,eAAO,MAAM,oBAAoB,EAAE,OAA2B,CAAC;AAM/D,eAAO,MAAM,QAAQ,EAAE,OAA2B,CAAC;AAKnD,eAAO,MAAM,gBAAgB,EAAE,OAA2B,CAAC"}
+{"version":3,"file":"pd-footer.stories.d.ts","sourceRoot":"","sources":["../../src/pd-footer/pd-footer.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAErE,OAAO,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAEhE,OAAO,gBAAgB,CAAC;AAMxB;;;GAGG;AACH,UAAU,YAAY;IACpB,8BAA8B;IAC9B,WAAW,EAAE,YAAY,EAAE,CAAC;IAC5B,qBAAqB;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,qBAAqB;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,iCAAiC;IACjC,MAAM,CAAC,EAAE,cAAc,CAAC;CACzB;AA+BD;;;;;;;;;;;;;;;;;GAiBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,YAAY,CA8E5B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;AAMpC,yFAAyF;AACzF,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAMjC,2FAA2F;AAC3F,eAAO,MAAM,UAAU,EAAE,KA0CxB,CAAC;AAMF,sEAAsE;AACtE,eAAO,MAAM,qBAAqB,EAAE,KAkCnC,CAAC;AAMF,yDAAyD;AACzD,eAAO,MAAM,WAAW,EAAE,KA8CzB,CAAC;AAMF,gEAAgE;AAChE,eAAO,MAAM,aAAa,EAAE,KAgF3B,CAAC"}

package/dist/pd-login/PdLogin.d.ts

@@ -0,0 +1,59 @@
+import { LitElement, CSSResultGroup } from 'lit';
+/**
+ * Login form component for email/password authentication.
+ *
+ * This is a pure UI component that emits events for login attempts.
+ * The actual authentication logic should be handled by the parent component.
+ *
+ * Supports two views:
+ * - **login**: Default login form with email and password fields.
+ * - **forgot-password**: Password reset request form with email field only.
+ *
+ * @summary Login form with email and password fields, including forgot password flow.
+ *
+ * @tagname pd-login
+ *
+ * @event login-attempt - Fired when user submits valid credentials. Detail: `LoginAttemptDetail`.
+ * @event forgot-password-attempt - Fired when user requests password reset. Detail: `ForgotPasswordAttemptDetail`.
+ *
+ * @cssprop --pd-login-bg-color - Form background color. Default: `var(--pd-default-bg-light-col)`.
+ * @cssprop --pd-login-border-radius - Form border radius. Default: `var(--pd-radius-md)`.
+ * @cssprop --pd-login-max-width - Maximum width of the form. Default: `500px`.
+ * @cssprop --pd-login-padding - Form padding. Default: `1rem 0 1rem 1rem`.
+ */
+export declare class PdLogin extends LitElement {
+    /** Shows loading state on the submit button. */
+    loading: boolean;
+    /** Error message to display. */
+    errorMessage: string;
+    /** Success message to display (e.g., after password reset request). */
+    successMessage: string;
+    /** Hide the forgot password link. */
+    hideForgotPassword: boolean;
+    /** Current view: login form or forgot password form (internal). */
+    private _view;
+    private _validForm;
+    private _forgotPasswordValidForm;
+    private _prefillEmail;
+    /** @ignore */
+    private _formElement;
+    /** @ignore */
+    private _forgotPasswordFormElement;
+    static styles: CSSResultGroup;
+    render(): import('lit').TemplateResult<1>;
+    private _renderLoginView;
+    private _renderForgotPasswordView;
+    /** Clears the form and resets validation state. */
+    clear(): void;
+    private _handleFormChange;
+    private _handleSubmit;
+    private _handleForgotPassword;
+    private _handleForgotPasswordFormChange;
+    private _handleForgotPasswordSubmit;
+    private _handleBackToLogin;
+    /** Switch to forgot password view. */
+    showForgotPassword(): void;
+    /** Switch back to login view. */
+    showLogin(): void;
+}
+//# sourceMappingURL=PdLogin.d.ts.map

package/dist/pd-login/PdLogin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PdLogin.d.ts","sourceRoot":"","sources":["../../src/pd-login/PdLogin.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAI5D,OAAO,qDAAqD,CAAC;AAC7D,OAAO,+CAA+C,CAAC;AACvD,OAAO,4CAA4C,CAAC;AACpD,OAAO,mDAAmD,CAAC;AAC3D,OAAO,mDAAmD,CAAC;AAS3D;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACrC,gDAAgD;IAEhD,OAAO,UAAS;IAEhB,gCAAgC;IAEhC,YAAY,SAAM;IAElB,uEAAuE;IAEvE,cAAc,SAAM;IAEpB,qCAAqC;IAErC,kBAAkB,UAAS;IAE3B,mEAAmE;IAEnE,OAAO,CAAC,KAAK,CAAwC;IAGrD,OAAO,CAAC,UAAU,CAAS;IAG3B,OAAO,CAAC,wBAAwB,CAAS;IAGzC,OAAO,CAAC,aAAa,CAAM;IAE3B,cAAc;IAEd,OAAO,CAAC,YAAY,CAAmB;IAEvC,cAAc;IAEd,OAAO,CAAC,0BAA0B,CAAmB;IAErD,OAAgB,MAAM,EAAE,cAAc,CA0CpC;IAEF,MAAM;IAMN,OAAO,CAAC,gBAAgB;IAgExB,OAAO,CAAC,yBAAyB;IAqDjC,mDAAmD;IACnD,KAAK,IAAI,IAAI;IAKb,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,aAAa;IAoBrB,OAAO,CAAC,qBAAqB;IAQ7B,OAAO,CAAC,+BAA+B;IAKvC,OAAO,CAAC,2BAA2B;IAsBnC,OAAO,CAAC,kBAAkB;IAK1B,sCAAsC;IACtC,kBAAkB,IAAI,IAAI;IAM1B,iCAAiC;IACjC,SAAS,IAAI,IAAI;CAGlB"}

package/dist/pd-login/PdLogin.js

@@ -0,0 +1,292 @@
+import { css, LitElement, html } from 'lit';
+import { localized, msg } from '@lit/localize';
+import { property, state, query } from 'lit/decorators.js';
+import '@progressive-development/pd-forms/pd-form-container';
+import '@progressive-development/pd-forms/pd-form-row';
+import '@progressive-development/pd-forms/pd-input';
+import '@progressive-development/pd-forms/pd-panel-button';
+import '../pd-content/dist/pd-notice-box/pd-notice-box.js';
+import { pdIcons } from '@progressive-development/pd-icon';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let PdLogin = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.loading = false;
+    this.errorMessage = "";
+    this.successMessage = "";
+    this.hideForgotPassword = false;
+    this._view = "login";
+    this._validForm = false;
+    this._forgotPasswordValidForm = false;
+    this._prefillEmail = "";
+  }
+  render() {
+    return this._view === "login" ? this._renderLoginView() : this._renderForgotPasswordView();
+  }
+  _renderLoginView() {
+    return html`
+      <div class="login-form">
+        ${this.successMessage ? html`<pd-notice-box type="success" variant="sidebar"
+              >${this.successMessage}</pd-notice-box
+            >` : ""}
+
+        <pd-form-container
+          id="loginFormId"
+          @pd-form-change="${this._handleFormChange}"
+          commonError="${this.errorMessage}"
+        >
+          <pd-form-row>
+            <pd-input
+              id="eMail"
+              maxlength="250"
+              fieldType="mail"
+              valueName="email"
+              label="${msg("E-Mail", { id: "pd.login.email.label" })}"
+              autoCompleteName="email"
+              required
+              @enter-pressed="${this._handleSubmit}"
+            ></pd-input>
+          </pd-form-row>
+
+          <pd-form-row>
+            <pd-input
+              id="pWord"
+              secret
+              maxlength="30"
+              label="${msg("Passwort", { id: "pd.login.password.label" })}"
+              valueName="password"
+              autoCompleteName="current-password"
+              required
+              @enter-pressed="${this._handleSubmit}"
+            ></pd-input>
+
+            ${!this.hideForgotPassword ? html`<span class="pwd-link"
+                  ><a href="#" @click="${this._handleForgotPassword}"
+                    >${msg("Passwort vergessen?", {
+      id: "pd.login.forgot.password"
+    })}</a
+                  ></span
+                >` : ""}
+          </pd-form-row>
+        </pd-form-container>
+
+        <pd-form-row>
+          <pd-button
+            text="${msg("Anmelden", { id: "pd.login.submit" })}"
+            icon="${pdIcons.ICON_USER}"
+            ?disabled="${!this._validForm || this.loading}"
+            ?loading="${this.loading}"
+            @button-clicked="${this._handleSubmit}"
+          ></pd-button>
+        </pd-form-row>
+      </div>
+    `;
+  }
+  _renderForgotPasswordView() {
+    return html`
+      <div class="login-form">
+        <pd-notice-box type="info" variant="sidebar">
+          ${msg(
+      "Geben Sie Ihre E-Mail-Adresse ein. Sie erhalten einen Link zum Zurücksetzen Ihres Passworts.",
+      {
+        id: "pd.login.forgot.info"
+      }
+    )}
+        </pd-notice-box>
+
+        <pd-form-container
+          id="forgotPasswordFormId"
+          @pd-form-change="${this._handleForgotPasswordFormChange}"
+          commonError="${this.errorMessage}"
+        >
+          <pd-form-row>
+            <pd-input
+              id="forgotEmail"
+              maxlength="250"
+              fieldType="mail"
+              valueName="email"
+              label="${msg("E-Mail", { id: "pd.login.email.label" })}"
+              autoCompleteName="email"
+              .value="${this._prefillEmail}"
+              required
+              @enter-pressed="${this._handleForgotPasswordSubmit}"
+            ></pd-input>
+
+            <span class="pwd-link">
+              <a href="#" @click="${this._handleBackToLogin}"
+                >${msg("Zurück zur Anmeldung", {
+      id: "pd.login.forgot.back"
+    })}</a
+              >
+            </span>
+          </pd-form-row>
+        </pd-form-container>
+
+        <pd-form-row>
+          <pd-button
+            text="${msg("Link anfordern", { id: "pd.login.forgot.submit" })}"
+            icon="${pdIcons.ICON_MAIL}"
+            ?disabled="${!this._forgotPasswordValidForm || this.loading}"
+            ?loading="${this.loading}"
+            @button-clicked="${this._handleForgotPasswordSubmit}"
+          ></pd-button>
+        </pd-form-row>
+      </div>
+    `;
+  }
+  /** Clears the form and resets validation state. */
+  clear() {
+    this._formElement?.clear();
+    this._validForm = false;
+  }
+  _handleFormChange(e) {
+    this._validForm = e.detail.overallValidity;
+    e.stopPropagation();
+  }
+  _handleSubmit() {
+    if (!this._formElement?.valid || this.loading) {
+      return;
+    }
+    const formValues = this._formElement.getValues().origin;
+    const detail = {
+      email: formValues.email,
+      password: formValues.password
+    };
+    this.dispatchEvent(
+      new CustomEvent("login-attempt", {
+        detail,
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  _handleForgotPassword(e) {
+    e.preventDefault();
+    const formValues = this._formElement?.getValues()?.origin;
+    this._prefillEmail = formValues?.email || "";
+    this._view = "forgot-password";
+  }
+  _handleForgotPasswordFormChange(e) {
+    this._forgotPasswordValidForm = e.detail.overallValidity;
+    e.stopPropagation();
+  }
+  _handleForgotPasswordSubmit() {
+    if (!this._forgotPasswordFormElement?.valid || this.loading) {
+      return;
+    }
+    const formValues = this._forgotPasswordFormElement.getValues().origin;
+    const detail = {
+      email: formValues.email
+    };
+    this.dispatchEvent(
+      new CustomEvent("forgot-password-attempt", {
+        detail,
+        bubbles: true,
+        composed: true
+      })
+    );
+    this._view = "login";
+  }
+  _handleBackToLogin(e) {
+    e.preventDefault();
+    this.showLogin();
+  }
+  /** Switch to forgot password view. */
+  showForgotPassword() {
+    const formValues = this._formElement?.getValues()?.origin;
+    this._prefillEmail = formValues?.email || "";
+    this._view = "forgot-password";
+  }
+  /** Switch back to login view. */
+  showLogin() {
+    this._view = "login";
+  }
+};
+PdLogin.styles = [
+  css`
+      :host {
+        display: flex;
+        justify-content: center;
+        width: 100%;
+      }
+
+      .login-form {
+        display: flex;
+        flex-flow: column;
+        justify-content: center;
+        background-color: var(
+          --pd-login-bg-color,
+          var(--pd-default-bg-light-col)
+        );
+        padding: var(--pd-login-padding, 1rem 0 1rem 1rem);
+        border-radius: var(--pd-login-border-radius, var(--pd-radius-md));
+        max-width: var(--pd-login-max-width, 500px);
+        width: 100%;
+      }
+
+      .pwd-link {
+        display: block;
+        padding-bottom: 0.5em;
+        text-align: right;
+        font-size: 0.8em;
+      }
+
+      .pwd-link a {
+        color: var(--pd-default-link-col, inherit);
+        text-decoration: none;
+      }
+
+      .pwd-link a:hover {
+        text-decoration: underline;
+      }
+
+      pd-notice-box {
+        margin-bottom: var(--pd-spacing-md, 1rem);
+      }
+    `
+];
+__decorateClass([
+  property({ type: Boolean })
+], PdLogin.prototype, "loading", 2);
+__decorateClass([
+  property({ type: String })
+], PdLogin.prototype, "errorMessage", 2);
+__decorateClass([
+  property({ type: String })
+], PdLogin.prototype, "successMessage", 2);
+__decorateClass([
+  property({ type: Boolean })
+], PdLogin.prototype, "hideForgotPassword", 2);
+__decorateClass([
+  state()
+], PdLogin.prototype, "_view", 2);
+__decorateClass([
+  state()
+], PdLogin.prototype, "_validForm", 2);
+__decorateClass([
+  state()
+], PdLogin.prototype, "_forgotPasswordValidForm", 2);
+__decorateClass([
+  state()
+], PdLogin.prototype, "_prefillEmail", 2);
+__decorateClass([
+  query("#loginFormId")
+], PdLogin.prototype, "_formElement", 2);
+__decorateClass([
+  query("#forgotPasswordFormId")
+], PdLogin.prototype, "_forgotPasswordFormElement", 2);
+PdLogin = __decorateClass([
+  localized()
+], PdLogin);
+
+export { PdLogin };

package/dist/pd-login/pd-login.d.ts

@@ -0,0 +1,3 @@
+import { PdLogin } from './PdLogin.js';
+export { PdLogin };
+//# sourceMappingURL=pd-login.d.ts.map

package/dist/pd-login/pd-login.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-login.d.ts","sourceRoot":"","sources":["../../src/pd-login/pd-login.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAOvC,OAAO,EAAE,OAAO,EAAE,CAAC"}