@codeperate/cdp-ui-library/dist/esm/cdp-modal.entry.js

Codeperate UI Library

import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-de893d6b.js';
import { d as deepAssign } from './deep-assign-b22cb0e3.js';

const CdpModal = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.opened = createEvent(this, "opened", 7);
    this.closed = createEvent(this, "closed", 7);
    this.props = {};
    this.defaultConfig = {
      classList: {
        host: 'absolute h-full w-full flex items-center justify-center left-0 top-0 bg-black bg-opacity-80 backdrop-filter',
      },
      animation: {
        open: 'animated animate-zoom-in',
        close: 'animated animate-zoom-out',
      },
      bgClose: true,
    };
  }
  animationendHandler() {
    const { display } = this.props;
    if (!display)
      this.closedFn();
    else
      this.openedFn();
  }
  openedFn() {
    this.opened.emit();
    this.animeClass = '';
  }
  closedFn() {
    this.computedDisplay = false;
    this.closed.emit();
    this.animeClass = '';
  }
  open() {
    const { open } = this._config.animation;
    this.computedDisplay = true;
    if (open)
      this.animeClass = open;
    else
      this.openedFn();
  }
  close() {
    const { close } = this._config.animation;
    if (close)
      this.animeClass = close;
    else
      this.closedFn();
  }
  propsHandler(n, o) {
    if (n.display && !o.display)
      this.open();
    if (!n.display && o.display)
      this.close();
  }
  configChangeHandler() {
    this._config = deepAssign(this.config, this.defaultConfig);
  }
  componentWillLoad() {
    this.configChangeHandler();
    this.computedDisplay = this.props.display;
    if (this.props.display)
      this.open();
  }
  componentDidRender() {
    const { open, close } = this._config.animation;
    if (this.rootEl) {
      if (open)
        open.split(' ').forEach(val => this.rootEl.children[0].classList.remove(val));
      if (close)
        close.split(' ').forEach(val => this.rootEl.children[0].classList.remove(val));
      if (this.animeClass)
        this.animeClass.split(' ').forEach(val => this.rootEl.children[0].classList.add(val));
    }
  }
  bgCloseHandler(e) {
    if (this._config.bgClose && e.target == this.rootEl)
      this.props = Object.assign(Object.assign({}, this.props), { display: false });
  }
  render() {
    const { classList } = this._config;
    const hostClass = classList.host + (this.computedDisplay ? '' : ' !hidden');
    return (h(Host, { class: hostClass, onClick: e => this.bgCloseHandler(e) }, h("slot", null)));
  }
  get rootEl() { return getElement(this); }
  static get watchers() { return {
    "props": ["propsHandler"],
    "config": ["configChangeHandler"]
  }; }
};

export { CdpModal as cdp_modal };