'use strict';

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

const index = require('./index-fd2bbf0b.js');

const modalTemplateSettingsCss = "fireenjin-mx-modal-template-settings .head-input,fireenjin-mx-modal-template-settings .routes-input{display:block;width:100%}fireenjin-mx-modal-template-settings .head-input ion-label,fireenjin-mx-modal-template-settings .routes-input ion-label{font-size:16px !important;font-weight:bold !important;display:block;background:transparent;text-align:left;font-family:var(--ion-font-family);position:relative;font-size:inherit;text-align:inherit;padding:0 0 20px 25px}fireenjin-mx-modal-template-settings .head-input fireenjin-code-editor,fireenjin-mx-modal-template-settings .routes-input fireenjin-code-editor{min-height:300px !important}";

let ModalTemplateSettings = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.fireenjinTrigger = index.createEvent(this, "fireenjinTrigger", 7);
    this.pageTitle = "Edit Template Info";
    this.template = {};
    this.showAdvanced = false;
    this.tags = [];
  }
  async onSubmit() {
    this.fireenjinTrigger.emit({ name: "closeModal" });
  }
  async onReset() {
    this.fireenjinTrigger.emit({ name: "closeModal" });
  }
  onCodeChange(event) {
    var _a;
    if (!((_a = event === null || event === void 0 ? void 0 : event.detail) === null || _a === void 0 ? void 0 : _a.value))
      return;
    this.head = event.detail.value;
  }
  render() {
    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
    return [
      index.h("ion-header", null, index.h("ion-toolbar", null, index.h("ion-title", null, this.pageTitle), index.h("ion-buttons", { slot: "end" }, index.h("ion-button", { onClick: () => this.formEl.submit() }, index.h("ion-icon", { slot: "icon-only", name: "save" })), index.h("ion-button", { onClick: () => this.fireenjinTrigger.emit({
          name: "closeModal",
          el: this.modalEl,
          component: "mx-modal-send-email",
        }) }, index.h("ion-icon", { slot: "icon-only", name: "close-circle-outline" }))))),
      index.h("ion-content", null, index.h("fireenjin-form", { ref: (el) => (this.formEl = el), endpoint: this.templateId !== "new" ? "editTemplate" : "addTemplate", documentId: this.templateId, hideControls: true, beforeSubmit: async (data) => {
          var _a;
          return ({
            ...data,
            head: this.head || ((_a = this.template) === null || _a === void 0 ? void 0 : _a.head),
            partial: (data === null || data === void 0 ? void 0 : data.partial) === "on",
            prerender: (data === null || data === void 0 ? void 0 : data.prerender) === "on",
            attachments: ((data === null || data === void 0 ? void 0 : data.attachments) || []).map((href) => ({
              href,
              filename: href.split("/").pop(),
            })),
          });
        } }, index.h("fireenjin-input", { labelPosition: "stacked", name: "subject", label: "Subject", value: (_a = this.template) === null || _a === void 0 ? void 0 : _a.subject }), this.types && (index.h("fireenjin-select", { name: "type", label: "Type", labelPosition: "stacked", placeholder: "Select Type", value: (_b = this.template) === null || _b === void 0 ? void 0 : _b.type, interface: "action-sheet", options: this.types })), index.h("fireenjin-input", { labelPosition: "stacked", name: "description", label: "Description", value: (_c = this.template) === null || _c === void 0 ? void 0 : _c.description }), index.h("fireenjin-input", { labelPosition: "stacked", label: "Text Only Version", name: "text", value: (_d = this.template) === null || _d === void 0 ? void 0 : _d.text }), index.h("fireenjin-select-tags", { labelPosition: "stacked", label: "Tags", lines: "full", multiple: true, options: this.tags, allowAdding: true, value: ((_e = this.template) === null || _e === void 0 ? void 0 : _e.tags) || [] }), index.h("div", { id: "advanced", style: {
          transition: "all ease 0.4s",
          opacity: this.showAdvanced ? "1" : "0",
          height: this.showAdvanced ? "auto" : "0",
          overflow: "hidden",
        } }, index.h("fireenjin-input", { labelPosition: "stacked", name: "name", label: "Name", value: (_f = this.template) === null || _f === void 0 ? void 0 : _f.name }), index.h("fireenjin-select-tags", { labelPosition: "stacked", label: "Attachments", lines: "full", multiple: true, options: (((_g = this.template) === null || _g === void 0 ? void 0 : _g.attachments) || []).map((attachment) => ({
          label: attachment === null || attachment === void 0 ? void 0 : attachment.filename,
          value: attachment === null || attachment === void 0 ? void 0 : attachment.path,
        })), allowAdding: true, value: ((_h = this.template) === null || _h === void 0 ? void 0 : _h.attachments) || [] }), index.h("fireenjin-input", { labelPosition: "stacked", label: "AMP Version", name: "amp", value: (_j = this.template) === null || _j === void 0 ? void 0 : _j.amp }), index.h("ion-grid", null, index.h("ion-row", null, index.h("ion-col", null, index.h("fireenjin-toggle", { label: "Template Partial", name: "partial", value: !!((_k = this.template) === null || _k === void 0 ? void 0 : _k.partial) })), index.h("ion-col", null, index.h("fireenjin-toggle", { label: "Prerender", name: "prerender", value: !!((_l = this.template) === null || _l === void 0 ? void 0 : _l.prerender) })))), index.h("div", { class: "head-input" }, index.h("ion-label", { class: "sc-ion-label-md-h sc-ion-label-md-s md label-stacked hydrated" }, "Head"), index.h("fireenjin-code-editor", { name: "head", value: ((_m = this.template) === null || _m === void 0 ? void 0 : _m.head) || "" }))), index.h("ion-button", { fill: "clear", expand: "full", onClick: () => (this.showAdvanced = !this.showAdvanced) }, this.showAdvanced ? "Hide" : "Show", " Advnaced"))),
    ];
  }
  get modalEl() { return index.getElement(this); }
};
ModalTemplateSettings.style = modalTemplateSettingsCss;

exports.fireenjin_mx_modal_template_settings = ModalTemplateSettings;

//# sourceMappingURL=fireenjin-mx-modal-template-settings.cjs.entry.js.map