import { customElement, DeesElement, type TemplateResult, html, property, type CSSResult, state, } from '@design.estate/dees-element'; import * as domtools from '@design.estate/dees-domtools'; declare global { interface HTMLElementTagNameMap { 'dees-windowlayer': DeesWindowLayer; } } export interface IOptions_DeesWindowLayer { blur: boolean; } @customElement('dees-windowlayer') export class DeesWindowLayer extends DeesElement { // STATIC public static demo = () => html``; public static async createAndShow(optionsArg?: IOptions_DeesWindowLayer) { const domtoolsInstance = domtools.DomTools.getGlobalDomToolsSync(); const windowLayer = new DeesWindowLayer(); windowLayer.options = { ...windowLayer.options, ...optionsArg, } document.body.append(windowLayer); await domtoolsInstance.convenience.smartdelay.delayFor(0); windowLayer.show(); return windowLayer; } @state() public options: IOptions_DeesWindowLayer = { blur: false }; // 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; } public async destroy() { const domtools = await this.domtoolsPromise; await this.hide(); await domtools.convenience.smartdelay.delayFor(300); this.remove(); } }