@codeperate/cdp-ui-library/dist/cdp-ui-library/p-88b51379.entry.js

Codeperate UI Library

import{r as t,h as s,H as i,a as e}from"./p-21e532ba.js";import{d as h}from"./p-c571c098.js";const n=class{constructor(s){t(this,s),this._config={},this.defaultConfig={sensitivity:.5,background:!0,classList:{host:"h-full block relative <md:w-0",container:"<md:transition-transform <md:translate-x-[-100%] transform sticky h-screen w-full top-0 overflow-y-auto",background:"<md:fixed md:hidden w-screen h-screen bg-black bg-opacity-50"}},this.props={display:!1},this.translateX=0,this.moveHandler=t=>{t instanceof TouchEvent&&(this.finalXPos=t.touches[0].clientX),this.offsetX=(this.finalXPos-this.initXPos)*this._config.sensitivity,this.offsetX<=0&&(this.offsetX=0),this.offsetX>=100&&(this.offsetX=100),this.translateX=this.offsetX,this.setTranslateX()}}touchDownHandler(t){if(!this.containerEl.contains(t.target)){{const t=getComputedStyle(this.containerEl).transform;if(new WebKitCSSMatrix(t).m41>=0)return}this.initXPos=t.touches[0].clientX,addEventListener("touchmove",this.moveHandler,{passive:!1})}}touchUpHandler(){removeEventListener("touchmove",this.moveHandler),this.translateX<=50&&this.close(),this.translateX>50&&this.open()}open(){this._props.display=!0}close(){this._props.display=!1}setTranslateX(){this.containerEl&&(this.containerEl.style.transform=`translateX(${this.translateX-100}%)`)}removeTranslateX(){this.containerEl&&(this.containerEl.style.transform=null,this.translateX=0)}componentWillLoad(){this._config=h(this.config,this.defaultConfig),this.createProxy()}createProxy(){var t;this._props=new Proxy(this.props,null!==(t=this._config.proxyHandler)&&void 0!==t?t:{set:(t,s,i,e)=>(this.props=Object.assign(Object.assign({},t),{[s]:i}),Reflect.set(t,s,i,e))})}configChangeHandler(t){t.display&&(this.translateX=100,this.setTranslateX()),t.display||this.removeTranslateX()}render(){const{classList:t,width:e,background:h}=this._config,{display:n}=this.props;return s(i,{class:`${t.host}`},n&&h?s("div",{class:`${t.background}`,onClick:()=>this.close()}):"",s("div",{ref:t=>this.containerEl=t,class:`${t.container}`,style:e?{width:e}:{}},s("slot",null)))}get rootEl(){return e(this)}static get watchers(){return{props:["configChangeHandler"]}}};export{n as cdp_menu}