'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-a7b0c73d.js');
const core = require('@sankhyalabs/core');
const index$1 = require('./index-1be40f19.js');

const ezPopupCss = ":host{display:flex;width:auto;--ez-popup-z-index:var(--elevation--24, 24);--ez-popup__container--color:var(--title--primary, #2b3a54);--ez-popup__container--padding:var(--space--24, 24px);--ez-popup__title--font-family:var(--font--pattern, \"Roboto\");--ez-popup__title--font-size:var(--font-size--xxlarge, 22px);--ez-popup__title--color:var(--title--primary, #00281D);--ez-popup__title--font-weight:var(--font-weight--regular, 400)}.overlay{position:fixed;display:flex;top:0px;z-index:var(--ez-popup-z-index, 24);left:0px;width:100%;align-items:center;justify-content:center;box-sizing:border-box;height:100vh;backdrop-filter:blur(4px);background:rgba(0, 4, 12, 0.4)}.popup__container{width:auto;max-height:90%;height:100%;display:flex;flex-direction:column;overflow:hidden;outline:none;background:#FFFF;color:var(--ez-popup__container--color);border-radius:12px;box-shadow:0px 0px 16px rgba(0, 38, 111, 0.122);box-sizing:border-box;padding:var(--ez-popup__container--padding);margin:0;border:none;position:unset}.popup__container--auto{height:auto}.popup__overflow-y--auto{overflow-y:auto}.popup__content{box-sizing:border-box;height:100%;width:100%}.popup__expandable-content{flex-grow:1;box-sizing:border-box;width:100%;font-family:var(--font--pattern, \"Roboto\");font-size:var(--font-size--default, 14px);color:var(--title--primary, #00281D);font-weight:var(--font-weight--regular, 400)}.popup__header{flex-shrink:0;width:100%;display:flex;align-items:center;margin-bottom:var(--space--16, 16px)}.popup__title{display:flex;margin:0;width:100%;font-family:var(--ez-popup__title--font-family);font-size:var(--ez-popup__title--font-size);font-weight:var(--ez-popup__title--font-weight);color:var(--ez-popup__title--color);line-height:var(--line-height--32, 32px)}.btn-close{justify-content:flex-end;align-self:flex-start;align-items:flex-start;display:flex;outline:none;border:none;background-color:unset;cursor:pointer}.btn-close--solo{width:100%}.popup__footer{flex-shrink:0;display:flex;width:100%;flex-direction:row-reverse;gap:var(--space--8, 8px)}.popup_margin-top{margin-top:var(--space--16, 16px)}.row{width:100%;display:flex;flex-wrap:wrap}.col{display:flex;flex-wrap:wrap;align-self:flex-start;box-sizing:border-box}.col--stretch{align-self:stretch}.col--undefined{width:unset}.col--nowrap{flex-wrap:nowrap}.ez-popup__size-limit--x-small{min-width:350px;max-width:560px}@media screen and (min-width: 320px){.col--sd-1{width:8.33333%}.col--sd-2{width:16.66667%}.col--sd-3{width:25%}.col--sd-4{width:33.33333%}.col--sd-5{width:41.66667%}.col--sd-6{width:50%}.col--sd-7{width:58.33333%}.col--sd-8{width:66.66667%}.col--sd-9{width:75%}.col--sd-10{width:83.33333%}.col--sd-11{width:91.66667%}.col--sd-12{width:100%}}@media screen and (min-width: 480px){.col--pn-1{width:8.33333%}.col--pn-2{width:16.66667%}.col--pn-3{width:25%}.col--pn-4{width:33.33333%}.col--pn-5{width:41.66667%}.col--pn-6{width:50%}.col--pn-7{width:58.33333%}.col--pn-8{width:66.66667%}.col--pn-9{width:75%}.col--pn-10{width:83.33333%}.col--pn-11{width:91.66667%}.col--pn-12{width:100%}}@media screen and (min-width: 768px){.col--tb-1{width:8.33333%}.col--tb-2{width:16.66667%}.col--tb-3{width:25%}.col--tb-4{width:33.33333%}.col--tb-5{width:41.66667%}.col--tb-6{width:50%}.col--tb-7{width:58.33333%}.col--tb-8{width:66.66667%}.col--tb-9{width:75%}.col--tb-10{width:83.33333%}.col--tb-11{width:91.66667%}.col--tb-12{width:100%}}@media screen and (min-width: 992px){.col--md-1{width:8.33333%}.col--md-2{width:16.66667%}.col--md-3{width:25%}.col--md-4{width:33.33333%}.col--md-5{width:41.66667%}.col--md-6{width:50%}.col--md-7{width:58.33333%}.col--md-8{width:66.66667%}.col--md-9{width:75%}.col--md-10{width:83.33333%}.col--md-11{width:91.66667%}.col--md-12{width:100%}}@media screen and (min-width: 1200px){.col--ld-1{width:8.33333%}.col--ld-2{width:16.66667%}.col--ld-3{width:25%}.col--ld-4{width:33.33333%}.col--ld-5{width:41.66667%}.col--ld-6{width:50%}.col--ld-7{width:58.33333%}.col--ld-8{width:66.66667%}.col--ld-9{width:75%}.col--ld-10{width:83.33333%}.col--ld-11{width:91.66667%}.col--ld-12{width:100%}}";

const EzPopup = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.ezClosePopup = index.createEvent(this, "ezClosePopup", 7);
    this.ezPopupAction = index.createEvent(this, "ezPopupAction", 7);
    this.handleFooterSlotChange = (event) => {
      const slot = event.target;
      this._hasFooterSlotContent = slot.assignedElements().length > 0;
    };
    this._hasFooterSlotContent = false;
    this.size = "medium";
    this.opened = false;
    this.useHeader = true;
    this.heightMode = "full";
    this.ezTitle = undefined;
    this.enabledScroll = true;
    this.autoClose = true;
    this.footerButtons = [];
  }
  observeConfig() {
    this.manageOverflow();
  }
  async componentWillLoad() {
    this.i18n = await index$1.initI18n();
  }
  componentDidLoad() {
    this.popUpFocus();
    this._keyboardManager = new core.KeyboardManager({ propagate: false, element: this._element, enableShadowDom: true })
      .bind("Enter", this.ezPopupAction.emit.bind("OK"))
      .bind("Escape", () => this.closePopup())
      .bind("Esc", () => this.closePopup());
  }
  disconnectedCallback() {
    var _a;
    (_a = this._keyboardManager) === null || _a === void 0 ? void 0 : _a.unbindAllShortcutKeys();
  }
  closePopup() {
    this.opened = false;
    this.manageOverflow();
    this.ezClosePopup.emit();
  }
  manageOverflow() {
    if (this.opened) {
      window.document.body.style.overflow = "hidden";
    }
    else {
      window.document.body.style.overflow = "";
    }
  }
  manageOverlay() {
    if (this.opened) {
      this._overlayId = core.FloatingManager.subscribeOverlayControl(this._popupRef);
    }
    else {
      core.FloatingManager.unsubscribeOverlayControl(this._popupRef || this._overlayId);
    }
  }
  popUpFocus() {
    if (!this.opened) {
      return;
    }
    if (this._popupRef) {
      this._popupRef.focus();
    }
  }
  getGridSize() {
    var _a;
    const _sizeClasses = {
      "x-small": "col--sd-3 ez-popup__size-limit--x-small",
      "small": "col--sd-5",
      "medium": "col--sd-6",
      "large": "col--sd-9",
      "x-large": "col--sd-11",
      "default": "ez-popup__size-limit--x-small",
      "auto": "",
    };
    if (!this.size || !_sizeClasses.hasOwnProperty(this.size)) {
      return _sizeClasses["medium"];
    }
    return (_a = _sizeClasses[this.size]) !== null && _a !== void 0 ? _a : _sizeClasses["medium"];
  }
  getDialogClass() {
    let className = 'popup__container';
    if (this.heightMode === 'auto') {
      className += ' popup__container--auto';
    }
    className += ` ${this.getGridSize()}`;
    return className;
  }
  componentDidRender() {
    this.manageOverlay();
    this.popUpFocus();
  }
  handleAutoClose(event) {
    if (!this.opened || !this._popupRef || !this.autoClose) {
      return;
    }
    if (this._popupRef.contains(event.target)) {
      return;
    }
    const slot = this._popupRef.querySelector('slot');
    if (slot && slot.assignedElements().length > 0) {
      const assignedElements = slot.assignedElements();
      for (const element of assignedElements) {
        if (element.contains(event.target)) {
          return;
        }
      }
    }
    if (this._popupRef.shadowRoot && this._popupRef.shadowRoot.contains(event.target)) {
      return;
    }
    this.closePopup();
  }
  handleDefaultPropsButtonsByIndex(index) {
    switch (index) {
      case 0:
        return {
          label: this.i18n ? this.i18n('app.confirm') : 'Confirmar',
          variant: "primary",
          size: "small",
          onClick: () => {
            this.closePopup();
            this.ezPopupAction.emit("OK");
          }
        };
      case 1:
        return {
          label: this.i18n ? this.i18n('app.cancel') : 'Cancelar',
          variant: "secondary",
          size: "small",
          onClick: () => {
            this.closePopup();
          }
        };
      case 2:
        return {
          label: this.i18n ? this.i18n('app.close') : 'Fechar',
          variant: "tertiary",
          size: "small",
          onClick: () => {
            this.closePopup();
          }
        };
    }
  }
  renderFooterButtons() {
    return this.footerButtons.slice(0, 3).map((buttonProps, index$1) => (index.h("ez-button", Object.assign({ key: index$1 }, this.handleDefaultPropsButtonsByIndex(index$1), buttonProps))));
  }
  render() {
    return (index.h(index.Host, null, this.opened && (index.h("div", { class: "overlay", tabIndex: -1, onClick: this.handleAutoClose.bind(this) }, index.h("dialog", { ref: ref => this._popupRef = ref, class: this.getDialogClass() }, this.useHeader &&
      index.h("header", { class: "popup__header" }, !!this.ezTitle && index.h("h1", { class: "popup__title" }, this.ezTitle), index.h("ez-button", { class: this.ezTitle ? "btn-close" : "btn-close btn-close--solo", variant: "tertiary", mode: "icon", iconName: "close", size: "small", onClick: this.closePopup.bind(this) })), index.h("main", { class: {
        "popup__expandable-content": true,
        "popup__overflow-y--auto": this.enabledScroll
      } }, index.h("slot", null)), index.h("footer", { class: {
        "popup__footer": true,
        "popup_margin-top": this.footerButtons.length > 0 || this._hasFooterSlotContent
      } }, this.footerButtons.length > 0 && (this.renderFooterButtons()), index.h("slot", { name: 'footer', onSlotchange: this.handleFooterSlotChange })))))));
  }
  get _element() { return index.getElement(this); }
  static get watchers() { return {
    "opened": ["observeConfig"]
  }; }
};
EzPopup.style = ezPopupCss;

exports.ez_popup = EzPopup;
