dees-catalog/ts_web/elements/00group-simple/dees-simple-login/dees-simple-login.ts

import { demoFunc } from './dees-simple-login.demo.js';

import {
  customElement,
  html,
  DeesElement,
  property,
  type TemplateResult,
  cssManager,
  css,
} from '@design.estate/dees-element';

declare global {
  interface HTMLElementTagNameMap {
    'dees-simple-login': DeesSimpleLogin;
  }
}

@customElement('dees-simple-login')
export class DeesSimpleLogin extends DeesElement {
  // STATIC
  public static demo = demoFunc
  // INSTANCE

  @property()
  accessor name: string = 'Application';

  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
        user-select: none;
        display: block;
        width: 100%;
        height: 100%;
        font-family: 'Geist Sans', sans-serif;
      }

      .loginContainer {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
      }

      .slotContainer {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        opacity: 0;
        transition: opacity 0.2s ease, transform 0.2s ease;
        pointer-events: none;
      }

      .login {
        width: 100%;
        max-width: 360px;
        display: flex;
        flex-direction: column;
        gap: 24px;
      }

      .login-header {
        display: flex;
        flex-direction: column;
        gap: 8px;
        text-align: center;
      }

      .header {
        font-size: 24px;
        font-weight: 600;
        letter-spacing: -0.025em;
        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')};
      }

      .subheader {
        font-size: 14px;
        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
      }

      .login-card {
        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
        border-radius: 8px;
        padding: 24px;
      }

      .login-card dees-form {
        display: flex;
        flex-direction: column;
        gap: 16px;
      }

      .login-card dees-input-text {
        width: 100%;
      }

      .login-card dees-form-submit {
        margin-top: 8px;
        width: 100%;
      }
    `,
  ];

  public render(): TemplateResult {
    return html`
      <div class="loginContainer">
        <div class="login">
          <div class="login-header">
            <div class="header">Sign in</div>
            <div class="subheader">Enter your credentials to access ${this.name}</div>
          </div>
          <div class="login-card">
            <dees-form>
              <dees-input-text key="username" label="Username" required></dees-input-text>
              <dees-input-text key="password" label="Password" isPasswordBool required></dees-input-text>
              <dees-form-submit>Sign in</dees-form-submit>
            </dees-form>
          </div>
        </div>
      </div>
      <div class="slotContainer">
        <slot></slot>
      </div>
    `;
  }

  public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>): Promise<void> {
    super.firstUpdated(_changedProperties);
    
    const form = this.shadowRoot.querySelector('dees-form') as any;
    if (form) {
      form.addEventListener('formData', (event: CustomEvent) => {
        this.dispatchEvent(new CustomEvent('login', { 
          detail: event.detail, 
          bubbles: true, 
          composed: true 
        }));
      });
    }
  }

  /**
   * allows switching to slotted content
   */
  public async switchToSlottedContent() {
    const domtools = await this.domtoolsPromise;
    const loginDiv: HTMLDivElement = this.shadowRoot.querySelector('.login');
    const loginContainerDiv: HTMLDivElement = this.shadowRoot.querySelector('.loginContainer');
    const slotContainerDiv: HTMLDivElement = this.shadowRoot.querySelector('.slotContainer');
    loginDiv.style.opacity = '0';
    loginDiv.style.transform = 'translateY(20px)';
    loginContainerDiv.style.pointerEvents = 'none';
    slotContainerDiv.style.transform = 'translateY(20px)';
    await domtools.convenience.smartdelay.delayFor(300);
    slotContainerDiv.style.opacity = '1';
    slotContainerDiv.style.transform = 'translateY(0px)';
    await domtools.convenience.smartdelay.delayFor(300);
    slotContainerDiv.style.pointerEvents = 'all';
  }
}