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

var ModalAction;
(function (ModalAction) {
  ModalAction["CLOSE"] = "CLOSE";
  ModalAction["OK"] = "OK";
  ModalAction["CANCEL"] = "CANCEL";
  ModalAction["LOAD"] = "LOAD";
})(ModalAction || (ModalAction = {}));
const ModalAction$1 = ModalAction;

var ModalButtonStatus;
(function (ModalButtonStatus) {
  ModalButtonStatus["ENABLED"] = "ENABLED";
  ModalButtonStatus["DISABLED"] = "DISABLED";
  ModalButtonStatus["HIDDEN"] = "HIDDEN";
})(ModalButtonStatus || (ModalButtonStatus = {}));
const ModalButtonStatus$1 = ModalButtonStatus;

const ezModalContainerCss = ".sc-ez-modal-container-h{--ez-modal-container-overflow-y:auto;--ez-modal-container-overflow-x:hidden;display:flex;flex-direction:column;width:100%;height:100%}.ez-modal-container__header-container.sc-ez-modal-container{outline:none}.ez-modal-container__header.sc-ez-modal-container{display:flex;flex-wrap:nowrap;flex-direction:row;justify-content:space-between;align-items:start}.ez-modal-container__content.sc-ez-modal-container{overflow-y:var(--ez-modal-container-overflow-y);overflow-x:var(--ez-modal-container-overflow-x);outline:none;flex:1 1 auto}.ez-modal-container__content.sc-ez-modal-container::-webkit-scrollbar{width:var(--space--small);min-width:var(--space--small);max-width:var(--space--small)}.ez-modal-container__footer.sc-ez-modal-container{display:flex;flex-direction:row;justify-content:flex-end;gap:var(--space--8, 8px);width:100%;padding-top:var(--space--small, 6px)}.ez-modal-container__title.sc-ez-modal-container{display:grid}.ez-modal-container__close-button.sc-ez-modal-container{cursor:pointer;background-color:transparent;border:none;outline:none;padding:var(--space--6, 6px) 0px}.ez-modal-container__close-icon.sc-ez-modal-container{--icon--color:var(--title--primary, #2B3A54)}";

const EzModalContainer = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.ezModalAction = createEvent(this, "ezModalAction", 7);
    this.modalTitle = undefined;
    this.modalSubTitle = undefined;
    this.showTitleBar = true;
    this.cancelButtonLabel = undefined;
    this.okButtonLabel = undefined;
    this.cancelButtonStatus = undefined;
    this.okButtonStatus = undefined;
    this.showCloseButton = true;
    this.autoFocus = false;
  }
  async handleEzModalAction(event) {
    var _a;
    if ((event === null || event === void 0 ? void 0 : event.target) && (event === null || event === void 0 ? void 0 : event.target) === ((_a = this._element) === null || _a === void 0 ? void 0 : _a.parentElement)) {
      this.closeModal();
    }
  }
  cancelIsVisible() {
    return (this.cancelButtonStatus !== ModalButtonStatus$1.HIDDEN && this.cancelButtonLabel != undefined);
  }
  okIsVisible() {
    return (this.okButtonStatus !== ModalButtonStatus$1.HIDDEN && this.okButtonLabel != undefined);
  }
  emitOkAction() {
    this.ezModalAction.emit(ModalAction$1.OK);
  }
  async componentWillLoad() {
    this.i18n = await initI18n();
  }
  connectedCallback() {
    this._keyboardManager = new KeyboardManager({ propagate: false, element: this._element })
      .bind("Enter", () => this.emitOkAction())
      .bind("Escape", () => this.closeModal())
      .bind("Esc", () => this.closeModal());
  }
  componentDidLoad() {
    window.requestAnimationFrame(() => {
      this.ezModalAction.emit(ModalAction$1.LOAD);
      if (this.autoFocus) {
        this._modalRef.focus();
      }
    });
  }
  disconnectedCallback() {
    var _a;
    (_a = this._keyboardManager) === null || _a === void 0 ? void 0 : _a.unbindAllShortcutKeys();
  }
  closeModal() {
    this.ezModalAction.emit("CLOSE");
  }
  render() {
    return (h(Host, null, h("header", { ref: ref => this._modalRef = ref, tabIndex: -1, class: "ez-modal-container__header-container" }, this.showTitleBar && (h("div", { class: "ez-modal-container__header ez-margin-bottom--medium" }, h("div", { class: "ez-col ez-align--middle ez-modal-container__title" }, h("h2", { class: "ez-text ez-title--large ez-title--primary ez-text--bold ez-margin-vertical--extra-small" }, this.modalTitle), this.modalSubTitle && (h("div", { class: "ez-text ez-text--medium ez-text--primary ez-margin-vertical--extra-small" }, this.modalSubTitle))), (this.showCloseButton && h("button", { ref: ref => this._closeButton = ref, class: "ez-modal-container__close-button", onClick: () => this.ezModalAction.emit(ModalAction$1.CLOSE), "aria-label": this.i18n("app.close") }, h("ez-icon", { class: "ez-modal-container__close-icon", size: "medium", iconName: "close" })))))), h("main", { tabIndex: -1, class: "ez-modal-container__content" }, h("slot", null)), h("footer", { tabIndex: -1, class: "ez-modal-container__footer" }, this.cancelIsVisible() && (h("ez-button", { label: this.cancelButtonLabel || this.i18n("app.cancel"), isDisabled: this.cancelButtonStatus === ModalButtonStatus$1.DISABLED, onClick: () => this.ezModalAction.emit(ModalAction$1.CANCEL) })), this.okIsVisible() && (h("ez-button", { ref: ref => this._okButton = ref, class: "ez-button--primary", label: this.okButtonLabel || this.i18n("app.ok"), isDisabled: this.okButtonStatus === ModalButtonStatus$1.DISABLED, onClick: () => this.emitOkAction() })))));
  }
  get _element() { return getElement(this); }
};
EzModalContainer.style = ezModalContainerCss;

export { EzModalContainer as ez_modal_container };
