import { r as registerInstance, d as createEvent, h } from './index-26447f8a.js';

const modalCodeEditorCss = "fireenjin-mx-modal-code-editor fireenjin-code-editor{position:absolute;top:0;left:0;right:0;bottom:0;height:100%;width:100%;min-height:100%;min-width:100%}";

const ModalEditor = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.fireenjinTrigger = createEvent(this, "fireenjinTrigger", 7);
    this.pageTitle = "Sample Data";
    this.name = "sampleData";
    this.language = undefined;
    this.value = undefined;
    this.endpoint = undefined;
    this.documentId = undefined;
    this.outputObject = true;
    this.beforeSubmit = undefined;
  }
  async onSubmit() {
    this.fireenjinTrigger.emit({ name: "closeModal" });
  }
  render() {
    return [
      h("ion-header", null, h("ion-toolbar", null, h("ion-title", null, this.pageTitle || "Sample Data"), h("ion-buttons", { slot: "end" }, this.documentId && (h("ion-button", { onClick: () => this.formEl.submit() }, h("ion-icon", { slot: "icon-only", name: "save" }))), h("ion-button", { onClick: () => this.fireenjinTrigger.emit({ name: "closeModal" }) }, h("ion-icon", { slot: "icon-only", name: "close-circle-outline" }))))),
      h("ion-content", { style: {
          "--background": "var(--ion-color-base)",
        } }, h("fireenjin-form", { ref: (el) => (this.formEl = el), endpoint: this.endpoint, documentId: this.documentId, beforeSubmit: this.beforeSubmit, hideControls: true }, h("fireenjin-code-editor", { name: this.name || "sampleData", language: this.language || "json", value: this.value, outputObject: this.outputObject }))),
    ];
  }
};
ModalEditor.style = modalCodeEditorCss;

export { ModalEditor as fireenjin_mx_modal_code_editor };
