import { r as registerInstance, h, g as getElement } from './index-cdf8e526.js';
import { m as modifiersToClass } from './utils-f909044c.js';

const drawerCss = ".ibk-drawer{box-sizing:border-box;position:fixed;height:100%;width:100%;background-color:rgba(255, 255, 255, 0.75);cursor:pointer;top:0;left:0;opacity:0;display:none;transition:var(--slow);overflow:hidden;z-index:10}.ibk-drawer--container{top:initial;left:initial;z-index:initial}.ibk-drawer *{box-sizing:border-box}.ibk-drawer__content{padding:30px;background-color:white;position:absolute;cursor:default;transition:var(--slow)}.ibk-drawer--open-right .ibk-drawer__content{top:0;right:-100%;height:100%;width:500px;box-shadow:-2px 0 5px 0 var(--gray4)}.ibk-drawer--open-left .ibk-drawer__content{top:0;left:-100%;height:100%;width:500px;box-shadow:2px 0 5px 0 var(--gray4)}.ibk-drawer--open-top .ibk-drawer__content{top:-100%;left:0;width:100%;box-shadow:0 2px 5px 0 var(--gray4)}.ibk-drawer--open-bottom .ibk-drawer__content{bottom:-100%;left:0;width:100%;box-shadow:0 -2px 5px 0 var(--gray4)}.ibk-drawer__close{appearance:none;-webkit-appearance:none;-moz-appearance:none;outline:none;background-color:transparent;border:none;position:absolute;top:20px;right:20px;font-size:24px;cursor:pointer;color:var(--grayText)}.ibk-drawer__close:active{transform:translateY(1px)}";

const IbkDrawer = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    /** Determina la posición en donde se abrirá el contenido del drawer */
    this.position = 'right';
    /** Determina si el drawer se encuentra visible o no */
    this.show = false;
    /** Configura la clase del componente basado en estados y modificadores */
    this.containerClass = () => {
      return modifiersToClass('ibk-drawer', [
        `open-${this.position}`,
        { container: this.container != undefined }
      ]);
    };
    this.getContainerLimits = () => {
      if (this.container != null) {
        let limits = {};
        const element = document.querySelector(this.container);
        const top = element.offsetTop;
        const left = element.offsetLeft;
        const bottom = window.innerHeight - (top + element.clientHeight);
        const right = window.innerWidth - (left + element.clientWidth);
        const height = element.clientHeight;
        const width = element.clientWidth;
        if (this.position == 'right') {
          limits.top = top + 'px';
          limits.right = right + 'px';
        }
        else if (this.position == 'bottom') {
          limits.bottom = bottom + 'px';
          limits.left = left + 'px';
        }
        else if (this.position == 'left') {
          limits.top = top + 'px';
          limits.left = left + 'px';
        }
        else if (this.position == 'top') {
          limits.top = top + 'px';
          limits.left = left + 'px';
        }
        limits.width = width + 'px';
        limits.height = height + 'px';
        return limits;
      }
    };
    /** Cierra el drawer al dar click sobre el fondo o el botón cerrar */
    this.hideDrawer = (e) => {
      const t = e.target;
      const content = t.closest('.ibk-drawer__content');
      if (content == null) {
        this.host.removeAttribute('show');
      }
    };
  }
  onShowChange(show) {
    const mask = this.host.querySelector('.ibk-drawer');
    const content = this.host.querySelector('.ibk-drawer__content');
    if (show) {
      mask.style.display = 'block';
      setTimeout(() => mask.style.opacity = '1', 10);
      setTimeout(() => {
        if (this.position == 'right') {
          content.style.right = '0';
        }
        else if (this.position == 'left') {
          content.style.left = '0';
        }
        else if (this.position == 'bottom') {
          content.style.bottom = '0';
        }
        else if (this.position == 'top') {
          content.style.top = '0';
        }
      }, 250);
    }
    else {
      if (this.position == 'right') {
        content.style.right = '-100%';
      }
      else if (this.position == 'left') {
        content.style.left = '-100%';
      }
      else if (this.position == 'bottom') {
        content.style.bottom = '-100%';
      }
      else if (this.position == 'top') {
        content.style.top = '-100%';
      }
      setTimeout(() => mask.style.opacity = '0', 250);
      setTimeout(() => mask.style.display = 'none', 500);
    }
  }
  render() {
    return (h("div", { class: this.containerClass(), onClick: this.hideDrawer, style: this.getContainerLimits() }, h("div", { class: "ibk-drawer__content", style: { backgroundColor: this.backgroundColor } }, h("button", { onClick: () => this.host.removeAttribute('show'), type: "button", class: "ibk-drawer__close icon-m-close" }), h("slot", null))));
  }
  get host() { return getElement(this); }
  static get watchers() { return {
    "show": ["onShowChange"]
  }; }
};
IbkDrawer.style = drawerCss;

export { IbkDrawer as ibk_drawer };
