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

import { customElement, LitElement, TemplateResult, html, property } from 'lit-element';

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

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

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

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

  public render(): TemplateResult {
    return html`
      ${domtools.elementBasic.styles}
      <style>
        .windowOverlay {
          will-change: transform;
          transition: all 1s;
          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: blur(0px);
        }
        
        .visible {
          background: rgba(0, 0, 0, 0.2);
          backdrop-filter: brightness(0.3);
        }
      </style>
      <div class="windowOverlay">
        <slot></slot>
      </div>
    `;
  }

  firstUpdated() {
    setTimeout(() => {
      this.shadowRoot.querySelector('.windowOverlay').classList.add('visible');
    }, 100);
  }
}