import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-baa5e267.js';
import { c as computePosition, f as flip, s as shift } from './floating-ui.dom.esm-ad30f2f0.js';

const ezPopoverCoreCss = ":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(--elevation--100, 100);--ez-popover__box--overlay-z-index:var(--elevation--24, 24);position:relative;display:flex;user-select:none}.popover__overlay{display:none;position:fixed;padding:0;top:0px;left:0px;width:100%;height:100vh;box-sizing:border-box;z-index:var(--ez-popover__box--overlay-z-index)}.popover__overlay--light{background-color:rgba(var(--rgb-background--overlay), var(--opacity--bright))}.popover__overlay--medium{background-color:rgba(var(--rgb-background--overlay), var(--opacity--soft));backdrop-filter:blur(var(--background-blur--medium))}.popover__box{display:none;position:fixed;top:0;left:0;z-index:var(--ez-popover__box--z-index);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:calc(100% - 10px)}";

const EzPopoverCore = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.ezVisibilityChange = createEvent(this, "ezVisibilityChange", 7);
    this.autoClose = true;
    this.boxWidth = "fit-content";
    this.opened = false;
    this.overlayType = "light";
    this.anchorElement = undefined;
    this.options = { horizontalGap: 0, verticalGap: 0, fromRight: false };
    this.useAnchorSize = false;
    this.minWidth = 150;
  }
  observeOpened(newValue, oldValue) {
    if (newValue === oldValue) {
      return;
    }
    if (newValue) {
      this.openPopover();
    }
    else {
      this.hidePopover();
    }
  }
  /**
   * Atualiza a posição do popover.
   */
  async updatePosition(top, left) {
    this.updateOptionPosition(top, left);
    await this.updatePositionPopover();
  }
  /**
   * Exibe o ez-popover.
   */
  async show(top, left) {
    this.updateOptionPosition(top, left);
    this.opened = true;
  }
  /**
   * Ancora a exibição do popOver a um elemento HTML.
   */
  async showUnder(element, options) {
    if (options) {
      this.options = options;
    }
    this.anchorElement = element;
    this.opened = true;
  }
  /**
   * Oculta o ez-popover.
   */
  async hide() {
    this.opened = false;
  }
  /**
   * Altera as opções.
  */
  async setOptions(options) {
    Object.assign(this.options, options);
  }
  /**
   * Altera o elemento de ancoragem.
  */
  async setAnchorElement(anchor) {
    this.anchorElement = anchor;
  }
  parseSizePixel(sizePixel, defaultValue) {
    if (!sizePixel) {
      return defaultValue !== null && defaultValue !== void 0 ? defaultValue : 0;
    }
    if (typeof sizePixel === "string") {
      return Number(sizePixel.replace("px", ""));
    }
    return sizePixel !== null && sizePixel !== void 0 ? sizePixel : 0;
  }
  updateOptionPosition(top, left) {
    Object.assign(this.options, {
      horizontalGap: this.parseSizePixel(left, this.options.horizontalGap),
      verticalGap: this.parseSizePixel(top, this.options.verticalGap),
    });
  }
  getElement(element) {
    if (typeof element === 'string') {
      return document.getElementById(element);
    }
    return element;
  }
  getAnchorElement() {
    if (!this.anchorElement) {
      return this._host;
    }
    if (Array.isArray(this.anchorElement)) {
      for (const element of this.anchorElement) {
        const htmlElement = this.getElement(element);
        if (htmlElement) {
          return htmlElement;
        }
      }
      return this._host;
    }
    return this.getElement(this.anchorElement);
  }
  async updatePositionPopover() {
    if (!this._box || !this.opened) {
      return;
    }
    const currentAnchorElement = this.getAnchorElement();
    await computePosition(currentAnchorElement, this._box, {
      placement: this.options.fromRight ? 'bottom-end' : 'bottom-start',
      middleware: [flip(), shift({ padding: 5 })],
      strategy: 'fixed',
    }).then(({ x, y, placement }) => {
      const newTop = placement.includes("bottom") ? y + this.options.verticalGap : y - this.options.verticalGap;
      const newLeft = placement.includes("start") ? x + this.options.horizontalGap : x - this.options.horizontalGap;
      Object.assign(this._box.style, {
        top: `${newTop}px`,
        left: `${newLeft}px`,
      });
    });
  }
  hidePopover() {
    if (!this._box) {
      return;
    }
    this._box.style.display = '';
    this.hideOverlay();
    this.ezVisibilityChange.emit(false);
  }
  async openPopover() {
    if (!this._box || !this.opened) {
      return;
    }
    this._box.style.display = 'flex';
    this._box.style.visibility = 'hidden';
    if (this.useAnchorSize) {
      const currentAnchorElement = this.getAnchorElement();
      const anchorSize = currentAnchorElement.getBoundingClientRect().width;
      const width = anchorSize < this.minWidth ? this.minWidth : anchorSize;
      this._box.style.width = `${width}px`;
    }
    await this.updatePositionPopover();
    this.openOverlay();
    this.ezVisibilityChange.emit(true);
    this._box.style.visibility = 'visible';
  }
  openOverlay() {
    if (!this._overlay || !this._overlayIsActive) {
      return;
    }
    this._overlay.style.display = 'block';
  }
  hideOverlay() {
    if (!this._overlay) {
      return;
    }
    this._overlay.style.display = 'none';
  }
  checkStatusOverlay() {
    if (this.overlayType !== "none") {
      return true;
    }
    if (this.overlayType === "none" && this.autoClose) {
      return true;
    }
    return false;
  }
  handlePositionUpdate() {
    if (!this.opened) {
      return;
    }
    this.updatePositionPopover();
  }
  componentWillLoad() {
    window.addEventListener('scroll', this.handlePositionUpdate.bind(this), true);
    window.addEventListener('resize', this.handlePositionUpdate.bind(this), true);
  }
  componentDidLoad() {
    this._overlayIsActive = this.checkStatusOverlay();
    this._resizeObserver = new ResizeObserver(this.updatePositionPopover.bind(this));
    this._resizeObserver.observe(this._box);
    this.openPopover();
  }
  disconnectedCallback() {
    window.removeEventListener('scroll', this.handlePositionUpdate.bind(this), true);
    window.removeEventListener('resize', this.handlePositionUpdate.bind(this), true);
    this._resizeObserver.disconnect();
  }
  render() {
    return (h(Host, null, h("div", { ref: el => this._overlay = el, onClick: () => this.hide(), class: `popover__overlay popover__overlay--${this.overlayType}` }), h("section", { ref: el => this._box = el, class: {
        "popover__box": true,
        "popover__box--fit-content": this.boxWidth === "fit-content",
        "popover__box--full-width": this.boxWidth !== "fit-content",
      } }, h("slot", null))));
  }
  get _host() { return getElement(this); }
  static get watchers() { return {
    "opened": ["observeOpened"]
  }; }
};
EzPopoverCore.style = ezPopoverCoreCss;

export { EzPopoverCore as ez_popover_core };
