import { h, Host } from '@stencil/core';
export class BsModal {
  constructor() {
    this.show = false;
    this.static = false;
    this.backdrop = true;
    this.animation = true;
    this.width = undefined;
    this.scrollable = false;
    this.centered = true;
    this.showModal = false;
  }
  /**
   * on component load, show dialog if needed
   */
  componentDidLoad() {
    if (this.show) {
      this.showDialog();
    }
  }
  /**
   * open or close the dialog when the show property changes
   */
  showChanged() {
    if (this.show) {
      this.showDialog();
    }
    else {
      this.closeDialog();
    }
  }
  /**
   * an exposed method to show the dialog
   */
  async showDialog() {
    this.showModal = true;
    this.open.emit();
  }
  /**
   * an exposed method to hide the dialog
   */
  async closeDialog() {
    this.showModal = false;
    this.close.emit();
  }
  /**
   * equivalent to closeDialog()
   */
  async hideDialog() {
    this.closeDialog();
  }
  /**
   * renders the modal component
   */
  render() {
    return (h(Host, { class: `
                    modal 
                    ${this.animation ? 'fade' : ''}
                    ${this.showModal ? 'show' : ''}
                ` }, h("bs-modal-dialog", { scrollable: this.scrollable, centered: this.centered && !this.scrollable, width: this.width, "on-close": () => this.closeDialog() }, h("slot", null)), h("div", { class: `modal-backdrop fade ${this.backdrop ? 'show' : ''}`, onClick: () => !this.static && this.closeDialog() })));
  }
  static get is() { return "bs-modal"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["bs-modal.scss"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["bs-modal.css"]
    };
  }
  static get properties() {
    return {
      "show": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "whether the modal is visible or not"
        },
        "attribute": "show",
        "reflect": false,
        "defaultValue": "false"
      },
      "static": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "if static, the modal will not close when the backdrop is clicked"
        },
        "attribute": "static",
        "reflect": false,
        "defaultValue": "false"
      },
      "backdrop": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "whether to use a backdrop or not"
        },
        "attribute": "backdrop",
        "reflect": false,
        "defaultValue": "true"
      },
      "animation": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "open and close the modal with a slide and fade animation"
        },
        "attribute": "animation",
        "reflect": false,
        "defaultValue": "true"
      },
      "width": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "change the width of the modal"
        },
        "attribute": "width",
        "reflect": false
      },
      "scrollable": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "if content inside the modal should be scrollable"
        },
        "attribute": "scrollable",
        "reflect": false,
        "defaultValue": "false"
      },
      "centered": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "if content inside the modal should be vertically centered"
        },
        "attribute": "centered",
        "reflect": false,
        "defaultValue": "true"
      }
    };
  }
  static get states() {
    return {
      "showModal": {}
    };
  }
  static get events() {
    return [{
        "method": "open",
        "name": "open",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "open event is triggered when the modal is opened"
        },
        "complexType": {
          "original": "any",
          "resolved": "any",
          "references": {}
        }
      }, {
        "method": "close",
        "name": "close",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "close event is triggered when the modal is closed"
        },
        "complexType": {
          "original": "any",
          "resolved": "any",
          "references": {}
        }
      }];
  }
  static get methods() {
    return {
      "showDialog": {
        "complexType": {
          "signature": "() => Promise<void>",
          "parameters": [],
          "references": {
            "Promise": {
              "location": "global"
            }
          },
          "return": "Promise<void>"
        },
        "docs": {
          "text": "an exposed method to show the dialog",
          "tags": []
        }
      },
      "closeDialog": {
        "complexType": {
          "signature": "() => Promise<void>",
          "parameters": [],
          "references": {
            "Promise": {
              "location": "global"
            }
          },
          "return": "Promise<void>"
        },
        "docs": {
          "text": "an exposed method to hide the dialog",
          "tags": []
        }
      },
      "hideDialog": {
        "complexType": {
          "signature": "() => Promise<void>",
          "parameters": [],
          "references": {
            "Promise": {
              "location": "global"
            }
          },
          "return": "Promise<void>"
        },
        "docs": {
          "text": "equivalent to closeDialog()",
          "tags": []
        }
      }
    };
  }
  static get watchers() {
    return [{
        "propName": "show",
        "methodName": "showChanged"
      }];
  }
}
//# sourceMappingURL=bs-modal.js.map
