@lion/ui/docs/fundamentals/tools/singleton-manager/example-complex/node_modules/page-a/page-a.js

A package of extendable web components

import { LitElement, html, css } from 'lit-element';
import { overlays } from 'overlays/instance.js';

export class PageA extends LitElement {
  static get styles() {
    return css`
      :host {
        display: block;
        padding: 10px;
        border: 2px solid #ccc;
      }
    `;
  }

  render() {
    return html`
      <h3>I am page A</h3>
      <p>Overlays Status:</p>
      <p>Name: ${overlays.name}</p>
      <p>Blocked: ${overlays.blockBody}</p>
      <button @click=${() => {
        overlays.block(); this.requestUpdate();
      }}>block</button>
      <button @click=${() => {
        overlays.unBlock(); this.requestUpdate();
      }}>un-block</button>
      <button @click=${() => {
        this.requestUpdate();
      }}>refresh</button>
    `;
  }
}


customElements.define('page-a', PageA);