import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-baa5e267.js';
import { FloatingManager } from '@sankhyalabs/core';

const ezPopoverCss = ":host{--ez-popover__box--border-radius:var(--border--radius-medium, 12px);--ez-popover__box--box-shadow:var(--shadow, 0px 0px 16px 0px #000);--ez-popover__box--background-color:var(--background--xlight, #fff);--ez-popover__box--z-index:var(--most-visible, 3);position:relative;display:flex;user-select:none}.popover__box{z-index:var(--ez-popover__box--z-index);display:flex;flex-direction:column;height:fit-content;background-color:var(--ez-popover__box--background-color);border-radius:var(--ez-popover__box--border-radius);box-shadow:var(--ez-popover__box--box-shadow)}.popover__box--fit-content{width:fit-content}.popover__box--full-width{width:100%}";

const EzPopover = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.ezVisibilityChange = createEvent(this, "ezVisibilityChange", 7);
    this._firstRender = true;
    this.innerClickTest = (_popOvercontainer, node, eventOrigin) => {
      const innerContainers = [_popOvercontainer];
      if (this.innerElement) {
        if (typeof (this.innerElement) == "string") {
          innerContainers.push(document.querySelector(`#${this.innerElement}`));
        }
        else {
          this.innerElement.forEach(comp => {
            innerContainers.push(document.querySelector(`#${comp}`));
          });
        }
      }
      const eventPath = (eventOrigin === null || eventOrigin === void 0 ? void 0 : eventOrigin.composedPath()) || [];
      for (var i = 0; i < innerContainers.length; i++) {
        let _container = innerContainers[i];
        if (_container != undefined) {
          if (eventPath.includes(_container)) {
            return true;
          }
          if (_container.contains(node)) {
            return true;
          }
          if (eventOrigin && "nodeType" in (eventOrigin === null || eventOrigin === void 0 ? void 0 : eventOrigin.target) && _container.contains(eventOrigin.target)) {
            return true;
          }
          if (_container.shadowRoot && _container.shadowRoot.contains(node)) {
            return true;
          }
          _container = this._host;
          if (!_container.lastElementChild.shadowRoot ? _container.contains(node) : _container.lastElementChild.shadowRoot.contains(node)) {
            return true;
          }
        }
      }
      return false;
    };
    this.backClickListener = () => {
      this.ezVisibilityChange.emit(false);
    };
    this.autoClose = true;
    this.boxWidth = "fit-content";
    this.opened = undefined;
    this.innerElement = undefined;
    this.overlayType = "light";
  }
  observeOpened(newValue, oldValue) {
    if (newValue != oldValue) {
      if (oldValue) {
        this.hide();
      }
      else {
        this.show();
      }
      this.ezVisibilityChange.emit(newValue);
    }
  }
  /**
   * Atualiza a posição do popover.
   */
  async updatePosition(top, left) {
    const floatingOptions = {
      autoClose: this.autoClose,
      top,
      left,
      innerClickTest: this.innerClickTest,
      backClickListener: this.backClickListener
    };
    FloatingManager.updateFloatPosition(this._box, this._container, floatingOptions);
  }
  /**
   * Exibe o ez-popover.
   */
  async show(top, left) {
    this.float({ top, left });
  }
  /**
   * Ancora a exibição do popOver a um elemento HTML.
   */
  async showUnder(element, options) {
    if (element && this._host) {
      this.float(this.calculatePosition(element, Object.assign({ verticalGap: 0, horizontalGap: 0, fromRight: false }, options)));
    }
    else {
      const top = (options === null || options === void 0 ? void 0 : options.verticalGap) ? `${options.verticalGap}px` : undefined;
      const left = (options === null || options === void 0 ? void 0 : options.horizontalGap) ? `${options.horizontalGap}px` : undefined;
      this.show(top, left);
    }
  }
  calculatePosition(element, options) {
    const boxRect = this._host.getBoundingClientRect();
    const anchorRect = element.getBoundingClientRect();
    const yOffset = anchorRect.bottom - boxRect.y;
    const xOffset = options.fromRight ? boxRect.right - anchorRect.right : anchorRect.x - boxRect.x;
    const yProperty = `${yOffset + options.verticalGap}px`;
    const xProperty = `${xOffset + options.horizontalGap}px`;
    return {
      top: yProperty,
      left: options.fromRight ? "" : xProperty,
      right: options.fromRight ? xProperty : ""
    };
  }
  float(position) {
    this._box.style.top = "";
    this._box.style.left = "";
    this._box.style.right = "";
    const useOverlay = this.overlayType !== "none";
    const overlayClassName = `ez-scrim ez-scrim--${this.overlayType}`;
    let floatingOptions = Object.assign(Object.assign({}, position), { autoClose: this.autoClose, innerClickTest: this.innerClickTest, backClickListener: this.backClickListener });
    if (useOverlay) {
      floatingOptions = Object.assign(Object.assign({}, floatingOptions), { autoClose: true, useOverlay,
        overlayClassName });
    }
    this._floatingID = FloatingManager.float(this._box, this._container, floatingOptions);
    this.opened = true;
  }
  /**
   * Oculta o ez-popover.
   */
  async hide() {
    if (this._floatingID !== undefined) {
      FloatingManager.close(this._floatingID);
      this._floatingID = undefined;
      this.opened = false;
    }
  }
  componentDidRender() {
    if (this._firstRender) {
      this._box.remove();
      this._firstRender = false;
    }
  }
  render() {
    return (h(Host, null, h("section", { ref: el => this._container = el }, h("div", { class: `popover__box ${this.boxWidth === "fit-content" ? "popover__box--fit-content" : "popover__box--full-width"}`, ref: el => this._box = el }, h("slot", null)))));
  }
  get _host() { return getElement(this); }
  static get watchers() { return {
    "opened": ["observeOpened"]
  }; }
};
EzPopover.style = ezPopoverCss;

export { EzPopover as ez_popover };
