modal-container.ts

import { CSSResultGroup, LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';

import { WebComponentsBase } from '../base';

import { modalStyle } from './styles/index.style';
import { ModalOptions } from './types';

const WebComponentsBaseElement = WebComponentsBase(LitElement);
const styles: CSSResultGroup[] = [WebComponentsBaseElement.styles, modalStyle];

@customElement('superviz-modal-container')
export class ModalContainer extends WebComponentsBaseElement {
  static styles = styles;

  private options: ModalOptions;

  setOptions(options: ModalOptions) {
    this.options = options;
  }

  private closeModal = () => {
    window.document.body.dispatchEvent(
      new CustomEvent('superviz-modal--close', {
        bubbles: true,
        composed: true,
      }),
    );
  };

  private confirmModal = () => {
    window.document.body.dispatchEvent(
      new CustomEvent('superviz-modal--confirm', {
        bubbles: true,
        composed: true,
      }),
    );
  };

  protected render() {
    const header = () => {
      return html`
        <div class="modal--header">
          <span class="text text-bold sv-gray-600">${this.options.title}</span>
          <div class="close" @click=${this.closeModal}>
            <superviz-icon name="close" size="md"></superviz-icon>
          </div>
        </div>
      `;
    };

    const body = () => {
      return html`
        <div class="modal--body">
          <div class="modal--body-content">${this.options.body}</div>
        </div>
      `;
    };

    const footer = () => {
      if (this.options.footer) {
        return html` <div class="modal--footer">${this.options.footer}</div> `;
      }

      const confirmLabel = this.options.confirmLabel || 'OK';
      const cancelLabel = this.options.cancelLabel || 'Cancel';

      if (this.options.confirm && this.options.cancel) {
        return html`
          <div class="modal--footer">
            <button class="text text-bold btn btn--cancel" @click=${this.closeModal}>
              ${cancelLabel}
            </button>
            <button class="text text-bold btn btn--confirm" @click=${this.confirmModal}>
              ${confirmLabel}
            </button>
          </div>
        `;
      }

      return html`
        <div class="modal--footer">
          <button class="text text-bold btn btn--confirm" @click=${this.confirmModal}>
            ${confirmLabel}
          </button>
        </div>
      `;
    };

    return html`
      <div class="modal--overlay"></div>
      <div class="modal--container">
        <div class="modal">${header()} ${body()} ${footer()}</div>
      </div>
    `;
  }
}