import { customElement, DeesElement, type TemplateResult, html, property, type CSSResult, } from '@design.estate/dees-element'; import * as domtools from '@design.estate/dees-domtools'; declare global { interface HTMLElementTagNameMap { 'dees-windowlayer': DeesWindowLayer; } } @customElement('dees-windowlayer') export class DeesWindowLayer extends DeesElement { // STATIC public static demo = () => html``; // INSTANCE @property({ type: Boolean }) public visible = false; constructor() { super(); domtools.elementBasic.setup(); } public render(): TemplateResult { return html` ${domtools.elementBasic.styles}
`; } firstUpdated() { setTimeout(() => { this.visible = true; }, 100); } dispatchClicked() { this.dispatchEvent(new CustomEvent('clicked')); } public toggleVisibility () { this.visible = !this.visible; } public async show() { const domtools = await this.domtoolsPromise; await domtools.convenience.smartdelay.delayFor(0); this.visible = true; } public async hide() { const domtools = await this.domtoolsPromise; await domtools.convenience.smartdelay.delayFor(0); this.visible = false; } }