import { demoFunc } from './dees-simple-login.demo.js'; import { customElement, html, DeesElement, property, type TemplateResult, cssManager, css, unsafeCSS, type CSSResult, state, } 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() public name = 'Dees Simple Login'; public static styles = [ cssManager.defaultStyles, css` :host { color: ${cssManager.bdTheme('#333', '#fff')}; user-select: none; } .loginContainer { position: absolute; display: flex; justify-content: center; /* aligns horizontally */ align-items: center; /* aligns vertically */ width: 100%; height: 100%; top: 0px; left: 0px; } .slotContainer { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; } .login { min-width: 320px; min-height: 100px; background: ${cssManager.bdTheme('#eeeeeb', '#111')}; box-shadow: ${cssManager.bdTheme('0px 1px 4px rgba(0,0,0,0.3)', 'none')}; border-radius: 8px; padding: 24px; transition: opacity 0.3s, transform 0.3s; } .header { text-align: center; } .slotContainer { opacity:0; transition: opacity 0.3s, transform 0.3s; pointer-events: none; } `, ]; public render(): TemplateResult { return html`
Login to ${this.name}
login
`; } public async firstUpdated(_changedProperties): Promise { const domtools = await this.domtoolsPromise; super.firstUpdated(_changedProperties); const form = this.shadowRoot.querySelector('dees-form'); await form.readyDeferred.promise; const username = this.shadowRoot.querySelector('dees-input-text[label="username"]'); const password = this.shadowRoot.querySelector('dees-input-text[label="password"]'); const submit = this.shadowRoot.querySelector('dees-form-submit'); form.addEventListener('formData', (event: CustomEvent) => { this.dispatchEvent(new CustomEvent('login', { detail: event.detail })); // this.switchToSlottedContent(); }); } /** * 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'; } }