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

Codeperate UI Library

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

const CdpMenu = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this._config = {};
    this.defaultConfig = {
      sensitivity: 0.5,
      background: true,
      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: false,
    };
    this.translateX = 0;
    this.moveHandler = (e) => {
      if (e instanceof TouchEvent)
        this.finalXPos = e.touches[0].clientX;
      this.offsetX = (this.finalXPos - this.initXPos) * this._config.sensitivity;
      if (this.offsetX <= 0)
        this.offsetX = 0;
      if (this.offsetX >= 100)
        this.offsetX = 100;
      this.translateX = this.offsetX;
      this.setTranslateX();
    };
  }
  touchDownHandler(e) {
    if (this.containerEl.contains(e.target))
      return;
    {
      const transform = getComputedStyle(this.containerEl).transform;
      const matrix = new WebKitCSSMatrix(transform);
      if (matrix.m41 >= 0)
        return;
    }
    this.initXPos = e.touches[0].clientX;
    addEventListener('touchmove', this.moveHandler, { passive: false });
  }
  touchUpHandler() {
    removeEventListener('touchmove', this.moveHandler);
    if (this.translateX <= 50) {
      this.close();
    }
    if (this.translateX > 50) {
      this.open();
    }
  }
  open() {
    this._props.display = true;
  }
  close() {
    this._props.display = false;
  }
  setTranslateX() {
    if (this.containerEl)
      this.containerEl.style.transform = `translateX(${this.translateX - 100}%)`;
  }
  removeTranslateX() {
    if (this.containerEl) {
      this.containerEl.style.transform = null;
      this.translateX = 0;
    }
  }
  componentWillLoad() {
    this._config = deepAssign(this.config, this.defaultConfig);
    this.createProxy();
  }
  createProxy() {
    var _a;
    const set = (target, prop, value, receiver) => {
      this.props = Object.assign(Object.assign({}, target), { [prop]: value });
      return Reflect.set(target, prop, value, receiver);
    };
    this._props = new Proxy(this.props, (_a = this._config.proxyHandler) !== null && _a !== void 0 ? _a : { set });
  }
  configChangeHandler(n) {
    if (n.display) {
      this.translateX = 100;
      this.setTranslateX();
    }
    if (!n.display)
      this.removeTranslateX();
  }
  render() {
    const { classList, width, background } = this._config;
    const { display } = this.props;
    return (h(Host, { class: `${classList.host}` }, display && background ? h("div", { class: `${classList.background}`, onClick: () => this.close() }) : '', h("div", { ref: el => (this.containerEl = el), class: `${classList.container}`, style: width ? { width: width } : {} }, h("slot", null))));
  }
  get rootEl() { return getElement(this); }
  static get watchers() { return {
    "props": ["configChangeHandler"]
  }; }
};

export { CdpMenu as cdp_menu };