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

Codeperate UI Library

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-189a024f.js');
const deepAssign = require('./deep-assign-b6a043d3.js');

const CdpModal = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.opened = index.createEvent(this, "opened", 7);
    this.closed = index.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.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 (index.h(index.Host, { class: hostClass, onClick: e => this.bgCloseHandler(e) }, index.h("slot", null)));
  }
  get rootEl() { return index.getElement(this); }
  static get watchers() { return {
    "props": ["propsHandler"],
    "config": ["configChangeHandler"]
  }; }
};

exports.cdp_modal = CdpModal;