import { Component, Event, h, Prop, State } from '@stencil/core';
export class UxplModal {
  constructor() {
    this.minimized = false;
  }
  handleSizer() {
    this.minimized = !this.minimized;
  }
  handleClose() {
    this.closed.emit();
  }
  render() {
    return (h("div", { class: this.visible ? "wrapper visible" : "wrapper", style: {
        "width": this.width ? this.width : '400px',
        "max-width": this.width ? this.width : '400px',
        "min-width": this.width ? this.width : '400px',
        "max-height": this.maxHeight ? this.maxHeight : '500px'
      } },
      h("div", { class: {
          'header': true
        }, style: {
          'background-color': this.color ? this.color : '#1774E5'
        } },
        h("div", { class: "heading-text" }, this.heading ? this.heading : ''),
        h("div", { class: {
            "modal-control-button": true,
            "sizer": true,
            "closed": this.minimized
          }, onClick: () => this.handleSizer() }),
        h("div", { class: "closer modal-control-button", onClick: () => this.handleClose() })),
      h("div", { class: {
          "content": true,
          "minimized": this.minimized !== undefined ? this.minimized : false
        } },
        h("slot", null))));
  }
  static get is() { return "uxpl-modal"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["uxpl-modal.css"]
  }; }
  static get styleUrls() { return {
    "$": ["uxpl-modal.css"]
  }; }
  static get assetsDirs() { return ["assets"]; }
  static get properties() { return {
    "visible": {
      "type": "boolean",
      "mutable": true,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "visible",
      "reflect": true
    },
    "color": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "color",
      "reflect": false
    },
    "heading": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "heading",
      "reflect": false
    },
    "width": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "width",
      "reflect": false
    },
    "maxHeight": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "max-height",
      "reflect": false
    }
  }; }
  static get states() { return {
    "minimized": {}
  }; }
  static get events() { return [{
      "method": "closed",
      "name": "closed",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }]; }
}
