@codeperate/cdp-ui-library/dist/cdp-ui-library/p-7f027868.entry.js

Codeperate UI Library

import{r as s,c as t,h as i,H as e,a as o}from"./p-21e532ba.js";import{d as h}from"./p-c571c098.js";const n=class{constructor(i){s(this,i),this.opened=t(this,"opened",7),this.closed=t(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:!0}}animationendHandler(){const{display:s}=this.props;s?this.openedFn():this.closedFn()}openedFn(){this.opened.emit(),this.animeClass=""}closedFn(){this.computedDisplay=!1,this.closed.emit(),this.animeClass=""}open(){const{open:s}=this._config.animation;this.computedDisplay=!0,s?this.animeClass=s:this.openedFn()}close(){const{close:s}=this._config.animation;s?this.animeClass=s:this.closedFn()}propsHandler(s,t){s.display&&!t.display&&this.open(),!s.display&&t.display&&this.close()}configChangeHandler(){this._config=h(this.config,this.defaultConfig)}componentWillLoad(){this.configChangeHandler(),this.computedDisplay=this.props.display,this.props.display&&this.open()}componentDidRender(){const{open:s,close:t}=this._config.animation;this.rootEl&&(s&&s.split(" ").forEach((s=>this.rootEl.children[0].classList.remove(s))),t&&t.split(" ").forEach((s=>this.rootEl.children[0].classList.remove(s))),this.animeClass&&this.animeClass.split(" ").forEach((s=>this.rootEl.children[0].classList.add(s))))}bgCloseHandler(s){this._config.bgClose&&s.target==this.rootEl&&(this.props=Object.assign(Object.assign({},this.props),{display:!1}))}render(){const{classList:s}=this._config;return i(e,{class:s.host+(this.computedDisplay?"":" !hidden"),onClick:s=>this.bgCloseHandler(s)},i("slot",null))}get rootEl(){return o(this)}static get watchers(){return{props:["propsHandler"],config:["configChangeHandler"]}}};export{n as cdp_modal}