import { Component, h, Prop, State, Watch } from "@stencil/core";
export class CorejamButton {
  constructor() {
    this.display = "flex";
    this.justify = "center";
    this.outline = "none";
    this.hoverOutline = "none";
    this.focusOutline = "none";
    //@todo fix these wrong types
    this.type = "button";
  }
  async componentWillLoad() {
    await this.computeStyles();
  }
  async computeStyles() {
    const hash = await (await import("../../utils/style")).calculateStyles(this);
    this.hash = hash;
  }
  render() {
    const Tag = this.type;
    return (h(Tag, { class: this.hash },
      h("slot", null)));
  }
  static get is() { return "corejam-button"; }
  static get properties() { return {
    "display": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "display",
      "reflect": true,
      "defaultValue": "\"flex\""
    },
    "justify": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "justify",
      "reflect": true,
      "defaultValue": "\"center\""
    },
    "w": {
      "type": "any",
      "mutable": false,
      "complexType": {
        "original": "number | string",
        "resolved": "number | string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "w",
      "reflect": true
    },
    "smW": {
      "type": "any",
      "mutable": false,
      "complexType": {
        "original": "number | string",
        "resolved": "number | string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "sm-w",
      "reflect": true
    },
    "mdW": {
      "type": "any",
      "mutable": false,
      "complexType": {
        "original": "number | string",
        "resolved": "number | string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "md-w",
      "reflect": true
    },
    "lgW": {
      "type": "any",
      "mutable": false,
      "complexType": {
        "original": "number | string",
        "resolved": "number | string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "lg-w",
      "reflect": true
    },
    "xlW": {
      "type": "any",
      "mutable": false,
      "complexType": {
        "original": "number | string",
        "resolved": "number | string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "xl-w",
      "reflect": true
    },
    "bg": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "bg",
      "reflect": true
    },
    "hoverBg": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "hover-bg",
      "reflect": true
    },
    "focusBg": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "focus-bg",
      "reflect": true
    },
    "outline": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "outline",
      "reflect": true,
      "defaultValue": "\"none\""
    },
    "hoverOutline": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "hover-outline",
      "reflect": true,
      "defaultValue": "\"none\""
    },
    "focusOutline": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "focus-outline",
      "reflect": true,
      "defaultValue": "\"none\""
    },
    "type": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "\"a\" | \"button\" | \"reset\" | \"submit\"",
        "resolved": "\"a\" | \"button\" | \"reset\" | \"submit\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "type",
      "reflect": true,
      "defaultValue": "\"button\""
    },
    "color": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "color",
      "reflect": true
    },
    "hoverColor": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "hover-color",
      "reflect": true
    },
    "focusColor": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "focus-color",
      "reflect": true
    },
    "p": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "p",
      "reflect": true
    },
    "pl": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "pl",
      "reflect": true
    },
    "pr": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "pr",
      "reflect": true
    },
    "pt": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "pt",
      "reflect": true
    },
    "pb": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "pb",
      "reflect": true
    },
    "transition": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "transition",
      "reflect": true
    },
    "duration": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "duration",
      "reflect": true
    },
    "timing": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "timing",
      "reflect": true
    },
    "delay": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "delay",
      "reflect": true
    },
    "animation": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "animation",
      "reflect": true
    },
    "rounded": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "rounded",
      "reflect": true
    }
  }; }
  static get states() { return {
    "hash": {}
  }; }
  static get watchers() { return [{
      "propName": "display",
      "methodName": "computeStyles"
    }, {
      "propName": "w",
      "methodName": "computeStyles"
    }, {
      "propName": "smW",
      "methodName": "computeStyles"
    }, {
      "propName": "mdW",
      "methodName": "computeStyles"
    }, {
      "propName": "lgW",
      "methodName": "computeStyles"
    }, {
      "propName": "xlW",
      "methodName": "computeStyles"
    }, {
      "propName": "bg",
      "methodName": "computeStyles"
    }, {
      "propName": "hoverBg",
      "methodName": "computeStyles"
    }, {
      "propName": "focusBg",
      "methodName": "computeStyles"
    }, {
      "propName": "color",
      "methodName": "computeStyles"
    }, {
      "propName": "hoverColor",
      "methodName": "computeStyles"
    }, {
      "propName": "focusColor",
      "methodName": "computeStyles"
    }, {
      "propName": "p",
      "methodName": "computeStyles"
    }, {
      "propName": "pl",
      "methodName": "computeStyles"
    }, {
      "propName": "pr",
      "methodName": "computeStyles"
    }, {
      "propName": "pt",
      "methodName": "computeStyles"
    }, {
      "propName": "pb",
      "methodName": "computeStyles"
    }, {
      "propName": "outline",
      "methodName": "computeStyles"
    }, {
      "propName": "hoverOutline",
      "methodName": "computeStyles"
    }, {
      "propName": "focusOutline",
      "methodName": "computeStyles"
    }, {
      "propName": "transition",
      "methodName": "computeStyles"
    }]; }
}
