@codeperate/cdp-ui-library/dist/collection/components/cdp/cdp-modal/cdp-modal.js

Codeperate UI Library

import { Component, Element, Event, h, Host, Listen, Prop, State, Watch } from '@stencil/core';
import { deepAssign } from '../../../utils/deep-assign';
export class CdpModal {
  constructor() {
    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)));
  }
  static get is() { return "cdp-modal"; }
  static get properties() { return {
    "config": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "CdpModalConfig",
        "resolved": "CdpModalConfig",
        "references": {
          "CdpModalConfig": {
            "location": "import",
            "path": "./cdp-modal.interface"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    },
    "props": {
      "type": "unknown",
      "mutable": true,
      "complexType": {
        "original": "CdpModalProps",
        "resolved": "CdpModalProps",
        "references": {
          "CdpModalProps": {
            "location": "import",
            "path": "./cdp-modal.interface"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "defaultValue": "{}"
    }
  }; }
  static get states() { return {
    "_config": {},
    "animeClass": {},
    "computedDisplay": {}
  }; }
  static get events() { return [{
      "method": "opened",
      "name": "opened",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }, {
      "method": "closed",
      "name": "closed",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }]; }
  static get elementRef() { return "rootEl"; }
  static get watchers() { return [{
      "propName": "props",
      "methodName": "propsHandler"
    }, {
      "propName": "config",
      "methodName": "configChangeHandler"
    }]; }
  static get listeners() { return [{
      "name": "animationend",
      "method": "animationendHandler",
      "target": undefined,
      "capture": false,
      "passive": false
    }]; }
}