import { Component, Event, h, Host, Prop } from '@stencil/core';
export class ModalSection {
  constructor() {
    this.isHidden = true;
  }
  componentDidRender() {
    this.show ? this.showModal() : this.hideModal();
  }
  componentDidLoad() {
    this.modal.addEventListener('mouseup', (e) => {
      if (e.target === this.modal)
        this.hideModal();
    });
  }
  render() {
    return (h(Host, null,
      h("div", { class: "modal fade", ref: (el) => (this.modal = el) },
        h("div", { class: "modal-dialog modal-dialog-centered" },
          h("div", { class: "modal-content p-4" },
            this.showHeader ? (h("div", { class: "modal-header border-bottom-0 p-0" },
              h("h3", { class: "modal-title" }, this.modalTitle),
              h("button", { type: "button", onClick: () => this.hideModal(), class: "close" },
                h("span", { "aria-hidden": "true" }, "\u00D7")))) : (h("div", null)),
            h("div", { class: "modal-body p-0" },
              h("slot", null)),
            this.showFooter ? (h("div", { class: "modal-footer p-0 border-top-0 justify-content-center" },
              h("fl-button", { onClick: () => this.hideModal(), variant: "secondary" },
                h("span", { class: "px-4" }, "Close")))) : (h("div", null))))),
      h("div", { class: "modal-backdrop fade d-none", ref: (el) => (this.backdrop = el) })));
  }
  showModal() {
    if (!this.isHidden)
      return;
    this.modal.classList.add('show');
    this.modal.style.display = 'block';
    this.backdrop.classList.remove('d-none');
    this.backdrop.classList.add('show');
    this.isHidden = false;
  }
  hideModal() {
    var _a;
    if (this.isHidden)
      return;
    this.modal.classList.remove('show');
    this.modal.style.display = 'none';
    this.backdrop.classList.add('d-none');
    this.backdrop.classList.remove('show');
    (_a = this.modalClosed) === null || _a === void 0 ? void 0 : _a.emit();
    this.isHidden = true;
  }
  static get is() { return "ap-ben-modal-section"; }
  static get properties() { return {
    "show": {
      "type": "any",
      "mutable": false,
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "show",
      "reflect": false
    },
    "modalTitle": {
      "type": "any",
      "mutable": false,
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "modal-title",
      "reflect": false
    },
    "showFooter": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "show-footer",
      "reflect": false
    },
    "showHeader": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "show-header",
      "reflect": false
    }
  }; }
  static get events() { return [{
      "method": "modalClosed",
      "name": "modalClosed",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "void",
        "resolved": "void",
        "references": {}
      }
    }]; }
}
