'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 ezModalCss = ":host{--ez-modal-z-index:var(--elevation--22, 22);--ez-modal-vertical-padding:var(--space--large, 24px);--ez-modal-content-padding:24px;display:block}.modal{position:fixed;display:flex;top:0px;z-index:var(--ez-modal-z-index);left:0px;width:100%;box-sizing:border-box;height:100vh;outline:none}.modal__screen-light{background:rgba(0, 4, 12, 0.1)}.modal__screen-none{background:none}.modal__screen-medium{backdrop-filter:blur(4px);background:rgba(0, 4, 12, 0.4)}.modal__vertical-padding{padding:var(--ez-modal-vertical-padding) 0}@keyframes expand-modal--left{from{transform:translate(-100%)}}@keyframes expand-modal--right{from{transform:translate(100%)}}.modal__container{display:flex;flex-wrap:wrap;height:100%;box-sizing:border-box;width:100%;align-items:flex-start}.modal__container--right{animation:expand-modal--right .2s ease-in-out 1;justify-content:flex-end}.modal__container--left{animation:expand-modal--left .2s ease-in-out 1;justify-content:flex-start}.modal__content{display:flex;flex-wrap:wrap;box-sizing:border-box;max-height:100%;height:100%;overflow-y:auto;background-color:rgb(255, 255, 255);padding:var(--ez-modal-content-padding);box-shadow:rgb(0 38 111 / 12%) 0px 0px 16px 0px}.modal__content--right{border-radius:12px 0px 0px 12px}.modal__content--left{border-radius:0px 12px 12px 0px}.modal__box__container{display:flex;flex-wrap:wrap;background-color:#fff;width:100%;border-radius:12px}.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}@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 EzModal = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.ezCloseModal = index.createEvent(this, "ezCloseModal", 7);
    this.ezOpenModal = index.createEvent(this, "ezOpenModal", 7);
    this.ezModalAction = index.createEvent(this, "ezModalAction", 7);
    this.modalSize = undefined;
    this.align = undefined;
    this.heightMode = "regular";
    this.opened = true;
    this.closeEsc = false;
    this.closeOutsideClick = false;
    this.closeOutsideLeave = false;
    this.scrim = "medium";
  }
  observeOpened() {
    if (this.opened) {
      this._overlayId = core.FloatingManager.subscribeOverlayControl(this._modalRef);
    }
    else {
      core.FloatingManager.unsubscribeOverlayControl(this._modalRef || this._overlayId);
    }
  }
  closeModal() {
    this.opened = false;
    this.ezCloseModal.emit(this.opened);
  }
  async componentWillLoad() {
    this.i18n = await index$1.initI18n();
  }
  componentDidLoad() {
    this.observeOpened();
    this._keyboardManager = new core.KeyboardManager({ propagate: false, element: this._element, enableShadowDom: true })
      .bind("Enter", this.ezModalAction.emit.bind("OK"))
      .bind("Escape", () => this.closeModal())
      .bind("Esc", () => this.closeModal());
  }
  componentDidRender() {
    this.modalFocus();
  }
  disconnectedCallback() {
    var _a;
    (_a = this._keyboardManager) === null || _a === void 0 ? void 0 : _a.unbindAllShortcutKeys();
  }
  modalFocus() {
    if (!this.opened) {
      return;
    }
    requestAnimationFrame(() => {
      const slot = this._element.shadowRoot.querySelector("ez-modal-container");
      if (this._modalRef && slot === null) {
        this._modalRef.focus();
      }
    });
  }
  onMouseDownHandler(event) {
    if (this.closeOutsideClick && event.target === this._overlay) {
      this.closeModal();
    }
  }
  onMouseLeaveHandler() {
    if (this.closeOutsideLeave) {
      this.closeModal();
    }
  }
  render() {
    const positionSufix = this.align === "left" ? "left" : "right";
    const regularVerticalPaddingClass = this.heightMode === "regular" ? 'modal__vertical-padding' : '';
    const modalContentHeightMode = this.heightMode === "regular" ? `modal__content--${positionSufix}` : '';
    const scrimType = `modal__screen-${this.scrim}`;
    return (index.h(index.Host, null, this.opened
      ?
        index.h("div", { ref: ref => this._modalRef = ref, class: `modal ${scrimType} ${regularVerticalPaddingClass}`, onMouseDown: evt => this.onMouseDownHandler(evt), tabIndex: -1, "aria-label": this.i18n("ez-modal.close") }, index.h("div", { class: `modal__container modal__container--${positionSufix}`, ref: ref => this._overlay = ref }, index.h("div", { onMouseLeave: () => this.onMouseLeaveHandler(), class: `modal__content ${modalContentHeightMode} ${this.modalSize}` }, index.h("slot", null))))
      :
        undefined));
  }
  get _element() { return index.getElement(this); }
  static get watchers() { return {
    "opened": ["observeOpened"]
  }; }
};
EzModal.style = ezModalCss;

exports.ez_modal = EzModal;
