feat(structure): adjust

ts_web/elements/dees-simple-login/dees-simple-login.ts

@@ -0,0 +1,152 @@
+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('#333', '#ccc')};
+        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('#f5f5f5', '#000')};
+      }
+
+      .slotContainer {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        opacity: 0;
+        transition: opacity 0.3s, transform 0.3s;
+        pointer-events: none;
+      }
+
+      .login {
+        min-width: 320px;
+        background: ${cssManager.bdTheme('#ffffff', '#111')};
+        box-shadow: ${cssManager.bdTheme(
+          '0 4px 12px rgba(0, 0, 0, 0.15)',
+          '0 4px 12px rgba(0, 0, 0, 0.3)'
+        )};
+        border-radius: 8px;
+        border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
+        padding: 24px;
+        transition: opacity 0.3s, transform 0.3s;
+      }
+
+      .header {
+        text-align: center;
+        font-size: 16px;
+        font-weight: 600;
+        margin-bottom: 20px;
+        color: ${cssManager.bdTheme('#000', '#fff')};
+      }
+      
+      .login dees-form {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+      }
+      
+      .login dees-input-text {
+        width: 100%;
+      }
+      
+      .login dees-form-submit {
+        margin-top: 4px;
+        width: 100%;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="loginContainer">
+        <div class="login">
+          <div class="header">Login to ${this.name}</div>
+          <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>Login</dees-form-submit>
+          </dees-form>
+        </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';
+  }
+}