import { Component, h, Host, Prop, State } from '@stencil/core';
export class ShowcaseDialog {
  constructor() {
    this.showDialog1 = false;
    this.showDialog2 = false;
  }
  render() {
    return (h(Host, { class: "d-flex" },
      this.show === undefined &&
        h("div", null,
          h("dvn-button", { onClick: () => this.showDialog1 = true }, "Show Dialog"),
          h("dvn-button", { onClick: () => this.showDialog2 = true }, "Show Raw Dialog"),
          h("dvn-dialog", { title: "Are you sure to exit?", shown: this.showDialog1, onDismiss: () => this.showDialog1 = false },
            h("div", null, "This action is irreversible. You'll not be able to view this item if you confirm this action."),
            h("div", { slot: "actions" },
              h("dvn-button", { tint: "primary", view: "flat", onClick: () => this.showDialog1 = false }, "Cancel"),
              h("dvn-button", { tint: "danger", view: "flat" }, "Yes, Delete"))),
          h("dvn-dialog", { shown: this.showDialog2, onDismiss: () => this.showDialog2 = false, raw: true },
            h("p", { style: { padding: '0 1rem' } }, "This is a raw dialog, meaning that it will only act as a wrapper. Header, body and footers must be handled manually."))),
      this.show === 'first' &&
        h("dvn-dialog", { title: "Are you sure to exit?", shown: true },
          h("div", null, "This action is irreversible. You'll not be able to view this item if you confirm this action."),
          h("div", { slot: "actions" },
            h("dvn-button", { tint: "primary", view: "flat" }, "Cancel"),
            h("dvn-button", { tint: "danger", view: "flat" }, "Yes, Delete"))),
      this.show === 'second' &&
        h("dvn-dialog", { shown: true, raw: true },
          h("p", { style: { padding: '0 1rem' } }, "This is a raw dialog, meaning that it will only act as a wrapper. Header, body and footers must be handled manually."))));
  }
  static get is() { return "showcase-dialog"; }
  static get properties() { return {
    "show": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "show",
      "reflect": false
    }
  }; }
  static get states() { return {
    "showDialog1": {},
    "showDialog2": {}
  }; }
}
