dees-catalog/ts_web/elements/dees-windowlayer.ts

import { customElement, DeesElement, TemplateResult, html, property } from '@designestate/dees-element';

import * as domtools from '@designestate/dees-domtools';

declare global {
  interface HTMLElementTagNameMap {
    'dees-windowlayer': DeesWindowLayer;
  }
}

@customElement('dees-windowlayer')
export class DeesWindowLayer extends DeesElement {
  // STATIC
  public static demo = () => html`<dees-windowlayer></dees-windowlayer>`;

  // INSTANCE
  @property({
    type: Boolean
  })
  public visible = false;

  constructor() {
    super();
    domtools.elementBasic.setup();
  }

  public render(): TemplateResult {
    return html`
      ${domtools.elementBasic.styles}
      <style>
        .windowOverlay {
          transition: all 0.3s;
          will-change: transform;
          position: fixed;
          top: 0px;
          left: 0px;
          height: 100vh;
          width: 100vw;
          display: flex;
          justify-content: center;
          align-items: center;
          background: rgba(0, 0, 0, 0.0);
          backdrop-filter: brightness(1);
          pointer-events: none;
        }
        
        .visible {
          background: rgba(0, 0, 0, 0.2);
          backdrop-filter: brightness(0.3);
          pointer-events: all;
        }
      </style>
      <div @click=${this.dispatchClicked} class="windowOverlay ${this.visible ? 'visible' : null}">
        <slot></slot>
      </div>
    `;
  }

  firstUpdated() {
    setTimeout(() => {
      this.visible = true;
    }, 100);
  }

  dispatchClicked() {
    this.dispatchEvent(new CustomEvent('clicked'))
  }

  public toggleVisibility () {
    this.visible = !this.visible;
  }
}