import { Host, h } from '@stencil/core';
/**
 * Outputs a modal which is a dialog that appears on top of the main content and
 * moves the system into a special mode requiring user interaction. This dialog
 * disables the main content until the user explicitly interacts with the modal
 * dialog. Modals can be used to fragment a complex workflow into simpler steps.
 * Use modal dialogs to ask for information that, when provided, could
 * significantly lessen users’ work or effort. Do not use modal dialogs for
 * nonessential information that is not related to the current user flow.
 *
 * This component uses BsTransition (see usage examples).
 */
export class BsModal {
  constructor() {
    this.isVisible = false;
    this.alert = false;
    this.closeButton = true;
    this.enterControlled = false;
    this.enterTrigger = false;
    this.leaveTrigger = false;
  }
  /** Close the modal on Escape key. */
  handleEscape(ev) {
    if (this.isVisible && ev.key === 'Escape') {
      this.close.emit();
    }
  }
  handleEnterEnd() {
    this.isVisible = true;
    this.enterend.emit();
  }
  render() {
    return (h(Host, null, h("bs-overlay", { enterControlled: this.enterControlled, enterTrigger: this.enterTrigger, leaveTrigger: this.leaveTrigger }), h("bs-transition", { enterAttribute: 'data-shown', enterDuration: 75, enterControlled: this.enterControlled, enterTrigger: this.enterTrigger, leaveTrigger: this.leaveTrigger, onEnterend: () => this.handleEnterEnd(), onLeaveend: () => this.leaveend.emit() }, h("div", { class: "bs-modal", role: this.alert ? 'alertdialog' : 'dialog', "aria-modal": "true" }, this.closeButton && (h("div", { class: "close-button-container" }, h("button", { type: "button", title: "Close", "aria-label": "Close", onClick: () => this.close.emit() }, h("bs-icon-close", { class: "close-button" })))), h("slot", null)))));
  }
  static get is() { return "bs-modal"; }
  static get originalStyleUrls() {
    return {
      "$": ["bs-modal.scss"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["bs-modal.css"]
    };
  }
  static get properties() {
    return {
      "alert": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Whether or not this is an \"alert\" type modal. Adds `role=\"alertdialog\"`\ninstead of just `\"dialog\"`."
        },
        "attribute": "alert",
        "reflect": false,
        "defaultValue": "false"
      },
      "closeButton": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Whether or not to include a \"close\" button at the top of modal content."
        },
        "attribute": "close-button",
        "reflect": false,
        "defaultValue": "true"
      },
      "enterControlled": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Whether or not the enter transition should be controlled manually. Useful\nwhen the enter transition needs to be triggered manually (e.g. \\`v-show\\`\nin Vue)."
        },
        "attribute": "enter-controlled",
        "reflect": false,
        "defaultValue": "false"
      },
      "enterTrigger": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Only used when \\`enterControlled\\` is \\`true\\`. When ready to play the\nenter transition, set this to \\`true\\`."
        },
        "attribute": "enter-trigger",
        "reflect": false,
        "defaultValue": "false"
      },
      "leaveTrigger": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "If desired, leave transition needs to be triggered manually. Set this to\n\\`true\\` when ready to fire leave transition."
        },
        "attribute": "leave-trigger",
        "reflect": false,
        "defaultValue": "false"
      }
    };
  }
  static get events() {
    return [{
        "method": "close",
        "name": "close",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "Emits when the user clicks the \"close\" button or presses the \"Escape\" key."
        },
        "complexType": {
          "original": "any",
          "resolved": "any",
          "references": {}
        }
      }, {
        "method": "enterend",
        "name": "enterend",
        "bubbles": false,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "Emits when the enter transition has ended. The element should be fully\nrendered by now and may be manipulated (e.g. setting focus)."
        },
        "complexType": {
          "original": "any",
          "resolved": "any",
          "references": {}
        }
      }, {
        "method": "leaveend",
        "name": "leaveend",
        "bubbles": false,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "Only emits when \\`leaveTrigger\\` is toggled and the leave transition has\nended. The element can be fully removed from the DOM now."
        },
        "complexType": {
          "original": "any",
          "resolved": "any",
          "references": {}
        }
      }];
  }
  static get listeners() {
    return [{
        "name": "keydown",
        "method": "handleEscape",
        "target": "window",
        "capture": false,
        "passive": false
      }];
  }
}
//# sourceMappingURL=bs-modal.js.map
